/* ainoo. front page
   Colours, type and elements follow ainoo_brand_book_v1.1 (BRAND/).
   Mobile first; the two-column desktop layout starts at 900px. */

/* ---------- Fonts (brand book v1.2): Bricolage Grotesque for headlines, titles, eyebrows and labels;
   Alegreya Sans for body text, buttons and form choices. Self-hosted from assets/fonts/ (the web files
   from BRAND/FONTS/WEB; SIL Open Font License, see the OFL files there). Bricolage is one variable file:
   with font-optical-sizing: auto (the default) the browser picks its 12/36/96pt cut from the type size. ---------- */

@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("assets/fonts/bricolage-grotesque-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/alegreya-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya Sans";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("assets/fonts/alegreya-sans-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/alegreya-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya Sans";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("assets/fonts/alegreya-sans-700-italic.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  /* Core */
  --navy: #0C1B60;
  --pale: #EDF1FB;
  --white: #FFFFFF;
  --blue: #3B5BD9;   /* accent on light */
  --sky: #9DBBFF;    /* accent on navy */

  /* Navy depth */
  --navy-card: #132375;
  --navy-line: #27389A;
  --ring: #24357E;

  /* Text tints */
  --muted: #5C6789;  /* body on light */
  --mist: #8FA2D6;   /* small print on navy */
  --haze: #A9BAE8;   /* body on navy */
  --frost: #C3D2F5;  /* hero tagline */

  /* Lines and fills */
  --line: #DCE4F7;
  --chip: #E4EBFA;

  /* Functional, product mockup only */
  --deadline: #C2410C;
  --done: #2E7D53;

  --font-head: "Bricolage Grotesque", system-ui, sans-serif; /* headlines, titles, eyebrows, labels */
  --font-body: "Alegreya Sans", system-ui, sans-serif;       /* body text, captions, buttons, form choices */

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --gutter: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
}

/* ---------- Base ---------- */

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

html {
  background: var(--navy);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--haze);
  font: 400 1.0625rem/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--sky); color: var(--navy); }

:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Top bar: small wordmark left, menu button right ---------- */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 14px) var(--gutter) 14px;
}
/* Full-width material behind the bar, so the white wordmark stays readable over the pale sections */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: rgb(12 27 96 / 0.94);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
@media (prefers-reduced-transparency: reduce) {
  .topbar::before { background: var(--navy); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Brand book minimum on screen is 96px wide */
.brand {
  display: block;
  line-height: 0;
  border-radius: 4px;
}
.brand img {
  width: clamp(104px, 28vw, 124px);
  height: auto;
}

.menu-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;            /* optical: the lines, not the tap area, align with the gutter */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
.menu-btn:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .menu-btn:hover { background: rgb(255 255 255 / 0.08); }
}

/* Two lines that cross into an X */
.menu-lines {
  position: relative;
  width: 22px;
  height: 12px;
}
.menu-lines i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 240ms var(--ease-out);
}
.menu-lines i:first-child { top: 0; }
.menu-lines i:last-child { bottom: 0; }
.menu-btn[aria-expanded="true"] .menu-lines i:first-child { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-lines i:last-child { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Menu: headlines at the top, the waitlist button at the bottom ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Same 1200px column as the top bar, so the headlines line up under the wordmark */
  padding: calc(env(safe-area-inset-top) + 104px) max(var(--gutter), calc((100% - 1200px) / 2 + var(--gutter))) calc(env(safe-area-inset-bottom) + 28px);
  background: var(--navy);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms var(--ease-out), visibility 0s linear 160ms;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms var(--ease-out);
}

.menu-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-links li {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.menu.is-open .menu-links li {
  opacity: 1;
  transform: none;
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
  transition-delay: calc(40ms + var(--k) * 40ms);
}
.menu-links a {
  display: block;
  padding: 10px 0;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 150ms ease;
}
.menu-links a:active { color: var(--sky); }
.menu-links a[aria-current="page"] { color: var(--sky); }
@media (hover: hover) and (pointer: fine) {
  .menu-links a:hover { color: var(--sky); }
}

.menu-join {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  height: 56px;
  border: 0;
  border-radius: 28px;
  background: var(--white);
  color: var(--navy);
  font: 700 1.0625rem/1 var(--font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out), background-color 150ms ease;
}
.menu.is-open .menu-join {
  opacity: 1;
  transform: none;
  transition: opacity 280ms var(--ease-out) 120ms, transform 280ms var(--ease-out) 120ms, background-color 150ms ease;
}
.menu.is-open .menu-join:active { transform: scale(0.97); transition-delay: 0s; }
.menu-join .icon { font-size: 1.15em; stroke-width: 2.25; }
@media (hover: hover) and (pointer: fine) {
  .menu-join:hover { background: var(--pale); }
}

html.menu-open { overflow: hidden; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: clip;
  isolation: isolate;
}

.hero-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* Room for the top bar, then the copy sits a little above the middle */
  padding: calc(env(safe-area-inset-top) + clamp(128px, 24svh, 220px)) var(--gutter) 64px;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

/* The first sentence: Bricolage Grotesque Regular (the only Regular headline), White */
.tagline {
  margin: 0;
  max-width: 16ch;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(2.375rem, 1.5rem + 4.2vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* ---------- Waitlist: a button that opens into the email field, in place ---------- */

.waitlist {
  --closed-w: 100%;
  --pill-h: 56px;
  width: 100%;
  max-width: 440px;
  margin-top: 32px;
}

.wl-pill {
  position: relative;
  height: var(--pill-h);
  border-radius: calc(var(--pill-h) / 2);
  background: var(--white);
  /* Closed: only the button-sized part shows. Open: the whole field, plus 5px so the focus ring isn't cut. */
  clip-path: inset(0 calc(100% - var(--closed-w)) 0 0 round calc(var(--pill-h) / 2));
  transform-origin: calc(var(--closed-w) / 2) 50%;
  transition:
    clip-path 360ms var(--ease-out),
    background-color 300ms ease,
    box-shadow 200ms ease,
    transform 160ms var(--ease-out);
}

.waitlist:not([data-state="closed"]) .wl-pill {
  clip-path: inset(-5px round calc(var(--pill-h) / 2 + 5px));
}

.wl-trigger {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--closed-w);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--navy);
  font: 700 1.0625rem/1 var(--font-body);
  letter-spacing: 0.005em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 120ms var(--ease-out);
}
.wl-trigger .icon {
  font-size: 1.15em;
  stroke-width: 2.25;
  transition: transform 200ms var(--ease-out);
}
.wl-trigger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--blue);
}

