/* ============================================================
   Electric Violet (hub)
   Design system for the Engenix.Ai parent hub — the sector platform.
   Deep indigo-navy ink + electric-violet accent + magenta spark on a cool
   off-white canvas. Deliberately DISTINCT from the dealer (red) and rental
   (cobalt) child sites, so their card accents pop against the violet ground.
   ============================================================ */

/* ------------------------------------------------------------
   Tokens
   ------------------------------------------------------------ */
:root {
    /* "cobalt" = the committed full-colour accent panel = ELECTRIC BLUE.
       Light text rides on it. This is the brand's confident moment. */
    --cobalt:        #6D4AFF;   /* electric blue — the load-bearing colour */
    --cobalt-deep:   #5A34E8;   /* pressed / deeper blue */
    --cobalt-bright: #9B7BFF;   /* brighter blue: links/hairline on dark */

    --ink:           #14101F;   /* near-black navy (hero/proof/final) */
    --ink-elev:      #1D1730;   /* lifted ink (product frame, cards on ink) */
    --ink-line:      #2E2646;   /* hairline on ink */

    --chalk:         #F5F3FB;   /* cool off-white canvas */
    --chalk-deep:    #EAE6F5;   /* pressed / banding */

    --hot:           #C24DFF;   /* cyan spark — energy accent (markers, tags) */
    --hot-deep:      #A82EE6;   /* hot pressed */
    /* Same violet-magenta, lightness dropped so small text clears WCAG AA
       (4.5:1) on the chalk canvas and the near-white cards. Text only: the
       bright --hot stays the accent for fills, markers and dark surfaces. */
    --hot-text:      #8A2BB8;

    --indigo:        #C24DFF;   /* cyan spark: focus, links, "AI" */
    --indigo-soft:   #D9A6FF;   /* cyan on dark */

    /* Text on each surface */
    --text-on-chalk:       #15111F;
    --text-on-chalk-soft:  #635A78;
    --text-on-cobalt:      #FFFFFF;   /* light text on the electric-blue panel */
    /* Lifted from #E0D4FB: on the electric-violet panel that tint was 3.67:1.
       This is the same violet-white, brighter, at 4.67:1. */
    --text-on-cobalt-soft: #F5F2FF;
    --text-on-ink:         #F5F3FB;
    --text-on-ink-soft:    #A99EC4;

    /* Hairlines */
    --line-on-chalk:  rgba(17, 21, 31, 0.13);
    --line-on-cobalt: rgba(255, 255, 255, 0.26);
    --line-on-ink:    rgba(255, 255, 255, 0.12);

    /* Signature gradients */
    --grad-molten:  linear-gradient(135deg, #6D4AFF 0%, #C24DFF 100%);
    --grad-hero:    radial-gradient(120% 90% at 78% 16%, rgba(109,74,255,0.36), transparent 58%);

    /* 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. Clash Display (Fontshare) for headlines; Satoshi (Fontshare) for
       body/UI; Space Mono (Google) for eyebrows, labels, numbers. */
    --font-display: "Clash Display", "Satoshi", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-sans: "Satoshi", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: "Space 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 252 / 0.32),
                     0 4px 14px  oklch(15% 0.02 252 / 0.18);
    --frame-shadow-hover: 0 32px 72px oklch(15% 0.02 252 / 0.38),
                          0 6px 16px  oklch(15% 0.02 252 / 0.22);
    --cta-shadow-active: inset 0 2px 4px oklch(15% 0.02 252 / 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; }

/* Full strength on the dark surfaces: dimming the eyebrow drops it under the
   4.5:1 bar on both the violet panel and the ink. */
.panel-cobalt .eyebrow { opacity: 1; }
.panel-ink .eyebrow { opacity: 1; }

.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: var(--hot);
}

/* ------------------------------------------------------------
   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: var(--hot);
    border-bottom-color: var(--hot);
}

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: var(--hot);
}

.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: var(--hot);
}

/* 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-ink);
    border-color: var(--hot);
}

.cta-primary:hover,
.cta-primary:focus-visible {
    background: var(--hot-deep);
    border-color: var(--hot-deep);
    color: var(--text-on-ink);
    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 252 / 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 252 / 0.55) 0%,
        oklch(15% 0.012 252 / 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 252 / 0.62) 0%,
        oklch(15% 0.012 252 / 0.30) 42%,
        oklch(15% 0.012 252 / 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;
}

/* 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-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-32);
    margin-top: var(--s-48);
}

@media (max-width: 700px) {
    .shift-stats { grid-template-columns: 1fr; gap: var(--s-16); }
}

.shift-stat {
    display: flex;
    flex-direction: column;
    gap: var(--s-8);
    padding-block: var(--s-32);
    border-top: 1px solid var(--line-on-chalk);
    border-bottom: 1px solid var(--line-on-chalk);
}

.shift-stats .shift-stat-num { font-size: clamp(2.75rem, 3vw + 1.5rem, 4rem); }

.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-fix {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.45;
    font-weight: 600;
    color: var(--hot);
    max-width: 38ch;
    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);
}

.shift-unify {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--text-on-chalk);
    max-width: 62ch;
    margin-top: var(--s-32);
    padding-top: var(--s-24);
    border-top: 1px solid var(--line-on-chalk);
}

/* ------------------------------------------------------------
   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);
    /* Raised from 0.7: at 0.7 the copyright line lands at 4.21:1 on the ink. */
    opacity: 0.85;
}

