/* ============================================================
   The Vulcanised Letter
   Design system for KwickBlocks Ryku.Ai
   Deep vulcan-oxblood primary, carbon-graphite ink, warm bone,
   one molten-amber accent. (Structural class names from the
   reference are retained - e.g. .panel-cobalt now carries the
   oxblood primary - so layout is reused and only colour shifts.)
   ============================================================ */

/* ------------------------------------------------------------
   Tokens
   ------------------------------------------------------------ */
:root {
    /* Colour: vulcan-oxblood primary, molten-amber hot accent, warm
       carbon neutrals. OKLCH; chroma kept restrained to read as material,
       not alarm. (--cobalt* names retained from the reference scaffold.) */
    --cobalt:        oklch(34% 0.105 25);    /* vulcan oxblood - load-bearing */
    --cobalt-deep:   oklch(26% 0.090 25);    /* pressed / deeper panel */
    --cobalt-bright: oklch(52% 0.150 30);    /* link, hairline accent */

    --ink:           oklch(16% 0.012 40);    /* carbon-graphite dark surface */
    --ink-elev:      oklch(21% 0.014 40);    /* lifted ink (product frame) */
    --ink-line:      oklch(29% 0.016 40);    /* hairline on ink */

    --chalk:         oklch(96.5% 0.007 75);  /* warm bone light surface */
    --chalk-deep:    oklch(92% 0.010 75);    /* bone pressed */

    --hot:           oklch(70% 0.165 60);    /* molten amber, the alarm bell */
    --hot-deep:      oklch(60% 0.170 55);    /* hot pressed */
    --hot-bright:    oklch(80% 0.150 62);    /* AA-safe amber for SMALL text on the oxblood/ink panels (>=4.5:1) */
    --text-on-hot:   oklch(20% 0.045 50);    /* burnt-dark text for amber fills (>=4.5:1 vs --hot) */

    /* Text on each surface */
    --text-on-chalk:       oklch(19% 0.013 40);
    --text-on-chalk-soft:  oklch(38% 0.012 40);
    --text-on-cobalt:      oklch(97% 0.008 80);
    --text-on-cobalt-soft: oklch(86% 0.020 40);
    --text-on-ink:         oklch(95% 0.008 80);
    --text-on-ink-soft:    oklch(74% 0.016 50);

    /* Hairlines */
    --line-on-chalk:  oklch(34% 0.08 30 / 0.18);
    --line-on-cobalt: oklch(97% 0.006 80 / 0.18);
    --line-on-ink:    oklch(97% 0.006 80 / 0.14);

    /* Spacing scale: 4pt base */
    --s-4:   0.25rem;
    --s-8:   0.5rem;
    --s-12:  0.75rem;
    --s-16:  1rem;
    --s-24:  1.5rem;
    --s-32:  2rem;
    --s-48:  3rem;
    --s-64:  4rem;
    --s-96:  6rem;
    --s-128: 8rem;
    --s-160: 10rem;

    /* Type. Switzer (Fontshare) for display + body; Geist Mono for numbers,
       labels, and product-frame UI. system-ui fallbacks are metric-near. */
    --font-sans: "Switzer", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

    /* Motion */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-feedback:   140ms;
    --dur-state:      220ms;
    --dur-reveal:     720ms;

    /* Page measure */
    --column:    65ch;
    --column-wide: 75ch;

    /* Component shadows (only on product frames + CTA active) */
    --frame-shadow:  0 24px 60px oklch(15% 0.02 40 / 0.32),
                     0 4px 14px  oklch(15% 0.02 40 / 0.18);
    --frame-shadow-hover: 0 32px 72px oklch(15% 0.02 40 / 0.38),
                          0 6px 16px  oklch(15% 0.02 40 / 0.22);
    --cta-shadow-active: inset 0 2px 4px oklch(15% 0.02 40 / 0.28);
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.55;
    font-kerning: normal;
    font-optical-sizing: auto;
    background: var(--chalk);
    color: var(--text-on-chalk);
    text-rendering: optimizeLegibility;
}

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

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

::selection {
    background: var(--cobalt);
    color: var(--text-on-cobalt);
}

/* ------------------------------------------------------------
   Skip link
   ------------------------------------------------------------ */
.skip-link {
    position: absolute;
    left: var(--s-16);
    top: var(--s-16);
    padding: var(--s-12) var(--s-16);
    background: var(--ink);
    color: var(--text-on-ink);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur-state) var(--ease-out-quart);
    z-index: 100;
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--hot);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   Panels (the alternating composition)
   ------------------------------------------------------------ */
.panel {
    position: relative;
    width: 100%;
    padding-block: var(--s-96);
    padding-inline: var(--s-24);
    overflow: hidden;
}

.panel-cobalt {
    background: var(--cobalt);
    color: var(--text-on-cobalt);
}

.panel-chalk {
    background: var(--chalk);
    color: var(--text-on-chalk);
}

.panel-ink {
    background: var(--ink);
    color: var(--text-on-ink);
}

.panel-hero {
    padding-block: var(--s-64) var(--s-96);
    min-height: min(92vh, 880px);
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.panel-final {
    padding-block: var(--s-128);
}

/* On large screens, give panels more breathing room */
@media (min-width: 1024px) {
    .panel { padding-inline: var(--s-48); padding-block: var(--s-128); }
    .panel-hero { padding-block: var(--s-48) var(--s-128); }
}

/* The 75ch text column, lives inside any panel */
.column {
    width: 100%;
    max-width: var(--column-wide);
    margin-inline: auto;
}

.column-narrow {
    width: 100%;
    max-width: var(--column);
    margin-inline: auto;
}

/* Wider container for non-text content (frames, two-up layouts) */
.container {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
}

/* ------------------------------------------------------------
   Typography utilities
   ------------------------------------------------------------ */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: currentColor;
    opacity: 0.8;
}

.panel-chalk .eyebrow { opacity: 0.7; }

.display {
    font-family: var(--font-sans);
    font-size: clamp(2.75rem, 4.5vw + 1.25rem, 5.5rem);
    font-weight: 600;
    line-height: 0.97;
    letter-spacing: -0.035em;
    text-wrap: balance;
    margin: 0;
}

.headline {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 2.5vw + 1rem, 3.25rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
    margin: 0;
}

.title {
    font-family: var(--font-sans);
    font-size: clamp(1.375rem, 0.6vw + 1.2rem, 1.75rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.012em;
    text-wrap: balance;
    margin: 0;
}

.body {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-on-chalk-soft);
    max-width: var(--column);
    text-wrap: pretty;
    margin: 0;
}

.panel-cobalt .body { color: var(--text-on-cobalt-soft); }
.panel-ink    .body { color: var(--text-on-ink-soft); }

.body + .body { margin-top: var(--s-16); }

.lead {
    font-size: clamp(1.125rem, 0.4vw + 1.05rem, 1.375rem);
    line-height: 1.5;
    font-weight: 400;
    text-wrap: pretty;
    max-width: 60ch;
    margin: 0;
}

.panel-cobalt .lead { color: var(--text-on-cobalt-soft); }

/* Hot accent inline emphasis */
.hot {
    color: var(--hot);
}

.panel-cobalt .hot,
.panel-ink    .hot {
    /* slightly lifted hot for dark surfaces to keep contrast */
    color: oklch(68% 0.20 28);
}

/* ------------------------------------------------------------
   Links (text)
   ------------------------------------------------------------ */
a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color var(--dur-feedback) var(--ease-out-quart),
                border-color var(--dur-feedback) var(--ease-out-quart);
}

a:hover,
a:focus-visible {
    color: var(--hot);
    border-bottom-color: var(--hot);
}

.panel-cobalt a:hover,
.panel-cobalt a:focus-visible,
.panel-ink    a:hover,
.panel-ink    a:focus-visible {
    color: oklch(72% 0.19 28);
    border-bottom-color: oklch(72% 0.19 28);
}

a:focus-visible {
    outline: 2px solid var(--hot);
    outline-offset: 4px;
    border-bottom-color: transparent;
}

/* ------------------------------------------------------------
   Nav (sits over the hero panel)
   ------------------------------------------------------------ */
.site-nav {
    grid-row: 1;
    width: 100%;
    z-index: 5;
}

.nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-16);
    max-width: 1240px;
    margin-inline: auto;
    padding-block: var(--s-12);
}

