/*
 * TenMinuteMe: one stylesheet, phone first, then wider screens at 720px and 960px. No CSS nesting, so the older
 * in-app browsers ads open the page in read it too. The direction and its reasons: docs/design.md.
 *
 * Every text colour passes WCAG AA on every background here: ink, muted, spruce, clay and sage on linen, white, sand
 * and the three soft tints; white on spruce. Control outlines (--control) keep 3:1 on white and linen.
 */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-display: swap;
  font-weight: 400 600;
  src: url("/assets/newsreader-latin-opsz40-wght400-600-86304359.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/assets/inter-latin-wght400-700-cfafe47d.woff2") format("woff2");
}

:root {
  --linen: #f6f2ec;
  --sand: #ede6dc;
  --white: #fff;
  --ink: #1c2a28;
  --muted: #55615e;
  --line: #e1d9ce;
  --control: #7d8784;
  --spruce: #1f4b43;
  --spruce-dark: #163a34;
  --spruce-soft: #e4ede9;
  --clay: #9e4c2c;
  --clay-soft: #f5e6de;
  --sage: #3b6250;
  --sage-soft: #e5ede6;

  --serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 20px;
  --radius-small: 14px;
  --shadow: 0 1px 2px rgb(28 42 40 / 0.05), 0 10px 28px -18px rgb(28 42 40 / 0.22);
  --gutter: 20px;
  --section: 48px;
  /* The site header's height with its hairline, and the room above and below a page's text (about, privacy...). */
  --header: 61px;
  --page: 64px;
}

@media (min-width: 720px) {
  :root {
    --gutter: 32px;
    --section: 96px;
    --header: 73px;
    --page: 112px;
  }
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
fieldset {
  margin: 0;
}

fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
}

/* Hidden means hidden, whatever display a class gives it (the parts quiz_controller.js picks). */
[hidden] {
  display: none !important;
}

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

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

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

.icon {
  flex: none;
  width: 24px;
  height: 24px;
}

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

.container--narrow {
  max-width: 800px;
}

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* Type: body 16px; headings in the serif, about 30px for the hero, 24 to 26px for a page or section on a phone, and
   larger on wider screens (docs/design.md). */

.display,
.title,
.section__title {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.display {
  font-size: clamp(1.875rem, 1.45rem + 1.9vw, 3.25rem);
  line-height: 1.08;
}

.title {
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  line-height: 1.15;
}

.section__title {
  font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.5rem);
  line-height: 1.12;
}

.lead {
  max-width: 36rem;
  color: var(--muted);
  font-size: 1rem;
  text-wrap: pretty;
}

.muted {
  color: var(--muted);
}

/* Header and footer. On a phone the logo sits in the middle of the bar, as on the quiz's pages, and the links fold
   into a menu (a details element) on the right; from 720px the logo sits on the left and the links in the bar. */

.site-header {
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 60px;
}

.site-header__inner > .logo {
  grid-column: 2;
  justify-self: center;
}

.site-header .menu {
  grid-column: 3;
  justify-self: end;
}

/* The mark and the name with their middles level: the name's box is trimmed to its capitals (text-box), so
   centring lines up the middle of its capitals with the mark's, not the middle of its line. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.logo__name {
  text-box: trim-both cap alphabetic;
}

/* Browsers without text-box: Newsreader's capitals sit 0.14em above the middle of a line as tall as the type. */
@supports not (text-box: trim-both cap alphabetic) {
  .logo__name {
    position: relative;
    top: 0.14em;
  }
}

.mark {
  flex: none;
  width: 30px;
  height: 30px;
}

.logo--small {
  gap: 9px;
  font-size: 1.125rem;
}

.logo--small .mark {
  width: 26px;
  height: 26px;
}

.site-nav {
  display: none;
}

.site-nav__links {
  display: flex;
  gap: 24px;
}

.site-nav__links a,
.menu__links a {
  font-weight: 550;
  text-decoration: none;
}

.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}

.menu__button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border-radius: 50%;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.menu__button::-webkit-details-marker {
  display: none;
}

.menu__button:hover {
  background: var(--sand);
}

.menu__close,
.menu[open] .menu__open {
  display: none;
}

.menu[open] .menu__close {
  display: block;
}

/* The open menu drops down under the header's hairline, over the page. */
.menu__panel {
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  left: 0;
  z-index: 20;
  display: grid;
  gap: 20px;
  padding: 4px var(--gutter) 24px;
  border-bottom: 1px solid var(--line);
  background: var(--linen);
  box-shadow: 0 18px 24px -22px rgb(28 42 40 / 0.4);
}

.menu__links a {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
}

.menu__links a[aria-current="page"] {
  color: var(--spruce);
}

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 36px 44px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.site-footer__inner {
  display: grid;
  gap: 16px;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.site-footer .logo {
  color: var(--ink);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.site-footer__links a {
  color: var(--ink);
  font-weight: 550;
  text-underline-offset: 3px;
}

.site-footer__disclaimer {
  max-width: 46rem;
}

/* Buttons and small parts */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--radius-small);
  background: var(--spruce);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.button:hover {
  background: var(--spruce-dark);
}

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

.button:focus-visible {
  outline-color: var(--clay);
}

.button .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.button--quiet {
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--ink);
}

