/* ─────────────────────────────────────────────────────────────────────────
   BarkBus marketing site styles
   Forest green palette matches the app (#2D7A44 in /app.css).
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --green:       #2D7A44;
  --green-dark:  #1f5730;
  --green-pale:  #e8f5ec;
  --ink:         #1a1a1a;
  --ink-soft:    #4a5258;
  --grey-100:    #f7f8f7;
  --grey-200:    #ebeeed;
  --grey-300:    #d8dedb;
  --grey-500:    #9ba6a1;
  --white:       #ffffff;
  --amber:       #e67e22;
  --max-width:   1180px;
  --radius:      14px;
  --radius-sm:   8px;
  --shadow-sm:   0 1px 2px rgba(20, 40, 30, 0.06);
  --shadow-md:   0 8px 24px rgba(20, 40, 30, 0.08);
  --shadow-lg:   0 24px 60px rgba(20, 40, 30, 0.12);
}

* { box-sizing: border-box; }
img[src$=".jpg"], img[src$=".png"] { image-rendering: auto; }
.device img { min-height: 0; }

html, body { margin: 0; padding: 0; }

/* Anchor jumps (e.g. /features#day-flow) land flush against the viewport
   top by default — the sticky header then overlaps the section eyebrow.
   Offset the scroll target by the header height (with a little breathing
   room) so the eyebrow + h2 stay visible. */
html { scroll-padding-top: 96px; }
@media (max-width: 720px) {
  html { scroll-padding-top: 72px; }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji";
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ─────────────── Header ─────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--grey-200);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  object-fit: contain;
  display: block;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.site-nav a {
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
}
.site-nav a:hover { color: var(--green-dark); text-decoration: none; }
.site-nav .nav-cta {
  background: var(--green);
  color: var(--white);
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}
.site-nav .nav-cta:hover { background: var(--green-dark); color: var(--white); }

@media (max-width: 640px) {
  .site-nav { gap: 14px; margin-left: 10px; }
  .brand { flex-shrink: 0; }
  .site-nav a { white-space: nowrap; }
  .site-nav a:not(.nav-cta) { display: none; }
  /* Downloads survives the mobile collapse — most shared links open on a
     phone, and "get the app" is the whole point of that visit. */
  .site-nav a.nav-download { display: inline; }
  /* So does Sign in: Try BarkBus opens signup, and a customer on a new
     phone still needs a way into their account. */
  .site-nav a.nav-signin { display: inline; }
}
@media (max-width: 420px) {
  .site-nav { gap: 10px; }
  .site-nav a.nav-download, .site-nav a.nav-signin { font-size: 14px; }
  .site-nav .nav-cta { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 380px) {
  .header-inner { padding-left: 14px; padding-right: 14px; }
  .brand { font-size: 17px; }
  .site-nav { gap: 8px; margin-left: 8px; }
  .site-nav a.nav-download, .site-nav a.nav-signin { font-size: 13px; }
}
@media (max-width: 340px) {
  .brand-name { display: none; }
}

/* ─────────────── Buttons ─────────────── */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--green);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--green-dark); color: var(--white); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--grey-300);
}
.btn-ghost:hover { background: var(--grey-100); }
.btn-lg { padding: 14px 28px; font-size: 16px; }

/* ─────────────── Hero ─────────────── */
.hero {
  background: linear-gradient(160deg, var(--green-pale) 0%, var(--white) 60%);
  padding: 64px 0 80px;
}
/* On narrow screens the hero is a vertical narrative: text → visual → CTAs,
   so the visual delivers the "oh, that looks good" moment before the call to
   action. Above 1000px it becomes two columns instead — see below. */
.hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.hero-grid > * { width: 100%; }
.hero-grid .hero-copy { max-width: 760px; }
.hero-grid .hero-visual { max-width: 880px; }
.hero-grid .hero-cta { max-width: 760px; }
.hero-grid .hero-cta .hero-secondary,
.hero-grid .hero-cta .hero-trust { margin-top: 14px; }
@media (max-width: 880px) {
  .hero-grid { gap: 32px; }
}

/* ── Desktop hero: words and devices side by side ──
   Stacked, the hero left a ~760px column of text marooned in the middle of a
   1180px container with several hundred px of empty white either side, and
   pushed the device trio entirely below the fold — so a laptop visitor's first
   screen was words and nothing else (Tim: "make the homepage show the laptop
   alongside the words, it's a bit empty atm"; Lu: "landing page on laptop too
   plain/boring, where are photos").

   Grid rather than flex-row because the hero has THREE children — copy, visual,
   cta — and the app-store buttons belong under the copy, not as a third column.
   Named areas put the visual in a single cell spanning both text rows.

   1000px is the floor: below it the two columns squeeze the laptop past the
   point where the dashboard screenshot reads, so the stacked narrative above
   stays in charge. */
@media (min-width: 1000px) {
  .hero { padding: 52px 0 60px; }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    /* The visual occupies the COPY row only — the cell beside the CTA is left
       empty on purpose. Spanning both rows made align-self:center centre the
       devices over the whole copy+CTA height, which dropped them ~80px below
       the headline's centre and left a dead wedge of white above them (Tim:
       "make the laptop more centred horizontally, a bit too low"). Centred
       against the copy row alone, the trio now sits level with the headline. */
    grid-template-areas:
      "copy   visual"
      "cta    .";
    align-items: center;
    gap: 24px 48px;
  }
  .hero-grid .hero-copy   { grid-area: copy;   max-width: 540px; }
  .hero-grid .hero-cta    { grid-area: cta;    max-width: 540px; }
  /* Lands ~30px above the copy's geometric centre, which is what you want
     optically: the captions hang below the devices, so a true centre reads low. */
  .hero-grid .hero-visual { grid-area: visual; max-width: none; align-self: center; }
  /* The 560px cap is for a full-width column; in the narrower text column it
     just creates a ragged right edge. */
  .hero-copy .lede { max-width: none; }

  /* The laptop is the centrepiece here — the phones flank it rather than
     cover it, so the dashboard is actually legible. Phone width is fluid so
     the trio degrades smoothly across 1000→1180px instead of forcing the
     laptop to collapse (at a 980px container the laptop still holds ~363px). */
  .hero-grid .hero-cc .hero-cc-laptop { max-width: 470px; }
  .hero-grid .hero-cc .hero-cc-phone  { width: clamp(110px, 11.5vw, 144px); margin: 0 -18px; }
  .hero-grid .hero-cc .hero-cc-left   { transform: rotate(-6deg) translateY(20px); }
  .hero-grid .hero-cc .hero-cc-right  { transform: rotate(6deg)  translateY(20px); }
  .hero-grid .hero-cc-captions { gap: 24px; margin-top: 20px; }
  .hero-grid .hero-cc-captions div { font-size: 12px; }
  .hero-grid .hero-cc-captions strong { font-size: 13px; }
}
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: var(--green-pale);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.hero-copy h1 {
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--ink);
}
.lede {
  font-size: 19px;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 560px;
}
/* Open-beta pricing note. Sits under the pricing lede and carries the dated
   half of the promise the app's trial emails quote — see the comment in
   pricing.html before changing the date. */
