/* ==========================================================================
   BookTide - booktide.in
   Single stylesheet. Assembled from _build/css/00-base.css + 01..07 section
   sheets, in that order (later sheets deliberately rely on source order to
   refine base rules at equal specificity - do not reorder).
   No external requests: no @import, no url(), no web fonts.
   Mobile-first. Breakpoints: 640px / 900px / 1120px.
   ========================================================================== */

/* ==========================================================================
   === 00 - BASE: reset, tokens, elements, primitives, components, chat kit, a11y
   source: _build/css/00-base.css
   ========================================================================== */

/* ==========================================================================
   BookTide — base stylesheet (design system contract)
   Mobile-first. Breakpoints: 640px / 900px / 1120px. No external requests.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol { margin: 0; }

ul[class], ol[class] { padding: 0; list-style: none; }

img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; }

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --brand: #0F4C5C;
  --brand-900: #072B34;
  --brand-700: #14657A;
  --brand-500: #2A8CA5;
  --brand-100: #D6E7EC;
  --brand-50:  #F1F7F9;

  /* Text */
  --ink: #222222;
  --ink-soft: #3D4548;
  --muted: #666666;
  --on-brand: #FFFFFF;
  --on-brand-muted: rgba(255, 255, 255, 0.78);

  /* Surfaces & lines */
  --page: #FAF9F6;
  --card: #FFFFFF;
  --surface-alt: #F4F2ED;
  /* Dedicated alternating-band wash. --brand-50 is the same lightness as
     --page, so a .section--alt band did not read as a band at all. */
  --band-alt: #EDF4F6;
  --hairline: #E5E1D8;
  --hairline-strong: #D4CFC3;
  --hairline-on-brand: rgba(255, 255, 255, 0.18);

  /* WhatsApp green — CTAs and the WhatsApp glyph only */
  --wa: #25D366;            /* authentic WhatsApp green — used ONLY inside the chat mockups */
  --wa-strong: #0D8648;     /* mockup send button + footer channel icon */
  --wa-deep: #0A6E3B;
  --wa-tint: #E7F7EE;

  /* Action purple — sampled from the Novatide logo swoosh (#403088 → #8840B8).
     This is the colour of every "chat to us" CTA button. */
  --cta: #7A3BAE;           /* 6.85:1 with white text */
  --cta-strong: #632E90;    /* hover */
  --cta-soft: #E7D8F6;      /* light fill for CTAs sitting on the deep-teal bands */
  --cta-soft-hover: #F2E9FB;
  --cta-ink: #45206B;       /* deep purple text on --cta-soft */

  /* Status. --success is darkened from #1B7F4F so the hero confirmation line
     clears AA (5.75:1) on --success-tint at small bold sizes. */
  --success: #166B43;
  --success-tint: #E6F4EC;

  /* Chat-mockup surfaces. Assembly note: these four were raw hex values inside
     component rules in the section sheets; they are tokenised here so no colour
     literal lives outside :root. */
  --chat-surface: #ECE5DD;  /* the classic warm-grey conversation background */
  --chat-out: #DCF8C6;      /* outgoing (patient) bubble */
  --chat-meta: #5A6B63;     /* timestamp / tick row inside a bubble (AA on white, --chat-out and --success-tint) */
  --eyebrow-on-brand: #9FD6E4; /* .eyebrow on a deep teal surface */

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 76, 92, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 76, 92, 0.07), 0 1px 2px rgba(15, 76, 92, 0.05);
  --shadow-md: 0 4px 16px rgba(15, 76, 92, 0.08), 0 1px 3px rgba(15, 76, 92, 0.05);
  --shadow-lg: 0 12px 32px rgba(15, 76, 92, 0.12), 0 2px 8px rgba(15, 76, 92, 0.06);
  --shadow-wa: 0 6px 18px rgba(122, 59, 174, 0.28);

  /* Type scale (fluid, 360px → 1120px) */
  --fs-xs:      clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --fs-sm:      clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem);
  --fs-base:    clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
  --fs-lead:    clamp(1.0625rem, 0.97rem + 0.39vw, 1.25rem);
  --fs-h4:      clamp(1.0625rem, 1rem + 0.26vw, 1.1875rem);
  --fs-h3:      clamp(1.25rem, 1.13rem + 0.53vw, 1.5rem);
  --fs-h2:      clamp(1.5rem, 1.2rem + 1.32vw, 2.125rem);
  --fs-h1:      clamp(2rem, 1.53rem + 2.11vw, 3rem);
  --fs-display: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6rem;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Layout */
  --container: 1120px;
  --container-narrow: 760px;
  --gutter: var(--sp-5);

  /* Motion */
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 450ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Focus. --ring is what every focus outline reads; dark surfaces re-set it. */
  --focus: #14657A;
  --focus-on-brand: #FFFFFF;
  --ring: var(--focus);

  /* Font stack */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", "Noto Sans", "Noto Sans Devanagari", "Noto Sans Gujarati",
    Arial, sans-serif;
}

@media (min-width: 640px) { :root { --gutter: var(--sp-6); } }

/* --------------------------------------------------------------------------
   3. Base elements
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--page);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  color: var(--brand-900);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: 0; }

p { color: var(--ink); max-width: 68ch; }

a {
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--brand); }
}

strong, b { font-weight: 700; color: var(--brand-900); }

ul, ol { padding-left: 1.15rem; color: var(--ink); }
li + li { margin-top: var(--sp-2); }

small { font-size: var(--fs-sm); color: var(--muted); }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-6); }

@media (min-width: 640px) {
  .section { padding-block: var(--sp-9); }
  .section--tight { padding-block: var(--sp-7); }
}

@media (min-width: 900px) {
  .section { padding-block: var(--sp-10); }
  .section--tight { padding-block: var(--sp-8); }
}

.section--alt { background: var(--band-alt); }

.section--brand {
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-900) 100%);
  color: var(--on-brand);
  --ring: var(--focus-on-brand);
}
.section--brand h1,
.section--brand h2,
.section--brand h3,
.section--brand h4,
.section--brand strong { color: var(--on-brand); }
.section--brand p,
.section--brand li,
.section--brand .lead { color: var(--on-brand-muted); }
.section--brand small { color: var(--on-brand-muted); }
.section--brand a:not(.btn) { color: var(--on-brand); }
.section--brand .eyebrow { color: var(--eyebrow-on-brand); }
.section--brand .hairline { background: var(--hairline-on-brand); }

.grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid { gap: var(--sp-5); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

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

.stack > * + * { margin-top: var(--sp-4); }
.stack--sm > * + * { margin-top: var(--sp-2); }
.stack--lg > * + * { margin-top: var(--sp-6); }

.center { text-align: center; }
.center p,
.center .lead { margin-inline: auto; }

.measure { max-width: 60ch; }

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

/* Hover lifts and tints are gated on a real pointer: on a touchscreen the
   state latches after a tap until something else is tapped. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
}
.btn:active { transform: translateY(0); }

.btn svg { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

.btn--wa {
  background: var(--cta);
  color: var(--on-brand);
  box-shadow: var(--shadow-wa);
}

/* On the deep-teal bands a dark purple would sink into the background,
   so the CTA flips to a light lavender fill with deep purple text. */
