/* ==========================================================================
   Qualimetrix website — component layer
   --------------------------------------------------------------------------
   Every rule here is a direct translation of a Qualimetrix Design System
   component (components/**) into static CSS. Values come from design tokens
   via var(); no raw hex colours, and no font other than Inter.
   Load order: styles.css (tokens) then site.css (this file).
   ========================================================================== */

/* --------------------------------------------------------------------------
   core/Icon
   Stroke-only 24x24 Lucide glyphs, drawn inline. Sizes are the literals the
   design system uses per slot (13 / 14 / 24 / 26 / 36).
   -------------------------------------------------------------------------- */
.qmx-icon{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;width:24px;height:24px}
.qmx-icon--13{width:13px;height:13px}
.qmx-icon--14{width:14px;height:14px}
.qmx-icon--26{width:26px;height:26px}
.qmx-icon--36{width:36px;height:36px;stroke-width:1.55}

/* --------------------------------------------------------------------------
   core/Button — primary, secondary, nav. Hover is the 1px lift only:
   no colour change, no scale, no shadow. No press state exists in the source.
   -------------------------------------------------------------------------- */
.qmx-btn{display:inline-flex;align-items:center;gap:var(--qmx-space-13);font-family:var(--font-body);font-size:var(--qmx-text-12);font-weight:var(--qmx-weight-semibold);line-height:1;padding:var(--pad-button);border-radius:var(--radius-button);transition:var(--transition-button);cursor:pointer;text-decoration:none;white-space:nowrap}
.qmx-btn:hover{transform:var(--qmx-hover-lift)}
.qmx-btn--primary,.qmx-btn--primary:hover{background:var(--accent-primary);color:var(--qmx-white);border:1px solid var(--accent-primary)}
.qmx-btn--secondary,.qmx-btn--secondary:hover{background:transparent;color:var(--qmx-white);border:1px solid var(--qmx-border-on-dark)}
.qmx-btn--nav,.qmx-btn--nav:hover{background:var(--accent-primary);color:var(--qmx-white);border:0;padding:var(--pad-button-sm);gap:0}
.qmx-btn[disabled]{opacity:.45;pointer-events:none}

/* --------------------------------------------------------------------------
   core/Eyebrow, TextLink, Tag, StatePill, StatusDot, CodeChip
   -------------------------------------------------------------------------- */
/* Eyebrows are 10.5px, so they follow the two-orange rule: the deep stop on
   paper (#C43A00, ~5.3:1) and the bright accent on the dark grounds, where
   #FE5000 has the contrast to carry it. Eyebrow.jsx uses --accent-primary on
   both surfaces, which drops to ~3.1:1 on paper; the readme's colour section
   is explicit that kickers take the deep stop, so that rule wins here. */
.qmx-eyebrow{font-size:var(--qmx-text-10-5);font-weight:var(--qmx-weight-bold);text-transform:uppercase;letter-spacing:var(--qmx-tracking-label-wide);color:var(--text-accent)}
.qmx-hero .qmx-eyebrow,.qmx-on-dark .qmx-eyebrow{color:var(--accent-primary)}

.qmx-textlink{font-size:var(--qmx-text-12-5);font-weight:var(--qmx-weight-mid);color:var(--link-color);text-decoration:none;white-space:nowrap}
.qmx-textlink .qmx-icon{display:inline-block;vertical-align:-2px;margin-left:var(--qmx-space-5)}
.qmx-textlink--on-dark{color:var(--link-color-on-dark)}

.qmx-tag{font-size:var(--qmx-text-12);padding:var(--qmx-space-8) var(--qmx-space-10);background:var(--qmx-tint-warm);border:1px solid var(--qmx-tint-warm-border);border-radius:var(--radius-tag);color:var(--qmx-tint-warm-text)}

