/* ═══════════════════════════════════════════════════════════════
   REVIX — Landing
   Built to docs/design.md v1.0 (+ §11 addendum).

   DIRECTION — refined brutalism, automotive technical drawing.

   Structural honesty is the whole idea, and it is not decoration:
   Revix's product promise is that nothing is hidden — no hidden
   price, no hidden markup, no hidden identity. Brutalism's exposed
   structure says that before a word is read. So the grid is visible,
   containers have hard edges, shadows have zero blur, and labels are
   set in mono like instrument readouts.

   What we take from brutalism: exposed grid, hard containers,
   zero-blur offset shadows, structural mono labels, chunky display.
   What we leave: clashing neon, hostile density, radius-0 controls.

   THESIS (design.md §1) — kinetic everywhere except money and
   safety, where it goes quiet, slow, precise. The page runs dark
   and hard-edged, then opens into a LIGHT CHAPTER (how it works +
   trust & safety): white cards, soft radius, generous air, almost
   no motion. It closes back to dark. The tonal switch happens at
   exactly the moment the copy starts talking about money and who
   is coming to your car.

   ABSENT ON PURPOSE — glow blobs, pulsing pills, icons in tinted
   bubbles, gradient text, stacked blurred shadows, large-area
   backdrop-filter (a paint cost we can't spend on low-end Android —
   design.md §7). Frosted glass appears once, on the sticky nav,
   which genuinely floats over content and is small and static.
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   TYPE — self-hosted, so the page renders the same everywhere.

   Declaring a font-family without loading it delivers whatever the
   device happens to have: Roboto on Android (86% of this market),
   SF Pro on Mac, Segoe on Windows. Three designs, one stylesheet.
   design.md §3.2 mandates Inter, so Inter is what ships.

   ARCHIVO carries a real wdth axis (62–125). That is the whole
   reason it is here — Inter has no width axis, so the condensed
   display density this page has been reaching for is structurally
   impossible in it. font-stretch does the work, not fake scaling.

   Run ./fetch-fonts.sh once. When this ports into revix-web,
   next/font replaces all of this (stack.md §2.2).
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Inter';
  src:url('fonts/inter-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Fallback metrics matched to Inter so the swap doesn't shift layout */
@font-face{
  font-family:'Inter-fallback';
  src:local('Roboto'),local('Segoe UI'),local('Helvetica Neue'),local('Arial');
  size-adjust:107%;
  ascent-override:90%;
  descent-override:22%;
  line-gap-override:0%;
}

:root{
  --crimson:#DC2626;  --crimson-deep:#991B1B;
  --charcoal:#111010;  --off-white:#F0EEEE;
  --bg-light:#F8FAFC;  --card:#F1F5F9;
  --muted:#64748B;     --muted-light:#94A3B8;
  --success:#16A34A;  --success-deep:#15803D;
  --progress:#F59E0B; --progress-deep:#D97706;
  --raised:#191717;   --border-light:#E2E8F0;
  --white:#FFFFFF;

  --rule:rgba(240,238,238,.08);
  --rule-2:rgba(240,238,238,.16);
  --rule-3:rgba(240,238,238,.32);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  --s20:80px; --s24:96px; --s32:128px;

  /* Components keep their design.md §3.3 radii. Structural panels
     are hard-edged — they are layout, not cards. See §11.7. */
  --r-btn:12px; --r-card:16px;

  /* Zero-blur offset shadow. The brutalist signature. */
  --hard:8px 8px 0 var(--crimson);
  --hard-sm:5px 5px 0 var(--crimson);
  --shadow:0 28px 70px rgba(0,0,0,.5);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:300ms;

  /* ── Type scale — design.md §3.2, scaled ~12% for web as §3.2 directs.
     Nine tokens. Every font-size on the page resolves to one of them. ── */
  --t-display:clamp(50px,10.4vw,116px);
  --t-h1:31px;
  --t-h2:clamp(32px,4.6vw,62px);
  --t-h3:20px;
  --t-body-l:19px;
  --t-body:17px;
  --t-caption:14px;
  --t-micro:12px;
  --t-figure:clamp(40px,4vw,56px);

  /* Paired leading */
  --lh-display:.84; --lh-h1:1.22; --lh-h2:.92; --lh-h3:1.35;
  --lh-body-l:1.55; --lh-body:1.65; --lh-caption:1.5; --lh-micro:1.35;

  /* Tracking — three values, replacing fifteen ad-hoc ones.
     --track-micro is design.md §3.2's single tracked role. */
  --track-micro:.06em;
  --track-tight:-.02em;
  --track-display:-.035em;   /* retuned for Archivo — Inter wanted -.052em */

  /* Display width. Inter cannot do this; it is why Archivo is here. */
  --wd-display:79%;

  --bay:1300px;
  --ui:'Inter','Inter-fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Archivo','Inter','Inter-fallback',system-ui,sans-serif;
  /* Utility face for labels and data — design.md §11.7. System stack,
     zero download, and it reads as instrumentation rather than UI. */
  --mono:ui-monospace,'SF Mono',SFMono-Regular,'Roboto Mono',Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--ui);font-size:var(--t-body);font-weight:400;background:var(--charcoal);color:var(--off-white);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}

