/* ============================================================
   Avelle — Framer-language restyle for the cs3-* case study
   markup (Inspired Cannabis). Loads after framer.css.
   ============================================================ */
.container{max-width:1120px;margin:0 auto;padding:0 1.5rem}
.cs3-page{padding:2rem 0 4rem}

/* ===== Document header ===== */
.cs3-doc-header{max-width:860px;margin:0 auto 2.5rem;text-align:center}
.cs3-doc-badge{display:inline-flex;align-items:center;gap:.55rem;padding:6px 16px;border-radius:100px;
  background-image:var(--glass);box-shadow:var(--glass-shadow);font-size:.85rem;font-weight:600;color:var(--ink)}
.cs3-doc-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--purple-deep);
  box-shadow:0 0 0 4px rgba(43,24,166,.14)}
.cs3-doc-header h1{font-family:'Satoshi',sans-serif;font-weight:500;font-size:clamp(2rem,4.6vw,3.2rem);
  line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:1.2rem 0 1rem}
.cs3-doc-header h1 span,.cs3-doc-header .highlight{
  background:linear-gradient(120deg,var(--purple),var(--purple-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cs3-doc-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem;margin-top:1.2rem}
.cs3-doc-meta-row{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:500;
  color:rgba(28,22,41,.58)}
.cs3-doc-meta-row strong{color:var(--ink);font-weight:600}

/* ===== Snapshot stat cards ===== */
.cs3-snapshot{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.15rem;
  max-width:960px;margin:0 auto 3.5rem}
.cs3-snapshot-card{padding:1.6rem 1.3rem;border-radius:22px;text-align:center;
  background:linear-gradient(180deg,#FFFFFF,#F9FAFE);border:1px solid rgba(82,78,240,.22);
  box-shadow:0 10px 28px -14px rgba(43,24,166,.18),var(--glass-shadow)}
.cs3-snapshot-num{display:block;font-family:'Satoshi',sans-serif;font-weight:700;
  font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.03em;line-height:1.1;
  background:linear-gradient(120deg,var(--purple),var(--purple-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cs3-snapshot-label{display:block;margin-top:.5rem;font-size:.84rem;font-weight:600;color:rgba(28,22,41,.55)}

/* ===== Sections ===== */
.cs3-section{max-width:860px;margin:0 auto 3rem}
.cs3-section-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.2rem}
.cs3-section-icon{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;
  color:var(--purple);background:linear-gradient(150deg,#F3EEFC,#E5DCF7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.cs3-section-icon svg{width:22px;height:22px}
.cs3-section-icon--problem{color:#B4472F;background:linear-gradient(150deg,#FCEFEC,#F7DED6)}
.cs3-section-icon--result{color:#0E7A4C;background:linear-gradient(150deg,#E9F8F1,#D5F0E3)}
.cs3-section h2{font-family:'Satoshi',sans-serif;font-weight:700;font-size:clamp(1.5rem,2.8vw,2rem);
  letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin:0}
.cs3-content{font-size:1rem;line-height:1.78;color:rgba(28,22,41,.72)}
.cs3-content p{margin-bottom:1.1rem}
.cs3-content strong{color:var(--ink)}
.cs3-content ul,.cs3-content ol{margin:0 0 1.2rem 1.3rem}
.cs3-content li{margin-bottom:.5rem}
.cs3-content a{color:var(--purple-deep);font-weight:600}

.cs3-two-col{display:grid;grid-template-columns:1fr 1fr;gap:2rem}

/* ===== Numbered steps ===== */
.cs3-steps{display:flex;flex-direction:column;gap:1rem;margin:1.4rem 0}
.cs3-step-row{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.3rem;border-radius:18px;
  background:linear-gradient(180deg,#FFFFFF,#F9FAFE);border:1px solid rgba(82,78,240,.22);
  box-shadow:var(--glass-shadow)}
.cs3-step-num{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:'Satoshi',sans-serif;font-weight:700;font-size:.88rem;color:#fff;
  background:linear-gradient(150deg,var(--purple),var(--purple-deep));
  box-shadow:0 6px 16px rgba(43,24,166,.3)}
.cs3-step-row strong{display:block;color:var(--ink);margin-bottom:.2rem}

/* ===== Dashboard screenshots ===== */
.cs3-img-block{margin:2rem 0}
.cs3-img-block img{width:100%;height:auto;display:block;border-radius:20px;
  border:1px solid rgba(82,78,240,.2);box-shadow:0 24px 55px -22px rgba(43,24,166,.35)}
.cs3-img-block figcaption,.cs3-img-block p{margin-top:.7rem;font-size:.82rem;text-align:center;
  color:rgba(28,22,41,.5)}

/* ===== Results bars ===== */
.cs3-results-grid{display:flex;flex-direction:column;gap:1.1rem;margin:1.6rem 0}
.cs3-result-item{padding:1.2rem 1.3rem;border-radius:18px;
  background:linear-gradient(180deg,#FFFFFF,#F9FAFE);border:1px solid rgba(82,78,240,.22);
  box-shadow:var(--glass-shadow)}
.cs3-result-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem;
  font-family:'Satoshi',sans-serif;font-weight:700;color:var(--ink)}
.cs3-result-top span:last-child{color:var(--purple-deep)}
.cs3-result-bar{height:8px;border-radius:100px;background:rgba(43,24,166,.1);overflow:hidden}
.cs3-result-fill{display:block;height:100%;border-radius:100px;
  background:linear-gradient(90deg,var(--purple),var(--purple-deep))}
.cs3-result-fill--green{background:linear-gradient(90deg,#34C88A,#0E7A4C)}
.cs3-result-desc{margin-top:.6rem;font-size:.88rem;line-height:1.55;color:rgba(28,22,41,.6)}

/* ===== Pull quote ===== */
.cs3-quote{max-width:860px;margin:2.5rem auto;padding:1.8rem 2rem;border-radius:0 22px 22px 0;
  border-left:4px solid var(--purple);background:linear-gradient(180deg,#FFFFFF,#F9FAFE);
  box-shadow:var(--glass-shadow)}
.cs3-quote p{font-family:'Satoshi',sans-serif;font-weight:500;font-size:1.15rem;line-height:1.55;
  color:var(--ink);margin-bottom:.7rem}
.cs3-quote cite,.cs3-quote footer{font-style:normal;font-size:.85rem;font-weight:600;color:rgba(28,22,41,.55)}

/* ===== Footer CTA ===== */
.cs3-footer-cta{max-width:860px;margin:3.5rem auto 0;padding:3rem 2rem;border-radius:28px;text-align:center;
  color:#fff;
  background:radial-gradient(80% 120% at 50% -20%, rgba(150,177,255,.55), rgba(150,177,255,0) 60%),
    linear-gradient(145deg,#2B18A6 0%,#524EF0 100%);
  box-shadow:0 30px 70px -20px rgba(43,24,166,.5)}
.cs3-footer-cta h2,.cs3-footer-cta h3{font-family:'Satoshi',sans-serif;font-weight:500;
  font-size:clamp(1.6rem,3.2vw,2.3rem);letter-spacing:-.03em;line-height:1.15;margin-bottom:.9rem}
.cs3-footer-cta p{max-width:560px;margin:0 auto 1.6rem;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.8)}
.cs3-footer-cta a,.cs3-footer-cta .btn{display:inline-flex;align-items:center;gap:.6rem;padding:13px 28px;
  border-radius:100px;text-decoration:none;font-size:.98rem;font-weight:600;color:var(--purple-deep);
  background:#fff;box-shadow:0 12px 30px -8px rgba(0,0,0,.35);transition:transform .18s}
.cs3-footer-cta a:hover{transform:translateY(-2px)}

/* back-to-results link */
.cs3-back{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:1.4rem;font-size:.9rem;
  font-weight:600;color:var(--purple-deep);text-decoration:none}
.cs3-back:hover{text-decoration:underline}

/* .cs3-reveal is a legacy wrapper class from the old template.
   Deliberately NOT animated: the whole page body sits inside these 8 wrappers,
   so any hide-then-reveal makes a blank page the failure mode. Content is
   always visible; entrance motion isn't worth that risk here. */
.cs3-reveal{opacity:1}

@media (max-width:820px){
  .cs3-two-col{grid-template-columns:1fr;gap:1.2rem}
  .cs3-snapshot{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){.cs3-snapshot{grid-template-columns:1fr}}