.section--brand .btn--wa {
  background: var(--cta-soft);
  color: var(--cta-ink);
  box-shadow: none;
}
.btn--primary {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-sm);
}

.btn--ghost {
  background: transparent;
  color: var(--brand);
  border-color: var(--hairline-strong);
}

.section--brand .btn--ghost {
  color: var(--on-brand);
  border-color: var(--hairline-on-brand);
}

@media (hover: hover) and (pointer: fine) {
  .btn--wa:hover { background: var(--cta-strong); color: var(--on-brand); }
  .section--brand .btn--wa:hover { background: var(--cta-soft-hover); color: var(--cta-ink); }
  .btn--primary:hover { background: var(--brand-700); color: var(--on-brand); }
  .btn--ghost:hover { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand); }
  .section--brand .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--on-brand);
  }
}

.btn--lg {
  padding: 0.95rem 1.6rem;
  font-size: var(--fs-lead);
}

.btn--block { display: flex; width: 100%; }

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}

@media (min-width: 640px) { .card { padding: var(--sp-6); border-radius: var(--r-xl); } }

.card--raised { box-shadow: var(--shadow-md); border-color: transparent; }

.card--brand {
  background: var(--brand);
  border-color: transparent;
  color: var(--on-brand);
  box-shadow: var(--shadow-lg);
  --ring: var(--focus-on-brand);
}
.card--brand h2, .card--brand h3, .card--brand h4, .card--brand strong { color: var(--on-brand); }
.card--brand p, .card--brand li, .card--brand small { color: var(--on-brand-muted); }
.card--brand .eyebrow { color: var(--eyebrow-on-brand); }
.card--brand a:not(.btn) { color: var(--on-brand); }

.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-700);
}

.pill,
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.25rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--brand-100);
  color: var(--brand-900);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.badge--soon {
  background: var(--surface-alt);
  color: var(--muted);
  border-color: var(--hairline);
}

.badge--success { background: var(--success-tint); color: var(--success); }

.badge--solid { background: var(--brand); color: var(--on-brand); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
}

.hairline {
  height: 1px;
  border: 0;
  background: var(--hairline);
  margin-block: var(--sp-6);
}

/* --------------------------------------------------------------------------
   6. Chat-bubble motif (WhatsApp-style mockups, no brand marks)
   -------------------------------------------------------------------------- */
.chat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--chat-surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.chat__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--brand);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  color: var(--on-brand);
}

.chat__avatar {
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: var(--brand-700);
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--on-brand);
}

.chat__name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; }

.bubble {
  position: relative;
  max-width: 86%;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.bubble--in {
  align-self: flex-start;
  background: var(--card);
  border-top-left-radius: 2px;
}

.bubble--in::before {
  content: "";
  position: absolute;
  top: 0;
  left: -7px;
  width: 8px;
  height: 12px;
  background: var(--card);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.bubble--out {
  align-self: flex-end;
  background: var(--chat-out);
  border-top-right-radius: 2px;
}

.bubble--out::before {
  content: "";
  position: absolute;
  top: 0;
  right: -7px;
  width: 8px;
  height: 12px;
  background: var(--chat-out);
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

.bubble__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: var(--chat-meta);
}

.bubble__meta svg { width: 0.95em; height: 0.95em; fill: none; stroke: var(--brand-500); stroke-width: 2; }

.chat-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: flex-start;
  max-width: 86%;
  width: 100%;
}

.chat-btn {
  display: block;
  width: 100%;
  padding: 0.45rem 0.7rem;
  background: var(--card);
  border-radius: var(--r-sm);
  color: var(--brand-700);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   7. Accessibility
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.chat-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--r-sm);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); color: var(--on-brand); }

::selection { background: var(--brand-100); color: var(--brand-900); }

/* --------------------------------------------------------------------------
   8. Scroll reveal
   -------------------------------------------------------------------------- */
/* Hidden state applies only when the page script has set class="js" on <html>,
   so content is never invisible if the JS fails or is blocked. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  /* Release the compositor layer once the one-shot animation has run. */
  will-change: auto;
}

/* A page printed before it has been scrolled must not print blank blocks. */
@media print {
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

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

  .reveal,
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover { transform: none; }
}


/* ==========================================================================
   === 01 - HEADER (.s-nav) + HERO (.s-hero)
   source: _build/css/01-header-hero.css
   ========================================================================== */

/* ==========================================================================
   01 — Site header (.s-nav) + hero (.s-hero)
   Extends 00-base.css. Tokens only, mobile-first, 640 / 900 / 1120 breakpoints.
   ========================================================================== */

/* Height of the sticky header. Used for in-page anchor offsets. */
:root { --s-nav-h: 3.5rem; }

@media (min-width: 900px) { :root { --s-nav-h: 4.25rem; } }

/* Anchored sections must clear the sticky header. Zero specificity, so any
   section stylesheet can still override it.
   Assembly note: main[id] added so the skip link's #main target is not parked
   underneath the sticky header either. */
:where(section[id], header[id], main[id]) {
  scroll-margin-top: calc(var(--s-nav-h) + var(--sp-4));
}

/* --------------------------------------------------------------------------
   1. Header shell
   -------------------------------------------------------------------------- */
.s-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--page);
  border-bottom: 1px solid var(--hairline);
}

@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .s-nav {
    background: color-mix(in srgb, var(--page) 82%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
  }
}

.s-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--s-nav-h);
}

/* --------------------------------------------------------------------------
   2. Brand lockup
   -------------------------------------------------------------------------- */
.s-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-right: auto;
  padding: var(--sp-1);
  margin-left: calc(var(--sp-1) * -1);
  border-radius: var(--r-sm);
  color: var(--brand-900);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .s-nav__brand:hover { color: var(--brand); }
}

.s-nav__mark {
  display: block;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
}

.s-nav__mark svg { width: 100%; height: 100%; }
.s-nav__mark-body { fill: var(--brand); }
.s-nav__mark-wave { stroke: var(--card); }

@media (min-width: 640px) {
  .s-nav__mark { width: 2rem; height: 2rem; }
}

.s-nav__lockup {
  display: grid;
  line-height: 1.05;
}

.s-nav__wordmark {
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: inherit;
}

.s-nav__by {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   3. Mobile disclosure toggle
   The <details> holds only the summary; the panel is a sibling revealed with
   :has(), so nothing depends on how a browser hides <details> content.
   -------------------------------------------------------------------------- */
.s-nav__menu { flex: none; }

.s-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-sm);
  color: var(--brand-900);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--t-fast) var(--ease);
}

