/*
 * Yemo marketing site — shared styles for the landing page and the legal pages.
 * Self-contained (no build step, no CDN) so it can be dropped onto any static
 * host as yemo.app and go live immediately.
 *
 * 2026-07-29: landing rebuilt to the client's reference (yemo-grow-smarts) — an
 * all-dark charcoal page with white text and orange accents, a big animated
 * headline, and data-visual sections (client asked for growth/pie/bar charts).
 * The dark theme is scoped to `body.home`; the legal pages (terms/privacy) keep
 * the original light treatment.
 */

@font-face {
  font-family: 'Biysk';
  src:
    url('assets/Biysk-Regular.woff') format('woff'),
    url('assets/Biysk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colours matched to the client's Lovable demo (2026-08-03): a warm orange
     with a lighter amber "glow" partner, used as a top→bottom gradient on the
     primary buttons. Kept in oklch to match the demo exactly. */
  --gold: oklch(72% 0.17 55); /* demo --primary (warm orange) */
  --gold-glow: oklch(82% 0.15 72); /* demo --primary-glow (lighter amber) */
  --gold-2: oklch(82% 0.15 72); /* lighter amber for charts on dark */
  --gray: #404140;
  --white: #ffffff;
  --danger: #e5484d;

  --gold-deep: oklch(64% 0.16 52); /* accent hover — deeper orange */
  --gold-ink: #8f6200; /* gold-family text on white (legal pages) */
  --silver: #b9b9b6;

  /* Design system 2026-07-31. Two colours here are NOT in the Yemo brand pack and
     are deliberate additions from that spec: blue as the gradient partner for the
     hero subheading, green for feature checkmarks. */
  --accent-blue: #3b82f6;
  --success: #22c55e;
  --radius-btn: 12px;

  /* Charcoal, not black (client 2026-07-31: "just keep a solid (charcoal)").
     #0a0a0b was effectively pure black, which read as a flat void next to the
     mockup's warm dark ground. This is a dark shade of the brand gray (#404140)
     so the page sits in the same hue family as the rest of the identity. */
  --ink: #1a1b1a; /* page background — charcoal (kept over the spec's #0A0A0B) */
  /* The spec's card colour is #161618, which is DARKER than this charcoal page —
     cards would sink into the background instead of lifting off it. Lifted to sit
     one step above --ink so "raised" still reads as raised. */
  --ink-raised: #232426; /* raised CARDS only — never whole sections (no banding) */
  --ink-line: #2a2a2e; /* spec: borders & dividers */
  --on-dark: #b4b4bc; /* spec: body text */
  --on-dark-muted: #b4b4bc; /* client 2026-08-21: brought up to body brightness so all copy reads clearly on dark — same as --on-dark. Genuine placeholders are pinned dim via --placeholder below. */
  --placeholder: #71717a; /* form placeholder text — stays dim so it doesn't read as a filled value */

  --body: #3a3b3a;
  --muted: #6b6c6b;
  --line: #e6e6e4;
  --bg: #ffffff;
  --bg-soft: #f7f7f5;

  --radius: 16px;
  --wrap: 1200px; /* spec: max content width */

  /* Client brand sheet (2026-07-28, re-sent 2026-08-04):
       Biysk Regular ............ logo   — SUPPLIED, self-hosted above
       Acumin Variable Concept Wide  headings, names, numbers  — NOT supplied
       Avenir Next Regular ...... general text                — NOT supplied
     Biysk (the brand face the client shared, self-hosted above) is now the
     DISPLAY font too (client 2026-08-06), so every heading on the site reads in
     the Yemo typeface — matching the app. Body stays Avenir/Inter for
     readability; Poppins is kept only as a fallback under Biysk. */
  --font-fallback: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Headline face (client 2026-08-13): Apple/Meta-style system sans — Biysk
     removed everywhere per the client. Renders SF Pro on Apple, Segoe/Inter
     elsewhere. */
  --font-display:
    -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', 'Inter',
    var(--font-fallback);
  --font-body: 'Avenir Next', Avenir, 'Inter', var(--font-fallback);
  --font-logo: var(--font-display);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Safety net: never let a stray wide element create a horizontal scrollbar /
     zoom-out on mobile. `clip` (not `hidden`) keeps position:sticky working since
     it establishes no scroll container. Real overflows are still fixed at source. */
  overflow-x: clip;
}

/* Spec: body 18px desktop / 16px mobile, weight 400, line-height 1.6. */
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  font-weight: 400;
  font-size: 16px;
}

@media (min-width: 720px) {
  body {
    font-size: 18px;
  }
}

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

a {
  color: var(--gold-ink);
}

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.005em;
  /* A touch more room under every heading (client 2026-08-01). */
  margin: 0 0 0.6em;
}

/* Spec scale — H1 64/40 @700, H2 40/30 @600, H3 24/20 @600. Poppins is loaded at
   500/600/700 only, so nothing here may ask for 800. */
h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  font-weight: 600;
}

h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 600;
}

p {
  margin: 0 0 1rem;
}

/* ===========================================================================
 * DARK THEME — landing page only (body.home)
 * ========================================================================= */
body.home {
  background: var(--ink);
  color: var(--on-dark);
}

.home h1,
.home h2,
.home h3,
.home h4 {
  color: var(--white);
}

