/* SureMile — shared styles */

:root {
  /* Palette: Forest (default) */
  --ink: #0E1116;
  --ink-2: #3A4049;
  --ink-3: #6B7078;
  --paper: #F6F4EF;
  --paper-2: #ECE8DF;
  --paper-3: #E3DED2;
  --steel: #C7C4BC;
  --steel-2: #A8A49A;
  --brand: #1F3A2E;
  --brand-ink: #0F2019;
  --brand-soft: #2D5341;
  --hazard: #FF5A1F;
  --hazard-ink: #C13C10;
  --signal: #FFD23F;
  --ok: #2F8F5A;

  /* Type */
  --f-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Radius */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 20px;

  --maxw: 1240px;
}

/* Palette: Navy */
[data-palette="navy"] {
  --paper: #F7F7F5;
  --paper-2: #EDEEEA;
  --paper-3: #E1E3DE;
  --steel: #C7CACF;
  --brand: #0A2540;
  --brand-ink: #061828;
  --brand-soft: #183A5E;
  --hazard: #FF5A1F;
  --signal: #FFC233;
}

/* Palette: Editorial black */
[data-palette="black"] {
  --paper: #F4F2EC;
  --paper-2: #E8E4DA;
  --paper-3: #DCD7C9;
  --steel: #BBB7AD;
  --brand: #111111;
  --brand-ink: #000000;
  --brand-soft: #2A2A2A;
  --hazard: #FF5A1F;
  --signal: #FFD23F;
}

/* Palette: Trucker-utility — dark dashboard, high-vis amber */
[data-palette="utility"] {
  --ink: #F5F2EA;
  --ink-2: #C7C2B6;
  --ink-3: #8C887E;
  --paper: #0E1014;
  --paper-2: #16191F;
  --paper-3: #1E232B;
  --steel: #2A2F38;
  --steel-2: #3D434E;
  --brand: #FFB800;
  --brand-ink: #E0A000;
  --brand-soft: #FFCD3F;
  --hazard: #FF5A1F;
  --hazard-ink: #C13C10;
  --signal: #FFE34D;
  --ok: #4DD17A;
}

/* Palette: Working-class — stained paper, varsity workwear */
[data-palette="workwear"] {
  --ink: #1B130B;
  --ink-2: #4A3A28;
  --ink-3: #7A6A55;
  --paper: #E8DCC1;
  --paper-2: #DCCEAE;
  --paper-3: #CFBE96;
  --steel: #B6A581;
  --steel-2: #91826A;
  --brand: #8B2B0F;
  --brand-ink: #5C1C0A;
  --brand-soft: #B0411E;
  --hazard: #C84418;
  --signal: #F2B538;
  --ok: #4D7A36;
}

/* Palette: Diesel-modern — stark black + chrome */
[data-palette="diesel"] {
  --ink: #EAEAEA;
  --ink-2: #A8A8A8;
  --ink-3: #6E6E6E;
  --paper: #050505;
  --paper-2: #0E0E0E;
  --paper-3: #181818;
  --steel: #2A2A2A;
  --steel-2: #404040;
  --brand: #DC2626;
  --brand-ink: #991B1B;
  --brand-soft: #EF4444;
  --hazard: #DC2626;
  --signal: #C0C0C0;
  --ok: #34D399;
}

/* Diamond plate texture for utility palette */
[data-palette="utility"] body {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.015) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px;
}

/* Live-data ticker */
.live-ticker {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--steel);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  height: 36px;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
}
[data-palette="utility"] .live-ticker { background: #000; color: var(--brand); border-bottom-color: var(--brand); }
[data-palette="diesel"] .live-ticker { background: #000; color: var(--brand); border-bottom-color: var(--brand); }
[data-palette="workwear"] .live-ticker { background: var(--ink); color: var(--paper); }
.live-ticker__inner {
  display: flex;
  white-space: nowrap;
  animation: ticker-scroll 80s linear infinite;
  padding-left: 100%;
}
.live-ticker__item {
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}
.live-ticker__item::after {
  content: "•";
  color: var(--hazard);
  margin-left: 28px;
  opacity: 0.6;
}
.live-ticker__label { color: var(--ink-3); font-weight: 500; }
.live-ticker__value { color: var(--paper); font-weight: 600; }
.live-ticker__delta--up { color: var(--ok); }
.live-ticker__delta--down { color: var(--hazard); }
.live-ticker .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  animation: live-pulse 1.5s ease-in-out infinite;
  margin-right: 6px;
}
@keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes ticker-scroll { to { transform: translateX(-100%); } }

/* ----------------------------------------------------------------
   Page hero — photographic backdrop for sub-pages
   Add `.page-hero` to a sub-page hero <section>, plus a modifier
   like `.page-hero--truck-stop` to pick the image. The hero's own
   class (e.g. .about-hero) keeps its layout/padding rules.
   Card treatment mirrors the home page `.hero-photo__card`.
---------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 4px solid var(--brand);
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.page-hero::before {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.92) contrast(1.02);
}
.page-hero::after {
  background:
    linear-gradient(90deg, rgba(14,16,20,0.55) 0%, rgba(14,16,20,0.25) 35%, rgba(14,16,20,0.05) 65%, transparent 100%),
    linear-gradient(180deg, rgba(14,16,20,0.10) 0%, transparent 40%, rgba(14,16,20,0.35) 100%);
}
.page-hero > .wrap { position: relative; z-index: 1; }

/* Image variants */
.page-hero--truck-stop::before { background-image: url('brand/bg-truck-stop-driver.jpg'); background-position: center 40%; }
.page-hero--driver-phone::before { background-image: url('brand/bg-driver-phone.jpg'); background-position: center 35%; }
.page-hero--in-cab::before { background-image: url('brand/bg-incab-driver.jpg'); background-position: center 45%; }

/* Content card — same recipe as .hero-photo__card on the home page */
.page-hero__plate {
  display: block;
  max-width: 880px;
  background: linear-gradient(135deg, rgba(10,13,18,0.22), rgba(10,13,18,0.08));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  padding: var(--s-7) var(--s-6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 24px 64px -16px rgba(0,0,0,0.55),
    0 4px 12px rgba(0,0,0,0.3);
  position: relative;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  /* Single global rule: every text node inside the card is white. */
  color: var(--paper);
}
.page-hero__plate::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,184,0,0.55), transparent);
  pointer-events: none;
}
@media (max-width: 720px) {
  .page-hero__plate { padding: var(--s-5); }
}

