/* The public home page (WEB-002, D-118).

   Loaded only by home.html, after app.css, which carries the tokens, the
   type scale and the .button classes this builds on. Kept out of app.css
   because every signed-in request pays for that file and no signed-in page
   uses a single rule in here.

   No inline style anywhere on the page, so the app's `style-src 'self'`
   holds unchanged; the hero and band gradients are elements with classes.

   Buttons size to their label and go full width only under 600px, which is
   the rule the account page and the standalone card already follow. */

.home {
  --home-wrap: 1120px;
  background: var(--paper);
}

.home main:focus { outline: none; }

.home-wrap {
  width: 100%;
  max-width: var(--home-wrap);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------------------------- banner */

.home-banner {
  padding: 16px 0 18px;
  border-bottom: 1px solid #bed7ca;
  background: var(--mint-2);
  color: var(--green);
}

/* Lined up with the header's own 1120px column, padding included. */
.home-banner p {
  max-width: calc(var(--home-wrap) + 40px);
  margin: 0 auto;
  padding: 0 20px;
  font-size: 0.95rem;
}
.home-banner strong { font-weight: 760; }

.home-banner__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.home-banner__actions .button { min-height: 44px; padding: 9px 18px; }
.home-banner__dismiss { color: var(--green-2); font-weight: 660; text-decoration: underline; }

/* ---------------------------------------------------------------- header */

.home-head {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(222, 223, 216, 0.85);
  background: rgba(247, 245, 239, 0.94);
  backdrop-filter: blur(18px);
}

.home-head__inner {
  display: flex;
  width: 100%;
  max-width: var(--home-wrap);
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 auto;
  padding: 10px 20px;
}

.home-nav { display: none; }

.home-nav a {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 640;
  text-decoration: none;
}

.home-nav a:hover { color: var(--green); }

.home-head__end { display: flex; align-items: center; gap: 12px; }
.home-head__end .button { min-height: 44px; padding: 9px 18px; }
.home-head__end .button { white-space: nowrap; }
/* Signed in on a phone, the avatar, Open app and Menu do not fit one row
   beside the brand; Open app is the way in, so the avatar waits for 480. */
@media (max-width: 479px) {
  .home-head__end .profile-chip { display: none; }
}

@media (min-width: 720px) {
  .home-head { position: sticky; z-index: 20; top: 0; }
}
/* WEB-008 (owner, 2026-10-07): with Guides the row is five links, which
   wrapped onto two lines at 720 beside the sign-in buttons; the row starts
   at 960, and Menu serves every width below it. */
@media (min-width: 960px) {
  .home-nav { display: flex; gap: 26px; }
}
.home-nav a { white-space: nowrap; }

/* Owner, 2026-10-06: on a phone the section links sit behind Menu, a
   details element, so it opens with no script. Wider screens show the row
   of links instead and never draw the menu. */
.site-menu { position: relative; }
.site-menu > summary {
  display: flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary:focus-visible { outline: 3px solid rgba(35, 88, 73, 0.25); outline-offset: 2px; }
.site-menu__bars,
.site-menu__bars::before,
.site-menu__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.site-menu__bars { position: relative; }
.site-menu__bars::before,
.site-menu__bars::after { position: absolute; left: 0; content: ""; }
.site-menu__bars::before { top: -6px; }
.site-menu__bars::after { top: 6px; }
.site-menu__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.site-menu__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: 200px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(23, 34, 30, 0.14);
}
.site-menu__panel a {
  display: block;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-weight: 640;
  text-decoration: none;
}
.site-menu__panel a:hover,
.site-menu__panel a:focus-visible { background: var(--surface-2); }
@media (min-width: 960px) {
  .site-menu { display: none; }
}

/* ------------------------------------------------------------------ hero */

.home-hero {
  position: relative;
  display: flex;
  min-height: 460px;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
}

.home-hero__photo,
.home-band__photo,
.home-invite__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Owner, 2026-10-08: every photograph below the hero loads lazily and its
   box is already reserved by its width and height, so nothing moves when it
   arrives. Until it does, or if it never does, the box is a quiet mint
   panel rather than a hole in the page. */
.home-soon__photo,
.home-step__photo,
.home-card__photo,
.home-photo-row__photo,
.home-better__photo,
.home-better__pair-photo,
.home-reason__photo { background: var(--mint); }

.home-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 20, 17, 0.9) 0%, rgba(10, 20, 17, 0.78) 34%, rgba(10, 20, 17, 0.28) 66%, rgba(10, 20, 17, 0.12) 100%);
}

