/* Marketing surface — the "B4 — karta as agent" landing language
   (landing-explorations/page-B4-chat.html): a flat paper-white plane,
   hairline borders, one citron accent, near-black ink fills, and dark
   terminal islands. NO page-wide gradient washes — the only gradients
   are small functional ones from the comp (composer fade, scene plinth,
   CTA glow corner).

   Every variable below aliases a token from tokens.css (the single
   source of truth). One-off hexes from the comp (cap-category tints,
   traffic lights, scene staging colors, terminal accent inks) stay
   literal, as in the comp. */
:root {
    --ink: rgb(var(--karta-ink-100)); /* near-black text   */
    --ink-2: rgb(var(--karta-ink-200)); /* secondary text    */
    --ink-3: rgb(var(--karta-ink-400)); /* tertiary / meta   */
    --line: rgb(var(--karta-line)); /* hairlines         */
    --line-2: rgb(var(--karta-line-soft));
    --paper: rgb(var(--karta-surface)); /* main column       */
    --paper-2: rgb(var(--karta-ink-950)); /* wells             */
    --paper-3: rgb(var(--karta-ink-900));
    --stage: rgb(var(--karta-stage)); /* staging surface for floating panels */
    --citron: rgb(var(--karta-acid)); /* the one accent    */
    --citron-soft: rgb(var(--karta-acid-soft));
    --citron-edge: rgb(var(--karta-acid-edge));
    --citron-deep: rgb(
        var(--karta-acid-deep)
    ); /* accent on light bg, for text */
    --citron-ink: rgb(var(--karta-acid-ink)); /* readable text on citron      */
    --citron-wash: rgb(var(--karta-acid-wash));
    --coal: rgb(var(--karta-coal));
    --term-bg: rgb(var(--karta-term-bg)); /* terminal / dark product surfaces */
    --term-bg-2: rgb(var(--karta-term-bg-2));
    --term-line: rgb(var(--karta-term-line));
    --term-ink: rgb(var(--karta-term-ink));
    --term-dim: rgb(var(--karta-term-dim));
    --ok: rgb(var(--karta-ok));
    --ok-soft: rgb(var(--karta-ok-soft));
    --radius: 18px;
    --radius-sm: 12px;
    --col-max: 840px;
    --bar-h: 96px;
    --sans: var(--karta-font-sans);
    --display: var(--karta-font-display);
    --mono: var(--karta-font-mono);
    --ease: var(--karta-ease);
    --shadow-card: var(--karta-shadow-card);
    --shadow-bar: var(--karta-shadow-bar);
    --shadow-float: var(--karta-shadow-lift);
    --shadow-term: var(--karta-shadow-pop);
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.006em;
}
a {
    color: inherit;
}
:focus-visible {
    outline: 2.5px solid var(--citron-deep);
    outline-offset: 2px;
    border-radius: 6px;
}
::selection {
    background: var(--citron);
    color: var(--citron-ink);
}

/* ============ APP / CHAT COLUMN ============ */
.app {
    position: relative;
    min-height: calc(100dvh - 56px);
}
.thread-col {
    max-width: var(--col-max);
    margin: 0 auto;
    padding: 30px 24px calc(var(--bar-h) + 48px);
}

/* home logo (replaces top nav) */
.home-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--ink);
    margin: 18px 0 40px;
}
.home-logo .hl-mark {
    display: grid;
    place-items: center;
    background: var(--citron);
    border-radius: 16px;
    padding: 2px;
}
.home-logo .hl-word {
    font-family: var(--display);
    font-weight: 700;
    font-size: 54px;
    letter-spacing: -0.035em;
}
/* auth corner — deliberately minimal: quiet text, no buttons */
.auth-corner {
    position: absolute;
    top: 18px;
    right: 24px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 20px;
}
.auth-corner a {
    font-size: 13.5px;
    text-decoration: none;
    transition: color 0.15s;
}
.auth-login {
    color: var(--ink-3);
    font-weight: 500;
}
.auth-login:hover {
    color: var(--ink);
}
.auth-signup {
    color: var(--ink-2);
    font-weight: 600;
}
.auth-signup:hover {
    color: var(--ink);
}
/* signed-in affordance: the one primary action, so it reads a touch louder */
.auth-dashboard {
    color: var(--ink);
    font-weight: 600;
}
.auth-dashboard:hover {
    color: var(--citron-deep);
}
/* closed-beta status label: a quiet "we're gated" signal next to the CTAs
   (not a button) - a citron dot + muted mono text. */
.auth-beta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink-3);
}
.auth-beta .ab-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--citron);
    box-shadow: 0 0 0 3px rgb(var(--karta-acid) / 0.22);
}
@media (max-width: 560px) {
    .auth-corner {
        top: 14px;
        right: 16px;
        gap: 16px;
    }
    /* the top-right gets tight on phones; the in-page "Invite-only" framing
       still carries the beta status there. */
    .auth-beta {
        display: none;
    }
}

/* ---- Chat messages ---- */
.turn {
    margin-bottom: 30px;
    animation: rise 0.55s var(--ease) both;
}
.turn.hidden {
    display: none;
}
/* on load, only the hero shows (streams in); the rest is hidden until ready.
   The #waitlist turn follows this reveal like any other; deep links to it (the
   signup gate's bounce target) are handled in JS - reveal at once + scroll. */
#thread:not(.ready) .turn:not(#t-hero) {
    display: none;
}
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .turn {
        animation: none;
    }
}

/* user bubble — right aligned, solid dark ink fill */
.user {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    margin-bottom: 12px;
}
.user .bubble {
    background: var(--ink);
    color: #fff;
    padding: 10px 16px;
    border-radius: 18px 18px 6px 18px;
    font-size: 14.5px;
    font-weight: 500;
    max-width: 75%;
    line-height: 1.45;
    box-shadow: 0 2px 10px -4px rgba(20, 24, 33, 0.4);
    letter-spacing: -0.004em;
}

/* assistant — left, avatar + body */
.assistant {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.avatar {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--ink);
    color: var(--citron);
    display: grid;
    place-items: center;
    margin-top: 2px;
    box-shadow: 0 2px 8px -2px rgba(20, 24, 33, 0.35);
}
.a-body {
    min-width: 0;
    flex: 1;
    padding-top: 1px;
}
.a-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.a-name .tag {
    font-weight: 500;
    color: var(--ink-3);
    font-size: 11px;
    border: 1px solid var(--line);
    padding: 1px 7px;
    border-radius: 20px;
}
.a-body p {
    margin: 0 0 12px;
}
.a-body p:last-child {
    margin-bottom: 0;
}
.a-body strong {
    font-weight: 700;
}

