/* Olunix marketing site. Tokens and rules: DESIGN.md (v3).
   Order: tokens, base, chrome, hero, sections, cta, footer, motion. */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-latin.woff2') format('woff2');
}
/* metric-matched fallback so the swap doesn't shift the layout */
@font-face {
  font-family: 'Instrument Sans Fallback';
  src: local('Arial');
  size-adjust: 97%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}

:root {
  --canvas: #ffffff;
  --ink: #111113;
  --ink-muted: #63636b;
  --hair: rgba(0, 0, 0, 0.1);
  --ground: #fbfbfc;
  --surface: #f5f5f5;
  --violet: #3a0fb0;
  --violet-hi: #7314e0;
  --violet-tint: rgba(134, 36, 255, 0.13);
  --violet-tint-border: rgba(134, 36, 255, 0.4);
  --blank-bg: #fff7e0;
  --blank-ink: #8a5a00;
  --font: 'Instrument Sans', 'Instrument Sans Fallback', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --rail: 1168px; /* 1120px of content plus 24px padding each side */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow-pill:
    rgba(0, 0, 0, 0.15) 0 2px 5px,
    rgba(0, 0, 0, 0.13) 0 9px 9px,
    rgba(0, 0, 0, 0.08) 0 21px 13px,
    rgba(0, 0, 0, 0.02) 0 37px 15px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);
  --focus: 0 0 0 3px rgba(58, 15, 176, 0.25);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: 80px; }
