/* ============================================================================
   CoinLobster AI-first marketing register (2026-09, docs/improvements.txt)
   An EXTENSION of the character-forward brand (brand-character.css /
   terminal-tokens.css), not a replacement. The shell goes quiet and near-black
   so live market data supplies the colour; the lobster orange stays as the one
   restrained accent; mint = up, red = down. Load AFTER terminal-tokens.css +
   brand-character.css. Scope: elements under .aiwrap (marketing surfaces only,
   never the terminal/app).
   ========================================================================== */

/* Skip-link: off-screen until keyboard-focused. Standalone AI pages (ai-examples,
   docs, connect) load ai-first.css but NOT cl-deep.css, so without this rule the
   "Skip to content" link rendered as visible text at the top-left. Kept identical
   to the cl-deep.css rule so pages that load both are unaffected. */
.skip-link { position: absolute; top: -80px; left: 12px; z-index: 2000; padding: 10px 18px; border-radius: 10px;
    background: #EE5A2C; color: #1a0a03; font-weight: 700; font-size: .9rem; text-decoration: none;
    transition: top .18s cubic-bezier(0.22,1,0.36,1); box-shadow: 0 10px 28px -8px rgba(238,90,44,0.6); }
.skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }

/* Tokens live on :root so the portable components (.ai-btn, .ai-bridge) keep
   their colour when dropped onto a product page that is NOT wrapped in .aiwrap.
   The near-black SHELL (background/ink/font) is applied only under .aiwrap. */
