/* Codewall — site.css
   fonts → tokens → base → chrome → components → figures → motion.
   Design language: unicity.ai (Anton + Geist Mono, #060606 / #FF6F00). No build step. */

/* ---------- fonts (self-hosted, OFL 1.1 — see fonts/OFL-*.txt) ---------- */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/anton-latin-400.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/geist-mono-latin-var.woff2) format("woff2")}
@font-face{font-family:"Anton Fallback";src:local(Arial);ascent-override:129.7%;descent-override:36.29%;line-gap-override:0%;size-adjust:90.69%}
@font-face{font-family:"Geist Mono Fallback";src:local(Arial);ascent-override:74.67%;descent-override:21.92%;line-gap-override:0%;size-adjust:134.59%}

/* ---------- non-colour tokens ---------- */
:root{
  --font-heading:"Anton","Anton Fallback","Arial Narrow",Impact,sans-serif;
  --font-mono:"Geist Mono","Geist Mono Fallback",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;

  --fs-hero-cw:clamp(2.5rem,6.6vw,5.75rem);
  --fs-h2:clamp(2rem,5.5vw,4.5rem);
  --fs-cta:clamp(2.5rem,7vw,5rem);
  --fs-step:clamp(2rem,4vw,3rem);
  --fs-card-title:clamp(1.5rem,1.169rem + 1.103vw,1.875rem);
  --fs-lead:clamp(1.125rem,.79rem + 1.103vw,1.5rem);
  --fs-sub:clamp(1rem,.779rem + .735vw,1.25rem);
  --fs-intro:clamp(.875rem,.655rem + .735vw,1.125rem);
  --fs-body:clamp(.875rem,.765rem + .368vw,1rem);
  --fs-eyebrow:clamp(.75rem,.64rem + .368vw,.875rem);
  --fs-note:clamp(.75rem,.64rem + .368vw,.875rem);
  --fs-ui:.875rem;
  --fs-small:.75rem;

  --lh-display:.95; --lh-body:1.625; --lh-snug:1.375; --lh-tight:1.25;
  --ls-display:-.025em; --ls-cta:.02em;
  --ls-eyebrow:.4em; --ls-eyebrow-hero:.32em; --ls-label:.24em; --ls-footer:.1em;

  --r-pill:9999px; --r-card:16px; --r-md:12px; --r-sm:8px; --r-xs:4px; --r-xl:24px; --r-diagram:11px;

  --container:72rem; --container-wide:80rem; --container-cta:56rem; --measure:42rem;
  --nav-h:64px;

  --section-px:clamp(2rem,.235rem + 5.882vw,4rem);
  --section-py:clamp(5rem,3.235rem + 5.882vw,7rem);
  --gutter:clamp(1.5rem,-.706rem + 7.353vw,4rem);
  --cta-py:clamp(3.5rem,1.294rem + 7.353vw,6rem);
  --stack-gap:clamp(2rem,1.118rem + 2.941vw,3rem);

  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.42,0,.58,1);
  --ease-hero:cubic-bezier(.25,.1,.25,1);
  --ease-ui:cubic-bezier(.4,0,.2,1);

  --dur-ui:.15s; --dur-hover:.2s; --dur-nav:.3s; --dur-fill:.35s;
}

/* ---------- colour tokens: dark (default) ---------- */
:root,
[data-theme="dark"]{
  color-scheme:dark;
  --accent:#FF6F00; --accent-rgb:255,111,0;
  --accent-hover:#e56200;
  --accent-ink:#FF6F00;
  --accent-display:#FF6F00;
  --on-accent:#060606;

  --bg:#060606; --bg-rgb:6,6,6;
  --bg-deep:#050505;
  --bg-fade-from:#070707;
  --surface-1:#0a0a0a;
  --surface-2:#0b0b0b;
  --glass-faint:rgba(255,255,255,.012);
  --glass-input:rgba(255,255,255,.05);

  --line-faint:rgba(255,255,255,.05);
  --line-soft:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.12);
  --line-solid:#2c2c2c;
  --line-inner:#1e1e1e;

  --text:#fefefe; --text-rgb:254,254,254;
  --text-lead:rgba(254,254,254,.85);
  --text-body:rgba(254,254,254,.70);
  --text-muted:rgba(254,254,254,.60);
  --text-subtle:rgba(254,254,254,.50);
  --text-faint:rgba(254,254,254,.40);
  --text-ghost:rgba(254,254,254,.30);

  --btn-primary-fg:#060606;
  --fill-up-bg:#fefefe;
  --fill-up-fg:#1d0900;
  --glow-primary:0 0 40px rgba(255,111,0,.20),0 0 80px rgba(255,111,0,.08);
  --glow-primary-xl:0 0 60px rgba(255,111,0,.25),0 0 120px rgba(255,111,0,.10);
  --glow-card:0 0 45px rgba(255,111,0,.16);

  --nav-bg:rgba(6,6,6,.8); --nav-panel-bg:rgba(6,6,6,.95);

  --grid-line:rgba(255,255,255,.025);
  --dot:rgba(255,255,255,.04);
  --glow-hero:rgba(255,111,0,.08);
  --glow-section:rgba(255,111,0,.06);
  --aurora-1:rgba(255,111,0,.06); --aurora-2:rgba(255,111,0,.04); --aurora-3:rgba(255,159,64,.03);
  --glow-ring-a:.4;

  --ok:#4ade80; --idle:#9ca3af;

  --lane:rgba(var(--accent-rgb),.70); --wire:var(--accent);
}

