/* ============================================================
   ABon Tech — shared stylesheet
   ────────────────────────────────────────────────────────────
   DIRECTION: "Cold Instrument" — dark-first.
   The site reads as the face of a precision instrument: cold
   graphite ground, milled hairlines, engraved mono labels, and
   one cool accent used only where something is interactive or
   structural. Nothing ambient moves.

   COLOUR LOGIC (the load-bearing idea):
     --rented  amber  → every cost you pay someone else. Struck prices.
     --owned   green  → every cost that becomes zero. "Yours to keep."
     --accent  blue   → interactive + structure. Never decoration.
   Money is never neutral on this site. If a number is on screen,
   its colour says whether you rent it or own it.

   Display & body: Archivo (one typeface, two widths) · Data: JetBrains Mono
   ============================================================ */

/* ============================================================ 1 · TOKENS
   Dark-first: the bare :root IS the dark palette. Light is an
   explicit opt-in via the footer toggle (persisted in app.js).
   ------------------------------------------------------------ */
:root {
  /* grounds — cold graphite, blue-green bias, never pure black */
  --ground:#0B1013;
  --ground-2:#12191E;      /* raised: panels, cards, header */
  --ground-3:#1A242A;      /* inset: form fields, data wells */
  --ground-deep:#070B0D;   /* deepest band */

  /* hairlines — the primary structural device on this site */
  --line:#222E35;
  --line-2:#31414A;

  /* type */
  --text:#EAEFF1;          /* chalk */
  --text-2:#A5B4BC;
  --muted:#6E7E87;

  /* accent — instrument blue */
  --accent:#5B9DF9;
  --accent-2:#8FBFFF;
  --accent-press:#3E86EA;
  --accent-wash:#13202F;
  --accent-line:#2A4463;

  /* functional money colours */
  --owned:#3FBF8F;
  --owned-wash:#0E2620;
  --rented:#D9A24B;
  --rented-wash:#251C0D;

  /* the light "spec sheet" ground, used by .band-paper */
  --sheet:#E9EDEF;
  --sheet-ink:#0B1013;

  /* one typeface, two widths: expanded for display, normal for reading */
  --font-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --font-body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono","Segoe UI Mono",monospace;

  --warm:#C9A063;
  --header-h:78px;
  /* ONE two-column split for the whole site, so every section that splits
     shares the same vertical gutter. Four grids used to drift to 900 / 891
     / 746 / 707 at 1600px, which reads as "almost aligned". */
  --split:minmax(0,1.1fr) minmax(0,.9fr);
  --split-gap:clamp(2rem,5vw,4.5rem);
  --maxw:1680px; --maxw-mid:1240px; --maxw-text:72ch;
  --pad:clamp(1rem,2.6vw,2.5rem);
  --radius:4px; --radius-sm:3px; --radius-lg:6px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.8);
  --shadow-lift:0 1px 2px rgba(0,0,0,.4), 0 24px 50px -24px rgba(0,0,0,.9);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-blend:screen;
  --grain-opacity:.045;

  /* ── back-compat aliases: older inline styles in the HTML still
     reference these names. Kept so nothing silently loses colour. */
  --paper:var(--ground); --paper-2:var(--ground-2);
  --surface:var(--ground-2); --surface-2:var(--ground-2);
  --ink:var(--text); --ink-2:var(--text-2);
  --night:var(--ground-deep); --on-night:var(--text); --on-night-mut:var(--text-2);
  --accent-ink:var(--accent); --good:var(--owned);
}

/* light mode — explicit choice only */
:root[data-theme="light"] {
  --ground:#E9EDEF;
  --ground-2:#F3F6F7;
  --ground-3:#DDE4E7;
  --ground-deep:#0B1013;

  --line:#CDD6DA;
  --line-2:#AFBEC5;

  --text:#0B1013;
  --text-2:#38454C;
  --muted:#64737B;

  --accent:#1E5FC4;
  --accent-2:#2C6FD8;
  --accent-press:#174C9F;
  --accent-wash:#E1EAF7;
  --accent-line:#B6CBEA;

  --owned:#136B4F;
  --owned-wash:#DFEFE9;
  --rented:#8A5E1E;
  --rented-wash:#F4EBDA;

  --sheet:#0B1013;
  --sheet-ink:#EAEFF1;

  --shadow-sm:0 1px 2px rgba(11,16,19,.06);
  --shadow:0 1px 2px rgba(11,16,19,.05), 0 16px 36px -22px rgba(11,16,19,.28);
  --shadow-lift:0 1px 2px rgba(11,16,19,.06), 0 22px 46px -22px rgba(11,16,19,.34);

  --grain-blend:multiply;
  --grain-opacity:.035;
}

/* ============================================================ 2 · RESET */
*,*::before,*::after{box-sizing:border-box;}
/* an author display: beats the UA [hidden] rule, so state it explicitly */
[hidden]{display:none !important;}
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:92px;
  color-scheme:dark; background:var(--ground);
}
:root[data-theme="light"]{color-scheme:light;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0; background:transparent; color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* paper grain — the one texture that runs over the whole site.
   This is what stops a flat dark ground reading as cheap. */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:var(--grain);
  opacity:var(--grain-opacity); mix-blend-mode:var(--grain-blend);
}
::selection{background:var(--accent); color:var(--ground-deep);}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
h1,h2,h3,h4{
  margin:0; font-family:var(--font-display); font-weight:600;
  font-stretch:112%; letter-spacing:-.02em; line-height:1.1; text-wrap:balance;
}
p{margin:0;}
strong{font-weight:700; color:var(--text);}

.skip-link{
  position:absolute; left:var(--pad); top:-100px; z-index:200;
  background:var(--accent); color:var(--ground-deep); font-weight:700;
  padding:.7em 1.1em; border-radius:var(--radius); transition:top .18s ease;
}
.skip-link:focus{top:.7rem;}


/* ============================================================ 2b · PAGE GROUND
   ONE background across every page, drawn as a fine golden grid. It used to
   differ per page, which made the site feel like several sites; a single
   ground is what makes ten pages read as one.
   ------------------------------------------------------------ */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.85;
  background-image:
    linear-gradient(color-mix(in srgb, var(--warm) 26%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--warm) 26%, transparent) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(150% 130% at 8% 0%, #000 16%, rgba(0,0,0,.34) 68%, rgba(0,0,0,.16) 100%);
          mask-image:radial-gradient(150% 130% at 8% 0%, #000 16%, rgba(0,0,0,.34) 68%, rgba(0,0,0,.16) 100%);
}
.site-header,main,.site-footer{position:relative; z-index:1;}

/* ============================================================ 3 · LAYOUT */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);}
/* .mid used to centre a narrower box, which pushed those sections 173px
   inward from every other section on the same page at 1600px. It now keeps
   the shared left edge and caps the READING width instead, left-aligned —
   so every heading on a page starts on the same vertical line. */
.container.mid{max-width:var(--maxw);}
.container.mid > *{max-width:var(--maxw-mid);}
.container.mid > .sec-head{max-width:none;}  /* keeps the shared gutter */
/* full-bleed without counting the scrollbar (100vw does, and clips) */
.bleed{width:auto; margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%);}
section{position:relative;}
.section{padding-block:clamp(3rem,6vw,5.5rem);}
.section-sm{padding-block:clamp(2rem,4vw,3.25rem);}
.measure{max-width:var(--maxw-text);}
.measure{margin-inline:0;}

/* ============================================================ 4 · GRAPHICS KIT
   Six static treatments. No animation, no images, no libraries.
   They compose: grain under everything, one light source per band,
   hairlines and marks for structure.
   ------------------------------------------------------------ */

/* 4.1 draft grid — 1px at 32px, faded by a radial mask */
.g-grid::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(125% 90% at 50% 0%, #000 10%, transparent 78%);
          mask-image:radial-gradient(125% 90% at 50% 0%, #000 10%, transparent 78%);
}
/* legacy name, same treatment */
.grid-tex::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 75%);
          mask-image:radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 75%);
}

/* 4.2 single light source — one static radial. Replaces every blurred blob. */
.g-light::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(110% 80% at 14% -8%,
    color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%);
}