.brand-mark {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s-12);
    text-decoration: none;
    border-bottom: none;
    color: currentColor;
}

.brand-mark:hover,
.brand-mark:focus-visible {
    color: currentColor;
    border-bottom: none;
}

.brand-logo {
    height: 34px;
    width: auto;
    flex: 0 0 auto;
    display: block;
}

.brand-lockup {
    display: inline-flex;
    flex-direction: column;
}

.brand-name {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -0.02em;
    line-height: 1;
}

.brand-dot {
    color: var(--hot);
}

.panel-cobalt .brand-dot,
.panel-ink    .brand-dot {
    color: oklch(72% 0.19 28);
}

.brand-sub {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 2px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--s-24);
}

.nav-link {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: none;
    padding: var(--s-8) var(--s-4);
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--hot);
    border-bottom: none;
}

.panel-cobalt .nav-link:hover,
.panel-cobalt .nav-link:focus-visible {
    color: oklch(72% 0.19 28);
}

/* On very small screens, hide the anchor nav link; keep only brand + CTA */
@media (max-width: 540px) {
    .nav-link.nav-anchor { display: none; }
}

/* ------------------------------------------------------------
   CTAs
   ------------------------------------------------------------ */
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-8);
    padding: var(--s-12) var(--s-24);
    min-height: 44px;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: background var(--dur-state) var(--ease-out-quart),
                color var(--dur-state) var(--ease-out-quart),
                border-color var(--dur-state) var(--ease-out-quart),
                box-shadow var(--dur-feedback) var(--ease-out-quart),
                transform var(--dur-feedback) var(--ease-out-quart);
}

.cta-primary {
    background: var(--hot);
    color: var(--text-on-hot);
    border-color: var(--hot);
}

.cta-primary:hover,
.cta-primary:focus-visible {
    background: var(--hot-deep);
    border-color: var(--hot-deep);
    color: var(--text-on-hot);
    border-bottom: 1px solid var(--hot-deep);
}

.cta-primary:active {
    box-shadow: var(--cta-shadow-active);
    transform: translateY(1px);
}

.cta-secondary {
    background: transparent;
    color: currentColor;
    border-color: var(--line-on-cobalt);
}

.panel-cobalt .cta-secondary {
    border-color: var(--line-on-cobalt);
    color: var(--text-on-cobalt);
}

.panel-chalk .cta-secondary {
    border-color: var(--line-on-chalk);
    color: var(--text-on-chalk);
}

.cta-secondary:hover,
.cta-secondary:focus-visible {
    background: oklch(97% 0.006 80 / 0.08);
    border-color: currentColor;
    color: currentColor;
    border-bottom: 1px solid currentColor;
}

.panel-chalk .cta-secondary:hover,
.panel-chalk .cta-secondary:focus-visible {
    background: oklch(15% 0.012 30 / 0.06);
    border-color: var(--text-on-chalk);
    color: var(--text-on-chalk);
    border-bottom: 1px solid var(--text-on-chalk);
}

.cta-nav {
    padding: var(--s-8) var(--s-16);
    min-height: 36px;
}

.cta:focus-visible {
    outline: 2px solid var(--hot);
    outline-offset: 3px;
    border-bottom: 1px solid transparent;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-12);
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero-body {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-32);
    padding-block: var(--s-48);
    max-width: 1240px;
    margin-inline: auto;
    width: 100%;
}

.hero-eyebrow {
    margin: 0;
}

.hero-display {
    max-width: 22ch;
}

.hero-lead {
    max-width: 56ch;
}

@media (min-width: 1024px) {
    .hero-body { gap: var(--s-48); padding-block: var(--s-64) 0; }
}

/* ------------------------------------------------------------
   Hero background video
   The cobalt panel colour stays as the underlying fallback; the
   video covers it, and a cobalt wash sits on top to keep the white
   headline + CTAs legible and on-brand.
   ------------------------------------------------------------ */
.panel-hero {
    /* own stacking context so the video/tint z-indexes stay local */
    isolation: isolate;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    /* hidden until it can paint a frame; poster shows meanwhile */
    background: var(--cobalt);
}

/* Text-only scrims: the footage keeps its true colour; we only darken
   behind the nav and behind the headline/CTA block so the white type
   stays legible over bright frames. */

/* Nav scrim - a soft wash down from the very top, fading to nothing */
.panel-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 220px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        oklch(15% 0.012 30 / 0.55) 0%,
        oklch(15% 0.012 30 / 0) 100%);
}

/* Headline/CTA scrim - a soft pool anchored to the left text column,
   fading out toward the right and the vertical edges. The small inline
   padding keeps the text off the scrim/box edge so glyphs aren't flush. */
.hero-body {
    background: radial-gradient(125% 105% at 0% 50%,
        oklch(15% 0.012 30 / 0.62) 0%,
        oklch(15% 0.012 30 / 0.30) 42%,
        oklch(15% 0.012 30 / 0) 72%);
    padding-inline: 5px;
}

/* Lift the actual hero content above the video + scrims */
.panel-hero > .site-nav,
.panel-hero > .hero-body {
    position: relative;
    z-index: 2;
}

/* Keep the nav (and its Use Cases dropdown) above the hero headline so the
   menu panel sits on top and its items stay clickable. */
.panel-hero > .site-nav { z-index: 4; }

/* Respect reduced-motion: no autoplaying video, poster/cobalt only */
@media (prefers-reduced-motion: reduce) {
    .hero-video { display: none; }
}

/* ------------------------------------------------------------
   Section heads (used across all numbered sections)
   ------------------------------------------------------------ */
.section-head {
    display: flex;
    flex-direction: column;
    gap: var(--s-16);
    max-width: 1240px;
    margin-inline: auto;
    margin-bottom: var(--s-48);
}

.section-head .eyebrow {
    margin: 0;
}

.section-head .headline {
    max-width: 22ch;
}

.section-head .body {
    max-width: 56ch;
}

@media (min-width: 768px) {
    .section-head { gap: var(--s-24); margin-bottom: var(--s-64); }
}

/* ------------------------------------------------------------
   Shift number callout (the highlighted numeric in The Shift)
   ------------------------------------------------------------ */
.shift-stat {
    display: flex;
    flex-direction: column;
    gap: var(--s-8);
    margin-top: var(--s-48);
    padding-block: var(--s-32);
    border-top: 1px solid var(--line-on-chalk);
    border-bottom: 1px solid var(--line-on-chalk);
}

.shift-stat-num {
    font-family: var(--font-sans);
    font-size: clamp(3rem, 4vw + 1.5rem, 5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--hot);
    font-variant-numeric: tabular-nums;
}

.shift-stat-label {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text-on-chalk);
    max-width: 36ch;
    margin: 0;
}

.shift-stat-source {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    color: var(--text-on-chalk-soft);
    margin-top: var(--s-8);
}

/* ------------------------------------------------------------
   Proof pull-quotes
   ------------------------------------------------------------ */
.pull-quote {
    margin: 0;
    max-width: 36ch;
}

.pull-quote-body {
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2.125rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--text-on-chalk);
    margin: 0;
    text-wrap: balance;
}

.pull-quote-attrib {
    display: block;
    margin-top: var(--s-24);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-on-chalk-soft);
    font-style: normal;
}

.pull-quote-attrib strong {
    color: var(--text-on-chalk);
    font-weight: 500;
}

.panel-cobalt .pull-quote-body { color: var(--text-on-cobalt); }
.panel-cobalt .pull-quote-attrib { color: var(--text-on-cobalt-soft); }
.panel-cobalt .pull-quote-attrib strong { color: var(--text-on-cobalt); }

.proof-row {
    display: grid;
    gap: var(--s-48);
    max-width: 1240px;
    margin-inline: auto;
}

@media (min-width: 760px) {
    .proof-row { grid-template-columns: 1fr 1fr; gap: var(--s-48); }
}

@media (min-width: 1024px) {
    .proof-row { gap: var(--s-96); }
}

/* ------------------------------------------------------------
   Final CTA
   ------------------------------------------------------------ */
.final-cta {
    display: flex;
    flex-direction: column;
    gap: var(--s-32);
    align-items: flex-start;
    max-width: 980px;
    margin-inline: auto;
}