/* Accreditations band — a quiet mono row in the site footer naming the
   car-hire-relevant 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);
}

.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: var(--hot);
    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);
}

.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 252 / 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 252 / 0) 0%,
        oklch(15% 0.02 252 / 0.04) 42%,
        oklch(15% 0.02 252 / 0.32) 74%,
        oklch(13% 0.02 252 / 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 252 / 0.45) 0%,
        oklch(15% 0.02 252 / 0.78) 50%,
        oklch(12% 0.02 252 / 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 252 / 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: var(--hot);
    text-shadow: 0 1px 8px oklch(13% 0.02 252 / 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 252 / 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: a compact 4-column band (reflows 4 -> 2 -> 1).
   Each channel is a column separated by a 1px hairline rule, so the
   section fills the width instead of running as tall stacked rows.
   ------------------------------------------------------------ */
.channels {
    max-width: 1240px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--line-on-chalk);
}

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

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

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

/* Vertical hairline separators between columns once they sit side by side. */
@media (min-width: 560px) {
    .channel {
        padding-inline: var(--s-24);
        border-bottom: none;
        border-left: 1px solid var(--line-on-chalk);
    }
    .channel:nth-child(odd) { border-left: none; padding-left: 0; }
}

@media (min-width: 960px) {
    .channel {
        min-height: 280px;
        padding-block: var(--s-48) var(--s-32);
    }
    .channel:nth-child(odd) { border-left: 1px solid var(--line-on-chalk); padding-left: var(--s-24); }
    .channel:first-child { border-left: none; padding-left: 0; }
}

.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.5rem;
    letter-spacing: -0.02em;
    color: var(--text-on-chalk);
    margin: 0;
}

.starting-point-tag {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hot);
    border: 1px solid rgba(24, 200, 230, 0.4);
    border-radius: 999px;
    padding: 2px var(--s-8);
}

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

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

.steps {
    max-width: 1240px;
    margin-inline: auto;
}

.step {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-16);
    padding-block: var(--s-32);
    border-top: 1px solid var(--line-on-chalk);
    align-items: start;
}

.step:last-child { border-bottom: 1px solid var(--line-on-chalk); }

@media (min-width: 860px) {
    .step {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: var(--s-48);
        padding-block: var(--s-48);
    }
}

.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.5rem;
    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; }
}

/* ============================================================
   Demo-site interstitial modal
   ============================================================ */
.demo-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-24);
}

.demo-modal[hidden] { display: none; }

/* Entrance: the backdrop fades while the card rises and settles. Reduced-motion
   users get the end state instantly (global catch-all neutralises the keyframes). */
.demo-modal:not([hidden]) .demo-modal-backdrop {
    animation: demo-backdrop-in var(--dur-state) var(--ease-out-quart);
}

.demo-modal:not([hidden]) .demo-modal-card {
    animation: demo-card-in var(--dur-state) var(--ease-out-quint);
}

@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; }
}

.demo-modal-backdrop {
    position: absolute;
    inset: 0;
    background: oklch(15% 0.012 252 / 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.demo-modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    background: oklch(99% 0.003 80);
    color: var(--text-on-chalk);
    border: 1px solid var(--line-on-chalk);
    border-radius: 8px;
    padding: var(--s-32);
    box-shadow: 0 24px 60px oklch(15% 0.02 252 / 0.34);
}

.demo-modal-eyebrow { margin: 0 0 var(--s-12); }

.demo-modal-title {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--s-12);
    color: var(--text-on-chalk);
}

.demo-modal-desc {
    margin: 0 0 var(--s-24);
    color: var(--text-on-chalk-soft);
    font-size: 1rem;
    line-height: 1.55;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-12);
    justify-content: flex-end;
}

@media (max-width: 460px) {
    .demo-modal-actions { flex-direction: column-reverse; }
    .demo-modal-actions .cta { width: 100%; }
}

/* ============================================================
   Lead form (/get-started, /pricing)
   ============================================================ */

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

.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 252 / 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(78% 0.13 210 / 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 252); }

