/* ===================================================================
   Engenix.Ai — AI agents for UK car dealerships
   Design system (OEM register, inspired by VW / Nissan / Toyota UK):
   light and airy, white-dominant, generous whitespace, big imagery,
   one bold automotive-red accent, clean neutral type.
   Type: General Sans (display) + Satoshi (body).
   Carries the retained-plumbing hooks (#demo-modal, kb-consent,
   lead/wizard forms, audio-sample, carousel, [data-reveal]).
   =================================================================== */

:root {
  --paper: #FFFFFF;
  --paper-2: #F4F6F9;
  --paper-3: #E7EBF0;
  --ink: #0B1B2B;
  --ink-2: #122637;
  --ink-3: #20384C;
  --text: #0B1B2B;
  --text-inv: #EAF1F8;
  --muted: #58697A;
  --muted-inv: #9FB2C4;
  --accent: #E4002B;
  --accent-600: #B80020;
  --accent-soft: #FDE7EB;
  /* Text-safe versions of the same brand red. The full-strength --accent is
     4.47:1 on the alt canvas and 3.59:1 on the ink, both just under the 4.5:1
     bar, so small red text takes these instead. Fills, rules, markers and
     borders keep --accent. Hue is unchanged: lightness only. */
  --accent-text: #C10024;    /* red text on paper / paper-2 */
  --accent-on-ink: #FF6A85;  /* red text on the ink surfaces */
  --ok: #15703E;
  --line: #E2E7EE;
  --line-ink: rgba(255, 255, 255, 0.12);

  --font-display: "General Sans", "Satoshi", system-ui, sans-serif;
  --font-body: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display: clamp(2.6rem, 6vw, 5rem);
  --fs-h2: clamp(2rem, 4vw, 3.2rem);
  --fs-promise: clamp(1.4rem, 2.2vw, 2rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.3rem);

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --shadow: 0 12px 36px -18px rgba(11, 27, 43, 0.28);
  --shadow-soft: 0 1px 2px rgba(11, 27, 43, 0.06), 0 8px 24px -16px rgba(11, 27, 43, 0.18);
  --shadow-accent: 0 14px 34px -14px rgba(228, 0, 43, 0.42);
  --container: 1240px;
  --gutter: clamp(1.2rem, 4vw, 3.2rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  font-size: 1.02rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-600); }
img { max-width: 100%; display: block; }

.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff;
  padding: 0.7rem 1rem; border-radius: 0 0 var(--r-sm) 0; z-index: 200;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-text); margin: 0 0 1rem;
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; }
.lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.55; max-width: 60ch; }

section { position: relative; }
.section { padding-block: clamp(4.5rem, 9vw, 8rem); }
.surface-paper { background: var(--paper); }
.surface-alt { background: var(--paper-2); }
.surface-ink { background: var(--ink); color: var(--text-inv); }
.surface-ink h1, .surface-ink h2, .surface-ink h3 { color: #fff; }
.surface-ink .lead { color: var(--muted-inv); }
/* Every navy surface, not just .surface-ink: the hero, the use-case hero, the
   blog ink panel and the footer all carry eyebrows on the ink.
   (.panel-ink is a scaffold leftover with no dark background, so it is not
   listed here: its eyebrows sit on the light canvas.) */
.surface-ink .eyebrow,
.hero .eyebrow,
.uc-hero .eyebrow,
.panel-cobalt .eyebrow,
.site-footer .eyebrow { color: var(--accent-on-ink); }
.surface-ink .eyebrow::before { background: var(--accent); }

/* The same lift for the other small red labels when they sit on the ink. */
.surface-ink .ch-idx,
.surface-ink .sol-tag,
.surface-ink .t-tag,
.surface-ink .howit-foot,
.surface-ink .uc-group-title { color: var(--accent-on-ink); }

/* ---------- Buttons ---------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  padding: 0.95rem 1.7rem; border-radius: var(--r-sm); border: 0; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  text-align: center; line-height: 1.1;
}
.cta-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.cta-primary:hover { background: var(--accent-600); color: #fff; transform: translateY(-2px); }
.cta-secondary { background: transparent; color: var(--text); border: 1.5px solid var(--line); }
.cta-secondary:hover { border-color: var(--accent); color: var(--accent); }
.surface-ink .cta-secondary, .hero .cta-secondary { color: #fff; border-color: rgba(255,255,255,0.34); }
.surface-ink .cta-secondary:hover, .hero .cta-secondary:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.06); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
@media (prefers-reduced-motion: reduce) { .cta:hover { transform: none; } }

.hook-line { font-size: 0.92rem; color: var(--muted); margin-top: 0.9rem; max-width: 46ch; }
.surface-ink .hook-line, .hero .hook-line { color: var(--muted-inv); }

/* ---------- Reveal ---------- */
.has-reveal [data-reveal]:not([data-reveal="shown"]) { opacity: 0; transform: translateY(22px); }
[data-reveal] { transition: opacity 0.7s ease, transform 0.7s ease; }
@media (prefers-reduced-motion: reduce) {
  .has-reveal [data-reveal]:not([data-reveal="shown"]) { opacity: 1; transform: none; }
}

/* ===================================================================
   NAV — white, OEM-style, sticky with hairline + soft shadow
   =================================================================== */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 1.4rem; min-height: 74px; position: relative; }
