/* ============================================================================
   iziwerk — main.css
   ----------------------------------------------------------------------------
   One sectioned stylesheet. Reads every value from tokens.css (loaded first).
   Mobile-first (375px baseline), designed up. Zero horizontal scroll.

   MOTION RAILS
     R1  Reveal never hides content without JS. Hidden-initial states are scoped
         to `html.js` (set by an inline script before paint). JS off -> full page.
     R2  All entrance / keyframe motion lives inside
         @media (prefers-reduced-motion: no-preference). Reduced motion -> nothing
         moves and everything is visible. Durations also collapse to 0 in tokens.

   SECTIONS
     0 fonts · 1 reset/base · 2 layout primitives · 3 typography · 4 buttons/links
     5 header/nav · 6 footer · 7 hero · 8 terminal · 9 problem+pile · 10 fix
     11 no-cut · 12 how-it-works · 13 features · 14 reputation · 15 testimonials
     16 pricing · 17 security · 18 about/prose · 19 get-started · 20 legal · 21 404
     22 scroll reveal · 23 cursor/typed · 24 a11y/focus · 25 reduced-motion+responsive
   ========================================================================== */


/* === 0. SELF-HOSTED FONTS ================================================= */
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,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:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,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:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* === 1. RESET / BASE ====================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-display); font-weight:var(--fw-regular);
  font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
h1,h2,h3,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
strong,b{ font-weight:var(--fw-semibold); }
::selection{ background:var(--accent); color:var(--on-accent); }
:target{ scroll-margin-top:calc(var(--nav-h) + 12px); }


/* === 2. LAYOUT PRIMITIVES ================================================= */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.container--narrow{ max-width:var(--maxw-narrow); }
.container--tight{ max-width:var(--maxw-tight); }
.section{ padding-block:var(--section-y); border-bottom:1px solid var(--border); }
.section--alt{ background:var(--surface); }
.section__head{ max-width:60ch; }
main{ display:block; }

/* mono eyebrow — "// label", accent, with optional leading dot */
.eyebrow{
  font-family:var(--font-mono); font-size:var(--fs-eyebrow); font-weight:var(--fw-medium);
  letter-spacing:var(--track-eyebrow); color:var(--accent);
  display:inline-flex; align-items:center; gap:9px; margin-bottom:18px;
}
.eyebrow--hero{ letter-spacing:var(--track-eyebrow-hero); }
.eyebrow__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }


/* === 3. TYPOGRAPHY ======================================================== */
h1,h2,h3{ font-family:var(--font-display); font-weight:var(--fw-semibold); color:var(--ink); }
.h-hero{ font-size:var(--fs-hero); line-height:var(--lh-hero); letter-spacing:var(--track-tight); }
.h-display{ font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--track-tight); }
.h-cta{ font-size:var(--fs-cta-title); line-height:var(--lh-hero); letter-spacing:var(--track-tight); }
.section-title{ font-size:var(--fs-h2); line-height:var(--lh-hero); letter-spacing:var(--track-snug); }
.section-title--lg{ font-size:var(--fs-h2-lg); }
.accent{ color:var(--accent); }
.success{ color:var(--success); }
.danger{ color:var(--danger); }
.lead{ font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--muted); }
.lead strong{ color:var(--ink); font-weight:var(--fw-medium); }
.body-copy{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--muted); }
.body-copy strong{ color:var(--ink); font-weight:var(--fw-medium); }
.kicker{
  font-family:var(--font-mono); font-size:var(--fs-meta); color:var(--muted);
  letter-spacing:.02em;
}
.kicker strong{ color:var(--accent); font-weight:var(--fw-medium); }
.mono{ font-family:var(--font-mono); }
.measure{ max-width:60ch; }
.measure-40{ max-width:40ch; }


