/* LearningCode /code mini-site. Self-contained stylesheet, loaded only on /code pages.
   Art direction: "matte glass" — frosted translucent cards over a deep aurora wash.
   Amber leads because it is the TLC footer accent (warnings, active model, plan
   counts), so the page reads as the product. Corners are soft everywhere.

   Light comes from translucency, not glow: backdrop-filter blur + saturate on
   .code-glass only. No global filter: blur() — composited per-frame, it wrecks
   low-end phone scrolling, and the phone is a first-class client here. */

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/space-grotesk-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/space-grotesk-medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/space-grotesk-bold.ttf') format('truetype');
}

:root {
    --code-bg: #000;
    --code-surface: #1c1c1e;
    --code-ink: #f2f2f7;
    --code-muted: #8e8e93;
    --code-accent: #0a84ff;
    --code-glass: rgba(255, 255, 255, 0.06);
    --code-glass-edge: rgba(255, 255, 255, 0.14);
    --code-ok: #30d158;
    --code-warn: #ffd60a;
}

* { box-sizing: border-box; }

body.code {
    margin: 0;
    background: var(--code-bg);
    color: var(--code-ink);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

body.code code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    background: rgba(0, 0, 0, 0.45);
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    font-size: 0.9em;
    white-space: nowrap;
}

/* Aurora wash: one fixed layer behind everything, decorative only. */
.code-aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 30rem at 15% -5%, rgba(10, 132, 255, 0.12), transparent 60%),
        radial-gradient(50rem 28rem at 85% 20%, rgba(94, 120, 255, 0.16), transparent 60%),
        radial-gradient(45rem 30rem at 50% 110%, rgba(48, 209, 88, 0.06), transparent 60%),
        var(--code-bg);
}

/* Frosted cards: the whole page is windows of matte glass. */
.code-glass {
    background: var(--code-glass);
    border: 1px solid var(--code-glass-edge);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.code-glass-hot {
    border-color: rgba(10, 132, 255, 0.5);
}

.code-glass h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.code-glass p:last-child { margin-bottom: 0; }

.code-muted { color: var(--code-muted); }
.code-accent { color: var(--code-accent); }
.code-center { text-align: center; }
.ok { color: var(--code-ok); }
.warn { color: var(--code-warn); }
.dim, .muted { color: var(--code-muted); }

/* Nav: sticky frosted bar. */
.code-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(16, 19, 25, 0.72);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--code-glass-edge);
}

.code-nav-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 4rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.code-brand {
    color: var(--code-ink);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.code-brand-tlc { display: inline-flex; align-items: center; }
.code-brand-tlc img { display: block; height: 22px; width: auto; }

.code-nav-links { display: flex; gap: 1.1rem; overflow-x: auto; flex: 1; }
.code-nav-links a { color: var(--code-muted); text-decoration: none; white-space: nowrap; font-size: 0.92rem; }
.code-nav-links a:hover { color: var(--code-ink); }

.code-nav-cta { display: flex; gap: 0.6rem; margin-left: auto; }

/* Buttons: solid amber primary, glass secondary. */
.code-btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
}

