/* ============================================================
 * how-liway-works.css
 * Page-specific styles for /how-liway-works/.
 * Builds on tokens.css + styles.css from the main marketing site.
 * ============================================================ */

/* ─── NAV LOCKUP (logo + wordmark together) ──────────────── */
.nav-lockup {
  gap: 10px;
}
.nav-lockup svg { display: block; }

/* ─── HERO ───────────────────────────────────────────────── */
.hlw-hero {
  padding-top: 88px;
  padding-bottom: 56px;
  background: var(--cream-100);
}
.hlw-hero .section-head {
  margin-bottom: 40px;
}
.hlw-display {
  font-family: "Geist", sans-serif;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--slate-950);
  margin: 0 0 18px;
}
.hlw-display em {
  font-style: italic;
  font-weight: 500;
}
.hlw-hero .lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--slate-700);
  margin: 0;
  max-width: 640px;
}

/* ─── INTERACTIVE WIDGET ─────────────────────────────────── */
.hlw-interactive {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 720px;
}

.hlw-card {
  /* Inherits .leeway-card from styles.css; override max-width for this page */
  max-width: 720px;
  margin: 0;
  transition: border-color 0.2s ease;
}
.hlw-card-tight {
  border-color: var(--tight-bg);
}
.hlw-card-risk {
  border-color: var(--risk-bg);
}

/* Fill color variants — overrides .leeway-fill gradient */
.hlw-fill-tight {
  background: linear-gradient(90deg, #f59e0b, #d97706) !important;
}
.hlw-fill-risk {
  background: linear-gradient(90deg, #ef4444, #b91c1c) !important;
}

/* ─── SLIDER CONTROLS ────────────────────────────────────── */
.hlw-controls {
  display: grid;
  gap: 14px;
  background: var(--cream-50);
  border: 1px solid var(--cream-300);
  border-radius: 14px;
  padding: 18px 20px 16px;
}
.hlw-slider {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: baseline;
  cursor: pointer;
}
.hlw-slider-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
  grid-column: 1 / 2;
  grid-row: 1;
}
.hlw-slider-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-950);
  font-variant-numeric: tabular-nums;
  grid-column: 2 / 3;
  grid-row: 1;
}
.hlw-slider input[type="range"] {
  grid-column: 1 / 3;
  grid-row: 2;
  width: 100%;
  height: 4px;
  background: var(--cream-200);
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  margin-top: 6px;
}
.hlw-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cream-50);
  border: 2.5px solid var(--euc-600);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.hlw-slider input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.hlw-slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cream-50);
  border: 2.5px solid var(--euc-600);
  cursor: pointer;
}

.hlw-hint {
  margin-top: 18px;
  font-size: 13px;
  color: var(--slate-500);
  font-style: italic;
  max-width: 720px;
}

/* ─── TERMS YOU'LL SEE ───────────────────────────────────── */
.hlw-terms {
  padding: 88px 0 72px;
}
.terms-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.term-card {
  background: var(--cream-50);
  border: 1px solid var(--euc-200);
  border-radius: 16px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.term-card:hover {
  border-color: var(--euc-400);
  transform: translateY(-2px);
}
.term-word {
  font-family: "Newsreader", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--euc-700);
  margin: 0;
}
.term-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin: 6px 0 12px;
}
.term-explain {
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate-700);
  margin: 0;
}

/* ─── HOW WE FIGURE IT OUT ───────────────────────────────── */
.hlw-figure {
  background: var(--cream-200);
  border-top: 1px solid var(--cream-300);
  border-bottom: 1px solid var(--cream-300);
  padding: 88px 0;
}
.figure-pills {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.figure-pill {
  background: var(--cream-50);
  border: 1px solid var(--cream-300);
  border-radius: 18px;
  padding: 22px 26px 20px;
  text-align: center;
  min-width: 200px;
  flex: 0 1 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.figure-pill-leeway {
  background: var(--euc-700);
  border-color: var(--euc-800);
  color: var(--cream-100);
}
.figure-pill-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.figure-pill-leeway .figure-pill-label { color: var(--euc-200); }
.figure-pill-amount {
  font-family: "Geist", sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--slate-950);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.figure-pill-leeway .figure-pill-amount { color: var(--cream-100); }
.figure-pill-caption {
  font-size: 12px;
  color: var(--slate-500);
  font-style: italic;
}
.figure-pill-leeway .figure-pill-caption { color: var(--euc-200); }
.figure-op {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-500);
  padding: 0 4px;
}

/* ─── VERDICTS GRID ──────────────────────────────────────── */
.hlw-verdicts {
  padding: 96px 0;
}
.verdicts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.verdict-card {
  background: var(--cream-50);
  border: 1px solid var(--cream-300);
  border-radius: 16px;
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.verdict-safe   { border-color: var(--safe-bg); background: linear-gradient(180deg, var(--safe-bg) 0%, var(--cream-50) 30%); }
.verdict-tight  { border-color: var(--tight-bg); background: linear-gradient(180deg, var(--tight-bg) 0%, var(--cream-50) 30%); }
.verdict-risk   { border-color: var(--risk-bg); background: linear-gradient(180deg, var(--risk-bg) 0%, var(--cream-50) 30%); }

.verdict-pill {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 999px;
}
.verdict-pill.safe  { background: var(--safe-bg); color: var(--safe-fg); }
.verdict-pill.tight { background: var(--tight-bg); color: var(--tight-fg); }
.verdict-pill.risk  { background: var(--risk-bg); color: var(--risk-fg); }

.verdict-headline {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--slate-950);
  margin: 4px 0 0;
}

.verdict-story {
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate-700);
  margin: 0;
}

