/* ==========================================================================
   ReTibe landing v2
   Ported from the Claude Design artboards (docs/designCClode/ReTibe Landing*).
   One responsive sheet: the desktop artboard is the wide layout, the mobile
   artboard is the <=860px layout. Tokens below are lifted from the mockup.
   ========================================================================== */

:root {
    /* Surfaces, darkest to lightest */
    --v2-bg: #080B12;
    --v2-bg-alt: #0A0E16;
    --v2-surface: #0C1017;
    --v2-surface-2: #0E1219;
    --v2-surface-3: #11151F;
    --v2-surface-4: #141A26;

    /* Lines */
    --v2-line: #1E2535;
    --v2-line-soft: #121824;
    --v2-line-dim: #1A2130;
    --v2-line-strong: #242C3E;
    --v2-line-hover: #33405C;

    /* Type */
    --v2-text: #E8ECF5;
    --v2-text-2: #9AA4BA;
    --v2-text-3: #8A93A8;
    --v2-text-4: #6F7891;

    /* Brand */
    --v2-primary: #667eea;
    --v2-primary-edge: #7B8CF0;
    --v2-primary-hover: #7382ee;
    --v2-primary-soft: #9BA9F5;
    --v2-primary-link: #A5B0FF;
    --v2-primary-bright: #8C9DFF;
    --v2-violet: #764ba2;

    /* Status */
    --v2-green: #a6e3a1;
    --v2-green-strong: #10b981;
    --v2-green-text: #7BE3B5;
    --v2-amber: #f9e2af;
    --v2-red: #f38ba8;

    /* Terminal palette (Catppuccin-ish, as in the mockup) */
    --v2-term-bg: #1e1e2e;
    --v2-term-bar: #181825;
    --v2-term-chip: #313244;
    --v2-term-chip-edge: #45475a;
    --v2-term-text: #cdd6f4;
    --v2-term-dim: #8891a8;
    --v2-term-dimmer: #6c7086;
    --v2-term-blue: #89b4fa;

    --v2-shell: 1240px;
    --v2-radius: 14px;
}

/* --- Reset scoped to the page -------------------------------------------
   Wrapped in :where() so the reset carries ZERO specificity. Written plainly
   as `body.v2 *` it scores 0,0,1,1 and silently beats every single-class rule
   below it, which collapses all margins and padding on the page.
   ------------------------------------------------------------------------ */