/* Press feedback, on the whole pill, from the moment of touch */
.waitlist[data-state="closed"] .wl-pill:has(.wl-trigger:active) {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .waitlist[data-state="closed"] .wl-pill:has(.wl-trigger:hover) { background: var(--pale); }
  .wl-trigger:hover .icon { transform: translateX(3px); }
}

.waitlist:not([data-state="closed"]) .wl-trigger {
  opacity: 0;
  pointer-events: none;
}

.wl-field {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
}
.waitlist:is([data-state="open"], [data-state="sending"]) .wl-field {
  opacity: 1;
  transition: opacity 240ms var(--ease-out) 90ms;
}
.waitlist:is([data-state="open"], [data-state="sending"]) .wl-pill:focus-within {
  box-shadow: 0 0 0 4px rgb(157 187 255 / 0.5);
}

.wl-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 22px;
  border: 0;
  /* Round like the pill, 6px inside it. AutoFill's tint (yellow in Safari) paints the input's own box,
     which would otherwise stick out of the pill's round ends as a square. */
  border-radius: calc(var(--pill-h) / 2 - 6px);
  background: transparent;
  color: var(--navy);
  font: 400 1.0625rem/1 var(--font-body); /* 17px: large enough that iOS doesn't zoom on focus */
  outline: none;
  caret-color: var(--blue);
}
.wl-field input::placeholder { color: var(--muted); opacity: 1; }

.wl-submit {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--pill-h);
  margin-top: 20px;
  padding: 0 24px;
  border: 0;
  border-radius: calc(var(--pill-h) / 2);
  background: var(--white);
  color: var(--navy);
  font: 700 1.0625rem/1 var(--font-body);
  letter-spacing: 0.005em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
.wl-submit:active { transform: scale(0.97); }
.wl-submit:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .wl-submit:hover { background: var(--pale); }
}

.wl-submit-label,
.wl-spinner {
  grid-area: 1 / 1;
  transition: opacity 150ms var(--ease-out);
}
.wl-spinner {
  font-size: 1.2em;
  opacity: 0;
  animation: spin 700ms linear infinite;
}
.waitlist[data-state="sending"] .wl-submit { cursor: progress; }
.waitlist[data-state="sending"] .wl-submit-label { opacity: 0; }
.waitlist[data-state="sending"] .wl-spinner { opacity: 1; }

