/* ==========================================================================
   AlphaCanvas — 2026 Site Refresh
   Layered on top of css/styles.css (which owns tokens, nav, buttons,
   pricing, footer, legal and signup styling).

   Everything here is additive: new section layouts plus a small design
   system for "app renderings" — hand-built approximations of the real
   Predictive Canvas (Harold), Trade Canvas (Mack) and Data Canvas
   surfaces. No production screenshots, no live data.
   ========================================================================== */

:root {
    /* App-rendering palette — mirrors the product's dark slate chrome */
    --app-bg:        #0d1117;
    --app-bg-2:      #131a24;
    --app-bg-3:      #1a2230;
    --app-border:    rgba(148, 163, 184, 0.18);
    --app-border-2:  rgba(148, 163, 184, 0.10);
    --app-text:      #e6edf6;
    --app-text-2:    #9fb0c4;
    --app-text-3:    #6b7c91;
    --app-green:     #4fdd8a;
    --app-red:       #f87171;
    --app-amber:     #f0b429;
    --app-violet:    #a78bfa;
    --app-blue:      #60a5fa;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ==========================================================================
   1. Generic section scaffolding
   ========================================================================== */

.sec {
    padding: var(--space-4xl) 0;
    position: relative;
}

.sec-alt {
    background:
        linear-gradient(180deg, rgba(99, 102, 241, 0.05), transparent 40%),
        var(--color-bg-card);
    border-block: 1px solid var(--color-border-light);
}

.sec-tight { padding: var(--space-3xl) 0; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: rgba(99, 102, 241, 0.1);
    color: var(--color-primary-light);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

.eyebrow.green {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
}

.sec-head {
    max-width: 760px;
    margin: 0 auto var(--space-2xl);
    text-align: center;
}

.sec-head h2 {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
}

.sec-head p {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
}

.sec-head.left {
    margin-inline: 0;
    text-align: left;
}

/* Two-column narrative + visual */
.split {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--space-3xl);
    align-items: center;
}

.split.reverse .split-visual { order: -1; }

.split-text h2 {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
}

.split-text > p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.split-visual { min-width: 0; }

/* Checklist used inside split-text */
.ticks {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.ticks li {
    position: relative;
    display: block;
    padding-left: 28px;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat,
        rgba(16, 185, 129, 0.14);
}

.ticks li strong { color: var(--color-text); font-weight: 600; }

/* Generic card grid */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.cards.two  { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.cards.four { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.card:hover {
    border-color: var(--color-border);
    transform: translateY(-3px);
}

.card h3,
.card h4 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.card p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.card-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid var(--color-border);
    color: var(--color-primary-light);
    margin-bottom: var(--space-md);
}

.card-icon svg { width: 20px; height: 20px; }

/* Small key/value detail rows inside a card */
.kv {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.kv-row {
    font-size: var(--font-size-xs);
    color: var(--color-text-dim);
    line-height: 1.55;
}

.kv-row strong { color: var(--color-text); font-weight: 600; }

/* Stat band */
.stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.stat-band-item { text-align: center; }

.stat-band-value {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.stat-band-label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-dim);
    margin-top: 2px;
}

/* ==========================================================================
   2. App rendering chrome (shared by every mockup)
   ========================================================================== */

.app {
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    font-size: var(--font-size-sm);
    color: var(--app-text);
}

.app-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.6rem 0.85rem;
    background: var(--app-bg-2);
    border-bottom: 1px solid var(--app-border-2);
}

.app-dots {
    display: flex;
    gap: 5px;
    flex: 0 0 auto;
}

.app-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2c3644;
}

.app-dots span:first-child { background: #ff5f57; }
.app-dots span:nth-child(2) { background: #febc2e; }
.app-dots span:nth-child(3) { background: #28c840; }

.app-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--app-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-pill {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: rgba(79, 221, 138, 0.12);
    color: var(--app-green);
    border: 1px solid rgba(79, 221, 138, 0.3);
}

.app-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(79, 221, 138, 0.15);
}

.app-pill.violet {
    background: rgba(167, 139, 250, 0.12);
    color: var(--app-violet);
    border-color: rgba(167, 139, 250, 0.3);
}

.app-pill.amber {
    background: rgba(240, 180, 41, 0.12);
    color: var(--app-amber);
    border-color: rgba(240, 180, 41, 0.3);
}

.app-pill.plain {
    background: rgba(148, 163, 184, 0.1);
    color: var(--app-text-2);
    border-color: var(--app-border);
}

.app-pill.plain::before { display: none; }

.app-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.app-note {
    padding: 0.55rem 0.85rem;
    background: var(--app-bg-2);
    border-top: 1px solid var(--app-border-2);
    font-size: 0.6875rem;
    color: var(--app-text-3);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Universal caption under every rendering */
.app-caption {
    margin-top: var(--space-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-dim);
    text-align: center;
    line-height: 1.5;
}

/* ==========================================================================
   3. Harold chat rendering
   ========================================================================== */

.hchat { gap: 0.85rem; }

.hmsg { display: flex; gap: 0.6rem; }

.hmsg.me { flex-direction: row-reverse; }

.hmsg-av {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.6875rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #fff;
}

.hmsg.me .hmsg-av {
    background: rgba(148, 163, 184, 0.16);
    color: var(--app-text-2);
}

.hmsg-body { min-width: 0; flex: 1; }

.hmsg.me .hmsg-body {
    flex: 0 1 auto;
    max-width: 88%;
}

.hbubble {
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: var(--app-bg-2);
    border: 1px solid var(--app-border-2);
    line-height: 1.55;
    font-size: 0.8125rem;
    color: var(--app-text);
    overflow-wrap: anywhere;
}

.hmsg.me .hbubble {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.3);
}

.hbubble p + p { margin-top: 0.5rem; }
.hbubble strong { color: #fff; font-weight: 700; }

/* Tool-call chain */
.htools {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--app-border-2);
}

.htool {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--app-text-2);
    line-height: 1.5;
}

.htool::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--app-green);
}