.lead-form .form-control:focus,
.lead-form .form-select:focus {
    outline: none;
    border-color: var(--hot);
    box-shadow: 0 0 0 3px oklch(78% 0.13 210 / 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 252 / 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(78% 0.13 210 / 0.3);
    border-radius: 6px;
    background: oklch(78% 0.13 210 / 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(78% 0.13 210 / 0.35);
    border-radius: 6px;
    background: oklch(78% 0.13 210 / 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 / sample-call layout (cobalt panel)
   Base single-column grid; the two-up desktop layout lives with
   .proof-layout--sample (further down).
   ============================================================ */
.panel-proof { overflow: hidden; }

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

/* ============================================================
   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 mega-menu (desktop) + mobile hamburger panel
   ============================================================ */

/* The nav owns a stacking context so its menu paints above the hero. */
.site-nav { position: relative; }
.panel-hero > .site-nav { z-index: 30; }

/* Slim-band pages put the nav in a short panel; .panel clips overflow,
   which would cut the dropdown off. Let it escape and stack on top. */
.lead-nav-band,
.page-mini-hero {
    overflow: visible;
    position: relative;
    z-index: 30;
}

.nav-uc { display: inline-flex; }

.nav-uc-trigger {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--s-4);
}

.nav-uc-caret {
    font-size: 0.7em;
    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-trigger:focus-visible {
    outline: 2px solid var(--hot);
    outline-offset: 3px;
}

/* Desktop mega-menu: a floating ink card under the nav. A transparent
   padding band bridges the trigger->panel gap so cursor travel keeps it open. */
.uc-megamenu {
    position: absolute;
    top: 100%;
    left: var(--s-24);
    right: var(--s-24);
    padding-top: var(--s-12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity var(--dur-state) var(--ease-out-quart),
                transform var(--dur-state) var(--ease-out-quart);
    z-index: 60;
}

.nav-uc:hover .uc-megamenu,
.nav-uc:focus-within .uc-megamenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.uc-megamenu-inner {
    max-width: 820px;
    margin-inline: auto;
    background: var(--ink);
    color: var(--text-on-ink);
    border: 1px solid var(--ink-line);
    border-radius: 12px;
    box-shadow: var(--frame-shadow);
    padding: var(--s-24);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-24) var(--s-32);
}

@media (min-width: 1100px) {
    .uc-megamenu-inner { grid-template-columns: repeat(4, 1fr); }
}

.uc-group-head {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hot);
    margin: 0 0 var(--s-12);
    padding-bottom: var(--s-8);
    border-bottom: 1px solid var(--ink-line);
}

.uc-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }

.uc-row {
    display: flex;
    align-items: center;
    gap: var(--s-12);
    padding: var(--s-8) var(--s-12);
    border-radius: 8px;
    border-bottom: none;
    color: var(--text-on-ink);
    transition: background var(--dur-feedback) var(--ease-out-quart);
}

.uc-row:hover,
.uc-row:focus-visible {
    background: var(--ink-elev);
    color: var(--text-on-ink);
    border-bottom: none;
}

.uc-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.uc-row-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.uc-row-sub {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--text-on-ink-soft);
}

.uc-row-arrow {
    margin-left: auto;
    font-family: var(--font-mono);
    color: var(--text-on-ink-soft);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--dur-feedback) var(--ease-out-quart),
                transform var(--dur-feedback) var(--ease-out-quart);
}

.uc-row:hover .uc-row-arrow,
.uc-row:focus-visible .uc-row-arrow {
    opacity: 1;
    transform: none;
    color: var(--hot);
}

/* Mobile hamburger */
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav-burger { display: none; }

@media (max-width: 900px) {
    .nav-burger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 11px;
        margin-left: auto;
        cursor: pointer;
        border: 1px solid var(--line-on-cobalt);
        border-radius: 8px;
    }

    .nav-burger span {
        display: block;
        height: 2px;
        width: 100%;
        background: currentColor;
        transition: transform var(--dur-state) var(--ease-out-quart),
                    opacity var(--dur-feedback) var(--ease-out-quart);
    }

    .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-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-8);
        background: var(--ink);
        color: var(--text-on-ink);
        border-top: 1px solid var(--ink-line);
        padding: var(--s-24);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: max-height var(--dur-state) var(--ease-out-quart),
                    opacity var(--dur-state) var(--ease-out-quart);
        z-index: 60;
    }

    .nav-toggle:checked ~ .nav-links {
        max-height: calc(100vh - 64px);
        overflow: auto;
        opacity: 1;
        pointer-events: auto;
    }

    /* All links visible inside the panel, even the ones hidden on the inline bar */
    .nav-links .nav-link,
    .nav-links .nav-link.nav-anchor { display: inline-flex; color: var(--text-on-ink); }
    .nav-links .cta-nav { width: 100%; margin-top: var(--s-8); }

    /* Use-cases group renders inline (no hover) inside the panel */
    .nav-uc { display: block; width: 100%; }
    .nav-uc-trigger { width: 100%; justify-content: space-between; color: var(--text-on-ink); }
    .uc-megamenu {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        padding-top: var(--s-12);
    }
    .uc-megamenu-inner {
        grid-template-columns: 1fr;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        gap: var(--s-16);
    }
    .uc-row-arrow { opacity: 1; transform: none; }
}

