/* HERO */
#hero {
    padding: 52px 28px 44px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
}
.hero-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 56px;
    align-items: center;
}
@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; gap: 32px; }
    .hero-panel { order: -1; }
}
.hero-tag {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 16px;
}
.hero-headline {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.08;
    color: var(--text-hi);
    margin-bottom: 14px;
    letter-spacing: 0.01em;
}
.hero-headline .hl { color: var(--amber); }
.hero-rule {
    width: 32px; height: 1px;
    background: var(--amber-dim);
    margin-bottom: 16px;
}
.hero-body {
    font-size: 14px;
    color: var(--text);
    line-height: 1.8;
    max-width: 480px;
    margin-bottom: 12px;
}
.hero-note {
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
    line-height: 1.7;
    padding-left: 12px;
    border-left: 1px solid var(--border-hi);
    margin-bottom: 32px;
    max-width: 420px;
}
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
    display: inline-block;
    padding: 11px 24px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.14s;
    border: none;
    text-decoration: none;
}
.btn-primary {
    background: var(--amber);
    color: #050508;
}
.btn-primary:hover { background: var(--amber-text); }
.btn-ghost {
    background: transparent;
    border: 1px solid var(--border-hi);
    color: var(--text);
}
.btn-ghost:hover { border-color: var(--amber-line); color: var(--text-hi); }

