/* EOE site styles.
   Plain CSS with tokens (no build step, so the folder deploys as-is).
   Look: shadcn/ui conventions in plain CSS (2026-10-09). The rules that set it are in the "shadcn layer" block at the bottom of this file.
   Radius rule: cards 12px; buttons, inputs and answer choices 8px; badges are pills.
   One theme for everyone (changed 2026-10-09): near-black maroon page (#0c0102). Cards are almost the same color and are set off by a faint white border, not a lighter red. Text is white. Red (#b01018) is only for buttons and the headline highlight.
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #0c0102;
  --surface: #120204;
  --surface-2: #1b0407;
  --text: #ffffff;
  --muted: #d6cccd;
  --line: rgb(255 255 255 / .13);
  --accent: #b01018;
  --accent-ink: var(--text);
  --on-accent: #ffffff;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 16px 40px -16px rgb(0 0 0 / .6);

  --display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 12px;
  --radius-md: 8px;
  --ring: rgb(255 255 255 / .3);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .35);
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* z-index scale */
  --z-header: 10;
  --z-stickybar: 20;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, iframe, video { display: block; max-width: 100%; }
a { color: var(--text); text-decoration-color: var(--muted); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.icon { width: 1.25em; height: 1.25em; flex: none; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.75rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.2; }
p { margin: 0; }
.lede { color: var(--muted); font-size: 1.125rem; max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; line-height: 1.55; }

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: var(--z-header);
  height: 68px;
  display: flex;
  align-items: center;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}
