/* ============================================================================
   home.css — the signex.ai homepage.

   Loaded after lab.css and edge-preview.css, and scoped to `main.home2` so the
   other public pages keep exactly the layout lab.css already gives them. The
   shared chrome (.shell, .mono, .reveal, .site-nav, .scroll-progress, the
   .window-bar frame) still comes from lab.css and is deliberately not
   redeclared here.

   PALETTE. Locked. Every value below is either a token already defined in
   lab.css / edge-preview.css or a step derived from one of them on the same
   hue. No new accent, no second brand colour. The rules that matter:

     · The accent (#38bdf8) appears ONCE per viewport, on the single most
       important thing in it. Hero → the CTA. Bench → the selected switch.
       Market → the live lamp. Close → the CTA. Nowhere else.
     · The P&L pair is the instrument skin's sage/coral (#6fbf9a / #ff8066),
       not the :root pair — the :root pair is the one that fails CVD.
     · --h-d1…--h-d5 is a five-step neutral ramp derived from the background
       hue, so plots and ladders have more than two values to draw with.

   TYPE. Two faces, sitewide — the same pair every other public page and the
   Edge Lab app use, so nothing changes voice when you click through:
     · DM Sans     — everything written. Headings at 600, body at 400. Emphasis
                     inside a heading is the real DM Sans italic plus a dimmer
                     ink step, never a synthesised slant.
     · IBM Plex Mono — the machine voice. Every number, threshold, verdict,
                     timestamp and gate row. Nothing measured is set in a face
                     that was not chosen for digits.

   MOTION. The page spends its single largest motion moment on the bench's gate
   ladder, because that stagger IS the "four separate hurdles, in order"
   explanation rather than a decoration of it. The specification sheet directly
   below it has no motion at all, so both read as intentional. Everything else
   is a reveal or a draw-in and is cut entirely under prefers-reduced-motion.
   ========================================================================== */

.home2 {
    /* --- surfaces: the three steps that already exist, plus one lit step --- */
    --h-ground: #050b16;
    --h-panel: #0a1628;
    --h-inset: #081426;
    --h-raise: #0d1c30;

    /* --- rules: hairline, edge, caliper tick --- */
    --h-rule: rgba(186, 230, 253, .14);
    --h-rule-2: rgba(186, 230, 253, .22);
    --h-tick: rgba(186, 230, 253, .30);

    /* --- ink --- */
    --h-ink: #f3f8fb;
    --h-ink-2: #c6d5df;
    --h-mute: #93a9bd;
    --h-mute-2: #7b91a5;

    /* --- accent, rationed --- */
    --h-accent: #38bdf8;
    --h-accent-hi: #7dd3fc;
    --h-accent-bg: rgba(56, 189, 248, .09);

    /* --- verdicts. The instrument skin's pair. --- */
    --h-pass: #6fbf9a;
    --h-fail: #ff8066;

    /* --- neutral data ramp, derived on the background hue --- */
    --h-d1: #8fa6b8;
    --h-d2: #6a8194;
    --h-d3: #4a6073;
    --h-d4: #32475a;
    --h-d5: #1e3145;

    --h-display: var(--h-body);
    --h-data: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --h-body: 'DM Sans', system-ui, -apple-system, sans-serif;

    --h-ease: cubic-bezier(.16, 1, .3, 1);

    background: var(--h-ground);
    font-family: var(--h-body);
}

.home2 .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;
}

/* One focus treatment for the whole page, and it is never removed. */
.home2 a:focus-visible,
.home2 button:focus-visible {
    outline: 2px solid var(--h-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ---------------------------------------------------------------- shared -- */

.home2 .h-eyebrow {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 24px;
    color: var(--h-mute-2);
    font: 500 11.5px/1 var(--h-data);
    letter-spacing: .16em;
    text-transform: uppercase;
}
.home2 .h-eyebrow-n {
    color: var(--h-d3);
    font-variant-numeric: tabular-nums;
}
.home2 .h-eyebrow-n::after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 1px;
    margin-left: 12px;
    vertical-align: middle;
    background: currentColor;
}

.home2 .h-title {
    margin: 0;
    max-width: 20ch;
    color: var(--h-ink);
    font-family: var(--h-display);
    font-size: clamp(31px, 4.1vw, 54px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.028em;
    text-wrap: balance;
}
.home2 .h-title--sm { font-size: clamp(27px, 3.2vw, 42px); max-width: 22ch; }
.home2 .h-title--tight { max-width: 17ch; }
.home2 .h-title--center { max-width: 18ch; margin-inline: auto; text-align: center; }
.home2 .h-title em {
    font-style: italic;
    color: var(--h-ink-2);
}

.home2 .h-sub {
    max-width: 62ch;
    margin: 20px 0 0;
    color: var(--h-mute);
    font-size: 16.5px;
    line-height: 1.72;
}
.home2 .h-sub--center { margin-inline: auto; text-align: center; text-wrap: pretty; }
.home2 .h-sub--side { margin: 0; max-width: 44ch; }

/* The single accent object per viewport. */
.home2 .h-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 13px 26px;
    border: 1px solid var(--h-accent);
    border-radius: 4px;
    background: var(--h-accent);
    color: #04121f;
    font-family: var(--h-body);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-wrap: balance;
    transition: background .2s ease, border-color .2s ease, transform .2s var(--h-ease);
}
.home2 .h-cta:hover { background: var(--h-accent-hi); border-color: var(--h-accent-hi); transform: translateY(-1px); }
.home2 .h-cta--quiet {
    background: transparent;
    border-color: var(--h-rule-2);
    color: var(--h-ink);
    font-weight: 500;
}
.home2 .h-cta--quiet:hover { background: rgba(186, 230, 253, .05); border-color: var(--h-tick); }

.home2 .h-cta-alt {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
    color: var(--h-mute);
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.home2 .h-cta-alt:hover { color: var(--h-ink); border-bottom-color: var(--h-rule-2); }

.home2 .h-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin: 34px 0 0;
}
.home2 .h-cta-row--center { justify-content: center; }

/* ------------------------------------------------------------------ hero -- */

/* `overflow: clip`, not `hidden`. The bloom below sits at right: -8%, which is
   115px of overflow at 1440 — enough to make a `hidden` hero a real scroll
   container, and focussing a cohort chip then scroll-into-view'd the whole
   section 115px left, stranding an unpainted strip down the right edge. `clip`
   clips the bloom the same way and creates no scrollport to scroll. `hidden`
   stays as the fallback: a browser without `clip` must still clip the bloom,
   or it overflows the page instead of the section. */
.home2 .h-hero { position: relative; padding: 118px 0 62px; overflow: hidden; overflow: clip; }
/* The ambient canvas paints the whole section; everything else rides above it.
   Its own rules (position/inset/z-index) live in lab.css. */
.home2 .h-hero .shell { position: relative; z-index: 1; }
/* The bloom sits behind the product window rather than haloing the headline —
   it is what lifts the plate off the field. */
.home2 .h-hero::before {
    content: '';
    position: absolute;
    z-index: 0;
    right: -8%;
    top: -6%;
    width: min(74vw, 1040px);
    height: 660px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(56, 189, 248, .17), transparent 72%);
}
/* ---- the hero rig: one account, split five ways, by the visitor -----------
   The window chrome (.window-bar, .window-dot, .verified) comes from lab.css so
   this reads as the same instrument as every other screen on the page. */