/* === 4. BUTTONS + LINKS =================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--touch-min); font-family:var(--font-display); font-weight:var(--fw-semibold);
  border-radius:var(--radius-btn); border:1px solid transparent; cursor:pointer;
  text-align:center; white-space:nowrap; user-select:none;
}
.btn--primary{
  height:54px; padding:0 26px; font-size:var(--fs-btn);
  background:var(--accent); color:var(--on-accent);
  transition:background var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.btn--primary:hover{ background:var(--accent-strong); transform:translateY(-2px); }
.btn--primary:active{ transform:translateY(0) scale(.99); }
.btn--ghost{
  height:54px; padding:0 24px; font-size:var(--fs-btn);
  background:transparent; color:var(--ink); border-color:var(--border);
  transition:border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn--sm{ height:44px; padding:0 20px; font-size:var(--fs-btn-sm); border-radius:var(--radius-btn-sm); }
.btn--block{ width:100%; }

/* inline mono link with arrow — ".ln" */
.ln{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono);
  font-size:var(--fs-label); font-weight:var(--fw-medium); color:var(--accent);
  border-bottom:1px solid var(--accent-underline); padding-bottom:2px; line-height:1.2;
  min-height:24px; transition:color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.ln:hover{ color:var(--accent-strong); border-color:var(--accent-strong); }
.ln .arrow{ transition:transform var(--dur-hover) var(--ease); }
.ln:hover .arrow{ transform:translateX(3px); }

/* amber blinking caret (brand signature) — scales with font-size */
.curblk{
  display:inline-block; width:.14em; height:.72em; margin-left:.1em; vertical-align:-.02em;
  background:var(--accent); border-radius:1.5px;
}


/* === 5. HEADER + NAV ====================================================== */
.site-header{
  position:sticky; top:0; z-index:var(--z-nav); height:var(--nav-h);
  border-bottom:1px solid var(--border); background:var(--bg);
  transition:background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.site-header.is-scrolled{ background:var(--nav-bg); }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header.is-scrolled{ -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); }
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:100%; gap:20px; }

.brand{
  display:inline-flex; align-items:baseline; font-family:var(--font-display);
  font-weight:var(--fw-semibold); font-size:21px; letter-spacing:var(--track-snug); color:var(--ink);
}
.brand .curblk{ width:.13em; height:.62em; }
.brand--lg{ font-size:22px; }

.nav-links{ display:none; }               /* mobile: hidden, drawer used instead */
.nav-links a{ color:var(--muted); font-size:var(--fs-nav); transition:color var(--dur-hover) var(--ease); }
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav__right{ display:flex; align-items:center; gap:10px; }

.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border:1px solid var(--border); border-radius:var(--radius-btn-sm);
  background:transparent; color:var(--ink); cursor:pointer;
  transition:border-color var(--dur-hover) var(--ease);
}
.nav-toggle:hover{ border-color:var(--accent); }
.nav-toggle svg{ width:20px; height:20px; }
.nav-cta{ display:none; }                  /* mobile: primary CTA lives in the drawer */

