/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

:root {
  /* Handle-inspired palette — clean white, near-black ink, flat greys */
  --background: #ffffff;
  --surface: #ffffff;          /* page bg, pure white */
  --card: #f7f7f7;             /* neutral grey — cards */
  --card-2: #f0f0f0;           /* slightly darker for variation */
  --foreground: #0a0a0a;       /* near-black text */
  --muted: #6b6b6b;            /* muted body text */
  --muted-2: #9a9a9a;
  --border: #e8e8e8;
  --border-side: rgba(0, 0, 0, 0.07);
  --accent: #000000;           /* black accent / buttons */
  --accent-fg: #ffffff;
  --highlight: transparent;    /* emphasis comes from weight, not colour */

  /* Brand lime, sampled from the sprig in the logo, as background washes */
  --brand: #b8c56a;
  --tint-1: #f3f7e4;           /* section wash */
  --tint-2: #eaf1cf;           /* card fill */
  --tint-3: #dfe9b8;           /* hover / emphasis block */
  --tint-line: #d5e2a8;        /* borders inside tinted areas */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 12px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --container: 1152px; /* max-w-6xl */
}

body {
  background: var(--surface);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }

/* ── Layout container with dotted side borders (reception signature) ── */
.frame {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}@media (min-width: 768px) {
  .frame { padding: 0 20px; }}

/* Side rails removed — every page reads clean and edge-to-edge, matching
   the home. .frame-bordered is kept as a no-op so existing markup is safe. */
.frame-bordered::before,
.frame-bordered::after { content: none; }

/* ── Section ── */
.section { padding: 60px 0; position: relative; }@media (min-width: 768px) { .section { padding: 80px 0; }}
@media (min-width: 1024px) { .section { padding: 100px 0; }}

/* ── Typography ── */
.display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--foreground);
}

.lead {
  font-size: 16px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 560px;
}@media (min-width: 768px) {
  .lead { font-size: 17px; }}

.subhead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--foreground);
  line-height: 1.38;
}

.description { font-size: 15px; line-height: 1.63; color: var(--muted); }

/* Handle sets headlines in one solid weight with no highlight box.
   .hl stays in the markup as an emphasis hook but renders flat. */
.hl {
  background: none;
  font-style: normal;
  padding: 0;
}

/* ── Nav ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(253, 252, 252, 0.8);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 16px;
  max-width: var(--container);
  margin: 0 auto;
}@media (min-width: 768px) { .nav-inner { padding: 0 20px; gap: 28px; }}

.nav-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--foreground);
  line-height: 1;
}
.nav-mark .brand-icon,
.footer-mark .brand-icon {
  height: 18px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.nav-links {
  display: none;
  gap: 8px;
  margin-left: auto;
}@media (min-width: 768px) {
  .nav-links { display: flex; align-items: center; }}

.nav-link {
  font-size: 14px;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--foreground); }

.nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}@media (min-width: 768px) {
  .nav-actions { margin-left: 0; }}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  transition: background-color 0.2s, color 0.2s, transform 0.15s;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
}
.btn-primary:hover { background: #1a1a1a; }
.btn-ghost {
  background: var(--background);
  color: var(--foreground);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: #fafafa; }
.btn-lg {
  padding: 12px 22px;
  font-size: 15px;
}
.btn-arrow svg { width: 14px; height: 14px; transition: transform 0.2s; }
.btn-arrow:hover svg { transform: translateX(2px); }

/* ── Hero ── */
.hero {
  padding: 96px 0 56px;
  text-align: center;
}@media (min-width: 768px) { .hero { padding: 128px 0 80px; }}
@media (min-width: 1024px) { .hero { padding: 160px 0 96px; }}

.hero .eyebrow { margin-bottom: 28px; }
.hero .display { margin-bottom: 24px; max-width: 920px; margin-left: auto; margin-right: auto; }
.hero .lead { margin: 0 auto 36px; }
.hero-cta {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.window .kpi .v .u {
  font-size: 13px;
  font-weight: 500;
  color: var(--w-muted);
  margin-left: 1px;
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Section header (left-right grid like reception) ── */
.section-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 32px;
  align-items: end;
}@media (min-width: 768px) {
  .section-header { grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 48px; }}

.section-header h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.section-header .description { padding-top: 6px; }

/* ── Bento grid ── */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
/* Three columns only from 1024 up. At 768 they left 230px-wide cards, and
   the densest mockup (fb-visual) needed 380px of height to render without
   clipping — a portrait box that tall reads as broken. Below 1024 the
   cards go full width, where every mockup fits in ~266px. */
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(3, 1fr); gap: 16px 16px; row-gap: 80px; }
}

.bento-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
/* Same 1024 breakpoint as the 3-column grid above: spanning 2 columns in
   the 1-column layout would spawn an implicit extra column. */
@media (min-width: 1024px) {
  .bento-card-2 { grid-column: span 2; }
}

/* The mockups inside are position:absolute, so this box can never grow to
   fit them — 4/3 alone was clipping the last line of five of the six
   visuals. The floor guarantees the tallest mockup (~266px) fits; the
   ceiling stops a full-width card from stretching the box to 500px+.
   Both are plain lengths, so every card in a row lands on the same
   height whatever the viewport. */
.bento-visual {
  position: relative;
  /* width must be pinned: with aspect-ratio set, a definite min-height
     makes the browser derive the WIDTH from it (284 × 4/3 = 379px), which
     overflowed the card and knocked the rounded corners out of alignment,
     leaving a green sliver down the sides. */
  width: 100%;
  /* Square: the card is the thing with the radius, and it clips us
     (overflow: hidden), so its corners stay perfectly flush with ours. */
  border-radius: 0;
  overflow: hidden;
  background: var(--card);
  aspect-ratio: 4 / 3;
  min-height: 284px;
  max-height: 340px;
}
/* One hairline where the mockup meets the text — the other three edges are
   the card's own border now. */
.bento-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075);
  pointer-events: none;
}
/* The bottom padding was 0, so the description sat 1px off the card's
   border — the text looked like it was falling out of the card. */
.bento-card .bento-text {
  padding: 16px 24px 24px 28px;
}
.bento-card .subhead { letter-spacing: 0.01em; }
.bento-card .description { margin-top: 4px; padding-top: 0; }

/* ── Visual: Feedback bullets ── */
.fb-visual {
  position: absolute;
  inset: 22px;
  background: var(--background);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fb-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.fb-title { font-size: 12px; font-weight: 500; }
.fb-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #d97706;
  background: rgba(217, 119, 6, 0.1);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fb-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  list-style: none;
  flex: 1;
  min-height: 0;
}
.fb-list li {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
  display: flex;
  gap: 7px;
}
.fb-list li::before {
  content: '→';
  color: var(--foreground);
  flex-shrink: 0;
}
.fb-list strong { color: var(--foreground); font-weight: 500; }

/* ── Loop / How it works (numbered grid) ── */
.loop {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}@media (min-width: 768px) {
  .loop { grid-template-columns: repeat(4, 1fr); gap: 24px; }}

.loop-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.loop-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-2);
}
.loop-item h4 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.loop-item p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* ── FAQ ── */
.faq {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}@media (min-width: 768px) {
  .faq { grid-template-columns: 1fr 1fr; gap: 0 32px; }}

.faq-row {
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.faq-row summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.25s;
  color: var(--muted);
}
.faq-row[open] .faq-icon { transform: rotate(45deg); color: var(--foreground); }
.faq-a {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  padding-bottom: 20px;
  max-width: 520px;
}

/* ── CTA ── */
.cta {
  padding: 80px 0 100px;
  text-align: center;
}@media (min-width: 768px) { .cta { padding: 120px 0; }}

.cta h2 { margin-bottom: 16px; max-width: 720px; margin-left: auto; margin-right: auto; }
.cta p { color: var(--muted); max-width: 520px; margin: 0 auto 28px; font-size: 16px; }

/* ── Footer ── */
.footer {
  padding: 56px 0 40px;
  border-top: 1px solid var(--border);
  background: var(--background);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}@media (min-width: 768px) {
  .footer-inner { grid-template-columns: 1fr auto; gap: 32px; }}

.footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.footer-bottom {
  max-width: var(--container);
  margin: 32px auto 0;
  padding: 24px 20px 0;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-2);
}

/* ── Footer SMS disclosure (A2P 10DLC, Widget-First) ── */
.footer-sms {
  max-width: var(--container);
  margin: 24px auto 0;
  padding: 0 20px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted-2);
}
.footer-sms a { color: var(--muted); text-decoration: underline; }
.footer-sms a:hover { color: var(--foreground); }

/* ── Animations ── */
/* Handle-style reveal: rise + settle from a slightly smaller scale */
[data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.72s cubic-bezier(0, 0, 0.2, 1),
    transform 0.72s cubic-bezier(0, 0, 0.2, 1);
  will-change: transform, opacity;
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}
[data-animate][data-delay="1"] { transition-delay: 0.08s; }
[data-animate][data-delay="2"] { transition-delay: 0.16s; }
[data-animate][data-delay="3"] { transition-delay: 0.24s; }
[data-animate][data-delay="4"] { transition-delay: 0.32s; }
[data-animate][data-delay="5"] { transition-delay: 0.40s; }@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }}

/* ══════════════════════════════════════════════════════════
   Creator platform — fork chooser, seller track
   ══════════════════════════════════════════════════════════ */

/* ── Fork chooser (home) ── */
.fork {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}@media (max-width: 860px) { .fork { grid-template-columns: 1fr; }}

.fork-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 40px 36px 34px;
  background: var(--card);
  border: 1px solid var(--border-side);
  border-radius: var(--radius-lg);
  transition: transform 220ms cubic-bezier(.2,.7,.3,1), background 220ms, box-shadow 220ms;
}
.fork-card:hover {
  transform: translateY(-4px);
  background: var(--card-2);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.35);
}
.fork-eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.fork-card h3 {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.fork-card p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
  flex: 1;
}
.fork-card:hover .fork-go svg { transform: translateX(4px); }

/* ── Big proof stat row ── */
.proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}@media (max-width: 760px) { .proof { grid-template-columns: 1fr; }}

.proof-item .n {
  font-size: 2.6rem;
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.proof-item .k {
  margin-top: 6px;
  font-size: .92rem;
  color: var(--muted);
}

/* Typographic line break — drop it on narrow screens so the line flows */
@media (max-width: 640px) { br.br-wide { display: none; } }
[data-animate].is-visible .grid-fig .gf-line { stroke-dashoffset: 0; }
[data-animate].is-visible .grid-fig .gf-dot,
[data-animate].is-visible .grid-fig .gf-dot-open,
[data-animate].is-visible .grid-fig .gf-bar,
[data-animate].is-visible .grid-fig .gf-bar-ghost,
[data-animate].is-visible .grid-fig .gf-ghost { opacity: 1; }

/* ── Impact: animated counters ── */
.impact {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-side);
}@media (max-width: 900px) { .impact { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 480px) { .impact { grid-template-columns: 1fr; }}

.impact-item { background: var(--surface); padding: 34px 30px 30px; }
.impact-item .n {
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.impact-item .n .u { font-size: .5em; font-weight: 400; letter-spacing: -.01em; }
.impact-item .k {
  margin-top: 14px;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 210px;
}

/* Five-step variant of the numbered loop */
@media (min-width: 768px) and (max-width: 1023px) {
  .loop.loop-5 { grid-template-columns: repeat(3, 1fr); }
}@media (min-width: 1024px) {
  .loop.loop-5 { grid-template-columns: repeat(5, 1fr); gap: 20px; }}

/* Fork cards pick up the tint and deepen on hover */
.fork-card { background: var(--tint-2); border-color: var(--tint-line); }
.fork-card:hover { background: var(--tint-3); }

/* Impact numbers sit on white cells inside a tinted grid gap */
.section-tint .impact { background: var(--tint-line); }
.section-tint .impact-item { background: var(--tint-1); }

/* ── Framing: flush the outer edges of grids with the section edge ──
   Cards carry internal padding for breathing room, but the first and
   last columns would otherwise sit inset from the headings above them. */
/* The flush rule has to follow the reflow. :first-child means "first
   column" only in the 4-up grid; at 2 columns item 3 also starts a row,
   and stacked, every item does. Unconditioned, item 1 sat at the section
   edge while 2, 3 and 4 kept their 30px inset — the numbers stopped
   sharing a left margin. */
@media (min-width: 901px) {
  .impact-item:first-child  { padding-left: 0; }
  .impact-item:nth-child(4) { padding-right: 0; }
}
@media (min-width: 481px) and (max-width: 900px) {
  .impact-item:nth-child(odd)  { padding-left: 0; }
  .impact-item:nth-child(even) { padding-right: 0; }
}
@media (max-width: 480px) {
  .impact-item { padding-left: 0; padding-right: 0; }
}

/* Containers never paint their own background — only sections do. */
.frame,
.frame-bordered { background: transparent; }

/* ── Seams: stacked sections double their padding where they meet.
   Any section following another drops its top padding, so a seam is
   one section's breathing room instead of two stacked together. ── */
.manifesto + .section,
.section + .section { padding-top: 0; }

/* ── Home vertical rhythm ──
   Two seams were off in opposite directions: a screenful of nothing
   between the hero and the manifesto, and the closing statement
   crowding the last beat. */

/* Hero -> manifesto: 277px was most of a laptop screen */
@media (min-width: 1024px) {
  .hero { padding-bottom: 56px; }
  .manifesto { padding-top: 88px; }
}@media (min-width: 768px) and (max-width: 1023px) {
  .hero { padding-bottom: 48px; }}

/* The closing statement needs room after the argument, so it reads as
   a conclusion rather than a fifth beat. Beats the seam rule above. */
.manifesto + .section.mf-outro { padding-top: 84px; }

/* The lead's bottom margin exists to clear the hero CTAs. When it's the
   last thing in the hero, that margin is just dead space. */
.hero .lead:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════
   Home polish — same palette, more presence
   ══════════════════════════════════════════════════════════ */

.hero > .frame { position: relative; z-index: 1; }

/* ── Word-by-word reveal for the headline ── */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  transition:
    opacity 0.62s cubic-bezier(0, 0, 0.2, 1),
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}
.words-ready .word { will-change: transform, opacity; }
.words-in .word { opacity: 1; transform: none; }@media (prefers-reduced-motion: reduce) {
  .word { opacity: 1; transform: none; transition: none; }}

/* ── Hero CTA ── */
.hero-cta { margin-top: 34px; }

/* ── Context ticker: where a warm intro already wins ── */
.ticker {
  position: relative;
  overflow: hidden;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 38s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; align-items: center; flex: none; }
.ticker-group span {
  display: inline-flex;
  align-items: center;
  padding: 0 30px;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--foreground);
  white-space: nowrap;
}
.ticker-group i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}
@keyframes ticker { to { transform: translateX(-50%); } }@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }}

.mf-proof-big .u {
  font-size: 0.44em;
  font-weight: 400;
  letter-spacing: -0.02em;
  vertical-align: baseline;
}
/* On narrow phones one line would overflow — let it wrap there. */
@media (max-width: 560px) {
  .mf-proof-cap { white-space: normal; font-size: 14px; max-width: 320px; margin: 0 auto; }
}