.button--quiet:hover {
  background: var(--sand);
}

.button--small {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.9375rem;
}

.button--large {
  min-height: 58px;
  padding-inline: 30px;
  font-size: 1.0625rem;
}

.button:disabled,
.button[aria-disabled="true"] {
  background: var(--line);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
}

.text-link {
  color: var(--spruce);
  font-weight: 600;
  text-underline-offset: 3px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--spruce);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: uppercase;
}

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

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--spruce-soft);
  color: var(--spruce);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.chip .icon {
  flex: none;
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* Callouts: safety (sage), a professional to see (clay) */

.notice {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 4px 14px;
  align-items: start;
  padding: 18px;
  border-radius: var(--radius-small);
  background: var(--sage-soft);
}

.notice__icon {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--sage);
}

.notice__icon .icon {
  width: 22px;
  height: 22px;
}

.notice__title {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.45;
}

.notice__text {
  color: var(--ink);
  font-size: 0.9688rem;
  line-height: 1.55;
}

.notice--clay {
  background: var(--clay-soft);
}

.notice--clay .notice__icon {
  color: var(--clay);
}

/* Sections */

.section {
  padding-block: var(--section);
}

.section--sand {
  background: var(--sand);
}

.section--tight {
  padding-block: 0;
}

.section--closing {
  padding-top: 0;
}

.section__head {
  display: grid;
  gap: 12px;
  max-width: 40rem;
  margin-bottom: 28px;
}

.section__action {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* Hero: one screen and no more. On a phone the photo takes the room the headline, its line and the button leave
   (flex), so the button sits low, under her thumb, and nothing half seen below pulls her on; from 960px the copy and
   the photo sit side by side. */

.hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header));
  min-height: calc(100svh - var(--header));
  padding-block: 12px 20px;
}

.hero__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
}

.hero__visual {
  position: relative;
  flex: 1 1 0;
  min-height: 200px;
}

.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  object-fit: cover;
  object-position: 50% 45%;
}

.hero__copy {
  display: grid;
  gap: 12px;
}

.hero__text {
  max-width: 34rem;
  color: var(--muted);
  text-wrap: pretty;
}

.hero__action {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

/* How long the quiz takes, by a cup of tea. */
.hero__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 550;
  line-height: 1.35;
}

.hero__note .icon {
  width: 18px;
  height: 18px;
  color: var(--clay);
}

/* On a phone over the photo's top corner, clear of her; from 960px over its bottom edge. */
.session {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  max-width: calc(100% - 28px);
  padding: 10px 16px 10px 10px;
  border-radius: var(--radius-small);
  background: rgb(255 255 255 / 0.95);
  box-shadow: var(--shadow);
}

.session__icon {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--spruce);
  color: var(--white);
}

.session__icon .icon {
  width: 22px;
  height: 22px;
}

.session__label {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 550;
  line-height: 1.4;
}

.session__title {
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.3;
}

/* Answer cards: every quiz step */

.options {
  display: grid;
  gap: 10px;
}

.option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 54px;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 550;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.option:hover {
  border-color: var(--spruce);
}

.option:active {
  background: var(--spruce-soft);
}

.option__text {
  display: grid;
  flex: 1;
  gap: 2px;
}

.option__hint {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 450;
}

/* A single choice's ring, which fills when picked */
.option__mark {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--control);
  border-radius: 50%;
}

.option.is-selected,
.option:has(input:checked) {
  border-color: var(--spruce);
  background: var(--spruce-soft);
}

.option.is-selected .option__mark {
  border: 7px solid var(--spruce);
}

/* A multi-select box with its tick */
.option--check {
  position: relative;
}

.option--check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option--check .option__mark {
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: transparent;
}

.option--check .option__mark .icon {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}

.option--check input:checked + .option__mark {
  border-color: var(--spruce);
  background: var(--spruce);
  color: var(--white);
}

.option--check:has(input:focus-visible) {
  outline: 3px solid var(--spruce);
  outline-offset: 2px;
}

/* A form on its way (once_controller.js): the answer she picked stays, the rest and the buttons dim and wait */
.is-sending .option,
.is-sending .plan-option,
.is-sending .button {
  pointer-events: none;
}

.is-sending .option:not(.is-selected, :has(input:checked)),
.is-sending .plan-option:not(:has(input:checked)) {
  opacity: 0.5;
}

.is-sending .button {
  opacity: 0.7;
}

.option__arrow {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--spruce);
  stroke-width: 2;
}

/* Who it's for */

.audience__inner {
  display: grid;
  gap: 32px;
  align-items: center;
}

.audience__photo img {
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius);
  object-fit: cover;
  object-position: 50% 35%;
}

.audience__copy {
  display: grid;
  gap: 14px;
}

.checklist {
  display: grid;
  gap: 14px;
  margin-top: 8px;
}

.checklist li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
}

.checklist .icon {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 50%;
  background: var(--spruce-soft);
  color: var(--spruce);
  stroke-width: 2.5;
}

