/* ============================================================
   CEPTHER — shared stylesheet
   By Intrcepth
   ============================================================ */

/* ---------- THEME: purple (default) ---------- */
:root,
:root[data-theme="purple"]{
  --paper:#08070C;
  --panel:#101018;
  --panel-2:#16161F;
  --ink:#F4F3F7;
  --graphite:#A8A6B4;
  --mist:#736F82;
  --rule:#221F2E;
  --rule-hard:#332E45;
  --track:#1B1826;

  --accent:#8B5CF6;
  --accent-2:#A855F7;
  --accent-soft:rgba(139,92,246,.16);
  --accent-ink:#FFFFFF;
  --on-accent:#FFFFFF;

  --glow-a:rgba(139,92,246,.45);
  --glow-b:rgba(56,120,255,.30);
  --glow-c:rgba(10,8,20,.0);

  --shadow-card:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -28px rgba(0,0,0,.9);
  --shadow-lift:0 2px 6px rgba(0,0,0,.55), 0 30px 60px -30px rgba(0,0,0,1);
  --head-bg:rgba(16,16,24,.72);
  --shine:#FFFFFF;
  --ring-1:rgba(139,92,246,.55);
  --ring-2:rgba(139,92,246,.16);
  --ring-3:rgba(88,110,246,.07);
  --scheme:dark;
}

/* ---------- THEME: pure dark, white accent ---------- */
:root[data-theme="dark"]{
  --paper:#050505;
  --panel:#0D0D0D;
  --panel-2:#141414;
  --ink:#F7F7F7;
  --graphite:#A5A5A5;
  --mist:#6E6E6E;
  --rule:#1E1E1E;
  --rule-hard:#2E2E2E;
  --track:#1A1A1A;

  --accent:#FFFFFF;
  --accent-2:#D8D8D8;
  --accent-soft:rgba(255,255,255,.10);
  --accent-ink:#050505;
  --on-accent:#050505;

  --glow-a:rgba(255,255,255,.22);
  --glow-b:rgba(180,180,180,.14);
  --glow-c:rgba(0,0,0,0);

  --shadow-card:0 1px 2px rgba(0,0,0,.6), 0 18px 40px -28px rgba(0,0,0,1);
  --shadow-lift:0 2px 6px rgba(0,0,0,.65), 0 30px 60px -30px rgba(0,0,0,1);
  --head-bg:rgba(13,13,13,.72);
  --shine:#FFFFFF;
  --ring-1:rgba(255,255,255,.32);
  --ring-2:rgba(255,255,255,.10);
  --ring-3:rgba(255,255,255,.04);
  --scheme:dark;
}

/* ---------- THEME: light ---------- */
:root[data-theme="light"]{
  --paper:#FBFBF9;
  --panel:#FFFFFF;
  --panel-2:#F5F4F1;
  --ink:#0B0B0C;
  --graphite:#55555A;
  --mist:#8A8A90;
  --rule:#E7E6E2;
  --rule-hard:#D5D4CF;
  --track:#EFEEEA;

  --accent:#6D28D9;
  --accent-2:#7C3AED;
  --accent-soft:rgba(109,40,217,.10);
  --accent-ink:#FFFFFF;
  --on-accent:#FFFFFF;

  --glow-a:rgba(109,40,217,.30);
  --glow-b:rgba(37,99,235,.20);
  --glow-c:rgba(255,255,255,0);

  --shadow-card:0 1px 2px rgba(11,11,12,.04), 0 8px 24px -16px rgba(11,11,12,.18);
  --shadow-lift:0 2px 4px rgba(11,11,12,.06), 0 18px 40px -22px rgba(11,11,12,.28);
  --head-bg:rgba(251,251,249,.74);
  --shine:#A78BFA;
  --ring-1:rgba(109,40,217,.40);
  --ring-2:rgba(109,40,217,.12);
  --ring-3:rgba(37,99,235,.06);
  --scheme:light;
}

:root{
  --r-s:10px;
  --r-m:16px;
  --r-l:24px;
  --r-xl:32px;

  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:96px;

  --sans:"Segoe UI Variable Display","Segoe UI",Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono","JetBrains Mono",Consolas,"Liberation Mono",monospace;

  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:175ms;
  --t-reveal:720ms;
  --t-line:820ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background 420ms var(--ease), color 420ms var(--ease);
}
img{max-width:100%;display:block}
a{color:inherit}

/* ============================================================
   SCROLLBAR — thin, modern, themed
   ============================================================ */
html{scrollbar-width:thin;scrollbar-color:var(--rule-hard) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--rule-hard);
  border-radius:99px;
  border:3px solid var(--paper);
  transition:background 200ms var(--ease);
}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::-webkit-scrollbar-corner{background:transparent}

/* ============================================================
   MOTION SYSTEM
   ============================================================ */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal].in{opacity:1;transform:none}

[data-line]{transform:scaleX(0);transform-origin:left center;transition:transform var(--t-line) var(--ease-out);transition-delay:var(--d,0ms)}
[data-line].in{transform:scaleX(1)}

