/*
  Stapl website styles: the Fresh Glass design from docs/design/.
  Token names follow docs/design/DESIGN-TOKENS.md. Logical properties
  (margin-inline, padding-block...) keep the layout ready for right-to-left
  languages later. The page sections further down still carry the earlier
  temporary styles until each page gets its design.
*/

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  /* Variable font with the optical-size axis, Latin only (OFL, see dm-sans-OFL.txt). */
  src: url("/assets/fonts/dm-sans-variable-latin-5.3.0.woff2") format("woff2");
}

:root {
  /* Colour */
  --paper: #f5f4f0;
  --surface: #ffffff;
  --sunken: #ecebe7;
  --ink: #15171a;
  --ink-2: #5b6068;
  --ink-on-glass: #3f444b;
  --line: rgba(21, 23, 26, 0.08);
  --herb: #1f7a4d;
  --herb-hover: #15603c;
  --herb-pressed: #11502f;
  --herb-tint: #e3f1e8;
  --herb-light: #4fb07c;
  --quiet: rgba(21, 23, 26, 0.08);
  --quiet-hover: rgba(21, 23, 26, 0.13);
  --quiet-pressed: rgba(21, 23, 26, 0.16);

  /* Glass */
  --glass-header: rgba(255, 255, 255, 0.62);
  --glass-solid: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-blur: blur(24px) saturate(180%);
  --shadow-header: 0 8px 26px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.12);

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 120px;

  /* Shape */
  --radius-pill: 999px;
  --radius-card: 26px;
  --radius-glass: 28px;
  --radius-photo: 32px;
  --radius-small: 20px;

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --measure: 42rem;
  --header-space: 112px;

  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (max-width: 759px) {
  :root {
    --gutter: 16px;
    --header-space: 88px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchor jumps land below the sticky header. */
  scroll-padding-block-start: var(--header-space);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.53 var(--font);
}

main { flex: 1; }

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

a {
  color: var(--herb);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
a:hover { color: var(--herb-hover); }

/* A 3 px herb ring with a 3 px gap, on everything clickable. */
:focus-visible {
  outline: 3px solid var(--herb);
  outline-offset: 3px;
}
a:not(.button):focus-visible { border-radius: 6px; }

h1, h2, h3 { font-weight: 700; }
h1 {
  font-size: 3rem;
  line-height: 1.125;
  letter-spacing: -0.029em;
  margin-block: 0 0.75rem;
}
h2 {
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-block: 2.25rem 0.75rem;
}
h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin-block: 1.5rem 0.5rem;
}
p, ul, ol { margin-block: 0 1rem; }

@media (max-width: 759px) {
  body { font-size: 1rem; line-height: 1.5; }
  h1 { font-size: 2rem; line-height: 1.19; }
  h2 { font-size: 1.5rem; line-height: 1.25; }
  h3 { font-size: 1.1875rem; line-height: 1.37; }
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1rem;
}

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

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -4rem;
  z-index: 30;
  padding: 0.75rem 1rem;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-pill);
}
.skip-link:focus { inset-block-start: 1rem; }

/* Buttons: herb for the main action, quiet for the rest. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding-block: 0;
  padding-inline: var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--herb);
  color: var(--surface);
  font: 700 1.0625rem/1.2 var(--font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.button:hover { background: var(--herb-hover); color: var(--surface); }
.button:active { background: var(--herb-pressed); transform: scale(0.97); }

.button.quiet,
.button.secondary {
  padding-inline: 22px;
  background: var(--quiet);
  color: var(--ink);
  font-weight: 500;
}
.button.quiet:hover,
.button.secondary:hover { background: var(--quiet-hover); color: var(--ink); }
.button.quiet:active,
.button.secondary:active { background: var(--quiet-pressed); }

.button.wide { width: 100%; }

/* Round icon button, such as the phone menu's open and close. */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--quiet);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.icon-button:hover { background: var(--quiet-hover); }
.icon-button:active { background: var(--quiet-pressed); transform: scale(0.97); }
.icon-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* "Coming soon" status: not clickable. After launch the store badges replace it. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin: 0;
  padding-inline: 22px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--surface);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
}
.status-pill::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--herb-light);
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .icon-button { transition: none; }
  .button:active,
  .icon-button:active { transform: none; }
}

/* Header: a glass pill that stays at the top while the page scrolls. */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  padding-block: 20px;
}

.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 10px;
  padding-inline: 20px 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-header);
  box-shadow: var(--shadow-header);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-nav { background: var(--glass-solid); }
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.brand img {
  display: block;
  width: auto;
  height: 40px;
}

.site-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
}
.nav-links a:hover { color: var(--ink); text-decoration: underline; }

.site-nav .status-pill {
  min-height: 44px;
  gap: var(--space-2);
  padding-inline: 18px;
  font-size: 0.9375rem;
}

/* The full "Coming soon to iPhone and Android" shows in the phone menu;
   the desktop header shows "Coming soon" and keeps the rest for screen readers. */