.qmx-pill{font-size:var(--qmx-text-11);padding:6px var(--qmx-space-8);border-radius:var(--radius-tag);width:max-content}
.qmx-pill--current{background:var(--qmx-state-current-bg);color:var(--qmx-state-current-fg)}
.qmx-pill--partner{background:var(--qmx-state-partner-bg);color:var(--qmx-state-partner-fg)}

.qmx-statusdot{display:flex;align-items:center;gap:var(--qmx-space-8);font-size:var(--qmx-text-13);font-weight:var(--qmx-weight-mid);color:var(--qmx-white)}
.qmx-statusdot i{width:9px;height:9px;border-radius:var(--qmx-radius-pill);background:var(--accent-live);box-shadow:var(--qmx-glow-status);flex:none}

.qmx-codechip{font-size:var(--qmx-text-11);font-family:var(--qmx-font-mono);background:var(--qmx-tint-code);border:1px solid var(--qmx-border-code);padding:var(--qmx-space-9);border-radius:var(--radius-tag);color:var(--qmx-ink-code)}

/* --------------------------------------------------------------------------
   brand/Logo
   The drawn mark: a rounded-square frame with an accent diagonal, set beside
   the logotype in Archivo 600 tracked to .05em. Everything scales off the
   --logo-h custom property, exactly as the component scales off its `height`
   prop (gap = .44x, wordmark = .72x). Two tones only — never recolour it.
   -------------------------------------------------------------------------- */
.qmx-logo{--logo-h:28px;display:inline-flex;align-items:center;gap:calc(var(--logo-h) * .44)}
.qmx-logo svg{width:var(--logo-h);height:var(--logo-h);flex:none;display:block}
.qmx-logo__frame{fill:none;stroke:var(--logo-stroke);stroke-width:3.4}
.qmx-logo__slash{stroke:var(--logo-accent);stroke-width:3.4;stroke-linecap:square}
.qmx-logo__word{font-family:var(--qmx-font-logo);font-weight:var(--qmx-weight-semibold);font-size:calc(var(--logo-h) * .72);letter-spacing:.05em;line-height:1;color:var(--logo-stroke);white-space:nowrap}
.qmx-logo--white{--logo-stroke:var(--qmx-white);--logo-accent:var(--qmx-orange-bright)}
.qmx-logo--oranje{--logo-stroke:var(--qmx-ink);--logo-accent:var(--qmx-orange)}
.qmx-logo--sm{--logo-h:22px}

/* --------------------------------------------------------------------------
   layout/SiteHeader
   Fixed 74px bar, transparent over the hero, opaque scrim past 40px of scroll.
   The section under the header is therefore always dark.
   -------------------------------------------------------------------------- */
.qmx-header{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--qmx-header-height);background:transparent;border-bottom:1px solid transparent;transition:var(--transition-surface)}
.qmx-header.is-scrolled{background:var(--qmx-header-scrim);border-bottom-color:var(--qmx-hairline-dark)}
.qmx-header__inner{height:100%;display:flex;align-items:center;gap:var(--qmx-space-36)}
.qmx-header__logo{width:220px;display:flex;align-items:center}
.qmx-header__nav{display:flex;align-items:center;justify-content:center;gap:var(--qmx-nav-gap);flex:1}
.qmx-header__nav a{font-size:var(--qmx-text-12-5);color:var(--qmx-on-dark-1);white-space:nowrap;padding:27px 0;position:relative;text-decoration:none}
.qmx-header__nav a:hover{color:var(--qmx-white)}
.qmx-header__nav a[aria-current=page]{color:var(--qmx-white)}
.qmx-header__nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent-primary)}
.qmx-header__toggle{display:none;width:38px;height:38px;padding:0;background:transparent;border:1px solid var(--qmx-hairline-dark-strong);border-radius:var(--radius-button);color:var(--qmx-white);cursor:pointer;align-items:center;justify-content:center}
.qmx-header__toggle span{display:block;width:16px;height:1px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}

