/*
  Two themes, one set of rules.

  Every colour below resolves through a token. :root carries the dark night-sky
  palette ported from the app (frontend-expo-offline/src/constants/night-theme.ts)
  because dark is the default look for amuzz.in; [data-theme="light"] restates the
  same tokens with the original daylight palette. No rule outside those two blocks
  may hard-code a colour, or one theme silently breaks when the other is edited.
*/
:root {
  color-scheme: dark;

  /* Night sky, straight from the app's C/G palette. */
  --ink: #f5f3ff;
  --muted: #a9a7c7;
  --page: #000000;
  --line: rgba(255, 255, 255, 0.14);

  /*
    Cards sit over the starfield, so they are translucent rather than solid —
    but translucent BLACK. The old rgba(14,14,28,…) was a violet-grey, and next
    to the true black of the page it read as a lilac slab rather than a card.
  */
  --surface: rgba(0, 0, 0, 0.72);
  --border: rgba(255, 255, 255, 0.18);
  --blur: blur(14px);
  --on-accent: #0b0716;

  --violet: #b794f4;
  --blue: #7dd3fc;
  --teal: #5eead4;
  --rose: #ff8fb1;
  --amber: #ffb86b;
  --green: #5eead4;
  --sky: #7dd3fc;
  --sun: #ffe066;
  --rainbow: linear-gradient(120deg, #b794f4 0%, #7dd3fc 24%, #5eead4 44%, #ffe066 64%, #ffb86b 82%, #ff8fb1 100%);

  --shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
  --card-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  --eyebrow: #5eead4;

  --header-bg: rgba(0, 0, 0, 0.8);
  --header-border: rgba(255, 255, 255, 0.14);
  --header-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);

  --secondary-bg: rgba(255, 255, 255, 0.06);
  --secondary-border: rgba(255, 255, 255, 0.18);

  --badge-bg: rgba(255, 255, 255, 0.06);
  --badge-border: rgba(255, 255, 255, 0.16);
  --badge-ink: var(--ink);
  --badge-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  /* Alexa cyan reads well on the night sky. */
  --alexa: #00caff;

  --soon-bg: rgba(255, 255, 255, 0.03);
  --soon-ink: #74728f;
  --soon-border: rgba(255, 255, 255, 0.08);
  --soon-icon: #5a5876;

  /*
    Dark takes NO section wash. Each of these was a set of coloured radial
    glows laid over the black; stacked down the page they added up to the
    grey-violet haze the whole site sat under. The ground is the black page and
    the starfield, and the colour lives in the rules and outlines on top of it.
    `none` is a real background value, so the page below just shows through.
  */
  --hero-wash: none;
  --hero-dots: none;
  --hero-dots-opacity: 0;
  --alexa-wash: none;
  --split-wash: none;
  --privacy-wash: none;
  --cta-wash: none;

  /*
    How much of its accent a feature card mixes into its own surface. Zero in
    dark, where the accent is carried by the 6px top rule alone; daylight still
    gets the tint, which is what tells the six cards apart on a white page.
  */
  --card-tint: 0%;

  /*
    The floating "Offline first" callout over the phone. In dark it is the same
    black as everything else and wears its colour as an outline; daylight keeps
    the indigo-to-pink card, which is what gives the light hero its one deep
    element.
  */
  --story-card-bg: rgba(0, 0, 0, 0.82);
  --story-card-line: #f472b6;

  --split-ink: #f5f3ff;
  --split-eyebrow: #5eead4;
  --split-copy: #cfcbe8;

  --starfield: block;
}