.nav-brand { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--ink); letter-spacing: -0.01em; }
.nav-brand .nav-logo { height: 26px; width: auto; display: block; }
.brand-dot { color: var(--accent); }
.nav-spacer { flex: 1; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-links a, .nav-uc-trigger {
  color: var(--ink); font-weight: 600; font-size: 0.96rem; background: none; border: 0;
  font-family: var(--font-body); cursor: pointer; padding: 0.4rem 0; display: inline-flex; align-items: center; gap: 0.35rem;
}
.nav-links a:hover, .nav-uc-trigger:hover { color: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 0.8rem; }
.nav-actions .cta { padding: 0.62rem 1.2rem; font-size: 0.9rem; }
.nav-link-ghost { color: var(--ink); font-weight: 700; }

/* Use Cases mega-menu */
.nav-uc { position: relative; }
.nav-uc-trigger .chev { transition: transform 0.2s ease; font-size: 0.7rem; }
.nav-uc:hover .chev, .nav-uc:focus-within .chev { transform: rotate(180deg); }
.nav-uc-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  width: min(680px, 90vw); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 1.4rem;
  opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 1.8rem; z-index: 120;
}
.nav-uc::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.nav-uc:hover .nav-uc-panel, .nav-uc:focus-within .nav-uc-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(6px); }
.uc-group-title { grid-column: 1 / -1; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0.7rem 0 0.2rem; }
.uc-group-title:first-child { margin-top: 0; }
.uc-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border-radius: var(--r-sm); color: var(--ink); }
.uc-row:hover { background: var(--paper-2); }
.uc-row .uc-marker { color: var(--accent); }
.uc-row .uc-text { flex: 1; }
.uc-row .uc-title { font-weight: 700; font-size: 0.92rem; display: block; }
.uc-row .uc-sub { font-size: 0.78rem; color: var(--muted); display: block; }
.uc-row .uc-arrow { color: var(--muted); }

.nav-burger, .nav-toggle, .nav-mobile-panel { display: none; }

/* ===================================================================
   HERO — full-bleed imagery with a clean overlay (OEM)
   =================================================================== */