:where(body.v2 *), :where(body.v2 *::before), :where(body.v2 *::after) {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.v2 {
    background: var(--v2-bg);
    color: var(--v2-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
    overflow-x: hidden;
    line-height: 1.5;
}

/* Element defaults also go through :where() — `body.v2 a` would otherwise beat
   .v2-btn--primary and repaint every button link in link-blue. */
:where(body.v2 a) { color: var(--v2-primary-link); text-decoration: none; transition: color .16s ease; }
:where(body.v2 a:hover) { color: #C9D0FF; }
:where(body.v2 img) { display: block; max-width: 100%; }
:where(body.v2 button) { font-family: inherit; }
:where(body.v2 h1, body.v2 h2, body.v2 h3, body.v2 h4) { font-weight: 700; line-height: 1.2; }
body.v2 ::selection { background: var(--v2-primary); color: #fff; }

body.v2 :focus-visible {
    outline: 2px solid var(--v2-primary-bright);
    outline-offset: 2px;
    border-radius: 6px;
}

@keyframes v2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes v2-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes v2-rise  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes v2-spin  { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    body.v2 *, body.v2 *::before, body.v2 *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Layout primitives --------------------------------------------------- */

.v2-shell { max-width: var(--v2-shell); margin: 0 auto; padding: 0 24px; }
.v2-section { padding: 90px 24px; }
.v2-section--alt { background: var(--v2-bg-alt); border-top: 1px solid var(--v2-line-soft); border-bottom: 1px solid var(--v2-line-soft); }
.v2-section--flush { padding-top: 0; }
.v2-section[id] { scroll-margin-top: 84px; }

.v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--v2-text-3);
}

.v2-eyebrow i,
.v2-eyebrow .v2-dot {
    width: 7px; height: 7px; border-radius: 2px;
    background: var(--v2-green); flex-shrink: 0;
}

.v2-h2 {
    font-size: clamp(28px, 3.9vw, 42px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: 18px;
    max-width: 22ch;
}

.v2-lede {
    font-size: 17px;
    line-height: 1.65;
    color: var(--v2-text-2);
    max-width: 68ch;
}

/* --- Buttons ------------------------------------------------------------- */

.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 22px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
    white-space: nowrap;
}

.v2-btn--primary { background: var(--v2-primary); border-color: var(--v2-primary-edge); color: #fff; }
.v2-btn--primary:hover { background: var(--v2-primary-hover); color: #fff; }

.v2-btn--ghost { background: var(--v2-surface-3); border-color: var(--v2-line); color: var(--v2-text); }
.v2-btn--ghost:hover { background: #161B28; border-color: var(--v2-line-strong); color: #fff; }

.v2-btn i { font-size: 13px; }

/* --- Header -------------------------------------------------------------- */

.v2-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(8, 11, 18, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid #161C29;
}

.v2-header__bar {
    max-width: var(--v2-shell);
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.v2-logo { display: flex; align-items: center; gap: 10px; color: var(--v2-text); flex-shrink: 0; }
.v2-logo:hover { color: var(--v2-text); }
.v2-logo__mark {
    width: 26px; height: 26px; border-radius: 8px;
    background: linear-gradient(135deg, var(--v2-primary) 0%, var(--v2-violet) 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: #fff;
}
.v2-logo__word { font-size: 17px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }

.v2-nav { display: flex; align-items: center; gap: 26px; flex: 1; }
.v2-nav a { font-size: 14px; font-weight: 500; color: var(--v2-text-2); white-space: nowrap; }
.v2-nav a:hover { color: var(--v2-text); }

.v2-header__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
/* :not(.v2-btn) matters — a bare `.v2-header__actions a` rule scores 0,0,2,0
   and beats .v2-btn--primary, which renders the header CTA in muted grey and
   makes it read as disabled. */
.v2-header__actions a:not(.v2-btn) { font-size: 14px; font-weight: 500; color: var(--v2-text-2); }
.v2-header__actions a:not(.v2-btn):hover { color: var(--v2-text); }
.v2-header__actions .v2-btn { padding: 9px 16px; font-size: 14px; border-radius: 9px; }

/* Hidden at every width; the mobile query turns it into a drawer and only
   .is-open reveals it. Without this the markup renders as a second row of
   links under the header on desktop. */
.v2-drawer { display: none; }

.v2-burger {
    display: none;
    width: 40px; height: 40px;
    background: transparent; border: 1px solid var(--v2-line);
    border-radius: 9px; color: var(--v2-text);
    cursor: pointer; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* --- Hero ---------------------------------------------------------------- */

.v2-hero { position: relative; padding: 72px 24px 56px; overflow: hidden; }

.v2-hero__glow {
    position: absolute; top: -280px; left: 50%;
    transform: translateX(-50%);
    width: 1200px; height: 600px;
    background: radial-gradient(ellipse at center, rgba(102, 126, 234, .20) 0%, rgba(102, 126, 234, 0) 65%);
    pointer-events: none;
}

.v2-hero__grid {
    position: relative;
    max-width: var(--v2-shell);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 56px;
    align-items: center;
}

.v2-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 15px; border-radius: 100px;
    background: linear-gradient(135deg, var(--v2-primary) 0%, var(--v2-violet) 100%);
    margin-bottom: 22px;
    font-size: 13px; font-weight: 600; color: #fff;
}
.v2-badge i { font-size: 12px; }

.v2-hero h1 {
    font-size: clamp(36px, 4.6vw, 58px);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -.035em;
    margin-bottom: 22px;
}

.v2-hero h1 .v2-grad {
    background: linear-gradient(135deg, var(--v2-primary-soft) 0%, #C4A8F0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.v2-hero__sub { font-size: 19px; line-height: 1.6; color: var(--v2-text-2); max-width: 560px; margin-bottom: 32px; }
.v2-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.v2-hero__cta .v2-btn { font-size: 16px; padding: 14px 24px; }

.v2-hero__jump {
    display: inline-flex; align-items: center; gap: 11px; flex-wrap: wrap;
    padding: 13px 18px; border-radius: 12px;
    background: rgba(166, 227, 161, .06);
    border: 1px solid rgba(166, 227, 161, .22);
    margin-bottom: 18px;
    transition: border-color .16s ease, background .16s ease;
}
.v2-hero__jump:hover { background: rgba(166, 227, 161, .1); border-color: rgba(166, 227, 161, .4); }
.v2-hero__jump .v2-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v2-green); animation: v2-pulse 2s ease-in-out infinite; flex-shrink: 0; }
.v2-hero__jump strong { font-size: 14.5px; font-weight: 600; color: var(--v2-text); }
.v2-hero__jump span.v2-muted { font-size: 14px; color: var(--v2-text-3); }
.v2-hero__jump i { font-size: 11px; color: var(--v2-primary-link); }

.v2-hero__note { font-size: 13.5px; color: var(--v2-text-3); }

/* --- Terminal / IDE mock ------------------------------------------------- */

.v2-term {
    border-radius: var(--v2-radius);
    overflow: hidden;
    background: var(--v2-term-bg);
    font-family: 'JetBrains Mono', 'Monaco', monospace;
    box-shadow: 0 28px 80px rgba(102, 126, 234, .22), 0 0 0 1px rgba(255, 255, 255, .05);
}

.v2-term__bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 15px; background: var(--v2-term-bar);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.v2-term__lights { display: flex; gap: 6px; }
.v2-term__lights span { width: 10px; height: 10px; border-radius: 50%; }
.v2-term__lights span:nth-child(1) { background: var(--v2-red); }
.v2-term__lights span:nth-child(2) { background: var(--v2-amber); }
.v2-term__lights span:nth-child(3) { background: var(--v2-green); }
.v2-term__title { font-size: 11.5px; color: var(--v2-term-dim); font-family: 'Inter', sans-serif; margin-left: 6px; }
.v2-term__state { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--v2-term-dim); font-family: 'Inter', sans-serif; }
.v2-term__state .v2-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-green); animation: v2-pulse 2s ease-in-out infinite; }

.v2-term__body { padding: 18px 16px 14px; min-height: 150px; }

.v2-line { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; animation: v2-rise .28s ease both; }
.v2-tag {
    font-size: 11px; font-family: 'Inter', sans-serif; font-weight: 600;
    padding: 3px 8px; border-radius: 5px; flex-shrink: 0;
}
.v2-tag--you { color: #fff; background: var(--v2-primary); }
.v2-tag--agent { color: var(--v2-term-text); background: var(--v2-term-chip); }
.v2-line__text { font-size: 13px; line-height: 1.5; color: var(--v2-term-text); }

.v2-caret {
    display: inline-block; width: 7px; height: 1em;
    background: var(--v2-primary-bright); margin-left: 1px;
    vertical-align: text-bottom; animation: v2-caret 1s step-end infinite;
}

.v2-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.v2-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
    padding: 5px 10px; border-radius: 6px;
    animation: v2-rise .28s ease both;
    border: 1px solid var(--v2-line-strong); background: var(--v2-term-bar); color: var(--v2-term-dim);
}
.v2-chip i { font-size: 10px; }
.v2-chip--running { border-color: rgba(137, 180, 250, .35); background: rgba(137, 180, 250, .1); color: var(--v2-term-blue); }
.v2-chip--done { border-color: rgba(166, 227, 161, .3); background: rgba(166, 227, 161, .1); color: var(--v2-green); }
.v2-chip--warn { border-color: rgba(249, 226, 175, .35); background: rgba(249, 226, 175, .1); color: var(--v2-amber); }

.v2-term__label {
    padding: 7px 15px; font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .07em; color: var(--v2-term-dim);
    border-top: 1px solid rgba(255, 255, 255, .06);
    display: flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
}
.v2-term__label .v2-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-green); animation: v2-pulse 2s ease-in-out infinite; }
.v2-term__label span:last-child { margin-left: auto; text-transform: none; letter-spacing: 0; }

.v2-term__log { padding: 4px 15px 10px; min-height: 150px; font-size: 11.5px; line-height: 1.9; }
.v2-log-row { display: flex; align-items: center; gap: 8px; color: var(--v2-term-dim); animation: v2-rise .22s ease both; }
.v2-log-row .v2-log-time { color: #45475a; }
.v2-log-row .v2-log-ms { margin-left: auto; color: #45475a; }

.v2-term__progress { height: 3px; background: var(--v2-term-bar); }
.v2-term__progress > div { height: 100%; width: 0; background: var(--v2-primary); transition: width .25s linear; }

.v2-term__result {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 15px; font-size: 12px;
    background: var(--v2-term-bar); color: var(--v2-term-dimmer);
    border-top: 1px solid rgba(255, 255, 255, .06);
    font-family: 'Inter', sans-serif;
}
.v2-term__result.is-done { background: rgba(166, 227, 161, .12); color: var(--v2-green); }

/* --- Stat band ----------------------------------------------------------- */

.v2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.v2-stat { padding: 22px 24px; background: var(--v2-surface); border: 1px solid var(--v2-line-soft); border-radius: var(--v2-radius); }
.v2-stat__value { font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 6px; }
.v2-stat__label { font-size: 13.5px; line-height: 1.5; color: var(--v2-text-3); }

/* --- Comparison table ---------------------------------------------------- */

.v2-table { border: 1px solid var(--v2-line); border-radius: var(--v2-radius); overflow: hidden; margin: 34px 0; }
.v2-table__row { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; border-bottom: 1px solid var(--v2-line-soft); }
.v2-table__row:last-child { border-bottom: none; }
.v2-table__row > div { padding: 15px 20px; font-size: 14px; line-height: 1.5; color: var(--v2-text-2); }
.v2-table__row > div:first-child { color: var(--v2-text); font-weight: 600; }
.v2-table__row > div:last-child { color: var(--v2-text); background: rgba(102, 126, 234, .06); }
.v2-table__row--head { background: var(--v2-surface-2); }
.v2-table__row--head > div { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--v2-text-3); }
.v2-table__row--head > div:last-child { color: var(--v2-primary-soft); }

/* --- Generic card grids -------------------------------------------------- */

.v2-grid { display: grid; gap: 18px; }
.v2-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.v2-grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.v2-grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.v2-card {
    padding: 24px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    transition: border-color .18s ease;
}
.v2-card:hover { border-color: var(--v2-line-hover); }
.v2-card > i { font-size: 18px; color: var(--v2-primary-soft); margin-bottom: 14px; display: block; }
.v2-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.01em; }
.v2-card p { font-size: 14.5px; line-height: 1.6; color: var(--v2-text-3); }
.v2-card a { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; }

.v2-step__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.v2-step__icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(102, 126, 234, .14);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--v2-primary-soft); font-size: 15px; flex-shrink: 0;
}
.v2-step__no { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--v2-text-3); }