/* ─── WHY THIS MATTERS ───────────────────────────────────── */
.hlw-why {
  background: var(--slate-950);
  color: var(--cream-100);
  padding: 96px 0;
}
.hlw-why-inner .eyebrow {
  color: var(--euc-300);
}
.hlw-why .section-title {
  color: var(--cream-100);
}
.hlw-why .section-title em {
  color: var(--euc-300);
}
.contrast-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1000px;
}
.contrast-col {
  border-radius: 18px;
  padding: 32px 28px 28px;
}
.contrast-them {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.contrast-us {
  background: var(--cream-100);
  color: var(--slate-950);
}
.contrast-col h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.contrast-them h3 { color: var(--slate-300); }
.contrast-us   h3 { color: var(--slate-500); }
.contrast-big {
  font-family: "Geist", sans-serif;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.contrast-them .contrast-big { color: var(--slate-300); }
.contrast-us   .contrast-big { color: var(--euc-700); }
.contrast-caption {
  font-size: 14px;
  font-style: italic;
  margin: 0 0 18px;
  font-weight: 500;
}
.contrast-them .contrast-caption { color: var(--slate-300); }
.contrast-us   .contrast-caption { color: var(--slate-700); }
.contrast-body {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.contrast-them .contrast-body { color: rgba(255,255,255,0.7); }
.contrast-us   .contrast-body { color: var(--slate-700); }

/* ─── CTA ────────────────────────────────────────────────── */
.hlw-cta {
  /* inherits cta-block; override padding for this page */
  padding: 88px 0;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .hlw-hero { padding-top: 56px; padding-bottom: 32px; }
  .figure-pills {
    flex-direction: column;
    gap: 12px;
  }
  .figure-pill { width: 100%; max-width: 320px; }
  .figure-op { padding: 0; }
  .terms-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .term-word { font-size: 32px; }
  .verdicts-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .contrast-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .contrast-big {
    font-size: 48px;
  }
}

/* ─── Header parity with the rebuilt landing page (#1007) ──────────────
 * This page predates the rebuild and its header was visibly a size out: 14px
 * links in slate-700, a tighter pill, and an arrow glyph the new header does
 * not use. Matched to `.site-header` / `.site-nav` / `.btn--sm` in home.css.
 *
 * Overridden here rather than by importing home.css, which carries a full
 * reset (`h1,h2,h3,h4,p,figure { margin:0 }`, `a { text-decoration:none }`)
 * that this page's styles.css layout does not expect. Restyling the chrome is
 * safe; re-basing the whole page belongs with the #967 rebuild, which also
 * drops the React/Babel dependency and moves the body copy onto Geist.
 * ------------------------------------------------------------------- */
/* 74px matches the landing header: 14px padding above and below the
   tallest child, which is the 41px CTA pill. */
.nav-inner { height: 74px; }
.nav-logo svg { display: block; }
.nav-links { gap: 34px; }
.nav-links a:not(.nav-cta) {
  font-size: 16px;
  font-weight: 500;
  color: var(--slate-950);
}
.nav-links a:not(.nav-cta):hover { color: var(--color-link); }
.nav-cta {
  font-size: 16px;
  font-weight: 600;
  padding: 11px 24px;
  gap: 0;
}
.nav-cta:hover { background: var(--euc-700); }

/* Current page, unlinked — the same "you are here" treatment the legal pages
   use, so the marker does not introduce a second navigation idea. */
.nav-links .nav-current {
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-950);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .nav-links a:not(.nav-cta),
  .nav-links .nav-current { display: none; }
}

/* Header inset parity across the site (#1006). This page's .container is
   1180px and the landing's shell is 1160px, so the brand started 10px further
   left here. Scoped to the header — the page body keeps its own width. */
.nav .container { max-width: 1160px; }
/* Content-width parity across the site. styles.css sets .container to 1180px
   while the landing and the tour are both on the 1160px shell, so navigating
   between them shifted everything 10px sideways. Overridden here rather than in
   styles.css, which the current production landing also uses. */
.container { max-width: 1160px; }

/* ─── Hero band (#967) ─────────────────────────────────────────
 * The same dark band the tour carries under the header, so the two pages open
 * the same way. The interactive meter below is pulled up to overlap it, which
 * is what stops the band reading as an unrelated strip above the content —
 * the same fix the tour's phone needed. */
.hlw-hero { padding-top: 0; }
.hlw-band {
  background: #263033;
  /* Runs past the fine print, not just the heading — the meter and the hint
     sit ON the band, with breathing room beneath before the cream resumes. */
  padding: 44px 0 72px;
}
.hlw-band .section-head { margin-bottom: 0; }
.hlw-band .eyebrow { color: #92b8a8; }
.hlw-band .eyebrow::before,
.hlw-band .eyebrow span { background: #92b8a8; }
.hlw-band .hlw-display { color: var(--cream-100); }
.hlw-band .hlw-display em { color: #92b8a8; }
.hlw-band .lede { color: #cbc7be; }

/* Inside the band now, so no negative pull — just space under the heading. */
.hlw-hero-body { margin-top: 34px; }
.hlw-band .hlw-hint { color: #a3a09a; }
.hlw-hero-body .hlw-hint { margin-top: 14px; }

@media (max-width: 720px) {
  .hlw-band { padding: 32px 0 76px; }
  .hlw-hero-body { margin-top: 26px; }
}