:root[data-theme="light"] {
  color-scheme: light;

  --ink: #111827;
  --muted: #566175;
  --page: #fbfcff;
  --line: #e7e9f5;

  --surface: #ffffff;
  --border: #e7e9f5;
  --blur: none;
  --on-accent: #ffffff;

  --violet: #7c3aed;
  --blue: #2563eb;
  --teal: #14b8a6;
  --rose: #f43f8f;
  --amber: #f59e0b;
  --green: #22c55e;
  --sky: #06b6d4;
  --sun: #facc15;
  --rainbow: linear-gradient(120deg, #7c3aed 0%, #2563eb 18%, #06b6d4 36%, #22c55e 54%, #facc15 70%, #f97316 84%, #f43f8f 100%);

  --shadow: 0 24px 70px rgba(37, 99, 235, 0.14);
  --card-shadow: 0 12px 34px rgba(33, 28, 66, 0.07);
  --eyebrow: #0f8b8d;

  --header-bg: rgba(251, 252, 255, 0.88);
  --header-border: rgba(231, 233, 245, 0.92);
  --header-shadow: 0 10px 28px rgba(23, 32, 51, 0.08);

  --secondary-bg: #ffffff;
  --secondary-border: #d7ddf0;

  --badge-bg: #ffffff;
  --badge-border: #cfd5df;
  --badge-ink: #172033;
  --badge-shadow: 0 5px 14px rgba(23, 32, 51, 0.07);
  /* Brand cyan is too pale on white — step it down for contrast. */
  --alexa: #0369a1;

  --soon-bg: #f1f3f6;
  --soon-ink: #7b8494;
  --soon-border: #dfe3e8;
  --soon-icon: #9aa1ad;

  --hero-wash:
    radial-gradient(circle at 12% 18%, rgba(250, 204, 21, 0.22), transparent 18%),
    radial-gradient(circle at 75% 16%, rgba(124, 58, 237, 0.12), transparent 22%),
    radial-gradient(circle at 84% 78%, rgba(244, 63, 143, 0.14), transparent 24%),
    linear-gradient(135deg, #fffdf7 0%, #eefcff 32%, #f7f3ff 64%, #fff3f8 100%);
  --hero-dots:
    radial-gradient(circle, rgba(124, 58, 237, 0.14) 0 4px, transparent 5px),
    radial-gradient(circle, rgba(34, 197, 94, 0.12) 0 5px, transparent 6px),
    radial-gradient(circle, rgba(244, 63, 143, 0.12) 0 3px, transparent 4px);
  --hero-dots-opacity: 0.75;
  --alexa-wash: linear-gradient(135deg, #f1fbff, #ffffff 52%, #eef9ff);
  --split-wash:
    radial-gradient(circle at 12% 24%, rgba(250, 204, 21, 0.18), transparent 24%),
    radial-gradient(circle at 86% 20%, rgba(6, 182, 212, 0.2), transparent 24%),
    radial-gradient(circle at 70% 88%, rgba(244, 63, 143, 0.2), transparent 26%),
    linear-gradient(135deg, #101827, #1e3a8a 42%, #581c87);
  --privacy-wash: linear-gradient(135deg, #effcff, #f8fafc 42%, #fef9c3);
  --cta-wash:
    radial-gradient(circle at 16% 42%, rgba(250, 204, 21, 0.22), transparent 20%),
    radial-gradient(circle at 82% 18%, rgba(124, 58, 237, 0.14), transparent 22%),
    linear-gradient(135deg, #e0f7ff, #f5f3ff 52%, #fff1f8);

  --split-ink: #ffffff;
  --split-eyebrow: #9be2da;
  --split-copy: #d6dde8;

  --card-tint: 13%;

  --story-card-bg: linear-gradient(135deg, #111827, #4338ca 52%, #be185d);
  --story-card-line: transparent;

  --starfield: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--page);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

a {
  color: inherit;
}

/*
  The starfield canvas is fixed behind the page and lit only in dark. The page's
  own content is lifted into the positioned layer above it, which is why every
  dark section wash above is translucent — an opaque one would hide the stars.
*/
#starfield {
  display: var(--starfield);
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

main,
footer {
  position: relative;
  z-index: 1;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(20px, 5vw, 72px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  backdrop-filter: blur(18px);
}

.site-header.scrolled {
  box-shadow: var(--header-shadow);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  text-decoration: none;
  font-size: 20px;
}

.brand img {
  border-radius: 12px;
}

nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  font-weight: 750;
}

nav a {
  color: var(--muted);
  text-decoration: none;
}

.nav-cta {
  color: var(--on-accent);
  background: var(--blue);
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.22);
}

/* One button, two icons; the one naming the current theme is hidden. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--ink);
  background: var(--secondary-bg);
  border: 1px solid var(--secondary-border);
  border-radius: 999px;
  cursor: pointer;
  flex: 0 0 auto;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

.hero {
  position: relative;
  min-height: calc(100vh - 75px);
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr);
  align-items: center;
  gap: clamp(28px, 6vw, 76px);
  padding: clamp(40px, 7vw, 96px) clamp(20px, 5vw, 72px) 44px;
  background: var(--hero-wash);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--hero-dots);
  background-size: 96px 96px, 138px 138px, 118px 118px;
  background-position: 16px 22px, 62px 58px, 98px 12px;
  opacity: var(--hero-dots-opacity);
}

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

.hero-copy {
  max-width: 690px;
  min-width: 0;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--eyebrow);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 20px;
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.02;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 14px;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.02;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.2;
}

.lede {
  color: var(--muted);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  max-width: 620px;
}

.hero-actions,
.cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.primary,
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  font-weight: 850;
  text-decoration: none;
}

.primary {
  color: var(--on-accent);
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
}

.secondary {
  color: var(--ink);
  background: var(--secondary-bg);
  border: 1px solid var(--secondary-border);
}

/*
  Two across, not four. The store wording is the official phrasing — "Download
  on the App Store", "Get it on Google Play" — and at four columns none of it
  survived on one line. A wrapped label is what made these read as badges
  rather than buttons, so the grid gives way instead of the copy.
*/
.store-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  width: 100%;
  max-width: none;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 16px;
  min-width: 0;
  color: var(--badge-ink);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  border-radius: 10px;
  text-decoration: none;
  box-shadow: var(--badge-shadow);
  backdrop-filter: var(--blur);
}

.store-badge svg {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  fill: currentColor;
}

/*
  The Google Play mark keeps its four brand colours in both themes — the paths
  carry their own `fill`, which beats the `currentColor` inherited above. It is
  drawn inline rather than hotlinked so it costs no request and cannot rot.
*/
.play-mark {
  width: 26px;
  height: 26px;
}

.store-badge span {
  font-weight: 900;
  min-width: 0;
  line-height: 1.2;
  font-size: 14px;
}

.coming-soon {
  cursor: default;
  color: var(--soon-ink);
  background: var(--soon-bg);
  border-color: var(--soon-border);
  box-shadow: none;
  opacity: 0.82;
}

.coming-soon svg {
  fill: var(--soon-icon);
}

.web-launch svg {
  fill: var(--blue);
}

.alexa-section {
  background: var(--alexa-wash);
}

.alexa-samples {
  margin-top: 24px;
  padding: clamp(24px, 4vw, 36px);
  background: var(--surface);
  border: 2px solid var(--border);
  border-top: 6px solid var(--alexa);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  backdrop-filter: var(--blur);
}

.alexa-samples h3,
.alexa-samples p {
  margin-top: 0;
}

.alexa-samples > p {
  color: var(--muted);
  line-height: 1.55;
}

.alexa-samples ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.alexa-samples li {
  padding: 14px 16px;
  color: var(--ink);
  background: var(--secondary-bg);
  border: 1px solid var(--secondary-border);
  border-radius: 8px;
  font-weight: 750;
  line-height: 1.45;
}

.alexa-samples .alexa-samples-note {
  margin-bottom: 0;
  font-size: 14px;
}

.alexa-badge {
  color: var(--badge-ink);
  background: var(--badge-bg);
  border-color: var(--badge-border);
  box-shadow: var(--badge-shadow);
}

/*
  The Alexa ring, drawn rather than fetched.

  This was a PNG hotlinked from toppng.com with a baked-in WHITE background,
  which sat as a bright square on the night sky. It was also an external request
  on the critical path for a logo, pointing at a host we do not control.

  An inline stroked circle with a gap is the mark, costs no request, and takes
  its colour from --alexa, so it is legible in both themes instead of being
  correct in one. `fill: none` has to be stated here because `.store-badge svg`
  sets `fill: currentColor`, which would otherwise fill the ring solid.
*/
.alexa-badge .alexa-mark {
  /*
    Same 28px box as every other badge icon. At 34 it made the second row of the
    store grid six pixels taller than the first, which is visible as soon as the
    buttons sit two-up.
  */
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  fill: none;
  color: var(--alexa);
}

.alexa-badge .alexa-mark circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.alexa-section-button .alexa-mark {
  width: 38px;
  height: 38px;
}

.alexa-section-button {
  width: fit-content;
  min-width: 240px;
  padding: 12px 22px;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 34px 0 0;
}

.trust-strip div {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  backdrop-filter: var(--blur);
}

.trust-strip div:nth-child(1) {
  border-top: 5px solid var(--violet);
}

.trust-strip div:nth-child(2) {
  border-top: 5px solid var(--sky);
}

.trust-strip div:nth-child(3) {
  border-top: 5px solid var(--green);
}

dt {
  font-weight: 900;
}

dd {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.hero-art {
  position: relative;
  width: 100%;
  min-width: 0;
  order: -1;
}

/*
  A bezel around a real capture of the app, replacing the CSS-drawn mockup that
  used to live here. The mockup invented its own status bar, story and shelf, so
  it drifted out of date every time the app changed and never showed the actual
  artwork — which is most of what makes the product worth looking at.
*/
.phone {
  width: min(300px, 74vw);
  margin: 0 auto;
  padding: 7px;
  border: 3px solid #262e40;
  border-radius: 42px;
  background: #151a26;
  box-shadow: var(--shadow);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 34px;
}

.story-card {
  position: absolute;
  right: 0;
  bottom: 56px;
  width: min(260px, 62vw);
  padding: 20px;
  background: var(--story-card-bg);
  border: 1px solid var(--story-card-line);
  color: #ffffff;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.story-card span {
  display: block;
  color: #fde047;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 900;
}

.story-card p {
  margin: 10px 0 0;
  color: #c8d1dc;
  font-size: 14px;
  line-height: 1.45;
}

.section,
.split,
.cta {
  padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 72px);
}

.section-head {
  max-width: 840px;
  margin-bottom: 34px;
}

.section-head p,
.copy-stack p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

/*
  An eyebrow is a <p>, so ".section-head p" outranked ".eyebrow" and every
  section label rendered in body grey while the hero's stayed accented. Matching
  the container back keeps the accent without touching the paragraph rule.
*/
.section-head .eyebrow {
  color: var(--eyebrow);
}

.feature-grid,
.privacy-grid,
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.feature-grid article,
.privacy-panel,
.compliance-grid article {
  padding: 24px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  backdrop-filter: var(--blur);
}

/*
  Each card takes a tinted top rule and a matching wash. Mixing the accent into
  the surface keeps the six-colour rhythm from one rule set — at `--card-tint`,
  which daylight sets to 13% and dark sets to 0%, so a dark card is black with a
  coloured rule and a light one keeps its wash.
*/
.feature-grid article:nth-child(1) {
  border-top: 6px solid var(--violet);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--violet) var(--card-tint), var(--surface)));
}

.feature-grid article:nth-child(2) {
  border-top: 6px solid var(--blue);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--blue) var(--card-tint), var(--surface)));
}

