/* ===== 01-tokens.css ===== */
/* ==========================================================================
   Bargio design tokens — from the 2026-08-24 brand book handoff.

   Two naming layers on purpose:
     1. BRAND names (--ink, --fern, --basil, --honey, --straw, --mint, --lime,
        --paper, --cream) so this file reads like the brand book, and so a
        designer can find a colour by the name they gave it.
     2. ROLE names (--bg, --ink-muted, --brand-500, --line …) which every
        component already uses. They are aliases of the brand layer, so the
        whole site inherits the palette without touching each stylesheet.

   Four values differ from the handoff hexes. Each one failed WCAG AA as
   specified and is corrected by the smallest step that passes — the hue is
   unchanged and the difference is not visible side by side. The original is
   kept wherever it is used decoratively rather than under text.
   ========================================================================== */

:root {
  /* --- brand layer ------------------------------------------------------ */
  --ink:        #1C2A20;   /* headlines, hero backdrop, dark buttons        */
  --fern:       #2F7C3F;   /* green sections, footer, prices, eyebrows      */

  /* Primary button, exactly as the design specifies. NOTE: white text on
     #3E9E52 is 3.38:1, and button labels are 15–17px — bold, but under the
     18.66px that would count as large text, so this is below the WCAG AA 4.5:1
     for normal text. The design was followed here by explicit instruction;
     #358646 (4.52:1) is the value that would pass if that is ever revisited. */
  --basil:        #3E9E52;
  --basil-hover:  #358A46;
  --basil-bright: #3E9E52;

  --honey:      #E9BC3F;   /* final CTA band (ink text), map pin, active step */
  --straw:      #F2D585;   /* accents on ink; on FERN only at ≥24px bold     */
  --straw-lite: #FAEFD2;   /* small labels on fern — 4.50:1 where straw is 3.59 */
  --mint:       #ECF6E9;   /* chips, tinted panels, avatars                  */
  --lime:       #B9E04C;   /* the small "live" dot, never text              */
  --paper:      #FCFCFA;   /* page ground                                   */
  --cream:      #FBF8F0;   /* text on green/ink                             */

  /* Body copy on fern. The handoff allows cream down to .78 alpha, which
     lands at 3.45:1 — below .94 it stops being readable, so the safe blend is
     a token rather than an opacity anyone can nudge. */
  --on-green:   #EFF1E5;   /* 4.51:1 on fern                                */

  /* --- surfaces --------------------------------------------------------- */
  --bg:           var(--paper);
  --surface:      #FFFFFF;
  --surface-mint: var(--mint);
  --surface-sand: var(--cream);

  /* --- ink ramp --------------------------------------------------------- */
  --ink-muted:  #55604F;   /* 6.44:1 — safe for real sentences              */
  --ink-faint:  #6D7868;   /* handoff #75806F was 4.03:1 at caption sizes   */
  --ink-strike: #70766D;   /* struck old prices; #9AA396 was 2.54:1         */

  /* --- green ramp, mapped onto the role names components already use ----- */
  --brand-900: #17351E;
  --brand-800: var(--fern);        /* the dark band and the footer          */
  --brand-700: var(--fern);        /* text-weight green: prices, eyebrows   */
  --brand-600: var(--basil-hover);
  --brand-500: var(--basil);       /* primary fill                          */
  --brand-400: var(--basil-bright);
  --brand-300: #9ED3A6;
  --brand-100: #D9EDDC;
  --brand-50:  var(--mint);

  /* --- warm accent ------------------------------------------------------ */
  --accent-700: #8A5A18;   /* warning text, 5.47:1 on --accent-100          */
  --accent-500: var(--honey);
  --accent-300: var(--straw);
  --accent-100: #FDF6E2;
  --warn-line:  #EBD9A6;

  --danger: #C4362C;
  --line:      rgba(30, 58, 43, .10);
  --line-soft: rgba(30, 58, 43, .06);
  --focus:     var(--fern);

  --shadow-sm:    0 1px 2px rgba(30, 58, 43, .05);
  --shadow-card:  0 1px 2px rgba(30, 58, 43, .05);
  --shadow-lift:  0 18px 40px rgba(30, 58, 43, .14);   /* card hover        */
  --shadow-panel: 0 -24px 60px rgba(20, 40, 28, .25);  /* panel over hero   */

  /* --- type ------------------------------------------------------------- */
  --font-display: "Anybody", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Mulish", "Helvetica Neue", Arial, sans-serif;
  --font-word:    "Fraunces", Georgia, "Times New Roman", serif;  /* wordmark only */

  --text-xs:   0.8125rem;                                          /* 13px  */
  --text-sm:   0.9375rem;                                          /* 15px  */
  --text-base: clamp(1rem,      0.96rem + 0.2vw,  1.125rem);       /* 16–18 */
  --text-lg:   clamp(1.125rem,  1.05rem + 0.35vw, 1.3125rem);
  --text-xl:   clamp(1.1875rem, 1.12rem + 0.3vw,  1.3125rem);      /* card titles 19–21 */
  --text-2xl:  clamp(1.5rem,    1.3rem  + 0.9vw,  2rem);
  --text-3xl:  clamp(32px, 3.6vw, 52px);                           /* H2, per the prototype */
  --text-4xl:  clamp(2.25rem,   1.6rem  + 2.9vw,  3.75rem);
  --text-hero: clamp(44px, 6.4vw, 88px);                           /* H1, per the prototype */

  /* Line-height floors, measured rather than guessed. Rendering Anybody 800
     at 64px and comparing ink extents against the font's own ascent:
       lowercase ĄČĘĖĮŠŲŪŽ  −1.2px under the ascent → 1.0 is safe
       UPPERCASE ĄČĘĖĮŠŲŪŽ  +4.2px OVER it (6.6% of em) → needs ≥1.15
       Latvian ķ ļ ņ        +0.1px past the descent → needs a hair of leading
     So the handoff's "line-height ~1" holds only because the headlines are
     sentence case. Anything set in caps must use --lh-caps or it clips. */
  --lh-hero:    .98;     /* the prototype's value; safe because display copy is sentence case */
  --lh-display: 1.06;
  --lh-title:   1.18;
  --lh-caps:    1.3;
  --lh-body:    1.6;

  --tracking-hero:    -0.02em;
  --tracking-display: -0.02em;
  --tracking-caps:     0.14em;

  --measure-prose: 40rem;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;
  --space-section: clamp(4rem, 2.5rem + 5.5vw, 7.5rem);

  --wrap:       1180px;
  --wrap-wide:  1320px;
  --wrap-tight: 940px;
  --gutter:     clamp(20px, 4vw, 40px);

  --radius-sm:   12px;   /* inputs      */
  --radius:      20px;   /* cards       */
  --radius-lg:   28px;   /* large panels */
  --radius-panel: 36px;  /* section top-rounding */
  --radius-pill: 99px;

  --ease-out:  cubic-bezier(.2, .8, .2, 1);
  --ease-soft: cubic-bezier(.2, .7, .2, 1);
  --dur-fast:  150ms;
  --dur:       350ms;
  --dur-slow:  600ms;
  --reveal-rise: 22px;

  --header-h: 76px;
}

/* ===== 02-base.css ===== */
/* ========================================================== reset + base = */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* `overflow-x: hidden` here would make BODY the scroll container instead of the
   viewport, which quietly breaks position:sticky and page capture. */
html, body { overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  hyphens: none;
}

img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--straw); color: var(--ink); }

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}
h1 { font-size: var(--text-hero); line-height: var(--lh-hero); letter-spacing: var(--tracking-hero); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.012em; line-height: var(--lh-title); }
h4 { font-size: var(--text-lg); font-weight: 700; line-height: var(--lh-title); }
p  { text-wrap: pretty; }

a { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Basil #3E9E52 is the specified link hover, but as TEXT on paper it is 3.29:1.
   The hover step is used instead — same green, one shade down, 5.95:1. */
a:hover { color: var(--brand-600); text-decoration-thickness: 2px; }
strong, b { font-weight: 700; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
:focus:not(:focus-visible) { outline: none; }

/* ------------------------------------------------------------ primitives */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide  { max-width: var(--wrap-wide); }
.wrap--tight { max-width: var(--wrap-tight); }

.section { padding-block: var(--space-section); position: relative; }
.section--mint { background: var(--surface-mint); }
.section--sand { background: var(--surface-sand); }
.section--dark { background: var(--fern); color: var(--on-green); }
.section--dark h2, .section--dark h3 { color: var(--cream); }
/* A green or ink section that the page rolls onto, per the handoff's
   "section top-rounding 36px 36px 0 0". */
.section--rounded { border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.prose { max-width: var(--measure-prose); }
.prose p + p { margin-top: var(--s-4); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 800; font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  /* --lh-caps, never 1: Latvian ķ ļ ņ drop below the line box, and Anybody's
     uppercase caron sits 6.6% of the em ABOVE its own ascent — measured, so
     capitals clip at the line-height the handoff gives for sentence case. */
  line-height: var(--lh-caps); padding-block-end: .09em;
  color: var(--brand-700);
}
.eyebrow--accent { color: var(--accent-700); }
.eyebrow--dim    { color: var(--ink-muted); }
/* Straw is the specified eyebrow colour on green, but at 13px it is 3.59:1 on
   fern. The lightened straw keeps the look and reads at 4.50:1. */
.section--dark .eyebrow { color: var(--straw-lite); }

.lead { font-size: var(--text-lg); line-height: 1.55; color: var(--ink-muted); max-width: 46ch; }
.section--dark .lead { color: var(--on-green); }

.muted { color: var(--ink-muted); }
.small { font-size: var(--text-sm); }
.tiny  { font-size: var(--text-xs); line-height: 1.5; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

.num { font-family: var(--font-display); font-weight: 900; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -.02em; }

/* Anything set in capitals goes through here, so the measured floor is applied
   in one place rather than remembered at each call site. */
.caps {
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  line-height: var(--lh-caps); padding-block-end: .09em;
}

/* The wordmark: Fraunces italic 600, always lowercase, with the clock mark.
   Text plus CSS — there is no logo image to go stale. */
.wordmark {
  display: inline-flex; align-items: center; gap: .28em;
  font-family: var(--font-word); font-style: italic; font-weight: 600;
  font-size: 1.5rem; line-height: 1; letter-spacing: -.01em;
  color: inherit; text-decoration: none; text-transform: lowercase;
}
.wordmark:hover { color: inherit; }
.wordmark__clock {
  width: .5em; height: .5em; border-radius: 50%;
  border: .055em solid currentColor; position: relative; flex: 0 0 auto;
}
/* Two hands, twelve and three, drawn from the centre. */
.wordmark__clock::before, .wordmark__clock::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: currentColor; border-radius: .05em;
}
.wordmark__clock::before { width: .05em; height: .17em; transform: translate(-50%, -100%); }
.wordmark__clock::after  { width: .15em; height: .05em; transform: translate(0, -50%); }
.wordmark__tag {
  font-family: var(--font-body); font-style: normal; font-weight: 800;
  font-size: .5em; letter-spacing: .14em; text-transform: uppercase;
  padding-block-end: .09em; opacity: .85;
}

.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--brand-800); color: #fff; padding: 12px 18px;
  border-radius: var(--radius-sm); font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

.section__head { max-width: 46rem; margin-bottom: var(--s-7); }
.section__head .eyebrow { margin-bottom: var(--s-3); }
.section__head h2 { margin-bottom: var(--s-4); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lead { margin-inline: auto; }

/* -------------------------------------------------- scroll-in animations */
/* Scoped to .js: without a script the content must simply be visible, rather
   than an invisible page waiting for an observer that will never run. */
.js .reveal { opacity: 0; transform: translateY(var(--reveal-rise)); transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: 80ms; }
.reveal--d2 { transition-delay: 160ms; }
.reveal--d3 { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Any grid or flex child that can contain an intrinsically wide element needs
   to be allowed to shrink, or it blows its track out past the container. */
.cards > *, .stats > *, .steps > *, .constellation > * { min-width: 0; }

/* ===== 03-header.css ===== */
/* ================================================================ header = */

.header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(252,252,249,.78);
  backdrop-filter: saturate(1.5) blur(18px);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
}
.header.is-stuck { background: rgba(252,252,250,.94); border-bottom-color: var(--line); }

/* Over a pinned hero the header must be OUT of flow, not merely sticky: the
   design starts the photograph at y=0 and runs it behind the bar. Sticky keeps
   the header in flow, which pushes the hero down by --header-h and leaves the
   cream wordmark, nav and login sitting on the near-white page ground at about
   1:1 contrast — a bar that looks empty. Scoped with :has() so inner pages,
   whose header is a real opaque bar above the content, stay sticky. */
body:has(.hero--pinned) .header { position: fixed; left: 0; right: 0; }

/* Over the pinned hero the header carries nothing of its own: no bar, no blur,
   cream links straight on the photograph. It only becomes a surface once the
   page has covered most of the hero. Both states are declared here so the
   script toggles a class and never writes inline styles. */
.header--over {
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* No bar — but cream text still needs something behind it, and a photograph
   cannot be relied on to be dark exactly where the nav sits. So the header
   carries its own short gradient: enough at the very top to hold the links,
   gone before it reaches the picture. Without it the nav washed out entirely
   over a bright photo, which is what made the transition read as broken. */
.header--over::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 210%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(16, 20, 15, .70) 0%,
    rgba(16, 20, 15, .34) 48%,
    rgba(16, 20, 15, 0) 100%);
}
/* One movement, not two: the scrim fades on the same curve as the bar arrives,
   so nothing crossfades against itself halfway. */
.header::before { transition: opacity var(--dur) var(--ease-soft); }
.header--solid::before { opacity: 0; }
.header--over .brand,
.header--over .nav__link,
.header--over .nav__login,
.header--over .langs__item { color: var(--cream); }
.header--over .nav__link:hover,
.header--over .nav__login:hover { color: #fff; }
/* The active language chip is lit from the photograph's side rather than the
   page's, so it stays a chip on whatever image is behind it. */
.header--over .langs__item--on { background: rgba(255, 255, 255, .16); }
.header--over .burger span { background: var(--cream); }

.header--solid {
  background: rgba(252, 252, 250, .92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}

.header__inner {
  width: 100%; max-width: var(--wrap-wide); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--s-5);
}

/* The wordmark itself lives in 02-base.css so the back offices share it. Here
   it only needs to sit still in the header row. */
.brand { flex: 0 0 auto; text-decoration: none; color: inherit; font-size: 1.5rem; }
.brand:hover { text-decoration: none; color: inherit; }
.header .brand { font-size: 1.6875rem; }   /* 27px, per the prototype header */

/* The nav belongs to the LEFT, beside the wordmark — only the actions group is
   pushed to the far edge. */
.nav { display: flex; align-items: center; gap: var(--s-5); margin-left: var(--s-3); flex: 1; }
.nav__list { display: flex; align-items: center; gap: 26px; list-style: none; padding: 0; }
.nav__link {
  color: var(--ink); text-decoration: none;
  font-size: var(--text-sm); font-weight: 600;
  line-height: 1.3; padding-block: .09em; position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { text-decoration: none; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px;
  height: 2px; background: var(--brand-500); border-radius: 2px;
}
.nav__actions { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }

/* The partner login is a text link, not a pill: two outlined buttons side by
   side read as two equal asks, and the login is for merchants who already
   signed — only "become a partner" is being sold here. */
.nav__login {
  color: var(--ink); text-decoration: none;
  font-size: 15px; font-weight: 700; line-height: 1.3;
  background: none; border: 0; padding: 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__login:hover { text-decoration: none; color: var(--fern); }

/* ---------------------------------------------------- language switcher --
   Four codes inline, the current one a filled chip. The whole set is narrower
   than the dropdown button that used to hide it, so there is nothing to open. */
.langs { display: flex; gap: 2px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.langs__item {
  padding: 4px 8px; border-radius: var(--radius-pill);
  color: var(--ink); text-decoration: none;
  transition: opacity var(--dur-fast), background-color var(--dur-fast);
}
a.langs__item { opacity: .7; }
/* No colour here on purpose — .header--over recolours .langs__item to cream,
   and a hover colour would out-specify it and flash ink over the photograph. */
a.langs__item:hover { opacity: 1; text-decoration: none; }
.langs__item--on { background: rgba(30, 58, 43, .1); }

/* ------------------------------------------------------------- mobile -- */
.burger { display: none; width: 42px; height: 42px; position: relative; border-radius: var(--radius-sm); }
.burger span {
  position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1020px) {
  .burger { display: block; margin-left: auto; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; margin: 0;
    padding: var(--s-6) var(--gutter) var(--s-8);
    background: var(--bg); flex-direction: column; align-items: stretch; gap: var(--s-6);
    overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li + li { border-top: 1px solid var(--line); }
  .nav__link { display: block; padding: var(--s-4) 0; font-size: var(--text-lg); color: var(--ink); }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__actions { flex-direction: column; align-items: stretch; gap: var(--s-3); margin-left: 0; }
  .nav__actions .btn { width: 100%; justify-content: center; }
  .nav__login { padding: var(--s-3) 0; text-align: center; }
  .langs { justify-content: center; font-size: var(--text-sm); }
  .langs__item { padding: 8px 14px; }
  body.nav-open { overflow: hidden; }
}

/* ===== 04-buttons.css ===== */
/* =============================================================== buttons = */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 800; font-size: var(--text-sm);
  line-height: 1.3;                     /* not 1 — Baltic caps and descenders clip */
  padding: 11px 20px; min-height: 0;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast), border-color var(--dur-fast),
              box-shadow var(--dur-fast), color var(--dur-fast);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* No resting shadow — the prototype's primary button is a flat pill and only
   lifts on hover, with the shadow appearing then. */
.btn--primary, .btn--basil { background: var(--basil); color: #fff; }
.btn--primary:hover, .btn--basil:hover {
  background: var(--basil-hover); color: #fff;
  transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
}

/* The ink button: the handoff's dark CTA, used on honey and mint bands where a
   green button would disappear into the background. */
.btn--ink, .btn--dark { background: var(--ink); color: var(--cream); }
.btn--ink:hover, .btn--dark:hover { background: #16211A; color: var(--cream); }
.btn--ink.is-sent { background: var(--fern); }

/* The fern submit: the lead form's own button. Not --primary, because on the
   sand lead band the lighter basil sits too close to the panel behind it. */
.btn--fern { background: var(--fern); color: var(--cream); font-size: 16px; padding: 15px; }
.btn--fern:hover { background: var(--brand-900); color: var(--cream); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--bg); }

/* On the honey band the outline is a soft ink hairline that stays light on
   hover — a full-strength #1C2A20 rule, and an inverting hover, would read as a
   second filled button beside the ink primary it is meant to sit behind. */
.cta-band .btn--outline { border-color: rgba(28, 42, 32, .45); }
.cta-band .btn--outline:hover {
  background: rgba(28, 42, 32, .08); color: var(--ink); border-color: rgba(28, 42, 32, .45);
}

.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink-muted); }

/* On any dark ground — the fern sections, and the hero over its photograph. */
.section--dark .btn--outline, .bizhero .btn--outline, .hero .btn--outline {
  color: var(--cream); border-color: rgba(251, 248, 240, .78); background: transparent;
}
.section--dark .btn--outline:hover, .bizhero .btn--outline:hover,
.hero .btn--outline:hover {
  background: rgba(251, 248, 240, .12); color: var(--cream); border-color: rgba(251, 248, 240, .78);
}

.btn--lg { font-size: 17px; padding: 16px 30px; }
.btn--sm { font-size: var(--text-xs); padding: 9px 16px; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-row--center { justify-content: center; }
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* -------------------------------------------------------- store pills --
   The app section's two store links. Set as type rather than as the official
   badge artwork — see storeButtons() in components.js for why.

   The filled pill carries a transparent 1.5px border it does not paint, so it
   measures the same height as the outlined one beside it; without it the pair
   sits 3px out of line. 14px is the design's own radius, between the input
   (12) and card (18) tokens, so it stays a literal. */
.storepills { display: flex; flex-wrap: wrap; gap: 12px; }
.storepill {
  display: inline-flex; flex-direction: column;
  font-weight: 800; font-size: 15px; line-height: 1.15;
  padding: 13px 24px; border-radius: 14px;
  border: 1.5px solid transparent; text-decoration: none;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.storepill:hover { text-decoration: none; }
.storepill__pre { font-size: 10.5px; font-weight: 700; opacity: .6; }
.storepill--fill { background: var(--cream); color: var(--ink); }
.storepill--fill:hover { background: #FFF; color: var(--ink); }
.storepill--outline { background: transparent; border-color: rgba(251, 248, 240, .4); color: var(--cream); }
.storepill--outline:hover { background: rgba(251, 248, 240, .1); color: var(--cream); }

/* ------------------------------------------------------------- chips --- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.3; padding: 6px 12px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-muted); white-space: nowrap;
}
.chip--brand  { background: var(--brand-100); border-color: transparent; color: var(--brand-800); }
.chip--accent { background: var(--accent-100); border-color: transparent; color: var(--accent-700); }
.chip--live   { background: var(--surface); color: var(--ink); }

.live-dot { position: relative; width: 8px; height: 8px; flex: 0 0 auto; }
.live-dot::before, .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--brand-500); }
.live-dot::after { animation: pulse-ring 2200ms var(--ease-out) infinite; }
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .live-dot::after { animation: none; } }

/* ===== 05-hero.css ===== */
/* ==========================================================================
   The pinned hero, and the panel that slides over it.

   The hero is sticky at the top of the document at z-index 0; everything after
   it lives in .panel at z-index 2 with a rounded top edge and an upward
   shadow. Scrolling therefore does not move the photograph — the page covers
   it. Two consequences worth knowing before editing:
     · .panel MUST have an opaque background, or the hero shows through it.
     · The hero sits OUTSIDE .panel, so nothing after it can take a z-index
       below 2 without dropping behind the page.
   ========================================================================== */

.hero {
  position: relative; z-index: 0;
  height: 100svh; min-height: 560px;
  display: flex; align-items: flex-end;
  background: var(--ink);
  overflow: hidden;
}
/* Only pins when a .panel follows to slide over it — an inner page that just
   wants a dark banner uses the static default. */
.hero--pinned { position: sticky; top: 0; }
.hero--short { height: 78svh; min-height: 480px; }

/* --- the picture ---------------------------------------------------------- */
.hero__deck { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1100ms var(--ease-soft);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img, .hero__slide video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
}
/* The authored SVG scenes are flat illustrations and need calming behind the
   scrim; a real photograph needs nothing done to it. */
.hero__slide:not(.has-photo) img { filter: saturate(.9) brightness(.96); }

.hero__art { position: absolute; inset: -3%; }
.hero__slide.is-active .hero__art { animation: drift 18s ease-in-out infinite alternate; }
.hero__slide:nth-child(even).is-active .hero__art { animation-name: drift-rev; }
@keyframes drift     { from { transform: scale(1.05) translate3d(-1.2%,0,0); } to { transform: scale(1.05) translate3d(1.2%,0,0); } }
@keyframes drift-rev { from { transform: scale(1.05) translate3d(1.2%,0,0); }  to { transform: scale(1.05) translate3d(-1.2%,0,0); } }

/* --- the scrim -----------------------------------------------------------
   Neutral, not green: a colour cast over a photograph of food makes the food
   itself look wrong. It only has to carry cream text, so it darkens top and
   bottom and stays out of the picture in the middle. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* A second wash from the left. The vertical gradient alone is tuned for the
       dark evening counter the art direction calls for; drop a bright daylight
       photograph in behind it and the headline — which sits left of centre —
       loses its contrast. This keeps the copy column readable whatever the
       picture is, and fades out before the middle so the photo still shows. */
    linear-gradient(90deg,
      rgba(16, 20, 15, .62) 0%,
      rgba(16, 20, 15, .34) 34%,
      rgba(16, 20, 15, 0) 62%),
    linear-gradient(180deg,
      rgba(16, 20, 15, .55) 0%,
      rgba(16, 20, 15, .15) 40%,
      rgba(16, 20, 15, .70) 100%);
}

/* --- the copy ------------------------------------------------------------- */
.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--s-8) clamp(5rem, 12vh, 8.5rem);
  color: var(--cream);
}
.hero__copy { max-width: 760px; }

.hero__pill { margin-bottom: var(--s-5); }
.hero .chip--live {
  background: rgba(252, 252, 250, .14);
  border: 1px solid rgba(252, 252, 250, .26);
  color: var(--cream);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero .live-dot { background: var(--lime); }

.hero__title {
  font-size: var(--text-hero); line-height: var(--lh-hero);
  letter-spacing: -.02em; font-weight: 800;
  color: var(--cream); margin: 0 0 22px;
}
/* Colour only. The line break comes from a <br> in the markup, exactly as the
   prototype does it — display:block here made the span its own block box and
   changed how the whole headline wrapped. */
.hero__title em { font-style: normal; color: var(--straw); }

.hero__lead {
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55;
  color: rgba(251, 248, 240, .85); max-width: 520px; text-wrap: pretty;
  margin: 0 0 32px;
}
.hero__actions { align-items: center; gap: 14px; }
.hero__from { font-size: 15px; font-weight: 600; color: rgba(251, 248, 240, .95); margin-left: 6px; }

/* --- scroll cue ----------------------------------------------------------- */
.hero__cue {
  position: absolute; z-index: 2; left: 50%; bottom: clamp(18px, 3vh, 30px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(251, 248, 240, .72);
}
.hero__cue-label {
  font-family: var(--font-body); font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  line-height: var(--lh-caps); padding-block-end: .09em;
}
.hero__cue-line {
  width: 1.5px; height: 34px; background: currentColor; border-radius: 2px;
  animation: cue-bob 1.8s ease-in-out infinite;
}
@keyframes cue-bob { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(7px); opacity: 1; } }

/* --- slide dots ----------------------------------------------------------- */
.hero__dots {
  position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(18px, 3vh, 30px);
  display: flex; gap: 8px;
}
.hero__dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: rgba(251, 248, 240, .38);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.hero__dot.is-active { background: var(--cream); transform: scale(1.25); }

/* --- the panel that covers the hero --------------------------------------- */
.panel {
  position: relative; z-index: 2;
  background: var(--bg);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  box-shadow: var(--shadow-panel);
}

@media (max-width: 768px) {
  .hero { height: 92svh; min-height: 520px; }
  .hero__inner { padding-block: var(--s-7) clamp(4.5rem, 14vh, 7rem); }
  .hero__dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active .hero__art { animation: none; }
  .hero__slide { transition: none; }
  .hero__cue-line { animation: none; }
}

/* ===== 06-cards.css ===== */
/* ============================================== offer cards + live rail = */

.rail__head { display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }
.rail__head h2 { flex: 0 0 auto; }
.rail__link { margin-left: auto; font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }

/* A rail that starts at the container edge but runs out to the viewport edge,
   so the last card is visibly cut rather than looking like a layout bug. The
   negative margin + matching padding is what buys the bleed without a wrapper. */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(266px, 1fr);
  gap: var(--s-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--gutter);
  padding-bottom: var(--s-5);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail > * { scroll-snap-align: start; }
/* The card needs room for its hover lift inside an overflow:auto track. */
.rail .offer { margin-block: 3px; }
@media (min-width: 1261px) {
  /* Once the container is at max width the bleed has to reach the real edge. */
  .rail { margin-inline: calc((100vw - var(--wrap) + var(--gutter) * 2) / -2); padding-inline: calc((100vw - var(--wrap) + var(--gutter) * 2) / 2); }
}
@media (max-width: 640px) { .rail { grid-auto-columns: minmax(232px, 78%); } }

.offer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
  text-decoration: none; color: inherit;
}
.offer:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--brand-300); text-decoration: none; }

.offer__media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-mint); overflow: hidden; }
.offer__media svg, .offer__media img { width: 100%; height: 100%; object-fit: cover; }
.offer__badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--accent-500); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xs);
  padding: 5px 10px 6px; border-radius: var(--radius-pill); line-height: 1.3;
  box-shadow: 0 2px 8px rgba(20,37,27,.22);
}
.offer__soldout {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(252,252,249,.82);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm);
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted);
  line-height: 1.3;
}