.s-nav__toggle::-webkit-details-marker { display: none; }
.s-nav__toggle::marker { content: ""; }
@media (hover: hover) and (pointer: fine) {
  .s-nav__toggle:hover { background: var(--brand-50); }
}

.s-nav__icon { width: 1.5rem; height: 1.5rem; }
.s-nav__icon--close { display: none; }
.s-nav__menu[open] .s-nav__icon--open { display: none; }
.s-nav__menu[open] .s-nav__icon--close { display: block; }

/* --------------------------------------------------------------------------
   4. Nav links — drop-down panel on mobile, inline row from 900px
   -------------------------------------------------------------------------- */
.s-nav__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--sp-2) var(--gutter) var(--sp-4);
  background: var(--card);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
}

/* General sibling, not :has() — an engine without :has() drops the whole
   selector and the hamburger becomes a dead control with no fallback.
   <details class="s-nav__menu"> precedes <nav class="s-nav__panel"> on
   every page, so this is equivalent and universally supported. */
.s-nav__menu[open] ~ .s-nav__panel { display: block; }

.s-nav__links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.s-nav__links li + li { margin-top: 0; }

.s-nav__links a {
  display: block;
  padding: var(--sp-3) var(--sp-2);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.s-nav__links li + li a { border-top: 1px solid var(--hairline); }

@media (hover: hover) and (pointer: fine) {
  .s-nav__links a:hover {
    background: var(--brand-50);
    color: var(--brand);
  }
}

@media (min-width: 900px) {
  .s-nav__menu { display: none; }
  .s-nav__inner { gap: var(--sp-4); }

  .s-nav__panel {
    display: block;
    position: static;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .s-nav__links {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-1);
  }

  .s-nav__links a {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
  }

  .s-nav__links li + li a { border-top: 0; }
}

/* --------------------------------------------------------------------------
   5. Header CTA
   -------------------------------------------------------------------------- */
.s-nav__cta {
  flex: none;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  font-size: var(--fs-sm);
}

.s-nav__cta-more { display: none; }

@media (min-width: 640px) {
  .s-nav__cta { padding: 0.6rem 1.2rem; }
  .s-nav__cta-more { display: inline; }
}

/* --------------------------------------------------------------------------
   6. Hero shell
   -------------------------------------------------------------------------- */
.s-hero {
  position: relative;
  padding-top: var(--sp-7);
  background:
    radial-gradient(100% 68% at 88% -10%, var(--brand-100) 0%, transparent 62%),
    radial-gradient(78% 52% at -8% 4%, var(--brand-50) 0%, transparent 60%);
}

@media (min-width: 900px) {
  .s-hero { padding-top: var(--sp-9); padding-bottom: var(--sp-10); }
}

.s-hero__grid {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

@media (min-width: 900px) {
  .s-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--sp-7);
  }
}

@media (min-width: 1120px) {
  .s-hero__grid { gap: var(--sp-9); }
}

.s-hero__copy { max-width: 38rem; }

/* Rhythm on top of .stack */
.s-hero__copy > .s-hero__eyebrow + h1 { margin-top: var(--sp-3); }
.s-hero__copy > .s-hero__ctas { margin-top: var(--sp-6); }
.s-hero__copy > .s-hero__note { margin-top: var(--sp-3); }
.s-hero__copy > .s-hero__qr { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   7. Hero copy
   -------------------------------------------------------------------------- */
.s-hero__eyebrow {
  gap: var(--sp-2);
  padding: 0.3rem 0.85rem;
  max-width: none;
}

.s-hero__eyebrow svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  color: var(--brand-700);
}

.s-hero__langs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-700);
  letter-spacing: 0.01em;
}

.s-hero__langs svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  color: var(--brand-500);
}

.s-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.s-hero__ctas .btn {
  width: 100%;
  max-width: 24rem;
}

@media (min-width: 640px) {
  .s-hero__ctas .btn { width: auto; }
}

.s-hero__note {
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 32ch;
}

/* --------------------------------------------------------------------------
   8. QR card — hidden on phones (you cannot scan the screen you hold)
   -------------------------------------------------------------------------- */
.s-hero__qr { display: none; }

@media (min-width: 640px) {
  .s-hero__qr {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3);
    padding-right: var(--sp-5);
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
  }

  .s-hero__qr-img {
    width: 6.5rem;
    height: 6.5rem;
    flex: none;
  }

  .s-hero__qr-caption {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink-soft);
    max-width: 16ch;
  }
}

@media (min-width: 900px) {
  .s-hero__qr-img { width: 7.5rem; height: 7.5rem; }
}

/* --------------------------------------------------------------------------
   9. Phone mockup
   -------------------------------------------------------------------------- */
.s-hero__visual {
  display: flex;
  justify-content: center;
}

.s-hero__phone {
  /* Scale the shared chat kit down to device size, tokens included. */
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  position: relative;
  width: 100%;
  max-width: 19.5rem;
  padding: 0.55rem;
  border-radius: 2.5rem;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-900) 60%);
  box-shadow: var(--shadow-lg),
              inset 0 1px 0 color-mix(in srgb, var(--on-brand) 26%, transparent);
}

@media (min-width: 900px) {
  .s-hero__phone {
    max-width: 20.5rem;
    /* Finite: WCAG 2.2.2 — nothing auto-animates past ~5s without a control.
       An even count with `alternate` settles back at the starting offset. */
    animation: s-hero-float 7s var(--ease) 4 alternate both;
  }
}

@keyframes s-hero-float {
  from { transform: translateY(-6px); }
  to   { transform: translateY(6px); }
}

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

.s-hero__screen {
  display: flex;
  flex-direction: column;
  border-radius: 2rem;
  overflow: hidden;
  background: var(--card);
}

/* Chat header inside the device */
.s-hero__chathead {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
  background: var(--brand);
  color: var(--on-brand);
}

.s-hero__chathead .chat__avatar {
  width: 1.9rem;
  height: 1.9rem;
  font-size: var(--fs-xs);
}

