/* Quismo Landing v7 — styles
   Source of truth for design values: quismo-landing-design-spec.md §1.
   Token deviation: --cta-bg is a deepened terracotta so white button text passes
   AA 4.5:1 (#e85d3f gives only ~3.46:1). --accent-terracotta is unchanged for
   accents / large text / borders. */

:root{
  /* surfaces */
  --bg-dark:#0a0f0a;
  --bg-dark-2:#0f1a0f;
  --bg-light:#f5f3ef;
  --bg-light-2:#ebe8e2;

  /* accents */
  --accent-terracotta:#e85d3f;
  --accent-terracotta-light:#ff7a5c;
  --cta-bg:#d1472a;            /* AA-safe filled-button bg (white ≈ 4.53:1) */
  --accent-green:#4ade80;
  --accent-green-dark:#22c55e;

  /* text */
  --text-primary:#1a1a1a;
  --text-secondary:#5c5c5c;
  --text-inverse:#f5f3ef;
  --text-muted:#8a8f8a;       /* slightly greened muted; ≈5.4:1 on dark */

  /* borders */
  --border-light:rgba(255,255,255,.12);
  --border-dark:rgba(0,0,0,.12);

  /* retention plate — long-exposure light trails (§ courbe de rétention).
     Its own register: near-black ground, instrument blue vs ember terracotta.
     Deliberately NOT --accent-terracotta (#e85d3f reads as a SaaS accent). */
  --qsm-ground:#050608;
  --rt-scanline:rgba(255,255,255,.035);
  --rt-blue:#2c5a86;         /* dying trail body */
  --rt-blue-core:#dce9f0;    /* dying trail core */
  --rt-ember:#c0592f;        /* surviving trail body */
  --rt-ember-core:#e8926a;   /* surviving trail core + bloom peaks */
  --rt-cyan:#5fd8e0;         /* halo / CMYK ghost — alpha only, never flat */
  --rt-haze:#0e3a44;         /* radial pool under the blooms */
  --rt-meta:#6e7c86;         /* technical metadata type */
  --rt-tick:#93a5af;         /* J+1 … J+16 labels */

  /* retention metadata — CD-booklet instrument label, never display type */
  --rt-gutter:clamp(16px,4vw,56px);
  --rt-font-rail:9px;
  --rt-font-tick:8px;
  --rt-font-tick-mobile:7px;
  --rt-font-serial:7px;
  --rt-tracking:.18em;
  --rt-tracking-serial:.10em;
  --rt-opacity-meta:.62;
  --rt-opacity-serial:.45;
  --rt-opacity-tick:.74;
  --rt-opacity-blue:.80;
  --rt-opacity-ember:.88;
  --rt-opacity-mark:.40;
  --rt-hair-width:1px;
  --rt-hair-height:62%;
  --rt-meta-top:12%;
  --rt-column-top:12%;
  --rt-tick-height:5px;
  --rt-tick-gap:12px;
  --rt-rail-shift:6px;
  --rt-serial-gap:6px;

  /* geometry */
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --shadow-card:0 4px 12px rgba(60,50,40,.08),0 2px 4px rgba(0,0,0,.04);
  --shadow-featured:0 8px 32px rgba(232,93,63,.14);

  /* motion */
  --dur-fast:.2s; --dur-normal:.4s; --dur-slow:.8s;

  /* type */
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  /* rhythm */
  --pad-section:clamp(72px,10vw,120px);
  --container:1200px;
  --tap:44px;
}

/* ---------- reset / base ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--font-body);
  background:var(--bg-dark);
  color:var(--text-inverse);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.15; letter-spacing:-.02em; }
:focus-visible{ outline:3px solid var(--accent-green); outline-offset:3px; border-radius:2px; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--bg-light); color:var(--text-primary);
  padding:10px 16px; border-radius:var(--r-sm); transition:top var(--dur-fast) ease;
}
.skip-link:focus{ top:12px; }

/* section surfaces */
.section-dark{ background:var(--bg-dark); color:var(--text-inverse); }
.section-dark-2{ background:var(--bg-dark-2); color:var(--text-inverse); }
.section-light{ background:var(--bg-light); color:var(--text-primary); }
.section-light-2{ background:var(--bg-light-2); color:var(--text-primary); }

.section-head{ max-width:760px; margin-bottom:clamp(40px,6vw,64px); }
.section-head h2,h2{ font-size:clamp(28px,4.5vw,44px); }
.lead{ margin-top:16px; font-size:clamp(16px,2vw,19px); color:var(--text-secondary); }
.section-dark .lead,.section-dark-2 .lead{ color:var(--text-muted); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:14px 26px;
  font-family:var(--font-body); font-size:16px; font-weight:600;
  border-radius:var(--r-sm); border:2px solid transparent; cursor:pointer;
  transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease,
             background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.btn-primary{ background:var(--cta-bg); color:#fff; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(209,71,42,.35); }
.btn-ghost{ background:transparent; color:currentColor; border-color:currentColor; }
.btn-ghost:hover{ background:currentColor; color:var(--bg-dark); }
.section-light .btn-ghost:hover,.section-light-2 .btn-ghost:hover{ color:var(--bg-light); }
.btn-block{ width:100%; }

/* ---------- header / nav ---------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; transition:background var(--dur-normal) ease, box-shadow var(--dur-normal) ease, transform var(--dur-normal) ease; }
/* Phone only (see initNav): 74px of opaque bar parked over every section head is
   9% of the viewport permanently spent. Retract on scroll-down, return on
   scroll-up — the CTA is never more than one upward flick away. */
.nav[data-retract="true"]{ transform:translateY(-100%); }
.nav[data-state="stuck"]{ background:rgba(10,15,10,.86); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--border-light); }
.nav-inner{ max-width:var(--container); margin-inline:auto; padding:14px clamp(20px,5vw,40px); display:flex; align-items:center; gap:24px; }
.nav-mark{ font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.02em; color:var(--text-inverse); display:inline-flex; align-items:center; min-height:var(--tap); }
.nav-links{ display:none; gap:28px; margin-left:auto; }
.nav-links a{ color:var(--text-muted); font-size:15px; display:inline-flex; align-items:center; justify-content:center; min-height:var(--tap); min-width:var(--tap); }
.nav-links a:hover{ color:var(--text-inverse); }
.nav-cta{ margin-left:auto; padding:10px 18px; min-height:var(--tap); font-size:14px; }
@media (min-width:900px){ .nav-links{ display:flex; } .nav-cta{ margin-left:0; } }

/* ---------- vanta / background layer ---------- */
/* Both canvases (hero dither, modules cells) are full-bleed inside their own
   section, so their texture used to stop dead on the section line while the
   neighbour stayed flat. Fade the layer out at both ends into the section's
   own ground — same trick as the .mth-stage scan/grain below. */
.vanta-bg{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,#0a0f0a 0%,#0f1a0f 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
}

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
/* Vertical sizing is vh-capped, not just vw: the desktop cinematic pins #hero, so
   anything taller than the viewport (the proof strip) can never be scrolled into view. */
.hero-inner{ position:relative; z-index:2; max-width:1100px; padding-block:clamp(64px,10vh,84px) clamp(24px,5vh,44px); }
.hero-title{ margin-top:0; font-size:clamp(44px,min(7.4vw,10vh),104px); line-height:0.98; letter-spacing:-.03em; }
.hero-title .line{ display:block; }
.hero-sub{ margin-top:22px; font-size:clamp(16px,2.2vw,20px); color:var(--text-muted); max-width:640px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.proof-strip{ list-style:none; display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,56px); margin-top:clamp(20px,4vh,40px); }
.proof-strip li{ display:flex; flex-direction:column; }
.stat{ font-family:var(--font-display); font-weight:700; font-size:clamp(32px,5vw,44px); color:var(--text-inverse); font-variant-numeric:tabular-nums; }
.section-light .stat,.section-light-2 .stat{ color:var(--accent-terracotta); }
.stat-label{ font-size:13px; color:var(--text-muted); max-width:180px; }
.scroll-cue{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:2; font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-muted); }
.scroll-cue::after{ content:""; display:block; width:1px; height:28px; margin:8px auto 0; background:linear-gradient(var(--text-muted),transparent); }

