@font-face{font-family:'Figtree';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/figtree-latin-ext-400-normal.woff2) format('woff2');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:'Figtree';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/figtree-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/figtree-latin-ext-500-normal.woff2) format('woff2');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:'Figtree';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/figtree-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/figtree-latin-ext-600-normal.woff2) format('woff2');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:'Figtree';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/figtree-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/figtree-latin-ext-700-normal.woff2) format('woff2');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:'Figtree';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/figtree-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-display:swap;font-weight:800;src:url(../fonts/figtree-latin-ext-800-normal.woff2) format('woff2');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:'Figtree';font-style:normal;font-display:swap;font-weight:800;src:url(../fonts/figtree-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* The marketing site (adjustmint.com; issue 102). Colors, spacing and radius come from the
   app's own tokens (tokens.generated.css, from Figma), light and dark by the system. The
   bands that keep one color in both themes use the primitives; everything else uses roles.
   Type sizes are the page's own: a marketing page is set larger than the app. */

:root {
  --site-max: 70rem;
  --site-gutter: var(--space-xl);
  /* The bands. */
  --band-deep: var(--color-slate-900);
  --band-deep-text: var(--color-slate-100);
  --band-deep-text-2: var(--color-slate-400);
  --band-mint: var(--color-surface-badge);
  --band-green: var(--color-green-800);
  --band-green-text: var(--color-slate-100);
  --band-green-text-2: var(--color-green-200);
  --mint: var(--color-green-400);
  /* The plan that stands out: slate in light, green in dark. */
  --plan-pro: var(--color-slate-900);
}

@media (prefers-color-scheme: dark) {
  :root {
    --plan-pro: var(--color-green-800);
  }
}

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

html,
body {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  font-family:
    Figtree,
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  body {
    background: var(--color-surface);
  }
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.band-hero :focus-visible,
.band-green :focus-visible,
.plan.pro :focus-visible {
  outline-color: var(--mint);
}

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

.skip {
  position: absolute;
  left: var(--space-lg);
  top: -10rem;
  z-index: 2;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  font-weight: 700;
}

.skip:focus {
  top: var(--space-lg);
}

.wrap {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--site-gutter);
}

.hero > *,
.split > *,
.story > *,
.nums > *,
.three > *,
.steps > *,
.plans > *,
.prom > * {
  min-width: 0;
}

/* The top bar. */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 4.25rem;
}

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

.nav nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  font-size: 0.9375rem;
  font-weight: 600;
}

.nav nav a {
  text-decoration: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  background: var(--color-surface-action);
  color: var(--color-text-inverse);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.btn.sm {
  min-height: 2.25rem;
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.875rem;
}

.btn.sec {
  border: 1px solid var(--color-border-control);
  background: none;
  color: var(--color-text-primary);
}

.lnk {
  color: var(--color-text-accent);
  font-weight: 700;
  text-decoration: none;
}

.lnk:hover,
.nav nav a:not(.btn):hover,
footer a:hover {
  text-decoration: underline;
}

.eyebrow {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2.375rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2.after-eyebrow {
  margin-top: var(--space-sm);
}

h3 {
  margin: 0;
  font-size: 1.25rem;
}

.lede {
  max-width: 34em;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
}

.lede--after {
  margin-top: var(--space-lg);
}

section {
  padding: 4.5rem 0;
}

section.flush {
  padding-top: 0;
}

/* The hero: a deep band in both themes. */
.band-hero {
  background: var(--band-deep);
  color: var(--band-deep-text);
}

.band-hero .lede {
  color: var(--band-deep-text-2);
}

.band-hero .btn {
  background: var(--mint);
  color: var(--band-deep);
}

.band-hero .lnk {
  color: var(--mint);
}

.band-hero h1 em {
  color: var(--mint);
  font-style: normal;
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 2.5rem;
  padding: 2.5rem 0 var(--space-4xl);
}

.hero .copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* During the alpha: one line under the buttons. */
.alpha-note {
  max-width: 34em;
  margin: 0;
  color: var(--band-deep-text-2);
  font-size: 0.9375rem;
}

.hero .ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xl);
  margin-top: var(--space-sm);
}