.mask{display:block;overflow:hidden;padding-bottom:.08em}
.mask > span{
  display:block;
  transform:translateY(110%);
  transition:transform 900ms var(--ease-out);
  transition-delay:var(--d,0ms);
}
.mask.in > span{transform:none}

/* ---- Blur Text: words rise out of a blur, staggered ---- */
.blur-text{display:inline}
.blur-text .bw{
  display:inline-block;
  opacity:0;
  filter:blur(10px);
  transform:translateY(-14px);
  transition:opacity 700ms var(--ease-out), filter 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay:var(--bd,0ms);
}
.blur-text.in .bw{opacity:1;filter:blur(0);transform:none}

/* ---- Scroll Reveal: words brighten and sharpen as they scroll past ---- */
.sreveal{display:block}
.sreveal .sw{
  display:inline-block;
  opacity:.32;
  transition:opacity 300ms linear;
}
.sreveal .sw.lit{opacity:1}

/* ---- Shiny Text: one sweep, then it settles ---- */
.shiny{
  display:inline-block;
  background-image:linear-gradient(110deg,
     currentColor 0%, currentColor 34%,
     var(--shine,#fff) 50%,
     currentColor 66%, currentColor 100%);
  background-size:220% auto;
  background-position:160% center;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:inherit;
}
.shiny.sweep{animation:shineOnce 2400ms var(--ease-out) 260ms 1 forwards}
@keyframes shineOnce{from{background-position:160% center}to{background-position:-60% center}}

/* ---- Counter: digits roll into place ---- */
.counter{font:inherit;letter-spacing:inherit;text-transform:none;color:inherit;display:inline-flex;align-items:flex-start;line-height:1;vertical-align:baseline;font-variant-numeric:tabular-nums}
.counter .cd{position:relative;display:block;width:.62em;height:1em;overflow:hidden}
.counter .cd.sep{width:auto;overflow:visible}
.counter .cstack{display:block;transition:transform 1100ms var(--ease-out);transition-delay:var(--cd,0ms)}
.counter .cstack span{display:block;height:1em;line-height:1;text-align:center}

/* ---- Ambient edge for the important boxes.
       One crisp hairline rim, then nothing but blurred layers. Every layer
       here has a blur radius far larger than its spread, so the falloff is a
       single continuous gradient. A shadow with spread and no blur draws a
       hard ring, and stacking those is what makes a glow look banded. ---- */
.glowbox{
  position:relative;
  box-shadow:0 0 0 1px var(--rule);
  transition:box-shadow 700ms var(--ease-out);
}
.glowbox.in{
  box-shadow:
    0 0 0 1px var(--ring-1),
    0 0 14px -6px var(--glow-a),
    0 0 34px -10px var(--glow-a),
    0 6px 68px -22px var(--glow-a),
    0 14px 100px -30px var(--glow-b),
    0 30px 160px -50px var(--glow-b);
}

/* ---- Border Glow: cursor-tracked edge light on cards ---- */
.bglow{position:relative;isolation:isolate}
.bglow.glow-on::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--cursor-angle,0deg) at 50% 50%,
      transparent 0deg,
      var(--accent) calc(var(--cone,26) * 1deg),
      var(--accent-2) calc(var(--cone,26) * 2deg),
      transparent calc(var(--cone,26) * 3.4deg));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:calc(var(--edge-proximity,0) / 100);
  transition:opacity 320ms var(--ease-out);
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-reveal]{opacity:1;transform:none}
  [data-line]{transform:scaleX(1)}
  .mask > span{transform:none}
  .blur-text .bw{opacity:1;filter:none;transform:none}
  .sreveal .sw{opacity:1;filter:none}
  .shiny{-webkit-text-fill-color:currentColor;background:none}
  .scroll-progress{display:none}
}

/* ============================================================
   SHARED TYPE
   ============================================================ */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin:0 0 var(--s3)}
.h-display{font-size:clamp(38px,7vw,74px);font-weight:600;letter-spacing:-.038em;line-height:1.02;margin:0}
.h-section{font-size:clamp(26px,3.6vw,40px);font-weight:600;letter-spacing:-.026em;line-height:1.14;margin:0 0 var(--s3)}
.h-item{font-size:18px;font-weight:600;letter-spacing:-.012em;margin:0 0 var(--s2)}
.lede{font-size:clamp(17px,2vw,20px);color:var(--graphite);line-height:1.55;margin:var(--s4) 0 0;max-width:52ch}
.muted{color:var(--graphite)}
.tiny{font-size:13.5px;color:var(--mist);line-height:1.55}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:-.01em}
.accent{color:var(--accent)}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.band{padding-block:var(--s7)}
.band--tight{padding-block:var(--s6)}
.band--alt{background:var(--panel);border-block:1px solid var(--rule)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  font:inherit;font-weight:550;font-size:15.5px;
  padding:13px 22px;border-radius:var(--r-s);
  border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);
  text-decoration:none;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.btn > *{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.22) 45%,transparent 90%);
  transform:translateX(-120%);
  transition:transform 620ms var(--ease-out);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -12px var(--glow-a);background:var(--accent-2);border-color:var(--accent-2)}
