/**
 * The public marketing site.
 *
 * Built on the same clay tokens the product uses (public/css/clay.css) so the
 * site a parent sees before signing up and the app they see after look like one
 * thing. Everything here is layout and section styling specific to the
 * marketing pages — no product component is redefined.
 *
 * Type: Baloo 2 for display (rounded, warm, matches the clay forms) with
 * Nunito for body copy, which is already the product's face.
 */

/* ══════════════════════════════════════════════════════════════════════════
   TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --site-green:      #2E9E5B;
  --site-green-dp:   #1F7A44;
  --site-green-bg:   #E4F3EA;
  --site-navy:       #17233F;
  --site-amber:      #F5A623;
  --site-amber-dp:   #C7860F;
  --site-sky:        #DDEBFA;

  /* Ground, surface and radii.

     These deliberately restate the clay light values instead of reading
     --clay-bg and --clay-surface. Those two flip to near-black under
     prefers-color-scheme: dark, while every text colour here is a fixed
     light-mode value — pairing the two is what put navy text on a black
     ground on every phone that defaults to dark. The marketing site is a
     single committed light design; its palette should not be able to
     half-change underneath it. */
  --site-bg:         #F3EEE7;
  --site-surface:    #FFFCF9;
  --site-r:          28px;
  --site-r-sm:       20px;

  /* Native UI — scrollbars, form controls, autofill — follows this rather
     than the palette above, and renders dark without it. */
  color-scheme: light;
  /* Content ceiling. Wide enough to use a large screen, capped so running
     text never runs past a comfortable measure. */
  --site-max:        2100px;
  --site-max-narrow: 1180px;

  /* Gutters, section rhythm and card gaps all grow with the viewport, so the
     page is composed at every width rather than stretched from one. */
  --site-gutter:     clamp(20px, 4.2vw, 72px);
  --site-band:       clamp(48px, 6vw, 104px);
  --site-gap:        clamp(14px, 1.4vw, 26px);

  --site-shadow:
    0 18px 38px rgba(23,35,63,.09),
    0 6px 12px rgba(23,35,63,.05),
    inset 0 -5px 10px rgba(23,35,63,.04),
    inset 0 5px 10px rgba(255,255,255,.94);
  --site-shadow-sm:
    0 8px 18px rgba(23,35,63,.07),
    inset 0 -3px 6px rgba(23,35,63,.035),
    inset 0 3px 6px rgba(255,255,255,.9);
}

/* ══════════════════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════════════════ */

/* Bootstrap is not loaded on the marketing pages, so the border-box reset the
   product relies on has to be stated here. Without it every padded full-width
   container overflows by exactly its own padding. */
.site *, .site *::before, .site *::after { box-sizing: border-box; }
body.site {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--site-bg);
  color: var(--site-navy);
  line-height: 1.65;
  overflow-x: hidden;
}

.site h1, .site h2, .site h3, .site .display {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--site-navy);
}

.site-wrap {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

/* For prose that should stay readable no matter how wide the screen gets. */
.site-wrap--narrow { max-width: var(--site-max-narrow); }

/* Edge-to-edge background with the content still on the grid inside it. */
.site-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--site-gutter);
}
.site section { position: relative; }

.site .lead      { font-size: 1.06rem; color: #55617D; max-width: 62ch; }
.site .eyebrow   { font-weight: 800; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--site-green-dp); }
.site .t-green   { color: var(--site-green); }
.site .t-amber   { color: var(--site-amber); }
.site a          { color: var(--site-green-dp); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.site :focus-visible { outline: 3px solid var(--site-amber); outline-offset: 3px; border-radius: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════════════════════ */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(243,238,231,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(23,35,63,.06);
}
.site-nav .inner { display: flex; align-items: center; gap: clamp(18px, 2vw, 40px); height: 76px; }

.site-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.site-brand .mark {
  width: 46px; height: 46px; border-radius: 15px;
  background: var(--site-surface);
  box-shadow: var(--site-shadow-sm);
  display: grid; place-items: center; font-size: 1.5rem;
}
.site-brand .name { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--site-navy); line-height: 1; }
.site-brand .name em { font-style: normal; color: var(--site-amber); }
.site-brand .sub  { font-size: .68rem; color: var(--site-green-dp); font-weight: 700; letter-spacing: .01em; }

.site-links { display: flex; gap: 26px; margin-inline: auto; }
.site-links a {
  color: #46516D; font-weight: 700; font-size: .93rem; text-decoration: none;
  padding: 6px 0; border-bottom: 2.5px solid transparent;
}
.site-links a:hover { color: var(--site-navy); }
.site-links a[aria-current="page"] { color: var(--site-green-dp); border-bottom-color: var(--site-green); }

.site-nav .actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 0; border-radius: 13px;
  background: var(--site-surface); box-shadow: var(--site-shadow-sm); font-size: 1.2rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */
.btn-clay {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: 999px; padding: 13px 26px;
  font-weight: 800; font-size: .96rem; text-decoration: none; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.btn-clay:active { transform: translateY(1px); }

.site .btn-primary-clay {
  background: var(--site-green); color: #fff;
  box-shadow: 0 12px 24px rgba(46,158,91,.32),
              inset 0 -4px 8px rgba(0,0,0,.14),
              inset 0 4px 8px rgba(255,255,255,.26);
}
.site .btn-primary-clay:hover { background: var(--site-green-dp); color: #fff; transform: translateY(-2px); }

.site .btn-ghost-clay {
  background: var(--site-surface); color: var(--site-navy);
  box-shadow: var(--site-shadow-sm);
}
.site .btn-ghost-clay:hover { color: var(--site-navy); transform: translateY(-2px); }

.site .btn-amber-clay {
  background: var(--site-amber); color: #4A3000;
  box-shadow: 0 12px 24px rgba(245,166,35,.34),
              inset 0 -4px 8px rgba(0,0,0,.13),
              inset 0 4px 8px rgba(255,255,255,.4);
}
.site .btn-amber-clay:hover { color: #4A3000; transform: translateY(-2px); }

.btn-sm-clay { padding: 9px 20px; font-size: .88rem; }

/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero { padding: clamp(36px, 4.5vw, 76px) 0 clamp(34px, 3vw, 52px); }

.trust-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--site-surface); border-radius: 999px;
  padding: 9px 20px 9px 14px; box-shadow: var(--site-shadow-sm);
  font-weight: 800; font-size: .88rem; color: var(--site-navy);
  margin-bottom: 22px;
}
.trust-chip .ico { color: var(--site-green); font-size: 1.05rem; display: grid; place-items: center; }

.hero h1 { font-size: clamp(2.2rem, 2.1vw + 1.1rem, 3.9rem); margin: 0 0 20px; }
.hero .lead { font-size: clamp(1.02rem, .35vw + .95rem, 1.24rem); max-width: 48ch; margin-bottom: clamp(22px, 2.4vw, 38px); }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

.play-dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--site-green); color: #fff;
  display: grid; place-items: center; font-size: .72rem;
}

