/* ════════════════════════════════════════════════════════════════
   BFA SITE V2 — HOMEPAGE STYLES
   Mobile-first: base = 375px phone. min-width queries enhance.
   Loads after base.css (tokens, nav, footer, buttons live there).
   ════════════════════════════════════════════════════════════════ */

/* ════════════ HERO — full-bleed looping video ════════════ */
.hero {
  position: relative; min-height: 88vh;
  display: flex; align-items: center;
  padding: 90px 0 80px; overflow: hidden;
  background: #000;   /* video sections stay cinematic dark in BOTH themes */
}
.hero-video, .hero-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-video { z-index: 1; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.12) 68%, rgba(0,0,0,0.35) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 42%);
}
.hero .container { position: relative; z-index: 3; width: 100%; }
.hero-inner { max-width: 760px; text-align: left; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: #E8B830;
  padding: 8px 13px; border: 1px solid rgba(232,184,48,0.3); border-radius: 999px;
  background: rgba(0,0,0,0.35); backdrop-filter: blur(4px);
}
.hero-eyebrow .pip { width: 6px; height: 6px; border-radius: 50%; background: #E8B830; animation: pulse 2s infinite ease-in-out; }
.hero h1 {
  font-size: clamp(34px, 9vw, 52px); line-height: 1.02; letter-spacing: -0.03em;
  max-width: 16ch; margin: 24px 0 0; color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
}
.hero h1 .gold { color: #E8B830; }
.hero-sub {
  font-weight: 400; font-size: 16px;
  line-height: 1.55; color: #fff; max-width: 54ch; margin: 22px 0 0;
  text-wrap: pretty; text-shadow: 0 1px 16px rgba(0,0,0,0.7);
}
.hero-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.hero-cta-row .micro { font-size: 13px; color: #C9C9CC; letter-spacing: 0.02em; }
.hero-scroll { display: none; }

@media (min-width: 768px) {
  .hero { min-height: 92vh; padding: 120px 0 100px; }
  .hero h1 { font-size: clamp(38px, 6vw, 76px); }
  .hero-sub { font-size: clamp(16px, 1.5vw, 20px); }
  .hero-eyebrow { font-size: 11px; letter-spacing: 0.2em; padding: 8px 14px; }
  .hero-scroll {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3;
    font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
    color: #9C9CA0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  }
  .hero-scroll .line { width: 1px; height: 36px; background: linear-gradient(to bottom, #E8B830, transparent); }
}

/* ════════════ ROTOR + LAUNCH DESK ════════════ */
.category { padding: 76px 0; background: var(--bg-deep); }
.rotor-h { font-size: clamp(30px, 7.4vw, 64px); line-height: 1.06; letter-spacing: -0.03em; max-width: 18ch; margin-top: 18px; }
/* "Can you help me launch" holds together as one unit... the break can only
   happen after it, never in the middle of the phrase. */
.rotor-lead { white-space: nowrap; }
.rotor { display: inline-block; position: relative; color: var(--gold-ink); white-space: nowrap; }
.rotor-word { display: inline-block; transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2,0.7,0.2,1); }
.rotor-word.out { opacity: 0; transform: translateY(-14px); }
.rotor-word.in  { opacity: 0; transform: translateY(14px); }
.rotor-q { color: var(--ink); }
/* The blinking caret now lives in the input, where someone would actually
   be typing. It sits just before the placeholder and disappears the moment
   the field is focused or has anything in it, so it never doubles up with
   the browser's own cursor. */
.ce-row { position: relative; }
.ce-caret {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 20px; background: var(--gold-ink); pointer-events: none;
  animation: caretBlink 1.05s steps(1) infinite;
}
.ce-input:focus ~ .ce-caret, .ce-input:not(:placeholder-shown) ~ .ce-caret { display: none; }
.ce-row:focus-within .ce-caret { display: none; }
/* Under 768px the row stacks (input above, button below), so centring the
   caret on the ROW drops it onto the button. Pin it to the input's own
   mid-line instead. Desktop keeps the 50% centring in the query below. */
@media (max-width: 767px) {
  /* input is 16px type inside 18px padding, so its mid-line sits at ~27px.
     Caret is 22px tall, so the top edge goes at 27 - 11. */
  .ce-caret { top: 16px; height: 22px; transform: none; }
}
@keyframes caretBlink { 50% { opacity: 0; } }
.rotor-sub { font-size: 15px; color: var(--steel); line-height: 1.6; max-width: 52ch; margin-top: 20px; text-wrap: pretty; }

.concierge-entry { margin-top: 32px; max-width: 680px; }
.ce-row {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--gold-line); border-radius: 2px; background: var(--bg-card);
  overflow: hidden; transition: border-color 200ms, box-shadow 200ms;
  box-shadow: 0 18px 50px -22px rgba(232,184,48,0.35);
}
.ce-row:focus-within { border-color: var(--gold-ink); box-shadow: 0 0 0 1px var(--gold-line); }
.ce-input { flex: 1; background: transparent; border: none; color: var(--ink); font-family: var(--font-body); font-size: 16px; padding: 18px 18px 18px 30px; min-width: 0; }
.ce-input::placeholder { color: var(--steel-dim); }
.ce-input:focus { outline: none; }
.ce-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gold); color: var(--on-gold); border: none; padding: 16px;
  font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  min-height: 48px; transition: background 200ms, gap 200ms;
}
.ce-btn:hover { background: var(--gold-hover); gap: 12px; }
.ce-micro { margin-top: 12px; font-size: 12px; color: var(--steel-dim); }

@media (min-width: 768px) {
  .category { padding: 120px 0; }
  .rotor-h { font-size: clamp(36px, 5.4vw, 72px); }
  .rotor-sub { font-size: clamp(15px, 1.5vw, 19px); margin-top: 26px; }
  .concierge-entry { margin-top: 44px; }
  .ce-row { flex-direction: row; }
  .ce-input { font-size: 17px; padding: 24px 22px 24px 34px; }
  .ce-caret { left: 22px; height: 22px; }
  .ce-btn { padding: 0 32px; font-size: 13px; }
}

/* ── Category explorer (flip cards) — carousel on phones, grid up ── */
.cx { margin-top: 48px; }
.cx-grid {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 6px;
}
.cx-grid::-webkit-scrollbar { display: none; }
.cx-slot { flex: 0 0 76%; position: relative; aspect-ratio: 3 / 4; perspective: 1300px; cursor: pointer; scroll-snap-align: center; }
.cx-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.2,0.7,0.25,1); }
.cx-slot.flip .cx-card { transform: rotateY(180deg); }
.cx-face { position: absolute; inset: 0; backface-visibility: hidden; border: 1px solid var(--hair-2); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; }
.cx-front { background: var(--bg-card); }
.cx-front:hover { border-color: var(--gold-line); }
.cx-media { position: relative; height: 60%; overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, var(--gold-tint), transparent 62%), var(--bg-dark); }
.cx-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* These two source photos frame their product lower than the rest — nudge the
   crop down the image so the product sits at the same height as every other card. */
.cx-img[src*="food-beverage"],
.cx-img[src*="pets-animal-care"] { object-position: 50% 70%; }
.cx-slot.noimg .cx-img { display: none; }
.cx-bigicon { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.cx-slot.noimg .cx-bigicon { display: flex; }
.cx-bigicon svg { width: 78px; height: 78px; stroke: var(--gold-ink); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.cx-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to top, var(--bg-card), transparent); pointer-events: none; }
.cx-panel { flex: 1; position: relative; padding: 15px 17px; display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--hair); }
.cx-badge { position: absolute; top: -22px; right: 15px; width: 44px; height: 44px; border: 1px solid var(--gold-line); border-radius: 2px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); }
.cx-slot.noimg .cx-badge { display: none; }
.cx-badge svg { width: 22px; height: 22px; stroke: var(--gold-ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cx-name { font-family: var(--font-hero); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); }
.cx-count { color: var(--steel); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 7px; }
.cx-cta { color: var(--gold-ink); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; display: flex; align-items: center; gap: 7px; margin-top: 11px; }
.cx-cta::after { content: "⟳"; font-size: 14px; }
.cx-back { transform: rotateY(180deg); border-color: var(--gold-line); background: var(--bg-card); padding: 20px 18px; overflow-y: auto; }
.cx-bname { font-family: var(--font-hero); font-weight: 700; font-size: 13px; color: var(--gold-ink); }
.cx-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cx-pill { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); padding: 6px 9px; border: 1px solid var(--hair-2); border-radius: 999px; opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s; }
.cx-slot.flip .cx-pill { opacity: 1; transform: none; }
.cx-pill.more { color: var(--gold-ink); border-color: var(--gold-line); background: var(--gold-tint); font-weight: 500; }
.cx-foot { margin-top: 14px; color: var(--steel-dim); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; }
.cx-nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 24px; }
.cx-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 60%; }
.cx-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--hair-2); transition: background 0.25s, transform 0.25s; }
.cx-dot.on { background: var(--gold-ink); transform: scale(1.35); }
.cx-arrow { width: 44px; height: 44px; flex: 0 0 auto; background: none; border: 1px solid var(--gold-line); color: var(--gold-ink); border-radius: 2px; font-size: 17px; }
.cx-cap { font-size: 13px; color: var(--steel-dim); margin-top: 20px; text-align: center; }
.cx-cap .bc-also { color: var(--steel); }