.status-more {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.menu-button,
.menu-close { display: none; }

@media (max-width: 759px) {
  .site-header { padding-block: 12px; }

  .site-nav {
    padding-block: 6px;
    padding-inline: 14px 6px;
  }

  .brand img { height: 34px; }

  .menu-button { display: inline-flex; }

  /* menu.js adds .has-menu. Without it the links stay visible under the logo. */
  .site-header:not(.has-menu) .site-nav {
    flex-wrap: wrap;
    border-radius: var(--radius-glass);
  }
  .site-header:not(.has-menu) .site-menu { width: 100%; }
  .site-header:not(.has-menu) .nav-links { flex-wrap: wrap; gap: 0 20px; }
  .site-header:not(.has-menu) .status-pill { display: none; }

  .has-menu .site-menu { display: none; }

  /* The open phone menu: a white card over the header. */
  .has-menu .site-menu.is-open {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 12px 20px;
    padding-inline: 16px;
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
  }
  .site-menu.is-open .menu-close {
    display: inline-flex;
    align-self: flex-end;
  }
  .site-menu.is-open .menu-close svg { width: 18px; height: 18px; }
  .site-menu.is-open .nav-links {
    flex-direction: column;
    gap: 0;
  }
  .site-menu.is-open .nav-links a {
    display: flex;
    padding-block: 12px;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
  }
  .site-menu.is-open .status-pill {
    justify-content: center;
    min-height: 50px;
    margin-block-start: 10px;
  }
  .site-menu.is-open .status-more { position: static; width: auto; height: auto; clip-path: none; }
}

/* Footer */

.site-footer { margin-block-start: var(--space-8); }
/* The rule spans the container's full width, side padding included. */
.site-footer .container { border-block-start: 1px solid var(--line); }

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: 48px 56px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.47;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 320px;
}
.footer-brand p { margin: 0; }
.footer-brand img {
  display: block;
  width: auto;
  height: 33px;
}

.footer-cols {
  display: flex;
  gap: var(--space-8);
}

.footer-col h2 {
  margin: 0;
  padding-block-end: 6px;
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.38;
  letter-spacing: 0;
}
.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.footer-col a:hover { text-decoration: underline; }
.footer-col a.email { color: var(--herb); }
.footer-col a.email:hover { color: var(--herb-hover); }

.footer-copy-phone { display: none; }

@media (max-width: 759px) {
  .footer-inner {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--space-4);
    padding-block: 28px 40px;
  }
  .footer-brand img { height: 29px; }
  .footer-brand .footer-tagline,
  .footer-brand .footer-copy { display: none; }

  .footer-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-4);
  }
  .footer-col h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .footer-col.follow { grid-column: 1 / -1; }

  .footer-copy-phone { display: block; margin: 0; }
}

/* Small things */

.lede { font-size: 1.1875rem; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 1.25rem;
  margin-block: 1.5rem;
}
.card > :first-child { margin-block-start: 0; }
.card > :last-child { margin-block-end: 0; }
.draft-note {
  background: var(--herb-tint);
  border-radius: var(--radius-small);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
}
/* Placeholders in draft text that need Sami's decision. */
mark.todo {
  background: var(--herb-tint);
  color: var(--ink);
  outline: 1px dashed var(--herb);
  padding-inline: 0.15em;
}

/* Long text: support, delete account (until they get their design) */

.prose { padding-block: 1rem 0; }
.prose .updated { color: var(--ink-2); margin-block-end: 1.5rem; }
.prose li { margin-block-end: 0.35rem; }

/* Legal template: privacy and terms. A title block, then a contents card
   (sticky on wide screens; a disclosure plus a floating button on phones)
   beside a reading column of about 70 characters. legal.js adds the
   phone disclosure and marks the section being read. */

.legal-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-block-start: 40px;
}
.legal-head > * { margin: 0; }
.legal-head h1 {
  margin-block-start: var(--space-2);
  font-size: 3.5rem;
  line-height: 1.07;
  letter-spacing: -0.032em;
}
.legal-head .updated { color: var(--ink-2); }
.legal-head .draft-note { max-width: 46rem; }

.legal-body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-7) var(--space-6);
}

.toc {
  position: sticky;
  inset-block-start: var(--header-space);
  max-height: calc(100vh - var(--header-space) - var(--space-5));
  overflow-y: auto;
  padding-block: 22px 14px;
  padding-inline: 22px;
  border-radius: var(--radius-card);
  background: var(--surface);
}
.toc h2 {
  margin: 0;
  padding-block-end: var(--space-2);
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.38;
  letter-spacing: 0;
}
.toc ol {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-inline: -10px;
  padding-block: 8px;
  padding-inline: 10px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.33;
  text-decoration: none;
}
.toc a:hover { background: var(--quiet); color: var(--ink); }
.toc a[aria-current] {
  background: var(--herb-tint);
  color: var(--herb);
  font-weight: 700;
}
.toc-toggle,
.toc-jump { display: none; }

.legal-text {
  max-width: 700px;
  color: var(--ink-on-glass);
  font-size: 1.125rem;
  line-height: 1.67;
}
.legal-text > * { margin-block: 0; }
.legal-text > * + * { margin-block-start: 18px; }
.legal-text > .legal-lede {
  font-size: 1.25rem;
  line-height: 1.6;
}
.legal-text h2,
.legal-text h3 { color: var(--ink); }
.legal-text > h2 { margin-block-start: 46px; }
.legal-text > h3 {
  margin-block-start: 26px;
  font-size: 1.3125rem;
  line-height: 1.33;
}
.legal-text ul,
.legal-text ol { padding-inline-start: var(--space-5); }
.legal-text li + li { margin-block-start: 6px; }
.legal-text strong { color: var(--ink); }

