/* base.css
   Page chrome + response frame — split from style.css
   Header, hero, input, chips, samples, response area/canvas,
   thinking animation, proof stack, footer, responsive */

/* ─── PAGE SCROLLBAR ───
   Slim, glassy scrollbar for the main document — same treatment as the About
   drawer (.about-stage), not the OS default. */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.38) transparent;
}

html::-webkit-scrollbar {
    width: 10px;
}

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

html::-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);
}

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

/* ─── HEADER ─── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background:
        linear-gradient(180deg, rgba(19, 19, 32, 0.9) 0%, rgba(9, 9, 16, 0.92) 100%);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: padding var(--transition);
}

/* Shares the hero's centred column (--hero-col) so the logo sits flush with the
   hero text's left edge — both are centred in the window together. */
.header-inner {
    /* Wider shell column so the logo sits further out to the left, past the
       hero text's edge, and the header spans more of the window. */
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 12px var(--shell-pad);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.brand-logo {
    height: 40px;
    width: auto;
    border-radius: 8px;
}

.brand-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.brand-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--pux);
    background: rgba(20, 184, 166, 0.12);
    border: 1px solid rgba(20, 184, 166, 0.3);
    padding: 2px 8px;
    border-radius: 99px;
    text-transform: uppercase;
}

/* ─── HERO (Section 1) ───
   Left-aligned stack: label → headline → sub → asker capsule → proof stats.
   The signals section peeks below so the guided path stays discoverable. */

.hero {
    /* Full-height hero — fills the viewport below the sticky header and centres
       its content, so pitch → ask → signals → proof sit in a tall, evenly
       balanced column with real air top and bottom. This is the premium read:
       the section owns the screen rather than crowding under the header. */
    min-height: calc(100svh - var(--header-h) - 60px);
    padding: 16px 0 2px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Atmospheric orbs — slow drift keeps the landing feeling alive. */
.hero::before {
    content: '';
    position: absolute;
    top: -200px;
    left: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.20) 0%, transparent 70%);
    pointer-events: none;
    animation: orbDrift 16s ease-in-out infinite;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -150px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(13, 148, 136, 0.16) 0%, transparent 70%);
    pointer-events: none;
    animation: orbDrift 21s ease-in-out infinite reverse;
}

@keyframes orbDrift {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(46px, 34px, 0);
    }
}

.hero-inner {
    /* Narrow centred column (shared with the header) — the block sits in the
       middle of the window; its contents stay left-aligned. */
    max-width: var(--hero-col);
    margin: 0 auto;
    width: 100%;
    padding: 0 var(--shell-pad);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    /* Left-aligned, uncluttered rhythm; the slimmed header + footer chrome funds
       this breathing space so the full hero fits one screen without scroll. */
    gap: 22px;
}

.hero-copy {
    /* Wide enough that "business impact at Warp Speed" holds one line at the
       capped headline size. */
    max-width: 880px;
    margin: 0;
}

.hero-headline {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(36px, 4.3vw, 56px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0;
    color: var(--white);
    margin-bottom: 12px;
}

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

.hero-sub {
    font-size: clamp(16px, 1.35vw, 18px);
    font-weight: 400;
    color: var(--muted);
    /* Wide enough that the pitch settles onto two lines at the capped size,
       rather than spilling to a third. Narrower viewports still wrap freely. */
    max-width: 800px;
    margin: 0;
    line-height: 1.6;
}

/* ─── ASKER ───
   Plain side-by-side field and Ask button: broad, calm, and low-elevation. */

.hero-ask {
    width: 100%;
}

.hero-ask .input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;   /* field + button share one height */
    gap: 14px;
    max-width: none;        /* fill the hero column */
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

/* The field — a broad, translucent panel with a simple hairline. */
.hero-ask .input-wrap input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 18px 22px;
    font-size: 16px;
    font-family: inherit;
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 16px;
    outline: none;
    backdrop-filter: blur(8px) saturate(115%);
    -webkit-backdrop-filter: blur(8px) saturate(115%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.hero-ask .input-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.hero-ask .input-wrap input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 0 3px rgba(255, 255, 255, 0.08);
}

/* The Ask button inherits the canonical lit-up skin from buttons.css
   (brand gradient + ambient drop shadow + purple glow + hover lift).
   Here we only set the hero sizing and match the input's 20px radius. */
.hero-ask .input-wrap button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    padding: 0 34px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-family: inherit;
    border-radius: 16px;
    /* Branded glass: translucent brand gradient over a frosted blur, a light
       top sheen for the glass highlight, and a soft brand glow — the page
       shows faintly through it, giving real glass depth. */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.03) 58%),
        linear-gradient(135deg, rgba(139, 92, 246, 0.72) 0%, rgba(20, 184, 166, 0.72) 100%);
    border: 1px solid rgba(255, 255, 255, 0.40);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22),
        0 2px 12px rgba(124, 58, 237, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.hero-ask .input-wrap button:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.26),
        0 4px 18px rgba(124, 58, 237, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.hero-ask .input-wrap button:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

/* ─── CHIPS ─── */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.chip {
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--white);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 9px 18px;
    border-radius: 99px;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
    position: relative;
    overflow: hidden;
}