/* A phone around a picture of the real app. The picture's size is set in the page, so
   nothing moves when it arrives. */
.phone {
  width: 18.75rem;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-md);
  border-radius: 2.75rem;
  background: var(--color-black);
  box-shadow: 0 2.5rem 5rem -1.875rem var(--color-black);
}

.phone img {
  width: 100%;
  border-radius: 2.125rem;
}

/* The problem, in numbers. */
.band-mint {
  background: var(--band-mint);
}

.nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.num .k {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 700;
}

.num .v {
  margin-top: var(--space-xs);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.num .v small {
  font-size: 0.5em;
}

.num.go .v {
  color: var(--color-text-accent);
}

.math {
  margin: var(--space-lg) 0 0;
  color: var(--color-text-secondary);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* Cards and grids. */
.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

@media (prefers-color-scheme: dark) {
  .card,
  .plans .plan:not(.pro) {
    background: var(--color-surface-raised);
  }
}

.card .lab {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card p {
  margin: 0;
  color: var(--color-text-secondary);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-3xl);
}

.ticks {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-left: 1.75rem;
}

.ticks li::before {
  content: '';
  position: absolute;
  top: 0.4375rem;
  left: 0;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--radius-full);
  background: var(--color-text-accent);
}

/* The Road to payday card: a small drawing of the track, and the three bills. */
.card--runway {
  gap: var(--space-md);
}

.figure {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.figure small {
  font-size: 1.5rem;
}

.trk {
  position: relative;
  height: 1.375rem;
}

.trk::before {
  content: '';
  position: absolute;
  top: 0.5rem;
  right: 0;
  left: 0;
  height: 0.1875rem;
  border-radius: var(--radius-xs);
  background: var(--color-border-subtle);
}

.trk b {
  position: absolute;
  top: 0.5rem;
  left: 0;
  width: 10%;
  height: 0.1875rem;
  border-radius: var(--radius-xs);
  background: var(--mint);
}

.trk i {
  position: absolute;
  top: 0.125rem;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--color-text-secondary);
  border-radius: var(--radius-full);
  background: var(--color-surface-raised);
}

.trk .t1 {
  left: 10%;
}

.trk .t2 {
  left: 45%;
}

.trk .t3 {
  left: 78%;
}

.trk .p {
  left: calc(100% - 0.875rem);
  border-color: var(--mint);
  background: var(--mint);
}

.due {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.due > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
}

.due .when {
  color: var(--color-text-secondary);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.step {
  padding-top: var(--space-lg);
  border-top: 2px solid var(--color-text-primary);
}

.step .n {
  color: var(--color-text-accent);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.step p {
  margin: var(--space-xs) 0 0;
  color: var(--color-text-secondary);
}

/* Privacy: a green band in both themes. */
.band-green {
  background: var(--band-green);
  color: var(--band-green-text);
}

.band-green .eyebrow,
.band-green .prom p,
.band-green .lnk {
  color: var(--band-green-text-2);
}

.band-green .lnk {
  text-decoration: underline;
}

.prom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--color-green-700);
}

.prom div {
  padding: var(--space-xl) var(--space-xl) var(--space-xl) 0;
  border-bottom: 1px solid var(--color-green-700);
}

.prom div:nth-child(odd) {
  border-right: 1px solid var(--color-green-700);
}

.prom div:nth-child(even) {
  padding-left: var(--space-xl);
}

.prom p {
  margin: var(--space-xs) 0 0;
}

/* The story. */
.story {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: start;
  gap: 2.5rem;
}

.photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* The photo's own background is clear: it stands directly on the page, with no card and
     no rounded corners. */
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cap {
  margin-top: var(--space-sm);
  font-size: 0.9375rem;
  font-weight: 700;
}

.cap span {
  display: block;
  color: var(--color-text-secondary);
  font-weight: 400;
}

.story p {
  max-width: 34em;
  margin: var(--space-lg) 0 0;
  font-size: 1.375rem;
  line-height: 1.5;
}

/* Pricing. */
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  max-width: 51.25rem;
  margin-top: var(--space-2xl);
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.plan.pro {
  background: var(--plan-pro);
  color: var(--band-deep-text);
}

.plan .pr {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.plan .pr small {
  color: var(--color-text-secondary);
  font-size: 1rem;
  font-weight: 600;
}

.plan .yearly {
  font-size: 0.9375rem;
}

.plan ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 var(--space-lg);
  padding-left: var(--space-xl);
  color: var(--color-text-secondary);
}

.plan.pro ul,
.plan.pro .pr small {
  color: var(--color-slate-300);
}

.plan .btn {
  align-self: stretch;
  margin-top: auto;
}

.plan.pro .btn {
  background: var(--mint);
  color: var(--color-slate-900);
}

.tag2 {
  align-self: flex-start;
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-full);
  background: var(--mint);
  color: var(--color-slate-900);
  font-size: 0.75rem;
  font-weight: 700;
}

