/* home.css
   Homepage refocus — stage cards (Catalyst / Amplifier / Stabilizer),
   hero ask bar, and the full-width About drawer.
   Brand-locked: uses only the tokens already in tokens.css. No new colours,
   no new fonts. */

/* ─── Per-stage / per-construct accent (a single --accent var drives chips,
       borders, bullets, dots) ─── */
[data-stage="catalyst"]   { --accent: var(--purple-light); }
[data-stage="amplifier"]  { --accent: var(--teal-light); }
[data-stage="stabilizer"] { --accent: #7aa7ff; }            /* lighter --aifl, readable on the hero gradient */

[data-construct="iws"]  { --accent: var(--iws); }
[data-construct="pux"]  { --accent: var(--pux); }
[data-construct="aifl"] { --accent: var(--aifl); }
[data-construct="fsa"]  { --accent: var(--fsa); }

/* ─── SECTION 2 · SIGNALS ───
   Nine-card signal board: visitor pains grouped by adoption stage, never named.
   Reached by scroll or the idle auto-glide. */

.signals {
    position: relative;
    /* Section 2 is one screen: the headline + the full 3x3 signal board are
       sized to a single viewport height, so all nine signals are visible with
       no scroll. The header-clearing top padding biases the centred block down
       so it sits true to the eye under the fixed header. */
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--header-h) + 20px) 0 40px;
    overflow: hidden;
    /* Native anchor jumps land the section head just below the sticky header. */
    scroll-margin-top: calc(var(--header-h) + 10px);
}

/* Mirrored atmospheric orbs — continuity with the hero, same slow drift. */
.signals::before {
    content: '';
    position: absolute;
    top: -220px;
    right: -180px;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
    pointer-events: none;
    animation: orbDrift 19s ease-in-out infinite;
}

.signals::after {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -160px;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(13, 148, 136, 0.15) 0%, transparent 70%);
    pointer-events: none;
    animation: orbDrift 24s ease-in-out infinite reverse;
}

/* Hidden while a conversation is on screen (same contract as .hero.compressed). */
.signals.compressed {
    display: none;
}

.signals-inner {
    /* Wider than the page shell: the signal board spans enough of the viewport
       to read as a deliberate wall, while staying compact and premium. */
    max-width: min(1280px, 94vw);
    margin: 0 auto;
    padding: 0 var(--shell-pad);
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 2.4vh, 28px);
}

.signals-head {
    text-align: center;
    margin-bottom: 0;
}

.signals-headline {
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: 0;
    color: var(--white);
}

.signals-highlight {
    background: linear-gradient(135deg, var(--purple-light), var(--teal-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── STAGE CARDS (primary self-select surface) ─── */
.stages {
    width: 100%;
    margin: 0 auto;
    text-align: left;
    transition: opacity var(--transition);
}

/* The nine signals as a compact editorial board: three wide tiles per row, with
   copy on the left and the existing artwork kept visible on the right. */
.stage-cards {
    --stage-gap: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--stage-gap);
    width: min(100%, 1240px);
    margin: 0 auto;
}

.stage-card {
    position: relative;
    /* Clean split card: copy panel on the left, artwork panel on the right.
       row-reverse keeps the shared DOM order (media → copy) while landing the
       image on the right; phones flip this to a vertical column below. */
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    width: 100%;
    /* Height follows the copy, not a fixed ratio — a long explanation grows
       its row instead of clipping under the CTA. min-height keeps short cards
       at the familiar tile proportion. */
    min-height: 162px;
    text-align: left;
    font-family: inherit;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    /* Translucent whitish glass — the same overlay as the contact tiles
       (.contact-info-card): a flat translucent white with a light blur, so the
       card lifts off the dark gradient without being a solid white block or a
       dark hole. Copy is white; only the accent (CTA, hover ring) carries the
       stage colour. */
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform var(--transition), border-color var(--transition),
        box-shadow var(--transition);
}

/* Each card waits below its final spot until the section scrolls into view,
   then the nine lift in one after another, left to right, so the wall
   assembles itself rather than popping in flat. */
.signals .stage-card {
    opacity: 0;
}

.signals.revealed .stage-card {
    animation: stageCardIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.signals.revealed .stage-card:nth-child(1) { animation-delay: 0ms; }
.signals.revealed .stage-card:nth-child(2) { animation-delay: 45ms; }
.signals.revealed .stage-card:nth-child(3) { animation-delay: 90ms; }
.signals.revealed .stage-card:nth-child(4) { animation-delay: 135ms; }
.signals.revealed .stage-card:nth-child(5) { animation-delay: 180ms; }
.signals.revealed .stage-card:nth-child(6) { animation-delay: 225ms; }
.signals.revealed .stage-card:nth-child(7) { animation-delay: 270ms; }
.signals.revealed .stage-card:nth-child(8) { animation-delay: 315ms; }
.signals.revealed .stage-card:nth-child(9) { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {

    .signals .stage-card,
    .signals.revealed .stage-card {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .hero::before,
    .hero::after,
    .signals::before,
    .signals::after {
        animation: none;
    }
}

/* Accent ring — a hairline that lights up in the card's stage colour on hover,
   tying the artwork to its adoption stage without a heavy border. */
.stage-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1.5px solid transparent;
    pointer-events: none;
    z-index: 3;
    transition: border-color var(--transition);
}

.stage-card:hover::before,
.stage-card:focus-visible::before {
    border-color: color-mix(in srgb, var(--accent) 75%, transparent);
}

.stage-card:hover,
.stage-card:focus-visible {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.17);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
        0 14px 34px rgba(0, 0, 0, 0.26),
        0 2px 8px rgba(0, 0, 0, 0.18);
}

.stage-card:focus-visible {
    outline: none;
}

/* Artwork panel — a clean, self-contained block pinned to the right of the
   card (no feathered bleed, no wash-out). The whole-card gradient shows through
   on the copy side; the image sits crisply in its own panel with a hairline
   seam dividing the two. */
.stage-card-media {
    position: relative;
    flex: 0 0 42%;
    align-self: stretch;
    overflow: hidden;
    z-index: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.stage-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.stage-card:hover .stage-card-img,
.stage-card:focus-visible .stage-card-img {
    transform: scale(1.045);
}

/* "Explore" flag over the icon — hidden at rest, revealed when the card is
   hovered/focused. A tinted scrim fades over the artwork so the pill reads
   clearly against any illustration, tying the icon to its stage accent. */
.stage-card-explore {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--white);
    background: color-mix(in srgb, var(--accent) 40%, rgba(10, 12, 32, 0.52));
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
}

/* The word sits inside a hairline capsule that scales up from slightly small on
   reveal — a subtle "press to enter" feel over the icon. */
.stage-card-explore::before {
    content: 'Explore \2192';
    padding: 5px 13px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.9);
    transition: transform var(--transition);
}

.stage-card:hover .stage-card-explore,
.stage-card:focus-visible .stage-card-explore {
    opacity: 1;
}

.stage-card:hover .stage-card-explore::before,
.stage-card:focus-visible .stage-card-explore::before {
    transform: scale(1);
}

/* Copy panel — the plain left side. It flexes to fill the space beside the
   artwork so every hook and explanation renders in full with room to breathe. */
.stage-card-overlay {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 14px 15px 16px;
}

/* Hook + explanation sit on the card's top line, so every tile's title starts
   at the same height. Because this group flexes to fill and the CTA sits after
   it in normal flow, the slack collects between the copy and the button —
   which therefore also lands on the same bottom line across all nine tiles,
   no matter how many lines the copy runs to. */
.stage-card-copy {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.stage-card-hook {
    position: relative;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--white);
    line-height: 1.16;
    letter-spacing: 0;
    /* No clamp — every signal title reads in full, never ellipsised. */
}

/* Explanation sits persistently under the hook — the card leads with the full
   pain, then always offers the way in via the CTA below. */
.stage-card-explain {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.45;
    /* No clamp — the supporting line shows in full, never ellipsised. */
    margin-top: 7px;
    opacity: 1;
    transform: none;
    transition: color var(--transition);
}

.stage-card:hover .stage-card-explain,
.stage-card:focus-visible .stage-card-explain {
    color: rgba(255, 255, 255, 0.92);
}

/* Persistent CTA — a real "Start a conversation" affordance on every card. The
   whole card routes into the conversation; this pill names the action outright
   and brightens on hover. */
.stage-card-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    /* Sits on the tile's bottom line — the copy group above absorbs the slack,
       so this pill is at the same height on every card. */
    margin-top: 10px;
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--white);
    border: 1px solid color-mix(in srgb, var(--accent) 50%, rgba(255, 255, 255, 0.25));
    background: color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.10));
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background var(--transition), border-color var(--transition),
        transform var(--transition);
}