/* 4.3 halftone dot field — for the deepest bands */
.g-dots::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  color:var(--text); opacity:.09;
  background-image:radial-gradient(currentColor 1px, transparent 1.2px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(90% 75% at 50% 0%, #000, transparent 80%);
          mask-image:radial-gradient(90% 75% at 50% 0%, #000, transparent 80%);
}

/* 4.4 registration marks — corner crosshairs + a mono coordinate.
   Add data-coord="SEC 04 / 10" to print the label. */
.g-marks > .reg{position:absolute; z-index:0; width:12px; height:12px; color:var(--accent); opacity:.55;}
.g-marks > .reg::before,.g-marks > .reg::after{content:""; position:absolute; background:currentColor;}
.g-marks > .reg::before{left:0; top:5.5px; width:100%; height:1px;}
.g-marks > .reg::after{top:0; left:5.5px; height:100%; width:1px;}
.reg.tl{left:var(--pad); top:1.25rem;} .reg.tr{right:var(--pad); top:1.25rem;}
.reg.bl{left:var(--pad); bottom:1.25rem;} .reg.br{right:var(--pad); bottom:1.25rem;}
.coord{
  position:absolute; left:var(--pad); bottom:1rem; z-index:0;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}

/* 4.5 diagonal hatch — marks anything rented, struck, or "before" */
.hatch{
  background-image:repeating-linear-gradient(45deg,
    transparent 0 6px, color-mix(in srgb,var(--rented) 26%, transparent) 6px 7px);
}

/* 4.6 hairline divider with a centre tick */
.rule{position:relative; height:1px; background:var(--line); border:0; margin:0;}
.rule::after{
  content:""; position:absolute; left:50%; top:-3px;
  width:1px; height:7px; background:var(--accent); transform:translateX(-50%);
}

/* ============================================================ 5 · TYPE HELPERS */
.eyebrow{
  font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:.7em; margin:0;
}
.eyebrow::before{content:""; width:20px; height:1px; background:currentColor; opacity:.55;}
.eyebrow.center::after{content:""; width:20px; height:1px; background:currentColor; opacity:.55;}
.h-xl{font-size:clamp(2.6rem,6vw,4.75rem);}
.h-lg{font-size:clamp(2rem,4vw,3.25rem);}
.h-md{font-size:clamp(1.65rem,3vw,2.4rem);}
.accent{color:var(--accent);}
.lead{color:var(--text-2); font-size:clamp(1.06rem,1.5vw,1.24rem); line-height:1.56; max-width:58ch;}
.muted{color:var(--muted);}
/* money */
.rented{color:var(--rented); font-variant-numeric:tabular-nums;}
.rented.strike{text-decoration:line-through; text-decoration-thickness:1.5px;}
.owned{color:var(--owned); font-variant-numeric:tabular-nums;}

/* ============================================================ 6 · BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-body); font-size:1rem; font-weight:700; line-height:1;
  letter-spacing:-.005em; padding:1.02em 1.6em; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer; position:relative;
  background:var(--ground-2); color:var(--text);
  transition:transform .18s cubic-bezier(.2,.7,.2,1), background .18s ease,
             border-color .18s ease, color .18s ease, box-shadow .2s ease;
}
/* the lit button: accent fill reads as backlit, not painted */
.btn--primary{
  background:var(--accent); color:#06121F; border-color:var(--accent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%, transparent),
             0 14px 34px -16px color-mix(in srgb,var(--accent) 65%, transparent);
}
.btn--primary:hover{background:var(--accent-2); border-color:var(--accent-2); transform:translateY(-1px);}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--line-2);}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px);}
.btn--light{background:var(--text); color:var(--ground);}
.btn--light:hover{background:#fff; transform:translateY(-1px);}
.btn--outline-light{background:transparent; color:var(--text); border-color:color-mix(in srgb,var(--text) 30%, transparent);}
.btn--outline-light:hover{background:color-mix(in srgb,var(--text) 8%, transparent); border-color:var(--text); transform:translateY(-1px);}
.btn--sm{padding:.7em 1.1em; font-size:.9rem;}
.btn--lg{padding:1.12em 1.9em; font-size:1.06rem;}
.btn .arrow{transition:transform .2s ease;}
.btn:hover .arrow{transform:translateX(3px);}
.btn:active{transform:translateY(0);}

a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius-sm);
}

.cta-note{font-size:.88rem; color:var(--muted); margin-top:1rem; display:flex; align-items:center; gap:.5em;}
.cta-note svg{color:var(--owned); flex:none;}
.link-arrow{display:inline-flex; align-items:center; gap:.45em; font-weight:700; color:var(--accent); font-size:.98rem;}
.link-arrow .arrow{transition:transform .2s ease;}
.link-arrow:hover .arrow{transform:translateX(3px);}

/* ============================================================ 7 · REVEAL */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{
    opacity:0; transform:translateY(16px);
    transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .js [data-reveal].in{opacity:1; transform:none;}
  .js [data-reveal][data-delay="1"]{transition-delay:.07s;}
  .js [data-reveal][data-delay="2"]{transition-delay:.14s;}
  .js [data-reveal][data-delay="3"]{transition-delay:.21s;}
  .js [data-reveal][data-delay="4"]{transition-delay:.28s;}
}

/* ============================================================ 8 · HEADER */
.site-header{position:sticky; top:0; z-index:60;}
.site-header::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter:saturate(1.3) blur(14px); -webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid transparent; opacity:0; transition:opacity .25s ease;
}
.site-header.scrolled::after{opacity:1; border-bottom-color:var(--line);}
/* 1px scroll progress — the only ambient motion left, and it's informative */
.site-header .progress{
  position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--accent); z-index:1; transition:width .1s linear;
}
.nav{display:flex; align-items:center; justify-content:space-between; height:78px;}
.brand{display:inline-flex; align-items:center; gap:.6rem; color:var(--text);}
.brand .mark{color:var(--text); flex:none;}
.brand .mark .acc{stroke:var(--accent); fill:var(--accent);}
.brand .word{font-family:var(--font-display); font-size:1.3rem; font-weight:700; font-stretch:112%; letter-spacing:-.02em;}
.brand .word span{color:var(--muted); font-weight:400;}
.nav-links{display:flex; align-items:center; gap:2rem;}
.nav-links a.navlink{
  font-size:.95rem; font-weight:600; color:var(--text-2); position:relative;
  font-family:var(--font-body);
}
.nav-links a.navlink::after{
  content:""; position:absolute; left:0; bottom:-7px; height:1px; width:0;
  background:var(--accent); transition:width .22s ease;
}
.nav-links a.navlink:hover,.nav-links a.navlink[aria-current="page"]{color:var(--text);}
.nav-links a.navlink:hover::after,.nav-links a.navlink[aria-current="page"]::after{width:100%;}
.nav-right{display:flex; align-items:center; gap:.9rem;}
.menu-btn{
  display:none; width:42px; height:42px; border:1px solid var(--line-2);
  border-radius:var(--radius); background:var(--ground-2); color:var(--text); cursor:pointer;
}
.menu-btn svg{margin:auto;}
@media (max-width:940px){
  .nav-links{display:none;}
  .nav-right .btn{display:none;}
  .menu-btn{display:block;}
  .nav-links.open{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:78px; background:var(--ground-2);
    border-block:1px solid var(--line); padding:.5rem var(--pad) 1.4rem;
    box-shadow:var(--shadow);
  }
  .nav-links.open a.navlink{padding:.9rem .1rem; font-size:1.06rem; border-bottom:1px solid var(--line);}
  .nav-links.open a.navlink::after{display:none;}
  .nav-links.open .btn{display:inline-flex; margin-top:1rem;}
}
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:55; display:none;
  padding:.65rem var(--pad);
  background:color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.mobile-cta .btn{width:100%;}
@media (max-width:940px){ .mobile-cta{display:block;} body{padding-bottom:74px;} }

/* ============================================================ 9 · HERO */
.hero{padding-top:clamp(2rem,4vw,3.5rem); padding-bottom:clamp(2.5rem,5vw,4.5rem);}
/* The hero ground: one static light source + masked draft grid.
   (Replaces the old animated three-blob aurora entirely.)
   It reaches UP behind the sticky header — otherwise the grid starts
   at the hero's top edge and draws a hard seam across the page. */
.hero-ground{
  position:absolute; top:calc(-1 * var(--header-h)); left:0; right:0; bottom:0;
  z-index:0; pointer-events:none; overflow:hidden;
}
.hero-ground::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(95% 70% at 16% -6%,
    color-mix(in srgb, var(--warm) 24%, transparent), transparent 60%);
}
.hero .container,.page-hero .container{position:relative; z-index:2;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,3.75rem); align-items:start;}
.hero h1{font-size:clamp(2.3rem,4.2vw,3.75rem); letter-spacing:-.025em; margin-top:.85rem; font-weight:500;}
.hero h1 em{font-style:normal; color:var(--accent); white-space:nowrap;}
.hero .lead{margin-top:1.6rem; max-width:40ch;}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem;}
.hero-trust{margin-top:1.5rem; display:flex; align-items:center; gap:.65rem; color:var(--muted); font-size:.9rem;}
.hero-trust .dot{width:6px; height:6px; border-radius:50%; background:var(--owned);}
@media (max-width:920px){ .hero-grid{grid-template-columns:1fr; gap:2.25rem;} .hero .lead{max-width:52ch;} }

/* hero spec panel — where the rented/owned colour logic debuts */
.panel{
  background:var(--ground-2); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; position:relative;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.1rem; border-bottom:1px solid var(--line); background:var(--ground-3);
}
.panel-head .t{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}
.panel-head .dots{display:flex; gap:.35rem;}
.panel-head .dots i{width:7px; height:7px; border-radius:50%; background:var(--line-2);}
.panel-head .dots i:first-child{background:var(--accent);}
.panel ul{list-style:none; margin:0; padding:.5rem 1.1rem;}
.panel li{
  display:flex; align-items:center; gap:.7rem; padding:.6rem 0;
  font-size:.96rem; color:var(--text-2); border-bottom:1px solid var(--line);
}
.panel li:last-child{border-bottom:0;}
.panel li svg{color:var(--accent); flex:none;}
.panel-foot{padding:1rem 1.1rem 1.2rem; border-top:1px solid var(--line); background:var(--ground-3);}
.panel-foot .row{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;}
.panel-foot .row+.row{margin-top:.55rem;}
.panel-foot .k{font-size:.9rem; color:var(--muted);}
.panel-foot .v{font-family:var(--font-mono); font-size:.95rem; color:var(--text); font-variant-numeric:tabular-nums;}
.panel-foot .v.strike{color:var(--rented); text-decoration:line-through; text-decoration-thickness:1.5px;}
.panel-foot .v.free{color:var(--owned); font-weight:700; font-size:1.08rem;}

