/* ============================================================
   MINDFLOV — Neural Cartography design system
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Void */
  /* Lifted, brand-tinted ground — reads as ink, not a black hole */
  --void:        #100d21;
  --void-2:      #181433;
  --surface:     #1f1a42;
  --surface-2:   #282152;
  --line:        rgba(255,255,255,.16);
  --line-2:      rgba(255,255,255,.28);

  /* Ink */
  --ink:         #f6f5ff;
  --ink-2:       rgba(246,245,255,.76);
  --ink-3:       rgba(246,245,255,.56);
  --ink-4:       rgba(246,245,255,.38);

  /* Mode palette — lifted straight from the app */
  --indigo:      #818cf8;
  --rose:        #f472b6;
  --amber:       #fbbf24;
  --cyan:        #22d3ee;
  --emerald:     #10b981;
  --violet:      #a855f7;
  --red:         #ef4444;

  /* Brand — from the supplied logo mark */
  --brand:       #3b00ee;
  --brand-lift:  #6a3cff;   /* legible against near-black where #3b00ee is too dark */
  --accent:      var(--brand-lift);

  /* Type — modern grotesque, contrast carried by weight and scale, not by serifs */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* Rhythm */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --bay: clamp(5rem, 13vw, 11rem);
  --maxw: 1320px;
  --readw: 68ch;

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

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--brand-lift); color: #fff; }
.grain { opacity: .028; }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.03em; }

/* Display sizes: heavy grotesque, optically tightened as they grow. */
.d1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 7vw, 6rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.045em;
}
.d2 {
  font-family: var(--display);
  font-size: clamp(2rem, 4.6vw, 3.7rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.04em;
}
.d3 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.032em;
}
.d4 {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.28;
  font-weight: 650;
  letter-spacing: -.022em;
}
/* Emphasis is a weight shift, not a style shift. Colour is reserved for display
   type, where it reads as art direction rather than as a link. */
em, .it { font-style: normal; font-weight: 550; color: var(--ink); }
.d0 em, .d1 em, .d2 em, .d3 em { font-weight: inherit; color: var(--brand-lift); }

.lede {
  font-size: clamp(1.12rem, 1.75vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
  font-weight: 350;
}
.body { color: var(--ink-2); max-width: var(--readw); }
.body p + p { margin-top: 1.1em; }
.body strong { color: var(--ink); font-weight: 550; }

.eyebrow {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: .85em;
  margin: 0 0 1.6rem;
  font-weight: 600;
}
/* a solid brand rule instead of a hairline — the label has to register as a label */
.eyebrow::before {
  content: "";
  width: 26px; height: 3px; border-radius: 2px;
  background: var(--brand-lift);
  opacity: 1;
  flex: none;
}
.lite .eyebrow { color: #3b3374; }
.lite .eyebrow::before { background: var(--brand); }

/* ---------- 4. Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: 940px; }
section { position: relative; }
.bay { padding-block: var(--bay); }
/* a barely-there wash keeps long content sections from reading as a void */
.bay::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 55% at 50% 0%, rgba(106,60,255,.10), transparent 70%);
}
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.grid { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr); gap: clamp(2rem,6vw,6rem); align-items: start; }

@media (max-width: 900px) {
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
}

/* ---------- 5. Ambient canvas ---------- */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .85;
}
.field canvas { width: 100%; height: 100%; display: block; }
.page { position: relative; z-index: 1; }

/* Vignette so text always wins */
.veil {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(125% 85% at 50% 0%, transparent 52%, rgba(16,13,33,.38) 100%);
}

/* ---------- 6. Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s;
  border-bottom: 1px solid transparent;
}
.nav.stuck {
  background: rgba(16,13,33,.78);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-bottom-color: var(--line);
}
.nav-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: 1.15rem var(--gut);
  display: flex; align-items: center; gap: 2.4rem;
}
.brand {
  display: flex; align-items: center;
  margin-right: auto;
  line-height: 0;
}
.brand-lockup {
  height: 24px; width: auto; display: block;
  transition: opacity .25s var(--ease);
}
.brand:hover .brand-lockup { opacity: .78; }
.foot .brand-lockup { height: 26px; }
@media (max-width: 520px) { .brand-lockup { height: 21px; } }
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a {
  font-size: .875rem; color: var(--ink-3);
  transition: color .25s var(--ease);
  position: relative;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a.btn { color: var(--ink); font-size: .875rem; }
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #fff; }
.nav-links a.btn[aria-current="page"]::after { display: none; }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--brand-lift);
}
/* --- FOR PROFESSIONALS dropdown ---------------------------------------------
   The parent stays a real link to the hub; the panel is pure hover + focus-within
   so it needs no JS and works from the keyboard. `.here` marks the section on the
   three profession pages, where the parent is not itself the current page. */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop > a { display: inline-flex; align-items: center; gap: .4em; }
.nav-car { opacity: .55; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-drop:hover > a, .nav-drop:focus-within > a { color: var(--ink); }
.nav-drop:hover .nav-car, .nav-drop:focus-within .nav-car { transform: rotate(180deg); opacity: 1; }
.nav-drop.here > a { color: var(--ink); }
.nav-drop.here > a::after {
  content: ""; position: absolute; left: 0; right: 18px; bottom: -6px;
  height: 2px; background: var(--brand-lift); opacity: .5;
}
.nav-menu {
  position: absolute; top: 100%; left: -1.15rem;
  /* the top padding is a hover bridge — without it the panel closes as the
     cursor crosses the gap between the trigger and the menu */
  padding-top: 1.1rem;
  min-width: 310px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
.nav-menu::before {   /* the panel itself, so the bridge above stays transparent */
  content: ""; position: absolute; inset: 1.1rem 0 0 0;
  border: 1px solid var(--line-2); border-radius: 16px;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(59,0,238,.18), transparent 62%),
    rgba(16,13,33,.94);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.8);
}
.nav-menu > * { position: relative; z-index: 1; }
.nm-k {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  margin: 0; padding: .95rem 1.15rem .5rem;
}
.nav-links .nav-menu a {
  display: block; padding: .62rem 1.15rem;
  font-size: .875rem; color: var(--ink-2);
  transition: background .22s var(--ease), color .22s var(--ease);
}
.nav-links .nav-menu a:last-child { padding-bottom: .95rem; }
.nav-links .nav-menu a:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.nav-links .nav-menu a[aria-current="page"] { color: var(--ink); }
.nav-links .nav-menu a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; top: .55rem; bottom: .55rem; right: auto;
  width: 2px; height: auto; background: var(--brand-lift);
}
.nm-t { display: block; font-weight: 500; letter-spacing: -.01em; }
.nm-h { display: block; font-size: .78rem; color: var(--ink-3); margin-top: .12rem; }

