/* home.css — the home page's own stylesheet.

   Ported from the 2026-09-07 design handoff (design/home.css in
   `Marketing page feature demonstrations.zip`). Everything below is the
   handoff's rule for rule, apart from the header you are reading and two
   columns of indentation: the design file was an extraction of this page's old
   inline <style> block, so it carried four stray lines of HTML above the
   opening brace and the indent that being inside a <style> tag gave it.

   It loads AFTER /nav.css and /marketing.css and before nothing, so the home
   page's own rules win wherever the three overlap — the same order the inline
   block had. The page moved out of index.html because the handoff added the
   showcase, competitor map and bento sections and the single file was already
   at 148 KB; see docs/design-rules.md §10.

   The comment the handoff kept from the previous build follows. */

/* =========================================================================
   THE HOME PAGE, rebuilt from the Claude Design handoff (2026-09-01).

   The page argues by showing: every section pairs one short outcome-led
   headline with a dark browser frame holding a focused fragment of a real
   console screen. Warm-dark is the house rule — pure black ground, warmth
   from coral glows, never a tinted grey.

   Three families, and the split is strict:
     Space Grotesk   display only. h1 at 600; every h2 at 400.
     Instrument Sans all body copy, 14–19px.
     Geist Mono      LABELS ONLY. Eyebrows, card titles, metric captions,
                     button labels, in-panel metadata. Never body, never a
                     headline.

   Numbers below are the handoff's, not guesses. If you change one, change it
   against that document rather than nudging by eye.
   ========================================================================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;background:#000;color:#fff}
::selection{background:#FBD9CD;color:#7A2E17}
a{color:#F5A78B;text-decoration:none}
a:hover{color:#FFC7AF}
img,svg{display:block}
img{max-width:100%}
button,input{font-family:inherit}

/* Reveal. The transform is the handoff's: a rise plus a small rotateX, so
   the page assembles rather than fades. Only applied once the script has
   claimed the page (.mb-js) — with JS off, everything renders. */
.mb-js [data-reveal]{opacity:0;transform:translateY(34px) rotateX(7deg);transform-origin:50% 100%}
.mb-js [data-reveal].mb-in{opacity:1;transform:none;transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}

@keyframes mbMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mbGlow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.1)}}
@keyframes mbSpin{to{transform:rotate(360deg)}}
@keyframes mbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes mbGemPop{0%,100%{transform:scale(.84) rotate(0)}16%{transform:scale(1.18) rotate(18deg)}34%{transform:scale(.94) rotate(34deg)}62%{transform:scale(1.06) rotate(10deg)}}
.mb-mark{transform-origin:50% 50%;transform-box:fill-box}

/* ---- section shell ------------------------------------------------------
   150px 56px standard; 140px on the two lighter bands; 260/250 on #act.
   Content max-width 1380px, centred. */