.qmx-mobile-nav{display:none;position:fixed;top:var(--qmx-header-height);left:0;right:0;z-index:49;background:var(--qmx-nav-mobile);border-bottom:1px solid var(--qmx-hairline-dark)}
.qmx-mobile-nav.open{display:block}
.qmx-mobile-nav a{display:block;padding:var(--qmx-space-15) 0;font-size:var(--qmx-text-13);color:var(--qmx-on-dark-1);border-top:1px solid var(--qmx-hairline-dark-soft)}
.qmx-mobile-nav a:first-child{border-top:0}

/* --------------------------------------------------------------------------
   layout/Section, SectionHeading and the fixed-column grids
   -------------------------------------------------------------------------- */
.qmx-section{padding:var(--qmx-section-pad-y) 0}
.qmx-section--white{background:var(--surface-card)}
.qmx-section--subtle{background:var(--surface-subtle);border-top:1px solid var(--qmx-border-top-subtle);border-bottom:1px solid var(--qmx-border-bottom-subtle)}
.qmx-section--paper{background:var(--surface-page)}
/* clears the release record straddling the hero edge */
.qmx-section--clears-record{padding-top:var(--qmx-hero-pad-top)}

.qmx-sectionheading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--qmx-space-20)}
.qmx-h2{font-size:var(--qmx-text-24);line-height:var(--qmx-leading-heading);letter-spacing:var(--qmx-tracking-h2);margin:var(--qmx-space-9) 0 0;font-weight:var(--qmx-weight-semibold)}

.qmx-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--qmx-grid-gap);margin-top:var(--qmx-space-24)}
.qmx-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--qmx-grid-gap);margin-top:var(--qmx-space-24)}
.qmx-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--qmx-grid-gap-wide)}
.qmx-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--qmx-grid-gap-tight);margin-top:var(--qmx-space-24)}
.qmx-tagcloud{display:flex;flex-wrap:wrap;gap:var(--qmx-space-9)}

/* --------------------------------------------------------------------------
   layout/PageHero, HomeHero, WaveBackdrop and the HeroScene canvas host
   -------------------------------------------------------------------------- */
.qmx-hero{background:var(--surface-inverse);color:var(--qmx-white);position:relative;overflow:hidden;padding-top:var(--qmx-hero-pad-top)}
.qmx-hero__bloom{position:absolute;inset:0;background:var(--qmx-hero-bloom);pointer-events:none}
.qmx-hero__inner{position:relative;z-index:1;display:grid;align-items:center}
.qmx-hero__copy{padding:54px 0}
.qmx-hero h1{font-size:var(--qmx-text-38);line-height:var(--qmx-leading-tight);letter-spacing:var(--qmx-tracking-h1);margin:var(--qmx-space-18) 0;font-weight:var(--qmx-weight-semibold);max-width:720px}
.qmx-hero p{font-size:var(--qmx-text-15);line-height:var(--qmx-leading-body);color:var(--text-on-dark-muted);max-width:620px;margin:0}
.qmx-hero__actions{display:flex;gap:var(--qmx-space-12);margin-top:25px;flex-wrap:wrap}
/* Page heroes reserve the right-hand 48% for the scene. */
.qmx-hero--page .qmx-hero__inner{min-height:365px;grid-template-columns:52% 48%}
/* The home hero is a fixed 415px band with the release record straddling it. */
.qmx-hero--home .qmx-hero__inner{height:415px;margin-bottom:var(--qmx-space-48)}
.qmx-hero--home .qmx-hero__copy{max-width:620px;padding:34px 0 28px}
.qmx-hero--home h1{font-size:var(--qmx-text-39)}
.qmx-hero--home h1 span{color:var(--accent-primary)}