/* ── Fork cards: lift and warm on hover ── */
.fork-card {
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s ease,
    border-color 0.3s ease;
}
.fork-card:hover {
  transform: translateY(-6px);
  background: var(--tint-3);
  box-shadow: 0 26px 52px -26px rgba(40, 50, 12, 0.34);
}
.fork-card .fork-go svg { transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.fork-card:hover .fork-go svg { transform: translateX(5px); }@media (prefers-reduced-motion: reduce) {
  .fork-card, .fork-card .fork-go svg { transition: none; }
  .fork-card:hover { transform: none; }}

/* ── Grain: a whisper of texture so the flat white reads richer ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════
   Craft pass — nav, fork cards, the proof moment
   ══════════════════════════════════════════════════════════ */

/* ── Nav: weightless at rest, grounded once you scroll ── */
.nav {
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 24px -12px rgba(0, 0, 0, 0.22);
}
.nav-inner { transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.nav.is-stuck .nav-inner { height: 58px; }

/* ── Mobile: surface Sell / Buy / Partners as a second nav row.
   They were display:none below 768px, so Partners was unreachable on
   phones. Row 1 keeps the logo + Talk to us; the pills wrap under. ── */
@media (max-width: 767px) {
  .nav-inner {
    height: auto;
    flex-wrap: wrap;
    row-gap: 9px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .nav.is-stuck .nav-inner { height: auto; }
  .nav-actions { order: 2; }
  .nav-links {
    display: flex;
    order: 3;
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
    /* Centred, the pill row stopped 13px short of the container edge, so
       Partners and Talk to us sat on two different right margins. Ending
       the row flush puts both rows on the same edge — and it holds if a
       pill label ever changes length. */
    justify-content: flex-end;
    gap: 7px;
  }
  .nav-link { padding: 7px 13px; font-size: 13px; }
  .nav-link.nav-link-partners { gap: 6px; }
  /* The two-row nav is ~105px tall, so 120px left the headline sitting
     15px under the pills — the hero read as glued to the header. This
     clears the fixed nav and still leaves real breathing room. */
  .hero { padding-top: 164px; }
}

/* Nav links: a lime rule sweeps in from the left */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 1.5px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after { transform: scaleX(1); }

/* ── Fork cards: destinations, not rectangles ── */
.fork-card {
  position: relative;
  overflow: hidden;
  padding-bottom: 34px;
}
.fork-card:hover .fork-fig {
  opacity: 0.5;
  transform: translateY(-50%) translateX(-6px);
}
.fork-card:hover .fork-go svg {
  transform: translateX(4px);
  background: var(--foreground);
  border-color: var(--foreground);
  color: #fff;
}
.fork-card:hover .fork-fig {
  opacity: 0.42;
  transform: translateX(-5px);
}
.fork-card h3 { max-width: calc(100% - 150px); }@media (max-width: 620px) {
  .fork-card h3 { max-width: 100%; }}

/* The outlined word fills with brand lime as you read through the
   section — reading progress expressed as type rather than as a bar. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mf-word {
    background-image: linear-gradient(
      90deg,
      var(--brand) 0%,
      var(--brand) var(--fill, 0%),
      transparent var(--fill, 0%));
    -webkit-background-clip: text;
            background-clip: text;
  }
}

/* ══════════════════════════════════════════════════════════
   Craft pass — sellers & buyers
   Shared components, so both pages pick this up at once.
   ══════════════════════════════════════════════════════════ */

/* ── Outlined section label, the manifesto word at section scale ── */
.section-word {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(36px, 6.6vw, 88px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--card);
  margin-bottom: 8px;
  user-select: none;
}@supports (-webkit-text-stroke: 1px black) {
  .section-word { color: transparent; -webkit-text-stroke: 1.4px var(--border); }
  .section-tint .section-word,
  .manifesto .section-word { -webkit-text-stroke-color: var(--tint-line); }}

/* ── Numbered steps get the ghost numeral ── */
.loop-item { position: relative; overflow: hidden; }
.loop-num {
  font-size: 58px !important;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--card) !important;
  margin-bottom: 6px;
  transition: color 0.35s ease;
}
.loop-item:hover .loop-num { color: var(--tint-2) !important; }

/* ── Bento cards ── */
.bento-card {
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease;
}
.bento-card:hover {
  transform: translateY(-5px);
  border-color: var(--brand);
  box-shadow: 0 22px 44px -28px rgba(40, 50, 12, 0.34);
}

/* ── Impact numbers warm on hover ── */
.impact-item { transition: background-color 0.32s ease; }
.impact-item:hover { background: rgba(184, 197, 106, 0.07); }
.impact-item .n { transition: color 0.32s ease; }
.impact-item:hover .n { color: #4c5a1e; }

/* ── FAQ rows ── */
.faq-row {
  border-radius: 12px;
  transition: background-color 0.3s ease;
}
.faq-row:hover { background: rgba(184, 197, 106, 0.06); }
.faq-row summary { transition: color 0.25s ease; }
.faq-icon { transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease; }
.faq-row[open] .faq-icon { transform: rotate(45deg); }
.faq-row:hover .faq-icon { background: var(--tint-2); }@media (prefers-reduced-motion: reduce) {
  .prob, .bento-card, .faq-icon { transition: none; }
  .prob:hover, .bento-card:hover { transform: none; }}

/* An 84px word on a 0.9 line-height needs real clearance under it —
   8px left it sitting on the copy that follows. */
.section-word { margin-bottom: 26px; }
.section-word + .section-header { margin-top: 0; }

/* ══════════════════════════════════════════════════════════
   Bring the home's palette to sellers & buyers
   ══════════════════════════════════════════════════════════ */

/* The outlined labels were stroked in --border (#e8e8e8) — near-white
   on white, so they barely read. Lime, and a touch heavier. */
@supports (-webkit-text-stroke: 1px black) {
  .section-word {
    color: transparent;
    -webkit-text-stroke: 1.8px var(--tint-line);
  }
  .section-tint .section-word,
  .manifesto .section-word { -webkit-text-stroke-color: var(--brand); }
}
.section-word { color: var(--tint-2); }

/* Cards pick up the tint the home's fork cards already use, so the
   three pages read as one palette instead of lime on the home and
   grey everywhere else. */
.bento-card {
  background: var(--tint-2);
  border: 1px solid var(--tint-line);
}
.bento-card:hover { background: var(--tint-3); }

.impact { background: var(--tint-line); }
.impact-item { background: var(--surface); }
.impact-item:hover { background: var(--tint-1); }

.faq-row { border-bottom-color: var(--tint-line); }
.loop-num { color: var(--tint-2) !important; }
.loop-item:hover .loop-num { color: var(--tint-3) !important; }

/* Section rules and dividers follow the same warmth */
.section-header { border-color: var(--tint-line); }

/* ══════════════════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════════════════ */

.footer {
  position: relative;
  border-top: 1px solid var(--tint-line);
  background: var(--tint-1);
  padding: 68px 0 0;
  overflow: hidden;
}

.footer-top {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 44px;
}@media (min-width: 768px) { .footer-top { padding: 0 20px; gap: 64px; }}
@media (max-width: 720px) { .footer-top { grid-template-columns: 1fr; gap: 40px; }}

.footer-brand .footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 16px;
}
.footer-tagline {
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: none;
  white-space: nowrap;
  margin-bottom: 24px;
}

/* Link columns */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}@media (max-width: 460px) { .footer-cols { grid-template-columns: repeat(2, 1fr); }}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
  font-weight: 500;
}
.footer-col a {
  display: block;
  font-size: 0.94rem;
  color: var(--muted);
  padding: 5px 0;
  position: relative;
  width: fit-content;
  transition: color 0.25s ease;
}
.footer-col a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1.5px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-col a:hover { color: var(--foreground); }
.footer-col a:hover::after { transform: scaleX(1); }

/* The wordmark, oversized and cropped by the page edge */
.footer-word {
  margin-top: 56px;
  font-size: clamp(74px, 20vw, 290px);
  font-weight: 800;
  letter-spacing: -0.06em;
  text-transform: lowercase;
  text-align: center;
  color: var(--tint-2);
  user-select: none;
  pointer-events: none;
  /* line-height 0.78 makes the box shorter than the glyphs, so the word
     overflowed its own box by ~0.21em and the negative margin pulled the
     legal rule up another 0.16em on top of that — measured at 1200px, the
     border crossed 56px into the letters. A box that contains its text can
     be tucked safely. */
  line-height: 1;
  margin-bottom: -0.2em;
}@supports (-webkit-text-stroke: 1px black) {
  .footer-word { color: transparent; -webkit-text-stroke: 2px var(--tint-line); }}

