/* ============================================================
   Indigo & Cover, at sector level
   Design system for KwickBlocks Atlantas.Ai (the parent hub at atlantas.ai)
   Royal-indigo ground, vivid-emerald accent, cool porcelain.
   The parent palette is the family's neutral ground; each business-type
   card carries its own child accent (--card-accent) so it stands out.
   ============================================================ */

/* ------------------------------------------------------------
   Tokens
   ------------------------------------------------------------ */
:root {
    /* Colour: the Atlantas "Black & Blue" identity, taken straight from the mark
       (a black delta over a blue wave). Black is the structural ground; a single
       azure blue is the accent, link and CTA. Cool porcelain stays the light
       surface. OKLCH; chroma committed but gamut-safe.
       NB: the token names (--cobalt, --hot) are kept from the scaffold for
       structural reuse; their values are now black (cobalt) and blue (hot). */

    /* Structural dark band (panel-cobalt): graphite black */
    --cobalt:        oklch(26% 0.018 250);   /* load-bearing graphite black */
    --cobalt-deep:   oklch(20% 0.015 250);   /* pressed / deeper panel */
    --cobalt-bright: oklch(70% 0.110 242);   /* light-blue link / hairline accent on dark */

    /* Deepest surface (panel-ink): near-black ink */
    --ink:           oklch(15% 0.012 250);   /* near-black dark surface */
    --ink-elev:      oklch(20% 0.014 250);   /* lifted ink (product frame) */
    --ink-line:      oklch(30% 0.016 250);   /* hairline on ink */

    --chalk:         oklch(97% 0.005 250);   /* cool porcelain light surface */
    --chalk-deep:    oklch(93.5% 0.007 250); /* porcelain pressed */

    --hot:           oklch(53% 0.125 244);   /* azure blue: the accent + CTA (white text) */
    --hot-deep:      oklch(45% 0.120 244);   /* blue pressed */
    --accent-ink:    oklch(44% 0.130 248);   /* deep blue for accent TEXT on light surfaces (AA on porcelain) */

    /* Named aliases used by the marketing-section CSS */
    --glint:         oklch(74% 0.110 240);   /* bright blue highlight on dark bands */
    --glint-deep:    oklch(66% 0.115 241);
    --card:          oklch(99% 0.003 250);   /* card white over porcelain */

    /* Text on each surface */
    --text-on-chalk:       oklch(20% 0.012 250);
    --text-on-chalk-soft:  oklch(43% 0.014 250);
    --text-on-cobalt:      oklch(98% 0.004 250);
    --text-on-cobalt-soft: oklch(88% 0.010 250);
    --text-on-ink:         oklch(97% 0.004 250);
    --text-on-ink-soft:    oklch(76% 0.012 250);
    --text-on-hot:         oklch(99% 0.004 250);  /* near-white text/icons on the blue fill */

    /* Hairlines */
    --line-on-chalk:  oklch(30% 0.020 250 / 0.18);
    --line-on-cobalt: oklch(98% 0.004 250 / 0.22);
    --line-on-ink:    oklch(97% 0.004 250 / 0.14);

    /* Radii (Atlantas: softly rounded frames, hairline rules) */
    --r:    16px;
    --r-sm: 10px;
    --r-lg: 22px;

    /* 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. Fraunces (Google), a warm soft old-style serif, for display headings;
       Hanken Grotesk humanist sans for body + UI; Geist Mono for eyebrows, tags,
       numbers and indices. Shared with the insurance child so the family matches. */
    --font-display: "Fraunces", "Hanken Grotesk", Georgia, "Times New Roman", serif;
    --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

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

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

    /* Component shadows (only on product frames + CTA active) */
    --frame-shadow:  0 24px 60px oklch(12% 0.010 250 / 0.34),
                     0 4px 14px  oklch(12% 0.010 250 / 0.20);
    --frame-shadow-hover: 0 32px 72px oklch(12% 0.010 250 / 0.40),
                          0 6px 16px  oklch(12% 0.010 250 / 0.24);
    --cta-shadow-active: inset 0 2px 4px oklch(12% 0.010 250 / 0.30);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.display {
    font-family: var(--font-display);
    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-display);
    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-display);
    font-size: clamp(1.375rem, 0.6vw + 1.2rem, 1.75rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.012em;
    text-wrap: balance;
    margin: 0;
}

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

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

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

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

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

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

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

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

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

