/* Arachne public landing page: AR-8 field simulator hero + marketing sections. Scoped to body.landing so the
   signed-in /app shell (static/app.css) is untouched. System fonts only; no external requests. */
:root{
  --ink:#0e3a3d;--mid:#5d8284;--line:#d3e8e7;--coral:#ff5a3c;--teal:#0f9d8a;--aqua:#46c9bf;
  --paper:#eef7f6;--paper2:#f7fbfb;--glass:rgba(250,254,254,.62);--glass-b:rgba(14,58,61,.10);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --surface:#fff;--on-ink:#fff;--on-teal:#fff;--tint:rgba(14,58,61,.07);--shadow:rgba(14,58,61,.45);
  --sim-hi:#fbfefe;--sim-lo:#e2f1ef;--grid:rgba(14,58,61,.045);--bigtype:#dff0ee;
  --fb-web:#a9cfcb;--fb-thread:#86b3af;--fb-leg:#0e3a3d;--fb-leg2:#24504f;--fb-body:#f8fcfc;--fb-head:#fff;--fb-seam:#9cc4c0;
  --fb-eye:#061214;--dot:#fff;
  color-scheme:light;
}
/* dark: the OS preference unless the visitor picked a theme (html[data-theme], set before first paint) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e6f4f3;--mid:#8fb3b3;--line:#1c3a3c;--coral:#ff5a3c;--teal:#1fbfa8;--aqua:#46c9bf;
    --paper:#0a1819;--paper2:#0c1d1f;--glass:rgba(15,34,36,.62);--glass-b:rgba(70,201,191,.16);
    --surface:#0f2224;--on-ink:#0a1819;--on-teal:#04201c;--tint:rgba(70,201,191,.08);--shadow:rgba(0,0,0,.7);
    --sim-hi:#12302f;--sim-lo:#050e0f;--grid:rgba(70,201,191,.05);--bigtype:#0e2628;
    --fb-web:#24575a;--fb-thread:#3d7d7a;--fb-leg:#cfe7e4;--fb-leg2:#8fb3b3;--fb-body:#0f2224;--fb-head:#132c2e;--fb-seam:#2d6563;
    --fb-eye:#e6fffb;--dot:#0a1819;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --ink:#e6f4f3;--mid:#8fb3b3;--line:#1c3a3c;--coral:#ff5a3c;--teal:#1fbfa8;--aqua:#46c9bf;
    --paper:#0a1819;--paper2:#0c1d1f;--glass:rgba(15,34,36,.62);--glass-b:rgba(70,201,191,.16);
    --surface:#0f2224;--on-ink:#0a1819;--on-teal:#04201c;--tint:rgba(70,201,191,.08);--shadow:rgba(0,0,0,.7);
    --sim-hi:#12302f;--sim-lo:#050e0f;--grid:rgba(70,201,191,.05);--bigtype:#0e2628;
    --fb-web:#24575a;--fb-thread:#3d7d7a;--fb-leg:#cfe7e4;--fb-leg2:#8fb3b3;--fb-body:#0f2224;--fb-head:#132c2e;--fb-seam:#2d6563;
    --fb-eye:#e6fffb;--dot:#0a1819;
    color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.landing{background:var(--paper);color:var(--ink);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
.landing a{color:inherit;text-decoration:none}
.landing h1,.landing h2,.landing h3{margin:0 0 .4em;line-height:1.08;letter-spacing:-.02em}
.landing p{margin:0 0 1em}
.mut{color:var(--mid)}
.dim{color:var(--mid)}

/* ---------- hero / simulator ---------- */
.sim{position:relative;height:100vh;height:100svh;min-height:600px;max-height:1600px;overflow:hidden;
  background:radial-gradient(120% 90% at 55% 45%,var(--sim-hi) 0%,var(--paper) 55%,var(--sim-lo) 100%)}