/* Static still — the fallback the animated scene cross-fades out over. */
.qmx-scene{position:absolute;inset:0;overflow:hidden;isolation:isolate;z-index:0}
.qmx-scene img{width:100%;height:100%;object-fit:cover;object-position:center 45%;mix-blend-mode:screen;filter:var(--qmx-image-recolor);opacity:.94;transition:opacity var(--qmx-duration-slow) var(--qmx-ease);z-index:1;position:absolute;inset:0}
.qmx-scene.is-live img{opacity:0}
.qmx-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}

/* --------------------------------------------------------------------------
   content/ReleaseRecord
   The one element that deliberately breaks the grid: it straddles the hero
   edge, and the section beneath takes padding-top:100px to clear it.
   -------------------------------------------------------------------------- */
.qmx-record{position:relative;height:0}
.qmx-record__panel{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);z-index:5;width:min(var(--qmx-container),calc(100% - var(--qmx-container-gutter)));min-height:118px;background:rgba(38,21,10,.78);border:1px solid rgba(254,80,0,.52);border-radius:var(--qmx-radius-7);display:grid;grid-template-columns:1.4fr repeat(4,1fr);align-items:center;padding:var(--qmx-space-17) var(--qmx-space-24);box-shadow:var(--shadow-raised);color:var(--qmx-white)}
.qmx-record__feature{display:flex;align-items:center;gap:var(--qmx-space-15);padding-right:var(--qmx-space-24)}
.qmx-record__slot{width:52px;height:52px;border-radius:var(--qmx-radius-7);border:1px solid var(--qmx-orange-edge-strong);display:grid;place-items:center;color:var(--accent-signal);flex:none}
.qmx-record__kicker{display:block;font-size:var(--qmx-text-9-5);text-transform:uppercase;letter-spacing:var(--qmx-tracking-label);color:var(--qmx-on-dark-5);margin-bottom:var(--qmx-space-8)}
.qmx-record__figure{display:block;font-size:var(--qmx-text-18);font-weight:var(--qmx-weight-bold);color:var(--accent-signal);margin:var(--qmx-space-4) 0}
.qmx-record__note{color:var(--qmx-on-dark-3);font-size:var(--qmx-text-12)}
.qmx-record__cell{min-height:64px;border-left:1px solid var(--qmx-hairline-dark);padding:var(--qmx-space-4) var(--qmx-space-18);display:flex;flex-direction:column;justify-content:center}
.qmx-record__value{font-size:var(--qmx-text-13);font-weight:var(--qmx-weight-mid);color:var(--qmx-white)}

/* --------------------------------------------------------------------------
   content/FeatureCard and SolutionCard — flat, hairline, 7px, no shadow
   -------------------------------------------------------------------------- */
.qmx-card{background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-card);padding:var(--pad-card);min-height:190px}
.qmx-card--flush{min-height:0;padding:var(--qmx-space-22)}
.qmx-card--link{min-height:220px;display:flex;flex-direction:column}
.qmx-card__icon{width:42px;height:42px;color:var(--accent-primary);margin-bottom:var(--qmx-space-18)}
.qmx-card h3{font-size:var(--qmx-text-16);line-height:var(--qmx-leading-snug);margin:0 0 var(--qmx-space-10);font-weight:var(--qmx-weight-semibold)}
.qmx-card p{font-size:var(--qmx-text-13);line-height:var(--qmx-leading-copy);color:var(--text-muted);margin:0}
.qmx-card__foot{margin-top:auto;padding-top:var(--qmx-space-22)}

/* --------------------------------------------------------------------------
   content/InfoPanel — light by default, navy under .qmx-panel--emphasis
   -------------------------------------------------------------------------- */
.qmx-panel{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-panel);padding:var(--pad-panel)}
.qmx-panel--emphasis{background:var(--qmx-grad-emphasis);border-color:var(--qmx-umber);color:var(--qmx-white)}
.qmx-panel h2{font-size:var(--qmx-text-23);line-height:var(--qmx-leading-heading);letter-spacing:var(--qmx-tracking-h2);margin:var(--qmx-space-10) 0 16px;font-weight:var(--qmx-weight-semibold)}
.qmx-panel h2:first-child{margin-top:0}
.qmx-panel__body{font-size:var(--qmx-text-13-5);color:var(--text-muted);line-height:var(--qmx-leading-relaxed);margin:0}
.qmx-panel--emphasis .qmx-panel__body{color:var(--qmx-on-dark-2)}

