/*
  The public site: the homepage (/), the privacy policy (/privacy) and the terms of service (/terms). Static pages
  in public/ (home.html, privacy.html, terms.html), served at those addresses by rewrites in netlify.toml and never
  answered by the app's service worker (src/sw.ts).

  This is a separate surface from the app, with its own approved palette: the homepage design's light version
  (owner request: "Switch to the light theme"), built from the app's light values: its ground, white cards, ink and
  deep green, with an ink call to action. The values are kept here rather than read from the app's tokens
  (design/tokens.css), and the app's stylelint rule against raw colors covers src/ only. The pictured app screens
  use the app's light theme values too, with a line and a soft shadow to lift them off the ground.

  Fonts are self-hosted, since the Content-Security-Policy allows fonts from this site only: Plus Jakarta Sans for
  the page, Bricolage Grotesque for the wordmark and the titles inside the pictured app screens. Their licenses
  (SIL Open Font License 1.1) are beside them in fonts/.
*/

/* ------------------------------------------------------------------------------------------------------------
   Fonts
   ------------------------------------------------------------------------------------------------------------ */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  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: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2-variations");
  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;
}

/* ------------------------------------------------------------------------------------------------------------
   Palette and type
   ------------------------------------------------------------------------------------------------------------ */

:root {
  color-scheme: light;

  /* The page. --mint is the accent for text, icons and focus: the deep green on this light ground. */
  --ground: #F4F5F2;
  --card: #FFFFFF;
  --line: #E1E4DF;
  --outline: #15191A;
  --text: #15191A;
  --text-soft: #4A5350;
  --muted: #5A6360;
  --mint: #1D5B45;
  --mint-hover: #123D2E;
  /* The call to action: an ink pill that turns the brand green under the pointer (owner request: a different
     button color and styling). */
  --cta: #15191A;
  --cta-hover: #1D5B45;
  --on-cta: #FFFFFF;
  --cta-shadow: 0 10px 24px rgba(21, 25, 26, 0.18);
  --icon-ground: #E4EEE9;
  --brand: #1D5B45;
  --brand-deep: #123D2E;
  --on-brand: #FFFFFF;
  --on-brand-soft: #CFE3DA;

  /* The pictured app screens: the app's light theme */
  --app-ground: #F4F5F2;
  --app-surface: #FFFFFF;
  --app-line: #E1E4DF;
  --app-ink: #15191A;
  --app-ink-soft: #5A6360;
  --app-ink-note: #4A5350;
  --app-control: #868F8B;
  --app-thumb: #E6E9E4;
  --app-primary-soft: #E4EEE9;
  --app-week-label: #CFE3DA;
  --app-unread: #A34E16;
  --app-toast-action: #BFE3D3;
  --app-bar-shadow: 0 1px 3px rgba(21, 25, 26, 0.06);

  /* Shadows on the light ground: the cards, and the pictured screens (the phone a little stronger) */
  --shadow-soft: 0 1px 3px rgba(21, 25, 26, 0.06), 0 8px 24px rgba(21, 25, 26, 0.06);
  --shadow-card: var(--shadow-soft);
  --shadow-phone: 0 20px 50px rgba(21, 25, 26, 0.14);
  --shadow-chip: var(--shadow-soft);
  --shadow-notice: var(--shadow-soft);

  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-brand: "Bricolage Grotesque", system-ui, sans-serif;

  --gutter: 24px;
  --section-gap: 96px;
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --section-gap: 64px;
  }
}

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

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

html {
  background: var(--ground);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
}

a {
  color: var(--mint);
}

a:hover {
  color: var(--mint-hover);
}

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

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

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.accent {
  color: var(--mint);
}

/* ------------------------------------------------------------------------------------------------------------
   Logo: the tile, then the wordmark in Bricolage Grotesque 600 (design/brand/README.md)
   ------------------------------------------------------------------------------------------------------------ */

.tile {
  display: block;
  flex: none;
}

.logo {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
}

.logo:hover {
  color: var(--text);
}

.wordmark {
  font-family: var(--font-brand);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------------------------------------------ */

.cta {
  min-height: 64px;
  padding: 0 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--cta);
  color: var(--on-cta);
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--cta-shadow);
}

.cta:hover {
  background: var(--cta-hover);
  color: var(--on-cta);
}

.cta svg {
  flex: none;
}