/* ---------- colour tokens: light ---------- */
[data-theme="light"]{
  color-scheme:light;
  --accent:#FF6F00; --accent-rgb:255,111,0;
  --accent-hover:#e56200;
  --accent-ink:#B34700;
  --accent-display:#e56200;
  --on-accent:#060606;

  --bg:#ffffff; --bg-rgb:255,255,255;
  --bg-deep:#f5f4f1;
  --bg-fade-from:#ffffff;
  --surface-1:#faf9f7;
  --surface-2:#f7f6f3;
  --glass-faint:rgba(6,6,6,.015);
  --glass-input:rgba(6,6,6,.04);

  --line-faint:rgba(6,6,6,.08);
  --line-soft:rgba(6,6,6,.10);
  --line:rgba(6,6,6,.14);
  --line-strong:rgba(6,6,6,.20);
  --line-solid:#d9d7d2;
  --line-inner:#e7e5e0;

  --text:#060606; --text-rgb:6,6,6;
  --text-lead:rgba(6,6,6,.88);
  --text-body:rgba(6,6,6,.78);
  --text-muted:rgba(6,6,6,.70);
  --text-subtle:rgba(6,6,6,.62);
  --text-faint:rgba(6,6,6,.58);
  --text-ghost:rgba(6,6,6,.50);

  --btn-primary-fg:#060606;
  --fill-up-bg:#060606;
  --fill-up-fg:#fefefe;
  --glow-primary:0 0 40px rgba(255,111,0,.28),0 0 80px rgba(255,111,0,.12);
  --glow-primary-xl:0 0 60px rgba(255,111,0,.32),0 0 120px rgba(255,111,0,.14);
  --glow-card:0 0 45px rgba(255,111,0,.20);

  --nav-bg:rgba(255,255,255,.82); --nav-panel-bg:rgba(255,255,255,.96);

  --grid-line:rgba(6,6,6,.045);
  --dot:rgba(6,6,6,.07);
  --glow-hero:rgba(255,111,0,.10);
  --glow-section:rgba(255,111,0,.08);
  --aurora-1:rgba(255,111,0,.10); --aurora-2:rgba(255,111,0,.07); --aurora-3:rgba(255,159,64,.06);
  --glow-ring-a:.75;

  --ok:#15803d; --idle:#6b7280;

  --lane:var(--accent-ink); --wire:var(--accent-ink);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}   /* padding, not per-id margin: it also keeps focused controls clear of the fixed nav */
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font:400 1rem/1.5 var(--font-mono);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
main{padding-top:var(--nav-h)}
main:focus{outline:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
::selection{background:var(--accent);color:#060606}
.nw{white-space:nowrap}
.g{font-family:ui-sans-serif,system-ui,sans-serif;letter-spacing:0;margin-right:.5em}
html:not(.js) .js-only{display:none}

.skip{position:fixed;left:16px;top:12px;z-index:60;padding:8px 16px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);
  font:400 var(--fs-ui)/1.25rem var(--font-mono);transform:translateY(-200%)}
.skip:focus-visible{transform:none}

/* headings: Anton 400, uppercase, white lead + orange tail */
.h{font-family:var(--font-heading);font-weight:400;text-transform:uppercase;
  line-height:var(--lh-display);letter-spacing:var(--ls-display);color:var(--text)}
.h .accent{color:var(--accent-display)}
.h .h__lead,.h .accent{display:block;text-wrap:balance}
.h--hero{font-size:var(--fs-hero-cw);max-width:72rem}
.h--lg{font-size:var(--fs-h2)}
.h--cta{font-size:var(--fs-cta);letter-spacing:var(--ls-cta)}

.lead{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--text-lead);max-width:64rem}
.lead{text-wrap:pretty}
.sec-head .lead strong{display:block}   /* the punchline takes its own line, as in the hero */
.intro,.card__desc,.beat__text,.hero__sub,.hero__note,.cap-note,.rows li{text-wrap:pretty}
.lead strong{color:var(--accent-ink);font-weight:600}
.intro{font-size:var(--fs-intro);line-height:var(--lh-body);color:rgba(var(--text-rgb),.8);max-width:var(--container-cta)}
.intro strong{color:var(--text);font-weight:500}

code{white-space:nowrap;padding:2px 6px;border-radius:var(--r-xs);background:var(--glass-input);color:var(--accent-ink);font:400 .875em var(--font-mono)}
.hero__note code,.beat__text code{padding-inline:3px}
.hero__note code:last-child,.beat__text code:last-child{margin-right:-.2em}   /* a full stop follows the code: keep the box from reading as a space */
/* Inline link inside running text: the base `a` inherits colour with no underline, so mark it. */
.link{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (hover:hover){.link:hover{text-decoration-thickness:2px}}

.eyebrow{font:400 var(--fs-eyebrow)/1.4 var(--font-mono);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-ink)}
.eyebrow--hero{letter-spacing:var(--ls-eyebrow-hero)}
.label{font:400 var(--fs-note)/1.4 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(var(--text-rgb),.55)}
[data-theme="light"] .label,[data-theme="light"] .card__num{color:var(--text-subtle)}
.status{font:400 var(--fs-small)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.status--shipped{color:var(--ok)} .status--planned{color:var(--idle)}
.shot__cap{margin-top:12px;font:400 var(--fs-small)/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-subtle)}
.cap-note{font:400 var(--fs-note)/1.5 var(--font-mono);color:var(--text-subtle);margin-top:8px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;background:transparent;border-bottom:1px solid transparent;
  transition:background-color var(--dur-nav) var(--ease-ui),border-color var(--dur-nav) var(--ease-ui)}