/* typing dots (span children on the landing, i children on the home chat) */
.typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    height: 22px;
}
.typing span,
.typing i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-3);
    animation: blink 1.2s infinite both;
}
.typing span:nth-child(2),
.typing i:nth-child(2) {
    animation-delay: 0.18s;
}
.typing span:nth-child(3),
.typing i:nth-child(3) {
    animation-delay: 0.36s;
}
@keyframes blink {
    0%,
    80%,
    100% {
        opacity: 0.25;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* ============ HERO message ============ */
.hero-eyebrow {
    font-family: var(--mono);
    font-size: 12.5px;
    color: rgb(var(--karta-ink-600));
    font-weight: 600;
    margin-bottom: 14px;
    letter-spacing: 0.01em;
}
.hero-eyebrow::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 13px;
    background: var(--citron);
    margin-right: 9px;
    vertical-align: -2px;
}
.hero-h {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.98;
    font-size: clamp(40px, 7vw, 60px);
    color: var(--ink);
    margin: 0 0 18px;
}
.hero-h em,
.sec-h em {
    font-style: normal;
    position: relative;
    white-space: nowrap;
}
.hero-h em::after,
.sec-h em::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: 0.06em;
    height: 0.32em;
    background: var(--citron);
    z-index: -1;
    border-radius: 3px;
}
.hero-sub {
    font-size: 18px;
    color: var(--ink-2);
    max-width: 54ch;
    margin: 0 0 24px;
    line-height: 1.5;
}
.hero-sub b {
    color: var(--ink);
    font-weight: 600;
}
/* exemplar line under the hero headline; alignment inherits from context -
   centered in the hero, left in the chat thread */
.hero-exem {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgb(var(--karta-ink-600));
    margin: 12px 0 18px;
}
.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 13px;
    padding: 13px 20px;
    font-weight: 600;
    font-size: 15px;
    font-family: inherit;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform 0.12s,
        box-shadow 0.15s,
        background 0.15s;
}
.btn-primary,
.btn-acid {
    background: var(--citron);
    color: var(--citron-ink);
    box-shadow:
        0 1px 0 var(--citron-edge) inset,
        0 6px 20px -8px rgb(var(--karta-acid-deep) / 0.7);
}
.btn-primary:hover,
.btn-acid:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 var(--citron-edge) inset,
        0 12px 28px -10px rgb(var(--karta-acid-deep) / 0.8);
}
.btn-ghost {
    background: #fff;
    color: var(--ink);
    border-color: var(--line);
    box-shadow: var(--shadow-card);
}
.btn-ghost:hover {
    transform: translateY(-2px);
    border-color: #d4d6d9;
}

/* ============ HERO STAGED SCENE ============ */
.scene-wrap {
    margin: 26px 0 4px;
}
.scene {
    position: relative;
    padding: 24px 48px 48px 48px;
    margin-bottom: 24px;
    background: linear-gradient(180deg, #f8f8f8, #fefefe);
    border: 1px solid #eaeaea;
    border-radius: 16px;
}
/* soft staging plinth behind the floating panels */
.scene::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: -4%;
    right: -4%;
    top: 8%;
    bottom: -4%;
    background: radial-gradient(
        60% 56% at 52% 46%,
        var(--stage) 0%,
        transparent 72%
    );
    border-radius: 24px;
}
.scene-deck {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* connective flow line drawn behind the panels */
.scene-flow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}
.scene-flow path {
    fill: none;
    stroke: #d3d7dc;
    stroke-width: 2;
    stroke-dasharray: 5 7;
}
.scene-flow .lit {
    stroke: var(--citron-deep);
    stroke-width: 2.4;
    stroke-dasharray: 9 220;
    filter: drop-shadow(0 0 4px rgba(169, 214, 31, 0.5));
    animation: flowdash 3.4s linear infinite;
}
/* second segment lights up offset from the first (no inline style under CSP) */
.scene-flow .lit-2 {
    animation-delay: 1.4s;
}
@keyframes flowdash {
    to {
        stroke-dashoffset: -229;
    }
}

.spanel {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-float);
}
.spanel--harness {
    align-self: flex-start;
    width: 78%;
    max-width: 450px;
}
.spanel--karta {
    align-self: flex-end;
    width: 88%;
    max-width: 500px;
}
.spanel--live {
    align-self: flex-start;
    width: 84%;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.spanel--live .spanel-body {
    padding: 0;
}
@media (max-width: 560px) {
    .spanel--harness,
    .spanel--karta,
    .spanel--live {
        width: 100%;
    }
    .scene-deck {
        gap: 18px;
    }
    /* tighten the staging frame so the panels get room on narrow screens */
    .scene {
        padding: 24px 14px;
    }
    /* the plinth bleeds 4% past the scene; with small page gutters that
     overshoots the viewport and triggers horizontal scroll — keep it
     inside the scene on phones */
    .scene::before {
        left: 0;
        right: 0;
    }
    /* the endpoint URL is the one unbreakable string; drop it onto its own
     row inside the panel header so it can't leak the box (and widen the
     page, which would shove the fixed composer + footer off-screen) */
    .live-head {
        flex-wrap: wrap;
    }
    .live-head .ep {
        order: 3;
        flex-basis: 100%;
        margin-left: 0;
        overflow-wrap: anywhere;
    }
}

.spanel-tab {
    position: absolute;
    top: -17px;
    left: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 7px;
    background: var(--ink);
    color: var(--citron);
    box-shadow: 0 1px 2px rgba(11, 13, 15, 0.06);
}
.spanel-tab.alt {
    background: var(--citron);
    color: var(--citron-ink);
}
.spanel-tab .stp {
    opacity: 0.55;
}

.spanel-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
}
.tl {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--line);
}
.spanel-bar .tt {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    margin-left: auto;
}
.spanel-body {
    padding: 16px;
}

/* harness panel — file tree */
.tree {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.85;
}
.tree .row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tree .row .ic {
    color: var(--ink-3);
    flex: none;
}
.tree .row.dir {
    color: var(--ink);
    font-weight: 600;
}
.tree .row .ic.cit {
    color: var(--citron-deep);
}
.tree .indent {
    padding-left: 18px;
}
.tree .indent2 {
    padding-left: 34px;
}
.push-cmd {
    margin-top: 12px;
    padding: 8px 11px;
    border-radius: 8px;
    background: var(--ink);
    color: var(--citron);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.push-cmd .gt {
    color: var(--term-dim);
}

/* karta panel — build → release pipeline */
.pipe {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.pipe-step {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 11px;
    border-radius: 9px;
    background: var(--paper-2);
    border: 1px solid var(--line);
}
.pipe-step .pi {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--ink);
    color: var(--citron);
}
.pipe-step .pi.alt {
    background: var(--citron);
    color: var(--citron-ink);
}
.pipe-step .plbl {
    font-size: 12.5px;
    color: var(--ink);
    font-weight: 500;
}
.pipe-step .plbl .mn {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    display: block;
    margin-top: 1px;
}
.pipe-step .pok {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ok);
    font-weight: 600;
}
.pipe-step .pver {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--citron-deep);
    font-weight: 700;
    background: var(--citron-wash);
    border-radius: 5px;
    padding: 2px 7px;
}

