/* ============================================================
   Tokens — mirrored from web/lib/theme.dart (the workspace).
   ============================================================ */
:root{
  --canvas:#FFFFFF; --shell:#F7F6F3; --wash:#F3F1EC; --hairline:#E7E4DD;
  --ink:#1A1917; --dim:#6F6B63; --faint:#A5A099;
  --ever:#116549; --ever-soft:#2E8663; --mint:#E4F0EA; --on-dark:#FBFAF7;
  --bad:#B0402F; --bad-wash:#FAE9E4;
  --warn:#9A6516; --warn-wash:#FBF0DA;
  --sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  /* committed dark surfaces — identical in both themes */
  --water:#D7E3EA; --park:#E2EDE0; --block:#EDEAE4; --road:#FFFFFF;
  --nightA:#121110; --nightB:#0B0A0A; --night-ink:#F4F2ED; --night-dim:#9C978F;
  --night-line:#2A2724; --night-card:#191716;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --canvas:#0E0D0C; --shell:#151413; --wash:#1E1C1A; --hairline:#2B2825;
    --ink:#F1EFEA; --dim:#9E9A93; --faint:#6E6A64;
    --ever:#4FB088; --ever-soft:#3E9A74; --mint:#16342A; --on-dark:#FBFAF7;
    --bad:#E08976; --bad-wash:#33211D;
    --warn:#D6A44E; --warn-wash:#2C2415;
    --water:#15242B; --park:#16251A; --block:#1D1B19; --road:#36322E;
  }
}
:root[data-theme="dark"]{
  --canvas:#0E0D0C; --shell:#151413; --wash:#1E1C1A; --hairline:#2B2825;
  --ink:#F1EFEA; --dim:#9E9A93; --faint:#6E6A64;
  --ever:#4FB088; --ever-soft:#3E9A74; --mint:#16342A; --on-dark:#FBFAF7;
  --bad:#E08976; --bad-wash:#33211D;
  --warn:#D6A44E; --warn-wash:#2C2415;
  --water:#15242B; --park:#16251A; --block:#1D1B19; --road:#36322E;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font:16px/1.62 var(--sans); -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05","ss01";
}
a{color:inherit}
:focus-visible{outline:2px solid var(--ever); outline-offset:3px; border-radius:6px}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px}
.mark{display:block; flex:none}
.eyebrow{font:600 13px/1 var(--sans); color:var(--faint); margin:0}
.night .eyebrow{color:var(--night-dim)}