/* highlighted text: light brand purple instead of the browser blue (solid, so overlapping lines stay one even tint) */
::selection { background: #e8dbff; color: var(--ink); }
/* tight display headings overlap their own lines, so a solid tint would hide the descenders; a see-through one keeps them */
h1::selection, h2::selection, h1 *::selection, h2 *::selection { background: rgba(134, 36, 255, 0.15); }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
h1, h2, h3 { margin: 0; font-weight: 500; color: var(--ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 50; padding: 10px 14px; border-radius: 100px; background: #000; color: #fff; font-size: 14px; }
.skip:focus { top: 12px; }

.rail { width: 100%; max-width: var(--rail); margin: 0 auto; padding: 0 24px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color 200ms ease;
}
.nav.is-stuck { border-bottom-color: var(--hair); }
.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: #000; }
/* logos and icons in flex rows keep their own size (Safari can squash an
   img with max-width: 100% inside an inline-flex row to nothing) */
.brand img, .tile img, .stack-t img, .chip-ch img, .tm-av, .rc-sub img, .ty-brand img, .run-head img, .hub-logo img { flex: none; max-width: none; }
.nav-links { display: flex; gap: 24px; font-size: 14px; letter-spacing: -0.01em; color: var(--ink-muted); }
.nav-links a:hover { color: var(--ink); }
.nav-menu { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }

/* phone menu: full screen, frosted */
.menu {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0 20px 32px;
  border: 0; background: rgba(255, 255, 255, 0.72); color: var(--ink);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
}
.menu[open] { display: flex; flex-direction: column; }
.menu::backdrop { background: transparent; }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.menu-close { width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.menu-links { display: flex; flex-direction: column; margin-top: 32px; }
.menu-links a { display: flex; align-items: center; min-height: 64px; border-bottom: 1px solid var(--hair); font-size: 32px; font-weight: 500; letter-spacing: -0.04em; }
.menu-cta { margin-top: auto; height: 52px; font-size: 15px; }
.menu[open] { animation: tyFade 200ms ease both; }
.menu[open] .menu-links a, .menu[open] .menu-cta { animation: rise 420ms var(--ease) both; }
.menu[open] .menu-links a:nth-child(2) { animation-delay: 40ms; }
.menu[open] .menu-links a:nth-child(3) { animation-delay: 80ms; }
.menu[open] .menu-links a:nth-child(4) { animation-delay: 120ms; }
.menu[open] .menu-cta { animation-delay: 160ms; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px; border-radius: 100px; border: 0;
  font: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  white-space: nowrap; cursor: pointer; color: #fff; box-shadow: var(--shadow-pill);
  transition: background-color 150ms ease, transform 150ms ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--focus), var(--shadow-pill); border-radius: 100px; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-black { background: #000; }
.btn-black:hover { background: #262626; }
.btn-violet { background: var(--violet); }
.btn-violet:hover { background: var(--violet-hi); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
/* The hero fills the window under the nav (65px), with the marquee on its
   bottom edge, whatever the window height; it stops growing at 1040px. The
   copy centres in the space left. svh is the height with the phone's
   toolbars showing, so nothing jumps as they hide (Darren, 2026-10-19). */
.hero {
  --hero-h: min(calc(100vh - 65px), 1040px);
  display: flex; flex-direction: column; min-height: var(--hero-h);
}
@supports (height: 100svh) { .hero { --hero-h: min(calc(100svh - 65px), 1040px); } }
.hero-inner {
  position: relative; z-index: 3; order: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding-top: clamp(32px, 7vh, 96px); padding-bottom: 0;
}
/* tall windows: the copy and the stats centre together as one group, a set
   gap apart; spare height goes above the icons and below the stats, never
   between the form and the stats */
.hero-inner { margin-top: auto; }
.hero-proof { position: relative; z-index: 3; order: 2; display: flex; justify-content: center; margin-bottom: auto; padding-top: clamp(32px, 4.5vh, 48px); padding-bottom: clamp(32px, 6vh, 72px); }
.hero > .mq-title { order: 3; align-self: stretch; width: 100%; }
.hero > .marquee { order: 4; }
/* Short desktop windows (a windowed laptop): the stats stay under the form
   and the hero tightens its gaps so the copy, the stats and the marquee all
   fit the first screen (tighter gaps under 860px, smaller icons and headline under 740px, no icons under 680px). Only on very short windows (under 580px) is there no
   room, and the stats move below the marquee. Phones keep the stats under
   the form and let the marquee fall just below the first screen (Darren,
   2026-10-19). */
@media (min-width: 901px) and (max-height: 860px) {
  .hero-inner { padding-top: clamp(16px, 3vh, 32px); }
  .hero .stack { margin-bottom: 20px; }
  .hero h1 { margin-bottom: 16px; }
  .hero .lede { margin-bottom: 24px; }
  .hero-proof { padding-top: 28px; padding-bottom: clamp(16px, 3vh, 32px); }
}
@media (min-width: 901px) and (max-height: 740px) {
  .hero .stack { height: 36px; margin-bottom: 14px; }
  .hero .stack-t { width: 36px; height: 36px; }
  .hero h1 { font-size: 54px; margin-bottom: 14px; }
  .hero .lede { margin-bottom: 20px; }
  .hero-proof { padding-top: 22px; }
}
@media (min-width: 901px) and (max-height: 680px) {
  .hero .stack { display: none; }
  .hero h1 { font-size: 48px; }
}
@media (min-width: 901px) and (max-height: 620px) {
  .hero-inner { padding-top: 12px; }
  .hero h1 { font-size: 44px; margin-bottom: 12px; }
  .hero .lede { margin-bottom: 16px; }
  .hero-proof { padding-top: 16px; padding-bottom: 12px; }
}
@media (min-width: 901px) and (max-height: 579px) {
  .hero-inner { flex: 1 0 auto; margin-top: 0; min-height: calc(var(--hero-h) - var(--mq-h, 108px)); padding-bottom: 24px; }
  .hero-proof { order: 5; margin-bottom: 0; padding-top: 28px; padding-bottom: 40px; }
}
/* soft white plate so the dots never cross the copy */
.hero-inner::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: 760px; height: 420px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0));
}
h1 {
  max-width: 900px; margin-bottom: 22px;
  font-size: 64px; line-height: 0.96; letter-spacing: -0.07em; color: #000;
}
.lede { max-width: 620px; margin-bottom: 32px; font-size: 17px; line-height: 1.45; color: var(--ink-muted); }

/* hero channel tiles */
.stack { display: flex; justify-content: center; height: 44px; margin-bottom: 30px; }
.stack-t {
  --rot: 0deg;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -8px; border-radius: 12px; z-index: calc(20 - var(--i));
  background: #fff; border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 16px rgba(0, 0, 0, 0.06);
  transform: rotate(var(--rot));
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 180ms ease;
}
.stack-t:first-child { margin-left: 0; }
.stack-t:nth-child(odd) { --rot: -6deg; }
.stack-t:nth-child(even) { --rot: 6deg; }
.stack-t:nth-child(3) { --rot: 0deg; }
.stack-t.is-out { transform: rotate(var(--rot)) scale(0.5) translateY(8px); opacity: 0; transition-duration: 180ms, 160ms; }
.stack-t.is-new { transform: rotate(var(--rot)) scale(0.4) translateY(-10px); opacity: 0; }

/* waitlist: three steps in one spot. The pill holds one field and the
   button; under it, Back, a violet progress bar and Skip (phone step only). */
.wl { width: 100%; max-width: 560px; }
.wl > [hidden] { display: none !important; }
.wl-form {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 6px 6px 6px 8px;
  border-radius: 100px; background: #fff; border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
  transition: border-color 150ms ease;
}
.wl-form:focus-within { box-shadow: var(--focus), 0 8px 24px rgba(0, 0, 0, 0.05); }
.wl-form.is-invalid { border-color: #c81e1e; }
.wl-field { flex: 1; min-width: 0; overflow: hidden; display: grid; }
/* every step sits in the same cell, so the outgoing and incoming fields
   overlap during the swap and the pill never changes size */
.wl-step { grid-area: 1 / 1; display: flex; align-items: center; min-width: 0; }
.wl-step[hidden] { display: none; }
.wl-step.is-in { animation: wlIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.wl-step.is-back { animation: wlBack 280ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.wl-step.is-leave { animation: wlLeave 280ms cubic-bezier(0.22, 1, 0.36, 1) both; pointer-events: none; }
.wl-step.is-leave-back { animation: wlLeaveBack 280ms cubic-bezier(0.22, 1, 0.36, 1) both; pointer-events: none; }
@keyframes wlIn { from { opacity: 0; transform: translateX(18px); } }
@keyframes wlBack { from { opacity: 0; transform: translateX(-18px); } }
@keyframes wlLeave { to { opacity: 0; transform: translateX(-18px); } }
@keyframes wlLeaveBack { to { opacity: 0; transform: translateX(18px); } }
.wl-input {
  flex: 1; width: 100%; min-width: 0; height: 44px; padding: 0 14px;
  border: 0; outline: 0; background: transparent; border-radius: 100px;
  font: inherit; font-size: 16px; color: var(--ink);
}
.wl-input::placeholder { color: var(--ink-muted); }
.wl-input:focus-visible { box-shadow: none; }

/* country chip: a real <select> laid over the flag and dial code, so phones
   get their native picker */
.wl-cc { position: relative; flex: none; display: inline-flex; align-items: center; height: 36px; padding: 6px 0; margin-left: 2px; border-radius: 100px; background: var(--surface); }
.wl-cc:hover { background: #ededf0; }
.wl-cc:focus-within { box-shadow: var(--focus); }
.wl-cc select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.wl-cc-face { display: inline-flex; align-items: center; gap: 6px; padding: 0 26px 0 12px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.wl-cc-face::after { content: ''; position: absolute; right: 12px; top: 14px; width: 5px; height: 5px; border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted); transform: rotate(45deg); }
.wl-phone .wl-input { padding-left: 10px; }

/* under the pill: Back, three quiet dashes, Skip. Nothing shows on the
   name step, so the form starts as a simple one-field input. */
.wl-meta { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 12px; max-height: 44px; margin-top: 6px; padding: 0 8px; overflow: hidden; transition: max-height 280ms var(--ease), margin-top 280ms var(--ease); }
/* name step: the row takes no space, so nothing sits between the form and the note's following content */
.wl[data-at="1"] .wl-meta { max-height: 0; margin-top: 0; }
.wl-link {
  height: 32px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-muted); border-radius: 6px;
  transition: opacity 300ms ease, color 150ms ease;
}
.wl-link:hover { color: var(--ink); }
.wl-back { justify-self: start; }
.wl[data-at="1"] .wl-back { visibility: hidden; opacity: 0; }
.wl-dots { justify-self: center; display: flex; gap: 6px; transition: opacity 300ms ease; }
.wl[data-at="1"] .wl-dots { opacity: 0; }
.wl-dots i { width: 18px; height: 3px; border-radius: 2px; background: #e2e2e8; transition: background-color 280ms ease; }
.wl[data-at="2"] .wl-dots i:nth-child(1) { background: rgba(58, 15, 176, 0.32); }
.wl[data-at="2"] .wl-dots i:nth-child(2) { background: var(--violet); }

.wl-consent { display: flex; align-items: flex-start; gap: 10px; margin: 12px auto 0; max-width: 480px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.88); text-align: left; font-size: 13px; line-height: 1.45; color: var(--ink-muted); cursor: pointer; }
.wl-consent[hidden] { display: none; }
.wl-consent input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--violet); cursor: pointer; }
.wl-status { min-height: 20px; margin-top: 10px; font-size: 13px; color: var(--ink-muted); }
.wl-status.is-bad { color: #9b1c1c; }

/* sits directly under the form, centred with it */
.wl-note { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--ink-muted); text-align: center; }

/* after joining: one quiet line in place of the form; the popup carries the rest */
.wl-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; min-height: 58px; }
.wl-done-line { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; }
.wl-done-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px var(--violet-tint); }
.wl-reopen { color: var(--violet); }

/* thank-you popup: frosted page, not a dark overlay */
.ty-lock { overflow: hidden; }
.ty { width: min(520px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); margin: auto; padding: 0; border: 0; border-radius: 20px; background: transparent; color: var(--ink); overflow: visible; }
.ty::backdrop { background: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ty[open] { animation: tyIn 320ms var(--ease) both; }
.ty[open]::backdrop { animation: tyFade 240ms ease both; }
@keyframes tyIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes tyFade { from { opacity: 0; } }
.ty-card {
  position: relative; max-height: calc(100dvh - 32px); overflow: auto; padding: 32px 32px 28px;
  border-radius: 20px; background: #fff; border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 24px 64px rgba(17, 17, 19, 0.14);
}
.ty-close {
  position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); cursor: pointer;
}
.ty-close:hover { background: var(--surface); color: var(--ink); }
.ty-close:focus-visible { border-radius: 50%; }
.ty-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; }
.ty-eyebrow { margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--violet); }
.ty-title { margin-bottom: 10px; font-size: 32px; line-height: 1.1; letter-spacing: -0.04em; }
.ty-body { margin-bottom: 24px; color: var(--ink-muted); }
.ty-discord {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 16px;
  border-radius: 16px; border: 1px solid var(--hair); background: var(--ground);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.ty-discord:hover { border-color: rgba(88, 101, 242, 0.45); background: #fff; }
.ty-discord-icon { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; }
.ty-discord-icon img { width: 44px; height: 44px; }
.ty-discord-body { display: grid; gap: 2px; }
.ty-discord-eyebrow { font-size: 12px; color: var(--ink-muted); }
.ty-discord-title { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.ty-discord-sub { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.ty-discord-go {
  grid-column: 2; justify-self: start; display: inline-flex; align-items: center; height: 40px; margin-top: 8px; padding: 0 16px;
  border-radius: 100px; background: #000; color: #fff; font-size: 14px; font-weight: 500;
}
.ty-discord:hover .ty-discord-go { background: #262626; }
.ty-socials { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 13px; color: var(--ink-muted); }
.ty-socials span { margin-right: 4px; }
.ty-socials a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--hair); background: #fff; }
.ty-socials a:hover { background: var(--surface); }

/* hero proof: the line in dark grey capitals (same type as the "One platform"
   label), over one frosted band with the three figures on one line. The
   frost is a white layer over our own clouds. (Darren, 2026-10-18) */
.proof { display: flex; flex-direction: column; align-items: center; }
.proof-label { display: block; margin: 0 0 8px; font-size: 12px; line-height: 20px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #3d3d45; }
/* only the title named by .proof[data-title] shows */
.proof:not([data-title="a"]) [data-t="a"], .proof:not([data-title="b"]) [data-t="b"], .proof:not([data-title="c"]) [data-t="c"] { display: none; }
/* a frosted band, no border: the clouds and frost fade out to the page on
   the left and right (Darren, 2026-10-18). The fade is on the background
   layers only, so the figures stay crisp. */
.stats-glass { position: relative; isolation: isolate; --band-fade: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.stats-sky {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  -webkit-mask-image: var(--band-fade); mask-image: var(--band-fade);
}
.stats-sky .step-ht { position: absolute; inset: 0; }
.stats-sky .fluid.is-live ~ .step-ht { opacity: 0; transition: opacity 900ms ease; }
/* the frost: over the clouds, under the figures */
.stats-glass::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.6));
  border-top: 1px solid rgba(58, 15, 176, 0.14); border-bottom: 1px solid rgba(58, 15, 176, 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  -webkit-mask-image: var(--band-fade); mask-image: var(--band-fade);
}
.stats { position: relative; z-index: 2; display: flex; justify-content: center; margin: 0; padding: 14px 56px; }
.stat { display: flex; flex-direction: row-reverse; align-items: baseline; gap: 6px; padding: 0 20px; }
.stat + .stat { border-left: 1px solid rgba(58, 15, 176, 0.12); }
.stat-n { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.br-sm { display: none; }
.stat-l { margin: 0; font-size: 15px; line-height: 1.3; color: #3d3d45; white-space: nowrap; }
/* entrance (armed by the script): the capsule lands out of a heavy blur,
   then the line and each figure sharpen in turn while the numbers count */
.proof.is-armed .stats-glass { opacity: 0; filter: blur(18px); transform: translateY(14px) scale(0.94); transition: opacity 900ms ease, filter 1100ms ease, transform 1100ms cubic-bezier(0.16, 1, 0.3, 1); }
.proof.is-armed.is-on .stats-glass { opacity: 1; filter: none; transform: none; }
.proof.is-armed .proof-label, .proof.is-armed .stat-n, .proof.is-armed .stat-l { opacity: 0; filter: blur(10px); transition: opacity 700ms ease, filter 900ms ease; }
.proof.is-armed.is-on .proof-label, .proof.is-armed.is-on .stat-n, .proof.is-armed.is-on .stat-l { opacity: 1; filter: none; }
.proof.is-on .proof-label { transition-delay: 150ms; }
.proof.is-on .stat:nth-child(2) .stat-n, .proof.is-on .stat:nth-child(2) .stat-l { transition-delay: 450ms; }
.proof.is-on .stat:nth-child(3) .stat-n, .proof.is-on .stat:nth-child(3) .stat-l { transition-delay: 600ms; }

/* background layers */
.fluid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%; opacity: 0; transition: opacity 900ms ease;
}
.fluid.is-live { opacity: 1; }
/* panels and CTA: the living clouds replace the static layer once running */
.fluid-panel, .fluid-cta { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.has-fluid > .step-ht, .has-fluid > .halftone-cta { opacity: 0; transition: opacity 900ms ease; }
.fluid-cta {
  z-index: 0;
  mask-image: linear-gradient(transparent, #000 7%, #000 86%, transparent), radial-gradient(60% 70% at 50% 50%, rgba(0, 0, 0, 0.3) 15%, #000 100%);
  -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 86%, transparent), radial-gradient(60% 70% at 50% 50%, rgba(0, 0, 0, 0.3) 15%, #000 100%);
  mask-composite: intersect; -webkit-mask-composite: source-in;
}
.fallback { display: none; }
.no-webgl .fluid { display: none; }
.no-webgl .fallback { display: block; }
/* the hero canvas draws the grid itself (data-grid) so it can twinkle; the
   CSS grid stays for phones, reduced motion, Save-Data and no WebGL */
.fluid.is-live ~ .dotgrid { opacity: 0; transition: opacity 900ms ease; }
.dotgrid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.12) 0.5px, transparent 0.9px);
  background-size: 3px 3px; background-position: 1.5px 1.5px;
  mask: radial-gradient(75% 70% at 50% 40%, transparent 30%, #000 100%);
  -webkit-mask: radial-gradient(75% 70% at 50% 40%, transparent 30%, #000 100%);
}
.halftone {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; background-repeat: repeat-x;
  mask-image: linear-gradient(#000 0%, #000 78%, transparent 100%), radial-gradient(34% 40% at 50% 48%, transparent 30%, #000 100%);
  -webkit-mask-image: linear-gradient(#000 0%, #000 78%, transparent 100%), radial-gradient(34% 40% at 50% 48%, transparent 30%, #000 100%);
  mask-composite: intersect; -webkit-mask-composite: source-in;
}
.grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.38; mix-blend-mode: multiply; background-size: 220px 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 45%, #fff 100%);
}

/* channel marquee */
.mq-title { position: relative; z-index: 3; display: flex; align-items: center; gap: 20px; max-width: var(--rail); margin: 0 auto 8px; padding: 0 24px; }
.mq-title::before, .mq-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, rgba(224, 226, 230, 0), #e0e2e6 20%, #e0e2e6 80%, rgba(224, 226, 230, 0)); }
.mq-title-text {
  /* text only, no pill (Darren, 2026-10-18) */
  font-size: 12px; line-height: 20px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); white-space: nowrap;
}
.marquee {
  position: relative; z-index: 3; overflow: hidden; padding: 14px 0 26px;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track, .marquee.is-held .marquee-track { animation-play-state: paused; }
/* the gap after the last chip equals the gap between chips (padding-right =
   gap), so the join between the two identical groups is invisible */
.marquee-group { display: flex; flex: none; gap: 10px; margin: 0; padding: 0 10px 0 0; list-style: none; }
.chip-ch {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 12px;
  border-radius: 100px; background: #fff; border: 1px solid var(--hair);
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
}
.chip-ch { flex: none; }
.chip-ch img, .chip-ch svg { flex: none; width: 20px; height: 20px; object-fit: contain; }
.chip-ch img + img { margin-left: -4px; }
.ico-page { color: var(--ink); }
/* moves by exactly one group's width (set in px by the script; -50% of the
   track is the same thing without it) */
@keyframes marquee { to { transform: translateX(var(--mq-shift, -50%)); } }

/* ---------- sections ---------- */
.section { position: relative; padding-top: 224px; }
/* option 3 (try with ?band in the URL): How it works on a pale violet band */
.band #how-it-works { margin-top: 80px; padding-top: 80px; padding-bottom: 96px; background: #faf9ff; border-top: 1px solid rgba(58, 15, 176, 0.08); border-bottom: 1px solid rgba(58, 15, 176, 0.08); }
.band #how-it-works .step-art { background: #fff; }
.label { margin-bottom: 14px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-muted); }
h2 { font-size: 48px; line-height: 1.05; letter-spacing: -0.04em; }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }
.sub { max-width: 520px; margin-top: 16px; font-size: 17px; line-height: 1.45; color: var(--ink-muted); }
.head { max-width: 640px; margin-bottom: 48px; }

/* features: a 2x2 grid. Each card is a title and one line over a halftone
   panel with a small live demo of that feature (script at the bottom of
   index.html). Without JS, or with reduced motion, each demo shows its
   final frame; the blank and the Copy button still work. */
/* features: shadcn bento-grid-03 layout. Full-height hairlines at the rail
   edges, full-width hairlines under the head and under the grid. Two
   features each side of a stage that plays one demo at a time; the feature
   on show is tinted and a bar fills along its foot. */
/* wider side cards, a smaller stage and no dead space in the cards, so the
   whole section sits lower (Darren, 2026-10-19) */
.fb { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.25fr) minmax(0, 1.2fr); grid-template-areas: "a s b" "c s d"; gap: 20px; }
.fb-a { grid-area: a; } .fb-b { grid-area: b; } .fb-c { grid-area: c; } .fb-d { grid-area: d; }
.fb-item {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 0; padding: 24px 26px; border-radius: 16px; border: 1px solid var(--hair); background: #fff;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
}
.fb-pick { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; background: none; cursor: pointer; }
.fb-pick:focus-visible { box-shadow: inset var(--focus); border-radius: 16px; }
/* the icon sits in a small tile so the top of the card carries weight */
.fb-ico { flex: none; box-sizing: content-box; padding: 10px; border-radius: 12px; border: 1px solid var(--hair); background: #fff; color: var(--ink); transition: color 300ms var(--ease), border-color 300ms var(--ease); }
.fb-copy h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.025em; }
.fb-copy p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-muted); max-width: 44ch; }
.fb-item:hover { border-color: rgba(0, 0, 0, 0.2); }
.fb-item.is-on { background: #f7f5ff; border-color: var(--violet-tint-border); }
.fb-item.is-on .fb-ico { color: var(--violet); border-color: var(--violet-tint-border); }
.fb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; }
.fb-bar i { display: block; height: 100%; background: var(--violet); transform: scaleX(0); transform-origin: left; }
.fb-item.is-on .fb-bar i { transform: scaleX(1); }
.fb.is-auto .fb-item.is-on:not(.is-held) .fb-bar i { animation: fbBar 6.4s linear both; }
@keyframes fbBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fb-stage { grid-area: s; position: relative; overflow: hidden; isolation: isolate; min-height: 392px; border-radius: 16px; border: 1px solid var(--hair); background: #f7f5ff; }
.fb-stage > .fluid, .fb-stage > .step-ht { z-index: 0; }
.fb-stage .fluid.is-live ~ .step-ht { opacity: 0; transition: opacity 900ms ease; }
.fb-demo {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 28px;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 420ms var(--ease), transform 420ms var(--ease), visibility 0s 420ms;
}
.fb-demo.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 420ms var(--ease) 120ms, transform 420ms var(--ease) 120ms, visibility 0s; }
.fb-demo .mock { width: 100%; max-width: 330px; font-size: 14px; }
/* the demos drawn larger on the wide stage (zoom keeps layout honest) */
@media (min-width: 901px) { .fb-demo { padding: 20px; } .fb-demo > .mock { zoom: 1.06; } .fb-demo > .fx-fan { zoom: 0.9; } }
.feat-cap { margin-top: 24px; font-size: 13px; color: var(--ink-muted); }

/* 1. sources: the figures light up as their footnotes appear */
.fx-src p { line-height: 1.75; }
.fx-src .src { white-space: nowrap; }
.fx-notes { margin: 12px 0 0; padding: 10px 0 0 18px; border-top: 1px solid var(--hair); font-size: 12px; line-height: 1.6; color: var(--ink-muted); }
.fx-notes li::marker { color: var(--violet); font-weight: 600; }
.is-live .src[data-at] { transition: background-color 360ms var(--ease); }
.is-live .src[data-at]:not(.on) { opacity: 1; background-color: transparent; }
.is-live .src[data-at] sup { transition: opacity 360ms var(--ease); }
.is-live .src[data-at]:not(.on) sup { opacity: 0; }

/* 2. the blank: a real input; the status follows what's in it */
.fx-fill-line { line-height: 1.75; }
.fx-input {
  width: 64px; height: 26px; padding: 0 8px; border-radius: 6px; border: 1px dashed #d9a600;
  background: var(--blank-bg); color: var(--blank-ink); font: inherit; font-size: 14px; font-weight: 600; text-align: center;
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease), color 240ms var(--ease);
}
.fx-input:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.fx-input.filled { border-style: solid; border-color: var(--violet-tint-border); background: var(--violet-tint); color: var(--ink); }
.fx-hint { margin-top: 10px; font-size: 12px; color: var(--ink-muted); }
.mock .fx-s0 { display: none; }
.fx-fill[data-f="0"] .mock .fx-s0, .fx-fill[data-f="1"] .mock .fx-s0 { display: inline-flex; }
.fx-fill[data-f="0"] .mock .fx-s1, .fx-fill[data-f="1"] .mock .fx-s1 { display: none; }

/* 3. one fact, four channels */
.fx-fan { width: 100%; max-width: 400px; }
.fx-fact {
  display: flex; flex-direction: column; gap: 2px; margin: 0 auto 28px; width: max-content; max-width: 100%;
  padding: 10px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--violet-tint-border); box-shadow: var(--shadow-card);
  font-size: 14px; font-weight: 500; text-align: center;
}
.fx-fact-k { font-size: 12px; font-weight: 400; color: var(--ink-muted); }
.fx-outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.fx-outs li {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px;
  background: #fff; border: 1px solid var(--hair); font-size: 13px; font-weight: 500;
}
.is-live .fx-outs li:not(.on) { opacity: 0.4; transform: translateY(4px); }

/* 4. Copy: a cursor clicks it; a real click copies the text */
.fx-copy-text { margin-bottom: 14px; line-height: 1.6; }
.fx-actions { position: relative; display: flex; align-items: center; gap: 10px; }
.fx-copy-btn { cursor: pointer; }
.fx-copy-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.fx-c0 { display: none; }
.fx-copy[data-f="0"] .fx-c0, .fx-copy[data-f="1"] .fx-c0 { display: inline; }
.fx-copy[data-f="0"] .fx-c1, .fx-copy[data-f="1"] .fx-c1 { display: none; }
.fx-done { font-size: 12px; color: var(--ink-muted); }
.fx-cursor { position: absolute; left: 44px; top: 18px; pointer-events: none; }
.fx-cursor { display: none; }
.is-live .fx-cursor { display: block; transition: opacity 300ms var(--ease), transform 700ms var(--ease); }
.is-live .fx-cursor:not(.on) { transform: translate(120px, 40px); }
.is-live[data-f="2"] .fx-cursor { opacity: 0; }

/* the two "why not" lines under the example draft */
/* the Instagram and TikTok files are square app icons with white corners:
   round them off so the paired icons overlap cleanly */
img[src$="/instagram.png"], img[src$="/tiktok.png"] { border-radius: 24%; }

/* ---- copy-led sections (final copy, 2026-10-22). Plain first layouts;
   each gets its own visual pass with Darren. ---- */
.head-wide { max-width: 760px; }
.sub-wide { max-width: 680px; }
/* text points under a hairline (pain, shift, comparison) */
.pts { display: grid; gap: 28px 48px; }
.pts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pts p { padding-top: 20px; border-top: 1px solid var(--hair); color: var(--ink-muted); max-width: 52ch; }
.pts strong { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.pts-4 strong { display: inline; margin: 0; }
.pain-close { max-width: 620px; margin-top: 48px; font-size: 22px; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); }
/* small text cards (coaching, about you) */
.cards { display: grid; gap: 20px; }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-s { padding: 24px 24px 26px; border-radius: 16px; border: 1px solid var(--hair); background: #fff; }
.card-s h3 { margin: 0 0 8px; font-size: 18px; }
.card-s p { color: var(--ink-muted); }
.mid-cta .btn + .btn { margin-left: -6px; }
/* a closing row under the questions, in the list column */
.cmp-more { margin-top: 32px; }
.faq-more { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 18px 20px; border-radius: 14px; background: var(--surface); }
.faq-more p { margin: 0; font-size: 15px; color: var(--ink); }
@media (max-width: 640px) { .faq-more { flex-direction: column; align-items: flex-start; } }
.hiw-note { max-width: 640px; margin-top: 40px; color: var(--ink-muted); }
/* founding offer: a violet cloud band */
.founding { position: relative; overflow: hidden; isolation: isolate; padding: 64px 48px; border-radius: 20px; border: 1px solid var(--violet-tint-border); background: #f7f5ff; }
.founding > .step-ht { position: absolute; inset: 0; z-index: 0; }
.founding-in { position: relative; z-index: 1; max-width: 620px; }
.founding-in h2 { margin: 0; }
.founding-in .sub { margin-bottom: 28px; }
/* how every draft gets made: your business left, what's winning right,
   your company in the middle, drafts under it */
.think { margin: 0; }
.think-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr); align-items: center; gap: 24px; }
.think-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.think-wires path { fill: none; stroke: var(--violet); stroke-width: 1.4; stroke-opacity: 0.35; stroke-linecap: round; }
.think-side { position: relative; z-index: 1; }
.think-cap { margin-bottom: 12px; font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.think-r .think-cap { text-align: right; }
.think-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.think-list li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--hair); background: #fff; box-shadow: var(--shadow-card); font-size: 14px; }
.think-r .think-list li { justify-content: flex-end; }
.think-list img, .think-list svg, .think-out img { flex: none; }
.think .tile-pair { display: inline-flex; flex: none; }
.think .tile-pair img + img { margin-left: -3px; }
.think-mid { position: relative; z-index: 1; display: flex; justify-content: center; }
.think-core { display: inline-flex; align-items: center; gap: 10px; padding: 18px 22px; border-radius: 16px; border: 1px solid var(--violet-tint-border); background: #fff; box-shadow: var(--shadow-card); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; transition: border-color 500ms var(--ease), box-shadow 500ms var(--ease); }
.think-core.is-lit { border-color: var(--violet); box-shadow: 0 0 0 6px rgba(58, 15, 176, 0.08), var(--shadow-card); }
.think-out { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; padding: 0; list-style: none; }
.think-out li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--violet-tint); border: 1px solid var(--violet-tint-border); color: var(--violet); font-size: 14px; font-weight: 500; }
.think figcaption { margin-top: 24px; text-align: center; font-size: 15px; color: var(--ink-muted); }
/* the scroll moment (only when the script runs it) */
.think-anim .think-l .think-list li { opacity: 0; transform: translateX(-28px); }
.think-anim .think-r .think-list li { opacity: 0; transform: translateX(28px); }
.think-anim .think-out li { opacity: 0; transform: translateY(10px); }
.think-anim .think-wires path { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.think-anim .think-list li, .think-anim .think-out li { transition: opacity 600ms var(--ease), transform 700ms var(--ease); }
.think-anim .think-wires path { transition: stroke-dashoffset 900ms var(--ease); }
.think-anim.is-on .think-list li, .think-anim.is-on .think-out li { opacity: 1; transform: none; }
.think-anim.is-on .think-wires path { stroke-dashoffset: 0; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; margin-top: 48px; }
.vs p { padding-top: 20px; border-top: 1px solid var(--hair); color: var(--ink-muted); max-width: 52ch; }
.vs strong { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.mid-cta { display: flex; align-items: center; gap: 16px; margin-top: 48px; font-size: 13px; color: var(--ink-muted); }

/* draft details shared by the example, the channel cards and the steps */
.src { padding: 2px 6px; border-radius: 5px; background: var(--violet-tint); color: var(--ink); }
.src sup { margin-left: 1px; font-size: 10px; font-weight: 600; color: var(--violet); }
.blank {
  display: inline-block; padding: 0 8px; border-radius: 4px; border: 1px dashed #d9a600;
  background: var(--blank-bg); color: var(--blank-ink); font-size: 13px; line-height: 22px;
}
.btn-s {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 14px; border-radius: 100px; border: 1px solid var(--hair); background: #fff;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink);
}
.btn-s-dark { background: #000; border-color: #000; color: #fff; }
.btn-s { cursor: default; }
.ma-line { display: block; height: 8px; border-radius: 4px; background: #ececef; }
.ma-line + .ma-line { margin-top: 8px; }
.ma-short { width: 62%; }

.tile { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid var(--hair); }
.tile-sm { width: 28px; height: 28px; border-radius: 8px; }
.tile-xs { width: 24px; height: 24px; border-radius: 7px; }
.tile-pair img + img { margin-left: -3px; }

/* channels bento: separate rounded cards (shadcn bento-grid-01 look). Each
   card is a dot-ground example on top, then the channel and its line under a
   hairline. Wide cards span two of three columns. */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* subgrid lines up the visual and text rows across each row of cards */
.bento-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; align-content: start; overflow: hidden; border: 1px solid var(--hair); border-radius: 16px; background: #fff; }
.bento-wide { grid-column: span 2; }
.bento-visual {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: 248px; padding: 32px 28px; border-bottom: 1px solid var(--hair);
  background-color: var(--ground);
  background-image: radial-gradient(rgba(0, 0, 0, 0.13) 0.6px, transparent 0.95px); background-size: 6px 6px;
}
.bento-visual-flat { background-color: #f6f6f8; background-image: none; }
.bento-visual > * { width: 100%; }
.bento-text { padding: 28px 32px 32px; }
/* one violet sky behind the whole grid, seen only through the picture areas
   (the script clips it to their union and adds .has-sky). Without the script
   the pictures keep their grey ground and the sky stays hidden. */
.bento { position: relative; isolation: isolate; }
.bento-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #f7f5ff; visibility: hidden; }
.bento-sky .step-ht { position: absolute; inset: 0; }
/* phones get the static clouds: paint one screen-tall tile and repeat it
   down the grid (the script copies the tile to the sky) */
@media (max-width: 640px) { .bento-sky .step-ht { bottom: auto; height: 700px; } }
.bento-card { position: relative; z-index: 1; }
.bento.has-sky .bento-sky { visibility: visible; }
.bento.has-sky .bento-card { background: transparent; }
.bento.has-sky .bento-text { background: #fff; }
.bento.has-sky .bento-visual-flat { background-color: transparent; }
.bento-text h3 { margin-bottom: 6px; }
.bento-text > p { max-width: 52ch; color: var(--ink-muted); }
.bento-text h3 { display: flex; align-items: center; gap: 10px; }

/* ---- desk agent graphics: seven different moving pictures ----
   Base state (no animation) is each one's finished frame, so reduced motion
   and no JS show something complete. Everything pauses off screen. */
.ag { display: flex; justify-content: center; width: 100%; font-size: 13px; line-height: 1.5; }
.ag .w { font-style: normal; }
.bento.is-off *, .bento.is-off *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { #channels .bento *, #channels .bento *::after { animation: none !important; } }

.tw-live .w { opacity: 0; transition: opacity 140ms ease; }
.tw-live .w.on { opacity: 1; }
/* typed letters take no space until they appear, so the caret sits at the end of what is typed */
.tw-live .seo-search .w:not(.on) { display: none; }

/* LinkedIn: the post types itself, sourced quote and blank included */
.li-post { width: 100%; max-width: 540px; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); }
.li-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.li-text { min-height: 110px; font-size: 14px; line-height: 1.8; }
.li-note { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hair); font-size: 12px; line-height: 1.4; color: var(--ink-muted); }
.li-note sup { color: var(--violet); font-weight: 600; }

/* X: the thread builds post by post */
.x-thread { width: 100%; max-width: 300px; margin: 0; padding: 0; list-style: none; }
.x-thread li { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 0; animation: xIn1 7s var(--ease) infinite; }
.x-thread li:nth-child(2) { animation-name: xIn2; }
.x-thread li:nth-child(3) { animation-name: xIn3; }
.x-thread li:nth-child(4) { animation-name: xIn4; }
.x-thread li:not(:last-child)::after { content: ''; position: absolute; left: 12px; top: 33px; bottom: -7px; width: 1.5px; background: #ddd8f6; }
.x-av { position: relative; z-index: 1; flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(#e7e3fb, #d9d3f7); }
.x-thread p { flex: 1; padding: 7px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--hair); }
.x-thread b { margin-right: 4px; font-weight: 600; color: var(--violet); }
/* the four posts arrive one after another, hold, then fade out together */
@keyframes xIn1 { 0% { opacity: 0; transform: translateY(8px); } 6%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes xIn2 { 0%, 9% { opacity: 0; transform: translateY(8px); } 15%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes xIn3 { 0%, 18% { opacity: 0; transform: translateY(8px); } 24%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes xIn4 { 0%, 27% { opacity: 0; transform: translateY(8px); } 33%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }

/* SEO: the question gets typed, then the article outline is built around it */
.seo-wrap { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 540px; }
.seo-search { display: flex; align-items: center; gap: 9px; padding: 10px 16px; line-height: 18px; border-radius: 100px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); font-size: 14px; color: var(--ink-muted); }
.seo-search span { display: inline-flex; align-items: center; color: var(--ink); white-space: nowrap; }
.seo-caret { display: inline-block; width: 1.5px; height: 16px; margin-left: 1px; background: var(--ink); animation: blink 1s steps(1) infinite; }
/* solid while letters are going in, blinking only once it stops */
.is-typing .seo-caret { animation: none; opacity: 1; }
/* "entered": the caret goes, like pressing Enter on a search */
.is-done .seo-caret { display: none; }
.seo-doc { min-height: 172px; padding: 10px 14px 4px; border-radius: 12px; background: #fff; border: 1px solid var(--hair); }
.seo-doc .mock-lbl { margin-bottom: 4px; }
.seo-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.seo-row b { flex: none; min-width: 26px; padding: 1px 6px; border-radius: 5px; background: var(--violet-tint); color: var(--violet); font-size: 10.5px; font-weight: 600; text-align: center; }

/* Reddit: thread cards slide across one at a time, each with its reply drafted */
.ag-rc { justify-content: flex-start; overflow: hidden; margin: 0 -28px -30px; width: calc(100% + 56px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
/* extra room under the cards so their shadow fades out fully instead of
   being cut off by the strip (the strip's negative bottom margin keeps the card height the same) */
.rc-track { position: relative; flex: none; display: flex; gap: 14px; padding: 10px 0 44px; transition: transform 700ms var(--ease); }
.rc-card { flex: none; width: 220px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); }
.rc-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.rc-title { margin: 8px 0 12px; font-size: 14px; font-weight: 500; line-height: 1.35; min-height: 38px; }
.rc-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 100px; background: var(--violet-tint); color: var(--violet); font-size: 11.5px; font-weight: 500; }
/* Ads: a deck of ad versions; the front card lifts off and goes to the back */
.dk { position: relative; width: 100%; max-width: 280px; height: 170px; margin-top: 18px; }
.dk-card { position: absolute; left: 0; right: 0; top: 0; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card);
  transform-origin: top center; animation: dkCycle 7.5s var(--ease) infinite; }
.dk2 { animation-delay: -5s; transform: translateY(-10px) scale(0.95); opacity: 0.8; z-index: 2; }
.dk3 { animation-delay: -2.6s; transform: translateY(-20px) scale(0.9); opacity: 0.55; z-index: 1; }
.dk1 { z-index: 3; }
.dk-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12.5px; }
.dk-tag { margin-left: auto; padding: 2px 8px; border-radius: 100px; background: var(--violet-tint); color: var(--violet); font-size: 11px; font-style: normal; font-weight: 500; }
.dk-hook { margin-bottom: 10px; font-size: 15.5px; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; }
@keyframes dkCycle {
  0%, 28% { transform: none; opacity: 1; z-index: 3; }
  33% { transform: translateY(46px) rotate(3deg); opacity: 0; z-index: 3; }
  34% { transform: translateY(-20px) scale(0.9); opacity: 0; z-index: 1; }
  38%, 61% { transform: translateY(-20px) scale(0.9); opacity: 0.55; z-index: 1; }
  66%, 94% { transform: translateY(-10px) scale(0.95); opacity: 0.8; z-index: 2; }
  100% { transform: none; opacity: 1; z-index: 3; } }

/* Landing page: a scan line sweeps the hero and leaves the rewrite behind */
.lp-win { width: 100%; max-width: 300px; overflow: hidden; border-radius: 12px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); }
.ag-lp .lp-bar { display: flex; align-items: center; gap: 5px; padding: 8px 12px; border-bottom: 1px solid var(--hair); background: var(--surface); font-size: 11px; color: var(--ink-muted); }
.ag-lp .lp-bar i { width: 7px; height: 7px; border-radius: 50%; background: #dcdce0; }
.ag-lp .lp-bar span { margin-left: 6px; }
.lp-tabs { display: flex; gap: 4px; padding: 8px 12px 0; }
.lp-tabs span { padding: 3px 8px; border-radius: 100px; font-size: 11px; font-weight: 500; color: var(--ink-muted); animation: lpTab 18s infinite; }
.lp-tabs .t2 { animation-delay: -12s; } .lp-tabs .t3 { animation-delay: -6s; }
.lp-stage { position: relative; height: 120px; }
/* three sections take turns: each is shown for a third of the 18s loop and
   gets its own sweep. Still state: the first section, rewritten. */
.lp-stage-s { position: absolute; inset: 0; animation: lpShow 18s infinite; }
.lp-stage-s.s2, .lp-stage-s.s3 { opacity: 0; }
.s2, .s2 .lp-after, .s2 .lp-scan { animation-delay: -12s; }
.s3, .s3 .lp-after, .s3 .lp-scan { animation-delay: -6s; }
.lp-before, .lp-after { position: absolute; inset: 0; padding: 12px 16px; background: #fff; }
.lp-after { animation: lpWipe 18s var(--ease) infinite; }
.lpo, .lpn { display: block; border-radius: 4px; margin-top: 10px; }
.lpo { height: 8px; background: #ececef; }
.lpo.l1 { width: 80%; } .lpo.l2 { width: 64%; } .lpo.l3 { width: 46%; }
.lpn.l1 { height: 12px; width: 86%; background: var(--ink); }
.lpn.l2 { height: 8px; width: 72%; background: var(--violet-tint); }
.lpn.l3 { height: 8px; width: 52%; background: #ececef; }
.s2 .lpn.l1 { width: 70%; } .s2 .lpn.l2 { width: 84%; }
.s3 .lpn.l1 { width: 56%; } .s3 .lpn.l2 { width: 64%; }
.lp-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--violet); opacity: 0; animation: lpScan 18s var(--ease) infinite; }
@keyframes lpShow { 0%, 32% { opacity: 1; } 33.4%, 100% { opacity: 0; } }
@keyframes lpTab { 0%, 32% { background: var(--violet-tint); color: var(--violet); } 33.4%, 100% { background: transparent; color: var(--ink-muted); } }
@keyframes lpWipe { 0%, 4% { clip-path: inset(0 100% 0 0); } 16%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes lpScan { 0%, 4% { left: 0; opacity: 0; } 5%, 15% { opacity: 1; } 16% { left: calc(100% - 2px); opacity: 0; } 100% { left: calc(100% - 2px); opacity: 0; } }

/* Short-form: a phone with the script rolling like a teleprompter */
.sc-phone { display: flex; flex-direction: column; width: 100%; max-width: 250px; height: 220px; padding: 14px 16px 16px; border-radius: 24px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); }
.sc-top { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--ink-muted); }
.sc-rec { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.sc-roll { position: relative; flex: 1; margin: 8px 0 10px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.sc-track { animation: scRoll 14s linear infinite; }
.sc-track p { padding: 8px 0; font-size: 13.5px; line-height: 1.35; border-bottom: 1px solid var(--hair); }
.sc-track b { display: block; font-size: 10.5px; font-weight: 600; color: var(--violet); }
.sc-bar { display: block; height: 3px; border-radius: 2px; background: #ececef; overflow: hidden; }
.sc-bar i { display: block; height: 100%; background: var(--violet); transform-origin: left; animation: scBar 14s linear infinite; }
@keyframes scRoll { to { transform: translateY(-50%); } }
@keyframes scBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes agentPulse { 50% { box-shadow: 0 0 0 4px rgba(58, 15, 176, 0.15); opacity: 0.6; } }


.bento-cap { margin-top: 12px; font-size: 13px; color: var(--ink-muted); }

/* the small desk examples */
.st {
  flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 100px;
  background: var(--surface); color: var(--ink-muted); font-style: normal; font-size: 12px; font-weight: 500; white-space: nowrap;
}
.st-you { background: var(--violet-tint); color: var(--violet); }
.st-blank { background: var(--blank-bg); color: var(--blank-ink); }
.mock { max-width: 340px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); font-size: 13px; line-height: 1.5; }
.mock-li { max-width: 560px; padding: 18px 20px; }
.mock-li .mock-text { margin: 12px 0 14px; font-size: 14px; line-height: 1.75; }
.mock-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mock-top .st { margin-left: auto; }
.mock-av { flex: none; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(#e7e3fb, #d9d3f7); }
.mock-av-sm { width: 24px; height: 24px; }
.mock-who { display: flex; flex-direction: column; font-weight: 500; line-height: 1.25; }
.mock-who small { font-size: 12px; font-weight: 400; color: var(--ink-muted); }
.mock-lbl { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.mock-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--ink-muted); }
.ma-mid { width: 80%; }

.x-post { display: flex; gap: 10px; position: relative; }
.x-post + .x-post { margin-top: 12px; }
.x-post > div { flex: 1; padding-top: 4px; }
.x-post:first-of-type::after { content: ''; position: absolute; left: 11.5px; top: 28px; bottom: -10px; width: 1px; background: var(--hair); }

.rd-sub { font-size: 12px; font-weight: 500; color: #c23a00; }
.rd-title { margin-bottom: 10px; font-weight: 500; line-height: 1.35; }
.rd-reply { padding: 10px 12px; border-radius: 10px; background: var(--ground); border: 1px solid var(--hair); }
.rd-reply .mock-lbl { margin-bottom: 8px; }

.mock-sf { padding: 0; border: 0; background: none; box-shadow: none; max-width: 170px; }
.sf-phone { width: 170px; padding: 14px 12px 4px; border-radius: 20px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); }
.sf-beat { display: grid; gap: 6px; padding: 10px 0 12px; border-bottom: 1px solid var(--hair); }
.sf-beat:last-child { border-bottom: 0; }
.sf-phone .st { margin-bottom: 6px; }
.sf-beat b { font-size: 11px; font-weight: 600; color: var(--violet); }
.sf-note { font-size: 12px; line-height: 1.3; color: var(--ink-muted); }

.ad-media { height: 64px; margin: 12px 0; border-radius: 8px; background: var(--surface); }
.ad-foot { display: flex; align-items: center; gap: 12px; }
.ad-foot .ma-line { flex: 1; }
.ad-cta { flex: none; padding: 4px 10px; border-radius: 6px; background: var(--surface); font-size: 12px; font-weight: 500; }

.mock-lp { padding: 0; overflow: hidden; }
.lp-bar { display: flex; align-items: center; gap: 5px; min-height: 30px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--hair); }
.lp-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d9d9de; }
.lp-bar span { margin-left: 8px; font-size: 11px; color: var(--ink-muted); }
.lp-body { padding: 14px 16px 16px; }
.lp-body .mock-lbl { margin-bottom: 10px; }
.lp-old, .lp-new { display: block; height: 12px; border-radius: 4px; margin-bottom: 8px; }
.lp-old { width: 70%; background: #ececef; position: relative; }
.lp-old::after { content: ''; position: absolute; left: -4px; right: -4px; top: 5.5px; height: 1.5px; background: var(--ink-muted); }
.lp-new { width: 90%; background: var(--violet-tint); }
.lp-act { margin-top: 12px; }

.mock-seo { max-width: 560px; padding: 18px 20px; }
.seo-h1 { display: block; width: 72%; height: 14px; margin-bottom: 14px; border-radius: 4px; background: #dcdce1; }
.seo-outline { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.seo-outline li { display: flex; align-items: center; gap: 10px; }
.seo-outline b { flex: none; width: 22px; height: 8px; border-radius: 4px; background: var(--violet-tint); }
.seo-outline .ma-line { flex: 1; }
.seo-outline .ma-line + .ma-line { margin-top: 0; }
.seo-q { padding-top: 10px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--ink-muted); }


/* steps: a real sequence, so they're numbered. Each has a looping
   illustration on a halftone panel (script at the bottom of index.html). */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.step .step-num { margin: 24px 0 6px; font-size: 14px; font-weight: 500; color: var(--violet); }
.step .step-num + h3 { margin-top: 0; }
.step h3 { margin: 24px 0 8px; }

/* three dashes above the panels, one per step; the playing one fills */
.hiw-dots { display: flex; gap: 8px; margin: -24px 0 24px; }
.hiw-dots i { position: relative; overflow: hidden; width: 32px; height: 4px; border-radius: 2px; background: rgba(58, 15, 176, 0.14); }
.hiw-dots i::after { content: ''; position: absolute; inset: 0; border-radius: 2px; background: var(--violet); transform-origin: left; transform: scaleX(1); }
.hiw-live .hiw-dots i::after { transform: scaleX(0); }
.hiw-live .hiw-dots i.done::after { transform: scaleX(1); }
.hiw-live .hiw-dots i.now::after { transform: scaleX(1); transition: transform var(--dur, 5s) linear; }
.step p { color: var(--ink-muted); max-width: 40ch; }

.step-art {
  position: relative; overflow: hidden; isolation: isolate; height: 340px; padding: 16px;
  border-radius: 16px; border: 1px solid var(--hair); background: #f7f5ff;
}
.step-art { height: 360px; }
.step-ht { position: absolute; inset: 0; }
/* two seeded cloud layers drifting at different speeds and directions, so
   the shapes seem to change; only while the section is on screen */
.is-live .ht-a { animation: cloudScroll 110s linear infinite; }
.is-live .ht-b { animation: cloudScrollBack 150s linear infinite; }
@keyframes cloudScrollBack { from { background-position-x: calc(-1 * var(--tile, 2880px)); } to { background-position-x: 0; } }
.art-card {
  position: absolute; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--hair);
  box-shadow: var(--shadow-card); font-size: 13px;
}
.art-label { margin-bottom: 8px; font-size: 12px; color: var(--ink-muted); }

/* step 1: a URL is typed, then facts come out as chips */
.url-card { left: 24px; right: 24px; top: 50%; transform: translateY(-50%); }
.url-field { display: flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 100px; background: var(--surface); font-size: 14px; }
.url-field::before { content: 'https://'; color: var(--ink-muted); }
.caret { display: none; width: 1.5px; height: 18px; margin-left: 1px; background: var(--violet); }
.url-status { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; font-size: 12px; color: var(--ink-muted); }
.facts { display: flex; flex-wrap: wrap; gap: 6px; }
.fact { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border-radius: 100px; background: var(--violet-tint); border: 1px solid var(--violet-tint-border); color: var(--violet); font-size: 12px; font-weight: 500; }
.fact::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--violet); }

/* step 2: four sources sit in the corners, well clear of the hub. Each
   wire leaves Olunix sideways and bends up or down into its source; a ray
   of light runs along it; the icons drift a little so nothing sits still. */
.wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-lib .wires { z-index: 1; } .art-lib .src-node, .art-lib .hub { z-index: 2; }
.wire { fill: none; stroke: var(--violet); stroke-width: 1.5; stroke-opacity: 0.35; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* the ray is three stacked dashes sharing one centre: a long hairline tail,
   a mid stroke and a short bright core, so it reads thin at both ends and
   fuller in the middle */
.pulse { opacity: 0; }
.pulse path { fill: none; stroke: var(--violet); stroke-linecap: round; stroke-dashoffset: -120; }
.pulse .r-tail { stroke-width: 0.6; stroke-opacity: 0.45; stroke-dasharray: 28 200; }
.pulse .r-mid { stroke-width: 1; stroke-opacity: 0.75; stroke-dasharray: 16 200; }
.pulse .r-core { stroke-width: 1.5; stroke-dasharray: 6 200; filter: drop-shadow(0 0 1.5px rgba(134, 36, 255, 0.6)); }
.src-node, .hub {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; transform: translate(-50%, -50%);
}
.src-node svg {
  width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: #fff; border: 1px solid var(--hair);
  box-shadow: var(--shadow-card); fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  transition: border-color 500ms var(--ease), stroke 500ms var(--ease);
}
.src-node span { padding: 1px 8px; border-radius: 100px; background: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.n1 { left: 15%; top: 18%; } .n2 { left: 15%; top: 84%; } .n3 { left: 85%; top: 18%; } .n4 { left: 85%; top: 84%; }
.hub { left: 50%; top: 50%; }
.hub-logo {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px 10px 12px;
  border-radius: 14px; background: #fff; border: 1px solid var(--violet-tint-border);
  box-shadow: var(--shadow-card);
  font-size: 17px; font-weight: 500; letter-spacing: -0.03em; color: #000;
}
.hub .hub-lbl { padding: 1px 8px; border-radius: 100px; background: rgba(255, 255, 255, 0.85); font-size: 12px; font-weight: 500; white-space: nowrap; }

/* step 3: a checklist runs, then a draft card lands */
.run-card { left: 20px; right: 20px; top: 20px; }
.run-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 500; }
.run-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--ink-muted); }
.run-list li { display: flex; align-items: center; gap: 10px; }
.run-list li::before {
  content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--violet); background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.run-list li.run-wait { color: var(--ink); font-weight: 500; }
.run-list li.run-wait::before { background: #fff; border-color: var(--violet); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 8px var(--violet); }
.out-card { left: 48px; right: 20px; bottom: 20px; padding: 12px 14px; }
.out-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 500; }
.out-act { display: flex; gap: 6px; margin-top: 12px; }
.out-act .btn-s { height: 28px; padding: 0 12px; font-size: 12px; }

.spin { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.4 6.2l1.7 1.7 3.5-3.8' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.is-live .url-status:not(.done) .spin { background: none; border: 1.5px solid var(--violet-tint-border); border-top-color: var(--violet); }

/* Live state: only when the script runs the loop. Without it, every piece
   shows: that is the still final frame. */
.is-live [data-at] { transition: opacity 360ms var(--ease), transform 360ms var(--ease); }
.is-live [data-at]:not(.on) { opacity: 0; }
.is-live .fact:not(.on), .is-live .out-card:not(.on) { transform: translateY(6px); }
/* step 2 live: Olunix is there from the start. Each wire grows out of it to
   a source, the source lands at the end, then facts flow back along the
   wire into Olunix. */
.art-lib.is-live .src-node:not(.on) { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
.art-lib.is-live .src-node { transition: opacity 600ms var(--ease) 450ms, transform 700ms var(--ease) 450ms; }
.art-lib.is-live .src-node:not(.on) { transition: none; }
.art-lib.is-live .src-node.on svg { border-color: var(--violet-tint-border); stroke: var(--violet); }
.art-lib.is-live .src-node svg { animation: drift 5.2s ease-in-out infinite; }
.art-lib.is-live .n2 svg { animation-delay: -1.3s; } .art-lib.is-live .n3 svg { animation-delay: -2.6s; } .art-lib.is-live .n4 svg { animation-delay: -3.9s; }
@keyframes drift { 50% { transform: translateY(-3px); } }
.art-lib .wire, .art-lib .pulse path { vector-effect: none; }
.art-lib.is-live .wire { stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 1; transition: stroke-dashoffset 700ms var(--ease); }
.art-lib.is-live .wire.on { stroke-dashoffset: 0; }
.art-lib.is-live .wire:not(.on) { transition: none; } /* reset at once, never seen undrawing */
/* a ray of light runs along each wire from the source into Olunix */
.art-lib.is-live .pulse.on { opacity: 1; }
.art-lib.is-live .pulse.on path { animation: 2.4s cubic-bezier(0.4, 0, 0.6, 1) var(--ray-at, 900ms) infinite backwards; }
.art-lib.is-live .pulse.on .r-tail { animation-name: rayTail; }
.art-lib.is-live .pulse.on .r-mid { animation-name: rayMid; }
.art-lib.is-live .pulse.on .r-core { animation-name: rayCore; }
.art-lib .pulse.p2 { --ray-at: 1.5s; } .art-lib .pulse.p3 { --ray-at: 2.1s; } .art-lib .pulse.p4 { --ray-at: 2.7s; }
/* offsets keep the three dashes centred on one point as it travels */
@keyframes rayTail { from { stroke-dashoffset: -100; } to { stroke-dashoffset: 28; } }
@keyframes rayMid { from { stroke-dashoffset: -106; } to { stroke-dashoffset: 22; } }
@keyframes rayCore { from { stroke-dashoffset: -111; } to { stroke-dashoffset: 17; } }
.art-lib.is-live .hub-logo { animation: hubBreathe 4s ease-in-out infinite; }
@keyframes hubBreathe { 50% { box-shadow: 0 0 0 8px rgba(58, 15, 176, 0.06), var(--shadow-card); } }
.is-live .url-status:not(.on) { opacity: 0; }
.is-live .url-status.on:not(.done) .spin, .is-live .run-list li.on:not(.done):not(.run-wait)::before { animation: spin 800ms linear infinite; }
.is-live .run-list li.on:not(.done):not(.run-wait)::before { background: #fff; border-color: var(--violet-tint-border); border-top-color: var(--violet); }
.is-live .run-list li.done { color: var(--ink); }
.is-live .caret { display: inline-block; animation: blink 1s steps(1) infinite; }
/* solid while letters are going in, blinking only once it stops */
.is-typing .seo-caret { animation: none; opacity: 1; }
/* "entered": the caret goes, like pressing Enter on a search */
.is-done .seo-caret { display: none; }
.is-paused * { animation-play-state: paused !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: 0; } }

/* testimonials: a plain three-column grid of cards. On wider screens with
   motion allowed, script copies them into columns that scroll slowly up and
   down (alternating), faded at the top and bottom, paused on hover and
   while off screen. The original list stays for screen readers. */
.tm-list { columns: 3 300px; column-gap: 16px; }
.tm-card {
  display: block; break-inside: avoid; margin: 0 0 16px; padding: 22px 24px 24px;
  background: rgba(255, 255, 255, 0.82); border: 1px solid var(--hair); border-radius: 16px;
  transition: border-color 160ms ease;
}
.tm-card:hover { border-color: rgba(0, 0, 0, 0.22); }
.tm-card:focus-visible { border-radius: 16px; }
.tm-card figure { margin: 0; }
.tm-top { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); }
.tm-av { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface); }
/* company logos sit in the avatar circle on white */
.tm-av-logo { padding: 5px; object-fit: contain; background: #fff; border: 1px solid var(--hair); }
.tm-av-xpomo { padding: 2px; }
.tm-who { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.tm-who strong { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.tm-who span { font-size: 13px; color: var(--ink-muted); }
.tm-card blockquote { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink); }

.tm { position: relative; isolation: isolate; }
.tm-list, .tm-wall { position: relative; z-index: 1; }
/* the sky is a pale violet panel like the Features and How it works
   panels; the cards sit inside it with a 20px inset. Top and bottom use the
   same fade as the card wall. */
.tm-sky {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  border-radius: 16px; border: 1px solid var(--hair); background: #f7f5ff;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.tm.is-live { padding: 0 20px; }
.tm:not(.is-live) .tm-sky { display: none; }
.tm-sky .fluid.is-live ~ .step-ht { opacity: 0; transition: opacity 900ms ease; }
.tm.is-live .tm-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tm-wall {
  display: grid; grid-template-columns: repeat(var(--tm-cols, 3), minmax(0, 1fr)); gap: 16px;
  height: 640px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.tm-col { min-width: 0; }
.tm-track { animation: tmUp var(--tm-dur, 60s) linear infinite; }
.tm-track .tm-card { break-inside: auto; }
.tm-col:nth-child(2) .tm-track { animation-direction: reverse; }
.tm-wall:hover .tm-track, .tm-wall.is-held .tm-track, .tm-wall.is-off .tm-track { animation-play-state: paused; }
@keyframes tmUp { to { transform: translateY(var(--tm-shift, -50%)); } }

/* faq */
.faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.faq .head { margin-bottom: 0; }
.faq-list details:first-child { border-top: 1px solid var(--hair); }
details { border-bottom: 1px solid var(--hair); }
summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ''; flex: none; width: 9px; height: 9px; margin-right: 4px;
  border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted);
  transform: rotate(45deg); transition: transform 150ms ease;
}
details[open] summary::after { transform: rotate(-135deg); }
details p { padding: 0 0 22px; max-width: 62ch; color: var(--ink-muted); }

/* ---------- cta ---------- */
.cta { position: relative; overflow: hidden; isolation: isolate; margin-top: 224px; min-height: 640px; display: flex; align-items: center; }
.halftone-cta {
  animation: cloudScroll 160s linear infinite;
  /* thinner in the middle, not cut out, so the clouds run into the hands */
  /* and fades out at the top and bottom of the section, so no edge shows */
  mask-image: linear-gradient(transparent, #000 7%, #000 86%, transparent), radial-gradient(60% 70% at 50% 50%, rgba(0, 0, 0, 0.3) 15%, #000 100%);
  -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 86%, transparent), radial-gradient(60% 70% at 50% 50%, rgba(0, 0, 0, 0.3) 15%, #000 100%);
  mask-composite: intersect; -webkit-mask-composite: source-in;
}
/* the fade is drawn into the dots (halftone.js); this only guarantees the
   layer never shows an edge */
.halftone-adam {
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-composite: initial; -webkit-mask-composite: initial;
}
/* copy sits over the middle of the hands; the fingertips meet behind the form */
.cta-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 136px; padding-bottom: 136px; }
.cta-inner::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: 760px; height: 400px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.88) 40%, rgba(255, 255, 255, 0));
}
.cta-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 6px 14px 6px 10px;
  border-radius: 100px; border: 1px solid #dcd5fd; background: #f4f2fe;
  font-size: 13px; line-height: 20px; font-weight: 500; color: var(--violet);
}
.cta-pill img { flex: none; max-width: none; width: 16px; height: 16px; }
.cta-inner h2 { max-width: 760px; }
.cta-inner .sub { margin-bottom: 32px; }

/* ---------- footer ---------- */
/* brand and socials on the left; the three link columns sit together on the right */
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, max-content); column-gap: 72px; row-gap: 32px; padding-top: 64px; padding-bottom: 40px; }
.footer .brand { gap: 10px; font-size: 26px; letter-spacing: -0.02em; line-height: 1; }
.footer .brand img { width: 26px; height: 26px; }
.footer-brand p { margin: 16px 0 14px; max-width: 300px; font-size: 14px; color: var(--ink-muted); }
.socials { display: flex; gap: 4px; margin-left: -10px; }
.socials a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: #000; transition: opacity 150ms; }
.socials a:hover { opacity: 0.6; }
.footer-h { margin: 0 0 14px; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.footer-col a { display: block; width: fit-content; margin-bottom: 10px; font-size: 14px; color: var(--ink-muted); }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { padding-top: 0; padding-bottom: 36px; font-size: 13px; color: var(--ink-muted); }

/* ---------- motion ---------- */
/* The one orchestrated moment: the hero copy rises in on load. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-inner > * { animation: rise 700ms var(--ease) both; }
.hero-inner > :nth-child(2) { animation-delay: 80ms; }
.hero-inner > :nth-child(3) { animation-delay: 160ms; }
.hero-inner > :nth-child(4) { animation-delay: 240ms; }
.hero-inner > :nth-child(5) { animation-delay: 240ms; }
.hero-inner > :nth-child(6) { animation-delay: 320ms; }
/* static halftone drifts slowly; --tile is set by halftone.js */
@keyframes cloudScroll { from { background-position-x: 0; } to { background-position-x: calc(-1 * var(--tile, 2880px)); } }
.fallback { animation: cloudScroll 140s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-inner > *, .halftone, .marquee-track { animation: none !important; }
  .stack-t, .wl-dots, .wl-dots i, .wl-link { transition: none; }
  .wl-step { animation: none !important; }
  .ty[open], .ty[open]::backdrop, .menu[open], .menu[open] * { animation: none !important; }
}

/* Appear on scroll. .rv and .reveal-on are only ever added by the script
   in index.html, so with no JS (or reduced motion) nothing is hidden.
   Each item rises 24px out of a soft blur, once; it never replays on the
   way back up (Darren, 2026-10-19). */
.reveal-on .rv { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1) var(--rv-d, 0ms), transform 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--rv-d, 0ms), filter 800ms cubic-bezier(0.16, 1, 0.3, 1) var(--rv-d, 0ms); }
.reveal-on .rv.is-in { opacity: 1; transform: none; filter: none; }
/* FAQ answers fade as they open and close */
details p { transition: opacity 240ms ease; }
details.is-closing p { opacity: 0; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-menu { display: inline-flex; }
  .nav-inner { gap: 8px; }
  .nav-cta { margin-left: auto; }
  /* phones and tablets: the menu holds the waitlist button (pages without a menu keep it) */
  .nav-inner:has(.nav-menu) .nav-cta { display: none; }
  .nav-inner:has(.nav-menu) .nav-menu { margin-left: auto; }
  /* footer links: 44px tap targets */
  .footer-col a { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
  .socials a { width: 44px; height: 44px; }
  .faq { grid-template-columns: 1fr; gap: 40px; }
  .vs { grid-template-columns: 1fr; margin-top: 40px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fb { grid-template-columns: minmax(0, 1fr); grid-template-areas: "s" "a" "b" "c" "d"; }
  .fb { gap: 12px; }
  .fb-item { min-height: 0; gap: 20px; padding: 22px; }
  .fb-stage { min-height: 380px; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .pts-3, .pts-4, .cards-3, .cards-2 { grid-template-columns: minmax(0, 1fr); }
  .think-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .think-wires { display: none; }
  .think-r .think-cap { text-align: left; }
  .think-r .think-list li { justify-content: flex-start; }
  .founding { padding: 40px 24px; }
  .pain-close { font-size: 19px; }
  .step-art { max-width: 520px; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .rail { padding: 0 20px; }
  .nav .btn { height: 38px; padding: 0 14px; font-size: 13px; }
  .hero-inner { padding-top: clamp(24px, 4vh, 56px); padding-bottom: 0; }
  .hero-proof { padding-top: 12px; padding-bottom: 40px; }
  .hero-proof > .proof { width: 100%; }
  .hero-inner::before { width: 180%; height: 620px; }
  h1 { font-size: 40px; line-height: 1.02; letter-spacing: -0.045em; }
  .lede { font-size: 16px; }
  .stack-t { width: 38px; height: 38px; }
  .stack { height: 38px; }
  .wl-form { flex-direction: column; align-items: stretch; gap: 8px; border-radius: 28px; padding: 8px; }
  .wl-field { overflow: visible; }
  .wl-input { height: 52px; padding: 0 18px; background: var(--surface); border-radius: 100px; }
  .wl-phone { gap: 6px; }
  .wl-phone .wl-input { padding-left: 16px; }
  .wl-cc { height: 52px; margin: 0; }
  .wl-cc-face { padding: 0 30px 0 14px; font-size: 15px; }
  .wl-cc-face::after { top: 22px; right: 14px; }
  .wl-form .btn { width: 100%; height: 52px; font-size: 15px; }
  .wl-meta { grid-template-columns: 56px 1fr 56px; gap: 10px; padding: 0 4px; }
  .wl-link { height: 44px; font-size: 14px; }
  .wl-consent { font-size: 14px; }
  .wl-consent input { width: 22px; height: 22px; }
  .ty { width: calc(100% - 24px); }
  .ty-card { padding: 24px 20px 20px; }
  .ty-title { font-size: 28px; }
  .ty-discord { grid-template-columns: 1fr; }
  .ty-discord-icon { grid-row: auto; }
  .ty-discord-go { grid-column: 1; justify-self: stretch; justify-content: center; height: 48px; font-size: 15px; }
  .ty-socials a { width: 44px; height: 44px; }
  .proof-label { font-size: 11px; letter-spacing: 0.1em; margin-bottom: 7px; }
  /* phones: the three figures sit side by side in one band that runs edge
     to edge, number over label, every label on one line (Darren, 2026-10-19) */
  .proof { align-self: stretch; }
  .stats-glass { width: calc(100% + 40px); margin: 0 -20px; --band-fade: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  /* phones: the three figures side by side, number on top, label broken
     over two lines under it */
  .stats { padding: 16px 12px; }
  .stat { flex: 1 1 0; min-width: 0; flex-direction: column-reverse; justify-content: flex-end; align-items: center; gap: 3px; padding: 0 4px; }
  .stat + .stat { border-left: 0; }
  .stat-n { font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; text-align: center; }
  .stat-l { font-size: 12px; line-height: 1.3; color: #55555d; text-align: center; white-space: nowrap; }
  .br-sm { display: inline; }
  @media (max-width: 360px) { .stat-n { font-size: 17px; } .stat-l { white-space: normal; } .stat { padding: 0 2px; } }
  .mq-title { padding: 0 20px; }
  .mq-title-text { padding: 7px 12px; font-size: 11px; letter-spacing: 0.07em; }
  /* phones: the clouds hold still (paint cost) */
  .fallback, .halftone-cta { animation: none; }
  .section { padding-top: 128px; }
  .band #how-it-works { margin-top: 48px; padding-top: 48px; padding-bottom: 64px; }
  .head { margin-bottom: 32px; }
  .mid-cta { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 40px; }
  .hiw-dots { margin: -12px 0 20px; }
  h2 { font-size: 32px; line-height: 1.1; }
  h3 { font-size: 18px; }
  .sub { font-size: 16px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento-wide { grid-column: auto; }
  .tm-wall { height: 560px; }
  .tm.is-live { padding: 0 12px; }
  .tm-card { padding: 20px; }
  .bento-visual { min-height: 0; padding: 24px 16px; }
  .bento-text { padding: 20px 20px 24px; }
  .ground { padding: 20px 12px; }
  .fb-stage { min-height: 320px; }
  .fb-demo { padding: 20px 16px; }
  .cta { margin-top: 128px; min-height: 0; }
  .cta-inner { padding-top: 96px; padding-bottom: 120px; }
  /* phones: fingertips meet just under the form, behind this line */
  .cta .wl-note { margin-top: 6px; padding: 4px 28px; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.92) 55%, rgba(255, 255, 255, 0)); }
  .cta-inner::before { width: 100%; height: 50%; top: 35%; }
  .footer-grid { padding-top: 48px; }
}

/* ---------- 404 ----------
   The closing section's hands and clouds, full height under the nav. The
   fingertips meet behind the buttons (data-img-anchor=".nf-actions"). */
.btn-line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.btn-line:hover { background: var(--surface); }
.btn-line:focus-visible { box-shadow: var(--focus), inset 0 0 0 1px var(--hair); }
.nf { margin-top: 0; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
/* each hand layer keeps its half (split at the centre, where the 404 is) and
   slides out sideways to the edge of the number. Height is set with
   data-img-dy in the HTML (halftone.js re-centres on the 404, so a CSS
   translateY would be cancelled out). */
.nf-hand { --hx: 118px; mask-composite: intersect; -webkit-mask-composite: source-in; }
.nf-hand-l {
  transform: translateX(calc(-1 * var(--hx)));
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%), linear-gradient(to right, #000 50%, transparent 51.5%);
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%), linear-gradient(to right, #000 50%, transparent 51.5%);
}
.nf-hand-r {
  transform: translateX(var(--hx));
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%), linear-gradient(to left, #000 50%, transparent 51.5%);
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%), linear-gradient(to left, #000 50%, transparent 51.5%);
}
.nf-badge {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px;
  border-radius: 100px; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.9);
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
}
.nf-badge svg { color: var(--violet); }
.nf-code {
  margin: 24px 0 20px; font-size: 184px; line-height: 0.86; font-weight: 600; letter-spacing: -0.06em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.nf h1 { max-width: 760px; font-size: 34px; line-height: 1.15; letter-spacing: -0.035em; }
.nf .sub { max-width: 480px; margin-top: 10px; font-size: 16px; }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 8px; }
.nf-actions .btn { gap: 8px; height: 48px; padding: 0 22px; font-size: 15px; }
@media (max-width: 640px) {
  .nf .cta-inner { padding-top: 64px; padding-bottom: 96px; }
  .nf-code { margin-top: 20px; font-size: 112px; }
  .nf-hand { --hx: 64px; }
  .nf h1 { font-size: 27px; }
  .nf-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
}

/* ---------- legal pages (privacy, terms) ----------
   A short cloud header (same clouds as the Features panels), then a sticky
   list of sections beside the text. Text column stays under 70ch. */
.legal-hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--hair); }
.legal-hero > .fluid, .legal-hero > .step-ht {
  mask-image: radial-gradient(70% 90% at 50% 50%, rgba(0, 0, 0, 0.25) 20%, #000 100%);
  -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, rgba(0, 0, 0, 0.25) 20%, #000 100%);
}
.legal-hero .fluid.is-live ~ .step-ht { opacity: 0; transition: opacity 900ms ease; }
.legal-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 128px; padding-bottom: 112px; }
.legal-hero h1 { font-size: 64px; line-height: 0.96; letter-spacing: -0.06em; }
.legal-date { margin-top: 18px; font-size: 14px; color: var(--ink-muted); }

.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; padding-top: 72px; }
.legal-toc { position: sticky; top: 96px; }
.legal-toc-h { margin-bottom: 12px; font-size: 14px; font-weight: 500; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--hair); }
.legal-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 1px solid transparent; font-size: 14px; line-height: 1.35; color: var(--ink-muted); }
.legal-toc a { transition: color 280ms var(--ease); }
.legal-toc a:hover { color: var(--ink); }
/* reading position: the current link darkens and a violet marker glides
   along the rail to it (toc.js) */
.legal-toc ol { position: relative; }
.legal-toc a.is-current { color: var(--ink); font-weight: 500; }
.toc-mark {
  position: absolute; left: -1px; top: 0; width: 2px; height: 0; border-radius: 2px;
  background: var(--violet); opacity: 0; pointer-events: none;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), height 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
}
.is-tracking .toc-mark { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .toc-mark, .legal-toc a { transition: none; } }
.legal-body { max-width: 68ch; }
.legal-sec { padding: 48px 0; border-top: 1px solid var(--hair); scroll-margin-top: 80px; }
.legal-sec:first-child { padding-top: 0; border-top: 0; }
/* reading pages: headings must read as headings from across the room.
   Larger, heavier and pure black; body a step lighter in grey. */
.legal-sec h2 { margin-bottom: 18px; font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -0.035em; color: #000; }
.legal-sec p, .legal-sec li { font-size: 16px; line-height: 1.7; color: #55555d; }
.legal-sec p + p, .legal-sec ul + p, .legal-sec p + ul { margin-top: 12px; }
.legal-sec ul { margin: 12px 0 0; padding-left: 20px; }
.legal-sec li + li { margin-top: 4px; }
.legal-sec li::marker { color: var(--violet); }
.legal-sec strong { font-weight: 600; color: var(--ink); }
.legal-sec p:has(> strong:only-child) { margin-top: 24px; }
.legal-sec a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* comparison table on guide pages */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: 14px; background: #fff; }
.cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.cmp th, .cmp td { padding: 14px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--hair); }
.cmp thead th { border-top: 0; font-size: 13px; font-weight: 500; color: var(--ink-muted); background: #fafafa; }
.cmp thead th:last-child { color: var(--violet); }
.cmp tbody th { width: 26%; font-weight: 500; color: var(--ink); }
.cmp td { color: #3a3a40; }
.cmp td:last-child { background: #fbfaff; color: var(--ink); }
/* phones: each row becomes a small card, both answers stacked */
@media (max-width: 640px) {
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tr + tr { border-top: 1px solid var(--hair); }
  .cmp th, .cmp td { border-top: 0; padding: 0 16px; }
  .cmp tbody th { width: auto; padding-top: 14px; padding-bottom: 6px; }
  .cmp td { padding-bottom: 10px; font-size: 14px; }
  .cmp td:last-child { margin: 0 8px 12px; padding: 10px 8px; border-radius: 10px; }
  .cmp td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 500; color: var(--ink-muted); }
  .cmp td:last-child::before { color: var(--violet); }
}
/* roundup pages: one block per tool, and a five-column table */
.tool { padding: 20px 0; }
.tool + .tool { border-top: 1px dashed var(--hair); }
.legal-sec .tool h3 { margin: 0 0 8px; font-size: 21px; }
.legal-sec .tool h3 a { color: var(--ink); text-decoration: none; }
.legal-sec .tool h3 a:hover { color: var(--violet); }
.legal-sec .tool p + p { margin-top: 8px; }
.legal-sec .tool p:has(> strong:only-child) { margin-top: 8px; }
.cmp-5 tbody th { width: 16%; }
.cmp-5 td:last-child { background: none; color: #3a3a40; }
.cmp-5 thead th:last-child { color: var(--ink-muted); }
.cmp-5 td:last-child::before { color: var(--ink-muted) !important; }
@media (max-width: 640px) { .cmp-5 td:last-child { margin: 0; padding: 0 16px 14px; } }
.cmp-5 tr:last-child th, .cmp-5 tr:last-child td { background: #fbfaff; }
.cmp-note { margin-top: 10px !important; font-size: 13px !important; color: var(--ink-muted) !important; }
/* guide pages (how it works and later ones): same reading layout as legal */
.crumbs { display: flex; gap: 8px; margin-bottom: 18px; font-size: 14px; color: var(--ink-muted); }
.crumbs a { color: var(--ink-muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }
.hw-sub { max-width: 520px; font-size: 17px; line-height: 1.45; }
/* article byline: author and date under the hero line */
.byline { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-top: 22px; font-size: 14px; color: var(--ink-muted); }
.byline strong { font-weight: 500; color: var(--ink); }
.hw-answer { padding: 20px 22px; border-radius: 14px; border: 1px solid var(--violet-tint-border); background: #f7f5ff; }
.legal-sec .hw-answer { font-size: 16px; color: var(--ink); }
.legal-sec h3 { margin: 28px 0 8px; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; color: #000; }
/* "In short" box at the top of each legal page */
.legal-sec.legal-summary { margin-bottom: 48px; padding: 28px 32px; border-radius: 16px; border: 1px solid var(--violet-tint-border); background: #f7f5ff; }
.legal-sec.legal-summary + .legal-sec { border-top: 0; padding-top: 0; }
.legal-summary h2 { font-size: 22px; margin-bottom: 4px; }
@media (max-width: 600px) { .legal-sec.legal-summary { margin-bottom: 40px; padding: 22px 20px; } }
.legal-summary li { color: var(--ink); }
.legal-summary-note { margin-top: 16px; font-size: 14px !important; color: var(--ink-muted) !important; }
/* open items for Darren on the legal pages; none may remain at launch */
.confirm { padding: 1px 6px; border-radius: 5px; border: 1px dashed #d9a520; background: var(--blank-bg); color: var(--blank-ink); font-size: 0.94em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.legal-sec h2 + h3 { margin-top: 0; }
.hw-list li { padding-left: 2px; }
.hw-example { margin: 20px 0 0; padding: 20px 22px; border-radius: 14px; border: 1px solid var(--hair); background: #fff; box-shadow: var(--shadow-card); }
.legal-sec .hw-example p { font-size: 16px; color: var(--ink); }
.hw-example mark { padding: 1px 6px; border-radius: 6px; background: var(--violet-tint); color: var(--ink); }
.hw-example sup { margin-left: 2px; font-size: 10px; font-weight: 600; color: var(--violet); }
.hw-example ol { margin: 14px 0 0; padding: 12px 0 0 20px; border-top: 1px solid var(--hair); }
.legal-sec .hw-example li { font-size: 13.5px; color: var(--ink-muted); }
.hw-example li::marker { color: var(--violet); font-weight: 600; }
.hw-example figcaption { margin-top: 12px; font-size: 12px; color: var(--ink-muted); }
.hw-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px !important; }
.legal-sec .hw-cta a.btn { color: #fff; text-decoration: none; }
.hw-cta span { font-size: 13px; color: var(--ink-muted); }
@media (max-width: 900px) {
  .legal { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 48px; }
  .legal-toc { display: none; }
}
@media (max-width: 640px) {
  .legal-hero-inner { padding-top: 80px; padding-bottom: 72px; }
  .legal-hero h1 { font-size: 40px; line-height: 1.02; letter-spacing: -0.045em; }
  .legal-sec { padding: 32px 0; }
  .legal-sec h2 { font-size: 25px; }
  .legal-sec h3 { font-size: 18px; }
}

/* ---------- founder page ---------- */
.fd-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: center; gap: 72px; padding-top: 112px; padding-bottom: 104px; }
.fd-hero h1 { margin-top: 14px; }
.fd-role { margin-top: 18px; font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.fd-place { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 15px; color: var(--ink-muted); }
.fd-lede { max-width: 52ch; margin-top: 24px; font-size: 18px; line-height: 1.6; color: #3d3d45; }
.fd-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; font-size: 16px; font-weight: 500; color: var(--violet); text-decoration: underline; text-decoration-color: var(--violet-tint-border); text-underline-offset: 4px; transition: text-decoration-color 200ms var(--ease); }
.fd-link:hover { text-decoration-color: var(--violet); }
.fd-photo { margin: 0; }
.fd-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 24px; border: 1px solid var(--hair); background: #e9e9ec; box-shadow: var(--shadow-card); }
.fd-photo figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-muted); text-align: center; }
.fd-section { padding-top: 112px; }
.fd-section + .fd-section { padding-top: 96px; }
.fd-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fd-card { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; border-radius: 16px; border: 1px solid var(--hair); background: #fff; }
.fd-card-k { font-size: 14px; color: var(--ink-muted); }
.fd-card h3 { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 28px; line-height: 1.15; letter-spacing: -0.03em; }
.fd-card > p:not(.fd-card-k) { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--ink-muted); max-width: 46ch; }
.fd-card .fd-link { margin-top: auto; padding-top: 24px; }
.fd-bg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.fd-bg .head { margin-bottom: 0; }
.fd-bg-copy p { font-size: 17px; line-height: 1.7; color: #3d3d45; }
.fd-bg-copy p + p { margin-top: 16px; }
.fd-bg-copy a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(0, 0, 0, 0.25); text-underline-offset: 3px; }
.fd-bg-copy a:hover { text-decoration-color: var(--ink); }
@media (max-width: 900px) {
  .fd-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 96px; padding-bottom: 72px; }
  .fd-photo { max-width: 340px; }
  .fd-cards, .fd-bg { grid-template-columns: minmax(0, 1fr); }
  .fd-bg { gap: 24px; }
  .fd-section { padding-top: 88px; }
  .fd-section + .fd-section { padding-top: 72px; }
}
@media (max-width: 600px) {
  .fd-role { font-size: 19px; }
  .fd-lede { font-size: 17px; }
  .fd-card { padding: 24px; }
  .fd-card h3 { font-size: 24px; }
}

/* ==== rebuilt sections (2026-10-22) ==== */
/* BEGIN process */
/* How it works, merged with How every draft gets made (Darren,
   2026-10-22). One wide cloud stage plays the story in three acts that
   match the three steps under it: the website is read and your business
   fills the left, your facts flow into your Library, then what's winning
   fills the right and the drafts come out of "Your company". The steps
   follow along and can be clicked. Reduced motion, Save-Data and no JS:
   the finished picture. */
#how-it-works .pr-stage {
  position: relative; overflow: hidden; isolation: isolate; padding: 40px 40px 36px;
  border-radius: 20px; border: 1px solid var(--hair); background: #f7f5ff;
}
#how-it-works .pr-stage > .fluid, #how-it-works .pr-stage > .step-ht { position: absolute; inset: 0; z-index: 0; }
#how-it-works .pr-row { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1fr); align-items: center; gap: 56px; }
#how-it-works .pr-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
#how-it-works .pr-wires path { fill: none; stroke: var(--violet); stroke-linecap: round; }
#how-it-works .pr-wires .wire { stroke-width: 1.4; stroke-opacity: 0.32; }
#how-it-works .pr-wires .pulse { stroke-width: 2; stroke-dasharray: 9 100; stroke-dashoffset: 9; opacity: 0; }
#how-it-works .pr-side { position: relative; z-index: 1; }
#how-it-works .pr-cap { display: table; margin-bottom: 12px; padding: 6px 12px; border-radius: 100px; background: #fff; box-shadow: var(--shadow-card); font-size: 13px; font-weight: 500; color: var(--ink); }
#how-it-works .pr-r .pr-cap { margin-left: auto; }
#how-it-works .pr-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
#how-it-works .pr-list li {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 11px 16px;
  border-radius: 12px; border: 1px solid var(--hair); background: #fff; box-shadow: var(--shadow-card); font-size: 14px;
}
#how-it-works .pr-r .pr-list li { justify-content: flex-end; }
#how-it-works .pr-list img, #how-it-works .pr-list svg, #how-it-works .pr-out img { flex: none; }
#how-it-works .pr-pair { display: inline-flex; flex: none; }
#how-it-works .pr-pair img + img { margin-left: -3px; }
#how-it-works .pr-tick {
  flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--hair);
  background: #fff center / 10px no-repeat; transition: background-color 400ms var(--ease), border-color 400ms var(--ease);
}
#how-it-works .pr-list li.in .pr-tick, #how-it-works.pr-still .pr-tick {
  border-color: var(--violet); background-color: var(--violet);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6.2l1.8 1.8 3.8-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#how-it-works .pr-mid { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
#how-it-works .pr-url {
  display: flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 100px;
  background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); font-size: 14px; white-space: nowrap;
}
#how-it-works .pr-url::before { content: 'https://'; color: var(--ink-muted); }
#how-it-works .pr-caret { display: none; width: 1.5px; height: 16px; margin-left: 1px; background: var(--violet); }
#how-it-works .is-typing .pr-caret { display: inline-block; }
#how-it-works .pr-core {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 26px;
  border-radius: 16px; border: 1px solid var(--violet-tint-border); background: #fff; box-shadow: var(--shadow-card);
  transition: border-color 500ms var(--ease), background-color 500ms var(--ease);
}
#how-it-works .pr-core-name { display: inline-flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
#how-it-works .pr-core-state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
#how-it-works .pr-core-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
#how-it-works .pr-core.is-lit { border-color: var(--violet); background: #fbfaff; }
#how-it-works .pr-core.is-lit .pr-core-state { color: var(--violet); }
#how-it-works .pr-out { position: relative; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
#how-it-works .pr-out li {
  width: 210px; padding: 14px 16px 16px; border-radius: 14px; border: 1px solid var(--hair); background: #fff; box-shadow: var(--shadow-card);
}
#how-it-works .pr-out-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 500; }
#how-it-works .pr-ready { margin-left: auto; padding: 2px 9px; border-radius: 100px; background: var(--violet-tint); color: var(--violet); font-size: 12px; font-weight: 500; }
#how-it-works .pr-line { display: block; height: 6px; border-radius: 3px; background: #ececf0; }
#how-it-works .pr-line + .pr-line { width: 64%; margin-top: 7px; }
#how-it-works .pr-caption { margin-top: 18px; text-align: center; font-size: 15px; color: var(--ink-muted); }

/* the three steps under the stage: a bar along the top fills while that
   act plays; the text never fades */
#how-it-works .pr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 40px 0 0; padding: 0; list-style: none; }
#how-it-works .pr-step { position: relative; padding-top: 22px; }
#how-it-works .pr-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 1px; background: var(--hair); overflow: hidden; }
#how-it-works .pr-bar i { position: absolute; inset: 0; background: var(--violet); transform-origin: left; transform: scaleX(0); }
#how-it-works .pr-step.is-now .pr-bar i { transform: scaleX(1); transition: transform var(--dur, 5s) linear; }
#how-it-works .pr-num { margin: 0 0 6px; font-size: 14px; font-weight: 500; color: var(--ink-muted); transition: color 400ms var(--ease); }
#how-it-works .pr-step.is-now .pr-num, #how-it-works.pr-still .pr-num { color: var(--violet); }
#how-it-works .pr-step h3 { margin: 0 0 8px; font-size: 19px; }
#how-it-works .pr-step p:last-of-type { max-width: 40ch; color: var(--ink-muted); }
#how-it-works .pr-pick { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
#how-it-works .pr-pick:focus-visible { outline: 2px solid var(--violet); outline-offset: 6px; border-radius: 8px; }
#how-it-works .pr-note { max-width: 640px; margin-top: 40px; color: var(--ink-muted); }

/* live state (only when the script runs the story) */
#how-it-works .pr-live [data-on] { transition: opacity 500ms var(--ease), transform 600ms var(--ease); }
#how-it-works .pr-live .pr-l [data-on]:not(.on) { opacity: 0; transform: translateX(-18px); }
#how-it-works .pr-live .pr-r [data-on]:not(.on) { opacity: 0; transform: translateX(18px); }
#how-it-works .pr-live .pr-url[data-on]:not(.on) { opacity: 0; transform: translateY(8px); }
#how-it-works .pr-live .pr-out [data-on]:not(.on) { opacity: 0; transform: translateY(12px); }
#how-it-works .pr-live .pr-wires .wire { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 800ms var(--ease); }
#how-it-works .pr-live .pr-wires .wire.on { stroke-dashoffset: 0; }
#how-it-works .pr-live .pr-wires .wire:not(.on) { transition: none; }
#how-it-works .flow-l .pulse.l, #how-it-works .flow-r .pulse.r { opacity: 1; animation: prPulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite backwards; }
#how-it-works .pr-instant, #how-it-works .pr-instant * { transition: none !important; }
#how-it-works .is-paused, #how-it-works .is-paused * { animation-play-state: paused !important; }
@keyframes prPulse { 0% { stroke-dashoffset: 9; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }

@media (max-width: 900px) {
  #how-it-works .pr-stage { padding: 24px 16px; }
  #how-it-works .pr-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #how-it-works .pr-wires { display: none; }
  #how-it-works .pr-mid { order: -1; }
  #how-it-works .pr-r .pr-cap { margin-left: 0; }
  #how-it-works .pr-r .pr-list li { justify-content: flex-start; }
  #how-it-works .pr-live .pr-r [data-on]:not(.on) { transform: translateX(-18px); }
  #how-it-works .pr-out { margin-top: 24px; gap: 10px; }
  #how-it-works .pr-out li { width: 100%; }
  #how-it-works .pr-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 32px; }
}
/* END process */
/* BEGIN process-compact: tighter stage, and on phones one side at a time
   (Darren: it took too many scrolls to see it all) */
#how-it-works .head { margin-bottom: 32px; }
#how-it-works .pr-stage { padding: 28px 32px; }
#how-it-works .pr-row { gap: 40px; }
#how-it-works .pr-list { gap: 8px; }
#how-it-works .pr-list li { min-height: 38px; padding: 8px 14px; font-size: 13.5px; }
#how-it-works .pr-out { margin-top: 24px; gap: 12px; }
#how-it-works .pr-out li { width: 200px; padding: 12px 14px 14px; }
#how-it-works .pr-out-top { white-space: nowrap; }
#how-it-works .pr-steps { margin-top: 28px; gap: 28px; }
#how-it-works .pr-step h3 { margin-bottom: 4px; font-size: 17px; }
#how-it-works .pr-step p:last-of-type { font-size: 14px; }
#how-it-works .pr-note { margin-top: 24px; font-size: 14px; }
#how-it-works .mid-cta { margin-top: 20px; }
@media (max-width: 900px) {
  #how-it-works .pr-stage { padding: 20px 14px; }
  #how-it-works .pr-row { grid-template-areas: 'mid' 'l' 'r'; gap: 16px; }
  #how-it-works .pr-mid { grid-area: mid; }
  #how-it-works .pr-l { grid-area: l; }
  #how-it-works .pr-r { grid-area: r; }
  /* while it plays, both sides share one spot: yours in acts 1 and 2,
     what's winning in act 3 */
  #how-it-works .pr-live .pr-row { grid-template-areas: 'mid' 'side'; }
  #how-it-works .pr-live .pr-l, #how-it-works .pr-live .pr-r { grid-area: side; transition: opacity 400ms var(--ease), visibility 0s linear 0s; }
  #how-it-works .pr-live[data-act="2"] .pr-l, #how-it-works .pr-live:not([data-act="2"]) .pr-r { opacity: 0; visibility: hidden; }
  #how-it-works .pr-list { display: flex; flex-wrap: wrap; gap: 6px; }
  #how-it-works .pr-list li { min-height: 0; padding: 7px 11px; font-size: 13px; box-shadow: none; }
  #how-it-works .pr-out { justify-content: flex-start; gap: 6px; margin-top: 16px; }
  #how-it-works .pr-out li { width: auto; padding: 8px 12px; }
  #how-it-works .pr-out li > :not(.pr-out-top) { display: none; }
  #how-it-works .pr-out-top { margin: 0; }
  #how-it-works .pr-out .pr-ready { display: none; }
  #how-it-works .pr-out li { flex: none; }
  #how-it-works .pr-steps { gap: 16px; margin-top: 20px; }
  #how-it-works .pr-step { padding-top: 14px; }
  #how-it-works .pr-step h3 { font-size: 16px; }
}
/* a titled divider between what goes in and the drafts that come out,
   in the style of the hero's channel title */
#how-it-works .pr-divider { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; margin: 36px 0 0; }
#how-it-works .pr-divider::before, #how-it-works .pr-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, rgba(58, 15, 176, 0), rgba(58, 15, 176, 0.28) 20%, rgba(58, 15, 176, 0.28) 80%, rgba(58, 15, 176, 0)); }
#how-it-works .pr-divider span { padding: 4px 12px; border-radius: 100px; background: #fff; font-size: 12px; line-height: 20px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); white-space: nowrap; }
#how-it-works .pr-divider + .pr-out { margin-top: 20px; }
#how-it-works .pr-live .pr-divider { transition: opacity 500ms var(--ease); }
#how-it-works .pr-live .pr-divider:not(.on) { opacity: 0; }
@media (max-width: 900px) { #how-it-works .pr-divider { margin-top: 24px; } #how-it-works .pr-divider + .pr-out { margin-top: 14px; } }
/* END process-compact */
/* BEGIN pain */
/* Pain: three points beside one panel that plays a short beat for each
   (the week where posting slips, the post that took off for no clear
   reason, the retainer against your runway). The point on show gets a
   violet bar filling along its top, like the How it works steps; clicking
   a point jumps to its beat. Reduced motion, Save-Data, no JS: beat 1's
   finished frame, and the points still switch the picture. */
#pain .pain-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
#pain .pain-pts { display: grid; margin: 0; padding: 0; list-style: none; }
#pain .pain-pt { position: relative; padding: 22px 0; }
#pain .pain-pt:last-child { border-bottom: 1px solid var(--hair); }
#pain .pain-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 1px; background: var(--hair); overflow: hidden; }
#pain .pain-bar i { position: absolute; inset: 0; background: var(--violet); transform-origin: left; transform: scaleX(0); }
#pain .pain-pt.is-now .pain-bar i { transform: scaleX(1); }
#pain.pn-live .pain-pt.is-now .pain-bar i { transform: scaleX(0); animation: pnBar var(--dur, 6s) linear forwards; }
#pain.pn-live.is-held .pain-pt.is-now .pain-bar i, #pain.pn-live.is-off .pain-pt.is-now .pain-bar i { animation-play-state: paused; }
@keyframes pnBar { to { transform: scaleX(1); } }
#pain .pain-pt h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.02em; color: #3d3d45; transition: color 400ms var(--ease); }
#pain .pain-pt.is-now h3 { color: var(--ink); }
#pain .pain-pt p { margin: 0; max-width: 46ch; color: var(--ink-muted); }
#pain .pain-pick { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
#pain .pain-pick:focus-visible { outline: 2px solid var(--violet); outline-offset: 6px; border-radius: 8px; }

#pain .pn-panel { position: relative; overflow: hidden; isolation: isolate; min-height: 470px; border-radius: 20px; border: 1px solid var(--hair); background: #f7f5ff; }
#pain .pn-panel > .step-ht { position: absolute; inset: 0; z-index: 0; }
#pain .pn-beat { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 32px; opacity: 0; visibility: hidden; transition: opacity 450ms var(--ease), visibility 0s linear 450ms; }
#pain .pn-beat.is-on { opacity: 1; visibility: visible; transition: opacity 450ms var(--ease) 150ms, visibility 0s; }
#pain .pn-card { position: relative; width: 100%; max-width: 440px; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); }
#pain .pn-top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
#pain .pn-top small { padding: 3px 10px; border-radius: 100px; background: var(--surface); font-size: 12px; font-weight: 500; color: var(--ink-muted); }

/* beat 1: the week. "Write posts" hops down a day each time something
   else lands, then slides off into next week */
#pain .wk-rows { position: relative; display: grid; gap: 6px; }
#pain .wk-row, #pain .wk-next { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; background: var(--surface); }
#pain .wk-day { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
#pain .wk-task { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; transition: opacity 350ms var(--ease), transform 350ms var(--ease); }
#pain .wk-task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* keep each task clear of the "Write posts" pill on the right */
#pain .wk-task { max-width: calc(100% - 124px); }
#pain .wk-box { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid rgba(0, 0, 0, 0.22); transition: background-color 250ms var(--ease), border-color 250ms var(--ease); }
#pain .wk-box svg { width: 10px; height: 10px; opacity: 0; transition: opacity 200ms ease; }
#pain .wk-row.done .wk-box { background: var(--ink); border-color: var(--ink); }
#pain .wk-row.done .wk-box svg { opacity: 1; }
#pain .wk-row.done .wk-task span { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, 0.3); }
#pain .wk-post { position: absolute; top: 6px; right: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 100px; background: var(--violet); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; transform: translate(0, calc(var(--row, 0) * 50px)); transition: transform 520ms cubic-bezier(0.5, 0, 0.2, 1), opacity 400ms var(--ease); }
#pain .wk-post svg, #pain .wk-post-next svg { width: 13px; height: 13px; }
#pain .wk-post.gone { opacity: 0; transform: translate(140%, calc(var(--row, 0) * 50px)); transition: transform 650ms cubic-bezier(0.6, 0, 0.8, 0.4), opacity 500ms ease 150ms; }
#pain .wk-post.hop { animation: wkHop 520ms cubic-bezier(0.5, 0, 0.2, 1); }
@keyframes wkHop { 45% { scale: 1.08; } }
#pain .wk-next { margin-top: 10px; background: #fff; border: 1.5px dashed rgba(58, 15, 176, 0.3); }
#pain .wk-next .wk-day { color: var(--violet); }
#pain .wk-post-next { justify-self: end; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 100px; background: var(--violet-tint); color: var(--violet); font-size: 13px; font-weight: 500; white-space: nowrap; transition: opacity 400ms var(--ease), transform 500ms var(--ease); }
#pain .pn-instant, #pain .pn-instant * { transition: none !important; animation: none !important; }
#pain.pn-live .wk-row:not(.in) .wk-task { opacity: 0; transform: translateX(14px); }
#pain.pn-live .wk-next:not(.on) .wk-post-next { opacity: 0; transform: translateX(-24px); }

/* beat 2: your posts. Small flat bars, then one tall one and no idea why */
#pain .pf-bars { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 200px; padding: 44px 4px 0; }
#pain .pf-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
#pain .pf-bar { width: 100%; max-width: 34px; height: var(--h); border-radius: 6px 6px 3px 3px; background: rgba(58, 15, 176, 0.16); transform-origin: bottom; transition: transform 520ms cubic-bezier(0.3, 0, 0.2, 1); }
#pain .pf-hit .pf-bar { background: var(--violet); transition-duration: 800ms; }
#pain .pf-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--hair); background: #fff; }
#pain .pf-ic img { width: 12px; height: 12px; }
#pain .pf-q { position: absolute; top: 0; left: 50%; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 100px; background: #fff; border: 1px solid var(--violet-tint-border); box-shadow: var(--shadow-card); color: var(--violet); font-size: 13px; font-weight: 500; white-space: nowrap; transform: translateX(-50%); transition: opacity 350ms var(--ease), transform 450ms var(--ease); }
#pain .pf-q b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 12px; }
#pain .pf-foot { margin: 14px 0 0; font-size: 13px; color: var(--ink-muted); }
#pain.pn-live .pf-col:not(.on) .pf-bar { transform: scaleY(0); }
#pain.pn-live .pf-q:not(.on) { opacity: 0; transform: translate(-50%, 8px); }

/* beat 3: the retainer against your runway */
#pain .rw-sec + .rw-sec { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hair); }
#pain .rw-k { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--ink-muted); }
#pain .rw-v { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
#pain .rw-v span { font-size: 16px; letter-spacing: -0.01em; color: var(--ink-muted); }
#pain .rw-bill { transition: opacity 400ms var(--ease), transform 500ms var(--ease); }
#pain .rw-track { position: relative; height: 14px; border-radius: 7px; background: rgba(58, 15, 176, 0.1); overflow: hidden; }
#pain .rw-fill { position: absolute; inset: 0 auto 0 0; width: 34%; border-radius: 7px; background: var(--violet); transition: width 1400ms cubic-bezier(0.5, 0, 0.2, 1); }
#pain .rw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
#pain .rw-ends { font-size: 12px; color: var(--ink-muted); }
#pain .rw-tag { padding: 4px 10px; border-radius: 100px; background: var(--blank-bg); border: 1px solid rgba(138, 90, 0, 0.25); color: var(--blank-ink); font-size: 12px; font-weight: 500; white-space: nowrap; transition: opacity 350ms var(--ease), transform 400ms var(--ease); }
#pain.pn-live .rw-bill:not(.on) { opacity: 0; transform: translateY(-10px); }
#pain.pn-live .rw-fill:not(.cut) { width: 100%; }
#pain.pn-live .rw-tag:not(.on) { opacity: 0; transform: translateY(6px); }

/* the closing line sits under the three points in the left column, which
   is centred against the picture */
#pain .pain-close { max-width: 460px; margin: 36px 0 0; font-size: 22px; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
#pain .pain-close::before { content: ''; display: block; width: 40px; height: 2px; margin: 0 0 18px; border-radius: 1px; background: var(--violet); }
@media (max-width: 900px) {
  #pain .pain-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #pain .pn-panel { order: -1; min-height: 400px; }
  #pain .pn-beat { padding: 20px 14px; }
  #pain .pn-card { padding: 16px 14px; }
  #pain .pain-pt { padding: 18px 0; }
  #pain .pain-pt h3 { font-size: 17px; }
  #pain .pf-bars { gap: 6px; height: 180px; }
  #pain .wk-row, #pain .wk-next { grid-template-columns: 34px minmax(0, 1fr); padding: 0 10px; }
  #pain .wk-task { gap: 6px; font-size: 12.5px; max-width: calc(100% - 98px); }
  #pain .wk-post { right: 6px; height: 30px; padding: 0 10px; font-size: 12px; transform: translate(0, calc(var(--row, 0) * 50px + 1px)); }
  #pain .wk-post-next { height: 30px; padding: 0 10px; font-size: 12px; }
  #pain .rw-v { font-size: 30px; }
  #pain .pain-close { font-size: 20px; margin-top: 28px; }
}
/* END pain */
/* BEGIN shift */
#shift .shift-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: stretch; }
#shift .shift-list { display: grid; align-content: center; gap: 0; margin: 0; padding: 0; list-style: none; }
#shift .shift-item { border-top: 1px solid var(--hair); }
#shift .shift-item:last-child { border-bottom: 1px solid var(--hair); }
#shift .shift-btn { position: relative; display: block; width: 100%; padding: 22px 4px 22px 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
#shift .shift-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 6px; }
#shift .shift-t { display: block; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink-muted); transition: color 400ms var(--ease); }
#shift .shift-btn:hover .shift-t { color: var(--ink); }
#shift .shift-item.is-on .shift-t { color: var(--ink); }
#shift .shift-d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease); }
#shift .shift-d > span { overflow: hidden; max-width: 44ch; color: var(--ink-muted); }
#shift .shift-item.is-on .shift-d { grid-template-rows: 1fr; }
#shift .shift-d > span::before { content: ''; display: block; height: 8px; }
/* the timer: a thin line along the open item's foot, fills over its turn */
#shift .shift-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; overflow: hidden; }
#shift .shift-bar i { position: absolute; inset: 0; background: var(--violet); transform-origin: left; transform: scaleX(0); }
#shift .shift-item.is-on .shift-bar i { animation: shiftFill var(--dur, 6s) linear forwards; }
#shift.is-held .shift-item.is-on .shift-bar i, #shift.is-off .shift-item.is-on .shift-bar i { animation-play-state: paused; }
#shift.is-still .shift-bar { display: none; }
@keyframes shiftFill { to { transform: scaleX(1); } }
#shift .shift-stage {
  position: relative; overflow: hidden; isolation: isolate; min-height: 480px;
  border-radius: 20px; border: 1px solid var(--hair); background: #f7f5ff;
}
#shift .shift-stage > .step-ht { position: absolute; inset: 0; }
#shift .shift-pic { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 32px; opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease), transform 600ms var(--ease); pointer-events: none; }
#shift .shift-pic.is-on { opacity: 1; transform: none; pointer-events: auto; }
#shift .sp-card { width: 100%; max-width: 400px; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); font-size: 14px; }
#shift .sp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; font-weight: 500; color: var(--ink-muted); }
#shift .sp-head img { flex: none; }
#shift .sp-tag { margin-left: auto; padding: 3px 10px; border-radius: 100px; background: var(--violet-tint); color: var(--violet); font-size: 12px; font-weight: 500; white-space: nowrap; }
/* 1: a week of drafts waiting */
#shift .sp-week { display: grid; gap: 8px; width: 100%; max-width: 400px; margin: 0; padding: 0; list-style: none; }
#shift .sp-week li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); }
#shift .sp-week .d { width: 34px; font-size: 13px; font-weight: 500; color: var(--ink-muted); }
#shift .sp-week .c { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
#shift .sp-week .c img { flex: none; }
#shift .sp-week .s { margin-left: auto; padding: 3px 10px; border-radius: 100px; background: var(--violet-tint); color: var(--violet); font-size: 12px; font-weight: 500; white-space: nowrap; }
/* 2: a draft from your stories, with its source */
#shift .sp-text { margin: 0; font-size: 15px; line-height: 1.55; }
#shift .sp-text mark { padding: 2px 6px; border-radius: 4px; background: var(--violet-tint); color: inherit; }
#shift .sp-text sup { font-size: 0.75em; color: var(--violet); font-weight: 600; }
#shift .sp-src { display: grid; gap: 4px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--hair); list-style: none; font-size: 13px; color: var(--ink-muted); }
#shift .sp-src b { color: var(--violet); font-weight: 600; }
/* 3: the format and why it works */
#shift .sp-fmt { margin: 0 0 12px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
#shift .sp-why { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#shift .sp-why li { display: flex; align-items: center; gap: 10px; }
#shift .sp-why li::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.4 6.2l1.7 1.7 3.5-3.8' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
#shift .sp-note { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface); font-size: 13px; color: var(--ink-muted); }
/* 4: a coaching moment */
#shift .sp-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
#shift .sp-steps li { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: 10px; background: var(--surface); }
#shift .sp-steps li.now { background: var(--violet-tint); color: var(--violet); font-weight: 500; }
#shift .sp-steps .k { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, 0.22); }
#shift .sp-steps li.now .k { border-color: var(--violet); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 9px var(--violet); }
/* in-picture motion, only while that picture is on */
#shift.is-live .shift-pic [data-at] { opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
#shift.is-live .shift-pic [data-at].on { opacity: 1; transform: none; }
@media (max-width: 900px) {
  #shift .shift-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #shift .shift-stage { min-height: 400px; order: -1; }
  #shift .shift-pic { padding: 20px 16px; }
  #shift .shift-t { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #shift .shift-pic, #shift .shift-d, #shift .shift-t { transition: none; }
}
/* END shift */
/* BEGIN coaching */
#coaching .co-art {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 20px;
  border: 1px solid var(--hair); background: #f7f5ff;
}
#coaching .co-art > .step-ht { position: absolute; inset: 0; z-index: 0; }
#coaching .co-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 48px 40px; }
#coaching .co-card { min-height: 236px; padding: 18px 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); font-size: 13px; }
#coaching .co-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 500; }
#coaching .co-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
#coaching .co-tag { margin-left: auto; padding: 3px 10px; border-radius: 100px; background: var(--violet-tint); color: var(--violet); font-size: 12px; font-weight: 500; }
#coaching .co-copy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; padding: 0 4px; }
#coaching .co-copy h3 { margin: 0 0 6px; font-size: 18px; }
#coaching .co-copy p { color: var(--ink-muted); max-width: 36ch; }
/* moment 1: the first 30 minutes */
#coaching .co-time { display: flex; align-items: baseline; gap: 8px; }
#coaching .co-clock { font-size: 34px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
#coaching .co-left { font-size: 12px; color: var(--ink-muted); }
#coaching .co-track { height: 4px; margin: 12px 0 16px; border-radius: 2px; background: rgba(58, 15, 176, 0.12); overflow: hidden; }
#coaching .co-track i { display: block; height: 100%; width: var(--w, 100%); background: var(--violet); border-radius: 2px; transition: width 900ms linear; }
#coaching .co-tips { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#coaching .co-tips li, #coaching .co-days li { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); }
#coaching .co-tips li::before, #coaching .co-days li::before {
  content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #d6d6dc;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
}
#coaching .co-tips li.on, #coaching .co-days li.on { color: var(--ink); }
#coaching .co-tips li.on::before, #coaching .co-days li.on::before {
  border-color: var(--violet);
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.4 6.2l1.7 1.7 3.5-3.8' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
/* moment 2: warm-up days */
#coaching .co-days { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
#coaching .co-days b { flex: none; width: 44px; font-weight: 500; color: var(--ink-muted); }
#coaching .co-days li.now { color: var(--ink); font-weight: 500; }
#coaching .co-days li.now::before { border-color: var(--violet); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 8px var(--violet); }
/* moment 3: a post takes off */
#coaching .co-post { display: flex; align-items: center; gap: 8px; }
#coaching .co-av { width: 26px; height: 26px; border-radius: 50%; background: var(--violet-tint); }
#coaching .co-ln { display: block; height: 7px; border-radius: 4px; background: #ececf0; }
#coaching .co-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin: 14px 0 12px; padding-bottom: 1px; border-bottom: 1px solid var(--hair); }
#coaching .co-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: rgba(58, 15, 176, 0.16); transition: height 700ms var(--ease), background-color 400ms var(--ease); }
#coaching .co-bars i:last-child { background: var(--violet); }
#coaching .co-tip { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface); color: var(--ink); transition: opacity 400ms var(--ease), transform 500ms var(--ease); }
#coaching .co-tip img { flex: none; margin-top: 2px; }
#coaching.is-live .co-tip:not(.on) { opacity: 0; transform: translateY(6px); }
@media (max-width: 900px) {
  #coaching .co-cards { grid-template-columns: minmax(0, 1fr); padding: 24px 16px; gap: 16px; }
  #coaching .co-card { min-height: 0; }
  #coaching .co-copy { display: none; }
  #coaching .co-cap { display: block; }
}
#coaching .co-cap { display: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
#coaching .co-cap strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 500; }
#coaching .co-cap span { color: var(--ink-muted); }
/* END coaching */
/* BEGIN about-you */
/* One loop, four beats. The playing card lifts with a violet border and a
   bar that fills over its turn; the stage above plays its beat: the Library
   on the left reacts, the draft card on the right shows the change. Class
   prefix yb- (rebuilt 2026-10-22). Everything shows as a finished frame
   until the script adds .yb-live. */