.home2 .hc {
    position: relative;
    border: 1px solid var(--h-rule-2);
    border-radius: 12px;
    background: linear-gradient(168deg, rgba(13, 28, 48, .96), rgba(8, 20, 38, .97));
    box-shadow: 0 44px 90px -46px rgba(0, 0, 0, 1);
    overflow: hidden;
}
html.lab-js .home2 .hc { animation: hRigIn 1s var(--h-ease) backwards .1s; }
@keyframes hRigIn { from { opacity: 0; transform: translateY(16px) scale(.985); } }
.home2 .hc-body { padding: 18px 20px 16px; }

/* The prompt sits inline as a label to the left of the rack rather than as an
   11px line above it — that put it dead last in eye order, read after the
   answer instead of before the question. */
.home2 .hc-rack { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.home2 .hc-prompt {
    flex: none;
    margin: 0;
    color: var(--h-d2);
    font: 500 10.5px/1 var(--h-data);
    letter-spacing: .16em;
    text-transform: uppercase;
}
.home2 .hc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.home2 .hc-chip {
    position: relative;
    padding: 7px 12px;
    border: 1px solid var(--h-rule-2);
    border-radius: 999px;
    background: rgba(186, 230, 253, .04);
    color: var(--h-mute);
    font-family: var(--h-body);
    font-size: 12.5px;
    line-height: 1.3;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.home2 .hc-chip:hover { color: var(--h-ink-2); border-color: var(--h-tick); }
/* The selected condition is the one accent object inside the rig — a filled
   ground rather than a ring, so it reads as "pressed" and not just "labelled". */
.home2 .hc-chip.is-active {
    border-color: var(--h-accent);
    background: var(--h-accent);
    color: #04202f;
    font-weight: 500;
}
/* While the rig cycles on its own, the active chip's bar is the countdown to
   the next cohort. Scoped to html.lab-js so a no-JS visitor never sees a
   promise the page cannot keep, and killed the moment the visitor takes over
   (home-hero.js stamps .no-auto on first click/focus/hover). */
html.lab-js .home2 .hc-chip.is-active::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: rgba(4, 32, 47, .55);
    transform-origin: left;
    animation: hcChipCycle var(--cycle) linear backwards;
}
.home2 .hc.no-auto .hc-chip.is-active::after { content: none; }
@keyframes hcChipCycle { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.home2 .hc-panel { display: none; }
.home2 .hc-panel.is-on { display: block; }
.home2 .hc-panel[hidden] { display: none; }

/* The two cohorts as a comparison pair, in the app's own visual language: a
   label, a proportional track, a value. The relationship is the point, so they
   share one scale rather than sitting in two separate boxes. */
.home2 .hc-metric {
    margin: 16px 0 9px;
    color: var(--h-d2);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.home2 .hc-bars { margin: 0; display: grid; gap: 9px; }
.home2 .hc-bar {
    display: grid;
    grid-template-columns: minmax(0, 17em) minmax(0, 1fr);
    align-items: center;
    gap: 8px 22px;
    padding: 9px 14px;
    border: 1px solid var(--h-rule);
    border-radius: 6px;
    background: rgba(186, 230, 253, .03);
}
.home2 .hc-bar--focus { border-color: rgba(255, 128, 102, .3); background: rgba(255, 128, 102, .06); }
.home2 .hc-bar dt { color: var(--h-ink-2); font-size: 13.5px; line-height: 1.4; }
.home2 .hc-bar dt i { margin-left: 9px; color: var(--h-d3); font-size: 11px; font-style: normal; }
.home2 .hc-bar dd { display: flex; align-items: center; gap: 16px; margin: 0; min-width: 0; }
.home2 .hc-track {
    flex: 1 1 auto;
    height: 7px;
    border-radius: 4px;
    background: var(--h-d5);
    overflow: hidden;
}
.home2 .hc-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--h-d1);
    transform-origin: left;
}
.home2 .hc-bar--focus .hc-fill { background: var(--h-fail); }
.home2 .hc-bar dd b {
    flex: none;
    width: 4.4em;
    color: var(--h-ink);
    font-size: clamp(22px, 2.3vw, 30px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.03em;
    text-align: right;
}
.home2 .hc-bar--focus dd b { color: var(--h-fail); }
html.lab-js .home2 .hc-panel.is-on .hc-bar { animation: hRise .42s var(--h-ease) backwards; }
html.lab-js .home2 .hc-panel.is-on .hc-bar:nth-child(2) { animation-delay: .07s; }
/* The fill grows from the left as its cohort is selected — the bar IS the
   comparison, so it is drawn rather than swapped. */
html.lab-js .home2 .hc-panel.is-on .hc-fill { animation: hcFill .55s var(--h-ease) backwards .1s; }
@keyframes hcFill { from { transform: scaleX(0); } }

.home2 .hc-verdict {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin: 13px 0 0;
    padding-left: 12px;
    border-left: 2px solid var(--h-d4);
}
.home2 .hc-verdict--reported { border-left-color: var(--h-pass); }
.home2 .hc-verdict--declined { border-left-color: var(--h-fail); }
.home2 .hc-verdict--hypothesis { border-left-color: var(--h-d1); }
.home2 .hc-verdict-tag { font-size: 10px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.home2 .hc-verdict--reported .hc-verdict-tag { color: var(--h-pass); }
.home2 .hc-verdict--declined .hc-verdict-tag { color: var(--h-fail); }
.home2 .hc-verdict--hypothesis .hc-verdict-tag { color: var(--h-d1); }
.home2 .hc-verdict-why { flex: 1 1 16ch; color: var(--h-mute); font-size: 12.5px; line-height: 1.55; }
html.lab-js .home2 .hc-panel.is-on .hc-verdict { animation: hRise .42s var(--h-ease) backwards .12s; }

.home2 .hc-note { margin: 12px 0 0; color: var(--h-d3); font-size: 11px; line-height: 1.55; }

/* Headline, lead and calls to action left; the second product right; then the
   rig across the whole shell. The interactive object is the page's centrepiece,
   so it gets the width rather than sharing a column with the copy.

   These columns used to bottom-align, which read well as a rule and badly as a
   page: the aside started 223px above the headline, so the first thing a cold
   visitor met was the sub-copy, then the button, and the claim they explain came
   third. Both columns start at the top now, and the slack falls under the
   shorter one — the secondary card — where it costs nothing. */
.home2 .h-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 26px 64px;
    align-items: start;
}
.home2 .h-hero-aside .h-desk { margin-top: 0; }
.home2 .hc { grid-column: 1 / -1; margin-top: 4px; }
/* Both hero objects get the lit top edge the Inside-Edge-Pilot cards use, each
   in its own product's colour — amber for the market door, cyan for the rig. It
   is what makes those cards read as instruments rather than boxes. */
.home2 .h-desk::after,
.home2 .hc::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    pointer-events: none;
    opacity: .5;
}
.home2 .h-desk::after { background: linear-gradient(90deg, transparent, var(--inst), transparent); }
.home2 .hc::after { background: linear-gradient(90deg, transparent, var(--h-accent), transparent); }

/* ---- the second door -----------------------------------------------------
   Market Intelligence in the hero, carrying today's real reading. It uses the
   desk's own amber token (--inst on .prod--desk in lab.css) rather than the
   cyan accent, so the two products read as two products from the first screen
   without introducing a colour the design system did not already have. */
.home2 .h-door {
    --inst: #f2b544;
    display: block;
    margin: 20px 0 0;
    padding: 13px 15px 12px;
    border: 1px solid color-mix(in srgb, var(--inst) 26%, var(--h-rule));
    border-radius: 9px;
    background: linear-gradient(162deg, rgba(28, 24, 18, .55), rgba(10, 22, 40, .72));
    text-decoration: none;
    transition: border-color .22s ease, background .22s ease, transform .22s var(--h-ease);
}
.home2 .h-door:hover {
    border-color: color-mix(in srgb, var(--inst) 52%, transparent);
    transform: translateY(-1px);
}
.home2 .h-door-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.home2 .h-door-role {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--inst);
    font: 500 10px/1 var(--h-data);
    letter-spacing: .15em;
    text-transform: uppercase;
}
.home2 .h-door-role i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--inst);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inst) 18%, transparent);
}
html.lab-js .home2 .h-door-role i { animation: hPulse 2.6s ease-in-out infinite; }
.home2 .h-door-stamp { color: var(--h-d2); font-size: 10.5px; }
.home2 .h-door-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.home2 .h-door-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.home2 .h-door-name { flex: none; color: var(--h-ink-2); font-size: 13px; }
.home2 .h-door-mark { flex: none; font-size: 8px; color: var(--h-d2); }
.home2 .h-door-read { flex: none; color: var(--h-d2); font-size: 9.5px; letter-spacing: .1em; }
/* The sentiment gauge. get_market_pulse already returns a 5–95 needle position
   per asset class, deflected from centre by the model's own confidence, and
   until now nothing rendered it — the door was four words where it could have
   been four readings. Bearish left, bullish right, a centre tick for the
   neutral datum, and direction is still never carried by colour alone: the
   glyph and the word ride beside it. */