/* Note: no blanket `.home a { color }` rule — it would out-specify the button
   and nav color rules below (gold text on a gold button = invisible). Links are
   coloured per-component instead (.btn-*, .nav-*, footer a). */

/* ---- Top bar: text wordmark instead of the logo image ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(26, 27, 26, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-line);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}

/* Brand logo in the nav (client 2026-07-29: add the logo back). It sits on the
   dark bar it was drawn for, so its light letterforms read clearly. */
.nav-logo {
  display: flex;
  align-items: center;
  flex: none;
}
.nav-logo img {
  height: 34px;
  width: auto;
  display: block;
}
@media (min-width: 720px) {
  .nav-logo img {
    height: 40px;
  }
}

.nav-links {
  display: flex;
  gap: 26px;
  margin: 0 auto;
}
/* Nav links & captions — 15px / 500 / body colour (Poppins, the one font). */
.nav-links a {
  color: var(--on-dark);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  transition: color 0.15s ease;
}
.nav-links a:hover {
  color: var(--gold);
}
@media (max-width: 860px) {
  .nav-links {
    display: none;
  }
}

/* ---- Nav actions: EN/ES toggle + primary CTA, grouped on the right ---- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

/* Two-segment pill (EN | ES). Active side filled with brand gold, inactive
   muted — matched to the dark nav. Stays visible next to Get Started on mobile
   (the .nav-links row is what hides under 860px, not this). */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  flex: none;
}
.lang-opt {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--on-dark-muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.lang-opt:hover {
  color: var(--white);
}
.lang-opt.is-active {
  background: var(--gold);
  color: #0a0a0b;
}
.lang-opt:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* Mobile nav fit (client 2026-08-12 responsiveness pass): the bar carries the
   EN/ES toggle + Log in + Get Started. At full size those three overrun a phone
   (they pushed the whole document to 442px on a 375px screen), so on small
   screens tighten the gaps, trim the wrap gutter, compact both buttons, and turn
   "Log in" into a borderless text link — keeping all three reachable and fitting. */
@media (max-width: 640px) {
  .nav .wrap {
    padding: 0 16px;
    gap: 10px;
  }
  .nav-logo img {
    height: 30px;
  }
  .nav-actions {
    gap: 8px;
  }
  .lang-opt {
    padding: 5px 9px;
    font-size: 12px;
  }
  /* Compact both CTAs so they fit beside the logo + toggle. */
  .nav-actions .btn {
    padding: 9px 14px;
    font-size: 13px;
  }
  /* "Log in" becomes a plain text link on phones — no border box eating width. */
  .nav-actions .btn-ghost {
    padding: 9px 4px;
    border-color: transparent;
  }
}
/* Very small phones (≤360px): drop the secondary "Log in" so the primary CTA
   never gets squeezed or clipped. Login stays available in-app and in the footer. */
@media (max-width: 360px) {
  .nav-actions .btn-ghost {
    display: none;
  }
}

/* ---- Buttons ---- (16/600, 12px radius, 14px 28px padding; Poppins) */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}
.btn:active {
  transform: translateY(0);
}

/* Warm orange gradient with near-black text, matching the demo's primary button
   (client 2026-08-03) — a lighter amber up top into the deeper orange, with a
   soft glow that grows on hover. */
.btn-primary {
  background: linear-gradient(180deg, var(--gold-glow) 0%, var(--gold) 100%);
  color: #0a0a0b;
  box-shadow: 0 8px 22px -12px oklch(72% 0.17 55 / 0.55);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #0a0a0b;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px oklch(72% 0.17 55 / 0.7);
}

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--ink-line);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 16px 32px;
  font-size: 17px;
}

/* ---- Eyebrow ---- (13px / 500 / uppercase / 0.08em; Poppins) */
.eyebrow {
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  margin: 0 0 16px;
}

/* In the hero the eyebrow is a bordered pill, matching the client's mockup —
   elsewhere it stays a plain line of small caps. */
.hero .eyebrow {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid rgba(243, 169, 10, 0.45);
  border-radius: 999px;
  background: rgba(243, 169, 10, 0.07);
  margin-bottom: 26px;
}

/* ---- Sections ---- */
/* More breathing room between sections (client 2026-08-01): a more premium,
   less compact feel. */
.home section {
  padding: 80px 0;
  background: var(--ink);
}
@media (min-width: 720px) {
  .home section {
    padding: 116px 0;
  }
}
/* No alternating grey bands and no divider seams — the whole page is one
   continuous near-black canvas; only the cards read as raised (client 2026-07-31). */
.home section.alt {
  background: var(--ink);
}

.section-lead {
  max-width: 720px;
  color: var(--on-dark);
  font-size: 1em;
  line-height: 1.7;
  margin-top: 8px;
}

.center {
  text-align: center;
}
.center .section-lead {
  margin-left: auto;
  margin-right: auto;
}