.stage-card:hover .stage-card-cta,
.stage-card:focus-visible .stage-card-cta {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 32%, rgba(255, 255, 255, 0.08));
    transform: translateY(-1px);
}

.stage-card-cta-arrow {
    display: inline-block;
    transition: transform var(--transition);
}

.stage-card:hover .stage-card-cta-arrow {
    transform: translateX(3px);
}

@keyframes stageCardIn {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Carousel controls — desktop shows the full 3x3 board, so the arrow row is
   hidden here and only unhides in the phone media query below. */
.stage-carousel-nav {
    display: none;
}

.stage-carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    transition: background var(--transition), border-color var(--transition),
        transform var(--transition);
}

.stage-carousel-arrow svg {
    width: 18px;
    height: 18px;
}

.stage-carousel-arrow:active {
    transform: scale(0.94);
}

.stage-carousel-arrow:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--white);
}

/* ─── HERO PROOF — four counted stats under the asker ───
   Editorial, not chips: big tabular numbers over hairline dividers, sitting
   directly on the gradient. app.js counts them up on load. */
.hero-proof-wrap {
    width: 100%;
    margin: 0;
    text-align: left;
}

.hero-proof-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 12px;
}

.hero-stats {
    display: flex;
    align-items: stretch;
    max-width: none;   /* span the hero column, aligned with the ask bar above */
}

.hero-stat {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px 26px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-stat:first-child {
    border-left: none;
    padding-left: 0;
}

.hero-stat-num {
    font-size: clamp(18px, 1.7vw, 23px);
    font-weight: 750;
    /* Slight negative tracking reads as premium display numerals. */
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--white);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(15, 10, 30, 0.28);
}

.hero-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.35;
    letter-spacing: 0.01em;
}

/* ─── COMPRESSED (conversation started) ───
   Once the conversation begins, the hero collapses away entirely. The reply
   happens inline, at the foot of the answer (the reply dock), so a top input
   bar would be a redundant second surface. */
.hero.compressed {
    display: none;
}

/* ─── INLINE REPLY DOCK (clicker conversation) ─── */
.reply-dock {
    margin-top: 28px;
    animation: stageCardIn 0.4s ease both;
}

/* Eyebrow above the follow-up question ("SHARPEN THE PATTERN").
   Injected by the question renderers. */
/* Eyebrow sized to match the WHY IT MATTERS heading (.wim-headline, 12px/700)
   so the two section labels read at the same weight and scale. */
.reply-label {
    font-size: 12px;
    color: rgba(199, 182, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-bottom: 10px;
}

/* "Or choose a context:" between the reply box and the chips. */
.reply-choose-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 14px;
}

.reply-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 16px;
}

.reply-option {
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.01em;
    color: var(--white);
    /* Glossy coated-glass pill — specular sheen over a light brand tint, so it
       reads as a lit, tappable button rather than a faint outline. */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, rgba(124, 58, 237, 0.30), rgba(13, 148, 136, 0.24));
    border: 1px solid rgba(255, 255, 255, 0.26);
    padding: 9px 17px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 14px rgba(0, 0, 0, 0.16);
    transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

/* :enabled — a frozen pill in a past turn must not light up under the cursor as
   though it were still tappable. Scoping the lit state to enabled controls is
   cheaper (and harder to get wrong) than unwinding it again in a :disabled rule. */
.reply-option:enabled:hover {
    color: var(--white);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.07) 48%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, rgba(124, 58, 237, 0.46), rgba(13, 148, 136, 0.36));
    border-color: rgba(255, 255, 255, 0.44);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 22px rgba(124, 58, 237, 0.28);
    transform: translateY(-1px);
}

/* ── Past turns ──────────────────────────────────────────────────────────────
   The visitor has walked back to a turn the engine already answered past. The
   transcript stays whole and legible — that is the whole point of going back —
   but its controls are disabled in JS (see sealTurn) and dressed to match: they
   recede to a record of what was offered. The one they chose is the exception.
   It carries their answer, so it stays lit and ticked while the roads not taken
   fade; without it a visitor cannot see what they clicked. */
.reply-option:disabled,
.reply-send:disabled,
.fork-option:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.reply-option.is-chosen:disabled {
    opacity: 1;
    cursor: default;
    color: var(--white);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, rgba(124, 58, 237, 0.52), rgba(13, 148, 136, 0.40));
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.reply-option.is-chosen::before {
    content: "✓";
    margin-right: 7px;
    font-weight: 700;
}

/* Their typed reply is echoed back into the frozen composer, so it reads as the
   words they wrote rather than as an input waiting on them. */
.reply-input:disabled {
    opacity: 0.75;
    cursor: default;
}

.is-history .reply-input-row {
    background: rgba(255, 255, 255, 0.03);
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.12);
}

/* Reply composer — the input and Send are fused into one rounded capsule (a
   chat-composer surface) instead of two floating controls. The whole capsule
   owns the border + focus glow; the input inside is transparent and borderless,
   and Send sits snug on the right. */
.reply-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 640px;
    padding: 6px 6px 6px 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.reply-input-row:focus-within {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(124, 58, 237, 0.6);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12), 0 10px 34px rgba(0, 0, 0, 0.24);
}

.reply-input {
    flex: 1;
    min-width: 0;
    padding: 11px 8px 11px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--white);
    background: transparent;
    border: none;
    outline: none;
}

.reply-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* The capsule (.reply-input-row) carries focus styling now, not the field. */
.reply-input:focus {
    background: transparent;
    border: none;
    box-shadow: none;
}

