/* =============================================================================
   Homepage rebuild — macOS surface language + motion
   =============================================================================
   Owns the rebuilt sections only (.mx-*). The page's older CSS still styles the
   comparison table, proof, quotes, nav and footer; those class names are
   untouched here so nothing regresses by accident.

   Loaded last in <head>. Two of the page's inline <style> blocks live in
   <body> and therefore win on order at equal specificity — rules that clash
   with those carry a `body ` prefix on purpose. Do not tidy those away.

   Light theme only (repo rule). Reduced-motion is honoured at the bottom, and
   it is not an afterthought: everything here is transform/opacity so turning
   motion off leaves a correct static page.
   ========================================================================== */

:root {
    --mx-canvas: #f0f0f2;
    --mx-canvas-2: #e9e9ee;
    --mx-panel: #fff;
    --mx-ink: #111316;
    --mx-ink-2: #52555c;
    /* Same AA failure the console's --dm-ink-3 had: #85888f measures 3.55:1 on
       the white panels and 3.12:1 on --mx-canvas, under the 4.5:1 floor. This
       token carries the eyebrows, chips, stat captions and rail-stat labels,
       which is most of the small type on the page. #656872 is the lightest
       value clearing AA on ALL THREE homepage surfaces — #fff (5.56:1),
       --mx-canvas #f0f0f2 (4.89:1) and --mx-canvas-2 #e9e9ee (4.60:1). Check
       against canvas-2, the darkest, before ever lightening this. */
    --mx-ink-3: #656872;
    --mx-line: rgba(0, 0, 0, .09);
    --mx-line-2: rgba(0, 0, 0, .05);
    --mx-lime: #ccff00;
    --mx-green: #16803c;
    --mx-green-2: #4d7c0f;

    --mx-gloss: inset 0 1px 0 rgba(255, 255, 255, .92);
    --mx-e1: 0 1px 2px rgba(0, 0, 0, .04);
    --mx-e2: 0 4px 16px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
    --mx-e3: 0 16px 40px rgba(0, 0, 0, .10), 0 3px 10px rgba(0, 0, 0, .05);
    --mx-e4: 0 40px 90px rgba(0, 0, 0, .17), 0 12px 28px rgba(0, 0, 0, .08);

    --mx-spring: cubic-bezier(.34, 1.42, .64, 1);
    --mx-ease: cubic-bezier(.16, 1, .3, 1);
    --mx-shell: 1180px;
}

body { background: var(--mx-canvas); -webkit-font-smoothing: antialiased; }
.mx-shell { max-width: var(--mx-shell); margin: 0 auto; padding: 0 28px; }

/* ── Shared type ──────────────────────────────────────────────────────────── */
.mx-h1 {
    font-size: clamp(2.9rem, 7.2vw, 5.4rem);
    font-weight: 700;
    line-height: .99;
    letter-spacing: -.048em;
    color: var(--mx-ink);
    margin: 0 0 22px;
}
.mx-h1 .mx-line { display: block; }
.mx-h1 em {
    font-style: normal;
    color: var(--mx-green);
    /* The lime marker that sweeps in under the second line. Sized from the
       text box so it tracks font-size across the clamp. */
    background: linear-gradient(rgba(204, 255, 0, .55) 0 0) no-repeat left 86% / 0% .2em;
    animation: mx-sweep .75s var(--mx-ease) .7s forwards;
}
@keyframes mx-sweep { to { background-size: 100% .2em; } }

.mx-h2 {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.04em;
    color: var(--mx-ink);
    margin: 0 0 18px;
}
.mx-h2 em { font-style: normal; color: var(--mx-green); }
.mx-h2-center, .mx-body-center, .mx-eyebrow-center { text-align: center; }
.mx-eyebrow-center { justify-content: center; }

.mx-lede {
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    line-height: 1.62;
    letter-spacing: -.014em;
    color: var(--mx-ink-2);
    max-width: 640px;
    margin: 0 auto 34px;
}
.mx-lede strong { color: var(--mx-ink); font-weight: 600; }
.mx-body { font-size: .975rem; line-height: 1.72; color: var(--mx-ink-2); letter-spacing: -.011em; }
.mx-body a { color: var(--mx-green-2); text-underline-offset: 3px; }
.mx-body-lead { max-width: 560px; margin-bottom: 44px; }
.mx-body-center { max-width: 560px; margin-inline: auto; }