body::after{
  content:'';position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.num,.f__i,.dial__eta{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

svg use,[class*='__i']>svg,.tick__set svg,.offer dt svg,.who__seal svg,.tile__i svg{
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s4);top:-100px;z-index:300;background:var(--crimson);color:var(--off-white);padding:var(--s3) var(--s4);font-size:var(--t-body);font-weight:600;transition:top 160ms var(--ease)}
.skip:focus{top:var(--s4)}
:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
.trust :focus-visible{outline-color:var(--crimson-deep)}

/* ── shell + exposed grid ─────────────────────────────────── */
.bay{position:relative;width:100%;max-width:var(--bay);margin-inline:auto;padding-inline:var(--s6)}
@media(min-width:900px){.bay{padding-inline:var(--s12)}}

/* Structure made visible — the brutalist move, kept to a whisper */
.rules{position:fixed;inset:0;z-index:0;pointer-events:none;display:none}
.rules span{position:absolute;top:0;bottom:0;width:1px;background:var(--rule)}
/* Aligned to the .rail split so the rules read as the actual grid the
   content sits on, not as wallpaper. */
.rules span:nth-child(1){left:calc(50% - (var(--bay)/2) + var(--s12))}
.rules span:nth-child(2){left:calc(50% - (var(--bay)/2) + var(--s12) + ((var(--bay) - (var(--s12)*2)) * .383))}
.rules span:nth-child(3){left:50%}
.rules span:nth-child(4){left:calc(50% + (var(--bay)/2) - var(--s12) - ((var(--bay) - (var(--s12)*2)) * .19))}
.rules span:nth-child(5){left:calc(50% + (var(--bay)/2) - var(--s12))}
@media(min-width:1100px){.rules{display:block}}

.sect{position:relative;z-index:1;padding-block:var(--s24);border-top:1px solid var(--rule-2)}
@media(min-width:900px){.sect{padding-block:var(--s32)}}

/* ── THE editorial pattern, used by every content section ──
   Sticky header rail left, content stack right. One pattern applied
   consistently is what removes the dead right-hand column and makes
   the page feel composed rather than assembled. */
.rail{display:grid;gap:var(--s12)}
@media(min-width:1000px){
  .rail{grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);gap:var(--s16);align-items:start}
  .rail__h{position:sticky;top:104px}
  /* Mirrored rail — the header crosses to the right. Alternating down
     the page stops the eye settling into one gutter and gives the
     long scroll a rhythm it didn't have. */
  .rail--flip{grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr)}
  .rail--flip .rail__h{order:2}
  .rail--flip>:not(.rail__h){order:1}
}

/* ── type ─────────────────────────────────────────────────── */
.h2{font-family:var(--display);font-size:var(--t-h2);line-height:var(--lh-h2);font-weight:900;font-stretch:var(--wd-display);letter-spacing:var(--track-display);text-transform:uppercase;max-width:17ch;text-wrap:balance}
.h2--dark{color:var(--charcoal)}

/* Mono labels — instrument readouts, not UI chrome */
.tag{display:flex;align-items:center;gap:var(--s3);font-family:var(--mono);font-size:var(--t-caption);font-weight:700;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted-light);margin-bottom:var(--s6)}
.tag__sep{width:24px;height:1px;background:var(--rule-3);flex:none}
.tag--plain{display:block}
.rail__h .h2{margin-bottom:var(--s6)}
.rail__lead{font-size:var(--t-body-l);font-weight:400;line-height:var(--lh-body-l);color:var(--muted-light);max-width:36ch}

/* ── buttons ──────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s6);border:1px solid transparent;border-radius:var(--r-btn);font-size:var(--t-caption);font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform 140ms var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--fill{background:var(--crimson);color:var(--off-white)}
.btn--fill:hover{background:var(--crimson-deep)}
.btn--fill::after{content:'';position:absolute;inset:0;transform:translateX(-101%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transition:transform 620ms var(--ease-out)}
.btn--fill:hover::after{transform:translateX(101%)}
.btn--line{border-color:var(--rule-2);color:var(--off-white)}
.btn--line:hover{border-color:var(--off-white)}
.btn--sm{padding:0 var(--s4)}
.btn--lg{min-height:56px;padding:0 var(--s8);font-size:var(--t-body)}
.btn--wide{width:100%}

/* ── nav ──────────────────────────────────────────────────── */
/* The one place frosted glass is honest: small, static, genuinely
   floating over scrolling content. */
.nav{position:sticky;top:0;z-index:100;background:rgba(17,16,16,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease)}
.nav.is-stuck{border-bottom-color:var(--rule-2)}
.nav__prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--crimson);transition:width 90ms linear}
.nav__in{display:flex;align-items:center;gap:var(--s8);height:76px}
.mark{display:inline-flex;align-items:center}
.mark:hover .mark--f{margin-bottom:var(--s5)}
.nav__links{display:none;gap:var(--s6);margin-left:auto}
.nav__links a{position:relative;font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted);padding-block:var(--s2);transition:color var(--dur) var(--ease)}
.nav__links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--crimson);transition:width var(--dur) var(--ease)}
.nav__links a:hover{color:var(--off-white)}
.nav__links a:hover::after{width:100%}
.nav__cta{margin-left:auto}
@media(min-width:1080px){.nav__links{display:flex}.nav__cta{margin-left:0}}

/* ═══════════════════════════════════════════════════════════════
   BRAND — from assets/Revix_Logo_*.png

   The mark is a tachometer: crimson arc sweep, needle, toothed gear
   pivot, 0 / MAX annotation, KM/H at the centre. That device is now
   the organising motif of the page — the hero gauge is the logo,
   running live, and the crimson rule under the wordmark becomes the
   section divider.
   ═══════════════════════════════════════════════════════════════ */