#about-you .yb-stage {
  position: relative; overflow: hidden; isolation: isolate; padding: 40px;
  border-radius: 20px; border: 1px solid var(--hair); background: #f7f5ff;
}
#about-you .yb-stage > .step-ht { position: absolute; inset: 0; z-index: 0; }
#about-you .yb-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 340px) minmax(48px, 1fr) minmax(0, 480px); align-items: center; }

/* the Library */
#about-you .yb-lib { padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); }
#about-you .yb-lib-top { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 15px; font-weight: 500; }
#about-you .yb-ents { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#about-you .yb-ents li {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface);
  border: 1px solid transparent; font-size: 14px;
  transition: opacity 400ms var(--ease), transform 500ms var(--ease), background-color 400ms var(--ease), border-color 400ms var(--ease);
}
#about-you .yb-ents b { flex: none; padding: 3px 10px; border-radius: 100px; background: var(--violet-tint); color: var(--violet); font-size: 12px; font-weight: 500; }
#about-you .yb-ents i { flex: 1; height: 7px; border-radius: 4px; background: #e2e2e8; }
#about-you .yb-ents li.is-pick { background: #fff; border-color: var(--violet); transform: translateX(6px); }
#about-you .yb-learn { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--violet-tint); color: var(--violet); font-size: 13px; font-weight: 500; }
#about-you .yb-learn::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
#about-you .yb-learn span { transition: opacity 300ms var(--ease), transform 400ms var(--ease); }
#about-you .yb-learn.is-swap span { opacity: 0; transform: translateY(6px); }