.nav.is-scrolled,.nav.is-open{background:var(--nav-bg);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-bottom-color:var(--line-faint)}
html:not(.js) .nav{background:var(--nav-bg);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-bottom-color:var(--line-faint)}   /* is-scrolled is set by script */
.nav__inner{max-width:var(--container-wide);height:var(--nav-h);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav__links{display:none;align-items:center;gap:32px}
.nav__links a{font:400 var(--fs-ui)/1.25rem var(--font-mono);color:var(--text-body);white-space:nowrap;transition:color var(--dur-ui) var(--ease-ui)}
.nav__right{display:flex;align-items:center;gap:8px}
.nav__right .nav__cta{display:none}   /* out-ranks the later .btn{display:inline-flex} */
.nav__burger{display:inline-flex;padding:10px;border:0;background:none;color:var(--text);cursor:pointer}
.nav__burger svg{width:24px;height:24px}
@media (hover:hover){.nav__links a:hover{color:var(--text)}}
@media (min-width:1024px){.nav__links{display:flex}.nav__right{gap:16px}.nav__right .nav__cta{display:inline-flex}.nav__burger{display:none}}
html:not(.js) .nav__burger{display:none}
html:not(.js) .nav__right .nav__cta{display:inline-flex}

.nav__mobile{background:var(--nav-panel-bg);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border-top:1px solid var(--line-faint);padding:16px var(--gutter);
  max-height:calc(100vh - var(--nav-h));max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain}
.nav__mobile>*+*{margin-top:8px}
.nav__mobile a:not(.btn){display:block;padding:12px 0;font:400 var(--fs-ui)/1.25rem var(--font-mono);color:var(--text-body)}
@media (min-width:1024px){.nav__mobile{display:none}}

.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;color:var(--text)}
.brand .cw-mark{width:22px;height:22px;flex-shrink:0}
.brand__name{font:400 1.5rem/1 var(--font-heading);text-transform:uppercase;letter-spacing:.02em}
.brand__by{display:none;align-items:center;gap:8px;padding-left:12px;border-left:1px solid var(--line);
  font:400 var(--fs-small)/1 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--text-subtle)}   /* 12px + AA, not the reference's 10px / 3.7:1 */
.brand__by img{height:16px;width:auto}
@media (min-width:640px){.brand__by{display:inline-flex}}
@media (min-width:1024px) and (max-width:1199px){.brand__by{display:none}}
[data-theme="light"] .logo-unicity{filter:invert(1)}

.theme-toggle{position:relative;display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border-radius:var(--r-pill);
  border:1px solid var(--line);background:transparent;color:var(--text-muted);cursor:pointer;
  transition:color var(--dur-hover) var(--ease-ui),border-color var(--dur-hover) var(--ease-ui)}
.theme-toggle::after{content:"";position:absolute;inset:-4px}   /* 44px touch target around the 36px circle */
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .i-moon{display:none}
[data-theme="light"] .theme-toggle .i-moon{display:block}
[data-theme="light"] .theme-toggle .i-sun{display:none}
@media (hover:hover){.theme-toggle:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.30)}}
html:not(.js) .theme-toggle{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r-pill);
  background:transparent;font:400 var(--fs-ui)/1.25rem var(--font-mono);white-space:nowrap;cursor:pointer;text-decoration:none}
.btn svg{width:16px;height:16px;flex-shrink:0;transition:transform var(--dur-ui) var(--ease-ui)}
@media (hover:hover){.btn:hover svg{transform:translateX(2px)}}

.btn--outline{padding:8px 20px;border:1px solid var(--accent-ink);color:var(--accent-ink);
  transition:color var(--dur-ui) var(--ease-ui),background-color var(--dur-ui) var(--ease-ui),border-color var(--dur-ui) var(--ease-ui)}
@media (hover:hover){.btn--outline:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}}
.btn--block{display:flex;width:100%;padding:12px 0;margin-top:16px}

.btn--primary{position:relative;overflow:hidden;z-index:0;
  padding:12px 28px;background:var(--accent);color:var(--btn-primary-fg);box-shadow:var(--glow-primary);
  transition:color var(--dur-fill) var(--ease-ui)}
.btn--primary::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;z-index:-1;
  background:var(--fill-up-bg);transition:height var(--dur-fill) var(--ease-ui)}
@media (hover:hover){
  .btn--primary:hover{color:var(--fill-up-fg)}
  .btn--primary:hover::after{height:100%}
}
.btn--primary:focus-visible{color:var(--fill-up-fg)}
.btn--primary:focus-visible::after{height:100%}
.btn--lg{padding:14px 32px}
.btn--xl{padding:16px 40px;box-shadow:var(--glow-primary-xl)}

.btn--ghost{padding:12px 28px;border:1px solid var(--line);color:var(--text-muted);
  transition:color var(--dur-hover) var(--ease-ui),border-color var(--dur-hover) var(--ease-ui)}