.s-hero__chatid {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.s-hero__chatid .chat__name {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

/* Assembly note: the .s-hero__verified rule was deleted with its markup - a
   verified-style badge on the mockup's business name reads as a WhatsApp /
   Meta account certification, which the brief forbids implying. */

.s-hero__status {
  font-size: var(--fs-xs);
  line-height: 1.2;
  color: var(--on-brand-muted);
}

/* Conversation */
.s-hero__chat {
  flex: 1;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.s-hero__chat .bubble {
  display: flow-root;
  max-width: 84%;
  padding: 0.35rem 0.5rem;
}

/* Timestamp rides the last line of the bubble, the way WhatsApp does it. */
.s-hero__chat .bubble__meta {
  float: right;
  display: inline-flex;
  margin: 0 0 0 var(--sp-3);
  padding-top: 0.4em;
}

.s-hero__chat .bubble__meta svg {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.s-hero__chat .chat-btn { padding: 0.4rem 0.6rem; }

/* Compact chip row: language choice, dates, time slots */
.s-hero__chat-btns--row {
  flex-direction: row;
  flex-wrap: wrap;
  width: auto;
}

.s-hero__chat-btns--row .chat-btn {
  flex: 0 1 auto;
  width: auto;
  padding-inline: var(--sp-3);
  white-space: nowrap;
}

/* Confirmation bubble */
.s-hero__ok { background: var(--success-tint); }
.s-hero__ok::before { background: var(--success-tint); }

.s-hero__ok-title {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: 700;
  color: var(--success);
}

.s-hero__ok-title svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.s-hero__ok-id {
  display: block;
  margin-top: 0.1rem;
  color: var(--ink);
}

/* Compose bar — every real WhatsApp screen ends in one. Illustration only.
   The green send disc is a WhatsApp chat surface, so it stays in palette. */
.s-hero__compose {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-4);
  background: var(--chat-surface);
}

.s-hero__composeField {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.7rem;
  background: var(--card);
  border-radius: var(--r-pill);
  color: var(--chat-meta);
  font-size: var(--fs-sm);
}

.s-hero__composeSend {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 50%;
  background: var(--wa-strong);
  color: var(--on-brand);
}

.s-hero__composeSend svg { width: 1rem; height: 1rem; }


/* ==========================================================================
   === 02 - TRUST STRIP (.s-trust) + PROBLEM/SOLUTION (.s-problem)
   source: _build/css/02-trust-problem.css
   ========================================================================== */

/* ==========================================================================
   02 — Trust strip (#trust) + Problem → Solution (#why)
   Prefixes: .s-trust__*  /  .s-problem__*
   Depends on 00-base.css. Tokens only — no raw colours, no raw font sizes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Trust strip — quiet reassurance band, sits directly under the hero.
   Full-bleed hairlines top and bottom; no cards, no fills.
   -------------------------------------------------------------------------- */
.s-trust {
  padding-block: var(--sp-5);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 640px) {
  .s-trust { padding-block: var(--sp-6); }
}

.s-trust__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-3);
}

.s-trust__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  /* cancels the base `li + li` rhythm, which would offset grid items */
  margin-top: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
}

.s-trust__icon {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  color: var(--brand-500);
}

.s-trust__label { text-wrap: balance; }

/* Tablet: keep the 2 x 2, but shrink-wrap and centre it so the pairs read as a
   deliberate block rather than two half-empty columns. */
@media (min-width: 640px) {
  .s-trust__list {
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: center;
    gap: var(--sp-5) var(--sp-8);
  }
}

@media (min-width: 900px) {
  .s-trust__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .s-trust__item {
    justify-content: center;
    padding-inline: var(--sp-5);
  }

  .s-trust__item + .s-trust__item {
    border-inline-start: 1px solid var(--hairline);
  }

  .s-trust__item:first-child { padding-inline-start: 0; }
  .s-trust__item:last-child { padding-inline-end: 0; }
}

/* --------------------------------------------------------------------------
   Problem → Solution
   (a) three problem cards, the phone one slightly emphasised
   (b) the turn: a deep teal card with a small late-night chat motif
   -------------------------------------------------------------------------- */
.s-problem__intro {
  max-width: 46rem;
  margin-inline: auto;
}

.s-problem__list { margin-top: var(--sp-7); }

.s-problem__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  /* cancels the base `li + li` rhythm inside the grid */
  margin-top: 0;
}

.s-problem__item p { color: var(--ink-soft); }

.s-problem__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-500);
}

.s-problem__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* The "noisy" one: a touch more contrast and a slow ring pulse. */
.s-problem__item--loud .s-problem__icon {
  background: var(--brand-100);
  color: var(--brand-700);
}

.s-problem__ring {
  /* Three pulses, then it rests at opacity 1 (see the 100% keyframe).
     An indefinite blink in peripheral vision fails WCAG 2.2.2. */
  animation: s-problem-ring 3.2s var(--ease) 3;
}

@keyframes s-problem-ring {
  0%   { opacity: 1; }
  10%  { opacity: 0.3; }
  28%  { opacity: 1; }
  100% { opacity: 1; }
}

/* The transition from problem to solution. */
.s-problem__pivot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-block: var(--sp-6);
}

.s-problem__pivotLine {
  width: 1px;
  height: var(--sp-7);
  background: linear-gradient(to bottom, transparent, var(--hairline-strong));
}

.s-problem__pivotDot {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-sm);
}

.s-problem__pivotDot svg {
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 900px) {
  /* One value for "gap between a section intro and its content", everywhere. */
  .s-problem__list { margin-top: var(--sp-8); }
  .s-problem__pivot { margin-block: var(--sp-7); }
  .s-problem__pivotLine { height: var(--sp-8); }
}

/* The turn. */
.card.s-problem__turn {
  padding: var(--sp-6);
}

.card--brand.s-problem__turn {
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-900) 100%);
}

@media (min-width: 640px) {
  .card.s-problem__turn {
    padding: var(--sp-7);
    border-radius: var(--r-2xl);
  }
}

@media (min-width: 900px) {
  .card.s-problem__turn { padding: var(--sp-8); }
}

.s-problem__turnGrid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 900px) {
  .s-problem__turnGrid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--sp-8);
  }
}

.s-problem__turnTitle {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.s-problem__chat {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
}

/* Lift the mockup's header off the deep teal card behind it. */
.s-problem__chat .chat__head { background: var(--brand-700); }

/* `.card--brand p` recolours every paragraph it contains, and chat bubbles are
   paragraphs — without this the bubble text renders white on a white bubble. */
.s-problem__chat .bubble { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .s-problem__ring { animation: none; opacity: 1; }
}


/* ==========================================================================
   === 03 - HOW IT WORKS (.s-how) + FEATURE GRID (.s-feat)
   source: _build/css/03-how-features.css
   ========================================================================== */

/* ==========================================================================
   BookTide — section 03: How it works (#how) + Feature grid (#features)
   Prefixes: .s-how__*  and  .s-feat__*
   Tokens only. Mobile-first; breakpoints 640px / 900px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HOW IT WORKS — steps
   Mobile: vertical timeline, a left rail running through the numerals.
   ≥900px: three columns, the rail turns into a horizontal connector + chevron.
   -------------------------------------------------------------------------- */
.s-how__steps {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}

/* base sets `li + li { margin-top }`; grid gap owns the spacing here */
.s-how__steps > li + li { margin-top: 0; }

.s-how__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: start;
}

/* Numeral column. Stretches the full height of the step so the rail can
   flex-fill whatever space is left below the numeral — no magic numbers. */
.s-how__head {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.s-how__num {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--brand-500);
  font-variant-numeric: tabular-nums;
}