:root {
    /* near-black, but the SAME blue family as the brand, darkened. Not pure
       black: it keeps the deep-water character the lobster lives in. */
    --ai-bg:        #08131F;
    --ai-bg-2:      #0A1826;   /* raised band */
    --ai-panel:     #0E1E2E;   /* card / frame */
    --ai-panel-2:   #12293C;   /* inset (input, code) */
    --ai-hair:      rgba(255,246,234,0.10);
    --ai-hair-soft: rgba(255,246,234,0.055);
    --ai-hair-bold: rgba(255,246,234,0.16);

    --ai-ink:       #FFF6EA;   /* headline cream */
    --ai-body:      #C4D3E0;   /* body on near-black (7.9:1) */
    --ai-dim:       #8A9BAB;   /* meta (4.7:1 on --ai-bg) */

    --ai-orange:    #EE5A2C;
    --ai-orange-lt: #FF8A5C;   /* text-safe accent */
    --ai-up:        #37D98A;
    --ai-down:      #FA5772;
    --ai-up-soft:   rgba(55,217,138,0.14);
    --ai-down-soft: rgba(250,87,114,0.14);
    --ai-wallet:    #A78BFA;

    --ai-disp: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
    --ai-sans: 'Hanken Grotesk', system-ui, sans-serif;
    --ai-mono: 'JetBrains Mono', ui-monospace, monospace;
    --ai-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* the near-black marketing shell (marketing surfaces only, never the app) */
.aiwrap {
    background: var(--ai-bg);
    color: var(--ai-body);
    font-family: var(--ai-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* Themed browser surfaces (craft floor: the parts you didn't draw). */
.aiwrap ::selection { background: rgba(238,90,44,0.28); color: #fff; }
.aiwrap { scrollbar-color: rgba(255,246,234,0.22) transparent; }
.aiwrap ::-webkit-scrollbar { width: 11px; height: 11px; }
.aiwrap ::-webkit-scrollbar-thumb { background: rgba(255,246,234,0.16); border-radius: 100px; border: 3px solid transparent; background-clip: padding-box; }
.aiwrap ::-webkit-scrollbar-thumb:hover { background: rgba(255,246,234,0.28); background-clip: padding-box; }
.aiwrap :focus-visible { outline: 2px solid var(--ai-orange-lt); outline-offset: 3px; border-radius: 6px; }

/* ── rhythm: one idea per viewport ──────────────────────────────────────── */
.ai-sec { position: relative; padding: clamp(72px, 11vw, 168px) 24px; }
.ai-sec + .ai-sec { border-top: 1px solid var(--ai-hair-soft); }
.ai-sec--band { background: var(--ai-bg-2); }
.ai-in { max-width: 1120px; margin: 0 auto; }
.ai-in--narrow { max-width: 760px; }

.ai-lede { color: var(--ai-body); font-size: clamp(1.05rem, 1.9vw, 1.4rem); line-height: 1.5; max-width: 60ch; }
.ai-dim { color: var(--ai-dim); }

/* ── display type ───────────────────────────────────────────────────────── */
.ai-h1 {
    font-family: var(--ai-disp); font-weight: 800; color: var(--ai-ink);
    font-size: clamp(2.7rem, 7vw, 5.5rem); line-height: 0.98;
    letter-spacing: -0.035em; text-wrap: balance; margin: 0;
}
.ai-h2 {
    font-family: var(--ai-disp); font-weight: 800; color: var(--ai-ink);
    font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.02;
    letter-spacing: -0.03em; text-wrap: balance; margin: 0;
}
.ai-h3 {
    font-family: var(--ai-disp); font-weight: 700; color: var(--ai-ink);
    font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.1;
    letter-spacing: -0.02em; margin: 0;
}
.ai-num { font-family: var(--ai-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ai-up   { color: var(--ai-up); }
.ai-down { color: var(--ai-down); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.ai-btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--ai-sans); font-weight: 650; font-size: 1.02rem;
    padding: 15px 26px; border-radius: 100px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none; line-height: 1;
    transition: transform .18s var(--ai-ease), background .18s var(--ai-ease), box-shadow .18s var(--ai-ease), border-color .18s var(--ai-ease);
}
.ai-btn svg { width: 18px; height: 18px; }
.ai-btn--primary {
    background: var(--ai-orange); color: #1a0a03;
    box-shadow: 0 10px 28px -8px rgba(238,90,44,0.55), inset 0 1px 0 rgba(255,255,255,0.22);
}
.ai-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -8px rgba(238,90,44,0.62), inset 0 1px 0 rgba(255,255,255,0.22); }
.ai-btn--ghost { background: rgba(255,246,234,0.04); color: var(--ai-ink); border-color: var(--ai-hair-bold); }
.ai-btn--ghost:hover { background: rgba(255,246,234,0.08); transform: translateY(-2px); }
.ai-btn--sm { padding: 11px 18px; font-size: .92rem; }

/* ── HERO ───────────────────────────────────────────────────────────────── */
.aihero { padding-top: clamp(84px, 12vw, 156px); padding-bottom: clamp(56px, 8vw, 104px); text-align: center; overflow: clip; }
.aihero .ai-h1 { margin-inline: auto; max-width: 15ch; }
.aihero__sub { margin: 26px auto 0; max-width: 46ch; font-size: clamp(1.05rem, 1.9vw, 1.35rem); line-height: 1.5; color: var(--ai-body); }
.aihero__cta { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.aihero__clients { margin-top: 30px; display: flex; gap: 10px 22px; justify-content: center; flex-wrap: wrap; align-items: center; color: var(--ai-dim); font-size: .82rem; letter-spacing: .02em; }
.aihero__clients b { color: var(--ai-body); font-weight: 600; }
.aihero__glow { position: absolute; inset: -20% 0 auto 0; height: 60%; z-index: 0;
    background: radial-gradient(60% 100% at 50% 0%, rgba(238,90,44,0.14), transparent 70%); pointer-events: none; }
.aihero > * { position: relative; z-index: 1; }

/* live micro-ticker under the hero: data supplies the colour */
.aiticker { margin: 40px auto 0; max-width: 720px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.aiticker__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 100px;
    background: var(--ai-panel); border: 1px solid var(--ai-hair); font-size: .84rem; color: var(--ai-body); }
.aiticker__chip .sym { font-weight: 700; color: var(--ai-ink); }

/* ── GIANT AI DEMONSTRATION ─────────────────────────────────────────────── */
.aidemo { max-width: 940px; margin: 0 auto; border-radius: 20px; overflow: hidden;
    background: var(--ai-panel); border: 1px solid var(--ai-hair);
    box-shadow: 0 40px 90px -40px rgba(0,0,0,0.8), 0 2px 0 rgba(255,255,255,0.02) inset; }
.aidemo__bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--ai-hair-soft); background: rgba(255,255,255,0.015); }
.aidemo__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,246,234,0.16); }
.aidemo__title { margin-left: 8px; font-size: .82rem; color: var(--ai-dim); font-family: var(--ai-mono); }
.aidemo__body { padding: clamp(20px, 3vw, 34px); }
.aimsg { display: flex; gap: 14px; align-items: flex-start; }
.aimsg + .aimsg { margin-top: 22px; }
.aimsg__who { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: .72rem; font-family: var(--ai-mono); }
.aimsg__who--you { background: var(--ai-panel-2); color: var(--ai-body); border: 1px solid var(--ai-hair); }
.aimsg__who--cl  { background: rgba(238,90,44,0.16); color: var(--ai-orange-lt); border: 1px solid rgba(238,90,44,0.3); }
.aimsg__q { font-size: clamp(1.15rem, 2.3vw, 1.5rem); color: var(--ai-ink); font-family: var(--ai-disp); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }

/* the authored moment: the tool-call sequence resolving, then the answer */
.aitools { margin-top: 6px; display: flex; flex-direction: column; gap: 9px; }
.aitool { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--ai-dim); font-family: var(--ai-mono); opacity: 0; transform: translateY(4px);
    animation: aitool-in .5s var(--ai-ease) forwards; animation-delay: var(--d, 0s); }
.aitool__ic { position: relative; width: 16px; height: 16px; flex: none; }
.aitool .tick { position: absolute; inset: 0; color: var(--ai-up); opacity: 0; animation: aitick .3s var(--ai-ease) forwards; animation-delay: calc(var(--d, 0s) + .8s); }
.aitool .spin { position: absolute; inset: 1px; border-radius: 50%; border: 2px solid rgba(255,246,234,0.18); border-top-color: var(--ai-orange-lt);
    animation: aispin .7s linear infinite, aifade .25s var(--ai-ease) forwards; animation-delay: 0s, calc(var(--d, 0s) + .8s); }
.aitool:nth-child(1) { --d: .15s; }
.aitool:nth-child(2) { --d: .55s; }
.aitool:nth-child(3) { --d: .95s; }
.aitool:nth-child(4) { --d: 1.35s; }
.aians { margin-top: 16px; padding: 18px 20px; border-radius: 13px; background: var(--ai-panel-2); border: 1px solid var(--ai-hair);
    opacity: 0; transform: translateY(8px); animation: aitool-in .6s var(--ai-ease) forwards; animation-delay: 2.6s; }
.aians__row { display: flex; gap: 12px; padding: 10px 0; align-items: baseline; }
.aians__row + .aians__row { border-top: 1px solid var(--ai-hair-soft); }
.aians__sym { font-family: var(--ai-mono); font-weight: 700; color: var(--ai-ink); min-width: 52px; }
.aians__txt { color: var(--ai-body); font-size: .96rem; line-height: 1.45; }
.aians__mult { font-family: var(--ai-mono); font-weight: 700; }
.aiview { display: inline-flex; align-items: center; gap: 5px; color: var(--ai-orange-lt); font-size: .8rem; font-weight: 600; text-decoration: none; margin-left: 6px; white-space: nowrap; }
.aiview:hover { text-decoration: underline; }

@keyframes aitool-in { to { opacity: 1; transform: none; } }
@keyframes aitick { to { opacity: 1; } }
@keyframes aifade { to { opacity: 0; } }
@keyframes aispin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .aitool, .aitool .tick, .aians { animation: none !important; opacity: 1 !important; transform: none !important; }
    .aitool .spin { display: none; }
}