.beta-note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 0 8px;
  padding: 14px 18px;
  border-left: 3px solid var(--green, #2D7A44);
  background: rgba(45, 122, 68, 0.06);
  border-radius: 0 6px 6px 0;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.hero-trust {
  font-size: 13px;
  color: var(--grey-500);
  margin: 0;
}
/* Scannable value chips under the hero lede — the instant "what it does"
   for visitors who won't read the paragraphs. */
.hero-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.hero-chips li span { font-size: 16px; line-height: 1; }

/* ─────────────── Video hero (homepage) ───────────────
   The intro video is the first thing a visitor sees. The play button sits
   bottom-left, under the title painted into the poster
   (/img/one-morning-poster.jpg), so it never covers the dogs on the right.
   Its left edge (6.25%) matches the poster's text column. */
.vhero {
  background: linear-gradient(160deg, var(--green-pale) 0%, var(--white) 70%);
  padding: 32px 0 56px;
}
.vhero-head { max-width: 760px; margin: 0 auto 22px; text-align: center; }
.vhero-head .eyebrow { margin-bottom: 12px; }
.vhero-head h1 {
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--ink);
}
.vhero-head p { font-size: 18px; color: var(--ink-soft); margin: 0 auto; max-width: 600px; }
.vhero-player {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #123a22;
  box-shadow: var(--shadow-lg);
}
.vhero-player video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vhero-cover {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.vhero-cover[hidden] { display: none; }
.vhero-play {
  position: absolute;
  left: 6.25%;
  top: 66%;
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--amber);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: clamp(18px, 3.4vw, 34px);
  padding-left: 0.18em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 8px rgba(255, 255, 255, 0.18);
  transition: transform 0.15s ease;
}
.vhero-watch {
  position: absolute;
  left: 19.5%;
  top: 66%;
  height: 11%;
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--white);
  font-size: clamp(13px, 2.2vw, 22px);
  font-weight: 700;
}
.vhero-watch b { font-weight: 600; opacity: 0.8; }
.vhero-cover:hover .vhero-play,
.vhero-cover:focus-visible .vhero-play { transform: scale(1.07); }
.vhero-cap { max-width: 880px; margin: 14px auto 0; text-align: center; font-size: 15px; color: var(--ink-soft); }
.vhero-cap b { color: var(--ink); }
.vhero-chapters {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 880px;
  margin: 10px auto 0;
  padding: 0;
}
.vhero-chapters a {
  display: inline-flex;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  background: var(--white);
  border: 1px solid var(--grey-300);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.vhero-chapters a em { font-style: normal; font-weight: 600; color: var(--green); }
.vhero-chapters a:hover,
.vhero-chapters a.is-on { border-color: var(--green); background: var(--green-pale); }
.vhero-cta { max-width: 760px; margin: 28px auto 0; text-align: center; }
.vhero-cta .app-buttons { justify-content: center; }
.vhero-cta .hero-trust { margin-top: 12px; }
@media (max-width: 640px) {
  .vhero { padding: 24px 0 40px; }
  .vhero-head p { font-size: 16px; }
  .vhero-player { border-radius: var(--radius-sm); }
  .vhero-play { width: 14%; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 5px rgba(255, 255, 255, 0.18); }
  .vhero-watch { left: 22.5%; height: 14%; }
  /* One swipeable row instead of three wrapped lines of chips. */
  .vhero-chapters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
}

/* The device screenshots, moved down from the old hero. */
.screens { padding: 24px 0 72px; text-align: center; }
.screens h2 { margin: 0 0 32px; }
.screens .hero-visual { max-width: 880px; margin: 0 auto; }

/* ─────────────── Device frames (phone + laptop) ─────────────── */
.device { margin: 0 auto; max-width: 100%; }

.device-phone {
  width: 260px;
  border-radius: 38px;
  background: #111;
  padding: 10px;
  box-shadow: var(--shadow-lg);
}
.device-phone img {
  border-radius: 28px;
  width: 100%;
  height: auto;
  display: block;
}

.device-tilt { transform: rotate(-3deg); }

/* Phone mockups are tall (~1:2.16). On phones a 260px frame renders ~560px
   tall and swamps the screen, so scale every phone frame down to a fixed,
   viewport-aware cap and slim the bezel to match the smaller size. Applies
   site-wide — hero, story and feature-flow phones all inherit this. */
@media (max-width: 600px) {
  .device-phone {
    width: min(58vw, 210px);
    border-radius: 30px;
    padding: 7px;
  }
  .device-phone img { border-radius: 23px; }
  /* Out-specify the fixed-width rules below (.flow-visual/.story-visual are
     both 2-class selectors); add the parent class so these win regardless of
     source order. */
  .feature-section .flow-visual .device-phone { width: min(58vw, 210px); }
  .story .story-visual .device-phone { width: min(54vw, 200px); }
}

/* Laptop: dark "lid" bezel around screen, browser-chrome dots inside,
   and a wider "base" lip below to read as a laptop chassis. */
.device-laptop {
  position: relative;
  background: #1a1a1a;
  border-radius: 12px 12px 4px 4px;
  padding: 10px 10px 0;
  box-shadow: var(--shadow-lg);
  /* leave room for the base lip */
  margin-bottom: 18px;
}
.device-laptop::before {
  /* tiny webcam dot, centred above the screen */
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #444;
}
.device-laptop::after {
  /* base lip — wider than the lid, trackpad notch in the middle */
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -10px;
  height: 12px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(0,0,0,0.35) 0 14%, transparent 16%) no-repeat,
    linear-gradient(180deg, #2a2a2a 0 45%, #141414 100%);
  border-radius: 0 0 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06),
              0 4px 10px rgba(0,0,0,0.18);
}
.device-laptop-screen {
  /* inner browser frame so dots sit ON the page, not on the bezel */
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
}
.device-laptop-chrome {
  height: 22px;
  background: #ededed;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
}
.device-laptop-chrome::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  width: 36px;
  height: 8px;
  background:
    radial-gradient(circle at 4px 4px, #ff5f57 0 4px, transparent 5px),
    radial-gradient(circle at 18px 4px, #febc2e 0 4px, transparent 5px),
    radial-gradient(circle at 32px 4px, #28c840 0 4px, transparent 5px);
  background-repeat: no-repeat;
}
.device-laptop img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--white);
}

/* ─────────────── Stats strip ─────────────── */
.stats-strip {
  background: var(--ink);
  color: var(--white);
  padding: 36px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
  text-align: center;
}
.stat-number {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1;
}
.stat-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-500);
  margin-top: 8px;
}