.feature-grid article:nth-child(3) {
  border-top: 6px solid var(--sky);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--sky) var(--card-tint), var(--surface)));
}

.feature-grid article:nth-child(4) {
  border-top: 6px solid var(--green);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--green) var(--card-tint), var(--surface)));
}

.feature-grid article:nth-child(5) {
  border-top: 6px solid var(--sun);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--sun) var(--card-tint), var(--surface)));
}

.feature-grid article:nth-child(6) {
  border-top: 6px solid var(--rose);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--rose) var(--card-tint), var(--surface)));
}

.feature-grid p,
.privacy-panel p,
.compliance-grid p {
  color: var(--muted);
  line-height: 1.55;
}

.icon {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--on-accent);
  background: var(--rainbow);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
}

.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 7vw, 90px);
  color: var(--split-ink);
  background: var(--split-wash);
}

.split .eyebrow {
  color: var(--split-eyebrow);
}

.copy-stack p {
  color: var(--split-copy);
}

.privacy {
  background: var(--privacy-wash);
}

.privacy-grid {
  grid-template-columns: 1.25fr repeat(3, 1fr);
}

.privacy-panel.highlight {
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--blue), var(--teal), var(--green));
  border-color: var(--teal);
}

.privacy-panel.highlight p {
  color: inherit;
  opacity: 0.86;
}