.chip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.chip-iws::before {
    background: var(--iws);
}

.chip-pux::before {
    background: var(--pux);
}

.chip-aifl::before {
    background: var(--aifl);
}

.chip-fsa::before {
    background: var(--fsa);
}

.chip:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* ─── PAIN-POINT PILLS (primary entry surface) ─── */

.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    transition: opacity var(--transition);
}

.pill {
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 9px 16px;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    line-height: 1.35;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.pill:hover {
    background: rgba(167, 139, 250, 0.14);
    border-color: rgba(167, 139, 250, 0.5);
    transform: translateY(-1px);
}

.pill-more {
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.18);
    font-weight: 600;
}

.pill-more:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ─── EXPLORE (demoted construct shortcuts) ─── */

.explore {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 20px;
}

.explore-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
}

.chips-secondary {
    margin-bottom: 0;
}

.chips-secondary .chip {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 13px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.04);
}

.chips-secondary .chip:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
}

/* ─── TURN QUESTION (the visitor's anchored question) ─── */

/* Sits inside .response-inner already — no own width/padding, so it lines up
   flush-left with the answer body below it. */
.response-back {
    position: absolute;      /* pinned top-right of .response-inner, out of flow */
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 15px 8px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 99px;
    cursor: pointer;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.response-back:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
}

.response-back-arrow {
    font-size: 15px;
    line-height: 1;
    transition: transform var(--transition);
}

.response-back:hover .response-back-arrow {
    transform: translateX(-2px);
}

.turn-question {
    margin: 0 0 18px;
    padding-right: 120px;    /* clear of the top-right "Start over" button */
}

.tq-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(201, 184, 255, 0.92);
    margin-bottom: 8px;
}

.tq-text {
    display: block;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--white);
}

/* ─── v5 CONTINUED QUESTION ─── */

.block-continued-question {
    margin-top: 4px;
}

.continued-question {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    padding: 14px 18px;
    border-left: 2px solid rgba(167, 139, 250, 0.6);
    background: rgba(167, 139, 250, 0.06);
    border-radius: 0 8px 8px 0;
}

/* ─── RESPONSE AREA ─── */

/* Height follows the answer: a short answer sits well inside one screen (no
   page scroll), a long one grows past the viewport and the page scrolls then —
   and only then. The old min-height:60vh + 100px bottom padding overflowed by
   roughly the padding itself, so a short answer still showed a scrollbar. */
.response-area {
    padding: 40px 32px 48px;
}

.response-inner {
    position: relative;      /* anchor for the top-right "Start over" button */
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

/* Slim band stuck directly above the footer. Hidden until app.js reveals it
   once an answer is on screen, so it never shows on the bare hero. */
.response-disclaimer {
    display: none;
    padding: 22px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.28);
    text-align: center;
}

.response-disclaimer a {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: underline;
}

.response-disclaimer a:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* ─── SCROLL CUE (desktop-only) ───
   Bouncing chip pinned bottom-centre while a response is on screen. Revealed by
   app.js (.is-visible) and faded out the instant the visitor scrolls
   (.is-dismissed). Hidden entirely on tablets/phones — touch users scroll by
   instinct and the fixed chip would fight the side rail / fab. */
.scroll-cue {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(20, 16, 40, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 99px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 40;
}

.scroll-cue.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Once the visitor scrolls, fade out and stay out for this answer. */
.scroll-cue.is-dismissed {
    opacity: 0;
    visibility: hidden;
}

.scroll-cue-arrow {
    font-size: 15px;
    line-height: 1;
    animation: scroll-cue-bob 1.4s ease-in-out infinite;
}

@keyframes scroll-cue-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-cue-arrow { animation: none; }
}

/* Touch / small screens: no fixed scroll cue. */
@media (max-width: 900px) {
    .scroll-cue { display: none !important; }
}

/* ─── THINKING ANIMATION ─── */