.panel-cobalt a:hover,
.panel-cobalt a:focus-visible,
.panel-ink    a:hover,
.panel-ink    a:focus-visible {
    color: oklch(74.0% 0.13 244);
    border-bottom-color: oklch(74.0% 0.13 244);
}

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-display);
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* The lockup's full stop is real text, so it must clear AA on whatever it sits
   on: deep emerald on the light nav bands, lifted emerald on the dark ones. */
.brand-dot {
    color: var(--accent-ink);
}

/* On the dark bands the dot must clear AA against royal indigo (the lightest
   of them, at 44% L), so it is lifted well past the mid emerald. */
.panel-cobalt .brand-dot,
.panel-ink    .brand-dot,
.page-mini-hero .brand-dot,
.lead-nav-band .brand-dot,
.site-nav.scrolled .brand-dot {
    color: oklch(88.0% 0.115 244);
}

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

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

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

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

.panel-cobalt .nav-link:hover,
.panel-cobalt .nav-link:focus-visible {
    color: oklch(74.0% 0.13 244);
}

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

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

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

.cta-primary:hover,
.cta-primary:focus-visible {
    background: var(--hot-deep);
    border-color: var(--hot-deep);
    color: var(--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% 0.001 250 / 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% 0.002 250 / 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% 0.002 250 / 0.55) 0%,
        oklch(15.0% 0.002 250 / 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% 0.002 250 / 0.62) 0%,
        oklch(15.0% 0.002 250 / 0.30) 42%,
        oklch(15.0% 0.002 250 / 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); }
}

/* ------------------------------------------------------------
   Atlantas additions: a committed emerald band, emerald accents,
   an indigo hero glow. Layered on top of the token base so the page
   reads as the family ground, not just a recolour.
   ------------------------------------------------------------ */

/* A committed full-colour emerald band for the vivid "pop" moments.
   The emerald band is light, so text on it is dark ink. */
.panel-emerald {
    background: var(--hot);
    color: var(--ink);
}
.panel-emerald .eyebrow { color: var(--ink); }
.panel-emerald .body,
.panel-emerald .lead { color: var(--ink); }
.panel-emerald .headline,
.panel-emerald .display { color: var(--ink); }
.panel-emerald .cta-secondary {
    border-color: oklch(20.0% 0.004 250 / 0.55);
    color: var(--ink);
}
.panel-emerald .cta-secondary:hover,
.panel-emerald .cta-secondary:focus-visible {
    background: oklch(20.0% 0.004 250 / 0.1);
    border-color: var(--ink);
    color: var(--ink);
}
/* On an emerald band the primary CTA inverts to porcelain; keep dark ink text on it */
.panel-emerald .cta-primary {
    background: var(--chalk);
    color: var(--ink);
    border-color: var(--chalk);
}
.panel-emerald .cta-primary:hover,
.panel-emerald .cta-primary:focus-visible {
    background: oklch(93.0% 0.002 250);
    border-color: oklch(93.0% 0.002 250);
    color: var(--ink);
}

/* Accent rule beside section-head eyebrows */
.section-head .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-8);
}
.section-head .eyebrow::before {
    content: "";
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--glint);
    flex: 0 0 auto;
}
/* Two-tone accent bar: emerald on the dark bands, royal indigo on the light ones. */
.panel-chalk .section-head .eyebrow::before { background: var(--cobalt); }

/* An indigo glow rising from the hero base, under the scrims */
.panel-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(0deg,
        oklch(48.0% 0.03 250 / 0.42) 0%,
        oklch(48.0% 0.03 250 / 0) 100%);
}

/* The primary CTA gets an emerald-tinted glow on hover */
.cta-primary:hover,
.cta-primary:focus-visible {
    box-shadow: 0 10px 30px -10px oklch(64.0% 0.13 244 / 0.55);
}

/* Two-link row under the home sample-call transcript */
.proof-text-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-12);
    margin-top: var(--s-32);
}

/* Hero proof-point trio (under the hook line) */
.hero-points {
    list-style: none;
    margin: var(--s-4) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-8) var(--s-24);
}
.hero-points li {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--text-on-cobalt-soft);
    display: inline-flex;
    align-items: center;
    gap: var(--s-8);
}
.hero-points li::before {
    content: "\2713";
    color: var(--glint);
    font-weight: 700;
    font-family: var(--font-sans);
}

/* Home sample-call scene image, stacked above the themed player */
.proof-sample-figure {
    margin: 0 0 var(--s-24);
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--line-on-cobalt);
    box-shadow: 0 18px 50px -24px rgba(20, 16, 12, 0.5);
}
.proof-sample-figure img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