.mark__img{height:34px;width:auto;transition:opacity var(--dur) var(--ease)}
.mark:hover .mark__img{opacity:.82}
.mark--f .mark__img{height:46px}

/* The crimson rule from the lockup, reused as a structural divider */
/* Section divider — the crimson rule from the logo lockup, broken by
   the mark itself. Marks the entry and exit of the light chapter. */
.divider{position:relative;height:2px;background:var(--crimson)}
.divider__seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:56px;height:56px;background:var(--charcoal);border-radius:50%}
.divider__seal svg{width:30px;height:30px;fill:none}
.trust+.divider .divider__seal{background:var(--card)}

/* ── instrument detail on the hero gauge ── */
/* transform-origin belongs on the <g> the JS actually transforms.
   On the path it did nothing, so the needle swung around the SVG
   origin instead of the dial centre. */
.dial__needle{transform-origin:120px 120px;transition:transform 1100ms var(--ease-out)}
.dial__needle path{fill:var(--crimson);stroke:none}
.dial__hub circle{fill:none;stroke:var(--crimson);stroke-width:2.2;opacity:.85}
.dial__hub circle:last-child{stroke-width:1.4}
.dial__ann{fill:var(--muted);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:var(--track-micro);text-anchor:middle}
.dial__ann--max{fill:var(--crimson)}
/* Unreadable once the dial is an inset instrument — the arc carries it alone. */
.gauge .dial__ann,.gauge .dial__hub{display:none}

/* ═══════════════════════════════════════════════════════════════
   CINEMATIC LAYER

   Three devices, all restrained: a vignette that seats the page in
   its own frame, a scroll dolly on the hero, and staged reveal
   timing. Nothing pulses, nothing floats, nothing loops.
   ═══════════════════════════════════════════════════════════════ */

.vig{
  position:fixed;inset:0;z-index:190;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%,transparent 52%,rgba(0,0,0,.30) 100%);
}

/* Hero recedes as you leave it — a dolly, not a fade-out */
.hero__in{transform-origin:50% 30%;will-change:transform,opacity}

/* Longer, staged entrance. Cinematic timing is slow timing. */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out)}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;z-index:1;padding-block:var(--s16) var(--s16);overflow:hidden}
@media(min-width:900px){.hero{padding-top:var(--s20)}}
.px{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.px>*{position:absolute;will-change:transform}
.px__grid{inset:-10% 0 0;background-image:linear-gradient(to right,var(--rule) 1px,transparent 1px),linear-gradient(to bottom,var(--rule) 1px,transparent 1px);background-size:76px 76px;-webkit-mask-image:radial-gradient(130% 95% at 68% 0%,#000 0%,transparent 74%);mask-image:radial-gradient(130% 95% at 68% 0%,#000 0%,transparent 74%)}
.px__car{left:50%;bottom:2%;width:min(1180px,150%);transform:translateX(-50%);opacity:.5}
.car__body path,.car__wheel circle{fill:none;stroke:var(--rule-2);stroke-width:1.25}
.car__wheel circle{stroke:var(--rule)}
.car__dim path,.car__tick path{fill:none;stroke:var(--rule);stroke-width:1}
.px__wash{inset:auto 0 0;height:52%;background:linear-gradient(to bottom,transparent,var(--charcoal) 78%)}

.hero__in{position:relative;display:grid;gap:var(--s16);padding-bottom:var(--s16)}
.hero__h{font-family:var(--display);font-size:var(--t-display);line-height:var(--lh-display);font-weight:800;font-stretch:var(--wd-display);letter-spacing:var(--track-display);text-transform:uppercase;margin-bottom:var(--s8)}
.hero__h--alt{color:var(--crimson);display:block}
.hero__sub{font-size:var(--t-body-l);font-weight:400;line-height:var(--lh-body-l);color:var(--muted-light);max-width:40ch;margin-bottom:var(--s8)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s10)}
.stores__note{display:block;font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}
.stores__row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.store{display:inline-flex;align-items:center;gap:var(--s3);min-height:52px;padding:0 var(--s4) 0 var(--s3);border:1px solid var(--rule-2);color:var(--muted-light);transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease)}
.store:hover{border-color:var(--rule-3);color:var(--off-white);background:rgba(240,238,238,.03)}
.store__g{width:22px;height:22px;fill:currentColor;stroke:none;flex:none}
.store__t{display:flex;flex-direction:column;line-height:1.15;font-size:var(--t-caption);font-weight:600}
.store__t em{font-style:normal;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted);margin-bottom:2px}

