/* ============================================================
   CasePilot — shared stylesheet
   Every page on casepilot.app links this file.
   Spec: CASEPILOT-DESIGN-SYSTEM.md
   Change a token here and it changes everywhere.
   ============================================================ */
:root{
  --bg:#EDF3F8;
  --ink:rgba(13,20,32,.95);
  --ink-2:rgba(13,20,32,.62);
  --ink-3:rgba(13,20,32,.46);
  --line:rgba(13,20,32,.11);
  --line-2:rgba(13,20,32,.07);

  --panel:#0F1622;
  --panel-2:#18202E;
  --box:#16202E;
  --box-2:#1E2A3A;
  --bline:rgba(255,255,255,.1);
  --btext:#E6EAF0;
  --btext-2:rgba(230,234,240,.6);
  --btext-3:rgba(230,234,240,.4);
  --lift:0 0 0 1px rgba(13,20,32,.09),0 26px 52px -26px rgba(13,20,32,.5);
  --lift-hi:0 0 0 1px rgba(13,20,32,.12),0 40px 72px -26px rgba(13,20,32,.62);

  --navy:#1B2A4A;
  --steel:#6BA5D6;
  --steel-deep:#2F6E9E;
  --seal:#B4453B;
  --good:#2E7D52;
  --sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --spring:cubic-bezier(.22,1.15,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(13,20,32,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(13,20,32,.03) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 30%,transparent 76%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background:radial-gradient(640px 430px at 78% -4%,rgba(107,165,214,.24),transparent 70%),radial-gradient(520px 380px at 12% 10%,rgba(27,42,74,.1),transparent 72%);
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
a{color:inherit;text-decoration:none}
p{margin:0}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px}

.prog{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;pointer-events:none}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--steel),var(--seal) 62%,var(--good));transition:width .08s linear}

/* connectors */
.link{position:relative;z-index:2;height:340px;display:flex;justify-content:center;pointer-events:none;overflow:hidden}
.link svg{overflow:visible}
.link .track{fill:none;stroke:rgba(13,20,32,.11);stroke-width:4;stroke-linecap:round}
.link .live{fill:none;stroke-width:5.5;stroke-linecap:round}
.link .nd{fill:var(--bg);stroke-width:3.5;transition:fill .4s}
.link .lb{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;fill:var(--ink);opacity:0;transition:opacity .5s;stroke:var(--bg);stroke-width:7px;paint-order:stroke fill}
.link .amt{font-family:var(--mono);font-size:12px;fill:var(--ink-3);opacity:0;transition:opacity .5s;stroke:var(--bg);stroke-width:6px;paint-order:stroke fill}
.link.lit .lb,.link.lit .amt{opacity:1}
.link .tok{opacity:0;transition:opacity .25s}
.link.moving .tok{opacity:1}
@media(max-width:760px){.link{height:214px}.link .lb{font-size:12px}.link .amt{font-size:10.5px}
  /* thinner halo so a stray overlap nicks the line less */
  .link .lb{stroke-width:5px}.link .amt{stroke-width:4px}}

.rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.7,.3,1),transform .6s cubic-bezier(.22,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  .link .lb,.link .amt{opacity:1!important}
  *{transition:none!important;animation:none!important}
}

.eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--good);position:relative}
.pill .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--good);opacity:.5;animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.kbd{font-family:var(--mono);font-size:11.5px;background:rgba(255,255,255,.08);border:1px solid var(--bline);border-radius:5px;padding:2px 7px;color:var(--btext-2)}

h1{font-size:clamp(40px,7vw,74px);font-weight:800;line-height:.95;letter-spacing:-.028em;margin:24px 0 0}
h2{font-size:clamp(29px,4.4vw,46px);font-weight:800;line-height:1.03;letter-spacing:-.026em;margin:12px 0 0}
h3{font-size:20px;font-weight:700;line-height:1.24;letter-spacing:-.014em;margin:0}