@media (hover:hover){.btn--ghost:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.30)}}
[data-theme="light"] .btn--ghost{border-color:rgba(var(--text-rgb),.45)}

.btn--tint{padding:12px 24px;border:1px solid rgba(var(--accent-rgb),.30);color:var(--accent-ink);
  background:rgba(var(--accent-rgb),.04);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:border-color var(--dur-ui) var(--ease-ui),background-color var(--dur-ui) var(--ease-ui)}
@media (hover:hover){.btn--tint:hover{border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.10)}}
[data-theme="light"] .btn--tint{border-color:var(--accent-ink)}
@media (hover:hover){[data-theme="light"] .btn--tint:hover{background:rgba(var(--accent-rgb),.08)}}   /* keeps the label at AA on the zone ground */

/* ---------- section shell + motifs ---------- */
.section{position:relative;padding:var(--section-py) var(--section-px)}
.section__inner{position:relative;z-index:1;max-width:var(--container);margin-inline:auto;
  display:flex;flex-direction:column;gap:var(--stack-gap)}
.sec-head .h{margin-top:8px}
.sec-head .lead{margin-top:16px;max-width:var(--container-cta)}
.sec-head .intro{margin-top:20px}
.section--tail{padding-bottom:calc(var(--section-py) / 2)}
.section--half{padding-block:calc(var(--section-py) / 2)}

.bg{position:absolute;inset:0;pointer-events:none}
.bg-grid{background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:60px 60px}
.bg-glow-hero{background:radial-gradient(ellipse 55% 50% at 35% 45%,var(--glow-hero) 0%,transparent 70%)}
.bg-glow-center{background:radial-gradient(ellipse 55% 55% at 50% 45%,var(--glow-section) 0%,transparent 70%)}
.bg-dots{background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:34px 34px}

.split{display:grid;gap:var(--stack-gap)}
@media (min-width:1024px){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;min-height:min(88vh,60rem);display:flex;align-items:center}
/* the grid fades into the page ground instead of ending in a hard cut */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--bg))}
.hero__bar{position:absolute;z-index:1;left:24px;top:16%;bottom:16%;width:2px;background:var(--accent);transform-origin:top}
.hero__content{position:relative;z-index:1;width:100%;padding:96px 24px 96px 56px;display:flex;flex-direction:column;gap:24px}
/* 48 / 112px up to 1440; wider than that the hero keeps the same 32px offset from the centred container */
@media (min-width:1024px){.hero__bar{left:max(48px,calc(50vw - 672px))}.hero__content{padding:96px 64px 96px max(112px,calc(50vw - 608px))}}
@media (min-width:1024px) and (max-height:800px){.hero__content{padding-block:64px}}
.hero__rule{height:1px;width:160px;background:rgba(var(--accent-rgb),.6);transform-origin:left}
@media (min-width:640px){.hero__rule{width:224px}}
@media (min-width:1024px){.hero__rule{width:288px}}
.hero__sub{max-width:51rem;font-size:var(--fs-sub);line-height:var(--lh-body);color:var(--text-body)}
.hero__sub strong{color:var(--text);font-weight:500}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:16px}
.hero__note{max-width:48rem;font:400 var(--fs-small)/1.6 var(--font-mono);color:var(--text-subtle)}
@media (min-width:640px){.hero__note{font-size:var(--fs-ui)}}
.hero__note code{font-size:1em;white-space:nowrap;overflow-wrap:anywhere}
@media (max-width:639px){.eyebrow__sep{display:none}.eyebrow__status{display:block;margin-top:4px;color:var(--text-subtle)}}

/* ---------- cards ---------- */
.grid-3{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch}
@media (min-width:1024px){.grid-3{gap:24px}}
.grid-3--lg{grid-template-columns:1fr}
@media (min-width:1024px){.grid-3--lg{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid-3--lg .card__desc,.grid-3--lg .rows{max-width:40rem}

.card{display:flex;flex-direction:column;border-radius:var(--r-card);padding:24px 20px;
  background:var(--glass-faint);border:1px solid var(--line-solid)}
@media (min-width:1024px){.card{padding:28px 24px}}
.card--hl{background:rgba(var(--accent-rgb),.06);border-color:rgba(var(--accent-rgb),.55)}
.card--planned{border-style:dashed}
[data-theme="light"] .card--planned{border-color:rgba(var(--text-rgb),.35)}
.card__num{font:400 var(--fs-note)/1.4 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(var(--text-rgb),.55)}
.card__title{margin-top:12px;text-wrap:balance;font:400 var(--fs-card-title)/1.04 var(--font-heading);color:var(--text)}
.card--hl .card__num{color:var(--accent-ink)}
.card--hl .card__title{color:var(--accent-display)}
.card__desc{margin-top:12px;margin-bottom:16px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body)}
.card__foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-inner);
  font-size:var(--fs-note);line-height:var(--lh-snug);color:var(--text-subtle)}
[data-theme="light"] .card--hl .card__foot{border-top-color:rgba(var(--accent-rgb),.30)}