.home2 .h-door-gauge {
    position: relative;
    flex: 1 1 auto;
    min-width: 34px;
    height: 3px;
    border-radius: 2px;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--h-fail) 34%, transparent),
            var(--h-d5) 42%, var(--h-d5) 58%,
            color-mix(in srgb, var(--h-pass) 34%, transparent));
}
/* The centre datum, so a needle that has not moved still reads as "on the
   middle" rather than as a dot dropped at random. */
.home2 .h-door-gauge::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 1px;
    background: var(--h-rule);
}
.home2 .h-door-gauge i {
    position: absolute;
    top: 50%;
    left: var(--needle, 50%);
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent);
}
.home2 .h-door-row { color: var(--h-d1); }
.home2 .h-door-row--bullish { color: var(--h-pass); }
.home2 .h-door-row--bearish { color: var(--h-fail); }
/* The needles settle out of the centre once, staggered down the strip, so the
   reading arrives rather than being already there. Reduced motion drops it. */
html.lab-js .home2 .h-door-gauge i { animation: hNeedle .9s var(--h-ease) both .35s; }
html.lab-js .home2 .h-door-row:nth-child(2) .h-door-gauge i { animation-delay: .45s; }
html.lab-js .home2 .h-door-row:nth-child(3) .h-door-gauge i { animation-delay: .55s; }
html.lab-js .home2 .h-door-row:nth-child(4) .h-door-gauge i { animation-delay: .65s; }
@keyframes hNeedle { from { left: 50%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    html.lab-js .home2 .h-door-gauge i { animation: none; }
}
/* Two columns leave a 34px gauge on a phone, which is not a reading. One column
   gives each needle the door's full width. */
@media (max-width: 700px) {
    .home2 .h-door-rows { grid-template-columns: minmax(0, 1fr); gap: 9px; }
}
/* Direction is never carried by colour alone — every row ships a glyph and the
   word too. */
.home2 .h-door-row--bullish .h-door-mark,
.home2 .h-door-row--bullish .h-door-read { color: var(--h-pass); }
.home2 .h-door-row--bearish .h-door-mark,
.home2 .h-door-row--bearish .h-door-read { color: var(--h-fail); }
.home2 .h-door-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--h-rule);
    color: var(--h-mute-2);
    font-size: 12px;
}
.home2 .h-door-foot b { color: var(--h-ink-2); font-weight: 600; }
.home2 .h-door-go { margin-left: auto; color: var(--inst); transition: transform .22s var(--h-ease); }
.home2 .h-door:hover .h-door-go { transform: translateX(3px); }

/* ---- the desk ------------------------------------------------------------
   Market Intelligence in the hero, as an instrument rather than a caption. The
   rows are the tape — one asset class each, its own sentiment history drawn on
   a shared -1..+1 domain so the four curves are comparable — and the open row's
   panel is the reading. Same grammar as the Edge Lab rig further down the page,
   deliberately: the visitor learns the interaction once.

   Every figure comes out of the narrative snapshot the dashboard runs on
   (services/landing_metrics.py, get_market_desk). None of it is authored here.
   -------------------------------------------------------------------------- */
.home2 .h-desk {
    --inst: #f2b544;
    position: relative;
    margin: 20px 0 0;
    padding: 13px 15px 0;
    border: 1px solid color-mix(in srgb, var(--inst) 26%, var(--h-rule));
    border-radius: 9px;
    background: linear-gradient(162deg, rgba(28, 24, 18, .55), rgba(10, 22, 40, .72));
}
.home2 .h-desk .h-door-head { margin-bottom: 8px; }

.home2 .h-desk-tape { display: grid; gap: 1px; }
/* A row is a button, not a link: it switches the panel below rather than
   navigating, and the whole card used to be one anchor which made that
   impossible. The footer is the link now. */
.home2 .h-desk-row {
    display: grid;
    grid-template-columns: minmax(0, 88px) minmax(0, 1fr) 46px 10px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 5px 7px 5px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--h-d1);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .2s var(--h-ease), color .2s var(--h-ease);
}
.home2 .h-desk-row:hover { background: rgba(186, 230, 253, .05); }
.home2 .h-desk-row.is-on { background: rgba(242, 181, 68, .09); }
.home2 .h-desk-row:focus-visible { outline: 2px solid var(--inst); outline-offset: 1px; }
.home2 .h-desk-name {
    overflow: hidden;
    color: var(--h-mute);
    font-size: 12.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color .2s var(--h-ease);
}
.home2 .h-desk-row.is-on .h-desk-name { color: var(--h-ink); }

.home2 .h-desk-spark { display: block; width: 100%; height: 34px; overflow: visible; }
/* The strip is scaled non-uniformly on purpose, so the stroke has to opt out or
   a 120-wide path drawn into 150px renders a hairline on one axis and a rope on
   the other. */