/* ── PROBLEM statement (AI knows markets, not NOW) ──────────────────────── */
.aiplus { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.aiplus__box { padding: 16px 22px; border-radius: 13px; background: var(--ai-panel); border: 1px solid var(--ai-hair); text-align: center; min-width: 130px; }
.aiplus__box b { display: block; color: var(--ai-ink); font-family: var(--ai-disp); font-weight: 700; font-size: 1.02rem; }
.aiplus__box span { font-size: .8rem; color: var(--ai-dim); }
.aiplus__box--accent { border-color: rgba(238,90,44,0.35); background: rgba(238,90,44,0.06); }
.aiplus__op { font-size: 1.6rem; color: var(--ai-dim); font-family: var(--ai-mono); }

/* ── GIVE YOUR AI A JOB (tabs + copyable prompt) ────────────────────────── */
.aijobs { margin-top: 44px; display: grid; grid-template-columns: 250px 1fr; gap: 22px; }
.aijobs__tabs { display: flex; flex-direction: column; gap: 4px; }
.aijob-tab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: transparent; border: 1px solid transparent;
    color: var(--ai-body); font-family: var(--ai-sans); font-weight: 600; font-size: 1rem; text-align: left; cursor: pointer; width: 100%; transition: background .16s var(--ai-ease); }