/* --- Screenshot gallery -------------------------------------------------- */

.v2-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.v2-shot { background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-radius); overflow: hidden; }
.v2-shot img { width: 100%; border-bottom: 1px solid var(--v2-line-soft); }
.v2-shot__cap { padding: 14px 18px; }
.v2-shot__cap b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.v2-shot__cap span { font-size: 13px; color: var(--v2-text-3); }

.v2-browser { border: 1px solid var(--v2-line); border-radius: var(--v2-radius); overflow: hidden; background: var(--v2-surface); }
.v2-browser__bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--v2-surface-2); border-bottom: 1px solid var(--v2-line-soft); }
.v2-browser__bar span.v2-dot3 { width: 9px; height: 9px; border-radius: 50%; background: var(--v2-line-strong); }
.v2-browser__url { margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--v2-text-3); }

/* --- Key/value pill row -------------------------------------------------- */

.v2-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.v2-pill {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 9px 14px; border-radius: 10px;
    background: var(--v2-surface-2); border: 1px solid var(--v2-line-soft);
    font-size: 13.5px; color: var(--v2-text-3);
}
.v2-pill strong { font-weight: 600; color: var(--v2-text); }

.v2-listline { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; font-size: 14.5px; line-height: 1.55; color: var(--v2-text-3); border-bottom: 1px solid var(--v2-line-soft); }
.v2-listline:last-child { border-bottom: none; }
.v2-listline i { color: var(--v2-primary-soft); font-size: 14px; margin-top: 3px; flex-shrink: 0; width: 16px; }
.v2-listline strong { color: var(--v2-text); font-weight: 600; }

/* --- Pricing ------------------------------------------------------------- */

.v2-pricing__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.v2-toggle { display: inline-flex; padding: 4px; background: var(--v2-surface-2); border: 1px solid var(--v2-line); border-radius: 10px; }
.v2-toggle button {
    font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 8px;
    border: none; background: transparent; color: var(--v2-text-3); cursor: pointer;
    transition: background .15s ease, color .15s ease; white-space: nowrap;
}
.v2-toggle button[aria-pressed="true"] { background: var(--v2-primary); color: #fff; }

.v2-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.v2-plan { position: relative; padding: 28px 24px; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 16px; display: flex; flex-direction: column; }
.v2-plan--featured { border-color: rgba(102, 126, 234, .45); background: var(--v2-surface-2); }
.v2-plan__flag {
    position: absolute; top: -11px; left: 24px;
    padding: 4px 12px; border-radius: 100px;
    background: var(--v2-primary); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.v2-plan__name { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.v2-plan__pitch { font-size: 13.5px; color: var(--v2-text-3); margin-bottom: 20px; min-height: 2.8em; }
.v2-plan__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; }
.v2-plan__price b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
/* Direct child only: the price digits live in a <span> inside the <b>, and a
   bare descendant selector shrank them to the period-label size. */
.v2-plan__price > span { font-size: 13.5px; color: var(--v2-text-3); }
.v2-plan__price b > span { font: inherit; color: inherit; }
.v2-plan .v2-btn { width: 100%; margin-bottom: 20px; }
.v2-plan__feat { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--v2-text-3); padding: 7px 0; }
.v2-plan__feat i { color: var(--v2-green); font-size: 11px; margin-top: 4px; flex-shrink: 0; }

/* --- Ask the agent ------------------------------------------------------- */

.v2-ask { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 26px; align-items: start; }

.v2-ask__panel {
    background: var(--v2-term-bg);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.v2-ask__bar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; background: var(--v2-term-bar);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--v2-term-dim);
}
.v2-ask__bar i { color: var(--v2-primary-soft); }
.v2-ask__status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; }
.v2-ask__status .v2-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-green); animation: v2-pulse 2s ease-in-out infinite; }
.v2-ask__status.is-error .v2-live-dot { background: var(--v2-red); animation: none; }