.home2 .h-desk-line {
    fill: none;
    stroke: var(--h-d1);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: stroke .2s var(--h-ease);
}
.home2 .h-desk-zero { stroke: rgba(186, 230, 253, .20); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.home2 .h-desk-row--bullish .h-desk-line { stroke: var(--h-pass); }
.home2 .h-desk-row--bearish .h-desk-line { stroke: var(--h-fail); }
.home2 .h-desk-row--neutral .h-desk-line { stroke: var(--h-mute); }
/* The tape draws itself in once, top row first, then rests drawn. */
html.lab-js .home2 .h-desk-line { stroke-dasharray: 400; animation: hSparkDraw 1s var(--h-ease) both .5s; }
.home2 .h-desk-row:nth-child(2) .h-desk-line { animation-delay: .62s; }
.home2 .h-desk-row:nth-child(3) .h-desk-line { animation-delay: .74s; }
.home2 .h-desk-row:nth-child(4) .h-desk-line { animation-delay: .86s; }
@keyframes hSparkDraw { from { stroke-dashoffset: 400; } }

.home2 .h-desk-score {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--h-d1);
}
.home2 .h-desk-mark { font-size: 8px; color: var(--h-d2); }
/* Direction is never colour alone: the glyph carries it, and the panel below
   spells the regime out in words. */
.home2 .h-desk-score--bullish { color: var(--h-pass); }
.home2 .h-desk-score--bearish { color: var(--h-fail); }
.home2 .h-desk-score--neutral { color: var(--h-mute-2); }

.home2 .h-desk-read { margin: 8px 0 0; padding: 10px 8px 2px; border-top: 1px solid var(--h-rule); }
html.lab-js .home2 .h-desk-panel.is-on { animation: hRise .34s var(--h-ease) backwards; }
.home2 .h-desk-regime {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 9px;
    margin: 0;
    color: var(--h-ink);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.01em;
}
/* Where the regime turned over from. The desk logs narrative breaks and this is
   the newest one for the open class — the most concrete thing on the card, so
   it sits on the regime line rather than down with the counts. */
.home2 .h-desk-shift {
    color: var(--h-d2);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .01em;
}
.home2 .h-desk-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 16px;
    margin: 6px 0 0;
    color: var(--h-d2);
    font-size: 10.5px;
    letter-spacing: .04em;
}
.home2 .h-desk-stats b { color: var(--h-ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
/* The trending terms are the desk's own, verbatim. They are the one place on
   this page where the words are the market's rather than ours, so they are set
   as quoted material and not as our copy. */
.home2 .h-desk-terms { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 0; }
.home2 .h-desk-terms span {
    padding: 2px 8px 3px;
    border: 1px solid var(--h-rule);
    border-radius: 999px;
    color: var(--h-mute-2);
    font-size: 11px;
    line-height: 1.45;
}
.home2 .h-desk-foot { margin-top: 10px; padding: 10px 8px 12px; text-decoration: none; }
.home2 .h-desk-foot:hover .h-door-go { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    html.lab-js .home2 .h-desk-line { animation: none; stroke-dasharray: none; }
    html.lab-js .home2 .h-desk-panel.is-on { animation: none; }
}
/* On a phone the aside is full width, so the tape gets more room than it does
   beside the headline — the name column can afford to be readable. */
@media (max-width: 700px) {
    .home2 .h-desk-row { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) 48px 10px; }
}

.home2 .h-sig {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 22px;
    padding: 6px 15px 6px 6px;
    border: 1px solid var(--h-rule);
    border-radius: 999px;
    background: rgba(10, 22, 40, .6);
}
.home2 .h-sig-tag {
    color: var(--h-mute-2);
    /* Wraps to two lines on a phone, where 1.0 leading made them touch. */
    font: 500 10.5px/1.35 var(--h-data);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home2 .h-display {
    margin: 0;
    color: var(--h-ink);
    font-family: var(--h-display);
    font-size: clamp(40px, 5.1vw, 68px);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -.032em;
    text-wrap: balance;
}
/* The second line carries the turn, so it is the one that changes voice. The
   accent is NOT spent here — it belongs to the CTA in this viewport. Full ink
   though: at --h-ink-2 the differentiator was set dimmer than its own setup. */
.home2 .h-display em {
    font-style: italic;
    color: var(--h-ink);
}

.home2 .h-lead {
    max-width: 46ch;
    margin: 26px 0 0;
    color: var(--h-mute);
    font-size: 17.5px;
    line-height: 1.68;
}

/* Proof of substance: small, monospaced, and not a stats band. It spans the
   whole hero grid rather than sitting inside the copy column, so it reads as
   the hero's footer rule and cannot orphan its last item. */
.home2 .h-strip {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    margin: 8px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--h-rule);
    list-style: none;
}
.home2 .h-strip li {
    color: var(--h-mute-2);
    font: 400 12px/1.45 var(--h-data);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.home2 .h-strip b { color: var(--h-ink-2); font-weight: 600; }
@keyframes hPlotDraw { to { stroke-dashoffset: 0; } }
@keyframes hFade { to { opacity: 1; } }

/* ------------------------------------------------------------------ rail -- */

/* A row of the hero grid, not a section of its own: see templates/landing.html.
   The hero's canvas and bloom stop at the section boundary, so a rail below it
   put a background edge between two rows that read as one block. */
.home2 .h-rail-inner {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px 30px;
    flex-wrap: wrap;
    margin: 22px 0 0;
}
/* The label sits one row under .h-strip and is the same kind of thing — a count
   in mono — so it sets in the strip's register. Uppercase and .14em tracking made
   the two rows read as two unrelated lists rather than one hero footer. */
.home2 .h-rail-label {
    flex: none;
    margin: 0;
    color: var(--h-mute-2);
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: .02em;
}
.home2 .h-rail-label b { color: var(--h-ink-2); font-weight: 600; }
.home2 .h-rail-marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    min-width: 0;
}
/* Every mark is locked to one height and takes its own width from the artwork's
   viewBox ratio, so the gaps between marks are the flex gap and nothing else. A
   fixed 88px slot for wordmarks left up to 18px of dead air on each side of the
   narrow ones, which is what made the rail read as unevenly spaced. */
.home2 .h-mark {
    --int-h: 20px;
    width: calc(var(--int-h) * var(--int-ratio, 1));
    height: var(--int-h);
    background: var(--int-fill, #9db4c7);
    opacity: .82;
    -webkit-mask: var(--int-mark) no-repeat center / contain;
    mask: var(--int-mark) no-repeat center / contain;
    transition: opacity .3s ease, background .3s ease;
}
/* A wordmark at a symbol's cap height reads heavier than the symbols beside it. */
.home2 .h-mark--wide { --int-h: 16px; }
/* MT4 and MT5 have no silhouette — only a full-bleed raster app icon, whose
   alpha is opaque edge to edge. It is an <img>, so it must opt out of the mask
   and the fill above or the base rule paints a flat rectangle over it. The
   digit in the centre disc is the only thing separating the two, and it reads
   only in colour, so this one keeps its square. */
.home2 .h-mark--color {
    width: var(--int-h);
    background: none;
    -webkit-mask: none;
    mask: none;
    object-fit: contain;
    border-radius: 4px;
}
.home2 .h-mark:hover { opacity: 1; }

/* ---------------------------------------------------------------- mirror -- */

.home2 .h-mirror { padding: 84px 0 92px; }
.home2 .h-recog {
    margin: 46px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.home2 .h-recog-row {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: baseline;
    gap: 0 8px;
    padding: 22px 0;
}
/* The rule is drawn per row rather than as a border, so it can rule itself in
   left-to-right as the section reveals — a register being written. */
.home2 .h-recog-row::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--h-rule);
    transform-origin: left;
}
.home2 .h-recog-n {
    color: var(--h-d3);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .1em;
}
.home2 .h-recog-line {
    margin: 0;
    max-width: none;
    color: var(--h-ink);
    font-family: var(--h-display);
    font-size: clamp(20px, 2.5vw, 34px);
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -.02em;
    text-wrap: pretty;
}
html.lab-js .home2 .h-recog:not(.is-visible) .h-recog-row::before { transform: scaleX(0); }
html.lab-js .home2 .h-recog.is-visible .h-recog-row::before {
    animation: hRule .6s var(--h-ease) backwards;
    animation-delay: calc(var(--row) * .07s);
}
@keyframes hRule { from { transform: scaleX(0); } }

.home2 .h-turn {
    margin: 46px 0 0;
    padding: 24px 0 0 24px;
    border-top: 1px solid var(--h-rule);
    border-left: 2px solid var(--h-fail);
    max-width: 58ch;
    margin-left: auto;
}
.home2 .h-turn-line {
    margin: 0;
    color: var(--h-ink-2);
    font-size: 17px;
    line-height: 1.7;
    text-wrap: pretty;
}
.home2 .h-turn-line b { color: var(--h-ink); font-weight: 600; }

/* ----------------------------------------------------------------- bench -- */

.home2 .h-bench {
    padding: 84px 0 96px;
    border-top: 1px solid var(--h-rule);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(56, 189, 248, .05), transparent 62%),
        var(--h-ground);
}