.legal-text .card,
.legal-contact {
  padding: 28px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
}
.legal-text .card > * { margin-block: 0; }
.legal-text .card > * + * { margin-block-start: 12px; }
.legal-text .card h2 {
  font-size: 1.375rem;
  line-height: 1.27;
  letter-spacing: 0;
}

/* Wide tables scroll sideways inside their box. */
.table-scroll {
  overflow-x: auto;
  border-radius: 22px;
  background: var(--surface);
}
.legal-text table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.5;
}
.legal-text th,
.legal-text td {
  padding-block: 14px;
  padding-inline: 18px;
  border-block-end: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}
.legal-text tbody tr:last-child td { border-block-end: 0; }
.legal-text th {
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.38;
}
.legal-text td:first-child { color: var(--ink); }

/* "Questions about this policy?" */
.legal-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}
.legal-contact h2 {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.27;
  letter-spacing: 0;
}
.legal-contact p {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.5;
}
.legal-contact .button {
  font-size: 1rem;
  white-space: nowrap;
}

@media (max-width: 759px) {
  .legal-head {
    gap: var(--space-2);
    padding-block-start: var(--space-5);
  }
  .legal-head h1 {
    margin-block-start: 6px;
    font-size: 2.375rem;
    line-height: 1.1;
  }
  .legal-head .updated { font-size: 0.9375rem; }

  .legal-body {
    display: block;
    padding-block: 20px 0;
  }

  /* With legal.js the contents fold into a "Contents · N sections" button. */
  .toc {
    position: static;
    max-height: none;
    padding: 0;
    border-radius: 22px;
  }
  .toc:not(.has-toggle) { padding: 18px; }
  .toc.has-toggle h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    min-height: 56px;
    padding-block: 0;
    padding-inline: 18px;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: var(--ink);
    font: 700 1rem/1.25 var(--font);
    text-align: start;
    cursor: pointer;
  }
  .toc-toggle svg {
    flex: none;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    transition: transform 0.15s ease;
  }
  .toc.is-open .toc-toggle svg { transform: rotate(180deg); }
  .toc.has-toggle ol { padding-block: 0 14px; padding-inline: 18px; }
  .toc.has-toggle:not(.is-open) ol { display: none; }

  .legal-text {
    padding-block-start: 28px;
    font-size: 1.0625rem;
    line-height: 1.59;
  }
  .legal-text > * + * { margin-block-start: 14px; }
  .legal-text > .legal-lede {
    font-size: 1.125rem;
    line-height: 1.56;
  }
  .legal-text > h2 {
    margin-block-start: 36px;
    letter-spacing: -0.017em;
  }
  .legal-text > h3 {
    margin-block-start: 20px;
    font-size: 1.1875rem;
    line-height: 1.37;
  }
  .table-scroll { border-radius: var(--radius-small); }
  .legal-text table {
    font-size: 0.9375rem;
    line-height: 1.47;
  }
  .legal-text th,
  .legal-text td {
    padding-block: 12px;
    padding-inline: 14px;
  }
  .legal-text th { font-size: 0.75rem; }

  .legal-text .card,
  .legal-contact {
    padding-block: 22px;
    padding-inline: 20px;
  }
  .legal-contact {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
  }
  .legal-contact h2 { font-size: 1.25rem; line-height: 1.3; }
  .legal-contact p { font-size: 0.9375rem; line-height: 1.47; }

  /* Floating "Contents" button: jumps back to the list while reading.
     legal.js shows it only once the list has scrolled away. */
  .toc-jump {
    position: fixed;
    inset-inline-end: var(--space-4);
    inset-block-end: max(var(--space-5), env(safe-area-inset-bottom));
    z-index: 15;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
    padding-inline: 18px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
  }
  .toc-jump:hover { color: var(--ink); }
  .toc-jump svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
  .js-legal .toc-jump:not(.is-visible) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .toc-toggle svg { transition: none; }
}

/* Support. Wide screens: the photo hero beside "Write to us", then the
   questions beside the link cards. Phones: one column in source order
   (hero, questions, "Write to us", links). The grid's five columns
   reproduce the two rows' different splits. */

.support-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 633fr) minmax(0, 32fr) minmax(0, 14fr) minmax(0, 48fr) minmax(0, 425fr);
  grid-template-areas:
    "hero . contact contact contact"
    "questions questions questions . links";
  row-gap: var(--space-8);
  align-items: start;
  padding-block: 40px var(--space-6);
}

.support-hero {
  grid-area: hero;
  position: relative;
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  min-height: 340px;
  padding: var(--space-5);
  overflow: hidden;
  border-radius: var(--radius-photo);
  background: var(--sunken);
}
.support-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.support-hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: 28px;
  padding-inline: 32px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .support-hero-card { background: var(--glass-solid); }
}
.support-hero-card h1 {
  margin: 0;
  font-size: 3.25rem;
  line-height: 1.08;
  letter-spacing: -0.031em;
}
.support-hero-card p {
  margin: 0;
  color: var(--ink-on-glass);
  font-size: 1.125rem;
  line-height: 1.5;
}

