/* ═══════════════════════════════════════════════════
   case-study.css  |  ClearPaisa case study styles
═══════════════════════════════════════════════════ */



/* Tokens, reset, body, noise, progress bar — handled by style.css */

/* ══════════════════════════════════
   NAV
══════════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:16px 56px;display:flex;align-items:center;justify-content:space-between;
  background:rgba(14,14,16,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);transition:background .4s,border-color .4s;
}
[data-theme="light"] nav{background:rgba(250,250,250,.9)}
.nav-back{display:inline-flex;align-items:center;gap:10px;font-size:.8rem;color:var(--ink-2);letter-spacing:.04em;transition:color .2s}
.nav-back:hover{color:var(--accent)}
.nav-back svg{transition:transform .2s}
.nav-back:hover svg{transform:translateX(-3px)}
.nav-center{font-family:var(--font-m);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.nav-right{display:flex;align-items:center;gap:16px}
/* Logo show/hide, theme toggle styles — handled by style.css */

/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
#hero{
  min-height:100vh;padding:120px 56px 80px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:64px;align-items:center;
  position:relative;overflow:hidden;
}
.hero-glow{
  position:absolute;top:-150px;right:-100px;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,123,248,.14) 0%,transparent 65%);
  pointer-events:none;
}
.hero-glow2{
  position:absolute;bottom:-100px;left:-50px;width:350px;height:350px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,123,248,.07) 0%,transparent 65%);pointer-events:none;
}

.hero-left{position:relative;z-index:2}
.cs-breadcrumb{display:flex;align-items:center;gap:10px;margin-bottom:32px;opacity:0;animation:up .7s .1s var(--ease-out) forwards}
.bc-item{font-size:.72rem;color:var(--ink-3);letter-spacing:.08em;text-decoration:none;transition:color .2s}
a.bc-item:hover{color:var(--ink-1)}
.bc-sep{color:var(--ink-3);font-size:.8rem}
.bc-active{color:var(--accent)}

.hero-tag{display:inline-flex;align-items:center;gap:8px;background:var(--accent-dim);border:1px solid var(--border-s);color:var(--accent);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:100px;margin-bottom:24px;font-family:var(--font-m);opacity:0;animation:up .7s .15s var(--ease-out) forwards}

.hero-title{font-family:var(--font-d);font-size:clamp(4rem,8vw,7.5rem);font-weight:200;line-height:.92;letter-spacing:-.03em;color:var(--ink-1);margin-bottom:12px;opacity:0;animation:up .9s .2s var(--ease-out) forwards}
.hero-title em{font-style:italic;color:var(--accent-2)}
.hero-sub{font-family:var(--font-d);font-size:1.25rem;font-style:italic;color:var(--ink-2);margin-bottom:32px;opacity:0;animation:up .8s .3s var(--ease-out) forwards}
.hero-desc{font-size:1.025rem;color:var(--ink-2);line-height:1.8;max-width:480px;margin-bottom:48px;opacity:0;animation:up .8s .4s var(--ease-out) forwards}
.hero-desc strong{color:var(--ink-1);font-weight:500}

.hero-meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;opacity:0;animation:up .8s .5s var(--ease-out) forwards}
.hm-cell{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
.hm-label{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-family:var(--font-m);margin-bottom:6px}
.hm-val{font-size:.9rem;font-weight:500;color:var(--ink-1)}

/* Hero right — big phone display */
.hero-right{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;opacity:0;animation:fade .9s .3s var(--ease-out) forwards}

.hero-phones{position:relative;width:340px;height:480px}
.hero-phone{
  position:absolute;width:180px;height:340px;
  background:#08080A;border-radius:30px;
  border:2px solid rgba(255,255,255,.1);overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04);
}
.hero-phone::before{content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%);width:44px;height:5px;background:rgba(255,255,255,.1);border-radius:100px;z-index:10}
.hp1{left:0;top:50px;transform:rotate(-10deg);z-index:1}
.hp2{right:0;top:0;transform:rotate(8deg);z-index:3}
.hp3{left:80px;top:80px;transform:rotate(-2deg);z-index:2}

/* ══════════════════════════════════
   SECTION SYSTEM
══════════════════════════════════ */
.cs-section{padding:100px 56px;position:relative}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:0 56px}