.final-cta .display {
    max-width: 18ch;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.site-footer {
    background: var(--ink);
    color: var(--text-on-ink-soft);
    padding: var(--s-32) var(--s-24);
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-16);
    max-width: 1240px;
    margin-inline: auto;
}

.footer-brand {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-on-ink);
    letter-spacing: -0.02em;
}

.footer-built {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-12) var(--s-24);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.footer-links a {
    border-bottom: none;
    padding: var(--s-4) 0;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--hot);
}

.footer-copyright {
    color: var(--text-on-ink-soft);
    opacity: 0.7;
}

/* Powered-by credit - replaces the old "Built in the UK" tag in the
   footer row; links back to KwickBlocks. */
.footer-powered {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-on-ink-soft);
}

.footer-powered a {
    color: var(--hot);
    border-bottom: none;
    font-weight: 600;
}

.footer-powered a:hover,
.footer-powered a:focus-visible {
    color: var(--hot-deep);
    text-decoration: underline;
}

/* Accreditations band - a quiet mono row in the site footer naming the
   precision-manufacturing standards the Knowledge Base is built around. */
.accreditations-band {
    max-width: 1240px;
    margin: var(--s-24) auto 0;
    padding-top: var(--s-16);
    border-top: 1px solid var(--ink-line);
}

/* Footer bottom strip - required three-part layout: copyright (left),
   an inspiring one-line quote (centre), and the Kwick Blocks credit (right). */
.footer-strip {
    max-width: 1240px;
    margin: var(--s-24) auto 0;
    padding-top: var(--s-16);
    border-top: 1px solid var(--ink-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-8) var(--s-16);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.footer-strip .footer-copyright { text-transform: uppercase; }

.footer-quote {
    flex: 1 1 auto;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
    text-transform: none;
    font-style: italic;
    color: var(--text-on-ink-soft);
    opacity: 0.85;
}

@media (max-width: 720px) {
    .footer-strip { justify-content: center; text-align: center; }
    .footer-quote { flex-basis: 100%; order: 3; }
}

.accreditations-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-on-ink-soft);
    opacity: 0.75;
    margin: 0 0 var(--s-8);
}

.accreditations-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-8) var(--s-16);
    list-style: none;
    margin: 0;
    padding: 0;
}

.accreditations-list li {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--text-on-ink-soft);
}

@media (min-width: 1024px) {
    .site-footer { padding: var(--s-48); }
}

/* ------------------------------------------------------------
   Stub pages (Privacy, Terms, 404)
   ------------------------------------------------------------ */
.page-mini-hero {
    padding-block: var(--s-32) var(--s-32);
    padding-inline: var(--s-24);
    background: var(--cobalt);
    color: var(--text-on-cobalt);
}

@media (min-width: 1024px) {
    .page-mini-hero { padding-block: var(--s-48); padding-inline: var(--s-48); }
}

.page-mini-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-16);
    max-width: 1240px;
    margin-inline: auto;
    padding-block: var(--s-12);
}

.page-mini-hero h1 {
    margin: var(--s-32) 0 0;
    max-width: 1240px;
    margin-inline: auto;
}

.legal-body {
    padding-block: var(--s-64);
    padding-inline: var(--s-24);
}

.legal-body .column { display: flex; flex-direction: column; gap: var(--s-16); }

@media (min-width: 1024px) {
    .legal-body { padding-block: var(--s-96); padding-inline: var(--s-48); }
}

.error-actions {
    display: flex;
    gap: var(--s-12);
    margin-top: var(--s-32);
}

/* ------------------------------------------------------------
   Knowledge Base: the foundation strip
   ------------------------------------------------------------ */
.kb-foundation {
    display: grid;
    gap: var(--s-16);
    grid-template-columns: 1fr;
    max-width: 1240px;
    margin-inline: auto;
    margin-bottom: var(--s-64);
    padding: var(--s-24);
    border: 1px solid var(--line-on-cobalt);
    border-radius: 4px;
    background: var(--cobalt-deep);
}

@media (min-width: 760px) {
    .kb-foundation {
        grid-template-columns: auto 1fr;
        gap: var(--s-48);
        align-items: center;
        padding: var(--s-32) var(--s-48);
    }
}

.kb-foundation-core {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-16) var(--s-24);
    border: 1px solid var(--cobalt-bright);
    border-radius: 3px;
    background: var(--cobalt);
    white-space: nowrap;
}

.kb-foundation-core-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-on-cobalt-soft);
}

.kb-foundation-core-name {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    color: var(--text-on-cobalt);
}

.kb-foundation-channels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-8) var(--s-24);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    color: var(--text-on-cobalt-soft);
}

.kb-foundation-channels li {
    display: flex;
    align-items: center;
    gap: var(--s-8);
    list-style: none;
}

.kb-foundation-channels li::before {
    content: "";
    width: 5px;
    height: 5px;
    background: oklch(72% 0.19 28);
    border-radius: 50%;
    flex-shrink: 0;
}

.kb-foundation-channels {
    margin: 0;
    padding: 0;
}

/* Lifecycle phases: a chapter divider, then its use-case rows */
.kb-phase + .kb-phase { margin-top: var(--s-32); }

.phase-header {
    max-width: 1240px;
    margin-inline: auto;
    padding-block: var(--s-64) var(--s-24);
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
}

.phase-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hot-bright); /* lightened amber: >=4.5:1 small text on the oxblood panel */
}

.phase-line {
    font-family: var(--font-sans);
    font-size: clamp(1.375rem, 0.8vw + 1.1rem, 1.875rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--text-on-cobalt);
    max-width: 32ch;
    margin: 0;
    text-wrap: balance;
}

/* ------------------------------------------------------------
   Knowledge Base use-case tiles
   Each phase header is followed by a row of image tiles. The image
   carries the title; hovering (or focusing) a tile reveals the body.
   The grid is asymmetric on desktop: the phase's lead tile is larger,
   which breaks the uniform-card look. Photos are optional: a missing
   image falls back to the cobalt panel.
   ------------------------------------------------------------ */
.kb-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-12);
    margin-top: var(--s-24);
    max-width: 1240px;
    margin-inline: auto;
}

/* Asymmetric feature layout on desktop; tiles stack 1-up on mobile. */
@media (min-width: 860px) {
    .kb-tiles > .kb-tile { min-height: 0; height: 100%; }

    /* 3-tile phase: a tall lead tile on the left, two stacked on the right */
    .kb-tiles-3 {
        grid-template-columns: 1.45fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: 580px;
    }
    .kb-tiles-3 > .kb-tile:first-child { grid-row: 1 / span 2; }

    /* 2-tile phase: a wide lead tile beside a narrower one */
    .kb-tiles-2 {
        grid-template-columns: 1.5fr 1fr;
        height: 480px;
    }
    /* mirror the lead to the right on alternating phases for rhythm */
    .kb-tiles-2.kb-tiles-mirror { grid-template-columns: 1fr 1.5fr; }
    .kb-tiles-2.kb-tiles-mirror > .kb-tile:first-child { order: 2; }

    /* the lead tile carries a slightly larger title */
    .kb-tiles-3 > .kb-tile:first-child .kb-tile-title,
    .kb-tiles-2 > .kb-tile:first-child .kb-tile-title { font-size: 1.875rem; }
}

.kb-tile {
    position: relative;
    min-height: 420px;
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    background: var(--cobalt-deep); /* fallback behind the media layer */
    color: var(--text-on-cobalt);
    transition: transform var(--dur-state) var(--ease-out-quint),
                box-shadow var(--dur-state) var(--ease-out-quint);
}

.kb-tile:hover,
.kb-tile:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px oklch(13% 0.02 30 / 0.4);
}

/* Photo layer: a separate element (set per-tile via the inherited --kb-img)
   so the image can zoom on hover while the tile clips it to the rounded frame. */
.kb-tile-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--kb-img, none) center / cover no-repeat;
    transform-origin: center;
    transition: transform 600ms var(--ease-out-quint);
}

.kb-tile:hover .kb-tile-media,
.kb-tile:focus-within .kb-tile-media {
    transform: scale(1.05);
}

/* Legibility scrim, deepest at the foot where the text sits; deepens on reveal */
.kb-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        oklch(15% 0.02 30 / 0) 0%,
        oklch(15% 0.02 30 / 0.04) 42%,
        oklch(15% 0.02 30 / 0.32) 74%,
        oklch(13% 0.02 30 / 0.68) 100%);
    transition: opacity var(--dur-state) var(--ease-out-quart);
}