/* live panel — Agent API + chat widget */
.live-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    background: var(--ink);
    color: #fff;
    border-radius: 11px 11px 0 0;
    margin: -16px -16px 16px;
}
.live-head .av {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--citron);
    color: var(--citron-ink);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 11px;
    font-family: var(--mono);
}
.live-head .nm {
    font-size: 12px;
    font-weight: 600;
}
.live-head .ep {
    font-family: var(--mono);
    font-size: 10px;
    color: #9aa0a8;
    margin-left: 2px;
}
.live-head .st {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: #aab0b8;
    font-family: var(--mono);
}
.live-head .st .live {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
    animation: livepulse 2s infinite;
}
@keyframes livepulse {
    0% {
        box-shadow: 0 0 0 0 rgba(43, 182, 115, 0.5);
    }
    70% {
        box-shadow: 0 0 0 5px rgba(43, 182, 115, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(43, 182, 115, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .live-head .st .live,
    .scene-flow .lit {
        animation: none;
    }
}

@keyframes fadeInOutLoop {
    0%,
    100% {
        opacity: 0.3;
    } /* Dimmed at start and end */
    50% {
        opacity: 1;
    } /* Fully visible in the middle */
}
.chatlog {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chatlog .b {
    font-size: 12px;
    padding: 8px 11px;
    border-radius: 11px;
    max-width: 88%;
    line-height: 1.5;
}
.chatlog .b.u {
    align-self: flex-end;
    background: var(--ink);
    color: #fff;
    border-bottom-right-radius: 3px;
}
.chatlog .b.bot {
    align-self: flex-start;
    background: var(--paper-2);
    border: 1px solid var(--line);
    color: var(--ink);
    border-bottom-left-radius: 3px;
}
.karta-stack {
    display: grid;
    gap: 9px;
}
.karta-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 10px;
    align-items: flex-start;
    border: 1px solid rgba(12, 16, 28, 0.16);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96),
            rgba(247, 248, 242, 0.94)
        ),
        var(--paper);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 10px 28px rgba(12, 16, 28, 0.08);
}
.computer-section {
    min-width: 0;
    flex: 1 1 0;
    padding-left: 10px;
    border-left: 1px solid var(--line-soft);
}
.workspace-disk.computer-section {
    flex: 0 1 26%;
    padding-left: 0;
    border-left: 0;
}
.session-stack.computer-section {
    flex: 0 1 23%;
}
.mini-chat.computer-section {
    flex: 1 1 42%;
    align-self: flex-start;
}
.computer-ref {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line-soft);
}
.computer-ref svg {
    width: 17px;
    height: 17px;
    color: var(--citron-ink);
    flex: none;
}
.computer-title {
    min-width: 0;
    color: var(--ink);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.computer-title b {
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.runtime-state {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 7px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.runtime-state::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}
.runtime-state.live {
    color: var(--citron-edge);
    text-shadow: 0 0 2px rgba(11, 13, 15, 0.45);
}
.runtime-state.sleeping {
    color: rgba(88, 94, 105, 0.78);
}
.runtime-state.waking {
    color: #9a6700;
    transform-origin: center;
    animation: wakepulse 0.9s ease-in-out infinite;
}
.runtime-state.waking::before {
    animation: wake-dot-pulse 0.9s ease-in-out infinite;
}
.security-icons {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.security-icon {
    display: inline-grid;
    place-items: center;
    color: var(--citron);
    width: 18px;
    height: 18px;
}
.security-icon svg {
    width: 18px;
    height: 18px;
    flex: none;
}
.workspace-disk {
    min-width: 0;
}
.disk-head {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 750;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.disk-head svg {
    width: 14px;
    height: 14px;
    color: var(--citron-ink);
    flex: none;
}
.disk-head span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.disk-file {
    min-width: 0;
    padding: 3px 0;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 8.5px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.disk-file + .disk-file {
    border-top: 1px solid rgba(12, 16, 28, 0.08);
}
.disk-file.folder {
    font-weight: 750;
}
.disk-file.folder::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 7px;
    margin-right: 5px;
    border: 1px solid rgba(12, 16, 28, 0.22);
    border-top-width: 3px;
    border-radius: 2px;
    background: rgba(169, 214, 31, 0.16);
    vertical-align: -1px;
}
.fade-bottom {
    position: relative;
    overflow: hidden;
}
.fade-bottom::after,
.transcript-fade::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(247, 248, 242, 0),
        rgba(247, 248, 242, 0.98)
    );
}
.section-label {
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 750;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.session-stack {
    position: relative;
}
.session-pill {
    position: relative;
    min-width: 0;
    padding: 4px 0;
    color: var(--ink-3);
    font-size: 8.5px;
    font-weight: 650;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.session-pill + .session-pill {
    border-top: 1px solid rgba(12, 16, 28, 0.08);
}
.session-pill.selected {
    color: var(--ink);
    font-weight: 800;
    background: var(--citron);
    border-radius: 0;
    margin-right: -10px;
    padding: 4px 10px 4px 6px;
}
.session-pill.selected::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 10px;
    background: var(--citron);
}
.mini-chat {
    min-width: 0;
}
.selected-log {
    border: 1px solid rgba(169, 214, 31, 0.48);
    background: rgba(255, 255, 255, 0.58);
    border-radius: 11px;
    padding: 7px;
    position: relative;
}
.mini-head {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--ink-3);
    font-size: 10.5px;
    font-weight: 700;
    margin-bottom: 7px;
}
.mini-head .av {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: var(--citron);
    color: var(--citron-ink);
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 10px;
    flex: none;
}
.mini-head > span:nth-child(2) {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-status {
    margin-left: auto;
    flex: none;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.mini-status.live {
    color: var(--citron-ink);
    text-transform: uppercase;
    text-shadow: 0 0 2px rgba(11, 13, 15, 0.45);
}
.transcript-body {
    position: relative;
}
.transcript-fade {
    max-height: 82px;
    overflow: hidden;
}
.mini-msg {
    width: fit-content;
    max-width: 96%;
    border-radius: 9px;
    padding: 4px 7px;
    font-size: 9.5px;
    line-height: 1.22;
}
.mini-msg + .mini-msg,
.mini-msg + .mini-event,
.mini-event + .mini-msg,
.mini-msg + .mini-artifact {
    margin-top: 4px;
}
.mini-msg.user,
.mini-msg.bot,
.mini-event,
.mini-artifact {
    margin-right: 12px;
    margin-left: 12px;
}
.mini-msg.user {
    margin-left: auto;
    background: var(--ink);
    color: #fff;
    border-bottom-right-radius: 3px;
}
.mini-msg.bot {
    background: var(--paper-2);
    color: var(--ink);
    border: 1px solid var(--line-soft);
    border-bottom-left-radius: 3px;
}
.mini-event,
.mini-artifact {
    min-width: 0;
    border-radius: 8px;
    padding: 4px 7px;
    font-size: 8.8px;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-event.upload {
    border: 1px dashed rgba(12, 16, 28, 0.22);
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink-3);
}
.mini-artifact {
    width: fit-content;
    max-width: 96%;
    border: 1px solid rgba(169, 214, 31, 0.48);
    background: rgba(169, 214, 31, 0.14);
    color: var(--citron-ink);
    font-family: var(--mono);
    font-weight: 750;
}
.mini-artifact::before {
    content: "link ";
    color: var(--ink-3);
    font-family: var(--sans);
    font-weight: 700;
}
.mini-chat-input {
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--ink);
    color: rgba(255, 255, 255, 0.58);
    border-radius: 10px;
    padding: 4px 5px 4px 8px;
    font-size: 8.5px;
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 5px 14px rgba(12, 16, 28, 0.12);
}
.mini-chat-input span {
    min-width: 0;
    flex: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-chat-input.composing .mini-input-text {
    color: rgba(255, 255, 255, 0.84);
    flex: none;
}
.mini-chat-input .mini-input-cursor {
    flex: none;
    min-width: 0;
    display: inline-block;
    width: 0.5em;
    height: 1em;
    margin-left: -2px;
    background: var(--citron);
    animation: caret 1s step-end infinite;
}
.mini-send-slot {
    display: flex;
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
}
@media (prefers-reduced-motion: reduce) {
    .mini-chat-input .mini-input-cursor,
    .runtime-state.waking,
    .runtime-state.waking::before {
        animation: none;
    }
}
.mini-chat-input b {
    border: 0;
    background: var(--citron);
    border-radius: 7px;
    color: var(--citron-ink);
    width: 11px;
    height: 11px;
    display: grid;
    place-items: center;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    opacity: 0.4;
}
@keyframes wakepulse {
    0%,
    100% {
        opacity: 0.7;
        transform: scale(1);
        text-shadow: 0 0 1px rgba(11, 13, 15, 0.45);
    }
    50% {
        opacity: 1;
        transform: scale(1.06);
        text-shadow:
            0 0 1px rgba(11, 13, 15, 0.7),
            0 0 10px rgb(var(--karta-acid) / 0.72),
            0 0 18px rgb(var(--karta-acid) / 0.38);
    }
}
@keyframes wake-dot-pulse {
    0%,
    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgb(var(--karta-acid) / 0.4);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 0 5px rgb(var(--karta-acid) / 0);
    }
}
.mini-chat-input b svg {
    width: 7px;
    height: 7px;
}
@media (max-width: 560px) {
    .karta-mini {
        gap: 6px;
        padding: 7px;
    }
    .workspace-disk.computer-section {
        flex-basis: 25%;
    }
    .session-stack.computer-section {
        flex-basis: 23%;
    }
    .mini-chat.computer-section {
        flex-basis: 42%;
    }
    .computer-section {
        padding-left: 6px;
    }
    .computer-ref {
        gap: 5px;
        padding-bottom: 6px;
    }
    .computer-ref svg {
        width: 14px;
        height: 14px;
    }
    .computer-title {
        font-size: 8.2px;
    }
    .computer-title b {
        font-size: 6.5px;
    }
    .disk-head {
        font-size: 7px;
        gap: 4px;
        margin-bottom: 5px;
    }
    .disk-head svg {
        width: 12px;
        height: 12px;
    }
    .disk-file {
        padding: 3px 4px;
        font-size: 7px;
    }
    .mini-msg,
    .mini-event,
    .mini-artifact {
        font-size: 7.5px;
        padding: 3px 5px;
    }
    .section-label,
    .session-pill,
    .mini-status,
    .mini-chat-input {
        font-size: 7px;
    }
    .selected-log {
        padding: 5px;
    }
    .transcript-fade {
        max-height: 64px;
    }
}
.scene-cap {
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 24px;
    line-height: 1.5;
    max-width: 42em;
}

/* entrance for staged panels (default-visible; animate as enhancement) */
.scene-deck.enter .spanel {
    opacity: 0;
    transform: translateY(34px);
}
.scene-deck.enter .spanel.in.spanel--harness {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.7s var(--ease),
        transform 0.8s var(--ease);
}
.scene-deck.enter .spanel.in.spanel--karta {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.7s var(--ease) 0.12s,
        transform 0.8s var(--ease) 0.12s;
}
.scene-deck.enter .spanel.in.spanel--live {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.7s var(--ease) 0.24s,
        transform 0.8s var(--ease) 0.24s;
}
@media (max-width: 560px) {
    .scene-deck.enter .spanel.in.spanel--karta,
    .scene-deck.enter .spanel.in.spanel--live {
        transform: translateY(0);
    }
}

/* ============ Generic section styling inside assistant ============ */
.sec-kicker {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 9px;
}
.sec-h {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.028em;
    font-size: clamp(25px, 3.6vw, 31px);
    line-height: 1.06;
    margin: 0 0 12px;
    color: var(--ink);
}

/* Problem: need tiles converging on Karta */
.needs {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    margin: 18px 0 16px;
}
.need-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.need {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12.5px;
    color: var(--ink-2);
    font-weight: 500;
    line-height: 1.25;
    min-height: 74px;
}
.need svg {
    color: var(--ink-3);
}
/* the two capabilities the SaaS era never had - accented citron */
.need--new {
    position: relative;
    background: var(--citron-wash);
    border-color: var(--citron-edge);
    color: var(--citron-ink);
}
.need--new svg {
    color: var(--citron-deep);
}
.need--new::after {
    content: "new";
    position: absolute;
    top: 8px;
    right: 9px;
    font-family: var(--karta-font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--citron-deep);
}
/* one-line gloss under a defined term (e.g. "karta") */
.term-gloss {
    font-family: var(--karta-font-mono);
    font-size: 12.5px;
    color: var(--ink-3);
    margin: -4px 0 12px;
}
.term-gloss b {
    color: var(--citron-deep);
    font-weight: 600;
}
/* deploy turn: the four ways, numbered */
.deploy-ways {
    list-style: none;
    counter-reset: dw;
    margin: 6px 0 16px;
    padding: 0;
    display: grid;
    gap: 10px;
}
.deploy-ways li {
    counter-increment: dw;
    position: relative;
    padding-left: 36px;
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.45;
}
.deploy-ways li::before {
    content: counter(dw);
    position: absolute;
    left: 0;
    top: 1px;
    width: 23px;
    height: 23px;
    border-radius: 7px;
    background: var(--citron);
    color: var(--citron-ink);
    font-family: var(--karta-font-mono);
    font-size: 12px;
    font-weight: 600;
    display: grid;
    place-items: center;
}
.deploy-ways li b {
    color: var(--ink);
    font-weight: 600;
}
.converge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-left: 4px;
}
.arrows {
    display: flex;
    align-items: center;
    color: var(--citron-deep);
}
.karta-node {
    background: var(--ink);
    color: #fff;
    border-radius: 16px;
    padding: 16px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 118px;
    box-shadow: 0 12px 30px -12px rgba(20, 24, 33, 0.5);
}
.karta-node .k {
    color: var(--citron);
}
.karta-node b {
    font-family: var(--display);
    font-size: 17px;
    letter-spacing: -0.02em;
}
.karta-node span {
    font-size: 11px;
    color: #b9bdc7;
}
.payoff {
    font-size: 15.5px;
    color: var(--ink-2);
    margin-top: 4px;
}
.payoff b {
    color: var(--ink);
    font-weight: 600;
}

/* Terminal */
.lede {
    font-size: 16px;
    color: var(--ink-2);
    margin: 0 0 16px;
}
.lede code {
    font-family: var(--mono);
    font-size: 0.86em;
    background: var(--paper-3);
    padding: 1px 6px;
    border-radius: 6px;
    color: var(--ink);
}
.terminal {
    background: var(--term-bg);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid #2a2e36;
}
.term-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    border-bottom: 1px solid #262a31;
    background: var(--term-bg-2);
}
.term-bar i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: block;
}
.term-bar i:nth-child(1) {
    background: #ff5f57;
}
.term-bar i:nth-child(2) {
    background: #febc2e;
}
.term-bar i:nth-child(3) {
    background: #28c840;
}
.term-bar .title {
    margin-left: 8px;
    font-family: var(--mono);
    font-size: 12px;
    color: #8a909b;
}
.term-body {
    padding: 16px 18px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.85;
    color: var(--term-ink);
    overflow-x: auto;
}
.term-body .l {
    white-space: pre;
    display: block;
}
.term-body .pr {
    color: var(--citron);
}
.term-body .mut {
    color: #7e8593;
}
.term-body .ok {
    color: #5ad17e;
}
.term-body .lbl {
    color: #c0c6d1;
}
.term-body .url {
    color: var(--citron);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cursor-blk {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: var(--citron);
    vertical-align: -2px;
    animation: caret 0.9s step-end infinite;
}
@keyframes caret {
    50% {
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cursor-blk {
        animation: none;
    }
}

/* Use cases */
.uc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
}
.uc-col {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    background: var(--paper);
}
.uc-col h4 {
    margin: 0 0 12px;
    font-size: 12px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.uc-col h4::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--citron);
}
.uc-col.scale h4::before {
    background: var(--citron-deep);
}
.uc-col.ent h4::before {
    background: var(--ink);
}
.uc-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.uc-col li {
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.3;
}
.uc-col li em {
    display: block;
    font-style: normal;
    font-weight: 400;
    color: var(--ink-3);
    font-size: 12.5px;
    margin-top: 1px;
}