/* ============================================================
   Use-case pages (/use-cases/{slug})
   ============================================================ */
.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: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-64); }
}

.uc-hero-title { max-width: 18ch; margin-top: var(--s-16); }
.uc-hero-lead { margin-top: var(--s-24); }
.uc-hero-text .cta-row { margin-top: var(--s-32); }

.uc-figure-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    background: var(--cobalt-deep);
    box-shadow: var(--frame-shadow);
}

.uc-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-48);
    align-items: center;
    max-width: 1240px;
    margin-inline: auto;
}

@media (min-width: 900px) {
    .uc-split { grid-template-columns: 1fr 1fr; gap: var(--s-64); }
    /* Alternate the media to the left on the mirror (solution) section */
    .uc-split-mirror .uc-split-media { order: 0; }
    .uc-split-mirror .uc-split-text { order: 1; }
}

.uc-h2 { max-width: 20ch; margin-top: var(--s-16); margin-bottom: var(--s-24); }

/* ---- Visual frames (problem ledger, email, DM, KB answer) ---- */
.uc-frame {
    border-radius: 12px;
    padding: var(--s-24);
    box-shadow: var(--frame-shadow);
}

.uc-frame-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 var(--s-16);
}

/* Problem ledger — elevated ink card on the ink panel */
.uc-frame--missed {
    background: var(--ink-elev);
    border: 1px solid var(--ink-line);
    color: var(--text-on-ink);
}

.uc-frame--missed .uc-frame-label { color: var(--text-on-ink-soft); }

.uc-frame-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
}

.uc-frame-list li { display: flex; gap: var(--s-12); align-items: baseline; color: var(--text-on-ink); }

.uc-frame-x {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hot);
    border: 1px solid oklch(78% 0.13 210 / 0.4);
    border-radius: 4px;
    padding: 1px var(--s-8);
    flex: 0 0 auto;
}

/* Light frames (email, DM, answer) — chalk cards that pop on the cobalt panel */
.uc-frame--email,
.uc-frame--dm,
.uc-frame--answer {
    background: oklch(99% 0.003 80);
    color: var(--text-on-chalk);
    border: 1px solid var(--line-on-chalk);
}

.uc-frame--email .uc-frame-label,
.uc-frame--dm .uc-frame-label,
.uc-frame--answer .uc-frame-label { color: var(--text-on-chalk-soft); }

.uc-frame-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-on-chalk-soft); margin: 0; }

.uc-frame-subject {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--text-on-chalk);
    margin: var(--s-4) 0 var(--s-16);
}

.uc-frame-body {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-on-chalk-soft);
    display: flex;
    flex-direction: column;
    gap: var(--s-8);
    border-top: 1px solid var(--line-on-chalk);
    padding-top: var(--s-16);
}

.uc-frame-body p { margin: 0; }

.uc-frame-foot {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    color: var(--text-on-chalk-soft);
    margin: var(--s-16) 0 0;
}

/* DM thread */
.uc-dm {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.5;
    padding: var(--s-12) var(--s-16);
    border-radius: 14px;
    max-width: 92%;
    margin-top: var(--s-12);
}

.uc-dm--in { background: var(--chalk-deep); color: var(--text-on-chalk); border-bottom-left-radius: 4px; }
.uc-dm--out { background: var(--cobalt); color: var(--text-on-cobalt); margin-left: auto; border-bottom-right-radius: 4px; }

/* KB answer */
.uc-frame--answer .uc-frame-q {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 0.9375rem;
    color: var(--text-on-chalk-soft);
    margin: 0 0 var(--s-16);
}

.uc-frame-a {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text-on-chalk);
    margin: 0;
}

.uc-frame-ameta { font-family: var(--font-sans); font-size: 0.875rem; color: var(--text-on-chalk-soft); margin: var(--s-8) 0 var(--s-16); }

.uc-frame-cite {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    color: var(--hot);
    margin: 0;
    padding-top: var(--s-12);
    border-top: 1px solid var(--line-on-chalk);
}

/* ---- Transcript ---- */
.uc-transcript { max-width: 820px; margin-inline: auto; }
.uc-transcript-title { margin: var(--s-12) 0 var(--s-32); max-width: 32ch; }

.uc-script { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-16); }

.uc-line { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-16); align-items: baseline; }

.uc-line-who {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.uc-line--agent .uc-line-who { color: var(--hot); }
.uc-line--customer .uc-line-who { color: var(--text-on-chalk-soft); }

.uc-line-text { font-size: 1rem; line-height: 1.55; color: var(--text-on-chalk); }
.uc-line--customer .uc-line-text { color: var(--text-on-chalk-soft); }

@media (max-width: 640px) {
    .uc-line { grid-template-columns: 1fr; gap: 2px; }
}

.uc-close-display { max-width: 20ch; }

/* ============================================================
   Themed sample-call audio player (voice use cases)
   ============================================================ */
.audio-sample {
    background: var(--ink);
    color: var(--text-on-ink);
    border: 1px solid var(--ink-line);
    border-radius: 14px;
    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.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-on-ink-soft);
}