.support-contact {
  grid-area: contact;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  padding: 36px;
  border-radius: var(--radius-photo);
  background: var(--surface);
}
.support-contact h2 {
  margin: 0;
  font-size: 1.625rem;
  line-height: 1.23;
  letter-spacing: -0.023em;
}
.support-contact p {
  margin: 0;
  color: var(--ink-2);
}
.support-contact .button { font-size: 1rem; }

.support-questions { grid-area: questions; }
.support-questions h2 {
  margin: 0 0 18px;
  font-size: 2.25rem;
  line-height: 1.17;
  letter-spacing: -0.028em;
}

/* Questions that open and close: <details>, so they work without JavaScript. */
.faq-list {
  padding-block: 4px;
  padding-inline: 28px;
  border-radius: var(--radius-card);
  background: var(--surface);
}
.faq-list details + details { border-block-start: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 68px;
  padding-block: var(--space-3);
  border-radius: 14px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
/* Chevron drawn with borders: down when closed, up when open. */
.faq-list summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-inline-end: 5px;
  border-block-end: 2px solid var(--ink);
  border-inline-end: 2px solid var(--ink);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.15s ease;
}
.faq-list details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.faq-list details > :not(summary) {
  margin-block: 0 12px;
  color: var(--ink-on-glass);
  font-size: 1.0625rem;
  line-height: 1.59;
}
.faq-list details > :last-child { margin-block-end: 22px; }
.faq-list ol,
.faq-list ul { padding-inline-start: var(--space-5); }
.faq-list li + li { margin-block-start: 4px; }
.faq-list strong { color: var(--ink); }

.support-links {
  grid-area: links;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block-start: 60px;
}
.link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding-block: 20px;
  padding-inline: 22px;
  border-radius: 22px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
}
.link-card:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.link-card::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-inline-end: 6px;
  border-block-start: 2px solid var(--herb);
  border-inline-end: 2px solid var(--herb);
  transform: rotate(45deg);
}
.link-card:dir(rtl)::after { transform: rotate(-135deg); }

@media (max-width: 759px) {
  .support-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: var(--space-4) 0;
  }

  .support-hero {
    height: 320px;
    min-height: 0;
    padding: 14px;
    border-radius: var(--radius-glass);
  }
  .support-hero-card {
    width: 100%;
    gap: 6px;
    padding: 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: none;
  }
  .support-hero-card h1 {
    font-size: 2.25rem;
    line-height: 1.11;
  }
  .support-hero-card p {
    font-size: 1rem;
    line-height: 1.5;
  }

  .support-questions { margin-block-start: var(--space-6); }
  .support-questions h2 {
    margin-block-end: 14px;
    font-size: 1.625rem;
    line-height: 1.23;
  }
  .faq-list {
    padding-block: 2px;
    padding-inline: 18px;
  }
  .faq-list summary {
    gap: var(--space-3);
    min-height: 64px;
    font-size: 1rem;
  }
  .faq-list details > :not(summary) {
    font-size: 1rem;
    line-height: 1.56;
  }
  .faq-list details > :last-child { margin-block-end: 18px; }

  .support-contact {
    align-items: stretch;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
    padding-block: 22px;
    padding-inline: 20px;
    border-radius: var(--radius-card);
  }
  .support-contact h2 {
    font-size: 1.375rem;
    line-height: 1.27;
  }
  .support-contact p {
    font-size: 0.9375rem;
    line-height: 1.53;
  }

  .support-links {
    gap: 10px;
    margin-block-start: var(--space-4);
    padding-block-start: 0;
  }
  .link-card {
    padding-block: 0;
    padding-inline: 18px;
    border-radius: var(--radius-small);
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-list summary::after { transition: none; }
}

/* Delete your account: one narrow column. Numbered steps, the deleted and
   kept cards, then "Can't open the app?" as a glass card on a photo. */

.delete-page {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 860px;
  padding-block: var(--space-7) var(--space-6);
}

.delete-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.delete-head > * { margin: 0; }
.delete-head h1 {
  font-size: 3.5rem;
  line-height: 1.07;
  letter-spacing: -0.032em;
}
.delete-intro {
  color: var(--ink-2);
  font-size: 1.25rem;
  line-height: 1.5;
}
.delete-intro strong { color: var(--ink); }

.delete-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.delete-steps h2 { margin: 0; }
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 20px;
  padding-inline: 24px;
  border-radius: 22px;
  background: var(--surface);
  font-size: 1.125rem;
  line-height: 1.5;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--herb);
  color: var(--surface);
  font-size: 1.0625rem;
  font-weight: 700;
}
.delete-note {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.53;
}

