/* ==========================================================================
   Transofai marketing site.
   Every colour, radius and weight is the office app's own (the prebuilt Metronic theme it ships),
   so the site and the product read as one thing. Light only, on purpose: the sign-in page this is
   built from commits to one look.
   The type is the office's too (the owner, 2 Oct 2026: "change fonts on landing website to match my
   office portal"): Inter from the same Google Fonts address with the same weights, 300 to 700, and
   nothing heavier; the office's stack; buttons and form fields in its weights (500); letter-spacing
   `normal` on headings, prices, stats and numbers; small uppercase captions spaced .06em as the
   office spaces its own, and column heads not spaced at all, as its tables' are; load numbers in
   the office's monospace. The office squeezes a few of its own figures slightly (its plan price by
   .015em, the Plan & usage figures by .01em); the site keeps even those unsqueezed, by choice.
   ========================================================================== */

:root {
  --blue: #1B84FF;
  --blue-deep: #056EE9;
  --blue-soft: #7EC0FF;
  --blue-wash: #E9F3FF;
  --ink: #071437;
  --body: #4B5675;
  --muted: #99A1B7;
  --muted-text: #636C87; /* the muted grey, darkened for copy people read: 4.6:1 or better on every light ground */
  --ground: #F9F9F9;
  --surface: #FFFFFF;
  --line: #F1F1F4;
  --line-2: #DBDFE9;
  --success: #17C653;
  --success-ink: #0E9E42;
  --success-wash: #EAFFF1;
  --warn: #B78300;
  --warn-wash: #FFF8DD;
  --info: #7239EA;
  --info-wash: #F8F5FF;
  --danger: #F8285A;
  --danger-wash: #FFEEF3;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(7,20,55,.04), 0 12px 32px -16px rgba(7,20,55,.18);
  --ease: cubic-bezier(.2,.7,.2,1);
  --max: 1160px;
  --gutter: 24px; /* the page side margin: 20px on phones, 16px below 360px (see RESPONSIVE) */
  /* The office's monospace, Bootstrap's own stack (its --bs-font-monospace), for what the office
     draws in it: a load number (`font-monospace` on the board and in the assistant's load cards). */
  --mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color-scheme: light;
}

/* Cross-page fade, free where the browser supports it and invisible where it doesn't. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: Inter, Helvetica, sans-serif; /* the office's stack (its theme's `Inter, Helvetica`) */
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
/* Sentences may wrap, but never leave one word alone: headings balance their lines, copy avoids a
   last line of one word. Short facts never wrap at all (.nw, pills, chips, buttons, fact lines). */
body { text-wrap-style: pretty; }
h1, h2, h3, .h2, .h3 { text-wrap: balance; }
/* Card copy runs two to four lines on a phone; balancing it is what reliably keeps a last word
   company (pretty leaves some alone). Long paragraphs stay pretty. */
:is(.outcome, .mp) > div > span, .rule > span, .step .d, .stat > span, .eco-detail li, .eco-detail .who,
.pf p, .tri p, .tcard p, .card p, .side-card p, .ai-card p, .hint, .chain-foot, .migrate p, .trust-foot,
.mini-msg, .band p, .page-hero p, .foot-brand p, figcaption, .plan .sub, .guarantee li > span:last-child,
.ag, .wt, .credit-rules li > span, .road-head p, .stats-note, .foot-note, .guarantee-note, .rules th, .rules td, .in-short li > span,
.legal-table th, .legal-table td, .draft-banner .wrap > span { text-wrap-style: balance; }
.nw { white-space: nowrap; }

/* The fact line, for any "a · b · c": each piece moves down whole, and a dot that would start a
   line is clipped away (docs/phone-perfect.md, rule 2). */
.tsf-facts { display: block; overflow: hidden; min-width: 0; }
.tsf-facts > .tsf-facts__row { display: flex; flex-wrap: wrap; margin-left: -13px; }
.tsf-facts__row > * { position: relative; margin-left: 13px; white-space: nowrap; }
.tsf-facts__row > *::before { content: '\00b7'; position: absolute; left: -13px; width: 13px; text-align: center; }

/* A product mock is a picture: below its design width (data-fit) it keeps that layout and scales
   down as a whole instead of reflowing into broken lines. site.js measures and sets the three
   variables; without the script the mock simply stays fluid. */
.fit { min-width: 0; }
.fit > .fit-in { transform-origin: 0 0; }
.fit.scaled { height: var(--fit-h); }
.fit.scaled > .fit-in { width: var(--fit-w); transform: scale(var(--fit-k)); }
:focus-visible { outline: 3px solid rgba(27,132,255,.4); outline-offset: 2px; }
/* The blue ring disappears against the brand blue, so on blue surfaces the ring is white. */
:is(.hero-brand, .watch, .eco, .page-hero, .band, .quote, .side-card.blue) :focus-visible { outline-color: rgba(255,255,255,.9); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: 112px 0; }
.white { background: var(--surface); }

.ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- buttons: the app's, not new ones ---------- */
/* In the office's weight too: its .btn is 500 (--bs-btn-font-weight), and none of its primary
   buttons ("Sign in" included) is drawn heavier. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: 8px; border: 1px solid transparent;
  font-weight: 500; font-size: 15px; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), color .18s;
}
.btn .ico { width: 17px; height: 17px; stroke-width: 2; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(27,132,255,.75); }
.btn-light { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-light:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.btn-white { background: #fff; color: var(--blue); }
.btn-white:hover { background: #F2F8FF; transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(0,0,0,.35); }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-ghost:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue);
}
/* A phrase kept whole in running copy ("30-day") is just text inside the flex eyebrow. */
.eyebrow .nw { display: contents; }
.eyebrow::before { content: ""; width: 18px; height: 2px; margin-top: calc(.8em - 1px); background: currentColor; border-radius: 2px; flex: none; }
.head { display: grid; gap: 12px; justify-items: start; }
/* Headings on a phone, measured (2 Oct 2026, every width from 320 to 1600 with either kind of
   scrollbar, against the site before the font change): unspaced, the office's 700 draws a heading
   wider than the squeezed 800 did, up to 6.4% for a section heading ("Fewer calls. Faster order
   entry. Cleaner billing."), 4.8% for .h3, 6.8% for a band heading, 4.2% for the about quote. At
   their old phone sizes they broke in new places ("From the broker's / email to money / in the
   bank.", "Upload a rate / confirmation."), so each phone size is its old size over that width:
   28px to 26.3px here, and .h3, .band h2 and .quote blockquote below. Every heading then breaks
   where it did before at every phone width; wider, the vw sizes take over as before. */
.h2 { font-size: clamp(26.3px, 4vw, 40px); font-weight: 700; line-height: 1.12; text-wrap: balance; max-width: 22ch; }
.lede { font-size: 17px; color: var(--body); max-width: 58ch; margin-top: 4px; }
.plate { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-wash); color: var(--blue); display: grid; place-items: center; flex: none; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(249,249,249,.78); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); background: rgba(255,255,255,.86); }
.nav-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { height: 26px; width: auto; min-width: 0; object-fit: contain; object-position: left center; }
.nav-links { display: flex; gap: 30px; font-weight: 500; font-size: 15px; color: var(--body); }
.nav-links a { position: relative; padding: 6px 0; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--blue); }
.nav-links .menu-only { display: none; }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-cta .signin { font-weight: 600; padding: 0 14px; height: 44px; display: inline-flex; align-items: center; border-radius: 8px; transition: color .15s; }
.nav-cta .signin:hover { color: var(--blue); }
.nav-cta .btn { height: 44px; padding: 0 18px; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); align-items: center; justify-content: center; cursor: pointer; }

/* ==========================================================================
   HOME HERO — the sign-in page's split, doing a landing page's job
   ========================================================================== */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: min(780px, calc(100vh - 72px)); padding: 0; }
.hero-copy { display: flex; align-items: center; padding: 72px 24px; }
.hero-copy > div { max-width: 580px; margin-left: auto; padding-right: 48px; }
/* The headline is sized to the room its column really has: .hero-copy is the container, so the
   gutters and a classic scrollbar are counted and 100cqi is the copy's width. Unspaced, "The load
   books itself." is 10.43 times its size, so the size is that room over 10.54 (1% to spare), and
   the sentence keeps one line wherever it did before the font change, at the most 50.5px (52px
   before). Side by side (from 901px) the room is the column less the 48px on the copy's right
   (24px to 1199px, below); on a phone it is the whole column, at least 33px and at most 36px (see
   RESPONSIVE). A browser without container query units keeps the plain 36px written first. */
.hero-copy { container-type: inline-size; }
.hero h1 { font-size: 36px; font-size: clamp(36px, calc((100cqi - 48px) / 10.54), 50.5px); font-weight: 700; line-height: 1.04; margin: 18px 0 20px; text-wrap: balance; }
.hero h1 .accent { color: var(--blue); }
/* Each sentence of the headline starts its own line: "The load" never hangs off the first. */
.hero h1 .accent { display: block; }
.hero .sub { font-size: 18px; color: var(--body); max-width: 46ch; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .note { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13.5px; color: var(--body); }
.hero .note .ico { width: 16px; height: 16px; color: var(--success); stroke-width: 2.4; }

.hero-brand { background: var(--blue); display: flex; align-items: center; justify-content: center; padding: 64px 40px; position: relative; overflow: hidden; }
.hero-brand::before {
  content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.2), rgba(255,255,255,0) 70%);
  animation: breathe 7s ease-in-out infinite; pointer-events: none;
}
.hero-brand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent);
}

/* ---------- the assistant ---------- */
.hero-brand > .fit { position: relative; z-index: 1; width: min(440px, 100%); }
.assistant {
  position: relative; z-index: 1; width: 100%; background: #fff; color: var(--ink);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 80px -36px rgba(0,18,70,.6), 0 0 0 1px rgba(255,255,255,.5);
}
.a-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
/* The office's assistant header: its name `fs-4 fw-bold` (16.25px, 600), the line under it
   `fw-semibold` (500) at 12px, a hair under the office's `fs-7` (12.35px), and the header's gaps
   10px: "Reads your data. Never saves on its own." then keeps one line from 958px with a classic
   scrollbar, as it did before the font change from 962px (at 12.35px it wrapped up to 979px).
   Narrower, it breaks between its two sentences, never "... saves on / its own." */
.a-name { font-weight: 600; font-size: 16.25px; line-height: 1.2; white-space: nowrap; }
.a-sub { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.a-live { margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--success-ink); background: var(--success-wash); padding: 4px 9px; border-radius: 99px; }
.a-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: blink 1.6s ease-in-out infinite; }

