/* =====================================================================
   Ryku.Ai — Building Intelligence
   Design system: light-cool premium surface, saturated electric blue,
   an "access-granted" green signal accent, one deep-ink AI band.
   Space Grotesk (display) + Hanken Grotesk (body) + Geist Mono.
   Authored from DESIGN.md (impeccable method). Do not reuse reference CSS.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
    --ink: #0A1330;
    --ink-2: #101C44;
    --cobalt: #1F5BFF;
    --cobalt-deep: #0E3AD6;
    --granted: #27E08A;
    --granted-soft: #6BF0B4;
    --granted-ink: #0B6B43;
    --canvas: #F4F7FC;
    --surface: #FFFFFF;
    --surface-2: #EEF3FB;
    --line: #DCE3EE;
    --line-strong: #C6D2E4;
    --text: #0C1424;
    --text-soft: #54617A;
    --text-on-ink: #EAF0FF;
    --text-on-ink-soft: #9FB0D8;
    --hot: #27E08A;

    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --fs-display: clamp(2.6rem, 1.4rem + 4.6vw, 4.4rem);
    --fs-headline: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
    --fs-title: clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem);
    --fs-lead: clamp(1.08rem, 1rem + 0.45vw, 1.3rem);

    --s-4: 4px;   --s-8: 8px;   --s-12: 12px; --s-16: 16px; --s-20: 20px;
    --s-24: 24px; --s-28: 28px; --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-64: 64px;
    --s-80: 80px; --s-96: 96px; --s-128: 128px; --s-160: 160px;

    --container: 1200px;
    --gutter: clamp(20px, 5vw, 56px);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 26px;
    --shadow-sm: 0 1px 2px rgba(12, 20, 36, 0.05), 0 6px 18px rgba(12, 20, 36, 0.06);
    --shadow-md: 0 18px 48px rgba(12, 20, 36, 0.12);
    --shadow-cobalt: 0 16px 40px rgba(31, 91, 255, 0.28);
    --ring: 0 0 0 3px rgba(39, 224, 138, 0.55);

    /* Motion easing — natural deceleration, never bounce/elastic */
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--cobalt); text-decoration: none; }
a:hover { color: var(--cobalt-deep); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
    font-family: var(--font-mono); font-size: 0.8rem;
}
.skip-link:focus { left: 0; }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.column { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.column > * { max-width: 72ch; }
.panel { position: relative; padding-block: clamp(64px, 9vw, 128px); }
.panel-chalk { background: var(--canvas); color: var(--text); }
.panel-cobalt { background: var(--cobalt); color: #fff; }
.panel-ink { background: var(--ink); color: var(--text-on-ink); }
.panel-surface { background: var(--surface); color: var(--text); }

/* ---------- Typography helpers ---------- */
.display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.03em; }
.headline { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-headline); letter-spacing: -0.025em; }
.title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-title); letter-spacing: -0.02em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-soft); font-weight: 400; }
.panel-ink .lead, .panel-cobalt .lead { color: var(--text-on-ink-soft); }
.panel-cobalt .lead { color: rgba(255,255,255,0.86); }
.body { font-size: 1rem; line-height: 1.65; color: var(--text-soft); }
.panel-ink .body { color: var(--text-on-ink-soft); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 0.6em;
    font-family: var(--font-mono); font-weight: 500;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--text-soft); margin: 0;
}
.eyebrow::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--granted); box-shadow: 0 0 0 4px rgba(39, 224, 138, 0.18);
}
.panel-ink .eyebrow, .panel-cobalt .eyebrow { color: var(--text-on-ink-soft); }

