/* ==========================================================================
   snod.app — site styles
   --------------------------------------------------------------------------
   One stylesheet for every page. It's organised top to bottom as:
     1. Fonts            (self-hosted, so no visitor data goes to Google)
     2. Design tokens    (colours, sizes; light + dark versions)
     3. Base elements    (body, headings, links, focus rings)
     4. Layout helpers   (.wrap, sections)
     5. Components       (header, buttons, forms, cards, phone mock-up …)
     6. Page-specific    (privacy, confirmed, 404)
     7. Motion + print   (reduced-motion and print tweaks)
   ========================================================================== */


/* 1. FONTS ---------------------------------------------------------------
   Fraunces is a free (SIL Open Font License) serif used only for headings.
   Body text uses the device's own font (Segoe UI on Windows, Roboto on
   Android, San Francisco on Apple), which costs zero download.
   `font-display: swap` shows text immediately in a fallback font, then
   swaps to Fraunces when it has loaded, so nothing is ever invisible. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;                       /* variable font: any weight */
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
  /* Only download this file for characters in the basic Latin range. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 2. DESIGN TOKENS -------------------------------------------------------
   Every colour on the site comes from these variables. Change one here and
   it changes everywhere. All text pairs pass WCAG AA contrast (checked):
     ink on paper 13:1 · muted ink on paper 6.2:1 · heather on paper 5.8:1
     white on heather button 6.6:1 */
:root {
  color-scheme: light dark;                   /* native controls follow the theme */

  /* Surfaces */
  --paper: #F5F0E6;          /* warm page background */
  --surface: #FBF8F1;        /* cards and form fields sit a touch lighter */
  --surface-tint: #EEE6F5;   /* faint heather wash for the join panel */
  --line: #E2D9C8;           /* hairline borders */
  --field-border: #8A8172;   /* form field borders (3.6:1, visible enough) */

  /* Text */
  --ink: #1E2A2C;            /* main text: a deep green-black, softer than pure black */
  --ink-soft: #4F5B5D;       /* secondary text */

  /* Accent: heather purple, the one brand colour */
  --heather: #6B4E9B;
  --heather-strong: #5A3F88; /* hover / pressed */
  --on-heather: #FFFFFF;     /* text on a heather button */

  /* Tile colours for the phone illustration (muted Highland palette) */
  --tile-heather: #6B4E9B;
  --tile-loch: #2F6170;
  --tile-moss: #4F6F4A;
  --tile-gorse: #D9A441;
  --phone-screen: #1E2A2C;
  --phone-frame: #1E2A2C;

  /* Feedback */
  --error: #A3322A;
  --success: #2F6B45;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Shape and spacing */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 28px;
  --gutter: clamp(16px, 4vw, 32px);          /* side padding: 16px on phones */
  --section-space: clamp(64px, 10vw, 128px);  /* vertical space between sections */
  --shadow: 0 1px 2px rgb(30 42 44 / 0.06), 0 8px 24px rgb(30 42 44 / 0.06);
}

/* Dark theme: used automatically when the visitor's device is in dark mode. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14191A;
    --surface: #1C2325;
    --surface-tint: #231F2C;
    --line: #2E3739;
    --field-border: #6B7577;
    --ink: #EDE6D8;
    --ink-soft: #B3AC9F;
    --heather: #B9A0E0;
    --heather-strong: #CDB9EC;
    --on-heather: #14191A;
    --tile-heather: #6B4E9B;
    --tile-loch: #2F6170;
    --tile-moss: #4F6F4A;
    --tile-gorse: #D9A441;
    --phone-screen: #0E1213;
    --phone-frame: #3A4446;
    --error: #F2948C;
    --success: #8FD1A6;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25);
  }
}


/* 3. BASE ELEMENTS ------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }          /* padding never makes boxes wider */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;                    /* anchor links glide (turned off for reduced motion below) */
  scroll-padding-top: 24px;                   /* anchors don't land flush with the top edge */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;                       /* 17px: comfortable on phones */
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;                  /* Fraunces adjusts its shapes for big vs small sizes */
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;                         /* evens out line lengths in headings */
}
h1 { font-size: clamp(2.75rem, 5vw + 1.25rem, 5rem); letter-spacing: -0.03em; line-height: 1; }
h2 { font-size: clamp(2rem, 2.5vw + 1.2rem, 3rem); }
h3 { font-size: 1.375rem; letter-spacing: -0.01em; }

p { margin: 0 0 1em; text-wrap: pretty; }     /* avoids a single orphan word on the last line */

a {
  color: var(--heather);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--heather-strong); text-decoration-thickness: 2px; }

