/* =========================================================================
   Homepage — September 2026 redesign.

   Content source: the approved mockup at
   projects/bRRAIn_AI_Training/Product_Development/homepage-redesign-2026-09/
   brrain-homepage-final.html.

   DESIGN AUTHORITY IS THE LIVE SITE, NOT THE MOCKUP. The mockup shipped its
   own copies of .btn, .card, .badge and its own heading scale; none of them
   are reproduced here. The page uses the live primitives instead —
   .hero / .hero__container / .hero__content / .hero__title / .hero__subtitle /
   .hero__actions, .section / .section__header / .section__title /
   .section__subtitle / .section__footnote, .card, .badge, .btn, .eyebrow —
   and this file carries ONLY the components the redesign genuinely adds.

   Conforms to ai-memory/Standards and Policy/light-theme-spec-1.0.md:
     §3.1 every value is a --color-* / --space-* / --text-* token; the only
          hardcoded colours are the two licensed-chip brand accents, which
          §3.1 permits as a scoped brand override and whose light re-binding
          lives in design-system.css per §5.2.
     §3.2 surfaces use --color-surface-1, never pure white.
     §3.6 focus rings are left to the global standard, never overridden here.

   Everything is scoped under .hp26 (the wrapper around the content block) so
   the page's own components cannot leak onto other surfaces.
   ========================================================================= */

/* Reference-chip accents for the hero comparison chart. Only the two licensed
   accelerators need a brand colour of their own; the unaccelerated baseline
   uses a surface token so it themes for free. The [data-theme="light"]
   re-binding is in design-system.css, per light-theme-spec §5.2.
   Colour never carries meaning alone here: every bar also states its number
   and its licence status in text. */
.hp26 {
    --ref-h100: #f59e0b;
    --ref-b300: #a855f7;
    --ref-plain: var(--color-surface-5);
}

/* -------------------------------------------------------------------------
   Shared page bits
   ------------------------------------------------------------------------- */

/* Fine print inside a card, where .section__footnote (a section-level
   primitive) would be the wrong scale. */
.hp26 .note {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin: var(--space-md) 0 0;
    line-height: 1.55;
}
.hp26 .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hp26 .badges { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* Section banding — replaces the inline style attributes the mockup used. */
.hp26 .band {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-1);
}
.hp26 .band--top { border-top: 1px solid var(--color-border); }
.hp26 .band--closer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-1);
}

/* -------------------------------------------------------------------------
   Hero comparison chart — the second child of .hero__container
   ------------------------------------------------------------------------- */
.hp26 .cmp {
    flex: 1;
    min-width: 0;
    max-width: 560px;
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
}
@media (max-width: 900px) {
    .hp26 .hero__container { flex-direction: column; align-items: stretch; }
    .hp26 .cmp { max-width: none; }
}
.hp26 .cmp__ttl { font-size: var(--text-sm); font-weight: 600; }
.hp26 .cmp__sub {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-lg);
    font-family: var(--font-mono);
}
.hp26 .bar { margin-bottom: 14px; }
.hp26 .bar__lbl {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-xs);
    color: var(--color-text-secondary);
}
.hp26 .bar__lbl b {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
}
.hp26 .bar.is-hero .bar__lbl { color: var(--color-text-primary); font-weight: 600; }
.hp26 .bar.is-hero .bar__lbl b { color: var(--color-accent-cyan); }
.hp26 .track {
    height: 10px;
    background: var(--color-surface-2);
    border-radius: 2px;
    overflow: hidden;
}
.hp26 .fill {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width 900ms cubic-bezier(.2, .7, .3, 1);
}
.hp26 .f-plain  { background: var(--ref-plain); }
.hp26 .f-h100   { background: var(--ref-h100); }
.hp26 .f-b300   { background: var(--ref-b300); }
.hp26 .f-brrain { background: var(--color-accent-cyan); }
.hp26 .cmp__result {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
}
.hp26 .cmp__big {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--text-4xl);
    color: var(--color-accent-cyan);
    line-height: 1;
}
.hp26 .cmp__txt { font-size: var(--text-sm); color: var(--color-text-secondary); }
.hp26 .hero__trust {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

/* -------------------------------------------------------------------------
   Proof strip
   ------------------------------------------------------------------------- */
.hp26 .proof {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md) 0;
}
.hp26 .proof__inner {
    display: flex;
    gap: var(--space-md) var(--space-lg);
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.hp26 .proof__k {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
}

/* -------------------------------------------------------------------------
   Grids
   ------------------------------------------------------------------------- */
.hp26 .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .hp26 .grid3 { grid-template-columns: 1fr; } }