/* ---------- Buttons ---------- */
.cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    font-family: var(--font-display); font-weight: 600; font-size: 1rem;
    padding: 0.85em 1.5em; border-radius: 999px; border: 1.5px solid transparent;
    cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
    white-space: nowrap; line-height: 1;
}
.cta-primary { background: var(--cobalt); color: #fff; box-shadow: var(--shadow-cobalt); }
.cta-primary:hover { background: var(--cobalt-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 22px 50px rgba(31,91,255,.36); }
.cta-secondary { background: transparent; color: var(--text); border-color: var(--line-strong); }
.cta-secondary:hover { border-color: var(--cobalt); color: var(--cobalt); transform: translateY(-2px); }
.panel-ink .cta-secondary, .panel-cobalt .cta-secondary,
.hero .cta-secondary, .uc-hero .cta-secondary, .final-cta .cta-secondary,
.solution .cta-secondary { color: #fff; border-color: rgba(255,255,255,0.45); }
.panel-ink .cta-secondary:hover, .panel-cobalt .cta-secondary:hover,
.hero .cta-secondary:hover, .uc-hero .cta-secondary:hover, .final-cta .cta-secondary:hover,
.solution .cta-secondary:hover { border-color: var(--granted); color: var(--granted); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-16); align-items: center; }

/* ---------- Reveal ---------- */
.has-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s var(--ease-out-quint); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
.has-reveal [data-reveal="shown"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .has-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =====================================================================
   SITE NAV
   ===================================================================== */
.site-nav { position: relative; z-index: 60; }
.site-nav-inner {
    display: flex; align-items: center; gap: var(--s-24);
    max-width: var(--container); margin-inline: auto; padding: var(--s-16) var(--gutter);
}
.site-nav-brand { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.03em; color: var(--text); }
.panel-ink .site-nav-brand, .panel-cobalt .site-nav-brand, .hero .site-nav-brand,
.uc-hero .site-nav-brand, .page-mini-hero .site-nav-brand { color: #fff; }
.site-nav-brand img, .site-nav-brand .brand-mark { height: 30px; width: 30px; flex: 0 0 auto; }
.brand-dot { color: var(--granted); }
.site-nav-spacer { flex: 1; }
.site-nav-links { display: flex; align-items: center; gap: var(--s-8); }
.site-nav-link {
    font-family: var(--font-body); font-weight: 500; font-size: 0.96rem;
    color: var(--text); padding: 0.5em 0.85em; border-radius: 999px; background: transparent;
    border: none; cursor: pointer; transition: background .16s ease, color .16s ease;
}
.hero .site-nav-link, .panel-ink .site-nav-link, .panel-cobalt .site-nav-link,
.uc-hero .site-nav-link, .page-mini-hero .site-nav-link { color: rgba(255,255,255,0.88); }
/* On the cobalt nav band the shared 0.88 white dips to 4.4:1 — lift to full
   white so nav links clear WCAG 1.4.3 (small text, needs 4.5:1) on cobalt. */
.panel-cobalt .site-nav-link { color: #fff; }
.site-nav-link:hover { color: var(--cobalt); }
.hero .site-nav-link:hover, .panel-ink .site-nav-link:hover, .panel-cobalt .site-nav-link:hover,
.uc-hero .site-nav-link:hover, .page-mini-hero .site-nav-link:hover { color: var(--granted); }
.site-nav .cta { padding: 0.6em 1.1em; font-size: 0.92rem; }
/* On the cobalt nav band (get-started / pricing) a cobalt-filled CTA would vanish:
   invert it to a white pill so the Instant Demo action stays visible. */
.panel-cobalt .site-nav .cta-primary { background: #fff; color: var(--cobalt); box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
.panel-cobalt .site-nav .cta-primary:hover { background: var(--ink); color: #fff; }

/* Use Cases mega-menu */
.usecases { position: relative; }
.usecases-trigger { display: inline-flex; align-items: center; gap: 0.4em; }
.usecases-trigger .chev { width: 12px; height: 12px; transition: transform .2s ease; }
.usecases:hover .usecases-trigger .chev,
.usecases:focus-within .usecases-trigger .chev { transform: rotate(180deg); }
.usecases-menu {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
    width: min(760px, 92vw); background: var(--surface); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md);
    padding: var(--s-20); z-index: 80;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* transparent bridge so the cursor can travel from trigger into panel */
.usecases::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.usecases:hover .usecases-menu,
.usecases:focus-within .usecases-menu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.usecases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12) var(--s-24); }
.uc-group-title { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-soft); margin: var(--s-8) 0 var(--s-4); }
.uc-row { display: flex; align-items: baseline; gap: var(--s-8); padding: 0.5em 0.6em; border-radius: var(--radius-sm); color: var(--text); transition: background .14s ease; }
.uc-row:hover { background: var(--surface-2); color: var(--text); }
.uc-row .uc-marker { color: var(--granted-ink); font-family: var(--font-mono); font-size: 0.75rem; }
.uc-row .uc-title { font-weight: 600; font-family: var(--font-display); font-size: 0.98rem; }
.uc-row .uc-sub { color: var(--text-soft); font-size: 0.82rem; }
.uc-row .uc-arrow { margin-left: auto; color: var(--cobalt); transform: translateX(-4px); opacity: 0; transition: .16s ease; }
.uc-row:hover .uc-arrow { transform: translateX(0); opacity: 1; }

/* Mobile nav (checkbox toggle) */
.nav-toggle, .nav-toggle-label { display: none; }
.nav-toggle-label { cursor: pointer; padding: 8px; border-radius: 8px; }
.nav-toggle-label .bars, .nav-toggle-label .bars::before, .nav-toggle-label .bars::after {
    display: block; width: 24px; height: 2px; background: currentColor; position: relative; transition: .2s;
}
.nav-toggle-label .bars::before, .nav-toggle-label .bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-label .bars::before { top: -7px; }
.nav-toggle-label .bars::after { top: 7px; }

@media (max-width: 920px) {
    .nav-toggle-label { display: inline-flex; color: inherit; }
    .hero .nav-toggle-label, .panel-ink .nav-toggle-label, .panel-cobalt .nav-toggle-label,
    .uc-hero .nav-toggle-label, .page-mini-hero .nav-toggle-label { color: #fff; }
    .site-nav-links {
        position: absolute; top: 100%; left: var(--gutter); right: var(--gutter);
        flex-direction: column; align-items: stretch; gap: var(--s-4);
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        box-shadow: var(--shadow-md); padding: var(--s-16); margin-top: var(--s-8);
        max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: .2s ease; z-index: 90;
    }
    .nav-toggle:checked ~ .site-nav-links { max-height: 80vh; overflow: auto; opacity: 1; pointer-events: auto; }
    .site-nav-links .site-nav-link { color: var(--text); text-align: left; }
    .hero .site-nav-links .site-nav-link, .panel-ink .site-nav-links .site-nav-link { color: var(--text); }
    .usecases-menu {
        position: static; transform: none; width: 100%; box-shadow: none; border: none;
        opacity: 1; visibility: visible; pointer-events: auto; padding: var(--s-8) 0 0;
    }
    .usecases::after { display: none; }
    .usecases-grid { grid-template-columns: 1fr; }
    .site-nav .cta { width: 100%; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; background: var(--ink); color: #fff; isolation: isolate; padding-bottom: clamp(40px, 6vw, 88px); }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(10,19,48,0.78) 0%, rgba(10,19,48,0.55) 40%, rgba(10,19,48,0.86) 100%),
        radial-gradient(120% 80% at 80% 10%, rgba(31,91,255,0.30), transparent 60%);
}
.hero-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--s-48); align-items: center; padding-block: clamp(32px, 4.5vw, 64px); }
.hero-copy { max-width: 580px; }
.hero-copy .eyebrow { color: var(--granted); }
.hero-copy .eyebrow::before { background: var(--granted); }
.hero h1 { color: #fff; margin-top: var(--s-16); font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3rem); line-height: 1.05; max-width: 13ch; }
.hero-lead { color: rgba(234,240,255,0.84); font-size: var(--fs-lead); line-height: 1.5; margin-top: var(--s-20); max-width: 42ch; }
.hero .cta-row { margin-top: var(--s-32); }
.hero-proof {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: var(--s-12) clamp(28px, 5vw, 72px);
    margin-top: var(--s-24); padding-top: var(--s-24); text-align: center;
    border-top: 1px solid rgba(159,176,216,0.18);
}
.hero-proof li { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.95rem; color: rgba(234,240,255,0.9); }
.hero-proof li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--granted); box-shadow: 0 0 0 4px rgba(39,224,138,.18); }

/* Hero live-call status card */
.hero-card {
    background: rgba(16, 28, 68, 0.72); backdrop-filter: blur(14px);
    border: 1px solid rgba(159,176,216,0.28); border-radius: var(--radius-lg);
    padding: var(--s-24); box-shadow: 0 30px 70px rgba(0,0,0,0.4); justify-self: end; width: 100%; max-width: 380px;
}
.hero-card-head { display: flex; align-items: center; gap: 0.6em; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-on-ink-soft); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--granted); position: relative; }
.live-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--granted); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(0.7); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-dot::after { animation: none; opacity: .4; } }
.hero-card-line { display: flex; gap: 0.6em; margin-top: var(--s-16); align-items: flex-start; }
.hero-card-line .who { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--granted); flex: 0 0 58px; padding-top: 2px; }
.hero-card-line.cust .who { color: var(--text-on-ink-soft); }
.hero-card-line .said { color: #fff; font-size: 0.95rem; line-height: 1.4; }
.hero-card-foot { margin-top: var(--s-20); padding-top: var(--s-16); border-top: 1px solid rgba(159,176,216,0.22); display: flex; align-items: center; gap: 0.5em; font-size: 0.82rem; color: var(--granted); }

/* ---------- Hero entrance choreography ----------
   One rehearsed page-load sequence: the copy cascades in, then the live-call
   card plays out (caller speaks, Ryku answers, escalation lands) so the
   product demonstrates itself on arrival. Motion-on only; under reduced
   motion none of this applies and every element sits at its natural opacity. */
@media (prefers-reduced-motion: no-preference) {
    .hero-copy > .eyebrow { animation: hero-rise .7s var(--ease-out-quint) both; animation-delay: .05s; }
    .hero-copy > h1       { animation: hero-rise .8s var(--ease-out-quint) both; animation-delay: .16s; }
    .hero-copy > .hero-lead { animation: hero-rise .8s var(--ease-out-quint) both; animation-delay: .30s; }
    .hero-copy > .cta-row { animation: hero-rise .8s var(--ease-out-quint) both; animation-delay: .44s; }
    .hero-proof           { animation: hero-rise .8s var(--ease-out-quint) both; animation-delay: .58s; }

    .hero-card            { animation: hero-card-in .9s var(--ease-out-expo) both; animation-delay: .34s; }
    .hero-card-head       { animation: hero-rise .55s var(--ease-out-quint) both; animation-delay: .52s; }
    .hero-card-line.cust  { animation: call-line-in .5s var(--ease-out-quint) both; animation-delay: .80s; }
    .hero-card-line:not(.cust) { animation: call-line-in .5s var(--ease-out-quint) both; animation-delay: 1.14s; }
    .hero-card-foot       { animation: call-foot-in .6s var(--ease-out-quint) both; animation-delay: 1.5s; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hero-card-in { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes call-line-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes call-foot-in {
    0%   { opacity: 0; transform: translateY(6px); }
    60%  { opacity: 1; }
    72%  { box-shadow: 0 0 0 6px rgba(39,224,138,0.16); }
    100% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(39,224,138,0); }
}

@media (max-width: 900px) {
    .hero-body { grid-template-columns: 1fr; gap: var(--s-32); }
    .hero-card { justify-self: stretch; max-width: none; }
}

/* =====================================================================
   THE SOLUTION (ink band, six-card 3x2 grid)
   ===================================================================== */
.solution { background: var(--ink); color: var(--text-on-ink); position: relative; overflow: hidden; }
.solution::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(80% 60% at 12% 0%, rgba(31,91,255,0.22), transparent 55%),
                radial-gradient(70% 50% at 100% 100%, rgba(39,224,138,0.12), transparent 60%);
}
.solution > .container { position: relative; z-index: 1; }
.section-head { max-width: 60ch; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head .headline { margin-top: var(--s-16); }
.solution .section-head .headline, .solution .section-head .lead { color: var(--text-on-ink); }
.solution .section-head .lead { color: var(--text-on-ink-soft); }
.solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-20); }
.sol-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(159,176,216,0.18); border-radius: var(--radius); padding: var(--s-24);
    transition: transform .2s ease, border-color .2s ease, background .2s ease; min-height: 196px;
    display: flex; flex-direction: column;
}
.sol-card:hover { transform: translateY(-3px); border-color: rgba(39,224,138,0.45); background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)); }
.sol-tag { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--granted); }
.sol-card.is-system .sol-tag { color: var(--cobalt); filter: brightness(1.4); }
.sol-headline { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 1rem + 1vw, 1.7rem); letter-spacing: -0.02em; color: #fff; margin-top: var(--s-16); line-height: 1.08; }
.sol-body { color: var(--text-on-ink-soft); font-size: 0.95rem; line-height: 1.5; margin-top: auto; padding-top: var(--s-12); }
@media (max-width: 880px) { .solution-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .solution-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   PROOF
   ===================================================================== */
.proof { background: var(--canvas); }
.proof-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.proof-quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.1rem); line-height: 1.22; letter-spacing: -0.02em; color: var(--text); }
.proof-quote .hl { background: linear-gradient(180deg, transparent 62%, rgba(39,224,138,0.4) 62%); }
.proof-attrib { display: flex; align-items: center; gap: 0.7em; margin-top: var(--s-24); font-size: 0.92rem; color: var(--text-soft); }
.proof-attrib .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--granted); }
.proof-usecases { margin-top: var(--s-28); font-size: 0.94rem; padding: 0.7em 1.3em; }
.proof-usecases svg { width: 17px; height: 17px; transition: transform .2s var(--ease-out-quint); }
.proof-usecases:hover svg { transform: translateX(3px); }
.proof-aside { display: flex; flex-direction: column; gap: var(--s-20); }
.proof-figure { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 16/10; background: var(--surface-2); }
.proof-figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .proof-layout { grid-template-columns: 1fr; } }