.hero { position: relative; color: #fff; overflow: hidden; background: var(--ink); }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(7,16,26,0.86) 0%, rgba(7,16,26,0.62) 45%, rgba(7,16,26,0.30) 100%);
}
.hero-inner { position: relative; z-index: 1; padding-block: clamp(5rem, 13vw, 9.5rem); max-width: 880px; }
.hero h1 { font-size: var(--fs-display); font-weight: 700; margin: 0 0 1.3rem; color: #fff; }
.hero h1 .hl { color: #fff; box-shadow: inset 0 -0.18em 0 var(--accent); }
.hero .lead { color: #E7EEF6; font-size: var(--fs-lead); max-width: 54ch; margin-bottom: 2rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; margin-top: 2.2rem; list-style: none; padding: 0; }
.hero-proof li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.96rem; color: #DCE6F0; font-weight: 500; }
.hero-proof li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.hero-trust { margin-top: 1.6rem; font-size: 0.82rem; color: var(--muted-inv); letter-spacing: 0.04em; font-weight: 600; text-transform: uppercase; }

/* ===================================================================
   SECTION HEADS
   =================================================================== */
.solution-head, .proof-head, .kb-head { max-width: 680px; margin-bottom: 3rem; }
.solution-head h2, .proof-head h2, .kb-head h2 { font-size: var(--fs-h2); }

/* ===================================================================
   SOLUTION BAND (six cards) — light, white cards
   =================================================================== */
.solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.sol-card {
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: var(--r); padding: 1.9rem 1.7rem; box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sol-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.sol-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.sol-card.is-system .sol-tag { color: var(--ink); }
.sol-card.is-system { border-top-color: var(--ink); }
.sol-promise { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-promise); color: var(--ink); margin: 0.7rem 0 0.6rem; line-height: 1.12; }
.sol-line { font-size: 0.96rem; color: var(--muted); }

/* ===================================================================
   IN PRODUCTION (testimonials)
   =================================================================== */
.testi-carousel { min-width: 0; }
.testimonials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.testimonial {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.9rem 1.7rem; box-shadow: var(--shadow-soft); position: relative; overflow: hidden;
}
.testimonial::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); }
.t-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.t-quote { font-family: var(--font-display); font-weight: 500; font-size: 1.18rem; line-height: 1.4; margin: 0.9rem 0 1.3rem; color: var(--ink); letter-spacing: -0.01em; }
.t-cite { border-top: 1px solid var(--line); padding-top: 0.9rem; }
.t-name { font-weight: 700; }
.t-role { font-size: 0.85rem; color: var(--muted); }
.carousel-controls { display: none; }

/* Home sample-call demo block: image + audio stacked on the left, copy + links on the right */
.callproof { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.8rem; align-items: center; }
.callproof-stack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.callproof-media { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; }
.callproof-media img { width: 100%; height: 100%; object-fit: cover; }
.callproof h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 0.8rem; }
.callproof .lead { margin-bottom: 1.4rem; }

/* ===================================================================
   HOW IT WORKS (horizontal stepper)
   =================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 3rem; }
.step { position: relative; padding-right: 1.4rem; }
.step:not(:last-child)::after { content: "\2192"; position: absolute; right: 0.1rem; top: 0.1rem; color: var(--accent); font-size: 1.3rem; }
.step-num { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--accent); }
.step h3 { font-size: 1.2rem; margin: 0.6rem 0 0.5rem; }
.step p { font-size: 0.94rem; color: var(--muted); }
.surface-ink .step p { color: var(--muted-inv); }

/* ===================================================================
   KNOWLEDGE BASE (compact cards)
   =================================================================== */
.kb-foundation {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.7rem;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; margin-bottom: 2.8rem;
}
.kb-foundation .kb-core { background: var(--accent); color: #fff; font-weight: 700; padding: 0.6rem 1.2rem; border-radius: var(--r-sm); }
.kb-foundation .kb-arrow { color: var(--muted); }
.kb-foundation .kb-chan { border: 1px solid var(--line); background: var(--paper); padding: 0.55rem 1.1rem; border-radius: var(--r-sm); font-weight: 600; font-size: 0.9rem; }
.kb-phase { margin-bottom: 2.6rem; }
.kb-phase-title { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 1.1rem; display: flex; align-items: center; gap: 0.7rem; }
.kb-phase-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.kb-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.kb-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.kb-card-banner { height: clamp(150px, 15vw, 188px); background-image: var(--kb-img); background-size: cover; background-position: center; }
.kb-card-body { padding: 1.2rem 1.3rem 1.4rem; }
.kb-card-body h4, .kb-card-body h3 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 0.4rem; }
.kb-card-body p { font-size: 0.92rem; color: var(--muted); }

/* ===================================================================
   FOUR CHANNELS (dark feature band)
   =================================================================== */
.channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 3rem; }
.channel { padding: 1.8rem 1.5rem 0; border-top: 2px solid var(--accent); }
/* The channel strip sits on the ink, so its index label takes the lifted red. */
.channel .ch-idx { font-weight: 700; font-size: 0.74rem; color: var(--accent-on-ink); letter-spacing: 0.1em; text-transform: uppercase; }
.channel h3 { font-size: 1.35rem; margin: 0.7rem 0 0.5rem; }
.channel p { font-size: 0.94rem; color: var(--muted); }
.surface-ink .channel p { color: var(--muted-inv); }

/* ===================================================================
   WHY IT HOLDS UP (trust)
   =================================================================== */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 3rem; }
.trust-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.8rem 1.6rem; box-shadow: var(--shadow-soft); }
.trust-card .ti { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 1.1rem; font-weight: 700; font-size: 1.1rem; }
.trust-card h3 { font-size: 1.14rem; margin-bottom: 0.5rem; }
.trust-card p { font-size: 0.92rem; color: var(--muted); }