.delete-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.delete-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px;
  border-radius: var(--radius-card);
  background: var(--surface);
}
.delete-card-wide { grid-column: 1 / -1; }
.delete-card h2 {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.27;
  letter-spacing: 0;
}
.delete-card ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding-inline-start: 20px;
  color: var(--ink-on-glass);
  font-size: 1rem;
  line-height: 1.56;
}
.delete-card strong { color: var(--ink); }
.delete-card-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.delete-email {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  padding: var(--space-5);
  overflow: hidden;
  border-radius: var(--radius-photo);
  background: var(--sunken);
}
.delete-email > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.delete-email-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  padding-block: 28px;
  padding-inline: 30px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .delete-email-card { background: var(--glass-solid); }
}
.delete-email-card h2 {
  margin: 0 0 6px;
  font-size: 1.625rem;
  line-height: 1.23;
  letter-spacing: -0.019em;
}
.delete-email-card p {
  margin: 0;
  color: var(--ink-on-glass);
  font-size: 1rem;
  line-height: 1.5;
}
.delete-email-card p + p { margin-block-start: 6px; }
.delete-email-card .button {
  flex: none;
  font-size: 1rem;
  white-space: nowrap;
}

@media (max-width: 759px) {
  .delete-page {
    gap: 28px;
    padding-block: 28px 0;
  }
  .delete-head { gap: 10px; }
  .delete-head h1 {
    font-size: 2.375rem;
    line-height: 1.1;
  }
  .delete-intro {
    font-size: 1.0625rem;
    line-height: 1.53;
  }

  .delete-steps { gap: var(--space-3); }
  .steps { gap: 10px; }
  .steps li {
    align-items: flex-start;
    gap: 14px;
    padding-block: 16px;
    padding-inline: 18px;
    border-radius: var(--radius-small);
    font-size: 1rem;
  }
  .steps li::before {
    width: 34px;
    height: 34px;
    margin-block-start: -5px;
    font-size: 0.9375rem;
  }
  .delete-note {
    font-size: 0.8125rem;
    line-height: 1.54;
  }

  .delete-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
  .delete-card {
    gap: var(--space-2);
    padding: 20px;
    border-radius: 24px;
  }
  .delete-card h2 {
    font-size: 1.25rem;
    line-height: 1.3;
  }
  .delete-card ul {
    font-size: 0.9375rem;
    line-height: 1.53;
  }

  .delete-email {
    min-height: 420px;
    padding: 14px;
    border-radius: var(--radius-glass);
  }
  .delete-email-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding-block: 22px;
    padding-inline: 20px;
    border-radius: 24px;
  }
  .delete-email-card h2 {
    margin-block-end: 10px;
    font-size: 1.375rem;
    line-height: 1.27;
  }
  .delete-email-card p {
    font-size: 0.9375rem;
    line-height: 1.53;
  }
  .delete-email-card .button { white-space: normal; }
}

/* 404: a glass card on a photo that fills the first screen. On phones the
   photo runs full width behind the header and fades into the page, like
   /join. No analytics on this page: a mistyped invite link lands here. */

.notfound-page { position: relative; }
/* The design's panel is the full 1200 px, a little wider than other pages' content. */
.notfound .container { max-width: calc(var(--container) + 2 * var(--gutter)); }

.notfound-panel {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(480px, calc(100svh - 192px));
  margin-block: var(--space-5) 0;
  padding: var(--space-7);
  overflow: hidden;
  border-radius: var(--radius-photo);
  background: var(--sunken);
}
.notfound-panel > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.notfound-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 600px;
  padding: 40px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .notfound-card { background: var(--glass-solid); }
}
.notfound-card > * { margin: 0; }
.notfound-code {
  color: var(--herb);
  font-size: 0.9375rem;
  font-weight: 700;
}
.notfound-card h1 + p {
  color: var(--ink-on-glass);
  font-size: 1.125rem;
  line-height: 1.5;
}
.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-block-start: 6px;
}
.notfound-actions .button { font-size: 1rem; }
.notfound-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 4px;
  font-weight: 500;
  text-decoration: none;
}
.notfound-link:hover { text-decoration: underline; }

@media (max-width: 759px) {
  /* The panel steps aside so the photo sits behind the header. */
  .notfound .container { padding-inline: var(--gutter); }
  .notfound-panel {
    position: static;
    align-items: flex-end;
    min-height: calc(100svh - 92px);
    margin: 0;
    padding: 0 0 var(--space-5);
    overflow: visible;
    border-radius: 0;
    background: none;
  }
  .notfound-panel > img {
    inset: 0 0 auto;
    height: 460px;
  }
  .notfound-panel::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 300px;
    height: 160px;
    background: linear-gradient(rgba(245, 244, 240, 0), var(--paper));
  }

  .notfound-card {
    max-width: none;
    gap: var(--space-3);
    padding-block: 26px;
    padding-inline: 22px;
    background: rgba(255, 255, 255, 0.86);
  }
  .notfound-code { font-size: 0.875rem; }
  .notfound-card h1 + p {
    font-size: 1rem;
    line-height: 1.5;
  }
  .notfound-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    margin-block-start: 0;
  }
  .notfound-actions .button {
    min-height: 56px;
    font-size: 1.0625rem;
  }
  .notfound-link { align-self: center; }
}

/* Home. The header floats over the hero photo; feature rows pair a photo
   with an app screen in a CSS phone frame; three cards (rows on phones);
   the household band; a closing call. Motion is further down. */

.home-page .site-header {
  position: fixed;
  inset-inline: 0;
}

.follow-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  font-weight: 500;
  text-decoration: none;
}
.follow-link:hover { text-decoration: underline; }

