/* Conduence — layouts implemented from the Figma template "Horizon — Logistic Industries Website
   Template" (file pKSvEBjrXj27Ljpp8QVtZV): desktop frames 1440 wide / 80px gutters, mobile 402 / 16px.
   Colours are the Conduence brand palette (brand file PMUO9XmSfKXZEZsa8B3rdS, "Primary Colors"):
   Blue #1 #093A96, Blue #2 #2873FF, Blue #3 #01B6FF, Green #1 #09CD9E. The --g* scale is the
   navy ramp built around Blue #1 that replaces the template's dark teal. */
:root {
  --g900: #030b26; --g800: #041a4a; --g700: #093a96; --g600: #0d43a6; --g500: #072c73;
  --g400: #2b56a8; --g300: #56688f; --g200: #8b9cc2; --g100: #b2bdd8;
  --blue-3: #01b6ff; /* CTAs */ --green: #09cd9e; /* indicators */ --blue-2: #2873ff; /* accents on light */
  --w50: #fdfdfd; --w100: #f1f1f1; --w200: #eaeaea; --w300: #e6e6e6;
  --ink: #18191f; --ink-2: #071f57; --ink-3: #151414; --line: #ddd; --play: #2873ff;

  /* Figma: PP Neue Montreal (commercial licence) + Geist. Geist is the free fallback. */
  --font: 'PP Neue Montreal', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-alt: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-logo: 'Turret Road', var(--font);
  /* Headlines (page titles, section and card headings). */
  --font-head: 'Radio Canada Big', var(--font);

  /* Side spacing: 15% tighter than the template's 80px gutter / 1280px content. --max widens with the
     screen so wide-screen margins also shrink 15%: side = 0.85 × (100vw − 1280px) / 2. */
  --gutter: 68px;
  --max: max(1280px, calc(1088px + 15vw));
  --radius: 8px;
  --radius-lg: 16px;
}
@media (max-width: 1100px) { :root { --gutter: 34px; } }
@media (max-width: 768px) { :root { --gutter: 14px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--w50); color: var(--g500); font: 500 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--blue-3); color: var(--g900); padding: 8px 12px; border-radius: var(--radius); }
.skip-link:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type (Figma text styles) ---------- */
h1, h2, .h-display, .h1, .h2 { font-family: var(--font-head); }
.h-display { font-size: 56px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }   /* Heading/Header Desktop */
.h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }          /* Heading/Heading 1 */
.h2 { font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; font-weight: 500; }          /* Heading/Heading 2 */
.h3 { font-family: var(--font-alt); font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; font-weight: 500; } /* Heading/Heading 3 */
.lead { font-family: var(--font-alt); font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; }
.lead p + p { margin-top: 1.5em; }
.caption { font-size: 14px; letter-spacing: -0.01em; }
.small { font-size: 12px; }
@media (max-width: 768px) { .h-display { font-size: 40px; } }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--w50); }
.eyebrow--dark { color: var(--g500); }
.eyebrow__dot { width: 6.446px; height: 6.446px; background: var(--green); flex: none; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 7px 10px; border-radius: var(--radius); font-size: 14px; letter-spacing: -0.01em; line-height: 1.5; text-decoration: none; white-space: nowrap; border: 1px solid transparent; }
.btn--blue-3 { background: var(--blue-3); color: var(--g900); }
.btn--white { background: var(--w50); color: var(--g800); border-color: var(--w50); }
.btn--outline { background: var(--w50); color: var(--g500); border-color: var(--g500); height: 45px; width: 132px; }
.btn--soft { background: var(--w100); color: var(--g800); border-color: var(--w50); height: 45px; width: 132px; }
.btn:hover { filter: brightness(0.96); }
.action-btn { display: inline-flex; align-items: stretch; border-radius: var(--radius); overflow: hidden; text-decoration: none; border: 0; padding: 0; cursor: pointer; background: none; }
.action-btn__label { background: var(--blue-3); color: var(--g900); padding: 10px; font-size: 14px; letter-spacing: -0.01em; line-height: 1.5; white-space: nowrap; display: flex; align-items: center; justify-content: center; }
.action-btn__icon { background: var(--g500); border-left: 0.7px solid var(--g900); padding: 10px; display: flex; align-items: center; justify-content: center; }
.action-btn--light .action-btn__icon { border-left-color: var(--w50); }
.action-btn--wide { width: 100%; }
.action-btn--wide .action-btn__label { flex: 1; }
.action-btn:hover .action-btn__label { filter: brightness(0.96); }

/* ---------- Navigation ---------- */
.site-header { position: relative; z-index: 20; padding: 38px var(--gutter) 0; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 12px; background: rgba(3, 11, 38, 0.45); color: var(--w50); }
.logo { display: inline-flex; align-items: center; gap: 6.667px; text-decoration: none; color: var(--w50); width: 146px; flex: none; }
.logo img { height: 24px; width: auto; }  /* Conduence logo (brand file PMUO9XmSfKXZEZsa8B3rdS, node 17:3458) */
.logo--lg { gap: 8px; width: auto; }
.logo--lg img { height: 30px; }
.nav { flex: 1; }
.nav__list { display: flex; gap: 24px; align-items: center; justify-content: center; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: var(--w50); font-size: 16px; line-height: 1.5; text-decoration: none; cursor: pointer; white-space: nowrap; }
.nav__toggle[aria-expanded="true"] img { transform: rotate(180deg); }
/* Header dropdowns: white panel, outline icon + title + one-line description per item. */
.nav__menu { position: absolute; top: calc(100% + 22px); left: 50%; z-index: 70; width: 420px; padding: 18px 12px 12px; background: #fff; border: 1px solid #e6e9f0; border-radius: 24px; box-shadow: 0 24px 60px rgba(3, 11, 38, .16), 0 2px 6px rgba(3, 11, 38, .06); color: var(--g800); visibility: hidden; opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.nav__toggle[aria-expanded="true"] + .nav__menu { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition: opacity .2s ease, transform .2s ease; }
.nav__menu-title { padding: 0 12px 10px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--g800); }
.nav__menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav__menu a { display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; align-items: center; gap: 16px; padding: 12px; border-radius: 16px; text-decoration: none; color: var(--g800); transition: background-color .15s ease, color .15s ease; }
.nav__menu-icon { color: #8a94a6; transition: color .15s ease; }
.nav__menu-icon .f { fill: currentColor; fill-opacity: .12; }
.nav__menu-text { display: grid; gap: 3px; }
.nav__menu-label { font-size: 16px; font-weight: 500; line-height: 1.3; }
.nav__menu-desc { font-size: 14px; line-height: 1.4; color: #5b6475; transition: color .15s ease; }
.nav__menu-go { color: var(--blue-2); opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
.nav__menu a:is(:hover, :focus-visible), .nav__menu a[aria-current="page"] { background: #f3f6fd; color: var(--blue-2); }
.nav__menu a:is(:hover, :focus-visible) .nav__menu-icon, .nav__menu a[aria-current="page"] .nav__menu-icon { color: var(--blue-2); }
.nav__menu a:is(:hover, :focus-visible) .nav__menu-desc, .nav__menu a[aria-current="page"] .nav__menu-desc { color: var(--blue-2); }
.nav__menu a:is(:hover, :focus-visible) .nav__menu-go { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nav__menu, .nav__menu * { transition: none !important; } }
.topbar__cta { display: flex; gap: 8px; align-items: stretch; }
.menu-btn { display: none; background: var(--blue-3); color: var(--g900); border: 0; border-radius: var(--radius); padding: 7px 10px; font-size: 14px; letter-spacing: -0.01em; line-height: 1.5; cursor: pointer; }
.mobile-menu { margin-top: 8px; padding: 16px; border-radius: 12px; background: rgba(3, 11, 38, 0.92); display: grid; gap: 2px; }
.mobile-menu a { color: var(--w50); text-decoration: none; padding: 8px 4px; }
.mobile-menu__group { color: var(--green); font-size: 12px; margin-top: 10px; padding-inline: 4px; }
.mobile-menu__cta { display: flex; gap: 8px; margin-top: 12px; }
.mobile-menu__cta .btn { flex: 1; }
/* Menu links are white; the white button keeps its navy label. */
.mobile-menu .btn--white { color: var(--g800); }
@media (max-width: 1100px) {
  .nav, .topbar__cta { display: none; }
  .menu-btn { display: block; }
  .topbar { padding: 12px; }
}
@media (max-width: 768px) { .site-header { padding-top: 40px; } }

/* Sticky header: the bar is always pinned to the window, starting exactly where it sits in the
   page (a spacer holds its place). Once the page scrolls, it eases into a smaller, narrower pill:
   every size change is a transition, so nothing snaps. The header lives inside .hero (its own
   stacking context), so the hero is lifted above later sections to keep the bar on top. */
.hero { z-index: 50; }
.site-header { --bar-top: 38px; --ease: .5s cubic-bezier(.22, .61, .36, 1); }
@media (max-width: 768px) { .site-header { --bar-top: 40px; } }
.site-header::before { content: ''; display: block; height: var(--topbar-h, 58px); }
.site-header .topbar {
  position: fixed; top: var(--bar-top); left: 50%; z-index: 60; transform: translateX(-50%);
  width: min(calc(100% - var(--gutter) * 2), var(--max));
  transition: top var(--ease), width var(--ease), padding var(--ease), background-color var(--ease), box-shadow var(--ease);
}
.site-header .logo img, .site-header .nav__link, .site-header .topbar__cta .btn, .site-header .menu-btn, .site-header .nav__list {
  transition: height var(--ease), font-size var(--ease), padding var(--ease), gap var(--ease), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.site-header.is-stuck .topbar {
  top: 10px; width: min(calc(100% - var(--gutter) * 2), 1120px);
  padding: 6px 8px 6px 14px; background: rgba(3, 11, 38, .9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(3, 11, 38, .18);
}
.site-header.is-stuck .logo img { height: 20px; }
.site-header.is-stuck .nav__list { gap: 20px; }
.site-header.is-stuck .nav__link { font-size: 14px; }
.site-header.is-stuck .nav__menu { top: calc(100% + 14px); }
.site-header.is-stuck .topbar__cta .btn { height: 30px; padding: 5px 10px; font-size: 13px; }
.site-header.is-stuck .menu-btn { padding: 5px 10px; font-size: 13px; }
/* Phone menu opens just under the pinned bar and scrolls if it is taller than the screen. */
.site-header .mobile-menu:not([hidden]) {
  position: fixed; top: calc(var(--bar-top) + var(--topbar-h, 58px) + 8px); left: var(--gutter); right: var(--gutter); z-index: 60;
  max-height: calc(100vh - 120px); overflow-y: auto; margin: 0;
}
.site-header.is-stuck .mobile-menu:not([hidden]) { top: 62px; max-height: calc(100vh - 80px); }
@media (prefers-reduced-motion: reduce) { .site-header .topbar, .site-header .topbar * { transition: none !important; } }

/* ---------- Photo header ---------- */
.hero { position: relative; color: var(--w50); background: var(--g700); isolation: isolate; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 22, 66,.5) 0%, rgba(4, 22, 66,0) 27.885%), linear-gradient(180deg, rgba(4, 22, 66,0) 34.157%, #093a96 100%); }

.hero--home { min-height: 898px; }
.home-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-top: 263px; padding-bottom: 110px; }
.home-hero__main { width: 590px; display: grid; gap: 56px; }
.home-hero__text { display: grid; gap: 16px; }
.home-hero__text .h-display { font-weight: 600; }
.home-hero__desc { display: grid; gap: 24px; justify-items: start; }
.home-hero__side { width: 349px; display: grid; gap: 18px; justify-items: end; flex: none; }
.news-card { color: var(--w50); display: flex; gap: 11px; align-items: flex-end; padding: 12px; border-radius: var(--radius); background: var(--g500); text-decoration: none; font-size: 12px; line-height: 1.5; width: 100%; }
.news-card__text { flex: 1; display: grid; gap: 11px; }
.news-card__text b { font-weight: 700; }
.news-card__go { flex: none; width: 25.263px; height: 24px; display: grid; place-items: center; border-radius: 4px; background: var(--blue-3); }
.scroll-hint { display: inline-flex; align-items: center; gap: 17px; font-size: 14px; letter-spacing: -0.01em; text-decoration: none; }
.scroll-hint::before { content: ''; width: 16px; height: 1px; background: var(--w50); }
@media (max-width: 900px) {
  .hero--home { min-height: 875px; }
  .home-hero { flex-direction: column; align-items: stretch; padding-top: 62px; padding-bottom: 64px; gap: 150px; }
  .home-hero__main { width: 100%; gap: 32px; }
  .home-hero__side { width: 100%; justify-items: start; }
}

/* ---------- Homepage sections ---------- */
.home-s1 { background: var(--g700); color: var(--w50); padding: 110px 0 60px; }
.home-s1__head { display: flex; justify-content: space-between; gap: 40px; }
.home-s1__head .h1 { width: 422px; }
.home-s1__desc { width: 630px; display: grid; gap: 32px; justify-items: start; }
.home-s1__rule { border: 0; border-top: 0.5px solid var(--g400); margin: 80px 0; }
.logos { display: grid; gap: 33px; }
.logos__title { text-align: center; font-size: 14px; letter-spacing: -0.01em; }
.logos__box { border: 1px solid var(--g400); border-radius: var(--radius-lg); overflow: hidden; }
.logos__row { display: grid; grid-template-columns: repeat(7, 1fr); }
.logos__item { height: 110px; display: grid; place-items: center; }
.logos__item img { width: 110px; height: 29px; }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--g400); }
.stat { background: var(--g600); padding: 24px; text-align: center; display: grid; gap: 8px; }
.stat:nth-child(2), .stat:nth-child(4) { border-inline: 1px solid var(--g400); }
.stat__value { font-size: 40px; line-height: 1.1; letter-spacing: -0.03em; }
.stat__label { font-size: 14px; letter-spacing: -0.01em; }
@media (max-width: 900px) {
  .home-s1 { padding: 80px 0 60px; }
  .home-s1__head { flex-direction: column; gap: 100px; }
  .home-s1__head .h1, .home-s1__desc { width: 100%; }
  .home-s1__rule { margin: 48px 0 60px; }
  .logos__row { grid-template-columns: 1fr 1fr; }
  .logos__item { border-bottom: 1px solid var(--g400); }
  .logos__item:nth-child(odd) { border-right: 1px solid var(--g400); }
  .logos__item:last-child { grid-column: span 2; border-right: 0; }
  .stats { grid-template-columns: 1fr 1fr; border-top: 0; }
  .stat { padding: 24px 8px; border-bottom: 1px solid var(--g400); }
  .stat:nth-child(2), .stat:nth-child(4) { border-inline: 0; }
  .stat:nth-child(odd) { border-right: 1px solid var(--g400); }
  .stat:last-child { grid-column: span 2; border: 0; }
}

.home-s2 { background: var(--g700); color: var(--w50); padding: 140px 0; }
.home-s2__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; justify-items: center; }
.home-s2__title { width: 748px; max-width: 100%; text-align: center; }
.svc-grid { width: 100%; border: 1px solid var(--g400); border-radius: var(--radius-lg); padding: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.svc-card { background: var(--g400); border-radius: var(--radius); padding: 16px; height: 354px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 64px; text-align: center; text-decoration: none; color: var(--w50); }
.svc-card__head { display: grid; gap: 8px; justify-items: center; }
.svc-card > p { font-size: 14px; letter-spacing: -0.01em; flex: 1 0 0; }
.svc-card:first-child > p { flex: none; }
.shape { width: 45.489px; height: 45.489px; flex: none; }
.home-s2__desc { width: 876px; max-width: 100%; display: grid; gap: 24px; justify-items: center; text-align: center; }
@media (max-width: 1100px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .home-s2 { padding: 100px 0 64px; }
  .home-s2__inner { gap: 48px; }
  .svc-grid { grid-template-columns: 1fr; padding: 8px; width: calc(100% - 50px); }
  .svc-card { height: auto; min-height: 308px; gap: 48px; padding: 16px 16px 24px; }
}

.home-s3 { padding: 10px; }
.video { position: relative; height: 710px; border-radius: var(--radius); overflow: hidden; background: var(--w50); }
.video img { width: 100%; height: 100%; object-fit: cover; }
.video::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.2); pointer-events: none; }
.video__play { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 40px; background: var(--play); display: grid; place-items: center; backdrop-filter: blur(1.151px); }
@media (max-width: 768px) { .home-s3 { padding: 16px; } .video { height: 625px; } .video__play { width: 60px; height: 60px; } }

.home-s4 { padding: 0 9.5px; }
.home-s4__panel { background: var(--w100); border-radius: var(--radius); padding: 80px 70px; display: grid; gap: 90px; overflow: hidden; }
.home-s4__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; color: var(--g500); }
.home-s4__head .lead { width: 381.375px; }
.carousel { display: grid; gap: 24px; }
.carousel__track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.carousel__track::-webkit-scrollbar { display: none; }
.feature-card { flex: 0 0 314px; height: 394px; scroll-snap-align: start; background: var(--w50); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-alt); color: var(--g500); }
.feature-card h3 { font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; font-weight: 500; }
.feature-card p { font-size: 14px; line-height: 1.5; letter-spacing: -0.03em; }
.feature-card--image { padding: 0; border-radius: var(--radius-lg); overflow: hidden; }
.feature-card--image img { width: 100%; height: 100%; object-fit: cover; }
.carousel__nav { display: flex; justify-content: space-between; align-items: center; }
.carousel__arrows { display: flex; gap: 6px; }
.carousel__arrows button { width: 33.7px; height: 32px; border-radius: var(--radius); border: 0; border-left: 0.589px solid var(--g900); background: var(--g500); display: grid; place-items: center; cursor: pointer; padding: 8.421px; }
.carousel__arrows button:first-child img { transform: rotate(180deg); }
.carousel__dots { display: flex; gap: 3px; }
.carousel__dots span { height: 6px; width: 13px; border-radius: 30px; background: var(--w300); }
.carousel__dots span.on { width: 29px; background: var(--ink-2); }
@media (max-width: 768px) {
  .home-s4 { padding: 0 16px; }
  .home-s4__panel { padding: 64px 16px; gap: 80px; }
  .home-s4__head { flex-direction: column; gap: 32px; }
  .home-s4__head .lead { width: 100%; }
  .feature-card { flex-basis: 238px; height: 308px; padding: 16px; }
}

