/* NESTWORTH homepage. Modeled section-for-section on the Ownable homepage (itself modeled on
   Rentmate), rendered in the Nestworth quiz world so the click into the funnel has no visual
   seam. ReliefMax v2 uses the identical skeleton, which is what confirmed it as the house
   pattern rather than a one-off.

   🔴 Tokens MIRROR assets/nw-heloc.css and must never drift from it. This file does not touch
      the quiz stylesheet: the funnel is live product, the homepage is its lobby.
   Breakpoints match the model: 640 / 810 / 1200.

   THE ONE SATURATED OBJECT is .btn, and it is GOLD, because the quiz's CTA is gold. Gold is a
   light surface and always takes dark ink type (12:1); white on gold is 1.6:1 and fails. */

:root {
  /* mirrored from assets/nw-heloc.css */
  --field: #F3E1F8;        /* page ground — MUST equal the story frames' top edge (measured) */
  --field-deep: #F2E5F0;   /* tinted panels and bands */
  --ink: #2F1533;
  --ink-soft: rgba(47, 21, 51, .70);
  --ink-faint: rgba(47, 21, 51, .50);
  --tile: #FFFFFF;
  --line: rgba(47, 21, 51, .12);
  --magenta: #722277;
  --magenta-lo: #542145;
  --magenta-deep: #65206A;
  --orchid: #964A96;
  --orchid-soft: #D897D3;
  --gold: #FBD974;
  --gold-hi: #FCEA91;
  --gold-lo: #F5C445;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(47, 21, 51, .08);
  --font-head: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.shell { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 810px) { .shell { padding: 0 32px; } }

h1, h2, h3 { font-family: var(--font-head); letter-spacing: -0.02em; }

/* ---------- primary button: the ONE saturated object on the page ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-lo) 100%);
  color: var(--ink);
  font-family: var(--font-head); font-weight: 800; font-size: 16px;
  padding: 15px 28px; border-radius: 999px; border: 0; cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(245, 196, 69, .9);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(245, 196, 69, 1); }
.btn .material-symbols-outlined { font-size: 20px; }
.btn-sm { padding: 11px 20px; font-size: 14px; box-shadow: 0 5px 14px -6px rgba(245, 196, 69, .9); }
.link-quiet {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--ink-soft); border-bottom: 2px solid var(--line);
  padding-bottom: 2px; transition: color .15s ease, border-color .15s ease;
}
.link-quiet:hover { color: var(--ink); border-color: var(--magenta); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(243, 225, 248, .88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; gap: 24px; height: 68px; }
/* The wordmark is live text, exactly as in the quiz header: Plus Jakarta Sans 800 at
   tracking -0.55px (measured off tryrenta.com), ink "Nest" + magenta "worth". */
.nav-logo {
  font-family: var(--font-head); font-weight: 800; font-size: 22px;
  letter-spacing: -0.55px; color: var(--ink); white-space: nowrap;
}
.nav-logo i { font-style: normal; color: var(--magenta); }
.nav-links { display: none; align-items: center; gap: 28px; margin-left: 12px; }
.nav-links a { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); }
.nav-cta { margin-left: auto; }
@media (min-width: 810px) { .nav-links { display: flex; } }