@media (min-width: 768px) {
  .cx { margin-top: 60px; }
  .cx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; overflow: visible; }
  .cx-slot { flex: none; }
  .cx-nav { display: none; }
}
@media (min-width: 1100px) { .cx-grid { grid-template-columns: repeat(4, 1fr); } }

/* ════════════ MISSION LINE ════════════ */
.mission { padding: 72px 0; background: var(--bg); border-bottom: 1px solid var(--hair); }
.mission-line {
  margin-top: 28px; font-family: var(--font-hero); font-weight: 700;
  font-size: clamp(28px, 7vw, 44px); line-height: 1.16; letter-spacing: -0.028em;
  color: var(--ink);
}
.mission-line em { font-style: normal; color: var(--gold-ink); }
.mw { display: inline-block; color: var(--steel-dim); opacity: 0.4; transition: color 350ms ease, opacity 350ms ease; }
.mw.lit { color: var(--ink); opacity: 1; }
.mw.gold.lit { color: var(--gold-ink); }
@media (min-width: 768px) {
  .mission { padding: 150px 0; }
  .mission-line { font-size: clamp(30px, 4.4vw, 62px); line-height: 1.14; margin-top: 32px; }
}

/* ════════════ WHAT IT REALLY TAKES + BRICK WALL ════════════ */
.takes { padding: 76px 0; background: var(--bg-deep); position: relative; overflow: hidden; }
.takes::before { content: ""; position: absolute; right: -200px; top: -160px; width: 720px; height: 720px; background: radial-gradient(circle, var(--gold-tint) 0%, transparent 60%); pointer-events: none; }
.takes-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; position: relative; z-index: 1; }
.takes-grid > * { min-width: 0; }
.takes h2 { font-size: clamp(28px, 6.5vw, 52px); line-height: 1.04; letter-spacing: -0.03em; max-width: 18ch; margin-top: 18px; }
.takes-note { margin-top: 24px; font-size: 14px; color: var(--steel); line-height: 1.7; max-width: 46ch; }
.takes-turn {
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--hair);
  font-family: var(--font-hero); font-weight: 700; font-size: clamp(19px, 4.6vw, 28px);
  line-height: 1.22; letter-spacing: -0.02em; color: var(--ink); max-width: 30ch;
}
.wall { border: 1px solid var(--hair-2); border-radius: 2px; background: var(--bg); padding: 22px 16px 14px; overflow: hidden; }
.wall-board { position: relative; --rows: 13; --bh: 32px; --wgap: 5px; height: calc(var(--rows) * (var(--bh) + var(--wgap)) - var(--wgap)); }
.brick {
  position: absolute;
  left: calc(var(--col) / 12 * 100%);
  width: calc(var(--w) / 12 * 100% - var(--wgap));
  height: var(--bh);
  bottom: calc(var(--row) * (var(--bh) + var(--wgap)));
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1px solid var(--hair-2); border-radius: 2px;
  opacity: 0; transform: translateY(calc(-560px + var(--row) * -40px));
}
.brick span {
  font-weight: 500; font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 5px;
}
.brick.drop { opacity: 1; transform: translateY(0); transition: transform 480ms cubic-bezier(0.34, 0.9, 0.42, 1.06), opacity 140ms linear; }
.brick.locked { border-color: var(--gold-line); background: var(--gold-tint); animation: lockPulse 700ms ease-out; }
.brick.locked span { color: var(--ink); }
.brick.locked::after { content: "✓"; position: absolute; right: 5px; top: 3px; font-size: 9px; line-height: 1; color: var(--gold-ink); }
@keyframes lockPulse { 0% { box-shadow: 0 0 0 0 rgba(232,184,48,0.45); } 100% { box-shadow: 0 0 0 14px rgba(232,184,48,0); } }
.wall-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hair); }
.wall-cap { font-size: 12px; color: var(--steel-dim); letter-spacing: 0.03em; }
.wall-replay {
  background: transparent; border: 1px solid var(--hair-2); border-radius: 2px; color: var(--steel);
  font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 14px; min-height: 36px; transition: color 150ms, border-color 150ms;
}
.wall-replay:hover { color: var(--gold-ink); border-color: var(--gold-line); }
@media (min-width: 1024px) {
  .takes { padding: 120px 0; }
  .takes-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .wall { padding: 28px 24px 18px; }
  .wall-board { --bh: 40px; --wgap: 6px; }
  .brick span { font-size: 10px; letter-spacing: 0.08em; padding: 0 8px; }
}

/* ════════════ AI ADVANTAGE + LEDGER + TICKER ════════════ */
.ai { padding: 76px 0 0; background: var(--bg); }
.ai h2 { font-size: clamp(28px, 6.5vw, 54px); line-height: 1.04; letter-spacing: -0.03em; max-width: 18ch; margin-top: 18px; }
.ai-lead { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.ai-lead > * { min-width: 0; }
.ai-visual { border: 1px solid var(--hair-2); border-radius: 2px; overflow: hidden; position: relative; }
.ai-visual::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 90px rgba(0,0,0,0.35); pointer-events: none; }
body.theme-light .ai-visual::after { box-shadow: none; }
.ai-visual img { width: 100%; height: auto; display: block; filter: saturate(0.9); }

.ai-compare { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 48px; background: var(--hair-2); border: 1px solid var(--hair-2); }
.ai-col { background: var(--bg); padding: 26px 22px 30px; }
.ai-col .col-label { font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel-dim); }
.ai-col.new .col-label { color: var(--gold-ink); }
.ai-row { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.ai-row:last-child { border-bottom: none; }
.ai-row .v { font-family: var(--font-hero); font-weight: 700; font-size: clamp(19px, 5vw, 28px); letter-spacing: -0.02em; color: var(--ink); position: relative; display: inline-block; align-self: flex-start; }
.ai-col.old .ai-row .v { color: var(--steel); }
.ai-col.old .ai-row .v::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px;
  background: var(--gold-ink); opacity: 0.85; transform: scaleX(0); transform-origin: left;
  transition: transform 420ms ease; transition-delay: calc(var(--i, 0) * 420ms + 200ms);
}
#aiCompare.play .ai-col.old .ai-row .v::after { transform: scaleX(1); }
.ai-col.new .ai-row { opacity: 0; transform: translateY(10px); transition: opacity 380ms ease, transform 380ms cubic-bezier(0.2,0.7,0.2,1); transition-delay: calc(var(--i, 0) * 420ms + 470ms); }
#aiCompare.play .ai-col.new .ai-row { opacity: 1; transform: none; }
.ai-col.new .ai-row .v { color: var(--gold-ink); }
.ai-row .k { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-dim); }
@media (min-width: 1024px) {
  .ai { padding-top: 120px; }
  .ai-lead { grid-template-columns: 1.05fr 1fr; gap: 56px; }
  .ai-compare { grid-template-columns: 1fr 1fr; margin-top: 56px; }
  .ai-col { padding: 32px 32px 36px; }
}