/* =====================================================================
   In Production — testimonials (quotes only, on the deep-ink AI band)
   ===================================================================== */
.in-production .section-head { margin-bottom: var(--s-48); }
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 28px); }
.testimonial {
    display: flex; flex-direction: column; gap: var(--s-16); margin: 0;
    background: var(--surface); color: var(--text);
    border-radius: var(--radius); padding: clamp(24px, 2.4vw, 32px);
    border-top: 3px solid var(--granted); box-shadow: var(--shadow-md);
}
.t-tag { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--granted-ink); }
.t-quote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.18rem); line-height: 1.4; letter-spacing: -0.01em; color: var(--text); }
.t-cite { margin-top: auto; padding-top: var(--s-16); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text); }
.t-role { font-family: var(--font-body); font-weight: 400; font-size: 0.88rem; color: var(--text-soft); }
@media (max-width: 920px) { .testimonials { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* Audio sample player (themed) */
.audio-sample {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: var(--s-20); box-shadow: var(--shadow-sm);
    --audio-progress: 0%;
}
.panel-ink .audio-sample, .solution .audio-sample { background: var(--ink-2); border-color: rgba(159,176,216,0.22); }
.audio-sample-marker { display: flex; align-items: center; gap: 0.55em; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-soft); }
.panel-ink .audio-sample-marker, .solution .audio-sample-marker { color: var(--text-on-ink-soft); }
.audio-marker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--granted); box-shadow: 0 0 0 4px rgba(39,224,138,0.16); }
.audio-waveform { position: relative; height: 60px; margin: var(--s-16) 0; }
.audio-waveform-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.audio-waveform-svg--base rect { fill: var(--line-strong); }
.panel-ink .audio-waveform-svg--base rect, .solution .audio-waveform-svg--base rect { fill: rgba(159,176,216,0.35); }
.audio-waveform-svg--heard { clip-path: inset(0 calc(100% - var(--audio-progress)) 0 0); }
.audio-waveform-svg--heard rect { fill: var(--cobalt); }
.solution .audio-waveform-svg--heard rect, .panel-ink .audio-waveform-svg--heard rect { fill: var(--granted); }
.audio-waveform-playhead { position: absolute; top: -2px; bottom: -2px; left: var(--audio-progress); width: 2px; background: var(--granted); box-shadow: 0 0 8px var(--granted); transition: left .05s linear; }
.audio-transport { display: flex; align-items: center; gap: var(--s-16); }
.audio-play-button {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--cobalt); color: #fff; display: inline-flex; align-items: center; justify-content: center;
    transition: transform .15s ease, background .15s ease;
}
.audio-play-button:hover { transform: scale(1.06); background: var(--cobalt-deep); }
.audio-icon { width: 22px; height: 22px; fill: currentColor; }
.audio-icon--pause { display: none; }
.audio-sample.is-playing .audio-icon--play { display: none; }
.audio-sample.is-playing .audio-icon--pause { display: block; }
.audio-timecode { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-soft); display: flex; gap: 0.3em; }
.panel-ink .audio-timecode, .solution .audio-timecode { color: var(--text-on-ink-soft); }
.audio-time-sep { opacity: 0.5; }
.audio-meta-strip { margin-left: auto; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-soft); }
.panel-ink .audio-meta-strip, .solution .audio-meta-strip { color: var(--text-on-ink-soft); }