/* ------------------------------------------------------------
   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: center;
    text-align: center;
    max-width: 820px;
    margin-inline: auto;
}

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

.final-cta .body { margin-inline: auto; }
.final-cta .cta-block { align-items: center; }

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

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

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

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

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

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

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

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

/* Accreditations band - a quiet mono row in the site footer naming the
   M&E-relevant compliance bodies 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);
}

/* Required three-part bottom strip: copyright (left) · industry quote
   (centre) · Powered by KwickBlocks (right). Stacks centred on phones. */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-12) var(--s-24);
    max-width: 1240px;
    margin: var(--s-24) auto 0;
    padding-top: var(--s-16);
    border-top: 1px solid var(--ink-line);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

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

@media (max-width: 640px) {
    .footer-bottom {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}

@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;
    justify-content: space-around;
    gap: var(--s-8) var(--s-24);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    color: var(--text-on-cobalt-soft);
}

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

.kb-foundation-channels li::before {
    content: "";
    width: 5px;
    height: 5px;
    background: oklch(74.0% 0.13 244);
    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: oklch(74.0% 0.13 244);
}

.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% 0.004 250 / 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% 0.004 250 / 0) 0%,
        oklch(15.0% 0.004 250 / 0.04) 42%,
        oklch(15.0% 0.004 250 / 0.32) 74%,
        oklch(13.0% 0.004 250 / 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(34.0% 0.023 250 / 0.45) 0%,
        oklch(15.0% 0.004 250 / 0.78) 50%,
        oklch(12.0% 0.004 250 / 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% 0.004 250 / 0.6);
}

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

.kb-tile-tag {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(74.0% 0.13 244);
    text-shadow: 0 1px 8px oklch(13.0% 0.004 250 / 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% 0.004 250 / 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 oklch(58.0% 0.13 244 / 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% 0.002 250 / 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% 0.001 250);
    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% 0.004 250 / 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% 0.001 250);
    border: 1px solid var(--line-on-chalk);
    border-radius: 8px;
    padding: var(--s-32);
    box-shadow: 0 12px 40px oklch(15.0% 0.004 250 / 0.08);
}

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

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

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

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

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

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

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

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

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

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

.wizard-step.active .wizard-step-circle {
    border-color: var(--hot);
    color: var(--hot);
    box-shadow: 0 0 0 3px oklch(58.0% 0.13 244 / 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% 0.002 250); }

.lead-form .form-control:focus,
.lead-form .form-select:focus {
    outline: none;
    border-color: var(--hot);
    box-shadow: 0 0 0 3px oklch(58.0% 0.13 244 / 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(44.0% 0.027 250 / 0.04);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.lead-alert {
    margin-top: var(--s-16);
    padding: var(--s-12) var(--s-16);
    border: 1px solid oklch(58.0% 0.13 244 / 0.35);
    border-radius: 6px;
    background: oklch(58.0% 0.13 244 / 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: oklch(74.0% 0.13 244);
    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: oklch(70.0% 0.13 244);
    border: 1px solid oklch(70.0% 0.13 244 / 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% 0.001 250);
    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% 0.003 250 / 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(70.0% 0.13 244 / 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% 0.004 250 / 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% 0.001 250);
    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% 0.004 250 / 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(--accent-ink); /* deep gold: AA on the light solution cards */
}
.solution-card--system .solution-card-tag { color: var(--cobalt-bright); } /* bright gold on the dark system cards */

.solution-card-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.2vw + 1.15rem, 1.95rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    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); }
.solution-card--system .solution-card-tag { color: var(--glint); }

/* ============================================================
   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: var(--glint);
    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);
        /* stretch (not centre) so neither column leaves a blank band:
           the media column fills the full height of the text column */
        align-items: stretch;
    }
    /* The media column is a flex stack: the customer-call image grows to
       fill all the space above the fixed header + player, so there is no
       wasted real estate beside the longer text column. */
    .proof-layout.proof-layout--sample .proof-sample {
        margin-top: 0;
        max-width: none;
        display: flex;
        flex-direction: column;
    }
    .proof-layout.proof-layout--sample .proof-sample-figure {
        /* fill the space the text column leaves above the player, instead of
           forcing the media column taller and stranding a gap beside the text */
        flex: 1 1 auto;
        min-height: 160px;
        position: relative;
        margin-bottom: var(--s-24);
    }
    .proof-layout.proof-layout--sample .proof-sample-figure img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: auto;
    }
    /* keep the header + line + player snug at the foot of the column */
    .proof-layout.proof-layout--sample .proof-sample-head { 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% 0.001 250);
    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% 0.004 250 / 0.45);
}