/* The three problems — a .card with an accent spine. */
.hp26 .problem { border-left: 2px solid var(--color-accent-cyan); }
.hp26 .problem__t {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    margin: 0 0 var(--space-sm);
    color: var(--color-text-primary);
}

/* -------------------------------------------------------------------------
   Five compounding layers
   ------------------------------------------------------------------------- */
.hp26 .funnel { display: flex; flex-direction: column; gap: var(--space-sm); }
.hp26 .tier {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-lg);
    align-items: center;
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-md) var(--space-lg);
}
.hp26 .tier__nm { font-weight: 600; font-size: var(--text-base); }
.hp26 .tier__ds { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 3px; }
.hp26 .tier__ds cite {
    font-style: normal;
    color: var(--color-text-tertiary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}
.hp26 .tier__amt {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-lg);
    color: var(--color-accent-cyan);
    white-space: nowrap;
}
.hp26 .tier--total { background: var(--color-surface-3); border-color: var(--color-surface-5); }
.hp26 .tier--total .tier__amt { font-size: var(--text-2xl); }
@media (max-width: 640px) { .hp26 .tier { grid-template-columns: 1fr; gap: var(--space-sm); } }

/* -------------------------------------------------------------------------
   Throughput calculator
   ------------------------------------------------------------------------- */
.hp26 .calc {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: var(--space-xl);
}
@media (max-width: 940px) { .hp26 .calc { grid-template-columns: 1fr; gap: var(--space-lg); } }
.hp26 .field { margin-bottom: var(--space-lg); }
.hp26 .field label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-sm); }
.hp26 .field label b { font-family: var(--font-mono); font-weight: 500; color: var(--color-accent-cyan); }
/* Inputs inherit the global light-mode treatment (spec §3.5); only layout
   and the accent colour are set here. */
.hp26 .field select { width: 100%; font-size: var(--text-sm); }
.hp26 .field input[type=range] { width: 100%; accent-color: var(--color-accent-cyan); }
.hp26 .field .hint {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-xs);
    line-height: 1.5;
}
.hp26 .calcnote {
    border-left: 2px solid var(--color-accent-cyan);
    padding-left: var(--space-md);
    margin-top: var(--space-lg);
}
.hp26 .calcnote p { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }

.hp26 .rows { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.hp26 .row {
    display: grid;
    grid-template-columns: 1.6fr auto auto;
    gap: var(--space-md);
    align-items: center;
    padding: 14px var(--space-md);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.hp26 .row:last-child { border-bottom: 0; }
.hp26 .row--head {
    background: var(--color-surface-2);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
    font-weight: 600;
}
.hp26 .row--you { background: var(--color-accent-cyan-muted); }
.hp26 .row__nm { display: flex; align-items: center; gap: var(--space-sm); }
.hp26 .dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.hp26 .dot--plain { background: var(--ref-plain); }
.hp26 .dot--h100  { background: var(--ref-h100); }
.hp26 .dot--b300  { background: var(--ref-b300); }
.hp26 .dot--you   { background: var(--color-accent-cyan); }
.hp26 .row__v {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.hp26 .row__v.big { font-size: var(--text-lg); font-weight: 500; }
.hp26 .row--you .row__v { color: var(--color-accent-cyan); }
@media (max-width: 560px) {
    .hp26 .row { grid-template-columns: 1fr auto; }
    .hp26 .row__v:last-child { grid-column: 2; }
}
.hp26 .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-md); }
@media (max-width: 560px) { .hp26 .kpis { grid-template-columns: 1fr; } }
.hp26 .kpi {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
}
.hp26 .kpi__k {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}
.hp26 .kpi__v {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--color-accent-cyan);
}
.hp26 .kpi__n { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: var(--space-xs); }

/* -------------------------------------------------------------------------
   Eight zones
   ------------------------------------------------------------------------- */