.kb-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    background: linear-gradient(180deg,
        oklch(30% 0.135 30 / 0.45) 0%,
        oklch(15% 0.02 30 / 0.78) 50%,
        oklch(12% 0.02 30 / 0.94) 100%);
    transition: opacity var(--dur-state) var(--ease-out-quart);
}

.kb-tile:hover::after,
.kb-tile:focus-within::after { opacity: 1; }

.kb-tile-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--s-12);
    padding: var(--s-32);
}

/* Corner affordance: an arrow that fades in on hover, signalling "there's more" */
.kb-tile-content::before {
    content: "\2197";
    position: absolute;
    top: var(--s-24);
    right: var(--s-24);
    font-family: var(--font-mono);
    font-size: 1.125rem;
    line-height: 1;
    color: var(--text-on-cobalt);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--dur-state) var(--ease-out-quint),
                transform var(--dur-state) var(--ease-out-quint);
    text-shadow: 0 1px 10px oklch(13% 0.02 30 / 0.6);
}

.kb-tile:hover .kb-tile-content::before,
.kb-tile:focus-within .kb-tile-content::before {
    opacity: 0.9;
    transform: none;
}

.kb-tile-tag {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(72% 0.19 28);
    text-shadow: 0 1px 8px oklch(13% 0.02 30 / 0.6);
}

.kb-tile-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-on-cobalt);
    /* legibility insurance now the scrim is lighter */
    text-shadow: 0 1px 12px oklch(13% 0.02 30 / 0.7);
}

.kb-tile-rule {
    width: 40px;
    height: 2px;
    background: var(--hot);
}

/* Body reveal via grid-rows (the sanctioned no-layout-jank technique) */
.kb-tile-reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-state) var(--ease-out-quint);
}

.kb-tile:hover .kb-tile-reveal,
.kb-tile:focus-within .kb-tile-reveal {
    grid-template-rows: 1fr;
}

.kb-tile-body {
    overflow: hidden;
    margin: 0;
    max-width: 42ch;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-on-cobalt-soft);
    opacity: 0;
    transition: opacity var(--dur-state) var(--ease-out-quint);
}

.kb-tile:hover .kb-tile-body,
.kb-tile:focus-within .kb-tile-body { opacity: 1; }

.kb-tile:focus-visible {
    outline: 2px solid var(--hot);
    outline-offset: 3px;
}

/* Touch / no-hover devices: show the body, no hover to rely on */
@media (hover: none) {
    .kb-tile-reveal { grid-template-rows: 1fr; }
    .kb-tile-body { opacity: 1; }
}

/* ------------------------------------------------------------
   Channels: four compact editorial rows (not a card grid)
   ------------------------------------------------------------ */
/* Four-column band: each channel is a compact column under a hairline rule.
   Wraps 4 -> 2 -> 1 so the rules stay clean at every width. */
.channels {
    max-width: 1240px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-24) var(--s-32);
}

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

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

.channel {
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
    padding-top: var(--s-16);
    border-top: 1px solid var(--line-on-chalk);
    align-items: start;
}

.channel-head {
    display: flex;
    flex-direction: column;
    gap: var(--s-8);
}

.channel-index {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-on-chalk-soft);
}

.channel-name {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--text-on-chalk);
    margin: 0;
}

.channel-desc {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-on-chalk-soft);
    text-wrap: pretty;
    margin: 0;
    max-width: 42ch;
}

/* ------------------------------------------------------------
   How it works - onboarding sequence
   Editorial, mono-indexed hairline rows. Deliberately NOT the
   circle-number "how it works" template (a named anti-reference).
   ------------------------------------------------------------ */

/* Horizontal stepper: four steps left-to-right under hairline rules, with a
   mono arrow connector in each gap (desktop). Stacks vertically on mobile. */
.steps {
    max-width: 1240px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-24) var(--s-32);
}

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

.step {
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
    padding-top: var(--s-16);
    border-top: 1px solid var(--line-on-chalk);
    align-items: start;
    position: relative;
}

@media (min-width: 768px) {
    .step:not(:last-child)::after {
        content: "\2192";                      /* → sequence connector */
        position: absolute;
        top: var(--s-12);
        right: calc(var(--s-32) / -2);
        transform: translateX(50%);
        font-family: var(--font-mono);
        font-size: 0.9rem;
        color: var(--text-on-chalk-soft);
        opacity: 0.55;
        pointer-events: none;
    }
}

.step-head {
    display: flex;
    flex-direction: column;
    gap: var(--s-8);
}

.step-index {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-on-chalk-soft);
}

.step-name {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--text-on-chalk);
    margin: 0;
}

.step-desc {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-on-chalk-soft);
    text-wrap: pretty;
    margin: 0;
    max-width: 42ch;
}

/* ------------------------------------------------------------
   Reveal-on-scroll
   ------------------------------------------------------------ */
/* Reveal-on-scroll is progressive: elements are visible by default (so
   SSR-only and no-JS users see the page intact); JS adds the .has-reveal
   class to opt into the animated entrance. */
[data-reveal] {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-reveal) var(--ease-out-quint),
                transform var(--dur-reveal) var(--ease-out-quint);
    transition-delay: var(--reveal-delay, 0ms);
}

.has-reveal [data-reveal]:not([data-reveal="shown"]) {
    opacity: 0;
    transform: translateY(16px);
}

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

    [data-reveal],
    .has-reveal [data-reveal]:not([data-reveal="shown"]) {
        opacity: 1;
        transform: none;
        transition: none;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ------------------------------------------------------------
   Print
   ------------------------------------------------------------ */
@media print {
    body { background: white; color: black; }
    .site-nav, .site-footer, .cta { display: none; }
}

@keyframes demo-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes demo-card-in {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 460px) {
}

/* ============================================================
   Lead form (/pricing, both ?intent= views)
   ============================================================ */

/* Thin cobalt band that carries the nav over the form page */
.lead-nav-band {
    padding-block: var(--s-12);
    min-height: 0;
}

@media (min-width: 1024px) {
    .lead-nav-band { padding-block: var(--s-12); }
}

.lead-section {
    padding-block: var(--s-64);
}

@media (min-width: 1024px) {
    .lead-section { padding-block: var(--s-96); }
}

/* Two-up: pitch on the left, form card on the right */
.lead-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-48);
    align-items: start;
}

@media (min-width: 920px) {
    .lead-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
        gap: var(--s-64);
    }
}

/* ---- Pitch column ---- */
.lead-pitch-eyebrow { margin: 0 0 var(--s-16); }

.lead-pitch-title {
    max-width: 18ch;
    margin: 0 0 var(--s-24);
}

.lead-pitch-lead {
    color: var(--text-on-chalk-soft);
    margin: 0 0 var(--s-24);
}

/* Price-lead - the standout "from £500" line shown on the /pricing page (both ?intent= views)
   so the entry price is visible before the visitor commits. */
.price-lead {
    margin: 0 0 var(--s-32);
    padding: var(--s-24);
    background: oklch(99% 0.004 75);
    border: 1px solid var(--line-on-chalk);
    border-left: 3px solid var(--hot);
    border-radius: 12px;
}

.price-lead-figure {
    margin: 0 0 var(--s-8);
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-on-chalk);
}

.price-lead-sub {
    margin: 0 0 var(--s-16);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-on-chalk-soft);
}

.price-lead-sub a {
    color: var(--cobalt-bright);
    font-weight: 500;
}

.price-lead-badge {
    display: inline-block;
    padding: var(--s-4) var(--s-12);
    background: var(--hot);
    color: oklch(20% 0.04 50);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
}

.lead-pitch-steps {
    list-style: none;
    margin: 0 0 var(--s-32);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-24);
}

.lead-pitch-steps li {
    display: flex;
    gap: var(--s-16);
    align-items: flex-start;
}

.lead-pitch-step-num {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    background: var(--cobalt);
    color: var(--text-on-cobalt);
}

.lead-pitch-steps strong {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

.lead-pitch-steps p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-on-chalk-soft);
}

.lead-pitch-pills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-8);
    margin: 0;
    padding: 0;
}

.lead-pitch-pills li {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--s-4) var(--s-12);
    border: 1px solid var(--line-on-chalk);
    border-radius: 999px;
    color: var(--text-on-chalk-soft);
}