/* Force every text/inline element inside the card to white. One rule,
   no per-component overrides. Use !important so inline `style` attrs
   on .display, .lede, etc. (which carry margin/max-width but no color)
   don't accidentally lose specificity to .display class rules. */
.page-hero__plate,
.page-hero__plate * {
  color: var(--paper) !important;
}
/* Links and explicit accents inside the card pop in brand yellow */
.page-hero__plate a:not(.topic),
.page-hero__plate .eyebrow,
.page-hero__plate .kind,
.page-hero__plate .hl {
  color: var(--brand) !important;
}
.page-hero__plate strong,
.page-hero__plate b {
  color: var(--paper) !important;
}

/* Utility palette — same rule, paper is dark there so swap to a fixed
   light value to keep contrast against the photo. */
[data-palette="utility"] .page-hero__plate,
[data-palette="utility"] .page-hero__plate * {
  color: #F5F2EA !important;
}
[data-palette="utility"] .page-hero__plate a:not(.topic),
[data-palette="utility"] .page-hero__plate .eyebrow,
[data-palette="utility"] .page-hero__plate .kind,
[data-palette="utility"] .page-hero__plate .hl {
  color: var(--brand) !important;
}

/* Topic chips inside the hero plate — let their own rules win */
.page-hero__plate .topic { color: var(--ink-2) !important; }
.page-hero__plate .topic.on { color: var(--paper) !important; }
[data-palette="utility"] .page-hero__plate .topic { color: rgba(245,242,234,0.7) !important; }
[data-palette="utility"] .page-hero__plate .topic.on { color: #0A0D12 !important; background: var(--brand) !important; border-color: var(--brand) !important; }

/* On utility palette (dark), strengthen the scrim a touch */
[data-palette="utility"] .page-hero::after {
  background:
    linear-gradient(180deg, rgba(8,10,14,0.65) 0%, rgba(8,10,14,0.28) 30%, rgba(8,10,14,0.20) 60%, rgba(8,10,14,0.70) 100%),
    linear-gradient(90deg, rgba(8,10,14,0.92) 0%, rgba(8,10,14,0.70) 40%, rgba(8,10,14,0.40) 70%, rgba(8,10,14,0.22) 100%);
}

/* Photographic hero placeholder */
.hero-photo {
  position: relative;
  width: 100%;
  min-height: 620px;
  /* Fallback shown while the photo loads (or if it fails) — approximates the
     truck shot's tonal range: deep dusk sky up top, warm highway glow lower-right. */
  background:
    radial-gradient(ellipse 60% 40% at 85% 70%, rgba(255,184,0,0.25), transparent 70%),
    radial-gradient(ellipse 80% 50% at 20% 30%, rgba(40,55,80,0.45), transparent 70%),
    linear-gradient(180deg, #1a1d24 0%, #0E1014 55%, #1a130a 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #F5F2EA;
  border-bottom: 4px solid var(--brand);
}
.hero-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
  z-index: 0;
}
.hero-photo::before {
  /* darken left side (under headline card) + keep truck + sunset visible on the right */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(14,16,20,0.55) 0%, rgba(14,16,20,0.25) 35%, rgba(14,16,20,0.05) 65%, transparent 100%),
    linear-gradient(180deg, rgba(14,16,20,0.10) 0%, transparent 40%, rgba(14,16,20,0.35) 100%);
  pointer-events: none;
}
.hero-photo::after { content: none; }
.hero-photo__placeholder-tag { display: none; }
.hero-photo__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 0 0 var(--s-7);
  padding: var(--s-6) var(--s-5) var(--s-8);
}
@media (max-width: 900px) {
  .hero-photo__inner {
    margin: 0;
    padding: var(--s-5);
  }
}
.hero-photo__card {
  max-width: 1400px;
  background: linear-gradient(135deg, rgba(10,13,18,0.12), rgba(10,13,18,0.03));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  padding: var(--s-7) var(--s-6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 24px 64px -16px rgba(0,0,0,0.55),
    0 4px 12px rgba(0,0,0,0.3);
  position: relative;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.hero-photo__card::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,184,0,0.55), transparent);
  pointer-events: none;
}
@media (max-width: 720px) {
  .hero-photo__card { padding: var(--s-5); }
}
.hero-photo h1 {
  font-family: var(--f-display);
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s-5);
  text-wrap: balance;
  font-weight: 700;
  min-height: 2.6em;
}
.hero-photo h1 .accent { color: var(--brand); }
.hero-photo .hero-photo__sub { font-size: 17px; max-width: 50ch; opacity: 0.85; margin-bottom: var(--s-6); min-height: 4em; }
.hero-photo__chips {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: var(--s-5);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-photo__chip {
  border: 1px solid rgba(245,242,234,0.3);
  padding: 8px 14px;
  border-radius: 100px;
  display: inline-flex; gap: 8px; align-items: center;
}
.hero-photo__chip--accent { background: var(--brand); color: #0E1014; border-color: var(--brand); }
@media (max-width: 720px) {
  .hero-photo { min-height: 480px; }
}

/* Photo hero — carousel grid (text + screenshot) */
.ph-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: var(--s-7);
  align-items: center;
  /* fixed height keeps controls anchored as content swaps */
  min-height: 480px;
  margin-bottom: var(--s-6);
}
@media (max-width: 900px) {
  .ph-grid { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .ph-shot { display: none !important; }
}
.ph-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 100%;
  position: relative;
}
.ph-text > * {
  transition: opacity .4s ease, transform .4s ease;
}
.ph-fading .ph-text > * {
  opacity: 0;
  transform: translateY(8px);
}
.ph-shot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  perspective: 1200px;
}
.ph-shot__frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .4s ease, transform .4s ease;
}
.ph-fading .ph-shot__frame { opacity: 0; transform: translateY(8px) scale(0.98); }