.offer__b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.offer__partner { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); line-height: 1.3; padding-block-end: .09em; }
.offer__meta { font-size: var(--text-xs); color: var(--ink-muted); line-height: 1.45; }
.offer__title { font-size: var(--text-sm); color: var(--ink-muted); }
.offer__foot { margin-top: auto; padding-top: var(--s-3); display: flex; align-items: flex-end; gap: 10px; }
.offer__price { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.offer__was { font-size: var(--text-xs); color: var(--ink-faint); text-decoration: line-through; padding-bottom: 3px; }
.offer__left { margin-left: auto; font-size: var(--text-xs); color: var(--accent-700); font-weight: 600; white-space: nowrap; padding-bottom: 3px; }
.offer__pickup {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: 600; color: var(--brand-700);
  background: var(--brand-50); border-radius: var(--radius-sm);
  padding: 5px 9px; margin-top: var(--s-3); align-self: flex-start;
  font-variant-numeric: tabular-nums;
}
.offer__pickup svg { width: 13px; height: 13px; }
.offer.is-soldout { opacity: .72; }

.rail__empty {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: var(--s-7); text-align: center; color: var(--ink-muted);
  background: var(--surface);
}

/* ------------------------------------------------------------- cards --- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-6);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--brand-300); }
.card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--brand-100); color: var(--brand-700);
  display: grid; place-items: center; margin-bottom: var(--s-4);
}
.card__icon svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-muted); font-size: var(--text-sm); }

/* ------------------------------------------------------------ app phones */
.phone { position: relative; width: 100%; max-width: clamp(190px, 17vw, 250px); }
.phone__frame {
  position: relative;
  border-radius: 42px;
  background: #16261C;
  padding: 10px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.10) inset,
    0 2px 6px rgba(20,37,27,.10),
    0 30px 60px -24px rgba(20,37,27,.42);
}
.phone__screen {
  width: 100%; height: auto; display: block;
  border-radius: 33px; background: #F5F9F4;
}
.phone__notch {
  position: absolute; z-index: 2; top: 10px; left: 50%; transform: translateX(-50%);
  width: 42%; height: 26px;
  background: #16261C; border-radius: 0 0 16px 16px;
}

