/* Clear-water skin: blue is Pace and near-white is the room. --accent-ink
   is the same blue darkened so small text clears 4.5:1 on --bg. Paper is for
   things Ace hands you. */
:root {
  --bg: #FCFFFF;
  --card: #EEF7FB;
  --card-2: #DFEFF6;
  --ink: #0A2533;
  --muted: #4F6773;
  --line: rgba(10, 37, 51, .1);
  --paper: #FFFFFF;
  --paper-ink: #0A2533;
  --paper-muted: #4F6773;
  --paper-line: rgba(10, 37, 51, .1);
  --paper-accent: #04729B;
  --accent: #0593C6;
  --accent-ink: #04729B;
  --accent-soft: #DDF0F8;
  --error: #C4313B;
  /* The Pace mark: a check cut out of a disc. Pace gets the work ready; the
     check is the one thing it waits for you to give. */
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Ccircle cx='12' cy='12' r='12' fill='white'/%3E%3Cpath d='M6.8 12.6l3.5 3.5 7-7.2' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' mask='url(%23m)'/%3E%3C/svg%3E");
  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --z-bar: 10; --z-consent: 40; --z-skip: 50; --z-grain: 60;
  /* Motion: strong ease-out for anything entering or answering a press,
     ease-in-out for things moving across the screen. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--accent-soft); color: var(--ink); }
button, .btn, .yes, .link-arrow, .brand, .cc, .scroll-cue { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
/* Landscape on a notched phone: keep content clear of the sensor housing. */
@supports (padding: max(0px)) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
/* a whisper of grain, so the white reads like paper, not a screen */
body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: .035;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); } }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- brand, type ---------- */

.brand { display: inline-flex; align-items: center; gap: 10px; font: 400 28px/1 var(--serif); letter-spacing: -.01em; }
.mark {
  width: 20px; height: 20px; flex: none; background: var(--accent);
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat;
}
.mark.big { display: inline-block; width: .82em; height: .82em; vertical-align: -.06em; }
.h2 { font: 400 clamp(46px, 6.2vw, 80px)/.98 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.sub { margin-top: 22px; font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
.kind { display: block; font-size: 12.5px; font-weight: 500; letter-spacing: .01em; color: var(--accent-ink); margin-bottom: 2px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--ink); color: var(--bg);
  font: 500 16px/1 var(--sans); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 150ms ease, filter 150ms ease, opacity 150ms ease;
}
/* Hover only where there is a real pointer; on touch it sticks after a tap. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(.92); }
  .btn.ghost:hover { filter: none; background: #CFE6F1; }
}
.btn:not(.tiny):not(.off):not(:disabled):active { transform: scale(.97); transition-duration: 100ms; }
.btn:disabled { opacity: .7; cursor: progress; }
.btn.ghost { background: var(--card-2); color: var(--ink); }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn.tiny { min-height: 32px; padding: 0 14px; font-size: 13px; cursor: default; }
.btn.tiny:not(.ghost) { background: var(--accent-ink); color: #FFFFFF; }
.btn.wide { width: 100%; }
.btn.off { color: var(--muted); cursor: default; }

/* ---------- bar ---------- */

.bar { position: sticky; top: 0; z-index: var(--z-bar); background: rgba(252, 255, 255, .82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.bar.scrolled { border-bottom-color: var(--line); }
.bar-in { display: flex; align-items: center; gap: 40px; height: 64px; }
.brand { transition: transform 160ms var(--ease-out); }
.brand:active { transform: scale(.97); }
.links { display: none; gap: 28px; font-size: 15px; }
.links a { position: relative; color: var(--ink); opacity: .7; transition: opacity 200ms ease; }
.links a[aria-current] { opacity: 1; }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 250ms var(--ease-out); }
.links a[aria-current]::after { transform: none; }
@media (hover: hover) and (pointer: fine) { .links a:hover { opacity: 1; } }
@media (min-width: 880px) { .links { display: flex; } }
.bar-cta { margin-left: auto; display: flex; gap: 8px; }
@media (max-width: 560px) { .hide-sm { display: none; } }

/* ---------- hero: the whole screen, then Ace's note ---------- */

/* Without .flow (phones, reduced motion, no JS) the hero is one screen of
   headline and the note simply follows it. With .flow the section is tall,
   the stage pins, and site.js sets --p (0 to 1) as you scroll: the headline
   lifts away and the scattered chips fly into the note's rows. */
/* clip: the tilted back sheet must not widen a phone screen */
.hero { position: relative; isolation: isolate; text-align: center; overflow-x: clip; }
.stage { position: relative; }
.backdrop {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(5, 147, 198, .16), transparent 70%),
    radial-gradient(40% 40% at 85% 90%, rgba(5, 147, 198, .08), transparent 70%),
    radial-gradient(rgba(5, 147, 198, .22) 1px, transparent 1.4px) 0 0 / 28px 28px;
  -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent);
}
.hero-copy { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100svh - 64px); padding-top: 40px; padding-bottom: 88px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; font-size: 14px; color: var(--muted);
  background: rgba(252, 255, 255, .7); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.eyebrow .mark { width: 16px; height: 16px; }