.s-how__rule {
  position: relative;
  flex: 1 1 auto;
  width: 2px;
  min-height: var(--sp-4);
  border-radius: 1px;
  background: var(--brand-100);
  /* bridge the gap down into the next step's numeral */
  margin-bottom: calc(var(--sp-6) * -1);
}

.s-how__step-title {
  grid-column: 2;
  grid-row: 1;
}

.s-how__step-line {
  grid-column: 2;
  grid-row: 2;
  margin-top: var(--sp-2);
}

@media (min-width: 900px) {
  .s-how__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
    align-items: start;
    margin-top: var(--sp-8);
  }

  .s-how__step { display: block; }

  /* numeral and connector now sit on one row */
  .s-how__head {
    flex-direction: row;
    align-items: center;
    align-self: auto;
    gap: var(--sp-4);
  }

  .s-how__rule {
    width: auto;
    height: 2px;
    min-height: 0;
    margin-bottom: 0;
    /* run into the gutter, stopping short of the next numeral */
    margin-right: calc(var(--sp-6) * -1 + var(--sp-3));
  }

  /* chevron at the end of the connector */
  .s-how__rule::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    border-top: 2px solid var(--brand-100);
    border-right: 2px solid var(--brand-100);
    transform: translateY(-50%) rotate(45deg);
  }

  .s-how__step-title { margin-top: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   HOW IT WORKS — the two multilingual chat proofs
   -------------------------------------------------------------------------- */
.s-how__proof { margin-top: var(--sp-8); }

.s-how__demos {
  display: grid;
  gap: var(--sp-6);
  max-width: 44rem;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .s-how__demos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }
}

.s-how__lang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.s-how__lang-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
}

/* Devanagari and Gujarati need more size and leading than Latin to stay
   legible — matras and conjuncts sit above and below the base line. */
.s-how__bubble,
.s-how__chat-btn {
  font-size: var(--fs-base);
  line-height: 1.85;
}

.s-how__bubble { padding: 0.45rem 0.75rem; }

.s-how__chat-btn { padding-block: 0.35rem; }

.s-how__bubble .bubble__meta { line-height: 1.4; }

.s-how__caption {
  max-width: 46ch;
  margin: var(--sp-5) auto 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   FEATURE GRID
   -------------------------------------------------------------------------- */
.s-feat__grid { margin-top: var(--sp-7); }

.s-feat__grid > li + li { margin-top: 0; }

@media (min-width: 900px) {
  .s-feat__grid { margin-top: var(--sp-8); }
}

.s-feat__card {
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .s-feat__card:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-feat__card:hover { transform: none; }
}

.s-feat__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--brand-100);
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-700);
}

.s-feat__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.s-feat__title,
.s-feat__soon-title {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}

.s-feat__title { margin-top: var(--sp-4); }

.s-feat__line { margin-top: var(--sp-2); color: var(--ink-soft); }

/* --- the one "Coming soon" tile: deliberately inert ---------------------- */
.s-feat__soon {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-lg);
  background: transparent;
}

@media (min-width: 640px) {
  .s-feat__soon {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-6);
    border-radius: var(--r-xl);
  }
}

.s-feat__icon--soon {
  border-color: var(--hairline);
  background: var(--surface-alt);
  color: var(--muted);
}

.s-feat__soon-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  color: var(--muted);
}

.s-feat__soon-line { margin-top: var(--sp-2); color: var(--muted); }


/* ==========================================================================
   === 04 - VERTICALS (.s-vert) + ROI (.s-roi)
   source: _build/css/04-verticals-roi.css
   ========================================================================== */

/* ==========================================================================
   BookTide — section 04: Verticals (#verticals) + ROI (#roi)
   Prefixes: .s-vert__*  .s-roi__*
   Tokens only. Mobile-first, min-width breakpoints at 640px / 900px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   VERTICALS
   -------------------------------------------------------------------------- */
.s-vert__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

/* base `li + li` rhythm would fight the grid gap */
.s-vert__grid > li + li { margin-top: 0; }

.s-vert__card {
  display: block;
}

.s-vert__body { min-width: 0; }

/* Icon medallion ---------------------------------------------------------- */
.s-vert__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--brand-100);
  color: var(--brand-700);
}

.s-vert__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Flagship (Clinics) ------------------------------------------------------ */
.s-vert__card--flagship {
  border-color: var(--brand-500);
  background: linear-gradient(150deg, var(--brand-50) 0%, var(--card) 60%);
  box-shadow: var(--shadow-md);
}

.s-vert__flag-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.s-vert__flag-line { margin-top: var(--sp-4); }

.s-vert__card--flagship .s-vert__icon {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0;
  border-radius: var(--r-lg);
  background: var(--brand);
  color: var(--on-brand);
}

.s-vert__card--flagship .s-vert__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* Coming soon (Events) — deliberately secondary ---------------------------- */
.s-vert__card--soon {
  background: var(--surface-alt);
  border-color: var(--hairline);
}

.s-vert__card--soon .s-vert__icon {
  background: var(--card);
  border: 1px solid var(--hairline);
  color: var(--muted);
}

.s-vert__card--soon h3,
.s-vert__card--soon p {
  color: var(--muted);
}

/* title + "Coming soon" chip share a line, so the three-up row stays aligned */
.s-vert__soon-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.s-vert__soon-title .badge { letter-spacing: 0; }

/* Verticals — 640px ------------------------------------------------------- */
@media (min-width: 640px) {
  .s-vert__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }

  /* full-width hero row and full-width muted closing row */
  .s-vert__card--flagship,
  .s-vert__card--soon {
    grid-column: 1 / -1;
  }

  /* full-width row for a second vertical, so the remaining cards still
     fill the 2-up (640px) and 3-up (900px) rows without orphaning one */
  .s-vert__card--wide { grid-column: 1 / -1; }

  .s-vert__card--soon {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-5);
  }

  .s-vert__card--soon .s-vert__icon { margin-bottom: 0; }
}

/* Verticals — 900px ------------------------------------------------------- */
@media (min-width: 900px) {
  .s-vert__grid {
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--sp-8);
  }

  /* two-up flagship: identity on the left, the promise filling the width */
  .s-vert__card--flagship {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-7);
    padding: var(--sp-7);
  }

  .s-vert__flag-line {
    margin-top: 0;
    font-size: var(--fs-lead);
    line-height: 1.5;
  }

  /* Events drops back into the three-up row, still muted */
  .s-vert__card--soon {
    grid-column: auto;
    display: block;
  }

  .s-vert__card--soon .s-vert__icon {
    margin-bottom: var(--sp-4);
  }
}

/* --------------------------------------------------------------------------
   ROI
   A deliberately different teal treatment from the default .section--brand
   gradient: darker at both ends, brand teal through the middle, with a soft
   light bloom top-right. All text on it stays white / 78% white (AA).
   -------------------------------------------------------------------------- */
