/* ==========================================================================
   Truck Lease Evaluator — landing page
   Waybill Data Systems brand. Mobile-first. No build step, no web fonts.

   PALETTE (measured, per the Waybill brand guide)
     Carbon  #101418   vs white 18.50:1   vs black  1.14:1
     Paper   #F4F1EA   vs white  1.13:1   vs black 18.62:1
     Signal  #B85C00   vs white  4.60:1   vs black  4.57:1
     Steel   #767676   vs white  4.54:1   vs black  4.62:1

     Carbon on Paper / Paper on Carbon = 16.40:1  (AAA both ways)

   TWO RULES THIS SHEET OBEYS
     1. Signal is NEVER used for text. On Carbon it is 4.02:1 and on Paper
        4.07:1 — both under AA's 4.5:1. It clears WCAG 1.4.11 non-text
        contrast (3:1), so it is used ONLY for rules, borders, bars,
        markers, and focus rings.
     2. Steel #767676 is NOT used on Paper. Its ratio there is 4.03:1,
        not the 4.54:1 it scores on pure white. Muted text uses
        #5C5C5C on Paper (5.93:1) and #A0A0A0 on Carbon (7.07:1).
   ========================================================================== */

:root {
  --carbon:      #101418;
  --paper:       #F4F1EA;
  --signal:      #B85C00;

  --bg:          var(--paper);
  --surface:     #EAE6DD;   /* Carbon on this: ~15.3:1 */
  --ink:         var(--carbon);
  --ink-muted:   #5C5C5C;   /* on Paper 5.93:1, on --surface 5.6:1 */
  --rule:        #C9C3B7;   /* non-text hairline, 1.4.11 not applicable */
  --btn-bg:      var(--carbon);
  --btn-ink:     var(--paper);

  --measure:     36rem;
  --gutter:      1.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        var(--carbon);
    --surface:   #1B2026;   /* Paper on this: ~14.4:1 */
    --ink:       var(--paper);
    --ink-muted: #A0A0A0;   /* on Carbon 7.07:1 */
    --rule:      #39414A;
    --btn-bg:    var(--paper);
    --btn-ink:   var(--carbon);
  }
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 1.0625rem;      /* 17px — comfortable body size on a phone */
  line-height: 1.65;
  overflow-wrap: break-word;
}

img, picture, svg { max-width: 100%; height: auto; display: block; }

code, pre, .mono {
  font-family: ui-monospace, "DejaVu Sans Mono", "SFMono-Regular", Menlo,
               Consolas, "Liberation Mono", monospace;
}

/* ------------------------------------------------------------- layout --- */

.site-head,
main > section,
.site-foot {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main > section { padding-block: 2.25rem; }
main > section + section { border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------ headings -- */

h1, h2 {
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: 1.8125rem;      /* 29px */
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.3125rem;      /* 21px */
  margin: 0 0 1rem;
  padding-top: 0.75rem;
  border-top: 3px solid var(--signal);
  display: inline-block;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- links -- */

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--signal);
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 3px; }

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --------------------------------------------------------------- head ---- */

.site-head {
  padding-block: 1.25rem 0.75rem;
}

.brand {
  display: inline-block;
  text-decoration: none;
}

.brand img { width: 108px; height: auto; }

/* --------------------------------------------------------------- hero ---- */

.hero { padding-top: 1.25rem; }

.eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}

.lede { color: var(--ink-muted); margin-bottom: 0.75rem; }

.kicker {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.45;
}

/* ------------------------------------------------------------- quotes ---- */

blockquote {
  margin: 0 0 1.25rem;
  padding: 1rem 1rem 1rem 1.125rem;
  background: var(--surface);
  border-left: 4px solid var(--signal);
}

blockquote p {
  font-size: 1.0625rem;
  line-height: 1.55;
}

.quote-recruiter p { font-style: italic; }

.q-after {
  margin-top: 0.75rem;
  margin-bottom: 0;
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

.q-after strong { color: var(--ink); }

/* --------------------------------------------------------- pull quote ---- */

.pull {
  font-size: 1.4375rem;      /* 23px */
  font-weight: 700;
  line-height: 1.3;
  margin: 1.75rem 0;
  padding: 0 0 0 1rem;
  border-left: 5px solid var(--signal);
  text-wrap: balance;
}

.pull-question { font-style: italic; }

/* --------------------------------------------------------------- lists -- */

ul.tight, ul.flags {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

ul.tight li, ul.flags li { margin-bottom: 0.625rem; }

ul.tight li::marker,
ul.flags li::marker { color: var(--signal); }

/* --------------------------------------------------------- worksheet --- */
/* A checklist meant to be PRINTED and filled in with a pen. The driver who
   needs this most is the one who will never run the Python. Every line gets
   a box to tick and a rule to write the number on. */

.ws {
  background: var(--surface);
  border: 2px solid var(--ink);
  padding: 1.25rem 1rem;
  margin: 0 0 1.25rem;
}

.ws h3 {
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1.75rem 0 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--signal);
}

.ws h3:first-child { margin-top: 0; }

.ws-note {
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin: 0 0 0.75rem;
}

.ws-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ws-list li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.75rem;
  border-bottom: 1px dashed var(--rule);   /* somewhere to write the number */
}