.rows{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.rows li{position:relative;padding-left:22px;font-size:var(--fs-ui);line-height:var(--lh-snug);color:var(--text-body)}
.rows li::before{position:absolute;left:0;top:0;font-family:ui-sans-serif,system-ui,sans-serif}
.rows--built li::before{content:"\2713";color:var(--accent-ink)}
.rows--limits li::before{content:"\2013";color:var(--text-subtle)}
.rows--planned li{padding-left:0}
.rows--planned .status{display:block;margin-bottom:4px}

/* cut-wire glyph (Offline card) */
.cut{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:6px;max-width:260px;margin:4px 0 16px}
.cut__node{width:12px;height:12px;border-radius:3px}
.cut__node--on{background:var(--wire)}
.cut__node--off{border:1.5px dashed var(--text-subtle)}
.cut__wire{min-width:14px;border-top:1px dashed rgba(var(--text-rgb),.45)}
.cut__x{margin:0;color:var(--text-muted);font-size:var(--fs-small)}
.cut__label{grid-row:2;grid-column:1 / span 3;font:400 var(--fs-small)/1 var(--font-mono);color:var(--text-body);white-space:nowrap}
.cut__label--r{grid-column:3 / span 3;text-align:right;color:var(--text-subtle)}

/* ---------- beats ---------- */
.beats{display:grid;grid-template-columns:1fr;gap:24px 32px}
@media (min-width:640px){.beats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.beats{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 40px}}
.beat{padding-left:20px;border-left:2px solid var(--line-strong)}
.beat--hl{border-left-color:var(--accent)}
.beat__head{display:flex;align-items:baseline;gap:12px}
.beat__num{font:400 1.5rem/1 var(--font-heading);color:var(--text-faint)}
@media (min-width:1024px){.beat__num{font-size:var(--fs-step)}}
.beat--hl .beat__num{color:var(--accent-display)}
.beat__name{font:700 1rem/1.25 var(--font-mono);text-transform:uppercase}
.beat__text{margin-top:8px;font-size:var(--fs-ui);line-height:var(--lh-body);color:var(--text-muted)}

/* ---------- glow-border frame (one per page) ---------- */
@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes border-rotate{from{--angle:0deg}to{--angle:360deg}}
.card-glow-border{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--r-xl)}
.card-glow-border::before{content:"";position:absolute;inset:0;border-radius:var(--r-xl);padding:1px;pointer-events:none;
  background:conic-gradient(from var(--angle),transparent 40%,rgba(var(--accent-rgb),var(--glow-ring-a)) 50%,transparent 60%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:border-rotate 6s linear infinite}
.card-glow-border>.card-inner{position:relative;z-index:1;padding:24px}
[data-theme="light"] .card-glow-border{box-shadow:inset 0 0 0 1px var(--line-soft)}

/* ---------- terminal (dark in both themes) ---------- */
.term{border-radius:var(--r-card);border:1px solid var(--line-soft);background:var(--surface-1);color:var(--text);padding:20px}
.term__bar{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.term__bar i{display:block;width:12px;height:12px;border-radius:50%}
.term__bar i:nth-child(1){background:rgba(251,44,54,.6)}
.term__bar i:nth-child(2){background:rgba(240,177,0,.6)}
.term__bar i:nth-child(3){background:rgba(0,201,80,.6)}
.term__name{margin-left:8px;font:400 var(--fs-small)/1rem var(--font-mono);color:var(--text-ghost)}
.term .p{color:var(--text-subtle)}

/* ---------- centrepiece: two halves, one loop ---------- */
.arch{margin:0}
.arch__frame>.arch__inner{--zone-pad:20px;padding:16px;display:flex;flex-direction:column}
@media (min-width:1024px){.arch__frame>.arch__inner{--zone-pad:28px;padding:32px}}
@media (max-width:639px){.arch{margin-inline:calc(16px - var(--section-px))}.arch figcaption{padding-inline:calc(var(--section-px) - 16px)}.arch__frame>.arch__inner{--zone-pad:10px;padding:10px}}

.arch__zone{border-radius:18px;padding:var(--zone-pad);background:var(--glass-faint)}
.arch__zone--office{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  border:1.5px dashed rgba(var(--text-rgb),.36);transition:border-color .35s var(--ease-ui)}
.arch__zone--machine{border:1.5px solid rgba(var(--text-rgb),.45)}
[data-theme="light"] .arch__zone--office{border-color:rgba(var(--text-rgb),.45)}
[data-theme="light"] .arch__zone--machine{border-color:rgba(var(--text-rgb),.60)}
.arch__title{font:400 clamp(1.125rem,.9rem + .8vw,1.5rem)/1 var(--font-heading);text-transform:uppercase;letter-spacing:var(--ls-display);
  transition:color .35s var(--ease-ui)}
.arch__gloss{margin-top:6px;font:400 var(--fs-small)/1.4 var(--font-mono);color:var(--text-muted)}
@media (min-width:640px){.arch__gloss{font-size:var(--fs-ui)}}
.arch__toggle{padding:11px 20px;min-width:calc(18ch + 42px)}   /* the longer label + padding + border: no width change on swap */
@media (max-width:639px){.arch__toggle{width:100%}}

.arch__channel{display:grid;grid-template-columns:1fr;height:80px;padding-inline:calc(var(--zone-pad) + 2px)}
.arch__lanes{display:flex;justify-content:center;gap:clamp(48px,16vw,112px);height:100%}
.arch__lane{position:relative;width:2px;background:var(--lane)}
.arch__lane::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border:5px solid transparent}
.arch__lane--down::after{bottom:-1px;border-top:8px solid var(--lane);border-bottom-width:0}
.arch__lane--up::after{top:-1px;border-bottom:8px solid var(--lane);border-top-width:0}
.arch__lanelabel{position:absolute;top:50%;transform:translateY(-50%);width:13ch;font:400 var(--fs-small)/1.35 var(--font-mono);color:var(--text-muted);
  transition:color .35s var(--ease-ui)}
.arch__lane--down .arch__lanelabel{right:14px;text-align:right}
.arch__lane--up .arch__lanelabel{left:14px;width:15.5ch}

.arch__loop{margin-top:16px;display:grid;grid-template-columns:1fr}
.arch__term{padding:14px 12px}
.arch__term .term__name{color:var(--text-subtle)}
.arch__code{font:400 .75rem/1.6 var(--font-mono);overflow-wrap:anywhere}
@media (min-width:640px){.arch__term{padding:20px 24px}.arch__code{font-size:.875rem}}
.ln{padding-left:2ch;text-indent:-2ch}
.ln--in{padding-left:4ch}
@media (max-width:639px){.ln--in{padding-left:3ch}}
.ln--user{color:var(--text)}
.ln--tool{color:rgba(var(--text-rgb),.8)}
.ln--tool::before{content:"";display:inline-block;width:.45em;height:.45em;border-radius:50%;background:currentColor;margin-right:calc(2ch - .45em);vertical-align:.12em;text-indent:0}
.ln--poison{color:var(--text-muted)}
.ln--real{color:var(--accent-ink)}
.ln--real+.ln--real{font-weight:500}
.ln--real::before{content:"";display:inline-block;width:.6em;height:.6em;border-left:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.5;margin:0 calc(2ch - .6em - 1px) .25em 0;text-indent:0}
.ln--note{color:var(--text-subtle)}

.arch__wires{display:flex;justify-content:center;gap:72px;height:64px}
.arch__wire{position:relative;width:3px;background:var(--wire);border-radius:2px}
.arch__wire--out{--s:500}.arch__wire--back{--s:1300}
.arch__wire::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border:6px solid transparent}
.arch__wire--out::after{bottom:-2px;border-top:9px solid var(--wire);border-bottom-width:0}
.arch__wire--back::after{top:-2px;border-bottom:9px solid var(--wire);border-top-width:0}
.arch__verdict{position:absolute;left:14px;top:50%;transform:translateY(-50%);padding:2px 10px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--on-accent);font:500 var(--fs-small)/1.4 var(--font-mono)}