/* ---- Form card ---- */
.lead-card {
    background: oklch(99% 0.003 80);
    border: 1px solid var(--line-on-chalk);
    border-radius: 8px;
    padding: var(--s-32);
    box-shadow: 0 12px 40px oklch(15% 0.02 30 / 0.08);
}

@media (min-width: 768px) {
    .lead-card { padding: var(--s-48); }
}

.lead-card-head { margin-bottom: var(--s-32); }

.lead-card-title { margin: 0 0 var(--s-8); }

.lead-card-subtitle {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-on-chalk-soft);
}

/* ---- Progress indicator ---- */
.wizard-progress { margin-bottom: var(--s-32); }

.wizard-progress-track {
    height: 3px;
    background: var(--chalk-deep);
    border-radius: 3px;
    margin-bottom: var(--s-16);
    overflow: hidden;
}

.wizard-progress-fill {
    height: 100%;
    background: var(--hot);
    border-radius: 3px;
    transition: width var(--dur-state) var(--ease-out-quart);
}

.wizard-steps {
    display: flex;
    justify-content: space-between;
    gap: var(--s-8);
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-8);
    flex: 1;
}

.wizard-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--line-on-chalk);
    background: var(--chalk);
    color: var(--text-on-chalk-soft);
    transition: all var(--dur-state) var(--ease-out-quart);
}

.wizard-step.active .wizard-step-circle {
    border-color: var(--hot);
    color: var(--hot);
    box-shadow: 0 0 0 3px oklch(58% 0.205 28 / 0.12);
}

.wizard-step.completed .wizard-step-circle {
    border-color: var(--hot);
    background: var(--hot);
    color: var(--text-on-ink);
}

.wizard-step-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-on-chalk-soft);
    text-align: center;
}

.wizard-step.active .wizard-step-label { color: var(--hot); }

/* ---- Form fields ---- */
.lead-form .form-group { margin-bottom: var(--s-24); }

.lead-form .form-label {
    display: block;
    margin-bottom: var(--s-8);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-on-chalk-soft);
}

.lead-form .form-control,
.lead-form .form-select {
    width: 100%;
    background: var(--chalk);
    border: 1px solid var(--line-on-chalk);
    border-radius: 4px;
    padding: var(--s-12) var(--s-16);
    font-size: 1rem;
    color: var(--text-on-chalk);
    transition: border-color var(--dur-feedback) var(--ease-out-quart),
                box-shadow var(--dur-feedback) var(--ease-out-quart);
}

.lead-form .form-control::placeholder { color: oklch(60% 0.012 30); }

.lead-form .form-control:focus,
.lead-form .form-select:focus {
    outline: none;
    border-color: var(--hot);
    box-shadow: 0 0 0 3px oklch(58% 0.205 28 / 0.14);
}

.lead-form .form-control:disabled,
.lead-form .form-select:disabled { opacity: 0.6; }

.lead-form .form-control-sm,
.lead-form .form-select-sm {
    padding: var(--s-8) var(--s-12);
    font-size: 0.9375rem;
}

.lead-form-textarea { resize: vertical; min-height: 120px; line-height: 1.5; }

.lead-form-help {
    margin: 0 0 var(--s-16);
    font-size: 0.875rem;
    color: var(--text-on-chalk-soft);
}

.lead-form-optional { text-transform: none; opacity: 0.7; }

.phone-input-group { display: flex; gap: var(--s-8); }
.phone-country-code { flex: 0 0 110px; }
.phone-number { flex: 1; }

/* ---- Channel interest ---- */
.feature-interest {
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
}

.feature-interest-row {
    border: 1px solid var(--line-on-chalk);
    border-radius: 6px;
    padding: var(--s-16);
    transition: border-color var(--dur-feedback) var(--ease-out-quart),
                background var(--dur-feedback) var(--ease-out-quart);
}

.feature-interest-row.is-active {
    border-color: var(--cobalt-bright);
    background: oklch(40% 0.155 30 / 0.04);
}

.feature-interest-check {
    display: flex;
    align-items: center;
    gap: var(--s-12);
    cursor: pointer;
}

.feature-interest-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--hot);
    cursor: pointer;
}

.feature-interest-name {
    font-weight: 600;
    font-size: 1rem;
}

.feature-interest-detail:not(:empty) { margin-top: var(--s-16); }

.feature-interest-sub-label {
    display: block;
    margin-bottom: var(--s-8);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-on-chalk-soft);
}

.feature-interest-note {
    font-size: 0.875rem;
    color: var(--text-on-chalk-soft);
}

.feature-interest-yesno,
.feature-interest-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-8);
}

.feature-interest-pill {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    padding: var(--s-8) var(--s-16);
    border: 1px solid var(--line-on-chalk);
    border-radius: 999px;
    background: var(--chalk);
    color: var(--text-on-chalk);
    cursor: pointer;
    transition: all var(--dur-feedback) var(--ease-out-quart);
}

.feature-interest-pill:hover:not(:disabled) { border-color: var(--text-on-chalk); }

.feature-interest-pill:focus-visible {
    outline: 2px solid var(--hot);
    outline-offset: 2px;
}

.feature-interest-pill.is-active {
    background: var(--cobalt);
    border-color: var(--cobalt);
    color: var(--text-on-cobalt);
}

/* ---- Wizard nav + submit ---- */
.lead-submit-btn {
    width: 100%;
    margin-top: var(--s-24);
}

.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-16);
    margin-top: var(--s-24);
}

.wizard-next-btn { margin-left: auto; }

.cta:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Validation + errors ---- */
.validation-summary {
    margin-top: var(--s-16);
    padding: var(--s-12) var(--s-16);
    border: 1px solid oklch(58% 0.205 28 / 0.3);
    border-radius: 6px;
    background: oklch(58% 0.205 28 / 0.06);
}

.validation-error {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--hot-deep);
}

.lead-alert {
    margin-top: var(--s-16);
    padding: var(--s-12) var(--s-16);
    border: 1px solid oklch(58% 0.205 28 / 0.35);
    border-radius: 6px;
    background: oklch(58% 0.205 28 / 0.08);
    color: var(--hot-deep);
    font-size: 0.9375rem;
}

/* ---- Success state ---- */
.lead-card-success {
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
}

.lead-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--s-24);
    border-radius: 50%;
    background: var(--hot);
    color: var(--text-on-ink);
    font-size: 2rem;
    line-height: 1;
}

.lead-success-title { margin: 0 0 var(--s-16); }

.lead-success-body {
    margin: 0 auto var(--s-32);
    max-width: 48ch;
    color: var(--text-on-chalk-soft);
}

.lead-success-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-12);
}

@media (max-width: 540px) {
    .wizard-nav { flex-direction: column-reverse; }
    .wizard-nav .cta { width: 100%; }
    .wizard-next-btn { margin-left: 0; }
    .lead-success-actions .cta { width: 100%; }
}

/* ============================================================
   Proof section - worker cutout (warms up the page)
   ============================================================ */
.panel-proof { overflow: hidden; }

.proof-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-32);
}

/* Cutout hidden on small screens (would crowd the quote); text stands alone */
.proof-figure { display: none; }

.proof-worker {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin-inline: auto;
    /* lift the figure so it reads as standing on the panel's foot */
    filter: drop-shadow(0 18px 40px oklch(15% 0.02 30 / 0.35));
}

@media (min-width: 860px) {
    /* Let the worker rise from the bottom edge of the cobalt panel */
    .panel-proof { padding-bottom: 0; }

    .proof-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
        gap: var(--s-64);
        align-items: end;
    }

    .proof-text { align-self: center; padding-block: var(--s-32); }

    .proof-figure {
        display: block;
        align-self: end;
    }

    .proof-worker { max-width: 440px; }
}

@media (min-width: 1200px) {
    .proof-worker { max-width: 500px; }
}

/* ============================================================
   The Bleed - the pain beat (bone panel)
   A cluster of three sourced % stats, each a distinct pain point
   paired with the channel/capability that fixes it. Reflows 3 -> 1.
   ============================================================ */
.stat-cluster {
    max-width: 1240px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-16);
}

@media (min-width: 760px) {
    .stat-cluster { grid-template-columns: repeat(3, 1fr); gap: var(--s-24); }
}