/* The three phones sit in the narrower (.85fr) column of a .split, next to the
   heading, lead and bulleted list. Sizing them off the VIEWPORT (17vw/13.5vw) let
   the trio grow wider than that column on a large screen, and because they are
   flex items they then overflowed and sat on top of the copy. Sizing them off
   THEIR OWN CONTAINER instead makes that arithmetically impossible:
     32% + 40% + 32% back-to-front, minus two 5% overlaps = 94% of .phones.
   The remaining 6% absorbs the horizontal reach of the 5deg rotations. */
.phones {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0;
  position: relative;
  width: 100%; max-width: 500px; margin-inline: auto;
}
.phones .phone { flex: 0 0 auto; min-width: 0; max-width: none; }
.phones .phone--front { width: 40%; z-index: 1; }
.phones .phone--back {
  width: 32%;
  transform: translateY(26px) rotate(-5deg);
  opacity: .96; z-index: 0;
}
/* Only the inner edges overlap, so neither outer edge is pulled past the box. */
.phones .phone--back:first-child { margin-right: -5%; }
.phones .phone--back:last-child  { margin-left: -5%; transform: translateY(26px) rotate(5deg); }

@media (max-width: 1000px) {
  /* Two phones left: re-derive so the pair still fills the box — 36 + 46 - 6 = 76%. */
  .phones .phone--back:last-child { display: none; }
  .phones { max-width: 420px; }
  .phones .phone--front { width: 46%; }
  .phones .phone--back { width: 36%; }
  .phones .phone--back:first-child { margin-right: -6%; }
}
@media (max-width: 700px) {
  .phones .phone--back { display: none; }
  .phones { max-width: 260px; }
  .phones .phone--front { width: 100%; }
}

/* ------------------------------------------------------------ badges ---- */

/* ==================================================== browse + search bar */
.searchbar {
  position: sticky; top: var(--header-h); z-index: 60;
  background: rgba(252,252,249,.92);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-3);
}

/* Seven controls have to share one line — search, city, place, district, pickup,
   price, sort — or the last of them wraps onto a line of its own and the bar eats
   half the screen before a single set is visible.

   The bases below are EXPLICIT on purpose. 'flex-basis: auto' sizes a field to its
   content, and a <select>'s intrinsic width is its widest option, so the row
   measured far wider than the 1100px content box and wrapped anyway. Each basis is
   instead set just above its label's width (the labels are nowrap, so a label is a
   field's real floor): 200 + 4x112 + 140 + 152 = 940, plus six 8px gaps = 988,
   inside 1100 with ~110px of slack for the search field to absorb. */
.searchbar__row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }

.searchbar__row > .sfield { flex: 1 1 112px; }
.sfield { display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; }
.sfield .sselect { min-width: 0; }
.searchbar__row > .sfield--grow { flex: 2.6 1 200px; min-width: 180px; justify-content: flex-end; }
.searchbar__row > .sfield--price { flex: 1 1 152px; }
/* "Kaina iki Bet kokia" and "Fabijoniškės" are the longest strings in the bar, so
   those two fields get wider bases rather than truncating with an ellipsis. */
.searchbar__row > .sfield--wide { flex: 1.4 1 140px; }
.sfield__l {
  font-size: var(--text-xs); font-weight: 600; color: var(--ink-muted);
  line-height: 1.35; padding-block-end: .09em; white-space: nowrap;
}
.sfield__l b { color: var(--ink); font-variant-numeric: tabular-nums; }

.sinput, .sselect {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 10px 14px;
  font-size: var(--text-sm); line-height: 1.45; color: var(--ink);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  min-height: 42px; width: 100%;
}
.sinput { padding-left: 40px; }
/* Centred in the shorter control: (42 - 19) / 2 ≈ 11. */
.sfield--grow svg {
  position: absolute; left: 14px; bottom: 11px; width: 19px; height: 19px;
  color: var(--ink-faint); pointer-events: none;
}
.sinput:focus, .sselect:focus {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100);
}
.sinput::-webkit-search-cancel-button { cursor: pointer; }
.sselect {
  appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2355665C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px;
}

.srange {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 42px; background: none; cursor: pointer; padding: 0;
}
.srange::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand-500) var(--pct, 100%), var(--line) var(--pct, 100%));
}
.srange::-moz-range-track { height: 5px; border-radius: 3px; background: var(--line); }
.srange::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--brand-500); }
.srange::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8.5px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand-500);
  box-shadow: 0 1px 4px rgba(20,37,27,.25);
}
.srange::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 3px solid var(--brand-500); box-shadow: 0 1px 4px rgba(20,37,27,.25);
}

/* category chips — a horizontal scroller, never a wrapping wall */
.searchbar__chips {
  display: flex; gap: 7px; margin-top: var(--s-2);
  overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.searchbar__chips::-webkit-scrollbar { display: none; }
.fchip {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-pill); padding: 6px 12px 7px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs);
  line-height: 1.35; color: var(--ink); white-space: nowrap;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.fchip:hover { border-color: var(--ink-muted); }
.fchip__n {
  font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--ink-faint); font-size: 11px;
}
.fchip.is-on { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.fchip.is-on .fchip__n { color: rgba(255,255,255,.8); }

.searchbar__meta {
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: var(--s-2); flex-wrap: wrap;
  font-size: var(--text-sm);
}
.searchbar__count { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.searchbar__clear {
  color: var(--brand-700); font-weight: 600; font-size: var(--text-sm);
  text-decoration: underline; text-underline-offset: 3px;
}
.stoggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink-muted); }
.stoggle input { width: 17px; height: 17px; accent-color: var(--brand-500); cursor: pointer; }

/* The filter toggle. Desktop has room for the whole bar, so it only appears at
   the width where the bar would otherwise eat most of a phone screen. */
.fbtn { display: none; }
.fbtn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.fbtn__n {
  min-width: 18px; padding: 1px 5px 2px; border-radius: var(--radius-pill);
  background: var(--brand-500); color: #fff;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

/* results */
.dealgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--s-4); }
.dealgroup + .dealgroup { margin-top: var(--s-8); }
.dealgroup .rail__head { margin-bottom: var(--s-4); }
.dealgroup .rail__head h2 { font-size: var(--text-xl); }
button.rail__link {
  margin-left: auto; color: var(--brand-700); font-weight: 600;
  font-size: var(--text-sm); white-space: nowrap;
}
button.rail__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* These have to carry the same '.searchbar__row >' prefix as the rules above.
   Without it they lose on specificity no matter where the media block sits, and
   the row silently keeps its desktop bases — which is how 'Rikiuoti' ended up
   wrapping onto a line of its own again at tablet widths. */
@media (max-width: 1080px) {
  /* Below this the seven bases (988px incl. gaps) no longer fit the content box,
     so search takes its own line and the six controls share the next one. */
  .searchbar__row > .sfield--grow { flex: 1 1 100%; }
}
@media (max-width: 720px) {
  .searchbar { top: 0; }
  /* Everything but the search box pairs up, price and sort included — five stacked
     rows of controls was 340px of filter before a single set of food appeared. */
  .searchbar__row > .sfield:not(.sfield--grow) { flex: 1 1 calc(50% - 4px); }

  /* And the whole lot collapses. Expanded it is the same bar as ever; closed, the
     phone shows a filter button, the result count and the list/map switch, and
     then food. The meta row is ordered above the fields so the button sits over
     what it opens rather than under it. */
  .searchbar .wrap { display: flex; flex-direction: column; }
  .searchbar__meta { order: -1; margin-top: 0; }
  .searchbar__fields { display: none; margin-top: var(--s-3); }
  .searchbar.is-open .searchbar__fields { display: block; }
  .fbtn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px 8px; border: 1px solid var(--line);
    background: var(--surface); border-radius: var(--radius-pill);
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs);
    line-height: 1.35; padding-block-end: .09em; color: var(--ink);
  }
  .searchbar.is-open .fbtn { border-color: var(--brand-500); color: var(--brand-700); }
}