.home2 .h-rig {
    display: grid;
    grid-template-columns: minmax(268px, 330px) minmax(0, 1fr);
    gap: 22px;
    margin: 44px 0 0;
    align-items: start;
}

.home2 .h-rack {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 1px solid var(--h-rule);
    border-radius: 5px;
    background: var(--h-panel);
    overflow: hidden;
}
.home2 .h-rack-head {
    margin: 0;
    padding: 13px 16px;
    border-bottom: 1px solid var(--h-rule);
    color: var(--h-d2);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.home2 .h-switch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 14px 16px 14px 18px;
    border: 0;
    border-top: 1px solid var(--h-rule);
    background: transparent;
    color: var(--h-mute);
    font-family: var(--h-body);
    font-size: 13.5px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.home2 .h-rack .h-switch:first-of-type { border-top: 0; }
.home2 .h-switch::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--h-accent);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .22s var(--h-ease);
}
.home2 .h-switch:hover { background: rgba(186, 230, 253, .035); color: var(--h-ink-2); }
/* The selected switch is this viewport's one accent object. */
.home2 .h-switch.is-active {
    background: var(--h-raise);
    color: var(--h-ink);
}
.home2 .h-switch.is-active::before { transform: scaleY(1); }
.home2 .h-switch-label { min-width: 0; }

.home2 .h-chip {
    flex: none;
    padding: 3px 7px;
    border: 1px solid currentColor;
    border-radius: 2px;
    font: 500 9.5px/1.25 var(--h-data);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.home2 .h-chip--reported { color: var(--h-pass); }
.home2 .h-chip--declined { color: var(--h-fail); }
.home2 .h-chip--hypothesis { color: var(--h-d1); }

.home2 .h-stack { min-width: 0; }
.home2 .h-panel {
    display: block;
    padding: 26px 28px 24px;
    border: 1px solid var(--h-rule);
    border-radius: 5px;
    background: var(--h-inset);
}
.home2 .h-panel[hidden] { display: none; }

.home2 .h-readout {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 20px 34px;
    align-items: center;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--h-rule);
}
.home2 .h-effect {
    display: block;
    color: var(--h-ink);
    font-size: clamp(36px, 4.6vw, 56px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.03em;
}
.home2 .h-effect-cap {
    display: block;
    max-width: 20ch;
    margin-top: 9px;
    color: var(--h-d2);
    font-size: 11.5px;
    line-height: 1.5;
}
.home2 .h-groups { margin: 0; display: grid; gap: 10px; min-width: 0; }
.home2 .h-group {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 12px;
    border-radius: 3px;
    background: rgba(186, 230, 253, .035);
}
.home2 .h-group--focus { background: rgba(186, 230, 253, .075); }
.home2 .h-group dt {
    min-width: 0;
    color: var(--h-ink-2);
    font-size: 13.5px;
    line-height: 1.4;
}
.home2 .h-group dt i { margin-left: 8px; color: var(--h-d2); font-size: 11px; font-style: normal; }
.home2 .h-group dd {
    flex: none;
    margin: 0;
    font-size: 17px;
    font-weight: 500;
}
.home2 .h-group dd.is-pos { color: var(--h-pass); }
.home2 .h-group dd.is-neg { color: var(--h-fail); }
/* A figure that sits on zero is not a loss, and painting it coral would say it
   was. The baseline groups and the two London cohorts read in plain ink. */
.home2 .h-group dd.is-flat { color: var(--h-ink-2); }

/* The ladder. Four checks and the gate precondition, resolved in order —
   the stagger is the explanation, not a decoration of it. */
.home2 .h-gates { margin: 0; padding: 4px 0 0; list-style: none; }
.home2 .h-gate {
    display: grid;
    grid-template-columns: minmax(120px, 15.5em) minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--h-rule);
}
.home2 .h-gate-name {
    color: var(--h-d2);
    font-size: 10.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.home2 .h-gate-value {
    min-width: 0;
    color: var(--h-ink-2);
    font-size: 13px;
    letter-spacing: -.01em;
}
.home2 .h-gate-value i { color: var(--h-d2); font-size: 11.5px; font-style: normal; letter-spacing: 0; }
.home2 .h-gate--pass .h-gate-value { color: var(--h-ink); }
.home2 .h-gate--fail .h-gate-value { color: var(--h-fail); }
.home2 .h-gate--none .h-gate-value { color: var(--h-mute); }

/* Verdict marks drawn from borders — no icon file ships for five glyphs. */
.home2 .h-gate-mark {
    position: relative;
    width: 16px;
    height: 16px;
}
.home2 .h-gate--pass .h-gate-mark::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid var(--h-pass);
    border-width: 0 1.8px 1.8px 0;
    transform: rotate(42deg);
}
.home2 .h-gate--fail .h-gate-mark::before,
.home2 .h-gate--fail .h-gate-mark::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 7px;
    width: 14px;
    height: 1.8px;
    background: var(--h-fail);
}
.home2 .h-gate--fail .h-gate-mark::before { transform: rotate(45deg); }
.home2 .h-gate--fail .h-gate-mark::after { transform: rotate(-45deg); }
.home2 .h-gate--none .h-gate-mark::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 7px;
    width: 10px;
    height: 1.5px;
    background: var(--h-d3);
}