/* mobile drawer + scrim */
.nav-scrim{
  position:fixed; inset:0; z-index:var(--z-drawer); background:var(--scrim);
  opacity:0; visibility:hidden; transition:opacity var(--dur-hover) var(--ease), visibility var(--dur-hover);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-scrim{ -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
}
.nav-scrim.is-open{ opacity:1; visibility:visible; }
.nav-drawer{
  position:fixed; top:0; right:0; z-index:calc(var(--z-drawer) + 1);
  height:100dvh; width:min(86vw,340px); padding:20px; overflow-y:auto;
  background:var(--surface); border-left:1px solid var(--border);
  transform:translateX(100%); transition:transform var(--dur-hover) var(--ease);
  display:flex; flex-direction:column; gap:6px;
}
.nav-drawer.is-open{ transform:translateX(0); }
.nav-drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.nav-drawer a.drawer-link{
  display:flex; align-items:center; min-height:48px; padding:0 14px; border-radius:var(--radius-inset);
  color:var(--ink); font-size:16px; transition:background var(--dur-hover) var(--ease);
}
.nav-drawer a.drawer-link:hover,.nav-drawer a.drawer-link[aria-current="page"]{ background:var(--surface-2); }
.nav-drawer .btn{ margin-top:12px; }
.nav-drawer__note{ margin-top:16px; font-family:var(--font-mono); font-size:var(--fs-small); color:var(--muted); }


/* === 6. FOOTER ============================================================ */
.site-footer{ background:var(--bg); border-top:1px solid var(--border); padding-block:clamp(48px,6vw,72px) 40px; }
.footer__top{ display:flex; flex-direction:column; gap:36px; }
.footer__brand{ max-width:34ch; }
.footer__brand .brand{ font-size:22px; }
.footer__tagline{ margin-top:12px; font-size:15px; line-height:var(--lh-lead); color:var(--muted); }
.footer__note{ margin-top:14px; font-family:var(--font-mono); font-size:var(--fs-small); line-height:1.7; color:var(--muted); }
.footer__cols{ display:flex; flex-wrap:wrap; gap:36px 56px; }
.footer__col h3{
  font-family:var(--font-mono); font-size:var(--fs-small); font-weight:var(--fw-medium);
  letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--muted); margin-bottom:14px;
}
.footer__col a{ display:block; padding:7px 0; font-size:15px; color:var(--muted); transition:color var(--dur-hover) var(--ease); }
.footer__col a:hover{ color:var(--ink); }
.footer__bar{
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; align-items:center;
  margin-top:44px; padding-top:24px; border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:12.5px; color:var(--muted);
}


/* === 7. HERO ============================================================== */
.hero{ padding-block:clamp(48px,7vw,96px) clamp(56px,7vw,104px); border-bottom:1px solid var(--border); }
.hero__grid{ display:grid; grid-template-columns:1fr; gap:var(--grid-gap); align-items:center; }
.hero__title{ margin-bottom:22px; }
.hero__lead{ max-width:44ch; }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:30px; }
.hero__cta-note{ font-family:var(--font-mono); font-size:var(--fs-meta); color:var(--muted); }
.hero__keep{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:34px; padding-top:22px;
  border-top:1px dashed var(--border); font-family:var(--font-mono); font-size:13.5px; color:var(--muted);
}
.hero__keep .rule{ flex:1 1 20px; height:1px; background:var(--border); min-width:20px; }


/* === 8. TERMINAL WINDOW (hero visual + the-maths) ========================= */
.term{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  overflow:hidden; box-shadow:var(--shadow-hero);
}
.term--flat{ box-shadow:var(--shadow-card); }
.term__bar{
  display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border);
  font-family:var(--font-mono); font-size:12.5px; color:var(--muted);
}
.term__dots{ display:inline-flex; gap:7px; }
.term__dots i{ width:11px; height:11px; border-radius:50%; background:var(--surface-3); }
.term__path{ color:var(--muted); }
.term__count{ margin-left:auto; font-size:11.5px; color:var(--muted); }
.term__body{ padding:16px; font-family:var(--font-mono); font-size:var(--fs-terminal); line-height:var(--lh-terminal); }
.term__row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px dashed var(--border); color:var(--muted); }
.term__row:last-child{ border-bottom:0; }
.term__row .val{ color:var(--ink); }
.term__row .val--ok{ color:var(--success); }
.term__row .val--amber{ color:var(--accent); }
.term__foot{ padding:14px 16px; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:var(--fs-terminal); color:var(--ink); }
.term__typed{ display:inline; min-height:1.2em; }
.term__wrap{ position:relative; }
.term__glow{
  position:absolute; inset:0; pointer-events:none; border-radius:var(--radius-card);
  background:radial-gradient(120px 120px at 82% 16%, var(--accent-glow), transparent 70%);
}

/* the-maths.txt block (no-cut device) */
.maths .term__body{ line-height:1.85; }
.maths .op{ color:var(--muted); }
.maths .comment{ color:var(--muted); opacity:.9; }
.maths .rule{ height:1px; border-top:1px dashed var(--border); margin:12px 0; }
.maths .keep{ color:var(--accent); }