/* ─────────────── Pillars ─────────────── */
.pillars { padding: 80px 0; }
.pillars h2 {
  text-align: center;
  font-size: clamp(26px, 3.5vw, 36px);
  letter-spacing: -0.015em;
  margin: 0 0 44px;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pillars-grid-6 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) {
  .pillars-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .pillars-grid { grid-template-columns: 1fr; }
}
.pillars-cta {
  text-align: center;
  margin: 36px 0 0;
  font-size: 16px;
}
.pillars-cta a {
  color: var(--green-dark);
  font-weight: 700;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  text-decoration: none;
  transition: color 140ms ease;
}
.pillars-cta a:hover { color: var(--green); }
.pillars-sub {
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
  margin: -28px 0 32px;
}
.pillar {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  /* Anchor styles — make the card behave as a clickable link. */
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
}
.pillar:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--green);
  text-decoration: none;
  color: var(--ink);
}
.pillar:hover .pillar-link { color: var(--green-dark); }
.pillar:hover .pillar-link::after { transform: translateX(3px); }
.pillar-icon { font-size: 32px; margin-bottom: 12px; }
.pillar h3 {
  font-size: 19px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.pillar p { color: var(--ink-soft); margin: 0 0 16px; font-size: 15px; }
.pillar-link {
  display: inline-block;
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.005em;
  transition: color 140ms ease;
}
.pillar-link::after {
  content: "";
  display: inline-block;
  width: 0;
  transition: transform 140ms ease;
}

/* ─────────────── CTA band ─────────────── */
.cta-band {
  background: var(--green);
  color: var(--white);
  padding: 56px 0;
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.cta-inner h2 { margin: 0 0 6px; font-size: 28px; letter-spacing: -0.015em; }
.cta-inner p { margin: 0; opacity: 0.92; }
.cta-band .btn-primary {
  background: var(--white);
  color: var(--green-dark);
}
.cta-band .btn-primary:hover { background: var(--green-pale); color: var(--green-dark); }

/* ─────────────── Page head ─────────────── */
.page-head {
  padding: 64px 0 30px;
  background: linear-gradient(180deg, var(--green-pale), var(--white));
}
.page-head h1 {
  font-size: clamp(32px, 5vw, 48px);
  margin: 6px 0 16px;
  letter-spacing: -0.02em;
}

/* ─────────────── Feature section (per-feature page block) ─────────────── */
.feature-section {
  padding: 64px 0 32px;
}
.feature-section + .feature-section {
  border-top: 1px solid var(--grey-200);
}
.feature-section-head {
  max-width: 760px;
  margin: 0 0 56px;
}
.feature-section-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.02em;
  margin: 8px 0 14px;
  line-height: 1.15;
}
.feature-section-lede {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0;
}
.feature-section-lede strong {
  color: var(--ink);
  font-weight: 600;
}

/* ─────────────── Feature highlight menu ─────────────── */
/* The "What it actually does" landing: one tappable card per feature,
   full-width single column on mobile, 2×2 on larger screens. Tapping a
   card opens that feature's walkthrough (handled in features.html JS). */
.feature-menu {
  padding: 8px 0 40px;
}
.feature-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .feature-cards { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (min-width: 960px) {
  .feature-cards-6 { grid-template-columns: repeat(3, 1fr); }
}
.feature-card {
  position: relative;
  display: block;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 24px 22px 20px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.feature-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--green);
}
.feature-card:active { transform: translateY(0); }
.feature-card-num {
  position: absolute;
  top: 20px;
  right: 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--grey-300);
}
.feature-card-icon {
  display: block;
  font-size: 36px;
  line-height: 1;
  margin-bottom: 14px;
}
.feature-card h3 {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.feature-card p {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.feature-card-go {
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
}
.feature-card:hover .feature-card-go { color: var(--green); }
.feature-menu-cta {
  margin: 22px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--ink-soft);
}
.feature-menu-cta a { color: var(--green-dark); }

/* "← All features" back to the menu, top of each walkthrough. */
.feature-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--grey-100);
  border: 1px solid var(--grey-200);
  border-radius: 999px;
}
.feature-back:hover {
  text-decoration: none;
  border-color: var(--green);
  color: var(--ink);
}

/* Flow steps — zigzag column of numbered story beats */
.flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.flow-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.flow-step.reverse { direction: rtl; }
.flow-step.reverse > * { direction: ltr; }
@media (max-width: 860px) {
  .flow-step, .flow-step.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 22px;
  }
}
.flow-meta {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
}
.flow-step.reverse .flow-meta { grid-column: 2; }
@media (max-width: 860px) {
  .flow-step .flow-meta, .flow-step.reverse .flow-meta {
    grid-column: 1; grid-row: auto;
  }
}
.flow-num {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--green);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.flow-phase {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--green-pale);
  padding: 4px 10px;
  border-radius: 999px;
}
.flow-body {
  grid-column: 1;
  grid-row: 2;
}
.flow-step.reverse .flow-body { grid-column: 2; grid-row: 2; }
.flow-body h3 {
  font-size: 24px;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}
.flow-body p {
  color: var(--ink-soft);
  margin: 0;
  font-size: 16px;
}
.flow-body p strong {
  color: var(--ink);
  font-weight: 600;
}
.flow-body p + p {
  margin-top: 12px;
}
.flow-body p.flow-fine {
  font-size: 14px;
}
.flow-visual {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  justify-content: center;
}
.flow-step.reverse .flow-visual {
  grid-column: 1;
  grid-row: 1 / span 2;
}
@media (max-width: 860px) {
  .flow-step .flow-visual, .flow-step.reverse .flow-visual {
    grid-column: 1; grid-row: auto;
  }
  /* The reverse layout pins .flow-body to column 2; without this reset it
     keeps that placement when the grid collapses to a single column, forcing
     a phantom second column so the phone and text stay side by side. Reset
     it (and the base grid-row) so all three children flow in source order. */
  .flow-step .flow-body, .flow-step.reverse .flow-body {
    grid-column: 1; grid-row: auto;
  }
}
.flow-visual .device-phone { width: 260px; }

/* Laptop-first feature flow: visual side gets ~60% of the row so the
   browser screenshots can breathe; text gets ~40%. */
.flow-steps-laptop .flow-step,
.flow-steps-laptop .flow-step.reverse {
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
}
.flow-steps-laptop .flow-visual { width: 100%; }
.flow-steps-laptop .flow-visual .device-laptop { width: 100%; max-width: 640px; }
@media (max-width: 860px) {
  .flow-steps-laptop .flow-step,
  .flow-steps-laptop .flow-step.reverse {
    grid-template-columns: 1fr;
  }
}

.feature-closer {
  max-width: 640px;
  margin: 72px auto 0;
  text-align: center;
  padding: 28px 24px;
  background: var(--green-pale);
  border-radius: var(--radius);
}
.feature-closer p {
  margin: 0;
  font-size: 17px;
  color: var(--ink);
  font-weight: 500;
}
.feature-closer p code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  background: rgba(45, 122, 68, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.feature-closer-ai {
  background: var(--ink);
  color: var(--white);
  max-width: 720px;
}
.feature-closer-ai p {
  color: var(--white);
  font-weight: 400;
  text-align: left;
}
.feature-closer-ai p code {
  background: rgba(255, 255, 255, 0.12);
  color: var(--green-pale);
}
.feature-closer-bill {
  background: linear-gradient(135deg, var(--green-pale), var(--white));
  border: 1px solid var(--grey-200);
  max-width: 760px;
}
.feature-closer-bill p {
  font-weight: 400;
  text-align: left;
  color: var(--ink-soft);
}
.feature-closer-bill p em {
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
}
.flow-body p code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13.5px;
  background: var(--grey-100);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink);
}