.wordmark b { font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; }
.wordmark span { font-size: 0.875rem; color: var(--muted); }
@media (max-width: 480px) { .wordmark span { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 1.0625rem/1 var(--body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
  box-shadow: 0 0 24px -4px rgb(176 16 24 / .7);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; filter: brightness(1.1); box-shadow: 0 0 30px -2px rgb(176 16 24 / .85); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn .icon { transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn-sm { min-height: 42px; padding: 0 20px; font-size: 0.9375rem; }
.btn-ghost {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--muted); }

/* ---------- Hero (VSL) ----------
   Centered on purpose: on a VSL page the video is the design and the whole job
   is "watch, then apply", so everything stacks on one axis. */
.hero { padding: 4px 0 72px; text-align: center; }
.hero .eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.hero h1 { max-width: 23ch; margin: 0 auto; font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.3rem); }
.hero .lede { margin: 16px auto 0; max-width: 44ch; }
.vsl {
  position: relative;
  width: 100%;
  max-width: min(780px, calc((100dvh - 410px) * 16 / 9));
  margin: 24px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}
.vsl iframe { width: 100%; height: 100%; border: 0; }
.hero .cta-row { margin-top: 24px; }

/* Application form on the main page, under the video */
.apply-inline { margin-top: 56px; scroll-margin-top: 24px; }
.apply-inline .apply { margin-top: 28px; }

/* Trust badge: top of the hero, above the headline (Garrett's call) */
.trust {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  width: fit-content; max-width: 100%;
  margin: 0 auto 18px;
  padding: 8px 18px 8px 8px;
  gap: 12px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.trust-icon {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); color: var(--text);
}
.trust-icon .icon { width: 20px; height: 20px; }
.trust p { font-size: 0.9375rem; text-align: left; line-height: 1.35; color: var(--muted); }
.trust-text { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.trust-text p { text-align: center; }
.stars { display: inline-flex; gap: 2px; color: var(--accent-ink); }
.stars .icon { width: 15px; height: 15px; }
.trust strong { font-family: var(--display); font-weight: 700; color: var(--text); letter-spacing: -0.01em; }

/* Placeholder slots for real assets that don't exist yet */
.slot {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgb(127 127 127 / .06) 12px 24px),
    var(--surface-2);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
}
.slot .icon { width: 40px; height: 40px; color: var(--muted); }
.slot strong { color: var(--text); font-weight: 600; }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section + .section { padding-top: clamp(24px, 4vw, 48px); }

/* The math: stat-led split */
.math { display: grid; gap: 40px; align-items: center; }
.stat {
  padding: 36px 32px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.stat .num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(4rem, 2.5rem + 6vw, 7rem);
  letter-spacing: -0.05em;
  line-height: 0.95;
  color: var(--accent-ink);
}
.stat .num small { font-size: 0.45em; letter-spacing: -0.02em; }
.stat p { margin-top: 12px; color: var(--muted); max-width: 30ch; }
.stat .src { margin-top: 20px; font-size: 0.8125rem; }
.math .copy h2 { max-width: 16ch; }
.math .copy p { margin-top: 18px; max-width: 54ch; }
@media (min-width: 900px) {
  .math { grid-template-columns: 5fr 7fr; gap: 72px; }
}

/* How it works: three-verb flow under the math */
.flow { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 20px; }
.flow li:not(.flow-arrow) { padding-top: 4px; }
.flow h3 { font-size: 1.5rem; }
.flow p { margin-top: 6px; color: var(--muted); max-width: 32ch; }
.flow-arrow { display: none; }
@media (min-width: 900px) {
  .flow { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 24px; align-items: start; }
  .flow-arrow { display: block; padding-top: 22px; color: var(--muted); }
  .flow-arrow .icon { width: 22px; height: 22px; }
}

/* Proof: masonry of dated screenshots */
.proof-head { max-width: 640px; }
.proof-head p { margin-top: 14px; }
.masonry { margin-top: 40px; columns: 2; column-gap: 12px; }
.masonry > * { break-inside: avoid; margin-bottom: 12px; }
@media (max-width: 639px) { .masonry .slot { font-size: 0.75rem; padding: 10px; } .masonry .slot .icon { width: 28px; height: 28px; } }
.masonry .slot { height: auto; }
.masonry .tall { aspect-ratio: 9 / 16; }
.masonry .mid { aspect-ratio: 4 / 5; }
.masonry .wide { aspect-ratio: 4 / 3; }
@media (min-width: 640px) { .masonry { column-gap: 16px; } .masonry > * { margin-bottom: 16px; } }
@media (min-width: 960px) { .masonry { columns: 3; } }
.disclaimer-note {
  margin-top: 8px;
  padding: 14px 18px;
  background: var(--surface);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--muted);
  max-width: 720px;
}

/* Founder: image + story split */
.founder { display: grid; gap: 36px; align-items: center; }
.founder .photo { aspect-ratio: 4 / 5; max-width: 460px; }
.founder .copy p { margin-top: 18px; max-width: 52ch; }
.founder .handle {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px; font-weight: 600; color: var(--text); text-decoration: none;
}
.founder .handle:hover { text-decoration: underline; }
.todo {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.875rem;
}
@media (min-width: 900px) {
  .founder { grid-template-columns: 5fr 6fr; gap: 72px; }
}

/* What you get: bento, 5 items, 5 cells */
.bento { margin-top: 40px; display: grid; gap: 16px; grid-template-columns: 1fr; }
.cell {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
.cell .icon { width: 30px; height: 30px; color: var(--text); margin-bottom: 6px; }
.cell p { color: var(--muted); }
.cell .tag { margin-top: auto; padding-top: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.cell-main { background: var(--surface-2); box-shadow: none; }
.cell-main h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); }
.cell-soft { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell-main { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .bento { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; }
  .cell-main { grid-column: 1; grid-row: 1 / span 2; justify-content: flex-end; min-height: 380px; }
}

/* Fit check: two lists */
.fit { margin-top: 40px; display: grid; gap: 16px; }
.fit-col { padding: 28px; border-radius: var(--radius); background: var(--surface); }
.fit-col h3 { margin-bottom: 16px; }
.fit-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fit-col li { display: flex; gap: 12px; align-items: flex-start; }
.fit-col li .icon { margin-top: 3px; }
.fit-yes .icon { color: var(--text); }
.fit-no { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.fit-no .icon { color: var(--muted); }
@media (min-width: 820px) { .fit { grid-template-columns: 1fr 1fr; } }

/* Guarantee band */
.guarantee {
  display: grid; gap: 20px; align-items: center;
  padding: clamp(28px, 5vw, 48px);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.guarantee .icon { width: 56px; height: 56px; color: var(--accent-ink); }
.guarantee p { margin-top: 12px; max-width: 58ch; }
@media (min-width: 760px) { .guarantee { grid-template-columns: auto 1fr; gap: 32px; } }

/* FAQ accordion */
.faq { margin-top: 32px; max-width: 780px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--muted); transition: transform .3s var(--ease); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { padding: 0 0 22px; color: var(--muted); max-width: 64ch; }

/* Closing CTA */
.closer { text-align: left; }
.closer h2 { max-width: 18ch; }
.closer p { margin-top: 16px; }
.closer .btn { margin-top: 28px; }
.closer-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.closer-note .icon { color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { padding: 40px 0 56px; font-size: 0.875rem; color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 18px; }
.site-footer nav a { color: var(--text); text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer p + p { margin-top: 10px; }
.site-footer .fine { max-width: 80ch; }

/* ---------- Mobile sticky apply bar ---------- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-stickybar);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
}
.stickybar .btn { width: 100%; }
.stickybar.show { transform: translateY(0); }
@media (min-width: 760px) { .stickybar { display: none; } }

/* ---------- Funnel step pages (apply, book, discord, confirmed) ---------- */
.step { padding: 24px 0 80px; }
.step-head { max-width: 640px; }
.step-head p { margin-top: 14px; }
.embed {
  margin-top: 32px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  display: grid;
}
.embed-form { height: min(720px, 80dvh); }
.embed-form > div { width: 100%; height: 100%; }
.embed-cal { min-height: 420px; }
.embed-cal .calendly-inline-widget { min-width: 320px; min-height: 420px; }
.embed .slot { min-height: 420px; border-radius: 0; border: 0; }
.next-steps { margin-top: 40px; display: grid; gap: 16px; max-width: 760px; }
.next-steps div { display: flex; gap: 14px; align-items: flex-start; }
.next-steps .icon { width: 26px; height: 26px; color: var(--text); margin-top: 2px; }
.next-steps strong { display: block; font-family: var(--display); font-size: 1.125rem; letter-spacing: -0.01em; }
.center-card {
  max-width: 620px;
  margin: 24px auto 0;
  padding: clamp(28px, 5vw, 48px);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.center-card .icon-lg { width: 48px; height: 48px; color: var(--text); margin-bottom: 18px; }
.center-card p { margin-top: 14px; }
.center-card .btn { margin-top: 28px; }

/* ---------- Legal pages ---------- */
.legal { padding: 24px 0 96px; }
.legal article { max-width: 720px; }
.legal h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); }
.legal .updated { margin-top: 10px; color: var(--muted); font-size: 0.875rem; }
.legal h2 { font-size: 1.25rem; margin-top: 36px; letter-spacing: -0.01em; }
.legal p, .legal ul { margin-top: 14px; }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }

/* ---------- Motion ----------
   Hero enters in order (headline, then video, then button) so the eye lands on the
   video before the ask. Sections below fade up once as they arrive. Both switch off
   for anyone who has reduced motion turned on. */
@media (prefers-reduced-motion: no-preference) {
  .enter { opacity: 0; transform: translateY(16px); animation: enter .8s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 110ms); }
  @keyframes enter { to { opacity: 1; transform: none; } }
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  .stickybar { transition: none; }
}

/* ---------- Centered layout (Garrett's call, 2026-09-30) ----------
   Headings, copy and section blocks sit on the center line. Lists, FAQ answers and
   long legal text stay left-aligned inside their centered box, because centered
   multi-line lists are hard to read. */
.section { text-align: center; }
.section p, .section h2, .proof-head, .founder .copy p { margin-left: auto; margin-right: auto; }
.math, .founder { grid-template-columns: 1fr !important; justify-items: center; gap: 40px; }
.math .copy h2, .founder .copy h2 { margin-left: auto; margin-right: auto; }
.stat { width: 100%; max-width: 460px; }
.stat p { margin-left: auto; margin-right: auto; }
.founder .photo { width: 100%; max-width: 380px; }
.flow { max-width: 960px; margin-left: auto; margin-right: auto; }
.flow p { margin-left: auto; margin-right: auto; }
.masonry { text-align: left; }
.disclaimer-note { margin: 8px auto 0; text-align: left; }
.cell { align-items: center; text-align: center; }
.cell-main { justify-content: center !important; }
.fit { max-width: 960px; margin-left: auto; margin-right: auto; }
.fit-col { text-align: left; }
.fit-col h3 { text-align: center; }
.guarantee { grid-template-columns: 1fr !important; justify-items: center; text-align: center; max-width: 760px; margin: 0 auto; }
.faq { margin-left: auto; margin-right: auto; text-align: left; }
.closer { text-align: center; }
.closer h2, .closer .lede { margin-left: auto; margin-right: auto; }
.closer-note { justify-content: center; }
.site-footer { text-align: center; }
.site-footer nav { justify-content: center; }
.site-footer .fine { margin-left: auto; margin-right: auto; }
.step-head { margin-left: auto; margin-right: auto; text-align: center; }
.step-head .lede { margin-left: auto; margin-right: auto; }
.next-steps { margin-left: auto; margin-right: auto; }
.center-card { text-align: center; }
.center-card .icon-lg { margin-left: auto; margin-right: auto; }
.center-card .lede { margin-left: auto; margin-right: auto; }

/* ---------- Application form ---------- */
.form-banner {
  max-width: 680px; margin: 24px auto 0; padding: 12px 16px;
  border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px var(--accent-ink);
  color: var(--text); font-size: 0.875rem; text-align: center;
}
.apply {
  max-width: 680px; margin: 32px auto 0;
  padding: clamp(24px, 5vw, 44px);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: left;
}
.apply-top { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.apply-progress { flex: 1; height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.apply-progress span { display: block; height: 100%; background: var(--accent-ink); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.apply-count { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.q { border: 0; margin: 0; padding: 0; min-width: 0; }
.q legend, .q .q-title {
  display: block; padding: 0; margin-bottom: 20px;
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.2;
  text-wrap: balance;
}
.choices { display: grid; gap: 10px; }
.choice {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--radius);
  box-shadow: inset 0 0 0 1.5px var(--line);
  cursor: pointer; font-weight: 500;
  transition: box-shadow .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.choice:hover { box-shadow: inset 0 0 0 1.5px var(--muted); }
.choice:active { transform: scale(0.99); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .key {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 8px;
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 0.8125rem; font-weight: 700; color: var(--muted);
}
.choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--text); background: var(--surface-2); }
.choice:has(input:checked) .key { background: var(--text); color: var(--bg); box-shadow: none; }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.apply input:not([type=radio]), .apply textarea {
  width: 100%; padding: 14px 16px;
  border: 0; border-radius: var(--radius);
  background: var(--bg); color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font: 400 1.125rem/1.5 var(--body);
  transition: box-shadow .2s var(--ease);
}
.apply textarea { resize: vertical; min-height: 120px; }
.apply input::placeholder { color: var(--muted); opacity: 1; }
.apply input:not([type=radio]):focus, .apply textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--text); }
.apply [aria-invalid=true] { box-shadow: inset 0 0 0 2px var(--accent-ink) !important; }
.q-contact .field { margin-bottom: 4px; }
.q-contact .field label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9375rem; }
.q-contact .err { min-height: 0; margin-top: 6px; }
.q-contact .err:empty { margin: 0; }
.q-contact .field + .field { margin-top: 16px; }
.apply .hint { margin-top: 10px; font-size: 0.875rem; color: var(--muted); }
.apply .err { min-height: 1.4em; margin-top: 10px; font-size: 0.875rem; font-weight: 600; color: var(--text); }
.apply .err:not(:empty)::before { content: "! "; color: var(--accent-ink); }
.apply-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.apply-nav [data-next] { margin-left: auto; }
.apply-nav .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.apply-tip { margin-top: 16px; text-align: center; }
@media (hover: none) { .apply-tip { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .q-in { animation: qin .45s var(--ease); }
  @keyframes qin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* Gift step and guide download */
.gift-done { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-weight: 600; font-size: 0.9375rem; }
.gift-done .icon { color: var(--accent-ink); }
.gift-copy { margin: -8px 0 18px; color: var(--muted); }
.guide {
  display: flex; align-items: center; gap: 14px;
  max-width: 560px; margin: 24px auto 0; padding: 16px 20px;
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
  color: var(--text); text-decoration: none; text-align: left;
}
.guide > .icon:first-child { width: 28px; height: 28px; flex: none; }
.guide > span { flex: 1; display: grid; gap: 2px; }
.guide .muted { font-size: 0.875rem; }
.guide:hover { text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--accent-ink), var(--shadow); }

/* ---------- Discord page ---------- */
.dc-hero { padding-top: 24px; }
.dc-hero .guide { margin: 0 auto 28px; }
.dc-hero .lede { margin: 16px auto 0; max-width: 46ch; }
.dc-hero .cta-row { margin-top: 28px; }

.tips { margin-top: 40px; display: grid; gap: 16px; text-align: left; }
.tip {
  position: relative; overflow: hidden;
  padding: 28px; border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
}
.tip h3 { position: relative; font-size: 1.375rem; max-width: 20ch; }
.tip p { position: relative; margin-top: 10px; color: var(--muted); max-width: 46ch; }
.tip-num {
  position: absolute; right: 18px; top: -18px;
  font-family: var(--display); font-weight: 800; font-size: 8rem; line-height: 1;
  color: var(--surface-2); letter-spacing: -0.06em; pointer-events: none;
}
.tip-main { background: var(--surface-2); box-shadow: none; }
.tip-main .tip-num { color: var(--line); }
.tip-main h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); }
@media (min-width: 900px) {
  .tips { grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; max-width: 1000px; margin-left: auto; margin-right: auto; }
  .tip-main { grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; }
}

.inside { margin: 40px auto 0; max-width: 900px; display: grid; gap: 14px; text-align: left; }
.inside-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px; border-radius: var(--radius);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.inside-item h3 { font-size: 1.125rem; }
.inside-item p { margin-top: 4px; color: var(--muted); }
.inside-icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2);
}
.inside-icon .icon { width: 22px; height: 22px; }
@media (min-width: 760px) { .inside { grid-template-columns: 1fr 1fr; } }