/* A clear focus ring for keyboard users (mouse clicks don't trigger it). */
:focus-visible {
  outline: 3px solid var(--heather);
  outline-offset: 3px;
  border-radius: 4px;
}

img, svg { display: block; max-width: 100%; }

/* Visually hidden but still read by screen readers. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* "Skip to content" link: invisible until a keyboard user tabs to it. */
.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: var(--radius-s);
  text-decoration: none;
}
.skip-link:focus { top: 16px; color: var(--paper); }


/* 4. LAYOUT HELPERS ------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;                        /* centres the content column */
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-space); }
.section + .section { padding-top: 0; }       /* avoid doubled gaps between sections */

/* Small uppercase label above section headings */
.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--heather);
  margin-bottom: 14px;
}

.section-intro {
  max-width: 40rem;
  color: var(--ink-soft);
  font-size: 1.125rem;
  margin-bottom: 40px;
}


/* 5. COMPONENTS ---------------------------------------------------------- */

/* Header ----------------------------------------------------------------- */
.site-header { padding-block: 20px; }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* The wordmark: the 2×2 tile mark plus "snod" in Fraunces */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.625rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
.brand:hover { color: var(--ink); }
.brand-mark { width: 28px; height: 28px; flex: none; }
/* The mark's tiles: one heather, three ink (they flip to cream in dark mode) */
.brand-mark .t-accent { fill: var(--heather); }
.brand-mark .t-base { fill: var(--ink); }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 32px);
  list-style: none;
  margin: 0; padding: 0;
}
.site-nav a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.975rem;
}
.site-nav a:not(.btn):hover { color: var(--heather); }
/* On phones only the "Follow along" button stays in the header */
@media (max-width: 760px) {
  .site-nav .nav-link { display: none; }
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;                           /* comfortable touch target */
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: 999px;                       /* pill shape */
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--heather); color: var(--on-heather); }
.btn-primary:hover { background: var(--heather-strong); color: var(--on-heather); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--field-border); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-small { min-height: 40px; padding: 0 16px; font-size: 0.9375rem; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* Hero ------------------------------------------------------------------- */
/* Less space under the hero than between other sections, because the
   next section brings its own top padding. */
.hero { padding-block: clamp(24px, 6vw, 72px) clamp(16px, 3vw, 32px); }
.hero .wrap {
  display: grid;
  gap: clamp(48px, 6vw, 80px);
  align-items: center;
}
/* Two columns (words left, phone right) once there's room */
@media (min-width: 940px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.hero h1 { margin-bottom: 20px; }

/* The dictionary-style definition under the headline */
.definition {
  display: inline-block;
  margin: 0 0 24px;
  padding: 14px 18px;
  border-left: 3px solid var(--heather);
  background: var(--surface);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.definition dfn {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
  margin-right: 6px;
}
.definition .say { font-size: 0.875rem; }
.definition em { font-family: var(--font-display); font-style: italic; color: var(--ink); }

.hero-lead {
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
  max-width: 34rem;
  margin-bottom: 28px;
}

/* Little reassurance chips under the hero form */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.chips li { display: inline-flex; align-items: center; gap: 7px; }
.chips svg { width: 16px; height: 16px; color: var(--heather); }

/* Follow buttons (used while there's no waitlist) ------------------------- */
.follow-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.follow-cta .btn svg { width: 20px; height: 20px; flex: none; }
.join-panel .follow-cta { align-self: center; }
.cta-note {
  margin: 14px 0 0;
  max-width: 30rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* Waitlist form (not used on the coming-soon page; kept for when the waitlist opens) */
.waitlist {
  max-width: 34rem;
  display: grid;
  gap: 14px;
}
.field { display: grid; gap: 6px; min-width: 0; }
.field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.field .optional { font-weight: 400; color: var(--ink-soft); }

/* Two selects side by side on wider screens, stacked on phones */
.field-row { display: grid; gap: 14px; }
@media (min-width: 520px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.field input,
.field select {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;                            /* 16px+ stops iPhones zooming in on focus */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field select {
  appearance: none;                           /* remove the browser's arrow… */
  padding-right: 40px;
  /* …and draw our own chevron with two gradients (no image file needed) */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field input::placeholder { color: var(--ink-soft); opacity: 0.75; }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--heather);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--heather) 25%, transparent);
}
/* Invalid fields get a red border (set by site.js only after a submit attempt) */
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--error);
}
.field-error:empty { display: none; }

.waitlist .btn-primary { width: 100%; min-height: 52px; font-size: 1.0625rem; }
@media (min-width: 520px) {
  .waitlist .btn-primary { width: auto; justify-self: start; padding-inline: 32px; }
}

.consent {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* The honeypot: a trap field that real people never see or fill in.
   Bots that fill in every field give themselves away. Moved off-screen
   rather than display:none, because some bots skip hidden fields. */
.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Status line for errors that aren't tied to one field (e.g. offline) */
.form-status { margin: 0; font-size: 0.9375rem; font-weight: 500; color: var(--error); }
.form-status:empty { display: none; }

/* The "check your inbox" panel that replaces the form after sign-up */
.form-success {
  max-width: 34rem;
  padding: 22px 24px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow);
}
.form-success:focus { outline: none; }
.form-success-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
}
.form-success-title svg { width: 26px; height: 26px; color: var(--success); flex: none; }
.form-success p { margin: 0 0 8px; color: var(--ink-soft); }
.form-success p:last-child { margin-bottom: 0; }
.preview-note {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-tint);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Phone mock-up (an illustration, not a screenshot) ----------------------- */
.mock {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 16px;
}
.phone {
  width: min(300px, 64vw);                    /* ~250px on a phone, 300px on desktop */
  aspect-ratio: 9 / 18.5;
  padding: 12px;
  border-radius: 44px;
  background: var(--phone-frame);
  box-shadow: 0 30px 60px -20px rgb(30 42 44 / 0.45), var(--shadow);
  rotate: 3deg;                               /* a slight tilt feels less rigid */
}
.phone-screen {
  height: 100%;
  border-radius: 34px;
  background: var(--phone-screen);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  color: #FFFFFF;
  font-family: var(--font-body);
}
.phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.85;
}
.phone-status .bars { display: flex; gap: 3px; align-items: flex-end; }
.phone-status .bars i { display: block; width: 3px; background: currentColor; border-radius: 1px; }
.phone-status .bars i:nth-child(1) { height: 5px; }
.phone-status .bars i:nth-child(2) { height: 7px; }
.phone-status .bars i:nth-child(3) { height: 9px; }