/* ============================================================ 10 · MARQUEE */
.marquee-wrap{border-block:1px solid var(--line); background:var(--ground-2); padding-block:1.3rem; overflow:hidden;}
.marquee-label{
  text-align:center; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1rem;
}
.marquee{display:flex; gap:3rem; width:max-content; align-items:center;}
@media (prefers-reduced-motion:no-preference){
  .marquee{animation:scroll-x 42s linear infinite;}
  .marquee-wrap:hover .marquee{animation-play-state:paused;}
}
@keyframes scroll-x{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.marquee span{
  font-family:var(--font-mono); font-weight:400; font-size:.94rem; color:var(--text-2);
  opacity:.6; white-space:nowrap; letter-spacing:.04em; text-transform:uppercase;
  transition:opacity .18s, color .18s;
}
.marquee span::before{content:"— "; color:var(--rented); opacity:.8;}
.marquee-wrap:hover span{opacity:.35;}
.marquee span:hover{opacity:1; color:var(--rented);}

/* ============================================================ 11 · STATS */
.stats{display:grid; grid-template-columns:repeat(5,1fr);}
.stat{padding:clamp(1.4rem,3vw,2.2rem) 1rem; text-align:center; border-left:1px solid var(--line);}
.stat:first-child{border-left:0;}
.stat .n{
  font-family:var(--font-display); font-weight:600; font-stretch:112%; font-size:clamp(1.85rem,3.6vw,2.8rem);
  color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1;
}
.stat .n em{font-style:normal; color:var(--accent);}
.stat .l{font-size:.8rem; color:var(--muted); margin-top:.55rem; line-height:1.4;}
@media (max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat{border-left:1px solid var(--line); border-top:1px solid var(--line); padding-block:1.5rem;}
  .stat:nth-child(odd){border-left:0;}
  .stat:nth-child(-n+2){border-top:0;}
  .stat:last-child{grid-column:1/-1;}
}

/* ============================================================ 12 · SECTION HEADS
   Two columns on wide screens: eyebrow and heading left, the lead
   paragraph set to the right and baseline-aligned with it. Stops the
   right half of every section opener sitting empty.
   ------------------------------------------------------------ */
.sec-head{
  display:grid; grid-template-columns:var(--split);
  gap:.25rem var(--split-gap); align-items:end;
  margin-bottom:clamp(1.75rem,3vw,2.5rem);
}
.sec-head .eyebrow{grid-column:1; grid-row:1; margin-bottom:1.05rem;}
.sec-head h2,.sec-head .h-lg,.sec-head .h-md{grid-column:1; grid-row:2;}
.sec-head p{grid-column:2; grid-row:2; margin-top:0; max-width:48ch; align-self:end; padding-bottom:.35rem;}
@media (max-width:920px){
  .sec-head{grid-template-columns:1fr;}
  .sec-head h2,.sec-head .h-lg,.sec-head .h-md,.sec-head p{grid-column:1; grid-row:auto;}
  .sec-head p{margin-top:1.1rem; padding-bottom:0;}
}
.sec-head.center{grid-template-columns:1fr; text-align:center; max-width:66ch; margin-inline:auto;}
.sec-head.center .eyebrow,.sec-head.center h2,.sec-head.center .h-lg,.sec-head.center p{grid-column:1; grid-row:auto;}
.sec-head.center .eyebrow{justify-content:center;}
.sec-head.center p{margin-top:1.1rem; margin-inline:auto; padding-bottom:0;}

/* ============================================================ 13 · CARDS & GRIDS */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem;}
@media (max-width:900px){ .grid-3,.grid-2{grid-template-columns:1fr;} }

/* Hairline-joined cells, not floating rounded cards.
   Opt-in, because it paints the gap colour as the grid's own background —
   which only reads as a hairline when EVERY child is an opaque cell. On a
   grid of bare divs it floods the whole area instead. */
.grid-joined{gap:1px; background:var(--line); border:1px solid var(--line);}

.card{
  background:var(--ground-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.9rem 1.7rem; position:relative; transition:background .2s ease;
}
.grid-joined > .card{border:0; border-radius:0;}
.card:hover{background:var(--ground-3);}
.card::after{
  content:""; position:absolute; left:0; top:0; width:0; height:1px;
  background:var(--accent); transition:width .28s cubic-bezier(.2,.7,.2,1);
}
.card:hover::after{width:100%;}
.card .ic{
  width:44px; height:44px; border-radius:var(--radius); display:grid; place-items:center;
  margin-bottom:1.2rem; color:var(--accent); background:var(--accent-wash);
  border:1px solid var(--accent-line);
}
.card h3{font-size:1.3rem; letter-spacing:-.02em;}
.card p{margin-top:.65rem; color:var(--text-2); font-size:.99rem;}
.card .num{
  position:absolute; top:1.6rem; right:1.7rem; font-family:var(--font-mono);
  font-size:.72rem; color:var(--muted); letter-spacing:.1em;
}

/* ============================================================ 14 · TOOLS
   This grid should read as a parts catalogue: mono specs, and every
   price coloured by whether you rent it or own it.
   ------------------------------------------------------------ */
.tools-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:960px){ .tools-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .tools-grid{grid-template-columns:1fr;} }
.tool{
  display:flex; flex-direction:column; background:var(--ground-2);
  padding:1.5rem 1.45rem 1.35rem; transition:background .2s ease; position:relative;
}
.tool:hover{background:var(--ground-3);}
.tool .replaces{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.85rem;
}
.tool .replaces b{color:var(--rented); font-weight:500;}
.tool h3{font-size:1.24rem;}
.tool p{margin-top:.5rem; color:var(--text-2); font-size:.95rem; flex:1;}
.tool .cost{
  margin-top:1.1rem; padding-top:.85rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.tool .cost .k{font-size:.78rem; color:var(--muted); font-family:var(--font-mono); letter-spacing:.04em;}
.tool .cost .v{font-family:var(--font-mono); font-weight:500; color:var(--owned); font-size:.88rem;}

/* ============================================================ 15 · PROCESS */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.step{position:relative; padding-top:2.8rem;}
.step .num{
  position:absolute; top:0; left:0; font-family:var(--font-mono); font-size:.8rem;
  color:var(--accent); letter-spacing:.12em; font-weight:500;
}
.step .bar{position:absolute; top:1.6rem; left:0; right:-1.5rem; height:1px; background:var(--line-2);}
.step:last-child .bar{display:none;}
.step h3{font-size:1.18rem;}
.step p{margin-top:.55rem; color:var(--text-2); font-size:.95rem;}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr); gap:2rem 1.4rem;} .step .bar{display:none;} }
@media (max-width:520px){ .steps{grid-template-columns:1fr;} }

.stepline{
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.05rem;
  padding:1.2rem 1.4rem; background:var(--ground-2); border:1px solid var(--line);
  border-radius:var(--radius);
}
.stepline .s{display:flex; align-items:baseline; gap:.55rem;}
.stepline .s .n{font-family:var(--font-mono); font-size:.7rem; font-weight:500; color:var(--accent);}
.stepline .s b{font-family:var(--font-display); font-weight:700; font-stretch:108%; font-size:1.02rem; color:var(--text);}
.stepline .sep{color:var(--line-2); font-size:1.05rem;}
@media (max-width:680px){ .stepline{flex-direction:column; align-items:flex-start; gap:.75rem;} .stepline .sep{display:none;} }

/* ============================================================ 16 · SERVICE BLOCKS */
.svc-grid{display:grid; grid-template-columns:var(--split); gap:var(--split-gap); align-items:start;}
@media (max-width:860px){ .svc-grid{grid-template-columns:1fr;} }
.svc-num{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 .65rem;}
.plist{list-style:none; margin:1.4rem 0 0; padding:0; counter-reset:p;}
.plist li{position:relative; padding-left:2.6rem; margin-bottom:1rem; color:var(--text-2); font-size:.99rem;}
.plist li:last-child{margin-bottom:0;}
.plist li::before{
  counter-increment:p; content:counter(p,decimal-leading-zero); position:absolute; left:0; top:.12rem;
  font-family:var(--font-mono); font-size:.78rem; font-weight:500; color:var(--accent);
}
.plist li b{
  display:block; color:var(--text); font-family:var(--font-display); font-weight:700; font-stretch:108%;
  font-size:1.06rem; margin-bottom:.15rem;
}
.svc-tools{background:var(--ground-2); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem;}
.svc-tools h4{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1rem; font-weight:500;
}
.svc-tools ul{list-style:none; margin:0; padding:0;}
.svc-tools li{display:flex; flex-direction:column; gap:.1rem; padding:.68rem 0; border-bottom:1px solid var(--line);}
.svc-tools li:last-child{border-bottom:0;}
.svc-tools li .tn{font-family:var(--font-display); font-weight:700; font-stretch:108%; font-size:1rem;}
.svc-tools li .rep{color:var(--muted); font-size:.78rem; font-family:var(--font-mono); letter-spacing:.02em;}
.svc-tools .save{
  margin-top:1.1rem; padding:.85rem .95rem; background:var(--owned-wash);
  border:1px solid color-mix(in srgb,var(--owned) 28%, transparent); border-radius:var(--radius);
  font-size:.88rem; color:var(--owned); font-weight:600; display:flex; gap:.55em;
  align-items:flex-start; line-height:1.45;
}
.svc-tools .save svg{flex:none; margin-top:.15rem;}

/* cost comparison: rented vs owned, side by side */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:1.8rem; background:var(--line); border:1px solid var(--line);}
@media (max-width:600px){ .compare{grid-template-columns:1fr;} }
.compare .cc{background:var(--ground-2); padding:1.5rem; position:relative;}
.compare .cc .big{
  font-family:var(--font-display); font-weight:600; font-stretch:112%; font-size:clamp(1.85rem,4.5vw,2.75rem);
  letter-spacing:-.025em; line-height:1; font-variant-numeric:tabular-nums;
}
.compare .cc.old .big{color:var(--rented); text-decoration:line-through; text-decoration-thickness:2px;}
.compare .cc.old{background-image:repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb,var(--rented) 8%, transparent) 7px 8px);}
.compare .cc.new .big{color:var(--owned);}
.compare .cc.new{background:var(--ground-3);}
.compare .cc .cl{font-size:.9rem; color:var(--muted); margin-top:.5rem;}