/* ── Full-bleed hero ──────────────────────────────────────────────────────
   The illustration fills the section edge to edge and the copy sits over its
   quiet left third. A scrim carries the page's own ivory across that third so
   the headline keeps its contrast wherever the image is cropped — the image
   alone cannot be relied on for that once it is object-fit cover at an
   unpredictable viewport ratio. */
.hero-full { padding: 0; overflow: hidden; }

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg picture,
.hero-bg img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  /* Keep the bus and the phone in frame as the viewport narrows; the empty
     left third is the part that may be cropped away. */
  object-position: 78% center;
}

.hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    100deg,
    var(--site-bg) 0%,
    rgba(243, 238, 231, .97) 26%,
    rgba(243, 238, 231, .74) 42%,
    rgba(243, 238, 231, 0)   62%
  );
}

.hero-inner {
  position: relative; z-index: 3;
  min-height: clamp(500px, 41vw, 760px);
  display: flex; align-items: center;
  padding-block: clamp(40px, 4vw, 72px);
}
.hero-copy { max-width: 52ch; }

/* Only shown once the background treatment is dropped, below 992px. */
.hero-art-mobile { display: none; }
.hero-art-mobile img { width: 100%; height: auto; display: block; border-radius: 22px; }

/* ══════════════════════════════════════════════════════════════════════════
   FEATURE STRIP — the four-up bar that overlaps the hero
   ══════════════════════════════════════════════════════════════════════════ */
