/* ReliefMax homepage — its own stylesheet.
   Built on the house homepage standard (quiz-to-website skill). It NEVER touches the
   quiz CSS: the funnel is live product. It only re-declares the funnel's tokens so the homepage
   and the quiz can't drift apart visually, and so the click into the quiz has no seam.
   Tokens measured from the ReliefMax world block in stitch.css + the logo file. */

:root {
  --field:      #EFF8F1;            /* page ground — the quiz's mint surface */
  --field-deep: #E2F1E7;            /* tinted panels / numbers band */
  --ink:        #103d2c;            /* brand ink */
  --ink-mid:    #084033;            /* wordmark green, headings */
  --ink-soft:   rgba(16, 61, 44, .70);
  --ink-faint:  rgba(16, 61, 44, .52);
  --tile:       #FFFFFF;
  --line:       rgba(16, 61, 44, .12);
  --green:      #0b933f;            /* the CTA green — the ONLY saturated fill on the page */
  --green-lo:   #0a7f37;
  --lime:       #B8D400;
  --gold:       #f5b02e;
  --radius:     18px;
  --shadow:     0 10px 30px rgba(16, 61, 44, .08);
  --font-head:  'Montserrat', 'Inter', sans-serif;
  --font-body:  'Inter', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--field); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; color: var(--ink-mid);
  letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.shell { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- Buttons. One saturated fill on the whole page (Von Restorff). ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--green); color: #fff; text-decoration: none;
  font-family: var(--font-head); font-weight: 800; font-size: 16px;
  padding: 15px 26px; border-radius: 999px; border: 0; cursor: pointer;
  box-shadow: 0 10px 24px -12px var(--green);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { background: var(--green-lo); transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px var(--green); }
.btn .material-symbols-outlined { font-size: 19px; }
.btn-sm { padding: 11px 18px; font-size: 14.5px; }
.link-quiet { color: var(--ink-soft); text-decoration: underline;
  text-underline-offset: 4px; font-weight: 600; font-size: 15px; }
.link-quiet:hover { color: var(--ink); }

/* ---------- Nav: translucent, gains a border once you scroll (ported idiom) ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(239, 248, 241, .82);
  backdrop-filter: blur(10px); border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease; }
.nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 20px -18px var(--ink); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 18px; }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 15px; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 810px) { .nav-links { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: 46px 0 0; text-align: center; }
.hero-pill { display: inline-flex; align-items: center; gap: 7px; background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px;
  font-size: 13px; font-weight: 600; color: var(--ink-mid); box-shadow: var(--shadow); }
.hero-pill .material-symbols-outlined { font-size: 16px; color: var(--green); }
/* Two-sentence headline (2026-08-31). The old 16ch cap was sized for a 26-character line;
   at 69 characters it stacked into a tower. Wider measure and a slightly smaller ceiling
   keep it to three lines on desktop and readable on a phone. */
.hero h1 { font-size: clamp(28px, 5.2vw, 46px); margin: 20px auto 0; max-width: 23ch; }
.hero h1 .accent { color: var(--green); }
.hero-sub { max-width: 62ch; margin: 18px auto 0; color: var(--ink-soft); font-size: 17px; }
/* The house highlighter. Same anatomy Ownable and Renta both use: the brand accent at ~30%
   alpha behind ink text, 600 weight, 2px 6px padding, 4px radius, and box-decoration-break:
   clone so the swipe wraps cleanly across lines instead of stretching as one long bar.
   ReliefMax's accent here is the lime from the logo swoosh (#B8D400), which is the token that
   actually reads as a highlighter; the CTA green would go muddy behind dark text. */
.hero-mark {
  background: rgba(184, 212, 0, .30);
  color: var(--ink-mid);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero-ctas { display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-top: 26px; flex-wrap: wrap; }
/* Block, not inline-flex: when this line wraps to two lines on a phone the flex centring
   stranded the lock beside the block instead of leading the first line. */
.hero-trust { display: block; max-width: 42ch; margin: 16px auto 0;
  font-size: 13px; color: var(--ink-faint); text-align: center; }
.hero-trust .material-symbols-outlined { font-size: 15px; vertical-align: -2px; margin-right: 5px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin: 34px auto 0; max-width: 860px; }
.hero-stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 16px; box-shadow: var(--shadow); }
.hero-stat b { display: block; font-family: var(--font-head); font-weight: 800;
  font-size: 26px; color: var(--ink-mid); }
.hero-stat span { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; line-height: 1.45; }
@media (max-width: 640px) { .hero-stats { grid-template-columns: 1fr; } }

/* ---------- Hero stage.
   The skill's rule is that the frame's baked top fade meets the page ground with no overlay.
   These are the funnel's V1 story frames, which have grey skies and no baked fade, so the same
   color-matched overlay the quiz pages use carries the blend here. Opaque end is EXACTLY the
   page ground, so there is no seam, and the image is never cropped. ---------- */
.hero-stage { position: relative; margin-top: 40px; line-height: 0; }
.hero-stage img { width: 100%; height: auto; }
.hero-stage::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 46%;
  background: linear-gradient(180deg, var(--field) 0%, var(--field) 12%,
    rgba(239, 248, 241, .86) 38%, rgba(239, 248, 241, 0) 100%);
  pointer-events: none; z-index: 1; }