/* Live stats panel */
.hero-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-hi);
}
.panel-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.panel-head .flex1 { flex: 1; }
.panel-status {
    color: var(--text-faint);
}
.panel-status.is-live {
    color: var(--amber-text);
}
.panel-status.is-error {
    color: #D16464;
}
.hero-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border);
}
.hero-kpi {
    padding: 18px 16px 16px;
    border-bottom: 1px solid var(--border);
}
.hero-kpi:nth-child(odd) {
    border-right: 1px solid var(--border);
}
.hero-kpi:nth-last-child(-n+2) {
    border-bottom: none;
}
.hero-kpi-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-hi);
    font-variant-numeric: tabular-nums;
    margin-bottom: 10px;
}
.hero-kpi-value.is-error {
    color: #D16464;
}
.hero-kpi-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* HEALTH BAR */
#health {
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.health-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 0;
}
.health-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding-right: 20px;
    border-right: 1px solid var(--border);
    margin-right: 20px;
    white-space: nowrap;
}
.health-kpis {
    display: flex;
    gap: 0;
    flex: 1;
}
.hkpi {
    padding: 0 20px;
    border-right: 1px solid var(--border);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.hkpi:last-child { border-right: none; }
.hkpi-num {
    font-size: 23px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.hkpi-num.amber { color: var(--amber-text); }
.hkpi-num.cyan  { color: var(--cyan-text); }
.hkpi-num.slate { color: var(--slate-text); }
.hkpi-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.health-interp {
    padding-left: 20px;
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
    max-width: 300px;
    line-height: 1.6;
    border-left: 1px solid var(--border);
}
.health-interp strong { color: var(--text); font-style: normal; }

/* QUOTE SAFETY SUMMARY */
#quote-safety-summary {
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
}
.quote-summary-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 28px;
    display: grid;
    grid-template-columns: 260px 1fr auto;
    gap: 22px;
    align-items: center;
}
.quote-summary-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-hi);
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.quote-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-left: 1px solid var(--border);
}
.quote-summary-item {
    border-right: 1px solid var(--border);
    background: transparent;
    padding: 2px 16px;
}
.quote-summary-item.quote-safe,
.quote-summary-item.quote-context,
.quote-summary-item.quote-review,
.quote-summary-item.quote-stop {
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    background: transparent;
}
.quote-summary-item.quote-safe { border-right: 1px solid var(--border); }
.quote-summary-item.quote-context { border-right: 1px solid var(--border); }
.quote-summary-item.quote-review { border-right: 1px solid var(--border); }
.quote-summary-item.quote-stop { border-right: 1px solid var(--border); }
.quote-summary-item span {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}
.quote-summary-item.quote-safe span { color: var(--cyan-text); }
.quote-summary-item.quote-context span { color: var(--cyan-text); }
.quote-summary-item.quote-review span { color: #E8C57E; }
.quote-summary-item.quote-stop span { color: #E48E8E; }
.quote-summary-item label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.quote-summary-tag {
    border: 1px solid var(--slate-line);
    background: var(--slate-pale);
    padding: 8px 12px;
    min-width: 136px;
}
.quote-summary-tag span {
    color: var(--cyan-dim);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.quote-summary-tag label {
    display: block;
    margin-top: 5px;
    font-size: 9px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-dim);
}
@media (max-width: 900px) {
    .quote-summary-inner { grid-template-columns: 1fr; }
    .quote-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .quote-summary-grid { grid-template-columns: 1fr; }
}

/* MATRIX SECTION */
#matrix {
    background: var(--bg);
    padding: 0 0 48px;
}
.matrix-header {
    max-width: 1200px; margin: 0 auto;
    padding: 24px 28px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 0;
}
.matrix-title {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.matrix-access {
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.06em;
}
.matrix-access strong { color: var(--text); }

/* 3-column state grid */
.state-matrix {
    max-width: 1200px; margin: 0 auto;
    padding: 20px 28px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    align-items: start;
}
.state-matrix.quote-matrix {
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 12px;
}
@media (max-width: 1120px) { .state-matrix.quote-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .state-matrix.quote-matrix { grid-template-columns: 1fr; } }

/* State column */
.state-col { display: flex; flex-direction: column; }
.quote-matrix .state-col { min-width: 0; }

/* Column header: the dominant visual signal */
.col-head {
    padding: 12px 14px 11px;
    border: 1px solid var(--border);
    border-top-width: 2px;
    margin-bottom: 8px;
    background: var(--bg-card);
}
.col-head.ch-converged   { border-top-color: var(--amber);  background: rgba(200,151,58,0.035); }
.col-head.ch-calibrating { border-top-color: var(--cyan);   background: rgba(58,143,160,0.035); }
.col-head.ch-fragile     { border-top-color: var(--slate);  background: rgba(74,74,88,0.03); }
.col-head.ch-quote-safe    { border-top-color: var(--cyan); background: rgba(58,143,160,0.035); }
.col-head.ch-quote-context { border-top-color: var(--cyan); background: rgba(58,143,160,0.035); }
.col-head.ch-quote-review  { border-top-color: #E8C57E; background: rgba(232,197,126,0.04); }
.col-head.ch-quote-stop    { border-top-color: #C44; background: rgba(200,68,68,0.04); }

.col-state {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 5px;
    line-height: 1.35;
}
.col-state.cs-converged   { color: var(--amber-text); }
.col-state.cs-calibrating { color: var(--cyan-text); }
.col-state.cs-fragile     { color: var(--slate-text); }

.col-desc {
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    line-height: 1.5;
}
.col-count {
    float: right;
    font-size: 11px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    margin-left: 12px;
}
.quote-matrix .col-head {
    min-height: 82px;
}
.quote-matrix .col-state.quote-safe,
.quote-matrix .col-state.quote-review,
.quote-matrix .col-state.quote-stop {
    padding: 0;
    border: 0;
    background: transparent;
}
.quote-matrix .col-state.quote-safe { color: var(--cyan-text); }
.quote-matrix .col-state.quote-review { color: #E8C57E; }
.quote-matrix .col-state.quote-stop { color: #E48E8E; }
.col-empty {
    padding: 24px 16px;
    font-size: 12px;
    color: var(--text-faint);
    letter-spacing: 0.06em;
    font-style: italic;
    text-align: center;
    border: 1px dashed var(--border-dashed);
    margin-top: 8px;
}

/* Market row card */
.mkt-row {
    background: var(--bg-card);
    border: 1px solid var(--border);
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color 0.12s;
    position: relative;
    overflow: hidden;
}
.quote-matrix .mkt-row {
    min-height: 154px;
    display: flex;
}
.mkt-row:last-child { margin-bottom: 0; }
.mkt-row:hover { border-color: var(--border-hi); }

/* Left accent bar */
.mkt-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
}
.mkt-row.r-converged::before   { background: var(--amber); }
.mkt-row.r-calibrating::before { background: var(--cyan); }
.mkt-row.r-fragile::before     { background: var(--slate); }
.mkt-row.r-quote-safe::before    { background: var(--cyan); }
.mkt-row.r-quote-context::before { background: var(--cyan); }
.mkt-row.r-quote-review::before  { background: #E8C57E; }
.mkt-row.r-quote-stop::before    { background: #C44; }

/* Fragile texture: diagonal hatch */
.mkt-row.r-fragile {
    background: repeating-linear-gradient(
        -45deg,
        var(--bg-card),
        var(--bg-card) 8px,
        rgba(74,74,88,0.025) 8px,
        rgba(74,74,88,0.025) 10px
    );
}
.mkt-row.r-quote-stop {
    background: repeating-linear-gradient(
        -45deg,
        var(--bg-card),
        var(--bg-card) 8px,
        rgba(200,68,68,0.025) 8px,
        rgba(200,68,68,0.025) 10px
    );
}
.mkt-row.r-fragile:hover { border-color: var(--border-hi); }

/* Calibrating pulse on left bar */
.mkt-row.r-calibrating::before {
    animation: cal-pulse 2.8s ease-in-out infinite;
}
.mkt-row.r-quote-context::before,
.mkt-row.r-quote-review::before {
    animation: cal-pulse 3.4s ease-in-out infinite;
}
@keyframes cal-pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.mkt-inner { padding: 14px 14px 12px 18px; }
.quote-matrix .mkt-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.mkt-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.quote-matrix .mkt-top { min-height: 72px; }
.mkt-category {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 3px;
}
.mkt-title {
    font-size: 13px;
    color: var(--text-hi);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.r-fragile .mkt-title,
.r-quote-stop .mkt-title { color: var(--text); }

/* Nexus score block */
.nxs-block {
    flex-shrink: 0;
    text-align: right;
    min-width: 72px;
}
.nxs-label {
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 1px;
    display: block;
}
.nxs-num {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.r-converged   .nxs-num { color: var(--amber-text); }
.r-calibrating .nxs-num { color: var(--cyan-text); }
.r-fragile     .nxs-num { color: var(--slate-text); font-size: 23px; }
.r-quote-safe .nxs-num { color: var(--cyan-text); }
.r-quote-context .nxs-num { color: var(--cyan-text); }
.r-quote-review .nxs-num { color: #E8C57E; }
.r-quote-stop .nxs-num { color: #E48E8E; }
.nxs-num.quote-odds {
    font-size: 23px;
}

.nxs-unit {
    font-size: 8.5px;
    letter-spacing: 0.08em;
    display: block;
    margin-top: 1px;
    max-width: 118px;
    overflow-wrap: anywhere;
}
.nxs-unit.quote-safe,
.nxs-unit.quote-context,
.nxs-unit.quote-review,
.nxs-unit.quote-stop {
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1.35;
}
.nxs-unit.quote-safe { color: var(--cyan-text); }
.nxs-unit.quote-context { color: var(--cyan-text); }
.nxs-unit.quote-review { color: #E8C57E; }
.nxs-unit.quote-stop { color: #E48E8E; }
.r-converged   .nxs-unit { color: var(--amber-dim); }
.r-calibrating .nxs-unit { color: var(--cyan-dim); }
.r-fragile     .nxs-unit { color: var(--text-faint); }

/* 4-pillar mini bars */
.mkt-pillars {
    display: flex;
    gap: 3px;
    margin-bottom: 8px;
}
.pillar-bar {
    flex: 1;
    height: 3px;
    background: var(--border-hi);
    position: relative;
    overflow: hidden;
}
.pillar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    transition: width 0.6s ease;
}
.r-converged   .pillar-fill { background: var(--amber); }
.r-calibrating .pillar-fill { background: var(--cyan); }
.r-fragile     .pillar-fill { background: var(--slate); }

/* Bottom row */
.mkt-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.quote-matrix .mkt-bottom {
    min-height: 34px;
    margin-top: auto;
}
.mkt-price {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-hi);
    font-variant-numeric: tabular-nums;
}
.r-fragile .mkt-price { color: var(--text); font-size: 14px; }
.stable-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amber-text);
    background: var(--amber-pale);
    border: 1px solid var(--amber-line);
    padding: 2px 7px;
    white-space: nowrap;
}
.quote-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 7px;
    white-space: nowrap;
}
.quote-safe {
    color: var(--cyan-text);
    background: var(--cyan-pale);
    border: 1px solid var(--cyan-line);
}
.quote-context {
    color: var(--cyan-dim);
    background: transparent;
    border: 1px solid var(--slate-line);
}
.quote-review {
    color: #E8C57E;
    background: rgba(232,197,126,0.08);
    border: 1px solid rgba(232,197,126,0.3);
}
.quote-stop {
    color: #E48E8E;
    background: rgba(200,68,68,0.08);
    border: 1px solid rgba(200,68,68,0.28);
}

.mkt-vol {
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.mkt-flag {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.mf-contested  { color: #C44; border: 1px solid rgba(200,68,68,0.25); }
.mf-correlated { color: var(--amber-dim); border: 1px solid var(--amber-line); }

/* Locked rows below matrix */
.locked-wrap {
    max-width: 1200px; margin: 12px auto 0;
    padding: 0 28px;
    position: relative;
}
.locked-rows {
    position: relative;
}
#locked-rows-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
@media (max-width: 1000px) {
    #locked-rows-inner { grid-template-columns: 1fr; }
}
.locked-row {
    min-height: 154px;
    display: flex;
    margin-bottom: 0;
    opacity: 1;
    pointer-events: none;
    filter: blur(3px);
    -webkit-filter: blur(3px);
    user-select: none;
}
.locked-row .mkt-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.locked-row .mkt-top { min-height: 72px; }
.locked-row .mkt-bottom {
    min-height: 34px;
    margin-top: auto;
}
.locked-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 8, 0.35);
    pointer-events: none;
    z-index: 1;
}
.locked-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(5,5,8,0.5) 30%,
        rgba(5,5,8,0.92) 70%
    );
    z-index: 10;
}
.locked-label {
    font-size: 13px;
    color: var(--text);
    letter-spacing: 0.06em;
}
.locked-label strong { color: var(--text-hi); }
.locked-sub {
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.05em;
}