.audio-marker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hot); }
.audio-sample.is-playing .audio-marker-dot { animation: audio-pulse 1.4s var(--ease-out-quart) infinite; }

@keyframes audio-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.audio-waveform { position: relative; height: 56px; --audio-progress: 0%; }

.audio-waveform-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.audio-waveform-svg--base rect { fill: oklch(72% 0.018 252 / 0.32); }
.audio-waveform-svg--heard { clip-path: inset(0 calc(100% - var(--audio-progress)) 0 0); }
.audio-waveform-svg--heard rect { fill: var(--hot); }

.audio-waveform-playhead {
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: var(--audio-progress);
    width: 2px;
    background: var(--hot);
    box-shadow: 0 0 10px oklch(78% 0.13 210 / 0.8);
}

.audio-transport { display: flex; align-items: center; gap: var(--s-16); }

.audio-play-button {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--hot);
    border: none;
    color: var(--text-on-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--dur-state) var(--ease-out-quart),
                transform var(--dur-feedback) var(--ease-out-quart);
}

.audio-play-button:hover { background: var(--hot-deep); }
.audio-play-button:active { transform: translateY(1px); }
.audio-play-button:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }

.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.8125rem; color: var(--text-on-ink); display: flex; gap: 4px; }
.audio-time-sep, .audio-time-total { color: var(--text-on-ink-soft); }

.audio-meta-strip {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-on-ink-soft);
}

/* ============================================================
   Elevator-pitch sections
   Knowledge Base compact cards, Why It Holds Up (trust), and the
   How-it-works horizontal stepper. (The Solution band, sample-call
   and In Production testimonials live in their own blocks near the
   end of the file.)
   ============================================================ */

/* ----- Knowledge Base compact cards (elevator-pitch treatment) ----- */
.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: 560px) {
    .kb-grid-2,
    .kb-grid-3 { grid-template-columns: 1fr 1fr; }
}

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

.kb-card {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    background: var(--cobalt-deep);
    color: var(--text-on-cobalt);
    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,
.kb-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px oklch(13% 0.02 252 / 0.4);
}

.kb-card-media {
    /* Taller banner: the source photos are tall portraits, so a short strip
       cropped a thin middle band (clipping heads). More height + a per-card
       focal point (--kb-pos) keeps the subject and its context in frame. */
    height: clamp(190px, 19vw, 232px);
    background: var(--kb-img, var(--cobalt-deep)) var(--kb-pos, center 38%) / cover no-repeat;
    transform-origin: center;
    transition: transform 600ms var(--ease-out-quint);
}

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

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

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

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

/* ----- Why It Holds Up: trust grid on chalk ----- */
.trust-grid {
    max-width: 1240px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-16);
}

@media (min-width: 560px) {
    .trust-grid { grid-template-columns: 1fr 1fr; }
}

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

.trust-item {
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
    padding: var(--s-24);
    background: var(--chalk-deep);
    border: 1px solid var(--line-on-chalk);
    border-radius: 12px;
    border-top: 3px solid var(--cobalt);
}

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

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

/* ----- How it works: horizontal stepper ----- */
@media (min-width: 860px) {
    .steps-stepper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    /* override the default two-column hairline row layout */
    .steps-stepper .step {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        gap: var(--s-16);
        padding: var(--s-48) var(--s-24) var(--s-32);
        border-top: 1px solid var(--line-on-chalk);
        border-bottom: none;
        position: relative;
    }
    .steps-stepper .step:last-child { border-bottom: none; }

    /* hairline + arrow connector between columns */
    .steps-stepper .step:not(:first-child) {
        border-left: 1px solid var(--line-on-chalk);
    }
    .steps-stepper .step:not(:last-child)::after {
        content: "\2192";
        position: absolute;
        top: var(--s-48);
        right: calc(var(--s-24) * -0.5);
        transform: translateX(50%);
        font-family: var(--font-mono);
        color: var(--cobalt-bright);
        font-size: 1rem;
    }

    .steps-stepper .step-desc { max-width: none; }
}

/* ============================================================
   The Solution — six-card band (chalk panel)
   Solution-first: four channel solution-promises + two
   platform-layer cards (Connected systems, One dashboard).
   3x2 grid reflowing 3->2->1. The two system cards stand apart
   in cobalt so the platform layer reads distinct.
   ============================================================ */
.solution-grid {
    max-width: 1240px;
    margin: var(--s-48) auto 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-16);
}

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

.solution-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
    padding: var(--s-32);
    min-height: 220px;
    background: oklch(99% 0.004 80);
    border: 1px solid var(--line-on-chalk);
    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);
}