/* ============================================================ 17 · SCREENSHOTS */
.shot{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--ground-2); box-shadow:var(--shadow);
}
.shot .bar{display:flex; align-items:center; gap:.4rem; padding:.55rem .8rem; background:var(--ground-3); border-bottom:1px solid var(--line);}
.shot .bar i{width:8px; height:8px; border-radius:50%; background:var(--line-2); display:block; flex:none;}
.shot .bar i:first-child{background:var(--accent);}
.shot .bar .u{
  margin-left:.65rem; font-family:var(--font-mono); font-size:.66rem; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.shot img{display:block; width:100%; height:auto;}
.shot.tall img{height:440px; object-fit:cover; object-position:top center;}
.shot .cap{padding:.7rem .9rem; font-size:.82rem; color:var(--muted); border-top:1px solid var(--line); line-height:1.5;}
.shot .cap b{color:var(--text-2); font-weight:700;}
.shot-center{max-width:940px; margin-inline:auto;}
.gallery{columns:3; column-gap:1.2rem;}
@media (max-width:1000px){ .gallery{columns:2;} }
@media (max-width:640px){ .gallery{columns:1;} }
.gallery .shot{break-inside:avoid; margin-bottom:1.2rem;}

/* ============================================================ 18 · BANDS
   Contrast rhythm. On a dark-first site the *light* band is the
   accent chapter — it reads as the printed spec sheet that ships
   with the machine. Both bands re-scope the token set, so every
   component inside adapts without one-off overrides.
   ------------------------------------------------------------ */
.band-dark{background:var(--ground-deep); color:var(--text); position:relative; overflow:hidden;}
.band-dark::before{
  content:""; position:absolute; inset:0; pointer-events:none; color:var(--text); opacity:.07;
  background-image:radial-gradient(currentColor 1px, transparent 1.2px); background-size:14px 14px;
  -webkit-mask-image:radial-gradient(85% 75% at 50% 0%, #000, transparent 78%);
          mask-image:radial-gradient(85% 75% at 50% 0%, #000, transparent 78%);
}
.band-dark::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 70% at 12% 0%, color-mix(in srgb,var(--accent) 16%, transparent), transparent 60%);
}
.band-dark > .container{position:relative; z-index:1;}

/* keep .band-dark genuinely dark even in light mode */
:root[data-theme="light"] .band-dark{
  --ground:#0B1013; --ground-2:#12191E; --ground-3:#1A242A;
  --line:#222E35; --line-2:#31414A;
  --text:#EAEFF1; --text-2:#A5B4BC; --muted:#6E7E87;
  --accent:#5B9DF9; --accent-2:#8FBFFF; --accent-wash:#13202F; --accent-line:#2A4463;
  --owned:#3FBF8F; --owned-wash:#0E2620; --rented:#D9A24B; --rented-wash:#251C0D;
}

/* The inverse chapter — always the opposite of whatever the page is.
   On the dark-first default it is the printed spec sheet: cold paper,
   graphite ink. Under the light theme it flips to the dark set (below),
   so every theme keeps exactly one strong chapter break instead of
   three near-identical greys with accidental seams between them. */
.band-paper{
  --ground:#E9EDEF; --ground-2:#F3F6F7; --ground-3:#DDE4E7; --ground-deep:#0B1013;
  --line:#CDD6DA; --line-2:#AFBEC5;
  --text:#0B1013; --text-2:#38454C; --muted:#64737B;
  --accent:#1E5FC4; --accent-2:#2C6FD8; --accent-wash:#E1EAF7; --accent-line:#B6CBEA;
  --owned:#136B4F; --owned-wash:#DFEFE9; --rented:#8A5E1E; --rented-wash:#F4EBDA;
  --shadow:0 1px 2px rgba(11,16,19,.05), 0 16px 36px -22px rgba(11,16,19,.28);
  background:var(--ground); color:var(--text); position:relative; overflow:hidden;
}
.band-paper::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--warm) 30%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--warm) 30%, transparent) 1px, transparent 1px);
  background-size:32px 32px; opacity:.75;
  -webkit-mask-image:radial-gradient(110% 80% at 50% 0%, #000 5%, transparent 72%);
          mask-image:radial-gradient(110% 80% at 50% 0%, #000 5%, transparent 72%);
}
.band-paper > .container{position:relative; z-index:1;}

/* …and under the light theme the same band flips dark. */
:root[data-theme="light"] .band-paper{
  --ground:#0B1013; --ground-2:#12191E; --ground-3:#1A242A; --ground-deep:#070B0D;
  --line:#222E35; --line-2:#31414A;
  --text:#EAEFF1; --text-2:#A5B4BC; --muted:#6E7E87;
  --accent:#5B9DF9; --accent-2:#8FBFFF; --accent-wash:#13202F; --accent-line:#2A4463;
  --owned:#3FBF8F; --owned-wash:#0E2620; --rented:#D9A24B; --rented-wash:#251C0D;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.8);
}
/* the draft grid becomes a halftone dot field on the dark flip */
:root[data-theme="light"] .band-paper::before{
  background-image:radial-gradient(var(--text) 1px, transparent 1.2px);
  background-size:14px 14px; opacity:.08;
}

/* ============================================================ 19 · FOUNDER */
.founder-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,4vw,3.75rem); align-items:center;}
@media (max-width:860px){ .founder-grid{grid-template-columns:1fr; gap:2.25rem;} }
.founder-card{
  background:var(--ground-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.founder-card .glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 55% at 88% -8%, color-mix(in srgb,var(--accent) 20%, transparent), transparent 62%);
}
.founder-card .avatar{font-stretch:112%; 
  width:76px; height:76px; border-radius:var(--radius); background:var(--accent-wash);
  color:var(--accent); border:1px solid var(--accent-line); display:grid; place-items:center;
  font-family:var(--font-display); font-weight:600; font-size:2rem; position:relative;
}
.founder-card .nm{font-family:var(--font-display); font-weight:700; font-stretch:112%; font-size:1.5rem; margin-top:1.1rem; position:relative;}
.founder-card .rl{color:var(--muted); font-size:.92rem; margin-top:.25rem; position:relative;}
.chips{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.4rem; position:relative;}
.chip{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; padding:.42em .7em;
  border:1px solid var(--line-2); border-radius:var(--radius-sm); color:var(--text-2); background:var(--ground-3);
}
.stack-line{margin-top:1.4rem; font-family:var(--font-mono); font-size:.8rem; color:var(--muted); line-height:1.8;}

/* ============================================================ 20 · TRACKS & WAYS */
.tracks{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:760px){ .tracks{grid-template-columns:1fr;} }
.track{display:flex; flex-direction:column; background:var(--ground-2); padding:2rem 1.85rem; position:relative;}
.track:last-child{background:var(--ground-3);}
.track .pill{
  align-self:flex-start; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; padding:.4em .8em; border-radius:var(--radius-sm);
  background:var(--accent-wash); color:var(--accent); border:1px solid var(--accent-line); margin-bottom:1.2rem;
}
.track h3{font-size:1.5rem; letter-spacing:-.02em;}
.track .desc{margin-top:.6rem; color:var(--text-2); font-size:1.01rem;}
.track ul{list-style:none; margin:1.3rem 0 0; padding:0; display:flex; flex-direction:column; gap:.7rem;}
.track ul li{display:flex; gap:.6rem; align-items:flex-start; color:var(--text-2); font-size:.96rem;}
.track ul li svg{color:var(--accent); flex:none; margin-top:.2rem;}
.track .price{
  margin-top:auto; padding-top:1.4rem; font-family:var(--font-mono); font-size:.82rem; color:var(--muted);
}
.track .btn{margin-top:1rem; align-self:flex-start;}

.way{
  background:var(--ground-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.7rem; display:flex; gap:1.1rem; transition:background .2s ease, border-color .2s ease;
}
.way:hover{background:var(--ground-3); border-color:var(--line-2);}
.way .tag{font-family:var(--font-mono); font-size:.95rem; color:var(--accent); font-weight:500; flex:none; padding-top:.15rem;}
.way h3{font-size:1.2rem;}
.way p{margin-top:.45rem; color:var(--text-2); font-size:.96rem;}

/* ============================================================ 21 · TESTIMONIALS */
.quote{max-width:880px; margin-inline:auto; text-align:center;}
.quote blockquote{
  font-family:var(--font-display); font-weight:500; font-stretch:105%; font-size:clamp(1.45rem,3vw,2.25rem);
  line-height:1.28; letter-spacing:-.015em; margin:0;
}
.quote .mark{font-family:var(--font-display); font-weight:700; font-size:3.5rem; color:var(--accent); line-height:.6; opacity:.55;}
.quote cite{display:block; margin-top:1.5rem; font-style:normal; color:var(--muted); font-family:var(--font-mono); font-size:.82rem; letter-spacing:.08em;}

.tgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:900px){ .tgrid{grid-template-columns:1fr;} }
.tcard{background:var(--ground-2); padding:1.7rem; display:flex; flex-direction:column; gap:1rem;}
.tcard .metric{
  font-family:var(--font-display); font-weight:600; font-stretch:112%; font-size:1.85rem; color:var(--owned);
  letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums;
}
.tcard blockquote{margin:0; color:var(--text-2); font-size:1rem; line-height:1.58; flex:1;}
.tcard .who{display:flex; align-items:center; gap:.75rem;}
.tcard .who .ava{
  width:40px; height:40px; border-radius:var(--radius); background:var(--accent-wash); color:var(--accent);
  border:1px solid var(--accent-line); display:grid; place-items:center;
  font-family:var(--font-display); font-weight:600; flex:none;
}
.tcard .who .nm{font-weight:700; font-size:.93rem;}
.tcard .who .rl{color:var(--muted); font-size:.8rem;}

