/* ═══════════════════════════════════════════════════════════════
   APEXVOL MARKETING v5 — HOMEPAGE
   Layered ON TOP of marketing-v4.css; it does not replace it. v4
   owns the design language (tokens, type, buttons, cards, exhibit
   frame, sections, FAQ, pricing, final CTA) and every other public
   page still renders from it untouched. This file adds only what
   the homepage redesign needed:

     1. a compressed hero, so the product is visible at the fold
        instead of ~1750px of headline
     2. .mx5-switch — the module switcher that replaced the 3,288px
        alternating spotlight strip
     3. .mx5-try    — the loud no-signup entry band
     4. .mx5-proof  — 2x detail crops, the only place on the page
        where a visitor can actually READ a number off the product
     5. .mx5-gal    — the breadth wall + lightbox

   Scope: everything hero-related is under body.mx-home5 so the
   other v4 pages (features, pricing, docs) are unaffected.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── 1. HERO COMPRESSION ───────────
   v4's hero ran 1754px tall: nothing but type filled the first screen.
   These overrides bring the copy block to ~385px so the switcher's
   top third lands above the fold on a 800px viewport. */
body.mx-home5 .mx-hero { padding: 52px 24px 0; max-width: 1240px; }
/* 1000px pairs with the 3.1rem ceiling below so "Your entire options desk."
   sets on ONE line (measured: it needs 944px at 49.6px/125% stretch) instead of
   orphaning "desk." — the headline becomes a clean two-line lockup. The extra
   56px is deliberate slack for font-loading and platform metric differences.
   Type and box both scale off the viewport, so the relationship holds as the
   screen narrows; below ~1050px it wraps to three lines gracefully. */
body.mx-home5 .mx-hero-inner { max-width: 1000px; }
body.mx-home5 .mx-hero-pill { margin-bottom: 18px; }
/* Height comes off the type size, not the line count: v4's 5.2rem ceiling
   drops to 3.1rem, shedding ~180px of hero. */
body.mx-home5 .mx-h1 { font-size: clamp(2.05rem, 4.4vw, 3.1rem); }
body.mx-home5 .mx-hero-sub {
    font-size: clamp(15.5px, 1.4vw, 17.5px);
    margin-top: 20px;
    max-width: 660px;
}
body.mx-home5 .mx-hero-ctas { margin-top: 26px; gap: 12px; }

/* Google sign-in kept, but inline as a third button instead of v4's
   stacked "or" divider block — same affordance, ~70px less height. */
body.mx-home5 .mx-hero-ctas .mx-google-btn { padding: 14px 20px; }
@media (max-width: 560px) {
    body.mx-home5 .mx-hero-ctas { flex-direction: column; align-items: stretch; }
    body.mx-home5 .mx-hero-ctas > * { justify-content: center; }
}

/* ─────────── 2. MODULE SWITCHER ─────────── */
.mx5-switch { position: relative; margin-top: 34px; }

/* Tab rail, deliberately styled like the terminal's own VIEW tabs —
   mono, uppercase, blue underline on the active item. */
.mx5-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    border: 1px solid var(--mx-line);
    border-bottom: 0;
    border-radius: var(--mx-radius) var(--mx-radius) 0 0;
    background: var(--mx-panel-2);
    padding: 0 6px;
}
.mx5-tabs::-webkit-scrollbar { display: none; }
.mx5-tab {
    flex: 0 0 auto;
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 13px 15px 11px;
    font-family: var(--mx-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mx-mute);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.mx5-tab:hover { color: var(--mx-ink-2); }
.mx5-tab[aria-selected="true"] { color: var(--mx-ink); border-bottom-color: var(--mx-blue); }
.mx5-tab:focus-visible { outline: 2px solid var(--mx-blue); outline-offset: -2px; }

/* Stage. The aspect ratio is locked to the capture size (1400x875) so the
   box never reflows as slides swap or lazy-load. */
.mx5-stage {
    position: relative;
    aspect-ratio: 1400 / 875;
    background: #0B1524;
    border: 1px solid var(--mx-line);
    border-top: 0;
    overflow: hidden;
    box-shadow: var(--mx-shadow-exhibit);
}
.mx5-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}
.mx5-slide.is-on { opacity: 1; pointer-events: auto; }
.mx5-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Autoplay progress hairline along the bottom of the stage. */
.mx5-prog {
    position: absolute;
    left: 0; bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--mx-blue);
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0.85;
}
.mx5-switch.is-playing .mx5-prog { animation: mx5-prog 7s linear infinite; }
@keyframes mx5-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
    .mx5-switch.is-playing .mx5-prog { animation: none; }
    .mx5-slide { transition: none; }
}