/* the link between them: a violet dot runs along it, right when the
   Library feeds a draft, left when something is saved back */
/* the link between your Library and the draft: a fine solid line that is
   strongest in the middle, a port at each end, and a short comet of light
   that travels along it (no dashes) */
#about-you .yb-link { position: relative; z-index: 2; height: 2px; margin: 0; border-radius: 1px;
  background: linear-gradient(90deg, rgba(58, 15, 176, 0.18), rgba(58, 15, 176, 0.42) 50%, rgba(58, 15, 176, 0.18)); }
#about-you .yb-link::before, #about-you .yb-link::after { content: ''; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 2px rgba(58, 15, 176, 0.45), 0 1px 3px rgba(0, 0, 0, 0.12); }
#about-you .yb-link::before { left: -5px; }
#about-you .yb-link::after { right: -5px; }
#about-you .yb-link i { position: absolute; top: -1px; left: 0; width: 44px; height: 4px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(58, 15, 176, 0), var(--violet)); }
#about-you .yb-link.go-l i { background: linear-gradient(270deg, rgba(58, 15, 176, 0), var(--violet)); }
#about-you .yb-link.go-r i { animation: ybGoR 1000ms cubic-bezier(0.45, 0, 0.25, 1) forwards; }
#about-you .yb-link.go-l i { animation: ybGoL 1000ms cubic-bezier(0.45, 0, 0.25, 1) forwards; }
@keyframes ybGoR { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 44px); opacity: 0; } }
@keyframes ybGoL { 0% { left: calc(100% - 44px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 0; opacity: 0; } }

/* the draft card on the right: one scene per beat */
#about-you .yb-card { position: relative; min-height: 360px; border-radius: 16px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); }
#about-you .yb-scene { padding: 20px 22px 22px; }
#about-you .yb-scene + .yb-scene { display: none; }
/* the old scene fades out first, then the new one fades in, so they never overlap */
#about-you .yb-live .yb-card .yb-scene { display: block; position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 220ms var(--ease), visibility 0s linear 220ms; }
#about-you .yb-live .yb-card .yb-scene.is-on { opacity: 1; visibility: visible; transition: opacity 420ms var(--ease) 240ms; }
#about-you .yb-top { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 14px; font-weight: 500; }
#about-you .yb-top img { flex: none; }
#about-you .yb-tag { margin-left: auto; padding: 3px 10px; border-radius: 100px; background: var(--surface); color: var(--ink-muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
#about-you .yb-tag.v { background: var(--violet-tint); color: var(--violet); }
#about-you .yb-text { margin: 0; font-size: 18px; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); }
#about-you .yb-text mark { padding: 2px 6px; border-radius: 6px; background: var(--violet-tint); color: var(--violet); }
#about-you .yb-lines { display: grid; gap: 8px; margin-top: 16px; }
#about-you .yb-lines i { display: block; height: 8px; border-radius: 4px; background: #ececf0; }
#about-you .yb-lines i:nth-child(2) { width: 82%; } #about-you .yb-lines i:nth-child(3) { width: 60%; }
#about-you .yb-src { display: inline-block; margin-top: 16px; padding: 6px 12px; border-radius: 100px; background: var(--surface); font-size: 13px; color: var(--ink-muted); }
#about-you .yb-src b { margin-left: 4px; color: var(--violet); font-weight: 500; }
/* frames: [data-f] waits for its frame while the loop runs */
#about-you .yb-live [data-f] { transition: opacity 450ms var(--ease), transform 550ms var(--ease); }
#about-you .yb-live [data-f]:not(.on) { opacity: 0; transform: translateY(8px); }

/* beat 2: your edit */
#about-you .yb-edit { margin: 0; font-size: 21px; line-height: 1.55; letter-spacing: -0.015em; }
#about-you .yb-edit s { position: relative; text-decoration: none; color: var(--ink-muted); transition: color 400ms var(--ease); }
#about-you .yb-edit s::after { content: ''; position: absolute; left: -2px; right: -2px; top: 55%; height: 2px; border-radius: 1px; background: var(--violet); transform-origin: left; transition: transform 600ms var(--ease); }
#about-you .yb-live .yb-edit s:not(.on) { color: var(--ink); }
#about-you .yb-live .yb-edit s:not(.on)::after { transform: scaleX(0); }
#about-you .yb-live .yb-edit s[data-f]:not(.on) { opacity: 1; transform: none; }
#about-you .yb-edit ins { text-decoration: none; padding: 2px 8px; border-radius: 6px; background: var(--violet-tint); color: var(--violet); }
#about-you .yb-live .yb-edit ins:not(.on) { display: none; }
#about-you .yb-caret { display: none; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--violet); }
#about-you .is-typing .yb-caret { display: inline-block; animation: ybBlink 900ms steps(1) infinite; }
@keyframes ybBlink { 50% { opacity: 0; } }
#about-you .yb-reset, #about-you .yb-reset * { transition: none !important; }
#about-you .yb-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 7px 12px; border-radius: 100px; background: var(--violet); color: #fff; font-size: 13px; font-weight: 500; }
#about-you .yb-chip svg { flex: none; }
#about-you .yb-next { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--surface); font-size: 15px; line-height: 1.5; }
#about-you .yb-next b { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 100px; background: #fff; border: 1px solid var(--hair); font-size: 12px; font-weight: 500; vertical-align: 1px; }
#about-you .yb-next mark { padding: 2px 6px; border-radius: 6px; background: var(--violet-tint); color: var(--violet); }

/* beat 3: what your audience liked */
#about-you .yb-posts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
#about-you .yb-posts li { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; font-size: 14px; transition: background-color 400ms var(--ease); }
#about-you .yb-bar { position: relative; height: 10px; border-radius: 5px; background: #f0f0f3; overflow: hidden; }
#about-you .yb-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 5px; background: rgba(58, 15, 176, 0.22); transition: width 900ms var(--ease), background-color 400ms var(--ease); }
#about-you .yb-live .yb-posts:not(.grow) .yb-bar i { width: 0; }
#about-you .yb-posts li.win { background: var(--violet-tint); }
#about-you .yb-posts li.win .yb-bar i { background: var(--violet); }
#about-you .yb-live .yb-posts li.win:not(.on) { background: transparent; }
#about-you .yb-live .yb-posts li.win:not(.on) .yb-bar i { width: 30% !important; background: rgba(58, 15, 176, 0.22); }
#about-you .yb-live .yb-posts li[data-f]:not(.on) { opacity: 1; transform: none; }
#about-you .yb-liked { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 12px; border-radius: 100px; background: #fff; border: 1px solid var(--violet-tint-border); color: var(--violet); font-size: 13px; font-weight: 500; }
#about-you .yb-more { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface); font-size: 14px; }
#about-you .yb-more .yb-tag { margin-left: 0; }
#about-you .yb-more .yb-pill { margin-left: auto; padding: 3px 10px; border-radius: 100px; background: var(--violet); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; }
#about-you .yb-live .yb-more .yb-pill:not(.on) { transform: translateY(-46px); }

/* beat 4: the coach */
#about-you .yb-note { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); }
#about-you .yb-live .yb-note:not(.on) { transform: translateY(-24px); }
#about-you .yb-note img { flex: none; margin-top: 2px; }
#about-you .yb-note p { margin: 0; font-size: 13px; color: var(--ink-muted); }
#about-you .yb-note strong { display: block; font-size: 16px; font-weight: 500; color: var(--ink); }
#about-you .yb-hour { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 13px; color: var(--ink-muted); }
#about-you .yb-hour .yb-bar { flex: 1; }
#about-you .yb-hour .yb-bar i { --w: 70%; background: var(--violet); }
#about-you .yb-live .yb-hour.on .yb-bar i { width: 55%; transition: width 3s linear; }
#about-you .yb-live .yb-hour:not(.on) .yb-bar i { width: 100%; }
#about-you .yb-checks { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
#about-you .yb-checks li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
#about-you .yb-checks li::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.4 6.2l1.7 1.7 3.5-3.8' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; transition: background-color 300ms var(--ease); }
#about-you .yb-live .yb-checks li:not(.on)::before { background: #fff; box-shadow: inset 0 0 0 1.5px #d4d4dc; }
#about-you .yb-live .yb-checks li[data-f]:not(.on) { opacity: 1; transform: none; color: var(--ink-muted); }

/* the four cards: take turns, the playing one lifts */
#about-you .yb-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
#about-you .yb-c {
  position: relative; padding: 22px 20px 22px; border-radius: 16px; border: 1px solid var(--hair); background: #fff;
  transition: transform 450ms var(--ease), border-color 450ms var(--ease), box-shadow 450ms var(--ease);
}
#about-you .yb-c h3 { margin: 0 0 6px; font-size: 17px; }
#about-you .yb-c p { color: var(--ink-muted); font-size: 14px; }
#about-you .yb-bar2 { position: absolute; left: 20px; right: 20px; top: 0; height: 3px; border-radius: 0 0 2px 2px; overflow: hidden; }
#about-you .yb-bar2 i { position: absolute; inset: 0; background: var(--violet); transform-origin: left; transform: scaleX(0); }
#about-you .yb-c.is-now { transform: translateY(-6px); border-color: var(--violet); box-shadow: var(--shadow-card); }
#about-you .yb-c.is-now .yb-bar2 i { animation: ybFill var(--dur, 4.4s) linear forwards; }
#about-you .yb-held .yb-c.is-now .yb-bar2 i { animation-play-state: paused; }
@keyframes ybFill { to { transform: scaleX(1); } }
#about-you .yb-pick { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; border-radius: 16px; background: transparent; cursor: pointer; }
#about-you .yb-pick:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
#about-you .yb-pic { display: none; }