/* === 9. PROBLEM + CHAOS PILE ============================================= */
.problem__lead{ max-width:52ch; margin-top:22px; }
.chaos{
  position:relative; margin-top:clamp(32px,5vw,56px);
  border:1px solid var(--border); border-radius:var(--radius-card-lg); background:var(--bg);
  padding:22px;
}
.chaos__label{ font-family:var(--font-mono); font-size:var(--fs-small); color:var(--muted); margin-bottom:14px; }
/* mobile-first: chips flow as a readable wrap (no overflow @375) */
.chaos__chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chaos-chip{
  font-family:var(--font-mono); font-size:13px; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-chip);
  padding:8px 12px; box-shadow:var(--shadow-chip); white-space:nowrap; max-width:100%;
}
.chaos-chip--danger{ border-style:dashed; border-color:var(--danger); color:var(--ink); }
.chaos__pill{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-family:var(--font-mono); font-size:13px; color:var(--danger);
  border:1px solid var(--danger); border-radius:var(--radius-pill); padding:7px 14px;
}
.chaos__pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--danger); }


/* === 10. FIX (one thread) ================================================= */
.thread-card{
  background:var(--bg); border:1px solid var(--accent); border-radius:var(--radius-card-lg);
  padding:24px; box-shadow:0 0 0 4px var(--accent-ring);
}
.thread-card__label{ font-family:var(--font-mono); font-size:var(--fs-small); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.thread-row{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-inset);
  padding:13px 15px; font-size:var(--fs-body-sm); color:var(--ink);
}
.thread-row:last-child{ margin-bottom:0; }
.thread-row .mark{ font-family:var(--font-mono); flex:none; }
.thread-row .mark--arrow{ color:var(--accent); }
.thread-row .mark--ok{ color:var(--success); }


/* === 11. NO-CUT =========================================================== */
.nocut__kicker{ margin-top:24px; }


/* === 12. HOW IT WORKS (steps) ============================================= */
.steps{ display:grid; grid-template-columns:1fr; gap:var(--card-gap); margin-top:clamp(28px,4vw,44px); }
.step{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:22px 20px 24px;
}
.step--hi{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring); }
.step__n{ font-family:var(--font-mono); font-size:13px; color:var(--accent); margin-bottom:14px; }
.step .icon{ margin-bottom:14px; }
.step h3{ font-size:var(--fs-h3-sm); margin-bottom:8px; }
.step p{ font-size:14.5px; line-height:1.5; color:var(--muted); }
.how__foot{ margin-top:clamp(28px,4vw,40px); }

/* full how-it-works page: roomy vertical flow */
.flow{ display:grid; gap:14px; margin-top:clamp(28px,4vw,48px); max-width:840px; }
.flow__item{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:22px 22px 24px; }
.flow__item--hi{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring); }
.flow__n{ font-family:var(--font-mono); font-size:13px; color:var(--accent); min-width:30px; padding-top:3px; }
.flow__item h2{ font-size:var(--fs-h3-sm); margin-bottom:7px; }
.flow__item p{ font-size:var(--fs-body-sm); line-height:1.6; color:var(--muted); }


/* === 13. FEATURES ========================================================= */
.features{ display:grid; grid-template-columns:1fr; gap:var(--card-gap); margin-top:clamp(28px,4vw,44px); }
.feature{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:26px 22px;
}
.feature .icon{ margin-bottom:16px; }
.feature h3{ font-size:var(--fs-h3); margin-bottom:8px; }
.feature p{ font-size:var(--fs-body-sm); line-height:1.55; color:var(--muted); }