.mx-eyebrow {
    display: flex; align-items: center; gap: 10px;
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--mx-ink-3); margin: 0 0 18px;
}
.mx-eyebrow-dash { width: 18px; height: 2px; background: var(--mx-green); border-radius: 2px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.mx-btn {
    display: inline-flex; align-items: center; gap: 8px;
    border-radius: 980px; padding: 13px 24px;
    font-size: .92rem; font-weight: 600; letter-spacing: -.012em;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: transform .2s var(--mx-spring), box-shadow .25s var(--mx-ease),
                background .2s var(--mx-ease);
    will-change: transform;
}
.mx-btn svg { transition: transform .3s var(--mx-spring); }
.mx-btn:hover svg { transform: translateX(3px); }
.mx-btn-primary { background: var(--mx-lime); color: #10140f; box-shadow: var(--mx-e2), var(--mx-gloss); }
.mx-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--mx-e3); }
.mx-btn-primary:active { transform: translateY(0) scale(.97); box-shadow: var(--mx-e1); }
.mx-btn-ghost {
    background: rgba(255, 255, 255, .78); color: var(--mx-ink);
    border-color: var(--mx-line); box-shadow: var(--mx-e1), var(--mx-gloss);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.mx-btn-ghost:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--mx-e2); }
.mx-btn-ghost:active { transform: translateY(0) scale(.97); }

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.mx-hero {
    position: relative;
    padding: clamp(56px, 9vw, 104px) 0 0;
    text-align: center;
    overflow: clip;
    isolation: isolate;
}
.mx-hero-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; padding: 0 28px; }

.mx-hero-bg { position: absolute; inset: -10% -10% 0; z-index: 0; pointer-events: none; }
.mx-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.mx-orb-a { width: 46vw; height: 46vw; left: -6vw;  top: -12vw; background: radial-gradient(circle, rgba(204,255,0,.5), transparent 68%); }
.mx-orb-b { width: 40vw; height: 40vw; right: -6vw; top: -8vw;  background: radial-gradient(circle, rgba(22,163,74,.32), transparent 68%); }
.mx-orb-c { width: 52vw; height: 34vw; left: 22vw;  top: 16vw;  background: radial-gradient(circle, rgba(120,190,255,.20), transparent 70%); }
.mx-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(17,19,22,.045) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(17,19,22,.045) 1px, transparent 1px);
    background-size: 76px 76px;
    -webkit-mask-image: radial-gradient(120% 74% at 50% 6%, #000 32%, transparent 76%);
    mask-image: radial-gradient(120% 74% at 50% 6%, #000 32%, transparent 76%);
}

.mx-pill {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 14px 7px 12px; margin-bottom: 26px;
    border-radius: 980px; border: 1px solid var(--mx-line);
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--mx-e1), var(--mx-gloss);
    font-size: .82rem; font-weight: 600; letter-spacing: -.01em;
    color: var(--mx-ink); text-decoration: none;
    transition: transform .25s var(--mx-spring), box-shadow .25s var(--mx-ease);
}
.mx-pill:hover { transform: translateY(-1.5px); box-shadow: var(--mx-e2); }
.mx-pill svg { opacity: .4; transition: transform .3s var(--mx-spring); }
.mx-pill:hover svg { transform: translateX(2px); opacity: .7; }
.mx-pill-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--mx-green);
    box-shadow: 0 0 0 0 rgba(22, 128, 60, .55);
    animation: mx-ping 2.4s var(--mx-ease) infinite;
}
@keyframes mx-ping {
    0%   { box-shadow: 0 0 0 0 rgba(22,128,60,.5); }
    70%  { box-shadow: 0 0 0 7px rgba(22,128,60,0); }
    100% { box-shadow: 0 0 0 0 rgba(22,128,60,0); }
}

