/* Pathways Home — homeowner marketing site.
   Palette and type mirror the app's design tokens (mobile/src/lib/theme.ts):
   leaf green #709900 on cream #F5F7EE, charcoal #333 text, Fraunces display +
   DM Sans body + Nunito for money figures. */

:root {
  --green: #709900;
  --green-deep: #4f6e00;
  --green-darkest: #253300;
  --ink-dark: #121900;
  --lime: #c6de6b;
  --lime-bright: #d5fd6a;

  --cream: #f5f7ee;
  --cream-top: #edf2de;
  --white: #ffffff;

  --text: #333333;
  --text-muted: #5f6b4e;
  --text-faint: #96a085;
  --hairline: #e4e9d4;

  --on-dark: #ffffff;
  --on-dark-muted: #dce9bb;

  --display: "Fraunces", Georgia, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --numeric: "Nunito", var(--sans);

  --wrap: 1140px;
  --radius: 20px;
  --radius-lg: 28px;
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing — the screenshots carry width/height attributes
   (so the browser can reserve layout space and avoid a jump). Without it, a
   CSS width of 100% pairs with the raw attribute height and the image renders
   at full pixel height, stretched. Rules that set an explicit height below
   (nav logo, pillar icons, partner logos) are more specific and still win. */
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--green-deep);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
}

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

p {
  margin: 0 0 1rem;
}

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

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 14px;
}

.eyebrow.on-dark {
  color: var(--lime);
}

.lede {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 56ch;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--green);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(58, 74, 0, 0.24);
}

.btn-primary:hover {
  background: var(--green-deep);
}

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn-outline {
  background: transparent;
  color: var(--green-deep);
  border-color: var(--green);
}

.btn-outline:hover {
  background: rgba(112, 153, 0, 0.08);
}

/* --------------------------------------------------- store call-to-action */

/* Two separate store buttons, so a visitor picks their own platform instead of
   us guessing from the user agent.

   Each one is a filled pill that spells out its store. They used to be bare
   white glyphs sharing one green pill: at a glance that reads as decoration —
   a couple of logos — rather than "these are the two buttons you press", and
   people were walking past them. The container itself is now just layout. */
.store-cta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Base treatment is for the light nav bar: solid green, white text. The hero
   flips it below, because green on the dark hero would sink into it. */
.store-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid var(--green);
  background: var(--green);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(58, 74, 0, 0.26);
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.05;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.16s ease;
}

.store-link:hover,
.store-link:focus-visible {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(58, 74, 0, 0.34);
  text-decoration: none;
}

.store-link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

/* "Claim your invite on" — the same phrase on both buttons, so the ask is on
   the button being pressed rather than in a heading above the pair. */