.btn:hover::before{transform:translateX(120%)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn .arw{transition:transform var(--t-fast) var(--ease);display:inline-block}
.btn:hover .arw{transform:translateX(4px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-hard)}
.btn--ghost:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.btn--ghost::before{background:linear-gradient(100deg,transparent 0%,var(--accent-soft) 45%,transparent 90%)}
.btn--sm{padding:9px 15px;font-size:14px}
.btn--wide{padding:16px 30px;font-size:16.5px}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:var(--r-s)}

/* ============================================================
   HEADER — a floating rounded bar, see-through
   ============================================================ */
.site-head{
  position:fixed;top:14px;left:0;right:0;z-index:60;
  pointer-events:none;
}
.head-inner{
  pointer-events:auto;
  width:min(1120px,100% - 32px);margin-inline:auto;
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:var(--s4);
  height:60px;padding-inline:18px;
  border-radius:20px;
  background:var(--head-bg);
  border:1px solid var(--rule);
  -webkit-backdrop-filter:blur(22px);
          backdrop-filter:blur(22px);
  box-shadow:0 10px 34px -22px rgba(0,0,0,.85);
  transition:background 320ms var(--ease),border-color 320ms var(--ease),box-shadow 320ms var(--ease),height 320ms var(--ease);
}
.site-head.stuck .head-inner{
  box-shadow:0 16px 40px -24px rgba(0,0,0,.95);
  border-color:var(--rule-hard);
}
.scroll-progress{
  position:absolute;left:0;top:0;height:2px;width:100%;z-index:3;will-change:transform;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0);transform-origin:left center;
}
body{padding-top:92px}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:650;letter-spacing:-.02em;font-size:17px}
.brand .mark{display:block;width:28px;height:28px;border-radius:9px;flex:none;overflow:hidden;transition:transform 420ms var(--ease-out);box-shadow:0 0 0 1px var(--rule)}
.brand .mark img{width:100%;height:100%;object-fit:cover}
.brand:hover .mark{transform:translateY(-2px) rotate(-4deg)}

.head-nav{display:flex;gap:var(--s4);margin-left:auto;font-size:14.5px}
.head-nav a{position:relative;text-decoration:none;color:var(--mist);padding-block:6px;transition:color var(--t-fast) var(--ease)}
.head-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#0B0512 0%,var(--accent) 40%,var(--accent-2) 70%,#0B0512 100%);
  background-size:220% 100%;
  transform:scaleX(0);transform-origin:right center;
  transition:transform 380ms var(--ease-out);
}
.head-nav a:hover{color:var(--ink)}
.head-nav a:hover::after,.head-nav a.active::after{transform:scaleX(1);transform-origin:left center;animation:ambientSlide 2.6s linear infinite}
.head-nav a.active{color:var(--ink)}
@keyframes ambientSlide{from{background-position:0% 50%}to{background-position:220% 50%}}

.head-tools{display:flex;align-items:center;gap:10px;margin-left:var(--s4)}

/* theme toggle */
.theme-tog{
  display:flex;gap:2px;padding:3px;border-radius:99px;
  border:1px solid var(--rule);background:var(--panel-2);flex:none;
}
.theme-tog button{
  width:28px;height:26px;border:0;border-radius:99px;background:transparent;cursor:pointer;
  color:var(--mist);display:grid;place-items:center;font-size:13px;line-height:1;
  transition:background 200ms var(--ease),color 200ms var(--ease);
}
.theme-tog button svg{width:14px;height:14px;display:block}
.theme-tog button:hover{color:var(--ink)}
.theme-tog button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}

.nav-toggle{display:none;width:36px;height:34px;border-radius:10px;border:1px solid var(--rule);background:var(--panel-2);color:var(--ink);cursor:pointer;padding:0;place-items:center}
.nav-toggle span{display:block;width:16px;height:1.5px;background:currentColor;position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor}
.nav-toggle span::before{top:-5px}
.nav-toggle span::after{top:5px}

@media(max-width:940px){
  .head-nav{
    position:absolute;top:64px;left:0;right:0;
    flex-direction:column;gap:0;padding:8px;
    background:var(--panel);border:1px solid var(--rule);border-radius:18px;
    box-shadow:var(--shadow-lift);display:none;
  }
  .site-head.open .head-nav{display:flex}
  .site-head.open .head-inner{overflow:visible;border-bottom-left-radius:20px}
  .head-nav a{padding:11px 12px;border-radius:10px}
  .head-nav a::after{display:none}
  .head-nav a:hover{background:var(--accent-soft)}
  .nav-toggle{display:grid}
  .head-tools{margin-left:auto}
  .head-cta{display:none}
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.to-top{
  position:fixed;right:20px;bottom:22px;z-index:55;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--rule-hard);
  background:var(--panel);color:var(--ink);
  box-shadow:var(--shadow-card);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out),background 200ms var(--ease),border-color 200ms var(--ease);
}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.to-top .ico{width:17px;height:17px;display:block}
/* the progress ring sits just outside the button, all the way around it */
.to-top .ring{
  position:absolute;inset:-5px;
  width:calc(100% + 10px);height:calc(100% + 10px);
  pointer-events:none;overflow:visible;
}
.to-top .ring circle{fill:none;stroke-width:2}
.to-top .ring .track{stroke:var(--rule-hard);opacity:.55}
.to-top .ring .prog{stroke:var(--accent);stroke-linecap:round;transition:stroke 200ms var(--ease)}