/* How it goes: one path, a numbered stop for each step joined by a line, down the page on a phone and across it from
   960px, each with a glimpse of what she gets there. */

.flow {
  display: grid;
}

.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-content: start;
  column-gap: 16px;
  padding-bottom: 36px;
}

.flow__step:last-child {
  padding-bottom: 0;
}

/* The line on to the next stop */
.flow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 48px;
  bottom: 8px;
  left: 19px;
  width: 2px;
  border-radius: 1px;
  background: rgb(31 75 67 / 0.22);
}

.flow__number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--spruce);
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
}

.flow__body {
  display: grid;
  align-content: start;
  gap: 6px;
  padding-top: 7px;
}

.flow__title {
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.flow__text {
  color: var(--muted);
  text-wrap: pretty;
}

.glimpse {
  margin-top: 10px;
  padding: 14px;
  border-radius: var(--radius-small);
  background: var(--white);
  box-shadow: var(--shadow);
}

/* Answers as she picks them in the quiz */
.glimpse--answers {
  display: grid;
  gap: 8px;
}

.glimpse--answers li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1.5px solid var(--spruce);
  border-radius: 10px;
  background: var(--spruce-soft);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.glimpse--answers .icon {
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 50%;
  background: var(--spruce);
  color: var(--white);
  stroke-width: 3.5;
}

/* Her four weeks, each a little further along */
.glimpse--weeks {
  display: grid;
  gap: 10px;
}

.glimpse--weeks li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 6px 12px;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.glimpse--weeks li::after {
  content: "";
  grid-column: 2;
  width: 40%;
  height: 6px;
  border-radius: 3px;
  background: var(--spruce);
  opacity: 0.85;
}

.glimpse--weeks li:nth-child(2)::after {
  width: 60%;
}

.glimpse--weeks li:nth-child(3)::after {
  width: 80%;
}

.glimpse--weeks li:nth-child(4)::after {
  width: 100%;
}

.glimpse__number {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--spruce-soft);
  color: var(--spruce);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* A sample session, move by move */
.glimpse__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 0.9375rem;
  font-weight: 650;
}

.glimpse__label .icon {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 9px;
  background: var(--spruce);
  color: var(--white);
}

.glimpse__moves li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}

.glimpse__moves li:last-child {
  padding-bottom: 0;
}

.glimpse__time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* What's in the plan: one panel of rows on a phone, cards from 720px. */

.plan {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.plan-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 16px;
  row-gap: 4px;
  align-content: start;
  padding: 18px;
}

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

.plan-item__icon {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--spruce-soft);
  color: var(--spruce);
}

.plan-item__title {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}

.plan-item__text {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Safety */

.safety {
  display: grid;
  gap: 16px;
  padding: 24px 20px;
  border-radius: var(--radius);
  background: var(--sage-soft);
}

.safety__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  color: var(--sage);
}

.safety__body {
  display: grid;
  gap: 12px;
  max-width: 52rem;
}

.safety__title {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  font-weight: 500;
  line-height: 1.15;
}

/* FAQ */

.faq {
  display: grid;
  gap: 10px;
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--white);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 18px;
  border-radius: var(--radius-small);
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.faq__question span {
  text-wrap: balance;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__toggle {
  color: var(--spruce);
  transition: transform 0.2s ease;
}

.faq__item[open] .faq__toggle {
  transform: rotate(45deg);
}

.faq__answer {
  padding: 0 18px 18px;
  color: var(--muted);
}

/* Closing */

.closing {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 40px 20px;
  border-radius: var(--radius);
  background: var(--spruce);
  color: var(--white);
  text-align: center;
}

.closing__title {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.closing__text {
  color: var(--spruce-soft);
}

.closing .button {
  margin-top: 8px;
  background: var(--linen);
  color: var(--spruce);
}

.closing .button:hover {
  background: var(--white);
}

.closing .button:focus-visible {
  outline-color: var(--linen);
}

/* The funnel's own pages: quiz steps, email, result, checkout, waitlist */

.funnel {
  padding-block: 6px 40px;
}

.funnel__inner {
  display: grid;
  gap: 20px;
  max-width: 560px;
}

.funnel__inner--wide {
  max-width: 720px;
}

/* The quiz's own header: back, the logo in the middle, the question's number. The progress bar follows it closely. */
.quiz-bar {
  display: grid;
  grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 52px;
}

.quiz-bar + .progress {
  margin-top: -14px;
}

.quiz-bar__logo {
  gap: 9px;
  font-size: 1.125rem;
}

.quiz-bar__logo .mark {
  width: 26px;
  height: 26px;
}

/* A link, or a button that posts the step's form back. */
.quiz-bar__back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.quiz-bar__back:hover {
  background: var(--sand);
}

.quiz-bar__back .icon {
  transform: scaleX(-1);
}

.quiz-bar__count {
  justify-self: end;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.progress {
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.progress::-webkit-progress-bar {
  border-radius: 999px;
  background: var(--line);
}

.progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--spruce);
}

.progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--spruce);
}

.question {
  display: grid;
  gap: 10px;
}

.question__hint {
  color: var(--muted);
}