.icon{ display:block; width:28px; height:28px; flex:none; color:var(--accent); }
.icon svg{ width:100%; height:100%; display:block; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.icon--sm{ width:26px; height:26px; }


/* === 14. REPUTATION ======================================================= */
.rep-card{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-card-lg); padding:24px; }
.rep-card__head{ display:flex; align-items:center; gap:14px; }
.rep-avatar{
  width:52px; height:52px; flex:none; border-radius:13px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:var(--fw-semibold); color:var(--accent); font-size:22px;
}
.rep-card__name{ font-weight:var(--fw-semibold); }
.rep-card__meta{ font-family:var(--font-mono); font-size:var(--fs-small); color:var(--muted); margin-top:3px; }
.rep-card__pill{ margin-left:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--muted); border:1px solid var(--border); border-radius:var(--radius-pill); padding:5px 12px; }
.rep-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; }
.rep-stat{ background:var(--surface-2); border-radius:var(--radius-tile); padding:16px 12px; text-align:center; }
.rep-stat b{ display:block; font-size:22px; font-weight:var(--fw-semibold); color:var(--muted); }
.rep-stat span{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); }
.rep-card__note{ margin-top:16px; font-family:var(--font-mono); font-size:var(--fs-small); color:var(--muted); }


/* === 15. TESTIMONIALS (honest empty state) =============================== */
.empty-state{
  text-align:center; border:1px dashed var(--border); border-radius:var(--radius-card-lg);
  padding:clamp(32px,5vw,56px); background:var(--bg);
}
.empty-state .icon{ width:30px; height:30px; margin:0 auto 18px; color:var(--muted); }
.empty-state__line{ font-size:clamp(18px,2.4vw,24px); line-height:1.4; color:var(--ink); font-weight:var(--fw-medium); max-width:44ch; margin-inline:auto; }
.empty-state__status{ margin-top:18px; font-family:var(--font-mono); font-size:var(--fs-meta); color:var(--muted); }


/* === 16. PRICING ========================================================== */
.price-toggle{ display:inline-flex; align-items:center; gap:6px; margin-top:26px; padding:5px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface); }
.price-toggle button{
  min-height:38px; padding:0 18px; border:0; border-radius:var(--radius-pill); cursor:pointer;
  font-family:var(--font-mono); font-size:var(--fs-label); color:var(--muted); background:transparent;
  transition:background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.price-toggle button[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); }
.price-toggle__save{ font-family:var(--font-mono); font-size:var(--fs-small); color:var(--success); margin-left:10px; }

.tiers{ display:grid; grid-template-columns:1fr; gap:var(--card-gap); margin-top:clamp(28px,4vw,44px); align-items:start; }
.tier{ position:relative; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-card); padding:26px 24px; }
.tier--popular{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring); }
.tier__badge{
  position:absolute; top:-11px; left:24px; font-family:var(--font-mono); font-size:11px; font-weight:var(--fw-medium);
  letter-spacing:var(--track-label); text-transform:uppercase; background:var(--accent); color:var(--on-accent);
  padding:4px 10px; border-radius:var(--radius-pill);
}
.tier__name{ font-family:var(--font-mono); font-size:13px; letter-spacing:var(--track-eyebrow-hero); text-transform:uppercase; color:var(--muted); }
.tier__price{ display:flex; align-items:baseline; gap:4px; margin-top:12px; font-size:var(--fs-price); font-weight:var(--fw-semibold); letter-spacing:var(--track-snug); }
.tier__per{ font-size:16px; font-weight:var(--fw-regular); color:var(--muted); }
.tier__annual{ font-family:var(--font-mono); font-size:var(--fs-small); color:var(--muted); margin-top:6px; min-height:1.2em; }
.tier__sub{ font-size:14px; color:var(--muted); margin-top:14px; }
.tier__list{ margin:18px 0; display:grid; gap:0; }
.tier__list li{ display:flex; gap:10px; font-size:var(--fs-body-sm); line-height:1.9; color:var(--ink); }
.tier__list li::before{ content:""; flex:none; width:16px; height:16px; margin-top:6px; background:var(--accent); -webkit-mask:var(--check-mask) center/contain no-repeat; mask:var(--check-mask) center/contain no-repeat; }
.tier__best{ font-family:var(--font-mono); font-size:var(--fs-small); color:var(--muted); margin:14px 0 18px; }
.tier .btn{ width:100%; }
:root{ --check-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5 11-11'/%3E%3C/svg%3E"); }

/* pricing FAQ */
.faq{ display:grid; gap:0; margin-top:clamp(28px,4vw,44px); border-top:1px solid var(--border); }
.faq__item{ border-bottom:1px solid var(--border); padding:24px 0; }
.faq__q{ font-family:var(--font-mono); font-size:var(--fs-label); color:var(--accent); margin-bottom:12px; }
.faq__a{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--muted); max-width:70ch; }
.faq__a strong{ color:var(--ink); font-weight:var(--fw-medium); }