/* One stat unit: amber alarm-bell figure, the pain it names, the fix, a source */
.stat-unit {
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
    padding: var(--s-32) var(--s-24);
    background: var(--chalk);
    border: 1px solid var(--line-on-chalk);
    border-radius: 14px;
}

.stat-unit-num {
    font-family: var(--font-sans);
    font-size: clamp(3rem, 4vw + 1.5rem, 4.5rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--hot);
    font-variant-numeric: tabular-nums;
}

.stat-unit-pain {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--text-on-chalk);
    font-weight: 500;
    text-wrap: pretty;
}

.stat-unit-fix {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-on-chalk-soft);
    text-wrap: pretty;
}

/* The capability label that names the fix beside the stat */
.stat-unit-fix-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cobalt-bright);
    margin-right: var(--s-4);
}

/* Source caption pinned to the foot so the three units align */
.stat-unit-source {
    margin-top: auto;
    padding-top: var(--s-8);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    color: var(--text-on-chalk-soft);
}

/* Closing line that ties the cluster to the single operations layer */
.stat-cluster-close {
    max-width: 70ch;
    margin-inline: auto;
    margin-top: var(--s-32);
}

/* ============================================================
   Knowledge Base - compact cards (elevator-pitch treatment)
   A uniform responsive grid: small image banner over a solid
   card body with title + a one-line, always-visible description.
   ============================================================ */
.kb-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-16);
    margin-top: var(--s-24);
    max-width: 1240px;
    margin-inline: auto;
}

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

.kb-card {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: var(--cobalt-deep);
    border: 1px solid var(--line-on-cobalt);
    transition: transform var(--dur-state) var(--ease-out-quint),
                box-shadow var(--dur-state) var(--ease-out-quint);
}

.kb-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px oklch(13% 0.02 30 / 0.45);
}

/* Small image banner - fixed, compact height so the photo stays secondary */
.kb-card-media {
    height: clamp(132px, 13vw, 164px);
    background: var(--kb-img, none) center / cover no-repeat;
    background-color: var(--cobalt-deep);
    transform-origin: center;
    transition: transform 600ms var(--ease-out-quint);
}

.kb-card:hover .kb-card-media { transform: scale(1.04); }

.kb-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-8);
    padding: var(--s-24);
}

.kb-card-tag {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hot);
    border: 1px solid oklch(70% 0.165 60 / 0.45);
    border-radius: 999px;
    padding: 2px var(--s-8);
}

.kb-card-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text-on-cobalt);
}

.kb-card-line {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-on-cobalt-soft);
    text-wrap: pretty;
}

/* ============================================================
   What Changes - the outcomes beat (graphite panel)
   The payoff: a 4-up band of what the buyer gets, amber-indexed.
   ============================================================ */
.outcomes {
    max-width: 1240px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--line-on-ink);
}

@media (min-width: 560px) { .outcomes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .outcomes { grid-template-columns: repeat(4, 1fr); } }

.outcome {
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
    padding-block: var(--s-32);
    border-bottom: 1px solid var(--line-on-ink);
    align-items: start;
}

@media (min-width: 560px) {
    .outcome {
        padding-inline: var(--s-24);
        border-bottom: none;
        border-left: 1px solid var(--line-on-ink);
    }
    .outcome:nth-child(odd) { border-left: none; padding-left: 0; }
}

@media (min-width: 960px) {
    .outcomes { border-bottom: 1px solid var(--line-on-ink); }
    .outcome {
        min-height: 240px;
        padding: var(--s-32) var(--s-24);
        border-bottom: none;
        border-left: 1px solid var(--line-on-ink);
    }
    .outcome:nth-child(odd) { border-left: 1px solid var(--line-on-ink); padding-left: var(--s-24); }
    .outcome:first-child { border-left: none; padding-left: 0; }
}

.outcome-mark {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hot);
}

.outcome-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text-on-ink);
}

.outcome-line {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-on-ink-soft);
    text-wrap: pretty;
}

/* ============================================================
   Why It Holds Up - the trust / differentiation beat (bone panel)
   A 4-up band answering the reasons not to act.
   ============================================================ */
.assurances {
    max-width: 1240px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-16);
}

@media (min-width: 560px) { .assurances { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .assurances { grid-template-columns: repeat(4, 1fr); } }

.assurance {
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
    padding: var(--s-24);
    background: oklch(99% 0.004 75);
    border: 1px solid var(--line-on-chalk);
    border-radius: 14px;
    transition: transform var(--dur-state) var(--ease-out-quint),
                box-shadow var(--dur-state) var(--ease-out-quint),
                border-color var(--dur-state) var(--ease-out-quint);
}

.assurance:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px oklch(18% 0.02 30 / 0.14);
    border-color: var(--cobalt-bright);
}

.assurance-rule {
    width: 36px;
    height: 3px;
    border-radius: 3px;
    background: var(--hot);
}

.assurance-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.005em;
    color: var(--text-on-chalk);
}

.assurance-line {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-on-chalk-soft);
    text-wrap: pretty;
}

/* ============================================================
   Proof - on-page sample call sits in the proof grid
   ============================================================ */
.proof-sample { margin-top: var(--s-32); max-width: 560px; }

.proof-sample-head { margin: 0 0 var(--s-12); max-width: 26ch; color: var(--text-on-cobalt); }

.proof-sample-line {
    margin: 0 0 var(--s-24);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-on-cobalt-soft);
    max-width: 46ch;
}

@media (min-width: 860px) {
    /* When proof carries the sample it keeps its bottom padding (the base
       .panel-proof zeroes it for the worker cutout, which this layout drops). */
    .panel-proof--sample { padding-bottom: var(--s-128); }
    .proof-layout.proof-layout--sample {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
        align-items: center;
    }
    .proof-layout.proof-layout--sample .proof-sample { margin-top: 0; }
}

/* ============================================================
   The Solution - six-card band (ink panel, the turning point)
   Four channels as solution promises + two system cards.
   3 x 2 grid reflowing 3 -> 2 -> 1; the headline does the pop.
   ============================================================ */
.solution-grid {
    max-width: 1240px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-16);
}

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

.sol-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
    padding: var(--s-32) var(--s-24);
    background: var(--ink-elev);
    border: 1px solid var(--line-on-ink);
    border-radius: 16px;
    transition: transform var(--dur-state) var(--ease-out-quint),
                box-shadow var(--dur-state) var(--ease-out-quint),
                border-color var(--dur-state) var(--ease-out-quint);
}

.sol-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 52px oklch(8% 0.02 40 / 0.45);
    border-color: var(--cobalt-bright);
}

/* The two system cards are the differentiator - mark them with the hot accent. */
.sol-card--system {
    background: linear-gradient(180deg,
                oklch(24% 0.05 30 / 0.55), var(--ink-elev) 60%);
    border-color: oklch(70% 0.165 60 / 0.32);
}

.sol-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hot);
}

.sol-card--system .sol-tag { color: var(--hot); }

.sol-head {
    margin: 0;
    font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.05rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-on-ink);
    text-wrap: balance;
}

.sol-line {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-on-ink-soft);
    text-wrap: pretty;
}

/* ============================================================
   In Production - testimonials (quotes only, no audio)
   3-up card grid on the bone panel; oxblood top-rule per card.
   ============================================================ */
.testimonials {
    max-width: 1240px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-24);
}

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

.testimonial {
    display: flex;
    flex-direction: column;
    gap: var(--s-16);
    margin: 0;
    padding: var(--s-32) var(--s-24) var(--s-24);
    background: oklch(99% 0.004 75);
    border: 1px solid var(--line-on-chalk);
    border-top: 3px solid var(--cobalt);
    border-radius: 4px 4px 14px 14px;
    transition: transform var(--dur-state) var(--ease-out-quint),
                box-shadow var(--dur-state) var(--ease-out-quint);
}

.testimonial:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px oklch(18% 0.02 30 / 0.14);
}

.t-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cobalt-bright);
}

.t-quote {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--text-on-chalk);
    text-wrap: pretty;
}

.t-cite {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding-top: var(--s-16);
    border-top: 1px solid var(--line-on-chalk);
    font-style: normal;
}

.t-name { font-weight: 600; color: var(--text-on-chalk); }
.t-role { font-size: 0.875rem; color: var(--text-on-chalk-soft); }