/* Why we ask a sensitive question: one quiet line with an info mark */
.question__why {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.question__why .icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--spruce);
}

/* The "or" before an answer that goes only on its own */
.options__or {
  padding-inline: 17px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.step-form {
  display: grid;
  gap: 20px;
}

.form-error {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--clay-soft);
  color: var(--clay);
  font-size: 0.9375rem;
  font-weight: 600;
}

.sticky-action {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-inline: calc(var(--gutter) * -1);
  padding: 16px var(--gutter) max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(rgb(246 242 236 / 0), var(--linen) 30%);
}

/* An info step between questions */

.info {
  display: grid;
  gap: 18px;
  padding-top: 12px;
}

.info__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage);
}

.info__icon .icon {
  width: 30px;
  height: 30px;
}

.info__text {
  color: var(--muted);
  text-wrap: pretty;
}

.info__points {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: var(--radius-small);
  background: var(--white);
  border: 1px solid var(--line);
}

.info__points li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.9688rem;
}

.info__points .icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--spruce);
  stroke-width: 2.25;
}

/* Building the plan, about seven seconds: each line comes in, its ring works for a moment, then it's ticked, at its own
   pace (--in, --done), while the bar fills unevenly with them; then "Your plan is ready". With scripts the page moves
   on by itself at 7s (building_controller.js, `is-auto`: no button); without them the button shows at 6.6s and only
   then takes a tap. */

.building {
  display: grid;
  gap: 22px;
  padding-top: 24px;
}

.building__list {
  display: grid;
  gap: 14px;
}

.building__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-weight: 550;
  opacity: 0;
  animation: building-in 0.35s ease var(--in) both, building-text 0.3s ease var(--done) forwards;
}

.building__item:nth-child(1) {
  --in: 0.3s;
  --done: 1.4s;
}

.building__item:nth-child(2) {
  --in: 1.4s;
  --done: 2.6s;
}

/* Picking her moves takes the longest. */
.building__item:nth-child(3) {
  --in: 2.6s;
  --done: 4.3s;
}

.building__item:nth-child(4) {
  --in: 4.3s;
  --done: 5.1s;
}

.building__item:nth-child(5) {
  --in: 5.1s;
  --done: 6.2s;
}

.building__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: transparent;
  animation: building-dot 0.3s ease var(--done) forwards;
}

/* The ring that works until the line is done. */
.building__dot::before {
  position: absolute;
  inset: -1.5px;
  border: 1.5px solid transparent;
  border-top-color: var(--spruce);
  border-radius: 50%;
  content: "";
  animation: building-spin 0.8s linear infinite, building-ring-out 0.15s ease var(--done) forwards;
}

.building__dot .icon {
  width: 15px;
  height: 15px;
  stroke-width: 3;
}

.building__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.building__bar span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--spruce);
  transform: scaleX(0);
  transform-origin: left;
  animation: building-bar 5.9s 0.3s forwards;
}

.building__done {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--spruce);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  opacity: 0;
  animation: building-in 0.4s ease 6.4s both;
}

.building__done .icon {
  width: 26px;
  height: 26px;
}

.building__action {
  opacity: 0;
  visibility: hidden;
  animation: building-reveal 0.3s ease 6.6s forwards;
}

.building.is-auto .building__action {
  display: none;
}

@keyframes building-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes building-text {
  to {
    color: var(--ink);
  }
}

@keyframes building-dot {
  to {
    border-color: var(--spruce);
    background: var(--spruce);
    color: var(--white);
  }
}

@keyframes building-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes building-ring-out {
  to {
    opacity: 0;
  }
}

/* With the lines: done at 1.4, 2.6, 4.3, 5.1 and 6.2s, each stretch easing in and out, so it works, then catches up. */
@keyframes building-bar {
  0% {
    transform: scaleX(0);
    animation-timing-function: ease-in-out;
  }

  18.6% {
    transform: scaleX(0.17);
    animation-timing-function: ease-in-out;
  }

  39% {
    transform: scaleX(0.36);
    animation-timing-function: ease-in-out;
  }

  67.8% {
    transform: scaleX(0.64);
    animation-timing-function: ease-in-out;
  }

  81.4% {
    transform: scaleX(0.8);
    animation-timing-function: ease-in-out;
  }

  100% {
    transform: scaleX(1);
  }
}

@keyframes building-reveal {
  to {
    opacity: 1;
    visibility: visible;
  }
}

/* Forms: the email step and the checkout */

.field {
  display: grid;
  gap: 8px;
}

.field__label {
  font-weight: 600;
}

/* 16px text, so phones don't zoom in on the field. */
.input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid var(--control);
  border-radius: 12px;
  background: var(--white);
  font-size: 1rem;
}

.input:focus {
  border-color: var(--spruce);
  outline: 3px solid var(--spruce-soft);
  outline-offset: 0;
}

.input[aria-invalid="true"] {
  border-color: var(--clay);
}

.field__error {
  color: var(--clay);
  font-size: 0.9375rem;
  font-weight: 600;
}

.field__optional {
  color: var(--muted);
  font-weight: 450;
}