.reply-send {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    color: var(--white);
    /* Brighter than the page gradient + a crisp light edge and glossy top, so
       the button lifts off the matching-gradient background instead of blending
       into it. */
    background: linear-gradient(135deg, #8b5cf6 0%, #14b8a6 100%);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 11px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), 0 2px 10px rgba(124, 58, 237, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: filter var(--transition), transform var(--transition), box-shadow var(--transition);
}

.reply-send:enabled:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(124, 58, 237, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.reply-send:enabled:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

/* ─── BRAND REVEAL (modal image) ─── */
.brand-reveal-overlay {
    position: fixed;
    inset: 0;
    z-index: 260;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(5, 7, 18, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.brand-reveal-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.brand-reveal-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(940px, calc(100vw - 34px));
    max-height: calc(100vh - 32px);
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(360px, 1fr);
    overflow: auto;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Same overlay as the Contact / About windows: the bright brand gradient
       with soft brighter glows top-left / bottom-right for depth. The proof
       chips and text on top are whitish glass, matching the contact cards. */
    background:
        radial-gradient(circle at top left, rgba(159, 103, 245, 0.32), transparent 42%),
        radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.28), transparent 42%),
        linear-gradient(135deg, #7c3aed 0%, #0d9488 100%);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.44);
    transform: translate(-50%, -50%) scale(0.94);
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    /* Same slim, glassy scrollbar as the About drawer — not the OS default. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.38) transparent;
}

.brand-reveal-panel::-webkit-scrollbar {
    width: 10px;
}

.brand-reveal-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 99px;
}

.brand-reveal-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.32);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background var(--transition);
}

.brand-reveal-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.55);
}

.brand-reveal-overlay.open .brand-reveal-panel {
    transform: translate(-50%, -50%) scale(1);
}

.brand-reveal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 99px;
    font-size: 24px;
    line-height: 1;
    color: var(--white);
    /* Light glassy close — matches the Contact / About windows now that the
       panel sits on the bright brand gradient. */
    background: rgba(255, 255, 255, 0.14);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.brand-reveal-close:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: rotate(90deg);
}

.brand-reveal-media {
    min-height: 420px;
    /* Opaque near-black matching the reveal photo's own backdrop, so when the
       portrait image is letterboxed (mobile, object-fit: contain) the surround
       reads as one seamless black frame instead of a purple-tinted band. */
    background: #05060f;
}

.brand-reveal-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    transition: transform 0.44s ease;
}

.brand-reveal-overlay.open .brand-reveal-image {
    transform: scale(1);
}

.brand-reveal-copy-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 13px;
    padding: 34px 34px 32px;
}

.brand-reveal-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.brand-reveal-title {
    font-size: clamp(25px, 2.5vw, 32px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--white);
}

.brand-reveal-body {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.76);
    max-width: 48ch;
}

.brand-reveal-body strong {
    color: var(--white);
    font-weight: 700;
}

/* Stack the proof pills vertically — one per line, hugging their text with a
   consistent left edge, so uneven label lengths read as an intentional list
   rather than an awkward 1-then-2 wrap. */
.brand-reveal-proof {
    margin-top: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.brand-reveal-proof .about-proof-chip {
    font-size: 12.5px;
    padding: 8px 14px;
}

.brand-reveal-proof .about-proof-chip.is-cert {
    /* Match the full-size credential used in Why Tiny Magiq. */
    max-width: 100%;
    white-space: nowrap;
    gap: 7px;
    padding: 8px 14px;
    font-size: 13px;
}

/* ─── TALK TO US (embedded contact form, full-screen like the About drawer) ─── */

/* The talk panel is 100vw × 100vh — it occludes the backdrop completely, so the
   shared overlay's blur is never seen, yet the compositor still re-blurs it
   every frame over a home page whose carousel and signal rail keep animating.
   That showed up as a flicker on the contact form. No visual change; the panel
   was already covering every pixel this used to blur. */
.talk-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.talk-panel {
    left: 0;
    top: 0;
    grid-template-columns: minmax(0, 1fr);
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* Slide up into place; overrides the brand-reveal scale animation. */
    transform: translateY(18px);
}

.brand-reveal-overlay.open .talk-panel {
    transform: translateY(0);
}

/* The Talk overlay embeds the contact page over its bright purple→teal
   gradient, so the shared dark brand-reveal close reads wrong here. Match the
   "Who we are" / About drawer's light, glassy close button instead (the
   rotate-on-hover carries over from the base .brand-reveal-close:hover). */
.talk-panel .brand-reveal-close {
    top: 22px;
    right: 28px;
    width: 42px;
    height: 42px;
    font-size: 26px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.talk-panel .brand-reveal-close:hover {
    background: rgba(255, 255, 255, 0.26);
}

.talk-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--gradient-brand);
}

/* ─── TESTIMONIAL (single video; panel width follows the clip) ─── */
.testimonial-panel {
    grid-template-columns: minmax(0, 1fr);
    /* Roomier than the operating-belief panel so the 16:9 clip reads large. */
    width: min(1080px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
}

.testimonial-copy-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 30px 34px 34px;
}

.testimonial-heading {
    text-align: center;
    font-size: clamp(22px, 2.3vw, 28px);
}

/* Premium fixed 16:9 window — the YouTube player fills it edge to edge; the
   wrapper owns the frame (radius / shadow) so the iframe can be a plain fill. */
.testimonial-video-wrap {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 74vh;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.45);
}

.testimonial-video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ─── SIDE RAIL (unified frosted quick-menu — Quick Menu tab + stacked items) ─── */
.side-rail {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 150;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

/* Single translucent brand-gradient panel that holds every item.
   Lighter alpha + stronger frost/saturate reads as premium glass. */
.rail-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-right: none;
    border-radius: 18px 0 0 18px;
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.22), rgba(13, 148, 136, 0.16));
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: -10px 16px 44px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

/* Collapse control — slim bar at the top of the panel. */
.rail-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 7px 0;
    color: rgba(255, 255, 255, 0.68);
    background: transparent;
    border: none;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}

.rail-collapse:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
}

.rail-collapse svg {
    width: 16px;
    height: 16px;
}

/* Collapsed handle — a slim vertical tab that reopens the menu. */
.rail-handle {
    position: absolute;
    right: 0;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 15px 8px;
    color: var(--white);
    font-family: inherit;
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.28), rgba(13, 148, 136, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-right: none;
    border-radius: 14px 0 0 14px;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: -8px 12px 34px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    cursor: pointer;
    /* Hidden off the right edge until collapsed. */
    transform: translate(100%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.rail-handle-icon {
    width: 18px;
    height: 18px;
}

.rail-handle-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    user-select: none;
}

/* ── Collapsed state ── slide the panel out, bring the handle in. */
.side-rail.collapsed .rail-body {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.side-rail.collapsed .rail-handle {
    transform: translate(0, -50%);
    opacity: 1;
    pointer-events: auto;
}

.rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 96px;
    padding: 15px 9px;
    font-family: inherit;
    color: var(--white);
    text-align: center;
    text-decoration: none;
    background: transparent;
    border: none;
    /* Dotted dividers between items, like the reference. */
    border-bottom: 1px dotted rgba(255, 255, 255, 0.26);
    cursor: pointer;
    transition: background var(--transition);
}

.rail-item:last-child {
    border-bottom: none;
}

.rail-item:hover {
    background: rgba(255, 255, 255, 0.12);
}

.rail-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.rail-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.28;
    text-wrap: balance;
}

.rail-item-products {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.16), rgba(20, 184, 166, 0.08));
}

.rail-item-products:hover,
.rail-item-products:focus-visible {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.24), rgba(20, 184, 166, 0.14));
}

/* ─── PRODUCTS PREVIEW ─────────────────────────────────────────────────── */
.products-flyout {
    position: fixed;
    top: 50%;
    right: 108px;
    transform: translateY(-50%) translateX(14px);
    width: min(360px, calc(100vw - 144px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 155;
    transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s ease;
}

.products-flyout.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.products-flyout-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    color: var(--white);
    text-decoration: none;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background:
        radial-gradient(circle at top left, rgba(159, 103, 245, 0.22), transparent 46%),
        radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.18), transparent 46%),
        linear-gradient(180deg, rgba(18, 22, 40, 0.36), rgba(18, 22, 40, 0.18));
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.products-flyout-card:hover,
.products-flyout-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 34px 72px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    outline: none;
}

