/* The homepage and /for-advocacy-groups/: live's stylesheet (gatherchart.com's
   app/(marketing)/landing.css) without the rules nothing on these pages uses,
   so the pages render as live's do. */

:root {
  --bg: #fbf8f1;
  --paper: transparent;
  --line: rgba(39, 48, 80, 0.1);
  --text: #263154;
  --muted: #56607a;
  --accent: #cf7b5e;
  --accent-deep: #b8654d;
  --gold: #ebcc7a;
  --rose: #ddb1b9;
  --shadow: none;
  --radius: 24px;
  /* Values from the homepage board (Paper, "Ideal ember"). */
  --cream-muted: rgba(251, 248, 241, 0.72);
  --field-line: rgba(39, 48, 80, 0.14);
  --card-line: rgba(39, 48, 80, 0.12);
  --placeholder: #8a90a3;
  --error: #9e3d22;
  --tint-rose: #f3e3e2;
  --tint-sand: #f6e7bf;
  --tint-mist: #e3e7f0;
  --bubble: #f1ece1;
  /* Avenir Next is on every Apple device and is never downloaded; elsewhere
     the system face stands in. */
  --font: "Avenir Next", "Avenir", system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
  /* Only for the text-message illustration in the hero, which the board sets
     in the phone's own face. */
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
  /* Sentinel: landing.js only reveals the collapsible header once it can read this,
     which proves this stylesheet (not a cached older one) is live. */
  --nav-ready: 1;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

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

/* One visible focus ring for everything a keyboard can reach. */
:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

/* -------------------------------------------------- */
/* Layout                                              */
/* -------------------------------------------------- */

.page-shell {
  position: relative;
  overflow: clip;
}

.site-header,
.section,
.site-footer {
  width: min(1080px, calc(100% - 40px));
  margin-inline: auto;
}

.section {
  padding: 80px 0;
}

section {
  scroll-margin-top: 160px;
}

/* -------------------------------------------------- */
/* Header                                              */
/* -------------------------------------------------- */

.site-header {
  position: sticky;
  top: 14px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 14px;
  padding: 12px 12px 12px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.site-header--entering,
.site-header--hidden {
  transform: translateY(calc(-100% - 30px));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand__mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
}

.brand__text {
  color: #000;
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
}

/* Pushed right so the links sit with the account actions, as one group. */
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  color: var(--muted);
  font-size: 15px;
  line-height: 18px;
}

.site-nav a:hover {
  color: var(--text);
}

/* Collapsible header. Below 1024px the pill itself becomes the control: the
   brand link is swapped for this button and the nav expands underneath it.
   These elements ship with the `hidden` attribute and are only revealed by
   landing.js, so a stale stylesheet can never render them unstyled. */
.brand-toggle,
.site-nav__home {
  display: none;
}

.brand-toggle {
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.brand-toggle__caret {
  flex: none;
  width: 10px;
  height: 10px;
  margin-left: auto;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  color: var(--muted);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 200ms ease, color 200ms ease;
}

.site-header--menu-open .brand-toggle__caret {
  color: var(--accent);
  transform: translateY(2px) rotate(-135deg);
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.98rem;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button--primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: #fff;
  box-shadow: 0 12px 28px rgba(184, 101, 77, 0.2);
}

/* -------------------------------------------------- */
/* Typography                                          */
/* -------------------------------------------------- */

.eyebrow {
  margin: 0;
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 16px;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

h1 {
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
}

h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
}

h3 {
  font-size: 1.25rem;
  line-height: 1.15;
}

.section__lead {
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 52ch;
  line-height: 1.65;
}

/* The homepage's section headings: "How Gather Works", "Flares happen at
   home…". */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section-title {
  color: var(--text);
  font-size: 48px;
  line-height: 54px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* -------------------------------------------------- */
/* Get started                                         */
/* -------------------------------------------------- */

/* The hero's call to action, reused as the final one: one terracotta pill,
   "Get started free" (Tanya's revision, 2026-10-09 — no field, no checkbox). */
.get-started {
  display: flex;
}

.get-started__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 34px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.get-started__button:hover {
  background: var(--accent-deep);
  color: #fff;
}

.get-started__button:focus-visible {
  outline-color: var(--text);
}

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

/* The header's own 14px drop overlaps the board's 112px top padding, so the
   section starts 14px later and pads that much less. */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  padding: 98px 0 96px;
}

.hero__copy {
  display: flex;
  flex: 0 1 580px;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* Balanced, so where a sentence can't keep its own line (a narrow phone, a
   wider fallback face) it splits evenly rather than leaving one word behind. */
.hero__title {
  color: var(--text);
  font-size: 56px;
  line-height: 61px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero__lead {
  margin: 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 31px;
  text-wrap: pretty;
}

.hero .get-started {
  margin-top: 8px;
}

/* The text-message illustration: a white card, tilted a touch. `rotate` rather
   than `transform` so it composes with anything else that moves the card. */
.hero-chat {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 12px;
  width: 360px;
  margin: 0;
  padding: 22px 18px 26px;
  border: 1px solid var(--card-line);
  border-radius: 44px;
  background: #fff;
  font-family: var(--font-system);
  rotate: 2deg;
}

.hero-chat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px 12px;
  border-bottom: 1px solid rgba(39, 48, 80, 0.08);
}

.hero-chat__avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  object-fit: contain;
}

.hero-chat__who {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.hero-chat__who strong {
  color: #000;
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
}

.hero-chat__who span {
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
}

.bubble {
  margin: 0;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 21px;
}

.bubble--in {
  align-self: flex-start;
  max-width: 255px;
  border-radius: 18px 18px 18px 6px;
  background: var(--bubble);
  color: #000;
}

.bubble--out {
  align-self: flex-end;
  max-width: 240px;
  border-radius: 18px 18px 6px 18px;
  background: var(--text);
  color: var(--bg);
}

.bubble--wide {
  max-width: 265px;
}

.bubble--short {
  line-height: 18px;
}

/* -------------------------------------------------- */
/* The $20 band                                        */
/* -------------------------------------------------- */

.reward {
  padding: 0;
}

.reward__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  padding: 56px 64px;
  border-radius: 32px;
  background: var(--text);
  color: var(--bg);
}

.reward__offer {
  display: flex;
  flex: 0 0 380px;
  flex-direction: column;
  gap: 12px;
}

.reward__title {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--bg);
  font-size: 26px;
  line-height: 34px;
  letter-spacing: 0;
}