/* ============================================================ 22 · FAQ */
details.qa{border-bottom:1px solid var(--line); max-width:78ch;}
details.qa summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.35rem 0; font-family:var(--font-display); font-weight:600;
  font-size:1.18rem; letter-spacing:-.015em; color:var(--text);
}
details.qa summary::-webkit-details-marker{display:none;}
details.qa summary:hover{color:var(--accent);}
details.qa .plus{flex:none; width:22px; height:22px; position:relative; color:var(--accent);}
details.qa .plus::before,details.qa .plus::after{content:""; position:absolute; background:currentColor;}
details.qa .plus::before{left:0; top:50%; width:100%; height:1.5px; transform:translateY(-50%);}
details.qa .plus::after{top:0; left:50%; width:1.5px; height:100%; transform:translateX(-50%); transition:transform .26s, opacity .26s;}
details.qa[open] .plus::after{transform:translateX(-50%) scaleY(0); opacity:0;}
details.qa .ans{padding:0 0 1.45rem; color:var(--text-2); max-width:70ch;}
details.qa .ans p+p{margin-top:.75rem;}

/* ============================================================ 23 · CTA BAND */
.cta-band{
  background:var(--ground-deep); color:var(--text); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(2.5rem,6vw,4.5rem) clamp(1.4rem,5vw,4rem);
  text-align:center; position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(100% 90% at 50% -15%, color-mix(in srgb,var(--accent) 26%, transparent), transparent 62%);
}
.cta-band::after{
  content:""; position:absolute; inset:0; color:var(--text); opacity:.07;
  background-image:radial-gradient(currentColor 1px, transparent 1.2px); background-size:15px 15px;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 25%, #000, transparent 76%);
          mask-image:radial-gradient(75% 75% at 50% 25%, #000, transparent 76%);
}
.cta-band > *{position:relative; z-index:1;}
.cta-band .eyebrow{color:var(--accent-2); justify-content:center;}
.cta-band h2{color:var(--text); font-size:clamp(1.95rem,4.4vw,3.2rem); letter-spacing:-.025em;}
.cta-band p{margin:1.2rem auto 0; max-width:52ch; color:var(--text-2); font-size:1.08rem;}
.cta-band .hero-cta{justify-content:center; margin-top:2.1rem;}
.cta-band .fine{margin-top:1.3rem; font-size:.88rem; color:var(--muted);}
:root[data-theme="light"] .cta-band{
  --ground-2:#12191E; --ground-3:#1A242A; --line:#222E35; --line-2:#31414A;
  --text:#EAEFF1; --text-2:#A5B4BC; --muted:#6E7E87;
  --accent:#5B9DF9; --accent-2:#8FBFFF;
}

/* ============================================================ 24 · PAGE HERO */
.page-hero{padding-top:clamp(2.75rem,6vw,4.5rem); padding-bottom:clamp(2rem,4vw,3rem); position:relative;}
.page-hero .eyebrow{margin-bottom:1.15rem;}
.page-hero h1{font-size:clamp(2.35rem,5vw,4rem); letter-spacing:-.03em; max-width:18ch; font-weight:500;}
.page-hero .lead{margin-top:1.4rem;}
.page-hero .hero-cta{margin-top:1.9rem;}

/* ============================================================ 25 · FORMS */
.form{
  background:var(--ground-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.2rem); box-shadow:var(--shadow);
}
.field{margin-bottom:1.05rem;}
.field label{display:block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--muted); margin-bottom:.45rem;}
.field input,.field textarea,.field select{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--text);
  background:var(--ground-3); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:.82em .95em; transition:border-color .18s, box-shadow .18s;
}
.field textarea{min-height:118px; resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash);
}
.field .hint{font-size:.8rem; color:var(--muted); margin-top:.4rem;}
.form-status{
  margin-top:1rem; padding:.85rem 1rem; border-radius:var(--radius); font-size:.92rem;
  border:1px solid; display:none;
}
.form-status.show{display:block;}
.form-status.ok{color:var(--owned); border-color:color-mix(in srgb,var(--owned) 32%, transparent); background:var(--owned-wash);}
.form-status.err{color:var(--rented); border-color:color-mix(in srgb,var(--rented) 32%, transparent); background:var(--rented-wash);}
.expect{list-style:none; margin:0; padding:0;}
.expect li{display:flex; flex-direction:row; align-items:flex-start; gap:.8rem; padding:.7rem 0; border-bottom:1px solid var(--line); color:var(--text-2);}
.expect li:last-child{border-bottom:0;}
.expect li svg{color:var(--accent); flex:none; margin-top:.15rem;}

/* ============================================================ 26 · SERVICE STACK
   Was a tab strip that kept three of four services at display:none.
   Now all four are in the DOM and on screen, reached by a sticky
   sub-nav — same tidiness, nothing hidden from skimmers or crawlers.
   ------------------------------------------------------------ */
.svc-block{scroll-margin-top:calc(var(--header-h) + 3.5rem);}
.svc-block + .svc-block{margin-top:clamp(2.5rem,5vw,4rem); padding-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--line);}

/* ============================================================ 28 · FOOTER */
.site-footer{background:var(--ground-2); border-top:1px solid var(--line); padding-block:clamp(2.75rem,5vw,4rem) 2.25rem; position:relative;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem;}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr; gap:2.25rem 1.5rem;} }
@media (max-width:480px){ .foot-grid{grid-template-columns:1fr;} }
.foot-brand p{margin-top:.95rem; color:var(--muted); font-size:.94rem; max-width:34ch;}
.foot-brand .btn{margin-top:1.3rem;}
.foot-col h4{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1rem; font-weight:500;
}
.foot-col a,.foot-col span{display:block; color:var(--text-2); font-size:.94rem; margin-bottom:.65rem; transition:color .18s;}
.foot-col a:hover{color:var(--accent);}
.foot-bottom{
  margin-top:2.75rem; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  color:var(--muted); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
}
.theme-toggle{
  background:var(--ground-3); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:.5em .9em; font-size:.72rem; color:var(--text-2); cursor:pointer;
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-mono);
  letter-spacing:.08em; text-transform:uppercase; transition:border-color .18s, color .18s;
}
.theme-toggle:hover{border-color:var(--accent); color:var(--accent);}