.input--area {
  min-height: 160px;
  line-height: 1.5;
  resize: vertical;
}

.contact-form {
  display: grid;
  gap: 20px;
  margin-top: 8px;
}

/* The consent box: the whole card takes the tap; a 20px box with a thin tick, level with the first line */
.consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--white);
  font-size: 0.9375rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.12s ease;
}

.consent:has(input:checked) {
  border-color: var(--spruce);
}

.consent input {
  appearance: none;
  display: grid;
  place-content: center;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 1.5px solid var(--control);
  border-radius: 5px;
  background: var(--white);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.consent input::before {
  content: "";
  width: 5px;
  height: 10px;
  margin-top: -2px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.12s ease;
}

.consent input:checked {
  border-color: var(--spruce);
  background: var(--spruce);
}

.consent input:checked::before {
  transform: rotate(45deg) scale(1);
}

.consent input:focus-visible {
  outline: 3px solid var(--spruce);
  outline-offset: 2px;
}

.consent input[aria-invalid="true"] {
  border-color: var(--clay);
}

.consent a {
  color: var(--spruce);
  font-weight: 600;
  text-underline-offset: 2px;
}

/* A line with its icon: centred while it fits on one line, left-aligned once it wraps. */
.reassure {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.875rem;
}

.reassure .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* Her plan's reveal, the email step: docs/design.md, "The reveal". Her plan's top in full colour, then the outline of a
   plan fading under a veil into the form that opens it. */

.reveal__hook {
  display: grid;
  gap: 14px;
  padding-top: 6px;
}

/* When her browser fills it in (quiz_controller.js), it shows once filled; without scripts, after a moment anyway. */
.reveal__hook--pending {
  opacity: 0;
  animation: reveal-in 0.3s ease 1.2s forwards;
}

.reveal__hook--pending.is-ready {
  animation: reveal-ready 0.35s ease both;
}

.reveal__ready {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  padding: 5px 13px 5px 6px;
  border-radius: 999px;
  background: var(--spruce-soft);
  color: var(--spruce);
  font-size: 0.875rem;
  font-weight: 650;
}

.reveal__ready .icon {
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: var(--spruce);
  color: var(--white);
  stroke-width: 3;
}

.reveal__title {
  font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.625rem);
  line-height: 1.1;
}

.reveal__chips .chip {
  padding-block: 8px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
}

.reveal__chips .chip .icon {
  color: var(--spruce);
}

/* An answer her browser hasn't filled in: no empty chip. */
.chip:has([data-quiz-target="word"]:empty) {
  display: none;
}

.reveal__note {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-small);
  background: var(--sage-soft);
  color: var(--sage);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.reveal__note--physio {
  background: var(--clay-soft);
  color: var(--clay);
}

.reveal__note .icon {
  width: 22px;
  height: 22px;
}

/* The outline of a plan: what each part holds, over lines that stand for its text, the card fading out at the bottom
   into the form. */
.locked {
  display: grid;
  gap: 16px;
  margin-top: 6px;
  padding: 20px 20px 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  -webkit-mask-image: linear-gradient(#000 38%, rgb(0 0 0 / 0.5) 70%, transparent);
  mask-image: linear-gradient(#000 38%, rgb(0 0 0 / 0.5) 70%, transparent);
}

.locked__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.2;
}

.locked__title .icon {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: var(--spruce);
  color: var(--white);
  stroke-width: 2.25;
}

.locked__items {
  display: grid;
  gap: 16px;
}

.locked__item {
  display: grid;
  gap: 9px;
}

.locked__label {
  font-weight: 650;
  line-height: 1.35;
}

.locked__lines {
  display: grid;
  gap: 7px;
  filter: blur(2px);
}

.locked__lines span {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--spruce-soft), var(--sand));
}

.locked__lines span:last-child {
  width: 64%;
}

.locked__item:nth-child(2) .locked__lines span:last-child {
  width: 82%;
}

.locked__item:nth-child(3) .locked__lines span:last-child {
  width: 48%;
}

/* The form comes up under the veil, closing the card. */
.reveal__form {
  position: relative;
  margin-top: -40px;
}

.reveal__form-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
}

@keyframes reveal-in {
  to {
    opacity: 1;
  }
}

@keyframes reveal-ready {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Her plan (the result), with the plans to pick from: docs/design.md, "Her plan" */

/* Her plan's top: deep spruce with a low sun's rings in its corner, her headline in white, and her answers. */
.plan-hero {
  display: grid;
  gap: 14px;
  padding: 24px 22px 26px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 100% 0, rgb(255 255 255 / 0.1) 0 64px, transparent 65px),
    radial-gradient(circle at 100% 0, rgb(255 255 255 / 0.05) 0 116px, transparent 117px),
    radial-gradient(circle at 100% 0, rgb(255 255 255 / 0.03) 0 172px, transparent 173px),
    var(--spruce);
  color: var(--white);
}

.plan-hero__kicker {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  padding: 5px 13px 5px 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  font-size: 0.875rem;
  font-weight: 650;
}

.plan-hero__kicker .icon {
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: var(--white);
  color: var(--spruce);
  stroke-width: 3;
}