/* ------------------------------------------------------- browse map view */
.viewtoggle {
  margin-left: auto; display: inline-flex; gap: 3px;
  background: var(--surface-mint); border-radius: var(--radius-pill); padding: 3px;
}
.viewtoggle__b {
  padding: 7px 15px 8px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs);
  line-height: 1.35; color: var(--ink-muted);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.viewtoggle__b.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.dealmap {
  width: 100%; height: clamp(420px, 62vh, 680px);
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-mint); z-index: 0;
}
.leaflet-container { font: inherit; }
.leaflet-popup-content { margin: 13px 15px; font-size: var(--text-sm); line-height: 1.5; }
.leaflet-popup-content b { font-family: var(--font-display); }
.leaflet-popup-content hr { border: 0; border-top: 1px solid var(--line); margin: 9px 0; }
.leaflet-popup-content-wrapper { border-radius: var(--radius); }
.mapop { color: var(--ink-muted); font-size: var(--text-xs); }
.mappop__row + .mappop__row { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); }
.mappop__row b { float: right; font-family: var(--font-display); }

/* A price tag rather than a generic pin — you can shop straight off the map. */
.dealpin__b {
  display: inline-block; transform: translate(-50%, -140%);
  background: var(--brand-500); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  padding: 5px 10px 6px; border-radius: var(--radius-pill);
  white-space: nowrap; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(20,37,27,.35);
}
.dealpin__b::after {
  content: ""; position: absolute; left: 50%; bottom: -7px;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #fff;
}

.dealcluster__b {
  display: inline-flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand-700); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  border: 3px solid #fff; box-shadow: 0 2px 10px rgba(20,37,27,.38);
}
.leaflet-cluster-anim .leaflet-marker-icon { transition: transform .25s ease-out, opacity .25s ease-in; }

/* ==========================================================================
   Today's bundles — the handoff's card grid.
   auto-fill/minmax means the row count follows the viewport rather than a
   breakpoint list, and a short day (three bundles left) still fills the row.
   ========================================================================== */
.bundlegrid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.bundle {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.bundle:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }

.bundle__media { position: relative; height: 190px; background: var(--mint); }
.bundle__media img { width: 100%; height: 100%; object-fit: cover; }

.bundle__badge {
  position: absolute; left: 12px; top: 12px;
  background: var(--honey); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xs);
  line-height: var(--lh-caps); padding: 5px 11px 6px; border-radius: var(--radius-pill);
}
/* Brand green, per the design. The blur behind it is what keeps it readable
   over a photograph — without it a mid-tone green pill sinks into a bright one. */
.bundle__left {
  position: absolute; right: 12px; top: 12px;
  background: var(--fern); color: var(--cream);
  font-weight: 800; font-size: var(--text-xs);
  line-height: var(--lh-caps); padding: 5px 11px 6px; border-radius: var(--radius-pill);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* Sold out drops the green: the pill stops being a count and becomes a state. */
.bundle__left.is-out { background: rgba(28, 42, 32, .72); }

.bundle__b { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.bundle__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.bundle__place {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
  line-height: var(--lh-title); letter-spacing: -.012em; margin: 0; min-width: 0;
}
.bundle__price {
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  color: var(--brand-700); white-space: nowrap;
}
.bundle__top--sub { color: var(--ink-muted); font-size: var(--text-sm); }
.bundle__kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bundle__was { color: var(--ink-strike); text-decoration: line-through; white-space: nowrap; }

.bundle__rule { border-top: 1px dashed var(--line); margin-block: 6px; }

.bundle__pickup {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--ink); margin-top: auto;
}
.bundle__pickup .live-dot { background: var(--lime); flex: 0 0 auto; }

.bundle.is-soldout .bundle__media img { filter: grayscale(.55) opacity(.72); }
.bundle.is-soldout .bundle__price { color: var(--ink-muted); }

/* The skeleton shown before the API answers. */
.bundle.is-skeleton { pointer-events: none; }
.bundle.is-skeleton:hover { transform: none; box-shadow: none; }
.bundle__line { height: 14px; border-radius: 4px; background: var(--line-soft); }
.bundle__line--short { width: 58%; }


/* ===== 07-sections.css ===== */
/* ======================================================= section blocks = */

/* --- benefit constellation --------------------------------------------- */
.constellation { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3vw, 3rem); align-items: center; }
.constellation__col { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.constellation__art { width: clamp(180px, 26vw, 320px); }
.benefit { display: grid; gap: 8px; }
.benefit__icon { width: 40px; height: 40px; color: var(--brand-600); }
.benefit__icon svg { width: 100%; height: 100%; }
.benefit h3 {
  font-size: var(--text-sm); font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  line-height: 1.35; padding-block-end: .09em;
}
.benefit p { font-size: var(--text-sm); color: var(--ink-muted); }
.constellation__col--right { text-align: right; }
.constellation__col--right .benefit__icon { margin-left: auto; }
@media (max-width: 900px) {
  .constellation { grid-template-columns: 1fr 1fr; }
  .constellation__art { display: none; }
  .constellation__col--right { text-align: left; }
  .constellation__col--right .benefit__icon { margin-left: 0; }
}
@media (max-width: 560px) { .constellation { grid-template-columns: 1fr; gap: var(--s-6); } }


/* --- numbered steps -----------------------------------------------------
   The connector used to be a single bar across the whole grid, from 9% to 91%.
   But the numbered circles are not centred in their columns — they sit at the
   LEFT edge of each one, so their centres are 23px in. A grid-spanning bar
   therefore began in mid-air after the first circle and overshot past the last:
   the line visibly failed to touch anything. So each step now draws its OWN
   segment, from the right edge of its circle to the left edge of the next one.
   That measures each column individually, which is also why it needs no
   separate rule for the 3-column variant. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); position: relative; }
.steps--3 { grid-template-columns: repeat(3, 1fr); }

.step { position: relative; }
/* Track and fill share one box: from the circle's edge (46px) across the rest of
   the column plus the grid gap, at the circle's vertical centre (46 / 2 - 1). */
.step::before,
.step::after {
  content: ""; position: absolute; z-index: 0;
  top: 22px; left: 46px; height: 2px;
  width: calc(100% - 46px + var(--s-6));
}
.step::before { background: var(--line); }
.step::after {
  background: var(--brand-400);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 440ms var(--ease-soft);
}
.steps.is-in .step::after { transform: scaleX(1); }
/* Nothing to connect to past the last step. */
.step:last-child::before, .step:last-child::after { display: none; }

.step__n {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); border: 2px solid var(--line);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-base);
  font-variant-numeric: tabular-nums; margin-bottom: var(--s-4);
  position: relative; z-index: 1;
  transition: background var(--dur) var(--ease-out), border-color var(--dur), color var(--dur);
}
.steps.is-in .step__n { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.section--mint .step__n, .section--sand .step__n { background: var(--surface); }

/* Counted, not flashed: circle 1 fills, its line draws, then circle 2, and so on.
   app.js adds .is-in when the block scrolls into view, so this needs no script.
   400ms a step — slow enough to read as counting, brisk enough not to stall. */
.steps.is-in .step:nth-child(1) .step__n { transition-delay: 0ms; }
.steps.is-in .step:nth-child(1)::after   { transition-delay: 120ms; }
.steps.is-in .step:nth-child(2) .step__n { transition-delay: 400ms; }
.steps.is-in .step:nth-child(2)::after   { transition-delay: 520ms; }
.steps.is-in .step:nth-child(3) .step__n { transition-delay: 800ms; }
.steps.is-in .step:nth-child(3)::after   { transition-delay: 920ms; }
.steps.is-in .step:nth-child(4) .step__n { transition-delay: 1200ms; }

.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-muted); font-size: var(--text-sm); }

