/* LineSqip landing — mirrors the app's LandingView (splash + photo carousel +
   "How LineSqip Works" pager + green CTA). Brand tokens + @font-face live in
   site.css. Display headlines render in Manrope ExtraBold; body copy in Inter. */

/* Class-based display headlines don't always sit on h1/h2/h3 tags, so pin them
   to Manrope explicitly (site.css already covers the heading tags). */
.hero-copy h1, .slide h1, .band-h1, .band-h2,
.modal-title, .demo-confirm-title, .role-card h3 {
  font-family: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html, body { height: 100%; }
/* Allow vertical scroll through the whole page. Never scroll sideways. */
body { overflow-x: hidden; background: #121316; }

/* ── Full-bleed crossfading photos + scrim ───────────────────────────────
   The carousel belongs to the FIRST screen (the hero) and scrolls away with
   it — `position: absolute` (not fixed) pins it to the top of the document at
   hero height, so the marketing sections below scroll up over it. */
.bg {
  position: absolute; top: 0; left: 0; width: 100%;
  height: 100vh; height: 100dvh;   /* match .landing's min-height */
  overflow: hidden; z-index: 0;
}
.bg-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  opacity: 0; transition: opacity 1.6s ease-in-out;
}
/* These are portrait shots with the subjects' faces ~35% down the frame. On a
   wide/short hero the cover-crop is very tall: centered (50%) shows torsos and
   clips faces at the top; top (0%) shows empty sky and drops faces off the
   bottom. Targeting 35% lands both sets of faces at the same focal height —
   upper-middle, not too high or too low. */
.bg-photo[src*="fest-crowd"], .bg-photo[src*="evening"] { object-position: center 35%; }
/* The pizza shot is composed top-down — her smile sits at the very top with the
   slice just below — so pin this one to the top edge to keep the smile + bite. */
.bg-photo[src*="pizza"] { object-position: center top; }
/* Laptop only: pin the dresses-on-hangers shot to the top so the garments read
   as items for sale (hangers + full dresses) instead of a mid-crop of fabric. */
@media (min-width: 700px) {
  .bg-photo[src*="boutique"] { object-position: center top; }
}
.bg-photo.on { opacity: 1; }
.bg-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.72) 100%);
}

/* ── Landing content column ────────────────────────────────────────────── */
.landing {
  position: relative; z-index: 1;
  min-height: 100dvh; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top)) 20px calc(env(safe-area-inset-bottom) + 14px);
  color: #fff; max-width: 640px; margin: 0 auto;
}
/* Header logo is pinned to the viewport's upper-left corner at EVERY breakpoint
   (not inside the centered content column) — same top/left/size as the splash's
   docked logo, so the hand-off is seamless with no jump. */
.landing-head { height: 0; }
#header-logo {
  position: fixed; top: calc(env(safe-area-inset-top) + 18px); left: 20px; z-index: 3;
  height: 64px; width: auto; opacity: 0;
  /* Promote to its own compositing layer so flipping opacity in JS composites
     (and paints) immediately — otherwise mobile Safari leaves this fixed logo
     unpainted until a scroll/tap forces a repaint. */
  transform: translateZ(0); will-change: opacity; transition: opacity .2s ease;
}
.landing-spacer { flex: 1 1 auto; min-height: 12px; }