.reward__amount {
  color: var(--gold);
  font-size: 96px;
  font-weight: 700;
  line-height: 96px;
  letter-spacing: -0.03em;
}

.reward__note {
  margin: 0;
  color: var(--cream-muted);
  font-size: 15px;
  line-height: 23px;
}

.reward__steps {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reward__step {
  display: flex;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(251, 248, 241, 0.14);
}

.reward__step:last-child {
  border-bottom: 0;
}

.reward__number {
  flex: none;
  width: 28px;
  color: var(--gold);
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
}

.reward__step-title {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}

.reward__step-detail {
  display: block;
  margin-top: 2px;
  color: var(--cream-muted);
  font-size: 15px;
  line-height: 18px;
}

/* -------------------------------------------------- */
/* How it works                                        */
/* -------------------------------------------------- */

/* Big enough top padding of its own that an in-page jump needs no extra
   clearance for the header. */
.how {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding: 120px 0 0;
  scroll-margin-top: 0;
}

.how__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.how__step {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* A tinted card with the phone capture rising out of its lower edge: the
   capture is taller than the card and the card crops it. */
.how__visual {
  display: flex;
  justify-content: center;
  height: 440px;
  padding-top: 28px;
  border-radius: 28px;
  overflow: hidden;
}

.how__visual--rose {
  background: var(--tint-rose);
}

.how__visual--sand {
  background: var(--tint-sand);
}

.how__visual--mist {
  background: var(--tint-mist);
}

/* One footprint whether the capture has arrived or not; the ratio matches the
   480×976 captures, so nothing moves when one starts playing. */
.how__video {
  display: block;
  flex: none;
  width: 236px;
  height: 480px;
  border-radius: 28px 28px 0 0;
  background: rgba(255, 255, 255, 0.55);
  object-fit: cover;
  object-position: center top;
}

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

.how__title {
  color: var(--text);
  font-size: 22px;
  line-height: 29px;
  letter-spacing: 0;
}

.how__body {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 25px;
}

/* -------------------------------------------------- */
/* What you get                                        */
/* -------------------------------------------------- */

.props {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 120px 0 40px;
  scroll-margin-top: 0;
}

.props__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 64px;
}

.props__title {
  flex: 0 1 560px;
}

.props__lead {
  flex: 0 1 400px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 27px;
}

.props__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prop {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 2px solid var(--text);
}

.prop__tag {
  margin: 0;
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 16px;
  text-transform: uppercase;
}

.prop__title {
  color: #000;
  font-size: 22px;
  line-height: 29px;
  letter-spacing: 0;
}

.prop__body {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 25px;
}

/* -------------------------------------------------- */
/* Patient voices                                      */
/* -------------------------------------------------- */

.voices {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 80px 0;
}

/* One large quote beside a column of two. The large one grows 1.4× as fast
   from a zero basis, which with its padding lands on the board's 649/407
   split at full width. */
.voices__grid {
  display: flex;
  gap: 24px;
}

.voices__side {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 24px;
}

.quote {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--card-line);
  border-radius: 28px;
}

