/* Layout: one long marketing page on paper. Hero with a live looking draft, then a tabbed section per coach type,
   then how it works, trust, website, comparison, build log, FAQ and a dark closing band.
   Passiv for Coaches brand. Light colorway by design: one look on every host. */
:root {
  color-scheme: light;
  --paper: #faf7f2;
  --surface: #ffffff;
  --sand: #f2ece2;
  --line: #e5ded1;
  --line-strong: #8a8170;
  --ink: #17203a;
  --ink-2: #4a5470;
  --ink-3: #5c6479;
  --on-ink: #faf7f2;
  --on-ink-2: #c9cedb;
  --cobalt: #2b4edb;
  --cobalt-hover: #1f3dbf;
  --cobalt-soft: #e8edfd;
  --cobalt-tint: #f5f7fe;
  --apricot: #f4a36c;
  --apricot-soft: #fdede1;
  --apricot-ink: #a3501b;
  --sage: #2f6b4b;
  --sage-soft: #e2efe7;
  --rose: #b23a31;
  --rose-soft: #f9e3e1;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow-sm: 0 1px 2px #17203a0f, 0 1px 3px #17203a14;
  --shadow-md: 0 2px 4px #17203a0a, 0 12px 28px -6px #17203a24;
  --shadow-lg: 0 4px 10px #17203a0f, 0 28px 56px -16px #17203a38;
  --r-md: 14px; --r-lg: 22px; --r-xl: 28px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--cobalt); }
