/* A Mother's Touch, design system.
   Palette sampled from the supplied logo: indigo outline, purple, light violet, sunshine yellow, sun gold, cream.
   Structure: warm paper, tight serif headings, sans body, full-bleed colour bands, tonal cards, no outlines.
   Text pairs used below are all WCAG AA (checked); yellow and gold are fills only, never text on light. */

/* Fonts: change the pair here and in the Google Fonts <link> on each page.
   Metric-matched local fallbacks (glyph widths and ascent/descent measured against Young Serif and Figtree in Chrome),
   so the swap to the web fonts does not reflow headings and shift the page (CLS). */
@font-face { font-family: 'Young Serif Fallback'; src: local('Georgia'); size-adjust: 112.7%; ascent-override: 93%; descent-override: 33%; line-gap-override: 0%; }
@font-face { font-family: 'Figtree Fallback'; font-weight: 100 500; src: local('Arial'), local('ArialMT'); size-adjust: 100.2%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: 'Figtree Fallback'; font-weight: 600 900; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 96.6%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

:root {
  /* Palette = the logo. Sampled from the supplied artwork's pixels (hue-binned medians);
     every other value below is that sample mixed with white (tint) or the logo's indigo (shade).
     Sampled: indigo outline #1E0B49 · outline highlight #3B2490 · purple #8B2EA9 · light violet #C67CDF
              lettering yellow #FDD622 · golden sun #F8AC10 · ring cream #FDF8DE · red (mouths) #B24637 */
  --indigo: #1E0B49;       /* sampled: ink + dark bands */
  --violet-deep: #3B2490;  /* sampled: outline highlight (only used to derive --indigo-2) */
  --indigo-2: #2B1669;     /* indigo + 45% violet-deep: cards on indigo */
  --purple: #8B2EA9;       /* sampled: primary actions, links */
  --purple-deep: #6A238C;  /* purple + 30% indigo: hover, text on lilac */
  --violet: #C67CDF;       /* sampled: decoration */
  --lilac: #F2E2F8;        /* violet + 78% white: tags, tints */
  --lilac-2: #E9CDF3;      /* violet + 62% white */
  --yellow: #FDD622;       /* sampled: fills, accent band, CTA on dark (never text on light) */
  --yellow-soft: #FEF3BD;  /* yellow + 70% white */
  --sun: #F8AC10;          /* sampled: dots, icons, rules only */
  --cream: #FDF8DE;        /* sampled: ring cream */
  --paper: #FAF8EB;        /* cream + 50% white + 1.8% indigo: page */
  --paper-2: #F2ECD7;      /* cream + 5% indigo: tonal card on paper */
  --white: #FFFFFF;
  --body: #423266;         /* indigo + 16% white: paragraphs, 10.5:1 on paper */
  --muted: #665983;        /* indigo + 32% white: captions, AA on every light surface */
  --error: #86343C;        /* logo red + 30% indigo: form errors only */
  --error-bg: #F7ECEB;     /* logo red + 90% white */
  --line: rgba(30, 11, 73, .12);

  --font-head: 'Young Serif', 'Young Serif Fallback', Georgia, serif;
  --font-body: 'Figtree', 'Figtree Fallback', Arial, sans-serif;

  --max: 1240px;
  --gutter: clamp(16px, 4vw, 36px);
  --section: clamp(64px, 9vw, 112px);
  --r-sm: 10px;
  --r: 20px;
  --r-lg: 28px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);}

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
@media (min-width: 900px) { html { scroll-padding-top: 108px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--indigo);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
::selection { background: var(--yellow); color: var(--indigo); }
img { height: auto; }
a { color: var(--purple); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--purple-deep); }
p { color: var(--body); text-wrap: pretty; }
strong { font-weight: 700; color: var(--indigo); }
ul[role="list"], ol[role="list"] { list-style: none; }

h1, h2, h3, .display {
  font-family: var(--font-head);
  font-weight: 400;
  font-synthesis: none; /* Young Serif ships one weight, no italic: never fake either */
  color: var(--indigo);
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 1.15rem + 4.4vw, 4.1rem); line-height: 1.03; letter-spacing: -.03em; }
h2 { font-size: clamp(2rem, 1.25rem + 3vw, 3.5rem); line-height: 1.05; letter-spacing: -.027em; }
h3 { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.9rem); line-height: 1.12; letter-spacing: -.018em; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--purple); }
h1 + p, h2 + p, h2 + .lead, h1 + .lead { margin-top: 18px; }
p + p { margin-top: 12px; }
.lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; }
.small { font-size: .9rem; }

:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .band-indigo :focus-visible, .band-purple :focus-visible, .site-footer :focus-visible { outline-color: var(--yellow); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--indigo); color: var(--white); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; color: var(--white); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 820px; }
section { position: relative; padding-block: var(--section); }