.nav-toggle { display: none; padding: .4rem; margin: -.4rem -.4rem -.4rem 0; }

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 60px 0 auto 0;
    flex-direction: column; align-items: flex-start;
    gap: 0;
    background: rgba(16,13,33,.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--line);
    padding: .5rem var(--gut) 1.6rem;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; }
  .nav-links a { padding: .95rem 0; width: 100%; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav-links .btn { margin-top: 1.1rem; border-bottom: 0; }
  /* In the drawer there is nothing to hover, so the panel is just always open */
  .nav-drop { display: block; width: 100%; }
  .nav-drop > a { width: 100%; }
  .nav-car { display: none; }
  .nav-drop.here > a::after { display: none; }
  .nav-menu {
    position: static; opacity: 1; pointer-events: auto;
    transform: none; padding-top: 0; min-width: 0; width: 100%;
    /* `inherit`, NOT `visible` — visibility is inherited, so a hard `visible` here
       overrode the closed drawer and left these four links focusable and exposed
       to assistive tech while the menu was shut. */
    visibility: inherit;
  }
  .nav-menu::before { content: none; }
  .nm-k { padding: .9rem 0 .2rem; }
  .nav-links .nav-menu a { padding: .7rem 0 .7rem 1.1rem; font-size: .94rem; }
  .nav-links .nav-menu a:last-child { border-bottom: 1px solid var(--line); padding-bottom: .7rem; }
  .nav-links .nav-menu a[aria-current="page"]::after { top: .5rem; bottom: .5rem; }
  .nm-h { font-size: .8rem; }
}

/* ---------- 7. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .78rem 1.5rem;
  border-radius: 999px;
  font-size: .89rem; font-weight: 500; letter-spacing: -.01em;
  border: 1px solid var(--line-2);
  color: var(--ink);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), color .3s;
  white-space: nowrap;
}
.btn:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); transform: translateY(-1px); }
.btn-primary {
  background: var(--brand); color: #fff; border-color: var(--brand);
  font-weight: 560;
  box-shadow: 0 0 0 0 rgba(59,0,238,.5);
  transition: background .3s var(--ease), border-color .3s var(--ease),
              transform .3s var(--ease), box-shadow .45s var(--ease);
}
.btn-primary:hover {
  background: var(--brand-lift); border-color: var(--brand-lift); color: #fff;
  box-shadow: 0 0 34px -4px rgba(106,60,255,.55);
}
.btn-ghost { border-color: transparent; padding-inline: 0; color: var(--ink-2); }
.btn-ghost:hover { background: none; color: var(--ink); transform: none; }
.btn .arw { transition: transform .35s var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }

.cta-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* ---------- 8. Cards ---------- */
.card {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  overflow: hidden;
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}
.card:hover { border-color: var(--line-2); }
.card--link:hover { transform: translateY(-3px); }
.card h3 { font-size: 1.12rem; font-weight: 550; letter-spacing: -.02em; margin-bottom: .55rem; }
.card p { margin: 0; color: var(--ink-3); font-size: .93rem; line-height: 1.6; }
.card .idx {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  color: var(--ink-4); display: block; margin-bottom: 1.4rem;
}
/* colored top-edge glow, driven by --c */
.card[style*="--c"]::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: .5; transition: opacity .45s;
}
.card[style*="--c"]:hover::before { opacity: 1; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--indigo)); flex: none; box-shadow: 0 0 12px var(--c, var(--indigo)); }

/* ---------- 9. Figures ---------- */
figure { margin: 0; }
.fig {
  position: relative; overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--void-2);
}
.fig img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out), opacity .9s var(--ease);
}
.fig--tall { aspect-ratio: 4/5; }
.fig--wide { aspect-ratio: 16/9; }
.fig--band { aspect-ratio: 21/9; border-radius: 0; border-inline: 0; }
.fig--sq { aspect-ratio: 1; }
figcaption {
  margin-top: .9rem; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-4);
}

/* ---------- 10. Reveal ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .09s } .rv-d2 { transition-delay: .18s }
.rv-d3 { transition-delay: .27s } .rv-d4 { transition-delay: .36s }
.rv-d5 { transition-delay: .45s } .rv-d6 { transition-delay: .54s }

/* word-by-word display reveal */
.sp-w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  /* extend the clip box below the baseline so descenders survive the mask */
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.sp-w > i {
  display: inline-block; font-style: inherit;
  transform: translateY(102%);
  transition: transform 1.05s var(--ease-out);
}
.in .sp-w > i, .sp.in .sp-w > i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .sp-w > i { transform: none; transition: none; }
  .field { display: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 11. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 6rem; padding-bottom: 3rem;
}
.hero-sub {
  min-height: 92svh;
  padding-top: 8.5rem;
}
.hero-sub .scroll-cue { display: none; }
.scroll-cue {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .63rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-4);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
.scroll-cue::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(var(--ink-4), transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0%,100% { opacity: .25; transform: scaleY(.6); transform-origin: top } 50% { opacity: 1; transform: scaleY(1) } }

/* ============================================================
   24. CINEMATIC LAYER — full-bleed imagery, parallax, grain
   ============================================================ */

/* --- global film grain: kills digital sterility --- */
.grain {
  position: fixed; inset: -50%; z-index: 3; pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grainshift 7s steps(6) infinite;
}
@keyframes grainshift {
  0%,100% { transform: translate3d(0,0,0) }
  20% { transform: translate3d(-3%,2%,0) }
  40% { transform: translate3d(2%,-3%,0) }
  60% { transform: translate3d(-2%,-2%,0) }
  80% { transform: translate3d(3%,1%,0) }
}

/* --- cinematic full-bleed section --- */
.cine {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  isolation: isolate;
}
.cine--tall { min-height: 100svh; }
.cine--mid  { min-height: 82svh; align-items: center; }

.cine-media {
  position: absolute; inset: -14% 0;   /* overscan gives parallax room */
  z-index: 0;
  will-change: transform;
}
.cine-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  /* one grade for every frame, so mixed sources read as a single film */
  filter: saturate(.94) contrast(1.06) brightness(1.02);
}
/* colour grade + legibility scrim, driven by --grade */
.cine-grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16,13,33,.72) 0%, rgba(16,13,33,.06) 30%, rgba(16,13,33,.30) 66%, var(--void) 99%),
    radial-gradient(85% 75% at var(--gx,30%) 50%, transparent 34%, rgba(16,13,33,.42) 100%);
}
.cine-grade::after {   /* duotone wash — unifies disparate photography */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, var(--grade, rgba(129,140,248,.30)), transparent 58%, rgba(34,211,238,.18));
  mix-blend-mode: soft-light;
}

/* --- FLAT BANDS: images drawn in the diagram's own language ------------------
   The grade above exists to reconcile disparate photography. These frames are
   already the brand's two inks on the site's own void, so grading them only
   muddies them — and in the modes band it would shift the five mode hues, which
   have to stay accurate. Keep the vertical scrim for copy legibility, drop the
   duotone and the correction filter entirely. */
/* `cover` scales a wide flat graphic ~1.5x to fill a tall band, which throws the
   composition off and drives the figure under the copy. These frames are mostly
   empty void already and the band behind them is the same void, so `contain`
   letterboxes invisibly and preserves the drawing exactly as composed. */
.cine--flat .cine-media img { filter: none; object-fit: contain; }
.cine--flat .cine-media { inset: 0; }
/* A photographic band earns 82svh because the picture fills it. A flat graphic
   letterboxed with `contain` does not — the leftover height is just black. */
.cine--mid.cine--flat { min-height: 62svh; }
/* The plate exists to hold copy over busy photography. Over a near-black graphic
   it is just a visible rectangle — drop it and let the void do the work. */