/* Wide layout for the all-in-one "wow" summary slide — give the visual more room */
.ph-grid.is-wide {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

/* Duo composition — mobile + web side by side, with pillar callouts */
.ph-duo {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.ph-duo__web {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) rotate(-1.5deg);
  width: 78%;
  border-radius: 10px;
  background: linear-gradient(180deg, #14171d, #0a0c11);
  border: 1.5px solid rgba(255,255,255,0.16);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55), 0 8px 20px -8px rgba(0,0,0,0.45);
  overflow: hidden;
}
.ph-duo__web .ph-web__chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: #11141a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ph-duo__web .ph-web__body { padding: 12px 14px; }
.ph-duo__phone {
  position: absolute;
  right: 2%; top: 50%;
  transform: translateY(-50%) rotate(4deg);
  width: 150px;
  height: 300px;
  border-radius: 24px;
  background: linear-gradient(180deg, #1a1d24, #0e1014);
  border: 2px solid rgba(255,255,255,0.18);
  padding: 6px;
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04) inset;
  overflow: hidden;
  z-index: 2;
}
.ph-duo__phone .ph-phone__notch {
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 14px;
  background: #0a0c11; border-radius: 8px;
  z-index: 3;
}
.ph-duo__phone .ph-phone__screen {
  width: 100%; height: 100%;
  border-radius: 18px;
  background: var(--ink);
  overflow: hidden;
  position: relative;
}
.ph-duo__pills {
  position: absolute;
  left: 50%; bottom: -20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 6px;
  z-index: 3;
}
.ph-duo__pill {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10,12,17,0.92);
  border: 1px solid rgba(255,255,255,0.18);
  color: #f4f4f0;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.ph-duo__pill--gold {
  background: var(--brand);
  color: #0E1014;
  border-color: var(--brand);
  font-weight: 700;
}
.ph-duo__pill .num {
  font-weight: 700;
  margin-right: 6px;
  opacity: 0.55;
}
.ph-duo__pill--gold .num { opacity: 0.7; }

@media (max-width: 1100px) {
  .ph-duo__phone { width: 130px; height: 260px; }
  .ph-duo__pill { font-size: 9px; padding: 5px 8px; }
}

/* Mobile phone frame */
.ph-phone {
  width: 180px;
  height: 360px;
  border-radius: 28px;
  background: linear-gradient(180deg, #1a1d24, #0e1014);
  border: 2px solid rgba(255,255,255,0.18);
  padding: 6px;
  box-shadow:
    0 24px 48px -15px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.15);
  position: relative;
  margin-top: 0px;
  transform: rotate(-3deg) translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transform-origin: 50% 50.1%;
  -webkit-font-smoothing: subpixel-antialiased;
}
.ph-phone__screen {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: var(--paper);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.ph-phone__notch {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 16px;
  background: #0e1014;
  border-radius: 8px;
  z-index: 5;
}

/* Web/desktop frame */
.ph-web {
  width: 100%;
  max-width: 460px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.15);
  overflow: hidden;
  transform: rotate(-1deg);
}
.ph-web__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: #1a1d24;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ph-web__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
}
.ph-web__dot:nth-child(1) { background: #ff5f57; }
.ph-web__dot:nth-child(2) { background: #febc2e; }
.ph-web__dot:nth-child(3) { background: #28c840; }
.ph-web__url {
  margin-left: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(245,242,234,0.6);
  flex: 1;
  text-align: center;
  text-shadow: none;
}
.ph-web__body {
  padding: 14px;
  background: var(--paper);
  color: var(--ink);
  text-shadow: none;
  min-height: 280px;
  font-family: var(--f-body);
}

/* Screen content variants */
.ph-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-shadow: none;
  font-family: var(--f-body);
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
}
.ph-screen__hdr {
  padding: 36px 14px 10px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ph-screen__hdr--lite {
  background: var(--paper);
  color: var(--ink-3);
  border-bottom: 1px solid var(--steel);
}
.ph-screen__body { padding: 12px 14px; flex: 1; overflow: hidden; }
.ph-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--steel);
}
.ph-row:last-child { border-bottom: 0; }
.ph-row__lbl { font-family: var(--f-mono); font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.ph-row__val { font-family: var(--f-display); font-weight: 600; color: var(--ink); }
.ph-row__val--gold { color: var(--brand); }

.ph-shot__caption {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,242,234,0.55);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Photo hero — carousel chrome */
.ph-eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,242,234,0.75);
  margin-bottom: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 18px;
}
.ph-eyebrow__dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--brand);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--brand);
  flex: 0 0 auto;
}
.ph-eyebrow__txt {
  transition: opacity .35s ease;
}
.hero-photo h1, .hero-photo__sub {
  transition: opacity .35s ease, transform .35s ease;
}
.ph-fading h1,
.ph-fading .hero-photo__sub,
.ph-fading .ph-eyebrow__txt {
  opacity: 0;
  transform: translateY(6px);
}