.mb-sec{position:relative;z-index:2;padding:150px clamp(72px,14vw,260px);background:#000;border-top:1px solid rgba(255,255,255,.08)}
.mb-sec-lite{padding:140px clamp(72px,14vw,260px)}
.mb-clip{overflow:hidden}
.mb-wrap{position:relative;max-width:1380px;margin:0 auto}
.mb-blob{position:absolute;pointer-events:none;z-index:0}

/* ---- type --------------------------------------------------------------- */
.mb-eyeb{display:inline-flex;align-items:center;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:rgba(255,255,255,.7)}
.mb-mono{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.mb-h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,3.6vw,44px);line-height:1.15;font-weight:400;letter-spacing:-.02em;margin:20px 0 0;color:#fff;text-wrap:balance}
.mb-h2s{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,3.2vw,40px);line-height:1.15;font-weight:400;letter-spacing:-.02em;margin:20px 0 0;color:#fff;text-wrap:balance}
.mb-h2 .mb-dim,.mb-h2s .mb-dim{color:rgba(255,255,255,.45)}
.mb-lede{font-size:17px;line-height:1.65;color:rgba(255,255,255,.5);margin:20px 0 0;max-width:60ch}
.mb-big{font-family:'Space Grotesk',sans-serif;font-size:clamp(38px,4.2vw,54px);font-weight:400;letter-spacing:-.03em;line-height:1;color:#fff}

/* ---- browser frame ------------------------------------------------------
   Every panel on the page sits in one of these. Radius 12 on frames, 6 on
   cards and small buttons, 10 on inputs and metric cards, 999 on pills. */
.mb-frame{position:relative;z-index:1;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#0C0B0B;box-shadow:0 60px 140px -60px rgba(0,0,0,.9)}
.mb-chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)}
.mb-chrome i{width:10px;height:10px;border-radius:50%;flex:none}
.mb-chrome i:nth-child(1){background:#FBBFAB}
.mb-chrome i:nth-child(2){background:#F3D9A6}
.mb-chrome i:nth-child(3){background:#C7E3CE}
.mb-url{margin-left:10px;font-size:12px;font-weight:600;color:#CDBFB4;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:3px 12px;white-space:nowrap}
.mb-cmeta{margin-left:auto;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:#8E7F73;letter-spacing:.02em;white-space:nowrap}
.mb-pbody{position:relative;overflow:hidden;padding:24px 26px 78px;background:#0C0B0B}
.mb-plabel{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:rgba(255,255,255,.6);text-decoration:underline;text-underline-offset:4px}
.mb-pnote{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:rgba(255,255,255,.38)}

/* Cropped context: three ghost rows blurring harder toward the crop edge,
   plus a fade into the panel fill. It reads as a screen continuing past the
   frame. Bottom edge only — never the top. */
.mb-crop{position:absolute;bottom:0;left:0;right:0;padding:0 26px 10px;display:flex;flex-direction:column;gap:11px;pointer-events:none}
.mb-crop div{display:flex;align-items:center;gap:14px}
.mb-crop div:nth-child(1){filter:blur(1.4px);opacity:.5}
.mb-crop div:nth-child(2){filter:blur(3.6px);opacity:.4}
.mb-crop div:nth-child(3){filter:blur(7px);opacity:.28}
.mb-crop span{height:9px;border-radius:4px}
.mb-cropfade{position:absolute;bottom:0;left:0;right:0;height:165px;pointer-events:none;z-index:4;background:linear-gradient(0deg,rgba(12,11,11,.6),rgba(12,11,11,0) 82%)}

/* ---- cards --------------------------------------------------------------
   1px hairline, radius 6, 2% fill, 24px padding, mono title + 14px body.
   Hover brightens; a coral spotlight follows the cursor (script sets the
   background-image on [data-spot]). */
.mb-card{position:relative;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:rgba(255,255,255,.02);padding:24px;transition:border-color .25s ease,background .25s ease}
.mb-card:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.045)}
.mb-card h3,.mb-rule h3{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;font-weight:600;letter-spacing:-.02em;color:#fff;margin:0}
.mb-card p,.mb-rule p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.5);margin:9px 0 0}
.mb-rule{border-top:1px solid rgba(255,255,255,.12);padding-top:16px}
.mb-rule p{margin-top:8px}
.mb-chip{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.14);border-radius:5px;padding:5px 10px}
.mb-chip-hot{color:#FFC7AF;border-color:rgba(236,107,76,.4);background:rgba(236,107,76,.1)}

/* ---- grids --------------------------------------------------------------
   Grid gap 20px; split-column gap 56–60px. */
.mb-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mb-split{display:grid;gap:56px;align-items:center}

/* ---- the primary button -------------------------------------------------
   Adapted from the FlowButton pattern the owner picked (2026-09-01). The
   original is a shadcn/Tailwind React component; this repo is hand-authored
   HTML with no build step, no framework and no utility classes, so what
   travels is the INTERACTION, rebuilt in plain CSS:

     · the pill squares off to a 12px radius
     · a circle grows from the centre and fills the button
     · the trailing arrow leaves to the right while a second one arrives
       from the left, on a springy curve
     · the label slides across between them

   Two departures from the source, both because our button is the page's
   primary CTA on a black ground rather than a bordered ghost on white:
   the resting state keeps its coral fill (a transparent primary would
   disappear here), and the circle is warm cream, so the hover reads as an
   inversion of the brand rather than a hole in the page.

   The button itself does NOT move. It used to drift toward the cursor; a
   target that dodges the pointer is a worse target. */
.mb-flow{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;border:none;cursor:pointer;
  border-radius:10px;padding:15px 32px;font-size:16px;font-weight:600;
  color:#fff;background:linear-gradient(180deg,#F17A5A,#DE5A38);
  box-shadow:0 16px 34px -14px rgba(236,107,76,.75);
  transition:color .35s ease .12s,box-shadow .3s ease;
}
.mb-flow:hover,.mb-flow:focus-visible{color:#C0451F}
.mb-flow:active{transform:scale(.96)}
.mb-flow:focus-visible{outline:2px solid #FFD9CB;outline-offset:3px}
.mb-flow-t{position:relative;z-index:2;transform:translateX(-12px);transition:transform .8s ease-out;white-space:nowrap}
.mb-flow:hover .mb-flow-t,.mb-flow:focus-visible .mb-flow-t{transform:translateX(12px)}
.mb-flow-arr{position:absolute;width:17px;height:17px;z-index:2;color:inherit;transition:left .8s cubic-bezier(.34,1.56,.64,1),right .8s cubic-bezier(.34,1.56,.64,1)}
.mb-flow-in{left:-25%}
.mb-flow-out{right:16px}
.mb-flow:hover .mb-flow-in,.mb-flow:focus-visible .mb-flow-in{left:16px}
.mb-flow:hover .mb-flow-out,.mb-flow:focus-visible .mb-flow-out{right:-25%}
.mb-flow-circle{
  position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;background:#FFF3EC;opacity:0;z-index:1;pointer-events:none;
  transition:width .8s cubic-bezier(.19,1,.22,1),height .8s cubic-bezier(.19,1,.22,1),
             margin .8s cubic-bezier(.19,1,.22,1),opacity .8s cubic-bezier(.19,1,.22,1);
}
.mb-flow:hover .mb-flow-circle,.mb-flow:focus-visible .mb-flow-circle{width:300px;height:300px;margin:-150px 0 0 -150px;opacity:1}

/* ---- hero engine receipt ------------------------------------------------
   The mark alone carries recognition: no pill, no border, no shadow. The
   five sit on one line and the honest "+ AI Mode, Copilot, Grok & DeepSeek"
   tail folds in as the sixth item rather than a sentence underneath. */
.mb-eng-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px 15px}
.mb-eng-chip{display:inline-flex;align-items:center;gap:7px}
.mb-eng-chip .mb-etile{width:22px;height:22px;border-radius:7px}
.mb-eng-chip .mb-nm{font-size:13px;font-weight:600;color:#F1E9E1}
.mb-eng-more .mb-nm{color:#A79689;font-weight:500}
.mb-etile{position:relative;display:flex;align-items:center;justify-content:center;flex:none;border-radius:7px}
/* One tile definition, three sizes: hero row, in-panel row, ring face. */
.mb-etile-s{flex:none;width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center}
.mb-etile-l{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.mb-eng-oai{background:#10A37F;color:#fff}
.mb-eng-cla{background:#F0EEE6;color:#D97757}
.mb-eng-gem{background:#F0F4FF}
.mb-eng-ppl{background:#E7F1F2;color:#20808D}
.mb-eng-goo{background:#F6EFEA}
.mb-eng-cop{background:#EAEEF2;color:#24292F}

/* ---- logo wall (kept from the current page) -----------------------------
   Named brands that win the AI answer, not customer logos. Text wordmarks
   on purpose: a dashed LOGO placeholder is a promise the page can't keep. */
.mb-logo{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.mb-logo span{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:600;color:#A2938A;letter-spacing:-.02em}
.mb-logo-grp{display:flex;gap:52px;align-items:center;padding-right:52px}

/* ---- feature rows -------------------------------------------------------
   One row per feature: the claim and its outcome line on the left behind a
   hairline, the live panel on the right. Collapses to one column at 900,
   where the divider becomes plain vertical spacing. */
.mb-frow{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);align-items:start;border-top:1px solid rgba(255,255,255,.1)}
.mb-frow > :first-child{padding:40px 48px 40px 0;border-right:1px solid rgba(255,255,255,.1)}
.mb-frow > :last-child{position:relative;padding:40px 0 40px 48px}
/* Adjacent rows alternate sides so the eye reads down in a zig-zag: the
   panel takes the wide LEFT track and the claim sits right of the rule. */
.mb-frow-alt{grid-template-columns:minmax(0,1fr) minmax(0,.4fr)}
/* Every feature row shows a panel of the same size, so the stack reads even. */
.mb-frow .mb-frame{min-height:496px}
.mb-frow .mb-frame[style*="min-height:0"]{min-height:0}

/* ---- the nav, floated over the dark band --------------------------------
   The bar, links, CTA and mobile sheet all live in the shared /nav.css that
   every public page loads. Only the dark-band overrides belong here, and
   they never reach another page because this block ships inside index.html.

   The bar's rest/scrolled backgrounds MUST go through the two custom
   properties: nav.js writes the background as an inline style on every
   scroll, so a plain background override here silently loses. The
   background decl below only covers the paint before nav.js runs. */
#mb-nav{--mb-nav-bg:rgba(0,0,0,.62);--mb-nav-bg-scrolled:rgba(0,0,0,.9);background:rgba(0,0,0,.62);border-bottom-color:rgba(255,255,255,.08)}
#mb-nav .mbl-word{color:#FBF6F1}
#mb-nav .mbl-mark{--mbl-ink:#FBF6F1}
#mb-nav .mb-navlink,#mb-nav .mb-navtrigger,#mb-nav .mb-nav-signin{color:#E5DAD0}
#mb-nav .mb-navlink:hover,#mb-nav .mb-nav-signin:hover,#mb-nav .mb-navtrigger:hover,#mb-nav .mb-navitem.mb-open .mb-navtrigger{color:#F5906F}
#mb-nav .mb-hamburger{color:#F1E9E1;border-color:rgba(255,255,255,.2);background:none}
#mb-nav .mb-hamburger:hover{border-color:rgba(255,255,255,.38)}
#mb-nav .mb-hamburger[aria-expanded="true"]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
/* nav.css forces the bar light while the mobile sheet is open — flip the
   lockup and hamburger back to ink for that state */
body.mb-menu-open #mb-nav .mbl-word{color:#141821}
body.mb-menu-open #mb-nav .mbl-mark{--mbl-ink:#141821}
body.mb-menu-open #mb-nav .mb-hamburger{color:#141821;border-color:#E3D7CE;background:#FBF5F1}
/* anchor targets land below the fixed bar, not underneath it */
section[id],header[id]{scroll-margin-top:84px}

/* ---- star dust ----------------------------------------------------------
   Two tiled dot layers drifting slowly. Each layer is oversized by exactly
   one tile and translated by one tile, so the loop is seamless and the
   animation stays on the compositor (transform, not background-position).
   Placement is blue noise, not a grid: one dot per tile put every star on
   the same lattice and the eye reads rows instantly. These are Poisson-disc
   samples generated on a TORUS, so the repeat has no seam and no clump. */
.mb-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mb-stars i{position:absolute;top:0;left:0;background-repeat:repeat}
.mb-stars i:first-child{width:calc(100% + 1240px);height:calc(100% + 1240px);background-image:radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.42) 1px,transparent 2px);background-size:1240px 1240px;background-position:881px 816px,790px 561px,418px 752px,1192px 915px,747px 1162px,924px 275px,541px 384px,77px 628px,390px 1178px,1167px 133px,263px 347px,117px 1127px,1028px 1150px,589px 124px,1054px 556px,574px 977px;animation:mbStarA 500s linear infinite}
.mb-stars i:last-child{width:calc(100% + 1700px);height:calc(100% + 1700px);background-image:radial-gradient(circle,rgba(255,222,206,.32) 1.3px,transparent 2.6px),radial-gradient(circle,rgba(255,222,206,.32) 1.3px,transparent 2.6px),radial-gradient(circle,rgba(255,222,206,.32) 1.3px,transparent 2.6px),radial-gradient(circle,rgba(255,222,206,.32) 1.3px,transparent 2.6px),radial-gradient(circle,rgba(255,222,206,.32) 1.3px,transparent 2.6px),radial-gradient(circle,rgba(255,222,206,.32) 1.3px,transparent 2.6px),radial-gradient(circle,rgba(255,222,206,.32) 1.3px,transparent 2.6px),radial-gradient(circle,rgba(255,222,206,.32) 1.3px,transparent 2.6px),radial-gradient(circle,rgba(255,222,206,.32) 1.3px,transparent 2.6px),radial-gradient(circle,rgba(255,222,206,.32) 1.3px,transparent 2.6px),radial-gradient(circle,rgba(255,222,206,.32) 1.3px,transparent 2.6px);background-size:1700px 1700px;background-position:1532px 606px,850px 1298px,1459px 1167px,79px 137px,632px 1657px,270px 633px,312px 1249px,834px 805px,1063px 23px,1128px 507px,625px 422px;animation:mbStarB 600s linear infinite}
@keyframes mbStarA{to{transform:translate3d(-1240px,-1240px,0)}}
@keyframes mbStarB{to{transform:translate3d(-1700px,0,0)}}

/* ---- the border beam ----------------------------------------------------
   A bright segment of a conic gradient masked down to a 1.5px ring, spun by
   animating the registered --mb-a angle. Browsers without @property render a
   static highlight segment instead — fine. Three places carry it and no
   more: the hero frame, the hero input, and the Visibility panel. */
@property --mb-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.mb-beam{position:relative}
.mb-beam::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--mb-a),transparent 0,transparent 72%,rgba(241,122,90,.08) 78%,rgba(241,122,90,.85) 91%,#FFE8DB 95%,transparent 96%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:mbBeamSpin 8s linear infinite;pointer-events:none;z-index:6}
/* The input runs the SAME beam as the screenshot frame — one style, not two.
   It only differs in phase and speed, so the two never travel in lockstep. */
.mb-beam-input::after{animation-duration:5s;animation-delay:-2.5s}
.mb-beam-slow::after{animation-duration:11s}
@keyframes mbBeamSpin{to{--mb-a:1turn}}
/* The lens rail doubles as the autoplay clock: the rule under the active
   metric fills across one cycle, so the switch is never a surprise. */
@keyframes mbLensFill{from{width:0}to{width:100%}}

/* ---- hero screenshot stage ----------------------------------------------
   Five real console screenshots, crossfading in one stage. The stage keeps
   the shots' own 9:5 ratio: they are cut to the frame ahead of time, and
   bending the frame to a different ratio crops the evidence — the defect
   that got the old "Inside the app" rail deleted twice. */
.mb-shotstage{position:relative;aspect-ratio:9/5;background:#0A0909}
.mb-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .8s ease}
.mb-shot.mb-on{opacity:1}
/* The demo melts into the page: one mask on the whole frame, so screenshot,
   ground, border and beam all dissolve at the bottom edge. The frame's glow
   shadows live on the WRAPPER, because a mask would clip a box-shadow
   painted outside the border box.

   The solid stop runs to 88%, not 55%. Starting the ramp at the midpoint
   dimmed the half of the screenshot carrying the actual evidence — the trend
   chart and its confidence band — so the shot read as washed out rather than
   as a screen running off the page. 88% clears the trend chart's own axis
   row, which is the lowest thing any of the five slides needs read. */
.mb-melt{-webkit-mask-image:linear-gradient(180deg,#000 88%,rgba(0,0,0,.55) 94%,rgba(0,0,0,.12) 98%,transparent 100%);mask-image:linear-gradient(180deg,#000 88%,rgba(0,0,0,.55) 94%,rgba(0,0,0,.12) 98%,transparent 100%)}
.mb-shotdots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:30px;position:relative;z-index:3}
.mb-sdot{appearance:none;font-family:inherit;font-size:12.5px;font-weight:600;color:#B7A99D;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:8px 16px;cursor:pointer;transition:color .22s ease,border-color .22s ease,background .22s ease}
.mb-sdot:hover{color:#F1E9E1;border-color:rgba(255,255,255,.3)}
.mb-sdot.mb-on{color:#FFD9CB;border-color:rgba(236,107,76,.65);background:rgba(236,107,76,.16)}
.mb-hero-input{flex:1;width:100%;background:#fff;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:15px 18px;font-size:16px;color:#141821;outline:none;box-shadow:0 18px 44px -18px rgba(0,0,0,.6);transition:box-shadow .2s ease}
.mb-hero-input::placeholder{color:#9AA3B0}
.mb-hero-input:focus{box-shadow:0 0 0 3px rgba(236,107,76,.22),0 18px 44px -18px rgba(0,0,0,.6)}

/* ---- the three numbers --------------------------------------------------
   Every headline number carries its interval. Never publish a value outside
   its own CI, and never lead with a bare score. */
.mb-lensrow{position:relative;display:flex;align-items:center;gap:20px;width:100%;text-align:left;cursor:pointer;background:none;padding:20px 4px;border:0;border-top:1px solid rgba(255,255,255,.12);transition:border-color .3s ease}
.mb-lensrow:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.mb-lensrow.mb-on{border-top-color:rgba(255,255,255,.28)}
.mb-lensnum{font-family:'Space Grotesk',sans-serif;font-size:clamp(38px,4.2vw,54px);font-weight:400;letter-spacing:-.03em;line-height:1;color:rgba(255,255,255,.3);transition:color .3s ease;min-width:3.1ch;text-align:left}
.mb-lensrow.mb-on .mb-lensnum{color:#fff}
.mb-lenslab{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);transition:color .3s ease}
.mb-lensrow.mb-on .mb-lenslab{color:#FFC7AF}
.mb-lenssub{font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.45);text-align:left}
.mb-lensdel{display:block;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:rgba(255,255,255,.28)}
.mb-lensrow.mb-on .mb-lensdel{color:#8BE9C0}
.mb-lensci{display:block;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:rgba(255,255,255,.35);margin-top:5px}
.mb-lensbar{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:#EC6B4C}
.mb-splitbar{display:flex;height:9px;border-radius:5px;overflow:hidden;margin-top:16px;background:rgba(255,255,255,.06)}
.mb-splitbar span{transition:width .55s cubic-bezier(.2,.7,.2,1)}
.mb-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:rgba(255,255,255,.45)}
.mb-legend span{display:inline-flex;align-items:center;gap:7px}
.mb-legend i{width:7px;height:7px;border-radius:2px;flex:none}
.mb-erow{display:flex;align-items:center;gap:14px}
.mb-erow-name{flex:none;width:88px;font-size:13px;color:rgba(255,255,255,.75)}
.mb-erow-track{flex:1;position:relative;height:7px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.mb-erow-band{position:absolute;top:0;bottom:0;border-radius:4px;background:rgba(236,107,76,.55);box-shadow:inset 0 0 0 1px rgba(236,107,76,.5);transition:left .55s cubic-bezier(.2,.7,.2,1),width .55s cubic-bezier(.2,.7,.2,1)}
.mb-erow-pct{flex:none;width:44px;text-align:right;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:#fff}
.mb-erow-ci{flex:none;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;color:rgba(255,255,255,.38);white-space:nowrap}

/* ---- answers ------------------------------------------------------------ */
.mb-ansrow{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid rgba(255,255,255,.07)}
.mb-ansrow .mb-eng{flex:none;width:84px;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:rgba(255,255,255,.45)}
.mb-ansrow .mb-q{flex:1;font-size:13.5px;color:rgba(255,255,255,.78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-ansrow .mb-cites{flex:none;width:52px;text-align:right;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:rgba(255,255,255,.32)}
.mb-verdict{flex:none;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:4px 8px;white-space:nowrap}
.mb-v-yes{color:#8BE9C0;background:rgba(139,233,192,.12)}
.mb-v-no{color:#F5A78B;background:rgba(236,107,76,.12)}
.mb-hl{color:#fff;font-weight:600;background:rgba(236,107,76,.22);padding:1px 5px;border-radius:3px}

/* ---- leaderboards (competitors, citations) ------------------------------
   Bars are drawn at their LITERAL share, never normalised to the leader —
   normalising makes second place look like a near miss when it isn't. */
.mb-lb{display:flex;align-items:center;gap:12px}
.mb-lb-rank{flex:none;width:16px;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:rgba(255,255,255,.35)}
.mb-lb-name{flex:none;width:110px;font-size:15px;color:rgba(255,255,255,.72)}
.mb-lb-name.mb-you{color:#fff;font-weight:600}
.mb-lb-track{flex:1;max-width:210px;height:11px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.mb-lb-track span{display:block;height:100%;border-radius:5px;background:rgba(255,255,255,.22)}
.mb-lb-track span.mb-you{background:linear-gradient(90deg,#F17A5A,#DE5A38)}
.mb-lb-pct{flex:none;width:46px;text-align:right;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;color:rgba(255,255,255,.6)}
.mb-lb-pct.mb-you{color:#fff}
.mb-src-name{flex:none;width:132px;font-size:14.5px;color:rgba(255,255,255,.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-src-track{flex:1;max-width:210px;height:10px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden}
.mb-src-track span{display:block;height:100%;border-radius:4px;background:rgba(236,107,76,.75)}
.mb-src-track span.mb-mine{background:rgba(139,233,192,.7)}
.mb-src-pct{flex:none;width:42px;text-align:right;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;color:#fff}
.mb-own{flex:none;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor;border-radius:4px;padding:3px 7px;opacity:.85}

/* ---- the transition line ------------------------------------------------ */
/* The unlit state is gated on .mb-js. Without the script nothing would ever
   light these words, and the page's own hinge would render at 12% opacity —
   which is also the version an AI crawler reads, since crawlers do not run
   JS. Same reasoning for the agent steps, flow nodes and result panels
   below: every one of them starts hidden ONLY when something is going to
   show it. */
.mb-word{display:inline-block;white-space:pre;color:rgba(255,255,255,.55);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.mb-js .mb-word{opacity:.12;transform:translateY(14px)}
.mb-word.mb-late{color:#fff}
.mb-js .mb-word.mb-lit{opacity:1;transform:none}

/* ---- agents -------------------------------------------------------------
   One step fades in every 1150ms, then the finished artifact appears. */
.mb-astep{display:flex;align-items:center;gap:12px;padding:11px 16px;transition:background .3s ease,opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.mb-js .mb-astep{opacity:0;transform:translateY(10px)}
.mb-js .mb-astep.mb-seen{opacity:1;transform:none}
.mb-astep.mb-run{background:rgba(236,107,76,.09)}
.mb-astep i{flex:none;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16);transition:background .3s ease,box-shadow .3s ease}
.mb-astep.mb-done i{background:rgba(139,233,192,.85)}
.mb-astep.mb-run i{background:#EC6B4C;box-shadow:0 0 0 4px rgba(236,107,76,.22)}
.mb-astep .mb-kind{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);width:74px;flex:none}
.mb-astep .mb-txt{flex:1;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.26);transition:color .3s ease}
.mb-astep.mb-done .mb-txt{color:rgba(255,255,255,.62)}
.mb-astep.mb-run .mb-txt{color:#fff}
.mb-astep .mb-note{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:rgba(255,255,255,.35);white-space:nowrap}
.mb-astep.mb-run .mb-note{color:#FFC7AF}
.mb-astep:not(.mb-seen) .mb-note{visibility:hidden}
.mb-tick{flex:none;width:18px;height:18px;border-radius:50%;background:rgba(139,233,192,.9);color:#06281c;font-size:11px;display:flex;align-items:center;justify-content:center}
.mb-out{padding:16px;margin:6px 12px 12px;border-radius:10px;border:1px solid rgba(139,233,192,.26);background:rgba(139,233,192,.06);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.mb-js .mb-out{opacity:0;transform:translateY(10px)}
.mb-js .mb-out.mb-on{opacity:1;transform:none}

/* ---- flows --------------------------------------------------------------
   One node card appears every 1900ms; clicking a step locks autoplay so the
   reader can take over without fighting the timer. */
.mb-node{flex:1 1 168px;min-width:150px;max-width:230px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:15px;border-radius:8px;cursor:pointer;text-align:left;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1),border-color .25s ease,background .25s ease,box-shadow .25s ease}
.mb-js .mb-node{opacity:0;transform:translateY(14px) scale(.97);pointer-events:none}
.mb-js .mb-node.mb-seen{opacity:1;transform:none;pointer-events:auto}
.mb-node:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.055)}
.mb-node.mb-on{border-color:rgba(236,107,76,.62);background:rgba(236,107,76,.1);box-shadow:0 18px 44px -22px rgba(236,107,76,.8)}
.mb-node .mb-kind{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:4px;color:rgba(255,255,255,.45);background:rgba(255,255,255,.06);transition:color .25s ease,background .25s ease}
.mb-node.mb-on .mb-kind{color:#FFC7AF;background:rgba(236,107,76,.2)}
.mb-node .mb-nt{font-size:14.5px;font-weight:600;color:#fff;line-height:1.35}
.mb-node .mb-ns{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.45)}
.mb-arrow{font-size:12px;line-height:1;color:rgba(236,107,76,.85)}
.mb-flowres{display:flex;align-items:center;gap:12px;margin-top:22px;padding:13px 16px;border-radius:8px;border:1px solid rgba(139,233,192,.28);background:rgba(139,233,192,.07);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.mb-js .mb-flowres{opacity:0;transform:translateY(10px)}
.mb-js .mb-flowres.mb-on{opacity:1;transform:none}
.mb-runrow{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid rgba(255,255,255,.07)}

/* ---- engine ring --------------------------------------------------------
   Eight faces on a 1200px perspective, rotating at 14.4 deg/s and spinnable
   by hand. Copilot, Grok and DeepSeek carry monogram tiles: we do not have
   their marks and we never substitute another vendor's. */
.mb-ringwrap{height:380px;margin-top:24px;perspective:1200px;perspective-origin:50% 44%;cursor:grab;touch-action:pan-y}
.mb-ring{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform;transform:translateY(38px) rotateX(-9deg)}
/* Every face is two-sided: a front card and a mirrored twin behind it, each
   with its own backface hidden. That way the whole circle stays populated —
   the far half reads as dimmer cards seen through the ring — without any
   label ever rendering mirrored. */
.mb-ringface{position:absolute;top:50%;left:50%;width:112px;height:112px;margin:-56px 0 0 -56px;transform-style:preserve-3d}
.mb-ringcard{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.mb-ringcard span:last-child{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;color:#F1E9E1;text-align:center;line-height:1.25;max-width:96px}
.mb-ringback{transform:rotateY(180deg);opacity:.42;box-shadow:none}
.mb-mono-tile{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:600}
.mb-engcards{margin-top:96px}
@media (max-width:760px){.mb-engcards{margin-top:56px}}

/* ---- prove -------------------------------------------------------------- */
.mb-vrow{display:flex;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:rgba(255,255,255,.02);padding:14px 16px}
.mb-vbadge{flex:none;min-width:44px;text-align:center;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;font-weight:600;padding:6px 10px;border-radius:5px}
.mb-vlabel{flex:1;font-size:14px;line-height:1.45;color:rgba(255,255,255,.65)}
.mb-vword{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.02em}

/* ---- customers ----------------------------------------------------------
   Photos are supplied by each person, never harvested. Until one arrives the
   avatar is the initials monogram; drop the file at /people/<slug>.webp and
   the card picks it up. */
.mb-tcard{display:flex;flex-direction:column;justify-content:space-between;gap:22px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.02);padding:26px;position:relative;transition:border-color .25s ease,background .25s ease}
.mb-tcard[hidden]{display:none}
.mb-tcard:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
.mb-tcard p{font-size:15px;line-height:1.6;margin:0;text-wrap:pretty;color:rgba(255,255,255,.82)}
.mb-av{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;color:#F5A78B;letter-spacing:.02em}
.mb-av img{width:100%;height:100%;object-fit:cover}
.mb-tname{display:block;font-size:14px;font-weight:600;color:#fff}
.mb-trole{display:block;font-size:12.5px;color:rgba(255,255,255,.45);margin-top:2px}
.mb-tplace{display:block;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;color:rgba(255,255,255,.3);margin-top:4px}
.mb-page{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease}
.mb-page:disabled{border-color:rgba(255,255,255,.1);background:none;color:rgba(255,255,255,.22);cursor:default}
.mb-ghost{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;height:92px;overflow:hidden}
.mb-ghost div{border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.02);height:220px}
/* ---- brand logo grid ----------------------------------------------------
   Same depth trick as the testimonial wall: clipped ghost rows above and
   below imply a grid that runs past the section, and the outer columns
   dissolve sideways so the twelve real logos read as a sample of many. */
/* The sideways fade must die before the first cell's logo box, or real logos
   read as half-erased instead of as depth. */
.mb-logowrap{-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent)}
/* Two rows of five, with ghost rows above and below carrying the sense of a
   bigger set. Column counts must divide ten exactly or a row ends in holes
   and the ghost rows stop lining up. */
.mb-logogrid,.mb-lghost{display:grid;grid-template-columns:repeat(5,1fr)}
.mb-logogrid > span,.mb-lghost > span{box-shadow:inset -1px 0 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.1)}
.mb-logogrid > span:nth-child(5n),.mb-lghost > span:nth-child(5n){box-shadow:inset 0 -1px 0 rgba(255,255,255,.1)}
.mb-logogrid > span{display:flex;align-items:center;justify-content:center;padding:34px 24px}
.mb-lghost{height:44px;overflow:hidden;pointer-events:none}
.mb-lghost > span{height:128px}
.mb-lghost-t{-webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent)}
.mb-lghost-b{-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
/* One clear-right rule per breakpoint, keyed to that breakpoint's last
   column. Any leftover rule from another column count offsets the seams
   row to row. */
@media (max-width:1000px){.mb-logogrid > span{padding:26px 14px}}
@media (max-width:640px){.mb-logogrid,.mb-lghost{grid-template-columns:repeat(2,1fr)}.mb-logogrid > span,.mb-lghost > span{box-shadow:inset -1px 0 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.1)}.mb-logogrid > span:nth-child(2n),.mb-lghost > span:nth-child(2n){box-shadow:inset 0 -1px 0 rgba(255,255,255,.1)}}

/* ---- bento setup grid --------------------------------------------------
   Four cells, asymmetric columns, each mockup bleeding past the bottom edge
   so no cell ends in dead space. Text is capped at a title and one line. */
.mb-bento{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px;margin-top:14px}
.mb-bento-alt{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.mb-bcell{position:relative;overflow:hidden;height:430px;padding:30px 32px 0;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.02)}
.mb-bcell h3{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;letter-spacing:-.02em;color:#fff;margin:0}
.mb-bcell p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.5);margin:9px 0 0;max-width:38ch}
/* Anchored top AND bottom past the clip, so the panel always overruns the
   card edge instead of floating with dead space under it. The right edge
   stays inside the card: the values live in that column. */
.mb-bmock{position:absolute;left:32px;right:32px;top:150px;bottom:-64px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:#0C0B0B;box-shadow:0 40px 90px -50px rgba(0,0,0,.95);overflow:hidden}
.mb-brow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid rgba(255,255,255,.06);font-size:12.5px;color:rgba(255,255,255,.78)}
.mb-bhead{display:flex;align-items:center;gap:10px;padding:11px 14px;background:rgba(255,255,255,.03)}
@media (max-width:900px){
  .mb-bento,.mb-bento-alt{grid-template-columns:1fr}
  .mb-bcell{height:390px}
}

.mb-ghost-t{-webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent)}
.mb-ghost-b{-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}

/* ---- faq ---------------------------------------------------------------- */
.mb-faq{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.2);border-radius:6px;overflow:hidden;transition:background .2s ease,border-color .2s ease}
.mb-faq.mb-open{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}
.mb-faq-q{width:100%;display:flex;align-items:center;gap:16px;background:none;border:none;padding:22px 24px;cursor:pointer;text-align:left}
.mb-faq-q span:first-child{flex:1;font-size:16px;color:#fff;letter-spacing:-.005em}
.mb-faq-icon{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:#F5A78B;font-size:16px;line-height:1;transition:transform .3s ease}
.mb-faq.mb-open .mb-faq-icon{transform:rotate(45deg)}
.mb-faq-a{overflow:hidden;max-height:0;opacity:0;padding:0 24px;font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.55);max-width:78ch;transition:max-height .35s ease,opacity .25s ease,padding .35s ease}
.mb-faq.mb-open .mb-faq-a{max-height:460px;opacity:1;padding:0 24px 22px;transition:max-height .4s ease,opacity .35s ease,padding .4s ease}

/* "Check our work" — the transparency links. Proof, not a pitch, so they sit
   beside the FAQ where a sceptic is already looking for somewhere to check. */
/* One column, not two. The FAQ's left rail is ~560px wide, and at two columns
   every label wrapped and its descriptor landed beside the wrap instead of
   after it. */
.mb-proof{display:grid;grid-template-columns:1fr;gap:11px;margin-top:26px}
.mb-proof a{display:inline-flex;align-items:baseline;gap:8px;font-size:14px;font-weight:600;color:#F5A78B;text-decoration:none;transition:gap .2s ease}
.mb-proof a span{font-weight:500;color:rgba(255,255,255,.42)}
.mb-proof a:hover{gap:11px;color:#FFC7AF}
.mb-proof a:hover span{color:rgba(255,255,255,.6)}

/* ---- responsive ---------------------------------------------------------
   One breakpoint collapses every split; a second drops the grids to one
   column and pulls the section gutters in. Nothing on this page may scroll
   sideways at 375px. */
@media (max-width:1080px){
  .mb-split{grid-template-columns:1fr!important;gap:44px!important}
  .mb-g3{grid-template-columns:1fr 1fr}
  .mb-flip{order:2}
  .mb-ringwrap{height:330px}
}
/* The claim column falls under ~230px well before 900 once the section's own
   14vw padding is counted, so the row stacks earlier than the rest. */
@media (max-width:1080px){
  .mb-frow{grid-template-columns:1fr}
  .mb-frow > :first-child{padding:34px 0 24px;border-right:0}
  .mb-frow > :last-child{padding:0 0 38px}
}
@media (max-width:900px){
  .mb-frow{grid-template-columns:1fr}
  .mb-frow > :first-child{padding:34px 0 24px;border-right:0}
  .mb-frow > :last-child{padding:0 0 38px}
  .mb-sec{padding:104px 40px}
  .mb-sec-lite{padding:96px 40px}
  #act{padding:150px 40px 150px!important}
}
@media (max-width:760px){
  .mb-sec{padding-left:22px;padding-right:22px}
  .mb-g3{grid-template-columns:1fr}
  .mb-ghost{grid-template-columns:1fr 1fr}
  .mb-pbody{padding:20px 18px 70px}
  .mb-crop{padding:0 18px 10px}
  .mb-lb-name,.mb-src-name{width:96px;font-size:13.5px}
  .mb-erow-ci{display:none}
  /* The chrome bar's trailing metadata is the first thing to go: it is
     flavour, and at this width it truncates mid-word instead of shrinking. */
  .mb-cmeta,.mb-cmeta-grp{display:none}
  /* A metric may never print without its interval, so on a narrow screen the
     delta and the CI drop to their own line rather than being clipped. */
  .mb-lensrow{flex-wrap:wrap;gap:10px 14px;padding:18px 0}
  .mb-lensrow > span:nth-of-type(2){margin-left:0!important;text-align:left!important;flex:1 0 100%;display:flex;gap:14px;align-items:baseline}
  .mb-lensci{margin-top:0}
  .mb-lensnum{font-size:38px}
  /* Same idea for an answer row: engine and verdict share a line, the
     question gets a full one instead of an ellipsis three words in. */
  .mb-ansrow{flex-wrap:wrap;gap:8px 10px}
  .mb-ansrow .mb-eng{width:auto}
  .mb-ansrow .mb-q{flex:1 0 100%;white-space:normal;order:3}
  .mb-verdict{order:2}
  .mb-ansrow .mb-cites{display:none}
  /* The ring's front face is magnified by the perspective, so at this width
     it grew past the section and sat on the cards below. Scale the whole
     scene rather than the faces — the geometry stays the design's. */
  .mb-ringwrap{height:250px;transform:scale(.7);transform-origin:50% 50%}
}

/* ---- reduced motion -----------------------------------------------------
   Everything decorative stops; nothing that carries meaning disappears. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mb-stars i,.mb-beam::after,.mb-blob{animation:none!important}
  .mb-mark{animation:none!important}
  .mb-js [data-reveal]{opacity:1!important;transform:none!important}
  .mb-shot{transition:none}
  /* The flow button keeps a hover state, but nothing travels: no growing
     circle, no arrows crossing the button, no radius morph. */
  .mb-flow,.mb-flow-t,.mb-flow-arr,.mb-flow-circle{transition:none!important}
  .mb-flow:hover,.mb-flow:focus-visible{color:#fff;filter:brightness(1.07)}
  .mb-flow:hover .mb-flow-t,.mb-flow:focus-visible .mb-flow-t{transform:translateX(-12px)}
  .mb-flow:hover .mb-flow-in,.mb-flow:focus-visible .mb-flow-in{left:-25%}
  .mb-flow:hover .mb-flow-out,.mb-flow:focus-visible .mb-flow-out{right:16px}
  .mb-flow:hover .mb-flow-circle,.mb-flow:focus-visible .mb-flow-circle{width:16px;height:16px;margin:-8px 0 0 -8px;opacity:0}
  .mb-flow:active{transform:none}
  /* Needs the .mb-js prefix and !important to outrank the unlit rule this
     block is undoing — `.mb-word` alone loses to `.mb-js .mb-word` on
     specificity, and the transition line rendered at 12% opacity. */
  .mb-js .mb-word{opacity:1!important;transform:none!important}
}


/* ---- competitors chart + map (added 2026-09-03) ---------------------- */
/* Wraps rather than clipping: the pill row is the only lens control, so no
   pill may ever sit outside the frame's overflow:hidden edge. */
.mb-lensbox{margin-left:auto;min-width:0;display:flex;flex-wrap:wrap;gap:4px;padding:3px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.03)}
.mb-pill{appearance:none;border:0;cursor:pointer;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.02em;color:rgba(255,255,255,.55);background:transparent;border-radius:999px;padding:5px 11px;white-space:nowrap;transition:color .2s ease,background .2s ease}
.mb-pill:hover{color:#F1E9E1}
.mb-pill.mb-on{color:#FFD9CB;background:rgba(236,107,76,.18);box-shadow:inset 0 0 0 1px rgba(236,107,76,.55)}
.mb-lg{appearance:none;border:0;width:100%;display:flex;align-items:center;gap:12px;padding:7px 8px;border-radius:6px;background:transparent;cursor:pointer;text-align:left;font-family:inherit;transition:background .2s ease,opacity .2s ease}
.mb-lg-sw{flex:none;width:18px;height:3px;border-radius:2px}
.mb-lg-name{flex:1;min-width:0;font-size:14px}
.mb-lg-val{flex:none;width:44px;text-align:right;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:#fff}
.mb-lg-delta{flex:none;width:92px;text-align:right;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px}
.mb-mapgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.mb-maprail{border-left:1px solid rgba(255,255,255,.08);padding:22px 18px 18px}
.mb-railrow{appearance:none;width:100%;display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;border:1px solid transparent;background:transparent;cursor:pointer;text-align:left;font-family:inherit;transition:background .2s ease,border-color .2s ease}
.mb-railtile{flex:none;width:26px;height:26px;border-radius:7px;border:1px solid;display:flex;align-items:center;justify-content:center;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:600;background:rgba(255,255,255,.03)}
.mb-svglab{position:absolute;font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;line-height:1;color:rgba(255,255,255,.35);white-space:nowrap;pointer-events:none;transition:opacity .25s ease}
.mb-engrow{appearance:none;width:100%;display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:8px;border:1px solid transparent;border-top:1px solid rgba(255,255,255,.07);background:transparent;cursor:pointer;text-align:left;font-family:inherit;transition:background .2s ease,border-color .2s ease}
.mb-legend span{white-space:nowrap}
.mb-eyeb{white-space:nowrap}
.mb-tip{position:absolute;transform:translate(-50%,calc(-100% - 12px));pointer-events:none;z-index:5;padding:9px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(20,18,18,.96);box-shadow:0 20px 50px -20px rgba(0,0,0,.9);white-space:nowrap}
.mb-h2h{border-top:1px solid rgba(255,255,255,.08);padding:20px 24px 24px}
.mb-h2hgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;margin-top:18px;align-items:start}
@media (max-width:1080px){.mb-mapgrid{grid-template-columns:1fr}.mb-maprail{border-left:0;border-top:1px solid rgba(255,255,255,.08)}.mb-h2hgrid{grid-template-columns:1fr;gap:22px}}
@media (max-width:1080px){.mb-lensbox{margin-left:0}}
@media (max-width:760px){.mb-lg-delta{display:none}}


/* ---- consolidated product showcase (added 2026-09-04) ----------------
   Four views on one run. The tab strip carries the promise, the frame
   below carries the proof; autoplay stops for good on the first click,
   because a panel that moves while you read it is worse than a static
   one. */
.mb-sctabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:44px;border-top:1px solid rgba(255,255,255,.12)}
.mb-sctab{position:relative;appearance:none;background:transparent;border:0;border-left:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:20px 22px 24px;text-align:left;font-family:inherit;cursor:pointer;transition:background .3s ease}
.mb-sctab:first-child{border-left:0}
.mb-sctabs-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.mb-sctabs-5 .mb-sctab h3{font-size:18px}
@media (max-width:1180px){.mb-sctabs-5{grid-template-columns:repeat(3,minmax(0,1fr))}.mb-sctabs-5 .mb-sctab:nth-child(4){border-left:0}}
@media (max-width:700px){.mb-sctabs-5{grid-template-columns:1fr}}
.mb-sctab:hover{background:rgba(255,255,255,.03)}
.mb-sctab.mb-on{background:rgba(255,255,255,.04)}
.mb-scnum{display:block;font-size:10.5px;letter-spacing:.12em;color:rgba(255,255,255,.3);transition:color .3s ease}
.mb-sctab.mb-on .mb-scnum{color:#FFC7AF}
.mb-sctab h3{font-family:'Space Grotesk',sans-serif;font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.02em;color:rgba(255,255,255,.5);margin:14px 0 0;transition:color .3s ease}
.mb-sctab.mb-on h3{color:#fff}
.mb-sctab p{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.33);margin:9px 0 0;transition:color .3s ease}
.mb-sctab.mb-on p{color:rgba(255,255,255,.55)}
.mb-scbar{position:absolute;left:0;top:-1px;height:2px;width:0;background:#EC6B4C}
.mb-scframe{margin-top:26px}
.mb-sctop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.mb-sctop > .mb-mono:first-child{white-space:nowrap}
.mb-scchip{font-size:10.5px;color:rgba(255,255,255,.45);border-radius:999px;padding:4px 10px;white-space:nowrap}
.mb-scchip.mb-on{color:#F1E9E1;background:rgba(255,255,255,.08)}
.mb-sclink{font-size:12.5px;font-weight:600;color:#FFC7AF;text-decoration:none;padding:4px 2px;white-space:nowrap}
.mb-sclink:hover{color:#fff}
.mb-scshell{display:block}
/* No fake app nav: the tab strip above IS the navigation, so the frame
   carries only a breadcrumb naming the view on screen. */
.mb-scsep{font-size:12px;color:rgba(255,255,255,.25)}
.mb-scview{font-size:12px;color:rgba(255,255,255,.6)}
/* All four panes share one grid cell, so the frame is always as tall as the
   tallest view and switching never shifts the page below it. */
.mb-scmain{position:relative;display:grid;min-height:420px}
.mb-scpane{grid-area:1/1;visibility:hidden;pointer-events:none}
.mb-scpane.mb-on{visibility:visible;pointer-events:auto;animation:mbScIn .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes mbScIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mb-scsplit{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);min-height:534px}
.mb-sclist{border-right:1px solid rgba(255,255,255,.08)}
.mb-scsub{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.mb-scrow{display:flex;align-items:center;gap:10px;padding:13.5px 18px;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}
.mb-scrow.mb-on{background:rgba(236,107,76,.1);box-shadow:inset 2px 0 0 #EC6B4C}
.mb-scdetail{position:relative;padding:22px 26px 26px;display:flex;flex-direction:column;justify-content:center}
.mb-scogrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:0 34px}
.mb-scorank{padding-top:16px}
@media (max-width:1080px){
  .mb-sctabs{grid-template-columns:1fr 1fr}
  .mb-sctabs:not(.mb-sctabs-3) .mb-sctab:nth-child(3){border-left:0}
  .mb-scsplit{min-height:0}
  .mb-scsplit{grid-template-columns:1fr}
  .mb-sclist{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .mb-scogrid{grid-template-columns:1fr;gap:8px}
}
@media (max-width:1000px){
  .mb-sctop > .mb-scchip:nth-child(4),.mb-sctop > .mb-scchip:nth-child(6),.mb-sctop > .mb-scchip:nth-child(8){display:none}
}
@media (max-width:700px){
  .mb-sctabs{grid-template-columns:1fr}
  .mb-sctab{border-left:0!important;padding:18px 4px 20px}
  .mb-scdetail{padding:20px 18px 22px}
}

.mb-sctabs.mb-sctabs-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){.mb-sctabs.mb-sctabs-3{grid-template-columns:1fr}}

/* ---- the two quiet "learn more" buttons ---------------------------------
   The handoff wrote their hover as `style-hover`, which is the design tool's
   own attribute. Same two declarations, as a rule, with the motion gated the
   way every other hover on the site is. */
.mb-quietbtn{transition:background .2s ease,border-color .2s ease,transform .2s ease}
.mb-quietbtn:hover{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.3)!important;transform:translateY(-2px)}
.mb-quietbtn:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.mb-quietbtn:hover{transform:none}}

/* ---- back to top --------------------------------------------------------
   The control is the shared partial (public/backtotop.html), server-appended
   to every marketing page — so its markup, geometry, z-index and behaviour are
   not this page's to set. Only the paint is: the handoff drew a dark
   translucent disc for the dark ground, and a cream one would be the brightest
   object on a black page.

   `body` is on the front of both rules because the partial ships its own
   <style> at the END of <body>: same specificity, later in the document, so a
   bare .mb-totop here would lose the cascade and change nothing. */
body .mb-totop{background:rgba(12,11,11,.78);border-color:rgba(255,255,255,.18);color:#F1E9E1;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.9)}
body .mb-totop:hover{background:rgba(236,107,76,.2);border-color:rgba(236,107,76,.45);color:#FFC7AF;
  box-shadow:0 14px 30px -12px rgba(236,107,76,.4)}