/* ── Static hero copy (replaced the "How LineSqip Works" pager) ─────────── */
.hero-copy { text-align: center; padding: 0 8px; }
.hero-copy h1 {
  font-size: clamp(28px, 7vw, 44px); font-weight: 850; line-height: 1.06; margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.hero-copy p {
  font-size: clamp(15px, 3.6vw, 18px); margin: 14px auto 0; max-width: 34ch;
  color: rgba(255,255,255,0.88); text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}

/* ── "How LineSqip Works" pager ────────────────────────────────────────── */
.pager { text-align: center; }
.slides { position: relative; height: clamp(180px, 26vh, 240px); }
.slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease-in-out;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 0 8px; pointer-events: none;
}
.slide.on { opacity: 1; pointer-events: auto; }
.slide h1 {
  font-size: clamp(26px, 6.4vw, 40px); font-weight: 850; line-height: 1.1; margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.slide p {
  font-size: clamp(14px, 3.4vw, 17px); margin: 0 auto; max-width: 44ch;
  color: rgba(255,255,255,0.85); text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.dots { display: flex; gap: 7px; justify-content: center; margin-top: 14px; }
.dot {
  width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255,255,255,0.35); cursor: pointer; transition: background 0.25s;
}
.dot.on { background: rgba(255,255,255,0.95); }

/* ── Green CTA — matches the app's PrimaryButton (green "Sign In") exactly:
   full width, 15px vertical padding, 14px radius, lsGreen (#1F5C3D), bold 16. */
.cta {
  margin-top: 16px; width: 100%;
  padding: 15px 18px; border: 0;
  border-radius: 14px; background: var(--green); color: #fff;
  font-weight: 700; font-size: 16px; cursor: pointer;
  font-family: inherit;
}
.cta:hover { filter: brightness(1.06); }
.cta:active { filter: brightness(0.95); }

/* Two CTAs side by side ("Join Waitlist" + "Schedule a Demo"). Each flexes to
   share the width; they wrap to stacked full-width buttons on very narrow
   screens. The row owns the top margin so the buttons themselves reset it. */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.cta-row .cta { margin-top: 0; flex: 1 1 140px; width: auto; }

/* Secondary CTA (the demo button): glassy outline against the green primary. */
.cta-secondary {
  background: rgba(255,255,255,0.14); color: #fff;
  border: 1.5px solid rgba(255,255,255,0.65);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ── Splash (plays once) ───────────────────────────────────────────────── */
/* `overflow: hidden` + `transform` makes the overlay the containing block for
   its `position: fixed` children (the bird + wordmark), so the bird flying off
   to `innerWidth + 160px` is CLIPPED instead of widening the document — which
   otherwise makes mobile Safari fit-to-width and load at the wrong zoom. */
#splash { position: fixed; inset: 0; z-index: 100; overflow: hidden; transform: translateZ(0); }
#splash-bg {
  position: absolute; inset: 0; background: #f6f5f2;
  opacity: 1; transition: opacity 0.5s ease-in-out;
}
#splash-logo {
  position: fixed; top: calc(env(safe-area-inset-top) + 18px); left: 20px;
  height: 64px; width: auto; transform-origin: top left; z-index: 102;
}
#splash-bird {
  position: fixed; top: calc(50vh - 60px); left: -160px; width: 150px; z-index: 101;
  transition: left 0.6s ease-out, transform 0.6s ease-in-out, opacity 0.5s ease;
}
#splash-bird img { display: block; width: 100%; animation: sqippy-bob 0.32s ease-in-out infinite alternate; }
@keyframes sqippy-bob { from { transform: translateY(7px); } to { transform: translateY(-7px); } }

/* ── Waitlist / demo modals ────────────────────────────────────────────── */
#waitlist-modal, #demo-modal {
  border: 0; border-radius: 20px; padding: 24px 22px;
  width: calc(100% - 32px); max-width: 420px;
  max-height: 90dvh; overflow: auto;
  background: var(--card); color: var(--ink);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
/* Single-column, scheduler-forward layout at every width (mirrors mobile): the
   contact fields stack above the booking calendar in one narrow column, so the
   laptop modal reads as an appointment scheduler rather than a wide form.
   It is pinned to the light theme regardless of the visitor's OS setting: the
   embedded Google booking calendar always renders light, so a dark modal around
   it looks broken. Re-declaring the brand tokens here (they otherwise flip in
   the dark-mode media query) plus `color-scheme: light` keeps the whole modal —
   background, text, form fields, native controls, and the iframe — light. */
#demo-modal {
  max-width: 460px;
  /* Only the date scroller may scroll sideways; nothing else in the modal. */
  overflow-x: hidden;
  color-scheme: light;
  --purple: #6a2fb5;
  --purple-tint: #efe6fb;
  --green: #1f5c3d;
  --green-tint: #e8f1ea;
  --bg: #f6f5f2;
  --card: #ffffff;
  --ink: #1a1c1e;
  --ink2: #4a4f54;
  --ink3: #8a9097;
  --line: #e5e3de;
}
#waitlist-modal::backdrop, #demo-modal::backdrop { background: rgba(0,0,0,0.55); }

/* Single-column layout: contact fields stacked above the booking calendar. */
.demo-sub { margin: -6px 0 18px; font-size: 14.5px; color: var(--ink2); }
/* Two audiences, always side by side on one row (the shared .roles grid is
   3-up and stacks under 460px — override both for this 2-option form). */