.plan-hero__title {
  font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.625rem);
  line-height: 1.1;
}

.plan-hero__lead {
  color: rgb(255 255 255 / 0.86);
  font-size: 1.0625rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.plan-hero__chips {
  padding-top: 4px;
}

.plan-hero .chip {
  padding-block: 7px;
  background: rgb(255 255 255 / 0.12);
  color: var(--white);
}

/* Where she is now and her plan's week 4 goal: a row for each, now on the left, the goal on the right after a small
   arrow drawn with borders. */
.compare {
  display: grid;
  gap: 10px;
}

.compare__card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.compare__head,
.compare__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 30px;
  padding: 12px 18px;
}

.compare__head {
  padding-block: 12px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.compare__head span + span {
  color: var(--spruce);
}

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

.compare__label {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.4;
}

.compare__now,
.compare__goal {
  font-size: 0.9375rem;
  line-height: 1.4;
}

.compare__now {
  color: var(--muted);
}

.compare__goal {
  position: relative;
  color: var(--spruce);
  font-weight: 600;
}

.compare__goal::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: -19px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--control);
  border-right: 2px solid var(--control);
  transform: rotate(45deg);
}

.compare__caption {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* A part of her plan's page with its own heading: her plan, the plans, the questions. */
.part {
  display: grid;
  gap: 14px;
  padding-top: 8px;
}

.part__head {
  display: grid;
  gap: 4px;
}

.part__title {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

.part__text {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* An address that opens the plans (/checkout, or #plans) shows their heading under the top of the screen. */
.part--plans {
  scroll-margin-top: 12px;
}

/* Her weeks, a line or two each */
.weeks {
  display: grid;
  gap: 14px;
}

.week {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 2px 12px;
}

.week__number {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--spruce);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.week--gentle .week__number {
  background: var(--sage);
}

.week__title {
  padding-top: 2px;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
}

.week__text {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tips {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: var(--radius-small);
  background: var(--sand);
}

.tips li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  font-size: 0.9375rem;
}

.tips .icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--spruce);
}

/* The plans: a picker. The radios stay in the page for keyboards and screen readers; the ring next to each one is
   what she sees. */

.plans {
  display: grid;
  gap: 18px;
}

.plan-option {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: center;
  padding: 18px 18px 18px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.plan-option:hover {
  border-color: var(--spruce);
}

.plan-option:has(.plan-option__input:checked) {
  border-color: var(--spruce);
  background: var(--spruce-soft);
  box-shadow: inset 0 0 0 1px var(--spruce);
}

.plan-option:has(.plan-option__input:focus-visible) {
  outline: 3px solid var(--spruce);
  outline-offset: 2px;
}

.plan-option__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-option__radio {
  grid-row: span 2;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--control);
  border-radius: 50%;
  background: var(--white);
  transition: border-width 0.12s ease;
}

.plan-option__input:checked + .plan-option__radio {
  border: 7px solid var(--spruce);
}

.plan-option__name {
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.3;
}

.plan-option__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  grid-column: 2;
  color: var(--muted);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* Plain words next to the price, not a badge: "Recommended" is the one badge. */
.plan-option__save {
  color: var(--spruce);
  font-weight: 650;
}

.plan-option__day {
  display: grid;
  grid-row: 1 / span 2;
  grid-column: 3;
  justify-items: end;
  font-variant-numeric: tabular-nums;
}

.plan-option__day strong {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
}

.plan-option__day span {
  color: var(--muted);
  font-size: 0.8125rem;
}

/* Sits on the card's top edge, over the plan's name. */
.plan-option__badge {
  position: absolute;
  top: 0;
  left: 54px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--spruce);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  transform: translateY(-50%);
}

/* What to expect, under the plans */
.assurances {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: var(--radius-small);
  background: var(--sand);
}

.assurance {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 2px 12px;
}

.assurance .icon {
  grid-row: span 2;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--spruce);
}

.assurance__title {
  font-weight: 650;
  line-height: 1.4;
}

.assurance__text {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.fineprint {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.875rem;
}

.fineprint .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* What her pick leads to, under the plans' button: numbered steps on a line, today's filled in. */
.next-steps {
  display: grid;
  gap: 16px;
  margin-top: 6px;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--white);
}

.next-steps__title {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.2;
}

.next-steps__list {
  display: grid;
  gap: 16px;
  counter-reset: next-step;
}

.next-step {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 2px 14px;
}

.next-step::before {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--spruce-soft);
  color: var(--spruce);
  content: counter(next-step);
  counter-increment: next-step;
  font-size: 0.8125rem;
  font-weight: 700;
}

.next-step:first-child::before {
  background: var(--spruce);
  color: var(--white);
}

.next-step:not(:last-child)::after {
  position: absolute;
  top: 32px;
  bottom: -14px;
  left: 13.25px;
  width: 1.5px;
  background: var(--line);
  content: "";
}

.next-step__title {
  padding-top: 3px;
  font-weight: 650;
  line-height: 1.35;
}

.next-step__text {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Her first week, session by session, each as long as she said. */
.workouts {
  display: grid;
  gap: 10px;
}

.workout {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 2px 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--white);
}