/* ===================================================================
   FINAL CTA (dark band)
   =================================================================== */
.final-cta { text-align: center; }
.final-cta h2 { font-size: var(--fs-h2); color: #fff; max-width: 18ch; margin: 0 auto 1.2rem; }
.final-cta .lead { margin: 0 auto 2rem; color: var(--muted-inv); }
.final-cta .cta-row { justify-content: center; }
.final-cta .hook-line { margin-inline: auto; text-align: center; }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer { background: var(--ink); color: var(--text-inv); padding-block: 3.6rem 2.2rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.2rem; padding-bottom: 2.6rem; border-bottom: 1px solid var(--ink-3); }
.footer-brand-lockup { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; color: #fff; }
.footer-blurb { margin-top: 0.9rem; font-size: 0.92rem; color: var(--muted-inv); max-width: 36ch; }
.footer-col h4, .footer-col h2 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-inv); margin-bottom: 1rem; }
.footer-col a { display: block; color: var(--text-inv); font-size: 0.94rem; padding: 0.32rem 0; }
.footer-col a:hover { color: var(--accent-on-ink); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.8rem; font-size: 0.86rem; color: var(--muted-inv); }
.footer-quote { font-style: italic; color: #C7D4E2; text-align: center; flex: 1; }
.footer-powered a { color: var(--accent-on-ink); font-weight: 700; }

/* ===================================================================
   DEMO MODAL (retained plumbing)
   =================================================================== */
.demo-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.4rem; }
.demo-modal[hidden] { display: none; }
.demo-modal-backdrop { position: absolute; inset: 0; background: rgba(11, 27, 43, 0.66); backdrop-filter: blur(4px); }
.demo-modal-card { position: relative; background: var(--paper); border-radius: var(--r-lg); padding: 2.3rem; max-width: 470px; width: 100%; box-shadow: var(--shadow); }
.demo-modal-eyebrow { color: var(--accent-text); }
.demo-modal-title { font-size: 1.5rem; margin-bottom: 0.8rem; }
.demo-modal-desc { color: var(--muted); margin-bottom: 1.6rem; }
.demo-modal-actions { display: flex; gap: 0.8rem; justify-content: flex-end; }

/* ===================================================================
   COOKIE CONSENT (retained plumbing)
   =================================================================== */
.kb-consent {
  position: fixed; bottom: 1.2rem; left: 1.2rem; right: 1.2rem; max-width: 480px; z-index: 250;
  background: var(--paper); color: var(--text); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.3rem; box-shadow: var(--shadow); display: none;
}
.kb-consent.is-visible { display: block; }
/* The consent banner renders on the near-black injected background. */
.kb-consent-text { font-size: 0.86rem; color: var(--muted-inv); margin-bottom: 0.9rem; }
.kb-consent-actions { display: flex; gap: 0.7rem; justify-content: flex-end; }
.kb-consent-btn { font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; padding: 0.5rem 1.1rem; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--line); }
.kb-consent-decline { background: transparent; color: var(--text); }
.kb-consent-accept { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ===================================================================
   AUDIO SAMPLE PLAYER (retained plumbing — themed)
   =================================================================== */
.audio-sample { background: var(--ink); color: var(--text-inv); border-radius: var(--r); padding: 1.7rem; border: 1px solid var(--ink-3); }
.audio-sample-marker { display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-inv); margin-bottom: 1.1rem; }
.audio-marker-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .audio-marker-dot { animation: none; } }
.audio-waveform { position: relative; height: 60px; --audio-progress: 0%; margin-bottom: 1.1rem; }
.audio-waveform-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.audio-waveform-svg--base rect { fill: var(--ink-3); }
.audio-waveform-svg--heard { clip-path: inset(0 calc(100% - var(--audio-progress)) 0 0); }
.audio-waveform-svg--heard rect { fill: var(--accent); }
.audio-waveform-playhead { position: absolute; top: 0; bottom: 0; left: var(--audio-progress); width: 2px; background: #fff; }
.audio-transport { display: flex; align-items: center; gap: 1rem; }
.audio-play-button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; }
.audio-play-button:hover { background: var(--accent-600); }
.audio-icon { width: 20px; height: 20px; fill: currentColor; }
.audio-icon--pause { display: none; }
.audio-sample.is-playing .audio-icon--play { display: none; }
.audio-sample.is-playing .audio-icon--pause { display: block; }
.audio-timecode { font-family: var(--font-mono); font-size: 0.84rem; color: var(--muted-inv); }
.audio-meta-strip { margin-left: auto; font-size: 0.74rem; font-weight: 600; color: var(--muted-inv); letter-spacing: 0.06em; }