/* ---- Hero ---- */
.home .hero {
  /* Solid charcoal, no photograph (client 2026-07-31). The restaurant image was
     competing with the headline and forced an ever-deeper scrim to stay legible;
     a flat brand ground lets the type and the gold carry the section. */
  background: var(--ink);
  padding: 64px 0 40px;
  border-top: none;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

/* ---- Video hero (client 2026-08-13): footage at the very top with the rotating
   headline over it. Apple/Meta-style headline face + an outline/shadow so the
   text stays legible over any frame of the moving video. ---- */
.hero.hero-video {
  padding: 0;
  min-height: clamp(540px, 82vh, 780px);
  display: grid;
  place-items: center;
  isolation: isolate; /* keep the bg + scrim inside the hero's stacking context */
}
.hero-video .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Two cuts, one hero (2026-08-24). object-fit: cover is right — a letterboxed
   background reads as a mistake — but it means the frame the visitor sees is
   whatever shape their viewport is, and a 16:9 cut in a phone's ~9:16 hero
   loses more than half its width. Heads go out of frame.

   So the landscape cut is served to landscape-ish viewports and a separately
   framed portrait cut to portrait ones. The switch is on shape, not width,
   because shape is the actual problem: a phone turned sideways wants the wide
   cut, and a tablet held upright wants the tall one even though it is 768px
   across. Above 900px we assume a desktop window, which can be portrait-ish
   when dragged narrow but is never a phone.

   Both elements carry preload="metadata", so the one that is not showing costs
   its moov atom and nothing more. */
.hero-video .hero-bg--tall {
  display: none;
}
@media (orientation: portrait) and (max-width: 900px) {
  .hero-video .hero-bg--wide {
    display: none;
  }
  .hero-video .hero-bg--tall {
    display: block;
  }
}
/* No scrim (client 2026-08-22: "i think it's high quality so remove the black
   shade"). The footage now plays untouched.

   What the wash was doing is done per-glyph instead — see the outline and
   shadow on .hero-title and .hero-trust below. That is the trade: dimming the
   whole frame costs the footage its quality everywhere to fix contrast in two
   places, where a stroke on the letters fixes only the two places.

   The nav does not need it either: .nav carries its own rgba(26,27,26,.88)
   background and blur, so it never relied on the gradient.

   The frame that decides whether this holds is the opening one — a white bowl
   filling the shot, with white type over it. Any replacement footage that opens
   bright should be checked there before shipping. */
.hero-video .wrap.hero-centered {
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
}
/* Clean neutral sans (system SF on Apple), not the brand display face — per the
   client's "font similar to Apple or Meta". */
.hero-video .hero-title,
.hero-video .hero-slogan {
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Inter, Arial,
    sans-serif;
}
.hero-video .hero-title {
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
  /* The "border around the text" the client asked for: a dark outline plus a
     soft shadow so it reads over bright or busy footage. Carrying more weight
     now that the scrim is gone — the close shadow is what separates a white
     letter from a white bowl, and the wide one keeps it from looking cut out. */
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.85),
    0 2px 10px rgba(0, 0, 0, 0.6),
    0 4px 30px rgba(0, 0, 0, 0.5);
}
.hero-video .hero-title .line {
  /* The real workhorse over a bright frame: a shadow blurs away against white,
     an outline does not.

     paint-order is not optional here (client 2026-08-25: "the E on each word
     has some strange overlay"). Without it the stroke is painted CENTRED on the
     glyph outline — half of it inside the letter — and on a letter with a small
     enclosed counter it closes that counter up. At 0.6px nobody noticed; at 1px
     every 'e' on the hero grew a little box where its hole should be, because
     'e' has the tightest counter of the letters in this headline.

     `paint-order: stroke fill` draws the stroke behind the fill instead, so the
     outline sits entirely outside the glyph and the counters stay open. Any
     future increase to the stroke width depends on this line staying here. */
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.55);
  paint-order: stroke fill;
}
.hero-video .hero-title .accent {
  color: var(--gold);
}
.hero-video .hero-slogan {
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72);
}
.hero-video .lead {
  color: #ececf0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.78);
}
/* Was #d6d6da over a 0.58 dark wash. With the wash gone that grey disappears
   into any bright frame, so it goes full white and carries its own shadow. */
.hero-video .hero-trust {
  color: var(--white);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.8),
    0 2px 12px rgba(0, 0, 0, 0.6);
}
/* Eyebrow pill gets a touch of blur so it sits cleanly on the footage. */
.hero-video .eyebrow {
  background: rgba(243, 169, 10, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Respect reduced-motion: drop the video, keep the brand ground + poster feel. */
@media (prefers-reduced-motion: reduce) {
  .hero-video .hero-bg {
    display: none;
  }
  .hero.hero-video {
    background: var(--ink);
  }
}

/* Split hero — copy left, image right (client 2026-08-12). Keeps the flat
   charcoal ground (the 2026-07-31 lesson: no scrim behind the headline); the
   photo lives in its own column, so nothing competes with the type. */
.home .hero .wrap.hero-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  text-align: left;
}
/* Cap the near-square image so it doesn't tower over the shorter copy and open
   a big gap; keep it toward the right edge for a modern, roomy hero. */
.hero-split .hero-shot {
  width: 100%;
  max-width: 480px;
  justify-self: end;
}
.hero-split .hero-copy > .eyebrow,
.hero-split .hero-copy > .hero-title,
.hero-split .hero-copy > .hero-slogan,
.hero-split .hero-copy > .lead,
.hero-split .hero-copy > .hero-trust {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  text-align: left;
}
.hero-split .hero-copy > .cta-row {
  justify-content: flex-start;
}
/* Premium hero-shot (client 2026-08-12): ambient gold glow behind, layered
   shadow, and a floating "live" chip — a designed product shot, not a flat box. */
.hero-split .hero-shot {
  position: relative;
  isolation: isolate;
}
.hero-split .hero-shot::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -7% -5% -11% -5%;
  background: radial-gradient(
    58% 58% at 62% 40%,
    rgba(243, 169, 10, 0.26),
    rgba(243, 169, 10, 0) 70%
  );
  filter: blur(20px);
}
.hero-split .hero-shot img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 44px 90px -34px rgba(0, 0, 0, 0.78),
    0 8px 26px -12px rgba(0, 0, 0, 0.5);
}
.hero-shot .hero-chip {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(18, 19, 18, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.7);
}
.hero-shot .hero-chip .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 1px rgba(243, 169, 10, 0.85);
  animation: chip-pulse 2s ease-in-out infinite;
}
@keyframes chip-pulse {
  50% {
    opacity: 0.35;
  }
}

