/* ============================================================
   CHARLEN NEXUS: styles.css
   Round 1: message + spine. Tokens derived from DESIGN.md.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Brand anchors (hex fallback, then OKLCH). White + Blue + Gold. */
  --navy: #12263A;      --navy: oklch(26.3% 0.046 250);
  --gold: #D2A84A;      --gold: oklch(75.2% 0.122 84.8);
  --white: #FFFFFF;
  --teal: #1F7A78;      --teal: oklch(52.8% 0.082 192.8);

  /* Derived blue-family surfaces, lines and text */
  --white-cool: #F5F8FB;                                   /* secondary light field, reads as white */
  --white-cool-2: #EEF4F8;                                 /* deepest cool white, still reads as white */
  --ivory: #F7F4EE;                                        /* Warm Ivory, breathing-room surface (reinstated 2026-09-07) */
  --ivory-line: #e6e0d4;  --ivory-line: oklch(90% 0.012 85);
  --teal-tint: #eaf3f2;   --teal-tint: oklch(95.5% 0.02 193);
  --teal-tint-2: #dcebe9; --teal-tint-2: oklch(92.5% 0.028 193);
  --graphite: #292E33;                                     /* reserved for documents and print */
  --line: #d8dfe6;        --line: oklch(90% 0.012 250);      /* hairlines on white */
  --line-strong: #bbc5d1; --line-strong: oklch(82% 0.02 250);
  --text: #283f57;        --text: oklch(36% 0.05 250);       /* body copy on white, 10.8:1 */
  --text-muted: #52657a;  --text-muted: oklch(50% 0.04 250); /* secondary copy on white, 6:1 */
  --pale: #c7d2de;        --pale: oklch(86% 0.02 250);       /* body copy on navy, 10:1 */
  --navy-soft: #21354a;   --navy-soft: oklch(32.3% 0.046 250);
  --navy-line: #394a5c;   --navy-line: oklch(40.3% 0.037 250); /* hairlines on navy */
  --blue-glow: #36587b;   --blue-glow: oklch(45% 0.07 250);
  --gold-text: #a77700;   --gold-text: oklch(60% 0.135 83);  /* large key words and numerals on white only, 4:1 */
  --gold-hover: #dcb65e;  --gold-hover: oklch(78.5% 0.118 84.8);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(3.5rem, 7vw, 6rem);

  /* Type scale */
  --text-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-small: 0.875rem;
  --text-display: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  --text-display-xl: clamp(2.4rem, 1.5rem + 3.2vw, 4.25rem);
  --text-hero: clamp(2.5rem, 1.4rem + 4.4vw, 5.5rem);
  --text-word: clamp(4rem, 8vw, 8rem);

  /* Hero logo geometry (LOGO ASSET 02). Nav aligns to its vertical center. */
  --hero-logo-h: 44px;
  --hero-logo-top: 20px;
  --nav-h: 64px;

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 300ms; --dur: 500ms; --dur-slow: 700ms;
}
@media (min-width: 900px) {
  :root { --hero-logo-h: 52px; --hero-logo-top: 36px; --nav-h: 88px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--navy); padding: 10px 14px; font-weight: 600; text-decoration: none; border-radius: 2px; }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--light { background: var(--white); color: var(--text); }
.section--deep { background: var(--white-cool); color: var(--text); }
.section--dark { background: var(--navy); color: var(--white); }

/* ---------- Typography ---------- */
.display, .display-xl, .hero-title, .closing-line {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.012em;
  line-height: 1.06;
  text-wrap: balance;
}
.display { font-size: var(--text-display); }
.display-xl { font-size: var(--text-display-xl); line-height: 1.02; }
.hero-title { font-size: var(--text-hero); line-height: 0.98; letter-spacing: -0.025em; text-wrap: initial; }
.display em, .display-xl em { font-style: italic; font-weight: 300; }
h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.005em; }
p + p { margin-top: 1em; }
.lede { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); line-height: 1.5; max-width: 34ch; }
.eyebrow { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--gold); }

.section-label {
  display: flex; align-items: center; gap: 0.9rem;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  color: var(--text-muted);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.section-label span { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0; font-weight: 500; color: var(--navy); }
.section-label::after { content: ""; width: 44px; height: 1px; background: var(--gold); opacity: 0.9; }
.section-label:not(:has(span)) { gap: 0; }
.section-label:not(:has(span))::after { margin-left: 0.9rem; }
.section-label--dark { color: var(--gold); }
.section-label--dark span { color: var(--gold); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 1.7rem;
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none; border-radius: 2px; border: 1px solid transparent;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
}
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-hover); }
.btn-nav { min-height: 42px; padding: 0 1.2rem; font-size: 0.85rem; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 500; text-decoration: none; min-height: 48px;
  color: var(--white);
}
.link-arrow::after { content: "→"; color: var(--gold); transition: transform 0.3s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow span, .link-arrow { border-bottom: 1px solid transparent; }
.link-arrow:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; left: 0; right: 0; z-index: 50;
  top: calc(var(--hero-logo-top) + var(--hero-logo-h) / 2 - var(--nav-h) / 2);
  height: var(--nav-h);
  background: transparent;
  transition: top 0.4s var(--ease), height 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-brand { display: inline-flex; align-items: center; height: 100%; }
.nav-wordmark {
  height: 36px; width: auto; max-width: 100%; object-fit: contain; display: block;
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.nav[data-state="hero"]:not(.is-open) .nav-brand { visibility: hidden; pointer-events: none; }
.nav[data-state="scrolled"], .nav.is-open { --nav-h: 64px; top: 0; background: var(--white); box-shadow: 0 1px 0 var(--line); }
.nav[data-state="scrolled"] .nav-wordmark, .nav.is-open .nav-wordmark { opacity: 1; }
@media (min-width: 900px) { .nav-wordmark { height: 40px; } }

.nav-links { display: none; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.nav-links a:not(.btn) {
  font-size: 0.9rem; font-weight: 500; text-decoration: none; letter-spacing: 0.01em;
  color: var(--white); padding: 0.4rem 0; position: relative; transition: color 0.4s var(--ease);
}
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--gold); transition: right 0.3s var(--ease); }
.nav-links a:not(.btn):hover::after { right: 0; }
.nav[data-state="hero"] .btn-nav { background: transparent; border-color: var(--gold); color: var(--gold); }
.nav[data-state="hero"] .btn-nav:hover { background: var(--gold); color: var(--navy); }
.nav[data-state="scrolled"] .nav-links a:not(.btn) { color: var(--navy); }
.nav[data-state="scrolled"] .btn-nav { background: var(--navy); color: var(--white); }
.nav[data-state="scrolled"] .btn-nav:hover { background: var(--navy-soft); }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 44px; min-width: 44px; padding: 0 0.5rem; margin-right: -0.5rem;
  background: none; border: 0; cursor: pointer; font: 500 0.72rem var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--white); transition: color 0.4s var(--ease);
}
.nav[data-state="scrolled"] .nav-toggle, .nav.is-open .nav-toggle { color: var(--navy); }
.nav-toggle-lines { position: relative; width: 18px; height: 9px; }
.nav-toggle-lines::before, .nav-toggle-lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease); }
.nav-toggle-lines::before { top: 0; } .nav-toggle-lines::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] { color: var(--navy); }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines::before { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines::after { transform: translateY(-3.75px) rotate(-45deg); }
@media (min-width: 900px) { .nav-links { display: flex; } .nav-toggle { display: none; } }

.mobile-menu { position: fixed; inset: 0; z-index: 40; background: var(--white); color: var(--navy); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobile-menu-inner { min-height: 100%; padding: calc(64px + clamp(1.25rem, 4vw, 2rem)) var(--gutter) 2.5rem; display: flex; flex-direction: column; }
.mobile-menu nav { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mobile-menu nav a:not(.btn) {
  font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 2.2vw, 1.9rem); line-height: 1.2;
  padding: clamp(0.85rem, 2.6vw, 1.1rem) 0; min-height: 48px; display: flex; align-items: center;
  text-decoration: none; color: var(--navy); border-bottom: 1px solid var(--line);
}
.mobile-menu nav a:not(.btn):hover { color: var(--gold-text); }
.mobile-menu nav .btn { margin-top: clamp(1.5rem, 4vw, 2.25rem); align-self: flex-start; }
.mobile-menu-note { margin-top: auto; padding-top: 2rem; font-size: 0.8rem; color: var(--text-muted); }

/* ---------- Media placeholders (replaceable) ---------- */
/* Light sections: white panel with a pale blue light pool. Hero: navy version. */
.media { position: relative; overflow: hidden; background: var(--white-cool); border-radius: 2px; }
.media-frame {
  position: absolute; inset: 0;
  background:
    radial-gradient(62% 52% at 78% 20%, oklch(45% 0.07 250 / 0.22), transparent 70%),
    radial-gradient(45% 38% at 18% 88%, oklch(75.2% 0.122 84.8 / 0.07), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 33px, oklch(26.3% 0.046 250 / 0.07) 33px 34px),
    var(--white-cool);
}
.media-frame::before { content: ""; position: absolute; inset: 14px; border: 1px solid oklch(75.2% 0.122 84.8 / 0.7); pointer-events: none; }
.media-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.media-drift { position: absolute; left: 14px; right: 14px; top: 14px; height: 1px; background: var(--gold); opacity: 0.35; }
@media (prefers-reduced-motion: no-preference) { .media-drift { animation: drift 18s linear infinite; } @keyframes drift { from { top: 14px; opacity: 0; } 8% { opacity: 0.35; } 92% { opacity: 0.35; } to { top: calc(100% - 15px); opacity: 0; } } }
.media--hero { background: var(--white-cool); }
.media--hero .media-frame {
  background:
    radial-gradient(62% 52% at 78% 20%, oklch(75.2% 0.122 84.8 / 0.30), transparent 70%),
    radial-gradient(45% 38% at 18% 88%, oklch(45% 0.07 250 / 0.6), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 33px, oklch(100% 0 0 / 0.05) 33px 34px),
    var(--navy);
}
.media--hero .media-frame::before { border-color: oklch(75.2% 0.122 84.8 / 0.38); }
.media picture, .media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.media img { object-fit: cover; object-position: 50% 50%; display: block; }
.media--hero { aspect-ratio: 4 / 5; }
.media--hero img { object-position: 50% 50%; transform-origin: 50% 60%; }
@media (prefers-reduced-motion: no-preference) { .media--hero img { animation: heroBreathe 22s ease-in-out infinite alternate; } @keyframes heroBreathe { from { transform: scale(1); } to { transform: scale(1.03); } } }
.media--wide img { object-position: 42% 55%; }
.media--video2 img { object-position: 50% 45%; }
.media--still img { object-position: 50% 50%; }
.media--still { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 16 / 9; }
.media--video2 { aspect-ratio: 16 / 10; }
@media (min-width: 900px) { .media--wide { aspect-ratio: 21 / 9; } }

/* ---------- 01 Hero ---------- */
.hero {
  position: relative;
  background: var(--navy);
  color: var(--white);
  min-height: 100svh;
  padding-top: calc(var(--hero-logo-top) + var(--hero-logo-h) + clamp(2.5rem, 7vw, 6rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
/* Warm pool of light. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 60% at 88% 12%, oklch(45% 0.07 250 / 0.55), transparent 70%),
    radial-gradient(40% 36% at 78% 30%, oklch(75.2% 0.122 84.8 / 0.14), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, oklch(45% 0.07 250 / 0.35), transparent 70%);
}
.hero-logo {
  position: absolute;
  top: var(--hero-logo-top);
  left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  height: var(--hero-logo-h); width: auto;
}
.hero-grid { position: relative; display: grid; gap: 2.5rem; align-items: center; }
.hero-copy { max-width: 44rem; }
.hero-title { margin-top: 1.4rem; color: var(--white); }
.hero .lede { margin-top: 1.6rem; color: var(--pale); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.4rem; }
.hero-micro { margin-top: 1.1rem; font-size: 0.85rem; color: var(--pale); opacity: 0.9; }
.media--hero { width: 100%; max-width: 420px; justify-self: start; }
.hero-foot { position: relative; margin-top: 3rem; }
.scroll-cue { display: inline-flex; align-items: center; gap: 1rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pale); }
.scroll-line { display: block; width: 56px; height: 1px; background: var(--gold); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-line { animation: draw 2.6s var(--ease) infinite; }
  @keyframes draw { 0% { transform: scaleX(0); } 55% { transform: scaleX(1); transform-origin: left; } 56% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 8fr 4fr; gap: clamp(2rem, 4vw, 4rem); }
  .media--hero { max-width: none; justify-self: end; max-height: 72vh; }
}
@media (max-width: 899px) {
  .media--hero { aspect-ratio: 4 / 3; max-width: none; }
  .media--hero img { object-position: 50% 68%; }
  .media--wide img { object-position: 30% 60%; }
}
@media (max-width: 560px) {
  .hero-title br, .closing-line br { display: none; }
  .eyebrow { letter-spacing: 0.12em; }
}

/* ---------- 04 What could you build ---------- */
.builds-grid { display: grid; gap: 3rem; }
.builds-side .display { color: var(--navy); max-width: 16ch; }
.builds-side > p { margin-top: 1.4rem; max-width: 40ch; color: var(--text-muted); }
.builds-side .media { margin-top: 2.5rem; max-width: 420px; }
.ledger { border-top: 1px solid var(--line); }
.ledger-row { display: grid; gap: 0.3rem 1.5rem; padding: 1.4rem 0.75rem; margin: 0 -0.75rem; border-bottom: 1px solid var(--line); transition: background 0.3s var(--ease); }
.ledger-row:hover { background: var(--white-cool); }
.ledger-who { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--text-muted); }
.ledger-what { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; color: var(--navy); letter-spacing: -0.01em; }
.ledger-why { color: var(--text-muted); max-width: 40ch; }
@media (min-width: 720px) {
  .ledger-row { grid-template-columns: 11rem 1fr; }
  .ledger-who { padding-top: 0.55rem; }
  .ledger-why { grid-column: 2; }
}
@media (min-width: 1000px) {
  .builds-grid { grid-template-columns: 5fr 7fr; column-gap: clamp(3rem, 7vw, 7rem); align-items: start; }
  .builds-side { position: sticky; top: 6rem; }
  .ledger { margin-top: 3.6rem; }
}

/* ---------- 09 Founder ---------- */
.founder { border-top: 1px solid var(--line); }
.founder-grid { display: grid; gap: 2.5rem; }
.founder-side { display: grid; gap: 1.6rem; align-content: start; }
@media (max-width: 899px) {
  /* Mobile order: portrait, headline and story, then the quote, then the experience row */
  .founder-side { display: contents; }
  .founder-grid .portrait { order: 1; }
  .founder-grid .founder-copy { order: 2; }
  .founder-grid .founder-quote { order: 3; margin-top: 0.5rem; }
}
.portrait {
  position: relative; aspect-ratio: 928 / 1120; max-width: 480px; overflow: visible; background: none; border-radius: 2px;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; border-radius: 2px; }
.portrait::after { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--gold); border-radius: 2px; z-index: -1; pointer-events: none; }
.founder-quote { margin: 0; max-width: 480px; border-left: 2px solid var(--gold); padding-left: 1.1rem; }
.founder-quote p { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.35; color: var(--navy); }
.founder-headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.7rem); line-height: 1.12; letter-spacing: -0.012em; color: var(--navy); text-wrap: balance; max-width: 22ch; }
.founder-identity { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.founder-name { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); line-height: 1.15; color: var(--navy); }
.founder-role { margin-top: 0.5rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.founder-creds { margin-top: 0.35rem; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--text-muted); }
.founder-creds .dot, .founder-role .dot { color: var(--gold); padding: 0 0.15em; }
.founder-bio { margin-top: 1.8rem; max-width: 52ch; color: var(--text); }
.founder-bio p + p { margin-top: 1em; }
.founder-question { font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem); line-height: 1.3; color: var(--navy); }
.experience { margin-top: clamp(3rem, 6vw, 5rem); display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.experience li { display: grid; gap: 0.3rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.exp-title { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--navy); }
.exp-sub { font-size: 0.92rem; color: var(--text-muted); }
@media (min-width: 560px) and (max-width: 899px) {
  .experience { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}
@media (min-width: 900px) {
  .founder-grid { grid-template-columns: 5fr 7fr; column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .founder-side { position: sticky; top: 6rem; }
  .experience { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4rem); row-gap: 1.6rem; border-top: 0; }
  .experience li { border-bottom: 0; border-top: 1px solid var(--line-strong); padding: 1.2rem 0 0; position: relative; }
  .experience li::before { content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 1px; background: var(--gold); }
}

/* ---------- 13 FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq-grid { display: grid; gap: 2.5rem; }
.faq-head .display { color: var(--navy); max-width: 14ch; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.2rem 0; font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); color: var(--navy);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--font-sans); font-weight: 300; font-size: 1.6rem; line-height: 1; color: var(--gold-text); transition: transform 0.3s var(--ease); flex: none; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding-bottom: 1.4rem; max-width: 60ch; color: var(--text-muted); }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 5fr 7fr; column-gap: clamp(3rem, 7vw, 7rem); align-items: start; } }

/* ---------- 14 Closing ---------- */
.closing { background: var(--navy); color: var(--white); padding-block: var(--section-y); }
.closing-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.closing-line { font-size: var(--text-display-xl); color: var(--white); }
.closing-sub { margin-top: 1.6rem; color: var(--pale); max-width: 40ch; }
.closing .btn { margin-top: 2.2rem; }
.closing-brand { display: flex; justify-content: center; padding: clamp(4rem, 9vw, 7rem) var(--gutter) clamp(3rem, 6vw, 5rem); }
.closing-brand img { height: clamp(160px, 22vw, 240px); width: auto; }

/* ---------- Footer ---------- */
.footer { background: var(--white); color: var(--text-muted); padding: clamp(2rem, 4vw, 3rem) 0 1.5rem; border-top: 1px solid var(--line); }
.footer-top { display: grid; gap: 1.5rem; align-items: center; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.footer-brand { display: inline-flex; width: fit-content; }
.footer-brand img { height: 40px; width: auto; display: block; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.footer-links a { text-decoration: none; color: var(--navy); font-size: 0.9rem; font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; }
.footer-links a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.footer-bottom { padding-top: 1.25rem; font-size: 0.82rem; }
.footer-copy { margin: 0; }
@media (min-width: 760px) {
  .footer-top { grid-template-columns: auto 1fr; column-gap: 3rem; }
  .footer-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0 1.75rem; }
}

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Reveal only hides content once JavaScript has run (html.js). Without JavaScript everything is visible. */
  html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease) var(--d, 0ms), transform var(--dur-slow) var(--ease) var(--d, 0ms); }
  html.js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Homepage: Builds teaser, comparison ---------- */
.link-arrow--dark { color: var(--navy); }
.builds-more { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.5rem; }
.builds-more p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.compare-title { color: var(--navy); max-width: 22ch; }
.compare-wrap { margin-top: clamp(2rem, 4vw, 3rem); overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.compare-table thead th { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--line-strong); padding-top: 0; }
.compare-table tbody th { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--navy); padding-left: 0; width: 20%; }
.compare-table td { color: var(--text-muted); }
.compare-table .compare-nexus { background: var(--white-cool); color: var(--navy); font-weight: 500; }
.compare-table thead .compare-nexus { color: var(--navy); border-top: 2px solid var(--gold); }
.compare-table tbody tr:last-child td, .compare-table tbody tr:last-child th { border-bottom: 1px solid var(--line-strong); }
.compare-close { margin-top: clamp(2rem, 4vw, 3rem); font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1.35; color: var(--navy); max-width: 40ch; border-left: 2px solid var(--gold); padding-left: 1.2rem; }
@media (max-width: 759px) {
  .compare-wrap { overflow: visible; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table td, .compare-table th { display: block; width: auto; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare-table tbody th { padding: 1.4rem 0 0.6rem; border-bottom: 0; width: auto; }
  .compare-table td { padding: 0.55rem 0 0.55rem 0.9rem; border-bottom: 0; border-left: 1px solid var(--line); display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.75rem; }
  .compare-table td::before { content: attr(data-label); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); padding-top: 0.15em; }
  .compare-table td.compare-nexus { background: var(--white-cool); border-left: 2px solid var(--gold); margin-left: -1px; }
  .compare-table td.compare-nexus::before { color: var(--navy); }
  .compare-table tbody tr { border-bottom: 1px solid var(--line); padding-bottom: 0.9rem; }
  .compare-table tbody tr:last-child td { border-bottom: 0; }
}

/* ---------- Builds page ---------- */
.page-builds { padding-top: 64px; }
.page-builds .nav { top: 0; }
.lede--light { color: var(--text-muted); }
.builds-hero { padding-top: clamp(3rem, 6vw, 5rem); }
.builds-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.builds-hero-copy .display-xl { color: var(--navy); margin-top: 0; }
.builds-hero-copy .lede { margin-top: 1.4rem; max-width: 40ch; }
.builds-hero-note { margin-top: 1.2rem; font-size: 0.9rem; color: var(--text-muted); max-width: 44ch; padding-left: 1rem; border-left: 2px solid var(--gold); }
.builds-hero-copy .hero-actions { margin-top: 2rem; }
.builds-hero-media { width: 100%; max-width: 460px; }
@media (min-width: 900px) { .builds-hero-grid { grid-template-columns: 7fr 5fr; column-gap: clamp(3rem, 6vw, 6rem); } .builds-hero-media { justify-self: end; } }
.builds-head { display: grid; gap: 1.2rem; max-width: 48rem; }
.builds-head .display { color: var(--navy); }
.builds-head p { color: var(--text-muted); max-width: 52ch; }
.examples-disclaimer { font-weight: 600; color: var(--navy) !important; }
.member-lead { font-family: var(--font-display); font-size: 1.25rem; color: var(--navy) !important; }

.build-grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1.25rem; }
.build-card { background: var(--white); border: 1px solid var(--line); border-radius: 2px; display: flex; flex-direction: column; overflow: hidden; }
.build-card[hidden] { display: none; }
.build-plate { aspect-ratio: 16 / 9; background: var(--navy); color: var(--white); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem 1.5rem; gap: 0.35rem; position: relative; }
.build-plate::before { content: ""; position: absolute; inset: 12px; border: 1px solid oklch(75.2% 0.122 84.8 / 0.55); pointer-events: none; }

.build-plate-cat { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.build-media { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.build-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.build-body { padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: 0.5rem; align-content: start; flex: 1; }
.build-label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; }
.build-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.is-founder .build-label { color: var(--navy); } .is-founder .build-label::before { background: var(--gold); }
.is-example .build-label { color: var(--text-muted); } .is-example .build-label::before { background: var(--line-strong); }
.is-member .build-label { color: var(--navy); } .is-member .build-label::before { background: var(--teal); }
.build-industry { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.build-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.15; color: var(--navy); }
.build-category { font-size: 0.85rem; color: var(--text-muted); margin-top: -0.2rem; }
.build-plate .build-name { color: var(--white); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 400; }
.build-desc { color: var(--text); font-size: 0.95rem; }
.build-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.build-type, .build-status, .build-builder { font-size: 0.78rem; padding: 0.3rem 0.65rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--navy); }
.build-result { font-size: 0.9rem; color: var(--text-muted); border-left: 2px solid var(--gold); padding-left: 0.8rem; }
.build-link { font-weight: 600; color: var(--navy); text-decoration: none; margin-top: 0.4rem; }
.build-link:hover { text-decoration: underline; text-decoration-color: var(--gold); }
@media (min-width: 640px) { .build-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .build-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.is-example { border-style: dashed; border-color: var(--line-strong); }

.filters { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter { font: 500 0.85rem var(--font-sans); letter-spacing: 0.01em; min-height: 44px; padding: 0 1rem; background: var(--white); color: var(--navy); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); }
.filter:hover { border-color: var(--navy); }
.filter[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.filter-empty { margin-top: 1.5rem; color: var(--text-muted); font-style: italic; }

.standard-title { color: var(--navy); max-width: 16ch; }
.standard-list { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.standard-list li { display: grid; grid-template-columns: 3rem 1fr; gap: 0.3rem 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.standard-num { font-family: var(--font-display); color: var(--gold-text); font-size: 1.1rem; grid-row: span 2; padding-top: 0.15rem; }
.standard-list h3 { font-size: 1.35rem; font-weight: 500; color: var(--navy); }
.standard-list p { color: var(--text-muted); max-width: 44ch; }
@media (min-width: 900px) {
  .standard-list { grid-template-columns: repeat(5, 1fr); column-gap: 2rem; border-top: 0; }
  .standard-list li { grid-template-columns: 1fr; border-bottom: 0; border-top: 1px solid var(--line-strong); padding: 1.2rem 0 0; position: relative; }
  .standard-list li::before { content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 1px; background: var(--gold); }
  .standard-num { grid-row: auto; }
  .standard-list h3 { font-size: 1.2rem; margin-top: 0.4rem; }
  .standard-list p { font-size: 0.93rem; margin-top: 0.2rem; }
}
.hero-actions--center { justify-content: center; margin-top: 2.2rem; }
.builds-closing .closing-brand img { height: clamp(140px, 18vw, 200px); }

/* ---------- Text-led product presentation (until genuine product imagery is supplied) ---------- */
.product--text { border-top: 1px solid var(--line-strong); padding-top: 1.2rem; position: relative; gap: 0.35rem; }
.product--text::before { content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 1px; background: var(--gold); }
.product--single { max-width: 40rem; }
.product--single .showcase-kicker { margin-top: 0.1rem; }
.product--text .product-desc { max-width: 42ch; }

/* ---------- What I've built: visible three-card portfolio ---------- */
.folio-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.folio-grid > li { display: flex; }
.folio-grid .folio { height: auto; width: 100%; grid-template-rows: auto 1fr; gap: 1.1rem; }
.folio-covers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.folio-covers picture { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; border: 1px solid var(--line); background: var(--white-cool); box-shadow: 0 6px 20px oklch(26.3% 0.046 250 / 0.08); }
.folio-covers img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; transition: transform 0.6s var(--ease); }
.folio-brand { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; }
.folio--pivot .folio-brand { color: var(--teal); }
.folio-body .link-arrow { margin-top: 0.5rem; min-height: 44px; }
@media (min-width: 900px) {
  .folio-grid { grid-template-columns: repeat(3, 1fr); }
  .folio-covers { grid-template-columns: 1fr; gap: 0.75rem; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .folio:hover .folio-covers img { transform: scale(1.03); }
  .folio:hover .folio-covers picture { box-shadow: 0 10px 28px oklch(26.3% 0.046 250 / 0.12); }
}

/* ---------- Comparison: one complete table ---------- */
.compare-table tbody tr:nth-child(even) th, .compare-table tbody tr:nth-child(even) td { background: var(--white-cool); }
.compare-table tbody tr:nth-child(even) td.compare-nexus { background: #e9f3f2; background: oklch(95.5% 0.02 193); }
.compare-table tbody tr:nth-child(odd) td.compare-nexus { background: #eef6f5; background: oklch(96.5% 0.015 193); }
.compare-table thead .compare-nexus { background: oklch(95.5% 0.02 193); border-top: 2px solid var(--gold); }
.compare-table td.compare-nexus { color: var(--navy); font-weight: 500; }
.compare-table tbody th { padding-left: 1rem; }
@media (max-width: 759px) {
  .compare-table tbody tr:nth-child(even) th, .compare-table tbody tr:nth-child(even) td { background: transparent; }
  .compare-table tbody tr:nth-child(even) td.compare-nexus, .compare-table tbody tr:nth-child(odd) td.compare-nexus { background: oklch(95.5% 0.02 193); }
  .compare-table tbody th { padding-left: 0; }
}

/* ---------- Nexus Wins: richer ledger ---------- */
.wins { border-color: var(--line-strong); }
.wins-step { padding: 1.3rem 1.2rem 1.4rem; }
.wins-num { font-size: 1.1rem; }
.wins-title { font-size: 0.8rem; margin-top: 0.15rem; }
.wins-sub { font-size: 0.92rem; }
.wins-step:nth-child(3) { border-color: oklch(85% 0.05 193); }
.wins-step:nth-child(4) { border-color: oklch(88% 0.06 85); }
@media (min-width: 640px) { .wins-step:nth-child(2) { border-left-color: var(--line-strong); } }

/* ---------- Layered section surfaces ---------- */
.section--ivory { background: var(--ivory); color: var(--text); }
.section--ivory .line, .section--ivory .rule-list li, .section--ivory .tension-list li, .section--ivory .faq-list details, .section--ivory .faq-list, .section--ivory .founder-identity, .section--ivory .experience li { border-color: var(--ivory-line); }
.section--cool { background: var(--white-cool-2); color: var(--text); }
.section--tealtint { background: var(--teal-tint); color: var(--text); }
.section--tealtint .stack li { border-color: var(--teal-tint-2); }
.section--ivory .who-grid > div, .section--ivory .faq-list details p { color: var(--text); }
.section--ivory .faq-list summary::after { color: var(--gold-text); }

/* ---------- Build concept gallery: curated tonal cards ---------- */
.filters { margin-top: clamp(2rem, 4vw, 3rem); padding: 0.5rem; background: var(--white-cool); border: 1px solid var(--line); border-radius: 999px; display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.filter { min-height: 40px; padding: 0 1rem; border: 1px solid transparent; background: transparent; }
.filter:hover { border-color: var(--line-strong); background: var(--white); }
.filter[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.is-example { border-style: solid; border-color: var(--line); }
.is-example .build-label { display: none; }
.build-card { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .build-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px oklch(26.3% 0.046 250 / 0.10); } }
.build-body { padding: 1.5rem 1.5rem 1.6rem; }
.build-industry { color: var(--gold-text); }
.build-desc { font-size: 0.95rem; }
/* five rotating treatments */
.is-example:nth-child(5n+1) { background: var(--navy); border-color: var(--navy); }
.is-example:nth-child(5n+1) .build-name, .is-example:nth-child(5n+1) .build-desc { color: var(--white); }
.is-example:nth-child(5n+1) .build-industry { color: var(--gold); }
.is-example:nth-child(5n+1) .build-type { color: var(--white); border-color: var(--navy-line); }
.is-example:nth-child(5n+2) { background: var(--teal-tint); border-color: var(--teal-tint-2); }
.is-example:nth-child(5n+2) .build-industry { color: var(--teal); }
.is-example:nth-child(5n+3) { background: var(--ivory); border-color: var(--ivory-line); }
.is-example:nth-child(5n+4) { background: var(--white-cool); }
.is-example:nth-child(5n+5) { background: var(--white); border-top: 3px solid var(--gold); }
.examples .build-grid { margin-top: 1.5rem; }

/* ---------- Standard section on ivory ---------- */
.section--ivory .standard-list { border-color: var(--ivory-line); }
.section--ivory .standard-list li { border-color: var(--ivory-line); }
.standard-num { color: var(--teal); }

/* ---------- Comparison: quiet markers in the Nexus column ---------- */
.compare-table tbody td.compare-nexus { padding-left: 2.2rem; position: relative; }
.compare-table tbody td.compare-nexus::before { content: ""; position: absolute; left: 1rem; top: 1.55rem; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
@media (max-width: 759px) { .compare-table tbody td.compare-nexus { padding-left: 1.4rem; } .compare-table tbody td.compare-nexus::before { left: 0.45rem; top: 0.95rem; } }

/* ---------- How is Charlen Nexus different: boxed comparison grid ---------- */
.compare-wrap { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.compare-grid { border-collapse: separate; border-spacing: 0; border: 1.5px solid var(--navy); border-radius: 8px; overflow: hidden; background: var(--white); box-shadow: 0 14px 40px oklch(26.3% 0.046 250 / 0.10); border-top: 1.5px solid var(--navy); }
.compare-grid th, .compare-grid td { border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); padding: 1.15rem 1.2rem; vertical-align: top; }
.compare-grid th:last-child, .compare-grid td:last-child { border-right: 0; }
.compare-grid tbody tr:last-child th, .compare-grid tbody tr:last-child td { border-bottom: 0; }
.compare-grid thead th { background: var(--white); color: var(--navy); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; padding: 1.1rem 1.2rem; border-bottom: 1.5px solid var(--navy); border-top: 0; }
.compare-grid thead th.compare-rowhead { color: var(--text-muted); font-weight: 600; }
.compare-grid thead th.compare-nexus { background: var(--navy); color: var(--white); border-top: 0; border-bottom: 3px solid var(--gold); }
.compare-grid tbody th { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--navy); padding-left: 1.4rem; width: 20%; background: var(--white); }
.compare-grid tbody tr:nth-child(even) th, .compare-grid tbody tr:nth-child(even) td { background: var(--ivory); }
.compare-grid tbody tr:nth-child(odd) th, .compare-grid tbody tr:nth-child(odd) td { background: var(--white); }
.compare-grid tbody td { color: var(--text); padding-left: 2.6rem; position: relative; font-size: 0.95rem; }
.compare-grid tbody td::before { content: ""; position: absolute; left: 1.1rem; top: 1.25rem; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--white); }
.compare-grid tbody td.compare-nexus { color: var(--navy); font-weight: 500; }
.compare-grid tbody tr:nth-child(odd) td.compare-nexus { background: oklch(96.5% 0.015 193); }
.compare-grid tbody tr:nth-child(even) td.compare-nexus { background: oklch(94.5% 0.025 193); }
.compare-grid tbody td.compare-nexus::before { border-color: var(--teal); background: var(--teal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; box-shadow: 0 2px 0 oklch(26.3% 0.046 250 / 0.25); }
.compare-grid .compare-nexus { border-left: 1.5px solid var(--navy); border-right: 1.5px solid var(--navy); }
.compare-grid tbody tr:hover td { background: var(--white-cool); } .compare-grid tbody tr:hover td.compare-nexus { background: oklch(92.5% 0.028 193); }
@media (max-width: 759px) {
  .compare-grid { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .compare-grid th, .compare-grid td { border: 0; }
  .compare-grid tbody th { width: auto; background: transparent !important; padding: 1.4rem 0 0.6rem; border-bottom: 0; }
  .compare-grid tbody tr { display: block; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; margin-bottom: 1rem; background: var(--white); }
  .compare-grid tbody th { padding-left: 1rem; }
  .compare-grid tbody td { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.75rem; padding: 0.7rem 1rem 0.7rem 2.6rem; border-top: 1px solid var(--line); background: var(--white) !important; }
  .compare-grid tbody td::before { top: 0.85rem; left: 0.9rem; }
  .compare-grid tbody td.compare-nexus { background: oklch(95.5% 0.02 193) !important; border-left: 0; border-right: 0; }
  .compare-grid tbody td::after { display: none; }
}
/* premium polish: hero button and card depth */
.btn-gold { box-shadow: 0 6px 18px oklch(75.2% 0.122 84.8 / 0.28); }
.btn-gold:hover { box-shadow: 0 8px 22px oklch(75.2% 0.122 84.8 / 0.36); transform: translateY(-1px); }
.btn { transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease); }
.membership-card { box-shadow: 0 14px 40px oklch(26.3% 0.046 250 / 0.08); }
/* tablet: keep the grid legible by scrolling the wrapper instead of squeezing five columns */
@media (min-width: 760px) and (max-width: 1099px) {
  .compare-wrap { overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .compare-grid { min-width: 940px; }
  .compare-grid tbody th { width: 18%; }
}

/* concept cards: category label carries the pill's job */
.is-example .build-meta { display: none; }
.is-example .build-industry { font-weight: 600; }
.is-example .build-body { padding-bottom: 1.5rem; }

/* tagline-free wordmark in the hero header */
.hero-logo--wordmark { height: var(--hero-logo-h); width: auto; }
.hero { padding-top: calc(var(--hero-logo-top) + var(--hero-logo-h) + clamp(3rem, 8vw, 7rem)); }


/* ==========================================================================
   Offer redesign components (paths, examples, 90 days, skills, plans, participation)
   ========================================================================== */
.hero-audience { margin-top: 0.5rem; font-size: 0.85rem; color: var(--pale); opacity: 0.85; max-width: 44ch; }
.hero-title { font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.4rem); }
.builds-head--dark .display { color: var(--white); } .builds-head--dark p { color: var(--pale); }
.folio-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.4rem; }

.path-grid { margin-top: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1rem; }
.path { position: relative; border-radius: 8px; padding: 1.6rem 1.5rem 1.7rem; display: grid; gap: 0.5rem; align-content: start; border: 1px solid var(--line); }
.path-num { font-family: var(--font-display); font-size: 1rem; }
.path h3 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 500; }
.path p { font-size: 0.97rem; }
.path--navy { background: var(--navy); border-color: var(--navy); color: var(--white); } .path--navy .path-num { color: var(--gold); } .path--navy h3 { color: var(--white); } .path--navy p { color: var(--pale); }
.path--teal { background: var(--teal-tint); border-color: var(--teal-tint-2); } .path--teal .path-num { color: var(--teal); } .path--teal h3 { color: var(--navy); } .path--teal p { color: var(--text); }
.path--ivory { background: var(--ivory); border-color: var(--ivory-line); } .path--ivory .path-num { color: var(--gold-text); } .path--ivory h3 { color: var(--navy); } .path--ivory p { color: var(--text); }
@media (min-width: 800px) { .path-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.distinguish { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.distinguish-lead { font-family: var(--font-display); font-size: 1.2rem; color: var(--navy); }
.distinguish-list { margin-top: 1rem; display: grid; gap: 0.2rem; }
.distinguish-list li { display: grid; gap: 0.2rem 1.5rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.distinguish-list strong { color: var(--navy); font-weight: 600; }
.distinguish-list span { color: var(--text-muted); font-size: 0.95rem; }
@media (min-width: 720px) { .distinguish-list li { grid-template-columns: 18rem 1fr; } }
.compare-block { margin-top: clamp(2.5rem, 5vw, 4rem); }
.compare-h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); color: var(--navy); }
.compare-block .compare-close { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.build-flag { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.45rem; }
.build-flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.is-example:nth-child(5n+1) .build-flag { color: var(--pale); } .is-example:nth-child(5n+1) .build-flag::before { background: var(--gold); }
.build-facts { margin-top: 0.8rem; display: grid; gap: 0.55rem; }
.build-facts div { display: grid; gap: 0.1rem; }
.build-facts dt { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
.build-facts dd { margin: 0; font-size: 0.93rem; color: var(--text); line-height: 1.5; }
.is-example:nth-child(5n+1) .build-facts dt { color: oklch(78% 0.05 85); } .is-example:nth-child(5n+1) .build-facts dd { color: var(--white); }
.examples .build-grid { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.section--ivory .is-example:nth-child(5n+3) { background: var(--white); }

.stages { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1rem; }
.stage { background: var(--navy-soft); border: 1px solid var(--navy-line); border-radius: 8px; padding: 1.5rem 1.4rem 1.6rem; display: grid; gap: 0.45rem; align-content: start; position: relative; }
.stage::before { content: ""; position: absolute; left: 1.4rem; top: 0; width: 36px; height: 2px; background: var(--gold); }
.stage-num { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.stage h3 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem); font-weight: 500; color: var(--white); }
.stage p { color: var(--pale); font-size: 0.97rem; }
@media (min-width: 800px) { .stages { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.ninety-notes { margin-top: clamp(1.75rem, 3vw, 2.5rem); max-width: 60rem; color: var(--pale); }
.ninety-notes strong { color: var(--white); font-weight: 600; }
.ninety-fine { margin-top: 0.8rem; font-size: 0.85rem; opacity: 0.8; }

.skill-grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 0; border-top: 1px solid var(--line-strong); counter-reset: skill; }
.skill-grid li { padding: 1.1rem 0 1.1rem 2.6rem; border-bottom: 1px solid var(--line); position: relative; }
.skill-grid li::before { counter-increment: skill; content: counter(skill, decimal-leading-zero); position: absolute; left: 0; top: 1.15rem; font-family: var(--font-display); color: var(--teal); font-size: 0.95rem; }
.skill-grid h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--navy); }
.skill-grid p { color: var(--text-muted); font-size: 0.93rem; margin-top: 0.15rem; }
@media (min-width: 720px) { .skill-grid { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.skills-benefit { margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 60ch; color: var(--text); border-left: 2px solid var(--gold); padding-left: 1.1rem; }

.plans { margin-top: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1.25rem; }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 0.5rem; align-content: start; box-shadow: 0 14px 40px oklch(26.3% 0.046 250 / 0.08); }
.plan--core { border-top: 3px solid var(--gold); }
.plan--vip { border-top: 3px solid var(--teal); }
.plan-name { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.7rem; margin-top: 0.2rem; }
.plan-amount { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); line-height: 1; color: var(--navy); }
.plan-term { font-size: 0.9rem; color: var(--text-muted); }
.plan-for { font-family: var(--font-display); font-size: 1.1rem; color: var(--navy); line-height: 1.4; margin-top: 0.4rem; }
.plan-h { margin-top: 1.1rem; font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
.plan-list { display: grid; gap: 0.35rem; margin-top: 0.4rem; }
.plan-list li { padding-left: 1.4rem; position: relative; font-size: 0.95rem; color: var(--text); }
.plan-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.plan--core .plan-list li::before { background: var(--gold); }
.plan-list--excl li { color: var(--text-muted); } .plan-list--excl li::before { background: transparent; border: 1px solid var(--line-strong); }
.plan-cta { margin-top: 1.4rem; width: 100%; }
.btn-navy { background: var(--navy); color: var(--white); } .btn-navy:hover { background: var(--navy-soft); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; }
.plan-note { font-size: 0.82rem; color: var(--text-muted); text-align: center; }
@media (min-width: 900px) { .plans { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.plan-table-wrap { margin-top: clamp(2rem, 4vw, 3rem); }
.plan-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1.5px solid var(--navy); border-radius: 8px; overflow: hidden; background: var(--white); }
.plan-table th, .plan-table td { padding: 0.95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-strong); font-size: 0.95rem; }
.plan-table thead th { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--navy); border-bottom: 1.5px solid var(--navy); }
.plan-table thead th.plan-table-vip { background: var(--teal-tint); }
.plan-table tbody th { font-weight: 500; color: var(--navy); width: 46%; }
.plan-table tbody tr:nth-child(even) th, .plan-table tbody tr:nth-child(even) td { background: var(--ivory); }
.plan-table tbody tr:last-child th, .plan-table tbody tr:last-child td { border-bottom: 0; }
.plan-table td { color: var(--text-muted); position: relative; padding-left: 2.4rem; }
.plan-table td::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--white); }
.plan-table td.yes { color: var(--navy); }
.plan-table td.yes::before { border-color: var(--teal); background: var(--teal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 11px; background-position: center; background-repeat: no-repeat; }
.plan-table td:last-child { background-color: oklch(96.5% 0.015 193); }
.plan-table tbody tr:nth-child(even) td:last-child { background-color: oklch(94.5% 0.025 193); }
.plan-table td strong { color: var(--navy); font-weight: 600; }
.plan-table tbody tr:last-child td { padding-left: 1.1rem; } .plan-table tbody tr:last-child td::before { display: none; }
.plan-fine { margin-top: 1.2rem; font-size: 0.85rem; color: var(--text-muted); max-width: 70ch; }
@media (max-width: 599px) {
  .plan-table, .plan-table thead, .plan-table tbody, .plan-table tr, .plan-table th, .plan-table td { display: block; }
  .plan-table { border: 0; background: transparent; }
  .plan-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .plan-table tbody tr { border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; margin-bottom: 0.8rem; background: var(--white); }
  .plan-table tbody th { width: auto; background: transparent !important; padding-bottom: 0.4rem; border-bottom: 0; }
  .plan-table td { display: grid; grid-template-columns: 4rem 1fr; gap: 0.5rem; padding: 0.55rem 1rem 0.55rem 2.4rem; border-top: 1px solid var(--line); background: var(--white) !important; }
  .plan-table td::after { content: attr(data-label); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); order: -1; padding-top: 0.2em; }
  .plan-table td::before { top: 0.75rem; left: 0.9rem; }
  .plan-table tbody tr:last-child td { padding-left: 1rem; }
}

.participation-grid { display: grid; gap: 2rem; }
.participation-grid .display { color: var(--navy); max-width: 14ch; }
.participation-lead { margin-top: 1.2rem; color: var(--text-muted); max-width: 40ch; }
.participation-cols { display: grid; gap: 2rem; }
.participation-cols h3 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--teal); font-family: var(--font-sans); }
.participation-cols .rule-list { margin-top: 0.8rem; }
.participation-cols .rule-list li { font-size: 0.97rem; color: var(--text); }
@media (min-width: 900px) { .participation-grid { grid-template-columns: 5fr 7fr; column-gap: clamp(3rem, 6vw, 6rem); align-items: start; } }
@media (min-width: 720px) { .participation-cols { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }

body { font-size: clamp(1rem, 0.97rem + 0.15vw, 1.1rem); }
.display { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem); }
.closing-line { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); }

/* ---------- Testimonials (approved entries only; section hidden while empty) ---------- */
.testimonials-title { color: var(--navy); max-width: 22ch; }
.quote-grid { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: grid; gap: 1.25rem; }
.quote-card { background: var(--white); border: 1px solid var(--ivory-line); border-radius: 8px; padding: 1.6rem 1.5rem 1.5rem; display: grid; grid-template-rows: 1fr auto; gap: 1.2rem; position: relative; }
.quote-card::before { content: "\201C"; position: absolute; top: 0.6rem; left: 1.2rem; font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--gold); opacity: 0.8; }
.quote-card blockquote { margin: 0; padding-top: 1.4rem; }
.quote-card blockquote p { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.55; color: var(--navy); }
.quote-meta { display: grid; gap: 0.15rem; padding-top: 1rem; border-top: 1px solid var(--ivory-line); }
.quote-name { font-weight: 600; color: var(--navy); }
.quote-role { font-size: 0.9rem; color: var(--text-muted); }
.quote-source { margin-top: 0.4rem; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.quote-card--featured { background: var(--white); border-color: var(--line); border-top: 3px solid var(--gold); }
.quote-card--featured blockquote p { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem); }
@media (min-width: 720px) { .quote-grid { grid-template-columns: 1fr 1fr; } .quote-card--featured { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .quote-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Hero mission line ---------- */
.hero-mission { margin-top: 1.1rem; font-family: var(--font-display); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.5; color: var(--white); max-width: 38ch; border-left: 2px solid var(--gold); padding-left: 0.9rem; }

/* ---------- What happens when you join ---------- */
.join-grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1.5rem; }
.join-steps { display: grid; gap: 0; border-top: 1px solid var(--teal-tint-2); }
.join-steps li { display: grid; grid-template-columns: 2.4rem 1fr; column-gap: 0.6rem; padding: 1.1rem 0; border-bottom: 1px solid var(--teal-tint-2); align-items: start; }
.join-num { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--gold-text); grid-row: 1 / span 2; padding-top: 0.1rem; }
.join-steps h3 { font-family: var(--font-display); font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); font-weight: 500; color: var(--navy); line-height: 1.3; }
.join-steps p { grid-column: 2; color: var(--text-muted); font-size: 0.95rem; margin-top: 0.3rem; }
.join-month { background: var(--white); border: 1px solid var(--teal-tint-2); border-top: 3px solid var(--teal); border-radius: 8px; padding: clamp(1.4rem, 3vw, 2rem); align-self: start; }
.join-month h3 { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--navy); margin-bottom: 0.8rem; }
.join-month .rule-list { display: grid; gap: 0.55rem; }
.join-month .rule-list li { position: relative; padding: 0 0 0 1.3rem; border: 0; font-size: 0.97rem; color: var(--text); }
.join-month .rule-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.join-fine { margin-top: 1rem; font-size: 0.85rem; color: var(--text-muted); }
@media (min-width: 900px) { .join-grid { grid-template-columns: 1.15fr 0.85fr; gap: 2.5rem; align-items: start; } }

/* ---------- Membership CTA notes and monthly-equivalent context ---------- */
.plan-equiv { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.1rem; }
.plan-note { margin-top: 0.7rem; text-align: left; padding: 0.8rem 0.9rem; background: var(--white-cool); border-left: 2px solid var(--gold); border-radius: 4px; color: var(--text); }
.plan-cta[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--navy); }

.plan-refund { margin-top: 0.9rem; padding: 0.9rem 1rem; background: var(--white); border: 1px solid var(--line); border-left: 2px solid var(--gold); border-radius: 4px; color: var(--text); max-width: none; }
.plan-refund strong { color: var(--navy); font-weight: 600; }

/* Comparison table, stacked (<760px): show the column name above each value so readers know which option each row belongs to. */
@media (max-width: 759px) {
  .compare-grid tbody td { display: flex; flex-direction: column; gap: 0.1rem; grid-template-columns: none; }
  .compare-grid tbody td::after { content: attr(data-label); display: block; order: -1; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
  .compare-grid tbody td.compare-nexus::after { color: var(--navy); }
}


/* =====================================================================
   MOTION SYSTEM (2026-09-08). Slow, controlled, editorial. Transform and opacity only.
   Every animated element has a reduced-motion path at the end of this block.
   ===================================================================== */

/* ---------- Page progress ---------- */
.page-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.page-progress span { display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }

/* ---------- Hero: light field, load sequence, cue ---------- */
.hero-light { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-light span { position: absolute; border-radius: 50%; filter: blur(28px); will-change: transform; }
.hero-light-a { width: 62vw; height: 62vw; max-width: 960px; max-height: 960px; right: -16%; top: -28%; background: radial-gradient(circle, oklch(48% 0.08 250 / 0.6) 0%, transparent 66%); animation: heroLightA 18s ease-in-out infinite alternate; }
.hero-light-b { width: 42vw; height: 42vw; max-width: 640px; max-height: 640px; right: 4%; top: 22%; background: radial-gradient(circle, oklch(75.2% 0.122 84.8 / 0.17) 0%, transparent 66%); animation: heroLightB 14s ease-in-out infinite alternate; }
@keyframes heroLightA { to { transform: translate(-9%, 11%) scale(1.08); } }
@keyframes heroLightB { to { transform: translate(-16%, -9%) scale(1.12); } }
.hero-copy > * { animation: heroRise var(--dur-slow) var(--ease) both; }
.hero-copy > :nth-child(1) { animation-delay: 60ms; }
.hero-copy > :nth-child(2) { animation-delay: 140ms; }
.hero-copy > :nth-child(3) { animation-delay: 240ms; }
.hero-copy > :nth-child(4) { animation-delay: 320ms; }
.hero-copy > :nth-child(5) { animation-delay: 420ms; }
.hero-copy > :nth-child(6) { animation-delay: 500ms; }
.hero-copy > :nth-child(7) { animation-delay: 560ms; }
.media--hero { animation: heroFade 1.1s var(--ease) 260ms both; will-change: transform; }
@keyframes heroRise { from { opacity: 0; transform: translateY(14px); } }
@keyframes heroFade { from { opacity: 0; } }
.hero-foot { margin-top: clamp(2rem, 4vw, 3rem); }
.hero-cue { display: inline-flex; align-items: center; gap: 0.85rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pale); text-decoration: none; min-height: 44px; animation: heroFade 1s var(--ease) 900ms both; }
.hero-cue:hover { color: var(--white); }
.hero-cue-line { position: relative; width: 44px; height: 1px; background: oklch(75.2% 0.122 84.8 / 0.35); overflow: hidden; }
.hero-cue-line::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: translateX(-100%); animation: cueLine 2.6s var(--ease) infinite; }
@keyframes cueLine { 0% { transform: translateX(-100%); } 55% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* ---------- Ticker ---------- */
.ticker { background: var(--navy); color: var(--ivory); border-top: 1px solid var(--navy-line); overflow: hidden; padding: 0.85rem 0; position: relative; }
.ticker:focus-visible { outline-offset: -4px; }
.ticker-track { display: flex; width: max-content; animation: ticker 44s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker-list li { position: relative; padding: 0 2.4rem; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; }
.ticker-list li::after { content: ""; position: absolute; right: -3px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); transform: translateY(-50%); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Section rules and labels ---------- */
html.js .section-label.reveal::after { transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) 0.25s; }
html.js .section-label.reveal.is-in::after { transform: scaleX(1); }

/* ---------- Horizontal rails (small screens only). Desktop keeps the grids. ---------- */
.rail-progress { display: none; gap: 0.4rem; justify-content: center; margin-top: 1rem; }
.rail-progress span { width: 22px; height: 2px; background: var(--line-strong); transition: background var(--dur-fast) var(--ease); }
.rail-progress span.is-active { background: var(--gold); }
.section--dark .rail-progress span { background: var(--navy-line); }
.rail-track:focus-visible { outline-offset: 6px; }
@media (max-width: 899px) {
  .rail-track--md { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding: 0.25rem var(--gutter) 0.75rem; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .rail-track--md::-webkit-scrollbar { display: none; }
  .rail-track--md > li { flex: 0 0 min(84%, 440px); scroll-snap-align: start; }
  .rail-track--md.is-scrollable + .rail-progress { display: flex; }
}
@media (max-width: 719px) {
  .rail-track--sm { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding: 0.25rem var(--gutter) 0.75rem; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .rail-track--sm::-webkit-scrollbar { display: none; }
  .rail-track--sm > li { flex: 0 0 min(84%, 440px); scroll-snap-align: start; }
  .rail-track--sm.is-scrollable + .rail-progress { display: flex; }
  .rail-track--xs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding: 0.25rem var(--gutter) 0.75rem; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .rail-track--xs::-webkit-scrollbar { display: none; }
  .rail-track--xs > li { flex: 0 0 min(86%, 440px); scroll-snap-align: start; }
  .rail-track--xs.is-scrollable + .rail-progress { display: flex; }
}
.rail-track .build-card[hidden] { display: none; }

/* ---------- Founder's studio hover ---------- */
.folio { transition: transform var(--dur) var(--ease); }
.folio-covers picture { transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.folio-name { transition: transform var(--dur) var(--ease); }
@media (hover: hover) {
  .folio:hover .folio-covers picture { transform: translateY(-3px); border-color: oklch(75.2% 0.122 84.8 / 0.6); }
  .folio:hover .folio-name { transform: translateX(3px); }
}
html.js .folio-covers picture { transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), opacity 0.9s var(--ease), clip-path 0.9s var(--ease); }
html.js .reveal:not(.is-in) .folio-covers picture { opacity: 0; clip-path: inset(0 0 8% 0); }
html.js .reveal.is-in .folio-covers picture { opacity: 1; clip-path: inset(0); }
html.js .reveal.is-in .folio-covers picture:nth-child(2) { transition-delay: 120ms; }

/* ---------- Example concept cards ---------- */
html.js .build-card .build-facts { transition: opacity var(--dur-slow) var(--ease) calc(var(--d, 0ms) + 160ms), transform var(--dur-slow) var(--ease) calc(var(--d, 0ms) + 160ms); }
html.js .reveal:not(.is-in) .build-facts { opacity: 0; transform: translateY(8px); }
.build-facts div:last-child { border-left: 2px solid var(--gold); padding-left: 0.7rem; }
.build-facts div:last-child dt { color: var(--gold-text); }

/* ---------- Three paths ---------- */
.path-grid { position: relative; }
.path { z-index: 1; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@media (hover: hover) { .path:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 12px 30px oklch(26.3% 0.046 250 / 0.10); } }
.path:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.path-num { display: inline-block; transition: opacity var(--dur-slow) var(--ease) calc(var(--d, 0ms) + 220ms), transform var(--dur-slow) var(--ease) calc(var(--d, 0ms) + 220ms); }
html.js .reveal:not(.is-in) .path-num { opacity: 0; transform: translateX(-8px); }
@media (min-width: 900px) {
  .path-grid::before { content: ""; position: absolute; left: 6%; right: 6%; top: 2.35rem; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease) 0.35s; }
  .path-grid.is-in::before { transform: scaleX(1); }
}

/* ---------- What happens when you join: progress line ---------- */
.join-steps { position: relative; }
.join-steps::before, .join-steps::after { content: ""; position: absolute; left: 0.62rem; top: 1.2rem; bottom: 1.2rem; width: 1px; }
.join-steps::before { background: var(--teal-tint-2); }
.join-steps::after { background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform 1.6s var(--ease) 0.2s; }
.join-steps.is-in::after { transform: scaleY(1); }
.join-num { position: relative; z-index: 1; background: var(--teal-tint); padding: 0.15rem 0; margin-top: -0.15rem; }
.join-steps > li { position: relative; }

/* ---------- First 90 days: connecting line ---------- */
.stages { position: relative; }
.stage { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
@media (hover: hover) { .stage:hover { border-color: oklch(75.2% 0.122 84.8 / 0.5); transform: translateY(-2px); } }
.stage-num { display: inline-block; transition: opacity var(--dur-slow) var(--ease) calc(var(--d, 0ms) + 200ms), transform var(--dur-slow) var(--ease) calc(var(--d, 0ms) + 200ms); }
html.js .reveal:not(.is-in) .stage-num { opacity: 0; transform: translateY(-6px); }
@media (min-width: 900px) {
  .stages::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 0; height: 1px; background: oklch(75.2% 0.122 84.8 / 0.35); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease) 0.3s; }
  .stages.is-in::before { transform: scaleX(1); }
}

/* ---------- Testimonials ---------- */
.quote-card { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@media (hover: hover) { .quote-card:hover { transform: translateY(-3px); border-color: oklch(75.2% 0.122 84.8 / 0.6); box-shadow: 0 12px 30px oklch(26.3% 0.046 250 / 0.08); } }

/* ---------- Pricing ---------- */
.plan { position: relative; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@media (hover: hover) { .plan:hover { box-shadow: 0 18px 48px oklch(26.3% 0.046 250 / 0.12); } }
.plan-badge { position: absolute; top: 1.1rem; right: 1.1rem; margin: 0; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); border: 1px solid oklch(75.2% 0.122 84.8 / 0.7); border-radius: 999px; padding: 0.35rem 0.7rem; background: var(--white); }
@media (max-width: 599px) { .plan-badge { position: static; display: inline-block; margin-top: 0.4rem; } }
.plan-table tbody tr { transition: background var(--dur-fast) var(--ease); }
@media (hover: hover) { .plan-table tbody tr:hover th, .plan-table tbody tr:hover td { background: var(--white-cool); } .plan-table tbody tr:hover td:last-child { background-color: oklch(93.5% 0.028 193); } }
.btn { transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px oklch(26.3% 0.046 250 / 0.14); } }
.btn:active { transform: translateY(0) scale(0.985); box-shadow: none; }

/* ---------- Navigation ---------- */
.nav-links a.is-active::after { right: 0; }
.mobile-menu { opacity: 0; transform: translateY(-8px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.mobile-menu.is-open { opacity: 1; transform: none; }
.mobile-menu nav a:not(.btn) { transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease); }
.mobile-menu nav a:not(.btn):hover { padding-left: 0.4rem; }

/* ---------- FAQ ---------- */
.faq-list details { transition: background var(--dur-fast) var(--ease); }
.faq-list summary { transition: color var(--dur-fast) var(--ease); }
.faq-list summary::after { transition: transform var(--dur-fast) var(--ease); }

/* ---------- Reduced motion: everything above becomes static and immediately visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-light span, .hero-copy > *, .media--hero, .hero-cue, .hero-cue-line::after, .ticker-track { animation: none !important; }
  .hero-copy > *, .media--hero, .hero-cue { opacity: 1; transform: none; }
  .hero-cue-line::after { transform: translateX(0); }
  .media--hero { transform: none !important; }
  .path-grid::before, .stages::before, .join-steps::after { transform: none; transition: none; }
  .section-label::after { transform: none !important; }
  .rail-track { scroll-behavior: auto; }
  .folio-covers picture, .build-facts, .path-num, .stage-num { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .mobile-menu { opacity: 1; transform: none; transition: none; }
}

/* Hover lifts must win over the reveal end state (html.js .reveal.is-in sets transform: none). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html.js .reveal.is-in.path:hover, html.js .reveal.is-in.quote-card:hover, html.js .reveal.is-in.build-card:hover { transform: translateY(-3px); }
  html.js .reveal.is-in.stage:hover { transform: translateY(-2px); }
}


/* ---------- Hero proportions (2026-09-08 section review: nav + hero) ----------
   Natural height, tighter top spacing, moderate headline, wider measure, image top aligned with the headline. */
.hero { min-height: 0; justify-content: flex-start; padding-top: calc(var(--hero-logo-top) + var(--hero-logo-h) + clamp(2rem, 5vw, 3.5rem)); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero-title { font-size: clamp(2.2rem, 1.35rem + 2.7vw, 3.65rem); line-height: 1.02; letter-spacing: -0.02em; max-width: 19ch; text-wrap: balance; }
.hero .lede { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem); line-height: 1.55; max-width: 54ch; margin-top: 1.4rem; }
.hero-actions { margin-top: 2rem; }
.hero-micro { margin-top: 1rem; }
.hero-foot { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 7fr 5fr; align-items: start; gap: clamp(2.5rem, 5vw, 5rem); }
  .hero-copy { max-width: 40rem; }
  /* Image top sits level with the headline: offset by the eyebrow's height plus the headline's top margin. */
  .media--hero { margin-top: calc(0.78rem * 1.5 + 1.4rem); max-height: none; max-width: 480px; aspect-ratio: 4 / 5; }
  .media--hero img { object-position: 50% 45%; }
}
@media (min-width: 1200px) { .media--hero { max-width: 520px; } }

.lede-hook { color: var(--white); font-weight: 600; }


/* ---------- Founder's studio v2 (2026-09-09 section review) ----------
   One large cover per project with the second image as an inset, numbered index, gold rule, two-column header. */
.studio-head--v2 { display: grid; gap: 1.25rem; align-items: end; }
.studio-head--v2 .display { margin-top: 1.25rem; }
.studio-head--v2 .studio-sub { color: var(--text-muted); max-width: 46ch; }
.studio-attrib { margin-top: 0.9rem; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
@media (min-width: 900px) {
  .studio-head--v2 { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
  .studio-head--v2 .studio-sub { padding-bottom: 0.4rem; justify-self: end; }
}
.folio-grid { margin-top: clamp(2rem, 4vw, 3rem); }
.folio-grid .folio { display: grid; grid-template-rows: auto 1fr; gap: 1.3rem; }
.folio-covers { display: block; position: relative; padding: 0 12% 16% 0; }
.folio-covers picture.folio-main { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; border: 1px solid var(--line); background: var(--white-cool); box-shadow: 0 16px 40px oklch(26.3% 0.046 250 / 0.12); }
.folio-covers picture.folio-inset { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; border: 4px solid var(--white-cool-2); background: var(--white-cool); box-shadow: 0 10px 26px oklch(26.3% 0.046 250 / 0.16); }
.folio-covers img { object-position: 50% 30%; }
.folio-inset img { object-position: 50% 35%; }
.folio-meta { display: flex; align-items: baseline; gap: 0.8rem; border-top: 1px solid var(--gold); padding-top: 0.9rem; }
.folio-index { font-family: var(--font-display); font-size: 0.95rem; color: var(--gold-text); }
.folio--pivot .folio-index { color: var(--teal); }
.folio-name { margin-top: 0.5rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--navy); }
.folio-cat { margin-top: 0.25rem; font-size: 0.9rem; color: var(--text-muted); }
.folio-desc { margin-top: 0.8rem; color: var(--text); font-size: 0.97rem; max-width: 36ch; }
.studio-note { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); font-size: 0.8rem; color: var(--text-muted); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .folio:hover .folio-covers picture.folio-main { transform: translateY(-4px); border-color: oklch(75.2% 0.122 84.8 / 0.6); }
  .folio:hover .folio-covers picture.folio-inset { transform: translate(2px, 2px); }
  .folio:hover .folio-covers img { transform: scale(1.03); }
}
/* Rails: snap positions respect the gutter so the first card never sits flush against the screen edge. */
.rail-track--md, .rail-track--sm, .rail-track--xs { scroll-padding-inline: var(--gutter); }


/* ---------- What you can build: editorial index (2026-09-09 section review) ---------- */
.examples-head .display { margin-top: 1.25rem; }
.examples-head .studio-sub { max-width: 44ch; }
.idx { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--ivory-line); list-style: none; padding: 0; }
.idx-row { position: relative; display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 0.75rem; row-gap: 0.4rem; padding: 1.4rem 0.75rem; margin-inline: -0.75rem; border-bottom: 1px solid var(--ivory-line); border-radius: 6px; transition: background var(--dur-fast) var(--ease); }
.idx-num { font-family: var(--font-display); font-size: 1rem; color: var(--gold-text); padding-top: 0.35rem; }
.idx-cat { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
.idx-sep { margin: 0 0.5rem; color: var(--gold); }
.idx-name { margin-top: 0.3rem; font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); font-weight: 500; line-height: 1.15; color: var(--navy); transition: transform var(--dur) var(--ease); }
.idx-line { margin-top: 0.45rem; font-size: 0.97rem; color: var(--text); max-width: 58ch; }
.idx-model { grid-column: 2; margin-top: 0.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; font-size: 0.88rem; color: var(--navy); }
.idx-model span { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); }
@media (min-width: 900px) {
  .idx-row { grid-template-columns: 3.5rem 1fr 15rem; column-gap: 1.5rem; padding: 1.7rem 1rem; margin-inline: -1rem; align-items: start; }
  .idx-model { grid-column: 3; flex-direction: column; align-items: flex-end; text-align: right; gap: 0.35rem; padding-top: 1.55rem; }
}
@media (hover: hover) {
  .idx-row:hover { background: var(--white); }
  .idx-row:hover .idx-name { transform: translateX(4px); }
}
.examples .builds-more { margin-top: clamp(1.5rem, 3vw, 2rem); }


/* ---------- Builds page: tiles and principles (2026-09-09 section review) ---------- */
.builds-intro { padding-bottom: clamp(2rem, 4vw, 3rem); }
.builds-intro-title { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.3rem); }
.examples .filters { margin-top: 0; }
.tiles { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; list-style: none; padding: 0; }
.tile { background: var(--white); border: 1px solid var(--ivory-line); border-radius: 8px; padding: 1.5rem 1.4rem 1.4rem; display: grid; align-content: start; gap: 0.5rem; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.tile[hidden] { display: none; }
.tile-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.tile-who { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); }
.tile-cat { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.tile-name { margin-top: 0.35rem; font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem); font-weight: 500; line-height: 1.15; color: var(--navy); }
.tile-line { color: var(--text); font-size: 0.95rem; }
.tile-model { margin-top: 0.6rem; padding-top: 0.8rem; border-top: 1px solid var(--ivory-line); display: grid; gap: 0.2rem; font-size: 0.86rem; color: var(--navy); }
.tile-model span { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html.js .reveal.is-in.tile:hover, .tile:hover { transform: translateY(-3px); border-color: oklch(75.2% 0.122 84.8 / 0.7); box-shadow: 0 14px 34px oklch(26.3% 0.046 250 / 0.10); }
}
.principles { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--ivory-line); display: flex; flex-wrap: wrap; gap: 0.6rem 2.2rem; list-style: none; counter-reset: pr; }
.principles li { font-family: var(--font-display); font-size: 1rem; color: var(--navy); display: inline-flex; align-items: baseline; gap: 0.55rem; }
.principles li::before { counter-increment: pr; content: counter(pr, decimal-leading-zero); font-size: 0.75rem; color: var(--gold-text); letter-spacing: 0.05em; }


/* ---------- Builds page: navy intro band, floating filters, tiles with depth ---------- */
.builds-intro { position: relative; overflow: hidden; padding-top: calc(64px + clamp(1.5rem, 3vw, 2.5rem)); padding-bottom: clamp(4.5rem, 8vw, 6.5rem); }
.builds-intro-glow { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(60% 70% at 85% 0%, oklch(45% 0.07 250 / 0.6), transparent 70%),
  radial-gradient(35% 40% at 70% 40%, oklch(75.2% 0.122 84.8 / 0.12), transparent 70%); }
.builds-intro .container { position: relative; }
.examples-head--dark .display { color: var(--white); }
.examples-head--dark .studio-sub { color: var(--pale); }
.back-link { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--gold); text-decoration: none; transition: gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.back-link::before { content: "\2190"; font-family: var(--font-display); font-size: 1rem; }
.back-link:hover { gap: 0.9rem; color: var(--white); }
.back-link--dark { color: var(--gold-text); }
.back-link--dark:hover { color: var(--navy); }
.builds-intro .back-link { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.examples--tiles { padding-top: 0; }
.filters--float { position: relative; z-index: 2; margin-top: -1.6rem; background: var(--white); border-color: var(--line); box-shadow: 0 14px 40px oklch(26.3% 0.046 250 / 0.14); }
.examples--tiles .tiles { margin-top: clamp(2rem, 4vw, 3rem); gap: 1.25rem; }
.examples--tiles .tile { border-color: var(--line); box-shadow: 0 2px 0 oklch(26.3% 0.046 250 / 0.03), 0 12px 32px oklch(26.3% 0.046 250 / 0.07); position: relative; overflow: hidden; }
.examples--tiles .tile::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--gold), transparent 70%); opacity: 0.85; }
.examples--tiles .tile-model { border-top-color: var(--line); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .examples--tiles html.js .reveal.is-in.tile:hover, .examples--tiles .tile:hover { transform: translateY(-4px); border-color: oklch(75.2% 0.122 84.8 / 0.8); box-shadow: 0 22px 48px oklch(26.3% 0.046 250 / 0.14); }
}
.examples--tiles .principles { border-top-color: var(--line); }
.back-row { margin-top: clamp(2rem, 4vw, 3rem); }


/* ---------- Section 03 surface: cool gradient field with an elevated white sheet (no ivory) ---------- */
.section--sheet { background: linear-gradient(180deg, var(--white-cool) 0%, var(--white) 100%); color: var(--text); }
.section--sheet .idx { margin-top: clamp(2rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: 0 2px 0 oklch(26.3% 0.046 250 / 0.03), 0 28px 70px oklch(26.3% 0.046 250 / 0.10); padding: 0.5rem clamp(0.75rem, 2.5vw, 2rem); overflow: hidden; }
.section--sheet .idx-row { margin-inline: 0; border-radius: 0; border-bottom-color: var(--line); padding-inline: clamp(0.25rem, 1vw, 0.75rem); }
.section--sheet .idx-row:last-child { border-bottom: 0; }
@media (hover: hover) { .section--sheet .idx-row:hover { background: var(--white-cool); } }
.section--sheet .studio-sub { color: var(--text-muted); }

/* Section 04: no ivory. Third path on white with a gold edge; comparison stripes in cool white. */
.path--ivory { background: var(--white); border-color: oklch(75.2% 0.122 84.8 / 0.55); }
.compare-grid tbody tr:nth-child(even) th, .compare-grid tbody tr:nth-child(even) td { background: var(--white-cool); }


/* ---------- Section 04: advantage panel and course comparison (2026-09-09 section review) ---------- */
.adv { margin-top: clamp(2.5rem, 5vw, 4rem); background: var(--navy); color: var(--white); border-radius: 14px; padding: clamp(1.75rem, 4vw, 3rem); position: relative; overflow: hidden; box-shadow: 0 28px 70px oklch(26.3% 0.046 250 / 0.22); }
.adv::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 100% 0%, oklch(45% 0.07 250 / 0.6), transparent 70%), radial-gradient(30% 40% at 15% 100%, oklch(75.2% 0.122 84.8 / 0.12), transparent 70%); }
.adv > * { position: relative; }
.adv .section-label { gap: 0; } .adv .section-label span { display: none; } .adv .section-label::after { margin-left: 0.9rem; }
.adv-title { margin-top: 0.9rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.1; color: var(--white); }
.adv-grid { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; list-style: none; padding: 0; }
.adv-card { background: oklch(100% 0 0 / 0.06); border: 1px solid oklch(100% 0 0 / 0.12); border-radius: 10px; padding: 1.5rem 1.4rem 1.6rem; display: grid; gap: 0.6rem; align-content: start; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.adv-num { font-family: var(--font-display); font-size: 1rem; color: var(--gold); }
.adv-card h4 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.2; color: var(--white); }
.adv-card p { color: var(--pale); font-size: 0.95rem; }
@media (min-width: 900px) { .adv-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html.js .reveal.is-in.adv-card:hover, .adv-card:hover { transform: translateY(-5px); background: oklch(100% 0 0 / 0.1); border-color: oklch(75.2% 0.122 84.8 / 0.7); box-shadow: 0 18px 40px oklch(0% 0 0 / 0.25), 0 0 0 1px oklch(75.2% 0.122 84.8 / 0.25); }
}
.compare-block { margin-top: clamp(3rem, 6vw, 5rem); }
.vs { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; }
.vs-card { border-radius: 14px; padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; align-content: start; }
.vs-card--course { background: var(--white); border: 1px solid var(--line); box-shadow: 0 12px 32px oklch(26.3% 0.046 250 / 0.06); }
.vs-card--nexus { background: var(--navy); color: var(--white); border: 1px solid var(--navy); box-shadow: 0 24px 60px oklch(26.3% 0.046 250 / 0.22); position: relative; overflow: hidden; }
.vs-card--nexus::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gold); }
.vs-name { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
.vs-card--nexus .vs-name { color: var(--gold); }
.vs-list { display: grid; gap: 0; margin: 0; }
.vs-list > div { display: grid; gap: 0.2rem; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.vs-card--nexus .vs-list > div { border-top-color: oklch(100% 0 0 / 0.14); }
.vs-list dt { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
.vs-card--nexus .vs-list dt { color: oklch(75.2% 0.122 84.8 / 0.9); }
.vs-list dd { margin: 0; font-family: var(--font-display); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); line-height: 1.35; color: var(--navy); }
.vs-card--course .vs-list dd { color: var(--text-muted); font-weight: 400; }
.vs-card--nexus .vs-list dd { color: var(--white); position: relative; padding-left: 1.5rem; }
.vs-card--nexus .vs-list dd::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 14px; height: 14px; border-radius: 50%; background: var(--teal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 10px; background-position: center; background-repeat: no-repeat; }
@media (min-width: 900px) { .vs { grid-template-columns: 1fr 1.15fr; gap: 1.5rem; align-items: stretch; } .vs-card--nexus { transform: translateY(-10px); } }

.adv-sub { margin-top: 0.8rem; color: var(--pale); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); max-width: 44ch; }
.vs-points { list-style: none; margin: 0; padding: 0; display: grid; }
.vs-points li { position: relative; padding: 0.85rem 0 0.85rem 1.7rem; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.4; color: var(--text-muted); }
.vs-points li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: 12px; height: 2px; background: var(--line-strong); }
.vs-card--nexus .vs-points li { border-top-color: oklch(100% 0 0 / 0.14); color: var(--white); }
.vs-card--nexus .vs-points li::before { top: 1.15rem; width: 14px; height: 14px; border-radius: 50%; background: var(--teal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 10px; background-position: center; background-repeat: no-repeat; }


/* =====================================================================
   2026-09-09 pass: timeline, skills wall, phone testimonials, no ivory anywhere, tighter rhythm
   ===================================================================== */
/* Ivory retired site-wide: ivory surfaces become cool white, ivory lines become the standard line. */
.section--ivory { background: var(--white-cool); }
.section--ivory .line, .section--ivory .rule-list li, .section--ivory .faq-list details, .section--ivory .faq-list, .section--ivory .founder-identity, .section--ivory .experience li { border-color: var(--line); }
.quote-card { border-color: var(--line); }
.quote-meta { border-top-color: var(--line); }
.plan-table tbody tr:nth-child(even) th, .plan-table tbody tr:nth-child(even) td { background: var(--white-cool); }
.tile { border-color: var(--line); } .tile-model { border-top-color: var(--line); }

/* ---------- Timeline ---------- */
.tl { position: relative; margin-top: clamp(2rem, 4vw, 3rem); list-style: none; padding: 0; display: grid; gap: 0; }
.tl::before, .tl::after { content: ""; position: absolute; }
.tl-item { position: relative; display: grid; gap: 0.35rem; align-content: start; }
.tl-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--gold); box-shadow: 0 0 0 4px var(--white); }
.tl-when { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1; color: var(--gold-text); letter-spacing: -0.01em; }
.tl-item h3 { font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem); font-weight: 500; color: var(--navy); line-height: 1.25; margin-top: 0.35rem; }
.tl-item p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; }
.tl-renew { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 8px; background: var(--white); color: var(--text); box-shadow: 0 12px 30px oklch(26.3% 0.046 250 / 0.06); }
.tl-renew span { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); }
/* vertical (phone, tablet) */
@media (max-width: 899px) {
  .tl { padding-left: 2rem; }
  .tl::before { left: 6px; top: 0.6rem; bottom: 0.6rem; width: 2px; background: var(--line-strong); }
  .tl::after { left: 6px; top: 0.6rem; bottom: 0.6rem; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform 1.8s var(--ease) 0.2s; }
  .tl.is-in::after { transform: scaleY(1); }
  .tl-item { padding: 0 0 1.9rem 0; }
  .tl-item:last-child { padding-bottom: 0; }
  .tl-dot { left: -2rem; top: 0.45rem; }
}
/* horizontal (desktop) */
@media (min-width: 900px) {
  .tl { grid-template-columns: repeat(6, 1fr); column-gap: 1.5rem; padding-top: 2rem; }
  .tl::before { left: 6px; right: 6px; top: 6px; height: 2px; background: var(--line-strong); }
  .tl::after { left: 6px; right: 6px; top: 6px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 2.2s var(--ease) 0.2s; }
  .tl.is-in::after { transform: scaleX(1); }
  .tl-dot { left: 0; top: -2rem; }
  .tl-item { padding-right: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) { .tl::after { transform: none; transition: none; } }

/* ---------- Skills wall ---------- */
.skill-wall { margin-top: clamp(2rem, 4vw, 3rem); list-style: none; padding: 0; display: grid; gap: 0.9rem; counter-reset: sk; }
.skill-wall li { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem 1.1rem 1.2rem 1.1rem; display: grid; gap: 0.3rem; align-content: start; box-shadow: 0 10px 26px oklch(26.3% 0.046 250 / 0.05); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.skill-wall li::before { counter-increment: sk; content: counter(sk, decimal-leading-zero); font-family: var(--font-display); font-size: 0.85rem; color: var(--gold-text); }
.skill-wall h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; line-height: 1.2; color: var(--navy); }
.skill-wall p { font-size: 0.86rem; color: var(--text-muted); }
@media (min-width: 640px) { .skill-wall { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .skill-wall { grid-template-columns: repeat(5, 1fr); gap: 1rem; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { html.js .reveal.is-in.skill-wall li:hover, .skill-wall li:hover { transform: translateY(-4px); border-color: oklch(75.2% 0.122 84.8 / 0.7); box-shadow: 0 18px 40px oklch(26.3% 0.046 250 / 0.10); } }

/* ---------- Testimonials on phones: one full card at a time, dots, swipe hint ---------- */
.rail-hint { display: none; text-align: center; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.6rem; }
@media (max-width: 719px) {
  .quote-grid.rail-track--xs { gap: var(--gutter); }
  .quote-grid.rail-track--xs > li { flex: 0 0 calc(100vw - 2 * var(--gutter)); }
  .quote-grid.rail-track--xs.is-scrollable ~ .rail-hint { display: block; }
}
.section--sheet .quote-card { box-shadow: 0 14px 36px oklch(26.3% 0.046 250 / 0.07); }


/* ---------- Journey: cinematic milestones (2026-09-09) ---------- */
.journey { position: relative; overflow: clip; }
.journey-glow { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(55% 60% at 90% 10%, oklch(45% 0.07 250 / 0.6), transparent 70%),
  radial-gradient(40% 40% at 10% 90%, oklch(75.2% 0.122 84.8 / 0.10), transparent 70%); }
.journey .container { position: relative; }
.chapters { position: sticky; top: calc(64px + 0.5rem); z-index: 3; margin-top: clamp(1.75rem, 3vw, 2.5rem); padding: 0.9rem 1rem 0.8rem; border-radius: 12px; background: oklch(20% 0.045 250 / 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid oklch(100% 0 0 / 0.12); box-shadow: 0 18px 50px oklch(0% 0 0 / 0.35); }
.chapters-bar { position: relative; height: 3px; border-radius: 2px; background: oklch(100% 0 0 / 0.16); }
.chapters-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--gold), oklch(85% 0.11 85)); transition: width 0.6s var(--ease); box-shadow: 0 0 14px oklch(75.2% 0.122 84.8 / 0.6); }
.chapters-head { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px oklch(75.2% 0.122 84.8 / 0.45), 0 0 18px oklch(75.2% 0.122 84.8 / 0.8); transition: left 0.6s var(--ease); }
.chapters-list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.chapters-list li { display: grid; gap: 0.1rem; color: oklch(100% 0 0 / 0.45); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; transition: color var(--dur-fast) var(--ease); }
.chapters-list li b { font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.chapters-list li span { display: none; }
.chapters-list li.is-active { color: var(--gold); }
.chapters-list li.is-past { color: oklch(100% 0 0 / 0.75); }
@media (min-width: 720px) { .chapters-list li b { display: none; } .chapters-list li span { display: block; font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0; text-transform: none; font-weight: 500; } }
.stones { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: 1rem; }
.stone { position: relative; display: grid; gap: 1rem; padding: clamp(1.4rem, 3vw, 2.25rem); border-radius: 16px; background: oklch(100% 0 0 / 0.05); border: 1px solid oklch(100% 0 0 / 0.10); overflow: hidden; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), background var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease); opacity: 0.72; }
.stone::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, oklch(100% 0 0 / 0.07) 50%, transparent 65%); transform: translateX(-120%); }
.stone.is-active { opacity: 1; background: oklch(100% 0 0 / 0.09); border-color: oklch(75.2% 0.122 84.8 / 0.7); box-shadow: 0 30px 70px oklch(0% 0 0 / 0.35), 0 0 0 1px oklch(75.2% 0.122 84.8 / 0.2); transform: scale(1.012); }
.stone-index { font-family: var(--font-display); font-size: clamp(3.4rem, 2rem + 6vw, 7rem); line-height: 0.85; color: oklch(100% 0 0 / 0.14); letter-spacing: -0.04em; transition: color var(--dur-slow) var(--ease); }
.stone.is-active .stone-index { color: oklch(75.2% 0.122 84.8 / 0.35); }
.stone-when { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.stone-body h3 { margin-top: 0.4rem; font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); font-weight: 500; line-height: 1.15; color: var(--white); }
.stone-body p:last-child { margin-top: 0.55rem; color: var(--pale); font-size: 0.97rem; max-width: 52ch; }
@media (min-width: 900px) {
  .stone { grid-template-columns: 9rem 1fr; align-items: center; column-gap: 2rem; }
  .stone:nth-child(even) { margin-left: 6%; } .stone:nth-child(odd) { margin-right: 6%; }
}
.stone-renew { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; padding: 1rem 1.25rem; border: 1px solid oklch(100% 0 0 / 0.14); border-left: 3px solid var(--gold); border-radius: 10px; background: oklch(100% 0 0 / 0.05); color: var(--white); }
.stone-renew span { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .stone.is-active::after { animation: sweep 7s var(--ease) infinite; }
  @keyframes sweep { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
}
@media (prefers-reduced-motion: reduce) { .stone { opacity: 1; transform: none; } .chapters-fill, .chapters-head { transition: none; } }
/* No-JS: everything readable at full strength. */
html.no-js .stone { opacity: 1; }


/* ---------- Ticker, cinematic: larger serif, faster, soft edge fade ---------- */
.ticker--cine { padding: 1.05rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker--cine .ticker-track { animation-duration: 22s; }
.ticker--cine .ticker-list li { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.7rem); letter-spacing: 0.08em; text-transform: uppercase; padding: 0 2.6rem; color: var(--white); }
.ticker--cine .ticker-list li:nth-child(odd) { color: var(--gold); }
.ticker--cine .ticker-list li::after { width: 6px; height: 6px; right: -3px; box-shadow: 0 0 10px oklch(75.2% 0.122 84.8 / 0.8); }
@media (prefers-reduced-motion: reduce) { .ticker--cine .ticker-track { animation: none !important; } }
/* Founder section now sits on white, directly after the hero. */
.founder .founder-headline { font-size: clamp(1.9rem, 1.4rem + 2vw, 3.1rem); }
.testimonials .examples-head .display { max-width: none; }


/* ---------- Hero build card ("forge"). Unique to Charlen Nexus: a problem becomes an offer, in front of the visitor. ---------- */
.hero-visual { position: relative; width: 100%; max-width: 520px; justify-self: start; animation: heroFade 1.1s var(--ease) 260ms both; will-change: transform; }
@media (min-width: 900px) { .hero-visual { justify-self: end; margin-top: calc(0.78rem * 1.5 + 1.4rem); } }
.forge { padding: 1.25rem 0 0 0; }
.forge-deck { position: absolute; inset: 0; pointer-events: none; }
.forge-deck span { position: absolute; left: 0; right: 0; top: 0; bottom: 2.4rem; border-radius: 18px; border: 1px solid oklch(100% 0 0 / 0.10); background: oklch(100% 0 0 / 0.03); }
.forge-deck span:nth-child(1) { transform: translate(14px, -14px) rotate(1.4deg); }
.forge-deck span:nth-child(2) { transform: translate(28px, -26px) rotate(2.6deg); opacity: 0.6; }
.forge-card { position: relative; border-radius: 18px; padding: clamp(1.4rem, 3vw, 2rem); background: linear-gradient(160deg, oklch(100% 0 0 / 0.10), oklch(100% 0 0 / 0.04)); border: 1px solid oklch(100% 0 0 / 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 40px 90px oklch(0% 0 0 / 0.45), inset 0 1px 0 oklch(100% 0 0 / 0.12); min-height: 30rem; display: grid; align-content: start; gap: 0.5rem; overflow: hidden; }
.forge-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold), transparent 75%); }
.forge-kicker { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.forge-live { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 oklch(75.2% 0.122 84.8 / 0.6); animation: forgePulse 2.2s ease-out infinite; }
@keyframes forgePulse { 0% { box-shadow: 0 0 0 0 oklch(75.2% 0.122 84.8 / 0.6); } 100% { box-shadow: 0 0 0 10px oklch(75.2% 0.122 84.8 / 0); } }
.forge-label { margin-top: 1.1rem; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(100% 0 0 / 0.5); font-weight: 600; }
.forge-say { font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem); line-height: 1.3; color: var(--white); min-height: 2.6em; }
.forge-caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -0.15em; background: var(--gold); opacity: 0; }
.forge.is-typing .forge-caret { opacity: 1; animation: forgeCaret 0.9s steps(1) infinite; }
@keyframes forgeCaret { 50% { opacity: 0; } }
.forge-seam { height: 1px; margin: 0.9rem 0 0.4rem; background: linear-gradient(90deg, var(--gold), oklch(75.2% 0.122 84.8 / 0.2)); transform: scaleX(0); transform-origin: left; transition: transform 0.65s var(--ease); }
.forge-label--offer { margin-top: 0.4rem; }
.forge-offer { display: grid; gap: 0.35rem; }
.forge-offer > * { transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.forge-cat { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.forge-dot { margin: 0 0.45rem; color: oklch(100% 0 0 / 0.5); }
.forge-name { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem); line-height: 1.1; font-weight: 500; color: var(--white); margin-top: 0.15rem; }
.forge-line { color: var(--pale); font-size: 0.95rem; max-width: 34ch; }
.forge-model { margin-top: 0.55rem; padding-top: 0.7rem; border-top: 1px solid oklch(100% 0 0 / 0.14); display: grid; gap: 0.15rem; font-size: 0.92rem; color: var(--white); }
.forge-model span { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: oklch(100% 0 0 / 0.5); }
.forge-model b { font-weight: 500; }
.forge-stamp { position: absolute; right: 1.4rem; bottom: 1.4rem; padding: 0.45rem 0.8rem; border: 2px solid var(--gold); border-radius: 6px; color: var(--gold); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; transform: rotate(-8deg) scale(1.6); opacity: 0; transition: transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.25s var(--ease); }
.forge-steps { list-style: none; margin: 0.9rem 0 0; padding: 0 0.25rem; display: flex; gap: 0.45rem; }
.forge-steps li { width: 26px; height: 2px; background: oklch(100% 0 0 / 0.18); transition: background var(--dur-fast) var(--ease); }
.forge-steps li.is-active { background: var(--gold); } .forge-steps li.is-done { background: oklch(75.2% 0.122 84.8 / 0.5); }
/* Live sequence states */
.forge.is-live .forge-seam { transform: scaleX(0); }
.forge.is-live .forge-label--offer, .forge.is-live .forge-offer > * { opacity: 0; transform: translateY(10px); }
.forge.is-live.is-seam .forge-seam { transform: scaleX(1); }
.forge.is-live.is-offer .forge-label--offer { opacity: 1; transform: none; }
.forge.is-live.is-offer .forge-offer > * { opacity: 1; transform: none; }
.forge.is-live.is-offer .forge-offer > :nth-child(1) { transition-delay: 0ms; }
.forge.is-live.is-offer .forge-offer > :nth-child(2) { transition-delay: 140ms; }
.forge.is-live.is-offer .forge-offer > :nth-child(3) { transition-delay: 280ms; }
.forge.is-live.is-offer .forge-offer > :nth-child(4) { transition-delay: 420ms; }
.forge.is-live.is-stamp .forge-stamp { opacity: 1; transform: rotate(-8deg) scale(1); }
.forge-card { transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.forge.is-live.is-out .forge-card { opacity: 0; transform: translateY(-8px); }
/* Static (reduced motion or no JavaScript): finished card, seam drawn, stamp shown. */
.forge:not(.is-live) .forge-seam { transform: scaleX(1); transition: none; }
.forge:not(.is-live) .forge-stamp { opacity: 1; transform: rotate(-8deg) scale(1); transition: none; }
.forge:not(.is-live) .forge-live { animation: none; }
@media (max-width: 899px) { .forge-card { min-height: 0; } .forge-deck span { bottom: 2.2rem; } }
@media (max-width: 899px) { .forge-card { padding-bottom: 4.4rem; } .forge-stamp { right: 1.2rem; bottom: 1.2rem; } }


/* ---------- Hero build card inside a tablet frame ---------- */
.forge { padding-top: 0; }
.tablet { position: relative; padding: 12px; border-radius: 30px; background: linear-gradient(160deg, #1a2a3c, #0a1421); border: 1px solid oklch(100% 0 0 / 0.16); box-shadow: 0 50px 110px oklch(0% 0 0 / 0.5), inset 0 1px 0 oklch(100% 0 0 / 0.14), inset 0 -1px 0 oklch(0% 0 0 / 0.5); }
.tablet::after { content: ""; position: absolute; inset: 0; border-radius: 30px; pointer-events: none; background: linear-gradient(115deg, oklch(100% 0 0 / 0.08), transparent 40%); }
.tablet-cam { position: absolute; top: 5px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #06101a; box-shadow: inset 0 0 0 1.5px oklch(100% 0 0 / 0.12), 0 0 0 1px oklch(0% 0 0 / 0.6); z-index: 2; }
.forge-card { border-radius: 20px; background: radial-gradient(120% 90% at 100% 0%, oklch(32% 0.06 250) 0%, var(--navy) 55%, oklch(20% 0.045 250) 100%); border: 1px solid oklch(100% 0 0 / 0.08); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.35); padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.4rem, 3vw, 2rem); }
.forge-card::before { left: 0; right: 0; top: 0; height: 2px; }
.forge-steps { justify-content: center; margin-top: 1rem; }
.forge.is-live.is-out .forge-card { opacity: 1; transform: none; }
.forge-card > * { transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.forge.is-live.is-out .forge-card > * { opacity: 0; transform: translateY(-6px); }
/* Reserve a row for the Ready to sell mark so it never sits on the model line. */
.forge-card { padding-bottom: 4.8rem; }
.forge-stamp { right: 1.4rem; bottom: 1.35rem; }


/* ---------- Tablet screen in white, navy text ---------- */
.forge-card { background: linear-gradient(170deg, #ffffff 0%, #f5f8fb 100%); border: 1px solid var(--line); box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.04); }
.forge-card::before { background: linear-gradient(90deg, var(--gold), transparent 75%); }
.forge-kicker { color: var(--gold-text); }
.forge-live { background: var(--gold-text); box-shadow: 0 0 0 0 oklch(60% 0.135 83 / 0.5); animation-name: forgePulseLight; }
@keyframes forgePulseLight { 0% { box-shadow: 0 0 0 0 oklch(60% 0.135 83 / 0.5); } 100% { box-shadow: 0 0 0 10px oklch(60% 0.135 83 / 0); } }
.forge-label { color: var(--text-muted); }
.forge-say { color: var(--navy); }
.forge-caret { background: var(--gold-text); }
.forge-seam { background: linear-gradient(90deg, var(--gold), oklch(75.2% 0.122 84.8 / 0.25)); }
.forge-cat { color: var(--gold-text); }
.forge-dot { color: var(--text-muted); }
.forge-name { color: var(--navy); }
.forge-line { color: var(--text); }
.forge-model { border-top-color: var(--line); color: var(--navy); }
.forge-model span { color: var(--text-muted); }
.forge-stamp { color: var(--gold-text); border-color: var(--gold-text); background: oklch(100% 0 0 / 0.7); }
.forge-count { margin: 0.9rem 0 0; display: flex; justify-content: center; align-items: baseline; gap: 0.6rem; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(100% 0 0 / 0.55); }
.forge-count span:first-child { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.04em; color: var(--gold); text-transform: none; }
.tablet { background: linear-gradient(160deg, #22344a, #0b1522); }

/* ---------- Ticker: solid navy strip, fade applied to the moving words only, hairlines top and bottom ---------- */
.ticker--cine { -webkit-mask-image: none; mask-image: none; background: oklch(20% 0.045 250); border-top: 1px solid oklch(75.2% 0.122 84.8 / 0.35); border-bottom: 1px solid oklch(75.2% 0.122 84.8 / 0.35); padding: 1.15rem 0; }
.ticker--cine .ticker-track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }

/* Small-caps labels never drop below 11px on phones. */
.forge-label, .forge-cat, .forge-model span, .forge-count-label, .plan-badge, .idx-model span, .tile-model span, .tile-who, .tile-cat, .vs-name, .stone-when, .tl-renew span, .stone-renew span, .adv-num, .idx-cat { font-size: max(0.7rem, 11px); }

/* Phone review fixes */
@media (max-width: 480px) { .hero .eyebrow { font-size: 0.7rem; letter-spacing: 0.1em; } }
.participation-cols .rule-list { display: grid; gap: 0.7rem; margin-top: 0.9rem; }
.participation-cols .rule-list li { position: relative; padding: 0 0 0 1.3rem; border: 0; }
.participation-cols .rule-list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 12px; height: 2px; background: var(--gold); }
.participation-cols h3 { margin-top: 0.2rem; }


/* ---------- Membership v2 (2026-09-09): two cards, no table, terms in one block ---------- */
.plans--v2 { margin-top: clamp(2rem, 4vw, 3rem); gap: 1.25rem; align-items: stretch; }
.plans--v2 .plan { border-radius: 16px; padding: clamp(1.6rem, 3vw, 2.4rem); gap: 0.6rem; box-shadow: 0 24px 60px oklch(26.3% 0.046 250 / 0.10); }
.plans--v2 .plan--core { border-top: 0; border: 1px solid var(--line); }
.plans--v2 .plan--vip { border: 1px solid var(--navy); background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
.plans--v2 .plan--vip::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 60% at 100% 0%, oklch(45% 0.07 250 / 0.6), transparent 70%); }
.plans--v2 .plan--vip > * { position: relative; }
.plans--v2 .plan-name { color: var(--text-muted); } .plans--v2 .plan--vip .plan-name { color: var(--gold); }
.plans--v2 .plan-amount { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); } .plans--v2 .plan--vip .plan-amount { color: var(--white); }
.plans--v2 .plan--vip .plan-term, .plans--v2 .plan--vip .plan-equiv { color: var(--pale); }
.plans--v2 .plan-for { font-size: 1.15rem; margin-top: 0.6rem; } .plans--v2 .plan--vip .plan-for { color: var(--white); }
.plans--v2 .plan-list { margin-top: 0.9rem; gap: 0.5rem; }
.plans--v2 .plan-list li { font-size: 0.97rem; padding-left: 1.6rem; }
.plans--v2 .plan-list li::before { top: 0.45em; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%2312263A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 10px; background-position: center; background-repeat: no-repeat; }
.plans--v2 .plan--vip .plan-list li { color: var(--white); }
.plans--v2 .plan--vip .plan-list li::before { background-color: var(--teal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plans--v2 .plan-cta { margin-top: 1.4rem; }
.plans--v2 .plan--vip .plan-cta { background: var(--gold); color: var(--navy); } .plans--v2 .plan--vip .plan-cta:hover { background: var(--gold-hover); }
.plans--v2 .plan--vip .plan-note { background: oklch(100% 0 0 / 0.08); color: var(--white); }
.plan-excl { margin-top: 0.9rem; font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
.plans--v2 .plan--vip .plan-excl { color: oklch(100% 0 0 / 0.6); }
.plans--v2 .plan-badge { position: static; display: inline-block; margin: 0.2rem 0 0.3rem; background: transparent; color: var(--gold); border-color: oklch(75.2% 0.122 84.8 / 0.7); }
.plan-terms { margin-top: clamp(1.75rem, 3vw, 2.5rem); padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--line); border-radius: 12px; background: var(--white); display: grid; gap: 0.7rem; font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; }
.plan-terms p { margin: 0; } .plan-terms strong { color: var(--navy); font-weight: 600; }
@media (min-width: 900px) { .plans--v2 { grid-template-columns: 1fr 1fr; gap: 1.5rem; } .plans--v2 .plan--vip { transform: translateY(-8px); } .plan-terms { grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; } }


/* ---------- Founder identity, glossy ---------- */
.founder-identity--v2 { margin-top: 1.4rem; padding: 1.4rem 1.5rem 1.3rem; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(160deg, #ffffff 0%, #f3f6fa 100%); box-shadow: 0 18px 44px oklch(26.3% 0.046 250 / 0.10), inset 0 1px 0 #fff; position: relative; overflow: hidden; display: grid; gap: 0.25rem; }
.founder-identity--v2::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold), oklch(75.2% 0.122 84.8 / 0.2)); }
.founder-identity--v2 .founder-name { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 500; color: var(--navy); line-height: 1.1; }
.founder-identity--v2 .founder-role { margin-top: 0.3rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); }
.founder-alias { font-family: var(--font-display); font-style: italic; color: var(--text-muted); font-size: 1rem; }
.founder-creds-list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.founder-creds-list li { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--navy); padding: 0.4rem 0.7rem; border-radius: 999px; background: var(--white); border: 1px solid var(--line-strong); box-shadow: 0 2px 6px oklch(26.3% 0.046 250 / 0.08); }

/* ---------- Pricing v2 additions ---------- */
.plan-private { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); padding: 1rem 1.25rem; border-radius: 12px; border: 1px solid var(--line); border-left: 3px solid var(--gold); background: var(--white); color: var(--text); font-size: 0.95rem; }
.plan-private span { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); margin-bottom: 0.25rem; }

/* Charlen Founder Counsel */
.plan-private--v2 { display: grid; gap: 0.35rem 2.5rem; align-items: center; padding: 1.25rem 1.5rem; background: linear-gradient(160deg, #ffffff, #f3f6fa); border-left: 3px solid var(--gold); box-shadow: 0 14px 36px oklch(26.3% 0.046 250 / 0.08); }
.plan-private-kicker { display: block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); margin-bottom: 0.2rem; }
.plan-private-name { font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem); font-weight: 500; color: var(--navy); line-height: 1.15; }
.plan-private-copy { color: var(--text); font-size: 0.95rem; } .plan-private-copy b { color: var(--navy); font-weight: 600; }
@media (min-width: 900px) { .plan-private--v2 { grid-template-columns: auto 1fr; } }

/* Three plans */
.plans--three .plan--counsel { border: 1px solid var(--line); border-top: 3px solid var(--gold); background: linear-gradient(170deg, #ffffff, #f3f6fa); }
.plans--three .plan--counsel .plan-name { color: var(--gold-text); }
.plans--three .plan--counsel .plan-list li::before { background-color: var(--navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (min-width: 900px) and (max-width: 1099px) { .plans--three { grid-template-columns: 1fr 1fr; } .plans--three .plan--counsel { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .plans--three { grid-template-columns: 1fr 1.08fr 1fr; gap: 1.25rem; } .plans--three .plan--vip { transform: translateY(-10px); } .plans--three .plan-amount { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 2.9rem); } }

/* VIP two-payment option */
.plan-split { margin-top: 0.5rem; padding: 0.7rem 0.85rem; border-radius: 8px; border: 1px solid oklch(100% 0 0 / 0.16); background: oklch(100% 0 0 / 0.06); font-size: 0.86rem; color: var(--white); line-height: 1.45; }
.plan-split span { display: block; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold); margin-bottom: 0.15rem; }


/* =====================================================================
   GLOSS PASS (2026-09-09): sheen, depth, frosted nav, gradient surfaces, navy footer.
   ===================================================================== */
/* Buttons */
.btn-gold { background: linear-gradient(180deg, #e0bc62 0%, #d2a84a 60%, #c99d3c 100%); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.45), inset 0 -1px 0 oklch(0% 0 0 / 0.08), 0 10px 24px oklch(75.2% 0.122 84.8 / 0.28); }
.btn-gold:hover { background: linear-gradient(180deg, #e6c471 0%, #d9b052 60%, #cfa343 100%); }
.btn-navy, .nav[data-state="scrolled"] .btn-nav { background: linear-gradient(180deg, #1b3452 0%, #12263A 70%); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.14), 0 10px 24px oklch(26.3% 0.046 250 / 0.28); }
.btn-navy:hover, .nav[data-state="scrolled"] .btn-nav:hover { background: linear-gradient(180deg, #223d5d 0%, #16304a 70%); }
/* Frosted navigation once scrolled */
.nav[data-state="scrolled"], .nav.is-open { background: oklch(100% 0 0 / 0.86); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 var(--line), 0 12px 32px oklch(26.3% 0.046 250 / 0.06); }
/* Surfaces: gentle gradients instead of flat fills */
.section--light { background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); }
.section--cool { background: linear-gradient(180deg, #edf3f8 0%, #f6f9fc 100%); }
.section--ivory { background: linear-gradient(180deg, #f3f7fa 0%, #fbfcfe 100%); }
/* Cards: glossy white with a top highlight */
.plan--core, .plan--counsel, .skill-wall li, .quote-card, .tile, .founder-identity--v2, .plan-terms, .vs-card--course, .tl-renew { background: linear-gradient(170deg, #ffffff 0%, #f6f8fb 100%); box-shadow: inset 0 1px 0 #fff, 0 2px 0 oklch(26.3% 0.046 250 / 0.03), 0 18px 44px oklch(26.3% 0.046 250 / 0.09); }
.section--sheet .idx { box-shadow: inset 0 1px 0 #fff, 0 2px 0 oklch(26.3% 0.046 250 / 0.03), 0 30px 70px oklch(26.3% 0.046 250 / 0.11); }
/* Navy panels: glass highlight along the top edge */
.adv, .vs-card--nexus, .plan--vip, .stone, .adv-card, .journey .stone-renew { box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.12), 0 30px 70px oklch(26.3% 0.046 250 / 0.22); }
.stone.is-active { box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.18), 0 30px 70px oklch(0% 0 0 / 0.35), 0 0 0 1px oklch(75.2% 0.122 84.8 / 0.2); }
/* Path cards */
.path--navy { background: linear-gradient(160deg, #1a3350, #12263A); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.12), 0 18px 44px oklch(26.3% 0.046 250 / 0.2); }
.path--teal { background: linear-gradient(160deg, #eef6f5, #e2efed); box-shadow: inset 0 1px 0 #fff, 0 18px 44px oklch(26.3% 0.046 250 / 0.08); }
.path--ivory { background: linear-gradient(170deg, #ffffff, #f6f8fb); box-shadow: inset 0 1px 0 #fff, 0 18px 44px oklch(26.3% 0.046 250 / 0.08); }
/* Covers and portrait: a soft light across the top left */
.folio-covers picture.folio-main::after, .portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, oklch(100% 0 0 / 0.18) 0%, transparent 45%); }
.portrait { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 70px oklch(26.3% 0.046 250 / 0.22); }
.portrait img { display: block; width: 100%; height: auto; }
/* FAQ rows */
.faq-list details { border-radius: 10px; padding-inline: 0.9rem; margin-inline: -0.9rem; transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.faq-list details[open] { background: linear-gradient(170deg, #ffffff, #f6f8fb); box-shadow: inset 0 1px 0 #fff, 0 14px 36px oklch(26.3% 0.046 250 / 0.08); border-color: transparent; }
@media (hover: hover) { .faq-list details:hover { background: oklch(100% 0 0 / 0.7); } }
/* Closing: same glow as the hero */
.closing { position: relative; overflow: hidden; }
.closing::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 85% 0%, oklch(45% 0.07 250 / 0.6), transparent 70%), radial-gradient(35% 40% at 10% 100%, oklch(75.2% 0.122 84.8 / 0.12), transparent 70%); }
.closing .container { position: relative; }
/* Footer in navy */
.footer { background: linear-gradient(180deg, #0f2031, #0b1826); color: var(--pale); border-top: 1px solid oklch(75.2% 0.122 84.8 / 0.3); }
.footer-brand img { height: 34px; width: auto; }
.footer-links a { color: var(--pale); } .footer-links a:hover { color: var(--gold); }
.footer-copy { color: oklch(100% 0 0 / 0.5); }
.footer-bottom { border-top-color: oklch(100% 0 0 / 0.1); }
/* Tablet: glossier bezel */
.tablet { box-shadow: 0 60px 120px oklch(0% 0 0 / 0.55), 0 0 0 1px oklch(100% 0 0 / 0.08), inset 0 1px 0 oklch(100% 0 0 / 0.18), inset 0 -1px 0 oklch(0% 0 0 / 0.6); }


/* ---------- Section 03: two-column card grid inside the sheet (fills the width, no dead space) ---------- */
.section--sheet .idx { display: grid; gap: 0.75rem; padding: 0.9rem; }
.section--sheet .idx-row { grid-template-columns: 2.2rem 1fr; column-gap: 0.75rem; padding: 1.25rem 1.2rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(170deg, #ffffff, #f7f9fc); box-shadow: inset 0 1px 0 #fff, 0 6px 18px oklch(26.3% 0.046 250 / 0.05); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.section--sheet .idx-row:last-child { border-bottom: 1px solid var(--line); }
.section--sheet .idx-num { padding-top: 0.25rem; }
.section--sheet .idx-name { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem); }
.section--sheet .idx-line { font-size: 0.93rem; max-width: none; }
.section--sheet .idx-model { grid-column: 2; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--line); flex-direction: row; align-items: baseline; gap: 0.6rem; }
@media (min-width: 900px) {
  .section--sheet .idx { grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; }
  .section--sheet .idx-row { grid-template-columns: 2.4rem 1fr; padding: 1.4rem 1.4rem 1.3rem; }
  .section--sheet .idx-model { grid-column: 2; justify-self: stretch; text-align: left; flex-direction: row; padding-top: 0.7rem; }
}
@media (hover: hover) { .section--sheet .idx-row:hover { background: #fff; transform: translateY(-3px); border-color: oklch(75.2% 0.122 84.8 / 0.7); box-shadow: 0 16px 36px oklch(26.3% 0.046 250 / 0.10); } }
.examples .builds-more { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

.idx-model span { white-space: nowrap; }


/* ---------- Hero card typing: steady cursor, stable line box ---------- */
.forge.is-typing .forge-caret { animation: forgeCaretSoft 1.1s ease-in-out infinite; }
@keyframes forgeCaretSoft { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.forge-say { min-height: 2.6em; contain: layout; }
.forge-card > * { transition: opacity 0.45s var(--ease); }

/* ---------- Journey on a light stage: chapters centred, active milestone in navy ---------- */
.journey.section--dark { background: linear-gradient(180deg, #eef3f8 0%, #f8fafc 100%); color: var(--text); }
.journey-glow { background: radial-gradient(55% 60% at 90% 10%, oklch(75.2% 0.122 84.8 / 0.14), transparent 70%), radial-gradient(40% 40% at 5% 90%, oklch(85% 0.04 250 / 0.5), transparent 70%); }
.journey .section-label--dark { color: var(--text-muted); } .journey .section-label--dark span { color: var(--navy); }
.journey .examples-head--dark .display { color: var(--navy); } .journey .examples-head--dark .studio-sub { color: var(--text-muted); }
.chapters { background: oklch(100% 0 0 / 0.78); border: 1px solid var(--line); box-shadow: inset 0 1px 0 #fff, 0 18px 44px oklch(26.3% 0.046 250 / 0.10); }
.chapters-bar { background: var(--line-strong); }
.chapters-list--centred li { justify-items: center; text-align: center; color: var(--text-muted); }
.chapters-list--centred li b, .chapters-list--centred li span { color: inherit; }
.chapters-list li.is-active { color: var(--gold-text); } .chapters-list li.is-past { color: var(--navy); }
.stone { background: linear-gradient(170deg, #ffffff, #f6f8fb); border: 1px solid var(--line); box-shadow: inset 0 1px 0 #fff, 0 12px 30px oklch(26.3% 0.046 250 / 0.06); opacity: 1; }
.stone::after { background: linear-gradient(110deg, transparent 35%, oklch(100% 0 0 / 0.35) 50%, transparent 65%); }
.stone-index { color: oklch(26.3% 0.046 250 / 0.08); }
.stone-when { color: var(--gold-text); }
.stone-body h3 { color: var(--navy); } .stone-body p:last-child { color: var(--text-muted); }
.stone.is-active { background: linear-gradient(160deg, #1a3350, #12263A); border-color: var(--navy); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.14), 0 30px 70px oklch(26.3% 0.046 250 / 0.28), 0 0 0 1px oklch(75.2% 0.122 84.8 / 0.5); transform: scale(1.015); }
.stone.is-active .stone-index { color: oklch(75.2% 0.122 84.8 / 0.35); }
.stone.is-active .stone-when { color: var(--gold); }
.stone.is-active .stone-body h3 { color: var(--white); } .stone.is-active .stone-body p:last-child { color: var(--pale); }
.stone.is-active::after { background: linear-gradient(110deg, transparent 35%, oklch(100% 0 0 / 0.08) 50%, transparent 65%); }
.journey .stone-renew { background: linear-gradient(170deg, #ffffff, #f6f8fb); border: 1px solid var(--line); border-left: 3px solid var(--gold); color: var(--text); box-shadow: inset 0 1px 0 #fff, 0 12px 30px oklch(26.3% 0.046 250 / 0.06); }
.journey .stone-renew span { color: var(--gold-text); }
/* Hero card: while the problem is still typing, faint placeholder lines hold the space where the offer will appear. */
.forge-offer { position: relative; min-height: 9.5rem; }
.forge-offer::before { content: ""; position: absolute; inset: 0.2rem 0 0; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease); background:
  linear-gradient(90deg, #e9eef4 0 38%, transparent 38%) 0 0 / 100% 10px no-repeat,
  linear-gradient(90deg, #e3e9f0 0 72%, transparent 72%) 0 26px / 100% 22px no-repeat,
  linear-gradient(90deg, #e9eef4 0 90%, transparent 90%) 0 62px / 100% 10px no-repeat,
  linear-gradient(90deg, #e9eef4 0 60%, transparent 60%) 0 80px / 100% 10px no-repeat; border-radius: 4px; }
.forge.is-live:not(.is-offer) .forge-offer::before { opacity: 1; }


/* ---------- Mobile menu as a dropdown panel with descriptions; three-line icon ---------- */
.nav-toggle-lines { width: 20px; height: 13px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; transition: background-size var(--dur-fast) var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines { background-size: 0 1.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines::before { transform: translateY(5.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines::after { transform: translateY(-5.75px) rotate(-45deg); }
.nav-toggle:focus { outline: none; } .nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.mobile-menu { inset: auto 0.75rem auto 0.75rem; top: calc(64px + 0.5rem); max-height: calc(100vh - 64px - 1.25rem); border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(170deg, #ffffff, #f6f8fb); box-shadow: inset 0 1px 0 #fff, 0 30px 70px oklch(26.3% 0.046 250 / 0.22); overflow: hidden; }
.mobile-menu-inner { min-height: 0; padding: 0.5rem 0.5rem 1rem; }
.mobile-menu nav { border-top: 0; }
.mobile-menu nav a:not(.btn) { display: grid; gap: 0.15rem; padding: 0.95rem 0.9rem; border-bottom: 1px solid var(--line); border-radius: 10px; font-family: var(--font-sans); font-size: 1rem; }
.mobile-menu nav a:not(.btn):last-of-type { border-bottom: 0; }
.mm-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--navy); line-height: 1.15; }
.mm-desc { font-size: 0.85rem; color: var(--text-muted); }
.mobile-menu nav a:not(.btn):hover { background: var(--white-cool); padding-left: 0.9rem; }
.mobile-menu nav .btn { margin: 0.9rem 0.9rem 0; align-self: stretch; width: calc(100% - 1.8rem); }
.mobile-menu { transform: translateY(-6px) scale(0.98); transform-origin: top right; }
.mobile-menu.is-open { transform: none; }


/* ---------- Footer v2: aligned columns, social placeholders ---------- */
.footer--v2 { padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem; }
.footer-grid { display: grid; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid oklch(100% 0 0 / 0.1); }
.footer-brand-col { display: grid; gap: 1rem; align-content: start; }
.footer-line { color: oklch(100% 0 0 / 0.7); font-size: 0.95rem; max-width: 30ch; line-height: 1.5; }
.footer-col { display: grid; gap: 0.55rem; align-content: start; }
.footer-h { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--gold); margin-bottom: 0.3rem; }
.footer-col a:not(.social) { color: var(--pale); text-decoration: none; font-size: 0.95rem; transition: color var(--dur-fast) var(--ease); }
.footer-col a:not(.social):hover { color: var(--gold); }
.socials { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.social { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--pale); text-decoration: none; font-size: 0.95rem; }
.social svg { width: 20px; height: 20px; flex: none; }
.social.is-soon { opacity: 0.55; cursor: default; }
.footer-soon { font-size: 0.78rem; color: oklch(100% 0 0 / 0.5); margin-top: 0.2rem; }
.footer--v2 .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; padding-top: 1.25rem; border-top: 0; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }


/* ---------- Statement band ---------- */
.statement { position: relative; overflow: hidden; background: linear-gradient(160deg, #1a3350, #12263A); color: var(--white); padding: clamp(3rem, 6vw, 4.5rem) 0; border-top: 1px solid oklch(75.2% 0.122 84.8 / 0.35); border-bottom: 1px solid oklch(75.2% 0.122 84.8 / 0.35); }
.statement-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 80% at 90% 50%, oklch(45% 0.07 250 / 0.6), transparent 70%), radial-gradient(30% 60% at 8% 50%, oklch(75.2% 0.122 84.8 / 0.14), transparent 70%); }
.statement .container { position: relative; display: grid; gap: 0.9rem; }
.statement-line { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 1.15rem + 2vw, 2.9rem); line-height: 1.12; letter-spacing: -0.015em; max-width: 24ch; text-wrap: balance; }
.statement-sub { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); color: var(--pale); max-width: 48ch; padding-left: 1rem; border-left: 2px solid var(--gold); }

/* ---------- Footer: compact on phones and tablets ---------- */
.footer--v2 { padding: clamp(2rem, 4vw, 3rem) 0 1.25rem; }
.footer-grid { gap: 1.5rem; padding-bottom: 1.5rem; }
.footer-line { font-size: 0.9rem; }
.footer-col { gap: 0.4rem; }
.footer-col a:not(.social) { font-size: 0.92rem; }
.socials { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer-soon { margin-top: 0.1rem; }
@media (max-width: 599px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-col nav, nav.footer-col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  nav.footer-col .footer-h { grid-column: 1 / -1; }
  .footer-brand img { height: 30px; }
}
@media (min-width: 600px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; } .socials { display: grid; } }


/* ---------- Closing: one button, larger ---------- */
.btn-lg { min-height: 58px; padding: 0 2.4rem; font-size: 1.05rem; }
.closing-line { max-width: 14ch; margin-inline: auto; }
.closing-sub { max-width: 40ch; margin-inline: auto; }

/* ---------- Build it right: three glossy cards ---------- */
.rules { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: 1rem; }
.rules li { position: relative; display: grid; gap: 0.5rem; align-content: start; padding: 1.5rem 1.4rem 1.5rem; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(170deg, #ffffff, #f6f8fb); box-shadow: inset 0 1px 0 #fff, 0 18px 44px oklch(26.3% 0.046 250 / 0.09); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.rules li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, var(--gold), transparent 70%); }
.rule-num { font-family: var(--font-display); font-size: 0.95rem; color: var(--gold-text); }
.rules h3 { font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem); font-weight: 500; line-height: 1.2; color: var(--navy); }
.rules p { color: var(--text-muted); font-size: 0.95rem; }
@media (min-width: 900px) { .rules { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { html.js .reveal.is-in.rules li:hover, .rules li:hover { transform: translateY(-4px); border-color: oklch(75.2% 0.122 84.8 / 0.7); } }

/* Founding cohort line and hero date */
.hero-micro b { color: var(--gold); font-weight: 600; }
.cohort-line { margin-top: 1rem; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem; padding: 0.8rem 1rem; border-radius: 10px; border: 1px solid var(--line); border-left: 3px solid var(--gold); background: linear-gradient(170deg, #ffffff, #f6f8fb); color: var(--text); font-size: 0.95rem; box-shadow: inset 0 1px 0 #fff, 0 10px 26px oklch(26.3% 0.046 250 / 0.06); }
.cohort-line span { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); }

/* Footer footnote in italics */
.footer--v2 .footer-bottom .footer-copy:last-child { font-style: italic; }

/* Pay over time line on the plan cards */
.plan-bnpl { margin-top: 0.4rem; display: grid; gap: 0.15rem; font-size: 0.86rem; color: var(--text); padding: 0.6rem 0.8rem; border-radius: 8px; background: var(--white-cool); border: 1px solid var(--line); }
.plan-bnpl span { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); }
.plan-bnpl--dark { background: oklch(100% 0 0 / 0.06); border-color: oklch(100% 0 0 / 0.16); color: var(--white); }
.plan-bnpl--dark span { color: var(--gold); }

/* Pay over time: gold, impossible to miss */
.plan-bnpl { background: linear-gradient(170deg, oklch(96% 0.04 85), oklch(93% 0.06 85)); border: 1px solid oklch(75.2% 0.122 84.8 / 0.7); border-left: 4px solid var(--gold); box-shadow: inset 0 1px 0 #fff, 0 8px 20px oklch(75.2% 0.122 84.8 / 0.18); color: var(--navy); padding: 0.75rem 0.9rem; gap: 0.2rem; }
.plan-bnpl span { color: var(--gold-text); }
.plan-bnpl b { display: block; font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.plan-bnpl--dark { background: linear-gradient(170deg, oklch(75.2% 0.122 84.8 / 0.22), oklch(75.2% 0.122 84.8 / 0.12)); border-color: oklch(75.2% 0.122 84.8 / 0.8); border-left-color: var(--gold); color: var(--white); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.12), 0 8px 20px oklch(0% 0 0 / 0.25); }
.plan-bnpl--dark span { color: var(--gold); } .plan-bnpl--dark b { color: var(--white); }

/* Terms page */
.legal-body { max-width: 46rem; }
.legal-body h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem); color: var(--navy); margin-top: 2rem; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin-top: 0.7rem; color: var(--text); line-height: 1.65; }
.legal-body strong { color: var(--navy); font-weight: 600; }
.legal-note { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--text-muted); font-style: italic; }


/* ---------- Review fixes (2026-09-09, evening) ---------- */
/* Hero cue: bold, still, with a small arrow */
.hero-cue--bold { font-family: var(--font-display); font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--white); gap: 0.5rem; animation: heroFade 1s var(--ease) 900ms both; border-bottom: 1px solid oklch(75.2% 0.122 84.8 / 0.6); padding-bottom: 0.15rem; min-height: 0; }
.hero-cue--bold:hover { border-bottom-color: var(--gold); color: var(--gold); }
.hero-cue-arrow { color: var(--gold); transition: transform var(--dur-fast) var(--ease); display: inline-block; }
.hero-cue--bold:hover .hero-cue-arrow { transform: translateY(3px); }
/* Experience: bolder, four items */
.experience--v2 .exp-title { font-size: 0.86rem; font-weight: 700; color: var(--navy); letter-spacing: 0.1em; }
.experience--v2 .exp-sub { font-size: 0.98rem; color: var(--text); }
.experience--v2 li { padding: 1.3rem 0; }
@media (min-width: 720px) { .experience--v2 { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
/* Ideas: see more */
.idx-more-wrap { margin-top: 1.25rem; text-align: center; }
.idx-more { min-height: 48px; }
/* Forge: the sentence fades in as one piece; nothing types, nothing blinks */
.forge-say { opacity: 0; transform: translateY(6px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.forge:not(.is-live) .forge-say, .forge.is-live.is-said .forge-say { opacity: 1; transform: none; }
.forge-caret { display: none; }
/* Journey: slower, softer hand-off between milestones */
.stone { transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.9s cubic-bezier(0.22, 1, 0.36, 1), background 0.9s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.stone-body h3, .stone-body p, .stone-when, .stone-index { transition: color 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.chapters-fill, .chapters-head { transition-duration: 0.9s; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }

.idx-many { margin-top: 1.25rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); color: var(--navy); text-align: center; }

/* Journey hand-off: slow, steady, premium */
.stone { transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 1.4s cubic-bezier(0.16, 1, 0.3, 1), background 1.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.stone-body h3, .stone-body p, .stone-when, .stone-index { transition: color 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.chapters-fill, .chapters-head { transition-duration: 1.4s; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.chapters-list li { transition: color 1s cubic-bezier(0.16, 1, 0.3, 1); }
.stone.is-active { transform: translateY(-3px) scale(1.012); }

.closing-line { max-width: 18ch; }

@media (min-width: 900px) { .rules { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }

.nav-toggle { -webkit-tap-highlight-color: transparent; }
@media (min-width: 900px) and (max-width: 1099px) { .nav-links { gap: 1.1rem; } .nav-links a:not(.btn) { font-size: 0.9rem; } }

.plan-alt { display: block; margin-top: 0.7rem; text-align: center; font-size: 0.92rem; color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.plan-alt:hover { color: var(--white); }

.plan-split--light { background: var(--white-cool); border-color: var(--line); color: var(--text); }
.plan-split--light span { color: var(--gold-text); }
.plan--core .plan-alt { color: var(--gold-text); } .plan--core .plan-alt:hover { color: var(--navy); }

/* ---------- Review pass: one navy bar from the first pixel to the last ---------- */
.nav[data-state="scrolled"], .nav.is-open { background: oklch(24% 0.045 250 / 0.9); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.08), 0 12px 32px oklch(0% 0 0 / 0.22); }
.nav[data-state="scrolled"] .nav-links a:not(.btn) { color: var(--white); }
.nav[data-state="scrolled"] .btn-nav { background: transparent; border-color: var(--gold); color: var(--gold); box-shadow: none; }
.nav[data-state="scrolled"] .btn-nav:hover { background: var(--gold); color: var(--navy); }
.nav[data-state="scrolled"] .nav-toggle, .nav.is-open .nav-toggle, .nav-toggle[aria-expanded="true"] { color: var(--white); }
/* About us: the intro sits above the founder */
.about-intro { margin-bottom: clamp(2.75rem, 5vw, 4.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.about-lede strong { color: var(--navy); font-weight: 600; }
/* Hero card: the reset instant has no transitions, so the swap can never be seen */
.forge.is-reset, .forge.is-reset * { transition: none !important; }
/* Milestone bar: movement now comes from the scroll itself, so no CSS easing on top of it */
.chapters-fill, .chapters-head { transition: none; }
.journey-track { position: relative; }
.page-terms .nav, .nav[data-state="scrolled"] { transition: background 0.4s var(--ease); }

/* ---------- Cohort landing page ---------- */
.cohort-hero .eyebrow { color: var(--gold); }
.cohort-hero-grid { display: grid; gap: 2.5rem; align-items: center; margin-top: 1.25rem; }
.cohort-hero .lede { margin-top: 1.25rem; color: var(--pale); max-width: 40rem; }
.cohort-hero .hero-actions { margin-top: 1.8rem; }
.cohort-hero .hero-micro { margin-top: 1rem; color: oklch(100% 0 0 / 0.6); font-size: 0.88rem; }
.countdown { border-radius: 18px; padding: clamp(1.4rem, 3vw, 2.2rem); background: linear-gradient(160deg, oklch(100% 0 0 / 0.10), oklch(100% 0 0 / 0.04)); border: 1px solid oklch(100% 0 0 / 0.16); box-shadow: 0 40px 90px oklch(0% 0 0 / 0.35), inset 0 1px 0 oklch(100% 0 0 / 0.14); text-align: center; }
.countdown-label { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.countdown-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1rem; }
.countdown-grid > div { display: grid; gap: 0.2rem; padding: 0.9rem 0.4rem; border-radius: 12px; background: oklch(100% 0 0 / 0.06); border: 1px solid oklch(100% 0 0 / 0.10); }
.countdown-grid b { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.6rem); line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.countdown-grid span { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(100% 0 0 / 0.55); }
.countdown-note { margin-top: 1rem; font-size: 0.85rem; color: oklch(100% 0 0 / 0.65); line-height: 1.5; }
.countdown.is-live .countdown-grid b { color: var(--gold); }
@media (min-width: 900px) { .cohort-hero-grid { grid-template-columns: 1.25fr 0.9fr; gap: 4rem; } }
.rules--four .rule-num { font-family: var(--font-display); color: var(--gold-text); }
@media (min-width: 900px) { .rules--four { grid-template-columns: repeat(4, 1fr); } }
.fit-grid { display: grid; gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); }
.fit-col { border-radius: 16px; padding: clamp(1.5rem, 3vw, 2.2rem); border: 1px solid var(--line); background: linear-gradient(170deg, #ffffff, #f6f8fb); box-shadow: inset 0 1px 0 #fff, 0 12px 30px oklch(26.3% 0.046 250 / 0.06); }
.fit-col h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); color: var(--navy); }
.fit-col ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.fit-col li { position: relative; padding-left: 1.7rem; color: var(--text); line-height: 1.5; }
.fit-col li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 15px; height: 15px; border-radius: 50%; background-color: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%2312263A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 100%; }
.fit-col--no li::before { background-color: var(--line-strong); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5l5 5M10.5 5.5l-5 5' fill='none' stroke='%2312263A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fit-col--no li { color: var(--text-muted); }
@media (min-width: 760px) { .fit-grid { grid-template-columns: 1fr 1fr; } }
.host { display: grid; gap: 2rem; align-items: center; }
.host-portrait { max-width: 22rem; margin: 0; }
.host-copy .display { margin-top: 1.25rem; }
.host-copy p:not(.section-label) { margin-top: 1rem; color: var(--text); max-width: 52ch; }
.host-copy .link-arrow { margin-top: 1.25rem; display: inline-block; }
@media (min-width: 900px) { .host { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; } }
.page-cohort .membership .plans--v2 { max-width: 62rem; }

/* ---------- Founder's price (Core, until October 15 or 100 members) ---------- */
.plan-price--founder { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.7rem; }
.plan-was { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); color: var(--text-muted); text-decoration-thickness: 1.5px; text-decoration-color: var(--gold); }
.plan-price--founder .plan-term { flex-basis: 100%; }
.plan-founder { display: grid; gap: 0.2rem; margin-top: 0.9rem; padding: 0.8rem 0.95rem; border-radius: 10px; font-size: 0.92rem; line-height: 1.45; color: var(--navy); background: linear-gradient(170deg, oklch(97% 0.03 85), oklch(94% 0.05 85)); border: 1px solid oklch(75.2% 0.122 84.8 / 0.6); }
.plan-founder span { font-size: max(0.7rem, 11px); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); }
.plan-founder .plan-founder-body { font-size: inherit; letter-spacing: 0; text-transform: none; font-weight: 400; color: inherit; }
.plan-founder .plan-founder-body strong { font-weight: 700; letter-spacing: 0.04em; }

/* ---------- Start page (email capture) ---------- */
.page-start { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .page-start { scroll-behavior: auto; } }
.start-header { background: var(--navy); }
.start-header-inner { display: flex; align-items: center; height: 64px; }
.start-brand img { height: 40px; width: auto; display: block; }
.start-hero { padding-top: clamp(2rem, 4vw, 3rem); }
.start-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.start-hero .eyebrow { color: var(--gold); }
.start-hero .builds-intro-title { margin-top: 0.9rem; max-width: 14ch; }
.start-hero .lede { margin-top: 1.1rem; color: var(--pale); max-width: 34rem; }
.start-form { border-radius: 18px; padding: clamp(1.4rem, 3vw, 2rem); background: linear-gradient(170deg, #ffffff, #f5f8fb); border: 1px solid var(--line); box-shadow: 0 40px 90px oklch(0% 0 0 / 0.35), inset 0 1px 0 #fff; color: var(--navy); scroll-margin-top: 80px; }
.start-form-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.15; color: var(--navy); }
.start-form-p { margin-top: 0.6rem; color: var(--text-muted); font-size: 0.97rem; }
.start-embed { margin-top: 1.1rem; }
.start-preview { border: 1px dashed oklch(75.2% 0.122 84.8 / 0.8); border-radius: 12px; padding: 0.95rem 1rem; background: oklch(97% 0.03 85 / 0.6); font-size: 0.92rem; line-height: 1.5; color: var(--text); }
.start-preview-tag { font-size: max(0.7rem, 11px); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); margin-bottom: 0.3rem; }
.start-preview a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.start-reassure { margin-top: 0.9rem; font-size: 0.88rem; color: var(--navy); font-weight: 500; }
.start-privacy { margin-top: 0.45rem; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
.start-privacy a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
@media (min-width: 900px) { .start-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; } }
@media (min-width: 900px) { .rules--three { grid-template-columns: repeat(3, 1fr); } }
.start-proof { display: grid; gap: 2rem; align-items: center; }
.start-proof .display { margin-top: 1.25rem; }
.start-founder-line { margin-top: 1rem; color: var(--text); max-width: 46ch; }
.start-quote { margin: 0; }
.start-quote .quote-role { max-width: 34ch; }
@media (min-width: 900px) { .start-proof { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.start-hesitation { text-align: center; max-width: 46rem; }
.start-hesitation p { margin-top: 1rem; color: var(--text-muted); font-size: 1.1rem; }
.start-footer .footer-bottom { border-top: 0; padding-top: 0; }
.start-footer .footer-copy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; margin-left: 0.5rem; }

/* ---------- Start page: the Systeme.io form, styled to the page ---------- */
.start-signup { margin-top: 1.1rem; display: grid; gap: 0.7rem; }
.start-signup input { width: 100%; height: 52px; padding: 0 1rem; border-radius: 10px; border: 1px solid var(--line-strong); background: #fff; color: var(--navy); font: inherit; font-size: 1rem; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.start-signup input::placeholder { color: var(--text-muted); }
.start-signup input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px oklch(75.2% 0.122 84.8 / 0.35); }
.start-signup input[aria-invalid="true"] { border-color: #b3261e; }
.start-signup .btn { width: 100%; height: 52px; }
.start-signup .btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.start-signup .btn[disabled] { opacity: 0.7; cursor: default; }
.start-error { font-size: 0.85rem; color: #b3261e; }
.thanks-hero { min-height: calc(100vh - 64px); display: flex; align-items: center; padding-bottom: clamp(4rem, 8vw, 6rem); }
.thanks-inner { max-width: 44rem; }
.thanks-hero .eyebrow { color: var(--gold); }
.thanks-hero .builds-intro-title { margin-top: 0.9rem; }
.thanks-hero .lede { margin-top: 1.1rem; color: var(--pale); }
.thanks-hero .hero-actions { margin-top: 1.8rem; }

/* ---------- Homepage hero: the membership-details form is the front door ---------- */
.hero-signup { margin-top: 1.9rem; max-width: 36rem; }
.hero-signup-h { font-size: max(0.7rem, 11px); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--gold); margin-bottom: 0.7rem; }
.hero-signup-row { display: grid; gap: 0.6rem; }
.hero-signup input { height: 54px; border: 1px solid oklch(100% 0 0 / 0.22); background: oklch(100% 0 0 / 0.96); }
.hero-signup input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px oklch(75.2% 0.122 84.8 / 0.4); }
.hero-signup .btn { height: 54px; white-space: nowrap; }
.hero-signup .start-error { margin-top: 0.5rem; color: oklch(85% 0.1 25); }
.hero-signup-note { margin-top: 0.75rem; font-size: 0.86rem; line-height: 1.5; color: oklch(100% 0 0 / 0.72); }
.hero-signup-note a { color: var(--gold); text-decoration: underline; text-decoration-color: oklch(75.2% 0.122 84.8 / 0.6); text-underline-offset: 3px; }
.hero-signup-note a:hover { text-decoration-color: var(--gold); }
.hero .hero-micro { margin-top: 0.9rem; }
@media (min-width: 620px) { .hero-signup-row { grid-template-columns: 1fr auto; } }

/* ---------- Editorial pass ---------- */
.hero-hook { margin-top: 0.9rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); color: var(--gold); }
.hero-hook + .hero-title { margin-top: 0.5rem; }
.hero-links { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.hero-links .link-arrow { color: var(--white); }
@media (min-width: 620px) { .hero-signup-row { grid-template-columns: 1fr 1.4fr; } .hero-signup .btn { grid-column: 1 / -1; } }
/* Ticker stands still: the five words, no marquee */
.ticker-track { animation: none; width: 100%; justify-content: center; }
.ticker-list + .ticker-list { display: none; }
.ticker--cine { -webkit-mask-image: none; mask-image: none; }
.ticker-list { flex-wrap: wrap; justify-content: center; row-gap: 0.4rem; }
.ticker-list li:last-child::after { display: none; }
/* Starting-point cards */
.ideas { list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; display: grid; gap: 1rem; }
.idea { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.6rem; padding: clamp(1.3rem, 2.5vw, 1.8rem); border-radius: 16px; background: linear-gradient(170deg, #ffffff, #f6f8fb); border: 1px solid var(--line); box-shadow: inset 0 1px 0 #fff, 0 12px 30px oklch(26.3% 0.046 250 / 0.06); }
.idea-num { font-family: var(--font-display); color: var(--gold-text); font-size: 1rem; padding-top: 0.15rem; }
.idea-who { font-size: max(0.7rem, 11px); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
.idea-grid { margin: 0.6rem 0 0; display: grid; gap: 0.75rem 1.5rem; }
.idea-grid div { display: grid; gap: 0.15rem; }
.idea-grid dt { font-size: max(0.7rem, 11px); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); }
.idea-grid dd { margin: 0; color: var(--text); font-size: 0.95rem; line-height: 1.5; }
.idea-name { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.2; color: var(--navy); }
.idea-note { margin-top: 0.7rem; font-size: 0.82rem; color: var(--text-muted); font-style: italic; }
@media (min-width: 760px) { .ideas { grid-template-columns: 1fr 1fr; } .idea-grid { grid-template-columns: 1fr 1fr; } }
.plan-founder span { letter-spacing: 0.14em; } .plan-founder .plan-founder-body { letter-spacing: 0; }

/* ---------- Simple does it: the first build, demystified ---------- */
.simple-inner { max-width: 48rem; }
.simple .display { margin-top: 1.25rem; }
.simple-copy { margin-top: 1.5rem; display: grid; gap: 1rem; }
.simple-copy p { color: var(--text); font-size: 1.08rem; line-height: 1.6; }
.simple-line { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); color: var(--navy); line-height: 1.3; }
.simple-steps { list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; display: grid; gap: 0.9rem; }
.simple-steps li { display: grid; grid-template-columns: 2.6rem 1fr; align-items: start; gap: 0.9rem; padding: 1.1rem 1.25rem; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(170deg, #ffffff, #f6f8fb); box-shadow: inset 0 1px 0 #fff, 0 12px 30px oklch(26.3% 0.046 250 / 0.06); }
.simple-steps span { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--gold); font-family: var(--font-display); font-size: 1.05rem; }
.simple-steps p { color: var(--navy); font-size: 1.02rem; line-height: 1.5; padding-top: 0.35rem; }
.simple-close { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-left: 1.1rem; border-left: 3px solid var(--gold); color: var(--text); font-size: 1rem; line-height: 1.6; }

/* ---------- Starting-point cards v2: build name leads, gloss, lift ---------- */
.ideas { gap: 1.25rem; }
.idea { position: relative; display: block; padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.4rem, 2.4vw, 1.8rem); border-radius: 18px; overflow: hidden; background: linear-gradient(165deg, #ffffff 0%, #f7f9fc 60%, #f1f5f9 100%); border: 1px solid var(--line); box-shadow: inset 0 1px 0 #fff, 0 1px 2px oklch(26.3% 0.046 250 / 0.06), 0 24px 50px oklch(26.3% 0.046 250 / 0.10); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.idea::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold), oklch(85% 0.11 85) 45%, transparent 85%); }
.idea::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, oklch(75.2% 0.122 84.8 / 0.14), transparent 70%); }
.idea:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 #fff, 0 2px 4px oklch(26.3% 0.046 250 / 0.06), 0 34px 70px oklch(26.3% 0.046 250 / 0.16); border-color: oklch(75.2% 0.122 84.8 / 0.6); }
.idea-num { position: absolute; top: 1.15rem; right: 1.25rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; padding: 0; background: var(--navy); color: var(--gold); font-size: 0.95rem; box-shadow: 0 8px 18px oklch(26.3% 0.046 250 / 0.25); }
.idea-body { position: relative; }
.idea-who { display: inline-block; padding: 0.3rem 0.65rem; border-radius: 999px; background: oklch(97% 0.03 85); border: 1px solid oklch(75.2% 0.122 84.8 / 0.5); color: var(--gold-text); font-size: max(0.68rem, 11px); letter-spacing: 0.14em; }
.idea-grid { display: grid; gap: 0; margin-top: 0.9rem; }
.idea-grid > div { display: block; }
.idea-grid > div:nth-child(2) { order: -1; }
.idea-grid > div:nth-child(2) dt { display: none; }
.idea-name { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--navy); }
.idea-grid > div:nth-child(1) { margin-top: 0.8rem; }
.idea-grid > div:nth-child(1) dt { display: none; }
.idea-grid > div:nth-child(1) dd { font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.4; color: var(--navy); }
.idea-grid > div:nth-child(1) dd::before { content: "\201C"; color: var(--gold); margin-right: 0.1em; }
.idea-grid > div:nth-child(1) dd::after { content: "\201D"; color: var(--gold); margin-left: 0.1em; }
.idea-grid > div:nth-child(3), .idea-grid > div:nth-child(4) { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 6.2rem 1fr; gap: 0.6rem 1rem; align-items: start; }
.idea-grid > div:nth-child(3) dt, .idea-grid > div:nth-child(4) dt { padding-top: 0.2rem; }
.idea-grid > div:nth-child(3) dd, .idea-grid > div:nth-child(4) dd { font-size: 0.97rem; color: var(--text); }
.idea-note { margin-top: 0.9rem; font-size: 0.78rem; }
@media (min-width: 760px) { .idea-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .idea-grid > div:nth-child(3), .idea-grid > div:nth-child(4) { grid-template-columns: 1fr; gap: 0.2rem; } }
.idea-grid dd.idea-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.95rem); line-height: 1.1; letter-spacing: -0.012em; color: var(--navy); margin-top: 0.75rem; }
.idea-grid > div:nth-child(1) dd { font-size: clamp(1rem, 0.92rem + 0.35vw, 1.15rem); color: var(--text); }

/* ---------- Hero card controls ---------- */
.forge-controls { margin: 0.9rem 0 0; display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.forge-controls .forge-count { margin: 0; padding: 0 0.4rem; }
.forge-btn { appearance: none; height: 34px; min-width: 34px; padding: 0 0.7rem; border-radius: 999px; border: 1px solid oklch(100% 0 0 / 0.28); background: oklch(100% 0 0 / 0.06); color: var(--white); font: inherit; font-size: 0.82rem; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.forge-btn:hover { background: oklch(100% 0 0 / 0.14); border-color: var(--gold); color: var(--gold); }
.forge-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.forge-btn--play { min-width: 4.6rem; }
.forge.is-paused .forge-live { animation: none; opacity: 0.5; }
/* Example idea tags */
.idea-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; padding-right: 3rem; }
.idea-kind { display: inline-block; padding: 0.3rem 0.65rem; border-radius: 999px; background: oklch(96% 0.02 200); border: 1px solid oklch(55% 0.09 195 / 0.45); color: oklch(38% 0.08 195); font-size: max(0.68rem, 11px); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
@media (min-width: 1000px) { .ideas--three { grid-template-columns: repeat(3, 1fr); } }

.forge-controls { flex-wrap: nowrap; }
.forge-controls .forge-count { white-space: nowrap; gap: 0.4rem; }
.forge-controls .forge-count-label { white-space: nowrap; }
@media (max-width: 420px) { .forge-controls { gap: 0.4rem; } .forge-controls .forge-count-label { display: none; } .forge-btn { height: 32px; min-width: 32px; padding: 0 0.6rem; } .forge-btn--play { min-width: 4rem; } }

/* ---------- De-clutter: compact skills wall ---------- */
.skill-wall--compact { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: 0; list-style: none; counter-reset: none; }
.skill-wall--compact li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: linear-gradient(170deg, #ffffff, #f6f8fb); box-shadow: inset 0 1px 0 #fff, 0 8px 20px oklch(26.3% 0.046 250 / 0.06); }
.skill-wall--compact li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.skill-wall--compact h3 { font-family: var(--font-sans); font-weight: 500; font-size: 0.95rem; color: var(--navy); margin: 0; }
.skill-wall--compact li::after { display: none; }

/* Hero, stripped to one action */
.hero-hook { margin-top: 0; }
.hero-copy .hero-title { margin-top: 0.6rem; }

/* ---------- Sample idea cards v3: problem, now, with AI, could become ---------- */
.idea-flow { margin: 0.9rem 0 0; display: grid; gap: 0; position: relative; padding-left: 1.15rem; }
.idea-flow::before { content: ""; position: absolute; left: 4px; top: 0.5rem; bottom: 3.2rem; width: 1px; background: linear-gradient(180deg, var(--gold), var(--line)); }
.idea-flow > div { position: relative; display: grid; gap: 0.15rem; padding: 0 0 0.95rem; }
.idea-flow > div::before { content: ""; position: absolute; left: -1.15rem; top: 0.42rem; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px #fff; }
.idea-flow dt { font-size: max(0.68rem, 11px); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
.idea-flow dd { margin: 0; color: var(--navy); font-size: 0.97rem; line-height: 1.5; }
.idea-flow > div:nth-child(1) dd { font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.3; }
.idea-flow > div:nth-child(2) dd { color: var(--text-muted); }
.idea-flow > .idea-final { margin: 0.2rem 0 0 -1.15rem; padding: 0.9rem 1rem; border-radius: 12px; background: linear-gradient(160deg, #1a3350, var(--navy)); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.14), 0 12px 28px oklch(26.3% 0.046 250 / 0.25); }
.idea-flow > .idea-final::before { display: none; }
.idea-flow > .idea-final dt { color: var(--gold); }
.idea-flow > .idea-final dd { display: grid; gap: 0.15rem; color: var(--white); }
.idea-flow > .idea-final strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); line-height: 1.2; }
.idea-flow > .idea-final span { font-size: 0.88rem; color: var(--pale); }
.idea-who { display: inline-block; margin-right: 3rem; }

.plan-fine { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: 0.88rem; line-height: 1.55; color: var(--text-muted); max-width: 62ch; }
.plan-fine a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* Tighter join between the sample ideas and the "simple does it" section */
.examples { padding-bottom: clamp(2rem, 4vw, 3rem); }
.examples .idx-many { margin-bottom: 0; }
.simple { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* Section titles in gold, so they read as titles and not as footnotes */
.section-label { color: var(--gold-text); font-weight: 700; letter-spacing: 0.2em; }
.section-label span { color: var(--navy); font-weight: 600; }
.section-label::after { background: var(--gold-text); opacity: 1; width: 56px; }
.section-label--dark, .section-label--dark span { color: var(--gold); }
.section-label--dark::after { background: var(--gold); }

/* Section titles without numbers */
.section-label { gap: 0.9rem; }
.section-label::after { margin-left: 0; }

.hero-signup-note, .start-reassure { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1rem; }
.hero-signup-note { color: var(--pale); }


/* ---------- Journey as a pinned scene (2026-09-12): the bar and one card hold, each milestone owns its stretch of scroll ----------
   Applied only when main.js adds .is-pinned (JS on, motion allowed, stage fits under the nav). Otherwise the cards stack as before. */
.journey-scene.is-pinned .journey-pin { position: sticky; top: calc(64px + 1rem); }
.journey-scene.is-pinned .chapters { position: relative; top: auto; z-index: 20; }
.journey-scene.is-pinned .chapters-list li { cursor: pointer; }
.journey-scene.is-pinned .stones { display: grid; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); gap: 0; }
.journey-scene.is-pinned .stone { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translate3d(0, 120px, 0) scale(0.96); transition: none; will-change: transform, opacity; transform-origin: 50% 0; }
/* Every card on the stage wears the navy: one is in view at a time, so the motion tells the story, not a colour hand-off. */
.journey-scene.is-pinned .stone,
.journey-scene.is-pinned .stone.is-active { background: linear-gradient(160deg, #1a3350, #12263A); border-color: var(--navy); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.14), 0 30px 70px oklch(26.3% 0.046 250 / 0.28), 0 0 0 1px oklch(75.2% 0.122 84.8 / 0.5); }
.journey-scene.is-pinned .stone .stone-index { color: oklch(75.2% 0.122 84.8 / 0.35); }
.journey-scene.is-pinned .stone .stone-when { color: var(--gold); }
.journey-scene.is-pinned .stone .stone-body h3 { color: var(--white); }
.journey-scene.is-pinned .stone .stone-body p:last-child { color: var(--pale); }
.journey-scene.is-pinned .stone::after { background: linear-gradient(110deg, transparent 35%, oklch(100% 0 0 / 0.08) 50%, transparent 65%); }
@media (min-width: 900px) { .journey-scene.is-pinned .stone { min-height: 15rem; } }
@media (prefers-reduced-motion: reduce) { .journey-scene .stone { opacity: 1 !important; transform: none !important; visibility: visible !important; } }


/* ---------- Testimonials as a moving row (2026-09-12): one slow continuous line, edge fades, pauses under the pointer ----------
   Set up by testimonials.js when motion is allowed. Otherwise the grid and swipe rail above apply. */
.quote-marquee { margin-top: clamp(1.75rem, 3vw, 2.5rem); width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.quote-track { display: flex; gap: 1.25rem; width: max-content; margin: 0; padding: 0.5rem 0 1.25rem; align-items: stretch; will-change: transform; animation: quoteDrift 64s linear infinite; }
.quote-track > li { flex: 0 0 min(84vw, 23rem); margin: 0; }
.quote-marquee:hover .quote-track, .quote-marquee:focus-within .quote-track { animation-play-state: paused; }
@keyframes quoteDrift { to { transform: translateX(calc(-50% - 0.625rem)); } }
@media (max-width: 719px) { .quote-track { gap: 1rem; } .quote-track > li { flex-basis: min(80vw, 22rem); } @keyframes quoteDrift { to { transform: translateX(calc(-50% - 0.5rem)); } } }
@media (prefers-reduced-motion: reduce) { .quote-track { animation: none; } }


/* ---------- Before and after (2026-09-12): the sentence people arrive with, and what it becomes ---------- */
.shift-list { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: 0.75rem; }
.shift-list li { display: grid; gap: 0.6rem; align-items: center; padding: 1.1rem 1.25rem; border-radius: 14px; background: linear-gradient(170deg, #ffffff, #f6f8fb); border: 1px solid var(--line); box-shadow: inset 0 1px 0 #fff, 0 12px 30px oklch(26.3% 0.046 250 / 0.05); }
.shift-from { font-family: var(--font-display); font-style: italic; font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.2rem); line-height: 1.4; color: var(--text-muted); }
.shift-to { font-size: 1rem; line-height: 1.5; color: var(--navy); font-weight: 500; padding-left: 0.9rem; border-left: 2px solid var(--gold); }
.shift-arrow { display: none; }
@media (min-width: 760px) {
  .shift-list li { grid-template-columns: 1fr 2.5rem 1fr; column-gap: 1rem; padding: 1.2rem 1.6rem; }
  .shift-arrow { display: block; position: relative; height: 1px; background: var(--line-strong); }
  .shift-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); transform: rotate(45deg); }
  .shift-to { padding-left: 0; border-left: 0; }
}

/* ---------- Twelve missions ---------- */
.mission-list { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.mission-list li { display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline; gap: 0.5rem; padding: 0.95rem 0.25rem; border-bottom: 1px solid var(--line); }
.mission-list li span { font-family: var(--font-display); font-size: 0.95rem; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.mission-list li b { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem); line-height: 1.2; color: var(--navy); }
@media (min-width: 760px) { .mission-list { grid-template-columns: 1fr 1fr; column-gap: 3rem; } .mission-list li:nth-child(2) { border-top: 0; } }

/* ---------- Call-to-action strip after a proof section ---------- */
.cta-strip { margin-top: clamp(2rem, 4vw, 3rem); display: grid; justify-items: center; gap: 0.7rem; text-align: center; }
.cta-strip-note { font-size: 0.88rem; color: var(--text-muted); max-width: 44ch; }

/* ---------- Footer email strip: the same Systeme.io form as the hero ---------- */
.footer-signup { margin: 0 0 clamp(2rem, 4vw, 3rem); padding: clamp(1.4rem, 3vw, 2rem); border-radius: 16px; border: 1px solid oklch(100% 0 0 / 0.14); background: linear-gradient(160deg, oklch(100% 0 0 / 0.08), oklch(100% 0 0 / 0.03)); display: grid; gap: 1rem; align-items: center; }
.footer-signup-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); color: var(--white); line-height: 1.2; }
.footer-signup-sub { margin-top: 0.35rem; font-size: 0.92rem; color: oklch(100% 0 0 / 0.68); max-width: 40ch; line-height: 1.5; }
.footer-signup-row { display: grid; gap: 0.6rem; }
.footer-signup input { height: 50px; border: 1px solid oklch(100% 0 0 / 0.22); background: oklch(100% 0 0 / 0.96); }
.footer-signup .btn { height: 50px; white-space: nowrap; }
.footer-signup .start-error { color: #f2b8b5; font-size: 0.88rem; }
@media (min-width: 720px) { .footer-signup-row { grid-template-columns: 1fr 1.4fr auto; } }
@media (min-width: 960px) { .footer-signup { grid-template-columns: 1fr 1.3fr; gap: 2rem; } .footer-signup .start-error { grid-column: 2; } }


/* ---------- Simple does it, with depth (2026-09-12): copy on the left, the three moves on a card deck to the right ---------- */
.simple-inner--split { max-width: var(--container); display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.simple-lead .simple-close { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.simple-deck { position: relative; margin-top: 0.5rem; }
.simple-deck-ghosts { position: absolute; inset: 0; pointer-events: none; }
.simple-deck-ghosts span { position: absolute; inset: 0; border-radius: 20px; border: 1px solid var(--line); background: #fff; }
.simple-deck-ghosts span:nth-child(1) { transform: translate(12px, 12px) rotate(1.1deg); }
.simple-deck-ghosts span:nth-child(2) { transform: translate(24px, 24px) rotate(2.2deg); opacity: 0.55; }
.simple-card { position: relative; border-radius: 20px; padding: clamp(1.5rem, 3vw, 2.25rem); background: linear-gradient(170deg, #ffffff 0%, #f6f8fb 100%); border: 1px solid var(--line); box-shadow: inset 0 1px 0 #fff, 0 30px 70px oklch(26.3% 0.046 250 / 0.14); overflow: hidden; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.simple-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold), transparent 75%); }
@media (hover: hover) { .simple-deck:hover .simple-card { transform: translateY(-4px); box-shadow: inset 0 1px 0 #fff, 0 36px 80px oklch(26.3% 0.046 250 / 0.18); } }
.simple-kicker { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); }
.simple-card .simple-steps { margin-top: 1rem; gap: 0; }
.simple-card .simple-steps li { grid-template-columns: 3.4rem 1fr; gap: 0.75rem; padding: 1.1rem 0; border: 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--line); }
.simple-card .simple-steps li:first-child { border-top: 0; }
.simple-card .simple-steps span { width: auto; height: auto; border-radius: 0; background: none; display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem); line-height: 0.9; color: var(--gold-text); letter-spacing: -0.02em; }
.simple-card .simple-steps p { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.45; padding-top: 0.15rem; }
.simple-card-foot { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--text-muted); }
@media (min-width: 900px) {
  .simple-inner--split { grid-template-columns: 1.1fr 0.9fr; gap: clamp(3rem, 6vw, 5.5rem); align-items: center; }
  .simple-deck { margin-top: 0; margin-right: 24px; }
}
/* Numbers count in: each move's numeral rises a beat after its row. */
html.js .simple-card .simple-steps li.reveal:not(.is-in) span { opacity: 0; transform: translateY(6px); }
html.js .simple-card .simple-steps li.reveal span { transition: opacity 0.7s var(--ease) calc(var(--d, 0ms) + 160ms), transform 0.7s var(--ease) calc(var(--d, 0ms) + 160ms); }

/* ---------- What changes, on a navy board (2026-09-12) ---------- */
.shift-board { position: relative; margin-top: clamp(2rem, 4vw, 3rem); border-radius: 22px; padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 3vw, 2.5rem); background: linear-gradient(160deg, #1a3350, #12263A); border: 1px solid var(--navy); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.14), 0 30px 70px oklch(26.3% 0.046 250 / 0.26); overflow: hidden; color: var(--white); }
.shift-board::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 100% 0%, oklch(45% 0.07 250 / 0.55), transparent 70%), radial-gradient(40% 50% at 0% 100%, oklch(75.2% 0.122 84.8 / 0.10), transparent 70%); }
.shift-board::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold), transparent 70%); }
.shift-heads { display: none; }
.shift-board .shift-list { margin: 0; gap: 0; position: relative; }
.shift-board .shift-list li { padding: 1.15rem 0.25rem; border-radius: 0; background: none; border: 0; border-top: 1px solid oklch(100% 0 0 / 0.12); box-shadow: none; transition: background 0.5s var(--ease), padding 0.5s var(--ease); }
.shift-board .shift-list li:first-child { border-top: 0; }
.shift-board .shift-from { color: oklch(100% 0 0 / 0.68); }
.shift-board .shift-to { color: var(--white); border-left-color: var(--gold); }
@media (hover: hover) { .shift-board .shift-list li:hover { background: oklch(100% 0 0 / 0.05); padding-left: 0.75rem; padding-right: 0.75rem; border-radius: 10px; } }
@media (min-width: 760px) {
  .shift-heads { position: relative; display: grid; grid-template-columns: 1fr 2.5rem 1fr; column-gap: 1rem; padding: 0.25rem 0.25rem 0.9rem; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
  .shift-board .shift-list li { padding: 1.25rem 0.25rem; }
  .shift-board .shift-arrow { background: oklch(100% 0 0 / 0.25); }
  .shift-board .shift-list li:hover .shift-arrow { background: var(--gold); }
}
/* The arrow draws itself as each row arrives. */
html.js .shift-board .shift-list li.reveal .shift-arrow { transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease) calc(var(--d, 0ms) + 200ms), background 0.4s var(--ease); }
html.js .shift-board .shift-list li.reveal.is-in .shift-arrow { transform: scaleX(1); }
/* Hover lifts on these rows must win over the reveal end state. */
html.js .shift-board .shift-list li.reveal.is-in { transform: none; }


/* ---------- Hero and landing eyebrow as a quiet tag (2026-09-12) ---------- */
.hero-hook--tag, .eyebrow--tag { display: inline-block; font-family: var(--font-sans); font-style: normal; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--gold); padding: 0.45rem 0.8rem; border: 1px solid oklch(75.2% 0.122 84.8 / 0.55); border-radius: 999px; background: oklch(75.2% 0.122 84.8 / 0.08); }
.hero-hook--tag + .hero-title { margin-top: 1.1rem; }
/* Thanks page: the details, in short, while the email lands */
.thanks-while { margin-top: 1.75rem; padding: 1.25rem 1.4rem; border-radius: 14px; border: 1px solid oklch(100% 0 0 / 0.14); background: oklch(100% 0 0 / 0.06); max-width: 40rem; }
.thanks-while-h { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.thanks-while > p:not(.thanks-while-h) { margin-top: 0.6rem; color: var(--pale); line-height: 1.55; }
.thanks-moves { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.5rem; color: var(--white); }
.thanks-moves li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; align-items: baseline; }
.thanks-moves span { font-family: var(--font-display); color: var(--gold); }
.thanks-hero .hero-actions { margin-top: 1.5rem; }


/* ---------- Landing hygiene (2026-09-12): honeypot, objection line under the ask, proof beside the form ---------- */
.hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.hero-signup-bridge, .start-bridge { margin-top: 0.35rem; font-size: 0.85rem; letter-spacing: 0.02em; color: oklch(100% 0 0 / 0.62); }
.start-bridge { color: var(--text-muted); }
.start-form-quote { margin: 1.1rem 0 0; padding: 0.9rem 1rem; border-radius: 10px; background: var(--white-cool); border: 1px solid var(--line); border-left: 3px solid var(--gold); }
.start-form-quote p { font-family: var(--font-display); font-style: italic; font-size: 0.98rem; line-height: 1.45; color: var(--navy); }
.start-form-quote figcaption { margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-muted); }


/* ---------- Landing and inside split (2026-09-12) ---------- */
.hero-welcome { margin-top: 1.9rem; max-width: 36rem; }
.hero-welcome-line { margin-top: 0.6rem; color: var(--pale); font-size: 1.02rem; line-height: 1.55; }
.hero-welcome-inbox { margin-top: 0.5rem; padding: 0.55rem 0.8rem; border-radius: 8px; border: 1px solid oklch(75.2% 0.122 84.8 / 0.5); background: oklch(75.2% 0.122 84.8 / 0.1); color: var(--white); font-size: 0.92rem; }
.hero-welcome .hero-actions { margin-top: 1.2rem; }
.landing-next .rules { margin-top: clamp(2rem, 4vw, 3rem); }
.nav .nav-inner:has(> .nav-brand:only-child) { justify-content: flex-start; }


/* ---------- Glossy hero (2026-09-12): aurora light in navy and gold, glass chip, one pill for the form ----------
   Transforms and opacity only. Reduced motion holds the light still. */
.hero-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-aurora span { position: absolute; border-radius: 50%; will-change: transform; }
.aurora-a { left: -20%; top: -35%; width: 80vw; height: 80vw; max-width: 1200px; max-height: 1200px; background: radial-gradient(circle at 50% 50%, oklch(52% 0.11 255 / 0.55) 0%, oklch(40% 0.09 250 / 0.25) 35%, transparent 68%); animation: auroraA 26s ease-in-out infinite alternate; }
.aurora-b { right: -25%; top: -10%; width: 70vw; height: 70vw; max-width: 1050px; max-height: 1050px; background: radial-gradient(circle at 50% 50%, oklch(78% 0.13 80 / 0.34) 0%, oklch(75% 0.12 85 / 0.12) 38%, transparent 68%); animation: auroraB 32s ease-in-out infinite alternate; }
.aurora-c { left: 25%; bottom: -45%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle at 50% 50%, oklch(92% 0.02 250 / 0.14) 0%, transparent 62%); animation: auroraC 22s ease-in-out infinite alternate; }
@keyframes auroraA { to { transform: translate(10%, 12%) scale(1.12); } }
@keyframes auroraB { to { transform: translate(-14%, 10%) scale(1.08); } }
@keyframes auroraC { to { transform: translate(-8%, -10%) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .hero-aurora span { animation: none; } }
.hero-hook--tag { background: oklch(100% 0 0 / 0.08); border-color: oklch(100% 0 0 / 0.22); color: var(--gold); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.14); }
.btn-nav, .mobile-menu nav .btn { border-radius: 999px; }
@media (min-width: 720px) {
  .hero-signup-row { display: flex; align-items: center; gap: 0; padding: 6px; border-radius: 999px; background: oklch(100% 0 0 / 0.97); box-shadow: 0 0 0 1px oklch(75.2% 0.122 84.8 / 0.45), 0 20px 50px oklch(0% 0 0 / 0.35), inset 0 1px 0 #fff; }
  .hero-signup-row:focus-within { box-shadow: 0 0 0 2px var(--gold), 0 20px 50px oklch(0% 0 0 / 0.35); }
  .hero-signup-row input { flex: 1 1 0; min-width: 0; height: 48px; border: 0; background: transparent; box-shadow: none; padding: 0 1.1rem; }
  .hero-signup-row input { width: auto; }
  .hero-signup-row input[name="first_name"] { flex: 0.8 1 0; border-right: 1px solid var(--line); border-radius: 0; }
  .hero-signup-row input:focus { box-shadow: none; border-color: var(--line); }
  .hero-signup-row .btn { width: auto; height: 48px; border-radius: 999px; padding: 0 1.4rem; flex: none; }
}

.hero-signup.is-gone { display: none !important; }


/* ---------- The thirty-second film (2026-09-12): words rising out of the light ---------- */
.film-section { background: linear-gradient(180deg, #12263A 0%, #0f2032 100%); padding: clamp(1.5rem, 4vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem); }
.film { position: relative; aspect-ratio: 16 / 9; max-width: 1100px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: #0c1a2a; border: 1px solid oklch(100% 0 0 / 0.14); box-shadow: 0 50px 120px oklch(0% 0 0 / 0.55), inset 0 1px 0 oklch(100% 0 0 / 0.14); outline: none; }
.film:focus-visible { box-shadow: 0 0 0 3px var(--gold), 0 50px 120px oklch(0% 0 0 / 0.55); }
.film-aurora { position: absolute; inset: 0; overflow: hidden; }
.film-aurora span { position: absolute; border-radius: 50%; will-change: transform; }
.film-aurora .aurora-a { left: -30%; top: -50%; width: 110%; height: 160%; max-width: none; max-height: none; }
.film-aurora .aurora-b { right: -35%; top: -20%; width: 100%; height: 150%; max-width: none; max-height: none; }
.film-aurora .aurora-c { left: 20%; bottom: -70%; width: 80%; height: 120%; max-width: none; max-height: none; }
.film.is-running .film-aurora span { animation-play-state: running; } .film:not(.is-running) .film-aurora span { animation-play-state: paused; }
.film-beats { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(1.25rem, 5vw, 4rem); text-align: center; }
.beat { grid-area: 1 / 1; margin: 0; max-width: 22ch; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 0.6rem + 3.2vw, 3.1rem); line-height: 1.18; letter-spacing: -0.01em; color: var(--white); text-wrap: balance; opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); pointer-events: none; }
.beat.is-on { opacity: 1; transform: none; }
.beat:not(.is-on) { transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); transform: translateY(-14px) scale(1.01); }
.beat--big { font-size: clamp(1.5rem, 0.6rem + 4.2vw, 4rem); font-weight: 500; }
.beat--big::after { content: ""; display: block; width: 3.5rem; height: 2px; margin: 0.8rem auto 0; background: var(--gold); transform: scaleX(0); transition: transform 0.9s var(--ease) 0.5s; }
.beat--big.is-on::after { transform: scaleX(1); }
.beat--words { max-width: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2em 0.6em; color: var(--gold); font-weight: 500; }
.beat--words span { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease) calc(var(--i) * 0.55s), transform 0.7s var(--ease) calc(var(--i) * 0.55s); }
.beat--words.is-on span { opacity: 1; transform: none; }
.beat--end { display: grid; justify-items: center; gap: 0.9rem; max-width: none; }
.beat--end img { width: clamp(150px, 22vw, 260px); height: auto; }
.beat--end span { font-style: italic; font-size: clamp(1.05rem, 0.8rem + 1.2vw, 1.6rem); color: var(--pale); }
.film-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1.4rem 0.8rem 1rem; border-radius: 999px; border: 1px solid oklch(100% 0 0 / 0.3); background: oklch(100% 0 0 / 0.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--white); font: inherit; font-weight: 600; cursor: pointer; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), background 0.3s var(--ease); z-index: 3; }
.film-play:hover { background: oklch(100% 0 0 / 0.2); }
.film-play-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--gold); position: relative; }
.film-play-icon::before { content: ""; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--navy); }
.film.is-running .film-play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.9); }
.film.is-running:hover .film-play { opacity: 0; }
.film.is-done .film-play { opacity: 0; pointer-events: none; }
.film-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: oklch(100% 0 0 / 0.14); }
.film-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), oklch(85% 0.11 85)); transform: scaleX(0); transform-origin: left; }
.film-replay { position: absolute; right: 1rem; bottom: 1rem; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid oklch(100% 0 0 / 0.3); background: oklch(100% 0 0 / 0.1); color: var(--white); font: inherit; font-size: 0.85rem; cursor: pointer; z-index: 3; }
.film-replay:hover { background: oklch(100% 0 0 / 0.2); }
.film-time { position: absolute; left: 1rem; bottom: 0.9rem; font-size: 0.72rem; letter-spacing: 0.14em; color: oklch(100% 0 0 / 0.55); font-variant-numeric: tabular-nums; }
.film.is-paused .film-play { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
@media (max-width: 600px) { .film { border-radius: 14px; aspect-ratio: 4 / 5; } }
@media (prefers-reduced-motion: reduce) { .beat, .beat--words span { transition: none; } .film-play { display: none; } }


/* ---------- The film, cinematic pass (2026-09-12): camera push, letterbox, gold dust, word arrivals, ring, network, rule, sweep, flash ---------- */
.film { background: #07111c; }
.film-cam { position: absolute; inset: 0; transform-origin: 50% 55%; }
.film.is-running .film-cam { animation: camPush 36s linear forwards; }
.film.is-done .film-cam { transform: scale(1.08); }
.film.is-paused .film-cam { animation-play-state: paused; }
@keyframes camPush { from { transform: scale(1); } to { transform: scale(1.08); } }
/* letterbox bars slide in when it starts */
.film::before, .film::after { content: ""; position: absolute; left: 0; right: 0; height: 7.5%; background: #04090f; z-index: 2; transition: transform 1.2s var(--ease); }
.film::before { top: 0; transform: translateY(-100%); } .film::after { bottom: 0; transform: translateY(100%); }
.film.is-running::before, .film.is-done::before, .film.is-paused::before { transform: none; }
.film.is-running::after, .film.is-done::after, .film.is-paused::after { transform: none; }
.film-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(80% 70% at 50% 50%, transparent 55%, oklch(0% 0 0 / 0.55) 100%); }
.film-dust { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.5s var(--ease); }
.film.is-running .film-dust, .film.is-paused .film-dust { opacity: 1; }
/* aurora brightens as it starts */
.film-aurora { opacity: 0.55; transition: opacity 2s var(--ease); }
.film.is-running .film-aurora, .film.is-done .film-aurora, .film.is-paused .film-aurora { opacity: 1; }
/* words arrive one at a time, rising and un-blurring by scale */
.beat .w { display: inline-block; opacity: 0; transform: translateY(0.35em) scale(0.96); transition: opacity 0.7s var(--ease) calc(var(--i) * 90ms), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 90ms); }
.beat.is-on .w { opacity: 1; transform: none; }
.beat:not(.is-on) .w { transition-delay: 0ms; transition-duration: 0.5s; transform: translateY(-0.25em) scale(1.02); }
.beat.is-on .w--gold { color: var(--gold); text-shadow: 0 0 24px oklch(75.2% 0.122 84.8 / 0.55); }
.beat { transition: opacity 0.4s var(--ease); transform: none; }
.beat.is-on { opacity: 1; } .beat:not(.is-on) { opacity: 0; transform: none; }
.beat--big::after { display: none; }
/* scene 2: gold ring draws behind the name */
.film-ring { position: absolute; left: 50%; top: 50%; width: min(78vh, 62%); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0; transition: opacity 0.8s var(--ease), transform 5s linear; }
.film-ring circle { fill: none; stroke: oklch(75.2% 0.122 84.8 / 0.55); stroke-width: 1.2; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 2.2s cubic-bezier(0.16, 1, 0.3, 1); }
.film-ring .film-ring-inner { stroke: oklch(100% 0 0 / 0.18); stroke-width: 0.8; transition-delay: 0.3s; }
.film[data-scene="2"] .film-ring { opacity: 1; transform: translate(-50%, -50%) rotate(-70deg); }
.film[data-scene="2"] .film-ring circle { stroke-dashoffset: 0; }
/* scene 3: a network lights up */
.film-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s var(--ease); }
.film-net path { fill: none; stroke: oklch(100% 0 0 / 0.28); stroke-width: 1; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s cubic-bezier(0.16, 1, 0.3, 1); }
.film-net circle { fill: var(--gold); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.2); transition: opacity 0.5s var(--ease), transform 0.8s cubic-bezier(0.2, 1.4, 0.4, 1); }
.film[data-scene="3"] .film-net { opacity: 0.9; }
.film[data-scene="3"] .film-net path { stroke-dashoffset: 0; }
.film[data-scene="3"] .film-net circle { opacity: 1; transform: scale(1); }
.film[data-scene="3"] .film-net circle:nth-child(2) { transition-delay: 0.25s; } .film[data-scene="3"] .film-net circle:nth-child(3) { transition-delay: 0.5s; } .film[data-scene="3"] .film-net circle:nth-child(4) { transition-delay: 0.75s; } .film[data-scene="3"] .film-net circle:nth-child(5) { transition-delay: 0.9s; } .film[data-scene="3"] .film-net circle:nth-child(6) { transition-delay: 1.05s; } .film[data-scene="3"] .film-net circle:nth-child(7) { transition-delay: 1.2s; }
/* scene 4: a gold rule draws across with four marks, the weeks */
.film-rule { position: absolute; left: 14%; right: 14%; top: 66%; height: 1px; background: oklch(75.2% 0.122 84.8 / 0.7); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s var(--ease); opacity: 0; }
.film-rule i { position: absolute; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 16px oklch(75.2% 0.122 84.8 / 0.8); opacity: 0; transform: scale(0.3); transition: opacity 0.4s var(--ease), transform 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
.film-rule i:nth-child(1) { left: 0; } .film-rule i:nth-child(2) { left: 33%; } .film-rule i:nth-child(3) { left: 66%; } .film-rule i:nth-child(4) { left: 100%; margin-left: -11px; }
.film[data-scene="4"] .film-rule { opacity: 1; transform: scaleX(1); }
.film[data-scene="4"] .film-rule i { opacity: 1; transform: scale(1); }
.film[data-scene="4"] .film-rule i:nth-child(1) { transition-delay: 0.3s; } .film[data-scene="4"] .film-rule i:nth-child(2) { transition-delay: 0.7s; } .film[data-scene="4"] .film-rule i:nth-child(3) { transition-delay: 1.1s; } .film[data-scene="4"] .film-rule i:nth-child(4) { transition-delay: 1.5s; }
/* scene 5: the four moves slam in, each with a flash */
.beat--moves { max-width: none; display: grid; grid-template-columns: repeat(2, auto); gap: 0.15em 1.1em; color: var(--gold); font-weight: 500; font-size: clamp(1.5rem, 0.7rem + 4vw, 3.9rem); }
@media (min-width: 900px) { .beat--moves { grid-template-columns: repeat(4, auto); } }
.beat--moves span { display: inline-block; white-space: nowrap; opacity: 0; transform: scale(1.35) translateY(0.1em); transition: opacity 0.35s var(--ease) calc(var(--i) * 0.9s), transform 0.7s cubic-bezier(0.2, 1.2, 0.3, 1) calc(var(--i) * 0.9s), text-shadow 0.8s var(--ease) calc(var(--i) * 0.9s + 0.2s); text-shadow: 0 0 0 transparent; }
.beat--moves.is-on span { opacity: 1; transform: none; text-shadow: 0 0 28px oklch(75.2% 0.122 84.8 / 0.45); }
.film-flash { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, oklch(95% 0.05 85 / 0.5), transparent 70%); opacity: 0; pointer-events: none; }
.film[data-scene="5"] .film-flash { animation: filmFlash 0.9s ease-out 4; }
@keyframes filmFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
/* light sweep across the big line and the close */
.film-sweep { position: absolute; top: -30%; bottom: -30%; left: -40%; width: 26%; background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.16) 45%, oklch(75.2% 0.122 84.8 / 0.22) 55%, transparent); transform: translateX(0) rotate(14deg); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.film.is-sweep .film-sweep { animation: filmSweep 1.7s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes filmSweep { 0% { transform: translateX(0) rotate(14deg); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(560%) rotate(14deg); opacity: 0; } }
/* close: wordmark rises with a shimmer, the tagline follows */
.beat--end img { opacity: 0; transform: translateY(14px) scale(0.94); transition: opacity 1s var(--ease), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.beat--end span { opacity: 0; transform: translateY(8px); transition: opacity 0.9s var(--ease) 0.9s, transform 0.9s var(--ease) 0.9s; }
.beat--end.is-on img, .beat--end.is-on span { opacity: 1; transform: none; }
.film[data-scene="7"] .film-aurora .aurora-b { transform: translate(-10%, 20%) scale(1.25); transition: transform 4s var(--ease); }
@media (prefers-reduced-motion: reduce) { .film-cam, .film-ring, .film-net, .film-rule, .film-sweep, .film-flash, .film-dust { animation: none !important; transition: none !important; } .beat .w, .beat--moves span, .beat--end img, .beat--end span { transition: none; opacity: 1; transform: none; } }


/* ---------- The visual story (2026-09-12): four images, slow zooms, crossfades, fine gold rules ----------
   Palette: Nexus Navy #12263A, Momentum Gold #D2A84A, Warm Ivory #F7F4EE, Graphite #292E33, Prosperity Teal #1F7A78 (sparingly). */
.story-film { background: #12263A; aspect-ratio: 16 / 9; }
.story-film::before, .story-film::after { background: #292E33; height: 6%; }
.story-scenes { position: absolute; inset: 0; }
.scene { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s ease; will-change: opacity; }
.scene.is-on { opacity: 1; z-index: 2; }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.0); transform-origin: 50% 50%; will-change: transform; }
.scene.is-on img { transition: transform 9s linear; }
.scene--1.is-on img { transform: scale(1.07) translate(-1.5%, 1%); }
.scene--2.is-on img { transform: scale(1.07) translate(1.5%, 0.5%); }
.scene--3.is-on img { transform: scale(1.06) translate(0, 1.5%); }
.scene--4.is-on img { transform: scale(1.07) translate(-1%, -1%); }
.scene--1 img { object-position: 58% 45%; } .scene--2 img { object-position: 62% 50%; } .scene--3 img { object-position: 50% 40%; } .scene--4 img { object-position: 50% 42%; }
/* soft scrims where the words sit, never over the faces */
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.scene--1::after, .scene--3::after { background: linear-gradient(to top right, oklch(15% 0.03 250 / 0.82) 0%, oklch(15% 0.03 250 / 0.35) 32%, transparent 58%); }
.scene--2::after { background: linear-gradient(to bottom left, oklch(15% 0.03 250 / 0.8) 0%, oklch(15% 0.03 250 / 0.3) 34%, transparent 58%); }
.scene--4::after { background: linear-gradient(to bottom right, oklch(15% 0.03 250 / 0.8) 0%, oklch(15% 0.03 250 / 0.3) 34%, transparent 58%); }
.scene-text { position: absolute; z-index: 1; display: grid; gap: 0.6rem; max-width: min(46%, 30rem); padding: 0; color: #F7F4EE; text-shadow: 0 1px 2px oklch(0% 0 0 / 0.35); }
.scene-text--bl { left: clamp(1.25rem, 5%, 3.5rem); bottom: clamp(3rem, 14%, 6rem); }
.scene-text--tr { right: clamp(1.25rem, 5%, 3.5rem); top: clamp(3rem, 15%, 6rem); text-align: right; justify-items: end; }
.scene-text--tl { left: clamp(1.25rem, 5%, 3.5rem); top: clamp(3rem, 15%, 6rem); }
.scene-label { font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: #D2A84A; opacity: 0; transform: translateY(6px); transition: opacity 0.8s ease 0.5s, transform 0.9s ease 0.5s; }
.scene-line { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 0.7rem + 2vw, 2.35rem); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; opacity: 0; transform: translateY(12px); transition: opacity 1s ease 0.8s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s; }
.scene-line::after { content: ""; display: block; width: 3rem; height: 1px; margin-top: 0.8rem; background: #D2A84A; transform: scaleX(0); transform-origin: left; transition: transform 1s ease 1.6s; }
.scene-text--tr .scene-line::after { margin-left: auto; transform-origin: right; }
.scene.is-on .scene-label, .scene.is-on .scene-line { opacity: 1; transform: none; }
.scene.is-on .scene-line::after { transform: scaleX(1); }
/* closing frame */
.scene--end { background: #12263A; }
.scene--end::after { background: radial-gradient(60% 60% at 50% 45%, oklch(30% 0.05 250 / 0.6), transparent 70%); }
.scene-text--c { position: absolute; inset: 0; max-width: none; place-content: center; justify-items: center; text-align: center; padding: 2rem; gap: 1.1rem; }
.scene-rule { width: 4.5rem; height: 1px; background: #D2A84A; transform: scaleX(0); transition: transform 1.2s ease 0.4s; }
.scene-line--big { font-size: clamp(1.5rem, 0.8rem + 3vw, 3.4rem); max-width: 16ch; }
.scene-line--big::after { display: none; }
.scene-sub { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: #D2A84A; opacity: 0; transition: opacity 1s ease 1.6s; }
.scene--end.is-on .scene-rule { transform: scaleX(1); } .scene--end.is-on .scene-sub { opacity: 1; }
/* poster: the first image shows before play */
.story-film.is-idle .scene--1 { opacity: 1; } .story-film.is-idle .scene--1 img { transform: none; }
.story-film.is-idle .scene--1 .scene-label, .story-film.is-idle .scene--1 .scene-line { opacity: 1; transform: none; } .story-film.is-idle .scene--1 .scene-line::after { transform: scaleX(1); }
.story-film .film-play { z-index: 4; }
/* scene dots, teal for the one playing */
.story-dots { position: absolute; z-index: 3; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: flex; gap: 0.45rem; list-style: none; margin: 0; padding: 0; }
.story-dots li { width: 6px; height: 6px; border-radius: 50%; background: oklch(100% 0 0 / 0.3); transition: background 0.5s ease, transform 0.5s ease; }
.story-dots li.is-past { background: #D2A84A; } .story-dots li.is-active { background: #1F7A78; transform: scale(1.35); box-shadow: 0 0 0 3px oklch(48% 0.08 190 / 0.35); }
.story-film .film-bar { z-index: 3; } .story-film .film-time, .story-film .film-replay { z-index: 3; }
.story-note { margin: 0.9rem auto 0; max-width: 1100px; font-size: 0.78rem; color: oklch(100% 0 0 / 0.55); text-align: center; }
.story-after { margin: 1.5rem auto 0; max-width: 1100px; display: grid; justify-items: center; gap: 1.25rem; }
.story-transcript { width: 100%; max-width: 44rem; color: var(--pale); font-size: 0.95rem; }
.story-transcript summary { cursor: pointer; text-align: center; color: #D2A84A; font-size: 0.85rem; letter-spacing: 0.06em; }
.story-transcript ol { margin: 1rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.6rem; line-height: 1.55; }
.story-transcript b { color: #F7F4EE; font-weight: 600; }
/* phones: portrait frame, words at the bottom on every scene */
@media (max-width: 600px) {
  .story-film { aspect-ratio: 4 / 5; }
  .scene img { object-position: 55% 40%; } .scene--1 img { object-position: 60% 40%; } .scene--2 img { object-position: 62% 45%; }
  .scene::after { background: linear-gradient(to top, oklch(15% 0.03 250 / 0.85) 0%, oklch(15% 0.03 250 / 0.4) 32%, transparent 55%) !important; }
  .scene-text { max-width: 80%; left: 1.25rem; right: auto; top: auto; bottom: 3.6rem; text-align: left; justify-items: start; }
  .scene-text--tr .scene-line::after { margin-left: 0; transform-origin: left; }
  .scene-text--c { inset: 0; max-width: none; left: 0; right: 0; bottom: 0; }
}
/* reduced motion: four stills with their captions under them, no timeline */
@media (prefers-reduced-motion: reduce) {
  .story-film, .story-film.is-reduced { aspect-ratio: auto; display: block; background: #292E33; overflow: hidden; }
  .story-film::before, .story-film::after { display: none; }
  .story-scenes { position: static; display: grid; grid-template-columns: 1fr; gap: 1px; }
  .scene { position: relative; inset: auto; opacity: 1; display: grid; grid-template-rows: auto auto; background: #12263A; transition: none; }
  .scene::after { display: none; }
  .scene img { position: static; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transform: none !important; transition: none; }
  .scene-text, .scene-text--bl, .scene-text--tr, .scene-text--tl { position: static; inset: auto; max-width: none; padding: 1rem 1.2rem 1.3rem; text-align: left; justify-items: start; gap: 0.4rem; text-shadow: none; }
  .scene-line { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); }
  .scene-text--tr .scene-line::after { margin-left: 0; }
  .scene-label, .scene-line, .scene-rule, .scene-sub { opacity: 1 !important; transform: none !important; transition: none; }
  .scene-line::after { transform: scaleX(1) !important; }
  .scene--end { grid-column: 1 / -1; display: grid; min-height: 14rem; place-items: center; }
  .scene--end .scene-text--c { position: static; padding: 2.5rem 1.5rem; }
  .story-dots, .film-bar, .film-time, .film-play, .film-replay { display: none !important; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 700px) { .story-scenes { grid-template-columns: 1fr 1fr; } }

/* The deck ghosts must never widen the page on phones. */
.simple { overflow: clip; }


/* ---------- Story media: clips over the stills, a voice button (2026-09-12) ---------- */
.scene-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: inherit; opacity: 0; transition: opacity 0.8s ease; transform-origin: 50% 50%; will-change: transform, opacity; }
.scene.has-video .scene-video { opacity: 1; }
.scene.has-video.is-on .scene-video { transition: opacity 0.8s ease, transform 9s linear; }
.scene--1.has-video.is-on .scene-video { transform: scale(1.05) translate(-1%, 0.5%); } .scene--2.has-video.is-on .scene-video { transform: scale(1.05) translate(1%, 0.5%); }
.scene--3.has-video.is-on .scene-video { transform: scale(1.04) translate(0, 1%); } .scene--4.has-video.is-on .scene-video { transform: scale(1.05) translate(-0.5%, -0.5%); }
.scene--1 .scene-video { object-position: 58% 45%; } .scene--2 .scene-video { object-position: 62% 50%; } .scene--3 .scene-video { object-position: 50% 40%; } .scene--4 .scene-video { object-position: 50% 42%; }
@media (max-width: 600px) { .scene .scene-video { object-position: 55% 40%; } .scene--1 .scene-video { object-position: 60% 40%; } .scene--2 .scene-video { object-position: 62% 45%; } }
.film-sound { position: absolute; z-index: 4; right: 1rem; top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem 0.5rem 0.7rem; border-radius: 999px; border: 1px solid oklch(100% 0 0 / 0.3); background: oklch(15% 0.03 250 / 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #F7F4EE; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.3s ease; }
.film-sound:hover { background: oklch(15% 0.03 250 / 0.75); }
.film-sound[aria-pressed="true"] { border-color: #D2A84A; color: #D2A84A; }
.film-sound-icon { width: 14px; height: 14px; border-radius: 2px 6px 6px 2px; background: currentColor; clip-path: polygon(0 30%, 40% 30%, 100% 0, 100% 100%, 40% 70%, 0 70%); }
.story-film::before { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .scene-video, .film-sound { display: none !important; } }


/* ---------- Review pass (2026-09-12): founder heading above the grid, contact email ---------- */
.founder .founder-headline { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.founder-copy .founder-identity--v2 { margin-top: 0; }
.footer-mail { display: inline-block; margin-bottom: 0.6rem; color: var(--gold); text-decoration: none; font-size: 0.95rem; }
.footer-mail:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq-contact { margin-top: 1.5rem; color: var(--text-muted); font-size: 0.95rem; }
.faq-contact a { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); }
.footer-copy a { color: var(--gold); text-decoration: none; } .footer-copy a:hover { text-decoration: underline; }
@media (max-width: 899px) { .founder-side .founder-quote { order: 2; } }

/* Closing: the one remaining line carries the weight. */



/* ---------- Top of page, tidy (2026-09-12): the pill fits its column; a hidden button stays hidden; contact ---------- */
.hero-signup { max-width: 100%; min-width: 0; }
.start-signup > * { min-width: 0; }
@media (min-width: 720px) {
  .hero-signup-row { width: 100%; min-width: 0; }
  .hero-signup-row input { width: 0; min-width: 0; flex: 1 1 0; }
  .hero-signup-row input[name="first_name"] { flex: 0.75 1 0; }
  .hero-signup-row .btn { flex: 0 0 auto; padding: 0 1.25rem; }
}
.film-sound.contact-card { margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.4rem, 3vw, 2rem); border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(170deg, #ffffff, #f6f8fb); box-shadow: inset 0 1px 0 #fff, 0 12px 30px oklch(26.3% 0.046 250 / 0.06); display: grid; gap: 1.1rem; align-items: center; }
.contact-card .section-label { margin: 0 0 0.5rem; }
.contact-line { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.3; color: var(--navy); max-width: 30ch; }
.contact-btn { justify-self: start; white-space: nowrap; }
@media (min-width: 760px) { .contact-card { grid-template-columns: 1fr auto; gap: 2rem; } .contact-btn { justify-self: end; } }
@media (min-width: 900px) and (max-width: 1160px) { .nav-links { gap: 1rem; } .nav-links a:not(.btn) { font-size: 0.88rem; } }

/* The pill and the sentence above it share one measure, so their right edges meet. */
.hero .lede, .hero-signup, .hero-welcome { max-width: 36rem; }


/* ---------- Hero fold (2026-09-12): the tablet starts level with the tag and is short enough to clear the fold on a laptop ---------- */
@media (min-width: 900px) {
  .hero-grid { align-items: start; }
  .hero-visual { margin-top: 0.25rem; }
  .forge-card { min-height: 24rem; padding-bottom: 4rem; }
  .forge-say { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); min-height: 2.4em; }
  .forge-name { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); }
  .forge-label { margin-top: 0.8rem; }
  .forge-controls { margin-top: 0.7rem; }
  .tablet { padding: 10px; }
  .hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
}

@media (min-width: 900px) {
  .forge-card { min-height: 22.5rem; }
  .hero-visual { margin-top: -0.25rem; }
}
/* Shorter laptop windows: scale the tablet so its controls clear the fold. */
@media (min-width: 900px) and (max-height: 820px) { .hero-visual { zoom: 0.9; } }
@media (min-width: 900px) and (max-height: 740px) { .hero-visual { zoom: 0.8; } }


/* ---------- Story crops (2026-09-12): anchored to the top so no head is ever cut; the zoom grows downward ---------- */
.scene img, .scene .scene-video { transform-origin: 50% 0%; }
.scene--1 img, .scene--1 .scene-video { object-position: 58% 0%; }
.scene--2 img, .scene--2 .scene-video { object-position: 62% 0%; }
.scene--3 img, .scene--3 .scene-video { object-position: 50% 0%; }
.scene--4 img, .scene--4 .scene-video { object-position: 50% 0%; }
.scene--1.is-on img { transform: scale(1.05) translate(-1%, 0); }
.scene--2.is-on img { transform: scale(1.05) translate(1%, 0); }
.scene--3.is-on img { transform: scale(1.04) translate(0, 0); }
.scene--4.is-on img { transform: scale(1.05) translate(-0.5%, 0); }
@media (max-width: 600px) {
  .scene img, .scene .scene-video { object-position: 55% 0%; }
  .scene--1 img, .scene--1 .scene-video { object-position: 60% 0%; } .scene--2 img, .scene--2 .scene-video { object-position: 62% 0%; }
}


/* ---------- Hero card v3 (2026-09-12): profession badge on the card; cards slide from one to the next ---------- */
.forge-role { margin-top: 1.1rem; }
.forge-role span { display: inline-block; padding: 0.42rem 0.95rem; border-radius: 8px; background: var(--gold); color: var(--navy); font-weight: 700; font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; box-shadow: 0 6px 18px oklch(75.2% 0.122 84.8 / 0.28); }
.forge-say { margin-top: 0.8rem; }
/* Slide: the card leaves to the left, the next enters from the right. */
.forge.is-live .forge-card { transition: opacity 0.48s var(--ease), transform 0.48s var(--ease); }
.forge.is-live.is-out .forge-card { opacity: 0; transform: translateX(-44px); }
.forge.is-live.is-out .forge-card > * { opacity: 1; transform: none; }
.forge.is-live.is-reset .forge-card { transition: none; opacity: 0; transform: translateX(44px); }
.forge.is-live.is-reset .forge-card > * { transition: none; }

/* Hero facts: what it is, what you get, what it costs, in one glance */
.hero-facts { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.55rem; max-width: 36rem; }
.hero-facts li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0.2rem 0.7rem; padding-left: 1.1rem; position: relative; font-size: 0.95rem; line-height: 1.45; }
.hero-facts li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.hero-facts b { font-weight: 600; color: var(--white); white-space: nowrap; }
.hero-facts span { color: var(--pale); }
@media (max-width: 480px) { .hero-facts li { grid-template-columns: 1fr; } }

/* ---------- Worksheet popup ---------- */
.ws-pop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1rem; background: oklch(20% 0.045 250 / 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.25s var(--ease); }
.ws-pop.is-open { opacity: 1; }
.ws-pop__card { position: relative; width: min(58rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; display: grid; border-radius: 20px; background: #fff; box-shadow: 0 50px 120px oklch(0% 0 0 / 0.45); transform: translateY(10px) scale(0.985); transition: transform 0.3s var(--ease); }
.ws-pop.is-open .ws-pop__card { transform: none; }
.ws-pop__photo { position: relative; background: var(--navy); min-height: 11rem; }
.ws-pop__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.ws-pop__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, oklch(26.3% 0.046 250 / 0.55)); pointer-events: none; }
.ws-pop__body { padding: clamp(1.4rem, 3vw, 2.2rem); }
.ws-pop__kick { font-size: max(0.7rem, 11px); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--gold-text); }
.ws-pop__title { margin-top: 0.5rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.2rem); line-height: 1.1; letter-spacing: -0.012em; color: var(--navy); }
.ws-pop__sub { margin-top: 0.8rem; color: var(--text); line-height: 1.55; font-size: 0.98rem; }
.ws-pop__form { margin-top: 1.1rem; display: grid; gap: 0.6rem; }
.ws-pop__form input { height: 50px; padding: 0 1rem; border-radius: 10px; border: 1px solid var(--line-strong); font: inherit; font-size: 1rem; color: var(--navy); background: #fff; }
.ws-pop__form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px oklch(75.2% 0.122 84.8 / 0.35); }
.ws-pop__form .btn { height: 50px; }
.ws-pop__note { margin-top: 0.7rem; font-family: var(--font-display); font-style: italic; font-size: 0.92rem; color: var(--text-muted); }
.ws-pop__no { margin-top: 0.6rem; appearance: none; background: none; border: 0; padding: 0.3rem 0; font: inherit; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ws-pop__close { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: oklch(100% 0 0 / 0.92); color: var(--navy); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px oklch(0% 0 0 / 0.2); }
.ws-pop__close:focus-visible, .ws-pop__no:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
body.ws-pop-open { overflow: hidden; }
@media (min-width: 760px) { .ws-pop__card { grid-template-columns: 0.85fr 1.15fr; } .ws-pop__photo { min-height: 100%; } .ws-pop__photo::after { background: linear-gradient(90deg, transparent 70%, oklch(100% 0 0 / 0.0)); } }
@media (prefers-reduced-motion: reduce) { .ws-pop, .ws-pop__card { transition: none; } }

/* ---------- Rich navy: one deeper, more saturated blue on every dark band (trial) ----------
   The look she admired on aiinnovision.com is a single saturated blue used consistently, with
   cards one step lighter and a thin light border. Same idea here, kept to our hue. */
:root {
  --navy-rich: oklch(21% 0.075 258);
  --navy-rich-2: oklch(16.5% 0.06 262);
  --navy-card: oklch(26% 0.07 258);
  --navy-card-line: oklch(97% 0.01 260 / 0.14);
}
.hero, .section--dark:not(.journey), .closing, .footer, .builds-intro, .thanks-hero { background: linear-gradient(180deg, var(--navy-rich) 0%, var(--navy-rich-2) 100%); }
.nav[data-state="scrolled"], .nav.is-open, .start-header { background: oklch(19% 0.068 260 / 0.92); }
.hero-light-a { background: radial-gradient(circle, oklch(45% 0.11 258 / 0.7) 0%, transparent 66%); }
.tablet { background: linear-gradient(160deg, oklch(30% 0.07 258), oklch(15% 0.055 262)); border-color: var(--navy-card-line); }
.countdown, .plan--vip, .idea-final { background: linear-gradient(160deg, var(--navy-card), var(--navy-rich-2)); }
.plans--v2 .plan--vip { border-color: var(--navy-card-line); }
.stone.is-active { background: linear-gradient(160deg, var(--navy-card), var(--navy-rich)); }
.simple-steps span, .idea-num { background: var(--navy-rich); }
.section-label--dark, .section-label--dark span { color: var(--gold); }

/* ---------- Notes from the studio ---------- */
.note-list { list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; display: grid; gap: 1.1rem; }
.note-card a { display: grid; gap: 0.55rem; height: 100%; padding: clamp(1.4rem, 2.6vw, 1.9rem); border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(170deg, #ffffff, #f6f8fb); box-shadow: inset 0 1px 0 #fff, 0 12px 30px oklch(26.3% 0.046 250 / 0.06); text-decoration: none; color: inherit; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.note-card a:hover { transform: translateY(-3px); border-color: oklch(75.2% 0.122 84.8 / 0.6); box-shadow: inset 0 1px 0 #fff, 0 26px 56px oklch(26.3% 0.046 250 / 0.14); }
.note-card h2, .note-card h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.65rem); line-height: 1.15; color: var(--navy); }
.note-card p { color: var(--text-muted); font-size: 0.97rem; line-height: 1.5; }
.note-card__date { font-size: max(0.7rem, 11px); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); }
.note-card .link-arrow { margin-top: 0.3rem; }
@media (min-width: 760px) { .note-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .note-list:not(.note-list--teaser) { grid-template-columns: 1fr 1fr 1fr; } }
.notes .studio-sub .link-arrow { display: inline-block; margin-left: 0.4rem; }
.note-meta { margin-top: 1.4rem; font-size: 0.88rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pale); }
.note-body p { font-size: 1.08rem; line-height: 1.7; }
.note-body h2 { margin-top: 2.2rem; }
.note-body ol { margin: 0.9rem 0 0 1.3rem; color: var(--text); line-height: 1.65; font-size: 1.08rem; display: grid; gap: 0.4rem; }
.note-body a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.note-cta { margin-top: 2.8rem; padding: 1.4rem 1.5rem; border-radius: 14px; border: 1px solid oklch(75.2% 0.122 84.8 / 0.6); background: oklch(97% 0.03 85 / 0.6); }
.note-cta__h { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--navy); margin: 0; }
.note-cta p { margin-top: 0.4rem; font-size: 1rem; }

/* ---------- Hero, stripped: hook, headline, one line, form ---------- */
.hero-hook { font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem); color: var(--gold); }
.hero-hook + .hero-title { margin-top: 0.7rem; }
.hero .hero-title { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem); line-height: 1.02; }
.hero .lede { margin-top: 1.4rem; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); max-width: 30rem; }
.hero-signup { margin-top: 2.1rem; }
/* Membership facts, now a strip in About us */
.about-facts { margin: 0 0 clamp(2.5rem, 4vw, 3.5rem); padding: 1.1rem 1.3rem; border-radius: 14px; background: linear-gradient(160deg, var(--navy-card), var(--navy-rich-2)); border: 1px solid var(--navy-card-line); box-shadow: 0 18px 44px oklch(26.3% 0.046 250 / 0.18); max-width: none; gap: 0.7rem; }
.about-facts li::before { background: var(--gold); }
.about-facts b { color: var(--white); }
.about-facts span { color: var(--pale); }
@media (min-width: 900px) { .about-facts { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .about-facts li { grid-template-columns: 1fr; gap: 0.15rem; } }
/* ---------- Testimonials with colour: navy cards, gold marks, on a soft blue band ---------- */
.testimonials { background: linear-gradient(180deg, #eef3f8, #f7f9fc); }
.quote-card, .section--sheet .quote-card { background: linear-gradient(160deg, var(--navy-card), var(--navy-rich-2)); border: 1px solid var(--navy-card-line); border-radius: 16px; box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.12), 0 24px 56px oklch(26.3% 0.046 250 / 0.22); padding: 1.7rem 1.6rem 1.5rem; }
.quote-card::before { color: var(--gold); opacity: 1; font-size: 3.4rem; top: 0.5rem; }
.quote-card blockquote p { color: var(--white); font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem); line-height: 1.5; }
.quote-meta { border-top-color: oklch(100% 0 0 / 0.14); }
.quote-name { color: var(--gold); font-weight: 600; }
.quote-role { color: var(--pale); }
@media (hover: hover) { .quote-card:hover { border-color: oklch(75.2% 0.122 84.8 / 0.7); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.12), 0 32px 70px oklch(26.3% 0.046 250 / 0.3); } }
.testimonials .studio-sub { color: var(--text-muted); }
/* Notes cards: the Read link must be visible before the reveal finishes */
.note-card .link-arrow { color: var(--navy); opacity: 1; }

.folio--play .folio-brand { color: oklch(55% 0.16 300); }
.folio-desc a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* Four founder builds: two by two on desktop, so no card sits alone */
@media (min-width: 900px) { .folio-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1.75rem, 3vw, 2.75rem) clamp(2rem, 4vw, 3.5rem); } .folio-covers { padding: 0 10% 14% 0; } }

/* Entry point to the Idea Finder, under the sample ideas */
.ideas-finder { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8rem 1.2rem; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; text-align: center; }
.ideas-finder span { color: var(--text-muted); font-size: 0.98rem; }

/* Anything marked hidden is gone, whatever display its class sets. Without this, the closed worksheet popup
   (display: grid, opacity 0, fixed over the viewport) sat invisibly on top of the page and swallowed every click. */

/* Seven nav links plus the button: tighten the row on narrower desktops so nothing wraps */
@media (min-width: 900px) and (max-width: 1240px) { .nav-links { gap: 0.85rem; } .nav-links a:not(.btn) { font-size: 0.84rem; white-space: nowrap; } .btn-nav { padding: 0 0.9rem; font-size: 0.8rem; white-space: nowrap; } }
@media (min-width: 900px) and (max-width: 1020px) { .nav-links a[href$="#contact"] { display: none; } }
.nav-links a { white-space: nowrap; }

/* ---------- Nav: one fixed header that never moves ----------
   The header used to sit lower and taller over the hero, then slide up and shrink on scroll, swapping a large hero
   logo for the small one. Now it is the same bar, in the same place, at the same size, on every page and at every
   scroll position. The separate hero logo is gone; the nav wordmark is always the logo. */
.nav, .nav[data-state="hero"], .nav[data-state="scrolled"], .nav.is-open {
  top: 0; height: 64px; --nav-h: 64px; transition: none;
  background: oklch(19% 0.068 260 / 0.94); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.08);
}
.nav[data-state="hero"]:not(.is-open) .nav-brand { visibility: visible; pointer-events: auto; }
.nav .nav-wordmark, .nav[data-state="hero"] .nav-wordmark { opacity: 1; transition: none; }
.hero-logo { display: none; }
.nav[data-state="hero"] .nav-links a:not(.btn), .nav[data-state="hero"] .nav-toggle { color: var(--white); }
.hero { padding-top: calc(64px + clamp(2.25rem, 5vw, 4rem)); }
/* The logo always keeps clear space before the first link. The row tightens in steps; Contact, then Questions,
   leave the top row on narrower desktops (both stay in the footer and the mobile menu). */
@media (min-width: 900px) {
  .nav-brand { flex: none; margin-right: clamp(1.25rem, 2.5vw, 2.5rem); }
  .nav-links { flex: none; gap: 1.6rem; }
}
@media (min-width: 900px) and (max-width: 1400px) { .nav-links { gap: 1.25rem; } .nav-links a:not(.btn) { font-size: 0.9rem; } .btn-nav { padding: 0 1rem; font-size: 0.82rem; } }
@media (min-width: 900px) and (max-width: 1240px) { .nav-links { gap: 0.95rem; } .nav-links a:not(.btn) { font-size: 0.86rem; } }
@media (min-width: 900px) and (max-width: 1160px) { .nav-links a[href$="#contact"] { display: none; } }
@media (min-width: 900px) and (max-width: 1040px) { .nav-links { gap: 0.75rem; } .nav-links a:not(.btn) { font-size: 0.82rem; } .btn-nav { padding: 0 0.8rem; font-size: 0.78rem; } .nav-links a[href$="#faq"] { display: none; } }

/* ---------- Homepage tablet card, fewer words: role, the sentence, what it could become, how to offer it ---------- */
.forge-line, #forge-who, .forge-cat .forge-dot, .forge-model > span { display: none; }
.forge-model { border-top: 0; padding-top: 0; margin-top: 0.35rem; }
.forge-model b { font-weight: 400; color: var(--text-muted); font-size: 1rem; }
.forge-offer { min-height: 7rem; }


/* ============================================================
   REPOSITION (2026-10-05): "Turn what you know into what you own."
   A simpler homepage in fourteen short sections. Everything new is
   prefixed nx- so nothing above is disturbed. White, navy, gold.
   ============================================================ */
.nx-gold { color: var(--gold-text); }
.section--dark .nx-gold, .closing .nx-gold { color: var(--gold); }
.nx-h { max-width: 22ch; }
.nx-btn-ghost { background: transparent; color: var(--white); border: 1px solid oklch(100% 0 0 / 0.38); }
.nx-btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }

/* 01 hero */
.nx-creed { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.nx-creed i { width: 4px; height: 4px; border-radius: 50%; background: oklch(100% 0 0 / 0.45); }
.hero-title.nx-hero-title { margin-top: 1.3rem; max-width: 17ch; font-size: clamp(2.15rem, 1.3rem + 2.9vw, 3.75rem); line-height: 1.04; }
.nx-hero-title em { font-style: italic; color: var(--gold); }
.nx-hero-copy { margin-top: 1.5rem; display: grid; gap: 0.7rem; max-width: 33rem; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.22rem); line-height: 1.5; color: var(--pale); }
.nx-hero-steps { color: var(--white); font-weight: 600; }
.nx-hero-actions { gap: 0.9rem 1rem; }
html:has(#hero-welcome:not([hidden])) #hero-cta { display: none; }
@media (max-width: 520px) { .nx-hero-actions .btn { width: 100%; } }

/* 02 the question */
.nx-ask-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.nx-ask-head .display { max-width: 17ch; }
.nx-bubbles { display: grid; gap: 0.8rem; justify-items: start; }
.nx-bubbles li { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem); line-height: 1.3; color: var(--navy); background: linear-gradient(170deg, #ffffff, #f1f5f9); border: 1px solid var(--line); border-radius: 22px 22px 22px 6px; padding: 0.9rem 1.3rem; box-shadow: 0 14px 34px oklch(26.3% 0.046 250 / 0.08); }
.nx-bubbles li:nth-child(even) { justify-self: end; border-radius: 22px 22px 6px 22px; background: linear-gradient(170deg, oklch(26% 0.07 258), oklch(19% 0.065 260)); color: var(--white); border-color: transparent; }
.nx-ask-answer { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.2; color: var(--navy); padding-top: 1.5rem; border-top: 2px solid var(--gold); }
@media (min-width: 900px) {
  .nx-ask-grid { grid-template-columns: 0.9fr 1.1fr; align-items: center; column-gap: clamp(3rem, 6vw, 6rem); }
  .nx-ask-head { grid-row: 1 / span 2; align-self: start; position: sticky; top: 110px; }
  .nx-ask-answer { grid-column: 2; }
}

/* 03 what it could become */
.nx-become-grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1.1rem; }
.nx-bc { display: grid; grid-template-rows: auto 1fr auto; gap: 0.9rem; background: linear-gradient(170deg, #ffffff, #f6f8fb); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.3rem, 2.4vw, 1.75rem); box-shadow: 0 18px 44px oklch(26.3% 0.046 250 / 0.09); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.nx-bc:hover { transform: translateY(-4px); box-shadow: 0 26px 56px oklch(26.3% 0.046 250 / 0.14); }
.nx-bc-who { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); }
.nx-bc-say { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.35; color: var(--text); }
.nx-bc-to { display: grid; gap: 0.3rem; padding: 1rem 1.1rem; border-radius: 12px; background: linear-gradient(170deg, oklch(26% 0.07 258), oklch(18% 0.062 261)); }
.nx-bc-to span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.nx-bc-to span::after { content: " \2192"; }
.nx-bc-to b { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.15; color: var(--white); }
@media (min-width: 640px) { .nx-become-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .nx-become-grid { grid-template-columns: repeat(3, 1fr); } }
.nx-finder { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1.25rem; align-items: center; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.4rem, 3vw, 2.5rem); border-radius: 18px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--gold); box-shadow: 0 18px 44px oklch(26.3% 0.046 250 / 0.08); }
.nx-finder-h { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; color: var(--navy); }
.nx-finder-sub { margin-top: 0.4rem; color: var(--text-muted); }
@media (min-width: 760px) { .nx-finder { grid-template-columns: 1fr auto; } }

/* 04 options */
.nx-options, .nx-sell { padding-block: var(--section-y); position: relative; overflow: hidden; }
.nx-options-head { display: grid; gap: 0.9rem; }
.nx-options-head .display, .nx-sell-head .display { color: var(--white); }
.nx-options-head p { color: var(--pale); font-size: 1.15rem; max-width: 34ch; }
@media (min-width: 900px) { .nx-options-head { grid-template-columns: 1.2fr 1fr; align-items: end; column-gap: 3rem; } }
.nx-opt-grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.nx-opt-grid li { display: grid; gap: 0.35rem; align-content: start; padding: 1.15rem 1.1rem 1.25rem; border-radius: 14px; background: var(--navy-card); border: 1px solid var(--navy-card-line); border-top: 2px solid var(--gold); transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.nx-opt-grid li:hover { transform: translateY(-3px); background: oklch(30% 0.075 258); }
.nx-opt-grid b { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; line-height: 1.15; color: var(--white); }
.nx-opt-grid span { font-size: 0.9rem; line-height: 1.4; color: var(--pale); }
@media (min-width: 720px) { .nx-opt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .nx-opt-grid { grid-template-columns: repeat(5, 1fr); gap: 0.9rem; } }

/* 05 founder proof */
.nx-founder-grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.nx-portrait { position: relative; max-width: 380px; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px oklch(26.3% 0.046 250 / 0.2); }
.nx-portrait img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: center top; }
.nx-portrait figcaption { position: absolute; inset: auto 0 0 0; display: grid; gap: 0.1rem; padding: 2.5rem 1.2rem 1rem; background: linear-gradient(180deg, transparent, oklch(16.5% 0.06 262 / 0.92)); color: var(--white); }
.nx-portrait figcaption b { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; }
.nx-portrait figcaption span { font-size: 0.8rem; color: var(--pale); }
.nx-founder-copy { display: grid; gap: 1rem; }
.nx-founder-copy .display { max-width: 18ch; margin-bottom: 0.4rem; }
.nx-founder-copy p:not(.section-label) { max-width: 36rem; font-size: 1.1rem; }
@media (min-width: 860px) { .nx-founder-grid { grid-template-columns: minmax(260px, 380px) 1fr; } }
.nx-builds-h { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem); color: var(--navy); }
.nx-builds { margin-top: 1.5rem; display: grid; gap: 1.1rem; }
.nx-build { display: grid; grid-template-rows: auto 1fr; height: 100%; text-decoration: none; border-radius: 14px; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: 0 16px 40px oklch(26.3% 0.046 250 / 0.1); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
a.nx-build:hover { transform: translateY(-4px); box-shadow: 0 26px 56px oklch(26.3% 0.046 250 / 0.16); }
.nx-build picture, .nx-build-here { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); }
.nx-build img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.nx-build-here { display: grid; place-items: center; background: linear-gradient(160deg, var(--navy-rich), var(--navy-rich-2)); }
.nx-build-here img { width: 62%; height: auto; object-fit: contain; }
.nx-build-body { display: grid; gap: 0.2rem; align-content: start; padding: 0.95rem 1.05rem 1.1rem; }
.nx-build-body b { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.2; color: var(--navy); }
.nx-build-body span { font-size: 0.88rem; color: var(--text-muted); }
.nx-build-body i { margin-top: 0.3rem; font-style: normal; font-size: 0.8rem; font-weight: 600; color: var(--gold-text); }
a.nx-build .nx-build-body i::after { content: " \2197"; }
@media (min-width: 620px) { .nx-builds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .nx-builds { grid-template-columns: repeat(6, 1fr); } .nx-builds li { grid-column: span 2; } .nx-builds li:nth-child(4) { grid-column: 2 / span 2; } }

/* 06 method */
.nx-method-head { display: grid; gap: 0.8rem; }
.nx-method-head .display { max-width: 20ch; }
.nx-method-head p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem); color: var(--gold-text); }
.nx-steps { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1rem; counter-reset: none; }
.nx-steps li { position: relative; display: grid; gap: 0.5rem; align-content: start; padding: 1.5rem 1.4rem 1.6rem; border-radius: 16px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 16px 40px oklch(26.3% 0.046 250 / 0.08); }
.nx-step-n { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--navy); color: var(--gold); font-family: var(--font-display); font-size: 1.1rem; }
.nx-steps h3 { margin-top: 0.4rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); line-height: 1.1; color: var(--navy); }
.nx-steps p { font-size: 0.98rem; color: var(--text); }
@media (min-width: 640px) { .nx-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .nx-steps { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
  .nx-steps li:not(:last-child)::after { content: "\2192"; position: absolute; right: -1.25rem; top: 1.75rem; font-size: 1.2rem; color: var(--gold-text); }
}

/* 07 building is half the job */
.nx-sell-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.nx-sell-head { display: grid; gap: 1.1rem; align-content: start; }
.nx-sell-head .display { max-width: 15ch; }
.nx-sell-head p { color: var(--pale); font-size: 1.12rem; max-width: 32rem; }
.nx-sell-head .nx-sell-tag { margin-top: 0.4rem; padding-left: 1.1rem; border-left: 2px solid var(--gold); color: var(--white); }
.nx-sell-tag b { color: var(--gold); font-weight: 600; }
.nx-sell-list { display: grid; }
.nx-sell-list li { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--navy-card-line); font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem); line-height: 1.2; color: var(--white); }
.nx-sell-list li:first-child { border-top: 1px solid var(--navy-card-line); }
.nx-sell-list li::before { content: "?"; flex: none; font-style: italic; color: var(--gold); width: 0.8rem; }
@media (min-width: 900px) { .nx-sell-grid { grid-template-columns: 1fr 1fr; align-items: center; } }

/* 08 first 90 days */
.nx-months { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1.1rem; }
.nx-months li { display: grid; gap: 0.5rem; align-content: start; grid-template-rows: auto auto 1fr auto; padding: 1.6rem 1.5rem; border-radius: 16px; background: linear-gradient(170deg, #ffffff, #f6f8fb); border: 1px solid var(--line); border-top: 3px solid var(--gold); box-shadow: 0 18px 44px oklch(26.3% 0.046 250 / 0.09); }
.nx-month-n { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); }
.nx-months h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); line-height: 1.05; color: var(--navy); }
.nx-month-d { margin-top: 0.7rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-weight: 600; color: var(--navy); }
.nx-month-d span { display: block; margin-bottom: 0.2rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
@media (min-width: 820px) { .nx-months { grid-template-columns: repeat(3, 1fr); } }
.nx-after { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: grid; gap: 0.4rem; }
.nx-after-h { font-family: var(--font-display); font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); color: var(--navy); }
.nx-after p:last-child { color: var(--text-muted); max-width: 40rem; }
.nx-roadmap { margin-top: 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.nx-roadmap summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; font-weight: 600; color: var(--navy); }
.nx-roadmap summary::-webkit-details-marker { display: none; }
.nx-roadmap summary::after { content: "+"; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--gold-text); }
.nx-roadmap[open] summary::after { content: "\2212"; }
.nx-roadmap-note { padding: 0 1.3rem; color: var(--text-muted); max-width: 44rem; }
.nx-roadmap .mission-list { margin: 1rem 1.3rem 1.3rem; }
.nx-roadmap .mission-list li, html.js .nx-roadmap .mission-list li.reveal { opacity: 1; transform: none; }
@media (min-width: 820px) { .nx-roadmap .mission-list { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }

/* 09 inside: the rooms */
.nx-house { margin-top: clamp(2rem, 4vw, 3rem); border-radius: 20px; overflow: hidden; background: linear-gradient(170deg, var(--navy-rich), var(--navy-rich-2)); border: 1px solid var(--navy-card-line); box-shadow: 0 34px 80px oklch(20% 0.06 258 / 0.3); }
.nx-house-bar { display: flex; align-items: center; gap: 0.7rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--navy-card-line); font-family: var(--font-display); font-size: 1.1rem; color: var(--white); }
.nx-house-bar i { font-family: var(--font-sans); font-style: normal; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pale); }
.nx-house-dot { width: 9px; height: 9px; border-radius: 50%; background: #46c98b; box-shadow: 0 0 0 4px oklch(75% 0.15 155 / 0.2); }
.nx-rooms { display: grid; }
.nx-rooms li { display: grid; gap: 0.2rem; padding: 1.05rem 1.4rem; border-bottom: 1px solid var(--navy-card-line); transition: background var(--dur-fast) var(--ease); }
.nx-rooms li:hover { background: oklch(100% 0 0 / 0.05); }
.nx-rooms b { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-display); font-weight: 500; font-size: 1.22rem; color: var(--white); }
.nx-rooms b::before { content: "#"; font-family: var(--font-sans); font-size: 0.95rem; color: var(--gold); }
.nx-rooms span { padding-left: 1.25rem; font-size: 0.93rem; color: var(--pale); }
.nx-room--vip b { color: var(--gold); }
@media (min-width: 760px) { .nx-rooms { grid-template-columns: 1fr 1fr; } .nx-rooms li:nth-child(odd) { border-right: 1px solid var(--navy-card-line); } .nx-rooms li:nth-last-child(-n+2) { border-bottom: 0; } }
@media (max-width: 759px) { .nx-rooms li:last-child { border-bottom: 0; } }

/* 10 the feel */
.nx-fun-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.nx-fun-grid .display { max-width: 14ch; }
.nx-fun-lines { display: grid; gap: 0.15rem; }
.nx-fun-lines p { font-family: var(--font-display); font-size: clamp(1.3rem, 1.05rem + 1.2vw, 2.1rem); line-height: 1.3; color: var(--navy); }
.nx-fun-lines p:nth-child(4), .nx-fun-lines p:nth-child(7) { font-style: italic; color: var(--text-muted); }
.nx-fun-lines .nx-fun-last { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 2px solid var(--gold); justify-self: start; color: var(--gold-text); }
@media (min-width: 900px) { .nx-fun-grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; column-gap: clamp(3rem, 6vw, 6rem); } }

/* 11 progression (concept, not live yet) */
.nx-level { padding-block: clamp(2.5rem, 5vw, 4rem); background: linear-gradient(180deg, #edf3f8, #f6f9fc); border-top: 1px solid var(--line); }
.nx-level-inner { display: grid; gap: 1.5rem; align-items: center; }
.nx-level-tag { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid var(--gold-text); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); }
.nx-level-h { margin-top: 0.8rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.4rem); line-height: 1.1; color: var(--navy); }
.nx-level-sub { margin-top: 0.5rem; color: var(--text-muted); max-width: 30rem; }
.nx-level-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.nx-level-chips li { padding: 0.5rem 0.95rem; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 0.9rem; font-weight: 600; color: var(--navy); box-shadow: 0 6px 16px oklch(26.3% 0.046 250 / 0.06); }
.nx-level-chips li::before { content: "+ "; color: var(--gold-text); }
@media (min-width: 900px) { .nx-level-inner { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }

/* 12 founding membership: one card */
.nx-plan-wrap { display: block; max-width: 1000px; }
.plans--v2 .plan.nx-plan { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); border-top: 3px solid var(--gold); }
.nx-plan-price { display: grid; gap: 0.6rem; align-content: start; }
.nx-plan-price .plan-cta { margin-top: 1rem; justify-self: start; }
.nx-plan-inc-h { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); }
.nx-plan-inc .plan-excl { margin-top: 1rem; }
@media (min-width: 860px) { .plans--v2 .plan.nx-plan { grid-template-columns: 0.9fr 1.1fr; } .nx-plan-inc { padding-left: clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid var(--line); } }
@media (max-width: 520px) { .nx-plan-price .plan-cta { justify-self: stretch; } }
.nx-vip-line { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: baseline; color: var(--text); }
.nx-vip-line .link-arrow { font-weight: 600; color: var(--navy); }

/* 14 closing */
.nx-closing .closing-line { max-width: 22ch; }
.nx-closing .closing-line .nx-gold { display: block; }
.nx-closing .hero-actions { gap: 0.9rem 1rem; }
.nx-closing-small { margin-top: 1.8rem; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--gold); }

/* VIP page */
.nx-vip-hero { padding-top: calc(64px + clamp(2.5rem, 6vw, 4.5rem)); padding-bottom: clamp(2.5rem, 6vw, 4rem); background: linear-gradient(180deg, var(--navy-rich) 0%, var(--navy-rich-2) 100%); color: var(--white); }
.nx-vip-hero h1 { margin-top: 1rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); line-height: 1.05; max-width: 18ch; }
.nx-vip-hero p:not(.section-label) { margin-top: 1.2rem; max-width: 36rem; color: var(--pale); font-size: 1.15rem; }
.nx-vip-plans { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .nx-vip-plans { grid-template-columns: 1.15fr 0.85fr; } }
.nx-back { margin-top: 2rem; }


/* ---------- Simplification pass (2026-10-05): ten sections, fewer words ---------- */
@media (min-width: 1000px) { .nx-become-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.nx-also { margin-top: 1.5rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); color: var(--text); max-width: 46rem; }
.nx-finder { margin-top: 1.75rem; }
.nx-builds-h--top { margin-top: 1.5rem; padding-top: 0; border-top: 0; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); font-style: italic; color: var(--gold-text); }
.nx-builds2 { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
@media (min-width: 760px) { .nx-builds2 { gap: 1.4rem; } }
@media (max-width: 619px) { .nx-builds2 .nx-build-body { padding: 0.7rem 0.75rem 0.8rem; } .nx-builds2 .nx-build-body b { font-size: 0.98rem; } .nx-builds2 .nx-build-body > span { display: none; } .nx-builds2 .nx-build-body i { font-size: 0.72rem; overflow-wrap: anywhere; } }
.nx-story { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 96px 1fr; gap: 1.1rem; align-items: start; }
.nx-story .nx-portrait { max-width: none; border-radius: 14px; box-shadow: 0 14px 34px oklch(26.3% 0.046 250 / 0.18); }
.nx-story .nx-portrait figcaption { display: none; }
.nx-story .nx-founder-copy p { font-size: 1.08rem; max-width: 38rem; }
@media (min-width: 760px) { .nx-story { grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: center; } .nx-story .nx-portrait figcaption { display: grid; } .nx-story .nx-founder-copy p { font-size: 1.2rem; } }
.nx-ninety .nx-method-head .display { max-width: none; }
.nx-week { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); display: grid; gap: 1rem; }
.nx-week li { display: grid; gap: 0.4rem; align-content: start; padding: 1.3rem 1.3rem 1.4rem; border-radius: 16px; background: linear-gradient(170deg, #ffffff, #f4f7fa); border: 1px solid var(--line); border-top: 3px solid var(--gold); box-shadow: 0 16px 40px oklch(26.3% 0.046 250 / 0.08); }
.nx-week h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); line-height: 1.1; color: var(--navy); }
.nx-week p:last-child { font-size: 0.98rem; }
@media (min-width: 820px) { .nx-week { grid-template-columns: repeat(3, 1fr); } }
.nx-week-when { margin-top: 1rem; font-weight: 600; color: var(--navy); }
.nx-inside .nx-house { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.nx-fun-lines--inline { margin-top: clamp(2rem, 4vw, 3rem); }
.nx-fun-lines--inline p:nth-child(4), .nx-fun-lines--inline p:nth-child(7) { font-style: normal; color: var(--navy); }
.nx-fun-lines--inline p:nth-child(2), .nx-fun-lines--inline p:nth-child(4) { font-style: italic; color: var(--text-muted); }
.nx-quotes { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1rem; }
@media (min-width: 760px) { .nx-quotes { grid-template-columns: 1fr 1fr; } }
.nx-quotes-note { margin-top: 0.8rem; font-size: 0.85rem; color: var(--text-muted); }
.nx-next { margin-top: 1.5rem; max-width: 46rem; padding: 1rem 1.2rem; border-left: 3px solid var(--gold); background: var(--white); border-radius: 0 12px 12px 0; color: var(--text); }
.nx-next b { color: var(--navy); }
.nx-next + .nx-vip-line { margin-top: 1.2rem; }
.footer-creed { margin-top: 0.7rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 899px) { .forge-btn { min-width: 44px; min-height: 44px; } }

/* ---------- Depth pass (2026-10-05): photographs, a navy showcase for the builds, a navy price panel, soft light ---------- */
.nx-ask { background: radial-gradient(55% 45% at 100% 0%, oklch(75.2% 0.122 84.8 / 0.10), transparent 62%), radial-gradient(50% 50% at 0% 100%, oklch(45% 0.11 258 / 0.07), transparent 65%), linear-gradient(180deg, #ffffff, #f7f9fc); }
.nx-ninety { background: radial-gradient(45% 40% at 0% 0%, oklch(75.2% 0.122 84.8 / 0.09), transparent 62%), linear-gradient(180deg, #edf3f8 0%, #f6f9fc 100%); }
.nx-join { background: radial-gradient(50% 45% at 100% 100%, oklch(75.2% 0.122 84.8 / 0.10), transparent 62%), radial-gradient(45% 45% at 0% 0%, oklch(45% 0.11 258 / 0.08), transparent 65%), linear-gradient(180deg, #edf3f8 0%, #f6f9fc 100%); }
.nx-photo { position: relative; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.nx-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 70px oklch(22% 0.07 258 / 0.28); }
.nx-photo::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--gold); border-radius: 18px; opacity: 0.75; z-index: 0; }
.nx-photo img { position: relative; z-index: 1; }
@media (min-width: 900px) { .nx-ask-photo img { aspect-ratio: 4 / 4.2; object-position: 30% center; } .nx-ask-head { position: static; } }
@media (max-width: 899px) { .nx-photo::before { inset: 10px -8px -10px 10px; } }

/* example cards: a little more life */
.nx-bc { position: relative; overflow: hidden; border-top: 3px solid var(--gold); }
.nx-bc::after { content: "\201C"; position: absolute; right: 0.9rem; top: -0.6rem; font-family: var(--font-display); font-size: 6.5rem; line-height: 1; color: oklch(75.2% 0.122 84.8 / 0.16); pointer-events: none; }
.nx-finder { background: linear-gradient(135deg, oklch(26% 0.07 258), oklch(17% 0.062 261)); border: 1px solid var(--navy-card-line); border-left: 4px solid var(--gold); box-shadow: 0 30px 70px oklch(20% 0.06 258 / 0.3); }
.nx-finder-h { color: var(--white); } .nx-finder-sub { color: var(--pale); }

/* founder: navy showcase, screenshots in browser frames */
.nx-founder--dark { position: relative; overflow: hidden; }
.nx-founder--dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 40% at 100% 0%, oklch(75.2% 0.122 84.8 / 0.16), transparent 62%), radial-gradient(50% 50% at 0% 60%, oklch(45% 0.11 258 / 0.55), transparent 68%); }
.nx-founder--dark > .container { position: relative; }
.nx-founder--dark .display { color: var(--white); }
.nx-founder--dark .nx-builds-h--top { color: var(--gold); }
.nx-builds2 .nx-build { grid-template-rows: auto auto 1fr; border: 1px solid oklch(100% 0 0 / 0.16); box-shadow: 0 30px 70px oklch(10% 0.04 262 / 0.55); }
.nx-builds2 .nx-build::before { content: ""; display: block; height: 26px; background: radial-gradient(circle at 16px 13px, #f26b5e 4px, transparent 4.6px), radial-gradient(circle at 32px 13px, #f5bd4f 4px, transparent 4.6px), radial-gradient(circle at 48px 13px, #5fc866 4px, transparent 4.6px), linear-gradient(180deg, #eef2f6, #e2e8ee); border-bottom: 1px solid var(--line); }
.nx-builds2 a.nx-build:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 40px 90px oklch(10% 0.04 262 / 0.65), 0 0 0 1px var(--gold); }
@media (max-width: 619px) { .nx-builds2 .nx-build::before { height: 16px; background: radial-gradient(circle at 10px 8px, #f26b5e 2.5px, transparent 3px), radial-gradient(circle at 19px 8px, #f5bd4f 2.5px, transparent 3px), radial-gradient(circle at 28px 8px, #5fc866 2.5px, transparent 3px), linear-gradient(180deg, #eef2f6, #e2e8ee); } }
.nx-founder--dark .nx-story { padding-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid var(--navy-card-line); }
.nx-founder--dark .nx-founder-copy p { color: var(--pale); }
.nx-founder--dark .nx-founder-copy p:last-child { color: var(--white); font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem); line-height: 1.35; }
.nx-founder--dark .nx-portrait { border: 1px solid var(--gold); }

/* 90 days: numerals behind each month */
.nx-months { counter-reset: nxm; }
.nx-months li { position: relative; overflow: hidden; counter-increment: nxm; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.nx-months li:hover { transform: translateY(-4px); box-shadow: 0 28px 60px oklch(26.3% 0.046 250 / 0.15); }
.nx-months li::after { content: "0" counter(nxm); position: absolute; right: 0.8rem; top: -0.4rem; font-family: var(--font-display); font-size: clamp(4.5rem, 3.5rem + 3vw, 6.5rem); line-height: 1; color: oklch(75.2% 0.122 84.8 / 0.2); pointer-events: none; }
.nx-months li > * { position: relative; z-index: 1; }

/* monetize band: light from the corner */
.nx-sell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 55% at 0% 100%, oklch(75.2% 0.122 84.8 / 0.14), transparent 62%), radial-gradient(45% 50% at 100% 0%, oklch(45% 0.11 258 / 0.5), transparent 68%); }
.nx-sell > .container { position: relative; }

/* inside: photograph carrying the heading */
.nx-banner { position: relative; margin-top: 1.5rem; border-radius: 20px; overflow: hidden; min-height: clamp(300px, 42vw, 460px); display: grid; align-items: end; box-shadow: 0 34px 80px oklch(20% 0.06 258 / 0.3); }
.nx-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.nx-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(16.5% 0.06 262 / 0.94) 0%, oklch(16.5% 0.06 262 / 0.7) 45%, oklch(16.5% 0.06 262 / 0.1) 100%), linear-gradient(0deg, oklch(16.5% 0.06 262 / 0.6), transparent 55%); }
.nx-banner-copy { position: relative; z-index: 1; display: grid; gap: 0.7rem; padding: clamp(1.4rem, 4vw, 3rem); max-width: 34rem; }
.nx-banner-copy .display { color: var(--white); }
.nx-banner-copy p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem); color: var(--gold); }
@media (max-width: 700px) { .nx-banner::after { background: linear-gradient(0deg, oklch(16.5% 0.06 262 / 0.96) 0%, oklch(16.5% 0.06 262 / 0.75) 55%, oklch(16.5% 0.06 262 / 0.25) 100%); } .nx-banner { min-height: 380px; } }
.nx-week li { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.nx-week li:hover { transform: translateY(-4px); box-shadow: 0 26px 56px oklch(26.3% 0.046 250 / 0.14); }

/* membership: navy price panel beside the white list */
.plans--v2 .plan.nx-plan { padding: 0; overflow: hidden; border: 1px solid var(--line); border-top: 0; gap: 0; box-shadow: 0 40px 90px oklch(22% 0.07 258 / 0.22); }
.nx-plan .nx-plan-price { position: relative; padding: clamp(1.6rem, 3.5vw, 2.6rem); background: radial-gradient(70% 60% at 100% 0%, oklch(75.2% 0.122 84.8 / 0.2), transparent 62%), linear-gradient(165deg, oklch(27% 0.075 258), oklch(16.5% 0.06 262)); color: var(--white); border-top: 3px solid var(--gold); }
.nx-plan .nx-plan-price .plan-name { color: var(--gold); }
.nx-plan .nx-plan-price .plan-amount { color: var(--white); }
.nx-plan .nx-plan-price .plan-was, .nx-plan .nx-plan-price .plan-term { color: var(--pale); }
.nx-plan .nx-plan-price .plan-founder { background: oklch(100% 0 0 / 0.07); border: 1px solid oklch(75.2% 0.122 84.8 / 0.55); color: var(--white); }
.nx-plan .nx-plan-price .plan-founder > span:first-child { color: var(--gold); }
.nx-plan .nx-plan-price .plan-founder-body { color: var(--white); }
.nx-plan .nx-plan-price .plan-split { color: var(--pale); }
.nx-plan .nx-plan-price .plan-cta { justify-self: stretch; }
.nx-plan .nx-plan-inc { padding: clamp(1.6rem, 3.5vw, 2.6rem); border-left: 0; background: linear-gradient(170deg, #ffffff, #f6f8fb); }
@media (min-width: 860px) { .plans--v2 .plan.nx-plan .nx-plan-inc { padding-left: clamp(1.6rem, 3.5vw, 2.6rem); border-left: 0; } }
@media (prefers-reduced-motion: reduce) { .nx-bc, .nx-months li, .nx-week li, .nx-build { transition: none; } }

/* ---------- Final simplification pass (2026-10-05) ---------- */
.nx-creed--under { margin-top: 1.6rem; font-size: 0.7rem; opacity: 0.9; }
.nx-become .nx-method-head .display { max-width: 22ch; }
.nx-become { padding-bottom: clamp(2rem, 4vw, 3rem); }
.nx-tool { padding-block: 0 var(--section-y); background: linear-gradient(180deg, #f6f9fc 0%, #ffffff 100%); }
.nx-tool .nx-finder { margin-top: 0; padding: clamp(1.8rem, 4.5vw, 3.25rem); position: relative; overflow: hidden; }
.nx-tool .nx-finder::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 80% at 100% 0%, oklch(75.2% 0.122 84.8 / 0.22), transparent 62%); }
.nx-tool .nx-finder > * { position: relative; }
.nx-finder-kick { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.7rem; }
.nx-tool .nx-finder-h { margin: 0; font-weight: 400; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.8rem); }
.nx-tool .nx-finder-sub { margin-top: 0.7rem; font-size: 1.1rem; max-width: 30rem; }
@media (max-width: 759px) { .nx-tool .nx-finder .btn { width: 100%; } }
.nx-build-body em { font-style: normal; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); }
.nx-builds2--5 li:last-child { grid-column: 1 / -1; }
.nx-builds2--5 li:last-child .nx-build img { aspect-ratio: 16 / 7; }
.nx-builds2--5 li:last-child picture { aspect-ratio: 16 / 7; }
@media (min-width: 900px) {
  .nx-builds2--5 { grid-template-columns: repeat(6, 1fr); }
  .nx-builds2--5 li { grid-column: span 2; }
  .nx-builds2--5 li:nth-child(-n+2) { grid-column: span 3; }
  .nx-builds2--5 li:last-child { grid-column: span 2; }
  .nx-builds2--5 li:last-child picture, .nx-builds2--5 li:last-child .nx-build img { aspect-ratio: 16 / 10; }
}
.nx-sell-head p.section-label { margin-bottom: 0.2rem; font-size: 0.74rem; color: var(--gold); max-width: none; }
.nx-fun-h { margin-bottom: 1rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.1; color: var(--navy); }
.nx-fun-lines--inline p:nth-child(2), .nx-fun-lines--inline p:nth-child(4) { font-style: normal; color: var(--navy); }
.nx-fun-lines--inline p:nth-child(3), .nx-fun-lines--inline p:nth-child(5) { font-style: italic; color: var(--text-muted); }

/* ---------- Offer-first correction (2026-10-05): the loop, the live build, the first 30 days, wins ---------- */
.nx-sell-small { font-size: 0.9rem !important; color: oklch(86% 0.02 250 / 0.75) !important; }
.nx-loop { display: grid; counter-reset: nxl; }
.nx-loop li { counter-increment: nxl; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: 0.6rem; row-gap: 0.15rem; padding: 0.95rem 0; border-bottom: 1px solid var(--navy-card-line); }
.nx-loop li:first-child { border-top: 1px solid var(--navy-card-line); }
.nx-loop li::before { content: counter(nxl); grid-row: 1 / span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); font-family: var(--font-display); font-size: 1rem; }
.nx-loop b { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.65rem); line-height: 1.15; color: var(--white); }
.nx-loop span { grid-column: 2; font-size: 0.95rem; color: var(--pale); }
.nx-hard { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.7rem); line-height: 1.25; color: var(--navy); max-width: 34ch; }
.nx-inside .nx-week { margin-top: 1.25rem; }
.nx-week-when { max-width: 46rem; }
.nx-thirty { margin-top: clamp(2.75rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.nx-months--4 h3 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem); line-height: 1.12; }
.nx-months--4 li > p:not(.nx-month-n):not(.nx-month-d) { font-size: 0.96rem; }
@media (min-width: 640px) { .nx-months--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .nx-months--4 { grid-template-columns: repeat(4, 1fr); } }
.nx-inside .nx-after p:last-child { max-width: 48rem; color: var(--text); }
.nx-inside .nx-house { margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 760px) { .nx-house > .nx-rooms li:nth-last-child(-n+2) { border-bottom: 1px solid var(--navy-card-line); } }
@media (max-width: 759px) { .nx-house > .nx-rooms li:last-child { border-bottom: 1px solid var(--navy-card-line); } }
.nx-rooms-more summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0.95rem 1.4rem; font-weight: 600; font-size: 0.92rem; color: var(--gold); }
.nx-rooms-more summary::-webkit-details-marker { display: none; }
.nx-rooms-more summary::after { content: "+"; font-family: var(--font-display); font-size: 1.4rem; line-height: 1; }
.nx-rooms-more[open] summary::after { content: "\2212"; }
.nx-rooms-more[open] summary { border-bottom: 1px solid var(--navy-card-line); }
.nx-wins { margin-top: clamp(2.5rem, 5vw, 4rem); }
.nx-wins-sub { margin-bottom: 1.1rem; color: var(--text-muted); }
.nx-wins-chips li { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; padding: 0.6rem 1.1rem; }
.nx-wins-chips li::before { content: "\201C"; color: var(--gold-text); }
.nx-wins-chips li::after { content: "\201D"; color: var(--gold-text); }
.nx-join .display.nx-h { max-width: 20ch; }

/* ---------- Ship-first pass (2026-10-05) ---------- */
.nx-how { display: grid; gap: 1.5rem; }
.nx-strip { display: flex; flex-wrap: wrap; gap: 0.5rem 0.4rem; align-items: center; }
.nx-strip span { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); color: var(--white); }
.nx-strip span:not(:last-child)::after { content: "\2192"; margin: 0 0.15rem 0 0.55rem; color: var(--gold); font-family: var(--font-sans); font-size: 0.95em; }
.nx-strip span:last-child { color: var(--gold); font-style: italic; }
.nx-pairs-h { padding-top: 1.4rem; border-top: 1px solid var(--navy-card-line); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.nx-pairs { display: grid; gap: 0.7rem; }
.nx-pairs li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.8rem; padding: 0.95rem 1.1rem; border-radius: 14px; background: var(--navy-card); border: 1px solid var(--navy-card-line); }
.nx-pairs li::before { content: "\2192"; grid-column: 2; grid-row: 1; color: var(--gold); }
.nx-pairs span { grid-column: 1; grid-row: 1; color: var(--pale); font-size: 1rem; }
.nx-pairs b { grid-column: 3; grid-row: 1; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); color: var(--white); }
.nx-months--4 .nx-month-d { font-weight: 600; }
.nx-inside .nx-after p + p { margin-top: 0.5rem; }
details.nx-house { margin-top: clamp(2rem, 4vw, 3rem); }
details.nx-house > summary { justify-content: flex-start; gap: 0.7rem; padding: 1.05rem 1.4rem; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--white); }
details.nx-house > summary::after { margin-left: auto; color: var(--gold); }
.nx-wins + details.nx-house { margin-top: clamp(2rem, 4vw, 3rem); }
/* ---------- Founder builds: three cards, one row, same size (2026-10-07) ---------- */
.nx-builds2--3 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .nx-builds2--3 { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (max-width: 619px) { .nx-builds2--3 .nx-build-body > span { display: block; } .nx-builds2--3 .nx-build-body { padding: 0.95rem 1.05rem 1.1rem; } .nx-builds2--3 .nx-build-body b { font-size: 1.15rem; } .nx-builds2--3 .nx-build::before { height: 26px; background: radial-gradient(circle at 16px 13px, #f26b5e 4px, transparent 4.6px), radial-gradient(circle at 32px 13px, #f5bd4f 4px, transparent 4.6px), radial-gradient(circle at 48px 13px, #5fc866 4px, transparent 4.6px), linear-gradient(180deg, #eef2f6, #e2e8ee); } }


/* ============================================================
   2026-10-15 REPOSITIONING: Pick a Path. Build With AI. Start Selling.
   Same tokens, same type, same tablet. New sections, less text.
   ============================================================ */
/* Hero */
.hero--v3 { min-height: auto; padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 6.5rem)); padding-bottom: clamp(3rem, 7vw, 6rem); }
.hero--v3 .hero-title { font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5.2rem); line-height: 1.02; max-width: 12ch; }
.hero--v3 .hero-title em { font-style: italic; color: var(--gold); }
.hero-br { display: none; }
@media (min-width: 900px) { .hero-br { display: inline; } }
.hero-lede { margin-top: clamp(1.1rem, 2.4vw, 1.6rem); max-width: 36rem; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); line-height: 1.55; color: var(--pale); }
.hero--v3 .hero-actions { margin-top: clamp(1.5rem, 3vw, 2.2rem); }
.btn-price { display: inline-flex; align-items: center; margin-left: 0.7rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: oklch(26.3% 0.046 250 / 0.14); font-size: 0.82em; font-weight: 700; letter-spacing: 0.02em; }
.btn-nav .btn-price { margin-left: 0.5rem; padding: 0.1rem 0.45rem; }
.hero-small { margin-top: 1.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.hero-small i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0.8; }
/* The proof reel in the tablet */
.reel { padding: 0; max-width: 560px; }
.tablet--reel { padding: 10px; }
.reel-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #0b1524; }
.reel-shot { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease); }
.reel-shot.is-on { opacity: 1; }
.reel-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.reel-cap { display: grid; gap: 0.5rem; margin-top: 1.1rem; }
.reel-kicker { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.reel-name { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); color: var(--white); line-height: 1.25; }
.reel-name span { display: block; font-family: var(--font-sans); font-size: 0.86rem; color: var(--pale); margin-top: 0.15rem; }
.reel-controls { display: flex; align-items: center; gap: 0.6rem; }
@media (prefers-reduced-motion: reduce) { .reel-shot { transition: none; } }
/* Problem */
.nx-ask--v3 .nx-ask-sub { margin-top: 1rem; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: var(--text-muted); max-width: 30rem; }
@media (min-width: 900px) { .nx-ask--v3 .nx-ask-grid { grid-template-columns: 1.1fr 1fr; align-items: center; } }
/* Six categories */
.cats { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1rem; }
@media (min-width: 640px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cats { grid-template-columns: repeat(3, 1fr); } }
.cat { display: grid; align-content: start; border-radius: 16px; background: linear-gradient(170deg, #ffffff, #f6f8fb); border: 1px solid var(--line); box-shadow: 0 14px 36px oklch(26.3% 0.046 250 / 0.08); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); overflow: hidden; }
.cat.is-open { border-color: var(--gold); box-shadow: 0 22px 48px oklch(26.3% 0.046 250 / 0.14); }
@media (hover: hover) { .cat:hover { transform: translateY(-3px); box-shadow: 0 22px 48px oklch(26.3% 0.046 250 / 0.14); } }
.cat-btn { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "ic t" "d d" "m m"; gap: 0.35rem 0.9rem; align-items: center; width: 100%; padding: 1.3rem 1.35rem 1.2rem; cursor: pointer; color: var(--text); }
.cat-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.cat-ic { grid-area: ic; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: var(--gold); }
.cat-ic svg { width: 22px; height: 22px; }
.cat-t { grid-area: t; font-family: var(--font-display); font-size: 1.3rem; color: var(--navy); line-height: 1.15; }
.cat-d { grid-area: d; margin-top: 0.35rem; font-size: 0.97rem; line-height: 1.5; color: var(--text-muted); }
.cat-more { grid-area: m; margin-top: 0.5rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); }
.cat-more::after { content: " +"; }
.cat.is-open .cat-more::after { content: " \2013"; }
.cat-ex { padding: 0 1.35rem 1.3rem; }
.cat-ex p { padding: 0.9rem 1rem; border-radius: 12px; background: var(--navy); color: var(--pale); font-size: 0.95rem; line-height: 1.5; }
.cat-ex b { color: var(--gold); font-weight: 600; }
.nx-inline { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
/* Founder proof */
.proofs { margin-top: 1.5rem; display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .proofs { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
.proof { display: grid; grid-template-rows: auto 1fr; border-radius: 16px; overflow: hidden; background: oklch(100% 0 0 / 0.05); border: 1px solid oklch(100% 0 0 / 0.14); }
.proof-shot { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b1524; }
.proof-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.6s var(--ease); }
@media (hover: hover) { .proof-shot:hover img { transform: scale(1.03); } }
.proof-body { display: grid; gap: 0.6rem; align-content: start; padding: 1.25rem 1.3rem 1.4rem; }
.proof-k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.proof-body h3 { font-family: var(--font-display); font-size: 1.45rem; color: var(--white); line-height: 1.15; }
.proof-dl { display: grid; gap: 0.15rem 0.9rem; grid-template-columns: max-content 1fr; font-size: 0.92rem; line-height: 1.45; }
.proof-dl dt { color: var(--gold); font-weight: 600; white-space: nowrap; }
.proof-dl dd { margin: 0; color: var(--pale); }
@media (max-width: 480px) { .proof-dl { grid-template-columns: 1fr; gap: 0 } .proof-dl dd { margin-bottom: 0.45rem; } }
.proof-body .link-arrow { margin-top: 0.3rem; font-size: 0.92rem; }
.nx-story--v3 { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* Method and live experience */
.nx-week--v3 li h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--navy); }
@media (min-width: 760px) { .nx-week--v3 { grid-template-columns: repeat(3, 1fr); } }
.live-list { margin-top: clamp(1.5rem, 3vw, 2.2rem); display: flex; flex-wrap: wrap; gap: 0.55rem; }
.live-list li { padding: 0.55rem 0.95rem; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 0.92rem; color: var(--text); }
.live-list b { color: var(--navy); }
/* First seven days */
.days { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 0.8rem; counter-reset: d; }
@media (min-width: 700px) { .days { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .days { grid-template-columns: repeat(4, 1fr); } .days li:nth-child(n+5) { grid-column: span 1; } }
.days li { display: grid; gap: 0.3rem; align-content: start; padding: 1.15rem 1.2rem 1.25rem; border-radius: 14px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--navy); }
.days li:last-child { border-top-color: var(--gold); }
.day-n { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); }
.days b { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--navy); }
.days p { font-size: 0.93rem; line-height: 1.45; color: var(--text-muted); }
.finish { margin-top: clamp(1.5rem, 3vw, 2.2rem); display: grid; gap: 0.3rem; padding: 1.3rem 1.5rem; border-radius: 14px; background: var(--navy); color: var(--white); font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); line-height: 1.3; }
.finish span { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.nx-fine-line { margin-top: 1.1rem; font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); max-width: 60rem; }
/* First 30 days */
.nx-thirty-v3 .nx-months li { border-top-color: var(--gold); }
.nx-thirty-v3 .nx-months li:last-child { border-top-color: var(--gold); }
/* Pathways */
.nx-paths-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .nx-paths-grid { grid-template-columns: 1.05fr 1fr; } }
.nx-paths-sub { margin-top: 1.1rem; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: var(--white); max-width: 32rem; }
.nx-paths-small { margin-top: 0.9rem; font-size: 0.95rem; line-height: 1.55; color: var(--pale); max-width: 36rem; }
.path-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.path-chips li { padding: 0.75rem 1.1rem; border-radius: 999px; border: 1px solid oklch(100% 0 0 / 0.22); background: oklch(100% 0 0 / 0.06); color: var(--white); font-size: 0.95rem; }
/* Build Kits */
.kits-grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .kits-grid { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.kits { display: grid; gap: 0.7rem; }
.kits li { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.2rem; border-radius: 12px; background: var(--white); border: 1px solid var(--line); font-family: var(--font-display); font-size: 1.15rem; color: var(--navy); }
.kits li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
.kit-inside { padding: 1.4rem 1.5rem; border-radius: 16px; background: var(--navy); color: var(--pale); }
.kit-h { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem; }
.kit-inside ul { display: grid; gap: 0.4rem; }
.kit-inside li { padding-left: 1.2rem; position: relative; color: var(--white); }
.kit-inside li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold); }
.kit-inside .nx-fine-line { color: var(--pale); }
/* Community */
.nx-community .nx-quotes { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
@media (min-width: 760px) { .nx-community .nx-quotes { grid-template-columns: 1fr 1fr; } }
/* Membership */
.plan-for { font-size: 1rem; line-height: 1.5; color: var(--text); }
.plan-note a { color: var(--navy); font-weight: 600; }
/* Footer */
.footer-by { margin-top: 0.6rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.nx-plan-price .plan-for { color: var(--pale); }
.days .day-finish { background: var(--navy); border-top-color: var(--gold); color: var(--white); }
.days .day-finish .day-n { color: var(--gold); }
.days .day-finish b { color: var(--white); }
.days .day-finish p { color: var(--pale); }

/* 2026-10-15b: AI Build Paths tabs, UGC before/after, build ideas, featured proof, kit status, income pathways */
.bp { margin-top: clamp(1.75rem, 4vw, 2.75rem); display: grid; gap: 1rem; }
@media (min-width: 900px) { .bp { grid-template-columns: minmax(240px, 300px) 1fr; gap: 1.5rem; align-items: start; } }
.bp-tabs { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bp-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .bp-tabs { flex-direction: column; overflow: visible; } }
.bp-tab { all: unset; box-sizing: border-box; flex: 0 0 auto; padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--navy); font-weight: 600; font-size: 0.98rem; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease); }
@media (min-width: 900px) { .bp-tab { white-space: normal; display: flex; align-items: center; justify-content: space-between; } .bp-tab::after { content: "\2192"; color: var(--gold-text); opacity: 0; transition: opacity 0.25s var(--ease); } .bp-tab[aria-selected="true"]::after { opacity: 1; color: var(--gold); } }
@media (hover: hover) { .bp-tab:hover { border-color: var(--gold); transform: translateY(-1px); } }
.bp-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bp-tab[aria-selected="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.bp-panel { border-radius: 16px; background: linear-gradient(170deg, #ffffff, #f6f8fb); border: 1px solid var(--line); box-shadow: 0 14px 36px oklch(26.3% 0.046 250 / 0.08); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 0.75rem; align-content: start; min-height: 100%; }
.bp-level { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); }
.bp-panel h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.15; color: var(--navy); }
.bp-dl { display: grid; gap: 0.3rem 1rem; grid-template-columns: max-content 1fr; font-size: 0.98rem; line-height: 1.5; margin-top: 0.25rem; }
.bp-dl dt { color: var(--gold-text); font-weight: 600; white-space: nowrap; }
.bp-dl dd { margin: 0; color: var(--text); }
@media (max-width: 520px) { .bp-dl { grid-template-columns: 1fr; gap: 0; } .bp-dl dd { margin-bottom: 0.55rem; } }
.ba { margin-top: clamp(1.75rem, 4vw, 2.5rem); display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 820px) { .ba { grid-template-columns: 1fr auto 1.1fr; gap: 1.25rem; } }
.ba-card { border-radius: 16px; padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid var(--line); background: #fff; display: grid; gap: 0.6rem; align-content: start; }
.ba-after { background: var(--navy); color: var(--pale); border-color: var(--navy); box-shadow: 0 22px 48px oklch(26.3% 0.046 250 / 0.18); border-top: 3px solid var(--gold); }
.ba-k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); }
.ba-after .ba-k { color: var(--gold); }
.ba-sub { font-size: 0.98rem; line-height: 1.5; color: var(--text-muted); }
.ba-after .ba-sub { color: var(--pale); }
.ba-card ul { display: grid; gap: 0.4rem; margin-top: 0.35rem; padding-left: 1.2rem; font-size: 1rem; line-height: 1.45; }
.ba-after ul li::marker { color: var(--gold); }
.ba-after b { color: var(--gold); font-weight: 600; }
.ba-arrow { display: grid; place-items: center; }
.ba-arrow span { display: inline-grid; place-items: center; min-width: 54px; height: 54px; padding: 0 0.8rem; border-radius: 999px; background: var(--gold); color: var(--navy); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
.bideas { margin-top: clamp(2rem, 4vw, 3rem); }
.bideas-h { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 0.8rem; }
.bideas-list { display: grid; gap: 0.6rem; }
@media (min-width: 640px) { .bideas-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bideas-list { grid-template-columns: repeat(4, 1fr); } }
.bideas-list li { display: grid; gap: 0.15rem; padding: 0.85rem 1rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 0.95rem; line-height: 1.4; }
.bideas-list b { color: var(--navy); font-weight: 600; }
.bideas-list span { color: var(--text-muted); }
.bideas-list span::before { content: "\2192  "; color: var(--gold-text); }
.bideas-list span { display: block; }
.proofs--feature { grid-template-columns: 1fr; margin-bottom: 1.5rem; }
@media (min-width: 900px) { .proof--feature { grid-template-columns: 1.15fr 1fr; grid-template-rows: auto; } .proof--feature .proof-shot { aspect-ratio: auto; height: 100%; } .proof--feature .proof-body { padding: 1.75rem 1.9rem; } }
.proof--feature { border-color: oklch(100% 0 0 / 0.26); background: oklch(100% 0 0 / 0.08); }
.kits--status li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.kits--status li span { flex: 0 0 auto; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); padding: 0.25rem 0.55rem; border-radius: 999px; border: 1px solid var(--gold); background: #fff; }
.ip-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.ip-grid > * { min-width: 0; }
@media (min-width: 900px) { .ip-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2rem; align-items: start; } }
.ip-card { border-radius: 16px; background: var(--navy); color: var(--pale); padding: clamp(1.4rem, 3vw, 2rem); display: grid; gap: 0.9rem; border-top: 3px solid var(--gold); box-shadow: 0 22px 48px oklch(26.3% 0.046 250 / 0.18); }
.ip-card h2 { font-family: var(--font-display); font-size: 1.6rem; color: var(--white); line-height: 1.15; }
.ip-price { font-family: var(--font-display); font-size: 2.4rem; color: var(--white); line-height: 1; }
.ip-price small { font-family: var(--font-body); font-size: 0.95rem; color: var(--pale); margin-left: 0.5rem; }
.ip-list { display: grid; gap: 0.45rem; padding-left: 1.2rem; line-height: 1.5; }
.ip-list li::marker { color: var(--gold); }
.ip-card .btn { justify-self: start; white-space: normal; text-align: center; }
.ip-disclose { font-size: 0.9rem; line-height: 1.5; color: var(--pale); border-top: 1px solid oklch(100% 0 0 / 0.18); padding-top: 0.9rem; }
.ip-copy { display: grid; gap: 1rem; font-size: 1.05rem; line-height: 1.6; }
.ip-copy h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy); line-height: 1.2; }
.ip-copy .nx-fine-line { margin-top: 0; }
.thanks-steps { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; counter-reset: ts; max-width: 640px; }
.thanks-steps li { counter-increment: ts; display: grid; grid-template-columns: 40px 1fr; gap: 0.9rem; align-items: start; padding: 1rem 1.1rem; border-radius: 14px; background: oklch(100% 0 0 / 0.06); border: 1px solid oklch(100% 0 0 / 0.16); color: var(--pale); line-height: 1.55; }
.thanks-steps li::before { content: counter(ts); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--navy); font-weight: 700; }
.thanks-steps b { color: var(--white); font-weight: 600; }
.thanks-hero .hero-actions { margin-top: 1.5rem; }
.thanks-fine { margin-top: 1.25rem; font-size: 0.92rem; color: var(--pale); }
.thanks-fine a { color: var(--gold); }

/* 2026-10-15c: shorter homepage. Portfolio example mock, 2x2 proof grid, seven-day reveal, inside-the-community cards */
.tablet--link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.tablet--link:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.reel-cap .link-arrow { margin-top: 0.4rem; display: inline-block; }
.pf-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 960px) { .pf-grid { grid-template-columns: 1fr 1.05fr; } }
.pf-copy { display: grid; gap: 1rem; align-content: start; }
.pf-copy .display { margin-top: 0.5rem; }
.pf-lede { font-size: 1.08rem; line-height: 1.6; color: var(--text); }
.pf-list { display: grid; gap: 0.5rem; padding-left: 1.2rem; font-size: 1rem; line-height: 1.5; }
.pf-list li::marker { color: var(--gold-text); }
.pf-list b { color: var(--navy); font-weight: 600; }
.pf-copy .nx-fine-line { margin-top: 0.25rem; }
.pf { position: relative; display: grid; gap: 0.75rem; }
.pf-browser { border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px oklch(26.3% 0.046 250 / 0.16); overflow: hidden; }
.pf-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem; background: #eef2f7; border-bottom: 1px solid var(--line); font-size: 0.7rem; color: var(--text-muted); }
.pf-bar i { width: 8px; height: 8px; border-radius: 50%; background: #cfd8e3; }
.pf-bar span { margin-left: 0.5rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.pf-hero { display: grid; gap: 0.3rem; padding: 1.1rem 1.1rem 0.9rem; background: linear-gradient(135deg, var(--navy), #1c3a5a); color: var(--white); }
.pf-hero b { font-family: var(--font-display); font-size: 1.25rem; }
.pf-hero span { font-size: 0.8rem; color: var(--pale); }
.pf-hero em, .pf-phone em { justify-self: start; margin-top: 0.4rem; padding: 0.35rem 0.7rem; border-radius: 8px; background: var(--gold); color: var(--navy); font-style: normal; font-weight: 700; font-size: 0.72rem; }
.pf-k { padding: 0.8rem 1.1rem 0.4rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); }
.pf-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0 1.1rem; }
.pf-shots div { aspect-ratio: 4 / 3; border-radius: 8px; background: linear-gradient(160deg, #e3e9f1, #f4f7fb); border: 1px solid var(--line); position: relative; }
.pf-shots div::after { content: "Work sample"; position: absolute; left: 0.5rem; bottom: 0.4rem; font-size: 0.62rem; color: var(--text-muted); }
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.6rem 1.1rem 1.1rem; }
.pf-card { display: grid; gap: 0.15rem; padding: 0.7rem 0.8rem; border-radius: 10px; border: 1px solid var(--line); background: #fbfcfe; }
.pf-card b { font-size: 0.82rem; color: var(--navy); }
.pf-card span { font-size: 0.7rem; color: var(--text-muted); }
.pf-phone { position: absolute; right: -6px; bottom: 2.6rem; width: 112px; display: grid; gap: 0.35rem; padding: 0.5rem 0.5rem 0.6rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px oklch(26.3% 0.046 250 / 0.22); }
.pf-phone b { font-family: var(--font-display); font-size: 0.8rem; color: var(--navy); }
.pf-phone .pf-bar--sm { padding: 0.3rem; justify-content: center; border-radius: 6px; border: 0; }
.pf-shots--1 { grid-template-columns: 1fr; padding: 0; }
.pf-shots--1 div::after { font-size: 0.55rem; }
.pf-phone > span { font-size: 0.6rem; color: var(--text-muted); text-align: center; }
.pf-note { font-size: 0.85rem; color: var(--text-muted); max-width: 70%; }
@media (max-width: 600px) { .pf-phone { display: none; } .pf-note { max-width: none; } }
.proofs--4 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .proofs--4 { grid-template-columns: repeat(2, 1fr); } }
.days-more { margin-top: 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.days-more summary { cursor: pointer; padding: 0.95rem 1.2rem; font-weight: 600; color: var(--navy); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.days-more summary::-webkit-details-marker { display: none; }
.days-more summary::after { content: "+"; color: var(--gold-text); font-size: 1.3rem; line-height: 1; }
.days-more[open] summary::after { content: "\2013"; }
.days-more summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.days-list { display: grid; gap: 0.45rem; padding: 0 1.2rem 1.1rem; margin: 0; list-style: none; font-size: 0.97rem; line-height: 1.5; }
@media (min-width: 760px) { .days-list { grid-template-columns: 1fr 1fr; } }
.days-list b { color: var(--gold-text); font-weight: 700; margin-right: 0.35rem; }
.inside-grid { display: grid; gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 820px) { .inside-grid { grid-template-columns: 1fr 1.15fr; } }
.inside-card { border-radius: 16px; padding: clamp(1.2rem, 3vw, 1.6rem); border: 1px solid var(--line); background: #fff; display: grid; gap: 0.6rem; align-content: start; }
.inside-card ul { display: grid; gap: 0.4rem; padding-left: 1.2rem; line-height: 1.5; }
.inside-card li::marker { color: var(--gold-text); }
.inside-card p { line-height: 1.55; }
.inside-card--kits { background: var(--navy); color: var(--pale); border-color: var(--navy); }
.inside-card--kits .kit-h { color: var(--gold); }
.kits-planned { list-style: none; padding: 0; display: grid; gap: 0.45rem; margin-top: 0.25rem; }
.kits-planned li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: oklch(100% 0 0 / 0.07); border: 1px solid oklch(100% 0 0 / 0.16); color: var(--white); }
.kits-planned span { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 0.2rem 0.5rem; }
.nx-quotes-note { font-size: 0.92rem; color: var(--text); }

/* 2026-10-15d: Income Streams */
.streams { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; gap: 0.9rem; }
@media (min-width: 640px) { .streams { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .streams { grid-template-columns: repeat(3, 1fr); } }
.streams li { display: grid; gap: 0.4rem; align-content: start; padding: 1.2rem 1.25rem; border-radius: 14px; background: oklch(100% 0 0 / 0.05); border: 1px solid oklch(100% 0 0 / 0.14); }
.streams b { font-family: var(--font-display); font-size: 1.25rem; color: var(--white); line-height: 1.15; }
.streams span { font-size: 0.95rem; line-height: 1.5; color: var(--pale); }
.streams-member { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 0.8rem; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: 16px; background: oklch(100% 0 0 / 0.08); border: 1px solid oklch(100% 0 0 / 0.2); border-top: 3px solid var(--gold); }
.streams-member .kit-h { color: var(--gold); }
.streams-member ul { display: grid; gap: 0.45rem; padding-left: 1.2rem; color: var(--white); line-height: 1.5; }
.streams-member li::marker { color: var(--gold); }
.streams-member .btn { justify-self: start; margin-top: 0.4rem; }
.nx-inline--dark { color: var(--gold); }
.nx-fine-line--dark { color: var(--pale); }

/* 2026-10-15e: cinematic build deck, build wall, flip strip */
.deck { display: grid; gap: 1.1rem; }
.deck-stage { position: relative; aspect-ratio: 16 / 10; perspective: 1400px; margin: 9% 11% 0 0; }
.deck-card { position: absolute; inset: 0; display: block; border-radius: 16px; overflow: hidden; background: #0b1524; border: 1px solid oklch(100% 0 0 / 0.18); box-shadow: 0 30px 70px oklch(10% 0.04 250 / 0.6); transform-origin: 50% 60%; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.9s; will-change: transform, opacity; }
.deck-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.deck-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, oklch(12% 0.04 250 / 0.55)); pointer-events: none; }
.deck-badge { position: absolute; left: 0.9rem; bottom: 0.85rem; z-index: 1; padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--gold); color: var(--navy); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.deck-card.pos-0 { z-index: 5; opacity: 1; transform: translate3d(0, 0, 0) rotateY(0) scale(1); border-color: oklch(85% 0.12 85 / 0.7); box-shadow: 0 30px 70px oklch(10% 0.04 250 / 0.65), 0 0 0 1px oklch(85% 0.12 85 / 0.25), 0 0 60px oklch(85% 0.12 85 / 0.18); }
.deck-card.pos-1 { z-index: 4; opacity: 0.9; transform: translate(7%, -6%) rotateY(-5deg) scale(0.96); }
.deck-card.pos-2 { z-index: 3; opacity: 0.7; transform: translate(14%, -12%) rotateY(-8deg) scale(0.92); }
.deck-card.pos-3, .deck-card.pos-4 { z-index: 2; opacity: 0; transform: translate(26%, -24%) rotateY(-10deg) scale(0.85); pointer-events: none; }
.deck-card.is-leaving { z-index: 6; opacity: 0; transform: translate(-14%, 10%) rotateY(8deg) scale(1.04); pointer-events: none; }
.deck-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (hover: hover) { .deck-card.pos-0:hover { transform: translate3d(0, -4px, 0) scale(1.01); } }
.deck-cap { display: grid; gap: 0.45rem; }
.deck-controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.25rem; }
.deck-dots { display: flex; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.deck-dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid var(--gold); background: transparent; cursor: pointer; transition: background 0.3s, transform 0.3s; }
.deck-dot.is-on { background: var(--gold); transform: scale(1.25); }
.deck-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.deck-open { margin-left: 0.4rem; }
@media (max-width: 899px) { .deck-stage { margin: 8% 10% 0 0; } }
@media (prefers-reduced-motion: reduce) { .deck-card { transition: none; } }
.wall { padding: 1.4rem 0 1.6rem; background: var(--navy); border-top: 1px solid oklch(100% 0 0 / 0.08); border-bottom: 1px solid oklch(100% 0 0 / 0.08); overflow: hidden; }
.wall-h { text-align: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem; padding: 0 var(--gutter); }
.wall-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.wall-row + .wall-row { margin-top: 0.6rem; }
.wall-track { display: flex; gap: 0.6rem; width: max-content; list-style: none; margin: 0; padding: 0; animation: wall-scroll 48s linear infinite; }
.wall-row--rev .wall-track { animation-direction: reverse; animation-duration: 56s; }
.wall-row:hover .wall-track { animation-play-state: paused; }
.wall-track li { flex: 0 0 auto; padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid oklch(100% 0 0 / 0.18); background: oklch(100% 0 0 / 0.05); color: var(--white); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.wall-track li:nth-child(4n+1) { border-color: oklch(85% 0.12 85 / 0.55); color: var(--gold); }
@keyframes wall-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wall-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); } .wall-track li:nth-child(n+15) { display: none; } .wall-row { mask-image: none; -webkit-mask-image: none; } }
.flip { list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; display: grid; gap: 0.6rem; }
@media (min-width: 900px) { .flip { grid-template-columns: 1fr 1fr; } .flip li:last-child { grid-column: 1 / -1; max-width: 50%; } }
.flip li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; padding: 0.75rem 0.9rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 0.95rem; line-height: 1.35; }
.flip li::before { content: "\2192"; grid-column: 2; grid-row: 1; color: var(--gold-text); font-weight: 700; }
.flip-from { grid-column: 1; grid-row: 1; color: var(--text-muted); text-decoration: line-through; text-decoration-color: oklch(70% 0.1 25 / 0.6); }
.flip-to { grid-column: 3; grid-row: 1; color: var(--navy); font-weight: 600; }

/* 2026-10-15f: final transformation. Long hero headline, eyebrow, wall inside hero, 3-up gallery, fun band, streams chips */
.hero-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.hero--v3 .hero-title--long { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 4.1rem); line-height: 1.06; max-width: 15ch; letter-spacing: -0.01em; }
.wall--in-hero { margin-top: clamp(2.5rem, 5vw, 4rem); background: transparent; border-top: 1px solid oklch(100% 0 0 / 0.1); border-bottom: 0; padding-bottom: 0; }
.proofs--3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .proofs--3 { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }
.proof-line { color: var(--pale); font-size: 0.95rem; line-height: 1.5; }
.proof-built { color: var(--pale); font-size: 0.88rem; line-height: 1.45; opacity: 0.85; }
.proof-built b { color: var(--gold); font-weight: 600; }
.method-cards li { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
@media (hover: hover) { .method-cards li:hover { transform: translateY(-4px); box-shadow: 0 22px 48px oklch(26.3% 0.046 250 / 0.14); } }
.fun-band { margin-top: clamp(1.75rem, 3vw, 2.5rem); padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: 16px; background: var(--navy); color: var(--white); display: grid; gap: 0.9rem; border-top: 3px solid var(--gold); }
.fun-h { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.15; }
.fun-band .nx-wins-chips li { background: oklch(100% 0 0 / 0.08); border-color: oklch(100% 0 0 / 0.2); color: var(--white); }
.nx-join .nx-ask-sub { max-width: 60ch; margin-top: 0.75rem; }
.streams-inline { margin: clamp(1.5rem, 3vw, 2rem) 0; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.stream-chips { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
@media (min-width: 640px) { .stream-chips { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .stream-chips { grid-template-columns: repeat(6, 1fr); } }
.stream-chips li { display: grid; gap: 0.15rem; padding: 0.75rem 0.85rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.stream-chips b { color: var(--navy); font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.stream-chips span { color: var(--text-muted); font-size: 0.8rem; line-height: 1.35; }

/* 2026-10-15g: bigger hero deck; billing as a card; how-you-get-in steps */
@media (min-width: 900px) { .hero--v3 .nx-hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); align-items: center; gap: clamp(1.5rem, 3vw, 3rem); } .hero--v3 .hero-visual.deck { max-width: none; width: 100%; justify-self: end; margin-top: 0; } .hero--v3 .hero-title--long { font-size: clamp(2rem, 1rem + 2.6vw, 3.5rem); max-width: 16ch; } }
@media (min-width: 1200px) { .hero--v3 .hero-visual.deck { width: calc(100% + var(--gutter)); margin-right: calc(-1 * var(--gutter)); } }
.deck-stage { margin: 8% 9% 0 0; }
.deck-card { border-radius: 20px; }
.deck-card.pos-0 { box-shadow: 0 40px 90px oklch(10% 0.04 250 / 0.7), 0 0 0 1px oklch(85% 0.12 85 / 0.35), 0 0 90px oklch(85% 0.12 85 / 0.22); }
.deck-badge { left: 1.1rem; bottom: 1.1rem; padding: 0.45rem 0.9rem; font-size: 0.78rem; letter-spacing: 0.18em; box-shadow: 0 8px 20px oklch(10% 0.04 250 / 0.4); }
.deck-cap .reel-name { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.deck-cap .reel-name span { font-size: 1rem; }
.deck-cap .reel-kicker { font-size: 0.78rem; }
.deck-open { font-size: 1.05rem; }
.getin { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.getin-steps { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.75rem; counter-reset: gi; }
@media (min-width: 760px) { .getin-steps { grid-template-columns: repeat(3, 1fr); } }
.getin-steps li { counter-increment: gi; position: relative; display: grid; gap: 0.2rem; padding: 1rem 1.1rem 1rem 3.6rem; border-radius: 14px; background: var(--navy); color: var(--white); border-top: 3px solid var(--gold); }
.getin-steps li::before { content: counter(gi); position: absolute; left: 1rem; top: 0.95rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--navy); font-weight: 700; }
.getin-steps b { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.15; }
.getin-steps span { font-size: 0.9rem; color: var(--pale); }
.bill { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: clamp(1.1rem, 2.5vw, 1.5rem); border-radius: 16px; background: #fff; border: 1px solid var(--line); display: grid; gap: 0.8rem; }
.bill-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
@media (min-width: 640px) { .bill-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bill-grid { grid-template-columns: repeat(4, 1fr); } }
.bill-grid li { display: grid; gap: 0.2rem; padding: 0.8rem 0.9rem; border-radius: 12px; background: var(--cool, #f4f7fb); border: 1px solid var(--line); }
.bill-grid b { color: var(--navy); font-size: 1.05rem; font-weight: 600; }
.bill-grid span { font-size: 0.88rem; line-height: 1.45; color: var(--text-muted); }
.bill-grid a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; font-weight: 600; }
.bill-fine { font-size: 0.82rem; color: var(--text-muted); }

/* 2026-10-15h: 10/10 brief. Build-section pull line, first live build feature */
.bp-line { margin-top: clamp(1.25rem, 3vw, 2rem); font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.45rem); color: var(--navy); }
.fb-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .fb-grid { grid-template-columns: 1.1fr 0.9fr; } }
.fb-copy { display: grid; gap: 0.9rem; }
.fb-lede { font-size: 1.1rem; line-height: 1.55; color: var(--pale); }
.fb-when { color: var(--white); font-size: 1rem; }
.fb-when b { color: var(--gold); }
.fb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; counter-reset: fb; }
.fb-steps li { counter-increment: fb; position: relative; display: grid; gap: 0.2rem; padding: 1rem 1.1rem 1rem 3.6rem; border-radius: 14px; background: oklch(100% 0 0 / 0.06); border: 1px solid oklch(100% 0 0 / 0.16); transition: transform 0.3s var(--ease), background 0.3s var(--ease); }
@media (hover: hover) { .fb-steps li:hover { transform: translateX(4px); background: oklch(100% 0 0 / 0.1); } }
.fb-steps li::before { content: counter(fb); position: absolute; left: 1rem; top: 0.95rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--navy); font-weight: 700; }
.fb-steps b { font-family: var(--font-display); font-size: 1.25rem; color: var(--white); }
.fb-steps span { font-size: 0.95rem; color: var(--pale); line-height: 1.45; }

/* 2026-10-15i: one calm hero preview in a pearl frame */
@media (min-width: 900px) { .hero--v3 .nx-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } .hero--v3 .hero-visual.hero-shot { max-width: none; width: 100%; justify-self: end; margin-top: 0; } }
@media (min-width: 1200px) { .hero--v3 .hero-visual.hero-shot { width: calc(100% + var(--gutter)); margin-right: calc(-1 * var(--gutter)); } }
.hero-shot { position: relative; display: grid; gap: 1rem; }
.shot-glow { position: absolute; inset: -12% -8% 10% -8%; background: radial-gradient(ellipse at 55% 45%, oklch(92% 0.06 85 / 0.28), oklch(60% 0.12 85 / 0.08) 45%, transparent 72%); filter: blur(6px); pointer-events: none; }
.shot-frame { position: relative; display: block; border-radius: 18px; background: #f7f4ec; padding: 0.55rem; box-shadow: 0 40px 90px oklch(10% 0.04 250 / 0.6), 0 0 0 1px oklch(100% 0 0 / 0.35); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
@media (hover: hover) { .shot-frame:hover { transform: translateY(-4px); box-shadow: 0 50px 110px oklch(10% 0.04 250 / 0.65), 0 0 0 1px oklch(100% 0 0 / 0.5); } }
.shot-frame:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.shot-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.3rem 0.55rem; }
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d9d3c4; }
.shot-url { margin-left: 0.5rem; padding: 0.2rem 0.75rem; border-radius: 999px; background: #fff; color: #5a6475; font-size: 0.72rem; border: 1px solid #e5e0d3; }
.shot-frame img { display: block; width: 100%; height: auto; border-radius: 10px; }
.shot-cap { color: var(--pale); font-size: 0.95rem; line-height: 1.5; }
.shot-cap b { color: var(--white); font-weight: 600; }
.hero--v3 .hero-title--long { max-width: 14ch; }

/* 2026-10-16: paycheck positioning. Hero showcase tabs, mock business tool, problem/opportunity, three paths, kit peek, closing */
.hero-show { position: relative; display: grid; gap: 0.9rem; }
.show-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.show-tab { all: unset; box-sizing: border-box; cursor: pointer; padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid oklch(100% 0 0 / 0.25); color: var(--white); font-size: 0.86rem; font-weight: 600; transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); }
.show-tab[aria-selected="true"] { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.show-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) { .show-tab:hover { border-color: var(--gold); } }
.show-panel { display: grid; gap: 0.9rem; }
.shot-frame--mock { cursor: default; }
.mock { background: #fff; border-radius: 10px; overflow: hidden; font-family: var(--font-body); }
.mock-top { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: var(--navy); color: var(--white); }
.mock-top b { font-family: var(--font-display); font-size: 1.05rem; }
.mock-top span { font-size: 0.68rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--gold); color: var(--navy); font-weight: 700; }
.mock-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; padding: 1rem; }
.mock-form { display: grid; gap: 0.5rem; }
.mock-form label { display: grid; gap: 0.2rem; font-size: 0.66rem; color: #5a6475; font-weight: 600; }
.mock-form i { display: block; height: 1.5rem; border-radius: 6px; border: 1px solid #e3e7ee; background: #f8fafc; }
.mock-form i.tall { height: 2.6rem; } .mock-form i.short { width: 55%; }
.mock-form em { justify-self: start; margin-top: 0.2rem; padding: 0.4rem 0.8rem; border-radius: 7px; background: var(--gold); color: var(--navy); font-style: normal; font-weight: 700; font-size: 0.7rem; }
.mock-track { display: grid; gap: 0.4rem; align-content: start; }
.mock-track p { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); }
.mock-track div { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.65rem; border-radius: 8px; border: 1px solid #e3e7ee; font-size: 0.74rem; color: var(--navy); }
.mock-track small { font-size: 0.62rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }
.mock-track .ok { background: #e6f4ea; color: #1e6b3a; } .mock-track .wait { background: #fff4d6; color: #7a5a00; } .mock-track .new { background: #e8eefc; color: #1f3b8a; }
@media (max-width: 480px) { .mock-body { grid-template-columns: 1fr; } }
.why2-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 960px) { .why2-grid { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.why2-problem, .why2-opp { display: grid; gap: 0.9rem; }
.why2-problem p, .why2-opp > p { font-size: 1.08rem; line-height: 1.6; color: var(--text); max-width: 46ch; }
.why2-answer { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--gold-text); }
.outcomes { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.outcomes li { display: grid; gap: 0.15rem; padding: 0.9rem 1rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold); }
.outcomes b { color: var(--navy); font-weight: 600; } .outcomes span { color: var(--text-muted); font-size: 0.95rem; line-height: 1.45; }
.paths3 { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 820px) { .paths3 { grid-template-columns: repeat(3, 1fr); } }
.paths3 li { display: grid; gap: 0.45rem; align-content: start; padding: 1.3rem 1.3rem 1.4rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); }
.paths3 h3 { font-family: var(--font-display); font-size: 1.4rem; color: var(--navy); line-height: 1.15; }
.paths3 p { font-size: 0.97rem; line-height: 1.5; color: var(--text); }
.paths3-for, .paths3-ex { font-size: 0.9rem !important; color: var(--text-muted) !important; }
.paths3-for b, .paths3-ex b { color: var(--gold-text); font-weight: 600; }
.fb-side { display: grid; gap: 1rem; }
.kit-peek { padding: 1.1rem 1.2rem; border-radius: 14px; background: oklch(100% 0 0 / 0.06); border: 1px solid oklch(100% 0 0 / 0.16); border-top: 3px solid var(--gold); display: grid; gap: 0.5rem; }
.kit-peek .kit-h { color: var(--gold); }
.kit-peek ul { display: grid; gap: 0.3rem; padding-left: 1.2rem; color: var(--pale); font-size: 0.95rem; }
.kit-peek li::marker { color: var(--gold); }
.closing .section-label { justify-content: center; margin-bottom: 0.75rem; }
.closing-sub { max-width: 58ch; }
.closing-tag { margin-top: 1rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--gold); }

/* 2026-10-16b: rotating hero showcase */
.show-tabs { gap: 0.35rem; }
.show-tab { padding: 0.42rem 0.8rem; font-size: 0.8rem; }
.show-progress { display: block; height: 2px; border-radius: 2px; background: oklch(100% 0 0 / 0.14); overflow: hidden; margin: -0.2rem 0 0; }
.show-progress i { display: block; height: 100%; width: 0; background: var(--gold); }
.show-progress.is-run i { animation: showProg var(--show-dur, 4.2s) linear forwards; }
.hero-show:hover .show-progress.is-run i, .hero-show:focus-within .show-progress.is-run i { animation-play-state: paused; }
@keyframes showProg { from { width: 0; } to { width: 100%; } }
.show-panel:not([hidden]) { animation: showIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes showIn { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
.show-panel .shot-frame picture { display: block; overflow: hidden; border-radius: 10px; }
.show-panel:not([hidden]) .shot-frame img { animation: kenBurns 9s ease-out forwards; transform-origin: 50% 30%; }
@keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.045); } }
.shot-kind { display: inline-block; margin-right: 0.55rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--gold); color: var(--navy); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .show-panel:not([hidden]) { animation: none; } .show-panel:not([hidden]) .shot-frame img { animation: none; } .show-progress { display: none; } }

/* 2026-10-16c: Meet the Builder */
.builder-grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .builder-grid { grid-template-columns: minmax(260px, 0.8fr) 1.4fr; } }
.builder-portrait { max-width: 420px; margin: 0; }
.builder-copy { display: grid; gap: 1rem; }
.builder-quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.35; color: var(--white); }
.builder-line { color: var(--pale); line-height: 1.6; max-width: 60ch; }
.builder-facts { list-style: none; margin: 0.25rem 0; padding: 0; display: grid; gap: 0.6rem; }
@media (min-width: 560px) { .builder-facts { grid-template-columns: repeat(3, 1fr); } }
.builder-facts li { display: grid; gap: 0.1rem; padding: 0.85rem 1rem; border-radius: 12px; background: oklch(100% 0 0 / 0.06); border: 1px solid oklch(100% 0 0 / 0.16); }
.builder-facts b { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--gold); }
.builder-facts li:first-child b { font-size: 1.45rem; padding-top: 0.3rem; }
.builder-facts span { font-size: 0.88rem; color: var(--pale); }
.builder-copy .kit-h { color: var(--gold); margin-top: 0.25rem; }
.proj-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.proj-chips a { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid oklch(100% 0 0 / 0.22); color: var(--white); text-decoration: none; font-weight: 600; font-size: 0.92rem; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease); }
.proj-chips a span { font-weight: 400; font-size: 0.78rem; color: var(--gold); }
@media (hover: hover) { .proj-chips a:hover { border-color: var(--gold); background: oklch(100% 0 0 / 0.07); transform: translateY(-1px); } }
.proj-chips a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.show-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }

/* 2026-10-16d: member value */
.nx-navy { color: var(--navy); font-weight: 700; }
.nx-gold-i { color: var(--gold-text); font-style: italic; }
.gains { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; gap: 0.6rem; }
@media (min-width: 640px) { .gains { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gains { grid-template-columns: repeat(5, 1fr); } }
.gains li { display: grid; gap: 0.2rem; padding: 0.85rem 0.95rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); }
.gains b { color: var(--navy); font-weight: 600; }
.gains span { font-size: 0.88rem; line-height: 1.4; color: var(--text-muted); }
.fun-sub { color: var(--pale); line-height: 1.55; max-width: 62ch; }
.fun-note { font-size: 0.82rem; color: var(--pale); opacity: 0.85; }

/* 2026-10-16e: weekly live band */
.live-band { margin-top: clamp(1.75rem, 3vw, 2.5rem); padding: clamp(1.4rem, 3vw, 2rem); border-radius: 16px; background: var(--navy); color: var(--white); display: grid; gap: 0.6rem; border-top: 3px solid var(--gold); }
.live-h { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; }
.live-sub { color: var(--pale); line-height: 1.55; max-width: 62ch; }
.live-tag { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--gold); }
.live-fine { font-size: 0.85rem; color: var(--pale); opacity: 0.9; }

/* 2026-10-16f: balanced four-column footer */
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 2.5rem; } }
@media (min-width: 720px) and (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand-col { grid-column: 1 / -1; } }
.footer-note { margin-top: 1rem; font-size: 0.88rem; line-height: 1.5; color: var(--pale); opacity: 0.85; max-width: 32ch; }
.footer-skool { display: inline-block; margin-top: 0.6rem; color: var(--gold); text-decoration: none; border-bottom: 1px solid oklch(85% 0.12 85 / 0.5); font-size: 0.92rem; }
.footer-skool:hover { border-bottom-color: var(--gold); }

/* 2026-10-16g: real social links in the footer */
.footer-col .socials { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.footer-col .social { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.75rem; border-radius: 999px; border: 1px solid oklch(100% 0 0 / 0.22); color: var(--white); text-decoration: none; font-size: 0.85rem; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); }
.footer-col .social svg { width: 16px; height: 16px; color: var(--gold); }
@media (hover: hover) { .footer-col .social:hover { border-color: var(--gold); background: oklch(100% 0 0 / 0.07); } }
.footer-col .social:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 2026-10-16h: paired CTAs share one width */
.nx-hero-actions, .nx-closing .hero-actions--center { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; width: 100%; max-width: 520px; }
.nx-closing .hero-actions--center { margin-inline: auto; }
.nx-hero-actions .btn, .nx-closing .hero-actions--center .btn { box-sizing: border-box; width: 100%; min-width: 0; text-align: center; white-space: nowrap; padding-inline: 1rem; }
.nx-btn-ghost { border-width: 1.5px; }
@media (max-width: 599px) { .nx-hero-actions, .nx-closing .hero-actions--center { grid-template-columns: 1fr; max-width: none; } .nx-hero-actions .btn, .nx-closing .hero-actions--center .btn { white-space: normal; } }

/* 2026-10-16i: brighter, clearer hero. Flat lifted sapphire, no moving haze, pure white text, bigger small text, bigger tap targets */
.hero--v3 { background: linear-gradient(180deg, #1e3a5f 0%, #182f4d 55%, #15293f 100%); }
.hero--v3::before { background: radial-gradient(60% 55% at 85% 10%, oklch(62% 0.09 250 / 0.35), transparent 70%); }
.hero--v3 .hero-bg { display: none; }
.hero--v3 .hero-title--long { color: #fff; text-shadow: 0 2px 18px oklch(10% 0.04 250 / 0.35); }
.hero--v3 .hero-title--long .nx-gold { color: #E6C06A; }
.hero--v3 .hero-lede { color: #fff; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); line-height: 1.6; max-width: 34rem; }
.hero--v3 .hero-eyebrow { font-size: 0.82rem; color: #E6C06A; letter-spacing: 0.18em; }
.hero--v3 .hero-small { font-size: 0.86rem; color: #E6C06A; letter-spacing: 0.16em; }
.hero--v3 .show-kicker { font-size: 0.82rem; color: #E6C06A; }
.hero--v3 .shot-cap { color: #fff; font-size: 1.02rem; line-height: 1.55; }
.hero--v3 .shot-cap .nx-inline--dark { color: #E6C06A; }
.hero--v3 .show-tab { padding: 0.55rem 0.9rem; font-size: 0.9rem; border-color: oklch(100% 0 0 / 0.4); min-height: 42px; }
.hero--v3 .show-tabs { gap: 0.3rem; }
.hero--v3 .show-progress { background: oklch(100% 0 0 / 0.22); }
.hero--v3 .nx-btn-ghost { border-color: #fff; color: #fff; }
.hero--v3 .shot-frame { box-shadow: 0 30px 70px oklch(10% 0.04 250 / 0.45), 0 0 0 1px oklch(100% 0 0 / 0.5); }
.hero--v3 .shot-glow { opacity: 0.6; }
@media (max-width: 599px) {
  .hero--v3 { padding-top: calc(var(--nav-h) + 1.75rem); }
  .hero--v3 .hero-title--long { font-size: clamp(2.15rem, 9.5vw, 2.6rem); }
  .hero--v3 .hero-lede { font-size: 1.12rem; }
  .hero--v3 .hero-small { font-size: 0.8rem; gap: 0.4rem 0.6rem; }
  .hero--v3 .show-tab { padding: 0.65rem 1rem; font-size: 0.95rem; }
  .hero--v3 .shot-cap { font-size: 1rem; }
  .hero--v3 .hero-actions .btn { min-height: 54px; font-size: 1.05rem; }
}

/* 2026-10-16j: glossy premium polish, site-wide. Sheen on gold, glass cards, pearl light sections, gold hairlines, refined depth */
:root { --gold-hi: #F2D27A; --gold-lo: #B8902E; --pearl: #f7f9fc; --pearl-2: #eef2f7; }
.btn-gold { background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-lo) 100%); color: var(--navy); position: relative; overflow: hidden; box-shadow: 0 1px 0 oklch(100% 0 0 / 0.55) inset, 0 -1px 0 oklch(0% 0 0 / 0.12) inset, 0 10px 26px oklch(75% 0.12 85 / 0.32); }
.btn-gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, oklch(100% 0 0 / 0.45) 50%, transparent 70%); transform: translateX(-130%); transition: transform 0.7s var(--ease); pointer-events: none; }
.btn-gold:hover { background: linear-gradient(180deg, #F6DC8C 0%, #DDB457 55%, var(--gold-lo) 100%); transform: translateY(-2px); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.6) inset, 0 -1px 0 oklch(0% 0 0 / 0.12) inset, 0 16px 34px oklch(75% 0.12 85 / 0.4); }
.btn-gold:hover::after { transform: translateX(130%); }
.nx-btn-ghost { background: oklch(100% 0 0 / 0.04); backdrop-filter: blur(6px); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.12) inset; }
.nx-btn-ghost:hover { background: oklch(100% 0 0 / 0.1); border-color: var(--gold-hi); }
.btn-nav { background: linear-gradient(180deg, oklch(100% 0 0 / 0.06), transparent); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.1) inset; }
.nav[data-state="scrolled"] { background: oklch(16% 0.04 250 / 0.82); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid oklch(85% 0.12 85 / 0.18); }
.section--light { background: linear-gradient(180deg, #ffffff 0%, var(--pearl) 100%); }
.section--cool { background: linear-gradient(180deg, var(--pearl) 0%, var(--pearl-2) 100%); }
.section--dark { background: radial-gradient(90% 60% at 80% 0%, oklch(36% 0.07 250) 0%, transparent 60%), linear-gradient(180deg, #16304d 0%, var(--navy) 60%, #0f2034 100%); }
.section--light, .section--cool { position: relative; }
.section--light::before, .section--cool::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, oklch(75% 0.12 85 / 0.45), transparent); pointer-events: none; }
.section--dark { position: relative; }
.section--dark::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, oklch(85% 0.12 85 / 0.5), transparent); pointer-events: none; }
.section-label::after { background: linear-gradient(90deg, var(--gold), transparent); }
/* Light cards: pearl glass with a soft gold rim on hover */
.paths3 li, .nx-week--v3 li, .gains li, .outcomes li, .bill, .bill-grid li, .nx-plan, .faq-list details { background: linear-gradient(170deg, #ffffff 0%, #f6f8fb 100%); box-shadow: 0 1px 0 #fff inset, 0 12px 32px oklch(26% 0.046 250 / 0.08); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); }
@media (hover: hover) { .paths3 li:hover, .gains li:hover, .outcomes li:hover { transform: translateY(-3px); border-color: oklch(75% 0.12 85 / 0.6); box-shadow: 0 1px 0 #fff inset, 0 22px 48px oklch(26% 0.046 250 / 0.14); } }
/* Dark cards: glass */
.fb-steps li, .kit-peek, .builder-facts li, .live-band, .fun-band, .inside-card--kits { background: linear-gradient(170deg, oklch(100% 0 0 / 0.09), oklch(100% 0 0 / 0.04)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.14) inset, 0 18px 40px oklch(10% 0.04 250 / 0.35); }
.live-band, .fun-band { background: linear-gradient(170deg, #1a3353 0%, var(--navy) 100%); }
/* Membership card: polished */
.nx-plan-price { background: linear-gradient(170deg, #1d3a5e 0%, #12263A 100%); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.14) inset; }
.plan-amount { background: linear-gradient(180deg, #fff 0%, #e9eef5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Images and frames */
.shot-frame, .pf-browser { box-shadow: 0 1px 0 #fff inset, 0 30px 70px oklch(10% 0.04 250 / 0.45), 0 0 0 1px oklch(100% 0 0 / 0.5); }
.nx-portrait img { box-shadow: 0 24px 60px oklch(10% 0.04 250 / 0.5), 0 0 0 1px oklch(85% 0.12 85 / 0.35); }
.proj-chips a, .footer-col .social, .nx-wins-chips li { background: linear-gradient(180deg, oklch(100% 0 0 / 0.08), oklch(100% 0 0 / 0.03)); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.12) inset; }
.show-tab[aria-selected="true"], .shot-kind { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.5) inset, 0 6px 16px oklch(75% 0.12 85 / 0.35); }
/* Display headings: subtle gold shimmer on the accent word */
.display .nx-gold { background: linear-gradient(100deg, var(--gold-lo) 0%, var(--gold) 40%, var(--gold-hi) 60%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section--dark .display .nx-gold, .hero--v3 .hero-title--long .nx-gold, .closing-line .nx-gold { background: linear-gradient(100deg, var(--gold) 0%, var(--gold-hi) 50%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section--light .display .nx-gold, .section--cool .display .nx-gold { background: linear-gradient(100deg, #9a7420 0%, var(--gold-lo) 45%, #c99c38 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Footer */
.footer { background: linear-gradient(180deg, #0f2034 0%, #0b1726 100%); border-top: 1px solid oklch(85% 0.12 85 / 0.25); }
@media (prefers-reduced-motion: reduce) { .btn-gold::after { display: none; } .btn-gold:hover { transform: none; } }

/* 2026-10-16k: the CN monogram joins the wordmark */
.nav-brand { gap: 0.6rem; }
.nav-mono { height: 34px; width: auto; filter: drop-shadow(0 2px 6px oklch(10% 0.04 250 / 0.5)); }
@media (min-width: 900px) { .nav-mono { height: 40px; } }
.nav[data-state="hero"]:not(.is-open) .nav-mono { opacity: 1; }
.footer-brand { align-items: center; gap: 0.75rem; }
.footer-mono { height: 44px; width: auto; }

/* 2026-10-16l: fixes. Get-in cards back to solid navy; week watermark numbers quieter; Skool link as a pill */
.getin-steps li { background: linear-gradient(170deg, #1d3a5e 0%, var(--navy) 100%); color: var(--white); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.14) inset, 0 16px 36px oklch(10% 0.04 250 / 0.3); backdrop-filter: none; -webkit-backdrop-filter: none; }
.getin-steps b { color: var(--white); }
.getin-steps span { color: var(--pale); }
.nx-months li::after { color: oklch(75.2% 0.122 84.8 / 0.11); right: 0.6rem; top: -0.2rem; font-size: clamp(3.6rem, 3rem + 2vw, 5rem); }
.footer-skool { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.75rem; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid oklch(85% 0.12 85 / 0.55); background: linear-gradient(180deg, oklch(100% 0 0 / 0.08), oklch(100% 0 0 / 0.03)); color: var(--white); font-size: 0.9rem; font-weight: 600; text-decoration: none; box-shadow: 0 1px 0 oklch(100% 0 0 / 0.12) inset; }
.footer-skool::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.footer-skool:hover { border-color: var(--gold); background: oklch(100% 0 0 / 0.1); }

/* 2026-10-16m: brand sequence Learn · Build · Earn */
.footer-seq { margin: 0.9rem 0 0.6rem; display: flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.footer-seq i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0.8; }
.hero--v3 .hero-small { letter-spacing: 0.26em; font-size: 0.95rem; gap: 0.6rem 0.9rem; }

/* 2026-10-16n: week cards get a real gold number badge; money tiles get depth */
.nx-months--4 li::after { display: none; }
.nx-months--4 li { border-top: 3px solid var(--gold); padding-top: 1.4rem; background: linear-gradient(170deg, #ffffff 0%, #f4f7fb 100%); box-shadow: 0 1px 0 #fff inset, 0 14px 36px oklch(26.3% 0.046 250 / 0.1); }
.nx-months--4 li::before { content: "0" counter(nxm); position: absolute; top: 1.1rem; right: 1.1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--navy); background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.55) inset, 0 6px 14px oklch(75% 0.12 85 / 0.4); }
.nx-months--4 .nx-month-n { padding-right: 3rem; }
@media (hover: hover) { .nx-months--4 li:hover { transform: translateY(-4px); box-shadow: 0 1px 0 #fff inset, 0 24px 52px oklch(26.3% 0.046 250 / 0.16); border-color: oklch(75% 0.12 85 / 0.6); } }
.bill { background: linear-gradient(170deg, #ffffff 0%, #f3f6fa 100%); box-shadow: 0 1px 0 #fff inset, 0 18px 44px oklch(26.3% 0.046 250 / 0.1); }
.bill-grid li { position: relative; padding-left: 1.1rem; border-top: 3px solid var(--gold); background: #fff; box-shadow: 0 1px 0 #fff inset, 0 10px 24px oklch(26.3% 0.046 250 / 0.08); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.bill-grid b { font-family: var(--font-display); font-size: 1.2rem; }
@media (hover: hover) { .bill-grid li:hover { transform: translateY(-3px); box-shadow: 0 1px 0 #fff inset, 0 18px 40px oklch(26.3% 0.046 250 / 0.14); } }

/* 2026-10-16o: founding price */
.plan-badge { display: inline-block; margin: 0.4rem 0 0.6rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--navy); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 1px 0 oklch(100% 0 0 / 0.5) inset, 0 6px 14px oklch(75% 0.12 85 / 0.35); }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.6rem; }
.plan-was { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--pale); opacity: 0.75; text-decoration: line-through; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.plan-founding { margin-top: 0.6rem; font-size: 0.9rem; line-height: 1.5; color: var(--pale); max-width: 32ch; }

/* 2026-10-16p: member referrals */
.refer { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: 16px; background: linear-gradient(170deg, #1d3a5e 0%, var(--navy) 100%); color: var(--white); border-top: 3px solid var(--gold); display: grid; gap: 1.1rem; box-shadow: 0 1px 0 oklch(100% 0 0 / 0.14) inset, 0 18px 44px oklch(10% 0.04 250 / 0.3); }
@media (min-width: 900px) { .refer { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 2rem; } .refer-fine { grid-column: 1 / -1; } }
.refer-copy { display: grid; gap: 0.6rem; }
.refer .kit-h { color: var(--gold); }
.refer-h { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; }
.refer-sub { color: var(--pale); line-height: 1.55; max-width: 48ch; }
.refer-sub b { color: var(--gold-hi); font-weight: 700; }
.refer-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; counter-reset: rf; }
.refer-steps li { counter-increment: rf; position: relative; display: grid; gap: 0.1rem; padding: 0.75rem 0.9rem 0.75rem 3.1rem; border-radius: 12px; background: oklch(100% 0 0 / 0.07); border: 1px solid oklch(100% 0 0 / 0.16); }
.refer-steps li::before { content: counter(rf); position: absolute; left: 0.8rem; top: 0.75rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--navy); font-weight: 700; font-size: 0.85rem; }
.refer-steps b { font-family: var(--font-display); font-size: 1.05rem; }
.refer-steps span { font-size: 0.88rem; color: var(--pale); }
.refer-fine { font-size: 0.85rem; color: var(--pale); }
.refer-fine a { color: var(--gold); }

/* 2026-10-16q: Pricing dropdown */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; color: inherit; font: inherit; padding: 0.4rem 0; }
.nav-dd-btn i { width: 0.45rem; height: 0.45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--ease); }
.nav-dd.is-open .nav-dd-btn i { transform: translateY(1px) rotate(225deg); }
.nav-dd-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.nav-dd-menu { position: absolute; top: calc(100% + 0.9rem); left: 50%; transform: translateX(-50%); min-width: 300px; padding: 0.5rem; border-radius: 14px; background: oklch(16% 0.04 250 / 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid oklch(85% 0.12 85 / 0.3); box-shadow: 0 24px 60px oklch(10% 0.04 250 / 0.6); z-index: 50; }
.nav-dd-menu::before { content: ""; position: absolute; left: 50%; top: -0.55rem; width: 1rem; height: 1rem; transform: translateX(-50%) rotate(45deg); background: oklch(16% 0.04 250 / 0.96); border-left: 1px solid oklch(85% 0.12 85 / 0.3); border-top: 1px solid oklch(85% 0.12 85 / 0.3); }
.nav-dd::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1rem; }
.nav-dd-menu a { display: grid; gap: 0.1rem; padding: 0.7rem 0.9rem; border-radius: 10px; color: var(--white); text-decoration: none; }
.nav-dd-menu a b { font-weight: 600; font-size: 0.95rem; }
.nav-dd-menu a span { font-size: 0.8rem; color: var(--pale); }
.nav-dd-menu a:hover, .nav-dd-menu a:focus-visible { background: oklch(100% 0 0 / 0.08); outline: none; }
.nav-dd-menu a:hover b, .nav-dd-menu a:focus-visible b { color: var(--gold-hi); }
.mm-sub { display: grid; gap: 0.2rem; padding: 0 0 0.6rem 1rem; margin-top: -0.3rem; }
.mm-sub a { display: flex !important; align-items: center; gap: 0.6rem; font-size: 1rem; color: var(--navy); padding: 0.45rem 0 !important; border: 0 !important; }
.mm-sub a::before { content: ""; width: 14px; height: 2px; background: var(--gold); flex: 0 0 auto; }

/* 2026-10-16r: Pricing nav item matches the other links in weight and colour */
.nav-links .nav-dd-btn { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; color: var(--white); opacity: 1; position: relative; }
.nav-links .nav-dd-btn::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--gold); transition: right 0.3s var(--ease); }
.nav-dd:hover .nav-dd-btn::after, .nav-dd.is-open .nav-dd-btn::after { right: 0; }
.nav-dd-btn i { border-color: var(--gold); border-width: 2px; }
@media (min-width: 900px) and (max-width: 1160px) { .nav-links .nav-dd-btn { font-size: 0.88rem; } }

/* 2026-10-17: Join us on Skool, top and bottom */
.btn-nav--skool { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); color: var(--navy) !important; border-color: transparent !important; box-shadow: 0 1px 0 oklch(100% 0 0 / 0.55) inset, 0 8px 20px oklch(75% 0.12 85 / 0.3); }
.nav[data-state="hero"] .btn-nav--skool { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); color: var(--navy); }
.btn-nav--skool:hover { transform: translateY(-1px); }
@media (min-width: 900px) and (max-width: 1319px) { .btn-nav--skool { display: none; } }
.mm-skool { margin-top: 0.6rem; background: transparent; border: 1.5px solid var(--gold); color: var(--navy); justify-content: center; }
.footer-skool-btn { margin-top: 0.75rem; font-size: 0.9rem; padding: 0.65rem 1.1rem; }
.closing-skool { margin-top: 1.5rem; font-size: 0.98rem; color: var(--pale); }
.closing-skool a { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: oklch(85% 0.12 85 / 0.5); }
.closing-skool a:hover { text-decoration-color: var(--gold); }

/* 2026-10-17b: membership experience, Nexus Clinics */
.method-sig { margin-top: clamp(1.25rem, 3vw, 2rem); font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.45rem); color: var(--navy); }
.clinic { margin-top: clamp(1.75rem, 3vw, 2.5rem); padding: clamp(1.25rem, 3vw, 1.9rem); border-radius: 16px; background: linear-gradient(170deg, #ffffff 0%, #f3f6fa 100%); border: 1px solid var(--line); border-top: 3px solid var(--gold); box-shadow: 0 1px 0 #fff inset, 0 18px 44px oklch(26.3% 0.046 250 / 0.1); display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .clinic { grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: start; } }
.clinic-copy { display: grid; gap: 0.6rem; }
.clinic-h { font-family: var(--font-display); font-size: clamp(1.4rem, 2.3vw, 1.9rem); line-height: 1.12; color: var(--navy); }
.clinic-sub { color: var(--text); line-height: 1.6; }
.clinic-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.clinic-facts li { position: relative; padding: 0.6rem 0.8rem 0.6rem 2.1rem; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 0.93rem; line-height: 1.45; color: var(--text); }
.clinic-facts li::before { content: ""; position: absolute; left: 0.8rem; top: 0.95rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }

/* 2026-10-17c: positioning transformation. Tech-savvy section, four create cards, Saturday cards, wins */
.easy-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 960px) { .easy-grid { grid-template-columns: 1.15fr 1fr; } }
.easy-copy { display: grid; gap: 0.9rem; }
.easy-copy > p { font-size: 1.1rem; line-height: 1.6; color: var(--text); max-width: 48ch; }
.easy-quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 1.9vw, 1.5rem) !important; color: var(--gold-text) !important; line-height: 1.35 !important; }
.easy-pills { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.easy-pills li { display: grid; gap: 0.2rem; padding: 1rem 1.1rem 1rem 3.2rem; position: relative; border-radius: 14px; background: linear-gradient(170deg, #ffffff, #f4f7fb); border: 1px solid var(--line); border-left: 4px solid var(--gold); box-shadow: 0 1px 0 #fff inset, 0 12px 30px oklch(26.3% 0.046 250 / 0.08); }
.easy-pills li::before { content: ""; position: absolute; left: 1rem; top: 1.15rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 4px 10px oklch(75% 0.12 85 / 0.4); }
.easy-pills li::after { content: ""; position: absolute; left: 1.42rem; top: 1.45rem; width: 0.45rem; height: 0.25rem; border-left: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(-45deg); }
.easy-pills b { color: var(--navy); font-size: 1.05rem; font-weight: 700; }
.easy-pills span { color: var(--text-muted); font-size: 0.93rem; }
.create4 { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .create4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .create4 { grid-template-columns: repeat(4, 1fr); } }
.create4 li { display: grid; grid-template-rows: auto 1fr; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 #fff inset, 0 14px 36px oklch(26.3% 0.046 250 / 0.1); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
@media (hover: hover) { .create4 li:hover { transform: translateY(-4px); box-shadow: 0 1px 0 #fff inset, 0 24px 52px oklch(26.3% 0.046 250 / 0.16); } }
.create4 picture { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0b1524; border-bottom: 3px solid var(--gold); }
.create4 img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.create4 li > div { padding: 1rem 1.1rem 1.2rem; display: grid; gap: 0.3rem; }
.create-k { font-family: var(--font-display); font-size: 1.2rem; color: var(--navy); line-height: 1.15; }
.create4 li > div p:not(.create-k) { font-size: 0.95rem; line-height: 1.5; color: var(--text); }
.sat { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; gap: 1rem; counter-reset: sat; }
@media (min-width: 640px) { .sat { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sat { grid-template-columns: repeat(4, 1fr); } }
.sat li { position: relative; display: grid; gap: 0.4rem; align-content: start; padding: 1.4rem 1.3rem 1.5rem; border-radius: 16px; background: linear-gradient(170deg, #1d3a5e 0%, var(--navy) 100%); color: var(--white); border-top: 3px solid var(--gold); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.14) inset, 0 18px 44px oklch(10% 0.04 250 / 0.3); transition: transform 0.35s var(--ease); }
@media (hover: hover) { .sat li:hover { transform: translateY(-4px); } }
.sat-n { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.sat h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.sat p { color: var(--pale); font-size: 0.95rem; line-height: 1.5; }
.sat li::after { content: counter(sat, decimal-leading-zero); counter-increment: sat; position: absolute; right: 1rem; top: 0.9rem; font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: oklch(85% 0.12 85 / 0.25); }
.wins { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; gap: 0.8rem; }
@media (min-width: 560px) { .wins { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .wins { grid-template-columns: repeat(6, 1fr); } }
.wins li { position: relative; padding: 1.1rem 0.9rem; border-radius: 14px; text-align: center; background: #fff; border: 1px dashed oklch(75% 0.12 85 / 0.6); color: var(--navy); font-weight: 600; font-size: 0.95rem; }
.wins li::before { content: "Coming soon"; display: block; margin-bottom: 0.4rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); }
.wins-note { margin-top: 1rem; font-size: 0.92rem; color: var(--text-muted); }
.plan-list li b { color: var(--navy); font-weight: 600; }
.plan-excl b { color: var(--navy); font-weight: 600; }

/* 2026-10-17d: six-category gallery */
@media (min-width: 1100px) { .create6 { grid-template-columns: repeat(3, 1fr); } }
.create-ex { font-size: 0.74rem !important; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text) !important; margin-top: 0.35rem; }

/* 2026-10-18: footer Skool button text matches the header button */
.footer .footer-skool-btn, .footer .footer-skool-btn:hover, .footer .footer-skool-btn:focus-visible { color: var(--navy) !important; font-weight: 600; }

/* ==========================================================================
   2026-10-21 SAPPHIRE PALETTE, borrowed from clinical-pivot.com (her call: "I love the colours").
   Royal Sapphire #172D76, Luminous Gold #E5B94E, Champagne #F0D69B, Midnight Ink #17172D, white header,
   pill buttons. Appended last so it wins the cascade. Fonts unchanged.
   ========================================================================== */
:root {
  --navy: #172D76; --navy-900: #11235E; --navy-700: #1C377F; --navy-600: #1E3A86;
  --gold: #E5B94E; --gold-hi: #F0D69B; --gold-lo: #C9962E; --gold-hover: #F0D69B; --gold-text: #8A6A2E;
  --ink: #17172D; --text: #3A3A55; --text-muted: #5B5B73;
  --pale: #D9DEF3; --navy-soft: #1C377F; --navy-line: #2A3F8C; --blue-glow: #2B4A9E;
  --pearl: #F5F7FC; --pearl-2: #EAEEF8; --white-cool: #F5F7FC; --white-cool-2: #EAEEF8; --line: #DCE2F0; --line-strong: #C5CDE6;
}
/* headings in midnight ink on light bands, sapphire kept for small labels */
.section--light .display, .section--cool .display, .section--light h3, .section--cool h3, .faq-list summary { color: var(--ink); }
/* hero and dark bands: sapphire with a whisper of purple, like the Clinical Pivot hero */
.hero--v3 { background: radial-gradient(80% 60% at 10% 0%, rgba(64,32,110,.35), transparent 60%), linear-gradient(170deg, #1E3A86 0%, #172D76 48%, #11235E 100%); }
.hero--v3::before { background: radial-gradient(70% 60% at 92% 8%, rgba(229,185,78,.14), transparent 62%); }
.section--dark { background: radial-gradient(90% 60% at 80% 0%, #1E3A86 0%, transparent 60%), linear-gradient(180deg, #1C377F 0%, #172D76 55%, #11235E 100%); }
.hero--v3 .hero-title--long .nx-gold, .section--dark .display .nx-gold, .closing-line .nx-gold, .hero--v3 .hero-eyebrow, .hero--v3 .hero-small, .hero--v3 .show-kicker { color: #F0D69B; background: none; -webkit-background-clip: initial; background-clip: initial; }
.hero--v3 .hero-lede, .hero--v3 .shot-cap { color: #E8ECF9; }
.getin-steps li, .nx-plan-price, .refer, .fun-band, .live-band, .sat li, .fb-steps li { background: linear-gradient(170deg, #1E3A86 0%, #172D76 100%); }
.footer { background: linear-gradient(180deg, #11235E 0%, #0D1B4A 100%); border-top-color: rgba(240,214,155,.35); }
/* white header, always */
.nav, .nav[data-state="hero"], .nav[data-state="scrolled"], .nav.is-open { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid #E3E7F3; box-shadow: 0 1px 0 rgba(23,45,118,.04), 0 8px 24px -20px rgba(23,45,118,.35); }
.nav .nav-links a:not(.btn), .nav[data-state="hero"] .nav-links a:not(.btn), .nav[data-state="scrolled"] .nav-links a:not(.btn), .nav-links .nav-dd-btn, .nav .nav-toggle, .nav[data-state="hero"] .nav-toggle { color: #3A3A55; }
.nav .nav-links a:not(.btn):hover, .nav-links .nav-dd-btn:hover { color: var(--navy); }
.nav-links a.is-active { color: var(--navy); }
.nav-dd-btn i { border-color: var(--gold); }
.nav-mono { filter: none; }
.nav .btn-nav, .nav[data-state="hero"] .btn-nav { background: transparent; border: 1px solid rgba(23,45,118,.3); color: var(--navy); border-radius: 999px; box-shadow: none; }
.nav .btn-nav:hover, .nav[data-state="hero"] .btn-nav:hover { background: var(--navy); color: #FFF; border-color: var(--navy); }
.nav-dd-menu { background: #FFFFFF; border: 1px solid #E3E7F3; box-shadow: 0 24px 60px rgba(23,45,118,.18); backdrop-filter: none; }
.nav-dd-menu::before { background: #FFFFFF; border-color: #E3E7F3; }
.nav-dd-menu a { color: var(--ink); } .nav-dd-menu a span { color: var(--text-muted); }
.nav-dd-menu a:hover, .nav-dd-menu a:focus-visible { background: #FFF8E3; } .nav-dd-menu a:hover b { color: var(--navy); }
/* pill buttons in Velour gold, text in deep sapphire, no sheen sweep */
.btn { border-radius: 999px; }
.btn-gold, .btn-nav--skool, .footer-skool-btn, .mm-skool { background: linear-gradient(180deg, #F0D69B, #E5B94E); color: var(--navy-900) !important; border-color: transparent; box-shadow: 0 8px 22px -10px rgba(229,185,78,.8); }
.btn-gold:hover, .btn-nav--skool:hover { background: #E5B94E; transform: none; box-shadow: 0 8px 22px -10px rgba(229,185,78,.9); }
.btn-gold::after { display: none; }
.nx-btn-ghost { background: #FFF; color: var(--navy) !important; border-color: #FFF; backdrop-filter: none; box-shadow: 0 8px 22px -14px rgba(0,0,0,.5); }
.nx-btn-ghost:hover { background: #F0D69B; border-color: #F0D69B; color: var(--navy-900) !important; }
.mm-skool { border: 0; }
/* light surfaces and cards */
.section--light { background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FC 100%); }
.section--cool { background: linear-gradient(180deg, #F5F7FC 0%, #EAEEF8 100%); }
.section--light::before, .section--cool::before, .section--dark::before { background: linear-gradient(90deg, transparent, rgba(229,185,78,.55), transparent); }
.easy-pills li, .clinic, .bill, .bill-grid li, .nx-months li, .create4 li, .nx-week--v3 li, .faq-list details, .wins li, .outcomes li, .paths3 li { border-color: var(--line); }
.plan-amount { background: linear-gradient(180deg, #FFF 0%, #F0D69B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-badge, .show-tab[aria-selected="true"], .shot-kind, .nx-months--4 li::before, .getin-steps li::before, .fb-steps li::before, .refer-steps li::before, .easy-pills li::before { background: linear-gradient(180deg, #F0D69B, #E5B94E); color: var(--navy-900); }
.proj-chips a span, .builder-facts b, .kit-h, .refer .kit-h, .fun-band .nx-gold, .sat-n, .fb-when b, .refer-sub b, .footer-h, .footer-seq, .wins li::before, .create-ex, .section-label, .nx-month-n { color: var(--gold-text); }
.section--dark .kit-h, .section--dark .section-label, .section--dark .sat-n, .section--dark .fb-when b, .section--dark .refer-sub b, .section--dark .builder-facts b, .section--dark .proj-chips a span, .footer-h, .footer-seq, .refer .kit-h, .fun-band .fun-h .nx-gold, .live-band .nx-gold, .nx-plan-price .plan-name, .nx-plan-inc-h, .hero--v3 .section-label { color: #F0D69B; }
.nx-plan-inc-h { color: var(--gold-text); }
.wins li { border-color: rgba(229,185,78,.7); }
/* mobile menu */
.mobile-menu { color: var(--ink); } .mobile-menu .mm-title { color: var(--ink); }
.nav .btn-nav--skool, .nav[data-state="hero"] .btn-nav--skool, .nav .btn-nav--skool:hover { background: linear-gradient(180deg, #F0D69B, #E5B94E); color: var(--navy-900) !important; border-color: transparent; box-shadow: 0 4px 14px -6px rgba(229,185,78,.7); }
.section--light .sat h3, .sat h3, .section--light .getin-steps b, .section--light .refer-steps b, .section--light .fb-steps b { color: #FFFFFF; }

/* 2026-10-21b: her call, keep the dark header over the sapphire palette */
.nav, .nav[data-state="hero"], .nav[data-state="scrolled"], .nav.is-open { background: rgba(17,35,94,.94); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid rgba(240,214,155,.22); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.nav .nav-links a:not(.btn), .nav[data-state="hero"] .nav-links a:not(.btn), .nav[data-state="scrolled"] .nav-links a:not(.btn), .nav-links .nav-dd-btn, .nav .nav-toggle, .nav[data-state="hero"] .nav-toggle, .nav[data-state="scrolled"] .nav-toggle { color: #FFFFFF; }
.nav .nav-links a:not(.btn):hover, .nav-links .nav-dd-btn:hover, .nav-links a.is-active { color: #F0D69B; }
.nav .btn-nav, .nav[data-state="hero"] .btn-nav { background: transparent; border: 1px solid #F0D69B; color: #F0D69B; }
.nav .btn-nav:hover, .nav[data-state="hero"] .btn-nav:hover { background: #F0D69B; color: var(--navy-900); border-color: #F0D69B; }
.nav-mono { filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.nav-dd-menu { background: rgba(17,35,94,.97); border: 1px solid rgba(240,214,155,.3); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.nav-dd-menu::before { background: rgba(17,35,94,.97); border-color: rgba(240,214,155,.3); }
.nav-dd-menu a { color: #FFFFFF; } .nav-dd-menu a span { color: #D9DEF3; }
.nav-dd-menu a:hover, .nav-dd-menu a:focus-visible { background: rgba(255,255,255,.08); } .nav-dd-menu a:hover b { color: #F0D69B; }
.nav .btn-nav--skool, .nav[data-state="hero"] .btn-nav--skool, .nav[data-state="scrolled"] .btn-nav--skool, .nav .btn-nav--skool:hover { background: linear-gradient(180deg, #F0D69B, #E5B94E); color: var(--navy-900) !important; border-color: transparent; }

/* 2026-10-21c: footer bottom bar. Separated from the closing band, legible copyright line, gold hairline */
.footer { background: linear-gradient(180deg, #1C377F 0%, #172D76 14%, #11235E 100%); border-top: 1px solid rgba(240,214,155,.45); }
.footer-grid { border-bottom: 1px solid rgba(240,214,155,.28); }
.footer-bottom { padding-top: 1.4rem; font-size: 0.9rem; }
.footer-copy { color: #D9DEF3; }
.footer-copy:last-child { font-style: normal; color: #B3BCE3; }
.footer-line, .footer-note { color: #D9DEF3; }

/* 2026-10-21d: six-section homepage */
.hero-sig { margin-top: 0.9rem; display: flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: #F0D69B; }
.hero-sig i { width: 4px; height: 4px; border-radius: 50%; background: #F0D69B; }
.hero--v3 .hero-small { color: #E8ECF9; letter-spacing: 0.04em; text-transform: none; font-weight: 500; font-size: 0.95rem; }
.hero--v3 .hero-small i { background: #F0D69B; }
.proofs--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .proofs--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .proofs--4 { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.proofs--4 .proof-body { padding: 1rem 1.1rem 1.2rem; gap: 0.35rem; }
.proofs--4 .proof-body h3 { font-size: 1.2rem; }
.nx-story--tight { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.nx-story--tight .nx-portrait { max-width: 240px; }
.nx-story--tight .nx-founder-copy p:first-child { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.45rem); color: var(--white); }
.sat--3 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .sat--3 { grid-template-columns: repeat(3, 1fr); } }
.plan-list--2col { display: grid; gap: 0.5rem 1rem; }
@media (min-width: 640px) { .plan-list--2col { grid-template-columns: 1fr 1fr; } }
.plan-after { margin-top: 1rem; font-size: 0.9rem; line-height: 1.5; color: var(--pale); }
.plan-after b { color: #F0D69B; }
.closing-sub { font-size: 1.1rem; }
.hero--v3 .hero-small { max-width: none; letter-spacing: 0; font-size: 0.92rem; gap: 0.4rem 0.6rem; white-space: nowrap; }
@media (max-width: 599px) { .hero--v3 .hero-small { white-space: normal; row-gap: 0.3rem; } }

/* ===== 2026-10-22 examples gallery + founder depth ===== */
.ex-grid { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .ex-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ex-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.ex-grid li { display: grid; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 #fff inset, 0 14px 36px oklch(26.3% 0.046 250 / 0.1); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
@media (hover: hover) { .ex-grid li:hover { transform: translateY(-4px); box-shadow: 0 1px 0 #fff inset, 0 24px 52px oklch(26.3% 0.046 250 / 0.16); } }
.ex-grid picture { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: #eef2f7; }
.ex-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-grid li > div { padding: 1rem 1.15rem 1.2rem; display: grid; gap: 0.3rem; align-content: start; }
.ex-tag { display: inline-block; justify-self: start; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); background: var(--gold-hi); border-radius: 999px; padding: 0.25rem 0.6rem; margin-bottom: 0.15rem; }
.ex-k { font-family: var(--font-display); font-size: 1.2rem; color: var(--navy); line-height: 1.15; }
.ex-grid li > div p:not(.ex-k) { font-size: 0.95rem; line-height: 1.5; color: var(--text); }

.fp { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid oklch(100% 0 0 / 0.14); }
.fp--first { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); padding-top: 0; border-top: 0; }
.fp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 1rem; }
.fp-head h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.7rem); color: var(--white); line-height: 1.15; }
.fp-head p { color: oklch(100% 0 0 / 0.78); font-size: 1rem; margin-top: 0.15rem; }
.fp-head .link-arrow { font-size: 0.95rem; }
.fp-tiles, .fp-covers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .fp-tiles { grid-template-columns: repeat(3, 1fr); } }
.fp-tiles a { display: block; border-radius: 16px; overflow: hidden; background: #0b1524; border: 1px solid oklch(100% 0 0 / 0.16); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); text-decoration: none; }
@media (hover: hover) { .fp-tiles a:hover, .fp-covers a:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.36); } }
.fp-tiles picture { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.fp-tiles img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.fp-tiles span, .fp-covers span { display: block; padding: 0.75rem 0.95rem 0.85rem; color: var(--white); font-weight: 700; font-size: 1rem; line-height: 1.25; }
.fp-tiles small, .fp-covers small { display: block; font-weight: 500; font-size: 0.85rem; color: oklch(100% 0 0 / 0.7); margin-top: 0.15rem; }
.fp-covers { grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
@media (min-width: 900px) { .fp-covers { grid-template-columns: repeat(6, 1fr); } }
.fp-covers a { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 1; background: #0b1524; border: 1px solid oklch(100% 0 0 / 0.16); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.fp-covers img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-covers span { padding: 0.55rem 0.15rem 0; font-size: 0.92rem; }
.fp-covers small { font-size: 0.8rem; }

/* ===== 2026-10-22b hero example reel + founder marquee + learn ledger + compare ===== */
.reel-frame { cursor: default; }
.reel-slides { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #0b1524; }
.reel-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity 0.9s var(--ease), transform 1.6s var(--ease); pointer-events: none; }
.reel-slide.is-on { opacity: 1; transform: scale(1); pointer-events: auto; z-index: 1; }
.reel-slide picture, .reel-slide img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.reel-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1rem 0.9rem; background: linear-gradient(180deg, transparent, oklch(12% 0.04 265 / 0.8)); color: #fff; font-weight: 700; font-size: 1.02rem; line-height: 1.25; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.reel-slide figcaption .ex-tag { margin: 0; }
.ex-tag { display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-900); background: linear-gradient(180deg, #F0D69B, #E5B94E); border-radius: 999px; padding: 0.28rem 0.6rem; }
.reel-dots { list-style: none; margin: -0.25rem 0 0; padding: 0; display: flex; justify-content: center; gap: 0.5rem; }
.reel-dots button { width: 28px; height: 6px; border-radius: 999px; border: 0; background: oklch(100% 0 0 / 0.3); cursor: pointer; padding: 0; transition: background 0.3s var(--ease), width 0.3s var(--ease); }
.reel-dots button[aria-current="true"] { background: linear-gradient(90deg, #F0D69B, #E5B94E); width: 44px; }
.reel-dots button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hero-reel .shot-cap { text-align: center; }
@media (prefers-reduced-motion: reduce) { .reel-slide { transition: none; transform: none; } }

.cat4 { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .cat4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cat4 { grid-template-columns: repeat(4, 1fr); } }
.cat4 li { position: relative; display: grid; gap: 0.35rem; align-content: start; padding: 1.35rem 1.25rem 1.4rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 #fff inset, 0 14px 36px oklch(26.3% 0.046 250 / 0.1); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
@media (hover: hover) { .cat4 li:hover { transform: translateY(-4px); box-shadow: 0 1px 0 #fff inset, 0 24px 52px oklch(26.3% 0.046 250 / 0.16); } }
.cat4 li i { display: inline-grid; place-items: center; justify-self: start; width: 44px; height: 44px; border-radius: 12px; font-style: normal; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--navy-900); background: linear-gradient(180deg, #F0D69B, #E5B94E); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.5) inset, 0 6px 16px oklch(75% 0.12 85 / 0.35); margin-bottom: 0.5rem; }
.cat4 li p:not(.create-k) { font-size: 0.95rem; line-height: 1.5; color: var(--text); }

.mq { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; overflow: hidden; max-width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-row { display: flex; width: max-content; gap: 1rem; will-change: transform; }
.mq-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; flex: none; }
.mq-row--left { animation: mq-left 84s linear infinite; }
.mq-row--right { animation: mq-right 92s linear infinite; }
@keyframes mq-left { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 0.5rem)); } }
@keyframes mq-right { from { transform: translateX(calc(-50% - 0.5rem)); } to { transform: translateX(0); } }
@media (hover: hover) { .mq:hover .mq-row { animation-play-state: paused; } }
.mq-item { flex: none; height: clamp(170px, 24vw, 280px); }
.mq-item--wide { aspect-ratio: 16 / 10; }
.mq-item--sq { aspect-ratio: 1; }
.mq-item a { position: relative; display: block; height: 100%; border-radius: 16px; overflow: hidden; background: #0b1524; border: 1px solid oklch(100% 0 0 / 0.18); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.25) inset, 0 18px 44px rgba(0, 0, 0, 0.35); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
@media (hover: hover) { .mq-item a:hover { transform: translateY(-5px); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.35) inset, 0 26px 56px rgba(0, 0, 0, 0.45); } }
.mq-item picture, .mq-item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mq-cap { position: absolute; left: 0.75rem; bottom: 0.75rem; max-width: calc(100% - 1.5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.75rem 0.3rem 0.3rem; border-radius: 999px; background: oklch(100% 0 0 / 0.93); color: var(--navy-900); font-size: 0.86rem; font-weight: 600; line-height: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.mq-cap b { display: inline-block; padding: 0.32rem 0.55rem; border-radius: 999px; background: linear-gradient(180deg, #F0D69B, #E5B94E); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.mq-links { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; }
.mq-links .link-arrow { font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) { .mq { -webkit-mask-image: none; mask-image: none; overflow-x: auto; } .mq-row { animation: none; } .mq-track[aria-hidden="true"] { display: none; } }

.path3 { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 860px) { .path3 { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.path3 > li { position: relative; padding: 1.5rem 1.5rem 1.6rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 #fff inset, 0 18px 44px oklch(26.3% 0.046 250 / 0.12); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
@media (hover: hover) { .path3 > li:hover { transform: translateY(-4px); box-shadow: 0 1px 0 #fff inset, 0 26px 56px oklch(26.3% 0.046 250 / 0.18); } }
.path3-k { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); line-height: 1; margin: 0 0 1rem; }
.path3-k i { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-style: normal; font-family: var(--font-body, inherit); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--navy-900); background: linear-gradient(180deg, #F0D69B, #E5B94E); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.5) inset, 0 6px 16px oklch(75% 0.12 85 / 0.35); }
.path3 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.path3 ul li { position: relative; padding-left: 1.5rem; font-size: 1rem; line-height: 1.45; color: var(--text); }
.path3 ul li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: linear-gradient(180deg, #F0D69B, #E5B94E); box-shadow: 0 2px 6px oklch(75% 0.12 85 / 0.35); }
@media (min-width: 860px) { .path3 > li:not(:last-child)::after { content: ""; position: absolute; right: -0.95rem; top: 50%; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--gold); transform: translateY(-50%); } }

.nx-why { background: linear-gradient(180deg, #11235E, #172D76); }
.nx-why .container { min-width: 0; }
.cmp-wrap { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: block; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 20px; border: 1px solid oklch(100% 0 0 / 0.16); background: oklch(100% 0 0 / 0.04); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.12) inset, 0 24px 60px rgba(0, 0, 0, 0.35); }
.cmp { width: 100%; min-width: 600px; border-collapse: separate; border-spacing: 0; color: #fff; }
.cmp th, .cmp td { padding: 0.95rem 0.85rem; text-align: center; border-bottom: 1px solid oklch(100% 0 0 / 0.1); font-size: 0.95rem; }
.cmp thead th { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(100% 0 0 / 0.75); padding-top: 1.1rem; padding-bottom: 1.1rem; }
.cmp thead th.is-us { color: var(--navy-900); background: linear-gradient(180deg, #F0D69B, #E5B94E); border-radius: 14px 14px 0 0; box-shadow: 0 10px 30px oklch(75% 0.12 85 / 0.35); }
.cmp tbody th { text-align: left; font-weight: 600; color: #fff; }
.cmp td.is-us { background: oklch(100% 0 0 / 0.07); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td { position: relative; }
.cmp td i { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.cmp td.is-yes i { background: linear-gradient(180deg, #F0D69B, #E5B94E); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.5) inset, 0 6px 16px oklch(75% 0.12 85 / 0.35); }
.cmp td.is-yes i::before { content: ""; width: 9px; height: 15px; border: solid var(--navy-900); border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }
.cmp td.is-no i { background: oklch(100% 0 0 / 0.1); border: 1px solid oklch(100% 0 0 / 0.22); }
.cmp td.is-no i::before { content: "\00d7"; color: oklch(100% 0 0 / 0.55); font-size: 1.1rem; line-height: 1; }
.cmp-note { margin-top: 1rem; text-align: center; color: oklch(100% 0 0 / 0.78); font-size: 0.95rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== 2026-10-22e hero example carousel, one at a time ===== */
.hero-reel { gap: 0.8rem; }
.reel-slides { isolation: isolate; }
.reel-slide { opacity: 0; transform: translateX(60%); transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.6s var(--ease); will-change: transform, opacity; }
.reel-slide.is-on { opacity: 1; transform: translateX(0); z-index: 2; }
.reel-slide.is-out { opacity: 0; transform: translateX(-40%); z-index: 1; }
.reel-slides.is-back .reel-slide { transform: translateX(-60%); }
.reel-slides.is-back .reel-slide.is-on { transform: translateX(0); }
.reel-slides.is-back .reel-slide.is-out { transform: translateX(40%); }
.reel-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.reel-cap { display: flex; align-items: center; gap: 0.6rem; min-width: 0; color: #fff; font-size: 1rem; margin: 0; }
.reel-cap .reel-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-nav { display: inline-flex; align-items: center; gap: 0.35rem; flex: none; }
.reel-nav button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid oklch(100% 0 0 / 0.35); background: oklch(100% 0 0 / 0.08); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 2px; transition: background 0.25s var(--ease), border-color 0.25s var(--ease); }
.reel-nav button:hover { background: oklch(100% 0 0 / 0.18); border-color: oklch(100% 0 0 / 0.6); }
.reel-nav button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.reel-count { color: oklch(100% 0 0 / 0.75); font-size: 0.85rem; font-variant-numeric: tabular-nums; padding: 0 0.3rem; }
.reel-count b { color: #F0D69B; }
.hero-reel .shot-cap { text-align: center; font-size: 0.95rem; }
.reel-cap .ex-tag { white-space: nowrap; flex: none; }
@media (max-width: 599px) { .reel-bar { align-items: flex-start; } .reel-cap { flex-direction: column; align-items: flex-start; gap: 0.35rem; font-size: 0.92rem; } .reel-cap .reel-title { white-space: normal; line-height: 1.3; } .reel-nav button { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .reel-slide, .reel-slides.is-back .reel-slide { transition: opacity 0.4s; transform: none; } }
/* ===== 2026-10-22f white carousel frame ===== */
.hero--v3 .reel-frame { background: #fff; padding: 0.6rem; box-shadow: 0 1px 0 #fff inset, 0 30px 70px oklch(10% 0.04 250 / 0.5), 0 0 0 1px oklch(100% 0 0 / 0.7); }
.hero--v3 .reel-frame .shot-bar i { background: #dfe3ea; }
.hero--v3 .reel-frame .shot-url { background: #f3f5f9; border-color: #e3e7ee; color: #4b5563; }
.hero--v3 .reel-slides { border-radius: 10px; }
/* ===== 2026-10-22g pain, story, myths, fit ===== */
.pain3 { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 860px) { .pain3 { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.pain3 li { position: relative; padding: 1.5rem 1.5rem 1.6rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 #fff inset, 0 18px 44px oklch(26.3% 0.046 250 / 0.12); }
.pain3 li i { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-style: normal; font-weight: 800; font-size: 0.9rem; color: var(--navy-900); background: linear-gradient(180deg, #F0D69B, #E5B94E); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.5) inset, 0 6px 16px oklch(75% 0.12 85 / 0.35); margin-bottom: 0.9rem; }
.pain3 h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--navy); line-height: 1.15; margin-bottom: 0.4rem; }
.pain3 p { font-size: 0.98rem; line-height: 1.55; color: var(--text); }
.pain-turn { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); font-size: 1.1rem; line-height: 1.5; color: var(--text); max-width: 60ch; }
.pain-turn b { color: var(--navy); }

.nx-founder-copy--story p { color: oklch(100% 0 0 / 0.88); font-size: 1.02rem; line-height: 1.6; margin-bottom: 0.85rem; }
.nx-founder-copy--story .story-lead { font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 2.2vw, 1.75rem); color: var(--white); line-height: 1.2; margin-bottom: 1rem; }
.nx-founder-copy--story .story-sign { font-family: var(--font-display); color: #F0D69B; font-size: 1.05rem; margin-top: 0.25rem; }
.nx-founder-copy--story .nx-fine-line, .nx-story--tight .nx-founder-copy--story p.nx-fine-line { margin-top: 0.75rem; font-family: var(--font-body, inherit); font-style: normal; font-size: 0.88rem; color: oklch(100% 0 0 / 0.62); line-height: 1.5; }

.myths { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 860px) { .myths { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
.myths li { display: grid; border-radius: 18px; overflow: hidden; border: 1px solid oklch(100% 0 0 / 0.16); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.12) inset, 0 18px 44px rgba(0, 0, 0, 0.3); }
.myths p { margin: 0; padding: 1.1rem 1.3rem 1.2rem; font-size: 1rem; line-height: 1.5; }
.myths small { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.35rem; }
.myth-told { background: oklch(100% 0 0 / 0.05); color: oklch(100% 0 0 / 0.7); font-family: var(--font-display); font-style: italic; font-size: 1.08rem; }
.myth-told small { color: oklch(100% 0 0 / 0.5); font-style: normal; font-family: var(--font-body, inherit); }
.myth-true { background: linear-gradient(180deg, #FFFFFF, #F6F2E6); color: var(--navy-900); border-top: 2px solid #E5B94E; }
.myth-true small { color: #9A7A2A; }

.fit-grid { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .fit-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.fit-yes { list-style: none; margin: 0; padding: 0.5rem 0 0; display: grid; gap: 0.75rem; }
.fit-yes li { position: relative; padding-left: 2.1rem; font-size: 1.05rem; line-height: 1.45; color: var(--navy); font-weight: 600; }
.fit-yes li::before { content: ""; position: absolute; left: 0; top: 0.15rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: linear-gradient(180deg, #F0D69B, #E5B94E); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.5) inset, 0 6px 16px oklch(75% 0.12 85 / 0.35); }
.fit-yes li::after { content: ""; position: absolute; left: 0.46rem; top: 0.42rem; width: 0.3rem; height: 0.6rem; border: solid var(--navy-900); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.fit-no { padding: 1.35rem 1.5rem; border-radius: 18px; background: linear-gradient(180deg, #172D76, #11235E); color: #fff; box-shadow: 0 18px 44px oklch(26.3% 0.046 250 / 0.25); }
.fit-no p { margin: 0; font-size: 1.02rem; line-height: 1.55; color: oklch(100% 0 0 / 0.9); }
.fit-no b { color: #F0D69B; }
/* ===== 2026-10-23 studio banner + studio portrait ===== */
.studio-banner { position: relative; margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 0 #fff inset, 0 30px 70px oklch(26.3% 0.046 250 / 0.22), 0 0 0 1px oklch(100% 0 0 / 0.6); }
.studio-banner picture, .studio-banner img { display: block; width: 100%; height: auto; }
.studio-banner img { aspect-ratio: 16 / 9; object-fit: cover; }
.studio-banner figcaption { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.9rem 0.45rem 0.45rem; border-radius: 999px; background: oklch(100% 0 0 / 0.94); color: var(--navy-900); font-weight: 700; font-size: 0.92rem; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25); }
.studio-banner figcaption .ex-tag { margin: 0; }
@media (max-width: 599px) { .studio-banner { border-radius: 16px; } .studio-banner img { aspect-ratio: 4 / 3; } .studio-banner figcaption { font-size: 0.82rem; left: 0.6rem; bottom: 0.6rem; } }
.nx-portrait--studio { position: relative; }
.nx-portrait--studio .portrait-inset { position: absolute; right: 0.6rem; top: 0.6rem; width: 26%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 50%; border: 2px solid #F0D69B; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
.nx-portrait--studio figcaption small { display: block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(100% 0 0 / 0.6); margin-top: 0.2rem; }
/* ===== 2026-10-23b founder trio ===== */
.trio { list-style: none; margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .trio { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.trio-card a { display: grid; grid-template-rows: auto 1fr; height: 100%; border-radius: 22px; overflow: hidden; text-decoration: none; background: linear-gradient(180deg, oklch(100% 0 0 / 0.07), oklch(100% 0 0 / 0.03)); border: 1px solid oklch(100% 0 0 / 0.16); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.14) inset, 0 24px 60px rgba(0, 0, 0, 0.38); transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease); }
@media (hover: hover) { .trio-card a:hover { transform: translateY(-6px); border-color: oklch(85% 0.1 85 / 0.55); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.2) inset, 0 34px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px oklch(85% 0.1 85 / 0.35); } .trio-card a:hover img { transform: scale(1.04); } }
.trio-card picture { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0b1524; }
.trio-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 1.2s var(--ease); }
.trio-body { display: grid; gap: 0.3rem; padding: 1.35rem 1.4rem 1.5rem; border-top: 2px solid #E5B94E; }
.trio-body small { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #F0D69B; }
.trio-body b { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: #fff; line-height: 1.15; }
.trio-body em { font-style: normal; font-size: 0.98rem; line-height: 1.5; color: oklch(100% 0 0 / 0.78); }
.trio-body i { font-style: normal; margin-top: 0.5rem; font-size: 0.86rem; color: #E6C06A; font-weight: 600; }
.trio-body i::after { content: " \2192"; }
.nx-founder--dark .nx-story--tight { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid oklch(100% 0 0 / 0.14); }
/* 2026-10-23c studio portrait sizing */
.nx-portrait--studio picture { display: block; }
.nx-portrait--studio picture img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
@media (max-width: 899px) { .nx-story--tight { grid-template-columns: 1fr; } .nx-story--tight .nx-portrait { max-width: 260px; width: 100%; margin: 0 auto 1.25rem; } .nx-portrait--studio .portrait-inset { width: 24%; } }
@media (max-width: 899px) { .nx-story--tight .nx-portrait figcaption { display: grid; } }
/* ===== 2026-10-23d founder mosaic, seven still tiles ===== */
.mosaic { list-style: none; margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 1.25rem; grid-template-areas: "big big a b" "big big c c" "d e e f"; }
  .mosaic .mz-item:nth-child(1) { grid-area: big; } .mosaic .mz-item:nth-child(2) { grid-area: a; } .mosaic .mz-item:nth-child(3) { grid-area: b; } .mosaic .mz-item:nth-child(4) { grid-area: c; } .mosaic .mz-item:nth-child(5) { grid-area: d; } .mosaic .mz-item:nth-child(6) { grid-area: e; } .mosaic .mz-item:nth-child(7) { grid-area: f; } }
@media (min-width: 1200px) { .mosaic { grid-auto-rows: 230px; } }
.mz-item a { position: relative; display: block; height: 100%; min-height: 160px; border-radius: 18px; overflow: hidden; background: #0b1524; border: 1px solid oklch(100% 0 0 / 0.16); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.14) inset, 0 20px 50px rgba(0, 0, 0, 0.38); transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease); }
@media (hover: hover) { .mz-item a:hover { transform: translateY(-5px); border-color: oklch(85% 0.1 85 / 0.55); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.2) inset, 0 30px 70px rgba(0, 0, 0, 0.5); } .mz-item a:hover img { transform: scale(1.04); } }
.mz-item picture, .mz-item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mz-item img { transition: transform 1.2s var(--ease); }
@media (max-width: 899px) { .mz-item a { aspect-ratio: 1; } .mz-item--big a, .mz-item--wide a { aspect-ratio: 16 / 10; } .mz-item--big, .mz-item--wide { grid-column: span 2; } }
.mosaic .mq-cap { position: absolute; left: 0.75rem; bottom: 0.75rem; max-width: calc(100% - 1.5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.75rem 0.3rem 0.3rem; border-radius: 999px; background: oklch(100% 0 0 / 0.93); color: var(--navy-900); font-size: 0.86rem; font-weight: 600; line-height: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.mosaic .mq-cap b { display: inline-block; padding: 0.32rem 0.55rem; border-radius: 999px; background: linear-gradient(180deg, #F0D69B, #E5B94E); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 899px) { .mosaic .mq-cap { font-size: 0.78rem; gap: 0.4rem; padding: 0.26rem 0.6rem 0.26rem 0.26rem; } .mosaic .mq-cap b { font-size: 0.56rem; padding: 0.28rem 0.45rem; } .mosaic .mz-item:nth-child(5) { grid-column: span 2; } .mosaic .mz-item:nth-child(5) a { aspect-ratio: 16 / 10; } }
@media (max-width: 899px) { .mosaic .mq-cap { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; border-radius: 12px; align-items: flex-start; flex-direction: column; gap: 0.3rem; padding: 0.4rem 0.55rem; } }
/* ===== 2026-10-23e single drifting row ===== */
.mq--one { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.mq--one .mq-row--left { animation-duration: 70s; }
.mq--one .mq-item { height: clamp(200px, 26vw, 320px); }
.mq--one .mq-item a { border-radius: 20px; }
@media (max-width: 599px) { .mq--one .mq-item { height: 190px; } }
/* ===== 2026-10-23f founder first, bigger portrait ===== */
.nx-founder--dark .nx-story--tight { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: 0; border-top: 0; }
.nx-story--tight .nx-portrait, .nx-story .nx-portrait--studio { max-width: 420px; }
@media (min-width: 900px) { .nx-story--tight { grid-template-columns: minmax(300px, 420px) 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } }
.nx-portrait--studio picture img { aspect-ratio: 4 / 5; }
.nx-portrait--studio figcaption b { font-size: 1.5rem; }
.nx-founder--dark .nx-builds-h--top { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid oklch(100% 0 0 / 0.14); }
@media (max-width: 899px) { .nx-story--tight .nx-portrait { max-width: 100%; margin: 0 0 1.25rem; } }
/* 2026-10-23g story rhythm */
.nx-founder-copy--story p { margin-bottom: 0.7rem; }
.nx-founder-copy--story p b { color: #F0D69B; font-weight: 600; }
@media (min-width: 900px) { .nx-story--tight { align-items: start; } .nx-story--tight .nx-portrait { position: sticky; top: 6rem; } }
/* 2026-10-23h weekly section on navy so the studio banner pops */
.nx-inside.section--light { background: linear-gradient(180deg, #11235E 0%, #172D76 100%); }
.nx-inside .section-label { color: #F0D69B; }
.nx-inside .section-label::after { background: #E5B94E; }
.nx-inside .display, .nx-inside .nx-method-head h2 { color: #fff; }
.nx-inside .nx-method-head p { color: #F0D69B; }
.nx-inside .nx-fine-line { color: oklch(100% 0 0 / 0.72); }
.nx-inside .studio-banner { box-shadow: 0 1px 0 oklch(100% 0 0 / 0.25) inset, 0 34px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px oklch(85% 0.1 85 / 0.45); }
.nx-inside .sat li { background: oklch(100% 0 0 / 0.06); border: 1px solid oklch(100% 0 0 / 0.16); }
/* 2026-10-23i carousel browser bar on navy */
.hero--v3 .reel-frame { background: linear-gradient(180deg, #172D76, #11235E); padding: 0 0.6rem 0.6rem; border: 1px solid oklch(100% 0 0 / 0.22); }
.hero--v3 .reel-frame .shot-bar { padding: 0.55rem 0.2rem 0.6rem; }
.hero--v3 .reel-frame .shot-bar i { background: oklch(100% 0 0 / 0.35); }
.hero--v3 .reel-frame .shot-url { background: oklch(100% 0 0 / 0.14); border: 1px solid oklch(100% 0 0 / 0.28); color: #fff; box-shadow: none; }
.hero--v3 .reel-slides { border-radius: 10px; }
/* 2026-10-23j hero: headline top aligns with the carousel frame */
@media (min-width: 900px) { .hero--v3 .nx-hero-grid { align-items: start; } .hero--v3 .hero-copy { padding-top: 0; margin-top: 0; } .hero--v3 .hero-title { margin-top: 0; line-height: 1; } .hero--v3 .hero-visual.hero-shot { margin-top: 0; } }
/* 2026-10-23k Learn Build Earn inside the carousel frame */
.hero--v3 .reel-frame { display: flex; flex-direction: column; }
.hero--v3 .reel-slides { flex: none; }
.reel-sig { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin: 0; padding: 0.9rem 0.5rem 0.4rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.3rem); letter-spacing: 0.26em; text-transform: uppercase; color: #F0D69B; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.reel-sig i { width: 6px; height: 6px; border-radius: 50%; background: #E5B94E; }
@media (max-width: 899px) { .reel-sig { font-size: 0.9rem; letter-spacing: 0.2em; padding: 0.7rem 0.4rem 0.3rem; } }
/* 2026-10-23l slide fills the frame; signature overlays; balanced columns */
@media (min-width: 900px) { .hero--v3 .nx-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: clamp(2rem, 4vw, 3.5rem); } .hero--v3 .hero-title { font-size: clamp(3.2rem, 5.2vw, 4.6rem); } .hero--v3 .hero-lede { font-size: 1.22rem; max-width: 34ch; } }
.hero--v3 .reel-frame { display: block; }
.hero--v3 .reel-slides { position: relative; aspect-ratio: 16 / 11; }
.reel-slide picture, .reel-slide img { height: 100%; object-fit: cover; object-position: top; }
.reel-sig { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 2.2rem 0.5rem 0.75rem; margin: 0; background: linear-gradient(180deg, transparent, rgba(10, 16, 40, 0.78)); text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 18px rgba(0,0,0,.5); }
.hero--v3 .reel-slides { overflow: hidden; }
/* 2026-10-23m Learn Build Earn on a solid gold bar */
.reel-sig { padding: 0.7rem 0.5rem; background: linear-gradient(180deg, #F0D69B, #E5B94E); color: #11235E; text-shadow: none; box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.25), 0 1px 0 oklch(100% 0 0 / 0.55) inset; letter-spacing: 0.28em; font-weight: 700; }
.reel-sig i { background: #11235E; }
@media (max-width: 899px) { .reel-sig { padding: 0.55rem 0.4rem; } }
/* 2026-10-23n bolder text in myths and week cards */
.myths li { border-color: oklch(85% 0.1 85 / 0.45); background: oklch(100% 0 0 / 0.06); }
.myth-told { background: linear-gradient(180deg, #172D76, #11235E); color: #fff; font-size: 1.18rem; font-weight: 600; }
.myth-told small { color: #F0D69B; font-weight: 800; }
.myth-true { background: #fff; color: #11235E; font-weight: 600; font-size: 1.05rem; border-top: 3px solid #E5B94E; }
.myth-true small { color: #9A7A2A; font-weight: 800; }

.nx-inside .sat li { background: linear-gradient(170deg, #1d3a7a 0%, #11235E 100%); border: 1px solid oklch(85% 0.1 85 / 0.5); border-top: 3px solid #E5B94E; }
.nx-inside .sat li .sat-n { color: #F0D69B; font-weight: 800; }
.nx-inside .sat li h3 { color: #fff; font-weight: 600; }
.nx-inside .sat li p { color: #fff; font-weight: 500; font-size: 1.02rem; }
.nx-inside .sat li::after { color: oklch(85% 0.12 85 / 0.45); }
.nx-inside .nx-fine-line { color: #fff; font-weight: 500; font-size: 1rem; }
.nx-inside .nx-method-head p { color: #F0D69B; font-weight: 600; }
/* ===== 2026-10-24 VELOUR: a different way to start (secondary offer) ===== */
.nx-velour { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); background: linear-gradient(180deg, #FBFCFE 0%, #F6F2E6 100%); }
.velour-card { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 22px; background: #fff; border: 1px solid oklch(85% 0.1 85 / 0.5); box-shadow: 0 1px 0 #fff inset, 0 18px 44px oklch(26.3% 0.046 250 / 0.1); }
@media (min-width: 900px) { .velour-card { grid-template-columns: 1.15fr 1fr; align-items: center; } }
.velour-copy .display { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0.4rem 0 0.9rem; }
.velour-copy p { font-size: 1.02rem; line-height: 1.6; color: var(--text); margin-bottom: 0.6rem; max-width: 52ch; }
.velour-copy p b { color: var(--navy); }
.velour-price { font-size: 1.15rem; color: var(--navy); margin-top: 0.6rem; }
.velour-price b { font-family: var(--font-display); font-size: 1.7rem; color: var(--navy); margin-right: 0.2rem; }
.velour-reassure { font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; color: #9A7A2A; font-weight: 700; margin-bottom: 1rem; }
.velour-copy .btn { margin-bottom: 0.9rem; }
.velour-copy .nx-fine-line { font-size: 0.85rem; color: var(--text-muted, #5b6475); }
.velour-shot { display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 14px 36px oklch(26.3% 0.046 250 / 0.14); transition: transform 0.35s var(--ease); }
@media (hover: hover) { .velour-shot:hover { transform: translateY(-4px); } }
.velour-shot img { display: block; width: 100%; height: auto; }
/* 2026-10-24b VELOUR offer block with two CTAs */
.velour-offer { margin: 0.9rem 0 1rem; padding: 1.1rem 1.25rem 1.25rem; border-radius: 16px; background: linear-gradient(180deg, #F6F2E6, #FBFCFE); border: 1px solid oklch(85% 0.1 85 / 0.55); }
.velour-offer .velour-price { margin-top: 0; }
.velour-offer .velour-reassure { margin-bottom: 0.85rem; }
.velour-ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.velour-ctas .btn { margin: 0; }
.nx-btn-ghost--navy { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); }
.nx-btn-ghost--navy:hover { background: var(--navy); color: #fff; }
@media (max-width: 599px) { .velour-ctas .btn { width: 100%; text-align: center; } }
[hidden] { display: none !important; }