/* ===================================================================
   USE-CASE PAGES
   =================================================================== */
.uc-hero { background: var(--ink); color: #fff; padding-block: clamp(3.8rem, 8vw, 6.5rem); }
.uc-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); color: #fff; max-width: 18ch; margin: 0.6rem 0 1.1rem; }
.uc-hero .lead { color: #E7EEF6; margin-bottom: 1.8rem; }
.uc-block { display: grid; grid-template-columns: 1fr 1fr; gap: 2.8rem; align-items: center; }
.uc-block.reverse .uc-media { order: 2; }
.uc-media { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; background: var(--paper-3); }
.uc-media img { width: 100%; height: 100%; object-fit: cover; }
.uc-block h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.8rem; }
.uc-block p { color: var(--muted); }
.uc-transcript { margin-top: 1.6rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem 1.6rem; box-shadow: var(--shadow-soft); }
.uc-transcript .turn { margin-bottom: 0.7rem; font-size: 0.94rem; line-height: 1.5; color: var(--text); }
.uc-transcript .turn b { color: var(--accent); }
.uc-transcript .turn.cust b { color: var(--ink); }

/* ===================================================================
   LEAD / WIZARD FORM (retained plumbing — themed)
   =================================================================== */
.panel { padding-block: 2rem; }
.panel-cobalt { background: var(--ink); }
.panel-chalk { background: var(--paper-2); }
.lead-nav-band { padding-block: 0; background: transparent; }
.lead-section { padding-block: clamp(2.8rem, 6vw, 5rem); }
.lead-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2.8rem; align-items: start; }
.lead-pitch-eyebrow { color: var(--accent-text); }
.lead-pitch-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 1rem; }
.lead-pitch-lead { margin-bottom: 1.4rem; }
.lead-pitch-steps { list-style: none; padding: 0; margin: 1.6rem 0; display: grid; gap: 1.1rem; }
.lead-pitch-steps li { display: flex; gap: 0.9rem; }
.lead-pitch-step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; font-size: 0.92rem; }
.lead-pitch-steps strong { display: block; margin-bottom: 0.2rem; }
.lead-pitch-steps p { font-size: 0.9rem; color: var(--muted); }
.lead-pitch-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1.4rem 0 0; }
.lead-pitch-pills li { background: var(--accent-soft); color: var(--accent-600); font-size: 0.8rem; font-weight: 700; padding: 0.4rem 0.9rem; border-radius: 999px; }
.price-lead { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); padding: 1.3rem 1.4rem; margin: 1.2rem 0; box-shadow: var(--shadow-soft); }
.price-lead-row { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.price-lead-figure { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.price-lead-badge { background: var(--ok); color: #fff; font-size: 0.74rem; font-weight: 700; padding: 0.32rem 0.75rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; }
.price-lead-sub { font-size: 0.88rem; color: var(--muted); margin-top: 0.7rem; }
.price-lead-link { font-weight: 700; }

.lead-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2.1rem; box-shadow: var(--shadow); }
.lead-card-head { margin-bottom: 1.4rem; }
.lead-card-title { font-size: 1.45rem; }
.lead-card-subtitle { color: var(--muted); font-size: 0.92rem; }
.lead-card-success { text-align: center; }
.lead-success-icon { width: 66px; height: 66px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; margin: 0 auto 1.2rem; }
.lead-success-title { font-size: 1.8rem; margin-bottom: 0.7rem; }
.lead-success-body { color: var(--muted); margin-bottom: 1.6rem; }
.lead-success-actions { display: flex; gap: 0.8rem; justify-content: center; }

.wizard-progress { margin-bottom: 1.6rem; }
.wizard-progress-track { height: 4px; background: var(--paper-3); border-radius: 999px; overflow: hidden; margin-bottom: 0.9rem; }
.wizard-progress-fill { height: 100%; background: var(--accent); transition: width 0.3s ease; }
.wizard-steps { display: flex; justify-content: space-between; }
.wizard-step { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; flex: 1; }
.wizard-step-circle { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-3); color: var(--muted); font-weight: 700; font-size: 0.85rem; }
.wizard-step.active .wizard-step-circle { background: var(--accent); color: #fff; }
.wizard-step.completed .wizard-step-circle { background: var(--ok); color: #fff; }
.wizard-step-label { font-size: 0.76rem; color: var(--muted); }
.wizard-step.active .wizard-step-label { color: var(--text); font-weight: 700; }

.form-group { margin-bottom: 1.1rem; }
.form-label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.4rem; }
.form-control, .form-select { width: 100%; font-family: var(--font-body); font-size: 0.95rem; padding: 0.78rem 0.95rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--text); }
.form-control:focus, .form-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-control-sm, .form-select-sm { padding: 0.5rem 0.7rem; font-size: 0.88rem; }
.lead-form-textarea { resize: vertical; }
.phone-input-group { display: flex; gap: 0.5rem; }
.phone-country-code { width: 110px; flex: none; }
.lead-form-help, .lead-form-optional { font-size: 0.82rem; color: var(--muted); }
.feature-interest { display: grid; gap: 0.7rem; }
.feature-interest-row { border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 0.9rem 1rem; transition: border-color 0.18s ease, background 0.18s ease; }
.feature-interest-row.is-active { border-color: var(--accent); background: var(--accent-soft); }
.feature-interest-check { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; cursor: pointer; }
.feature-interest-detail { margin-top: 0.7rem; }
.feature-interest-sub-label { font-size: 0.82rem; font-weight: 700; display: block; margin-bottom: 0.4rem; }
.feature-interest-platforms, .feature-interest-yesno { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.feature-interest-pill { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; padding: 0.4rem 0.9rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); cursor: pointer; }
.feature-interest-pill.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.feature-interest-note { font-size: 0.85rem; color: var(--muted); }
.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.4rem; }
.lead-submit-btn { width: 100%; margin-top: 1rem; }
.validation-summary { margin-top: 1rem; }
.validation-error, .lead-alert { background: #FDE7EB; color: #B80020; font-size: 0.86rem; padding: 0.6rem 0.9rem; border-radius: var(--r-sm); margin-top: 0.5rem; }

/* legal pages */
.legal { padding-block: clamp(3rem, 7vw, 5rem); }
.legal .container { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.4rem; }
.legal h2 { font-size: 1.4rem; margin: 2rem 0 0.7rem; }
.legal p, .legal li { color: var(--muted); margin-bottom: 0.8rem; }

.headline { font-family: var(--font-display); }
.title { font-family: var(--font-display); }
.body { font-family: var(--font-body); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 980px) {
  .solution-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps, .channels, .trust-grid, .kb-grid { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2)::after { content: none; }
  .lead-layout { grid-template-columns: 1fr; }
  .callproof, .uc-block { grid-template-columns: 1fr; }
  .uc-block.reverse .uc-media { order: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav-links, .nav-actions { display: none; }
  .nav-burger { display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 0.4rem; margin-left: auto; }
  .nav-burger span { width: 26px; height: 2px; background: var(--ink); display: block; transition: transform 0.2s ease, opacity 0.2s ease; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-mobile-panel { display: none; position: absolute; top: 74px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 1.2rem var(--gutter); max-height: 80vh; overflow-y: auto; }
  .nav-toggle:checked ~ .nav-mobile-panel { display: block; }
  .nav-mobile-panel a { display: block; color: var(--ink); padding: 0.7rem 0; font-weight: 600; border-bottom: 1px solid var(--line); }
  .nav-mobile-panel .nav-mobile-uc-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-top: 1rem; }
  .nav-mobile-panel .cta { width: 100%; margin-top: 1rem; display: flex; }
  /* Use Cases collapses in the mobile panel (see js/nav-mobile-uc.js). */
  .nav-mobile-uc-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; text-align: left; background: none; border: 0;
    color: var(--ink); padding: 0.7rem 0; font: inherit; font-weight: 600;
    border-bottom: 1px solid var(--line); cursor: pointer;
  }
  .nav-mobile-uc-toggle::after {
    content: ""; flex: none; width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 6px solid currentColor; opacity: 0.55;
    transition: transform .25s ease;
  }
  .nav-mobile-uc-toggle.open::after { transform: rotate(180deg); }
  .nav-mobile-uc { display: none; padding-left: 0.2rem; }
  .nav-mobile-uc.open { display: block; }
}

@media (max-width: 640px) {
  :root { --gutter: 1.2rem; }
  .section { padding-block: 3.4rem; }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .hero .lead, .lead { font-size: 1rem; }
  .solution-grid, .testimonials, .steps, .channels, .trust-grid, .kb-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 1.4rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .step { padding-right: 0; }
  .step::after { content: none !important; }
  .hero-trust, .callproof-snippet, .callproof p.lead { display: none; }

  [data-carousel-track] {
    display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0.9rem; padding-bottom: 0.25rem;
  }
  [data-carousel-track]::-webkit-scrollbar { display: none; }
  [data-carousel-track] > * { flex: 0 0 86%; scroll-snap-align: start; opacity: 1 !important; transform: none !important; }
  .carousel-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.4rem; }
  .carousel-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); color: var(--text); display: grid; place-items: center; cursor: pointer; }
  .carousel-arrow:disabled { opacity: 0.4; }
  .carousel-dots { display: flex; gap: 0.5rem; align-items: center; }
  .carousel-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; padding: 0; }
  .carousel-dot.active { background: var(--accent); transform: scale(1.3); }
}