/* Ledger */
.ledger { margin-top: 48px; border: 1px solid var(--gold-line); border-radius: 2px; background: var(--bg-deep); }
.ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 20px; border-bottom: 1px solid var(--hair); }
.ledger-head .t { font-family: var(--font-hero); font-weight: 700; font-size: 15px; color: var(--ink); }
.ledger-tag { font-weight: 500; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); padding: 4px 10px; border: 1px solid var(--gold-line); border-radius: 999px; }
.ledger-rows { padding: 6px 20px 10px; }
.ledger-row { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.lr-item { font-size: 13px; color: var(--steel); line-height: 1.4; }
.lr-dots { flex: 1; border-bottom: 1px dotted var(--steel-dim); opacity: 0.45; transform: translateY(-4px); min-width: 20px; }
.lr-cost { font-family: var(--font-hero); font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; }
.ledger-row.total { border-bottom: none; padding-top: 18px; }
.ledger-row.total .lr-item { color: var(--ink); font-weight: 600; font-size: 14px; }
.ledger-row.total .lr-cost { color: var(--gold-ink); font-size: clamp(17px, 4.4vw, 24px); }
.ledger-verdict {
  display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center;
  padding: 28px 20px 26px; border-top: 1px solid var(--hair); background: var(--bg);
  opacity: 0; transform: translateY(16px);
  transition: opacity 600ms ease 200ms, transform 600ms cubic-bezier(0.2,0.7,0.2,1) 200ms;
}
#ledger.settled .ledger-verdict { opacity: 1; transform: none; }
.lv-lab { font-weight: 500; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel-dim); }
.lv-big { font-family: var(--font-hero); font-weight: 700; font-size: clamp(22px, 6vw, 36px); letter-spacing: -0.02em; color: var(--steel); margin-top: 8px; }
.lv-vs { display: none; }
.lv-zero { font-family: var(--font-hero); font-weight: 700; font-size: clamp(54px, 16vw, 92px); line-height: 1; letter-spacing: -0.03em; color: var(--gold-ink); margin-top: 6px; transform: scale(0); opacity: 0; }
#ledger.settled .lv-zero { animation: zeroStamp 550ms cubic-bezier(0.25, 1.5, 0.4, 1) 450ms forwards; }
@keyframes zeroStamp {
  0% { transform: scale(2.2) rotate(-4deg); opacity: 0; }
  60% { transform: scale(0.94) rotate(0); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.lv-note { font-size: 12px; color: var(--steel); margin-top: 10px; max-width: 30ch; line-height: 1.5; }
.lv-col.ours .lv-note { color: var(--ink); }
.ledger-turn { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 22px 20px; border-top: 1px solid var(--hair); background: var(--bg); }
.lt-copy { font-size: 14px; color: var(--steel); line-height: 1.6; max-width: 52ch; }
.lt-punch { display: block; color: var(--gold-ink); font-family: var(--font-hero); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 8px; }
/* Mobile/tablet: the verdict stacks, so the "what they charge" column just
   repeats the total row above it. Hide it and lead straight with the $0. */
@media (max-width: 859px) {
  .ledger-verdict .lv-col:not(.ours) { display: none; }
  .ledger-verdict { padding: 20px 20px 24px; }
}
@media (min-width: 860px) {
  .ledger { margin-top: 56px; }
  .ledger-head, .ledger-turn { padding-left: 28px; padding-right: 28px; }
  .ledger-rows { padding: 8px 28px 14px; }
  .lr-item { font-size: 14px; }
  .lr-cost { font-size: 15px; }
  .ledger-verdict { grid-template-columns: 1fr auto 1fr; gap: 28px; padding: 34px 28px 30px; }
  .lv-vs {
    display: flex; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hair-2);
    align-items: center; justify-content: center;
    font-family: var(--font-hero); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-dim);
  }
  .ledger-turn { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Ticker */
.ticker { margin-top: 64px; padding: 18px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: var(--bg-deep); overflow: hidden; }
.ticker-track { display: flex; align-items: center; width: max-content; animation: tickerScroll 30s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.tk { display: inline-flex; align-items: center; white-space: nowrap; font-family: var(--font-hero); font-weight: 700; font-size: clamp(16px, 4vw, 25px); letter-spacing: -0.01em; color: var(--steel); }
.tk.gold { color: var(--gold-ink); }
.tk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-ink); margin: 0 32px; flex-shrink: 0; }
@keyframes tickerScroll { to { transform: translateX(-50%); } }
@media (min-width: 768px) { .ticker { margin-top: 88px; padding: 22px 0; } .tk-dot { margin: 0 44px; } }

/* ════════════ CRED STATS (proof, moved up) ════════════ */
.cred { padding: 72px 0 40px; background: var(--bg); border-top: 1px solid var(--hair); }
.cred-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair-2); border: 1px solid var(--hair-2); margin-top: 32px; }
.cred-stat { background: var(--bg); padding: 20px 8px; text-align: center; }
.cs-num { font-family: var(--font-hero); font-weight: 700; font-size: clamp(18px, 5.6vw, 28px); letter-spacing: -0.02em; color: var(--gold-ink); white-space: nowrap; }
.cs-lab { font-weight: 500; font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); margin-top: 6px; line-height: 1.35; }
@media (min-width: 768px) {
  .cred { padding: 120px 0 110px; }
  .cred-stats { grid-template-columns: repeat(3, 1fr); margin-top: 56px; }
  .cred-stat { padding: 42px 36px 46px; text-align: left; }
  .cs-num { font-size: clamp(34px, 4.4vw, 54px); white-space: normal; }
  .cs-lab { font-size: 12px; letter-spacing: 0.12em; margin-top: 8px; }
}