#demo-form .roles { grid-template-columns: 1fr 1fr; }
@media (max-width: 460px) { #demo-form .roles { grid-template-columns: 1fr 1fr; } }
/* Give the two audiences distinct identities so they don't feel like the same
   choice: Vendor = brand green, Event Organizer = brand purple. */
#demo-form .role input[value="vendor"]:checked + span {
  border-color: var(--green); background: var(--green-tint); color: var(--green);
}
#demo-form .role input[value="organizer"]:checked + span {
  border-color: var(--purple); background: var(--purple-tint); color: var(--purple);
}
#demo-form .role input[value="organizer"]:focus-visible + span { outline-color: var(--purple); }
/* When Event Organizer is chosen, remap the accent token so every green-based
   control (date fill, time pill, slot, Book button, field focus) turns purple. */
#demo-modal.role-organizer { --green: #6a2fb5; --green-tint: #efe6fb; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
/* `display: grid` otherwise beats the [hidden] UA rule, so the booking area
   wouldn't disappear behind the confirmation. Force hidden to win. */
.demo-grid[hidden] { display: none; }
/* min-width:0 lets the columns (and the date scroller inside the picker) shrink
   to fit instead of forcing the modal wider than its card. */
#demo-form, .demo-picker { min-width: 0; }
.demo-cal { min-height: 600px; }
.demo-cal[hidden] { display: none; }
/* The modal pins `color-scheme: light`, so the booking calendar inherits it;
   the white backing just keeps the frame from flashing dark while it loads. */
.demo-cal iframe {
  width: 100%; min-height: 600px; border: 0; border-radius: 12px;
  background: #fff;
}
/* Mode-neutral loader: a normal grid item shown while /demo-availability
   decides native-vs-fallback (and while a fallback iframe loads), then hidden
   via the [hidden] attr from JS. --green retints to purple for organizers via
   the modal role class. */
.demo-loading {
  min-height: 480px;
  display: grid; place-items: center; align-content: center; gap: 12px;
  text-align: center; padding: 24px;
  color: var(--ink2); font-size: 14.5px; line-height: 1.5;
  border-radius: 12px; background: #fff;
}
.demo-loading[hidden] { display: none; }
.demo-cal-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--green);
  animation: demo-spin 0.8s linear infinite;
}
@keyframes demo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .demo-cal-spinner { animation: none; } }
.demo-cal-placeholder {
  display: grid; place-items: center; text-align: center; height: 100%;
  min-height: 480px; padding: 24px; border: 1px dashed var(--ink3); border-radius: 12px;
  color: var(--ink2); font-size: 14.5px; line-height: 1.5;
}
/* Submit footer beneath the fields + picker. The button isn't full width —
   it sizes to its label (with a sensible min) and centers. */
.demo-foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
#demo-submit { width: auto; min-width: 200px; padding-left: 36px; padding-right: 36px; display: inline-block; }
.demo-saved { color: var(--green); font-weight: 650; font-size: 13.5px; margin: 0 0 10px; }

/* Native slot picker (shown when /demo-availability is wired) — modeled on a
   mobile "select date / select time" booking sheet: a horizontal row of date
   cards, a Morning/Afternoon/Evening segmented control, then full-width time
   rows. Selected item = green outline + tint. */
.demo-picker { min-height: 480px; }
.picker-label { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--ink); }
.picker-caption { margin: 10px 0 14px; font-size: 12.5px; color: var(--ink3); }