@media (max-width: 1100px) {
  #about-you .yb-inner { grid-template-columns: minmax(0, 300px) minmax(32px, 1fr) minmax(0, 420px); }
  #about-you .yb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #about-you .yb-stage { padding: 24px 16px; }
  #about-you .yb-inner { grid-template-columns: minmax(0, 1fr); }
  #about-you .yb-link, #about-you .yb-inner > .yb-card { display: none; }
  #about-you .yb-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #about-you .yb-c.is-now { transform: none; }
  /* phones: each card carries its own picture (the script moves the
     scenes in) and plays it once as it comes into view */
  #about-you .yb-pic { display: block; margin: 0 0 16px; border-radius: 12px; background: #faf9ff; }
  #about-you .yb-more { flex-wrap: wrap; }
  #about-you .yb-more .yb-pill { margin-left: 0; }
  #about-you .yb-pic:empty { display: none; }
  #about-you .yb-pic .yb-scene { display: block; padding: 16px; }
  #about-you .yb-text { font-size: 16px; }
  #about-you .yb-edit { font-size: 18px; }
  #about-you .yb-posts li { grid-template-columns: 124px minmax(0, 1fr); padding: 8px 12px; font-size: 13px; }
}
/* active card (Darren, 2026-10-22): the timing line runs along the top
   edge with tapered, pointed ends, and its light falls down into the card
   only (nothing above the card) */