.home2 .h-ruling {
    display: grid;
    gap: 9px;
    margin: 20px 0 0;
    padding: 16px 0 0 18px;
    border-left: 2px solid var(--h-d4);
}
.home2 .h-ruling--reported { border-left-color: var(--h-pass); }
.home2 .h-ruling--declined { border-left-color: var(--h-fail); }
.home2 .h-ruling--hypothesis { border-left-color: var(--h-d1); }
.home2 .h-ruling-verdict {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.home2 .h-ruling--reported .h-ruling-verdict { color: var(--h-pass); }
.home2 .h-ruling--declined .h-ruling-verdict { color: var(--h-fail); }
.home2 .h-ruling--hypothesis .h-ruling-verdict { color: var(--h-d1); }
.home2 .h-ruling-why {
    max-width: 68ch;
    color: var(--h-mute);
    font-size: 14.5px;
    line-height: 1.68;
    text-wrap: pretty;
}

/* The page's single largest motion moment. A panel becoming active goes
   display:none → block, which restarts these, so flipping a switch re-runs the
   ladder top to bottom without a line of JavaScript. */
html.lab-js .home2 .h-panel.is-active .h-readout { animation: hRise .5s var(--h-ease) backwards; }
html.lab-js .home2 .h-panel.is-active .h-gate {
    animation: hGate .46s var(--h-ease) backwards;
    animation-delay: calc(.16s + var(--i) * .105s);
}
html.lab-js .home2 .h-panel.is-active .h-gate-mark {
    animation: hMark .3s var(--h-ease) backwards;
    animation-delay: calc(.34s + var(--i) * .105s);
}
html.lab-js .home2 .h-panel.is-active .h-ruling {
    animation: hRise .5s var(--h-ease) backwards .72s;
}
@keyframes hRise { from { opacity: 0; transform: translateY(7px); } }
@keyframes hGate { from { opacity: 0; transform: translateX(-9px); } }
@keyframes hMark { from { opacity: 0; transform: scale(.5); } }

.home2 .h-bench-foot {
    max-width: 74ch;
    margin: 34px 0 0;
    color: var(--h-mute-2);
    font-size: 14.5px;
    line-height: 1.7;
    text-wrap: pretty;
}

/* --------------------------------------------------------- evidence feed -- */
/* The cards inside are the product's own component under its own skin
   (edge-cards.css). Everything here is the frame around them. */

.home2 .h-evidence {
    padding: 84px 0 92px;
    border-top: 1px solid var(--h-rule);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(56, 189, 248, .05), transparent 62%),
        var(--h-ground);
}
.home2 .h-ev-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 34px 0 20px;
}
.home2 .h-ev-tab {
    padding: 8px 15px;
    border: 1px solid var(--h-rule);
    border-radius: 999px;
    background: rgba(186, 230, 253, .04);
    color: var(--h-mute);
    font: 500 11.5px/1 var(--h-data);
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.home2 .h-ev-tab:hover { color: var(--h-ink-2); border-color: var(--h-rule-2); }
.home2 .h-ev-tab.is-active {
    border-color: var(--h-accent);
    background: var(--h-accent-bg);
    color: var(--h-accent-hi);
}
/* The mount carries #edge-overview-root, which is what scopes the real skin and
   its --edge-* tokens onto the cards. It must not restyle them itself. */
.home2 .h-ev-mount { display: grid; gap: 14px; }
.home2 .h-ev-note {
    max-width: 74ch;
    margin: 26px 0 0;
    color: var(--h-d2);
    font-size: 12.5px;
    line-height: 1.65;
}

/* ------------------------------------------------------------------ spec -- */
/* Deliberately motionless. The bench shows the gates deciding; this shows
   what they are, with the engine's own constants quoted rather than
   described. */

.home2 .h-spec {
    padding: 84px 0 90px;
    border-top: 1px solid var(--h-rule);
    background: var(--h-panel);
}
.home2 .h-spec-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 46px;
    margin: 46px 0 0;
}
.home2 .h-spec-col--checks { padding-left: 46px; border-left: 1px solid var(--h-rule); }
.home2 .h-spec-head {
    margin: 0;
    color: var(--h-mute);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.home2 .h-spec-intro {
    max-width: 46ch;
    margin: 12px 0 0;
    color: var(--h-d2);
    font-size: 13.5px;
    line-height: 1.6;
}
.home2 .h-spec-list { margin: 22px 0 0; --h-const-w: 76px; }
.home2 .h-spec-row { padding: 16px 0; border-top: 1px solid var(--h-rule); }
.home2 .h-spec-row dt {
    display: flex;
    align-items: baseline;
    gap: 14px;
    color: var(--h-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}
.home2 .h-spec-const {
    flex: none;
    min-width: 5.2em;
    padding: 3px 7px;
    border: 1px solid var(--h-rule-2);
    border-radius: 2px;
    color: var(--h-ink-2);
    font-size: 11.5px;
    font-weight: 500;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.home2 .h-spec-row dd {
    margin: 8px 0 0 calc(var(--h-const-w) + 14px);
    max-width: 46ch;
    color: var(--h-mute);
    font-size: 14px;
    line-height: 1.65;
    text-wrap: pretty;
}

.home2 .h-payload {
    max-width: 30ch;
    margin: 54px 0 0;
    color: var(--h-ink);
    font-family: var(--h-display);
    font-size: clamp(22px, 2.5vw, 33px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.home2 .h-payload em { font-style: italic; color: var(--h-fail); }

/* ------------------------------------------------------------------ tour -- */

/* .h-product ran straight into inside-lab as 2,270px of undifferentiated
   transparent ground — the stretch where the page reads as slides. A hairline
   hands one band off to the next, the way .h-shared-band above does. */
.home2 .h-product { padding: 88px 0 56px; border-bottom: 1px solid var(--h-rule); }
/* .inside-lab lives in lab.css and carries no top padding — on the product
   page the section above it supplies the gap. Here it follows the hairline
   directly, so its heading sat on the rule. Give it the band rhythm. */
.home2 .inside-lab { padding-top: 78px; }
.home2 .h-tour-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 44px;
}
.home2 .h-product .prod { margin-top: 40px; }
.home2 .h-deck-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 14px;
}
.home2 .h-deck-tab {
    position: relative;
    padding: 9px 15px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--h-mute-2);
    font: 500 11.5px/1 var(--h-data);
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.home2 .h-deck-tab:hover { color: var(--h-ink-2); }
.home2 .h-deck-tab.is-active {
    border-color: var(--h-rule-2);
    background: var(--h-panel);
    color: var(--h-ink);
}
.home2 .h-deck-frame {
    border: 1px solid var(--h-rule-2);
    border-radius: 7px;
    background: var(--h-inset);
    overflow: hidden;
}
.home2 .h-deck-panel { margin: 0; padding: 16px; }
.home2 .h-deck-panel[hidden] { display: none; }
html.lab-js .home2 .h-deck-panel.is-active { animation: hFadeIn .4s var(--h-ease) backwards; }
@keyframes hFadeIn { from { opacity: 0; } }


/* ---------------------------------------------------------------- market -- */
/* A wire column, not a second dashboard. The only long-form serif prose on
   the page, and it is today's — read out of the same cache a subscriber
   opens. */

/* The desk gets its own band so the eye registers a change of subject before a
   heading is read. The amber product accent inside it is lab.css's existing
   per-product token (--inst on .prod--desk), not a new brand colour. */
.home2 .h-market {
    padding: 78px 0 34px;
    border-top: 1px solid var(--h-rule);
    background: var(--h-panel);
}
.home2 .h-shared-band {
    padding: 76px 0 92px;
    border-top: 1px solid var(--h-rule);
    border-bottom: 1px solid var(--h-rule);
    background: var(--h-panel);
}
.home2 .h-market .prod,
.home2 .h-shared-band .duo-spine { margin: 0; }
/* The live stamp sits in the copy column, under the product name. */
.home2 .h-market .h-dateline { margin: 0; }
.home2 .h-market .h-dateline b { color: var(--h-ink-2); font-weight: 600; }
.home2 .h-eyebrow--wire { color: var(--h-mute); }
.home2 .h-dateline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 20px 0 0;
    color: var(--h-mute-2);
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.home2 .h-dateline-sep { color: var(--h-d3); }
/* The one accent object in this viewport. */
.home2 .h-live {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--h-accent);
    box-shadow: 0 0 0 3px var(--h-accent-bg);
}
html.lab-js .home2 .h-live { animation: hPulse 2.6s ease-in-out infinite; }
@keyframes hPulse { 50% { box-shadow: 0 0 0 6px transparent; opacity: .55; } }


/* ----------------------------------------------------------------- trust -- */

/* .h-market above is --h-panel and this section is the ground, so the seam was
   a hard step. Resolve the panel into the ground instead of cutting it. */
.home2 .h-trust {
    padding: 120px 0 108px;
    background: linear-gradient(var(--h-panel), var(--h-ground) 260px);
}
/* Open columns on hairline rules, not a boxed table: the three cards carry
   different amounts of copy, and a box made that raggedness the loudest thing
   in the section. Same divider pattern as .h-spec-cols. */
.home2 .h-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr auto;
    row-gap: 0;
    margin: 46px 0 0;
}
/* Subgrid, so value / heading / copy / footnote each sit on a row shared by all
   three columns. Bottoming the footnote with `margin-top: auto` was not enough:
   the notes are 2, 3 and 5 lines, so their rules still landed at three
   different heights. On a shared row they land on one line. */
.home2 .h-trust-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    padding: 0 36px;
}
.home2 .h-trust-card:first-child { padding-left: 0; }
.home2 .h-trust-card:last-child { padding-right: 0; }
.home2 .h-trust-card + .h-trust-card { border-left: 1px solid var(--h-rule); }
/* One face, one size, one baseline for all three readings. The old
   italic-display "Yours" beside two mono numerals read as a fourth voice in a
   page that allows exactly two. The h3 below each value already names what it
   counts, so the value needs no caption of its own. */