.cine--flat .cine-copy::before { content: none; }
.cine--flat .cine-grade::after { content: none; }
.cine--flat .cine-grade {
  background:
    linear-gradient(180deg, var(--void) 0%, transparent 22%, transparent 72%, var(--void) 100%),
    radial-gradient(70% 80% at var(--gx,30%) 50%, rgba(5,6,10,.72) 0%, transparent 62%);
}
.band-cine.cine--flat .cine-grade {
  background: linear-gradient(180deg, var(--void) 0%, transparent 24%, transparent 76%, var(--void) 100%);
}

.cine .wrap { position: relative; z-index: 2; width: 100%; padding-block: clamp(4rem,9vw,8rem); }
.cine-copy {
  max-width: 54rem;
  position: relative;
  isolation: isolate;
}
/* Photography varies; the scrim alone can't guarantee contrast over a busy frame.
   A soft local ground behind the copy does, without looking like a box. */
.cine-copy::before {
  content: ""; position: absolute; z-index: -1;
  inset: -2.4rem -4rem -2.4rem -3rem;
  /* Copy is left-aligned inside the block whichever side the block sits on, so the
     ground fades left-to-right in both cases — anchoring it to the block's side
     put the darkest part where there was no text. */
  background: linear-gradient(90deg,
    rgba(16,13,33,.94) 0%, rgba(16,13,33,.88) 38%, rgba(16,13,33,.62) 64%,
    rgba(16,13,33,.26) 84%, transparent 100%);
}
@media (max-width: 860px) {
  .cine-copy::before, .cine--right .cine-copy::before {
    inset: -1.4rem -1.6rem;
    background: linear-gradient(0deg, rgba(16,13,33,.92), rgba(16,13,33,.72) 62%, transparent);
  }
}
.cine--right .cine-copy { margin-left: auto; text-align: left; }
/* mirror the scrim when the copy sits right, so the image's subject stays clear */
.cine--right .cine-grade {
  background:
    linear-gradient(270deg, rgba(16,13,33,.90) 0%, rgba(16,13,33,.68) 30%, rgba(16,13,33,.20) 62%, transparent 86%),
    linear-gradient(0deg, rgba(16,13,33,.86) 0%, transparent 34%),
    radial-gradient(85% 75% at var(--gx,70%) 50%, transparent 34%, rgba(16,13,33,.42) 100%);
}
@media (max-width: 860px) {
  .cine-copy, .cine--right .cine-copy { max-width: none; margin-left: 0; }
  .cine, .cine--right { align-items: flex-end; }
  .cine-grade, .cine--right .cine-grade {
    background: linear-gradient(0deg, var(--void) 5%, rgba(16,13,33,.80) 34%, rgba(16,13,33,.24) 66%, rgba(16,13,33,.4) 100%);
  }
}

/* --- act marker: the page is a narrative, so order is real information --- */
.act {
  display: flex; align-items: baseline; gap: 1.1rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 600;
  margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem);
}
.act b {
  font-family: var(--display); font-size: clamp(2.4rem,5vw,4rem);
  line-height: .78; font-weight: 800; letter-spacing: -.06em;
  color: var(--ink); opacity: .14;
}
.act span { position: relative; top: -.35em; }
.act span::before {
  content: ""; display: inline-block; width: 34px; height: 3px; border-radius: 2px;
  background: var(--brand-lift); opacity: 1; margin-right: 1em; vertical-align: middle;
}
.lite .act span::before { background: var(--brand); }

/* --- oversized display for cinematic moments --- */
/* Archivo 800 sets much wider than a serif at the same size — scale accordingly. */
.d0 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 5.4rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.045em;
}

/* --- pull statement over imagery --- */
.cine-stat {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin-top: 2.2rem;
  padding-top: 1.4rem; border-top: 1px solid var(--line-2);
  max-width: 46rem;
}

/* --- parallax primitives --- */
[data-par] { will-change: transform; }

/* --- portrait triptych of problem frames --- */
.frames { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(.8rem,1.6vw,1.4rem); }
.frame { position: relative; overflow: hidden; border-radius: 4px; background: var(--void-2); }
.frame-img { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.frame-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.95) contrast(1.04) brightness(1);
  transform: scale(1.06);
  transition: transform 1.4s var(--ease-out), filter .8s var(--ease);
}
.frame:hover .frame-img img { transform: scale(1); filter: saturate(1.05) contrast(1.02) brightness(1.08); }
.frame-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 26%, rgba(16,13,33,.94) 100%),
              linear-gradient(140deg, var(--c, rgba(129,140,248,.3)), transparent 60%);
  mix-blend-mode: normal;
}
.frame-body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.1rem,2vw,1.7rem); z-index: 2; }
.frame-k {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c, var(--indigo)); display: flex; align-items: center; gap: .55rem; margin-bottom: .8rem;
}
.frame-body h3 { font-family: var(--display); font-weight: 750; font-size: clamp(1.35rem,2.2vw,1.85rem); line-height: 1.04; letter-spacing: -.035em; margin-bottom: .6rem; }
.frame-body p { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 820px) { .frames { grid-template-columns: 1fr; } .frame-img { aspect-ratio: 16/10 } }

/* --- inline cinematic band (shorter, image + caption) --- */
.band-cine { position: relative; overflow: clip; height: clamp(320px, 52vh, 620px); }
.band-cine .cine-media { inset: -18% 0; }
.band-cine .cine-grade { background:
  linear-gradient(180deg, var(--void) 0%, rgba(16,13,33,.02) 26%, rgba(16,13,33,.06) 62%, var(--void) 100%); }
/* a light band needs no darkening scrim — let it be genuinely bright */
.band-cine--lite .cine-media img { filter: saturate(1.05) contrast(1.02) brightness(1.06); }
.band-cine--lite::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--void) 0%, transparent 22%, transparent 74%, #efeaff 100%);
}
.band-cine--lite .band-cap { color: rgba(22,18,58,.62); z-index: 3; }
.band-cap {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(1.2rem,3vw,2.4rem);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  [data-par] { transform: none !important; }
}