.compliance-grid article {
  border-top: 5px solid var(--amber);
}

.compliance-grid article:nth-child(1) {
  border-top-color: var(--blue);
}

.compliance-grid article:nth-child(2) {
  border-top-color: var(--green);
}

.compliance-grid article:nth-child(3) {
  border-top-color: var(--rose);
}

.compliance-grid a {
  display: inline-flex;
  margin-top: 8px;
  color: var(--violet);
  font-weight: 850;
}

.cta {
  justify-content: space-between;
  background: var(--cta-wash);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cta-actions {
  display: grid;
  gap: 14px;
  justify-items: end;
}

.cta h2 {
  max-width: 760px;
  margin-bottom: 0;
}

/*
  Shared shell for the legal and support pages. These used to carry their own
  inline <style> block naming tokens (--color-white, --text-3xl) that no
  stylesheet ever defined, so the rules were dropped and the pages only looked
  right by inheritance. Defining them here is what makes them theme-aware.
*/
.legal-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 72px 24px 60px;
}

.legal-content h1 {
  font-size: clamp(34px, 5vw, 48px);
}

.legal-content h2 {
  margin-top: 48px;
  font-size: 24px;
}

.legal-content p,
.legal-content li {
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 16px;
}

.legal-content ol,
.legal-content ul {
  margin-left: 24px;
}