/* Orbit rings + floating metric badges (client 2026-08-12 mockup): a designed
   product hero — the phone shot ringed by glowing orbits with floating icons. */
.hero-shot .orbit {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 122%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-shot .orbit::before,
.hero-shot .orbit::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(243, 169, 10, 0.16);
}
.hero-shot .orbit::after {
  inset: 13%;
  border-color: rgba(243, 169, 10, 0.26);
}
.hero-shot .float-ic {
  position: absolute;
  z-index: 3;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: rgba(22, 23, 22, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(243, 169, 10, 0.38);
  box-shadow:
    0 14px 34px -12px rgba(0, 0, 0, 0.7),
    0 0 22px -6px rgba(243, 169, 10, 0.55);
  animation: floaty 5s ease-in-out infinite;
}
.hero-shot .float-ic svg {
  width: 24px;
  height: 24px;
}
.hero-shot .ic-chart {
  top: 2%;
  left: -6%;
  animation-delay: 0s;
}
.hero-shot .ic-users {
  top: 42%;
  left: -12%;
  animation-delay: 0.9s;
}
.hero-shot .ic-dollar {
  bottom: 7%;
  right: -6%;
  animation-delay: 1.7s;
}
@keyframes floaty {
  50% {
    transform: translateY(-9px);
  }
}
@media (max-width: 560px) {
  .hero-shot .float-ic {
    width: 44px;
    height: 44px;
  }
  .hero-shot .ic-users {
    left: 2%;
  }
  .hero-shot .ic-chart {
    left: 2%;
  }
  .hero-shot .ic-dollar {
    right: 2%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shot .hero-chip .dot,
  .hero-shot .float-ic {
    animation: none;
  }
}
@media (max-width: 900px) {
  .home .hero .wrap.hero-split {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  .hero-split .hero-copy > .eyebrow,
  .hero-split .hero-copy > .hero-title,
  .hero-split .hero-copy > .hero-slogan,
  .hero-split .hero-copy > .lead,
  .hero-split .hero-copy > .hero-trust {
    text-align: center;
  }
  .hero-split .hero-copy > .cta-row {
    justify-content: center;
  }
  /* Image first on phones so the hero opens on a visual. */
  .hero-split .hero-shot {
    order: -1;
  }
}

/* ---- Restaurants marquee (client 2026-08-12): modern infinite scroller, not a
   static logo row. Edge fade + pause-on-hover; static under reduced-motion. ---- */
/* Override the global 116px section padding — the marquee is a tight strip, not
   a full section, so it must not carry the big top/bottom gaps. */
.home section.trust-strip {
  padding: 14px 0 18px;
  text-align: center;
}
/* The section right after the marquee shouldn't add its full 116px top gap. */
.home .trust-strip + section {
  padding-top: 48px;
}
.trust-eyebrow {
  margin: 0 0 16px;
  color: var(--on-dark-muted);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.m-item {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.3vw, 1.55rem);
  font-weight: 600;
  color: var(--white);
  opacity: 0.82;
  transition: opacity 0.2s;
}
.m-item:hover {
  opacity: 1;
}
.m-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin: 0 28px;
  flex: none;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
    gap: 6px 0;
  }
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.hero .eyebrow {
  color: var(--gold);
}

/* ---- Image bands (client 2026-08-12: less text, more imagery) ----
   Real, owned photos placed as their own full-width visuals rather than a scrim
   behind the headline (the 2026-07-31 problem). Fully fluid: width:100% scales
   to any viewport, object-fit:cover crops without distortion, and aspect-ratio
   reserves the space up front so nothing jumps as the image loads. */
.media-band {
  max-width: var(--wrap);
  margin: 6px auto 0;
  padding: 0 24px;
}
.media-band .frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.65);
}
.media-band .frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
.media-band .frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 17, 16, 0) 55%, rgba(16, 17, 16, 0.4));
  pointer-events: none;
}
.media-band figcaption {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 1;
  color: var(--white);
  font-weight: 600;
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
@media (max-width: 560px) {
  .media-band {
    padding: 0 16px;
  }
  .media-band .frame img {
    aspect-ratio: 4 / 3;
  }
  .media-band figcaption {
    left: 16px;
    bottom: 14px;
  }
}

/* ---- Split: image + short copy side-by-side (client 2026-08-12, me&u look) ---- */
.split {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 60px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
}
.split .split-media {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.65);
}
.split .split-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* A near-square product screenshot shows (almost) whole, not a wide crop. */
.split .split-media.product img {
  aspect-ratio: 1 / 1;
}
/* Portrait phone screenshots (client 2026-08-13): shown whole on a dark card,
   never cropped — the message / the on-screen UI is the whole point. */
