/* QxSuite — the whole look of the platform site.
 *
 * SIBLING FILE: sites/qxstrategy/v5/assets/css/qxstrategy.css. The two sites are the same skeleton with a
 * different focus ("Different tools. A stronger ecosystem." is on the brand sheet), so every rule below the
 * token block is shared word for word and a change here is a change there. Only :root differs: blue here,
 * green there.
 *
 * EVERY COLOUR IS HERE. tools/build-qx-platform.mjs writes structure and words only — the palette ratchet counts
 * hex under tools/ — so the brand is declared once, in this file, and referred to by token. That includes the
 * gradient stops of the mark: assets/svg/brand/mark.svg names no colour and takes its stops from here.
 *
 * The brand, from mood-board/qx (2026-09-22): near-black ground, a two-tone gradient mark, a light sans wordmark
 * with the product word in regular weight, a spaced-out strapline in the accent, and three words under a rule.
 * PHONE FIRST — the mock-up is a phone as well as a laptop, so every rule starts at a phone and widens.
 */

:root {
  --qxp-bg: #070a10;            /* the ground */
  --qxp-bg-2: #0b1018;          /* panels and the bar */
  --qxp-bg-3: #111826;          /* a panel that has to lift off the one behind it */
  --qxp-ink: #eef1f8;           /* headings and the wordmark */
  --qxp-body: #a8b2c6;          /* running text */
  --qxp-muted: #6d7891;         /* captions, notes, the small print */
  --qxp-hi: #6f9dff;            /* the accent, light end: the strapline and the mark's first stop */
  --qxp-mid: #2f62e0;           /* the accent, middle: buttons and rules */
  --qxp-low: #16307f;           /* the accent, dark end: the mark's tail */
  --qxp-down: #e0654f;          /* the other direction — a step that did not pass, and nothing else */
  --qxp-line: rgba(238, 241, 248, .10);
  --qxp-line-2: rgba(238, 241, 248, .18);
  --qxp-glow: rgba(111, 157, 255, .16);
  --qxp-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .45);
  --qxp-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --qxp-wide: 1140px;
}

/* .qxp-wrap is width:100% with side padding; without border-box the padding is added to the width and the whole
 * page scrolls sideways on a phone, which is where this design starts. */
*, *::before, *::after { box-sizing: border-box; }

body {
  /* The engine's blocks.css sets body { padding: 2rem }, which frames a dark site in a light border. The bar
   * runs to the edge of the glass here, as it does in the drawing. */
  margin: 0;
  padding: 0;
  background: var(--qxp-bg);
  color: var(--qxp-body);
  font: 16px/1.6 var(--qxp-ui);
  -webkit-font-smoothing: antialiased;
}

.qxp-wrap { width: 100%; max-width: var(--qxp-wide); margin: 0 auto; padding: 0 18px; }

a { color: var(--qxp-hi); }
:focus-visible { outline: 2px solid var(--qxp-hi); outline-offset: 3px; border-radius: 4px; }

/* ── the mark ───────────────────────────────────────────────────────────────
 * mark.svg carries no colour: its three gradient stops are classed and coloured here, which is how one drawing
 * is green on this site and blue on QxSuite. */
.qxp-stop-a { stop-color: var(--qxp-hi); }
.qxp-stop-b { stop-color: var(--qxp-mid); }
.qxp-stop-c { stop-color: var(--qxp-low); }
.qxp-mark { display: block; width: 100%; height: 100%; }

/* EVERY SVG HOLDER IS A BLOCK, in one rule so a new one cannot slip through.
 * The builder wraps each drawing in a <span>, and a span is inline: width and height do nothing to it, so the
 * svg inside at width:100% resolves against the nearest block instead. That put a 108px mark at 900px and a
 * 24px module icon at card width. Both looked fine in the bar and the sister card — a flex or grid item is
 * blockified for free — which is exactly how the bug hid on two pages out of five. */
.qxp-brand-mark, .qxp-hero-mark, .qxp-sister-mark, .qxp-foot-mark, .qxp-card-icon { display: block; }

/* ── the bar ────────────────────────────────────────────────────────────────*/
.qxp-top { position: sticky; top: 0; z-index: 20; background: var(--qxp-bg-2);
  border-bottom: 1px solid var(--qxp-line); }
