/* Road Ledger — IFTA Tracker marketing site */
:root {
  --paper: #F7F4EC;
  --surface: #FFFFFF;
  --ink: #1C1E22;
  --ink2: #5A5E66;
  --rule: #E3DECE;
  --money: #176B4A;
  --money-dark: #0F4D34;
  --amber: #E8A13D;
  /* Darkened from #A87A0B: it only ever paints small text (eyebrow, the
     LIKELY badge) and failed WCAG AA on both paper and the amber fill. */
  --likely: #7E5B07;
  --likely-fill: #F6EAC9;
  --alert: #B3261E;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 22px; }
.wide { max-width: 1000px; }

header.site {
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
header.site .wrap { display: flex; justify-content: space-between; align-items: center; }
.wordmark {
  font-weight: 900; letter-spacing: 3px; font-size: 15px; color: var(--money);
  text-decoration: none;
}
.nav a { color: var(--ink2); text-decoration: none; margin-left: 18px; font-size: 15px; font-weight: 600; }
.nav a:hover { color: var(--money); }

h1, h2, h3, .serif {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.15;
}
h1 { font-size: clamp(38px, 6vw, 58px); font-weight: 700; letter-spacing: -0.5px; }
h2 { font-size: clamp(28px, 4.5vw, 38px); margin-bottom: 18px; }
h3 { font-size: 22px; margin-bottom: 8px; }
.sub { color: var(--ink2); font-size: clamp(19px, 2.6vw, 22px); }

section { padding: 64px 0; }
section.tight { padding: 40px 0; }
.rule-top { border-top: 1px solid var(--rule); }

.eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--likely); margin-bottom: 14px;
}
.money { color: var(--money); }
.big-money {
  font-size: clamp(52px, 9vw, 84px); font-weight: 900; color: var(--money);
  font-variant-numeric: tabular-nums; letter-spacing: -1px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.cta, .cta:visited {
  display: inline-block; background: var(--money); color: #fff; text-decoration: none;
  font-weight: 800; font-size: 19px; padding: 18px 36px; border-radius: 14px;
  box-shadow: 0 6px 24px rgba(23, 107, 74, 0.35);
}
.cta:hover { background: var(--money-dark); }
.cta-sub { display: block; margin-top: 10px; color: var(--ink2); font-size: 14px; }

.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 16px;
  padding: 26px; margin: 14px 0;
}
.stamp {
  display: inline-block; border: 2px solid var(--likely); color: var(--likely);
  background: var(--likely-fill); border-radius: 6px; padding: 2px 10px;
  font-size: 12px; font-weight: 900; letter-spacing: 1px;
}

.ledger-table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.ledger-table td {
  padding: 12px 6px; border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.ledger-table td:last-child { text-align: right; font-weight: 800; color: var(--money); }

.dark {
  background: var(--money); color: #fff;
}
.dark h2, .dark h3 { color: #fff; }
.dark .sub, .dark p { color: #DCE9E0; }
.dark .card { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); }
.dark .card p, .dark .card li { color: #ECF3EE; }
/* Anything painted --money is invisible on the green ground. Flip the
   accent text to white inside dark sections and lighten the rules, so
   these never need an inline colour patch at the call site. */
.dark .money,
.dark .big-money,
.dark .eyebrow,
.dark strong,
.dark .ledger-table td,
.dark .ledger-table td:last-child { color: #fff; }
.dark .ledger-table td { border-bottom-color: rgba(255,255,255,0.22); }

/* Quote wall. These are real posts by real drivers about the paperwork,
   quoted short and linked back. Nobody here endorsed this app, and the
   markup must never imply they did. */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; margin-top: 26px; }
.quotes figure {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r, 16px);
  padding: 18px 20px 14px;
}
.quotes blockquote { font-size: 18px; line-height: 1.45; font-weight: 600; }
.quotes figcaption { margin-top: 10px; font-size: 13px; color: var(--ink2); }
.quotes figcaption a { color: var(--ink2); }
.dark .quotes figure { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); }
.dark .quotes blockquote { color: #fff; }
.dark .quotes figcaption, .dark .quotes figcaption a { color: #DCE9E0; }
.source-note { font-size: 13px; color: var(--ink2); margin-top: 16px; }

/* Slider calculator. Everything is driven off one range input so the
   number a driver lands on is his own, not our average. */
.calc { margin-top: 24px; }
.calc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc-head label { font-size: 17px; font-weight: 600; }
.calc-nights { font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; }
.calc input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; margin: 16px 0 4px;
  height: 8px; border-radius: 999px; background: rgba(255,255,255,0.28); outline: none;
}
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 34px; height: 34px;
  border-radius: 50%; background: #fff; border: 3px solid var(--money);
  cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.calc input[type="range"]::-moz-range-thumb {
  width: 34px; height: 34px; border-radius: 50%; background: #fff;
  border: 3px solid var(--money); cursor: pointer;
}
.calc input[type="range"]:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.calc-scale { display: flex; justify-content: space-between; font-size: 13px; opacity: 0.8; }
.calc-out { margin-top: 22px; text-align: center; }
.calc-year { font-size: clamp(46px, 10vw, 76px); font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.calc-label { font-size: 15px; margin-top: 8px; opacity: 0.9; }
.calc-multiple { margin-top: 16px; font-size: 20px; font-weight: 700; }

/* Price: the eye lands on the dollars, the cents stay legible because the
   charge really is $99.99 and the page must not imply otherwise. */
.price-lockup { display: inline-flex; align-items: flex-start; justify-content: center; }
.price-cents { font-size: 0.42em; font-weight: 800; margin-top: 0.42em; }
.price-term { font-size: 0.28em; font-weight: 700; margin-top: 1.3em; margin-left: 6px; opacity: 0.9; }

.shots { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.shots figure { width: min(258px, 78vw); }
.shots img {
  width: 100%; height: auto; display: block;
  border-radius: 24px; border: 1px solid var(--rule);
  box-shadow: 0 18px 50px rgba(28, 30, 34, 0.18);
}
.shots figcaption {
  margin-top: 12px; text-align: center; font-size: 15px;
  font-weight: 600; color: var(--ink2);
}

.faq details {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 10px;
}
.faq summary { font-weight: 700; cursor: pointer; font-size: 17px; }
.faq details p { margin-top: 10px; color: var(--ink2); }

footer.site {
  border-top: 1px solid var(--rule); padding: 36px 0 60px; color: var(--ink2); font-size: 14px;
}
footer.site a { color: var(--ink2); }
.disclaimer {
  font-size: 13px; color: var(--ink2); border-left: 3px solid var(--amber);
  padding-left: 14px; margin-top: 18px;
}

/* legal pages */
.legal h1 { font-size: 34px; margin-bottom: 6px; }
.legal h2 { font-size: 22px; margin: 30px 0 8px; }
.legal p, .legal li { color: #33363c; font-size: 16px; margin-bottom: 10px; }
.legal ul { padding-left: 22px; }
.meta { color: var(--ink2); font-size: 14px; margin-bottom: 26px; }