.htool.run::before {
    background: var(--app-amber);
    animation: acPulse 1.4s ease-in-out infinite;
}

.htool em {
    font-style: normal;
    color: var(--app-text-3);
    font-family: var(--mono);
    font-size: 0.6875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes acPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

/* Verification strip */
.hverify {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--app-border-2);
}

.vchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.vchip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: currentColor;
}

.vchip.sourced      { color: var(--app-green);  background: rgba(79, 221, 138, 0.1);  border-color: rgba(79, 221, 138, 0.28); }
.vchip.derived      { color: var(--app-blue);   background: rgba(96, 165, 250, 0.1);  border-color: rgba(96, 165, 250, 0.28); }
.vchip.analytical   { color: var(--app-text-2); background: rgba(148, 163, 184, 0.1); border-color: var(--app-border); }
.vchip.unverifiable { color: var(--app-amber);  background: rgba(240, 180, 41, 0.1);  border-color: rgba(240, 180, 41, 0.28); }

.vscore {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--app-green);
    white-space: nowrap;
}

/* Prompt input mock */
.hinput {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: var(--app-bg-2);
    border: 1px solid var(--app-border);
    font-size: 0.8125rem;
    color: var(--app-text-3);
}

.hinput .slash {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--color-primary-light);
}

.hcaret {
    width: 2px;
    height: 14px;
    background: var(--color-primary-light);
    animation: acCaret 1.1s steps(2) infinite;
}

@keyframes acCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ==========================================================================
   4. Hunt slate rendering
   ========================================================================== */

.slate-read {
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.22);
    font-size: 0.75rem;
    color: var(--app-text-2);
    line-height: 1.5;
}

.slate-read strong { color: var(--app-text); }

.lane-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--app-text-3);
    margin-top: 0.15rem;
}

.lane-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--app-border-2);
}

.hcard {
    padding: 0.65rem 0.7rem;
    border-radius: 10px;
    background: var(--app-bg-2);
    border: 1px solid var(--app-border-2);
}

.hcard-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}

.hcard-sym {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.8125rem;
    color: #fff;
}

.hcard-struct {
    font-size: 0.75rem;
    color: var(--app-text-2);
}

.tier {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tier.conviction  { background: rgba(79, 221, 138, 0.14); color: var(--app-green);  border: 1px solid rgba(79, 221, 138, 0.32); }
.tier.speculative { background: rgba(240, 180, 41, 0.14); color: var(--app-amber);  border: 1px solid rgba(240, 180, 41, 0.32); }
.tier.lottery     { background: rgba(148, 163, 184, 0.12); color: var(--app-text-2); border: 1px solid var(--app-border); }

.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 6px;
}

.metric {
    padding: 5px 7px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--app-border-2);
    min-width: 0;
}

.metric-label {
    display: block;
    font-size: 0.625rem;
    color: var(--app-text-3);
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-value {
    display: block;
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--app-text);
    white-space: nowrap;
}