.s-roi {
  background:
    radial-gradient(90% 120% at 100% 0%,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0) 55%),
    linear-gradient(205deg,
      var(--brand-900) 0%,
      var(--brand) 55%,
      var(--brand-900) 100%);
}

/* Stat tiles -------------------------------------------------------------- */
.s-roi__tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.s-roi__tiles > li + li { margin-top: 0; }

.s-roi__tile {
  padding: var(--sp-5);
  border: 1px solid var(--hairline-on-brand);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.06);
}

.s-roi .s-roi__value {
  margin-bottom: var(--sp-1);
  color: var(--on-brand);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  max-width: none;
}

.s-roi__label {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-h4);
}

.s-roi .s-roi__note {
  font-size: var(--fs-sm);
  max-width: 42ch;
}

/* ROI tiles — 640px: one wide tile per row, big number in its own column --- */
@media (min-width: 640px) {
  .s-roi__tiles { gap: var(--sp-5); }

  .s-roi__tile {
    display: grid;
    grid-template-columns: minmax(8rem, 13rem) 1fr;
    grid-template-areas:
      "value label"
      "value note";
    column-gap: var(--sp-6);
    padding: var(--sp-6);
  }

  .s-roi .s-roi__value { grid-area: value; align-self: center; margin-bottom: 0; }
  .s-roi__label { grid-area: label; }
  .s-roi .s-roi__note { grid-area: note; }
}

/* ROI tiles — 900px: three up ---------------------------------------------- */
@media (min-width: 900px) {
  .s-roi__tiles { grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-8); }

  .s-roi__tile {
    display: block;
    padding: var(--sp-5);
  }

  .s-roi .s-roi__value { margin-bottom: var(--sp-1); }
}

/* The maths — a white card punched onto the teal band ---------------------- */
.s-roi__math {
  max-width: 42rem;
  margin: var(--sp-7) auto 0;
  padding: var(--sp-5);
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  text-align: center;
  --ring: var(--focus);
}

.s-roi .s-roi__math-line {
  max-width: 46ch;
  margin-inline: auto;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.s-roi__scale {
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  margin-top: var(--sp-4);
}

.s-roi__scale-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}

.s-roi__scale-value {
  color: var(--brand-900);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.s-roi__scale-value--cost {
  color: var(--muted);
  font-size: var(--fs-h1);
}

.s-roi__scale-cap {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.35;
}

.s-roi__vs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--page);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .s-roi__math { padding: var(--sp-6); }

  .s-roi__scale {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-5);
    margin-top: var(--sp-5);
  }
}

/* Illustrative disclaimer -------------------------------------------------- */
.s-roi__close { margin-top: var(--sp-6); }

.s-roi__close > * + * { margin-top: var(--sp-3); }

.s-roi .s-roi__disclaimer {
  max-width: 62ch;
  color: var(--on-brand-muted);
  font-size: var(--fs-sm);
  font-style: italic;
}


/* ==========================================================================
   === 05 - PRICING (.s-price)
   source: _build/css/05-pricing.css
   ========================================================================== */

/* ==========================================================================
   05 — Pricing  (prefix: s-price)
   Requires 00-base.css. Tokens only — no raw colours, no raw font sizes.
   Breakpoints: 640 / 900, matching the design system.

   Layout note: the Founding Pilot carries far more copy than the other two
   plans (two price lines, a badge and a limit note), so a three-equal-column
   grid either opens a dead gap above the Starter/Growth buttons or leaves the
   pilot towering 300px below them. Instead the pilot is a full-width hero card
   above the two standing plans from 640px up, with its own two-column interior.
   Starter and Growth then share a row and stretch to each other, so their
   buttons line up. DOM order is Pilot → Starter → Growth at every breakpoint,
   so tab order never disagrees with what the eye sees.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Plan grid — mobile: one column, Founding Pilot first
   -------------------------------------------------------------------------- */
.s-price__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}

/* --------------------------------------------------------------------------
   Card shell
   No height:100% — grid stretch already fills the row, and a definite height
   would fight the pilot's two-column interior.
   -------------------------------------------------------------------------- */
.s-price__card {
  /* Teal, not green: green is the WhatsApp signal on this page, and five
     decorative green ticks above a green CTA dilute it. */
  --s-price-tick: var(--brand-700);
  --s-price-rule: var(--hairline);
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Plan head
   -------------------------------------------------------------------------- */
.s-price__for { color: var(--muted); }

/* --------------------------------------------------------------------------
   Price block
   -------------------------------------------------------------------------- */
.s-price__money { margin-top: var(--sp-5); }

.s-price__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1);
}

.s-price__amount {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-900);
}

.s-price__per {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--muted);
}

.s-price__worth {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.s-price__worth s { text-decoration-thickness: 2px; }

.s-price__price--then { margin-top: var(--sp-4); }

.s-price__then-word {
  margin-right: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}

.s-price__sub {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.s-price__after { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   Divider between the price block and the feature list
   -------------------------------------------------------------------------- */
.s-price__rule {
  height: 1px;
  margin-block: var(--sp-5);
  background: var(--s-price-rule);
}

/* --------------------------------------------------------------------------
   Feature list
   The tick box is 1.6em tall (= --lh-body) so the glyph optically centres on
   the first line of its item without a magic-number margin.
   -------------------------------------------------------------------------- */
.s-price__feats { font-size: var(--fs-sm); }

.s-price__feats li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  line-height: var(--lh-body);
}

.s-price__feats li + li { margin-top: var(--sp-3); }

.s-price__tick {
  width: 1.25em;
  height: 1.6em;
  flex: none;
  color: var(--s-price-tick);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Call to action — pinned to the card bottom so Starter and Growth line up
   -------------------------------------------------------------------------- */
.s-price__cta {
  margin-top: auto;
  padding-top: var(--sp-6);
}

.s-price__btn { min-height: var(--sp-8); }

/* Assembly note: this section's .s-price__ico rule was promoted to the shared
   .ico-chat class (see the integration block at the end of this file), because
   every WhatsApp CTA on the page now uses the same neutral chat glyph. */

.s-price__limit {
  margin-top: var(--sp-3);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Founding Pilot — the hero card
   .card--brand supplies white text, big shadow and white focus rings; this
   deepens the fill to the same gradient the brand bands use.
   -------------------------------------------------------------------------- */
.s-price__card--pilot {
  --s-price-tick: var(--on-brand);
  --s-price-rule: var(--hairline-on-brand);
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-900) 100%);
}

/* Spans are not caught by `.card--brand p`, so recolour them explicitly. */
.s-price__card--pilot .s-price__amount { color: var(--on-brand); }

.s-price__card--pilot .s-price__per,
.s-price__card--pilot .s-price__then-word { color: var(--on-brand-muted); }

/* --------------------------------------------------------------------------
   Footnotes — small print, but never buried: --fs-sm is 14px at its smallest.
   Declared before the media queries below so their overrides win.
   -------------------------------------------------------------------------- */
.s-price__notes { margin-top: var(--sp-7); }

.s-price__notes p + p { margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   640px — Starter and Growth share a row; the pilot spans the full width above
   them and splits its interior in two so the extra width is not wasted.
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .s-price__grid { grid-template-columns: repeat(2, 1fr); }

  .s-price__card--pilot {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sp-7);
    align-content: start;
  }

  .s-price__card--pilot .s-price__head { grid-column: 1 / -1; }

  .s-price__card--pilot .s-price__money {
    grid-column: 1;
    grid-row: 2;
  }

  /* The divider only earns its place in the single-column stack. */
  .s-price__card--pilot .s-price__rule { display: none; }

  .s-price__card--pilot .s-price__feats {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: start;
    margin-top: var(--sp-5);
  }

  .s-price__card--pilot .s-price__cta {
    grid-column: 1;
    grid-row: 3;
    margin-top: var(--sp-6);
    padding-top: 0;
  }
}

/* --------------------------------------------------------------------------
   900px — more air, and a little extra width for the pilot's feature column,
   which carries the longest lines on the card.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .s-price__grid {
    gap: var(--sp-6);
    margin-top: var(--sp-8);
  }

  .s-price__card--pilot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: var(--sp-8);
    padding: var(--sp-7);
    border-radius: var(--r-2xl);
  }

  /* The pilot's right column is one short list against a tall left column;
     a little more air balances the card and keeps the top datum shared. */
  .s-price__card--pilot .s-price__feats li + li { margin-top: var(--sp-5); }

  .s-price__notes { margin-top: var(--sp-9); }
}