.hp26 .stack { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.hp26 .srow {
    display: grid;
    grid-template-columns: 32px 1.1fr 1.7fr 1fr;
    gap: var(--space-md);
    padding: 14px var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    align-items: baseline;
    font-size: var(--text-sm);
}
.hp26 .srow:last-child { border-bottom: 0; }
.hp26 .srow:hover { background: var(--color-surface-1); }
.hp26 .srow--head {
    background: var(--color-surface-2);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
    font-weight: 600;
}
.hp26 .srow--head:hover { background: var(--color-surface-2); }
.hp26 .srow .n { font-family: var(--font-mono); color: var(--color-accent-cyan); font-weight: 500; }
.hp26 .srow .nm { font-weight: 600; }
.hp26 .srow .ds { color: var(--color-text-secondary); }
.hp26 .srow .rp { color: var(--color-text-tertiary); font-size: var(--text-xs); }
@media (max-width: 820px) {
    .hp26 .srow { grid-template-columns: 28px 1fr; }
    .hp26 .srow .ds, .hp26 .srow .rp { grid-column: 2; }
    .hp26 .srow--head { display: none; }
}

/* -------------------------------------------------------------------------
   Marketplace pairs + flow strip
   ------------------------------------------------------------------------- */
.hp26 .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 900px) { .hp26 .pair { grid-template-columns: 1fr; } }
/* .appcard is a .card that lays its own content out as a column. */
.hp26 .appcard { display: flex; flex-direction: column; }
.hp26 .appcard__cat {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-cyan);
    margin-bottom: var(--space-sm);
}
.hp26 .appcard__t {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    margin: 0 0 var(--space-sm);
    color: var(--color-text-primary);
}
.hp26 .appcard__lede { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-md); }
.hp26 .appcard ul {
    margin: 0 0 var(--space-lg);
    padding-left: var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.hp26 .appcard li { margin-bottom: 7px; }
.hp26 .appcard__actions { margin-bottom: var(--space-md); display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.hp26 .appcard__role {
    margin-top: auto;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    font-family: var(--font-mono);
    line-height: 1.6;
}

.hp26 .flow {
    display: flex;
    align-items: stretch;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    flex-wrap: wrap;
}
.hp26 .flow__step {
    flex: 1 1 150px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 14px var(--space-md);
    background: var(--color-surface-1);
}
.hp26 .flow__step--key { border-color: var(--color-accent-cyan); background: var(--color-accent-cyan-muted); }
.hp26 .flow__k {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    display: block;
    margin-bottom: var(--space-xs);
}
.hp26 .flow__v { font-size: var(--text-sm); font-weight: 600; }
.hp26 .flow__n {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-xs);
    display: block;
    line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Developer SDK
   ------------------------------------------------------------------------- */
.hp26 .sdk { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
.hp26 .sdk > * { min-width: 0; }
@media (max-width: 940px) { .hp26 .sdk { grid-template-columns: 1fr; gap: var(--space-lg); } }
.hp26 .code {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.7;
    overflow: hidden;
}
.hp26 .code__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 14px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.hp26 .code pre {
    margin: 0;
    padding: var(--space-md);
    overflow-x: auto;
    color: var(--color-text-secondary);
    white-space: pre;
}
.hp26 .code .c-key { color: var(--color-accent-cyan); }
.hp26 .code .c-str { color: var(--color-success); }
.hp26 .code .c-cm  { color: var(--color-text-tertiary); }
.hp26 .code + .code { margin-top: var(--space-sm); }
.hp26 .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hp26 .ctable {
    width: 100%;
    min-width: 380px;
    border-collapse: collapse;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: var(--text-sm);
}
.hp26 .ctable th, .hp26 .ctable td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.hp26 .ctable th {
    background: var(--color-surface-2);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
    font-weight: 600;
}
.hp26 .ctable td:not(:first-child) {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-align: center;
}
.hp26 .ctable tr:last-child td { border-bottom: 0; }
.hp26 .ctable td.yes { color: var(--color-accent-cyan); }
.hp26 .ctable td.no  { color: var(--color-text-tertiary); }
.hp26 .sdkstats { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-md); }
.hp26 .sdkstat {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    background: var(--color-surface-1);
    flex: 1 1 150px;
}
.hp26 .sdkstat .v {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--color-accent-cyan);
}
.hp26 .sdkstat .k { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: 5px; }
.hp26 .sdk__subhead {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--color-text-primary);
}
.hp26 .sdk__cards { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin-top: var(--space-md); }

/* -------------------------------------------------------------------------
   Sovereignty spectrum
   ------------------------------------------------------------------------- */
.hp26 .spectrum {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.hp26 .sp {
    padding: var(--space-lg) var(--space-md);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    background: var(--color-surface-1);
}
.hp26 .sp:last-child { border-right: 0; }
.hp26 .sp__bar { height: 3px; border-radius: 2px; margin-bottom: var(--space-md); }
.hp26 .sp__bar--hosted    { background: var(--color-text-tertiary); }
.hp26 .sp__bar--colocated { background: var(--color-success); }
.hp26 .sp__bar--resident  { background: var(--color-accent-cyan); }
.hp26 .sp__bar--onprem    { background: var(--ref-b300); }
.hp26 .sp__t {
    font-size: var(--text-base);
    font-family: var(--font-ui);
    font-weight: 600;
    margin: 0 0 var(--space-sm);
    color: var(--color-text-primary);
}
.hp26 .sp p { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 14px; }
.hp26 .sp__who {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-sm);
    margin-top: auto;
}
@media (max-width: 900px) {
    .hp26 .spectrum { grid-template-columns: 1fr; }
    .hp26 .sp { border-right: 0; border-bottom: 1px solid var(--color-border); }
}
.hp26 .spectrum-cards { margin-top: var(--space-md); }