.metric-value.up   { color: var(--app-green); }
.metric-value.down { color: var(--app-red); }
.metric-value.vio  { color: var(--app-violet); }

.near {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--app-border);
}

.near-head {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-text-3);
}

.near-row {
    font-size: 0.75rem;
    color: var(--app-text-2);
    line-height: 1.5;
}

.near-row b {
    font-family: var(--mono);
    color: var(--app-text);
    font-weight: 700;
}

/* ==========================================================================
   5. Style scorecard rendering (/styles)
   ========================================================================== */

.scard {
    padding: 0.7rem;
    border-radius: 10px;
    background: var(--app-bg-2);
    border: 1px solid var(--app-border-2);
}

.scard-top {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.scard-name {
    font-weight: 700;
    font-size: 0.8125rem;
    color: #fff;
}

.badge {
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge.flagship  { background: rgba(167, 139, 250, 0.15); color: var(--app-violet); border-color: rgba(167, 139, 250, 0.35); }
.badge.solid     { background: rgba(96, 165, 250, 0.13);  color: var(--app-blue);   border-color: rgba(96, 165, 250, 0.32); }
.badge.confirmed { background: rgba(79, 221, 138, 0.12);  color: var(--app-green);  border-color: rgba(79, 221, 138, 0.3); }
.badge.refuted   { background: rgba(248, 113, 113, 0.12); color: var(--app-red);    border-color: rgba(248, 113, 113, 0.3); }
.badge.segment   { background: rgba(148, 163, 184, 0.1);  color: var(--app-text-2); border-color: var(--app-border); font-family: var(--mono); text-transform: none; letter-spacing: 0; }

.scard-grammar {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--app-border-2);
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--app-text-3);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.scard-grammar b { color: var(--app-text-2); font-weight: 600; }

/* Fold strip: 4 market eras */
.folds {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 0.5rem;
}

.fold {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 4px 2px;
    border-radius: 5px;
    font-size: 0.625rem;
    font-weight: 700;
    font-family: var(--mono);
    background: rgba(79, 221, 138, 0.12);
    color: var(--app-green);
    border: 1px solid rgba(79, 221, 138, 0.25);
}

.fold.neg {
    background: rgba(248, 113, 113, 0.12);
    color: var(--app-red);
    border-color: rgba(248, 113, 113, 0.25);
}

.fold small {
    display: block;
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--app-text-3);
    letter-spacing: 0.03em;
}

/* Matrix table */
.mtx-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid var(--app-border-2);
}

.mtx {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.mtx th,
.mtx td {
    padding: 7px 9px;
    text-align: left;
    border-bottom: 1px solid var(--app-border-2);
    white-space: nowrap;
}

.mtx th {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--app-text-3);
    background: rgba(255, 255, 255, 0.02);
}

.mtx td { color: var(--app-text-2); }
.mtx tr:last-child td { border-bottom: 0; }
.mtx td:first-child { color: var(--app-text); font-weight: 600; }
.mtx .num { font-family: var(--mono); }
.mtx .pos { color: var(--app-green); }
.mtx .neg { color: var(--app-red); }

/* ==========================================================================
   6. Trade Canvas dashboard rendering
   ========================================================================== */

.tc-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 6px;
    padding: 0.55rem 0.6rem;
    border-radius: 9px;
    background: var(--app-bg-2);
    border: 1px solid var(--app-border-2);
}

.tc-strip .metric-value { font-size: 0.875rem; }

.tcard {
    padding: 0.65rem 0.7rem;
    border-radius: 10px;
    background: var(--app-bg-2);
    border: 1px solid var(--app-border-2);
}

.tcard.live { border-color: rgba(79, 221, 138, 0.28); }

.tcard-top {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.tcard-sym {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.8125rem;
    color: #fff;
}

.chip {
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    font-weight: 700;
    background: rgba(148, 163, 184, 0.1);
    color: var(--app-text-2);
    border: 1px solid var(--app-border);
    white-space: nowrap;
}

.chip.style  { background: rgba(167, 139, 250, 0.12); color: var(--app-violet); border-color: rgba(167, 139, 250, 0.28); }
.chip.auto   { background: rgba(79, 221, 138, 0.12);  color: var(--app-green);  border-color: rgba(79, 221, 138, 0.28); }
.chip.assist { background: rgba(96, 165, 250, 0.12);  color: var(--app-blue);   border-color: rgba(96, 165, 250, 0.28); }
.chip.wait   { background: rgba(240, 180, 41, 0.12);  color: var(--app-amber);  border-color: rgba(240, 180, 41, 0.28); }

.tcard-pnl {
    margin-left: auto;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--app-green);
    white-space: nowrap;
}