.v2-ask__log {
    flex: 1;
    min-height: 330px;
    max-height: 520px;
    overflow-y: auto;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--v2-term-chip) transparent;
}
.v2-ask__log::-webkit-scrollbar { width: 8px; }
.v2-ask__log::-webkit-scrollbar-thumb { background: var(--v2-term-chip); border-radius: 4px; }

.v2-msg { display: flex; gap: 11px; align-items: flex-start; animation: v2-rise .3s ease both; }
.v2-msg__body { min-width: 0; flex: 1; }
.v2-msg__text { font-size: 13.5px; line-height: 1.62; color: var(--v2-term-text); white-space: pre-wrap; word-wrap: break-word; }
.v2-msg--you .v2-msg__text { color: #fff; }

.v2-thinking { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--v2-term-dim); font-family: 'JetBrains Mono', monospace; }
.v2-thinking i { animation: v2-spin 1s linear infinite; }

.v2-ask__presets { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.v2-preset {
    font-size: 12.5px; font-weight: 500;
    padding: 8px 13px; border-radius: 100px; cursor: pointer;
    background: var(--v2-term-chip); border: 1px solid var(--v2-term-chip-edge); color: var(--v2-term-text);
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.v2-preset:hover { background: #3b3d52; }
.v2-preset--warn { background: rgba(243, 139, 168, .08); border-color: rgba(243, 139, 168, .3); color: var(--v2-red); }
.v2-preset--warn:hover { background: rgba(243, 139, 168, .16); }
.v2-preset[disabled] { opacity: .45; cursor: default; }

.v2-ask__compose { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(255, 255, 255, .06); background: var(--v2-term-bar); }
.v2-ask__compose textarea {
    flex: 1; resize: none;
    background: var(--v2-term-bg); border: 1px solid var(--v2-term-chip-edge); border-radius: 10px;
    padding: 11px 13px;
    font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.5; color: var(--v2-term-text);
}
.v2-ask__compose textarea::placeholder { color: var(--v2-term-dimmer); }
.v2-ask__compose textarea:focus { outline: none; border-color: var(--v2-primary); }
.v2-ask__send {
    width: 44px; flex-shrink: 0;
    background: var(--v2-primary); border: 1px solid var(--v2-primary-edge); border-radius: 9px;
    color: #fff; cursor: pointer; transition: background .15s ease;
}
.v2-ask__send:hover { background: var(--v2-primary-hover); }
.v2-ask__send[disabled] { opacity: .5; cursor: default; }

.v2-ask__side { display: flex; flex-direction: column; gap: 18px; }
.v2-prompts { padding: 22px 24px; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-radius); }
.v2-prompts__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.v2-prompts__head h3 { font-size: 16px; font-weight: 700; }
.v2-prompts__head i { font-size: 15px; }
.v2-prompts__head i.ok { color: var(--v2-green); }
.v2-prompts__head i.bad { color: var(--v2-red); }

.v2-quote {
    padding: 13px 16px; border-radius: 9px; margin-bottom: 9px;
    font-size: 13.5px; line-height: 1.55; color: var(--v2-text-2);
    background: rgba(166, 227, 161, .05); border-left: 2px solid rgba(166, 227, 161, .45);
}
.v2-quote:last-child { margin-bottom: 0; }
.v2-quote--bad { background: rgba(243, 139, 168, .05); border-left-color: rgba(243, 139, 168, .45); }
.v2-prompts > p { font-size: 13.5px; line-height: 1.6; color: var(--v2-text-3); margin-top: 14px; }

.v2-convert { padding: 24px; background: var(--v2-surface-2); border: 1px solid rgba(102, 126, 234, .3); border-radius: var(--v2-radius); }
.v2-convert p { font-size: 14px; line-height: 1.6; color: var(--v2-text-2); margin-bottom: 18px; }
.v2-convert .v2-btn { width: 100%; }
.v2-convert > a:last-child { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; font-weight: 600; }

/* --- Try it (real runner) ------------------------------------------------ */

.v2-try { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; align-items: start; }
.v2-try__col { display: flex; flex-direction: column; gap: 18px; }

.v2-panel { padding: 24px; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-radius); }
.v2-panel__head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.v2-panel__head h3 { font-size: 16px; font-weight: 700; }
.v2-panel__head i { color: var(--v2-primary-soft); font-size: 15px; }
.v2-panel__head .v2-state { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--v2-text-3); }

.v2-field { display: block; font-size: 13px; font-weight: 500; color: var(--v2-text-2); margin-bottom: 8px; }
.v2-input {
    width: 100%; padding: 13px 15px;
    background: var(--v2-bg); border: 1px solid var(--v2-line); border-radius: 10px;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--v2-text);
}
.v2-input::placeholder { color: var(--v2-text-3); }
.v2-input:focus { outline: none; border-color: var(--v2-primary); }

.v2-check { display: flex; align-items: center; gap: 10px; margin: 16px 0 20px; font-size: 14px; color: var(--v2-text-2); cursor: pointer; }
.v2-check input { width: 17px; height: 17px; accent-color: var(--v2-primary); cursor: pointer; }

.v2-panel .v2-btn { width: 100%; padding: 15px; font-size: 15px; border-radius: 11px; }
.v2-hint { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--v2-text-3); }

.v2-console {
    min-height: 210px; max-height: 320px; overflow-y: auto;
    padding: 15px; border-radius: 10px;
    background: #05070C; border: 1px solid var(--v2-line-soft);
    font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.85;
}
.v2-console div { animation: v2-rise .2s ease both; word-break: break-word; }
.v2-console .ok { color: var(--v2-green-text); }
.v2-console .warn { color: var(--v2-amber); }
.v2-console .bad { color: var(--v2-red); }
.v2-console .dim { color: var(--v2-text-3); }