@media (max-width: 900px) {
  /* One column: a vertical run of horizontal stubs would read as broken, so the
     connectors go and only the circles count themselves in. */
  .steps, .steps--3 { grid-template-columns: 1fr; gap: var(--s-5); }
  .step::before, .step::after { display: none; }
  .step { display: grid; grid-template-columns: 46px 1fr; gap: var(--s-4); align-items: start; }
  .step__n { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* app.js adds .is-in immediately in this case, so the resting state has to be
     the FINISHED state: every circle green, every connector drawn, no motion. */
  .step__n, .step::after { transition: none; }
  .steps.is-in .step__n, .steps.is-in .step::after { transition-delay: 0ms; }
  .steps.is-in .step::after { transform: scaleX(1); }
}

/* --- split band --------------------------------------------------------- */
/* `fr` tracks default to min-width:auto, so one intrinsically wide child — the
   partner marquee's max-content track, a scrolling rail — drags the column out
   past the container and squeezes its neighbour to nothing. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split > * { min-width: 0; }
.split--wide-left  { grid-template-columns: 1.15fr .85fr; }
.split__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.split__media svg, .split__media img { width: 100%; height: auto; display: block; }
.split--flip .split__media { order: -1; }
@media (max-width: 860px) {
  .split, .split--wide-left { grid-template-columns: 1fr; gap: var(--s-6); }
  .split--flip .split__media { order: 0; }
}

.speclist { display: grid; gap: var(--s-4); list-style: none; padding: 0; margin-top: var(--s-5); }
.speclist li { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-3); align-items: start; font-size: var(--text-sm); line-height: 1.55; }
.speclist svg { width: 21px; height: 21px; color: var(--brand-600); margin-top: 2px; }

/* --- parallax photo band ------------------------------------------------ */
.parallax {
  height: clamp(300px, 42vw, 560px);
  background-attachment: fixed; background-size: cover; background-position: center;
  position: relative;
}
/* background-attachment: fixed is ignored on iOS and janks on Android, so
   hand those a plain cover image instead of a broken one. */
@media (hover: none), (max-width: 860px) { .parallax { background-attachment: scroll; } }

/* --- sector tiles ------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; min-width: 0; }
.tile {
  display: block; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-5);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.tile:hover, .tile.is-active { border-color: var(--brand-500); box-shadow: var(--shadow-card); text-decoration: none; }
.tile h3 { margin-bottom: 6px; font-size: var(--text-base); }
.tile p { font-size: var(--text-sm); color: var(--ink-muted); }

/* --- partner wordmarks --------------------------------------------------
   A static, centred, wrapping row. It used to scroll, with both edges faded out
   by a mask-image — but the fade cut the last name off mid-word, which reads as
   a broken layout rather than as motion, and five names fit on one line anyway.
   Set as type, not as replica logos: a fabricated version of somebody's brand
   mark is worse than their name set properly. */
.partners { min-width: 0; padding-block: var(--s-5); }
.partners__track {
  display: flex; align-items: center;
  flex-wrap: wrap; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4rem);
}
.partner-mark {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.05rem, .9rem + .7vw, 1.5rem);
  letter-spacing: -.02em; line-height: 1.3; padding-block-end: .09em;
  color: var(--ink); opacity: .72; white-space: nowrap;
}
/* These are the proof the marketplace is stocked, so they are set to be read,
   not to be hovered over first. */
.section--dark .partner-mark { color: var(--cream); opacity: .92; }

/* --- closing CTA --------------------------------------------------------
   Honey with ink text, per the brand book: it is the one warm block on the
   page and the last thing before the footer. Ink on honey is 8.37:1.
   The circles are decorative translucent ink, not a gradient — two different
   alphas, so they read as two overlapping shapes rather than one wash. */
.cta-band {
  background: var(--honey); color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 80px);
  overflow: hidden; position: relative;
}
.cta-band::before, .cta-band::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.cta-band::before { width: 260px; height: 260px; right: -60px; top: -60px; background: rgba(28, 42, 32, .05); }
.cta-band::after  { width: 200px; height: 200px; right: 80px; bottom: -90px; background: rgba(28, 42, 32, .04); }
/* The prototype sets the copy in one 640px column. There is no wrapper element
   in the markup, so the width is carried by each child instead. */
.cta-band > * { position: relative; max-width: 640px; }
/* An eyebrow defaults to green, which on honey is 2.5:1 — on this band it is
   ink at reduced alpha instead. */
.cta-band h2 { margin-bottom: var(--s-4); color: var(--ink); }
.cta-band p { color: rgba(28, 42, 32, .78); margin-bottom: 30px; }
/* The band is left-aligned, so the shared --center button row is undone here. */
.cta-band .btn-row--center { justify-content: flex-start; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-base);
  line-height: 1.45; color: var(--ink);
}
.faq__q:hover { color: var(--brand-700); }
.faq__icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; position: relative; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast);
}
.faq__icon::before { inset: 9px 2px auto; height: 2px; }
.faq__icon::after  { inset: 2px auto 2px 9px; width: 2px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-soft); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: var(--s-5); color: var(--ink-muted); max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .faq__a { transition: none; } }

/* --- stat row ----------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.stat__v { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.stat__l { font-size: var(--text-sm); color: var(--ink-muted); }
.section--dark .stat__l { color: rgba(234,246,238,.72); }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; gap: var(--s-5); } }

.partner-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.partner-list li {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-sm); color: var(--ink);
  line-height: 1.35; padding-block-end: .09em;
  display: flex; align-items: center; gap: 9px;
}
.partner-list li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-400); flex: 0 0 auto;
}

/* ==========================================================================
   Why cards — four stat cards, the first filled fern.
   ========================================================================== */
.whygrid {
  display: grid; gap: var(--s-4); margin-top: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.whycard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-5);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.whycard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.whycard--fill { background: var(--fern); border-color: var(--fern); }

.whycard__stat {
  display: block; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 1;
  letter-spacing: -.02em; color: var(--brand-700); margin-bottom: var(--s-4);
}
/* Straw on fern is 3.59:1 — fine here because the stat is ≥32px and 900
   weight, which WCAG counts as large text (3.0). It is NOT reused for the
   small labels on the same card. */
.whycard--fill .whycard__stat { color: var(--straw); }

.whycard__title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
  line-height: var(--lh-title); margin-bottom: 6px;
}
.whycard--fill .whycard__title { color: var(--cream); }
.whycard__body { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.6; }
.whycard--fill .whycard__body { color: var(--on-green); }

/* ==========================================================================
   Sticky-phone steps.
   The phone column sticks; the steps scroll past. app.js writes data-step on
   the section and every rule below keys off that one attribute, so the script
   never touches styles directly.
   ========================================================================== */
/* NO overflow on this section. `overflow: clip` (or hidden/auto/scroll) turns an
   ancestor into a scroll container, and position:sticky then resolves against
   THAT instead of the viewport — the phone stopped sticking and had scrolled
   out of sight by the time the reader reached step 4. */
/* Geometry taken from the prototype rather than invented:
     grid  minmax(280px, 420px) 1fr, gap clamp(32px, 6vw, 96px), align-items start
     phone sticky at calc(50vh - 310px) — i.e. vertically CENTRED, since the frame
           is 620px tall. Pinning it under the header instead left it high and it
           slid away before the last step.
     steps padding 8vh 0 12vh — this is what gives the phone its travel; without
           it the column is barely taller than the phone and it never sticks. */
.stepsplit {
  display: grid; grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(32px, 6vw, 96px);
  margin-top: var(--s-8); align-items: start;
}
.stepphone {
  position: sticky; top: calc(50vh - 310px);
  display: flex; justify-content: center;
}

.phoneframe {
  /* The prototype sets 296x620 with a 9px bezel under content-box, so it
     RENDERS 314x638. This sheet is border-box, so those are the numbers to
     write — get it wrong and the phone is 18px short in both directions. */
  width: 314px; height: 638px; border-radius: 46px;
  background: #24352A; border: 9px solid #17241C;
  box-shadow: 0 30px 70px rgba(10, 24, 15, .45);
  position: relative; overflow: hidden;
}
.phoneframe__notch {
  position: absolute; z-index: 3; left: 50%; top: 12px; transform: translateX(-50%);
  width: 96px; height: 26px; background: var(--ink);
  border-radius: var(--radius-pill);
}
.phoneframe__screens { position: absolute; inset: 0; border-radius: 36px; overflow: hidden; background: var(--paper); }

.pscreen {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease-soft), visibility .4s;
  display: flex; flex-direction: column;
}
[data-steps][data-step="1"] .pscreen[data-screen="1"],
[data-steps][data-step="2"] .pscreen[data-screen="2"],
[data-steps][data-step="3"] .pscreen[data-screen="3"],
[data-steps][data-step="4"] .pscreen[data-screen="4"] { opacity: 1; visibility: visible; }

.pscreen__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 42px 18px 12px; font-size: 13px; color: var(--ink-muted);
}
.pscreen__bar b { color: var(--brand-700); font-weight: 800; }
.pscreen__map { position: relative; flex: 1; background: var(--mint); margin: 0 12px; border-radius: 14px; }
.pmap__pin {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--fern); border: 2px solid var(--cream); transform: translate(-50%, -50%);
}
.pmap__pin.is-active { background: var(--honey); width: 20px; height: 20px; }
.pscreen__row {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px 22px;
}
.pscreen__thumb { width: 42px; height: 42px; border-radius: 10px; background: var(--brand-100); flex: 0 0 auto; }
.pscreen__row b { display: block; font-size: 13px; font-weight: 800; }
.pscreen__row i { display: block; font-size: 12px; font-style: normal; color: var(--ink-muted); }

