/* ==========================================================================
   TranSof 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.
   ========================================================================== */

: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) */
  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, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  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)); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
: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 ---------- */
.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: 600; 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: .08em; 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; }
.h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.028em; 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; }
.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; }
.hero h1 { font-size: clamp(36px, 4vw, 52px); font-weight: 800; letter-spacing: -.035em; 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: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.a-name { font-weight: 700; font-size: 14.5px; line-height: 1.2; white-space: nowrap; }
.a-sub { font-size: 12px; 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); }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 14px; 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; }
.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: 12.5px; animation: popIn .4s var(--ease) both; }
.load-chip .no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--body); white-space: nowrap; }
.load-chip .lane { font-weight: 600; 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: 700; 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; }
.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: 700; 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: 800; letter-spacing: -.01em; white-space: nowrap; }
.p-kind { font-size: 10px; font-weight: 800; letter-spacing: .14em; 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: .1em; 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: 800; 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; letter-spacing: .04em; 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: 700; 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: 700; 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; }
.field .lab { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; 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: 700; 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: 700; 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; 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: 800; letter-spacing: -.03em; 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; letter-spacing: -.012em; }
.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; }
.cons.head-row { background: none; border: 0; padding: 0 11px; font-size: 10px; font-weight: 700; letter-spacing: .06em; 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: 700; 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; }

.mini-msg { max-width: 90%; font-size: 12.5px; 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); letter-spacing: .08em; 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; letter-spacing: -.01em; }
.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; letter-spacing: -.01em; 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: .07em; 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: 800; letter-spacing: -.035em; 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. */
.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: 700; 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 struck line, "C$99 billed monthly": the month's price struck, its words not, small, one
   line that never breaks, 10px under the name and 4px over the price it belongs to. Every card
   keeps the line's height in the Annual view (Free's and Enterprise's are empty), so the loads
   pills sit level with the cards beside it. A card alone on its row has no pill to level with, so
   its empty line steps out (RESPONSIVE: Enterprise below 1200px, every card below 561px). The 4px
   is the line's own -8px bottom margin against the price's 12px, never a rule on the price: the
   line is in the page while it is hidden too (Monthly, and those lone cards), and a hidden line
   moves nothing, so the price keeps its 12px under the name there. */
.plan .was { display: none; margin: 10px 0 -8px; min-height: 18px; font-size: 12.5px; line-height: 18px; font-weight: 500; color: var(--muted-text); white-space: nowrap; }
[data-billing="yearly"] .plan .was { display: block; }
.plan .was s { color: var(--body); text-decoration-thickness: 1.5px; }
/* 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; letter-spacing: -.01em; }
/* The widest price is US dollars' (prices-usd): "US$ 399.17 /month" is 83px of currency, gaps and
   unit plus 2.8 times the figure's size ("C$" is 10px narrower). The figure is sized to its card for
   that one, so a currency switch never changes its size: 34px wherever that fits with 6px to spare,
   29.5px in the 172px cards five to a row (1200px and up), 25px in the 160px cards four to a row at
   901px. 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; }

.plans { display: grid; grid-template-columns: repeat(5, 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; letter-spacing: 0; 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(24px, calc(35.8cqi - 31.9px), 34px); font-weight: 800; letter-spacing: -.03em; 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). */
.plan .price .c { font-size: 15px; font-weight: 700; color: var(--body); line-height: 1; }
.plan .price .per { font-size: 13px; color: var(--muted-text); font-weight: 500; line-height: 1; }
/* Two lines' room, so the loads line and the list start at one height on every card. */
.plan .sub { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted-text); font-weight: 500; min-height: 2.9em; }
.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: 800; letter-spacing: -.02em; }
/* Five to a row (1200px and up, 172px cards), Enterprise's "Custom loads a month" is the widest
   pill: its word a size smaller keeps the pill's 10px on the right as on the left (11.7px measured
   at 1200 with a classic scrollbar), on the 18px figures' 28.8px line, so the pill stays as tall as
   the four beside it and the lists under them start level. */
@media (min-width: 1200px) { .plan.ent .loads b { font-size: 16px; line-height: 1.8; } }
.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 wherever it fits whole. A guard only: if it
   ever cannot, 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; }
/* A card too narrow for the label and a six-digit figure (four to a row, 901px and a little up with a
   real scrollbar: the card's own width decides, so a scrollbar, zoom or font cannot move it) says the
   label short, "A week 350,000": "Credits " is clipped the way `.sr` clips (read aloud, and still in
   the card's text), and the "a" is drawn as a capital. W = Fleet's row measured whole in Chrome with
   real scrollbars (Inter 13.5px: "Credits a week" 94.70px + the row's gap 10px + "350,000" 56.03px =
   160.73px) + 8px of slack, rounded up: 169px of the card's content box. */