/* ==========================================================================
   === 06 - FAQ (.s-faq) + ABOUT (.s-about)
   source: _build/css/06-faq-about.css
   ========================================================================== */

/* ==========================================================================
   06 — FAQ + About
   Prefixes: .s-faq__*  .s-about__*
   Only what the design system does not already provide. Tokens only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FAQ — native <details>/<summary> accordion, no JavaScript
   -------------------------------------------------------------------------- */
.s-faq__list {
  margin-top: var(--sp-7);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  /* Clips the row hover tint to the rounded corners. Focus rings are drawn
     inside the row (outline-offset: -3px below) so they are never clipped. */
  overflow: hidden;
}

@media (min-width: 640px) {
  .s-faq__list {
    margin-top: var(--sp-7);
    border-radius: var(--r-xl);
  }
}

.s-faq__item + .s-faq__item { border-top: 1px solid var(--hairline); }

.s-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 3.25rem; /* comfortably past the 44px tap target */
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  outline-offset: -3px;
  transition: background-color var(--t-fast) var(--ease);
}

/* Kill the default disclosure marker in every engine. */
.s-faq__summary::-webkit-details-marker { display: none; }
.s-faq__summary::marker { content: ""; }

@media (hover: hover) and (pointer: fine) {
  .s-faq__summary:hover { background: var(--brand-50); }
}

@media (min-width: 640px) {
  .s-faq__summary { padding: var(--sp-5) var(--sp-6); }
}

@media (min-width: 900px) {
  .s-faq__list { margin-top: var(--sp-8); }
}

.s-faq__q {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--brand-900);
  text-wrap: balance;
}

.s-faq__chev {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--brand-500);
  transition: transform var(--t-med) var(--ease),
              color var(--t-fast) var(--ease);
}

.s-faq__item[open] > .s-faq__summary > .s-faq__chev {
  transform: rotate(180deg);
  color: var(--brand-700);
}

.s-faq__a {
  padding: 0 var(--sp-5) var(--sp-5);
}

@media (min-width: 640px) {
  .s-faq__a { padding: 0 var(--sp-6) var(--sp-6); }
}

.s-faq__a p {
  color: var(--muted);
  max-width: 64ch;
}

/* Answers ease in when a row is opened. Neutralised by the base stylesheet
   under prefers-reduced-motion. */
@keyframes s-faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.s-faq__item[open] > .s-faq__a {
  animation: s-faq-reveal var(--t-med) var(--ease-out) both;
}

/* --------------------------------------------------------------------------
   About — compact band
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .s-about__card { padding: var(--sp-7) var(--sp-8); }
}

.s-about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

@media (min-width: 900px) {
  .s-about__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-8);
    align-items: start;
  }
}

.s-about__rule {
  display: block;
  width: 2.5rem;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--brand-500);
  margin-top: var(--sp-4);
}

.s-about__tagline {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
  color: var(--brand-700);
}

.s-about__link { font-weight: 600; }

/* Inline (not flex) so the arrow follows the last word and wraps with it
   instead of floating beside a two-line label on narrow screens. */
.s-about__link svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.4em;
  vertical-align: -0.08em;
}


/* ==========================================================================
   === 07 - FINAL CTA (.s-cta) + FOOTER (.s-foot)
   source: _build/css/07-cta-footer.css
   ========================================================================== */

/* ==========================================================================
   07 — Final CTA banner (.s-cta) + site footer (.s-foot)
   Depends on 00-base.css. Tokens only, mobile-first, 640 / 900 breakpoints.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Final CTA banner
   -------------------------------------------------------------------------- */
.s-cta {
  position: relative;
  overflow: hidden;
}

/* Content sits above the decorative motif. */
.s-cta > .container {
  position: relative;
  z-index: 1;
}

/* Tone-on-tone teal motif. Two layers, both decorative:
   ::before  a soft diffuse glow — no hard edge, safe behind anything;
   ::after   a chat bubble (three rounded corners, one squared = the tail),
             bled off the top-left corner and kept clear of the centred
             content, so it only ever appears from 640px up. */
.s-cta::before,
.s-cta::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.s-cta::before {
  right: -16%;
  bottom: -50%;
  width: 76%;
  height: 128%;
  background: radial-gradient(closest-side, var(--brand-500), transparent);
  opacity: 0.24;
}

.s-cta::after {
  display: none;
  top: -140px;
  left: -140px;
  width: 220px;
  height: 220px;
  background: var(--brand-500);
  opacity: 0.16;
  border-radius: var(--r-2xl) var(--r-2xl) var(--r-2xl) 6px;
  transform: rotate(-8deg);
}

.s-cta .s-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* Outlined light-on-teal secondary button: the base hairline is too faint to
   read as a control on the gradient, so lift it to the muted-white token. */
.s-cta .btn.btn--ghost {
  border-color: var(--on-brand-muted);
  color: var(--on-brand);
}

.s-cta .btn.btn--ghost:focus-visible {
  background: var(--hairline-on-brand);
  border-color: var(--on-brand);
  color: var(--on-brand);
}

@media (hover: hover) and (pointer: fine) {
  .s-cta .btn.btn--ghost:hover {
    background: var(--hairline-on-brand);
    border-color: var(--on-brand);
    color: var(--on-brand);
  }
}

