/* Dr. HiFive webinar funnel. "Lamplight", built to the high-end-visual-design standard.
   Vibe: Editorial Luxury on a night ground: night teal, cream paper, antique gold, dusty rose, film grain.
   Layout: Z-axis cascade. Paper objects (envelopes, polaroid, report card, notes) overlap and tilt from 768px up,
   and lie flat in one column on phones, where overlaps would fight fingers.
   Rules: every card is a double bezel (.bezel shell + .core), every button carries its arrow in its own circle,
   motion is transform and opacity on custom curves, and nothing listens to scroll events.
   No filter blur or drop-shadow over the gradient glows (Chrome paints a square behind them); the only blur is
   backdrop blur on the two fixed bars, and the short blur-to-sharp of the scroll reveal. */

@font-face { font-family: 'Fraunces Soft'; src: url(fonts/FrauncesSoft-roman.woff2) format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces Soft'; src: url(fonts/FrauncesSoft-italic.woff2) format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(fonts/DMSans-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(fonts/DMSans-Italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(fonts/DMSans-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(fonts/DMSans-SemiBold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(fonts/DMSans-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Kalam'; src: url(fonts/Kalam-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Kalam'; src: url(fonts/Kalam-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --night: #0B1D23;
  --night-deep: #071419;
  --shell: #12252B;
  --ivory: #F6EFE3;
  --ivory-2: rgba(246, 239, 227, .72);
  --ivory-3: rgba(246, 239, 227, .52);
  --hair: rgba(246, 239, 227, .09);
  --paper: #F5EEE2;
  --paper-core: #FCF8F1;
  --paper-2: #EDE3D2;
  --ink: #13303C;
  --ink-2: #3B555D;
  --ink-3: #66797E;
  --ink-hair: rgba(19, 48, 60, .1);
  --gold: #D8B26E;
  --gold-2: #EBCF97;
  --gold-3: #946D2F;
  --gold-4: #7C5A26;       /* gold for words on paper: 4.5:1 even on the dimmed dark-mode paper */
  --rose: #E7A496;
  --rose-2: #B9685A;
  --lamp: #C07A2E;
  --blank: #F0A23B;
  --green: #25D366;

  --serif: 'Fraunces Soft', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Kalam', 'Comic Sans MS', cursive;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-drift: cubic-bezier(.45, .05, .55, .95);
  --gutter: 16px;
  --max: 1240px;
  color-scheme: light dark;
}
/* On a phone in dark mode the cream dims a little, so the page doesn't glare at night. */
@media (prefers-color-scheme: dark) {
  :root { --paper: #E9DFCC; --paper-core: #F2EADB; --paper-2: #E0D3BC; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--night); color: var(--ivory);
  font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* film grain: one fixed layer over everything, never on a scrolling box */
body::after { content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none; background: url(img/grain.png) repeat; opacity: .45; }
main { display: block; overflow-x: clip; width: 100%; }
img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
::selection { background: rgba(216, 178, 110, .35); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { width: 18px; height: 18px; flex: none; }

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 430; line-height: 1.04; letter-spacing: -.022em; font-optical-sizing: auto; text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 1.15rem + 3.9vw, 4.4rem); }
h3 { font-size: clamp(1.3rem, 1.16rem + .5vw, 1.6rem); font-weight: 480; letter-spacing: -.012em; line-height: 1.18; }
h1 em, h2 em { font-style: italic; color: var(--gold); }
p { margin: 0 0 1em; text-wrap: pretty; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }
.blank { color: var(--blank); border-bottom: 1.5px dashed currentColor; font-style: normal; white-space: nowrap; }
.hand { font-family: var(--hand); font-weight: 400; }

/* ---------- eyebrow pills ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 26px; padding: 7px 14px; border-radius: 999px;
  font: 500 10.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  background: rgba(216, 178, 110, .07); box-shadow: inset 0 0 0 1px rgba(216, 178, 110, .24);
}
.eyebrow .i { width: 12px; height: 12px; }
.band--paper .eyebrow { color: var(--gold-3); background: rgba(19, 48, 60, .045); box-shadow: inset 0 0 0 1px rgba(19, 48, 60, .12); }
.eyebrow--hero { gap: 10px; padding: 6px 14px 6px 10px; }
.eyebrow--hero .rest { font-size: 12.5px; letter-spacing: .01em; text-transform: none; white-space: nowrap; color: var(--ivory-2); }
.eyebrow--hero .long { display: none; }
.eyebrow--hero .rest::before { content: ''; display: inline-block; width: 1px; height: 11px; margin: 0 10px -1px 0; background: rgba(216, 178, 110, .35); }
.live-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #F07A5F; flex: none; }
.live-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: rgba(240, 122, 95, .45); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }

/* ---------- buttons: the arrow lives in its own circle ---------- */
.btn {
  --bg: linear-gradient(180deg, #E8CB90, #D4AB63); --fg: var(--night); --ico-bg: var(--night); --ico-fg: var(--gold-2);
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 7px 7px 7px 28px; border: 0; border-radius: 999px;
  background: var(--bg); color: var(--fg); text-decoration: none; white-space: nowrap;
  font: 600 1.02rem/1.1 var(--sans); letter-spacing: .005em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(90, 62, 18, .22), 0 22px 44px -22px rgba(216, 178, 110, .6);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(90, 62, 18, .22), 0 30px 56px -22px rgba(216, 178, 110, .78); }
.btn:active { transform: scale(.98); }
.btn-ico {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: var(--ico-bg); color: var(--ico-fg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .6s var(--ease);
}
.btn-ico .i { width: 19px; height: 19px; }
.btn:hover .btn-ico { transform: translate(3px, -1px) scale(1.06); }
.btn--lg { min-height: 66px; padding-left: 32px; font-size: 1.08rem; }
.btn--lg .btn-ico { width: 52px; height: 52px; }
.btn--sm { min-height: 42px; gap: 10px; padding: 4px 4px 4px 16px; font-size: .88rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 26px -14px rgba(216, 178, 110, .7); }
.btn--sm .btn-ico { width: 34px; height: 34px; }
.btn--sm .btn-ico .i { width: 15px; height: 15px; }
.btn--night {
  --bg: linear-gradient(180deg, #17404A, #0B1D23); --fg: var(--ivory); --ico-bg: linear-gradient(180deg, #E8CB90, #D4AB63); --ico-fg: var(--night);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 44px -24px rgba(11, 29, 35, .75);
}
.btn--night:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 54px -24px rgba(11, 29, 35, .9); }
.btn--ghost { --bg: rgba(246, 239, 227, .04); --fg: var(--ivory); --ico-bg: rgba(216, 178, 110, .13); --ico-fg: var(--gold); min-height: 52px; gap: 12px; padding: 5px 5px 5px 20px; font-size: .92rem; box-shadow: inset 0 0 0 1px rgba(216, 178, 110, .3); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(216, 178, 110, .65); }
.btn--ghost .btn-ico { width: 40px; height: 40px; }
.btn--wide { width: 100%; }
.btn[disabled], .btn[aria-busy='true'] { cursor: progress; }
.btn[aria-busy='true'] .btn-ico { transform: none; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .9s cubic-bezier(.55, .15, .45, .85) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- the floating island nav ---------- */
.island {
  position: fixed; z-index: 40; top: 12px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 8px;
  padding: 5px 5px 5px 12px; border-radius: 999px;
  background: rgba(11, 29, 35, .62); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(246, 239, 227, .11), inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 48px -24px rgba(2, 9, 11, .75);
  animation: island-in 1s var(--ease) .05s both;
}
@keyframes island-in { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ivory); }
.brand img { width: 30px; height: 30px; }
.brand b { font: 500 1.06rem/1 var(--serif); letter-spacing: -.01em; }
.island-date { display: none; align-items: center; gap: 9px; height: 30px; margin-left: 6px; padding: 0 12px 0 16px; font-size: .84rem; color: var(--ivory-2); box-shadow: inset 1px 0 0 rgba(246, 239, 227, .12); }
.island .btn { margin-left: 10px; }

/* ---------- bands, glows, doodles ---------- */
.band { position: relative; isolation: isolate; padding: 96px 0; }
.band--paper { background: var(--paper); color: var(--ink); }
.band--deep { background: var(--night-deep); }
.section-head { max-width: 900px; margin: 0 auto 56px; }
.section-head.center { text-align: center; }
.section-head p:not(.eyebrow) { margin: 24px auto 0; max-width: 640px; font-size: 1.1rem; color: var(--ivory-2); }
.band--paper .section-head p:not(.eyebrow) { color: var(--ink-2); }

.mesh { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; }
.orb--lamp { width: 980px; height: 980px; right: -340px; top: -380px; background: radial-gradient(closest-side, rgba(192, 122, 46, .4), rgba(192, 122, 46, .13) 48%, rgba(192, 122, 46, 0) 72%); animation: drift 22s var(--ease-drift) infinite alternate; }
.orb--rose { width: 760px; height: 760px; left: -380px; top: 46%; background: radial-gradient(closest-side, rgba(231, 164, 150, .15), rgba(231, 164, 150, 0) 70%); }
.orb--teal { width: 1100px; height: 760px; left: 50%; top: 4%; margin-left: -550px; background: radial-gradient(closest-side, rgba(28, 106, 115, .26), rgba(28, 106, 115, 0) 72%); }
.orb--low { top: auto; bottom: -520px; right: 50%; margin-right: -490px; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-90px, 70px, 0); } }

.scatter { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.scatter .d { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); transform: rotate(var(--r, 0deg)); color: var(--gold); opacity: .2; }
.band--paper .scatter .d { color: var(--rose-2); opacity: .26; }
.scatter .d.wide { display: none; }

/* ---------- the double bezel ---------- */
.bezel {
  --r: 2rem; --pad: 6px;
  padding: var(--pad); border-radius: var(--r);
  background: rgba(246, 239, 227, .035);
  box-shadow: inset 0 0 0 1px rgba(246, 239, 227, .085), 0 40px 80px -48px rgba(2, 9, 11, .72);
}
.bezel > .core {
  position: relative; border-radius: calc(var(--r) - var(--pad));
  background: linear-gradient(180deg, #112830, #0D2127);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .07);
}
.band--paper .bezel, .bezel--paper {
  background: rgba(19, 48, 60, .04);
  box-shadow: inset 0 0 0 1px rgba(19, 48, 60, .085), 0 34px 64px -40px rgba(74, 50, 16, .34);
}
.band--paper .bezel > .core, .bezel--paper > .core { background: var(--paper-core); color: var(--ink); box-shadow: inset 0 1px 1px #fff; }
.bezel--paper { background: rgba(246, 239, 227, .07); box-shadow: inset 0 0 0 1px rgba(246, 239, 227, .14), 0 50px 90px -50px rgba(2, 9, 11, .8); }

/* sticky notes and tape: the childlike paper layer */
.note {
  position: relative; padding: 16px 18px 18px; border-radius: 3px 3px 16px 3px;
  background: linear-gradient(180deg, #F6E7BF, #EFD9A3); color: #3A2E14; font: 400 1.08rem/1.35 var(--hand);
  box-shadow: 0 22px 34px -20px rgba(40, 26, 6, .55), inset 0 -14px 22px -18px rgba(120, 80, 20, .35);
}
.note::before { content: ''; position: absolute; top: -11px; left: 50%; width: 78px; height: 22px; margin-left: -39px; background: rgba(246, 239, 227, .62); transform: rotate(-3deg); }
.tape { position: absolute; z-index: 3; width: 74px; height: 22px; border-radius: 2px; background: rgba(231, 164, 150, .5); pointer-events: none; }

/* ---------- hero ---------- */
.hero { position: relative; z-index: 2; isolation: isolate; padding: 112px 0 64px; text-align: center; }
.hero h1 { max-width: 1180px; margin: 0 auto; font-size: clamp(2.45rem, .95rem + 5.5vw, 5.25rem); line-height: 1; letter-spacing: -.028em; }
.hero h1 .secrets { position: relative; display: inline-block; font-style: italic; color: var(--gold); white-space: nowrap; }
.hero h1 .secrets svg { position: absolute; left: -2%; top: -3%; width: 106%; height: 110%; color: var(--rose); opacity: .75; overflow: visible; pointer-events: none; animation: ring-in 1.1s var(--ease-pop) .45s both; }
.hero h1 .relationship { position: relative; white-space: nowrap; }
.hero h1 .relationship svg { position: absolute; left: 0; bottom: -.12em; width: 100%; height: .28em; color: var(--gold); transform-origin: left center; animation: draw-x 1.1s var(--ease) .8s both; }
@keyframes ring-in { from { opacity: 0; transform: scale(.86) rotate(-5deg); } to { opacity: .75; transform: none; } }
@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lede { max-width: 660px; margin: 26px auto 0; text-wrap: balance; font-size: clamp(1.06rem, 1rem + .45vw, 1.28rem); line-height: 1.6; color: var(--ivory-2); }
.lede strong { color: var(--ivory); font-weight: 500; }
.lede .promise { display: block; margin-bottom: 12px; font: 400 italic clamp(1.3rem, 1.12rem + .7vw, 1.65rem)/1.38 var(--serif); letter-spacing: -.01em; color: var(--ivory); }
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 36px; }
.meta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: .88rem; color: var(--ivory-2); }
.meta-row li { display: inline-flex; align-items: center; gap: 7px; }
.meta-row .i { width: 16px; height: 16px; color: var(--gold); }

.video-wrap { position: relative; max-width: 980px; margin: 52px auto 0; }
.video-shell { --r: 2.25rem; --pad: 7px; position: relative; background: linear-gradient(180deg, rgba(246, 239, 227, .08), rgba(246, 239, 227, .025)); box-shadow: inset 0 0 0 1px rgba(246, 239, 227, .11), 0 50px 100px -50px rgba(2, 9, 11, .8), 0 0 140px -40px rgba(192, 122, 46, .38); }
.video-shell > .core { aspect-ratio: 16 / 9; overflow: hidden; background: #091A1F; }
.video-shell iframe, .video-shell video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video-shell .tape--a { top: -11px; left: -16px; transform: rotate(-22deg); }
.video-shell .tape--b { right: -16px; bottom: -9px; transform: rotate(-20deg); background: rgba(216, 178, 110, .5); }
.poster {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; display: block; text-align: left; color: var(--ivory);
  background: radial-gradient(90% 80% at 80% 8%, rgba(192, 122, 46, .42), transparent 60%), radial-gradient(70% 70% at 8% 100%, rgba(231, 164, 150, .13), transparent 60%), linear-gradient(160deg, #173A44, #0B1D23 72%);
}
.poster .ghost { position: absolute; color: var(--gold); opacity: .07; }
.poster .ghost--a { right: 7%; bottom: -12%; width: 30%; transform: rotate(14deg); }
.poster .ghost--b { left: 8%; top: 12%; width: 12%; color: var(--rose); opacity: .12; transform: rotate(-16deg); }
.play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; display: grid; place-items: center; border-radius: 50%; background: rgba(246, 239, 227, .07); box-shadow: inset 0 0 0 1px rgba(246, 239, 227, .2); transition: transform .7s var(--ease); }
.play span { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(180deg, #EBCF97, #D2A960); color: var(--night); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 14px 30px -10px rgba(216, 178, 110, .6); transition: transform .7s var(--ease); }
.play .i { width: 24px; height: 24px; margin-left: 4px; }
.poster:hover .play { transform: scale(1.06); }
.poster:hover .play span { transform: scale(1.04); }
.poster-cap { position: absolute; left: 20px; right: 16px; bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.poster-cap .t { font: 400 italic clamp(1.02rem, .85rem + 1.1vw, 1.75rem)/1.15 var(--serif); }
.poster-cap .meta { flex: none; padding: 6px 11px; border-radius: 999px; font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); background: rgba(11, 29, 35, .55); box-shadow: inset 0 0 0 1px rgba(216, 178, 110, .3); }
.poster[data-empty] { cursor: default; }
.poster[data-empty] .play span { background: rgba(216, 178, 110, .16); color: var(--gold); box-shadow: none; }
.video-note { display: none; }

/* the trust plaque closes the hero */
.plaque { --r: 1.75rem; max-width: 1080px; margin: 56px auto 0; }
.plaque .core { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; }
.plaque li { padding: 20px 12px; text-align: center; font-size: .84rem; line-height: 1.35; color: var(--ivory-2); }
.plaque li:nth-child(2) { box-shadow: inset 1px 0 0 var(--hair); }
.plaque li:nth-child(3) { box-shadow: inset 0 1px 0 var(--hair); }
.plaque li:nth-child(4) { box-shadow: inset 1px 0 0 var(--hair), inset 0 1px 0 var(--hair); }
.plaque b { display: block; margin-bottom: 4px; font: 430 1.85rem/1 var(--serif); letter-spacing: -.02em; color: var(--gold); }

/* ---------- for skimmers: a gold highlighter on the one line in a section nobody should miss, bold for the lead words ---------- */
.band strong { font-weight: 600; color: var(--ivory); }
.band--paper strong, .envelope strong, .ticket-main strong { color: var(--ink); }
mark {
  margin: 0 -.12em; padding: 0 .12em; color: var(--ivory);
  background: linear-gradient(100deg, rgba(216, 178, 110, 0) .1em, rgba(216, 178, 110, .38) .3em, rgba(216, 178, 110, .3) calc(100% - .3em), rgba(216, 178, 110, 0) calc(100% - .1em)) 0 74% / 100% 46% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.band--paper mark { color: var(--ink); background-image: linear-gradient(100deg, rgba(216, 178, 110, 0) .1em, rgba(216, 178, 110, .72) .3em, rgba(216, 178, 110, .58) calc(100% - .3em), rgba(216, 178, 110, 0) calc(100% - .1em)); }

/* ---------- 01 the cost ---------- */
.cost .wrap { max-width: 1000px; }
.cost .hands .parent { color: #C99A4E; }
.cost .hands .child { color: #D98676; }
.cost .hands .between { background: repeating-linear-gradient(90deg, rgba(19, 48, 60, .38) 0 8px, transparent 8px 16px); }
.cost .hands .between-label { color: var(--ink-3); }
.cost .hands .between-label em { color: var(--rose-2); }
.hands {
  position: relative; container-type: inline-size; height: 210px; margin: 10px auto 40px;
  --pw: 132px; --cw: 92px; --max: min(240px, calc((100cqw - var(--pw) - var(--cw)) / 2 - 8px));
}
.hands .p { position: absolute; top: 10px; width: var(--pw); height: calc(var(--pw) * 1.2); }
.hands .parent { right: 50%; margin-right: -14px; color: var(--gold); transform: rotate(10deg); }
.hands .child { left: 50%; margin-left: -12px; top: calc(10px + var(--pw) * .32); width: var(--cw); height: calc(var(--cw) * 1.2); color: var(--rose); transform: rotate(-10deg); }
.hands .between { position: absolute; left: 50%; top: calc(10px + var(--pw) * .62); width: calc(var(--max) * 2); height: 2px; transform: translateX(-50%) scaleX(0); background: repeating-linear-gradient(90deg, rgba(246, 239, 227, .5) 0 8px, transparent 8px 16px); }
.hands .between-label { position: absolute; left: 50%; top: calc(10px + var(--pw) * .62 + 14px); transform: translateX(-50%); white-space: nowrap; font: 400 1.15rem var(--hand); color: var(--ivory-2); opacity: 0; }
.hands .between-label em { display: block; font-style: normal; color: var(--rose); opacity: 0; }
.hands .sparkles { position: absolute; left: 50%; top: 34px; width: 0; height: 0; }
.hands .s { position: absolute; left: 0; top: 0; width: 20px; height: 20px; color: var(--gold); opacity: 0; transform: translate(-50%, -50%) scale(.2); }
.hands .s:nth-child(2n) { color: var(--rose); width: 15px; height: 15px; }
/* The scroll itself drives the hands where the browser can (no scroll listeners)… */
@keyframes h-parent { from { transform: translateX(0) rotate(10deg); } to { transform: translateX(calc(var(--max) * -1)) rotate(10deg); } }
@keyframes h-child { from { transform: translateX(0) rotate(-10deg); } to { transform: translateX(var(--max)) rotate(-10deg); } }
@keyframes h-line { from { transform: translateX(-50%) scaleX(0); } to { transform: translateX(-50%) scaleX(1); } }
@keyframes h-label { from { opacity: 0; } to { opacity: 1; } }
@keyframes spark { from { opacity: 0; transform: translate(-50%, -50%) scale(.2); } to { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(var(--r)); } }
@supports (animation-timeline: view()) {
  .hands { view-timeline: --hands block; }
  .hands .p, .hands .between, .hands .between-label, .hands .between-label em, .hands .s { animation-timeline: --hands; animation-fill-mode: both; animation-duration: auto; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  .hands[data-hands='apart'] .parent { animation-name: h-parent; animation-range: entry 30% cover 58%; }
  .hands[data-hands='apart'] .child { animation-name: h-child; animation-range: entry 30% cover 58%; }
  .hands[data-hands='apart'] .between { animation-name: h-line; animation-range: entry 60% cover 60%; }
  .hands[data-hands='apart'] .between-label { animation-name: h-label; animation-range: cover 46% cover 60%; }
  .hands[data-hands='apart'] .between-label em { animation-name: h-label; animation-range: cover 54% cover 64%; }
  .hands[data-hands='meet'] .parent { animation-name: h-parent; animation-direction: reverse; animation-range: entry 20% cover 50%; }
  .hands[data-hands='meet'] .child { animation-name: h-child; animation-direction: reverse; animation-range: entry 20% cover 50%; }
  .hands[data-hands='meet'] .s { animation-name: spark; animation-timing-function: var(--ease-pop); animation-range: cover 48% cover 58%; }
}
/* …and where it can't, they move once when they come into view (funnel.js adds .fallback, then .on). */
.hands.fallback .p, .hands.fallback .between { transition: transform 1.8s var(--ease); }
.hands.fallback .between-label { transition: opacity 1s var(--ease) 1s; }
.hands.fallback .between-label em { transition: opacity 1s var(--ease) 1.9s; }
.hands.fallback .s { transition: opacity .6s var(--ease) 1.4s, transform .9s var(--ease-pop) 1.4s; }
.hands.fallback[data-hands='meet'] .parent, .hands.fallback[data-hands='apart'].on .parent { transform: translateX(calc(var(--max) * -1)) rotate(10deg); }
.hands.fallback[data-hands='meet'] .child, .hands.fallback[data-hands='apart'].on .child { transform: translateX(var(--max)) rotate(-10deg); }
.hands.fallback[data-hands='apart'].on .between { transform: translateX(-50%) scaleX(1); }
.hands.fallback[data-hands='apart'].on .between-label, .hands.fallback[data-hands='apart'].on .between-label em { opacity: 1; }
.hands.fallback[data-hands='meet'].on .parent { transform: rotate(10deg); }
.hands.fallback[data-hands='meet'].on .child { transform: rotate(-10deg); }
.hands.fallback[data-hands='meet'].on .s { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(var(--r)); }

.muted { max-width: 680px; margin: 0 auto 1em; font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); line-height: 1.6; color: var(--ink-2); }
.statement { max-width: 900px; margin: 0 auto; font: 420 clamp(2rem, 1.15rem + 3.4vw, 3.9rem)/1.08 var(--serif); letter-spacing: -.024em; color: var(--ink); text-wrap: balance; }
.statement em { color: var(--rose-2); }
.sub { max-width: 760px; margin: clamp(104px, 9vw, 150px) auto 22px; font: 420 clamp(1.8rem, 1.25rem + 2.2vw, 3rem)/1.1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.sub em { font-style: italic; white-space: nowrap; color: var(--gold-4); }
[data-words] .w { display: inline-block; opacity: 0; transform: translateY(.38em); transition: opacity .8s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i) * 34ms); }
[data-words].visible .w { opacity: 1; transform: none; }
.drift { position: relative; max-width: 560px; margin: 56px auto 60px; padding: 0; list-style: none; text-align: left; }
.drift::before { content: ''; position: absolute; left: 7px; top: 12px; bottom: 30px; border-left: 1.5px dashed rgba(19, 48, 60, .24); }
.drift li { position: relative; padding-left: 38px; font-size: 1.1rem; line-height: 1.45; color: var(--ink); }
.drift li::before { content: ''; position: absolute; left: 0; top: .5em; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--gold-3); }
.drift li:nth-child(2) { margin-top: 30px; }
.drift li:nth-child(3) { margin-top: 56px; }
.drift li:nth-child(2)::before { box-shadow: inset 0 0 0 2px rgba(148, 109, 47, .6); }
.drift li:nth-child(3)::before { box-shadow: inset 0 0 0 2px rgba(148, 109, 47, .34); }
.drift b { display: block; margin-bottom: 2px; font: 400 italic 1.45rem/1.2 var(--serif); color: var(--gold-4); }
.turn { max-width: 720px; margin: 60px auto 0; font: 400 italic clamp(1.35rem, 1.15rem + .9vw, 1.85rem)/1.35 var(--serif); color: var(--gold-4); text-wrap: balance; }

/* ---------- 02 the three secrets ---------- */
.envelopes { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.envelope { --i: 0; position: sticky; top: var(--stick, calc(80px + var(--i) * 14px)); }
.envelope .bezel { --r: 2rem; --pad: 6px; background: rgba(246, 239, 227, .07); box-shadow: inset 0 0 0 1px rgba(246, 239, 227, .12), 0 -20px 40px -28px rgba(2, 9, 11, .7), 0 50px 90px -40px rgba(2, 9, 11, .85); }
.envelope .core {
  display: flex; flex-direction: column; min-height: 500px; padding: 154px 24px 30px; overflow: hidden;
  background: linear-gradient(170deg, var(--paper-core), var(--paper) 70%) !important; color: var(--ink) !important;
  box-shadow: inset 0 1px 1px #fff !important;
}
.flap { position: absolute; left: 0; right: 0; top: 0; height: 108px; background: linear-gradient(180deg, var(--paper-2), #E4D6BE); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.flap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(148, 109, 47, .3) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent calc(50% - 1px), rgba(148, 109, 47, .3) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat; }
.seal {
  position: absolute; z-index: 2; left: 50%; top: 68px; width: 74px; height: 74px; margin-left: -37px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; color: #5A3E12; font: 500 italic 1.95rem/1 var(--serif);
  background: radial-gradient(circle at 35% 30%, #F6E0AC, #D8B26E 46%, #A57E3D 100%);
  box-shadow: 0 10px 18px -6px rgba(74, 50, 16, .45), inset 0 -3px 6px rgba(90, 62, 18, .35), 0 0 0 5px rgba(216, 178, 110, .16);
}
.seal::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(90, 62, 18, .32); }
.envelope .which { margin: 0 0 14px; text-align: center; font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-4); }
.envelope h3 { margin: 0 0 26px; text-align: center; font-size: clamp(1.4rem, 1.25rem + .6vw, 1.7rem); line-height: 1.2; color: var(--ink); }
.envelope .for { margin: 0 0 18px; padding-top: 22px; box-shadow: inset 0 1px 0 rgba(148, 109, 47, .24); font: 400 italic 1.08rem/1.4 var(--serif); text-wrap: balance; color: var(--ink-2); }
.ticks { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 32px; font-size: 1rem; line-height: 1.5; color: rgba(246, 239, 227, .88); }
.ticks .d { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; color: var(--gold); }
.envelope .ticks li { text-wrap: pretty; color: var(--ink-2); }
.envelope .ticks .d { color: #C39443; }
.secrets-after { max-width: 640px; margin: 48px auto 0; text-align: center; font: 400 italic 1.3rem/1.45 var(--serif); color: var(--ivory); text-wrap: balance; }

/* ---------- 03 sound familiar ---------- */
.split { display: grid; gap: 56px; align-items: center; }
.split > div { text-align: center; }
.split h2 { margin: 0 auto; }
.pull { margin: 30px auto 0; max-width: 30ch; font: 400 clamp(1.3rem, 1.1rem + .8vw, 1.75rem)/1.42 var(--serif); letter-spacing: -.01em; color: var(--ink-2); }
.pull strong { font-weight: 560; color: var(--ink); }
.split .copy { max-width: 34em; margin: 24px auto 0; font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); line-height: 1.65; color: var(--ink-2); }
.split .copy + .copy { margin-top: 14px; }
.notebook-wrap { position: relative; width: 100%; max-width: 560px; margin: 0 auto; }
.notebook-wrap .bezel { --r: 1.75rem; --pad: 8px; }
.notebook {
  padding: 34px 20px 30px 52px;
  background-color: #FFFDF8 !important;
  background-image: linear-gradient(90deg, transparent 36px, rgba(185, 104, 90, .42) 36px, rgba(185, 104, 90, .42) 37.5px, transparent 37.5px), repeating-linear-gradient(transparent 0 43px, #DCE5E8 43px 44px) !important;
}
.notebook-wrap .clip { position: absolute; z-index: 2; top: -26px; left: 34px; width: 34px; height: 60px; color: #8E9A9E; transform: rotate(8deg); }
.notebook-head { margin: 0; font: 700 clamp(1.25rem, 1.1rem + .8vw, 1.6rem)/44px var(--hand); color: var(--gold-3); }
.strikes { list-style: none; margin: 0; padding: 0; font: 400 clamp(1.25rem, 1.1rem + .8vw, 1.6rem)/44px var(--hand); color: var(--ink); }
.strikes li { position: relative; width: fit-content; max-width: 100%; }
.strikes li svg { position: absolute; left: -4px; top: 50%; width: calc(100% + 8px); height: 16px; margin-top: -6px; color: var(--rose-2); overflow: visible; transform: scaleX(0); transform-origin: left center; transition: transform .75s var(--ease); }
.strikes li.struck svg { transform: scaleX(1); }
.strikes li:last-child { color: var(--rose-2); }
.notebook-cap { margin: 22px 8px 0 0; text-align: right; font: 400 1.08rem var(--hand); color: var(--ink-3); }

/* ---------- 04 four kinds of parents (bento) ---------- */
.bento { display: grid; gap: 14px; }
.bento .bezel { --r: 1.75rem; height: 100%; }
.bento .core { height: 100%; padding: 28px 24px 26px; overflow: hidden; }
.bento .ico { width: 44px; height: 44px; margin-bottom: 16px; color: var(--gold); }
.b-soft .ico, .b-both .ico { color: var(--rose); }
.bento .tag { position: absolute; right: 20px; top: 22px; font: 400 1rem var(--hand); color: var(--ivory-3); transform: rotate(-3deg); }
.bento h3 { margin-bottom: 10px; }
.bento p { color: var(--ivory-2); margin-bottom: 16px; }
.bento .get { margin: 0; padding-top: 16px; color: var(--ivory); box-shadow: inset 0 1px 0 rgba(216, 178, 110, .2); }
.bento .get b { color: var(--gold); font-weight: 600; }
.b-both .core { background: radial-gradient(120% 90% at 100% 0%, rgba(231, 164, 150, .14), transparent 55%), linear-gradient(180deg, #132D35, #0D2127); }
.b-both .big-d { position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; color: var(--rose); opacity: .07; }
.b-both .me { display: block; margin-top: 22px; font: 400 1.35rem/1.35 var(--hand); color: var(--rose); }
.b-both .me small { display: block; margin-top: 4px; font: 500 .82rem var(--sans); color: var(--ivory-3); }

/* ---------- 05 meet Dr. HiFive ---------- */
.doctor { display: grid; gap: 52px; }
.doctor-head h2 { margin-bottom: 26px; }
.doctor-head .intro { max-width: 34ch; margin: 0; font: 400 clamp(1.25rem, 1.12rem + .5vw, 1.5rem)/1.45 var(--serif); letter-spacing: -.008em; color: var(--ink); }
.story { max-width: 62ch; }
.story > p { font-size: 1.08rem; line-height: 1.75; color: #2E4950; }
.story .tease { margin: 34px 0; padding: 4px 0 4px 22px; box-shadow: inset 2px 0 0 var(--rose-2); font: 400 italic clamp(1.3rem, 1.15rem + .6vw, 1.6rem)/1.4 var(--serif); color: var(--ink); }
.ledger { --r: 1.75rem; margin-top: 38px; }
.ledger .core { padding: 22px 22px 18px; }
.ledger .eyebrow { margin-bottom: 14px; }
.ledger ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ledger li { display: grid; gap: 2px; font: 400 1.2rem/1.35 var(--hand); color: var(--ink); }
.ledger li small { font: 600 .7rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ledger s { color: var(--rose-2); text-decoration-thickness: 2px; }
.ledger .now { color: #1C6A73; font-weight: 700; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.stats .bezel { --r: 1.25rem; --pad: 4px; }
.stats .core { height: 100%; padding: 16px 16px 14px; }
.stats b { display: block; font: 430 1.6rem/1.1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.stats span { font-size: .84rem; color: var(--ink-3); }
.signoff { margin: 36px 0 0; font: 400 1.4rem/1.4 var(--hand); color: var(--ink); }
.signoff small { display: block; margin-top: 6px; font: 500 .84rem var(--sans); color: var(--ink-3); }
.desk { position: relative; display: grid; justify-items: center; gap: 30px; }
.polaroid { position: relative; width: min(320px, 84vw); margin: 0; padding: 14px 14px 56px; background: #FFFDF7; box-shadow: 0 30px 56px -30px rgba(19, 48, 60, .5), 0 2px 0 rgba(19, 48, 60, .04); }
.polaroid .tape { top: -14px; left: 50%; margin-left: -52px; transform: rotate(-4deg); }
.polaroid .ph { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; padding: 18px; overflow: hidden; text-align: center; background: linear-gradient(160deg, #DCCFB8, #CBB99B); }
.polaroid .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.polaroid .ph .blank { white-space: normal; border: 0; font-size: .95rem; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 15px; text-align: center; font: 400 1.12rem var(--hand); color: var(--ink); }
.report { position: relative; width: min(340px, 88vw); padding: 20px 22px 18px; background: #FDF9EE; color: var(--ink); font-size: .86rem; box-shadow: 0 26px 44px -26px rgba(19, 48, 60, .5), inset 0 0 0 1px rgba(150, 128, 90, .25); }
.report h4 { margin: 0 0 2px; text-align: center; font: 600 .7rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.report .school { margin: 0 0 12px; text-align: center; font: 500 1.08rem var(--serif); }
.report dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; }
.report dt { color: var(--ink-3); }
.report dd { margin: 0; font: 400 1.05rem/1.2 var(--hand); box-shadow: inset 0 -1px 0 rgba(150, 128, 90, .35); }
.report .marks { color: var(--rose-2); font-weight: 700; }
.report .sig { display: flex; flex-wrap: wrap; align-items: center; margin-top: 16px; padding-top: 6px; box-shadow: inset 0 1px 0 rgba(150, 128, 90, .4); }
.report .sig small { width: 100%; font-size: .72rem; color: var(--ink-3); }
.report .scrawl { width: 34px; height: 30px; margin: 4px 0 0 10px; color: #2B4A8A; transform: rotate(-8deg) scaleX(1.4); }
.report .scrawl.wide { width: 110px; height: 16px; margin-left: -2px; transform: rotate(-6deg) skewX(-20deg); }
.report .stamp { position: absolute; right: 12px; bottom: 16px; padding: 3px 10px; border-radius: 6px; box-shadow: inset 0 0 0 2.5px var(--rose-2); color: var(--rose-2); font: 700 .9rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-12deg); opacity: .85; }

/* ---------- 06 the ticket ---------- */
.ticket-shell { --r: 2.5rem; --pad: 8px; max-width: 1020px; margin: 0 auto; background: var(--shell) !important; }
.ticket { display: grid; overflow: hidden; background: none !important; }
.ticket-main { padding: 34px 24px 26px; background: var(--paper-core); color: var(--ink); }
.ticket-main .eyebrow { color: var(--gold-3); background: rgba(19, 48, 60, .045); box-shadow: inset 0 0 0 1px rgba(19, 48, 60, .12); }
.ticket-main h2 { margin: 0 0 24px; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.3rem); }
.ticket dl { margin: 0; }
.ticket dl div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 13px 0; box-shadow: inset 0 1px 0 rgba(19, 48, 60, .1); }
.ticket dt { font: 600 .7rem/1.75 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.ticket dd { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.ticket-stub { position: relative; padding: 36px 24px 30px; text-align: center; background: linear-gradient(180deg, #14303A, #0D2228); color: var(--ivory); }
.ticket-stub::before { content: ''; position: absolute; left: 20px; right: 20px; top: 0; border-top: 2px dashed rgba(216, 178, 110, .45); }
.notch { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--shell); }
.notch--a { left: -13px; top: -13px; }
.notch--b { right: -13px; top: -13px; }
.price {
  position: relative; display: inline-grid; place-items: center; align-content: center; width: 140px; height: 140px; margin: 0 auto 16px; border-radius: 50%;
  color: #3D2A0C; background: radial-gradient(circle at 34% 28%, #F6E2B4, #D8B26E 48%, #B08843 100%);
  box-shadow: 0 16px 30px -12px rgba(3, 10, 12, .6), inset 0 -4px 8px rgba(90, 62, 18, .3), 0 0 0 6px rgba(216, 178, 110, .15);
  transform: rotate(-6deg);
}
.price::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(61, 42, 12, .35); }
.price .d { width: 16px; height: 16px; margin-bottom: 4px; color: #7A5718; }
.price b { font: 600 2.15rem/1 var(--serif); letter-spacing: -.02em; }
.price small { margin-top: 5px; font: 700 .6rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.credit { margin: 0 0 20px; font-size: .92rem; color: var(--ivory-2); }
.countdown { display: flex; justify-content: center; gap: 8px; margin: 18px 0 0; font-variant-numeric: tabular-nums; }
.countdown[hidden] { display: none; }
.countdown div { min-width: 62px; padding: 9px 6px 8px; border-radius: 14px; background: rgba(216, 178, 110, .08); box-shadow: inset 0 0 0 1px rgba(216, 178, 110, .18); }
.countdown b { display: block; font: 500 1.5rem/1 var(--serif); color: var(--gold); }
.countdown span { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ivory-3); }

.path { position: relative; display: grid; gap: 34px; max-width: 1020px; margin: 88px auto 0; padding: 0; list-style: none; }
.path::before { content: ''; position: absolute; left: 27px; top: 30px; bottom: 30px; border-left: 1.5px dashed rgba(216, 178, 110, .3); }
.path li { position: relative; padding-left: 78px; }
.path .num { position: absolute; left: 0; top: -6px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--night); font: 500 italic 1.6rem/1 var(--serif); color: var(--gold); }
.path .num svg { position: absolute; inset: -4px; width: 64px; height: 64px; color: var(--gold); opacity: .75; }
.path h3 { margin-bottom: 8px; }
.path p { margin: 0; color: var(--ivory-2); }
.path .path-arrow { display: none; }

/* ---------- 07 picture this, 08 questions ---------- */
.picture { max-width: 940px; margin: 0 auto; text-align: center; }
.picture h2 { margin-bottom: 30px; }
.picture [data-words] { font: 400 clamp(1.3rem, 1.1rem + 1vw, 2rem)/1.5 var(--serif); letter-spacing: -.012em; color: var(--ink); }
.picture [data-words] em { color: var(--rose-2); }
.faq { max-width: 860px; margin: 120px auto 0; text-align: center; }
.faq h2 { margin-bottom: 40px; }
.faq-box { --r: 2rem; text-align: left; }
.faq-box .core { padding: 6px 22px; }
.faq details + details { box-shadow: inset 0 1px 0 var(--ink-hair); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; list-style: none; cursor: pointer; font: 480 clamp(1.08rem, 1rem + .3vw, 1.2rem)/1.35 var(--serif); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.pm { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: rgba(19, 48, 60, .06); box-shadow: inset 0 0 0 1px rgba(19, 48, 60, .1); color: var(--ink); transition: transform .6s var(--ease), background .6s var(--ease); }
.pm .i { width: 16px; height: 16px; }
.faq details[open] .pm { transform: rotate(45deg); background: var(--gold); box-shadow: none; }
.faq .ans p { margin: 0 0 22px; padding-right: 44px; line-height: 1.7; color: var(--ink-2); }
.faq details[open] .ans { animation: ans-in .7s var(--ease) both; }
@keyframes ans-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- 09 closing ---------- */
.closing { padding-bottom: 120px; }
.closing .hands { margin-bottom: 26px; }
.closing h2 { max-width: 820px; margin: 0 auto; }
.closing .cta-row { margin-top: 38px; }
.closing .meta-row { margin-top: 22px; }

/* ---------- footer, dock ---------- */
.footer { padding: 48px 0 128px; color: var(--ivory-3); font-size: .86rem; box-shadow: inset 0 1px 0 var(--hair); }
.footer .wrap { display: grid; gap: 20px; }
.footer .tag { margin: 12px 0 0; color: var(--ivory-2); }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px; }
.footer nav a { padding: 7px 14px; border-radius: 999px; text-decoration: none; color: var(--ivory); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .5s var(--ease), color .5s var(--ease); }
.footer nav a:hover { color: var(--gold); box-shadow: inset 0 0 0 1px rgba(216, 178, 110, .5); }
.footer small { display: block; max-width: 760px; line-height: 1.6; }

.dock {
  position: fixed; z-index: 45; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); width: calc(100% - 24px); max-width: 440px;
  display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 20px; border-radius: 999px;
  background: rgba(11, 29, 35, .7); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(216, 178, 110, .26), 0 24px 44px -16px rgba(2, 9, 11, .85);
  transform: translate(-50%, 160%); transition: transform .7s var(--ease);
}
.dock.on { transform: translate(-50%, 0); }
.dock p { margin: 0 auto 0 0; font-size: .84rem; line-height: 1.25; color: var(--ivory-2); }
.dock p b { display: block; font: 500 1.05rem/1.2 var(--serif); color: var(--ivory); }

/* ---------- reveal on scroll (the GUROB funnel standard, heavier) ---------- */
.reveal { opacity: 0; transform: translateY(56px); filter: blur(10px); transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); }
.reveal.visible { opacity: 1; transform: none; filter: none; }
.reveal-delay-1 { transition-delay: .08s; } .reveal-delay-2 { transition-delay: .16s; } .reveal-delay-3 { transition-delay: .24s; }

/* ================= registration and thank-you ================= */
.step-page { position: relative; isolation: isolate; min-height: 100dvh; padding: 100px 0 96px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 36px; padding: 5px; list-style: none; border-radius: 999px; background: rgba(246, 239, 227, .04); box-shadow: inset 0 0 0 1px var(--hair); }
.stepper li { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border-radius: 999px; font-size: .84rem; color: var(--ivory-3); }
.stepper i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 600 .78rem/1 var(--sans); font-style: normal; background: rgba(216, 178, 110, .1); color: var(--gold); }
.stepper i .i { width: 14px; height: 14px; }
.stepper span { display: none; }
.stepper .now { padding-right: 14px; background: rgba(216, 178, 110, .1); color: var(--ivory); }
.stepper .now span { display: inline; }
.stepper .now i { background: var(--gold); color: var(--night); }
.stepper .done i { background: rgba(216, 178, 110, .3); color: var(--night); }

.reg { display: grid; gap: 40px; }
.reg-head h1 { font-size: clamp(2.5rem, 1.3rem + 4.2vw, 4.8rem); line-height: 1; letter-spacing: -.026em; }
.reg-head .meta-row { justify-content: flex-start; margin-top: 24px; }
.form { --r: 2rem; --pad: 7px; margin: 0; }
.form .core { padding: 26px 20px 22px; }
.notice { margin: 0 0 22px; padding: 14px 16px; border-radius: 16px; font-size: .95rem; line-height: 1.5; color: var(--ink); background: rgba(231, 164, 150, .22); box-shadow: inset 0 0 0 1px rgba(185, 104, 90, .2); }
.notice.ok { background: rgba(28, 106, 115, .1); box-shadow: inset 0 0 0 1px rgba(28, 106, 115, .2); }
.notice a { font-weight: 600; color: var(--ink); }
.notice[hidden] { display: none; }
.field { margin-bottom: 20px; }
.field > label, .field > .label { display: block; margin: 0 0 8px 4px; font: 600 .92rem/1.3 var(--sans); color: var(--ink); }
.field .opt { font-weight: 400; color: var(--ink-3); }
.input-shell { display: flex; align-items: stretch; padding: 4px; border-radius: 18px; background: rgba(19, 48, 60, .05); box-shadow: inset 0 0 0 1px rgba(19, 48, 60, .1); transition: box-shadow .5s var(--ease), background .5s var(--ease); }
.input-shell:focus-within { background: rgba(216, 178, 110, .16); box-shadow: inset 0 0 0 1px rgba(148, 109, 47, .55), 0 0 0 4px rgba(216, 178, 110, .18); }
.input-shell input { flex: 1; min-width: 0; height: 50px; padding: 0 15px; border: 0; border-radius: 14px; background: #fff; color: var(--ink); font: 400 1.05rem var(--sans); outline: none; box-shadow: inset 0 1px 2px rgba(19, 48, 60, .07); }
.input-shell input::placeholder { color: #A39B8C; }
.prefix { display: grid; place-items: center; padding: 0 12px 0 10px; font-weight: 600; color: var(--ink); }
.field[data-error] .input-shell { background: rgba(185, 104, 90, .1); box-shadow: inset 0 0 0 1px rgba(185, 104, 90, .55); }
.hint, .err { margin: 8px 0 0 4px; font-size: .84rem; line-height: 1.45; }
.hint { color: var(--ink-3); }
.err { display: none; color: #A1473A; }
.field[data-error] .err { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font-size: .95rem; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(19, 48, 60, .14); transition: background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
.chips button:active { transform: scale(.96); }
.chips button[aria-pressed='true'] { background: var(--night); color: var(--ivory); box-shadow: inset 0 0 0 1px var(--night); }
.secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; font-size: .84rem; color: var(--ink-3); }
.secure .i { width: 15px; height: 15px; }
.fine { margin: 10px 0 0; text-align: center; font-size: .78rem; color: var(--ink-3); }
.fine a { color: var(--ink-3); }
.side { display: grid; gap: 14px; align-content: start; }
.side .bezel { --r: 1.75rem; }
.side .core { padding: 24px 22px; }
.side h2 { margin: 0 0 16px; font-size: 1.4rem; font-weight: 480; }
.pricebox .core { display: flex; align-items: center; gap: 18px; }
.pricebox .price { width: 104px; height: 104px; margin: 0; flex: none; }
.pricebox .price b { font-size: 1.55rem; }
.pricebox .price .d { width: 13px; height: 13px; }
.pricebox .price small { font-size: .5rem; }
.pricebox p { margin: 0; font-size: .95rem; color: var(--ivory-2); }
.pricebox p b { color: var(--ivory); }
.quote { margin: 0; }
.quote blockquote { margin: 0; font: 400 italic 1.2rem/1.45 var(--serif); color: var(--ivory); }
.quote figcaption { margin-top: 12px; font: 400 1.05rem var(--hand); color: var(--gold); }

.ty { max-width: 860px; margin: 0 auto; text-align: center; }
.ty h1 { font-size: clamp(2.7rem, 1.4rem + 5vw, 5.4rem); line-height: 1; letter-spacing: -.028em; }
.ty .lede { margin-top: 18px; }
.wa-card { --r: 2rem; --pad: 7px; margin: 44px auto 0; text-align: left; }
.wa-card .core { padding: 30px 22px 24px; }
.wa-card h2 { margin: 0 0 16px; font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); }
.wa-card p { color: var(--ink-2); }
.wa-card .must { color: var(--ink); font-weight: 600; }
.wa-btn { justify-content: flex-start; gap: 12px; margin-top: 10px; padding-left: 9px; min-height: 64px; font-size: 1.02rem; }
.wa-btn .wa-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--green); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.wa-btn .wa-ico .i { width: 24px; height: 24px; }
.wa-btn .btn-label { flex: 1; }
.wa-btn .btn-ico { display: none; }
.wa-raw { margin: 14px 0 0; font-size: .84rem; color: var(--ink-3); word-break: break-all; }
.wa-raw a { color: var(--ink-3); }
.cal { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 40px 0 0; }
.cal p { width: 100%; margin: 0 0 6px; font-size: .9rem; color: var(--ivory-2); }
.before-title { margin: 88px 0 0; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }
.notes { display: grid; gap: 22px; margin: 40px 0 0; padding: 0; list-style: none; text-align: left; }
.notes .note { padding: 26px 22px 24px; font: 400 1rem/1.6 var(--sans); }
.notes .note:nth-child(2) { background: linear-gradient(180deg, #F6DCD3, #EFC6B9); }
.notes .note:nth-child(3) { background: linear-gradient(180deg, #F7F0E4, #ECE1CE); }
.notes .note::before { left: 30%; }
.notes .num { display: block; margin-bottom: 6px; font: 700 1.7rem/1 var(--hand); color: #8A5A2B; }
.notes h3 { margin-bottom: 8px; color: #241D0E; }
.notes p { margin: 0; color: #4A3F28; }
.receipt { margin: 64px 0 0; font-size: .86rem; line-height: 1.7; color: var(--ivory-3); }
.receipt code { font: 500 .86rem var(--sans); color: var(--ivory); }
.see-you { margin: 30px 0 0; font: 400 1.55rem/1.3 var(--hand); color: var(--gold); transform: rotate(-2deg); }
.state[hidden] { display: none; }
.checking { padding: 90px 0; text-align: center; color: var(--ivory-2); }
.wait { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 14px; border-radius: 999px; background: rgba(216, 178, 110, .1); box-shadow: inset 0 0 0 1px rgba(216, 178, 110, .3); color: var(--gold); font-weight: 500; }
.confetti { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.confetti svg { position: absolute; top: -40px; width: 18px; height: 18px; animation: fall cubic-bezier(.3, .05, .7, .55) forwards; }
@keyframes fall { to { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--rot)); opacity: .9; } }

/* ================= tablet: 768px ================= */
@media (min-width: 768px) {
  :root { --gutter: 32px; }
  .band { padding: 128px 0; }
  .island { top: 20px; padding-left: 16px; }
  .island-date { display: inline-flex; }
  .hero { padding-top: 150px; }
  .eyebrow--hero .long { display: inline; }
  .eyebrow--hero .short { display: none; }
  .tape { width: 104px; height: 28px; }
  .scatter .d.wide { display: block; }
  .plaque .core { grid-template-columns: repeat(4, 1fr); }
  .plaque li, .plaque li:nth-child(n) { box-shadow: none; }
  .plaque li + li { box-shadow: inset 1px 0 0 var(--hair); }
  /* the cascade: paper objects tilt and overlap from here up */
  .notebook-wrap { transform: rotate(-2deg); }
  .notebook-cap { position: absolute; right: -14px; bottom: -34px; margin: 0; transform: rotate(4deg); padding: 14px 16px 16px; border-radius: 3px 3px 16px 3px; background: linear-gradient(180deg, #F6E7BF, #EFD9A3); color: #3A2E14; box-shadow: 0 22px 34px -20px rgba(40, 26, 6, .55); }
  .hands { height: 260px; --pw: 176px; --cw: 122px; --max: min(260px, calc((100cqw - var(--pw) - var(--cw)) / 2 - 8px)); }
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; }
  .b-both { grid-column: 1 / -1; }
  .b-firm, .b-soft, .b-early { grid-column: span 2; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .ticket { grid-template-columns: 1fr 320px; }
  .ticket-main { padding: 42px 40px 34px; }
  .ticket-stub { display: flex; flex-direction: column; justify-content: center; }
  .ticket-stub::before { left: 0; right: auto; top: 20px; bottom: 20px; border-top: 0; border-left: 2px dashed rgba(216, 178, 110, .45); }
  .notch--b { left: -13px; right: auto; top: auto; bottom: -13px; }
  .path { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .path::before { display: none; }
  .path li { padding: 78px 10px 0 0; }
  .path li:nth-child(2) { margin-top: 48px; }
  .path .num { top: 0; }
  .path .path-arrow { display: block; position: absolute; top: 14px; left: 74px; width: calc(100% - 60px); height: 46px; color: var(--gold); opacity: .5; }
  .path li:nth-child(1) .path-arrow { transform: rotate(6deg); }
  .path li:nth-child(2) .path-arrow { transform: rotate(-10deg) translateY(-30px); }
  .faq-box .core { padding: 8px 34px; }
  .dock { display: none; }
  .footer { padding-bottom: 56px; }
  .footer .wrap { grid-template-columns: 1fr auto; align-items: start; }
  .footer small { grid-column: 1 / -1; }
  .form .core { padding: 34px 32px 30px; }
  .stepper span { display: inline; }
  .stepper li { padding-right: 14px; }
  .wa-card .core { padding: 38px 40px 32px; }
  .wa-btn .btn-ico { display: grid; }
  .notes { grid-template-columns: repeat(3, 1fr); }
  .notes .note:nth-child(1) { transform: rotate(-2.5deg); }
  .notes .note:nth-child(2) { transform: rotate(1.8deg) translateY(16px); }
  .notes .note:nth-child(3) { transform: rotate(-1deg); }
  .desk { padding-top: 10px; }
  .polaroid { transform: rotate(2.6deg); }
  .report { z-index: 2; margin-top: -14px; margin-left: -120px; transform: rotate(-4deg); }
}

/* ================= desktop: 1024px ================= */
@media (min-width: 1024px) {
  .band { padding: 160px 0; }
  .hero { padding-top: 168px; }
  .video-wrap { margin-top: 72px; }
  .video-note { display: block; position: absolute; z-index: 4; left: -78px; top: -46px; width: 196px; transform: rotate(-7deg); text-align: left; }
  .plaque { margin-top: 88px; }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; }
  .split > div { order: 2; text-align: left; }
  .split h2 { max-width: 12ch; }
  .split h2, .split .copy, .pull { margin-left: 0; }
  .envelopes { display: flex; justify-content: center; align-items: flex-start; gap: 0; padding-top: 10px; }
  .envelope { position: relative; top: auto; flex: 0 1 410px; margin: 0 -12px; transition: transform .9s var(--ease); }
  .envelope:nth-child(1) { z-index: 1; transform: rotate(-2.6deg) translateY(22px); }
  .envelope:nth-child(2) { z-index: 2; transform: rotate(1.4deg) translateY(-6px); }
  .envelope:nth-child(3) { z-index: 1; transform: rotate(-1.2deg) translateY(34px); }
  .envelope:hover { z-index: 3; transform: rotate(0deg) translateY(-12px); }
  .bento { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; gap: 16px; }
  .b-both { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .b-firm { grid-column: 7 / span 6; grid-row: 1; }
  .b-soft { grid-column: 7 / span 3; grid-row: 2; }
  .b-early { grid-column: 10 / span 3; grid-row: 2; }
  .b-both .core { display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px; padding: 40px 40px 36px; }
  .b-both h3 { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem); }
  .b-both p { max-width: 34ch; font-size: 1.12rem; }
  .b-both .ico { position: absolute; left: 40px; top: 40px; width: 56px; height: 56px; }
  .b-both .big-d { top: -40px; right: -60px; bottom: auto; width: 340px; height: 340px; }
  .doctor { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: 'head desk' 'story desk'; column-gap: 88px; row-gap: 0; align-items: start; }
  .doctor-head { grid-area: head; }
  .story { grid-area: story; }
  .desk { grid-area: desk; position: sticky; top: 110px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .reg { grid-template-columns: minmax(0, 1fr) 480px; column-gap: 72px; row-gap: 40px; align-items: start; }
  .reg-head { grid-column: 1; grid-row: 1; padding-top: 12px; }
  .reg .side { grid-column: 1; grid-row: 2; }
  .reg .form { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 96px; }
}
@media (min-width: 1440px) { :root { --max: 1280px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .reveal, [data-words] .w { opacity: 1; transform: none; filter: none; }
  .strikes li svg { transform: none; }
  .hands .p, .hands .between, .hands .between-label, .hands .between-label em, .hands .s { animation: none !important; }
  .hands[data-hands='apart'] .parent { transform: translateX(calc(var(--max) * -1)) rotate(10deg); }
  .hands[data-hands='apart'] .child { transform: translateX(var(--max)) rotate(-10deg); }
  .hands[data-hands='apart'] .between { transform: translateX(-50%) scaleX(1); }
  .hands[data-hands='apart'] .between-label, .hands[data-hands='apart'] .between-label em { opacity: 1; }
  .hands[data-hands='meet'] .parent { transform: rotate(10deg); }
  .hands[data-hands='meet'] .child { transform: rotate(-10deg); }
}