/* ════════════ CURRICULUM TEASER (new) ════════════ */
.curr { padding: 44px 0 76px; background: var(--bg-deep); }
.curr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair-2); border: 1px solid var(--hair-2); margin-top: 36px; }
.curr-stat { background: var(--bg-deep); padding: 20px 18px; }
.curr-stat .n { font-family: var(--font-hero); font-weight: 700; font-size: clamp(26px, 7vw, 40px); color: var(--gold-ink); letter-spacing: -0.02em; }
.curr-stat .l { font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); margin-top: 6px; }
.curr-levels { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
.curr-level {
  border: 1px solid var(--hair-2); border-radius: 2px; background: var(--bg);
  padding: 24px 22px; position: relative; overflow: hidden;
  transition: border-color 250ms, transform 250ms;
  text-decoration: none; display: block; color: inherit;
}
.curr-level::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold-ink); opacity: 0; transition: opacity 250ms; }
.curr-level:hover { border-color: var(--gold-line); transform: translateY(-2px); }
.curr-level:hover::before { opacity: 1; }
.curr-level .cl-idx { font-family: var(--font-hero); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; color: var(--steel-dim); }
.curr-level h3 { font-family: var(--font-hero); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); margin-top: 10px; }
.curr-level .cl-tier {
  display: inline-block; font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-ink); border: 1px solid var(--gold-line); border-radius: 999px; padding: 4px 10px; margin-top: 10px;
}
.curr-level p { font-size: 13px; color: var(--steel); line-height: 1.6; margin-top: 14px; }
.curr-level .cl-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); margin-top: 18px; transition: gap 200ms; }
.curr-level:hover .cl-go { gap: 12px; }
.curr-cta { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.curr-cta .micro { font-size: 12px; color: var(--steel-dim); }
@media (min-width: 768px) {
  .curr { padding: 120px 0; }
  .curr-stats { grid-template-columns: repeat(4, 1fr); margin-top: 48px; }
  .curr-stat { padding: 26px 28px; }
  .curr-levels { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
}
/* ── "LIVING INDEX" REEL — mobile only. Real lesson titles stream past
   in two columns (one up, one down) to make the breadth land instantly. ── */
.curr-reel { display: none; text-decoration: none; }
.reel-frame {
  position: relative; margin-top: 28px; height: 440px; overflow: hidden;
  border: 1px solid var(--hair-2); border-radius: 2px; background: var(--bg);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.reel-col { position: relative; overflow: hidden; }
.reel-track { display: flex; flex-direction: column; gap: 10px; padding: 12px 8px; will-change: transform; }
.reel-col.up .reel-track { animation: reelUp 34s linear infinite; }
.reel-col.down .reel-track { animation: reelDown 34s linear infinite; }
@keyframes reelUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes reelDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.reel-chip {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--hair); border-radius: 2px; background: var(--bg-card);
  padding: 9px 10px;
}
.reel-thumb {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 2px; position: relative;
  border: 1px solid var(--gold-line);
  background: radial-gradient(120% 120% at 50% 18%, var(--gold-tint), transparent 62%), var(--bg-deep);
  display: flex; align-items: center; justify-content: center;
}
.reel-thumb svg { width: 15px; height: 15px; fill: none; stroke: var(--gold-ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.reel-video .reel-thumb svg { fill: var(--gold-ink); stroke: none; }
.reel-kind {
  position: absolute; bottom: -1px; right: -1px;
  font-size: 6.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-gold); background: var(--gold); padding: 1px 3px; border-radius: 1px 0 1px 0;
}
.reel-ttl {
  font-family: var(--font-hero); font-weight: 600; font-size: 12px; line-height: 1.2; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reel-fade { position: absolute; left: 0; right: 0; height: 90px; pointer-events: none; z-index: 2; }
.reel-fade.top { top: 0; background: linear-gradient(180deg, var(--bg) 0%, transparent 100%); }
.reel-fade.bottom { bottom: 0; background: linear-gradient(0deg, var(--bg) 0%, transparent 100%); }
.reel-badge {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 9px 14px; border: 1px solid var(--gold-line); border-radius: 999px;
  background: var(--glass-strong); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.reel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulseLive 2s infinite ease-in-out; flex-shrink: 0; }
.reel-see { color: var(--gold-ink); font-weight: 700; }

/* Mobile: swap the static stat grid for the reel, and keep the CTA lifted
   up between the reel and the level cards. */
@media (max-width: 767px) {
  .curr .container { display: flex; flex-direction: column; }
  .curr .section-head { order: 1; }
  .curr-stats { display: none; }
  .curr-reel { display: block; order: 2; }
  .curr-cta { order: 3; margin-top: 28px; }
  .curr-levels { order: 4; margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .reel-col.up .reel-track, .reel-col.down .reel-track { animation: none; }
  .reel-dot { animation: none; }
}

/* ════════════ SEGMENTER — 3 doors ════════════ */
.segmenter { padding: 76px 0; background: var(--bg); }
.doors { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
.door {
  border: 1px solid var(--hair-2); border-radius: 2px; background: var(--bg-deep);
  padding: 0 24px 28px; display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: border-color 250ms, transform 250ms;
}
.door::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold-ink); opacity: 0; transition: opacity 250ms; z-index: 2; }
.door:hover { border-color: var(--gold-line); transform: translateY(-2px); }
.door:hover::before { opacity: 1; }
.door-media { margin: 0 -24px 24px; height: 150px; overflow: hidden; position: relative; border-bottom: 1px solid var(--hair); }
.door-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.92); transition: transform 600ms cubic-bezier(0.2,0.6,0.2,1); }
.door:hover .door-media img { transform: scale(1.04); }
.door-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg-deep) 0%, transparent 55%); pointer-events: none; }
.door .d-idx { font-family: var(--font-hero); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; color: var(--steel-dim); }
.door h3 { font-family: var(--font-hero); font-weight: 700; font-size: 23px; letter-spacing: -0.02em; color: var(--ink); margin-top: 10px; }
.door .d-tag { font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin-top: 8px; }
.door .d-quote { font-size: 14px; color: var(--steel); line-height: 1.5; margin-top: 16px; font-style: italic; }
.door-list { list-style: none; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 9px; }
.door-list li { display: flex; gap: 10px; font-size: 13px; color: var(--ink); }
.door-list li::before { content: "→"; color: var(--gold-ink); }
.seg-close { margin-top: 48px; text-align: center; }
.sc-line { font-family: var(--font-hero); font-weight: 700; font-size: clamp(19px, 5vw, 30px); letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); max-width: 32ch; margin: 0 auto 24px; text-wrap: balance; }
.op-micro { margin-top: 14px; font-size: 12px; color: var(--steel-dim); letter-spacing: 0.02em; }
@media (min-width: 1024px) {
  .segmenter { padding: 120px 0; }
  .doors { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
  .door { padding: 0 32px 32px; }
  .door-media { margin: 0 -32px 28px; height: 180px; }
  .seg-close { margin-top: 64px; }
}

/* ════════════ UGC BAND ════════════ */
.builders { padding: 76px 0; background: var(--bg-deep); position: relative; overflow: hidden; }
.ugc-head { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 32px; }
.ugc-controls { display: flex; gap: 12px; }
.ugc-arrow { width: 48px; height: 48px; background: transparent; border: 1px solid var(--gold-line); color: var(--gold-ink); border-radius: 2px; display: flex; align-items: center; justify-content: center; transition: background 200ms, transform 100ms; }
.ugc-arrow svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.ugc-arrow:hover { background: var(--gold-tint); }
.ugc-arrow:active { transform: scale(0.95); }
.ugc-rail {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 8px 4px 20px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter);
  scroll-behavior: smooth;
}
.ugc-rail::-webkit-scrollbar { display: none; }
.ugc-card { flex: 0 0 240px; scroll-snap-align: start; }
.ugc-thumb { position: relative; aspect-ratio: 9 / 16; border-radius: 2px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--hair-2); }
.ugc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.2,0.6,0.2,1); }
.ugc-card:hover .ugc-photo { transform: scale(1.03); }
.ugc-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, transparent 40%); pointer-events: none; }
.ugc-tag { position: absolute; left: 14px; top: 14px; z-index: 3; padding: 4px 8px; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); border: 1px solid rgba(232,184,48,0.3); border-radius: 2px; font-weight: 500; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #E8B830; }
.ugc-meta { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; }
.ugc-meta .who { font-family: var(--font-hero); font-weight: 700; font-size: 15px; color: #fff; line-height: 1.15; }
.ugc-meta .what { font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #E8B830; margin-top: 5px; }
.ugc-note { margin-top: 20px; font-size: 12px; color: var(--steel-dim); letter-spacing: 0.04em; }
@media (min-width: 768px) {
  .builders { padding: 120px 0 100px; }
  .ugc-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }
  .ugc-arrow { width: 56px; height: 56px; }
  .ugc-card { flex-basis: 280px; }
  .ugc-rail { gap: 24px; }
}

/* ════════════ JOIN-FREE CLOSE — the receipt ════════════ */
.oneplace { padding: 76px 0; background: var(--bg); border-top: 1px solid var(--hair); overflow: hidden; }
.oneplace-grid { display: grid; grid-template-columns: 1fr; gap: 52px; align-items: center; }
.oneplace-grid > * { min-width: 0; }
.oneplace h2 { font-size: clamp(32px, 8vw, 58px); line-height: 1.05; letter-spacing: -0.02em; max-width: 14ch; margin-top: 18px; }
.oneplace-body { font-size: 16px; color: var(--steel); line-height: 1.7; max-width: 46ch; margin-top: 22px; }
.oneplace-cta { margin-top: 32px; }
/* .arr span removed... .btn-primary already appends its own arrow via ::after,
   which is what produced the double arrow on this button. */
.receipt { position: relative; background: var(--bg-dark); border: 1px solid var(--hair-2); border-radius: 3px; padding: 30px 26px 34px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.receipt::before { content: ""; position: absolute; inset: 10px; border: 1px dashed var(--hair); border-radius: 2px; pointer-events: none; }
.r-head { text-align: center; padding-bottom: 20px; border-bottom: 1px solid var(--hair-2); position: relative; z-index: 1; }
.r-head .r-brand { font-family: var(--font-hero); font-weight: 700; font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); }
.r-head .r-sub { margin-top: 6px; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--steel-dim); }
.r-lines { position: relative; z-index: 1; padding: 8px 0; }
.r-line { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--hair); }
.r-line .n { font-family: var(--font-hero); font-weight: 600; font-size: 14px; color: var(--ink); }
.r-line .d { grid-column: 1; font-size: 12px; color: var(--steel-dim); }
.r-line .v { grid-column: 2; grid-row: 1 / span 2; font-family: "SFMono-Regular", ui-monospace, Menlo, monospace; font-size: 13px; color: var(--steel); white-space: nowrap; align-self: center; }
.r-total { position: relative; z-index: 1; margin-top: 14px; padding-top: 18px; }
.r-total .rt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.r-total .rt-lbl { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel-dim); }
.r-total .rt-was { font-family: "SFMono-Regular", ui-monospace, Menlo, monospace; font-size: 16px; color: var(--steel); text-decoration: line-through; text-decoration-color: rgba(232,184,48,0.7); text-decoration-thickness: 2px; }
.r-total .rt-now { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.r-total .rt-now .lbl { font-family: var(--font-hero); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; color: var(--ink); }
.r-total .rt-now .zero { font-family: var(--font-hero); font-weight: 700; font-size: clamp(40px, 9vw, 56px); color: var(--gold); line-height: 1; }
.r-foot { position: relative; z-index: 1; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair-2); text-align: center; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel-dim); }
@media (min-width: 1024px) {
  .oneplace { padding: 120px 0; }
  /* Desktop is unchanged: copy and CTA stack in the left column, the value
     card fills the right column and stays vertically centred against them. */
  .oneplace-grid {
    grid-template-columns: 1.05fr 0.95fr; gap: 72px;
    grid-template-rows: auto auto;
  }
  .op-copy     { grid-column: 1; grid-row: 1; }
  .oneplace-cta{ grid-column: 1; grid-row: 2; margin-top: 0; }
  .op-receipt  { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .receipt { padding: 38px 38px 42px; }
}

/* ════════════ START FREE — name generator safety net ════════════ */
.startfree { padding: 76px 0; background: var(--bg-deep); }
.sf-card {
  border: 1px solid var(--gold-line); border-radius: 2px; background: var(--bg);
  padding: 30px 22px; position: relative; overflow: hidden; max-width: 680px;
}
.sf-card::before { content: ""; position: absolute; top: -120px; right: -120px; width: 280px; height: 280px; background: radial-gradient(circle, var(--gold-tint) 0%, transparent 60%); pointer-events: none; }
.sf-card h3 { font-family: var(--font-hero); font-weight: 700; font-size: clamp(24px, 6vw, 36px); letter-spacing: -0.025em; color: var(--ink); position: relative; }
.sf-body { font-size: 15px; color: var(--steel); margin-top: 14px; line-height: 1.6; position: relative; }
.namegen-form { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.ng-input {
  background: var(--bg-card); border: 1px solid var(--hair-2); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; padding: 15px 16px; border-radius: 2px; width: 100%;
}
.ng-input::placeholder { color: var(--steel-dim); }
.ng-input:focus { outline: none; border-color: var(--gold-ink); }
.namegen-form .btn-primary { width: 100%; margin-top: 4px; }
.ng-micro { font-size: 11px; color: var(--steel-dim); margin-top: 4px; }
.ng-results { margin-top: 20px; display: none; flex-wrap: wrap; gap: 10px; position: relative; }
.ng-results.show { display: flex; }
.ng-chip { font-family: var(--font-hero); font-weight: 600; font-size: 15px; color: var(--ink); padding: 10px 16px; border: 1px solid var(--gold-line); border-radius: 2px; background: var(--gold-tint); }
.ng-after { display: none; margin-top: 18px; font-size: 14px; color: var(--steel); position: relative; }
.ng-after.show { display: block; }
.ng-after a { color: var(--gold-ink); }
@media (min-width: 768px) { .startfree { padding: 110px 0; } .sf-card { padding: 40px 36px; } }

/* ════════════ WORK WITH US ════════════ */
.workwith { padding: 76px 0; background: var(--bg); border-top: 1px solid var(--hair); }
.ww-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.ww-grid > * { min-width: 0; }
.workwith h2 { font-size: clamp(28px, 6.5vw, 48px); line-height: 1.04; letter-spacing: -0.03em; max-width: 16ch; margin-top: 18px; }
.ww-body { font-size: 15px; color: var(--steel); line-height: 1.7; margin-top: 20px; max-width: 46ch; }
.ww-form { border: 1px solid var(--hair-2); border-radius: 2px; background: var(--bg-deep); padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; }
.ww-field label { display: block; font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); margin-bottom: 8px; }
.ww-field input, .ww-field select, .ww-field textarea {
  width: 100%; background: var(--bg-card); border: 1px solid var(--hair-2); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; padding: 13px 14px; border-radius: 2px;
}
.ww-field input:focus, .ww-field select:focus, .ww-field textarea:focus { outline: none; border-color: var(--gold-ink); }
.ww-field textarea { resize: vertical; min-height: 88px; }
.ww-form .btn-primary { width: 100%; margin-top: 6px; }
.ww-success { display: none; font-size: 14px; color: var(--gold-ink); padding: 14px; border: 1px solid var(--gold-line); border-radius: 2px; background: var(--gold-tint); }
.ww-success.show { display: block; }
@media (min-width: 1024px) {
  .workwith { padding: 120px 0; }
  .ww-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .ww-form { padding: 32px; }
}

/* ════════════ FINAL CTA ════════════ */
.final { padding: 90px 0 110px; background: var(--bg-deep); text-align: center; position: relative; overflow: hidden; }
.final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, var(--gold-tint) 0%, transparent 55%); pointer-events: none; }
.final-inner { position: relative; z-index: 1; }
.final h2 { font-size: clamp(32px, 8vw, 72px); line-height: 1.04; letter-spacing: -0.03em; max-width: 18ch; margin: 24px auto 0; padding-bottom: 8px; }
.final-sub { font-size: 16px; color: var(--steel); line-height: 1.65; max-width: 50ch; margin: 28px auto 40px; text-wrap: pretty; }
.final .reassure { margin-top: 22px; font-size: 13px; color: var(--steel-dim); letter-spacing: 0.02em; }
@media (min-width: 768px) { .final { padding: 140px 0 160px; } .final-sub { font-size: 18px; margin: 36px auto 48px; } }

