/* RigMap website — layout concept: the page reads like the road. Wide asphalt bands, green guide signs carry the
   facts, yellow clearance signs carry the hazards, amber is the one action colour (the app icon's arrow). */
:root {
  color-scheme: dark;
  --asphalt: #0A1424;        /* page ground (night drive, matches the app splash) */
  --asphalt-2: #101D33;      /* raised band / panel */
  --asphalt-3: #172843;      /* control fill */
  --line: #24365A;
  --ink: #EEF2F8;
  --ink-2: #A8B5CA;
  --amber: #FFB526;          /* action colour */
  --amber-ink: #1B1304;      /* text on amber */
  --amber-text: #FFC24D;     /* amber used as text on the ground */
  --guide: #0B6B3A;          /* highway guide-sign green */
  --guide-edge: #E9F2EC;
  --caution: #F5C518;        /* clearance / warning sign yellow */
  --route: #2F7BFF;          /* the blue route line */
  --font-display: "Overpass", "Highway Gothic", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "Overpass Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --step--1: 0.875rem; --step-0: 1.0625rem; --step-1: 1.25rem; --step-2: 1.6rem; --step-3: 2.15rem; --step-4: clamp(2.4rem, 5.4vw, 3.9rem);
  --radius: 10px;
  --wrap: 1160px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --asphalt: #F2F4F8; --asphalt-2: #FFFFFF; --asphalt-3: #E6EBF2; --line: #D3DBE6;
    --ink: #0B1A33; --ink-2: #46566F; --amber-text: #8F5600; --guide-edge: #FFFFFF;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --asphalt: #F2F4F8; --asphalt-2: #FFFFFF; --asphalt-3: #E6EBF2; --line: #D3DBE6;
  --ink: #0B1A33; --ink-2: #46566F; --amber-text: #8F5600; --guide-edge: #FFFFFF;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--asphalt); color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--font-body);
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--amber-text); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: var(--step-4); font-weight: 900; }
h2 { font-size: var(--step-3); font-weight: 800; }
h3 { font-size: var(--step-1); font-weight: 800; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.measure { max-width: 66ch; }
.eyebrow { font: 700 var(--step--1)/1 var(--font-data); text-transform: uppercase; letter-spacing: 0.12em; color: var(--amber-text); }
.lede { font-size: var(--step-1); color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--ink-2); }
.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--amber); color: var(--amber-ink); padding: 8px 12px; border-radius: 6px; z-index: 50; }
.skip:focus { left: 12px; }