.store-link-kicker {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

.store-link-name {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.store-icon {
  width: 22px;
  height: 22px;
  flex: none;
}

/* The Apple glyph's optical center sits below its bounding box. */
.store-link-apple .store-icon {
  position: relative;
  top: -1px;
}

/* Nav: same two-line badge, dialled down so the pair fits beside the logo. */
.nav .store-link {
  padding: 8px 15px;
  gap: 8px;
}

.nav .store-link-kicker {
  font-size: 0.62rem;
}

.nav .store-link-name {
  font-size: 0.9rem;
}

.nav .store-icon {
  width: 19px;
  height: 19px;
}

/* Hero version — white pills on the dark hero, the highest-contrast thing on
   the screen after the headline, and sized to match the .btn beside them. */
.store-cta-lg .store-link {
  padding: 11px 22px;
  background: var(--white);
  border-color: var(--white);
  color: var(--green-darkest);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
}

.store-cta-lg .store-link:hover,
.store-cta-lg .store-link:focus-visible {
  background: var(--green);
  border-color: var(--white);
  color: var(--white);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
}

.store-cta-lg .store-icon {
  width: 26px;
  height: 26px;
}

.store-cta-lg .store-link-name {
  font-size: 1.08rem;
}

/* ------------------------------------------------- single detected button */

/* The phone version of the hero call to action: one wide button that says what
   pressing it does, instead of a pair the visitor has to choose between. It is
   only ever shown to a visitor whose platform we actually identified — the
   <head> script sets data-os on <html>, and hidden is the default here, so a
   desktop visitor, or one with JS off, keeps the two-store pair below.

   The store is still named, in the second line: the button leads somewhere the
   visitor recognises, and the phrase people were told to expect ("claim your
   invite") is on the button they press. */
.store-solo {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  padding: 16px 26px;
  border-radius: 999px;
  border: 2px solid var(--white);
  background: var(--white);
  color: var(--green-darkest);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
  font-family: var(--sans);
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.2s ease,
    transform 0.16s ease;
}

.store-solo:hover,
.store-solo:focus-visible {
  background: var(--green);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
  text-decoration: none;
}

.store-solo .store-icon {
  width: 28px;
  height: 28px;
}

.store-solo-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  line-height: 1.1;
}

.store-solo-name {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.store-solo-kicker {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

/* Placed: one big button replaces the pair, in the hero and in the nav. */
html[data-os="ios"] .store-solo-ios,
html[data-os="android"] .store-solo-android {
  display: inline-flex;
}

html[data-os="ios"] .hero-cta .store-cta-lg,
html[data-os="android"] .hero-cta .store-cta-lg,
html[data-os="ios"] .nav .store-link-play,
html[data-os="android"] .nav .store-link-apple {
  display: none;
}

/* ------------------------------------------------------------------- nav */

/* The nav is sticky, so an anchor scrolled to y=0 lands underneath it. Every
   in-page target needs to stop short by the nav's height (72px) plus a little
   breathing room, or its first line sits behind the blur. */
:target,
#features,
#inside,
#privacy,
#how,
#faq {
  scroll-margin-top: 88px;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 247, 238, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
}

.nav-logo img {
  height: 34px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

.nav-links a:hover {
  color: var(--green-deep);
  text-decoration: none;
}

.nav .btn {
  padding: 11px 22px;
  font-size: 0.95rem;
}

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

.hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(18, 25, 0, 0.82) 0%,
      rgba(37, 51, 0, 0.78) 45%,
      rgba(18, 25, 0, 0.94) 100%
    ),
    url("assets/homepath.webp") center bottom / cover no-repeat;
  color: var(--on-dark);
  padding: 88px 0 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.hero h1 {
  color: var(--white);
}

.hero h1 .accent {
  color: var(--lime-bright);
}

.hero-lede {
  font-size: 1.2rem;
  color: var(--on-dark-muted);
  max-width: 46ch;
  margin: 22px 0 32px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.hero-note {
  margin: 26px 0 0;
  font-size: 0.9rem;
  color: rgba(220, 233, 187, 0.85);
}

.hero-phone {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: 40px;
}

/* Phone frame — pure CSS bezel around the real app screenshots. */
.phone {
  position: relative;
  width: 300px;
  max-width: 76vw;
  border-radius: 44px;
  padding: 11px;
  background: linear-gradient(160deg, #2b2f22, #14170e);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.phone::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 24px;
  border-radius: 999px;
  background: #14170e;
  z-index: 2;
}

.phone img {
  display: block;
  width: 100%;
  border-radius: 34px;
  background: var(--cream);
}

.phone.floating {
  animation: float 7s ease-in-out infinite;
}

/* Two phones for the home-search row: the map, then the home you tapped.
   Smaller than a solo .phone so the pair still fits the media column, with
   the bezel radius/notch scaled to match — otherwise they look like a
   different device. The negative margin is what makes them overlap. */
.phone-pair {
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-pair .phone {
  width: 232px;
  max-width: 42vw;
  border-radius: 34px;
  padding: 9px;
}

.phone-pair .phone img {
  border-radius: 26px;
}

.phone-pair .phone::after {
  top: 17px;
  width: 70px;
  height: 18px;
}

.phone-pair .phone:first-child {
  transform: translateY(-18px) rotate(-3deg);
  z-index: 1;
}

.phone-pair .phone:last-child {
  margin-left: -46px;
  transform: translateY(18px) rotate(3deg);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone.floating {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------- personalized hero (/h/) */

/* Only rendered on pathwayshome.com/h/<token>, where the visitor's own home
   replaces the sample screenshot. The screen is real markup rather than an
   image so the property photo and address can be dropped in — the .phone bezel,
   notch and float animation above are reused untouched.

   The value and equity figures are NOT here. They're deliberately absent from
   the HTML, not hidden with CSS: this page is reachable by anyone holding the
   link, and "blurred" is not a security boundary. What .ph-locked blurs is a
   dummy glyph. */

.ph-greet {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  background: rgba(198, 222, 107, 0.14);
  border: 1px solid rgba(198, 222, 107, 0.32);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--lime);
}

.ph-greet-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime-bright);
  box-shadow: 0 0 0 4px rgba(213, 253, 106, 0.18);
}

.ph-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 300 / 620;
  border-radius: 34px;
  overflow: hidden;
  background: var(--white);
  font-family: var(--sans);
  text-align: left;
}

/* .phone img rounds its corners for the screenshot phones; inside a real screen
   the photo is flush to the edges and the screen does the rounding. */
.ph-screen img {
  border-radius: 0;
}

/* height, not flex-basis. A flex item's default min-height:auto refuses to go
   below the image's intrinsic height, so a tall photo blows the screen out to
   its natural size and pushes the address off the bottom. min-height:0 plus an
   explicit percentage of the (definite, via aspect-ratio) screen height is what
   actually crops it. */
.ph-photo {
  display: block;
  width: 100%;
  height: 34%;
  flex: 0 0 auto;
  min-height: 0;
  object-fit: cover;
  background: var(--cream);
}

/* No photo on file, or the S3 fetch failed. A flat tinted tile reads as "no
   picture yet" rather than as a broken image. */
.ph-photo-empty {
  background:
    linear-gradient(145deg, var(--cream-top), var(--hairline));
}

.ph-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  min-height: 0;
  overflow: hidden;
}

/* The address is rendered in caps (see personalizedSiteService). Caps set solid
   look cramped, so both lines get a little tracking back. */
.ph-addr {
  margin: 0;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--ink-dark);
}

.ph-city {
  margin: 3px 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.ph-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
}

.ph-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ph-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ph-stat-row .ph-stat {
  margin-top: 12px;
}

/* A dummy glyph, blurred. There is no real figure underneath it. */
.ph-locked {
  display: inline-block;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted);
  filter: blur(5px);
  opacity: 0.7;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.ph-locked-lg {
  font-size: 1.85rem;
  filter: blur(8px);
}

/* Part of the mocked app screen, and a real link to the store — it sits right
   under the blurred figures, so it is what people reach for. */
.ph-unlock {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Full width of the mocked card, not a chip hugging its left edge: the copy
     is a sentence now, and a sentence set in a small pill wraps into a shape
     nobody reads. Full width also makes it the obvious thing to press. */
  align-self: stretch;
  gap: 7px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    box-shadow 0.2s ease,
    transform 0.16s ease;
}

.ph-unlock:hover,
.ph-unlock:focus-visible {
  background: var(--green-deep);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(58, 74, 0, 0.28);
  text-decoration: none;
}

.ph-unlock svg {
  width: 13px;
  height: 13px;
  flex: none;
}

/* One store glyph, matching where the button leads. Apple is the default —
   same as the href — and Android swaps both together. */
.ph-unlock-play {
  display: none;
}

html[data-os="android"] .ph-unlock-apple {
  display: none;
}

html[data-os="android"] .ph-unlock-play {
  display: block;
}

/* The inviting loan officer, pinned to the bottom of the screen the way the app
   pins their contact card. */
.ph-lo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.ph-lo-photo {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--hairline);
}

