/* =========================================================
   Round - shared design system (poster-style redesign, approved
   by Jess over design review). Anton for display/poster headlines,
   Archivo for body copy. Palette: #1b3fd4 cobalt / #142fa8 deep /
   #dbe3fb tint, #0d1a3a ink, #f7f7f5 paper. Cobalt carries the
   brand through buttons, links, bold colour bands and small
   details. No coral/orange anywhere in the palette.
   ========================================================= */

:root {
  --cobalt: #1b3fd4;
  --cobalt-deep: #142fa8;
  --cobalt-tint: #dbe3fb;
  --ink: #0d1a3a;
  --ink-soft: #55617f;
  --paper: #f7f7f5;
  --panel: #FFFFFF;
  --tan: #e8dcc8;
  --tan-light: #ede5d5;
  --amber: #FFB43C;
  --gold-star: #FFC700;
  --line: #E2E6ED;
  --green: #1F9D55;

  --display: 'Anton', sans-serif;
  --sans: 'Archivo', sans-serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 2px 4px rgba(18,24,58,0.04), 0 12px 28px rgba(18,24,58,0.06);
  --shadow-lift: 0 8px 20px rgba(42,62,240,0.18);

  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans), -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--sans), sans-serif;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* ---- Poster-style display headline - the Anton treatment used for
   hero headlines and big section titles, applied selectively via
   this class rather than globally on every heading (card/footer
   headings stay in Archivo bold, matching the mockup). ---- */
.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.display-accent { color: var(--cobalt); }

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 640px) {
  .container { padding: 0 18px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 16px;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  backface-visibility: hidden;
}
.btn:active { transform: scale(0.97); }
/* Lift-on-hover, matching the poster-brand mockup's .btn-pill:hover
   treatment - every pill/outline/cobalt/ink/white button now has a
   visible hover state (previously only .btn-primary/.btn-light/
   .btn-ghost/.btn-outline-white changed background on hover, with no
   feedback at all for a plain .btn-sm/.btn-block etc). Each variant's
   own :hover rule below still changes its background on top of this. */
.btn:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(13,26,58,0.04), 0 12px 24px rgba(13,26,58,0.12); }

.btn-primary {
  background: var(--cobalt);
  color: #fff;
  box-shadow: var(--shadow-lift);
}
.btn-primary:hover { background: var(--cobalt-deep); }

/* ---- Light button: used on cobalt-background banners, since a
   cobalt button would disappear into a cobalt banner. ---- */
.btn-light { background: #fff; color: var(--cobalt); box-shadow: var(--shadow-lift); }
.btn-light:hover { background: var(--tan-light); }

.btn-ghost {
  background: transparent;
  color: var(--cobalt);
  border-color: var(--cobalt);
}
.btn-ghost:hover { background: var(--cobalt-tint); }

.btn-outline-white {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.btn-outline-white:hover { background: rgba(255,255,255,0.22); }

.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Eyebrow / pill tags ---------- */
.eyebrow {
  display: inline-block;
  color: var(--cobalt);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247,247,245,0.94);
  backdrop-filter: blur(10px);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  height: 40px;
}
.nav-logo img { height: 100%; width: auto; display: block; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-links a {
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-links a:hover { background: var(--cobalt-tint); color: var(--cobalt); }
.nav-links a.active { background: none; color: var(--cobalt); }
.nav-cta { display: flex; align-items: center; gap: 14px; }

/* ---- Join Round dropdown (Drive / Partner your business) - one nav
   entry point so both are easy to find, instead of Partner being the
   only visible link and Drive having no discoverable entry point at
   all. ---- */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 16px; border-radius: var(--radius-pill);
  font-family: inherit; font-weight: 600; font-size: 16px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.01em;
  background: none; border: none; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown-trigger .caret { font-size: 10px; transition: transform 0.15s ease; }
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger { background: var(--cobalt-tint); color: var(--cobalt); }
.nav-dropdown-trigger.active { background: none; color: var(--cobalt); }
.nav-dropdown:hover .nav-dropdown-trigger .caret,
.nav-dropdown:focus-within .nav-dropdown-trigger .caret { transform: rotate(180deg); }
/* top:100% with no gap, plus padding-top standing in for the visual
   gap, so the mouse never leaves a hoverable area while moving from
   the trigger down into the menu - a real gap here (top:calc(100% +
   10px)) breaks :hover the instant the cursor crosses it, which is
   why the dropdown only seemed to work after something else (like
   opening the mobile menu) happened to leave it in a hovered state. */
.nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 10px; min-width: 200px; z-index: 30;
}
.nav-dropdown-menu-inner {
  background: #fff; border-radius: 14px;
  box-shadow: 0 10px 28px rgba(18,24,58,0.12); padding: 6px;
}
.nav-dropdown-menu a {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--cobalt-tint); color: var(--cobalt); }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }

/* ---- Cart icon in nav ---- */
.cart-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
}
.cart-badge {
  position: absolute; top: -3px; right: -3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--cobalt-deep); color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

.nav-burger {
  display: none;
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  align-items: center;
  justify-content: center;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--cobalt);
  position: relative;
  transition: transform 0.2s ease;
}
.nav-burger span::before { position: absolute; top: -6px; }
.nav-burger span::after { position: absolute; top: 6px; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  /* Phones and tablets: no "Order now" pill in the nav bar, just the
     menu button. Desktop keeps it. */
  .nav-cta .btn { display: none; }
}

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 24px;
  background: var(--cobalt);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 12px 14px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
}
.mobile-menu a:hover { background: rgba(255,255,255,0.15); }
.mobile-menu a.active { background: rgba(255,255,255,0.18); }

/* ---------- Section rhythm ---------- */
.section { padding: 96px 0; position: relative; }
.section-tight { padding: 64px 0; }
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .section-tight { padding: 44px 0; }
}

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; }
.section-head p { color: var(--ink-soft); font-size: 17px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Cards ---------- */
.card {
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  backface-visibility: hidden;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

/* ---------- Top status banner (site-wide, cobalt strip above nav) ---------- */
.top-status-banner {
  background: var(--cobalt);
  text-align: center;
  padding: 10px 20px;
}
.top-status-banner-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--cobalt);
  color: rgba(255,255,255,0.72);
  padding: 64px 0 32px;
  position: relative;
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-logo {
  height: 96px;
  margin-bottom: 12px;
}
.footer-logo img { height: 100%; width: auto; display: block; }
.footer-col h4 {
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.footer-col a, .footer-col p {
  display: block;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  color: rgba(255,255,255,0.72);
  font-size: 15px;
  margin-bottom: 10px;
}
.footer-col a:hover { color: #fff; }
.footer-col a.footer-whatsapp { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.footer-col a.footer-whatsapp svg { flex-shrink: 0; }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
}
.footer-social a:hover { background: rgba(255,255,255,0.2); }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-logo { height: 80px; }
}

/* ---------- Utility ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .grid-4 { grid-template-columns: 1fr; }
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* =========================================================
   Shared page-level components (Order Food / Rides / About /
   Partner) - same bold block language as the redesigned home
   page. Plain flex/grid, fixed or intrinsic sizing throughout,
   no percentage-nested or aspect-ratio-based decoration.
   ========================================================= */

.page-hero {
  background: var(--paper);
  /* Bottom padding trimmed way down - every page's very next section
     already brings its own top padding (64-96px depending on the
     page), so the hero's own bottom padding was stacking on top of
     that and creating a huge empty gap before any real content on
     Order Food, About, Partner, and Rides alike. Top padding trimmed
     too - it was stacking directly under the 76px-tall sticky nav,
     leaving a ~150px dead gap before the heading on every page. */
  padding: 36px 0 8px;
}
/* Removed a 1080px override here that narrowed the hero specifically -
   every other section on these pages uses the standard 1180px
   --container width, so the hero (being centered but narrower) sat
   with extra margin on each side, shifting its heading's left edge
   noticeably inward compared to everything below it on the same page.
   No override now = same left edge as the rest of the page. */
.page-hero h1 {
  font-size: clamp(34px, 5.5vw, 54px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.page-hero h1 span { color: var(--cobalt); }
.page-hero p.lede { font-size: 17px; color: var(--ink-soft); }

.filter-pills-wrap { display: flex; align-items: center; gap: 8px; }
.filter-pills {
  display: flex; gap: 10px; flex-wrap: nowrap; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
}
.filter-pills::-webkit-scrollbar { display: none; }
.filter-scroll-btn {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.filter-scroll-btn:hover { background: var(--cobalt-tint); border-color: var(--cobalt-tint); color: var(--cobalt); }
.filter-scroll-btn[hidden] { visibility: hidden; }
.filter-pill {
  background: #fff; border: 1.5px solid var(--line);
  padding: 9px 18px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 13px; color: var(--ink-soft); white-space: nowrap; flex-shrink: 0;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.filter-pill:hover:not(.active) { background: var(--cobalt-tint); border-color: var(--cobalt-tint); color: var(--cobalt); }
.filter-pill.active { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }

/* Mobile: the pill row doesn't fit/scroll well on a small screen, so
   it collapses into a single dropdown instead. Both markups render in
   the HTML; the media query below is what actually switches which one
   shows - keeps this CSS-only, no JS needed since the row is already
   just decorative (no filtering logic behind it on this page). */
.filter-select {
  display: none;
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
@media (max-width: 640px) {
  .filter-pills { display: none; }
  .filter-select { display: block; }
}

.option-block {
  background: #fff; border-radius: var(--radius-lg);
  padding: 36px 32px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.option-block .option-icon {
  font-size: 48px; margin-bottom: 20px; line-height: 1;
}
.option-block .option-icon img { width: 76px; height: 76px; object-fit: contain; margin: 0 auto; }
.option-block h3 { font-size: 18px; margin-bottom: 10px; }
.option-block p { color: var(--ink-soft); font-size: 15px; margin-bottom: 24px; flex: 1; }

/* Starts faded (a light tint of the button's own colour), goes full
   solid colour on hover - reverse of the usual hover treatment, but
   matches the softer at-rest look asked for while keeping the same
   bold full-colour feel as soon as someone's about to click. */
.option-btn { transition: background 0.15s ease, color 0.15s ease; }
.option-btn-cobalt { background: var(--cobalt-tint); color: var(--cobalt); }
.option-btn-cobalt:hover { background: var(--cobalt); color: #fff; }
.option-btn-green { background: #E9F7EE; color: var(--green); }
.option-btn-green:hover { background: var(--green); color: #fff; }
.option-btn-amber { background: #FFF6E5; color: var(--amber); }
.option-btn-amber:hover { background: var(--amber); color: #fff; }

.pricing-card {
  background: #fff; border-radius: var(--radius-lg);
  padding: 24px 24px; display: flex; flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  backface-visibility: hidden;
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.pricing-card.featured { box-shadow: var(--shadow-lift); }
/* "Most popular" now floats above the card's top edge instead of
   sitting inside the card's own content flow (Jess, 2026-09-13) -
   previously it pushed Growth's heading and price down below where
   every other card's heading sits, since the badge consumed real
   vertical space before the h4. Absolute-positioned and centered on
   the top border instead, so Growth's actual content starts at
   exactly the same height as the other 4 cards. */
.pricing-card .eyebrow {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.pricing-card .price { font-family: var(--display); font-size: 34px; font-weight: 400; color: var(--cobalt); margin: 6px 0 2px; }
.pricing-card .price span { font-size: 15px; font-weight: 400; color: var(--ink-soft); }
.pricing-card ul { list-style: none; margin: 14px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pricing-card li { font-size: 14.5px; color: var(--ink-soft); padding-left: 22px; position: relative; }
.pricing-card li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.pricing-card .btn { margin-top: auto; }


.plan-meta {
  margin: 14px 0 4px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* Safety net alongside the <br> forcing each value onto its own
     line in the HTML - "Best for" text still varies enough in length
     (e.g. Premium's wraps to 2 lines alone, Starter's fits on 1) that
     line-forcing by itself doesn't fully equalize height. A fixed
     min-height means every card's tick list starts at the same
     point regardless, with shorter content just leaving a bit of
     empty space rather than everything shifting up. */
  min-height: 150px;
}
.plan-meta div { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.plan-meta strong { color: var(--ink); font-weight: 700; }
.plan-blurb {
  font-size: 13.5px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.6;
  margin: 14px 0 0;
}

.quote-block {
  background: var(--tan-light); border-radius: var(--radius-lg);
  padding: 36px; display: flex; align-items: center; gap: 20px;
}
.quote-avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--cobalt);
  color: #fff; font-weight: 700; font-size: 20px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ---------- Poster-redesign additions - shared across the 7 pages
   carrying the new Anton/Archivo look (Home, Order, Rides, About,
   Partner, Drive, Contact). ---------- */

.cta-band {
  background: #fff; border: 2px solid var(--cobalt); border-radius: var(--radius-lg);
  padding: 44px; display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.cta-band h3 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  color: var(--cobalt-deep); font-size: clamp(24px, 3vw, 30px);
  letter-spacing: 0.01em; line-height: 1.2; margin-bottom: 8px;
}
.cta-band p { color: var(--ink-soft); margin: 0; max-width: 420px; }

.story-card { background: #fff; border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-card); transition: transform 0.18s ease, box-shadow 0.18s ease; backface-visibility: hidden; }
.story-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.story-card h3 { font-size: 18px; margin-bottom: 10px; }
.story-card p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; margin: 0; }

/* Checklist card - a short "what's included" list next to a hero,
   e.g. the Rides page. */
.checklist-card { background: #fff; border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-card); transition: transform 0.18s ease, box-shadow 0.18s ease; backface-visibility: hidden; }
.checklist-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.checklist-card h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cobalt); margin-bottom: 18px; }
.checklist-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.checklist-card li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--ink); }
.checklist-card li .tick { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--cobalt-tint); color: var(--cobalt-deep); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.checklist li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; color: var(--ink); }
.checklist .tick { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(31,157,85,0.14); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; }

/* Numbered "how it works" option card. */
.option-card { background: #fff; border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 12px; transition: transform 0.18s ease, box-shadow 0.18s ease; backface-visibility: hidden; }
.option-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.option-card .num { font-family: var(--display); font-size: 32px; color: var(--cobalt); line-height: 1; }
.option-card h3 { font-size: 18px; font-weight: 800; text-transform: uppercase; }
.option-card p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }

/* Full-bleed cobalt colour band (also used as .cobalt-band elsewhere
   on Home - this is the same idea given a page-agnostic name). */
.band-cobalt {
  width: 100vw; position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  background: var(--cobalt); color: #fff; padding: 72px 0;
}
.section-eyebrow {
  display: inline-block;
  color: var(--cobalt);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.band-cobalt .section-eyebrow, .band-cobalt .eyebrow { color: rgba(255,255,255,0.7); background: transparent; padding: 0; }
.band-cobalt h2 { color: #fff; }
.band-cobalt p { color: rgba(255,255,255,0.75); }

.value-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 36px; }
.value-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.value-item .ic { width: 64px; height: 64px; border-radius: 16px; background: rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; font-size: 40px; }
.value-item h4 { margin: 0; font-weight: 800; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
.value-item p { margin: 0; font-size: 14px; color: rgba(255,255,255,0.78); }
@media (max-width: 760px) { .value-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Simple fee/savings calculator card, used on Partner. */
.calc-card { background: #fff; border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-card); transition: transform 0.18s ease, box-shadow 0.18s ease; backface-visibility: hidden; }
.calc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.calc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.calc-row label { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.calc-row input[type="range"] { flex: 1; margin: 0 14px; accent-color: var(--cobalt); }
.calc-row .calc-value { font-weight: 800; color: var(--cobalt-deep); min-width: 64px; text-align: right; }
.calc-result { background: var(--cobalt-tint); border-radius: var(--radius-md); padding: 20px; text-align: center; margin-top: 10px; }
.calc-result .calc-amount { font-family: var(--display); font-size: 40px; color: var(--cobalt-deep); line-height: 1; }
.calc-result .calc-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin-top: 6px; }

/* Blue band header for the account pages (partner and driver log in,
   partner application status), matching the dashboards: a Round-blue
   band with rounded bottom corners, eyebrow + big Anton headline, and
   the page's cards overlapping its bottom edge. The band is the
   heading block's own full-width background, so the page's section and
   container markup stays as it is. */
.auth-page { overflow-x: clip; }
.section:has(> .container > div > .auth-head:first-child) { padding-top: 0; }
.auth-head { position: relative; z-index: 0; text-align: center; color: #fff; padding: 56px 0 128px; }
.auth-head::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--cobalt); border-radius: 0 0 40px 40px; }
.auth-eyebrow { display: block; font-weight: 700; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: #C6CFF5; }
.auth-head h1 { margin: 12px 0 10px; font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; color: #fff; font-size: clamp(44px, 6vw, 76px); line-height: 0.96; letter-spacing: 0.01em; }
.auth-head p { margin: 0 auto; max-width: 34em; color: #C6CFF5; font-size: 17px; }
.auth-head .auth-pill { margin-top: 16px; display: inline-block; }
.auth-overlap.auth-overlap { position: relative; margin-top: -88px; }
@media (max-width: 640px) {
  .auth-head { padding: 40px 0 112px; }
  .auth-head::before { border-radius: 0 0 28px 28px; }
}

/* Phones and tablets zoom in when you tap a box with text under 16px,
     then stay zoomed. 16px on touch screens stops that. */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea { font-size: 16px !important; }
}