/* ── gauge ── */
.gauge{position:relative;background:linear-gradient(168deg,var(--raised),var(--charcoal));border:1px solid var(--rule-2);border-radius:var(--r-card);padding:var(--s6);box-shadow:var(--shadow);max-width:410px;width:100%;justify-self:center;transition:border-color var(--dur) var(--ease)}
.gauge:hover{border-color:var(--rule-3)}
.gauge::before{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,rgba(240,238,238,.3),transparent)}
.gauge__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--s4);border-bottom:1px solid var(--rule);margin-bottom:var(--s6)}
.gauge__ref{font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);color:var(--muted)}
.gauge__state{font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--progress);transition:color var(--dur) var(--ease)}
.gauge__state.is-done{color:var(--success)}
.gauge__dial{position:relative;display:grid;place-items:center;flex:none}
.dial{width:132px;height:auto;overflow:visible}
.dial__ticks line{stroke:var(--rule-2);stroke-width:1.5;stroke-linecap:round;transition:stroke 500ms var(--ease-out)}
.dial__ticks line.on{stroke:var(--progress)}
.dial__ticks line.on-done{stroke:var(--success)}
.dial__track{fill:none;stroke:var(--rule);stroke-width:2}
.dial__sweep{fill:none;stroke:url(#sweep);stroke-width:3;stroke-linecap:round;transform:rotate(-90deg) scaleX(-1);transform-origin:120px 120px;transition:stroke-dashoffset 1100ms var(--ease-out),stroke var(--dur) var(--ease)}
.dial__sweep.is-done{stroke:url(#sweepDone)}
.dial__head{fill:var(--progress);stroke:none;transition:fill var(--dur) var(--ease),transform 1100ms var(--ease-out);transform-origin:120px 120px}
.dial__head.is-done{fill:var(--success)}
.dial__read{position:absolute;display:grid;place-items:center;text-align:center}
.dial__eta{display:block;font-family:var(--display);font-size:var(--t-h1);font-weight:800;font-stretch:var(--wd-display);letter-spacing:var(--track-display);line-height:1}
.dial__unit{font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted);margin-top:var(--s1)}
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.mini li{position:relative;padding-top:var(--s3);font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted);transition:color var(--dur) var(--ease)}
.mini li::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--rule-2);transition:background var(--dur) var(--ease)}
.mini li.on{color:var(--off-white)}
.mini li.on::before{background:var(--progress)}
.mini li.on-done::before{background:var(--success)}
/* ── who is coming ──
   The mechanic is the subject of this card, not the clock. The dial
   was the whole figure once; it is now the instrument in the corner
   that the identity is measured against. */
.gauge__who{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6)}
.who{display:flex;align-items:center;gap:var(--s4);min-width:0}
.who__i{display:grid;place-items:center;width:64px;height:64px;flex:none;background:var(--crimson-deep);font-family:var(--mono);font-size:var(--t-body);font-weight:600;letter-spacing:var(--track-micro)}
.who__id{min-width:0}
.who b{display:block;font-family:var(--display);font-size:var(--t-h3);font-weight:800;font-stretch:var(--wd-display);letter-spacing:var(--track-display);text-transform:uppercase;line-height:1.05;margin-bottom:var(--s2)}
.who__seal{display:inline-flex;align-items:center;gap:var(--s1);font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--success);flex:none}
.who__seal svg{width:14px;height:14px}

/* Rating, jobs, distance — the three figures a customer actually
   reads before a stranger arrives. Exposed grid, same as .spec. */
.who__stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:var(--s6)}
.who__stats>div{padding:var(--s4) 0 var(--s4) var(--s4)}
.who__stats>div+div{border-left:1px solid var(--rule)}
.who__stats dd{font-family:var(--display);font-size:var(--t-h3);font-weight:800;font-stretch:var(--wd-display);letter-spacing:var(--track-display);line-height:1;margin-bottom:var(--s2)}
.who__stats dd span{font-family:var(--mono);font-size:var(--t-micro);font-weight:600;color:var(--muted);margin-left:2px}
.who__stats dt{font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted)}
@media(min-width:1000px){.hero__in{grid-template-columns:1.12fr .88fr;align-items:center;gap:var(--s20);padding-bottom:var(--s20)}.gauge{justify-self:end}}