/* ============================================================ 29 · PRINT */
@media print{
  .site-header,.mobile-cta,.marquee-wrap,.theme-toggle,.skip-link{display:none !important;}
  body{background:#fff; color:#000;}
  body::after{display:none;}
  a{text-decoration:underline;}
}

/* ============================================================ 30 · THE BUILT SPINE
   Five lettered stages. The last one (Transfer) is the differentiator,
   so it gets the owned-green treatment — the only stage that does.
   ------------------------------------------------------------ */
.built{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(1.75rem,3vw,2.5rem);}
@media (max-width:1000px){ .built{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .built{grid-template-columns:1fr;} }
.stage{background:var(--ground-2); padding:1.5rem 1.3rem 1.6rem; position:relative; transition:background .2s ease;}
.stage:hover{background:var(--ground-3);}
.stage .ltr{font-family:var(--font-display); font-weight:700; font-stretch:118%; font-size:2.5rem; line-height:.85; color:var(--accent);}
.stage .st{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:.95rem;}
.stage h3{font-size:1.14rem; margin-top:.35rem;}
.stage p{font-size:.9rem; margin-top:.5rem; color:var(--text-2); line-height:1.52;}
.stage.transfer{background:var(--ground-3);}
.stage.transfer .ltr{color:var(--owned);}
.stage.transfer .kept{
  display:inline-block; margin-top:.85rem; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--owned);
  border:1px solid color-mix(in srgb,var(--owned) 32%, transparent);
  background:var(--owned-wash); border-radius:var(--radius-sm); padding:.35em .6em;
}
/* five-dot marker showing which stages a service covers */
.stage-dots{display:inline-flex; align-items:center; gap:.32rem; vertical-align:.05em;}
.stage-dots i{width:7px; height:7px; border-radius:50%; background:var(--line-2); display:block;}
.stage-dots i.on{background:var(--accent);}
.stage-dots i.own{background:var(--owned);}
.stage-key{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:.7rem;}

/* ============================================================ 31 · SPEC ROWS
   The tools catalogue. Reads as a parts list: what it replaces, that
   vendor's list price in rented amber, your cost in owned green.
   ------------------------------------------------------------ */
.specs{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--ground-2);}
.spec-hd,.spec-row{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1.4fr) 7.5rem 7.5rem;
  gap:1rem; align-items:center; padding:.95rem 1.2rem;
}
.spec-hd{
  background:var(--ground-3); border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.spec-row{border-bottom:1px solid var(--line); transition:background .18s ease;}
.spec-row:last-child{border-bottom:0;}
.spec-row:hover{background:var(--ground-3);}
.spec-row .nm{font-family:var(--font-display); font-weight:700; font-stretch:108%; font-size:1.06rem; letter-spacing:-.01em;}
.spec-row .nm small{display:block; font-family:var(--font-body); font-weight:400; font-size:.84rem; color:var(--muted); margin-top:.15rem; letter-spacing:0;}
.spec-row .rep{font-family:var(--font-mono); font-size:.8rem; color:var(--text-2);}
.spec-row .was{font-family:var(--font-mono); font-size:.84rem; color:var(--rented); text-decoration:line-through; text-decoration-thickness:1.5px; text-align:right; font-variant-numeric:tabular-nums;}
.spec-row .now{font-family:var(--font-mono); font-size:.84rem; color:var(--owned); text-align:right; font-variant-numeric:tabular-nums; font-weight:500;}
.spec-foot{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; align-items:baseline; padding:1.05rem 1.2rem; background:var(--ground-3); border-top:1px solid var(--line); font-family:var(--font-mono); font-size:.8rem;}
.spec-foot .tot{color:var(--muted);}
.spec-foot .tot b{color:var(--rented); font-weight:500;}
.spec-foot .keep{color:var(--owned); font-weight:500;}
@media (max-width:760px){
  .spec-hd{display:none;}
  .spec-row{grid-template-columns:1fr auto; gap:.35rem .9rem; padding:1.05rem 1rem;}
  .spec-row .nm{grid-column:1/-1;}
  .spec-row .rep{grid-column:1; font-size:.74rem;}
  .spec-row .was,.spec-row .now{text-align:right; font-size:.78rem;}
  .spec-row .was{grid-column:2; grid-row:2;}
  .spec-row .now{grid-column:2; grid-row:3;}
}

/* filter bar */
.filterbar{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.4rem;}
.fbtn{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  background:var(--ground-2); border:1px solid var(--line-2); color:var(--text-2);
  padding:.55em .95em; border-radius:var(--radius); cursor:pointer; transition:all .18s ease;
}
.fbtn:hover{border-color:var(--accent); color:var(--accent);}
.fbtn[aria-pressed="true"]{background:var(--accent-wash); border-color:var(--accent); color:var(--accent);}
.spec-row[hidden]{display:none;}

/* ============================================================ 32 · FLAGSHIP TOOL BLOCK */
.flagship{display:grid; grid-template-columns:var(--split); gap:var(--split-gap); align-items:center;}
.flagship + .flagship{margin-top:clamp(2.5rem,5vw,4rem); padding-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--line);}
@media (max-width:880px){ .flagship{grid-template-columns:1fr; gap:1.75rem;} }
.flagship .no{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:.7rem;}
.flagship h3{font-size:clamp(1.55rem,3vw,2.1rem); letter-spacing:-.02em;}
.flagship p{margin-top:.75rem; color:var(--text-2);}
.flagship .figure{
  margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.4rem 2rem;
}
.flagship .figure div .fv{font-family:var(--font-display); font-weight:600; font-stretch:112%; font-size:1.7rem; color:var(--text); line-height:1; font-variant-numeric:tabular-nums;}
.flagship .figure div .fl{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:.4rem;}

/* ============================================================ 33 · RENT CALCULATOR
   Argues the whole value proposition with the visitor's own numbers.
   ------------------------------------------------------------ */
.calc{display:grid; grid-template-columns:1.15fr .85fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
@media (max-width:840px){ .calc{grid-template-columns:1fr;} }
.calc-pick{background:var(--ground-2); padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column;}
.calc-pick .calc-note{margin-top:auto; padding-top:1.1rem;}
.calc-pick > .h{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem;}
.calc-list{display:grid; grid-template-columns:1fr 1fr; gap:.1rem 1.2rem;}
@media (max-width:620px){ .calc-list{grid-template-columns:1fr;} }
.calc-item{display:flex; align-items:center; gap:.7rem; padding:.52rem 0; cursor:pointer; border-bottom:1px solid var(--line);}
.calc-item:hover .cn{color:var(--text);}
.calc-item input{
  appearance:none; -webkit-appearance:none; width:17px; height:17px; flex:none; margin:0; cursor:pointer;
  border:1px solid var(--line-2); border-radius:3px; background:var(--ground-3); position:relative;
  transition:background .15s, border-color .15s;
}
.calc-item input:checked{background:var(--accent); border-color:var(--accent);}
.calc-item input:checked::after{
  content:""; position:absolute; left:5px; top:2px; width:5px; height:9px;
  border:2px solid #06121F; border-top:0; border-left:0; transform:rotate(42deg);
}
.calc-item .cn{font-size:.93rem; color:var(--text-2); flex:1; transition:color .15s;}
.calc-item .cp{font-family:var(--font-mono); font-size:.78rem; color:var(--rented); font-variant-numeric:tabular-nums;}
.calc-note{font-family:var(--font-mono); font-size:.66rem; color:var(--muted); margin-top:1.1rem; line-height:1.6;}

.calc-out{background:var(--ground-3); padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column;}
.calc-out > .h{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:1.1rem;}
.calc-line{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.62rem 0; border-bottom:1px solid var(--line); font-size:.92rem;}
.calc-line .l{color:var(--text-2);}
.calc-line .v{font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text);}
.calc-line.rent .v{color:var(--rented);}
.calc-line.build .v{color:var(--text);}
.calc-big{margin-top:auto; padding-top:1.3rem;}
.calc-big .cl{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.calc-big .cv{font-family:var(--font-display); font-weight:600; font-stretch:112%; font-size:clamp(2.1rem,5vw,3rem); line-height:1; color:var(--owned); letter-spacing:-.025em; margin-top:.5rem; font-variant-numeric:tabular-nums;}
.calc-big .cs{font-size:.88rem; color:var(--text-2); margin-top:.6rem;}
.calc-big .btn{margin-top:1.2rem; width:100%;}
.calc-empty{color:var(--muted); font-size:.92rem;}

/* ============================================================ 34 · COMPARISON
   Four honest columns. It concedes where SaaS wins — that concession
   is what makes the rest of the table believable.
   ------------------------------------------------------------ */
.vs-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);}
.vs{width:100%; min-width:680px; border-collapse:collapse; background:var(--ground-2); font-size:.92rem;}
.vs th,.vs td{padding:.9rem 1.1rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top;}
.vs thead th{
  background:var(--ground-3); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:500; white-space:nowrap;
}
.vs thead th.mine{color:var(--accent);}
.vs tbody th{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--text-2);
  font-weight:400; width:12rem; background:var(--ground-2);
}
.vs td{color:var(--text-2);}
.vs col.mine,.vs td.mine{background:var(--ground-3);}
.vs td.mine{color:var(--text);}
.vs .y{color:var(--owned); font-weight:600;}
.vs .n{color:var(--rented);}
.vs tr:last-child th,.vs tr:last-child td{border-bottom:0;}
.vs-concede{
  margin-top:1.1rem; padding:.95rem 1.1rem; border:1px solid var(--line-2);
  border-left:2px solid var(--rented); border-radius:var(--radius);
  background:var(--ground-2); font-size:.94rem; color:var(--text-2);
}
.vs-concede b{color:var(--text);}

/* ============================================================ 35 · TIMELINE */
.timeline{list-style:none; margin:0; padding:0; position:relative;}
.timeline::before{content:""; position:absolute; left:5.6rem; top:.7rem; bottom:.7rem; width:1px; background:var(--line);}
@media (max-width:620px){ .timeline::before{left:.35rem;} }
.timeline li{position:relative; display:grid; grid-template-columns:5.6rem 1fr; gap:0 2rem; padding-block:.85rem;}
@media (max-width:620px){ .timeline li{grid-template-columns:1fr; gap:.3rem; padding-left:1.6rem;} }
.timeline .yr{font-family:var(--font-mono); font-size:.78rem; color:var(--muted); text-align:right; padding-top:.15rem; font-variant-numeric:tabular-nums;}
@media (max-width:620px){ .timeline .yr{text-align:left;} }
.timeline .bd{position:relative;}
.timeline .bd::before{
  content:""; position:absolute; left:-2rem; top:.55rem; width:9px; height:9px; border-radius:50%;
  background:var(--ground); border:1px solid var(--accent); transform:translateX(-50%);
}
@media (max-width:620px){ .timeline .bd::before{left:-1.25rem; transform:none;} }
.timeline .bd b{display:block; font-family:var(--font-display); font-weight:700; font-stretch:108%; font-size:1.1rem;}
.timeline .bd p{color:var(--text-2); font-size:.94rem; margin-top:.25rem;}
.timeline li.now .bd::before{background:var(--owned); border-color:var(--owned);}

/* capability list — replaces six padded cards */
.caps{display:grid; grid-template-columns:repeat(2,1fr); gap:0 2.5rem;}
@media (max-width:760px){ .caps{grid-template-columns:1fr;} }
.caps > div{padding:.95rem 0; border-bottom:1px solid var(--line);}
.caps b{font-family:var(--font-display); font-weight:700; font-stretch:108%; font-size:1.06rem; display:block;}
.caps p{color:var(--text-2); font-size:.92rem; margin-top:.25rem;}