/* ---------- 11b. Map-led hero ---------- */
.heromap {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.heromap-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
.heromap-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16,13,33,.90) 0%, rgba(16,13,33,.68) 30%, rgba(16,13,33,.20) 62%, transparent 86%),
    linear-gradient(0deg, rgba(16,13,33,.86) 0%, transparent 34%),
    radial-gradient(80% 60% at 78% 42%, transparent 40%, rgba(5,6,10,.55) 100%);
}
.heromap .wrap { position: relative; z-index: 2; width: 100%; }
.heromap-copy { max-width: 40rem; padding-block: 8rem; }
.heromap-legend {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 1.6rem;
  display: flex; gap: 1.1rem 1.6rem; flex-wrap: wrap; align-items: center;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.heromap-legend .lg { display: inline-flex; align-items: center; gap: .5rem; }
.heromap-hint {
  position: absolute; z-index: 2; right: var(--gut); top: 6.2rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
  display: flex; align-items: center; gap: .5rem;
}
@media (max-width: 760px) {
  .heromap-scrim { background:
    linear-gradient(0deg, rgba(5,6,10,.95) 8%, rgba(5,6,10,.6) 46%, rgba(5,6,10,.82) 100%); }
  .heromap-copy { padding-block: 7rem 10rem; }
  .heromap-hint { display: none; }
}

/* ---------- 11c. Generation-mode matrix ---------- */
.modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.modes--core { grid-template-columns: repeat(2, 1fr); }
.mode {
  position: relative; background: var(--void);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: background .4s var(--ease);
}
.mode { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--void); }
.mode:hover { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)), var(--void); }
.mode::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c, var(--indigo)); opacity: .8; }
.mode-h { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.mode-h .dot { width: 8px; height: 8px; }
.mode-h b { font-weight: 550; font-size: 1.02rem; letter-spacing: -.015em; }
.mode-tag { margin-left: auto; font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.mode p { margin: 0; color: var(--ink-3); font-size: .92rem; line-height: 1.55; }
.modes--spec { grid-template-columns: repeat(3, 1fr); margin-top: 1px; }
@media (max-width: 860px) { .modes--spec { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .modes, .modes--core, .modes--spec { grid-template-columns: 1fr; } }

/* ---------- 11d. Context catalogue ---------- */
.ctx-group { border-top: 1px solid var(--line); padding-block: clamp(1.6rem, 3vw, 2.4rem); display: grid; grid-template-columns: minmax(0,.5fr) minmax(0,1fr); gap: clamp(1rem,3vw,3rem); align-items: start; }
.ctx-group:last-child { border-bottom: 1px solid var(--line); }
.ctx-cat { display: flex; align-items: center; gap: .7rem; font-family: var(--sans); font-weight: 550; font-size: 1.05rem; letter-spacing: -.02em; }
.ctx-cat .num { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; color: var(--ink-4); }
.ctx-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.ctx-list .chip { background: rgba(255,255,255,.025); }
.ctx-desc { flex-basis: 100%; color: var(--ink-4); font-size: .86rem; margin: .3rem 0 0; max-width: 60ch; }
@media (max-width: 680px) { .ctx-group { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------- 11e. Value outcomes ---------- */
.value { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.value-cell { background: var(--void); padding: clamp(1.6rem,3vw,2.4rem); }
.value-cell .vk { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); display: block; margin-bottom: 1rem; }
.value-cell h3 { font-family: var(--display); font-weight: 750; font-size: clamp(1.45rem,2.4vw,1.95rem); letter-spacing: -.035em; line-height: 1.1; margin-bottom: .7rem; }
.value-cell p { margin: 0; color: var(--ink-3); font-size: .92rem; line-height: 1.6; }
@media (max-width: 760px) { .value { grid-template-columns: 1fr; } }

/* ---------- 13. Stat / metric ---------- */
.stat { border-top: 1px solid var(--line); padding-top: 1.3rem; }
.stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1; font-weight: 800; letter-spacing: -.05em;
  margin-bottom: .5rem;
}
.stat span { font-size: .86rem; color: var(--ink-3); line-height: 1.5; display: block; }

/* ---------- 14. Comparison table ---------- */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
table.cmp { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .92rem; }
table.cmp th, table.cmp td { padding: 1.05rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cmp thead th {
  font-family: var(--mono); font-size: .67rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 500;
  border-bottom-color: var(--line-2);
}
table.cmp tbody th { font-weight: 500; color: var(--ink); width: 26%; }
table.cmp td { color: var(--ink-3); }
table.cmp td.yes { color: var(--ink); }
table.cmp tbody tr:hover td, table.cmp tbody tr:hover th { background: rgba(255,255,255,.022); }

/* ---------- 15. Pricing ---------- */
.tier {
  display: flex; flex-direction: column;
  padding: clamp(1.7rem, 2.8vw, 2.3rem);
  border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  position: relative;
}
.tier--feature { border-color: rgba(106,60,255,.55); background: linear-gradient(180deg, rgba(59,0,238,.20), rgba(255,255,255,.012)); }
.tier-tag {
  position: absolute; top: -1px; right: 1.6rem;
  transform: translateY(-50%);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .17em; text-transform: uppercase;
  padding: .32rem .78rem; border-radius: 999px;
  background: var(--brand-lift); color: #fff; font-weight: 600;
}
.tier h3 { font-family: var(--mono); font-size: .72rem; letter-spacing: .19em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.5rem; }
.tier .price { font-family: var(--display); font-weight: 800; font-size: 3.4rem; line-height: 1; letter-spacing: -.05em; margin-bottom: .35rem; }
.tier .price small { font-family: var(--sans); font-size: .82rem; color: var(--ink-3); letter-spacing: 0; margin-left: .3rem; }
.tier .note { font-size: .85rem; color: var(--ink-3); margin: 0 0 1.7rem; }
.tier ul { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: .78rem; flex: 1; }
.tier li { font-size: .9rem; color: var(--ink-2); display: flex; gap: .7rem; align-items: flex-start; line-height: 1.5; }
.tier li svg { flex: none; margin-top: .32em; color: var(--brand-lift); }
.tier li.off { color: var(--ink-4); }
.tier li.off svg { color: var(--ink-4); }

/* ---------- 16. FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.5rem 2.5rem 1.5rem 0;
  font-size: 1.03rem; font-weight: 450; letter-spacing: -.015em;
  position: relative;
  transition: color .25s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-lift); }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transform-origin: 65% 65%;
  transition: transform .4s var(--ease); opacity: .5;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .ans { padding: 0 clamp(2rem,10vw,7rem) 1.7rem 0; color: var(--ink-3); font-size: .95rem; max-width: 70ch; }
.faq .ans p { margin: 0 0 .9em; }
.faq .ans p:last-child { margin-bottom: 0; }

/* ---------- 17. Role marquee ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: .7rem; width: max-content; animation: mq 64s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee + .marquee .marquee-track { animation-duration: 78s; animation-direction: reverse; }
@keyframes mq { to { transform: translateX(-50%) } }
.chip {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1.05rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .85rem; color: var(--ink-2); white-space: nowrap;
  background: rgba(255,255,255,.02);
}

/* ---------- 18. Pull quote ---------- */
.pull {
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  line-height: 1.16; letter-spacing: -.038em;
  max-width: 22ch;
  color: var(--ink);
}
.pull .hl { color: var(--brand-lift); }

/* ---------- 19. Steps ---------- */
.step { display: grid; grid-template-columns: 4.5rem 1fr; gap: clamp(1rem,3vw,2.5rem); padding-block: clamp(2.2rem,4.5vw,3.6rem); border-top: 1px solid var(--line); }
.step-n { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; color: var(--ink-4); padding-top: .55rem; }
.step h3 { font-family: var(--display); font-weight: 750; font-size: clamp(1.4rem,2.6vw,2rem); letter-spacing: -.035em; margin-bottom: .8rem; line-height: 1.15; }
.step p { color: var(--ink-3); max-width: 58ch; margin: 0; font-size: .97rem; }
@media (max-width: 620px) { .step { grid-template-columns: 1fr; gap: .8rem } .step-n { padding-top: 0 } }

/* ---------- 20. Footer ---------- */
.foot { border-top: 1px solid var(--line); padding-block: clamp(3.5rem,7vw,6rem) 2.5rem; background: var(--void-2); position: relative; z-index: 1; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(1.8rem,4vw,3rem); }
.foot h4 { font-family: var(--mono); font-size: .66rem; letter-spacing: .19em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 1.1rem; font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .68rem; }
.foot a { font-size: .88rem; color: var(--ink-3); transition: color .25s; }
.foot a:hover { color: var(--ink); }
.foot-base { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; margin-top: clamp(2.5rem,5vw,4.5rem); padding-top: 1.8rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-4); }
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr 1fr } .foot-grid > :first-child { grid-column: 1 / -1 } }

/* ---------- 21. Big CTA ---------- */
.closer { position: relative; overflow: hidden; text-align: center; padding-block: clamp(6rem,13vw,11rem); }
.closer-bg { position: absolute; inset: 0; z-index: 0; opacity: .5; display: flex; align-items: center; }
.closer-bg img { width: 100%; height: 100%; object-fit: cover; }
.closer-bg[data-dia] svg { width: 120%; margin-left: -10%; height: auto; }
.closer::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, transparent, var(--void) 92%); pointer-events: none; }
.closer .wrap { position: relative; z-index: 2; }
.closer .cta-row { justify-content: center; }