.pscreen__photo { height: 210px; background: var(--brand-100); position: relative; }
.pscreen__body { padding: 18px 16px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pscreen__body b { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.pscreen__body i { font-style: normal; font-size: 12px; color: var(--ink-muted); }
.pscreen__body p { font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }
.pscreen__cta {
  margin-top: auto; text-align: center; background: var(--basil); color: #fff;
  font-weight: 800; font-size: 14px; padding: 12px; border-radius: var(--radius-pill);
}
.pslots { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pslot {
  border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 13px;
  font-size: 13px; font-weight: 600;
}
.pslot.is-on { border-color: var(--basil); background: var(--mint); color: var(--brand-700); }

.pscreen--code { background: var(--fern); align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 30px 20px; }
.pcode__label { font-size: 12px; font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--straw-lite); }
.pcode {
  font-family: var(--font-display); font-weight: 900; font-size: 44px; letter-spacing: -.02em;
  color: var(--cream); background: rgba(252,252,250,.10); border: 1px dashed rgba(252,252,250,.4);
  border-radius: 14px; padding: 12px 22px;
}
.pcode__note { font-size: 12.5px; line-height: 1.5; color: var(--on-green); }
.pcode__where { font-size: 12px; color: rgba(251,248,240,.72); }

.steplist {
  list-style: none; margin: 0; display: flex; flex-direction: column;
  gap: clamp(24px, 4vh, 44px);
  padding: 8vh 0 12vh;   /* the phone's sticky travel comes from here */
}
.steprow {
  border-left: 3px solid rgba(251, 248, 240, .18); padding: 6px 0 6px 28px;
  opacity: .55; transition: border-color .3s ease, opacity .3s ease;
}
[data-steps][data-step="1"] .steprow[data-step-i="1"],
[data-steps][data-step="2"] .steprow[data-step-i="2"],
[data-steps][data-step="3"] .steprow[data-step-i="3"],
[data-steps][data-step="4"] .steprow[data-step-i="4"] { opacity: 1; border-left-color: var(--honey); }

.steprow__n {
  display: inline-block; font-family: var(--font-display); font-weight: 900;
  font-size: 15px; letter-spacing: normal; color: var(--straw);
  line-height: var(--lh-caps); padding-block-end: .09em; margin-bottom: 8px;
}
.steprow h3 { color: var(--cream); margin: 0 0 10px; }
.steprow p { color: rgba(251, 248, 240, .92); font-size: 16.5px; line-height: 1.6; max-width: 480px; }

/* Last row of the steps column — no border-left, it is not a step. */
.steps-sticky__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3) var(--s-5); padding-left: 28px;
}
.steps-sticky__note { color: rgba(251, 248, 240, .62); margin: 0; }

@media (max-width: 900px) {
  /* One column: the prototype's own script switches the phone wrap to static at
     this width, because there is nothing beside it left to stick against. */
  .stepsplit { grid-template-columns: 1fr; gap: var(--s-7); }
  .stepphone { position: static; }
  .steplist { gap: var(--s-6); padding: 0; }
  .steprow { opacity: 1; border-left-color: var(--honey); }
}

/* ==========================================================================
   The floating price chip on the "what is a bundle" photo.
   ========================================================================== */
.split__media { position: relative; }
.pricechip {
  position: absolute; right: clamp(-14px, -1vw, 0px); bottom: clamp(18px, 4vw, 34px);
  display: inline-flex; align-items: baseline; gap: 10px;
  background: var(--surface); color: var(--ink);
  padding: 14px 18px; border-radius: 16px; box-shadow: var(--shadow-lift);
}
.pricechip__now { font-family: var(--font-display); font-weight: 900; font-size: 26px; color: var(--brand-700); letter-spacing: -.02em; }
/* --ink-strike, not the handoff's #9AA396: that is 2.54:1 on white. */
.pricechip__was { font-size: 14px; color: var(--ink-strike); text-decoration: line-through; }

/* Checkmark bullets. */
.ticklist { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: flex; flex-direction: column; gap: var(--s-4); }
.ticklist li { display: grid; grid-template-columns: 26px 1fr; gap: var(--s-3); align-items: start; }
.ticklist svg { width: 26px; height: 26px; color: #fff; background: var(--basil); border-radius: 50%; padding: 5px; }
.ticklist span { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-muted); }

/* ==========================================================================
   Business landing.
   ========================================================================== */
/* The business page runs a step below the homepage's display scale: its H2s are
   section labels above a card grid, not the page's own headline. */
.bizwhy-section h2, .bizsteps-section h2 { font-size: clamp(30px, 3.4vw, 48px); }

/* The header is sticky and in flow here — it is only overlaid on the homepage's
   pinned hero — so this must not add --header-h on top of its own padding. */
.bizhero { background: var(--fern); color: var(--cream); padding-block: var(--s-9) var(--s-9); }
.bizhero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.bizhero .eyebrow { color: var(--straw); }
.bizhero__h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 4.6vw, 68px); line-height: var(--lh-hero); letter-spacing: var(--tracking-hero);
  color: var(--cream); margin: var(--s-3) 0 var(--s-4);
}
.bizhero__h1 em { font-style: normal; color: var(--straw); }
.bizhero__lead { font-size: var(--text-lg); line-height: 1.55; color: var(--on-green); max-width: 38rem; }
.bizhero__media { position: relative; border-radius: var(--radius-lg); overflow: visible; }
.bizhero__media picture, .bizhero__media img { display: block; width: 100%; border-radius: var(--radius-lg); }
/* height:auto is load-bearing. The <img> carries width/height attributes so the
   browser can reserve space before it loads, and those map to a presentational
   height:1500px — with both dimensions set, aspect-ratio is ignored and the
   image renders at its full intrinsic height. */
.bizhero__media img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.salechip {
  position: absolute; left: -14px; bottom: 20px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); color: var(--ink);
  padding: 14px 20px; border-radius: 14px; box-shadow: var(--shadow-lift);
}
.salechip__l {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  line-height: var(--lh-caps); color: #6B7568;
}
.salechip__n { font-family: var(--font-display); font-weight: 900; font-size: 26px; color: var(--ink); letter-spacing: -.02em; }

.statgrid { display: grid; gap: var(--s-4); margin-top: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.statcard { background: var(--fern); border-radius: var(--radius); padding: 28px 26px; color: var(--on-green); }
.statcard__n {
  display: block; font-family: var(--font-display); font-weight: 900;
  font-size: 40px; line-height: 1;
  letter-spacing: -.02em; color: var(--straw); margin-bottom: var(--s-3);
}
.statcard__body { font-size: var(--text-sm); line-height: 1.6; }

.bizsteps { display: grid; gap: var(--s-4); margin-top: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* The section is white and the cards are paper — the pairing is the other way
   round from the rest of the site, which is what sets this band apart. .12 and
   .08 are the prototype's own line alphas, a step up from --line. */
/* Targeted by class, not by the #kaip-veikia id — the id is the nav anchor and
   should stay free of styling, and an id selector outranks everything a
   component could later use to override it. */
.bizsteps-section { background: var(--surface); border-block: 1px solid rgba(30, 58, 43, .08); }
.bizstep { background: var(--bg); border: 1px solid rgba(30, 58, 43, .12); border-radius: var(--radius); padding: var(--s-5); }
/* A plain 01 / 02 / 03 label — no chip, no circle. */
.bizstep__n {
  display: block; color: var(--fern);
  font-family: var(--font-display); font-weight: 900; font-size: 15px; margin-bottom: var(--s-3);
}
.bizstep h3 { margin-bottom: 8px; }
.bizstep p { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.6; }

/* --- the lead band -------------------------------------------------------- */
.leadband__inner {
  background: var(--honey); border-radius: var(--radius-lg);
  padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 80px);
  display: grid; grid-template-columns: 1fr minmax(320px, 440px);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.leadband h2 { font-size: clamp(32px, 3.8vw, 54px); color: var(--ink); }
.leadband .lead { color: var(--ink); }
.leadband .partner-mark { color: var(--ink); opacity: .62; }

.leadform {
  background: var(--surface); border-radius: var(--radius);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 14px;
}
/* --ink-faint, not the handoff's #75806F: 4.03:1 is too thin at 12px. */
.leadform__consent { font-size: 12px; text-align: center; color: var(--ink-faint); line-height: 1.5; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__l { font-size: var(--text-xs); font-weight: 800; color: var(--ink-muted); }
.field__i {
  border: 1.5px solid rgba(30, 58, 43, .2); border-radius: var(--radius-sm);
  padding: 12px 14px; background: var(--surface); font-size: var(--text-sm); min-height: 46px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field__i:focus { outline: none; border-color: var(--basil); box-shadow: 0 0 0 3px rgba(53, 134, 70, .18); }
.field__i:user-invalid { border-color: var(--danger); }

@media (max-width: 900px) {
  .bizhero__grid, .leadband__inner { grid-template-columns: 1fr; }
  .bizhero { padding-block: var(--s-8); }
}

/* --- back link -----------------------------------------------------------
   Top-left of a page that is a destination rather than a stop on a journey.
   A way out belongs where the eye starts, not under the thing being asked for. */
.backlink {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: var(--s-6);
  font-size: var(--text-sm); font-weight: 700;
  color: rgba(251, 248, 240, .82); text-decoration: none;
  transition: color var(--dur-fast), gap var(--dur-fast);
}
.backlink:hover { color: var(--cream); gap: 12px; text-decoration: none; }
.backlink span { font-size: 1.1em; line-height: 1; }
/* On a light page the same component inverts. */
.panel .backlink, .section .backlink { color: var(--ink-muted); }
.panel .backlink:hover, .section .backlink:hover { color: var(--ink); }

/* ===== 08-forms.css ===== */
/* ================================================================ forms = */

.field { margin-bottom: var(--s-5); }
.field__label { display: block; margin-bottom: 7px; font-size: var(--text-sm); font-weight: 600; line-height: 1.4; }
.field__label .req { color: var(--danger); margin-left: 2px; }
.field__opt { color: var(--ink-muted); font-weight: 400; }
.field__hint { margin-top: 6px; font-size: var(--text-xs); color: var(--ink-muted); line-height: 1.5; }
.field__err { margin-top: 6px; font-size: var(--text-xs); color: var(--danger); line-height: 1.5; display: none; }
.field.has-error .field__err { display: block; }

.input, .select, .textarea {
  width: 100%; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; font-size: var(--text-base);
  line-height: 1.45;              /* Latvian ķ ļ ņ descend below a tighter box */
  color: var(--ink);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-muted); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.field.has-error .input, .field.has-error .select { border-color: var(--danger); }
.textarea { min-height: 120px; resize: vertical; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2355665C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
  padding-right: 40px;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: inline-flex; align-items: center;
  padding: 11px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--text-sm); line-height: 1.45; cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.choice span:hover { border-color: var(--ink-muted); }
.choice input:checked + span { border-color: var(--brand-500); background: var(--brand-50); font-weight: 600; box-shadow: inset 0 0 0 1px var(--brand-500); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }

.consent { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); align-items: start; }
.consent input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand-500); cursor: pointer; }
.consent label { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.55; }

.form-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-card);
}
.fieldset-title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-base);
  margin-bottom: var(--s-4); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line); line-height: 1.4;
}