.home-hero__text {
  position: relative;
  width: 100%;
  max-width: var(--home-wrap);
  margin: 0 auto;
  padding: 72px 20px;
  color: white;
}

.home-hero__text h1 { max-width: 560px; color: white; }
.home-hero__text p {
  max-width: 560px;
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.1rem;
}

@media (min-width: 720px) {
  .home-hero { min-height: 560px; }
  .home-hero__text { padding: 96px 20px; }
  .home-hero__text p { font-size: 1.2rem; }
}

/* --------------------------------------------------------------- section */

.home-section { padding: 64px 0; }
.home-section--tinted { background: var(--surface-2); }

/* Two sections carry a colour of their own, because two of them are making a
   claim rather than listing something. The brand green is the adaptation
   section; the warm sand is the one about time. Both are declared here with
   their text colours, so a section never inherits a colour that reads on
   paper and not on the ground it actually sits on. */

.home-section--brand { background: var(--green); color: white; }
.home-section--brand h2,
.home-section--brand h3,
.home-section--brand strong { color: white; }
/* The section rules come before .home-soon__text below, which sets the muted
   grey, so these name the same depth to win rather than relying on order. */
.home-section--brand p,
.home-section--brand .home-soon__text p { color: rgba(255, 255, 255, 0.9); }
/* --green-2 on the brand green is unreadable, so the eyebrow goes light. */
.home-section--brand .eyebrow { color: var(--mint); }