/* ---------- 22. Misc ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #06070c; padding: .7rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--brand-lift); outline-offset: 3px; border-radius: 4px; }

.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .34rem .7rem; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-3);
}

.lift { display: block; }
.lift .fig img { will-change: transform; }
.lift:hover .fig img { transform: scale(1.045); }

.kicker-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .88rem; color: var(--ink-2);
  border-bottom: 1px solid var(--line-2); padding-bottom: .25rem;
  transition: color .25s, border-color .25s;
}
.kicker-link:hover { color: var(--ink); border-color: var(--ink); }
.kicker-link .arw { transition: transform .35s var(--ease-out); }
.kicker-link:hover .arw { transform: translateX(4px); }

/* ============================================================
   23. DIAGRAM SYSTEM — code-drawn node language
   ============================================================ */
.dia { position: relative; display: block; width: 100%; }
.dia svg { width: 100%; height: auto; display: block; overflow: visible; }
.dia--card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(59,0,238,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.006));
  padding: clamp(1.1rem, 2vw, 1.7rem);
  overflow: hidden;
}
.dia--band {
  border-block: 1px solid var(--line);
  background: radial-gradient(90% 130% at 50% 50%, rgba(59,0,238,.14), transparent 70%);
  padding-block: clamp(1.5rem, 3vw, 2.6rem);
}
/* --- STAGE: a diagram promoted to a dominant, full-viewport visual --- */
.dia--stage {
  border-block: 1px solid var(--line);
  background:
    radial-gradient(78% 130% at 50% 50%, rgba(106,60,255,.15), transparent 76%),
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 45%, rgba(255,255,255,.016));
  padding: clamp(2.2rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem);
  display: flex; align-items: center;
  overflow: clip;              /* .dia svg is overflow:visible — keep strokes inside */
}
/* height follows the figure — no dead air above or below it */
.dia--stage svg { width: 100%; height: auto; }
/* the stage carries the figure, so its type has to hold at that scale */
.dia--stage .lb { font-size: 20px; letter-spacing: .18em; }
.dia--stage .lb--lead { font-size: 30px; letter-spacing: .07em; }
.dia--stage .lb--sm { font-size: 15px; letter-spacing: .2em; }
.dia--stage .e { stroke-width: 2.6; }
.dia--stage .grid-dot { fill: rgba(255,255,255,.16); }
@media (max-width: 760px) {
  /* a wide figure squeezed into a phone is unreadable — let it stay large and swipe */
  .dia--stage { padding-inline: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dia--stage svg { min-width: 760px; }
  .dia--stage .lb { font-size: 23px; }
  .dia--stage .lb--lead { font-size: 32px; }
  .dia--stage .lb--sm { font-size: 17px; }
}
.stage-cap {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  margin: 1rem 0 0;
}

.bleed {
  /* 100vw includes the scrollbar; --sbw (set in JS) corrects for it */
  width: calc(100vw - var(--sbw, 0px));
  max-width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2);
  margin-right: calc(50% - 50vw + var(--sbw, 0px) / 2);
}
.dia--band.bleed { overflow: clip; }  /* svg strokes draw outside the viewBox */

/* --- diagram primitives --- */
.dia .grid-dot { fill: rgba(255,255,255,.13); }
.dia .frame-tick { stroke: rgba(255,255,255,.34); stroke-width: 1.6; fill: none; }

.dia .e {                       /* edge */
  fill: none;
  stroke: rgba(160,175,255,.40);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 1400);
  stroke-dashoffset: var(--len, 1400);
}
.dia .e--accent { stroke: color-mix(in srgb, var(--c, var(--brand-lift)) 88%, transparent); }
.dia .e--ghost  { stroke: rgba(150,165,255,.16); stroke-width: 1.4; }