@media (min-width: 640px) {
  .s-cta::after { display: block; }

  .s-cta .s-cta__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-7);
  }
}

@media (min-width: 900px) {
  .s-cta::after {
    top: -150px;
    left: -150px;
    width: 320px;
    height: 320px;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.s-foot {
  background: var(--card);
  padding-block: var(--sp-8) var(--sp-6);
}

/* Phones: brand full width, the two short link columns side by side, then the
   contact column full width so the phone number and email never break up. */
.s-foot__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
}

.s-foot__brand,
.s-foot__col--contact { grid-column: 1 / -1; }

/* --- Brand column --- */
.s-foot__brand > * + * { margin-top: var(--sp-3); }

.s-foot__lockup {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.s-foot__mark {
  width: 1.875rem;
  height: 1.875rem;
  flex: none;
}

.s-foot__mark-body { fill: var(--brand); }

.s-foot__mark-wave {
  fill: none;
  stroke: var(--card);
  stroke-width: 6;
  stroke-linecap: round;
}

.s-foot__wordmark {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--brand-900);
}

.s-foot__tagline {
  color: var(--muted);
  max-width: 34ch;
}

.s-foot__by { color: var(--ink-soft); }

/* --- Link and contact columns --- */
.s-foot__h {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-900);
}

.s-foot__links li + li { margin-top: 0; }

.s-foot__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.s-foot__links a:focus-visible {
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .s-foot__links a:hover {
    color: var(--brand-700);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* Two-class selector so it outranks `.s-foot__links a` above. */
.s-foot__links .s-foot__contact-link {
  align-items: flex-start;
  overflow-wrap: anywhere;
}

.s-foot__ico {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-top: 0.1em;
  color: var(--brand-500);
}

/* Assembly note: was `fill: var(--wa)` on a solid WhatsApp brand glyph. The
   glyph is now the neutral outlined chat bubble, stroked in the darker green
   so it still reads as "WhatsApp" but clears the 3:1 non-text contrast bar. */
.s-foot__ico--wa {
  fill: none;
  color: var(--wa-strong);
}

.s-foot__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 34ch;
}

/* --- Bottom small print --- */
.s-foot__legal {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
}

.s-foot__print {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
  max-width: 78ch;
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .s-foot {
    padding-block: var(--sp-9) var(--sp-7);
  }

  .s-foot__top {
    gap: var(--sp-7) var(--sp-6);
  }

  .s-foot__brand,
  .s-foot__col--contact { grid-column: auto; }

  .s-foot__legal {
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
  }
}

@media (min-width: 900px) {
  .s-foot__top {
    grid-template-columns:
      minmax(0, 1.4fr) minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 1.7fr);
    gap: var(--sp-6);
  }
}

/* ==========================================================================
   === 08 - INTEGRATION: cross-section reconciliation
   Rules added at assembly time to resolve seams between the section sheets.
   Nothing here is new design - it only makes shared components agree.
   ========================================================================== */

/* Shared WhatsApp-CTA glyph.
   The brief forbids using Meta / WhatsApp logos or brand marks, so every
   WhatsApp call to action on the page carries the same neutral outlined chat
   bubble instead of the authentic WhatsApp glyph. Promoted from the pricing
   sheet, where it was .s-price__ico, so nav, hero, pricing, final CTA and the
   footer contact link all match.
   Two classes (0,2,0) so it beats `.btn svg { fill: currentColor }` (0,1,1). */
.btn .ico-chat,
.ico-chat {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   === legal pages ===
   09 - LEGAL PAGES (.s-legal-*) — privacy.html, terms.html
   Long-form prose only: one readable measure, heading rhythm, real list
   markers, a contents block. Tokens only, mobile-first, same breakpoints.
   ========================================================================== */

/* Narrow the container itself rather than each block, so the back link, the
   headings and the body text all share one left edge and one measure (~68ch).
   Later in the sheet than .container--narrow, so it wins on equal specificity. */
.s-legal-page {
  max-width: calc(68ch + var(--gutter) * 2);
}

/* --------------------------------------------------------------------------
   1. Back link
   -------------------------------------------------------------------------- */
.s-legal-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  color: var(--brand-700);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .s-legal-back:hover {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.s-legal-back svg { width: 1.1em; height: 1.1em; flex: none; }

/* --------------------------------------------------------------------------
   2. Page head
   -------------------------------------------------------------------------- */
.s-legal-head > * + * { margin-top: var(--sp-3); }
.s-legal-head .eyebrow + h1 { margin-top: var(--sp-2); }

.s-legal-updated {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   3. "Read this first" note — get-your-own-lawyer callout
   -------------------------------------------------------------------------- */
.s-legal-note {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--brand-50);
  border: 1px solid var(--hairline);
  border-inline-start: 4px solid var(--brand-500);
  border-radius: var(--r-md);
}

.s-legal-note p {
  max-width: none;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   4. Contents
   -------------------------------------------------------------------------- */
.s-legal-toc {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}

.s-legal-toc__h {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-700);
}

.s-legal-toc__list {
  display: grid;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}

.s-legal-toc__list li + li { margin-top: 0; }

.s-legal-toc__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-1) 0;
  color: var(--brand-700);
  font-size: var(--fs-sm);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .s-legal-toc__list a:hover {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

@media (min-width: 640px) {
  .s-legal-toc { padding: var(--sp-5) var(--sp-6); }
  .s-legal-toc__list { grid-template-columns: 1fr 1fr; gap: var(--sp-1) var(--sp-5); }
}

/* --------------------------------------------------------------------------
   5. Prose
   Headings step down one notch from the base scale: a 17-section policy with
   17 full-size h2s is a wall, not a document.
   -------------------------------------------------------------------------- */
.s-legal-prose { margin-top: var(--sp-7); }

.s-legal-prose > * + * { margin-top: var(--sp-4); }

.s-legal-prose h2 {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-h3);
}

.s-legal-prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Anchored headings must clear the sticky header when a contents link lands. */
.s-legal-prose h2[id] {
  scroll-margin-top: calc(var(--s-nav-h) + var(--sp-4));
}

.s-legal-prose h3 {
  margin-top: var(--sp-6);
  font-size: var(--fs-h4);
}

.s-legal-prose ul,
.s-legal-prose ol {
  padding-left: 1.35rem;
}

.s-legal-prose li { padding-left: var(--sp-1); }
.s-legal-prose li + li { margin-top: var(--sp-3); }
.s-legal-prose li::marker { color: var(--brand-500); }

.s-legal-address {
  padding: var(--sp-4) var(--sp-5);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-style: normal;
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

/* Padding on an inline link expands the hit area without moving the line box. */
.s-legal-address a { padding-block: var(--sp-2); }

/* --------------------------------------------------------------------------
   6. Foot of the page — cross-links
   -------------------------------------------------------------------------- */
.s-legal-more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline);
}