.qxp-top-inner { display: flex; align-items: center; gap: 14px; max-width: var(--qxp-wide); margin: 0 auto;
  padding: 11px 18px; }
.qxp-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--qxp-ink); }
.qxp-brand-mark { width: 26px; height: 26px; flex: none; }
.qxp-brand-word { font-size: 18px; letter-spacing: -.01em; white-space: nowrap; }
.qxp-brand-word b { font-weight: 700; }
.qxp-brand-word span { font-weight: 300; }
.qxp-nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.qxp-nav a { display: inline-block; padding: 7px 10px; border-radius: 7px; font-size: 14px;
  color: var(--qxp-body); text-decoration: none; }
.qxp-nav a:hover, .qxp-nav a:focus-visible { color: var(--qxp-ink); background: var(--qxp-bg-3); }

/* ── the hero, as the brand sheet lays it out ───────────────────────────────
 * mark, name, strapline in spaced accent caps, a short rule, then the three words. */
.qxp-hero { padding: 46px 0 34px; background:
  radial-gradient(70% 60% at 50% 0%, var(--qxp-glow), transparent 70%); }
.qxp-hero-mark { width: 86px; height: 86px; margin: 0 auto 18px; }
.qxp-hero-head { margin: 0; text-align: center; color: var(--qxp-ink); font-size: 40px; line-height: 1.04;
  letter-spacing: -.02em; font-weight: 300; }
.qxp-hero-head b { font-weight: 700; }
.qxp-strap { margin: 12px 0 0; text-align: center; color: var(--qxp-hi); font-size: 12px; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; }
.qxp-hero-rule { width: 64px; height: 1px; margin: 22px auto; background: var(--qxp-line-2); }
.qxp-values { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 18px; color: var(--qxp-muted); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.qxp-values li:not(:last-child)::after { content: "/"; margin-left: 18px; color: var(--qxp-line-2); }
.qxp-hero-lede { margin: 26px auto 0; max-width: 640px; text-align: center; font-size: 17px;
  color: var(--qxp-body); }
.qxp-hero-acts { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.qxp-btn { display: inline-block; padding: 11px 18px; border-radius: 9px; font-size: 14px; font-weight: 600;
  text-decoration: none; background: var(--qxp-mid); color: var(--qxp-bg); border: 1px solid transparent; }
.qxp-btn:hover, .qxp-btn:focus-visible { background: var(--qxp-hi); }
.qxp-btn-quiet { background: transparent; color: var(--qxp-ink); border-color: var(--qxp-line-2); }
.qxp-btn-quiet:hover, .qxp-btn-quiet:focus-visible { background: var(--qxp-bg-3); color: var(--qxp-ink); }

/* ── a section of the page ──────────────────────────────────────────────────*/
.qxp-section { padding: 42px 0; border-top: 1px solid var(--qxp-line); }
.qxp-section-quiet { background: var(--qxp-bg-2); }
.qxp-eyebrow { margin: 0 0 10px; color: var(--qxp-hi); font-size: 11px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; }
.qxp-head { margin: 0; color: var(--qxp-ink); font-size: 27px; line-height: 1.2; letter-spacing: -.015em;
  font-weight: 400; text-wrap: balance; }
.qxp-head-rule { width: 46px; height: 2px; margin: 14px 0 0;
  background: linear-gradient(90deg, var(--qxp-hi), var(--qxp-low)); }
.qxp-lede { margin: 16px 0 0; max-width: 62ch; font-size: 17px; }
.qxp-prose { max-width: 62ch; }
.qxp-prose p { margin: 0 0 14px; }
.qxp-prose p:last-child { margin-bottom: 0; }

/* ── the modules, one panel each ────────────────────────────────────────────*/
.qxp-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: 1fr; }
.qxp-card { background: var(--qxp-bg-2); border: 1px solid var(--qxp-line); border-radius: 12px; padding: 16px; }
.qxp-card-icon { width: 24px; height: 24px; color: var(--qxp-hi); }
.qxp-card-icon svg { width: 100%; height: 100%; display: block; }
.qxp-card-name { margin: 12px 0 6px; color: var(--qxp-ink); font-size: 16px; font-weight: 600; }
.qxp-card-text { margin: 0; font-size: 14.5px; color: var(--qxp-body); }

/* ── the drawn workspace, in the devices the mock-up shows it in ────────────
 * The second board in mood-board/qx presents each platform twice: a laptop labelled Desktop and a phone
 * labelled Mobile, side by side. That is the presentation here — the frames are CSS, the screens are the
 * drawings in assets/svg/scene, so nothing is a screenshot and nothing carries a figure. */
.qxp-devices { margin: 26px 0 0; display: grid; gap: 26px; align-items: end; }
.qxp-device-label { margin: 0 0 10px; color: var(--qxp-muted); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; }

/* The laptop: a thin bezel round the screen, then the lid line and the base lip under it. */
.qxp-laptop { padding: 0 14px; }
.qxp-laptop-lid { background: var(--qxp-bg-3); border: 1px solid var(--qxp-line-2); border-radius: 12px 12px 4px 4px;
  padding: 10px 10px 12px; box-shadow: var(--qxp-shadow); }
.qxp-laptop-base { height: 10px; width: calc(100% + 28px); margin-left: -14px; border-radius: 0 0 10px 10px;
  background: var(--qxp-bg-3); border: 1px solid var(--qxp-line-2); border-top: 0; }
.qxp-laptop-base::after { content: ""; display: block; width: 16%; height: 3px; margin: 0 auto;
  border-radius: 0 0 3px 3px; background: var(--qxp-line-2); }

/* The phone: a thicker bezel, a deeper radius and the notch along the top. */
.qxp-phone-body { max-width: 240px; margin: 0 auto; background: var(--qxp-bg-3);
  border: 1px solid var(--qxp-line-2); border-radius: 26px; padding: 9px; box-shadow: var(--qxp-shadow);
  position: relative; }
.qxp-phone-body::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 38%; height: 13px; border-radius: 0 0 9px 9px; background: var(--qxp-bg); z-index: 1; }