/* ============================================================
   SECTIONS / CARDS
   ============================================================ */
.sec-head{max-width:56ch;margin-bottom:var(--s6)}
.sec-head p{margin:0;color:var(--graphite)}
.sec-line{height:1px;background:var(--rule);border:0;margin-bottom:var(--s5)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid-3{grid-template-columns:1fr}}
.grid-3 > [data-reveal]{display:flex}
.card{
  flex:1;position:relative;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-m);
  padding:var(--s4);
  transition:transform 260ms var(--ease-out),box-shadow 260ms var(--ease-out),border-color 260ms var(--ease-out),background 260ms var(--ease-out);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--rule-hard);background:var(--panel-2)}
.card p{margin:0;font-size:1rem;color:var(--graphite);line-height:1.6}
.card .ic{
  width:38px;height:38px;border-radius:11px;border:1px solid transparent;
  display:grid;place-items:center;margin-bottom:var(--s3);
  color:var(--accent);background:var(--accent-soft);
  transition:background 260ms var(--ease-out),color 260ms var(--ease-out),border-color 260ms var(--ease-out);
}
.card .ic svg{width:19px;height:19px;display:block}
.card:hover .ic{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{border-top:1px solid var(--rule);background:var(--panel);padding-block:var(--s6) var(--s5);margin-top:var(--s6)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s5)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:var(--s4)}}
.foot-grid h5{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin:0 0 14px;font-weight:400}
.foot-grid ul{list-style:none;margin:0;padding:0;font-size:14px}
.foot-grid li{margin-bottom:9px}
.foot-grid ul a{color:var(--graphite);text-decoration:none;transition:color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease);display:inline-block}
.foot-grid a.brand{display:inline-flex;color:var(--ink)}
.foot-grid ul a:hover{color:var(--accent);padding-left:4px}
.foot-base{margin-top:var(--s6);padding-top:var(--s4);position:relative;display:flex;flex-wrap:wrap;gap:12px var(--s4);align-items:center;font-size:13px;color:var(--mist)}
.foot-base .topline{position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule)}
.foot-base .right{margin-left:auto}
.foot-promise{display:flex;align-items:center;gap:10px;font-weight:550;color:var(--ink);font-size:13.5px}
.foot-promise .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);flex:none}

/* ============================================================
   SUB-PAGE SHELL (legal / changelog / guide / credits)
   ============================================================ */
.page-head{padding-block:var(--s6) var(--s5)}
.page-head .h-display{font-size:clamp(32px,5.4vw,54px)}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin:0 0 var(--s3)}
.crumb a{text-decoration:none;color:var(--mist);transition:color var(--t-fast) var(--ease)}
.crumb a:hover{color:var(--accent)}

.prose{max-width:74ch}
.prose h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:var(--s6) 0 var(--s3)}
.prose h3{font-size:17px;font-weight:600;margin:var(--s5) 0 var(--s2)}
.prose p,.prose li{color:var(--graphite);font-size:1rem;line-height:1.72}
.prose ul{padding-left:20px;margin:var(--s3) 0}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft)}
.prose a:hover{border-bottom-color:var(--accent)}
.prose hr{border:0;height:1px;background:var(--rule);margin:var(--s6) 0}
.prose code{font-family:var(--mono);font-size:13px;background:var(--panel-2);border:1px solid var(--rule);border-radius:6px;padding:2px 6px}

.callout{
  border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:var(--r-m);background:var(--panel);padding:var(--s4);margin:var(--s5) 0;
}
.callout h4{margin:0 0 8px;font-size:15px;font-weight:600}
.callout p{margin:0;font-size:14.5px;color:var(--graphite)}
.callout p + p{margin-top:8px}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:var(--s6);padding-bottom:var(--s5);text-align:center}
.hero-lead{max-width:44rem;margin-inline:auto}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin-top:var(--s5);align-items:center}
.spec-line{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin-top:var(--s4);font-family:var(--mono);font-size:12px;color:var(--mist)}
.spec-line span{display:flex;align-items:center;gap:8px}
.spec-line span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);flex:none}
.hero .lede{margin-inline:auto}
@media(max-width:600px){.hero-actions .btn{width:100%;justify-content:center}}

.hero-icon{width:64px;height:64px;border-radius:16px;overflow:hidden;margin:0 auto var(--s4);box-shadow:0 0 0 1px var(--rule),0 18px 40px -22px var(--glow-a)}
.hero-icon img{width:100%;height:100%;object-fit:cover}