.ph-controls {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(245,242,234,0.12);
}
.ph-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(245,242,234,0.25);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  color: rgba(245,242,234,0.85);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
  flex: 0 0 auto;
}
.ph-arrow:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #0E1014;
}
.ph-arrow:active { transform: scale(0.94); }
.ph-arrow .material-symbols-outlined { font-size: 20px; }

.ph-dots {
  display: flex;
  gap: 8px;
  flex: 1 1 auto;
}
.ph-dot {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: rgba(245,242,234,0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, width .25s ease;
  flex: 0 0 auto;
}
.ph-dot:hover { background: rgba(245,242,234,0.55); }
.ph-dot.is-active {
  background: var(--brand);
  width: 44px;
}

.ph-counter {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(245,242,234,0.6);
  flex: 0 0 auto;
  min-width: 44px;
  text-align: right;
}

.ph-progress {
  margin-top: var(--s-3);
  height: 1px;
  background: rgba(245,242,234,0.08);
  overflow: hidden;
  border-radius: 1px;
}
.ph-progress__bar {
  height: 100%;
  background: var(--brand);
  width: 0%;
  transition: width .12s linear;
}

@media (max-width: 720px) {
  .ph-arrow { width: 36px; height: 36px; }
  .ph-counter { display: none; }
}

/* Watch demo link inside the hero card */
.ph-demo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--s-5);
  padding: 8px 14px 8px 8px;
  border-radius: 100px;
  background: rgba(245,242,234,0.08);
  border: 1px solid rgba(245,242,234,0.18);
  text-decoration: none;
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  width: fit-content;
}
.ph-demo:hover {
  background: rgba(255,184,0,0.12);
  border-color: var(--brand);
  transform: translateX(2px);
}
.ph-demo__icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: #0E1014;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ph-demo__icon svg { transform: translateX(1px); }
.ph-demo__arrow {
  font-size: 14px;
  letter-spacing: 0;
  opacity: 0.7;
  transition: transform .2s ease;
}
.ph-demo:hover .ph-demo__arrow { transform: translateX(3px); opacity: 1; }

/* Platform support — top-right corner of the carousel card */
.hero-photo__card { position: relative; }
.ph-platforms {
  position: absolute;
  top: var(--s-5);
  right: var(--s-6);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  border-radius: 100px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(245,242,234,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
}
.ph-platforms__lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,242,234,0.6);
  margin-right: 4px;
}
@media (max-width: 720px) {
  .ph-platforms { top: var(--s-4); right: var(--s-4); padding: 4px 8px 4px 10px; }
  .ph-platforms__lbl { display: none; }
}

/* Platform support chip (iOS / Android / Web) — legacy chip variant */
.hero-photo__chip--platforms {
  padding: 6px 14px 6px 12px;
  gap: 10px;
}
.ph-plat__lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,242,234,0.6);
}
.ph-plat__icons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ph-plat {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.ph-plat--ios { 
  background: #000;
  color: #fff;
  border-color: transparent;
}
.ph-plat--android { color: #3DDC84; }
.ph-plat--web {
  background: linear-gradient(135deg, #4285F4 0%, #34A853 100%);
  color: #fff;
  border-color: transparent;
}
.ph-plat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; width: 100%; position: relative; }
html { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.05;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
.mono { font-family: var(--f-mono); font-feature-settings: "tnum" 1; }

/* Layout */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5); }
@media (min-width: 768px) { .wrap { padding: 0 var(--s-7); } }

[data-density="compact"] { --s-9: 64px; --s-8: 48px; --s-7: 32px; }
[data-density="spacious"] { --s-9: 140px; --s-8: 88px; --s-7: 64px; }

.section { padding: var(--s-9) 0; border-top: 1px solid var(--steel); }
.section--tight { padding: var(--s-7) 0; }
.section--paper-2 { background: var(--paper-2); }
.section--brand { background: var(--brand); color: var(--paper); }
.section--brand h1, .section--brand h2 { color: var(--paper); }

/* Eyebrow */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--hazard);
  border-radius: 2px;
}
.section--brand .eyebrow { color: var(--signal); }
.section--brand .eyebrow::before { background: var(--signal); }