.dia .halo { fill: var(--c, var(--brand-lift)); opacity: 0; }
/* --- richer node anatomy: bloom, containing ring, hot core, travelling mote --- */
.dia .bloom { opacity: 0; transform-box: fill-box; transform-origin: center; }
.dia .nd-halo {
  fill: none; stroke: var(--c, var(--brand-lift)); stroke-width: 1.5;
  opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center;
}
.dia .nd-core { fill: #fff; opacity: 0; }
.dia .seam { stroke: rgba(255,255,255,.12); stroke-width: 1; stroke-dasharray: 2 10; }
/* Butcher frames: equal footprints that make the comparison structural, not stated */
.dia .panel { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 1; opacity: 0; }
.dia .orbit { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 1; stroke-dasharray: 3 9; opacity: 0; }
.dia.play .panel, .dia.play .orbit { animation: dia-fade .9s ease-out forwards; animation-delay: calc(var(--i,0) * 55ms); }
.dia .pulse { opacity: 0; filter: drop-shadow(0 0 6px currentColor); }
.dia.play .bloom  { animation: dia-bloom 1.1s var(--ease-out) forwards; animation-delay: calc(120ms + var(--i,0) * 55ms); }
.dia.play .nd-halo{ animation: dia-hoop .9s var(--ease-out) forwards; animation-delay: calc(200ms + var(--i,0) * 55ms); }
.dia.play .nd-core{ animation: dia-fade .8s ease-out forwards; animation-delay: calc(320ms + var(--i,0) * 55ms); }
.dia.play .pulse  { animation: dia-fade 1.2s ease-out forwards 1s; }
@keyframes dia-bloom { 0% { opacity: 0; transform: scale(.5) } 100% { opacity: .62; transform: scale(1) } }
@keyframes dia-hoop  { 0% { opacity: 0; transform: scale(.4) } 100% { opacity: .58; transform: scale(1) } }
.dia .nd {                      /* node disc */
  fill: var(--c, var(--brand-lift));
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}
.dia .nd--hub { }
.dia .nd--leaf { }
.dia .nd--open { fill: none; stroke: var(--c, var(--brand-lift)); stroke-width: 1.6; }
.dia .nd--ghost { fill: rgba(150,165,255,.16); }
.dia .ring { fill: none; stroke: var(--c, var(--brand-lift)); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.dia .lb {                      /* label */
  fill: var(--ink-2);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .17em;
  opacity: 0;
  text-transform: uppercase;
}
.dia .lb--sm { font-size: 12px; fill: var(--ink-3); letter-spacing: .2em; font-weight: 500; }
/* the lead label is a headline, not a caption — set it in the display face */
.dia .lb--lead {
  fill: #fff; font-family: var(--display); font-size: 24px; font-weight: 800;
  letter-spacing: -.01em; text-transform: none;
}
.dia .tick { stroke: rgba(255,255,255,.30); stroke-width: 1.4; opacity: 0; stroke-linecap: round; }
.dia .bar { fill: rgba(255,255,255,.14); transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }

/* --- entrance animations (added via .play) --- */
.dia.play .e   { animation: dia-draw .85s var(--ease-out) forwards; animation-delay: calc(var(--i,0) * 55ms); }
.dia.play .nd  { animation: dia-pop .55s var(--ease-out) forwards; animation-delay: calc(120ms + var(--i,0) * 55ms); }
.dia.play .halo{ animation: dia-halo .9s ease-out forwards, dia-breathe 3.4s ease-in-out infinite 1s; animation-delay: calc(120ms + var(--i,0) * 55ms); }
.dia.play .ring{ animation: dia-emit 3s ease-out infinite; animation-delay: calc(var(--i,0) * 55ms); }
.dia.play .lb  { animation: dia-fade .7s ease-out forwards; animation-delay: calc(280ms + var(--i,0) * 55ms); }
.dia.play .lb--lead { animation-delay: calc(180ms + var(--i,0) * 55ms); }
.dia.play .tick{ animation: dia-fade .6s ease-out forwards; animation-delay: calc(240ms + var(--i,0) * 55ms); }
.dia.play .bar { animation: dia-grow .7s var(--ease-out) forwards; animation-delay: calc(300ms + var(--i,0) * 60ms); }
.dia.play .e--flow { animation: dia-draw .85s var(--ease-out) forwards calc(var(--i,0)*55ms), dia-flow 1.4s linear infinite 1s; }
.dia.play .drift { animation: dia-drift 7s ease-in-out infinite; animation-delay: calc(var(--i,0)*180ms); }

@keyframes dia-draw   { to { stroke-dashoffset: 0; } }
@keyframes dia-pop    { 0% { transform: scale(0); } 68% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes dia-halo   { to { opacity: .28; } }
@keyframes dia-breathe{ 0%,100% { opacity: .18; } 50% { opacity: .40; } }
@keyframes dia-emit   { 0% { opacity: .5; transform: scale(.4); } 80%,100% { opacity: 0; transform: scale(2.3); } }
@keyframes dia-fade   { to { opacity: 1; } }
@keyframes dia-grow   { to { transform: scaleX(1); } }
@keyframes dia-flow   { to { stroke-dashoffset: -28; } }
@keyframes dia-drift  { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,-5px); } }

@media (prefers-reduced-motion: reduce) {
  .dia .e { stroke-dashoffset: 0 !important; animation: none !important; }
  .dia .nd { transform: scale(1) !important; animation: none !important; }
  .dia .halo { opacity: .24 !important; animation: none !important; }
  .dia .ring { display: none; }
  .dia .bloom { opacity: .62 !important; transform: none !important; animation: none !important; }
  .dia .nd-halo { opacity: .58 !important; transform: none !important; animation: none !important; }
  .dia .nd-core, .dia .pulse { opacity: 1 !important; animation: none !important; }
  .dia .lb, .dia .tick, .dia .panel, .dia .orbit { opacity: 1 !important; animation: none !important; }
  .dia .bar { transform: scaleX(1) !important; animation: none !important; }
}
/* ?still (print / static capture) — snap to the finished state without animation */
.dia-still .dia .e { stroke-dashoffset: 0 !important; animation: none !important; }
.dia-still .dia .nd { transform: scale(1) !important; animation: none !important; }
.dia-still .dia .halo { opacity: .26 !important; animation: none !important; }
.dia-still .dia .ring { display: none; }
.dia-still .dia .bloom { opacity: .62 !important; transform: none !important; animation: none !important; }
.dia-still .dia .nd-halo { opacity: .58 !important; transform: none !important; animation: none !important; }
.dia-still .dia .nd-core, .dia-still .dia .pulse { opacity: 1 !important; animation: none !important; }
.dia-still .dia .lb, .dia-still .dia .tick, .dia-still .dia .panel, .dia-still .dia .orbit { opacity: 1 !important; animation: none !important; }
.dia-still .dia .bar { transform: scaleX(1) !important; animation: none !important; }
.dia-still .hero, .dia-still .hero-sub { min-height: 0 !important; }
.dia-still .field { display: none !important; }
/* viewport units explode in a very tall capture window — pin them for static shots */
.dia-still .cine, .dia-still .cine--tall, .dia-still .cine--mid,
.dia-still .plexus { min-height: 660px !important; }
.dia-still .band-cine { height: 400px !important; }

/* ============================================================
   25. PLEXUS HERO — the living idea field
   ============================================================ */
.plexus {
  position: relative;
  min-height: 100svh;
  /* Column, not row: the copy takes the free space via auto margins (so it stays
     optically centred) and the discipline switch sits at the foot in normal flow.
     It used to be absolutely positioned and overlapped the stat strip. */
  display: flex; flex-direction: column; align-items: stretch;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(120% 95% at 76% 44%, rgba(59,0,238,.26), transparent 66%),
    linear-gradient(165deg, #14113a 0%, var(--void) 62%);
}
.plexus canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.plexus .wrap { position: relative; z-index: 2; width: 100%; padding-block: clamp(6rem,11vw,9rem); pointer-events: none; }
/* The foot now supplies the hero's bottom breathing room, so the copy block gives
   some of its padding back — otherwise the switch is pushed under the fold on a
   900px-tall viewport. */
.plexus .wrap.plexus-main { margin-block: auto; padding-block: clamp(5rem,9vw,7.5rem) clamp(1.5rem,3vw,2.5rem); }
.plexus .wrap.plexus-foot { padding-block: 0 clamp(1.4rem,3vw,2.2rem); margin-top: 0; }
.plexus .wrap a, .plexus .wrap button { pointer-events: auto; }
/* a soft well behind the copy so the field never fights the headline */
.plexus-well {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(56% 60% at 28% 50%, rgba(16,13,33,.80), transparent 74%);
}
.plexus-copy { max-width: 46rem; }
.plexus-hint {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 1.8rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-4);
  display: flex; align-items: center; gap: .7rem;
}
.plexus-hint .pip {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-lift);
  box-shadow: 0 0 12px var(--brand-lift);
  animation: pip 2.6s ease-in-out infinite;
}
@keyframes pip { 0%,100% { opacity: .35; transform: scale(.8) } 50% { opacity: 1; transform: scale(1.15) } }
@media (max-width: 860px) {
  .plexus-well { background: linear-gradient(0deg, var(--void) 8%, rgba(16,13,33,.82) 42%, transparent 88%); }
  .plexus { align-items: flex-end; }
  .plexus-hint { display: none; }
}