.tcard-pnl.down { color: var(--app-red); }

/* 5-segment risk dial */
.dial {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 0.5rem;
}

.dial-segs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    flex: 1;
    min-width: 0;
    padding: 2px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.04);
}

.dial-segs span {
    height: 16px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.12);
    font-size: 0.5625rem;
    font-weight: 800;
    color: var(--app-text-3);
    display: grid;
    place-items: center;
}

.dial-segs span.on {
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #fff;
}

.dial-note {
    flex: 0 0 auto;
    font-size: 0.625rem;
    font-family: var(--mono);
    color: var(--app-text-3);
    white-space: nowrap;
}

/* Budget bars */
.bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 0.5rem;
}

.bar-row {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 0.6875rem;
    color: var(--app-text-3);
}

.bar-track {
    height: 6px;
    border-radius: var(--radius-full);
    background: rgba(148, 163, 184, 0.12);
    overflow: hidden;
}

.bar-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, #6366f1, #818cf8);
}

.bar-fill.used     { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.bar-fill.reserved { background: linear-gradient(90deg, #b45309, #f0b429); }
.bar-fill.free     { background: linear-gradient(90deg, #059669, #4fdd8a); }

.bar-val {
    font-family: var(--mono);
    color: var(--app-text-2);
    white-space: nowrap;
}

.bar-val.ok { color: var(--app-green); }

/* Position rows */
.rows { display: flex; flex-direction: column; }

.row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 0.45rem 0.1rem;
    border-bottom: 1px solid var(--app-border-2);
    font-size: 0.75rem;
}

.row:last-child { border-bottom: 0; }

.row.head {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--app-text-3);
}

.row .sym {
    font-family: var(--mono);
    color: var(--app-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row .pnl { font-family: var(--mono); color: var(--app-green); }
.row .pnl.down { color: var(--app-red); }

/* ==========================================================================
   7. Mission agent (Mack) decision rendering
   ========================================================================== */

.dec {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 6px 10px;
    align-items: start;
    font-size: 0.75rem;
}

.dec dt {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--app-text-3);
    padding-top: 2px;
}

.dec dd { color: var(--app-text-2); line-height: 1.55; overflow-wrap: anywhere; }

.dec-verb {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: rgba(79, 221, 138, 0.14);
    color: var(--app-green);
    border: 1px solid rgba(79, 221, 138, 0.32);
}

.dec-verb.hold { background: rgba(148, 163, 184, 0.12); color: var(--app-text-2); border-color: var(--app-border); }
.dec-verb.exit { background: rgba(248, 113, 113, 0.14); color: var(--app-red);    border-color: rgba(248, 113, 113, 0.32); }

.dec code {
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    padding: 5px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--app-border-2);
    color: var(--app-text);
    overflow-wrap: anywhere;
}

/* Confidence meter */
.conf {
    display: flex;
    align-items: center;
    gap: 8px;
}

.conf-track {
    flex: 1;
    min-width: 0;
    height: 5px;
    border-radius: var(--radius-full);
    background: rgba(148, 163, 184, 0.14);
    overflow: hidden;
}

.conf-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, #10b981, #4fdd8a);
}

.conf-val {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--app-green);
    font-size: 0.75rem;
}

/* OODA loop */
.ooda {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-md);
    counter-reset: ooda;
}

.ooda-step {
    position: relative;
    padding: var(--space-lg);
    padding-top: calc(var(--space-xl) + var(--space-lg));
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.ooda-step::before {
    counter-increment: ooda;
    content: counter(ooda);
    position: absolute;
    top: var(--space-md);
    left: var(--space-lg);
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid var(--color-border);
    color: var(--color-primary-light);
    font-size: var(--font-size-xs);
    font-weight: 800;
}

.ooda-step h3,
.ooda-step h4 {
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.ooda-step p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.55;
}

/* ==========================================================================
   8. Fleet review (Iris) rendering
   ========================================================================== */

.grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 44px;
    align-items: center;
    gap: 9px;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--app-border-2);
    font-size: 0.75rem;
}

.grade:last-child { border-bottom: 0; }