.chapter-num{font-family:var(--font-m);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;gap:12px}
.chapter-num::before{content:'';width:24px;height:1px;background:var(--accent)}
.chapter-title{font-family:var(--font-d);font-size:clamp(2.2rem,4vw,3.5rem);font-weight:300;line-height:1.05;letter-spacing:-.025em;color:var(--ink-1);margin-bottom:24px}
.chapter-title em{font-style:italic;color:var(--ink-2)}
.chapter-intro{font-size:1rem;color:var(--ink-2);line-height:1.8;max-width:640px;margin-bottom:56px}
.chapter-intro strong{color:var(--ink-1);font-weight:500}

/* Reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rv.on{opacity:1;transform:translateY(0)}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Pull quote */
.pull-quote{
  border-left:3px solid var(--accent);
  padding:24px 32px;margin:48px 0;
  background:var(--card);border-radius:0 16px 16px 0;
}
.pq-text{font-family:var(--font-d);font-size:1.35rem;font-style:italic;color:var(--ink-1);line-height:1.5;margin-bottom:10px}
.pq-attr{font-size:.75rem;color:var(--ink-3);font-family:var(--font-m)}

/* Insight row */
.insight{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:10px;transition:border-color .2s}
.insight:hover{border-color:var(--border-s)}
.insight-icon{font-size:.875rem;color:var(--accent);margin-top:2px;flex-shrink:0;width:28px;height:28px;background:var(--accent-dim);border-radius:8px;display:flex;align-items:center;justify-content:center}
.insight-text{font-size:.875rem;color:var(--ink-2);line-height:1.7}
.insight-text strong{color:var(--ink-1);font-weight:500}

/* ══════════════════════════════════
   01 — PROBLEM
══════════════════════════════════ */
#problem{background:var(--bg)}
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.prob-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:36px;transition:border-color .25s,transform .25s}
.prob-card:hover{border-color:var(--border-s);transform:translateY(-3px)}
.prob-icon{font-size:2rem;margin-bottom:20px}
.prob-title{font-size:1rem;font-weight:500;color:var(--ink-1);margin-bottom:10px}
.prob-body{font-size:.875rem;color:var(--ink-2);line-height:1.7}

.hmw-box{margin-top:56px;background:linear-gradient(135deg,rgba(91,123,248,.08),transparent);border:1px solid var(--border-s);border-radius:20px;padding:48px}
.hmw-label{font-family:var(--font-m);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.hmw-statement{font-family:var(--font-d);font-size:1.75rem;font-weight:300;font-style:italic;color:var(--ink-1);line-height:1.4}

/* ══════════════════════════════════
   02 — RESEARCH
══════════════════════════════════ */
#research{background:var(--surface)}
.research-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}

.stat-boxes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px}
.stat-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;text-align:center}
.stat-big{font-family:var(--font-d);font-size:2.5rem;font-weight:400;color:var(--accent);line-height:1}
.stat-lbl{font-size:.68rem;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;margin-top:6px;font-family:var(--font-m)}

.quotes-stack{display:flex;flex-direction:column;gap:12px}
.user-quote{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;transition:border-color .25s}
.user-quote:hover{border-color:var(--border-s)}
.uq-text{font-size:.9rem;color:var(--ink-2);line-height:1.7;font-style:italic;margin-bottom:14px}
.uq-author{display:flex;align-items:center;gap:10px}
.uq-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-dim);border:1px solid var(--border-s);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:.875rem;color:var(--accent);flex-shrink:0}
.uq-name{font-size:.75rem;font-weight:500;color:var(--ink-1)}
.uq-role{font-size:.65rem;color:var(--ink-3);margin-top:1px}

/* Affinity themes */
.affinity-themes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:48px}
.af-theme{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;text-align:center;transition:border-color .25s,transform .25s}
.af-theme:hover{border-color:var(--border-s);transform:translateY(-3px)}
.af-icon{font-size:1.5rem;margin-bottom:12px}
.af-name{font-size:.875rem;font-weight:500;color:var(--ink-1);margin-bottom:6px}
.af-count{font-family:var(--font-m);font-size:.68rem;color:var(--accent);margin-bottom:8px}
.af-desc{font-size:.72rem;color:var(--ink-3);line-height:1.5}