.aijob-tab:hover { background: rgba(255,246,234,0.04); }
.aijob-tab[aria-selected="true"] { background: var(--ai-panel); border-color: var(--ai-hair-bold); color: var(--ai-ink); }
.aijob-tab .ic { width: 20px; height: 20px; flex: none; color: var(--ai-orange-lt); }
.aijob-panel { background: var(--ai-panel); border: 1px solid var(--ai-hair); border-radius: 16px; padding: clamp(22px, 3vw, 32px); }
.aijob-panel[hidden] { display: none; }
.aijob-panel__desc { color: var(--ai-body); font-size: 1.08rem; line-height: 1.5; margin: 0 0 20px; }
.aiprompt { display: flex; gap: 12px; align-items: flex-start; background: var(--ai-panel-2); border: 1px solid var(--ai-hair); border-radius: 12px; padding: 16px 16px 16px 18px; }
.aiprompt__q { font-family: var(--ai-mono); font-size: .95rem; color: var(--ai-ink); line-height: 1.5; flex: 1; }
.aiprompt__copy { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 9px; background: rgba(255,246,234,0.05);
    border: 1px solid var(--ai-hair-bold); color: var(--ai-body); font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .15s; }
.aiprompt__copy:hover { background: rgba(255,246,234,0.1); }
.aiprompt__copy svg { width: 14px; height: 14px; }
.aiprompt__copy.copied { color: var(--ai-up); border-color: rgba(55,217,138,0.4); }

/* ── MARKET UNDERNEATH (substantial showcases, not tiny cards) ──────────── */
.aiunder { display: flex; flex-direction: column; gap: 20px; margin-top: 44px; }
.aishow { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
    background: var(--ai-panel); border: 1px solid var(--ai-hair); border-radius: 20px; padding: clamp(26px, 3.4vw, 44px); }
.aishow:nth-child(even) .aishow__copy { order: 2; }
.aishow__copy h3 { margin: 0 0 12px; }
.aishow__copy p { color: var(--ai-body); font-size: 1.04rem; line-height: 1.5; margin: 0 0 20px; max-width: 42ch; }
.aishow__vis { min-height: 220px; border-radius: 14px; background: var(--ai-bg); border: 1px solid var(--ai-hair-soft); padding: 18px; overflow: hidden; }
.aishow__link { display: inline-flex; align-items: center; gap: 7px; color: var(--ai-orange-lt); font-weight: 650; text-decoration: none; }
.aishow__link:hover { text-decoration: underline; }