/* ── Tag label: square pastel rectangle above a heading ── */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 9px; margin-bottom: 18px;
  font: 600 .82rem/1.3 var(--font-body); letter-spacing: .01em;
  background: var(--lilac); color: var(--purple-deep);
}
.tag-yellow { background: var(--yellow); color: var(--indigo); }
.tag-cream { background: var(--cream); color: var(--indigo); }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head p { margin-top: 16px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 22px;
  font: 600 1rem/1.2 var(--font-body); text-decoration: none; white-space: nowrap;
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--purple); color: var(--white); padding-right: 8px; }
.btn-primary:hover { background: var(--purple-deep); color: var(--white); }
.btn-primary .chip { background: var(--yellow); color: var(--indigo); }
.chip { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; }
.chip .i { width: 18px; height: 18px; stroke-width: 2.4; }
.btn-yellow { background: var(--yellow); color: var(--indigo); padding-right: 8px; }
.btn-yellow:hover { background: var(--white); color: var(--indigo); }
.btn-yellow .chip { background: var(--indigo); color: var(--yellow); }
.btn-soft { background: var(--lilac); color: var(--purple-deep); }
.btn-soft:hover { background: var(--lilac-2); color: var(--indigo); }
.btn-line { background: transparent; color: var(--indigo); box-shadow: inset 0 0 0 1.5px var(--indigo); }
.btn-line:hover { background: var(--indigo); color: var(--white); }
.on-dark .btn-line { color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(253, 248, 222, .6); }
.on-dark .btn-line:hover { background: var(--cream); color: var(--indigo); }
.btn.btn-sm { min-height: 42px; padding: 0 16px; font-size: .92rem; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--indigo); text-decoration: none; }
.link-arrow .i { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.link-arrow:hover { color: var(--purple); }
.link-arrow:hover .i { transform: translateX(3px); }
.on-dark .link-arrow { color: var(--cream); }
.on-dark .link-arrow:hover { color: var(--yellow); }

/* ── Header: floating pill on desktop, plain bar on phones (only the bottom bar is sticky there) ── */
.site-header { position: relative; z-index: 50; padding: 10px var(--gutter) 0; }
.nav-pill {
  max-width: calc(var(--max) - 2 * 36px); margin-inline: auto;
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; padding: 6px 8px 6px 12px;
  background: var(--white); border-radius: 14px;
  box-shadow: 0 2px 6px rgba(30, 11, 73, .07);
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; color: var(--indigo); }
.brand img { width: 64px; height: auto; }
.brand span { font: 500 1.2rem/1 var(--font-head); letter-spacing: -.02em; white-space: nowrap; }
.nav-links { display: none; gap: 4px; }
.nav-links a { padding: 8px 10px; border-radius: 8px; color: var(--indigo); font-weight: 500; font-size: .93rem; text-decoration: none; }
.nav-links a:hover { background: var(--paper); color: var(--purple-deep); }
.h-phone { display: none; font-weight: 700; font-size: .93rem; color: var(--purple); text-decoration: none; white-space: nowrap; }
.h-enroll { display: none; }
@media (min-width: 900px) {
  .site-header { position: sticky; top: 0; padding-top: 8px; margin-bottom: -80px; }
  .h-enroll { display: inline-flex; }
  .h-phone { display: inline; }
}
@media (min-width: 1120px) { .nav-links { display: flex; } }
@media (min-width: 1120px) { .menu { display: none; } }

.menu { position: relative; }
.menu summary {
  list-style: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--paper); cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary span, .menu summary span::before, .menu summary span::after {
  content: ""; display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--indigo);
  position: relative; transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.menu summary span::before { position: absolute; top: -6px; }
.menu summary span::after { position: absolute; top: 6px; }
.menu[open] summary span { background: transparent; }
.menu[open] summary span::before { top: 0; transform: rotate(45deg); }
.menu[open] summary span::after { top: 0; transform: rotate(-45deg); }
.menu nav {
  position: absolute; right: -4px; top: calc(100% + 12px); width: min(320px, calc(100vw - 32px));
  display: grid; padding: 10px; border-radius: 16px; background: var(--white);
  box-shadow: 0 24px 60px rgba(30, 11, 73, .18);
}
.menu nav a { padding: 12px 14px; border-radius: 10px; color: var(--indigo); font-weight: 600; text-decoration: none; }
.menu nav a:hover { background: var(--paper); }
.menu nav .menu-call { margin-top: 6px; background: var(--lilac); color: var(--purple-deep); }

/* ── Hero: looping drone video of the center.
   Phones: copy on indigo, then the video, then the info card. Desktop: the video fills the hero untouched
   (no fades) and the copy sits on a frosted indigo panel so it stays readable over any frame. ── */
.hero { padding: 0; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr; }
.hero-copy { position: relative; z-index: 2; padding: 28px var(--gutter) 40px; background: var(--indigo); }
.hero h1 { max-width: 7.83em; color: var(--white); } /* em, not ch: ch follows the font, so the fallback would wrap differently */
.hero h1 em { color: var(--yellow); }
.hero .lead { margin-top: 20px; max-width: 34rem; color: rgba(253, 248, 222, .86); }
.hero .btn-row { margin-top: 28px; }
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin-top: 40px; }
.facts li { padding-inline: clamp(12px, 2.4vw, 28px); border-left: 1px solid rgba(253, 248, 222, .2); }
.facts li:first-child { padding-left: 0; border-left: 0; }
.facts b { display: block; white-space: nowrap; font: 400 clamp(1.02rem, .55rem + 2vw, 1.8rem)/1.1 var(--font-head); letter-spacing: -.02em; color: var(--cream); }
.facts span { display: block; width: 0; min-width: 100%; margin-top: 6px; font-size: .84rem; line-height: 1.35; color: rgba(253, 248, 222, .74); }
@media (max-width: 479px) { /* phones: one fact per line, value then label */
  .facts { grid-template-columns: 1fr; gap: 8px; margin-top: 32px; }
  .facts li, .facts li:first-child { display: flex; align-items: baseline; gap: 10px; padding: 0; border: 0; }
  .facts span { width: auto; min-width: 0; margin-top: 0; }
}
.jump { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 36px; font-size: .9rem; }
.jump a { color: rgba(253, 248, 222, .74); text-decoration: none; }
.jump a:hover { color: var(--yellow); text-decoration: underline; }