/* ════════════ CONCIERGE — Launch Desk panel + FAB ════════════ */
.cg-fab {
  position: fixed; right: 16px; bottom: 20px; z-index: 900;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg-card); color: var(--gold-ink);
  border: 1px solid var(--gold-line); border-radius: 2px;
  padding: 14px 18px; min-height: 48px;
  font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 16px 40px -12px var(--shadow-ink);
  transition: background 200ms, color 200ms, transform 200ms, opacity 200ms;
}
.cg-fab svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.cg-fab:hover { background: var(--gold); color: var(--on-gold); }
.cg-fab.hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
@media (min-width: 1024px) { .cg-fab { bottom: 20px; right: 20px; } }

.cg {
  position: fixed; right: 12px; bottom: 12px; z-index: 950;
  width: calc(100vw - 24px); max-height: calc(100dvh - 88px);
  display: flex; flex-direction: column;
  background: var(--bg-deep); border: 1px solid var(--gold-line); border-radius: 2px;
  box-shadow: 0 32px 80px -20px var(--shadow-ink);
  opacity: 0; pointer-events: none; transform: translateY(16px); visibility: hidden;
  transition: opacity 250ms ease, transform 300ms cubic-bezier(0.2,0.7,0.2,1), visibility 0s linear 300ms;
}
.cg.open { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; transition-delay: 0s; }
.cg-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--hair); background: var(--bg-dark); }
.cg-id { display: flex; align-items: center; gap: 12px; }
.cg-dot { width: 8px; height: 8px; background: var(--gold-ink); border-radius: 50%; animation: pulse 2s infinite ease-in-out; flex-shrink: 0; }
.cg-name { font-family: var(--font-hero); font-weight: 700; font-size: 14px; color: var(--ink); }
.cg-sub { font-size: 11px; color: var(--steel); margin-top: 2px; }
.cg-close { width: 32px; height: 32px; background: transparent; border: 1px solid var(--hair-2); border-radius: 2px; color: var(--steel); font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: color 150ms, border-color 150ms; }
.cg-close:hover { color: var(--ink); border-color: var(--gold-line); }
.cg-body { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; scrollbar-width: thin; }
.cg-msg { max-width: 88%; padding: 12px 16px; border-radius: 2px; font-size: 14px; line-height: 1.55; }
.cg-msg.bot { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--hair); color: var(--ink); }
.cg-msg.user { align-self: flex-end; background: var(--gold-tint); border: 1px solid var(--gold-line); color: var(--ink); }
.cg-emailline { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair); color: var(--steel); font-size: 13px; }
.cg-typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.cg-typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--steel); animation: cgBlink 1.2s infinite ease-in-out; }
.cg-typing span:nth-child(2) { animation-delay: 0.15s; }
.cg-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cgBlink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
.cg-ctas { display: flex; flex-direction: column; gap: 8px; align-self: flex-start; max-width: 88%; width: 260px; }
.cg-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px;
  font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px; min-height: 44px; transition: background 200ms, color 200ms, gap 200ms;
}
.cg-cta.primary { background: var(--gold); color: var(--on-gold); }
.cg-cta.primary:hover { background: var(--gold-hover); gap: 12px; }
.cg-cta.ghost { background: transparent; border: 1px solid var(--hair-2); color: var(--ink); }
.cg-cta.ghost:hover { border-color: var(--gold-ink); color: var(--gold-ink); }
.cg-inputrow { display: flex; border-top: 1px solid var(--hair); background: var(--bg-dark); }
.cg-input { flex: 1; background: transparent; border: none; color: var(--ink); font-family: var(--font-body); font-size: 16px; padding: 16px 18px; min-width: 0; }
.cg-input:focus { outline: none; }
.cg-send { width: 54px; background: transparent; border: none; border-left: 1px solid var(--hair); color: var(--gold-ink); font-size: 18px; transition: background 200ms, color 200ms; }
.cg-send:hover { background: var(--gold); color: var(--on-gold); }
@media (min-width: 1024px) {
  .cg { right: 20px; bottom: 20px; width: min(400px, calc(100vw - 32px)); max-height: min(600px, calc(100vh - 96px)); }
}