/* Caption bar under the stage: the question the module answers, the
   detail, and the ways in. */
.mx5-cap {
    border: 1px solid var(--mx-line);
    border-top: 0;
    border-radius: 0 0 var(--mx-radius) var(--mx-radius);
    background: var(--mx-panel);
    padding: 20px 22px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px 28px;
    align-items: center;
}
.mx5-cap-q {
    font-family: var(--mx-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mx-blue);
    margin: 0 0 7px;
}
.mx5-cap-d {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--mx-ink-2);
    margin: 0;
    max-width: 74ch;
}
.mx5-cap-links { display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
@media (max-width: 860px) {
    .mx5-cap { grid-template-columns: 1fr; padding: 18px; }
    .mx5-cap-links { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

/* ─────────── 3. NO-SIGNUP BAND ─────────── */
.mx5-try {
    max-width: 1240px;
    margin: 22px auto 0;
    padding: 0 24px;
}
.mx5-try-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 18px 24px;
    border: 1px solid rgba(76, 125, 247, 0.32);
    border-radius: var(--mx-radius);
    background: linear-gradient(180deg, rgba(76,125,247,0.10), rgba(76,125,247,0.03));
}
.mx5-try-text { font-size: 15px; line-height: 1.55; color: var(--mx-ink-2); margin: 0; }
.mx5-try-text strong { color: var(--mx-ink); font-weight: 650; }
.mx5-try-text .mx5-nb {
    display: block;
    font-family: var(--mx-mono);
    font-size: 10.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mx-mute);
    margin-top: 5px;
}

/* ─────────── 4. DETAIL CROPS ("read the numbers") ───────────
   A crop is presented as a lab specimen: mono label bar, the pixels at
   their true 2x density, then the claim it supports. */
.mx5-proofs { display: grid; gap: 22px; }
.mx5-proof {
    background: var(--mx-panel);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    overflow: hidden;
}
.mx5-proof-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--mx-panel-2);
    border-bottom: 1px solid var(--mx-line);
    font-family: var(--mx-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mx-mute);
}
.mx5-proof-label i {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--mx-blue); flex: 0 0 auto;
}
.mx5-proof-label .end {
    margin-left: auto;
    color: var(--mx-blue);
    letter-spacing: 0.12em;
}
/* The crop sits on the terminal's own background so it reads as a cut-out
   of the product rather than a floating picture. Centred, because the crops
   vary from 320px (the VRP rail) to 870px wide. */
.mx5-shot {
    background: #0B1524;
    padding: 14px;
    overflow-x: auto;
    display: flex;
    justify-content: center;
}
.mx5-shot img {
    display: block;
    height: auto;
    max-width: 100%;
    border-radius: 4px;
}
.mx5-proof-copy { padding: 18px 20px 20px; }
.mx5-proof-copy h3 {
    font-family: var(--mx-sans);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--mx-ink);
    margin: 0 0 8px;
}
.mx5-proof-copy p {
    font-size: 14.5px;
    line-height: 1.68;
    color: var(--mx-ink-2);
    margin: 0;
}