.home2 .h-trust-card .h-trust-value {
    margin: 0 0 18px;
    color: var(--h-ink);
    font-size: 42px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.045em;
}
/* Optical, not metric: five mono characters set at the size of a single digit
   outweigh it badly, so the word steps down until the three read as equals. */
.home2 .h-trust-card .h-trust-value--word {
    /* Bottom of the shared value row, so the smaller word sits on the same
       baseline as the digits instead of floating at the row's top edge. */
    align-self: end;
    font-size: 31px;
    letter-spacing: -.02em;
}
.home2 .h-trust-card h3 {
    margin: 0 0 10px;
    color: var(--h-ink);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.005em;
}
/* Scoped to the card so the value and the note below out-specify it rather
   than needing !important to win. */
.home2 .h-trust-card p {
    margin: 0;
    color: var(--h-mute);
    font-size: 14px;
    line-height: 1.65;
    text-wrap: pretty;
}
/* The 1fr copy row would otherwise size to the tallest card exactly, putting
   its footnote rule flush against the last line. */
.home2 .h-trust-card h3 + p { margin-bottom: 28px; }
.home2 .h-trust-card .h-trust-note {
    padding-top: 15px;
    border-top: 1px solid var(--h-rule);
    color: var(--h-d2);
    font-size: 12px;
    line-height: 1.65;
}
/* Second of the two waypoint CTAs closing the signup dead zone — quieter than
   the hero/close CTA, reusing lab.css's ghost button rather than a third style. */
.home2 .h-trust-cta { justify-content: center; margin: 34px 0 0; }

/* ----------------------------------------------------------------- close -- */

.home2 .h-close {
    padding: 90px 0 104px;
    border-top: 1px solid var(--h-rule);
    background:
        radial-gradient(90% 130% at 50% 100%, rgba(56, 189, 248, .07), transparent 64%),
        var(--h-ground);
    text-align: center;
}
/* The disclaimer is set, not hidden. This audience reads it, and a well-set
   one is itself a trust signal. */
.home2 .h-disclaimer {
    max-width: 76ch;
    margin: 52px auto 0;
    padding-top: 22px;
    border-top: 1px solid var(--h-rule);
    color: var(--h-d2);
    font-size: 12.5px;
    line-height: 1.75;
    text-align: left;
    text-wrap: pretty;
}

/* -------------------------------------------------------------- autopilot -- */
/* The terminal above is the whole promise made concrete; without this the
   section stopped dead into empty ground once the demo ended. Same
   spec-sheet idiom as .h-spec above — the engine's own settings quoted
   rather than re-described — because a demo panel asking to be trusted
   earns that by being exact, not by another round of screenshots. */
.home2 .h-autopilot .h-ap-detail {
    margin-top: 64px;
    padding-top: 56px;
    border-top: 1px solid var(--h-rule);
}
.home2 .h-autopilot .h-ap-cols { margin-top: 34px; }
/* h-spec-row dt has no wrap of its own — fine for a short label, but this
   block's headings run longer than the ones the rule was written for, so
   pin a wrap here rather than risk overflow at narrow widths. */
.home2 .h-autopilot .h-spec-row dt { flex-wrap: wrap; row-gap: 4px; }
/* The waypoint CTA lived on its own band below the section: a lone button
   centred on empty ground under a section that had already ended. It now
   closes this one, opposite the licence footnote, on the same rule. */
.home2 .h-autopilot .h-ap-close {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px 40px;
    margin-top: 46px;
    padding-top: 26px;
    border-top: 1px solid var(--h-rule);
}
.home2 .h-autopilot .h-ap-cta { flex: 0 0 auto; }
.home2 .h-autopilot .h-ap-foot {
    flex: 1 1 44ch;
    max-width: 68ch;
    margin: 0;
    color: var(--h-mute);
    font-size: 13px;
    line-height: 1.7;
    text-wrap: pretty;
}
.home2 .h-autopilot .h-ap-foot b {
    color: var(--h-ink-2);
    font-family: var(--h-data);
    font-weight: 500;
}