/* ---- product shot ---- */
.shot{
  margin-top:var(--s6);
  text-align:left;
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:var(--r-l);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:box-shadow 600ms var(--ease-out);
}

.shot-bar{display:flex;align-items:center;gap:10px;padding:12px var(--s4);border-bottom:1px solid var(--rule)}
.shot-bar b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.shot-bar .mono{color:var(--mist);font-size:11.5px}
.win-dots{margin-left:auto;display:flex;gap:7px}
.win-dots i{width:10px;height:10px;border-radius:50%;border:1px solid var(--rule-hard);display:block}
.shot-body{padding:24px}

.fake-field{display:flex;gap:10px;align-items:center;margin-top:22px}
.fake-field .fld{
  flex:1;min-height:56px;display:flex;align-items:center;
  padding:15px 18px;border-radius:var(--r-m);
  border:1px solid var(--rule-hard);background:var(--panel-2);
  font-family:var(--mono);font-size:13px;color:var(--graphite);
  white-space:nowrap;overflow:hidden;
}
.fake-field .caret{display:inline-block;width:1px;height:15px;background:var(--accent);margin-left:2px;animation:blink 1.15s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.fake-field .fake-btn{border-radius:var(--r-m);background:var(--accent);color:var(--on-accent);padding:16px 26px;font-size:15.5px;font-weight:550;flex:none}

.queue{display:flex;flex-direction:column;gap:10px}
.dl-card{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;
  padding:10px 12px 13px;min-height:76px;
  border:1px solid var(--rule);border-radius:var(--r-m);background:var(--panel-2);
}
.thumb{aspect-ratio:1.25;border-radius:8px;background:var(--track);display:grid;place-items:center;overflow:hidden}
.thumb span{font-family:var(--mono);font-size:12px;color:var(--mist)}
.dl-main{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 16px;align-content:center}
.dl-title{grid-column:1;font-size:14px;font-weight:550;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.dl-sub{grid-column:1;font-family:var(--mono);font-size:12px;color:var(--mist)}
.dl-sub b{color:var(--accent);font-weight:500}
.dl-meta{
  grid-column:2;grid-row:1/3;display:grid;grid-template-columns:auto auto;gap:4px 12px;
  align-items:center;justify-items:end;text-align:right;
  font-family:var(--mono);font-size:12px;color:var(--mist);
}
.dl-meta .pct{grid-column:1;font-size:14px;font-weight:600;color:var(--ink);font-family:var(--sans);letter-spacing:-.02em}
.dl-meta .speed{grid-column:1}
.dl-meta .size{grid-column:2;font-size:14px;font-weight:600;color:var(--ink);font-family:var(--sans);letter-spacing:-.025em}
.dl-state{
  grid-column:2;justify-self:end;
  font-family:var(--sans);font-size:11.5px;font-weight:550;line-height:1.55;
  padding:2px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent);
  border:1px solid transparent;
}
.dl-state.done{background:transparent;color:var(--mist);border-color:var(--rule)}

/* the purple bar with a white sweep, pinned to the card's bottom edge */
.pbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--track);overflow:hidden;contain:layout style paint}
.pbar i{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 14px 1px var(--glow-a);
  border-radius:0 99px 99px 0;
}
.pbar i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.85) 50%,transparent 100%);
  transform:translateX(-100%);
  animation:barSweep 2.6s var(--ease-out) infinite;
}
.pbar.done i::after{animation:none;opacity:0}
@keyframes barSweep{
  0%{transform:translateX(-100%)}
  55%{transform:translateX(100%)}
  100%{transform:translateX(100%)}
}
@media(max-width:650px){
  .shot-body{padding:14px}
  .dl-card{grid-template-columns:46px minmax(0,1fr)}
  .dl-main{display:flex;flex-direction:column;gap:5px}
  .dl-meta{display:flex;flex-wrap:wrap;justify-items:start;text-align:left;gap:5px 12px}
  .dl-meta .size{margin-left:auto}
  .dl-title{white-space:normal;line-height:1.3}
  .dl-state{display:none}
  .thumb{align-self:start}
  .fake-field{flex-direction:column;align-items:stretch}
  .fake-field .fld{font-size:12px;padding:12px;min-width:0}
  .fake-field .fake-btn{text-align:center}
}

/* ---- stat line ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:24px;padding-top:20px;border-top:1px solid var(--rule)}
@media(max-width:640px){.stats{grid-template-columns:1fr 1fr;gap:var(--s4)}}
.stat b{display:block;font-size:clamp(26px,3.4vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.stat > span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}

/* ============================================================
   TRUST STRIP — a contained card, not a full-bleed band
   ============================================================ */