/* =====================================================================
   HOW IT WORKS (horizontal stepper)
   ===================================================================== */
.steps { background: linear-gradient(180deg, #FFFFFF 0%, var(--canvas) 100%); }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-16); margin-top: clamp(32px, 4vw, 56px); }
.step { position: relative; padding: var(--s-32) var(--s-28) var(--s-32); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cobalt), var(--granted)); }
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.step-top { display: flex; align-items: center; gap: var(--s-12); }
.step-chip {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(150deg, var(--cobalt), var(--cobalt-deep)); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
    box-shadow: 0 8px 18px rgba(31,91,255,0.32);
}
.step-chip--live { background: linear-gradient(150deg, var(--granted), #12B877); color: var(--ink); box-shadow: 0 8px 18px rgba(39,224,138,0.34); }
.step-index { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-soft); }
.step-title { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; margin-top: var(--s-16); letter-spacing: -0.02em; }
.step-body { color: var(--text-soft); font-size: 0.92rem; line-height: 1.5; margin-top: var(--s-8); }
.step:not(:last-child)::after {
    content: "\2192"; position: absolute; top: 38px; right: -13px; transform: translateY(-50%);
    color: var(--cobalt); font-size: 1.2rem; font-weight: 700; z-index: 3;
}
.steps-foot .tag { background: var(--granted); color: var(--ink); padding: 0.5em 1em; border-radius: 999px; font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; box-shadow: 0 6px 16px rgba(39,224,138,0.3); }
@media (prefers-reduced-motion: reduce) { .step:hover { transform: none; } }
@media (max-width: 860px) {
    .steps-grid { grid-template-columns: 1fr; }
    .step:not(:last-child)::after { content: "\2193"; top: auto; bottom: -14px; right: 50%; transform: translateX(50%); }
}

/* =====================================================================
   KNOWLEDGE BASE (foundation diagram + compact cards)
   ===================================================================== */
/* KB sits on the dark ink band (panel-ink); foundation lifts to ink-2 for separation */
.kb-foundation {
    display: grid; grid-template-columns: 1fr; gap: var(--s-20); margin: clamp(32px,4vw,48px) 0;
    background: var(--ink-2); color: #fff; border: 1px solid rgba(159,176,216,0.18); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); position: relative; overflow: hidden;
}
.kb-foundation::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 50% -10%, rgba(31,91,255,0.28), transparent 60%); }
.kb-foundation > * { position: relative; z-index: 1; }
.kb-brain { text-align: center; }
.kb-brain .kb-brain-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--granted); }
.kb-brain .kb-brain-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); color: #fff; margin-top: var(--s-8); }
.kb-channels-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-12); margin-top: var(--s-20); }
.kb-channel-chip { text-align: center; padding: var(--s-12); border: 1px solid rgba(159,176,216,0.25); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-on-ink); background: rgba(255,255,255,0.04); }
.kb-channel-chip span { display: block; color: var(--granted); margin-bottom: 4px; font-size: 1rem; }
@media (max-width: 560px) { .kb-channels-row { grid-template-columns: repeat(2, 1fr); } }