.solution-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px oklch(18% 0.02 252 / 0.12);
    border-color: var(--cobalt-bright);
}

.solution-card-tag {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hot-text);
}

.solution-card-title {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--text-on-chalk);
    text-wrap: balance;
}

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

/* The two platform-layer cards stand apart in cobalt. */
.solution-card--system {
    background: var(--cobalt);
    border-color: transparent;
}

.solution-card--system .solution-card-title { color: var(--text-on-cobalt); }
.solution-card--system .solution-card-line { color: var(--text-on-cobalt-soft); }
/* On the violet card only the panel's own light text clears 4.5:1. */
.solution-card--system .solution-card-tag { color: var(--text-on-cobalt); }

/* ============================================================
   Sample call — use-case example block (cobalt panel)
   A short "From the call" transcript snippet beside the themed
   AudioSample player. Two-up at >=860px, stacked below.
   ============================================================ */
.callproof-script {
    margin-top: var(--s-32);
    border-left: 1px solid var(--line-on-cobalt);
    padding-left: var(--s-24);
    max-width: 52ch;
}

.callproof-script-label {
    display: block;
    margin-bottom: var(--s-16);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-on-cobalt-soft);
}

.callproof-script p {
    margin: 0 0 var(--s-8);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-on-cobalt-soft);
}

.callproof-script b { color: var(--text-on-cobalt); font-weight: 600; }

.callproof-more { margin-top: var(--s-4); }

.callproof-more > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--s-8);
    padding: var(--s-8) 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(82% 0.105 252);
    transition: color var(--dur-state) var(--ease-out-quint);
}

.callproof-more > summary::-webkit-details-marker { display: none; }

.callproof-more > summary::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 0.95rem;
    line-height: 1;
}

.callproof-more[open] > summary::after { content: "\2212"; }

.callproof-more > summary:hover,
.callproof-more > summary:focus-visible { color: var(--text-on-cobalt); }

.callproof-more p:first-of-type { margin-top: var(--s-12); }

/* On-page sample call sits in the proof grid; constrain its width there */
.proof-sample { margin-top: var(--s-32); max-width: 560px; }

.proof-sample-head { margin: 0 0 var(--s-12); max-width: 24ch; }

.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) {
    .panel-proof--sample { padding-bottom: var(--s-128); }
    .proof-layout.proof-layout--sample {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
        gap: var(--s-64);
        align-items: center;
    }
    .proof-layout.proof-layout--sample .proof-text { align-self: center; }
    .proof-layout.proof-layout--sample .proof-sample { margin-top: 0; }
}

/* ============================================================
   In Production — testimonials grid (ink panel)
   Light cards with a hot top-rule, a mono tag, a quote, and a
   name/role cite. 3-up reflowing to a single column.
   ============================================================ */
.testimonials {
    max-width: 1240px;
    margin: var(--s-48) auto 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-24);
}

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

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

.testimonial:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px oklch(10% 0.02 252 / 0.45);
}

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

.t-quote {
    margin: 0;
    flex: 1 1 auto;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 1.0625rem;
    line-height: 1.45;
    letter-spacing: -0.005em;
    color: var(--text-on-chalk);
    text-wrap: pretty;
}

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

.t-cite b {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-on-chalk);
    font-weight: 600;
}

.t-role {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-on-chalk-soft);
}

/* ============================================================
   Price-lead — entry price + first-month-free badge, shown on
   both the /pricing and /get-started pitch columns.
   ============================================================ */
.price-lead {
    margin: 0 0 var(--s-32);
    padding: var(--s-24) 0;
    border-top: 1px solid var(--line-on-chalk);
    border-bottom: 1px solid var(--line-on-chalk);
}

.price-lead-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-12);
}

.price-lead-figure {
    font-family: var(--font-sans);
    font-size: clamp(1.75rem, 1vw + 1.4rem, 2.25rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--text-on-chalk);
}

.price-lead-badge {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Ink on the violet pill: light text on this bright violet is only 3.29:1. */
    color: var(--ink);
    background: var(--hot);
    border-radius: 999px;
    padding: var(--s-4) var(--s-12);
}

.price-lead-sub {
    margin: var(--s-12) 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-on-chalk-soft);
    max-width: 50ch;
}

.price-lead-link {
    color: var(--hot-deep);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.price-lead-link:hover,
.price-lead-link:focus-visible { color: var(--hot); }

/* ============================================================
   Footer — "Powered by KwickBlocks" credit (bottom strip)
   ============================================================ */
.footer-powered {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-on-ink-soft);
}

.footer-powered a {
    color: var(--cobalt-bright);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-state) var(--ease-out-quint);
}

.footer-powered a:hover,
.footer-powered a:focus-visible { border-bottom-color: var(--cobalt-bright); }

