/* ============================================================
   landing.css — StoryBrand (SB7) marketing landings.
   Shared by big-five-{self,parenting,relationship}.html. Extracted from the
   story-miller-v2.html inline styles (same design system: tokens.css + base.css),
   plus a duotone hero image + a lens switcher specific to the Big Five landings.
   ============================================================ */

/* ---------- nav (wordmark + lang toggle) ---------------------- */
.nav { position: relative; z-index: var(--z-nav); padding: var(--space-5) 0; }
.nav__inner { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); }
.nav__wordmark {
  font-family: var(--font-display); font-size: var(--text-md);
  font-weight: var(--weight-medium); letter-spacing: -0.012em;
  color: var(--ink); text-decoration: none;
}
.nav__lang {
  display: inline-flex; align-items: baseline; gap: var(--space-3);
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--ink-soft); letter-spacing: 0.04em;
}
.nav__lang a, .nav__lang .nav__lang-btn {
  color: var(--ink-soft); text-decoration: none; padding: 0 0 1px;
  border: 0; border-bottom: 1px solid transparent; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.nav__lang a:hover, .nav__lang .nav__lang-btn:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nav__back { color: var(--ink-soft); text-decoration: none; }
.nav__back:hover { color: var(--ink); }

/* ---------- hero (Character + one-liner + CTA + duotone image) ---------- */
.hero { padding-block: var(--space-7) var(--section-y); }
.hero__inner { display: grid; gap: var(--space-7); }
@media (min-width: 56rem) {
  .hero__inner { grid-template-columns: 1.08fr 0.92fr; gap: var(--space-9); align-items: center; }
}
.hero__eyebrow { margin-bottom: var(--space-4); }
.hero__h1 { max-width: 16ch; text-wrap: balance; }
.hero__lede { margin-top: var(--space-5); max-width: 46ch; font-size: var(--text-md); text-wrap: pretty; }
.hero__cta { margin-top: var(--space-7); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* duotone hero image — brass/cream tint over grayscale (matches the report hero; recolours via --brass) */
.hero__media { position: relative; border-radius: var(--r-2); overflow: hidden; aspect-ratio: 4 / 5; background: var(--cream-deep); }
.hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; filter: grayscale(1) contrast(1.04) brightness(1.06); }
.hero__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, var(--brass) 0%, var(--brass-deep) 100%); mix-blend-mode: multiply; opacity: 0.8; }
@media (max-width: 55.99rem) { .hero__media { aspect-ratio: 16 / 10; } }

/* ---------- lens switcher (за теб · за родители · за двойки) ---------- */
.lens-switch {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline;
  margin-top: var(--space-6); font-family: var(--font-body); font-size: var(--text-sm);
}
.lens-switch__label { color: var(--ink-soft); }
.lens-switch a {
  color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.lens-switch a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.lens-switch [aria-current="page"] { color: var(--brass); font-weight: var(--weight-semi); border-bottom-color: transparent; }

/* ---------- generic SB section heading ---------------------- */
.sb__eyebrow { display: block; margin-bottom: var(--space-3); }
.sb__h2 { max-width: 22ch; text-wrap: balance; }
.sb__lead { margin-top: var(--space-5); max-width: 58ch; font-size: var(--text-md); line-height: 1.5; color: var(--ink-muted); font-family: var(--font-display); text-wrap: pretty; }
.sb p { text-wrap: pretty; }

/* ---------- problem: three stacked levels ------------------- */
.levels { margin-top: var(--space-7); display: grid; gap: var(--space-5); }
.level { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4) var(--space-5); align-items: start; padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.level__tag { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brass); white-space: nowrap; padding-top: 0.35em; }
.level__body h3 { font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.015em; max-width: 30ch; text-wrap: balance; }
.level__body p { margin-top: var(--space-3); color: var(--ink-muted); max-width: 54ch; }
@media (max-width: 34rem) { .level { grid-template-columns: 1fr; gap: var(--space-2); } }