/* --------------------------------------------------------------------------
   content/NumberList, CleanList, DefinitionList
   -------------------------------------------------------------------------- */
.qmx-numberlist{list-style:none;margin:var(--qmx-space-22) 0 0;padding:0}
.qmx-numberlist li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:var(--qmx-space-15) 0;border-top:1px solid var(--border-row)}
.qmx-numberlist b{font-size:var(--qmx-text-13)}
.qmx-numberlist span{font-size:var(--qmx-text-13);color:var(--text-muted)}

.qmx-cleanlist{list-style:none;margin:var(--qmx-space-18) 0 0;padding:0}
.qmx-cleanlist li{font-size:var(--qmx-text-13);color:var(--text-muted);padding:var(--qmx-space-10) 0 var(--qmx-space-10) var(--qmx-space-18);border-top:1px solid var(--border-row);position:relative}
.qmx-cleanlist li::before{content:"";position:absolute;left:0;top:17px;width:6px;height:6px;border-radius:var(--qmx-radius-pill);background:var(--accent-primary)}
.qmx-cleanlist--on-dark li{color:var(--qmx-on-dark-2);border-top-color:var(--qmx-hairline-dark)}

.qmx-deflist{display:grid;gap:var(--qmx-space-10);margin-top:var(--qmx-space-20)}
.qmx-deflist div{border:1px solid var(--border-default);border-radius:var(--qmx-radius-6);padding:var(--qmx-space-13)}
.qmx-deflist b{display:block;font-size:var(--qmx-text-12-5);margin-bottom:var(--qmx-space-4)}
.qmx-deflist span{font-size:var(--qmx-text-12);color:var(--text-muted)}

/* --------------------------------------------------------------------------
   content/StepGrid — structural numbers 01..05, the only figures on the site
   -------------------------------------------------------------------------- */
.qmx-step{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-card);padding:var(--qmx-space-22) var(--qmx-space-18);min-height:150px}
.qmx-step b{font-size:var(--qmx-text-11);color:var(--accent-primary);font-weight:var(--qmx-weight-bold)}
.qmx-step h3{font-size:var(--qmx-text-15);margin:var(--qmx-space-12) 0 var(--qmx-space-8);font-weight:var(--qmx-weight-semibold)}
.qmx-step p{font-size:var(--qmx-text-12);color:var(--text-muted);margin:0}
.qmx-step-note{font-size:var(--qmx-text-11-5);color:var(--text-muted);margin:var(--qmx-space-17) 0 0}

/* --------------------------------------------------------------------------
   content/ScopeTable
   -------------------------------------------------------------------------- */
.qmx-scope{margin-top:var(--qmx-space-22);border:1px solid var(--border-default);border-radius:var(--radius-card);overflow:hidden}
.qmx-scope__head,.qmx-scope__row{display:grid;grid-template-columns:1.35fr .55fr 1.4fr;gap:var(--qmx-space-20);align-items:center}
.qmx-scope__head{background:var(--qmx-tint-warm);padding:14px var(--qmx-space-20);font-size:var(--qmx-text-10);text-transform:uppercase;letter-spacing:var(--qmx-tracking-label);color:var(--qmx-ink-tablehead)}
.qmx-scope__row{padding:var(--qmx-space-17) var(--qmx-space-20);border-top:1px solid var(--qmx-border-row)}
.qmx-scope__row strong{font-size:var(--qmx-text-13-5)}
.qmx-scope__row p{font-size:var(--qmx-text-12-5);color:var(--text-muted);margin:0}

/* --------------------------------------------------------------------------
   content/BoundaryNote — the only square-cornered container in the system
   -------------------------------------------------------------------------- */