.orb { width: 34px; height: 34px; border-radius: 50%; flex: none; position: relative; background: conic-gradient(from 0deg, #1B84FF, #7EC0FF, #CFE6FF, #1B84FF); animation: spin 6s linear infinite; }
.orb::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.orb::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--blue); z-index: 1; }
.assistant.busy .orb { animation-duration: 1s; }
.assistant.busy .orb::before { animation: pulse .9s ease-in-out infinite; }

.a-body { height: 340px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; }
.a-body.clearing .msg { opacity: 0; transform: translateY(-10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
/* The office's bubble (.tsf-ai-msg): 1.05rem of its 13px, 500. */
.msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 13.65px; font-weight: 500; line-height: 1.5; animation: msgIn .38s var(--ease) both; }
.msg.me { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.msg.ai { align-self: flex-start; background: var(--ground); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg .w { animation: wordIn .3s var(--ease) both; }
/* The flagged phrase stays whole, and its highlight reaches past the words without pushing the
   next character away (no gap before the full stop). */
.msg .flag { background: var(--warn-wash); color: var(--warn); font-weight: 600; border-radius: 5px; padding: 1px 4px; margin: 0 -4px; white-space: nowrap; }
.att { display: flex; align-items: center; white-space: nowrap; gap: 8px; background: rgba(255,255,255,.18); padding: 6px 10px; border-radius: 8px; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; }
.att .ico { width: 15px; height: 15px; }
.msg.thinking { display: inline-flex; gap: 5px; padding: 14px 16px; }
.msg.thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dots 1s ease-in-out infinite; }
.msg.thinking i:nth-child(2) { animation-delay: .15s; }
.msg.thinking i:nth-child(3) { animation-delay: .3s; }
/* The assistant's load card in the office (load-list.html): the number in the monospace, bold; the
   places 500; the status a badge (600); on the card's 13px. */
.load-chip { margin-top: 10px; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 11px; display: flex; align-items: center; gap: 10px; font-size: 13px; animation: popIn .4s var(--ease) both; }
.load-chip .no { font-family: var(--mono); font-weight: 600; color: var(--body); white-space: nowrap; }
.load-chip .lane { font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.load-chip .st { margin-left: auto; flex: none; background: var(--info-wash); color: var(--info); font-weight: 600; font-size: 11px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.a-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; animation: popIn .4s var(--ease) both; }
.a-btn { display: inline-flex; align-items: center; white-space: nowrap; height: 32px; padding: 0 12px; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 600; font-size: 12.5px; }
.a-btn.ghost { background: #fff; color: var(--body); border: 1px solid var(--line-2); }

.a-input { display: flex; align-items: center; gap: 10px; margin: 0 14px 14px; padding: 0 6px 0 14px; height: 50px; border-radius: 12px; background: var(--ground); border: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.a-ph { color: var(--muted); flex: 1; }
.a-typed { flex: 1; white-space: nowrap; overflow: hidden; }
.a-typed:empty { display: none; }
.a-typed::after { content: ""; display: inline-block; width: 1.5px; height: 15px; margin-left: 1px; vertical-align: -3px; background: var(--blue); animation: blink .8s steps(1) infinite; }
.a-send { width: 38px; height: 38px; border-radius: 10px; background: var(--blue); color: #fff; display: grid; place-items: center; transition: transform .15s var(--ease), background-color .15s; }
.a-send .ico { width: 17px; height: 17px; stroke-width: 2; }
.a-send.press { transform: scale(.86); background: var(--blue-deep); }

/* ---------- hero entrance ---------- */
.rise { opacity: 0; transform: translateY(14px); animation: rise .7s var(--ease) forwards; }
.rise[data-d="1"] { animation-delay: .06s; } .rise[data-d="2"] { animation-delay: .16s; }
.rise[data-d="3"] { animation-delay: .28s; } .rise[data-d="4"] { animation-delay: .4s; }
.rise[data-d="5"] { animation-delay: .52s; }

/* ==========================================================================
   WATCH IT READ — the showpiece
   ========================================================================== */
.watch { background: var(--blue); color: #fff; position: relative; overflow: hidden; }
.watch::before { content: ""; position: absolute; width: 1000px; height: 1000px; left: -380px; top: -480px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.13), rgba(255,255,255,0) 70%); pointer-events: none; }
.watch::after { content: ""; position: absolute; width: 800px; height: 800px; right: -300px; bottom: -420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(126,192,255,.25), rgba(126,192,255,0) 70%); pointer-events: none; }
.watch .wrap { position: relative; z-index: 1; }
.watch .eyebrow { color: #fff; }
.watch .h2 { color: #fff; max-width: 26ch; }
.watch .lede { color: rgba(255,255,255,.88); }

.stage-fit { margin-top: 64px; }
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 410px); justify-content: space-between; align-items: center; gap: 80px; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.wires path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: .95; }
.wires path.settled { opacity: .3; }
.wires circle { fill: #fff; }
.chip { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; will-change: transform; background: #fff; color: var(--blue); font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 99px; white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(0,20,70,.55), 0 0 0 4px rgba(255,255,255,.18); }
.stage.fading .wires { opacity: 0; transition: opacity .6s var(--ease); }

/* the paper */
.paper { position: relative; z-index: 1; background: #fff; color: #1F2A44; border-radius: 6px; padding: 26px 26px 22px; font-size: 12px; line-height: 1.5; transform: rotate(-1.2deg); overflow: hidden; box-shadow: 0 50px 90px -40px rgba(0,18,70,.7), 0 0 0 1px rgba(7,20,55,.05); }
.p-top { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid #1F2A44; }
.p-top > div:last-child { text-align: right; }
.p-brand { font-size: 16px; font-weight: 700; white-space: nowrap; }
.p-kind { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.p-no { margin-top: 4px; font-weight: 600; white-space: nowrap; }
.p-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7A8499; }
.p-stops { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.p-stop { border: 1px solid #E4E7EE; border-radius: 4px; padding: 10px 12px; }
.p-stop .src { display: block; margin-top: 4px; }
.p-row > div, .p-rate td, .p-stop .src { white-space: nowrap; }
.p-row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; padding: 10px 0; border-top: 1px solid #E4E7EE; border-bottom: 1px solid #E4E7EE; }
.p-rate { width: 100%; border-collapse: collapse; margin-top: 10px; }
.p-rate td { padding: 4px 0; }
.p-rate td:last-child { text-align: right; }
.p-rate .tot td { border-top: 1px solid #1F2A44; padding-top: 8px; font-weight: 700; font-size: 13px; }
.p-terms { margin-top: 14px; display: grid; gap: 6px; }
.p-bar { height: 6px; border-radius: 3px; background: #EEF0F4; width: 100%; }
.p-bar.mt { margin-top: 8px; }
.w90 { width: 90%; } .w85 { width: 85%; } .w75 { width: 75%; } .w70 { width: 70%; } .w60 { width: 60%; } .w50 { width: 50%; } .w40 { width: 40%; }
.p-sign { margin-top: 16px; display: flex; align-items: flex-end; gap: 10px; }
.p-sign .p-line { flex: 1; border-bottom: 1px solid #C9CED9; height: 16px; }

.src { border-radius: 4px; padding: 1px 4px; margin: -1px -4px; transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
.p-stop .src { padding: 4px 6px; margin: 4px -6px -4px; }
.p-row .src { margin: 0; }
.src.hit { background: rgba(27,132,255,.12); box-shadow: 0 0 0 1.5px var(--blue); }
.stage.fading .src.hit { background: transparent; box-shadow: 0 0 0 0 transparent; }

.beam { position: absolute; left: 0; right: 0; top: 0; height: 70px; transform: translateY(-100%); pointer-events: none; z-index: 2; opacity: 0; background: linear-gradient(to bottom, rgba(27,132,255,0), rgba(27,132,255,.16)); border-bottom: 2px solid var(--blue); }
.beam::after { content: attr(data-name); position: absolute; right: 10px; bottom: -11px; font-size: 9.5px; font-weight: 700; color: #fff; background: var(--blue); padding: 2px 7px; border-radius: 99px; }
.beam.b2 { background: linear-gradient(to bottom, rgba(126,192,255,0), rgba(126,192,255,.2)); border-bottom-color: var(--blue-soft); }
.beam.b2::after { background: var(--blue-soft); color: var(--ink); right: 86px; }
.beam.run { animation-name: beam; animation-timing-function: linear; animation-fill-mode: forwards; }
.beam.b2.run { animation-delay: .45s; }

/* the form */
.form-card { position: relative; z-index: 1; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .6s var(--ease); }
.form-card.done { box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 30px 60px -30px rgba(0,18,70,.6); }
.f-head { display: flex; align-items: center; gap: 10px; }
.f-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.f-title .ico { width: 18px; height: 18px; }
.f-status { margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.16); transition: background-color .3s, color .3s; }
.f-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.form-card.reading .f-status::before { animation: blink .8s ease-in-out infinite; }
.form-card.done .f-status { background: #fff; color: var(--blue); }
.f-count { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; font-size: 12px; margin-top: 14px; opacity: .9; }
.f-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); margin-top: 8px; overflow: hidden; }
.f-bar i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.fields { margin-top: 14px; display: grid; gap: 8px; }
.field { display: grid; grid-template-columns: 82px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s; }
/* The office's caption over a value (.tsf-ai-cap: `fs-8 fw-bold`, .06em). */
.field .lab { font-size: 11.05px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .72; }
.field .val { font-size: 13.5px; font-weight: 600; white-space: nowrap; min-width: 0; }
.field.filled { background: #fff; border-color: #fff; color: var(--ink); animation: fieldIn .45s var(--ease); }
.field.filled .lab { color: var(--muted); opacity: 1; }
.field .ok { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: var(--success-wash); color: var(--success-ink); opacity: 0; transform: scale(.6); transition: opacity .3s var(--ease), transform .3s var(--ease); white-space: nowrap; }
.field .ok.show { opacity: 1; transform: none; }
.field[data-check] .ok { background: var(--warn-wash); color: var(--warn); }
/* The field that needs a look carries a longer pill: its value keeps the whole line and the pill
   sits under it, where the eye lands next. */
.field[data-check] { grid-template-columns: 82px minmax(0,1fr); row-gap: 6px; padding-top: 9px; padding-bottom: 9px; }
.field[data-check] .ok { grid-column: 2; justify-self: start; }
.val.typing::after { content: ""; display: inline-block; width: 1.5px; height: 14px; margin-left: 2px; background: currentColor; vertical-align: -2px; animation: blink .7s steps(1) infinite; }
.f-foot { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.f-foot .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.f-draft { white-space: nowrap; }
.f-flag { margin-left: auto; white-space: nowrap; font-size: 11px; font-weight: 600; background: var(--warn-wash); color: var(--warn); padding: 3px 8px; border-radius: 99px; }
.form-card.done .f-foot { opacity: 1; transform: none; }

.stats { margin-top: 80px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.22); }
.stat { padding: 28px 24px 0 0; }
.stat b { display: block; font-size: clamp(34px, 4vw, 46px); font-weight: 700; line-height: 1; white-space: nowrap; }
.stat > span { display: block; margin-top: 10px; font-size: 14px; opacity: .85; max-width: 22ch; }
.stats-note { margin-top: 28px; font-size: 13px; color: rgba(255,255,255,.8); }

/* ==========================================================================
   AI YOU CAN CHECK
   ========================================================================== */
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.ai-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.ai-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.spec { background: var(--ground); border-bottom: 1px solid var(--line); padding: 24px 20px; min-height: 176px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.spec-in { display: flex; flex-direction: column; gap: 10px; }
/* Side by side, the three illustrations share one height, so the three titles line up. */
@media (min-width: 901px) {
  .ai-grid { grid-template-rows: auto auto; }
  /* One column exactly the card's width: an implicit auto column took the width of the unscaled
     illustration (352px) inside a 272-326px card, and cut the copy at 901-1075px (review finding 16). */
  .ai-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); }
}
.ai-card .body { padding: 22px 24px 26px; }
.ai-card h3 { font-size: 17px; font-weight: 700; }
.ai-card p { color: var(--body); font-size: 14.5px; margin-top: 8px; }

.mini-paper { background: #fff; border: 1px solid var(--line-2); border-radius: 6px; padding: 14px; display: grid; gap: 9px; box-shadow: 0 10px 20px -16px rgba(7,20,55,.3); }
.mini-line { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; }
.mark { padding: 1px 5px; border-radius: 4px; }
.ai-card.in .mark { animation: markIn 1s var(--ease) .5s both; }
.mini-tag { display: inline-flex; align-self: flex-start; white-space: nowrap; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--blue); background: var(--blue-wash); padding: 5px 10px; border-radius: 99px; }
.mini-tag .ico { width: 14px; height: 14px; }

/* Measured: the widest value (14:00-18:00) and pill (Needs a look) fit whole at the 312px design. */
.cons { display: grid; grid-template-columns: 50px minmax(62px,1fr) minmax(72px,1fr) 84px; gap: 7px; align-items: center; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 10px; font-size: 12px; white-space: nowrap; }
/* Column heads as the office's tables have them (`fw-bold text-uppercase`: 600, not spaced); the
   verdicts are badges (600). */
.cons.head-row { background: none; border: 0; padding: 0 11px; font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--muted-text); }
.cons span:first-child { color: var(--body); font-weight: 500; }
.cons b { font-weight: 600; white-space: nowrap; }
.cons i { font-style: normal; font-size: 10.5px; font-weight: 600; text-align: center; padding: 3px 0; border-radius: 99px; }
.cons .agree { background: var(--success-wash); color: var(--success-ink); }
.cons .check { background: var(--warn-wash); color: var(--warn); }
.ai-card.in .cons i { animation: popIn .45s var(--ease) both; }
.ai-card.in .cons:nth-of-type(3) i { animation-delay: .35s; }

/* The office bubble's 500 is 1.2% wider than the 400 these were drawn in, so a bubble may be 92% of
   the card, not 90%, and its sentence keeps one line wherever it did. */
.mini-msg { max-width: 92%; font-size: 12.5px; font-weight: 500; padding: 8px 11px; border-radius: 12px; line-height: 1.45; }
.mini-msg.me { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 3px; }
.mini-msg.ai { align-self: flex-start; background: #fff; border: 1px solid var(--line-2); border-bottom-left-radius: 3px; }
.mini-btns { display: flex; gap: 6px; }
.mini-btn { white-space: nowrap; font-size: 11.5px; font-weight: 600; background: var(--blue); color: #fff; padding: 5px 10px; border-radius: 7px; }
.mini-btn.ghost { background: #fff; color: var(--body); border: 1px solid var(--line-2); }

/* ==========================================================================
   THE CHAIN
   ========================================================================== */
.chain { margin-top: 56px; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.chain::before, .chain::after { content: ""; position: absolute; left: 30px; right: 30px; top: 30px; height: 2px; transform: scaleX(0); transform-origin: left; }
.chain::before { background: var(--line-2); transition: transform 1.2s var(--ease) .15s; }
.chain::after { background: var(--blue); transition: transform 1.6s var(--ease) .35s; }
.chain.in::before, .chain.in::after { transform: scaleX(1); }
.step { position: relative; z-index: 1; }
html.js .step { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(.3s + var(--i) * .22s); }
html.js .chain.in .step { opacity: 1; transform: none; }
.node { width: 60px; height: 60px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--blue); box-shadow: var(--shadow); transition: transform .25s var(--ease), border-color .25s var(--ease); }
.node.ai { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 0 0 6px var(--blue-wash), var(--shadow); }
.step:hover .node { transform: translateY(-3px); border-color: var(--blue); }
.node .ico { width: 26px; height: 26px; }
.step .k { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--muted-text); font-variant-numeric: tabular-nums; margin-top: 18px; }
.ai-tag { font-size: 10px; letter-spacing: .06em; color: var(--blue); background: var(--blue-wash); padding: 1px 7px; border-radius: 99px; }
.step .t { font-weight: 700; font-size: 16px; margin-top: 4px; }
/* Five across in the narrowest desk widths, a title a hair smaller: unspaced, "The rate con
   arrives" and "The invoice goes out" are 2% wider, and at 16px they broke where they had kept
   their line ("The rate con / arrives" to 923px with a classic scrollbar). 15.6px is 16px over that
   2%, so each keeps its line wherever it did; from 960px they fit at 16px. */
@media (min-width: 901px) and (max-width: 959px) { .step .t { font-size: 15.6px; } }
.step .d { font-size: 14px; color: var(--body); margin-top: 6px; line-height: 1.5; }
.step .d b { color: var(--ink); font-weight: 600; }
.chain-foot { margin-top: 44px; display: flex; gap: 14px; align-items: flex-start; color: var(--body); font-size: 15px; }
.chain-foot .dot { width: 8px; height: 8px; margin-top: calc(.8em - 4px); border-radius: 50%; background: var(--blue); flex: none; }

/* ==========================================================================
   THE PLATFORM
   ========================================================================== */
.pf-bar { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.pf-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px; margin: -2px; width: 100%; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--body); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .15s; }
.pf-tab:hover { border-color: var(--blue); color: var(--blue); }
.pf-tab:active { transform: scale(.97); }
.pf-tab .n { font-size: 11.5px; font-weight: 700; background: var(--ground); color: var(--muted-text); padding: 1px 7px; border-radius: 99px; transition: background-color .2s, color .2s; }
.pf-tab[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.pf-tab[aria-pressed="true"] .n { background: rgba(255,255,255,.22); color: #fff; }
.pf-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pf { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.pf:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.pf:hover .plate { transform: rotate(-6deg) scale(1.06); }
.pf .plate { width: 40px; height: 40px; border-radius: 10px; margin-bottom: 14px; transition: transform .3s var(--ease); }
.pf .plate .ico { width: 20px; height: 20px; }
.pf h3 { font-size: 15px; font-weight: 700; line-height: 1.3; }
.pf p { font-size: 13.5px; color: var(--body); margin-top: 6px; line-height: 1.5; }
html.js .pf-grid:not(.in) .pf { opacity: 0; }
.pf-grid.in .pf { animation: pfIn .5s var(--ease) both; animation-delay: calc(min(var(--i, 0), 20) * 28ms); }
/* The area groups only exist on phones. Wider, they step out of the way and the modules are one
   grid, filtered by the tabs above. */
.pf-group, .pf-body, .pf-list { display: contents; }
.pf-head { display: none; }
.roadmap { margin-top: 28px; border: 1px dashed var(--line-2); border-radius: 16px; padding: 22px 24px 24px; }
.road-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
/* A label, not a pill: it looked like a button and did nothing (review finding 19). */
.road-label { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--body); }
.road-label .ico { width: 15px; height: 15px; stroke-width: 2; color: var(--muted-text); }
.road-head p { font-size: 14px; color: var(--muted-text); }
/* On a phone the list is one fact line (the .tsf-facts pattern): small muted words, dots between,
   a few lines tall instead of a column of pills taller than the modules that ship. Wider, each
   item wears the dashed roadmap pill. */
.road-facts { margin-top: 14px; }
.road-list { list-style: none; margin: 0; padding: 0; }
.road-facts > .road-list { row-gap: 2px; }
.road-list li { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--muted-text); }
@media (min-width: 561px) {
  .road-facts { margin-top: 16px; }
  .road-facts > .road-list { margin-left: 0; gap: 8px; }
  .road-list li { margin-left: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--body); background: var(--surface); border: 1px dashed var(--line-2); border-radius: 99px; padding: 5px 12px; }
  .road-list li::before { content: none; }
}


/* ==========================================================================
   INNER PAGE HERO
   ========================================================================== */
.page-hero { background: var(--blue); color: #fff; padding: 96px 0 92px; position: relative; overflow: hidden; }
.page-hero.tall { padding-bottom: 156px; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .eyebrow { color: #fff; }
.page-hero h1 { font-size: clamp(36px, 5.2vw, 58px); font-weight: 700; line-height: 1.05; margin: 16px 0 18px; max-width: 16ch; text-wrap: balance; }
.page-hero p { font-size: 18px; opacity: .92; max-width: 52ch; }
.page-hero::before { content: ""; position: absolute; width: 900px; height: 900px; left: -360px; top: -520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.14), rgba(255,255,255,0) 70%); pointer-events: none; }
.lanes { position: absolute; right: 0; top: 0; height: 100%; width: min(62%, 760px); pointer-events: none; }
.lanes path { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 1.5; stroke-dasharray: 6 10; animation: dash 16s linear infinite; }
.lanes .dot { fill: #fff; filter: drop-shadow(0 0 5px rgba(255,255,255,.9)); }
.lifted { padding-top: 0; }
.lifted .wrap { margin-top: -80px; position: relative; z-index: 2; }

/* ---------- pricing ---------- */
/* The two switches sit on the blue hero, side by side where both fit whole and stacked, each on its
   own row and left-aligned, on a phone (a designed stack, never a squeeze): Monthly | Annual, then
   CAD | USD, each a white track with the chosen side filled white. Its words are 600 and its "Save"
   a badge (600), as the office's own Monthly | Annual switch draws them (Settings › Plan, .tsf-seg). */
.price-switches { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.bill-switch { display: inline-flex; gap: 8px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); }
.bill-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 9px; background: none; color: #fff; font-weight: 600; font-size: 15px; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s; }
.bill-switch button:hover { background: rgba(255,255,255,.12); }
.bill-switch button[aria-pressed="true"] { background: #fff; color: var(--blue); }
.bill-switch .save { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.2); color: #fff; }
.bill-switch button[aria-pressed="true"] .save { background: var(--success-wash); color: var(--success-ink); }
/* Without the script the switch can do nothing, so it is not offered: annual shows, as the page
   opens, with what is billed under every price, and the comparison table holds both. */
html:not(.js) .bill-switch, html:not(.js) .price-switches { display: none; }
.yr { display: none; }
[data-billing="yearly"] .mo { display: none; }
[data-billing="yearly"] .yr { display: inline; }
/* Every price is in the page in both currencies; the one not chosen is hidden, and the shown copy
   keeps its own display. Published on CAD, so a visitor without scripts reads Canadian dollars. */
[data-currency="CAD"] .usd, [data-currency="USD"] .cad { display: none; }
/* Annual's price, one line that never breaks (the owner, 2 Oct 2026: "i think this is too much data,
   please fix it, keep it simple"): the month's price struck, small and grey, its own currency and all
   ("~~US$79~~"), then the price a month paid yearly, large, with its label small beside the dollars,
   and "/month": "~~C$99~~ C$82.50 /month", as the office's price block draws it (review findings 3,
   6 and 9). On Monthly the strike is not there at all. */
.plan .price .was { font-size: 12px; font-weight: 500; line-height: 1; color: var(--muted-text); text-decoration-thickness: 1.5px; white-space: nowrap; }
/* The struck figure's own box at line height 1, so a paid card's price row is as tall as Free's and
   the loads pills under them sit level. */
.plan .price > .yr { line-height: 1; }
/* What an annual price bills, as plain to read as the price: the Competition Act's general impression. */
.plan .sub b { color: var(--ink); font-weight: 600; }
/* An annual price's cents, smaller on its baseline, so the figure and "/month" stay inside a narrow card. */
.plan .price .cents { font-size: .62em; }
/* The widest price is US dollars' (prices-usd): "~~US$479~~ US$399.17 /month" is 96px of the struck
   price, gaps and unit plus 4.18 times the figure's size (its label and cents are .62 of it; "C$" is
   narrower), drawn in the office's 700, unsqueezed (4.06 when it was 800 squeezed by
   .03em). The figure is sized to its card for that one, so a currency switch never changes its
   size, keeping 5px to spare: 34px wherever that fits, and below that the card's own width decides.
   Since the plan ladder (six plans, 2 Oct 2026) no card is narrower than 205px of room, three a row
   or two, so the figure is 24px or more and always the card's largest, over the loads pill's 18px.
   Every card in a row is one width, so every figure in it is one size. A browser without container
   query units (iOS 15, Chrome before 105) drops the clamp and keeps the plain 34px written before
   it, never the body's 16px. */
.plan { container-type: inline-size; }

/* SIX PLANS (the owner's plan ladder, 2 Oct 2026): three a row on a desk and from 901px (Free, Lite
   and Starter over Growth, Fleet and Enterprise), two a row from 561px, one under it. Six in one row
   would leave each card 144px of room at the page's widest (1160px), too little for the widest price,
   "~~US$479~~ US$399.17 /month", with its figure bigger than the loads pill's: the cards never go so. */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 18px 20px; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.plan:hover { transform: translateY(-5px); box-shadow: 0 1px 2px rgba(7,20,55,.04), 0 24px 48px -20px rgba(7,20,55,.25); }
.plan .name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.plan .price { margin-top: 12px; white-space: nowrap; display: flex; align-items: baseline; gap: 4px; }
.plan .price .v { font-size: 34px; font-size: clamp(18px, calc(23.92cqi - 24.2px), 34px); font-weight: 700; line-height: 1; }
/* Line height 1 on the small parts too, so a price row is the figure's height on every card, and
   Enterprise's "Quote", which has none, sits level with the rest (review finding 20). */
/* The price's currency label rides small beside its dollars, as the cents do (the office's .62em).
   The office draws the struck price and "/month" 600 (.tsf-price__was, __per); here they stay 500, as
   the clamp above was measured with them. */
.plan .price .c { margin-right: 1px; font-size: .62em; font-weight: 700; color: var(--body); line-height: 1; }
.plan .price .per { font-size: 12px; color: var(--muted-text); font-weight: 500; line-height: 1; }
/* One line's room, so the loads line and the list start at one height on every card: the year's
   total on Annual, Free's and Enterprise's notes, and on Monthly nothing under a paid price. */
.plan .sub { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted-text); font-weight: 500; min-height: 1.45em; white-space: nowrap; }
.plan .loads { margin-top: 12px; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; background: var(--blue-wash); color: var(--blue); border-radius: 10px; padding: 9px 10px; font-size: 12.5px; font-weight: 600; }
.plan .loads b { font-size: 18px; font-weight: 700; }
.plan ul { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; align-content: start; font-size: 13.5px; color: var(--body); flex: 1; }
.plan li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; white-space: nowrap; }
.plan li b { color: var(--ink); font-weight: 600; }
.plan li.reads { display: block; margin-top: -6px; text-align: right; font-size: 12px; color: var(--muted-text); }
/* The week's credits: "Credits a week 350,000" on one line, 161px of a card's 205px or more. A guard
   only: if it ever cannot fit, the figure drops whole onto a line of its own, at the right, never cut. */
.plan li.cw { flex-wrap: wrap; row-gap: 2px; }
.plan li.cw > b { margin-left: auto; }
.plan .btn { margin-top: 22px; width: 100%; height: 44px; }
/* Above the button, so every card's button sits on one line at the bottom. */
.plan .soon { margin-top: 20px; text-align: center; font-size: 12px; color: var(--muted-text); white-space: nowrap; }
.plan .soon + .btn { margin-top: 8px; }

.guarantee { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.guarantee li { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.guarantee .plate { width: 40px; height: 40px; border-radius: 11px; }
.guarantee .plate .ico { width: 20px; height: 20px; }
.guarantee-note { margin-top: 14px; font-size: 13.5px; line-height: 1.55; color: var(--muted-text); max-width: 96ch; }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.tri { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.white .tri { background: var(--ground); }
.tri:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tri .k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); white-space: nowrap; }
/* 16px, as the page's other card titles (.credit-card h3, the about page's .tcard b): unspaced, the
   longest, "Booking a new load needs more room.", is 296px, so it keeps one line in its 310px card
   from 1200px up, level with the two beside it (at 17px it needed 314.8px and broke). */
.tri b { display: block; font-size: 16px; margin-top: 8px; }
.tri p { color: var(--body); font-size: 14.5px; margin-top: 6px; }
.h3.sub-h { margin-top: 64px; }

.rules-wrap { margin-top: 40px; max-width: 880px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.rules { width: 100%; border-collapse: collapse; }
/* Column heads as the office's tables have them (`fw-bold text-uppercase`: 600, not spaced). */
.rules thead th { text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; color: var(--muted-text); padding: 14px 20px; background: var(--ground); border-bottom: 1px solid var(--line); white-space: nowrap; }
.rules tbody th { text-align: left; width: 58%; font-size: 15px; font-weight: 500; color: var(--body); padding: 15px 20px; vertical-align: top; line-height: 1.5; }
.rules td { font-size: 15px; color: var(--body); padding: 15px 20px; vertical-align: top; line-height: 1.5; }
.rules td b { color: var(--ink); font-weight: 700; }
.rules tbody tr + tr > * { border-top: 1px solid var(--line); }

.compare-wrap { margin-top: 40px; }
.compare-frame { position: relative; }
/* Soft shadows mark an edge while more plans wait past it: on the right while there are more to
   the right, and beside the sticky labels once the table has moved. A shadow reads the same over the
   grey header and the white rows; a white fade painted a pale block over the header (review
   finding 21), and a wide fade dimmed a column that was fully in view. */
.compare-frame::after { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 14px; border-radius: 0 15px 15px 0; background: linear-gradient(to left, rgba(7,20,55,.10), rgba(7,20,55,0)); opacity: 0; transition: opacity .2s; pointer-events: none; }
.compare-frame.more::after { opacity: 1; }
.compare-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.compare { --label-w: 230px; width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.compare th, .compare td { padding: 13px 16px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font-size: 15px; font-weight: 700; color: var(--ink); background: var(--ground); }
.compare thead th:not(:first-child) { scroll-snap-align: start; scroll-margin-left: var(--label-w); }
.compare th[scope="row"] { width: var(--label-w); min-width: var(--label-w); text-align: left; font-weight: 600; color: var(--ink); white-space: nowrap; line-height: 1.35; }
.compare th[scope="row"] small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--muted-text); white-space: normal; text-wrap: balance; }
.compare tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.compare tr > :first-child::after { content: ""; position: absolute; top: 0; bottom: -1px; left: 100%; width: 12px; background: linear-gradient(to right, rgba(7,20,55,.09), rgba(7,20,55,0)); opacity: 0; transition: opacity .2s; pointer-events: none; }
.compare-frame.scrolled .compare tr > :first-child::after { opacity: 1; }
.compare thead tr > :first-child { background: var(--ground); }
.compare td { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.compare .na { color: var(--muted); font-weight: 500; }
.compare .yes { color: var(--success-ink); }
.compare-hint { display: none; margin-top: 10px; font-size: 13px; color: var(--muted-text); }
.compare-wrap.scrolls .compare-hint { display: block; }
/* "Swipe" to a finger, "scroll sideways" to a mouse (review finding 21). */
.compare-hint .mouse { display: none; }
@media (pointer: fine) { .compare-hint .touch { display: none; } .compare-hint .mouse { display: inline; } }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.credits { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 20px; margin-top: 40px; align-items: start; }
.credit-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px 10px; }
.credit-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.weights, .reads-list { list-style: none; margin: 0; padding: 0; }
.weights li, .reads-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; }
.weights li + li, .reads-list li + li { border-top: 1px solid var(--line); }
/* The figures are 700 unspaced now, up to 1.9px wider ("1,000"); 2px less gap gives it back, so
   what each credit buys breaks where it did ("Ask the assistant a question" whole). */
.weights li { gap: 14px; }
.wt { font-size: 14.5px; color: var(--body); line-height: 1.45; }
.wt small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted-text); }
.wn { flex: none; min-width: 32px; text-align: right; white-space: nowrap; }
.wn b { font-size: 18px; font-weight: 700; color: var(--ink); }
.rn { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.rv { text-align: right; white-space: nowrap; font-size: 13px; color: var(--muted-text); }
.rv b { font-size: 16px; font-weight: 700; color: var(--ink); }
.rv small { display: block; font-size: 12.5px; }
.reads-list .pv .rn { color: var(--blue); }
.credit-rules { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; max-width: 1000px; }
.credit-rules li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--body); line-height: 1.55; }
.credit-rules .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--success); stroke-width: 2.4; }

.addons { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.addons li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "an ap" "ag ag"; gap: 4px 16px; align-items: baseline; align-content: start; background: var(--ground); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.an { grid-area: an; font-size: 15px; font-weight: 700; white-space: nowrap; }
.ag { grid-area: ag; font-size: 14px; color: var(--body); line-height: 1.5; }
.ap { grid-area: ap; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--muted-text); }
.ap b { font-size: 16px; font-weight: 700; color: var(--ink); }
/* Where an add-on is sold from a plan up (the Loads boost: "For Starter and up"), a small pill on a
   line of its own under what it gives, never squeezed beside the name and price. Its row is taller
   than the card beside it on a desk, so every card packs its lines to the top (`align-content:
   start` above): the shorter card's words never drift down to its middle. */
.af { grid-column: 1 / -1; justify-self: start; margin-top: 4px; font-size: 12px; font-weight: 600; line-height: 1.4; padding: 3px 10px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line-2); color: var(--body); white-space: nowrap; }

/* ---------- legal drafts ---------- */
.draft-banner { background: var(--warn-wash); border-bottom: 1px solid #F3DE9C; color: #5C4300; font-size: 14px; line-height: 1.5; padding: 12px 0; }
.draft-banner b { font-weight: 700; }
.legal-section { padding: 64px 0 96px; }
.legal { max-width: 740px; }
.legal-meta { font-size: 13.5px; color: var(--muted-text); }
.legal h2 { font-size: 21px; font-weight: 700; line-height: 1.3; margin: 44px 0 12px; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--body); }
.legal p + p, .legal ul + p, .legal p + ul, .legal .legal-table + p { margin-top: 12px; }
.legal ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.legal li::marker { color: var(--blue); }
.legal b { color: var(--ink); font-weight: 600; }
.legal .link { color: var(--blue); font-weight: 600; padding: 12px 0; }
.legal .link:hover { text-decoration: underline; }
.in-short { margin-top: 24px; background: var(--ground); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
.legal .in-short h2 { margin: 0 0 12px; font-size: 17px; }
.in-short ul { list-style: none; padding: 0; gap: 10px; }
.in-short li { display: flex; gap: 10px; font-size: 15px; line-height: 1.55; }
.in-short .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--success); stroke-width: 2.4; }
.legal .quote-line { font-size: 17px; font-weight: 600; color: var(--ink); border-left: 3px solid var(--blue); padding: 2px 0 2px 16px; margin-bottom: 14px; }
.legal-table { margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.legal-table table { width: 100%; border-collapse: collapse; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 16px; font-size: 15px; line-height: 1.55; }
.legal-table thead th { background: var(--ground); font-size: 11.5px; font-weight: 600; text-transform: uppercase; color: var(--muted-text); white-space: nowrap; }
.legal-table tbody th { width: 34%; font-weight: 600; color: var(--ink); }
.legal-table td { color: var(--body); }
.legal-table tbody tr > * { border-top: 1px solid var(--line); }

/* ---------- about ---------- */
.story { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.story-copy .h2 { margin-top: 12px; }
.story-copy p { color: var(--body); font-size: 17px; margin-top: 16px; max-width: 58ch; }
.quote { background: var(--blue); color: #fff; border-radius: 22px; padding: 44px 40px; position: relative; overflow: hidden; }
.quote::before { content: "\201C"; position: absolute; right: 26px; top: -34px; font-size: 220px; font-weight: 700; line-height: 1; opacity: .14; }
/* The quote is narrow on a desk too (beside the story), so all three of its sizes are over its 4.2%
   (see .h2): 22px, 2.6vw and 30px before. */
.quote blockquote { position: relative; font-size: clamp(21.1px, 2.49vw, 28.8px); font-weight: 700; line-height: 1.3; text-wrap: balance; }
.quote figcaption { margin-top: 22px; font-size: 13.5px; opacity: .85; }
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.card .plate { margin-bottom: 18px; }
.card h3 { font-size: 17px; font-weight: 700; }
.card p { color: var(--body); font-size: 14.5px; margin-top: 8px; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 24px; align-items: start; }
.form-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow); }
.form-panel h2 { font-size: 20px; font-weight: 700; margin-bottom: 24px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fld { display: grid; gap: 7px; margin-bottom: 18px; scroll-margin: 96px 0 24px; }
/* The office's form weights: a label is its .form-label (500), what is typed its .form-control and
   .form-select (500). */
.fld > span { font-size: 13.5px; font-weight: 500; }
.fld em { font-style: normal; font-weight: 500; color: var(--muted-text); margin-left: 4px; }
.fld input, .fld select, .fld textarea { width: 100%; background: var(--ground); border: 1px solid var(--ground); border-radius: 8px; padding: 12px 14px; font-size: 16px; font-weight: 500; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.fld textarea { resize: vertical; min-height: 132px; }
.fld select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.fld :is(input, select, textarea):focus { outline: none; background-color: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(27,132,255,.12); }
.fld .err { display: none; font-size: 12.5px; font-weight: 500; color: var(--danger); }
.fld.bad :is(input, textarea) { border-color: var(--danger); background: var(--danger-wash); }
.fld.bad .err { display: block; }
.form-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.hint { font-size: 13px; color: var(--muted-text); }
.sent { margin-top: 20px; display: flex; gap: 12px; align-items: flex-start; background: var(--success-wash); border-radius: 10px; padding: 14px 16px; font-size: 14px; animation: popIn .4s var(--ease) both; }
.sent .ico { color: var(--success-ink); stroke-width: 2.4; margin-top: 2px; }
.sent a { color: var(--blue); font-weight: 600; }
.side { display: grid; gap: 16px; }
.side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); }
.side-card .plate { margin-bottom: 16px; }
.side-card h3 { font-size: 16px; font-weight: 700; }
.side-card p { font-size: 14.5px; color: var(--body); margin-top: 6px; }
.side-card .link { color: var(--blue); font-weight: 600; }
.side-card.blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.side-card.blue .plate { background: rgba(255,255,255,.16); color: #fff; }
.side-card.blue p { color: rgba(255,255,255,.9); }
.side-card.blue .btn { margin-top: 16px; height: 44px; }

/* ==========================================================================
   CTA BAND + FOOTER
   ========================================================================== */
.band { background: var(--blue); color: #fff; padding: 100px 0; text-align: center; position: relative; overflow: hidden; }
.band::before { content: ""; position: absolute; width: 900px; height: 900px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.14), rgba(255,255,255,0) 70%); animation: breathe 8s ease-in-out infinite; pointer-events: none; }
.band .wrap { position: relative; }
.band .plate { display: inline-flex; width: auto; height: auto; background: #fff; border-radius: 12px; padding: 12px 20px; margin-bottom: 28px; }
.band .plate img { height: 32px; width: auto; }
.band h2 { font-size: clamp(28.1px, 4.2vw, 44px); font-weight: 700; line-height: 1.1; text-wrap: balance; }
.band p { margin-top: 14px; font-size: 17px; opacity: .92; }
.band .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

.footer { padding: 40px 0; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: var(--body); }
.foot-brand img { height: 22px; width: auto; }
.foot-brand p { margin-top: 8px; font-size: 13px; color: var(--muted-text); }
/* -4px: each link's 4px of padding sits outside the content edge, so the words line up with the logo
   whenever the links wrap under it. */
.foot-links { display: flex; gap: 0 14px; flex-wrap: wrap; margin-left: -4px; }
.foot-links a { white-space: nowrap; display: inline-flex; align-items: center; justify-content: flex-start; min-height: 44px; min-width: 44px; padding: 0 4px; }
.foot-links a:hover { color: var(--blue); }

/* ==========================================================================
   REVEAL
   ========================================================================== */
html.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * .09s); }
html.js [data-reveal].in { opacity: 1; transform: none; }
html.js .pf-grid[data-reveal] { transform: none; opacity: 1; }

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.7); } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes wordIn { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
@keyframes dots { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes beam { 0% { top: 0; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes fieldIn { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 100% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }
@keyframes markIn { 0% { background: transparent; box-shadow: 0 0 0 0 transparent; } 100% { background: rgba(27,132,255,.12); box-shadow: 0 0 0 1.5px var(--blue); } }
@keyframes pfIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dash { to { stroke-dashoffset: -320; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 901px) and (max-width: 1199px) {
  /* Where the columns are narrow the copy keeps 24px on its right, not 48px, so the headline keeps
     one line at a size level with the section headings under it (.h2 is 4vw here): 35.2px at
     901px, 38px at 960, 41px at 1024 with a classic scrollbar (36px, 36px and 38.6px when it gave
     up those 24px). */
  .hero-copy > div { padding-right: 24px; }
  .hero h1 { font-size: clamp(35px, calc((100cqi - 24px) / 10.54), 50.5px); }
}
@media (max-width: 1100px) {
  .pf-grid { grid-template-columns: repeat(3, 1fr); }
  .stage { gap: 56px; }
}
@media (max-width: 900px) {
  section { padding: 80px 0; }
  .nav-toggle { display: inline-flex; }
  .nav-cta .signin { display: none; }
  .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(7,20,55,.25); }
  .nav.open .nav-links { display: flex; animation: msgIn .25s var(--ease) both; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-links a[aria-current="page"] { color: var(--blue); }
  .nav-links .menu-only { display: block; border-bottom: 0; }
  .nav-inner { gap: 12px; }

  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 56px var(--gutter) 44px; }
  .hero-copy > div { margin: 0; padding: 0; max-width: 100%; }
  /* One column: the room is the whole copy width, so "The load books itself." keeps its line from
     384px (388px before the font change), and below that both sentences break as they did. */
  .hero h1 { font-size: clamp(33px, calc(100cqi / 10.54), 36px); }
  .hero-brand { padding: 48px var(--gutter); }

  .stage-fit { max-width: 560px; margin: 48px auto 0; }
  .stage { grid-template-columns: 1fr; gap: 72px; }
  .paper { transform: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding-bottom: 24px; }

  .ai-grid, .principles { grid-template-columns: 1fr; }
  .pf-grid { grid-template-columns: 1fr 1fr; }
  .pf-bar { flex-direction: column; align-items: stretch; }
  .pf-tab { height: 44px; }

  .chain { grid-template-columns: 1fr; gap: 28px; }
  .chain::before, .chain::after { left: 30px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; transform: scaleY(0); transform-origin: top; }
  .chain.in::before, .chain.in::after { transform: scaleY(1); }
  .step { display: grid; grid-template-columns: 60px 1fr; column-gap: 20px; }
  .step .node { grid-row: 1 / span 3; }
  .step .k { margin-top: 2px; }
  .step:last-child::before { content: ""; position: absolute; left: 26px; width: 10px; top: 66px; bottom: -34px; background: var(--ground); }

  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guarantee, .trio, .credits { grid-template-columns: minmax(0, 1fr); }
  .guarantee { max-width: 620px; }
  .credit-rules, .addons { grid-template-columns: minmax(0, 1fr); }
  .compare th, .compare td { padding: 12px 14px; }
  .story, .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .page-hero { padding: 72px 0; }
  .page-hero.tall { padding-bottom: 128px; }
  .lanes { width: 100%; opacity: .6; }
}
/* COMPARE 901 TO 999 */
/* Six plans beside 230px labels and 16px cells need 860px in US dollars ("US$165.83", "US$399.17",
   "US$1,990"), and the frame is 836px at 901 with a classic scrollbar: Enterprise was cut at its edge
   up to 924px. Here the cells are 12px at each side and the labels 208px, room for the widest
   caption on one line as from 1000px ("on the first payment, 30 days", 174.9px, 9px to spare), so
   the table needs 790px in US dollars and 754px in Canadian: 46px to spare at 901 (measured in
   Chrome with a classic scrollbar on 2 Oct 2026, every width from 901 to 999). From 1000px the frame
   is 935px, 75px over the 860. site.js marks the edge and shows the hint whenever the table is wider
   all the same. */
@media (min-width: 901px) and (max-width: 999px) {
  .compare { --label-w: 208px; }
  .compare th, .compare td { padding-left: 12px; padding-right: 12px; }
}
/* COMPARE 901 TO 999 END */
/* COMPARE BELOW 901 */
/* Below 901px the plan columns divide the frame exactly: --k plans a view, each (frame - labels) / k
   wide, and the table is the labels plus the six of them (the plan ladder, 2 Oct 2026). Every snap
   stop, the last included, is then a column boundary, so no plan is ever half shown next to the
   sticky labels (review finding 14), and where all six fit (a frame of 810px or more) there is
   nothing to scroll (finding 15). The scroller is the container, so its real width decides, classic
   scrollbars and all. The widest value or plan name ("By contract", "Enterprise") needs 100px with
   its padding at phone sizes and 106px above them, so a column is never under 104px, and never under
   110px beside the wider labels. */
@media (max-width: 900px) {
  .compare-scroll { container-type: inline-size; }
  .compare { --label-w: 150px; --k: 6; --col-w: calc((100cqw - var(--label-w)) / var(--k)); table-layout: fixed; width: calc(var(--label-w) + 6 * var(--col-w)); min-width: 0; }
  .compare thead th:first-child { width: var(--label-w); }
  .compare thead th:not(:first-child) { width: var(--col-w); scroll-margin-left: var(--label-w); }
}
@container (width < 810px) { .compare { --k: 5; } }
@container (width < 700px) { .compare { --k: 4; } }
@container (width < 590px) { .compare { --k: 3; } }
@container (width < 480px) { .compare { --label-w: 132px; --k: 2; } }
@container (width < 340px) { .compare { --k: 1; } }
/* COMPARE BELOW 901 END */
@media (max-width: 950px) and (max-height: 500px) {
  .nav-inner { height: 60px; }
  .nav-links { top: 60px; max-height: calc(100dvh - 60px); }
  .hero-copy { padding-top: 40px; }
}
@media (max-width: 560px) {
  :root { --gutter: 20px; }
  .hero .ctas .btn { width: 100%; }
  .hero-brand { padding: 40px var(--gutter); }
  .plans, .row2 { grid-template-columns: 1fr; }
  .plan .sub { min-height: 0; }
  .bill-switch { display: flex; width: 100%; max-width: 360px; }
  .bill-switch button { flex: 1 1 auto; padding: 0 12px; }
  .guarantee li { padding: 14px 16px; }
  .tri, .credit-card { padding: 22px 20px; }
  .credit-card { padding-bottom: 8px; }
  .rules thead { display: none; }
  .rules, .rules tbody, .rules tr, .rules tbody th, .rules td { display: block; width: auto; }
  .rules tbody th { padding: 16px 18px 4px; }
  .rules td { padding: 0 18px 16px; }
  .rules tbody tr + tr > * { border-top: 0; }
  .rules tbody tr + tr { border-top: 1px solid var(--line); }
  .compare th[scope="row"] small { font-size: 12px; }
  .compare { font-size: 13.5px; }
  .compare th[scope="row"] { font-size: 13px; }
  .compare th, .compare td { padding: 12px; }
  .addons li { padding: 14px 16px; }
  .roadmap { padding: 18px 16px 18px; }
  .legal-section { padding: 48px 0 72px; }
  /* 19px before; over its 3.5% (see .h2), so "7. The 30-day money-back guarantee" keeps its line. */
  .legal h2 { font-size: 18.4px; margin-top: 36px; }
  .in-short { padding: 18px 16px; }
  .legal-table thead { display: none; }
  .legal-table table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: auto; }
  .legal-table tbody th { width: auto; padding: 12px 16px 2px; }
  .legal-table td { padding: 0 16px 12px; }
  .legal-table tbody tr > * { border-top: 0; }
  .legal-table tbody tr + tr { border-top: 1px solid var(--line); }
  .form-panel { padding: 24px 20px; }
  .row2 { gap: 0; }
  .plan { padding: 24px 20px; }
  .band { padding: 80px 0; }
  .foot { flex-direction: column; align-items: flex-start; }

  /* The mocks below are drawn at a 340px design width on a phone (data-fit) and scale down from
     there, so these rules only have to be right at 340px and wider. */
  .a-head { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; column-gap: 12px; row-gap: 1px; padding: 14px 16px; }
  .a-head .orb { grid-row: 1 / span 2; }
  .a-head > div { display: contents; }
  .a-name { grid-column: 2; grid-row: 1; }
  .a-live { grid-column: 3; grid-row: 1; }
  .a-sub { grid-column: 2 / 4; grid-row: 2; margin-top: 0; }
  .a-body { height: 330px; padding: 16px; }
  .a-input { margin: 0 12px 12px; }
  .load-chip { flex-wrap: wrap; row-gap: 4px; }
  .load-chip .lane { order: 3; flex-basis: 100%; }

  .paper { padding: 20px 18px; font-size: 11.5px; }
  .p-top { flex-direction: column; gap: 12px; }
  .p-top > div:last-child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: left; }
  .p-no { margin-top: 0; }
  .p-stops { grid-template-columns: 1fr; }
  .form-card { padding: 18px 16px; }
  /* Each field is label and verdict on top, the whole value underneath. */
  .field, .field[data-check] { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "lab ok" "val val"; row-gap: 3px; min-height: 0; padding: 9px 12px 10px; }
  .field .lab { grid-area: lab; }
  .field .val { grid-area: val; min-height: 21px; }
  .field .ok, .field[data-check] .ok { grid-area: ok; justify-self: end; }

  /* The four figures become a list: the number in a fixed column, what it counts beside it. The
     column holds the widest figure, "16.8 s" at 34px in the office's unspaced 700, with 6.8px to
     spare (104px held it squeezed, and left it 0.8px once the spacing was normal); the gap gives
     back those 6px, so what it counts starts where it did, 120px in. */
  .stats { grid-template-columns: 1fr; margin-top: 56px; }
  .stat { display: grid; grid-template-columns: 110px minmax(0,1fr); column-gap: 10px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
  .stat:last-child { border-bottom: 0; padding-bottom: 0; }
  .stat b { font-size: 34px; }
  .stat > span { margin-top: 0; max-width: none; }

  .ai-card .spec { padding: 20px 16px; min-height: 0; }
  .ai-card .body { padding: 20px 20px 24px; }
}
/* The page titles on the narrowest phones: sized so the longest last phrase, "who've run trucks."
   (9.17 times its size in the office's unspaced 700), fits its line whole with 1% to spare, so no
   title leaves a word alone ("Talk to people / who've / run trucks." at 36px and at 32px, once the
   squeezed spacing was gone): 31px at 320, 34.5px at 360, 36px, as before, from 374. Sized to the
   title's real room (its .wrap is the container: 100cqi is the window less the gutters and any
   classic scrollbar), not the window, which counts the scrollbar the title never gets: a 320px
   window with a classic scrollbar leaves 273px, and 29.4px. */
.page-hero .wrap { container-type: inline-size; }
@media (max-width: 389px) {
  .page-hero h1 { font-size: clamp(29px, calc(100cqi / 9.27), 36px); }
}
@media (max-width: 359px) {
  :root { --gutter: 16px; }
}

/* ==========================================================================
   PROOF POINTS + TRUST STRIP
   ========================================================================== */
.proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.proof > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--body); }
.proof .ico { width: 16px; height: 16px; color: var(--success); stroke-width: 2.4; }

.trust { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.trust .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; }
.trust .wrap > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.trust .plate { width: 34px; height: 34px; border-radius: 9px; }
.trust .plate .ico { width: 17px; height: 17px; }

/* ==========================================================================
   THE OFFICE — outcomes beside a live dispatch board
   ========================================================================== */
.office { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.outcomes { display: grid; gap: 12px; margin-top: 28px; }
.outcome { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; padding: 16px 18px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s; }
.outcome:hover { transform: translateX(4px); background: var(--surface); box-shadow: var(--shadow); }
.outcome .plate { background: var(--surface); border: 1px solid var(--line); }
.outcome b, .mp b, .rule b, .tcard b, .tri b, .step .t { text-wrap: balance; }
.outcome b { display: block; font-size: 15.5px; }
.outcome > div > span { display: block; font-size: 14px; color: var(--body); margin-top: 3px; line-height: 1.5; }
.outcome.in[data-anim="hush"] .ico { animation: hush 1.4s var(--ease) .3s both; }
.outcome.in[data-anim="slide"] .ico { animation: slide 1.2s var(--ease) .45s both; }
.outcome.in[data-anim="stamp"] .ico { animation: stamp .9s var(--ease) .6s both; }
.outcome.in[data-anim="swing"] .ico { animation: swing 1.6s var(--ease) .75s both; }

.boardmock { background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(7,20,55,.35); overflow: hidden; font-size: 13px; }
.bm-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--ground); flex-wrap: wrap; }
/* The office's loads board, drawn as one picture at 13/13.975 of its size (the office's table is
   `fs-6`, 13.975px; the picture's rows are 13px), so its parts keep the office's proportions: the
   column heads `fw-bold fs-7 text-uppercase text-gray-700` (600, 12.35px there, 11.5px here: 88% of
   a row in both, never as big as the data under them), the line under a lane `fs-7` (11.5px here).
   Its title `fw-bold` (600); its tabs `fs-6 fw-semibold` (500, the count a badge, 600); its rows
   `fw-semibold` (500); a load number `font-monospace fs-8 text-gray-900` (dark, 11.05px); a status
   a badge (600). */
.bm-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; }
.bm-title .ico { width: 17px; height: 17px; color: var(--blue); }
.bm-tabs { display: flex; gap: 6px; }
.bm-tab { display: inline-flex; align-items: center; white-space: nowrap; gap: 6px; padding: 5px 10px; border-radius: 99px; font-weight: 500; font-size: 12px; color: var(--body); background: #fff; border: 1px solid var(--line-2); }
.bm-tab em { font-style: normal; font-size: 10.5px; font-weight: 600; background: var(--ground); border-radius: 99px; padding: 0 6px; }
.bm-tab.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.bm-tab.on em { background: rgba(255,255,255,.22); }
.bm-search { margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; color: var(--muted); font-size: 12px; font-weight: 500; }
.bm-search .ico { width: 14px; height: 14px; }
.bm-cols, .bm-row { display: grid; grid-template-columns: 74px 1.5fr 1fr 96px; gap: 12px; align-items: center; padding: 10px 14px; }
.bm-cols { font-size: 11.5px; font-weight: 600; text-transform: uppercase; color: var(--body); border-bottom: 1px solid var(--line); padding-top: 8px; padding-bottom: 8px; }
.bm-cols span:last-child { text-align: right; }
.bm-row { border-bottom: 1px solid var(--line); font-weight: 500; }
html.js .boardmock:not(.in) .bm-row { opacity: 0; }
.boardmock.in .bm-row { animation: rowIn .55s var(--ease) both; animation-delay: calc(.2s + var(--i) * .13s); }
.bm-row .no, .bm-cols span { white-space: nowrap; }
.bm-row .no { font-family: var(--mono); font-size: 11.05px; color: var(--ink); }
.bm-row .lane { font-weight: 600; line-height: 1.3; }
.bm-row .lane small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.bm-row .who { color: var(--body); }
.bm-row .pill { justify-self: end; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 99px; white-space: nowrap; transition: background-color .35s, color .35s; }
.pill.transit { background: var(--info-wash); color: var(--info); }
.pill.booked { background: var(--blue-wash); color: var(--blue); }
.pill.delivered { background: var(--success-wash); color: var(--success-ink); }
.pill.open { background: var(--ground); color: var(--body); border: 1px solid var(--line-2); }
.pill.flip { animation: popIn .4s var(--ease); }
.bm-foot .tsf-facts { flex: 1; }
.bm-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--blue); background: var(--blue-wash); }
.bm-foot .ico { width: 15px; height: 15px; }

/* ==========================================================================
   THE ECOSYSTEM — a hub of portals around the TMS
   ========================================================================== */
.eco { background: var(--blue); color: #fff; position: relative; overflow: hidden; }
.eco::before { content: ""; position: absolute; width: 900px; height: 900px; right: -320px; top: -420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.14), rgba(255,255,255,0) 70%); pointer-events: none; }
.eco .wrap { position: relative; z-index: 1; }
.eco .eyebrow { color: #fff; }
.eco .h2 { color: #fff; max-width: 24ch; }
.eco .lede { color: rgba(255,255,255,.88); max-width: 62ch; }
.eco-stage { margin-top: 56px; display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: center; }

.hub { position: relative; width: min(560px, 100%); aspect-ratio: 1; margin: 0 auto; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring .orbit { fill: none; stroke: rgba(255,255,255,.3); stroke-width: .6; stroke-dasharray: 1.2 2.4; }
.ring .spoke { stroke: rgba(255,255,255,.22); stroke-width: .5; transition: stroke .3s, stroke-width .3s; }
.ring .spoke.on { stroke: #fff; stroke-width: .9; }
.ring .pulse { fill: #fff; filter: drop-shadow(0 0 3px #fff); }
.hub-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; border-radius: 50%; border: 0; padding: 0; background: #fff; color: var(--blue); display: grid; place-content: center; justify-items: center; text-align: center; cursor: pointer; box-shadow: 0 0 0 10px rgba(255,255,255,.12), 0 0 0 22px rgba(255,255,255,.06), 0 30px 60px -30px rgba(0,20,70,.6); transition: box-shadow .3s var(--ease); }
.hub-core .ico { width: 28px; height: 28px; }
.hub-core b { display: block; font-size: 15px; margin-top: 6px; }
.hub-core small { font-size: 11px; color: var(--body); }
.hub-core[aria-pressed="true"] { box-shadow: 0 0 0 10px rgba(255,255,255,.22), 0 0 0 22px rgba(255,255,255,.1), 0 30px 60px -30px rgba(0,20,70,.6); }
.hub-node { position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y)); width: 112px; margin: -30px 0 0 -56px; display: grid; justify-items: center; gap: 8px; text-align: center; background: none; border: 0; color: #fff; cursor: pointer; padding: 0; }
.hub-node .plate { width: 60px; height: 60px; border-radius: 18px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; transition: transform .25s var(--ease), background-color .25s, color .25s, box-shadow .25s; }
.hub-node .plate .ico { width: 26px; height: 26px; }
.hub-node .hn { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.hub-node .rtag { font-style: normal; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; padding: 4px 7px; border-radius: 99px; border: 1px dashed rgba(255,255,255,.55); color: rgba(255,255,255,.9); }
.hub-node.soon .plate { border-style: dashed; border-color: rgba(255,255,255,.5); color: rgba(255,255,255,.85); }
.hub-node.soon .hn { opacity: .92; }
.hub-node:hover .plate, .hub-node[aria-pressed="true"] .plate { background: #fff; color: var(--blue); transform: scale(1.08); box-shadow: 0 12px 30px -10px rgba(0,20,70,.5); }
.hub-node:focus-visible, .hub-core:focus-visible { outline: none; }
.hub-node:focus-visible .plate { box-shadow: 0 0 0 4px rgba(255,255,255,.55); }
.hub-core:focus-visible { box-shadow: 0 0 0 5px rgba(255,255,255,.55), 0 0 0 22px rgba(255,255,255,.1); }
/* The ring point sits at the tile's centre. The tile is painted opaque (the same blue it showed
   before) and the label gets a blue backing, so neither the ring nor a spoke runs through them. */
@media (min-width: 901px) {
  .hub-node .plate { background-color: #3693FF; }
  .hub-node .hn { background: var(--blue); padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
  .hub-node.soon .plate { background-color: var(--blue); }
  .hub-node .rtag { background: var(--blue); margin-top: -2px; }
}
html.js .eco-stage.in .hub-node { animation: popIn .5s var(--ease) both; animation-delay: calc(.3s + var(--n, 0) * .1s); }

.eco-detail { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 20px; padding: 26px; min-height: 350px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.eco-detail .k { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .82; }
.eco-detail h3 { font-size: 22px; font-weight: 700; margin-top: 6px; line-height: 1.2; }
.eco-detail .who { margin-top: 6px; font-size: 14px; opacity: .9; }
.eco-detail ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; }
.eco-detail li { display: flex; gap: 9px; font-size: 14px; line-height: 1.45; animation: rowIn .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.eco-detail li .ico { width: 16px; height: 16px; stroke-width: 2.4; flex: none; margin-top: 3px; }
.eco-detail.swap > * { animation: msgIn .35s var(--ease) both; }
.eco-detail .road-k { display: flex; align-items: center; gap: 7px; }
.eco-detail .road-k .ico { width: 16px; height: 16px; stroke-width: 2; }
.eco-detail ul.soon li { opacity: .9; }

.eco-rules { margin-top: 52px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.rule { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 16px; transition: background-color .25s, transform .25s var(--ease); }
.rule:hover { background: rgba(255,255,255,.16); transform: translateY(-3px); }
.rule b { display: block; font-size: 14px; }
.rule > span { display: block; font-size: 12.5px; opacity: .85; margin-top: 4px; line-height: 1.45; }

/* ==========================================================================
   MULTI-COMPANY — an organization that builds itself, and a switcher
   ========================================================================== */
.multi-stage { margin-top: 48px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 32px; align-items: center; }
.org { background: var(--ground); border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.org-tree { display: grid; justify-items: center; }
.org-node { display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; font-weight: 600; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.org-node .plate { width: 30px; height: 30px; border-radius: 8px; }
.org-node .plate .ico { width: 15px; height: 15px; }
.org-node .nm { display: block; }
.org-node .nm > span, .term, .sw-name, .sw-cell span, .sw-cell b { white-space: nowrap; }
.org-node small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
/* The three companies stay on one row under the bar; a long name wraps inside its box instead. */
.org-branch .org-node { white-space: normal; min-width: 0; flex: 0 1 auto; }
.org-node.root { background: var(--blue); color: #fff; border-color: var(--blue); font-size: 14.5px; }
.org-node.root .plate { background: rgba(255,255,255,.18); color: #fff; }
.org-node.root small { color: rgba(255,255,255,.85); }
.org-line { width: 2px; height: 22px; background: var(--line-2); transform-origin: top; }
.org-bar { height: 2px; width: 66%; background: var(--line-2); transform-origin: center; }
.org-branch { display: flex; gap: 12px; justify-content: center; flex-wrap: nowrap; margin-top: 22px; position: relative; }
.org-branch::before { content: ""; position: absolute; left: 50%; top: -22px; width: 2px; height: 22px; background: var(--line-2); transform: translateX(-50%); }
.terms { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.term { font-size: 11.5px; font-weight: 600; color: var(--body); background: #fff; border: 1px solid var(--line-2); padding: 4px 10px; border-radius: 99px; }
html.js .org:not(.in) :is(.org-node, .org-line, .org-bar, .term, .switcher) { opacity: 0; }
.org.in .org-node, .org.in .term, .org.in .switcher { animation: popIn .5s var(--ease) both; animation-delay: calc(var(--i) * .16s); }
.org.in .org-line { animation: growY .35s var(--ease) both; animation-delay: calc(var(--i) * .16s); }
.org.in .org-bar { animation: growX .45s var(--ease) both; animation-delay: calc(var(--i) * .16s + .1s); }

.switcher { margin-top: 22px; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.sw-head { white-space: nowrap; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ground); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--body); flex-wrap: wrap; }
.sw-co { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; min-width: 250px; }
.sw-co .plate { width: 24px; height: 24px; border-radius: 6px; }
.sw-co .plate .ico { width: 13px; height: 13px; }
.sw-co > .ico { width: 15px; height: 15px; margin-left: auto; color: var(--muted); }
.sw-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.sw-cell span { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.sw-cell b { display: block; font-size: 17px; font-weight: 700; margin-top: 3px; }
.swapping { animation: swapText .5s var(--ease); }

.multi-points { display: grid; gap: 12px; }
.mp { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.mp:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.mp b { display: block; font-size: 15px; }
.mp > div > span { display: block; font-size: 13.5px; color: var(--body); margin-top: 3px; line-height: 1.5; }
.mp.road { background: var(--ground); border: 1px dashed var(--line-2); }
.mp.road:hover { transform: none; box-shadow: none; }
.mp.road .plate { background: var(--surface); border: 1px solid var(--line); color: var(--muted-text); }
.mp.road b { color: var(--body); }

/* ==========================================================================
   MIGRATION BAND
   ========================================================================== */
.migrate { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 56px 0; }
.migrate .wrap { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.h3 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 700; line-height: 1.2; margin-top: 10px; max-width: 26ch; text-wrap: balance; }
.migrate p { color: var(--body); margin-top: 8px; }
.mig-anim { display: flex; align-items: center; gap: 14px; }
.mig-src, .mig-dst { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.mig-src { background: var(--ground); border: 1px solid var(--line-2); color: var(--body); }
.mig-src .ico { width: 26px; height: 26px; }
.mig-dst { background: #fff; border: 1px solid var(--line-2); box-shadow: 0 0 0 4px var(--blue-wash); }
.mig-rows { position: relative; width: 120px; height: 44px; overflow: hidden; }
.mig-rows i { position: absolute; left: 0; top: calc(var(--i) * 12px); width: 64px; height: 6px; border-radius: 3px; background: var(--blue-wash); animation: migRow 2.6s var(--ease) infinite; animation-delay: calc(var(--i) * .32s); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 780px; margin-top: 40px; display: grid; gap: 10px; }
.q { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; transition: border-color .25s, box-shadow .25s; }
.q.open { border-color: var(--line-2); box-shadow: var(--shadow); }
.q > button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: none; border: 0; border-radius: 14px; text-align: left; font-weight: 600; font-size: 16px; cursor: pointer; color: var(--ink); }
.q > button > span { text-wrap: balance; }
.q > button .ico { width: 20px; height: 20px; color: var(--blue); flex: none; transition: transform .35s var(--ease); }
.q.open > button .ico { transform: rotate(45deg); }
.q .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.q.open .a { grid-template-rows: 1fr; }
/* A closed answer is hidden from screen readers too; visibility waits for the height to close. */
.q .a > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear .4s; }
.q.open .a > div { visibility: visible; transition-delay: 0s; }
.q .a p { padding: 0 20px 18px; color: var(--body); font-size: 15px; line-height: 1.6; }

/* ==========================================================================
   PRICING EXTRAS — footnote
   ========================================================================== */
.foot-note { margin-top: 22px; font-size: 13.5px; color: var(--muted-text); max-width: 76ch; }

/* ==========================================================================
   ABOUT — trust
   ========================================================================== */
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
.tcard { background: var(--ground); border: 1px solid var(--line); border-radius: 16px; padding: 24px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s; }
.tcard:hover { transform: translateY(-4px); background: var(--surface); box-shadow: var(--shadow); }
.tcard .plate { margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); }
.tcard b { display: block; font-size: 16px; }
.tcard p { color: var(--body); font-size: 14.5px; margin-top: 6px; }
.trust-foot { margin-top: 22px; font-size: 14px; color: var(--body); }
.trust-foot a { color: var(--blue); font-weight: 600; }
/* Inline links in running copy get a finger-sized hit area without moving a line of text. */
.trust-foot a, .side-card a.link { padding: 14px 0; }

/* ---------- extra keyframes ---------- */
@keyframes rowIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes swapText { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
@keyframes migRow { 0% { transform: translateX(-70px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(130px); opacity: 0; } }
@keyframes hush { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-12deg); } 30% { transform: rotate(10deg); } 45% { transform: rotate(-6deg); } 60% { transform: rotate(0); } }
@keyframes slide { 0% { transform: translateX(-6px); opacity: .4; } 60% { transform: translateX(3px); opacity: 1; } 100% { transform: none; } }
@keyframes stamp { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 55% { transform: rotate(-10deg); } 80% { transform: rotate(4deg); } }

/* ---------- responsive for the new sections ---------- */
@media (max-width: 1100px) {
  .eco-rules { grid-template-columns: repeat(3, 1fr); }
  .eco-stage { grid-template-columns: 1fr 330px; gap: 32px; }
}
/* The board needs about 575px beside the copy before its longest lane fits on one line (555px
   before the font change: its rows are the office's 500 now, and its arrow the office's stack's). */
@media (max-width: 1160px) {
  .office { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 900px) {
  .eco-stage { grid-template-columns: 1fr; gap: 24px; }
  .hub { aspect-ratio: auto; width: 100%; display: grid; gap: 10px; }
  .ring { display: none; }
  /* The TMS row lines its icon and words up with the portal rows under it (icon box 44px). */
  .hub-core { position: static; transform: none; width: 100%; height: auto; min-height: 66px; border-radius: 14px; padding: 10px 15px; display: flex; place-content: normal; justify-content: flex-start; align-items: center; gap: 12px; text-align: left; box-shadow: none; }
  .hub-core .ico { width: 26px; height: 26px; margin: 0 9px; }
  .hub-core b { margin: 0; font-size: 15px; white-space: nowrap; }
  .hub-core small { display: block; }
  .hub-core[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
  .hub-node { position: static; margin: 0; width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 10px 14px; }
  .hub-node .plate { width: 44px; height: 44px; border-radius: 12px; }
  .hub-node .plate .ico { width: 22px; height: 22px; }
  .hub-node .hn { font-size: 14.5px; }
  .hub-node .rtag { margin-left: auto; }
  .hub-node:hover .plate, .hub-node[aria-pressed="true"] .plate { transform: none; }
  .hub-node[aria-pressed="true"] { background: rgba(255,255,255,.2); border-color: #fff; }
  .eco-detail { min-height: 0; }
  .multi-stage { grid-template-columns: 1fr; }
  .migrate .wrap { grid-template-columns: 1fr; }
  .mig-anim { justify-content: flex-start; }
  .trust-grid { grid-template-columns: 1fr; }
  .bm-cols, .bm-row { grid-template-columns: 70px 1.5fr 1fr 90px; }
  .bm-search { display: none; }
}
@media (max-width: 560px) {
  .eco-rules { grid-template-columns: 1fr; gap: 10px; margin-top: 40px; }
  .rule { padding: 14px 16px; }
  .trust .wrap { justify-content: flex-start; }
  .org { padding: 18px; }
  .org-branch { flex-direction: column; align-items: stretch; }
  .org-node { justify-content: flex-start; }
  .sw-co { min-width: 0; width: 100%; }
  .sw-body { grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 12px; }
  .sw-cell b { font-size: 14px; }
  .rule > span { font-size: 13px; }
  .proof { display: grid; gap: 10px; }
  .card, .tcard, .side-card { padding: 22px 20px; }
  /* Two titles over their few percent (see .h2), so they break where they did before the font
     change: "Company control center" (22px before) and "No number we can't stand behind" (17px). */
  .eco-detail h3 { font-size: 21.2px; }
  .card h3 { font-size: 16.6px; }
  .quote { padding: 36px 24px; }
  .bm-head { row-gap: 10px; }
  .bm-tabs { flex-basis: 100%; }
  .outcome, .mp { grid-template-columns: 40px minmax(0,1fr); gap: 14px; padding: 16px; }
  .outcome .plate { width: 40px; height: 40px; border-radius: 11px; }
  .outcome .plate .ico { width: 20px; height: 20px; }
  .mp .plate { width: 40px; height: 40px; border-radius: 11px; }
  .mp .plate .ico { width: 20px; height: 20px; }
}

/* The board's rows become cards (number and status, the lane, the driver) up to 600px: in four
   columns between 561 and 600px a lane broke inside ("Caledon, ON → / Allentown, PA") and a shipper
   left its trailer on a line of its own, more often once the rows were the office's 500. */
@media (max-width: 600px) {
  .bm-cols { display: none; }
  .bm-row { grid-template-columns: 1fr auto; grid-template-areas: "no pill" "lane lane" "who who"; row-gap: 4px; }
  .bm-row .no { grid-area: no; }
  .bm-row .pill { grid-area: pill; }
  .bm-row .lane { grid-area: lane; }
  .bm-row .who { grid-area: who; font-size: 12px; }
}

/* Nine footer links in three even columns, words on the content edge. Up to 700px, not 560: between
   them a free-flowing row left "Sign in" alone on a second line (review finding 17). */
@media (max-width: 700px) {
  .foot-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; margin-left: -4px; width: calc(100% + 4px); }
}

/* ---------- the platform on a phone ---------- */
/* On a phone (portrait, or on its side) the modules are five areas that open and close, the
   first one open: every module is a tap away, and the page stays a page. */
@media (max-width: 560px), (max-width: 950px) and (max-height: 500px) {
  .pf-bar { display: none; }
  .pf-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; margin-top: 32px; }
  .pf-group { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; transition: border-color .25s, box-shadow .25s; }
  .pf-group.open { border-color: var(--line-2); box-shadow: var(--shadow); }
  .pf-head { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 16px; border: 0; border-radius: 16px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
  .pf-head .plate { width: 40px; height: 40px; border-radius: 11px; }
  .pf-head .plate .ico { width: 20px; height: 20px; }
  .pf-name { flex: 1; min-width: 0; }
  .pf-name b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
  .pf-name .short { display: none; }
  .pf-name small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--muted-text); white-space: nowrap; }
  .pf-head > .ico { width: 20px; height: 20px; color: var(--blue); stroke-width: 2; transition: transform .35s var(--ease); }
  .pf-group.open .pf-head > .ico { transform: rotate(180deg); }
  .pf-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
  .pf-group.open .pf-body { grid-template-rows: 1fr; }
  /* A closed group is hidden from screen readers too; visibility waits for the height to close. */
  .pf-list { display: block; min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .4s; }
  .pf-group.open .pf-list { visibility: visible; transition-delay: 0s; }
  html:not(.js) .pf-body { grid-template-rows: 1fr; }
  html:not(.js) .pf-list { visibility: visible; }
  .pf-list::before { content: ""; display: block; height: 1px; margin: 0 16px; background: var(--line); }
  .pf { position: relative; display: grid; grid-template-columns: 40px minmax(0,1fr); column-gap: 14px; align-items: start; margin: 0 16px; padding: 14px 0 15px; border: 0; border-radius: 0; background: none; }
  .pf + .pf::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
  .pf:hover { transform: none; box-shadow: none; }
  .pf:hover .plate { transform: none; }
  .pf .plate { grid-row: 1 / span 2; justify-self: center; width: 36px; height: 36px; margin: 0; border-radius: 10px; }
  .pf .plate .ico { width: 18px; height: 18px; }
  .pf h3 { font-size: 14.5px; line-height: 1.35; }
  .pf p { margin-top: 3px; font-size: 13.5px; }
}
@media (max-width: 389px) {
  .pf-name .long { display: none; }
  .pf-name .short { display: inline; }
}

/* ==========================================================================
   MOTION PREFERENCE — every animation above is decoration; the page is whole without them
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; animation-delay: 0s !important; }
  .rise, html.js [data-reveal], html.js .step, html.js .pf-grid:not(.in) .pf, html.js .boardmock:not(.in) .bm-row,
  html.js .org:not(.in) :is(.org-node, .org-line, .org-bar, .term, .switcher) { opacity: 1 !important; transform: none !important; }
  .mig-rows i { display: none; }
  .chain::before, .chain::after { transform: none !important; }
  .beam, .lanes .dot { display: none; }
}