/* Phone frame for app screens: an ink bezel, radius about 17% of the width. */
.phone-frame {
  padding: 7px;
  border-radius: 40px;
  background: var(--ink);
  box-shadow: 0 24px 48px rgba(21, 23, 26, 0.24);
}
.phone-screen {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top;
  border-radius: 33px;
  background: var(--paper);
}

/* Hero */
.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 640px;
  height: min(820px, 100svh);
  overflow: hidden;
}
.home-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.home-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 240px;
  background: linear-gradient(rgba(245, 244, 240, 0), var(--paper));
  pointer-events: none;
}
.home-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-block-end: var(--space-8);
}

.hero-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 680px;
  padding-block: 36px;
  padding-inline: 40px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.hero-card > * { margin: 0; }
.hero-card h1 {
  font-size: clamp(3rem, 3.4vw + 1.25rem, 4.25rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.hero-card > p {
  color: var(--ink-on-glass);
  font-size: 1.1875rem;
  line-height: 1.47;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.hero-actions .status-pill { min-height: 56px; padding-inline: var(--space-5); }

/* Floating sample cards over the photo */
.hero-floats {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 340px;
  flex: none;
  margin-block-end: var(--space-5);
}
.float-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: 14px;
  padding-inline: 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.float-card p { margin: 0; }
.float-tonight { margin-inline-start: 40px; }
.float-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}
.float-detail {
  color: #b3361f;
  font-size: 0.875rem;
}
.float-kicker {
  color: var(--ink-2);
  font-size: 0.875rem;
}
.float-tonight .float-title { color: var(--herb); }
.ring {
  flex: none;
  width: 40px;
  height: 40px;
}
.ring circle {
  fill: none;
  stroke-width: 4;
}
.ring-track { stroke: var(--sunken); }
.ring-fill { stroke-linecap: round; }
.ring-low .ring-fill { stroke: #d9432b; }
.ring-ok .ring-fill { stroke: var(--herb); }

/* Glass on photos: near-solid where blur isn't supported. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-card,
  .float-card,
  .household-card { background: var(--glass-solid); }
}

/* Feature rows */
.home-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding-block: var(--space-8) 40px;
}
.feature-row {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.feature-row:nth-child(even) { flex-direction: row-reverse; }
.feature-row .feature-media {
  position: relative;
  flex: 0 1 640px;
  aspect-ratio: 640 / 520;
}
.feature-photo {
  display: block;
  object-fit: cover;
  border-radius: var(--radius-photo);
  background: var(--sunken);
}
.feature-row .feature-photo {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 87.5%;
  height: 84.6%;
}
.feature-row .phone-frame {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 35.9%;
}
.feature-text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 14px;
  min-width: 16rem;
}
.feature-text > * { margin: 0; }
.feature-row h2 {
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  line-height: 1.125;
  letter-spacing: -0.029em;
}
.feature-text p {
  color: var(--ink-2);
  font-size: 1.25rem;
  line-height: 1.5;
}

/* Three cards (wide screens) */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  padding-block: 40px 80px;
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  padding-block: 28px 0;
  padding-inline: 28px;
  border-radius: var(--radius-card);
  background: var(--surface);
}
.feature-card .feature-text { order: -1; flex: none; gap: 10px; min-width: 0; }
.feature-card h3 {
  font-size: 1.625rem;
  line-height: 1.23;
  letter-spacing: -0.023em;
}
.feature-card .feature-text p {
  font-size: 1.0625rem;
  line-height: 1.53;
}
.feature-card .feature-media {
  display: flex;
  justify-content: center;
  height: 300px;
  margin-block-start: var(--space-4);
  overflow: hidden;
}
.feature-card .feature-photo { display: none; }
.feature-card .phone-frame {
  width: min(240px, 100%);
  height: max-content;
  box-shadow: none;
}

/* Household band */
.home-household {
  position: relative;
  display: flex;
  align-items: center;
  height: 620px;
  overflow: hidden;
}
.home-household-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% + 40px);
  object-fit: cover;
}
.home-household .container { position: relative; }
.household-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 600px;
  padding-block: 36px;
  padding-inline: 40px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.household-card > * { margin: 0; }
.household-card h2 {
  font-size: 3rem;
  line-height: 1.125;
  letter-spacing: -0.029em;
}
.household-card > p {
  color: var(--ink-on-glass);
  font-size: 1.1875rem;
  line-height: 1.47;
}
.household-people {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink-on-glass);
  font-size: 1rem;
}
.avatars { display: flex; }
.avatars > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--surface);
  border-radius: var(--radius-pill);
  font-size: 1.125rem;
  font-weight: 700;
}
.avatars > span + span { margin-inline-start: -12px; }
.avatars > span:nth-child(1) { background: var(--herb-tint); color: var(--herb); }
.avatars > span:nth-child(2) { background: var(--sunken); color: var(--ink); }
.avatars > span:nth-child(3) { background: var(--ink); color: var(--surface); }

/* Closing call */
.home-closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-block: var(--space-10);
  text-align: center;
}
.home-closing > * { margin: 0; }
.closing-mark { width: 64px; height: auto; }
.home-closing h2 {
  font-size: 3.5rem;
  line-height: 1.07;
  letter-spacing: -0.032em;
}
.home-closing .status-pill { min-height: 56px; padding-inline: var(--space-5); }
.home-page .site-footer { margin-block-start: 0; }