.qmx-boundary{margin-top:var(--qmx-space-24);padding:16px;background:var(--qmx-tint-note);border-left:3px solid var(--accent-primary)}
.qmx-boundary strong{font-size:var(--qmx-text-12)}
.qmx-boundary p{font-size:var(--qmx-text-12);color:var(--text-muted);margin:0}

/* --------------------------------------------------------------------------
   content/TrustStrip
   -------------------------------------------------------------------------- */
.qmx-trust{background:var(--qmx-grad-trust);color:var(--qmx-white);padding:var(--qmx-space-32) 0}
.qmx-trust__inner{display:grid;grid-template-columns:repeat(3,1fr)}
.qmx-trust article{display:grid;grid-template-columns:52px 1fr;gap:var(--qmx-space-18);padding:0 var(--qmx-space-42);border-left:1px solid var(--qmx-hairline-dark-strong)}
.qmx-trust article:first-child{padding:0 var(--qmx-space-42) 0 0;border-left:0}
.qmx-trust__icon{width:52px;height:52px;border:1px solid var(--qmx-orange-edge-strong);box-shadow:var(--qmx-glow-orange);border-radius:var(--qmx-radius-pill);display:grid;place-items:center;color:var(--qmx-amber-bright)}
.qmx-trust__label{font-size:var(--qmx-text-9-5);text-transform:uppercase;letter-spacing:var(--qmx-tracking-label-mid)}
.qmx-trust p{font-size:var(--qmx-text-12);line-height:1.48;color:var(--qmx-on-dark-3);margin:var(--qmx-space-8) 0 var(--qmx-space-9)}

/* --------------------------------------------------------------------------
   promo/CtaPanel — the tick is the check character, not an icon
   -------------------------------------------------------------------------- */