.sim-bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:48px 48px;background-position:center center}
.bigtype{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);font:800 clamp(120px,23vw,520px)/.8 var(--sans);
  letter-spacing:-.06em;color:var(--bigtype);white-space:nowrap;user-select:none}
.stage{position:absolute;inset:0;width:100%;height:100%;display:none;touch-action:pan-y;cursor:grab}
.stage.dragging{cursor:grabbing}
.leaders,.labels{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.leaders line{stroke:var(--coral);stroke-width:1}
.leaders circle{fill:var(--dot);stroke:var(--coral);stroke-width:1.5}
.lbl{position:absolute;left:0;top:0;font:600 10px/1.2 var(--mono);letter-spacing:.16em;color:var(--ink);white-space:nowrap;
  background:var(--glass);border:1px solid var(--glass-b);padding:4px 7px;border-radius:4px;will-change:transform;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lbl i{font-style:normal;color:var(--coral);margin-right:6px}
.sim.is-3d .stage,.sim.is-3d .leaders,.sim.is-3d .labels{display:block}
.sim.is-3d .fallback{display:none}
.sim.labels-off .leaders,.sim.labels-off .labels{display:none}

/* static hero (no WebGL / reduced motion) */
.fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.fb-spider{width:min(78vw,820px);height:auto;margin-left:18vw;margin-top:-4vh}
.fb-web path{stroke:var(--fb-web);stroke-width:1;fill:none;opacity:.7}
.fb-thread{stroke:var(--fb-thread);stroke-width:1.2}
.fb-legs path{stroke:var(--fb-leg);stroke-width:7;fill:none;stroke-linecap:round;opacity:.9}
.fb-legs path:nth-child(odd){stroke:var(--fb-leg2)}
.fb-abdomen{fill:var(--fb-body);stroke:var(--fb-leg);stroke-width:2}
.fb-ceph{fill:var(--fb-head);stroke:var(--fb-leg);stroke-width:2}
.fb-seam{stroke:var(--fb-seam);stroke-width:1.4;fill:none}
.fb-eye{fill:var(--fb-eye);stroke:var(--coral);stroke-width:2.2}
.fb-eye.sm{stroke-width:1.4}
.sim:not(.is-3d) .hud-bottom{display:none}

/* HUD chrome */
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:18px;padding:18px 28px;z-index:3}
.brandmark{display:flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.22em;color:var(--ink)}
.brandmark b{font-weight:800;letter-spacing:.26em}
.brandmark .sep{color:var(--coral)}
.brandmark .sub{color:var(--mid)}
.glyph{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);position:relative;flex:none}
.glyph::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--coral)}
.glyph::after{content:"";position:absolute;left:50%;top:-10px;width:1px;height:10px;background:var(--ink)}
.hud-nav{margin-left:auto;display:flex;gap:22px;align-items:center;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.hud-nav a{color:var(--mid)}
.hud-nav a:hover{color:var(--ink)}
.hud-nav .signin{color:var(--ink);border:1px solid var(--ink);padding:9px 14px;border-radius:999px}
.hud-nav .signin:hover{background:var(--ink);color:var(--on-ink)}

.hud-left{position:absolute;left:28px;top:84px;bottom:132px;width:min(400px,34vw);display:flex;flex-direction:column;
  justify-content:space-between;gap:16px;z-index:2;pointer-events:none}
.hud-left>*,.hud-right>*{pointer-events:auto}
.hero-copy .kicker{font:600 10px/1 var(--mono);letter-spacing:.3em;color:var(--teal);margin-bottom:14px}
.hero-copy h1{font-size:clamp(34px,3.6vw,58px);font-weight:800;color:var(--ink)}
.hero-copy .lead{font-size:15px;color:var(--mid);max-width:36ch}
.ctas{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:6px 0 10px}
.btn-primary{display:inline-block;background:var(--coral);color:#fff!important;font:700 14px/1 var(--sans);padding:15px 22px;border-radius:999px;
  box-shadow:0 10px 26px -10px rgba(255,90,60,.8),inset 0 -2px 0 rgba(0,0,0,.12);transition:transform .15s,box-shadow .15s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(255,90,60,.9)}
.btn-link{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px}
.btn-ghost{display:inline-block;text-align:center;border:1px solid var(--ink);color:var(--ink);font:600 13px/1 var(--sans);padding:12px 18px;border-radius:999px}
.btn-ghost:hover{background:var(--ink);color:var(--on-ink)}
.fine{font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin:0}
.fine.center{text-align:center;margin-top:26px}

.card{border-radius:12px;padding:12px 14px}
.glass{background:var(--glass);border:1px solid var(--glass-b);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 18px 40px -28px var(--shadow)}
.card-h{display:flex;justify-content:space-between;font:600 9.5px/1 var(--mono);letter-spacing:.22em;color:var(--ink);
  padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--line)}