.feature-strip {
  background: var(--site-surface);
  border-radius: 26px;
  box-shadow: var(--site-shadow);
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: -26px; position: relative; z-index: 5;
}
.feature-strip .cell { display: flex; gap: 14px; padding: 24px 22px; align-items: flex-start; }
.feature-strip .cell + .cell { border-left: 1px solid rgba(23,35,63,.07); }
.feature-strip h3 { font-size: 1rem; margin: 0 0 3px; font-family: 'Nunito', sans-serif; font-weight: 800; }
.feature-strip p  { font-size: .84rem; color: #667292; margin: 0; line-height: 1.5; }

.ico-tile {
  width: 46px; height: 46px; border-radius: 15px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.25rem; color: #fff;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.16), inset 0 3px 6px rgba(255,255,255,.3);
}
.ico-green  { background: var(--site-green); }
.ico-amber  { background: var(--site-amber); }
.ico-blue   { background: #3D7EDB; }
.ico-violet { background: #7C5BD9; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */
.site section.band { padding: var(--site-band) 0; }
.section-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 34px; }
.section-head .badge-ico {
  width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
  background: var(--site-green); color: #fff; display: grid; place-items: center;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.16), inset 0 3px 6px rgba(255,255,255,.28);
}
.section-head h2 { font-size: clamp(1.55rem, 1.4vw + 1.1rem, 2.5rem); margin: 0 0 3px; }
.section-head p  { margin: 0; color: #667292; font-size: .95rem; }

/* How it works */
/* auto-fit with a max keeps a card a card: past a point the row adds a column
   rather than each tile growing to the size of a poster. */
.steps-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--site-gap);
}
.steps-grid > * {
  flex: 1 1 210px;
  max-width: 400px;
  min-width: min(100%, 190px);
}
.step-card {
  background: var(--site-surface); border-radius: 20px; padding: 22px 18px;
  box-shadow: var(--site-shadow-sm); position: relative; text-align: left;
}
.step-card .num {
  position: absolute; top: 14px; left: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: #fff;
}
.step-card .glyph {
  width: 56px; height: 56px; border-radius: 18px; margin: 14px auto 14px;
  display: grid; place-items: center; font-size: 1.5rem;
  box-shadow: var(--site-shadow-sm);
}
.step-card h3 { font-size: .98rem; margin: 0 0 5px; text-align: center; font-family: 'Nunito', sans-serif; font-weight: 800; }
.step-card p  { font-size: .82rem; color: #667292; margin: 0; text-align: center; line-height: 1.5; }

.how-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(26px, 3vw, 56px);
  align-items: center;
}
.script-note {
  font-family: 'Baloo 2', cursive; font-size: 1.35rem; font-weight: 700;
  color: var(--site-green-dp); line-height: 1.25; margin-bottom: 10px;
}

/* Stay connected */
.connect-band {
  background: linear-gradient(180deg, var(--site-green-bg), #EFF7F1);
  border-radius: 28px; padding: 42px;
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr) minmax(0,.95fr);
  gap: clamp(26px, 3vw, 52px); align-items: center;
  box-shadow: var(--site-shadow);
}
.connect-band .divider { border-left: 1px solid rgba(23,35,63,.1); padding-left: clamp(24px, 2.6vw, 48px); }
.pwa-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.pwa-hint {
  margin: 12px 0 0; font-size: .86rem; color: #667292; max-width: 46ch;
}

/* Revealed by script once the browser has offered an install prompt.
   [hidden] loses to the button's own display: inline-flex, so it has to
   be restated here or the button is visible from the first paint. */
.pwa-row [hidden] { display: none !important; }

.benefit-row { display: flex; gap: 14px; align-items: flex-start; }
.benefit-row + .benefit-row { margin-top: 20px; }
.benefit-row h3 { font-size: .96rem; margin: 0 0 2px; font-family: 'Nunito', sans-serif; font-weight: 800; }
.benefit-row p  { font-size: .84rem; color: #667292; margin: 0; }

/* Testimonials */
.quote-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--site-gap);
}
@media (max-width: 1000px) { .quote-grid { grid-template-columns: 1fr; } }
.quote-card {
  background: var(--site-surface); border-radius: 20px; padding: 22px;
  box-shadow: var(--site-shadow-sm);
  display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start;
}
.quote-card img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.quote-card blockquote { margin: 0 0 12px; font-size: .9rem; color: #3B455E; }
.quote-card cite { font-style: normal; font-weight: 800; font-size: .88rem; display: block; }
.quote-card .who { font-size: .76rem; color: #8A93A8; }
.stars { color: var(--site-amber); font-size: .82rem; letter-spacing: 1px; }

/* Closing CTA */
.cta-band {
  border-radius: 28px; padding: clamp(36px, 4.5vw, 72px) var(--site-gutter); text-align: center;
  background: linear-gradient(180deg, #DFF1E3, #C9E7D3);
  box-shadow: var(--site-shadow); position: relative; overflow: hidden;
}
.cta-band h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin: 0 0 8px; }
.cta-band p  { color: #4A5670; margin: 0 0 22px; }

/* ══════════════════════════════════════════════════════════════════════════
   FAQ — the AEO surface. Plain <details> so the answer is in the HTML whether
   or not it is open, which is what an answer engine actually reads.
   ══════════════════════════════════════════════════════════════════════════ */
.faq-list { display: grid; gap: 12px; }
.faq-item {
  background: var(--site-surface); border-radius: 18px;
  box-shadow: var(--site-shadow-sm); padding: 4px 22px; border: 0;
}
.faq-item > summary {
  cursor: pointer; list-style: none; padding: 16px 0;
  font-weight: 800; font-size: 1rem; display: flex; justify-content: space-between; gap: 16px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: '+'; color: var(--site-green); font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.faq-item[open] > summary::after { content: '–'; }
.faq-item .answer { padding: 0 0 18px; color: #55617D; font-size: .93rem; max-width: 72ch; }

/* ══════════════════════════════════════════════════════════════════════════
   CITY PAGES
   ══════════════════════════════════════════════════════════════════════════ */
.city-hero { padding: 46px 0 10px; }
.city-hero h1 { font-size: clamp(1.9rem, 2.2vw + 1rem, 3.4rem); margin: 0 0 16px; }

.answer-box {
  background: var(--site-green-bg); border-radius: 20px; padding: 22px 26px;
  box-shadow: var(--site-shadow-sm); margin: 24px 0;
  border-left: 5px solid var(--site-green);
}
.answer-box p { margin: 0; font-size: 1.02rem; color: #26324D; }
.answer-box p + p { margin-top: 10px; }

.chip-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.site .chip {
  background: var(--site-surface); border-radius: 999px; padding: 7px 15px;
  font-size: .82rem; color: #55617D; box-shadow: var(--site-shadow-sm);
  text-decoration: none; display: inline-block;
}
.site a.chip:hover { color: var(--site-navy); transform: translateY(-1px); }

.spec-table { width: 100%; border-collapse: collapse; background: var(--site-surface); border-radius: 18px; overflow: hidden; box-shadow: var(--site-shadow-sm); }
.spec-table th, .spec-table td { padding: 13px 18px; text-align: left; font-size: .9rem; border-bottom: 1px solid rgba(23,35,63,.06); }
.spec-table th { font-weight: 800; width: 38%; color: var(--site-navy); }
.spec-table td { color: #55617D; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

.link-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(10px, .8vw, 16px);
}
.link-grid > * {
  flex: 1 1 240px;
  max-width: 400px;   /* stops a two-item last row becoming two banners */
  min-width: min(100%, 240px);
}
.link-grid a {
  background: var(--site-surface); border-radius: 14px; padding: 12px 16px;
  box-shadow: var(--site-shadow-sm); text-decoration: none;
  font-weight: 700; font-size: .89rem; color: var(--site-navy); display: block;
}
.link-grid a:hover { color: var(--site-green-dp); transform: translateY(-1px); }
.link-grid a small { display: block; font-weight: 600; font-size: .74rem; color: #8A93A8; }

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer { background: var(--site-navy); color: #C4CBDA; padding: 40px 0 26px; margin-top: 56px; }
.site-footer a { color: #C4CBDA; text-decoration: none; font-size: .89rem; }
.site-footer a:hover { color: #fff; }
.site-footer .top { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.site-footer .site-brand .name { color: #fff; }
.site-footer .site-brand .sub  { color: #8FE3B0; }
.site-footer .site-brand .mark { background: rgba(255,255,255,.08); box-shadow: none; }
.site-footer .fnav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer .social { display: flex; gap: 16px; font-size: 1.05rem; }
.site-footer .bottom {
  border-top: 1px solid rgba(255,255,255,.1); margin-top: 26px; padding-top: 18px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .82rem;
}
.site-footer .fcities { margin-top: 22px; font-size: .78rem; line-height: 2; color: #97A1B5; }
.site-footer .fcities a { font-size: .78rem; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
/* The card grids reflow on their own through auto-fit, so what is left here is
   the structural work: two-column layouts collapsing to one, the feature strip
   rearranging its dividers, and the nav folding into a menu. */

/* Nav has to fold before the links crowd the brand, which happens earlier than
   the layout breaks. */
@media (max-width: 1080px) {
  .site-links { display: none; }
  .nav-toggle { display: grid; place-items: center; }

  /* .inner sets no justify-content: on desktop the gap between brand and
     actions comes entirely from .site-links' margin-inline: auto. Hiding
     the links here takes those auto margins with it, so both children
     packed to flex-start and the toggle sat against the brand with the
     rest of the bar empty. The links cannot push once they are display:
     none — or, when the menu opens, position: absolute — so the actions
     have to hold the right edge themselves. */
  .site-nav .actions { margin-left: auto; }
  .site-nav.open .site-links {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; inset: 76px var(--site-gutter) auto; padding: 16px;
    background: var(--site-surface); border-radius: 20px; box-shadow: var(--site-shadow);
  }
}

@media (max-width: 992px) {
  .how-layout    { grid-template-columns: 1fr; }

  /* Text over an image is not worth the contrast risk on a phone, so the
     background copy is dropped and the illustration returns as a block. */
  .hero-bg          { display: none; }
  .hero-inner       { min-height: 0; padding-block: clamp(28px, 5vw, 44px) 22px; }
  .hero-copy        { max-width: none; }
  .hero-art-mobile  { display: block; padding-bottom: clamp(20px, 4vw, 32px); }

  /* The strip stops overlapping the hero once the art sits above it. */
  .feature-strip { grid-template-columns: repeat(2, 1fr); margin-top: 26px; }
  .feature-strip .cell:nth-child(3)   { border-left: 0; }
  .feature-strip .cell:nth-child(n+3) { border-top: 1px solid rgba(23,35,63,.07); }

  .connect-band  { grid-template-columns: 1fr; padding: clamp(22px, 4vw, 32px); }
  .connect-band .divider {
    border-left: 0; border-top: 1px solid rgba(23,35,63,.1);
    padding-left: 0; padding-top: 26px;
  }
}

@media (max-width: 560px) {
  .feature-strip { grid-template-columns: 1fr; }
  .feature-strip .cell + .cell { border-left: 0; border-top: 1px solid rgba(23,35,63,.07); }

  /* Brand + two buttons + toggle do not fit on a phone. Both actions move
     into the menu panel, which is where there is room for them. */
  .site-nav .actions .btn-clay { display: none; }
  .site-nav.open .site-links .btn-clay {
    display: inline-flex; width: 100%; margin-top: 8px;
  }
  .site-brand .sub { display: none; }
  .site-brand .mark { width: 40px; height: 40px; font-size: 1.3rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TOUCH TARGETS
   ──────────────────────────────────────────────────────────────────────────
   The link clusters this site is built on — city chips, keyword chips, the
   nearby grid, both footer rows — were sized for a mouse. On a phone the
   footer links measured 19-23px tall and the city chips 36px, against the
   ~44px a fingertip needs. Around 60-108 targets per page were undersized,
   which on the location pages is most of the internal linking.

   Height comes from min-height plus centring rather than extra padding, so
   the chips keep their shape and only the hit area grows.
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover: none), (max-width: 700px) {
  .site .chip,
  .site .chip-tinted,
  .link-grid a,
  .nearby-grid a,
  .area-grid a,
  .site-nav.open .site-links a,
  .site-nav.open .site-links .btn-clay {
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Footer rows are the worst offenders and the least forgiving: dark ground,
     small type, tightly packed. */
  .site-footer .fnav { gap: 4px 20px; }
  .site-footer .fnav a,
  .site-footer .bottom a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The social row is icons, not text: without a width they were 14px
     wide against a 44px height — the right shape for a fingertip in one
     axis only. */
  .site-footer .social { gap: 6px; }
  .site-footer .social a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Breadcrumbs stay inline — WCAG exempts links inside a run of text,
     and stretching them to 44px would break the row into stacked bars.
     They get a looser line instead, which widens the hit area without
     changing the shape. */
  .city-crumb,
  .site nav[aria-label="Breadcrumb"] { line-height: 2.2; }
  .city-crumb a,
  .site nav[aria-label="Breadcrumb"] a { display: inline-block; padding: 8px 2px; }
  .site-footer .fcities { line-height: 1.6; font-size: .8rem; }
  .site-footer .fcities a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding-right: 6px;
    font-size: .8rem;
  }

  /* The floating WhatsApp button is fixed over the page, so the last row of
     the footer sat underneath it. Reserve its height at the end of the scroll. */
  .site-footer .bottom { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

/* Very wide screens. The container has already stopped growing, so this is
   about giving the hero art the room the copy column no longer needs. */
@media (min-width: 1700px) {
  .quote-grid { grid-template-columns: repeat(3, 1fr); }
  /* Past this width the tiles would grow rather than the row, so cap them. */
  .steps-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { transition: none !important; animation: none !important; }
}

/* Print: strip the clay, keep the words. */
@media print {
  .site-nav, .site-footer, .cta-band, .hero-art { display: none; }
  body.site { background: #fff; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY UTILITIES
   ──────────────────────────────────────────────────────────────────────────
   The product layouts get these from app.css, which the marketing site does
   not load — without them the skip link rendered as visible text in the top
   corner of every page.
   ══════════════════════════════════════════════════════════════════════════ */
.site .skip-to-content {
  position: absolute; top: 0; left: 0; z-index: 200;
  background: var(--site-amber); color: #3D2A00;
  padding: 12px 22px; border-radius: 0 0 16px 0;
  font-weight: 800; text-decoration: none;
  clip-path: inset(50%);
}
.site .skip-to-content:focus { clip-path: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The menu panel carries its own copies of the nav actions for phone widths;
   on anything wider the row shows them and the panel's copies stay hidden. */
.site-links .btn-clay { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   WHATSAPP
   ──────────────────────────────────────────────────────────────────────────
   WhatsApp is how a school office in India actually replies, so it gets its
   own affordance rather than being buried in a contact form. Brand green
   (#25D366) is used deliberately — recolouring it to the site palette would
   cost the instant recognition that makes the button work.
   ══════════════════════════════════════════════════════════════════════════ */
.site .btn-whatsapp {
  background: #25D366; color: #06301A;
  box-shadow: 0 12px 24px rgba(37,211,102,.30),
              inset 0 -4px 8px rgba(0,0,0,.13),
              inset 0 4px 8px rgba(255,255,255,.34);
}
.site .btn-whatsapp:hover { background: #1FBE5A; color: #06301A; transform: translateY(-2px); }
.site .btn-whatsapp i { font-size: 1.15rem; }

/* Floating action, present on every page. Sits above the footer content and
   clear of the safe area on phones with a home indicator. */
.wa-float {
  position: fixed; z-index: 90;
  right: clamp(16px, 2.5vw, 30px);
  bottom: calc(clamp(16px, 2.5vw, 30px) + env(safe-area-inset-bottom, 0px));
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center; font-size: 1.75rem;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(37,211,102,.42),
              inset 0 -4px 8px rgba(0,0,0,.16),
              inset 0 4px 8px rgba(255,255,255,.3);
  transition: transform .16s ease;
}
.wa-float:hover { color: #fff; transform: scale(1.06); }

/* A one-shot pulse on arrival draws the eye without the endless animation
   that makes these things feel like an advert. */
.wa-float::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; animation: wa-pulse 2.2s ease-out 3;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wa-float::after { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   CITY PAGES
   ──────────────────────────────────────────────────────────────────────────
   These were one flat ivory scroll: a banner floating mid-page, a grey wall of
   keyword chips, and every section at the same visual weight. The district
   render now leads the page the way the hero illustration leads the homepage,
   and the sections alternate ground so the eye has somewhere to rest.
   ══════════════════════════════════════════════════════════════════════════ */

.city-hero-full { position: relative; overflow: hidden; padding: 0; }

.city-hero-bg { position: absolute; inset: 0; z-index: 0; }
.city-hero-bg img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 58% center;
}
/* Same reasoning as the homepage: the scrim guarantees contrast whatever the
   crop does to the render's quieter areas. */
.city-hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    100deg,
    var(--site-bg) 0%,
    rgba(243,238,231,.96) 20%,
    rgba(243,238,231,.48) 34%,
    rgba(243,238,231,0)   52%
  );
}

.city-hero-inner {
  position: relative; z-index: 3;
  min-height: clamp(440px, 36vw, 640px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(28px, 3.4vw, 56px);
}
.city-hero-inner > * { max-width: 46ch; }
.city-hero-inner .cta-row { max-width: none; }

/* Breadcrumb sits on the image, so it needs a touch more weight than grey. */
.city-crumb { font-size: .84rem; color: #5C6780; margin-bottom: 14px; font-weight: 600; }
.city-crumb a { color: var(--site-green-dp); text-decoration: none; }
.city-crumb a:hover { text-decoration: underline; }

/* ── Trust strip ──────────────────────────────────────────────────────────
   Four facts a school actually decides on, in the same shape as the homepage
   feature strip so the two pages read as one site. */
.city-stats {
  background: var(--site-surface); border-radius: 26px;
  box-shadow: var(--site-shadow); margin-top: -30px;
  position: relative; z-index: 5;
  /* Always four figures, and four divides by four and two — so the count is
     pinned rather than left to auto-fit, which stranded the fourth at 768. */
  display: grid; grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 860px) { .city-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .city-stats { grid-template-columns: 1fr; } }
.city-stats .cell { padding: 22px 24px; }
.city-stats .cell + .cell { border-left: 1px solid rgba(23,35,63,.07); }
.city-stats .k {
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: clamp(1.3rem, 1.1vw + .9rem, 1.75rem);
  color: var(--site-green-dp); line-height: 1.1; display: block;
}
.city-stats .v { font-size: .85rem; color: #667292; margin: 4px 0 0; }

/* ── Alternating grounds ──────────────────────────────────────────────────
   A tinted band every other section stops the page reading as one long sheet. */
.band-tint {
  background: linear-gradient(180deg, rgba(228,243,234,.55), rgba(243,238,231,0));
}

/* ── Keyword chips, grouped rather than dumped ────────────────────────────
   A single grey wall of fifty phrases reads as keyword stuffing to a person as
   much as to a crawler. Tinting them and capping the count makes the same
   words look like a list of services. */
.site .chip-tinted {
  background: var(--site-surface);
  color: var(--site-navy);
  font-weight: 600;
  box-shadow: var(--site-shadow-sm);
  border-left: 3px solid var(--site-green);
}

/* ── Coverage tiles ───────────────────────────────────────────────────────*/
.area-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px;
}
.area-grid > * { flex: 1 1 170px; max-width: 260px; min-width: min(100%, 160px); }
.area-tile {
  background: var(--site-surface); border-radius: var(--site-r-sm);
  padding: 16px 18px; box-shadow: var(--site-shadow-sm);
  display: flex; align-items: center; gap: 11px;
  font-weight: 700; font-size: .92rem;
}
.area-tile i { color: var(--site-green); font-size: 1.05rem; }

/* ── Nearby district cards, with their own render as a thumbnail ──────────*/
.nearby-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--site-gap);
}
.nearby-grid > * {
  flex: 1 1 230px;
  max-width: 380px;
  min-width: min(100%, 230px);
}
.nearby-card {
  background: var(--site-surface); border-radius: 20px; overflow: hidden;
  box-shadow: var(--site-shadow-sm); text-decoration: none; display: block;
  transition: transform .16s ease, box-shadow .16s ease;
}
.nearby-card:hover { transform: translateY(-3px); box-shadow: var(--site-shadow); }
/* Each district render composes differently — the bus is left in one, centre
   in another — so no single crop position works for all ten. Holding the
   banner's own ratio shows the whole scene and crops nothing. */
.nearby-card img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1200 / 670;
  object-fit: cover;
  background: var(--site-green-bg);
}
/* A span defaults to inline, which ignored the padding entirely. */
.nearby-card .body { display: block; padding: 14px 16px 16px; }
.nearby-card .t { font-weight: 800; color: var(--site-navy); font-size: .95rem; display: block; }
.nearby-card .s { font-size: .78rem; color: #8A93A8; }

/* ── PWA callout ──────────────────────────────────────────────────────────*/
.pwa-note {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--site-surface); border-radius: 22px;
  padding: 20px 24px; box-shadow: var(--site-shadow-sm);
  border-left: 5px solid var(--site-green);
}
.pwa-note .ico-tile { flex-shrink: 0; }
.pwa-note h3 { font-size: 1rem; margin: 0 0 3px; font-family: 'Nunito', sans-serif; font-weight: 800; }
.pwa-note p  { margin: 0; font-size: .89rem; color: #667292; }
.pwa-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.pwa-badge {
  background: var(--site-green-bg); color: var(--site-green-dp);
  border-radius: 999px; padding: 6px 14px; font-size: .8rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}

@media (max-width: 992px) {
  .city-hero-bg     { display: none; }
  .city-hero-inner  { min-height: 0; padding-block: 26px 8px; }
  .city-hero-inner > * { max-width: none; }
  .city-stats       { margin-top: 22px; }
  .city-stats .cell + .cell { border-left: 0; border-top: 1px solid rgba(23,35,63,.07); }
  .pwa-badges       { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS — the journey
   ──────────────────────────────────────────────────────────────────────────
   Four loose cards in a grid wrapped 3 + 1 and left the fourth stranded beside
   a hole, and nothing about them said "these happen in order". The steps are
   now stops along a route, which is what the product literally is: a dashed
   road runs behind numbered pins, and the render at the end is the arrival.
   ══════════════════════════════════════════════════════════════════════════ */

.how-band { position: relative; }

.section-head--center {
  flex-direction: column; align-items: center; text-align: center;
  gap: 12px; margin-bottom: clamp(34px, 4vw, 56px);
}

.journey {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 30px);
  position: relative;
}


.journey-step {
  position: relative; z-index: 1; text-align: center;
  display: flex; flex-direction: column;
}

/* The number rides on the card's top edge rather than floating above it, so
   each step reads as one object while the route still threads through them. */
.journey-pin {
  position: absolute; top: -25px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 50px;
  border-radius: 50%; display: grid; place-items: center;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.2rem;
  color: #fff;
  border: 5px solid var(--site-green-bg);
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.18),
              inset 0 4px 8px rgba(255,255,255,.28);
}

.journey-card {
  position: relative;
  background: var(--site-surface); border-radius: var(--site-r);
  padding: clamp(34px, 2.6vw, 46px) clamp(16px, 1.4vw, 24px) clamp(22px, 1.8vw, 30px);
  box-shadow: var(--site-shadow-sm);
  flex: 1;
  transition: transform .16s ease, box-shadow .16s ease;
}
.journey-step:hover .journey-card { transform: translateY(-4px); box-shadow: var(--site-shadow); }

.journey-card .ico-tile { margin: 0 auto 16px; width: 56px; height: 56px; font-size: 1.5rem; }
.journey-card h3 {
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: 1.05rem; margin: 0 0 7px;
}
.journey-card p { font-size: .88rem; color: #667292; margin: 0; line-height: 1.55; }

/* ── Arrival ──────────────────────────────────────────────────────────────
   The render is the end of the journey, so it sits after the steps at full
   width with the note over it rather than squeezed into a side column. */
.arrival {
  position: relative; margin-top: clamp(34px, 4vw, 60px);
  border-radius: 28px; overflow: hidden;
  box-shadow: var(--site-shadow);
}
.arrival img {
  width: 100%; height: clamp(240px, 26vw, 420px);
  object-fit: cover; object-position: center 48%; display: block;
}
.arrival .note {
  position: absolute; inset-block: 0; left: 0;
  display: flex; align-items: center;
  padding: clamp(18px, 2vw, 34px);
  max-width: min(52%, 52ch);
}
.arrival .note > span.panel {
  display: block;
  background: rgba(255, 252, 249, .93);
  backdrop-filter: blur(6px);
  border-radius: var(--site-r);
  padding: clamp(20px, 2vw, 32px) clamp(22px, 2.2vw, 36px);
  box-shadow: var(--site-shadow);
}
.arrival .note strong {
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 2vw + .8rem, 2.6rem);
  color: var(--site-green-dp); line-height: 1.15; display: block;
}
.arrival .note span { color: #46516D; font-size: clamp(.92rem, .4vw + .8rem, 1.05rem); margin-top: 8px; }

@media (max-width: 900px) {
  .journey { grid-template-columns: 1fr; gap: 0; }
  /* The badge hung outside the card and off the left of the viewport. On a
     phone it sits in the card's own top-left corner instead. */
  .journey-step { text-align: left; padding: 0 0 16px; }
  .journey-pin {
    top: 18px; left: 20px; transform: none;
    width: 42px; height: 42px; font-size: 1.05rem; border-width: 0;
  }
  .journey-card { padding: 18px 22px 22px 74px; }
  .journey-card .ico-tile { display: none; }

  /* Overlaying a caption on a phone-width image leaves neither readable, so
     the two stack: image first, words under it. */
  .arrival { display: flex; flex-direction: column; }
  .arrival img { height: clamp(180px, 44vw, 240px); }
  .arrival .note {
    position: static; max-width: 100%; padding: 0;
  }
  .arrival .note > span.panel {
    border-radius: 0; box-shadow: none; backdrop-filter: none;
    background: var(--site-surface);
    padding: 22px clamp(18px, 5vw, 26px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FLOATING OBJECTS
   ──────────────────────────────────────────────────────────────────────────
   School-shaped things drifting behind the hero. Purely decorative, so they
   are aria-hidden and sit behind everything; the drift itself is driven by
   Motion in public/js/site-motion.js. They are positioned as percentages of
   the hero so they stay clear of the copy at any width, and hidden outright
   on phones where there is no spare space to be decorative in.
   ══════════════════════════════════════════════════════════════════════════ */
.float-layer {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}

.float-thing {
  position: absolute;
  display: grid; place-items: center;
  border-radius: 20px;
  background: var(--site-surface);
  box-shadow: 0 14px 28px rgba(23,35,63,.10),
              inset 0 -4px 8px rgba(23,35,63,.05),
              inset 0 4px 8px rgba(255,255,255,.9);
  font-size: 1.5rem;
  opacity: .92;
  will-change: transform;
}

/* Sizes vary so the group reads as scattered rather than tiled. */
.float-thing.sm { width: 46px; height: 46px; font-size: 1.2rem; border-radius: 15px; }
.float-thing.md { width: 62px; height: 62px; font-size: 1.6rem; border-radius: 20px; }
.float-thing.lg { width: 78px; height: 78px; font-size: 2rem;   border-radius: 25px; }

/* Placement rules, learned the hard way: never left of 50% (the copy column
   reaches ~43% at 1440 and a tile landing on the lead paragraph obscures it),
   never nearer than 4% to an edge (it clips), and out of the middle band where
   the bus and the phone already fill the frame. That leaves the sky strip
   along the top and the outer right — which is where these sit. */
.float-thing.p1 { top: 9%;  left: 52%; }
.float-thing.p2 { top: 6%;  right: 24%; }
.float-thing.p3 { top: 21%; right: 5%; }
.float-thing.p4 { top: 78%; right: 9%; }
.float-thing.p5 { top: 15%; left: 66%; }
.float-thing.p6 { top: 47%; right: 4%; }

/* The hero copy has to sit above the drifting objects. */
.hero-inner, .city-hero-inner { z-index: 3; }

@media (max-width: 1100px) { .float-thing.p2, .float-thing.p5, .float-thing.p1 { display: none; } }
@media (max-width: 992px)  { .float-layer { display: none; } }

/* A grid of exactly six. 3 and 2 both divide it, so pinning the column count
   leaves no orphan at any breakpoint — which a fluid basis cannot promise. */
.link-grid--six { display: grid; grid-template-columns: repeat(3, 1fr); }
.link-grid--six > * { max-width: none; min-width: 0; }
@media (max-width: 900px) { .link-grid--six { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .link-grid--six { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   HERO VIDEO
   ──────────────────────────────────────────────────────────────────────────
   The loop sits on top of the still, never instead of it. If the video fails,
   is still downloading, or is switched off below, the render underneath is
   what shows — so the hero is never a blank box.
   ══════════════════════════════════════════════════════════════════════════ */
.bg-video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Same framing as the still it replaces, so switching between them does not
   move the composition. The city loop is letterboxed 8.4% top and bottom;
   cover crops well past that at every viewport this runs on. */
.hero-bg .bg-video      { object-position: 78% center; }
.city-hero-bg .bg-video { object-position: 72% center; }

/* The still sits underneath at z-index 0 — see .hero-bg / .city-hero-bg. */
.hero-bg picture, .city-hero-bg picture { position: absolute; inset: 0; z-index: 0; }

/*
 * Two reasons the video does not run below 992px:
 *  - the background treatment is dropped there anyway, and
 *  - this is a 3–4 MB autoplay on a market where mobile data is metered.
 * A poster and a still are the right thing to send a phone.
 */
@media (max-width: 992px) { .bg-video { display: none; } }

@media (prefers-reduced-motion: reduce) { .bg-video { display: none; } }

/* The city loop is letterboxed: 91px of black top and bottom of a 1080-tall
   frame, 8.4% each side. object-fit: cover crops some of that but not all at
   every container ratio, so a black line showed along the top edge. Scaling
   the element past the container pushes both bars out of frame for good. */
.bg-video--letterboxed { height: 122%; top: -11%; }

/* ── Policy pages ─────────────────────────────────────────────────────────
   Long-form prose rather than the tile grid the marketing pages use. Held to a
   readable measure: a policy nobody can read through is a policy nobody reads,
   and these are the pages a payment gateway's reviewer actually reads. */
.legal-body .site-wrap { max-width: 760px; }
.legal-updated {
  font-size: .85rem;
  color: var(--site-ink-mute, #6b6b6b);
  margin: 0 0 26px;
}
.legal-body h2 {
  font-size: 1.18rem;
  margin: 30px 0 10px;
  line-height: 1.3;
}
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body p,
.legal-body li {
  font-size: .96rem;
  line-height: 1.68;
  margin: 0 0 12px;
}
.legal-body ul {
  margin: 0 0 14px;
  padding-left: 20px;
}
.legal-body li { margin-bottom: 7px; }
.legal-nav {
  margin-top: 38px;
  padding-top: 18px;
  border-top: 1px solid var(--site-border, #e6e0d8);
  font-size: .9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
}
.legal-nav span { color: var(--site-ink-mute, #6b6b6b); }

/* ── Free van check ───────────────────────────────────────────────────────
   A parent arrives with one thing: a number plate. The form is the page, so
   it is the largest thing on it and needs no hunting for. */
.vc-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 8px;
  max-width: 560px;
}
.vc-form input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 14px 18px;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 2px solid var(--site-border, #e6e0d8);
  border-radius: 14px;
  background: var(--site-surface, #fff);
  color: var(--site-ink, #1b1b1f);
}
.vc-form input::placeholder { font-weight: 500; letter-spacing: .04em; opacity: .45; }
.vc-form input:focus { outline: none; border-color: #2E9E5B; }
.vc-help { font-size: .85rem; color: var(--site-ink-mute, #6b6b6b); margin: 0; }

.vc-card {
  border-radius: 18px;
  padding: 26px;
  border: 1px solid var(--site-border, #e6e0d8);
  background: var(--site-surface, #fff);
}
.vc-card h2 { font-size: 1.35rem; margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vc-card h3 { font-size: 1rem; margin: 22px 0 10px; }
.vc-good  { border-left: 5px solid #2E9E5B; }
.vc-warn  { border-left: 5px solid #EDA92B; }
.vc-unknown { border-left: 5px solid #9aa3b2; }

.vc-badge { font-size: .74rem; font-weight: 800; padding: 4px 11px; border-radius: 999px; letter-spacing: .02em; }
.vc-badge-good { background: #E4F3EA; color: #1E6B3C; }
.vc-badge-warn { background: #FBEED2; color: #7A5306; }

.vc-driver { font-size: .96rem; margin: 0 0 4px; }

.vc-papers { list-style: none; margin: 0; padding: 0; }
.vc-paper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 0;
  border-bottom: 1px solid var(--site-border, #eee7dd);
  font-size: .94rem;
}
.vc-paper:last-child { border-bottom: 0; }
.vc-paper-label { font-weight: 700; }
.vc-paper-detail { color: var(--site-ink-mute, #6b6b6b); }
/* Colour carries the state, but never alone: the words say it too, for anyone
   who cannot separate these hues. */
.vc-paper.vc-expired  .vc-paper-detail { color: #C0392B; font-weight: 700; }
.vc-paper.vc-expiring .vc-paper-detail { color: #9A6A00; font-weight: 700; }
.vc-paper.vc-valid    .vc-paper-detail { color: #1E6B3C; }

.vc-list { margin: 0; padding-left: 20px; font-size: .95rem; line-height: 1.65; }
.vc-list li { margin-bottom: 7px; }
.vc-note {
  margin: 18px 0 0;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--site-bg, #f6f2ec);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--site-ink-soft, #4a4a52);
}