/* ── Header ── */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--asphalt) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 900 1.3rem/1 var(--font-display); }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 700; padding: 8px 12px; border-radius: 8px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: var(--asphalt-3); }
.nav-toggle { display: none; margin-left: auto; background: var(--asphalt-3); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font: 700 var(--step--1) var(--font-body); cursor: pointer; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 16px; background: var(--asphalt-2); border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .nav a { padding: 12px; }
  .nav .btn { margin-top: 8px; justify-content: center; }
}

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 800 var(--step-0)/1 var(--font-display); text-decoration: none; padding: 14px 20px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; }
.btn-primary { background: var(--amber); color: var(--amber-ink); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { color: var(--ink); border-color: var(--line); background: transparent; }
.btn-ghost:hover { background: var(--asphalt-3); }
.btn-sm { padding: 10px 14px; font-size: var(--step--1); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Sections ── */
.band { padding-block: clamp(56px, 8vw, 96px); }
.band-raised { background: var(--asphalt-2); border-block: 1px solid var(--line); }
.section-head { display: grid; gap: 12px; margin-bottom: 36px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } }
@media (min-width: 640px) and (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Hero ── */
.hero { padding-block: clamp(40px, 6vw, 76px) clamp(48px, 7vw, 88px); }
.hero .grid-2 { grid-template-columns: 1.1fr 0.9fr; }
@media (max-width: 900px) { .hero .grid-2 { grid-template-columns: 1fr; } }
.hero h1 span { color: var(--amber-text); }
.hero-copy { display: grid; gap: 22px; }
.profile-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: var(--asphalt-2); border: 1px solid var(--line); font: 700 var(--step--1) var(--font-data); width: fit-content; max-width: 100%; }
.profile-chip .ok { color: #3DDC84; }

/* Phone mock (pure CSS/SVG illustration of the in-cab screen) */
.phone { width: min(340px, 100%); margin-inline: auto; aspect-ratio: 9 / 18.6; border-radius: 42px; padding: 12px; background: #05080F; box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 2px #2A3550; position: relative; }
.screen { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: #3E4A3A; }
.screen svg.map { position: absolute; inset: 0; width: 100%; height: 100%; }
.nav-banner { position: absolute; left: 8px; right: 8px; top: 10px; background: #11161B; border-radius: 16px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.nav-banner .dist { font: 900 1.45rem/1 var(--font-display); }
.nav-banner .instr { font: 600 .82rem/1.25 var(--font-body); color: #A8B0B9; }
.nav-banner .instr b { color: #fff; }
.lanes { position: absolute; left: 8px; right: 8px; top: 92px; display: flex; gap: 6px; justify-content: center; background: #11161B; border-radius: 12px; padding: 7px; }
.lanes span { width: 28px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: #5F6873; font: 900 1rem/1 var(--font-display); }
.lanes span.on { color: #0A84FF; background: rgba(10,132,255,.14); }
.speed-card { position: absolute; left: 10px; bottom: 74px; display: flex; align-items: center; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.35); color: #000; }
.speed-card > div { width: 50px; height: 56px; display: grid; place-items: center; text-align: center; }
.speed-card .v { font: 900 1.35rem/1 var(--font-display); }
.speed-card .u { font: 800 .5rem/1 var(--font-body); color: rgba(0,0,0,.55); }
.speed-card .sep { width: 1px; height: 40px; background: rgba(0,0,0,.18); }
.speed-card .sign { width: 36px; height: 42px; border: 2px solid #000; border-radius: 5px; display: grid; place-items: center; align-content: center; }
.speed-card .sign small { font: 900 .45rem/1 var(--font-body); }
.speed-card .sign b { font: 900 1.05rem/1 var(--font-display); }
.chips { position: absolute; right: 8px; top: 140px; display: grid; gap: 6px; justify-items: end; }
.chip { display: flex; align-items: center; gap: 6px; background: #fff; color: #000; border-radius: 999px; padding: 4px 9px 4px 4px; font: 800 .66rem/1 var(--font-body); box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.chip i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 900 .6rem/1 var(--font-data); font-style: normal; }
.chip em { font-style: normal; color: rgba(0,0,0,.65); font-weight: 700; }
.eta-bar { position: absolute; left: 8px; right: 8px; bottom: 10px; background: #11161B; border-radius: 16px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 6px; text-align: center; color: #fff; }
.eta-bar b { display: block; font: 900 1.05rem/1.1 var(--font-display); }
.eta-bar b.green { color: #34C759; }
.eta-bar small { font: 600 .58rem/1 var(--font-body); color: #A8B0B9; }

/* ── Guide-sign facts band ── */
.guide { background: var(--guide); color: #fff; border-radius: 14px; border: 3px solid var(--guide-edge); box-shadow: 0 0 0 3px var(--guide); padding: 22px 26px; }
.guide-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .guide-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide .stat b { display: block; font: 900 clamp(1.6rem, 3.4vw, 2.3rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.guide .stat span { font: 600 var(--step--1)/1.35 var(--font-body); color: rgba(255,255,255,.86); }
.guide-note { margin-top: 12px; font: 600 .78rem/1.4 var(--font-body); color: var(--ink-2); }

/* ── Feature blocks ── */
.feature { display: grid; gap: 10px; padding: 22px; border-radius: var(--radius); background: var(--asphalt-2); border: 1px solid var(--line); }
.feature .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--asphalt-3); color: var(--amber-text); }
.feature .ico svg { width: 22px; height: 22px; }
.feature p { color: var(--ink-2); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--ink-2); }
.ticks li::before { content: ""; width: 14px; height: 14px; margin-top: 6px; border-radius: 3px; background: var(--amber); }
.ticks li b { color: var(--ink); }

/* Clearance sign (yellow diamond-style rectangle used for hazard callouts) */
.clearance { display: inline-grid; place-items: center; background: var(--caution); color: #111; border: 4px solid #111; outline: 3px solid var(--caution); border-radius: 8px; padding: 14px 22px; font: 900 2rem/1 var(--font-display); text-align: center; }
.clearance small { display: block; font: 800 .8rem/1.2 var(--font-body); letter-spacing: .06em; }

/* ── Route options explorer ── */
.explorer { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .explorer { grid-template-columns: 1fr; } }
.opt-group { display: grid; gap: 8px; }
.opt-group + .opt-group { margin-top: 18px; }
.opt-group h4 { font: 700 var(--step--1)/1 var(--font-data); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); margin-bottom: 4px; }
.opt-list { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { font: 800 var(--step--1)/1 var(--font-display); color: var(--ink); background: var(--asphalt-3); border: 2px solid var(--line); border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.opt[aria-pressed="true"], .opt[aria-selected="true"] { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); }
.opt-panel { background: var(--asphalt-2); border: 1px solid var(--line); border-radius: 14px; padding: 26px; display: grid; gap: 14px; min-height: 260px; }
.opt-panel .kicker { font: 700 var(--step--1)/1 var(--font-data); color: var(--amber-text); text-transform: uppercase; letter-spacing: .1em; }
.opt-panel ul { margin: 0; padding-left: 20px; color: var(--ink-2); display: grid; gap: 6px; }
.avoid-summary { font: 700 var(--step--1)/1.5 var(--font-data); color: var(--ink-2); border-top: 1px dashed var(--line); padding-top: 12px; }

/* ── Truck profile check (illustrative calculator) ── */
.calc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .calc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 6px; }
.field label { font: 700 var(--step--1)/1 var(--font-body); color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; font: 700 var(--step-0)/1.3 var(--font-data); color: var(--ink); background: var(--asphalt-3); border: 2px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.field textarea { font-family: var(--font-body); font-weight: 400; min-height: 140px; resize: vertical; }
.calc-out { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
@media (max-width: 560px) { .calc-out { grid-template-columns: 1fr; } }
.unit-toggle { display: inline-flex; border: 2px solid var(--line); border-radius: 999px; overflow: hidden; }
.unit-toggle button { font: 800 var(--step--1)/1 var(--font-display); background: transparent; color: var(--ink-2); border: 0; padding: 9px 14px; cursor: pointer; }
.unit-toggle button[aria-pressed="true"] { background: var(--amber); color: var(--amber-ink); }

/* ── Tabs (features page) ── */
.toc { display: flex; flex-wrap: wrap; gap: 8px; }
.toc a { text-decoration: none; color: var(--ink); background: var(--asphalt-3); border: 1px solid var(--line); padding: 9px 14px; border-radius: 999px; font: 700 var(--step--1)/1 var(--font-body); }
.toc a:hover { border-color: var(--amber); }
.feature-section { scroll-margin-top: 90px; display: grid; gap: 20px; padding-block: 44px; border-top: 1px solid var(--line); }

/* ── FAQ ── */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--asphalt-2); border: 1px solid var(--line); border-radius: 10px; padding: 0 18px; }
.faq summary { cursor: pointer; font: 800 var(--step-0)/1.35 var(--font-display); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--amber-text); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: 16px; color: var(--ink-2); display: grid; gap: 10px; }
.faq-search { margin-bottom: 16px; }

/* ── Steps (beta page — a real sequence) ── */
.steps { counter-reset: s; display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; background: var(--asphalt-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.steps li::before { content: counter(s); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--guide); color: #fff; font: 900 1.2rem/1 var(--font-display); }
.steps li b { display: block; font-family: var(--font-display); font-size: var(--step-1); margin-bottom: 4px; }
.steps li p { color: var(--ink-2); }

/* ── Notice / callouts ── */
.notice { border: 1px solid var(--line); border-left: 5px solid var(--caution); background: var(--asphalt-2); border-radius: 10px; padding: 14px 16px; color: var(--ink-2); }
.notice b { color: var(--ink); }

/* ── Legal pages ── */
.legal { max-width: 74ch; display: grid; gap: 14px; }
.legal h2 { font-size: var(--step-2); margin-top: 22px; }
.legal h3 { margin-top: 8px; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: var(--step--1); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 700 var(--step--1)/1.2 var(--font-data); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); background: var(--asphalt-3); }
td { color: var(--ink-2); }
td:first-child { color: var(--ink); font-weight: 700; }

/* ── CTA band ── */
.cta { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--asphalt-2); border: 1px solid var(--line); border-radius: 16px; padding: clamp(24px, 4vw, 40px); }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } }

/* ── Footer ── */
.site-foot { border-top: 1px solid var(--line); padding-block: 40px 28px; color: var(--ink-2); font-size: var(--step--1); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid > :first-child { grid-column: 1 / -1; } }
.foot-grid h4 { font: 700 var(--step--1)/1 var(--font-data); text-transform: uppercase; letter-spacing: .1em; color: var(--ink); margin-bottom: 12px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { color: var(--ink-2); text-decoration: none; }
.foot-grid a:hover { color: var(--ink); text-decoration: underline; }
.foot-legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.theme-switch { display: inline-flex; gap: 4px; }
.theme-switch button { background: var(--asphalt-3); color: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; font: 700 .78rem/1 var(--font-body); cursor: pointer; }
.theme-switch button[aria-pressed="true"] { color: var(--amber-ink); background: var(--amber); border-color: var(--amber); }
.hidden { display: none !important; }