/* -------------------------------------------------------------------------
   Language band
   ------------------------------------------------------------------------- */
.hp26 .greet__inner { text-align: center; }
.hp26 .greetband {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-md);
}
/* The site self-hosts no Arabic face and makes no external font request, so
   the greeting falls back to the platform Arabic stack. */
.hp26 .greetband .ar {
    font-family: 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, sans-serif;
    font-weight: 500;
}
.hp26 .greetband .is-accent { color: var(--color-accent-cyan); }

/* -------------------------------------------------------------------------
   Industries
   ------------------------------------------------------------------------- */
.hp26 .inds { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-md); }
@media (max-width: 1000px) { .hp26 .inds { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hp26 .inds { grid-template-columns: 1fr; } }
.hp26 .ind ul { margin: 0; padding-left: var(--space-md); font-size: var(--text-sm); color: var(--color-text-secondary); }
.hp26 .ind li { margin-bottom: var(--space-xs); }
.hp26 .ind__more {
    display: inline-block;
    margin-top: var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
   Pricing
   ------------------------------------------------------------------------- */
.hp26 .prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .hp26 .prices { grid-template-columns: 1fr; } }
.hp26 .price { display: flex; flex-direction: column; }
.hp26 .price--feature { border-color: var(--color-accent-cyan); background: var(--color-accent-cyan-muted); }
.hp26 .price__tag {
    font-size: var(--text-xs);
    color: var(--color-accent-cyan);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
}
.hp26 .price__t {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 var(--space-xs);
    color: var(--color-text-primary);
}
.hp26 .price__amt {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--text-4xl);
    line-height: 1;
    margin: var(--space-xs) 0;
}
.hp26 .price__per {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-md);
    font-family: var(--font-mono);
}
.hp26 .price ul {
    margin: 0 0 var(--space-lg);
    padding-left: var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.hp26 .price li { margin-bottom: 7px; }
.hp26 .price .btn { margin-top: auto; }

.hp26 .seatcalc {
    margin-top: var(--space-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
}
@media (max-width: 760px) { .hp26 .seatcalc { grid-template-columns: 1fr; gap: var(--space-md); } }
.hp26 .seatcalc .field { margin: 0; }
.hp26 .seatout { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
.hp26 .seatout .v {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--text-4xl);
    line-height: 1;
    color: var(--color-accent-cyan);
}
.hp26 .seatout .n { font-size: var(--text-sm); color: var(--color-text-secondary); }

.hp26 .hosting { margin-top: var(--space-md); border-left: 2px solid var(--color-accent-cyan); }
.hp26 .hosting__t {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 var(--space-sm);
    color: var(--color-text-primary);
}
.hp26 .hosting p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0 0 14px;
    max-width: 80ch;
}
.hp26 .hosting ul {
    margin: 0;
    padding-left: var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    columns: 2;
    column-gap: var(--space-lg);
}
@media (max-width: 700px) { .hp26 .hosting ul { columns: 1; } }
.hp26 .hosting li { margin-bottom: var(--space-xs); break-inside: avoid; }

/* -------------------------------------------------------------------------
   FAQ (retained) — native <details>, no JS
   ------------------------------------------------------------------------- */
.hp26 .faq { max-width: var(--max-width-narrow); margin: 0 auto; }
.hp26 .faq__item { border-bottom: 1px solid var(--color-border); padding: var(--space-md) 0; }
.hp26 .faq__item:first-child { border-top: 1px solid var(--color-border); }
.hp26 .faq__q {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}
.hp26 .faq__q::-webkit-details-marker { display: none; }
.hp26 .faq__q::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    color: var(--color-accent-cyan);
    flex-shrink: 0;
    line-height: 1;
}
.hp26 .faq__item[open] .faq__q::after { content: "\2212"; }
.hp26 .faq__a {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: var(--space-sm) 0 0;
    max-width: 72ch;
}

/* -------------------------------------------------------------------------
   Four doors + closing disclosure
   ------------------------------------------------------------------------- */