/* Footer clearance for fixed mobile CTA + FAB */
@media (max-width: 1023px) { footer { padding-bottom: 108px; } }

/* ════════════════════════════════════════════════════════════════
   MOBILE HERO POLISH (≤767px only — desktop untouched)
   Declutter the first screen: drop the pill + sub, shrink the CTA,
   rebalance spacing so more of the video shows through.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .hero-eyebrow { display: none; }              /* hide "every stage" pill */
  .hero-sub { display: none; }                  /* hide sub-paragraph */
  .hero h1 { margin-top: 0; }                   /* h1 is now first — no top gap */
  .hero-cta-row { margin-top: 26px; }
  /* smaller hero Join button so the background video breathes */
  .hero-cta-row .btn-primary.lg { padding: 14px 22px; font-size: 12px; min-height: 44px; }
}

/* ── Launch Desk FAB — bot-like glow + live dot, lifts for sticky CTA ── */
@media (max-width: 1023px) {
  .cg-fab { animation: fabGlow 2.6s ease-in-out infinite; }
  .cg-fab::after {
    content: ""; position: absolute; top: -3px; right: -3px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--live); border: 2px solid var(--bg-card);
  }
  /* when the sticky Join bar is showing, raise the FAB above it */
  .mobile-cta.show ~ .cg-fab { bottom: 92px; }
}
@keyframes fabGlow {
  0%, 100% { box-shadow: 0 16px 40px -12px var(--shadow-ink), 0 0 0 0 rgba(232,184,48,0.55); }
  50%      { box-shadow: 0 16px 40px -12px var(--shadow-ink), 0 0 0 12px rgba(232,184,48,0); }
}

/* ── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-poster { z-index: 1; }
  .rotor-word, .ce-caret, .ticker-track, .cg-dot, .cg-typing span { animation: none; transition: none; }
  .brick { transition: none !important; animation: none !important; transform: none; }
  .mw { transition: none; opacity: 1; }
  .cx-card, .cx-pill { transition: none; }
  .lv-zero { transform: none; opacity: 1; }
  #ledger.settled .lv-zero { animation: none; }
  .ledger-verdict { opacity: 1; transform: none; transition: none; }
  .ai-col.new .ai-row, .ai-col.old .ai-row .v::after { transition: none; }
}

 BLOCK BELOW INTO assets/css/home.css AS-IS.
     MOVE THE <script> BLOCK AT THE BOTTOM INTO assets/js/home.js.
     ══════════════════════════════════════════════════════════════════ -->

<style>
/* ═══════════════════════════════════════════════════════════════════
   ACCELERATORS — "The Collection" cards
   Replaces .curr-levels (Level 01/02/03) and the whole .segmenter
   section. Mobile-first; three columns from 1024px up.
   ═══════════════════════════════════════════════════════════════════ */
.accel { padding: 64px 0 72px; background: var(--bg); }

.accel-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 30px; }

/* ── flip shell ─────────────────────────────────────────────────── */
.ac-flip { perspective: 2000px; }
.ac-card3d {
  position: relative; display: grid; min-height: 100%;
  transform-style: preserve-3d; transition: transform 750ms cubic-bezier(.2,.7,.25,1);
}
.ac-flip.flipped .ac-card3d { transform: rotateY(180deg); }
.ac-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ac-face.back { transform: rotateY(180deg); }

/* ── card body ──────────────────────────────────────────────────── */
.ac-box {
  position: relative; border: 1px solid var(--hair); border-radius: 2px; overflow: hidden;
  background: linear-gradient(180deg, rgba(232,184,48,.06), transparent 40%), var(--bg-card);
  transition: border-color 260ms; display: flex; flex-direction: column;
}
.ac-flip:hover .ac-box { border-color: var(--gold-line); }
.ac-spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 42px;
  border-right: 1px solid var(--hair); background: var(--bg-dark);
  display: flex; align-items: center; justify-content: center;
}
.ac-spine span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-hero); font-weight: 700; font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold-ink); white-space: nowrap;
}
.ac-inner { padding: 24px 20px 22px 62px; display: flex; flex-direction: column; flex: 1; }
.ac-pushdown { margin-top: auto; }

.ac-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ac-code { font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--steel-dim); margin-bottom: 8px; }
.ac-name { font-family: var(--font-hero); font-weight: 700; font-size: 26px; letter-spacing: -.02em; line-height: 1.05; }
.ac-promise { font-size: 14px; line-height: 1.6; margin-top: 16px; }

/* tier badge */
.ac-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; padding: 6px 11px; border-radius: 2px;
  border: 1px solid var(--gold-line); color: var(--gold-ink); background: var(--gold-tint); white-space: nowrap;
}
.ac-badge.free { border-color: var(--hair-2); color: var(--steel); background: none; }

/* "You walk away with" — the approved front-face fill */
.ac-away { margin-top: 24px; }
.ac-away ul { list-style: none; display: grid; gap: 11px; margin-top: 4px; }
.ac-away li { font-size: 12.5px; line-height: 1.5; color: var(--steel); display: flex; gap: 10px; align-items: baseline; }
.ac-away li::before { content: "\2713"; color: var(--gold-ink); font-size: 11px; flex-shrink: 0; }

/* stat line */
.ac-line { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.ac-line .v { font-family: var(--font-hero); font-weight: 700; font-size: 16px; }
.ac-line .k { font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-dim); margin-top: 3px; }

/* BFA guarantee */
.ac-guar {
  margin-top: 20px; padding: 14px 14px 15px; border-radius: 2px;
  border: 1px solid var(--gold-line); background: var(--gold-tint);
  container-type: inline-size;   /* lets the promise size itself off the card width */
}
.ac-guar .glab {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 9px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink);
}
.ac-guar .glab svg { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* The promise must ALWAYS be one line on all three cards, at every width.
   4.9cqw is derived from the longest string (~19.7em wide in Space Grotesk
   Bold), so the type shrinks to fit rather than wrapping. Capped at 14.5px.
   If the copy gets LONGER than "You'll learn how to automate and scale it."
   lower 4.9cqw proportionally. */
.ac-guar p {
  font-family: var(--font-hero); font-weight: 700; line-height: 1.35;
  letter-spacing: -.01em; color: var(--ink); margin-top: 9px;
  font-size: min(14.5px, 4.9cqw); white-space: nowrap;
}

.ac-cta { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
/* no trailing arrow on the accelerator buttons... the tier badge and the
   guarantee already carry the momentum, the arrow just adds noise */
.ac-cta .btn-primary::after, .ac-backcta .btn-primary::after { content: none; }

/* ── back face ──────────────────────────────────────────────────── */
.ac-backtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); }
.ac-backname { font-family: var(--font-hero); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.ac-close {
  background: none; border: 1px solid var(--hair-2); border-radius: 2px; cursor: pointer;
  color: var(--steel); font-family: var(--font-body); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; padding: 7px 10px; transition: color 200ms, border-color 200ms;
}
.ac-close:hover { color: var(--gold-ink); border-color: var(--gold-line); }
.ac-sec { padding-top: 18px; }
.ac-lab { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--steel-dim); margin-bottom: 11px; }

.ac-enroll { margin-top: 2px; }
.ac-enroll .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.ac-enroll .row:last-child { border-bottom: none; }
.ac-enroll .k { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--steel-dim); }
.ac-enroll .v { font-family: var(--font-hero); font-weight: 600; font-size: 12.5px; text-align: right; }
.ac-enroll .row.tuition { align-items: flex-start; padding: 12px 0; }
.ac-enroll .v .amt { font-family: var(--font-hero); font-weight: 700; font-size: 17px; letter-spacing: -.01em; display: block; }
.ac-enroll .v .amt sub { font-size: 11px; font-weight: 500; color: var(--steel); letter-spacing: 0; vertical-align: baseline; bottom: 0; }
.ac-enroll .v .fomo {
  display: inline-block; margin-top: 7px; font-family: var(--font-body); font-weight: 700;
  font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink);
  border: 1px solid var(--gold-line); background: var(--gold-tint); padding: 4px 7px; border-radius: 2px;
  animation: acFomoPulse 2.6s ease-in-out infinite;
}
.ac-enroll .v .fine { display: block; margin-top: 7px; font-family: var(--font-body); font-weight: 400; font-size: 10.5px; line-height: 1.45; color: var(--steel-dim); letter-spacing: 0; max-width: 190px; margin-left: auto; }
@keyframes acFomoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,184,48,0); border-color: var(--gold-line); }
  50%      { box-shadow: 0 0 12px 1px rgba(232,184,48,.32); border-color: var(--gold-ink); }
}
@media (prefers-reduced-motion: reduce) { .ac-enroll .v .fomo { animation: none; } }