.hero-art { position: relative; overflow: hidden; isolation: isolate; background: var(--indigo); }
.hero-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--indigo-2); }
.hero h1 .w { display: inline-block; } /* each word can rise on load; same line breaks with or without motion */
.glass {
  position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 20px;
  padding: 8px; border-radius: 24px;
  background: rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55) inset;
}
.hero .glass { position: relative; left: auto; right: auto; bottom: auto; margin: 16px var(--gutter) 28px; background: rgba(255, 255, 255, .14); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset; }
.glass-inner { padding: 18px 20px; border-radius: 18px; background: var(--white); }
.glass-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--purple-deep); }
.glass-title { margin-top: 10px; font: 400 clamp(1.3rem, 1.1rem + .8vw, 1.65rem)/1.15 var(--font-head); letter-spacing: -.02em; color: var(--indigo); }
.glass p { margin-top: 4px; font-size: .92rem; }
.glass .btn-row { margin-top: 14px; gap: 8px; }
.glass .btn { flex: 1 1 0; }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(100svh, 920px); overflow: hidden; border-radius: 0 0 40px 40px; background: var(--indigo); }
  .hero-copy {
    align-self: center;
    margin: 112px clamp(24px, 3vw, 48px) 56px max(var(--gutter), calc((100vw - var(--max)) / 2 + 36px));
    padding: clamp(28px, 3vw, 44px); border-radius: 28px;
    background: rgba(30, 11, 73, .8);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 24px 60px rgba(30, 11, 73, .25);
  }
  .hero h1 { max-width: 8.43em; font-size: clamp(2.6rem, 1rem + 3.3vw, 3.7rem); }
  .hero .facts { margin-top: 32px; }
  .hero .facts li { padding-inline: clamp(12px, 1.4vw, 20px); }
  .hero .facts li:first-child { padding-left: 0; }
  .hero .facts b { font-size: clamp(1.1rem, .3rem + 1.5vw, 1.5rem); }
  .hero .jump { margin-top: 28px; }
  .hero-art { position: absolute; inset: 0; }
  .hero-video { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 62% 50%; }
  .hero .glass {
    position: absolute; margin: 0; left: auto; top: 112px; bottom: auto; width: 340px; /* top-right: the sign crosses the bottom-right mid-clip */
    right: max(var(--gutter), calc((100vw - var(--max)) / 2 + 36px));
    background: rgba(255, 255, 255, .42); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55) inset;
  }
}

@media (min-width: 900px) and (max-width: 1199px) { .hero .glass { display: none; } } /* no room beside the panel; header phone + footer cover it */