/*
  The logo's four windows at the button's start (owner request: "the 4 dots from the logo icon ... with the lights
  turning on and off"). At rest they are the logo's: three dim, the bottom-right one lit. Each window flicks on and
  off on its own beat, quick and uneven so it never reads as a loading spinner; the arrow nudges forward and back at
  an easy pace. Under reduced motion both hold still.
*/
.cta-windows {
  display: grid;
  grid-template-columns: repeat(2, 6px);
  gap: 2px;
  flex: none;
}

.cta-windows span {
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: var(--on-cta);
  opacity: 0.45;
}

.cta-windows span:nth-child(1) {
  animation: cta-window 1.2s linear infinite;
}

.cta-windows span:nth-child(2) {
  animation: cta-window 1.5s linear 0.3s infinite;
}

.cta-windows span:nth-child(3) {
  animation: cta-window 1s linear 0.6s infinite;
}

.cta-windows span:nth-child(4) {
  opacity: 1;
  animation: cta-window 1.8s linear 0.1s infinite;
}

.cta-arrow {
  animation: cta-nudge 1.6s ease-in-out infinite;
}

@keyframes cta-window {
  0% {
    opacity: 0.45;
  }

  12%,
  55% {
    opacity: 1;
  }

  67%,
  100% {
    opacity: 0.45;
  }
}

@keyframes cta-nudge {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-windows span,
  .cta-arrow {
    animation: none;
  }
}

.pill {
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--outline);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.pill:hover {
  background: var(--card);
  color: var(--text);
}

.pill-large {
  min-height: 64px;
  padding: 0 28px;
  font-size: 17px;
}

/* ------------------------------------------------------------------------------------------------------------
   Header and footer, shared by every page
   ------------------------------------------------------------------------------------------------------------ */

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