/* Type */
.display {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(40px, 6.8vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.display--sm {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.lede {
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--ink-2);
  max-width: 60ch;
}
.kicker { font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em;}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: var(--r-2);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-weight: 500;
  font-family: var(--f-body);
  font-size: 15px;
  border: 1px solid var(--ink);
  transition: transform .15s ease, background .15s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn--hazard { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.btn--hazard:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--steel); }
.btn--ghost:hover { background: var(--paper-2); }
.btn--onbrand { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--lg { padding: 18px 26px; font-size: 16px; }

.btn .arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.btn:hover .arrow { transform: translateX(3px); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  border-bottom: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom-color: var(--steel);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: 14px 0;
}
@media (max-width: 860px) {
  .site-header__inner {
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
  }
}
.site-header nav {
  display: none;
  gap: var(--s-6);
  margin-left: auto;
  margin-right: var(--s-5);
}
@media (min-width: 860px) { .site-header nav { display: flex; } }
.site-header nav a {
  text-decoration: none;
  color: var(--ink-2);
  font-size: 15px;
  transition: color .15s;
}
.site-header nav a:hover, .site-header nav a.active { color: var(--ink); }
.site-header .btn { margin-left: auto; }
@media (min-width: 860px) { .site-header .btn { margin-left: 0; } }

/* Hamburger toggle button */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  width: 36px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; order: 3; }
  .site-header .btn { order: 2; }
  .site-header nav {
    display: none;
    width: 100%;
    order: 4;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: var(--s-3) 0 var(--s-4);
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .site-header nav.open { display: flex; }
  .site-header nav a {
    padding: 12px 0;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .site-header nav a:last-child { border-bottom: none; }
}

/* Logo (real SureMILE wordmark) */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}
.logo__mark { display: block; flex-shrink: 0; }
.logo__word {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.logo--onbrand .logo__word { color: var(--paper); }
.site-header .logo__word { font-size: 21px; }
.site-footer__logo .logo__word { font-size: 24px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Material Symbols Outlined — global icon font */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal;
  font-size: 22px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.ms-fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.ms-bold { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
.ms-sm { font-size: 16px; }
.ms-md { font-size: 20px; }
.ms-lg { font-size: 28px; }
.ms-xl { font-size: 40px; }

/* Footer */
.site-footer {
  background: var(--brand);
  color: color-mix(in srgb, var(--paper) 85%, transparent);
  padding: var(--s-9) 0 var(--s-6);
  margin-top: var(--s-8);
}
.site-footer h4 {
  color: var(--paper);
  font-size: 13px;
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 500;
  margin-bottom: var(--s-4);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: color-mix(in srgb, var(--paper) 80%, transparent); text-decoration: none; font-size: 14px;}
.site-footer a:hover { color: var(--signal); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: var(--s-6);
}
@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}
.site-footer__logo .logo__word { font-size: 26px; }
.site-footer__bottom {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid color-mix(in srgb, var(--paper) 20%, transparent);
  display: flex; gap: var(--s-5); flex-wrap: wrap;
  font-size: 13px;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
}
.badge-row { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }

/* Footer version stamp */
.site-footer__version {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  border-radius: 100px;
  background: color-mix(in srgb, var(--paper) 4%, transparent);
}
.site-footer__version-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent);
  animation: smPulse 2.4s ease-in-out infinite;
}
.site-footer__version-sep { opacity: 0.4; }
@keyframes smPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}


.trust-badge {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--paper) 25%, transparent);
  color: color-mix(in srgb, var(--paper) 75%, transparent);
  border-radius: 4px;
}