.split .split-media.phone {
  aspect-ratio: 4 / 5;
  background: #0c0d10;
}
.split .split-media.phone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* A portrait PHOTO (not a screenshot) fills a taller cell, cover-cropped, so it
   sits flush beside the copy instead of letterboxing (client 2026-08-13). */
.split .split-media.tall {
  aspect-ratio: 4 / 5;
}
.split .split-media.tall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Request-a-server photo (client 2026-08-18): the server's head sits near the top
   edge, so a centred 4:5 cover-crop clipped it. Give this one cell a taller ratio
   (less cropping) and bias the crop to the top so the head is always kept. */
.split .split-media.tall.reqserver {
  aspect-ratio: 3 / 4;
}
.split .split-media.tall.reqserver img {
  object-position: 50% 12%;
}
/* A landscape (16:9) looping video sits flush in its cell — silent, autoplay,
   non-stop loop (client 2026-08-13). */
.split .split-media.loop-16x9 {
  aspect-ratio: 16 / 9;
  background: #0c0d10;
}
.split .split-media.loop-16x9 video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Portrait (9:16) video loops sit in a taller 4:5 slot so the subject reads
   instead of being cropped to a thin landscape strip (client 2026-08-12 Veo B-roll). */
.split .split-media.video {
  aspect-ratio: 4 / 5;
  background: #0c0d10;
}
.split .split-media.video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* AI Coach scene (client 2026-08-19): a portrait video of a restaurateur with
   her tablet, and the live analytics playing on a smaller panel anchored to the
   bottom, over the tablet — so she reads as looking at her numbers while a bit
   of the real tablet still shows. */
.split .split-media.coach-scene {
  position: relative;
  /* The lady clip's own ratio, so neither her face (top) nor the tablet
     (bottom) is cropped; capped so the tall scene doesn't dwarf the copy. */
  aspect-ratio: 464 / 832;
  max-width: 380px;
  margin-inline: auto;
  background: #0c0d10;
}
.split .split-media.coach-scene .coach-lady {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split .split-media.coach-scene .coach-analytics-overlay {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  width: 74%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.85);
}
.split .split-media.coach-scene .coach-analytics-overlay video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split .split-copy .eyebrow {
  color: var(--gold);
}
.split .split-copy h2 {
  margin: 6px 0 14px;
}
/* Section lead paragraphs read in the brighter body colour, same as
   .section-lead (client 2026-08-21) — the muted tier is for captions only. */
.split .split-copy p {
  color: var(--on-dark);
  margin: 0 0 20px;
}
/* Image on the right instead of the left. */
.split.reverse .split-media {
  order: 2;
}
@media (max-width: 820px) {
  .split {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 44px 24px;
  }
  .split.reverse .split-media {
    order: 0;
  }
  /* Copy leads, image drops below it on mobile (client 2026-08-13) — the servers
     section and Request-a-server both read text-first on a phone. */
  .split.copy-first-mobile .split-copy {
    order: 1;
  }
  .split.copy-first-mobile .split-media {
    order: 2;
  }
  /* Don't let a portrait video dominate a stacked mobile layout. */
  .split .split-media.video {
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
  }
}

/* Headline sized to the client's Poppins mockup (2026-07-31).
   Was clamp(2.05rem, 6.6vw, 5rem) — 80px at 1920, which pushed the headline to
   three lines and let it dominate the hero. The mockup's headline sits on two
   lines at roughly 58px, subordinate to the page rather than shouting over it.
   The 2.05rem floor stays: it is what keeps a two-word accent phrase on one
   line on a 390px phone. */
.hero-title {
  /* Smaller than before (client 2026-08-06): the headline was reflowing and
     pushing the copy down as the rotating accent word swapped widths — a smaller
     size keeps the format stable and the hero calmer. ~30px mobile / ~52px
     desktop, weight 700, line-height 1.1. */
  font-size: clamp(1.9rem, 4.2vw, 3.25rem);
  line-height: 1.1;
  font-weight: 700;
  color: var(--white);
  /* More air under the headline so it doesn't crowd the paragraph (client
     2026-08-01). */
  margin: 0 auto 32px;
  max-width: 24ch;
  letter-spacing: -0.02em;
}
.hero-title .line {
  display: block;
}
@keyframes wordUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gold gradient shimmer on the accent words. */
/* Spec: the key word in the H1 is a flat accent colour — the old gold→cream ramp
   read washed out, and the gradient treatment now belongs to the subheading. */
.hero-title .accent {
  color: var(--gold);
  animation: wordUp 0.72s cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}
@keyframes shimmer {
  to {
    background-position: 220% center;
  }
}

/* The rotating headline phrase (client 2026-08-03): the orange line fades and
   lifts as it swaps to the next phrase. Same on every screen size; held still
   under reduced-motion. `animation: none` overrides the .accent entrance so the
   swap transition owns it. */