.products-flyout-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.products-flyout-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    border-radius: 99px;
    background: rgba(124, 58, 237, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.products-flyout-arrow {
    font-size: 20px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
}

.products-flyout-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.products-flyout-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 800;
    color: var(--white);
}

.products-flyout-lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.84);
}

.products-flyout-preview {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.products-flyout-preview img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.products-flyout-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.products-flyout-proof span {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.products-flyout-cta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 2px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--white);
}

/* ─── MOBILE NAV (hamburger + slide-in drawer) — phones only ───
   The side rail is hidden below the mobile breakpoint; these carry its four
   destinations. Both are display:none on desktop and switched on in the
   @media (max-width: 768px) block below. */
.nav-toggle {
    display: none;   /* revealed on phones */
    margin-left: auto;
    width: 44px;
    height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition), border-color var(--transition);
}

.nav-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

.nav-toggle-bar {
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--white);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

/* Morph the three bars into an X while the drawer is open. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-nav-scrim {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 18, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mobile-nav-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Height follows the five items — a top sheet, no wasted vertical space.
       The rows are deliberately tight: at rail spacing the menu ran most of the
       screen and read as five islands rather than one list. */
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 10px calc(12px + env(safe-area-inset-bottom, 0px));
    /* Bright brand glass — the page's purple→teal, translucent + frosted so it
       reads as glass rather than a dark slab, with soft corner glows. */
    background:
        radial-gradient(circle at top left, rgba(159, 103, 245, 0.5), transparent 60%),
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.42), transparent 60%),
        linear-gradient(160deg, rgba(124, 58, 237, 0.9), rgba(13, 148, 136, 0.86));
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(-100%);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
}

.mobile-nav.open .mobile-nav-panel {
    transform: translateY(0);
}

.mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 6px 9px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.mobile-nav-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.mobile-nav-close {
    width: 34px;
    height: 34px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: var(--white);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.32);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.mobile-nav-close:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: rotate(90deg);
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    font-family: inherit;
    text-align: left;
    color: var(--white);
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background var(--transition);
}

.mobile-nav-item:hover,
.mobile-nav-item:active {
    background: rgba(255, 255, 255, 0.16);
}

/* A chevron closes the row. Without it the label floated in a wide empty band
   and each row read as a card; with it the row reads as a destination. */
.mobile-nav-item::after {
    content: '›';
    margin-left: auto;
    padding-right: 2px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
}

.mobile-nav-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    /* A recessed dark-glass chip so the white icon pops on the bright panel. */
    background: rgba(17, 12, 38, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.34);
}

.mobile-nav-icon svg {
    width: 19px;
    height: 19px;
}

.mobile-nav-label {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* ─── ABOUT DRAWER (full-width slide-over, brand gradient, no scroll) ─── */
.about-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.about-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.about-panel {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #7c3aed 0%, #0d9488 100%);
    overflow: hidden;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Same atmospheric glows as the hero, so the panel feels part of the site */
.about-panel::before {
    content: '';
    position: absolute;
    top: -220px;
    left: -180px;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.35) 0%, transparent 70%);
    pointer-events: none;
}

.about-panel::after {
    content: '';
    position: absolute;
    bottom: -180px;
    right: -120px;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(13, 148, 136, 0.32) 0%, transparent 70%);
    pointer-events: none;
}

.about-overlay.open .about-panel {
    transform: translateX(0);
}

.about-close {
    position: absolute;
    top: 22px;
    right: 28px;
    z-index: 3;
    width: 42px;
    height: 42px;
    font-size: 26px;
    line-height: 1;
    color: var(--white);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 99px;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.about-close:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: rotate(90deg);
}

/* The stage scrolls top-to-bottom: one-liner → pains → strengths → footer.
   It's read like a short page, not crammed into a single locked viewport.
   The scroll lives on the full-width stage so the bar sits at the panel's far
   right; the reading column is centred inside via .about-inner. */
.about-stage {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow-y: auto;
    /* A slim, glassy scrollbar in keeping with the drawer, not the OS default. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.38) transparent;
}

.about-stage::-webkit-scrollbar {
    width: 10px;
}

.about-stage::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 99px;
}

.about-stage::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.32);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background var(--transition);
}

.about-stage::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.55);
}

.about-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 88px 48px 64px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 46px;
}

.about-intro {
    max-width: 960px;
}

.about-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
}

.about-headline {
    /* Sized so "Disruptive, Frugal Innovation" stays on one line beneath "An AI
       Innovation Lab for" — a clean two-line headline on desktop. */
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--white);
    margin-bottom: 18px;
}

.about-headline-accent {
    color: rgba(255, 255, 255, 0.66);
}

.about-body {
    font-size: clamp(16px, 1.5vw, 19px);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
    max-width: 640px;
}

/* Find-a-solution — the visitor's pains as cards (AOL hero inspiration:
   cards not circles). Each opens a conversation about that problem. */
.about-solve-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 16px;
}

/* "Find a solution for —" : C-DROPS categories as icon tiles. A thin line icon
   in a soft circle with a visitor-friendly label beneath. */
.about-pains {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.about-pain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    font-family: inherit;
    background: transparent;
    border: none;
    padding: 4px 2px;
    cursor: pointer;
}

.about-pain-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    transition: background var(--transition), border-color var(--transition),
        box-shadow var(--transition);
}

.about-pain-icon svg {
    width: 30px;
    height: 30px;
}

.about-pain:hover .about-pain-icon {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.about-pain-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.about-pain-context {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.4;
}

/* "Our strengths" : the four constructs as cards (not circles). The
   per-construct accent (--accent) is set by [data-construct] in home.css head. */
.about-strength-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.about-strength {
    display: flex;
    flex-direction: column;
    text-align: left;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 3px solid var(--accent, rgba(255, 255, 255, 0.5));
    border-radius: var(--radius);
    padding: 18px 18px 16px;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition),
        border-color var(--transition);
}

.about-strength:hover {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.about-strength-icon {
    color: var(--accent, var(--white));
    margin-bottom: 12px;
}

.about-strength-icon svg {
    width: 26px;
    height: 26px;
}

.strength-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.3;
    margin-bottom: 7px;
}

.strength-line {
    flex: 1;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.45;
    margin-bottom: 12px;
}

.strength-proof {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* "The people behind the work" — a roster of branded-glass cards that fill the
   column width. Founders get a prominent horizontal card (avatar beside name);
   mentors/advisors sit in a tidy row of vertical cards. Each card carries name
   + role only; the full bio is revealed in a card below on click, so the whole
   section stays roughly one screen-band tall instead of seven long cards. */
.about-team {
    display: flex;
    flex-direction: column;
}

/* THE TINY MAGIQ TEAM — a grid of branded-glass cards in the same language as the
   answer/caselet card a visitor gets on a question: translucent white glass, a
   bright brand top-edge, soft drop shadow. Cards hug their own content (align
   start), so an expanded card grows without stretching its neighbours. */
.team-roster {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Dense flow so neighbours backfill the gap the moment a card expands
       sideways (span 2) — the wall stays gap-free as cards open and close. */
    grid-auto-flow: row dense;
    align-items: start;
    gap: 20px;
}

/* Card shell. Collapsed, EVERY card is the same size — portrait · name (two-line
   reserve) · role (one line) · a two-line bio preview · a › affordance — because
   each field has a fixed/clamped height. Clicking anywhere (bar the LinkedIn
   link) expands the card sideways: it spans two columns and re-lays out as an
   identity panel beside the full bio, and the neighbours reflow around it. */
.team-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 20px 18px;
    font-family: inherit;
    text-align: left;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius);
    box-shadow:
        0 16px 42px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
    overflow: hidden;
    transition: background var(--transition), border-color var(--transition),
        box-shadow var(--transition), transform var(--transition);
}