.legal-content strong {
  color: var(--ink);
}

.legal-content a {
  color: var(--ink);
  text-decoration: underline;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 26px clamp(20px, 5vw, 72px);
  color: var(--muted);
  font-size: 14px;
}

footer span:first-child {
  color: var(--ink);
  font-weight: 900;
}

footer a {
  color: inherit;
}

@media (max-width: 960px) {
  .hero,
  .split {
    grid-template-columns: 1fr;
  }

  .hero-art {
    order: 0;
  }

  .feature-grid,
  .compliance-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .alexa-samples ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .privacy-grid,
  .trust-strip {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .site-header {
    align-items: flex-start;
    gap: 10px;
    padding-left: 24px;
    padding-right: 24px;
    overflow: hidden;
  }

  .brand {
    font-size: 18px;
  }

  .nav-cta {
    display: none;
  }

  nav {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
  }

  nav a:not(.nav-cta) {
    display: none;
  }

  .hero {
    min-height: auto;
    width: 100%;
    max-width: 100vw;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero > * {
    min-width: 0;
  }

  .hero-art {
    width: 100%;
  }

  .hero-copy,
  .section-head,
  .copy-stack,
  .lede {
    width: calc(100vw - 96px);
    max-width: calc(100vw - 96px);
  }

  h1 {
    max-width: 100%;
    font-size: 30px;
    overflow-wrap: anywhere;
  }

  .lede {
    font-size: 16px;
  }

  .hero-actions {
    width: calc(100vw - 96px);
  }

  .phone {
    width: min(270px, calc(100vw - 96px));
  }

  .story-card {
    right: 0;
    bottom: 0;
    width: min(226px, calc(100vw - 96px));
  }

  .feature-grid,
  .privacy-grid,
  .compliance-grid,
  .trust-strip {
    grid-template-columns: 1fr;
  }

  .alexa-samples ul {
    grid-template-columns: 1fr;
  }

  .hero-actions a,
  .cta a {
    width: 100%;
  }

  .store-row {
    grid-template-columns: 1fr;
    width: calc(100vw - 96px);
    max-width: calc(100vw - 96px);
  }

  /*
    One column of `100vw - 96px` leaves 224px on a 320px phone, and "Download on
    the App Store" wraps at anything under 240. Tightening the button rather
    than the copy keeps all four on one line down to the narrowest screen we
    care about.
  */
  .store-badge {
    gap: 8px;
    padding: 12px 10px;
  }

  .store-badge span {
    font-size: 13px;
  }

  footer {
    flex-direction: column;
  }
}

/* 320px phones get one step smaller still — the alternative is the App Store
   label wrapping, which is the thing this button shape exists to avoid. */
@media (max-width: 360px) {
  .store-badge span {
    font-size: 12px;
  }
}

/* ======================================================== partner enrolment ==
   The tutor and school forms (/tutors, /schools).

   Two shapes only: the pair of header buttons that get people here, and one
   form card. Everything inside the card resolves through the same tokens as the
   rest of the site — a native <input> otherwise renders as a white box that
   ignores the dark theme entirely, and on iOS Safari it also inherits a 13px
   system font that triggers zoom-on-focus.
   ========================================================================== */

/*
  One door, not two. Tutors and schools first shipped as a pair of header
  buttons, which put three CTAs in a row and made a parent — still the site's
  main visitor — read two of them before reaching "Listen now". So the header
  carries a single outlined button that sits AFTER "Listen now" and leads to
  /partner, where the two audiences are told apart at full size instead of in
  a 13px pill.
*/
.nav-partner {
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--secondary-bg);
  border: 1px solid var(--secondary-border);
  text-decoration: none;
  white-space: nowrap;
}

/* ------------------------------------------------------------ /partner ---- */

/*
  The chooser. Two cards, deliberately large: this page has exactly one job,
  which is to ask "are you a tutor or a school" and be unmissable about it.
  Each card is a single <a>, so the whole slab is the hit target rather than
  the link at the bottom of it.
*/
.partner-hub .lede {
  margin-bottom: 8px;
}

.partner-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 40px 0 32px;
}