.v2-preview { border: 1px solid var(--v2-line-soft); border-radius: 10px; overflow: hidden; background: #05070C; }
.v2-preview__bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--v2-surface-2); border-bottom: 1px solid var(--v2-line-soft); }
.v2-preview__bar .v2-dot3 { width: 8px; height: 8px; border-radius: 50%; background: var(--v2-line-strong); }
.v2-preview__url {
    flex: 1; margin-left: 6px; padding: 5px 11px; border-radius: 6px;
    background: var(--v2-bg); border: 1px solid var(--v2-line-soft);
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--v2-text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-preview__stage {
    min-height: 380px;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; position: relative;
}
.v2-preview__stage img { width: 100%; height: auto; border-radius: 4px; }
.v2-preview__idle { text-align: center; color: var(--v2-text-3); }
.v2-preview__idle i { font-size: 26px; margin-bottom: 14px; display: block; opacity: .5; }
.v2-preview__idle span { font-size: 13.5px; }

.v2-score {
    display: flex; align-items: center; gap: 10px;
    margin-top: 16px; padding: 13px 16px; border-radius: 11px;
    background: var(--v2-bg-alt); border: 1px solid var(--v2-line-dim);
    color: var(--v2-text-3); font-size: 13.5px;
}
.v2-score.is-done { background: rgba(166, 227, 161, .1); border-color: rgba(166, 227, 161, .3); color: var(--v2-green-text); }
.v2-score.is-bad { background: rgba(243, 139, 168, .08); border-color: rgba(243, 139, 168, .3); color: var(--v2-red); }

/* --- FAQ ----------------------------------------------------------------- */

.v2-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; }
.v2-faq__item { padding: 24px; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-radius); }
.v2-faq__item h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.v2-faq__item p { font-size: 14.5px; line-height: 1.65; color: var(--v2-text-3); }
.v2-faq__item code { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--v2-primary-soft); background: rgba(102, 126, 234, .12); padding: 1px 6px; border-radius: 5px; }

/* --- Closing CTA --------------------------------------------------------- */

.v2-close { position: relative; padding: 100px 24px; overflow: hidden; border-top: 1px solid var(--v2-line-soft); text-align: center; }
.v2-close__glow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 900px; height: 500px;
    background: radial-gradient(ellipse at center, rgba(102, 126, 234, .16) 0%, rgba(102, 126, 234, 0) 68%);
    pointer-events: none;
}
.v2-close__inner { position: relative; max-width: 700px; margin: 0 auto; }
.v2-close h2 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 18px; }
.v2-close p { font-size: 17px; line-height: 1.6; color: var(--v2-text-2); margin-bottom: 30px; }
.v2-close__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* --- Footer -------------------------------------------------------------- */

.v2-footer { padding: 60px 24px 34px; border-top: 1px solid var(--v2-line-soft); background: var(--v2-bg-alt); }
.v2-footer__grid { max-width: var(--v2-shell); margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.v2-footer__about p { font-size: 13.5px; line-height: 1.65; color: var(--v2-text-3); margin-top: 14px; max-width: 34ch; }
.v2-footer__col b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 14px; letter-spacing: .02em; }
.v2-footer__col a { display: block; font-size: 13.5px; color: var(--v2-text-3); padding: 5px 0; }
.v2-footer__col a:hover { color: var(--v2-text); }
.v2-footer__base { max-width: var(--v2-shell); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--v2-line-soft); font-size: 13px; color: var(--v2-text-3); }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1080px) {
    .v2-ask { grid-template-columns: 1fr; }
    .v2-try { grid-template-columns: 1fr; }
    .v2-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
    .v2-section { padding: 64px 20px; }
    .v2-shell { padding: 0 20px; }
    .v2-hero { padding: 48px 20px 40px; }
    .v2-hero__grid { grid-template-columns: 1fr; gap: 36px; }
    .v2-hero__sub { font-size: 17px; }

    .v2-nav, .v2-header__actions a { display: none; }
    .v2-burger { display: inline-flex; }
    .v2-header__bar { gap: 12px; justify-content: space-between; }
    .v2-header__actions { margin-left: auto; }

    /* Drawer opened by the burger */
    .v2-drawer {
        position: fixed; inset: 64px 0 auto 0; z-index: 49;
        background: rgba(8, 11, 18, .98);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--v2-line);
        padding: 12px 20px 20px;
        display: none;
        flex-direction: column;
    }
    .v2-drawer.is-open { display: flex; }
    .v2-drawer a {
        display: flex; align-items: center;
        min-height: 44px; padding: 4px 0;
        font-size: 15px; font-weight: 500; color: var(--v2-text-2);
        border-bottom: 1px solid var(--v2-line-soft);
    }
    .v2-drawer a:last-child { border-bottom: none; }

    .v2-table__row { grid-template-columns: 1fr; gap: 0; }
    .v2-table__row > div { padding: 11px 16px; }
    .v2-table__row > div:first-child { padding-top: 15px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--v2-text-3); }
    .v2-table__row > div:nth-child(2)::before { content: 'Playwright MCP — '; color: var(--v2-text-3); }
    .v2-table__row > div:last-child { padding-bottom: 15px; }
    .v2-table__row > div:last-child::before { content: 'ReTibe MCP — '; color: var(--v2-primary-soft); }
    .v2-table__row--head { display: none; }

    .v2-pricing__head { flex-direction: column; align-items: stretch; }
    .v2-toggle { width: 100%; }
    .v2-toggle button { flex: 1; }

    /* Tap targets stay at 44px on touch */
    .v2-burger { width: 44px; height: 44px; }
    .v2-preset { min-height: 44px; padding: 12px 16px; font-size: 13px; }
    .v2-toggle button { min-height: 44px; }
    .v2-ask__send { width: 48px; }
    .v2-ask__log { min-height: 280px; max-height: 60vh; }
    .v2-preview__stage { min-height: 260px; }

    .v2-footer__grid { grid-template-columns: 1fr; gap: 28px; }
    .v2-close { padding: 72px 20px; }
}