/* Done: the same pill turns into a Navy Card with a Sky check */
.waitlist[data-state="done"] .wl-pill {
  background: var(--navy-card);
  box-shadow: inset 0 0 0 1px var(--navy-line);
}
.wl-done-row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  color: var(--white);
  font: 700 1.0625rem/1.2 var(--font-body);
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
}
.waitlist[data-state="done"] .wl-done-row {
  opacity: 1;
  transition: opacity 300ms var(--ease-out) 120ms;
}
.wl-check {
  font-size: 1.5rem;
  color: var(--sky);
}
.wl-check circle,
.wl-check path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.waitlist[data-state="done"] .wl-check circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 500ms var(--ease-out) 150ms;
}
.waitlist[data-state="done"] .wl-check path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 300ms var(--ease-out) 450ms;
}

/* The row under the pill (step 2, then the confirmation text) opens once the email is written
   (data-details), or to show an email error on its own */
.wl-extra {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 360ms var(--ease-out);
}
.waitlist:not([data-state="closed"]):is([data-details], [data-error]) .wl-extra { grid-template-rows: 1fr; }

/* Step 2 (the group, the consent and the Join button) waits for the email. The fade covers the one case
   where it arrives inside a row that's already open: right after an email error was fixed. */
.waitlist:not([data-details]) :is(.wl-details, .wl-submit) { display: none; }
.wl-details,
.wl-submit { animation: fade 240ms var(--ease-out); }

.wl-extra-inner {
  display: grid;
  min-height: 0;
  overflow: hidden;
}
.wl-consent,
.wl-done {
  grid-area: 1 / 1;
  padding: 16px 6px 8px;          /* room for focus rings inside the clipped row */
  margin-inline: -4px;
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
}
.waitlist:is([data-state="open"], [data-state="sending"]):is([data-details], [data-error]) .wl-consent,
.waitlist[data-state="done"] .wl-done {
  opacity: 1;
  transition: opacity 260ms var(--ease-out) 120ms;
}

/* Three-way choice: who is joining. Segmented control with a sliding White thumb; nothing preselected. */
.seg {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.seg-legend {
  padding: 0;
  margin-bottom: 8px;
  color: var(--mist);
  font-size: 0.875rem;
}
.seg-track {
  --gap: 4px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 3), 1fr);
  padding: var(--gap);
  border-radius: 14px;
  background: var(--navy-card);
  box-shadow: inset 0 0 0 1px var(--navy-line);
}
.seg-thumb {
  position: absolute;
  top: var(--gap);
  bottom: var(--gap);
  left: var(--gap);
  width: calc((100% - 2 * var(--gap)) / var(--n, 3));
  border-radius: 10px;
  background: var(--white);
  opacity: 0;
  transition: transform 260ms var(--ease-out), opacity 150ms var(--ease-out);
}
.seg-track:has(input:checked) .seg-thumb { opacity: 1; }
.seg-track:has(label:nth-of-type(2) input:checked) .seg-thumb { transform: translateX(100%); }
.seg-track:has(label:nth-of-type(3) input:checked) .seg-thumb { transform: translateX(200%); }

.seg label {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 0 6px;
  border-radius: 10px;
  color: var(--haze);
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease;
}
.seg label span { transition: transform 160ms var(--ease-out); }
.seg label:active span { transform: scale(0.95); }
.seg label:has(input:checked) { color: var(--navy); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--sky); outline-offset: 1px; }
.seg input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .seg label:hover:not(:has(input:checked)) { color: var(--white); }
}
.seg-optional { color: var(--mist); opacity: 0.8; margin-left: 4px; }

/* The follow-up choice opens under the first one when Consumer is picked */
.seg-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease-out);
}
.seg-more-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
}
.wl-consent:has(input[name="segment"][value="resident"]:checked) .seg-more { grid-template-rows: 1fr; }
.wl-consent:has(input[name="segment"][value="resident"]:checked) .seg-more-inner {
  opacity: 1;
  transition: opacity 240ms var(--ease-out) 80ms;
}

/* Consent checkbox, unticked by default */
.check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--haze);
  font-size: 0.9375rem;
  line-height: 1.45;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.check input {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.check-box {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 0.5px;
  border: 1.5px solid var(--mist);
  border-radius: 6px;
  transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-out);
}
.check-box .icon {
  font-size: 15px;
  color: var(--navy);
  stroke-width: 3;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 150ms var(--ease-out), transform 200ms var(--ease-out);
}
.check:active .check-box { transform: scale(0.92); }
.check input:checked + .check-box {
  background: var(--sky);
  border-color: var(--sky);
}
.check input:checked + .check-box .icon { opacity: 1; transform: none; }
.check input:focus-visible + .check-box { outline: 2px solid var(--sky); outline-offset: 3px; }
.check-text a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 3px;
}

/* Inline error: slides open under the consent line so nothing below jumps */
.wl-error-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms var(--ease-out);
}
.waitlist[data-error] .wl-error-wrap { grid-template-rows: 1fr; }
.wl-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: var(--white);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.wl-error .icon {
  margin-top: 12px;
  color: var(--sky);
  font-size: 1.05em;
}
.wl-error-text { padding-top: 10px; }