/* ============================================================ 36 · STICKY SUBNAV */
.subnav{
  position:sticky; top:var(--header-h); z-index:40; margin-bottom:clamp(1.75rem,3vw,2.5rem);
  background:color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.subnav ul{list-style:none; margin:0; padding:0; display:flex; gap:0; overflow-x:auto; scrollbar-width:none;}
.subnav ul::-webkit-scrollbar{display:none;}
.subnav a{
  display:block; white-space:nowrap; padding:.9rem 1.05rem;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid transparent; margin-bottom:-1px; transition:color .18s, border-color .18s;
}
.subnav a:hover{color:var(--text);}
.subnav a.current{color:var(--accent); border-bottom-color:var(--accent);}

/* ============================================================ 37 · RECEIPTS */
.receipt{display:grid; grid-template-columns:var(--split); gap:var(--split-gap);}
.receipt + .receipt{margin-top:clamp(2.5rem,5vw,4rem); padding-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--line);}
@media (max-width:880px){ .receipt{grid-template-columns:1fr; gap:1.6rem;} }
.receipt .headline{font-family:var(--font-display); font-weight:600; font-stretch:115%; font-size:clamp(2.6rem,6vw,4rem); line-height:.98; letter-spacing:-.03em; color:var(--accent); font-variant-numeric:tabular-nums;}
.receipt .hl-sub{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.8rem; line-height:1.6;}
.receipt .who{margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--line); font-size:.92rem; color:var(--text-2);}
.receipt .who .k{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.2rem;}
.receipt .who > div + div{margin-top:.75rem;}
.rblock + .rblock{margin-top:1.4rem;}
.rblock h4{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:500; margin-bottom:.5rem;}
.rblock p{color:var(--text-2); font-size:1rem;}
.rblock ul{margin:.5rem 0 0; padding-left:1.1rem; color:var(--text-2); font-size:.97rem; display:flex; flex-direction:column; gap:.35rem;}

/* placeholder blocks — visibly unfinished on purpose, so nothing
   unverified ever reads as a real client claim */
.todo{
  border:1px dashed var(--line-2); border-radius:var(--radius); padding:1rem 1.1rem;
  background:repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb,var(--rented) 7%, transparent) 7px 8px);
  font-family:var(--font-mono); font-size:.78rem; color:var(--rented); line-height:1.65;
}
.todo b{display:block; letter-spacing:.14em; text-transform:uppercase; font-size:.62rem; margin-bottom:.4rem; font-weight:500;}

/* ============================================================ 38 · ODDS & ENDS */
.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;
}
/* hero right column: spec panel above, real product shot below —
   the page that sells software should show the software */
.hero-side{display:flex; flex-direction:column;}
.hero-side .shot img{height:210px; object-fit:cover; object-position:top left;}
@media (max-width:920px){ .hero-side .shot img{height:auto;} }
.stat-lead{font-variant-numeric:tabular-nums;}

/* ============================================================ 39 · THE COST CURVE
   The signature moment. A scroll-drawn arc carrying the five BUILT
   letters as plot points — but it is not a decorative semicircle.
   It is the real shape of the pitch: what you pay starts high in
   rented amber and decays to zero in owned green as the curve
   crosses Transfer. The graphic and the argument are the same object.

   At rest the curve is fully drawn; JS only rewinds it when the
   section is still below the fold, so the page never sits blank.
   ------------------------------------------------------------ */
.curve{margin:0 0 clamp(2rem,4vw,3rem); position:relative;}
.curve svg{width:100%; height:auto; display:block; overflow:visible;}

.curve .zero{stroke:var(--line-2); stroke-width:1; stroke-dasharray:2 5;}
.curve .track{fill:none; stroke:var(--line); stroke-width:1.5;}
.curve .fill{
  fill:none; stroke:url(#curveGrad); stroke-width:2.5;
  stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0;
}
.js .curve[data-curve] .fill{transition:stroke-dashoffset .1s linear;}

/* Literal radii, not var(). A custom property does NOT substitute into an
   SVG geometry property — the declaration is dropped and the element silently
   falls back to its r attribute, which is how a lit marker in the tall layout
   ended up shrinking 21px -> 20px instead of growing. */
.curve .cmark circle{fill:var(--ground); stroke:var(--line-2); stroke-width:1.5; r:18px;
  transition:fill .35s ease, stroke .35s ease, r .35s ease;}
.curve[data-mode="tall"] .cmark circle{r:21px;}
.curve .cmark .ltr{
  font-family:var(--font-display); font-weight:700; font-stretch:118%; font-size:23px;
  fill:var(--muted); text-anchor:middle; transition:fill .35s ease;
}
/* NB: no text-anchor here. Each label sets its own as a presentation
   attribute, and a CSS declaration would silently beat it — which is
   exactly what made every label centre on its offset instead of
   starting at it. Same reason the radii below are tokens, not literals. */
.curve .cmark .lbl{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  fill:var(--muted); opacity:0;
  transition:fill .35s ease, opacity .35s ease;
}
.curve .cmark.on circle{stroke:var(--accent); fill:var(--accent-wash); r:20px;}
.curve[data-mode="tall"] .cmark.on circle{r:23px;}
.curve .cmark.on .ltr{fill:var(--accent);}
.curve .cmark.on .lbl{fill:var(--text-2); opacity:1;}
/* the last point is the one that matters — it lands on zero */
.curve .cmark.own.on circle{stroke:var(--owned); fill:var(--owned-wash);}
.curve .cmark.own.on .ltr{fill:var(--owned);}

.curve .axis{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; fill:var(--muted);
}
.curve .axis.hi{fill:var(--rented);}
.curve .axis.lo{fill:var(--owned);}
/* the tall layout has a smaller viewBox, so its type is sized in its
   own units — it renders at roughly the same optical size as the wide one */
.curve[data-mode="tall"] .cmark .ltr{font-size:26px;}
.curve[data-mode="tall"] .cmark .lbl{font-size:13px;}
.curve[data-mode="tall"] .axis{font-size:13px;}
.curve[data-mode="tall"] .cmark .lbl{opacity:1;}
.curve[data-mode="tall"] svg{max-height:78vh; margin-inline:auto;}

/* the stage cards light in step with the curve */
.built .stage{transition:background .3s ease, border-color .3s ease;}
.js .built .stage{opacity:.55; transition:opacity .45s ease, background .3s ease;}
.js .built .stage.on{opacity:1;}
@media (prefers-reduced-motion:reduce){ .js .built .stage{opacity:1;} }

/* ============================================================ 40 · AMBIENT TEXTURE
   Two jobs: stop any band sitting dead flat, and carry a little warmth
   through a site that is otherwise entirely cold.

   The warm tone is its own token, deliberately NOT --rented. Amber
   carries meaning on this site (money you pay someone else) and it
   earns that by appearing at full strength on text. This sits at
   8–14% as atmosphere, so the two never read as the same signal.
   ------------------------------------------------------------ */
:root[data-theme="light"]{ --warm:#B08542; }

/* 40.1 · gold wash — for bands that should feel lit rather than blank */
.tex-warm{position:relative; overflow:hidden;}
.tex-warm::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    /* a fine gold hatch on top of the wash, so it reads as a woven
       surface rather than just a gradient */
    repeating-linear-gradient(58deg, transparent 0 13px,
      color-mix(in srgb, var(--warm) 7%, transparent) 13px 14px),
    radial-gradient(70% 95% at 92% 6%,  color-mix(in srgb, var(--warm) 18%, transparent), transparent 60%),
    radial-gradient(55% 75% at 4% 96%,  color-mix(in srgb, var(--warm) 12%, transparent), transparent 58%);
}
/* fine warm grain over the wash, so it reads as a surface not a gradient */
.tex-warm::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--grain); opacity:.05; mix-blend-mode:var(--grain-blend);
}
.tex-warm > .container{position:relative; z-index:1;}