.ac-preview {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink); text-decoration: none; transition: gap 200ms;
}
.ac-preview:hover { gap: 13px; }
.ac-backcta { margin-top: 18px; }
.ac-backcta .btn-primary { width: 100%; }

/* ── desktop ────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .accel { padding: 96px 0 104px; }
  .accel-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
  .ac-inner { padding: 28px 24px 26px 66px; }
  /* Side by side, each taking half the card. Tighter horizontal padding and
     nowrap so neither button can drop to a second line in a narrow column,
     which would knock the three cards out of alignment. */
  .ac-cta { flex-wrap: nowrap; }
  .ac-cta .btn-primary, .ac-cta .btn-ghost {
    flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; white-space: nowrap;
  }
}

/* ════════════════════════════════════════════════════════════════
   TWEAK PASS — 2026-07-31
   ════════════════════════════════════════════════════════════════ */

/* ── AI compare: manufacturing-time caveat ───────────────────── */
.ai-note { margin-top: 14px; font-size: 11.5px; line-height: 1.5; color: var(--steel-dim); letter-spacing: 0.01em; }
@media (min-width: 768px) { .ai-note { margin-top: 18px; font-size: 12px; } }

/* ── "Built by founders. Built for founders." — the two words trade
      places on a loop. Both slots are locked to the width of the wider
      word so "Built" and "founders" never move. ─────────────────── */
.swapline .swap {
  /* Both words occupy the SAME grid cell, so the slot is exactly as wide as
     the wider word ("for") and as tall as a normal line. Nothing around it
     can move, and no absolute positioning means the baseline stays put. */
  display: inline-grid; vertical-align: baseline; color: var(--gold-ink);
}
.swapline .swap i {
  grid-area: 1 / 1; font-style: normal; text-align: center;
}
.swapline .swap i.a { animation: swapOut 6s ease-in-out infinite; }
.swapline .swap i.b { animation: swapIn  6s ease-in-out infinite; }
@keyframes swapOut {
  0%, 42%   { opacity: 1; transform: translateY(0); }
  50%, 92%  { opacity: 0; transform: translateY(-0.34em); }
  100%      { opacity: 1; transform: translateY(0); }
}
@keyframes swapIn {
  0%, 42%   { opacity: 0; transform: translateY(0.34em); }
  50%, 92%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(0.34em); }
}
@media (prefers-reduced-motion: reduce) {
  .swapline .swap i.a { animation: none; opacity: 1; transform: none; }
  .swapline .swap i.b { animation: none; opacity: 0; }
}

/* ── Accelerator tier badges — a visible value ladder ─────────── */
/* FREE = quietest: hairline, steel type, no fill. */
.ac-badge.free { border-color: var(--hair-2); color: var(--steel); background: none; }
/* PREMIUM = gold outline on a gold wash. */
.ac-badge.premium { border-color: var(--gold-line); color: var(--gold-ink); background: var(--gold-tint); }
/* VIP = solid gold, inverted type, soft halo. Highest contrast on the page. */
.ac-badge.vip {
  border-color: var(--gold); background: var(--gold); color: var(--on-gold);
  box-shadow: 0 0 0 1px rgba(232,184,48,.28), 0 0 18px -4px rgba(232,184,48,.65);
}

/* ── Launch Desk FAB — same glow + live dot on desktop ────────── */
.cg-fab { animation: fabGlow 2.6s ease-in-out infinite; }
.cg-fab::after {
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--live); border: 2px solid var(--bg-card);
}
@media (prefers-reduced-motion: reduce) { .cg-fab { animation: none; } }

/* ── Curriculum, desktop only: reel moves to the right column and
      auto-plays; heading, stats and a louder CTA stack on the left.
      Everything is sized to fit one screen without scrolling. ──── */
@media (min-width: 1024px) {
  .curr { padding: 76px 0 84px; }
  .curr .container {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
    column-gap: 56px;
  }
  .curr .section-head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .curr .section-head h2 { font-size: clamp(30px, 3.2vw, 44px); margin-top: 14px; }
  .curr .section-head .sub { font-size: 15px; margin-top: 14px; }
  .curr-stats { grid-column: 1; grid-row: 2; grid-template-columns: repeat(2, 1fr); margin-top: 28px; align-self: start; }
  .curr-stat { padding: 18px 20px; }
  .curr-stat .n { font-size: clamp(24px, 2.2vw, 32px); }
  .curr-cta { grid-column: 1; grid-row: 3; margin-top: 26px; align-self: start; }
  /* The reel must keep an EXPLICIT height. It's a clipped window over a very
     long track, so height:100% or stretch lets it grow to the full track
     length and the section runs off the page. Viewport units keep it right
     on a laptop and on a big external monitor without a second breakpoint. */
  .curr .container { align-items: start; }
  .curr-reel { grid-column: 2; grid-row: 1 / span 3; display: block; }
  .curr-reel .reel-frame { margin-top: 0; height: clamp(380px, 56vh, 580px); }
  /* make the one link out of this section impossible to miss */
  .curr-cta .btn-ghost {
    background: var(--gold); border-color: var(--gold); color: var(--on-gold);
    font-weight: 700; padding: 17px 28px; font-size: 12.5px;
    box-shadow: 0 0 26px -8px rgba(232,184,48,.6);
    transition: background 200ms, box-shadow 200ms, transform 200ms;
  }
  .curr-cta .btn-ghost:hover {
    background: var(--gold-hover); transform: translateY(-1px);
    box-shadow: 0 0 34px -6px rgba(232,184,48,.8);
  }
}

/* ── Founder rail: slow auto-advance on desktop, paused on hover.
      scroll-snap MUST be off while it plays... x mandatory snaps the rail
      back to the nearest card on every sub-pixel nudge, which is why the
      autoplay looked dead. Suppressed under 1024px. ─────────────── */
.ugc-rail.autoplay { scroll-behavior: auto; scroll-snap-type: none; }
.ugc-rail.autoplay .ugc-card { scroll-snap-align: none; }

/* ── Lead magnet: what's inside the pack ─────────────────────── */
.pp-list { list-style: none; margin-top: 20px; display: grid; gap: 9px; position: relative; }
.pp-list li { font-size: 13.5px; line-height: 1.5; color: var(--steel); display: flex; gap: 10px; align-items: baseline; }
.pp-list li::before { content: "\2713"; color: var(--gold-ink); font-size: 11px; flex-shrink: 0; }
@media (min-width: 768px) { .pp-list { grid-template-columns: 1fr 1fr; gap: 10px 26px; } }

/* ════════════════════════════════════════════════════════════════
   WORK WITH US — "working session" laptop
   The screen is built in HTML/CSS, not generated: AI renders of real
   interfaces come out garbled and read as fake, which is the exact
   thing this section can't afford. The two people ARE generated...
   silent looping webcam clips sitting in the call tiles.
   ════════════════════════════════════════════════════════════════ */
/* ═══ V2 of the coded mockup — real numbers, real labels, denser UI ═══ */
.meet2 { border: 1px solid var(--hair-2); border-radius: 2px; background: var(--bg-card); overflow: hidden; }
.m2-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--hair); background: #16161A; }
.m2-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #E5484D;
  display: inline-block; flex-shrink: 0;
  animation: pulseLive 2s infinite ease-in-out;
}
.m2-title { font-size: 11px; color: var(--steel); }
.m2-right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--steel-dim); }
.m2-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--hair-2); border-radius: 999px; padding: 3px 10px; font-size: 10px;
}