/* ---------- manifesto ---------- */
.manifesto-h{
  overflow:visible; height:auto; display:flex; align-items:center;
  padding-block:var(--pad-section);
}
.manifesto-h .manifesto-track{ display:flex; width:auto; }
.manifesto-h .manifesto-text{
  display:flex; flex-direction:column; align-items:flex-start; gap:.15em;
  white-space:normal; padding:0 clamp(20px,5vw,40px); margin:0;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(30px,8vw,56px); line-height:1.05; letter-spacing:-.03em;
}
.manifesto-h .phrase{ display:inline-block; white-space:normal; color:var(--text-muted); transition:color var(--dur-slow) ease; }
.manifesto-h .phrase .accent{ color:inherit; }
.manifesto-h .phrase.lit{ color:var(--text-inverse); }
.manifesto-h .phrase.lit .accent{ color:var(--accent-terracotta); }

/* Desktop cinematic: pin the viewport and move the manifesto horizontally.
   Stays ≥1024px deliberately, even though the rest of the cinematic went to
   phones on 2026-08-04. The phrase is set in one nowrap line, so on a 375px
   screen at the clamp floor (56px) only ~2 characters are on screen at a time
   — the sentence becomes unreadable and costs ~1000px of scroll to spell out.
   Phones keep the vertical char-reveal in initManifesto instead, which is a
   better effect at that width, not an absence of one. */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  body:not(.no-cinematic) .manifesto-h{
    overflow:hidden; height:100vh; padding:0;
  }
  body:not(.no-cinematic) .manifesto-h .manifesto-track{ width:max-content; }
  body:not(.no-cinematic) .manifesto-h .manifesto-text{
    flex-direction:row; align-items:center; gap:4vw; white-space:nowrap;
    padding-inline:100vw 20vw;
    font-size:clamp(56px,12vw,160px);
  }
  body:not(.no-cinematic) .manifesto-h .phrase{ white-space:nowrap; }
  body:not(.no-cinematic) .manifesto-h .word{ display:inline-block; color:var(--text-muted); transition:color var(--dur-slow) ease; }
  body:not(.no-cinematic) .manifesto-h .word.lit{ color:var(--text-inverse); }
}

/* ---------- modules (horizontal) ---------- */
/* Ground is a shade lighter than the manifesto above it, so bleed that ground
   in over the first 140px instead of switching on the section line. Background
   layer (not a pseudo-element) so it can never paint over the cards. */
.modules{
  position:relative; overflow:hidden;
  background-image:linear-gradient(to bottom,var(--bg-dark),transparent 140px);
}
.modules::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(15,26,15,.35),rgba(15,26,15,.78));
  /* lifts the ground ~6 levels, so it fades in with everything else */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 140px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 140px);
}
.modules-pin{ position:relative; z-index:2; padding-block:var(--pad-section); }
.modules-head{ margin-bottom:40px; }
.modules-track{
  display:flex; gap:18px; padding-inline:clamp(20px,5vw,40px);
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.modules-track::-webkit-scrollbar{ display:none; }
.module-card{
  --module-accent:rgba(245,243,239,.56);
  --module-accent-soft:rgba(245,243,239,.08);
  position:relative; isolation:isolate; overflow:hidden;
  flex:0 0 86vw; max-width:360px; min-height:372px;
  scroll-snap-align:center;
  background:linear-gradient(145deg,rgba(27,40,27,.96),rgba(10,15,10,.94));
  border:1px solid rgba(255,255,255,.13); border-radius:var(--r-lg);
  padding:24px 24px 20px 27px;
  display:flex; flex-direction:column;
  box-shadow:0 22px 55px rgba(0,0,0,.16);
  transition:border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease,
             opacity var(--dur-normal) ease, transform var(--dur-normal) ease;
}
.module-card::before{
  content:""; position:absolute; z-index:-1; width:230px; height:230px;
  right:-105px; top:-110px; border-radius:50%;
  background:radial-gradient(circle,var(--module-accent-soft),transparent 68%);
  pointer-events:none;
}
.module-card[data-status="calibre"]{
  --module-accent:var(--accent-green);
  --module-accent-soft:rgba(74,222,128,.16);
}
.module-card[data-status="en-cours"]{
  --module-accent:var(--accent-terracotta-light);
  --module-accent-soft:rgba(232,93,63,.18);
}
.card-bar{
  position:absolute; z-index:2; inset:20px auto 20px 0; width:3px;
  border-radius:0 4px 4px 0; background:var(--module-accent); opacity:.34;
  transition:opacity var(--dur-fast) ease, inset var(--dur-fast) ease;
}
.module-card:hover .card-bar,.module-card.active .card-bar{ inset-block:0; opacity:1; }
.module-card-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.module-code{
  font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:.13em; color:rgba(245,243,239,.42);
}
.module-identity{ margin-top:40px; min-height:104px; }
.module-eyebrow{
  display:block; margin-bottom:8px; font-size:11px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--module-accent);
}
.module-card h3{ max-width:280px; font-size:clamp(23px,2vw,27px); line-height:1.08; }
.module-count{
  margin-top:22px; padding:16px 0 18px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.module-count-value{ display:flex; align-items:baseline; gap:7px; flex:0 0 auto; }
.module-count-value strong{
  color:var(--text-inverse); font-family:var(--font-display); font-size:34px;
  font-weight:700; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.module-count-value > span{ font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--module-accent); }
.module-count-value.is-pending strong{ font-size:22px; letter-spacing:-.02em; }
.module-count-label{ max-width:112px; font-size:11px; line-height:1.35; text-align:right; color:var(--text-muted); }
.module-card-footer{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto; padding-top:18px; }
.module-meta,.module-evidence{ position:relative; padding-left:13px; font-size:12px; color:var(--text-muted); }
.module-meta::before,.module-evidence::before{
  content:""; position:absolute; left:0; top:.62em; width:4px; height:4px;
  border-radius:50%; background:var(--module-accent);
}
.module-evidence{ text-align:right; }
.badge{
  align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; padding:6px 10px;
  border:1px solid rgba(255,255,255,.1); border-radius:100px;
  background:rgba(255,255,255,.05); color:var(--text-muted);
}
.badge i{ width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(255,255,255,.04); }
.badge-done{ border-color:rgba(74,222,128,.2); background:rgba(74,222,128,.08); color:var(--accent-green); }
.badge-progress{ border-color:rgba(232,93,63,.24); background:rgba(232,93,63,.1); color:var(--accent-terracotta-light); }
.badge-soon{ color:rgba(245,243,239,.6); }

.modules-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:28px; }
.modules-chips button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); min-width:var(--tap); padding:8px 20px;
  border-radius:100px; border:1px solid rgba(255,255,255,.2); background:transparent;
  color:#888888; font-family:var(--font-body); font-size:14px; font-weight:600; cursor:pointer;
  transition:background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.modules-chips button[aria-current="true"]{ background:var(--accent-terracotta); border-color:var(--accent-terracotta); color:var(--bg-dark); }