/* ---------- Sections ---------- */
.section { padding: 74px 0; }
.section-head { text-align: center; max-width: 66ch; margin: 0 auto 38px; }
.section-head h2 { font-size: clamp(25px, 3.6vw, 36px); }
.section-head p { color: var(--ink-soft); margin: 12px 0 0; }

/* Value trio */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.trio-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; box-shadow: var(--shadow); }
.trio-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; background: var(--field-deep);
  color: var(--green); margin-bottom: 14px; }
.trio-card h3 { font-size: 18px; }
.trio-card p { color: var(--ink-soft); font-size: 15px; margin: 9px 0 0; }
@media (max-width: 810px) { .trio { grid-template-columns: 1fr; } }

/* Path cards — one per quiz lane */
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.path-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .14s ease, box-shadow .14s ease; }
.path-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(16, 61, 44, .13); }
/* Section crops are CSS only — image files are never edited (skill rule). */
.path-art { aspect-ratio: 16 / 8; overflow: hidden; background: var(--field-deep); }
.path-art img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.path-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.path-body h3 { font-size: 18px; }
.path-body p { color: var(--ink-soft); font-size: 14.5px; margin: 0; flex: 1; }
.path-body .btn { align-self: flex-start; }
@media (max-width: 960px) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .paths { grid-template-columns: 1fr; } }

/* How-it-works timeline: dashed rail the last step hides */
.steps { margin: 0; padding: 0; max-width: 900px; margin-inline: auto; }
.step { position: relative; padding: 0 0 34px 54px; }
.step:last-child { padding-bottom: 0; }
.step-rail { position: absolute; left: 17px; top: 34px; bottom: 0; border-left: 2px dashed var(--line); }
.step:last-child .step-rail { display: none; }
.step-n { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--green); color: #fff; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: 15px; }
.step-grid { display: grid; grid-template-columns: 1fr 260px; gap: 22px; align-items: center; }
.step-grid h3 { font-size: 18px; }
.step-grid p { color: var(--ink-soft); font-size: 15px; margin: 8px 0 0; }
.step-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  background: var(--field-deep); border-radius: 999px; padding: 6px 13px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-mid); }
.step-chip .material-symbols-outlined { font-size: 15px; }
.step-shot { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); background: var(--field-deep); }
.step-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
@media (max-width: 810px) { .step-grid { grid-template-columns: 1fr; } .step-shot { max-width: 340px; } }

/* Numbers band */
.numbers-band { background: var(--field-deep); }
.numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.num-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); }
.num-card b { display: block; font-family: var(--font-head); font-weight: 800;
  font-size: 32px; color: var(--green); }
.num-card p { margin: 8px 0 10px; font-size: 14.5px; color: var(--ink); }
.num-card small { font-size: 11.5px; color: var(--ink-faint); }
.numbers-note { margin: 26px auto 0; max-width: 80ch; text-align: center;
  font-size: 12.5px; color: var(--ink-faint); }
@media (max-width: 960px) { .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .numbers { grid-template-columns: 1fr; } }

/* FAQ — one open at a time */
.faq { max-width: 860px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 10px; overflow: hidden; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; background: none; border: 0; cursor: pointer; text-align: left;
  padding: 18px 20px; font-family: var(--font-head); font-weight: 700; font-size: 16px;
  color: var(--ink-mid); }
.faq-q .material-symbols-outlined { color: var(--green); transition: transform .18s ease; }
.faq-item.open .faq-q .material-symbols-outlined { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 20px 18px; color: var(--ink-soft); font-size: 15px; }
.faq-item.open .faq-a { display: block; }

/* CTA band */
.cta-wrap { padding: 0 20px 74px; }
.cta-band { max-width: 1120px; margin: 0 auto; background: var(--ink-mid); color: #fff;
  border-radius: 32px; overflow: hidden; }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.cta-copy { padding: 46px 40px; }
.cta-copy h2 { color: #fff; font-size: clamp(24px, 3.2vw, 33px); }
.cta-copy p { color: rgba(255, 255, 255, .8); margin: 12px 0 22px; }
.cta-trust { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.cta-trust .material-symbols-outlined { font-size: 15px; }
.cta-art { align-self: stretch; min-height: 260px; }
.cta-art img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.cta-art-mobile { display: none; }
@media (max-width: 810px) {
  .cta-grid { grid-template-columns: 1fr; }
  .cta-art { display: none; }
  .cta-art-mobile { display: block; aspect-ratio: 16 / 8; }
  .cta-art-mobile img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
  .cta-copy { padding: 34px 24px; }
}

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 52px 0 34px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
.footer-logo img { height: 28px; width: auto; }
.footer-blurb { color: var(--ink-soft); font-size: 14.5px; margin: 12px 0 0; max-width: 42ch; }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint); font-weight: 700; }
.footer-col ul { list-style: none; margin: 12px 0 0; padding: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: var(--ink-soft); text-decoration: none; font-size: 14.5px; }
.footer-col a:hover { color: var(--ink); text-decoration: underline; }
.footer-legal { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 22px; }
.footer-legal p { color: var(--ink-faint); font-size: 12px; margin: 0 0 8px; }
@media (max-width: 810px) { .footer-top { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}