/* Lead proof: tall GEX crop beside its copy. */
.mx5-proof--lead { display: grid; grid-template-columns: 1.35fr 1fr; }
.mx5-proof--lead .mx5-proof-label { grid-column: 1 / -1; }
.mx5-proof--lead .mx5-shot { border-right: 1px solid var(--mx-line); }
.mx5-proof--lead .mx5-proof-copy { align-self: center; padding: 26px 28px; }
.mx5-proof--lead .mx5-proof-copy h3 { font-size: 20px; margin-bottom: 12px; }

/* One strip per row, NOT two-up. These crops are 725–870px wide; in a
   two-column grid they were squeezed to ~470px, which shrinks the very
   numbers the section exists to make readable. Full width lets each render at
   (or near) its native size, and the copy goes side-by-side underneath so the
   extra rows don't cost much height. */
.mx5-proofs-rest { display: grid; grid-template-columns: 1fr; gap: 22px; }
.mx5-proofs-rest .mx5-proof-copy {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 8px 28px;
    align-items: start;
}
.mx5-proofs-rest .mx5-proof-copy h3 { margin: 0; }
@media (max-width: 900px) {
    .mx5-proof--lead { grid-template-columns: 1fr; }
    .mx5-proof--lead .mx5-shot { border-right: 0; border-bottom: 1px solid var(--mx-line); }
    .mx5-proofs-rest .mx5-proof-copy { grid-template-columns: 1fr; gap: 8px; }
}

/* ─────────── 5. BREADTH WALL + LIGHTBOX ─────────── */
/* 186px minimum, not 232px: at 232 the 24 tiles ran six rows / ~1900px, which
   is not "the whole desk at a glance". Six columns puts all 24 in four rows,
   about one screen. The thumbnails are small on purpose — they carry breadth,
   and clicking one opens the full-size capture in the lightbox. */
.mx5-gal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
    gap: 12px;
}
/* Below ~430px the 186px minimum collapses to a single column, which stacked
   24 tiles into ~6000px and pushed the whole mobile page past 21,000px. Force
   two up: the thumbnails get small, but this section sells breadth, and any
   tile can still be opened full-size. */
@media (max-width: 560px) {
    .mx5-gal { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .mx5-tile-name { font-size: 9.5px; letter-spacing: 0.06em; padding: 7px 9px; }
    .mx5-tile-name svg { display: none; }
}
.mx5-tile {
    display: block;
    position: relative;
    background: var(--mx-panel);
    border: 1px solid var(--mx-line);
    border-radius: 9px;
    overflow: hidden;
    text-decoration: none;
    cursor: zoom-in;
    padding: 0;
    text-align: left;
    width: 100%;
    appearance: none;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.mx5-tile:hover {
    border-color: var(--mx-line-2);
    transform: translateY(-2px);
    box-shadow: var(--mx-shadow-card);
}
.mx5-tile:focus-visible { outline: 2px solid var(--mx-blue); outline-offset: 2px; }
.mx5-tile img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1400 / 875;
    object-fit: cover;
    background: #0B1524;
}
.mx5-tile-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-top: 1px solid var(--mx-line);
    font-family: var(--mx-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mx-ink-2);
}
.mx5-tile:hover .mx5-tile-name { color: var(--mx-ink); }
.mx5-tile-name svg { opacity: 0; transition: opacity 0.18s ease; color: var(--mx-blue); flex: 0 0 auto; }
.mx5-tile:hover .mx5-tile-name svg { opacity: 1; }