/* Stat — editorial */
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat__num {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__num sup {
  font-family: var(--f-mono);
  font-size: 0.28em;
  font-weight: 400;
  color: var(--ink-3);
  vertical-align: 0.9em;
  letter-spacing: 0;
  margin-left: 4px;
}
.stat__unit {
  font-family: var(--f-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.stat__label {
  font-size: 15px;
  color: var(--ink-2);
  max-width: 28ch;
}

/* Phone frame */
.phone {
  width: 320px;
  height: 660px;
  border-radius: 44px;
  background: #0B0D11;
  padding: 10px;
  box-shadow:
    0 40px 80px -20px rgba(15, 32, 25, 0.35),
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 2px 0 0 rgba(255,255,255,0.06) inset;
  position: relative;
}
.phone__screen {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 34px;
  overflow: hidden;
  position: relative;
  color: #111;
}
.phone__notch {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 28px;
  background: #0B0D11;
  border-radius: 20px;
  z-index: 5;
}
.phone__sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px 6px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  color: #111;
}
.phone__sb-icons { display: flex; gap: 5px; align-items: center; }
.phone__sb-icons svg { width: 16px; height: 12px; }

/* Cards */
.card {
  background: var(--paper);
  border: 1px solid var(--steel);
  border-radius: var(--r-3);
  padding: var(--s-5);
}

/* FAQ */
.faq-item {
  border-bottom: 1px solid var(--steel);
  padding: var(--s-5) 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--f-mono);
  font-size: 24px;
  color: var(--ink-3);
  transition: transform .2s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { color: var(--ink-2); margin-top: var(--s-3); max-width: 70ch; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Download band */
.download-band {
  background: var(--brand);
  color: var(--paper);
  padding: var(--s-8) 0;
}
.download-band h2 { color: var(--paper); }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #000;
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid #000;
  min-width: 200px;
  transition: transform .15s;
}
.store-badge:hover { transform: translateY(-2px); }
.store-badge__label { display: flex; flex-direction: column; line-height: 1.1; font-family: var(--f-body); }
.store-badge__pre { font-size: 11px; letter-spacing: 0.05em; opacity: 0.85; }
.store-badge__name { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.store-badge--onbrand { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.qr {
  width: 92px; height: 92px;
  background: #fff;
  padding: 8px;
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  gap: 0;
  border: 1px solid var(--steel);
}
.qr > i { background: #000; aspect-ratio: 1; }
.qr > i.off { background: transparent; }

/* Utility */
.row { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }
.row--sm { gap: var(--s-3); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.spacer-5 { height: var(--s-5); }
.spacer-7 { height: var(--s-7); }
.spacer-8 { height: var(--s-8); }
.divider { border-top: 1px solid var(--steel); margin: var(--s-7) 0; }

/* Pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--paper-2);
  border: 1px solid var(--steel);
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* Annotation labels (Figma-style) */
.anno {
  position: absolute;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.anno::before {
  content: "";
  width: 22px; height: 1px; background: var(--ink-3);
}
.anno--l::before { order: 2; }

/* Truck map lines (hero background) */
.trucklines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--steel) 1px, transparent 1px),
    linear-gradient(90deg, var(--steel) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.22;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}


/* ============================================================
   GLASSMORPHISM — Trucker Utility palette
   Frosted glass over dark dashboard. Layered blur + glow.
   ============================================================ */

[data-palette="utility"] {
  /* richer dark plate behind glass */
  --paper: #0A0D12;
  --paper-2: #10141B;
  --paper-3: #161B24;
}

[data-palette="utility"] body {
  /* truck photo as fixed backdrop — glass cards refract over it */
  background-color: #0A0D12;
  background-image:
    linear-gradient(180deg, rgba(10,13,18,0.30) 0%, rgba(10,13,18,0.55) 35%, rgba(10,13,18,0.80) 100%),
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(255,184,0,0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 70%, rgba(255,90,31,0.08), transparent 65%),
    url('brand/hero-truck.jpeg');
  background-size: 100% 100%, 100% 100%, 100% 100%, cover;
  background-position: center, center, center, center 30%;
  background-repeat: no-repeat;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* Per-page photo backdrop swaps — same gradient overlay recipe,
   different photo per route so the site doesn't feel like one
   image on a loop. The two gradient layers are inherited from
   above; we only swap the url() and tweak focal point. */
[data-palette="utility"][data-page="features"] body {
  background-image:
    linear-gradient(180deg, rgba(10,13,18,0.30) 0%, rgba(10,13,18,0.55) 35%, rgba(10,13,18,0.80) 100%),
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(255,184,0,0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 70%, rgba(255,90,31,0.08), transparent 65%),
    url('brand/bg-driver-phone-flipped.jpg');
  background-position: center, center, center, center 35%;
}
[data-palette="utility"][data-page="pricing"] body {
  background-image:
    linear-gradient(180deg, rgba(10,13,18,0.35) 0%, rgba(10,13,18,0.60) 35%, rgba(10,13,18,0.85) 100%),
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(255,184,0,0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 70%, rgba(255,90,31,0.08), transparent 65%),
    url('brand/bg-truck-stop-driver.jpg');
  background-position: center, center, center, center 40%;
}
[data-palette="utility"][data-page="roi"] body {
  background-image:
    linear-gradient(180deg, rgba(10,13,18,0.32) 0%, rgba(10,13,18,0.58) 35%, rgba(10,13,18,0.82) 100%),
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(255,184,0,0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 70%, rgba(255,90,31,0.08), transparent 65%),
    url('brand/bg-incab-driver.jpg');
  background-position: center, center, center, center 45%;
}
[data-palette="utility"][data-page="download"] body {
  background-image:
    linear-gradient(180deg, rgba(10,13,18,0.30) 0%, rgba(10,13,18,0.55) 35%, rgba(10,13,18,0.80) 100%),
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(255,184,0,0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 70%, rgba(255,90,31,0.08), transparent 65%),
    url('brand/bg-driver-phone.jpg');
  background-position: center, center, center, center 35%;
}
[data-palette="utility"][data-page="about"] body {
  background-image:
    linear-gradient(180deg, rgba(10,13,18,0.32) 0%, rgba(10,13,18,0.58) 35%, rgba(10,13,18,0.82) 100%),
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(255,184,0,0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 70%, rgba(255,90,31,0.08), transparent 65%),
    url('brand/bg-incab-driver.jpg');
  background-position: center, center, center, center 45%;
}
[data-palette="utility"][data-page="contact"] body {
  background-image:
    linear-gradient(180deg, rgba(10,13,18,0.35) 0%, rgba(10,13,18,0.60) 35%, rgba(10,13,18,0.85) 100%),
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(255,184,0,0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 70%, rgba(255,90,31,0.08), transparent 65%),
    url('brand/bg-truck-stop-driver.jpg');
  background-position: center, center, center, center 40%;
}
[data-palette="utility"][data-page="blog"] body,
[data-palette="utility"][data-page="blog-post"] body {
  background-image:
    linear-gradient(180deg, rgba(10,13,18,0.32) 0%, rgba(10,13,18,0.58) 35%, rgba(10,13,18,0.82) 100%),
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(255,184,0,0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 70%, rgba(255,90,31,0.08), transparent 65%),
    url('brand/bg-driver-phone.jpg');
  background-position: center, center, center, center 35%;
}
[data-palette="utility"][data-page="extension"] body {
  background-image:
    linear-gradient(180deg, rgba(10,13,18,0.35) 0%, rgba(10,13,18,0.60) 35%, rgba(10,13,18,0.85) 100%),
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(255,184,0,0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 70%, rgba(255,90,31,0.08), transparent 65%),
    url('brand/bg-truck-stop-driver.jpg');
  background-position: center, center, center, center 40%;
}

/* Section backgrounds — translucent glass instead of solid */
[data-palette="utility"] .section {
  border-top: 1px solid rgba(255,184,0,0.10);
  background: rgba(10,13,18,0.45);
  backdrop-filter: blur(40px) saturate(140%);
  -webkit-backdrop-filter: blur(40px) saturate(140%);
}
[data-palette="utility"] .section--paper-2 {
  background: rgba(22,27,36,0.55);
  backdrop-filter: blur(40px) saturate(140%);
  -webkit-backdrop-filter: blur(40px) saturate(140%);
}
[data-palette="utility"] .section--brand {
  background: linear-gradient(135deg, rgba(255,184,0,0.22), rgba(255,90,31,0.12));
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  border-top: 1px solid rgba(255,184,0,0.3);  color: var(--ink);
}
[data-palette="utility"] .section--brand h1,
[data-palette="utility"] .section--brand h2 { color: var(--ink); }

/* Download band — translucent glass like other sections so the photo
   backdrop reads through. Yellow tint keeps it brand-warm. */
[data-palette="utility"] .download-band {
  background:
    linear-gradient(135deg, rgba(255,184,0,0.20), rgba(255,90,31,0.12)),
    rgba(10,13,18,0.78);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-top: 1px solid rgba(255,184,0,0.22);
  border-bottom: 1px solid rgba(255,184,0,0.10);
}
/* Force every text + button in the band to white on utility palette */
[data-palette="utility"] .download-band,
[data-palette="utility"] .download-band h1,
[data-palette="utility"] .download-band h2,
[data-palette="utility"] .download-band h3,
[data-palette="utility"] .download-band p,
[data-palette="utility"] .download-band .eyebrow {
  color: #FFFFFF !important;
}
[data-palette="utility"] .download-band .btn--hazard {
  color: #0A0D12 !important;
  text-shadow: none;
}
[data-palette="utility"] .download-band .btn--ghost-on-dark {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.55);
}
[data-palette="utility"] .download-band .btn--ghost-on-dark:hover {
  background: rgba(255,255,255,0.12);
  color: #FFFFFF !important;
  border-color: #FFFFFF;
}

/* Header — frosted top bar */
[data-palette="utility"] .site-header {
  background: rgba(10,13,18,0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255,184,0,0.18);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 32px rgba(0,0,0,0.4);
}

/* Footer */
[data-palette="utility"] .site-footer {
  background: linear-gradient(180deg, rgba(16,20,27,0.85), rgba(5,7,10,0.95));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,184,0,0.18);
  color: rgba(245,242,234,0.85);
}
[data-palette="utility"] .site-footer h4 { color: #F5F2EA; }
[data-palette="utility"] .site-footer a { color: rgba(245,242,234,0.72); }
[data-palette="utility"] .site-footer a:hover { color: var(--signal); }
[data-palette="utility"] .site-footer .logo--onbrand .logo__word { color: #F5F2EA; }

/* Cards — the hero glass treatment */
[data-palette="utility"] .card,
[data-palette="utility"] .stat,
[data-palette="utility"] .anno,
[data-palette="utility"] .dl-card,
[data-palette="utility"] .feat-card,
[data-palette="utility"] .blog-card,
[data-palette="utility"] .testi,
[data-palette="utility"] .pricing-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 16px 40px -12px rgba(0,0,0,0.6),
    0 2px 6px rgba(0,0,0,0.3);
  position: relative;
}

/* Highlight sweep on the top edge of glass cards */
[data-palette="utility"] .card::before,
[data-palette="utility"] .dl-card::before,
[data-palette="utility"] .feat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,184,0,0.6), transparent);
  pointer-events: none;
}

/* Ticker — heavier glass */
[data-palette="utility"] .live-ticker {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,184,0,0.4);
  box-shadow: 0 0 24px rgba(255,184,0,0.12);
}

/* Photographic hero — keep dramatic but glass-edge */
[data-palette="utility"] .hero-photo {
  border-bottom: 4px solid var(--brand);
  box-shadow: 0 32px 80px -24px rgba(255,184,0,0.25);
}
[data-palette="utility"] .hero-photo__chip {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
[data-palette="utility"] .hero-photo__chip--accent {
  background: linear-gradient(135deg, rgba(255,184,0,0.95), rgba(255,205,63,0.85));
  border-color: rgba(255,184,0,0.6);
  color: #0A0D12;
  box-shadow:
    0 8px 24px -4px rgba(255,184,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Buttons — glass primary */
[data-palette="utility"] .btn--ghost {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--ink);
}
[data-palette="utility"] .btn--ghost:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,184,0,0.4);
}
[data-palette="utility"] .btn--hazard {
  background: linear-gradient(135deg, var(--brand), var(--brand-soft));
  color: #0A0D12;
  border: 1px solid rgba(255,184,0,0.6);
  box-shadow:
    0 8px 24px -4px rgba(255,184,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
[data-palette="utility"] .btn--hazard:hover {
  box-shadow:
    0 12px 32px -4px rgba(255,184,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.4);
  transform: translateY(-1px);
}

/* Phone mocks — give them a glow and glass surround */
[data-palette="utility"] .phone {
  box-shadow:
    0 40px 80px -16px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.1),
    0 0 60px rgba(255,184,0,0.15);
}

/* Annotations — frostier */
[data-palette="utility"] .anno {
  background: rgba(10,13,18,0.65);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,184,0,0.3);
  color: var(--ink);
  box-shadow:
    0 8px 24px -4px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Eyebrow accent */
[data-palette="utility"] .eyebrow { color: var(--brand); }
[data-palette="utility"] .eyebrow::before { background: var(--brand); box-shadow: 0 0 8px var(--brand); }

/* Tweaks panel — more glass */
[data-palette="utility"] .twk-panel {
  background: rgba(10,13,18,0.7) !important;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255,184,0,0.2) !important;
}

/* Stats numbers glow softly */
[data-palette="utility"] .stat__num {
  text-shadow: 0 0 24px rgba(255,184,0,0.15);
}

/* Tables */
[data-palette="utility"] table { color: var(--ink); }
[data-palette="utility"] td, [data-palette="utility"] th { border-color: rgba(255,255,255,0.08) !important; }

/* Trucklines pattern — softer on dark */
[data-palette="utility"] .trucklines {
  background-image:
    linear-gradient(var(--steel) 1px, transparent 1px),
    linear-gradient(90deg, var(--steel) 1px, transparent 1px);
  opacity: 0.08;
}

/* Hazard stripes available as a utility class */
[data-palette="utility"] .hazard-stripe {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--brand) 0 14px,
    #0A0D12 14px 28px
  );
  height: 14px;
  width: 100%;
}