.thinking {
    padding: 40px 0 32px;
    /* Progressive render keeps this panel up while the answer streams in below
       it, so it now has to LEAVE rather than blink out: the answer glides up
       into the space it gives back instead of jumping when display flips.
       overflow is deliberately NOT set here — the active dot's glow reaches
       20px and clipping it would dull the one thing still moving. It is added
       with .is-retiring, for the length of the collapse only. */
    /* easeOutQuint, the curve the rest of the site closes things on
       (components.css, product.css). It leaves fast and lands soft, so the
       answer rising into the space reads as arriving rather than as the panel
       being yanked away. Duration matches THINKING_COLLAPSE_MS in app.js. */
    transition:
        max-height 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.18s ease,
        padding 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.thinking.is-retiring {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

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

.thinking-nodes {
    display: flex;
    align-items: center;
    gap: 0;
}

.tnode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.tnode.visible {
    opacity: 1;
    transform: scale(1);
}

.tnode-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.tnode.active .tnode-dot {
    background: var(--purple-light);
    border-color: var(--purple-light);
    box-shadow: 0 0 12px rgba(159, 103, 245, 0.6);
    animation: nodePulse 1s ease infinite;
}

.tnode.done .tnode-dot {
    background: var(--teal-light);
    border-color: var(--teal-light);
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.4);
}

@keyframes nodePulse {

    0%,
    100% {
        box-shadow: 0 0 12px rgba(159, 103, 245, 0.6);
    }

    50% {
        box-shadow: 0 0 20px rgba(159, 103, 245, 0.9);
    }
}

.tnode-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.tnode.active .tnode-label {
    color: var(--iws);
}

.tnode.done .tnode-label {
    color: rgba(255, 255, 255, 0.7);
}

.tnode-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    min-width: 60px;
    max-width: 140px;
    margin-bottom: 24px;
    transition: background 0.4s ease;
    position: relative;
    overflow: hidden;
}

.tnode-line.active::after {
    content: '';
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--purple-light), transparent);
    animation: lineFlow 0.8s ease forwards;
}

@keyframes lineFlow {
    to {
        left: 100%;
    }
}

.tnode-line.done {
    background: rgba(20, 184, 166, 0.4);
}

/* ─── RESPONSE CANVAS — two panel ─── */

.response-canvas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
}

/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their content's intrinsic width. Both columns opt out so a long word,
   a wide form control or an unbreakable string wraps instead of widening the
   page. */
.response-main,
.response-aside {
    min-width: 0;
}