/* Centred card accent — set by the GSAP carousel (desktop) and by the native
   scroll-snap sync (mobile), so it can't live under .modules-js. */
.module-card.active{
  border-color:rgba(74,222,128,.48);
  border-color:color-mix(in srgb,var(--module-accent) 48%,transparent);
  box-shadow:0 28px 75px rgba(0,0,0,.28),0 0 0 1px var(--module-accent-soft);
}

/* JS-driven carousel (initModulesCarousel) — desktop only. Below 1024px the
   track stays the native scroll-snap carousel declared above. */
body.modules-js .modules-track{ overflow:visible; scroll-snap-type:none; flex-wrap:nowrap; will-change:transform; }
body.modules-js .module-card{
  flex:0 0 350px; height:372px; opacity:.55; transform:scale(.95);
}
body.modules-js .module-card.active{ opacity:1; transform:scale(1); }
body.modules-js .module-card:hover{ transform:translateY(-5px) scale(.95); border-color:rgba(255,255,255,.22); }
body.modules-js .module-card.active:hover{ transform:translateY(-4px) scale(1); }
@media (max-width:480px){
  body.modules-js .module-card{ flex-basis:calc(100vw - 40px); }
  .module-count{ gap:12px; }
}
@media (hover:hover) and (pointer:fine){
  body.modules-js .modules-track{ cursor:grab; }
  body.modules-js .modules-track:active{ cursor:grabbing; }
}

/* Desktop scroll story: Vanta gets a clear opening beat before content enters. */
.modules.is-story{ min-height:100vh; }
.modules.is-story .modules-pin{
  min-height:100vh; padding-block:clamp(48px,7vh,72px);
  display:flex; flex-direction:column; justify-content:center;
}
.modules.is-story .modules-head,
.modules.is-story .modules-chips{
  opacity:0; transform:translateY(24px); pointer-events:none;
  transition:opacity var(--dur-slow) cubic-bezier(.22,1,.36,1),
             transform var(--dur-slow) cubic-bezier(.22,1,.36,1);
}
.modules.is-story .modules-head.story-visible,
.modules.is-story .modules-chips.story-visible{
  opacity:1; transform:none; pointer-events:auto;
}
.modules.is-story .modules-head{ margin-bottom:clamp(20px,3vh,32px); }
.modules.is-story .module-card{
  height:clamp(340px,44vh,372px); opacity:0; pointer-events:none;
  transform:translateY(28px) scale(.95);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),
             transform .55s cubic-bezier(.22,1,.36,1),
             border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.modules.is-story .module-card.story-visible{ opacity:.6; pointer-events:auto; transform:scale(.95); }
.modules.is-story .module-card.story-visible.active{ opacity:1; transform:scale(1); }
.modules.is-story .module-card.story-visible:hover{ transform:translateY(-4px) scale(.95); }
.modules.is-story .module-card.story-visible.active:hover{ transform:translateY(-4px) scale(1); }