.trust-shell{padding-block:var(--s5)}
.trust-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--rule);border-radius:var(--r-l);background:var(--panel);
  overflow:hidden;
}
.trust-grid > div{padding:var(--s4) var(--s3);text-align:center;position:relative}
.trust-grid > div::before{
  content:"";position:absolute;left:0;top:16%;height:68%;width:1px;background:var(--rule);
  transform:scaleY(0);transform-origin:top center;
  transition:transform 600ms var(--ease-out);transition-delay:var(--d,0ms);
}
.trust-grid.in > div::before{transform:scaleY(1)}
.trust-grid > div:first-child::before{display:none}
.trust-grid b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.trust-grid span{font-family:var(--mono);font-size:11px;color:var(--mist)}
@media(max-width:720px){
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-grid > div:nth-child(3)::before{display:none}
  .trust-grid > div:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* ============================================================
   STEPS / SPLITS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:var(--s4)}}
.step{padding-top:var(--s3);position:relative}
.step .topline{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.step .n{font-family:var(--mono);font-size:12px;color:var(--mist);display:block;margin-bottom:var(--s2)}
.step p{margin:0;color:var(--graphite);font-size:14.5px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center;padding-block:var(--s6);position:relative}
.split .splitline{position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule)}
.split:first-child .splitline{display:none}
.split.flip .split-visual{order:-1}
@media(max-width:860px){
  .split{grid-template-columns:1fr;gap:var(--s4);padding-block:var(--s5)}
  .split.flip .split-visual{order:0}
}
.split ul{margin:var(--s3) 0 0;padding-left:18px;color:var(--graphite);font-size:14.5px}
.split li{margin-bottom:6px}
.split-visual{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-m);padding:var(--s3);box-shadow:var(--shadow-card)}
.mock-row{display:flex;align-items:center;gap:10px;padding:11px;border-radius:10px;border:1px solid var(--rule);margin-bottom:8px;background:var(--panel-2);transition:border-color 260ms var(--ease-out),background 260ms var(--ease-out)}
.mock-row:last-child{margin-bottom:0}
.split-visual:hover .mock-row{border-color:var(--rule-hard)}
.mock-row .sq{width:32px;height:32px;border-radius:8px;background:var(--track);flex:none}
.mock-row .sq.round{border-radius:50%}
.mock-row .col{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.mock-row .col b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-row .col b.addr{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--graphite)}
.mock-row .col i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-row .mini{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);border:1px solid var(--rule);border-radius:8px;padding:5px 9px;flex:none}
.mock-row .pill{font-family:var(--mono);font-size:10.5px;color:var(--mist);border:1px solid var(--rule);border-radius:99px;padding:3px 9px;flex:none}
.mock-row .pill.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.mock-row .sw{width:32px;height:18px;border-radius:99px;background:var(--track);flex:none;position:relative;transition:background 300ms var(--ease)}
.mock-row .sw.on{background:var(--accent)}
.mock-row .sw::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left 300ms var(--ease-out),right 300ms var(--ease-out)}
.mock-row .sw.on::after{left:auto;right:3px}

/* ============================================================
   TABLE
   ============================================================ */