/* ── Marquee: grounded facts, slow ── */
.marquee { padding: 0; background: transparent; color: var(--indigo); overflow: hidden; }
.marquee-track { display: flex; width: max-content; }
.marquee ul { display: flex; align-items: center; gap: 0; padding: 15px 0; }
.marquee li { display: flex; align-items: center; gap: 28px; padding-right: 28px; font: 500 1.05rem/1.2 var(--font-head); letter-spacing: -.01em; white-space: nowrap; }
.marquee li::after { content: ""; width: 9px; height: 9px; background: var(--purple); transform: rotate(45deg); border-radius: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 48s linear infinite; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { width: auto; }
  .marquee ul { flex-wrap: wrap; justify-content: center; padding-inline: var(--gutter); }
  .marquee ul[aria-hidden="true"] { display: none; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Bands ── */
.band-white { background: var(--white); }
.band-cream { background: var(--cream); }
.band-lilac { background: var(--lilac); }
.band-yellow { background: var(--yellow); }
.band-indigo { background: var(--indigo); color: var(--cream); }
.band-purple { background: var(--purple); color: var(--white); }
.band-indigo h1, .band-indigo h2, .band-indigo h3, .band-purple h1, .band-purple h2, .band-purple h3 { color: var(--white); }
.band-indigo p { color: rgba(253, 248, 222, .82); }
.band-purple p { color: rgba(255, 255, 255, .9); }
.band-indigo h1 em, .band-indigo h2 em, .band-purple h1 em, .band-purple h2 em { color: var(--yellow); }

/* ── App: numbered accordion rows ── */
.app-grid { display: grid; gap: 40px; }
.app-grid .section-head { margin-bottom: 0; }
.app-grid .btn-row { margin-top: 28px; }
.app-grid .rows { margin-top: 40px; }
.app-stage { display: grid; place-items: center; padding: clamp(32px, 5vw, 64px) 24px; border-radius: 32px; background: var(--lilac); }
.phone { margin: 0; width: min(100%, 300px); text-align: center; }
.phone video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 28px; background: var(--paper-2); box-shadow: 0 18px 40px rgba(30, 11, 73, .18); }
.phone figcaption { margin-top: 10px; font-size: .86rem; color: var(--muted); }
.rows { display: grid; gap: 10px; }
.row {
  border-radius: var(--r); background: var(--paper);
  transition: background-color .2s var(--ease);
}
.band-cream .row { background: var(--white); }
.row summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; font: 400 clamp(1.2rem, 1.05rem + .6vw, 1.55rem)/1.2 var(--font-head); letter-spacing: -.015em; color: var(--indigo);
}
.row summary::-webkit-details-marker { display: none; }
.num { flex: none; min-width: 2.2em; font: 400 1rem/1 var(--font-head); font-variant-numeric: lining-nums tabular-nums; color: var(--purple); letter-spacing: 0; }
.row summary::after {
  content: ""; flex: none; margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--lilac) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A238C' stroke-width='2.4' stroke-linecap='round'><path d='M12 6v12M6 12h12'/></svg>") center / 16px no-repeat;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.row[open] summary::after { transform: rotate(45deg); background-color: var(--yellow); }
.row .row-body { padding: 0 20px 20px calc(20px + 2.2rem + 16px); }
.row .row-body p + p { margin-top: 10px; }
@supports (interpolate-size: allow-keywords) {
  .rows { interpolate-size: allow-keywords; }
  .row::details-content { block-size: 0; overflow: hidden; transition: block-size .2s var(--ease), content-visibility .2s allow-discrete; }
  .row[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) { .row::details-content { transition: none; } }
@media (min-width: 900px) {
  .app-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .app-stage { position: sticky; top: 112px; }
}

/* ── Location: about split with a drawn street map ── */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }
.info { display: grid; gap: 14px; margin-top: 28px; }
.info li { display: flex; gap: 14px; align-items: flex-start; }
.info .i { margin-top: 3px; color: var(--purple); }
.info b { display: block; font-weight: 700; color: var(--indigo); }
.info span, .info a { color: var(--body); }
.loc-actions { margin-top: 30px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pills li { padding: 6px 12px; border-radius: 999px; background: var(--paper-2); color: var(--indigo); font-size: .86rem; font-weight: 600; }
.band-white .pills li { background: var(--paper); }
.map-card { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); aspect-ratio: 5 / 4; }
.map-card svg { width: 100%; height: 100%; }
.map-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.map-card .glass { left: 16px; right: auto; bottom: 16px; width: min(300px, calc(100% - 32px)); }
.map-card .glass-inner { padding: 14px 16px; }
.map-card .glass b { display: block; font: 500 1.15rem/1.2 var(--font-head); color: var(--indigo); }
.map-card .glass span { display: block; margin-top: 2px; font-size: .86rem; color: var(--muted); }