h1,h2,h3{margin:0; text-wrap:balance}
h1{font:600 clamp(40px,6.6vw,82px)/1.02 var(--sans); letter-spacing:-3.6px; max-width:16ch}
h2{font:600 clamp(27px,3.6vw,42px)/1.14 var(--sans); letter-spacing:-1.6px}
h3{font:600 16.5px/1.35 var(--sans); letter-spacing:-.2px}
@media (max-width:700px){h1{letter-spacing:-1.8px} h2{letter-spacing:-.9px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
     background:var(--ink); color:var(--canvas); text-decoration:none;
     font:600 14.5px/1 var(--sans); padding:12px 21px; border-radius:999px;
     border:1px solid var(--ink); white-space:nowrap; cursor:pointer;
     transition:opacity .15s ease, border-color .15s ease}
.btn:hover{opacity:.86}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--hairline)}
.btn.ghost:hover{border-color:var(--ink); opacity:1}
.btn.lg{font-size:16px; padding:16px 30px}
.night .btn{background:var(--night-ink); color:#121110; border-color:var(--night-ink)}
.night .btn.ghost{background:transparent; color:var(--night-ink); border-color:var(--night-line)}
.night .btn.ghost:hover{border-color:var(--night-dim)}

/* ---------- chips ---------- */
.chip{display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:999px;
      font:600 12px/1.7 var(--sans); background:var(--mint); color:var(--ever); white-space:nowrap}
.chip.flag{background:var(--bad-wash); color:var(--bad)}
.chip.warn{background:var(--warn-wash); color:var(--warn)}
.chip.mute{background:var(--wash); color:var(--dim)}
.night .chip{background:#16342A; color:#57BC93}
.night .chip.flag{background:#331F1B; color:#E08976}
.night .chip.mute{background:#232120; color:var(--night-dim)}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--canvas) 88%, transparent);
       backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--hairline)}
header .wrap{display:flex; align-items:center; gap:14px; height:64px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand .wm{font:600 20px/1 var(--sans); letter-spacing:-.7px}
header nav{margin-left:auto; display:flex; gap:24px; align-items:center}
header nav a:not(.btn){color:var(--dim); text-decoration:none; font-size:14.5px; font-weight:500}
header nav a:not(.btn):hover{color:var(--ink)}
@media (max-width:860px){header nav a:not(.btn){display:none}}

/* ============================================================
   HERO — committed dark, both themes
   ============================================================ */
.night{background:var(--nightA); color:var(--night-ink)}
.night h1,.night h2,.night h3{color:var(--night-ink)}
.hero{padding:76px 0 84px; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:1px; background:var(--night-line)}
.hero-grid{display:grid; gap:40px}
.hero .lead{font-size:19.5px; color:var(--night-dim); margin:0; max-width:54ch}
.hero .lead em{color:var(--night-ink); font-style:normal; font-weight:500}
.hero-top{display:flex; flex-direction:column; gap:22px}
.cta-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.cta-note{font-size:13.5px; color:var(--night-dim); margin:0}

/* the switch that strips the evidence out */
.switch{display:inline-flex; padding:4px; background:#201E1C; border:1px solid var(--night-line);
        border-radius:999px; gap:4px}
.switch button{appearance:none; border:0; background:transparent; color:var(--night-dim);
               font:600 13.5px/1 var(--sans); padding:9px 16px; border-radius:999px; cursor:pointer;
               transition:background .2s ease, color .2s ease}
.switch button[aria-pressed="true"]{background:var(--night-ink); color:#121110}

/* ---------- the day strip ---------- */
.strip{border:1px solid var(--night-line); border-radius:18px; background:var(--night-card); overflow:hidden}
.strip-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
            padding:15px 20px; border-bottom:1px solid var(--night-line); background:#1E1C1A}
.strip-head .t{font:600 14px/1 var(--sans)}
.strip-head .d{font-size:13px; color:var(--night-dim); font-variant-numeric:tabular-nums}
.strip-head .sp{margin-left:auto}
.strip-body{padding:18px 20px 6px; display:flex; flex-direction:column; gap:11px}
.lane{display:grid; grid-template-columns:minmax(0,196px) 1fr; gap:16px; align-items:center}
.lane .who{display:flex; flex-direction:column; gap:2px; min-width:0}
.lane .who b{font:600 14px/1.3 var(--sans); display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.lane .who span{font-size:12.5px; color:var(--night-dim); font-variant-numeric:tabular-nums}
.track{position:relative; height:26px}
.track::before{content:""; position:absolute; inset:auto 0 -6px 0; height:1px; background:var(--night-line)}
.bar{position:absolute; top:0; height:26px; border-radius:999px; background:var(--ever-soft);
     transform-origin:left center; transition:background .32s ease, border-color .32s ease}
.axis{display:flex; justify-content:space-between; padding:4px 20px 16px; margin-left:212px;
      font-size:12px; color:var(--night-dim); font-variant-numeric:tabular-nums}
.strip-foot{border-top:1px solid var(--night-line); padding:15px 20px; background:#1E1C1A;
            font-size:14.5px; color:var(--night-dim); display:flex; gap:9px; align-items:baseline; flex-wrap:wrap}
.strip-foot b{color:var(--night-ink); font-weight:600}

/* evidence ON: the third stay is hollow */
.strip[data-mode="evidence"] .lane.unproven .bar{background:transparent; border:3px solid var(--bad)}
.strip[data-mode="evidence"] .lane.unproven .chip{display:inline-flex}
.strip[data-mode="evidence"] .detail{display:flex}
.lane .chip{display:none}
.detail{display:none; gap:22px; flex-wrap:wrap; padding:11px 14px; margin:2px 0 0;
        background:#231D1C; border:1px solid #3A2A26; border-radius:12px}
.detail div{display:flex; flex-direction:column; gap:1px}
.detail .k{font-size:11.5px; color:var(--night-dim)}
.detail .v{font:600 14px/1.3 var(--sans); color:var(--night-ink); font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .lane{grid-template-columns:1fr; gap:5px}
  .axis{margin-left:0}
  .track,.bar{height:18px}
  .strip[data-mode="evidence"] .lane.unproven .bar{border-width:2.5px}
}

@keyframes grow{from{transform:scaleX(0); opacity:.35} to{transform:scaleX(1); opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .bar{animation:grow .6s cubic-bezier(.22,.9,.3,1) backwards}
  .lane:nth-of-type(1) .bar{animation-delay:.06s}
  .lane:nth-of-type(2) .bar{animation-delay:.16s}
  .lane:nth-of-type(3) .bar{animation-delay:.26s}
  .lane:nth-of-type(4) .bar{animation-delay:.36s}
}


/* the strip again, on a light section */
.strip.onlight{border-color:var(--hairline); background:var(--canvas)}
.strip.onlight .strip-head,.strip.onlight .strip-foot{background:var(--shell); border-color:var(--hairline)}
.strip.onlight .strip-head .t{color:var(--ink)}
.strip.onlight .strip-head .d,.strip.onlight .axis,.strip.onlight .lane .who span{color:var(--faint)}
.strip.onlight .lane .who b{color:var(--ink)}
.strip.onlight .track::before{background:var(--hairline)}
.strip.onlight .bar{background:var(--ever)}
.strip.onlight .strip-foot{color:var(--dim)}
.strip.onlight .strip-foot b{color:var(--ink)}
.strip.onlight .detail{background:var(--bad-wash); border-color:color-mix(in srgb, var(--bad) 34%, transparent)}
.strip.onlight .detail .k{color:var(--dim)}
.strip.onlight .detail .v{color:var(--ink)}
.switch.light{background:var(--wash); border-color:var(--hairline)}
.switch.light button{color:var(--dim)}
.switch.light button[aria-pressed="true"]{background:var(--ink); color:var(--canvas)}

/* ---------- sections ---------- */
section{padding:88px 0}
section.shell{background:var(--shell); border-block:1px solid var(--hairline)}
.sec-head{display:flex; flex-direction:column; gap:13px; max-width:64ch; margin-bottom:42px}
.sec-head p{margin:0; color:var(--dim); font-size:17.5px}
.night .sec-head p{color:var(--night-dim)}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px}
.card{background:var(--canvas); border:1px solid var(--hairline); border-radius:16px;
      padding:24px; display:flex; flex-direction:column; gap:9px}
.card h3{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.card p{margin:0; font-size:14.5px; color:var(--dim)}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}}

/* ---------- product tour ---------- */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.tabs button{appearance:none; border:1px solid var(--hairline); background:var(--canvas);
             color:var(--dim); font:600 14px/1 var(--sans); padding:11px 18px; border-radius:999px;
             cursor:pointer; transition:all .16s ease}
.tabs button:hover{color:var(--ink); border-color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink); color:var(--canvas); border-color:var(--ink)}
.panel{display:none}
.panel.on{display:block}
.app{border:1px solid var(--hairline); border-radius:18px; overflow:hidden; background:var(--canvas)}
.app-bar{display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--shell);
         border-bottom:1px solid var(--hairline); font-size:13px; color:var(--dim)}
.app-bar .dot{width:9px; height:9px; border-radius:999px; background:var(--hairline)}
.app-bar .sp{margin-left:auto; display:flex; gap:8px; align-items:center}
.live{display:grid; grid-template-columns:1fr 268px; min-height:392px}
@media (max-width:860px){.live{grid-template-columns:1fr}}
.mapwrap{position:relative; background:var(--wash); overflow:hidden}
.mapwrap svg{display:block; width:100%; height:100%}
.ticker{position:absolute; left:16px; right:16px; bottom:16px; background:var(--canvas);
        border:1px solid var(--hairline); border-radius:12px; padding:10px 14px; display:flex;
        gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--dim); font-variant-numeric:tabular-nums}
.ticker b{color:var(--ink); font-weight:600}
.rail{border-left:1px solid var(--hairline); display:flex; flex-direction:column}
@media (max-width:860px){.rail{border-left:0; border-top:1px solid var(--hairline)}}
.rail-head{padding:13px 16px; border-bottom:1px solid var(--hairline); font:600 13px/1 var(--sans); color:var(--dim)}
.person{display:flex; align-items:center; gap:11px; padding:12px 16px; border-bottom:1px solid var(--hairline)}
.person:last-child{border-bottom:0}
.av{width:32px; height:32px; border-radius:999px; background:var(--mint); color:var(--ever);
    display:grid; place-items:center; font:600 12px/1 var(--sans); flex:none}
.person .nm{font:600 13.5px/1.3 var(--sans)}
.person .st{font-size:12px; color:var(--faint)}
.person .sp{margin-left:auto}
.pulse{width:8px; height:8px; border-radius:999px; background:var(--ever); flex:none}
@media (prefers-reduced-motion:no-preference){
  .pulse{animation:beat 2.4s ease-in-out infinite}
  @keyframes beat{0%,100%{opacity:1} 50%{opacity:.35}}
}

/* data table */
.tbl{width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums}
.tblwrap{overflow-x:auto}
.tbl th,.tbl td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--hairline); white-space:nowrap}
.tbl thead th{background:var(--shell); font:600 12.5px/1 var(--sans); color:var(--dim)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td b{font-weight:600}
.bar-mini{height:7px; border-radius:999px; background:var(--ever); min-width:8px}
.bar-mini.open{background:transparent; border:2px solid var(--bad)}


/* ---------- capability overview ---------- */
.caps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 30px}
@media (max-width:900px){.caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.caps{grid-template-columns:1fr}}
.capgroup{display:flex; flex-direction:column; gap:12px}
.capgroup h3{font:600 14px/1 var(--sans); letter-spacing:0; padding-bottom:12px;
             border-bottom:2px solid var(--ink)}