.grade-name {
    color: var(--app-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grade-name small {
    display: block;
    color: var(--app-text-3);
    font-size: 0.625rem;
    font-family: var(--mono);
}

.grade-track {
    height: 6px;
    border-radius: var(--radius-full);
    background: rgba(148, 163, 184, 0.14);
    overflow: hidden;
}

.grade-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #10b981, #4fdd8a);
}

.grade-fill.mid  { background: linear-gradient(90deg, #b45309, #f0b429); }
.grade-fill.low  { background: linear-gradient(90deg, #b91c1c, #f87171); }

.grade-val {
    font-family: var(--mono);
    font-weight: 700;
    text-align: right;
    color: var(--app-green);
}

.grade-val.mid { color: var(--app-amber); }
.grade-val.low { color: var(--app-red); }

.iris-action {
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: rgba(167, 139, 250, 0.08);
    border: 1px solid rgba(167, 139, 250, 0.25);
    font-size: 0.75rem;
    color: var(--app-text-2);
    line-height: 1.55;
}

.iris-action b { color: var(--app-violet); }

/* Checkpoint timeline */
.ckpts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
}

.ckpt {
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    background: var(--app-bg-2);
    border: 1px solid var(--app-border-2);
    text-align: center;
}

.ckpt b {
    display: block;
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--app-text);
}

.ckpt small {
    display: block;
    font-size: 0.625rem;
    color: var(--app-text-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ==========================================================================
   9. Monitor feed rendering
   ========================================================================== */

.feed { gap: 0.45rem; }

.fev {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 9px;
    padding: 0.5rem 0.6rem;
    border-radius: 9px;
    background: var(--app-bg-2);
    border: 1px solid var(--app-border-2);
    border-left: 3px solid var(--app-border);
    font-size: 0.75rem;
}

.fev.info  { border-left-color: var(--app-blue); }
.fev.warn  { border-left-color: var(--app-amber); }
.fev.crit  { border-left-color: var(--app-red); }
.fev.ok    { border-left-color: var(--app-green); }

.fev-time {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--app-text-3);
}

.fev-body { min-width: 0; }

.fev-kind {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--app-text-3);
    margin-bottom: 2px;
}

.fev-text { color: var(--app-text-2); line-height: 1.55; }
.fev-text b { color: var(--app-text); font-weight: 700; }

.fev-tag {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    font-weight: 700;
    background: rgba(99, 102, 241, 0.12);
    color: var(--color-primary-light);
    border: 1px solid rgba(99, 102, 241, 0.28);
}

/* ==========================================================================
   10. Regime stack + macro briefing renderings
   ========================================================================== */

.regime { display: flex; flex-direction: column; gap: 5px; }

.reg-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    background: var(--app-bg-2);
    border: 1px solid var(--app-border-2);
    font-size: 0.75rem;
}

.reg-tf {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--app-text-3);
    font-size: 0.6875rem;
}

.reg-state { color: var(--app-text-2); }
.reg-state b { color: var(--app-text); }

.reg-tag {
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.reg-tag.bull { background: rgba(79, 221, 138, 0.14); color: var(--app-green); border: 1px solid rgba(79, 221, 138, 0.3); }
.reg-tag.bear { background: rgba(248, 113, 113, 0.14); color: var(--app-red);  border: 1px solid rgba(248, 113, 113, 0.3); }
.reg-tag.chop { background: rgba(240, 180, 41, 0.14); color: var(--app-amber); border: 1px solid rgba(240, 180, 41, 0.3); }

.thesis {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.55rem 0.7rem;
    border-radius: 9px;
    background: rgba(79, 221, 138, 0.08);
    border: 1px solid rgba(79, 221, 138, 0.28);
}

.thesis-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(79, 221, 138, 0.16);
    color: var(--app-green);
    border: 1px solid rgba(79, 221, 138, 0.35);
}

.thesis-text {
    font-size: 0.75rem;
    color: var(--app-text-2);
    line-height: 1.5;
}

.thesis-text b { color: var(--app-text); }

/* Briefing window clock */
.windows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 6px;
}

.win {
    padding: 0.45rem 0.4rem;
    border-radius: 8px;
    background: var(--app-bg-2);
    border: 1px solid var(--app-border-2);
    text-align: center;
}

.win b {
    display: block;
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--app-text);
}