/* Spec strip — hard cells, exposed grid */
.spec{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--rule-2)}
.spec__i{padding:var(--s5) var(--s5);border-bottom:1px solid var(--rule-2);transition:background var(--dur) var(--ease)}
.spec__i:nth-child(odd){border-right:1px solid var(--rule-2)}
.spec__i:nth-last-child(-n+2){border-bottom:0}
.spec__i:hover{background:rgba(240,238,238,.03)}
.spec dt{font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.spec dd{font-size:var(--t-body);font-weight:600;letter-spacing:var(--track-tight)}
@media(min-width:820px){
  .spec{grid-template-columns:repeat(4,1fr)}
  .spec__i{border-bottom:0;border-right:1px solid var(--rule-2)}
  .spec__i:last-child{border-right:0}
}

/* ═══════════ TICKER ═══════════ */
.tick{position:relative;z-index:1;padding-block:var(--s5);border-block:1px solid var(--rule-2);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.tick__row{display:flex;width:max-content;animation:slide 46s linear infinite}
.tick:hover .tick__row{animation-play-state:paused}
.tick__set{display:flex;align-items:center;gap:var(--s10);padding-right:var(--s10)}
.tick__set li{display:flex;align-items:center;gap:var(--s3);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color var(--dur) var(--ease)}
.tick__set li:hover{color:var(--off-white)}
.tick__set svg{width:20px;height:20px;flex:none;color:var(--rule-3);transition:color var(--dur) var(--ease)}
.tick__set li:hover svg{color:var(--crimson)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ═══════════ SHARED — icon tile + stack rows ═══════════
   The pattern the flow, fears and offers all share: a hard-edged
   square carrying the mark, content beside it. Icon one side, text
   the other, at every breakpoint. */
.stack{border-top:1px solid var(--rule-2)}
.row{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:start;padding:var(--s6) 0;border-bottom:1px solid var(--rule-2);transition:background var(--dur) var(--ease)}
.row:hover{background:rgba(240,238,238,.022)}

.tile{position:relative;display:grid;place-content:center;justify-items:center;gap:var(--s2);width:76px;height:76px;flex:none;border:1px solid var(--rule-2);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.tile__n{font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);color:var(--muted);transition:color var(--dur) var(--ease)}
.tile__i{color:var(--rule-3);transition:color var(--dur) var(--ease)}
.tile__i svg{width:26px;height:26px}
/* Hard offset shadow on hover. Zero blur — the brutalist signature. */
.row:hover .tile{border-color:var(--crimson);box-shadow:var(--hard-sm);transform:translate(-2px,-2px)}
.row:hover .tile__i{color:var(--crimson)}
.row:hover .tile__n{color:var(--off-white)}

.row__b h3{font-size:var(--t-h3);line-height:1.3;font-weight:700;letter-spacing:var(--track-tight);margin-bottom:var(--s2)}
.row__b p{font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);color:var(--muted-light);max-width:54ch}

@media(min-width:700px){
  .row{gap:var(--s8);padding:var(--s8) 0}
  .tile{width:104px;height:104px;gap:var(--s3)}
  .tile__i svg{width:32px;height:32px}
  .row__b h3{font-size:var(--t-h3);margin-bottom:var(--s3)}
}

/* ═══════════ PROBLEM ═══════════ */
.pull{font-size:clamp(19px,1.9vw,24px);line-height:1.45;font-weight:500;letter-spacing:var(--track-tight);max-width:40ch;padding-left:var(--s5);border-left:2px solid var(--crimson);margin-top:var(--s10)}

@media(min-width:700px){}

/* ═══════════════════════════════════════════════════════════════
   THE LIGHT CHAPTER — sections 03 and 04.

   The page runs dark and hard-edged either side of this. Here it
   opens out: light ground, white cards, soft radius, generous air,
   almost no motion. That switch IS design.md §1's thesis — the
   product goes quiet exactly where money and safety live, and the
   page does the same thing at the same moment.

   Cards use --r-card (16) straight from §3.3, so this is the one
   place the product's own component language appears verbatim.
   ═══════════════════════════════════════════════════════════════ */

.tag--crimson{color:var(--crimson)}
.h2--wide{max-width:20ch}

/* ── HOW: the full-bleed checkerboard ──────────────────────────
   3 rows × 2 columns. Text panels light, instrument panels
   charcoal, alternating on both axes — col 1 runs L·D·L and col 2
   runs D·L·D, so EVERY edge in the grid is already a tonal edge.
   That is why there is not one border in here.

   Zero gap, radius 0. These are structural panels, not cards —
   §11.7 reserves radius for the product's own components, which is
   why trust keeps --r-card and this section does not.

   The grid sits OUTSIDE .bay so it is full-bleed with no negative-
   margin breakout. The measure is restored inside the panel: a
   panel is exactly half the page, so the distance from the page
   edge to the .bay gutter is 100% - (bay/2 - s12), which lands the
   step copy on the same vertical as the section header above it,
   to the pixel, at every width. ── */
.how{background:var(--bg-light);color:var(--charcoal);border-top:0;padding-block:var(--s24) 0}
.how__h{margin-bottom:var(--s16)}
.how .tag{color:var(--crimson)}

.cb{display:grid;width:100%}
.cb__p{min-width:0}
.cb__t{display:grid;align-content:center;background:var(--bg-light);color:var(--charcoal);padding:var(--s16) var(--s6)}
.cb__g{display:flex;align-items:center;justify-content:center;background:var(--charcoal);padding:var(--s12) var(--s6)}

.cb__n{display:flex;align-items:center;gap:var(--s3);font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);color:var(--crimson);margin-bottom:var(--s6)}
.cb__n::after{content:'';width:var(--s6);height:1px;background:var(--crimson);flex:none}
.cb__h{font-family:var(--display);font-size:var(--t-h2);line-height:var(--lh-h2);font-weight:900;font-stretch:var(--wd-display);letter-spacing:var(--track-display);text-transform:uppercase;color:var(--charcoal);max-width:13ch;text-wrap:balance;margin-bottom:var(--s5)}
.cb__b{font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);color:var(--muted);max-width:44ch}
.cb__more{display:inline-flex;align-self:start;align-items:center;gap:var(--s2);margin-top:var(--s6);font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--crimson);border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease)}
.cb__more:hover{border-bottom-color:var(--crimson)}
.cb__more span{font-size:var(--t-caption);line-height:1}