/* ---- LIGHT SECTION: breaks the dark run and resets the eye ---- */
.lite {
  background: linear-gradient(180deg, #f4f2ff 0%, #eae6ff 100%);
  color: #16123a;
  position: relative;
}
.lite .eyebrow, .lite .act { color: #5b52a8; }
.lite .act b { color: #16123a; opacity: .18; }
.lite h2, .lite h3, .lite .d2, .lite .d3, .lite .d4 { color: #100d29; }
.lite .lede { color: rgba(22,18,58,.72); }
.lite p { color: rgba(22,18,58,.72); }
.lite .value-cell { background: transparent; }
.lite .value { background: rgba(22,18,58,.14); border-block-color: rgba(22,18,58,.14); }
.lite .value-cell .vk { color: #5b52a8; }
.lite em { color: var(--brand); }
.lite .kicker-link { color: #2b2263; border-bottom-color: rgba(22,18,58,.3); }
.lite .ctx-group { border-color: rgba(22,18,58,.16); }
.lite .ctx-cat { color: #100d29; }
.lite .ctx-cat .num { color: #6c63b8; }
.lite .ctx-desc { color: rgba(22,18,58,.66); }
.lite .chip {
  background: rgba(22,18,58,.05); border-color: rgba(22,18,58,.18); color: #241d5c;
}
.lite .bay::before, .lite::before { display: none; }
.lite .d2, .lite .d0 { color: #0d0a24; }
.lite .kicker-link:hover { color: var(--brand); border-color: var(--brand); }

/* ============================================================
   FUSION ROUND 10 — evidence-paired layout grammar
   Composition discipline borrowed from the AI Studio draft,
   rendered in the Mindflov brand system (Archivo / #3b00ee /
   mode palette). Every claim on the page is paired with a
   picture of the product.
   ============================================================ */

/* ---- 10.1 IN → OUT: the proof device ----------------------
   Shows a mode instead of describing it. Used on every mode
   card and in the context matrix. Mono, inset, low-key —
   it must read as a machine transcript, not as more copy. */
.io {
  font-family: var(--mono);
  font-size: .7rem;
  line-height: 1.55;
  background: rgba(0,0,0,.32);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .75rem .85rem;
  margin-top: 1.1rem;
  display: grid;
  gap: .45rem;
}
.io-r { display: flex; gap: .6rem; align-items: baseline; }
.io-k { flex: none; color: var(--ink-4); letter-spacing: .06em; }
.io-in { color: var(--ink); }
.io-out { display: flex; flex-wrap: wrap; gap: .18rem .5rem; color: var(--c, var(--indigo)); }
.io-out span { white-space: nowrap; }
.io-out span + span::before {
  content: "·";
  color: var(--ink-4);
  margin-right: .5rem;
}
.mode .io { margin-top: .95rem; }

/* ---- 10.2 PROBLEM CARDS ----------------------------------
   Replaces three full-bleed photo bands with one tight row.
   The big mono word carries the failure; the photography
   that used to do this job now appears only at chapter breaks. */
.probs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.prob { background: var(--void); padding: clamp(1.5rem, 3vw, 2.2rem); position: relative; }
.prob::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--c, var(--rose)); opacity: .75; }
.prob-w { font-family: var(--mono); font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 500; letter-spacing: -.03em; color: var(--c, var(--rose)); margin-bottom: .9rem; }
.prob-k { font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; display: block; margin-bottom: .5rem; }
.prob h3 { font-family: var(--display); font-weight: 750; font-size: clamp(1.15rem, 1.9vw, 1.45rem); letter-spacing: -.035em; line-height: 1.12; margin-bottom: .6rem; }
.prob p { margin: 0; color: var(--ink-3); font-size: .92rem; line-height: 1.6; }

/* ---- 10.3 STEPS: copy paired with product evidence -------- */
.moves { display: grid; gap: clamp(3.5rem, 8vw, 7rem); }
.move { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.move:nth-child(even) .move-copy { order: 2; }
.move-n { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c, var(--indigo)); margin-bottom: 1rem; }
.move-copy h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -.04em; line-height: 1.02; margin-bottom: 1.2rem; }
.move-copy > p { color: var(--ink-2); font-size: 1.04rem; line-height: 1.65; margin: 0 0 1.4rem; max-width: 46ch; }
.move-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.move-list li { display: flex; gap: .7rem; color: var(--ink-3); font-size: .9rem; line-height: 1.55; }
.move-list li::before { content: "→"; font-family: var(--mono); color: var(--c, var(--indigo)); flex: none; }

/* ---- 10.4 EVIDENCE PANEL: one shape, repeated ------------- */
.ev {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)), var(--void);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  position: relative;
  overflow: hidden;
}
.ev::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--c, var(--brand-lift)), transparent); opacity: .5; }
.ev-h { font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 1rem; display: flex; align-items: center; gap: .55rem; }
.ev-h .dot { width: 7px; height: 7px; }
.ev-body { font-family: var(--mono); font-size: .74rem; line-height: 1.75; color: var(--ink-2); }
.ev-in { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid var(--line); color: var(--ink); }
.ev-ok { color: var(--emerald); display: flex; align-items: center; gap: .5rem; margin-top: .8rem; }
.ev-ok .dot { width: 7px; height: 7px; background: var(--emerald); }
.ev-mut { color: var(--ink-4); font-size: .66rem; margin-top: .45rem; }
.ev-node { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .55rem; border-radius: 7px; font-size: .64rem; border: 1px solid color-mix(in srgb, var(--c, var(--indigo)) 45%, transparent); background: color-mix(in srgb, var(--c, var(--indigo)) 14%, transparent); color: var(--c, var(--indigo)); }
.ev-sel { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.ev-bridge { padding: .9rem; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(16,185,129,.28); }
.ev-bridge b { display: block; font-family: var(--sans); font-weight: 550; font-size: .95rem; color: var(--ink); letter-spacing: -.015em; margin: .35rem 0 .3rem; }
.ev-bridge p { margin: 0; font-family: var(--sans); font-size: .84rem; color: var(--ink-3); line-height: 1.5; }
.ev-tree { display: grid; gap: .1rem; }
.ev-tree .t1 { color: var(--emerald); font-weight: 500; }
.ev-tree .t2 { padding-left: 1.1rem; }
.ev-tree .t3 { padding-left: 2.2rem; color: var(--ink-4); font-size: .66rem; }

/* ---- 10.5 COMPARISON TABLE -------------------------------
   The competitive frame the old site never made. Scrolls
   inside itself below 860px rather than squeezing. */
.vs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 16px; }
.vs { display: grid; grid-template-columns: minmax(190px, 1.5fr) repeat(4, minmax(96px, 1fr)) minmax(120px, 1.15fr); min-width: 780px; font-size: .88rem; }
.vs > * { padding: clamp(.85rem, 1.6vw, 1.15rem); border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.vs > *:nth-child(6n) { background: rgba(59,0,238,.16); border-left: 1px solid rgba(106,60,255,.4); border-right: 0; }
.vs .ch { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); }
.vs .ch-us { color: #b9a8ff; }
.vs .rl { color: var(--ink-2); font-weight: 500; }
.vs .y { color: var(--emerald); }
.vs .n { color: var(--red); opacity: .8; }
.vs .p { color: var(--amber); }
.vs .t { color: var(--ink-4); font-family: var(--mono); font-size: .74rem; }
.vs .t-us { color: var(--emerald); font-family: var(--mono); font-size: .74rem; font-weight: 500; }
.vs > *:nth-last-child(-n+6) { border-bottom: 0; }
.vs-note { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; color: var(--ink-4); margin: 1rem 0 0; }

/* ---- 10.6 CONTEXT MATRIX: one word, six disciplines -------
   The argument neither draft made. Same seed, six contexts,
   six genuinely different expansions, side by side. */
.ctxm-seed { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.ctxm-seed .lbl { font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4); }
.ctxm-seed .word { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 4.4vw, 3.2rem); letter-spacing: -.045em; color: var(--ink); }
.ctxm-seed .word::before, .ctxm-seed .word::after { content: "\201C"; color: var(--brand-lift); }
.ctxm-seed .word::after { content: "\201D"; }
.ctxm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ctxm-cell { background: var(--void); padding: clamp(1.2rem, 2.4vw, 1.7rem); position: relative; }
.ctxm-cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c); opacity: .8; }
.ctxm-h { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.ctxm-h b { font-weight: 550; font-size: .98rem; letter-spacing: -.015em; }
.ctxm-role { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); display: block; margin-bottom: .9rem; }
.ctxm-out { display: grid; gap: .38rem; font-family: var(--mono); font-size: .73rem; line-height: 1.5; color: var(--ink-2); }
.ctxm-out span { display: flex; gap: .55rem; }
.ctxm-out span::before { content: "→"; color: var(--c); flex: none; }