.win small {
    display: block;
    font-size: 0.625rem;
    color: var(--app-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.win.deep { border-color: rgba(167, 139, 250, 0.3); background: rgba(167, 139, 250, 0.07); }

/* ==========================================================================
   11. The cast (Harold / Mack / Iris)
   ========================================================================== */

.cast {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
    gap: var(--space-lg);
}

.cast-card {
    position: relative;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.cast-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cast-a, #6366f1), var(--cast-b, #a78bfa));
}

.cast-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-border);
}

.cast-head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.cast-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--cast-a, #6366f1), var(--cast-b, #a78bfa));
}

.cast-name {
    font-size: var(--font-size-xl);
    font-weight: 800;
    line-height: 1.1;
}

.cast-role {
    font-size: var(--font-size-xs);
    color: var(--color-text-dim);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
}

.cast-card > p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.cast-list {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cast-list li {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    padding-left: 16px;
    position: relative;
    line-height: 1.55;
}

.cast-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--cast-a, #6366f1);
}

.cast-tier {
    display: inline-block;
    margin-top: var(--space-md);
    padding: 3px 9px;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    background: rgba(148, 163, 184, 0.1);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-light);
}

/* ==========================================================================
   12. Pipeline / rail
   ========================================================================== */

.rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-md);
    counter-reset: rail;
}

.rail-step {
    position: relative;
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.rail-step::before {
    counter-increment: rail;
    content: counter(rail);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-bottom: var(--space-sm);
    border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 800;
}

.rail-step h3,
.rail-step h4 {
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.rail-step p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.55;
}

.rail-step .rail-meta {
    display: block;
    margin-top: var(--space-sm);
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--color-text-dim);
}

/* ==========================================================================
   13. Slash command grid + tool taxonomy
   ========================================================================== */

.cmds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: var(--space-md);
}

.cmd {
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-normal);
}

.cmd:hover { border-color: var(--color-border); }

.cmd code {
    display: inline-block;
    font-family: var(--mono);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary-light);
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: var(--radius-sm);
    padding: 3px 9px;
    margin-bottom: var(--space-sm);
}

.cmd p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.cmd-alias {
    display: block;
    margin-top: var(--space-sm);
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--color-text-dim);
}

/* Tool taxonomy rows */
.tools-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.tools-row {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.tools-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.tools-label h3,
.tools-label h4 {
    font-size: var(--font-size-md);
    font-weight: 700;
}

.tools-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--dot, var(--color-primary-light));
    flex: 0 0 auto;
}

.tools-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-sm);
}

.tools-tags span {
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border-light);
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.tools-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-dim);
    line-height: 1.6;
}

/* ==========================================================================
   14. Tabbed showcase
   ========================================================================== */

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: var(--space-xl);
}

.tab {
    appearance: none;
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-card);
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 40px;
}

.tab:hover { color: var(--color-text); border-color: var(--color-border); }

.tab[aria-selected="true"] {
    background: rgba(99, 102, 241, 0.14);
    border-color: var(--color-primary);
    color: var(--color-primary-light);
}

.tab-panel[hidden] { display: none; }

/* ==========================================================================
   15. Compliance / trust strip
   ========================================================================== */

.trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-md);
}

