/* The landing page at "/". It builds on the tokens in style.css, polish.css, navigation.css and pages.css,
   so the colours, type and buttons match the rest of the site. Phone layout starts at 760px, like navigation.js. */
.landing { --soft: var(--c-56677d, #56677d); --muted: var(--c-42546a, #42546a); --body: var(--c-2c3e57, #2c3e57); --card-border: var(--surface-border, var(--c-d8dcd9, #d8dcd9)); max-width: 1200px; padding-bottom: 80px; }
.landing :is(h1, h2, h3) { text-wrap: balance; }
.landing p { text-wrap: pretty; }
.landing [id] { scroll-margin-top: calc(var(--header-height, 0px) + 16px); }
.landing h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing: -.02em; line-height: 1.1; }

/* Hero: the words on the left and a picture on the right, built from the site colours. A yellow arch, an ink
   squiggle and zigzag, a red pulse line, and a label card with a thick border. */
.landing-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 48px; align-items: center; padding: 56px 0 0; }
/* The page clips sideways overflow, not the hero, so the label and squiggle can reach past the column and the glow can
   run to the screen edges instead of stopping at the hero box. */
body:has(.landing-hero) { overflow-x: clip; }
/* The glow box spans the screen. --hw is the hero's own width (main.landing is at most 1200px with 40px padding), so the
   two glows keep their place beside the words and the picture at any width. */