/* Bot check (Cloudflare Turnstile), above the Join button. Invisible, it has no height, so its margin
   folds into the button's and nothing moves. When Cloudflare wants a click, it shows as a 65px bar. */
.wl-turnstile {
  margin-top: 16px;
  line-height: 0;                 /* the widget's frame is inline: no gap under it */
  /* Cloudflare's dark widget has a 1px white outline, but its frame cuts off the bottom line (a Turnstile bug; the
     outline has no setting). This draws that line just under the frame, in the outline's color, rounded like the
     widget's corners. Invisible, the slot has no height, so nothing shows. If Cloudflare fixes the bug, the bottom
     line turns double: remove these two lines then. */
  border-radius: 2px;
  box-shadow: 0 1px 0 #F2F2F2;
}

/* Honeypot: off-screen, so people never see it. Bots fill it in. */
.wl-honeypot {
  position: absolute;
  left: -10000px;
}

.wl-done-text {
  margin: 0;
  color: var(--haze);
  font-size: 0.9375rem;
  line-height: 1.45;
  outline: none;
}
.wl-change {
  margin: 6px 0 0 -2px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--white);
  font: 400 0.9375rem/1.4 var(--font-body);
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Circle and dot (brand element 07): bleeds off the edge on the hero ---------- */

.orbit {
  --d: min(135vw, 620px);
  --dot: calc(var(--d) * 0.06);
  --angle: -52deg;               /* 12 o'clock is 0, clockwise */
  position: absolute;
  left: 88%;
  top: 92%;
  z-index: 0;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border: 1.5px solid var(--ring);
  border-radius: 50%;
  pointer-events: none;
}
.orbit-arm {
  position: absolute;
  inset: -0.75px;                 /* centre the dot on the stroke, not inside it */
  transform: rotate(var(--angle));
}
.orbit-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--dot);
  height: var(--dot);
  margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
  border-radius: 50%;
  background: var(--sky);
}

/* ---------- Team page (Navy, like every page) ---------- */

.team {
  padding-top: calc(env(safe-area-inset-top) + 72px); /* clear the fixed top bar */
  background: var(--navy);
  color: var(--haze);
}
.team-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px var(--gutter) 96px;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--sky);
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.story-body { max-width: 40rem; }
/* The Dream 2026 photo, with a caption naming the four of us. On phones and tablets it sits whole above the story
   (4:5); from 900px it's the right half of the row, cropped to 4:3 around our faces and the ticket. Grey while it loads. */
.story-photo { margin: 0 0 32px; }
.story-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  background: #4A5068;           /* neutral grey, toned for navy */
  object-fit: cover;
  object-position: 50% 27%;      /* when cropped: the heads and the whole ticket stay in */
}
.story-caption {
  margin: 10px 0 0;
  color: var(--mist);
  font-size: 0.875rem;
  line-height: 1.45;
}
.story-text {
  margin: 0;
  color: var(--frost);
  font-size: 1.1875rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.team-title {
  max-width: 16ch;
  margin: 80px 0 40px;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.team-grid {
  display: grid;
  gap: 48px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Team photos as the team cropped them: 2:3, eyes level. The grey shows while a photo loads. */
.person-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  background: #4A5068;           /* neutral grey, toned for navy */
  object-fit: cover;
}
.person-name {
  margin: 20px 0 0;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
}
.person-role {
  margin: 4px 0 0;
  color: var(--sky);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
}
/* Email and LinkedIn, between the title and the introduction. The email is a link like the site's others;
   LinkedIn is its "in" logo alone, in white (LinkedIn's guidelines allow only their blue, black or white,
   and their blue is hard to see on navy). The padding makes the logo a 32px tap target without moving it. */
.person-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin: 10px 0 0;
  font-size: 1rem;
}
.person-email {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 3px;
}
.person-linkedin {
  display: inline-flex;
  padding: 6px;
  margin: -6px;
  border-radius: 4px;
  color: var(--white);
  transition: transform 160ms var(--ease-out);
}
.person-linkedin svg { width: 20px; height: 20px; fill: currentColor; }
.person-linkedin:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .person-email:hover { text-decoration-color: var(--white); }
}

.person-intro {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 56px 32px; }
  .story-photo { width: calc((100% - 32px) / 2); }   /* one team column wide, above the story */
}
/* From 900px: the story row is two halves (the text, and the Dream photo on the right), and the three of us sit
   side by side */
@media (min-width: 900px) {
  .story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
  .story-photo { grid-column: 2; grid-row: 1; width: auto; margin: 0; }
  .story-image { aspect-ratio: 4 / 3; }
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
}
/* ---------- Product page (Navy; features left, phone right on desktop) ---------- */