/* The tile grid: 2 columns; wide tiles span both */
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;                           /* hides the second face of live tiles */
  font-size: 0.75rem;
  line-height: 1.25;
}
.tile-wide { grid-column: span 2; aspect-ratio: 2.1 / 1; }
.tile-heather { background: var(--tile-heather); }
.tile-loch { background: var(--tile-loch); }
.tile-moss { background: var(--tile-moss); }
.tile-gorse { background: var(--tile-gorse); color: #1E2A2C; }
.tile-ghost {
  background: transparent;
  border: 1.5px dashed rgb(255 255 255 / 0.25);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: rgb(255 255 255 / 0.4);
}

/* Each tile face fills the tile; text sits bottom-left like the old live tiles */
.face {
  height: 100%;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.face .label { font-weight: 600; font-size: 0.75rem; }
.face .big {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
}
.face .small { opacity: 0.9; }
.face .lines { display: grid; gap: 4px; }
.face .lines span { display: block; height: 5px; border-radius: 3px; background: currentColor; opacity: 0.35; }
.face .lines span:nth-child(2) { width: 75%; }
.face .lines span:nth-child(3) { width: 55%; }

/* Routine progress dots */
.dots { display: flex; gap: 5px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; }
.dots i.on { background: currentColor; }

/* Live tiles: a stack of two faces that slides up and back, like Windows Phone */
.live .faces { height: 200%; animation: tile-peek 9s ease-in-out infinite; }
.live .faces .face { height: 50%; }
.live-delay .faces { animation-delay: 3s; }
@keyframes tile-peek {
  0%, 38%   { transform: translateY(0); }
  45%, 83%  { transform: translateY(-50%); }
  90%, 100% { transform: translateY(0); }
}

.mock figcaption {
  max-width: 280px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* Cards (the four apps) -------------------------------------------------- */
.app-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  list-style: none;
  margin: 0; padding: 0;
}
.card {
  padding: 26px 24px 24px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border: 1px solid var(--line);
}
.card h3 { margin-bottom: 4px; }
.card .tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--heather);
  margin-bottom: 10px;
}
.card p:last-child { margin-bottom: 0; color: var(--ink-soft); }