.partner-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--border);
  border-top: 6px solid var(--partner-accent);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  backdrop-filter: var(--blur);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.partner-card.tutor {
  --partner-accent: var(--teal);
}

.partner-card.school {
  --partner-accent: var(--violet);
}

.partner-card:hover,
.partner-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--partner-accent);
}

/* The lift is decoration; a reader who asked for less motion still gets the
   colour change, which is what actually signals the hover. */
@media (prefers-reduced-motion: reduce) {
  .partner-card {
    transition: none;
  }

  .partner-card:hover,
  .partner-card:focus-visible {
    transform: none;
  }
}

.partner-badge {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--partner-accent);
  border: 1px solid var(--partner-accent);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.partner-card h2 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 34px);
}

.partner-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.55;
}

.partner-card ul {
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.partner-card li {
  list-style: none;
  padding-left: 22px;
  position: relative;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.partner-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--partner-accent);
}

/* Pushed to the bottom so both cards' calls to action line up however
   different the copy above them turns out to be. */
.partner-go {
  margin-top: auto;
  padding-top: 24px;
  color: var(--partner-accent);
  font-weight: 900;
  font-size: 15px;
}

.partner-footnote {
  color: var(--muted);
  font-size: 15px;
}

.partner-footnote a {
  color: var(--ink);
}