/* ---- 10.7 WORKED EXAMPLES --------------------------------
   Explicitly labelled as worked examples. The mechanism is
   real; there are no invented customers and no invented
   revenue figures. */
.wex { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.wex-item { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.wex-item:nth-child(even) .wex-copy { order: 2; }
.wex-k { font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c, var(--indigo)); margin-bottom: 1rem; display: flex; align-items: center; gap: .55rem; }
.wex-k .dot { width: 7px; height: 7px; }
.wex-copy h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.5rem); letter-spacing: -.042em; line-height: 1.05; margin-bottom: 1rem; }
.wex-copy > p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.65; margin: 0 0 1.3rem; max-width: 48ch; }
.wex-out { padding: 1rem 1.1rem; border-radius: 12px; background: color-mix(in srgb, var(--c, var(--indigo)) 10%, transparent); border-left: 2px solid var(--c, var(--indigo)); }
.wex-out .lbl { font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4); display: block; margin-bottom: .45rem; }
.wex-out p { margin: 0; color: var(--ink); font-weight: 500; font-size: .97rem; letter-spacing: -.015em; }

/* ---- 10.8 HOMEPAGE PRICING BAND -------------------------- */
.tiers-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 2vw, 1.3rem); }
.tm { border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.4rem, 2.6vw, 1.9rem); background: linear-gradient(180deg, rgba(255,255,255,.035), transparent); display: flex; flex-direction: column; }
.tm--feature { border-color: rgba(106,60,255,.5); background: linear-gradient(180deg, rgba(59,0,238,.22), transparent); position: relative; }
.tm-flag { position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-family: var(--mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 99px; white-space: nowrap; }
.tm-n { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4); margin-bottom: .7rem; }
.tm-p { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.05em; line-height: 1; }
.tm-p small { font-family: var(--sans); font-weight: 400; font-size: .85rem; letter-spacing: 0; color: var(--ink-4); margin-left: .3rem; }
.tm-sub { color: var(--ink-4); font-size: .78rem; margin: .4rem 0 1.2rem; }
.tm ul { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; flex: 1; }
.tm li { display: flex; gap: .6rem; font-size: .88rem; color: var(--ink-3); line-height: 1.5; }
.tm li::before { content: "✓"; color: var(--emerald); flex: none; }
.tm .btn { width: 100%; justify-content: center; }

/* ---- 10.9 RESPONSIVE ------------------------------------- */
@media (max-width: 1000px) {
  .ctxm { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .probs { grid-template-columns: 1fr; }
  .move, .wex-item { grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 2.4rem); }
  .move:nth-child(even) .move-copy, .wex-item:nth-child(even) .wex-copy { order: 0; }
  .tiers-mini { grid-template-columns: 1fr; }
  .tm--feature { order: -1; }
}
@media (max-width: 620px) {
  .ctxm { grid-template-columns: 1fr; }
}

/* ---- 10.10 Blinking caret for the system-input evidence panel ---- */
.caret::after { content: "▌"; color: var(--brand-lift); animation: caret-blink 1.05s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret::after { animation: none; } }
.sub-price { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--ink-4); margin: .35rem 0 1rem; }

/* 8 specialist cards in a 3-col grid leaves a hole; the last card fills it */
.modes--spec .mode:last-child { grid-column: span 2; }
@media (max-width: 860px) { .modes--spec .mode:last-child { grid-column: auto; } }

/* The comparison grid scrolls inside itself on narrow screens; say so. */
.vs-hint { display: none; }
@media (max-width: 860px) {
  .vs-scroll { position: relative; }
  .vs-hint {
    display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-4); margin: .7rem 0 0;
  }
  .vs-hint::before { content: "↔ "; color: var(--brand-lift); }
}

/* ---- 10.11 MODE SLOT TABLE -------------------------------
   The real architecture: four cognitive slots that every
   context keeps, each renamed and re-prompted for the
   discipline. Verified against MindflovApp.tsx getModesForRole(). */
.slots-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 16px; }
.slots { display: grid; grid-template-columns: minmax(150px,.95fr) repeat(5, minmax(132px,1fr)); min-width: 880px; }
.slots > * { padding: clamp(.8rem,1.5vw,1.1rem); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.slots > *:nth-child(6n+1) { border-right: 1px solid var(--line); }
.slots > *:nth-child(6n+2) { background: rgba(59,0,238,.16); }
.slots > *:nth-last-child(-n+6) { border-bottom: 0; }
.slots .sh { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.slots .sh-def { color: #b9a8ff; }
.slots .sj { font-weight: 550; font-size: .95rem; letter-spacing: -.02em; color: var(--ink); }
.slots .sj small { display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-top: .3rem; font-weight: 400; }
.slots .sm { font-size: .88rem; color: var(--ink-2); line-height: 1.35; }
.slots-hint { display: none; }
@media (max-width: 900px) {
  .slots-hint { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); margin: .7rem 0 0; }
  .slots-hint::before { content: "↔ "; color: var(--brand-lift); }
}

/* ---- 10.12 DISCIPLINE SWITCH (hero idea field) ------------------
   The hero makes the product's own argument: the same canvas surfaces
   different ideas depending on who is looking. Buttons are generated
   from SETS in site.js, so labels can't drift from the pools. */
.fset { display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.4rem); flex-wrap: wrap; padding-bottom: clamp(1.2rem, 3vw, 2rem); }
.fset-lab {
  margin: 0; display: flex; align-items: center; gap: .55rem; flex: none;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-4);
}
.fset-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.fset-btns[hidden] { display: none; }
.fset-b {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); padding: .42rem .8rem; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(10,8,22,.5);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fset-b:hover { color: var(--ink); border-color: var(--line-2); }
.fset-b.is-on {
  color: #fff; border-color: var(--brand-lift);
  background: linear-gradient(180deg, rgba(106,60,255,.34), rgba(59,0,238,.24));
  box-shadow: 0 0 22px rgba(106,60,255,.28);
}
.fset-b:focus-visible { outline: 2px solid var(--brand-lift); outline-offset: 2px; }
@media (max-width: 900px) { .fset-lab { display: none; } }
@media (max-width: 620px) {
  .fset { padding-bottom: 1rem; }
  .fset-btns { gap: .3rem; }
  .fset-b { font-size: .58rem; padding: .36rem .62rem; letter-spacing: .1em; }
}

/* The switch is an interactive control sitting above the fold, so it fades in on
   its own timer rather than waiting on the scroll-reveal observer. */
.fset { animation: fset-in .8s var(--ease-out) .55s both; }
@keyframes fset-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fset { animation: none; } }
.dia-still .fset { animation: none; opacity: 1; transform: none; }