.code-btn-solid { background: var(--code-accent); color: #fff; }
.code-btn-solid:hover { filter: brightness(1.08); }
.code-btn-glass {
    background: var(--code-glass);
    border: 1px solid var(--code-glass-edge);
    color: var(--code-ink);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.code-btn-ghost { color: var(--code-muted); padding: 0.6rem 0.4rem; }
.code-btn-ghost:hover { color: var(--code-ink); }
.code-btn-lg { padding: 0.85rem 1.7rem; font-size: 1.02rem; }

/* Hero: copy + glass terminal. */
.code-hero {
    max-width: 72rem;
    margin: 0 auto;
    padding: 4rem 1.5rem 3rem;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.code-kicker {
    color: var(--code-accent);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin: 0 0 0.6rem;
}

.code-hero h1 { font-size: 2.6rem; line-height: 1.12; margin: 0 0 1rem; letter-spacing: -0.01em; }
.code-hero h1 em { font-style: normal; color: var(--code-accent); }
.code-lede { color: var(--code-muted); font-size: 1.08rem; margin: 0 0 1.6rem; }
.code-cta-row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.code-cta-center { justify-content: center; margin-top: 1.8rem; }
.code-fineprint { color: var(--code-muted); font-size: 0.85rem; margin-top: 1rem; }

.code-terminal {
    background: rgba(8, 10, 14, 0.78);
    border: 1px solid var(--code-glass-edge);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.code-terminal-bar { display: flex; gap: 0.45rem; padding: 0.8rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.code-terminal-bar span { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: rgba(255,255,255,0.18); }
.code-terminal-bar span:first-child { background: rgba(10,132,255,0.7); }

.code-terminal pre {
    margin: 0;
    min-height: 22rem;
    padding: 1.2rem 1.3rem 1.4rem;
    overflow-x: auto;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.86rem;
    line-height: 1.75;
}

.code-terminal code { background: none; padding: 0; white-space: pre; }
.code-terminal .bar { color: var(--code-accent); }

/* Ghost-voice hero: giant outline word, proof pills, blue plan CTA. */
.code-hero { position: relative; overflow: clip; }
.code-ghostword span { display: block; animation: code-drift 16s ease-in-out infinite alternate; }
.code-ghostword span + span { animation-duration: 20s; animation-delay: -6s; }
@keyframes code-drift {
    from { opacity: 0.35; transform: translateX(-3%); }
    to   { opacity: 0.7;  transform: translateX(3%); }
}
.code-ghostword {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    margin: 0;
    font-weight: 700;
    font-size: clamp(2.5rem, 8vw, 6.5rem);
    letter-spacing: 0.04em;
    opacity: 0.55;
    white-space: nowrap;
    line-height: 0.9;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.10);
    text-shadow: 0 0 20px rgba(10, 132, 255, 0.14);
    pointer-events: none;
    user-select: none;
}
.code-hero-copy, .code-hero .code-terminal, .code-hero .code-proofbar { position: relative; z-index: 1; }
.code-hero { padding-top: 6rem; }
.code-proofbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.code-proofline { font-size: 1.6rem; font-weight: 500; margin: 0; flex: 1 1 100%; }
.code-pills { list-style: none; display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 0; padding: 0; flex: 1; }
.code-pills li {
    border: 1px solid rgba(94, 150, 255, 0.65);
    color: #9cc0ff;
    border-radius: 10px;
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
    background: rgba(94, 150, 255, 0.06);
}
.code-planbox { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }
.code-planprice { margin: 0; color: var(--code-muted); font-size: 1.1rem; }
.code-planprice strong { color: var(--code-ink); }
.code-btn-blue { background: #1f6feb; color: #fff; border-radius: 10px; }
.code-btn-blue:hover { filter: brightness(1.1); }

/* Sections: generous air, glass cards do the talking. */
.code-section { max-width: 72rem; margin: 0 auto; padding: 3.5rem 1.5rem 1rem; }
.code-section h2 { font-size: 1.9rem; margin: 0 0 0.7rem; letter-spacing: -0.01em; }
.code-prose { color: var(--code-muted); max-width: 44rem; margin: 0 0 1.6rem; }
.code-prose code { color: var(--code-ink); }

.code-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.code-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.code-meter { font-size: 1.5rem; font-weight: 700; margin: 0.4rem 0; }
.code-price { font-size: 1.5rem; font-weight: 700; color: var(--code-ink); margin: 0.2rem 0 0.5rem; }

.code-planline {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem;
}
.code-plan-on { color: var(--code-accent); }
.code-plan-done { color: var(--code-ok); }
.code-arrow { color: var(--code-muted); }
.code-checks { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.4rem; }

/* Momentum rails: horizontal scroll cards. */
.code-rails { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12rem, 1fr); gap: 1.2rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: none; -ms-overflow-style: none; }
.code-rails::-webkit-scrollbar { display: none; }
.code-rails h3 { font-size: 1.3rem; color: var(--code-ink); }

/* Final band + colophon. */
.code-final { max-width: 56rem; margin: 0 auto; padding: 4rem 1.5rem 2rem; text-align: center; }
.code-final h2 { font-size: 2rem; margin: 0 0 0.6rem; }
.code-final .code-cta-row { justify-content: center; margin-top: 1.4rem; }
.code-foot { text-align: center; padding: 2rem 1.5rem 3rem; font-size: 0.85rem; }

/* Reveal-on-scroll — subtle fade + rise, staggered by data-delay.
   Gated on html.js so the page still reads with JS disabled. */
html.js .code-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s cubic-bezier(.22,.9,.32,1), transform 0.65s cubic-bezier(.22,.9,.32,1);
}
html.js .code-reveal.is-visible { opacity: 1; transform: translateY(0); }
.code-reveal[data-delay="1"] { transition-delay: .08s; }
.code-reveal[data-delay="2"] { transition-delay: .16s; }
.code-reveal[data-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    .code-ghostword span { animation: none; }
    .code-banner-row, .code-terminal.is-visible .code-banner-row { opacity: 1; transform: none; transition: none; }
    .code-aurora { background: var(--code-bg); }
    .code-reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 860px) {
    .code-hero { grid-template-columns: 1fr; padding-top: 2.5rem; }
    .code-hero h1 { font-size: 2rem; }
    .code-grid-2, .code-grid-3 { grid-template-columns: 1fr; }
    .code-nav-cta .code-btn-ghost { display: none; }
    .code-nav-inner { gap: 1rem; }
}

/* Token plan cards: price, specs, Spark CTA. */
.code-per { font-size: 0.95rem; color: var(--code-muted); font-weight: 400; margin-left: 0.25rem; }
.code-specs { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: grid; gap: 0.45rem; color: var(--code-muted); }
.code-specs li::before { content: "→ "; color: var(--code-ink); }
.code-spark-logo { height: 1.1rem; width: auto; margin-right: 0.55rem; vertical-align: middle; }

/* Brand chip: TLC wordmark is dark ink, so it needs a light surface on our dark page. */
.code-tlc-chip { display: inline-flex; align-items: center; background: #f4f4f1; border-radius: 10px; padding: 0.3rem 0.6rem; margin-left: 0.8rem; }
.code-tlc-chip img { display: block; height: 18px; width: auto; }
.code-foot { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.code-foot p { margin: 0; }
.code-foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Mono banner: fixed size, scrolls sideways on phones instead of wrapping. */
.code-terminal { container-type: inline-size; }
/* 97 art columns at ~0.6em per glyph must fit the card: size from the card's own width. */
.code-terminal pre.code-banner { padding-left: 1.2rem; padding-right: 1.2rem; font-size: min(0.8rem, calc((100cqi - 2.4rem) / 66)); line-height: 1.2; color: #29c8f2; margin: 0; min-height: 0; overflow: hidden; }
.code-banner { line-height: 1 !important; }
.code-banner-row { display: block; white-space: pre; line-height: 1; }
.code-banner code { background: none; padding: 0; border-radius: 0; white-space: pre; }
html.js .code-banner-row { opacity: 0; transform: translateX(-10px); }
.code-terminal.is-visible .code-banner-row { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease; transition-delay: calc(.35s + var(--r) * .09s); }
.code-cmdnote { display: inline-block; margin-top: 0.7rem; font-size: 0.8rem; color: var(--code-muted); }

/* Motion: quota bar fills and checklist ticks land in sequence once revealed. */
.code-bar { height: 10px; border-radius: 10px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 0.9rem 0 0.4rem; }
.code-bar-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0a84ff, #30d158); border-radius: inherit; }
.is-visible .code-bar-fill { width: var(--fill); transition: width 1.1s cubic-bezier(.22,.9,.32,1) .25s; }
html.js .code-checks li { opacity: 0; transform: translateX(-6px); }
.is-visible .code-checks li { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s ease; transition-delay: calc(.35s + var(--i) * .22s); }
@media (prefers-reduced-motion: reduce) {
    .is-visible .code-bar-fill { transition: none; }
    .code-checks li, .is-visible .code-checks li { opacity: 1; transform: none; transition: none; }
}

/* Accessibility: a visible focus ring on every link and button. */
.code a:focus-visible, .code button:focus-visible {
    outline: 2px solid #9cc0ff;
    outline-offset: 3px;
    border-radius: 6px;
}

/* Phone: CTA first, pills in a 2x2 grid, hero stacks cleanly. */
@media (max-width: 600px) {
    .code-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .code-pills li { white-space: normal; text-align: center; font-size: 0.72rem; }
    .code-planbox { margin-left: 0; flex-direction: column; align-items: stretch; width: 100%; }
    .code-cta-row { flex-direction: column; align-items: stretch; }
}

/* Install: two copy-able command cards, one per OS family. */
.code-install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.code-install-grid .code-terminal { display: flex; flex-direction: column; }
.code-install-grid .code-terminal pre { min-height: 0; flex: 1; font-size: 0.82rem; overflow-x: hidden; }
.code-install-grid .code-terminal code { white-space: pre-wrap; overflow-wrap: anywhere; display: block; }
.code-install-head { padding: 0.7rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); color: var(--code-muted); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.code-copy { margin: 0 1rem 1rem; align-self: flex-start; cursor: pointer; font: inherit; }
@media (max-width: 760px) { .code-install-grid { grid-template-columns: 1fr; } }

/* Plan mode: three-step flow, live footer card, allow/block rules. */
.code-plan-logo { height: 1.4rem; width: auto; display: block; margin-bottom: 0.9rem; }
.code-flow { list-style: none; margin: 2.2rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: none; }
.code-flow-step { position: relative; padding: 1.4rem 1.3rem 1.3rem; border: 1px solid var(--code-glass-edge); border-radius: 16px; background: var(--code-glass); }
.code-flow-step h3 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.code-flow-step p { margin: 0; font-size: 0.92rem; }
.code-flow-n { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--code-accent); color: #fff; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.8rem; }
.code-rules { list-style: none; padding: 0; margin: 0.8rem 0 1rem; display: grid; gap: 0.55rem; }
.code-rules li { display: flex; gap: 0.6rem; align-items: baseline; }
.code-rules span { font-weight: 700; width: 1rem; flex: 0 0 auto; }
.code-allow span { color: var(--code-ok); }
.code-block span { color: #ff453a; }
@media (max-width: 760px) { .code-flow { grid-template-columns: 1fr; } }

/* Proof band: three plain points and one price, aligned. */
.code-proof-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; flex: 1 1 100%; }
.code-proof-point h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.code-proof-point p { margin: 0; font-size: 0.9rem; }
.code-proofbar { align-items: stretch; }
.code-planbox { flex: 0 0 auto; align-self: center; }
@media (max-width: 760px) { .code-proof-points { grid-template-columns: 1fr; } }

/* Quota: both cards equal height, text aligned top to bottom. */
.code-quota-grid { align-items: stretch; }
.code-quota-card { display: flex; flex-direction: column; }
.code-quota-card h3 { min-height: 2.2rem; }
.code-quota-card .code-bar { margin-top: 0.8rem; }
.code-quota-card .code-meter { margin: 0.5rem 0 0.6rem; font-size: 1.3rem; }
.code-quota-note { margin-top: auto; min-height: 3.2em; }
.code-quota-card .code-meter { min-height: 1.6em; }
.code-bar-spend .code-bar-fill { background: linear-gradient(90deg, #0a84ff, #30d158); }

/* Simulated learningcode CLI: a terminal with prompt, plan, approval and the real footer. */
.code-cli { display: flex; flex-direction: column; }
.code-cli .code-terminal-bar { position: relative; }
.code-cli-title { position: absolute; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 0.78rem; color: var(--code-muted); top: 50%; translate: -50% -50%; }
.code-cli-body { height: 15rem; box-sizing: border-box; font-size: 0.8rem; line-height: 1.55; white-space: pre-wrap; margin: 0; padding: 1rem 1.1rem; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.code-plan-h { color: var(--code-ink); font-weight: 700; }
.code-cursor-line { color: var(--code-accent); }
.code-cli-footer { border-top: 1px solid rgba(255,255,255,0.08); padding: 0.55rem 1.1rem 0.7rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.74rem; }
.code-cli-status { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.code-cli-hints { color: var(--code-muted); white-space: normal; overflow-wrap: anywhere; margin-top: 0.2rem; }
.code-cli-body .code-tl { display: block; min-height: 1.55em; flex: 0 0 auto; }
.code-caret { color: var(--code-accent); animation: code-blink 0.9s steps(1) infinite; }
@keyframes code-blink { 50% { opacity: 0; } }

/* GitHub section: two linked cards. */
.code-gh-card { display: flex; flex-direction: column; text-decoration: none; color: var(--code-ink); transition: border-color .2s ease, transform .2s ease; }
.code-gh-card:hover { border-color: rgba(10,132,255,0.55); transform: translateY(-2px); }
.code-gh-card h3 { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1rem; }
.code-gh-card p { margin: 0 0 1rem; }
.code-gh-link { margin-top: auto; color: var(--code-accent); font-weight: 600; font-size: 0.92rem; }

/* Spark logo: only the bulb filament glows. The glow is a blended layer over the
   bulb's measured box (x 25–48%, y 18–86% of the logo), so the grey wordmark stays still. */
.code-spark-glow { position: relative; display: inline-block; line-height: 0; }
.code-spark-glow::after {
    content: "";
    position: absolute;
    left: 25%; top: 18%; width: 23%; height: 68%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 214, 10, 0.95), rgba(255, 214, 10, 0.35) 55%, transparent 80%);
    mix-blend-mode: screen;
    filter: blur(3px);
    pointer-events: none;
    animation: code-filament 2.8s ease-in-out infinite;
}
@keyframes code-filament {
    0%, 100% { opacity: 0.55; transform: scale(0.92); }
    50%      { opacity: 1;    transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .code-spark-glow::after { animation: none; opacity: 0.8; }
    .code-caret { animation: none; }
}

/* Remote: a laptop and a phone, both off until the story starts. Stacks on small screens. */
.code-remote-stage { display: grid; grid-template-columns: 1fr auto 0.62fr; gap: 1.8rem; align-items: center; margin-top: 2.2rem; }

/* Laptop: lid with a bezel and a hinge base. */
.code-laptop { width: 100%; max-width: 40rem; justify-self: center; }
.code-laptop-screen { background: #0b0d10; border: 1px solid #2c2c2e; border-radius: 12px 12px 6px 6px; padding: 0.5rem; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.code-laptop-screen { transition: background 0.5s ease, border-color 0.5s ease; }
.code-laptop-body .code-logout { color: #ffd60a; }
.code-laptop-bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0.2rem 0.45rem; font-size: 0.68rem; color: var(--code-muted); }
.code-laptop-bar span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255,255,255,0.14); }
.code-laptop-bar em { margin-left: 0.5rem; font-style: normal; }
.code-laptop-body { background: #000; border-radius: 8px; padding: 0.9rem 1.2rem 1.1rem; height: 24rem; overflow: hidden; display: flex; flex-direction: column; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; line-height: 1.5; color: var(--code-ink); opacity: 0; transition: opacity 0.4s ease; }
.code-laptop-screen.is-on .code-laptop-body, html:not(.js) .code-laptop-body { opacity: 1; }
.code-laptop-base { height: 0.7rem; margin: 0 -4%; border-radius: 0 0 14px 14px; background: linear-gradient(#2c2c2e, #1c1c1e); }
.code-prompt { color: #30d158; }
.code-remote-out p { margin: 0.2rem 0; }
.code-remote-out { display: none; flex-direction: column; align-items: flex-start; }
.code-remote-out.is-on { display: flex; }
html:not(.js) .code-remote-out { display: flex; }
.code-qr { display: block; margin: 0.6rem 0; padding: 0.6rem; background: #101114; border: 1px solid #2c2c2e; border-radius: 10px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.code-qr.is-on, html:not(.js) .code-qr { opacity: 1; visibility: visible; }
.code-qr-grid { position: relative; width: min(11rem, 50vw); aspect-ratio: 1; }
.code-qr-grid i { position: absolute; width: calc(100% / 33); height: calc(100% / 33); left: calc(var(--c) * 100% / 33); top: calc(var(--r) * 100% / 33); background: #f2f2f7; opacity: 0; transform: scale(0.4); transition: opacity 0.12s ease, transform 0.12s ease; }
.code-qr-grid i.is-on, html:not(.js) .code-qr-grid i { opacity: 1; transform: none; }
.code-remote-pair { margin-top: 0.2rem; }
/* Once a phone attaches the QR block is replaced by this line, mirroring 0.12.1. */
.code-remote-connected { display: none; flex-direction: column; }
.code-remote-connected p { margin: 0.2rem 0; }
.code-remote-connected.is-on { display: flex; }
/* The live status line the computer keeps at the bottom of the screen. */
.code-laptop-status { margin-top: auto; padding-top: 0.8rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; color: #8e8e93; font-size: 0.72rem; }
.code-laptop-dot { width: 0.45rem; height: 0.45rem; flex: none; border-radius: 50%; background: #3a3a3c; }
.code-laptop-dot.is-on { background: #30d158; box-shadow: 0 0 6px rgba(48,209,88,0.7); }
.code-laptop-dot.is-working { background: #0a84ff; box-shadow: 0 0 6px rgba(10,132,255,0.7); animation: code-pulse 1.4s ease-in-out infinite; }
.code-laptop-sep { color: #3a3a3c; }
@keyframes code-pulse { 50% { opacity: 0.35; } }
.code-remote-cmd { color: var(--code-ink); }
.code-laptop-body .code-caret { color: #29c8f2; animation: code-blink 0.9s steps(1) infinite; }
.code-caret[hidden] { display: none; }

/* Link between the two: a thin beam with a label. */
.code-remote-link { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--code-muted); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.code-remote-link-line { position: relative; display: block; width: 2px; height: 4rem; background: linear-gradient(var(--code-accent), transparent); border-radius: 2px; }
.code-remote-link-line::after { content: ""; position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #29c8f2; box-shadow: 0 0 10px #29c8f2; animation: code-scan-y 1.8s ease-in-out infinite; }
@keyframes code-scan-y { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes code-scan-x { 0% { left: 0; top: 50%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; top: 50%; opacity: 0; } }

/* Phone: a sealed body, a notch, and a screen that is black until it wakes. */
.code-phone { width: 15.5rem; justify-self: center; padding: 0.7rem; border-radius: 16px; background: #0b0d10; border: 1px solid #2c2c2e; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.code-phone-screen { position: relative; background: #000; border-radius: 12px; overflow: hidden; height: 25rem; border: 1px solid #1c1c1e; }
.code-phone-off { position: absolute; inset: 0; background: #000; }
.code-phone-on { position: absolute; inset: 0; display: flex; flex-direction: column; background: #000; opacity: 0; transition: opacity 0.6s ease; }
.code-phone-on.is-on, html:not(.js) .code-phone-on { opacity: 1; }
.code-phone-head { background: rgba(0,0,0,.92); border-bottom: 1px solid #38383a; padding: 0.7rem 0.8rem; }
.code-phone-logo { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.6rem; letter-spacing: 0.14em; color: var(--code-muted); }
.code-phone-titlerow { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem; font-size: 0.82rem; }
.code-phone-project { font-weight: 700; color: var(--code-ink); }
.code-phone-model { font: inherit; font-size: 0.74rem; color: #0a84ff; background: none; border: 1px solid #38383a; border-radius: 10px; padding: 0.1rem 0.5rem; cursor: default; }
.code-phone-model::after { content: " ›"; color: #8e8e93; }
.code-phone-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #3a3a3c; margin-left: auto; transition: background 0.3s ease, box-shadow 0.3s ease; }
.code-phone-dot.is-on { background: #30d158; box-shadow: 0 0 8px #30d158; }
.code-phone-dot.is-warn { background: #ffd60a; box-shadow: 0 0 8px #ffd60a; }
.code-phone-offline { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; flex: 1; text-align: center; padding: 1rem; color: #ffd60a; }
.code-phone-offline strong { font-size: 1rem; color: #f2f2f7; }
.code-phone-offline span { font-size: 0.78rem; color: #8e8e93; }
.code-phone-offline.is-on { display: flex; }
.code-phone-on.is-off { opacity: 0; transition: opacity 0.9s ease; }
.code-phone-log { flex: 1; padding: 0.7rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.55rem; overflow: hidden; }
.code-phone-log > * { opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s ease; }
.code-phone-log > .is-on, html:not(.js) .code-phone-log > * { opacity: 1; transform: none; }
/* Transcript: no bubbles. You right in the info colour, the agent left in ink. */
.code-phone-turn { display: flex; flex-direction: column; max-width: 88%; }
.code-phone-you { align-self: flex-end; align-items: flex-end; }
.code-phone-agent { align-self: flex-start; align-items: flex-start; }
.code-phone-who { font-size: 0.62rem; font-weight: 700; color: #8e8e93; margin-bottom: 0.1rem; }
.code-phone-you .code-phone-who { color: #0a84ff; }
.code-phone-text { font-size: 0.8rem; line-height: 1.35; color: #f2f2f7; }
.code-phone-you .code-phone-text { color: #64d2ff; text-align: right; }
.code-phone-act { align-self: center; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.66rem; color: #30d158; text-align: center; }
.code-phone-status { display: none; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem 0; font-size: 0.66rem; color: #8e8e93; }
.code-phone-status.is-on { display: flex; }
.code-phone-spinner { width: 0.7rem; height: 0.7rem; flex: none; border-radius: 50%; border: 2px solid #2c2c2e; border-top-color: #0a84ff; animation: code-spin 0.8s linear infinite; }
@keyframes code-spin { to { transform: rotate(360deg); } }
.code-phone-composer { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.7rem; border-top: 1px solid #38383a; }
.code-phone-field { flex: 1; border: 1px solid #38383a; border-radius: 20px; padding: 0.4rem 0.7rem; color: #8e8e93; font-size: 0.74rem; }
.code-phone-round { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; }
.code-phone-round svg { width: 0.85rem; height: 0.85rem; }
.code-phone-round-send { background: #0a84ff; color: #fff; }
.code-phone-round-stop { background: #2c2c2e; color: #f2f2f7; display: none; }
.code-phone-composer.is-working .code-phone-round-stop { display: grid; }
.code-phone-composer.is-working .code-phone-round-send { display: none; }

@media (max-width: 860px) {
    .code-remote-stage { grid-template-columns: 1fr; }
    .code-remote-link { flex-direction: row; }
    .code-remote-link-line { width: 3rem; height: 2px; background: linear-gradient(90deg, var(--code-accent), transparent); }
    .code-remote-link-line::after { left: 0; top: 50%; margin-left: 0; margin-top: -3px; animation-name: code-scan-x; }
    .code-laptop-body { height: 22rem; font-size: 0.7rem; padding: 0.8rem; }
    .code-qr { margin: 0.4rem 0; padding: 0.5rem; }
    .code-remote-out p { margin: 0.1rem 0; }
    .code-qr-grid { width: min(8rem, 60vw); }
}
@media (prefers-reduced-motion: reduce) {
    .code-laptop-body, .code-phone-on, .code-phone-log > *, .code-qr-grid i { transition: none; }
    .code-remote-link-line::after { animation: none; opacity: 0.7; }
    .code-phone-spinner, .code-laptop-dot.is-working { animation: none; }
}
/* Providers: a cycling model line and a logo wall. */
.code-model-line { display: flex; align-items: baseline; gap: 0.6rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; margin: 1.6rem 0 1.4rem; }
.code-model-label { color: var(--code-muted); }
.code-model-value { color: #ffd60a; font-weight: 700; min-width: 16ch; }
.code-caret-static { color: var(--code-accent); animation: code-blink 0.9s steps(1) infinite; }
.code-provider-wall { list-style: none; padding: 0 0 0.5rem; margin: 0; display: flex; gap: 0.6rem; overflow-x: auto; }
@media (max-width: 860px) {
    .code-provider-wall { flex-wrap: wrap; justify-content: center; overflow-x: visible; }
}
.code-provider { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0.6rem 0.7rem; border: 1px solid var(--code-glass-edge); border-radius: 16px; background: var(--code-glass); }
.code-provider-chip { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; background: transparent; }
.code-provider-chip-dark { background: #0b0d10; border: 1px solid rgba(255,255,255,0.32); }
.code-provider-spark .code-provider-chip { width: auto; height: auto; }
.code-provider-spark .code-provider-chip img { width: 3.6rem; height: auto; }
.code-provider-chip img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.code-provider-wordmark { display: grid; place-items: center; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; font-size: 0.78rem; color: var(--code-ink); letter-spacing: 0.02em; white-space: nowrap; }
.code-provider-spark { border-color: rgba(10,132,255,0.5); }

/* Helpers: the four sub-agents, and the one-line result a student sees unfold. */
.code-helpers { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; gap: 0.55rem; }
.code-helpers li { display: flex; gap: 0.9rem; align-items: baseline; }
.code-helper-name { flex: 0 0 6.5rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; color: var(--code-ink); }
/* The demo is short; don't inherit the 22rem floor the hero banner needs. */
.code-helper-demo { align-self: start; }
.code-terminal pre.code-helper-log { min-height: 0; padding: 1.2rem 1.3rem 1.4rem; font-size: 0.82rem; line-height: 1.8; white-space: pre-wrap; }
.code-helpers-note { margin-top: 1.2rem; }
/* Hanging indent, not flex: a flex row makes the inline <code> chips collide
   with the text on narrow screens. This wraps like prose and keeps the tick. */
.code-see { list-style: none; padding: 0; margin: 0.7rem 0 1rem; display: grid; gap: 0.5rem; color: var(--code-muted); }
.code-see li { padding-left: 1.5rem; text-indent: -1.5rem; }
.code-see li::before { content: "✓ "; color: var(--code-ok); font-weight: 700; }
@media (max-width: 600px) { .code-helper-name { flex-basis: 5.5rem; } }

/* Helpers showcase: the fan-out picture — one assistant, four fresh helpers. */
.code-fan-wrap { padding: 1.4rem 1.5rem 1.2rem; margin-bottom: 1.2rem; }
.code-fan { display: block; width: 100%; height: auto; }
.code-fan-box { fill: rgba(255,255,255,0.045); stroke: rgba(255,255,255,0.16); stroke-width: 1.4; }
.code-fan-assistant { fill: rgba(10,132,255,0.09); stroke: rgba(10,132,255,0.55); }
.code-fan-title { fill: var(--code-ink); font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; font-size: 18px; font-weight: 700; }
.code-fan-sub { fill: var(--code-muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.code-fan-name { fill: var(--code-ink); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; font-weight: 700; }
.code-fan-track { fill: rgba(255,255,255,0.09); }
.code-fan-fill { fill: #0a84ff; }
.code-fan-out { fill: none; stroke: rgba(10,132,255,0.5); stroke-width: 2; marker-end: url(#code-fan-out-tip); }
.code-fan-back { fill: none; stroke: rgba(48,209,88,0.7); stroke-width: 2; stroke-dasharray: 7 5; marker-end: url(#code-fan-back-tip); }
.code-fan-lbl { fill: var(--code-muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.03em; }
.code-fan-lbl-ok { fill: var(--code-ok); }
.code-fan-cap { margin: 1rem 0 0; font-size: 0.9rem; max-width: 52rem; }

/* Momentum: a symbol per release, so the rail scans at a glance. */
.code-rail { display: flex; flex-direction: column; }
.code-rail-icon { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 11px; background: rgba(10,132,255,0.12); border: 1px solid rgba(10,132,255,0.4); color: #6cb2ff; margin-bottom: 0.7rem; }
.code-rail-icon svg { width: 1.25rem; height: 1.25rem; }