/* ===== Accessibility: designed keyboard focus (WCAG 2.2 AA) ===== */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
a:focus-visible,
button:focus-visible,
.nav-uc-trigger:focus-visible,
.uc-row:focus-visible,
[data-demo-link]:focus-visible,
.carousel-arrow:focus-visible,
.carousel-dot:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* form fields keep their designed accent-soft ring, no double outline */
.form-control:focus-visible,
.form-select:focus-visible { outline: none; }

/* Links inside prose must not rely on colour alone (WCAG 1.4.1) */
.blog-p a, .blog-list a, .blog-faq-a a, .answers-body a, .answers-sources a,
.legal-body a, .geo-body a, main p a, main li a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
main p a.btn, main li a.btn, main p a.button, .btn a, a.btn { text-decoration: none; }

/* ==========================================================================
   Mobile pass: the Knowledge Base ran 2.9 phone screens, because each card
   stacked a 150px photo on top of its text (6 cards = 1,590px).
   On phones the card becomes a row: a slim photo beside the copy. Nothing is
   hidden and nothing moves sideways.
   PHONE ONLY. Desktop is untouched.
   ========================================================================== */
@media (max-width: 640px) {
    .kb-card { display: flex; flex-direction: row; align-items: stretch; }
    .kb-card-banner { height: auto; flex: 0 0 104px; }
    .kb-card-body {
        padding: var(--s-16, 1rem);
        display: flex; flex-direction: column; justify-content: center; gap: 0.3rem;
    }
    .kb-card:hover .kb-card-banner,
    .kb-card:focus-within .kb-card-banner { transform: none; }
}