/* Enterprise capabilities — content-fit masonry mosaic */
.cap-bento {
    column-count: 3;
    column-gap: 10px;
    margin-top: 14px;
}
.cap {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 15px;
    background: var(--paper);
    color: var(--citron-deep); /* glyph stroke color */
    display: flex;
    flex-direction: column;
    width: 100%;
    break-inside: avoid;
    margin-bottom: 10px;
    transition:
        border-color 0.15s,
        transform 0.15s,
        box-shadow 0.15s;
}
.cap:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}
.cap .cap-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 5px;
}
.cap .cap-head svg {
    width: 20px;
    height: 20px;
    flex: none;
    stroke: var(--citron);
}
.cap b {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
}
.cap span {
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.42;
}
/* category tints — muted, low-saturation, monochromatic per category */
.cap--iso {
    background: #eff5da;
    border-color: #d3e0a8;
}
.cap--iso .cap-head svg {
    stroke: #5f7320;
}
.cap--iso:hover {
    border-color: #b6c97f;
}
.cap--spend {
    background: #f7f0e3;
    border-color: #e4d6ba;
}
.cap--spend .cap-head svg {
    stroke: #8a6d33;
}
.cap--spend:hover {
    border-color: #d3bf94;
}
.cap--id {
    background: #ecf1f8;
    border-color: #cfdbef;
}
.cap--id .cap-head svg {
    stroke: #41618f;
}
.cap--id:hover {
    border-color: #afc3e2;
}
.cap--rel {
    background: #f1edf8;
    border-color: #ddd3ee;
}
.cap--rel .cap-head svg {
    stroke: #6a539a;
}
.cap--rel:hover {
    border-color: #c7b8e3;
}
.cap--data {
    background: #e9f4ef;
    border-color: #c7e2d6;
}
.cap--data .cap-head svg {
    stroke: #357a5e;
}
.cap--data:hover {
    border-color: #a8d2c0;
}
.cap--iso b,
.cap--spend b,
.cap--id b,
.cap--rel b,
.cap--data b {
    color: var(--ink);
}
.cap--iso span,
.cap--spend span,
.cap--id span,
.cap--rel span,
.cap--data span {
    color: var(--ink-2);
}
.ent-note,
.a-body p.ent-note {
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--ink-2);
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--citron);
    border-radius: 0 12px 12px 0;
    padding: 12px 15px;
}
/* Final CTA card */
.cta-card {
    background: var(--ink);
    color: #fff;
    border-radius: 20px;
    padding: 30px 28px;
    box-shadow: 0 24px 60px -28px rgba(20, 24, 33, 0.6);
    position: relative;
    overflow: hidden;
}
.cta-card::before {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(
        circle,
        rgb(var(--karta-acid) / 0.22),
        transparent 70%
    );
    pointer-events: none;
}
.cta-card h3 {
    font-family: var(--display);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 0 10px;
    line-height: 1;
}
.cta-card h3 em {
    font-style: normal;
    color: var(--citron);
}
.cta-card p {
    color: rgb(var(--karta-ink-600));
    font-size: 16px;
    margin: 0 0 20px;
    max-width: 46ch;
}
.cta-card .btn-ghost {
    background: rgb(var(--karta-coal-800));
    border-color: #33373f;
    color: #fff;
}
.cta-card .btn-ghost:hover {
    background: #2b2f37;
    border-color: #444;
}