.hero-title { margin-top: 22px; font: 400 clamp(64px, min(13vw, 19svh), 200px)/.86 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.hero-title em {
  display: block; padding-right: .08em; font-style: italic; color: transparent;
  background: linear-gradient(100deg, var(--ink) 0%, var(--accent-ink) 35%, var(--accent) 80%); -webkit-background-clip: text; background-clip: text;
}
.h2 em, .h3 em { font-style: italic; color: var(--accent); }
.hero-sub { margin-top: 26px; max-width: 34em; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--muted); }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 30px; }

/* Ace's work in glass, waiting at the edges of the screen */
.chips { display: none; }
.chip {
  position: absolute; left: var(--x); top: var(--y); width: 228px; padding: 13px 16px; border-radius: 16px; text-align: left;
  background: rgba(252, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 20px 50px -20px rgba(10, 37, 51, .3);
  transform: rotate(var(--r)); will-change: transform, opacity;
}
.chip b { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.chip small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.chip .kind { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.chip.ask { border-color: rgba(5, 147, 198, .35); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 20px 50px -20px rgba(5, 147, 198, .4); }
.chip.ask .kind { color: var(--accent-ink); }
.chip.ask .kind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.chip.done .kind::before { content: ""; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }

.note-wrap { display: grid; gap: 40px; justify-items: center; padding: 24px 16px 40px; }
.note-wrap .letter { text-align: left; }
.note-cap { max-width: 22ch; font: 400 clamp(38px, 4.4vw, 56px)/1 var(--serif); letter-spacing: -.02em; }
.note-cap small { display: block; margin: 16px auto 0; max-width: 30ch; font: 400 16px/1.55 var(--sans); letter-spacing: 0; color: var(--muted); }
.scroll-cue { display: none; }

.hero.flow { height: 320svh; }
.flow .stage { position: sticky; top: 64px; height: calc(100svh - 64px); overflow: hidden; }
.flow .hero-copy { position: absolute; inset: 0; min-height: 0; will-change: transform, opacity; }
.flow .chips { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.flow .note-wrap { position: absolute; inset: 0; padding: 0; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 56px; pointer-events: none; }
.flow .note-wrap.live { pointer-events: auto; }
.flow .note-cap { justify-self: end; text-align: right; opacity: 0; }
.flow .note-cap small { margin-right: 0; }
.flow .letter-stack { width: 460px; opacity: 0; }
.flow .tray li > * { opacity: 0; }
@media (max-width: 1239px) { .flow .note-cap { display: none; } .flow .note-wrap { grid-template-columns: 1fr; } }
.flow .scroll-cue { display: block; position: absolute; left: 50%; bottom: 24px; width: 26px; height: 42px; margin-left: -13px; border-radius: 99px; border: 1.5px solid rgba(10, 37, 51, .25); }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 99px; background: var(--accent); animation: cue 1.8s var(--ease-in-out) 1s 4 both; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; color: var(--muted); font-weight: 500; transition: color 200ms ease, transform 160ms var(--ease-out); }
.link-arrow span { transition: transform 250ms var(--ease-out); }
.link-arrow:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { color: var(--ink); }
  .link-arrow:hover span { transform: translateX(3px); }
}

/* the note sits on a second sheet, like a card left at the front desk */
.letter-stack { position: relative; max-width: 500px; width: 100%; justify-self: center; }
.letter-stack::before {
  content: ""; position: absolute; inset: 10px -6px -10px 6px; border-radius: 18px; background: #BFE0EE; opacity: .6;
  transform: rotate(3deg);
}
.letter {
  position: relative; padding: 26px 26px 22px; border-radius: 18px; background: var(--paper); color: var(--paper-ink);
  background-image: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .55), transparent 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(10, 37, 51, .06), 0 40px 80px -30px rgba(10, 37, 51, .28), 0 70px 140px -60px rgba(5, 147, 198, .4);
}
@media (min-width: 980px) { .letter { transform: rotate(-1.5deg); padding: 32px 34px 26px; } }
.letter-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--paper-muted); }
.letter-head img { width: 26px; height: 26px; border-radius: 50%; }
.letter-head b { color: var(--paper-ink); font-weight: 500; }
.letter-head time { margin-left: auto; font-variant-numeric: tabular-nums; }
.letter-hi { margin-top: 22px; font: italic 400 clamp(36px, 4vw, 44px)/1 var(--serif); letter-spacing: -.01em; }
.letter-body { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--paper-muted); }
.tray { margin-top: 20px; border-top: 1px solid var(--paper-line); }
.tray li { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--paper-line); }
.tray .kind { color: var(--paper-accent); font-size: 12.5px; }
.tray b { display: block; font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.tray small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--paper-muted); }
/* on a small phone the yes goes under its item, so the item keeps a readable line */
@media (max-width: 420px) { .tray li { grid-template-columns: 1fr; gap: 10px; } .tray .yes { justify-self: start; } }
/* min-width fits "✓ Approved" too, so the row never shifts when you say yes */
.yes {
  min-height: 36px; min-width: 118px; padding: 0 16px; border: 1px solid var(--paper-ink); border-radius: 999px; background: none;
  color: var(--paper-ink); font: 500 14px/1 var(--sans); cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.yes > span { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .yes:hover { background: var(--paper-ink); color: var(--paper); }
}
.yes:active { transform: scale(.96); transition-duration: 100ms; }
.yes[aria-pressed="true"] { border-color: var(--accent-ink); background: var(--accent-ink); color: #FFFFFF; }
.letter-foot { margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--paper-muted); }
.letter-sign { margin-top: 10px; font: italic 400 30px/1 var(--serif); text-align: right; }
.letter-sign::before { content: "— "; }

/* the note writes itself once it is on screen */
[data-play] > * { opacity: 0; transform: translateY(8px); transition: opacity 500ms ease, transform 600ms var(--ease-out); }
[data-play].in > * { opacity: 1; transform: none; }
[data-play].in > :nth-child(2) { transition-delay: 80ms; }
[data-play].in > :nth-child(3) { transition-delay: 200ms; }
[data-play].in > :nth-child(4) { transition-delay: 350ms; }
[data-play].in > :nth-child(5) { transition-delay: 550ms; }
[data-play].in > :nth-child(6) { transition-delay: 700ms; }

/* ---------- sections ---------- */

.block { padding: 64px 0 80px; }
@media (min-width: 960px) { .block { padding: 104px 0 128px; } }
.block.slim { padding: 24px 0; }
@media (min-width: 960px) { .block.slim { padding: 32px 0; } }

/* split: heading holds its place while the list scrolls past */
.split { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .split-head { position: sticky; top: 112px; }
}
.split-head .sub a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- a week with Ace ---------- */

.week { position: relative; }
.week::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 40px; width: 1px; background: linear-gradient(var(--line) 85%, transparent); }
.day {
  position: relative; display: grid; gap: 10px; padding: 0 0 48px 36px;
}
.day::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--muted); }
.day.wait::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.when { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.when b { margin-right: 10px; color: var(--ink); font-weight: 500; }
.said { max-width: 30em; font: 400 clamp(22px, 2.3vw, 29px)/1.28 var(--serif); letter-spacing: -.005em; }
.said.you { font-style: italic; color: var(--muted); }
.then { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 13.5px; color: var(--muted); }
.then::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; opacity: .6; }
.then.yes-d, .day.wait .then { color: var(--accent-ink); }
.then.yes-d::before, .day.wait .then::before { opacity: 1; }