.enrol {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 76px) clamp(20px, 5vw, 40px) 72px;
}

.enrol h1 {
  margin-bottom: 12px;
}

.enrol .lede {
  max-width: none;
}

/* The promises, kept beside the form rather than on a separate page: a tutor
   deciding whether to spend two minutes on this needs to see "free" and "we
   send you families" without scrolling back up. */
.enrol-promises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 32px 0 44px;
}

.enrol-promises li {
  list-style: none;
  padding: 18px 20px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  backdrop-filter: var(--blur);
}

.enrol-promises li:nth-child(1) { border-top: 6px solid var(--teal); }
.enrol-promises li:nth-child(2) { border-top: 6px solid var(--sky); }
.enrol-promises li:nth-child(3) { border-top: 6px solid var(--violet); }
.enrol-promises li:nth-child(4) { border-top: 6px solid var(--sun); }
.enrol-promises li:nth-child(5) { border-top: 6px solid var(--rose); }
.enrol-promises li:nth-child(6) { border-top: 6px solid var(--amber); }

.enrol-promises strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}

.enrol-promises span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.enrol-promises ul {
  margin: 0;
  padding: 0;
}

.enrol-form {
  padding: clamp(22px, 4vw, 34px);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  backdrop-filter: var(--blur);
}

.enrol-form h2 {
  margin-top: 0;
  font-size: 24px;
}

.enrol-form > p {
  color: var(--muted);
  font-size: 15px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
}

.field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.field.wide {
  grid-column: 1 / -1;
}

.field label {
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.field label .optional {
  color: var(--muted);
  font-weight: 650;
  text-transform: none;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  color: var(--ink);
  background: var(--field-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--secondary-border);
  border-radius: 8px;
  /* 16px, not smaller: iOS Safari zooms the page on focus for anything under
     16px, which throws a half-filled form off screen. */
  font-size: 16px;
  font-family: inherit;
}

.field textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--sky);
  outline-offset: 1px;
}

.field .hint {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .field textarea {
  --field-bg: #ffffff;
}

/* Radios as pills. The underlying inputs stay in the DOM and keep their names,
   so the form is still a form to a keyboard and to a screen reader; only the
   dot is replaced. */
.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice {
  position: relative;
  display: inline-flex;
}

.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice span {
  padding: 10px 15px;
  border-radius: 999px;
  border: 1px solid var(--secondary-border);
  background: var(--secondary-bg);
  font-size: 14px;
  font-weight: 750;
}

.choice input:checked + span {
  color: var(--on-accent);
  background: var(--sky);
  border-color: var(--sky);
}

.choice input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.consent input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: var(--sky);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.form-actions button {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
}

.form-actions button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.form-note {
  color: var(--muted);
  font-size: 13px;
}

/* One live region for both outcomes, so a screen reader hears the result of a
   submit without the page moving. */
.form-status {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.5;
}

.form-status:empty {
  display: none;
}

.form-status.error {
  color: var(--rose);
}

.form-status.ok {
  padding: 18px 20px;
  color: var(--ink);
  border: 2px solid var(--teal);
  border-radius: 8px;
}

/* The honeypot: present for a bot, gone for everyone else. Left of the viewport
   rather than display:none, because some bots skip hidden inputs. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 860px) {
  .enrol-promises,
  .partner-choice {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  /*
    The header drops its section links on a phone and used to drop both CTAs
    with them, leaving the theme toggle alone. "Partner with Us" has to survive
    — it is the only route to /partner from a page that is not the home page —
    but surviving ALONE would leave a parent on a phone looking at a button
    addressed to tutors and no way to open the app. So both buttons stay, and
    the nav wraps them onto a second line when they do not fit.
  */
  nav a.nav-cta,
  nav a.nav-partner {
    display: inline-flex;
    padding: 8px 11px;
    font-size: 13px;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }
}