@media (max-width: 759px) {
  .home-hero {
    min-height: 600px;
    height: min(760px, 100svh);
  }
  .home-hero-photo { object-position: 40% 50%; }
  .home-hero::after { height: 200px; }
  .home-hero-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin-block-end: 28px;
  }
  .hero-card {
    gap: var(--space-3);
    padding-block: var(--space-5);
    padding-inline: 20px;
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.8);
  }
  .hero-card h1 {
    font-size: 2.5rem;
    line-height: 1.1;
    letter-spacing: -0.033em;
  }
  .hero-card > p {
    font-size: 1rem;
    line-height: 1.5;
  }
  .hero-actions .status-pill,
  .home-closing .status-pill {
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 52px;
    padding-inline: var(--space-4);
    font-size: 0.9375rem;
  }
  .hero-card .follow-link { display: none; }

  .hero-floats {
    order: -1;
    align-self: flex-end;
    width: auto;
    margin: 0;
  }
  .float-low,
  .float-kicker { display: none; }
  .float-tonight {
    gap: 10px;
    margin: 0;
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.8);
  }
  .float-tonight .float-title { font-size: 0.9375rem; }
  .ring { width: 34px; height: 34px; }

  /* All six features as rows: photo, app screen, then the text. */
  .home-features {
    gap: 56px;
    padding-block: 32px 24px;
  }
  .feature-row,
  .feature-row:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .feature-cards {
    display: flex;
    flex-direction: column;
    gap: 56px;
    padding: 0;
  }
  .feature-card {
    gap: 14px;
    overflow: visible;
    padding: 0;
    border-radius: 0;
    background: none;
  }
  .feature-card .feature-text { order: 0; gap: 14px; }

  .feature .feature-media {
    position: relative;
    flex: none;
    width: 100%;
    height: 400px;
    aspect-ratio: auto;
    margin: 0;
    overflow: visible;
  }
  .feature .feature-photo {
    display: block;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: min(300px, 84%);
    height: 300px;
    border-radius: var(--radius-card);
  }
  .feature .phone-frame {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: 170px;
    padding: 6px;
    border-radius: 32px;
    box-shadow: 0 18px 36px rgba(21, 23, 26, 0.24);
  }
  .feature .phone-screen { border-radius: 26px; }
  .feature-row h2,
  .feature-card h3 {
    font-size: 1.875rem;
    line-height: 1.2;
    letter-spacing: -0.027em;
  }
  .feature-text p,
  .feature-card .feature-text p {
    font-size: 1rem;
    line-height: 1.5;
  }

  .home-household {
    align-items: flex-end;
    height: 520px;
    margin-block-start: 32px;
    padding-block-end: var(--space-4);
  }
  .household-card {
    gap: var(--space-3);
    padding-block: 22px;
    padding-inline: 20px;
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: none;
  }
  .household-card h2 {
    font-size: 1.875rem;
    line-height: 1.2;
    letter-spacing: -0.027em;
  }
  .household-card > p {
    font-size: 1rem;
    line-height: 1.5;
  }
  .household-people { display: none; }

  .home-closing {
    gap: var(--space-4);
    padding-block: 72px;
  }
  .closing-mark { width: 54px; }
  .home-closing h2 {
    font-size: 2.125rem;
    line-height: 1.18;
    letter-spacing: -0.029em;
  }
}