/* ─────────────── Coming next teaser ─────────────── */
.coming-next {
  padding: 72px 0;
  background: var(--grey-100);
  border-top: 1px solid var(--grey-200);
}
.coming-next .eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: var(--white);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.coming-next h2 {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.coming-lede {
  color: var(--ink-soft);
  font-size: 16px;
  margin: 0 0 40px;
  max-width: 620px;
}
.coming-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.coming-list-two { grid-template-columns: repeat(2, 1fr); max-width: 880px; }
.coming-list-one { grid-template-columns: 1fr; max-width: 640px; }
@media (max-width: 860px) {
  .coming-list, .coming-list-two, .coming-list-one { grid-template-columns: 1fr; }
}
.coming-list > li {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
}
.coming-num {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--green);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.coming-list h3 {
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.coming-list p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.5;
}

/* ─────────────── Pricing ─────────────── */
.pricing-grid { padding: 40px 0 60px; }
.pricing-grid .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 860px) {
  .pricing-grid .container { grid-template-columns: 1fr; }
}
.tier {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.tier h3 { font-size: 20px; margin: 0 0 14px; letter-spacing: -0.01em; }
.tier-launch {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: var(--green-pale);
  padding: 5px 11px;
  border-radius: 999px;
  margin: 0 0 12px;
}
.tier-trial {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: var(--green-pale);
  padding: 5px 11px;
  border-radius: 999px;
  margin: 0 0 12px;
}
.tier-featured .tier-launch,
.tier-featured .tier-trial {
  background: var(--green);
  color: var(--white);
}
.tier-price { margin: 0 0 18px; }
.tier-price .price-num {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tier-price .price-period { font-size: 13px; color: var(--grey-500); margin-left: 4px; }
.tier-price .price-annual { display: block; font-size: 13px; color: var(--grey-500); margin-top: 4px; }
.tier ul { list-style: none; padding: 0; margin: 0 0 22px; }
.tier ul li {
  padding: 8px 0 8px 22px;
  position: relative;
  color: var(--ink-soft);
  font-size: 15px;
}
.tier ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}
.tier-featured {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), var(--shadow-md);
}
.tier-flag {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--green);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.tier-new {
  background: var(--green-pale);
  border-radius: var(--radius-sm);
  margin: 4px -10px;
  padding-left: 32px !important;
  padding-right: 10px !important;
}
.tier-new::before {
  color: var(--green-dark) !important;
}

.pricing-note {
  padding: 0 0 24px;
}
.pricing-note .container {
  max-width: 760px;
  text-align: center;
}
.pricing-note p {
  margin: 0;
  font-size: 15.5px;
  color: var(--ink-soft);
  background: var(--green-pale);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.pricing-note p strong {
  color: var(--ink);
  font-weight: 600;
}

.pricing-faq { padding: 40px 0 80px; }
.pricing-faq h2 {
  font-size: 26px;
  margin: 0 0 26px;
  letter-spacing: -0.015em;
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 700px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-grid h4 { margin: 0 0 6px; font-size: 16px; }
.faq-grid p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* ─────────────── Prose pages ─────────────── */
.prose { padding: 24px 0 80px; }
.prose-inner {
  max-width: 760px;
  margin: 0 auto;
  font-size: 17px;
  color: var(--ink-soft);
}
.prose h2 {
  color: var(--ink);
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 32px 0 12px;
}
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 22px; }

/* ─────────────── Contact ─────────────── */
.contact-section { padding: 28px 0 80px; }
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
}

.lead-form { display: flex; flex-direction: column; gap: 14px; }
.lead-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.lead-form input,
.lead-form textarea {
  font: inherit;
  font-weight: 400;
  font-size: 15px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--grey-300);
  background: var(--white);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.lead-form input:focus,
.lead-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-pale);
}
.field-error {
  color: #c0392b;
  font-size: 13px;
  font-weight: 500;
}
.form-error-banner {
  background: #fff3cd;
  border: 1px solid #ffe08a;
  color: #5a4400;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
}
.form-fine {
  font-size: 13px;
  color: var(--grey-500);
  margin-top: 8px;
}
.lead-form button[type="submit"] { align-self: flex-start; }

/* honeypot: visually hidden, accessible-tree-suppressed */
.hp-label, .hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.contact-aside h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-dark);
  margin: 24px 0 6px;
}
.contact-aside h3:first-child { margin-top: 0; }
.contact-aside p, .contact-aside ol { color: var(--ink-soft); margin: 0; }
.contact-aside ol { padding-left: 22px; }

/* ─────────────── Thanks ─────────────── */
.thanks-head { text-align: center; padding: 96px 0 80px; }
.thanks-mark {
  font-size: 64px;
  margin-bottom: 12px;
}

/* ─────────────── Footer ─────────────── */
.site-footer {
  background: var(--ink);
  color: var(--grey-300);
  padding: 56px 0 22px;
  margin-top: 40px;
}
.site-footer .brand,
.site-footer .brand:hover { color: var(--white); }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.6fr;
  gap: 36px;
}
@media (max-width: 880px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer-inner { grid-template-columns: 1fr; }
}
.footer-col h4 {
  color: var(--white);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
}
.footer-col a {
  color: var(--grey-300);
  display: block;
  padding: 4px 0;
  font-size: 15px;
}
.footer-col a:hover { color: var(--white); text-decoration: none; }
.footer-tagline { font-size: 14px; margin: 14px 0 0; color: var(--grey-500); }

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.newsletter-form input[type="email"] {
  flex: 1 1 180px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid #2a3036;
  background: #1f2428;
  color: var(--white);
  font: inherit;
  font-size: 14px;
}
.newsletter-form input[type="email"]::placeholder { color: #6b7378; }
.newsletter-form button {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--green);
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
}
.newsletter-form button:hover { background: var(--green-dark); }
.newsletter-msg { flex-basis: 100%; font-size: 13px; color: var(--green-pale); }
.newsletter-msg.error { color: #ffb3ab; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--grey-500);
  border-top: 1px solid #2a3036;
  padding-top: 18px;
  margin-top: 36px;
}
@media (max-width: 540px) { .footer-bottom { flex-direction: column; } }
.footer-disclaimer {
  font-size: 12px;
  color: var(--grey-500);
  opacity: 0.75;
  padding-top: 10px;
}