/* ============================================================
   Proof - sample-call demo block: transcript + use-case link
   ============================================================ */
.proof-transcript {
    margin: var(--s-32) 0 var(--s-24);
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
    max-width: 52ch;
}

.proof-transline {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-on-cobalt-soft);
}

.proof-transline span {
    display: inline-block;
    min-width: 4.5em;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hot-bright); /* AA-safe amber: >=4.5:1 small text on the oxblood proof panel */
}

.proof-uclink { margin-top: var(--s-8); }

.proof-sample-caption {
    margin: var(--s-16) 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-on-cobalt-soft);
    max-width: 46ch;
}

/* ============================================================
   Lead-form step transitions
   Each step (and the success state) eases in when it becomes active,
   so advancing the wizard reads as movement, not an instant swap.
   Neutralised under reduced-motion by the global catch-all.
   ============================================================ */
.wizard-panel-active,
.lead-card-success {
    animation: wizard-step-in var(--dur-state) var(--ease-out-quint);
}

@keyframes wizard-step-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Success checkmark draws itself once, just after the card settles - a quiet
   acknowledgement, not a celebration. Reduced-motion users see it already drawn. */
.lead-success-check { display: block; }

.lead-success-check path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: lead-check-draw 520ms var(--ease-out-quint) 140ms forwards;
}

@keyframes lead-check-draw {
    to { stroke-dashoffset: 0; }
}

/* ============================================================
   Use Cases - nav dropdown, page, and themed sample-call player
   ============================================================ */

/* --- "Use Cases" nav dropdown (CSS hover / focus-within) --- */
.nav-uc { position: relative; display: inline-flex; }
.nav-uc-trigger {
    display: inline-flex; align-items: center; gap: 0.4em;
    background: none; border: none; cursor: pointer;
}
.nav-uc-caret { transition: transform var(--dur-state) var(--ease-out-quart); }
.nav-uc:hover .nav-uc-caret,
.nav-uc:focus-within .nav-uc-caret { transform: rotate(180deg); }

.nav-uc-panel {
    position: absolute; top: calc(100% + var(--s-12)); left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 340px; background: var(--chalk);
    border: 1px solid var(--line-on-chalk); border-radius: 14px;
    box-shadow: var(--frame-shadow); padding: var(--s-12);
    display: flex; flex-direction: column; gap: 2px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-state) var(--ease-out-quart),
                transform var(--dur-state) var(--ease-out-quart);
    z-index: 60;
}
/* Transparent bridge across the gap so the cursor can travel from the trigger
   down into the panel without the hover dropping (which closed the menu). */
.nav-uc-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 16px;
}
.nav-uc:hover .nav-uc-panel,
.nav-uc:focus-within .nav-uc-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-uc-group {
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-on-chalk-soft);
    padding: var(--s-8) var(--s-12) var(--s-4);
}
.nav-uc-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--s-12); border-radius: 10px; text-decoration: none;
    transition: background var(--dur-feedback);
}
.nav-uc-item:hover, .nav-uc-item:focus-visible { background: var(--chalk-deep); }
.nav-uc-title { font-weight: 600; color: var(--text-on-chalk); font-size: 0.95rem; }
.nav-uc-sub { font-size: 0.8rem; color: var(--text-on-chalk-soft); }

/* --- Use-case page --- */
.uc-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-48); align-items: center; }
@media (min-width: 900px) { .uc-hero-grid { grid-template-columns: 1.1fr 0.9fr; } }
.uc-figure img { border-radius: 16px; box-shadow: var(--frame-shadow); width: 100%; height: auto; }

/* image + transcript samples (email/social): centre the shorter column so a
   short transcript doesn't leave a tall blank beside the image */
.uc-sample-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-32); align-items: center; }
@media (min-width: 900px) { .uc-sample-grid { grid-template-columns: 0.95fr 1.05fr; } }
.uc-transcript { display: flex; flex-direction: column; gap: var(--s-12); }

/* voice sample: full-width player on top, transcript in two columns below so
   the section fills the width instead of leaving blank space beside a short
   player. (Changed from a side-by-side grid that left ~330px of dead space.) */
.uc-sample { display: flex; flex-direction: column; gap: var(--s-32); }
.uc-sample .uc-transcript-cols {
    display: block;
    columns: 2;
    column-gap: var(--s-48);
}
.uc-sample .uc-transcript-cols .uc-turn {
    break-inside: avoid;
    margin-bottom: var(--s-16);
}
@media (max-width: 760px) {
    .uc-sample .uc-transcript-cols { columns: 1; }
}
.uc-turn { display: flex; flex-direction: column; gap: 2px; max-width: 60ch; }
.uc-turn p { margin: 0; color: var(--text-on-chalk); line-height: 1.5; }
.uc-turn-who {
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-on-chalk-soft);
}
.uc-turn-agent .uc-turn-who { color: var(--cobalt); }
.uc-turn-customer { padding-left: var(--s-16); border-left: 1px solid var(--line-on-chalk); }

.uc-two-up { display: grid; grid-template-columns: 1fr; gap: var(--s-32) var(--s-48); }
@media (min-width: 780px) { .uc-two-up { grid-template-columns: 1fr 1fr; } }

/* --- Themed sample-call player (graphite product frame) --- */
.audio-sample {
    --audio-progress: 0;
    background: var(--ink); color: var(--text-on-ink);
    border: 1px solid var(--ink-line); border-radius: 16px;
    padding: var(--s-24); box-shadow: var(--frame-shadow);
    display: flex; flex-direction: column; gap: var(--s-16);
}
.audio-sample-marker {
    display: flex; align-items: center; gap: var(--s-8);
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-on-ink-soft);
}
.audio-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hot); }
.audio-sample.is-playing .audio-eyebrow-dot { animation: audio-pulse 1.4s ease-out infinite; }
@keyframes audio-pulse {
    0% { box-shadow: 0 0 0 0 oklch(70% 0.165 60 / 0.5); }
    100% { box-shadow: 0 0 0 10px oklch(70% 0.165 60 / 0); }
}
.audio-waveform { position: relative; height: 56px; }
.audio-waveform-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.audio-waveform-svg--base rect { fill: var(--text-on-ink); opacity: 0.18; }
.audio-waveform-svg--heard { clip-path: inset(0 calc((1 - var(--audio-progress)) * 100%) 0 0); }
.audio-waveform-svg--heard rect { fill: var(--hot); }
.audio-waveform-playhead {
    position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--hot);
    left: calc(var(--audio-progress) * 100%); opacity: 0; transition: opacity var(--dur-state);
}
.audio-sample.is-playing .audio-waveform-playhead { opacity: 1; }
.audio-transport { display: flex; align-items: center; gap: var(--s-16); }
.audio-play-button {
    width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--hot); color: var(--ink); flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform var(--dur-feedback), background var(--dur-feedback);
}
.audio-play-button:hover { transform: scale(1.05); background: var(--hot-deep); }
.audio-play-button:active { transform: scale(0.97); }
.audio-icon { width: 22px; height: 22px; fill: currentColor; }
.audio-icon--pause { display: none; }
.audio-sample.is-playing .audio-icon--play { display: none; }
.audio-sample.is-playing .audio-icon--pause { display: inline-block; }
.audio-timecode {
    font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-on-ink-soft);
    display: flex; gap: 0.35em;
}
.audio-time-sep { opacity: 0.5; }
.audio-meta-strip {
    margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-on-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
    .audio-sample.is-playing .audio-eyebrow-dot { animation: none; }
    .nav-uc-panel, .nav-uc-caret { transition: none; }
}

/* Slim nav bands (get-started / pricing / legal / 404) put SiteNav inside a
   short .panel (overflow:hidden) followed by another section. Let the Use Cases
   dropdown escape the band and paint above what follows. */
.lead-nav-band,
.page-mini-hero,
.page-mini-hero-row { overflow: visible; }
.lead-nav-band,
.page-mini-hero,
.page-mini-hero-row { position: relative; z-index: 50; }

/* --- Phone view: hamburger toggle (CSS-only, no JS) --- */
.nav-burger { display: none; }   /* desktop: links shown inline, no burger */