@media (max-width: 480px) {
    .v2-hero h1 { font-size: 34px; }
    .v2-hero__cta { flex-direction: column; align-items: stretch; }
    .v2-hero__cta .v2-btn { width: 100%; }
    .v2-close__cta { flex-direction: column; }
    .v2-close__cta .v2-btn { width: 100%; }
    .v2-stat__value { font-size: 24px; }
}

/* Off-screen controls that universal-webtest.js owns. Not display:none —
   the runner reads .value and toggles .disabled, which must keep working. */
.v2-proxy {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Language switcher ---------------------------------------------------- */

.v2-lang {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--v2-line);
    border-radius: 9px;
    background: var(--v2-surface-2);
    flex-shrink: 0;
}

.v2-lang button {
    min-width: 34px;
    padding: 5px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--v2-text-3);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.v2-lang button:hover { color: var(--v2-text); }
.v2-lang button[aria-pressed="true"] { background: var(--v2-primary); color: #fff; }

@media (max-width: 860px) {
    /* Keep it reachable on touch, next to the burger. */
    .v2-lang button { min-height: 44px; min-width: 44px; }
}

/* ==========================================================================
   Components the inner v2 pages add on top of the landing
   ========================================================================== */

/* --- Centred hero (pricing, comparison pages) ---------------------------- */

.v2-hero--center { text-align: center; padding: 64px 24px 48px; }

.v2-hero__narrow {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}

.v2-hero--center h1 {
    font-size: clamp(32px, 4.2vw, 50px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.035em;
    margin-bottom: 20px;
}

.v2-hero--center .v2-hero__sub { margin: 0 auto 28px; }
.v2-hero--center .v2-toggle { margin: 0 auto; }

/* --- Plan cards: per-feature icons and the alternate price line ---------- */

.v2-plan__alt {
    font-size: 13px;
    color: var(--v2-text-3);
    margin: -12px 0 20px;
    min-height: 1.4em;
}

.v2-plan__feat i {
    color: var(--v2-primary-soft);
    font-size: 13px;
    width: 16px;
    text-align: center;
    margin-top: 3px;
}

.v2-plans__note {
    max-width: 900px;
    margin: 28px auto 0;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--v2-text-3);
}

/* --- Numbered step badge (pricing, IDE) ---------------------------------- */

.v2-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border-radius: 10px;
    background: rgba(102, 126, 234, .14);
    color: var(--v2-primary-soft);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
}

/* --- Comparison tables ---------------------------------------------------
   The base rules live in landing.css scoped to body.landing-page, which this
   design system does not use. Restated here rather than shared, so the old
   pages and the v2 pages can diverge without one breaking the other.
   ------------------------------------------------------------------------ */

.compare-wrap {
    overflow-x: auto;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    margin-top: 34px;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.compare-table th,
.compare-table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid var(--v2-line-soft);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--v2-text-2);
    vertical-align: top;
}

.compare-table thead th {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--v2-text-3);
    background: var(--v2-surface-2);
    white-space: nowrap;
}

.compare-table thead th.col-ours { color: var(--v2-primary-soft); }

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }

.compare-table tbody th {
    font-weight: 600;
    color: var(--v2-text);
    width: 30%;
}

.compare-table .col-ours {
    color: var(--v2-text);
    background: rgba(102, 126, 234, .06);
}

/* --- Wide comparison tables ---------------------------------------------
   The landing's 3-column .compare-table gets width variants. The first column
   sticks so a reader scrolling a 7-column table horizontally never loses the
   name of the row they are reading.
   ------------------------------------------------------------------------ */

.compare-table--4 { min-width: 720px; }
.compare-table--5 { min-width: 860px; }
.compare-table--6 { min-width: 980px; }
.compare-table--7 { min-width: 1100px; }

.compare-table--4 tbody th,
.compare-table--5 tbody th,
.compare-table--6 tbody th,
.compare-table--7 tbody th { width: auto; }

.compare-table thead th:first-child,
.compare-table tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--v2-surface);
}
.compare-table thead th:first-child { background: var(--v2-bg-alt); }

.v2-section--alt .compare-table tbody th { background: var(--v2-bg-alt); }

/* Verdict marks inside a comparison cell */
.v2-mark { display: inline-flex; align-items: baseline; gap: 7px; }
.v2-mark i { font-size: 11px; flex-shrink: 0; }
.v2-mark--yes i { color: var(--v2-green); }
.v2-mark--no i  { color: var(--v2-red); }
.v2-mark--part i { color: var(--v2-amber); }

@media (max-width: 860px) {
    .v2-hero--center { padding: 44px 20px 36px; }
    .v2-plans__note { text-align: left; }
    /* A sticky column on a narrow screen eats most of the viewport. */
    .compare-table thead th:first-child,
    .compare-table tbody th { position: static; }
}

/* --- Tool list inside a card (MCP page) ---------------------------------- */

.v2-toollist { margin-top: 16px; display: grid; gap: 2px; }

.v2-toollist > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid var(--v2-line-soft);
    font-size: 13px;
    flex-wrap: wrap;
}

.v2-toollist > div:first-child { border-top: none; }

.v2-toollist code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--v2-primary-soft);
}

.v2-toollist span { color: var(--v2-text-3); margin-left: auto; text-align: right; }

/* --- Numbered order-of-work list (MCP page) ------------------------------ */

.v2-order { display: grid; gap: 10px; margin-top: 30px; }

.v2-order > div {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: 12px;
    flex-wrap: wrap;
}

.v2-order code,
.v2-order .v2-order__plain {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.5px;
    color: var(--v2-primary-soft);
    min-width: 210px;
}

.v2-order .v2-order__plain { font-family: 'Inter', sans-serif; color: var(--v2-text); }
.v2-order > div > span:last-child { font-size: 14px; color: var(--v2-text-3); }

/* --- Terminal block used as a static code sample ------------------------- */