/* ─────────────── Saturday-morning story ─────────────── */
.story {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--white), var(--grey-100));
}
.story .eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.story h2 {
  font-size: clamp(26px, 3.5vw, 36px);
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  max-width: 720px;
}
.story-lede {
  max-width: 680px;
  color: var(--ink-soft);
  font-size: 17px;
  margin: 0 0 60px;
}
.story-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.story-step {
  display: grid;
  grid-template-columns: 110px 1fr 1.2fr;
  gap: 32px;
  align-items: center;
}
.story-step.reverse {
  grid-template-columns: 1.2fr 1fr 110px;
}
.story-step.reverse .story-when { order: 3; }
.story-step.reverse .story-body  { order: 2; }
.story-step.reverse .story-visual{ order: 1; }
.story-when {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.story-step.reverse .story-when { text-align: left; }
.story-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: var(--green-pale);
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 8px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 80ms ease;
}
.story-tag:hover {
  background: var(--white);
  border-color: var(--green);
  color: var(--green-dark);
  text-decoration: none;
  transform: translateY(-1px);
}
.story-tag:hover .story-tag-arrow { transform: translateX(2px); }
.story-tag-arrow {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  transition: transform 140ms ease;
}
.story-body h3 {
  font-size: 22px;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}
.story-body p {
  color: var(--ink-soft);
  margin: 0;
  font-size: 15.5px;
}
.story-visual { display: flex; justify-content: center; }
.story-visual .device-laptop { width: 100%; max-width: 560px; }
.story-visual .device-phone  { width: 220px; }