/* ---------- tension · Relevé / Lane 02 ---------- */
.tension-releve{
  --glacial-ground:#0a1620;
  --glacial-ice:#e8f4fb;
  --glacial-cyan:#8fc9e8;
  --glacial-deep:#1c6fa8;
  --glacial-blowout:#fff;
  position:relative; isolation:isolate; overflow:clip;
  padding:150px 0 170px;
  background:var(--glacial-ground); color:var(--glacial-ice);
  /* bleed the modules ground in rather than switching green→navy on the line */
  background-image:linear-gradient(to bottom,var(--bg-dark-2),transparent 160px);
}
.tension-releve::before,.tension-releve::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 160px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 160px);
}
.tension-releve::before{
  background:repeating-linear-gradient(to bottom,rgba(232,244,251,.03) 0 1px,transparent 1px 3px);
}
.tension-releve::after{
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tension-wrap{ position:relative; z-index:2; width:min(100%,1200px); margin-inline:auto; padding-inline:48px; }
.tension-header{ max-width:760px; margin-bottom:104px; }
.tension-meta,.tension-plate figcaption,.tension-annotation-label,.tension-annotation-detail,.tension-telemetry,.tension-signature small{
  font-family:var(--font-body); font-size:11px; font-weight:500; text-transform:uppercase;
}
.tension-header h2{
  margin:0; font-size:clamp(38px,4.7vw,66px); line-height:1.02;
}
.tension-sub{
  max-width:48ch; margin:30px 0 0; color:rgba(232,244,251,.52);
  font-size:17px; line-height:1.62;
}
.tension-split{ display:grid; grid-template-columns:44% 1fr; gap:90px; align-items:start; }
.tension-plate{ position:sticky; top:11vh; width:100%; margin:0; }
.tension-plate-frame{ position:relative; width:100%; aspect-ratio:4/5; }
.tension-plate-frame svg{ width:100%; height:100%; overflow:visible; }
.tension-plate-grid path{ fill:none; stroke:var(--glacial-cyan); stroke-width:.5; opacity:.055; }
.tension-soft-tissue{ fill:url(#tension-haze); stroke:var(--glacial-deep); stroke-width:1; opacity:.72; }
.tension-bone,.tension-bone-fine,.tension-spine,.tension-desk{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tension-bone{ stroke:url(#tension-bone); stroke-width:4; opacity:.68; }
.tension-bone-fine{ stroke:var(--glacial-ice); stroke-width:1.2; opacity:.44; }
.tension-spine{ stroke:var(--glacial-blowout); stroke-width:2.5; opacity:.92; }
.tension-vertebrae circle{ fill:var(--glacial-blowout); opacity:.84; }
.tension-desk{ stroke:var(--glacial-cyan); stroke-width:1; opacity:.16; }
.tension-fallback{ transition:opacity .3s ease; }
.tension-real-asset{ opacity:0; transition:opacity .3s ease; }
.tension-releve.has-tension-asset .tension-fallback{ opacity:0; }
.tension-releve.has-tension-asset .tension-real-asset{ opacity:1; }
.tension-annotations>g{ opacity:1; }
.tension-annotations [data-tension-line]{ fill:none; stroke:var(--glacial-cyan); stroke-width:1; stroke-dasharray:420; stroke-dashoffset:0; }
.tension-annotations [data-tension-dot]{ fill:var(--glacial-blowout); stroke:var(--glacial-cyan); stroke-width:2; r:var(--dot-r,4px); }
.tension-annotation-label,.tension-annotation-detail,.tension-telemetry{ fill:var(--glacial-cyan); letter-spacing:.15em; }
.tension-annotation-detail{ fill:var(--glacial-ice); letter-spacing:.08em; opacity:.32; }
.tension-telemetry{ opacity:.32; }
.tension-plate figcaption{ margin-top:18px; color:rgba(143,201,232,.62); letter-spacing:.15em; }
.tension-observation{
  display:flex; min-height:76vh; padding-block:44px; padding-left:var(--observation-stagger);
  flex-direction:column; justify-content:center; border-top:1px solid rgba(143,201,232,.13);
}
.tension-observation:first-child{ border-top:0; }
.tension-meta{ margin-bottom:29px; letter-spacing:.15em; line-height:1.65; }
.tension-meta p{ width:fit-content; margin:0; }
.tension-meta p:first-child{ color:var(--glacial-cyan); }
.tension-meta p:last-child{ color:rgba(232,244,251,.32); letter-spacing:.18em; }
.tension-observation-text{
  max-width:23ch; margin:0; color:var(--glacial-ice);
  font-size:clamp(21px,2.05vw,30px); line-height:1.44;
}
.tension-signature{
  position:absolute; right:clamp(-20px,1.5vw,26px); bottom:26px; z-index:1;
  display:flex; align-items:flex-end; flex-direction:column; pointer-events:none;
}
.tension-signature span{
  color:rgba(143,201,232,.055); font-family:var(--font-display); font-size:clamp(170px,23vw,360px);
  font-weight:700; letter-spacing:-.08em; line-height:.72;
}
.tension-signature small{ margin-top:36px; padding-right:22%; color:rgba(143,201,232,.14); letter-spacing:.34em; }
body.tension-nav-active .nav .nav-cta{ background:#8fc9e8; color:#0a1620; }
body.tension-nav-active .nav .nav-cta:hover{ box-shadow:0 8px 24px rgba(143,201,232,.24); }
.tension-motion-ready .tension-observation{ opacity:.2; transform:translateY(12px); }
.tension-motion-ready .tension-meta p{ clip-path:inset(0 100% 0 0); }
.tension-motion-ready .tension-annotations>g{ opacity:.16; }
.tension-motion-ready .tension-annotations [data-tension-line]{ stroke-dashoffset:420; }
.tension-motion-ready .tension-annotations [data-tension-dot]{ --dot-r:1.6px; }
@media (max-width:899px){
  .tension-releve{ padding:104px 0 120px; }
  .tension-wrap{ padding-inline:24px; }
  .tension-header{ margin-bottom:68px; }
  .tension-split{ grid-template-columns:1fr; gap:58px; }
  .tension-plate{ position:static; width:min(100%,330px); margin-inline:auto; }
  .tension-observation{ min-height:0; padding:52px 0; }
  .tension-observation-text{ max-width:28ch; }
  .tension-signature{ right:-22px; bottom:44px; }
}
@media (prefers-reduced-motion:reduce){
  .tension-motion-ready .tension-observation,.tension-motion-ready .tension-annotations>g{ opacity:1!important; transform:none!important; }
  .tension-motion-ready .tension-meta p{ clip-path:inset(0)!important; }
  .tension-motion-ready .tension-annotations [data-tension-line]{ stroke-dashoffset:0!important; }
  .tension-motion-ready .tension-annotations [data-tension-dot]{ --dot-r:4px!important; }
}

/* ---------- how it works · Boucle / Lane 01 ---------- */
.how-boucle{
  --gel-paper:#f4f7f2;
  --gel-tint:#d9e8c8;
  --gel-pale:#b8e08a;
  --gel-acid:#7fbf3f;
  --gel-deep:#2e6b34;
  --gel-meta:#55704b;
  --gel-ink:#141a12;
  position:relative; isolation:isolate; overflow:hidden;
  padding:150px 0 120px;
  background:var(--gel-paper); color:var(--gel-ink);
}
.how-wrap{ position:relative; z-index:1; width:min(100%,1200px); margin-inline:auto; padding-inline:48px; }
.how-header{ max-width:760px; margin-bottom:96px; }
.how-meta,.how-node,.how-return text{
  font-family:var(--font-body); font-weight:500;
}
.how-header h2{
  margin:0; color:var(--gel-ink);
  font-size:clamp(40px,5.2vw,64px); line-height:1.02;
}
.how-sub{
  max-width:50ch; margin:28px 0 0; color:var(--gel-deep);
  font-size:17px; line-height:1.62;
}
.how-stage{ position:relative; }
.how-plate{
  position:absolute; top:0; left:50%; z-index:0; width:100vw; height:190px;
  transform:translateX(-50%); filter:blur(26px); opacity:1;
  background:
    radial-gradient(ellipse 21% 88% at 11% 58%,rgba(184,224,138,.74),transparent 72%),
    radial-gradient(ellipse 25% 110% at 38% 42%,rgba(127,191,63,.62),transparent 67%),
    radial-gradient(ellipse 18% 90% at 66% 56%,rgba(46,107,52,.38),transparent 72%),
    radial-gradient(ellipse 24% 120% at 89% 38%,rgba(184,224,138,.62),transparent 70%),
    linear-gradient(90deg,rgba(244,247,242,.72),rgba(217,232,200,.86) 28%,rgba(184,224,138,.56) 52%,rgba(244,247,242,.76));
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 70%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 70%,transparent);
}
/* Two layers: the ribbon itself is the *track* (unrun portion); .how-ribbon-fill
   is the run portion and its width/height is the only thing `p` writes here. */
.how-ribbon{
  position:absolute; top:60px; left:-48px; right:-48px; z-index:1; height:14px;
  border-radius:7px;
  background:rgba(46,107,52,.13);
  transform-origin:left center;
}
.how-ribbon-fill{
  position:absolute; top:0; bottom:0; left:0; width:0; border-radius:7px;
  background:linear-gradient(90deg,var(--gel-pale) 0%,var(--gel-acid) 28%,var(--gel-deep) 62%,var(--gel-acid) 100%);
}
.how-ribbon-fill::after{
  content:""; position:absolute; left:7px; right:7px; top:6px; height:2px;
  border-radius:2px; background:rgba(255,255,255,.74);
}
/* CMYK misregistration — deliberate 1px magenta offset. Not a bug. */
.how-ribbon::before{
  content:""; position:absolute; inset:0; border:1px solid #ff3e96; border-radius:inherit;
  transform:translate(1px,1px); opacity:.22; mix-blend-mode:multiply;
}
.how-bead{
  position:absolute; top:50%; left:0; z-index:3; width:11px; height:11px;
  margin:-5.5px 0 0 -5.5px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 4px var(--gel-acid),0 0 22px 7px rgba(127,191,63,.5);
}
.how-bloom{
  position:absolute; top:0; left:0; z-index:0; width:300px; height:190px;
  margin-left:-150px; pointer-events:none; filter:blur(30px);
  background:radial-gradient(circle at 50% 46%,rgba(127,191,63,.34),rgba(184,224,138,.16) 48%,transparent 70%);
}
.how-steps{
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:40px; margin:0; padding:38px 0 0; list-style:none;
}
.how-step{
  display:flex; min-width:0; flex-direction:column;
  opacity:.3; transition:opacity .45s ease;
}
.how-step[data-active="true"]{ opacity:1; }
.how-node{
  display:grid; place-items:center; align-self:center; width:58px; height:58px;
  padding:0; appearance:none; -webkit-appearance:none; cursor:pointer;
  border:1.5px solid var(--gel-acid); border-radius:50%;
  background:rgba(244,247,242,.72); box-shadow:0 0 0 6px var(--gel-paper);
  color:var(--gel-deep); font:inherit; font-size:11px; letter-spacing:.12em;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  transition:background .45s ease,color .45s ease,border-color .45s ease,
             transform .45s ease,box-shadow .45s ease;
}
/* active state is carried by fill + scale + ring + aria-current, never by opacity alone */
.how-step[data-active="true"] .how-node{
  background:var(--gel-deep); border-color:var(--gel-deep); color:#fff;
  transform:scale(1.14);
  box-shadow:0 0 0 6px var(--gel-paper),0 0 0 9px rgba(127,191,63,.38),
             0 0 26px 7px rgba(127,191,63,.34);
}
.how-lead{
  display:block; align-self:center; width:1px; height:var(--lead-length);
  background:color-mix(in srgb,var(--gel-meta) 52%,transparent);
  transition:background .45s ease;
}
.how-step[data-active="true"] .how-lead{ background:var(--gel-acid); }
/* global :focus-visible is accent-green — ~1.6:1 on this paper ground. Override. */
.how-boucle :focus-visible{ outline:3px solid var(--gel-deep); outline-offset:3px; }
.how-step-copy{ margin-top:20px; }
.how-meta{
  min-height:2.8em; margin:0 0 14px; color:var(--gel-meta);
  font-size:11px; line-height:1.4; letter-spacing:.16em; text-transform:uppercase;
}
.how-step h3{
  margin:0 0 13px; color:var(--gel-ink); font-size:21px;
  line-height:1.2; text-transform:lowercase;
}
.how-step-copy>p:last-child{
  margin:0; color:var(--gel-ink); font-size:15px; line-height:1.62;
}
.how-return{ position:relative; z-index:2; width:100%; height:110px; margin-top:42px; overflow:visible; }
.how-return-track,.how-return-live{
  fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.how-return-track{ stroke:var(--gel-deep); opacity:.16; }
.how-return-live{ stroke:var(--gel-acid); }
.how-return-head{ fill:#fff; stroke:var(--gel-acid); stroke-width:3; opacity:0; }
.how-return text{
  fill:var(--gel-meta); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
.how-return-arrow{ fill:var(--gel-acid); opacity:1; }
@media (max-width:880px){
  .how-boucle{ padding:104px 0 88px; }
  .how-wrap{ padding-inline:24px; }
  .how-header{ margin-bottom:64px; }
  .how-header h2{ font-size:clamp(36px,11vw,48px); }
  .how-sub{ margin-top:22px; font-size:16px; }
  .how-plate,.how-return,.how-bloom{ display:none; }
  /* ribbon rotates: vertical spine, fill runs top→bottom */
  .how-ribbon{
    top:22px; bottom:22px; left:17px; right:auto; width:10px; height:auto;
    border-radius:5px; transform-origin:center top;
  }
  .how-ribbon-fill{
    top:0; left:0; right:0; bottom:auto; width:auto; height:0; border-radius:5px;
    background:linear-gradient(180deg,var(--gel-pale) 0%,var(--gel-acid) 28%,var(--gel-deep) 62%,var(--gel-acid) 100%);
    transition:height .5s cubic-bezier(.22,1,.36,1);
  }
  .how-ribbon-fill::after{ top:6px; bottom:6px; left:4px; right:auto; width:2px; height:auto; }
  /* no ticker on mobile — CSS carries the easing instead */
  .how-bead{
    top:0; left:50%; margin:-5.5px 0 0 -5.5px;
    box-shadow:0 0 0 3px var(--gel-acid),0 0 14px 4px rgba(127,191,63,.45);
    transition:top .5s cubic-bezier(.22,1,.36,1);
  }
  .how-steps{ grid-template-columns:1fr; gap:56px; padding:0; }
  .how-step{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:24px; align-items:start; }
  .how-node{
    grid-column:1; width:44px; height:44px; box-shadow:0 0 0 4px var(--gel-paper);
    /* opaque here: without the backdrop blur a translucent fill lets the spine
       read straight through the node instead of passing behind it */
    background:var(--gel-paper);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .how-step[data-active="true"] .how-node{
    box-shadow:0 0 0 4px var(--gel-paper),0 0 0 7px rgba(127,191,63,.38);
  }
  .how-lead{ display:none; }
  .how-step-copy{ grid-column:2; margin:0; }
  .how-meta{ min-height:0; margin-bottom:11px; }
  .how-step h3{ margin-bottom:11px; }
}

/* Reduced motion: every step stays lit (opacity is never the state signal here),
   playhead pins at the end, no bead / bloom / sweep / transitions. */
@media (prefers-reduced-motion:reduce){
  .how-step{ opacity:1; }
  .how-bead,.how-bloom,.how-return-head{ display:none; }
  .how-step,.how-node,.how-lead,.how-ribbon-fill{ transition:none; }
}

/* ======================================================================
   RETENTION PLATE — two light trails in the void. Not a chart: no axis,
   no grid, no frame, no legend chips. The stage box IS the viewBox box
   (aspect-ratio matches 1200/760), so every overlay can be positioned in
   % straight from the SVG user coordinates. Type stays real px that way.
   ====================================================================== */
.retention{
  --rt-pad:clamp(20px,5vh,64px);
  --rt-nav:76px;
  background:var(--qsm-ground);
  height:100dvh;
  position:relative;
  isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--rt-pad) + var(--rt-nav)) var(--rt-gutter) var(--rt-pad);
  overflow:hidden;
}
.rt-stage{
  position:relative;
  width:min(100%,1320px,calc((100dvh - 2 * var(--rt-pad) - var(--rt-nav)) * 1200 / 760));
  aspect-ratio:1200/760;
  font-family:var(--font-mono);
  text-transform:none;
  letter-spacing:var(--rt-tracking);
  font-weight:400;
  font-feature-settings:"tnum" 1;
  font-variant-numeric:tabular-nums;
}
.rt-svg,.rt-haze,.rt-typo-overlay,.rt-scan,.rt-grain{ position:absolute; inset:0; }
.rt-svg,.rt-typo-overlay,.rt-typo-overlay *{ background:transparent; }
.rt-svg{ z-index:1; width:100%; height:100%; display:block; border:none; outline:none; }
.rt-haze{ z-index:2; pointer-events:none; }
.rt-typo-overlay{ z-index:3; pointer-events:none; }
.rt-scan{ z-index:4; pointer-events:none; }
.rt-grain{ z-index:5; pointer-events:none; }
.rt-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* trails */
.rt-trail{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.rt-body{ stroke-width:1.6; }
.rt-core{ stroke-width:.6; opacity:.55; mix-blend-mode:screen; }
.rt-halo{ stroke-width:7; opacity:.16; filter:blur(9px); }
.rt-decay .rt-body{ stroke:url(#rtDecayFade); }
.rt-decay .rt-core{ stroke:url(#rtDecayCore); }
.rt-decay .rt-halo{ stroke:url(#rtDecayFade); }
.rt-ember .rt-body{ stroke:var(--rt-ember); }
.rt-ember .rt-core{ stroke:var(--rt-ember-core); }
.rt-ember .rt-halo{ stroke:var(--rt-ember); }
.rt-ghost{ fill:none; stroke:var(--rt-cyan); stroke-width:1.6; opacity:.22; mix-blend-mode:screen; }
.rt-bloom{ mix-blend-mode:screen; }

/* Shared material stack: every layer is a leaf over the same section ground. */
.rt-haze{
  mix-blend-mode:screen;
  opacity:.14;
  transform-origin:50% 50%;
  background-image:radial-gradient(ellipse 38% 28% at 54% 68%,
    color-mix(in srgb,var(--rt-cyan) 40%,var(--rt-haze)) 0%,
    var(--rt-haze) 42%,transparent 72%);
  filter:blur(40px);
}
.rt-scan{
  mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(to bottom,var(--rt-scanline) 0 1px,transparent 1px 3px);
}
.rt-grain{
  mix-blend-mode:overlay;
  opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* metadata typography */
.rt-rail,.rt-meta-col,.rt-tick{ position:absolute; pointer-events:none; color:var(--rt-meta); }
.rt-rail{ top:0; left:0; font-size:var(--rt-font-rail); opacity:var(--rt-opacity-meta); }
.rt-hair{
  position:absolute; left:0; top:var(--rt-meta-top);
  width:var(--rt-hair-width); height:var(--rt-hair-height);
  border-left:var(--rt-hair-width) solid var(--rt-meta);
  opacity:var(--rt-opacity-meta); transform-origin:top;
}
.rt-meta-col{ top:var(--rt-column-top); right:0; text-align:right; }
.rt-tel{ font-size:var(--rt-font-rail); line-height:2.1; }
.rt-tel span{ display:block; }
.rt-tel-label{ opacity:var(--rt-opacity-meta); }
.rt-tel .rt-count-decay{ color:var(--rt-blue); opacity:var(--rt-opacity-blue); }
.rt-tel .rt-count-ember{ color:var(--rt-ember-core); opacity:var(--rt-opacity-ember); }
.rt-serial{ margin-top:var(--rt-serial-gap); font-size:var(--rt-font-serial); letter-spacing:var(--rt-tracking-serial); opacity:var(--rt-opacity-serial); }
.rt-tick{ font-size:var(--rt-font-tick); color:var(--rt-tick); transform:translateX(-50%); }
.rt-tick-mark{
  display:block; width:var(--rt-hair-width); height:var(--rt-tick-height);
  margin:0 auto; border-left:var(--rt-hair-width) solid currentColor;
  opacity:var(--rt-opacity-mark); transform-origin:top;
}
.rt-tick-label{ display:block; margin-top:var(--rt-tick-gap); opacity:var(--rt-opacity-tick); }
.rt-tick.is-collision-hidden{ display:none; }

body.anim-ready .rt-rail,
body.anim-ready .rt-tel span,
body.anim-ready .rt-serial,
body.anim-ready .rt-tick-label{ opacity:0; }
body.anim-ready .rt-tick-mark{ transform:scaleY(0); }
body.anim-ready .rt-haze{ opacity:0; }
body.anim-ready .rt-hair{ transform:scaleY(0); }

body.rt-nav-quiet .nav{ opacity:.22; transition:opacity var(--dur-normal) ease; }
body.rt-nav-quiet .nav:hover,
body.rt-nav-quiet .nav:focus-within{ opacity:1; }

@media (max-width:767px){
  .retention{ --rt-nav:64px; --rt-column-top:0%; }
  .rt-scan{ opacity:.5; }
  .rt-halo{ opacity:.10; filter:blur(6px); }
  .rt-body{ stroke-width:2.4; }
  .rt-tel .rt-tel-label{ display:none !important; }
  .rt-tick{ font-size:var(--rt-font-tick-mobile); }
}

/* ---------- method · kinetic statement ----------
   Second half of the retention movement: same near-black ground, same instrument
   metadata, same scan/grain stack (classes reused, not re-declared). Type is set
   ragged-left, never centred display type. Chars are muted until the scrub lights
   them; without JS/motion they stay lit (see .anim-ready guard below). */
.method{
  background:var(--qsm-ground);
  color:var(--text-inverse);
  position:relative;
}
.mth-track{ height:260vh; }
.mth-stage{
  position:sticky; top:0;
  height:100dvh;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(20px,4vh,48px);
  padding:calc(clamp(20px,5vh,64px) + 76px) var(--rt-gutter) clamp(20px,5vh,64px);
}
/* Same ground as .retention above, but these overlays are full-bleed here (the
   retention pair lives inside the narrower stage box), so their overlay-blend
   lift used to start on a hard line at the section boundary. Fade them in. */
.mth-stage > .rt-scan,.mth-stage > .rt-grain{
  position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 22%);
}
.mth-stage > .rt-scan{ z-index:4; }
.mth-stage > .rt-grain{ z-index:5; }

.mth-rail,.mth-source{
  font-family:var(--font-mono);
  font-size:var(--rt-font-rail);
  letter-spacing:var(--rt-tracking);
  color:var(--rt-meta);
  opacity:var(--rt-opacity-meta);
}
.mth-hair{
  position:absolute; left:var(--rt-gutter); top:var(--rt-meta-top);
  width:var(--rt-hair-width); height:var(--rt-hair-height);
  border-left:var(--rt-hair-width) solid var(--rt-meta);
  opacity:var(--rt-opacity-meta); transform-origin:top;
}

.mth-type{ align-self:center; margin-left:clamp(0px,4vw,72px); }
.mth-h{
  /* ch resolves against the display size, so the measure has to live here — not on
     the 16px wrapper, where 22ch is two characters wide at this scale. */
  max-width:15ch;
  font-family:var(--font-display);
  font-size:clamp(2.6rem,8.4vw,7.4rem);
  line-height:.94;
  letter-spacing:-.03em;
  font-weight:500;
  margin:0;
  text-wrap:balance;
}
.mth-line{ display:block; color:var(--text-inverse); }
.mth-line .word{ display:inline-block; }
.mth-line .char{ display:inline-block; }
.mth-line-ember{ margin-top:.12em; color:var(--rt-ember-core); }
.mth-body{
  max-width:46ch;
  margin-top:clamp(20px,3vh,36px);
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.65;
  color:var(--rt-tick);
}

.mth-meta{
  align-self:end;
  display:flex; flex-direction:column; gap:10px;
  max-width:58ch;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:clamp(14px,2vh,22px);
}
.mth-quote{
  margin:0;
  font-size:clamp(14px,1.05vw,17px);
  line-height:1.55;
  font-style:italic;
  color:var(--rt-tick);
  border-left:1px solid var(--rt-ember);
  padding-left:14px;
}

/* Short viewports can't afford 100dvh of chrome-free type — drop the sticky hold
   and let the stage be exactly as tall as its content (initMethod() mirrors this
   breakpoint to pick a viewport-crossing scrub range instead of a held one). */
@media (max-height:560px),(max-width:640px){
  .mth-track{ height:auto; }
  .mth-stage{
    position:static; height:auto;
    display:block;
    padding-block:88px 64px;
  }
  .mth-hair{ display:none; }
  .mth-type{ margin-left:0; margin-top:clamp(28px,6vh,56px); }
  .mth-meta{ margin-top:clamp(32px,7vh,64px); }
}

/* ---------- SECTION 7 · proof / calibration ----------
   Tokens are scoped to .proof on purpose — this section runs its own paper/ink
   register (deliberately NOT --bg-light-2 / --accent-terracotta) and must not
   leak into the global palette. Terracotta = red pen, green = validated layer;
   both appear as strokes only, never as fills, which is what keeps the accent
   inside budget. Radius 0 is a hard rule here, hence the blanket reset. */
.proof{
  --paper:#EFE9DE; --paper-2:#E8E0D2; --paper-3:#E1D8C8;
  --ink:#1B140D; --ink-2:#4A4034; --field:#8A7E70;
  --hair:rgba(27,20,13,.14);
  --terra:#A9503A; --green:#2E6B34;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  position:relative; isolation:isolate;
  background:var(--paper); color:var(--ink);
  font-family:var(--font-display); font-weight:400;
  padding-block:clamp(72px,10vw,144px);
}
.proof *{ border-radius:0; }
/* Posterised paper grain — rendered once, multiply, never animated. */
.proof::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
.proof > .container{ position:relative; z-index:2; }

.pf-head{ margin-bottom:clamp(44px,7vw,88px); }
.pf-eyebrow,.pf-tab,.pf-flag,.pf-key,.pf-note,.pf-caption,.pf-sign-line{
  font-family:var(--font-mono); font-size:11px; line-height:1.7;
}
.pf-eyebrow,.pf-tab,.pf-flag,.pf-key{ text-transform:uppercase; letter-spacing:.15em; }
.pf-eyebrow{ color:var(--field); }
.proof h2{
  margin-top:20px; max-width:20ch;
  font-weight:600; font-size:clamp(30px,4.4vw,58px);
  letter-spacing:-.02em; line-height:1.02; color:var(--ink);
}
.pf-sub{ margin-top:20px; max-width:54ch; font-size:14px; line-height:1.62; color:var(--ink-2); }

.pf-grid{
  display:grid; gap:clamp(36px,5vw,56px); grid-template-columns:1fr;
  grid-template-areas:"lead" "evidence" "rest" "sign";
}
.pf-evidence{ grid-area:evidence; }
.pf-lead-stat{ grid-area:lead; }
.pf-rest{ grid-area:rest; }
.pf-sign{ grid-area:sign; }

/* --- evidence: stacked index cards, annale (back-left) → Quismo (front-right) --- */
.pf-card{ border:1px solid var(--hair); padding:clamp(20px,2.6vw,32px); }
/* extra bottom padding = the strip card B overlaps into, so it never eats option D */
.pf-card-a{ background:var(--paper-3); padding-bottom:clamp(32px,4vw,60px); }
.pf-card-b{
  position:relative; z-index:2;
  background:var(--paper-2); border-top:2px solid var(--green);
  margin:16px 0 0 12px; box-shadow:-4px -4px 0 rgba(27,20,13,.12);
}
.pf-tab{ display:inline-block; margin-bottom:18px; padding-bottom:7px; border-bottom:1px solid var(--hair); color:var(--field); }
.pf-stem{ font-size:clamp(15px,1.4vw,17px); font-weight:500; line-height:1.5; }
.pf-stem b{ font-weight:600; color:var(--terra); border-bottom:2px solid var(--terra); }
.pf-options{ list-style:none; display:grid; gap:11px; margin-top:20px; font-size:14px; line-height:1.5; color:var(--ink-2); }
.pf-options li{ display:flex; gap:14px; }
.pf-options span{ flex:0 0 auto; font-family:var(--font-mono); font-size:11px; letter-spacing:.15em; color:var(--field); padding-top:2px; }
.pf-flag{ margin-bottom:14px; padding-left:10px; border-left:2px solid var(--terra); color:var(--terra); }
.pf-answer,.pf-trap{ margin-top:18px; font-size:14px; line-height:1.62; color:var(--ink-2); }
.pf-answer b,.pf-trap b{ font-weight:600; color:var(--ink); }
.pf-key{ display:block; margin-bottom:7px; color:var(--field); }

/* The one hand in the artifact: a drawn ellipse around FAUSSE. */
.pf-circled{ position:relative; display:inline-block; white-space:nowrap; }
.pf-ring{
  position:absolute; left:-9%; top:-48%; width:118%; height:196%;
  overflow:visible; fill:none; stroke:var(--terra); stroke-width:2.2;
  stroke-linecap:round; vector-effect:non-scaling-stroke;
}

.pf-marks{ display:grid; gap:16px; margin-top:28px; }
.pf-note{ display:flex; gap:12px; align-items:flex-start; letter-spacing:.02em; }
.pf-note-a{ color:var(--terra); }
.pf-note-b{ color:var(--green); }
.pf-leader{ flex:0 0 44px; width:44px; height:24px; fill:none; stroke:var(--terra); stroke-width:1.4; }
.pf-check{ flex:0 0 18px; width:18px; height:18px; margin-top:2px; fill:none; stroke:var(--green); stroke-width:2.4; stroke-linecap:square; }
.pf-caption{ margin-top:26px; padding-top:18px; border-top:1px solid var(--hair); letter-spacing:.04em; color:var(--field); }

/* --- support: static spec-sheet numbers + signature --- */
.pf-stat{ display:grid; gap:8px; }
.pf-stat .pf-key{ margin:0; }
.pf-num{ font-weight:600; font-size:clamp(34px,3.6vw,52px); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.pf-desc{ max-width:30ch; font-size:14px; line-height:1.62; color:var(--ink-2); }
.pf-rest{ display:grid; gap:32px; padding-top:28px; border-top:1px solid var(--hair); }
.pf-sign{ display:flex; gap:16px; align-items:flex-start; padding-top:28px; border-top:1px solid var(--hair); }
.pf-monogram{ flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; background:var(--terra); color:#fff; font-weight:700; font-size:17px; }
.pf-sign-copy{ display:grid; gap:7px; }
.pf-sign-name{ font-size:14px; font-weight:600; color:var(--ink); }
.pf-sign-line{ letter-spacing:.02em; color:var(--field); }

/* ---------- pricing ---------- */
.pricing{ padding-block:var(--pad-section); }
.pricing .section-head{ margin-inline:auto; text-align:center; }
.pricing-grid{ display:grid; grid-template-columns:1fr; gap:24px; max-width:860px; margin-inline:auto; }
.price-card{ position:relative; background:#fff; border:1px solid var(--border-dark); border-radius:var(--r-lg); padding:40px 32px; display:flex; flex-direction:column; }
.price-featured{ border-color:var(--accent-terracotta); box-shadow:var(--shadow-featured); }
.price-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent-terracotta); color:#fff; font-size:12px; font-weight:600; padding:6px 16px; border-radius:100px; }
.price-card h3{ font-size:22px; }
.price{ margin-top:14px; font-size:16px; color:var(--text-secondary); }
.price-amount{ font-family:var(--font-display); font-weight:700; font-size:40px; color:var(--text-primary); }
.price-per{ font-size:15px; }
.price-was{ font-size:16px; color:var(--text-secondary); }
.price-sub{ margin-top:6px; font-size:14px; color:var(--text-secondary); }
.price-ladder{ margin-top:32px; text-align:center; font-size:15px; color:var(--text-secondary); }
.price-features{ list-style:none; display:grid; gap:12px; margin:24px 0 28px; }
.price-features li{ position:relative; padding-left:30px; font-size:14px; color:var(--text-primary); }
.price-features li::before{ content:"✓"; position:absolute; left:0; top:-1px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:12px; background:rgba(74,222,128,.14); color:var(--accent-green-dark); }
.price-features .feat-head{ padding-left:0; font-weight:600; color:var(--text-secondary); }
.price-features .feat-head::before{ content:none; }
.price-card .btn{ margin-top:auto; }
.payment{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-top:48px; }
.payment-label{ font-size:14px; color:var(--text-secondary); }
.pay-pill{ padding:10px 20px; background:#fff; border:1px solid var(--border-dark); border-radius:var(--r-sm); font-size:14px; font-weight:500; color:var(--text-secondary); }
.reassurance{ margin-top:24px; text-align:center; font-size:14px; color:var(--text-secondary); }

/* ---------- faq ---------- */
.faq{ padding-block:var(--pad-section); }
.faq-container{ max-width:720px; }
.faq-item{ background:#fff; border:1px solid var(--border-dark); border-radius:var(--r-md); margin-bottom:12px; overflow:hidden; }
.faq-item summary{ list-style:none; cursor:pointer; padding:20px 24px; font-size:15px; font-weight:600; color:var(--text-primary); display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:var(--tap); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-icon{ position:relative; flex:0 0 auto; width:20px; height:20px; }
.faq-icon::before,.faq-icon::after{ content:""; position:absolute; background:var(--accent-terracotta); border-radius:2px; }
.faq-icon::before{ top:9px; left:2px; right:2px; height:2px; }
.faq-icon::after{ left:9px; top:2px; bottom:2px; width:2px; transition:transform var(--dur-fast) ease, opacity var(--dur-fast) ease; }
.faq-item[open] .faq-icon::after{ transform:scaleY(0); opacity:0; }
.faq-body{ padding:0 24px 20px; overflow:hidden; }
.faq-body p{ font-size:15px; color:var(--text-secondary); }

/* ---------- final cta ---------- */
.final-cta{ padding-block:clamp(100px,14vw,160px); }
.cta-inner{ max-width:720px; text-align:center; }
.cta-inner h2{ font-size:clamp(30px,5.5vw,52px); }
.cta-sub{ margin-top:16px; color:var(--text-muted); font-size:19px; }
.btn-magnetic{ margin-top:32px; will-change:transform; }
.cta-risk{ margin-top:18px; font-size:14px; color:var(--text-muted); }

/* ---------- footer ---------- */
.footer{ padding:64px 0 32px; border-top:1px solid var(--border-light); }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:36px; }
.footer-mark{ font-family:var(--font-display); font-weight:700; font-size:22px; }
.footer-brand p{ margin-top:10px; color:var(--text-muted); font-size:14px; max-width:280px; }
.footer-col h4{ font-family:var(--font-body); font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:14px; }
.footer-col a{ display:flex; align-items:center; min-height:var(--tap); padding:6px 0; color:var(--text-inverse); font-size:14px; }
.footer-col a:hover{ color:var(--accent-green); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-top:48px; padding-top:24px; border-top:1px solid var(--border-light); font-size:13px; color:var(--text-muted); }
.lang-switch{ display:inline-flex; gap:4px; }
.lang-switch button{ min-height:var(--tap); min-width:var(--tap); padding:8px 14px; background:transparent; border:1px solid var(--border-light); border-radius:var(--r-sm); color:var(--text-muted); font-size:13px; cursor:pointer; }
.lang-switch button[aria-pressed="true"]{ background:var(--text-inverse); color:var(--bg-dark); border-color:var(--text-inverse); }

/* ======================================================================
   REVEAL — hidden only when JS confirms animation is on (body.anim-ready).
   Without JS / GSAP / when reduced-motion → content is visible by default.
   ====================================================================== */
body.anim-ready [data-reveal]{ opacity:0; transform:translateY(30px); }
body.anim-ready [data-reveal].is-in{ opacity:1; transform:none; transition:opacity var(--dur-slow) ease, transform var(--dur-slow) ease; }

/* ======================================================================
   DESKTOP (≥1024px) — pins, horizontal scroll, connector line, magnetic
   ====================================================================== */
/* Proof — 60/40 above the mobile reorder point (evidence dominant, stats support) */
@media (min-width:821px){
  .pf-grid{
    grid-template-columns:60fr 40fr;
    column-gap:clamp(40px,6vw,88px); row-gap:40px;
    grid-template-areas:"evidence lead" "evidence rest" "evidence sign";
    /* last row absorbs the height the tall evidence column adds, so the stat
       strip stays packed at the top instead of drifting apart */
    grid-template-rows:auto auto 1fr;
  }
  .pf-lead-stat,.pf-rest,.pf-sign{ align-self:start; }
  /* Quismo card lifts up-left over the annale and casts the hard offset shadow */
  .pf-card-b{ margin:-28px 0 0 clamp(24px,5vw,56px); box-shadow:-6px -6px 0 rgba(27,20,13,.14); }
}

@media (min-width:1024px){
  .pricing-grid{ grid-template-columns:repeat(2,1fr); align-items:start; }
  .price-featured{ transform:scale(1.03); }
}

/* Tablet 2-col tension */
@media (min-width:640px) and (max-width:1023px){
  .pricing-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr; }
}
@media (min-width:1024px){
  .footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr; }
}

/* ======================================================================
   REDUCED MOTION — kill transitions/animation; reveals already visible.
   ====================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .scroll-cue{ display:none; }
  .manifesto .phrase{ color:var(--text-inverse); }
  .manifesto .phrase .accent{ color:var(--accent-terracotta); }
  body.modules-js .module-card{ opacity:1; transform:scale(1); }
  body.modules-js .card-bar{ inset-block:0; opacity:1; }
}

/* ======================================================================
   PHONE (≤767px). The cinematic now runs here too (2026-08-04); the sizing
   below still matters because these sections were re-fitted for a phone
   viewport, and the pins inherit whatever height that leaves them.
   ====================================================================== */
@media (max-width:767px){
  /* The CTA was 213px of a 375px bar, crowding the wordmark. */
  .nav-inner{ padding:12px 20px; gap:12px; }
  .nav-cta{ padding:9px 14px; font-size:13px; letter-spacing:-.01em; }

  /* h1 sat 7px under the fixed bar. Clear it properly. */
  .hero-inner{ padding-block:112px 32px; }
  .hero-title{ font-size:clamp(34px,9vw,42px); }
  .hero-sub{ margin-top:18px; font-size:16px; }
  .hero-cta{ margin-top:24px; gap:10px; }
  .hero-cta .btn{ width:100%; }

  /* Three stacked stats ran 306px tall and collided with the scroll cue —
     which is meaningless on a touch device anyway. */
  .proof-strip{ gap:20px; margin-top:26px; }
  .stat{ font-size:28px; }
  .stat-label{ font-size:12px; max-width:none; }
  .scroll-cue{ display:none; }

  /* Section heads use --pad-section (72px here) and so land under the 74px
     bar. The nav retracts on scroll-down, but the first paint doesn't. */
  .modules-pin{ padding-top:calc(var(--pad-section) + 40px); }

  /* Was height:100dvh (812px) around a 217px plate — ~470px of dead black. */
  .retention{ height:auto; padding-bottom:calc(var(--rt-pad) * 2); }
}