/* =========================================================
   Round - shared design system, using Jess's exact palette:
   #1b3fd4 (cobalt, for accents/buttons/links - used sparingly,
   not as full-bleed backgrounds), #f7f0e3 (warm cream, main page
   background), #0d1a3a (deep navy, text + a few grounding dark
   blocks), #e8dcc8 / #ede5d5 (warm tan panel tints), #b8c8f0
   (soft periwinkle, light accent tint). Cobalt carries the brand
   through buttons, links, and small details rather than large
   colour blocks. No coral/orange anywhere in the palette.
   ========================================================= */

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

  --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; }

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

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

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;
}
.btn:active { transform: scale(0.97); }

.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-flex;
  align-items: center;
  gap: 6px;
  background: var(--cobalt-tint);
  color: var(--cobalt);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250,249,246,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: 48px;
}
.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;
  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: var(--cobalt); color: #fff; }
.nav-cta { display: flex; align-items: center; gap: 14px; }

/* ---- 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; }
}

.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;
  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);
  border: 1px solid var(--line);
}

/* ---------- 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-illustration {
  position: absolute;
  right: 24px;
  bottom: 28px;
  height: 190px;
  width: auto;
  pointer-events: none;
  opacity: 0.95;
}
@media (max-width: 900px) {
  .footer-illustration { display: none; }
}
.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: 26px;
  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-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; }
}

/* ---------- 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); max-width: 480px; }

.filter-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.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);
  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: 1px solid var(--line); 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 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: 2px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px 24px; display: flex; flex-direction: column;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.pricing-card.featured { border-color: var(--cobalt); 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-size: 34px; font-weight: 800; color: var(--ink); margin: 6px 0 2px; }
.pricing-card .price span { font-size: 15px; font-weight: 600; 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; }

/* 5-card pricing layout (Jess, 2026-09-13) - a dedicated grid rather
   than reusing .grid-3, since that class is shared with other pages'
   3-column sections and this now needs 5. Wraps to 3, then 2, then 1
   column as the viewport narrows rather than ever squeezing 5 cards
   into one cramped row. */
/* 5-card pricing slider (Jess, 2026-09-13) - horizontal scroll rather
   than a wrapping grid, so all 5 tiers sit in a single row on desktop
   (with arrow buttons for people who'd rather click than drag) and
   the exact same markup becomes a natural swipe-to-scroll strip on
   mobile with zero extra code - one mechanism for both, not a
   separate collapsible design for small screens. scroll-snap keeps
   cards landing cleanly on drag/swipe/arrow-click instead of stopping
   mid-card. Cards get a fixed width instead of stretching to fill a
   grid track, which is what makes horizontal scrolling meaningful.
*/
.pricing-slider-wrap { position: relative; margin: 0 -4px; }
.grid-pricing {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Top padding increased from 4px - overflow-x:auto forces overflow-y
     to compute as 'auto' too (never 'visible' once one axis is set),
     so the "Most popular" badge floating above the card's top edge
     needs real room here or it gets clipped by this container's own
     scroll box, not just visually tucked behind it. */
  padding: 24px 4px 16px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.grid-pricing::-webkit-scrollbar { height: 6px; }
.grid-pricing::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.grid-pricing .pricing-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
}
.pricing-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-card);
  font-size: 20px;
  color: var(--cobalt);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.pricing-slider-arrow.left { left: -18px; }
.pricing-slider-arrow.right { right: -18px; }
.pricing-slider-arrow:hover { background: var(--cobalt-tint); }
/* Arrows are a desktop convenience for clicking instead of dragging -
   on touch devices the swipe gesture is already natural and the
   floating circles would just sit awkwardly over the content. */
@media (max-width: 780px) { .pricing-slider-arrow { display: none; } }

.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;
}