.qmx-cta{background:var(--surface-card);padding:0 0 var(--qmx-space-42)}
.qmx-cta__panel{min-height:118px;background:var(--qmx-grad-cta);border:1px solid var(--qmx-orange-edge);border-radius:var(--qmx-radius-6);padding:var(--qmx-space-26) var(--qmx-space-38);display:grid;grid-template-columns:1.2fr 1fr auto;gap:var(--qmx-space-28);align-items:center;color:var(--qmx-white);position:relative;overflow:hidden}
.qmx-cta__panel > .qmx-scene{inset:0 0 0 auto;width:38%}
.qmx-cta__panel > .qmx-scene img{opacity:.23}
.qmx-cta__panel > .qmx-scene.is-live img{opacity:0}
.qmx-cta__copy,.qmx-cta__checks,.qmx-cta__action{position:relative;z-index:1}
.qmx-cta__copy h2{font-size:var(--qmx-text-22);line-height:var(--qmx-leading-snug);margin:0 0 7px;font-weight:var(--qmx-weight-medium)}
.qmx-cta__copy p{font-size:var(--qmx-text-12);color:var(--qmx-on-dark-4);margin:0}
.qmx-cta__checks{display:grid;gap:var(--qmx-space-8);font-size:var(--qmx-text-11)}
.qmx-cta__checks span{display:flex;align-items:center;gap:var(--qmx-space-8)}
.qmx-cta__checks i{display:grid;place-items:center;width:16px;height:16px;border:1px solid #FF7A2E;border-radius:var(--qmx-radius-pill);color:#FF7A2E;font-size:var(--qmx-text-10);font-style:normal;flex:none}

/* --------------------------------------------------------------------------
   promo/QuStreamLockup — the partner mark stays on its own near-black field
   -------------------------------------------------------------------------- */
.qmx-partner{background:var(--surface-card);padding:var(--qmx-space-56) 0}
.qmx-partner__inner{display:grid;grid-template-columns:55% 45%;gap:var(--qmx-space-58);align-items:center}
.qmx-partner__lockups{display:flex;align-items:center;gap:var(--qmx-space-24);margin-top:var(--qmx-space-24)}
.qmx-partner__lockups > img{height:33px;width:auto}
.qmx-partner__rule{height:54px;width:1px;background:var(--qmx-divider-strong)}
.qmx-qustream{background:#060606;border-radius:var(--radius-button);padding:11px var(--qmx-space-18);display:inline-flex;align-items:center;width:max-content}
.qmx-qustream img{height:42px;width:auto}
.qmx-partner h3{font-size:var(--qmx-text-19);line-height:1.35;margin:0 0 var(--qmx-space-12);font-weight:var(--qmx-weight-semibold)}
.qmx-partner__body{font-size:var(--qmx-text-13);color:var(--text-muted);max-width:500px;margin:0 0 16px}

/* --------------------------------------------------------------------------
   layout/SiteFooter
   -------------------------------------------------------------------------- */
.qmx-footer{background:var(--qmx-grad-footer);color:var(--qmx-white)}
.qmx-footer__cols{display:grid;grid-template-columns:1.35fr repeat(4,.65fr);gap:var(--qmx-space-42);padding:var(--qmx-space-48) 0 var(--qmx-space-36)}
.qmx-footer__blurb{font-size:var(--qmx-text-11-5);color:var(--qmx-on-dark-5);max-width:260px;line-height:var(--qmx-leading-body);margin:var(--qmx-space-17) 0}
.qmx-footer__social{display:flex;gap:var(--qmx-space-9)}
.qmx-footer__social span{width:25px;height:25px;border:1px solid rgba(255,230,209,.24);border-radius:var(--qmx-radius-pill);display:grid;place-items:center;color:var(--qmx-orange-social);font-size:var(--qmx-text-10)}
.qmx-footer__col{display:flex;flex-direction:column;gap:11px}
.qmx-footer__col h4{font-size:var(--qmx-text-9-5);text-transform:uppercase;letter-spacing:var(--qmx-tracking-label-wide);margin:0 0 var(--qmx-space-5);color:var(--qmx-on-dark-3)}
.qmx-footer__col a{font-size:var(--qmx-text-11-5);color:var(--qmx-on-dark-5);text-decoration:none}
.qmx-footer__legal{border-top:1px solid var(--qmx-hairline-dark-soft);padding:var(--qmx-space-18) 0 var(--qmx-space-24);display:flex;justify-content:space-between;color:var(--qmx-on-dark-6);font-size:var(--qmx-text-10-5)}
.qmx-footer__legal a{color:inherit;text-decoration:none}
.qmx-footer__legal div{display:flex;gap:var(--qmx-space-26)}

/* --------------------------------------------------------------------------
   promo/ComingSoonDialog — unbuilt CTAs open this rather than a 404
   -------------------------------------------------------------------------- */
.qmx-dialog{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:var(--qmx-space-18);background:rgba(12,7,3,.78);z-index:300}
.qmx-dialog.is-open{display:flex}
.qmx-dialog__card{position:relative;width:min(92vw,360px);padding:var(--qmx-space-28) var(--qmx-space-28) var(--qmx-space-24);border-radius:var(--radius-dialog);background:var(--qmx-dialog);border:1px solid rgba(254,80,0,.3);box-shadow:var(--shadow-dialog);text-align:center;color:var(--qmx-white)}
.qmx-dialog__close{position:absolute;right:16px;top:16px;width:34px;height:34px;border:1px solid rgba(255,255,255,.12);border-radius:var(--qmx-radius-pill);background:rgba(255,255,255,.06);color:var(--qmx-white);font-size:20px;line-height:1;cursor:pointer}
.qmx-dialog__card h2{margin:0 0 var(--qmx-space-10);font-size:var(--qmx-text-22);line-height:1.15;font-weight:var(--qmx-weight-semibold)}
.qmx-dialog__card p{margin:0 0 var(--qmx-space-22);color:var(--qmx-on-dark-2);font-size:var(--qmx-text-14);line-height:var(--qmx-leading-relaxed)}

/* --------------------------------------------------------------------------
   Responsive — the three breakpoints the system defines: 1120 / 860 / 600
   -------------------------------------------------------------------------- */
@media(max-width:1120px){
  .qmx-grid-4{grid-template-columns:repeat(2,1fr)}
  .qmx-grid-5{grid-template-columns:repeat(3,1fr)}
  .qmx-record__panel{position:static;transform:none;grid-template-columns:1fr 1fr;gap:var(--qmx-space-18)}
  .qmx-record{height:auto;padding:0 0 var(--qmx-space-24);background:var(--surface-inverse)}
  .qmx-record__panel{margin:0 auto}
  .qmx-record__cell:nth-child(2){border-left:0}
  .qmx-section--clears-record{padding-top:var(--qmx-section-pad-y)}
  .qmx-header__nav{gap:var(--qmx-space-18)}
  .qmx-partner__inner{gap:var(--qmx-space-36)}
}
@media(max-width:860px){
  .qmx-header__nav{display:none}
  .qmx-header__toggle{display:flex}
  .qmx-header__inner{gap:var(--qmx-space-18);justify-content:space-between}
  .qmx-header__logo{width:auto}
  .qmx-header .qmx-logo{--logo-h:24px}
  .qmx-grid-2,.qmx-grid-3,.qmx-grid-5,.qmx-trust__inner,.qmx-partner__inner{grid-template-columns:1fr}
  .qmx-hero--page .qmx-hero__inner{grid-template-columns:1fr}
  .qmx-hero--home .qmx-hero__inner{height:auto}
  .qmx-trust article,.qmx-trust article:first-child{padding:var(--qmx-space-22) 0;border-left:0;border-top:1px solid var(--qmx-hairline-dark-strong)}
  .qmx-trust article:first-child{border-top:0}
  .qmx-cta__panel{grid-template-columns:1fr}
  .qmx-footer__cols{grid-template-columns:1fr 1fr;gap:var(--qmx-space-28)}
  .qmx-scope__head{display:none}
  .qmx-scope__row{grid-template-columns:1fr;gap:var(--qmx-space-10)}
  .qmx-sectionheading{flex-direction:column;align-items:flex-start}
}
@media(max-width:600px){
  .qmx-section{padding:var(--qmx-section-pad-y-sm) 0}
  .qmx-header{height:var(--qmx-header-height-sm)}
  .qmx-mobile-nav{top:var(--qmx-header-height-sm)}
  .qmx-hero h1,.qmx-hero--home h1{font-size:var(--qmx-text-31)}
  .qmx-grid-4{grid-template-columns:1fr}
  .qmx-record__panel{grid-template-columns:1fr}
  .qmx-record__cell{border-left:0;border-top:1px solid var(--qmx-hairline-dark)}
  .qmx-numberlist li{grid-template-columns:1fr;gap:var(--qmx-space-4)}
  .qmx-footer__cols{grid-template-columns:1fr}
  .qmx-footer__legal{flex-direction:column;gap:var(--qmx-space-10)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .qmx-btn:hover{transform:none}
}

/* --------------------------------------------------------------------------
   Page-level compositions used by the screens
   (the asymmetric solution row, the artefact chip grid, the contact line)
   -------------------------------------------------------------------------- */
.qmx-split{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--qmx-space-60);align-items:center}
.qmx-lede{font-size:var(--qmx-text-14);color:var(--text-muted);max-width:640px}
.qmx-chipgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--qmx-space-8);margin-top:var(--qmx-space-18)}
.qmx-contact{font-size:var(--qmx-text-13-5);margin:0}

@media(max-width:860px){
  .qmx-split{grid-template-columns:1fr;gap:var(--qmx-space-28)}
}
@media(max-width:600px){
  .qmx-chipgrid{grid-template-columns:1fr}
}