/* The pricing table (issue 138): a site-only piece, not part of Planchet. Plans are columns
   (name, price, yearly price and button in the header), features are rows in groups, and
   Pro's column is the dark plan color from top to bottom. Wide screens only: from the phone
   breakpoint down the same plans are cards, Pro first. Only one of the two shows. */
.ptable {
  width: 100%;
  margin-top: var(--space-2xl);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1rem;
}

.ptable th,
.ptable td {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: center;
}

.ptable th[scope='row'] {
  color: var(--color-text-primary);
  font-weight: 500;
  text-align: left;
}

.ptable thead th {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 0;
  text-align: left;
  vertical-align: bottom;
}

.ptable thead th:first-child {
  width: 40%;
}

.ptable .pn {
  font-size: 1.25rem;
  font-weight: 800;
}

.ptable .pr {
  margin-top: var(--space-xs);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ptable .pr small {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  font-weight: 600;
}

.ptable .yearly {
  min-height: 1.4em;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 400;
}

.ptable .btn {
  width: 100%;
  margin-top: var(--space-md);
}

.ptable .tag2 {
  display: block;
  width: fit-content;
  margin-bottom: var(--space-sm);
}

.ptable .col-pro {
  background: var(--plan-pro);
  color: var(--band-deep-text);
}

.ptable thead .col-pro {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.ptable tbody tr:last-child .col-pro {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.ptable .col-pro .pr small,
.ptable .col-pro .yearly {
  color: var(--color-slate-300);
}

.ptable .col-pro .btn {
  background: var(--mint);
  color: var(--color-slate-900);
}

.ptable td.col-pro {
  border-bottom-color: color-mix(in srgb, var(--band-deep-text) 12%, transparent);
}

.ptable tr.grp td.col-pro {
  border-bottom-color: transparent;
}

.ptable .ck {
  color: var(--color-text-accent);
  font-size: 1.125rem;
  font-weight: 800;
}

.ptable .ck.col-pro {
  color: var(--mint);
}

.ptable .no {
  color: var(--color-text-secondary);
}

.ptable .tx {
  font-size: 0.9375rem;
}

.ptable tr.grp th {
  padding-top: var(--space-xl);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}

.ptable .col-pro :focus-visible {
  outline-color: var(--mint);
}

/* Phones: the plans as cards, one under another, each saying what it adds. */
.pricing-cards {
  display: none;
}

.plans--cards {
  grid-template-columns: 1fr;
  max-width: none;
}

.plan .one {
  margin: var(--space-xs) 0 0;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

.plan.pro .one {
  color: var(--color-slate-300);
}

@media (max-width: 51.25rem) {
  .ptable-wrap {
    display: none;
  }

  .pricing-cards {
    display: block;
  }
}

.trial {
  margin: var(--space-lg) 0 0;
  color: var(--color-text-secondary);
}

/* Questions: each opens in place. */
.faq {
  max-width: 47.5rem;
  margin-top: var(--space-xl);
}

.faq details {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: '+';
  color: var(--color-text-secondary);
}

.faq details[open] summary::after {
  content: '−';
}

.faq p {
  margin: var(--space-sm) 0 0;
  color: var(--color-text-secondary);
}

/* The 404 page (404.html): what happened, and two ways on. */
.notfound {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  min-height: 40vh;
  justify-content: center;
}

.notfound h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.12;
}

.notfound .ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
}

footer {
  padding: var(--space-2xl) 0 var(--space-3xl);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-lg);
}

footer .wrap > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  min-width: 0;
}