/* ============================================================
   Compact page title — used on utility pages (ROI, Pricing,
   Features, Download) instead of the tall photographic hero.
   Page sits directly on the body's fixed photo backdrop; this
   block just announces what page you're on, then content
   follows immediately in glass cards.
   ============================================================ */
.page-title {
  padding: var(--s-6) 0 var(--s-4);
}
.page-title__inner {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.page-title .eyebrow { margin: 0; flex-shrink: 0; }
.page-title h1 {
  font-family: var(--f-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.page-title .lede {
  margin: var(--s-3) 0 0;
  max-width: 60ch;
  font-size: 17px;
  color: var(--ink-2);
  flex: 1 1 100%;
}
@media (max-width: 720px) {
  .page-title { padding: var(--s-5) 0 var(--s-3); }
  .page-title__inner { flex-direction: column; gap: var(--s-2); align-items: flex-start; }
}

/* On utility palette, the page title sits over the dark photo
   backdrop directly — give it a faint glow so it pops. */
[data-palette="utility"] .page-title h1 {
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}
[data-palette="utility"] .page-title .lede {
  color: rgba(245,242,234,0.85);
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

/* ============================================================
   Utility-palette readability patches
   These rules fix text that was hard-coded against light card
   backgrounds in places where the palette swap inverts the
   surrounding tokens but the inner card stays light/dark.
   ============================================================ */

/* --- Live ticker: was rendering 'paper' (now dark) on near-black */
[data-palette="utility"] .live-ticker__value { color: var(--brand); }
[data-palette="utility"] .live-ticker__label { color: rgba(245,242,234,0.65); }
[data-palette="utility"] .live-ticker__delta--up { color: #5DD39E; }
[data-palette="utility"] .live-ticker__delta--down { color: #FF8A57; }

/* --- Hours-Back card: glass surface, so all inner text must use
       light values rather than --ink/--paper which are dark-flavored
       on this palette */
[data-palette="utility"] .hb-row__lbl,
[data-palette="utility"] .hb-row__lbl strong,
[data-palette="utility"] .hb-bar__title,
[data-palette="utility"] .hb-bar__legend {
  color: #F5F2EA;
}
[data-palette="utility"] .hb-bar__title,
[data-palette="utility"] .hb-bar__legend { color: rgba(245,242,234,0.85); }
[data-palette="utility"] .hb-row__amt { color: #F5F2EA; }
[data-palette="utility"] .hb-row__amt em { color: rgba(245,242,234,0.65); }
[data-palette="utility"] .hb-bar__sw--paper { background: rgba(245,242,234,0.55); }

/* --- Backhaul math diagram on features.html: lives inside a card
       that turns to glass; numbers were white-on-cream → invisible */
[data-palette="utility"] .bh .lane { color: var(--brand); }
[data-palette="utility"] .bh .num,
[data-palette="utility"] .bh .total .amt { color: #F5F2EA; }

/* ba-card stays a "paper" surface in the design system. Force it to
   the glass recipe in utility palette so its child text reads. */
[data-palette="utility"] .ba-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border-color: rgba(255,255,255,0.12);
  color: #F5F2EA;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
[data-palette="utility"] .ba-truck { border-bottom-color: rgba(255,255,255,0.08); }

/* --- Pricing billing toggle: active state was paper-on-paper */
[data-palette="utility"] .billing-toggle {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
[data-palette="utility"] .billing-toggle button { color: rgba(245,242,234,0.7) !important; }
[data-palette="utility"] .billing-toggle button.active {
  background: var(--brand);
  color: #0A0D12 !important;
}
[data-palette="utility"] .billing-toggle .save {
  background: #0A0D12;
  color: var(--brand);
}
[data-palette="utility"] .tier__price-unit { color: rgba(245,242,234,0.75); }

/* --- Hazard CTA buttons: cream-on-orange was 2.79:1. Bump to near-black
       which already matches the utility-palette btn--hazard treatment. */
.btn--hazard { color: #0E1116; }
[data-palette="utility"] .btn--hazard { color: #0A0D12; }

/* --- ROI card labels: yellow-on-cream → invisible. Card is glass here. */
[data-palette="utility"] .results__sub { color: rgba(245,242,234,0.85); }
[data-palette="utility"] .results__sub strong { color: var(--brand); }

/* --- Contact form chips: black text was hard-coded on now-dark bg */
[data-palette="utility"] .chip {
  background: rgba(255,255,255,0.05);
  color: #F5F2EA;
  border-color: rgba(255,255,255,0.15);
}
[data-palette="utility"] .chip:hover { background: rgba(255,255,255,0.10); }
[data-palette="utility"] .chip.on {
  background: var(--brand);
  color: #0A0D12;
  border-color: var(--brand);
}

/* --- Blog post cover: yellow-on-yellow when palette painted both
       layers from the same family. Force dark ink on the yellow plate. */
[data-palette="utility"] .post-cover { color: #0A0D12; }
[data-palette="utility"] .post-cover span { color: #0A0D12; }

/* --- Download cards: descriptions used --ink-2 which is light here,
       but the dl-card glass background is darker — already fine.
       The verifier saw rgb(199,194,182) on white because dl-card uses
       solid var(--paper). Force the glass recipe so descriptions read. */
[data-palette="utility"] .dl-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border-color: rgba(255,255,255,0.12);
  color: #F5F2EA;
}
[data-palette="utility"] .dl-card p { color: rgba(245,242,234,0.78); }
[data-palette="utility"] .dl-card__os-mark { background: var(--brand); color: #0A0D12; }
[data-palette="utility"] .dl-card__meta { color: rgba(245,242,234,0.6); }