.proof-band {
  max-width: 820px; margin: 0 auto; padding: clamp(28px, 5vw, 48px);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.proof-line {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); line-height: 1.25; text-wrap: balance;
}
.proof-line strong { color: var(--accent-ink); font-weight: 800; }
.proof-band .handle { display: inline-flex; margin-top: 20px; }
.proof-band .small { margin-top: 14px; }

/* ---------- Booking page ---------- */
.badges {
  list-style: none; padding: 0; margin: 28px auto 0; max-width: 1000px;
  display: grid; gap: 10px; grid-template-columns: 1fr 1fr; text-align: left;
}
.badges li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px; border-radius: var(--radius);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 0.8125rem; color: var(--muted); line-height: 1.35;
}
.badges li .icon { width: 22px; height: 22px; flex: none; color: var(--text); }
.badges li:first-child .icon { color: var(--accent-ink); }
.badges strong { display: block; color: var(--text); font-size: 0.9375rem; margin-bottom: 2px; }
@media (min-width: 900px) { .badges { grid-template-columns: repeat(4, 1fr); } }
.step .step-head .trust { margin-bottom: 18px; }
.embed-cal { scroll-margin-top: 24px; }

/* Money section: the stat is a small strip inside the section, under the headline */
.math .copy { max-width: 720px; }
.stat-mini {
  display: flex; align-items: center; gap: 18px;
  max-width: 560px; margin: 24px auto 26px; padding: 14px 20px;
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
  text-align: left;
}
.stat-mini .num {
  flex: none; font-family: var(--display); font-weight: 800;
  font-size: 2.25rem; letter-spacing: -0.04em; line-height: 1; color: var(--accent-ink);
}
.stat-mini .stat-text { font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
.stat-mini .src { display: block; margin-top: 4px; font-size: 0.75rem; }
@media (max-width: 480px) {
  .stat-mini { gap: 14px; padding: 12px 14px; }
  .stat-mini .num { font-size: 1.75rem; }
}

/* Calendly: fill the unused bottom of its frame with the calendar's own color, not white */
.embed-cal { background: var(--surface-2); }
.embed-cal .calendly-inline-widget, .embed-cal iframe { background: var(--surface-2); }
.embed-cal .calendly-inline-widget { margin-bottom: -3px; }
/* Calendly only fills its frame edge to edge below its desktop breakpoint. Above it, it
   floats a small card in a white page. Capping the width keeps it in the full-bleed layout. */
.embed-cal { max-width: 600px; margin-left: auto; margin-right: auto; }

/* Booking: hint above the calendar and a loading message under it until Calendly paints */
.cal-hint { max-width: 600px; margin: 24px auto 10px; text-align: center; font-weight: 600; font-size: 0.9375rem; }
.embed-cal { position: relative; margin-top: 0; }
.cal-loading {
  position: absolute; inset: 0; z-index: 2; margin: 0;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--muted); font-size: 0.9375rem;
}
.embed-cal + .badges { margin-top: 20px; }

