/* ──────────────────────────────────────────────────────────────────────────
   page-5.css — shared stylesheet for loadez.ai CONTENT pages.

   WHY THIS FILE EXISTS. index.html is one self-contained document with its
   CSS inline, and it stays that way: it is the page every visitor lands on
   and it must paint without a second request. The content pages
   (/super-dispatch-alternative/, /car-hauler-net-profit/) are long prose and
   there are now two of them, so duplicating 500 lines of CSS twice was the
   worse trade. The tokens, nav and footer here are copied from index.html
   verbatim — if the landing's brand values change, change them here too.

   VERSION IN THE FILENAME on purpose: /assets/ is served cached-immutable
   for a year (see deploy/dev/nginx/loadez.conf), so an edit that must reach
   a visitor who already loaded the old file ships under a NEW name rather
   than as a change to the old one. That has now happened four times:
   page-1 -> page-2 for the article header's bottom padding, page-2 -> page-3
   for the alignment bug below, page-3 -> page-4 for .footMail, page-4 -> page-5 for the column footer.

   THE ALIGNMENT BUG, so nobody reintroduces it. `.artHead` sits on the SAME
   element as `.wrap` (<div class="wrap artHead">), and `.wrap` is what
   supplies the page's horizontal gutter (22/40/56px). Writing the header's
   vertical rhythm as the shorthand `padding: 20px 0 56px` therefore also set
   padding-left/right to 0, and the whole header — h1, lede, meta — hung 56px
   to the left of the breadcrumbs, the prose, the table and the footer at wide
   widths. Always set padding-top / padding-bottom as longhand on anything
   that shares an element with .wrap.
   ────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────── type ─────────────────────────── */
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ─────────────────────────── tokens ───────────────────────── */
:root{
  --brand:#000BD8;
  --brand-deep:#00077F;
  --brand-hover:#0009A8;
  --ink:#111827;
  --label:#4B5563;
  --ph:#9CA3AF;
  --hair:#E5E7EB;
  --muted:#6B7280;
  --danger:#B42318;
  --w84:rgba(255,255,255,.84);
  --w72:rgba(255,255,255,.72);
  --w66:rgba(255,255,255,.66);
  --line:rgba(255,255,255,.3);
  --line-soft:rgba(255,255,255,.18);
  --mono:ui-monospace,Menlo,"SF Mono",Consolas,monospace;
  --ease:cubic-bezier(.22,.72,.16,1);
  --nav-h:60px;
  color-scheme:dark;
}