.kb-phase { margin-top: clamp(36px, 4vw, 56px); }
.kb-phase-head { display: flex; align-items: baseline; gap: var(--s-12); margin-bottom: var(--s-20); flex-wrap: wrap; }
.kb-phase-num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--granted); letter-spacing: 0.08em; }
.kb-phase-title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--text-on-ink); }
.kb-phase-sub { color: var(--text-on-ink-soft); font-size: 0.92rem; }
.kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-20); }
.kb-card {
    --kb-img: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column;
}
.kb-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.kb-card-banner { height: clamp(132px, 13vw, 164px); background-image: var(--kb-img); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.kb-card-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,19,48,0.28)); }
.kb-card:hover .kb-card-banner { transform: scale(1.04); transition: transform .4s ease; }
.kb-card-body { padding: var(--s-16) var(--s-20) var(--s-20); }
.kb-card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--text); }
.kb-card-text { color: var(--text-soft); font-size: 0.9rem; line-height: 1.45; margin-top: var(--s-8); }
@media (max-width: 820px) { .kb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .kb-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   FOUR CHANNELS (hairline band)
   ===================================================================== */
.channels { background: linear-gradient(180deg, var(--canvas) 0%, #FFFFFF 100%); }
.channels-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-16); margin-top: clamp(32px, 4vw, 56px); }
.channel { padding: var(--s-24); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); position: relative; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.channel:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(31,91,255,0.35); }
.channel-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 13px; background: rgba(31,91,255,0.10); color: var(--cobalt); transition: background .2s ease, color .2s ease, transform .2s ease; }
.channel-ic svg { width: 24px; height: 24px; }
.channel:hover .channel-ic { background: var(--cobalt); color: #fff; transform: scale(1.05); }
.channel-num { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--granted-ink); margin-top: var(--s-20); }
.channel-name { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin-top: var(--s-8); letter-spacing: -0.02em; }
.channel-text { color: var(--text-soft); font-size: 0.92rem; line-height: 1.5; margin-top: var(--s-12); }
@media (max-width: 760px) { .channels-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .channels-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .channel:hover { transform: none; } .channel:hover .channel-ic { transform: none; } }

/* =====================================================================
   WHY IT HOLDS UP (trust)
   ===================================================================== */
/* .trust sits on the dark ink band (panel-ink); cards stay light */
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-20); margin-top: clamp(32px, 4vw, 56px); }
.trust-card {
    display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-16); row-gap: var(--s-8); align-items: start;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-24);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.trust-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(31,91,255,0.32); }
.trust-ic { position: relative; grid-row: 1 / span 2; flex: 0 0 auto; width: 50px; height: 50px; border-radius: 13px; background: rgba(31,91,255,0.10); color: var(--cobalt); display: inline-flex; align-items: center; justify-content: center; }
.trust-ic svg { width: 26px; height: 26px; }
.trust-ic::after { content: "\2713"; position: absolute; bottom: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%; background: var(--granted); color: var(--ink); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2.5px solid var(--canvas); }
.trust-title { grid-column: 2; align-self: center; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--text); }
.trust-text { grid-column: 2; color: var(--text-soft); font-size: 0.92rem; line-height: 1.5; }
@media (max-width: 700px) { .trust-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .trust-card:hover { transform: none; } }

/* =====================================================================
   FINAL CTA
   ===================================================================== */