.slot-days {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px;
  margin-bottom: 20px; -webkit-overflow-scrolling: touch;
}
.slot-day {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 84px; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer;
  font-family: inherit; transition: background .15s ease, border-color .15s ease;
}
.slot-day:hover { border-color: var(--green); }
.slot-day[aria-selected="true"] { border-color: var(--green); background: var(--green); color: #fff; }
.slot-day[aria-selected="true"] .slot-day-md { color: rgba(255, 255, 255, 0.85); }
.slot-day-wk { font-weight: 700; font-size: 14px; }
.slot-day-md { font-size: 12.5px; color: var(--ink2); }

.slot-parts { display: flex; gap: 8px; margin-bottom: 8px; }
.slot-part {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 8px; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink2); cursor: pointer;
  font-family: inherit; font-weight: 650; font-size: 13.5px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.slot-part:hover:not(:disabled) { border-color: var(--green); }
.slot-part[aria-selected="true"] { border-color: var(--green); color: #fff; background: var(--green); }
.slot-part:disabled { opacity: 0.4; cursor: default; }
.slot-part-glyph { font-size: 13px; }

.slot-times {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 340px; overflow-y: auto;
}
.slot-time {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--line);
  border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer;
  font-family: inherit; text-align: center;
  transition: background .15s ease, border-color .15s ease;
}
.slot-time:hover { border-color: var(--green); }
.slot-time[aria-selected="true"] { border-color: var(--green); background: var(--green); color: #fff; }
.slot-time-range { font-weight: 700; font-size: 15px; }
.slot-time-sub { font-size: 12.5px; color: var(--ink2); }
.picker-empty {
  color: var(--ink2); font-size: 14px; line-height: 1.5; padding: 24px 4px;
}

/* Booked confirmation — Sqippy, a recap line, and add-to-calendar options.
   Accents use --green so they follow the Vendor/Organizer role tint. */
.demo-confirm { text-align: center; padding: 8px 4px 4px; }
.demo-confirm-mascot { width: 150px; height: auto; display: block; margin: 0 auto 10px; }
.demo-confirm-title { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: var(--ink); }
.demo-confirm-when {
  margin: 0 auto 6px; max-width: 420px; font-size: 16px; font-weight: 700; color: var(--green);
}
.demo-confirm-note { margin: 0 auto 20px; max-width: 420px; font-size: 14px; color: var(--ink2); line-height: 1.5; }
.demo-confirm-done {
  border: 0; background: none; color: var(--ink3); font-family: inherit;
  font-weight: 650; font-size: 14px; cursor: pointer; padding: 6px 12px;
}
.demo-confirm-done:hover { color: var(--ink); }
/* Close control: an actual labeled "Close" pill — hairline ring by default,
   fills to ink on hover, with a soft press and a proper focus ring. Uses theme
   tokens so it reads right in the light demo modal and the theme-aware waitlist
   modal alike. */
.modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: inline-flex; align-items: center;
  padding: 7px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink2); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  transition: background 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.12s ease;
}
.modal-close svg { width: 13px; height: 13px; display: block; }
.modal-close:hover { background: var(--ink); color: var(--card); border-color: var(--ink); }
.modal-close:active { transform: scale(0.96); }
.modal-close:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .modal-close { transition: none; } }
.modal-title { font-size: 20px; font-weight: 800; margin: 0 0 16px; }

/* Tablet / desktop: a touch more breathing room at the bottom. */
@media (min-width: 700px) {
  .landing { padding-bottom: calc(env(safe-area-inset-bottom) + 28px); }
  .slide { gap: 12px; }
}

/* Short / landscape viewports: let slides flow (one at a time) instead of
   living in a fixed-height box, so nothing clips; the page scrolls if needed. */