.qxp-scene { display: block; width: 100%; height: auto; border-radius: 6px; }
.qxp-phone-body .qxp-scene { border-radius: 18px; }
.qxp-frame-cap { margin: 16px 2px 2px; color: var(--qxp-muted); font-size: 12.5px; }
.qxp-scene-win { fill: var(--qxp-bg-3); stroke: var(--qxp-line-2); }
.qxp-scene-line { stroke: var(--qxp-line); fill: none; }
.qxp-scene-grid { stroke: var(--qxp-line); fill: none; stroke-dasharray: 3 6; }
.qxp-scene-chip { fill: var(--qxp-line-2); }
.qxp-scene-chip2 { fill: var(--qxp-line); }
.qxp-scene-rail { fill: var(--qxp-line); }
.qxp-scene-on { fill: var(--qxp-mid); }
.qxp-scene-row { stroke: var(--qxp-line-2); fill: none; }
.qxp-scene-row2 { stroke: var(--qxp-line); fill: none; }
.qxp-up { fill: var(--qxp-hi); }
.qxp-up-line { stroke: var(--qxp-hi); fill: none; }
.qxp-down { fill: var(--qxp-down); }
.qxp-down-line { stroke: var(--qxp-down); fill: none; }
.qxp-node { fill: var(--qxp-bg-2); stroke: var(--qxp-line-2); }
.qxp-node-on { stroke: var(--qxp-mid); }
.qxp-node-dot { fill: var(--qxp-mid); }
.qxp-tile { fill: var(--qxp-bg-2); stroke: var(--qxp-line); }
.qxp-flow { stroke: var(--qxp-line-2); fill: none; }
.qxp-flow-head { fill: var(--qxp-line-2); stroke: none; }

/* ── the honest note ────────────────────────────────────────────────────────
 * Every page carries one. The platform is being built; the site says so rather than implying otherwise. */
.qxp-note { margin: 26px 0 0; border-left: 2px solid var(--qxp-mid); padding: 2px 0 2px 14px; }
.qxp-note-head { display: block; color: var(--qxp-ink); font-size: 14px; font-weight: 600; }
.qxp-note-text { margin: 6px 0 0; font-size: 14.5px; color: var(--qxp-muted); }