.tbl-shell{border:1px solid var(--rule);border-radius:var(--r-m);overflow:hidden;background:var(--panel)}
.tbl-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{text-align:left;padding:15px var(--s4);border-bottom:1px solid var(--rule);font-size:14.5px}
thead th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);font-weight:400}
tbody th{font-weight:550}
tbody tr{transition:background 200ms var(--ease)}
tbody tr:hover{background:var(--panel-2)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
/* the Cepther column carries the answer, so it gets the weight */
.col-us{background:var(--accent-soft);color:var(--ink);font-weight:550}
thead .col-us{color:var(--accent)}

/* ============================================================
   PRIVACY PANEL + NEBULA
   ============================================================ */
.invert{
  position:relative;overflow:hidden;
  background:#07060C;color:#fff;border-radius:var(--r-xl);
  padding:var(--s6) var(--s5);
  border:1px solid rgba(255,255,255,.07);
}
:root[data-theme="dark"] .invert{background:#050505}
@media(max-width:700px){.invert{padding:var(--s5) var(--s4)}}
.invert > *:not(canvas){position:relative;z-index:1}
.invert .h-section{margin-bottom:var(--s4)}
.invert p{color:#C6C4D2;max-width:58ch;margin:0 0 var(--s3);text-shadow:0 1px 20px rgba(0,0,0,.7)}
.invert p:last-child{margin-bottom:0}
.invert canvas.neb{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.invert .eyebrow{color:#C4BDD9}
.invert .ilist{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s5);padding-top:var(--s5);position:relative}
.invert .ilist .topline{position:absolute;top:0;left:0;right:0;height:1px;background:rgba(255,255,255,.14)}
@media(max-width:700px){.invert .ilist{grid-template-columns:1fr;gap:var(--s3)}}
.invert .ilist b{display:block;font-size:14.5px;font-weight:600;margin-bottom:4px;color:#fff}
.invert .ilist span{font-size:13.5px;color:#CCC7DC;line-height:1.55}

/* ============================================================
   DOWNLOAD
   ============================================================ */
.dl-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s5);align-items:start}
@media(max-width:900px){.dl-grid{grid-template-columns:1fr}}
.dl-primary{background:var(--panel);border:1px solid var(--rule-hard);border-radius:var(--r-l);padding:var(--s5);box-shadow:var(--shadow-lift)}
.dl-primary .ver{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dl-primary .ver h3{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0}
.dl-primary .ver .mono{color:var(--mist)}
.dl-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:var(--s4) 0;font-family:var(--mono);font-size:12px;color:var(--graphite)}
.dl-choice{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.side-card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-m);padding:var(--s4);margin-bottom:var(--s3);transition:border-color 260ms var(--ease-out),transform 260ms var(--ease-out)}
.side-card:hover{border-color:var(--rule-hard);transform:translateY(-2px)}
.side-card:last-child{margin-bottom:0}
.side-card h4{font-size:14.5px;font-weight:600;margin:0 0 10px;letter-spacing:-.01em}
.side-card p,.side-card li{font-size:13.5px;color:var(--graphite);line-height:1.6;margin:0}
.side-card ul{margin:0;padding-left:17px}
.side-card li{margin-bottom:4px}
.side-card a{color:var(--accent);text-decoration:none}
.side-card a:hover{text-decoration:underline}


/* ============================================================
   FAQ
   ============================================================ */
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s4) 0;font-size:16.5px;font-weight:550;letter-spacing:-.012em;display:flex;align-items:center;gap:var(--s3);transition:color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease)}
.faq summary:hover{padding-left:6px;color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;flex:none;width:11px;height:11px;border-right:1.5px solid var(--mist);border-bottom:1.5px solid var(--mist);transform:translateY(-3px) rotate(45deg);transition:transform 320ms var(--ease-out),border-color var(--t-fast) var(--ease)}
.faq summary:hover::after{border-color:var(--accent)}
.faq details[open] summary::after{transform:translateY(2px) rotate(225deg);border-color:var(--accent)}
.faq .ans{padding:0 0 var(--s4);max-width:70ch;color:var(--graphite);font-size:15px}
.faq details[open] .ans{animation:ansIn 420ms var(--ease-out) both}
@keyframes ansIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq .ans p{margin:0 0 10px}
.faq .ans p:last-child{margin-bottom:0}
.faq .ans a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft)}
.faq .ans a:hover{border-bottom-color:var(--accent)}

/* ============================================================
   COMMUNITY
   ============================================================ */
.comm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media(max-width:800px){.comm-grid{grid-template-columns:1fr}}
.comm-card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-m);
  padding:var(--s4);text-decoration:none;
  transition:transform 260ms var(--ease-out),border-color 260ms var(--ease-out),background 260ms var(--ease-out);
}
.comm-card:hover{transform:translateY(-4px);border-color:var(--accent);background:var(--panel-2)}
.comm-card .cico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.comm-card .cico svg{width:19px;height:19px}
.comm-card b{font-size:15.5px;font-weight:600;letter-spacing:-.012em}
.comm-card span{font-size:13.5px;color:var(--graphite);line-height:1.55}
.comm-card .go{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:11.5px;color:var(--accent);letter-spacing:.06em;text-transform:uppercase}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{text-align:center;padding-block:var(--s7)}
.final .h-section{margin-bottom:var(--s3)}
.final p{color:var(--graphite);margin:0 auto var(--s5);max-width:46ch}

/* ============================================================
   CHANGELOG PAGE — each release is its own card
   ============================================================ */
#rel-list{display:flex;flex-direction:column;gap:var(--s4)}
.rel{
  position:relative;padding:24px 26px 20px;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-l);
  transition:border-color 240ms var(--ease-out),background 240ms var(--ease-out);
}
.rel:hover{border-color:var(--rule-hard)}
.rel.latest{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
.rel-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.rel-head h2{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0;color:var(--mist);font-family:var(--mono)}
.rel-head time{font-family:var(--mono);font-size:12px;color:var(--mist)}
.rel-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid var(--rule);color:var(--mist)}
.rel-tag.new{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.rel-sum{margin:0 0 4px;color:var(--ink);font-size:16.5px;font-weight:600;letter-spacing:-.012em}
.rel-desc{margin:0 0 var(--s3);color:var(--graphite);font-size:14.5px;line-height:1.6;max-width:64ch}
.rel ul{margin:0;padding-left:18px}
.rel li{color:var(--graphite);font-size:14.5px;margin-bottom:7px;line-height:1.6}
.rel li b{color:var(--ink);font-weight:600}

.rel-details-wrap{margin-top:var(--s3)}
.rel details{border-bottom:1px solid var(--rule)}
.rel details:first-of-type{border-top:1px solid var(--rule);margin-top:var(--s3)}
.rel summary{
  cursor:pointer;list-style:none;padding:12px 0;font-size:14.5px;font-weight:500;
  display:flex;align-items:center;color:var(--graphite);
}
.rel summary:hover{color:var(--ink)}
.rel summary::-webkit-details-marker{display:none}
.rel summary::after{
  content:"";margin-left:auto;width:7px;height:7px;
  border-right:1.5px solid var(--mist);border-bottom:1.5px solid var(--mist);
  transform:translateY(-2px) rotate(45deg);transition:transform 0.2s;
}
.rel details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.rel details ul{padding-bottom:16px;margin:0;padding-top:4px}
.rel details.empty summary{cursor:default;color:var(--mist)}
.rel details.empty summary::after{opacity:.35}

/* ============================================================
   FEATURES PAGE
   ============================================================ */
.feat-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s6)}
.feat-nav a{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  padding:8px 14px;border-radius:99px;border:1px solid var(--rule);
  background:var(--panel);color:var(--graphite);text-decoration:none;
  transition:all 200ms var(--ease);
}
.feat-nav a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