.site-footer {
  padding-top: 24px;
  padding-bottom: 40px;
  /* White to the window's edges, wider than the 1200px column it sits in, with the line along its top. */
  border-image: linear-gradient(var(--line) 0 1px, var(--card) 1px) fill 0 / 0 / 0 100vmax;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  color: var(--muted);
  font-size: 15px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.footer-logo .wordmark {
  font-size: 17px;
}

.footer-tagline {
  flex: 1 1 auto;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
}

.footer-links a {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* ------------------------------------------------------------------------------------------------------------
   Homepage sections
   ------------------------------------------------------------------------------------------------------------ */

.section {
  padding-bottom: var(--section-gap);
}

.section-title {
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.section-lead {
  font-size: 18px;
  color: var(--text-soft);
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  border-radius: 28px;
  padding: 48px;
}

@media (max-width: 640px) {
  .panel {
    padding: 32px 20px;
  }
}

/* Hero */

.hero {
  padding-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}

.hero-copy {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mint);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eyebrow-mark {
  display: inline-grid;
  grid-template-columns: repeat(2, 6px);
  gap: 2px;
  flex: none;
}

.eyebrow-mark span {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--mint);
  opacity: 0.35;
}

.eyebrow-mark span:last-child {
  opacity: 1;
}

.hero h1 {
  font-size: clamp(42px, 5.4vw, 68px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero-sub {
  max-width: 520px;
  color: var(--text-soft);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

.hero-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.hero-note {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 640px) {
  .hero {
    padding-top: 16px;
    gap: 48px;
  }

  .hero-sub {
    font-size: 18px;
  }
}

/* Hero picture: the fanned app screens with the two of you on them */

.hero-visual {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  justify-content: center;
  container-type: inline-size;
}

.stage {
  position: relative;
  width: min(100%, 540px);
  height: 560px;
}

.app-card {
  position: absolute;
  top: 96px;
  width: 210px;
  padding: 14px;
  border-radius: 24px;
  background: var(--app-ground);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--app-ink);
}

.app-card-left {
  left: 0;
  transform: rotate(-7deg);
}

.app-card-right {
  right: 0;
  transform: rotate(7deg);
}

.app-label {
  color: var(--app-ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-list {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}

.app-row {
  min-height: 44px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-row + .app-row {
  border-top: 1px solid var(--app-line);
}

.app-row-split {
  justify-content: space-between;
}

.app-row-tall {
  min-height: 52px;
}

.app-row-task {
  min-height: 48px;
}

.app-row-new {
  background: var(--app-primary-soft);
  border-radius: 0 0 14px 14px;
}

.app-two-lines {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.app-grow {
  flex: 1;
  min-width: 0;
}

.app-name {
  font-size: 13px;
  font-weight: 600;
}

.app-small {
  color: var(--app-ink-soft);
  font-size: 10px;
}

.app-amount {
  font-size: 13px;
  font-weight: 700;
}

.app-thumb {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 8px;
  background: var(--app-thumb);
}

.app-choose {
  min-height: 36px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.app-phone {
  position: absolute;
  left: 50%;
  top: 48px;
  z-index: 2;
  width: 260px;
  margin-left: -130px;
  overflow: hidden;
  border-radius: 32px;
  background: var(--app-ground);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-phone);
  color: var(--app-ink);
  line-height: 1.4;
}

.app-bar {
  height: 48px;
  padding: 0 14px;
  background: var(--app-surface);
  box-shadow: var(--app-bar-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-bar-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 600;
}

.app-body {
  padding: 14px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app-title {
  font-family: var(--font-brand);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.app-week {
  padding: 10px 6px 8px;
  border-radius: 14px;
  background: var(--brand);
  color: var(--on-brand);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  text-align: center;
}

.app-day {
  padding: 3px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.app-day-away {
  border-radius: 7px;
  background: var(--brand-deep);
}

.app-day-label {
  color: var(--app-week-label);
  font-size: 10px;
}

.app-day-date {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.app-day-today {
  width: 22px;
  border-radius: 50%;
  background: var(--app-surface);
  color: var(--brand);
}

.app-week-note {
  padding: 0 4px;
  color: var(--app-primary-soft);
  font-size: 11px;
}

.app-check {
  width: 16px;
  height: 16px;
  flex: none;
  border: 1.5px solid var(--app-control);
  border-radius: 5px;
}

.app-task {
  font-size: 14px;
  font-weight: 600;
}

.app-task-new {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}

.app-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--app-unread);
}

.app-task-note {
  color: var(--app-ink-soft);
  font-size: 11px;
}

.app-avatar {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

.app-avatar-a {
  background: var(--app-ink);
  color: var(--on-brand);
}

.app-avatar-s {
  background: var(--app-primary-soft);
  color: var(--brand);
}

.app-bar .app-avatar {
  width: 26px;
  height: 26px;
}

.person {
  position: absolute;
  z-index: 3;
  min-height: 40px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  background: var(--app-surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-chip);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--app-ink);
  font-size: 14px;
  font-weight: 700;
}

.person .app-avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.person-alex {
  left: 24px;
  top: 16px;
}

.person-sam {
  right: 24px;
  top: 40px;
}

.notice {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 3;
  width: min(300px, 100%);
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--app-surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-notice);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--app-ink);
  transform: translateX(-50%);
}

.notice-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.notice-title {
  font-size: 15px;
  font-weight: 800;
}

.notice-when {
  color: var(--app-ink-soft);
  font-size: 13px;
}

/* On a phone the picture is narrower than the design's 540px: the people sit above the front screen. */
@container (max-width: 539px) {
  .stage {
    height: 512px;
  }

  .app-phone {
    top: 60px;
  }

  .app-card {
    top: 124px;
  }

  .person-alex {
    left: 0;
    top: 0;
  }

  .person-sam {
    right: 0;
    top: 16px;
  }

  .notice {
    bottom: 0;
  }
}

/* The moment */

.moment {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px 64px;
}

.moment h2 {
  flex: 1 1 340px;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.moment-lines {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text-soft);
  font-size: 19px;
  font-weight: 500;
}

.moment-lines .moment-answer {
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 640px) {
  .moment-lines {
    font-size: 18px;
  }
}

/* How it works */

.how {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px;
}

.step {
  padding: 24px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  border-radius: 28px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step-screen {
  height: 220px;
  padding: 20px;
  border-radius: 20px;
  background: var(--app-ground);
  color: var(--app-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.step-lockup {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-brand);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.app-field {
  min-height: 44px;
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid var(--app-control);
  border-radius: 12px;
  background: var(--app-surface);
  display: flex;
  align-items: center;
  font-size: 15px;
  white-space: nowrap;
}

.app-button {
  min-height: 44px;
  border-radius: 12px;
  background: var(--brand);
  color: var(--on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}

.step-screen .app-label {
  font-size: 11px;
}

.app-hint {
  color: var(--app-ink-note);
  font-size: 12px;
}

.app-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.app-kind {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-surface);
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
}

.app-kind-on {
  border-color: var(--app-ink);
  background: var(--app-ink);
  color: var(--on-brand);
}

.app-toast {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--app-ink);
  color: var(--on-brand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.app-toast-actions {
  display: flex;
  gap: 12px;
  color: var(--app-toast-action);
  font-weight: 700;
}

.step-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.step h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
}

.step-number {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--icon-ground);
  color: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.step-text p {
  color: var(--text-soft);
  font-size: 16px;
}

/* Made for running a home together */

.made {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
}

.made-intro {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.made-intro .cta {
  align-self: flex-start;
  margin-top: 8px;
}

.features {
  flex: 2 1 560px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 32px 40px;
}

.feature {
  display: flex;
  gap: 16px;
}

.feature-icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  background: var(--icon-ground);
  color: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feature h3 {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.feature p {
  color: var(--text-soft);
  font-size: 16px;
}

/* Help at home */

.help {
  padding: 48px;
  border-radius: 28px;
  background: var(--brand);
  color: var(--on-brand);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 64px;
}

.help-intro {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.help h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.help-intro p {
  color: var(--on-brand-soft);
  font-size: 18px;
}

.help-points {
  flex: 1 1 380px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.help-points li {
  padding: 14px 20px;
  border-radius: 16px;
  background: var(--brand-deep);
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .help {
    padding: 32px 20px;
  }
}

/* Questions */

.faq {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 64px;
}

.faq h2 {
  flex: 1 1 280px;
}

.faq-list {
  flex: 2 1 560px;
  min-width: 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  min-height: 64px;
  padding-block: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary svg {
  flex: none;
  transition: transform 160ms ease;
}

.faq-list details[open] summary svg {
  transform: rotate(180deg);
}

.faq-list details p {
  margin: 0 0 24px;
  color: var(--text-soft);
  font-size: 17px;
}

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

/* Final call to action */

.closing {
  padding: 72px 32px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  border-radius: 32px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.closing h2 {
  max-width: 760px;
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.closing-lead {
  max-width: 560px;
  color: var(--text-soft);
  font-size: 18px;
}

.closing-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.closing-contact {
  color: var(--muted);
  font-size: 15px;
}

.section-last {
  padding-bottom: 64px;
}

@media (max-width: 640px) {
  .closing {
    padding: 48px 20px;
  }

  .section-last {
    padding-bottom: 48px;
  }
}

/* ------------------------------------------------------------------------------------------------------------
   Privacy policy and terms of service
   ------------------------------------------------------------------------------------------------------------ */

.legal {
  padding-top: 40px;
  padding-bottom: var(--section-gap);
}

.legal-body {
  max-width: 68ch;
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.7;
}

.legal-body h1 {
  color: var(--text);
  font-size: clamp(36px, 4.6vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.legal-date {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
}

.legal-intro {
  margin-top: 24px;
  color: var(--text);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
}

.legal-body h2 {
  margin: 48px 0 12px;
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  scroll-margin-top: 24px;
}

.legal-body h3 {
  margin: 28px 0 8px;
  color: var(--text);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}

.legal-body p,
.legal-body ul {
  margin: 0 0 16px;
}

.legal-body ul {
  padding-left: 1.4em;
}

.legal-body li {
  margin-bottom: 8px;
}

.legal-body strong {
  color: var(--text);
  font-weight: 700;
}

.legal-body a {
  overflow-wrap: anywhere;
}

.legal-body code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

.legal-contents {
  margin-top: 32px;
  padding: 20px 28px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  border-radius: 20px;
  background: var(--card);
}

/* After the body's own headings and lists, which these replace inside the contents card. */
.legal-body .legal-contents h2 {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
}

.legal-contents ol {
  margin: 0;
  padding-left: 1.6em;
}

.legal-body .legal-contents li {
  margin: 0;
  break-inside: avoid;
}

.legal-contents a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--text);
  line-height: 1.3;
  text-decoration: none;
}

.legal-contents a:hover {
  color: var(--mint);
  text-decoration: underline;
}

@media (min-width: 720px) {
  .legal-contents ol {
    columns: 2;
    column-gap: 40px;
  }
}

@media (max-width: 640px) {
  .legal {
    padding-top: 16px;
  }

  .legal-contents {
    padding: 20px;
  }
}