/* tds.ai — "Daybreak" layout in the Option 4 palette (Industrial Modern: Orange + Graphite), chosen 2026-10-29.
   Orange is an accent only: buttons, markers, underlines, map stops. It is 2.63:1 on white, so never small text. */

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

:root {
  --orange: #FF7900; --graphite: #292D32; --grey: #6B7280; --silver: #D1D5DB; --off: #F9FAFB; --white: #FFFFFF; --btn-ink: #171717;
  --on-dark-2: #D1D5DB;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 48px); --maxw: 1200px;
  --radius: 20px; --radius-btn: 12px;
  --shadow: 0 18px 50px rgba(41,45,50,.12); --shadow-dark: 0 24px 60px rgba(0,0,0,.45);
  --glow: radial-gradient(ellipse 55% 80% at 100% 100%, rgba(255,121,0,.28), transparent 65%);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--off); color: var(--graphite); font: 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--graphite); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--graphite); outline-offset: 2px; }
.dark :focus-visible, .site-foot :focus-visible { outline-color: var(--white); }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(40px, 6vw, 76px); }
h2 { font-size: clamp(30px, 4vw, 46px); }
h3 { font-size: 20px; letter-spacing: -0.01em; line-height: 1.3; font-weight: 700; }
p { margin: 0; }
h1, h2, h3 { text-wrap: pretty; }   /* with build.no_orphans (last two words joined) no one-word last lines; balance split long headings badly */
p, li, figcaption { text-wrap: pretty; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--graphite); color: var(--white); padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.label { font-size: 14px; font-weight: 700; letter-spacing: .01em; color: var(--graphite); display: inline-flex; align-items: center; gap: 9px; }
.label::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--orange); flex: none; }
.pill { display: inline-block; justify-self: start; padding: 6px 13px; border-radius: 999px; border: 1.5px solid var(--orange); font-size: 14px; font-weight: 700; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--grey); max-width: 35.5em; }
.dark .lead { color: var(--on-dark-2); }
.note { font-size: 14px; color: var(--grey); }
.dark .note { color: var(--on-dark-2); }   /* #D1D5DB on graphite, about 10:1 */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--radius-btn);
  font: 700 16px/1 var(--font); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