.fgroup{padding-block:var(--s6);border-top:1px solid var(--rule)}
.fgroup:first-of-type{border-top:0;padding-top:0}
.fgroup > .eyebrow{color:var(--accent)}
.frow{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s4)}
@media(max-width:760px){.frow{grid-template-columns:1fr}}
.fitem{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-m);padding:20px;transition:border-color 240ms var(--ease-out),background 240ms var(--ease-out)}
.fitem:hover{border-color:var(--rule-hard);background:var(--panel-2)}
.fitem h3{font-size:16px;font-weight:600;margin:0 0 6px;letter-spacing:-.012em}
.fitem p{margin:0;font-size:1rem;color:var(--graphite);line-height:1.62}

/* ============================================================
   GUIDE PAGE
   ============================================================ */
.guide-grid{display:grid;grid-template-columns:220px 1fr;gap:var(--s6);align-items:start}
@media(max-width:900px){.guide-grid{grid-template-columns:1fr;gap:var(--s4)}}
.guide-toc{position:sticky;top:100px}
@media(max-width:900px){.guide-toc{position:static}}
.guide-toc h5{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin:0 0 12px;font-weight:400}
.guide-toc ul{list-style:none;margin:0;padding:0}
.guide-toc li{margin-bottom:2px}
.guide-toc a{display:block;padding:7px 12px;border-radius:9px;font-size:14px;color:var(--graphite);text-decoration:none;transition:all 180ms var(--ease)}
.guide-toc a:hover,.guide-toc a.active{background:var(--accent-soft);color:var(--accent)}
.gsec{padding-bottom:var(--s6);scroll-margin-top:110px}
.gsec h2{font-size:23px;font-weight:600;letter-spacing:-.022em;margin:0 0 var(--s3)}
.gstep{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--rule)}
.gstep:first-of-type{border-top:0}
.gstep .gn{flex:none;width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:var(--mono);font-size:12px}
.gstep div{min-width:0}
.gstep b{display:block;font-size:15.5px;font-weight:600;margin-bottom:3px}
.gstep p{margin:0;font-size:1rem;color:var(--graphite);line-height:1.62}

/* ============================================================
   ANCHOR OFFSET — the header floats over the top of the page
   ============================================================ */
section[id],.fgroup,.gsec{scroll-margin-top:110px}

/* ============================================================
   DOWNLOAD HANDOFF PAGE
   ============================================================ */
[hidden]{display:none!important}
.thanks-main{padding-top:64px}
.thanks-intro{max-width:960px;text-align:center;padding-bottom:80px}
.thanks-intro .h-display{font-size:clamp(40px,7vw,78px);line-height:1.05;margin:20px 0}
.thanks-intro .lede{margin:0 auto 36px}
.thanks-card{max-width:680px;margin:0 auto;padding:32px;text-align:left;border:1px solid var(--rule-hard);border-radius:var(--r-l);background:var(--panel)}
.thanks-build{display:flex;gap:14px;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--rule);margin-bottom:24px}
.thanks-build h2{font-size:20px;margin:0 0 4px}
.thanks-build .mark{display:block;flex:0 0 48px;width:48px;height:48px;border-radius:12px;overflow:hidden}
.thanks-build .mark img{display:block;width:100%;height:100%;object-fit:cover}
.thanks-card h3{font-size:21px;margin:0 0 12px}
.thanks-card p{color:var(--graphite);line-height:1.65;margin-bottom:20px}
.thanks-links{display:flex;flex-wrap:wrap;gap:16px 24px;font-size:14px;margin-top:22px}
.thanks-links a{color:var(--accent);text-decoration:none}
.thanks-links a:hover{text-decoration:underline}
.thanks-next{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:32px auto 0;max-width:680px;text-align:left}
.thanks-next .side-card{display:block;margin:0;text-decoration:none;color:var(--ink);transition:border-color .2s}
.thanks-next .side-card:hover{border-color:var(--accent)}
.thanks-next h2{font-size:21px;margin:12px 0}
.thanks-next p{color:var(--graphite)}
.text-link{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.thanks-help{margin-top:28px}
@media(max-width:650px){
  .thanks-main{padding-top:32px}
  .thanks-card{padding:24px}
  .thanks-next{grid-template-columns:1fr}
  .thanks-intro{padding-bottom:48px}
}