.pipeline ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pipeline li{font:600 9.5px/1.2 var(--mono);letter-spacing:.14em;color:var(--mid);display:flex;flex-direction:column;gap:5px}
.pipeline li i{display:block;height:3px;border-radius:2px;background:var(--line);transition:background .3s}
.pipeline li em{font-style:normal;font-weight:400;letter-spacing:.04em;font-size:9.5px;opacity:0;transition:opacity .3s}
.pipeline li.done{color:var(--ink)}
.pipeline li.done i{background:var(--teal)}
.pipeline li.active{color:var(--coral)}
.pipeline li.active i{background:var(--coral)}
.pipeline li.active em,.pipeline li.done em{opacity:1;color:var(--mid)}

.hud-right{position:absolute;right:28px;top:84px;bottom:132px;width:270px;display:flex;flex-direction:column;gap:12px;z-index:2;
  align-items:stretch;pointer-events:none}
.mode{text-align:right}
.mode-k{font:600 9.5px/1 var(--mono);letter-spacing:.26em;color:var(--mid)}
.mode-v{font:800 clamp(22px,2.2vw,34px)/1.05 var(--mono);letter-spacing:.02em;color:var(--coral);margin-top:6px;white-space:nowrap}
.gates ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.gates li{display:flex;justify-content:space-between;align-items:center;font:500 10.5px/1.2 var(--mono);color:var(--mid);letter-spacing:.02em}
.gates li b{font-size:9px;letter-spacing:.18em;padding:3px 6px;border-radius:3px;border:1px solid var(--line);color:var(--mid);min-width:46px;text-align:center}
.gates li.run b{color:var(--coral);border-color:var(--coral)}
.gates li.pass{color:var(--ink)}
.gates li.pass b{color:var(--on-teal);background:var(--teal);border-color:var(--teal)}
.adv{font-family:var(--mono)}
.adv-id{font-size:12px;font-weight:700;color:var(--ink);letter-spacing:.04em}
.adv-pkg{font-size:11px;color:var(--mid);margin-top:4px}
.adv-pkg b{color:var(--ink)}
.adv-ver{font-size:15px;margin-top:6px;display:flex;gap:8px;align-items:center}
.adv-ver .from{color:var(--coral);text-decoration:line-through;text-decoration-thickness:1px}
.adv-ver .to{color:var(--teal);font-weight:700}
.adv-ver .arrow{color:var(--mid)}
.adv-note{font-size:10px;color:var(--mid);margin-top:6px;line-height:1.35}
.usage{display:flex;align-items:baseline;gap:8px;font:600 9.5px/1 var(--mono);letter-spacing:.2em;padding:10px 14px}
.usage b{font-size:15px;letter-spacing:.04em;color:var(--ink)}
.usage .dim{margin-left:auto;font-size:9px}