/* ── tactile buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;
  font-family:var(--sans);font-size:16px;font-weight:600;padding:13px 23px;border-radius:10px;border:0;cursor:pointer;
  transition:transform .22s var(--spring),box-shadow .22s var(--spring),background .16s;
  box-shadow:0 2px 0 rgba(13,20,32,.18),0 8px 18px -10px rgba(27,42,74,.5);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 6px 0 rgba(13,20,32,.16),0 18px 34px -12px rgba(27,42,74,.65)}
.btn:active{transform:translateY(1px) scale(.985);box-shadow:0 1px 0 rgba(13,20,32,.2),0 4px 10px -6px rgba(27,42,74,.5);transition-duration:.07s}
.btn.ghost{background:rgba(255,255,255,.82);color:var(--ink);border:1px solid var(--line);box-shadow:0 2px 0 rgba(13,20,32,.06),0 8px 16px -12px rgba(13,20,32,.35)}
.btn.ghost:hover{background:#fff;box-shadow:0 6px 0 rgba(13,20,32,.06),0 16px 28px -14px rgba(13,20,32,.45)}
.btn.sm{font-size:14px;padding:9px 16px;border-radius:8px}
.on-dark .btn{background:var(--btext);color:var(--panel);box-shadow:0 2px 0 rgba(0,0,0,.35),0 10px 22px -12px rgba(0,0,0,.7)}
.on-dark .btn:hover{box-shadow:0 6px 0 rgba(0,0,0,.3),0 20px 36px -14px rgba(0,0,0,.8)}
.on-dark .btn.ghost{background:none;color:var(--btext);border:1px solid var(--bline);box-shadow:none}
.on-dark .btn.ghost:hover{background:rgba(255,255,255,.1);box-shadow:none}

/* ── nav: menu centred ── */
.nav{position:sticky;top:0;z-index:50;background:rgba(237,243,248,.84);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line-2)}
.nav .wrap{display:flex;align-items:center;height:62px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px;letter-spacing:-.02em}
.brand .ic{width:26px;height:26px;border-radius:7px;background:var(--navy);display:grid;place-items:center;flex:none;box-shadow:0 4px 10px -4px rgba(27,42,74,.7);transition:transform .25s var(--spring)}
.brand:hover .ic{transform:rotate(-8deg) scale(1.08)}
.brand .ic i{width:8px;height:8px;border-radius:2px;background:var(--steel);display:block}
.nav .links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:28px}
.nav .links a{font-size:14.5px;color:var(--ink-2);font-weight:500;position:relative;transition:color .16s,transform .2s var(--spring)}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--steel);transform:scaleX(0);transform-origin:center;transition:transform .24s var(--spring)}
.nav .links a:hover{color:var(--ink);transform:translateY(-1px)}
.nav .links a:hover::after{transform:scaleX(1)}
.nav .right{margin-left:auto}
@media(max-width:960px){.nav .links{display:none}}

.hero{padding:68px 0 26px;text-align:center}
.hero .sub{font-size:18px;color:var(--ink-2);max-width:600px;margin:22px auto 0}
.cta{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:28px;flex-wrap:wrap}
.hero .fine{margin-top:16px;font-size:13.5px;color:var(--ink-3)}
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.chips span{font-size:13px;color:var(--ink-2);background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:999px;padding:6px 13px;transition:transform .2s var(--spring),background .16s}
.chips span:hover{transform:translateY(-2px);background:#fff}

.sec{padding:0 0 20px;position:relative;z-index:2;text-align:center}
.sec-h{max-width:660px;margin:0 auto}
.sec-h p{color:var(--ink-2);font-size:17px;margin-top:16px}

.tick{margin-top:36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:rgba(255,255,255,.45);position:relative;z-index:2}
.tick .row{display:flex;gap:36px;padding:11px 0;white-space:nowrap;font-family:var(--mono);font-size:12px;color:var(--ink-3);animation:slide 46s linear infinite;width:max-content}
.tick .row b{font-weight:600;color:var(--ink-2)}
.tick .row i{font-style:normal;color:var(--ink-3);font-weight:400}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick:hover .row{animation-play-state:paused}

/* ── hero instrument ── */
.panel{position:relative;background:var(--panel);border-radius:16px;overflow:hidden;box-shadow:0 60px 100px -44px rgba(13,20,32,.62),0 0 0 1px rgba(13,20,32,.09);margin-top:44px;text-align:left}
.panel::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);z-index:3}
.p-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--bline);background:var(--panel-2)}
.p-bar .t{font-size:12.5px;color:var(--btext-2);font-weight:500}
.p-bar .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.p-body{display:grid;grid-template-columns:1.02fr 1fr}
.q{border-right:1px solid var(--bline)}

/* queue columns line up with their headers */
.q-h,.qr{display:grid;grid-template-columns:82px 1fr 112px;gap:12px;align-items:center}
.q-h{padding:11px 16px;border-bottom:1px solid var(--bline);font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--btext-3)}
.q-h .c-sub{text-align:center}
.q-h .c-st{text-align:center}
.qr{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--bline);border-left:3px solid transparent;padding:12px 16px;color:var(--btext);cursor:pointer;font:inherit;
  transition:background .16s,border-color .16s,transform .22s var(--spring)}