.workout__number {
  display: grid;
  grid-row: span 3;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--sand);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.workout:first-child .workout__number {
  background: var(--spruce);
  color: var(--white);
}

.workout__title {
  padding-top: 1px;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}

.workout__text {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.workout__minutes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--spruce);
  font-size: 0.8125rem;
  font-weight: 650;
}

.workout__minutes .icon {
  width: 15px;
  height: 15px;
}

/* The end of her plan's page: a question in her own minutes over the plans' button again. */
.plan-end {
  display: grid;
  gap: 16px;
  margin-top: 8px;
  padding: 28px 20px 22px;
  border-radius: var(--radius);
  background: var(--spruce-soft);
  text-align: center;
}

.plan-end__title {
  color: var(--spruce);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}

/* On a phone, past the plans: her pick and its button at the bottom of the screen (plan_bar_controller.js). */
.plan-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgb(255 255 255 / 0.97);
  box-shadow: 0 -12px 28px -20px rgb(28 42 40 / 0.35);
  animation: plan-bar-in 0.22s ease both;
}

.plan-bar__pick {
  display: grid;
  font-size: 0.875rem;
  line-height: 1.35;
}

.plan-bar__pick span:first-child {
  font-weight: 650;
}

.plan-bar__pick span:last-child {
  color: var(--muted);
}

.plan-bar__pick strong {
  color: var(--ink);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.plan-bar .button {
  flex: none;
  width: auto;
  min-height: 48px;
  padding-inline: 20px;
}

@keyframes plan-bar-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: none;
  }
}

/* A message sent and "one moment": a mark over a few lines (.done--page, below). */

.done {
  display: grid;
  justify-items: start;
  gap: 18px;
  padding-top: 16px;
}

.done__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--spruce);
  color: var(--white);
}

.done__icon .icon {
  width: 30px;
  height: 30px;
  stroke-width: 2.5;
}

.done__icon--soft {
  background: var(--clay-soft);
  color: var(--clay);
}

.done__icon--soft .icon {
  stroke-width: 1.75;
}

/* The waitlist: she's on the list, her plan saved with its launch offer as one ticket, then what happens now. */

.waitlist {
  display: grid;
  gap: 32px;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  padding-block: 20px 8px;
}

.waitlist__head {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

/* Her check, in two soft rings. */
.waitlist__icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 18px 0 14px;
  border-radius: 50%;
  background: var(--spruce);
  box-shadow: 0 0 0 9px var(--spruce-soft), 0 0 0 18px rgb(31 75 67 / 0.05);
  color: var(--white);
}

.waitlist__icon .icon {
  width: 32px;
  height: 32px;
  stroke-width: 2.5;
}

.waitlist__head .lead {
  max-width: 28rem;
}

/* Her plan over its launch offer, along a dashed line with a notch each side: a ticket she keeps. */
.ticket {
  display: grid;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.ticket__plan,
.ticket__offer {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 22px 20px;
}

.ticket__offer {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  border-top: 2px dashed var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--spruce-soft);
}

.ticket__offer::before,
.ticket__offer::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--linen);
}

.ticket__offer::before {
  left: -11px;
}

.ticket__offer::after {
  right: -11px;
}

.ticket__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--spruce);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.4;
}

.ticket__kicker .icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.ticket__offer .ticket__kicker,
.ticket__text {
  grid-column: 1 / -1;
}

.ticket__title {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

.ticket__value {
  color: var(--spruce);
  font-family: var(--serif);
  font-size: clamp(2.25rem, 2rem + 1.2vw, 2.75rem);
  font-weight: 500;
  line-height: 1.05;
}

.ticket__pick {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--spruce);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 650;
  white-space: nowrap;
}

.ticket__text {
  color: var(--muted);
}

/* What happens now: the first point is done, the others come when we open. */
.waitlist__next {
  display: grid;
  gap: 16px;
}

.waitlist__next-title {
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.25;
}

.waitlist__steps {
  display: grid;
  gap: 14px;
}

.waitlist__step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.waitlist__step-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--spruce);
}

.waitlist__step--done .waitlist__step-icon {
  border-color: var(--spruce);
  background: var(--spruce);
  color: var(--white);
}

.waitlist__step-icon .icon {
  width: 18px;
  height: 18px;
}

/* Her address moves to the next line whole when it doesn't fit, and breaks only when it's longer than a line. */
.waitlist__email {
  display: inline-block;
  max-width: 100%;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.waitlist__end {
  display: grid;
  gap: 14px;
}

/* The pages around the funnel: about, contact, privacy, terms, a message sent and "one moment". The same generous
   room above the title and below the last line (--page; the footer adds none), and lines of about 70 characters. */

.prose {
  display: grid;
  gap: 16px;
  max-width: calc(38rem + 2 * var(--gutter));
  padding-block: var(--page);
  line-height: 1.7;
}

.prose h1 {
  margin-bottom: 2px;
  font-family: var(--serif);
  font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.prose .lead {
  font-size: 1.0625rem;
  line-height: 1.6;
}

.prose h2 {
  margin-top: 20px;
  font-family: var(--serif);
  font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 1.625rem);
  font-weight: 500;
  line-height: 1.2;
}

.prose ul {
  display: grid;
  gap: 8px;
  padding-left: 22px;
  list-style: disc;
}

.prose a {
  color: var(--spruce);
  font-weight: 600;
  text-underline-offset: 2px;
}

.prose code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--sand);
  font-size: 0.9em;
}