.btn-primary { background: var(--orange); color: var(--btn-ink); }
.btn-primary:hover { background: #ff8a24; }
.btn-secondary { background: var(--white); color: var(--graphite); border-color: var(--silver); }
.btn-secondary:hover { border-color: var(--graphite); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

section { padding: clamp(64px, 8vw, 112px) 0; }
.sec-head { display: grid; gap: 14px; margin-bottom: 44px; max-width: 760px; }
.dark { background: var(--graphite) var(--glow); color: var(--white); }
.dark a { color: var(--white); }
.dark .btn-primary { color: var(--btn-ink); }
.dark .btn-secondary { color: var(--graphite); }
.dark .label, .dark .pill { color: var(--white); }
.white { background: var(--white); }

/* ---------- header ---------- */
/* language indicator above the header (English / Español, 2026-11-01) */
.lang-bar { background: var(--off); border-bottom: 1px solid var(--silver); font-size: 14px; }
.lang-bar .wrap { display: flex; justify-content: flex-end; }
.lang { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.lang-ico { width: 18px; height: 18px; fill: none; stroke: var(--graphite); stroke-width: 1.6; flex: none; }
.lang ul { display: flex; list-style: none; margin: 0; padding: 0; }
.lang li + li { border-left: 1px solid var(--silver); }
.lang a { display: block; padding: 6px 10px; color: var(--graphite); text-decoration: none; font-weight: 500; line-height: 1.2; }
.lang a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.lang a[aria-current] { font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.lang li:last-child a { padding-right: 0; }
.site-head { background: var(--white); border-bottom: 1px solid var(--silver); position: relative; z-index: 20; }
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.logo { display: inline-flex; flex: none; }
.logo img { height: 48px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.site-nav > a, .nav-plat { color: var(--graphite); text-decoration: none; font: 600 16px var(--font); background: none; border: 0; padding: 8px 0; cursor: pointer; }
.site-nav > a:hover, .nav-plat:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.site-nav > a[aria-current="page"], .nav-plat[data-current] { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; }
.nav-plat::after { content: ""; display: inline-block; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin: 0 0 4px 9px; }
.nav-plat[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: 0; }
.head-cta { display: flex; align-items: center; gap: 20px; }
.head-cta .btn { min-height: 42px; padding: 0 18px; font-size: 15px; }
/* es/fr nav labels are longer: keep each on one line and tighten spacing just above the 960px menu breakpoint (QA 2026-11-01) */
.site-nav > a, .nav-plat { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1100px) { .site-head .wrap { gap: 18px; } .site-nav { gap: 18px; } .head-cta .btn { padding: 0 14px; } }
.menu-btn { display: none; margin-left: auto; min-height: 42px; padding: 0 14px; border: 1.5px solid var(--silver); border-radius: 10px; background: var(--white); font: 700 15px var(--font); color: var(--graphite); cursor: pointer; }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--silver); box-shadow: 0 24px 40px rgba(41,45,50,.10); }
.mega .wrap { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; gap: 28px; padding-top: 28px; padding-bottom: 32px; }
.mega h2 { font-size: 14px; letter-spacing: .01em; margin-bottom: 10px; }
.mega a { display: block; padding: 8px 0; text-decoration: none; }
.mega a b { display: block; font-weight: 700; }
.mega a span { color: var(--grey); font-size: 14px; }
.mega a:hover b { text-decoration: underline; text-decoration-color: var(--orange); }
.mega .all { grid-column: 1 / -1; border-top: 1px solid var(--silver); padding-top: 16px; }
.mega .all a { display: inline; font-weight: 700; }

@media (max-width: 960px) {
  .js .menu-btn { display: inline-flex; align-items: center; }
  .site-head .wrap { flex-wrap: wrap; }
  .site-nav { flex-wrap: wrap; gap: 4px 20px; margin-left: 0; width: 100%; padding-bottom: 12px; }   /* no JS: nav stays visible */
  .js .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--silver);
    flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px var(--gutter) 20px; box-shadow: 0 24px 40px rgba(41,45,50,.10); }
  .js .site-nav.open { display: flex; }
  .js .site-head .wrap { flex-wrap: nowrap; }
  .js .site-nav > a, .js .nav-plat { padding: 14px 0; border-bottom: 1px solid var(--silver); text-align: left; }
  .mega { position: static; box-shadow: none; border: 0; }
  .mega .wrap { grid-template-columns: 1fr 1fr; padding: 8px 0 16px; gap: 16px; }
  .js .head-cta { flex-direction: column; align-items: stretch; padding-top: 16px; gap: 12px; }
}
@media (max-width: 480px) { .mega .wrap { grid-template-columns: 1fr; } .logo img { height: 40px; } }

/* ---------- home hero ---------- */
.hero { padding: clamp(56px, 8vw, 104px) 0 clamp(80px, 9vw, 120px); overflow: hidden; }
/* home and page heroes: a stronger, more defined orange glow than the other dark sections */
.hero.dark, .page-hero.dark { background-image: radial-gradient(ellipse 52% 78% at 100% 100%, rgba(255,121,0,.46) 0%, rgba(255,121,0,.24) 38%, transparent 62%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { display: grid; gap: 22px; }
/* home H1 sized from its column, not the viewport, so "transportation." (7.04em wide) never splits mid-word (2026-11-01) */
@supports (font-size: 1cqi) { .hero-copy { container-type: inline-size; } .hero-copy h1 { font-size: clamp(30px, 13.6cqi, 72px); } }
/* WCAG 1.4.12 at phone widths: a word made longer by user letter spacing breaks instead of pushing the page sideways */
body { overflow-wrap: break-word; }
.hero-copy, .ph-text { grid-template-columns: minmax(0, 1fr); }
.hero-copy .ctas { margin-top: 10px; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* home hero image: an MMC dashboard (dark theme) with an AI insight card (chosen 2026-10-29, option D2 in hero-options/).
   Figures are samples and say so; departure times are real, carrier names left out (user's call) */
.dash { position: relative; padding-bottom: 46px; }
.dash-win { background: #1B1E22; color: var(--off); border-radius: 14px; box-shadow: var(--shadow-dark); overflow: hidden; }
.dash-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #15171A; border-bottom: 1px solid #2A2E33; }
.dash-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3A3F46; }
.dash-bar .url { margin-left: 10px; font-size: 12px; color: var(--silver); background: #2A2E33; border-radius: 6px; padding: 3px 12px; flex: 1; max-width: 220px; }
.dash-bar .tag { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--silver); background: #2A2E33; border: 1px solid #3A3F46; border-radius: 6px; padding: 2px 7px; }
.dash-main { display: grid; grid-template-columns: 46px 1fr; }
.dash-side { display: grid; align-content: start; gap: 12px; padding: 18px 12px; border-right: 1px solid #2A2E33; }
.dash-side i { width: 22px; height: 22px; border-radius: 6px; background: #2A2E33; }
.dash-side i.on { background: var(--orange); }
.dash-body { padding: 16px; display: grid; gap: 14px; min-width: 0; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #30353B; border-radius: 10px; }
.dash-kpis div { padding: 10px 12px; display: grid; gap: 2px; }
/* label / value / note rows line up across the three tiles even when a label wraps (phones) */
.dash-kpis { grid-template-rows: auto auto auto; }
.dash-kpis div { grid-row: span 3; grid-template-rows: subgrid; align-items: end; }
.dash-kpis em { align-self: start; }
.dash-kpis div + div { border-left: 1px solid #30353B; }
.dash-kpis span, .dash-kpis em { font-size: 11.5px; color: #9CA3AF; font-style: normal; }
.dash-kpis b { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
@media (max-width: 480px) {   /* phones: drop the icon rail so the three KPI tiles have room */
  .dash-main { grid-template-columns: 1fr; } .dash-side { display: none; }
  .dash-kpis div { padding: 10px; } .dash-kpis b { font-size: 20px; }
}
@media (max-width: 400px) {   /* 320-400 px: Spanish/French tiles and the 24-hour board fit without cutting off the third column (QA 2026-11-01) */
  .dash-body { padding: 12px; }
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-kpis div:nth-child(3) { display: none; }   /* two tiles: the third (load factor) has no room */
  .dash-kpis div { padding: 8px 10px; } .dash-kpis b { font-size: 18px; white-space: nowrap; }
  .dash-loads li { grid-template-columns: auto minmax(0, 1fr) 40px; gap: 8px; } .dash-loads li i { display: none; } .dash-loads li b { white-space: nowrap; }
}
.dash-chart p, .dash-loads p { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.dash-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.dash-chart .grid line { stroke: #30353B; stroke-width: 1; }
.dash-chart .area { fill: var(--orange); fill-opacity: .2; }
.dash-chart .line { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linejoin: round; }
.dash-chart circle { fill: var(--orange); stroke: #1B1E22; stroke-width: 2; }
.dash-chart .ticks text { font-size: 10.5px; fill: #9CA3AF; }
.dash-loads ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.dash-loads li { display: grid; grid-template-columns: 70px 1fr 110px 36px; align-items: center; gap: 10px; font-size: 13px; }
.dash-loads li i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--orange) var(--p), #30353B var(--p)); }
.dash-loads li em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ontime { display: inline-flex; align-items: center; gap: 8px; color: #6EE7A0; font-weight: 700; }
.ontime::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 3px rgba(52,211,153,.18), 0 0 10px 2px rgba(52,211,153,.55); }
.dash-ins { position: absolute; right: -14px; bottom: 0; width: 270px; background: var(--white); color: var(--graphite); border-radius: 16px; box-shadow: var(--shadow-dark); padding: 18px 20px; font-size: 14px; }
.dash-ins p { margin: 0; }
.dash-ins .t { font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dash-ins .t span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.dash-ins .s { color: var(--grey); font-size: 13px; font-weight: 500; }
.dash-ins .msg { font-weight: 800; font-size: 17px; line-height: 1.3; margin: 8px 0 4px; }
.dash-ins .acts { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.dash-ins .btn-mini { background: var(--orange); color: #171717; font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 8px; }
.spk { width: 16px; height: 16px; flex: none; }
.spk path { fill: var(--orange); }
/* narrower desktops: drop the insight card below the departures so the On time lights stay visible */
@media (max-width: 1180px) { .dash { padding-bottom: 150px; } }
/* es/fr: the insight text runs longer; a wider card keeps it at the English height, clear of the chart axis (QA 2026-11-01) */
@media (min-width: 901px) { :lang(es) .dash-ins, :lang(fr) .dash-ins { width: 300px; } }
@media (max-width: 900px) { .dash { padding-bottom: 0; display: grid; gap: 14px; } .dash-ins { position: static; width: auto; max-width: 420px; } }
@media (max-width: 560px) { .dash-loads li { grid-template-columns: 62px 1fr 36px; } .dash-loads li i { display: none; } }

/* ---------- stats card ---------- */
.stats .wrap > div { background: var(--white); border: 1px solid var(--silver); border-radius: 20px; box-shadow: var(--shadow); margin-top: -56px; position: relative;
  display: grid; grid-template-columns: repeat(6, 1fr); padding: 0 28px; }
.stats dl { margin: 0; display: contents; }
.stat { padding: 26px 18px 26px 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.stat + .stat { padding-left: 20px; border-left: 1px solid var(--silver); }
.stat dd { margin: 0; font-weight: 800; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.035em; line-height: 1.1; }
.stat dt { color: var(--grey); font-size: 15px; }
/* a word value (US · CA · MX) runs smaller so it stays on one line */
.stat-text dd { font-size: clamp(24px, 2.3vw, 30px); white-space: nowrap; padding-top: .2em; }
/* wide screens: one row of six that wraps (instead of running off the card) if a user widens letter/word spacing (WCAG 1.4.12) */
@media (min-width: 1181px) { .stats .wrap > div { display: flex; flex-wrap: wrap; } .stat { flex: 1 1 0; } }
/* home: the section after the stats bar starts as far below it as the hero buttons sit above it
   (hero padding-bottom minus the card's 56px overlap; about 60px on desktop) */
.hero + .stats + section { padding-top: max(60px, calc(clamp(80px, 9vw, 120px) - 56px)); }
/* six stats: three per row between phone and wide desktop, so "US · CA · MX" keeps its line */
@media (min-width: 901px) and (max-width: 1180px) { .stats .wrap > div { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(3n+1) { padding-left: 0; border-left: 0; } .stat:nth-child(n+4) { border-top: 1px solid var(--silver); } }
@media (max-width: 360px) { .stat dd { font-size: 25px; } .stat-text dd { font-size: 20px; } }   /* two stat columns still fit at 320px */
@media (max-width: 360px) { :lang(es) .stat-text dd, :lang(fr) .stat-text dd { font-size: 17px; } }   /* "EUA·CA·MX" is wider than "US·CA·MX" */
@media (max-width: 360px) { .stat dt { hyphens: auto; overflow-wrap: normal; } }   /* "intertransporteurs" hyphenates instead of breaking mid-word (QA 2026-11-01) */
@media (min-width: 361px) and (max-width: 440px) { :lang(fr) .stat-text dd, :lang(es) .stat-text dd { font-size: 21px; } }
@media (max-width: 900px) { .stat-text dd { white-space: nowrap; }   /* "É.-U.·CA·MX" never breaks at its hyphen (sizes above keep it inside the column) */
  .stats .wrap > div { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px 20px; } .stat, .stat + .stat { padding: 16px 10px 16px 0; border-left: 0; } .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }

.carriers { padding: 40px 0 8px; }
/* home: one-line trust band under the stats (switched off in build.py) */
.trust { padding-top: 48px; }
.trust-card { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; background: var(--white); border: 1px solid var(--silver); border-radius: var(--radius); padding: 18px 24px; }
.trust-card .label { flex: 0 1 auto; min-width: 0; }   /* may wrap: the Spanish label is longer than 320px allows */
.trust-card span:not(.label) { color: var(--grey); flex: 1 1 32em; max-width: 41em; }
.trust-card a { font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) { .trust-card a { white-space: normal; } }
.stats + .trust + section { padding-top: max(60px, calc(clamp(80px, 9vw, 120px) - 56px)); }
.callout { margin-top: 32px; max-width: 760px; }
.callout a { font-weight: 700; }
.carrier-row { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0 10px; padding: 0; list-style: none; font-weight: 600; font-size: 16px; }

/* ---------- cards ---------- */
.groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card { background: var(--off); border: 1px solid var(--silver); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.white .card { background: var(--off); }
/* a card whose title is a link is clickable all over (bigger touch target); the title link stays the one focus stop */
.card:has(h3 > a) { position: relative; transition: border-color .15s; }
.card h3 > a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card:has(h3 > a):hover { border-color: var(--orange); }
.card p { color: var(--grey); font-size: 16px; }
.review-tag { align-self: flex-start; justify-self: start; padding: 2px 9px; border-radius: 999px; background: #FEF3C7; color: #78350F; font-size: 12px; font-weight: 700; letter-spacing: .02em; }   /* local review only: marks draft copy (SHOW_REVIEW_COPY) */
.ico { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #FFEBD9; }
.ico svg { width: 24px; height: 24px; fill: none; stroke: var(--graphite); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico.solid { background: var(--orange); }
.ico.solid svg { stroke: var(--btn-ink); }
.links { list-style: none; margin: 8px 0 0; padding: 0; }
.links a { display: flex; flex-direction: column; padding: 11px 0; border-top: 1px solid var(--silver); text-decoration: none; }
.links a b { font-weight: 700; }
.links a span { color: var(--grey); font-size: 14px; }
.links a:hover b { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
@media (max-width: 1100px) { .groups { grid-template-columns: repeat(2, 1fr); } }   /* 2x2 at 1024: four columns were ~175px of text (QA 2026-11-01) */
@media (max-width: 560px) { .groups { grid-template-columns: 1fr; } }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid3 .card h3 { font-size: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; list-style: none; padding-left: 0; }
.chips a, .chips span { display: inline-block; max-width: 100%; line-height: 1.35; font-size: 14px; font-weight: 600; border: 1px solid var(--silver); background: var(--white); border-radius: 16px; padding: 5px 12px; text-decoration: none; }   /* inline-block + 16px radius: a long es/fr chip wraps as one rounded box, a one-line chip still looks fully round */
.chips a:hover { border-color: var(--graphite); }
:lang(es) .chips a, :lang(es) .chips span, :lang(fr) .chips a, :lang(fr) .chips span { font-size: 13px; padding: 5px 11px; }   /* longer es/fr chip labels mostly stay on one line */
@media (max-width: 900px) { .grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid3 { grid-template-columns: 1fr; } }

/* ---------- network band ---------- */
.net-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.net-grid h2 { margin-top: 14px; }
.points { list-style: none; padding: 0; margin: 30px 0; display: grid; gap: 20px; }
.points b { display: block; font-size: 18px; }
.points p { color: var(--on-dark-2); font-size: 16px; max-width: 41em; }
.net-art { margin: 0; }
.net-art svg { width: 100%; height: auto; display: block; }
.net-art figcaption { font-size: 14px; margin-top: 10px; color: var(--grey); }
.dark .net-art figcaption { color: var(--on-dark-2); }
@media (max-width: 900px) { .net-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--silver); }
.faq details:last-child { border-bottom: 1px solid var(--silver); }
.faq summary { cursor: pointer; padding: 20px 40px 20px 0; font-weight: 700; font-size: 18px; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 26px; width: 9px; height: 9px; border: solid var(--graphite); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.faq details p { color: var(--grey); padding: 0 0 22px; max-width: 42em; }

/* ---------- CTA + footer ---------- */
.cta { background: var(--white); border-top: 1px solid var(--silver); }
.cta .wrap { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; }
.cta p { color: var(--grey); margin-top: 10px; font-size: 18px; }
.site-foot { background: var(--graphite); color: var(--white); padding: 56px 0 40px; font-size: 15px; }
.site-foot a { color: var(--white); text-decoration-color: var(--orange); }
.foot-grid ul a { text-decoration: none; }   /* footer link lists: underline only on hover or keyboard focus (user, 2026-10-29) */
.foot-grid ul a:hover, .foot-grid ul a:focus-visible { text-decoration: underline; text-decoration-color: var(--orange); }
.foot-grid { display: grid; grid-template-columns: 1.1fr 1.9fr 1fr 1fr; gap: 32px; }
.foot-grid .foot-plat ul { display: block; columns: 2; column-gap: 32px; }   /* 16 products: Sell + Optimize, then Operate + Understand */
.foot-plat li { break-inside: avoid; margin-bottom: 8px; }
.foot-grid h2 { font-size: 14px; letter-spacing: .01em; margin-bottom: 12px; color: var(--on-dark-2); font-weight: 700; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid p { color: var(--on-dark-2); margin-top: 14px; max-width: 26em; }
.foot-base { border-top: 1px solid #4a4f57; margin-top: 40px; padding-top: 20px; color: var(--on-dark-2); }
.foot-base a, .foot-base .link-btn { display: inline-block; padding: 4px 0; }   /* 24px+ tap height (QA 2026-11-01) */
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-plat { grid-column: 1 / -1; } }
@media (max-width: 520px) {   /* phones: two link columns instead of one long list (QA 2026-10-31), with taller tap rows */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .foot-grid > div:first-child, .foot-plat { grid-column: 1 / -1; }
  .foot-grid .foot-plat ul { columns: 2; column-gap: 20px; }
  .foot-grid ul { gap: 0; } .foot-plat li { margin-bottom: 0; }
  .foot-grid ul a { display: inline-block; padding: 6px 0; }
}
.foot-grid > div:first-child > a { display: inline-block; }   /* logo link as tall as the logo, not one text line */

/* ---------- inner pages ---------- */
.page-hero { padding: clamp(48px, 7vw, 88px) 0 clamp(48px, 7vw, 88px); }
/* the stats card overlaps the hero by 56px (.stats margin-top), so leave room for it under the buttons */
.page-hero.has-stats { padding-bottom: calc(clamp(48px, 7vw, 88px) + 56px); }
.page-hero .wrap { display: grid; gap: 20px; }
.page-hero h1 { font-size: clamp(36px, 5vw, 62px); max-width: 18ch; }
.ph-text { display: grid; gap: 20px; align-content: start; }
/* product hero with a real screenshot: phone frame rises from the bottom edge of the hero */
.page-hero.has-shot { padding-bottom: 0; overflow: hidden; }
.page-hero.has-shot .wrap { grid-template-columns: minmax(0, 1fr) 300px; column-gap: clamp(32px, 6vw, 96px); align-items: end; }
.page-hero.has-shot .ph-text { padding-bottom: clamp(48px, 7vw, 88px); align-self: center; }
.page-hero.has-shot h1 { text-wrap: pretty; }   /* was balance: it stranded "for" on its own line at 320 px (QA 2026-11-01) */
@media (max-width: 400px) { .page-hero h1 { font-size: 33px; } h2 { font-size: 27px; } }   /* small phones: long words ("transportation", "optimisation") leave fewer lone short words (QA 2026-11-01) */
.ph-shot { margin: 0; display: grid; gap: 10px; justify-items: center; }
.ph-shot .phone { width: 300px; border: 10px solid #111316; border-bottom: 0; border-radius: 44px 44px 0 0; overflow: hidden; background: #111316;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 30px 80px rgba(0,0,0,.45); }
.ph-shot .phone img { display: block; width: 100%; height: auto; border-radius: 34px 34px 0 0; }
.ph-shot figcaption { order: -1; font-size: 13px; color: var(--on-dark-2); }
@media (max-width: 900px) {
  .page-hero.has-shot .wrap { grid-template-columns: 1fr; }
  .page-hero.has-shot .ph-text { padding-bottom: 8px; }
  .ph-shot .phone { width: 260px; }
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--on-dark-2); }
.crumbs li + li::before { content: "/"; margin-right: 6px; }
.crumbs a { color: var(--white); display: inline-block; padding: 10px 0; margin: -10px 0; }   /* ~40px tap height, same layout */
.outcomes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
/* even rows instead of one card alone on the last row (QA 2026-11-01): 5 cards -> 5 across on wide screens, 3+2 below; 6 -> 3+3 */
@media (min-width: 1280px) { .outcomes:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 901px) and (max-width: 1279px) { .outcomes:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 901px) { .outcomes:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); } }
.outcomes li { background: var(--white); border: 1px solid var(--silver); border-radius: 16px; padding: 20px 22px; font-weight: 700; display: flex; gap: 12px; align-items: flex-start; }
.outcomes li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--orange); flex: none; margin-top: 8px; }

/* network page: how the network works */
.how-list { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--silver); display: grid; gap: 10px; }
.how-list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; }
.how-list li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--orange); flex: none; margin-top: 8px; }
.how .cap-card { background: var(--graphite); border-color: var(--graphite); color: var(--white); }
.how .cap-card h3 { color: var(--white); }
.cap-card .chips { margin-top: 4px; }
.cap-card .chips span { background: transparent; border-color: #5A6069; color: var(--white); }
.eco { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }   /* 6 services: two rows of 3 */
@media (max-width: 900px) { .eco { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .eco { grid-template-columns: 1fr; } }
.eco .card a { font-weight: 700; margin-top: auto; }

/* ---------- contact form ---------- */
.form-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.form { background: var(--white); border: 1px solid var(--silver); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-weight: 700; font-size: 15px; }
.field .opt { font-weight: 500; color: var(--grey); }
.field input, .field select, .field textarea { font: 16px/1.4 var(--font); color: var(--graphite); background: var(--white); border: 1.5px solid var(--grey); border-radius: 10px; padding: 11px 13px; width: 100%; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--graphite); outline-offset: 1px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; }
.aside { display: grid; gap: 22px; }
.aside ul { padding-left: 0; list-style: none; display: grid; gap: 12px; margin: 0; }
.aside li { display: flex; gap: 12px; }
.aside li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--orange); flex: none; margin-top: 8px; }
@media (max-width: 900px) { .form-wrap { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- product page sections: heading + text left, checklist right ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.split.one { grid-template-columns: minmax(0, 820px); }
.split-l { display: grid; gap: 16px; }
.split-l h2 { font-size: clamp(28px, 3.4vw, 40px); }
.split-l > p:not(.lead) { color: var(--grey); }
.split-r { display: grid; gap: 18px; }
.split-r > p { color: var(--grey); }
.checks { list-style: none; margin: 0; padding: 22px 24px; display: grid; gap: 12px; background: var(--off); border: 1px solid var(--silver); border-radius: var(--radius); }
section:not(.white) .checks { background: var(--white); }
.checks li { display: flex; gap: 12px; font-weight: 600; }
.checks li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--orange); flex: none; margin-top: 8px; }
.groups .card h3 { font-size: 18px; }
.after { margin-top: 22px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* interline connections TDS supports (build.modes_list): home network section, /network, /payments, /ota */
.modes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.modes li { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--silver); border-radius: 999px; padding: 6px 14px; font-size: 15px; color: var(--graphite); }
.white .modes li { background: var(--off); }
.modes li b { font-weight: 600; }
.modes .arr { width: 22px; height: 2px; background: var(--orange); position: relative; flex: none; }
.modes .arr::after { content: ""; position: absolute; right: -1px; top: -3px; width: 6px; height: 6px; border-top: 2px solid var(--orange); border-right: 2px solid var(--orange); transform: rotate(45deg); }
.dark .modes li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: var(--white); font-size: 14px; padding: 5px 12px; }
.points .modes { margin-top: 12px; }
.split-l .modes { margin: 20px 0 4px; }
.points .modes li { margin: 0; padding: 5px 12px; }
.points .modes li b { font-size: 14px; font-weight: 600; display: inline; margin: 0; }

/* cookie banner (2026-10-31, as on busschedules.com): a bar along the bottom, not a modal; Accept and Reject look the same (equal choice) */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--white); color: var(--graphite); border-top: 1px solid var(--silver);
  box-shadow: 0 -8px 28px rgba(23, 23, 23, .16); }
.consent[hidden] { display: none; }
section.consent { padding: 0; }
.consent-in { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; justify-content: space-between; }
.consent h2 { font-size: 16px; margin: 0 0 2px; letter-spacing: 0; }
.consent p { margin: 0; font-size: 15px; max-width: 64ch; color: #4B5563; }
.consent-btns { display: flex; gap: 10px; }
.consent-btn { font: 700 15px var(--font); min-height: 44px; padding: 8px 22px; border-radius: 10px; border: 2px solid var(--graphite); background: var(--graphite); color: var(--white); cursor: pointer; }
.consent-btn:hover { background: var(--btn-ink); border-color: var(--btn-ink); }
.link-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
@media (max-width: 640px) {
  .consent-in { padding: 12px 16px; }
  .consent-btns { width: 100%; }
  .consent-btn { flex: 1; }
}

/* privacy policy (/privacy) */
.policy-body > * { max-width: 41.5em; }   /* about 85-90 characters a line (78ch was ~120 in this font; QA 2026-11-01) */
.policy-body h2 { font-size: clamp(24px, 3vw, 30px); margin: 44px 0 12px; }
.policy-body h2:first-of-type { margin-top: 0; }
.policy-body h3 { font-size: 19px; margin: 26px 0 8px; }
.policy-body p, .policy-body li { color: #374151; }
.policy-body p + p { margin-top: 12px; }
.policy-body ul { padding-left: 1.2em; display: grid; gap: 8px; }
.split.one .split-l p, .card.callout p { max-width: 42em; }   /* readable line length on wide screens */
.table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--silver); border-radius: 12px; }
.policy { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.policy th, .policy td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--silver); }
.policy thead th { background: var(--off); font-size: 14px; }
.policy tbody tr:last-child > * { border-bottom: 0; }
.policy code { font-size: 14px; }
.draft-note { background: #FEF3C7; color: #78350F; border-radius: 10px; padding: 12px 16px; margin: 0 0 28px; }
mark.todo { background: #FEF3C7; color: #78350F; padding: 0 4px; border-radius: 4px; }
.site-foot .link-btn { color: var(--white); text-decoration-color: var(--orange); }

/* language switcher in the header (build.lang_menu, 2026-11-01): globe + "EN" button, list of languages by their own names.
   Without JS the list shows inline. */
.lang-menu { position: relative; flex: none; }
.lang-btn { display: none; align-items: center; gap: 6px; min-height: 42px; padding: 0 10px; border: 1.5px solid var(--silver); border-radius: 10px;
  background: var(--white); font: 700 14px var(--font); color: var(--graphite); cursor: pointer; }
.js .lang-btn { display: inline-flex; }
.lang-btn:hover { border-color: var(--graphite); }
.lang-btn .lang-ico { width: 18px; height: 18px; }
.lang-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .15s; }
.lang-btn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.lang-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 14px; }
.lang-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0; color: var(--graphite); font-weight: 600; text-decoration: none; }
.lang-list a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.lang-list a[aria-current] { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.js .lang-list { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 190px; flex-direction: column; gap: 2px;
  padding: 6px; background: var(--white); border: 1px solid var(--silver); border-radius: 12px; box-shadow: 0 12px 32px rgba(17, 24, 39, .14); }
.js .lang-list.open { display: flex; }
.js .lang-list a { padding: 10px 12px; border-radius: 8px; font-size: 15px; }
.js .lang-list a:hover { background: var(--off); text-decoration: none; }
.js .lang-list a[aria-current] { text-decoration: none; background: #FFF4EB; }
.js .lang-list a[aria-current]::after { content: ""; width: 10px; height: 5px; border: solid #C2410C; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translateY(-2px); }
@media (max-width: 960px) { .js .lang-menu { margin-left: 10px; } }
@media (max-width: 960px) { html:not(.js) .lang-menu { width: 100%; padding-bottom: 12px; } }
/* very narrow phones: logo, Menu and the language button share one row */
@media (max-width: 400px) {
  .site-head .wrap { gap: 12px; }
  .logo img { width: 128px; height: auto; }
  .menu-btn { padding: 0 10px; }
  .js .lang-menu { margin-left: 8px; }
  .lang-btn { padding: 0 8px; gap: 4px; }
  .lang-chev { display: none; }
}
.nw { white-space: nowrap; }   /* hyphenated compounds in headings (build.keep_compounds) */