.footer-legal {
  border-top: 1px solid var(--tint-line);
  margin-top: 34px;
}
.footer-legal-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px 16px 26px;
}@media (min-width: 768px) { .footer-legal-inner { padding: 22px 20px 26px; }}

.footer-sms {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted-2);
  margin-bottom: 16px;
}
.footer-sms a { text-decoration: underline; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--muted-2);
}

/* ── Closing headline ──
   .cta h2 kept a 720px cap from when the display type was smaller. At
   72px the first line no longer fits, so the <br> stopped controlling
   the break and the heading spilled to three ragged lines. */
.cta h2 {
  max-width: none;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.04;
}@media (max-width: 620px) {
  .cta h2 { max-width: 100%; }}

/* ══════════════════════════════════════════════════════════
   Header track links → pill buttons
   Every nav link is a top-level destination now that the site is
   two pages, so they all get the pill. (This used to filter on
   [href$=".html"], which stopped matching once the links became
   /network.html#sell and /#partners.)
   ══════════════════════════════════════════════════════════ */
.nav-link {
  font-weight: 500;
  color: var(--foreground);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease;
}
.nav-link::after { display: none; }
.nav-link:hover {
  background: var(--card);
  border-color: #d7d7d7;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.22);
}
.nav-links { gap: 8px; }

/* Partners pill — same crisp white pill as the others, set apart by a
   lime dot + lime ink rather than a clashing fill.
   Specificity is bumped past .nav-link so it wins. */