/* ══════════════════════════════════
   03 — PERSONAS
══════════════════════════════════ */
#personas{background:var(--bg)}
.persona-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.persona-card{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:border-color .25s}
.persona-card:hover{border-color:var(--border-s)}
.persona-top{padding:32px 32px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:20px}
.persona-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,rgba(91,123,248,.2),rgba(91,123,248,.06));border:2px solid var(--border-s);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:1.5rem;color:var(--accent);flex-shrink:0}
.persona-name{font-size:1.1rem;font-weight:500;color:var(--ink-1)}
.persona-role{font-size:.75rem;color:var(--ink-3);margin-top:3px}
.persona-age{font-family:var(--font-m);font-size:.65rem;color:var(--accent);margin-top:2px}
.persona-body{padding:24px 32px}
.persona-section{margin-bottom:18px}
.persona-section-title{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-family:var(--font-m);margin-bottom:8px}
.persona-list{display:flex;flex-direction:column;gap:5px}
.persona-list-item{font-size:.8125rem;color:var(--ink-2);display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.persona-list-item::before{content:'→';color:var(--accent);font-size:.7rem;margin-top:2px;flex-shrink:0}
.persona-pain{color:#f87171 !important}
.persona-pain::before{content:'✗';color:#f87171 !important}

/* ══════════════════════════════════
   04 — JOURNEY MAP
══════════════════════════════════ */
#journey{background:var(--surface)}
.journey-table{width:100%;margin-top:48px;border-radius:20px;overflow:hidden;border:1px solid var(--border)}
.jt-head{display:grid;grid-template-columns:120px repeat(5,1fr);background:var(--card);border-bottom:1px solid var(--border)}
.jth{padding:14px 16px;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-family:var(--font-m);text-align:center;border-right:1px solid var(--border)}
.jth:last-child{border-right:none}
.jt-row{display:grid;grid-template-columns:120px repeat(5,1fr);border-bottom:1px solid var(--border)}
.jt-row:last-child{border-bottom:none}
.jt-row-label{padding:20px 16px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-family:var(--font-m);border-right:1px solid var(--border);display:flex;align-items:center;background:var(--card)}
.jt-cell{padding:16px;font-size:.78rem;color:var(--ink-2);text-align:center;border-right:1px solid var(--border);line-height:1.5}
.jt-cell:last-child{border-right:none}
.emotion-bar{display:flex;align-items:flex-end;justify-content:center;height:40px;margin-top:8px}
.emotion-dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.e-low{margin-bottom:0;background:#f87171}
.e-mid{margin-bottom:15px;background:var(--accent);opacity:.6}
.e-high{margin-bottom:30px;background:#4ade80}

/* ══════════════════════════════════
   05 — DESIGN DECISIONS
══════════════════════════════════ */
#decisions{background:var(--bg)}
.trust-model{
  background:linear-gradient(135deg,rgba(91,123,248,.06),transparent);
  border:1px solid var(--border-s);border-radius:24px;padding:48px;margin-top:48px;
}
.tm-title{font-family:var(--font-d);font-size:1.5rem;font-weight:400;color:var(--ink-1);margin-bottom:8px}
.tm-sub{font-size:.875rem;color:var(--ink-2);margin-bottom:36px;line-height:1.7}

.tm-steps{display:flex;gap:0;position:relative}
.tm-steps::before{content:'';position:absolute;top:20px;left:20px;right:20px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:100px;z-index:0}
.tm-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1;padding:0 12px}
.tm-step-num{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--font-m);font-size:.75rem;display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-weight:500;box-shadow:0 0 0 4px var(--bg)}
.tm-step-title{font-size:.8125rem;font-weight:500;color:var(--ink-1);margin-bottom:6px}
.tm-step-desc{font-size:.7rem;color:var(--ink-3);line-height:1.5}

.decision-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.dec-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:32px;transition:border-color .25s,transform .25s}
.dec-card:hover{border-color:var(--border-s);transform:translateY(-3px)}
.dec-num{font-family:var(--font-m);font-size:.62rem;color:var(--accent);margin-bottom:12px;letter-spacing:.1em}
.dec-title{font-size:.9375rem;font-weight:500;color:var(--ink-1);margin-bottom:10px}
.dec-body{font-size:.8125rem;color:var(--ink-2);line-height:1.7}
.dec-result{margin-top:14px;padding:10px 14px;background:rgba(74,222,128,.06);border:1px solid rgba(74,222,128,.15);border-radius:8px;font-size:.72rem;color:#4ade80}

/* ══════════════════════════════════
   06 — FIVE SCREENS
══════════════════════════════════ */
#screens{background:var(--surface)}
.screens-intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:80px}

.all-phones{display:flex;gap:20px;align-items:flex-end;justify-content:center;padding:60px 0 0;overflow-x:auto;scrollbar-width:none}
.all-phones::-webkit-scrollbar{display:none}

.phone-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;flex-shrink:0}
.phone-label{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-family:var(--font-m);text-align:center}
.phone-num{font-family:var(--font-d);font-size:.8rem;color:var(--accent);margin-bottom:4px}

.ph-device{
  width:170px;height:340px;
  background:#08080A;border-radius:30px;
  border:2px solid rgba(255,255,255,.12);overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04);
  position:relative;flex-shrink:0;
  transition:transform .3s var(--ease-out);
}
.ph-device:hover{transform:translateY(-8px) scale(1.02)}
.ph-device::before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:40px;height:4px;background:rgba(255,255,255,.1);border-radius:100px;z-index:10}

