/* --------------------------------
   FRONT PAGE

   The marketing page at /. An ordinary scrolling document, so it does
   not load styles-light.css, whose body is a fixed app shell. legal.css
   comes first and gives the consent and legal lines; this file places
   them and sets their colours.

   Three sizes from one document: phone (F1), tablet from 700px (F2) and
   computer from 1100px (F3). .on-phone, .off-phone and .on-computer, at
   the end of this file, carry the copy and pieces that differ.

   Dark follows the device unless a choice is saved (theme.js), as on
   the legal pages, with their palette. Only the tokens below change. The
   set is written twice, and test/pages.test.js keeps the two equal.
-------------------------------- */

:root {
  color-scheme: light;

  --gutter: 16px;

  --ground: #f3f7fb;
  --surface: #ffffff;
  --line: #d6e1ec;
  --ink: #0f2a42;
  --ink-2: #41586d;
  --link: #004a82;
  --accent: #004a82;
  --icon-ground: #e3eef8;
  --good: #1f7a4d;

  --hero-top: #c8d7e6;
  --hero-glow: rgba(255, 255, 255, 0.7);

  --band-top: #1668a8;
  --band-bottom: #004a82;

  --button-top: #2f8fda;
  --button-bottom: #1668a8;
  --button-shadow: rgba(30, 117, 184, 0.3);
  --card-shadow: rgba(40, 70, 110, 0.12);

  --wave: #2785ce;
  --focus: #2785ce;

  /* The logo's colours, from styles-light.css. */
  --logo-1: #004a82;
  --logo-2: #79acd5;
  --logo-gap: #cfdce9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ground: #0b1824;
    --surface: #112334;
    --line: #24405b;
    --ink: #e4edf6;
    --ink-2: #a9bccd;
    --link: #8cc2ec;
    --accent: #8cc2ec;
    --icon-ground: #1a3248;
    --good: #6fd0a0;

    --hero-top: #15304a;
    --hero-glow: rgba(38, 128, 198, 0.16);

    --band-top: #123a5c;
    --band-bottom: #0e2c47;

    --button-shadow: rgba(0, 0, 0, 0.4);
    --card-shadow: rgba(0, 0, 0, 0.3);

    --wave: #6fabdf;
    --focus: #6fabdf;

    /* The logo's colours, from styles-dark.css. */
    --logo-1: #e8f1fd;
    --logo-2: #6fabdf;
    --logo-gap: #15304a;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ground: #0b1824;
  --surface: #112334;
  --line: #24405b;
  --ink: #e4edf6;
  --ink-2: #a9bccd;
  --link: #8cc2ec;
  --accent: #8cc2ec;
  --icon-ground: #1a3248;
  --good: #6fd0a0;

  --hero-top: #15304a;
  --hero-glow: rgba(38, 128, 198, 0.16);

  --band-top: #123a5c;
  --band-bottom: #0e2c47;

  --button-shadow: rgba(0, 0, 0, 0.4);
  --card-shadow: rgba(0, 0, 0, 0.3);

  --wave: #6fabdf;
  --focus: #6fabdf;

  /* The logo's colours, from styles-dark.css. */
  --logo-1: #e8f1fd;
  --logo-2: #6fabdf;
  --logo-gap: #15304a;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;

  background: var(--ground);

  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

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

a:focus-visible {
  outline: 3px solid var(--wave);
  outline-offset: 2px;
  border-radius: 6px;
}

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

/* The content column, with the same gutter at every size. */
.wrap {
  width: 100%;
  max-width: calc(1200px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

/* Holds the symbols; only its <use>s are ever drawn. */
.icon-sprite {
  display: none;
}

.icon {
  width: 1.2em;
  height: 1.2em;

  flex-shrink: 0;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-good {
  color: var(--good);
}

/* --------------------------------
   TOP BAR
-------------------------------- */

.topbar {
  padding-top: max(6px, env(safe-area-inset-top));

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  min-height: 44px;

  display: flex;
  align-items: center;
}

.wordmark-lockup {
  display: block;
  width: auto;
  height: 28px;
}

.wordmark-cross,
.wordmark-appeal {
  fill: var(--logo-1);
}

.wordmark-check,
.wordmark-buddy {
  fill: var(--logo-2);
}

/* The gap between cross and check; it matches the ground behind it. */
.wordmark-sep {
  fill: var(--logo-gap);
}

/* There is room for the links from the tablet up. */
.topnav {
  display: none;
}

.topnav a:not(.button) {
  min-height: 44px;

  display: flex;
  align-items: center;

  color: var(--ink);
  text-decoration: none;
}

.topnav a:not(.button):hover {
  text-decoration: underline;
}

/* --------------------------------
   FIRST SCREEN

   On a phone it fills the screen, less enough for the doors to show
   below the fold. The button and consent line sit at the foot of it
   (not sticky), under the thumb, with the reading content above them.
-------------------------------- */

.first-screen {
  min-height: calc(100vh - 104px);
  min-height: calc(100svh - 104px);

  display: flex;
  flex-direction: column;

  background:
    radial-gradient(ellipse 90% 60% at 65% 30%, var(--hero-glow), transparent 70%),
    linear-gradient(180deg, var(--hero-top), var(--ground));
}

.hero {
  flex: 1;

  padding-top: 2px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

h1 {
  font-size: clamp(29px, 8.4vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.lede {
  margin-top: 6px;

  color: var(--ink-2);
  line-height: 1.4;
}

.eyebrow {
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  min-height: 60px;
  padding: 0 28px;

  flex: 1 1 100%;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border-radius: 30px;

  background: linear-gradient(180deg, var(--button-top), var(--button-bottom));
  box-shadow: 0 8px 18px var(--button-shadow);

  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.button-small {
  min-height: 48px;
  padding: 0 22px;

  border-radius: 24px;

  font-size: 17px;
}

.button-quiet {
  border: 1px solid var(--accent);

  background: var(--surface);
  box-shadow: none;

  color: var(--link);
}

/* A plain line above the button on a phone, chips from the tablet up. */
.facts {
  order: -1;

  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;

  color: var(--ink-2);
  font-size: 17px;
  list-style: none;
}

.facts li + li::before {
  content: "· ";
}

.hero-actions .consent {
  max-width: none;
  margin: 0;
  padding: 0;

  line-height: 1.4;
  text-align: left;
}

.consent,
.legal-line {
  color: var(--ink-2);
}

.consent a,
.legal-line a {
  color: var(--link);
}

.mic-hint {
  display: flex;
  align-items: center;
  gap: 8px;

  color: var(--ink-2);
  font-size: 16px;
}

/* --------------------------------
   PREVIEW OF THE FACTS FILLING IN
-------------------------------- */

.preview {
  /* Takes up any spare height, which keeps the button at the foot. */
  margin-block: auto;
  padding: 8px 14px 10px;

  border: 1px solid var(--line);
  border-radius: 16px;

  background: var(--surface);
  box-shadow: 0 10px 24px var(--card-shadow);
}

.preview-listening {
  display: flex;
  align-items: center;
  gap: 10px;

  color: var(--accent);
  font-size: 16px;
}

/* Says plainly that this is a picture, and the mic isn't on. */
.preview-example {
  margin-left: auto;
  padding: 0 10px;

  border-radius: 12px;

  background: var(--icon-ground);

  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
}

.preview-wave {
  height: 20px;

  display: flex;
  align-items: center;
  gap: 3px;
}

.preview-wave i {
  width: 3px;
  height: 60%;

  border-radius: 2px;

  background: var(--wave);
}

.preview-wave i:nth-child(odd) {
  height: 35%;
}

.preview-wave i:nth-child(3n) {
  height: 100%;
}

.preview-heading {
  margin-top: 2px;

  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.preview dl {
  margin: 0;

  line-height: 1.35;
}

.preview dl div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 12px;
}

.preview dt {
  color: var(--ink-2);
  font-size: 16px;
}

.preview dd {
  margin: 0;

  font-size: 16px;
  font-weight: 600;
}

/* --------------------------------
   DOORS
-------------------------------- */

.section-heading {
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.doors {
  padding-top: 14px;
}

.door-list {
  margin-top: 8px;

  display: grid;
  gap: 14px;
}

.door {
  min-height: 88px;
  padding: 16px;

  display: flex;
  align-items: center;
  gap: 14px;

  border: 1px solid var(--line);
  border-radius: 16px;

  background: var(--surface);

  color: var(--ink);
  text-decoration: none;
}

.door-icon {
  width: 48px;
  height: 48px;
  padding: 12px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--icon-ground);

  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.door-body {
  min-width: 0;

  flex: 1;
}

.door-title {
  display: block;

  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

.door-text {
  margin-top: 4px;

  display: block;

  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.4;
}

.door-go {
  display: flex;
  align-items: center;
  gap: 4px;

  color: var(--link);
  font-weight: 600;
}

/* On a phone the whole card is the link, and the chevron says so. */
.door-go span {
  display: none;
}

/* --------------------------------
   HOW IT WORKS
-------------------------------- */

.how {
  padding-top: 32px;

  scroll-margin-top: 8px;
}

.steps {
  margin: 14px 0 0;
  padding: 0;

  display: grid;
  gap: 20px;

  counter-reset: step;
  list-style: none;
}

.steps li {
  position: relative;

  padding-left: 48px;

  counter-increment: step;
}

.steps li::before {
  content: counter(step);

  position: absolute;
  top: 0;
  left: 0;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #004a82;

  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
}

.steps h3 {
  font-size: 19px;
  line-height: 1.3;
}

.steps p {
  margin-top: 4px;

  color: var(--ink-2);
  font-size: 17px;
}

/* --------------------------------
   CLINIC BAND
-------------------------------- */

.band {
  margin-top: 48px;
  padding-block: 48px;

  background: linear-gradient(180deg, var(--band-top), var(--band-bottom));

  color: #ffffff;
}

.band .eyebrow {
  color: #d4e6f6;
}

.band h2 {
  max-width: 34rem;
  margin-top: 10px;

  font-size: 32px;
  line-height: 1.2;
}

.band p:last-child {
  margin-top: 14px;

  color: #e4eef8;
}

/* --------------------------------
   PRIVACY AND LIMITS
-------------------------------- */

.cards {
  padding-top: 32px;

  display: grid;
  gap: 14px;
}

.card {
  padding: 18px;

  border: 1px solid var(--line);
  border-radius: 16px;

  background: var(--surface);

  scroll-margin-top: 16px;
}

.card h2 {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 20px;
  line-height: 1.3;
}

.card p {
  margin-top: 8px;

  color: var(--ink-2);
  font-size: 17px;
}

/* Tall enough to tap, in the middle of a sentence. */
.card a {
  padding-block: 11px;

  font-weight: 600;
}

.limits {
  padding-top: 24px;

  color: var(--ink-2);
  font-size: 17px;
}

/* --------------------------------
   FOOTER
-------------------------------- */

.footer {
  --logo-gap: var(--ground);

  margin-top: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));

  border-top: 1px solid var(--line);
}

.footer-inner {
  padding-top: 8px;
}

.footer .legal-line {
  max-width: none;
  margin: 0;

  text-align: left;
}

.footer .legal-line nav {
  justify-content: flex-start;
  gap: 0 18px;
}

.footer .legal-line nav a {
  font-size: 16px;
}

.footer .legal-line p {
  margin: 4px 0 0;

  font-size: 15px;
}

.copyright {
  margin-top: 8px;

  color: var(--ink-2);
  font-size: 15px;
}

/* --------------------------------
   TABLET (F2)

   Two columns, with every door showing.
-------------------------------- */

@media (min-width: 700px) {
  :root {
    --gutter: 40px;
  }

  .first-screen {
    min-height: 0;
    padding-bottom: 32px;
  }

  .topbar {
    padding-top: max(16px, env(safe-area-inset-top));
  }

  .hero-actions {
    gap: 12px;
  }

  .wordmark-lockup {
    height: 32px;
  }

  .topnav {
    display: flex;
    align-items: center;
    gap: 24px;

    font-size: 17px;
  }

  .hero {
    padding-top: 24px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
    grid-template-areas:
      "text preview"
      "actions preview";
    gap: 20px 32px;
    align-items: start;
  }

  .hero-text {
    grid-area: text;
  }

  .hero-actions {
    grid-area: actions;
  }

  .preview {
    grid-area: preview;

    padding: 18px;
  }

  .preview dl div {
    margin-top: 8px;

    display: block;
  }

  h1 {
    font-size: 40px;
  }

  .lede {
    margin-top: 12px;

    font-size: 20px;
  }

  .facts {
    order: 0;

    gap: 8px;

    font-size: 16px;
  }

  .facts li {
    padding: 4px 14px;

    border: 1px solid var(--line);
    border-radius: 16px;

    background: var(--surface);
  }

  .facts li + li::before {
    content: none;
  }

  .doors {
    padding-top: 32px;
  }

  .door-list {
    margin-top: 12px;

    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .door {
    padding: 18px;

    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .door-body {
    flex: 0 0 auto;
  }

  .door-go {
    margin-top: auto;
    min-height: 44px;

    font-size: 16px;
  }

  .door-go span {
    display: inline;
  }

  .how {
    padding-top: 40px;
  }

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

  .steps li {
    padding: 44px 0 0;
  }

  .cards {
    padding-top: 40px;

    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------
   COMPUTER (F3)
-------------------------------- */

@media (min-width: 1100px) {
  :root {
    --gutter: 48px;
  }

  body {
    font-size: 19px;
  }

  .topnav {
    gap: 28px;
  }

  .first-screen {
    padding-bottom: 56px;
  }

  .hero {
    padding-top: 48px;

    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 22px 64px;
  }

  h1 {
    font-size: 54px;
    line-height: 1.1;
  }

  .eyebrow {
    margin-bottom: 14px;
  }

  .button {
    flex: 0 0 auto;
  }

  .preview {
    padding: 24px;
  }

  .preview-listening,
  .preview dt,
  .preview dd {
    font-size: 18px;
  }

  .section-heading {
    color: var(--ink);
    font-size: 32px;
    letter-spacing: -0.01em;
    text-transform: none;
  }

  .doors {
    padding-top: 56px;
  }

  .door-list {
    margin-top: 20px;
    gap: 20px;
  }

  .door {
    padding: 24px;
  }

  /* A pill here, not a text link. "For myself" is the filled one. */
  .door-go {
    padding: 0 22px;

    border: 1px solid var(--accent);
    border-radius: 24px;

    font-size: 17px;
  }

  .door-go .icon {
    display: none;
  }

  .door-go-main {
    border-color: transparent;

    background: linear-gradient(180deg, var(--button-top), var(--button-bottom));

    color: #ffffff;
  }

  .how {
    padding-top: 64px;
  }

  .steps {
    margin-top: 20px;
  }

  .band {
    margin-top: 64px;
    padding-block: 64px;
  }

  .band h2 {
    max-width: 42rem;

    font-size: 38px;
  }

  .cards {
    padding-top: 64px;

    gap: 20px;
  }

  .footer {
    margin-top: 40px;
  }

  .footer-inner {
    padding-top: 20px;

    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand links"
      "note links"
      "copyright theme";
    align-items: center;
    gap: 2px 32px;
  }

  .footer .brand {
    grid-area: brand;
  }

  /* Its two children join the footer's grid. */
  .footer .legal-line {
    display: contents;
  }

  .footer .legal-line nav {
    grid-area: links;
  }

  .footer .legal-line p {
    grid-area: note;

    margin: 0;
  }

  .footer .theme-toggle {
    grid-area: theme;
    justify-self: end;

    margin-top: 0;
  }

  .copyright {
    grid-area: copyright;

    margin: 0;
  }
}

/* --------------------------------
   WHAT SHOWS AT WHICH SIZE

   Last and !important, so each piece keeps its own display otherwise.
-------------------------------- */

@media (max-width: 699.98px) {
  .off-phone {
    display: none !important;
  }
}

@media (min-width: 700px) {
  .on-phone {
    display: none !important;
  }
}

@media (max-width: 1099.98px) {
  .on-computer {
    display: none !important;
  }
}