@media (max-width: 640px) {
    .nav-burger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        margin-left: auto;
        cursor: pointer;
    }
    .nav-burger-bar {
        display: block;
        width: 22px;
        height: 2px;
        margin-inline: auto;
        background: currentColor;
        border-radius: 2px;
        transition: transform var(--dur-state) var(--ease-out-quart), opacity var(--dur-state);
    }
    .nav-toggle:checked ~ .nav-burger .nav-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle:checked ~ .nav-burger .nav-burger-bar:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-burger .nav-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* The link row becomes a full-width panel below the bar, shown when toggled */
    .nav-links {
        display: none;
        position: fixed;
        top: 58px;
        left: var(--s-12);
        right: var(--s-12);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--chalk);
        color: var(--text-on-chalk);
        border: 1px solid var(--line-on-chalk);
        border-radius: 14px;
        box-shadow: var(--frame-shadow);
        padding: var(--s-12);
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        z-index: 70;
    }
    .nav-toggle:checked ~ .nav-links { display: flex; }

    /* Links as stacked ink-on-chalk rows (override the hide-anchor rule above) */
    .nav-links .nav-link {
        display: block;
        width: 100%;
        text-align: left;
        color: var(--text-on-chalk);
        padding: var(--s-12);
        font-size: 0.8rem;
        border-radius: 8px;
    }
    .nav-links .nav-link:hover,
    .nav-links .nav-link:focus-visible { background: var(--chalk-deep); color: var(--text-on-chalk); }

    /* Use Cases: render its items inline within the menu (no hover popup) */
    .nav-links .nav-uc { position: static; width: 100%; display: block; }
    .nav-links .nav-uc-trigger { display: flex; justify-content: space-between; align-items: center; }
    .nav-links .nav-uc-panel {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        min-width: 0;
        width: auto;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 0 var(--s-8) var(--s-12);
    }
    .nav-uc-panel::before { display: none; }
    .nav-links .nav-uc-item { padding: var(--s-8) var(--s-12); }

    /* Build-your-agent CTA full-width at the foot of the menu */
    .nav-links .cta-nav { width: 100%; text-align: center; margin-top: var(--s-8); }
}

/* ============================================================
   CTA block - primary CTA + a supporting hook line that plants
   the mechanic (hero + Final CTA).
   ============================================================ */
.cta-block {
    display: flex;
    flex-direction: column;
    gap: var(--s-16);
}

.cta-hook {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    max-width: 46ch;
    color: var(--text-on-cobalt-soft);
}

.panel-ink .cta-hook { color: var(--text-on-ink-soft); }

/* Carousel controls are phone-only; hidden on desktop where the
   testimonials run as their normal grid. */
.carousel-controls { display: none; }

/* ============================================================
   MOBILE DESIGN PASS  (phone is its own deliberate layout)
   Everything here is scoped to <=640px so the desktop layout is
   byte-for-byte unchanged. Tighter rhythm, decorative secondary
   copy hidden, the sample-call block stripped to header + player,
   and the In Production testimonials turned into a swipe carousel.
   ============================================================ */
@media (max-width: 640px) {
    /* ---- Tighter vertical rhythm + a little more usable width ---- */
    .panel { padding-block: var(--s-48); padding-inline: var(--s-16); }
    .panel-hero { padding-block: var(--s-32) var(--s-64); }
    .panel-final { padding-block: var(--s-64); }

    /* Eyebrows: smaller with less tracking so they hold one line */
    .eyebrow { font-size: 0.7rem; letter-spacing: 0.08em; }

    /* Headlines scale to one impactful block, not a wall of type */
    .display { font-size: clamp(2.1rem, 1.4rem + 4vw, 2.9rem); line-height: 1.02; }
    .headline { font-size: clamp(1.65rem, 1.2rem + 3vw, 2.1rem); line-height: 1.1; }

    /* Leads read as support text, not a second headline */
    .lead { font-size: 1rem; line-height: 1.5; }

    /* Section heads sit closer to their content */
    .section-head { gap: var(--s-12); margin-bottom: var(--s-32); }

    /* Hero CTAs go full width for a confident tap target */
    .panel-hero .cta-row { flex-direction: column; align-items: stretch; }
    .panel-hero .cta-row .cta { width: 100%; }

    /* ---- Knowledge Base: tighter phase rhythm (keeps its grid) ---- */
    .kb-foundation { margin-bottom: var(--s-32); padding: var(--s-16); }
    .kb-phase + .kb-phase { margin-top: var(--s-16); }
    .phase-header { padding-block: var(--s-32) var(--s-16); }

    /* ---- Sample-call block: strip to claim + player only ----
       The visitor sees the headline (the claim) and the play button,
       nothing to scroll past: the transcript snippet, the secondary
       "see the full use case" link, and the caption are hidden. */
    #proof .proof-transcript,
    #proof .proof-uclink,
    #proof .proof-sample-caption { display: none; }
    #proof .proof-sample { margin-top: var(--s-24); }

    /* ---- In Production testimonials: one-card swipe carousel ----
       A horizontal scroll-snap rail (next card peeking) replaces the
       tall vertical stack. carousel.js wires the arrows + dots. */
    .testi-carousel { min-width: 0; }
    .testimonials {
        grid-template-columns: none;
        max-width: none;
        margin-top: var(--s-32);
        margin-inline: 0;
    }
    .testimonial:hover { transform: none; box-shadow: 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: var(--s-16);
        padding-bottom: var(--s-4);
    }
    [data-carousel-track]::-webkit-scrollbar { display: none; }
    [data-carousel-track] > * {
        flex: 0 0 86%;
        min-width: 0;
        scroll-snap-align: start;
        /* off-screen cards never trip the scroll-reveal observer, so
           opt them out of the hidden start-state and show them outright */
        opacity: 1 !important;
        transform: none !important;
    }

    /* Shared carousel controls - arrows + dots beneath the rail (ink panel) */
    .carousel-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--s-16);
        margin-top: var(--s-24);
    }
    .carousel-arrow {
        width: 2.6rem;
        height: 2.6rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid var(--ink-line);
        background: var(--ink-elev);
        color: var(--text-on-ink);
        cursor: pointer;
        transition: opacity var(--dur-state) var(--ease-out-quart),
                    background var(--dur-state) var(--ease-out-quart);
    }
    .carousel-arrow svg { width: 1.2rem; height: 1.2rem; display: block; }
    .carousel-arrow:active { background: var(--ink); }
    .carousel-arrow:disabled { opacity: 0.3; cursor: default; }
    .carousel-dots { display: flex; align-items: center; gap: var(--s-8); }
    .carousel-dot {
        width: 7px;
        height: 7px;
        padding: 0;
        border-radius: 50%;
        border: none;
        background: var(--text-on-ink-soft);
        opacity: 0.4;
        cursor: pointer;
        transition: background var(--dur-state) var(--ease-out-quart),
                    opacity var(--dur-state) var(--ease-out-quart),
                    transform var(--dur-state) var(--ease-out-quart);
    }
    .carousel-dot.active { background: var(--hot); opacity: 1; transform: scale(1.3); }
}


/* ---------------------------------------------------------------------------
   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: 640px) {
    .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; }

/* ─────────────────────────────────────────────────────────────
   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;
    }
}

/* ============================================================
   Fixed nav on every page (retrofit to the brand invariant).
   Transparent over the dark hero/bands, solid + blurred on scroll.
   Ported from the Ryku hub, adapted to the oxblood ink.
   ============================================================ */
:root { --nav-h: 66px; }
html { scroll-padding-top: var(--nav-h); }

.site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    border-bottom: 1px solid transparent;
    transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
.panel-hero { isolation: auto; }                      /* free the fixed nav from the hero stacking context */
.panel-hero > .site-nav { position: fixed; z-index: 100; }  /* beat the earlier .panel-hero > .site-nav z-index rule */
.site-nav.scrolled {
    background: oklch(16% 0.012 40 / 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom-color: var(--ink-line);
}
/* nav text stays light throughout (nav sits over dark hero / oxblood bands or the scrolled dark bar) */
.site-nav .brand-name,
.site-nav .brand-sub,
.site-nav .nav-link,
.site-nav .nav-uc-trigger { color: var(--text-on-ink); }
.site-nav .brand-dot { color: var(--hot); }
/* non-hero pages held the nav in flow inside a short band -> push their content clear of the fixed bar */
.page-mini-hero,
.lead-nav-band { padding-top: calc(var(--nav-h) + var(--s-16)); }