/* ============================================================
   CTA block + supporting hook line (hero + final CTA)
   The hook hugs the button group (own flex column) and plants the
   "hear it built around your own firm" mechanic under the primary 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); min-height: min(88vh, 720px); }
    .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 supporting lead, the transcript
       snippet, and the secondary link are hidden on phones. */
    #sample-call .proof-text .lead,
    #sample-call .callproof-script,
    #sample-call .proof-text .cta-secondary,
    #sample-call .proof-sample-line { display: none; }
    #sample-call .proof-sample { margin-top: var(--s-24); }
    #sample-call .proof-sample-head { margin-bottom: var(--s-12); }

    /* ---- 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; }
    .testimonials .t-quote { font-size: 1.0625rem; line-height: 1.45; }

    [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%;
        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); }
}

/* ============================================================
   Molten Graphite — identity override layer
   (display font, premium-automotive hero, indigo spark)
   ============================================================ */

/* Headlines ride on Clash Display; body/labels keep Satoshi/Space Mono. */
.display,
.headline,
.title,
.hero-display,
.uc-h2,
.kb-tile-title,
.kb-foundation-core-name,
.solution-card-title,
.shift-stat-num,
.lead-pitch-title,
.lead-card-title,
.uc-transcript-title {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
.display, .hero-display { letter-spacing: -0.018em; }
.hero-display { font-weight: 600; }

/* Testimonial quotes read better in the body face than the display face */
.t-quote { font-family: var(--font-sans); letter-spacing: -0.005em; }

/* KB phase eyebrow + marker need dark ink on the amber panel */
.panel-cobalt .phase-label { color: var(--text-on-cobalt); }
.panel-cobalt .phase-label::before { background: var(--ink); }

/* Hero proof points — three checked statements under the hero CTA */
.hero-proof {
    list-style: none;
    margin: 1.9rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.9rem;
    max-width: 660px;
}
.hero-proof li {
    position: relative;
    padding-left: 1.95rem;
    font-size: 0.95rem;
    line-height: 1.35;
    color: rgba(244, 246, 250, 0.92);
    text-shadow: 0 1px 10px rgba(14, 19, 32, 0.7);
}
.hero-proof li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0.02em;
    width: 1.35rem;
    height: 1.35rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(109, 74, 255, 0.28);
    border: 1px solid rgba(91, 140, 255, 0.55);
    color: var(--hot);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
@media (max-width: 640px) {
    .hero-proof { gap: 0.55rem 1.2rem; margin-top: 1.4rem; }
    .hero-proof li { font-size: 0.85rem; }
}

/* Premium-automotive hero: deep graphite base + a molten glow, not a flat
   amber flash before the footage paints. */
.panel-hero { background: var(--ink); color: var(--text-on-ink); }
.hero-video { background: var(--ink); }
.panel-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--grad-hero);
    mix-blend-mode: screen;
    opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
    /* keep the glow lively even with the video off */
    .panel-hero::after { opacity: 1; }
}

/* Electric-indigo spark for links + focus on light surfaces */
a:focus-visible,
.nav-link:focus-visible,
.cta:focus-visible { outline-color: var(--indigo); }
.panel-chalk a:not(.cta):hover { color: var(--cobalt-deep); }

/* Molten CTA: the primary action carries the brand gradient + amber glow */
.cta-primary {
    background: var(--grad-molten);
    color: #FFF;
    border-color: transparent;
}
.cta-primary:hover,
.cta-primary:focus-visible {
    background: var(--grad-molten);
    box-shadow: 0 14px 34px -14px rgba(109, 74, 255, 0.75),
                0 2px 0 0 rgba(255, 255, 255, 0.18) inset;
    transform: translateY(-1px);
}
.cta-primary:active { transform: translateY(0); }
/* On the amber panel a molten button would vanish — go solid ink there */
.panel-cobalt .cta-primary {
    background: var(--ink);
    color: var(--text-on-ink);
}
.panel-cobalt .cta-primary:hover { background: #000; box-shadow: 0 14px 34px -16px rgba(20,17,15,.8); }

/* Warm the ::selection + brand dot to the amber accent */
.brand-dot { color: var(--cobalt); }

/* KB lifecycle phase label marker in amber, not the cool default */
.phase-label::before { background: var(--cobalt); }

/* ============================================================
   Fixed (sticky) nav on every page — mirrors the family hotels/hub sites. Transparent over the hero / ink band,
   solid ink + blur on scroll (js/nav-scroll.js toggles .scrolled).
   ============================================================ */
:root { --nav-h: 72px; }
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 var(--dur-state) var(--ease-out-quart),
                backdrop-filter var(--dur-state) var(--ease-out-quart),
                border-color var(--dur-state) var(--ease-out-quart);
}

/* free the fixed nav from the hero's isolate stacking context so it
   paints above every later section, and beat the earlier hero rules */
.panel-hero { isolation: auto; }
.panel-hero > .site-nav { position: fixed; z-index: 100; }