/* Lightbox */
.mx5-lb {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(4, 9, 18, 0.9);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.mx5-lb.is-on { display: flex; }
.mx5-lb-box {
    position: relative;
    width: min(1400px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--mx-panel);
    border: 1px solid var(--mx-line-2);
    border-radius: var(--mx-radius);
    overflow: hidden;
    box-shadow: var(--mx-shadow-exhibit);
}
.mx5-lb-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    background: var(--mx-panel-2);
    border-bottom: 1px solid var(--mx-line);
    font-family: var(--mx-mono);
    font-size: 10.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mx-mute);
}
.mx5-lb-bar b { color: var(--mx-ink); font-weight: 600; }
.mx5-lb-bar .sp { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.mx5-lb-btn {
    appearance: none;
    background: var(--mx-panel);
    border: 1px solid var(--mx-line-2);
    border-radius: 6px;
    color: var(--mx-ink-2);
    padding: 5px 10px;
    font-family: var(--mx-mono);
    font-size: 11px;
    cursor: pointer;
    line-height: 1.4;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.mx5-lb-btn:hover { border-color: var(--mx-ink); color: var(--mx-ink); }
/* Fit the capture to the viewport instead of letting a 1400x875 image push the
   dialog off screen. min-height:0 is required — without it the flex column
   refuses to shrink the scroll area and the whole box overflows. */
.mx5-lb-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0B1524;
}
.mx5-lb img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 190px);
    width: auto;
    height: auto;
    background: #0B1524;
}
.mx5-lb-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 13px 16px;
    border-top: 1px solid var(--mx-line);
    font-size: 13.5px;
    color: var(--mx-ink-2);
}

/* ─────────── 6. FEATURE CARDS (/features) ───────────
   Replaces the 20 full-width alternating spotlights that ran the page to
   17,156px and rendered every 1400x875 capture at ~700px wide. Same copy,
   same screenshots — a grid instead of a scroll, with the detail behind a
   <details> so it stays in the DOM for crawlers without costing height. */
.mx5-feats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(318px, 1fr));
    gap: 18px;
}
.mx5-feat {
    display: flex;
    flex-direction: column;
    background: var(--mx-panel);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.mx5-feat:hover { border-color: var(--mx-line-2); box-shadow: var(--mx-shadow-card); }

/* The thumbnail doubles as the lightbox trigger — it carries .mx5-tile so the
   existing gallery JS picks it up with no extra wiring. --flush strips the
   standalone tile chrome so it sits edge-to-edge in the card. */
.mx5-tile--flush {
    border: 0;
    border-bottom: 1px solid var(--mx-line);
    border-radius: 0;
}
.mx5-tile--flush:hover { transform: none; box-shadow: none; }

.mx5-feat-body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 18px 18px;
    flex: 1;
}
.mx5-feat-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mx5-feat h3 {
    font-family: var(--mx-sans);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.012em;
    line-height: 1.3;
    color: var(--mx-ink);
    margin: 0;
}
.mx5-feat p { font-size: 13.5px; line-height: 1.6; color: var(--mx-ink-2); margin: 0; }

.mx5-feat details { border-top: 1px solid var(--mx-line); padding-top: 10px; }
.mx5-feat summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--mx-mono);
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mx-mute);
    display: flex;
    align-items: center;
    gap: 7px;
}
.mx5-feat summary::-webkit-details-marker { display: none; }
.mx5-feat summary::after {
    content: '+';
    margin-left: auto;
    font-size: 13px;
    line-height: 1;
    color: var(--mx-blue);
}
.mx5-feat details[open] summary::after { content: '\2212'; }
.mx5-feat summary:hover { color: var(--mx-ink-2); }
.mx5-feat details ul {
    list-style: none;
    margin: 12px 0 2px;
    padding: 0;
    display: grid;
    gap: 8px;
}
.mx5-feat details li {
    position: relative;
    padding-left: 16px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--mx-ink-2);
}
.mx5-feat details li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--mx-blue);
}
.mx5-feat details li strong { color: var(--mx-ink); font-weight: 600; }

.mx5-feat-links {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.mx5-feat-links .mx-link { font-size: 13px; }

/* Tier chip */
.mx5-chip {
    font-family: var(--mx-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid currentColor;
    white-space: nowrap;
}
.mx5-chip--basic { color: #6C97FF; }
.mx5-chip--premium { color: #A78BFA; }
.mx5-chip--pro { color: #E4B95B; }

/* ─────────── shared small bits ─────────── */
.mx5-note {
    font-family: var(--mx-mono);
    font-size: 10.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mx-mute);
}
.mx5-sec-tight { padding: 68px 0; }