.capgroup ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.capgroup li{font-size:14px; color:var(--dim); line-height:1.45}
.capgroup li b{color:var(--ink); font-weight:600}
.countline{display:flex; gap:26px; flex-wrap:wrap; margin-top:36px; padding-top:22px;
           border-top:1px solid var(--hairline); font-size:13.5px; color:var(--faint)}
.countline b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}

/* ---------- integrations ---------- */
.ints{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.int{border:1px solid var(--hairline); border-radius:14px; padding:18px; background:var(--canvas);
     display:flex; flex-direction:column; gap:6px}
.int .nm{font:600 14.5px/1 var(--sans)}
.int p{margin:0; font-size:13.5px; color:var(--dim)}
.codebar{margin-top:20px; background:var(--ink); color:var(--canvas); border-radius:14px;
         padding:18px 20px; font:500 13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;
         overflow-x:auto; white-space:pre}

/* ---------- dispute pack ---------- */
.pack{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start}
@media (max-width:900px){.pack{grid-template-columns:1fr}}
.pack ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px}
.pack li{position:relative; padding-left:21px; color:var(--night-dim); font-size:15.5px}
.pack li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px;
                 border-radius:999px; background:var(--ever-soft)}
.pack li b{color:var(--night-ink); font-weight:600}
.paper{background:#FBFAF7; color:#1A1917; border-radius:14px; overflow:hidden;
       box-shadow:0 24px 60px rgba(0,0,0,.45)}