/* Home motion: CSS only. The default styles above are the final state, so
   nothing is hidden where these don't run. Off with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* On load: the photo settles, then the card and the floating cards rise in. */
  .home-hero-photo { animation: hero-settle 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-card { animation: rise-in 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 150ms both; }
  .float-low { animation: rise-in 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 300ms both; }
  .float-tonight { animation: rise-in 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 420ms both; }

  @keyframes hero-settle {
    from { transform: scale(1.06); }
  }
  @keyframes rise-in {
    from { opacity: 0; translate: 0 24px; }
  }

  @supports (animation-timeline: scroll()) {
    /* The floating cards move 15% faster than the photo. */
    .hero-floats {
      animation: float-ahead linear both;
      animation-timeline: scroll(root);
      animation-range: 0 820px;
    }
    @keyframes float-ahead {
      to { transform: translateY(-123px); }
    }

    /* The header pill gains a stronger shadow after 8 px of scroll. */
    .home-page .site-nav {
      animation: header-lift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 8px;
    }
    @keyframes header-lift {
      to { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16); }
    }
  }

  @supports (animation-timeline: view()) {
    /* Feature rows: the photo opens from 92% to 100%, the phone slides up. */
    .feature-row .feature-photo {
      animation: photo-open linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    @keyframes photo-open {
      from { clip-path: inset(4% round var(--radius-photo)); }
      to { clip-path: inset(0 round var(--radius-photo)); }
    }
    .feature-row .phone-frame {
      animation: phone-up linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }
    @keyframes phone-up {
      from { opacity: 0; translate: 0 40px; }
    }

    /* Cards fade in and rise, a little apart. */
    .feature-card {
      animation: card-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
    .feature-card:nth-child(2) { animation-range: entry 8% cover 33%; }
    .feature-card:nth-child(3) { animation-range: entry 16% cover 41%; }
    @keyframes card-up {
      from { opacity: 0; translate: 0 16px; }
    }

    /* Household band: the photo drifts with the scroll. */
    .home-household-photo {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes drift {
      to { translate: 0 -40px; }
    }
  }
}

/* Invite page (/join). join.js shows one state: phone, desktop or broken.
   Wide screens: the full header, a photo panel and a white card.
   Phones: only the logo, in a pill over a full-width photo, a glass card
   and three small links instead of a footer. */

.join-page { position: relative; }

.join {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-block: var(--space-6) var(--space-8);
  padding-inline: var(--gutter);
}

.join-visual {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: var(--radius-photo);
  background: var(--sunken);
}
.join-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "One kitchen, shared": a glass chip on the photo. */
.join-chip {
  position: absolute;
  inset-inline-start: var(--space-5);
  inset-block-end: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding-block: 14px;
  padding-inline: 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  font-size: 1rem;
  font-weight: 700;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .join-chip { background: var(--glass-solid); }
}
.join-avatars { display: flex; }
.join-avatars > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 3px solid var(--surface);
  border-radius: var(--radius-pill);
  background: var(--herb-tint);
  color: var(--herb);
}
.join-avatars > span + span {
  margin-inline-start: -10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--herb);
}
.join-avatars svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--herb);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.join-content,
.join-state {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.join-state { flex: 1; }

.join-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 56px;
  border-radius: var(--radius-photo);
  background: var(--surface);
}
.join-card > * { margin: 0; }
.join-lede {
  font-size: 1.1875rem;
  line-height: 1.47;
  color: var(--ink-2);
}
.join-card .button { min-height: 56px; }
.join-card .button.quiet {
  align-self: flex-start;
  margin-block-start: var(--space-2);
  padding-inline: 26px;
}

.join .notice {
  padding-block: 10px;
  padding-inline: 14px;
  border-radius: 14px;
  background: var(--herb-tint);
  font-size: 0.9375rem;
}

/* Broken link icon */
.join-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-pill);
  background: var(--sunken);
}
.join-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* QR code, drawn by join.js, about 180 px on a paper mat. */
.join-qr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-block-start: var(--space-3);
}
.join-qr-row p {
  flex: 1 1 12rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.47;
  color: var(--ink-2);
}
.join .qr {
  flex: none;
  width: 180px;
  height: 180px;
  padding: 14px;
  border-radius: var(--radius-small);
  background: var(--paper);
}
.join .qr svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* "Don't have Stapl yet?" */
.get-app {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: 18px;
  padding-inline: 20px;
  border-radius: var(--radius-card);
  background: var(--surface);
}
.get-app h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}
.get-app p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.47;
  color: var(--ink-2);
}
.get-app [data-when="launched"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.join .stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.join .stores .button {
  flex: 1;
  min-height: 48px;
  padding-inline: var(--space-4);
  font-size: 0.9375rem;
}

.join-links { display: none; }

/* Broken link: a paler photo, no "shared" chip, and no home link (the
   card's button already goes there). */
.join-page:has([data-state="broken"]:not([hidden])) .join-visual img { filter: saturate(0.6); }
.join-page:has([data-state="broken"]:not([hidden])) .join-chip,
.join-page:has([data-state="broken"]:not([hidden])) .join-home-link { display: none; }

@media (max-width: 759px) {
  .join-page .site-header {
    position: relative;
    padding-block: 12px;
  }
  .join-page .site-header .site-nav {
    display: inline-flex;
    flex-wrap: nowrap;
    padding-block: 6px;
    padding-inline: 8px 14px;
    border-color: rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
  }
  .join-page .site-menu { display: none; }
  .join-page .brand img { height: 30px; }

  .join {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-block: 120px var(--space-4);
  }

  /* The photo sits behind the logo pill and fades into the page. */
  .join-visual {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 420px;
    min-height: 0;
    border-radius: 0;
    background: none;
  }
  .join-visual::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 160px;
    background: linear-gradient(rgba(245, 244, 240, 0), var(--paper));
  }
  .join-chip { display: none; }

  .join-content,
  .join-links { position: relative; }
  .join-content,
  .join-state { gap: var(--space-3); }

  .join-card {
    flex: none;
    gap: 14px;
    padding-block: 26px;
    padding-inline: 22px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-glass);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-card);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  .join-lede {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-on-glass);
  }
  .join-card .button.quiet {
    align-self: stretch;
    margin-block-start: 0;
  }
  .join-icon { width: 52px; height: 52px; }
  .join-icon svg { width: 26px; height: 26px; }

  .join-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 0.875rem;
  }
  .join-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink-2);
    text-decoration: none;
  }
  .join-links a:hover { color: var(--ink); text-decoration: underline; }

  .join-page:has([data-state="broken"]:not([hidden])) .join-visual::after { height: 220px; }
  .join-page:has([data-when="launched"]:not([hidden])) .join-visual { height: 380px; }
}

@media (max-width: 759px) {
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .join-card { background: var(--glass-solid); }
  }
}

[hidden] { display: none !important; }