.ph-lo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ph-lo-text strong {
  font-size: 0.82rem;
  color: var(--ink-dark);
}

.ph-lo-text span {
  font-size: 0.7rem;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Once the hero stacks, the homeowner's own house goes FIRST.

   These links arrive by text, so essentially every visit is a phone. The page
   earns its keep in the half-second where someone recognizes their own front
   door — and that can't happen underneath a headline and two paragraphs. Only
   `order` is needed: moving one grid item to -1 puts it ahead of its sibling
   without touching the sibling's own rules, so the ordinary homepage is
   completely unaffected.

   The screen keeps its full proportions here rather than being shortened: at
   76vw on a 390x844 phone the whole card — photo, address, locked figures,
   unlock chip and the officer's row — lands at y=743, comfortably above the
   fold once it's first. Squeezing it only clipped the officer off the bottom. */
/* Hidden everywhere by default: it is a second copy of the eyebrow, revealed
   only in the stacked-hero case below. Anything that can't do :has() simply
   never sees it and keeps the in-column eyebrow — the same page as before. */
.hero-eyebrow-lead {
  display: none;
}

@media (max-width: 980px) {
  .hero-phone.ph-first {
    order: -1;
    padding-top: 0;
  }

  /* Above the phone, which is itself at order:-1. Only on a hero that actually
     leads with a phone — on the ordinary homepage the text still comes first,
     so a line above it would just be the eyebrow in its usual place, twice. */
  .hero-grid:has(.ph-first) .hero-eyebrow-lead {
    display: block;
    order: -2;
    /* Pulls back most of the grid's 40px row gap: this line belongs to the
       phone under it, not floating halfway between it and the nav. */
    margin: 0 0 -22px;
  }

  .hero-grid:has(.ph-first) .hero-eyebrow-inline {
    display: none;
  }

  /* Centered text throughout the stacked hero would leave the card's left-aligned
     address looking like a mistake; the greeting pill is what gets centered. */
  .ph-greet {
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------- value pillars */

.pillars {
  background: var(--green-darkest);
  color: var(--on-dark);
  padding: 0;
}

.pillars .wrap {
  padding-top: 56px;
  padding-bottom: 56px;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.pillar .icon {
  height: 56px;
  margin-bottom: 16px;
}

.pillar .icon img {
  height: 100%;
  width: auto;
}

.pillar h3 {
  color: var(--white);
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.pillar p {
  color: var(--on-dark-muted);
  font-size: 0.98rem;
  margin: 0;
}

/* -------------------------------------------------------------- sections */

section {
  padding: 92px 0;
}

.section-head {
  max-width: 60ch;
  margin-bottom: 52px;
}

.section-head p {
  margin-bottom: 0;
}

/* Alternating feature rows */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 46px 0;
}

.feature + .feature {
  border-top: 1px solid var(--hairline);
}

.feature.reverse .feature-media {
  order: -1;
}

.feature-media {
  display: flex;
  justify-content: center;
}

.feature h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 14px;
}

.feature p {
  color: var(--text-muted);
  max-width: 48ch;
}

.feature p:last-child {
  margin-bottom: 0;
}

/* Card grid for the smaller features */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: 0 2px 10px rgba(58, 74, 0, 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(58, 74, 0, 0.1);
}

.card .badge {
  display: inline-block;
  background: #eaf1d6;
  color: var(--green-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.card h3 {
  font-size: 1.22rem;
  margin-bottom: 10px;
}

.card p {
  color: var(--text-muted);
  font-size: 0.98rem;
  margin: 0;
}

/* Sample money figure used in the equity feature */

.figure-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.figure-chip {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 18px;
  min-width: 150px;
}

.figure-chip .label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.figure-chip .value {
  font-family: var(--numeric);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--green-deep);
  line-height: 1.2;
}

/* ------------------------------------------------------------ how it works */

.steps {
  background: var(--cream-top);
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: 66px;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-family: var(--numeric);
  font-weight: 700;
  font-size: 1.3rem;
}

.step h3 {
  font-size: 1.22rem;
  margin-bottom: 10px;
}

.step p {
  color: var(--text-muted);
  font-size: 0.98rem;
  margin: 0;
}

/* -------------------------------------------------------------- privacy */

/* Light band. It sits between features 3 and 4, both of which are on the cream
   body, so white is what separates it from them. */
.privacy {
  background: var(--white);
  color: var(--text);
}

.privacy h2 {
  color: var(--text);
}

.privacy .lede {
  color: var(--text-muted);
}

/* #features stops short and .features-cont starts flush, so the only vertical
   space around the band is the band's own 92px. Without this the two adjoining
   section paddings stack and it reads as a gap, not a divider. */
#features {
  padding-bottom: 0;
}

.features-cont {
  padding-top: 0;
}

/* Side-by-side contrast: the national listing portals vs this app. The two
   columns are deliberately asymmetric in weight — "them" recedes, "us" is
   bordered in brand green — so the comparison reads at a glance. */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 8px;
}

.compare-col {
  border-radius: var(--radius);
  padding: 30px 28px;
}

.compare-col h3 {
  font-size: 1.15rem;
  margin-bottom: 18px;
}

.compare-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.compare-col li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  font-size: 0.98rem;
  line-height: 1.5;
}

.compare-col li:last-child {
  margin-bottom: 0;
}

.compare-col li::before {
  position: absolute;
  left: 0;
  top: -1px;
  font-size: 1.05rem;
  font-weight: 700;
}

.compare-col.them {
  background: var(--cream);
  border: 1px solid var(--hairline);
}

.compare-col.them h3 {
  color: var(--text-faint);
}

.compare-col.them li {
  color: var(--text-muted);
}

.compare-col.them li::before {
  content: "\00d7"; /* × */
  /* Darker than the dark theme's #e27a63, which dropped to ~2.6:1 on white. */
  color: #c0543a;
}

.compare-col.us {
  background: rgba(112, 153, 0, 0.08);
  border: 1px solid var(--green);
}

.compare-col.us h3 {
  color: var(--green-deep);
}

.compare-col.us li {
  color: var(--text);
}

.compare-col.us li::before {
  content: "\2713"; /* ✓ */
  color: var(--green-deep);
}

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 26px;
  margin-top: 44px;
}