.hero-rotate {
  animation: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.hero-rotate.is-swapping {
  opacity: 0;
  transform: translateY(0.35em);
}
@media (prefers-reduced-motion: reduce) {
  .hero-rotate {
    transition: none;
  }
}

/* The subheading under the headline. Clean solid white, matching the client's
   Lovable demo (2026-08-03) — the earlier multi-colour gradient read as busy
   next to the demo's crisp white line. */
.hero-slogan {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 18px;
}

.hero-sub {
  font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: var(--white);
  margin: 0 0 20px;
}

.hero .lead {
  max-width: 720px;
  margin: 0 auto 14px;
  color: var(--on-dark);
  font-size: 1em;
  line-height: 1.6;
}

@media (max-width: 719px) {
  /* Phone lines are short, so the lead runs many rows — keep it at full
     on-dark strength rather than the muted tone used on wide screens. */
  .hero .lead {
    color: var(--on-dark);
  }
}

.hero .cta-row {
  justify-content: center;
  margin-top: 28px;
}

.hero-trust {
  margin: 20px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--on-dark-muted);
}

/* Inline gold accent inside headings (Connected / Transform / build a better one). */
h2 .accent,
.big-line .accent {
  color: var(--gold);
}

.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ---- Scroll-reveal utility ---- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ===========================================================================
 * RESULTS — stat band + charts (client #3: growth / pie / bar visuals)
 * ========================================================================= */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
}
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 2.8rem);
  color: var(--gold);
  line-height: 1;
}
.stat-cap {
  display: block;
  margin-top: 10px;
  color: var(--on-dark-muted);
  font-size: 0.92rem;
  font-weight: 600;
}
.stat-foot {
  text-align: center;
  color: var(--on-dark-muted);
  font-size: 0.82rem;
  margin: 16px 0 0;
}

.chart-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}
.chart-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 22px;
}
.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.chart-head h3 {
  margin: 0;
}
.chart-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--on-dark-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ink-line);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.chart-tag.up {
  color: #4ecb8d;
  background: rgba(78, 203, 141, 0.12);
  border-color: rgba(78, 203, 141, 0.3);
}

/* Line chart */
.linechart {
  width: 100%;
  height: 180px;
  display: block;
}
.linechart .grid line {
  stroke: var(--ink-line);
  stroke-width: 1;
}
.ln-line {
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  transition: stroke-dashoffset 1.5s ease 0.15s;
}
.ln-area {
  opacity: 0;
  transition: opacity 0.9s ease 0.6s;
}
.chart-card.in .ln-line {
  stroke-dashoffset: 0;
}
.chart-card.in .ln-area {
  opacity: 1;
}
.chart-x {
  display: flex;
  justify-content: space-between;
  color: var(--on-dark-muted);
  font-size: 0.78rem;
  margin-top: 8px;
}

/* Donut chart */
.donut-wrap {
  position: relative;
  width: 190px;
  margin: 8px auto 4px;
}
.donut {
  width: 190px;
  height: 190px;
  transform: rotate(-90deg);
}
.donut-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 14;
}
.donut-seg {
  fill: none;
  stroke-width: 14;
  stroke-linecap: butt;
  stroke-dasharray: 0 301.6;
  transition: stroke-dasharray 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.seg1 {
  stroke: var(--gold);
  transform-origin: 60px 60px;
}
.seg2 {
  stroke: var(--gold-deep);
  transform: rotate(162deg);
  transform-origin: 60px 60px;
  transition-delay: 0.12s;
}
.seg3 {
  stroke: var(--gold-2);
  transform: rotate(263deg);
  transform-origin: 60px 60px;
  transition-delay: 0.24s;
}
.seg4 {
  stroke: var(--silver);
  transform: rotate(324deg);
  transform-origin: 60px 60px;
  transition-delay: 0.36s;
}
.chart-card.in .seg1 {
  stroke-dasharray: 135.7 301.6;
}
.chart-card.in .seg2 {
  stroke-dasharray: 84.4 301.6;
}
.chart-card.in .seg3 {
  stroke-dasharray: 51.3 301.6;
}
.chart-card.in .seg4 {
  stroke-dasharray: 30.2 301.6;
}
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.donut-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--white);
}
.donut-sub {
  color: var(--on-dark-muted);
  font-size: 0.8rem;
}
.legend {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--on-dark);
  font-size: 0.88rem;
  font-weight: 600;
}
.sw {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}
.sw1 {
  background: var(--gold);
}
.sw2 {
  background: var(--gold-deep);
}
.sw3 {
  background: var(--gold-2);
}
.sw4 {
  background: var(--silver);
}

/* Bar chart */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 190px;
  padding-bottom: 22px;
  position: relative;
}
.bar {
  flex: 1;
  height: 0;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-radius: 7px 7px 0 0;
  position: relative;
  transition: height 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  opacity: 0.5;
}
.bar.hot {
  opacity: 1;
}
.bar span {
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--on-dark-muted);
  font-size: 0.72rem;
}
.chart-card.in .bar {
  height: var(--h);
}
.bar:nth-child(2) {
  transition-delay: 0.05s;
}
.bar:nth-child(3) {
  transition-delay: 0.1s;
}
.bar:nth-child(4) {
  transition-delay: 0.15s;
}
.bar:nth-child(5) {
  transition-delay: 0.2s;
}
.bar:nth-child(6) {
  transition-delay: 0.25s;
}
.bar:nth-child(7) {
  transition-delay: 0.3s;
}
.bar:nth-child(8) {
  transition-delay: 0.35s;
}

/* ===========================================================================
 * Content blocks
 * ========================================================================= */

/* Problem cards + "Yemo changes that." */
.prob-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 36px;
}
.prob {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 22px;
  color: var(--on-dark-muted);
  font-weight: 600;
}
.turn {
  text-align: center;
  color: var(--gold);
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  margin: 48px 0 8px;
}

.panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 30px;
  margin-top: 24px;
}

/* Benefit lists */
.checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.checks.two-col {
  grid-template-columns: 1fr 1fr;
  gap: 14px 30px;
}
.checks li {
  position: relative;
  padding-left: 34px;
  color: var(--on-dark);
}
.checks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  background: var(--success); /* spec: feature-list checkmarks in green */
  color: #0a0a0b;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* Feature cards */
.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 48px;
}
.grid.two {
  grid-template-columns: 1fr 1fr;
}
/* Spec: surface background, 1px border, 16px radius, soft shadow, 24–32px pad. */
.card {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}
@media (max-width: 719px) {
  .card {
    padding: 24px;
  }
}
.card h3 {
  margin-bottom: 10px;
}
.card p {
  color: var(--on-dark-muted);
}
.card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--on-dark-muted);
}
.card-ic {
  color: var(--gold);
  margin-bottom: 14px;
  height: 34px;
  display: flex;
  align-items: center;
}
.card-ic svg {
  width: 32px;
  height: 32px;
  display: block;
}

/* AI Coach numbered steps */
.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.step {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--gold);
}
.step span:last-child {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
}

/* "Why different" big line */
.big-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--white);
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.25;
}

/* Feature pills */
.pill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 34px;
}
.pill {
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  padding: 13px 16px;
  font-weight: 600;
  color: var(--on-dark);
  background: rgba(255, 255, 255, 0.03);
}
.pill::before {
  content: '✔';
  color: var(--gold);
  font-weight: 700;
  margin-right: 8px;
}

.scale-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--gold);
  margin-top: 8px;
}

/* ---- FAQ accordion ---- */
.faq-list {
  max-width: 820px;
  margin: 44px auto 0;
  display: grid;
  gap: 12px;
}
.faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.faq-item[open],
.faq-item:hover {
  border-color: rgba(243, 169, 10, 0.4);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--white);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  flex: none;
  color: var(--gold);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-a {
  padding: 0 22px 20px;
}
.faq-a p {
  margin: 0 0 10px;
  color: var(--on-dark-muted);
}
.faq-a p:last-child {
  margin-bottom: 0;
}
.faq-a strong {
  color: var(--gold);
}
.faq-cta {
  max-width: 640px;
  margin: 48px auto 0;
  text-align: center;
}

/* Final CTA — orange top edge + subtle glow, per reference. */
.home .cta-final {
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(243, 169, 10, 0.12), transparent 60%), var(--ink);
  border-top: 2px solid var(--gold);
}

/* ---- Footer ---- */
footer {
  background: var(--ink);
  color: var(--on-dark);
  /* Smaller footer print (client 2026-08-19 third-party notes): now that the
     final CTA is gone, the footer is quiet small print. */
  padding: 48px 0 24px;
  border-top: 1px solid var(--ink-line);
  font-size: 0.82rem;
}
footer h4 {
  color: var(--white);
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1rem;
}
.foot-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1.4fr 1fr 1fr;
}
@media (max-width: 720px) {
  .foot-grid {
    grid-template-columns: 1fr;
  }
}
.foot-logo img {
  height: 52px;
  width: auto;
}
.foot-blurb {
  margin: 14px 0 16px;
  color: var(--on-dark-muted);
  max-width: 40ch;
}
.powered {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.powered img {
  height: 17px;
  width: auto;
  flex: none;
}
footer a {
  color: var(--on-dark);
  text-decoration: none;
}
footer a:hover {
  color: var(--gold);
}
.foot-contact p {
  /* Smaller, quieter contact text to match a modern site (client 2026-08-01). */
  margin: 0 0 6px;
  color: var(--on-dark-muted);
  font-size: 0.85rem;
}
.foot-contact a {
  color: var(--on-dark);
}
.foot-bottom {
  border-top: 1px solid var(--ink-line);
  margin-top: 40px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--on-dark-muted);
}
.foot-bottom a {
  color: var(--on-dark-muted);
  margin-left: 18px;
}

/* ===========================================================================
 * LEGAL PAGES (terms/privacy) — light, unchanged
 * ========================================================================= */
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}
.legal h1 {
  font-size: 2.2rem;
  color: var(--ink);
}
.legal h2 {
  font-size: 1.3rem;
  margin-top: 2em;
}
.legal .eff {
  color: var(--muted);
  font-weight: 600;
}
.legal ul {
  color: var(--body);
}
.back {
  display: inline-block;
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  color: var(--gold-ink);
}

/* ===========================================================================
 * Responsive
 * ========================================================================= */
@media (max-width: 900px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
  .stat-band {
    grid-template-columns: repeat(2, 1fr);
  }
  .prob-grid,
  .step-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .checks.two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .wrap {
    padding: 0 18px;
  }
  .home section {
    padding: 60px 0;
  }
  .home .hero {
    padding: 70px 0 64px;
  }
  .cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cta-row .btn {
    width: 100%;
    text-align: center;
    white-space: normal;
  }
  .card,
  .panel {
    padding: 22px;
  }
  .prob-grid,
  .stat-band,
  .step-grid {
    grid-template-columns: 1fr;
  }
  .foot-bottom a {
    margin-left: 0;
    margin-right: 18px;
  }
}