/* ── Uniforms: owner flyer facts + illustrative 3D preview ── */
.uni-sub { margin-top: 30px; font-size: 1.3rem; }
.uni-steps { display: grid; gap: 8px; margin-top: 14px; }
.uni-steps li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--white); font-weight: 600; color: var(--indigo); }
.uni-steps .num { display: grid; place-items: center; width: 30px; height: 30px; min-width: 30px; border-radius: 50%; background: var(--purple); color: var(--white); font: 700 .85rem/1 var(--font-body); }
.uni-note { margin-top: 10px; font-size: .92rem; color: var(--muted); }
.uni-pill { display: inline-block; margin-top: 18px; padding: 8px 16px; border-radius: 999px; background: var(--yellow); color: var(--indigo); font-weight: 700; }
.uni-why { margin-top: 16px; border-radius: 16px; background: var(--paper-2); }
.uni-why summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font-weight: 700; color: var(--indigo); }
.uni-why summary::-webkit-details-marker { display: none; }
.uni-why summary::after { content: "+"; font: 400 1.4rem/1 var(--font-body); color: var(--purple); transition: transform .2s var(--ease); }
.uni-why[open] summary::after { transform: rotate(45deg); }
.uni-why ul { display: grid; gap: 12px; padding: 0 18px 18px; }
.uni-why li { font-size: .95rem; color: var(--body); }
.uni-why li b { display: block; color: var(--indigo); }
.uni-figure { margin: 0; }
.uni-stage {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 85% at 50% 38%, var(--indigo-2) 0%, var(--indigo) 72%);
}
.uni-fallback, .uni-stage model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; }
.uni-fallback { object-fit: contain; }
.uni-stage model-viewer { --poster-color: transparent; background: transparent; }
/* focus lands inside model-viewer's shadow root, so the ring goes on the host via :focus-within */
.uni-stage model-viewer:focus-within { outline: 3px solid var(--yellow); outline-offset: -6px; border-radius: var(--r-lg); }
.uni-hint {
  position: absolute; left: 14px; top: 14px; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: var(--indigo-2); color: var(--cream); font-size: .8rem; font-weight: 600;
}
.uni-hint .i { width: 14px; height: 14px; }
.is-failed .uni-hint { display: none; }
.uni-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.swatch {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 8px;
  border: 0; border-radius: 999px; background: var(--paper-2); color: var(--indigo);
  font: 600 .92rem/1 var(--font-body); cursor: pointer; transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.swatch::before { content: ""; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(30, 11, 73, .18); }
.swatch-white::before { background: #FFFFFF; }
.swatch-purple::before { background: #6F2DA8; } /* kit variant hex */
.swatch-gold::before { background: #F4C430; }   /* kit variant hex */
.swatch:hover { background: var(--lilac); }
.swatch[aria-pressed="true"] { background: var(--white); box-shadow: inset 0 0 0 2px var(--purple); }
.uni-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.uni-status { margin: 0; font-size: .9rem; color: var(--muted); }
.uni-figure figcaption { margin-top: 8px; font-size: .85rem; color: var(--muted); }

/* ── Note to families (envelope) ──
   The letter sits in .env-slot, which clips only at its bottom edge (hidden behind the pocket), so the
   closed state is the letter pushed down out of sight. Open = the default, so no JS or reduced motion
   simply shows the letter; the opening plays only under .js before .is-in (see the motion block). */
.envelope { padding-block: clamp(48px, 7vw, 88px); }
.env-grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
.env-head { text-align: center; }
.envelope h2 { max-width: 9.63em; margin-inline: auto; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
.env-wrap { --env-h: 140px; position: relative; isolation: isolate; width: min(100%, 540px); margin-inline: auto; padding-bottom: 24px; }
.env-back { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: var(--env-h); border-radius: 6px 6px 16px 16px; background: var(--sun); }
.env-slot { position: relative; z-index: 1; margin-inline: 5%; clip-path: inset(-100vh -40px 0 -40px); }
.letter {
  padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 30px) 68px;
  border-radius: 14px 14px 0 0; background: var(--white); text-align: left;
  box-shadow: 0 -8px 30px rgba(30, 11, 73, .14);
}
.letter h3 { font-size: 1.25rem; }
.letter p { margin-top: 10px; font-size: .95rem; line-height: 1.6; color: var(--body); }
.letter .sign { margin-top: 16px; font: 400 1.15rem/1.2 var(--font-head); color: var(--purple); }
.env-pocket {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: var(--env-h);
  border-radius: 0 0 16px 16px; background: var(--yellow);
  clip-path: polygon(0 40%, 50% 75%, 100% 40%, 100% 100%, 0 100%);
}
.env-flap {
  position: absolute; z-index: 0; left: 0; right: 0; bottom: calc(var(--env-h) - 2px); height: calc(var(--env-h) * .62);
  background: #F6C114; clip-path: polygon(0 100%, 100% 100%, 50% 0); /* open: folded up behind the letter */
  transform: perspective(900px) rotateX(0deg); transform-origin: 50% 100%;
}
@media (min-width: 900px) {
  .env-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .env-head { text-align: left; }
  .envelope h2 { margin-inline: 0; }
}

/* ── Why families: tonal tiles ── */
.tiles { display: grid; gap: 14px; }
@media (min-width: 680px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { padding: 26px; border-radius: var(--r); background: var(--white); transition: transform .2s var(--ease); }
.tile:hover { transform: translateY(-4px); }
.tile h3 { font-size: 1.45rem; }
.tile p { margin-top: 8px; font-size: .97rem; }
.tile a { font-weight: 600; }

/* ── FAQ: sticky left, numbered rows right ── */
.faq-grid { display: grid; gap: 36px; }
@media (min-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .faq-grid > :first-child { position: sticky; top: 128px; }
}
.faq-grid .btn-row { margin-top: 26px; }

/* ── Interior page hero ── */
.page-hero { padding-block: clamp(36px, 6vw, 72px) clamp(48px, 7vw, 88px); }
@media (min-width: 900px) { .page-hero { padding-top: 168px; } }
.page-hero h1 { max-width: 10.84em; }
.page-hero .lead { margin-top: 20px; max-width: 38rem; }
.page-hero .btn-row { margin-top: 28px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-size: .88rem; color: var(--muted); }
.crumbs a { color: var(--purple); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.on-dark .crumbs, .band-indigo .crumbs { color: rgba(253, 248, 222, .75); }
.band-indigo .crumbs a { color: var(--yellow); }
.page-hero.center { text-align: center; }
.page-hero.center h1, .page-hero.center .lead { margin-inline: auto; }
.page-hero.center .btn-row, .page-hero.center .crumbs { justify-content: center; }

.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 56px; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 32px; font-size: 1.35rem; }
.prose ul, .prose ol { padding-left: 1.3em; color: var(--body); }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--purple); }
.callout { padding: 22px 24px; border-radius: var(--r); background: var(--lilac); }
.callout p { color: var(--indigo); }
.callout-yellow { background: var(--yellow-soft); }

/* ── Get the app: step list ── */
.setup { display: grid; gap: 12px; counter-reset: s; }
.setup > li { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; padding: 24px; border-radius: var(--r); background: var(--white); }
.setup > li > .num { grid-row: span 3; font-size: 1.6rem; padding-top: 2px; }
.setup h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); }
.setup p, .setup ul { grid-column: 2; }
.setup ul { padding-left: 1.2em; color: var(--body); }
.setup ul li + li { margin-top: 6px; }
.setup .btn { grid-column: 2; justify-self: start; margin-top: 10px; padding-block: 10px; line-height: 1.3; white-space: normal; text-align: left; }
@media (max-width: 560px) { .setup > li { grid-template-columns: 1fr; padding: 20px; } .setup > li > .num { grid-row: auto; } .setup p, .setup ul, .setup .btn { grid-column: 1; } }

/* ── Enroll form ── */
.enroll-grid { display: grid; gap: 28px; align-items: start; grid-template-areas: "intro" "form" "aside"; }
.enroll-intro { grid-area: intro; }
.enroll-grid .form-card { grid-area: form; }
.enroll-aside { grid-area: aside; }
.enroll-aside .checks { margin-top: 0; }
@media (min-width: 980px) {
  .enroll-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-areas: "intro form" "aside form"; grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 26px; }
}
.eyebrow { display: block; margin-bottom: 14px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--purple); }
.checks { display: grid; gap: 10px; margin-top: 26px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--body); }
.checks .i { margin-top: 3px; color: var(--purple); stroke-width: 2.6; }
.talk { margin-top: 30px; padding: 4px 0 4px 20px; border-left: 3px solid var(--purple); }
.talk p { font: 400 1.2rem/1.4 var(--font-head); color: var(--indigo); }
.talk a { font-family: var(--font-body); font-style: normal; font-weight: 700; font-size: 1rem; }