.paper-head{padding:16px 20px; border-bottom:1px solid #E7E4DD; display:flex; justify-content:space-between;
            gap:12px; align-items:baseline}
.paper-head .t{font:600 15px/1 var(--sans)}
.paper-head .m{font-size:12px; color:#6F6B63; font-variant-numeric:tabular-nums}
.paper-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:16px}
.sketch{background:#FFF; border:1px solid #E7E4DD; border-radius:10px; padding:8px}
.sketch svg{display:block; width:100%; height:auto}
.plines{display:flex; flex-direction:column; gap:0}
.pline{display:flex; justify-content:space-between; gap:14px; font-size:13px; color:#6F6B63;
       padding:9px 0; border-bottom:1px solid #EFEDE8; font-variant-numeric:tabular-nums}
.pline:last-child{border-bottom:0}
.pline b{color:#1A1917; font-weight:600}
.vd{font:600 11.5px/1.7 var(--sans); padding:1px 9px; border-radius:999px;
    background:#E4F0EA; color:#116549; white-space:nowrap}
.vd.no{background:#FAE9E4; color:#B0402F}

/* ---------- phones ---------- */
.phones{display:flex; gap:26px; flex-wrap:wrap; justify-content:flex-start}
.phone{width:250px; border:1px solid var(--hairline); border-radius:30px; overflow:hidden;
       background:var(--canvas); flex:none}
.ph-top{height:26px; background:var(--shell); border-bottom:1px solid var(--hairline);
        display:flex; align-items:center; justify-content:center}
.ph-top i{width:56px; height:5px; border-radius:999px; background:var(--hairline); display:block}
.ph-body{padding:16px; display:flex; flex-direction:column; gap:12px; min-height:334px}
.ph-h{font:600 15px/1.3 var(--sans)}
.ph-sub{font-size:12.5px; color:var(--faint)}
.stat{display:flex; justify-content:space-between; align-items:baseline; padding:9px 12px;
      background:var(--shell); border-radius:10px; font-size:13px; color:var(--dim)}
.stat b{font:600 15px/1 var(--sans); color:var(--ink); font-variant-numeric:tabular-nums}
.punch{background:var(--ever); color:#FBFAF7; border-radius:14px; padding:16px; display:flex;
       flex-direction:column; gap:3px}
.punch .l{font-size:12px; opacity:.82}
.punch .v{font:600 20px/1.2 var(--sans)}

/* ---------- how ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; counter-reset:s}
.step{position:relative; padding-top:22px; border-top:2px solid var(--ink); display:flex;
      flex-direction:column; gap:8px}
.step .n{font:600 12.5px/1 var(--sans); color:var(--faint); font-variant-numeric:tabular-nums}
.step p{margin:0; color:var(--dim); font-size:14.5px}

/* ---------- two-column compare ---------- */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:760px){.vs{grid-template-columns:1fr}}
.vs-col{border:1px solid var(--hairline); border-radius:16px; padding:24px; display:flex;
        flex-direction:column; gap:14px; background:var(--canvas)}
.vs-col.us{border-color:var(--ever); background:var(--canvas)}
.vs-col h3{display:flex; align-items:center; gap:9px}
.vs-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.vs-col li{position:relative; padding-left:23px; font-size:14.5px; color:var(--dim)}
.vs-col li::before{content:"—"; position:absolute; left:0; top:-1px; color:var(--faint); font-weight:600}
.vs-col.us li::before{content:"✓"; color:var(--ever)}

/* ---------- faq ---------- */
.faq{display:flex; flex-direction:column; gap:0; max-width:74ch;
     border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer; list-style:none; padding:20px 0; font:600 16.5px/1.4 var(--sans);
             display:flex; gap:16px; align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; color:var(--faint); font-weight:500; font-size:20px;
                    line-height:1; flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 20px; color:var(--dim); font-size:15px; max-width:66ch}

/* ---------- pricing ---------- */
.price{display:grid; grid-template-columns:auto 1fr; gap:46px; align-items:center;
       background:var(--canvas); border:1px solid var(--hairline); border-radius:20px; padding:40px}
@media (max-width:800px){.price{grid-template-columns:1fr; gap:26px; padding:28px}}
.amount-block{display:flex; flex-direction:column; gap:6px}
.amount{font:600 clamp(38px,5vw,56px)/1 var(--sans); letter-spacing:-2.4px;
        font-variant-numeric:tabular-nums; white-space:nowrap}
.amount.two{font-size:clamp(28px,3.6vw,40px); letter-spacing:-1.6px; color:var(--dim)}
.amount.two small{color:var(--faint)}
.amount small{font-size:16px; color:var(--dim); font-weight:500; letter-spacing:-.2px}
.amount-note{margin:8px 0 0; font-size:13.5px; color:var(--faint)}
.price ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.price li{position:relative; padding-left:19px; font-size:15px; color:var(--dim)}
.price li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px;
                  border-radius:999px; background:var(--ever)}
.price li b{color:var(--ink); font-weight:600}

/* ---------- close + footer ---------- */
.close{padding:96px 0; display:flex; flex-direction:column; gap:22px; align-items:flex-start}
footer{background:var(--nightB); color:var(--night-dim); padding:44px 0 60px; font-size:13.5px}
footer .wrap{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
footer a{color:var(--night-dim); text-decoration:none}
footer a:hover{color:var(--night-ink)}
footer .sp{margin-left:auto}

/* ---------- sub-pages ---------- */
.subhero{padding:70px 0 12px; display:flex; flex-direction:column; gap:20px}
.crumb{font-size:13.5px; color:var(--faint)}
.crumb a{color:var(--dim); text-decoration:none}
.crumb a:hover{color:var(--ink)}
.subhero h1{font-size:clamp(34px,5vw,60px); letter-spacing:-2.4px; max-width:18ch}
.subhero .lead{font-size:19px; color:var(--dim); margin:0; max-width:58ch}
.related{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.rel{border:1px solid var(--hairline); border-radius:14px; padding:18px 20px; background:var(--canvas);
     text-decoration:none; display:flex; flex-direction:column; gap:5px}
.rel:hover{border-color:var(--ink)}
.rel .t{font:600 15px/1.3 var(--sans); color:var(--ink)}
.rel .d{font-size:13.5px; color:var(--dim)}
.sitenav{display:flex; gap:18px; flex-wrap:wrap; padding-top:18px; margin-top:18px;
         border-top:1px solid var(--night-line)}
.sitenav a{color:var(--night-dim); text-decoration:none; font-size:13.5px}
.sitenav a:hover{color:var(--night-ink)}

/* ============================================================
   Long-form documents — privacy, terms, DPA, API reference.
   ============================================================ */
.doc-hero{padding:64px 0 30px; border-bottom:1px solid var(--hairline)}
.doc-hero .crumb{font-size:13.5px; color:var(--faint); margin:0 0 14px}
.doc-hero .crumb a{color:var(--dim); text-decoration:none}
.doc-hero .crumb a:hover{color:var(--ink)}
.doc-hero h1{font:600 clamp(34px,4.6vw,54px)/1.06 var(--sans); letter-spacing:-2.2px;
             margin:0 0 16px; max-width:20ch}
.doc-hero .standfirst{font-size:18.5px; color:var(--dim); margin:0; max-width:58ch}
.doc-meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;
          font-size:12.5px; color:var(--faint); font-variant-numeric:tabular-nums}
.doc-meta span{padding:4px 11px; border:1px solid var(--hairline); border-radius:999px}

.doc-layout{display:grid; grid-template-columns:228px minmax(0,1fr); gap:52px;
            align-items:start; padding:44px 0 96px}
@media (max-width:940px){.doc-layout{grid-template-columns:1fr; gap:0; padding-top:30px}}

.toc{position:sticky; top:88px; display:flex; flex-direction:column; gap:9px;
     max-height:calc(100vh - 120px); overflow-y:auto}
@media (max-width:940px){
  .toc{position:static; max-height:none; margin-bottom:34px; padding-bottom:26px;
       border-bottom:1px solid var(--hairline)}
}
.toc .toc-h{font:600 12px/1 var(--sans); color:var(--faint); margin-bottom:3px}
.toc a{font-size:13.5px; line-height:1.42; color:var(--dim); text-decoration:none;
       padding:3px 0 3px 13px; border-left:2px solid var(--hairline)}
.toc a:hover{color:var(--ink); border-left-color:var(--ink)}

.doc{max-width:70ch; font-size:16.5px; line-height:1.68}
.doc h2{font:600 clamp(20px,2.4vw,25px)/1.28 var(--sans); letter-spacing:-.7px;
        margin:52px 0 14px; padding-top:26px; border-top:1px solid var(--hairline);
        scroll-margin-top:88px}
.doc h2:first-of-type{margin-top:0; padding-top:0; border-top:0}
.doc h3{font:600 16.5px/1.4 var(--sans); letter-spacing:-.2px; margin:28px 0 8px}
.doc p{margin:0 0 15px; color:var(--dim)}
.doc p strong,.doc li strong{color:var(--ink); font-weight:600}
.doc ul,.doc ol{margin:0 0 16px; padding-left:0; list-style:none;
                display:flex; flex-direction:column; gap:9px}
.doc li{position:relative; padding-left:21px; color:var(--dim)}
.doc ul>li::before{content:""; position:absolute; left:0; top:10px; width:6px; height:6px;
                   border-radius:999px; background:var(--ever)}
.doc ol{counter-reset:d}
.doc ol>li{counter-increment:d}
.doc ol>li::before{content:counter(d); position:absolute; left:0; top:0;
                   font:600 12.5px/1.7 var(--sans); color:var(--ever);
                   font-variant-numeric:tabular-nums}
.doc a{color:var(--ever); text-decoration:underline; text-underline-offset:2px}
.doc code{font:500 13.5px ui-monospace,SFMono-Regular,Menlo,monospace;
          background:var(--wash); padding:2px 6px; border-radius:5px; color:var(--ink)}
.doc pre{background:var(--ink); color:var(--canvas); border-radius:12px; padding:18px 20px;
         overflow-x:auto; font:500 13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;
         margin:0 0 18px}
.doc pre code{background:none; padding:0; color:inherit; font-size:inherit}
.doc table{width:100%; border-collapse:collapse; font-size:14px; margin:0 0 20px}
.doc thead th,.doc tr:first-child th{background:var(--shell); font:600 12.5px/1 var(--sans);
                                     color:var(--dim); text-align:left}
.doc th,.doc td{padding:11px 14px; border-bottom:1px solid var(--hairline);
                text-align:left; vertical-align:top}
.doc tr:last-child td{border-bottom:0}
.doc .callout{background:var(--shell); border:1px solid var(--hairline);
              border-radius:14px; padding:20px 22px; margin:0 0 24px}
.doc .callout p:last-child{margin-bottom:0}
.doc .meta{font-size:14px; color:var(--faint)}
.doc .todo{background:var(--bad-wash); color:var(--bad); font-weight:600;
           padding:1px 7px; border-radius:5px; font-size:.92em}

/* HTTP method pills for the API reference */
.doc .m{display:inline-block; min-width:52px; text-align:center; padding:2px 8px;
        border-radius:999px; font:600 11px/1.6 var(--sans); letter-spacing:.02em; margin-right:7px}
.doc .m.get{background:var(--mint); color:var(--ever)}
.doc .m.post{background:var(--warn-wash); color:var(--warn)}
.doc .m.patch{background:var(--infoish,#E9EFF5); color:#35597A}
:root:not([data-theme="light"]) .doc .m.patch{background:#1B2733; color:#8FB3D4}
:root[data-theme="dark"] .doc .m.patch{background:#1B2733; color:#8FB3D4}