.notice {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid color-mix(in srgb, var(--accent-700) 34%, transparent);
  background: var(--accent-100);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); line-height: 1.55;
}
.notice svg { width: 20px; height: 20px; color: var(--accent-700); margin-top: 2px; }
.notice strong { color: var(--accent-700); }

/* ===== 09-footer.css ===== */
/* =============================================================== footer = */

/* A rounded panel, not a slab: the fern block is lifted onto the paper ground
   by its top corners the same way .panel is lifted over the hero. */
.footer {
  background: var(--brand-800); color: rgba(251,248,240,.92);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  padding-block: var(--s-9) 0;
}
.footer__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer .brand { color: var(--cream); font-size: 1.8125rem; }   /* 29px, bigger than the header's 27 */
.footer__mission { margin-top: var(--s-4); font-size: var(--text-sm); max-width: 32ch; line-height: 1.6; }
/* Column headings are set in the BODY face, not the display one: at 12.5px in
   caps Anybody's wide letterforms read as a fifth column of noise. The .78
   cream measures 3.6:1 on fern — under AA, and deliberate, exactly as --basil
   is in 01-tokens.css: these are four repeated category words above the links
   they label, and the design sets them back on purpose. */
.footer__h {
  font-family: var(--font-body); font-weight: 800; font-size: 12.5px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: rgba(251,248,240,.78); margin-bottom: var(--s-4); line-height: 1.3; padding-block-end: .09em;
}
.footer__list { list-style: none; padding: 0; display: grid; gap: 11px; }
.footer__list a { color: rgba(251,248,240,.95); text-decoration: none; font-size: var(--text-sm); line-height: 1.45; }
.footer__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Store links, quiet: down here they are a secondary route into the app, not
   the ask, so they are bordered chips rather than the app section's pills. */
.footer__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.footer__store {
  background: rgba(251,248,240,.1); border: 1px solid rgba(251,248,240,.18);
  color: var(--cream); text-decoration: none;
  font-weight: 800; font-size: 13px; line-height: 1.3;
  padding: 10px 18px; border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast);
}
.footer__store:hover { background: rgba(251,248,240,.18); color: var(--cream); text-decoration: none; }

/* The hairline sits on the legal row rather than under the grid, so the rule
   and the line it separates move together. */
.footer__bottom {
  border-top: 1px solid rgba(251,248,240,.12);
  margin-top: 44px; padding-top: 24px; padding-bottom: var(--s-6);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: var(--text-xs); color: rgba(251,248,240,.78); line-height: 1.6;
}
.footer__legal { max-width: 62ch; }
.footer__links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__links a { color: rgba(251,248,240,.82); text-decoration: none; }
.footer__links a:hover { color: #fff; }

/* --------------------------------------------------------- cookie bar -- */
/* --- cookie consent ------------------------------------------------------
   Answered once and then remembered — see app.js for why the answer lives in a
   cookie rather than localStorage. It slides up rather than appearing, and it
   is [hidden] when closed so it is out of the tab order entirely, not merely
   invisible. */
.cookie {
  /* Bottom RIGHT: the hero's headline, buttons and price all sit bottom-left,
     and a consent card in that corner covers the first thing anyone reads. */
  position: fixed; z-index: 150; right: 20px; bottom: 20px;
  width: min(420px, calc(100vw - 40px));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
  padding: var(--s-5);
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
}
.cookie.is-open { opacity: 1; transform: none; }

.cookie__title {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg);
  line-height: var(--lh-title); letter-spacing: -.012em; margin-bottom: 8px;
}
.cookie__body { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.6; }
.cookie__body a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-4); }
.cookie__actions .btn { flex: 1 1 auto; }
.cookie__saved {
  margin-top: var(--s-4); font-size: var(--text-sm); line-height: 1.55;
  color: var(--brand-700);
}

/* A button that has to sit in a row of links without looking like one. */
.footer__linkbtn {
  padding: 0; font: inherit; color: inherit; background: none; border: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.footer__linkbtn:hover { text-decoration-thickness: 2px; }

@media (max-width: 560px) {
  /* Full width on a phone — there is no corner to tuck into. */
  .cookie { left: 12px; right: 12px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie { transition: none; transform: none; }
}

/* ---------------------------------------------------------- auth split -- */
.auth { min-height: calc(100svh - var(--header-h)); display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; min-height: 0; } }
.auth__panel { display: flex; align-items: center; justify-content: center; padding: var(--space-section) var(--gutter); }
.auth__form { width: 100%; max-width: 27rem; }
.auth__form h1 { font-size: var(--text-3xl); margin-bottom: var(--s-3); }
.auth__aside {
  background: var(--brand-800); color: rgba(234,246,238,.82);
  padding: var(--space-section) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
}
.auth__aside > * { max-width: 26rem; }
.auth__aside h2 { color: #fff; margin-bottom: var(--s-4); }
@media (max-width: 900px) { .auth__aside { order: -1; padding-block: var(--s-8); } }
.auth__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.auth__alt { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--ink-muted); }

.charter { display: grid; gap: var(--s-4); list-style: none; padding: 0; }
.charter li { display: grid; grid-template-columns: 26px 1fr; gap: var(--s-4); align-items: start; font-size: var(--text-base); line-height: 1.55; }
.charter svg { width: 22px; height: 22px; color: var(--brand-500); margin-top: 3px; }
.section--dark .charter svg { color: var(--brand-300); }

/* ===== 10-brandbook.css ===== */
/* ==========================================================================
   Brand book — /brand-book/. One English reference page.
   Everything here reads from the same tokens the site uses, so a swatch cannot
   drift from the colour it claims to document.
   ========================================================================== */

.bb { --bb-pad: clamp(1.5rem, 5vw, 4.5rem); }
.bb > * { max-width: 62rem; margin-inline: auto; padding-inline: var(--bb-pad); }

.bb-cover {
  background: var(--fern); color: var(--cream);
  max-width: none; text-align: center;
  padding-block: clamp(4rem, 12vh, 8rem);
}
/* It is the page's h1, so the display face must not inherit — the wordmark is
   always Fraunces, whatever element carries it. */
.bb-cover__mark {
  font-family: var(--font-word); font-style: italic; font-weight: 600;
  font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1.1;
  letter-spacing: -.01em; color: var(--cream);
}
.bb-cover__meta {
  margin-top: var(--s-5); font-weight: 800; font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  line-height: var(--lh-caps); padding-block-end: .09em; color: var(--straw-lite);
}
.bb-cover__lead { margin: var(--s-5) auto 0; max-width: 34rem; color: var(--on-green); line-height: 1.6; }

.bb-sec { padding-block: clamp(3rem, 7vw, 5rem); border-bottom: 1px solid var(--line); }
.bb-sec:last-child { border-bottom: 0; }
.bb-num {
  font-weight: 800; font-size: var(--text-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; line-height: var(--lh-caps); padding-block-end: .09em;
  color: var(--brand-700); margin-bottom: var(--s-3);
}
.bb-h3 { margin-top: var(--s-7); margin-bottom: var(--s-3); }
.bb-note { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.65; max-width: 46rem; }

.bb-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); margin: var(--s-5) 0 var(--s-6); }
.bb-logo { display: grid; place-items: center; padding: var(--s-7) var(--s-4); border-radius: var(--radius); }
.bb-logo .wordmark { font-size: 1.75rem; }
.bb-logo--light { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.bb-logo--fern  { background: var(--fern); color: var(--cream); }
.bb-logo--ink   { background: var(--ink);  color: var(--cream); }

.bb-rules { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: flex; flex-direction: column; gap: 10px; }
.bb-rules li {
  position: relative; padding-left: 20px; font-size: var(--text-sm);
  line-height: 1.65; color: var(--ink-muted);
}
.bb-rules li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--basil);
}
.bb-rules b { color: var(--ink); }

.bb-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.bb-swatch { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-4); align-items: start; }
.bb-swatch__chip { width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--line); }
.bb-swatch b { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); }
.bb-swatch code { margin-left: 8px; font-size: 12px; color: var(--ink-faint); }
.bb-swatch p { font-size: var(--text-xs); color: var(--ink-muted); line-height: 1.55; margin-top: 4px; }

.bb-table { width: 100%; border-collapse: collapse; margin-top: var(--s-4); font-size: var(--text-sm); }
.bb-table th, .bb-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bb-table th { font-weight: 800; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.bb-table code { font-size: 12px; }
.bb-table td { color: var(--ink-muted); }

.bb-type { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-5); }
.bb-type__row { display: grid; grid-template-columns: 260px 1fr; gap: var(--s-5); align-items: baseline; }
.bb-type__l { font-size: var(--text-xs); font-weight: 800; color: var(--ink-muted); }
.bb-spec { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.bb-yes { color: var(--brand-700); }
.bb-no  { color: var(--danger); }

.bb-comp { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-6); margin-top: var(--s-5); }
.bb-two  { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-6); margin-top: var(--s-5); }

@media (max-width: 700px) {
  .bb-type__row { grid-template-columns: 1fr; gap: 8px; }
  .bb-table { display: block; overflow-x: auto; }
}