/* solid surface once scrolled: site ink at 0.90, blurred */
.site-nav.scrolled {
    background: oklch(15% 0.012 252 / 0.90);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom-color: var(--line-on-ink);
}

/* non-hero pages held the nav in a short band -> reserve its height
   so content is not hidden beneath the now-fixed nav */
.page-mini-hero,
.lead-nav-band {
    padding-top: calc(var(--nav-h) + var(--s-16));
}

/* ============================================================
   HUB ADDITIONS (product-hub-site-builder) — Engenix.Ai
   ============================================================ */

/* Per-business nav dropdowns: anchor each menu under its own trigger
   (with a fixed .site-nav the offset parent is the full-width nav). */
.nav-uc { position: relative; }
.uc-megamenu--mini { left: 0; right: auto; }
.nav-uc--right .uc-megamenu--mini { left: auto; right: 0; }
.nav-uc.is-open .uc-megamenu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.nav-uc--cta .nav-uc-caret { margin-left: 2px; color: currentColor; }
@media (min-width: 901px) {
    .uc-megamenu--mini .uc-megamenu-inner {
        max-width: 360px; margin-inline: 0; grid-template-columns: 1fr;
    }
}
@media (min-width: 1100px) {
    .uc-megamenu--mini .uc-megamenu-inner { grid-template-columns: 1fr; }
}

/* Business-types directory (the hub's signature section) */
.directory {
    display: grid; grid-template-columns: 1fr; gap: var(--s-24); margin-top: var(--s-48);
}
@media (min-width: 760px) {
    .directory { grid-template-columns: repeat(2, 1fr); gap: var(--s-32); }
}
.dir-card {
    --card-accent: var(--cobalt);
    display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
    background: var(--ink); color: var(--text-on-ink);
    border: 1px solid var(--ink-line); border-radius: 20px; box-shadow: var(--frame-shadow);
    transition: transform var(--dur-state) var(--ease-out-quart),
                box-shadow var(--dur-state) var(--ease-out-quart),
                border-color var(--dur-state) var(--ease-out-quart);
}
.dir-card:hover { transform: translateY(-6px); border-color: var(--card-accent); box-shadow: var(--frame-shadow-hover); }
.dir-card:focus-visible { outline: 3px solid var(--card-accent); outline-offset: 3px; }
.dir-card-media {
    aspect-ratio: 16 / 10; position: relative;
    background: var(--card-img) center / cover no-repeat, var(--ink-elev);
    border-bottom: 3px solid var(--card-accent);
}
.dir-card-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(8, 12, 20, 0.66));
}
.dir-card-body { padding: var(--s-32); display: flex; flex-direction: column; gap: var(--s-12); flex: 1; }
.dir-card-tag {
    align-self: flex-start; font-family: var(--font-mono); font-size: 0.7rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
    background: var(--card-accent); padding: 6px 13px; border-radius: 999px;
}
.dir-card-title {
    font-family: var(--font-display); font-weight: 600; color: #fff; margin: 0;
    font-size: clamp(1.4rem, 2.5vw, 1.95rem); line-height: 1.08; letter-spacing: -0.01em;
}
.dir-card-line { color: var(--text-on-ink-soft); margin: 0; }
.dir-card-go {
    margin-top: auto; padding-top: var(--s-8); font-family: var(--font-mono);
    font-size: 0.85rem; letter-spacing: 0.03em; font-weight: 700;
    /* Each child brand's accent, lifted towards white so it clears 4.5:1 on the
       ink card while staying that child's colour. The pill keeps the pure accent. */
    color: color-mix(in srgb, var(--card-accent) 65%, #fff);
}
.dir-card:hover .dir-card-go { color: #fff; }

/* Footer three-part strip: the sector quote line */
.footer-strip {
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    text-align: center; padding: var(--s-24) var(--s-24) 0; margin-top: var(--s-16);
}
.footer-strip-quote {
    font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
    color: var(--text-on-ink-soft, #A99EC4);
}

/* Why-It-Holds-Up reuses .channel cards on a cobalt panel: force light text. */
.panel-cobalt .channel-name { color: #fff; }
/* Dimmed white on the violet panel fell to 4.34:1 and 3.42:1, so both take the
   panel's own text tokens instead. */
.panel-cobalt .channel-desc { color: var(--text-on-cobalt); }
.panel-cobalt .channel-index { color: var(--text-on-cobalt-soft); }
.panel-cobalt .channel { border-top-color: rgba(255, 255, 255, 0.26); }

/* The nav CTA renders as a button (the .nav-uc-trigger / nav link reset was winning). */
.nav-uc--cta .nav-uc-trigger { background: var(--hot); color: #fff; border: 1px solid transparent; border-radius: 999px; padding: 0.5rem 1.05rem; }
.nav-uc--cta .nav-uc-trigger:hover { background: var(--hot-deep); color: #fff; }


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

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