.prose__meta {
  color: var(--muted);
  font-size: 0.875rem;
}

.prose .button {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.prose__action {
  margin-top: 16px;
}

/* A short page that only says something went through (a message sent, her spot on the list) sits in the middle of
   the room the header and the footer leave, so it isn't a line at the top of an empty page. */
main:has(> .page-middle) {
  display: flex;
  flex-direction: column;
}

.page-middle {
  display: grid;
  flex: 1 0 auto;
  align-content: center;
}

.done--page {
  justify-items: center;
  max-width: 32rem;
  margin-inline: auto;
  padding-block: var(--page);
  text-align: center;
}

.done--page .lead {
  margin-top: -6px;
}

/* The not-medical-advice line at the end of her plan, where the quiz's pages have no footer. */
.disclaimer {
  padding-top: 8px;
  color: var(--muted);
  font-size: 0.8125rem;
  text-align: center;
}

/* Tablets and up */

@media (min-width: 720px) {
  .site-header__inner {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
  }

  .site-header .logo {
    gap: 11px;
    font-size: 1.375rem;
  }

  .site-header .mark {
    width: 34px;
    height: 34px;
  }

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

  .menu {
    display: none;
  }

  .button {
    width: auto;
  }

  .button--block {
    width: 100%;
  }

  .lead,
  .hero__text {
    font-size: 1.125rem;
  }

  .hero__copy {
    max-width: 40rem;
  }

  .hero__action {
    justify-items: start;
  }

  .plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    border: 0;
    background: none;
  }

  .plan-item,
  .plan-item + .plan-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
  }

  .safety {
    grid-template-columns: auto 1fr;
    gap: 28px;
    padding: 40px;
  }

  .closing {
    padding: 72px 40px;
  }

  .prose {
    gap: 18px;
    font-size: 1.0625rem;
  }

  .prose .lead {
    font-size: 1.1875rem;
  }

  .prose h2 {
    margin-top: 28px;
  }

  .funnel {
    padding-block: 24px 72px;
  }

  .sticky-action {
    position: static;
    margin-inline: 0;
    padding: 4px 0 0;
    background: none;
  }

  .plan-hero {
    gap: 16px;
    padding: 32px 34px 34px;
  }

  /* The minutes on the right of each session. */
  .workout {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: 16px 20px;
  }

  .workout__minutes {
    grid-row: 1;
    grid-column: 3;
    margin-top: 0;
  }

  .plan-end {
    padding: 36px 40px 28px;
  }

  /* A wide screen shows enough of the page: no bar. */
  .plan-bar {
    display: none;
  }

  .waitlist {
    gap: 36px;
    padding-block: 28px 16px;
  }

  .ticket__plan,
  .ticket__offer {
    padding: 26px 28px;
  }
}

/* Laptops and up */

@media (min-width: 960px) {
  /* One screen still, up to a point on very tall ones. */
  .hero {
    min-height: min(calc(100vh - var(--header)), 900px);
    min-height: min(calc(100svh - var(--header)), 900px);
    padding-block: 32px 56px;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "copy visual";
    align-items: center;
    column-gap: 72px;
  }

  .hero__copy {
    grid-area: copy;
    gap: 18px;
  }

  .hero__action {
    margin-top: 12px;
  }

  .hero__note {
    justify-content: flex-start;
  }

  .hero__visual {
    grid-area: visual;
    align-self: stretch;
    min-height: 480px;
  }

  .session {
    top: auto;
    bottom: 28px;
    left: -28px;
  }

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

  .audience__photo img {
    aspect-ratio: 1;
  }

  .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
  }

  .flow__step {
    grid-template-columns: 1fr;
    row-gap: 18px;
    padding-bottom: 0;
  }

  .flow__step:not(:last-child)::before {
    top: 19px;
    right: -24px;
    bottom: auto;
    left: 56px;
    width: auto;
    height: 2px;
  }

  .flow__body {
    padding-top: 0;
  }

  .plan {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .plan-item {
    grid-template-columns: 1fr;
    row-gap: 6px;
    padding: 24px;
  }

  .plan-item__icon {
    grid-row: auto;
    margin-bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .button,
  .option,
  .plan-option,
  .plan-option__radio,
  .consent,
  .consent input,
  .consent input::before,
  .faq__toggle {
    transition: none;
  }

  /* Her plan's lines all at once, ticked, and no ring turning. */
  .building__item,
  .building__dot,
  .building__bar span,
  .building__done,
  .building__action {
    animation-duration: 0.01s;
    animation-delay: 0s;
  }

  .building__dot::before {
    display: none;
  }

  .reveal__hook--pending.is-ready {
    animation: none;
    opacity: 1;
  }

  .plan-bar {
    animation: none;
  }
}