/* 40.2 · hairline field — for flat raised bands */
.tex-mesh{position:relative; overflow:hidden;}
.tex-mesh::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.75;
  background-image:
    linear-gradient(color-mix(in srgb, var(--warm) 22%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--warm) 22%, transparent) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(85% 75% at 50% 40%, #000, transparent 88%);
          mask-image:radial-gradient(85% 75% at 50% 40%, #000, transparent 88%);
}
.tex-mesh > .container{position:relative; z-index:1;}

/* 40.3 · dot field — for the deepest bands */
.tex-dots{position:relative; overflow:hidden;}
.tex-dots::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  color:var(--text); opacity:.055;
  background-image:radial-gradient(currentColor 1px, transparent 1.2px);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 30%, #000, transparent 84%);
          mask-image:radial-gradient(80% 80% at 50% 30%, #000, transparent 84%);
}
.tex-dots > .container{position:relative; z-index:1;}

/* the page motif used to die at 76% of the viewport, leaving everything
   below it flat — it now carries all the way down, just fainter */
body::before{
  -webkit-mask-image:radial-gradient(150% 130% at 8% 0%, #000 18%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.18) 100%);
          mask-image:radial-gradient(150% 130% at 8% 0%, #000 18%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.18) 100%);
}

/* ============================================================ 41 · NAV DROPDOWN
   Opens on hover AND on focus-within, so it works for a keyboard without
   a click handler. A pseudo-element bridges the gap between the trigger
   and the panel, otherwise the menu closes as the pointer crosses it.
   On mobile it flattens into an indented list inside the burger menu.
   ------------------------------------------------------------ */
.navitem{position:relative; display:flex; align-items:center;}
.navitem > .navlink{display:inline-flex; align-items:center; gap:.35em;}
.navitem .chev{flex:none; transition:transform .2s ease; opacity:.7;}
.has-sub:hover .chev,.has-sub:focus-within .chev{transform:rotate(180deg); opacity:1;}
.has-sub::after{content:""; position:absolute; top:100%; left:0; right:0; height:18px;}

.submenu{
  position:absolute; top:calc(100% + 16px); left:-0.9rem; min-width:20.5rem; z-index:70;
  background:var(--ground-2); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:.4rem;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1; visibility:visible; transform:none;}
.submenu a{
  display:block; padding:.7rem .85rem; border-radius:var(--radius-sm);
  color:var(--text-2); font-size:.95rem; font-weight:600; line-height:1.3;
  transition:background .15s ease, color .15s ease;
}
.submenu a span{
  display:block; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-top:.25rem; font-weight:400;
}
.submenu a:hover,.submenu a:focus-visible{background:var(--ground-3); color:var(--text);}
.submenu a[aria-current="page"]{color:var(--accent); background:var(--accent-wash);}
.submenu .all{
  border-top:1px solid var(--line); border-radius:0; margin-top:.35rem; padding-top:.8rem;
  color:var(--accent); font-size:.86rem; font-family:var(--font-mono);
  letter-spacing:.1em; text-transform:uppercase;
}
.submenu .all:hover{background:transparent; color:var(--accent-2);}

@media (max-width:940px){
  .nav-links.open .navitem{flex-direction:column; align-items:stretch;}
  .nav-links.open .has-sub::after{display:none;}
  .nav-links.open .has-sub .chev{display:none;}
  .nav-links.open .submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    background:transparent; border:0; border-left:1px solid var(--line-2);
    border-radius:0; box-shadow:none; min-width:0;
    margin:.1rem 0 .5rem .25rem; padding:0 0 0 .95rem;
  }
  .nav-links.open .submenu a{padding:.62rem 0; font-size:1rem;}
  .nav-links.open .submenu .all{border-top:0; margin-top:.1rem; padding-top:.45rem;}
}

/* ============================================================ 42 · SERVICE HUB CARDS */
.svc-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:820px){ .svc-cards{grid-template-columns:1fr;} }
.svc-card{
  display:flex; flex-direction:column; background:var(--ground-2);
  padding:1.9rem 1.8rem 1.8rem; position:relative; transition:background .2s ease;
}
.svc-card:hover{background:var(--ground-3);}
.svc-card::after{content:""; position:absolute; left:0; top:0; width:0; height:1px; background:var(--accent); transition:width .3s cubic-bezier(.2,.7,.2,1);}
.svc-card:hover::after{width:100%;}
.svc-card .no{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:.85rem;}
.svc-card h3{font-size:1.5rem; letter-spacing:-.02em;}
.svc-card > p{margin-top:.7rem; color:var(--text-2); font-size:1rem;}
.svc-card .runs{list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.45rem;}
.svc-card .runs li{display:flex; gap:.6rem; align-items:baseline; font-size:.92rem; color:var(--text-2);}
.svc-card .runs li b{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); flex:none; width:4.6rem;}
.svc-card .foot{
  margin-top:auto; padding-top:1.2rem; display:flex; flex-wrap:wrap; gap:.75rem 1.2rem;
  align-items:center; justify-content:space-between; border-top:1px dashed var(--line);
}
.svc-card .saves{font-family:var(--font-mono); font-size:.8rem; color:var(--owned);}

/* ============================================================ 43 · DELIVERABLES
   Split in two on purpose: what happens while the engagement runs, and
   what you are actually handed at the end. The second column is the
   one that matters — it is the Transfer stage, itemised.
   ------------------------------------------------------------ */
.deliver{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:820px){ .deliver{grid-template-columns:1fr;} }
.deliver > div{background:var(--ground-2); padding:1.7rem 1.6rem 1.8rem;}
.deliver > div.keep{background:var(--ground-3);}
.deliver .dh{
  display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1.1rem;
}
.deliver .keep .dh{color:var(--owned);}
.deliver .dh .tag{
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:.28em .5em; font-size:.6rem; color:var(--muted);
}
.deliver .keep .dh .tag{border-color:color-mix(in srgb,var(--owned) 34%,transparent); color:var(--owned); background:var(--owned-wash);}
.deliver ul{list-style:none; margin:0; padding:0;}
.deliver li{
  display:flex; flex-direction:row; align-items:flex-start; gap:.75rem;
  padding:.68rem 0; border-bottom:1px solid var(--line); color:var(--text-2); font-size:.96rem; line-height:1.5;
}
.deliver li:last-child{border-bottom:0;}
.deliver li svg{flex:none; margin-top:.22rem; color:var(--accent);}
.deliver .keep li svg{color:var(--owned);}
.deliver .note{
  margin-top:1.1rem; font-family:var(--font-mono); font-size:.72rem;
  color:var(--muted); line-height:1.65;
}

/* ============================================================ 44 · WHAT I HAVE BUILT
   Used in place of a screenshot on the custom-software page: the
   argument there is the catalogue itself, not one interface.
   ------------------------------------------------------------ */
.builtlist{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:900px){ .builtlist{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .builtlist{grid-template-columns:1fr;} }
/* `> *`, not `> div` — these cells changed from <div> to <a> when the
   catalogue became buyable, and a tag-based selector silently dropped
   every cell's padding and background. */
.builtlist > *{background:var(--ground-2); padding:1.15rem 1.2rem 1.25rem; transition:background .2s ease; display:flex; flex-direction:column;}
.builtlist > *:hover{background:var(--ground-3);}
.builtlist .bfoot{margin-top:auto;}
.builtlist .bn{font-family:var(--font-display); font-weight:700; font-stretch:108%; font-size:1.04rem; letter-spacing:-.01em;}
.builtlist .br{font-family:var(--font-mono); font-size:.7rem; color:var(--muted); margin-top:.3rem; line-height:1.5;}
.builtlist .br b{color:var(--rented); font-weight:400;}
.builtlist .bt{
  display:inline-block; font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:.24em .5em;
}
/* the economics line — this page is the one place a visitor is in buying
   mode, so each tool carries what it kills and what it costs to own */
.builtlist .bp{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  margin-top:.85rem; padding-top:.7rem; border-top:1px dashed var(--line);
  font-family:var(--font-mono); font-size:.76rem; font-variant-numeric:tabular-nums;
}
.builtlist .bp .was{color:var(--rented); text-decoration:line-through; text-decoration-thickness:1.4px;}
.builtlist .bp .now{color:var(--owned); font-weight:500;}
.builtlist .bfoot{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.6rem;}
a.builtcard{display:block; color:inherit;}
a.builtcard:hover .bn{color:var(--accent);}
.builtlist .bn{transition:color .18s ease;}

/* ============================================================ 45 · FORM CONTEXT
   When someone arrives from a "Buy this" or a service CTA, the form says
   what they clicked instead of making them re-explain it. */
.about-chip{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin:-.4rem 0 1.3rem; padding:.6rem .8rem;
  background:var(--accent-wash); border:1px solid var(--accent-line); border-radius:var(--radius);
}
.about-chip .k{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.about-chip .v{font-weight:700; color:var(--accent); font-size:.95rem;}

/* share control under the calculator result */
.calc-share{
  width:100%; margin-top:.6rem; background:transparent; border:1px solid var(--line-2);
  border-radius:var(--radius); padding:.7em 1em; cursor:pointer;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-2); transition:border-color .18s ease, color .18s ease;
}
.calc-share:hover{border-color:var(--accent); color:var(--accent);}

/* ============================================================ 46 · COMING SOON
   The product is in development, so the page says so plainly rather than
   implying you can buy it today.
   ------------------------------------------------------------ */
.soon{
  display:inline-flex; align-items:center; gap:.5em; vertical-align:.1em;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rented); background:var(--rented-wash);
  border:1px solid color-mix(in srgb,var(--rented) 34%,transparent);
  border-radius:999px; padding:.3em .6em; white-space:nowrap;
}
.soon::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--rented);}
.navitem .soon{margin-left:.1rem; font-size:.52rem; padding:.24em .5em;}

/* the four modules that share one balance */
.modules{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:820px){ .modules{grid-template-columns:1fr;} }
.module{background:var(--ground-2); padding:1.8rem 1.7rem 1.9rem; display:flex; flex-direction:column;}
.module .mn{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:.9rem;}
.module h3{font-size:1.38rem; letter-spacing:-.02em;}
.module > p{margin-top:.65rem; color:var(--text-2); font-size:.98rem;}
.module ul{list-style:none; margin:1.1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem;}
.module li{display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--text-2);}
.module li svg{flex:none; margin-top:.2rem; color:var(--accent);}

/* one balance, drawn */
.balance{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:1px; background:var(--line); border:1px solid var(--line); margin-top:1.5rem;
}
@media (max-width:760px){ .balance{grid-template-columns:1fr;} }
.balance > div{background:var(--ground-2); padding:1.7rem 1.6rem;}
.balance .price{background:var(--ground-3);}
.balance .pv{font-family:var(--font-display); font-weight:600; font-stretch:112%; font-size:clamp(2.4rem,5vw,3.4rem); line-height:1; color:var(--owned); letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
.balance .pl{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.7rem;}
.balance .pn{font-size:.9rem; color:var(--text-2); margin-top:.9rem; line-height:1.55;}
.balance .spend{list-style:none; margin:0; padding:0;}
.balance .spend li{display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.95rem; color:var(--text-2);}
.balance .spend li:last-child{border-bottom:0;}
.balance .spend .c{font-family:var(--font-mono); color:var(--accent); font-variant-numeric:tabular-nums;}

/* a fifth module in a two-column grid would sit alone in its row, so the
   last one spans the full width and lays out on the shared site gutter */
.module--wide{
  grid-column:1/-1; display:grid; grid-template-columns:var(--split);
  gap:.4rem var(--split-gap); align-items:start;
}
.module--wide ul{margin-top:0;}
@media (max-width:820px){
  .module--wide{grid-template-columns:1fr; gap:1.1rem;}
}

/* three ways in, not two — the platform is the third */
.tracks--3{grid-template-columns:repeat(3,1fr);}
@media (max-width:1000px){ .tracks--3{grid-template-columns:1fr;} }
.track .pill.soon-pill{background:var(--rented-wash); color:var(--rented); border-color:color-mix(in srgb,var(--rented) 32%,transparent);}