#about-you .yb-c { position: relative; isolation: isolate; }
#about-you .yb-bar2 { display: block; top: -1px; bottom: auto; left: 16px; right: 16px; height: 3px; border-radius: 0; overflow: visible; }
#about-you .yb-bar2 i { border-radius: 0; box-shadow: none;
  clip-path: polygon(0 50%, 8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%); }
#about-you .yb-c::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(85% 60% at 50% 0%, rgba(58, 15, 176, 0.16), rgba(58, 15, 176, 0.05) 55%, rgba(58, 15, 176, 0) 85%);
  opacity: 0; transition: opacity 700ms var(--ease); }
#about-you .yb-c.is-now { border-color: var(--violet-tint-border); }
#about-you .yb-c.is-now::before { opacity: 1; }
/* inside a card on phones the chip kept the card text colour */
#about-you .yb-c .yb-chip { color: #fff; }
/* phones: the big Library picture showed only its left half there; each
   card already plays its own complete picture, so the stage steps aside */
@media (max-width: 900px) { #about-you .yb-stage { display: none; } #about-you .yb-cards { margin-top: 0; } }
/* END about-you */
/* BEGIN compare */
#compare .cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
#compare .cmp-art {
  position: relative; overflow: hidden; isolation: isolate; height: 200px; padding: 24px; border-radius: 16px;
  border: 1px solid var(--hair); background: #f7f5ff; display: flex; align-items: center; justify-content: center;
}
#compare .cmp-art > .step-ht { position: absolute; inset: 0; z-index: 0; }
#compare .cmp-mock { position: relative; z-index: 1; width: 100%; max-width: 260px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-card); font-size: 13px; }
#compare .cmp-lbl { margin-bottom: 10px; font-size: 12px; color: var(--ink-muted); }
#compare .cmp-lines { display: grid; gap: 6px; }
#compare .cmp-lines i { display: block; height: 8px; border-radius: 4px; background: #d9d9e0; transform-origin: left; }
#compare .cmp-lines i:nth-child(2) { width: 92%; } #compare .cmp-lines i:nth-child(3) { width: 96%; } #compare .cmp-lines i:nth-child(4) { width: 70%; }
#compare.is-live .cmp-lines i { animation: cmpType 4.8s var(--ease) infinite backwards; }
#compare.is-live .cmp-lines i:nth-child(2) { animation-delay: 300ms; } #compare.is-live .cmp-lines i:nth-child(3) { animation-delay: 600ms; } #compare.is-live .cmp-lines i:nth-child(4) { animation-delay: 900ms; }
@keyframes cmpType { 0% { transform: scaleX(0); } 20%, 85% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
#compare .cmp-bill { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
#compare .cmp-bill:first-of-type { border-top: 0; padding-top: 0; }
#compare .cmp-bill span { color: var(--ink-muted); }
#compare .cmp-bill b { font-weight: 500; font-variant-numeric: tabular-nums; }
#compare .cmp-bill.cmp-sum b { font-size: 20px; letter-spacing: -0.02em; }
#compare .cmp-diy { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#compare .cmp-diy li { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); }
#compare .cmp-diy li::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #d6d6dc; }
#compare .cmp-prog { height: 4px; margin-top: 14px; border-radius: 2px; background: rgba(58, 15, 176, 0.12); overflow: hidden; }
#compare .cmp-prog i { display: block; width: 12%; height: 100%; background: var(--violet); border-radius: 2px; }
#compare.is-live .cmp-prog i { animation: cmpCrawl 9s linear infinite; }
@keyframes cmpCrawl { from { width: 2%; } to { width: 14%; } }
#compare .cmp-col h3 { margin: 24px 0 8px; font-size: 18px; }
#compare .cmp-col p { color: var(--ink-muted); max-width: 44ch; }
#compare .cmp-col p strong { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); font-weight: 500; color: var(--ink); }
@media (max-width: 900px) { #compare .cmp { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
/* END compare */
/* BEGIN founding */
#founding.fo { position: relative; overflow: hidden; isolation: isolate; margin-top: 224px; padding: 120px 0; background: #fff; }
#founding .fo-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
#founding .fo-sky > * { position: absolute; inset: 0; }
#founding .fo-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; align-items: center; }
#founding h2 { margin: 0; font-size: 56px; line-height: 1.02; letter-spacing: -0.045em; }
#founding .sub { max-width: 460px; margin: 20px 0 32px; }
#founding .fo-pass {
  position: relative; justify-self: center; width: 100%; max-width: 380px; padding: 28px 28px 24px; border-radius: 24px;
  background: #fff; border: 1px solid var(--hair); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 30px 60px rgba(17, 17, 19, 0.12);
}
#founding .fo-brand { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 500; letter-spacing: -0.03em; }
#founding .fo-kind { margin: 28px 0 4px; font-size: 13px; color: var(--ink-muted); }
#founding .fo-title { font-size: 30px; line-height: 1.1; font-weight: 500; letter-spacing: -0.035em; }
#founding .fo-name { display: block; width: 58%; height: 9px; margin-top: 14px; border-radius: 5px; background: #ececf0; }
#founding .fo-rule { margin: 24px -28px 20px; border-top: 1.5px dashed #e0e0e6; }
#founding .fo-rows { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
#founding .fo-rows li { display: flex; align-items: center; gap: 12px; }
#founding .fo-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--violet-tint); color: var(--violet); }
#founding .fo-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#founding .fo-shackle { transition: transform 500ms cubic-bezier(0.3, 0, 0.2, 1); }
#founding.fo-armed .fo-shackle { transform: translateY(-2.5px); }
#founding.fo-armed.is-shut .fo-shackle { transform: none; }
@media (max-width: 900px) {
  #founding.fo { margin-top: 120px; padding: 80px 0; }
  #founding .fo-in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  #founding h2 { font-size: 38px; }
}
/* bolder (Darren, 2026-10-22): the offer sits in a frosted glass box over
   the clouds, like the hero's stats band, and the pass gets a violet top */
#founding .fo-in { padding: 64px; border-radius: 28px; border: 1px solid rgba(58, 15, 176, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.7));
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 60px rgba(17, 17, 19, 0.08); }
#founding .fo-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 6px 12px; border-radius: 100px; background: var(--violet-tint); font-size: 13px; font-weight: 500; color: var(--violet); }
#founding .fo-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
#founding h2 { font-size: 60px; }
#founding .sub { font-size: 18px; color: #3d3d45; }
#founding .fo-btn { height: 52px; padding: 0 28px; font-size: 16px; }
#founding .fo-pass { padding: 0 0 24px; overflow: hidden; }
#founding .fo-pass-top { padding: 26px 28px 24px; border-bottom: 1.5px dashed #e0e0e6; }
#founding .fo-pass-top .fo-title { font-size: 34px; }
#founding .fo-rule { display: none; }
#founding .fo-rows { padding: 22px 28px 0; font-size: 15px; }
@media (max-width: 900px) {
  #founding .fo-in { padding: 32px 22px; border-radius: 22px; }
  #founding h2 { font-size: 38px; }
  #founding .sub { font-size: 16px; }
}
/* phones: no member card inside the box; its two perks sit as a list
   under the text and the button runs full width */
#founding .fo-perks { display: none; }
@media (max-width: 900px) {
  #founding .fo-pass { display: none; }
  #founding .fo-in { gap: 0; }
  #founding .sub { margin-bottom: 20px; }
  #founding .fo-perks { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; font-size: 15px; }
  #founding .fo-perks li { display: flex; align-items: center; gap: 12px; }
}
@media (max-width: 640px) { #founding .fo-btn { width: 100%; } }
/* END founding */