/* --accent-blue sampled directly from the real logo.png (its dominant non-white/black pixel
   color, #0355C5 - confirmed via an ImageMagick histogram) - the lighter #4ab2f1 used here
   before was a guess copied from the main site's theme variable of the same name, and didn't
   actually match the logo/brand blue. */
:root {
  --accent-blue: #0355c5;
  --accent-blue-active: #023e94;
  --dark-gray: #2b2b2b;
  --gray: #6b6b6b;
  --light-blue-bg: #eaf6fe;
  --border: #e2e2e2;
  --card-shadow: 0 4px 16px rgba(3, 85, 197, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--dark-gray);
  line-height: 1.55;
  background: #fff;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent-blue-active);
}

svg {
  width: 100%;
  height: 100%;
}

/* ---------- Header ---------- */

.site-header {
  padding: 14px 24px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 10;
  background: #fff;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: none;
  color: var(--dark-gray);
  cursor: pointer;
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
}

/* Collapsed by default on mobile - #nav-toggle's click handler (script.js) adds .is-open,
   no page reload/anchor-jump needed to reveal it. Fully keyboard/no-JS safe: without JS the
   toggle button does nothing, but every link underneath is still in the DOM and reachable by
   tabbing to it, just not visible - acceptable for a single-page nav this short. */
.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 4px;
  padding: 12px 20px 16px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.site-nav.is-open {
  display: flex;
}

.site-nav a {
  padding: 10px 4px;
  color: var(--dark-gray);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.site-nav a:last-of-type {
  border-bottom: none;
}

/* .btn-nav.btn (not bare .btn-nav) - the base .btn class sets display:inline-block and is
   defined later in the file (Buttons section), which otherwise wins on source order at
   equal specificity - confirmed live, the nav CTA showed in the mobile dropdown despite
   this rule. */
.btn-nav.btn {
  display: none;
}

@media (min-width: 720px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 0;
    box-shadow: none;
  }

  .site-nav a {
    padding: 0;
    border-bottom: none;
    font-weight: 500;
  }

  .site-nav a:hover {
    color: var(--accent-blue-active);
  }

  .btn-nav.btn {
    display: inline-block;
    min-width: 0;
    padding: 10px 20px;
    background: var(--accent-blue);
    color: #fff;
    box-shadow: none;
  }

  .btn-nav.btn:hover {
    background: var(--accent-blue-active);
  }
}

/* ---------- Section rhythm ---------- */

.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 20px;
}

.section-lede {
  color: var(--gray);
  text-align: center;
  margin: -4px 0 28px;
}

h1, h2, h3 {
  line-height: 1.2;
  margin: 0 0 12px;
}

h2 {
  font-size: 1.6rem;
  text-align: center;
  letter-spacing: -0.01em;
}

/* Scroll-reveal: fully visible by default (no-JS fallback) - script.js adds
   .reveal-pending before observing, so only JS-enabled browsers ever see the
   pre-animation hidden state at all. */
.reveal-pending {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.reveal-pending.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Hero ---------- */

/* Driver-at-the-doorstep hero photo (~80KB webp, downsized from a 2MB source). Deliberately
   composed with a solid brand-blue block down the left ~38% of the frame and all the photo
   content (driver, family, van) filling the rest - background-position:left keeps that blue
   block anchored in view no matter how aggressively cover has to crop on a narrow phone
   (confirmed live: at typical mobile hero heights the crop lands almost exactly on the blue/
   photo boundary, so mobile reads as a clean blue banner and the scene itself reveals
   progressively from tablet width up - not a bug, the image was built for this). White text
   directly on that blue block, no gradient/scrim needed - solid color is already full
   contrast. */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  /* This version of the photo has its text-safe blue block in the CENTER (van/crate at the
     left edge, driver/family at the right edge) rather than anchored to one side, so
     cover+center keeps it in frame at any width, and the gradient patch below fades outward
     in both directions instead of left-to-right. The photo's own blue (~#2d85f0, baked into
     the pixels) still doesn't match the real brand blue, same reason as before. */
  background-image: radial-gradient(ellipse at center, var(--accent-blue) 0%, var(--accent-blue) 35%, rgba(3, 85, 197, 0) 65%), url("assets/hero.webp");
  background-position: center, center;
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
  color: #fff;
  text-align: center;
  padding: 64px 24px 56px;
  animation: fade-in 0.6s ease-out;
}

@media (min-width: 700px) {
  .hero {
    min-height: 520px;
  }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero, .reveal-pending {
    animation: none;
    transition: none;
  }
}

.hero-inner {
  position: relative;
  max-width: 480px;
}

.hero h1 {
  font-size: 2.1rem;
  font-weight: 800;
}

.hero-sub {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 30px;
}

/* align-items:stretch (the default, so not set explicitly) on mobile - "Start your monthly
   list" at .hero-inner's narrower widths was wrapping to two lines inside a shrink-to-fit
   button, which looked broken (confirmed live). Full-width stacked buttons give the text
   the whole row to lay out on one line instead. Back to natural (unstretched) width once
   there's room to sit side-by-side. */