@media (max-width: 860px) {
  .story-step,
  .story-step.reverse {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .story-step.reverse .story-when,
  .story-step.reverse .story-body,
  .story-step.reverse .story-visual { order: initial; }
  .story-when { text-align: left; font-size: 22px; }
  .story-step.reverse .story-when { text-align: left; }
  .story-visual .device-laptop { max-width: 100%; }
}

.story-cta {
  margin-top: 60px;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.story-cta p {
  margin: 0 0 18px;
  font-size: 17px;
  color: var(--ink);
}

/* ─────────────── Hero command centre (static trio, gentle fade-in) ─────────────── */
/* Three best screens, held still: nav phone (left), planner laptop (centre),
   AI booking phone (right). One soft rise-in on load — no loop, no crossfades. */
.hero-cc {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  padding: 8px 0 4px;
  animation: heroCcRise 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes heroCcRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.hero-cc .hero-cc-laptop {
  width: 100%;
  max-width: 470px;
  z-index: 1;
  margin: 0;
}
.hero-cc .hero-cc-phone {
  width: 172px;
  padding: 8px;
  border-radius: 30px;
  margin: 0 -36px;
  z-index: 3;
  box-shadow: var(--shadow-lg), 0 22px 48px rgba(20, 40, 30, 0.24);
}
.hero-cc .hero-cc-phone img { border-radius: 22px; }
.hero-cc .hero-cc-left  { transform: rotate(-6deg) translateY(26px); }
.hero-cc .hero-cc-right { transform: rotate(6deg)  translateY(26px); }

/* The one quiet moment: the AI phone slowly crossfades confirm → booked
   and back. Nothing else on the page moves. */
.hero-cc-glass {
  position: relative;
  aspect-ratio: 900 / 1947;
  border-radius: 22px;
  overflow: hidden;
}
.hero-cc-glass .hero-cc-fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.hero-cc-fade-a { animation: heroCcFadeA 12s ease-in-out infinite; }
.hero-cc-fade-b { opacity: 0; animation: heroCcFadeB 12s ease-in-out infinite; }
@keyframes heroCcFadeA { 0%,42%{opacity:1;} 50%,92%{opacity:0;} 100%{opacity:1;} }
@keyframes heroCcFadeB { 0%,42%{opacity:0;} 50%,92%{opacity:1;} 100%{opacity:0;} }
/* Left phone (nav → widget) runs offset from the right (confirm → booked),
   so the two never crossfade at the same instant — one quiet swap at a time. */
.hero-cc-left .hero-cc-fade-a,
.hero-cc-left .hero-cc-fade-b { animation-delay: -3s; }

.hero-cc-captions {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.hero-cc-captions div {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}
.hero-cc-captions strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

/* The hero phones are rotated 6deg and pulled together with negative margins,
   so on a phone their corners PAINT ~7px outside the container even though
   their layout boxes fit — enough to give the whole page a sideways scroll.
   Clip the overhang at the visual's own box. `clip` rather than `hidden` on
   purpose: hidden would make this a scroll container and can break the sticky
   header and anchor jumps. Shrinking the devices was tried first and doesn't
   work — the overflow is the rotation painting outside the box, not the box
   size, so it survived down to unreadably small phones. */
@media (max-width: 700px) {
  .hero-visual { overflow-x: clip; }
}

@media (max-width: 700px) {
  .hero-cc .hero-cc-laptop { max-width: 320px; }
  .hero-cc .hero-cc-phone {
    width: min(29vw, 116px);
    padding: 5px;
    border-radius: 20px;
    margin: 0 -22px;
  }
  .hero-cc .hero-cc-phone img { border-radius: 15px; }
  .hero-cc .hero-cc-left  { transform: rotate(-6deg) translateY(16px); }
  .hero-cc .hero-cc-right { transform: rotate(6deg)  translateY(16px); }
  .hero-cc-captions { gap: 16px; margin-top: 20px; }
  .hero-cc-captions div { font-size: 11px; }
  .hero-cc-captions div span { display: none; }
  .hero-cc-captions strong { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cc { animation: none; }
  .hero-cc-fade-a, .hero-cc-fade-b { animation: none; }
  .hero-cc-fade-b { opacity: 0; } /* rest on the confirm card */
}

/* Mobile hero: tighten the text block so the film surfaces sooner. */
@media (max-width: 640px) {
  .hero { padding: 36px 0 44px; }
  .hero-grid { gap: 22px; }
  .hero-copy h1 { font-size: 29px; margin-bottom: 14px; }
  .hero-copy .lede { font-size: 16px; margin-bottom: 16px; }
  .hero-copy .lede:first-of-type { display: none; } /* drop the origin story on mobile */
  .hero-chips { gap: 8px; }
  .hero-chips li { padding: 6px 11px; font-size: 13px; }
  .hero-chips li span { font-size: 14px; }
}

/* ─────────────── App download buttons (iOS / Android / Web) ─────────────── */
.app-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.app-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 140ms ease, transform 80ms ease;
  border: 1px solid var(--ink);
  min-width: 175px;
}
.app-btn:hover {
  background: #000;
  color: var(--white);
  text-decoration: none;
  transform: translateY(-1px);
}
.app-btn:active { transform: translateY(0); }
.app-btn-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.app-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.app-btn-sup {
  font-size: 10px;
  letter-spacing: 0.04em;
  opacity: 0.85;
  text-transform: none;
  margin-bottom: 2px;
}
.app-btn-main {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.app-btn-web {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.app-btn-web:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
}

@media (max-width: 540px) {
  .app-buttons { gap: 10px; }
  .app-btn { min-width: 0; flex: 1 1 calc(50% - 5px); padding: 9px 14px; }
  .app-btn-main { font-size: 14.5px; }
  .app-btn-web { flex-basis: 100%; }
}

/* Secondary text line below hero CTAs (replaces old btn-ghost). */
.hero-secondary {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.hero-secondary a {
  color: var(--green-dark);
  font-weight: 600;
}
.hero-secondary .dot {
  display: inline-block;
  margin: 0 8px;
  color: var(--grey-300);
}

/* Try band — replaces the old cta-band on home + features. */
.try-band {
  background: linear-gradient(160deg, var(--green-pale), var(--white));
  padding: 64px 0;
  border-top: 1px solid var(--grey-200);
}
.try-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 760px;
}
.try-copy h2 {
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.try-copy p {
  color: var(--ink-soft);
  font-size: 17px;
  margin: 0 0 28px;
  max-width: 580px;
}
.try-inner .app-buttons { margin-bottom: 18px; }
.try-secondary {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}
.try-secondary a {
  color: var(--green-dark);
  font-weight: 600;
}

/* Story closing CTA — accommodate the trio + sub-line. */
.story-cta-sub {
  margin: 4px 0 18px !important;
  color: var(--ink-soft);
  font-size: 15px;
}
.story-cta .app-buttons {
  justify-content: center;
  margin: 0;
}

/* ─────────────── Features-page glance carousel ─────────────── */
.page-head-tight { padding-bottom: 16px; }

.glance {
  padding: 24px 0 56px;
  background: var(--white);
}
.glance-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 36px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.glance-tabs::-webkit-scrollbar { display: none; }
.glance-tab {
  background: var(--white);
  border: 1px solid var(--grey-200);
  padding: 12px 20px 11px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font: inherit;
  color: var(--ink-soft);
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 80ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.glance-tab:hover { background: var(--grey-100); }
.glance-tab:active { transform: translateY(1px); }
.glance-tab[aria-selected="true"] {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.glance-tab-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0.8;
}
.glance-tab-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.glance-stage {
  position: relative;
  /* Tall enough to hold the largest panel — phone shots and the laptop
     are both tall in their own way. Tweak if content changes. */
  min-height: 520px;
}
.glance-panel {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}
.glance-panel.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms ease, visibility 0s linear 0s;
}
.glance-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: var(--green-pale);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.glance-content h3 {
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 20px;
}
.glance-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}
.glance-bullets li {
  padding: 7px 0 7px 26px;
  position: relative;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.5;
}
.glance-bullets li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 7px;
  color: var(--green);
  font-weight: 700;
}
.glance-bullets li strong { color: var(--ink); font-weight: 600; }
.glance-deeplink {
  display: inline-block;
  color: var(--green-dark);
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.glance-deeplink:hover { text-decoration: none; color: var(--green); }
.glance-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.glance-visual .device-phone { width: 230px; }
.glance-visual .device-laptop { width: 100%; max-width: 460px; }

.glance-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.glance-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grey-300);
  transition: all 200ms ease;
}
.glance-dot.active {
  background: var(--green);
  width: 28px;
  border-radius: 4px;
}

.glance-cta {
  margin: 24px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--ink-soft);
}
.glance-cta a { color: var(--green-dark); }
.glance-cta .dot {
  display: inline-block;
  margin: 0 8px;
  color: var(--grey-300);
}

@media (max-width: 860px) {
  /* On mobile, drop the absolute-positioned stack — each panel's content
     can easily exceed the fixed stage height once it stacks vertically,
     which makes the active panel overflow and bleed over the dots and
     the "Seen enough?" CTA below. Let the active panel flow naturally
     instead. */
  .glance-stage { min-height: 0; }
  .glance-panel {
    position: static;
    inset: auto;
    opacity: 1;
    visibility: visible;
    transition: none;
    display: none;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .glance-panel.active { display: grid; }
  .glance-visual { order: -1; }
  .glance-visual .device-phone { width: 180px; }
  .glance-visual .device-laptop { max-width: 100%; }
  .glance-content h3 { font-size: 22px; }
}
@media (max-width: 540px) {
  .glance-tab { padding: 10px 16px; }
  .glance-tab-label { font-size: 14px; }
}

/* Deep-dive feature sections are driven by the glance carousel: only the
   selected feature's section is in the DOM flow; the rest collapse. */
.feature-section.glance-hidden { display: none; }
.feature-section.feature-swap-in {
  animation: feature-swap-in 380ms ease both;
}
@keyframes feature-swap-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .feature-section.feature-swap-in { animation: none; }
}

/* ─────────────── "What happens after you tap Try BarkBus" ─────────────── */
.onboard {
  padding: 72px 0 56px;
  background: var(--white);
  border-top: 1px solid var(--grey-200);
}
.onboard-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}
.onboard-head h2 {
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -0.02em;
  margin: 10px 0 14px;
}
.onboard-lede {
  color: var(--ink-soft);
  font-size: 16.5px;
  margin: 0;
}
.onboard-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  counter-reset: onboard;
}
@media (max-width: 980px) {
  .onboard-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .onboard-steps { grid-template-columns: 1fr; }
}
.onboard-step {
  background: var(--green-pale);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.onboard-num {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--green);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.onboard-body h3 {
  font-size: 17px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.onboard-body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.5;
}
.onboard-body p strong { color: var(--ink); font-weight: 600; }
.onboard-fineprint {
  text-align: center;
  margin: 40px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
}
.onboard-fineprint a {
  color: var(--green-dark);
  font-weight: 600;
}

/* ─────────────── Horizontal step carousels ───────────────
   site.js promotes .flow-steps and .story-steps to .is-carousel —
   each child becomes a full-width snap card swiped left/right.
   Falls back to the original vertical layout if JS is off. */
.is-carousel {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0 !important;
  padding-bottom: 8px;
}
.is-carousel::-webkit-scrollbar { display: none; }
.is-carousel > * {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  padding: 4px 2px;
}

/* Flow-step zigzag is meaningless in a single-card view — flatten the
   .reverse variant so every card lays out the same: text left, visual
   right. */
.is-carousel > .flow-step,
.is-carousel > .flow-step.reverse {
  direction: ltr;
}
.is-carousel > .flow-step.reverse .flow-meta  { grid-column: 1; grid-row: 1; }
.is-carousel > .flow-step.reverse .flow-body  { grid-column: 1; grid-row: 2; }
.is-carousel > .flow-step.reverse .flow-visual { grid-column: 2; grid-row: 1 / span 2; }

/* Story-step zigzag flatten — keep the time | text | visual order. */
.is-carousel > .story-step,
.is-carousel > .story-step.reverse {
  grid-template-columns: 90px 1fr 1.1fr;
}
.is-carousel > .story-step.reverse .story-when  { order: initial; text-align: right; }
.is-carousel > .story-step.reverse .story-body  { order: initial; }
.is-carousel > .story-step.reverse .story-visual { order: initial; }

/* Nav strip — chevron arrows on each side of dot indicators */
.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}
.carousel-arrow {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--grey-300);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  padding: 0;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, opacity 120ms ease, color 120ms ease;
}
.carousel-arrow:hover {
  background: var(--green-pale);
  border-color: var(--green);
  color: var(--green-dark);
}
.carousel-arrow:active { transform: scale(0.96); }
.carousel-arrow[disabled] { opacity: 0.3; cursor: default; }
.carousel-arrow[disabled]:hover {
  background: var(--white);
  border-color: var(--grey-300);
  color: var(--ink);
}
.carousel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--grey-300);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 140ms ease, transform 120ms ease;
}
.carousel-dot:hover { background: var(--grey-500); }
.carousel-dot.is-active {
  background: var(--green);
  transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
  .is-carousel { scroll-behavior: auto; }
}