@media (max-height: 560px) {
  .landing-spacer { flex: 0 0 8px; min-height: 0; }
  .slides { height: auto; }
  .slide { position: relative; display: none; }
  .slide.on { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  #splash-bird img { animation: none; }
  .bg-photo, .slide { transition: none; }
}

/* reCAPTCHA v3 protects the waitlist form invisibly; hide its floating badge in
   the bottom-right corner. (Google's terms are met via the notice in the form.) */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-notice {
  margin: 12px 0 0; font-size: 11px; line-height: 1.45; color: var(--ink3); text-align: center;
}
.recaptcha-notice a { color: var(--ink3); text-decoration: underline; }

/* ── Marketing story (scrolls below the hero) ──────────────────────────────
   Copy from the "LineSqip Waitlist Page" design. Bands are opaque (they sit
   above the fixed hero background) and use fixed colors like the hero rather
   than the light/dark theme tokens — they're photographic/branded surfaces. */
.story { position: relative; z-index: 1; }
/* Kill the global `section { margin: 22px 0 }` (site.css) so the full-height
   bands butt right up against each other — no gaps between viewports. */
.band { margin: 0; }
.band-inner { max-width: 640px; margin: 0 auto; }

/* Photo bands: the section is exactly as tall as its image (full width, whole
   image shown) — NO empty space above or below. The headline + line overlay the
   bottom of the image, darkened by a scrim gradient. */
.band-photo { position: relative; background-color: #1a1c1e; color: #fff; }
.band-img { display: block; width: 100%; height: auto; }
.band-photo .band-inner {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: none;
  padding: 60px 26px 34px;
  background: linear-gradient(180deg, rgba(13,13,15,0) 0%,
                              rgba(13,13,15,.5) 50%, rgba(13,13,15,.92) 100%);
}
.band-h1 {
  margin: 0; font-size: clamp(34px, 8vw, 48px); font-weight: 800;
  line-height: 1.03; letter-spacing: -.035em; text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.band-h2 {
  margin: 0; font-size: clamp(28px, 6.4vw, 40px); font-weight: 800;
  line-height: 1.08; letter-spacing: -.03em;
}
.band-photo .band-h2, .band-dark .band-h2 { text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.band-h2.ink { color: #1a1c1e; text-shadow: none; }
.band-p {
  margin: 14px 0 0; max-width: 34ch;
  font-size: clamp(15px, 3.6vw, 17px); line-height: 1.5;
  color: rgba(255,255,255,.82);
}
.band-cream .band-p, .band-list .band-p { color: #6b7280; }

/* A capped green CTA reusing the hero button (never full 640px wide),
   centered under the copy in the final waitlist band. */
.band .cta { display: block; width: 100%; max-width: 340px; margin: 26px auto 0; }

/* Paired CTAs in the final band — capped and centered as one unit. */
.band .cta-row { max-width: 420px; margin: 26px auto 0; justify-content: center; }
.band .cta-row .cta { margin: 0; max-width: none; }

/* Light content bands. */
.band-cream { background: #f7f8ef; color: #1a1c1e; }
.band-list { background: #ffffff; color: #1a1c1e; }
.band-cream .band-inner, .band-list .band-inner { padding: 52px 24px 44px; }

/* Numbered "Four steps" list. */
.steps { list-style: none; margin: 28px 0 0; padding: 0; }
.steps li {
  display: flex; gap: 20px; padding: 22px 0;
  border-top: 1px solid rgba(26,28,30,.12);
}
.steps li:last-child { border-bottom: 1px solid rgba(26,28,30,.12); }
.step-n {
  flex: none; width: 26px; padding-top: 3px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #1f5c3d;
}
.steps h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: #1a1c1e; }
.steps p { margin: 0; font-size: 15px; line-height: 1.55; color: #6b7280; }

/* Organizer / vendor feature rows. */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  padding: 15px 0; font-size: 15px; line-height: 1.5; color: #1a1c1e;
  border-top: 1px solid rgba(26,28,30,.12);
}
.rows li:last-child { border-bottom: 1px solid rgba(26,28,30,.12); }

/* "Three sides of the same floor" role cards. */
.role-cards { margin-top: 28px; }
.role-card { padding: 24px 0; border-top: 1px solid rgba(26,28,30,.12); }
.role-card:last-child { border-bottom: 1px solid rgba(26,28,30,.12); }
.role-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.role-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.role-shopper { color: #1f5c3d; }
.role-organizer { color: #6a2fb5; }
.role-vendor { color: #ae6d27; }
.role-card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.015em; color: #1a1c1e; }
.role-card p { margin: 0; font-size: 15px; line-height: 1.6; color: #4b5157; }

/* Final call-to-action band + footer. */
.band-cta { background: #0d0d0f; color: #fff; }
/* Final waitlist viewport: headline, subtext, button, and fine print all
   centered. */
.band-cta .band-inner { padding: 52px 24px 56px; text-align: center; }
.band-cta .band-p { margin-left: auto; margin-right: auto; }
.cta-fine { margin: 16px 0 0; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.45); }
.story-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; row-gap: 10px;
  padding: 24px; background: #f7f8ef;
}
.story-foot img { height: 68px; width: auto; opacity: .8; }
.story-foot span { font-size: 11px; letter-spacing: .04em; color: #878d93; }
.foot-links { display: flex; flex-direction: column; gap: 10px; }
.foot-links a { font-size: 12px; color: #4b5157; text-decoration: none; }
.foot-links a:hover { color: #1f5c3d; text-decoration: underline; }

/* Tablet / desktop: a touch more horizontal breathing room in the bands. */
@media (min-width: 700px) {
  .band-photo .band-inner, .band-dark .band-inner { padding: 0 32px 48px; }
  .band-cream .band-inner, .band-list .band-inner, .band-cta .band-inner { padding-left: 32px; padding-right: 32px; }
}