.nav-link.nav-link-partners {
  color: #4c5a1e;
  border-color: var(--border);
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-link.nav-link-partners::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.nav-link.nav-link-partners:hover {
  background: var(--tint-1);
  border-color: var(--tint-line);
  color: #4c5a1e;
}
.nav-link.nav-link-partners[aria-current="page"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #1c220a;
}
.nav-link.nav-link-partners[aria-current="page"]::before { background: #1c220a; }

/* ══════════════════════════════════════════════════════════
   Home polish pass 2 — alignment, tone, finish
   ══════════════════════════════════════════════════════════ */

/* The closing statement + $120MM become one centered finale that
   mirrors the centered hero. Was left-aligned close over a centered
   proof — the page's one real alignment jump. */
.mf-outro .frame { text-align: center; }

/* ── Fork: premium destination cards ── */
.fork { gap: 18px; }
.fork-card { padding: 36px 34px 30px; gap: 14px; }

/* Eyebrow becomes a small tag, echoing the header pills */
.fork-eyebrow {
  align-self: flex-start;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--tint-line);
  color: var(--foreground);
  font-size: .66rem;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.fork-card:hover .fork-eyebrow { border-color: var(--brand); }

/* Give the title a hair more presence */
.fork-card h3 { font-size: 1.7rem; margin-top: 2px; }
.mf-diagram.is-visible .il {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 0.7, 0.28, 1) 0.15s;
  stroke-dashoffset: 0;
}
.mf-diagram.is-visible .idot,
.mf-diagram.is-visible .icore,
.mf-diagram.is-visible .ichat,
.mf-diagram.is-visible .iline,
.mf-diagram.is-visible .ilabel { opacity: 1; }
.mf-figure.is-visible .gf-dash { stroke-dasharray: 5 6; }
.mf-figure.is-visible .gf-solid {
  transition: stroke-dashoffset 0.85s cubic-bezier(.22,.7,.28,1) .15s;
  stroke-dashoffset: 0;
}
.mf-figure.is-visible .gf-cold, .mf-figure.is-visible .gf-cold-open,
.mf-figure.is-visible .gf-warm, .mf-figure.is-visible .gf-warm-line,
.mf-figure.is-visible .gf-warm-ring, .mf-figure.is-visible .gf-warm-fill,
.mf-figure.is-visible .gf-warm-fill-big, .mf-figure.is-visible .gf-check,
.mf-figure.is-visible text { opacity: 1; }

/* On phones the figure would shrink until the labels are unreadable.
   Keep it at a legible size and let it scroll inside its own card. */
@media (max-width: 680px) {
  .mf-figure {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 30px 22px;
  }
  .mf-figure svg { min-width: 540px; }
}
.mf-figure.is-visible .gf-signal {
  animation: gf-travel 2.6s cubic-bezier(0.5, 0, 0.5, 1) 1.1s infinite;
}
@keyframes gf-travel {
  0%,6%   { transform: translateX(0);     opacity: 0; }
  14%     { opacity: 1; }
  90%     { opacity: 1; }
  100%    { transform: translateX(415px); opacity: 0; }
}
.mf-figure.is-visible .gf-pulse {
  animation: gf-pulsering 2.4s ease-out 1.4s infinite;
}
@keyframes gf-pulsering {
  0%       { transform: scale(1);   opacity: 0.55; }
  70%,100% { transform: scale(1.9); opacity: 0; }
}
.mf-figure.is-visible .gf-check {
  transition: stroke-dashoffset 0.5s cubic-bezier(0.6, 0, 0.4, 1) 1s;
  stroke-dashoffset: 0;
}@media (prefers-reduced-motion: reduce) {
  .mf-figure.is-visible .gf-pulse { animation: none; opacity: 0; }}

/* the figure no longer holds a wide SVG, so drop the mobile scroll shim */
@media (max-width: 680px) {
  .mf-figure { overflow-x: visible; padding: 34px 26px 32px; }
}
@keyframes quizReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Manifesto, centered to match the rest of the page ── */
.manifesto .frame { text-align: center; }
@keyframes prfPulse {
  0%   { box-shadow: 0 0 0 0 rgba(184, 197, 106, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(184, 197, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 197, 106, 0); }
}

/* Program cards — extend the fork card */
.prog-card { padding-bottom: 32px; }
.prog-offer {
  margin-top: 6px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--tint-line);
  border-radius: 12px;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--foreground);
}
.prog-offer b { color: #4c5a1e; font-weight: 600; }
.prog-cta { margin-top: auto; align-self: flex-start; }
.calc-out-n .u { font-size: 0.5em; font-weight: 400; }

/* ══════════════════════════════════════════════════════════
   Centered section rhythm — applied site-wide
   ══════════════════════════════════════════════════════════ */
.section-word { text-align: center; }
.section-header {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.section-header .description { padding-top: 0; max-width: 520px; }

/* How-it-works / step loops, centered */
.loop-item { align-items: center; text-align: center; }

/* Partners-specific pieces */
.partners .prog-card { text-align: center; align-items: center; }
.partners .prog-card .fork-eyebrow { align-self: center; }
.partners .prog-card .prog-offer { align-self: stretch; }
.partners .prog-card .prog-cta { align-self: center; }@media (min-width: 768px) { .loop.loop-3 { grid-template-columns: repeat(3, 1fr); }}

.partners .clear-item { text-align: center; }
.partners .calc-note { margin-left: auto; margin-right: auto; text-align: center; }
.calcx-tab.is-on { background: var(--foreground); color: #fff; }
.calcx-out-big .u { font-size: .42em; font-weight: 400; vertical-align: baseline; }

/* ══════════════════════════════════════════════════════════
   Fork + program cards — destinations read as buttons, not panels
   ══════════════════════════════════════════════════════════
   These were tinted like every other content card on the page, so
   nothing said "click me". Now they sit quiet and near-white at rest,
   and answer the pointer: a lime wash rises from the bottom edge, the
   border picks up the brand, and the arrow inverts to black.

   Two shapes share the treatment: a.fork-card (the home's two
   destinations, links) and .prog-card (partners' two programs, divs
   whose CTA is a button inside). Plain .fork-card is deliberately not
   included — nothing else should read as clickable. */
a.fork-card,
.prog-card {
  background: #ffffff;
  border-color: #e6e9dc;
  box-shadow: 0 14px 34px -28px rgba(40, 50, 12, 0.4);
}
a.fork-card:hover,
.prog-card:hover {
  background: #ffffff;
  border-color: var(--brand);
  box-shadow: 0 28px 56px -28px rgba(40, 50, 12, 0.45);
}

/* The wash itself — painted behind the content, revealed on hover */
a.fork-card::after,
.prog-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    0deg,
    rgba(184, 197, 106, 0.30) 0%,
    rgba(184, 197, 106, 0.05) 55%,
    transparent 100%
  );
  transition: opacity 0.5s ease;
}
a.fork-card:hover::after,
.prog-card:hover::after { opacity: 1; }

/* Content rides above the wash. .fork-fig is absolutely positioned and
   has to stay that way, hence the :not(). */
a.fork-card > *:not(.fork-fig),
.prog-card > * { position: relative; z-index: 1; }

a.fork-card h3,
.prog-card h3 { color: var(--foreground); }
a.fork-card p,
.prog-card p { color: var(--muted); }

a.fork-card .fork-eyebrow,
.prog-card .fork-eyebrow {
  background: #ffffff;
  border-color: #dfe4d0;
  color: var(--foreground);
}
a.fork-card:hover .fork-eyebrow,
.prog-card:hover .fork-eyebrow { border-color: var(--brand); }

/* The offer strip sat on --surface, which now matches the card. Tint it
   so it still reads as a panel inside the card. */
.prog-card .prog-offer {
  background: var(--tint-1);
  border: 1px solid var(--tint-line);
}

/* Schematic figure — home cards only; the program cards have none */
a.fork-card .fork-fig { opacity: 0.3; }
a.fork-card:hover .fork-fig { opacity: 0.55; }
a.fork-card .fork-fig .ff-line { stroke: #6f8033; }
a.fork-card .fork-fig .ff-dot { fill: #6f8033; }

/* The CTA carries the affordance: outlined arrow that fills in on hover */
a.fork-card .fork-go { color: var(--foreground); }
a.fork-card .fork-go svg {
  border-color: #dfe4d0;
  background: #ffffff;
}
a.fork-card:hover .fork-go svg {
  background: var(--foreground);
  border-color: var(--foreground);
  color: #ffffff;
}

/* Keyboard users get the same signal a hover gives */
a.fork-card:focus-visible,
.prog-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}@media (prefers-reduced-motion: reduce) {
  a.fork-card::after,
  .prog-card::after { transition: none; }}

/* ── Small screens: the sheet takes the width it needs ──────────── */
@media (max-width: 560px) {
  .wl-modal { padding: 0; place-items: end stretch; }

  .wl-panel {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
    transform: translateY(28px);
  }

  .wl-head { padding: 26px 22px 16px; }
  .wl-body { padding: 8px 8px 10px; }
}

/* ══════════════════════════════════════════════════════════
   Figure zone — line drawings inside a .bento-visual
   The why-us cards were plain text boxes; these give each one a
   figure in the same language as .grid-fig, sized for the 4/3 box.
   ══════════════════════════════════════════════════════════ */
.vz {
  position: absolute;
  inset: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vz svg { width: 100%; height: 100%; overflow: visible; }
.vz .vz-line   { fill: none; stroke: #0d0d0d; stroke-width: 1.4; stroke-linecap: round; }
.vz .vz-accent { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; }
.vz .vz-ghost  { fill: none; stroke: rgba(0,0,0,.22); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 3 3.5; }
.vz .vz-dot      { fill: #0d0d0d; }
.vz .vz-dot-open { fill: var(--surface); stroke: #0d0d0d; stroke-width: 1.3; }
.vz .vz-fill     { fill: var(--brand); }
.vz .vz-soft     { fill: rgba(184, 197, 106, 0.22); }
.vz .vz-t {
  font-family: var(--font-mono);
  font-size: 8.5px;
  fill: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vz .vz-n { font-family: var(--font-mono); font-size: 13px; font-weight: 500; fill: #0d0d0d; }

/* Draw the accent stroke in when the card scrolls up. */
[data-animate] .vz .vz-accent {
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
[data-animate].is-visible .vz .vz-accent { stroke-dashoffset: 0; }@media (prefers-reduced-motion: reduce) {
  [data-animate] .vz .vz-accent { transition: none; stroke-dashoffset: 0; }}

/* ══════════════════════════════════════════════════════════
   Motion — the site read as a stack of static boxes
   ══════════════════════════════════════════════════════════ */

/* ── Transfer feed — rows cycle so the proof block has a pulse ── */
.feed {
  margin-top: 44px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}
.feed-h {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
.feed-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  animation: feed-pulse 1.9s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes feed-pulse {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(184, 197, 106, .55); }
  70%      { opacity: .7; box-shadow: 0 0 0 7px rgba(184, 197, 106, 0); }
}
.feed-title { font-size: 13px; font-weight: 500; }
.feed-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
}
.feed-rows { position: relative; }
.feed-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  animation: feed-in .5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.feed-row:last-child { border-bottom: 0; }
@keyframes feed-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.feed-st { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.feed-amt { font-weight: 500; }
.feed-meta { color: var(--muted); font-size: 12px; }
.feed-buf {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(184, 197, 106, .18);
  color: #4a5320;
  white-space: nowrap;
}@media (max-width: 620px) {
  .feed-row { grid-template-columns: 38px 1fr; row-gap: 4px; }
  .feed-buf { grid-column: 2; justify-self: start; }}
@media (prefers-reduced-motion: reduce) {
  .feed-dot { animation: none; }
  .feed-row { animation: none; }}

/* ══════════════════════════════════════════════════════════
   Pipeline schematic — the mechanism, drawn and running
   Sits under the hero. Sober on purpose: hairline rails, mono
   labels, one accent, and a single packet doing a lap.
   ══════════════════════════════════════════════════════════ */
.schematic {
  position: relative;
  padding: 8px 0 4px;
}
.schematic svg { width: 100%; height: auto; display: block; overflow: visible; }

.sc-rail {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.25;
}
.sc-tick { stroke: var(--border); stroke-width: 1.25; }

.sc-core {
  fill: var(--background);
  stroke: #0d0d0d;
  stroke-width: 1.3;
  transform-box: fill-box;
  transform-origin: center;
}
.sc-halo {
  fill: var(--brand);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
}
.sc-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: #0d0d0d;
}
.sc-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  fill: var(--muted);
}
.sc-packet { fill: var(--brand); }
.sc-trail  { stroke: var(--brand); stroke-width: 2; fill: none; stroke-linecap: round; opacity: .34; }

/* One 8s lap: the packet crosses, each node fires as it passes. */
@keyframes sc-travel {
  0%       { transform: translateX(0);     opacity: 0; }
  3%       { opacity: 1; }
  92%      { opacity: 1; }
  100%     { transform: translateX(840px); opacity: 0; }
}
@keyframes sc-fire {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  6%       { opacity: 0.55; transform: scale(1.9); }
  16%      { opacity: 0; transform: scale(2.6); }
}
@keyframes sc-core-fire {
  0%, 100% { fill: var(--background); }
  6%, 15%  { fill: var(--brand); }
}
@keyframes sc-trail-grow {
  0%   { stroke-dasharray: 0 840; }
  92%  { stroke-dasharray: 840 0; }
  100% { stroke-dasharray: 840 0; opacity: 0; }
}

.schematic .sc-packet,
.schematic .sc-trail-run { animation: sc-travel 8s linear infinite; }
.schematic .sc-trail-run { animation-name: sc-trail-grow; }
.sc-node .sc-halo { animation: sc-fire 8s linear infinite; }
.sc-node .sc-core { animation: sc-core-fire 8s linear infinite; }
.sc-node[data-i="0"] .sc-halo, .sc-node[data-i="0"] .sc-core { animation-delay: 0.15s; }
.sc-node[data-i="1"] .sc-halo, .sc-node[data-i="1"] .sc-core { animation-delay: 1.95s; }
.sc-node[data-i="2"] .sc-halo, .sc-node[data-i="2"] .sc-core { animation-delay: 3.75s; }
.sc-node[data-i="3"] .sc-halo, .sc-node[data-i="3"] .sc-core { animation-delay: 5.55s; }
.sc-node[data-i="4"] .sc-halo, .sc-node[data-i="4"] .sc-core { animation-delay: 7.35s; }

/* Paused until it is actually on screen. */
.schematic:not(.is-running) * { animation-play-state: paused !important; }

/* The SVG scales to ~1/3 on a phone, so 11px in viewBox units renders at
   ~4px. Drop the sub-labels there and size the stage names to survive
   the downscale — the rail and the packet still carry the idea. */
@media (max-width: 720px) {
  .sc-label { font-size: 30px; letter-spacing: 0.06em; }
  .sc-sub   { display: none; }
  .sc-core  { stroke-width: 3; }
  .sc-rail, .sc-tick { stroke-width: 3; }
  .sc-trail { stroke-width: 5; }
}

/* ── Reading progress — a hairline, nothing more ── */
.rprog {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--brand);
  z-index: 60;
  pointer-events: none;
}@media (prefers-reduced-motion: reduce) {
  .schematic * { animation: none !important; }
  .schematic .sc-halo { opacity: .3; transform: scale(1.6); }
  .rprog { display: none; }}

/* ── Cards get a hairline that wipes in on hover ── */
.bento-card { position: relative; }
.bento-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}
.bento-card:hover::before { transform: scaleX(1); }@media (prefers-reduced-motion: reduce) {
  .bento-card::before { transition: none; }}

/* ══════════════════════════════════════════════════════════
   ENTERPRISE PASS
   The reference points (openai, anthropic, x.ai, apple) share
   three things and none of them is an effect: space, almost no
   colour, and motion that is slow enough to feel deliberate.
   Everything below pulls in those directions.
   ══════════════════════════════════════════════════════════ */

/* 1 ── Colour discipline.
   The lime tints were doing the work of a background on 84 rules,
   which read startup, not enterprise. Neutralise them to warm
   near-whites and let --brand survive only where it means
   something: the packet, the progress rule, a hover edge. */
:root {
  --tint-1: #fbfbfa;
  --tint-2: #f6f6f4;
  --tint-3: #efefec;
  --tint-line: #e6e6e1;
  --ink: #08090a;
  --ink-2: #101214;
  --on-ink: #f4f4f2;
  --on-ink-muted: #8f938f;
}

/* 2 ── Space. Sections get room to breathe. */
.section { padding: 96px 0; }@media (min-width: 768px)  { .section { padding: 132px 0; }}
@media (min-width: 1024px) { .section { padding: 168px 0; }}

.hero { padding: 132px 0 72px; }@media (min-width: 1024px) { .hero { padding: 200px 0 112px; }}

/* 3 ── The watermark headings were shouting. Quiet them right down. */
.section-word {
  font-size: clamp(11px, 1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1;
  font-family: var(--font-mono);
  color: var(--muted);
  -webkit-text-stroke: 0 !important;
  -webkit-text-fill-color: currentColor !important;
  margin-bottom: 30px;
}
.section-word::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 12px;
  opacity: .5;
}

/* 4 ── Display type: tighter, larger, more confident. */
.display   { font-size: clamp(42px, 6.6vw, 84px); letter-spacing: -0.045em; line-height: 0.94; }
.section-header h2 { letter-spacing: -0.035em; }
.lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; }

/* 5 ── Motion: longer, softer, staggered. */
[data-animate] {
  transform: translateY(22px);
  transition:
    opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 7 ── Buttons and cards: flatter, quieter edges. */
.fork-card, .bento-card { border-radius: 16px; }
.prog-offer { background: var(--tint-3); border-color: var(--tint-line); }@media (prefers-reduced-motion: reduce) {
  [data-animate] { transition: none; }}

/* 9 ── The nav "Partners" pill carried a green dot and green text.
   One accent moment per screen is the budget; the schematic has it. */
.nav-link.nav-link-partners { color: var(--foreground); }
.nav-link.nav-link-partners::before { background: var(--muted-2); }
.nav-link.nav-link-partners:hover::before { background: var(--brand); }

/* Loop steps arrive left to right. */
.loop .loop-item { transition-delay: calc(var(--i, 0) * 0.09s); }

/* 11 ── Hero parallax. The headline drifts up a touch slower than the
   page, which is the whole trick behind why those sites feel
   physical rather than flat. Driven from one rAF pass in app.js. */
.hero > .frame { will-change: transform; }@media (prefers-reduced-motion: reduce) {
  .hero > .frame { transform: none !important; }}

/* ══════════════════════════════════════════════════════════
   13 ── Corporate structure
   Numbered sections and a rule between them. Reads like a
   document with an order to it rather than a stack of blocks.
   ══════════════════════════════════════════════════════════ */
.section-word i {
  font-style: normal;
  color: var(--muted-2);
  margin-right: 14px;
  letter-spacing: 0.1em;
}
.section-word i::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-left: 14px;
  opacity: .6;
}
/* The numeral replaces the old leading dash. */
.section-word::before { display: none; }

/* Sections are separated by space, not by rules. The hairlines sat at
   the frame's outer edge (0 -> 769) while every piece of content sits
   in the padded column (20 -> 749), so they overhung the grid by 20px
   a side and crowded the labels underneath them. */

/* ── Registered entity, set small and quiet under the links ── */
.footer-entity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.footer-entity b { color: var(--foreground); font-weight: 500; }@media (min-width: 768px) {
  .footer-entity { flex-direction: row; gap: 26px; align-items: baseline; }}

/* ══════════════════════════════════════════════════════════
   14 ── One column, one rhythm
   Everything that is not deliberately full-bleed lines up on the
   same left and right edge as the cards.
   ══════════════════════════════════════════════════════════ */
.section > .frame,
.cta > .frame { position: relative; }

/* More air, since the rules are gone and space now does the dividing. */
.section { padding: 112px 0; }@media (min-width: 768px)  { .section { padding: 152px 0; }}
@media (min-width: 1024px) { .section { padding: 196px 0; }}

.section + .section { padding-top: 0; }@media (min-width: 1024px) { .section + .section { padding-top: 0; }}

/* Headings sit closer to their own label and further from what precedes. */
.section-header { margin-bottom: 56px; }@media (min-width: 1024px) { .section-header { margin-bottom: 72px; }}

/* ── Word reveal, extended from the hero to every section heading ── */
.section-header h2 .word { transition-duration: 0.85s; }

/* The hero sits on plain ground now — no wash behind the headline. */
.hero { position: relative; }
.hero > .frame { position: relative; z-index: 1; }

/* The long 1.05s reveal is right for a section scrolling up; on the hero
   it just delays the first thing anyone reads. */
.hero [data-animate] {
  transition-duration: 0.62s;
  transition-delay: 0s;
}

/* The headline is the first thing anyone reads and it was finishing last:
   the lead and the buttons had landed while the words were still rising.
   Six words at 32ms with a 0.45s rise puts it in ~0.64s, ahead of them. */
.hero .display .word {
  transition-duration: 0.45s;
}

/* ══════════════════════════════════════════════════════════
   15 ── The hero does not wait for JavaScript
   [data-animate] starts at opacity 0 and only clears once app.js
   runs. app.js sits at the end of the body behind a render-blocking
   webfont stylesheet, so on a cold load the headline was still blank
   a full second in — after the lead and the buttons had landed. The
   hero now animates from CSS, which is parsed before anything paints.
   ══════════════════════════════════════════════════════════ */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.hero [data-animate] {
  opacity: 1;
  transform: none;
  transition: none;
  animation: hero-in 0.66s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero .display          { animation-delay: 0.02s; }
.hero .lead             { animation-delay: 0.11s; }
.hero .hero-cta         { animation-delay: 0.20s; }@media (prefers-reduced-motion: reduce) {
  .hero [data-animate] { animation: none; opacity: 1; transform: none; }}

/* ══════════════════════════════════════════════════════════
   16 ── Mobile nav, now that there is one link
   The second row existed to hold three pills. With a single link it
   left "Referral Program" stranded on its own line under the CTA.
   Put it back on the first row, beside the mark.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .nav-inner { flex-wrap: nowrap; align-items: center; }
  .nav-links {
    display: flex;
    order: 1;
    flex-basis: auto;
    width: auto;
    margin-left: auto;
    margin-right: 8px;
    justify-content: flex-end;
  }
  .nav-actions { order: 2; margin-left: 0; }
  .nav-link {
    padding: 7px 11px;
    font-size: 12px;
    white-space: nowrap;   /* "Referral Program" was wrapping inside its pill */
  }
  .nav-actions .btn {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 12.5px;
    white-space: nowrap;
  }
  .nav-mark { font-size: 21px; }
  .nav-mark .brand-icon { width: 26px; }
}
/* Below ~400px the three items cannot share a row without wrapping, so the
   mark keeps its place and the link steps down to just the word. */
@media (max-width: 400px) {
  .nav-link { font-size: 11.5px; padding: 6px 9px; }
  .nav-actions .btn { font-size: 12px; padding-left: 12px; padding-right: 12px; }
}

/* ══════════════════════════════════════════════════════════
   17 ── The closing CTA is a .cta, not a .section
   `.section + .section { padding-top: 0 }` collapses every other seam,
   but it never matched the waitlist, so Partners' 196px bottom padding
   stacked on the CTA's own 120px top. Same rule, extended.
   ══════════════════════════════════════════════════════════ */
.section + .cta { padding-top: 0; }

/* ══════════════════════════════════════════════════════════
   18 ── The accent word actually accents
   Every headline wraps one word in <em class="hl">, and .hl was
   { background: none; padding: 0 } — a no-op. The word marked for
   emphasis rendered exactly like the rest of the line, which is why
   the titles read flat. A brand rule under it, drawn in.
   ══════════════════════════════════════════════════════════ */
.hl {
  position: relative;
  white-space: nowrap;
}
.hl::after {
  content: '';
  position: absolute;
  left: 0.02em;
  right: 0.02em;
  bottom: 0.01em;
  height: 0.085em;
  min-height: 3px;
  border-radius: 999px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
/* Section headings draw it as their words land. */
.words-in .hl::after { transform: scaleX(1); }
/* The hero has no word split, so it runs on its own timer. */
@keyframes hl-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero .display .hl::after {
  animation: hl-draw 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

/* ── Announcement pill above the headline ── */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  margin-bottom: 30px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.hero-badge:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.hero-badge .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2c3410;
  background: var(--brand);
  padding: 4px 9px;
  border-radius: 999px;
}
.hero-badge b { color: var(--foreground); font-weight: 500; }
.hero-badge svg { width: 12px; height: 12px; opacity: .5; }@media (prefers-reduced-motion: reduce) {
  .hl::after { transform: scaleX(1); transition: none; }
  .hero .display .hl::after { animation: none; transform: scaleX(1); }
  .hero-badge { transition: none; }}

/* ══════════════════════════════════════════════════════════
   19 ── One dark card in the row
   x.ai breaks a light bento with a near-black product surface, and
   that single inversion is what stops the page reading as a sheet of
   paper. The CRM notification is the right one to invert: it is the
   only card showing a real product moment.
   ══════════════════════════════════════════════════════════ */
.bento-card-dark { background: var(--ink); border-color: rgba(255,255,255,0.10); }
.bento-card-dark .bento-visual { background: var(--ink-2); }
.bento-card-dark .bento-visual::after { box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08); }
.bento-card-dark .subhead { color: var(--on-ink); }
.bento-card-dark .description { color: var(--on-ink-muted); }
.bento-card-dark:hover { background: #0e1013; }

.bento-card-dark .ph-card {
  background: #16191d;
  box-shadow: 0 14px 40px -14px rgba(0,0,0,0.7);
}
.bento-card-dark .ph-card-icon { background: var(--brand); color: #1c220a; }
.bento-card-dark .ph-card-app,
.bento-card-dark .ph-card-time { color: var(--on-ink-muted); }
.bento-card-dark .ph-card-title { color: var(--on-ink); }
.bento-card-dark .ph-card-body { color: #a9aeaa; }

/* ── Quality card: the two buffer options, stated not charted ── */
.qv {
  position: absolute;
  inset: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.qv-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
.qv-row.is-on {
  border-color: rgba(184,197,106,0.45);
  background: rgba(184,197,106,0.09);
}
.qv-n {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  color: var(--on-ink);
  letter-spacing: -0.02em;
}
.qv-row.is-on .qv-n { color: var(--brand); }
.qv-l {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
  line-height: 1.35;
}

/* The badge phrases must not break mid-thought — "5 min / buffer" over two
   lines reads as two separate things. Keep each unit whole, and on a phone
   size the whole pill down so the row still fits on one line. */
.hero-badge b { white-space: nowrap; }
.hero-badge .nb { white-space: nowrap; }@media (max-width: 620px) {
  .hero-badge {
    font-size: 11.5px;
    gap: 7px;
    padding: 4px 11px 4px 4px;
    white-space: nowrap;
  }
  .hero-badge .tag { font-size: 9px; padding: 3px 7px; letter-spacing: 0.1em; }
  .hero-badge svg { width: 11px; height: 11px; }}

/* ── Partners Portal, beside the primary CTA ── */
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-portal { white-space: nowrap; }
.portal-short { display: none; }

/* Three items plus the mark do not fit a phone at full length, so the
   portal label drops to one word and the in-page anchor steps aside. */
@media (max-width: 767px) {
  .nav-actions { gap: 6px; }
  .portal-full  { display: none; }
  .portal-short { display: inline; }
}@media (max-width: 480px) {
  .nav-links { display: none; }}

/* ══════════════════════════════════════════════════════════
   20 ── The right-hand group reads as one cluster
   .nav-links and .nav-actions both carried margin-left:auto, so the
   free space split between them and the pill sat 28px adrift of the
   buttons it belongs with. Only the group takes the auto now.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* .nav-inner carries gap:28px between every child, so a margin here just
     added to it. The auto margin already absorbs all the free space before
     .nav-links, which means shrinking the gap only tightens the pill against
     the buttons it belongs with — the mark stays where it is. */
  .nav-inner { column-gap: 10px; }
  .nav-links { margin-left: auto; margin-right: 0; }
  .nav-actions { margin-left: 0; gap: 8px; }
}
/* ══════════════════════════════════════════════════════════
   21 ── Craft pass
   ══════════════════════════════════════════════════════════ */

/* Numerals line up. Inter's default figures are proportional, so
   "$150MM" and "$20MM" sat on different rhythms in the stat row and the
   feed's dollar column staggered as the rows cycled. Tabular fixes both,
   and slashed zeros keep the mono labels unambiguous. */
.impact-item .n,
.feed-row,
.qv-n,
.sc-label, .sc-sub, .sc-t,
.section-word i,
.prog-offer b,
.loop-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* A visible focus ring. The site had two focus rules; a keyboard user could
   not see where they were. Only on :focus-visible, so it never shows for a
   mouse click. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn-primary:focus-visible { outline-color: var(--brand); }
.bento-card-dark a:focus-visible,
.bento-card-dark summary:focus-visible { outline-color: var(--brand); }

/* Scroll-linked drift on the card figures: the artwork travels a little
   slower than the card it sits in, which is what gives those pages depth.
   Pure CSS, and browsers without view() timelines simply get nothing. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bento-visual > * {
      animation: figure-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes figure-drift {
      from { transform: translateY(14px); }
      to   { transform: translateY(-14px); }
    }
  }
}

/* ══════════════════════════════════════════════════════════
   22 ── Mobile
   Measured at 375px: 19 interactive elements came in under the
   44px touch target minimum, and several pieces of real copy sat
   at 10.5-11.5px. Labels and eyebrows stay small on purpose; the
   things a person has to read or hit do not.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Touch targets ── */
  .btn {
    min-height: 46px;
    padding-top: 13px;
    padding-bottom: 13px;
  }
  .nav-actions .btn { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .nav-link         { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-mark         { padding: 11px 0; }
  /* The two links inside the SMS disclosure stay inline: a 44px tall link
     inside a running sentence would break the paragraph, and the target-size
     minimum exempts links within a block of text. */
  .hero-badge       { min-height: 44px; }
  .faq-row summary  { padding: 22px 0; }
  /* The links keep their underline width; the padding widens the hit area. */
  .footer-col a     { padding: 11px 0; }
  .footer-sms a     { display: inline-block; padding: 4px 0; }

  /* ── Copy that has to be read ── */
  .fb-list li  { font-size: 13px; line-height: 1.5; }
  .qv-l        { font-size: 11.5px; }
  .feed-buf    { font-size: 11.5px; }
  .fork-card p { font-size: 15px; }
  .bento-card .description { font-size: 15px; }

  /* ── Rhythm: 112px between every section made for a 9,700px scroll ── */
  .section { padding: 88px 0; }
  .section + .section { padding-top: 0; }
  .section-header { margin-bottom: 40px; }
  .cta { padding: 88px 0; }
}

/* ══════════════════════════════════════════════════════════
   23 ── The schematic goes vertical on a phone
   The wide diagram squeezes a 960-unit viewBox into ~343px: the
   nodes render as 4px dots, the rail almost disappears, and CRM
   runs off the edge. Same five stages, stacked, at a size a thumb
   can actually read.
   ══════════════════════════════════════════════════════════ */
/* `.schematic svg { display: block }` outranks a bare class, so these have
   to be scoped the same way or both diagrams render at once. */
.schematic .sc-tall { display: none; }
@media (max-width: 767px) {
  .schematic .sc-wide { display: none; }
  .schematic .sc-tall { display: block; }

  /* At this aspect the labels are no longer fighting the downscale,
     so the sub-labels come back. */
  .sc-tall .sc-label { font-size: 15px; letter-spacing: 0.09em; }
  .sc-tall .sc-sub   { display: block; font-size: 11.5px; }
  .sc-tall .sc-rail, .sc-tall .sc-tick { stroke-width: 1.6; }
  .sc-tall .sc-trail { stroke-width: 3; }
  .sc-tall .sc-core  { stroke-width: 1.6; }

  .schematic { padding: 4px 0 8px; }
}

/* The packet runs down the rail instead of across it. */
@keyframes sc-travel-y {
  0%   { transform: translateY(0);     opacity: 0; }
  3%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(272px); opacity: 0; }
}
@keyframes sc-trail-grow-y {
  0%   { stroke-dasharray: 0 272; }
  92%  { stroke-dasharray: 272 0; }
  100% { stroke-dasharray: 272 0; opacity: 0; }
}
.schematic .sc-tall .sc-packet    { animation: sc-travel-y 8s linear infinite; }
.schematic .sc-tall .sc-trail-run { animation: sc-trail-grow-y 8s linear infinite; }

/* ── The music toggle ──────────────────────────────────────────
   A bed of music runs under the page if you ask for it. Off until
   then, so the control has to read as an offer, not a warning — and
   big enough, with a plain enough icon, that people try it. Same
   black-on-white logic as the buttons: the on state is the inverse,
   not a colour. Sits above the grain overlay (z-index 9998).      */
.music-toggle {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 28px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
              background-color 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.music-toggle:hover {
  transform: translateY(-2px);
  border-color: #d6d6d6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 14px 34px rgba(0, 0, 0, 0.11);
}
.music-toggle:active { transform: translateY(0); }
.music-toggle:focus-visible { outline: 2px solid var(--foreground); outline-offset: 3px; }

.music-note {
  width: 23px;
  height: 23px;
  display: block;
  color: var(--muted);
  transition: color 0.22s;
}
.music-toggle:hover .music-note { color: var(--foreground); }

.music-toggle.is-playing {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.18);
}
.music-toggle.is-playing .music-note,
.music-toggle.is-playing:hover .music-note {
  color: var(--accent-fg);
  /* Enough of a lilt to say it's running, not enough to be a toy. */
  animation: music-lilt 2s ease-in-out infinite;
}

@keyframes music-lilt {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2px) rotate(-5deg); }
}

.music-hint {
  position: fixed;
  right: 86px;
  bottom: 31px;
  z-index: 9999;
  pointer-events: none;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--foreground);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 13px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.09);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.music-hint.is-in { opacity: 1; transform: translateX(0); }

@media (max-width: 640px) {
  .music-toggle { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  .music-note { width: 21px; height: 21px; }
  .music-hint { right: 70px; bottom: 23px; font-size: 12px; padding: 6px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .music-toggle { transition: none; }
  .music-toggle:hover { transform: none; }
  .music-toggle.is-playing .music-note { animation: none; }
  .music-hint { transition: opacity 0.38s ease; transform: none; }
  .music-hint.is-in { transform: none; }
}
@media print { .music-toggle, .music-hint { display: none; } }

/* ── Module details — collapsible extras inside each product card ── */
.mod-more {
  border-top: 1px solid var(--tint-line);
  padding-top: 12px;
}
.mod-more summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.mod-more summary::-webkit-details-marker { display: none; }
.mod-more[open] .faq-icon { transform: rotate(45deg); color: var(--foreground); }
.mod-more ol, .mod-more ul {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.5;
}
.mod-more li + li { margin-top: 6px; }
.mod-more li b { color: var(--foreground); font-weight: 500; }
.mod-more h5 {
  margin: 16px 0 4px;
  font-size: .94rem;
  font-weight: 500;
  color: var(--foreground);
}
.mod-more p { font-size: .94rem; }

/* Three-card variant of the fork (partners) */
@media (min-width: 1024px) { .fork.fork-3 { grid-template-columns: repeat(3, 1fr); }}

/* Placeholder for copy still to be confirmed — meant to be seen */
.confirm {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .78em;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fff1a8;
  color: #5a4800;
}

/* ── Waitlist form ── */
.wl-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 36px 36px;
  background: var(--tint-2);
  border: 1px solid var(--tint-line);
  border-radius: var(--radius-lg);
}@media (max-width: 620px) { .wl-card { padding: 28px 20px 24px; }}
.wl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}@media (max-width: 620px) { .wl-grid { grid-template-columns: 1fr; }}
.wl-field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.wl-field-wide { grid-column: 1 / -1; }
.wl-field label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.wl-field input {
  width: 100%;
  font: inherit;
  font-size: 16px;               /* 16px keeps iOS from zooming on focus */
  color: var(--foreground);
  background: var(--surface);
  border: 1px solid var(--tint-line);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.wl-field input::placeholder { color: var(--muted-2); }
.wl-field input:focus {
  outline: none;
  border-color: var(--foreground);
  box-shadow: 0 0 0 3px rgba(184, 197, 106, .35);
}
.wl-field input[aria-invalid="true"] { border-color: #b4412f; }
.wl-err { min-height: 1em; font-size: 12.5px; color: #b4412f; }
.wl-err:empty { min-height: 0; }

.wl-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--tint-line);
  border-radius: var(--radius);
  text-align: left;
}
.wl-consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--foreground);
  cursor: pointer;
}
.wl-consent label { font-size: 13px; line-height: 1.55; color: var(--muted); cursor: pointer; }
.wl-consent a { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; }

.wl-submit { margin-top: 28px; display: flex; justify-content: center; }
@media (max-width: 620px) { .wl-submit .btn { width: 100%; justify-content: center; }}

.wl-success { text-align: center; padding: 24px 0 12px; }
.wl-success h3 {
  margin-top: 20px;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.02em;
  outline: none;
}
.wl-success p { margin-top: 6px; color: var(--muted); }
.wl-check { width: 72px; height: 72px; display: block; margin: 0 auto; }
.wl-check-ring {
  fill: var(--surface);
  stroke: var(--brand);
  stroke-width: 3;
  stroke-dasharray: 183;
  stroke-dashoffset: 183;
  animation: wl-draw .7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wl-check-mark {
  fill: none;
  stroke: var(--foreground);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: wl-draw .45s .55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wl-success h3, .wl-success p { animation: wl-rise .5s .8s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes wl-draw { to { stroke-dashoffset: 0; } }
@keyframes wl-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .wl-check-ring, .wl-check-mark { animation: none; stroke-dashoffset: 0; }
  .wl-success h3, .wl-success p { animation: none; }
  .wl-field input { transition: none; }}