/* ---------- hero ---------- */
.hero { padding: 56px 0 0; text-align: center; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--field-deep); color: var(--magenta-deep);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  padding: 8px 16px; border-radius: 999px;
}
.hero-pill .material-symbols-outlined { font-size: 16px; }
.hero h1 {
  margin: 22px auto 0; max-width: 900px;
  font-weight: 800; font-size: 38px; line-height: 1.06; letter-spacing: -0.03em;
  /* No hard <br>: let the browser balance, so no single word is stranded on a line. */
  text-wrap: balance;
}
/* The accent word carries the wordmark's rule: "worth" is magenta, everywhere it appears. */
.hero h1 .worth { color: var(--magenta); }
.hero-sub { margin: 18px auto 0; max-width: 660px; font-size: 16px; color: var(--ink-soft); }
.hero-ctas { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; }
.hero-trust {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink-faint);
}
/* The quizzes' padlock, verbatim from nw-heloc.css .ff-lock — same icon on both surfaces. */
.ff-lock {
  width: 12px; height: 12px; flex: none; display: inline-block;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V11a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V11a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E");
}
.hero-stats {
  margin: 36px auto 0; max-width: 820px;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
.hero-stat {
  background: var(--tile); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 20px; display: flex; align-items: center; gap: 10px; text-align: left;
}
.hero-stat b { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--magenta); white-space: nowrap; }
.hero-stat span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.35; }
@media (min-width: 640px) {
  .hero h1 { font-size: 52px; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .hero-stat { display: block; }
  .hero-stat b { display: block; font-size: 30px; }
  .hero-stat span { display: block; margin-top: 4px; }
}
@media (min-width: 1200px) { .hero h1 { font-size: 62px; } }

/* The stage: a full-width story frame whose top edge is already the page ground (measured to
   deviation 0-2), so it bleeds straight out of the hero. NO overlay, no mask, never cropped. */
.hero-stage { margin-top: -6px; }
.hero-stage img { width: 100%; height: auto; }

/* ---------- generic section furniture ---------- */
.section { padding: 72px 0; }
@media (min-width: 810px) { .section { padding: 96px 0; } }
.section-head { text-align: center; max-width: 700px; margin: 0 auto; }
.section-head h2 { font-size: 30px; font-weight: 800; line-height: 1.12; }
.section-head p { margin-top: 14px; font-size: 16px; color: var(--ink-soft); }
@media (min-width: 810px) { .section-head h2 { font-size: 40px; } }

/* ---------- value trio ---------- */
.trio { margin-top: 44px; display: grid; gap: 18px; }
@media (min-width: 810px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio-card {
  background: var(--tile); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 24px;
}
.trio-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--field-deep); color: var(--magenta-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.trio-icon .material-symbols-outlined { font-size: 24px; }
.trio-card h3 { margin-top: 16px; font-size: 19px; font-weight: 800; }
.trio-card p { margin-top: 8px; font-size: 14.5px; color: var(--ink-soft); }

/* ---------- path cards, one per quiz lane ---------- */
.paths { margin-top: 44px; display: grid; gap: 20px; }
@media (min-width: 810px) { .paths { grid-template-columns: repeat(3, 1fr); } }
.path-card {
  background: var(--tile); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.path-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(47, 21, 51, .14); }
.path-art { aspect-ratio: 16 / 9; overflow: hidden; }
.path-art img { width: 100%; height: 100%; object-fit: cover; }
.path-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.path-body h3 { font-size: 20px; font-weight: 800; }
.path-body p { margin-top: 8px; font-size: 14.5px; color: var(--ink-soft); flex: 1; }
.path-body .btn { margin-top: 18px; align-self: flex-start; }

/* ---------- how it works: dashed-rail timeline ---------- */
.steps { margin-top: 52px; display: grid; gap: 48px; max-width: 920px; margin-left: auto; margin-right: auto; }
.step { position: relative; padding-left: 52px; }
.step-rail {
  position: absolute; left: 17px; top: 40px; bottom: -48px;
  border-left: 2px dashed var(--orchid-soft);
}
.step:last-child .step-rail { display: none; }
.step-n {
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  color: var(--ink);
  font-family: var(--font-head); font-weight: 800; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(245, 196, 69, .5);
}
.step-grid { display: grid; gap: 20px; align-items: center; }
@media (min-width: 810px) { .step-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; } }
.step h3 { font-size: 21px; font-weight: 800; }
.step p { margin-top: 8px; font-size: 15px; color: var(--ink-soft); max-width: 460px; }
.step-chip {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 7px;
  background: var(--field-deep); color: var(--magenta-deep);
  font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
}
.step-chip .material-symbols-outlined { font-size: 15px; }
.step-shot { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.step-shot img { width: 100%; height: auto; }

/* ---------- the numbers: tinted band. Statistical proof instead of social proof. ---------- */
.numbers-band { background: var(--field-deep); }
.numbers { margin-top: 44px; display: grid; gap: 16px; }
@media (min-width: 640px) { .numbers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .numbers { grid-template-columns: repeat(3, 1fr); } }
.num-card {
  background: var(--tile); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px;
}
.num-card b { font-family: var(--font-head); font-size: 34px; font-weight: 800; color: var(--magenta); line-height: 1; }
.num-card p { margin-top: 10px; font-size: 14.5px; color: var(--ink); font-weight: 500; }
.num-card small { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-faint); }
.numbers-note { margin-top: 26px; text-align: center; font-size: 12.5px; color: var(--ink-faint); max-width: 720px; margin-left: auto; margin-right: auto; }

/* ---------- FAQ ---------- */
.faq { margin: 44px auto 0; max-width: 760px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 20px 4px; font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--ink);
}
.faq-q .material-symbols-outlined { font-size: 20px; color: var(--ink-faint); transition: transform .2s ease; flex-shrink: 0; }
.faq-item.open .faq-q .material-symbols-outlined { transform: rotate(45deg); color: var(--magenta); }
.faq-a { display: none; padding: 0 4px 20px; font-size: 15px; color: var(--ink-soft); max-width: 660px; }
.faq-item.open .faq-a { display: block; }