/* Keep the phase pill ("PICKUP · WIDGET" etc.) on a single line so it
   doesn't stack inside a narrow flex column. */
.flow-phase { white-space: nowrap; }

/* ─── Mobile carousel layout ───
   At <=860px the base .flow-step / .story-step rules collapse the grid
   to a single column. The desktop carousel overrides above pin some
   children to grid-column: 2 / grid-row spans, which re-materialises a
   second column on mobile. Re-flatten everything here so each card
   becomes a tidy vertical stack: meta → title → body → visual. */
@media (max-width: 860px) {
  .is-carousel > .flow-step,
  .is-carousel > .flow-step.reverse {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 8px 4px;
  }
  .is-carousel > .flow-step .flow-meta,
  .is-carousel > .flow-step.reverse .flow-meta,
  .is-carousel > .flow-step .flow-body,
  .is-carousel > .flow-step.reverse .flow-body,
  .is-carousel > .flow-step .flow-visual,
  .is-carousel > .flow-step.reverse .flow-visual {
    grid-column: 1;
    grid-row: auto;
  }
  /* Shrink the phone in mobile carousel cards so the title + body have
     room to breathe above it without forcing a long vertical scroll
     per card. */
  .is-carousel > .flow-step .flow-visual .device-phone,
  .is-carousel > .flow-step.reverse .flow-visual .device-phone {
    width: min(56vw, 200px);
  }

  /* Same flatten for story cards on the home Wednesday narrative. */
  .is-carousel > .story-step,
  .is-carousel > .story-step.reverse {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 8px 4px;
  }
  .is-carousel > .story-step .story-when,
  .is-carousel > .story-step.reverse .story-when {
    text-align: left;
    font-size: 22px;
    order: initial;
  }
  .is-carousel > .story-step .story-visual .device-phone,
  .is-carousel > .story-step.reverse .story-visual .device-phone {
    width: min(56vw, 200px);
  }
  .is-carousel > .story-step .story-visual .device-laptop,
  .is-carousel > .story-step.reverse .story-visual .device-laptop {
    width: 100%;
    max-width: 92vw;
  }
}

/* ─────────────── Get-app page (download / beta join) ─────────────── */
.btn-sm { padding: 8px 16px; font-size: 14px; }

.getapp-lede {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 620px;
}
.getapp-actions {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Numbered closed-beta steps (Android). */
.getapp-steps {
  list-style: none;
  margin: 32px auto 0;
  padding: 0;
  max-width: 540px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.getapp-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--grey-100);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.getapp-step-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.getapp-step-body { flex: 1; }
.getapp-step-body h3 {
  margin: 2px 0 4px;
  font-size: 17px;
}
.getapp-step-body p {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 14.5px;
}
.getapp-step-body .btn { margin: 0; }

.getapp-beta-note {
  margin: 34px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
}
.getapp-back {
  font-weight: 600;
  color: var(--ink-soft);
}

/* ─────────────── Downloads page (/download) ─────────────── */
/* Centred version of the home hero: same device trio, same three buttons,
   nothing else competing for the tap. This is the page people land on from
   a shared link, so the install action stays above the fold on a phone. */
.downloads-head {
  text-align: center;
  padding-bottom: 44px;
}
.downloads-head .eyebrow { margin-bottom: 4px; }
.downloads-visual {
  max-width: 760px;
  margin: 30px auto 34px;
}
.downloads-buttons .app-buttons {
  justify-content: center;
  margin-bottom: 0;
}
.downloads-note {
  margin: 20px auto 0;
  max-width: 520px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* Three platform cards — which one should I get? */
.downloads-picker { padding: 56px 0 8px; }
.downloads-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.downloads-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.downloads-card-mark { font-size: 30px; line-height: 1; }
.downloads-card h2 {
  font-size: 20px;
  margin: 12px 0 8px;
  letter-spacing: -0.01em;
}
.downloads-card p {
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: 15px;
  flex: 1;
}

.downloads-next { padding: 48px 0 8px; }
.downloads-next h2 {
  text-align: center;
  font-size: clamp(24px, 3.4vw, 32px);
  letter-spacing: -0.02em;
  margin: 0;
}

@media (max-width: 860px) {
  .downloads-picker-grid { grid-template-columns: 1fr; }
  .downloads-card { align-items: stretch; text-align: left; }
}
@media (max-width: 540px) {
  .downloads-head { padding-bottom: 32px; }
  .downloads-visual { margin: 22px auto 26px; }
  .downloads-buttons .app-buttons { margin-bottom: 0; }
}

/* ─────────────── Slim beta badge ─────────────── */
/* Persistent, low-key reminder that BarkBus is a free beta, plus a one-tap
   route to the feedback channel. */
.beta-badge {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--white);
  color: var(--ink-soft);
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
}
.beta-badge:hover {
  text-decoration: none;
  border-color: var(--green);
  color: var(--ink);
}
.beta-badge strong { color: var(--green-dark); }
.beta-badge-mark { font-size: 15px; }

@media (max-width: 600px) {
  .beta-badge { left: 10px; bottom: 10px; padding: 7px 11px; font-size: 12px; }
  /* Shrink to just "🐾 Let's chat" on phones so it doesn't cover content;
     the founder modal already gave the full message. */
  .beta-badge-lead { display: none; }
}

/* ─────────────── Help: the Guides (/help, /help/{slug}) ───────────────
   Layout A of the Guides mock (card 369a140b): search, a Start-here row,
   a tile per job section, then a page per guide. Phone first: one column. */
.help-inner { max-width: 760px; }
.help-body { padding: 8px 0 72px; }
.help-search {
  width: 100%;
  font: inherit;
  font-size: 17px;
  padding: 12px 14px;
  border: 1.5px solid var(--grey-300);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
}
.help-search:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.help-h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 28px 0 10px;
}
.help-start {
  background: var(--green-pale);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 20px;
}
.help-start summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.help-start summary::-webkit-details-marker { display: none; }
.help-start summary b { color: var(--green-dark); font-size: 17px; }
.help-start summary span { color: var(--ink-soft); font-size: 15px; }
.help-steps { margin: 14px 0 2px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.help-steps li span { display: block; color: var(--ink-soft); font-size: 15px; }
.help-steps .help-soon { font-size: 13px; color: var(--grey-500); }
.help-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.help-tile {
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink);
  background: var(--white);
}
.help-tile:hover { border-color: var(--green); text-decoration: none; }
.help-tile-soon, .help-tile-soon:hover { border-style: dashed; border-color: var(--grey-200); background: transparent; }
.help-tile span { font-size: 14px; color: var(--ink-soft); }
.help-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--grey-200); }
.help-list li { border-bottom: 1px solid var(--grey-200); }
.help-list a { display: block; padding: 12px 2px; font-size: 17px; }
.help-list .help-hit-section { display: block; font-size: 13px; color: var(--ink-soft); }
.help-none { color: var(--ink-soft); margin-top: 16px; }
.help-guide { padding-top: 24px; }
.help-guide h1 { font-size: clamp(26px, 6vw, 38px); line-height: 1.2; letter-spacing: -0.015em; margin: 8px 0 16px; }
.help-crumb { font-size: 14px; color: var(--ink-soft); }
.help-video { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #21402c; display: block; }
.help-chapters { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--grey-200); border-radius: 10px; overflow: hidden; }
.help-chapters li + li { border-top: 1px solid var(--grey-200); }
.help-chapters a { display: flex; gap: 10px; padding: 10px 12px; color: var(--ink); }
.help-chapters em { font-style: normal; font-family: ui-monospace, Consolas, monospace; color: var(--green-dark); min-width: 42px; }
.help-where { border-left: 3px solid var(--green); padding: 4px 0 4px 10px; margin: 18px 0; color: var(--ink-soft); }
.help-guide-body { font-size: 17px; color: var(--ink-soft); }
.help-guide-body h2, .help-guide-body h3 { color: var(--ink); margin: 26px 0 10px; }
.help-guide-body strong { color: var(--ink); }
.help-guide-body img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--grey-200); }
.help-guide-body ol { list-style: none; counter-reset: step; padding: 0; }
.help-guide-body ol > li { counter-increment: step; position: relative; padding-left: 34px; margin-bottom: 12px; }
.help-guide-body ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.help-checked {
  display: inline-block;
  font-size: 14px;
  color: var(--green-dark);
  background: var(--green-pale);
  border-radius: 6px;
  padding: 5px 9px;
  margin-top: 8px;
}
.help-back { margin-top: 24px; }