/* Bright brand top-edge — the exact accent language of the caselet answer card. */
.team-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--purple-light), var(--teal-light));
}

.team-card:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: translateY(-3px);
}

/* Identity block: avatar over name + role while collapsed; becomes the fixed
   left panel when the card is expanded. */
.tc-identity {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

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

.team-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 0 1.5px rgba(255, 255, 255, 0.5),
        0 6px 14px rgba(0, 0, 0, 0.26);
}

.team-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-avatar-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

/* Name — reserved to two lines so one- and two-line names keep role + bio on the
   same baseline across every card (this is what makes the collapsed wall
   uniform). Released to its natural height on expand. */
.team-card-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.25;
    letter-spacing: -0.015em;
    min-height: 2.5em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Designation — muted mint, uppercase; the answer card's quiet label voice.
   Clamped to one line collapsed (the full role shows on expand) so a long title
   can't make one card taller than the rest. */
.team-card-role {
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(153, 246, 228, 0.9);
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Detail block: the bio (+ LinkedIn on expand). Sits under the identity while
   collapsed, becomes the right panel when expanded. */
.tc-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Bio — clamped to two lines while collapsed, released on expand. */
.team-card-bio {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.55;
    margin: 0;
}

/* LinkedIn — only surfaced once the card is expanded. */
.team-card-linkedin {
    display: none;
    align-self: flex-start;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 1px;
    transition: color var(--transition), border-color var(--transition);
}

.team-card-linkedin:hover {
    color: var(--pux);
    border-color: var(--teal-light);
}

/* › Expand affordance, pinned to the card's bottom-right; nudges right on hover
   and rotates to ‹ (180°) when the card is open. */
.team-card-toggle {
    align-self: flex-end;
    margin-top: 2px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
        border-color var(--transition), transform var(--transition);
}

.team-card-toggle svg {
    transition: transform var(--transition);
}

.team-card:hover .team-card-toggle {
    background: rgba(255, 255, 255, 0.18);
    color: var(--white);
    transform: translateX(2px);
}

/* ————— EXPANDED — the card grows sideways to span two grid columns; inside, the
   header (avatar + name + role) sits on top and the full bio flows directly
   BELOW the designation across the card's whole width. Neighbours reflow around
   it thanks to grid-auto-flow: dense on the roster. ————— */
.team-card.expanded {
    grid-column: span 2;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 24px 24px 22px;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(153, 246, 228, 0.45);
}

/* Header goes horizontal — avatar beside the name + role — using the extra
   width, with room on the right so a long title never slides under the toggle. */
.team-card.expanded .tc-identity {
    flex: 0 0 auto;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding-right: 50px;
}

.team-card.expanded .team-card-name {
    min-height: 0;
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

.team-card.expanded .team-card-role {
    white-space: normal;
    overflow: visible;
}

/* Bio spans the full card width, immediately under the designation. */
.team-card.expanded .tc-detail {
    width: 100%;
    /* Soft reveal as the bio opens. */
    animation: tcDetailIn var(--transition) ease both;
}

.team-card.expanded .team-card-bio {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.team-card.expanded .team-card-linkedin {
    display: inline-block;
}

/* Close affordance ‹ sits in the top-right corner, out of flow. Arrow stays
   white for legibility; the ring keeps the teal accent. */
.team-card.expanded .team-card-toggle {
    position: absolute;
    top: 18px;
    right: 18px;
    margin-top: 0;
    border-color: rgba(153, 246, 228, 0.6);
    color: var(--white);
}

.team-card.expanded .team-card-toggle svg {
    transform: rotate(180deg);
}

@keyframes tcDetailIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

/* Footer — proof strip, then a deliberate closing CTA band. Pulled up so the
   proof/divider sits closer under the team grid. */
.about-footer {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: -20px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding-top: 28px;
}

.about-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.about-proof-chip {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 8px 14px;
    border-radius: 99px;
}

.about-proof-chip strong {
    color: var(--white);
    font-weight: 800;
}

/* ISO 27001 chip. The overlay panels cover the footer (body.reveal-open /
   .about-open lock the page), so the footer's certification line never reaches
   a visitor who only ever opens panels. It rides the proof rows these panels
   already use for every other claim — teal spine to mark it as the one
   third-party-verified item in a row of our own numbers. */
.about-proof-chip.is-cert {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-color: rgba(20, 184, 166, 0.45);
    background: rgba(20, 184, 166, 0.14);
}

.about-proof-chip.is-cert svg {
    flex: none;
    width: 15px;
    height: 15px;
}

/* Closing CTA — a glass band that groups the line + button into one clear
   call to action, rather than a button floating beside the text. */
.about-cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 28px;
    padding: 22px 28px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.about-cta-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-cta-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.about-foot-line {
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.about-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    color: var(--white);
    /* Unified lit-up skin — mirrors .btn-primary in buttons.css */
    background: linear-gradient(135deg, #8b5cf6 0%, #14b8a6 100%);
    border: 1px solid rgba(255, 255, 255, 0.32);
    padding: 10px 28px;
    border-radius: 14px;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.01em;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.30),
        0 3px 14px rgba(124, 58, 237, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: filter var(--transition), transform var(--transition), box-shadow var(--transition);
}

.about-cta:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.34),
        0 4px 18px rgba(124, 58, 237, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

.about-cta:focus-visible {
    outline: 2px solid rgba(168, 85, 247, 0.88);
    outline-offset: 3px;
}

/* Lock background scroll while the drawer is open */
body.about-open,
body.reveal-open {
    overflow: hidden;
}

/* ─── RESPONSIVE ─── */

/* Below the desktop breakpoint the About stage gives up "no scroll" and
   becomes a tidy scrolling column — crisp on desktop, usable everywhere. */
@media (max-width: 1000px) {
    .about-pains {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .about-strength-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-roster {
        grid-template-columns: repeat(3, 1fr);
    }

    .about-inner {
        gap: 34px;
        padding: 84px 32px 56px;
    }

    /* Below desktop the board gives up "one screen" and shifts to two columns
       so the copy column never gets cramped. */
    .signals {
        min-height: 0;
        justify-content: flex-start;
        padding: 56px 0 72px;
    }

    .stage-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(100%, 840px);
    }

    .stage-card {
        min-height: 175px;
    }
}

/* Stats fold into a 2×2 grid once the row would crowd. */
@media (max-width: 860px) {
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 0;
    }

    .hero-stat:nth-child(odd) {
        border-left: none;
        padding-left: 0;
    }

    .hero-stat:nth-child(even) {
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .about-inner {
        padding: 80px 22px 52px;
    }

    .team-roster {
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-reveal-panel {
        grid-template-columns: 1fr;
        width: min(720px, calc(100vw - 24px));
    }

    /* Stacked layout — show the whole brand image (it's portrait) without any
       crop, but cap its height and centre it so the copy needs less scrolling.
       The dark media backdrop blends with the image's own dark edges. */
    .brand-reveal-media {
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Even black gutters top/bottom so the portrait sits in a deliberate
           frame rather than butting hard against the copy panel below. */
        padding: 18px 0;
    }

    .brand-reveal-image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 40vh;
        object-fit: contain;
    }

    .brand-reveal-copy-panel {
        padding: 26px 22px 24px;
    }

    /* ── Response: proof-as-button on phones ──
       The inline caselet card is gone on phones. A proof button rendered
       directly after the visitor's submitted response (components.css) opens the same
       card as a centered popup — the full caselet, nothing clamped or shed.
       display gets an !important because app.js shows the panel with an
       inline style whenever a caselet is present; the popup state
       (body.caselet-popup-open, components.css) out-specifies this rule. */
    .response-aside {
        display: none !important;
    }

    .about-cta-band {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    /* Phones swap the right-edge rail for the header hamburger + slide-in drawer. */
    .products-flyout {
        display: none;
    }

    .side-rail {
        display: none;
    }

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

    /* Phones: push the video panel near full-bleed and trim its padding so the
       16:9 player is as large as a portrait screen allows. */
    .testimonial-panel {
        width: calc(100vw - 12px);
        max-width: calc(100vw - 12px);
    }

    .testimonial-copy-panel {
        padding: 18px 8px 16px;
        gap: 14px;
    }

    .testimonial-heading {
        font-size: 21px;
    }

    /* Keep the composer a single-row capsule on mobile; just tighten Send. */
    .reply-send {
        padding: 10px 15px;
    }

}

/* Phones: the board becomes a swipeable carousel — one vertical card per view,
   image above / copy + button below, auto-advancing every 4s (app.js) with the
   arrow row beneath. */
@media (max-width: 640px) {
    .stage-cards {
        display: flex;
        grid-template-columns: none;
        gap: 0;
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .stage-cards::-webkit-scrollbar {
        display: none;
    }

    /* One card fills the view. */
    .stage-card {
        flex: 0 0 100%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        /* Vertical card: artwork on top, copy + button underneath. */
        flex-direction: column;
        aspect-ratio: auto;
        min-height: 0;
    }

    /* Square artwork frame — the source is square, so cover fills it edge to
       edge with zero crop and no gutters. */
    .stage-card-media {
        flex: none;
        width: 100%;
        aspect-ratio: 1 / 1;
        border-left: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .stage-card-img {
        object-fit: cover;
    }

    /* No hover on touch: instead of a full scrim, the "Explore →" cue rests as a
       small glass chip pinned to the icon's bottom-right corner — always visible,
       never covering the artwork. */
    .stage-card-explore {
        inset: auto 10px 10px auto;
        padding: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        opacity: 1;
    }

    .stage-card-explore::before {
        transform: none;
        background: color-mix(in srgb, var(--accent) 34%, rgba(10, 12, 32, 0.5));
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    }

    .stage-card-overlay {
        width: 100%;
        flex: 1 1 auto;
        padding: 16px 16px 16px;
    }

    .stage-card-hook {
        font-size: 16px;
    }

    .stage-card-explain {
        font-size: 12.5px;
        margin-top: 8px;
    }

    /* Responsive full-width button — no longer a nowrap pill that can clip off
       the card edge; it spans the copy column and centres its label, wrapping
       if it must. */
    .stage-card-cta {
        margin-top: 12px;
        align-self: stretch;
        justify-content: center;
        white-space: normal;
        text-align: center;
        font-size: 12px;
    }

    /* Arrow row under the carousel. */
    .stage-carousel-nav {
        display: flex;
        justify-content: center;
        gap: 22px;
        margin-top: 18px;
    }
}

@media (max-width: 520px) {
    .about-pains {
        grid-template-columns: repeat(3, 1fr);
    }

    .brand-reveal-panel {
        width: calc(100vw - 18px);
        border-radius: 22px;
    }

    .brand-reveal-proof .about-proof-chip.is-cert {
        gap: 7px;
        padding: 8px 12px;
        font-size: 13px;
        letter-spacing: 0;
    }

    .brand-reveal-proof .about-proof-chip.is-cert svg {
        width: 15px;
        height: 15px;
    }

    .brand-reveal-media {
        min-height: 0;
    }

    .brand-reveal-close {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
    }

    .about-strength-grid {
        grid-template-columns: 1fr;
    }

    /* One card per row on phones — full bios read without cramping. */
    .team-roster {
        grid-template-columns: 1fr;
    }

    /* No sideways room at one column: the expanded card just fills the row and
       grows downward — the header-over-bio stack is already the base layout. */
    .team-card.expanded {
        grid-column: auto;
    }

    /* Mobile cards expand straight DOWN, so the affordance is a down chevron ⌄
       (collapsed) that becomes an up chevron ⌃ (expanded) — not the desktop's
       sideways ›/‹. When open it also leaves the top corner and drops to the
       card's bottom-right, sitting below the bio. */
    .team-card-toggle svg {
        transform: rotate(90deg);
    }

    .team-card.expanded .team-card-toggle {
        position: static;
        top: auto;
        right: auto;
        align-self: flex-end;
    }

    .team-card.expanded .team-card-toggle svg {
        transform: rotate(-90deg);
    }

    /* Toggle no longer occupies the top-right, so the header reclaims that space. */
    .team-card.expanded .tc-identity {
        padding-right: 0;
    }

    /* Keep the 2×2 proof grid on phones (inherited from the 860px rule); just
       tighten the column padding so numbers and labels breathe when narrow. */
    .hero-stats {
        gap: 16px 0;
    }

    .hero-stat {
        padding: 4px 14px;
    }

    .hero-stat:nth-child(odd) {
        border-left: none;
        padding-left: 0;
    }

    .hero-stat:nth-child(even) {
        padding-right: 0;
    }
}

/* ─── HERO SIGNAL RAIL ───────────────────────────────────────────────────
   Three cycling signals below the asker — one minimal chip per adoption stage
   (Catalyst / Amplifier / Stabilizer), each with a coloured accent bar. Prev/
   next arrows step the trio; a battlecard button opens the full board. Keeps
   the hero one calm screen. */
.signal-rail {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.signal-rail[hidden] {
    display: none;
}

/* Board opener — an icon-only rounded-square button parked at the right end of
   the single signal row (desktop only; phones keep the corner FAB). The 3x3
   grid glyph mirrors the nine-signal board it opens; no label, so it sits as a
   compact square beside the prev/next stepper. */
.signal-rail-all {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #ffffff;
    /* Same lit purple→teal gradient + light edge as the Diagnose button
       (see css/buttons.css), so the opener reads as a primary action. */
    background: linear-gradient(135deg, #8b5cf6 0%, #14b8a6 100%);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 12px;
    cursor: pointer;
    transition: filter var(--transition), border-color var(--transition),
        color var(--transition), transform var(--transition);
}

/* Premium hover tooltip — a light frosted-glass "Explore" bubble that drops in
   below the button and off to the right, matching the site's glass panels
   (translucent white over a blur, top sheen, hairline border). A little glass
   caret at the top-left points up at the button. Label (::after) + caret
   (::before) animate opacity + translateY; pointer-events:none so they never
   swallow the hover. */
.signal-rail-all::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 12px);
    left: 12px;
    padding: 6px 15px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.92);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.02) 60%),
        rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 13px;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.24),
        0 2px 10px rgba(124, 58, 237, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.signal-rail-all::before {
    content: '';
    position: absolute;
    top: calc(100% + 7px);
    left: 21px;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    border-left: 1px solid rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    opacity: 0;
    transform: translateY(-6px) rotate(45deg);
    pointer-events: none;
    transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.signal-rail-all:hover::after,
.signal-rail-all:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.signal-rail-all:hover::before,
.signal-rail-all:focus-visible::before {
    opacity: 1;
    transform: translateY(0) rotate(45deg);
}

.signal-rail-all:hover,
.signal-rail-all:focus-visible {
    /* Brighten the gradient on hover (matching the primary buttons) instead of
       tinting over it, so the purple→teal fill stays intact. */
    filter: brightness(1.06);
    border-color: rgba(255, 255, 255, 0.40);
    color: var(--white);
    transform: translateY(-1px);
    outline: none;
}

/* Leading 3x3 grid glyph — nine squares mirror the nine-signal board it opens. */
.signal-rail-all-icon {
    display: inline-flex;
    align-items: center;
}

.signal-rail-all-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* Desktop keeps the opener icon-only (the "Explore" read is carried by the
   hover tooltip). Phones have no hover, so the label is revealed inline in the
   max-width:640px block below. */
.signal-rail-all-text {
    display: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.94);
}

.signal-rail-row {
    display: flex;
    align-items: center;
    /* Enough air between the pill trio and the round arrows that they never
       read as one merged control, even when a pill runs wide. */
    gap: 16px;
}

/* Grid-stacked sets: every set shares one cell, so the row auto-sizes to the
   tallest set and each can crossfade over the last without a height jump. */
.signal-rail-stage {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
}

.signal-set {
    grid-area: 1 / 1;
    display: flex;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.signal-set.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

/* The three sets sit left-aligned; each chip hugs its own text rather than
   stretching, so the row breathes at the right — calmer, more editorial. */
.signal-set {
    justify-content: flex-start;
}

/* Minimal chip: rounded, translucent, with a 3px stage-accent bar down the
   left edge — mirrors the construct .chip exactly (its reference look). No
   dot, no arrow — just the signal. Equal, constant-width columns so the trio
   stays the same size as the carousel cycles through its sets — no reflow. */
.signal-pill {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    overflow: hidden;
    padding: 11px 20px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.07);
    color: var(--white);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.signal-pill::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
}

.signal-pill:hover,
.signal-pill:focus-visible {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    outline: none;
}

.signal-pill-text {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Prev/next arrows — round and prominent in the header row, brighter than the
   old footer chevrons so the stepper reads at a glance. */
.signal-nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.signal-nav[hidden] {
    display: none;
}

.signal-nav:hover,
.signal-nav:focus-visible {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--white);
    outline: none;
}

.signal-nav svg {
    width: 15px;
    height: 15px;
}

/* ─── FLOATING BATTLECARD (desktop corner FAB) ───
   A circular opener pinned to the bottom-left, lifted above the footer and clear
   of the centre-right side rail. The label lives inside the pill and reveals on
   hover (expanding rightward from the icon); the crossed-sword
   emblem carries the "battle" read. Hidden during a conversation or when any
   overlay is open. */
.signal-fab {
    position: fixed;
    /* Bottom-left corner, lifted clear of the footer band (no side rail to
       dodge on the left, so it sits cleanly in the gutter). */
    left: 42px;
    bottom: 104px;
    z-index: 200;
    /* Desktop hides the FAB — the inline rail opener ("All 9 signals") now
       carries this action next to the chips. Phones re-show it in the
       max-width:640px block below. */
    display: none;
    align-items: center;
    gap: 10px;
    height: 58px;
    padding: 0;
    width: 58px;                 /* collapsed = a circle; expands on hover */
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #a274f7 0%, #7c3aed 44%, #14b8a6 100%);
    color: var(--white);
    cursor: pointer;
    overflow: hidden;
    /* Glossy dome: inset top highlight + inset bottom shading over the drop
       shadow read as a premium physical button, not a flat disc. */
    box-shadow:
        0 12px 30px rgba(12, 8, 30, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -3px 8px rgba(20, 10, 40, 0.28);
    transition: width 0.36s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    /* Springy pop when it first appears, then a slow breathing glow so it feels
       alive without demanding attention. Both stand down on hover (below), where
       the width/lift transition takes over cleanly. */
    animation: fabIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        fabBreathe 3.6s ease-in-out 0.9s infinite;
}

.signal-fab[hidden] {
    display: none;
}

@keyframes fabIn {
    from { opacity: 0; transform: scale(0.4) translateY(14px); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fabBreathe {
    0%, 100% {
        box-shadow:
            0 12px 28px rgba(12, 8, 30, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            inset 0 -3px 8px rgba(20, 10, 40, 0.28),
            0 0 0 0 rgba(159, 103, 245, 0);
    }
    50% {
        box-shadow:
            0 14px 34px rgba(12, 8, 30, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            inset 0 -3px 8px rgba(20, 10, 40, 0.28),
            0 0 24px 3px rgba(159, 103, 245, 0.42);
    }
}

.signal-fab-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;                 /* matches the collapsed circle so the icon centres */
    height: 58px;
}

.signal-fab-icon svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* A small "unsheathe" flourish on the crossed swords when the FAB is engaged. */
.signal-fab:hover .signal-fab-icon svg,
.signal-fab:focus-visible .signal-fab-icon svg {
    transform: rotate(-8deg) scale(1.08);
}

.signal-fab-label {
    flex: 0 0 auto;
    padding-right: 20px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.signal-fab:hover,
.signal-fab:focus-visible {
    width: 224px;
    box-shadow:
        0 18px 42px rgba(124, 58, 237, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -3px 8px rgba(20, 10, 40, 0.28);
    transform: translateY(-3px);
    outline: none;
    animation: none;   /* hand control to the transition — no pulse fighting the lift */
}

.signal-fab:hover .signal-fab-label,
.signal-fab:focus-visible .signal-fab-label {
    opacity: 1;
}

/* The FAB is a landing-view affordance — pull it out while an answer is up or
   any overlay (including its own board) is open. */
body.in-conversation .signal-fab,
body.reveal-open .signal-fab,
body.about-open .signal-fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Phones: no side rail to dodge, so keep the FAB a compact circle in the
   corner and stack the three chips full-width. */
/* Tablet / narrow-laptop: the single desktop row (3 chips + prev/next + grid
   opener) runs out of room well before phone widths and the fixed-size nav
   buttons start to overlap the last chip. So from here down the row wraps: the
   three chips keep their side-by-side trio on the first line, and the stepper +
   opener drop onto a second line beneath, with the opener carrying a visible
   "Explore" label (no reliance on hover). */
@media (max-width: 1024px) {
    .signal-fab {
        display: none;
    }

    .signal-rail-row {
        flex-wrap: wrap;
        /* A clear gap between the wrapped chip row and the stepper row below,
           while keeping the arrows + opener snug against each other. */
        column-gap: 10px;
        row-gap: 20px;
    }

    .signal-rail-stage {
        flex: 1 1 100%;
        order: 0;
    }

    #signalPrev {
        order: 1;
    }

    #signalNext {
        order: 2;
    }

    /* The opener now sits inline in the wrapped row, so it carries a visible
       "Explore" label — grid glyph + word as a compact pill, pushed to the far
       right of the stepper row to mirror the desktop opener's placement. */
    .signal-rail-all {
        order: 3;
        margin-left: auto;
        width: auto;
        height: 34px;
        padding: 0 16px;
        gap: 8px;
        border-radius: 99px;
    }

    .signal-rail-all-icon svg {
        width: 18px;
        height: 18px;
    }

    .signal-rail-all-text {
        display: inline;
    }

    /* The hover tooltip is redundant once the label is inline. */
    .signal-rail-all::after,
    .signal-rail-all::before {
        display: none;
    }
}

@media (max-width: 640px) {
    /* A touch more vertical rhythm on phones — title, chips and opener each
       get a little more air so the stack breathes without feeling loose. */
    .signal-rail {
        gap: 14px;
    }

    /* Phones give each chip its own full-width row (the side-by-side trio gets
       too cramped to read once the viewport is this narrow). */
    .signal-set {
        flex-wrap: wrap;
        gap: 14px;
    }

    .signal-pill {
        flex: 1 1 100%;
    }

    .signal-pill-text {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .signal-set {
        transition: none;
    }

    .signal-fab {
        transition: box-shadow var(--transition);
        animation: none;
    }

    .signal-fab-icon svg {
        transition: none;
    }

    .signal-rail-all::after,
    .signal-rail-all::before {
        transition: opacity 0.2s ease;
    }

    .signal-rail-all:hover::after,
    .signal-rail-all:focus-visible::after {
        transform: none;
    }

    .signal-rail-all:hover::before,
    .signal-rail-all:focus-visible::before {
        transform: rotate(45deg);
    }
}

/* ─── ALL-NINE-SIGNALS OVERLAY ───
   Reuses the brand-reveal shell but as a single wide column (not the 2-up
   media/copy grid) so the full 3x3 board sits centred. Appended last so these
   overrides win the source-order tie against .brand-reveal-panel. */
.signals-panel {
    display: block;
    grid-template-columns: none;
    width: min(1300px, calc(100vw - 34px));
    /* Tighter top/bottom than the sides — the board reads as one screen with no
       dead band above the headline or below the last row (the sub gap and card
       grid already breathe on their own). */
    padding: clamp(18px, 2.4vw, 30px) clamp(28px, 4vw, 50px);
    text-align: center;
}

.signals-overlay-head {
    margin-bottom: clamp(10px, 1.6vh, 18px);
}

.signals-overlay-sub {
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--muted);
}

.signals-panel .stages {
    text-align: left;
}

@media (max-width: 768px) {
    .signals-panel {
        width: min(560px, calc(100vw - 24px));
        padding: 60px 18px 26px;
    }
}

/* ─── SIGNALS DRAWER (left edge) ───
   Desktop-only. A vertical tab pinned to the left edge slides out the full
   nine-signal board, mirroring the right-hand quick menu's collapse behaviour.
   The wrapper is a passive layer; the tab, scrim and panel position themselves. */
.signal-drawer {
    position: fixed;
    inset: 0;
    z-index: 240;
    /* The wrapper itself never eats clicks — only its children (tab / scrim /
       panel) do, so the hero stays live while the drawer is closed. */
    pointer-events: none;
}

.signal-drawer[hidden] {
    display: none;
}

/* Collapsed vertical tab — the left-edge counterpart to the right quick-menu
   handle, but tuned lighter: it sits over the darker purple side of the hero, so
   the frosted glass alone would read heavier than the MENU tab (which floats
   over the light teal side). A brighter tint layer + a white sheen lift it to
   the same premium, translucent glass; the drop shadow is kept whisper-light.
   A chevron sits on top with the prompt as upright vertical text below. */
.signal-drawer-tab {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* A touch wider than the MENU handle so the long label reads as a deliberate,
       prominent rail rather than a thin sliver. */
    padding: 18px 12px;
    color: var(--white);
    font-family: inherit;
    /* Two layers: a soft top-down white sheen for the glass highlight, over a
       lighter purple→teal tint (the -light hues, not the deep base brand). */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.02)),
        linear-gradient(180deg, rgba(159, 103, 245, 0.34), rgba(20, 184, 166, 0.28));
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-left: none;
    border-radius: 0 16px 16px 0;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    /* No shadow at all. The premium read comes purely from the frosted glass:
       the bright hairline border plus the white sheen already baked into the
       top of the background gradient give the "lit from above" edge — no
       box-shadow needed. */
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease,
        box-shadow 0.3s ease, opacity 0.28s ease;
}

.signal-drawer-tab:hover,
.signal-drawer-tab:focus-visible {
    outline: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07) 45%, rgba(255, 255, 255, 0.03)),
        linear-gradient(180deg, rgba(159, 103, 245, 0.44), rgba(20, 184, 166, 0.36));
    box-shadow: none;
}

.signal-drawer-tab-icon {
    width: 18px;
    height: 18px;
}

.signal-drawer-tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}

/* Dimmer behind the panel — lighter than the centre overlay so the drawer reads
   as a slide-out rather than a full modal. Click to collapse. */
.signal-drawer-scrim {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 18, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* The sliding panel — parked off the left edge until opened. Same bright brand
   gradient as the centre overlay so the board is visually identical. */
.signal-drawer-panel {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-100%, -50%);
    width: min(1240px, 94vw);
    max-height: calc(100vh - 28px);
    overflow: auto;
    padding: clamp(20px, 2.6vw, 34px) clamp(26px, 3.2vw, 46px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-left: none;
    border-radius: 0 26px 26px 0;
    background:
        radial-gradient(circle at top left, rgba(159, 103, 245, 0.32), transparent 42%),
        radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.28), transparent 42%),
        linear-gradient(135deg, #7c3aed 0%, #0d9488 100%);
    /* No shadow while parked off-edge — its wide dark blur would bleed back
       onto the hero and read as a murky halo behind the closed tab. The depth
       shadow is added only in the open state below. */
    box-shadow: none;
    pointer-events: auto;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.38) transparent;
}

.signal-drawer-panel::-webkit-scrollbar {
    width: 10px;
}

.signal-drawer-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 99px;
}

.signal-drawer-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.32);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* Collapse control — top-right of the panel, points back toward the edge. */
.signal-drawer-collapse {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--white);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 99px;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.signal-drawer-collapse:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: translateX(-2px);
}