/* ---- Scan to order (client 2026-08-13): centered QR-scan video highlight ---- */
.scan-order .scan-media {
  max-width: 760px;
  margin: 36px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--ink-line);
  background: #0c0d10;
}
.scan-order .scan-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "You'll Earn More Overall" — the YEMO initials in gold (client 2026-08-15). */
/* YEMO-initials tagline: the Y/E/M/O first letters in gold (testimonials + FAQ). */
.earn-more .hl {
  color: var(--gold);
}

/* ---- Payments strip (client 2026-08-15): auto-scrolling brand chips ---- */
.payments .brand-marquee {
  position: relative;
  margin: 32px auto 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.payments .brand-track {
  display: flex;
  width: max-content;
  gap: 22px;
  animation: brand-scroll 30s linear infinite;
  will-change: transform;
}
.payments .brand-marquee:hover .brand-track {
  animation-play-state: paused;
}
@keyframes brand-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%); /* one full set — JS duplicates for a seamless loop */
  }
}
.payments .brand-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  /* Bigger logos (client 2026-08-19 third-party notes): larger white chips so
     the marks read clearly as they scroll past. */
  height: 84px;
  min-width: 120px;
  /* White chips (client 2026-08-18: the logos were invisible on the dark strip).
     The card marks are full-colour and only read on a light tile, so every logo
     gets its own white card — clean and each one clearly visible. */
  background: #fff;
  border-radius: 16px;
  padding: 16px 28px;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.55);
}
.payments .brand-chip img {
  display: block;
  height: 42px;
  width: auto;
}
/* The wallet marks (Apple/Google/Samsung Pay) are white monochrome wordmarks, so
   on a white chip they'd vanish — flatten them to black so they read on white
   like the card logos beside them (client 2026-08-18). A touch smaller so they
   optically match the boxed card logos. */
.payments .brand-chip.is-wallet img {
  height: 34px;
  filter: brightness(0);
}

/* ---- Book a free consultation (client 2026-08-15) ---- */
.book .book-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: 24px;
  padding: 32px 28px;
}
.book .book-form {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.book .book-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.book .book-form input,
.book .book-form textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  padding: 13px 14px;
  color: var(--white);
  font: inherit;
  font-size: 15px;
}
.book .book-form input::placeholder,
.book .book-form textarea::placeholder {
  color: var(--placeholder);
}
.book .book-form input:focus,
.book .book-form textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.book .book-form textarea {
  resize: vertical;
}
.book .book-submit {
  margin-top: 4px;
  width: 100%;
}
.book .book-note {
  margin: 4px 0 0;
  text-align: center;
  color: var(--on-dark-muted);
  font-size: 13px;
}
@media (max-width: 560px) {
  .book .book-row {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .payments .brand-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
}

/* ---- Testimonials (client 2026-08-13): vertical auto-scrolling face-cards ---- */
.testimonials .t-marquee {
  position: relative;
  max-width: 620px;
  margin: 40px auto 0;
  height: 470px; /* a window showing ~2 cards; the rest scrolls up through it */
  overflow: hidden;
  /* soften the top & bottom edges so cards ease in and out, not hard-clip */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.testimonials .t-track {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: t-scroll-up 32s linear infinite;
  will-change: transform;
}
/* pause on hover / keyboard focus so a card can actually be read */
.testimonials .t-marquee:hover .t-track,
.testimonials .t-marquee:focus-within .t-track {
  animation-play-state: paused;
}
@keyframes t-scroll-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%); /* one full set — the JS clone makes it seamless */
  }
}
.testimonials .t-card {
  margin: 0;
  flex: none;
  text-align: left;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: 18px;
  padding: 24px 24px 26px;
}
.testimonials .t-card-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 15px;
}
.testimonials .t-avatar {
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* Different tints so three placeholder people read as three people. Swap the
   whole span for <img class="t-avatar"> when the real headshots arrive. */
.testimonials .t-avatar.a1 {
  background: linear-gradient(150deg, var(--gold-glow), var(--gold));
}
.testimonials .t-avatar.a2 {
  background: linear-gradient(150deg, #f0a56a, var(--gold-deep));
}
.testimonials .t-avatar.a3 {
  background: linear-gradient(150deg, #7fa8e0, #4f6fae);
}
img.t-avatar {
  object-fit: cover;
}
.testimonials .t-person {
  min-width: 0;
}
.testimonials .t-name {
  display: block;
  color: var(--white);
  font-weight: 600;
  font-size: 15px;
}
.testimonials .t-role {
  display: block;
  color: var(--on-dark-muted);
  font-size: 13px;
  margin-top: 2px;
}
.testimonials .t-stars {
  margin-left: auto;
  align-self: flex-start;
  color: var(--gold);
  letter-spacing: 2px;
  font-size: 13px;
}
.testimonials .t-quote {
  margin: 0;
  color: var(--on-dark);
  font-size: 0.98rem;
  line-height: 1.6;
}
@media (min-width: 720px) {
  .testimonials .t-marquee {
    height: 500px;
  }
  .testimonials .t-card {
    padding: 28px 30px 30px;
  }
  .testimonials .t-quote {
    font-size: 1.02rem;
  }
}
/* reduced-motion: no scroll — a plain, readable stacked list */
@media (prefers-reduced-motion: reduce) {
  .testimonials .t-marquee {
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .testimonials .t-track {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}