.privacy-item {
  border-left: 3px solid var(--green);
  padding-left: 20px;
}

.privacy-item h3 {
  color: var(--green-deep);
  font-size: 1.08rem;
  margin-bottom: 8px;
}

.privacy-item p {
  color: var(--text-muted);
  font-size: 0.96rem;
  margin: 0;
}

/* ------------------------------------------------------------------- faq */

.faq-list {
  max-width: 780px;
  margin: 0 auto;
}

details {
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0;
}

details summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

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

details summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--green);
  line-height: 1;
  flex-shrink: 0;
}

details[open] summary::after {
  content: "–";
}

details p {
  color: var(--text-muted);
  margin: 14px 0 0;
  font-size: 1rem;
  max-width: 68ch;
}

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

.footer {
  background: var(--ink-dark);
  color: var(--on-dark-muted);
  padding: 60px 0 34px;
  font-size: 0.94rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(198, 237, 91, 0.18);
}

.footer-logo img {
  height: 40px;
  width: auto;
  margin-bottom: 16px;
}

.footer-blurb {
  max-width: 38ch;
  color: rgba(220, 233, 187, 0.78);
  font-size: 0.92rem;
}

.footer h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
  margin: 0 0 14px;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer li {
  margin-bottom: 9px;
}

.footer a {
  color: var(--on-dark-muted);
}