.v2-term__pre {
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--v2-term-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.v2-term__pre .t-err { color: var(--v2-red); }

/* Shell transcripts read fine wrapped, but JSON does not: pre-wrap breaks a
   long endpoint mid-string and drops the trailing comma onto its own line,
   which destroys the indentation the example is there to show. Code blocks
   keep their line breaks and scroll sideways instead. */
.v2-term__pre--code { white-space: pre; word-break: normal; }
.v2-term__body--scroll { overflow-x: auto; }
.v2-term__body--scroll::-webkit-scrollbar { height: 6px; }
.v2-term__body--scroll::-webkit-scrollbar-thumb { background: var(--v2-line-strong); border-radius: 3px; }

/* A caption placed after the terminal body has to re-create the body's own
   padding: .v2-term is a plain block, not a padded container. */
.v2-term > .v2-hint { margin: 0; padding: 0 16px 16px; }

/* Inline <code> inside body copy */
.v2-card p code,
.v2-faq__item p code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--v2-primary-soft);
    background: rgba(102, 126, 234, .12);
    padding: 1px 6px;
    border-radius: 5px;
}

.v2-card h3 code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    color: var(--v2-primary-soft);
}

@media (max-width: 860px) {
    .v2-toollist span { margin-left: 0; text-align: left; width: 100%; }
    .v2-order code, .v2-order .v2-order__plain { min-width: 0; }
}

/* --- Terminal syntax colours ---------------------------------------------
   These live in landing.css scoped to body.landing-page, which this design
   system does not use, so a terminal block rendered here came out as one flat
   grey. Restated against the v2 terminal palette.
   ------------------------------------------------------------------------ */