.home-s5 { padding: 80px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; justify-items: center; }
.home-s5__text { width: 658px; max-width: calc(100% - 32px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: center; text-align: center; color: var(--g500); }
.home-s5__text p { width: 544px; max-width: 100%; }
.home-s5__box { width: 1084px; max-width: calc(100% - var(--gutter) * 2); display: grid; gap: 24px; }
.home-s5__image { height: 416px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 9px 13.4px rgba(0,0,0,.1); }
.home-s5__image img { width: 100%; height: 100%; object-fit: cover; }
.process__steps { border-block: 1px solid var(--w300); padding: 32px 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { display: grid; gap: 16px; align-content: start; }
.step__head { display: grid; gap: 8px; justify-items: start; }
.step__icon { width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--w200); background: var(--w50); box-shadow: 0 0 1.108px rgba(0,0,0,.25); display: grid; place-items: center; }
.step__title { font-size: 16px; font-weight: 500; color: var(--g800); }
.step > p { font-size: 14px; letter-spacing: -0.01em; }
@media (max-width: 900px) { .process__steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .home-s5 { padding: 64px 0; gap: 48px; }
  .home-s5__image { height: 325px; }
  .process__steps { grid-template-columns: 1fr; border-bottom: 0; padding: 32px 0; gap: 32px; }
}

.home-s6 { padding: 100px 0; border-bottom: 1px solid var(--w300); }
.tabs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--w200); }
.tabs__head .h1 { width: 563px; color: var(--ink-2); }
.tabs__list { display: flex; gap: 8px; }
.tabs__list button { height: 45px; width: 132px; padding: 7px 10px; border-radius: var(--radius); border: 1px solid var(--w50); background: var(--w100); color: var(--g800); font-size: 14px; letter-spacing: -0.01em; cursor: pointer; }
.tabs__list button[aria-selected="true"] { background: var(--w50); border-color: var(--g500); color: var(--g500); }
.tabs__panel { display: flex; gap: 107px; align-items: flex-end; padding-top: 48px; }
.tabs__text { width: 563px; flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 80px; }
.tabs__title { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tabs__title .h2 { width: 377px; max-width: 100%; }
.tabs__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 27px; justify-items: start; }
.tabs__body p + p { margin-top: 1.5em; }
.tabs__visual { flex: 1; align-self: stretch; min-height: 436px; border-radius: var(--radius-lg); overflow: hidden; }
.tabs__visual img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1100px) { .tabs__panel { gap: 48px; } .tabs__text { width: 50%; } }
@media (max-width: 900px) {
  .home-s6 { padding: 64px 0; border-bottom: 0; }
  .tabs__head { flex-direction: column; align-items: stretch; }
  .tabs__head .h1 { width: 100%; }
  .tabs__list { display: grid; grid-template-columns: 1fr 1fr; }
  .tabs__list button { width: 100%; }
  .tabs__panel { flex-direction: column-reverse; align-items: stretch; padding-top: 32px; gap: 32px; }
  .tabs__text { width: 100%; gap: 48px; }
  .tabs__visual { min-height: 250px; height: 250px; }
}

/* ---------- FAQ (Figma "Section 7") ---------- */
.faq { padding: 90px 0; }
.faq__grid { display: flex; justify-content: space-between; align-items: stretch; gap: 64px; }
.faq__intro { width: 431px; flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.faq__intro .h1 { color: var(--ink-3); }
.faq__help { display: grid; gap: 24px; width: 373px; max-width: 100%; color: var(--g500); }
.faq__help img { width: 259px; height: 153px; object-fit: cover; border-radius: var(--radius); }
.faq__help > div { display: grid; gap: 4px; }
.faq__list { width: 697px; display: grid; gap: 12px; align-content: start; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius-lg); transition: background-color .35s ease, border-color .35s ease; }
.faq__item summary { transition: color .35s ease; }
.faq__body { overflow: hidden; padding-bottom: 8px; }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 16px; cursor: pointer; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary img { flex: none; }
.faq__minus { display: none; }
.faq__item[open] { background: var(--w100); border-color: var(--w100); border-radius: 14px; padding: 8px 8px 0; }
.faq__item[open] summary { padding: 12px 8px; color: var(--g500); }
.faq__item[open] .faq__plus { display: none; }
.faq__item[open] .faq__minus { display: block; }
.faq__item[open].is-closing { background: transparent; border-color: var(--line); }
.faq__item[open].is-closing summary { color: var(--ink); }
.faq__item[open].is-closing .faq__minus { display: none; }
.faq__item[open].is-closing .faq__plus { display: block; }
.faq__answer { background: var(--w50); border-radius: 12px; padding: 20px 16px; color: var(--g500); }
.faq__answer a { color: var(--g500); }
@media (max-width: 1100px) {
  .faq { padding: 0 0 80px; }
  .faq__grid { flex-direction: column; gap: 40px; }
  .faq__intro, .faq__list { width: 100%; }
  .faq__help img { display: none; }
}

/* ---------- Contact CTA ---------- */
.cta { position: relative; padding: 75px 0; isolation: isolate; overflow: hidden; background: var(--g800); } /* solid dark blue on every page */
/* Solid dark-blue header with no photo. */
.hero--solid { background: var(--g800); }
.hero--solid .hero__bg::after { display: none; }
.contact-card { background: var(--w50); border-radius: var(--radius-lg); padding: 24px; display: flex; gap: 48px; }
.contact-card__form { display: grid; gap: 48px; align-content: start; flex: 1; }
.contact-card__heading { display: grid; gap: 19px; }
.contact-card__heading .h1 { max-width: 507px; color: var(--g500); }
.contact-card__map { position: relative; width: 550px; flex: none; border-radius: var(--radius-lg); overflow: hidden; min-height: 400px; }
.contact-card__map img, .contact-card__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.contact-card__map-btn { position: absolute; right: 12px; bottom: 12px; height: 38px; width: 97px; font-size: 12px; }
.lead-form { display: grid; gap: 34px; min-height: 366px; grid-template-rows: auto auto 1fr auto; }
.lead-form__row { display: grid; grid-template-columns: 308px 308px; gap: 16px; }
.field { display: grid; gap: 5px; align-content: start; padding: 0 8px 8px; border-bottom: 0.5px solid var(--g100); line-height: 1.5; }
.field > span { font-size: 12px; font-weight: 400; color: var(--g300); }
.field input, .field textarea { border: 0; padding: 0; background: transparent; font-size: 14px; letter-spacing: -0.01em; color: var(--g600); outline: none; width: 100%; resize: none; }
.field textarea { height: 100%; min-height: 60px; }
.field input::placeholder, .field textarea::placeholder { color: var(--g600); opacity: 1; }
.field:focus-within { border-bottom-color: var(--g500); }
.lead-form .action-btn { justify-self: start; }
.hp { position: absolute; left: -9999px; }
.form-note { font-size: 12px; color: var(--g300); }
@media (max-width: 1100px) {
  .contact-card { flex-direction: column; gap: 32px; }
  .contact-card__map { width: 100%; min-height: 0; aspect-ratio: 338 / 250; }
  .lead-form__row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .cta { padding: 40px 0 32px; }
  .contact-card { padding: 16px; }
  .lead-form__row { grid-template-columns: 1fr; gap: 34px; }
  .lead-form { min-height: 0; }
  .field textarea { min-height: 80px; }
}

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--g700); color: var(--w50); padding-top: 55px; overflow: hidden; height: 756px; }
.footer__top { display: flex; justify-content: space-between; gap: 48px; }
.footer__about { width: 375px; display: grid; gap: 24px; align-content: start; }
.footer__cols { width: 860px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.footer__title { color: var(--green); margin-bottom: 16px; }
.footer__col ul { display: grid; gap: 8px; list-style: none; padding: 0; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--blue-3); }
.footer__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 24px; white-space: nowrap; }
.footer__info { display: grid; gap: 24px; }
.footer__info .footer__title { margin-bottom: 8px; }
.footer__giant { position: absolute; left: 50%; top: 583px; transform: translateX(-50%); font-family: var(--font-logo); font-weight: 800; font-size: 343.26px; line-height: 214.54px; opacity: .05; white-space: nowrap; user-select: none; }
@media (max-width: 1100px) {
  .footer { height: auto; padding-bottom: 140px; }
  .footer__top { flex-direction: column; gap: 80px; }
  .footer__about, .footer__cols { width: 100%; }
  .footer__giant { top: auto; bottom: 0; font-size: 34vw; line-height: .62; }
}
@media (max-width: 768px) {
  .footer { padding-top: 64px; padding-bottom: 100px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 64px 24px; }
  .footer__bottom { flex-direction: column; align-items: stretch; gap: 48px; margin-top: 64px; white-space: normal; }
  .footer__legal { text-align: center; }
}

/* Centred page header (Figma Pricing header) */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 16px; padding: 80px 0 120px; max-width: 820px; margin-inline: auto; }
.page-head > p { max-width: 640px; }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
@media (max-width: 768px) { .page-head { padding: 64px 0 80px; } }

/* Generic prose for legal / article bodies */
.prose { max-width: 720px; margin-inline: auto; font-size: 18px; line-height: 1.65; color: var(--ink); font-family: var(--font-alt); font-weight: 400; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--font-head); font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; font-weight: 500; margin-top: 1.8em; color: var(--g500); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose a { color: var(--g500); }

/* ---------- Scroll animations (enabled by main.js only when motion is allowed) ----------
   Uses the individual translate/scale properties so existing transforms (centering, crops,
   hover zooms) are never overridden. */
.motion .rv { opacity: 0; translate: 0 24px; transition: opacity .7s cubic-bezier(.2,.65,.3,1), translate .7s cubic-bezier(.2,.65,.3,1); }
.motion .rv.is-in { opacity: 1; translate: none; }
.motion .rv .rv-item { opacity: 0; translate: 0 16px; transition: opacity .6s cubic-bezier(.2,.65,.3,1) var(--rv-delay, 0ms), translate .6s cubic-bezier(.2,.65,.3,1) var(--rv-delay, 0ms); }
.motion .rv.is-in .rv-item { opacity: 1; translate: none; }
.motion .rv .rv-zoom { scale: 1.04; transition: scale 1.4s cubic-bezier(.2,.65,.3,1); }
.motion .rv.is-in .rv-zoom { scale: none; }
.motion .rv-instant, .motion .rv-instant .rv-item, .motion .rv-instant .rv-zoom { transition: none !important; }
.motion .rv-hero { animation: rv-hero .9s cubic-bezier(.2,.65,.3,1) both; }
@keyframes rv-hero { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }

/* ---------- Header video + live trip card ---------- */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; transition: opacity .5s ease; }
.hero__video.is-fading { opacity: 0; }
/* Video header: no tint over the scene; it stays white, so the text switches to navy. */
.hero--video { background: #eef0f3; color: var(--g800); }
.hero--video .hero__bg { background: #eef0f3; }
.hero--video .hero__bg::after { display: none; }
/* Desktop: a soft white fade behind the headline keeps navy text readable over the busy city scene,
   clearing before the car's lane so the scene itself stays bright. */
@media (min-width: 901px) {
  .hero--video .hero__bg::after { display: block; background: linear-gradient(90deg, rgba(250, 251, 252, .95) 0%, rgba(250, 251, 252, .93) 40%, rgba(250, 251, 252, .6) 47%, rgba(250, 251, 252, 0) 53%); }
}
.hero--video .eyebrow { color: var(--g800); }
.hero--video .scroll-hint::before { background: var(--g800); }
.hero--video .topbar { background: rgba(3, 11, 38, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero--video .trip-card { box-shadow: 0 18px 40px rgba(3, 11, 38, .14); border: 1px solid var(--w200); }
/* Fill the browser window. */
.hero--home.hero--video { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.hero--home.hero--video > .site-header { width: 100%; }
.hero--home.hero--video .hero__content { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.hero--home.hero--video .home-hero { padding-top: 48px; padding-bottom: clamp(48px, 9vh, 110px); }
/* Desktop: anchor the frame left so the car drives between the headline and the trip card. */
@media (min-width: 901px) { .hero--home .hero__video { object-position: 40% center; } }
.trip-card { width: 100%; background: rgba(253, 253, 253, .97); color: var(--g800); border-radius: 14px; padding: 16px; display: grid; gap: 10px; box-shadow: 0 18px 40px rgba(3, 11, 38, .28); font-family: var(--font-alt); }
.trip-card__top { display: flex; justify-content: space-between; align-items: center; }
.trip-card__pill { background: var(--blue-2); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 30px; transition: background .3s; }
.trip-card__pill.is-done { background: var(--green); color: var(--g900); }
.trip-card__eta { font-size: 13px; font-weight: 600; color: var(--g500); }
.trip-card__title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.trip-card__sub { font-size: 13px; color: var(--g300); margin-top: -4px; }
.trip-card [data-f] { transition: opacity .25s; }
.trip-card.is-switching [data-f="title"], .trip-card.is-switching [data-f="sub"], .trip-card.is-switching [data-f="pill"] { opacity: 0; }
.trip-card__route { display: grid; gap: 8px; border-block: 1px solid var(--w200); padding-block: 10px; position: relative; }
.trip-card__route::before { content: ''; position: absolute; left: 5px; top: 22px; bottom: 22px; width: 2px; background: var(--w300); }
.trip-card__stop { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; position: relative; }
.trip-card__stop i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--g200); background: #fff; flex: none; margin-top: 3px; transition: all .3s; }
.trip-card__stop b { display: block; font-weight: 600; font-size: 12px; color: var(--g300); }
.trip-card__stop span { color: var(--g800); }
.trip-card__stop.is-active i { border-color: var(--blue-2); background: var(--blue-2); box-shadow: 0 0 0 4px rgba(40, 115, 255, .18); }
.trip-card__stop.is-done i { border-color: var(--green); background: var(--green); }
.trip-card__bar { height: 6px; border-radius: 6px; background: var(--w200); overflow: hidden; }
.trip-card__bar span { display: block; height: 100%; width: 8%; border-radius: 6px; background: linear-gradient(90deg, var(--blue-2), var(--blue-3)); transition: width .4s linear; }
.trip-card__foot { display: flex; justify-content: space-between; font-size: 13px; color: var(--g500); }
@media (max-width: 900px) {
  .hero__video { object-position: 35% center; }
  /* Phones: the car sits behind the text, so a soft white veil keeps the copy readable. */
  .hero--video .hero__bg::after { display: block; background: linear-gradient(180deg, rgba(238, 240, 243, .82) 0%, rgba(238, 240, 243, .7) 55%, rgba(238, 240, 243, .2) 100%); }
  .trip-card { max-width: 370px; }
}

/* Carousel cards: a whole number fit the track at every width, so no card is ever shown cut off. */
.carousel__track > .feature-card { flex: 0 0 calc((100% - 3 * 8px) / 4); }
@media (max-width: 1100px) { .carousel__track > .feature-card { flex-basis: calc((100% - 2 * 8px) / 3); } }
@media (max-width: 768px) { .carousel__track > .feature-card { flex-basis: calc((100% - 8px) / 2); } }
@media (max-width: 560px) { .carousel__track > .feature-card { flex-basis: 100%; } }

/* Homepage header, desktop: split screen. Left half solid white for the copy, the drive on the right half. */
@media (min-width: 901px) {
  .hero--home.hero--video { background: #fff; }
  .hero--home.hero--video .hero__bg { left: 50%; }
  .hero--home.hero--video .hero__video { object-position: 40% center; }
  /* Soft white edge so the page white runs into the aerial scene without a hard line. */
  .hero--home.hero--video .hero__bg::after { display: block; background: linear-gradient(90deg, #fff 0, rgba(255, 255, 255, 0) 90px); }
  .hero--home.hero--video .home-hero__main { max-width: calc(50vw - var(--gutter) - 48px); }
  /* Each half is padded from its own screen edge rather than a centred content column. */
  .hero--home.hero--video .hero__content { max-width: none; padding-inline: calc(var(--gutter) * .6); }
  .hero--home.hero--video .home-hero__main { max-width: calc(50vw - var(--gutter) * .6 - 40px); }
}

/* ---------- Homepage section 1: light mode (flows on from the white video header) ---------- */
.home-s1 { background: var(--w50); color: var(--g800); }
.home-s1 .eyebrow { color: var(--g800); }
.home-s1 .lead { color: var(--g500); }
.home-s1__rule { border-top-color: var(--w300); }
.home-s1 .logos__box, .home-s1 .stats, .home-s1 .stat, .home-s1 .logos__item { border-color: var(--w200) !important; }
.home-s1 .logos__item img { filter: brightness(0); opacity: .55; } /* white template logos → dark grey on light */
.home-s1 .stat { background: #f4f6fa; }
.home-s1 .stat__value { color: var(--g700); }
.home-s1 .stat__label { color: var(--g500); }

/* ---------- Draggable drive: scrub slider in the trip card + drag-to-scrub on the scene ---------- */
.trip-card__scrub { position: relative; display: block; height: 18px; cursor: pointer; }
.trip-card__scrub::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 6px; border-radius: 6px; background: var(--w200); }
.trip-card__fill { position: absolute; left: 0; top: 6px; height: 6px; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--blue-2), var(--blue-3)); pointer-events: none; }
.trip-card__fill::after { content: ''; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; border: 3px solid var(--blue-2); box-shadow: 0 1px 4px rgba(3, 11, 38, .25); }
.trip-card__scrub input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: grab; }
.trip-card__scrub input:active { cursor: grabbing; }
.trip-card__scrub:has(input:focus-visible) .trip-card__fill::after { outline: 2px solid var(--blue-2); outline-offset: 2px; }
.hero--video.is-scrubbable { cursor: grab; touch-action: pan-y; }
.hero--video.is-scrubbing { cursor: grabbing; user-select: none; }
.hero--video.is-scrubbable a, .hero--video.is-scrubbable button, .hero--video.is-scrubbable .trip-card { cursor: auto; }
.hero--video.is-scrubbable a, .hero--video.is-scrubbable button { cursor: pointer; }

/* ---------- Simplified buttons: one solid shape, colour change on hover ---------- */
.btn, .action-btn { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover { filter: none; }
.btn--lime, .action-btn, .btn--blue-3, .menu-btn, .sva-opt__btn { background: var(--blue-2); color: #fff; }
.btn--lime:hover, .btn--lime:focus-visible, .btn--blue-3:hover, .btn--blue-3:focus-visible, .menu-btn:hover, .menu-btn:focus-visible, .sva-opt__btn:hover, .sva-opt__btn:focus-visible { background: var(--g700); color: #fff; filter: none; }
.menu-btn, .sva-opt__btn { transition: background-color .2s ease; }
.btn--white:hover, .btn--white:focus-visible { background: #e3ecff; border-color: #e3ecff; color: var(--g800); }
.action-btn { align-items: center; border-radius: var(--radius); }
.action-btn .action-btn__label { background: transparent; color: inherit; padding: 10px 18px; filter: none !important; }
.action-btn .action-btn__icon { display: none; }
.action-btn:hover, .action-btn:focus-visible { background: var(--g700); color: #fff; }
.action-btn--wide { justify-content: center; }
/* On dark backgrounds the dark-blue hover would vanish, so primary buttons turn white instead. */
:is(.topbar, .mobile-menu, .home-s2, .hero:not(.hero--video, .pf-hero--white) .hero__content, .pf-life, .pf-video__bar, .sva-est__result)
  :is(.btn--lime, .btn--blue-3, .action-btn):is(:hover, :focus-visible) { background: #fff; color: var(--g800); }

/* Homepage header, phones: copy on white first, then the aerial scene, with the trip card
   overlapping the bottom of the scene and the news card below it. The two wrappers are flattened
   so the copy, scene and cards can be placed as one column. */
@media (max-width: 900px) {
  .hero--home.hero--video { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "main" "scene" "side"; min-height: 0; background: #fff; }
  .hero--home.hero--video > .site-header { grid-area: head; }
  .hero--home.hero--video .hero__content, .hero--home.hero--video .home-hero { display: contents; }
  .hero--home.hero--video .home-hero__main { grid-area: main; padding: 40px var(--gutter) 36px; }
  .hero--home.hero--video .hero__bg { grid-area: scene; position: relative; inset: auto; height: 460px; z-index: 0; }
  .hero--home.hero--video .hero__bg::after { display: block; background: linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 56px); }
  .hero--home.hero--video .hero__video { object-position: 0% center; }
  .hero--home.hero--video .home-hero__side { grid-area: side; position: relative; z-index: 1; margin-top: -110px; padding: 0 var(--gutter) 48px; }
}


/* ---- src/styles/blog.css ---- */
/* Blog — Figma "Blog" 4192:3297 (desktop) / 4192:3309 (mobile). */

/* Solid dark blue header, no photo. */
.bl-hero { background: var(--g800); }
.bl-hero .hero__bg::after { display: none; }
.bl-hero .hero__content { padding-top: 101px; padding-bottom: 65px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 53px; }
.bl-head { display: flex; gap: 122px; align-items: flex-start; }
.bl-head__text { flex: 1 1 0; min-width: 0; display: grid; gap: 16px; justify-items: start; }
.bl-head__desc { width: 341px; flex: none; display: grid; gap: 24px; justify-items: start; }
.bl-banner { display: block; border: 1px solid var(--g300); border-radius: var(--radius); padding: 8px; }
.bl-banner img { width: 100%; height: 430.459px; object-fit: cover; border-radius: var(--radius); }

/* Section 1: heading + filter buttons + article grid */
.bl-s1 { padding: 100px 0; }
.bl-s1__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--w200); }
.bl-s1__head .h1 { color: var(--ink-2); white-space: nowrap; }
.bl-chips { display: flex; gap: 8px; }
.bl-chip { height: 45px; width: 132px; padding: 7px 10px; border-radius: var(--radius); border: 1px solid var(--w50); background: var(--w100); color: var(--g800); font-size: 14px; letter-spacing: -0.01em; line-height: 1.5; white-space: nowrap; cursor: pointer; }
.bl-chip[aria-pressed="true"] { background: var(--w50); border-color: var(--g500); color: var(--g500); }
.bl-grid { padding-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 8px; }

/* Figma "Article Card" */
.bl-card { display: flex; flex-direction: column; gap: 24px; text-decoration: none; color: var(--g800); }
.bl-card__img { height: 225px; border-radius: var(--radius); overflow: hidden; }
.bl-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.bl-card:hover .bl-card__img img { transform: scale(1.03); }
.bl-card__content { display: grid; gap: 24px; }
.bl-card__headline { display: grid; gap: 8px; justify-items: start; }
.bl-card__title { font-family: var(--font-alt); font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; font-weight: 500; color: var(--g800); }
.bl-card__link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: -0.01em; line-height: 1.5; color: var(--g800); }
.bl-card__link img { width: 20px; height: 20px; }

@media (max-width: 1100px) {
  .bl-head { gap: 48px; }
  .bl-s1__head { flex-direction: column; align-items: flex-start; }
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .bl-hero .hero__content { padding-top: 20px; padding-bottom: 60px; gap: 20px; }
  .bl-head { flex-direction: column; justify-content: center; gap: 24px; min-height: 377px; padding-top: 10px; }
  .bl-head__text, .bl-head__desc { width: 100%; flex: none; }
  .bl-banner { height: 418px; }
  .bl-banner img { height: 100%; }

  .bl-s1 { padding: 80px 0; }
  .bl-s1__head { gap: 32px; padding-bottom: 32px; align-items: stretch; }
  .bl-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-chip { width: 100%; }
  .bl-chip:last-child { grid-column: span 2; }
  .bl-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bl-card__img { height: 199px; }
  .bl-card--desk { display: none; }
}

/* Article prose: the comparison table from the copy, styled to the shared prose */
.prose .bl-table { overflow-x: auto; }
.prose .bl-table table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.prose .bl-table th, .prose .bl-table td { text-align: left; vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--w300); }
.prose .bl-table thead th { font-weight: 500; color: var(--g500); }
.prose .bl-table tbody th { font-weight: 500; }

/* Article pages: the illustrations are light, so the header gets a solid navy wash for the white
   title, and the illustration itself is shown in full colour at the top of the article. */
.bl-article-hero .hero__bg::after { background: linear-gradient(180deg, rgba(4, 26, 74, .9) 0%, rgba(9, 58, 150, .88) 100%); }
.bl-article-figure { margin: 0 0 40px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; }
.bl-article-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---- src/styles/company.css ---- */
/* ---------- Company pages: Pricing (Figma 4192:3294 / 4192:3308) and Why Conduence (4192:3300 / 4192:3310) ---------- */

.co-kicker { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.co-sub { font-family: var(--font-alt); font-size: 22px; line-height: 1.5; letter-spacing: -0.03em; font-weight: 500; }
.co-rule { border: 0; border-top: 1px solid var(--w300); margin: 0; width: 100%; }
.co-rule--dark { border-top-color: var(--g400); }

/* ===== Pricing header ===== */
.co-price-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 54px; padding: 54px 0 80px; }
.co-price-head__text { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 23px; text-align: center; width: fit-content; max-width: 100%; }
.co-price-head__title { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; }
.co-price-head__title .h-display { max-width: 820px; text-wrap: balance; }
.co-price-head__text > p { width: 0; min-width: 100%; padding-inline: max(0px, calc((100% - 820px) / 2)); }
.co-price-head__actions { display: flex; gap: 8px; width: 256px; height: 41px; }
.co-price-head__actions .btn { flex: 1 0 0; height: 100%; min-width: 0; }

/* Pricing FAQ: no image, 90px padding (80px on mobile). */
.co-faq .faq { padding: 90px 0; }
@media (max-width: 1100px) { .co-faq .faq { padding: 80px 0; } }

@media (max-width: 1000px) {
  .co-price-head__text { width: 100%; }
  .co-price-head__text > p { width: auto; min-width: 0; padding-inline: 0; }
}
@media (max-width: 768px) {
  .co-price-head { gap: 40px; padding: 50px 0 60px; }
  .co-price-head__text { gap: 24px; }
}

/* ===== Why header ===== */
.co-hero--why { min-height: 898px; display: flex; flex-direction: column; }
.co-hero--why .hero__bg::after { background: linear-gradient(180deg, rgba(4, 22, 66,.5) 0%, rgba(4, 22, 66,0) 27.885%), linear-gradient(180deg, rgba(4, 22, 66,0) 10.482%, #093a96 100%); }
.co-hero--why .site-header { width: 100%; }
.co-hero--why .hero__content { flex: 1; display: flex; align-items: flex-end; width: 100%; }
.co-why-head { width: 590px; max-width: 100%; display: grid; gap: 24px; padding: 80px 0 63px; }
.co-why-head__title { display: grid; gap: 16px; }
.co-why-head__desc { display: grid; gap: 32px; }
.co-why-head__cta { display: grid; gap: 12px; justify-items: start; }
.co-why-head__note { font-size: 14px; letter-spacing: -0.01em; color: var(--g100); }
@media (max-width: 768px) {
  .co-hero--why { min-height: 883px; }
  .co-hero--why .hero__bg::after { background: linear-gradient(180deg, rgba(4, 22, 66,.5) 0%, rgba(4, 22, 66,0) 51.66%), linear-gradient(180deg, rgba(4, 22, 66,0) 0%, #093a96 100%); }
  .co-why-head { gap: 32px; padding: 59px 0 60px; }
  .co-why-head__desc, .co-why-head__cta { gap: 24px; }
}

/* ===== Why: story + stats (Section 1) ===== */
.co-story { background: var(--g700); color: var(--w50); padding: 100px 0; }
.co-story__inner { display: grid; gap: 40px; }
.co-story__title { width: 475px; max-width: 100%; }
.co-story__row { display: flex; justify-content: space-between; gap: 40px; min-height: 308px; }
.co-story__text { align-content: center; }
.co-story__image { width: 422.264px; flex: none; position: relative; border-radius: var(--radius); overflow: hidden; }
.co-story__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.co-story__text { width: 636px; max-width: 100%; display: grid; gap: 47px; }
.co-story__block { display: grid; gap: 16px; }
.co-story__desc p + p { margin-top: 1.5em; }
.co-stats { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.co-stat { display: flex; gap: 16px; align-items: center; }
.co-stat__value { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; }
.co-stat__line { width: 1px; height: 19.796px; background: var(--g400); flex: none; }
.co-stat__label { white-space: nowrap; }
@media (max-width: 900px) {
  .co-story { padding: 69px 0; }
  .co-story__inner { gap: 53px; }
  .co-story__title { width: 100%; }
  .co-story__row { flex-direction: column; gap: 24px; min-height: 0; }
  .co-story__image { width: 100%; height: 245px; }
  .co-story__text { width: 100%; gap: 32px; }
  .co-stats { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ===== Why: commitment banner ===== */
.co-commit { position: relative; isolation: isolate; overflow: hidden; color: var(--w50); padding: 83px 0; }
.co-commit__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.co-commit__bg img { position: absolute; max-width: none; width: 137.44%; height: 200.77%; left: -17.78%; top: -100.77%; }
.co-commit__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 22, 66,0) 10.482%, #093a96 100%), linear-gradient(180deg, rgba(4, 22, 66,0) 14.392%, rgba(4, 22, 66,.95) 100%); }
.co-commit__main { min-height: 510px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.co-commit__main .h1 { white-space: nowrap; }
.co-commit__group { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.co-commit__text { width: 395px; max-width: 100%; display: grid; gap: 16px; }
.co-commit__text p + p { margin-top: 1.5em; }
.co-commit__quote { border-left: 3px solid #01b6ff; padding: 6px 16px; }
@media (max-width: 900px) {
  .co-commit { padding: 73px 0; }
  .co-commit__bg img { width: 515.29%; height: 148.98%; left: -207.65%; top: -48.98%; }
  .co-commit__main { min-height: 608px; }
  .co-commit__group { flex-direction: column; align-items: stretch; gap: 16px; }
  .co-commit__text { width: 100%; }
}

/* ===== Why: image strip (Section 2) ===== */
.co-strip { background: #f5f5f5; border-bottom: 1px solid var(--w300); padding: 90px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; overflow: hidden; color: var(--g500); }
.co-strip__head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; text-align: center; padding-inline: var(--gutter); }
.co-strip__head p { width: 591.453px; max-width: 100%; }
.co-strip__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.co-strip__row { display: flex; gap: 8px; justify-content: center; height: 304px; }
.co-banner { flex: 0 0 438px; height: 100%; border: 1px solid var(--g100); border-radius: var(--radius); padding: 8px; }
.co-banner img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.co-banner:first-child img { object-position: 50% 77%; }
.co-strip__caption { font-size: 14px; letter-spacing: -0.01em; text-align: center; padding-inline: 16px; }
@media (max-width: 768px) {
  .co-strip { padding: 70px 0; gap: 56px; }
  .co-strip__head { padding-inline: 15px; }
  .co-strip__row { justify-content: flex-start; }
  .co-banner { flex-basis: 328px; }
  .co-banner:first-child { margin-left: calc(50% - 500px); }
}

/* ===== Why: tracking split (Section 3) ===== */
.co-track { padding: 100px 0; }
.co-track__inner { display: flex; gap: 107px; align-items: stretch; }
.co-track__text { width: 530px; flex: none; min-height: 402px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; color: var(--g500); }
.co-track__title { width: 361.205px; max-width: 100%; }
.co-track__block { display: grid; gap: 24px; justify-items: start; }
.co-track__copy { display: grid; gap: 16px; }
.co-track__image { flex: 1; min-width: 0; display: block; position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.co-track__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 59%; }
@media (max-width: 1100px) { .co-track__inner { gap: 48px; } .co-track__text { width: 45%; } }
@media (max-width: 768px) {
  .co-track { padding: 50px 0; border-bottom: 1px solid var(--w300); }
  .co-track__inner { flex-direction: column-reverse; gap: 40px; }
  .co-track__text { width: 100%; min-height: 0; gap: 64px; }
  .co-track__title { width: 100%; font-size: 28px; letter-spacing: -0.01em; }
  .co-track__image { flex: none; height: 237px; border-radius: var(--radius); }
  .co-track__image img { object-position: center; }
}

/* ===== Why: operator statement (Section 5) ===== */
.co-voice { padding: 90px 0; color: var(--g500); }
.co-voice__inner { display: grid; gap: 56px; }
.co-voice__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.co-voice__title { width: 278.357px; }
.co-voice__intro { width: 401px; max-width: 100%; display: grid; gap: 16px; align-content: start; }
.co-voice__row { display: flex; justify-content: space-between; align-items: center; gap: 40px; min-height: 303px; }
.co-voice__image { width: 579.383px; flex: none; align-self: stretch; position: relative; border-radius: var(--radius); overflow: hidden; }
.co-voice__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.co-voice__text { width: 636px; max-width: 100%; display: grid; gap: 47px; }
.co-voice__logo { display: flex; align-items: center; gap: 8px; height: 28px; }
.co-voice__logo img { height: 24px; width: auto; }
.co-voice__logo span { font-family: var(--font-logo); font-weight: 800; font-size: 20px; line-height: 1; color: var(--g500); }
.co-voice__block { display: grid; gap: 16px; font-family: var(--font-alt); font-weight: 500; }
.co-voice__quote { font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; }
.co-voice__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.co-voice__by { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.co-voice__by .co-stat__line { background: var(--g100); }
.co-voice__place { font-size: 14px; font-weight: 400; }
.co-voice__org { font-weight: 700; font-size: 16px; line-height: 20px; letter-spacing: -0.01em; }
@media (max-width: 1100px) { .co-voice__image { width: 45%; } }
@media (max-width: 900px) {
  .co-voice { padding: 80px 0; }
  .co-voice__inner { gap: 40px; }
  .co-voice__head { flex-direction: column; }
  .co-voice__intro { width: 100%; }
  .co-voice__row { flex-direction: column; align-items: stretch; gap: 24px; }
  .co-voice__image { width: 100%; height: 250px; }
  .co-voice__text { width: 100%; gap: 24px; }
  .co-voice__foot { flex-direction: column; align-items: flex-start; }
}


/* Pricing table: one plan, grouped rows of what it costs and what is included. */
.co-ptable { width: 880px; max-width: 100%; background: #fff; color: var(--g800); border-radius: var(--radius-lg); padding: 8px; box-shadow: 0 24px 60px rgba(3, 11, 38, .25); text-align: left; scroll-margin-top: 24px; }
.co-ptable table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.co-ptable th, .co-ptable td { padding: 13px 20px; text-align: left; vertical-align: middle; }
.co-ptable thead th { padding-top: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--w300); }
.co-ptable__corner { font-size: 14px; font-weight: 500; color: var(--g300); vertical-align: bottom !important; }
.co-ptable__plan { width: 42%; background: #eef4ff; border-radius: 12px 12px 0 0; }
.co-ptable__plan > span { display: block; }
.co-ptable__name { font-size: 14px; font-weight: 500; color: var(--blue-2); }
.co-ptable__price { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0; }
.co-ptable__price small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--g500); }
.co-ptable__note { font-size: 13px; font-weight: 400; color: var(--g500); }
.co-ptable tbody th { font-weight: 400; color: var(--g500); }
.co-ptable tbody td { background: #f6f9ff; font-weight: 500; }
.co-ptable tbody tr + tr th, .co-ptable tbody tr + tr td { border-top: 1px solid var(--w200); }
.co-ptable td img { display: block; }
.co-ptable__group th { padding-top: 22px; padding-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--g800); background: none !important; }
.co-ptable tbody:first-of-type .co-ptable__group th { padding-top: 16px; }
.co-ptable__cta { padding: 16px 12px 8px; }
.co-ptable__cta .action-btn { width: 100%; }
.co-ptable__cta .action-btn__label { flex: 1; }
@media (max-width: 768px) {
  .co-ptable { padding: 4px; }
  .co-ptable table { font-size: 14px; }
  .co-ptable th, .co-ptable td { padding: 11px 12px; }
  .co-ptable__plan { width: 46%; }
  .co-ptable__price { font-size: 30px; }
  .co-ptable__price small { display: block; font-size: 12px; margin-top: 2px; }
}
/* The table is white, so its button keeps the standard dark-blue hover. */
.hero .co-ptable .action-btn:is(:hover, :focus-visible) { background: var(--g700); color: #fff; }
/* On the white pricing header the table sits flat on the page: no border, shadow or inset. */
.pf-hero--white .co-ptable { border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.pf-hero--white .co-price-head__text > p { color: var(--g500); }


/* ---- src/styles/features.css ---- */
/* ===== Features page (/features/): bento grid built from the Benotify Bento Card Kit ===== */
.pd-hero { min-height: 0; }
.pd-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; text-align: center; padding: 120px 0 48px; }
.pd-head p { max-width: 640px; color: var(--g500); font-size: 18px; line-height: 1.5; }
.pd-head__actions { display: flex; gap: 8px; }
@media (max-width: 900px) { .pd-head { padding: 64px 0 32px; } }
@media (max-width: 560px) { .pd-head__actions { flex-wrap: wrap; justify-content: center; } }
.bx { padding: 8px 0 96px; }
.bx--home { padding: 96px 0; }
.bx-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; text-align: center; margin-bottom: 48px; color: var(--g500); }
.bx-head .h1 { color: var(--g800); }
.bx-head p { max-width: 640px; font-size: 18px; line-height: 1.5; }
@media (max-width: 768px) { .bx--home { padding: 64px 0; } .bx-head { margin-bottom: 32px; } }
.bx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bx-tile { background: #fff; border: 1px solid #e9ecf2; border-radius: 24px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.bx-tile--wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 12px; }
.bx-tile--wide .bx-art { flex: 0 0 62%; }
.bx-tile__text { padding: 12px 12px 14px; display: grid; gap: 8px; color: var(--g500); font-size: 15px; line-height: 1.5; }
.bx-tile__text .h3 { color: var(--g800); font-size: 19px; }
.bx-tile--cta { background: var(--g800); border-color: var(--g800); justify-content: center; }
.bx-cta { padding: 28px 24px; display: grid; gap: 16px; color: var(--w50); }
.bx-cta .h2 { color: #fff; }
.bx-cta p { color: var(--g100); }
.bx-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.bx-cta__link { color: #fff; font-size: 14px; }
@media (max-width: 1100px) {
  .bx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-tile--wide { flex-direction: column; align-items: stretch; }
  .bx-tile--wide .bx-art { flex: none; }
}
@media (max-width: 700px) {
  .bx-grid { grid-template-columns: minmax(0, 1fr); }
  .bx-tile--wide { grid-column: auto; }
}

/* Every illustration is drawn on the kit's 600×400 card and scaled to its tile (main.js sets --bx-s). */
.bx-art { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 20px; border: 1px solid #eee; background: #f5f5f5; }
.bx-stage { position: absolute; left: -1px; top: -1px; width: 600px; height: 400px; transform-origin: 0 0; transform: scale(var(--bx-s, .6)); font-family: var(--font-alt), var(--font); }
.bx-stage > div { position: absolute; inset: 0; overflow: hidden; }
.bx-stage span, .bx-stage img { display: block; }
.bx-stage p { margin: 0; }
.bx-stage img { max-width: none; }
.bx-fade { position: absolute; left: 0; width: 600px; pointer-events: none; }
.bx-fade--bottom-white { bottom: 0; height: 106px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.bx-diamond { position: absolute; left: 0; top: 0; width: 600px; height: 400px; background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 600 400' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><g transform='matrix(-30 20 -30 -45 300 200)'><rect height='116.92' width='134.62' fill='url(%23g)' id='q' shape-rendering='crispEdges'/><use href='%23q' transform='scale(1 -1)'/><use href='%23q' transform='scale(-1 1)'/><use href='%23q' transform='scale(-1 -1)'/></g><defs><linearGradient id='g' gradientUnits='userSpaceOnUse' x2='5' y2='5'><stop stop-color='rgba(250,250,250,0)' offset='0.52537'/><stop stop-color='rgba(250,250,250,1)' offset='0.86919'/></linearGradient></defs></svg>") 0 0 / 100% 100%; }

/* Brand orb (kit's dark-blue logo tile, recoloured to the Conduence blues). */
/* Brand orb: the Conduence mark on a white tile (thin border, soft shadow) so it reads on the light cards. */
.bx-orb { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid !important; place-items: center; border: 1px solid #e6e9f0; background: #fff; box-shadow: 0 8px 24px rgba(3, 11, 38, .12), 0 0 0 6px rgba(40, 115, 255, .06); overflow: hidden; }
.bx-orb__mark { position: relative; width: 52%; height: auto; }
.bx-orb--radar { width: 76px; height: 76px; border-radius: 44px; }
.bx-orb--hub { width: 107px; height: 107px; border-radius: 21.614px; box-shadow: 0 10px 30px rgba(3, 11, 38, .14), 0 0 0 8px rgba(40, 115, 255, .06); }

/* --- Branded app (Onboarding Popup Card 2001:16579) --- */
.bx-app__back { position: absolute; top: 117.32px; width: 361.937px; height: 385.153px; display: grid !important; place-items: center; }
.bx-app__back--l { left: 45.53px; }
.bx-app__back--l > .bx-app__card { transform: rotate(-11deg); }
.bx-app__back--r { left: 190px; }
.bx-app__back--r > .bx-app__card { transform: rotate(11deg); }
.bx-app__card { position: relative; width: 303.927px; padding: 35.262px 20.989px; background: #fff; border-radius: 16.792px; box-shadow: 0 0 14px rgba(170, 170, 170, .1); overflow: hidden; }
.bx-app__body { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bx-app__logo { width: 38.87px; height: 38.87px; border-radius: 10.73px; background: #fff; box-shadow: 0 1.68px 15.5px rgba(0, 0, 0, .08); display: grid !important; place-items: center; margin-bottom: 15.21px; }
.bx-app__logo img { width: 22px; height: auto; }
.bx-app__title { font-weight: 600; font-size: 18.59px; line-height: 24.33px; letter-spacing: -0.845px; color: #272835; white-space: nowrap; }
.bx-app__sub { margin-top: 5.07px !important; font-size: 11.83px; line-height: 1.5; color: #666d80; }
.bx-app__field { align-self: stretch; margin-top: 25.35px; display: grid; gap: 5.07px; text-align: left; font-size: 10.14px; line-height: 1.4; font-weight: 500; color: #272835; }
.bx-app__input { height: 32.11px; display: flex !important; align-items: center; padding: 0 13.52px; border: .845px solid #e7e7e7; border-radius: 6.76px; background: #fff; box-shadow: 0 .845px .845px rgba(16, 24, 40, .05); color: #c2c2c2; font-weight: 400; }
.bx-app__btn { align-self: stretch; margin-top: 15.21px; padding: 8.45px; border-radius: 5.07px; background: var(--g800); color: #fff; font-size: 8.57px; line-height: 1.4; font-weight: 500; }
.bx-app__foot { margin-top: 21.97px !important; font-size: 10.14px; color: #808897; }
.bx-app__front { position: absolute; left: 137.04px; top: 94.67px; width: 323.927px; padding: 10px; border-radius: 26px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.bx-app__glow { position: absolute; width: 950.813px; height: 770.312px; }
.bx-app__glow img { position: absolute; left: -18.79%; top: -24.54%; width: 134.15%; height: 144.48%; }
.bx-app__glow--outer { left: -313.44px; top: -231.49px; }
.bx-app__glow--inner { left: 20.99px; top: -482.42px; }
.bx-app__card--front { width: 100%; box-shadow: none; }
.bx-app__card--front .bx-app__logo { width: 38.621px; height: 38.621px; margin-bottom: 15.112px; }
.bx-app__card--front .bx-app__title { font-weight: 500; font-size: 18px; line-height: 1.2; letter-spacing: 0; }
.bx-app__card--front .bx-app__sub { margin-top: 3.358px !important; font-size: 12px; line-height: 1.2; }
.bx-app__card--front .bx-app__field { margin-top: 21.829px; font-size: 10.07px; }
.bx-app__card--front .bx-app__btn { margin-top: 20.15px; font-size: 8.46px; }

/* --- Book ahead (Date Picker Wheel Card 2001:4221) --- */
.bx-wheel__side { position: absolute; top: 0; width: 257px; height: 400px; }
.bx-wheel__side--l { left: 0; background: linear-gradient(to left, rgba(245, 245, 245, 0), rgba(245, 245, 245, .77) 66.893%, #f5f5f5); }
.bx-wheel__side--r { right: 0; background: linear-gradient(to right, rgba(245, 245, 245, 0), rgba(245, 245, 245, .77) 66.893%, #f5f5f5); }
.bx-wheel__col { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 345px; display: flex; flex-direction: column; align-items: center; gap: 29.096px; }
.bx-wheel__group { display: flex; flex-direction: column; gap: 3.695px; }
.bx-wheel__row, .bx-wheel__pick { display: flex; align-items: center; color: #000; font-weight: 500; text-align: center; filter: drop-shadow(0 4.022px 8.044px rgba(0, 0, 0, .15)); }
.bx-wheel__row { gap: 34.947px; font-size: 24.94px; }
.bx-wheel__m { width: 60.964px; }
.bx-wheel__d { width: 44.337px; }
.bx-wheel__y { width: 74.819px; }
.bx-wheel__pick { gap: 24px; padding: 19.398px 41.566px; border-radius: 100.547px; background: #fdfdfd; font-size: 27.711px; }
.bx-wheel__pick i { width: 4px; height: 36px; border-radius: 27.711px; background: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.bx-wheel__fade { position: absolute; left: 0; width: 600px; height: 173px; }
.bx-wheel__fade--top { top: 0; background: linear-gradient(to top, rgba(245, 245, 245, 0), rgba(245, 245, 245, .88) 48.484%, #f5f5f5); }
.bx-wheel__fade--bottom { bottom: 0; background: linear-gradient(rgba(245, 245, 245, 0), rgba(245, 245, 245, .88) 48.484%, #f5f5f5); }

/* --- Live tracking (Radar Orbit Card 2001:16016) --- */
.bx-fade--radar { bottom: 0; height: 118.066px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.bx-radar__orbits { position: absolute; left: 22.5px; top: -262.5px; width: 555px; height: 925px; -webkit-mask: var(--mask) 18.5px 203.5px / 518px 518px no-repeat; mask: var(--mask) 18.5px 203.5px / 518px 518px no-repeat; }
.bx-radar__orbits img { position: absolute; left: -1.76%; top: 0%; width: 103.52%; height: 107.94%; }
.bx-radar__noise { position: absolute; left: 41px; top: -59px; width: 518px; height: 514.531px; background: var(--noise) 0 0 / 296px 296px repeat; -webkit-mask: var(--mask) 0 0 / 518px 518px no-repeat; mask: var(--mask) 0 0 / 518px 518px no-repeat; }
.bx-radar__noise--soft { mix-blend-mode: soft-light; }
.bx-radar__noise--faint { opacity: .1; }

/* --- Trip status (Order Status Timeline Card 2001:3551) --- */
.bx-trip__card { position: absolute; left: 50%; transform: translateX(-50%); background: #fafafa; border: .531px solid #e8e8e8; border-radius: 18.105px; padding: 16.99px; display: flex; flex-direction: column; gap: 9.74px; width: 258px; }
.bx-trip__card--top { top: -41px; box-shadow: 0 2.124px 4.672px rgba(0, 0, 0, .13); }
.bx-trip__card--bottom { bottom: -40.62px; box-shadow: 0 -2.12px 4.672px rgba(0, 0, 0, .13); }
.bx-trip__label { font-size: 10px; line-height: 1.2; font-weight: 500; color: #121212; }
.bx-trip__label--strong { font-size: 11.131px; font-weight: 600; letter-spacing: -0.2226px; }
.bx-trip__person { display: flex; gap: 6px; align-items: flex-start; }
.bx-trip__place { width: 48px; height: 48px; border-radius: 12px; background: #fff; border: 1px solid #e6e9f0; box-shadow: 0 2px 6px rgba(3, 11, 38, .08); display: grid !important; place-items: center; flex: none; }
.bx-trip__place img { width: 26px; height: auto; }
.bx-trip__photo { position: relative; width: 44.526px; height: 44.526px; border-radius: 11.131px; background: #e6edfa; overflow: hidden; flex: none; }
.bx-trip__photo img { position: absolute; left: calc(50% - .33px); bottom: -7.12px; width: 49.959px; height: 49.959px; transform: translateX(-50%) rotate(-4deg); object-fit: cover; }
.bx-trip__info { flex: 1; min-width: 0; display: grid; gap: 4.174px; }
.bx-trip__name { font-size: 12px; line-height: 1.2; font-weight: 500; color: #121212; white-space: nowrap; }
.bx-trip__meta { display: flex; align-items: center; gap: 2.783px; font-size: 10px; line-height: 1.2; color: #8e8e8e; white-space: nowrap; }
.bx-trip__meta img { width: 11.131px; height: 11.131px; }
.bx-trip__meta--dark { color: #121212; }
.bx-trip__pill { display: flex !important; align-items: center; gap: 4.174px; padding: 3.479px 5.566px; border-radius: 20.871px; font-size: 6.957px; line-height: 1.2; letter-spacing: -0.1391px; white-space: nowrap; flex: none; }
.bx-trip__pill--amber { background: #ffd70f; color: #121212; font-size: 7.5px; padding: 3.75px 6px; }
.bx-trip__pill--green { background: #c7f1cc; color: #359640; }
.bx-trip__pill--green img { width: 8px; height: 8px; }
.bx-trip__actions { display: flex; gap: 2.783px; }
.bx-trip__actions span { flex: 1; display: flex !important; align-items: center; justify-content: center; gap: 4.174px; padding: 6.957px 20.871px; border: .696px solid #e5e5e5; border-radius: 27.829px; background: #f8f8f8; font-size: 8.349px; line-height: 1.2; font-weight: 500; color: #121212; }
.bx-trip__actions img { width: 13.914px; height: 13.914px; }
.bx-trip__shade { position: absolute; left: 50%; top: -1px; width: 999.543px; height: 400px; transform: translateX(-50%); background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 999.54 400' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><g transform='matrix(0.0000014894 26.942 -67.324 7.1547e-7 499.77 200)'><rect height='141.04' width='141.04' fill='url(%23g)' id='q' shape-rendering='crispEdges'/><use href='%23q' transform='scale(1 -1)'/><use href='%23q' transform='scale(-1 1)'/><use href='%23q' transform='scale(-1 -1)'/></g><defs><linearGradient id='g' gradientUnits='userSpaceOnUse' x2='5' y2='5'><stop stop-color='rgba(250,250,250,0)' offset='0.52537'/><stop stop-color='rgba(250,250,250,1)' offset='0.96727'/></linearGradient></defs></svg>") 0 0 / 100% 100%; }
.bx-trip__card--main { top: 50%; transform: translate(-50%, -50%); width: auto; padding: 18.316px; gap: 18.316px; border-width: .572px; border-radius: 22.895px; box-shadow: 0 0 15.04px rgba(0, 0, 0, .16); }
.bx-trip__head { display: flex; gap: 6px; align-items: flex-start; justify-content: space-between; }
.bx-trip__head > div { display: grid; gap: 6px; }
.bx-trip__title { font-size: 12px; line-height: 1.2; font-weight: 600; color: #121212; }
.bx-trip__ref { font-size: 10px; line-height: 1.2; font-weight: 500; color: #8e8e8e; }
.bx-trip__brand { width: 33px; height: 33px; border-radius: 9px; background: #fff; border: 1px solid #e6e9f0; box-shadow: 0 2px 6px rgba(3, 11, 38, .08); display: grid !important; place-items: center; }
.bx-trip__brand img { width: 19px; height: auto; }
.bx-trip__progress { display: grid; gap: 12px; width: 294px; }
.bx-trip__track { position: relative; height: 4.5px; border-radius: 30px; background: #e6edfa; }
.bx-trip__done { position: absolute; left: 0; top: 0; width: 188px; height: 4.5px; border-radius: 30px; background: var(--blue-2); }
.bx-trip__step { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 18.75px; background: var(--blue-2); display: grid !important; place-items: center; transform: translateY(-50%); }
.bx-trip__step img { width: 9px; height: 9px; object-fit: contain; }
.bx-trip__step--1 { left: 0; }
.bx-trip__step--1 img, .bx-trip__step--2 img { width: 9.14px; height: 10.08px; }
.bx-trip__step--2 { left: calc(50% - 46.75px); transform: translate(-50%, -50%); }
.bx-trip__step--3 { left: calc(50% + 45.5px); transform: translate(-50%, -50%); }
.bx-trip__step--3 img { width: 8.44px; height: 6.75px; }
.bx-trip__step--4 { right: 1.25px; background: #9fb4dc; }
.bx-trip__steps { display: flex; justify-content: space-between; font-size: 10px; line-height: 1.2; font-weight: 500; color: #8e8e8e; }
.bx-trip__steps .is-now { color: #121212; }
.bx-trip__steps .is-next { color: #cbcbcb; }
.bx-trip__eta { font-size: 10px; line-height: 1.2; font-weight: 500; color: #8e8e8e; }
.bx-trip__eta b { font-weight: 500; color: #000; }

/* --- Dispatch hub (Node Connect Card 2001:2969) --- */
.bx-hub { background: #fafafa; }
.bx-hub__grid { position: absolute; left: -120px; top: -220px; width: 840px; height: 840px; }
.bx-hub__grid img { position: absolute; left: 0%; top: -0.14%; width: 100.14%; height: 100.14%; }
.bx-hub__tile { position: absolute; transform: translateX(-50%); width: 75.2px; height: 75.2px; padding: 12px 6px 10px; border-radius: 14.467px; background: #fafafa; box-shadow: 2.244px 4.489px 22.445px rgba(0, 0, 0, .1); display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.bx-hub__tile img { width: 28px; height: 28px; opacity: .8; filter: grayscale(1); }
.bx-hub__tile em { font-style: normal; font-size: 9px; line-height: 1; font-weight: 500; color: #8e8e8e; }
.bx-hub__tile--1 { left: calc(50% + 126.36px); top: 40.36px; }
.bx-hub__tile--2 { left: calc(50% + 124.58px); top: 271.94px; }
.bx-hub__tile--3 { left: calc(50% - 138.81px); top: 61.95px; width: 71.65px; height: 71.65px; }
.bx-hub__tile--4 { left: calc(50% - 164.61px); top: 281.99px; width: 71.65px; height: 71.65px; }
.bx-hub__line { position: absolute; }
.bx-hub__line img { position: absolute; }
.bx-hub__line--a { left: 184.36px; top: 266.31px; width: 115.304px; height: 51.894px; }
.bx-hub__line--a img { left: -5.01%; top: -1.93%; width: 105.88%; height: 113.06%; }
.bx-hub__line--b { left: 299.67px; top: 76.41px; width: 79.149px; height: 72.097px; }
.bx-hub__line--b > span { position: absolute; inset: 0; transform: rotate(180deg); }
.bx-hub__line--b img { left: -7.29%; top: 0%; width: 108.55%; height: 108.01%; }
.bx-hub__line--c { left: 355.17px; top: 212.61px; width: 69.692px; height: 46.243px; }
.bx-hub__line--c > span { position: absolute; left: 50%; top: 50%; width: 46.243px; height: 69.692px; transform: translate(-50%, -50%) rotate(-90deg); }
.bx-hub__line--c img { left: -12.49%; top: 0%; width: 114.65%; height: 108.28%; }
.bx-hub__line--d { left: 160.2px; top: 148.51px; width: 84.635px; height: 64.096px; }
.bx-hub__line--d > span { position: absolute; left: 50%; top: 50%; width: 64.096px; height: 84.635px; transform: translate(-50%, -50%) rotate(90deg); }
.bx-hub__line--d img { left: -9.01%; top: -1.18%; width: 110.57%; height: 108.0%; }

/* --- Payments (Virtual Card Balance Card 2001:4002) --- */
.bx-pay__pattern { position: absolute; left: 50%; top: 50%; width: 580px; height: 580px; transform: translate(-50%, -50%); }
.bx-pay__wallet { position: absolute; left: 50%; top: 50%; width: 217.833px; height: 220px; transform: translate(-50%, -50%); filter: drop-shadow(0 0 10.42px rgba(0, 0, 0, .08)); }
.bx-pay__wallet > * { position: absolute; }
.bx-pay__bg { left: 0; top: 0; width: 217.833px; height: 220px; border-radius: 26.01px; background: #f8f8f8; }
.bx-pay__back { display: grid !important; place-items: center; }
.bx-pay__back > span { width: 170.148px; height: 165.813px; border-radius: 26.01px; background: var(--blue-2); opacity: .5; }
.bx-pay__back--1 { left: 2.73px; top: 7.39px; width: 212.371px; height: 209.553px; }
.bx-pay__back--1 > span { transform: rotate(17.63deg); }
.bx-pay__back--2 { left: 13.71px; top: 18.82px; width: 190.414px; height: 186.684px; }
.bx-pay__back--2 > span { transform: rotate(7.53deg); }
.bx-pay__card { left: 23.84px; top: 31.43px; width: 170.148px; height: 165.813px; border-radius: 26.01px; background: var(--blue-2); }
.bx-pay__chip { left: 146.9px; top: 76.98px; width: 30.663px; height: 24.287px; }
.bx-pay__chip img { position: absolute; }
.bx-pay__chip-base { left: 0; top: 0; width: 30.663px; height: 24.287px; }
.bx-pay__pocket { left: 0; top: 94.29px; width: 217.833px; height: 125.714px; }
.bx-pay__pill { position: absolute; display: flex !important; align-items: center; background: #fff; color: #000; font-weight: 500; white-space: nowrap; filter: drop-shadow(0 1.99px 3.98px rgba(0, 0, 0, .15)); }
.bx-pay__avatar { position: relative; flex: none; border-radius: 50%; overflow: hidden; }
.bx-pay__avatar img { width: 100%; height: 100%; }
.bx-pay__pill--main { left: 131.96px; top: 283.52px; gap: 11.284px; padding: 5.642px 19.747px 5.642px 5.642px; border-radius: 70.524px; font-size: 17.984px; filter: drop-shadow(0 2.821px 5.642px rgba(0, 0, 0, .15)); }
.bx-pay__pill--main .bx-pay__avatar { width: 33.57px; height: 33.57px; }
.bx-pay__pill--main .bx-pay__avatar img { position: absolute; left: 50%; top: calc(50% + 3.95px); width: 39.347px; height: 39.347px; transform: translate(-50%, -50%) rotate(-4deg); object-fit: cover; }
.bx-pay__pill--tr { left: 384.07px; top: 46.08px; gap: 7.96px; padding: 3.98px 13.93px 3.98px 3.98px; border-radius: 49.751px; font-size: 12.687px; }
.bx-pay__pill--tr .bx-pay__avatar { width: 24px; height: 24px; }
.bx-pay__pill--tl, .bx-pay__pill--br { gap: 5.984px; padding: 2.992px 10.471px 2.992px 2.992px; border-radius: 37.397px; font-size: 9.536px; filter: drop-shadow(0 1.496px 2.992px rgba(0, 0, 0, .15)); }
.bx-pay__pill--tl { left: 98.27px; top: 66.4px; }
.bx-pay__pill--br { left: 419.7px; top: 288.89px; }
.bx-pay__pill--tl .bx-pay__avatar, .bx-pay__pill--br .bx-pay__avatar { width: 17.8px; height: 17.8px; }

/* --- Verified drivers (Verified Status Stack Card 2001:3740) --- */
.bx-verified__sq, .bx-verified__front { position: absolute; top: 199px; transform: translate(-50%, -50%); background: #fafafa; border: .782px solid #e8e8e8; }
.bx-verified__sq--far-l, .bx-verified__sq--far-r { width: 191.333px; height: 191.333px; border-radius: 31.889px; box-shadow: 0 3.129px 17.518px rgba(0, 0, 0, .08); }
.bx-verified__sq--far-l { left: calc(299px - 92.93px); }
.bx-verified__sq--far-r { left: calc(299px + 92.93px); }
.bx-verified__sq--near-l, .bx-verified__sq--near-r { width: 218.667px; height: 218.667px; border-radius: 36.444px; border-width: .894px; box-shadow: 0 3.576px 20.02px rgba(0, 0, 0, .08); }
.bx-verified__sq--near-l { left: calc(299px - 46.47px); }
.bx-verified__sq--near-r { left: calc(299px + 46.47px); }
.bx-verified__front { left: 299px; width: 246px; height: 246px; border-radius: 41px; border-width: 1.006px; box-shadow: 0 4.023px 22.523px rgba(0, 0, 0, .08); padding: 22.778px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; }
.bx-verified__front p { font-size: 16px; line-height: 1.2; font-weight: 500; color: #121212; }
.bx-verified__badge { position: relative; width: 99.777px; height: 100px; }
.bx-verified__badge img { position: absolute; }
.bx-verified__badge .b1 { left: 0; top: 0; width: 99.777px; height: 100px; }
.bx-verified__badge .b2 { left: 33.93px; top: 25.5px; width: 66.066px; height: 73.811px; }
.bx-verified__badge .b3 { left: 18.76px; top: 24.08px; width: 62.476px; height: 51.835px; }
.bx-verified__lines { display: grid !important; justify-items: center; gap: 6.833px; }
.bx-verified__lines i { display: block; height: 11.389px; border-radius: 45.556px; background: #d9d9d9; }
.bx-verified__lines i:first-child { width: 169.694px; }
.bx-verified__lines i:last-child { width: 124.139px; }

/* --- Ratings (Testimonial Stack Card 2001:14711): four cards, each a scaled copy of the front one --- */
.bx-rate__fade { position: absolute; left: 0; width: 600px; height: 139.712px; }
.bx-rate__fade--bottom { bottom: 0; background: linear-gradient(rgba(245, 245, 245, 0), #f5f5f5 79.327%); }
.bx-rate__fade--top { top: 0; background: linear-gradient(to top, rgba(245, 245, 245, 0), #f5f5f5 79.327%); }
.bx-rate__card { position: absolute; left: 299px; width: 347px; padding: 20px; border-radius: 12.841px; background: #fff; filter: drop-shadow(0 5.136px 16.051px rgba(0, 0, 0, .04)); display: flex; flex-direction: column; gap: 20px; }
.bx-rate__card--1 { top: calc(199px - 69.52px); transform: translate(-50%, -50%) scale(.65418); }
.bx-rate__card--2 { top: calc(199px - 42.52px); transform: translate(-50%, -50%) scale(.76945); }
.bx-rate__card--3 { top: calc(199px - 12.52px); transform: translate(-50%, -50%) scale(.88473); }
.bx-rate__card--4 { top: calc(199px + 20px); transform: translate(-50%, -50%); }
.bx-rate__stars { width: 95.337px; height: 16.824px; margin-bottom: -8.784px; }
.bx-rate__text { font-size: 12.618px; line-height: 16.824px; color: #1e1e1e; }
.bx-rate__who { display: flex; align-items: center; gap: 11.216px; }
.bx-rate__avatar { position: relative; width: 33.648px; height: 33.648px; }
.bx-rate__avatar img { width: 100%; height: 100%; }
.bx-rate__avatar b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.618px; font-weight: 600; color: #fff; }
.bx-rate__who > span:last-child { display: grid; font-size: 12.618px; line-height: 16.824px; }
.bx-rate__who > span:last-child b { font-weight: 700; color: #1e1e1e; }
.bx-rate__who > span:last-child em { font-style: normal; color: rgba(30, 30, 30, .6); }

/* --- You keep 95% (Growth Metric Card 2001:16916) --- */
.bx-growth { background: #fafafa; }
.bx-growth__bars { position: absolute; left: 50%; bottom: -1.4px; transform: translateX(-50%); display: flex !important; align-items: flex-end; gap: 13.409px; }
.bx-growth__bar { flex: none; width: 89.317px; border-radius: 14.886px 14.886px 0 0; background: rgba(40, 115, 255, .1); }
.bx-growth__hero { position: relative; flex: none; width: 119.09px; height: 275.395px; border-radius: 20.841px 20.841px 0 0; background: rgba(40, 115, 255, .12); overflow: hidden; box-shadow: 0 0 169.703px rgba(40, 115, 255, .45), 0 5.954px 8.932px rgba(0, 0, 0, .08); }
.bx-growth__fill { position: absolute; left: 14.89px; top: 14.89px; width: 89.317px; height: 457.007px; border: 1.489px solid #5b93ff; border-radius: 14.886px 14.886px 0 0; background: linear-gradient(var(--blue-2), var(--g700)); box-shadow: inset -2.977px -2.977px 20.841px rgba(0, 0, 0, .25), inset 2.977px 2.977px 20.841px rgba(0, 0, 0, .25); display: flex !important; justify-content: center; align-items: flex-start; padding-top: 34px; }
.bx-growth__mark { width: 52px; height: 52px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 4px 12px rgba(3, 11, 38, .25); object-fit: contain; }
.bx-growth__label { position: absolute; left: 50%; top: 62px; transform: translateX(-50%); padding: 14px 12px; border: .732px solid #e0f2fe; border-radius: 14.637px; background: #fcfcfd; font-size: 20px; line-height: 1.2; font-weight: 500; color: var(--g800); white-space: nowrap; box-shadow: 0 14.637px 5.855px rgba(0, 0, 0, .01), 0 8.051px 5.123px rgba(0, 0, 0, .05), 0 3.659px 3.659px rgba(0, 0, 0, .09), 0 .732px 2.196px rgba(0, 0, 0, .1); }
.bx-growth__line { position: absolute; left: 0; top: 160px; width: 600px; height: 2px; }
.bx-growth__dot { position: absolute; left: 50%; top: calc(199px - 38px); width: 14px; height: 14px; transform: translate(-50%, -50%); }
.bx-growth__dot img { position: absolute; left: -28.57%; top: -28.57%; width: 157.14%; height: 157.14%; }

/* ===== Bento animations (html.bx-anim is set by main.js when motion is allowed) =====
   Entrance effects start from a hidden/collapsed state and play once (.is-seen); loops run only
   while the card is on screen (.is-live) and pause otherwise. */
.bx-anim .bx-art:not(.is-live) * { animation-play-state: paused !important; }
.bx-tile { transition: transform .35s cubic-bezier(.2, .65, .3, 1), box-shadow .35s ease; }
/* Tiles also fade in with the site's scroll reveal (.rv-item), so keep both transitions. */
.motion .rv .bx-tile.rv-item { transition: opacity .6s cubic-bezier(.2,.65,.3,1) var(--rv-delay, 0ms), translate .6s cubic-bezier(.2,.65,.3,1) var(--rv-delay, 0ms), transform .35s cubic-bezier(.2, .65, .3, 1), box-shadow .35s ease; }
.bx-tile:not(.bx-tile--cta):hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(3, 11, 38, .08); }

/* Branded app: screens float */
.bx-anim .is-seen .bx-app__front { animation: bx-float 6s ease-in-out infinite; }
.bx-anim .is-seen .bx-app__back--l > .bx-app__card { animation: bx-sway-l 7s ease-in-out infinite; }
.bx-anim .is-seen .bx-app__back--r > .bx-app__card { animation: bx-sway-r 7s ease-in-out infinite; }
@keyframes bx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes bx-sway-l { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(-13.5deg) translateY(-4px); } }
@keyframes bx-sway-r { 0%, 100% { transform: rotate(11deg); } 50% { transform: rotate(13.5deg) translateY(-4px); } }

/* Book ahead: the wheel drifts and the picked date breathes */
.bx-anim .is-seen .bx-wheel__group { animation: bx-drift 5s ease-in-out infinite; }
.bx-anim .is-seen .bx-wheel__pick { animation: bx-breathe 5s ease-in-out infinite; }
@keyframes bx-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bx-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }

/* Live tracking: radar pings from the centre */
.bx-radar__ping { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 1.5px solid rgba(40, 115, 255, .55); opacity: 0; }
.bx-anim .is-seen .bx-radar__ping { animation: bx-ping 3.2s cubic-bezier(.2, .6, .35, 1) infinite; }
.bx-anim .is-seen .bx-radar__ping--late { animation-delay: 1.6s; }
@keyframes bx-ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(4.8); opacity: 0; } }

/* Trip status: progress fills to "On the way", the current step pulses */
.bx-anim .bx-trip__done { width: 96px; }
.bx-anim .is-seen .bx-trip__done { animation: bx-trip-fill 1.6s cubic-bezier(.3, .7, .3, 1) .3s forwards; }
@keyframes bx-trip-fill { to { width: 188px; } }
.bx-anim .is-seen .bx-trip__step--3 { animation: bx-step 2.2s ease-out 1.9s infinite; }
@keyframes bx-step { 0% { box-shadow: 0 0 0 0 rgba(40, 115, 255, .5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(40, 115, 255, 0); } }

/* Dispatch: booking sources bob, the hub glows */
.bx-anim .is-seen .bx-hub__tile { animation: bx-bob 5s ease-in-out infinite; }
.bx-anim .is-seen .bx-hub__tile--2 { animation-delay: -1.25s; }
.bx-anim .is-seen .bx-hub__tile--3 { animation-delay: -2.5s; }
.bx-anim .is-seen .bx-hub__tile--4 { animation-delay: -3.75s; }
@keyframes bx-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -7px); } }
.bx-anim .is-seen .bx-orb--hub, .bx-anim .is-seen .bx-orb--radar { animation: bx-glow 3.2s ease-in-out infinite; }
@keyframes bx-glow { 0%, 100% { box-shadow: 0 8px 24px rgba(3, 11, 38, .12), 0 0 0 6px rgba(40, 115, 255, .06); } 50% { box-shadow: 0 8px 24px rgba(3, 11, 38, .12), 0 0 0 14px rgba(40, 115, 255, .12); } }

/* Payments: fares float, the cards behind sway */
.bx-anim .is-seen .bx-pay__pill { animation: bx-bob-y 4.8s ease-in-out infinite; }
.bx-anim .is-seen .bx-pay__pill--tr { animation-delay: -1.2s; }
.bx-anim .is-seen .bx-pay__pill--tl { animation-delay: -2.4s; }
.bx-anim .is-seen .bx-pay__pill--br { animation-delay: -3.6s; }
@keyframes bx-bob-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.bx-anim .is-seen .bx-pay__back--1 > span { animation: bx-card-1 6s ease-in-out infinite; }
.bx-anim .is-seen .bx-pay__back--2 > span { animation: bx-card-2 6s ease-in-out infinite; }
@keyframes bx-card-1 { 0%, 100% { transform: rotate(17.63deg); } 50% { transform: rotate(21deg); } }
@keyframes bx-card-2 { 0%, 100% { transform: rotate(7.53deg); } 50% { transform: rotate(10deg); } }

/* Ratings: review cards slide up into the stack, back to front */
.bx-rate__card--1 { --rs: .65418; }
.bx-rate__card--2 { --rs: .76945; }
.bx-rate__card--3 { --rs: .88473; }
.bx-rate__card--4 { --rs: 1; }
.bx-anim .bx-rate__card { opacity: 0; }
.bx-anim .is-seen .bx-rate__card { animation: bx-rate-in .7s cubic-bezier(.2, .7, .3, 1) forwards; }
.bx-anim .is-seen .bx-rate__card--2 { animation-delay: .12s; }
.bx-anim .is-seen .bx-rate__card--3 { animation-delay: .24s; }
.bx-anim .is-seen .bx-rate__card--4 { animation-delay: .36s; }
@keyframes bx-rate-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 28px)) scale(var(--rs)); } to { opacity: 1; transform: translate(-50%, -50%) scale(var(--rs)); } }

/* Verified: the badge pops in, the cards fan out behind it */
.bx-anim .bx-verified__badge { transform: scale(.4); opacity: 0; }
.bx-anim .is-seen .bx-verified__badge { animation: bx-pop .8s cubic-bezier(.3, 1.6, .5, 1) .25s forwards; }
@keyframes bx-pop { to { transform: scale(1); opacity: 1; } }
.bx-anim .bx-verified__sq { opacity: 0; }
.bx-anim .is-seen .bx-verified__sq { animation: bx-fan .6s ease-out forwards; }
.bx-anim .is-seen .bx-verified__sq--far-l, .bx-anim .is-seen .bx-verified__sq--far-r { animation-delay: .15s; }
@keyframes bx-fan { from { opacity: 0; transform: translate(-50%, -50%) scale(.85); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* You keep 95%: bars grow from the bottom, then the label appears */
.bx-anim .bx-growth__bar, .bx-anim .bx-growth__hero { transform: scaleY(0); transform-origin: bottom; }
.bx-anim .is-seen .bx-growth__bar, .bx-anim .is-seen .bx-growth__hero { animation: bx-grow .9s cubic-bezier(.2, .7, .3, 1) forwards; }
.bx-anim .is-seen .bx-growth__bars > :nth-child(1), .bx-anim .is-seen .bx-growth__bars > :nth-child(9) { animation-delay: .32s; }
.bx-anim .is-seen .bx-growth__bars > :nth-child(2), .bx-anim .is-seen .bx-growth__bars > :nth-child(8) { animation-delay: .24s; }
.bx-anim .is-seen .bx-growth__bars > :nth-child(3), .bx-anim .is-seen .bx-growth__bars > :nth-child(7) { animation-delay: .16s; }
.bx-anim .is-seen .bx-growth__bars > :nth-child(4), .bx-anim .is-seen .bx-growth__bars > :nth-child(6) { animation-delay: .08s; }
@keyframes bx-grow { to { transform: scaleY(1); } }
.bx-anim .bx-growth__label, .bx-anim .bx-growth__dot { opacity: 0; }
.bx-anim .is-seen .bx-growth__label { animation: bx-label .5s cubic-bezier(.3, 1.4, .5, 1) .9s forwards; }
.bx-anim .is-seen .bx-growth__dot { animation: bx-fade .4s ease-out 1.1s forwards; }
@keyframes bx-label { from { opacity: 0; transform: translate(-50%, 10px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes bx-fade { to { opacity: 1; } }


/* ---- src/styles/landing.css ---- */
/* Search landing pages (/solutions/, /locations/) and ad landing pages (/go/). Markup: src/lib/landing.mjs */

.lp-hero .hero__bg::after { background: linear-gradient(180deg, rgba(4, 22, 66,.72) 0%, rgba(4, 22, 66,.55) 55%, #093a96 100%); }
.lp-hero .page-head { padding: 96px 0 128px; }
.lp-ad-hero .page-head { padding: 72px 0 96px; }

/* Ad header: logo + CTAs only, kept visible on phones (no menu button). */
.site-header--minimal .topbar { justify-content: space-between; }
@media (max-width: 1100px) {
  .site-header--minimal .topbar__cta { display: flex; }
}
@media (max-width: 480px) {
  .site-header--minimal .topbar__cta .btn--white { display: none; }
}

.lp-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 16px; font-size: 14px; color: var(--w50); }
.lp-proof li { display: inline-flex; align-items: center; gap: 6px; }
.lp-proof .lp-tick { color: var(--green); }

/* Benefit cards */
.lp-points { padding: 80px 0 0; }
.lp-points__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lp-point { background: #fff; border: 1px solid #e6e9f0; border-radius: var(--radius-lg); padding: 24px; display: grid; gap: 40px; align-content: space-between; min-height: 200px; }
.lp-point .h3 { color: var(--g800); }
.lp-point p { font-size: 14px; color: var(--g300); }
@media (max-width: 1100px) { .lp-points__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .lp-points { padding-top: 48px; }
  .lp-points__grid { grid-template-columns: minmax(0, 1fr); }
  .lp-point { min-height: 0; gap: 16px; }
}

/* Editorial rows */
.lp-row { padding: 80px 0; border-bottom: 1px solid var(--w300); }
.lp-row__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.lp-row__head { display: grid; gap: 16px; justify-items: start; position: sticky; top: 120px; }
.lp-row__head .h1 { text-wrap: balance; color: var(--g800); }
.lp-row__body { display: grid; gap: 24px; justify-items: start; font-size: 17px; }
.lp-list { display: grid; gap: 12px; width: 100%; }
.lp-list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: #fff; border: 1px solid #e6e9f0; border-radius: var(--radius); font-size: 15px; }
.lp-list .lp-tick { color: var(--blue-2); flex: none; margin-top: 2px; }
@media (max-width: 900px) {
  .lp-row { padding: 56px 0; }
  .lp-row__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lp-row__head { position: static; }
  .lp-row__body { font-size: 16px; }
}

/* How it works */
.lp-steps { padding: 100px 0; }
.lp-steps__head { display: grid; gap: 16px; justify-items: center; text-align: center; margin-bottom: 48px; }
.lp-steps__head .eyebrow { color: var(--g500); }
.lp-steps__head .h1 { color: var(--g800); }
.lp-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; }
.lp-step { background: var(--g800); color: var(--w50); border-radius: var(--radius-lg); padding: 32px 24px; display: grid; gap: 16px; align-content: start; }
.lp-step__n { font-family: var(--font-head); font-size: 14px; color: var(--blue-3); }
.lp-step p { color: var(--g100); font-size: 15px; }
@media (max-width: 900px) {
  .lp-steps { padding: 64px 0; }
  .lp-steps__list { grid-template-columns: minmax(0, 1fr); }
}

/* Related links */
.lp-related { padding: 0 0 100px; }
.lp-related .h2 { color: var(--g800); margin-bottom: 24px; }
.lp-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lp-related__card { display: grid; gap: 8px; align-content: start; padding: 20px; border: 1px solid #e6e9f0; border-radius: var(--radius-lg); background: #fff; text-decoration: none; font-size: 14px; color: var(--g300); transition: border-color .2s ease, transform .2s ease; }
.lp-related__card .h3 { color: var(--g800); }
.lp-related__card:hover, .lp-related__card:focus-visible { border-color: var(--blue-2); transform: translateY(-2px); }
@media (max-width: 1100px) { .lp-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lp-related { padding-bottom: 64px; } .lp-related__grid { grid-template-columns: minmax(0, 1fr); } }


/* ---- src/styles/platform.css ---- */
/* Platform group: Live Trip Tracking (Figma "System/Track Shipment"), Dispatch (Figma "System/Shipment
   Management") and Earnings Calculator (Figma "System/Rate Calculator"). Prefix: .pf- */

/* ---------- Shared bits ---------- */
.pf-track-hero__text, .pf-track-hero__desc, .pf-track-form, .pf-life__head, .pf-life__title, .pf-why__text, .pf-why__block, .pf-why__logos, .pf-control__text, .pf-control__title, .pf-control__block, .pf-story__head, .pf-story__main, .pf-quote { grid-template-columns: minmax(0, 1fr); }
.pf-bullets { list-style: none; padding: 0; display: grid; gap: 8px; }
.pf-bullets li { display: flex; gap: 8px; align-items: center; font-size: 16px; line-height: 1.5; color: var(--g500); }
.pf-bullets li::before { content: ''; flex: none; width: 6.446px; height: 6.446px; background: var(--g500); }
.pf-mobile-only { display: none !important; }
@media (max-width: 768px) {
  .pf-mobile-only { display: inline-flex !important; }
  .pf-bullets li { align-items: flex-start; }
  .pf-bullets li::before { margin-top: 12px; }
}

/* ---------- Live Trip Tracking: header ---------- */
.pf-hero--track { min-height: 700px; }
.pf-track-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding-top: 254px; padding-bottom: 70px; }
.pf-track-hero__text { width: 590px; display: grid; gap: 16px; justify-items: start; }
.pf-track-hero__desc { width: 435px; flex: none; display: grid; gap: 24px; justify-items: start; }
.pf-track-hero__copy p + p { margin-top: 24px; }
.pf-track-form { display: grid; gap: 8px; justify-items: start; width: 100%; }
.pf-track-form__field { width: 100%; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.pf-track-form__field input { flex: 1; min-width: 0; border: 0; padding: 0; background: transparent; outline: none; font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; color: var(--g600); }
.pf-track-form__field input::placeholder { color: #8c8c8c; opacity: 1; }
.pf-track-form__field:focus-within { border-color: var(--g500); }
.pf-track-form__field img { flex: none; }
.pf-track-form__note { font-size: 12px; line-height: 1.5; width: 100%; }
.pf-track-form .action-btn { margin-top: 16px; }
@media (max-width: 1100px) { .pf-track-hero { padding-top: 160px; } .pf-track-hero__desc { width: 400px; } }
@media (max-width: 900px) {
  .pf-track-hero { flex-direction: column; gap: 40px; padding-top: 80px; }
  .pf-track-hero__text, .pf-track-hero__desc { width: 100%; }
}
@media (max-width: 768px) {
  .pf-hero--track { min-height: 766px; }
  .pf-hero--track .hero__bg img { display: none; }
  .pf-hero--track .hero__bg { background: url(/assets/img/platform/track-hero-m.jpg) 80% center / cover no-repeat; }
  .pf-track-hero { padding-top: 62px; padding-bottom: 140px; gap: 44px; }
}

/* ---------- Live Trip Tracking: Section 1 (trip lifecycle) ---------- */
.pf-life { position: relative; overflow: hidden; background: var(--g700); color: var(--w50); padding: 100px 0; isolation: isolate; }
.pf-life__globe { position: absolute; z-index: -1; left: calc(50% + 13px); top: 50px; width: 971.755px; height: 977.995px; max-width: none; opacity: .07; pointer-events: none; }
.pf-life__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.pf-life__head { width: 484px; max-width: 100%; display: grid; gap: 24px; }
.pf-life__title { display: grid; gap: 16px; justify-items: start; }
.pf-life__scroll { margin-right: calc(50% - 50vw); overflow-x: auto; scrollbar-width: none; }
.pf-life__scroll::-webkit-scrollbar { display: none; }
.pf-life ol.pf-life__cards { list-style: none; margin: 0; display: flex; gap: 8px; width: max-content; padding: 8px; border: 1px solid var(--g400); border-radius: var(--radius); margin-right: 80px; }
.pf-stage { flex: none; width: 314px; height: 226px; padding: 24px; border-radius: var(--radius); background: var(--g400); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.pf-stage__text { display: grid; gap: 8px; line-height: 1.5; }
.pf-stage__text h3 { font-size: 16px; font-weight: 500; white-space: nowrap; }
.pf-stage__text p { font-family: var(--font-alt); font-size: 14px; letter-spacing: -0.03em; }
@media (max-width: 768px) {
  .pf-life { padding: 80px 0; }
  .pf-life__globe { display: none; }
  .pf-life__scroll { margin-right: 0; overflow: visible; }
  .pf-life ol.pf-life__cards { width: 100%; flex-direction: column; margin-right: 0; }
  .pf-stage { width: 100%; height: 180px; }
  .pf-life__cta { display: none; }
}

/* ---------- Live Trip Tracking: Section 2 (why) ---------- */
.pf-why { background: #f5f5f5; color: var(--g500); padding: 80px 0; }
.pf-why__inner { display: flex; justify-content: space-between; align-items: center; gap: 48px; }
.pf-why__text { width: 563px; flex: none; display: grid; gap: 32px; }
.pf-why__text .h1 { width: 302.816px; max-width: 100%; }
.pf-why__block { display: grid; gap: 24px; }
.pf-why__logos { display: grid; gap: 22px; }
.pf-logos { display: flex; gap: 32px; align-items: flex-start; }
.pf-logos img { height: 28px; width: auto; flex: none; }
.pf-why__media { width: 625px; height: 491px; flex: 0 1 625px; border-radius: var(--radius-lg); overflow: hidden; }
.pf-why__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1100px) { .pf-why__text { width: 48%; flex: 1; } .pf-why__media { height: 420px; } }
@media (max-width: 768px) {
  .pf-why__inner { flex-direction: column-reverse; align-items: stretch; gap: 48px; }
  .pf-why__text { width: 100%; }
  .pf-why__text .h1 { width: 100%; }
  .pf-why__media { flex: none; width: 100%; height: 249px; }
  .pf-logos { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; justify-content: start; gap: 16px 32px; }
}

/* ---------- Live Trip Tracking: Section 3 (control) ---------- */
.pf-control { padding: 80px 0; border-bottom: 1px solid var(--w300); color: var(--g500); }
.pf-control__inner { display: flex; justify-content: center; align-items: center; gap: 64px; }
.pf-control__media { width: 627px; height: 441px; flex: 0 1 627px; border-radius: var(--radius-lg); overflow: hidden; }
.pf-control__media img { width: 100%; height: 100%; object-fit: cover; }
.pf-control__text { width: 563px; flex: none; display: grid; gap: 56px; }
.pf-control__title { display: grid; gap: 16px; justify-items: start; }
.pf-control__block { display: grid; gap: 27px; justify-items: start; }
.pf-control__copy p + p { margin-top: 24px; }
@media (max-width: 1100px) { .pf-control__inner { gap: 40px; } .pf-control__text { width: 48%; flex: 1; } }
@media (max-width: 768px) {
  .pf-control { padding: 81px 0 80px; }
  .pf-control__inner { flex-direction: column; align-items: stretch; gap: 32px; padding-inline: 17px; }
  .pf-control__media { flex: none; width: 100%; height: 249px; }
  .pf-control__text { width: 100%; gap: 40px; }
}

/* ---------- Live Trip Tracking: Section 4 (story + video) ---------- */
.pf-story { padding: 80px 0; color: var(--g500); }
.pf-story__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.pf-story__head { display: grid; gap: 16px; justify-items: start; }
.pf-story__head .eyebrow { display: none; }
.pf-story__head .h1 { width: 815.279px; max-width: 100%; }
@media (min-width: 1101px) { .pf-story__head .h1 { width: auto; white-space: nowrap; } }
.pf-story__main { display: grid; gap: 32px; }
.pf-quote { margin: 0; width: 708px; max-width: 100%; display: grid; gap: 24px; }
.pf-quote__user { display: flex; gap: 12px; align-items: center; font-size: 14px; letter-spacing: -0.01em; line-height: 1.5; }
.pf-quote__user img { width: 42.26px; height: 44px; border-radius: var(--radius); object-fit: cover; flex: none; }
.pf-quote__user > span { display: grid; gap: 2px; width: 179px; }
.pf-quote__user b { font-weight: 500; color: var(--g500); }
.pf-quote__user span span { color: var(--g200); }
.pf-quote blockquote { margin: 0; font-size: 16px; line-height: 1.5; }
.pf-video { border-radius: var(--radius-lg); overflow: hidden; }
.pf-video__image { position: relative; height: 434px; }
.pf-video__image > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 31%; }
.pf-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 30px; background: var(--play); display: grid; place-items: center; backdrop-filter: blur(0.863px); }
.pf-video__bar { background: var(--g700); color: var(--w50); padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.pf-video__text { display: grid; gap: 4px; font-size: 16px; line-height: 1.5; }
@media (max-width: 768px) {
  .pf-story__inner { gap: 40px; }
  .pf-story__head .eyebrow { display: inline-flex; }
  .pf-story__main { gap: 32px; }
  .pf-video__image { height: 305px; }
  .pf-video__image > img { object-position: 30% 50%; }
  .pf-video__bar { flex-direction: column; align-items: flex-start; padding: 17px 16px 16px; gap: 16px; }
}

/* ---------- Live Trip Tracking: FAQ (Figma "Section 7": no photo, 4 items on desktop, 6 on mobile) ---------- */
.pf-faq .faq { padding: 100px 0; }
@media (min-width: 769px) { .pf-faq .faq__item:nth-child(n + 5) { display: none; } }
@media (max-width: 1100px) { .pf-faq .faq { padding: 0 0 80px; } }
@media (max-width: 768px) { .pf-faq .faq { padding: 0; margin-bottom: 0; } }

/* ---------- Dispatch: header ---------- */
.pf-hero--dispatch { min-height: 700px; }
.pf-hero--dispatch .hero__bg::after { background: linear-gradient(180deg, rgba(4, 22, 66,.5) 0%, rgba(4, 22, 66,0) 65.071%), linear-gradient(180deg, rgba(4, 22, 66,0) 11.93%, #093a96 100%); }
.pf-dsp-hero { display: flex; gap: 24px; align-items: flex-start; padding-top: 305px; padding-bottom: 60px; }
.pf-dsp-hero__text { width: 886px; flex: 0 1 886px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: start; }
.pf-dsp-hero__text .h-display { width: 629.546px; max-width: 100%; }
.pf-dsp-hero__desc { width: 341px; flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: start; }
@media (max-width: 1100px) { .pf-dsp-hero { padding-top: 200px; } }
@media (max-width: 900px) {
  .pf-dsp-hero { flex-direction: column; gap: 40px; }
  .pf-dsp-hero__text, .pf-dsp-hero__desc { width: 100%; flex: none; }
}
@media (max-width: 768px) {
  .pf-hero--dispatch { min-height: 766px; }
  .pf-hero--dispatch .hero__bg img { object-position: 72% center !important; }
  .pf-dsp-hero { padding-top: 222px; padding-bottom: 60px; gap: 44px; }
}

/* ---------- Dispatch: Section 1 ---------- */
.pf-one { background: #e6e9e9; color: var(--g500); padding-top: 80px; }
.pf-one__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.pf-one__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 27px; justify-items: start; }
.pf-one__content { width: 100%; display: flex; justify-content: space-between; gap: 40px; align-items: flex-start; }
.pf-one__content .h2 { width: 306px; flex: none; }
.pf-one__body { width: 636px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; justify-items: start; }
.pf-one__rule { border: 0; border-top: 1px solid var(--g100); margin: 0; }
.pf-one__media { display: flex; gap: 8px; }
.pf-one__img { flex: 0 1 475px; height: 242.287px; border-radius: var(--radius-lg); overflow: hidden; }
.pf-one__img img { width: 100%; height: 100%; object-fit: cover; }
.pf-one__stat { flex: 0 0 314px; height: 242px; padding: 24px; border-radius: var(--radius-lg); background: var(--g600); color: var(--w50); display: flex; flex-direction: column; justify-content: space-between; }
.pf-one__value { font-size: 56px; line-height: 1.1; letter-spacing: -0.02em; }
.pf-one__stat p + p { font-size: 14px; letter-spacing: -0.01em; width: 259.24px; max-width: 100%; }
@media (max-width: 1100px) { .pf-one__body { width: auto; flex: 1; } .pf-one__img--2 { display: none; } .pf-one__img { flex: 1; } }
@media (max-width: 768px) {
  .pf-one { padding: 80px 0 60px; }
  .pf-one__inner { gap: 40px; }
  .pf-one__content { flex-direction: column; gap: 32px; }
  .pf-one__body { width: 100%; }
  .pf-one__media { flex-direction: column; gap: 12px; }
  .pf-one__img { flex: none; height: 188.69px; }
  .pf-one__stat { flex: none; height: 176px; }
  .pf-one__value { font-size: 40px; }
}

/* ---------- Dispatch: Section 2 (features panel) ---------- */
.pf-need { background: #e6e9e9; border-bottom: 1px solid var(--w300); padding: 80px 0; }
.pf-need__panel { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); padding: 44px 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; justify-items: center; color: var(--w50); }
.pf-need__bg { position: absolute; inset: 0; z-index: -1; }
.pf-need__bg img { width: 100%; height: 100%; object-fit: cover; }
.pf-need__bg::after { content: ''; position: absolute; inset: 0; background: rgba(4, 22, 66,.71); }
.pf-need__intro { width: 503px; max-width: 100%; display: grid; gap: 14px; text-align: center; }
.pf-need__cards { width: 100%; display: flex; gap: 4px; height: 258px; padding: 8px; border: 1px solid var(--g300); border-radius: var(--radius); }
.pf-need__card { flex: 1 1 0; min-width: 0; background: var(--g400); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
.pf-need__card h3 { font-size: 16px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.pf-need__card p { font-size: 14px; letter-spacing: -0.01em; line-height: 1.5; }
@media (max-width: 1100px) { .pf-need__cards { display: grid; grid-template-columns: 1fr 1fr; height: auto; } .pf-need__card { min-height: 220px; gap: 24px; } }
@media (max-width: 768px) {
  .pf-need { padding: 0 0 32px; border-bottom: 0; }
  .pf-need__panel { padding: 30px 16px 24px; gap: 32px; }
  .pf-need__cards { grid-template-columns: minmax(0, 1fr); }
  .pf-need__card { min-height: 207px; padding: 16px 32px; }
  .pf-need__card h3 { white-space: normal; }
}

/* ---------- Dispatch: Section 3 (trusted) ---------- */
.pf-trusted { padding: 100px 0; border-bottom: 1px solid var(--w300); color: var(--g500); }
.pf-trusted__inner { display: flex; justify-content: space-between; align-items: stretch; gap: 48px; }
.pf-trusted__left { width: 543px; display: flex; flex-direction: column; gap: 60px; }
.pf-trusted__img { width: 253px; height: 188px; border-radius: var(--radius); overflow: hidden; }
.pf-trusted__img img { width: 100%; height: 100%; object-fit: cover; }
.pf-trusted__right { width: 551px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; }
.pf-trusted__copy p + p { margin-top: 24px; }
.pf-trusted__stat { display: grid; gap: 8px; }
.pf-trusted__num { display: grid; gap: 12px; justify-items: start; }
.pf-trusted__value { font-size: 56px; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; }
.pf-trusted__label { font-size: 14px; letter-spacing: -0.01em; }
@media (max-width: 1100px) { .pf-trusted__left, .pf-trusted__right { width: 48%; } }
@media (max-width: 768px) {
  .pf-trusted { padding: 80px 0; }
  .pf-trusted__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pf-trusted__left { display: contents; }
  .pf-trusted__img { order: -1; width: 100%; height: 237px; margin-bottom: 32px; }
  .pf-trusted__left .h1 { font-size: 28px; letter-spacing: -0.01em; margin-bottom: 39px; }
  .pf-trusted__right { width: 100%; gap: 34px; }
  .pf-trusted__value { font-size: 40px; }
}

/* ---------- Dispatch: Section 4 (forward band + highlights) ---------- */
.pf-forward { padding-top: 100px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; color: var(--g500); }
.pf-forward__title { text-align: center; padding-inline: var(--gutter); }
.pf-forward__band { position: relative; height: 685px; overflow: hidden; }
.pf-forward__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.pf-forward__band::after { content: ''; position: absolute; inset: 0; background: rgba(4, 22, 66,.1); pointer-events: none; }
.pf-forward__info { position: absolute; z-index: 1; left: 80px; right: 79.5px; top: 480.71px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.pf-forward__card { background: var(--g400); color: var(--w50); border-radius: var(--radius); padding: 12px 16px; display: flex; gap: 18px; align-items: center; }
.pf-forward__img { width: 143.824px; height: 122.426px; flex: none; border-radius: var(--radius); overflow: hidden; }
.pf-forward__img img { width: 100%; height: 100%; object-fit: cover; object-position: 16% 50%; }
.pf-forward__text { width: 345px; display: grid; gap: 8px; }
.pf-forward__text h3 { font-size: 20px; line-height: 1.1; letter-spacing: -0.01em; font-weight: 500; }
.pf-forward__text p { font-size: 14px; letter-spacing: -0.01em; line-height: 1.5; }
.pf-forward__count { background: none; border: 0; padding: 0; color: var(--w50); font: 700 16px/20px var(--font); letter-spacing: -0.01em; cursor: pointer; display: flex; white-space: nowrap; }
@media (max-width: 1100px) { .pf-forward__info { left: var(--gutter); right: var(--gutter); } }
@media (max-width: 768px) {
  .pf-forward { padding-top: 40px; gap: 38px; }
  .pf-forward__title { padding-inline: 0; }
  .pf-forward__band { height: 882px; }
  .pf-forward__bg { object-position: 62.6% 100%; }
  .pf-forward__info { left: 16px; right: 16px; top: 494.31px; flex-direction: column; align-items: stretch; gap: 24px; }
  .pf-forward__card { flex-direction: column; align-items: stretch; padding: 16px; border-radius: var(--radius-lg); }
  .pf-forward__img { width: 100%; height: 162.547px; }
  .pf-forward__img img { object-position: 50% 24%; }
  .pf-forward__text { width: 100%; }
  .pf-forward__count { justify-content: space-between; width: 100%; }
}

/* ---------- Dispatch: Section 5 (charter) ---------- */
.pf-charter { padding: 120px 0; color: var(--g500); }
.pf-charter__inner { display: flex; gap: 90px; align-items: center; }
.pf-charter__img { width: 627px; height: 448px; flex: 0 1 627px; border-radius: var(--radius-lg); overflow: hidden; }
.pf-charter__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.pf-charter__text { width: 562px; flex: none; min-height: 384px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.pf-charter__text .h1 { width: 421.649px; max-width: 100%; }
.pf-charter__block { display: grid; gap: 24px; }
@media (max-width: 1100px) { .pf-charter__inner { gap: 40px; } .pf-charter__text { width: 48%; flex: 1; } }
@media (max-width: 768px) {
  .pf-charter { padding: 40px 0; }
  .pf-charter__inner { flex-direction: column; align-items: stretch; gap: 32px; }
  .pf-charter__img { flex: none; width: 100%; height: 237px; }
  .pf-charter__text { width: 100%; min-height: 0; gap: 39px; }
  .pf-charter__text .h1 { width: 100%; font-size: 28px; letter-spacing: -0.01em; }
  .pf-charter__block { gap: 58px; }
  .pf-charter__block .pf-bullets { gap: 16px; }
}

/* ---------- Earnings Calculator (Figma "System/Rate Calculator") ---------- */
.pf-hero--calc { min-height: 1147px; }
.pf-hero--calc .hero__bg img { position: absolute; left: 0; top: -16.25%; height: 83.68%; }
.pf-hero--calc .hero__bg::after { background: linear-gradient(180deg, rgba(4, 22, 66,.5) 0%, rgba(4, 22, 66,0) 87.291%), linear-gradient(180deg, rgba(4, 22, 66,0) 6.5979%, #093a96 54.31%); }
.pf-calc-hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 69px; padding-bottom: 61px; }
.pf-calc-hero__text { width: 672px; max-width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 23px; justify-items: center; text-align: center; }
.pf-calc-hero__title { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; }
.pf-calc-hero__title .h-display { white-space: nowrap; }
.pf-calc-main { width: calc(100% - 2px); margin-left: 2px; margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.pf-calc-main__note { text-align: center; font-size: 16px; line-height: 1.5; }

.pf-calc { background: var(--w50); color: var(--g500); border-radius: var(--radius-lg); padding: 24px; display: flex; gap: 48px; align-items: stretch; justify-content: center; }
.pf-calc__form { width: 571px; flex: 0 1 571px; display: flex; flex-direction: column; gap: 48px; }
.pf-calc__heading { display: grid; gap: 8px; }
.pf-calc__heading p { font-size: 16px; line-height: 1.5; }
.pf-calc__fields { display: grid; gap: 34px; }
.pf-calc__row { display: flex; gap: 16px; align-items: stretch; }
.pf-calc__dims { display: flex; gap: 8px; flex: 1; align-items: stretch; }
.pf-field { display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 0 8px 8px; border-bottom: 0.5px solid var(--g100); width: 198px; flex: none; line-height: 1.5; }
.pf-field > span { font-size: 10px; color: var(--g300); }
.pf-field input, .pf-field select { border: 0; padding: 0; margin: 0; background: transparent; font-size: 14px; letter-spacing: -0.01em; line-height: 1.5; color: var(--g600); outline: none; width: 100%; min-width: 0; -moz-appearance: textfield; appearance: none; border-radius: 0; }
.pf-field input::-webkit-outer-spin-button, .pf-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pf-field input::placeholder { color: var(--g600); opacity: 1; }
.pf-field select { cursor: pointer; }
.pf-field:focus-within { border-bottom-color: var(--g500); }
.pf-field--s { width: auto; flex: 1 1 0; min-width: 0; }
.pf-calc__dims .pf-field--s:first-child { flex-basis: 113px; flex-grow: 0; width: 113px; }
.pf-calc__dims .pf-field--s:not(:first-child) { flex: 0 0 114px; }
.pf-field--full { width: 100%; }

.pf-calc__result { width: 611px; flex: 0 1 611px; background: #f5f5f5; border-radius: var(--radius-lg); padding: 22px 16px; display: flex; flex-direction: column; gap: 16px; }
.pf-calc__rhead { display: grid; gap: 4px; color: var(--g500); }
.pf-calc__rhead h2 { font-family: var(--font-alt); font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; font-weight: 500; }
.pf-calc__rhead p { font-size: 14px; line-height: 1.5; font-weight: 400; }
.pf-calc__outs { display: grid; gap: 20px; }
.pf-calc__pair { display: flex; gap: 20px; }
.pf-calc__pair .pf-out { flex: 1 1 0; min-width: 0; }
.pf-out { display: grid; gap: 5px; padding: 0 8px 8px; border-bottom: 0.5px solid var(--g100); line-height: 1.5; }
.pf-out > span { font-size: 10px; color: var(--g300); }
.pf-out output { font-size: 14px; letter-spacing: -0.01em; color: var(--g600); }
.pf-calc__fees { display: grid; }
.pf-fee { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 4px 8px; line-height: 1.5; white-space: nowrap; }
.pf-fee > span { font-size: 12px; color: var(--g300); }
.pf-fee output { font-size: 14px; letter-spacing: -0.01em; color: var(--g600); }
.pf-calc__cta { height: 41px; }
@media (max-width: 1100px) {
  .pf-calc { flex-direction: column; gap: 32px; }
  .pf-calc__form, .pf-calc__result { width: 100%; flex: none; }
}
@media (max-width: 768px) {
  .pf-hero--calc { min-height: 1747px; }
  .pf-hero--calc .hero__bg img { top: 0; height: 100%; }
  .pf-hero--calc .hero__bg::after { background: linear-gradient(180deg, rgba(4, 22, 66,.5) 0%, rgba(4, 22, 66,0) 51.66%), linear-gradient(180deg, rgba(4, 22, 66,0) 0%, rgba(3, 17, 56,.78) 28.365%, #093a96 100%); }
  .pf-hero--calc .hero__content { padding-inline: 15px; }
  .pf-calc-hero { padding-top: 0; padding-bottom: 60px; }
  .pf-calc-hero__text { min-height: 377px; align-content: center; gap: 24px; }
  .pf-calc-hero__title .h-display { white-space: normal; }
  .pf-calc-main { width: 100%; margin: 0; }
  .pf-calc { padding: 16px 8px; }
  .pf-calc__fields { gap: 16px; }
  .pf-calc__row { flex-direction: column; gap: 16px; }
  .pf-field { width: 100%; }
  .pf-calc__dims { height: 49px; }
  .pf-calc__dims .pf-field--s, .pf-calc__dims .pf-field--s:first-child, .pf-calc__dims .pf-field--s:not(:first-child) { flex: 1 1 0; width: auto; }
  .pf-calc__result { padding: 22px 12px; }
}

/* ---------- Earnings calculator: box inputs + summary (reference layout) ---------- */
.pf-calc { gap: 56px; padding: 48px 56px; border-radius: 24px; align-items: start; }
.pf-calc__form { width: auto; flex: 1 1 0; gap: 14px; }
.pf-calc__title { font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; color: var(--g800); margin-bottom: 18px; }
.pf-box { display: block; position: relative; border: 1px solid #d9dee8; border-radius: 12px; padding: 12px 16px; background: #fff; transition: border-color .2s; }
.pf-box:focus-within, .pf-box:hover { border-color: var(--blue-2); }
.pf-box > label, .pf-box > span { display: block; font-size: 12.5px; color: var(--g300); margin-bottom: 2px; }
.pf-box--select select { appearance: none; -webkit-appearance: none; width: 100%; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23041a4a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right center / 18px no-repeat; font-size: 16px; font-weight: 500; color: var(--g800); padding: 2px 28px 2px 0; cursor: pointer; outline: none; }
.pf-box--range { padding-bottom: 20px; }
.pf-box__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pf-box__val { font-size: 17px; font-weight: 600; color: var(--g800); }
.pf-box__aside { font-size: 14px; color: var(--g500); font-weight: 500; }
.pf-box__range { position: absolute; left: 16px; right: 16px; bottom: -7px; width: calc(100% - 32px); margin: 0; height: 16px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --pct: 50%; }
.pf-box__range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--blue-2) var(--pct), #d9dee8 var(--pct)); }
.pf-box__range::-moz-range-track { height: 3px; border-radius: 3px; background: #d9dee8; }
.pf-box__range::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--blue-2); }
.pf-box__range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border-radius: 50%; background: var(--blue-2); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(3, 11, 38, .3); transition: transform .15s; }
.pf-box__range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--blue-2); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(3, 11, 38, .3); }
.pf-box__range:active::-webkit-slider-thumb { transform: scale(1.2); }
.pf-box__range:focus-visible { outline: none; }
.pf-box__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(40, 115, 255, .3); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.pf-chips button { border: 1px solid #d9dee8; background: #fff; color: var(--g800); border-radius: 10px; padding: 5px 10px; font-size: 12.5px; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.pf-chips button:hover { border-color: var(--blue-2); color: var(--blue-2); }
.pf-chips button[aria-pressed="true"] { background: var(--blue-2); border-color: var(--blue-2); color: #fff; }
.pf-toggle { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; color: var(--g800); cursor: pointer; margin-top: 10px; }
.pf-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pf-toggle__ui { width: 44px; height: 26px; border-radius: 26px; background: #cfd6e3; position: relative; transition: background-color .2s; flex: none; }
.pf-toggle__ui::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.pf-toggle input:checked + .pf-toggle__ui { background: var(--blue-2); }
.pf-toggle input:checked + .pf-toggle__ui::after { transform: translateX(18px); }
.pf-toggle input:focus-visible + .pf-toggle__ui { box-shadow: 0 0 0 3px rgba(40, 115, 255, .35); }

.pf-calc__result { width: auto; flex: 1 1 0; background: transparent; padding: 70px 0 0; gap: 22px; }
.pf-kgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.pf-kgrid span { display: block; font-size: 14px; color: var(--g500); }
.pf-kgrid output { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--g800); }
.pf-kgrid output small { font-size: 14px; font-weight: 500; color: var(--g500); }
.pf-kgrid div:first-child output { color: var(--blue-2); }
.pf-stack { display: flex; gap: 3px; height: 8px; margin-top: 8px; }
.pf-stack span { border-radius: 8px; transition: flex-grow .4s ease; min-width: 4px; }
.pf-stack__card { background: var(--blue-2); }
.pf-stack__cash { background: var(--blue-3); }
.pf-stack__fee { background: var(--green); }
.pf-legend > div { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #e6e9ef; font-size: 15px; color: var(--g800); }
.pf-legend > div span { flex: 1; }
.pf-legend output { font-weight: 700; }
.pf-legend__total { border-bottom: 0 !important; }
.pf-legend__total span { color: var(--g500); font-size: 14px; }
.pf-legend__total > output { font-size: 18px; color: var(--blue-2); }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pf-dot--card { background: var(--blue-2); } .pf-dot--cash { background: var(--blue-3); } .pf-dot--fee { background: var(--green); }
.pf-compare { border: 1px solid #d9dee8; border-radius: 12px; padding: 14px 16px; }
.pf-compare__add { border: 0; background: none; padding: 0; color: var(--blue-2); font-size: 15px; font-weight: 600; cursor: pointer; border-bottom: 1.5px dashed var(--blue-2); }
.pf-compare__add span { font-size: 18px; margin-left: 4px; }
.pf-compare__body { display: grid; gap: 8px; margin-top: 12px; font-size: 14.5px; color: var(--g800); position: relative; }
.pf-compare__body label { display: flex; align-items: center; gap: 10px; color: var(--g500); }
.pf-compare__body input { width: 56px; border: 1px solid #d9dee8; border-radius: 8px; padding: 4px 8px; font: inherit; color: var(--g800); margin-right: 2px; }
.pf-compare__body s { color: var(--g300); }
.pf-compare__body b { color: var(--g800); }
.pf-compare__remove { position: absolute; right: 0; top: 2px; border: 0; background: none; color: var(--g300); cursor: pointer; font-size: 14px; }
.pf-compare__remove:hover { color: var(--g800); }
.pf-compare.is-open .pf-compare__add { display: none; }
.pf-btn { display: flex; justify-content: center; align-items: center; height: 54px; border-radius: 12px; font-size: 16px; font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.pf-btn--primary { background: var(--blue-2); color: #fff; margin-top: 4px; }
.pf-btn--primary:hover, .pf-btn--primary:focus-visible { background: var(--g700); }
.pf-btn--ghost { border: 1.5px solid var(--blue-2); color: var(--g800); margin-top: -8px; }
.pf-btn--ghost:hover, .pf-btn--ghost:focus-visible { background: var(--blue-2); color: #fff; }
@media (max-width: 900px) {
  /* Stacked: inputs, quick-pick chips and results all run the full width of the card. */
  .pf-calc { padding: 24px 16px; gap: 28px; align-items: stretch; }
  .pf-calc__form { width: 100%; flex: none; }
  .pf-chips { flex-wrap: nowrap; }
  .pf-chips button { flex: 1 1 0; min-width: 0; padding: 8px 4px; text-align: center; }
  .pf-calc__result { padding-top: 0; }
  .pf-calc__title { font-size: 26px; }
  .pf-kgrid output { font-size: 19px; }
}

/* ---------- Payout & Revenue example dashboard ---------- */
.pf-payout { background: #f6f7f9; padding: 96px 0; }
.pf-payout__card { background: #fff; border: 1px solid #e3e6ec; border-radius: 16px; padding: 48px; display: grid; gap: 28px; color: var(--g800); box-shadow: 0 1px 2px rgba(3, 11, 38, .04); }
.pf-payout__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.pf-payout__head .eyebrow { margin-bottom: 8px; }
.pf-payout__title { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.pf-payout__sub { color: var(--g300); margin-top: 6px; }
.pf-payout__filters { display: flex; gap: 10px; }
.pf-select select { appearance: none; -webkit-appearance: none; border: 1px solid #d9dee8; border-radius: 8px; padding: 7px 30px 7px 12px; font: inherit; font-size: 14px; color: var(--g800); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23546d8f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") right 9px center / 14px no-repeat; cursor: pointer; }
.pf-select select:hover { border-color: var(--blue-2); }
.pf-payout__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pf-kpi { border: 1px solid #e3e6ec; border-radius: 10px; overflow: hidden; }
.pf-kpi span { display: block; padding: 10px 14px; font-size: 14.5px; color: var(--g500); border-bottom: 1px solid #e3e6ec; background: #fbfbfc; }
.pf-kpi output { display: block; padding: 12px 14px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.pf-kpi--accent output { color: var(--blue-2); }
.pf-payout__tbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: -12px; }
.pf-payout__tbar h3 { font-size: 18px; font-weight: 500; }
.pf-payout__export { display: inline-flex; gap: 6px; align-items: center; border: 1px solid #d9dee8; background: #fff; border-radius: 8px; padding: 7px 12px; font-size: 14px; color: var(--g500); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.pf-payout__export:hover { background: var(--blue-2); border-color: var(--blue-2); color: #fff; }
.pf-payout__table { border: 1px solid #e3e6ec; border-radius: 10px; overflow-x: auto; }
.pf-payout__table table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 760px; }
.pf-payout__table th { text-align: left; font-weight: 500; color: var(--g300); background: #fbfbfc; padding: 11px 14px; border-bottom: 1px solid #e3e6ec; white-space: nowrap; }
.pf-payout__table td { padding: 11px 14px; border-bottom: 1px solid #eef0f4; white-space: nowrap; }
.pf-payout__table tr:last-child td { border-bottom: 0; }
.pf-payout__table tbody tr:hover { background: #f7f9ff; }
.pf-payout__table .num { text-align: right; }
.pf-status { display: inline-block; font-size: 12.5px; padding: 2px 8px; border-radius: 6px; border: 1px solid; }
.pf-status--paid { color: #0b7a5a; border-color: #9ee6cf; background: #ecfbf5; }
.pf-status--pending { color: #8a6100; border-color: #f3dc8a; background: #fff9e3; }
.pf-status--done { color: #1d4fbf; border-color: #b9cdfb; background: #eef3ff; }
.pf-payout__note { font-size: 13px; color: var(--g300); margin-top: -12px; }
@media (max-width: 900px) {
  .pf-payout { padding: 56px 0; }
  .pf-payout__card { padding: 20px 14px; }
  .pf-payout__head { flex-direction: column; align-items: flex-start; }
  .pf-payout__kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pf-kpi output { font-size: 18px; }
}

/* ---------- Earnings calculator page: all white (no header photo or tint) ---------- */
.pf-hero--white { background: #fff; color: var(--g800); }
.pf-hero--white .hero__bg { display: none; }
.pf-hero--white.pf-hero--calc { min-height: 0; }
.pf-hero--white .eyebrow { color: var(--g800); }
.pf-hero--white .pf-calc-hero { padding-bottom: 24px; }
.pf-hero--white .pf-calc-hero__text p { color: var(--g500); }
.pf-hero--white .pf-calc { border: 1px solid #e3e6ec; box-shadow: 0 20px 50px rgba(3, 11, 38, .06); }
.pf-hero--white .pf-calc-main__note { color: var(--g300); font-size: 14px; }
.pf-hero--white .topbar { background: var(--g800); }
/* White headers: the white button needs an outline to stand out. */
.pf-hero--white .hero__content .btn--white { border-color: #d9dee8; }
.pf-hero--white .hero__content .btn--white:is(:hover, :focus-visible) { border-color: #e3ecff; }
.page-white .pf-payout { background: #fff; padding-top: 48px; }
.page-white .contact-card { border: 1px solid #e3e6ec; }
@media (max-width: 900px) { .pf-hero--white.pf-hero--calc { min-height: 0; } }

/* Slider boxes: keep the slider inside the box with even padding (was sitting on the bottom border). */
.pf-box { padding: 14px 18px; }
.pf-box--range { padding: 14px 18px 16px; }
.pf-box--range .pf-box__range { position: static; display: block; width: 100%; margin: 12px 0 0; height: 18px; }


/* ---- src/styles/services-a.css ---- */
/* Services group A
   - Branded Booking App: Figma "Services 1/Freight Transportation" 4112:2620 / mobile 4192:3303 */

/* ---------- Photo header ---------- */
.sva-hero { display: flex; flex-direction: column; }
.sva-hero > .site-header { width: 100%; }
.sva-hero .hero__bg::after { background: linear-gradient(180deg, rgba(4, 22, 66,.5) 0%, rgba(4, 22, 66,0) 65.071%), linear-gradient(180deg, rgba(4, 22, 66,0) 11.93%, #093a96 100%); }
.sva-hero .hero__content { margin-top: auto; }
.sva-hero__row { display: flex; justify-content: space-between; gap: 40px; }
.sva-hero__text { display: grid; gap: 16px; justify-items: start; }
.sva-hero__desc { width: 450px; flex: none; display: grid; gap: 24px; justify-items: start; }

.sva-hero--app { min-height: 633px; }
.sva-hero--app .hero__content { padding-bottom: 71px; }
.sva-hero--app .sva-hero__row { align-items: flex-start; }
.sva-hero--app .sva-hero__title { width: 629.546px; max-width: 100%; }
.sva-hero--app .hero__bg { overflow: hidden; }
.sva-hero--app .hero__bg img { position: absolute; max-width: none; width: 124.1%; height: 146.58%; left: -12.05%; top: -32.23%; }

@media (max-width: 1100px) {
  .sva-hero__row { flex-direction: column; align-items: stretch !important; }
}
@media (max-width: 768px) {
  .sva-hero--app { min-height: 659px; }
  .sva-hero .hero__content { padding-bottom: 60px; }
  .sva-hero__row { gap: 24px; }
  .sva-hero__desc { width: 100%; }
  .sva-hero--app .hero__bg img { position: static; width: 100%; height: 100%; object-position: center !important; }
  .sva-hero--app .hero__bg::after { background: linear-gradient(180deg, rgba(4, 22, 66,.5) 0%, rgba(4, 22, 66,0) 100%), linear-gradient(180deg, rgba(4, 22, 66,.4) 0%, #093a96 100%); }
}

/* ======================= Branded Booking App ======================= */

/* Section 1: centred header + 4 white cards + body text */
.sva-about { background: #e6e9e9; color: var(--g500); padding: 80px 0; }
.sva-about__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; justify-items: center; }
.sva-about__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 27px; justify-items: center; text-align: center; }
.sva-about__head .h1 { width: 440px; max-width: 100%; }
.sva-about__cards { width: 100%; display: flex; gap: 8px; align-items: center; }
.sva-about__card { flex: 1 1 0; min-width: 0; background: var(--w50); border: 1px solid #e6e9e9; border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 64px; text-align: center; }
.sva-about__card > p { font-size: 14px; letter-spacing: -0.01em; }
.sva-about__body { width: 815px; max-width: 100%; text-align: center; }
.sva-about__body p + p { margin-top: 24px; }
@media (max-width: 900px) { .sva-about__cards { flex-direction: column; align-items: stretch; } }
@media (max-width: 768px) {
  .sva-about__inner { gap: 40px; }
  .sva-about__head .h1 { width: 100%; }
}

/* Sections 2 & 5: photo card + text */
.sva-info { padding: 80px 0; border-bottom: 1px solid var(--w300); color: var(--g500); }
.sva-info__inner { display: flex; gap: 64px; align-items: center; }
.sva-info__img { width: 627px; flex: none; border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.sva-info__img img { width: 100%; height: 100%; object-fit: cover; }
.sva-info__img--1 { height: 441px; }
.sva-info__img--1 img { object-position: center bottom; }
.sva-info__img--2 { height: 373px; }
.sva-info__img--2 img { position: absolute; max-width: none; width: 144.37%; height: 136.55%; left: -20.26%; top: -36.55%; }
.sva-info__text { flex: 1 1 0; min-width: 0; height: 373px; display: flex; flex-direction: column; justify-content: space-between; }
.sva-info__title { display: grid; gap: 16px; justify-items: start; }
.sva-info__text--1 .h1 { width: 523px; max-width: 100%; }
.sva-info__block { display: grid; gap: 27px; justify-items: start; }
.sva-info__text--1 .sva-info__block p { width: 519px; max-width: 100%; }
@media (max-width: 1100px) { .sva-info__img { width: 50%; } }
@media (max-width: 768px) {
  .sva-info { padding: 80px 0 81px; }
  .sva-info--rev { padding: 40px 0 41px; }
  .sva-info__inner { flex-direction: column; align-items: stretch; gap: 40px; }
  .sva-info__img { width: 100%; height: 321px !important; order: 2; }
  .sva-info__img--2 img { position: static; width: 100%; height: 100%; object-position: 46% bottom; }
  .sva-info__text { height: auto; gap: 19px; justify-content: flex-start; }
  .sva-info__text .h1 br { display: none; }
}

/* Section 3: three photo cards */
.sva-ways { padding: 80px 0; color: var(--g500); }
.sva-ways__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 60px; justify-items: center; }
.sva-ways__inner > .h-display { text-align: center; }
.sva-ways__row { width: 100%; display: flex; gap: 8px; align-items: flex-start; }
.sva-way { flex: 1 1 0; min-width: 0; background: #f5f5f5; border-radius: var(--radius); padding: 12px; display: grid; gap: 16px; }
.sva-way > p { font-size: 14px; letter-spacing: -0.01em; }
.sva-way__img { height: 160.374px; border-radius: var(--radius); overflow: hidden; }
.sva-way__img img { width: 100%; height: 100%; object-fit: cover; }
.sva-way:nth-child(1) .sva-way__img img { object-position: center 74.8%; }
.sva-way:nth-child(2) .sva-way__img img { transform: scale(1.3168); transform-origin: 21.9% 80%; }
.sva-way:nth-child(3) .sva-way__img img { object-position: center bottom; }
@media (max-width: 900px) { .sva-ways__row { flex-direction: column; align-items: stretch; } }
@media (max-width: 768px) { .sva-ways__inner { gap: 40px; } .sva-ways__inner > .h-display { font-size: 40px; } }

/* Section 4: tabs */
.sva-trips { background: var(--w50); color: var(--g500); padding: 83px 0; }
.sva-trips__head { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--w300); }
.sva-trips__head .h1 { width: 417.31px; max-width: 100%; }
.sva-trips__tabs { display: flex; gap: 8px; }
.sva-trips__tabs button { height: 45px; min-width: 132px; padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--w50); background: var(--w100); color: var(--g800); font-size: 14px; letter-spacing: -0.01em; line-height: 1.5; white-space: nowrap; cursor: pointer; }
/* Same tab group as the homepage: grey idle, white with a navy outline when selected. */
.sva-trips__tabs button[aria-selected="true"] { background: var(--w50); border-color: var(--g500); color: var(--g500); }
.sva-trips__panel { display: flex; gap: 29px; align-items: flex-start; padding-top: 40px; }
.sva-trips__img { width: 636.521px; flex: none; height: 269px; border-radius: var(--radius); overflow: hidden; }
.sva-trips__img img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.sva-trips__text { flex: 1 1 0; min-width: 0; display: grid; gap: 29px; }
.sva-trips__points { display: grid; gap: 8px; }
.sva-trips__point { background: var(--w100); border-radius: var(--radius); padding: 12px 16px; display: grid; gap: 4px; color: var(--g500); }
.sva-trips__point-title { color: var(--g800); font-weight: 500; }
@media (max-width: 1100px) {
  .sva-trips__head { flex-direction: column; align-items: stretch; gap: 24px; }
  .sva-trips__img { width: 50%; }
}
@media (max-width: 768px) {
  .sva-trips__head .h1 { width: 100%; }
  .sva-trips__tabs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 45px 45px; grid-auto-flow: column; }
  .sva-trips__tabs button { min-width: 0; width: 100%; }
  .sva-trips__panel { flex-direction: column; align-items: stretch; }
  .sva-trips__img { width: 100%; }
}

/* Grid gotcha: keep single-column grids from sizing to max-content on narrow screens */
.sva-hero__text, .sva-hero__desc, .sva-info__title, .sva-info__block, .sva-way, .sva-trips__text, .sva-trips__points { grid-template-columns: minmax(0, 1fr); }


/* ---- src/styles/services-b.css ---- */
/* services-b: Figma "Services 3/Last-Mile Delivery" (4192:3288 / 4192:3306) and
   "Services 4/Supply Chain Management" (4192:3291 / 4192:3307). */

/* ---------- Photo headers ---------- */
.svb-hero .hero__bg::after { background: linear-gradient(180deg, rgba(4, 22, 66,.5) 0%, rgba(4, 22, 66,0) 65.071%), linear-gradient(180deg, rgba(4, 22, 66,0) 11.93%, #093a96 100%); }
.svb-hero--delivery { min-height: 761px; }
.svb-hero--delivery .hero__content { padding-top: 357px; padding-bottom: 89px; }
.svb-hero--fleet { min-height: 633px; }
.svb-hero--fleet .hero__content { padding-top: 267px; padding-bottom: 51px; }
.svb-hero__row { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.svb-hero--fleet .svb-hero__row { align-items: flex-end; }
.svb-hero__text { display: grid; gap: 16px; justify-items: start; }
.svb-hero__text .h-display { padding-bottom: 1.1em; } /* Figma text box carries an empty third line */
.svb-hero--delivery .svb-hero__text { width: 830px; }
.svb-hero--fleet .svb-hero__text .h-display { width: 630px; }
.svb-hero__desc { width: 450px; flex: none; display: grid; gap: 24px; justify-items: start; }

/* ---------- Shared bits ---------- */
.svb-rule { border: 0; margin: 0; height: 0; }
.svb-rule--mid { border-top: 1px solid var(--g100); }
.svb-rule--light { border-top: 1px solid var(--w300); }
.svb-d1 .eyebrow, .svb-d3 .eyebrow, .svb-d4 .eyebrow, .svb-f2 .eyebrow, .svb-f3 .eyebrow, .svb-f4 .eyebrow { color: var(--g500); }

/* ---------- Delivery / Section 1 ---------- */
.svb-d1 { background: #e6e9e9; color: var(--g500); padding: 80px 0; }
.svb-d1 .container { display: grid; gap: 56px; }
.svb-d1__head { display: grid; gap: 27px; justify-items: start; }
.svb-d1__content { display: flex; justify-content: space-between; gap: 40px; width: 100%; }
.svb-d1__content .h2 { width: 306px; flex: none; }
.svb-d1__body { width: 636px; font-family: var(--font-alt); font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; }
.svb-d1__body p + p { margin-top: 1.5em; }
.svb-d1__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.svb-stat { background: var(--g600); color: var(--w50); border-radius: var(--radius); padding: 24px; height: 242px; display: flex; flex-direction: column; justify-content: space-between; }
.svb-stat__icon { width: 40px; height: 40px; border-radius: var(--radius); background: var(--w50); border: 1px solid var(--w200); box-shadow: 0 0 1.108px rgba(0,0,0,.25); display: grid; place-items: center; }
.svb-stat__text { display: grid; gap: 8px; }
.svb-stat__text h3 { font-family: var(--font-alt); font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; font-weight: 500; }
.svb-stat__text p { font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; min-height: 63px; }

/* ---------- Delivery / Section 2 (tabs) ---------- */
.svb-d2 { padding: 80px 0; color: var(--g500); }
.svb-d2 .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; justify-items: center; }
.svb-d2__intro { width: 666px; max-width: 100%; display: grid; gap: 16px; text-align: center; }
.svb-d2__steps { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; }
.svb-tabs { width: 1063px; max-width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.svb-tabs button { height: 56px; display: flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--radius); border: 1px solid transparent; background: var(--w100); color: var(--g500); font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; cursor: pointer; text-align: left; }
.svb-tabs button img { flex: none; }
.svb-tabs button[aria-selected="true"] { background: #eaf7ff; border-color: var(--g500); }
.svb-tabs button:hover { filter: brightness(0.98); }
.svb-job { width: 100%; height: 317px; display: flex; gap: 29px; padding: 16px; background: var(--w100); border: 1px solid #e6e9e9; border-radius: var(--radius); }
.svb-job__details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.svb-job__head { display: grid; gap: 12px; }
.svb-job__title { display: grid; gap: 8px; justify-items: start; }
.svb-badge { display: inline-block; background: #01b6ff; color: var(--g600); border-radius: 6px; padding: 2px 6px; font-size: 12px; line-height: 1.5; text-transform: uppercase; }
.svb-job__title h3 { font-size: 24px; line-height: 1.1; letter-spacing: -0.01em; font-weight: 500; }
.svb-job__head > p { font-size: 16px; line-height: 1.5; }
.svb-job__grid { flex: 1; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.svb-job__grid > div { background: var(--w50); border-radius: var(--radius); padding: 7px 16px; display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.5; }
.svb-job__grid dt { font-size: 12px; color: var(--g500); }
.svb-job__grid dd { margin: 0; font-size: 14px; letter-spacing: -0.01em; color: #a1a1a1; }
.svb-job__viz { width: 608.5px; flex: none; background: #fff; border-radius: var(--radius); display: grid; place-items: center; }
.svb-job__status { display: grid; gap: 8px; justify-items: center; text-align: center; }
.svb-job__status p { display: grid; gap: 2px; line-height: 1.5; }
.svb-job__status b { font-weight: 500; font-size: 12px; color: var(--g500); }
.svb-job__status span { font-size: 14px; letter-spacing: -0.01em; color: #a1a1a1; }

/* ---------- Delivery / Section 3 ---------- */
.svb-d3 { padding: 40px 0 100px; color: var(--g500); }
.svb-d3 .container { display: grid; gap: 40px; }
.svb-d3__hero { display: flex; gap: 57px; align-items: stretch; }
.svb-d3__text { width: 636px; flex: none; display: grid; gap: 24px; justify-items: start; align-self: flex-end; }
.svb-d3__content { display: grid; gap: 48px; }
.svb-d3__body p + p, .svb-split__body p + p, .svb-f4__body p + p { margin-top: 1.5em; }
.svb-d3__body a, .svb-d4 a, .svb-split a { color: inherit; }
.svb-d3__media { flex: 1; min-width: 0; border-radius: var(--radius); overflow: hidden; min-height: 346px; }
.svb-d3__media, .svb-d4__media, .svb-f4__media { position: relative; }
.svb-d3__media img, .svb-d4__media img, .svb-f4__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svb-d3__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: center; }
.svb-mini { background: var(--w100); border-radius: var(--radius); padding: 12px 16px; min-height: 133px; display: flex; flex-direction: column; justify-content: center; gap: 24px; color: var(--g600); font-size: 12px; line-height: 1.5; }
.svb-mini--value { gap: 12px; }
.svb-mini__big { font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; color: var(--blue-2); }
.svb-mini__note { max-width: 352px; }
.svb-mini__progress { display: grid; gap: 8px; }
.svb-mini__progress .svb-mini__note { max-width: 292px; }
.svb-bar { height: 8px; border-radius: 20px; background: #eaf7ff; overflow: hidden; }
.svb-bar span { display: block; height: 100%; width: 53.62%; border-radius: 20px; background: var(--blue-2); }
.svb-chips { display: grid; gap: 8px; justify-items: start; }
.svb-chips > div { display: flex; flex-wrap: wrap; gap: 8px; }
.svb-chips span { background: #fff; border-radius: var(--radius); padding: 4px 8px; white-space: nowrap; }

/* ---------- Delivery / Section 4 ---------- */
.svb-d4 { padding: 20px 0 100px; color: var(--g500); }
.svb-d4__inner { display: flex; justify-content: center; gap: 124px; }
.svb-d4__text { width: 530px; flex: none; display: grid; gap: 24px; justify-items: start; align-self: center; }
.svb-d4__content { display: grid; gap: 24px; }
.svb-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.svb-bullets li { display: flex; align-items: center; gap: 8px; }
.svb-bullets li::before { content: ''; width: 6.446px; height: 6.446px; flex: none; background: var(--g500); }
.svb-d4__media { width: 626px; flex: none; min-height: 338px; border-radius: var(--radius); overflow: hidden; background: #d9d9d9; }

/* ---------- Fleet / Section 1 (capabilities) ---------- */
.svb-flow { display: flex; flex-direction: column; }
.svb-f1 { background: var(--g700); color: var(--w50); padding: 65px 0; }
.svb-f1__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 39px; justify-items: center; }
.svb-f1__head { display: grid; gap: 24px; justify-items: center; text-align: center; }
.svb-caps { width: 100%; gap: 24px; }
.svb-caps .carousel__track.svb-caps__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 8px; margin: 0; border: 1px solid var(--g400); border-radius: var(--radius); overflow: hidden; scroll-snap-type: none; }
.svb-cap { background: var(--g400); border-radius: var(--radius); height: 252px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; scroll-snap-align: start; }
.svb-cap h3 { font-family: var(--font-alt); font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; font-weight: 500; }
.svb-cap p { font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; }
.svb-caps__nav { display: none; }
.svb-caps .carousel__arrows button { background: var(--g400); border-left-color: var(--g900); }
.svb-caps .carousel__arrows button + button { background: transparent; border-left-color: var(--g400); }
.svb-caps .carousel__arrows button:disabled { cursor: default; }
.svb-caps .carousel__dots span { background: var(--w300); }
.svb-caps .carousel__dots span.on { background: var(--g400); }
.svb-f1__desc { width: 542px; max-width: 100%; text-align: center; }

/* ---------- Fleet / Sections 2 + 3 (split text + panel) ---------- */
.svb-f2 { background: #e6e9e9; padding: 100px 0; color: var(--g500); }
.svb-f3 { padding: 100px 0; color: var(--g500); }
.svb-split { display: flex; justify-content: center; align-items: center; gap: 56px; }
.svb-split__text { width: 636px; flex: none; display: grid; gap: 24px; justify-items: start; }
.svb-split__content { display: grid; gap: 48px; }
.svb-panel { width: 587px; flex: none; height: 322px; padding: 26px 13px; border-radius: var(--radius); display: flex; flex-direction: column; gap: 24px; }
.svb-panel--dark { background: var(--g500); }
.svb-panel--light { background: #e6e9e9; }
.svb-panel__head { display: flex; gap: 8px; align-items: center; }
.svb-panel__icon { width: 40px; height: 40px; flex: none; border-radius: 7.273px; border: 0.909px solid; box-shadow: 0 0 1.007px rgba(0,0,0,.25); display: grid; place-items: center; }
.svb-panel--dark .svb-panel__icon { background: #cdeeff; border-color: #01b6ff; }
.svb-panel--light .svb-panel__icon { background: #f5f5f5; border-color: var(--w300); }
.svb-panel__title { font-size: 16px; line-height: 1.5; }
.svb-panel__sub { font-size: 12px; line-height: 1.5; }
.svb-panel--dark .svb-panel__title { color: var(--w50); }
.svb-panel--dark .svb-panel__sub { color: #a1a1a1; }
.svb-panel--light .svb-panel__sub { color: var(--g400); }
.svb-panel__rows { flex: 1; display: grid; grid-auto-rows: 1fr; gap: 9px; }
.svb-panel__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 7px 16px; border-radius: var(--radius); line-height: 1.5; white-space: nowrap; }
.svb-panel__row span { font-size: 12px; }
.svb-panel__row b { font-weight: 500; font-size: 14px; letter-spacing: -0.01em; }
.svb-panel--dark .svb-panel__row { background: var(--g400); color: var(--w50); }
.svb-panel--dark .svb-panel__hl { color: var(--green); }
.svb-panel--light .svb-panel__row { background: var(--w50); color: var(--g500); }
.svb-panel--light .svb-panel__row b { color: var(--g800); }
.svb-panel--light .svb-panel__row b.svb-panel__hl { color: var(--blue-2); }

/* ---------- Fleet / Section 4 ---------- */
.svb-f4 { border-top: 1px solid #e6e9e9; padding: 80px 0 100px; color: var(--g500); }
.svb-f4 .container { display: grid; gap: 50px; }
.svb-f4__text { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.svb-f4__title { width: 550px; display: grid; gap: 24px; justify-items: start; }
.svb-f4__body { width: 451px; flex: none; }
.svb-f4__media { height: 567.6px; border-radius: var(--radius); overflow: hidden; }

/* ---------- Narrower desktops / tablets ---------- */
@media (max-width: 1100px) {
  .svb-hero__row { flex-direction: column; align-items: flex-start !important; }
  .svb-hero--delivery .svb-hero__text, .svb-hero--fleet .svb-hero__text .h-display { width: 100%; }
  .svb-hero__text .h-display { padding-bottom: 0; }
  .svb-hero__desc { width: 100%; max-width: 560px; }
  .svb-hero--delivery .hero__content, .svb-hero--fleet .hero__content { padding-top: 160px; padding-bottom: 60px; }
  .svb-d1__body { width: auto; flex: 1; }
  .svb-job { flex-direction: column; height: auto; }
  .svb-job__viz { width: 100%; height: 277px; }
  .svb-d3__hero, .svb-d4__inner, .svb-split, .svb-f4__text { flex-direction: column; align-items: stretch; gap: 24px; }
  .svb-d3__text, .svb-d4__text, .svb-split__text, .svb-f4__title, .svb-f4__body, .svb-panel, .svb-d4__media { width: 100%; }
  .svb-d3__media { min-height: 0; height: 346px; flex: none; }
  .svb-split--reverse > .svb-panel { order: 2; }
  .svb-split { gap: 40px; }
  .svb-d3__cards { grid-template-columns: minmax(0, 1fr); }
  .svb-caps .carousel__track.svb-caps__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobile (Figma 402 frames) ---------- */
@media (max-width: 768px) {
  .svb-hero .hero__bg::after { background: linear-gradient(180deg, rgba(4, 22, 66,.5) 0%, rgba(4, 22, 66,0) 51.66%), linear-gradient(180deg, rgba(4, 22, 66,.4) 0%, #093a96 100%); }
  .svb-hero--delivery, .svb-hero--fleet { min-height: 0; }
  .svb-hero--delivery .hero__bg img { object-position: 33.6% center !important; }
  .svb-hero--delivery .hero__content { padding-top: 59px; padding-bottom: 60px; }
  .svb-hero__row { gap: 40px; }
  .svb-hero--fleet .hero__content { padding-top: 59px; padding-bottom: 60px; }
  .svb-hero--fleet .svb-hero__row { min-height: 402px; justify-content: space-between; gap: 32px; }
  .svb-br { display: none; }

  .svb-d1 { padding: 60px 0; }
  .svb-d1 .container { gap: 32px; }
  .svb-d1__content { flex-direction: column; gap: 24px; }
  .svb-d1__cards { grid-template-columns: minmax(0, 1fr); }
  .svb-stat { height: 210px; padding: 24px 16px; }

  .svb-d2 .container { gap: 32px; }
  .svb-d2__intro .h1 { max-width: 330px; margin-inline: auto; }
  .svb-tabs { grid-template-columns: 1fr 1fr; }
  .svb-tabs button { height: 50px; }
  .svb-job { padding: 13px; gap: 16px; }
  .svb-badge { font-size: 10px; }
  .svb-job__grid { grid-template-columns: minmax(0, 1fr); }
  .svb-job__grid > div { min-height: 59px; }

  .svb-d3 { padding: 0 0 80px; }
  .svb-d3 .container { gap: 24px; }
  .svb-d3__content { gap: 16px; }
  .svb-d3__cards { gap: 14px; }

  .svb-d4 { padding: 0 0 80px; }
  .svb-d4__media { min-height: 0; height: 338px; }
  .svb-bullets li { align-items: center; }

  .svb-f2 { order: 1; padding: 80px 0; }
  .svb-f1 { order: 2; padding: 80px 0; }
  .svb-f3, .svb-f4 { order: 3; }
  .svb-split__content { gap: 32px; }
  .svb-f3 .svb-split__content { gap: 48px; }
  .svb-split--reverse > .svb-panel { order: 2; }
  .svb-f3 { padding: 80px 0; }
  .svb-f1__inner { gap: 34px; }
  .svb-f1__head { gap: 16px; }
  .svb-caps .carousel__track.svb-caps__track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(var(--gutter) * -1); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
  .svb-cap { flex: 0 0 259.25px; }
  .svb-caps__nav { display: flex; }
  .svb-f1__desc { font-family: var(--font-alt); font-size: 18px; letter-spacing: -0.03em; }
  .svb-f4 { padding: 81px 0 100px; }
  .svb-f4 .container { gap: 40px; }
  .svb-f4__media { height: 303px; }
}