/* 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 */

/* One green pill holding a label and two separately clickable store icons, so
   a visitor picks their own platform instead of us guessing from the user
   agent. Shaped like .btn but it can't BE a .btn — a button that is itself a
   link can't contain two more links. */
.store-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 6px 20px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(58, 74, 0, 0.24);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

.store-cta-label {
  margin-right: 6px;
  white-space: nowrap;
}

/* Each icon is its own tap target. 38px square keeps it at Apple's 44pt
   minimum once the pill's padding is counted. */
.store-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--white);
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    transform 0.16s ease;
}

.store-link:hover,
.store-link:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  text-decoration: none;
}

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

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

/* Hero version — matches the taller .btn next to it. */
.store-cta-lg {
  font-size: 1rem;
  padding: 7px 9px 7px 24px;
}

.store-cta-lg .store-link {
  width: 42px;
  height: 42px;
}

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

/* ------------------------------------------------------------------- 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;
  }
}

/* --------------------------------------------------------- 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;
  }

  .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;
  }

  .nav-links {
    display: none;
  }
}