.t-tag {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-ink); /* deep gold: AA on the white testimonial card */
}

.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;
    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(--accent-ink);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

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

    /* Hero proof-point trio is decorative secondary copy: hide on phones */
    .hero-points { display: none; }

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

/* ============================================================
   Business-types directory (hub): the signature section
   Each card carries its sub-vertical's accent via --card-accent
   (top bar / bright) and --card-ink (AA-safe text on white).
   ============================================================ */
.verticals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-32);
    margin-top: var(--s-64);
}
.vertical-card {
    --card-accent: var(--hot);
    --card-ink: var(--accent-ink);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-decoration: none;
    color: var(--text-on-chalk);
    background: var(--card);
    border: 1px solid var(--line-on-chalk);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--frame-shadow);
    transition: transform var(--dur-state) var(--ease-out-quart),
                box-shadow var(--dur-state) var(--ease-out-quart);
}
.vertical-card:hover,
.vertical-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--frame-shadow-hover);
    outline: none;
}
.vertical-card:focus-visible { box-shadow: var(--frame-shadow-hover), 0 0 0 3px var(--card-accent); }
.vertical-card-media {
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: var(--chalk-deep);
}
.vertical-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-reveal) var(--ease-out-quint);
}
.vertical-card:hover .vertical-card-media img { transform: scale(1.06); }
.vertical-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, oklch(20.0% 0.004 250 / 0.55));
}
.vertical-card-badge {
    position: absolute;
    left: var(--s-16);
    top: var(--s-16);
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: oklch(99.0% 0.001 250);
    background: var(--card-accent);
    padding: 0.34em 0.7em;
    border-radius: 999px;
}
.vertical-card-domain {
    position: absolute;
    left: var(--s-16);
    bottom: var(--s-16);
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: oklch(99.0% 0.001 250);
    text-shadow: 0 1px 6px oklch(20.0% 0.004 250 / 0.6);
}
.vertical-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
    padding: var(--s-32);
    border-top: 3px solid var(--card-accent);
    flex: 1;
}
.vertical-card-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1.05;
    margin: 0;
    color: var(--ink);
}
.vertical-card-line {
    margin: 0;
    color: var(--text-on-chalk-soft);
    font-size: 1.0625rem;
    line-height: 1.5;
}
.vertical-card-go {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-weight: 600;
    color: var(--card-ink);
}
.vertical-card-go svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-state) var(--ease-out-quart); }
.vertical-card:hover .vertical-card-go svg { transform: translateX(4px); }