.final-cta { background: var(--cobalt); color: #fff; position: relative; overflow: hidden; text-align: center; }
.final-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 100% at 50% 0%, rgba(39,224,138,0.22), transparent 60%); }
.final-cta > .container { position: relative; z-index: 1; max-width: 760px; }
.final-cta .display { color: #fff; }
.final-cta-body { color: rgba(255,255,255,0.9); font-size: var(--fs-lead); margin: var(--s-20) auto 0; max-width: 52ch; }
.final-cta .cta-row { justify-content: center; margin-top: var(--s-32); }
.final-cta .cta-primary { background: #fff; color: var(--cobalt); box-shadow: 0 16px 40px rgba(0,0,0,0.22); }
.final-cta .cta-primary:hover { background: var(--ink); color: #fff; }

/* CTA block + supporting hook line (hero + final CTA, both on dark panels).
   The hook hugs the button group and plants the "enter your website, hear it
   live" mechanic beneath the primary CTA. */
.cta-block { display: flex; flex-direction: column; gap: var(--s-16); margin-top: var(--s-32); }
.hero .cta-block .cta-row, .final-cta .cta-block .cta-row { margin-top: 0; }
.cta-hook { margin: 0; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.5; letter-spacing: 0.01em; max-width: 46ch; color: var(--text-on-ink-soft); }
.final-cta .cta-block { align-items: center; }
.final-cta .cta-hook { color: rgba(255,255,255,0.82); text-align: center; }

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

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--ink); color: var(--text-on-ink); padding: var(--s-64) 0 var(--s-40); }
.footer-row { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-16) var(--s-24); }
.footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: #fff; }
.footer-built { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-on-ink-soft); }
.footer-links { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-20); }
.footer-links a { color: var(--text-on-ink-soft); font-size: 0.92rem; }
.footer-links a:hover { color: var(--granted); }
.footer-copyright { color: var(--text-on-ink-soft); font-size: 0.82rem; }
.accreditations-band { max-width: var(--container); margin: var(--s-32) auto 0; padding-inline: var(--gutter); border-top: 1px solid rgba(159,176,216,0.2); padding-top: var(--s-24); }
.accreditations-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-on-ink-soft); }
.accreditations-list { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-16); }
.accreditations-list li { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-on-ink); border: 1px solid rgba(159,176,216,0.28); border-radius: 999px; padding: 0.4em 0.85em; }
.footer-credit { font-size: 0.82rem; color: var(--text-on-ink-soft); }
.footer-credit a { color: var(--text-on-ink); font-weight: 600; }
.footer-credit a:hover { color: var(--granted); }

/* =====================================================================
   USE-CASE PAGES
   ===================================================================== */
.uc-hero { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.uc-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 85% 0%, rgba(31,91,255,0.28), transparent 60%); }
.uc-hero > .container { position: relative; z-index: 1; }
.uc-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px,5vw,64px); align-items: center; padding-block: clamp(40px, 6vw, 80px); }
.uc-hero .eyebrow { color: var(--granted); }
.uc-hero .eyebrow::before { background: var(--granted); }
.uc-hero h1 { color: #fff; margin-top: var(--s-16); }
.uc-hero-lead { color: rgba(234,240,255,0.84); font-size: var(--fs-lead); margin-top: var(--s-20); max-width: 46ch; }
.uc-hero .cta-row { margin-top: var(--s-28); }
.uc-hero-figure { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; background: var(--ink-2); }
.uc-hero-figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .uc-hero-grid { grid-template-columns: 1fr; } }

.usecase-section { padding-block: clamp(48px, 7vw, 96px); }
.usecase-section--alt { background: var(--surface); }
.usecase-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,64px); align-items: center; }
.usecase-split.rev .usecase-media { order: -1; }
.usecase-copy .eyebrow { color: var(--text-soft); }
.usecase-copy .title { margin-top: var(--s-12); }
.usecase-copy .body { margin-top: var(--s-16); }
.usecase-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; background: var(--surface-2); }
.usecase-media img { width: 100%; height: 100%; object-fit: cover; }
.usecase-section--audio { background: var(--ink); color: #fff; }
.usecase-section--audio .title { color: #fff; }
/* This band paints ink without carrying .panel-ink, so its eyebrow kept the
   light-surface grey. Put it on the ink text scale. */
.usecase-section--audio .eyebrow { color: var(--text-on-ink-soft); }
.usecase-audio-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,48px); align-items: start; margin-top: var(--s-32); }
.uc-transcript { display: flex; flex-direction: column; gap: var(--s-12); }
.uc-line { display: flex; gap: 0.7em; }
.uc-line .who { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; flex: 0 0 64px; padding-top: 3px; }
.uc-line.agent .who { color: var(--granted); }
.uc-line.cust .who { color: var(--text-on-ink-soft); }
.uc-line .said { color: rgba(234,240,255,0.92); font-size: 0.95rem; line-height: 1.4; }
@media (max-width: 820px) {
    .usecase-split { grid-template-columns: 1fr; }
    .usecase-split.rev .usecase-media { order: 0; }
    .usecase-audio-wrap { grid-template-columns: 1fr; }
}

/* =====================================================================
   PAGE MINI-HERO (legal / 404 nav band)
   ===================================================================== */