/* ---------- the yes ---------- */

.feature {
  position: relative; display: grid; gap: 40px; padding: 44px 28px; border-radius: 32px; overflow: hidden;
  background: radial-gradient(70% 90% at 85% 50%, rgba(5, 147, 198, .12), transparent 70%), var(--card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
@media (min-width: 860px) { .feature { grid-template-columns: 1.15fr .85fr; align-items: center; padding: 64px 72px; } }
.feature-art { display: grid; place-items: center; }
.steps { display: grid; gap: 22px; margin-top: 36px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 32px 1fr; column-gap: 16px; counter-increment: step; }
.steps li::before {
  content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--accent-ink); font: italic 400 18px/1 var(--serif);
}
.steps b { font-size: 17px; font-weight: 500; line-height: 32px; }
.steps p { font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 44ch; }
.feature-art svg { width: min(220px, 56vw); overflow: visible; }
@media (min-width: 860px) { .feature-art svg { width: 280px; } }
/* The Pace mark at poster size (--mark's geometry, scaled from 24 to 200).
   The disc settles in, then the check is drawn: the yes. */
.seal-disc { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.seal-check { fill: none; stroke: var(--card); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.feature.in .seal-disc { animation: settle .9s cubic-bezier(.2, .8, .2, 1.05) .2s both; }
.feature.in .seal-check { animation: draw .7s cubic-bezier(.65, 0, .35, 1) .9s both; }
@keyframes settle { from { opacity: 0; transform: scale(.82); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- at your service ---------- */

#jobs { position: relative; isolation: isolate; overflow: hidden; }
#jobs::before { content: ""; position: absolute; z-index: -1; left: -10%; top: 30%; width: min(1000px, 130vw); height: 600px; background: radial-gradient(closest-side, rgba(5, 147, 198, .08), transparent 72%); pointer-events: none; }
.asks { margin-top: 44px; max-width: 1100px; font: italic 400 clamp(26px, 3.6vw, 48px)/1.32 var(--serif); color: rgba(10, 37, 51, .26); text-wrap: pretty; }
.asks q { transition: color 500ms ease; }
.asks q::after { content: "”\2003"; }
.asks q::before { content: "“"; }
.asks q.lit { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .asks q:hover { color: var(--ink); transition-duration: 150ms; } }
.asks-foot { margin-top: 40px; max-width: 46ch; font-size: 16px; color: var(--muted); }

/* ---------- pricing, in a line ---------- */

.terms { display: grid; gap: 20px; padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 960px) { .terms { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }
.h3 { font: 400 clamp(32px, 3.6vw, 44px)/1.05 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.terms-lead { font-size: 18px; line-height: 1.55; }
.terms .price-note { margin: 14px 0 0; max-width: none; text-align: left; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- faq: every answer in view, no accordions ---------- */

.faqs { display: grid; gap: 36px 40px; }
@media (min-width: 640px) { .faqs { grid-template-columns: 1fr 1fr; } }
.faqs div { padding-top: 18px; border-top: 1px solid var(--line); }
.faqs dt { font-size: 17px; font-weight: 500; line-height: 1.35; }
.faqs dd { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.faqs dd a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 404 ---------- */

.lost { min-height: calc(100dvh - 64px); display: grid; align-content: center; padding-top: 64px; padding-bottom: 96px; }
.lost .letter { max-width: 520px; margin-top: 40px; }
.lost .letter-body a { color: var(--paper-ink); text-decoration: underline; text-underline-offset: 3px; }

/* final */

.final { position: relative; padding: 72px 0 112px; isolation: isolate; overflow: hidden; }
.final::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(900px, 140vw); height: 520px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(5, 147, 198, .14), transparent 72%); pointer-events: none;
}
.final .h2 { font-size: clamp(52px, 7.4vw, 96px); }
.final .sub { max-width: 34ch; }
.final-in { display: flex; flex-direction: column; align-items: center; }
/* minmax(0, 1fr): the fields' intrinsic widths never push the form past a narrow screen */
.join { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; max-width: 460px; margin-top: 32px; }
.join-row { display: flex; align-items: center; gap: 8px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; transition: border-color 150ms ease, box-shadow 200ms var(--ease-out); }
.join-row:focus-within { border-color: rgba(5, 147, 198, .55); box-shadow: 0 0 0 4px rgba(5, 147, 198, .12); }
.join-row.bad { border-color: var(--error); }
.join input { flex: 1; min-width: 0; padding: 0 16px; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; }
.join input::placeholder { color: var(--muted); }
/* Phone: a native select (keyboard and phone pickers for free) laid invisibly
   over a short "flag +code" label, then the number, formatted as you type. */
.join-row.phone { min-height: 52px; }
.join-row.phone input { padding-left: 4px; }
.cc { position: relative; display: inline-flex; align-items: center; flex: none; height: 38px; padding: 0 28px 0 12px; border-radius: 999px; background: var(--card-2); font-size: 15px; white-space: nowrap; }
.cc::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .cc:hover { background: #CFE6F1; } }
.cc:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.opt { flex: none; padding-right: 14px; font-size: 13px; color: var(--muted); }
.join-err { padding: 0 18px; font-size: 14px; color: var(--error); }
.join-err:not([hidden]) { animation: rise 200ms var(--ease-out); }
/* a field that fails gives a small shake, the way a lock screen says no */
.join-row.bad, .dob.bad, .check.bad { animation: nope 320ms var(--ease-out); }
@keyframes nope { 20% { transform: translateX(-4px); } 45% { transform: translateX(3px); } 70% { transform: translateX(-2px); } }
.join.done { display: block; padding: 15px 20px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); text-align: center; font-weight: 500; animation: rise 400ms var(--ease-out); }
.note { margin-top: 12px; font-size: 14px; color: var(--muted); }
@media (max-width: 420px) {
  .join-row:not(.phone) { flex-direction: column; align-items: stretch; border-radius: 22px; }
  .join input { min-height: 48px; }
  .opt { display: none; }
}
/* footer */

.foot { border-top: 1px solid var(--line); padding: 32px 0 calc(40px + env(safe-area-inset-bottom, 0px)); position: relative; background: var(--bg); }
.foot-in { display: grid; gap: 28px; }
@media (min-width: 860px) { .foot-in { grid-template-columns: 1fr 1.4fr; } }
.foot-brand p { margin-top: 12px; font-size: 13px; color: var(--muted); }
.foot-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; font-size: 14px; }
@media (min-width: 560px) { .foot-cols { grid-template-columns: repeat(3, 1fr); } }
.foot-ai { max-width: 34ch; }
.foot-cols div { display: grid; gap: 8px; align-content: start; }
.foot-cols b { font-weight: 500; margin-bottom: 4px; }
.foot-cols a, .foot-cols span { color: var(--muted); }
.foot-cols a, .foot-btn { transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .foot-cols a:hover, .foot-btn:hover { color: var(--ink); } }
.foot-cols a[aria-current="page"] { color: var(--ink); }
.foot-btn { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-align: left; cursor: pointer; }

/* skip link */

.skip { position: absolute; left: 16px; top: -60px; z-index: var(--z-skip); padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 500; }
.skip:focus { top: 12px; }

/* ---------- consent: banner and preference center ---------- */

.consent {
  position: fixed; z-index: var(--z-consent); left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin: 0 auto;
  padding: 18px 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 24px 60px -20px rgba(10, 37, 51, .3); font-size: 14.5px; line-height: 1.5; color: var(--muted);
  animation: rise 400ms var(--ease-out) both;
}
@media (min-width: 720px) { .consent { left: 24px; right: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); margin: 0; } }
.consent b { color: var(--ink); font-weight: 500; }
.consent a, .prefs a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.consent-gpc { margin-top: 8px; font-size: 13px; color: var(--accent-ink); }
.consent-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.consent-a .btn { flex: 1 1 auto; }

.prefs { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 1px solid var(--line); border-radius: 26px; background: var(--card); color: var(--ink); overscroll-behavior: contain; }
.prefs::backdrop { background: rgba(10, 37, 51, .35); backdrop-filter: blur(4px); }
/* A modal, so it grows from the middle of the screen, never from nothing. */
.prefs[open] { animation: pop 240ms var(--ease-out); }
.prefs[open]::backdrop { animation: fade 240ms ease; }
.prefs.closing { animation: unpop 150ms var(--ease-out) forwards; }
.prefs.closing::backdrop { animation: fade 150ms ease reverse forwards; }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(6px); } }
@keyframes unpop { to { opacity: 0; transform: scale(.98); } }
@keyframes fade { from { opacity: 0; } }
.prefs-in { position: relative; padding: 26px 24px 22px; }
.prefs h2 { font-size: 22px; font-weight: 500; letter-spacing: -.01em; padding-right: 32px; }
.prefs-sub { margin-top: 6px; font-size: 14.5px; color: var(--muted); }
.prefs-list { margin-top: 18px; border-top: 1px solid var(--line); }
.prefs-list li { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
.prefs-list b { font-weight: 500; font-size: 15.5px; }
.prefs-list p { margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.prefs-rec { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.prefs-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--card-2); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 150ms ease; }
.prefs-x:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .prefs-x:hover { background: #CFE6F1; } }

/* a switch is a real checkbox, restyled */
.switch { position: relative; flex: none; display: inline-block; width: 46px; height: 28px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch input:disabled { cursor: not-allowed; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #C3D7E0; transition: background-color 200ms ease; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(10, 37, 51, .2); transition: transform 220ms cubic-bezier(.3, .7, .2, 1.2); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }
/* the thumb squashes a little while held, like iOS */
.switch input:not(:disabled):active + span::after { transform: scaleX(1.15); transform-origin: left; }
.switch input:checked:not(:disabled):active + span::after { transform: translateX(18px) scaleX(1.15); transform-origin: right; }
.switch input:disabled + span { opacity: .55; }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- form controls shared by the waitlist and the legal forms ---------- */

.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--muted); text-align: left; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.check b { color: var(--ink); font-weight: 500; }
.check small { display: block; margin-top: 4px; font-size: 12.5px; }
.check.bad { color: var(--error); }
.dob { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 6px 6px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-size: 15px; color: var(--muted); }
.dob.bad { border-color: var(--error); }
.dob select { flex: 1; min-width: 104px; height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--card-2); color: var(--ink); font: inherit; font-size: 16px; }
@media (max-width: 420px) { .dob { border-radius: 22px; padding: 10px 12px; } .dob > span { width: 100%; } }
.join-checks { display: grid; gap: 12px; padding: 6px 4px 0; }

/* Reduced motion keeps the fades that explain a change and drops the travel. */
@media (prefers-reduced-motion: reduce) {
  .consent, .join.done, .join-err:not([hidden]), .prefs[open] { animation: fade 200ms ease; }
  .join-row.bad, .dob.bad, .check.bad { animation: none; }
  .switch span::after { transition: none; }
  html { scroll-behavior: auto; }
  [data-play] > * { opacity: 1; transform: none; transition: none; }
  [data-sms-row]:not([hidden]), .prefs.closing { animation: fade 150ms ease; }
  .btn:active, .yes:active, .link-arrow:active, .brand:active { transform: none; }
  .seal-check { stroke-dashoffset: 0; }
  .feature.in .seal-disc, .feature.in .seal-check { animation: none; }
  .scroll-cue span { animation: none; }
}
.price-note { max-width: 680px; margin: 24px auto 0; font-size: 14px; line-height: 1.6; color: var(--muted); text-align: center; }
.price-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.join-blocked { max-width: 460px; margin-top: 32px; padding: 18px 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); text-align: center; color: var(--muted); }
.join.done a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.check[hidden] { display: none; }
[data-sms-row]:not([hidden]) { animation: rise 240ms var(--ease-out); }

/* Glass only where the reader wants it: solid surfaces for reduced
   transparency, firmer edges and darker secondary text for more contrast. */
@media (prefers-reduced-transparency: reduce) {
  .bar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .eyebrow, .chip { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .prefs::backdrop { backdrop-filter: none; background: rgba(10, 37, 51, .55); }
  body::after { display: none; }
}
@media (prefers-contrast: more) {
  :root { --muted: #2F4550; --line: rgba(10, 37, 51, .35); --paper-muted: #2F4550; --paper-line: rgba(10, 37, 51, .3); }
  .asks { color: rgba(10, 37, 51, .5); }
}