@media (max-width: 51.25rem) {
  :root {
    --site-gutter: var(--space-lg);
  }

  .hero,
  .split,
  .story {
    grid-template-columns: 1fr;
  }

  .nums,
  .three,
  .steps,
  .plans,
  .prom {
    grid-template-columns: 1fr;
  }

  .prom div:nth-child(odd) {
    border-right: 0;
  }

  .prom div:nth-child(even) {
    padding-left: 0;
  }

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

  section {
    padding: 3.25rem 0;
  }

  .photo {
    width: 11.25rem;
    aspect-ratio: 4 / 5;
  }

  .story p {
    font-size: 1.1875rem;
  }
}

/* "Request an invite": a dialog on wide screens, a bottom sheet on phones (site/invite.html). */
.invite {
  width: min(40rem, calc(100% - 2 * var(--space-lg)));
  max-height: calc(100% - 2 * var(--space-xl));
  overflow: auto;
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-float);
  color: var(--color-text-primary);
}

.invite::backdrop {
  background: var(--color-surface-scrim);
}

/* The page stays where it is while the panel is open (issue 115): nothing behind it scrolls,
   and scrolling inside the sheet stops at its ends. */
:root:has(.invite[open]) {
  overflow: hidden;
}

.invite {
  overscroll-behavior: contain;
}

.invite__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--color-border-subtle);
}

.invite__head h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.invite__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: calc(-1 * var(--space-sm));
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.invite__close svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.invite__close:hover {
  background: var(--color-surface-tertiary-hover);
}

.invite__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

.invite__body p {
  margin: 0;
}

/* The form: labels above fields, errors in words under them (as in the app's forms). Compact,
   so the offer above it and every field fit a wide screen without scrolling. */
.invite__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* What testers get and what we ask, above the fields. */
.invite__offer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.invite__offer h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.0625rem;
  line-height: 1.3;
}

.invite__offer ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding-left: 1.25em;
}

.invite__offer strong {
  color: var(--color-text-primary);
}

.invite__offer a {
  color: var(--color-text-accent);
  font-weight: 700;
}

/* Name and Email side by side where there is room. */
.invite__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* Sent: the thanks, then Done, which closes the panel. */
.invite__done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  color: var(--color-text-primary);
  font-size: 1.0625rem;
}

.invite__done[hidden] {
  display: none;
}

.invite__finish {
  min-width: 8rem;
  min-height: 3rem;
  border: 0;
  cursor: pointer;
}

.invite .field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.invite .field label,
.invite .field legend {
  padding: 0;
  font-weight: 600;
}

.field__optional {
  margin-left: var(--space-xs);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 400;
}

.invite input:not([type='radio']),
.invite textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  font: inherit;
}

.invite textarea {
  resize: vertical;
}

.invite input[aria-invalid='true'],
.invite textarea[aria-invalid='true'] {
  border-color: var(--color-border-error);
}

.field__error {
  margin: 0;
  color: var(--color-text-error);
  font-size: 0.875rem;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
}

.invite .choices label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.75rem;
  font-weight: 400;
}

.choices input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--color-surface-accent);
}

/* Turnstile's widget, when it shows anything (often nothing: it passes on its own). */
.invite__check:empty {
  display: none;
}

.invite__failed {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-surface-error);
  color: var(--color-text-error);
}

.invite__failed p {
  margin: 0;
}

.invite__failed[hidden],
.invite__form[hidden] {
  display: none;
}

/* Turnstile's box and the button: side by side where there is room, the button filling the
   rest of the row; stacked on phones. */
.invite__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.invite__submit {
  flex: 1 1 12rem;
  min-height: 3rem;
}

/* Buttons take the page's type, as links do. */
.invite button {
  font-family: inherit;
}

.invite__small {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}

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

/* Phones: a bottom sheet, the full width, with the buttons stacked. */
@media (max-width: 40rem) {
  .invite {
    width: 100%;
    margin: auto 0 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .invite {
    max-height: calc(100% - var(--space-xl));
  }

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