/* mini visual: whale flow bars */
.wbar { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: 8px; }
.wbar span { flex: 1; border-radius: 4px 4px 0 0; background: var(--ai-up-soft); border-top: 2px solid var(--ai-up); }
.wbar span.sell { background: var(--ai-down-soft); border-top-color: var(--ai-down); }
.mini-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--ai-hair-soft); font-size: .9rem; }
.mini-row:last-child { border-bottom: 0; }
.mini-row .l { color: var(--ai-body); font-family: var(--ai-mono); }

/* ── REUSABLE AI-BRIDGE MODULE (product pages) ──────────────────────────── */
.ai-bridge { border: 1px solid var(--ai-hair, rgba(255,246,234,0.10)); border-radius: 16px;
    background: linear-gradient(180deg, rgba(238,90,44,0.05), rgba(14,30,46,0.6)); padding: clamp(18px, 2.4vw, 26px);
    display: grid; grid-template-columns: 1fr auto; gap: 18px 24px; align-items: center; }
.ai-bridge__lead { min-width: 0; }
.ai-bridge__k { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ai-orange-lt, #FF8A5C); }
.ai-bridge__k svg { width: 15px; height: 15px; }
.ai-bridge__q { margin: 10px 0 0; font-family: var(--ai-mono, 'JetBrains Mono', monospace); font-size: clamp(.95rem, 1.7vw, 1.12rem); color: var(--ai-ink, #FFF6EA); line-height: 1.45; }
.ai-bridge__act { display: flex; gap: 10px; align-items: center; flex: none; }
@media (max-width: 640px) { .ai-bridge { grid-template-columns: 1fr; } .ai-bridge__act { flex-wrap: wrap; } }

/* ── /ai: example questions grid ────────────────────────────────────────── */
.aiqgrid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.aiq { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border-radius: 14px; background: var(--ai-panel); border: 1px solid var(--ai-hair); }
.aiq__ic { width: 22px; height: 22px; flex: none; color: var(--ai-orange-lt); margin-top: 1px; }
.aiq span { font-family: var(--ai-mono); font-size: 1rem; color: var(--ai-ink); line-height: 1.4; }

/* ── /ai: works-with client chips ───────────────────────────────────────── */
.aiclients { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.aiclient { padding: 12px 20px; border-radius: 100px; background: var(--ai-panel); border: 1px solid var(--ai-hair-bold);
    color: var(--ai-ink); font-family: var(--ai-disp); font-weight: 600; font-size: 1.02rem; }

/* ── /ai: what's underneath grid ────────────────────────────────────────── */
.aiunder-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.aiunder-cell { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 16px; background: var(--ai-panel);
    border: 1px solid var(--ai-hair); text-decoration: none; transition: border-color .16s var(--ai-ease), transform .16s var(--ai-ease); }
.aiunder-cell:hover { border-color: var(--ai-hair-bold); transform: translateY(-2px); }
.aiunder-cell p { color: var(--ai-body); font-size: .96rem; line-height: 1.45; margin: 0; flex: 1; }
.aiunder-cell .aishow__link { margin-top: 4px; }
@media (max-width: 860px) { .aiqgrid { grid-template-columns: 1fr; } .aiunder-grid { grid-template-columns: 1fr; } }

/* ── FINAL CTA ──────────────────────────────────────────────────────────── */
.aifinal { text-align: center; }
.aifinal .ai-h2 { max-width: 18ch; margin-inline: auto; }
.aifinal__cta { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── homepage simple pricing preview ────────────────────────────────────── */
.aiprice { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 40px; }
.aiprice__c { background: var(--ai-panel); border: 1px solid var(--ai-hair); border-radius: 16px; padding: 24px 20px; }
.aiprice__c--pop { border-color: rgba(238,90,44,0.45); box-shadow: 0 0 0 1px rgba(238,90,44,0.2); }
.aiprice__name { font-family: var(--ai-disp); font-weight: 700; color: var(--ai-ink); font-size: 1.15rem; }
/* display face for the price: JetBrains Mono's dotted zero reads as "8" at
   this size, and "$0" for Free must be unmistakable. Tabular for alignment. */
.aiprice__amt { font-family: var(--ai-disp); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 2.1rem; color: var(--ai-ink); margin: 6px 0 2px; letter-spacing: -0.03em; }
.aiprice__amt span { font-size: .9rem; color: var(--ai-dim); }
.aiprice__blurb { color: var(--ai-dim); font-size: .9rem; line-height: 1.4; min-height: 2.6em; }

/* ── pricing page: cards with checkout ──────────────────────────────────── */
.aiplan { display: flex; flex-direction: column; }
.aiplan__cta { margin-top: 18px; }
.aiplan__feats { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.aiplan__feats li { display: flex; gap: 9px; align-items: flex-start; color: var(--ai-body); font-size: .9rem; line-height: 1.4; }
.aiplan__feats li svg { width: 15px; height: 15px; flex: none; color: var(--ai-up); margin-top: 2px; }

/* ── pricing page: comparison table ─────────────────────────────────────── */
.aicompare { margin-top: 44px; overflow-x: auto; border: 1px solid var(--ai-hair); border-radius: 16px; }
.aicompare table { width: 100%; border-collapse: collapse; min-width: 640px; }
.aicompare th, .aicompare td { padding: 15px 18px; text-align: center; border-bottom: 1px solid var(--ai-hair-soft); font-size: .92rem; }
.aicompare thead th { background: rgba(255,255,255,0.02); color: var(--ai-ink); font-family: var(--ai-disp); font-weight: 700; font-size: 1rem; }
.aicompare tbody th { text-align: left; color: var(--ai-body); font-weight: 600; font-family: var(--ai-sans); }
.aicompare td { color: var(--ai-body); font-family: var(--ai-mono); font-variant-numeric: tabular-nums; }
.aicompare tr:last-child td, .aicompare tr:last-child th { border-bottom: 0; }
.aicompare .yes { color: var(--ai-up); font-family: var(--ai-sans); }
.aicompare .no { color: var(--ai-dim); font-family: var(--ai-sans); }
.aicompare .pop { color: var(--ai-orange-lt); }

/* ── pricing page: credits FAQ ──────────────────────────────────────────── */
.aifaq { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.aifaq__q { background: var(--ai-panel); border: 1px solid var(--ai-hair); border-radius: 14px; padding: 22px 24px; }
.aifaq__q h3 { margin: 0 0 8px; font-size: 1.05rem; }
.aifaq__q p { margin: 0; color: var(--ai-body); font-size: .94rem; line-height: 1.5; }

/* ── content page: two-way build (no-code / code) + code block ──────────── */
.aiways { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.aiway { background: var(--ai-panel); border: 1px solid var(--ai-hair); border-radius: 18px; padding: clamp(22px, 3vw, 32px); }
.aiway__tag { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ai-orange-lt); margin-bottom: 12px; }
.aiway h3 { margin: 0 0 10px; }
.aiway > p { color: var(--ai-body); font-size: 1rem; line-height: 1.5; margin: 0 0 18px; }
.aicode { position: relative; background: #06101A; border: 1px solid var(--ai-hair); border-radius: 12px; padding: 16px 18px; overflow-x: auto; }
.aicode pre { margin: 0; font-family: var(--ai-mono); font-size: .84rem; line-height: 1.6; color: var(--ai-body); white-space: pre; }
.aicode .k { color: var(--ai-orange-lt); }
.aicode .s { color: var(--ai-up); }
.aicode__copy { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 8px; background: rgba(255,246,234,0.06); border: 1px solid var(--ai-hair-bold); color: var(--ai-body); font-size: .76rem; font-weight: 600; cursor: pointer; }
.aicode__copy:hover { background: rgba(255,246,234,0.12); }
.aicode__copy.copied { color: var(--ai-up); }
@media (max-width: 780px) { .aiways { grid-template-columns: 1fr; } }

/* ── onboarding: three-path chooser (§27) ───────────────────────────────── */
.aichoose { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.aichoose__card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px; border-radius: 18px;
    background: var(--ai-panel); border: 1px solid var(--ai-hair); text-decoration: none; transition: border-color .16s var(--ai-ease), transform .16s var(--ai-ease); }
.aichoose__card:hover { border-color: var(--ai-hair-bold); transform: translateY(-3px); }
.aichoose__card--rec { border-color: rgba(238,90,44,0.4); background: rgba(238,90,44,0.05); }
.aichoose__ic { width: 34px; height: 34px; color: var(--ai-orange-lt); }
.aichoose__card h3 { margin: 0; }
.aichoose__card p { margin: 0; color: var(--ai-body); font-size: .96rem; line-height: 1.45; flex: 1; }
.aichoose__go { display: inline-flex; align-items: center; gap: 6px; color: var(--ai-orange-lt); font-weight: 650; font-size: .95rem; margin-top: 4px; }
.aichoose__tag { position: absolute; top: 16px; right: 16px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ai-orange-lt); }
@media (max-width: 780px) { .aichoose { grid-template-columns: 1fr; } }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .aijobs { grid-template-columns: 1fr; }
    .aijobs__tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
    .aijob-tab { white-space: nowrap; }
    .aishow, .aishow:nth-child(even) .aishow__copy { grid-template-columns: 1fr; order: 0; }
    .aiprice { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .aiprice { grid-template-columns: 1fr; }
    .aiplus { flex-direction: column; }
    .aiplus__op { transform: rotate(90deg); }
}

/* ── mascot as research assistant (docs/improvements.txt §31) ──────────────
   The lobster is the memorability asset, so it is never redrawn. A `state`
   on partials/cl-mascot.ejs only adds this small drawn prop beside the SAME
   art (magnifier, binoculars, dossier, dive mask, caution mark) so the mascot
   reads as the user's crypto research assistant. Base mascot styles are in
   cl-deep.css; the accent stays the one restrained orange, red only when the
   state itself means risk (warning). */
.cl-mascot__prop {
    position: absolute; right: -3%; bottom: 6%;
    width: 34%; min-width: 28px; max-width: 46px; aspect-ratio: 1 / 1;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--ai-panel, #0E1E2E);
    border: 1.5px solid var(--ai-orange, #EE5A2C);
    color: var(--ai-orange-lt, #FF8A5C);
    box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 0 4px rgba(238,90,44,0.10);
    z-index: 1;
}
.cl-mascot__prop svg { width: 58%; height: 58%; }
.cl-mascot--warning .cl-mascot__prop {
    border-color: var(--ai-down, #FA5772);
    color: var(--ai-down, #FA5772);
    box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 0 4px rgba(250,87,114,0.12);
}
/* subtle life per state: small surprises only, never constant loud motion */
.cl-mascot--searching     .cl-mascot__prop { animation: cl-prop-scan 3.6s var(--ai-ease, ease-in-out) infinite; }
.cl-mascot--watching      .cl-mascot__prop { animation: cl-prop-bob 4s var(--ai-ease, ease-in-out) infinite; }
.cl-mascot--investigating .cl-mascot__prop,
.cl-mascot--diving        .cl-mascot__prop { animation: cl-prop-breathe 4.4s var(--ai-ease, ease-in-out) infinite; }
.cl-mascot--warning       .cl-mascot__prop { animation: cl-prop-warn 2.2s ease-in-out infinite; }
@keyframes cl-prop-scan   { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-8%,-4%) rotate(-8deg); } }
@keyframes cl-prop-bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8%); } }
@keyframes cl-prop-breathe{ 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes cl-prop-warn   { 0%,100% { box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 0 3px rgba(250,87,114,0.12); } 50% { box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 0 7px rgba(250,87,114,0.02); } }
@media (prefers-reduced-motion: reduce) {
    .cl-mascot__prop { animation: none !important; }
}