/* typing dots inside dynamic replies — reused */
.a-body .reply {
    min-height: 1px;
}

/* ============ Fixed composer ============ */
.composer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 0 24px 0;
}
/* gradient fade above the textbox */
.composer .fade {
    height: 38px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--paper));
    pointer-events: none;
}
.composer .tray {
    background: var(--paper);
    padding: 0 0 8px;
}
.composer-inner {
    max-width: var(--col-max);
    margin: 0 auto;
}
.chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 9px;
    /* align the chip row's left edge with the textarea's text (input-shell
       border 1.5px + padding-left 16px) */
    padding-left: 17.5px;
    overflow-x: auto;
    scrollbar-width: none;
}
.chips::-webkit-scrollbar {
    display: none;
}
.chips[hidden] {
    display: none;
}
.chip {
    flex: none;
    background: var(--ink);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    padding: 7px 13px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.14s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.chip:hover {
    border-color: var(--citron);
    color: #fff;
    background: #23262e;
    transform: translateY(-1px);
}
.input-shell {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--ink);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 8px 8px 8px 16px;
    box-shadow: var(--shadow-bar);
    transition:
        border-color 0.18s,
        box-shadow 0.18s;
}
.input-shell:focus-within {
    border-color: var(--citron);
    box-shadow:
        0 0 0 4px rgb(var(--karta-acid) / 0.25),
        var(--shadow-bar);
}
.input-shell textarea {
    flex: 1;
    min-width: 0;
    border: 0;
    resize: none;
    background: none;
    font: inherit;
    font-size: 15px;
    color: #fff;
    padding: 9px 0;
    max-height: 120px;
    line-height: 1.4;
}
.input-shell textarea:focus {
    outline: none;
}
.input-shell textarea::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.send {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 0;
    cursor: pointer;
    background: var(--citron);
    color: var(--citron-ink);
    display: grid;
    place-items: center;
    transition:
        transform 0.12s,
        background 0.15s,
        opacity 0.15s;
}
.send:hover {
    transform: translateY(-1px);
}
.send:disabled {
    opacity: 0.4;
    cursor: default;
    transform: none;
}
/* bright green send the moment the textbox is focused, even before typing */
.input-shell:focus-within .send {
    opacity: 1;
    background: var(--citron);
}
/* "Powered by Karta" badge in the idle input - the live agent is the proof. */
.powered-by {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    margin: 0 2px 9px 6px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    transition:
        opacity 0.12s,
        width 0.12s,
        margin 0.12s;
}
.input-shell textarea:not(:placeholder-shown) ~ .powered-by {
    width: 0;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.powered-by b {
    color: rgba(255, 255, 255, 0.68);
    font-weight: 600;
}
.composer .disclaim {
    text-align: center;
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 9px;
}
.composer .disclaim b {
    color: var(--ink-2);
    font-weight: 600;
}

/* ============ Footer strip below composer ============ */
.footer-strip {
    background: var(--paper);
    padding: 2px 24px 10px;
}
.footer-inner {
    max-width: var(--col-max);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: 11.5px;
    color: var(--ink-3);
}
.footer-inner a {
    text-decoration: none;
    color: var(--ink-3);
    transition: color 0.15s;
}
.footer-inner a:hover {
    color: var(--ink);
}
.footer-inner .sep {
    color: var(--line);
}
.footer-inner .copy {
    margin-left: auto;
    color: var(--ink-3);
}
@media (max-width: 720px) {
    .footer-inner .copy {
        margin-left: 0;
        flex-basis: 100%;
    }
}

/* ============ Responsive (landing) ============ */
@media (max-width: 560px) {
    :root {
        --bar-h: 104px;
    }
    /* tighter gutters so the chat column isn't so narrow on phones — the
     assistant content already carries the avatar's ~44px left indent, so
     the page-edge gutter can be small */
    .thread-col {
        padding-left: 8px;
        padding-right: 8px;
    }
    .composer {
        padding-left: 8px;
        padding-right: 8px;
    }
    .footer-strip {
        padding-left: 8px;
        padding-right: 8px;
    }
    .need-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-h {
        font-size: clamp(34px, 11vw, 44px);
    }
    .user .bubble {
        max-width: 86%;
    }
    .assistant {
        gap: 10px;
    }
    .uc-grid {
        grid-template-columns: 1fr;
    }
    .cap-bento {
        column-count: 2;
    }
    .needs {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .converge {
        flex-direction: row;
        justify-content: center;
    }
    .arrows {
        transform: rotate(90deg);
    }
}
@media (max-width: 440px) {
    .cap-bento {
        column-count: 1;
    }
}

/* ════════════════════════════════════════════════════════════════════
   SUPPORTING SURFACES - the shared waitlist form, plus legacy coming-soon
   styles retained pending a purge (RFC 0039 retired the coming-soon home
   and the /enter-karta preview gate). Same B4 language: flat white paper,
   hairlines, citron accents, dark terminal islands.
   ════════════════════════════════════════════════════════════════════ */

.wrap {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 28px;
    width: 100%;
}

/* entrance animations (CSP-safe utility delays) */
.load {
    opacity: 0;
    transform: translateY(14px);
    animation: rise 0.8s var(--ease) forwards;
}
.rv {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.7s var(--ease),
        transform 0.7s var(--ease);
}
.rv.in {
    opacity: 1;
    transform: none;
}
.ad-05 {
    animation-delay: 0.05s;
}
.ad-16 {
    animation-delay: 0.16s;
}
.ad-20 {
    animation-delay: 0.2s;
}
.ad-30 {
    animation-delay: 0.3s;
}
.ad-44 {
    animation-delay: 0.44s;
}

/* brand wordmark — home-logo language: citron mark, display word */
.wordmark {
    display: inline-flex;
    align-items: center;
    font-family: var(--display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-decoration: none;
}
.wordmark .brand-mark {
    width: 30px;
    height: 25px;
    padding: 3px 4px;
    margin-right: 9px;
    color: var(--ink);
    background: var(--citron);
    border-radius: 8px;
    flex: none;
}
.wordmark .cur {
    color: var(--citron-deep);
    margin-left: 1px;
    animation: caret 1.05s step-end infinite;
}
.fs-16 {
    font-size: 16px;
}

/* mono eyebrow */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink-2);
}
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 13px;
    background: var(--citron);
    flex: none;
}
.eyebrow b {
    color: var(--citron-deep);
    font-weight: 600;
}