.mx-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.mx-hero .mx-cta-row, .mx-cta-center { justify-content: center; }

.mx-microproof { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mx-stars { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--mx-ink-2); }
.mx-stars .hero-review-stars { display: inline-flex; gap: 2px; }
.mx-stars a { color: var(--mx-ink); font-weight: 600; }
.mx-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 0; }
.mx-facts li {
    font-size: .78rem; color: var(--mx-ink-2); letter-spacing: -.008em;
    padding: 6px 13px; border-radius: 980px;
    border: 1px solid var(--mx-line-2); background: rgba(255, 255, 255, .6);
}

/* The stage: the scanner presented as one object with real depth. */
.mx-stage {
    position: relative; z-index: 2;
    max-width: 1080px;
    margin: clamp(44px, 6vw, 76px) auto 0;
    padding: 0 28px;
}
/* NO perspective/rotateX/scale here, and this is not a style preference.
   The stage sits ABOVE THE FOLD. The old rule drove
     rotateX((1 - --mx-t) * 7deg) scale(.955 + --mx-t * .045)
   from scroll position, and --mx-t is ~0.45 at page load — so the panel was
   painted as a 3D-composited layer at scale .975 and RESAMPLED. Every label
   and number inside it rendered soft, and it only sharpened (t -> 1) once the
   user had scrolled it off screen. It was blurry exactly while being looked
   at. A 3D transform or any scale != 1 forces that resampling, so the resting
   state must be no transform at all. Entrance motion, if it ever comes back,
   belongs on opacity/translateY only. */
.mx-stage-inner { transform-origin: 50% 0; }
.mx-stage-shadow {
    position: absolute; left: 12%; right: 12%; bottom: -26px; height: 60px;
    background: radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.24), transparent 72%);
    filter: blur(20px); opacity: .8;
}
.mx-stage-caption {
    position: relative; z-index: 2;
    margin: 26px auto 0; text-align: center;
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--mx-ink-3);
}