/* The nav CTA renders as a button (the .nav-uc-trigger / nav link reset was winning). */
.site-nav .cta-nav, .nav-links .cta-nav { background: var(--cta-bg, var(--hot, #E4002B)); color: #fff; border-radius: 999px; padding: 0.5rem 1.05rem; }


/* --- Endorsement line: "A Kwick Blocks product" under the brand name --- */
.brand-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.brand-sub {
    font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 3px;
}


/* ---------------------------------------------------------------------------
   Mobile: Use Cases and Blogs are accordions, driven purely by the .open class
   (js/nav-menu-collapse.js toggles it on tap). The open rule is !important so it
   reliably beats the collapsed rule even under the sticky :hover/:focus a tap
   leaves on a touch device; no :hover/:focus variants are needed here.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .nav-uc .uc-megamenu,
    .nav-uc .nav-uc-panel {
        /* Force off the desktop centring transform/position. A tap leaves a sticky
           :focus that re-fires the desktop `.nav-uc:focus-within .uc-megamenu`
           rule (transform: translateX(-50%)), which shifted the panel off the
           left edge on mobile. */
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        padding-top: 0;
        transition: max-height 280ms cubic-bezier(.25,1,.5,1),
                    opacity 280ms cubic-bezier(.25,1,.5,1);
    }
    .nav-uc.open .uc-megamenu,
    .nav-uc.open .nav-uc-panel {
        max-height: 70vh !important;
        overflow-y: auto;
        opacity: 1 !important;
        visibility: visible !important;
        padding-top: 12px;
    }
    .nav-uc .nav-uc-caret,
    .nav-uc .chev { transition: transform .25s ease; }
    .nav-uc.open .nav-uc-caret,
    .nav-uc.open .chev { transform: rotate(180deg); }
}

/* The demo name in "How It Works" links to the portal. Decorated as a bold,
   underlined inline link in the current text colour, so it is clearly a link
   and stays legible on any section background, light or dark. */
.hiw-demo-link {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
}
.hiw-demo-link:hover,
.hiw-demo-link:focus-visible { text-decoration-thickness: 3px; }

/* The global `main li a { text-decoration: underline }` body-link style also
   caught the mobile mega-menu rows (they are <li><a> inside <main>), underlining
   every menu item. Menu rows are never body links: unset it. */
.uc-megamenu a,
.uc-megamenu .uc-row,
.nav-uc-panel a,
.nav-uc-panel .uc-row { text-decoration: none; }

/* ─────────────────────────────────────────────────────────────
   Get Started (formerly How It Works)
   The inline "Your AI agent" link wears the site's own primary CTA classes,
   so it inherits the brand fill and states. These rules only pull it back to
   the lead's size so it sits inside the sentence instead of breaking the
   line box. Keep them after the .cta / .btn rules they override.
   ───────────────────────────────────────────────────────────── */
.gs-agent-cta {
    display: inline-block;
    vertical-align: baseline;
    min-height: 0;
    padding: 0.08em 0.4em;
    gap: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
}

/* Reconciles the minutes-ready workspace with the stepper's "An initial chat". */
.gs-bridge {
    margin: 0 0 2rem;
    font-weight: 600;
}

.gs-cta-row {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

/* The bridging line sits directly under the head, and not every head carries a
   bottom margin of its own (Hospitality's is 0), so the line butts into the last
   paragraph. Own the separation here rather than depend on the theme. */
#get-started :is(.section-head, .solution-head, .flow-head) {
    margin-bottom: 2.5rem;
}

/* Get Started header, two-up (wide viewports only).
   Stacked in one column, with the headline capped near 22ch and the lead at a
   single measure, the header left the right half of the band empty. Headline
   goes left, lead + meta right.

   The WHOLE block sits inside a min-width query on purpose. Below it, nothing
   here applies and the header keeps the theme's own stacked layout, gap and
   caps untouched. An earlier version overrode the header at every width and
   switched back to flex in a max-width query, which left `row-gap: 0` applying
   on mobile: that killed the theme's gap and the headline sat touching the
   lead. Do not lift these rules out of the query.

   Two traps inside the grid:
   - row-gap must be 0. The headline spans the right column's rows, so any
     row-gap is multiplied by that span and reopens a hole under the header.
     The elements' own margins do the vertical spacing instead.
   - max-width: none is required. Some heads carry their own narrow max-width;
     left in place, the grid splits THAT width into two cramped columns while
     the band stays half empty. The measure is held per column instead. */
@media (min-width: 901px) {
    #get-started :is(.section-head, .solution-head, .flow-head) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        column-gap: clamp(2rem, 4vw, 4rem);
        row-gap: 0;
        align-items: start;
        max-width: none;
    }

    #get-started :is(.section-head, .solution-head, .flow-head) > .eyebrow {
        grid-column: 1 / -1;
        margin-bottom: 1rem;
    }

    #get-started :is(.section-head, .solution-head, .flow-head) > :is(h2, .headline, .section-title) {
        grid-column: 1;
        grid-row: 2 / span 24;
        max-width: 16ch;
        align-self: start;
        margin-top: 0;
    }

    #get-started :is(.section-head, .solution-head, .flow-head) > *:not(.eyebrow):not(h2) {
        grid-column: 2;
        max-width: 64ch;
    }
}

/* Stacked (narrow) header spacing.
   The themes disagree about how the head spaces its children: some are flex or
   grid with a gap, some are block relying on the children's own margins, and a
   few had NO spacing at all, leaving the headline touching the lead. Rather
   than inherit three different results, neutralise the gap AND the children's
   margins, then space them uniformly. Works the same whether the head computes
   to flex, grid or block, so it cannot double up with a theme's gap. */
@media (max-width: 900px) {
    #get-started :is(.section-head, .solution-head, .flow-head) {
        row-gap: 0;
    }

    #get-started :is(.section-head, .solution-head, .flow-head) > * {
        margin-top: 0;
        margin-bottom: 0;
    }

    #get-started :is(.section-head, .solution-head, .flow-head) > * + * {
        margin-top: 1rem;
    }
}