@media(min-width:900px){
  .how{padding-block:var(--s32) 0}
  .cb{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Explicit placement, all six. Row 2 is the only crossover, and it
     is placed rather than reordered so the DOM can stay text-first —
     which is what keeps the mobile stack alternating L·D·L·D·L·D. */
  .cb>:nth-child(1){grid-area:1/1}
  .cb>:nth-child(2){grid-area:1/2}
  .cb>:nth-child(3){grid-area:2/2}   /* text 02  — crosses right */
  .cb>:nth-child(4){grid-area:2/1}   /* instr 02 — crosses left  */
  .cb>:nth-child(5){grid-area:3/1}
  .cb>:nth-child(6){grid-area:3/2}

  .cb__t{padding-block:var(--s24)}
  .cb__g{padding-block:var(--s20);padding-inline:var(--s12)}

  /* Outer edge = the .bay gutter, exactly. Percentage padding on a
     grid item resolves against its grid area, and the columns are
     1fr 1fr, so there is no circularity. minmax(0,1fr) above is
     load-bearing: a bare 1fr would let a long word widen a column
     via min-width:auto and knock this alignment out. */
  .cb__t--l{padding-left:max(var(--s12),calc(100% - (var(--bay)/2 - var(--s12))));padding-right:var(--s16)}
  .cb__t--r{padding-right:max(var(--s12),calc(100% - (var(--bay)/2 - var(--s12))));padding-left:var(--s16)}
}
@media(min-width:1000px){.how__h{margin-bottom:var(--s20)}}

/* ── the step instruments ──────────────────────────────────────
   Three drawn mechanisms, one per step, in the same register as the
   approach gauge and the corridor plot: stroke-only line work on
   charcoal over a whispered grid. No photography — IMAGES.md §4.

   Only three properties ever animate: stroke-dashoffset, opacity
   and transform. All three stay off the main thread, which is the
   whole budget on the hardware this market runs (design.md §7).

   Two primitives carry the system:
     .ins__f — fades in.   .ins__d — draws in, --len = path length.
   Each is suffixed --1/--2/--3 for its stage, and takes an optional
   --d for its place in a stagger. --len must be rounded UP: an
   overshoot finishes the draw a shade early and is invisible; an
   undershoot leaves a permanent gap in the line. Re-measure with
   path.getTotalLength() if you edit a `d`.

   Font sizes inside the SVG are raw px, matching .plot__nodes and
   .plot__lbl — --t-micro is 12px, which is enormous in a 360-unit
   viewBox. ── */
.ins{width:100%;max-width:440px;height:auto}
.ins__grid path{fill:none;stroke:var(--rule);stroke-width:1}
.ins text{font-family:var(--mono);font-weight:600;letter-spacing:var(--track-micro)}
.ins__lbl{font-size:9px;fill:var(--muted)}
.ins__col{font-size:8px;fill:var(--rule-3);text-anchor:middle}

.ins__f{opacity:0;transition:opacity 620ms var(--ease-out),fill 620ms var(--ease-out),stroke 620ms var(--ease-out),color 620ms var(--ease-out);transition-delay:calc(var(--d,0) * 70ms)}
.ins.s1 .ins__f--1,.ins.s2 .ins__f--2,.ins.s3 .ins__f--3{opacity:1}

.ins__d{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 900ms var(--ease-out),stroke 620ms var(--ease-out);transition-delay:calc(var(--d,0) * 70ms)}
.ins.s1 .ins__d--1,.ins.s2 .ins__d--2,.ins.s3 .ins__d--3{stroke-dashoffset:0}

/* 1 · service picker */
.ins__tile{color:var(--rule-3)}
.ins__tile rect{fill:none;stroke:var(--rule-2);stroke-width:1;transition:stroke 620ms var(--ease-out)}
.ins.s2 .ins__tile--on{color:var(--crimson)}
.ins.s2 .ins__tile--on rect{stroke:var(--crimson)}
.ins__reg{stroke:var(--crimson);stroke-width:1.5}
.ins__rule{stroke:var(--rule-2);stroke-width:1}
.ins__ngn{font-size:13px;fill:var(--muted)}
.ins__blk{fill:var(--muted-light)}

/* 2 · mechanic comparison */
.ins__row{opacity:0;transition:opacity 520ms var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)}
.ins.s1 .ins__row{opacity:1}
.ins__row rect{fill:none;stroke:var(--rule-2);stroke-width:1;transition:stroke 620ms var(--ease-out)}
.ins__row text{font-size:10px;fill:var(--muted-light);transition:fill 620ms var(--ease-out)}
.ins.s2 .ins__row--on rect{stroke:var(--crimson)}
.ins.s2 .ins__row--on text{fill:var(--off-white)}
.ins__bar{fill:var(--crimson);transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform 900ms var(--ease-out)}
.ins.s2 .ins__bar{transform:scaleY(1)}
.ins__seal path{stroke:var(--success);stroke-width:1.6}

/* 3 · escrow */
.ins__box{stroke:var(--progress);stroke-width:1.5}
.ins__check{stroke:var(--progress);stroke-width:3}
.ins__st{font-size:9px}
.ins__st--a{fill:var(--progress)}
.ins__st--b{fill:var(--success);opacity:0;transition:opacity 620ms var(--ease-out)}
.ins__amt{fill:var(--muted-light)}
.ins__seg{fill:var(--rule-2);transition:fill 620ms var(--ease-out)}
.ins__step{font-size:9px;fill:var(--muted);transition:fill 620ms var(--ease-out)}
.ins.s1 .ins__step--1,.ins.s2 .ins__step--2,.ins.s3 .ins__step--3{fill:var(--off-white)}
.ins.s1 .ins__seg--1,.ins.s2 .ins__seg--2{fill:var(--progress)}
/* These four must stay LAST: same specificity as the amber rules
   above, so the green release wins on source order alone. */
.ins.s3 .ins__seg{fill:var(--success)}
.ins.s3 .ins__box,.ins.s3 .ins__check{stroke:var(--success)}
.ins.s3 .ins__amt{fill:var(--off-white)}
.ins.s3 .ins__st--a{opacity:0}
.ins.s3 .ins__st--b{opacity:1}

/* ── TRUST: deeper light ground, headline left, 2×2 right ── */
.trust{background:var(--card);color:var(--charcoal);border-top:0;padding-block:var(--s24)}
@media(min-width:900px){.trust{padding-block:var(--s32)}}
.trust .rail__lead{color:var(--muted);margin-top:var(--s5)}
.trust__foot{margin-top:var(--s8);font-size:var(--t-caption);color:var(--muted)}

/* ── the card ── */
.cards{display:grid;gap:var(--s5)}
.card{
  position:relative;z-index:0;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-card);
  padding:var(--s8);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:border-color 420ms var(--ease-out),box-shadow 420ms var(--ease-out),transform 420ms var(--ease-out);
}
/* Hover — the numeral is the light source. Behind it, a crimson halo
   drawn with box-shadow: it only ever paints outside the border box,
   so it can't wash the card face, and it's cheaper than a blur. */