.m2-stage { display: grid; grid-template-columns: 1fr 128px; gap: 8px; padding: 8px; background: #0B0B0D; }

.m2-share { position: relative; border: 1px solid var(--hair); border-radius: 2px; background: #101014; overflow: hidden; }
.m2-chrome { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #17171B; border-bottom: 1px solid var(--hair); }
.m2-chrome b { width: 6px; height: 6px; border-radius: 50%; background: #2E2E34; display: block; }
.m2-addr { flex: 1; margin-left: 8px; background: #0E0E11; border: 1px solid var(--hair); border-radius: 3px; padding: 3px 8px; font-size: 9.5px; color: var(--steel-dim); letter-spacing: .02em; }
.m2-body { display: grid; grid-template-columns: 118px 1fr; }
.m2-nav { border-right: 1px solid var(--hair); padding: 9px 7px; display: grid; gap: 1px; align-content: start; background: #0E0E11; }
.m2-nav a { font-size: 9.5px; color: var(--steel-dim); padding: 5px 7px; border-radius: 2px; text-decoration: none; }
.m2-nav a.on { background: rgba(232,184,48,.10); color: var(--gold-ink); }
.m2-main { padding: 11px; display: grid; gap: 9px; }
.m2-h { display: flex; align-items: baseline; justify-content: space-between; }
.m2-h span { font-size: 11px; color: var(--ink); font-weight: 700; }
.m2-h em { font-style: normal; font-size: 9.5px; color: var(--steel-dim); }
.m2-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m2-kpi { border: 1px solid var(--hair); border-radius: 2px; padding: 7px 8px; background: #0E0E11; }
.m2-kpi .k { font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-dim); }
.m2-kpi .v { font-family: var(--font-hero); font-weight: 700; font-size: 15px; margin-top: 4px; color: var(--ink); }
.m2-kpi .d { font-size: 9px; margin-top: 3px; color: var(--live); }
.m2-kpi .d.down { color: #E5484D; }
.m2-chart { border: 1px solid var(--hair); border-radius: 2px; padding: 9px; background: #0E0E11; position: relative; }
.m2-chart svg { width: 100%; height: 52px; display: block; }
.m2-chart .grid line { stroke: rgba(156,156,160,.10); stroke-width: 1; }
.m2-chart .area { fill: rgba(232,184,48,.10); }
.m2-chart .line { fill: none; stroke: var(--gold-ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.m2-xlab { display: flex; justify-content: space-between; margin-top: 5px; font-size: 8px; color: var(--steel-dim); letter-spacing: .04em; }
.m2-tbl { border: 1px solid var(--hair); border-radius: 2px; background: #0E0E11; overflow: hidden; }
.m2-tr { display: grid; grid-template-columns: 1.4fr 1fr .8fr .8fr; gap: 8px; padding: 6px 9px; font-size: 9.5px; color: var(--steel); border-bottom: 1px solid var(--hair); }
.m2-tr:last-child { border-bottom: none; }
.m2-tr.head { color: var(--steel-dim); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; background: #121216; }
.m2-tr .num { color: var(--ink); font-family: var(--font-hero); font-weight: 600; }
.m2-tag { position: absolute; left: 9px; bottom: 9px; font-size: 8.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); background: rgba(0,0,0,.82); border: 1px solid var(--gold-line); padding: 3px 7px; border-radius: 2px; }

.m2-people { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.m2-tile { position: relative; border: 1px solid var(--hair); border-radius: 2px; overflow: hidden; min-height: 88px; background: #17171B; }
.m2-tile.speaking { border-color: var(--gold-line); box-shadow: inset 0 0 0 2px rgba(232,184,48,.22); }
.m2-tile img, .m2-tile video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 34%;            /* faces sit high in a webcam crop */
  filter: saturate(.92) contrast(1.02); /* video-call compression, very light */
}
.m2-ph { position: absolute; inset: 0; }
.m2-ph.advisor { background: linear-gradient(160deg, #6B5A2A, #2A2620); }
.m2-ph.founder { background: linear-gradient(160deg, #3A3F49, #1E2126); }
.m2-ph::before { content: ""; position: absolute; left: 50%; top: 15%; width: 32%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: rgba(0,0,0,.34); }
.m2-ph::after { content: ""; position: absolute; left: 50%; bottom: -20%; width: 72%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50% 50% 42% 42%; background: rgba(0,0,0,.34); }
.m2-name { position: absolute; left: 6px; bottom: 6px; z-index: 2; font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.68); padding: 2px 6px; border-radius: 2px; }
.m2-wave { position: absolute; right: 6px; top: 6px; z-index: 2; display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.m2-wave i { width: 2px; background: var(--gold-ink); border-radius: 1px; animation: mtWave 1s ease-in-out infinite; }
.m2-wave i:nth-child(1) { height: 40%; } .m2-wave i:nth-child(2) { height: 100%; animation-delay: .15s; } .m2-wave i:nth-child(3) { height: 62%; animation-delay: .3s; }

.m2-cap { padding: 12px 14px; border-top: 1px solid var(--hair); background: #16161A; }
.m2-cap .who { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 5px; }
.m2-cap .say { font-size: 13px; line-height: 1.55; color: var(--steel); }
@media (max-width: 640px) {
  .m2-stage { grid-template-columns: 1fr 88px; }
  .m2-body { grid-template-columns: 76px 1fr; }
  .m2-tile { min-height: 72px; }
}

/* The screen alone, no device frame. Capped narrower than the column so the
   left side balances against the form card on the right. */
.meet-wrap { margin-top: 26px; }
.meet2 { box-shadow: 0 24px 60px -30px rgba(0,0,0,.9); }
@media (min-width: 1024px) { .meet-wrap { max-width: 500px; } }
@media (prefers-reduced-motion: reduce) {
  .m2-dot, .m2-wave i { animation: none; }
  .m2-tile video { display: none; }
}


/* ── Hero pill retired on every breakpoint ───────────────────── */
.hero-eyebrow { display: none !important; }

/* ── Anchor landings: the section's own top padding was leaving the
      cards low in the viewport and clipping the CTAs. Pull the scroll
      target down past most of that padding. ───────────────────── */
@media (min-width: 1024px) {
  #accelerators { scroll-margin-top: -56px; }
  #workwith     { scroll-margin-top: -48px; }
  #curriculum   { scroll-margin-top: -24px; }
}

/* ── Lead magnet: copy left, cover right, both vertically centred ── */
.pp-cover { margin: 26px 0 0; }
.pp-cover img { width: 100%; max-width: 300px; height: auto; border-radius: 2px; display: block; margin: 0 auto; }
.pp-list { list-style: none; margin-top: 20px; display: grid; gap: 9px; position: relative; }
.pp-list li { font-size: 13.5px; line-height: 1.5; color: var(--steel); display: flex; gap: 10px; align-items: baseline; }
.pp-list li::before { content: "\2713"; color: var(--gold-ink); font-size: 11px; flex-shrink: 0; }
.sf-card h3 { margin-top: 16px; text-wrap: initial; }

/* email + button on one row as soon as there's room for it */
@media (min-width: 560px) {
  .startfree .namegen-form { flex-direction: row; align-items: stretch; gap: 10px; max-width: 560px; }
  .startfree .namegen-form .ng-input { flex: 1 1 auto; }
  .startfree .namegen-form .btn-primary { flex: 0 0 auto; width: auto; margin-top: 0; white-space: nowrap; }
}

@media (min-width: 900px) {
  /* the 680px cap was squeezing the copy into a narrow column and
     wrapping the headline four lines deep */
  .sf-card {
    max-width: 1080px;
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 60px; align-items: center;
    padding: 44px 40px;
  }
  .sf-copy { grid-column: 1; }
  .pp-cover { grid-column: 2; margin: 0; }
  .pp-cover img { max-width: 320px; }
  .pp-list { grid-template-columns: 1fr; gap: 10px; }
  .sf-card h3 { font-size: clamp(30px, 3vw, 42px); }
}


/* ── Founding enrollment, MOBILE ONLY (<=767px) ───────────────────
   The value card carries the argument, so it comes before the button:
   headline, then the card, then the CTA. The long paragraph is dropped
   because it repeats what the card already itemises. Desktop untouched. */
.op-h-m { display: none; }
@media (max-width: 767px) {
  .oneplace-grid { display: flex; flex-direction: column; gap: 30px; }
  .op-copy     { order: 1; }
  .op-receipt  { order: 2; }
  .oneplace-cta{ order: 3; margin-top: 0; }
  .oneplace-body { display: none; }
  .op-h-d { display: none; }
  .op-h-m { display: block; }
  .oneplace h2 { max-width: none; }
  .oneplace-cta .btn-primary { width: 100%; }
}


/* ── Mobile spacing + sticky CTA size ────────────────────────────
   Desktop keeps its original padding and bar size. */
@media (max-width: 767px) {
  /* 76px + 90px of stacked section padding was leaving a dead band
     between Work With Us and the closing section */
  .workwith { padding-bottom: 48px; }
  .final { padding-top: 56px; }
}
@media (max-width: 1023px) {
  /* The bar grew whenever Safari collapsed its toolbar, because the full
     safe-area inset was added on top of the padding. Trim both. */
  .mobile-cta {
    font-size: 12.5px;
    padding: 13px 20px calc(12px + env(safe-area-inset-bottom) * 0.55);
  }
}