.form-card { padding: clamp(20px, 4vw, 40px); border-radius: var(--r-lg); background: var(--white); box-shadow: 0 24px 70px rgba(30, 11, 73, .08); }
.form-step { display: flex; align-items: center; gap: 12px; margin: 34px 0 18px; font: 400 1.45rem/1.2 var(--font-head); letter-spacing: -.015em; color: var(--indigo); }
.form-step:first-of-type { margin-top: 0; }
.form-step .badge { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--purple); color: var(--white); font: 700 .85rem/1 var(--font-body); }
.grid-2 { display: grid; gap: 16px; }
@media (min-width: 620px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; align-content: start; }
.field + .field, .grid-2 + .field, .field + .grid-2, .grid-2 + .grid-2 { margin-top: 16px; }
.grid-2 > .field { margin-top: 0; } /* the grid gap spaces these; a margin here pushed the right column down */
label, legend { font-weight: 600; font-size: .92rem; color: var(--indigo); }
.req { color: var(--error); }
.hint { font-size: .84rem; color: var(--muted); }
input, select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: inherit; font-size: 1rem; /* 16px: no iOS zoom */
  color: var(--indigo); background: var(--paper);
  border: 1.5px solid transparent; border-radius: 12px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
select { appearance: none; padding-right: 40px; background: var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E0B49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") right 14px center / 18px no-repeat; }
textarea { min-height: 110px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--lilac-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--purple); background-color: var(--white); box-shadow: 0 0 0 4px var(--lilac); }
input:user-invalid, select:user-invalid { border-color: var(--error); }
.age-input { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 8px; }
.child-block { padding: 16px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--paper-2); }
.child-block + .child-block { margin-top: 12px; }
.child-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.child-title { font-weight: 700; font-size: .92rem; color: var(--purple-deep); }
.child-remove { border: 0; background: none; font: 600 .88rem var(--font-body); color: var(--purple); cursor: pointer; text-decoration: underline; min-height: 32px; }
.add-child { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; border: 0; border-radius: 10px; background: var(--lilac); color: var(--purple-deep); font: 600 .92rem var(--font-body); cursor: pointer; }
.add-child:hover { background: var(--lilac-2); }
.choice-row { display: grid; gap: 10px; margin-top: 10px; }
@media (min-width: 520px) { .choice-row { grid-template-columns: 1fr 1fr; } }
fieldset { border: 0; min-width: 0; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--paper); cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.choice:hover { box-shadow: inset 0 0 0 1.5px var(--lilac-2); }
.choice:has(input:checked) { background: var(--lilac); box-shadow: inset 0 0 0 1.5px var(--purple); }
.choice input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--purple); }
.choice strong { display: block; font-size: .98rem; }
.choice small { display: block; font-size: .84rem; color: var(--muted); }
.pickup { margin-top: 16px; }
.consent { margin-top: 28px; padding: 16px 18px; border-radius: 14px; background: var(--paper); font-size: .84rem; line-height: 1.6; color: var(--body); }
.consent strong { font-weight: 700; }
.form-submit { width: 100%; margin-top: 18px; min-height: 58px; font-size: 1.05rem; justify-content: space-between; padding-left: 24px; }
.form-submit:disabled { opacity: .7; cursor: progress; transform: none; }
.hp { position: absolute !important; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.alert { margin-bottom: 22px; padding: 14px 16px; border-radius: 12px; background: var(--error-bg); color: var(--error); font-weight: 600; }
.alert[hidden] { display: none; }
.noscript { margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; background: var(--yellow-soft); color: var(--indigo); }
[hidden] { display: none !important; }

/* ── Small centred pages (success, 404) ── */
.solo { min-height: 70vh; display: grid; place-items: center; padding-top: clamp(24px, 4vw, 56px); text-align: center; }
@media (min-width: 900px) { .solo { padding-top: 120px; } } /* clears the floating desktop nav */
.solo .container { max-width: 680px; }
.solo img { width: min(300px, 70%); margin: 0 auto 26px; }
.solo h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.3rem); }
.solo .lead { margin-top: 16px; }
.solo .btn-row { justify-content: center; margin-top: 30px; }
.next-steps { display: grid; gap: 10px; margin-top: 32px; text-align: left; }
.next-steps li { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding: 18px 20px; border-radius: var(--r); background: var(--white); }
.next-steps .num { grid-row: span 2; font-size: 1.3rem; }
.next-steps b { font: 500 1.2rem/1.3 var(--font-head); color: var(--indigo); }