.hud-bottom{position:absolute;left:28px;right:28px;bottom:18px;z-index:3}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.controls .group{display:flex;gap:4px;padding:3px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ctl{font:600 9.5px/1 var(--mono);letter-spacing:.16em;color:var(--ink);background:transparent;border:0;border-radius:999px;padding:8px 11px;cursor:pointer}
.ctl:hover{background:var(--tint)}
.ctl:focus-visible,.theme-toggle:focus-visible,.btn-primary:focus-visible,.btn-link:focus-visible,.hud-nav a:focus-visible,.btn-ghost:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.ctl.tog.on{background:var(--ink);color:var(--on-ink)}
.ctl.cur{color:var(--coral)}
.ctl.play{flex:none;width:34px;height:34px;padding:0;background:var(--ink);color:var(--on-ink);font-size:11px;letter-spacing:0}
.toggles{margin-left:auto}
.rail{position:relative;padding-top:14px}
.ticks{position:absolute;left:0;right:0;top:0;height:12px;font:600 8.5px/1 var(--mono);letter-spacing:.18em;color:var(--mid)}
.ticks span{position:absolute;top:0;padding-left:5px;border-left:1px solid var(--mid);height:22px}
#scrub{-webkit-appearance:none;appearance:none;width:100%;height:18px;margin:0;background:transparent;cursor:pointer;display:block}
#scrub::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--ink) var(--p,0%),var(--line) var(--p,0%))}
#scrub::-moz-range-track{height:2px;background:var(--line)}
#scrub::-moz-range-progress{height:2px;background:var(--ink)}
#scrub::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--coral);border:3px solid var(--dot);
  box-shadow:0 0 0 1px var(--coral);margin-top:-6px}
#scrub::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--coral);border:3px solid var(--dot);box-shadow:0 0 0 1px var(--coral)}
.status{font:500 9.5px/1 var(--mono);letter-spacing:.16em;color:var(--mid);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-height:780px) and (min-width:821px){.feed{display:none}}
@media (max-height:640px) and (min-width:821px){.pipeline{display:none}}
@media (max-width:1100px) and (min-width:821px){.hud-right{width:236px}.brandmark .sub{display:none}}
@media (max-width:820px){
  .sim{min-height:640px}
  .hud-top{padding:14px 16px}
  .brandmark .sub,.brandmark .sep,.hud-nav a:not(.signin){display:none}
  .hud-nav{gap:10px}
  .theme-toggle .theme-txt{display:none}
  .theme-toggle{padding:0;width:36px}
  .pipeline,.gates,.feed,.usage{display:none}
  .sim.is-3d .leaders,.sim.is-3d .labels{display:none}
  .hud-left{left:16px;right:16px;top:auto;bottom:150px;width:auto;display:block}
  .hero-copy h1{font-size:30px}
  .hero-copy .lead{display:none}
  .hero-copy .kicker{margin-bottom:8px}
  .hud-right{right:16px;top:62px;bottom:auto;width:auto}
  .mode-v{font-size:20px}
  .hud-bottom{left:16px;right:16px;bottom:12px}
  .controls{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:8px}
  .controls::-webkit-scrollbar{display:none}
  .controls .group{flex:none}
  .toggles{margin-left:0}
  .ticks span:nth-child(n+6){display:none}
  .bigtype{top:36%}
  .fb-spider{margin:0 0 30vh;width:96vw}
  .sim:not(.is-3d) .hud-left{bottom:40px}
}