.signal-drawer-collapse svg {
    width: 20px;
    height: 20px;
}

.signal-drawer-head {
    margin-bottom: clamp(10px, 1.6vh, 18px);
    text-align: center;
}

.signal-drawer-head .signals-overlay-sub {
    margin: 6px 0 0;
}

.signal-drawer-panel .stages {
    text-align: left;
}

/* ── Open state ── slide the panel in, raise the scrim, tuck the tab away. */
.signal-drawer.open .signal-drawer-panel {
    transform: translate(0, -50%);
    box-shadow: 24px 0 90px rgba(0, 0, 0, 0.44);
}

.signal-drawer.open .signal-drawer-scrim {
    opacity: 1;
    pointer-events: auto;
}

.signal-drawer.open .signal-drawer-tab {
    transform: translate(-100%, -50%);
    opacity: 0;
    pointer-events: none;
}

/* The drawer is a landing-view affordance — stand the tab down while an answer
   is on screen or any centre overlay is open (the drawer sets reveal-open too,
   which is why this also hides the tab whenever the panel itself is open). */
body.in-conversation .signal-drawer-tab,
body.reveal-open .signal-drawer-tab,
body.about-open .signal-drawer-tab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Phones/tablets: the drawer is desktop-only (the centre overlay + FAB carry
   the board on small screens). */
@media (max-width: 768px) {
    .signal-drawer {
        display: none;
    }
}