.quote--lead {
  flex: 1.4 1 0%;
  gap: 32px;
  padding: 40px;
  border: 0;
  background: var(--tint-rose);
}

.quote__text {
  margin: 0;
  color: var(--text);
  font-size: 19px;
  font-weight: 500;
  line-height: 27px;
}

.quote__text p {
  margin: 0;
}

.quote--lead .quote__text {
  font-size: 32px;
  font-weight: 600;
  line-height: 41px;
  letter-spacing: -0.01em;
}

.quote__who {
  color: var(--muted);
  font-size: 14px;
  line-height: 18px;
}

/* -------------------------------------------------- */
/* Final call to action                                */
/* -------------------------------------------------- */

.final {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 48px 0 96px;
  scroll-margin-top: 56px;
}

.final__title {
  max-width: 760px;
  color: var(--text);
  font-size: 56px;
  line-height: 60px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.final__lead {
  max-width: 600px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 28px;
}

/* -------------------------------------------------- */
/* Organizations                                       */
/* -------------------------------------------------- */

.section--org {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.org__image {
  width: min(600px, 100%);
  margin-inline: auto;
}

.org__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 680px;
}

.org__copy h2 {
  line-height: 1.05;
}

.email-copy {
  position: relative;
  display: inline-block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.92rem;
}

.email-copy__address {
  -webkit-user-select: all;
  user-select: all;
}

.email-copy__btn {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 160ms ease;
}

.email-copy:hover .email-copy__btn,
.email-copy__btn:focus-visible {
  opacity: 1;
}

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

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 28px 0 40px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 18px;
}

.footer__info {
  margin: 0;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer__links a {
  color: var(--muted);
  transition: color 160ms ease;
}

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

/* -------------------------------------------------- */
/* Reveal animations                                   */
/* -------------------------------------------------- */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}

html.js img[data-reveal] {
  transition: opacity 2.4s ease, transform 2.4s ease;
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------- */
/* Responsive                                          */
/* -------------------------------------------------- */

/* The board is desktop-only (1440 wide). Below it, in order: the type steps
   down a size, the two-up rows stack, then on a phone the gutters close to
   16px and the hero form stacks its button under the field. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .button,
  .get-started__button {
    transition: none;
  }
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .site-header {
    transition: none;
  }
  .brand-toggle__caret {
    transition: none;
  }
}

/* Below 1024px the header collapses: tapping the pill expands it into a card
   with the nav stacked underneath. This is the only breakpoint touching it. */
@media (max-width: 1023px) {
  /* Root cause of the old overlap: .brand was allowed to shrink below its own
     content width while the nav links would not shrink, so the nowrap wordmark
     spilled out of its box and painted over them. */
  .brand,
  .brand-toggle {
    flex: 0 1 auto;
    min-width: 0;
  }

  .brand__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-js .site-header {
    flex-wrap: wrap;
    row-gap: 4px;
    padding-right: 20px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s ease, border-radius 200ms ease;
  }

  .nav-js .brand {
    display: none;
  }

  .nav-js .brand-toggle {
    display: flex;
    flex: 1;
  }

  .nav-js .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-left: 0;
    padding: 4px 0 6px;
    font-size: 0.95rem;
  }

  .nav-js .site-header--menu-open {
    border-radius: var(--radius);
  }

  .nav-js .site-header--menu-open .site-nav {
    display: flex;
  }

  .nav-js .site-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 12px;
    color: var(--text);
  }

  .nav-js .site-nav a:hover,
  .nav-js .site-nav a:focus-visible {
    background: var(--line);
  }

  .nav-js .site-nav__home {
    display: flex;
  }

  /* Without JS the pill never becomes a control, so let the links wrap onto
     their own line instead — still no overlap. */
  html:not(.nav-js) .site-header {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: var(--radius);
  }

  html:not(.nav-js) .site-nav {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }
}

/* The board's sizes need its full 1080px column; a step down until then. */
@media (max-width: 1119px) {
  .hero {
    gap: 48px;
  }

  .hero__title,
  .final__title {
    font-size: 48px;
    line-height: 53px;
  }

  .section-title {
    font-size: 42px;
    line-height: 48px;
  }

  .reward__band {
    gap: 40px;
    padding: 48px;
  }
}

