/* ============================================================
   CRISP — Case study design system
   Light, premium, editorial. Ink + paper + sharp red accent.
   ============================================================ */
:root{
  --ink:#11131A; --ink-2:#3A3F4B; --ink-3:#5A606D; --muted:#8A8F9C; --faint:#B8BCC6;
  --paper:#FFFFFF; --surface:#F5F6F8; --surface-2:#EEF0F3; --line:#E4E6EA; --line-2:#EFF0F3;
  --accent:#E5322D; --accent-ink:#C2241F; --accent-wash:#FCEDEC;
  --good:#15803D; --good-wash:#E8F3EC; --plum:#7C3AED; --teal:#0E7490; --amber:#B45309;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --mx:clamp(24px,6vw,108px); --sy:clamp(76px,11vh,138px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent); color:#fff;}

.label{font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent);}

/* ── NAV ── */
.cr-nav{position:fixed; top:0; left:0; right:0; z-index:100; height:62px; padding:0 var(--mx);
  display:flex; align-items:center; justify-content:space-between;
  background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s;}
.cr-nav.scrolled{border-bottom-color:var(--line);}
.cr-back{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  display:inline-flex; align-items:center; gap:9px; transition:color .2s;}
.cr-back:hover{color:var(--accent);} .cr-back .ar{color:var(--accent);}
.cr-wordmark{font-size:19px; font-weight:800; letter-spacing:-0.03em; color:var(--ink);}
.cr-wordmark .pt{color:var(--accent);}
.cr-cta{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:var(--ink); padding:10px 18px; border-radius:30px; transition:background .2s;}
.cr-cta:hover{background:var(--accent);}
@media (max-width:680px){ .cr-wordmark{display:none;} }