/* blinking block cursor inside the display headline */
.hero-h .term-cur {
    display: inline-block;
    width: 0.5em;
    height: 0.82em;
    vertical-align: -0.04em;
    margin-left: 0.06em;
    background: var(--citron);
    box-shadow: 0 1px 0 var(--citron-edge) inset;
    animation: caret 1.05s step-end infinite;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

/* ---------- folder card (the harness app) — flat paper panel ---------- */
.folder-card {
    border-radius: 16px;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
}
.fc-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--line);
    background: var(--paper-2);
}
.dots {
    display: flex;
    gap: 6px;
}
.dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: block;
}
.dots i:nth-child(1) {
    background: #ff5f57;
}
.dots i:nth-child(2) {
    background: #febc2e;
}
.dots i:nth-child(3) {
    background: #28c840;
}
.fc-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink-2);
}
.fc-title svg {
    width: 14px;
    height: 14px;
    color: var(--citron-deep);
    flex: none;
}
.fc-body {
    padding: 13px 15px;
}
.ftree {
    margin-top: 0;
}
.tnode {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink-2);
}
.tnode svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--ink-3);
}
.tnode.dir {
    color: var(--ink);
    font-weight: 600;
}
.tnode.dir svg {
    color: var(--citron-deep);
}
.tnest {
    margin-left: 7px;
    padding-left: 14px;
    border-left: 1px solid var(--line);
}