.page-mini-hero { background: var(--ink); color: #fff; padding-bottom: var(--s-48); }
.page-mini-hero-row { background: transparent; }
.page-mini-hero .headline { color: #fff; padding-inline: var(--gutter); max-width: var(--container); margin-inline: auto; }
.legal-body { padding-block: clamp(48px, 7vw, 96px); }
.legal-body .body { margin-bottom: var(--s-20); }
.legal-body .body:first-child { margin-top: 0; }
.error-actions { margin-top: var(--s-32); display: flex; gap: var(--s-16); }

/* =====================================================================
   DEMO 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; }
.demo-modal-backdrop { position: absolute; inset: 0; background: rgba(10,19,48,0.6); backdrop-filter: blur(4px); }
.demo-modal-card { position: relative; background: var(--surface); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); max-width: 460px; width: 100%; box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.demo-modal-eyebrow { color: var(--granted-ink); }
.demo-modal-eyebrow::before { background: var(--granted); }
.demo-modal-title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; margin-top: var(--s-12); }
.demo-modal-desc { color: var(--text-soft); margin-top: var(--s-12); line-height: 1.55; }
.demo-modal-actions { display: flex; gap: var(--s-12); margin-top: var(--s-24); justify-content: flex-end; flex-wrap: wrap; }

/* =====================================================================
   GET STARTED / LEAD WIZARD
   ===================================================================== */
.lead-nav-band { padding: 0; }
.lead-section { min-height: 70vh; }
.lead-layout { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.lead-pitch-eyebrow { color: var(--text-soft); }
.lead-pitch-title { margin-top: var(--s-16); }
.lead-pitch-lead { margin-top: var(--s-20); }
.lead-pitch-steps { margin-top: var(--s-28); display: flex; flex-direction: column; gap: var(--s-16); }
.lead-pitch-steps li { display: flex; gap: var(--s-16); }
.lead-pitch-step-num { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--cobalt); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
.lead-pitch-steps strong { font-family: var(--font-display); font-weight: 600; }
.lead-pitch-steps p { color: var(--text-soft); font-size: 0.92rem; margin-top: 2px; line-height: 1.5; }
.lead-pitch-pills { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-28); }
.lead-pitch-pills li { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cobalt); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.4em 0.8em; }

.price-lead { margin-top: var(--s-20); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--granted); border-radius: var(--radius-sm); padding: var(--s-20); }
.price-lead-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--granted-ink); background: rgba(39,224,138,0.14); padding: 0.35em 0.7em; border-radius: 999px; }
.price-lead-figure { font-family: var(--font-display); font-size: 1.3rem; margin-top: var(--s-12); color: var(--text); }
.price-lead-figure strong { font-size: 1.6rem; }
.price-lead-sub { color: var(--text-soft); font-size: 0.9rem; margin-top: var(--s-8); line-height: 1.5; }

.lead-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow-sm); }
.lead-card-head { margin-bottom: var(--s-24); }
.lead-card-subtitle { color: var(--text-soft); margin-top: var(--s-8); }
.lead-card-success { text-align: center; }
.lead-success-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(39,224,138,0.16); color: var(--granted-ink); }
.lead-success-title { margin-top: var(--s-16); }
.lead-success-body { margin-top: var(--s-12); }
.lead-success-actions { display: flex; gap: var(--s-12); justify-content: center; margin-top: var(--s-24); flex-wrap: wrap; }