.arch__gate{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--r-diagram);
  background:rgba(var(--accent-rgb),.08);border:1.5px solid rgba(var(--accent-rgb),.70);box-shadow:var(--glow-card)}
[data-theme="light"] .arch__gate{border-color:var(--accent-ink)}
.arch__gate .cw-mark{width:28px;height:28px;flex-shrink:0;color:var(--text)}
.arch__gatename{font:400 clamp(1.25rem,1rem + .8vw,1.75rem)/1 var(--font-heading);text-transform:uppercase;letter-spacing:var(--ls-display)}
.arch__gatesub{margin-top:6px;font:400 var(--fs-small)/1.4 var(--font-mono);color:var(--text-muted)}

@media (min-width:1024px){
  .arch__channel{grid-template-columns:minmax(0,7fr) 96px minmax(0,5fr)}
  .arch__lanes{grid-column:3;gap:80px}
  .arch__loop{grid-template-columns:minmax(0,7fr) 96px minmax(0,5fr);align-items:center}
  .arch__wires{flex-direction:column;gap:40px;height:auto;padding-inline:8px}
  .arch__wire{width:100%;height:3px}
  .arch__wire::after{left:auto;top:50%;transform:translateY(-50%)}
  .arch__wire--out::after{right:-2px;bottom:auto;border:6px solid transparent;border-left:9px solid var(--wire);border-right-width:0}
  .arch__wire--back::after{left:-2px;border:6px solid transparent;border-right:9px solid var(--wire);border-left-width:0}
  .arch__verdict{left:50%;top:auto;bottom:calc(100% + 6px);transform:translateX(-50%)}
  .arch__gate{flex-direction:column;align-items:flex-start;padding:24px}
}

/* unplugged — dimmed with colour tokens, never opacity */
.arch[data-offline="true"] .arch__lanes{--lane:rgba(var(--text-rgb),.28)}
.arch[data-offline="true"] .arch__lane{background:repeating-linear-gradient(to bottom,var(--lane) 0 4px,transparent 4px 10px)}
.arch[data-offline="true"] .arch__lanelabel{color:var(--text-subtle)}
.arch[data-offline="true"] .arch__zone--office{border-color:rgba(var(--text-rgb),.14)}
.arch[data-offline="true"] .arch__zone--office .arch__title{color:var(--text-subtle)}
html:not(.js) .arch__toggle{display:none}

/* one-shot sequence */
.arch.is-armed .seq{opacity:0}
.arch.is-armed.is-replay .ln.seq{opacity:1}
.arch.is-playing .seq{transition:opacity .4s var(--ease-expo) calc(var(--s,0) * 1ms)}
.arch.is-replay .arch__wire--out{--s:0}.arch.is-replay .arch__wire--back{--s:600}
@keyframes cw-gate{50%{box-shadow:0 0 60px rgba(var(--accent-rgb),.35)}}
.arch.is-playing .arch__gate{animation:cw-gate .9s var(--ease-expo) .5s 1}
.arch.is-replay.is-playing .arch__gate{animation-delay:0s}
@media (prefers-reduced-motion:reduce){.arch__zone--office,.arch__title,.arch__lanelabel,.arch .seq{transition:none}}
@media print{.arch .seq{opacity:1!important}}