/* ---------- guide: empathy + authority ---------------------- */
.guide__grid { margin-top: var(--space-7); display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .guide__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-9); align-items: start; } }
.guide__empathy p + p { margin-top: var(--space-4); }
.pull { margin-top: var(--space-6); padding-left: var(--space-5); border-left: 1px solid var(--brass); font-family: var(--font-display); font-style: italic; font-size: var(--text-md); line-height: 1.45; color: var(--ink-muted); max-width: 44ch; text-wrap: pretty; }
.proof { display: grid; gap: var(--space-4); }
.proof__item { padding-left: var(--space-5); border-left: 1px solid var(--brass); }
.proof__num { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--ink); line-height: 1.1; letter-spacing: -0.015em; }
.proof__label { margin-top: var(--space-1); font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-soft); line-height: var(--lh-snug); }

/* ---------- report-proof: what your report looks like ------- */
.cards { margin-top: var(--space-7); display: grid; gap: var(--space-5); }
@media (min-width: 48rem) { .cards { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.card { padding-left: var(--space-5); border-left: 2px solid var(--brass); }
.card h3 { font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.card p { margin-top: var(--space-3); color: var(--ink-muted); max-width: 50ch; }
.report-note { margin-top: var(--space-6); font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-soft); }

/* ---------- plan: three steps ------------------------------- */
.plan { margin-top: var(--space-7); display: grid; gap: var(--space-5); }
@media (min-width: 48rem) { .plan { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.step { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--space-6); box-shadow: 0 1px 2px oklch(0.37 0.082 60 / 0.04), 0 14px 30px -18px oklch(0.37 0.082 60 / 0.18); }
.step__num { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--paper); background: var(--brass); border-radius: 50%; margin-bottom: var(--space-4); }
.step h3 { font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.step p { margin-top: var(--space-3); font-size: var(--text-base); color: var(--ink-muted); }

/* ---------- stakes: failure / success two-up ---------------- */
.twoup { margin-top: var(--space-7); display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .twoup { grid-template-columns: 1fr 1fr; gap: var(--space-7); } }
.twoup__card h3 { font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: var(--space-3); }
.twoup__card--fail h3 { color: var(--ink-muted); }
.twoup__card p { color: var(--ink-muted); max-width: 52ch; }
.twoup__rule { height: 2px; width: 2.5rem; border: 0; margin-bottom: var(--space-4); }
.twoup__card--fail .twoup__rule { background: var(--rule-strong); }
.twoup__card--win .twoup__rule { background: var(--brass); }

/* ---------- closing CTA band (dark) ------------------------- */
.cta-band { background: var(--ink); color: var(--cream); }
.cta-band__inner { text-align: left; }
.cta-band h2 { color: var(--paper); max-width: 20ch; text-wrap: balance; }
.cta-band p { margin: var(--space-5) 0 var(--space-6); color: oklch(0.93 0.025 80 / 0.86); font-family: var(--font-display); font-size: var(--text-md); max-width: 46ch; line-height: 1.5; text-wrap: pretty; }
.cta-band .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta-band .btn:hover { border-color: var(--brass-soft); }
.cta-band__sub { display: block; margin-top: var(--space-5); font-family: var(--font-body); font-size: var(--text-sm); color: oklch(0.93 0.025 80 / 0.82); letter-spacing: 0.02em; }
.cta-band .link-brass { color: var(--brass-soft); border-bottom-color: var(--brass-soft); }
.cta-band .link-brass:hover { color: var(--paper); border-bottom-color: var(--paper); }

/* ---------- footer (shared) --------------------------------- */
.footer { background: var(--cream-deep); padding-block: var(--space-7); border-top: 1px solid var(--rule); }
.footer__row { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); justify-content: space-between; align-items: baseline; }
.footer__row + .footer__row { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.footer__row p { margin: 0; font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-muted); max-width: none; }
.footer__name { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--ink); letter-spacing: -0.012em; }
.footer__legal a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.footer__legal a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.footer__legal a + a { margin-left: var(--space-3); }

.no-js [data-reveal] { opacity: 1; transform: none; }