/* Two-up rows stack; the three-up grids go to two columns or to rows. */
@media (max-width: 960px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    gap: 56px;
    padding: 56px 0 72px;
  }

  /* The board's own column width, so the lead keeps a readable measure. */
  .hero__copy {
    flex: none;
    max-width: 580px;
  }

  /* Tilted, it is wider than its own box; centred, the tilt stays inside the
     gutter. */
  .hero-chat {
    align-self: center;
    width: min(360px, 100% - 24px);
  }

  .reward__band {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 40px;
  }

  .reward__offer {
    flex: none;
  }

  /* Each step becomes a row: the capture on the left, its copy beside it. */
  .how {
    padding-top: 96px;
  }

  .how__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .how__step {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
  }

  .props {
    padding-top: 96px;
  }

  .props__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .props__title,
  .props__lead {
    flex: none;
  }

  .props__lead {
    max-width: 560px;
  }

  .props__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }

  /* No one-word last lines in the narrower columns. Not at full width, where
     the board's own line breaks stand. */
  .how__title,
  .prop__title,
  .reward__step-title {
    text-wrap: pretty;
  }

  .voices {
    padding: 64px 0;
  }

  .voices__grid {
    flex-direction: column;
  }

  .voices__side {
    flex-direction: row;
  }

  .quote--lead {
    flex: none;
  }
}

/* Phones: 16px gutters, one column throughout, the form's button under its
   field. */
@media (max-width: 600px) {
  .site-header,
  .section,
  .site-footer {
    width: calc(100% - 32px);
  }

  .hero {
    gap: 48px;
    padding: 40px 0 56px;
  }

  .hero__copy {
    gap: 20px;
  }

  /* Sized to the screen so each sentence keeps its own line down to a
     320px phone. */
  .hero__title,
  .final__title {
    font-size: clamp(28px, 8.6vw, 38px);
    line-height: 1.13;
  }

  .hero__lead {
    font-size: 18px;
    line-height: 28px;
  }

  .hero .get-started {
    margin-top: 4px;
  }

  .section-title {
    font-size: 32px;
    line-height: 38px;
  }

  .reward__band {
    padding: 32px 24px 16px;
    border-radius: 28px;
  }

  .reward__amount {
    font-size: 80px;
    line-height: 80px;
  }

  .reward__title {
    font-size: 22px;
    line-height: 30px;
  }

  .how {
    gap: 32px;
    padding-top: 80px;
  }

  .how__steps {
    gap: 48px;
  }

  .how__step {
    display: flex;
    align-items: stretch;
    gap: 20px;
  }

  .props {
    gap: 32px;
    padding: 80px 0 24px;
  }

  .props__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .voices {
    gap: 24px;
    padding: 56px 0;
  }

  .voices__side {
    flex-direction: column;
    gap: 16px;
  }

  .voices__grid {
    gap: 16px;
  }

  .quote,
  .quote--lead {
    flex: none;
    padding: 24px;
    border-radius: 24px;
  }

  .quote--lead .quote__text {
    font-size: 24px;
    line-height: 32px;
  }

  .final {
    padding: 24px 0 64px;
  }

  .site-footer {
    flex-direction: column;
    gap: 16px;
    padding-bottom: 32px;
  }

  .section--org {
    gap: 20px;
  }

  .org__image {
    width: min(440px, 80%);
  }
}

/* On a phone the call to action spans the column. */
@media (max-width: 560px) {
  .get-started__button {
    width: 100%;
    min-height: 56px;
  }
}

/* -------------------------------------------------- */
/* Account chrome                                      */
/* -------------------------------------------------- */

/* Right-hand end of the desktop pill: "Log in" and the dark Get started pill.
   Below 1024px the pill hides these and the same links appear as rows inside
   the collapsed nav instead (.site-nav__account). */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-shrink: 0;
}

.site-header__login {
  color: var(--muted);
  font-size: 15px;
  line-height: 18px;
  white-space: nowrap;
}

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

.site-header__start {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  transition: background-color 160ms ease;
}

.site-header__start:hover {
  background: #1b2440;
}

.site-nav__account {
  display: none;
}

@media (max-width: 1023px) {
  .site-header__actions {
    display: none;
  }

  .nav-js .site-nav__account {
    display: flex;
  }

  .nav-js .site-nav .site-nav__account--start {
    color: var(--accent-deep);
    font-weight: 700;
  }
}