/* ---------- below the fold ---------- */
.below{background:var(--paper2);position:relative}
.scene{max-width:1180px;margin:0 auto;padding:88px 28px;border-top:1px solid var(--line)}
.sec-k{font:600 10px/1 var(--mono);letter-spacing:.3em;color:var(--coral);margin-bottom:16px}
.scene h2{font-size:clamp(30px,4vw,48px);font-weight:800}
.steps,.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.step,.plan{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;position:relative}
.step .n{font:600 10px/1 var(--mono);letter-spacing:.2em;color:var(--teal);text-transform:uppercase;margin-bottom:16px}
.step h3{font-size:19px}
.step::after{content:"";position:absolute;right:-9px;top:34px;width:16px;height:1px;background:var(--coral)}
.step:last-child::after{display:none}
.plan{display:flex;flex-direction:column;gap:12px}
.plan h3{font:700 11px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--mid);margin:0}
.plan .price{font-size:28px;font-weight:800;letter-spacing:-.02em}
.plan .price small{font-size:13px;color:var(--mid);font-weight:400;letter-spacing:0}
.plan ul{margin:0 0 auto;padding-left:18px;color:var(--mid);font-size:13.5px}
.plan.feature{border-color:var(--coral);box-shadow:0 22px 50px -32px rgba(255,90,60,.7)}
.plan.feature h3{color:var(--coral)}
.plan .btn-primary,.plan .btn-ghost{text-align:center}
.footer{max-width:1180px;margin:0 auto;padding:36px 28px 48px;border-top:1px solid var(--line);display:flex;gap:18px;flex-wrap:wrap;
  font:500 11px/1.4 var(--mono);letter-spacing:.08em;color:var(--mid)}
.footer a{margin-left:auto;color:var(--ink);border-bottom:1px solid var(--ink)}
@media (max-width:980px){.steps,.plans{grid-template-columns:1fr 1fr}.step::after{display:none}}
@media (max-width:540px){.steps,.plans{grid-template-columns:1fr}.scene{padding:64px 16px}.footer{padding:28px 16px 40px}.footer a{margin-left:0}}

/* ---------- theme toggle (shared markup on landing, app and docs; html[data-scheme] is the resolved theme) ---------- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;min-width:34px;padding:0 12px;flex:none;
  border-radius:999px;border:1px solid var(--glass-b);background:var(--glass);color:var(--ink);cursor:pointer;
  font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.theme-toggle:hover{border-color:var(--ink)}
.theme-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle[aria-pressed="true"]{color:var(--aqua);border-color:rgba(70,201,191,.45);box-shadow:0 0 18px -6px rgba(70,201,191,.6)}
html[data-scheme="dark"] .theme-toggle .ico-moon,html:not([data-scheme="dark"]) .theme-toggle .ico-sun{display:none}

/* ---------- dark accents: the instrument glows on a dark ground ---------- */
html[data-scheme="dark"] .mode-v{text-shadow:0 0 22px rgba(255,90,60,.55)}
html[data-scheme="dark"] .glyph::before{box-shadow:0 0 12px rgba(255,90,60,.85)}
html[data-scheme="dark"] .glass{box-shadow:0 18px 40px -26px var(--shadow),inset 0 1px 0 rgba(255,255,255,.04)}
html[data-scheme="dark"] .card-h{color:var(--aqua)}
html[data-scheme="dark"] .gates li.pass b{box-shadow:0 0 12px -2px rgba(31,191,168,.7)}
html[data-scheme="dark"] .pipeline li.active i{box-shadow:0 0 10px rgba(255,90,60,.8)}
html[data-scheme="dark"] .pipeline li.done i{box-shadow:0 0 8px rgba(31,191,168,.6)}
html[data-scheme="dark"] .btn-primary{box-shadow:0 10px 30px -8px rgba(255,90,60,.75),0 0 0 1px rgba(255,90,60,.45)}
html[data-scheme="dark"] .lbl{border-color:rgba(70,201,191,.25)}
html[data-scheme="dark"] .plan.feature{box-shadow:0 22px 60px -30px rgba(255,90,60,.6)}
html[data-scheme="dark"] .hero-copy .kicker{color:var(--aqua)}
html[data-scheme="dark"] .fb-eye{filter:drop-shadow(0 0 4px rgba(255,90,60,.9))}
/* active toggles / play control in dark: themed glow pills instead of stark light ones */
html[data-scheme="dark"] .ctl.tog.on,html[data-scheme="dark"] .ctl.play{background:var(--tint2,rgba(70,201,191,.1));color:var(--aqua);
  box-shadow:inset 0 0 0 1px rgba(70,201,191,.45),0 0 14px -6px rgba(70,201,191,.55)}