@media (max-width: 900px) {
    .verticals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24); }
}
@media (max-width: 640px) {
    .verticals { grid-template-columns: 1fr; gap: var(--s-24); margin-top: var(--s-32); }
    .vertical-card-body { padding: var(--s-24); }
    .vertical-card-label { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .vertical-card, .vertical-card-media img, .vertical-card-go svg { transition: none; }
    .vertical-card:hover { transform: none; }
    .vertical-card:hover .vertical-card-media img { transform: none; }
}

/* ============================================================
   Nav dropdowns: anchor each menu to its OWN trigger. They were
   mis-anchored to the now-fixed .site-nav and drifting to the far
   left of the page. Compact single-group panels; right-hand menus
   open right-aligned so they never overflow the viewport. Plus a
   emerald CTA-style trigger for the 'Your business, live' dropdown.
   ============================================================ */
.nav-uc { position: relative; }

/* 'Your business, live' trigger looks like the primary emerald CTA (all widths) */
.nav-uc--cta .nav-uc-trigger {
    background: var(--hot);
    color: var(--text-on-hot);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-weight: 600;
}
.nav-uc--cta:hover .nav-uc-trigger,
.nav-uc--cta:focus-within .nav-uc-trigger { background: var(--hot-deep); color: var(--text-on-hot); }
.nav-uc--cta .nav-uc-caret { color: var(--text-on-hot); }

@media (min-width: 901px) {
    .uc-megamenu { left: 0; right: auto; }
    .nav-uc--right .uc-megamenu { left: auto; right: 0; }
    .uc-megamenu-inner {
        grid-template-columns: 1fr;
        width: 288px;
        max-width: 92vw;
        margin-inline: 0;
    }
}

/* get-started.html ?intent= toggle: show only the copy for the active intent.
   The inline head script sets <html data-intent="pricing|get-started"> before paint. */
[data-intent="get-started"] [data-for="pricing"],
[data-intent="pricing"] [data-for="get-started"] { display: none; }

/* ============================================================
   Fixed nav: pinned on every page (matches the insurance child)
   ============================================================ */
:root { --nav-h: 62px; }
html { scroll-padding-top: var(--nav-h); }

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color 0.28s var(--ease-out-quart),
                box-shadow 0.28s var(--ease-out-quart),
                border-color 0.28s var(--ease-out-quart);
}
/* Beat the higher-specificity .panel-hero > .site-nav rule on the hero page */
.panel-hero > .site-nav { position: fixed; z-index: 100; }
.site-nav .nav-row { padding-inline: var(--s-24); }
.site-nav.scrolled {
    background: color-mix(in oklch, var(--ink) 86%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
    border-bottom-color: color-mix(in oklch, var(--glint) 24%, transparent);
}

/* Non-hero pages: their nav band must leave room for the now-fixed nav. */
.lead-nav-band { padding-top: calc(var(--nav-h) + var(--s-16)); }

/* The hero's `isolation: isolate` created a stacking context that trapped
   the now-fixed nav: past the hero, later sections painted over it. Drop the
   isolation so the fixed nav (z-index 100) sits in the root stacking context
   and stays on top on every scroll position. */
.panel-hero { isolation: auto; }

/* JS-opened dropdown state (a page CTA can open a nav menu, e.g. Get Started) */
.nav-uc.is-open .uc-megamenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* ============================================================
   Hub deltas for the Atlantas family (two business types)
   The directory is a two-up grid so it still fills the band, and
   an unbuilt sub-vertical renders as a non-clickable "coming soon"
   card rather than a live link to a subdomain that does not exist.
   ============================================================ */
.verticals--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-48);
    max-width: 1060px;
    margin-inline: auto;
}
.verticals--two .vertical-card-media { aspect-ratio: 16 / 10; }
.verticals--two .vertical-card-label { font-size: 2rem; }

/* A sub-vertical whose site is not built yet. Rendered as a <div>, not an <a>. */
.vertical-card--soon {
    cursor: default;
    box-shadow: none;
    border-style: dashed;
    border-color: color-mix(in oklch, var(--card-accent) 45%, transparent);
}
.vertical-card--soon:hover { transform: none; box-shadow: none; }
.vertical-card--soon .vertical-card-media img {
    filter: saturate(0.45) contrast(0.95);
    opacity: 0.72;
}
.vertical-card--soon:hover .vertical-card-media img { transform: none; }
.vertical-card--soon .vertical-card-badge {
    background: var(--chalk-deep);
    color: var(--text-on-chalk-soft);
    border: 1px solid var(--line-on-chalk);
}
.vertical-card--soon .vertical-card-domain { opacity: 0.75; }
.vertical-card--soon .vertical-card-go {
    color: var(--text-on-chalk-soft);
    font-weight: 500;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* A "coming soon" row inside a nav dropdown: a <span>, never an anchor. */
.uc-row--soon {
    cursor: default;
    opacity: 0.62;
}
.uc-row--soon:hover { background: none; }
.uc-row--soon .uc-row-arrow { display: none; }

@media (max-width: 900px) {
    .verticals--two { grid-template-columns: 1fr; gap: var(--s-32); max-width: 560px; }
    .verticals--two .vertical-card-label { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .vertical-card--soon .vertical-card-media img { transition: none; }
}

/* ------------------------------------------------------------
   Hero legibility. The hub montage is brighter footage than the
   children's (daylit offices, not evening interiors), so the video
   is dimmed a touch and the headline pool is deepened. White type
   over the brightest frame still clears AA.
   ------------------------------------------------------------ */
.panel-hero .hero-video {
    filter: brightness(0.66) saturate(1.06);
}
.panel-hero .hero-body {
    background: radial-gradient(125% 105% at 0% 50%,
        oklch(15.0% 0.002 250 / 0.72) 0%,
        oklch(15.0% 0.002 250 / 0.42) 46%,
        oklch(15.0% 0.002 250 / 0) 76%);
}

/* The emerald tag on the indigo "system" cards measured 4.37:1 against the
   card fill. Lift it so 11px uppercase text clears WCAG AA (4.5:1). */
.solution-card--system .solution-card-tag { color: oklch(85.0% 0.13 244); }


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