.card:hover{
  border-color:rgba(220,38,38,.26);
  box-shadow:0 0 0 1px rgba(220,38,38,.10),0 12px 40px -8px rgba(220,38,38,.32),0 4px 14px rgba(15,23,42,.05);
  transform:translateY(-2px);
}
.card:hover .card__i{color:var(--crimson);opacity:1}
.card__i{transition:color 520ms var(--ease-out),text-shadow 520ms var(--ease-out),opacity 520ms var(--ease-out)}

/* Registration marks. Technical-drawing corner brackets that strike in
   on hover — the border detail, drawn rather than glowing. */
.card::before{
  content:'';position:absolute;inset:10px;pointer-events:none;
  --c:var(--crimson);--l:14px;--w:1.5px;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) left top/var(--w) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--w) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--w) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--w) var(--l) no-repeat;
  opacity:0;transform:scale(1.04);
  transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out);
}
.card:hover::before,.card:focus-within::before{opacity:.9;transform:none}

.card:focus-within{border-color:rgba(220,38,38,.26);transform:translateY(-2px)}
.card__i{position:absolute;top:var(--s8);right:var(--s8);color:var(--charcoal);opacity:.85}
.card__i svg{width:22px;height:22px}
.card h3{padding-right:38px;font-size:var(--t-h3);line-height:1.35;font-weight:700;letter-spacing:var(--track-tight);color:var(--charcoal);margin-bottom:var(--s3)}
.card p{font-size:var(--t-body);font-weight:400;line-height:1.65;color:var(--muted)}

/* Trust cards carry no numeral — the icon leads, per the quiet register */
.cards--2 .card{
  position:relative;z-index:0;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-card);
  padding:var(--s8);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:border-color 420ms var(--ease-out),box-shadow 420ms var(--ease-out),transform 420ms var(--ease-out);
}

@media(min-width:760px){
  .cards--2{grid-template-columns:repeat(2,1fr);gap:var(--s6)}
}
@media(min-width:1000px){
  .how__h{margin-bottom:var(--s20)}
}

/* ═══════════ MECHANICS ═══════════ */
.offer{border-top:1px solid var(--rule-2)}
.offer__i{padding:var(--s8) 0;border-bottom:1px solid var(--rule-2);transition:background var(--dur) var(--ease)}
.offer__i:hover{background:rgba(240,238,238,.022)}
.offer__k{display:grid;place-items:center;width:64px;height:64px;flex:none;border:1px solid var(--rule-2);color:var(--rule-3);transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.offer__k svg{width:28px;height:28px}
.offer__i:hover .offer__k{color:var(--crimson);border-color:var(--crimson);box-shadow:var(--hard-sm);transform:translate(-2px,-2px)}
.offer dt{display:flex;align-items:center;gap:var(--s4);font-size:var(--t-h3);font-weight:700;letter-spacing:var(--track-tight);margin-bottom:var(--s2)}
.offer dd{font-size:var(--t-body);line-height:var(--lh-body);color:var(--muted);max-width:44ch;padding-left:80px;text-wrap:pretty}
.mechs__cta{margin-top:var(--s8)}
.rail__h a.btn{text-decoration:none}

/* ═══════════ COVERAGE ═══════════ */
.cities{border-top:1px solid var(--rule-2);margin-bottom:var(--s10)}
.city{display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s4);align-items:baseline;padding:var(--s5) 0;border-bottom:1px solid var(--rule-2);transition:padding-left var(--dur) var(--ease)}
.city:hover{padding-left:var(--s3)}
.city__n{font-family:var(--display);font-size:clamp(22px,2.6vw,32px);font-weight:800;font-stretch:var(--wd-display);letter-spacing:var(--track-display);text-transform:uppercase;line-height:1}
.city__d{grid-column:1;font-size:var(--t-caption);color:var(--muted)}
.city__s{grid-row:1;grid-column:2;font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted)}
.city--live .city__s{color:var(--success)}
.city--live .city__n{color:var(--off-white)}
.city:not(.city--live) .city__n{color:var(--muted-light)}

.plot{border:1px solid var(--rule-2);background:linear-gradient(168deg,var(--raised),var(--charcoal));overflow:hidden}
.plot__svg{width:100%;height:auto;display:block}
.plot__grid path{fill:none;stroke:var(--rule);stroke-width:1}
.plot__water{fill:rgba(148,163,184,.05)}
.plot__land{fill:rgba(240,238,238,.022)}
.plot__road{fill:none;stroke:var(--rule-3);stroke-width:5;stroke-linecap:round}
.plot__zone{fill:rgba(220,38,38,.045);stroke:var(--crimson);stroke-width:1.5;stroke-linejoin:round;stroke-dasharray:1 7}
.plot__nodes circle{fill:var(--charcoal);stroke:var(--muted-light);stroke-width:2}
.plot__nodes text{fill:var(--muted-light);font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-anchor:middle}
.plot__lbl text{fill:var(--muted);font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:.18em;opacity:.7}
.plot__lbl text:last-child{text-anchor:middle;fill:var(--rule-3)}
.plot__cap{display:flex;justify-content:space-between;padding:var(--s4) var(--s5);border-top:1px solid var(--rule-2);font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted)}
.plot__cap .num{color:var(--off-white)}

/* ═══════════ FAQ ═══════════
   Native <details>/<summary>: keyboard-operable, screen-reader
   correct, and works with JS off. The name="faq" attribute makes
   them mutually exclusive without a line of script. */