/* ─────────────── Help, levelled up (option A, Tim 2026-10-14) ───────────────
   The first series' overview leads /help, each video series is a row of
   posters you swipe, and a guide in a series folds its text under the video
   and points at the next part. */
.help-hero { display: flex; flex-direction: column; gap: 4px; color: var(--ink); margin-bottom: 4px; }
.help-hero:hover { text-decoration: none; }
.help-hero b { font-size: 19px; margin-top: 6px; }
.help-hero-line { color: var(--ink-soft); font-size: 15px; }
.help-thumb { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #f6eee3; aspect-ratio: 16 / 9; }
.help-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.help-play {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: rgba(45, 122, 68, 0.92); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 20px; padding-left: 4px;
}
.help-dur {
  position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, 0.72); color: #fff;
  font-size: 12px; font-weight: 700; border-radius: 5px; padding: 1px 6px; font-variant-numeric: tabular-nums;
}
.help-num {
  position: absolute; left: 7px; top: 7px; background: var(--white); color: var(--green-dark);
  font-size: 12px; font-weight: 800; border-radius: 5px; padding: 0 7px;
}
.help-row {
  list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 44%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
}
.help-row li { scroll-snap-align: start; min-width: 0; }
.help-row a { display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.help-row a:hover { text-decoration: none; }
.help-row b { font-size: 15px; line-height: 1.3; }
@media (min-width: 700px) { .help-row { grid-auto-columns: minmax(170px, 31%); } }
.help-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.help-kind { flex: 0 0 auto; font-size: 13px; color: var(--grey-500); white-space: nowrap; }
.help-has-video .help-kind { color: var(--green-dark); font-weight: 700; }
.help-part { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-dark); margin: 10px 0 0; }
.help-chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; border-radius: 0; overflow: visible; }
.help-chips li + li { border-top: 0; }
.help-chips a { padding: 6px 12px; border: 1.5px solid var(--grey-200); border-radius: 999px; font-size: 14px; gap: 6px; }
.help-chips em { min-width: 0; font-size: 13px; }
.help-fold { border: 1.5px solid var(--grey-200); border-radius: 12px; padding: 12px 14px; margin: 18px 0; }
.help-fold summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.help-fold[open] summary { margin-bottom: 8px; }
.help-next { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 6px; }
.help-next a { border: 1.5px solid var(--grey-200); border-radius: 12px; padding: 10px 12px; color: var(--ink); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.help-next a:hover { text-decoration: none; border-color: var(--green); }
.help-next span { font-size: 13px; color: var(--ink-soft); }
.help-next b { font-size: 15px; line-height: 1.3; }
.help-next .help-next-a { grid-column: 2; border-color: var(--green); }

/* ─────────────── Help as a path (Tim 2026-10-14) ───────────────
   What BarkBus is and its video, a strip of the sections in order, then each
   section with a line on what it is for, its video, and its guides in small
   groups. A video still to make is a quiet placeholder. */
.help-about { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 28px; }
.help-about-h { font-size: clamp(24px, 5vw, 32px); line-height: 1.2; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.help-lede { color: var(--ink-soft); font-size: 16px; line-height: 1.55; margin: 0; max-width: 62ch; }
.help-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.help-vid { position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 12px; overflow: hidden; background: #21402c; color: #e8f5ec; padding: 12px 14px; }
.help-vid:hover { text-decoration: none; }
.help-vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.help-vid b { position: relative; font-size: 15px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.help-vid .help-play { z-index: 1; }
.help-vid-soon { background: repeating-linear-gradient(135deg, #21402c 0 22px, #25472f 22px 44px); }
.help-vid-tag { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: #fdf0e1; color: #9a520c; padding: 3px 8px; border-radius: 5px; }
.help-path { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.help-path ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; counter-reset: hp; }
.help-path li { counter-increment: hp; min-width: 0; }
.help-path a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px; border: 1.5px solid var(--grey-200); border-radius: 10px; color: var(--ink); }
.help-path a:hover { text-decoration: none; border-color: var(--green); }
.help-path b { font-size: 15px; }
.help-path b::before { content: counter(hp) ". "; color: var(--green); }
.help-path span { font-size: 13px; color: var(--ink-soft); }
@media (max-width: 560px) { .help-path ol { grid-template-columns: 1fr 1fr; } }
.help-section { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--grey-200); }
.help-section .help-h2 { margin: 0; font-size: clamp(22px, 4.5vw, 28px); line-height: 1.2; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.help-section .help-list { margin-top: 4px; }
.help-list a > span, .help-row-soon > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.help-list b { font-weight: 500; }
.help-line { font-size: 14px; color: var(--ink-soft); }
.help-group { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); padding: 16px 2px 6px; }
.help-row-soon { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 2px; font-size: 17px; color: var(--ink-soft); }