.home-section--sand { background: #efe6d6; }
/* The sand is warm and light, so the muted grey that reads on paper loses
   too much contrast on it. Darkened here and nowhere else. */
.home-section--sand { --muted: #4c5a52; }

/* The start section is its own chapter: more air above and below than a
   listing section, so the white cards of How it works begin on paper. */
.home-start { padding: 72px 0; }
.home-start__photo { aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 720px) {
  .home-start { padding: 104px 0; }
}
.home-section > .home-wrap > h2 { margin-bottom: 34px; max-width: 760px; }

@media (min-width: 720px) {
  .home-section { padding: 88px 0; }
  /* HOM-005 section 2b. What you get and What is next are both on paper, so
     their two paddings met as one 176px gap with no change of ground to
     explain it. The second gives up its top, so the gap is one section's
     88px, like every other boundary on the page. Laptop only. */
  #features + #being-built { padding-top: 0; }
}

/* ----------------------------------------------------------------- steps */

.home-steps {
  display: grid;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-step {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.home-step__photo {
  width: 100%;
  height: auto;
  margin-bottom: 18px;
  /* Square since milestone 92. The crop is baked into the file, so this
     matches the file rather than cropping it a second time. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.home-step__number {
  display: grid;
  width: 38px;
  height: 38px;
  margin: 0 22px 10px;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-size: 0.95rem;
  font-weight: 800;
}

.home-step h3 { margin: 0 22px 8px; font-size: 1.18rem; font-weight: 700; letter-spacing: -0.02em; }
.home-step p { margin: 0 22px; color: var(--muted); }

/* HOM-003. The one line under the third step that says how the next set is
   decided, set apart by a rule rather than a second card. */
.home-step .home-step__next {
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
}

@media (min-width: 720px) {
  .home-steps { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------------ band */

.home-band {
  position: relative;
  display: flex;
  min-height: 300px;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
}

.home-band__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 20, 17, 0.88) 0%, rgba(10, 20, 17, 0.6) 55%, rgba(10, 20, 17, 0.32) 100%);
}

.home-band__text {
  position: relative;
  width: 100%;
  max-width: var(--home-wrap);
  margin: 0 auto;
  padding: 56px 20px;
  color: white;
}

/* At phone widths the text spans the whole photograph, so the gradient
   that reads well beside a 1120px column is not enough on its own. */
@media (max-width: 719px) {
  .home-hero__veil,
  .home-band__veil { background: rgba(10, 20, 17, 0.78); }
}

.home-band__text h2 { max-width: 560px; color: white; }
.home-band__text p { max-width: 560px; color: rgba(255, 255, 255, 0.92); font-size: 1.08rem; }

/* ----------------------------------------------------------------- cards */

.home-cards { display: grid; gap: 22px; }

.home-card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* The crop is baked into the file (see home/CREDITS.md), so the square here
   is the photograph's own shape and object-fit is only absorbing a sub-pixel
   difference rather than cutting a face in half. */
.home-card__photo { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.home-card__body { padding: 22px; }
.home-card h3 { margin-bottom: 8px; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.home-card p { color: var(--muted); }

.home-icon {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  place-items: center;
  border-radius: 13px;
  background: var(--mint-2);
  color: var(--green);
}

.home-icon svg { display: block; width: 24px; height: 24px; }

/* A card with no photograph sits in a row as tall as the ones that have
   one, so its words are centred in the space rather than stranded at the
   top of it. */
.home-card:not(.home-card--photo) .home-card__body {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 640px) {
  .home-cards { grid-template-columns: repeat(2, 1fr); align-items: start; }
  /* A square photograph is as tall as the column is wide, so a card without
     one would otherwise be stretched to match and carry its words in the
     middle of a lot of nothing. Each card takes its own height instead. */
  .home-card:not(.home-card--photo) .home-card__body { height: auto; }
}

@media (min-width: 960px) {
  .home-cards { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------- why it is better */

.home-better { display: grid; gap: 34px; }

.home-better__photo {
  width: 100%;
  max-height: 420px;
  border-radius: var(--radius);
  object-fit: cover;
}

.home-better__text h2 { margin-bottom: 16px; }

/* HOM-003. The argument for a coach over a buddy, above the four benefits. */
.home-better__lede { max-width: 62ch; margin-bottom: 28px; color: var(--ink); font-size: 1.08rem; }

.home-reasons { display: grid; gap: 26px; }

.home-reason h3 { margin-bottom: 8px; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.home-reason p { color: var(--muted); }

/* Under the words, not over them, so all three headings line up. A 4:5
   portrait at its own shape: the 180px letterbox this replaced cut the person
   in the photograph in half. */
.home-reason__photo {
  width: 100%;
  height: auto;
  margin-top: 16px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

@media (min-width: 900px) {
  .home-better { grid-template-columns: 0.8fr 1.2fr; align-items: start; gap: 48px; }
  .home-better__photo { position: sticky; top: 96px; max-height: 480px; }
  .home-reasons { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .home-reason__photo { max-width: 200px; }
}

/* ----------------------------------------------------------- coming soon */

.home-soon { display: grid; gap: 30px; align-items: center; }

.home-soon__photo {
  width: 100%;
  max-height: 380px;
  border-radius: var(--radius);
  object-fit: cover;
}

.home-soon__text p { color: var(--muted); font-size: 1.04rem; }

@media (min-width: 900px) {
  .home-soon { grid-template-columns: 1fr 1fr; gap: 48px; }
  .home-soon--flip .home-soon__photo { order: 2; }
  .home-soon--flip .home-soon__text { order: 1; }
}

/* HOM-003. What is being built: five short lines, each led by its name in
   bold, with a small green mark rather than a number because they are a set
   and not a sequence. */

.home-next { display: grid; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }

.home-next li {
  position: relative;
  padding-left: 24px;
  color: var(--muted);
  font-size: 1.02rem;
}

.home-next li::before {
  position: absolute;
  top: 0.55em;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  content: "";
}

.home-next strong { color: var(--ink); }

/* ------------------------------------------------------------ who it is for */

/* Milestone 92. Three short results under the paragraph, numbered because
   they are a sequence in time rather than a set of features. The counter is
   drawn rather than left to the marker so the number keeps the brand green
   and sits on the first line of its own item. */

.home-results {
  counter-reset: result;
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.home-results li {
  position: relative;
  padding-left: 40px;
  color: var(--muted);
  font-size: 1.02rem;
}

.home-results li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  content: counter(result);
  counter-increment: result;
  font-size: 0.82rem;
  font-weight: 800;
  place-items: center;
}

.home-results strong { color: var(--ink); }

/* ---------------------------------------------------------- invite card */

.home-invite {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 64px 20px;
  background: var(--ink);
}

.home-invite__veil {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 17, 0.55);
}

.home-invite__card {
  position: relative;
  width: 100%;
  max-width: 620px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.home-invite__card h2 { margin-bottom: 12px; font-size: clamp(1.4rem, 4vw, 1.9rem); }
.home-invite__card p { margin-bottom: 24px; color: var(--muted); font-size: 1.04rem; }

.home-invite__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-invite__actions .button { width: 100%; }

@media (min-width: 600px) {
  .home-invite__actions { flex-direction: row; justify-content: center; }
  .home-invite__actions .button { width: auto; }
}

@media (min-width: 720px) {
  .home-invite { padding: 96px 20px; }
}

/* ---------------------------------------------------------------- footer */

.home-foot {
  padding: 44px 0 56px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.home-foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
/* Owner, 2026-10-06: a pipe between links, each line kept short enough not
   to wrap on a phone. */
.home-foot__links a + a {
  margin-left: 12px;
  padding-left: 13px;
  background: linear-gradient(#bdb6a8, #bdb6a8) left center / 1px 14px no-repeat;
}
.home-foot__links--legal { margin-top: 2px; }
.home-foot__links--legal a { color: var(--muted); font-weight: 600; }

.home-foot__links a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  color: var(--green);
  font-size: 0.92rem;
  font-weight: 660;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* HOM-005: the copyright line, under the links, quiet. */
.home-foot__copyright { margin: 8px 0 0; color: var(--muted); font-size: 0.86rem; }

/* ------------------------------------------------------------ Meet Eve */
/* WEB-012 (owner, 2026-10-06): the words beside a short conversation drawn
   in the app's own style. */
.home-eve { display: grid; gap: 32px; align-items: center; }
.home-eve__list { margin: 16px 0 20px; padding-left: 20px; }
.home-eve__list li { margin: 8px 0; line-height: 1.5; }
.home-eve__text > p:last-child { margin-bottom: 0; }
.home-eve__phone {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(20, 40, 32, 0.14);
}
/* Owner, 2026-10-08: the real panel's look (app.css, .eve-turn, .eve-bubble,
   .eve-confirm): Eve's hex mark beside her white bubbles, the person's
   bubbles light, and an offer drawn as the Confirm card. The Confirm here is
   a picture of the button, not a .button, so the page keeps its one primary. */
.home-eve__top { display: flex; align-items: center; gap: 10px; padding: 4px 4px 14px; border-bottom: 1px solid var(--line); font-weight: 800; }
.home-eve__msgs { display: grid; gap: 10px; padding: 16px 0 4px; }
.home-eve__turn { display: flex; align-items: flex-end; gap: 8px; max-width: 92%; justify-self: start; }
.home-eve__turn > .eve-mark { flex: none; margin-bottom: 2px; }
.home-eve__msg { min-width: 0; margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; border-bottom-left-radius: 4px; background: var(--surface); color: var(--ink); font-size: 0.95rem; line-height: 1.45; }
.home-eve__msg--me { max-width: 84%; justify-self: end; border-color: transparent; border-radius: 14px; border-bottom-right-radius: 4px; background: var(--surface-2); }
.home-eve__confirm { display: grid; gap: 8px; margin-top: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.home-eve__confirm p { margin: 0; }
.home-eve__confirm-line { color: var(--ink); font-weight: 700; }
.home-eve__confirm-help { color: var(--muted); font-size: 0.81rem; }
.home-eve__confirm-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.home-eve__confirm-yes,
.home-eve__confirm-no { display: inline-flex; min-height: 44px; align-items: center; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 720; }
.home-eve__confirm-yes { background: var(--orange); color: #24140d; }
.home-eve__confirm-no { border-color: var(--line); background: var(--surface); color: var(--green); }
@media (min-width: 900px) {
  .home-eve { grid-template-columns: 1fr 1fr; gap: 56px; }
}

/* ------------------------------------------------- phone-width overrides */

@media (max-width: 599px) {
  /* The one place a button spans the width: a phone. */
  .home-head__end .button,
  .home-hero__text .button,
  .home-banner__actions .button { width: 100%; }
  .home-banner__actions { flex-direction: column; align-items: stretch; }
  .home-banner__dismiss { text-align: center; }
  .home-head__inner { gap: 12px; }
  .home-head__end { flex: 1; justify-content: flex-end; }
  .home-head__end .button { max-width: 180px; }
  /* COA-005 005b: the brand and two buttons do not fit a phone's header,
     so there Create an account is the closing card's primary instead. */
  .home-head__signup { display: none; }
}

/* ------------------------------------------- HOM-003b, 1280 and wider */

/* The desktop photo row and the Why pair exist only at 1280 and wider.
   Below that nothing here applies, so the phone page is as approved. */
.home-photo-row,
.home-better__pair { display: none; }

@media (min-width: 1280px) {
  /* What you get: three equal photographs, then the six cards as two
     rows of three under them, every card the height of the tallest, words
     at the top. */
  .home-photo-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 22px;
  }

  .home-photo-row__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    object-fit: cover;
  }

  .home-card--photo .home-card__photo { display: none; }

  .home-cards {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    align-items: stretch;
  }

  .home-card .home-card__body,
  .home-card:not(.home-card--photo) .home-card__body {
    display: block;
    height: 100%;
  }

  /* Why: the two photographs on the left, every word on the right. HOM-005
     section 2b swapped them: the square one (her face) sits right and up,
     the portrait (the stretch) left and down over the square's lower left
     corner, so the overlap falls on the towel and never on her face. */
  .home-better {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
    gap: 56px;
  }

  .home-better > .home-better__photo,
  .home-reason__photo { display: none; }

  .home-better__pair {
    display: grid;
    position: sticky;
    top: 96px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 40px);
  }

  .home-better__pair-photo {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    object-fit: cover;
  }

  .home-better__pair-photo--back { grid-column: 4 / 13; grid-row: 1 / 10; }

  .home-better__pair-photo--front {
    z-index: 1;
    grid-column: 1 / 7;
    grid-row: 5 / 13;
    border: 6px solid #efe6d6;
    box-shadow: var(--shadow-sm);
  }
}

/* ------------------------------------------------ HOM-004, under 720px */

/* The phone page, half as long (docs/designs/hom-004-phone-home.md).
   Photos are landscape (3:2, or 16:9 for the full-bleed hero and band),
   each aimed with its own object-position, and at most one per section; a
   section that makes its point in words shows none. The steps and the
   features are rows with hairlines, not cards. Sections are 40px above and
   below. The photos hidden here are all loading="lazy", and a lazy image
   with no box is never fetched, so a phone does not download them.
   Nothing in this block reaches 720px and wider. */
@media (max-width: 719px) {
  .home-section,
  .home-start { padding: 40px 0; }
  .home-section > .home-wrap > h2 { margin-bottom: 20px; }

  /* One reading size for the running copy on a phone. The laptop's 1.02
     to 1.08rem steps are for a wide column; at 335px they only add lines. */
  .home-soon__text p,
  .home-results li,
  .home-next li,
  .home-step p,
  .home-card p,
  .home-reason p,
  .home-better__lede,
  .home-band__text p,
  .home-invite__card p { font-size: 0.94rem; line-height: 1.45; }

  .home-step h3,
  .home-card h3,
  .home-reason h3 { font-size: 1.04rem; line-height: 1.3; }

  .home-hero__text p { font-size: 1rem; }
  .home-better__lede { margin-bottom: 24px; }
  .home-reasons { gap: 18px; }
  .home-results,
  .home-next { gap: 12px; margin-top: 18px; }

  /* The last line of a section ends on the section's own 40px, not on a
     paragraph margin as well. */
  .home-soon__text > :last-child,
  .home-reason > p:last-of-type,
  .home-band__text p { margin-bottom: 0; }

  /* Hero: the photograph on top at 16:9 with both people in it, and the
     words below on the brand green, so nothing covers a face. */
  .home-hero {
    display: block;
    min-height: 0;
    background: var(--green);
  }

  .home-hero__photo {
    position: static;
    display: block;
    height: auto;
    aspect-ratio: 16 / 9;
    object-position: 40% 50%;
  }

  .home-hero__veil { display: none; }
  .home-hero__text { padding: 28px 20px 40px; }
  .home-hero__text p { margin-bottom: 22px; }

  /* The landscape crops. Each rule names the photograph's focal point. */
  .home-soon__photo,
  .home-better__photo {
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  .home-start__photo { object-position: 50% 70%; }
  #smarter .home-soon__photo { object-position: 50% 55%; }
  #being-built .home-soon__photo { object-position: 50% 45%; }
  /* The design said 50% 30%; at 3:2 that cut the top of her head, so
     20% keeps the whole head and the towel. */
  .home-better__photo { object-position: 50% 20%; }

  .home-soon,
  .home-better { gap: 20px; }

  /* Train where you are: a 16:9 band (56.25vw), the words over its lower
     half. A minimum height rather than an aspect ratio, so a larger text
     size grows the band instead of clipping the sentence. */
  .home-band {
    min-height: 56.25vw;
    align-items: flex-end;
  }

  .home-band__photo { object-position: 55% 45%; }

  /* Lighter over the top half, where the man is, and as dark as before
     under the words. */
  .home-band__veil {
    background: linear-gradient(180deg, rgba(10, 20, 17, 0.3) 0%, rgba(10, 20, 17, 0.78) 45%, rgba(10, 20, 17, 0.86) 100%);
  }

  .home-band__text { padding: 20px; }

  /* Invite-only: the photograph behind the card as on the laptop, the
     band held near the design's 320px by a thinner frame of photograph
     and a tighter card (the card's words and two stacked 44px buttons
     are most of it). */
  .home-invite { padding: 20px; }
  .home-invite__card { padding: 20px 18px; }
  .home-invite__card h2 { margin-bottom: 8px; }
  .home-invite__card p { margin-bottom: 18px; }

  /* The footer's four links, with less air under the last section. */
  .home-foot { padding: 24px 0 32px; }
  /* HOM-005: the three links and the support address on one line at 375,
     so the footer is two lines at every width. */
  .home-foot__links { column-gap: 0; }

  /* Photos a phone does not show: the three step squares, the three
     feature squares and the stretch under the fourth reason. */
  .home-step__photo,
  .home-card__photo,
  .home-reason__photo { display: none; }

  /* Owner, 2026-10-06: the feature list is broken up by its three photos,
     one above every second row, wide and short. */
  .home-card--photo .home-card__photo {
    display: block;
    margin: 18px 0 14px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
  }
  .home-card--photo:first-child .home-card__photo { margin-top: 0; }
  /* Each crop keeps the head in frame. */
  .home-card:nth-child(1) .home-card__photo { object-position: 50% 12%; }
  .home-card:nth-child(3) .home-card__photo { object-position: 50% 8%; }
  .home-card:nth-child(5) .home-card__photo { object-position: 50% 30%; }

  /* The three steps as numbered rows with a hairline between them: the
     number beside the bold line, its sentence under both. The line about
     the next set closes the list. */
  .home-steps { gap: 0; }

  .home-step {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 12px;
    align-items: center;
    overflow: visible;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .home-step:first-child { padding-top: 0; }
  .home-step:last-child { padding-bottom: 0; }
  .home-step + .home-step { border-top: 1px solid var(--line); }

  .home-step .home-step__number { width: 32px; height: 32px; margin: 0; }
  .home-step h3 { margin: 0; }
  .home-step p { grid-column: 1 / -1; margin: 8px 0 0; }
  .home-step .home-step__next { margin-top: 16px; padding-top: 16px; }

  /* The six features as rows: the icon beside the bold line, its
     sentence under both, a hairline between rows. */
  .home-cards { grid-template-columns: 1fr; gap: 0; }

  .home-card {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

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

  .home-card .home-card__body,
  .home-card:not(.home-card--photo) .home-card__body {
    display: grid;
    height: auto;
    grid-template-columns: 36px 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 12px 0;
  }

  .home-card:first-child .home-card__body { padding-top: 0; }
  .home-card:last-child .home-card__body { padding-bottom: 0; }

  .home-card .home-icon { width: 36px; height: 36px; margin: 0; border-radius: 11px; }
  .home-card .home-icon svg { width: 22px; height: 22px; }
  .home-card h3 { margin: 0; }
  .home-card p { grid-column: 1 / -1; margin: 8px 0 0; }
}