.arch__kicker{margin-top:20px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body)}
.arch__kicker strong{color:var(--accent-ink);font-weight:600}
.arch .shot__cap{margin-top:16px}

/* ---------- mode table ---------- */
.modes{margin:0}
@media (max-width:639px){.modes{margin-inline:calc(16px - var(--section-px))}.modes>.cap-note,.modes>.shot__cap{padding-inline:calc(var(--section-px) - 16px)}}
.spec{position:relative;overflow:hidden;border-radius:var(--r-card);border:1px solid rgba(var(--text-rgb),.07);background:var(--surface-1)}
[data-theme="light"] .spec{border-color:var(--line)}
.modes__table{width:100%;border-collapse:collapse;text-align:left;font:400 var(--fs-ui)/1.4 var(--font-mono)}
.modes__table th,.modes__table td{padding:14px 12px;vertical-align:top;font-weight:400}
.modes__table th:first-child{padding-left:20px}
.modes__table tbody th,.modes__table tbody td{border-top:1px solid rgba(var(--text-rgb),.06)}
.modes__table thead th{font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;color:var(--text-subtle)}
.modes__table th[scope=row] code,.modes__table small{white-space:nowrap}
.modes__table small{display:block;margin-top:4px;font-size:var(--fs-small);color:var(--text-subtle)}
.modes__table .v b{display:inline-block;padding:2px 8px;border-radius:var(--r-pill);font:500 var(--fs-small)/1.4 var(--font-mono)}
.modes__table .is-start{background:rgba(var(--accent-rgb),.06)}
.v--none,.v--allow{color:var(--text-subtle)}
.v--flag{color:var(--text-body)}
.v--ask b{border:1px solid rgba(var(--accent-rgb),.30);color:var(--accent-ink)}
[data-theme="light"] .v--ask b{border-color:var(--accent-ink)}
.v--block b{background:var(--accent);color:var(--on-accent)}
.modes__key strong{color:var(--text);font-weight:500}
.modes__key{margin-top:16px}
.modes__key .k{display:inline-block}   /* a line may only break before a mode name */
.modes__key{text-wrap:wrap}   /* pretty rebalances around the inline-blocks and breaks the first sentence early */
/* wherever the key cannot fit on two lines, one mode per line; the separators then separate nothing */
@media (max-width:767px),(min-width:1024px) and (max-width:1299px){
  .modes__key .k{display:block}
  .k__sep{display:none}
}
@media (max-width:639px){
  .modes__table th,.modes__table td{padding:10px 4px}
  .modes__table th:first-child{padding-left:10px}
  .modes__table th[scope=row] code{padding:0;background:none}
}
@media (max-width:379px){
  .modes__table th[scope=row] code{white-space:normal}
  .modes__table thead th{letter-spacing:.04em}
}
@media (max-width:359px){
  .modes__table small{white-space:normal;overflow-wrap:anywhere}
  .modes__table th,.modes__table td{padding-inline:3px}
  .modes__table thead th{letter-spacing:0}
}

/* ---------- pricing strip ---------- */
.soon{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
  border-radius:var(--r-md);padding:20px 24px;border:1px solid rgba(var(--accent-rgb),.30);background:rgba(var(--accent-rgb),.04)}
.soon__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.soon__text{flex:1 1 18rem;text-wrap:balance;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body)}
@media (max-width:639px){.soon .btn{width:100%}}
@media (min-width:640px) and (max-width:899px){.soon__tags{flex:1 0 100%}}   /* tablets: tags take row 1, sentence + button share row 2 */

/* ---------- closing band ---------- */
.fade-to-deep{height:64px;margin-bottom:-4px;background:linear-gradient(to bottom,var(--bg-fade-from),var(--bg-deep))}
@media (min-width:1024px){.fade-to-deep{height:96px}}
.cta-band{position:relative;overflow:hidden;background:var(--bg-deep);padding:var(--cta-py) var(--gutter)}
[data-theme="light"] .cta-band{--accent-display:#d45a00}   /* the auroras tint the ground; #e56200 drops under 3:1 here */
.cta-band__inner{position:relative;z-index:1;max-width:var(--container-cta);margin-inline:auto;text-align:center}
.cta-band__sub{margin:24px auto 0;max-width:28rem;font-size:var(--fs-ui);line-height:var(--lh-body);color:var(--text-muted)}
.cta-band__actions{margin-top:40px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px}
.cta-band__mail{margin-top:7px;font:400 var(--fs-ui)/1.25rem var(--font-mono);color:var(--text-muted)}
.cta-band__mail a{display:inline-block;padding-block:13px;text-decoration:underline;text-underline-offset:4px}
@media (hover:hover){.cta-band__mail a:hover{color:var(--accent-ink)}[data-theme="light"] .cta-band__mail a:hover{color:var(--text)}}
.cta-band__line{height:1px;width:128px;margin:51px auto 0;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.aurora{position:absolute;border-radius:50%;pointer-events:none}
.aurora--1{width:500px;height:500px;top:10%;left:20%;background:var(--aurora-1);filter:blur(120px);animation:drift-1 14s linear infinite}
.aurora--2{width:400px;height:400px;bottom:10%;right:15%;background:var(--aurora-2);filter:blur(100px);animation:drift-2 18s linear infinite}
.aurora--3{width:300px;height:300px;top:40%;right:30%;background:var(--aurora-3);filter:blur(80px);animation:drift-3 20s linear infinite}
@keyframes drift-1{50%{transform:translate(30px,-20px)}}
@keyframes drift-2{50%{transform:translate(-25px,15px)}}
@keyframes drift-3{50%{transform:translate(15px,-10px)}}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line-faint);background:var(--bg-deep)}
.footer__inner{max-width:var(--container-wide);margin-inline:auto;padding:64px var(--gutter)}
.footer__grid{display:grid;grid-template-columns:1fr;gap:48px}
@media (min-width:768px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.footer__grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto}.footer__mail{white-space:nowrap}}
.footer__lockup{display:inline-flex;align-items:center;gap:12px;color:var(--text)}
.footer__lockup .cw-mark{width:28px;height:28px;flex-shrink:0}
.footer__lockup .brand__name{font-size:2rem}
.footer__by{margin-top:16px;display:flex;align-items:center;gap:12px;
  font:400 var(--fs-small)/1 var(--font-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--text-subtle)}