.landing-hero::before { --hw: min(1120px, 100vw - 80px); content: ""; position: absolute; z-index: -1; top: 0; left: calc(50% - 50vw); width: 100vw; height: 660px; background: radial-gradient(calc(var(--hw) * .42) 330px at calc(50% - var(--hw) * .42) 42%, var(--c-b7d9eff2, rgba(183, 217, 239, .95)), var(--c-b7d9ef00, rgba(183, 217, 239, 0))), radial-gradient(calc(var(--hw) * .34) 290px at calc(50% + var(--hw) * .3) 56%, var(--c-f8cbb980, rgba(248, 203, 185, .5)), var(--c-f8cbb900, rgba(248, 203, 185, 0))); pointer-events: none; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 24px; padding: 6px 14px 6px 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--c-ffffff, #fff); font-size: .875rem; font-weight: 700; }
.hero-badge img { display: block; width: 18px; height: 18px; }
.landing-hero h1 { margin: 0 0 24px; font-size: clamp(2.75rem, 5.6vw, 4.75rem); letter-spacing: -.03em; line-height: 1.02; }
.landing-hero h1 > span { display: block; }
.h1-outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.landing .nowrap { white-space: nowrap; }
.hero-lead { max-width: 34rem; margin: 0 0 32px; color: var(--body); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; }
.landing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.landing-hero .landing-actions { justify-content: flex-start; gap: 16px 22px; }
.landing .action-lg { gap: 10px; min-height: 52px; padding: 12px 26px; font-size: 1.0625rem; }
.landing .action-secondary { border: 2px solid var(--ink); background: var(--c-ffffff, #fff); }
.landing .action svg { flex: none; transition: transform 180ms var(--settle, ease); }
/* The main button sits in an offset outline frame. Pressing it moves the button into the frame. */
.action-framed { position: relative; }
.action-framed::after { content: ""; position: absolute; z-index: -1; inset: -2px; border: 2px solid var(--ink); border-radius: inherit; transform: translate(6px, 6px); transition: transform 120ms var(--settle, ease); pointer-events: none; }
.landing .action-framed:not(:disabled):active { transform: translate(6px, 6px); }
.action-framed:active::after { transform: none; }
.hero-safety { margin: 22px 0 0; color: var(--muted); font-size: .9375rem; }
.hero-safety a { padding: 12px 0; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hero-art { --fixed-yellow: #ffdb69; --fixed-paper: #fff9e9; position: relative; width: 100%; max-width: 520px; aspect-ratio: 10 / 11; justify-self: end; }
.hero-art > * { position: absolute; margin: 0; }
.art-arch { left: 15%; right: 15%; top: 34%; bottom: 7%; border-radius: 0 0 999px 999px; background: var(--fixed-yellow); }
.art-arch::before { content: ""; position: absolute; inset: 12% 11% 8%; border: 3px solid var(--fixed-paper); border-top: 0; border-radius: 0 0 999px 999px; }
.art-squiggle { top: 0; right: -6%; width: 50%; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.art-person { z-index: 1; left: 0; right: 0; bottom: 2%; width: auto; height: 94%; margin: 0 auto; -webkit-mask-image: linear-gradient(#000 80%, transparent 98%); mask-image: linear-gradient(#000 80%, transparent 98%); }
.art-zigzag { z-index: 2; left: 1%; top: 63%; width: 21%; fill: var(--ink); }
.art-pulse { z-index: 2; left: 3%; bottom: 3%; width: 94%; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.art-label { z-index: 3; right: -3%; top: 47%; max-width: 11em; padding: 12px 16px; border: 2px solid var(--ink); border-radius: 12px; background: var(--c-ffffff, #fff); box-shadow: 5px 5px 0 var(--ink); font: 700 1.125rem/1.3 Georgia, 'Times New Roman', serif; }

/* Facts row: what the data proves, read at build time. */
.facts { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 56px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--card-border); }
.facts li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 16px 0; }
.facts li + li { border-left: 1px solid var(--card-border); }
.fact-num { font: 700 clamp(2rem, 3.4vw, 2.75rem)/1.1 Georgia, 'Times New Roman', serif; letter-spacing: -.02em; }
.fact-label { max-width: 15rem; color: var(--muted); font-size: .9375rem; }

/* Sections */
.landing-section { padding-top: 96px; }
.landing-head { max-width: 40rem; margin: 0 auto 32px; text-align: center; }
.landing-head h2 { margin: 0; }
.landing-head p { margin: 10px 0 0; color: var(--muted); font-size: 1.0625rem; }

/* What do you need help with? Each card is one large link. */
.need-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.need-card { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; box-sizing: border-box; padding: 24px; border: 1px solid var(--card-border); border-radius: 16px; background: var(--c-ffffff, #fff); text-decoration: none; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--settle, ease); }
.need-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 12px; }
.tone-blue { background: var(--blue); }
.tone-yellow { background: var(--yellow); }
.tone-peach { background: var(--c-f8cbb9, #f8cbb9); }
.need-name { padding-right: 44px; font: 700 1.25rem/1.25 Georgia, 'Times New Roman', serif; }
.need-desc { color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.need-go { position: absolute; top: 24px; right: 20px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; transition: transform 180ms var(--settle, ease), background-color 180ms ease, color 180ms ease; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 40px; margin: 0; padding: 0; list-style: none; }
.steps li { padding-top: 24px; border-top: 1px solid var(--card-border); }
.step-num { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 16px; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 700; }
.steps h3 { margin: 0 0 8px; font-size: 1.25rem; }
.steps p { margin: 0; color: var(--muted); }
/* The video runs the full width of the column at 16:9, framed like the hero label. The frame leaves room for its shadow. */
.how-video { margin: 0 0 48px; }
.how-player { --fixed-ink: #192d49; --fixed-paper: #fff9e9; position: relative; width: calc(100% - 6px); overflow: hidden; border: 2px solid var(--ink); border-radius: 20px; background: var(--fixed-paper); box-shadow: 6px 6px 0 var(--yellow); }
.how-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--fixed-paper); }
/* Before the first play, one button covers the whole poster, so a press anywhere starts the video. Its pill sits in the clear
   paper between the wordmark and the line under it. The pill keeps the film's navy and yellow in dark mode too, because the
   poster under it does not change. The dark theme leaves --fixed-* colours alone. */
.how-play { --fixed-ink: #192d49; --fixed-yellow: #ffdb69; --fixed-paper: #fff9e9; position: absolute; inset: 0; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--fixed-ink); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.how-play[hidden] { display: none; }
.how-play-pill { position: absolute; top: 50%; left: 50%; display: inline-flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px; border: 2px solid var(--fixed-ink); border-radius: 999px; background: var(--fixed-yellow); box-shadow: 4px 4px 0 var(--fixed-ink); font-size: 1.125rem; font-weight: 800; line-height: 1.2; white-space: nowrap; transform: translate(-50%, -50%); transition: transform .15s ease, box-shadow .15s ease; }
.how-play-icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fixed-ink); color: var(--fixed-paper); }
.how-play-icon svg { margin-left: 2px; }
.how-play-time { padding-left: 12px; border-left: 2px solid var(--fixed-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.how-play:active .how-play-pill { box-shadow: 1px 1px 0 var(--fixed-ink); transform: translate(calc(-50% + 3px), calc(-50% + 3px)); }

/* For clinic teams */
.clinic-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; margin-top: 96px; padding: 56px; border-radius: 24px; background: var(--c-dcecf7, #dcecf7); }
.clinic-copy h2 { margin: 8px 0 14px; }
.clinic-copy > p:not(.eyebrow) { max-width: 34rem; margin: 0 0 28px; color: var(--body); font-size: 1.0625rem; }
.clinic-band .landing-actions { justify-content: flex-start; }
.clinic-points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.clinic-points li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--c-ffffff, #fff); font-weight: 700; }
.clinic-points svg { flex: none; box-sizing: content-box; width: 14px; height: 14px; padding: 4px; border-radius: 50%; background: var(--ink); color: var(--paper); }

/* About */
.landing-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 48px; }
.landing-about h2 { margin: 0; }
.about-copy p { max-width: 44rem; margin: 0 0 16px; color: var(--body); font-size: 1.0625rem; }
.about-copy .about-note { padding: 16px 18px; border-left: 4px solid var(--red); border-radius: 0 12px 12px 0; background: var(--c-ffffff, #fff); color: var(--ink); }
.about-copy .about-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0; }
.about-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* Last call to action, on a warm panel above the dark footer. */
.final-cta { margin-top: 96px; padding: 64px 24px; border-radius: 24px; background: var(--c-ffecad, #ffecad); text-align: center; }
.final-cta h2 { margin: 0 0 10px; }
.final-cta p { margin: 0 0 28px; color: var(--body); font-size: 1.0625rem; }

@media (hover: hover) {
  .landing .action:not(:disabled):hover svg { transform: translateX(3px); }
  .need-card:hover { border-color: var(--ink); box-shadow: 0 12px 28px -18px var(--s-192d4973, rgba(25, 45, 73, .45)); transform: translateY(-2px); }
  .need-card:hover .need-go { background: var(--ink); color: var(--paper); transform: translateX(2px); }
  .about-links a:hover { color: var(--red); }
  .how-play:hover:not(:active) .how-play-pill { box-shadow: 6px 6px 0 var(--fixed-ink); transform: translate(calc(-50% - 2px), calc(-50% - 2px)); }
}

@media (min-width: 761px) and (max-width: 1020px) {
  .landing-hero { column-gap: 28px; }
  .art-label { right: 0; font-size: 1rem; }
  .need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clinic-band { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px; }
  .landing-about { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 760px) {
  .how-video { margin-bottom: 32px; }
  .how-player { border-radius: 16px; }
  .landing { padding-bottom: 48px; }
  .landing-hero { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
  .landing-hero::before { height: 560px; background: radial-gradient(80% 42% at 0% 24%, var(--c-b7d9eff2, rgba(183, 217, 239, .95)), var(--c-b7d9ef00, rgba(183, 217, 239, 0))); }
  .hero-badge { margin-bottom: 18px; }
  .landing-hero h1 { margin-bottom: 16px; font-size: clamp(2.4rem, 11vw, 3.1rem); letter-spacing: -.025em; }
  .h1-outline { -webkit-text-stroke-width: 1.5px; }
  .hero-lead { margin-bottom: 24px; }
  .landing-actions, .landing-hero .landing-actions { flex-direction: column; align-items: stretch; }
  .landing .action-lg { width: 100%; }
  .landing .action-framed { width: calc(100% - 6px); }
  .hero-art { justify-self: center; max-width: 360px; margin-top: 40px; }
  .art-label { right: -1%; font-size: 1rem; }
  .art-squiggle { right: 0; } /* phones widen the page for anything past the screen edge, even with the clip */
  .facts { grid-auto-flow: row; grid-auto-columns: auto; margin-top: 36px; border-top: 0; text-align: left; }
  .facts li { flex-direction: row; align-items: baseline; gap: 14px; padding: 14px 4px; border-top: 1px solid var(--card-border); }
  .facts li + li { border-left: 0; }
  .fact-num { flex: none; min-width: 4.4rem; font-size: 1.75rem; }
  .landing-section { padding-top: 56px; }
  .landing-head { margin-bottom: 20px; text-align: left; }
  .need-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .need-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px 52px 16px 16px; }
  .need-icon { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  .need-name { padding-right: 0; font-size: 1.125rem; }
  .need-go { top: 50%; right: 10px; transform: translateY(-50%); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 18px 0; }
  .step-num { grid-row: 1 / span 2; margin: 0; }
  .steps h3 { margin-bottom: 4px; font-size: 1.125rem; }
  .how-play-pill { gap: 10px; padding: 5px 14px 5px 5px; font-size: 1rem; }
  .how-play-icon { width: 30px; height: 30px; }
  .how-play-icon svg { width: 16px; height: 16px; }
  .how-play-time { padding-left: 10px; }
  .clinic-band { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 56px; padding: 28px 20px; border-radius: 20px; }
  .clinic-band .landing-actions { align-items: stretch; }
  .landing-about { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .final-cta { margin-top: 56px; padding: 40px 20px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing *, .landing *::before { transition: none !important; }
}

/* Motion (website/motion.js): while html.motion is on, the first screen waits hidden for its entrance. */
@media screen and (prefers-reduced-motion: no-preference) {
  .motion .hero-copy > :not(h1), .motion .hero-copy h1 > span, .motion .hero-art > *, .motion .landing-hero .facts > li { opacity: 0; }
}
@media (forced-colors: active) {
  .h1-outline { color: CanvasText; -webkit-text-stroke: 0; }
}

@media print {
  .h1-outline { color: inherit; -webkit-text-stroke: 0; }
  .landing-hero { display: block; }
  .landing-hero::before, .hero-art, .landing .landing-actions, .final-cta, .need-go, .how-video { display: none !important; }
  .need-card, .clinic-band, .about-note { break-inside: avoid; }
}

/* On narrow phones the pill shrinks to the play icon and the length, so it sits between Peach and the map on the poster
   instead of over Peach's face. The label stays for screen readers. */
@media (max-width: 560px) {
  .how-play-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .how-play-time { padding-left: 0; border-left: 0; }
}