.qr:hover{background:rgba(255,255,255,.06);transform:translateX(4px)}
.qr:active{transform:translateX(2px) scale(.995);transition-duration:.07s}
.qr[aria-selected="true"]{background:rgba(255,255,255,.07);border-left-color:var(--btext)}
.qr[aria-selected="true"] .rf{color:var(--btext)}
.qr .rf{font-family:var(--mono);font-size:12px;color:var(--btext-2);transition:color .14s}
.qr .tt{font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.qr .tt em{display:block;font-style:normal;font-size:12.5px;color:var(--btext-2);margin-top:2px;font-weight:400;letter-spacing:0}
.st{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:4px 0;border-radius:5px;white-space:nowrap;text-align:center;display:block;width:100%}
.st.o{background:rgba(107,165,214,.18);color:#8FBFE4}
.st.c{background:rgba(46,125,82,.24);color:#6FCB99}
.st.e{background:rgba(180,69,59,.24);color:#E4877C}
.p-det{padding:18px 20px 20px;color:var(--btext);display:flex;flex-direction:column}
.p-det .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--btext-3)}
.p-det h4{font-size:21px;font-weight:700;letter-spacing:-.018em;margin:9px 0 3px;line-height:1.2}
.p-det .sm{font-family:var(--mono);font-size:12px;color:var(--btext-2);margin-bottom:16px}
.fl{list-style:none;margin:0;padding:0;flex:1}
.fl li{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--bline);font-size:14px;line-height:1.45;color:rgba(230,234,240,.86)}
.fl .bx{flex:none;width:16px;height:16px;border:1.5px solid rgba(230,234,240,.35);border-radius:4px;margin-top:2px;display:grid;place-items:center;font-size:10px;color:var(--steel)}
.fl li.on .bx{border-color:var(--steel);background:rgba(107,165,214,.18)}
.fl li.on .bx::after{content:"✓"}
.dsp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.dsp button{background:rgba(255,255,255,.05);border:1px solid var(--bline);color:var(--btext);border-radius:8px;padding:10px 12px;text-align:left;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background .14s,border-color .14s,transform .22s var(--spring)}
.dsp button:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.3);transform:translateY(-3px)}
.dsp button:active{transform:translateY(0) scale(.97);transition-duration:.07s}
.dsp button em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--btext-2);margin-top:3px;font-weight:400}
.p-foot{display:flex;gap:16px;align-items:center;padding:11px 16px;border-top:1px solid var(--bline);background:var(--panel-2);font-family:var(--mono);font-size:11.5px;color:var(--btext-2);flex-wrap:wrap}
@media(max-width:860px){.p-body{grid-template-columns:1fr}.q{border-right:0;border-bottom:1px solid var(--bline)}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border-radius:14px;overflow:hidden;background:var(--box);box-shadow:var(--lift);color:var(--btext)}
.stats div{padding:24px 22px;border-right:1px solid var(--bline);transition:background .18s}
.stats div:hover{background:var(--box-2)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff}
.stats span{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--btext-3)}
/* live case clock — fixed box, nothing reflows on tick */
.stats div{min-height:112px}
.clock-cell{padding:0!important;position:relative}
.clock-btn{
  display:block;width:100%;height:100%;min-height:112px;background:none;border:0;padding:24px 22px;text-align:left;
  font:inherit;color:inherit;cursor:pointer;transition:background .18s;
}
.clock-btn:hover{background:var(--box-2)}
.clock-btn b{font-variant-numeric:tabular-nums;transition:color .35s}
.clock-btn.warn b{color:var(--steel)}
.clock-btn.crit b,.clock-btn.done b,.clock-btn.done span{color:#E4877C}
.clock-btn .lbl-txt{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(2){border-right:0}.stats div:nth-child(1),.stats div:nth-child(2){border-bottom:1px solid var(--bline)}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.stp{background:var(--box);color:var(--btext);border-radius:14px;padding:26px 20px;text-align:center;box-shadow:var(--lift);
  transition:transform .3s var(--spring),box-shadow .3s var(--spring),background .2s}
.stp:hover{transform:translateY(-8px) scale(1.015);box-shadow:var(--lift-hi);background:var(--box-2)}
.stp:active{transform:translateY(-3px) scale(.995);transition-duration:.08s}
.stp .n{font-family:var(--mono);font-size:12.5px;color:var(--btext-3);letter-spacing:.1em}
.stp h3{margin:14px 0 3px;font-size:22px;color:#fff}
.stp .tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);font-weight:500}
.stp p{margin-top:13px;font-size:14.5px;color:var(--btext-2);line-height:1.55}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.steps{grid-template-columns:1fr}}

.feat{padding:0}
.feat+.feat{padding-top:64px;margin-top:64px;border-top:1px solid var(--line)}
.feat .fh{max-width:640px;margin:0 auto}
.feat h3{font-size:29px;font-weight:800;letter-spacing:-.024em;line-height:1.12;margin-top:12px}
.feat .fh p{color:var(--ink-2);font-size:16.5px;margin-top:14px}
.feat .mock{max-width:900px;margin:34px auto 0}
.feat ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:900px;margin:28px auto 0;padding:0;text-align:center}
.feat li{font-size:14px;color:var(--ink-2);line-height:1.5}
.feat li::before{content:"";display:block;width:9px;height:9px;border-radius:3px;background:var(--steel);margin:0 auto 9px}
@media(max-width:860px){.feat ul{grid-template-columns:1fr 1fr}}