.trust-item {
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.trust-item strong { color: var(--color-text); display: block; margin-bottom: 2px; }

/* FAQ */
.faq {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.faq details {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.faq summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-lg);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 44px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: var(--font-size-xl);
    font-weight: 400;
    line-height: 1;
    color: var(--color-primary-light);
    transition: transform var(--transition-fast);
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq p {
    padding: 0 var(--space-lg) var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

/* ==========================================================================
   16. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .split {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .split.reverse .split-visual { order: 0; }

    .sec-head.left { text-align: center; margin-inline: auto; }

    .tools-row { grid-template-columns: 1fr; gap: var(--space-md); }
}

@media (max-width: 768px) {
    .sec { padding: var(--space-3xl) 0; }
    .sec-tight { padding: var(--space-2xl) 0; }

    .sec-head { margin-bottom: var(--space-xl); }
    .sec-head h2 { font-size: var(--font-size-3xl); }
    .sec-head p { font-size: var(--font-size-md); }

    .split-text h2 { font-size: var(--font-size-2xl); }

    .app { border-radius: var(--radius-md); }
    .app-body { padding: 0.7rem; gap: 0.6rem; }

    .hmsg.me .hmsg-body { max-width: 100%; }

    .dec { grid-template-columns: 1fr; gap: 3px 0; }
    .dec dt { padding-top: 6px; }

    .grade { grid-template-columns: minmax(0, 1fr) 64px 40px; gap: 7px; }

    .bar-row { grid-template-columns: 54px 1fr auto; gap: 6px; }

    .cast-card { padding: var(--space-lg) var(--space-md) var(--space-md); }

    .stat-band { padding: var(--space-md); }
    .stat-band-value { font-size: var(--font-size-xl); }

    .tab { font-size: var(--font-size-xs); padding: 0.5rem 0.75rem; }

    .faq summary { padding: var(--space-md); font-size: var(--font-size-sm); }
    .faq p { padding: 0 var(--space-md) var(--space-md); }
}

@media (max-width: 480px) {
    .app-title { display: none; }
    .app-pill { margin-left: auto; }

    .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .row { grid-template-columns: minmax(0, 1.4fr) auto auto; font-size: 0.6875rem; }

    .hcard-top, .tcard-top, .scard-top { gap: 5px; }

    .tier, .badge, .chip { font-size: 0.5625rem; padding: 2px 5px; }

    .ckpts, .windows { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .cast-avatar { width: 40px; height: 40px; border-radius: 12px; }
    .cast-name { font-size: var(--font-size-lg); }
}

@media (prefers-reduced-motion: reduce) {
    .htool.run::before,
    .hcaret { animation: none; }

    .card:hover,
    .cast-card:hover { transform: none; }
}

/* ==========================================================================
   17. Overrides for reused base components
   ========================================================================== */

/* Hero visual now hosts full app renderings instead of the small trade card */
.hero-visual.wide {
    display: block;
    width: 100%;
    min-width: 0;
}

.hero-carousel.app-carousel { min-height: 0; }

.hero-carousel.app-carousel .hero-slide { padding-bottom: 2px; }

/* Larger touch targets for the carousel dots without changing their look */
.hero-carousel-dots .carousel-dot {
    position: relative;
    min-height: 8px;
}

.hero-carousel-dots .carousel-dot::after {
    content: "";
    position: absolute;
    inset: -14px -8px;
}

/* Hero badge as a live-status pill */
.hero-badge.live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hero-badge.live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}

/* Pricing feature bullets get a compact sub-note treatment */
.pricing-features li .feat-note {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-dim);
    margin-top: 2px;
}

/* Anchor offset so in-page links clear the fixed navbar */
[id] { scroll-margin-top: 88px; }

/* Screen-reader-only helper */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   18. Mobile nav hardening
   The refreshed nav carries more links; make the drawer scrollable and
   respect the dynamic viewport + safe areas on phones.
   ========================================================================== */

@media (max-width: 768px) {
    .nav-links {
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: calc(72px + var(--space-lg)) var(--space-xl)
                 calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
        gap: var(--space-md);
    }

    .nav-links a { font-size: var(--font-size-md); min-height: 40px; }
    .nav-links .btn { margin-top: var(--space-sm); }
    .nav-links .btn:last-child { margin-bottom: var(--space-lg); }
}

/* ==========================================================================
   19. Inline code inside marketing copy
   ========================================================================== */

.pricing-features code,
.plan-features code,
.ticks code,
.rail-step code,
.near-row code,
.faq code {
    font-family: var(--mono);
    font-size: 0.85em;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.22);
    color: var(--color-primary-light);
    white-space: nowrap;
}

.cast-list code {
    font-family: var(--mono);
    font-size: 0.9em;
    color: var(--color-primary-light);
}

/* ==========================================================================
   20. Overflow containment
   Flex/grid children default to min-width:auto, which lets a wide table
   push the page sideways instead of scrolling inside its own wrapper.
   ========================================================================== */

.app-body > * { min-width: 0; }

.mtx-wrap { min-width: 0; max-width: 100%; }

.split-text,
.split-visual,
.card,
.cast-card,
.rail-step,
.ooda-step,
.cmd,
.tools-row > * { min-width: 0; }

@media (max-width: 480px) {
    .mtx { min-width: 400px; }
    .mtx th, .mtx td { padding: 6px 7px; font-size: 0.6875rem; }
}

/* Pre-existing: the enterprise CTA's 600px decorative glow pushed the page
   sideways on phones. Clip it to the section. */
.ent-cta { overflow: hidden; }

/* Long tokens inside marketing bullets must wrap rather than push the page */
.ticks li,
.tools-desc,
.kv-row,
.cast-list li { overflow-wrap: anywhere; }

@media (max-width: 480px) {
    .pricing-features code,
    .plan-features code,
    .ticks code,
    .rail-step code { white-space: normal; }
}

