/* Geist, self-hosted (SIL OFL, public/fonts/OFL-LICENSE.txt). 800 falls back to Bold. */
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Bold.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Medium.woff2') format('woff2'); font-weight: 500 700; font-style: normal; font-display: swap; }

/* 127 v2 — dark, tight, product-first.
   Built from the existing 127group.io look (near-black, tight grotesk, grey-to-white
   headline gradient, lavender-white primary button, letter-spaced labels, thin-border cards)
   with a members'-club energy and product-led layouts. */
:root {
  --bg: #060607;
  --bg-2: #0a0a0c;
  --surface: #0e0e11;
  --surface-2: #141418;
  --surface-3: #1b1b20;
  --ink: #ededf2;
  --ink-2: #b3b3bd;
  --muted: #8b8b96;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --primary: #e3e6f1;
  --primary-ink: #0a0a0c;
  --accent: #3ee6a0;
  --accent-ink: #9ff3cc;
  --accent-soft: rgba(62, 230, 160, 0.09);
  /* D59 (Oct 21): Emerald is 127's signature and the accent (light on the subject, wins and progress too); Orchid is
     its partner and Flare a rare spark; the Founder's Circle is Diamond. Tiers by material: Chrome, Emerald, Diamond. */
  --tide: var(--emerald);   /* D59: Tide retired, kept as an alias */
  --tide-deep: #0b3a2a;
  --orchid: #a98bff;
  --flare: #f27bff;
  --neon: linear-gradient(90deg, var(--emerald), var(--orchid));
  --emerald: #3ee6a0;
  --emerald-deep: #0e7a55;
  --diamond: #eaf4ff;
  --gold: var(--diamond);   /* D59: the Circle is Diamond; old gold rules follow it */
  --gold-soft: rgba(234, 244, 255, 0.08);
  --win: #3ee6a0;
  --win-soft: rgba(62, 230, 160, 0.1);
  --danger: #f09b8a;
  /* legacy names used by views */
  --dark: #0e0e11;
  --dark-2: #141418;
  --dark-line: rgba(255, 255, 255, 0.1);
  --on-dark: #ededf2;
  --on-dark-2: #9a9aa5;
  --radius: 16px;
  --radius-sm: 10px;
  --display: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: var(--display);
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --max: 1200px;
  --glow: 0 0 0 1px var(--line), 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; letter-spacing: -0.005em;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(62, 230, 160, 0.3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.serif { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; }
.eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.mono { font-family: var(--mono); letter-spacing: 0; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.tiny { font-size: 12px; }
.center { text-align: center; }
.grad {
  background: linear-gradient(180deg, #ffffff 0%, #c9cad3 55%, #7f808c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-x {
  background: linear-gradient(100deg, #7d7e8a 0%, #f1f1f5 45%, #a7a1b4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- wordmark ---------- */
.mark { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; }
.mark .num { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -0.06em; }
.mark .word { font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; font-weight: 500; color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 22px; border-radius: 10px; border: 1px solid var(--primary);
  background: var(--primary); color: var(--primary-ink); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s, border-color .15s, box-shadow .2s;
  white-space: nowrap; box-shadow: 0 0 0 0 rgba(227, 230, 241, 0);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 30px -8px rgba(227, 230, 241, 0.35); }
.btn:active { transform: none; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.btn.ghost:hover { border-color: rgba(255,255,255,.3); background: var(--surface-2); }
.btn.pill { border-radius: 999px; background: transparent; color: var(--ink-2); border-color: var(--line-2); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; height: 40px; padding: 0 20px; box-shadow: none; }
.btn.pill:hover { color: var(--ink); border-color: rgba(255,255,255,.35); }
.btn.light { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #04140d; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #0a0a12; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 9px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--ink); }
.arrow::after { content: '→'; transition: transform .15s; display: inline-block; }
.btn:hover .arrow::after, a:hover > .arrow::after { transform: translateX(3px); }

/* ---------- top nav ---------- */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(6, 6, 7, 0.72); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { text-decoration: none; font-size: 14px; color: var(--muted); transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; gap: 10px; align-items: center; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 96px 0 40px; text-align: center; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%); opacity: .45; pointer-events: none; }
.hero::after { content: ''; position: absolute; left: 50%; top: -260px; width: 900px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(62, 230, 160, 0.16), transparent); pointer-events: none; }
.hero > .wrap { position: relative; z-index: 1; }
.tag { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); background: rgba(255,255,255,.02); }
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--win); box-shadow: 0 0 10px var(--win); }
.hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 8.2vw, 112px); line-height: 0.92; letter-spacing: -0.055em; margin: 28px auto 26px; max-width: 1050px; text-wrap: balance; }
.hero .lede { font-size: 19px; color: var(--ink-2); max-width: 600px; margin: 0 auto 36px; text-wrap: balance; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.hero-note { margin-top: 18px; font-size: 12px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }

/* live product frame under the hero */
.frame { position: relative; margin: 72px auto 0; max-width: 1080px; border-radius: 20px; background: linear-gradient(180deg, var(--surface-2), var(--bg-2)); box-shadow: var(--glow); padding: 10px; text-align: left; }
.frame::before { content: ''; position: absolute; inset: -1px; border-radius: 21px; padding: 1px; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.frame-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 14px; }
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); display: block; }
.frame-bar span { margin-left: 12px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.frame-body { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; }
.pane { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.pane h3 { font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.035em; line-height: 1.08; margin: 10px 0 6px; }

/* ---------- sections ---------- */
section { padding: 110px 0; position: relative; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2, h2.display { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 5vw, 64px); line-height: 0.98; letter-spacing: -0.05em; margin: 16px 0 18px; text-wrap: balance; }
.section-head p { color: var(--ink-2); font-size: 18px; margin: 0; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

.strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip div { padding: 30px 24px; text-align: center; }
.strip div + div { border-left: 1px solid var(--line); }
.strip b { display: block; font-family: var(--display); font-weight: 700; font-size: 40px; letter-spacing: -0.05em; line-height: 1; }
.strip span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; overflow: hidden; position: relative; min-width: 0; }
.tile h3 { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.035em; margin: 10px 0 8px; line-height: 1.1; }
.tile p { color: var(--muted); margin: 0; font-size: 15px; }
.tile .ui { margin-top: 24px; }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; }
.step .n { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .1em; }
.step h4 { margin: 18px 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

.tracks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.track { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.track h4 { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.05em; margin: 10px 0 6px; }
.track ul { margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-2); }
.track li { padding: 8px 0; border-top: 1px solid var(--line); }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; position: relative; }
.plan h3 { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.04em; margin: 0; }
.plan .tag-line, .plan .tag { color: var(--muted); font-size: 14px; margin: 4px 0 24px; border: 0; height: auto; padding: 0; letter-spacing: 0; text-transform: none; background: none; display: block; }
.price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 26px; }
.price .amt { font-family: var(--display); font-weight: 700; font-size: 60px; line-height: 1; letter-spacing: -0.06em; }
.price .per { color: var(--muted); font-size: 14px; }
.plan ul { list-style: none; margin: 0 0 32px; padding: 0; flex: 1; }
.plan li { padding: 10px 0 10px 28px; border-top: 1px solid var(--line); font-size: 14.5px; position: relative; color: var(--ink-2); }
.plan li::before { content: ''; position: absolute; left: 3px; top: 17px; width: 10px; height: 6px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
.plan.featured { background: linear-gradient(180deg, #17171d, var(--surface)); border-color: rgba(62, 230, 160, 0.35); box-shadow: 0 30px 80px -40px rgba(62, 230, 160, 0.35); }
.plan.dark { background: var(--surface); border-color: rgba(234, 244, 255, 0.35); box-shadow: inset 0 1px 0 rgba(234, 244, 255, .2); }
.plan.dark li::before { border-color: var(--gold); }
.plan-flag { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; font-weight: 500; }
.plan.dark .plan-flag { color: var(--gold); }
.plan.dark .btn.light { background: var(--gold); border-color: var(--gold); color: #04140d; }

/* founder */
.founder { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.founder-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.portrait { aspect-ratio: 1; max-width: 220px; border-radius: 16px; background: radial-gradient(circle at 30% 20%, #2a2a31, #0d0d10); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 72px; letter-spacing: -0.06em; color: #3a3a44; }
.handles { margin: 22px 0; display: grid; gap: 8px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.founder h3 { font-family: var(--display); font-weight: 700; font-size: 36px; letter-spacing: -0.045em; margin: 18px 0 2px; }
.founder-body p { font-size: 18px; color: var(--ink-2); margin: 0 0 18px; }
.draft-flag { display: inline-block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); background: var(--gold-soft); border: 1px solid rgba(234, 244, 255,.25); padding: 4px 9px; border-radius: 6px; margin-bottom: 18px; }

.quote { text-align: center; padding: 140px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #000; }
.quote blockquote { margin: 0 auto; max-width: 980px; font-family: var(--display); font-weight: 600; font-size: clamp(30px, 4.2vw, 54px); line-height: 1.08; letter-spacing: -0.045em; text-wrap: balance; }
.quote cite { display: block; margin-top: 28px; font-style: normal; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }

/* legacy blocks still referenced */
.verse { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.04em; margin: 18px 0; }
.verse-ref { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.sig { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.04em; margin-top: 8px; }
.band { background: #000; color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band .eyebrow { color: var(--muted); }
.band p { color: var(--ink-2); }

/* circle (club) */
.club { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.member-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; gap: 16px; align-items: center; }
.member-card .av { width: 52px; height: 52px; border-radius: 12px; background: var(--surface-3); display: grid; place-items: center; font-weight: 700; letter-spacing: -0.04em; color: var(--muted); flex: none; }
.lvl { font-family: var(--mono); font-size: 12px; color: var(--gold); border: 1px solid rgba(234, 244, 255,.3); border-radius: 6px; padding: 2px 8px; }

.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.proof-card { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 28px; color: var(--muted); min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; }
.proof-card .q { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.03em; line-height: 1.2; color: var(--ink); }

/* faq */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--line); padding: 22px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; font-size: 17px; font-weight: 500; display: flex; justify-content: space-between; gap: 16px; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; line-height: 1; color: var(--muted); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); margin: 12px 0 0; max-width: 700px; }

.cta-final { text-align: center; padding: 150px 0; overflow: hidden; }
.cta-final::before { content: ''; position: absolute; left: 50%; bottom: -300px; width: 1000px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(62, 230, 160, 0.14), transparent); pointer-events: none; }
.cta-final h2 { position: relative; font-family: var(--display); font-weight: 700; font-size: clamp(46px, 7vw, 96px); line-height: 0.94; letter-spacing: -0.055em; margin: 0 0 22px; text-wrap: balance; }
.cta-final .wrap { position: relative; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 44px 0; font-size: 13px; color: var(--muted); }
.foot .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.foot a { text-decoration: none; color: var(--muted); margin-left: 24px; }
.foot a:hover { color: var(--ink); }

/* ---------- small shared UI ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; border: 1px solid rgba(62, 230, 160,.18); white-space: nowrap; }
.chip.dark { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.chip.line { background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); }
.chip.win { background: var(--win-soft); color: var(--win); border-color: rgba(62, 230, 160,.2); }
.chip.gold { background: var(--gold-soft); color: var(--gold); border-color: rgba(234, 244, 255,.25); }
.bar { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--ink); border-radius: 99px; }
.bar.accent > span { background: linear-gradient(90deg, #8f97ff, var(--accent)); box-shadow: 0 0 12px rgba(62, 230, 160,.5); }
.check-list { list-style: none; margin: 18px 0 0; padding: 0; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.tick { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); margin-top: 2px; display: grid; place-items: center; background: transparent; }
.tick.on { background: var(--accent); border-color: var(--accent); }
.tick.on::after { content: ''; width: 8px; height: 5px; border-left: 1.8px solid #0a0a12; border-bottom: 1.8px solid #0a0a12; transform: rotate(-45deg) translate(1px, -1px); }
.done-text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }

/* ---------- forms ---------- */
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; color: var(--ink-2); }
.input, select.input, textarea.input {
  width: 100%; height: 50px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: var(--bg-2); font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; color: var(--ink);
}
textarea.input { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.input::placeholder { color: #5d5d67; }
.input:focus { border-color: rgba(62, 230, 160,.6); box-shadow: 0 0 0 4px rgba(62, 230, 160, 0.1); }
.input:disabled { opacity: .6; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.check input { margin-top: 4px; accent-color: var(--accent); }
.alert { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 18px; border: 1px solid var(--line); background: var(--surface); }
.alert.error { border-color: rgba(240,155,138,.3); background: rgba(240,155,138,.08); color: var(--danger); }
.alert.win { border-color: rgba(62, 230, 160,.25); background: var(--win-soft); color: var(--win); }
.alert.info { border-color: rgba(62, 230, 160,.22); background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- auth / bare pages ---------- */
.bare { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(800px 400px at 50% -100px, rgba(62, 230, 160,.1), transparent), var(--bg); }
.bare-top { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; }
.auth-card { width: 100%; max-width: 420px; margin: 6vh auto; padding: 0 24px; }
.auth-card h1 { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.05em; margin: 0 0 10px; }

/* ---------- onboarding stepper ---------- */
.ob { flex: 1; display: flex; flex-direction: column; }
.ob-progress { height: 2px; background: var(--line); }
.ob-progress span { display: block; height: 100%; background: linear-gradient(90deg, #8f97ff, var(--accent)); box-shadow: 0 0 12px rgba(62, 230, 160,.6); width: 0; transition: width .35s ease; }
.ob-stage { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 7vh 24px 48px; }
.ob-card { width: 100%; max-width: 640px; }
.ob-section { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.ob-count { color: var(--muted); }
.ob-q { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 4.6vw, 48px); line-height: 1.02; letter-spacing: -0.045em; margin: 16px 0 10px; text-wrap: balance; }
.ob-hint { color: var(--muted); font-size: 15px; margin: 0 0 28px; }
.opts { display: grid; gap: 10px; }
.opt {
  text-align: left; width: 100%; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--surface); cursor: pointer; display: flex; gap: 14px; align-items: center; transition: border-color .12s, background .12s;
}
.opt:hover { border-color: rgba(255,255,255,.3); background: var(--surface-2); }
.opt .key { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 12px; display: grid; place-items: center; color: var(--muted); }
.opt .lbl { font-weight: 500; letter-spacing: -0.01em; }
.opt .sub { display: block; font-size: 14px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.opt.on { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.opt.on .key { border-color: rgba(0,0,0,.2); color: var(--primary-ink); }
.opt.on .sub { color: #4a4b55; }
.ob-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; gap: 12px; }
.ob-back { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 8px 0; font-size: 15px; }
.ob-back:hover { color: var(--ink); }
.ob-intro h1 { font-family: var(--display); font-weight: 700; font-size: clamp(46px, 7vw, 76px); line-height: .95; letter-spacing: -0.055em; margin: 18px 0 18px; }
.ob-intro p { font-size: 19px; color: var(--ink-2); margin: 0 0 32px; }
.ob-promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 36px; }
.ob-promise div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; font-size: 13.5px; color: var(--muted); }
.ob-promise b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.fade-in { animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- member app shell ---------- */
.shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.side { border-right: 1px solid var(--line); padding: 24px 16px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--bg-2); }
.side .mark { padding: 0 10px 28px; }
.side nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px; text-decoration: none; font-size: 14.5px; color: var(--muted); margin-bottom: 2px; transition: color .12s, background .12s; }
.side nav a:hover { background: var(--surface); color: var(--ink); }
.side nav a.on { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.side nav svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.side .lock { margin-left: auto; font-size: 10px; color: var(--gold); letter-spacing: .12em; text-transform: uppercase; }
.side-foot { margin-top: auto; padding: 16px 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.side-foot .who { font-weight: 500; }
.main { padding: 36px 48px 80px; max-width: 1200px; width: 100%; min-width: 0; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.page-head h1 { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.05em; margin: 10px 0 0; }
.mobile-top { display: none; }

.grid { display: grid; gap: 14px; }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-main { grid-template-columns: 1.65fr 1fr; align-items: start; }
.grid > * { min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card.pad-lg { padding: 30px; }
.card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.card.dark { background: var(--surface); border-color: rgba(234, 244, 255,.3); box-shadow: inset 0 1px 0 rgba(234, 244, 255, .16); }
.card.dark .muted { color: var(--on-dark-2); }
.card-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.stat .v { font-family: var(--display); font-weight: 700; font-size: 42px; line-height: 1; letter-spacing: -0.055em; margin: 12px 0 6px; }
.stat .l { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.next-card { background: radial-gradient(120% 120% at 0% 0%, rgba(62, 230, 160,.16), transparent 55%), var(--surface); border: 1px solid rgba(62, 230, 160,.25); border-radius: 20px; padding: 32px; position: relative; overflow: hidden; }
.next-card::after { content: '127'; position: absolute; right: -6px; bottom: -48px; font-family: var(--display); font-weight: 800; font-size: 190px; letter-spacing: -0.07em; line-height: 1; color: rgba(255,255,255,0.03); pointer-events: none; }
.next-card h2 { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1.04; letter-spacing: -0.045em; margin: 14px 0 10px; max-width: 560px; }
.next-card p { color: var(--ink-2); margin: 0 0 24px; max-width: 520px; }
.next-card .eyebrow { color: var(--accent); }
.next-card .btn.ghost { background: transparent; }

.week { border-top: 1px solid var(--line); padding: 22px 0 6px; }
.week:first-child { border-top: 0; padding-top: 0; }
.week-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.week-head h4 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.03em; }
.task { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.task:first-of-type { border-top: 0; }
.task form { margin: 0; }
.task .tick { cursor: pointer; padding: 0; }
.task .tick:hover { border-color: var(--accent); }
.task .t-title { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
.task .t-detail { color: var(--muted); font-size: 14px; margin-top: 2px; }
.task .t-meta { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.task .xp { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; padding-top: 3px; }
.locked-week { position: relative; }
.locked-week .task { filter: blur(3px); opacity: .45; pointer-events: none; user-select: none; }
.unlock { position: absolute; inset: 40px 0 0; display: grid; place-items: center; z-index: 2; }
.unlock .card { text-align: center; max-width: 360px; box-shadow: 0 30px 80px -20px #000; background: var(--surface-2); }

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.badge { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.badge.on { border-color: rgba(62, 230, 160,.4); color: var(--accent-ink); background: var(--accent-soft); }

.res-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.res { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-decoration: none; display: flex; flex-direction: column; transition: border-color .15s, transform .15s, background .15s; min-height: 210px; min-width: 0; }
.res:hover { border-color: rgba(255,255,255,.22); background: var(--surface-2); transform: translateY(-2px); }
.res .meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; gap: 8px; }
.res h4 { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.1; letter-spacing: -0.035em; margin: 16px 0 8px; }
.res p { color: var(--muted); font-size: 14px; margin: 0 0 16px; flex: 1; }
.res .foot-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); font-family: var(--mono); }
.res.locked h4, .res.locked p { opacity: .5; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.tabs a { text-decoration: none; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; color: var(--muted); }
.tabs a:hover { color: var(--ink); }
.tabs a.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }

.doc { max-width: 740px; }
.doc h1 { font-family: var(--display); font-weight: 700; font-size: 52px; line-height: .98; letter-spacing: -0.055em; margin: 14px 0 16px; }
.doc .lede { font-size: 19px; color: var(--ink-2); }
.doc h3 { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.035em; margin: 40px 0 10px; }
.doc ol { padding-left: 0; list-style: none; counter-reset: s; }
.doc ol li { counter-increment: s; padding: 12px 0 12px 44px; border-top: 1px solid var(--line); position: relative; color: var(--ink-2); }
.doc ol li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 13px; font-family: var(--mono); font-size: 13px; color: var(--accent); }
.doc p { color: var(--ink-2); font-size: 17px; }
/* Legal pages built from Markdown (views/partials/membership-terms.ejs) */
.legal-md h2 { font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.04em; margin: 48px 0 12px; scroll-margin-top: 90px; }
.legal-md h3 { font-size: 20px; margin: 28px 0 8px; scroll-margin-top: 90px; }
.legal-md .table-wrap { overflow-x: auto; margin: 0 0 16px; }
.legal-md table.t td:first-child { color: var(--ink); white-space: nowrap; }
.output-box { margin-top: 40px; padding: 22px 24px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid rgba(62, 230, 160,.2); color: var(--accent-ink); }
.paywall { margin-top: 32px; padding: 32px; border-radius: 20px; background: radial-gradient(120% 100% at 0% 0%, rgba(62, 230, 160,.16), transparent 60%), var(--surface); border: 1px solid rgba(62, 230, 160,.25); }
.paywall h3 { font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: -0.04em; margin: 0 0 8px; color: var(--ink); }
.paywall p { color: var(--ink-2); margin: 0 0 20px; }

.tool-out { white-space: pre-wrap; font-size: 15px; line-height: 1.65; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; font-family: var(--sans); color: var(--ink-2); }
.ai-label { font-size: 12px; color: var(--muted); margin-top: 10px; }

.win-item { padding: 16px 0; border-top: 1px solid var(--line); display: flex; gap: 14px; }
.win-item:first-child { border-top: 0; }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-3); color: var(--ink-2); display: grid; place-items: center; font-weight: 600; font-size: 15px; }

table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-weight: 500; color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.t td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); margin-right: 8px; }
.dot.on { background: var(--win); box-shadow: 0 0 8px var(--win); }
.hbar { display: grid; grid-template-columns: 1fr 120px 28px; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.hbar .bar { height: 6px; }
.scroll-x { overflow-x: auto; }
.banner { background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; text-align: center; padding: 8px 16px; border-bottom: 1px solid rgba(62, 230, 160,.15); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .frame-body, .founder { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .span-2, .span-3, .span-4 { grid-column: span 2; }
  .tracks, .strip { grid-template-columns: repeat(2, 1fr); }
  .strip div:nth-child(3) { border-left: 0; }
  .strip div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .plans, .proof, .club { grid-template-columns: 1fr; }
  .g-main { grid-template-columns: 1fr; }
  .g-3, .g-4, .res-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .nav-links { display: none; }
  .nav .wrap { height: 60px; }
  .hero { padding: 64px 0 24px; }
  .hero .lede { font-size: 17px; }
  .frame { margin-top: 48px; padding: 6px; }
  .pane { padding: 20px; }
  section { padding: 72px 0; }
  .bento, .steps, .tracks, .g-3, .g-2, .res-list, .ob-promise { grid-template-columns: 1fr; }
  .span-2, .span-3, .span-4 { grid-column: span 1; }
  .g-4 { grid-template-columns: 1fr 1fr; }
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .side.open { display: flex; position: fixed; inset: 0; z-index: 50; height: 100vh; width: 100%; }
  .mobile-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 10; }
  .main { padding: 24px 16px 64px; }
  .page-head h1 { font-size: 34px; }
  .next-card { padding: 24px; }
  .next-card h2 { font-size: 27px; }
  .foot a { margin: 0 16px 0 0; }
  .hide-sm { display: none; }
  .hbar { grid-template-columns: 1fr 80px 24px; }
  .quote { padding: 96px 0; }
  .cta-final { padding: 110px 0; }
}

/* tighter headings everywhere (some views set sizes inline) */
h1, h2, h3, h4 { line-height: 1.1; }
.task > div { min-width: 0; flex: 1; }
.task .xp { flex: none; }
@media (max-width: 760px) {
  .hero .tag { font-size: 10px; letter-spacing: .16em; }
  .frame-body > .pane + .pane { display: none; }
  .hero-note { letter-spacing: .1em; }
}
.tracks.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .tracks.three { grid-template-columns: 1fr; } }

/* ---------- library: rich content ---------- */
.doc ul.bul { list-style: none; padding: 0; margin: 0 0 8px; }
.doc ul.bul li { padding: 10px 0 10px 22px; border-top: 1px solid var(--line); position: relative; color: var(--ink-2); }
.doc ul.bul li::before { content: ''; position: absolute; left: 4px; top: 20px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .7; }
.example { margin: 18px 0; padding: 18px 20px; border-left: 2px solid var(--accent); background: var(--surface); border-radius: 0 12px 12px 0; }
.example p { margin: 6px 0 0; font-size: 15.5px; white-space: pre-line; }
.tpl { margin: 18px 0; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: var(--bg-2); }
.tpl-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.tpl pre { margin: 0; padding: 18px; font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ws { margin-top: 40px; }
.ws .field > span { color: var(--ink); font-size: 14px; }
.calc { margin: 6px 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.calc-res { margin-top: 6px; }
.calc-out { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.calc-out b { font-family: var(--mono); font-weight: 500; color: var(--ink); text-align: right; }
.calc .t td, .calc .t th { padding: 6px; }
.calc .t .input { height: 40px; padding: 0 10px; font-size: 14px; }
.idea-grid td:first-child { min-width: 170px; }
.idea-grid select.input { width: 58px; padding: 0 6px; }
.idea-grid .tot { font-size: 15px; color: var(--ink); text-align: center; }
.idea-grid .tot.win { color: var(--win); }
.calc-legend { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); columns: 2; }
.calc-legend div { padding: 2px 0; break-inside: avoid; }
.calc-legend b { font-family: var(--mono); font-weight: 500; color: var(--accent); margin-right: 6px; }
.kpi td:first-child { color: var(--ink); min-width: 150px; }
.kpi .up { color: var(--win); } .kpi .down { color: var(--danger); }
.kpi .grp td { padding-top: 14px; color: var(--muted); }
.calc [data-newweek] { margin-top: 4px; }
.calc-out.dim, .calc-out.dim b { color: var(--muted); }
.calc-legend li { padding: 2px 0 4px; break-inside: avoid; }
.calc-legend li strong { display: block; font-weight: 500; color: var(--ink-2); }
.hist { display: grid; }
.hist a { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; font-size: 14px; color: var(--ink-2); }
.hist a:hover { color: var(--ink); }

/* ---------- Eli's Playbook chat ---------- */
.chat-wrap { max-width: 820px; }
.chat { display: grid; gap: 18px; margin-bottom: 18px; }
.chat-empty { padding: 8px 0 4px; }
.starters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.starters form { margin: 0; }
.starter { width: 100%; text-align: left; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font-size: 14.5px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.starter:hover { color: var(--ink); border-color: rgba(255,255,255,.3); }
.msg { display: flex; flex-direction: column; scroll-margin-top: 90px; }
.msg.user { align-items: flex-end; }
.msg .who { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.msg .bubble { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.65; }
.msg.user .bubble { background: var(--primary); color: var(--primary-ink); padding: 12px 16px; border-radius: 16px 16px 4px 16px; max-width: 80%; }
.msg.assistant .bubble { background: var(--surface); border: 1px solid var(--line); padding: 18px 20px; border-radius: 4px 16px 16px 16px; color: var(--ink-2); }
.composer { position: sticky; bottom: 12px; display: flex; gap: 10px; align-items: flex-end; padding: 10px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(14,14,17,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.composer textarea.input { min-height: 52px; height: 52px; border: 0; background: transparent; resize: none; box-shadow: none; padding: 14px 10px; }
.composer textarea.input:focus { box-shadow: none; }

/* ---------- progress map ---------- */
.pmap { list-style: none; margin: 4px 0 0; padding: 0; position: relative; }
.pmap li { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; position: relative; }
.pmap li::before { content: ''; position: absolute; left: 9px; top: 26px; bottom: -8px; width: 1px; background: var(--line-2); }
.pmap li:last-child::before { display: none; }
.pmap form { margin: 0; }
.pm-dot { flex: none; display: block; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--bg); padding: 0; cursor: pointer; position: relative; z-index: 1; margin-top: 1px; }
button.pm-dot:hover { border-color: var(--accent); }
.pmap li.on .pm-dot { background: var(--accent); border-color: var(--accent); }
.pmap li.on .pm-dot::after { content: ''; position: absolute; left: 5px; top: 5px; width: 6px; height: 3.5px; border-left: 1.6px solid #0a0a12; border-bottom: 1.6px solid #0a0a12; transform: rotate(-45deg); }
.pmap li.next .pm-dot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.pm-label { font-size: 14px; color: var(--ink-2); }
.pmap li.on .pm-label { color: var(--muted); }
.pmap li.next .pm-label { color: var(--ink); font-weight: 500; }

/* long unbroken text never breaks layouts */
.main, .side-foot, .card, .bubble, .tool-out { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .calc-grid, .starters { grid-template-columns: 1fr; }
  .calc-legend { columns: 1; }
  .msg.user .bubble { max-width: 92%; }
}

/* QA fixes */
.btn.is-current{opacity:.55;cursor:default;pointer-events:none}
.verify-bar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.verify-bar span{flex:1;min-width:220px}

.ob-preview{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.ob-preview ol{margin:12px 0 0;padding:0;list-style:none;counter-reset:w}
.ob-preview li{counter-increment:w;display:grid;grid-template-columns:28px 1fr;column-gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.ob-preview li:first-child{border-top:0}
.ob-preview li::before{content:counter(w);grid-row:span 2;width:24px;height:24px;border-radius:7px;border:1px solid var(--line-2);font-family:var(--mono);font-size:12px;display:grid;place-items:center;color:var(--muted)}
.ob-preview li b{font-weight:600;letter-spacing:-.01em}
.ob-preview li span{color:var(--muted);font-size:14px;margin-top:2px}
.ob-more{margin-top:10px;font-size:13px;color:var(--accent);font-family:var(--mono);letter-spacing:.02em}

/* logo, phone menu */
.mark .logo{height:24px;width:auto;display:block}
.foot .mark .logo{height:22px}
.mobile-top .logo{height:22px}
/* The top-left 127 turns like the Circle stone: it rests on its face, then makes one quick eased turn every 7 s, so the
   edge-on frames only flash past. A 30-frame sprite (front first), stepped, no JS. Reduced motion stops it on the face. */
.logo.logo-spin{display:block;width:auto;aspect-ratio:506/281;background:url(/img/127-emerald-spin.webp) 0 0/3000% 100% no-repeat;background-image:image-set(url(/img/127-emerald-spin.webp) 2x,url(/img/127-emerald-spin@3x.webp) 3x);animation:logo-spin 7s steps(1,end) infinite}
.mark .logo.logo-spin{height:26px}
.mobile-top .logo.logo-spin,.ws-mark .logo.logo-spin{height:24px}
@keyframes logo-spin{0%,82.14%{background-position:0 0}82.74%{background-position:3.448% 0}83.33%{background-position:6.897% 0}83.93%{background-position:10.345% 0}84.52%{background-position:13.793% 0}85.12%{background-position:17.241% 0}85.71%{background-position:20.690% 0}86.31%{background-position:24.138% 0}86.90%{background-position:27.586% 0}87.50%{background-position:31.034% 0}88.09%{background-position:34.483% 0}88.69%{background-position:37.931% 0}89.28%{background-position:41.379% 0}89.88%{background-position:44.828% 0}90.47%{background-position:48.276% 0}91.07%{background-position:51.724% 0}91.67%{background-position:55.172% 0}92.26%{background-position:58.621% 0}92.86%{background-position:62.069% 0}93.45%{background-position:65.517% 0}94.05%{background-position:68.966% 0}94.64%{background-position:72.414% 0}95.24%{background-position:75.862% 0}95.83%{background-position:79.310% 0}96.43%{background-position:82.759% 0}97.02%{background-position:86.207% 0}97.62%{background-position:89.655% 0}98.21%{background-position:93.103% 0}98.81%{background-position:96.552% 0}99.40%{background-position:100.000% 0}}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;width:40px;height:36px;border:1px solid var(--line-2);border-radius:999px;display:grid;place-content:center;gap:5px}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary span{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .2s}
.mnav[open] summary span:first-child{transform:translateY(3.25px) rotate(45deg)}
.mnav[open] summary span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.mnav-panel{position:fixed;left:0;right:0;top:60px;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 16px 20px;display:grid;z-index:60}
.mnav-panel a{padding:14px 2px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:17px;letter-spacing:-.01em}
.mnav-panel a:last-child{border-bottom:0}
@media (max-width:760px){.mnav{display:block}.nav-cta{gap:8px}}

/* founding members */
.wrap.narrow{max-width:760px}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin:-8px 0 8px}
.founding-hero{padding-bottom:72px}
.wl-form{max-width:640px;margin:0 auto;text-align:left;display:grid;gap:14px}
.wl-row{display:grid;grid-template-columns:1fr 1.4fr auto;gap:10px}
.wl-row .input{margin:0}
.countdown{display:inline-grid;grid-template-columns:repeat(4,minmax(64px,1fr));gap:8px;margin-top:36px}
.countdown div{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px 10px;text-align:center}
.countdown b{display:block;font-family:var(--mono);font-weight:500;font-size:30px;letter-spacing:-.04em;line-height:1}
.countdown span{display:block;margin-top:6px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.proof-card.solid{border-style:solid;background:var(--surface);gap:28px}
.proof-card.solid p{margin:8px 0 0;color:var(--ink-2);font-size:15px}
.founder-line{font-family:var(--display);font-weight:600;font-size:clamp(22px,3vw,30px);line-height:1.2;letter-spacing:-.035em;margin:14px 0 12px;text-wrap:balance}
.share-card{text-align:left;margin-top:36px}
.share-link{display:flex;gap:10px;align-items:center;margin:12px 0 16px;border:1px solid var(--line-2);border-radius:12px;padding:8px 8px 8px 14px}
.share-link code{flex:1;font-family:var(--mono);font-size:16px;overflow-wrap:anywhere}
.share-row{display:flex;flex-wrap:wrap;gap:8px}
.ref-progress{display:flex;gap:14px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.ref-progress b{color:var(--ink);font-weight:600}
.ref-progress .dots{display:flex;gap:6px}
.ref-progress .dots span{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-2)}
.ref-progress .dots span.on{background:var(--accent);border-color:var(--accent)}
.founding-note{font-size:13px;color:var(--accent-ink);margin:-6px 0 14px}
.outcomes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.outcome{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:24px}
.outcome .tiny{color:var(--accent);letter-spacing:.14em}
.outcome h3{font-family:var(--display);font-size:22px;letter-spacing:-.03em;margin:12px 0 8px}
.outcome p{margin:0;color:var(--ink-2);font-size:15px}
@media (max-width:1000px){.outcomes{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.outcomes{grid-template-columns:1fr}.wl-row{grid-template-columns:1fr}.countdown{grid-template-columns:repeat(4,1fr);width:100%}.countdown b{font-size:24px}}

.hero-alt{display:inline-block;margin:28px auto 0;font-size:15px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.hero-alt b{color:var(--ink);font-weight:500}
.hero-alt:hover{color:var(--ink)}
.mnav:not([open]) .mnav-panel{display:none}

/* founder photo */
.founder-photo{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;background:var(--surface-2)}
.founder-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.founder-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,7,0) 55%,rgba(6,6,7,.55))}
.founder-card .founder-photo{margin-bottom:4px}
.founding-founder{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:center;max-width:960px}
@media (max-width:760px){.founding-founder{grid-template-columns:1fr;gap:24px}.founding-founder .founder-photo{max-width:260px}}

/* ---------- v3: fewer template tells (2026-10-16) ----------
   One gradient headline (the hero). Section labels and numbered card grids removed.
   Real photos and real product screenshots instead of mock UI. */
@font-face{font-family:'Signature';src:url('/fonts/signature.woff2') format('woff2');font-display:swap}
h2.grad, h2 .grad, .section-head h2 .grad{background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
.section-head > .eyebrow{display:none}
.section-head h2{margin-top:0}

.h2{font-family:var(--display);font-weight:700;font-size:clamp(34px,4.4vw,56px);line-height:1;letter-spacing:-.045em;margin:0 0 20px;text-wrap:balance}
.sub{color:var(--ink-2);font-size:18px;margin:0 0 40px;max-width:620px}

.hero2{padding:72px 0 56px}
.hero2-grid{display:grid;grid-template-columns:1.1fr .9fr;grid-template-areas:"copy photo" "ask photo";column-gap:64px;align-items:start}
.hero2-copy{grid-area:copy}
.hero2-photo{grid-area:photo;margin:0;position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;background:var(--surface-2)}
.hero2-photo img{width:100%;height:100%;object-fit:cover}
.hero2-photo figcaption{position:absolute;left:16px;bottom:14px;font-size:13px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero2-ask{grid-area:ask}
.hero2 h1{font-family:var(--display);font-weight:700;font-size:clamp(44px,6.4vw,92px);line-height:.94;letter-spacing:-.055em;margin:8px 0 24px;text-wrap:balance}
.hero2 .lede{font-size:19px;color:var(--ink-2);max-width:560px;margin:0 0 36px}
.ask-q{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.03em;margin:0 0 4px}
.ask-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:600px}
.ask-opts a{display:block;text-decoration:none;border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;transition:border-color .15s,background .15s}
.ask-opts a:hover{border-color:rgba(255,255,255,.35);background:var(--surface)}
.ask-opts b{display:block;font-weight:600;font-size:15px;letter-spacing:-.01em}
.ask-opts span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.ask-opts a:last-child:nth-child(odd){grid-column:span 2}
.hero2-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hero2 .hero-alt{margin-top:22px}

.proof-line{display:flex;flex-wrap:wrap;gap:8px 0;margin:0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.proof-line span:not(:last-child)::after{content:'·';margin:0 14px;color:var(--muted)}

.rows{display:grid;gap:96px;margin-top:56px}
.row{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.row.flip .row-copy{order:2}
.row-copy h3{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.8vw,34px);line-height:1.08;letter-spacing:-.04em;margin:0 0 14px;text-wrap:balance}
.row-copy p{color:var(--ink-2);font-size:17px;margin:0 0 12px}
.shot{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);background:var(--surface);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.shot img{width:100%;height:auto}

.bleed{margin:0;position:relative}
.bleed img{width:100%;height:min(72vh,760px);object-fit:cover;object-position:50% 40%}
.bleed::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,7,.25),rgba(6,6,7,0) 30%,rgba(6,6,7,0) 55%,rgba(6,6,7,.85))}
.bleed figcaption{position:absolute;left:0;right:0;bottom:36px;z-index:1;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.03em;line-height:1.2;color:#fff;max-width:var(--max)}

.story{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.story-photo{position:sticky;top:96px}
.story-body p{font-size:18px;color:var(--ink-2);margin:0 0 18px;max-width:640px}
.signature{font-family:'Signature',cursive;font-size:64px;line-height:1;color:var(--ink);margin:18px 0 4px;letter-spacing:0}
.moments{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-top:72px}
.moments figure{margin:0}
.moments img{width:100%;height:420px;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.moments figcaption{font-size:13px;color:var(--muted);margin-top:10px}

.verse-block{position:relative;text-align:center;padding:160px 0;background:#000 center/cover no-repeat;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.verse-block::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.72)}
.verse-block .wrap{position:relative}
.verse-block blockquote{margin:0 auto;max-width:960px;font-family:var(--display);font-weight:600;font-size:clamp(30px,4.2vw,54px);line-height:1.08;letter-spacing:-.045em;text-wrap:balance}
.verse-block cite{display:block;margin-top:24px;font-style:normal;font-size:15px;color:var(--ink-2)}
.verse-block p{max-width:620px;margin:32px auto 0;color:var(--ink-2);font-size:17px}

.principles{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;margin:0}
.principles div{border-top:1px solid var(--line);padding:22px 0}
.principles dt{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.03em;line-height:1.2}
.principles dd{margin:6px 0 0;color:var(--muted);font-size:16px}

.cta-photo{text-align:center;padding:180px 0;background:#000 70% 50%/cover no-repeat}
.cta-photo::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,7,1),rgba(6,6,7,.55) 35%,rgba(6,6,7,.55) 65%,rgba(6,6,7,1))}
.cta-photo .wrap{position:relative}
.cta-photo h2{font-family:var(--display);font-weight:700;font-size:clamp(46px,7vw,96px);line-height:.94;letter-spacing:-.055em;margin:0 0 20px}
.cta-photo p{color:var(--ink-2);font-size:18px;margin:0 0 36px}

@media (max-width:1000px){
  .hero2-grid{grid-template-columns:1fr;grid-template-areas:"copy" "photo" "ask"}
  .hero2-photo{aspect-ratio:1/1;margin:0 0 32px;max-width:560px}
  .row,.story{grid-template-columns:1fr;gap:28px}
  .row.flip .row-copy{order:0}
  .story-photo{position:static;max-width:420px}
}
@media (max-width:760px){
  .hero2{padding:40px 0 40px}
  .hero2 .lede{font-size:17px}
  .ask-opts{grid-template-columns:1fr}
  .ask-opts a:last-child:nth-child(odd){grid-column:auto}
  .rows{gap:64px;margin-top:36px}
  .bleed img{height:56vh}
  .bleed figcaption{bottom:20px}
  .moments{grid-template-columns:1fr;margin-top:48px}
  .moments img{height:300px}
  .principles{grid-template-columns:1fr}
  .verse-block{padding:110px 0}
  .cta-photo{padding:120px 0}
  .proof-line{font-size:13px}
}
.idea-grid th{white-space:nowrap}
.section-head h1{font-family:var(--display);font-weight:700;letter-spacing:-.05em;line-height:.98;margin:0 0 18px;text-wrap:balance}
.hero.plain::before,.hero.plain::after{display:none}
.benefits{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.benefits{grid-template-columns:1fr}}

/* ================= v4 homepage: hook, motion, 3D (2026-10-16) ================= */
.btn.big{height:54px;padding:0 26px;font-size:16px;border-radius:12px}
.v4 section{padding:120px 0}

/* hero */
.hx{position:relative;min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);display:flex;flex-direction:column;justify-content:center;padding:64px 0 0 !important;overflow:hidden;isolation:isolate}
.hx-wall{position:absolute;top:0;bottom:0;right:-2%;width:60%;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;transform:rotate(-6deg) scale(1.15);transform-origin:center;z-index:-2;opacity:.42}
.hx-wall::after{content:'';position:absolute;inset:-20%;background:linear-gradient(90deg,var(--bg) 0%,rgba(6,6,7,.55) 30%,rgba(6,6,7,.2) 60%,rgba(6,6,7,.55) 100%),linear-gradient(180deg,var(--bg) 0%,transparent 18%,transparent 75%,var(--bg) 100%);pointer-events:none}
.hx-col{overflow:hidden;position:relative}
.hx-track{display:flex;flex-direction:column;gap:14px;animation:wallUp 60s linear infinite}
.hx-col.c1 .hx-track{animation-direction:reverse;animation-duration:70s}
.hx-col.c2 .hx-track{animation-duration:52s}
.hx-track img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;filter:grayscale(1) contrast(1.05)}
@keyframes wallUp{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 7px))}}
#hero3d{position:absolute;right:-1%;top:44%;width:min(44vw,680px);height:min(32vw,460px);transform:translateY(-50%);z-index:-1;opacity:0;transition:opacity 1.2s ease}
.hx::before{content:'';position:absolute;right:2%;top:44%;width:min(50vw,760px);height:min(40vw,560px);transform:translateY(-50%);background:radial-gradient(closest-side,rgba(6,6,7,.92),rgba(6,6,7,.6) 55%,transparent);z-index:-1;pointer-events:none}
#hero3d.on{opacity:1}
.hx-copy{position:relative;width:100%}
.kin{font-family:var(--display);font-weight:800;font-size:clamp(64px,9.4vw,150px);line-height:.86;letter-spacing:-.065em;margin:0 0 30px;max-width:760px}
.kin > span > span{display:inline-block;animation:kinIn .9s cubic-bezier(.2,.8,.2,1) both}
.kin .dim{color:#5d5e68}
.kin > span:last-child{background:linear-gradient(180deg,#fff 20%,#a9aab5);-webkit-background-clip:text;background-clip:text;color:transparent}
.kin > span:last-child > span{background:inherit;-webkit-background-clip:text;background-clip:text}
.kin span:nth-child(1) > span:nth-child(1){animation-delay:.05s}
.kin span:nth-child(1) > span:nth-child(2){animation-delay:.15s}
.kin > span:last-child > span:nth-child(1){animation-delay:.32s}
.kin > span:last-child > span:nth-child(2){animation-delay:.44s}
@keyframes kinIn{from{opacity:0;transform:translateY(40%) rotate(4deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.hx-value{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--ink-2);max-width:560px;margin:0 0 34px;animation:fadeUp .9s .6s both}
.hx-value b{color:var(--ink);font-weight:600}
.hx-ctas{display:flex;gap:12px;flex-wrap:wrap;animation:fadeUp .9s .75s both}
.hx-note{margin-top:18px;font-size:13px;color:var(--muted);animation:fadeUp .9s .85s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ticker{margin-top:auto;padding:22px 0;border-top:1px solid var(--line);overflow:hidden;background:rgba(6,6,7,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-top:72px}
.ticker-track{display:flex;width:max-content;animation:tick 48s linear infinite}
.ticker span{font-size:14px;color:var(--ink-2);white-space:nowrap;padding:0 28px;position:relative}
.ticker span::after{content:'';position:absolute;right:-3px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--muted);transform:translateY(-50%)}
.ticker-note{margin:14px auto 0;padding:0 16px;max-width:1100px;font-size:13px;line-height:1.45;color:var(--ink-2);text-align:center}
.ticker-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@keyframes tick{to{transform:translateX(-50%)}}

/* the hook */
.pain{padding:160px 0 !important}
.lit{font-family:var(--display);font-weight:700;font-size:clamp(34px,5.2vw,76px);line-height:1.02;letter-spacing:-.05em;margin:0 0 .5em;max-width:1100px;color:#66666e;transition:color .2s linear;text-wrap:balance}
.lit.punch{margin-top:1.2em}
.lit.punch span{color:var(--accent)}
/* lines not lit yet wait in a dim color that still reads (3.5:1), never at low opacity */
html:not(.js) .lit{color:var(--ink)}

/* sticky product story */
.story-wrap{padding-top:40px !important}
.story-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
.story-intro{padding-bottom:40px}
.story-step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .4s}
.story-step.on{opacity:1}
.story-step .num{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.08em}
.story-step h3{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,46px);line-height:1.02;letter-spacing:-.045em;margin:12px 0 14px}
.story-step p{font-size:18px;color:var(--ink-2);margin:0;max-width:440px}
.story-inline{display:none}
.story-stage{position:sticky;top:calc(50vh - 260px);height:520px;display:flex;align-items:center;justify-content:center}
.device{position:relative;width:100%;aspect-ratio:16/10.5;border-radius:18px;background:#0b0b0e;border:1px solid var(--line-2);box-shadow:0 0 0 8px #111116,0 0 0 9px rgba(255,255,255,.08),0 60px 120px -40px rgba(0,0,0,.95),0 30px 80px -30px rgba(62, 230, 160,.25);overflow:hidden;transform:perspective(1600px) rotateX(14deg) rotateY(-16deg) rotateZ(2deg);transition:transform .15s linear;will-change:transform}
.story-screen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transform:scale(1.03);transition:opacity .5s ease,transform .7s ease}
.story-screen.on{opacity:1;transform:none}
.device-glow{position:absolute;inset:auto 10% -40px;height:120px;background:radial-gradient(closest-side,rgba(62, 230, 160,.22),transparent);filter:blur(20px);z-index:-1}

/* reel */
.reel{position:relative;padding:40px 0 !important;overflow:hidden}
.reel-row{overflow:hidden;margin:14px 0}
.reel-track{display:flex;gap:14px;width:max-content;animation:tick 80s linear infinite}
.reel-row.r2 .reel-track{animation-direction:reverse;animation-duration:90s}
.reel-track img{height:300px;width:240px;object-fit:cover;border-radius:14px;filter:grayscale(1)}
.reel-copy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(6,6,7,.92),rgba(6,6,7,.55) 60%,rgba(6,6,7,.15))}
.reel-copy h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,72px);line-height:1;letter-spacing:-.055em;margin:0;text-wrap:balance}
.reel-copy h2 span{color:#7d7e8a}

/* video */
.video-frame{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line-2);aspect-ratio:16/9;background:#000;margin-top:32px}
.video-frame video{width:100%;height:100%;object-fit:cover}
.video-play{position:absolute;inset:0;margin:auto;width:96px;height:96px;border-radius:50%;border:0;background:rgba(227,230,241,.92);cursor:pointer;display:grid;place-items:center;transition:transform .2s}
.video-play:hover{transform:scale(1.06)}
.video-play span{width:0;height:0;border-left:26px solid #0a0a0c;border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:6px}

/* founder + collage */
.fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.collage{position:relative;height:620px}
.cc{position:absolute;margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 40px 80px -30px rgba(0,0,0,.9);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(var(--r,0deg));transition:transform .25s ease;background:#111}
.cc img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.cc figcaption{position:absolute;left:12px;bottom:10px;font-size:12px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.cc.c1{left:14%;top:0;width:58%;height:78%;--r:-2deg;z-index:2}
.cc.c2{left:-2%;bottom:4%;width:52%;height:34%;--r:3deg;z-index:3}
.cc.c3{right:-2%;top:8%;width:34%;height:38%;--r:5deg;z-index:1}
.cc.c4{right:2%;bottom:0;width:36%;height:42%;--r:-4deg;z-index:4}
.fx-body p{font-size:18px;color:var(--ink-2);margin:0 0 18px;max-width:600px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:32px 0 8px}
.stats div{background:var(--bg);padding:20px 22px}
.stats b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(34px,3.4vw,48px);letter-spacing:-.05em;line-height:1}
.stats span{display:block;margin-top:6px;font-size:13px;color:var(--muted)}

/* 30 days */
.days-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;position:relative}
.days-row::before{content:'';position:absolute;left:0;right:0;top:-18px;height:2px;background:linear-gradient(90deg,var(--accent),rgba(62, 230, 160,.1))}
.day{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px}
.day span{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.day h3{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.035em;margin:12px 0 8px;line-height:1.1}
.day p{margin:0;color:var(--ink-2);font-size:15px}
.days-cta{margin-top:40px}

/* reveal */
html.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
html.js [data-reveal].in{opacity:1;transform:none}
.days-row [data-reveal]:nth-child(2){transition-delay:.08s}.days-row [data-reveal]:nth-child(3){transition-delay:.16s}.days-row [data-reveal]:nth-child(4){transition-delay:.24s}

@media (max-width:1000px){
  .hx-wall{width:100%;right:0;opacity:.32;transform:rotate(-6deg) scale(1.3)}
  #hero3d{position:relative;right:auto;top:auto;transform:none;width:100%;height:220px;margin:-10px 0 6px}
  .hx{justify-content:flex-start}
  .story-grid{grid-template-columns:1fr;gap:0}
  .story-stage{display:none}
  .story-step{min-height:0;opacity:1;padding:36px 0;border-top:1px solid var(--line)}
  .story-inline{display:block;margin-top:22px;border-radius:14px;border:1px solid var(--line-2);width:100%}
  .fx-grid{grid-template-columns:1fr;gap:48px}
  .collage{height:480px;max-width:560px}
  .days-row{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .v4 section{padding:80px 0}
  .hx{padding-top:24px !important;min-height:auto}
  .kin{font-size:clamp(58px,17vw,96px);margin-bottom:22px}
  .hx-ctas .btn{width:100%}
  .ticker{margin-top:48px}
  .pain{padding:100px 0 !important}
  .reel-track img{height:200px;width:160px}
  .collage{height:400px}
  .days-row{grid-template-columns:1fr}
  .days-row::before{display:none}
  .stats b{font-size:32px}
}
@media (prefers-reduced-motion: reduce){
  .hx-track,.ticker-track,.reel-track{animation:none !important}
  .device{transform:none !important}
}

.v4 .cta-photo{text-align:left;background-position:right center;background-size:auto 120%}
.v4 .cta-photo::before{background:linear-gradient(90deg,rgba(6,6,7,1) 0%,rgba(6,6,7,.85) 45%,rgba(6,6,7,.2) 100%),linear-gradient(180deg,rgba(6,6,7,1),transparent 25%,transparent 75%,rgba(6,6,7,1))}
.v4 .cta-photo h2{max-width:720px}
@media (max-width:760px){.v4 .cta-photo{background-size:cover;background-position:70% center}.v4 .cta-photo::before{background:rgba(6,6,7,.72)}}
@media (max-width:1000px){.hx-wall{opacity:.2}}

/* Founding offer bar on the dashboard (founding window only) */
.founding-bar { display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; padding: 22px 26px; margin: 0 0 20px; border: 1px solid rgba(62, 230, 160,.22); border-radius: var(--radius); background: linear-gradient(180deg, var(--accent-soft), transparent), var(--surface); }
.founding-bar p { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }
.founding-bar p b { color: var(--ink); font-weight: 600; }
.founding-bar .countdown { margin: 0; }
@media (max-width: 820px) { .founding-bar { grid-template-columns: 1fr; gap: 16px; } }
.founding-bar .countdown b { font-size: 22px; } .founding-bar .countdown div { padding: 10px 8px; }

/* Below-the-fold photo backgrounds load when they get near the screen (home.ejs adds .bg-in). */
.verse-block.bg-in{background-image:url('/img/bible-open.jpg')}
.cta-photo.bg-in{background-image:url('/img/still-timer.jpg')}
.wl-row.two{grid-template-columns:1fr 1.4fr}
.wl-form .btn{justify-self:start}
.consent-line{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.consent-line a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:760px){.wl-row.two{grid-template-columns:1fr}.wl-form .btn{justify-self:stretch}}

/* ---------- Founding and pricing final copy (conversion/pages, 2026-10-16) ----------
   Two-tone headlines, mono countdown line, founding cards and timeline, pricing states.
   Gold stays on the Circle card only, so the Builder founding note uses the accent. */
.dim-ink{color:#5d5e68}
.hero h1 .dim-ink{-webkit-text-fill-color:#5d5e68}
.fm-hero-label{color:var(--ink-2);margin-bottom:-6px}
.fm .hero h1{font-size:clamp(46px,7.4vw,96px)}
.cd-line{margin-top:32px;font-size:13px;letter-spacing:.14em;color:var(--ink-2)}
.cd-line span{color:var(--ink)}
.fm-hero-small{margin:18px auto 0;max-width:520px;text-align:center}
.fm-in{font-size:17px;color:var(--ink);border:1px solid var(--line-2);border-radius:999px;padding:10px 20px}
.fm-tight{padding:0 0 24px}
.fm-challenge{text-align:left}
.fm-challenge h3{font-size:20px;letter-spacing:-.025em;margin:10px 0 6px}
.fm-challenge p{margin:0 0 18px;color:var(--ink-2);font-size:15px}
.fm-sec{padding-top:0}
.section-head > .eyebrow.fm-label{display:block;margin-bottom:14px}
.fm .card h3{font-size:19px}
.fm .card p{margin:8px 0 0;color:var(--ink-2);font-size:15px}
.fm-note{margin:22px 0 0}
.fm-timeline{list-style:none;margin:0;padding:0}
.fm-timeline li{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line)}
.fm-timeline li:last-child{border-bottom:1px solid var(--line)}
.fm-timeline .mono{font-size:12px;letter-spacing:.12em;color:var(--ink-2)}
.fm-timeline p{margin:0;color:var(--ink-2);font-size:15px;text-align:left}
.fm-timeline li.done .mono::before{content:'✓ ';color:var(--win)}
.fm-h3{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.2vw,36px);line-height:1.08;letter-spacing:-.04em;margin:14px 0 14px;text-wrap:balance}
.fm-earnings{margin-top:14px;color:var(--muted)}
.fm .founder-line{font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.6;letter-spacing:-.005em;color:var(--ink-2);text-wrap:pretty}
.fm-table td:first-child{color:var(--ink);width:40%}
.fm-closed{min-height:60vh;display:flex;align-items:center}
.fm-closed .lede{margin-bottom:28px}
.fm-h3s{font-size:20px;letter-spacing:-.025em}
.fm-status-extra{text-align:left;margin-top:36px}
.plans-v5 .price{margin:16px 0 20px}
.founding-note{color:var(--accent-ink);margin:-8px 0 4px}
.plan-small{font-size:13px;color:var(--muted);margin:0 0 14px}
.plan.dark .plan-small{margin-top:-8px}
.plan-extras{border-top:1px solid var(--line);margin:-16px 0 24px;padding-top:14px}
.plan-extras p{margin:6px 0 0;font-size:13.5px;color:var(--ink-2)}
.plan-under{margin-top:10px;font-size:13px;color:var(--muted);text-align:center}
@media (min-width:1001px){.plans-v5 .plan.featured{transform:translateY(-10px)}}
.pr-line{margin-top:14px !important;color:var(--ink) !important;font-size:16px !important}
.pr-bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;justify-content:center;margin:0 0 28px;padding:14px 18px;border:1px solid rgba(62, 230, 160,.22);border-radius:999px;background:var(--accent-soft);text-align:center}
.pr-bar .cd-line{margin:0;font-size:12px}
.pr-spots{font-size:12px;letter-spacing:.14em;color:var(--ink)}
.pr-bar-copy{font-size:14px;color:var(--ink-2)}
.pr-close{padding:72px 0 24px}
.pr-compare .t{min-width:620px}
.trust-block{margin-top:28px}
.trust-block ul{list-style:none;margin:12px 0 0;padding:0}
.trust-block li{padding:12px 0;border-top:1px solid var(--line);color:var(--ink-2);font-size:15px}
.trust-block li:first-child{border-top:0}
.trust-block li b{color:var(--ink);font-weight:600}
.honor-line{margin-top:14px}
.section-head p.honor-line{font-size:13px;color:var(--muted)}
.pr-trust{padding:0 0 48px}
.ob-step1{margin:22px 0 0;font-size:15px;color:var(--ink)}
@media (max-width:760px){
  .fm-timeline li{grid-template-columns:1fr;gap:4px}
  .pr-bar{border-radius:16px}
  .cd-line{font-size:12px;letter-spacing:.1em}
}

/* R30: 44px tap targets on touch screens (padding, not visual size changes where possible) */
@media (pointer: coarse) {
  .btn, .btn.sm, .mk-social, .nav-cta .btn { min-height: 44px; }
  .faq summary { min-height: 44px; display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px; }
  .foot a, footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .share-row .btn, .share-link .btn { min-height: 44px; }
  .task .tick { position: relative; }
  .task .tick::before { content: ''; position: absolute; inset: -12px; }
  .check input, .check-row input { width: 22px; height: 22px; }
  .mnav summary { min-width: 44px; min-height: 44px; }
}

/* ==========================================================================
   In-app founding offer, checkout and billing (in-app-founding-offer.md,
   checkout.md, offer.md section 8, Membership Terms Appendix A and C).
   Carbon card, Steel text, one Halo button, Geist Mono countdown. Gold is
   the Circle's only; no serif.
   ========================================================================== */
.renew-line { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 520px; }
.renew-line.tiny { font-size: 14px; margin-top: 6px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; font-weight: 500; }
.link-btn:hover { text-decoration-color: var(--ink); }
.offer-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Founding bar */
.fb { margin: 0 0 20px; }
.fb .founding-bar { margin: 0; background: var(--surface); border-color: var(--line-2); grid-template-columns: 1fr auto minmax(220px, 260px); }
.fb .founding-bar .eyebrow { color: var(--ink-2); }
.fb .founding-bar p { color: var(--ink-2); max-width: 560px; }
.fb .founding-bar.fb-welcome { grid-template-columns: 1fr minmax(220px, 260px); }
.fb .countdown b { font-family: var(--mono); }
.fb-cta .btn { width: 100%; justify-content: center; }
.fb-cta .renew-line { margin-top: 8px; }
.fb-toggle { margin-top: 10px; background: none; border: 0; padding: 0; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fb-toggle:hover { color: var(--ink-2); }
.fb-strip { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--ink-2); }
.fb-strip .mono { font-size: 12.5px; }
.fb-strip-cta { background: var(--primary); color: var(--primary-ink); border: 0; border-radius: 999px; height: 32px; padding: 0 14px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fb.is-hidden .founding-bar { display: none; }
.fb.is-hidden .fb-strip { display: flex; }
.fb.is-floating .fb-strip { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 30; border-radius: 0; border-width: 0 0 1px; background: var(--bg); padding: 10px 16px; }
@media (max-width: 820px) { .fb .founding-bar, .fb .founding-bar.fb-welcome { grid-template-columns: 1fr; } }
.closed-note { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.closed-note button { background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }

/* Sidebar, library note, paywalls */
.side-upgrade { margin-bottom: 12px; }
.side-upgrade .renew-line { color: var(--ink-2); }
.lib-note { max-width: 460px; text-align: right; margin: 0; }
.lib-note .renew-line { margin-left: auto; }
@media (max-width: 760px) { .lib-note { text-align: left; } .lib-note .renew-line { margin-left: 0; } }
.paywall .renew-line { margin-top: 12px; }
.limit-offer { margin: 18px 0; }
.limit-offer p { margin: 8px 0 18px; }
.unlock .renew-line { margin: 10px auto 0; text-align: center; }

/* Payment banner (every app page while a payment has failed) */
.pay-banner { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* Billing page */
.billing-offer { margin-bottom: 20px; padding: 26px; border-color: var(--line-2); }
.billing-offer .eyebrow { color: var(--ink-2); }
.billing-offer-line { margin: 8px 0 18px; color: var(--ink-2); max-width: 620px; }
.billing-offer-line b { color: var(--ink); font-weight: 600; }
.billing-cancelled { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; border-color: var(--line-2); }
.billing-cancelled h3 { margin: 0 0 6px; font-family: var(--display); letter-spacing: -0.03em; }
.billing-cancelled p { margin: 0; }
.cancel-reason { margin-bottom: 20px; }
.reason-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.reason-chips .btn.pill { height: 36px; font-size: 10.5px; }
.manage-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.refund-ask { margin: 0 0 24px; max-width: 720px; }

/* Cancel screen: options share size, color and weight; nothing pre-selected */
.cancel-page { max-width: 760px; }
.cancel-page h1 { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.05em; margin: 12px 0 14px; }
.cancel-page .lede { font-size: 18px; color: var(--ink-2); margin: 0 0 8px; }
.cancel-fact { color: var(--ink-2); font-size: 15px; margin: 0 0 8px; }
.cancel-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 24px 0; }
.cancel-opt { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 22px; }
.cancel-opt h3 { margin: 0 0 8px; font-size: 18px; }
.cancel-opt p { flex: 1; margin: 0 0 18px; color: var(--ink-2); font-size: 14px; }
.cancel-first { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 28px 0 24px; }
.cancel-first form { margin: 0; }
@media (max-width: 760px) { .cancel-page h1 { font-size: 34px; } }

/* Welcome after a founding payment, Circle confirm, fast founding checkout */
.welcome-page, .confirm-page { max-width: 640px; }
.welcome-page h1, .confirm-page h1 { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.05em; margin: 12px 0 14px; }
.welcome-page .lede { font-size: 18px; color: var(--ink-2); margin: 0 0 24px; }
.welcome-steps { margin: 0 0 28px; padding-left: 22px; color: var(--ink-2); }
.welcome-steps li { padding: 8px 0; }
.welcome-steps b { color: var(--ink); font-weight: 600; }
.confirm-card { margin: 20px 0; }
.confirm-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.confirm-row span { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .16em; }
.confirm-form { display: grid; gap: 16px; justify-items: start; }
.consent-check { line-height: 1.5; }
.consent-check input { margin-top: 4px; }
.delete-instead { margin: 0 0 12px; }
.lock-card .renew-line { margin-top: 10px; }
.lock-card .consent-line { margin-top: 4px; }
@media (max-width: 760px) { .welcome-page h1, .confirm-page h1 { font-size: 34px; } }
.cancel-reasons { margin: 18px 0 8px; }
.reason-chips .btn.pill.is-on { color: var(--primary-ink); background: var(--primary); border-color: var(--primary); }
.skip-link { align-self: center; margin-left: 4px; }

/* Day 7 / Day 14 upgrade screen (after the founding window) */
.ups { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(6, 6, 7, .82); backdrop-filter: blur(6px); }
.ups-panel { position: relative; width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; box-shadow: var(--glow); }
.ups-close { position: absolute; top: 12px; right: 14px; z-index: 2; background: none; border: 0; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; }
.ups-close:hover { color: var(--ink); }
.ups-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ups-track::-webkit-scrollbar { display: none; }
.ups-step { flex: 0 0 100%; scroll-snap-align: start; padding: 40px 32px 28px; }
.ups-step h2 { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1.04; letter-spacing: -0.045em; margin: 12px 0 12px; }
.ups-step p { color: var(--ink-2); margin: 0 0 22px; }
.ups-dots { display: flex; gap: 6px; justify-content: center; padding: 0 0 20px; }
.ups-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--line-2); }
.ups-dots span.on { background: var(--ink); }
@media (max-width: 760px) { .ups-step { padding: 36px 22px 24px; } .ups-step h2 { font-size: 28px; } }
.first-visit-line { display: block; margin-top: 10px; color: var(--ink); font-size: 14px; }
.finisher-card p { margin: 8px 0 16px; color: var(--ink-2); }
.fb .founding-bar .renew-line, .fb .renew-line { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.cancel-reasons + .cancel-fact { margin-top: 16px; }

/* Footer legal links and the earnings line (partials/legal-footer.ejs) */
.legal-foot { font-size: 13px; line-height: 1.5; color: var(--muted); }
.legal-foot p { margin: 0 0 6px; }
.legal-foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; margin: 0; }
.legal-foot a:hover { color: var(--ink); }
.foot .legal-foot { flex-basis: 100%; }
.foot .legal-foot a { margin: 0; }
.app-legal { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); }
main .legal-foot { margin-top: 32px; }
/* Status page: the reward disclosure line and confirmed friends by first name (decision O20) */
.ref-say{margin:12px 0 0}
.ref-friends{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0}
.ref-friends li{font-size:13px;padding:4px 12px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2)}

/* ---------- templates library ---------- */
.lib-switch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-2); }
.lib-switch a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: 999px; text-decoration: none; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.lib-switch a:hover { color: var(--ink); }
.lib-switch a.on { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.lib-switch .n { font-family: var(--mono); letter-spacing: 0; font-size: 11px; color: var(--muted); }
.tpl-filters { display: grid; gap: 10px; margin: -8px 0 18px; }
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filter-row .eyebrow { width: 52px; flex: none; font-size: 10px; }
.filter-row a { text-decoration: none; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.filter-row a:hover { color: var(--ink); border-color: var(--line-2); }
.filter-row a.on { color: var(--ink); border-color: rgba(255,255,255,.4); background: var(--surface-2); }
.tpl-count { margin: 0 0 14px; letter-spacing: .14em; }
.tpl-card { padding-top: 0; overflow: hidden; }
.tpl-thumb { position: relative; margin: 0 -22px 18px; aspect-ratio: 16 / 9; background: var(--surface-2); border-bottom: 1px solid var(--line); overflow: hidden; }
.tpl-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: saturate(.85); opacity: .78; transition: opacity .15s, transform .3s; }
.tpl-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(14,14,17,.6)); pointer-events: none; }
.tpl-card:hover .tpl-thumb img { opacity: .92; transform: scale(1.02); }
.tpl-card.locked .tpl-thumb img { filter: grayscale(1); opacity: .32; }
.tpl-card.locked:hover .tpl-thumb img { opacity: .42; }
.tpl-new { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgba(6,6,7,.82); color: var(--ink); border: 1px solid rgba(255,255,255,.18); }
.tpl-ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 18px 20px; background: radial-gradient(120% 90% at 100% 0%, rgba(62, 230, 160,.14), transparent 60%), var(--surface-2); color: var(--ink); }
.tpl-ph strong { font-family: var(--display); font-size: 22px; letter-spacing: -0.035em; line-height: 1.1; font-weight: 600; }
.tpl-card h4 { margin-top: 0; }

.tpl-page { max-width: 1080px; }
.tpl-h1 { font-family: var(--display); font-weight: 700; font-size: 52px; line-height: .98; letter-spacing: -0.055em; margin: 14px 0 16px; }
.tpl-lede { font-size: 19px; color: var(--ink-2); max-width: 680px; margin: 0 0 16px; }
.tpl-chips { margin-bottom: 28px; align-items: center; }
.tpl-chips .draft-flag { margin: 0; }
.tpl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; align-items: start; }
.tpl-aside { grid-column: 2; grid-row: 1; position: sticky; top: 24px; display: grid; gap: 14px; }
.tpl-body { grid-column: 1; grid-row: 1; max-width: none; }
.tpl-frame { position: relative; border-radius: var(--radius); border: 1px solid var(--line-2); background: #f3f3f5; overflow: hidden; max-height: 380px; }
.tpl-frame img { width: 100%; }
.tpl-frame::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(180deg, rgba(14,14,17,0), rgba(14,14,17,.55)); pointer-events: none; }
.tpl-frame.empty { aspect-ratio: 16 / 10; background: var(--surface-2); }
.tpl-frame.empty::after { display: none; }
.tpl-paywall { margin-top: 0; padding: 26px; }
.tpl-paywall h3 { font-size: 24px; }
.tpl-paywall p { font-size: 14.5px; }
.tpl-dl { display: grid; gap: 12px; padding: 20px; }
.tpl-dl-label { margin-top: -4px; }
.tpl-files { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--line); }
.tpl-files a { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 13.5px; color: var(--ink-2); }
.tpl-files a:hover { color: var(--ink); }
.tpl-ext { font-size: 10.5px; letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 0; text-align: center; }
.tpl-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tpl-facts .output-box { margin-top: 0; }
.tpl-when { padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.tpl-fact { font-size: 15.5px; margin-top: 8px; color: var(--ink); line-height: 1.5; }
.tpl-check .cl-group { margin-top: 22px; }
.cl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.cl-head h4 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.cl-head .mono { letter-spacing: .14em; font-size: 10.5px; }
.cl-item { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line); margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; scroll-margin-top: 80px; }
.cl-item .tick { cursor: pointer; padding: 0; margin-top: 1px; }
.cl-item .tick:hover { border-color: var(--accent); }
.tpl-check.locked .cl-head { opacity: .6; }
.tpl-wf { margin: 0; display: grid; border-top: 1px solid var(--line); }
.tpl-wf > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.tpl-wf dt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.tpl-wf dd { margin: 0; color: var(--ink-2); font-size: 15px; }
.tpl-review textarea { min-height: 140px; }
.tpl-body p.small { font-size: 14px; }
.tpl-pairs { display: grid; gap: 8px; }
.tpl-pair { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; font-weight: 500; transition: border-color .15s, background .15s; }
.tpl-pair:hover { border-color: rgba(255,255,255,.22); background: var(--surface-2); }
.tpl-pair .eyebrow { font-size: 10px; }
.tpl-for { margin-top: 48px; }
.t-use { margin-top: 8px; display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; }
.t-use .link { color: var(--ink-2); }
.tpl-lock { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin-left: -4px; }
@media (max-width: 1000px) {
  .tpl-layout { grid-template-columns: 1fr; gap: 28px; }
  .tpl-aside, .tpl-body { grid-column: 1; grid-row: auto; }
  .tpl-aside { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 760px) {
  .tpl-h1 { font-size: 38px; }
  .tpl-lede { font-size: 17px; }
  .tpl-aside { grid-template-columns: 1fr; }
  .tpl-frame { max-height: 260px; }
  .tpl-facts { grid-template-columns: 1fr; }
  .tpl-pair { grid-template-columns: minmax(0, 1fr) auto; }
  .tpl-pair .eyebrow { grid-column: 1 / -1; }
  .tpl-wf > div { grid-template-columns: 1fr; gap: 2px; }
  .lib-switch a { padding: 7px 14px; }
  .filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-row a { flex: none; }
  .tpl-list { gap: 12px; }
  .tpl-card { min-height: 0; }
  .tpl-thumb { aspect-ratio: 5 / 2; margin-bottom: 14px; }
  .tpl-card h4 { font-size: 20px; margin-bottom: 6px; }
  .tpl-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px; }
}
/* ==========================================================================
   Homepage final copy (conversion/pages/homepage.md, 2026-10-16): top bar,
   hero mark poster/loop, "what stops you", plan tags, pricing lines, inline
   founding-list form, earnings line. Gold stays on the Circle only.
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* slim bar above the nav */
.hbar-top{position:relative;z-index:31;background:var(--surface);border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.hbar-top .wrap{display:flex;align-items:center;justify-content:center;gap:6px 18px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;text-align:center}
.hbar-top p{margin:0}
.hbar-top a{color:var(--ink);font-weight:500;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;border-bottom:1px solid var(--line-2)}
.hbar-top a:hover{border-bottom-color:var(--ink)}
.hbar-top .cd-line{margin:0;font-size:12px;letter-spacing:.12em}

/* hero mark: First Light (v2/design/motion), the glass 127's loop over its poster, which is the loop's first frame.
   The frames fade to black at their edges and lighten lets the page show through the black, so the light has no box.
   The sections it sits in carry the page color, because lighten blends inside their isolated group. */
.hx-mark{position:relative;width:min(680px,100%);height:clamp(220px,min(26vw,38vh),340px);margin:0 auto;z-index:-1;flex:none;pointer-events:none;mix-blend-mode:lighten}
.hx-mark picture,.hx-loop{position:absolute;left:50%;top:50%;width:var(--fl-w,106%);aspect-ratio:16/9;transform:translate(-50%,var(--fl-y,-55%))}
.hx-poster{width:100%;height:100%;object-fit:cover}
.hx-loop{height:auto;object-fit:cover;opacity:0;transition:opacity 1s ease}
.hx-mark.is-playing .hx-loop{opacity:1}
.hx-mark.is-playing picture{opacity:0;transition:opacity 1.2s ease}
@media (max-width:760px){.hx-mark{height:250px;--fl-w:104%;--fl-y:-50%}}
@media (prefers-reduced-motion:reduce){.hx-poster{animation:none}}

/* what stops first-time founders */
.stops{padding-top:40px !important}
.stops-list{margin-top:36px;border-bottom:1px solid var(--line)}
.stops-row{display:grid;grid-template-columns:minmax(220px,1fr) 2fr 210px;gap:28px;padding:22px 0;border-top:1px solid var(--line);align-items:baseline}
.stops-head{padding:12px 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500}
.stops-q{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.03em;line-height:1.2;color:var(--ink)}
.stops-a{color:var(--ink-2);font-size:16px}
.stops-line{margin:28px 0 0;font-size:17px;color:var(--ink)}
.plan-tag{display:inline-block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;border:1px solid var(--line-2);border-radius:999px;padding:4px 10px;color:var(--ink-2);line-height:1.4}
.plan-tag.is-free{border-color:rgba(62, 230, 160,.35);color:var(--accent-ink)}
.plan-tag.is-builder{border-color:rgba(227,230,241,.35);color:var(--primary)}
.stops-p .plan-tag{white-space:normal}
@media (max-width:760px){
  .stops-head{display:none}
  .stops-row{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .stops-q{font-size:19px}
  .stops-a{font-size:15px}
}

/* 4 weeks */
.day-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.days-note{margin:22px 0 0;font-size:14px;color:var(--muted);max-width:640px}

/* founder numbers */
.fx-body .stats span{font-size:13px;line-height:1.45}
.stats-note{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.stats-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cc video{width:100%;height:100%;object-fit:cover;filter:grayscale(1);display:block}

/* pricing teaser */
.price-count{margin:44px auto 0;text-align:center;font-size:15px;color:var(--ink-2)}
.price-state{max-width:720px;margin:18px auto 0;text-align:center}
.price-state p{margin:0 0 18px;color:var(--ink-2);font-size:16px}
.three-lines span{display:block}
.home-trust{max-width:860px;margin:36px auto 0}
.home-faq-sec{padding-top:0 !important}

/* final CTA */
.cta-photo p.three-lines{color:var(--ink-2)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.cta-alt{display:inline-block;font-size:15px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.cta-alt:hover{color:var(--ink);border-bottom-color:var(--ink)}
.cta-under{margin:14px 0 0 !important;font-size:14px !important;color:var(--muted) !important}
.cta-photo p.cta-small{max-width:560px;margin:14px 0 0;font-size:13px;color:var(--ink-2)}
.home-join{max-width:540px;display:grid;gap:14px;margin:0 0 26px;text-align:left}
.home-join .input{margin:0}
.home-join .check{font-size:14px;color:var(--ink)}
.home-join .btn{justify-self:start}
.hj-error{margin:0;font-size:14px;color:var(--danger)}
.home-joined{max-width:600px;margin:0 0 26px;padding:24px;border:1px solid var(--line-2);border-radius:var(--radius);background:rgba(14,14,17,.85);outline:none}
.cta-photo .home-joined p{font-size:15px;margin:0 0 14px;color:var(--ink-2)}
.cta-photo .home-joined p b{color:var(--ink)}
.cta-photo .home-joined .hj-lead{font-size:17px}
.hj-ref{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.hj-ref .share-link{margin:0}
@media (max-width:760px){.home-join .btn{justify-self:stretch}.cta-row .btn{width:100%}}

/* earnings line in the site footer (every page) */
.foot .foot-legal{display:block;margin-top:22px}
.earnings-note{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.foot .earnings-note a{margin:0;display:inline;min-height:0;text-decoration:underline;text-underline-offset:2px}
.cc.c3 figcaption{left:auto;right:10px;max-width:78%;text-align:right}
.cc figcaption{line-height:1.3}
.stops-p{display:flex;flex-wrap:wrap;gap:6px}
.day .plan-tag{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;color:var(--ink-2)}
.day .plan-tag.is-free{color:var(--accent-ink)}
.day .plan-tag.is-builder{color:var(--primary)}
.cta-photo .home-join p,.cta-photo .home-join .consent-line{font-size:13.5px;line-height:1.5;margin:0;color:var(--ink-2)}
.cta-photo .home-join .hj-error{color:var(--danger)}
.foot a{white-space:nowrap}
.foot .wrap > div:nth-child(2){display:flex;flex-wrap:wrap;row-gap:4px}

/* ==========================================================================
   Founder's Circle (lib/circle.js): seat card, seat/Founding/alumni marks,
   application, Founder Profile, Scorecard, handbook and the /admin Circle panels.
   D57: Emerald and Diamond are the Circle's colours (gold is retired) and stay on
   Circle surfaces only. Numbers read as a cut stone: a Diamond top facet into
   Emerald into Emerald deep, and cards carry a 1px Diamond facet line, no halo.
   ========================================================================== */
.circle-marks { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.seat-badge { display: inline-flex; align-items: baseline; gap: 8px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.seat-badge b { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.05em; line-height: 1; color: var(--diamond); }   /* D59: the Circle's seat numbers are Diamond, solid (no gradient text) */
.seat-badge.sm b { font-size: 20px; }
.founding-mark { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: #04140d; background: linear-gradient(180deg, #9af5cf, var(--emerald)); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.founding-mark::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #04140d; }
.alumni-mark { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 4px 11px; white-space: nowrap; background: transparent; }
.founding-mark.sm, .alumni-mark.sm { font-size: 10px; padding: 3px 8px; letter-spacing: .14em; }
.gold-num { color: var(--gold); }

.seat-card { position: relative; overflow: hidden; border-radius: 20px; padding: 34px 32px 30px; min-height: 340px; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 36px 36px, linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 36px 36px, #060607;
  border: 1px solid rgba(234, 244, 255,.28); box-shadow: inset 0 1px 0 rgba(234, 244, 255, .22); }
.seat-card .eyebrow { color: var(--ink-2); letter-spacing: .3em; }
.seat-card .seat-num { font-family: var(--display); font-weight: 800; font-size: clamp(96px, 12vw, 150px); line-height: .9; letter-spacing: -0.06em; margin: 14px 0 12px; color: var(--diamond); }
.seat-card .seat-title { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.05em; line-height: 1; color: #e3e3ea; }
.seat-card .seat-title span { color: #7b7b86; }
.seat-card p { margin: 14px 0 0; color: var(--ink-2); font-size: 16px; }
.seat-card .seat-foot { margin-top: 18px; color: var(--muted); }

.circle-call { background: var(--surface); border-color: rgba(234, 244, 255,.3); box-shadow: inset 0 1px 0 rgba(234, 244, 255, .16); }
.circle-call .eyebrow { color: var(--gold); }
.circle-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.circle-actions form { margin: 0; }
.circle-h { font-family: var(--display); font-weight: 700; letter-spacing: -0.045em; font-size: 30px; line-height: 1.08; margin: 14px 0 8px; }
.circle-state { max-width: 720px; }
.circle-state .alumni-mark { margin-bottom: 4px; }
.circle-sc .card-title { margin-bottom: 8px; }
.circle-profile { margin: 16px 0; }
.profile-key { margin: 6px 0 18px; }
.profile-tile { border: 1px solid rgba(234, 244, 255,.22); border-radius: var(--radius-sm); padding: 16px 18px; background: var(--gold-soft); }
.profile-tile .eyebrow { color: var(--gold); }
.profile-tile .pv { margin-top: 8px; font-size: 17px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.circle-profile details > summary, .recap > summary { cursor: pointer; color: var(--ink-2); font-weight: 500; padding: 8px 0; }
.profile-form { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.profile-form .field:has(textarea), .profile-form .btn { grid-column: 1 / -1; }
.profile-form .btn { justify-self: start; }
.recap { border-top: 1px solid var(--line); margin-top: 8px; }
.recap-text { white-space: pre-wrap; font-size: 14px; color: var(--ink-2); margin-top: 10px; overflow-wrap: anywhere; }

/* Segmented choice buttons (radio inputs), used by the application and the Scorecard */
.circle-choice { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.circle-choice legend { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 10px; padding: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 14px; color: var(--ink-2); }
.seg input:checked + span { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); }
.seg input:focus-visible + span { box-shadow: 0 0 0 3px rgba(62, 230, 160,.35); }
.time-note { margin-top: 10px; }
.circle-apply .field > span em { font-style: normal; font-weight: 400; }

/* The Scorecard */
.scorecard { max-width: 760px; }
.sc-q { padding: 20px 0; border-top: 1px solid var(--line); }
.sc-q h3 { font-size: 16px; margin: 0 0 12px; }
.req { color: var(--gold); }
.sc-commit { display: grid; gap: 10px; padding: 12px 0; }
.sc-commit + .sc-commit { border-top: 1px dashed var(--line); }
.sc-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sc-row .input { flex: 1; min-width: 140px; }
.sc-history { display: flex; gap: 18px; margin: 0 0 12px; flex-wrap: wrap; }
.sc-history span { display: grid; gap: 2px; }
.sc-history em { font-style: normal; font-size: 11px; color: var(--muted); }
.sc-history b { font-family: var(--mono); font-weight: 500; font-size: 15px; color: var(--ink); }
.sc-more { margin-top: 12px; }
.sc-bell:not(:has(input[name="bell"]:checked)) .sc-more { display: none; }
.sc-hot:not(:has(input[value="need"]:checked)):not(:has(input[value="room"]:checked)) .sc-more { display: none; }

/* The handbook */
.handbook { max-width: 820px; }
.handbook > h1:first-child, .handbook > h1:first-child + p + hr { display: none; }
.handbook h2 { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.04em; margin: 34px 0 10px; scroll-margin-top: 90px; }
.handbook p, .handbook li { color: var(--ink-2); font-size: 15.5px; }
.handbook b { color: var(--ink); font-weight: 600; }
.handbook a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.handbook code { font-family: var(--mono); font-size: 13px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.handbook ul.tasks { list-style: none; padding: 0; }
.handbook ul.tasks li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.handbook .box { flex: none; width: 16px; height: 16px; margin-top: 4px; border: 1px solid var(--gold); border-radius: 4px; }
.handbook table.t { margin: 10px 0 18px; }
.handbook ol li::marker { color: var(--gold); font-weight: 600; }

/* /admin Circle panels */
.circle-apps td { min-width: 140px; }
.circle-apps td.decide { min-width: 170px; }
.decide > form, .decide > details { margin: 0 0 6px; }
.decide details > summary { list-style: none; cursor: pointer; }
.decide details > summary::-webkit-details-marker { display: none; }
.decide-form { display: grid; gap: 6px; margin-top: 6px; min-width: 220px; }
.circle-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.circle-row > :first-child { flex: none; min-width: 74px; }
.att { font-family: var(--mono); margin-right: 2px; }
.att.attended { color: var(--gold); }
.att.missed { color: var(--danger); }
.linkbtn { background: none; border: 0; padding: 0; margin-left: 6px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }
.recap-form textarea.mono { font-size: 13px; line-height: 1.5; }
.recap-member { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; }
@media (max-width: 760px) {
  .profile-form { grid-template-columns: 1fr; }
  .seat-card { min-height: 0; padding: 28px 22px; }
  .circle-h { font-size: 26px; }
  .seg span { min-height: 44px; }
}
.scorecard .check input, .circle-apply .check input, .profile-form .check input, .recap-form .check input { accent-color: var(--gold); }
#scorecards table.t th { white-space: nowrap; }

/* Founder's Circle hero: Video's gold 3D loop behind the headline (gold is Circle-only). */
.circle-hero{position:relative;overflow:hidden;isolation:isolate}
.circle-hero > .wrap{position:relative;z-index:1}
.circle-hero{padding-top:clamp(270px,23vw,340px) !important}
.ch-mark{position:absolute;left:50%;top:clamp(-10px,1vw,10px);width:min(56vw,720px);aspect-ratio:16/9;transform:translateX(-50%);z-index:0;pointer-events:none;mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)}
.ch-mark picture{position:absolute;inset:0}
.ch-poster,.ch-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity 1s ease}
.ch-loop{opacity:0}
.ch-mark.is-playing .ch-loop{opacity:1}
.ch-mark.is-playing picture{opacity:0;transition:opacity 1.2s ease}
@media (max-width:760px){
  .circle-hero{padding-top:min(88vw,380px) !important}
  .ch-mark{right:auto;left:50%;top:0;width:min(100vw,420px);aspect-ratio:4/5;transform:translateX(-50%);opacity:1;
    -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
}

/* Product walkthrough (home): poster until tapped; phones show the 9:16 cut. */
.walk-sec{padding:72px 0 24px}
.walk-frame picture,.walk-frame img{display:block;width:100%;height:100%;object-fit:cover}
.walk-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
@media (max-width:760px){.walk-frame{aspect-ratio:9/16;max-height:82vh;margin-inline:auto}}

/* ==========================================================================
   v5 homepage: v2 of the platform (v2/design, 2026-10-19)
   One device: the halo, a soft light behind the chrome 127 cut by a floor line. Monochrome
   steel, one inverted Halo panel for the day-30 outputs, mono for data. Gold stays Circle-only.
   ========================================================================== */
.v5 section{padding:120px 0}
.v5 .lbl{margin:0 0 18px;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.v5 .h2 .dim{color:#70717c}
.btn.ink{background:#0b0b0e;color:#ededf2;border-color:#0b0b0e}
.btn.ink:hover{box-shadow:0 10px 30px -10px rgba(10,10,14,.5)}

/* hero */
.h5{position:relative;min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);display:flex;flex-direction:column;padding:28px 0 0 !important;overflow:hidden;isolation:isolate;text-align:center;background:var(--bg)}
/* the halo: a soft backlight behind First 25's sample run, cut by a glossy floor (as in the v2 Blender renders) */
.h5-halo{position:absolute;left:50%;top:50%;width:var(--glow-w,150%);height:var(--glow-h,130%);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(244,245,251,.82),rgba(226,229,244,.62) 26%,rgba(200,206,248,.36) 46%,rgba(62, 230, 160,.15) 66%,rgba(62, 230, 160,.045) 84%,transparent);
  -webkit-mask-image:linear-gradient(#000 var(--floor,81%),rgba(0,0,0,.28) calc(var(--floor,81%) + .4%),transparent 100%);mask-image:linear-gradient(#000 var(--floor,81%),rgba(0,0,0,.28) calc(var(--floor,81%) + .4%),transparent 100%);
  animation:haloIn 1.8s .15s cubic-bezier(.2,.8,.2,1) both,haloBreath 7s 2s ease-in-out infinite alternate}
.h5-halo::after{content:'';position:absolute;left:4%;right:4%;top:var(--floor,81%);height:1px;background:linear-gradient(90deg,transparent,rgba(227,230,241,.35) 28%,rgba(255,255,255,.8) 50%,rgba(227,230,241,.35) 72%,transparent)}
@keyframes haloIn{from{opacity:0;transform:translate(-50%,-50%) scale(.86)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes haloBreath{to{opacity:.78;transform:translate(-50%,-50%) scale(1.04,1.02)}}
.h5-copy{position:relative;margin-top:6px;padding-bottom:56px}
.h5 .lbl{margin-bottom:22px;animation:fadeUp .9s .1s both}
.h5-title{font-family:var(--display);font-weight:800;font-size:clamp(46px,min(7.4vw,12.5vh),108px);line-height:.9;letter-spacing:-.062em;margin:0 auto 26px;max-width:1160px}
.h5-title > span{display:block;text-wrap:balance}
.h5-title > span > span{display:inline-block;animation:kinIn .9s cubic-bezier(.2,.8,.2,1) both}
.h5-title .dim{color:#70717c}
.h5-title .st > span{background:linear-gradient(180deg,#fff 22%,#a7a9b6);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.h5-title .dim > span:nth-child(2){animation-delay:.08s}.h5-title .dim > span:nth-child(3){animation-delay:.16s}
.h5-title .st > span:nth-child(1){animation-delay:.3s}.h5-title .st > span:nth-child(2){animation-delay:.38s}.h5-title .st > span:nth-child(3){animation-delay:.46s}
.h5-sub{font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:var(--ink-2);max-width:640px;margin:0 auto 32px;text-wrap:balance;animation:fadeUp .9s .6s both}
.h5-btn{animation:fadeUp .9s .72s both}
.h5-note{margin:18px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted);animation:fadeUp .9s .82s both}
.v5 .ticker{margin-top:auto;padding:18px 0 20px}
.v5 .ticker span{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding:0 30px}
.v5 .ticker span::after{width:4px;height:4px;background:#4a4b55}
.v5 .ticker-note{font-size:12px;color:var(--muted)}

/* the hook */
.v5 .lit.punch span{background:linear-gradient(180deg,#fff 22%,#a7a9b6);-webkit-background-clip:text;background-clip:text;color:transparent}

/* day 30: the inverted Halo panel */
.v5 .o5{margin:0 clamp(8px,1.6vw,24px);border-radius:clamp(24px,3vw,40px);background:var(--primary);color:#0b0b0e;padding:112px 0 96px}
.o5 .lbl{color:#5b5d69}
.o5 .h2{color:#0b0b0e}
.o5 .h2 .dim{color:#7a7c89}
.o5 .sub{color:#3b3d47;margin-bottom:56px}
.o5-head{max-width:760px}
.o5-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.o5-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(11,11,14,.08);border-radius:22px;padding:22px 22px 18px;box-shadow:0 1px 0 rgba(11,11,14,.04),0 24px 50px -30px rgba(20,22,40,.35)}
.o5-card:nth-child(2){transition-delay:.08s}.o5-card:nth-child(3){transition-delay:.16s}.o5-card:nth-child(4){transition-delay:.24s}
.o5-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#6a6c78}
.o5-plan{display:inline-block;font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:4px 9px;line-height:1.3;background:#0b0b0e;color:#ededf2;border:1px solid #0b0b0e}
.o5-plan.is-free{background:transparent;color:#0b0b0e;border-color:rgba(11,11,14,.28)}
.o5-card h3{font-family:var(--display);font-weight:700;font-size:23px;line-height:1.08;letter-spacing:-.04em;margin:14px 0 16px}
.o5-art{flex:1;background:#f4f5f9;border:1px solid rgba(11,11,14,.06);border-radius:14px;padding:16px;font-size:13px;line-height:1.45;color:#2a2c35;min-height:236px}
.art-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.art-row b{font-weight:600;font-size:13.5px;letter-spacing:-.01em;color:#0b0b0e}
.art-score{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;letter-spacing:-.06em;color:#0b0b0e}
.art-score small{font-size:14px;letter-spacing:0;color:#7a7c89;font-weight:600;margin-left:2px}
.art-verdict{display:inline-block;margin:6px 0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:#0b0b0e;color:#ededf2}
.art-bar{display:grid;grid-template-columns:1fr 64px 14px;align-items:center;gap:8px;margin-top:7px;font-size:12px;color:#3b3d47}
.art-bar i{height:5px;border-radius:5px;background:rgba(11,11,14,.1);position:relative;overflow:hidden}
.art-bar i::before{content:'';position:absolute;inset:0 auto 0 0;width:var(--v);background:#0b0b0e;border-radius:5px}
.art-bar em{font-style:normal;font-family:var(--mono);font-size:11.5px;text-align:right;color:#0b0b0e}
.art-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7a7c89;margin:12px 0 5px}
.art-k:first-child{margin-top:0}
.art-q{margin:0 0 4px;color:#1c1e26}
.art-tally{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.art-tally i{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(11,11,14,.25)}
.art-tally i.on{background:#0b0b0e;border-color:#0b0b0e}
.art-tally em{font-style:normal;font-family:var(--mono);font-size:11.5px;margin-left:6px;color:#0b0b0e}
.art-price{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(11,11,14,.18);align-items:center}
.art-price span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7a7c89}
.art-day{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:8px;padding:8px 0;border-top:1px solid rgba(11,11,14,.07)}
.art-day:first-child{border-top:0;padding-top:0}
.art-day span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7a7c89}
.art-day b{font-weight:500;font-size:13px;color:#1c1e26}
.art-day.is-launch b{font-weight:700;color:#0b0b0e}
.art-day.is-launch span{color:#0b0b0e}
.o5-foot{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#7a7c89}
.o5-end{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-top:40px;padding-top:28px;border-top:1px solid rgba(11,11,14,.12)}
.o5-end p{margin:0;font-size:17px;color:#2a2c35}

/* how it works */
.w5-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}
.w5-steps{list-style:none;margin:40px 0 0;padding:0;border-bottom:1px solid var(--line)}
.w5-steps li{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:24px 0;border-top:1px solid var(--line)}
.w5-steps li:nth-child(2){transition-delay:.06s}.w5-steps li:nth-child(3){transition-delay:.12s}.w5-steps li:nth-child(4){transition-delay:.18s}
.w5-steps .n{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--muted);padding-top:6px}
.w5-steps h3{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.035em;line-height:1.15;margin:0 0 6px}
.w5-steps p{margin:0;color:var(--ink-2);font-size:16px;max-width:520px}
.w5-film{position:relative;margin:0 auto;width:min(360px,100%);isolation:isolate}
.w5-film video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:28px;mix-blend-mode:lighten}
.w5-glow{position:absolute;left:50%;top:46%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:-1;border:1px solid rgba(227,230,241,.12);background:radial-gradient(circle closest-side,rgba(62, 230, 160,.10),rgba(62, 230, 160,.03) 60%,transparent 74%)}
.w5-film figcaption{margin-top:16px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* the AI tools */
.v5 .t5{position:relative;overflow:hidden}
.t5-art{position:absolute;right:max(-40px,calc(50% - 700px));top:-60px;width:min(30vw,390px);height:auto;pointer-events:none;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(ellipse 52% 50% at 50% 46%,#000 62%,transparent);mask-image:radial-gradient(ellipse 52% 50% at 50% 46%,#000 62%,transparent)}
.t5 .wrap{position:relative}
.t5-head{max-width:640px}
.t5-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.t5-tool{background:var(--bg);padding:24px 24px 26px;transition:background .2s}
.t5-tool:hover{background:var(--surface)}
.t5-name{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.t5-tool .t5-ask{margin:0 0 18px;font-family:var(--display);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.032em;color:var(--ink);text-wrap:balance}
.t5-name b{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:-.01em;line-height:1.3;color:var(--ink-2)}
.t5 .o5-plan{background:transparent;color:var(--primary);border-color:rgba(227,230,241,.3);flex:none}
.t5 .o5-plan.is-free{color:var(--accent-ink);border-color:rgba(62, 230, 160,.35)}
.t5-tool p{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.t5-tool p span{font-family:var(--mono);color:var(--muted);margin-right:2px}
.t5-tool.is-lib{background:var(--surface)}

/* what $0 gets you: the receipt */
.r5-grid{display:grid;grid-template-columns:1fr minmax(0,430px);gap:80px;align-items:center}
.r5-copy .sub{margin-bottom:32px}
.r5-wrap{justify-self:center;width:min(430px,100%);filter:drop-shadow(0 30px 34px rgba(0,0,0,.55))}
.r5-paper{--z:9px;position:relative;margin:0;background:#f2f3f7;color:#15161c;font-family:var(--mono);font-size:12.5px;line-height:1.45;padding:34px 26px 38px;transform:rotate(2deg);
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/calc(2*var(--z)) 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--z)) 51% repeat-x;
  mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/calc(2*var(--z)) 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--z)) 51% repeat-x}
.r5-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:2px solid #15161c}
.r5-head div{display:grid;gap:6px}
.r5-head b{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.06em;line-height:1}
.r5-head span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#5c5e6a}
.r5-paper ul{list-style:none;margin:6px 0 0;padding:0}
.r5-paper li{display:grid;grid-template-columns:26px 1fr auto;gap:8px;padding:7px 0;border-bottom:1px dashed rgba(21,22,28,.2)}
.r5-paper li span{color:#5c5e6a}
.r5-paper li b{font-weight:500}
.r5-paper li em{font-style:normal}
.r5-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:12px;border-top:2px solid #15161c;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.r5-total b{font-family:var(--display);font-size:30px;letter-spacing:-.04em;font-weight:800}
.r5-foot{margin:14px 0 0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#5c5e6a;text-align:center}
.r5-stamp{transform:rotate(-9deg);border:2px solid rgba(21,22,28,.78);border-radius:7px;padding:3px 10px;font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(21,22,28,.82)}

/* 127 HQ (only when HQ_LIVE=true) */
.q5-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.q5-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.q5-list li{background:var(--bg);padding:24px}
.q5-list b{display:block;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.025em}
.q5-list span{display:block;margin-top:6px;color:var(--ink-2);font-size:14.5px}

/* What are you building? The front doors (views/partials/doors.ejs, only with FRONT_DOORS) */
.d5-head{max-width:760px}
.d5-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.d5-grid li{display:flex}
html.js .d5-grid li[data-reveal]{transition-delay:calc(var(--i,0) * .06s)}
.d5-door{flex:1;display:flex;flex-direction:column;gap:10px;padding:22px 20px 20px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.008));color:var(--ink);text-decoration:none;transition:border-color .25s ease,transform .25s ease,background-color .25s ease}
.d5-door:hover,.d5-door:focus-visible{border-color:rgba(255,255,255,.3);transform:translateY(-2px);background-color:rgba(255,255,255,.02)}
.d5-door b{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.1;letter-spacing:-.035em}
.d5-for{font-size:13.5px;line-height:1.45;color:var(--muted)}
.d5-get{flex:1;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.d5-go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:14.5px;font-weight:600;color:var(--ink)}
.d5-road{margin:28px 0 0;font-size:15px;color:var(--ink-2)}
.d5-road a{color:var(--ink);text-underline-offset:3px}
.ds .d5{padding:40px 0 64px}
@media (max-width:1100px){.d5-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.d5-grid{grid-template-columns:1fr}.d5-door{padding:20px 18px 18px}.ds .d5{padding:24px 0 48px}}
@media (prefers-reduced-motion: reduce){.d5-door{transition:none}.d5-door:hover{transform:none}}

/* final CTA, left-aligned over the photo (as v4) */
.v5 .cta-photo{text-align:left;background-position:right center;background-size:auto 120%}
.v5 .cta-photo::before{background:linear-gradient(90deg,rgba(6,6,7,1) 0%,rgba(6,6,7,.85) 45%,rgba(6,6,7,.2) 100%),linear-gradient(180deg,rgba(6,6,7,1),transparent 25%,transparent 75%,rgba(6,6,7,1))}
.v5 .cta-photo h2{max-width:720px}

@media (max-width:1100px){
  .o5-grid{grid-template-columns:1fr 1fr}
  .t5-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){
  .w5-grid,.q5-grid,.r5-grid{grid-template-columns:1fr;gap:56px}
  .t5-art{width:min(40vw,320px);top:-40px;opacity:.7}
}
@media (max-width:760px){
  .v5 section{padding:80px 0}
  .h5{padding-top:8px !important;min-height:auto}
  .h5-title > span{display:inline}
  .h5-copy{margin-top:0;padding-bottom:44px}
  .h5-title{font-size:clamp(40px,11.8vw,60px);margin-bottom:22px}
  .h5-btn{width:100%}
  .h5-note{font-size:13px}
  .v5 .o5{padding:80px 0 64px;border-radius:26px}
  .o5 .sub{margin-bottom:36px}
  .o5-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -28px;padding:4px 28px 18px;scrollbar-width:none}
  .o5-grid::-webkit-scrollbar{display:none}
  .o5-card{flex:0 0 84%;scroll-snap-align:center}
  html.js .o5-card[data-reveal]{transition-delay:0s}
  .o5-end .btn{width:100%}
  .w5-steps li{grid-template-columns:44px 1fr}
  .t5-grid{grid-template-columns:1fr;border-radius:18px}
  .t5-tool{padding:18px 20px 20px}
  .t5-tool .t5-ask{font-size:19px;margin-bottom:14px}
  .t5-art{display:none}
  .q5-list{grid-template-columns:1fr}
  .r5-paper{transform:rotate(1deg);padding:30px 20px 34px}
  .r5-copy .btn{width:100%}
  .v5 .cta-photo{background-size:cover;background-position:70% center}
  .v5 .cta-photo::before{background:rgba(6,6,7,.72)}
}
@media (prefers-reduced-motion: reduce){
  .h5-halo,.h5-title > span > span,.h5 .lbl,.h5-sub,.h5-btn,.h5-note{animation:none !important}
}

/* ---------- Founding hero v2: copy and form on the left, the founding member card under the halo on the right ----------
   The card only restates the page's own facts (cap, price, dates). Its name line follows the first-name field. */
.f5{padding-top:72px}
.f5 .f5-grid{max-width:1180px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center;text-align:left}
.f5 .f5-copy h1{margin:22px 0;font-size:clamp(46px,6.2vw,92px)}
.f5 .lede{margin:0 0 30px;max-width:560px}
.f5 .wl-form{margin:0;max-width:560px}
.f5 .hero-cta{align-items:flex-start;margin:0 0 8px}
.f5 .hero-alt{margin:14px 0 0}
.f5 .fm-hero-small{margin:18px 0 0;text-align:left}
.f5-art{position:relative;display:grid;place-items:center;min-height:420px;isolation:isolate}
.f5-halo{position:absolute;left:50%;top:50%;width:150%;height:140%;transform:translate(-50%,-50%);border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(244,245,251,.85),rgba(232,235,248,.72) 32%,rgba(206,212,248,.44) 52%,rgba(62, 230, 160,.17) 72%,rgba(62, 230, 160,.05) 86%,transparent);-webkit-mask-image:linear-gradient(#000 76%,rgba(0,0,0,.25) 76.4%,transparent 100%);mask-image:linear-gradient(#000 76%,rgba(0,0,0,.25) 76.4%,transparent 100%);animation:haloIn 1.8s .15s both}
.f5-halo::after{content:"";position:absolute;left:8%;right:8%;top:76%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.f5-card{position:relative;width:min(460px,100%);aspect-ratio:1.586;border-radius:22px;padding:24px 26px;display:flex;flex-direction:column;background:linear-gradient(140deg,#24252c 0%,#0f0f13 42%,#191a20 100%);border:1px solid rgba(255,255,255,.14);box-shadow:0 50px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14);transform:rotate(-5deg);overflow:hidden;animation:f5In 1.2s .2s cubic-bezier(.2,.7,.2,1) both}
.f5-card::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.09) 47%,transparent 58%);transform:translateX(-60%);animation:f5Sheen 2.4s 1s ease-out both;pointer-events:none}
.f5-top{display:flex;justify-content:space-between;align-items:center}
.f5-mark,.f5-big{background:linear-gradient(180deg,#fff,#a7a9b6);-webkit-background-clip:text;background-clip:text;color:transparent}
.f5-mark{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.06em;line-height:1}
.f5-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.f5-big{margin-top:auto;font-family:var(--display);font-weight:700;font-size:clamp(28px,3vw,38px);letter-spacing:-.045em;line-height:1.05}
.f5-rows{margin:14px 0 0;display:grid;gap:5px}
.f5-rows div{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.f5-rows dt{color:#6a6c78}
.f5-rows dd{margin:0;color:var(--ink);text-align:right}
.f5-name{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.f5-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f5-name em{font-style:normal;color:#6a6c78;font-size:11px;flex:none}
@keyframes f5In{from{opacity:0;transform:translateY(24px) rotate(-9deg)}to{opacity:1;transform:rotate(-5deg)}}
@keyframes f5Sheen{to{transform:translateX(60%)}}
@media (max-width:900px){
  .f5{padding-top:48px}
  .f5 .f5-grid{grid-template-columns:1fr;gap:8px}
  .f5-art{min-height:290px}
  .f5-card{width:min(350px,90%);padding:18px 20px;border-radius:18px}
  .f5-mark{font-size:22px}
  .f5-big{font-size:28px}
  .f5-rows{margin-top:10px;gap:3px}
  .f5-rows div{font-size:10px}
  .f5-name{margin-top:10px;padding-top:10px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.f5-card,.f5-halo{animation:none}.f5-card::before{display:none}}

/* ---------- Homepage hero, run mode (v2/hormozi-playbook.md 2.2): First 25 on the first screen ----------
   Copy and the form on the left, a sample run under the halo on the right. The 3D 127 moves to the hook (.pain-mark). */
.h5r{text-align:left;justify-content:center}
.h5r-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"copy demo" "form demo";column-gap:clamp(36px,5vw,84px);row-gap:30px;align-items:start;padding-top:clamp(20px,5vh,64px);padding-bottom:44px}
.h5r-copy{grid-area:copy;align-self:end}
.h5r-form{grid-area:form;max-width:560px}
.h5r-demo{grid-area:demo;align-self:center;position:relative;isolation:isolate;padding:28px 0}
.h5r .h5-title{margin:0 0 22px;font-size:clamp(44px,min(6vw,10.5vh),92px)}
.h5r .h5-title .st > span:nth-child(1){animation-delay:0s}.h5r .h5-title .st > span:nth-child(2){animation-delay:.08s}.h5r .h5-title .st > span:nth-child(3){animation-delay:.16s}
.h5r .h5-title .dim > span:nth-child(1){animation-delay:.3s}.h5r .h5-title .dim > span:nth-child(2){animation-delay:.38s}.h5r .h5-title .dim > span:nth-child(3){animation-delay:.46s}
.h5r .h5-sub{margin:0;max-width:540px}
.h5r .h5-halo{--glow-w:178%;--glow-h:142%;--floor:89%}
.h5r-sheet{position:relative;max-width:520px;margin:0 auto;border-radius:22px;padding:22px 22px 16px;background:linear-gradient(180deg,rgba(23,23,28,.96),rgba(11,11,14,.97));border:1px solid rgba(255,255,255,.12);box-shadow:0 44px 90px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.1);animation:fadeUp 1s .3s both}
.h5r-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.h5r-count{color:var(--ink-2)}
.h5r-count b{display:inline-block;min-width:2ch;text-align:right;color:var(--ink);font-weight:500}
.h5r-where{margin:10px 0 14px;font-family:var(--display);font-weight:700;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.04em;line-height:1.05;color:var(--ink)}
.h5r-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.h5r-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto 36px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.h5r-rank{font-family:var(--mono);font-size:11px;color:var(--muted)}
.h5r-biz{min-width:0}
.h5r-biz b{display:block;font-weight:600;font-size:14.5px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h5r-biz small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.h5r-gaps{display:flex;gap:5px}
.h5r-gaps i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:4px 7px;white-space:nowrap}
.h5r-score{justify-self:end;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--ink);background:radial-gradient(closest-side,#141418 80%,transparent 82%),conic-gradient(var(--primary) 0 var(--s,85%),rgba(255,255,255,.1) var(--s,85%) 100%)}
.h5r-msg{margin-top:14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line);padding:12px 14px}
.h5r-k{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.h5r-k em{font-style:normal;color:var(--accent-ink)}
.h5r-msg p{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2);min-height:6em}
.h5r-foot{margin:12px 0 0;font-size:11.5px;color:var(--muted)}
.h5r-sheet.is-run .h5r-list li{animation:h5rRow .5s calc(.5s + var(--i) * .16s) cubic-bezier(.2,.7,.2,1) both}
@keyframes h5rRow{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.h5r-chips{border:0;margin:0 0 14px;padding:0;min-width:0;animation:fadeUp .9s .6s both}
.h5r-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.h5r-chips legend{margin:0 0 10px;padding:0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.h5r-chip{position:relative;cursor:pointer}
.h5r-chip input{position:absolute;opacity:0;pointer-events:none}
.h5r-chip span{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--line-2);font-size:14px;color:var(--ink-2);white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.h5r-chip:hover span{color:var(--ink);border-color:rgba(255,255,255,.3)}
.h5r-chip input:checked + span{background:var(--primary);border-color:var(--primary);color:#0b0b0e}
.h5r-chip input:focus-visible + span{outline:2px solid var(--primary);outline-offset:2px}
.h5r-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;animation:fadeUp .9s .72s both}
.h5r-row .input{margin:0;height:54px}
/* The form is the plan: 1 pick what you sell, 2 your city, 3 you approve and send. */
.h5r-chips legend,label.h5r-step{display:flex;align-items:center}
label.h5r-step{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);animation:fadeUp .9s .72s both}
.h5r-num{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;margin-right:10px;border-radius:50%;border:1px solid var(--line-2);font-family:var(--mono);font-size:10.5px;letter-spacing:0;color:var(--ink)}
.h5r-send{display:flex;align-items:center;margin:14px 0 0;font-size:14.5px;color:var(--ink-2);animation:fadeUp .9s .8s both}
.h5r .h5-note{text-align:left;margin-top:16px}
.h5r .h5-note a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
/* The hook carries the glass mark in run mode */
.v5 .pain.pain-mark{position:relative;isolation:isolate;padding-top:72px !important;text-align:center;background:var(--bg)}
.pain-mark .hx-mark{margin:0 auto}
.v5 .pain-lbl{margin:6px 0 80px}
.pain-mark .wrap{text-align:left}
@media (max-width:1000px){
  .h5r-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "form" "demo";row-gap:24px}
  .h5r-demo{padding:4px 0}
  .h5r-form{max-width:none}
}
@media (max-width:760px){
  .h5r-grid{padding-top:12px;padding-bottom:28px;row-gap:20px}
  .h5r .h5-title{font-size:clamp(42px,12.6vw,60px);margin-bottom:14px}
  .h5r .h5-title > span{display:block}
  .h5r .h5-sub{font-size:16px}
  .h5r .h5-halo{--glow-w:120%;--glow-h:120%;--floor:92%}
  .h5r-sheet{padding:15px 15px 6px;border-radius:18px}
  .h5r-where{font-size:22px;margin:8px 0 8px}
  .h5r-list li{grid-template-columns:24px minmax(0,1fr) auto 32px;padding:8px 0}
  .h5r-list li:nth-child(n+4),.h5r-msg{display:none}
  .h5r-foot{margin:8px 0 6px}
  .h5r-gaps i:nth-child(2){display:none}
  .h5r-score{width:32px;height:32px;font-size:11px}
  .h5r-chip-row{flex-wrap:nowrap;overflow-x:auto;margin-right:-20px;padding-right:20px;scrollbar-width:none}
  .h5r-chip-row::-webkit-scrollbar{display:none}
  .h5r-row{grid-template-columns:1fr}
  .h5r-row .btn{width:100%}
  .v5 .pain.pain-mark{padding-top:48px !important}
  .v5 .pain-lbl{margin-bottom:56px}
}
@media (prefers-reduced-motion:reduce){.h5r-sheet,.h5r-chips,.h5r-row,label.h5r-step,.h5r-send,.h5r-sheet.is-run .h5r-list li{animation:none !important}}
.r5-why{margin:-12px 0 30px;max-width:460px;padding:14px 0 0;border-top:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--ink-2)}
.r5-why b{color:var(--ink);font-weight:600}
/* No sideways page scroll on phones: the step glow, the outputs rail and the hook section's halo stay inside their sections. */
.v5 .w5,.v5 .o5,.v5 .pain-mark{overflow-x:clip}

/* ---------- Pricing v2: the Circle first on desktop as the anchor, and the founding offer in its exact 3 lines ---------- */
@media (min-width:1001px){.plans-anchor .plan-circle{order:-1}.plans-anchor .plan-free{order:1}}
.pr-offer{max-width:720px;margin:0 auto 44px}
.pr-close .pr-offer{margin-bottom:24px;text-align:left}
.fo{border:1px solid var(--line-2);border-radius:20px;padding:22px 26px 12px;background:var(--surface)}
.fo .eyebrow{margin:0 0 10px}
.fo-doors{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--ink)}
.fo-lines{list-style:none;margin:0;padding:0}
.fo-lines li{padding:12px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--ink-2)}
.fo-lines li:first-child{border-top:0;color:var(--ink);font-weight:600}
.pr-offer .honor-line{margin-top:12px;text-align:center}
@media (max-width:760px){.fo{padding:18px 18px 8px}.fo-lines li{font-size:15px}}
/* Footer: who Eli is and what 127 does, on every page. */
.foot-about{max-width:420px;margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
/* The Builder map on /pricing (lib/builder-map.js): the wide map on desktop, the fan view on phones and tablets. */
.bm{padding:40px 0 24px}
.bm .section-head{margin-bottom:24px}
.bm-fig{margin:0}
.bm-art svg{display:block;width:100%;height:auto}
.bm-art-phone{display:none;max-width:520px;margin:0 auto}
@media (max-width:900px){.bm-art-wide{display:none}.bm-art-phone{display:block}}
.bm-cap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 22px;margin-top:18px;text-align:center}
.bm-line{flex-basis:100%;font-size:16px;color:var(--ink)}
.bm-key{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bm-key i{flex:none;width:10px;height:10px;border-radius:50%}
.bm-k-item{background:radial-gradient(circle at 35% 30%,#fff,#b9bdc8 42%,#34363e)}
.bm-k-tool{background:#fff;border:1.5px solid #e3e6f1;box-shadow:inset 0 0 0 2px #060607}
@media (prefers-reduced-motion:no-preference){
  .bm-halo{animation:bmBreathe 7s ease-in-out infinite}
  .bm-tool circle+circle{animation:bmPulse 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.41s)}
}
@keyframes bmBreathe{50%{opacity:.72}}
@keyframes bmPulse{50%{opacity:.3}}

/* First Light hero: the glass 127, lit live, with the promise set on the floor under it.
   --fw is the picture's width (16:9); --top lifts it so the mark sits high; --floor is where its floor line lands. */
.fl{--fw:min(88vw,1280px,calc((100svh - 68px - 400px) / .5625 / .7));--top:calc(var(--fw) * -.045);--floor:calc(var(--fw) * .5625 * .738 + var(--top));
  position:relative;min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);display:flex;flex-direction:column;overflow:hidden;isolation:isolate;background:var(--bg);touch-action:pan-y}
/* with the water (HERO_WATER) the mark floats, so the copy sits a little lower to show the water and the mark's reflection */
.fl[data-fl-water]{--fw:min(88vw,1280px,calc((100svh - 68px - 460px) / .5625 / .7));--wet:clamp(34px,7.5vh,80px)}
.fl[data-fl-water] .fl-copy{padding-top:calc(var(--floor) + var(--wet))}
.fl[data-fl-water] .fl-stage picture{transition:opacity .9s ease}
.fl.is-pond .fl-stage picture{opacity:0}
/* the scroll-driven rise: the hero holds still under the nav for a short scroll while the 127 forms out of the pond */
.fl-scrub.is-scrub::after{content:'';display:block;height:85svh}
.fl-scrub.is-scrub>.fl{position:sticky;top:68px}
.fl-stage{position:absolute;inset:0;z-index:-1;pointer-events:none}
.fl-stage picture{position:absolute;display:block;left:50%;top:var(--top);width:var(--fw);aspect-ratio:16/9;transform:translateX(-50%)}
/* the poster is the LCP element: no animation, so it counts the moment it paints (the live canvas fades in over it) */
.fl-stage img{display:block;width:100%;height:auto}
.fl-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease}
.fl.is-live .fl-canvas{opacity:1}
.fl.is-live.is-reveal .fl-canvas{transition:none}
.fl.is-live .fl-stage picture{opacity:0;transition:opacity .9s ease .1s}
.fl.is-live.is-reveal .fl-stage picture{transition:opacity .35s ease}

.fl-copy{position:relative;display:grid;justify-items:center;text-align:center;padding-top:calc(var(--floor) + clamp(10px,2vh,22px));padding-bottom:clamp(28px,5vh,52px)}
.fl-title{font-family:var(--display);font-weight:700;font-size:clamp(42px,min(5.5vw,8.8vh),86px);line-height:.94;letter-spacing:-.052em;margin:0 0 clamp(18px,2.8vh,28px);max-width:1100px}
.fl-title > span{display:block;text-wrap:balance}
.fl-title > span > span{display:inline-block;animation:flUp 1.1s cubic-bezier(.16,1,.3,1) both}
.fl-title .dim{color:#6f707b}
.fl-title .st > span{background:linear-gradient(180deg,#fff 20%,#a3a6b3);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.fl-title .dim > span:nth-child(1){animation-delay:.25s}.fl-title .dim > span:nth-child(2){animation-delay:.31s}.fl-title .dim > span:nth-child(3){animation-delay:.37s}
.fl-title .st > span:nth-child(1){animation-delay:.5s}.fl-title .st > span:nth-child(2){animation-delay:.56s}.fl-title .st > span:nth-child(3){animation-delay:.62s}
.fl-row{display:flex;align-items:center;justify-content:center;gap:20px 30px;flex-wrap:wrap;animation:flFade 1s .85s both}
.fl-sub{font-size:clamp(16px,1.2vw,18px);line-height:1.45;color:var(--ink-2);max-width:440px;margin:0;text-align:left;text-wrap:pretty}
.fl-note{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--muted);animation:flFade 1s 1s both}
.fl .ticker{margin-top:auto}
@keyframes flUp{from{opacity:0;transform:translateY(.32em);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes flFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the viewfinder: quiet marks at the top corners, and two at the ends of the floor line */
.fl-hud{position:absolute;left:clamp(16px,2.6vw,36px);right:clamp(16px,2.6vw,36px);top:clamp(16px,2.4vw,30px);height:calc(var(--floor) - clamp(16px,2.4vw,30px) - 14px);pointer-events:none;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7a7b86;animation:flFade 1.2s 1.4s both}
.fl-hud span{position:absolute;display:flex;align-items:center;gap:10px;white-space:nowrap}
.fl-hud .tl{top:0;left:0}.fl-hud .tr{top:0;right:0}.fl-hud .bl{bottom:0;left:0}.fl-hud .br{bottom:0;right:0}
.fl-hud .tl::before{content:'';width:14px;height:1px;background:#e3e6f1}
.fl-hud .br::after{content:'';width:34px;height:1px;background:linear-gradient(90deg,#5d5e68,transparent)}
.fl:not(.is-live) .fl-hud .bl{opacity:0}
.fl-hud .bl{transition:opacity .8s}

@media (max-width:760px){
  .fl{--fw:126vw;--top:-5vw;min-height:auto}
  .fl[data-fl-water]{--fw:126vw;--top:-1.5vw;--wet:30px}
  .fl-copy{padding-bottom:40px}
  .fl-title{font-size:clamp(40px,11.4vw,58px);letter-spacing:-.05em}
  .fl-title > span{display:inline}
  .fl-row{flex-direction:column;gap:20px}
  .fl-sub{text-align:center;font-size:16px}
  .fl-row .btn{width:100%}
  .fl-hud{display:none}
}
@media (prefers-reduced-motion:reduce){.fl-stage img,.fl-title > span > span,.fl-row,.fl-note,.fl-hud,.fl-hud .tl::before{animation:none !important}}
/* Builder as a stack on /pricing (views/partials/hq-stack.ejs, lib/hq-offer.js) */
.hqs{padding:40px 0 24px}
.hqs .section-head{margin-bottom:28px}
.hqs .section-head p.hqs-count{color:var(--ink);font-size:16px}
.hqs-group+.hqs-group{margin-top:30px}
.hqs-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
/* Flex, so a short last row fills the width however many cards are on */
.hqs-grid{display:flex;flex-wrap:wrap;gap:14px}
.hqs-card{flex:1 1 calc(33.333% - 10px);min-width:0;display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 20px}
.hqs-says{margin:0;font-size:13.5px;color:var(--muted)}
.hqs-card h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.hqs-does{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.hqs-list{margin:6px 0 0}
.hqs-list div{display:grid;grid-template-columns:7.5em 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5}
.hqs-list dt{font-weight:500;color:var(--ink)}
.hqs-list dd{margin:0;color:var(--ink-2)}
.hqs-free{margin:auto 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.hqs-ok{margin:30px 0 0;text-align:center;font-size:16px;color:var(--ink)}
.hqs-keep{margin:8px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.hqs-preview{display:inline-block;margin:0 0 18px;padding:6px 14px;border:1px dashed var(--line);border-radius:999px;font-size:12px;color:var(--ink-2)}
@media (max-width:1000px){.hqs-card{flex-basis:calc(50% - 7px)}}
@media (max-width:760px){.hqs-card{flex-basis:100%}}