/* Footer social link (TikTok), moved out of the page body */
.footer-social { margin: -4px 0 16px; }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.footer-social a:hover { text-decoration: underline; }
.footer-social .icon { width: 16px; height: 16px; }

/* Cal.com embed: wider than Calendly's cap (its month view puts days and times side by side),
   sizes its own height, and uses the site's card color directly */
.embed-cal.is-calcom { max-width: 1000px; background: var(--surface); }
/* Chrome paints an embedded page's background solid white when its color scheme doesn't
   match the frame's. Pinning the frame to the calendar's theme keeps it see-through. */
.calcom-inline iframe { color-scheme: dark; }
.embed-cal.is-calcom .cal-loading { background: var(--surface); }
.calcom-inline { width: 100%; min-height: 480px; overflow: auto; }
/* Phones: let the Cal.com calendar use the full screen width so its dropdowns have room */
@media (max-width: 600px) {
  .embed-cal.is-calcom { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; box-shadow: none; }
}

/* Booking page, compact: calendar starts high so it's on the first screen */
.step:has(#book) { padding-top: 4px; }
.step:has(#book) .step-head .trust { margin-bottom: 12px; }
.step:has(#book) .step-head h1 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.step:has(#book) .cal-hint { margin: 14px auto 10px; }
.cal-note { max-width: 600px; margin: 12px auto 0; text-align: center; font-size: 0.875rem; color: var(--muted); }
/* Desktop column view lists every slot; cap its height and let it scroll inside the card */
@media (min-width: 900px) {
  .embed-cal.is-calcom { max-height: min(600px, calc(100dvh - 260px)); overflow-y: auto; }
}

/* Header: logo centered; the sales page's apply button stays on the right */
.site-header .wrap { position: relative; justify-content: flex-end; min-height: 42px; }
.site-header .wordmark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
@media (max-width: 640px) { .site-header .wordmark span { display: none; } }
/* Phones: the hero button and sticky bar already cover apply, and a centered logo needs the room */
@media (max-width: 480px) { .site-header .btn { display: none; } }

/* ---------- Closing block ----------
   A question headline, one line, one big button. No divider rule (Garrett, 2026-10-09). */
.closer { padding-top: clamp(24px, 4vw, 48px); }
.closer h2 { max-width: 22ch; }
.closer .btn { min-height: 64px; padding: 0 36px; font-size: 1.125rem; margin-top: 32px; }
@media (max-width: 400px) { .closer .btn { padding: 12px 24px; font-size: 1rem; line-height: 1.25; white-space: normal; } }

/* ---------- shadcn layer ----------
   shadcn/ui's conventions, written as plain CSS so the site stays a folder of files:
   one sans for everything, tight semibold headings, 1px borders instead of heavy shadows,
   8px controls, 12px cards, small muted body copy inside cards, a soft focus ring.
   The maroon colors and the glow on the main button are ours and stay. */
body { font-size: 16px; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
h3 { font-size: 1.0625rem; letter-spacing: -0.015em; line-height: 1.3; }
.lede { font-size: 1.0625rem; }
.wordmark b { font-weight: 700; letter-spacing: -0.04em; font-size: 1.25rem; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-md); }

/* Button: h-10, rounded-md, text-sm medium. Red fill with a soft red glow. */
.btn { min-height: 40px; padding: 0 18px; gap: 8px; border-radius: var(--radius-md); font: 500 0.9375rem/1 var(--body); }
.btn:hover { transform: none; }
.btn:active { transform: scale(0.98); }
.btn .icon { width: 1.1em; height: 1.1em; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 0.875rem; }
.btn-ghost { box-shadow: none; border: 1px solid var(--line); background: transparent; }
.btn-ghost:hover { box-shadow: none; background: var(--surface-2); }
.closer .btn { min-height: 48px; padding: 0 28px; font-size: 1rem; }

/* Card: border, small shadow, p-6 */
.cell, .fit-col, .apply, .center-card, .guide, .inside-item, .embed, .badges li {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.cell, .fit-col, .inside-item { padding: 24px; }
.cell-main { background: var(--surface); }
.cell-main h3 { font-size: 1.375rem; }
.cell-soft, .fit-no { background: var(--surface); box-shadow: var(--shadow-sm); }
.cell { gap: 6px; }
.cell .icon { width: 24px; height: 24px; margin-bottom: 8px; color: var(--muted); }
.cell p, .inside-item p, .fit-col li, .flow p { font-size: 0.9375rem; line-height: 1.55; }
.fit-col li { color: var(--muted); }
.fit-col li .icon { width: 18px; height: 18px; margin-top: 2px; }
.flow h3 { font-size: 1.125rem; }
.inside-icon { width: 36px; height: 36px; border-radius: var(--radius-md); }
.inside-icon .icon { width: 18px; height: 18px; }
.badges li { padding: 12px; box-shadow: none; background: transparent; }
.badges strong { font-size: 0.875rem; font-weight: 500; }
.guide:hover { box-shadow: var(--shadow-sm); background: var(--surface-2); }
@media (min-width: 1000px) { .cell-main { min-height: 0; } }
@media (max-width: 600px) { .embed-cal.is-calcom { border-left: 0; border-right: 0; } }

/* Badge: the trust chip above the headline */
.trust { padding: 6px 16px 6px 6px; border-radius: 999px; background: transparent; box-shadow: none; border: 1px solid var(--line); }
.trust-icon { width: 30px; height: 30px; }
.trust-icon .icon { width: 16px; height: 16px; }
.trust p { font-size: 0.8125rem; }
.trust strong { font-weight: 500; letter-spacing: 0; }
.stars .icon { width: 12px; height: 12px; }

/* Accordion */
.faq { max-width: 720px; }
.faq summary { padding: 16px 0; font: 500 0.9375rem/1.4 var(--body); letter-spacing: 0; }
.faq summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq summary .icon { width: 16px; height: 16px; }
.faq details p { padding: 0 0 16px; font-size: 0.9375rem; line-height: 1.6; }

/* Form: card, progress, radio rows, inputs */
.apply { padding: clamp(20px, 4vw, 32px); }
.apply-top { margin-bottom: 24px; }
.apply-progress { height: 8px; }
.q legend, .q .q-title { font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.4rem); margin-bottom: 16px; }
.choices { gap: 8px; }
.choice { padding: 11px 12px; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: none; font-size: 0.9375rem; }
.choice:hover { box-shadow: none; background: var(--surface-2); }
.choice:active { transform: none; }
.choice .key { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--line); box-shadow: none; background: var(--surface-2); font-size: 0.75rem; font-weight: 500; }
.choice:has(input:checked) { box-shadow: none; border-color: var(--text); background: var(--surface-2); }
.choice:has(input:checked) .key { border-color: var(--text); }
.choice:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.apply input:not([type=radio]), .apply textarea {
  min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: transparent; box-shadow: none; font-size: 1rem;
}
.apply input:not([type=radio]):focus, .apply textarea:focus { border-color: var(--muted); box-shadow: 0 0 0 3px var(--ring); }
.apply [aria-invalid=true] { border-color: var(--text); box-shadow: 0 0 0 3px var(--ring) !important; }
.apply .hint { font-size: 0.8125rem; line-height: 1.5; }
.apply .err { font-weight: 500; }
.form-banner { box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius-md); }
.gift-done { font-weight: 500; }

/* Headline highlight: the phrase that carries the promise. Heavier, red, a slight glow,
   and kept on one line so it never splits across two. */
.hl { white-space: nowrap; font-weight: 800; color: var(--accent); text-shadow: 0 0 22px rgb(176 16 24 / .55); }
.faq details:last-child { border-bottom: 0; }