.ws-list li:last-child { border-bottom: 0; }

.ws-list li::before {                      /* the tick box */
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--ink);
}

.ws-flag {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------- figures -- */

.figures {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.figures li {
  background: var(--surface);
  border-left: 4px solid var(--rule);
  padding: 0.875rem 1rem;
}

.figures .fig-accent { border-left-color: var(--signal); }

.fig-label {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fig-value {
  margin: 0.125rem 0 0.25rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.fig-unit {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0;
}

.fig-note { margin: 0; font-size: 0.9375rem; }

/* ------------------------------------------------------------- tornado -- */

.tornado {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.tornado li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  column-gap: 0.5rem;
  row-gap: 0.3125rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--rule);
}

.t-name { font-size: 0.9375rem; }

.t-val {
  font-family: ui-monospace, "DejaVu Sans Mono", "SFMono-Regular", Menlo,
               Consolas, "Liberation Mono", monospace;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.t-bar {
  grid-column: 1 / -1;
  display: block;
  height: 10px;
  background: var(--surface);
}

.t-fill { display: block; height: 100%; }
.t-fill.t-mkt { background: var(--signal); }
.t-fill.t-you { background: var(--ink-muted); }

/* Small caps tags. Text is Carbon/Paper (16.4:1); the border is the accent. */
.tag {
  font-family: ui-monospace, "DejaVu Sans Mono", "SFMono-Regular", Menlo,
               Consolas, "Liberation Mono", monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--rule);
  white-space: nowrap;
}

.tag-mkt { border-color: var(--signal); }
.tag-you { border-color: var(--ink-muted); }

/* -------------------------------------------------------------- tables -- */

.table-scroll, .code-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.25rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 20rem;
  font-size: 0.9375rem;
}

caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

th, td {
  text-align: right;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}

thead th {
  text-align: right;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--signal);
}

th[scope="row"], thead th:first-child { text-align: left; }

/* ---------------------------------------------------------------- code -- */

pre {
  margin: 0;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border-left: 4px solid var(--signal);
  font-size: 0.8125rem;
  line-height: 1.6;
}

pre code { white-space: pre; }

p code, li code {
  background: var(--surface);
  padding: 0.1em 0.35em;
  font-size: 0.875em;
}

/* ------------------------------------------------------------- honest --- */

/* The email-capture form and its styles were removed deliberately, not
   left unfinished. This tool's credibility with drivers rests on asking
   nothing of them; the worksheet ships in the tool via --worksheet. */

.honest {
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

.honest strong { color: var(--ink); }

/* ----------------------------------------------------------------- CTA -- */

.cta-row { margin: 1.5rem 0 0; }

.cta-inline {
  display: inline-block;
  font-weight: 700;
  text-decoration-thickness: 3px;
}

/* ---------------------------------------------------------- disclaimer -- */

.disclaimer {
  border-top: 3px solid var(--signal);
  background: var(--surface);
}

.disclaimer h2 {
  border-top: 0;
  padding-top: 0;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.disclaimer p { font-size: 0.9375rem; }

/* ---------------------------------------------------------------- note -- */

.note {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-muted);
  border-left: 3px solid var(--rule);
  padding-left: 0.75rem;
  margin-top: 1.25rem;
}

.note em, .note strong { color: var(--ink); }

/* ---------------------------------------------------------------- foot -- */

.site-foot {
  padding-block: 2rem 2.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.brand-foot { display: inline-block; margin-bottom: 0.875rem; }
.brand-foot img { width: 150px; height: auto; }

.foot-links { margin-top: 0.75rem; }
.foot-links a { color: var(--ink); }
.foot-links span { padding: 0 0.35rem; }

/* ======================================================= wider screens == */

@media (min-width: 34rem) {
  :root { --gutter: 2rem; }

  body { font-size: 1.125rem; }

  h1 { font-size: 2.375rem; }
  h2 { font-size: 1.5rem; }

  .pull { font-size: 1.75rem; }

  .figures { grid-template-columns: repeat(3, 1fr); }
  .fig-value { font-size: 1.75rem; }

  main > section { padding-block: 3rem; }
}

@media (min-width: 60rem) {
  :root { --measure: 40rem; }
  h1 { font-size: 2.75rem; }
}

/* ========================================================= print ======== */

@media print {
  /* Chrome keeps prefers-color-scheme: dark active while printing. Without
     resetting the palette here, a dark-mode reader prints near-white tick
     boxes onto white paper and the checklist comes out blank. This block is
     last in the file, so :root here beats the scheme block above. */
  :root {
    --bg:        #fff;
    --surface:   #fff;      /* not a background-colour dependency: prints either way */
    --ink:       #000;
    --ink-muted: #333;      /* 12.6:1 on paper */
    --rule:      #767676;   /* the write-on line: 4.5:1, survives a laser printer */
  }

  body { background: #fff; color: #000; font-size: 11pt; }
  .site-head { display: none; }
  a { text-decoration: none; }

  /* It is a form. Do not split a section away from its heading. */
  .ws, .ws-list li { break-inside: avoid; }
  .ws h3 { break-after: avoid; }
}