/* === 17. SECURITY (trust list) =========================================== */
.trust-list{ display:grid; grid-template-columns:1fr; gap:var(--card-gap); margin-top:clamp(28px,4vw,44px); }
.trust{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:24px 22px; }
.trust .icon{ margin-bottom:14px; }
.trust h3{ font-size:var(--fs-h3-sm); margin-bottom:8px; }
.trust p{ font-size:var(--fs-body-sm); line-height:1.6; color:var(--muted); }


/* === 18. ABOUT / PROSE ==================================================== */
.prose{ max-width:68ch; }
.prose p{ font-size:var(--fs-body); line-height:1.75; color:var(--muted); margin-bottom:1.2em; }
.prose p strong{ color:var(--ink); font-weight:var(--fw-medium); }
.prose .sign{ font-family:var(--font-mono); font-size:var(--fs-meta); color:var(--muted); margin-top:8px; }


/* === 19. GET STARTED ====================================================== */
.start-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card-lg); padding:clamp(24px,4vw,40px); max-width:640px; }
.start-card p{ font-size:var(--fs-body); line-height:1.65; color:var(--muted); }
.start-card .btn{ margin-top:24px; }
.start-note{ margin-top:20px; font-family:var(--font-mono); font-size:var(--fs-meta); color:var(--muted); }
.trust-row{ display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:26px; }
.trust-tag{ font-family:var(--font-mono); font-size:var(--fs-small); color:var(--muted); border:1px solid var(--border); border-radius:var(--radius-pill); padding:7px 13px; }


/* === 20. LEGAL ============================================================ */
.legal{ max-width:74ch; }
.legal__banner{
  display:flex; gap:12px; align-items:flex-start; margin-bottom:32px; padding:16px 18px;
  border:1px solid var(--accent); border-radius:var(--radius-card); background:var(--surface); box-shadow:0 0 0 4px var(--accent-ring);
}
.legal__banner .icon{ flex:none; width:22px; height:22px; margin-top:2px; }
.legal__banner p{ font-family:var(--font-mono); font-size:var(--fs-meta); line-height:1.6; color:var(--ink); }
.legal__meta{ font-family:var(--font-mono); font-size:var(--fs-small); color:var(--muted); margin-bottom:28px; }
.legal h2{ font-size:22px; margin:32px 0 12px; }
.legal p{ font-size:var(--fs-body); line-height:1.7; color:var(--muted); margin-bottom:1em; }
.legal .placeholder{ color:var(--muted); font-style:normal; opacity:.75; }


/* === 21. 404 ============================================================== */
.err{ min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-block:clamp(60px,10vw,120px); }
.err h1{ font-size:var(--fs-h2-lg); letter-spacing:var(--track-snug); }
.err p{ margin-top:16px; max-width:44ch; color:var(--muted); }
.err .btn{ margin-top:28px; }


/* === 22. SCROLL REVEAL ==================================================== */
/* R1 + R2: hidden-initial only when JS is on AND motion is allowed. */
@media (prefers-reduced-motion:no-preference){
  html.js [data-rise]{
    opacity:0; transform:translateY(20px); will-change:opacity,transform;
    transition:opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
    animation:riseFailsafe .01s linear 2.8s forwards;   /* if JS never runs, reveal anyway */
  }
  html.js [data-rise].is-revealed{ opacity:1; transform:none; animation:none; }
  html.js [data-rise][data-delay="1"]{ transition-delay:.06s; }
  html.js [data-rise][data-delay="2"]{ transition-delay:.12s; }
  html.js [data-rise][data-delay="3"]{ transition-delay:.18s; }
  @keyframes riseFailsafe{ to{ opacity:1; transform:none; } }
}