/* ---------- CTA band ---------- */
.cta-wrap { padding: 0 12px 20px; }
@media (min-width: 810px) { .cta-wrap { padding: 0 20px 28px; } }
.cta-band {
  max-width: 1180px; margin: 0 auto;
  background: var(--field-deep); border-radius: 32px; overflow: hidden;
}
.cta-grid { display: grid; align-items: center; }
@media (min-width: 810px) { .cta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); } }
.cta-copy { padding: 44px 28px; text-align: center; }
@media (min-width: 810px) { .cta-copy { padding: 64px 20px 64px 56px; text-align: left; } }
.cta-copy h2 { font-size: 30px; font-weight: 800; line-height: 1.1; }
.cta-copy p { margin-top: 14px; font-size: 16px; color: var(--ink-soft); max-width: 460px; margin-left: auto; margin-right: auto; }
.cta-copy .btn { margin-top: 26px; }
.cta-copy .cta-trust { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--ink-faint); }
@media (min-width: 810px) {
  .cta-copy h2 { font-size: 38px; }
  .cta-copy p { margin-left: 0; }
}
.cta-art { display: none; }
@media (min-width: 810px) { .cta-art { display: block; height: 100%; min-height: 320px; } }
.cta-art img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.cta-art-mobile { aspect-ratio: 21 / 9; }
.cta-art-mobile img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 810px) { .cta-art-mobile { display: none; } }

/* ---------- footer ---------- */
.footer { padding: 56px 0 44px; }
.footer-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; justify-content: space-between; }
.footer-logo {
  font-family: var(--font-head); font-weight: 800; font-size: 20px;
  letter-spacing: -0.5px; color: var(--ink);
}
.footer-logo i { font-style: normal; color: var(--magenta); }
.footer-blurb { margin-top: 12px; max-width: 330px; font-size: 14px; color: var(--ink-soft); }
.footer-col h4 { font-family: var(--font-head); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.footer-col ul { list-style: none; margin-top: 14px; }
.footer-col li + li { margin-top: 10px; }
.footer-col a { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); }
.footer-col a:hover { color: var(--ink); }
.footer-legal { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.footer-legal p { font-size: 12.5px; color: var(--ink-faint); max-width: 860px; }
.footer-legal p + p { margin-top: 10px; }