.product {
  padding-top: calc(env(safe-area-inset-top) + 72px); /* clear the fixed top bar */
  background: var(--navy);
  color: var(--haze);
  overflow: clip;
}
.product-inner {
  display: grid;
  gap: 56px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px var(--gutter) 0;
}
.product-title {
  max-width: 14ch;
  margin: 0;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.product-lead {
  max-width: 36rem;
  margin: 20px 0 0;
  color: var(--frost);
  font-size: 1.1875rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Feature list with icon chips: Navy Card chip, Sky icon (the navy version of brand element 06) */
.features {
  display: grid;
  gap: 32px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.feature {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.feature-chip {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy-card);
  box-shadow: inset 0 0 0 1px var(--navy-line);
  color: var(--sky);
  font-size: 24px;
}
.feature-title {
  margin: 4px 0 0;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
}
.feature-text {
  margin: 6px 0 0;
  font-size: 1rem;
  line-height: 1.55;
}

/* The phone rises from the bottom edge of the section, like the deck's product slide */
.product-stage {
  --phone-w: min(80vw, 340px);
  --phone-h: calc(var(--phone-w) * 1.7256); /* 1484 / 860, the deck mockup's proportions */
  position: relative;
  height: calc(var(--phone-h) * 0.72);
  overflow: hidden;
}
/* Where the phone is cut off, let it sink into the navy instead of a hard edge */
.product-stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 96px;
  background: linear-gradient(to bottom, rgb(12 27 96 / 0), var(--navy) 85%);
  pointer-events: none;
}

.phone {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--phone-w);
  height: var(--phone-h);
  margin-left: calc(var(--phone-w) / -2);
  padding: 0.72em;
  border-radius: 4.7em;
  background: var(--navy-card);
  box-shadow: inset 0 0 0 1px var(--navy-line);
  font-size: calc(var(--phone-w) / 30); /* 1em = 1/30 of the phone: everything inside scales together */
}

.phone-screen {
  position: relative;
  height: 100%;
  padding: 1.2em 1.45em 0;
  overflow: hidden;
  border-radius: 4em;
  background: #F4F7FD;
  color: var(--navy);
  font-family: var(--font-body);
  line-height: 1.35;
}
:where(.phone-screen p) { margin: 0; }

.ph-status { display: flex; justify-content: space-between; align-items: center; padding: 0.35em 0.9em 0; font-size: 1.05em; font-weight: 700; }
.ph-status-right { display: flex; align-items: center; gap: 0.3em; }
.ph-status-right i { width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--navy); }
.ph-status-right b { width: 1.9em; height: 0.9em; margin-left: 0.2em; border: 0.12em solid var(--navy); border-radius: 0.3em; }
.ph-head { display: flex; justify-content: space-between; align-items: center; margin-top: 1.55em; }
.ph-head img { width: 4.4em; height: auto; }
.ph-avatar { width: 2.2em; height: 2.2em; border-radius: 50%; background: #DDE5F7; }
.ph-eyebrow { margin: 1.2em 0 0.75em; color: var(--mist); font-family: var(--font-head); font-size: 0.72em; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.ph-card { padding: 1.25em 1.2em 1.2em; border-radius: 1.6em; background: var(--white); box-shadow: 0 0.3em 1.4em rgb(12 27 96 / 0.1); }
.ph-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em 0.6em; }
.ph-chip { padding: 0.4em 0.85em; border-radius: 99em; background: var(--chip); font-size: 0.66em; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.ph-verified { display: inline-flex; align-items: center; gap: 0.3em; color: var(--blue); font-size: 0.8em; font-weight: 700; }
.ph-verified .icon { stroke-width: 2.6; }
.ph-title { margin: 0.55em 0 0.75em; font-family: var(--font-head); font-size: 1.5em; font-weight: 700; line-height: 1.12; }
.ph-summary { padding: 1em 1.1em 1.05em; border-radius: 1.2em; background: var(--pale); }
.ph-label { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.45em; color: var(--muted); font-family: var(--font-head); font-size: 0.68em; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; }
.ph-label--accent { color: var(--blue); }
.ph-label .icon { font-size: 1.2em; stroke-width: 2.2; }
.ph-text { margin-bottom: 0.95em; font-size: 1em; }
.ph-todo { margin: 0; padding: 0; list-style: none; }
.ph-todo li { display: flex; align-items: center; gap: 0.6em; margin-top: 0.35em; font-size: 0.95em; }
.ph-todo .icon { color: var(--blue); stroke-width: 2.6; }
.ph-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55em; margin-top: 1em; }
.ph-btn { display: flex; align-items: center; justify-content: center; gap: 0.35em; height: 2.9em; border: 1px solid var(--line); border-radius: 0.95em; background: var(--white); font-size: 0.92em; font-weight: 700; }
.ph-btn--primary { border-color: var(--navy); background: var(--navy); color: var(--white); }
.ph-btn .icon { stroke-width: 2.6; }
.ph-row { display: flex; align-items: center; gap: 0.9em; margin-top: 0.75em; padding: 0.95em 1em; border-radius: 1.3em; background: var(--white); box-shadow: 0 0.2em 1em rgb(12 27 96 / 0.06); }
.ph-row-icon { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 0.75em; }
.ph-row-icon .icon { font-size: 1.3em; }
.ph-row-icon--deadline { background: #FDEEE6; color: var(--deadline); }
.ph-row-icon--done { background: #E5F1EA; color: var(--done); }
.ph-row-text { flex: 1; min-width: 0; }
.ph-row-text b { display: block; font-family: var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-row-text small { display: block; color: var(--muted); font-size: 0.82em; }
.ph-badge { padding: 0.45em 0.8em; border-radius: 99em; font-size: 0.68em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.ph-badge--deadline { background: #FDEEE6; color: var(--deadline); }
.ph-badge--done { background: #E5F1EA; color: var(--done); }
.ph-tabbar { position: absolute; inset: auto 0 0; display: flex; justify-content: space-around; align-items: center; height: 4.6em; padding-bottom: 0.6em; border-top: 1px solid var(--line); background: var(--white); color: #B7C2E2; font-size: 1.75em; }
.ph-tabbar .icon { stroke-width: 1.8; }
.ph-tabbar .is-active { color: var(--navy); }

@media (min-width: 900px) {
  .product-inner {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 64px;
  }
  .product-copy { align-self: center; padding-bottom: 96px; }
  .product-stage {
    --phone-w: clamp(320px, 27vw, 380px);
    height: calc(var(--phone-h) * 0.86);
  }
}

/* ---------- Contact page ---------- */

.contact {
  padding-top: calc(env(safe-area-inset-top) + 72px); /* clear the fixed top bar */
  min-height: calc(100svh - 80px);
}
.contact-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px var(--gutter) 96px;
}
.contact-title {
  margin: 0;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.contact-lead {
  max-width: 32rem;
  margin: 16px 0 0;
  color: var(--frost);
  font-size: 1.1875rem;
  line-height: 1.55;
}

/* Cal.com booking: a Navy Card with one button; the calendar loads into it on demand */
.booking {
  position: relative;
  max-width: 820px;
  min-height: 360px;
  margin-top: 40px;
  border-radius: 16px;
  background: var(--navy-card);
  box-shadow: inset 0 0 0 1px var(--navy-line);
  overflow: hidden;
}
.booking-start {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  min-height: 360px;
  padding: 32px 24px;
  text-align: center;
}
.booking-start .icon { font-size: 32px; color: var(--sky); }
.booking-btn {
  height: 56px;                  /* the site's one pill size, like the waitlist buttons */
  padding: 0 28px;
  border: 0;
  border-radius: 28px;
  background: var(--white);
  color: var(--navy);
  font: 700 1.0625rem/1 var(--font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
.booking-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .booking-btn:hover { background: var(--pale); }
}
.booking-btn[hidden] { display: none; }
.booking-status,
.booking-intro {
  margin: 0;
  color: var(--haze);
  font-size: 1rem;
}
.booking-intro {
  max-width: 36ch;
  line-height: 1.45;
  text-wrap: balance;
}
/* Focus moves here from the script (the status while loading, then the calendar); no ring round text or a whole calendar */
.booking-status:focus,
.booking-embed:focus { outline: none; }
.booking-note {
  max-width: 30ch;
  margin: 0;
  color: var(--mist);
  font-size: 0.875rem;
  line-height: 1.45;
}
.booking-note a {
  color: var(--haze);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.booking.is-loaded .booking-start { display: none; }
/* Cal.com pads its content by 16px inside the frame; pull it out so its cards line up with the headline */
.booking.is-loaded .booking-embed { margin-inline: -16px; }
/* Once loaded, Cal.com draws its own cards; drop our box so they don't sit in a card inside a card */
.booking.is-loaded { margin-top: 12px; background: none; box-shadow: none; border-radius: 0; overflow: visible; } /* Cal.com adds its own top space */
.booking-embed { min-height: 360px; }
/* While it loads, the calendar sits out of sight so the button box keeps its place */
.booking:not(.is-loaded) .booking-embed { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.booking-embed iframe { display: block; }
/* The way back to the list of meetings once one is picked (Cal.com has none of its own) */
.booking-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sky);
  font: 700 1rem/1.2 var(--font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.booking-back[hidden] { display: none; }
.booking-back .icon { font-size: 18px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .booking-back:hover .icon { transform: translateX(-3px); }
}
.booking-back:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 4px; }

.contact-email {
  margin: 24px 0 0;
  color: var(--haze);
  font-size: 1.0625rem;
}
.contact-note {
  margin: 6px 0 0;
  color: var(--mist);
  font-size: 0.9375rem;
}
.contact-email a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 3px;
}

/* ---------- Privacy notice: long-form text in a comfortable column ---------- */

.legal {
  padding-top: calc(env(safe-area-inset-top) + 72px); /* clear the fixed top bar */
}
.legal-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px var(--gutter) 96px;
}
.legal-inner > * { max-width: 38rem; }            /* about 70 characters a line */
.legal-inner > .services { max-width: 48rem; }    /* the table gets a little more room */

.legal-title {
  margin: 0;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.legal .legal-meta {                 /* .legal .x beats .legal p below */
  margin: 12px 0 0;
  color: var(--mist);
  font-size: 0.9375rem;
}
.legal .legal-lead {
  margin: 32px 0 0;
  color: var(--frost);
  font-size: 1.1875rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.legal h2 {
  margin: 64px 0 0;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  line-height: 1.15;
  text-wrap: balance;
}
/* 28px and up (from an 800px-wide window): the headline tracking of -1.5 % */
@media (min-width: 800px) {
  .legal h2 { letter-spacing: -0.015em; }
}
.legal h3 {
  margin: 40px 0 0;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
}
.legal h2 + h3 { margin-top: 24px; }
.legal p,
.legal ul {
  margin: 16px 0 0;
  color: var(--haze);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.legal h2 + p,
.legal h3 + p { margin-top: 12px; }
.legal strong { color: var(--white); font-weight: 700; }
.legal ul { padding-left: 1.25em; }
.legal li + li { margin-top: 8px; }
.legal li::marker { color: var(--sky); }
.legal a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
  .legal a:hover { text-decoration-color: var(--white); }
}

/* Who else handles your data: a table on wide screens, one small card per service on phones */
.services {
  width: 100%;
  margin-top: 24px;
  border-collapse: collapse;
  color: var(--haze);
  font-size: 1rem;
  line-height: 1.5;
}
.services th,
.services td {
  padding: 14px 20px 14px 0;
  border-bottom: 1px solid var(--navy-line);
  text-align: left;
  vertical-align: top;
}
.services thead th {
  padding-top: 0;
  color: var(--mist);
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.services tbody th { width: 22%; color: var(--white); font-family: var(--font-head); font-weight: 700; }
@media (max-width: 640px) {
  .services,
  .services tbody,
  .services tr,
  .services th,
  .services td { display: block; width: auto; }
  .services thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .services tr {
    margin-top: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--navy-card);
    box-shadow: inset 0 0 0 1px var(--navy-line);
  }
  .services th,
  .services td { padding: 0; border: 0; }
  .services tbody th { width: auto; font-size: 1.0625rem; }
  .services td { margin-top: 10px; }
  .services td::before {
    content: attr(data-label);
    content: attr(data-label) / "";   /* shown, but not read twice by screen readers */
    display: block;
    margin-bottom: 2px;
    color: var(--mist);
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* ---------- 404 page: what happened and the one next step, explained like a letter in the app ---------- */

.notfound {
  padding-top: calc(env(safe-area-inset-top) + 72px); /* clear the fixed top bar */
  min-height: calc(100svh - 80px);
}
.notfound-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px var(--gutter) 96px;
}
.notfound-title {
  margin: 0;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* A Navy Card with the two labels of the summary card on the Product page's phone: the accent one with the sparkle
   (Sky, as accents are on navy), then the quiet one (Mist, like the form's labels) */
.notfound-card {
  max-width: 36rem;
  margin-top: 40px;
  padding: 28px 24px 24px;
  border-radius: 16px;
  background: var(--navy-card);
  box-shadow: inset 0 0 0 1px var(--navy-line);
}
.notfound-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--mist);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.notfound-label--accent { color: var(--sky); }
.notfound-label .icon { font-size: 1.25em; }
.notfound-text {
  margin: 0;
  color: var(--haze);
  font-size: 1.0625rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.notfound-text + .notfound-label { margin-top: 24px; }

/* The one next step: the waitlist button's White pill, full width on phones */
.notfound-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  margin-top: 28px;
  padding: 0 28px;
  border-radius: 28px;
  background: var(--white);
  color: var(--navy);
  font: 700 1.0625rem/1 var(--font-body);
  letter-spacing: 0.005em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
.notfound-btn .icon {
  font-size: 1.15em;
  stroke-width: 2.25;
  transition: transform 200ms var(--ease-out);
}
.notfound-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .notfound-btn:hover { background: var(--pale); }
  .notfound-btn:hover .icon { transform: translateX(3px); }
}

.notfound-help {
  margin: 24px 0 0;
  color: var(--haze);
  font-size: 1.0625rem;
}
.notfound-help a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 3px;
}

@media (min-width: 640px) {
  .notfound-card { padding: 32px; }
  .notfound-btn { display: inline-flex; }
}

/* ---------- Footer ---------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  color: var(--mist);
  font-size: 0.875rem;
}
.footer > span { padding: 8px 0; }
.footer nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.footer a {
  padding: 8px 0;
  color: var(--mist);
  text-decoration: none;
  transition: color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .footer a:hover { color: var(--white); }
}
/* Our LinkedIn and Instagram: the logos alone, in white like on the Team page (both brands allow white on dark,
   never another colour). The side padding widens the tap target without moving the logos. */
.footer a.footer-social {
  display: inline-flex;
  align-items: center;
  padding: 8px 4px;
  margin: 0 -4px;
  color: var(--white);
  transition: transform 160ms var(--ease-out);
}
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-social:active { transform: scale(0.92); }

/* ---------- Desktop ---------- */

@media (min-width: 900px) {
  /* Step 2 stays in the flow, as on phones. Nothing sits under the form, so on most screens it opens into free
     space and nothing moves; on a short laptop screen (more so with Cloudflare's check showing) the page grows
     and scrolls instead. Taken out of the flow, it ran past the bottom of the hero, which cuts off everything
     below the first screen, so the footer showed where the Join button should be. */
  .waitlist { --closed-w: 15rem; margin-top: 44px; }

  /* Anchored to the bottom-right corner of the first screen and sized from it, so the same share of the circle
     is always cut off (a quarter on the right, an eighth at the bottom), from small laptops to very big screens,
     and it stays put when the open form makes the page taller. Capping it at 60% of the width keeps the ring
     and the dot clear of the form, even at 900px. The dot keeps the phone angle (-52deg, about 10 o'clock), so
     as it arrives it rises past the middle of the ring. */
  .orbit {
    --d: min(100svh, 60vw);
    top: calc(100svh - var(--d) * 0.875);
    left: auto;
    right: calc(var(--d) * -0.25);
    margin: 0;
  }
  .menu-links a { padding: 8px 0; }
}

/* ---------- First load: the sentence, the button, then the dot arrives ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes fade {
  from { opacity: 0; }
}
@keyframes dot-arrive {
  from { rotate: -70deg; }
}
@keyframes spin {
  to { rotate: 360deg; }
}

.reveal {
  animation: rise 700ms var(--ease-out) both;
  animation-delay: calc(60ms + var(--i) * 90ms);
}
.orbit {
  animation: fade 1200ms var(--ease-out) 250ms both;
}
.orbit-arm {
  /* backwards, not both: once it has arrived, the rotate below is free to transition */
  animation: dot-arrive 1800ms var(--ease-out) 250ms backwards;
}

/* On phones step 2 of the form reaches the ring, so the dot slides down the ring out of the way when it opens,
   and back when the form folds up. The email field alone stays clear of it. */
@media (max-width: 899px) {
  .orbit-arm {
    rotate: 0deg;
    transition: rotate 700ms var(--ease-out);
  }
  .hero:has(.waitlist[data-details]:not([data-state="closed"])) .orbit-arm { rotate: -80deg; }
}

/* ---------- Accessibility preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  /* Keep the fades, drop the travel */
  .reveal { animation-name: fade; animation-duration: 400ms; }
  .orbit-arm { animation: none; transition: none; }
  .orbit-dot { transition: opacity 200ms ease; }
  .hero:has(.waitlist[data-details]:not([data-state="closed"])) .orbit-arm { rotate: 0deg; }
  .hero:has(.waitlist[data-details]:not([data-state="closed"])) .orbit-dot { opacity: 0; }
  .wl-spinner { animation-duration: 1600ms; }
  .wl-trigger .icon,
  .notfound-btn .icon,
  .booking-back .icon,
  .check-box,
  .person-linkedin,
  .footer-social,
  .menu-lines i,
  .seg-thumb { transition: none; }
  .menu-links li,
  .menu.is-open .menu-links li,
  .menu-join,
  .menu.is-open .menu-join { transform: none; }
}

@media (prefers-contrast: more) {
  .footer,
  .footer a { color: var(--haze); }
  .check-box { border-color: var(--white); }
}