/* ── Footer: indigo band + paper link panel ── */
.site-footer { position: relative; padding-top: var(--section); padding-bottom: 24px; background: var(--indigo); color: var(--cream); overflow: hidden; }
.foot-cta { display: grid; gap: 28px; align-items: end; padding-bottom: clamp(40px, 6vw, 64px); }
@media (min-width: 900px) { .foot-cta { grid-template-columns: 1fr auto; } }
.foot-cta .display { font-size: clamp(2.3rem, 1.3rem + 4vw, 4.4rem); line-height: 1.02; letter-spacing: -.03em; color: var(--white); }
.foot-cta .display span { display: block; color: var(--yellow); }
.foot-cta p { margin-top: 14px; color: rgba(253, 248, 222, .82); max-width: 34rem; }
.site-footer-slim { padding-top: clamp(32px, 5vw, 56px); }
.foot-panel { display: grid; gap: 32px; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg); background: var(--paper); color: var(--indigo); }
.foot-top { display: grid; gap: 32px; }
@media (min-width: 900px) { .foot-top { grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr)); } }
.foot-brand img { width: 150px; }
.foot-brand p { margin-top: 14px; font-size: .92rem; max-width: 16.66em; }
.foot-col h2 { margin-bottom: 12px; font: 700 .76rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--purple); }
.foot-col li + li { margin-top: 8px; }
.foot-col a, .foot-col span { font-size: .93rem; color: var(--body); text-decoration: none; }
.foot-col a:hover { color: var(--purple); text-decoration: underline; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
@media (min-width: 900px) { .foot-cols { display: contents; } }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--muted); }
.foot-bottom a { color: var(--muted); }