/* The coloured square icon at the top of each app card */
.app-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: #FFFFFF;
}
.app-icon svg { width: 26px; height: 26px; }
.app-icon.tasks { background: var(--tile-heather); }
.app-icon.calendar { background: var(--tile-loch); }
.app-icon.notes { background: var(--tile-gorse); color: #1E2A2C; }
.app-icon.routines { background: var(--tile-moss); }

.after-note {
  margin: 28px 0 0;
  color: var(--ink-soft);
  font-size: 0.975rem;
}

/* Why Snod --------------------------------------------------------------- */
.why-grid {
  display: grid;
  gap: 36px 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  list-style: none;
  margin: 0; padding: 0;
}
.why-grid h3 { font-size: 1.25rem; margin-bottom: 6px; }
.why-grid p { color: var(--ink-soft); margin: 0; }
.why-icon { width: 30px; height: 30px; color: var(--heather); margin-bottom: 14px; }

/* Roadmap ---------------------------------------------------------------- */
.roadmap {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0;
}
.roadmap li {
  position: relative;
  padding: 0 0 32px 36px;                    /* room on the left for the dot + line */
}
/* the dot */
.roadmap li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 3px solid var(--heather);
  background: var(--paper);
}
/* the connecting line */
.roadmap li::after {
  content: "";
  position: absolute;
  left: 7px; top: 26px; bottom: 4px;
  width: 2px;
  background: var(--line);
}
.roadmap li:last-child::after { display: none; }
.roadmap li.now::before { background: var(--heather); }  /* filled dot = we are here */
.roadmap .when {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--heather);
  margin-bottom: 2px;
}
.roadmap h3 { font-size: 1.25rem; margin-bottom: 4px; }
.roadmap p { margin: 0; color: var(--ink-soft); }

/* Horizontal timeline on wide screens */
@media (min-width: 900px) {
  .roadmap { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .roadmap li { padding: 36px 0 0 0; }
  .roadmap li::before { top: 0; }
  .roadmap li::after { left: 24px; right: -20px; top: 7px; bottom: auto; width: auto; height: 2px; }
}

/* FAQ (uses <details>, so it works with no JavaScript) -------------------- */
.faq { max-width: 46rem; }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;                           /* hide the default triangle… */
  font-weight: 600;
  font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
/* …and draw a plus that turns into a cross when open */
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--heather);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-soft); padding-bottom: 8px; max-width: 40rem; }

/* Join panel (the repeated waitlist form) --------------------------------- */
.join-panel {
  display: grid;
  gap: 32px;
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--radius-l);
  background: var(--surface-tint);
}
@media (min-width: 900px) {
  .join-panel { grid-template-columns: 1fr 1.1fr; align-items: start; }
}
.join-panel h2 { margin-bottom: 12px; }
.join-panel .lede { color: var(--ink-soft); margin: 0; max-width: 28rem; }
.join-panel .field input,
.join-panel .field select { background: var(--paper); }

/* Footer ----------------------------------------------------------------- */
.site-footer {
  padding-block: 48px 40px;               /* the last section's own padding provides the gap above */
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}
.footer-top {
  display: grid;
  gap: 32px;
}
@media (min-width: 760px) {
  .footer-top { grid-template-columns: 1.4fr repeat(3, 1fr); }
}
.footer-top .brand { margin-bottom: 10px; }
.footer-top p { color: var(--ink-soft); margin: 0; }
.footer-col h2 {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-col a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.footer-col a:hover { color: var(--heather); text-decoration: underline; }
.footer-col svg { width: 18px; height: 18px; }
.footer-bottom {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: 0.875rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom:first-child { margin-top: 0; }   /* short footers (privacy, confirmed) */
/* The company's registered details, small and quiet under the footer */
.legal-line {
  margin: 16px 0 0;
  max-width: 48rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}


/* 6. PAGE-SPECIFIC ------------------------------------------------------- */

/* Simple text pages (privacy note) */
.prose { max-width: 42rem; }
.prose h1 { font-size: clamp(2.25rem, 3vw + 1.25rem, 3.25rem); margin-bottom: 12px; }
.prose h2 { font-size: 1.5rem; margin: 2em 0 0.5em; }
.prose ul { padding-left: 1.25em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.4em; }
.prose .updated { color: var(--ink-soft); font-size: 0.9375rem; }
.prose .summary {
  padding: 20px 22px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border: 1px solid var(--line);
  margin: 28px 0 8px;
}
.prose .summary p:last-child, .prose .summary ul:last-child { margin-bottom: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: 0.975rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 600; }

/* Confirmed + 404: one centred message */
.center-page {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--section-space);
}
.center-page .inner { max-width: 34rem; }
.center-page .big-mark { width: 72px; height: 72px; margin: 0 auto 28px; }
.center-page p { color: var(--ink-soft); font-size: 1.125rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.share-status { min-height: 1.5em; margin-top: 12px; font-size: 0.9375rem; }


/* 7. MOTION + PRINT ------------------------------------------------------ */

/* People who've asked their device for less motion get none. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .live .faces { animation: none; }
  .phone { rotate: 0deg; }
  * { transition-duration: 0.01ms !important; }
}

@media print {
  .site-header nav, .mock, .waitlist, .join-panel { display: none; }
  body { background: #FFFFFF; color: #000000; }
}