/* ---------- git push arrow between the panels ---------- */
.push-arrow {
    position: relative;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.push-arrow svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.push-arrow .pflow {
    stroke: var(--citron-edge);
    stroke-width: 2.25;
    fill: none;
    stroke-dasharray: 5 6;
    animation: dashmove 1.1s linear infinite;
}
@keyframes dashmove {
    to {
        stroke-dashoffset: -22;
    }
}
.push-arrow .phead {
    stroke: var(--citron-edge);
    stroke-width: 2.25;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.push-lbl {
    position: relative;
    z-index: 1;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--citron);
    background: var(--ink);
    border-radius: 8px;
    padding: 4px 11px;
}

/* ---------- chat widget mock — dark terminal island ---------- */
.chat {
    border-radius: 14px;
    overflow: hidden;
    background: var(--term-bg);
    border: 1px solid #2a2e36;
    box-shadow: var(--shadow-card);
    position: relative;
}
.chat-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--term-line);
    background: var(--term-bg-2);
}
.chat-ava {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--citron);
    color: var(--citron-ink);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: none;
}
.chat-id {
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}
.chat-id .nm {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.chat-id .st {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--term-dim);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}
.chat-id .st .on {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
}
.chat-tag {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--term-dim);
    border: 1px solid var(--term-line);
    border-radius: 6px;
    padding: 3px 8px;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: none;
}
.chat-body {
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 140px;
}
.bub {
    max-width: 84%;
    padding: 10px 13px;
    border-radius: 13px;
    font-size: 13.5px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(8px);
    animation: bubIn 0.4s var(--ease) forwards;
}
@keyframes bubIn {
    to {
        opacity: 1;
        transform: none;
    }
}
.bub.user {
    align-self: flex-end;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--term-line);
    color: var(--term-ink);
    border-bottom-right-radius: 5px;
}
.bub.bot {
    align-self: flex-start;
    background: rgb(var(--karta-acid) / 0.09);
    border: 1px solid rgb(var(--karta-acid) / 0.26);
    color: var(--term-ink);
    border-bottom-left-radius: 5px;
}
.bub .cursor {
    display: inline-block;
    width: 0.5em;
    height: 1em;
    background: var(--citron);
    vertical-align: -0.12em;
    margin-left: 1px;
    animation: caret 1s step-end infinite;
}
/* typing dots inside the dark chat read brighter */
.chat .typing i {
    background: var(--term-dim);
}
.chat-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--term-line);
    background: var(--term-bg);
}
.chat-input .field {
    flex: 1;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--term-dim);
}
.chat-input .send {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--citron);
    color: var(--citron-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.chat-cap {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.5;
}
.chat-cap b {
    color: var(--ink-2);
    font-weight: 600;
}

/* ---------- ship→serve flow (below the fold on /) ---------- */
.flow-cap {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: center;
    margin-bottom: 24px;
}
.flow-cap b {
    color: var(--citron-deep);
    font-weight: 500;
}
.flow {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.fnode {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 12px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    padding: 16px 14px;
    text-align: center;
    position: relative;
    transition: 0.25s var(--ease);
}
.fnode:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}
.fnode .fic {
    width: 26px;
    height: 26px;
    margin: 0 auto 9px;
    color: var(--citron-deep);
    display: block;
}
.fnode .ft {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}
.fnode .fs {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 5px;
    display: block;
    line-height: 1.4;
}
.fconn {
    flex: 0 0 56px;
    align-self: center;
    position: relative;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fconn .track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: var(--line);
    overflow: hidden;
    border-radius: 2px;
}
.fconn .track::after {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent,
        var(--citron-edge),
        transparent
    );
    animation: flow 2.2s linear infinite;
}
@keyframes flow {
    0% {
        left: -45%;
    }
    100% {
        left: 105%;
    }
}
.fconn .lbl {
    position: relative;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--citron-deep);
    background: var(--paper);
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--line);
    white-space: nowrap;
}
@media (max-width: 860px) {
    .flow {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .fconn {
        flex: 0 0 34px;
        height: 34px;
        width: 100%;
    }
    .fconn .track {
        left: 50%;
        right: auto;
        top: 0;
        bottom: 0;
        width: 2px;
        height: 100%;
        transform: translateX(-50%);
    }
    .fconn .track::after {
        left: 0;
        top: -45%;
        width: 100%;
        height: 40%;
        background: linear-gradient(
            to bottom,
            transparent,
            var(--citron-edge),
            transparent
        );
        animation: flowv 2.2s linear infinite;
    }
}
@keyframes flowv {
    0% {
        top: -45%;
    }
    100% {
        top: 105%;
    }
}

/* ---------- built-in capabilities grid (below the fold on /) ---------- */
.batt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.batt {
    background: var(--paper);
    padding: 20px 16px;
    transition: background 0.2s;
    position: relative;
}
.batt:hover {
    background: var(--paper-2);
}
.batt .ic {
    width: 26px;
    height: 26px;
    color: var(--citron-deep);
    margin-bottom: 11px;
}
.batt h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.batt p {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.45;
    font-family: var(--mono);
}

/* ---------- design-partner quotes (below the fold on /) ---------- */
.quote-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.quote {
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 26px 22px;
    transition: 0.25s var(--ease);
}
.quote:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}
/* a quiet citron quotation mark anchors each card */
.quote::before {
    content: "\201C";
    position: absolute;
    top: 14px;
    right: 20px;
    font-family: var(--display);
    font-weight: 800;
    font-size: 46px;
    line-height: 1;
    color: var(--citron);
    opacity: 0.5;
    pointer-events: none;
}
.quote blockquote {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2);
    font-weight: 500;
    letter-spacing: -0.006em;
}
.quote blockquote b {
    color: var(--ink);
    font-weight: 600;
}
.quote figcaption {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    margin-top: auto;
}
.q-role {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}
.q-tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--citron-deep);
}
@media (max-width: 760px) {
    .quote-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- footer (home) ---------- */
footer {
    border-top: 1px solid var(--line);
    padding: 8px 0 8px;
    margin-top: 30px;
}
.foot-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
}
.foot-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.foot-links {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.foot-links a {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink-3);
    text-decoration: none;
    transition: 0.18s;
    padding: 5px 10px;
    border-radius: 999px;
}
.foot-links a:hover {
    color: var(--ink);
    background: var(--paper-3);
}
.foot-note {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ink-3);
}
/* Pin the footer to the bottom of the viewport on tall screens. The compact
   home is short now that the below-fold sections are collapsed, so let <main>
   fill the viewport and the footer take up the slack. Scoped to the home page —
   the only marketing <main> with a direct <footer> child. */
main:has(> footer) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
main:has(> footer) > footer {
    margin-top: auto;
}
/* Three bands on the home page: badge pinned top, hero vertically centered,
   footer at the bottom. The hero band (.coming-soon) grows to fill the space
   between badge and footer; .soon-inner centers within it via auto margins.
   On short screens nothing is fixed/positioned, so the content just scrolls
   past the viewport with no overlap. */
main:has(> footer) .coming-soon {
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 36px;
}
main:has(> footer) .coming-soon > .soon-inner {
    margin: auto 0;
}
main:has(> footer) .beta-top {
    zoom: 0.8; /* match the hero comp scale (soon-inner uses zoom: .8) */
}

