/* SabaRoute v6 — landing and trust pages (static HTML). Tokens come from /v6/base.css.
   Editorial direction: large headings, hairline rules instead of boxes, one accent. */

main.page { flex: 1 0 auto; width: min(1100px, 100% - 2 * var(--pad)); margin: 0 auto; padding: var(--s4) 0 var(--s8); }
.breadcrumb { font-size: 13px; color: var(--ink-3); margin-bottom: var(--s5); }
.breadcrumb a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.breadcrumb a:hover { color: var(--ink); border-color: var(--ink); }

/* Hero */
.hero .lead, .hero-note, .item p, .step-body p, .section > p, .callout { text-wrap: pretty; }
.hero { padding: var(--s4) 0 var(--s4); }
.hero .kicker { color: var(--accent); margin-bottom: var(--s3); }
.hero h1 { font-size: clamp(34px, 5vw, 68px); line-height: 1.15; letter-spacing: -.02em; }
.hero .lead { margin-top: var(--s4); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.9; color: var(--ink-2); }
.hero-note { margin-top: var(--s3); font-size: 14px; color: var(--ink-3); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 12px 28px; border-radius: 0; border: 0; font: 700 16px/1.3 var(--sans-bold); text-decoration: none; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.cta.primary { background: var(--ink); color: var(--bg); }
.cta.primary:hover { background: var(--accent); color: var(--accent-ink); }
.cta.secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.cta.secondary:hover { background: var(--ink); color: var(--bg); }
.cta:active { transform: translateY(1px); }

/* Sections */
.section { margin: clamp(48px, 7vw, 96px) 0 0; }
.section > h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.3; letter-spacing: -.01em; margin-bottom: var(--s4); }
.section > p, .section > .lead-p { color: var(--ink-2); font-size: 16px; margin-top: var(--s2); }
.section > p:first-of-type { margin-top: 0; }
.surface { background: transparent; border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: var(--s4) 0 0; }
.surface > h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.3; letter-spacing: -.01em; margin-bottom: var(--s4); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.item { padding: var(--s3) 0 0; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; background: transparent; }
.surface .item { background: transparent; border-color: var(--line-strong); }
.item h3 { font-size: 18px; line-height: 1.5; margin-bottom: 6px; }
.item p { font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.item .tagline { display: inline-block; margin-bottom: 8px; font: 700 12px/1.5 var(--sans-bold); letter-spacing: .08em; color: var(--accent); border: 1px solid currentColor; padding: 0 8px; border-radius: 0; background: transparent; }
.item.ok .tagline { color: var(--ok); }
.item.chk .tagline { color: var(--chk); }
.list { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; color: var(--ink-2); }
.list li::marker { color: var(--ink-3); }

/* Numbered steps — big numerals, same language as the to-do list in the result view */
.steps { list-style: none; margin: var(--s4) 0 0; padding: 0; counter-reset: step; border-top: 1px solid var(--ink); }
.step { position: relative; display: grid; grid-template-columns: clamp(56px, 8vw, 104px) minmax(0, 1fr); column-gap: var(--s3); padding: 0; border-bottom: 1px solid var(--line); }
.step::before { display: none; }
.step-num { padding-top: 22px; font: 900 clamp(34px, 4.6vw, 64px)/1 var(--sans-bold); color: var(--accent); background: transparent; border: 0; border-radius: 0; width: auto; height: auto; display: block; }
.step-body { padding: 22px 0 26px; border: 0; border-radius: 0; background: transparent; }
.step-body h3 { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.5; }
.step-body p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }

/* Callouts and chips */
.callout { padding: var(--s4); border-radius: 0; background: var(--accent-soft); border: 0; border-left: 4px solid var(--accent); color: var(--ink); font-size: 15.5px; line-height: 1.9; }
.callout strong { display: block; font-size: 18px; margin-bottom: 4px; }
.callout.caution { background: var(--chk-soft); border-left-color: var(--chk); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.mini-nav { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.mini-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 700 14px/1.3 var(--sans-bold); text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
.mini-nav a:hover { background: var(--ink); color: var(--bg); }
.next-band { margin-top: clamp(56px, 8vw, 104px); padding: var(--s6) var(--s5); border: 0; border-radius: 0; background: var(--ink); color: var(--bg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.next-band h2 { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.4; color: var(--bg); }
.next-band p { color: color-mix(in srgb, var(--bg) 75%, transparent); font-size: 15px; margin-top: 4px; }
.next-band .cta.primary { background: var(--bg); color: var(--ink); }
.next-band .cta.primary:hover { background: var(--accent); color: var(--accent-ink); }
.next-band .cta.secondary { color: var(--bg); box-shadow: inset 0 0 0 1.5px var(--bg); }
.next-band .cta.secondary:hover { background: var(--bg); color: var(--ink); }

/* Policy and long-form text */
.policy .section { margin-top: var(--s6); }
.policy .section > h2 { font-size: clamp(22px, 2.2vw, 28px); padding-top: var(--s4); border-top: 1px solid var(--ink); }
.policy .section:first-of-type > h2 { border-top: 0; padding-top: 0; }
.policy p, .policy li { color: var(--ink-2); }
.policy p + p { margin-top: var(--s2); }
.policy .list { margin-top: var(--s2); }
.dl-rows { display: grid; margin: var(--s3) 0 0; border: 0; border-top: 1px solid var(--ink); border-radius: 0; background: transparent; }
.dl-rows > div { display: grid; grid-template-columns: 220px 1fr; gap: var(--s3); padding: 18px 0; border-bottom: 1px solid var(--line); }
.dl-rows dt { font: 700 15px/1.7 var(--sans-bold); color: var(--ink); }
.dl-rows dd { margin: 0; font-size: 15px; color: var(--ink-2); }

@media (max-width: 720px) {
  main.page { padding-top: var(--s3); }
  .hero { padding: var(--s3) 0 var(--s5); }
  .section { margin-top: var(--s6); }
  .grid, .grid.three { grid-template-columns: 1fr; gap: var(--s4); }
  .cta-row { display: grid; }
  .cta { width: 100%; }
  .step { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; }
  .step-num { padding-top: 20px; font-size: 34px; }
  .step-body { padding: 18px 0 22px; }
  .dl-rows > div { grid-template-columns: 1fr; gap: 2px; }
  .next-band { padding: var(--s5) var(--s3); }
}
@media print {
  .cta-row, .mini-nav, .next-band { display: none; }
}