.v2-term .t-prompt { color: var(--v2-green); }
.v2-term .t-cmd    { color: var(--v2-term-text); }
.v2-term .t-flag   { color: var(--v2-term-blue); }
.v2-term .t-str    { color: var(--v2-amber); }
.v2-term .t-muted  { color: var(--v2-term-dim); }
.v2-term .t-ok     { color: var(--v2-green); }
.v2-term .t-warn   { color: #fab387; }
.v2-term .t-err    { color: var(--v2-red); }
.v2-term .t-tool   { color: #cba6f7; }
.v2-term .t-you    { color: var(--v2-term-blue); font-weight: 600; }

/* ---------- JSON tokens inside a terminal block ----------
   The .t-* colours above cover shell output; a scenario is JSON, which needs
   its own four. Same palette, so a code card and a log card sit together. */
.v2-term .t-key   { color: var(--v2-term-blue); }
.v2-term .t-num   { color: #fab387; }
.v2-term .t-bool  { color: #cba6f7; }
.v2-term .t-punc  { color: var(--v2-term-dim); }

/* ---------- Before / With / Result case card ----------
   Three stacked blocks inside a .v2-card. The "before" block is tinted red and
   the "result" block green so the contrast reads without the labels. */
.v2-case { display: flex; flex-direction: column; }
.v2-case__tag {
    align-self: flex-start;
    display: inline-block;
    padding: 4px 10px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(102, 126, 234, .12);
    border: 1px solid rgba(102, 126, 234, .28);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--v2-primary-soft);
}
.v2-case__block {
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 10px;
    background: var(--v2-surface-2);
    border: 1px solid var(--v2-line-soft);
}
.v2-case__block b {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--v2-text-3);
}
.v2-case__block p { font-size: 13.5px; line-height: 1.6; color: var(--v2-text-2); }
.v2-case__block .v2-listline { padding: 7px 0; font-size: 13.5px; }
.v2-case__block .v2-listline:first-of-type { padding-top: 0; }
.v2-case__block--before { background: rgba(243, 139, 168, .05); border-color: rgba(243, 139, 168, .18); }
.v2-case__block--before b { color: rgba(243, 139, 168, .85); }
.v2-case__block--result { background: rgba(166, 227, 161, .05); border-color: rgba(166, 227, 161, .18); }
.v2-case__block--result b { color: rgba(166, 227, 161, .85); }
/* margin-top:auto pushes the link to the bottom, so three cards of unequal
   text length still line their buttons up. The gap above it is the last
   block's own margin, since auto would otherwise swallow a margin here. */
.v2-case__block:last-of-type { margin-bottom: 20px; }
.v2-case > .v2-btn { margin-top: auto; align-self: flex-start; }

/* The sub-line under a price cell: the estimate beneath "On request", and the
   plan name beneath ours. Deliberately quieter than the figure above it. */
.v2-price-est {
    display: inline-block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--v2-text-3);
}
.compare-table td b { color: var(--v2-text); font-weight: 600; }

/* The price and enterprise tables carry two lines per cell, so top-aligned
   rows read better than the single-line default. */
.compare-table--4 td, .compare-table--5 td { vertical-align: top; }

/* ======================================================================
   IDE shell mock (the /ide hero)
   A static picture of the editor built out of divs rather than a
   screenshot, so it stays sharp at any density and its text is real text
   that i18n and search engines can read.
   ====================================================================== */

.v2-ide {
    border-radius: var(--v2-radius);
    overflow: hidden;
    background: var(--v2-term-bg);
    font-family: 'JetBrains Mono', 'Monaco', monospace;
    font-size: 11px;
    line-height: 1.5;
    box-shadow: 0 28px 80px rgba(102, 126, 234, .22), 0 0 0 1px rgba(255, 255, 255, .05);
}
.v2-ide__bar {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 13px;
    background: rgba(0, 0, 0, .22);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.v2-ide__lights { display: flex; gap: 6px; }
.v2-ide__lights span { width: 9px; height: 9px; border-radius: 50%; }
.v2-ide__lights span:nth-child(1) { background: #ff5f57; }
.v2-ide__lights span:nth-child(2) { background: #febc2e; }
.v2-ide__lights span:nth-child(3) { background: #28c840; }

.v2-ide__tabs { display: flex; align-items: center; gap: 2px; overflow: hidden; }
.v2-ide__tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 5px;
    color: var(--v2-term-dim); white-space: nowrap;
}
.v2-ide__tab i { font-size: 10px; }
.v2-ide__tab--on { background: rgba(255, 255, 255, .06); color: var(--v2-term-text); }
.v2-ide__state {
    margin-left: auto; flex-shrink: 0;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(166, 227, 161, .12);
    color: var(--v2-green); font-size: 10px; font-weight: 600;
}

/* Activity rail, file tree, main pane. In the hero the shell is only about
   600px wide, so a fourth chat column would leave the execution log too
   narrow to read; the chat gets its own full-width mock further down. */
.v2-ide__body { display: grid; grid-template-columns: 38px 178px 1fr; min-height: 380px; }
.v2-ide__rail {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 14px 0;
    background: rgba(0, 0, 0, .16);
    border-right: 1px solid rgba(255, 255, 255, .04);
    color: var(--v2-term-dim); font-size: 13px;
}
.v2-ide__rail i:first-child { color: var(--v2-primary-soft); }

.v2-ide__tree {
    padding: 12px 10px;
    border-right: 1px solid rgba(255, 255, 255, .04);
    overflow: hidden;
}
.v2-ide__group {
    display: flex; justify-content: space-between; align-items: center;
    margin: 12px 4px 6px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--v2-term-dim);
}
.v2-ide__group:first-child { margin-top: 0; }
.v2-ide__group b { font-weight: 700; color: var(--v2-primary-soft); }
.v2-ide__item {
    display: flex; align-items: center; gap: 7px;
    padding: 4px 6px; border-radius: 4px;
    color: var(--v2-term-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-ide__item i { font-size: 9px; color: var(--v2-term-dim); flex-shrink: 0; }
.v2-ide__item--on { background: rgba(102, 126, 234, .14); }
.v2-ide__item--on i { color: var(--v2-primary-soft); }

.v2-ide__main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.v2-ide__label {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 13px 7px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--v2-term-dim);
}
.v2-ide__label .v2-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-green); }

/* The "browser being driven" panel: a grey wireframe, not a fake screenshot,
   so nobody reads it as a real page of a real product. */
.v2-ide__preview { margin: 0 13px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 7px; overflow: hidden; }
.v2-ide__url {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 9px;
    background: rgba(0, 0, 0, .2);
    color: var(--v2-term-dim); font-size: 10px;
}
.v2-ide__url span.v2-dot3 { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.v2-ide__wire { padding: 11px; display: grid; gap: 7px; }
.v2-ide__wire div { display: flex; gap: 6px; }
.v2-ide__wire i {
    height: 8px; border-radius: 3px; flex: 1;
    background: rgba(255, 255, 255, .07);
}
.v2-ide__wire div:first-child i:first-child { background: rgba(102, 126, 234, .28); flex: 0 0 26%; }
.v2-ide__wire div:last-child i { height: 26px; }

.v2-ide__log { padding: 9px 13px 4px; display: grid; gap: 4px; }
.v2-ide__row { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--v2-term-text); }
.v2-ide__row time { color: var(--v2-term-dim); flex-shrink: 0; }
.v2-ide__row i { font-size: 9px; color: var(--v2-green); flex-shrink: 0; }
.v2-ide__row i.is-run { color: var(--v2-term-blue); }
.v2-ide__row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-ide__row b { margin-left: auto; color: var(--v2-term-dim); font-weight: 400; flex-shrink: 0; }

.v2-ide__status {
    margin-top: auto;
    display: flex; align-items: center; gap: 12px;
    padding: 8px 13px;
    border-top: 1px solid rgba(255, 255, 255, .04);
    color: var(--v2-term-dim); font-size: 10px;
}
.v2-ide__status i { color: var(--v2-green); font-size: 9px; flex-shrink: 0; }
.v2-ide__status > span { white-space: nowrap; }
.v2-ide__status b:last-child { margin-left: auto; font-weight: 400; white-space: nowrap; flex-shrink: 0; }

.v2-ide__chat {
    display: flex; flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, .04);
    background: rgba(0, 0, 0, .1);
    min-width: 0;
}
.v2-ide__msg {
    margin: 10px 12px 0;
    min-width: 0; overflow: hidden;
    padding: 9px 11px;
    border-radius: 8px;
    line-height: 1.55;
    color: var(--v2-term-text);
    background: rgba(255, 255, 255, .04);
}
.v2-ide__msg--you { background: rgba(102, 126, 234, .16); }
.v2-ide__kv { margin-top: 7px; display: grid; gap: 3px; }
.v2-ide__kv div { display: flex; gap: 7px; color: var(--v2-term-dim); }
.v2-ide__kv b { color: var(--v2-term-text); font-weight: 500; }
.v2-ide__tool {
    display: flex; align-items: center; gap: 7px;
    margin-top: 6px; min-width: 0;
    font-size: 10px; color: var(--v2-primary-soft);
    /* Tool names are longer than the 232px chat column, and a mono string
       has no break opportunities, so it would otherwise escape the bubble. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-ide__tool i { flex-shrink: 0; }
.v2-ide__compose {
    margin: auto 12px 12px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 8px;
    color: var(--v2-term-dim);
}

/* Diff card used in the scenario-lifecycle section */
.v2-diff__line { display: flex; gap: 10px; padding: 2px 13px; white-space: nowrap; }
.v2-diff__line em { font-style: normal; color: var(--v2-term-dim); width: 18px; text-align: right; flex-shrink: 0; }
.v2-diff__line--add { background: rgba(166, 227, 161, .08); }
.v2-diff__line--del { background: rgba(243, 139, 168, .08); }
.v2-diff__line--add em + span { color: var(--v2-green); }
.v2-diff__line--del em + span { color: var(--v2-red); }

/* Download cards */
.v2-plat { text-align: center; }
.v2-plat > i { font-size: 30px; color: var(--v2-primary-soft); margin-bottom: 14px; display: block; }
.v2-plat .v2-btn { margin-top: 16px; }
.v2-plat__soon {
    display: inline-block; margin-top: 16px;
    padding: 8px 16px; border-radius: 8px;
    border: 1px dashed var(--v2-line-strong);
    color: var(--v2-text-3); font-size: 13px;
}

@media (max-width: 1100px) {
    .v2-ide__body { grid-template-columns: 38px 160px 1fr; }
}
@media (max-width: 700px) {
    .v2-ide__body { grid-template-columns: 1fr; min-height: 0; }
    .v2-ide__rail, .v2-ide__tree { display: none; }
    .v2-ide__tab:not(.v2-ide__tab--on) { display: none; }
}