/* ── Mobile Call / Enroll bar: the one sticky element on phones ── */
.mob-bar { display: none; }
@media (max-width: 899px) {
  .mob-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(250, 248, 235, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 -1px 0 var(--line);
    transition: transform .25s var(--ease-out);
  }
  .mob-bar .btn { min-height: 46px; font-size: .95rem; padding: 0 14px; }
  .mob-bar-single { grid-template-columns: 1fr; }
  .cta-in-view .mob-bar { transform: translateY(110%); }
  .site-footer { padding-bottom: calc(24px + 72px + env(safe-area-inset-bottom)); }
  body:not(:has(.mob-bar)) .site-footer { padding-bottom: 24px; }
}

/* ── Scroll reveal (JS adds .js; reduced motion skips it entirely) ── */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal-2 { transition-delay: .08s; }
  .js .reveal-3 { transition-delay: .16s; }
  /* envelope: the flap swings down shut, then on reveal swings open and the letter slides up out */
  .env-wrap .env-flap { transition: transform .6s var(--ease-out), z-index 0s .3s; }
  .env-wrap .letter { transition: transform .95s var(--ease-out) .45s; }
  .js .env-wrap:not(.is-in) .env-flap { z-index: 3; transform: perspective(900px) rotateX(180deg); }
  .js .env-wrap:not(.is-in) .letter { transform: translateY(calc(100% + 24px)); }
}

/* ── Hero motion (transform and opacity only; reduced motion = everything simply shows) ──
   Copy rises in order (tag, headline word by word, lead, buttons, facts) and the info card slides up.
   The video is started by site.js: never under reduced motion, paused offscreen and in background tabs. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *, .hero h1 .w { animation: rise-in .7s var(--ease-out) both; }
  .hero-copy > h1 { animation: none; }
  .hero h1 .w { animation-name: word-in; }
  .hero-copy > .tag { animation-delay: .05s; }
  .hero h1 > .w:nth-child(1) { animation-delay: .10s; }
  .hero h1 > .w:nth-child(2) { animation-delay: .14s; }
  .hero h1 > .w:nth-child(3) { animation-delay: .18s; }
  .hero h1 > .w:nth-child(4) { animation-delay: .22s; }
  .hero h1 > .w:nth-child(5) { animation-delay: .25s; }
  .hero h1 > .w:nth-child(6) { animation-delay: .28s; }
  .hero h1 > .w:nth-child(7) { animation-delay: .31s; }
  .hero h1 em .w:nth-child(1) { animation-delay: .36s; }
  .hero h1 em .w:nth-child(2) { animation-delay: .41s; }
  .hero-copy > .lead { animation-delay: .3s; }
  .hero-copy > .hero-cta { animation-delay: .36s; }
  .hero-copy > .facts { animation-delay: .44s; }
  .hero-copy > .jump { animation-delay: .5s; }
  .hero .glass { animation: rise-in .8s var(--ease-out) .45s both; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes word-in { from { opacity: 0; transform: translateY(.38em); } to { opacity: 1; transform: none; } }

/* ── Page odds and ends ── */
.setup-title { margin-bottom: 22px; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); }
.next-call { margin-top: 16px; text-align: left; }
.page-hero .callout { margin-top: 28px; }
.prose .callout { margin-top: 28px; }

/* ---- mobile polish (2026-11-04): spacing + 44px touch targets ---- */
/* a hidden .pickup row sits between two .grid-2 blocks and broke the sibling spacing rule */
.grid-2 + .pickup, .pickup + .grid-2 { margin-top: 16px; }
.link-arrow { min-height: 44px; }
.jump a, .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs { margin-bottom: 8px; }
.foot-bottom a { display: inline-block; padding: 12px 0; }
@media (max-width: 899px) {
  .foot-col li + li { margin-top: 0; }
  .foot-col a { display: inline-block; padding: 12px 0; }
}
/* 320px phones: the wordmark was clipped by the menu button */
@media (max-width: 359px) {
  .nav-pill { gap: 8px; padding-left: 8px; }
  .brand { gap: 8px; min-width: 0; }
  .brand img { width: 48px; }
  .brand span { font-size: 1.02rem; }
}

/* ---- phone hero (2026-11-04): fit the headline, buttons and photo in one screen ---- */
@media (max-width: 899px) {
  .hero-copy { padding: 16px var(--gutter) 24px; }
  .hero h1 { font-size: clamp(1.95rem, 1.1rem + 3.4vw, 2.5rem); line-height: 1.04; }
  .hero .lead { margin-top: 12px; font-size: 1rem; line-height: 1.5; }
  .hero .btn-row { margin-top: 18px; }
  .hero .facts { margin-top: 16px; gap: 4px; }
  .hero .jump { display: none; } /* same three links live in the menu */
}