.hp26 .doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .hp26 .doors { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hp26 .doors { grid-template-columns: 1fr; } }
.hp26 .door { display: block; color: inherit; text-decoration: none; }
.hp26 .door:hover { border-color: var(--color-accent-cyan); }
.hp26 .door__t {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 var(--space-sm);
    color: var(--color-text-primary);
}
.hp26 .disclosure {
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
    .hp26 .fill { transition: none; }
}

/* Trailing inline-style removals — the mockup set these per-element. */
.hp26 .bar__lic { opacity: .6; }
.hp26 .field__hint-inline { font-weight: 400; color: var(--color-text-tertiary); }
.hp26 .badges--spaced { margin-top: var(--space-md); }

/* The live .hero__accent gives the colour; the redesign wants it upright,
   not the browser's default italic for <em>. */
.hp26 .hero__title em { font-style: normal; }

/* -------------------------------------------------------------------------
   BlackBox mark — closes the language band and links to /black-box.
   Brand values are BlackBox's own (black-box.html: --bb-gold / --bb-ink),
   not site tokens, because this is a distinct sub-brand with a fixed
   palette. It carries its own ink panel, so it reads identically in both
   themes rather than vanishing on a white page.
   ------------------------------------------------------------------------- */
.hp26 .bbmark {
    --bb-gold: #c8a247;
    --bb-gold-line: rgba(200, 162, 71, 0.35);
    --bb-gold-hover: #d6b25b;
    --bb-ink: #0a0a0a;

    display: block;
    max-width: 640px;
    margin: var(--space-lg) auto 0;
    padding: var(--space-xl) var(--space-lg);
    background: var(--bb-ink);
    border: 1px solid var(--bb-gold-line);
    border-radius: var(--radius-sm);
    text-align: center;
    text-decoration: none;
    transition: border-color var(--transition-fast);
}
.hp26 .bbmark:hover { border-color: var(--bb-gold); }
.hp26 .bbmark:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 2px; }

.hp26 .bbmark__word {
    display: block;
    font-family: 'IBM Plex Serif', var(--font-serif);
    font-size: clamp(2.5rem, 7vw, 4rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.95;
}
/* "Black" is ink on ink — the white stroke is what draws it, exactly as on
   the BlackBox page itself. */
.hp26 .bbmark__black {
    color: var(--bb-ink);
    -webkit-text-stroke: 1.25px #ffffff;
    text-shadow: 0 0 1px #ffffff;
}
.hp26 .bbmark__box {
    color: var(--bb-gold);
    margin-left: 0.18em;
    font-style: italic;
}
.hp26 .bbmark__rule {
    width: 64px;
    height: 1px;
    background: var(--bb-gold);
    border: 0;
    margin: var(--space-lg) auto;
}
.hp26 .bbmark__tag {
    display: block;
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bb-gold);
    font-weight: 600;
}
.hp26 .bbmark__cta {
    display: inline-block;
    margin-top: var(--space-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: #ffffff;
}
.hp26 .bbmark:hover .bbmark__cta { color: var(--bb-gold-hover); }

/* -------------------------------------------------------------------------
   Western variant — the dual reading, and the "Start with bRRAIn" sequence.
   Both are scoped under .hp26 like everything else and use only tokens.
   ------------------------------------------------------------------------- */

/* "−80% cost = +500% output" — one number, shown as the identity it is. */
.hp26 .dualread {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-1);
}
.hp26 .dualread__side { text-align: center; flex: 1 1 220px; }
.hp26 .dualread__k {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--color-text-tertiary);
}
.hp26 .dualread__v {
    display: block;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--text-4xl);
    line-height: 1.1;
    color: var(--color-accent-cyan);
}
.hp26 .dualread__n {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    max-width: 30ch;
    margin: 0 auto;
}
.hp26 .dualread__eq {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    color: var(--color-text-tertiary);
    flex: 0 0 auto;
}
@media (max-width: 640px) { .hp26 .dualread__eq { display: none; } }

/* The four-step start sequence. */
.hp26 .startsteps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}
@media (max-width: 1000px) { .hp26 .startsteps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hp26 .startsteps { grid-template-columns: 1fr; } }
.hp26 .startstep {
    display: flex;
    flex-direction: column;
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
}
.hp26 .startstep--gain { border-color: var(--color-accent-cyan); background: var(--color-accent-cyan-muted); }
.hp26 .startstep__n {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-accent-cyan);
    font-weight: 600;
    letter-spacing: 0.08em;
}
.hp26 .startstep__t {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 600;
    margin: var(--space-sm) 0;
    color: var(--color-text-primary);
}
.hp26 .startstep p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md);
}
.hp26 .startstep__when {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-sm);
}