.wizard-progress { margin-bottom: var(--s-28); }
.wizard-progress-track { height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.wizard-progress-fill { height: 100%; background: linear-gradient(90deg, var(--cobalt), var(--granted)); transition: width .3s ease; }
.wizard-steps { display: flex; justify-content: space-between; margin-top: var(--s-12); }
.wizard-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.wizard-step-circle { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.8rem; background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--line); }
.wizard-step.active .wizard-step-circle { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.wizard-step.completed .wizard-step-circle { background: var(--granted); color: var(--ink); border-color: var(--granted); }
.wizard-step-label { font-size: 0.74rem; color: var(--text-soft); }
.wizard-step.active .wizard-step-label { color: var(--text); }

.lead-form { display: flex; flex-direction: column; gap: var(--s-16); }
.form-group { display: flex; flex-direction: column; gap: var(--s-8); }
.form-label { font-weight: 600; font-size: 0.92rem; color: var(--text); }
.form-control, .form-select {
    width: 100%; padding: 0.75em 0.9em; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 1rem; color: var(--text); background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(31,91,255,0.16); outline: none; }
.form-control::placeholder { color: #9aa6bd; }
.form-control-sm, .form-select-sm { padding: 0.55em 0.7em; font-size: 0.92rem; }
.lead-form-textarea { resize: vertical; min-height: 120px; }
.phone-input-group { display: flex; gap: var(--s-8); }
.phone-country-code { flex: 0 0 110px; }
.phone-number { flex: 1; }
.lead-form-help { color: var(--text-soft); font-size: 0.88rem; }
.lead-form-optional { color: var(--text-soft); font-weight: 400; }

.feature-interest { display: flex; flex-direction: column; gap: var(--s-12); }
.feature-interest-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s-16); transition: border-color .15s ease, background .15s ease; }
.feature-interest-row.is-active { border-color: var(--cobalt); background: rgba(31,91,255,0.04); }
.feature-interest-check { display: flex; align-items: center; gap: 0.6em; cursor: pointer; font-weight: 600; }
.feature-interest-name { font-family: var(--font-display); }
.feature-interest-detail { margin-top: var(--s-12); }
.feature-interest-detail:empty { margin-top: 0; }
.feature-interest-sub-label { display: block; font-size: 0.86rem; color: var(--text-soft); margin-bottom: var(--s-8); }
.feature-interest-yesno, .feature-interest-platforms { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.feature-interest-pill { font-family: var(--font-body); font-size: 0.88rem; padding: 0.45em 0.9em; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; transition: .14s ease; }
.feature-interest-pill.is-active { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.feature-interest-note { font-size: 0.86rem; color: var(--text-soft); }

.validation-summary { display: flex; flex-direction: column; gap: var(--s-4); }
.validation-error { color: #c0392b; font-size: 0.86rem; }
.lead-alert { background: #fdecea; color: #c0392b; border-radius: var(--radius-sm); padding: var(--s-12) var(--s-16); font-size: 0.9rem; }
.lead-submit-btn { margin-top: var(--s-8); width: 100%; }
.wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s-12); margin-top: var(--s-8); }

@media (max-width: 860px) { .lead-layout { grid-template-columns: 1fr; } }

/* =====================================================================
   USE-CASE VISUAL SAMPLE FRAMES (non-voice channels)
   ===================================================================== */
.uc-sample-frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; }
.uc-sample-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: var(--s-12) var(--s-16); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.uc-sample-tag { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--granted-ink); background: rgba(39,224,138,0.14); padding: 0.35em 0.7em; border-radius: 999px; }
.uc-sample-meta { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-soft); }
.uc-sample-body { padding: var(--s-20); display: flex; flex-direction: column; gap: var(--s-12); font-size: 0.95rem; color: var(--text); line-height: 1.5; }
.uc-sample-source { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-soft); border-top: 1px dashed var(--line-strong); padding-top: var(--s-12); margin-top: var(--s-4); }
.uc-dm { gap: var(--s-8); }
.uc-dm p { max-width: 80%; padding: 0.6em 0.9em; border-radius: 14px; margin: 0; }
.uc-dm-in { background: var(--surface-2); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.uc-dm-out { background: var(--cobalt); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.uc-kb-q { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text); }
.uc-kb-a { color: var(--text-soft); }

/* =====================================================================
   MOBILE DESIGN PASS — the phone view is its own deliberate layout.
   Everything here is scoped to <=640px so the desktop layout is left
   byte-for-byte unchanged: tighter rhythm, decorative secondary copy
   hidden, the sample-call block stripped to header + image + 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: clamp(48px, 12vw, 64px); }
    .container, .column { padding-inline: 18px; }
    .hero { padding-bottom: var(--s-48); }
    .hero-body { padding-block: var(--s-24) var(--s-32); }

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

    /* Headlines scale to one impactful block, not a wall of type */
    .display { font-size: clamp(2.05rem, 1.4rem + 4vw, 2.7rem); line-height: 1.05; }
    .hero h1 { font-size: clamp(2rem, 1.4rem + 4vw, 2.6rem); }
    .headline { font-size: clamp(1.6rem, 1.2rem + 3vw, 2.05rem); }

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

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

    /* Primary actions go full width for a confident tap target */
    .hero .cta-row, .final-cta .cta-row { flex-direction: column; align-items: stretch; }
    .hero .cta-row .cta, .final-cta .cta-row .cta { width: 100%; }

    /* ---- Hide decorative secondary copy (the hero trust line) ---- */
    .hero-proof { display: none; }

    /* ---- Sample-call block: strip to claim + image + player only ----
       Hide the supporting attribution line and the secondary "other use
       cases" link; the visitor sees the headline, the picture and the
       play button, nothing to scroll past. */
    #proof .proof-attrib,
    #proof .proof-usecases { display: none; }
    #proof .proof-layout { gap: var(--s-24); }

    /* ---- In Production testimonials: one-card swipe carousel ----
       A horizontal scroll-snap rail (next card peeking) replaces the tall
       vertical stack; carousel.js wires the arrows + dots. */
    .testi-carousel { min-width: 0; }
    .testimonials {
        grid-template-columns: none;
        max-width: none;
        margin-inline: 0;
    }
    .testimonial:hover { transform: none; box-shadow: var(--shadow-md); }
    [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;
    }

    .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 rgba(159, 176, 216, 0.3);
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-on-ink);
        cursor: pointer;
        transition: opacity .2s var(--ease-out-quint), background .2s var(--ease-out-quint);
    }
    .carousel-arrow svg { width: 1.2rem; height: 1.2rem; }
    .carousel-arrow:active { background: rgba(255, 255, 255, 0.14); }
    .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 .2s var(--ease-out-quint), opacity .2s var(--ease-out-quint), transform .2s var(--ease-out-quint);
    }
    .carousel-dot.active { background: var(--granted); opacity: 1; transform: scale(1.3); }
}

/* a11y: in-text links must be distinguishable without colour (WCAG 1.4.1) */
.price-lead-sub a,
main p a, main li a, .geo-body a, .legal-body a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
main p a.btn, main p a.cta, main li a.btn, main li a.cta { text-decoration: none; }

/* ============================================================
   FIXED NAV (sticky) — transparent over the hero, solid + blurred
   once scrolled. Mirrors the Ryku hub (KwickBlocks.Ryku.Ai)
   approach, adapted to this site's ink panel token.
   ============================================================ */
:root { --nav-h: 72px; }
html { scroll-padding-top: var(--nav-h); }

.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    border-bottom: 1px solid transparent;
    transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease; }
.site-nav.scrolled { background: rgba(10, 19, 48, 0.9);          /* --ink @ 90% */
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom-color: rgba(159, 176, 216, 0.18); }           /* soft ink line */

/* The nav used to sit in normal flow at the top of each header band.
   Now that it is fixed, push each header's remaining content clear of it. */
.hero, .uc-hero, .page-mini-hero { padding-top: var(--nav-h); }
.lead-nav-band { padding-top: var(--nav-h); }

/* One customer quote left: centre it rather than strand it in the first
   column of a three-column rail. */
.testimonials--single { grid-template-columns: minmax(0, 44rem); justify-content: center; }


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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