/* === 23. CURSOR BLINK + TYPED ============================================= */
@media (prefers-reduced-motion:no-preference){
  .curblk{ animation:izblink var(--dur-blink) steps(1) infinite; }
  @keyframes izblink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
  /* hero entrance (R2) — fast + staggered: h1 legible ~230ms, full seq <=590ms.
     cubic-bezier(.2,.6,.2,1) front-loads opacity, so 0.42s reads quickly. */
  html.js .hero__reveal{ opacity:0; transform:translateY(10px); animation:heroIn .42s var(--ease) forwards; }
  html.js .hero__reveal.d0{ animation-delay:0ms; }
  html.js .hero__reveal.d1{ animation-delay:60ms; }
  html.js .hero__reveal.d2{ animation-delay:120ms; }
  html.js .hero__reveal.d3{ animation-delay:170ms; }
  @keyframes heroIn{ to{ opacity:1; transform:none; } }
}


/* === 24. A11Y / FOCUS ===================================================== */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200; padding:12px 18px;
  background:var(--accent); color:var(--on-accent); font-family:var(--font-mono); font-size:14px; border-radius:0 0 var(--radius-btn-sm) 0;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:3px; }
:focus:not(:focus-visible){ outline:none; }
[data-rise].is-revealed,[data-rise]{ }   /* no-op anchor to keep section ordering explicit */


/* === 25. RESPONSIVE (design up) + REDUCED-MOTION safety =================== */

/* small tablets: 2-col feature/step/tier grids, chaos becomes a scattered pile */
@media (min-width:640px){
  .features{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .tiers{ grid-template-columns:repeat(2,1fr); }
  .trust-list{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:720px){
  /* chaos "pile": absolute scattered chips (mobile keeps the safe wrap above) */
  .chaos--pile{ min-height:300px; overflow:hidden; }
  .chaos--pile .chaos__chips{ display:block; position:relative; height:260px; }
  .chaos--pile .chaos-chip{ position:absolute; left:var(--x); top:var(--y); transform:rotate(var(--r,0deg)); }
  .chaos--pile::after{ content:""; position:absolute; inset:auto 0 0 0; height:45%; background:linear-gradient(180deg,transparent,var(--pile-fade)); pointer-events:none; }
}

/* desktop: inline nav, hide burger/drawer; multi-col layouts */
@media (min-width:900px){
  .nav-links{ display:flex; align-items:center; gap:26px; }
  .nav-cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
  .hero__grid{ grid-template-columns:1.05fr .95fr; }
  .fix__grid,.rep__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--grid-gap); align-items:center; }
  .rep__grid{ grid-template-columns:.95fr 1.05fr; }
  .nocut__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--grid-gap); align-items:center; }
  .features{ grid-template-columns:repeat(3,1fr); }
  .steps{ grid-template-columns:repeat(5,1fr); }
  .tiers{ grid-template-columns:repeat(3,1fr); }
  .footer__top{ flex-direction:row; justify-content:space-between; gap:56px; }
  .footer__brand{ flex:1 1 40%; }
}
@media (min-width:1040px){
  .trust-list{ grid-template-columns:repeat(3,1fr); }
}

/* When the drawer is open, lock body scroll (JS adds .nav-open). */
body.nav-open{ overflow:hidden; }

/* Absolute reduced-motion backstop: kill transitions/animations, show everything. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  html.js [data-rise],html.js .hero__reveal{ opacity:1 !important; transform:none !important; }
  .curblk{ opacity:1 !important; }
}


/* === 26. CROSS-PAGE VIEW TRANSITIONS (M14) ================================ */
/* Progressive enhancement: smooth same-origin page changes on supporting
   browsers; a no-op everywhere else. Disabled under reduced motion. */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none !important; }
}