@media (max-width: 900px) {
    .response-canvas {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ─── PROOF STACK ─── */

.proof-toggle-wrap {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.proof-toggle {
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    color: rgba(255, 255, 255, 0.28);
    background: transparent;
    border: none;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: color var(--transition);
}

.proof-toggle:hover {
    color: rgba(255, 255, 255, 0.55);
}

.proof-stack {
    margin-top: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Courier New', monospace;
}

.proof-stack h4 {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
    margin-bottom: 8px;
    margin-top: 16px;
    font-family: inherit;
}

.proof-stack h4:first-child {
    margin-top: 0;
}

.proof-stack p,
.proof-stack li {
    margin-bottom: 4px;
    line-height: 1.5;
}

.proof-stack ul {
    list-style: none;
    padding-left: 12px;
}

.proof-stack li::before {
    content: '→ ';
    color: var(--teal);
}

/* ─── FOOTER ─── */

.site-footer {
    /* One-row bookend: trust, copyright and social links share one baseline. */
    padding: 8px 32px;
    /* Clean bookend to the header: same dark material (#131320→#090910 family)
       and a single thin white hairline on top — the header's treatment
       mirrored, opaque so the page gradient can't seep. No drop shadow. */
    background: linear-gradient(180deg, #10101a 0%, #07070d 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    /* Pushed to the bottom of the body flex column when content is short. */
    margin-top: auto;
}

/* ─── FOOTER · ISO 27001 ─── */

.footer-trust {
    display: flex;
    align-items: center;
    flex: none;
    gap: 8px;
}

.footer-trust-mark {
    flex: none;
    width: 19px;
    height: 19px;
}

.footer-trust-text {
    font-size: 10.75px;
    line-height: 1.2;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.58);
}

.footer-trust-text strong {
    font-weight: 750;
    color: rgba(255, 255, 255, 0.9);
}

.footer-inner {
    /* Aligned to the wider shell column so the footer spans the same width as
       the header — its edges line up with the logo, past the hero text. */
    max-width: var(--shell-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 24px;
    align-items: center;
    font-size: 11.5px;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.46);
}

.footer-info {
    display: flex;
    gap: 24px;
    align-items: center;
}

.footer-info a {
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    transition: color var(--transition);
}

.footer-info a:hover {
    color: #ffffff;
}

/* ─── FOOTER · SOCIAL ─── */

.footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition: color var(--transition), background var(--transition),
        border-color var(--transition), transform var(--transition),
        box-shadow var(--transition);
}

.social-link svg {
    width: 15px;
    height: 15px;
}

.social-link:hover {
    color: #ffffff;
    transform: translateY(-2px);
    border-color: var(--social-accent, rgba(255, 255, 255, 0.4));
    background: var(--social-accent, rgba(255, 255, 255, 0.14));
    box-shadow: 0 6px 18px var(--social-glow, rgba(0, 0, 0, 0.4));
}

.social-linkedin  { --social-accent: #0a66c2; --social-glow: rgba(10, 102, 194, 0.45); }
.social-youtube   { --social-accent: #ff0000; --social-glow: rgba(255, 0, 0, 0.4); }
/* Instagram uses its signature gradient on hover. */
.social-instagram:hover {
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
    border-color: #d62976;
    box-shadow: 0 6px 18px rgba(214, 41, 118, 0.45);
}

/* ─── RESPONSIVE ─── */

@media (max-width: 768px) {
    .header-inner {
        padding: 12px 20px;
    }

    .footer-inner {
        /* The compact trust line stays intact; the three footer elements stack. */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .footer-trust {
        max-width: 100%;
        justify-content: center;
    }

    .footer-trust-text {
        max-width: 46ch;
        white-space: normal;
    }

    .site-footer {
        padding: 12px 20px;
    }

    .brand-name {
        font-size: 18px;
    }

    .brand-logo {
        height: 36px;
    }

    .hero {
        padding: 16px 0 30px;
        min-height: auto;
    }

    .hero-inner {
        gap: 26px;
        padding: 0 20px;
    }

    .hero-copy {
        max-width: none;
    }

    .hero.compressed {
        padding: 20px;
    }

    .hero-headline {
        font-size: clamp(34px, 10vw, 52px);
        line-height: 1.08;
    }

    .hero-sub {
        font-size: 14px;
        line-height: 1.55;
        white-space: normal;   /* wrap on phones — the desktop one-liner won't fit */
    }

    /* Keep field + button on one row; tighten both. */
    .hero-ask .input-wrap {
        gap: 10px;
    }

    .hero-ask .input-wrap input {
        padding: 16px 14px;
        font-size: 15px;
    }

    .hero-ask .input-wrap button {
        min-width: 96px;
        padding: 0 18px;
        font-size: 14px;
    }

    .response-area {
        padding: 32px 20px 40px;
    }

    .pills {
        margin-bottom: 14px;
    }

    /* Phones: the button goes back into flow, top-left above the heading — the
       top-right absolute corner is too cramped next to a full-width wrapped
       heading. */
    .response-back {
        position: static;
        width: fit-content;
        margin: 0 0 14px 0;
    }

    .turn-question {
        margin-bottom: 22px;
        padding-right: 0;
    }

    .tq-text {
        font-size: 19px;
    }

    .construct-cards-grid {
        grid-template-columns: 1fr 1fr;
    }

    .people-grid {
        grid-template-columns: 1fr;
    }

    .thinking-nodes {
        gap: 0;
    }

    .tnode-line {
        min-width: 30px;
    }

    .response-canvas {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    /* ── Ask: field over a full-width button ──
       Side-by-side, the Ask button ate most of the narrow row. Stack it under
       the field as a full-width tap target. */
    .hero-ask .input-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-ask .input-wrap input {
        padding: 16px 18px;
        font-size: 16px;
    }

    .hero-ask .input-wrap button {
        width: 100%;
        min-width: 0;
        padding: 15px 20px;
        font-size: 16px;
    }

    /* ── Thinking: horizontal timeline → vertical ──
       Three nowrap labels in a row overflowed the viewport (sideways scroll
       while loading). Stack them into a vertical timeline: dot + label per row,
       a short connector between, so nothing spills past the edge. */
    .thinking {
        padding: 28px 0 22px;
    }

    .thinking-nodes {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .tnode {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 13px;
        transform: translateX(-8px);
    }

    .tnode.visible {
        transform: translateX(0);
    }

    .tnode-dot {
        flex: 0 0 auto;
    }

    .tnode-label {
        white-space: normal;
        text-align: left;
        font-size: 13px;
    }

    .tnode-line {
        width: 1px;
        height: 16px;
        min-width: 0;
        max-width: none;
        /* Sit under the 14px dot's centre (7px) less the 1px line width. */
        margin: 3px 0 3px 6px;
        flex: 0 0 auto;
    }
}

@media (max-width: 480px) {
    .construct-cards-grid {
        grid-template-columns: 1fr;
    }

    .chips {
        gap: 8px;
    }

    .chip {
        font-size: 12px;
        padding: 8px 14px;
    }

    .pills {
        gap: 8px;
    }

    .pill {
        font-size: 12px;
        padding: 9px 13px;
    }

    .explore {
        gap: 6px 10px;
    }
}