/* ---------- compact coming-soon hero (/) ---------- */
.coming-soon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 28px 56px;
}
/* the gate is the only full-height solo composition left */
.coming-soon.solo {
    min-height: 100vh;
}
.soon-inner {
    max-width: 940px;
    width: 100%;
    text-align: center;
    /* whole comp reads ~25% oversized at full scale; uniform zoom is more
     faithful than re-tuning each px value to the same ratio */
    zoom: 0.8;
}
.soon-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    margin-bottom: 8px;
}
.soon-brand .brand-mark {
    width: 52px;
    height: 40px;
    padding: 5px 7px;
    border-radius: 12px;
    margin-right: 12px;
}
.soon-inner .eyebrow {
    margin-bottom: 4px;
}
/* closed-beta status pill above the brand */
.beta-top {
    margin-bottom: 36px;
}
.beta-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--ink-2);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 15px 6px 12px;
    box-shadow: var(--shadow-card);
}
.beta-badge .bb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--citron);
    box-shadow: 0 0 0 3px rgb(var(--karta-acid) / 0.22);
    flex: none;
}
.soon-inner h1.hero-h {
    margin: 48px 0 0;
}
/* horizontal hero stage on the compact page: folder → git push → chat */
.soon-stage {
    /*display: flex;*/
    display: none;
    align-items: stretch;
    justify-content: center;
    gap: clamp(6px, 2vw, 20px);
    margin: 38px 0 0;
    flex-wrap: wrap;
}
.soon-stage .folder-card {
    width: clamp(300px, 33vw, 340px);
    flex: none;
    text-align: left;
    display: flex;
    flex-direction: column;
}
/* tree fills the taller card so the folder and chat read as an equal-height
   pair rather than a short card floating beside a tall one */
.soon-stage .folder-card .fc-body {
    flex: 1;
}
.soon-stage .chat {
    width: clamp(300px, 34vw, 340px);
    flex: none;
    text-align: left;
}
.soon-stage .push-arrow {
    width: clamp(110px, 16vw, 170px);
    flex: none;
    align-self: center;
    height: auto;
    flex-direction: column;
    gap: 8px;
}
.soon-stage .push-arrow svg {
    position: static;
    width: 100%;
    height: 22px;
}
@media (max-width: 760px) {
    .soon-stage .push-arrow {
        width: clamp(120px, 60vw, 220px);
    }
}
.soon-inner .chat-cap {
    max-width: 540px;
    margin: 18px auto 0;
}
.soon-form {
    margin-top: 30px;
}
.soon-form .hero-cta {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.form-lead {
    padding-top: 32px;
    margin: 0 auto 0px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-3);
}
.form-lead b {
    color: var(--ink);
    font-weight: 600;
}
.form-alt {
    margin: 14px 0 0;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink-3);
}
.form-alt a {
    color: var(--citron-deep);
    text-decoration: none;
    transition: color 0.18s;
}
.form-alt a:hover {
    color: var(--ink);
}
.soon-foot {
    margin-top: 30px;
    font-family: var(--mono);
    font-size: 12.5px;
}
.soon-foot a {
    color: var(--ink-3);
    text-decoration: none;
    transition: color 0.18s;
}
.soon-foot a:hover {
    color: var(--citron-deep);
}
/* the home page continues below the hero — quieter section rhythm */
.soon-more section {
    display: none;
    padding: 44px 0;
}
.soon-more .flow {
    margin-top: 6px;
}

/* ---------- waitlist form fields ---------- */
.wl-input {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 13px 18px;
    min-width: 268px;
    box-shadow: var(--shadow-card);
    transition:
        border-color 0.18s,
        box-shadow 0.18s;
}
.wl-input::placeholder {
    color: var(--ink-3);
}
.wl-input:focus {
    outline: none;
    border-color: var(--citron);
    box-shadow: 0 0 0 4px rgb(var(--karta-acid) / 0.25);
}
/* RFC 0039 OPEN-3: the optional "what would you build?" qualifier - full
   width within the form, gentle vertical resize. */
.wl-textarea {
    width: 100%;
    min-height: 62px;
    resize: vertical;
    line-height: 1.45;
}

/* RFC 0039 OPEN-1/2: the request-access turn reuses the dark .cta-card, so
   the form's flash + the human-contact line need light-on-dark treatment. */
.waitlist-card .hero-cta {
    margin-top: 18px;
    gap: 10px;
}
.waitlist-card .note-sm {
    color: #fff;
    margin: 0 0 6px;
}
/* scoped under .waitlist-card so it outranks `.cta-card p` (0,0,1,1), which
   would otherwise win on specificity and force its 16px / margins. */
.waitlist-card .waitlist-alt {
    margin: 16px 0 0;
    font-family: var(--mono);
    font-size: 11px;
    color: rgb(var(--karta-ink-600));
}
.waitlist-card .waitlist-alt a {
    color: var(--citron);
    text-decoration: none;
    transition: color 0.18s;
}
.waitlist-card .waitlist-alt a:hover {
    color: #fff;
}
/* RFC 0039: in-place acknowledgment after an AJAX submit. The card keeps its
   exact box - the form + framing are hidden in place (visibility preserves
   their height) and this success block overlays them, centered, so the box
   never resizes and nothing reflows. A citron check + prominent message,
   clearly not body text. */
.waitlist-card.is-done > *:not(.waitlist-done) {
    visibility: hidden;
}
.waitlist-done {
    position: absolute;
    inset: 30px 28px; /* match .cta-card padding so it sits over the content */
    margin: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    animation: rise 0.4s var(--ease) both;
}
.wd-check {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--citron);
    color: var(--citron-ink);
    box-shadow: 0 1px 0 var(--citron-edge) inset;
}
.wd-check svg {
    width: 22px;
    height: 22px;
}
.wd-msg {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.42;
}
/* error (e.g. a disposable email): shown above the kept form so they can fix + retry */
.waitlist-error {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: #ffb1a3;
}

/* ---------- small utilities ---------- */
.note-sm {
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 18px;
}
/* honeypot — visually hidden, kept in flow for bots (no inline style under CSP) */
.hp {
    position: absolute;
    left: -9999px;
}

/* ---------- reduced motion (supporting surfaces) ---------- */
@media (prefers-reduced-motion: reduce) {
    .load,
    .bub {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .rv {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .wordmark .cur,
    .hero-h .term-cur,
    .bub .cursor {
        animation: none;
    }
    .push-arrow .pflow {
        animation: none;
    }
    .fconn .track::after {
        display: none;
    }
}

/* RFC 0040 - propose -> approve cards (copilot-cards.js), rendered inline in the
   hero chat for a signed-in builder. Neutral kpc-* classes, themed here to the
   marketing surface; the agent only proposes, the human approves on the card. */
.kpc-card {
    align-self: stretch;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--paper-2);
    margin-top: 6px;
}
.kpc-summary {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}
.kpc-meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--ink-3);
}
.kpc-actions {
    margin-top: 11px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.kpc-actions button {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--line);
}
.kpc-cancel {
    background: var(--paper);
    color: var(--ink-2);
}
.kpc-approve {
    background: var(--citron);
    color: var(--citron-ink);
    border-color: var(--citron-edge);
}
.kpc-actions button:disabled {
    opacity: 0.55;
    cursor: default;
}
.kpc-result {
    margin-top: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ok);
}