.qs{border-top:1px solid var(--rule-2)}
.q{border-bottom:1px solid var(--rule-2)}
.q summary{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s5);
  padding:var(--s6) 0;min-height:48px;
  font-size:var(--t-body);font-weight:600;letter-spacing:var(--track-tight);
  cursor:pointer;list-style:none;
  transition:color var(--dur) var(--ease);
}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--crimson)}
.q summary:focus-visible{outline:2px solid var(--crimson);outline-offset:4px}
.q__k{font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);color:var(--muted);transition:color var(--dur) var(--ease)}
.q[open] .q__k,.q summary:hover .q__k{color:var(--crimson)}

/* Plus that becomes a minus. Two rules, one rotation. */
.q__m{position:relative;width:14px;height:14px;flex:none}
.q__m::before,.q__m::after{content:'';position:absolute;inset:50% 0 auto;height:1.5px;background:currentColor;transform:translateY(-50%)}
.q__m::after{transform:translateY(-50%) rotate(90deg);transition:transform 360ms var(--ease-out)}
.q[open] .q__m::after{transform:translateY(-50%) rotate(0deg)}
.q[open] summary{color:var(--off-white)}

.q__a{padding:0 0 var(--s6) calc(var(--s5) + 26px)}
.q__a p{font-size:var(--t-body);font-weight:400;line-height:1.7;color:var(--muted-light);max-width:62ch}
.q__a a{color:var(--off-white);text-decoration:underline;text-underline-offset:3px}
.rail__h a{color:var(--off-white);text-decoration:underline;text-underline-offset:3px}
.rail__h a:hover{color:var(--crimson)}

@media(min-width:700px){
  .q summary{padding:var(--s8) 0;font-size:var(--t-h3);gap:var(--s6)}
  .q__a{padding-bottom:var(--s8);padding-left:calc(var(--s6) + 26px)}
}

/* ═══════════ WAITLIST ═══════════ */
.join__p{margin-top:var(--s5);font-size:var(--t-body-l);font-weight:400;line-height:var(--lh-body-l);color:var(--muted-light);max-width:32ch}
.form{display:grid;gap:var(--s4)}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule-2);margin:0;padding:0}
.seg__o{position:relative}
.seg__o+.seg__o{border-left:1px solid var(--rule-2)}
.seg__o input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.seg__o span{display:grid;place-items:center;min-height:50px;font-size:var(--t-caption);font-weight:600;color:var(--muted-light);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.seg__o input:checked+span{background:var(--crimson);color:var(--off-white)}
.seg__o input:focus-visible+span{outline:2px solid var(--crimson);outline-offset:-2px}
.f__l{display:block;font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}
.f__l em{font-style:normal;color:var(--rule-3)}
.f__i{width:100%;min-height:56px;padding:0 var(--s4);background:var(--raised);border:1px solid var(--rule-2);border-radius:var(--r-btn);font-size:var(--t-body);color:var(--off-white);transition:border-color var(--dur) var(--ease)}
.f__i::placeholder{color:var(--muted)}
.f__i:focus{border-color:var(--off-white);outline:none}
.f__i:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.f__i[aria-invalid='true']{border-color:var(--crimson)}
.f__e{margin-top:var(--s2);font-size:var(--t-caption);font-weight:500;color:var(--crimson)}
.f__legal{font-size:var(--t-micro);line-height:var(--lh-body);color:var(--muted)}
.f__legal a{color:var(--muted-light);text-decoration:underline}
.ok{padding:var(--s8);background:var(--raised);border:1px solid var(--rule-2)}
.ok__t{width:26px;height:26px;fill:none;stroke:var(--success);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;margin-bottom:var(--s4)}
.ok h3{font-size:var(--t-h3);font-weight:700;letter-spacing:var(--track-tight);margin-bottom:var(--s2)}
.ok p{font-size:var(--t-body);color:var(--muted-light);margin-bottom:var(--s6)}

/* ═══════════ FOOTER ═══════════ */
.foot{position:relative;z-index:1;padding-top:var(--s20);border-top:1px solid var(--rule-2)}
.foot__in{display:grid;gap:var(--s12);padding-bottom:var(--s16)}
.foot__t{font-size:var(--t-caption);line-height:var(--lh-body);color:var(--muted);max-width:30ch}
.foot__c{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s8)}
.foot__c>div{display:grid;gap:var(--s3);align-content:start}
.foot__c h4{font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted)}
.foot__c a{font-size:var(--t-caption);color:var(--muted-light);transition:color var(--dur) var(--ease)}
.foot__c a:hover{color:var(--off-white)}
.foot__b{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);padding-block:var(--s6);border-top:1px solid var(--rule-2);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--track-micro);color:var(--muted)}
.soc{display:flex;gap:var(--s4)}
.soc a{position:relative;display:grid;place-items:center;width:24px;height:24px;color:var(--muted);transition:color var(--dur) var(--ease),transform var(--dur) var(--ease-out)}
.soc a::after{content:'';position:absolute;top:50%;left:50%;width:48px;height:48px;transform:translate(-50%,-50%)}
.soc a:hover{color:var(--off-white);transform:translateY(-2px)}
.soc svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:860px){.foot__in{grid-template-columns:1fr 1.3fr}.foot__c{grid-template-columns:repeat(3,1fr)}}

/* ═══════════ MOTION ═══════════ */
.reveal.in{opacity:1;transform:none}
.trust .reveal{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .tick__row{animation:none}
  .card:hover{transform:none}
  .card::before{transform:none}
  .px>*{transform:none!important}
}