/* ── HERO ── */
.cr-hero{padding:150px var(--mx) var(--sy); border-bottom:1px solid var(--ink);}
.cr-hero .label{display:block; margin-bottom:28px;}
.cr-htitle{font-size:clamp(72px,15vw,220px); font-weight:800; letter-spacing:-0.05em; line-height:0.86; color:var(--ink);}
.cr-htitle .pt{color:var(--accent);}
.cr-htag{font-size:clamp(22px,3.4vw,40px); font-weight:600; letter-spacing:-0.02em; color:var(--ink-2); margin-top:26px;}
.cr-hsub{font-size:clamp(18px,2vw,23px); color:var(--ink-2); line-height:1.5; max-width:52ch; margin-top:26px;}
.cr-hmeta{margin-top:54px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.cr-hmeta .m{padding:20px 24px 20px 0; border-right:1px solid var(--line);}
.cr-hmeta .m:last-child{border-right:none; padding-right:0;}
.cr-hmeta .mk{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
.cr-hmeta .mv{font-size:16px; font-weight:600; color:var(--ink);}
@media (max-width:720px){ .cr-hmeta{grid-template-columns:1fr 1fr;} .cr-hmeta .m:nth-child(2){border-right:none;} }

/* ── SECTION SCAFFOLD ── */
.cr-sec{padding:var(--sy) var(--mx); border-bottom:1px solid var(--line);}
.cr-sec.dark{background:var(--ink); color:#E7E8EC; border-color:#23252C;}
.cr-sec.dark .label{color:#FF6B5C;}
.cr-sec.dark h2{color:#fff;}
.cr-sec.dark .cr-lead{color:#B6BAC4;}
.cr-inner{max-width:1180px; margin:0 auto;}
.cr-head{margin-bottom:56px; max-width:60ch;}
.cr-head .label{display:block; margin-bottom:20px;}
.cr-head h2{font-size:clamp(30px,4.4vw,56px); font-weight:700; letter-spacing:-0.03em; line-height:1.04; color:var(--ink);}
.cr-head h2 .pt{color:var(--accent);}
.cr-lead{font-size:clamp(18px,2.1vw,24px); line-height:1.5; color:var(--ink-2); max-width:46ch; margin-top:24px;}
.cr-reveal{opacity:0; transform:translateY(20px); transition:transform .8s ease;}
.cr-reveal.vis{opacity:1; transform:none;}

/* ── PROBLEM (freeze scenarios) ── */
.freeze-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#23252C; border:1px solid #23252C;}
.freeze{background:var(--ink); padding:32px 28px;}
.freeze .n{font-family:var(--mono); font-size:12px; color:#FF6B5C; letter-spacing:.1em;}
.freeze h3{font-size:21px; font-weight:650; color:#fff; margin:16px 0 12px; letter-spacing:-0.01em; line-height:1.2;}
.freeze p{font-size:15px; color:#A8ACB6; line-height:1.55;}
.freeze .q{font-size:15px; color:#E7E8EC; font-style:italic; margin-top:14px; padding-top:14px; border-top:1px solid #2C2E36;}
@media (max-width:820px){ .freeze-grid{grid-template-columns:1fr;} }

/* ── INSIGHT (vs table) ── */
.vs-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.vs-col{padding:32px 30px;}
.vs-col.now{background:var(--surface);}
.vs-col.need{background:var(--paper); border-left:1px solid var(--line);}
.vs-col .ch{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:20px;}
.vs-col.now .ch{color:var(--muted);} .vs-col.need .ch{color:var(--accent);}
.vs-col ul{list-style:none; display:flex; flex-direction:column; gap:14px;}
.vs-col li{font-size:15.5px; line-height:1.45; display:flex; gap:11px; align-items:flex-start;}
.vs-col.now li{color:var(--ink-3);}
.vs-col.now li::before{content:"—"; color:var(--faint); flex-shrink:0;}
.vs-col.need li{color:var(--ink);}
.vs-col.need li::before{content:"✓"; color:var(--good); font-weight:700; flex-shrink:0;}
@media (max-width:720px){ .vs-grid{grid-template-columns:1fr;} .vs-col.need{border-left:none; border-top:1px solid var(--line);} }

/* ── LIVE DEMO EMBED (reusable) ── */
.cr-demo-sec{background:var(--surface);}
.cr-livewrap{max-width:1100px; margin:0 auto;}
.cr-live{position:relative; width:min(404px,92vw); margin:0 auto; aspect-ratio:404/600; border-radius:22px; overflow:hidden;
  background:#14151a; border:1px solid var(--ink); box-shadow:0 44px 90px -48px rgba(17,17,17,.5);}
.cr-live iframe{display:block; width:100%; height:100%; border:0; background:#14151a;}
.cr-live-poster{position:absolute; inset:0; z-index:2; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px; text-align:center; padding:36px;
  background:radial-gradient(120% 80% at 50% 32%, #23252e, #14151a 72%); transition:opacity .4s ease;}
.cr-live-poster.gone{opacity:0; pointer-events:none;}
.cr-live-poster .pmark{font-size:32px; font-weight:800; letter-spacing:-0.03em; color:#fff;}
.cr-live-poster .pmark .pt{color:var(--accent);}
.cr-live-poster .ptag{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#8C9099; margin-top:-8px;}
.cr-live-poster .ppreview{display:grid; grid-template-columns:repeat(3,auto); gap:8px; justify-content:center; margin:8px 0 2px;}
.cr-live-poster .ppreview span{font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:#888C96; border:1px solid #2C2E36; border-radius:8px; padding:6px 9px;}
.cr-live-poster .plaunch{display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:none; font-size:14px;
  font-weight:650; color:#fff; background:var(--accent); padding:14px 26px; border-radius:30px; transition:background .18s, transform .1s;}
.cr-live-poster:hover .plaunch{background:var(--accent-ink);} .cr-live-poster:active .plaunch{transform:scale(.98);}
.cr-live-poster .phint{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#6B6F78;}
.cr-live-bar{width:min(404px,92vw); margin:22px auto 0; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-top:16px; border-top:1px solid var(--line);}
.cr-live-bar .instr{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  display:inline-flex; align-items:center; gap:9px;}
.cr-live-bar .instr .d{width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0;}
.cr-live-bar .acts{display:inline-flex; gap:18px;}
.cr-live-bar a{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); transition:color .2s; white-space:nowrap;}
.cr-live-bar a.muted{color:var(--ink-3);} .cr-live-bar a:hover{color:var(--accent);}
@media (max-width:520px){ .cr-live-bar{flex-direction:column; align-items:flex-start; gap:12px;} }

/* ── HOW IT WORKS (steps) ── */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.step{padding-top:24px; border-top:2px solid var(--ink);}
.step .sn{font-size:40px; font-weight:800; letter-spacing:-0.04em; color:var(--accent); line-height:1;}
.step h3{font-size:19px; font-weight:650; margin:16px 0 8px; letter-spacing:-0.01em;}
.step p{font-size:14.5px; color:var(--ink-2); line-height:1.55;}
@media (max-width:820px){ .steps{grid-template-columns:1fr; gap:0;} .step{padding:24px 0; border-top:1px solid var(--line);} .step:first-child{border-top:2px solid var(--ink);} }

/* ── PERSONAS ── */
.persona-list{display:flex; flex-direction:column;}
.cr-persona{display:grid; grid-template-columns:60px 1fr; gap:22px; padding:26px 0; border-top:1px solid var(--line); align-items:start;}
.cr-persona:last-child{border-bottom:1px solid var(--line);}
.cr-persona .av{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:20px; color:#fff;}
.cr-persona .nm{font-size:20px; font-weight:650; letter-spacing:-0.01em;}
.cr-persona .fo{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:5px 0 10px;}
.cr-persona .go{font-size:15px; color:var(--ink-2);}
.cr-persona .sc{font-size:15px; color:var(--ink); font-style:italic; margin-top:12px; padding:12px 16px; background:var(--surface); border-radius:10px; border-left:2px solid var(--accent);}

/* ── PATTERNS ── */
.pat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.pat{background:var(--paper); padding:24px 22px;}
.pat .pn{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.08em;}
.pat .pt{font-size:18px; font-weight:650; margin:10px 0 8px; letter-spacing:-0.01em;}
.pat .pd{font-size:13.5px; color:var(--ink-2); line-height:1.5;}
@media (max-width:820px){ .pat-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .pat-grid{grid-template-columns:1fr;} }

/* ── MARKET (stats) ── */
.mkt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#23252C; border:1px solid #23252C; margin-bottom:40px;}
.mkt{background:var(--ink); padding:34px 28px;}
.mkt .num{font-size:clamp(40px,5.4vw,64px); font-weight:800; letter-spacing:-0.04em; line-height:0.95; color:#fff;}
.mkt .num .pt{color:#FF6B5C;}
.mkt .k{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#FF6B5C; margin:14px 0 8px;}
.mkt .d{font-size:13.5px; color:#A8ACB6; line-height:1.5;}
@media (max-width:720px){ .mkt-grid{grid-template-columns:1fr;} }
.whynow{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.whynow .w h3{font-size:16px; font-weight:650; color:#fff; margin-bottom:8px;}
.whynow .w p{font-size:14px; color:#A8ACB6; line-height:1.55;}
@media (max-width:820px){ .whynow{grid-template-columns:1fr; gap:24px;} }

/* ── CREDITS ── */
.cr-credits{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.cr-credit{background:var(--paper); padding:24px 26px;}
.cr-credit .k{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px;}
.cr-credit .v{font-size:16px; color:var(--ink); line-height:1.4;}
@media (max-width:620px){ .cr-credits{grid-template-columns:1fr;} }

/* ── FOOTER ── */
.cr-foot{border-top:1px solid var(--ink); padding:clamp(60px,9vh,120px) var(--mx); text-align:center;}
.cr-foot .label{display:block; margin-bottom:24px; color:var(--muted);}
.cr-foot h2{font-size:clamp(34px,6vw,76px); font-weight:800; letter-spacing:-0.04em; color:var(--ink); line-height:1;}
.cr-foot h2 .pt{color:var(--accent);}
.cr-foot .next{margin-top:40px; display:inline-flex; align-items:center; gap:13px; font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--ink); padding:15px 28px; border-radius:30px; transition:all .2s;}
.cr-foot .next:hover{background:var(--accent); gap:19px;}
.cr-foot .backhome{margin-top:24px; display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);}
.cr-foot .backhome:hover{color:var(--accent);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;} .cr-reveal{opacity:1; transform:none; transition:none;}
}