.footer__by img{height:32px;width:auto}
.footer__tagline{margin-top:16px;max-width:20rem;font-size:var(--fs-ui);line-height:1.25rem;color:var(--text-subtle)}
.footer__title{margin-bottom:10px;font:400 var(--fs-small)/1rem var(--font-mono);text-transform:uppercase;letter-spacing:var(--ls-footer);color:var(--text-subtle)}
.footer li a{display:inline-block;padding-block:6px;font-size:var(--fs-ui);line-height:1.25rem;color:var(--text-muted);overflow-wrap:anywhere;transition:color var(--dur-ui) var(--ease-ui)}
.footer__bar{margin-top:64px;padding-top:32px;border-top:1px solid var(--line-faint);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:16px;
  font:400 var(--fs-small)/1rem var(--font-mono);color:var(--text-subtle);text-align:center}
@media (min-width:640px){.footer__bar{flex-direction:row}}
.footer__smallprint{margin-top:16px;font:400 var(--fs-small)/1.5 var(--font-mono);color:var(--text-subtle)}
@media (max-width:639px){.footer__smallprint{text-align:center}}
@media (hover:hover){.footer li a:hover{color:var(--text)}}
@media (max-width:1023px){.footer li a{padding-block:12px}.brand{padding-block:10px}}   /* 44px touch targets */

/* ---------- 404 ---------- */
.lost{min-height:min(100vh,60rem)}
.lost .hero__content{padding-top:calc(96px + var(--nav-h))}

/* ---------- motion ---------- */
.theme-swap *,.theme-swap *::before,.theme-swap *::after{transition:none!important}   /* the theme changes in one frame */
@keyframes cw-fade{from{opacity:0}}
@keyframes cw-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes cw-grow-y{from{transform:scaleY(0)}}
@keyframes cw-grow-x{from{transform:scaleX(0)}}
.hero__bar{animation:cw-grow-y 1s var(--ease-hero) both}
.hero .eyebrow{animation:cw-fade .6s var(--ease-inout) .3s both}
.hero .h--hero{animation:cw-rise .8s var(--ease-inout) .45s both}
.hero__rule{animation:cw-grow-x .6s var(--ease-inout) .9s both}
.hero__sub{animation:cw-fade .6s var(--ease-inout) 1s both}
.hero__cta{animation:cw-rise .7s var(--ease-expo) 1.1s both}
.hero__note{animation:cw-fade .6s var(--ease-inout) 1.3s both}

.js [data-reveal]{transition:opacity var(--rv-t,.6s) var(--rv-e,var(--ease-expo)) var(--d,0s),
  transform var(--rv-t,.6s) var(--rv-e,var(--ease-expo)) var(--d,0s),
  filter var(--rv-t,.6s) var(--rv-e,var(--ease-expo)) var(--d,0s)}
.js [data-reveal="fade"]{--rv-t:.5s;--rv-e:var(--ease-inout)}
.js [data-reveal="down"]{--rv-t:.7s;--rv-e:var(--ease-inout)}
.js [data-reveal="rise-blur"],.js [data-reveal="scale-x-center"]{--rv-t:1s}
.js [data-reveal]:not(.is-in){opacity:0}
.js [data-reveal="down"]:not(.is-in){transform:translateY(-20px)}
.js [data-reveal="up"]:not(.is-in){transform:translateY(16px)}
.js [data-reveal="rise-blur"]:not(.is-in){transform:translateY(40px);filter:blur(10px)}
.js [data-reveal="scale-x-center"]:not(.is-in){opacity:1;transform:scaleX(0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]:not(.is-in){opacity:1;transform:none;filter:none}
  .js [data-reveal]{transition:none}
  *,*::before,*::after{animation:none!important}
  .btn--primary,.btn--primary::after,.btn svg{transition:none}
}
@media print{.js [data-reveal]:not(.is-in){opacity:1;transform:none;filter:none}.nav{position:absolute}}
@media (min-width:1024px){.hero__sub strong{display:block}}