/* The matrix's trailing label column may wrap; the numeric columns must not. */
.mtx td:last-child,
.mtx th:last-child { white-space: normal; }

/* Give a data-dense rendering more of the row than the prose beside it */
.split.visual-wide { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }

@media (max-width: 1024px) {
    .split.visual-wide { grid-template-columns: 1fr; }
}

/* Tighter matrix cells so the full table fits without scrolling on desktop */
.mtx th,
.mtx td { padding: 6px 8px; }

.mtx { font-size: 0.7188rem; }

/* ==========================================================================
   21. Rendering fidelity fixes
   ========================================================================== */

/* The hero container centres its text below 1024px; app renderings must not
   inherit that — a chat log reads left-aligned. */
.app,
.app-caption + *,
.hero-visual .app { text-align: left; }

.app-caption { text-align: center; }

/* Tool-chain rows: the tool name never wraps; the argument tail truncates. */
.htool {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}

.htool em {
    flex: 1 1 auto;
    min-width: 0;
}

/* Balanced 2x2 stat grid on narrow screens instead of a 3+1 orphan row */
@media (max-width: 520px) {
    .tc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   22. Narrow-viewport grid + flex hardening
   ========================================================================== */

/* auto-fit minimums must never exceed the available column width */
.cards       { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.cards.two   { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.cards.four  { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.cast        { grid-template-columns: repeat(auto-fit, minmax(min(276px, 100%), 1fr)); }
.rail        { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.ooda        { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.cmds        { grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); }
.trust       { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.stat-band   { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.windows     { grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr)); }
.ckpts       { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); }
.metrics     { grid-template-columns: repeat(auto-fit, minmax(min(70px, 100%), 1fr)); }
.tc-strip    { grid-template-columns: repeat(auto-fit, minmax(min(88px, 100%), 1fr)); }

@media (max-width: 520px) {
    .tc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pre-existing: the social-proof row is a nowrap flex with 3rem gaps and
   now carries five items — let it wrap instead of widening the page. */
.proof-logos {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md) var(--space-xl);
}

@media (max-width: 480px) {
    .proof-item { font-size: var(--font-size-md); padding: var(--space-xs) var(--space-md); }
}

/* Bottom-align the metadata line across a row of steps/cards */
.rail-step { display: flex; flex-direction: column; }
.rail-step .rail-meta { margin-top: auto; padding-top: var(--space-md); }

.cards .card { display: flex; flex-direction: column; }
.cards .card .kv { margin-top: auto; }

/* A .vchip with no label is a colour swatch (used beside provenance headings) */
.vchip:empty { padding: 2px 4px; vertical-align: middle; }
.vchip:empty::before { width: 8px; height: 8px; }

/* Short definition cards stay two-up on phones instead of stacking */
@media (max-width: 640px) {
    .cards.four.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
    .cards.four.compact .card { padding: var(--space-md); }
    .cards.four.compact .card h3 { font-size: var(--font-size-md); }
    .cards.four.compact .card p { font-size: var(--font-size-xs); }
}

/* Bottom-align the alias line across a row of command cards */
.cmd { display: flex; flex-direction: column; align-items: flex-start; }
.cmd .cmd-alias { margin-top: auto; padding-top: var(--space-sm); }

/* ==========================================================================
   23. Carousel: a stable box, so rotating a slide never reflows the page
   The base carousel absolutely-positions inactive slides and promotes the
   active one to `position: relative`, so the container's height tracked
   whichever slide happened to be showing — a 100-140px swing every five
   seconds. Because the hero sits above everything else, that pushed the whole
   document up and down while the reader was somewhere else on the page.
   Chrome's scroll anchoring usually hides this; Safari has none, so it hops.

   Stacking every slide in one grid cell sizes the carousel to its tallest
   slide once, and it never changes again. Inactive slides keep their layout
   box (visibility, not display), so the height is stable by construction
   rather than by the browser compensating after the fact.
   ========================================================================== */

.hero-carousel.app-carousel {
    display: grid;
    align-items: start;
    min-height: 0;
}

.hero-carousel.app-carousel .hero-slide,
.hero-carousel.app-carousel .hero-slide.active {
    grid-area: 1 / 1;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
}

/* Inactive slides must not be reachable by keyboard or pointer */
.hero-carousel.app-carousel .hero-slide:not(.active) { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .hero-carousel.app-carousel .hero-slide { transition: none; }
}