/* ─────────────────────────── reset ────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--brand);-webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 8px)}
body{margin:0;background:var(--brand);color:#fff;font-family:Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis-weight:none;
  overflow-x:clip}
[hidden]{display:none!important}
img{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;background:none;border:0;padding:0}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.light :focus-visible{outline-color:var(--brand)}

/* ─────────────────────────── layout ───────────────────────── */
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 22px}
.sec{padding:56px 0}
.deep{background:var(--brand-deep)}
.light{background:#fff;color:var(--ink);color-scheme:light}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--w66)}
.mono{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--w66)}
.light .mono{color:var(--muted)}
.h2{font-size:32px;line-height:1.03;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.lede{font-size:16px;line-height:1.5;color:var(--w84);text-wrap:pretty}
.light .lede{color:var(--label)}

/* buttons (copied from index.html) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 20px;
  border-radius:10px;font-size:16px;font-weight:700;line-height:1;white-space:nowrap;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),
    transform .25s var(--ease),box-shadow .25s var(--ease),opacity .2s var(--ease)}
.btn-white{background:#fff;color:var(--brand)}
.btn-ghost{border:1px solid rgba(255,255,255,.34);color:#fff;font-weight:600}
.btn-blue{background:var(--brand);color:#fff}
.btn .arr{display:inline-block;transition:transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .btn-white:hover{background:#EEF0FF;transform:translateY(-1px);box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
  .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
  .btn-blue:hover{background:var(--brand-hover)}
  .btn:hover .arr{transform:translateX(4px)}
}

/* ─────────────────────────── nav ──────────────────────────── */
/* Same chrome as the landing, but every link is an absolute path back to it:
   these pages are not the landing, so "#pricing" alone would go nowhere. */
.nav{position:sticky;top:0;z-index:30;height:var(--nav-h);
  background:rgba(0,11,216,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.14)}
.navIn{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{height:20px;width:auto;flex:none}
.navLinks{display:none}
.navRight{display:flex;align-items:center;gap:14px}
.navCta{display:inline-flex;height:38px;padding:0 14px;border-radius:8px;font-size:13px;font-weight:700}

/* ─────────────────────────── article head ─────────────────── */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--w66);padding-top:28px}
.crumbs a{text-decoration:underline;text-underline-offset:2px}
.crumbs a:hover{color:#fff}
.crumbs span[aria-hidden]{opacity:.6}

.artHead{padding-top:20px;padding-bottom:56px}
.artHead h1{font-size:clamp(34px,8.4vw,64px);line-height:1.02;letter-spacing:-.04em;font-weight:800;
  text-wrap:balance;max-width:980px}
.artHead .lede{margin-top:20px;font-size:17px;max-width:760px}
.artMeta{margin-top:22px;font-size:12.5px;color:var(--w66);display:flex;flex-wrap:wrap;gap:6px 14px}

/* ─────────────────────────── prose ────────────────────────── */
/* The long-form body. Measure is capped: a 1440px line of 15px text is
   unreadable, and these pages exist to actually be read. */
.prose{max-width:760px}
.prose h2{font-size:26px;line-height:1.1;letter-spacing:-.03em;font-weight:800;margin:44px 0 0;text-wrap:balance}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;line-height:1.25;font-weight:700;letter-spacing:-.02em;margin:28px 0 0}
.prose p{font-size:16px;line-height:1.6;margin-top:14px;text-wrap:pretty}
.prose .light p,.light .prose p{color:var(--label)}
.prose strong{font-weight:700;color:#fff}
.light .prose strong{color:var(--ink)}
.prose a:not(.btn){text-decoration:underline;text-underline-offset:2px;font-weight:600}
.prose ul{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.prose ul li{position:relative;padding-left:20px;font-size:16px;line-height:1.55}
.prose ul li::before{content:"—";position:absolute;left:0;opacity:.55}
.prose .small{font-size:13.5px;line-height:1.55;color:var(--w66)}
.light .prose .small{color:var(--muted)}
.prose code{font-family:var(--mono);font-size:.92em;background:rgba(255,255,255,.12);padding:2px 5px;border-radius:4px}
.light .prose code{background:#F3F4F6}

/* pull-out statement */
.pull{margin:32px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
  font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.light .pull{border-color:var(--hair)}

/* ─────────────────────────── math table ───────────────────── */
/* The worked example. Deliberately a real <table>: it is tabular data, it
   must survive a screen reader, and people copy it into a spreadsheet. */
.calc{margin-top:24px;width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.calc caption{text-align:left;font-size:12.5px;color:var(--w66);padding-bottom:10px}
.light .calc caption{color:var(--muted)}
.calc th,.calc td{text-align:left;padding:11px 10px 11px 0;font-size:14.5px;line-height:1.35;
  border-bottom:1px solid var(--line-soft);vertical-align:top}
.light .calc th,.light .calc td{border-color:var(--hair)}
.calc thead th{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--w66);padding-bottom:8px}
.light .calc thead th{color:var(--muted)}
.calc td:last-child,.calc th:last-child{text-align:right;padding-right:0;white-space:nowrap;font-weight:700}
.calc .cSub{display:block;font-size:12.5px;font-weight:400;color:var(--w66);margin-top:3px}
.light .calc .cSub{color:var(--muted)}
.calc .cNeg td:last-child{color:#FFC9C4}
.light .calc .cNeg td:last-child{color:var(--danger)}
.calc .cTot td{border-top:2px solid #fff;border-bottom:0;padding-top:14px;font-size:17px;font-weight:800}
.light .calc .cTot td{border-top-color:var(--ink)}
.calcWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ─────────────────────────── compare table ────────────────── */
/* Same visual language as the landing's comparison block. */
.cmp{margin-top:28px;border-top:2px solid var(--ink)}
.light .cmp{border-top-color:var(--ink)}
.cmpRow{display:grid;grid-template-columns:1fr 58px 58px;align-items:center;min-height:56px;
  border-bottom:1px solid var(--hair)}
.cmpRow.head{min-height:0;padding:12px 0;font-size:11px;font-weight:700;color:var(--muted)}
.cmpL{font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.25;padding-right:10px}
.cmpL .cSub{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:3px}
.cmpC{display:flex;justify-content:center;text-align:center;font-size:18px;font-weight:700}
.tick{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none}
.yes{color:var(--ink)}
.no{color:#C4C7CC}
.part{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.cmpNote{margin-top:18px;font-size:12.5px;line-height:1.5;color:var(--ph)}
@media (hover:hover) and (pointer:fine){.cmpRow:not(.head):hover{background:#F9FAFB}}

/* ─────────────────────────── honesty box ──────────────────── */
/* Used for "what this does NOT do". It is styled to be read, not skipped:
   a page that only lists strengths is the page nobody believes. */
.fair{margin-top:28px;border:1px solid var(--line);border-radius:14px;padding:20px 18px}
.light .fair{border-color:var(--hair);background:#F9FAFB}
.fairH{font-size:15px;font-weight:800;letter-spacing:-.01em}
.fair ul{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.fair li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.5;color:var(--w84)}
.light .fair li{color:var(--label)}
.fair li::before{content:"—";position:absolute;left:0;opacity:.55}

/* ─────────────────────────── next / cta ───────────────────── */
.cta{border-top:1px solid var(--line-soft);padding:44px 0 52px}
.cta h2{font-size:30px;line-height:1.05;letter-spacing:-.035em;font-weight:800;text-wrap:balance;max-width:720px}
.cta p{margin-top:14px;font-size:16px;line-height:1.5;color:var(--w84);max-width:640px}
.ctaBtns{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.ctaBtns .btn{width:100%}
.ctaNote{font-size:12.5px;color:var(--w66);margin-top:12px}

.also{margin-top:36px;border-top:1px solid var(--line-soft);padding-top:20px}
.alsoH{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--w66)}
.alsoList{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.alsoList a{font-size:16px;font-weight:700;letter-spacing:-.02em;text-decoration:underline;text-underline-offset:3px}

/* ─────────────────────────── footer ───────────────────────── */
/* Columns, not one row: ten links in a single flex row wrapped every label
   onto two lines at 1440. Visible on a phone too — it is the only path to the
   content pages there. Socials = the same profiles as JSON-LD sameAs. */
.foot{border-top:1px solid var(--line-soft);padding:44px 0 28px;color:var(--w66)}
.ftTop{display:grid;gap:36px}
.ftBrand .logo{height:20px;opacity:.9}
.footTag{font-size:13px;line-height:1.55;color:var(--w66);max-width:380px;margin:16px 0 0;text-wrap:pretty}
.ftCols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.ftH{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 10px}
.ftCol a{display:block;padding:5px 0;font-size:14px;white-space:nowrap;transition:color .2s var(--ease)}
.ftCol a:hover,.ftBot a:hover{color:#fff}
.ftBot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line-soft);font-size:12.5px}
.ftSoc{display:flex;gap:10px}
.ftSoc a{width:38px;height:38px;border-radius:999px;border:1px solid var(--line-soft);display:grid;place-items:center;color:#fff;transition:background .2s var(--ease),border-color .2s var(--ease)}
.ftSoc a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.ftSoc svg{width:16px;height:16px;fill:currentColor}
@media (min-width:760px){
  .foot{padding:56px 0 32px}
  .ftCols{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1120px){
  .ftTop{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:72px}
}

/* ─────────────────────────── desktop ──────────────────────── */
@media (min-width:760px){
  .wrap{padding:0 40px}
  .sec{padding:80px 0}
  .h2{font-size:40px}
  .crumbs{padding-top:36px;font-size:13px}
  .artHead{padding-top:24px;padding-bottom:80px}
  .artHead .lede{font-size:20px;line-height:1.45}
  .prose h2{font-size:32px;margin-top:56px}
  .prose h3{font-size:20px;margin-top:34px}
  .prose p,.prose ul li{font-size:17px}
  .pull{font-size:24px}
  .calc th,.calc td{font-size:16px;padding:14px 14px 14px 0}
  .calc .cTot td{font-size:20px}
  .cmpRow{grid-template-columns:1.7fr 1fr 1fr;min-height:68px}
  .cmpRow.head{padding:18px 0;font-size:14px}
  .cmpL{font-size:17px;padding-right:24px}
  .cmpC{font-size:21px}
  .fair{padding:26px 24px}
  .fairH{font-size:17px}
  .fair li{font-size:16px}
  .cta{padding:64px 0 72px}
  .cta h2{font-size:44px}
  .ctaBtns{flex-direction:row;align-items:center}
  .ctaBtns .btn{width:auto}
  .ctaNote{margin-top:16px}
  .alsoList{flex-direction:row;gap:28px}
}
@media (min-width:1120px){
  :root{--nav-h:72px}
  .wrap{padding:0 56px}
  .logo{height:24px}
  .navLinks{display:flex;align-items:center;gap:30px;font-size:13.5px;font-weight:500;color:var(--w84)}
  .navLinks a{position:relative;padding:4px 0;transition:color .2s var(--ease)}
  .navLinks a:hover{color:#fff}
  .sec{padding:96px 0}
  .artHead{padding-top:28px;padding-bottom:96px}
  .artHead h1{font-size:clamp(56px,4.6vw,64px)}
  .prose{max-width:820px}
}

/* ─────────────────────────── reduced motion ───────────────── */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}