/* tm__hint bugfix: the left sentence and the live #tm-log status shared one
   flex row, and at this section's width the sentence alone left no room —
   the log truncated mid-word. The explanation now lives in .h-ap-detail
   above, so the strip keeps a short label and gives the log the rest of the
   row; min-width: 0 lets its own ellipsis do the truncating instead of the
   row overflowing. */
.home2 .h-autopilot .tm__hint { flex-wrap: nowrap; }
.home2 .h-autopilot .tm__hint-label { flex: none; }
.home2 .h-autopilot .tm__log { flex: 1 1 auto; min-width: 0; margin-left: 0; }
.home2 .h-autopilot .tm__log span { max-width: none; flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1040px) {
    /* The claim is the count in .h-rail-label, not an exhaustive directory. Below
       this width the full set wraps and orphans its widest mark onto a line of its
       own — cap the rail at 12 so it stays one row and a glance. */
    .home2 .h-rail-marks .h-mark:nth-child(n+13) { display: none; }

    .home2 .h-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 46px; }
    .home2 .h-rig { grid-template-columns: minmax(0, 1fr); }
    /* The rack becomes a horizontal strip so the panel keeps the full width
       and the signature moment stays intact rather than being simplified. */
    .home2 .h-rack {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        /* Room for the overlay scrollbar, which otherwise lands exactly on the
           active switch's underline. */
        padding-bottom: 7px;
        scrollbar-width: thin;
        scrollbar-color: var(--h-d4) transparent;
    }
    .home2 .h-rack::-webkit-scrollbar { height: 5px; }
    .home2 .h-rack::-webkit-scrollbar-thumb { background: var(--h-d4); border-radius: 3px; }
    .home2 .h-rack::-webkit-scrollbar-track { background: transparent; }
    .home2 .h-rack-head { display: none; }
    .home2 .h-switch {
        flex: 0 0 auto;
        width: auto;
        min-width: 190px;
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
        border-top: 0;
        border-left: 1px solid var(--h-rule);
        scroll-snap-align: start;
    }
    .home2 .h-rack .h-switch:first-of-type { border-left: 0; }
    .home2 .h-switch::before { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 2px; transform: scaleX(0); }
    .home2 .h-switch.is-active::before { transform: scaleX(1); }
    .home2 .h-spec-cols { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .home2 .h-spec-col--checks { padding-left: 0; padding-top: 34px; border-left: 0; border-top: 1px solid var(--h-rule); }
    /* One column has no sibling row to align to, so the subgrid comes off and
       the footnote goes back to bottoming itself inside a flex column. */
    .home2 .h-trust-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        gap: 34px;
    }
    .home2 .h-trust-card {
        display: flex;
        flex-direction: column;
        grid-row: auto;
        padding: 0;
    }
    .home2 .h-trust-card .h-trust-note { margin-top: auto; }
    .home2 .h-trust-card + .h-trust-card {
        padding-top: 34px;
        border-left: 0;
        border-top: 1px solid var(--h-rule);
    }
}

@media (max-width: 720px) {
    .home2 .h-hero { padding: 118px 0 56px; }
    /* One fewer again on a phone: 12 wraps 11 + an orphan. */
    .home2 .h-rail-marks .h-mark:nth-child(n+12) { display: none; }
    .home2 .h-mirror,
    .home2 .h-bench,
    .home2 .h-spec,
    .home2 .h-tour,
    .home2 .h-market,
    .home2 .h-trust { padding-top: 62px; padding-bottom: 64px; }
    .home2 .h-close { padding: 68px 0 76px; }
    .home2 .inside-lab { padding-top: 62px; }
    .home2 .h-autopilot .h-ap-detail { margin-top: 44px; padding-top: 40px; }
    .home2 .h-autopilot .h-ap-cols { margin-top: 26px; }
    /* The row has already wrapped by here; give the button the full width
       rather than leaving it stranded under the footnote. */
    .home2 .h-autopilot .h-ap-close { gap: 22px; }
    .home2 .h-autopilot .h-ap-cta { width: 100%; }

    .home2 .h-recog-row { grid-template-columns: 34px minmax(0, 1fr); padding: 17px 0; }
    .home2 .h-recog-line { max-width: none; }
    .home2 .h-turn { margin-left: 0; padding-left: 18px; }

    .home2 .h-panel { padding: 20px 17px 20px; }
    .home2 .h-readout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .home2 .h-effect-cap { max-width: none; }
    /* The ladder keeps all five rows and both values on a phone; only the
       column geometry changes. */
    .home2 .h-gate {
        grid-template-columns: minmax(0, 1fr) 16px;
        gap: 4px 12px;
        padding: 12px 0;
    }
    .home2 .h-gate-name { grid-column: 1; }
    .home2 .h-gate-mark { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .home2 .h-gate-value { grid-column: 1; }

    .home2 .h-cta { width: 100%; }
    .home2 .h-cta-row { gap: 12px; }
    .home2 .h-deck-panel { padding: 10px; }
    .home2 .h-spec-row dd { margin-left: 0; }

    /* At phone width the curve is a sparkline: 259 trades land ~1px apart, so
       the axis digits would be sub-4px and the gutter they need is worth more
       to the plot. The dots are scaled up to stay legible at that size. */
    /* 17em for the label left 0px for the value on a phone: the track collapsed
       and the percentage — the one number the widget exists to show — rendered
       past the right edge of the card. Stack instead. */
    .home2 .hc-bar { grid-template-columns: minmax(0, 1fr); gap: 7px; }
    .home2 .hc-bar dd b { font-size: 24px; width: auto; }

    /* Five chips run 726px against ~350px available at this width; wrapped
       three rows deep they pushed the panel below the fold with no hint they
       were switchable. A horizontal snap strip, same pattern as .h-rack
       above, keeps them one row and makes them look draggable. */
    .home2 .hc-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        scrollbar-width: thin;
        scrollbar-color: var(--h-d4) transparent;
    }
    .home2 .hc-chips::-webkit-scrollbar { height: 5px; }
    .home2 .hc-chips::-webkit-scrollbar-thumb { background: var(--h-d4); border-radius: 3px; }
    .home2 .hc-chips::-webkit-scrollbar-track { background: transparent; }
    .home2 .hc-chip {
        flex: 0 0 auto;
        scroll-snap-align: start;
        /* 13px/14px against the 12.5px/1.3 chip font clears the 44px tap
           minimum (16.25px line box + 26px padding + 2px border). */
        padding: 13px 14px;
    }
}

/* --------------------------------------------------------- reduced motion -- */
/* Everything resolves to its finished state. The bench still switches, the
   ladder still reads, the plot is still drawn — nothing moves to get there. */
@media (prefers-reduced-motion: reduce) {
    html.lab-js .home2 .h-recog:not(.is-visible) .h-recog-row::before { transform: none; }

    .home2 *,
    .home2 *::before,
    .home2 *::after {
        animation: none !important;
        transition: none !important;
    }
}