.footer a:hover {
  color: var(--lime-bright);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding-top: 26px;
  font-size: 0.85rem;
  color: rgba(220, 233, 187, 0.62);
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 980px) {
  .hero-grid,
  .feature {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero {
    padding-top: 62px;
    text-align: center;
  }

  .hero-lede {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta {
    justify-content: center;
  }

  /* The hero is centered at this width, so its buttons follow. */
  .store-cta {
    justify-content: center;
  }

  /* The nav links go here rather than at 720: the two store buttons now carry
     words, and the anchors are what can be given up to make room for them. */
  .nav-links {
    display: none;
  }

  .feature.reverse .feature-media {
    order: 0;
  }

  .feature p {
    max-width: none;
  }

  .pillar-grid,
  .step-grid,
  .compare {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
  }

  section {
    padding: 64px 0;
  }
}

/* Phones: the words don't fit next to the logo, so the nav store button goes
   back to an icon. The hero's full-size "Unlock your app today" button is one
   scroll down, and it is the one people actually press on a phone. */
@media (max-width: 560px) {
  .nav .store-link {
    padding: 9px;
    border-radius: 50%;
  }

  .nav .store-link-text {
    /* Still the accessible name of the link, just not painted. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nav .store-icon {
    width: 20px;
    height: 20px;
  }

  .nav .store-cta {
    gap: 8px;
  }
}