/* The scanner keeps its own internals; only its frame becomes a mac window. */
body .mx-stage .scanner-widget {
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: var(--mx-e4), inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* ── LAYERS (sticky rail) ─────────────────────────────────────────────────── */
.mx-layers { padding: clamp(80px, 11vw, 150px) 0; background: linear-gradient(180deg, var(--mx-canvas), #f6f6f8); }
.mx-layers-grid { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.mx-layers-rail { position: sticky; top: 116px; }
/* The rail reads as one connected progression, not three loose labels.
   Previously only the active step had any presence — the other two were grey
   text on a grey wash, so the column looked half-finished and the numbers had
   nothing tying them together. A hairline runs behind the number chips and
   each chip sits on it as a node. */
.mx-rail { position: relative; list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 2px; }
.mx-rail::before {
    content: ""; position: absolute; left: 28px; top: 20px; bottom: 20px;
    width: 2px; border-radius: 2px; background: rgba(16, 22, 14, .11);
}
.mx-rail-step {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 11px;
    font-size: .9rem; font-weight: 600; letter-spacing: -.012em;
    color: var(--mx-ink-2);
    transition: background .45s var(--mx-ease), color .45s var(--mx-ease);
}
.mx-rail-step span {
    /* Fixed box so every chip centres on the hairline at exactly 28px. */
    flex-shrink: 0; width: 30px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'DM Mono', ui-monospace, monospace; font-size: .74rem;
    border-radius: 7px;
    background: #ececef; color: var(--mx-ink-2);
    box-shadow: 0 0 0 4px var(--mx-canvas);
    transition: background .45s var(--mx-ease), color .45s var(--mx-ease), box-shadow .45s var(--mx-ease);
}
.mx-rail-step.is-active { background: #fff; color: var(--mx-ink); box-shadow: var(--mx-e1), var(--mx-gloss); }
.mx-rail-step.is-active span { background: var(--mx-lime); color: #10140f; box-shadow: 0 0 0 4px #fff; }

/* Fills the hole the sticky rail used to leave at the bottom of the column.
   Both figures are already claimed elsewhere on this page (the stats row and
   the "One yes/no, in 38 ms" card) — this restates them, it does not add new
   ones. */
.mx-rail-stats {
    display: flex; gap: 30px; margin: 34px 0 0;
    padding-top: 24px; border-top: 1px solid rgba(16, 22, 14, .1);
}
.mx-rail-stats div { display: flex; flex-direction: column; gap: 3px; }
.mx-rail-stats dt {
    font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--mx-ink);
}
.mx-rail-stats dd {
    margin: 0; font-size: .78rem; line-height: 1.35; color: var(--mx-ink-3);
    letter-spacing: -.006em; max-width: 15ch;
}

.mx-layers-cards { display: flex; flex-direction: column; gap: 18px; }
.mx-layer {
    position: relative;
    /* Solid white, not the translucent panel token. These cards sit on the
       section's grey gradient, so a translucent fill let the wash through and
       the card edge went soft against its own background. */
    background: #fff;
    border: 1px solid rgba(16, 22, 14, .1);
    border-radius: 20px;
    padding: 30px 30px 26px;
    box-shadow: var(--mx-e2), var(--mx-gloss);
    transition: transform .5s var(--mx-ease), box-shadow .5s var(--mx-ease);
}
.mx-layer.is-near { transform: translateY(-3px); box-shadow: var(--mx-e3), var(--mx-gloss); }
.mx-layer-idx {
    font-family: 'DM Mono', ui-monospace, monospace; font-size: .72rem;
    color: var(--mx-ink-3); letter-spacing: .1em; margin-bottom: 12px;
}
.mx-layer-h { font-size: 1.22rem; font-weight: 700; letter-spacing: -.026em; color: var(--mx-ink); margin: 0 0 10px; }
.mx-chips, .mx-verdicts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.mx-chip {
    font-family: 'DM Mono', ui-monospace, monospace; font-size: .72rem;
    padding: 5px 10px; border-radius: 7px;
    background: rgba(0, 0, 0, .04); color: var(--mx-ink-2);
}
.mx-verdict { font-family: 'DM Mono', ui-monospace, monospace; font-size: .74rem; padding: 5px 12px; border-radius: 7px; font-weight: 600; }
.mx-verdict-allow  { background: rgba(22, 163, 74, .12);  color: #15803d; }
.mx-verdict-review { background: rgba(217, 119, 6, .13);  color: #b45309; }
.mx-verdict-block  { background: rgba(220, 38, 38, .11);  color: #b91c1c; }

/* ── INTEGRATION (segmented control + code window) ────────────────────────── */
.mx-integrate { padding: clamp(80px, 11vw, 150px) 0; background: var(--mx-canvas-2); }
.mx-int-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: clamp(20px, 5vw, 64px);
    align-items: end;
    margin-bottom: clamp(28px, 4vw, 46px);
}
.mx-int-head .mx-body-lead { margin: 0 0 7px; }
@media (max-width: 860px) {
    .mx-int-head { grid-template-columns: 1fr; gap: 14px; align-items: start; }
    .mx-int-head .mx-body-lead { margin: 0; }
}
.mx-window {
    border-radius: 18px; overflow: hidden;
    background: var(--mx-panel);
    border: 1px solid var(--mx-line);
    box-shadow: var(--mx-e3), var(--mx-gloss);
}
.mx-window-bar {
    display: flex; align-items: center; gap: 16px;
    padding: 11px 16px;
    background: linear-gradient(180deg, #fafafc, #f2f2f5);
    border-bottom: 1px solid var(--mx-line);
}
.mx-lights { display: inline-flex; gap: 7px; flex-shrink: 0; }
.mx-lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.mx-lights i:nth-child(1) { background: #ff5f57; }
.mx-lights i:nth-child(2) { background: #febc2e; }
.mx-lights i:nth-child(3) { background: #28c840; }

.mx-seg {
    position: relative; display: flex; gap: 2px; margin: 0 auto;
    padding: 3px; border-radius: 9px; background: rgba(0, 0, 0, .055);
}
.mx-seg-pill {
    position: absolute; top: 3px; bottom: 3px; left: 3px; width: 0;
    border-radius: 7px; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .13), var(--mx-gloss);
    transition: transform .42s var(--mx-spring), width .42s var(--mx-spring);
}
.mx-seg-btn {
    position: relative; z-index: 1;
    border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: .8rem; font-weight: 600; letter-spacing: -.01em;
    padding: 6px 14px; border-radius: 7px; color: var(--mx-ink-3);
    transition: color .3s var(--mx-ease);
}
.mx-seg-btn.is-active { color: var(--mx-ink); }
.mx-seg-btn:focus-visible { outline: 2px solid var(--mx-green); outline-offset: 2px; }
.mx-window-hint {
    margin-left: auto; flex-shrink: 0;
    font-family: 'DM Mono', ui-monospace, monospace; font-size: .72rem; color: var(--mx-ink-3);
}

.mx-window-body { position: relative; background: #fbfbfd; }
.mx-panel { padding: 22px 24px; }
.mx-panel[hidden] { display: none; }
.mx-panel.is-active { animation: mx-fade .4s var(--mx-ease); }
@keyframes mx-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mx-window-body pre { margin: 0; overflow-x: auto; }
.mx-window-body code {
    font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem; line-height: 1.75; color: #24292f; white-space: pre;
}
.c-c { color: #6e7781; }
.c-k { color: #cf222e; }
.c-s { color: #0a3069; }
.c-n { color: #0550ae; }
.mx-int-foot { margin-top: 22px; font-size: .86rem; color: var(--mx-ink-2); }
.mx-int-foot a { color: var(--mx-green-2); font-weight: 600; }

/* ── CLOSE ────────────────────────────────────────────────────────────────── */
.mx-close { padding: clamp(70px, 10vw, 130px) 28px; }
.mx-close-card {
    position: relative; overflow: hidden;
    max-width: var(--mx-shell); margin: 0 auto;
    padding: clamp(46px, 7vw, 82px) 32px;
    border-radius: 28px;
    background: linear-gradient(180deg, #fff, #f7f7f9);
    border: 1px solid var(--mx-line);
    box-shadow: var(--mx-e3), var(--mx-gloss);
}
.mx-close-glow {
    position: absolute; left: 50%; top: -40%; width: 78%; aspect-ratio: 2/1;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(204, 255, 0, .34), transparent 66%);
    filter: blur(56px); pointer-events: none;
}
.mx-close-card > *:not(.mx-close-glow) { position: relative; z-index: 1; }

/* ── Scroll-in, applied to the rebuilt sections only ──────────────────────── */
.mx-in { opacity: 0; transform: translateY(26px); }
.mx-in.is-in { opacity: 1; transform: none; transition: opacity .8s var(--mx-ease), transform .8s var(--mx-ease); }
.mx-in-1.is-in { transition-delay: .06s; }
.mx-in-2.is-in { transition-delay: .12s; }
.mx-in-3.is-in { transition-delay: .18s; }
/* Floor: if an observer never fires, show it anyway. Invisible content is a
   broken page; a skipped animation is not. */
.mx-in { animation: mx-floor 0s linear 2.8s forwards; }
@keyframes mx-floor { to { opacity: 1; transform: none; } }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
    .mx-layers-grid { grid-template-columns: 1fr; }
    .mx-layers-rail { position: static; }
    .mx-rail { flex-direction: row; flex-wrap: wrap; }
    .mx-window-bar { flex-wrap: wrap; gap: 10px; }
    .mx-seg { margin: 0; width: 100%; overflow-x: auto; }
    .mx-window-hint { display: none; }
}
@media (max-width: 560px) {
    .mx-shell, .mx-hero-inner, .mx-stage { padding-inline: 18px; }
    .mx-layer { padding: 24px 20px 22px; }
    .mx-facts li { font-size: .74rem; padding: 5px 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .mx-in, .mx-in.is-in { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
    .mx-h1 em { animation: none; background-size: 100% .2em; }
    .mx-pill-dot { animation: none; }
    .mx-btn, .mx-pill, .mx-layer, .mx-seg-pill, .mx-panel.is-active { transition: none !important; animation: none !important; }
}