.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 560px) {
  .hero-ctas {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}

/* Pinned to the bottom of .hero itself (not a sibling of .hero-inner in normal flow) - .hero
   is a flex container centering .hero-inner vertically, so this needs to opt out of that
   flow to stay bottom-anchored rather than floating up next to the text. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: block;
  width: 28px;
  height: 28px;
  color: rgba(255, 255, 255, 0.85);
  animation: bob 2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue {
    animation: none;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  min-width: 220px;
  text-align: center;
  white-space: nowrap;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out;
}

/* Both .btn-primary and .btn-secondary only ever appear over a blue background (the hero
   photo's blue block, or .section-cta-bottom's blue gradient) - white-on-blue / outlined
   white throughout, no light-background variant needed. */
.btn-primary {
  background: #fff;
  color: var(--accent-blue-active);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-primary:hover {
  background: #f2f2f2;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

/* ---------- Feature section ---------- */

.section-features {
  text-align: center;
}

.section-features p {
  max-width: 640px;
  margin: 0 auto 16px;
  text-align: left;
}

/* The flyer's own 3-step marketing summary (pick/choose/receive) - same icon-chip visual
   language as .step-icon in "How it works" below, but simpler (no numbering, no connecting
   line) since this is the compressed version, not the real click-by-click one. */
.mini-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 56px;
  text-align: center;
}

@media (min-width: 700px) {
  .mini-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 0 20px;
  }
}

.mini-step-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  padding: 12px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
}

.mini-step h3 {
  font-size: 1.1rem;
  margin: 0 0 8px;
}

.section-features .mini-step p {
  text-align: center;
  color: var(--gray);
  margin: 0;
}

/* ---------- Facts ---------- */

.section-facts-band {
  background: #fff;
}

/* Single column on mobile, single row of 3 from ~600px - 3 cards now (Registered business
   removed), so a 2x2 grid would leave a dangling gap; stacked/single-row reads cleanly for
   an odd count instead. */
.facts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .facts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fact-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--card-shadow);
}

.fact-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  color: #fff;
  background: var(--accent-blue);
  border-radius: 10px;
  padding: 7px;
}

.fact-card h3 {
  font-size: 0.95rem;
  margin: 0 0 6px;
}

.fact-card p {
  margin: 0;
  color: var(--gray);
  font-size: 0.9rem;
}

/* Specials/new-item broadcasts - a different thing from the WhatsApp ordering card above,
   kept visually separate (its own line below the grid) rather than folded into that card
   or added as an awkward 5th grid item. */
.specials-note {
  text-align: center;
  color: var(--gray);
  font-size: 0.9rem;
  margin: 18px 0 0;
}

/* ---------- Steps ---------- */

/* Full-bleed band (outer wrapper, not .section itself - that class carries the 680px
   max-width every other section needs) so this reads as a visually separate block from the
   plain-white Feature section above it, the same way .section-facts and .section-cta-bottom
   already stand apart from their neighbors via their own background. */
.section-howitworks-band {
  background: #f5f8fb;
}

.steps {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  counter-reset: none;
}

.steps li {
  display: flex;
  gap: 16px;
  position: relative;
  padding-bottom: 28px;
}

/* Connecting line between step icons, drawn from each circle's center down to the next */
.steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

/* Icon chip carries the polish (same visual family as the legitimacy cards' .fact-icon);
   the number badge overlapping its corner still carries the sequence - "numbers alongside
   icons," not one replacing the other, per the visual spec. */
.step-icon {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  z-index: 1;
}

.step-icon svg {
  width: 22px;
  height: 22px;
}

.step-num {
  position: absolute;
  bottom: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent-blue-active);
  border: 2px solid var(--accent-blue);
  font-weight: 700;
  font-size: 0.7rem;
}

.step-text {
  padding-top: 10px;
}

.steps-note {
  color: var(--gray);
  font-size: 0.95rem;
  margin: 0;
  padding-left: 60px;
}

/* Staggered (zigzag) timeline once there's width to spare - a single left-aligned column
   with icons pinned to the left and text stretching all the way across a now-1080px-wide
   section looked lopsided (confirmed live: a wall of text on the right, empty space
   nowhere). Mobile keeps the simple straight version above - alternating left/right only
   makes sense once a line can visually run down the middle of the page. */
@media (min-width: 800px) {
  .steps {
    position: relative;
    max-width: 880px;
    margin: 0 auto 40px;
  }

  .steps::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 22px;
    bottom: 78px;
    width: 2px;
    background: var(--border);
    transform: translateX(-50%);
  }

  .steps li {
    width: 50%;
    padding-bottom: 40px;
  }

  .steps li::before {
    display: none;
  }

  .steps li:nth-child(odd) {
    padding-right: 24px;
    flex-direction: row-reverse;
    text-align: right;
  }

  .steps li:nth-child(even) {
    padding-left: 24px;
    margin-left: 50%;
    text-align: left;
  }

  .steps-note {
    text-align: center;
    padding-left: 0;
  }
}

/* ---------- Bottom CTA ---------- */

.section-cta-bottom {
  max-width: 100%;
  text-align: center;
  padding: 56px 20px 64px;
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-active) 100%);
  color: #fff;
}

.section-cta-bottom h2 {
  color: #fff;
}

/* Secondary, lighter-weight than the primary button on purpose - the brief wants a single
   prominent action here, this is just an escape hatch for once-off shoppers, not a second
   CTA competing for attention. */
.cta-alt-link {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.cta-alt-link a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

/* ---------- Footer ---------- */

.site-footer {
  text-align: center;
  padding: 28px 20px 40px;
  color: var(--gray);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

.site-footer p {
  margin: 4px 0;
}