.phs{position:absolute;inset:0;padding:22px 10px 10px;display:flex;flex-direction:column;gap:6px;overflow:hidden}

/* Screen 1: Onboarding */
.s1{background:linear-gradient(160deg,#161618 0%,#0E0E10 100%)}
.s1-logo{width:36px;height:36px;background:rgba(91,123,248,.15);border-radius:12px;margin:8px auto;display:flex;align-items:center;justify-content:center;font-size:16px;border:1px solid rgba(91,123,248,.2)}
.s1-h{font-size:9px;color:#FAFAFA;font-weight:500;text-align:center;line-height:1.4}
.s1-p{font-size:5px;color:rgba(255,255,255,.3);text-align:center;line-height:1.6;margin-top:2px}
.s1-trust-row{display:flex;gap:4px;margin:8px 0}
.s1-trust{flex:1;background:rgba(91,123,248,.08);border:1px solid rgba(91,123,248,.12);border-radius:6px;padding:5px;text-align:center;font-size:4px;color:rgba(255,255,255,.3);line-height:1.5}
.s1-dots{display:flex;gap:4px;justify-content:center;margin-top:4px}
.s1-d{width:14px;height:2.5px;background:rgba(255,255,255,.1);border-radius:100px}
.s1-d.a{background:var(--accent);width:22px}
.s1-btn{margin-top:auto;background:var(--accent);border-radius:100px;padding:7px;text-align:center;font-size:5.5px;color:#fff;font-weight:500}

/* Screen 2: Sign Up */
.s2{background:linear-gradient(160deg,#161618 0%,#0E0E10 100%)}
.s2-h{font-size:8.5px;color:#FAFAFA;font-weight:500;text-align:center;margin-top:8px}
.s2-sub{font-size:4.5px;color:rgba(255,255,255,.25);text-align:center;margin-bottom:8px}
.s2-field{background:rgba(255,255,255,.04);border:1px solid rgba(91,123,248,.15);border-radius:6px;padding:6px 8px;margin-bottom:5px}
.s2-fl{font-size:3.5px;color:rgba(91,123,248,.6);margin-bottom:2px;letter-spacing:.05em}
.s2-fv{font-size:5.5px;color:rgba(255,255,255,.5)}
.s2-field.active{border-color:rgba(91,123,248,.5);background:rgba(91,123,248,.06)}
.s2-privacy{display:flex;align-items:flex-start;gap:4px;margin-top:4px;padding:5px;background:rgba(74,222,128,.05);border:1px solid rgba(74,222,128,.12);border-radius:5px}
.s2-ptext{font-size:4px;color:rgba(255,255,255,.2);line-height:1.5}
.s2-btn{margin-top:auto;background:var(--accent);border-radius:100px;padding:6px;text-align:center;font-size:5px;color:#fff;font-weight:500}

/* Screen 3: Dashboard */
.s3{background:linear-gradient(160deg,#1D1D20 0%,#161618 100%)}
.s3-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.s3-greet{font-size:5.5px;color:rgba(255,255,255,.3)}
.s3-name{font-size:7.5px;color:#FAFAFA;font-weight:500}
.s3-notif{width:16px;height:16px;background:rgba(91,123,248,.15);border-radius:5px}
.s3-balance-card{background:linear-gradient(135deg,rgba(91,123,248,.2),rgba(91,123,248,.06));border:1px solid rgba(91,123,248,.2);border-radius:10px;padding:10px;margin-bottom:6px}
.s3-bl{font-size:4px;color:rgba(255,255,255,.35);letter-spacing:.08em;text-transform:uppercase}
.s3-bamt{font-family:serif;font-size:18px;color:#FAFAFA;font-weight:400;letter-spacing:-.01em;line-height:1.1}
.s3-bsub{font-size:4px;color:rgba(74,222,128,.8);margin-top:2px}
.s3-chart{display:flex;align-items:flex-end;gap:2.5px;height:28px;margin:5px 0}
.s3-bar{flex:1;border-radius:1.5px 1.5px 0 0;background:rgba(91,123,248,.2)}
.s3-bar.a{background:var(--accent)}
.s3-bar:nth-child(1){height:40%}.s3-bar:nth-child(2){height:60%}.s3-bar:nth-child(3){height:45%}
.s3-bar:nth-child(4){height:80%}.s3-bar:nth-child(5){height:65%}.s3-bar:nth-child(6){height:90%}.s3-bar:nth-child(7){height:72%}
.s3-row{display:flex;gap:4px}
.s3-mini{flex:1;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:5px}
.s3-ml{font-size:3.5px;color:rgba(255,255,255,.2)}
.s3-mv{font-size:6.5px;font-weight:500}

/* Screen 4: Expense Logger */
.s4{background:linear-gradient(160deg,#1D1D20 0%,#0E0E10 100%)}
.s4-h{font-size:8px;color:#FAFAFA;font-weight:500;margin-top:6px}
.s4-sub{font-size:4.5px;color:rgba(255,255,255,.25);margin-bottom:8px}
.s4-cats{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.s4-cat{font-size:4px;padding:3px 6px;border-radius:100px;background:rgba(91,123,248,.1);border:1px solid rgba(91,123,248,.2);color:rgba(91,123,248,.8)}
.s4-cat.a{background:rgba(91,123,248,.25);color:#8BA3FF}
.s4-amount{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px;text-align:center;margin-bottom:6px}
.s4-amtlbl{font-size:3.5px;color:rgba(255,255,255,.2);text-transform:uppercase;letter-spacing:.08em}
.s4-amtval{font-family:serif;font-size:18px;color:#FAFAFA;font-weight:400;letter-spacing:-.01em}
.s4-note{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:5px 8px;font-size:4.5px;color:rgba(255,255,255,.2);margin-bottom:6px}
.s4-btn{background:rgba(74,222,128,.15);border:1px solid rgba(74,222,128,.25);border-radius:100px;padding:6px;text-align:center;font-size:5px;color:#4ade80;font-weight:500}

/* Screen 5: Insights */
.s5{background:linear-gradient(160deg,#1D1D20 0%,#161618 100%)}
.s5-h{font-size:8px;color:#FAFAFA;font-weight:500;margin-top:6px}
.s5-sub{font-size:4.5px;color:rgba(255,255,255,.25);margin-bottom:6px}
.s5-donut{width:64px;height:64px;border-radius:50%;background:conic-gradient(#5B7BF8 0 150deg,#4ade80 150deg 240deg,rgba(91,123,248,.25) 240deg 300deg,#f87171 300deg);margin:4px auto;position:relative}
.s5-donut::after{content:'';position:absolute;inset:14px;background:#1D1D20;border-radius:50%}
.s5-donut-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;z-index:1;font-weight:500}
.s5-legend{display:flex;flex-direction:column;gap:4px;margin-top:5px}
.s5-leg-row{display:flex;justify-content:space-between;align-items:center}
.s5-leg-dot-label{display:flex;align-items:center;gap:4px;font-size:4.5px;color:rgba(255,255,255,.4)}
.s5-leg-dot{width:5px;height:5px;border-radius:50%}
.s5-leg-pct{font-size:5px;color:rgba(255,255,255,.5);font-family:monospace}
.s5-ai-tip{margin-top:6px;background:rgba(91,123,248,.08);border:1px solid rgba(91,123,248,.15);border-radius:6px;padding:6px;font-size:4px;color:rgba(255,255,255,.3);line-height:1.6}
.s5-ai-tip-label{font-size:3.5px;color:rgba(91,123,248,.6);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}

/* ══════════════════════════════════
   07 — TESTING
══════════════════════════════════ */
#testing{background:var(--bg)}
.testing-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}

.test-rounds{display:flex;flex-direction:column;gap:16px}
.test-round{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;transition:border-color .25s}
.test-round:hover{border-color:var(--border-s)}
.tr-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.tr-label{font-family:var(--font-m);font-size:.65rem;color:var(--accent);letter-spacing:.1em}
.tr-participants{font-size:.68rem;color:var(--ink-3)}
.tr-method{font-size:.75rem;font-weight:500;color:var(--ink-1);margin-bottom:8px}
.tr-finding{font-size:.8rem;color:var(--ink-2);line-height:1.6}

.findings-list{display:flex;flex-direction:column;gap:12px;margin-top:48px}

/* Severity tags */
.sev{display:inline-flex;align-items:center;gap:5px;font-size:.6rem;padding:3px 8px;border-radius:100px;font-family:var(--font-m)}
.sev-high{background:rgba(248,113,113,.1);color:#f87171;border:1px solid rgba(248,113,113,.2)}
.sev-med{background:rgba(251,191,36,.1);color:#fbbf24;border:1px solid rgba(251,191,36,.2)}
.sev-low{background:rgba(74,222,128,.1);color:#4ade80;border:1px solid rgba(74,222,128,.2)}
.sev-fix{background:rgba(91,123,248,.1);color:#8BA3FF;border:1px solid rgba(91,123,248,.2)}

.finding-item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px}
.finding-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.finding-issue{font-size:.8125rem;font-weight:500;color:var(--ink-1)}
.finding-desc{font-size:.78rem;color:var(--ink-2);line-height:1.6;margin-bottom:8px}
.finding-fix{font-size:.75rem;color:var(--accent);font-style:italic}

/* ══════════════════════════════════
   08 — OUTCOMES
══════════════════════════════════ */
#outcomes{background:var(--surface)}
.outcomes-big{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:48px 0}
.outcome-cell{
  background:var(--card);border:1px solid var(--border);border-radius:20px;
  padding:40px;text-align:center;transition:border-color .25s,transform .25s;
}
.outcome-cell:hover{border-color:var(--border-s);transform:translateY(-4px)}
.outcome-num{font-family:var(--font-d);font-size:4rem;font-weight:300;color:var(--accent);line-height:1;margin-bottom:8px}
.outcome-label{font-size:.875rem;color:var(--ink-2);line-height:1.5}

.learnings{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.learning{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;transition:border-color .25s}
.learning:hover{border-color:var(--border-s)}
.learning-num{font-family:var(--font-m);font-size:.62rem;color:var(--accent);margin-bottom:10px;letter-spacing:.1em}
.learning-title{font-size:.9rem;font-weight:500;color:var(--ink-1);margin-bottom:8px}
.learning-body{font-size:.8125rem;color:var(--ink-2);line-height:1.7}

/* ══════════════════════════════════
   NEXT
══════════════════════════════════ */
#next{background:var(--bg);padding:100px 56px;text-align:center;position:relative;overflow:hidden}
.next-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(91,123,248,.1) 0%,transparent 65%);pointer-events:none}
.next-eyebrow{font-family:var(--font-m);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.next-title{font-family:var(--font-d);font-size:clamp(2.5rem,5vw,4.5rem);font-weight:200;color:var(--ink-1);letter-spacing:-.025em;margin-bottom:12px;line-height:1.05}
.next-title em{font-style:italic;color:var(--ink-2)}
.next-sub{font-size:.9375rem;color:var(--ink-2);margin-bottom:48px;line-height:1.7}

.next-cards{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.next-card{
  background:var(--card);border:1px solid var(--border);border-radius:20px;
  padding:32px;width:280px;text-align:left;
  transition:border-color .25s,transform .25s;
  display:flex;flex-direction:column;gap:14px;
}
.next-card:hover{border-color:var(--border-s);transform:translateY(-4px)}
.nc-domain{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-family:var(--font-m)}
.nc-title{font-family:var(--font-d);font-size:1.25rem;font-weight:400;color:var(--ink-1);line-height:1.2}
.nc-arrow{color:var(--accent);font-size:1.25rem;margin-top:auto}

.btn-back{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:#fff;font-size:.9375rem;font-weight:500;
  padding:15px 36px;border-radius:14px;margin-top:48px;
  transition:transform .2s,box-shadow .2s;box-shadow:0 4px 24px rgba(91,123,248,.3);
}
.btn-back:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(91,123,248,.4)}

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
footer{padding:28px 56px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--surface)}
.ft-copy,.ft-made{font-size:.72rem;color:var(--ink-3);font-family:var(--font-m)}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media(max-width:900px){
  nav{padding:14px 20px}
  .nav-center{display:none}
  #hero{grid-template-columns:1fr;padding:100px 24px 60px}
  .hero-right{display:none}
  .cs-section{padding:70px 24px}
  .divider{margin:0 24px}
  .problem-grid,.persona-grid,.research-layout,.testing-grid,.outcomes-big,.learnings,.screens-intro{grid-template-columns:1fr}
  .affinity-themes{grid-template-columns:1fr 1fr}
  .decision-cards{grid-template-columns:1fr}
  .tm-steps{flex-direction:column;gap:16px}
  .tm-steps::before{display:none}
  .hero-meta-grid{grid-template-columns:1fr}
  .all-phones{padding:40px 24px 0;justify-content:flex-start}
  .jt-head,.jt-row{grid-template-columns:80px repeat(5,1fr)}
  footer{flex-direction:column;gap:8px;text-align:center;padding:20px}
  #next{padding:70px 24px}
}

/* ════════════════════════════════════════════════════
   SHARED CASE STUDY ELEMENTS — All 4 case studies
════════════════════════════════════════════════════ */

/* Image placeholders */
.cs-ph {
  background: var(--card);
  border: 1px dashed var(--border-s);
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink-3);
}
.cs-ph--hero {
  height: 360px;
  justify-content: center;
  border-radius: 24px;
}
.cs-ph--screen { min-height: 200px; justify-content: center; margin: 24px 0; }
.cs-ph span   { font-size: 0.9rem; font-weight: 500; color: var(--ink-2); }
.cs-ph code   { font-family: var(--font-m); background: var(--surface); padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; color: var(--accent); }
.cs-ph small  { font-size: 0.75rem; color: var(--ink-3); }

/* Competitive analysis table */
.cs-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); }
.cs-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.cs-table th { background: var(--card); color: var(--ink-2); font-weight: 500; padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.75rem; letter-spacing: 0.04em; }
.cs-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--ink-2); }
.cs-table tr:last-child td { border-bottom: none; }
.cs-table tr:hover td { background: var(--card); }
.t-hi  { color: var(--accent) !important; font-weight: 500; }
.t-mid { color: var(--ink-2) !important; }
.t-low { color: var(--ink-3) !important; }

/* Chapter intro text */
.chapter-intro { font-size: 1rem; color: var(--ink-2); line-height: 1.8; max-width: 680px; margin-bottom: 40px; }

/* Insight cards (already styled in base, reuse) */
.cs-insight-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs-insight-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; transition: border-color 0.2s; }
.cs-insight-card:hover { border-color: var(--border-s); }
.ci-num  { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; font-family: var(--font-m); font-weight: 500; }
.ci-title { font-size: 0.9375rem; font-weight: 500; color: var(--ink-1); margin-bottom: 10px; line-height: 1.3; }
.ci-body  { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.7; }

/* Heuristic findings */
.cs-finding-list { display: flex; flex-direction: column; gap: 20px; }
.cs-finding { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 16px 16px 0; padding: 28px 28px 28px 32px; }
.cf-heuristic { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-family: var(--font-m); margin-bottom: 8px; font-weight: 500; }
.cf-title { font-size: 1rem; font-weight: 500; color: var(--ink-1); margin-bottom: 10px; }
.cf-body  { font-size: 0.875rem; color: var(--ink-2); line-height: 1.7; margin-bottom: 16px; }
.cf-fix   { font-size: 0.8125rem; color: var(--ink-1); background: rgba(91,123,248,.06); border-radius: 8px; padding: 12px 16px; border: 1px solid var(--border-s); }

/* Two column */
.cs-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.cs-subhead { font-size: 0.875rem; font-weight: 600; color: var(--ink-1); margin-bottom: 16px; letter-spacing: -0.01em; }
.cs-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-list li { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.65; padding-left: 20px; position: relative; }
.cs-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-size: 0.75rem; }

/* 5Ws grid */
.cs-fivew-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.fivew-cell    { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.fw-q { font-family: var(--font-m); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; font-weight: 500; }
.fw-a { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.7; }

/* POV statement */
.cs-pov { font-size: 1rem; color: var(--ink-2); line-height: 1.85; font-style: italic; border-left: 3px solid var(--accent); padding: 20px 24px; background: var(--card); border-radius: 0 12px 12px 0; margin-bottom: 40px; }

/* Callout */
.cs-callout { background: rgba(91,123,248,.06); border: 1px solid var(--border-s); border-radius: 12px; padding: 20px 24px; font-size: 0.875rem; color: var(--ink-2); line-height: 1.7; }
.cs-callout strong { color: var(--ink-1); }

/* Challenges & solutions */
.cs-challenge-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.cs-challenge, .cs-solution { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; font-size: 0.875rem; color: var(--ink-2); line-height: 1.7; }
.cc-tag { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; font-family: var(--font-m); font-weight: 500; margin-bottom: 10px; color: var(--ink-3); }
.cc-tag--sol { color: var(--accent); }

/* Outcome grid */
.cs-outcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; }
.cs-outcome-item { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; }
.co-icon  { font-size: 1.5rem; margin-bottom: 14px; }
.co-title { font-size: 0.9375rem; font-weight: 600; color: var(--ink-1); margin-bottom: 10px; }
.co-body  { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.7; }

/* Learnings */
.cs-learnings { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; }

/* HMW list */
.cs-hmw-list { display: flex; flex-direction: column; gap: 10px; }
.cs-hmw-item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; font-size: 0.875rem; color: var(--ink-2); line-height: 1.65; transition: border-color 0.2s; }
.cs-hmw-item:hover { border-color: var(--border-s); }

/* Screen labels */
.cs-screen-labels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cs-sl { font-size: 0.72rem; padding: 5px 14px; border: 1px solid var(--border-s); border-radius: 100px; color: var(--accent); font-family: var(--font-m); font-weight: 500; letter-spacing: 0.06em; }

/* Screen pair */
.cs-screen-pair { margin-bottom: 40px; }
.cs-sp-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; font-family: var(--font-m); }
.cs-sp-note  { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.7; margin-top: 14px; padding: 0 4px; }

/* Quote */
.cs-quote-list { display: flex; flex-direction: column; gap: 12px; }
.cs-quote { background: var(--card); border-left: 3px solid var(--accent); padding: 16px 20px; border-radius: 0 10px 10px 0; font-size: 0.875rem; color: var(--ink-2); line-height: 1.7; font-style: italic; }

/* Chapter alt background */
.cs-chapter--alt { background: var(--surface); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .cs-insight-row   { grid-template-columns: 1fr; }
  .cs-fivew-grid    { grid-template-columns: 1fr; }
  .cs-two-col       { grid-template-columns: 1fr; gap: 24px; }
  .cs-challenge-pair { grid-template-columns: 1fr; }
  .cs-outcome-grid  { grid-template-columns: 1fr; }
  .cs-ph--hero      { height: 220px; }
}

/* ── Lucide in case study co-icon ── */
.co-icon svg {
  width: 28px; height: 28px;
  stroke: var(--accent); fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Lucide in validation finding vf-icon ── */
.vf-icon svg {
  width: 18px; height: 18px;
  stroke: var(--accent); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; margin-top: 2px;
}

/* ════════════════════════════════════════════
   BEFORE / AFTER COMPARISON LAYOUT
════════════════════════════════════════════ */

/* Phone screen grid — stacked rows of 3 */
.cp-screen-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.cp-screen-cell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cp-screen-cell img {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--border);
  display: block;
}
.cp-screen-meta {}
.cp-screen-num {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cp-screen-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: 4px;
  line-height: 1.4;
}
.cp-screen-dim {
  font-size: 0.75rem;
  color: var(--accent);
  font-style: italic;
  margin-bottom: 6px;
}
.cp-screen-desc {
  font-size: 0.775rem;
  color: var(--ink-2);
  line-height: 1.65;
}

.ba-section {
  margin-bottom: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--border);
}
.ba-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.ba-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 28px;
}
.ba-num {
  width: 40px; height: 40px;
  background: var(--accent-dim);
  border: 1px solid var(--border-s);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-m);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}
.ba-screen-name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.ba-screen-desc {
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 680px;
}

.ba-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ba-compare--single { grid-template-columns: 1fr; }

.ba-side {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s;
}
.ba-side:hover { border-color: var(--border-s); }
.ba-side--full { max-width: 680px; }

.ba-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-m);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 16px;
  margin: 12px 12px 0;
  border-radius: 100px;
}
.ba-tag--old {
  background: rgba(168,62,44,.08);
  color: #EE6249;
  border: 1px solid rgba(168,62,44,.15);
}
.ba-tag--new {
  background: rgba(58,146,84,.08);
  color: #3A9254;
  border: 1px solid rgba(58,146,84,.15);
}

.ba-img {
  display: block;
  width: 100%;
  height: auto;
  padding: 12px;
  border-radius: 16px;
}

/* Hero screenshot (when real image replaces placeholder) */
.cs-hero-img {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
}
.cs-hero-screenshot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

@media (max-width: 768px) {
  .ba-compare { grid-template-columns: 1fr; }
  .ba-header { flex-direction: column; gap: 12px; }
  .cp-screen-row { grid-template-columns: 1fr; }
}