.mock{background:var(--box);color:var(--btext);border-radius:14px;overflow:hidden;box-shadow:var(--lift);
  transition:transform .3s var(--spring),box-shadow .3s var(--spring);text-align:left}
.mock:hover{transform:translateY(-6px);box-shadow:var(--lift-hi)}
.mock .mh{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--bline);background:var(--box-2);font-size:13px;color:var(--btext);font-weight:600}
.mock .mh .r{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--btext-3);font-weight:400}
.tbl{font-family:var(--mono);font-size:12.5px}
.tbl .row{display:grid;grid-template-columns:78px 70px 1fr 116px 116px;gap:14px;padding:12px 16px;border-bottom:1px solid var(--bline);align-items:center;transition:background .16s}
.tbl .row:not(.h):hover{background:rgba(255,255,255,.05)}
.tbl .row:last-child{border-bottom:0}
.tbl .row.h{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--btext-3)}
.tbl .row.h span:nth-child(4),.tbl .row.h span:nth-child(5){text-align:center}
.tbl .d{color:var(--btext-3)}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding:4px 0;border-radius:5px;white-space:nowrap;text-align:center;display:block;width:100%}
.chip.n{background:rgba(255,255,255,.09);color:var(--btext)}
.chip.r{background:rgba(107,165,214,.18);color:#8FBFE4}
.chip.e{background:rgba(180,69,59,.24);color:#E4877C}
.chip.g{background:rgba(46,125,82,.24);color:#6FCB99}
.chip.b{background:rgba(180,69,59,.24);color:#E4877C}
@media(max-width:600px){
  .tbl .row{grid-template-columns:72px 1fr;gap:6px 12px}
  .tbl .row>*:nth-child(3),.tbl .row>*:nth-child(4),.tbl .row>*:nth-child(5){grid-column:2}
  .tbl .row.h{display:none}
  .chip{width:auto;display:inline-block;padding:4px 9px}
}

.discs{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:6px 16px 14px}
.dr{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--bline);transition:transform .22s var(--spring)}
.dr:hover{transform:translateX(4px)}
.dr b{font-size:14px;font-weight:600;flex:1;color:var(--btext)}
.dr .bar{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;width:118px}
.dr .bar i{aspect-ratio:1;background:rgba(255,255,255,.15);border-radius:1px;display:block}
.dr .bar i.s{background:var(--steel)}
.dr .bar i.e{background:#D2685C}
.dr span{font-family:var(--mono);font-size:11px;color:var(--btext-3);width:32px;text-align:right}
@media(max-width:640px){.discs{grid-template-columns:1fr}}

/* pricing */
.price{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;text-align:center}
.pc{background:var(--box);color:var(--btext);border-radius:14px;padding:32px 26px;box-shadow:var(--lift);
  transition:transform .3s var(--spring),box-shadow .3s var(--spring)}
.pc:hover{transform:translateY(-8px);box-shadow:var(--lift-hi)}
.pc.hi{background:var(--panel);box-shadow:0 0 0 2px var(--steel),0 26px 52px -26px rgba(13,20,32,.55)}
.pc.hi:hover{box-shadow:0 0 0 2px var(--steel),0 40px 72px -26px rgba(13,20,32,.62)}
.pc .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--btext-3)}
.pc h3{margin:12px 0 4px;font-size:23px;color:#fff}
.pc .amt{font-size:44px;font-weight:800;letter-spacing:-.03em;margin:14px 0 4px;color:#fff}
.pc .amt em{font-style:normal;font-size:15px;font-weight:500;color:var(--btext-3);margin-left:7px;letter-spacing:0}
.pc p{font-size:14.5px;color:var(--btext-2);line-height:1.55;margin:12px auto 0;max-width:30ch}
.pc ul{list-style:none;margin:22px auto 0;padding:0;width:max-content;max-width:100%;text-align:left}
.pc li{font-size:14.5px;color:var(--btext-2);margin-top:11px}
.pc li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--good);margin-right:10px;vertical-align:1px}
.pc .btn{margin-top:28px}
@media(max-width:760px){.price{grid-template-columns:1fr}}

/* faq */
.faq{margin-top:38px;background:var(--box);color:var(--btext);border-radius:14px;overflow:hidden;text-align:left;max-width:820px;margin-left:auto;margin-right:auto;box-shadow:var(--lift)}
.faq details{border-bottom:1px solid var(--bline)}
.faq details:last-child{border-bottom:0}
.faq summary{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;cursor:pointer;font-size:16.5px;font-weight:600;letter-spacing:-.012em;list-style:none;color:#fff;
  transition:background .16s,padding-left .22s var(--spring)}
.faq summary:hover{background:rgba(255,255,255,.06);padding-left:26px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{font-family:var(--mono);font-size:12.5px;color:var(--btext-3);padding-top:3px;font-weight:500}
.faq summary::after{content:"+";margin-left:auto;color:var(--btext-3);font-weight:400;font-size:21px;line-height:1;transition:transform .25s var(--spring)}
.faq details[open] summary::after{content:"–";transform:rotate(180deg)}
.faq .a{padding:0 20px 20px 54px;font-size:15px;color:var(--btext-2);line-height:1.62}
.faq-more{margin-top:18px;font-size:14.5px;color:var(--ink-3)}
.faq-more a{color:var(--steel-deep);font-weight:600;border-bottom:1px solid var(--steel)}

/* ── tip band ── */
.tip{text-align:center;padding:34px 0 86px;position:relative;z-index:2}
.tip-row{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.tip p{font-size:15.5px;color:var(--ink-2);margin:0}
.coffee{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:999px;padding:11px 20px;
  box-shadow:0 2px 0 rgba(13,20,32,.06),0 8px 16px -12px rgba(13,20,32,.35);
  transition:transform .22s var(--spring),box-shadow .22s var(--spring),background .16s}
.coffee:hover{transform:translateY(-3px);background:#fff;box-shadow:0 6px 0 rgba(13,20,32,.06),0 16px 28px -14px rgba(13,20,32,.45)}
.coffee:active{transform:translateY(1px) scale(.985);transition-duration:.07s}

.final{text-align:center;padding:56px 0 34px;position:relative;z-index:2}
.final p{font-size:17px;color:var(--ink-2);max-width:500px;margin:16px auto 0}

footer{border-top:1px solid var(--line);padding:46px 0 58px;position:relative;z-index:2;text-align:left}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.fgrid h5{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.fgrid a{display:block;font-size:14.5px;color:var(--ink-2);margin-bottom:9px;transition:color .16s,transform .2s var(--spring)}
.fgrid a:hover{color:var(--ink);transform:translateX(3px)}
.fgrid p{font-size:14.5px;color:var(--ink-2);line-height:1.55;margin-top:12px;max-width:34ch}
.legal{margin-top:36px;padding-top:22px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-3);line-height:1.6}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}

/* ── playable case ── */
.fl li{padding:0;border-top:1px solid var(--bline)}
.fbtn{width:100%;display:flex;gap:10px;align-items:flex-start;background:none;border:0;padding:10px 2px;
  text-align:left;font:inherit;font-size:14px;line-height:1.45;color:rgba(230,234,240,.86);cursor:pointer;
  transition:background .14s,transform .2s var(--spring)}
.fbtn:hover{background:rgba(255,255,255,.05);transform:translateX(3px)}
.fbtn:active{transform:translateX(1px) scale(.995);transition-duration:.07s}
.fbtn .bx{flex:none;width:16px;height:16px;border:1.5px solid rgba(230,234,240,.35);border-radius:4px;margin-top:2px;
  display:grid;place-items:center;font-size:10px;color:var(--steel);transition:border-color .16s,background .16s}
.fbtn[aria-pressed="true"] .bx{border-color:var(--steel);background:rgba(107,165,214,.22)}
.fbtn[aria-pressed="true"] .bx::after{content:"✓"}
.fl.locked .fbtn{cursor:default}
.fl.locked .fbtn:hover{background:none;transform:none}
.fbtn .mk{margin-left:auto;flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 6px;border-radius:4px;opacity:0;transition:opacity .3s}
.fl.locked .fbtn .mk{opacity:1}
.mk.hit{background:rgba(46,125,82,.24);color:#6FCB99}
.mk.miss{background:rgba(180,69,59,.24);color:#E4877C}
.mk.false{background:rgba(180,69,59,.24);color:#E4877C}

.dsp button{position:relative}
.dsp.locked button{cursor:default;opacity:.4}
.dsp.locked button.picked{opacity:1;border-color:var(--btext)}
.dsp.locked button.answer{opacity:1;border-color:#6FCB99;background:rgba(46,125,82,.16)}

.debrief{display:none;margin-top:16px;border-top:1px solid var(--bline);padding-top:16px}
.debrief.show{display:block;animation:dbIn .34s var(--spring)}
@keyframes dbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.debrief .verd{font-size:15px;font-weight:700;letter-spacing:-.012em;margin:0 0 7px}
.debrief.ok .verd{color:#6FCB99}
.debrief.no .verd{color:#E4877C}
.debrief .vbody{font-size:13.5px;line-height:1.58;color:var(--btext-2);margin:0}
.debrief .dscore{margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--btext-3);letter-spacing:.03em}
.nextbtn{margin-top:14px;background:var(--btext);color:var(--panel);border:0;border-radius:8px;
  padding:9px 16px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.35);transition:transform .2s var(--spring),box-shadow .2s var(--spring)}
.nextbtn:hover{transform:translateY(-2px);box-shadow:0 4px 0 rgba(0,0,0,.3)}
.nextbtn:active{transform:translateY(1px) scale(.98);box-shadow:0 1px 0 rgba(0,0,0,.35);transition-duration:.07s}
#fClock.warn{color:var(--steel)}
#fClock.crit{color:#E4877C}

/* ── visible case timer ── */
.timer{display:inline-flex;align-items:baseline;gap:8px;background:rgba(255,255,255,.06);
  border:1px solid var(--bline);border-radius:8px;padding:5px 11px;transition:background .3s,border-color .3s}
.timer b{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--btext);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;transition:color .3s}
.timer em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--btext-3);transition:color .3s}
.timer.running{background:rgba(107,165,214,.12);border-color:rgba(107,165,214,.34)}
.timer.running em{color:var(--steel)}
.timer.warn b{color:var(--steel)}
.timer.crit{background:rgba(180,69,59,.14);border-color:rgba(180,69,59,.4)}
.timer.crit b,.timer.crit em{color:#E4877C}
.timer.done{background:rgba(180,69,59,.2);border-color:rgba(180,69,59,.5)}
.timer.done b,.timer.done em{color:#E4877C}
.p-bar .t b{font-weight:600;color:var(--btext)}
@media(max-width:520px){.p-bar .kbd{display:none}}

/* route to the full library */
.p-link{margin-left:auto;color:var(--steel);font-weight:600;white-space:nowrap;
  border-bottom:1px solid rgba(107,165,214,.4);transition:color .16s,border-color .16s,transform .2s var(--spring)}
.p-link:hover{color:#9FC8E8;border-color:#9FC8E8;transform:translateX(2px)}
.dbtns{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.libbtn{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--btext);
  border:1px solid var(--bline);border-radius:8px;padding:9px 14px;
  transition:background .16s,border-color .16s,transform .2s var(--spring)}
.libbtn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.nextbtn{margin-top:0}
.pcap{margin:16px auto 0;font-size:13.5px;color:var(--ink-3);max-width:52ch}
.pcap a{color:var(--steel-deep);font-weight:600;border-bottom:1px solid rgba(47,110,158,.4)}
.pcap a:hover{color:var(--ink)}

.debrief.part .verd{color:var(--steel)}
.dsp.locked button.alt{opacity:1;border-color:rgba(107,165,214,.55)}

/* scoring strip */
.scoring{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:26px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.scoring b{font-family:var(--sans);font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-right:6px}

/* rank ladder */
.ladder{padding:6px 16px 14px}
.lr{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--bline)}
.lr:last-child{border-bottom:0}
.lr .rk{flex:1;font-size:14px;font-weight:600;color:var(--btext-3)}
.lr .rp{font-family:var(--mono);font-size:11.5px;color:var(--btext-3);width:38px;text-align:right}
.lr .chip{width:76px}
.lr.done .rk{color:var(--btext-2)}
.lr.now .rk{color:#fff}

/* dossier */
.dossier-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start;margin-top:36px;text-align:left}
.stages{padding:6px 16px 14px}
.sg{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--bline)}
.sg:last-child{border-bottom:0}
.sg .sn{font-family:var(--mono);font-size:11.5px;color:var(--btext-3);width:22px}
.sg .sd{flex:1;font-size:14px;color:var(--btext-3)}
.sg .chip{width:66px}
.sg.done .sd{color:var(--btext-2)}
.sg.now .sd{color:#fff;font-weight:600}
.dossier-pts{list-style:none;margin:0;padding:0}
.dossier-pts li{font-size:14.5px;color:var(--ink-2);line-height:1.55;padding:14px 0;border-bottom:1px solid var(--line)}
.dossier-pts li:last-child{border-bottom:0}
.dossier-pts b{color:var(--ink);font-weight:700}
@media(max-width:900px){.dossier-grid{grid-template-columns:1fr}}

/* courses */
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;text-align:left}
.cc{display:block;background:var(--box);color:var(--btext);border-radius:14px;padding:24px 22px;box-shadow:var(--lift);
  transition:transform .3s var(--spring),box-shadow .3s var(--spring),background .2s}
.cc:hover{transform:translateY(-8px);box-shadow:var(--lift-hi);background:var(--box-2)}
.cc:active{transform:translateY(-3px) scale(.995);transition-duration:.08s}
.cstep{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.cc h3{margin:13px 0 9px;font-size:19px;color:#fff;line-height:1.22}
.cc p{font-size:14.5px;color:var(--btext-2);line-height:1.55}
.clink{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--btext)}
.cc:hover .clink{color:#fff}
.author{margin-top:30px;font-size:14.5px;color:var(--ink-2)}
.author a{color:var(--steel-deep);font-weight:600;border-bottom:1px solid rgba(47,110,158,.4)}
.author a:hover{color:var(--ink)}
@media(max-width:860px){.courses{grid-template-columns:1fr}}

/* store badges — placeholder marks, official artwork drops in here */
.badges{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:18px}
.sbadge{display:inline-flex;align-items:center;gap:11px;background:#0B0F16;color:#fff;
  border:1px solid rgba(255,255,255,.24);border-radius:10px;padding:9px 16px 9px 14px;min-width:168px;
  box-shadow:0 2px 0 rgba(13,20,32,.22),0 10px 22px -14px rgba(13,20,32,.6);
  transition:transform .22s var(--spring),box-shadow .22s var(--spring),background .18s}
.sbadge:hover{transform:translateY(-3px);background:#131A24;
  box-shadow:0 6px 0 rgba(13,20,32,.2),0 18px 32px -16px rgba(13,20,32,.7)}
.sbadge:active{transform:translateY(1px) scale(.985);box-shadow:0 1px 0 rgba(13,20,32,.22);transition-duration:.07s}
.sbadge .smark{width:22px;height:22px;flex:none;color:#fff}
.sbadge em{display:block;font-style:normal;font-size:10px;letter-spacing:.03em;opacity:.78;line-height:1}
.sbadge b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.015em;line-height:1.15;margin-top:3px}
@media(max-width:420px){.sbadge{min-width:150px;padding:8px 13px}.sbadge b{font-size:15px}}

/* ── app availability: three states ───────────────────────
   data-apps="pending"  neither store live  -> "coming soon to iOS and Android"
   data-apps="android"  Play approved only  -> Play badge + "iOS in review"
   data-apps="live"     both approved       -> both badges, no note
   ──────────────────────────────────────────────────────── */
.soon{display:none;align-items:center;justify-content:center;gap:10px;margin-top:18px;
  font-size:14.5px;color:var(--ink-2)}
.soon svg{width:20px;height:20px;color:var(--ink-3);flex:none}
.soon b{font-weight:700;color:var(--ink)}
.soon-both,.soon-ios{display:none}

/* pending — no badges at all */
[data-apps="pending"] .badges{display:none}
[data-apps="pending"] .soon{display:flex}
[data-apps="pending"] .soon-both{display:inline}

/* android — Play badge only, Apple link suppressed until its URL resolves */
[data-apps="android"] .badges{display:flex}
[data-apps="android"] .badges a[href*="apps.apple.com"]{display:none}
/* the footer carries a plain "App Store" text link outside .badges — that 404s too */
[data-apps="pending"] a[href*="apps.apple.com"],
[data-apps="android"] a[href*="apps.apple.com"]{display:none}
[data-apps="android"] .soon{display:flex;margin-top:12px;font-size:13.5px;color:var(--ink-3)}
[data-apps="android"] .soon svg{display:none}
[data-apps="android"] .soon-ios{display:inline}

/* live — both badges, note gone */
[data-apps="live"] .badges{display:flex}
[data-apps="live"] .soon{display:none}

.pc .soon{color:var(--btext-2);margin-top:26px}
.pc .soon svg{color:var(--btext-3)}
.pc .soon b{color:#fff}
[data-apps="android"] .pc .soon{color:var(--btext-3)}
[data-apps="android"] .pc .soon b{color:var(--btext)}

/* ============================================================
   LONG-FORM — blog posts and any page that is read, not worked
   Rule 12: dark boxes are for instruments and data, never for
   long-form reading. Article body stays on the light ground.
   ============================================================ */

.page-head{text-align:center;padding:56px 0 8px}
.page-head h1{font-size:clamp(34px,5.4vw,54px);max-width:20ch;margin-left:auto;margin-right:auto}
.page-head .lede{font-size:18px;color:var(--ink-2);max-width:60ch;margin:18px auto 0}
.page-meta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:20px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.article{max-width:none;margin:0 auto;padding:44px 0 8px}
.article>*{max-width:70ch;margin-left:auto;margin-right:auto}
.article p{font-size:18.5px;line-height:1.72;color:var(--ink);margin:0 0 1.35em}
.article h2{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.18;margin:2.4rem auto .8rem}
.article h3{font-size:21px;font-weight:700;letter-spacing:-.014em;margin:2rem auto .6rem}
.article a{color:var(--steel-deep);border-bottom:1px solid rgba(47,110,158,.4);font-weight:500}
.article a:hover{color:var(--ink);border-color:var(--ink)}
.article ul,.article ol{padding-left:1.3em;margin:0 auto 1.35em}
.article li{font-size:18.5px;line-height:1.72;margin-bottom:.5em}
.article strong{font-weight:700}
.article hr{border:0;border-top:1px solid var(--line);margin:2.6rem auto}

.pullquote{font-size:26px;font-weight:700;letter-spacing:-.022em;line-height:1.25;color:var(--ink);
  border-left:3px solid var(--steel);padding:2px 0 2px 22px;margin:2.2rem auto}

.article figure{margin:2.2rem auto}
.article figcaption{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.03em;margin-bottom:10px}
.article img{width:100%;height:auto;border-radius:12px;display:block;box-shadow:var(--lift)}

/* a case file dropped into an argument — the one place dark belongs in prose */
.article .mock,.article .panel{max-width:min(100%,860px);margin:2.4rem auto}

.post-foot{max-width:70ch;margin:2.6rem auto 0;padding-top:24px;border-top:1px solid var(--line);
  font-size:15px;color:var(--ink-2)}
.post-foot a{color:var(--steel-deep);font-weight:600;border-bottom:1px solid rgba(47,110,158,.4)}

/* ---- blog index: cards are navigation, so dark is right ---- */
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px;text-align:left}
.post{display:flex;flex-direction:column;background:var(--box);color:var(--btext);border-radius:14px;
  overflow:hidden;box-shadow:var(--lift);
  transition:transform .3s var(--spring),box-shadow .3s var(--spring),background .2s}
.post:hover{transform:translateY(-8px);box-shadow:var(--lift-hi);background:var(--box-2)}
.post:active{transform:translateY(-3px) scale(.995);transition-duration:.08s}
.pcover{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  border-bottom:1px solid var(--bline);background:var(--panel)}
.pbody{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.post .pmeta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.post h3{margin:12px 0 9px;font-size:20px;color:#fff;line-height:1.24;letter-spacing:-.016em}
.post p{font-size:14.5px;color:var(--btext-2);line-height:1.55}
.post .plink{display:inline-block;margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:700;color:var(--btext)}
.post:hover .plink{color:#fff}
@media(max-width:760px){.posts{grid-template-columns:1fr}}

/* blog empty state */
.empty{max-width:52ch;margin:44px auto 0;text-align:center}
.empty p{font-size:17px;color:var(--ink-2);line-height:1.6}


/* ============================================================
   PRIVACY / POLICY PAGES
   ============================================================ */
.pv-summary{max-width:740px;margin:34px auto 0;background:var(--box);color:var(--btext);
  border-radius:14px;padding:26px 30px;box-shadow:var(--lift);text-align:left}
.pv-sum-lab{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);margin:0 0 14px}
.pv-summary ul{list-style:none;margin:0;padding:0}
.pv-summary li{position:relative;padding-left:22px;margin-bottom:11px;font-size:16px;
  line-height:1.6;color:var(--btext-2)}
.pv-summary li:last-child{margin-bottom:0}
.pv-summary li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  border-radius:2px;background:var(--good)}

.article.pv{padding-top:36px}
.pv-sec{max-width:740px;margin:0 auto;padding-top:2.4rem}
.pv-sec h2{display:flex;gap:14px;align-items:baseline;font-size:25px;margin:0 0 .9rem}
.pv-num{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.1em;
  color:var(--ink-3);flex:none;padding-top:2px}
.article.pv p{font-size:17.5px;line-height:1.72}
.article.pv ul,.article.pv ol{max-width:740px}
.article.pv li{font-size:17.5px;line-height:1.7}
@media(max-width:620px){.pv-sec h2{font-size:22px}.pv-summary{padding:22px}}


/* ============================================================
   POLICY PAGES — fallback for plain <section> markup
   The privacy page ended up as main > .wrap > section > h2 + p
   rather than the .article.pv / .pv-sec wrappers, so paragraphs
   were running the full 1032px container width. Bare sections
   are unique to policy pages (every other page's sections carry
   a class), so this targets them without side effects.
   ============================================================ */
main .wrap > section:not([class]){
  max-width:740px;margin:0 auto;padding-top:2.6rem;
}
main .wrap > section:not([class]) h2{
  font-size:25px!important;font-weight:700!important;letter-spacing:-.018em!important;
  line-height:1.22!important;margin:0 0 .9rem!important;color:var(--ink);
}
main .wrap > section:not([class]) h3{
  font-size:19px!important;font-weight:700!important;margin:1.6rem 0 .5rem!important;color:var(--ink);
}
main .wrap > section:not([class]) p{
  font-size:17.5px!important;line-height:1.72!important;color:var(--ink);
  margin:0 0 1.2em!important;max-width:none!important;
}
main .wrap > section:not([class]) ul,
main .wrap > section:not([class]) ol{padding-left:1.35em;margin:0 0 1.3em;max-width:none}
main .wrap > section:not([class]) li{
  font-size:17.5px;line-height:1.7;color:var(--ink);margin-bottom:.55em;
}
main .wrap > section:not([class]) li::marker{color:var(--steel-deep)}
main .wrap > section:not([class]) a{
  color:var(--steel-deep);font-weight:500;border-bottom:1px solid rgba(47,110,158,.4);
}
main .wrap > section:not([class]) a:hover{color:var(--ink);border-color:var(--ink)}
main .wrap > section:not([class]) strong{font-weight:700}
@media(max-width:620px){
  main .wrap > section:not([class]) h2{font-size:22px!important}
  main .wrap > section:not([class]) p,
  main .wrap > section:not([class]) li{font-size:16.5px!important}
}