/* ── the other platform ─────────────────────────────────────────────────────*/
.qxp-sister { display: block; margin: 24px 0 0; text-decoration: none; background: var(--qxp-bg-3);
  border: 1px solid var(--qxp-line); border-radius: 12px; padding: 18px; }
.qxp-sister:hover, .qxp-sister:focus-visible { border-color: var(--qxp-line-2); }
.qxp-sister-mark { width: 34px; height: 34px; }
/* The sister card points at the OTHER platform, whose accent is not this one's. Painting its mark in this
 * site's green (or blue) would be recolouring somebody else's brand, so it takes the monochrome lockup the
 * brand sheet provides. */
.qxp-sister-mark .qxp-stop-a, .qxp-sister-mark .qxp-stop-b { stop-color: var(--qxp-ink); }
.qxp-sister-mark .qxp-stop-c { stop-color: var(--qxp-muted); }
.qxp-sister-name { margin: 12px 0 4px; color: var(--qxp-ink); font-size: 18px; font-weight: 600; }
.qxp-sister-text { margin: 0; color: var(--qxp-body); font-size: 14.5px; }
.qxp-sister-go { display: inline-block; margin: 10px 0 0; color: var(--qxp-hi); font-size: 14px;
  font-weight: 600; }

/* ── steps, for the approach page ───────────────────────────────────────────*/
.qxp-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.qxp-step { background: var(--qxp-bg-2); border: 1px solid var(--qxp-line); border-radius: 12px; padding: 18px; }
.qxp-step-n { color: var(--qxp-hi); font-size: 12px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; }
.qxp-step-name { margin: 8px 0 8px; color: var(--qxp-ink); font-size: 20px; font-weight: 500; }
.qxp-step-text { margin: 0; font-size: 15.5px; }

/* ── the footer ─────────────────────────────────────────────────────────────*/
.qxp-foot { border-top: 1px solid var(--qxp-line); background: var(--qxp-bg-2); padding: 30px 0 38px;
  margin-top: 8px; }
.qxp-foot-top { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.qxp-foot-mark { width: 22px; height: 22px; flex: none; }
.qxp-foot-word { color: var(--qxp-ink); font-size: 15px; }
.qxp-foot-word b { font-weight: 700; }
.qxp-foot-word span { font-weight: 300; }
.qxp-foot-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.qxp-foot-links a { padding: 6px 8px; border-radius: 6px; color: var(--qxp-body); font-size: 14px;
  text-decoration: none; }
.qxp-foot-links a:hover, .qxp-foot-links a:focus-visible { color: var(--qxp-ink); background: var(--qxp-bg-3); }
.qxp-foot-rule { height: 1px; margin: 22px 0; background: var(--qxp-line); }
.qxp-foot-small { margin: 0; color: var(--qxp-muted); font-size: 13px; max-width: 72ch; }
.qxp-foot-small + .qxp-foot-small { margin-top: 10px; }
.qxp-umbrella { margin: 14px 0 0; color: var(--qxp-muted); font-size: 12px; }
/* The logotype keeps its own casing; only the line after it is set in spaced caps, as on the brand sheet.
 * text-transform over the whole string turned "Qx" into "QX", which is somebody else's brand. */
.qxp-umbrella b { color: var(--qxp-body); font-weight: 700; }
.qxp-umbrella span { margin-left: 10px; letter-spacing: .2em; text-transform: uppercase; }

/* ── wider than a phone ─────────────────────────────────────────────────────*/
@media (min-width: 620px) {
  .qxp-hero { padding: 64px 0 46px; }
  .qxp-hero-mark { width: 124px; height: 124px; }
  .qxp-hero-head { font-size: 56px; }
  .qxp-head { font-size: 32px; }
  .qxp-grid { grid-template-columns: 1fr 1fr; }
  .qxp-steps { grid-template-columns: repeat(3, 1fr); }
  .qxp-sister { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 22px; }
  .qxp-sister-name { margin-top: 0; }
}
@media (min-width: 900px) {
  .qxp-section { padding: 58px 0; }
  .qxp-hero-head { font-size: 66px; }
  .qxp-grid { grid-template-columns: repeat(4, 1fr); }
  .qxp-hero-mark { width: 140px; height: 140px; }
  .qxp-devices { grid-template-columns: minmax(0, 1fr) 260px; gap: 34px; }
  .qxp-frame { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}