a:hover { color: var(--cobalt-hover); }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2, h3, .fr { font-family: var(--display); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0; font-weight: 600; letter-spacing: -0.02em; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
section { padding-block: clamp(64px, 9vw, 120px); }
.band { background: var(--sand); }
.eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--apricot-ink); }
.sec-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.sec-head h2 { font-size: clamp(36px, 4.8vw, 58px); line-height: 1.05; }
.lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-3); }
svg.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 9999px; border: 1.5px solid transparent; font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s; }
.btn-primary { background: var(--cobalt); color: #fff; }
.btn-primary:hover { background: var(--cobalt-hover); color: #fff; }
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-quiet:hover { border-color: var(--ink); color: var(--ink); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 15px; }

/* Header */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.logo { display: flex; align-items: center; color: var(--ink); }
.logo svg { height: 30px; width: auto; display: block; }
.nav { display: flex; gap: 28px; font-size: 15px; font-weight: 600; }
.nav a { color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.head-acts { display: flex; align-items: center; gap: 18px; }
.signin { font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
@media (max-width: 900px) { .nav, .signin { display: none; } }

/* Hero */
.hero { padding-block: clamp(40px, 6vw, 88px) clamp(64px, 9vw, 112px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 14px 4px 6px; border-radius: 9999px; background: var(--apricot-soft); color: var(--apricot-ink); font-size: 13px; line-height: 18px; font-weight: 700; }
.pill svg { width: 22px; height: 22px; }
.hero h1 { font-size: clamp(52px, 7.6vw, 96px); line-height: 0.98; letter-spacing: -0.025em; }
.hero h1 em { padding: 0 0.06em; background: linear-gradient(transparent 56%, var(--apricot-soft) 56%, var(--apricot-soft) 88%, transparent 88%); }
.hero .lead { max-width: 540px; }
.ticks-row { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-2); }
.ticks-row span { display: inline-flex; align-items: center; gap: 8px; }
.ticks-row svg { color: var(--sage); }

/* Waitlist form */
.wl { display: flex; flex-direction: column; gap: 10px; max-width: 520px; width: 100%; }
.wl-box { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 30px; box-shadow: var(--shadow-sm); }
.wl-box:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--cobalt); }
.wl-box input { flex: 1 1 220px; min-width: 0; height: 48px; padding: 0 16px; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 16px; }
.wl-box input::placeholder { color: var(--ink-3); }
.wl-box .btn { flex: 1 0 auto; }
.wl-note { padding-left: 18px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-3); }
.wl-note.ok { color: var(--sage); font-weight: 700; }
.wl-note.err { color: var(--rose); font-weight: 700; }

/* Product cards */
.stage-art { position: relative; padding-bottom: 44px; min-width: 0; }
.stage-art::before { content: ""; position: absolute; top: 36px; right: -12px; bottom: 0; left: 36px; background: var(--apricot-soft); border-radius: var(--r-xl); }
.app-card { position: relative; max-width: 520px; margin-left: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.app-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.app-top svg { width: 32px; height: 32px; }
.app-top b { display: block; font-size: 15px; line-height: 20px; }
.app-top small { display: block; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.app-body { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--paper); }
.say { display: flex; gap: 10px; align-items: flex-end; }
.say .ga { width: 34px; height: 34px; flex: none; border-radius: 9999px; background: var(--sand); display: grid; place-items: center; }
.say .ga svg { width: 24px; height: 24px; }
.bubble { background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: 15px; line-height: 23px; }
.draft { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-md); }
.who { display: flex; align-items: center; gap: 10px; }
.av { width: 36px; height: 36px; flex: none; border-radius: 9999px; background: var(--cobalt-soft); color: var(--cobalt); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.who .nm { flex: 1; min-width: 0; }
.who b { display: block; font-size: 14px; line-height: 20px; }
.who small { display: block; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 9px; border-radius: 9999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 9999px; background: currentColor; }
.chip.blue { background: var(--cobalt-soft); color: var(--cobalt); }
.chip.green { background: var(--sage-soft); color: var(--sage); }
.chip.orange { background: var(--apricot-soft); color: var(--apricot-ink); }
.chip.red { background: var(--rose-soft); color: var(--rose); }
.chip.plain::before { display: none; }
.msg { padding: 12px 14px; border-radius: 12px; background: var(--paper); font-size: 14px; line-height: 22px; color: var(--ink-2); white-space: pre-line; }
.why { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.why svg { width: 16px; height: 16px; color: var(--apricot-ink); margin-top: 2px; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.checks li { display: flex; gap: 8px; align-items: flex-start; }
.checks svg { width: 16px; height: 16px; margin-top: 2px; color: var(--sage); }
.checks .no svg { color: var(--rose); }
.checks .no { color: var(--ink); }
.acts { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.mini { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 9999px; border: 0; font-size: 14px; font-weight: 600; cursor: default; }
.mini.ghost { background: transparent; color: var(--cobalt); }
.mini.solid { background: var(--cobalt); color: #fff; }
.mini svg { width: 16px; height: 16px; }
.toast { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md); }
.toast .tic { width: 38px; height: 38px; flex: none; border-radius: 9999px; background: var(--sage-soft); color: var(--sage); display: grid; place-items: center; }
.toast b { display: block; font-size: 14px; line-height: 20px; }
.toast small { display: block; font-size: 13px; line-height: 18px; color: var(--ink-3); }

/* Problem cards */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pcard { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.pcard h3 { font-size: 24px; line-height: 30px; }
.pcard p { color: var(--ink-2); }
.stack-lg { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }

/* Leads and clients */
.lc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 3vw, 40px); align-items: start; }
.lc-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: clamp(20px, 2.6vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.lc-head { display: flex; flex-direction: column; gap: 10px; }
.lc-head h3 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.12; }
.lc-tag { align-self: flex-start; font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: 9999px; background: var(--cobalt-soft); color: var(--cobalt); }
.lc-tag.green { background: var(--sage-soft); color: var(--sage); }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px; border-radius: var(--r-md); background: var(--paper); }
.bcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bcol h4 { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-2); padding: 2px 4px; }
.bcol h4 span { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.bcard { position: relative; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.bcard b { display: block; overflow-wrap: anywhere; font-size: 13px; line-height: 18px; }
.bcard small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.bcard .due { display: inline-block; margin-top: 6px; font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 9999px; background: var(--apricot-soft); color: var(--apricot-ink); }
.bcard .due.soon { background: var(--cobalt-soft); color: var(--cobalt); }
.does .dot.g { background: var(--sage-soft); color: var(--sage); }
.does b { color: var(--ink); }
.does li > span:last-child { color: var(--ink-2); font-size: 16px; }
.client { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--r-md); background: var(--paper); }
.client-top { display: flex; align-items: center; gap: 10px; }
.client-top .nm { flex: 1; min-width: 0; }
.client-top b { display: block; font-size: 15px; line-height: 20px; }
.client-top small { display: block; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.prog { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.prog .bar { height: 6px; border-radius: 9999px; background: var(--sand); overflow: hidden; }
.prog .bar i { display: block; height: 100%; background: var(--sage); border-radius: 9999px; }
.num { font-variant-numeric: tabular-nums; }
.cl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 20px; }
.cl li { display: flex; align-items: center; gap: 8px; }
.cl li.done { color: var(--ink-3); text-decoration: line-through; }
.cl li svg { width: 16px; height: 16px; color: var(--sage); }
.cl .box { width: 16px; height: 16px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 4px; }
.cl em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--apricot-ink); }
.next { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.next div { flex: 1; min-width: 0; }
.next b { display: block; font-size: 14px; line-height: 20px; }
.next small { display: block; font-size: 12px; line-height: 17px; color: var(--ink-3); }
@media (max-width: 980px) { .lc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Coach type tabs */
.tabs-shell { display: flex; flex-direction: column; gap: 28px; }
.tablist { display: flex; flex-wrap: wrap; gap: 8px; }
.tablist::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border: 1.5px solid var(--line-strong); border-radius: 9999px; background: transparent; color: var(--ink-2); font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.tab:hover { border-color: var(--ink); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.tp { display: flex; flex-direction: column; gap: 32px; }
.tp-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.tp-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.tp-copy h3 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; }
.tp-copy h4 { font-size: 13px; line-height: 18px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.does { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.does li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.does .dot { width: 28px; height: 28px; border-radius: 9999px; background: var(--cobalt-soft); color: var(--cobalt); display: grid; place-items: center; }
.does .dot svg { width: 15px; height: 15px; stroke-width: 2.8; }
.rules-box { padding: 16px 18px; border-radius: var(--r-md); background: var(--sage-soft); }
.rules-box ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 22px; }
.rules-box li { display: flex; gap: 10px; align-items: flex-start; }
.rules-box svg { width: 17px; height: 17px; color: var(--sage); margin-top: 2px; }
.tp-demo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tp-demo .draft { box-shadow: var(--shadow-lg); }
.pipe { padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.pipe h4 { font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.pipe ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pipe li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pipe li span { padding: 4px 10px; border-radius: 9999px; background: var(--sand); }
.pipe li.here span { background: var(--ink); color: var(--on-ink); }
.pipe li + li::before { content: ""; width: 10px; height: 1.5px; background: var(--line-strong); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line-strong); }
.fact { padding: 18px 20px 4px 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fact + .fact { padding-left: 20px; border-left: 1px solid var(--line); }
.fact dt { font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--apricot-ink); }
.fact dd { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink); }
.fact dd small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.fact a { color: var(--ink-3); }

/* How it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.steps li { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid var(--ink); }
.steps .n { font-family: var(--display); font-size: 20px; line-height: 24px; font-weight: 500; color: var(--apricot-ink); }
.steps h3 { font-size: 26px; line-height: 32px; }
.steps p { color: var(--ink-2); }

/* Always your call */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.split-copy { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.split-copy h2 { font-size: clamp(36px, 4.8vw, 58px); line-height: 1.05; }
.okl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-weight: 600; }
.okl li { display: flex; align-items: center; gap: 12px; }
.okl .c { width: 28px; height: 28px; flex: none; border-radius: 9999px; background: var(--sage-soft); color: var(--sage); display: grid; place-items: center; }
.okl .c svg { width: 15px; height: 15px; stroke-width: 2.8; }
.guard { padding: 14px 16px; border-radius: var(--r-md); background: var(--rose-soft); border: 1px solid #e9b9b4; display: flex; flex-direction: column; gap: 8px; }
.guard h4 { font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.guard h4 svg { width: 16px; height: 16px; }
mark.bad { background: var(--rose-soft); color: var(--ink); text-decoration: underline wavy var(--rose); text-underline-offset: 3px; padding: 0 2px; border-radius: 3px; }
.mini.solid.off { background: #a9b7ef; }
.wont { margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 24px 48px; }
.wont h3 { font-size: 26px; line-height: 1.15; }
.wont ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.wont li { display: flex; gap: 10px; align-items: flex-start; }
.wont li svg { width: 17px; height: 17px; color: var(--rose); margin-top: 2px; }

/* Website section */
.web-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feat li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--line-strong); }
.feat li:last-child { border-bottom: 1px solid var(--line-strong); }
.feat .fi { width: 44px; height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--cobalt); }
.feat .fi svg { width: 22px; height: 22px; stroke-width: 1.9; }
.feat h3 { font-size: 22px; line-height: 28px; margin-bottom: 4px; }
.feat p { color: var(--ink-2); font-size: 16px; }
.audit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.audit-top { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.ring { position: relative; width: 76px; height: 76px; flex: none; }
.ring svg { width: 76px; height: 76px; transform: rotate(-90deg); }
.ring .trk { fill: none; stroke: var(--sand); stroke-width: 9; }
.ring .val { fill: none; stroke: var(--apricot-ink); stroke-width: 9; stroke-linecap: round; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.audit-top h3 { font-family: var(--body); font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: 0; }
.audit-top p { font-size: 13px; line-height: 19px; color: var(--ink-3); }
.arows { list-style: none; margin: 0; padding: 0; }
.arows li { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.arows li:first-child { border-top: 0; }
.arows b { font-weight: 700; }
.arows span { color: var(--ink-2); }
.sec-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(32px, 4vw, 48px); }
.sec-chips span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 9999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.sec-chips svg { width: 16px; height: 16px; color: var(--sage); }

/* Comparison */
.cmp-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.tbl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
table.cmp { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.cmp th, .cmp td { padding: 15px 12px; }
.cmp thead tr { background: var(--paper); }
.cmp thead th { font-size: 14px; line-height: 18px; font-weight: 700; color: var(--ink-2); text-align: center; }
.cmp thead th:first-child { text-align: left; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-left: clamp(16px, 2vw, 24px); }
.cmp thead th.us { color: var(--cobalt); }
.cmp tbody tr { border-top: 1px solid var(--line); }
.cmp tbody th { text-align: left; font-weight: 600; padding-left: clamp(16px, 2vw, 24px); }
.cmp td { text-align: center; width: 22%; }
.cmp td.us { background: var(--cobalt-tint); color: var(--cobalt); }
.cmp td svg { width: 22px; height: 22px; display: inline-block; vertical-align: middle; }
.cmp td.no { color: var(--line-strong); }
.cmp td.alt { font-size: 14px; line-height: 20px; color: var(--ink-3); width: 30%; }

/* Build log */
.log-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.log { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 2.5vw, 32px); }
.log-h { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; font-size: 15px; font-weight: 700; }
.log-h svg { width: 26px; height: 26px; }
.log-row { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 22px; }
.log-row:last-child { padding-bottom: 0; }
.log-row b { font-size: 13px; color: var(--apricot-ink); font-variant-numeric: tabular-nums; }
.log-row span { color: var(--ink-2); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
.faq-side h2 { font-size: clamp(36px, 4.4vw, 52px); line-height: 1.05; }
.qa { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; border-top: 1px solid var(--line); }
.qa:first-child { padding-top: 0; border-top: 0; }
.qa h3 { font-size: 22px; line-height: 28px; }
.qa p { color: var(--ink-2); }

/* Closing band */
.join { padding-block: 0 clamp(48px, 7vw, 96px); }
.join-box { background: var(--ink); color: var(--on-ink); border-radius: var(--r-xl); padding: clamp(48px, 7vw, 96px) clamp(20px, 6vw, 80px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.join-box > svg { width: 76px; height: 76px; }
.join-box h2 { max-width: 760px; font-size: clamp(38px, 5.2vw, 66px); line-height: 1.04; color: var(--on-ink); }
.join-box .lead { color: var(--on-ink-2); max-width: 520px; }
.join-box .wl-box { border-color: var(--surface); }
.join-box .wl-note { color: var(--on-ink-2); padding-left: 0; }
.join-box .wl-note.ok { color: #9fd8b8; }
.join-box .wl-note.err { color: #ffb4ab; }

/* Waitlist and referrals */
.join-box { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; text-align: left; }
.join-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.eyebrow.on-dark { color: var(--apricot); }
.join-box h2 { max-width: none; font-size: clamp(36px, 4.6vw, 58px); }
.join-box .lead { max-width: 52ch; }
.join-box .wl-note { padding-left: 18px; }
.tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tiers li { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-md); background: #ffffff12; border: 1px solid #ffffff1f; }
.tn { font-family: var(--display); font-size: 30px; line-height: 1; font-weight: 600; color: var(--apricot); font-variant-numeric: tabular-nums; }
.tiers b { display: block; font-size: 15px; line-height: 20px; color: var(--on-ink); }
.tiers small { display: block; font-size: 13px; line-height: 18px; color: var(--on-ink-2); }
.ref { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: #ffffff12; border: 1px solid #ffffff26; }
.ref-top { display: flex; gap: 32px; }
.ref-k { display: block; font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-ink-2); }
.ref-pts { display: block; font-family: var(--display); font-size: 40px; line-height: 1.05; font-weight: 600; color: var(--on-ink); font-variant-numeric: tabular-nums; }
.track { position: relative; height: 54px; margin-right: 34px; }
.track-bar { position: absolute; top: 8px; left: 0; right: 0; height: 8px; border-radius: 9999px; background: #ffffff26; overflow: hidden; }
.track-bar i { display: block; height: 100%; background: var(--apricot); border-radius: 9999px; transition: width .4s; }
.ms { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; }
.ms b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 9999px; background: var(--ink); border: 2px solid var(--apricot); color: var(--on-ink); font-size: 11px; }
.ms small { font-size: 11px; font-weight: 700; color: var(--on-ink-2); }
.ref-link { display: flex; gap: 8px; flex-wrap: wrap; }
.ref-link input { flex: 1 1 200px; min-width: 0; height: 40px; padding: 0 14px; border-radius: 9999px; border: 1px solid #ffffff40; background: #ffffff14; color: var(--on-ink); font: 500 14px/1 var(--mono); }
.board-card { background: var(--surface); color: var(--ink); border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lb-head h3 { font-size: 24px; line-height: 1.15; }
.lb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lb li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--line); }
.lb li:first-child { border-top: 0; }
.lb li.me { background: var(--cobalt-soft); border-radius: 12px; border-top-color: transparent; padding-inline: 10px; }
.rk { width: 30px; height: 30px; border-radius: 9999px; display: grid; place-items: center; background: var(--sand); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lb li:nth-child(1) .rk { background: var(--apricot); color: var(--ink); }
.lb-nm { font-weight: 700; font-size: 15px; line-height: 20px; }
.lb-nm small { display: block; font-weight: 500; font-size: 13px; color: var(--ink-3); }
.lb-pts { font-family: var(--display); font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; }
.lb-pts::after { content: " pts"; font-family: var(--body); font-size: 12px; font-weight: 700; color: var(--ink-3); }
.lb-note { font-size: 13px; line-height: 18px; color: var(--ink-3); }
@media (max-width: 980px) { .join-box { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .tiers { grid-template-columns: minmax(0, 1fr); } .tiers li { flex-direction: row; align-items: center; gap: 14px; } .tn { min-width: 40px; } }

/* Footer */
.foot { padding-block: 40px 48px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-grid .logo svg { height: 26px; }
.foot-grid p { font-size: 14px; color: var(--ink-3); margin-top: 12px; max-width: 30ch; }
.foot h4 { font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 600; }
.foot ul a { color: var(--ink-2); text-decoration: none; }
.foot ul a:hover { color: var(--ink); text-decoration: underline; }
.foot .legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; color: var(--ink-3); }

/* Responsive */
@media (max-width: 980px) {
  .hero .wrap, .tp-grid, .split, .web-grid, .cmp-grid, .log-grid, .faq-grid, .wont { grid-template-columns: minmax(0, 1fr); }
  .faq-side { position: static; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards3 { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-card { margin-left: 0; }
}
@media (max-width: 640px) {
  .steps, .facts, .wont ul { grid-template-columns: minmax(0, 1fr); }
  .fact + .fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .stage-art::before { left: 16px; right: -8px; }
  .toast { position: relative; margin-top: 12px; }
  .stage-art { padding-bottom: 0; }
  .arows li { grid-template-columns: minmax(0, 1fr) auto; }
  .arows li span { grid-column: 1 / -1; grid-row: 2; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab { padding: 0 10px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Multi-page additions */
.more { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.more:hover { text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--apricot); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.type-hero h1 { font-size: clamp(44px, 6.2vw, 80px); line-height: 1.0; }
.crumb { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.crumb a { color: var(--ink-3); }
.two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.two .does li > span:last-child { font-size: 17px; color: var(--ink-2); }
.type-links { display: flex; flex-wrap: wrap; gap: 10px; }
.type-links a { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border: 1.5px solid var(--line-strong); border-radius: 9999px; color: var(--ink-2); font-weight: 700; font-size: 15px; text-decoration: none; }
.type-links a:hover { border-color: var(--ink); color: var(--ink); }
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(32px, 5vw, 56px); border-radius: var(--r-xl); background: var(--ink); color: var(--on-ink); }
.cta-band h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; color: var(--on-ink); max-width: 18ch; }
.cta-band p { color: var(--on-ink-2); margin-top: 10px; max-width: 46ch; }
.cta-band .wl { max-width: 460px; }
.cta-band .wl-note { color: var(--on-ink-2); }
.cta-band .wl-box { border-color: var(--surface); }
.prose { max-width: 70ch; display: flex; flex-direction: column; gap: 14px; color: var(--ink-2); }
.prose h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.1; color: var(--ink); margin-top: 18px; }
.prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.loglist { display: flex; flex-direction: column; max-width: 820px; }
.logitem { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--line-strong); }
.logitem time { font-weight: 800; color: var(--apricot-ink); font-variant-numeric: tabular-nums; }
.logitem h2 { font-size: 26px; line-height: 1.15; margin-bottom: 8px; }
.logitem p { color: var(--ink-2); }
.page-top { padding-block: clamp(48px, 7vw, 96px) clamp(32px, 4vw, 48px); }
.page-top h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.0; }
.nf { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
@media (max-width: 980px) { .two { grid-template-columns: minmax(0, 1fr); } .steps.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .steps.four { grid-template-columns: minmax(0, 1fr); } .logitem { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
a.sr:focus { position: fixed; top: 12px; left: 12px; z-index: 50; width: auto; height: auto; clip: auto; padding: 10px 16px; border-radius: 9999px; background: var(--ink); color: var(--on-ink); font-weight: 700; }
.lb-empty { display: block !important; padding: 18px 4px !important; color: var(--ink-3); font-size: 15px; border-top: 0 !important; }
.ref-name { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid #ffffff26; }
.ref-opt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--on-ink-2); }
.ref-opt input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--apricot); }
.btn-quiet.btn-sm { background: transparent; color: var(--on-ink); border-color: #ffffff66; }
.join-box .btn-quiet.btn-sm:hover { border-color: var(--on-ink); color: var(--on-ink); }
.cf-holder { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.cf-holder.show { position: static; width: auto; height: auto; }
[hidden] { display: none !important; }
#ref-name-input { font: 500 15px/1 var(--body); }
.ref-leave { align-self: flex-start; background: none; border: 0; padding: 4px 0; color: var(--on-ink-2); font: 600 14px/1.4 inherit; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ref-leave:hover { color: var(--on-ink); }
.leave-box { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--r-md); background: #ffffff12; border: 1px solid #ffffff26; }
.leave-box h3 { font-size: 26px; line-height: 1.15; color: var(--on-ink); }
.leave-box p { color: var(--on-ink-2); }
.leave-acts { display: flex; flex-wrap: wrap; gap: 10px; }
/* Mobile menu */
.menu-btn { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1.5px solid var(--line-strong); border-radius: 9999px; background: var(--surface); color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; }
.menu-panel { display: none; }
@media (max-width: 1180px) {
  .nav, .signin { display: none; }
  .menu-btn { display: inline-flex; }
  .site-head .head-acts .btn-sm { padding-inline: 14px; }
  .menu-panel.open { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 16px; border-top: 1px solid var(--line); background: var(--paper); }
  .menu-panel a { padding: 12px 4px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
  .menu-panel a:last-child { border-bottom: 0; }
}
/* Contact and legal pages */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.cform { display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 3vw, 36px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 700; font-size: 15px; }
.field input, .field textarea { width: 100%; font: 500 16px/1.5 var(--font-sans, inherit); font-family: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--cobalt-soft); border-color: var(--cobalt); }
.field small { color: var(--ink-3); font-size: 13px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform .wl-note { margin: 0; }
.contact-side { display: flex; flex-direction: column; gap: 18px; }
.contact-side .info { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.contact-side .info b { font-size: 15px; }
.contact-side .info span, .contact-side .info a { color: var(--ink-2); }
.legal-doc { max-width: 72ch; }
.legal-doc h2 { font-size: clamp(24px, 2.6vw, 30px); margin-top: 26px; }
.legal-doc h3 { font-size: 19px; color: var(--ink); margin-top: 10px; font-family: inherit; }
.legal-doc p, .legal-doc li { color: var(--ink-2); }
.legal-doc .eff { font-weight: 700; color: var(--ink-3); }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.legal-doc th { color: var(--ink); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .legal-doc table, .legal-doc tbody, .legal-doc tr, .legal-doc td, .legal-doc th { display: block; } .legal-doc thead { display: none; } .legal-doc td:first-child { font-weight: 700; color: var(--ink); border-bottom: 0; padding-bottom: 0; } }
.ref-foot { display: flex; flex-wrap: wrap; gap: 20px; }
.wl-signin { margin-top: 10px; font-size: 14px; color: var(--on-ink-2); }
.wl-signin a { color: var(--on-ink); font-weight: 700; }
.si-h { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; }
#signed-in .btn { align-self: flex-start; }
/* Cookie settings link (CookieYes opens its preferences from any .cky-banner-element) */
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.linklike:hover { text-decoration: underline; }
.no-cmp .cky-banner-element { display: none !important; }
/* ===================== CookieYes banner, Passiv brand =====================
   CookieYes builds the banner at runtime and sets some colors inline, so these rules use !important.
   Buttons are matched by CookieYes's own data-cky-tag attributes, which don't change between versions. */
.cky-consent-container, .cky-modal, .cky-preference-center, .cky-btn-revisit-wrapper,
.cky-consent-container *, .cky-modal * { font-family: "Figtree", ui-sans-serif, system-ui, sans-serif !important; letter-spacing: 0 !important; }

/* The banner card */
.cky-consent-container { z-index: 60 !important; }
.cky-consent-bar {
  background: var(--paper) !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; border-radius: 22px !important;
  box-shadow: 0 4px 10px #17203a14, 0 28px 56px -16px #17203a47 !important;
  padding: 22px 22px 20px !important;
}
.cky-consent-container.cky-box-bottom-left, .cky-consent-container.cky-box-bottom-right { max-width: 440px !important; }
.cky-title {
  display: flex !important; align-items: center !important; gap: 10px !important;
  font-family: "Fraunces", Georgia, serif !important; font-weight: 600 !important;
  font-size: 22px !important; line-height: 1.2 !important; color: var(--ink) !important; margin: 0 0 8px !important;
}
.cky-title::before {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: url("/assets/icon.svg") center / cover no-repeat;
}
.cky-notice-des, .cky-notice-des p, .cky-notice-des span { color: var(--ink-2) !important; font-size: 15px !important; line-height: 1.55 !important; }
.cky-notice-des a, .cky-consent-bar a, .cky-preference-center a {
  color: var(--cobalt) !important; text-decoration: underline !important; text-underline-offset: 3px !important; font-weight: 600 !important;
}

/* Buttons */
.cky-notice-btn-wrapper, .cky-prefrence-btn-wrapper, .cky-footer-wrapper .cky-prefrence-btn-wrapper {
  display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 16px !important;
}
.cky-btn, :where([data-cky-tag$="-button"]:not([data-cky-tag="close-button"]):not([data-cky-tag*="desc-button"])) {
  flex: 1 1 auto !important; min-height: 42px !important; margin: 0 !important; padding: 0 18px !important;
  border-radius: 9999px !important; border: 1.5px solid var(--line-strong) !important;
  background: var(--surface) !important; color: var(--ink) !important;
  font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important;
  box-shadow: none !important; cursor: pointer !important; transition: background-color .15s, border-color .15s, color .15s !important;
}
.cky-btn:hover, :where([data-cky-tag$="-button"]:not([data-cky-tag="close-button"]):not([data-cky-tag*="desc-button"])):hover { border-color: var(--ink) !important; background: var(--surface) !important; opacity: 1 !important; }
.cky-btn-accept, [data-cky-tag="accept-button"], [data-cky-tag="detail-accept-button"] {
  background: var(--cobalt) !important; border-color: var(--cobalt) !important; color: #fff !important;
}
.cky-btn-accept:hover, [data-cky-tag="accept-button"]:hover, [data-cky-tag="detail-accept-button"]:hover {
  background: #1f3dbf !important; border-color: #1f3dbf !important;
}
[data-cky-tag="detail-save-button"], [data-cky-tag="optout-confirm-button"] {
  background: var(--ink) !important; border-color: var(--ink) !important; color: var(--paper) !important;
}
.cky-btn:focus-visible, [data-cky-tag]:focus-visible, .cky-accordion-btn:focus-visible, .cky-switch input:focus-visible {
  outline: 3px solid var(--apricot) !important; outline-offset: 2px !important;
}

/* Preference center */
.cky-overlay { background: #17203a8c !important; backdrop-filter: blur(2px); }
.cky-preference-center {
  background: var(--paper) !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; border-radius: 22px !important;
  box-shadow: 0 28px 64px -16px #17203a66 !important; overflow: hidden !important;
}
.cky-preference-header { border-bottom: 1px solid var(--line) !important; padding: 20px 22px !important; }
.cky-preference-title { font-family: "Fraunces", Georgia, serif !important; font-size: 22px !important; font-weight: 600 !important; color: var(--ink) !important; }
.cky-btn-close, [data-cky-tag="detail-close"], [data-cky-tag="close-button"], [data-cky-tag="optout-close"] {
  border-radius: 9999px !important; background: var(--surface) !important; border: 1px solid var(--line) !important;
}
.cky-preference-content-wrapper, .cky-preference-content-wrapper p, .cky-category-des, .cky-category-des p, .cky-accordion-header-des, .cky-accordion-header-des p {
  color: var(--ink-2) !important; font-size: 15px !important; line-height: 1.55 !important;
}
.cky-accordion { border-bottom: 1px solid var(--line) !important; }
.cky-accordion-btn { color: var(--ink) !important; font-weight: 700 !important; font-size: 16px !important; }
.cky-accordion-active .cky-accordion-btn { color: var(--cobalt) !important; }
.cky-always-active { color: var(--sage) !important; font-weight: 700 !important; }
[data-cky-tag="show-desc-button"], [data-cky-tag="hide-desc-button"], .cky-show-desc-btn {
  color: var(--cobalt) !important; font-weight: 700 !important; background: none !important; border: 0 !important;
}
.cky-footer-wrapper { border-top: 1px solid var(--line) !important; background: var(--paper) !important; }
.cky-footer-shadow { background: linear-gradient(180deg, #faf7f200 0%, var(--paper) 100%) !important; }

/* Toggle switches: CookieYes colors them inline, so override both states */
.cky-switch input[type="checkbox"], input[id^="ckySwitch"], input[id^="ckyCategoryDirect"], #ckyCCPAOptOut {
  background-color: var(--line-strong) !important; border-radius: 9999px !important;
}
.cky-switch input[type="checkbox"]:checked, input[id^="ckySwitch"]:checked, input[id^="ckyCategoryDirect"]:checked, #ckyCCPAOptOut:checked {
  background-color: var(--cobalt) !important;
}

/* Cookie tables in the preference center */
.cky-audit-table, .cky-cookie-audit-table { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; color: var(--ink-2) !important; }

/* Floating "cookie settings" button */
.cky-btn-revisit-wrapper, [data-cky-tag="revisit-consent"] {
  background: var(--ink) !important; border: 2px solid var(--paper) !important;
  box-shadow: 0 6px 18px -6px #17203a80 !important; width: 44px !important; height: 44px !important;
}
.cky-btn-revisit-wrapper:hover, [data-cky-tag="revisit-consent"]:hover { background: var(--cobalt) !important; }

/* Phones: full-width card that sits above the bottom edge */
@media (max-width: 576px) {
  .cky-consent-container.cky-box-bottom-left, .cky-consent-container.cky-box-bottom-right,
  .cky-consent-container { left: 12px !important; right: 12px !important; bottom: 12px !important; width: auto !important; max-width: none !important; }
  .cky-consent-bar { padding: 18px !important; }
  .cky-btn, :where([data-cky-tag$="-button"]:not([data-cky-tag="close-button"]):not([data-cky-tag*="desc-button"])) { flex: 1 1 calc(50% - 4px) !important; }
  .cky-btn-accept, [data-cky-tag="accept-button"], [data-cky-tag="detail-accept-button"] { order: -1 !important; flex-basis: 100% !important; }
  .cky-preference-center { border-radius: 18px 18px 0 0 !important; }
}
@media (prefers-reduced-motion: reduce) { .cky-btn, :where([data-cky-tag$="-button"]:not([data-cky-tag="close-button"]):not([data-cky-tag*="desc-button"])) { transition: none !important; } }
.share { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 9999px; border: 1px solid #ffffff40; color: var(--on-ink); background: transparent; font: 700 13px/1 inherit; font-family: inherit; text-decoration: none; cursor: pointer; }
.share-btn:hover { border-color: var(--on-ink); }
.toc { padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.toc b { display: block; margin-bottom: 8px; color: var(--ink); }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.toc li { break-inside: avoid; padding: 2px 0; }
@media (max-width: 640px) { .toc ol { columns: 1; } }
.legal-doc h2 { scroll-margin-top: 90px; }
@media print {
  .site-head, .foot, .toc, .sr, .cky-consent-container, .cky-btn-revisit-wrapper { display: none !important; }
  body { background: #fff; }
  .legal-doc a { color: inherit; }
}

.nav a { white-space: nowrap; }


/* =====================================================================
   Polish layer: motion, states and micro-interactions. No content lives here.
   Rule of thumb: anything hidden for an entrance is only hidden once site.js has
   marked it (.rv), so the page is complete without JavaScript or with reduced motion.
   ===================================================================== */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .18s;
  --t-med: .32s;
  --t-slow: .7s;
  --glow-cobalt: 0 8px 22px -8px #2b4edb8c;
}
::selection { background: var(--cobalt-soft); color: var(--ink); }
:focus-visible { outline-offset: 3px; border-radius: 6px; transition: outline-offset var(--t-fast) var(--ease-out); }
html { -webkit-tap-highlight-color: transparent; }

/* ---------- Page to page: a soft cross-fade where the browser supports it ---------- */
@view-transition { navigation: auto; }
.site-head { view-transition-name: site-head; }
::view-transition-old(root) { animation: vt-out .2s ease both; }
::view-transition-new(root) { animation: vt-in .38s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; translate: 0 10px; } }

/* ---------- Header ---------- */
.site-head { transition: background-color var(--t-med) ease, box-shadow var(--t-med) ease, border-color var(--t-med) ease; }
.site-head.scrolled { background: color-mix(in srgb, var(--paper) 88%, transparent); box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px #17203a33; border-bottom-color: transparent; }
.logo { transition: opacity var(--t-fast); }
.logo:hover { opacity: .75; }
.nav a { position: relative; padding-block: 6px; transition: color var(--t-fast); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--apricot); transform: scaleX(0); transform-origin: center; transition: transform var(--t-med) var(--ease-out); }
.nav a:hover::after, .nav a.is-active::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a.is-active { color: var(--ink); }
.nav a[aria-current="page"] { text-decoration: none; }
.signin { position: relative; transition: color var(--t-fast); }
.signin:hover { color: var(--ink); }
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cobalt); transform: scaleX(var(--p, 0)); transform-origin: left; pointer-events: none; }

/* Menu button: three lines that fold into an X */
.menu-btn { transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast) var(--ease-out); }
.menu-btn:hover { border-color: var(--ink); }
.menu-btn:active { transform: scale(.94); }
.menu-btn svg path { transition: transform var(--t-med) var(--ease-out), opacity var(--t-fast); }
.menu-btn .l1 { transform-origin: 12px 7px; }
.menu-btn .l2 { transform-origin: 12px 12px; }
.menu-btn .l3 { transform-origin: 12px 17px; }
.menu-btn[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.menu-btn[aria-expanded="true"] .l1 { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .l2 { opacity: 0; transform: scaleX(0); }
.menu-btn[aria-expanded="true"] .l3 { transform: translateY(-5px) rotate(-45deg); }

/* Mobile menu: slides open, links arrive one after another */
@media (max-width: 1180px) {
  .menu-panel { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; background: var(--paper); border-top: 1px solid transparent;
    transition: max-height .42s var(--ease-out), opacity var(--t-med) ease, padding .42s var(--ease-out), visibility 0s linear .42s, border-color var(--t-med); }
  .menu-panel.open { max-height: min(80vh, 520px); opacity: 1; visibility: visible; padding: 8px 16px 18px; border-top-color: var(--line);
    transition: max-height .5s var(--ease-out), opacity var(--t-med) ease, padding .5s var(--ease-out), visibility 0s, border-color var(--t-med); }
  .menu-panel a { opacity: 0; transform: translateY(-8px); transition: opacity var(--t-med) ease, transform .45s var(--ease-out), color var(--t-fast), padding-left var(--t-med) var(--ease-out); }
  .menu-panel.open a { opacity: 1; transform: none; }
  .menu-panel.open a:nth-child(1) { transition-delay: .04s; } .menu-panel.open a:nth-child(2) { transition-delay: .08s; }
  .menu-panel.open a:nth-child(3) { transition-delay: .12s; } .menu-panel.open a:nth-child(4) { transition-delay: .16s; }
  .menu-panel.open a:nth-child(5) { transition-delay: .2s; } .menu-panel.open a:nth-child(6) { transition-delay: .24s; }
  .menu-panel a:hover, .menu-panel a:focus-visible { color: var(--cobalt); padding-left: 10px; }
}

/* ---------- Buttons ---------- */
.btn { position: relative; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.btn:active { transform: scale(.97); transition-duration: .08s; }
.btn-primary:hover { box-shadow: var(--glow-cobalt); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(.97); box-shadow: none; }
.btn-quiet:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.wl-box .btn-primary:hover { transform: none; }
.btn:disabled { cursor: progress; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2.5px solid #ffffff59; border-top-color: #fff; animation: spin .7s linear infinite; }
.btn-quiet.is-loading::after { border-color: #17203a33; border-top-color: var(--ink); }
.join-box .btn-quiet.is-loading::after { border-color: #ffffff40; border-top-color: #fff; }
.btn.is-done { background: var(--sage) !important; border-color: var(--sage) !important; color: #fff !important; }
@keyframes spin { to { transform: rotate(360deg); } }

.more span[aria-hidden="true"] { display: inline-block; transition: transform var(--t-med) var(--ease-out); }
.more:hover span[aria-hidden="true"] { transform: translateX(4px); }
.more { text-underline-offset: 4px; }

/* ---------- Forms ---------- */
.wl-box { transition: border-color var(--t-fast), box-shadow var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.wl-box:focus-within { transform: translateY(-1px); }
.wl-box input { transition: color var(--t-fast); }
.wl-box input::placeholder { transition: opacity var(--t-fast); }
.wl-box input:focus::placeholder { opacity: .55; }
.field label { transition: color var(--t-fast); }
.field:focus-within label { color: var(--cobalt); }
.field input, .field textarea { transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-med) var(--ease-out); }
.field input:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field textarea:focus { outline: none; background: var(--surface); border-color: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-soft); }
.ref-link input { transition: border-color var(--t-fast), background-color var(--t-fast); }
.ref-link input:focus { outline: none; border-color: #ffffffa6; background: #ffffff1f; }

.note-pop { animation: note-pop .45s var(--ease-out); }
@keyframes note-pop { from { opacity: 0; transform: translateY(4px); } }
.wl > .wl-note.ok::before, #si-note.ok::before, .ref-name .wl-note.ok::before, #leave-note.ok::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 7px; vertical-align: -3px; border-radius: 50%;
  background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  animation: tick-pop .5s var(--ease-spring) both;
}
@keyframes tick-pop { from { transform: scale(0); } }
.shake { animation: shake .42s var(--ease-out); }
@keyframes shake { 15% { transform: translateX(-7px); } 35% { transform: translateX(6px); } 55% { transform: translateX(-4px); } 75% { transform: translateX(2px); } }

/* ---------- Hero: one orchestrated entrance on load ---------- */
.hero-copy > *, .page-top .sec-head > *, .page-top .contact-side > *, .nf > * { animation: rise .8s var(--ease-out) both; }
.hero-copy > :nth-child(1), .page-top .sec-head > :nth-child(1), .nf > :nth-child(1) { animation-delay: .04s; }
.hero-copy > :nth-child(2), .page-top .sec-head > :nth-child(2), .nf > :nth-child(2) { animation-delay: .12s; }
.hero-copy > :nth-child(3), .page-top .sec-head > :nth-child(3), .nf > :nth-child(3) { animation-delay: .22s; }
.hero-copy > :nth-child(4), .page-top .sec-head > :nth-child(4), .nf > :nth-child(4) { animation-delay: .32s; }
.hero-copy > :nth-child(5), .page-top .sec-head > :nth-child(5) { animation-delay: .42s; }
.hero-copy > :nth-child(6), .page-top .sec-head > :nth-child(6) { animation-delay: .5s; }
.page-top .contact-grid > div:last-child { animation: rise .9s var(--ease-out) .28s both; }
@keyframes rise { from { opacity: 0; translate: 0 22px; } }
.hero h1 { animation-name: rise-h1; animation-duration: 1s; }
@keyframes rise-h1 { from { opacity: 0; translate: 0 28px; filter: blur(6px); } }
.hero h1 em { background-repeat: no-repeat; background-size: 100% 100%; animation: highlight 1s var(--ease-in-out) .75s both; }
@keyframes highlight { from { background-size: 0% 100%; } }
.ticks-row svg { animation: tick-pop .5s var(--ease-spring) both; }
.ticks-row span:nth-child(1) svg { animation-delay: .7s; } .ticks-row span:nth-child(2) svg { animation-delay: .8s; } .ticks-row span:nth-child(3) svg { animation-delay: .9s; }

.stage-art::before { animation: plate 1.1s var(--ease-out) .15s both; }
@keyframes plate { from { opacity: 0; scale: .94; } }
.stage-art .app-card { animation: card-in 1s var(--ease-out) .25s both; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); will-change: transform; }
@keyframes card-in { from { opacity: 0; translate: 0 36px; scale: .97; } }
.stage-art.tilting .app-card { transition-duration: .12s; }
.hero .say { animation: rise .7s var(--ease-out) .6s both; }
.hero .bubble { transform-origin: 0 100%; animation: bubble .6s var(--ease-spring) .65s both; }
@keyframes bubble { from { opacity: 0; transform: scale(.85); } }
.hero .draft, .type-hero .app-body > .draft { animation: rise .8s var(--ease-out) .85s both; }
.hero .draft .chip { animation: tick-pop .5s var(--ease-spring) 1.9s both; }
.hero .msg { position: relative; }
.hero .msg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, var(--paper) 30%, var(--sand) 50%, var(--paper) 70%) 0 0 / 250% 100%;
  animation: shimmer .9s linear .9s 2 both, fade-out .4s ease 1.75s forwards; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes fade-out { to { opacity: 0; visibility: hidden; } }
.hero .checks li { animation: rise .5s var(--ease-out) both; }
.hero .checks li:nth-child(1) { animation-delay: 1.95s; } .hero .checks li:nth-child(2) { animation-delay: 2.05s; }
.hero .acts .mini.solid { animation: rise .5s var(--ease-out) 2.1s both, nudge 1.6s var(--ease-out) 2.8s 1; }
@keyframes nudge { 0% { box-shadow: 0 0 0 0 #2b4edb66; } 100% { box-shadow: 0 0 0 12px #2b4edb00; } }
.hero .toast { animation: toast-in .8s var(--ease-spring) 2.4s both, float 6s ease-in-out 3.4s infinite; }
@keyframes toast-in { from { opacity: 0; translate: -18px 14px; scale: .9; } }
@keyframes float { 50% { translate: 0 -6px; } }
.hero .toast .tic { animation: tick-pop .5s var(--ease-spring) 2.75s both; }

/* ---------- Scroll reveals (site.js adds .rv to things below the fold, then .in as they arrive) ----------
   Entrances animate the individual translate/scale properties, so hover effects (which use transform) never fight them. */
@keyframes in-up { from { opacity: 0; translate: 0 26px; } }
@keyframes in-left { from { opacity: 0; translate: -26px 0; } }
@keyframes in-right { from { opacity: 0; translate: 26px 0; } }
@keyframes in-scale { from { opacity: 0; translate: 0 18px; scale: .97; } }
@keyframes in-slide { from { opacity: 0; translate: -10px 0; } }
@keyframes in-rise { from { opacity: 0; translate: 0 8px; } }
@keyframes in-pop { from { opacity: 0; translate: 0 10px; scale: .94; } }
@keyframes in-icon { from { opacity: 0; scale: .4; rotate: -14deg; } }
.rv:not(.in) { opacity: 0; }
.rv.in { animation: in-up .9s var(--ease-out) var(--d, 0ms) both; }
.rv.in.rv-left { animation-name: in-left; }
.rv.in.rv-right { animation-name: in-right; }
.rv.in.rv-scale { animation-name: in-scale; }

/* Inner choreography: each runs when its block arrives */
.rv:not(.in) :is(.bcard, .cl li, .checks li, .does li, .okl li, .wont li, .rules-box li, .arows li, .cmp tbody tr, .client > *, .next, .tiers li, .sec-chips span, .log-row) { opacity: 0; }
.rv.in :is(.bcard, .tiers li, .sec-chips span) { animation: in-pop .6s var(--ease-out) calc(var(--i, 0) * 70ms + 200ms) both; }
.rv.in :is(.cl li, .checks li, .does li, .okl li, .wont li, .rules-box li) { animation: in-slide .55s var(--ease-out) calc(var(--i, 0) * 70ms + 220ms) both; }
.rv.in :is(.arows li, .cmp tbody tr, .client > *, .next, .log-row) { animation: in-rise .55s var(--ease-out) calc(var(--i, 0) * 70ms + 200ms) both; }
.prog .bar i { transform-origin: left; transition: transform 1.3s var(--ease-out) .55s; }
.rv:not(.in) .prog .bar i { transform: scaleX(0); }
.ring .val { transition: stroke-dashoffset 1.6s var(--ease-out) .35s; }
.rv:not(.in) .ring .val { stroke-dashoffset: 201.06; }
.cmp td.us svg { transition: transform .5s var(--ease-spring); transition-delay: calc(var(--i, 0) * 70ms + 380ms); }
.rv:not(.in) .cmp td.us svg { transform: scale(0); }
.arows .chip { transition: transform .45s var(--ease-spring), opacity .3s; transition-delay: calc(var(--i, 0) * 70ms + 440ms); }
.rv:not(.in) .arows .chip { opacity: 0; transform: scale(.6); }
.steps li { position: relative; border-top-color: transparent; }
.steps li::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--ink); transform-origin: left; transition: transform 1s var(--ease-out) calc(var(--d, 0ms) + 120ms); }
.steps li.rv:not(.in)::before { transform: scaleX(0); }
.steps .n { display: inline-block; transition: transform .6s var(--ease-spring) calc(var(--d, 0ms) + 300ms); }
.steps li.rv:not(.in) .n { transform: translateY(8px); }
.facts { border-top-color: transparent; position: relative; }
.facts::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--line-strong); transform-origin: left; transition: transform 1.1s var(--ease-out) .1s; }
.rv:not(.in) .facts::before, .facts.rv:not(.in)::before { transform: scaleX(0); }
.feat li.rv.in .fi { animation: in-icon .6s var(--ease-spring) calc(var(--d, 0ms) + 200ms) both; }

/* ---------- Hover life on cards and tiles ---------- */
.pcard, .lc-col, .tiers li, .board-card, .audit, .log, .wont, .tbl-wrap, .cform, .toc, .bcard, .sec-chips span { transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med), background-color var(--t-med); }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d6cdbd; }
.lc-col:hover, .audit:hover, .log:hover { box-shadow: var(--shadow-md); }
.bcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #d6cdbd; }
.feat .fi { transition: transform var(--t-med) var(--ease-spring), background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.feat li:hover .fi { background: var(--cobalt); color: #fff; border-color: var(--cobalt); transform: rotate(-6deg) scale(1.06); }
.sec-chips span:hover { border-color: var(--sage); background: var(--sage-soft); transform: translateY(-1px); }
.tiers li:hover { transform: translateY(-3px); background: #ffffff1c; border-color: #ffffff38; }
.cmp tbody tr, .cmp td, .arows li { transition: background-color var(--t-fast); }
.cmp tbody tr:hover { background: var(--paper); }
.cmp tbody tr:hover td.us { background: var(--cobalt-soft); }
.arows li:hover { background: var(--paper); }
.qa h3 { transition: color var(--t-fast); }
.qa:hover h3 { color: var(--cobalt); }
.type-links a, .tab { transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
.type-links a:hover { transform: translateY(-2px); background: var(--surface); box-shadow: var(--shadow-sm); }
.type-links a:active, .tab:active { transform: scale(.96); }

/* ---------- Coach type tabs: a sliding pill behind the selected tab ---------- */
.tablist.has-ink { position: relative; isolation: isolate; }
.tab-ink { position: absolute; z-index: -1; left: 0; top: 0; border-radius: 9999px; background: var(--ink); pointer-events: none;
  transition: transform .5s var(--ease-out), width .5s var(--ease-out), height .5s var(--ease-out); }
.tablist.has-ink .tab[aria-selected="true"] { background: transparent; border-color: transparent; }
.tablist.no-anim .tab-ink { transition: none; }
.tp.tp-enter { animation: tp-in .55s var(--ease-out) both; }
.tp.tp-enter .tp-demo { animation: tp-demo .7s var(--ease-out) .08s both; }
@keyframes tp-in { from { opacity: 0; translate: 0 12px; } }
@keyframes tp-demo { from { opacity: 0; translate: 22px 0; } }

/* ---------- Dark bands: a soft light that follows the pointer ---------- */
.join-box, .cta-band { position: relative; isolation: isolate; overflow: hidden; }
.join-box::before, .cta-band::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), #2b4edb40, transparent 65%); }
.join-box.lit::before, .cta-band.lit::before { opacity: 1; }
.join-box > svg { animation: none; }

/* ---------- Waitlist dashboard ---------- */
.ref:not([hidden]), .leave-box:not([hidden]), #signed-in:not([hidden]) { animation: pop-in .6s var(--ease-out) both; }
#wl-bottom:not([hidden]).re-in, #signin-form.re-in { animation: pop-in .5s var(--ease-out) both; }
@keyframes pop-in { from { opacity: 0; translate: 0 14px; scale: .98; } }
.ref-pts { transition: color var(--t-med); }
.ref-pts.bump { animation: bump .5s var(--ease-spring); }
@keyframes bump { 40% { transform: scale(1.12); color: var(--apricot); } }
.track-bar i { transition: width 1.4s var(--ease-out) .2s; position: relative; overflow: hidden; }
.track-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffffff73, transparent); translate: -100% 0; animation: sheen 2.6s ease-in-out 1.6s infinite; }
@keyframes sheen { 60%, 100% { translate: 100% 0; } }
.ms b { transition: background-color .4s, color .4s, transform .5s var(--ease-spring), box-shadow .4s; }
.ms.hit b { background: var(--apricot); color: var(--ink); transform: scale(1.12); box-shadow: 0 0 0 4px #f4a36c33; }
.share-btn { transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-med) var(--ease-out); }
.share-btn:hover { background: #ffffff14; transform: translateY(-2px); }
.share-btn:active { transform: scale(.95); }
.ref .share .share-btn { animation: rise .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms + 350ms); }
.ref-leave { transition: color var(--t-fast); }
.ref-opt input { transition: transform var(--t-fast) var(--ease-spring); }
.ref-opt input:active { transform: scale(.88); }

/* Leaderboard */
.lb li { transition: background-color var(--t-fast); }
.lb li.enter { animation: lb-in .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes lb-in { from { opacity: 0; translate: -12px 0; } }
.lb li:not(.lb-empty):hover { background: var(--paper); }
.lb li:nth-child(1):not(.lb-empty) .rk { box-shadow: 0 0 0 4px #f4a36c33; }
.board-card .chip.green::before, .lb-head .chip.green::before { animation: live 2s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 #2f6b4b80; } 70%, 100% { box-shadow: 0 0 0 6px #2f6b4b00; } }

/* ---------- Sign in and contact sides ---------- */
.contact-side .info a { text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--t-fast), text-underline-offset var(--t-fast); }
.contact-side .info a:hover { color: var(--cobalt); text-underline-offset: 6px; }
.cform:not(.c-success):focus-within { box-shadow: var(--shadow-md); }

/* ---------- Build log: a timeline with dots ---------- */
.logitem time { position: relative; padding-left: 18px; }
.logitem time::before { content: ""; position: absolute; left: 0; top: .42em; width: 8px; height: 8px; border-radius: 50%; background: var(--apricot); box-shadow: 0 0 0 4px var(--apricot-soft); }
.logitem time::before { transition: transform .5s var(--ease-spring) calc(var(--d, 0ms) + 250ms); }
.logitem.rv:not(.in) time::before { transform: scale(0); }
.logitem:first-child time::before { animation: live-apricot 2.4s ease-out infinite; }
@keyframes live-apricot { 0% { box-shadow: 0 0 0 0 #f4a36c99; } 70%, 100% { box-shadow: 0 0 0 8px #f4a36c00; } }
.log-row { transition: background-color var(--t-fast); }

/* ---------- Legal and prose ---------- */
.toc a { text-decoration: none; transition: color var(--t-fast); }
.toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal-doc h2:target { animation: target-flash 1.6s ease; }
@keyframes target-flash { 0%, 40% { color: var(--cobalt); } }

/* ---------- Footer ---------- */
.foot ul a, .foot .linklike { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 1px; transition: color var(--t-fast), background-size var(--t-med) var(--ease-out); }
.foot ul a:hover, .foot .linklike:hover { text-decoration: none; background-size: 100% 1.5px; }

/* ---------- 404 ---------- */
.nf h1 em { display: inline-block; animation: drift 5s ease-in-out 1s infinite; }
@keyframes drift { 25% { transform: translate(4px, -3px) rotate(1deg); } 75% { transform: translate(-3px, 2px) rotate(-1deg); } }

/* ---------- Reduced motion: everything rests in its final state ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .rv, .rv :is(.bcard, .cl li, .checks li, .does li, .okl li, .wont li, .rules-box li, .arows li, .cmp tbody tr, .client > *, .next, .tiers li, .sec-chips span, .log-row) { opacity: 1 !important; }
  .hero .msg::after, .track-bar i::after { display: none; }
  .rv:not(.in) .ring .val { stroke-dashoffset: 80.42; }
}

/* Font shorthands in the base sheet used "inherit" inside the shorthand, which browsers drop. Set them properly. */
.share-btn { font: 700 13px/1 var(--body); }
.ref-leave { font: 600 14px/1.4 var(--body); }
/* Page titles line up with the content below them instead of floating in a centered column. */
.page-top > .wrap.sec-head { max-width: 1180px; }
.logitem { grid-template-columns: 150px minmax(0, 1fr); }
@media (max-width: 640px) { .logitem { grid-template-columns: minmax(0, 1fr); } }