@container (width < 169px) {
  .plan li .lw { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .plan li .lc { text-transform: uppercase; }
}
.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: .08em; text-transform: uppercase; color: var(--blue); white-space: nowrap; }
.tri b { display: block; font-size: 17px; margin-top: 8px; letter-spacing: -.01em; }
.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; }
.rules thead th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; 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; letter-spacing: -.01em; 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); }
.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: 800; color: var(--ink); letter-spacing: -.02em; }
.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: 800; color: var(--ink); letter-spacing: -.01em; }
.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; 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: 800; color: var(--ink); letter-spacing: -.01em; }

/* ---------- 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: 800; letter-spacing: -.015em; 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: 700; letter-spacing: .08em; 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: 800; line-height: 1; opacity: .14; }
.quote blockquote { position: relative; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.02em; 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; letter-spacing: -.012em; }
.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; letter-spacing: -.015em; 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; }
.fld > span { font-size: 13.5px; font-weight: 600; }
.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; 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(30px, 4.2vw, 44px); font-weight: 800; letter-spacing: -.03em; 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 (max-width: 1199px) {
  /* Enterprise has a row to itself below this width, so its list runs in two columns, and its
     reads line and its empty struck line (there only to line its rows and its pill up with the
     cards beside it) step out. */
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan.ent { grid-column: span 2; }
  .plan.ent ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .plan.ent .loads { align-self: flex-start; }
  .plan.ent li.reads { display: none; }
  [data-billing="yearly"] .plan.ent .was { display: none; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  /* Four plans a row, and Enterprise across the row under them: its name and price, its list, its
     button. Beside Fleet it stretched to Fleet's height and left 250px of empty card (review
     finding 20). Its list's two columns are 44px apart, so its credits row ("Credits a week
     Custom", in a cell the card's own container query never narrows) keeps the 8px of slack every
     credits row keeps: 9.1px at 901 with a real scrollbar (7.1px at 48px). */
  .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plan.ent { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; grid-template-rows: auto auto auto 1fr; column-gap: 32px; align-items: start; }
  .plan.ent > :is(.name, .price, .sub, .loads) { grid-column: 1; }
  .plan.ent .sub { min-height: 0; }
  .plan.ent ul { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--line); column-gap: 44px; }
  .plan.ent .btn { grid-column: 3; grid-row: 1 / -1; align-self: center; width: auto; margin: 0; padding: 0 28px; }
}
@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%; }
  .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 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 five of them. 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 five fit (a tablet, a phone on its side) 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: 5; --col-w: calc((100cqw - var(--label-w)) / var(--k)); table-layout: fixed; width: calc(var(--label-w) + 5 * 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 < 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; }
  /* One card a row: an empty struck line levels nothing, so Free's steps out with Enterprise's. */
  [data-billing="yearly"] .plan .was:empty { display: none; }
  .plan.ent { grid-column: auto; }
  .plan.ent ul { grid-template-columns: 1fr; }
  .plan.ent .loads { align-self: stretch; }
  .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; }
  .legal h2 { font-size: 19px; 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. */
  .stats { grid-template-columns: 1fr; margin-top: 56px; }
  .stat { display: grid; grid-template-columns: 104px minmax(0,1fr); column-gap: 16px; 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; }
}
@media (max-width: 359px) {
  :root { --gutter: 16px; }
  /* so each page title breaks between whole phrases ("Priced by truck." / "Drivers unlimited.") */
  .page-hero h1 { font-size: 32px; }
}

/* ==========================================================================
   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; }
.bm-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; 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: 600; font-size: 12px; color: var(--body); background: #fff; border: 1px solid var(--line-2); }
.bm-tab em { font-style: normal; font-size: 10.5px; 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; }
.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: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); 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); }
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: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--body); }
.bm-row .lane { font-weight: 600; line-height: 1.3; }
.bm-row .lane small { display: block; font-weight: 400; 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: 700; 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: .07em; 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: .08em; text-transform: uppercase; opacity: .82; }
.eco-detail h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; 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: 700; 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: 700; text-transform: uppercase; letter-spacing: .07em; }
.sw-cell b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; 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(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.022em; 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 555px beside the copy before its longest lane fits on one line. */
@media (max-width: 1140px) {
  .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; }
  .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; }
  .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; }
  .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; }
}

/* 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; letter-spacing: -.01em; 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; }
}