/* ==========================================================================
   MarketAlong Data — site components

   Direction (§64): premium global B2B technology. Strong typography, clean
   data UI, restrained motion, high trust, generous whitespace.

   Tokens come from theme.json. Nothing here invents a colour.
   ========================================================================== */

:root {
  --brand: var(--wp--preset--color--brand, #0A6BE8);   /* 4.93:1 on white (was #0C78FC, 4.11:1) */
  --brand-deep: var(--wp--preset--color--brand-deep, #0B5FD6);
  --brand-bright: var(--wp--preset--color--brand-bright, #0C90FC);
  --brand-light: var(--wp--preset--color--brand-light, #B4D8FC);
  --brand-wash: var(--wp--preset--color--brand-wash, #EDF5FF);
  --paper: var(--wp--preset--color--paper, #FFFFFF);
  --paper-2: var(--wp--preset--color--paper-2, #F7FAFF);
  --text: var(--wp--preset--color--text, #12283F);
  --muted: var(--wp--preset--color--muted, rgba(18,40,63,0.66));
  --faint: var(--wp--preset--color--faint, rgba(18,40,63,0.42));
  --line: var(--wp--preset--color--line, rgba(12,120,252,0.16));
  --verified: var(--wp--preset--color--verified, #0E7A5F);
  --caution: var(--wp--preset--color--caution, #A35F0C); /* 5.09:1 on white (was #B4690E, 4.23:1) */
  --conflict: var(--wp--preset--color--conflict, #B3261E);
  --brand-grad: linear-gradient(135deg, #0C90FC 0%, #0B5FD6 100%);

  /* Tight, layered shadows — measured from the reference, which uses short
     offsets with negative spread rather than large soft blooms. Reads as
     precision instrument rather than marketing page. */
  --sh-1: 0 1px 2px -1px rgba(18,40,63,0.10), 0 1px 1px rgba(18,40,63,0.04);
  --sh-2: 0 2px 4px -2px rgba(18,40,63,0.12), 0 4px 12px -4px rgba(18,40,63,0.08);
  --sh-3: 0 4px 8px -4px rgba(12,120,252,0.18), 0 12px 28px -8px rgba(12,120,252,0.14);

  --section: clamp(3.25rem, 5.5vw, 6rem);
  --gutter: var(--wp--preset--spacing--30, 1.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 150ms;
  --base: 300ms;
  --slow: 600ms;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.md-wrap {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Hero decoration bleeds ~300px below the hero (see .md-hero--split::after,
   inset bottom -300px). Absolutely-positioned pseudo-elements paint above later
   static content regardless of DOM order, so the veil clipped the first line of
   the next section. Give sections their own stacking context above it. */
.md-section { position: relative; z-index: 1; }

.md-section { padding-block: var(--section); }

/* ---------- Motion primitive ---------------------------------------------
   One reveal, used everywhere. A different animation per section reads as a
   demo, not a product. Scoped to .md-js so a script failure never leaves
   content permanently invisible.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .md-js .md-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  }
  .md-js .md-reveal.is-in { opacity: 1; transform: none; }
  .md-stagger > * { transition-delay: calc(var(--i, 0) * 60ms); }
}

@media (prefers-reduced-motion: reduce) {
  .md-reveal { opacity: 1; transform: none; }
}

/* ---------- Header -------------------------------------------------------- */

.md-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  padding: 1rem var(--gutter);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--base) var(--ease);
}

.md-header[data-scrolled='true'] { border-bottom-color: var(--line); }

.md-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-weight: 640;
  font-size: 1.0625rem;
  letter-spacing: -0.025em;
  color: var(--text);
  text-decoration: none;
}

.md-brand__sub { color: var(--faint); font-weight: 450; }

.md-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.md-nav::-webkit-scrollbar { display: none; }

.md-nav a {
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--fast) var(--ease);
}
.md-nav a:hover, .md-nav a:focus-visible { color: var(--text); }

/* ---------- Hero ---------------------------------------------------------- */

.md-hero { padding-block: clamp(3.5rem, 8vw, 7rem) var(--section); }

.md-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 550;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-wash);
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  margin: 0 0 1.5rem;
}

.md-hero__title {
  font-size: var(--wp--preset--font-size--display, clamp(2.75rem, 1rem + 5vw, 5rem));
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 620;
  margin: 0 0 1.25rem;
  max-width: 16ch;
  text-wrap: balance;
}

.md-hero__lede {
  font-size: var(--wp--preset--font-size--lg, 1.125rem);
  color: var(--muted);
  max-width: 56ch;
  margin: 0 0 2.25rem;
  line-height: 1.55;
}

.md-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }

.md-hero__note { font-size: 0.8125rem; color: var(--faint); }

/* ---------- Pipeline visual (§65) ---------------------------------------- */

.md-pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(122px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-top: clamp(3rem, 6vw, 5rem);
}

.md-stage {
  background: var(--paper);
  padding: 1.15rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 108px;
  position: relative;
  transition: background-color var(--base) var(--ease);
}
.md-stage:hover { background: var(--brand-wash); }

.md-stage__n {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 0.6875rem;
  color: var(--faint);
  letter-spacing: 0.04em;
}

.md-stage__label {
  font-size: 0.8125rem;
  font-weight: 550;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.md-stage__note { font-size: 0.6875rem; color: var(--muted); line-height: 1.35; }

/* The final stage loops back — that is the product's actual claim. */
.md-stage--loop { background: var(--brand-grad); color: #fff; }
.md-stage--loop .md-stage__n,
.md-stage--loop .md-stage__note { color: rgba(255,255,255,0.78); }

/* ---------- Generic section furniture ------------------------------------ */

.md-lede-h2 { max-width: 20ch; margin: 0 0 1rem; }
.md-lede-p { color: var(--muted); max-width: 62ch; margin: 0 0 2.25rem; font-size: 1.1875rem; }

.md-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}

.md-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: border-color var(--base) var(--ease), transform var(--base) var(--ease);
}
.md-card:hover { border-color: rgba(27, 77, 255, 0.35); }

.md-card__k {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}
.md-card h3 { margin: 0; font-size: 1.0625rem; letter-spacing: -0.015em; }
.md-card p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }

/* ---------- Evidence row — the trust device ------------------------------ */

.md-evidence {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  overflow: hidden;
}

.md-evidence__head,
.md-evidence__row {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr 0.9fr 0.7fr;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  align-items: center;
}

.md-evidence__head {
  background: rgba(11, 18, 21, 0.025);
  border-bottom: 1px solid var(--line);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 550;
}

.md-evidence__row { border-bottom: 1px solid var(--line); font-size: 0.875rem; }
.md-evidence__row:last-child { border-bottom: 0; }

.md-evidence__src {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 0.75rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.md-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
}
.md-tag--verified { background: rgba(14, 122, 95, 0.10); color: var(--verified); }
.md-tag--caution  { background: rgba(180, 105, 14, 0.10); color: var(--caution); }
.md-tag--conflict { background: rgba(179, 38, 30, 0.10); color: var(--conflict); }

@media (max-width: 720px) {
  .md-evidence__head { display: none; }
  .md-evidence__row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding-block: 1rem;
  }
}

/* ---------- Brand band ---------------------------------------------------
   Was a near-black panel. Replaced with the logo gradient: the page now has
   no dark surface anywhere, and the band carries brand identity instead of
   just contrast.
   ------------------------------------------------------------------------ */

.md-band {
  background: var(--brand-grad);
  color: #fff;
  border-radius: 8px;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
  overflow: hidden;
}

/* Soft light bloom, echoing the arrow in the logo mark. */
.md-band::after {
  content: '';
  position: absolute;
  inset: auto -10% -60% auto;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 70%);
  pointer-events: none;
}

.md-band > * { position: relative; z-index: 1; }
.md-band h2 { color: #fff; }
.md-band p { color: rgba(255,255,255,0.86); }

/* ---------- Honest limits block (§63) ------------------------------------ */

.md-limits { border-left: 2px solid var(--caution); padding-left: 1.25rem; }
.md-limits li { color: var(--muted); margin-bottom: 0.5rem; }

/* ---------- Footer -------------------------------------------------------- */

.md-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
  margin-top: var(--section);
}

.md-footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  margin-bottom: 3rem;
}

.md-footer h4 {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.9rem;
  font-weight: 600;
}

.md-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.md-footer a { font-size: 0.875rem; color: var(--muted); text-decoration: none; }
.md-footer a:hover { color: var(--text); }

.md-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--faint);
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
}

/* ---------- Accessibility ------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

.md-skip {
  position: absolute;
  left: 0;
  top: 0;
  clip-path: inset(50%);
  background: var(--brand);
  color: var(--paper);
  padding: 0.75rem 1rem;
  z-index: 200;
  border-radius: 0 0 6px 0;
}
.md-skip:focus { clip-path: none; }

@media (pointer: coarse) {
}

/* ---------- Forms --------------------------------------------------------- */

.md-form { display: grid; gap: 1rem; }

.md-field { display: grid; gap: 0.35rem; }

.md-field label {
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--text);
  letter-spacing: -0.005em;
}

.md-field input,
.md-field textarea,
.md-field select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--text);
  font: inherit;
  font-size: 1rem;          /* 16px min — stops iOS zooming the viewport */
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.md-field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }

.md-field input:hover, .md-field textarea:hover { border-color: rgba(11, 18, 21, 0.22); }

.md-field input:focus-visible,
.md-field textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-color: transparent;
  background: var(--paper);
}

.md-field input::placeholder, .md-field textarea::placeholder { color: var(--faint); }

.md-field[data-invalid='true'] input,
.md-field[data-invalid='true'] textarea { border-color: var(--conflict); }

.md-field__err { font-size: 0.75rem; color: var(--conflict); }

/* Two-column split collapses on narrow screens. */
@media (max-width: 900px) {
  .md-grid[style*="1.05fr"] { grid-template-columns: 1fr !important; }
}

/* ---------- Pricing ------------------------------------------------------- */

.md-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.75rem 0 0.25rem;
}
.md-price__n { font-size: 2rem; font-weight: 620; letter-spacing: -0.03em; }
.md-price__u { font-size: 0.8125rem; color: var(--faint); }

.md-card--feature { border-color: rgba(27, 77, 255, 0.35); box-shadow: 0 1px 3px rgba(27, 77, 255, 0.06); }

.md-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.55rem; }
.md-list li {
  font-size: 0.875rem;
  color: var(--muted);
  padding-left: 1.35rem;
  position: relative;
  line-height: 1.5;
}
.md-list li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.52em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--verified);
}
.md-list li[data-no]::before { background: var(--faint); }

/* ---------- Step list ----------------------------------------------------- */

.md-steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.md-step { background: var(--paper); padding: clamp(1.25rem, 2.5vw, 1.9rem); display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.md-step__n { font-family: var(--wp--preset--font-family--mono, monospace); font-size: 0.75rem; color: var(--brand); padding-top: 0.2rem; }
.md-step h3 { margin: 0 0 0.4rem; font-size: 1.0625rem; }
.md-step p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }

/* ---------- Brand mark ----------------------------------------------------
   The supplied logo is a square lockup: mark above wordmark. At nav height a
   square renders ~30px wide and the wordmark becomes unreadable, so the header
   uses the cropped mark beside real text, and the footer uses the full lockup
   where there is room for it.
   ------------------------------------------------------------------------ */

.md-brand { gap: 0.55rem; align-items: center; }

.md-brand__mark {
  height: 30px;
  width: auto;
  display: block;
}

.md-brand__word {
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.025em;
  color: var(--text);
  white-space: nowrap;
}

.md-brand__sub { color: var(--brand); font-weight: 600; }

.md-footer__brandline {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.75rem;
  color: var(--faint);
  font-size: 0.8125rem;
}

.md-footer__brandline img { height: 46px; width: auto; display: block; }

/* ---------- Step numbers -------------------------------------------------- */

.md-stepno {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand);
  padding-top: 0.15rem;
}

/* ---------- Surfaces now that nothing is dark ----------------------------- */

.md-card { background: var(--paper); box-shadow: var(--sh-1); }
.md-card:hover { border-color: var(--brand); box-shadow: var(--sh-3); transform: translateY(-3px); }

.md-stage { background: var(--paper); }
.md-stage:hover { background: var(--brand-wash); }

.md-pipeline { background: var(--line); box-shadow: var(--sh-1); }

.md-evidence { background: var(--paper); box-shadow: var(--sh-1); }
.md-evidence__head { background: var(--brand-wash); color: var(--brand-deep); }

.md-section:nth-of-type(even) { background: var(--paper-2); }

.md-steps { box-shadow: var(--sh-1); }
.md-step { background: var(--paper); }

.md-limits { border-left-color: var(--brand); }

/* ---------- Photography ---------------------------------------------------
   Explicit width/height on every img so the ratio is reserved before decode —
   an image-led hero is the easiest way to ship layout shift.
   ------------------------------------------------------------------------ */

.md-hero--split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

@media (min-width: 1000px) {
  .md-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
}

.md-hero__copy { min-width: 0; }
.md-hero--split .md-hero__title { max-width: 14ch; }

.md-hero__media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--brand-wash);
}

.md-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A faint brand tint ties third-party photography to the palette. */
.md-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(12,144,252,0.14) 0%, rgba(11,95,214,0.10) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.md-figure {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--brand-wash);
  position: relative;
}

.md-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.md-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(12,144,252,0.12) 0%, rgba(11,95,214,0.08) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

@media (max-width: 720px) { .md-figure { aspect-ratio: 16 / 10; } }

/* Cards lift, and their heading picks up brand colour — two cues, one gesture. */
.md-card:hover h3 { color: var(--brand-deep); }

/* Pipeline stages raise slightly and reveal a brand rule at the top edge. */
.md-stage { border-top: 2px solid transparent; }
.md-stage:hover { transform: translateY(-2px); border-top-color: var(--brand); }
.md-stage--loop:hover { transform: translateY(-2px); }

/* Evidence rows highlight on hover — signals the table is inspectable. */
.md-evidence__row:hover { background: var(--brand-wash); }

/* Steps reveal their number in brand colour and shift the content a touch. */
.md-step:hover { background: var(--brand-wash); }
.md-step:hover .md-step__n { color: var(--brand-deep); }

/* Photography lifts gently on hover, tint recedes — the image becomes clearer
   when attended to. */
.md-figure img,
.md-hero__media img { transition: transform var(--slow) var(--ease); }
.md-figure:hover img,
.md-hero__media:hover img { transform: scale(1.02); }
.md-figure::after,
.md-hero__media::after { transition: opacity var(--slow) var(--ease); }
.md-figure:hover::after,
.md-hero__media:hover::after { opacity: 0.55; }

/* Footer links slide a hair on hover — cheap, and makes a dense list feel alive. */
.md-footer a:hover { color: var(--brand); transform: translateX(2px); }

/* Nav underline grows from the left rather than fading in. */
.md-nav a:not(.md-btn) { position: relative; padding-block: 0.35rem; }
.md-nav a:not(.md-btn)::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--base) var(--ease);
}
.md-nav a:not(.md-btn):hover::after,
.md-nav a:not(.md-btn):focus-visible::after { transform: scaleX(1); }

/* Every hover effect above is suppressed for reduced-motion users; colour
   changes remain, because those carry meaning rather than decoration. */
@media (prefers-reduced-motion: reduce) {
  .md-card:hover,
  .md-stage:hover,
  .md-footer a:hover,
  .md-figure:hover img,
  .md-hero__media:hover img { transform: none; }
}

/* ==========================================================================
   Product UI visuals

   These replace stock photography in the hero and mid-page. For a data
   product the most persuasive image is the product: an evidence panel is a
   truer representation of what is being sold than a photograph of an office,
   and it reinforces the "every field carries its source" argument rather than
   sitting decoratively beside it.

   Built in markup rather than exported as images so they stay crisp at any
   density, remain readable to screen readers, and cost no image bytes.
   ========================================================================== */

.md-ui {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: var(--sh-2);
  overflow: hidden;
  font-size: 0.8125rem;
}

/* Window chrome — enough to read as an application, not a screenshot mock. */
.md-ui__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}

.md-ui__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.md-ui__dot:first-child { background: var(--brand-light); }

.md-ui__title {
  margin-left: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: -0.005em;
}

.md-ui__meta {
  margin-left: auto;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 0.6875rem;
  color: var(--faint);
}

/* ---- Prospect feed ---- */

.md-ui__row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--fast) var(--ease);
}
.md-ui__row:last-child { border-bottom: 0; }
.md-ui__row:hover { background: var(--brand-wash); }

.md-ui__co { min-width: 0; }
.md-ui__name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-ui__sub { font-size: 0.6875rem; color: var(--faint); }

/* Score chips — fit and timing shown separately, which is the product's
   central claim. Merging them into one number would contradict the copy. */
.md-score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
  border-radius: 5px;
  white-space: nowrap;
}
.md-score__k { font-size: 0.5625rem; font-weight: 500; opacity: 0.75; letter-spacing: 0.04em; }
.md-score--hi  { background: rgba(14,122,95,0.10);  color: var(--verified); }
.md-score--mid { background: rgba(180,105,14,0.10); color: var(--caution); }
.md-score--lo  { background: rgba(18,40,63,0.06);   color: var(--faint); }

/* ---- Evidence strip inside the panel ---- */

.md-ui__ev {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.55rem 0.85rem;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  font-size: 0.6875rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.md-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.02em;
}
.md-pill--v { background: rgba(14,122,95,0.10);  color: var(--verified); }
.md-pill--s { background: rgba(180,105,14,0.10); color: var(--caution); }
.md-pill--c { background: rgba(179,38,30,0.10);  color: var(--conflict); }

/* ---- Distribution bars ---- */

.md-dist { display: grid; gap: 0.85rem; padding: 1rem 0.85rem; }

.md-dist__row { display: grid; grid-template-columns: 84px 1fr auto; gap: 0.7rem; align-items: center; }
.md-dist__k { font-size: 0.6875rem; color: var(--muted); }

.md-dist__track {
  height: 7px;
  border-radius: 999px;
  background: rgba(12,120,252,0.10);
  overflow: hidden;
}

.md-dist__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand-grad);
  /* Width is set inline per row; animating it on reveal would be decorative
     motion on data, which misrepresents a static figure. */
}
.md-dist__fill--muted { background: var(--brand-light); }

.md-dist__n {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 0.6875rem;
  color: var(--faint);
  min-width: 2.5em;
  text-align: right;
}

.md-ui__foot {
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.6875rem;
  color: var(--faint);
  background: var(--paper-2);
}

/* Two panels side by side on wide screens, stacked on narrow. */
.md-uipair { display: grid; gap: 1rem; }
@media (min-width: 900px) { .md-uipair { grid-template-columns: 1.15fr 0.85fr; } }

/* The hero media frame was built for photography — fixed ratio, wash
   background and a brand tint overlay. When it holds product UI instead, all
   three are wrong: the tint washes the interface blue and the fixed ratio
   letterboxes it. Strip them when a .md-ui is inside. */
.md-hero__media:has(.md-ui) {
  aspect-ratio: auto;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.md-hero__media:has(.md-ui)::after { content: none; }
.md-hero__media:has(.md-ui):hover .md-ui { transform: none; }

/* Fallback for engines without :has() — the UI panel carries its own frame. */
.md-hero__media > .md-ui { position: relative; z-index: 2; }

.md-hero__media--ui {
  aspect-ratio: auto;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.md-hero__media--ui::after { content: none; }

/* ==========================================================================
   Premium pass — depth, light and motion

   The page read as static because everything sat on flat white with no
   atmosphere and nothing responded to the cursor. Three additions fix that
   without a page builder or an animation library.
   ========================================================================== */

/* ---- 1. Atmosphere: a soft brand mesh behind the hero -------------------- */

.md-hero--split { position: relative; }

.md-hero--split::before {
  content: '';
  position: absolute;
  inset: -18% -30% auto -30%;
  height: 150%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 46% at 18% 22%, rgba(12,144,252,0.16) 0%, transparent 68%),
    radial-gradient(38% 40% at 82% 12%, rgba(11,95,214,0.13) 0%, transparent 66%),
    radial-gradient(46% 44% at 62% 74%, rgba(180,216,252,0.24) 0%, transparent 70%);
  filter: blur(8px);
}

/* Fine grain over the whole page — the difference between "white" and
   "paper". Inline SVG so it costs no request. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 2. Value cards, with cursor-tracked light --------------------------- */

.md-value {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.15rem);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  margin-top: clamp(3rem, 6vw, 5rem);
}

.md-v {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--sh-1);
  transition:
    transform var(--base) var(--ease),
    box-shadow var(--base) var(--ease),
    border-color var(--base) var(--ease);
}

/* The light itself: a soft radial that follows the pointer. --mx/--my are set
   by script; without script it simply never appears. */
.md-v::before {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
              rgba(12,120,252,0.14) 0%, transparent 62%);
  transition: opacity var(--base) var(--ease);
}

.md-v:hover {
  transform: translateY(-4px);
  border-color: rgba(12,120,252,0.42);
  box-shadow: var(--sh-3);
}
.md-v:hover::before { opacity: 1; }

.md-v__i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-bottom: 1rem;
  border-radius: 8px;
  background: var(--brand-wash);
  color: var(--brand);
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  transition: background-color var(--base) var(--ease), color var(--base) var(--ease);
}
.md-v:hover .md-v__i { background: var(--brand); color: #fff; }

.md-v h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; letter-spacing: -0.02em; }
.md-v p  { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }

/* One card carries the brand gradient so the grid has a focal point. */
.md-v--accent { background: var(--brand-grad); border-color: transparent; }
.md-v--accent h3 { color: #fff; }
.md-v--accent p  { color: rgba(255,255,255,0.88); }
.md-v--accent .md-v__i { background: rgba(255,255,255,0.18); color: #fff; }
.md-v--accent::before { display: none; }

/* ---- 3. Section headings get a brand rule ------------------------------- */

.md-lede-h2 { position: relative; padding-top: 1.4rem; }
.md-lede-h2::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 3px;
  border-radius: 2px;
  background: var(--brand-grad);
}

/* ---- 4. Counters ---------------------------------------------------------
   Numbers count up once when first seen. Static value stays in the markup so
   it is correct with no script and for screen readers. */
.md-count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .md-v:hover { transform: none; }
  .md-hero--split::before { filter: none; }
}

/* The hero mesh is deliberately wider than the viewport so the gradients read
   as ambient rather than as a boxed shape — but that width was pushing the
   document sideways. `overflow: clip` contains it without creating a scroll
   container, so sticky positioning elsewhere still works (overflow: hidden
   would break it). */
.md-hero--split { overflow: clip; }

/* Belt and braces for engines without `clip`, and for any future full-bleed
   decoration: the page itself never scrolls horizontally. */
html, body { overflow-x: clip; }

/* ==========================================================================
   Density pass

   Measured against the references: they carry 72-94 inline SVGs and 38-101
   interactive elements; this page had 0 and 7. Copy length was already
   comparable, so the gap was visual density, not words.
   ========================================================================== */

.md-ic { width: 18px; height: 18px; flex: none; }
.md-ic--lg { width: 22px; height: 22px; }

/* Value-card icon tile now holds an icon rather than a number. */
.md-v__i { width: 38px; height: 38px; border-radius: 10px; }

/* ---- Capability grid ---- */

.md-feat {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.md-f {
  background: var(--paper);
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  transition: background-color var(--base) var(--ease);
}
.md-f:hover { background: var(--brand-wash); }

.md-f .md-ic {
  color: var(--brand);
  margin-bottom: 0.85rem;
  transition: transform var(--base) var(--ease);
}
.md-f:hover .md-ic { transform: translateY(-2px) scale(1.06); }

.md-f h3 { margin: 0 0 0.4rem; font-size: 1rem; letter-spacing: -0.015em; }
.md-f p  { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }

/* ---- Comparison table ---- */

.md-cmp {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--sh-1);
}

.md-cmp__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.25fr;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  align-items: center;
  transition: background-color var(--fast) var(--ease);
}
.md-cmp__row:last-child { border-bottom: 0; }
.md-cmp__row:not(.md-cmp__row--head):hover { background: var(--brand-wash); }

.md-cmp__row--head {
  background: var(--paper-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}

.md-cmp__b { color: var(--faint); }
.md-cmp__g {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 550;
  color: var(--text);
}
.md-cmp__g .md-ic { color: var(--verified); }

@media (max-width: 760px) {
  .md-cmp__row { grid-template-columns: 1fr; gap: 0.4rem; padding-block: 1.1rem; }
  .md-cmp__row--head { display: none; }
  .md-cmp__b::before { content: 'Typical: '; color: var(--faint); font-size: 0.8125rem; }
}

/* ---- FAQ ---- */

.md-faq {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--sh-1);
}

.md-q { border-bottom: 1px solid var(--line); }
.md-q:last-child { border-bottom: 0; }

.md-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  cursor: pointer;
  font-weight: 550;
  font-size: 1rem;
  list-style: none;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.md-q summary::-webkit-details-marker { display: none; }
.md-q summary:hover { background: var(--brand-wash); color: var(--brand-deep); }

.md-q summary .md-ic {
  color: var(--brand);
  transition: transform var(--base) var(--ease);
}
.md-q[open] summary { background: var(--brand-wash); color: var(--brand-deep); }
.md-q[open] summary .md-ic { transform: rotate(135deg); }

.md-q p {
  margin: 0;
  padding: 0 1.15rem 1.2rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 74ch;
}

/* Alternating section tint is now handled explicitly rather than nth-of-type,
   which mis-fires once section count changes. */
.md-section:nth-of-type(even) { background: transparent; }
.md-wrap.md-section:nth-of-type(3n+2) { background: var(--paper-2); }

/* ==========================================================================
   Grid orphan fix

   auto-fit resolved to 4 columns at 1240px, so six-item grids rendered 4 + 2
   and the two empty tracks showed through as a bare tinted block. Six items
   want three columns.
   ========================================================================== */

@media (min-width: 1000px) {
  .md-feat,
  .md-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Data Care band: was text in the left half of a very wide blue box ---- */

.md-band--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.md-band__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  overflow: hidden;
}

.md-band__stat {
  background: rgba(255, 255, 255, 0.10);
  padding: 1.15rem 1.25rem;
  backdrop-filter: blur(2px);
}
.md-band__stat b {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
}
.md-band__stat span {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .md-band--split { grid-template-columns: 1fr; }
}

/* ---- Industry strip ---- */

.md-inds {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
}

.md-ind {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  transition: border-color var(--base) var(--ease),
              box-shadow var(--base) var(--ease),
              transform var(--base) var(--ease);
}
.md-ind .md-ic { color: var(--brand); }
.md-ind:hover {
  border-color: var(--brand);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}

/* ==========================================================================
   Colour, scale and motion pass

   Three changes asked for together, and they interact: bigger icons need a
   bigger tile, per-card hues need a token to drive both the tile and the
   hover border, and the animation reads off that same token so a card's
   motion is tinted like the card.
   ========================================================================== */

:root {
  /* Six hues that sit at the same lightness and chroma as the brand blue, so
     the page reads colourful rather than multicoloured. Brand stays dominant. */
  --hue-1: #0C78FC;  --hue-1-wash: #EDF5FF;   /* brand blue    */
  --hue-2: #0E9488;  --hue-2-wash: #E6F6F4;   /* teal          */
  --hue-3: #6D4AFF;  --hue-3-wash: #F0EDFF;   /* violet        */
  --hue-4: #D97706;  --hue-4-wash: #FFF4E5;   /* amber         */
  --hue-5: #0891B2;  --hue-5-wash: #E5F7FB;   /* cyan          */
  --hue-6: #DB2777;  --hue-6-wash: #FDECF4;   /* magenta       */
}

/* ---- Bigger icons ---- */

.md-ic    { width: 24px; height: 24px; stroke-width: 1.7; }
.md-ic--lg { width: 30px; height: 30px; stroke-width: 1.55; }

.md-v__i  { width: 54px; height: 54px; border-radius: 14px; margin-bottom: 1.15rem; }
.md-v__i .md-ic { width: 26px; height: 26px; }

.md-f .md-ic  { width: 30px; height: 30px; }
.md-ind .md-ic { width: 22px; height: 22px; }
.md-q summary .md-ic { width: 20px; height: 20px; }

/* ---- Per-card hue rotation ---- */

.md-v:nth-child(6n+1), .md-f:nth-child(6n+1), .md-card:nth-child(6n+1) { --hue: var(--hue-1); --hue-wash: var(--hue-1-wash); }
.md-v:nth-child(6n+2), .md-f:nth-child(6n+2), .md-card:nth-child(6n+2) { --hue: var(--hue-2); --hue-wash: var(--hue-2-wash); }
.md-v:nth-child(6n+3), .md-f:nth-child(6n+3), .md-card:nth-child(6n+3) { --hue: var(--hue-3); --hue-wash: var(--hue-3-wash); }
.md-v:nth-child(6n+4), .md-f:nth-child(6n+4), .md-card:nth-child(6n+4) { --hue: var(--hue-4); --hue-wash: var(--hue-4-wash); }
.md-v:nth-child(6n+5), .md-f:nth-child(6n+5), .md-card:nth-child(6n+5) { --hue: var(--hue-5); --hue-wash: var(--hue-5-wash); }
.md-v:nth-child(6n+6), .md-f:nth-child(6n+6), .md-card:nth-child(6n+6) { --hue: var(--hue-6); --hue-wash: var(--hue-6-wash); }

.md-v__i { background: var(--hue-wash, var(--brand-wash)); color: var(--hue, var(--brand)); }
.md-v:hover .md-v__i { background: var(--hue, var(--brand)); color: #fff; }
.md-v:hover { border-color: color-mix(in oklab, var(--hue, var(--brand)) 45%, transparent); }

.md-f .md-ic   { color: var(--hue, var(--brand)); }
.md-f:hover    { background: var(--hue-wash, var(--brand-wash)); }
.md-card .md-ic { color: var(--hue, var(--brand)); margin-bottom: 0.9rem; }

/* The pointer-tracked light picks up the card's own hue. */
.md-v::before {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in oklab, var(--hue, var(--brand)) 16%, transparent) 0%,
              transparent 62%);
}

/* The accent card overrides the rotation — it is the focal point. */
.md-v--accent .md-v__i { background: rgba(255,255,255,0.20); color: #fff; }
.md-v--accent:hover .md-v__i { background: rgba(255,255,255,0.30); color: #fff; }
.md-v--accent:hover { border-color: transparent; }

/* ---- Motion ----------------------------------------------------------------
   All of it is opacity/transform only, and all of it sits behind
   prefers-reduced-motion. A card that cannot animate still looks finished.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  /* Icon tile: settles with a small overshoot on entry, springs on hover. */
  .md-js .md-reveal.is-in .md-v__i,
  .md-js .md-reveal.is-in .md-f .md-ic {
    animation: md-pop 520ms var(--ease) backwards;
  }
  .md-v:nth-child(2) .md-v__i { animation-delay: 60ms; }
  .md-v:nth-child(3) .md-v__i { animation-delay: 120ms; }
  .md-v:nth-child(4) .md-v__i { animation-delay: 180ms; }
  .md-v:nth-child(5) .md-v__i { animation-delay: 240ms; }
  .md-v:nth-child(6) .md-v__i { animation-delay: 300ms; }

  @keyframes md-pop {
    0%   { opacity: 0; transform: scale(0.72) rotate(-8deg); }
    62%  { opacity: 1; transform: scale(1.06) rotate(2deg); }
    100% { opacity: 1; transform: none; }
  }

  .md-v__i { transition: background-color var(--base) var(--ease),
                         color var(--base) var(--ease),
                         transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
  .md-v:hover .md-v__i { transform: translateY(-3px) scale(1.08) rotate(-4deg); }

  /* A light sweeps diagonally across the card on hover. Sits above the tinted
     radial and below the text, so it reads as gloss rather than a colour wash. */
  .md-v::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: linear-gradient(115deg, transparent 38%,
                rgba(255,255,255,0.55) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: opacity 200ms linear;
    pointer-events: none;
  }
  .md-v:hover::after { opacity: 1; animation: md-sheen 900ms var(--ease); }
  @keyframes md-sheen {
    from { transform: translateX(-120%); }
    to   { transform: translateX(120%); }
  }

  /* Heading nudges right so the whole card responds, not only the icon. */
  .md-v h3 { transition: transform var(--base) var(--ease); }
  .md-v:hover h3 { transform: translateX(3px); }

  /* Accent card: the gradient itself drifts, which no static screenshot has. */
  .md-v--accent {
    background: linear-gradient(135deg, #0C90FC 0%, #0B5FD6 50%, #6D4AFF 100%);
    background-size: 220% 220%;
    animation: md-drift 14s ease-in-out infinite;
  }
  @keyframes md-drift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }

  /* Industry chips ripple in rather than all landing at once. */
  .md-js .md-reveal.is-in .md-ind { animation: md-rise 480ms var(--ease) backwards; }
  .md-ind:nth-child(2) { animation-delay: 50ms; }
  .md-ind:nth-child(3) { animation-delay: 100ms; }
  .md-ind:nth-child(4) { animation-delay: 150ms; }
  .md-ind:nth-child(5) { animation-delay: 200ms; }
  .md-ind:nth-child(6) { animation-delay: 250ms; }
  .md-ind:nth-child(7) { animation-delay: 300ms; }
  .md-ind:nth-child(8) { animation-delay: 350ms; }
  @keyframes md-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   Hero background

   Surveyed eight of the category leaders first: seven of eight run no
   photograph behind the hero at all, and the one that does use moving media
   (Clay) uses abstract motion rather than footage. A stock office photo is
   also the one thing guaranteed to read as a template. So the hero gets a
   real full-bleed moving background built from drifting colour fields and a
   data-grid, which is what the product actually looks like.

   Both layers are full viewport width, not wrap width, so the banner covers
   edge to edge. Both are pointer-events:none and sit behind the content.
   ========================================================================== */

.md-hero--split {
  position: relative;
  isolation: isolate;
  /* the bleed layers extend past the wrap, so nothing may escape sideways */
  overflow: clip;
}

/* ---- Layer 1: colour fields ---- */

.md-hero--split::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  width: 100vw;
  height: 175%;
  transform: translateX(-50%);
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(40% 44% at 12% 16%, rgba(12,144,252,0.58) 0%, transparent 64%),
    radial-gradient(36% 40% at 88% 8%,  rgba(109,74,255,0.44) 0%, transparent 62%),
    radial-gradient(42% 42% at 72% 86%, rgba(14,148,136,0.34) 0%, transparent 64%),
    radial-gradient(38% 40% at 46% 40%, rgba(8,145,178,0.30) 0%, transparent 62%),
    radial-gradient(50% 48% at 34% 74%, rgba(180,216,252,0.55) 0%, transparent 68%);
  filter: blur(14px) saturate(1.15);
}

/* ---- Layer 2: the grid, plus the scrim that protects the headline ---- */

.md-hero--split::after {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  width: 100vw;
  height: 175%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background-image:
    /* white scrim, heaviest over the copy column so text keeps its contrast */
    linear-gradient(100deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.44) 38%,
                    rgba(255,255,255,0.10) 66%, rgba(255,255,255,0.22) 100%),
    /* fade the whole thing out into the page below */
    linear-gradient(to bottom, transparent 55%, var(--paper) 97%),
    /* the data grid itself */
    radial-gradient(circle, rgba(12,120,252,0.42) 1.2px, transparent 1.2px);
  background-size: 100% 100%, 100% 100%, 26px 26px;
  background-position: 0 0, 0 0, 0 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* Colour fields breathe. Slow enough to read as light, not as an animation. */
  .md-hero--split::before {
    background-size: 190% 190%;
    animation: md-hero-drift 26s ease-in-out infinite;
  }
  @keyframes md-hero-drift {
    0%, 100% { background-position: 0% 40%; transform: translateX(-50%) scale(1); }
    50%      { background-position: 100% 60%; transform: translateX(-50%) scale(1.06); }
  }

  /* The grid creeps, which is what sells it as live rather than printed. */
  .md-hero--split::after { animation: md-hero-grid 34s linear infinite; }
  @keyframes md-hero-grid {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 0 0, 0 0, 26px 52px; }
  }
}

/* The hero owns the top of the page now, so it needs the room to show it. */
.md-hero--split { padding-block: clamp(4rem, 8vw, 7.5rem) clamp(4rem, 7vw, 6.5rem); }

/* Product panel gains a rim light so it separates from the moving field. */
.md-hero__media--ui .md-ui {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 18px 48px -18px rgba(12,120,252,0.34),
    0 4px 14px -6px rgba(18,40,63,0.14);
}

/* The hero's own `overflow: clip` was cropping the full-bleed background back
   to the 1240px wrap. html/body already clip horizontally (line above), so the
   hero does not need to, and without it the banner reaches both screen edges. */
.md-hero--split { overflow: visible; }

/* ==========================================================================
   Connected flow

   The six value cards, joined into one sequence: a spine down the left with a
   node per step, an arrowhead pointing into the next node, and one step lit at
   a time. The lit state is driven by a class from script, so with JS off every
   step simply renders in its resting state and nothing is hidden.
   ========================================================================== */

.md-flow { display: grid; gap: 0; margin-top: clamp(2.5rem, 5vw, 4rem); }

.md-fs {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}
.md-fs:last-child { padding-bottom: 0; }

/* ---- The spine ---- */

/* Rail segment running from this node down into the next one. */
.md-fs:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 54px;
  bottom: 4px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
}

/* The arrowhead sitting on the rail, pointing into the next node. */
.md-fs:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 25px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  transform: rotate(45deg);
  border-bottom-right-radius: 2px;
}

/* Once a step has been reached, its outgoing rail and arrow take its colour. */
.md-fs.is-done::before,
.md-fs.is-on::before { background: color-mix(in oklab, var(--hue, var(--brand)) 62%, transparent); }
.md-fs.is-done::after,
.md-fs.is-on::after {
  border-right-color: color-mix(in oklab, var(--hue, var(--brand)) 62%, transparent);
  border-bottom-color: color-mix(in oklab, var(--hue, var(--brand)) 62%, transparent);
}

/* ---- The node ---- */

.md-fs__node {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--hue-wash, var(--brand-wash));
  color: var(--hue, var(--brand));
  border: 1px solid transparent;
  transition:
    background-color var(--base) var(--ease),
    color var(--base) var(--ease),
    transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow var(--base) var(--ease);
}
.md-fs__node .md-ic { width: 28px; height: 28px; }

/* Step number, riding the corner of the node. */
.md-fs__n {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--faint);
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  transition: background-color var(--base) var(--ease),
              color var(--base) var(--ease),
              border-color var(--base) var(--ease);
}

/* ---- The card ---- */

.md-fs__card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  box-shadow: var(--sh-1);
  transition:
    transform var(--base) var(--ease),
    border-color var(--base) var(--ease),
    box-shadow var(--base) var(--ease),
    background-color var(--base) var(--ease);
}
.md-fs__card h3 { margin: 0 0 0.45rem; font-size: 1.125rem; letter-spacing: -0.02em; }
.md-fs__card p  { margin: 0; color: var(--muted); line-height: 1.55; max-width: 68ch; }

/* ---- Lit state ---- */

.md-fs.is-on .md-fs__node {
  background: var(--hue, var(--brand));
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 10px 26px -10px color-mix(in oklab, var(--hue, var(--brand)) 70%, transparent);
}
.md-fs.is-on .md-fs__n {
  background: var(--hue, var(--brand));
  border-color: transparent;
  color: #fff;
}
.md-fs.is-on .md-fs__card {
  transform: translateX(4px);
  border-color: color-mix(in oklab, var(--hue, var(--brand)) 48%, transparent);
  background: color-mix(in oklab, var(--hue-wash, var(--brand-wash)) 55%, var(--paper));
  box-shadow: var(--sh-3);
}

/* Steps already passed keep a hint of their colour so the trail reads. */
.md-fs.is-done .md-fs__node { background: color-mix(in oklab, var(--hue-wash, var(--brand-wash)) 80%, var(--paper)); }

/* Hover pins a step, so a reader can stop the sequence and study one. */
.md-fs:hover .md-fs__card { border-color: color-mix(in oklab, var(--hue, var(--brand)) 48%, transparent); }

@media (max-width: 620px) {
  .md-fs { grid-template-columns: 48px minmax(0, 1fr); gap: 0.9rem; }
  .md-fs__node { width: 48px; height: 48px; border-radius: 14px; }
  .md-fs__node .md-ic { width: 22px; height: 22px; }
  .md-fs:not(:last-child)::before { left: 23px; top: 42px; }
  .md-fs:not(:last-child)::after  { left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  /* No cycling: every step renders in its resting state, all copy present. */
  .md-fs__node, .md-fs__card, .md-fs__n { transition: none; }
  .md-fs.is-on .md-fs__card { transform: none; }
  .md-fs.is-on .md-fs__node { transform: none; }
}

/* ==========================================================================
   Full spectrum

   Nine hues across the wheel instead of six. They are held at a common
   lightness and chroma so the page reads as a deliberate spectrum rather than
   as nine unrelated colours, and text stays near-black on near-white
   throughout — colour lives in icons, nodes, rails and rules, never under
   body copy.
   ========================================================================== */

:root {
  --hue-1: #0C78FC;  --hue-1-wash: #EDF5FF;   /* brand blue */
  --hue-2: #0891B2;  --hue-2-wash: #E4F6FB;   /* cyan       */
  --hue-3: #0D9488;  --hue-3-wash: #E4F6F4;   /* teal       */
  --hue-4: #059669;  --hue-4-wash: #E4F6EE;   /* green      */
  --hue-5: #CA8A04;  --hue-5-wash: #FCF5E0;   /* gold       */
  --hue-6: #EA580C;  --hue-6-wash: #FEEFE5;   /* orange     */
  --hue-7: #E11D48;  --hue-7-wash: #FDEAEF;   /* rose       */
  --hue-8: #DB2777;  --hue-8-wash: #FDEAF3;   /* magenta    */
  --hue-9: #6D4AFF;  --hue-9-wash: #EFEBFF;   /* violet     */

  --spectrum: linear-gradient(90deg,
    #0C78FC 0%, #0891B2 13%, #0D9488 26%, #059669 38%, #CA8A04 50%,
    #EA580C 63%, #E11D48 75%, #DB2777 87%, #6D4AFF 100%);
}

/* Nine-step rotation, now including the flow nodes and the chips. */
.md-v:nth-child(9n+1), .md-f:nth-child(9n+1), .md-card:nth-child(9n+1), .md-fs:nth-child(9n+1), .md-ind:nth-child(9n+1) { --hue: var(--hue-1); --hue-wash: var(--hue-1-wash); }
.md-v:nth-child(9n+2), .md-f:nth-child(9n+2), .md-card:nth-child(9n+2), .md-fs:nth-child(9n+2), .md-ind:nth-child(9n+2) { --hue: var(--hue-2); --hue-wash: var(--hue-2-wash); }
.md-v:nth-child(9n+3), .md-f:nth-child(9n+3), .md-card:nth-child(9n+3), .md-fs:nth-child(9n+3), .md-ind:nth-child(9n+3) { --hue: var(--hue-3); --hue-wash: var(--hue-3-wash); }
.md-v:nth-child(9n+4), .md-f:nth-child(9n+4), .md-card:nth-child(9n+4), .md-fs:nth-child(9n+4), .md-ind:nth-child(9n+4) { --hue: var(--hue-4); --hue-wash: var(--hue-4-wash); }
.md-v:nth-child(9n+5), .md-f:nth-child(9n+5), .md-card:nth-child(9n+5), .md-fs:nth-child(9n+5), .md-ind:nth-child(9n+5) { --hue: var(--hue-5); --hue-wash: var(--hue-5-wash); }
.md-v:nth-child(9n+6), .md-f:nth-child(9n+6), .md-card:nth-child(9n+6), .md-fs:nth-child(9n+6), .md-ind:nth-child(9n+6) { --hue: var(--hue-6); --hue-wash: var(--hue-6-wash); }
.md-v:nth-child(9n+7), .md-f:nth-child(9n+7), .md-card:nth-child(9n+7), .md-fs:nth-child(9n+7), .md-ind:nth-child(9n+7) { --hue: var(--hue-7); --hue-wash: var(--hue-7-wash); }
.md-v:nth-child(9n+8), .md-f:nth-child(9n+8), .md-card:nth-child(9n+8), .md-fs:nth-child(9n+8), .md-ind:nth-child(9n+8) { --hue: var(--hue-8); --hue-wash: var(--hue-8-wash); }
.md-v:nth-child(9n+9), .md-f:nth-child(9n+9), .md-card:nth-child(9n+9), .md-fs:nth-child(9n+9), .md-ind:nth-child(9n+9) { --hue: var(--hue-9); --hue-wash: var(--hue-9-wash); }

/* Chips carry their hue on the icon and on hover, not as a fill. */
.md-ind .md-ic { color: var(--hue, var(--brand)); }
.md-ind:hover  { border-color: var(--hue, var(--brand)); }

/* Comparison ticks and FAQ markers walk the spectrum row by row. */
.md-cmp__row:nth-child(9n+2) .md-cmp__g .md-ic { color: var(--hue-2); }
.md-cmp__row:nth-child(9n+3) .md-cmp__g .md-ic { color: var(--hue-3); }
.md-cmp__row:nth-child(9n+4) .md-cmp__g .md-ic { color: var(--hue-4); }
.md-cmp__row:nth-child(9n+5) .md-cmp__g .md-ic { color: var(--hue-5); }
.md-cmp__row:nth-child(9n+6) .md-cmp__g .md-ic { color: var(--hue-6); }
.md-cmp__row:nth-child(9n+7) .md-cmp__g .md-ic { color: var(--hue-7); }

.md-q:nth-child(9n+1) summary .md-ic { color: var(--hue-1); }
.md-q:nth-child(9n+2) summary .md-ic { color: var(--hue-2); }
.md-q:nth-child(9n+3) summary .md-ic { color: var(--hue-3); }
.md-q:nth-child(9n+4) summary .md-ic { color: var(--hue-4); }
.md-q:nth-child(9n+5) summary .md-ic { color: var(--hue-5); }
.md-q:nth-child(9n+6) summary .md-ic { color: var(--hue-6); }
.md-q:nth-child(9n+7) summary .md-ic { color: var(--hue-7); }
.md-q[open] summary { background: color-mix(in oklab, var(--brand-wash) 70%, var(--paper)); }

/* Section rules become a spectrum sliver rather than a blue dash. */
.md-lede-h2::before { background: var(--spectrum) !important; width: 56px !important; }

/* Closing band picks up the spectrum along its top edge. */
.md-band { position: relative; }
.md-band::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--spectrum);
  border-radius: 8px 8px 0 0;
  z-index: 2;
}

/* Header keeps a hairline of the spectrum so the palette is declared up front. */
.md-header::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--spectrum);
  opacity: 0.9;
}

/* Honeypot: removed from view and from assistive tech, but still focusable-free
   and submitted by bots. Not display:none — some bots skip hidden inputs. */
.md-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Mobile menu button. Base state only: hidden by default so the existing light
   pages are unchanged. Full treatment lives in spectrum.css under .sp. */
.md-nav__toggle{display:none}

/* Mobile first-viewport composition ------------------------------------------
   Owner requirement: at 320x720 the homepage must show the brand, a shortened
   headline, one supporting sentence, the primary CTA and part of the main
   visual. Measured before: H1 269px + 208-char lede 260px = 529px of a 720px
   viewport, pushing the CTA to y=725 (45px below the fold) and the visual to
   y=925. Fixed with mobile-only variants; desktop composition is unchanged. */
.md-only-sm { display: none; }
@media (max-width: 400px) {
  .md-hide-sm { display: none; }
  .md-only-sm { display: block; }
  .md-hero--split { padding-block: 1rem 2rem; gap: 1rem; }
  .md-hero__title { font-size: clamp(1.85rem, 8.4vw, 2.3rem); margin-bottom: .5rem; }
  .md-hero__lede  { margin: .6rem 0 0; }
  .md-hero__actions { margin-top: 1rem; gap: .6rem; }
  .md-hero__note  { margin-top: .5rem; }
}

/* Mobile navigation — light theme -------------------------------------------
   Before this, .md-nav__toggle was display:none in site.css and the working
   menu lived only in spectrum.js, which launch pages do not load. Measured at
   320px: nav clientWidth 46px vs scrollWidth 530px, 1 of 5 links reachable,
   all 5 under the 44px touch minimum.

   Progressive enhancement: with JavaScript off, .md-nav is a normal stacked
   list and every link is reachable. site.js adds `hidden` and the toggle
   behaviour only once it runs (it sets .md-js on <html>). */
@media (max-width: 860px) {
  .md-header { position: relative; flex-wrap: wrap; }

  /* Gated on .md-js: without JavaScript the toggle would be an inert control
     announcing aria-expanded="false" beside an already-open menu. */
  .md-js .md-nav__toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; min-width: 44px; padding: .55rem .8rem;
    background: transparent; border: 1px solid var(--line); border-radius: 10px;
    color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
  }
  .md-js .md-nav__toggle:hover,
  .md-js .md-nav__toggle:focus-visible { background: var(--brand); border-color: var(--brand); color: #fff; }
  .md-nav__bars { display: inline-flex; flex-direction: column; gap: 4px; }
  .md-nav__bars i { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

  .md-nav {
    order: 3; width: 100%;
    display: flex; flex-direction: column; gap: 0;
    margin-top: .75rem; padding-top: .5rem;
    border-top: 1px solid var(--line);
    mask-image: none;                      /* was a fade that clipped links */
    max-height: min(70vh, 70dvh); overflow-y: auto; overscroll-behavior: contain;
  }
  .md-nav a {
    min-height: 44px; display: flex; align-items: center;
    width: 100%; padding: .25rem 0;
  }
  .md-nav__cta {                            /* was display:none on mobile */
    display: inline-flex; justify-content: center;
    margin-top: .6rem; min-height: 44px;
  }
  /* Only JS may collapse the menu; without JS it stays open and usable. */
  .md-js .md-nav[hidden] { display: none; }
}
@media (min-width: 861px) {
  .md-nav[hidden] { display: flex; }        /* attribute must never linger on desktop */
}
@keyframes md-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
}

/* Connection story — original, CSS-only ---------------------------------------
   No JavaScript is involved, so the "works with JS disabled" requirement is
   satisfied by construction rather than by a fallback. Radio inputs drive the
   stage: arrow keys move through the group natively, labels are 44px touch
   targets, and the checked state is announced by the radio itself.
   Calm by design: 600ms eases, one property group (opacity + a small
   translate), nothing loops. */
.md-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.md-story__steps { border: 0; margin: 0; padding: 0; }
.md-story__radio { position: absolute; opacity: 0; pointer-events: none; }

.md-story__steps > label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .5rem 1rem; margin: 0 .4rem .75rem 0;
  border: 1.5px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.md-story__steps > label:hover { border-color: var(--brand); color: var(--brand); }
/* Focus follows the input, so the ring is drawn on its label. */
.md-story__radio:focus-visible + label {
  outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand);
}
.md-story__radio:checked + label {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

.md-story__stage { position: relative; margin-top: .5rem; }
.md-story__svg { width: 100%; height: auto; max-width: 720px; display: block; margin-inline: auto; }

/* Nodes and edges reveal cumulatively as later stages are selected. */
.md-story__svg .n, .md-story__svg .e {
  opacity: 0; transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.md-story__svg .n { transform: scale(.9); transform-origin: center; transform-box: fill-box; }
.md-story__svg .e { stroke-dasharray: 1; stroke-dashoffset: 1; pathLength: 1;
  transition: opacity 600ms var(--ease), stroke-dashoffset 700ms var(--ease); }

#md-story-1:checked ~ .md-story__stage .n1,
#md-story-2:checked ~ .md-story__stage .n1, #md-story-2:checked ~ .md-story__stage .n2,
#md-story-3:checked ~ .md-story__stage .n1, #md-story-3:checked ~ .md-story__stage .n2, #md-story-3:checked ~ .md-story__stage .n3,
#md-story-4:checked ~ .md-story__stage .n { opacity: 1; transform: scale(1); }

#md-story-2:checked ~ .md-story__stage .e2,
#md-story-3:checked ~ .md-story__stage .e2, #md-story-3:checked ~ .md-story__stage .e3,
#md-story-4:checked ~ .md-story__stage .e { opacity: 1; stroke-dashoffset: 0; }

.md-story__cap {
  display: none; text-align: center; color: var(--muted);
  margin: 1rem auto 0; max-width: 52ch;
}
#md-story-1:checked ~ .md-story__stage .c1,
#md-story-2:checked ~ .md-story__stage .c2,
#md-story-3:checked ~ .md-story__stage .c3,
#md-story-4:checked ~ .md-story__stage .c4 { display: block; }

/* Reduced motion: no transitions, and the complete network is shown at once so
   no information depends on stepping through. */
@media (prefers-reduced-motion: reduce) {
  .md-story__svg .n, .md-story__svg .e {
    opacity: 1 !important; transform: none !important;
    stroke-dashoffset: 0 !important; transition: none !important;
  }
}

/* =============================================================================
   BUTTON SYSTEM — single token-driven implementation
   Owner addendum 2026-08-09. This is the ONLY place buttons are styled; all
   earlier .md-btn rules were removed rather than overridden.

   Contract, identical for primary, secondary, nav CTA and form buttons:
     light surface  rest: transparent / solid brand border / brand text
                    hover + focus-visible: brand fill / white text / brand border
     blue surface   rest: transparent / solid WHITE border / white text
                    hover + focus-visible: white fill / brand-deep text / white border
   No faint or partially transparent borders anywhere. No per-variant exceptions.
   ========================================================================== */
:root {
  --btn-face:        var(--brand);      /* border + text on light surfaces */
  --btn-face-ink:    #fff;              /* text once filled */
  --btn-face-active: var(--brand-deep);
}
.md-band, .md-on-blue { --btn-face: #fff; --btn-face-ink: var(--brand-deep); --btn-face-active: var(--brand-light); }

.md-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.72em 1.35em;
  border-radius: 999px; font-weight: 600; font-size: 0.9375rem;
  line-height: 1.1; text-decoration: none; cursor: pointer;
  background: transparent;
  color: var(--btn-face);
  border: 2px solid var(--btn-face);        /* always solid, always full opacity */
  transition: background-color 140ms var(--ease), color 140ms var(--ease),
              border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
/* focus-visible gets the SAME colour response as hover */
.md-btn:hover,
.md-btn:focus-visible {
  background: var(--btn-face);
  color: var(--btn-face-ink);
  border-color: var(--btn-face);
}
/* two-tone ring, in addition to the fill change */
.md-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--btn-face-ink), 0 0 0 4px var(--btn-face);
}
.md-btn:active {
  background: var(--btn-face-active);
  border-color: var(--btn-face-active);
  color: var(--btn-face-ink);
  transform: translateY(1px);
}
.md-btn--sm { padding: 0.55em 1.05em; font-size: 0.8125rem; }

/* Loading — spinner plus an assistive-text change, not colour alone. */
.md-btn[aria-busy="true"] { position: relative; pointer-events: none; color: transparent; }
.md-btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1.05em; height: 1.05em; border-radius: 50%;
  border: 2px solid var(--btn-face); border-top-color: transparent;
  animation: md-btn-spin 700ms linear infinite;
}
@keyframes md-btn-spin { to { transform: rotate(360deg); } }

/* Disabled — dashed border + not-allowed cursor, so it is not colour alone. */
.md-btn[disabled], .md-btn[aria-disabled="true"] {
  background: transparent; color: var(--muted);
  border-color: var(--muted); border-style: dashed;
  cursor: not-allowed; pointer-events: none; box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .md-btn { transition: none; }
  .md-btn:active { transform: none; }
  .md-btn[aria-busy="true"]::after { animation: none; border-top-color: var(--btn-face); opacity: .55; }
}

/* Nav CTA is a button and follows the system; `.md-nav a` would otherwise win. */
.md-nav a.md-btn { color: var(--btn-face); }
.md-nav a.md-btn:hover, .md-nav a.md-btn:focus-visible { color: var(--btn-face-ink); }

/* Restore the coarse-pointer target size for plain nav links (this rule
   previously shared a selector with .md-btn and was removed with it). */
@media (pointer: coarse) {
  .md-nav a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* =============================================================================
   EDGE-TO-EDGE LAYOUT — owner addendum 2026-08-09
   Previously .md-wrap was both the section AND the content rail (max-width
   1240px, measured gutters 93px/108px at 1440), so section backgrounds stopped
   short and the page read as a narrow site floating in white side rails.

   Two layers now:
     1. .md-wrap    — full-bleed section, 100% of the viewport, responsive
                      safe padding clamp(20px, 4vw, 64px).
     2. .md-wrap>*  — content rail, centred, generous max so layouts breathe.
   Paragraph measure is kept on the text elements themselves, not the section.
   ========================================================================== */
:root { --bleed-pad: clamp(20px, 4vw, 64px); --rail: 1600px; }

.md-wrap {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: var(--bleed-pad);
  box-sizing: border-box;
}
.md-wrap > * { max-width: var(--rail); margin-inline: auto; width: 100%; box-sizing: border-box; }

/* Header and footer span the viewport with the same safe padding. */
.md-header { padding-inline: var(--bleed-pad); }
.md-footer { padding-inline: var(--bleed-pad); }
.md-footer > .md-wrap { padding-inline: 0; }

/* The blue CTA band is a full-bleed surface: cancel the section padding, drop
   the rounded corner, and re-apply padding inside so its content stays railed. */
.md-band {
  border-radius: 0;
  max-width: none;
  width: auto;
  margin-inline: calc(-1 * var(--bleed-pad));
  padding-inline: var(--bleed-pad);
}
.md-band > * { max-width: var(--rail); margin-inline: auto; }

/* Readable measure stays on the text, not on the section. */
.md-lede-p, .md-hero__lede, .md-story__cap { max-width: 68ch; }

/* Decorative layers must stay inside their section and never widen the page. */
.md-hero, .md-band, .md-story, .md-section { overflow-x: clip; }

/* Rail alignment fix: `.md-wrap > *` centres each child in the rail, so a short
   heading sat at the rail edge while a measure-limited paragraph centred itself
   further in — the two read as misaligned. Text keeps its measure but aligns to
   the rail's leading edge instead of centring. Deliberately centred blocks
   (the CTA band) opt back in. */
.md-lede-p, .md-hero__lede, .md-story__cap, .md-lede-h2 { margin-inline: 0; }
.md-story__cap { margin-inline: auto; }          /* caption is centred by design */
.md-band, .md-band > * { margin-inline: auto; }
.md-band { margin-inline: calc(-1 * var(--bleed-pad)); }

/* Band-specific accessible gradient -------------------------------------------
   White text measured 3.28:1 against the shared rainbow token's light stop
   (#0C90FC). Rather than darken --brand-grad — which also feeds the heading
   accent rule, accent cards, distribution bars and the loop stage — the CTA
   band gets its own token. The shared rainbow is untouched. */
:root { --band-grad: linear-gradient(135deg, #0B5FD6 0%, #0A47A8 100%); }
.md-band { background: var(--band-grad); }

/* Mobile Menu button joins the universal button system: solid 2px brand border,
   brand text, brand fill on hover AND focus, two-tone ring. It previously used
   `1px solid var(--line)` = rgba(12,120,252,0.16). */
@media (max-width: 860px) {
  .md-js .md-nav__toggle {
    background: transparent;
    color: var(--brand);
    border: 2px solid var(--brand);
    border-radius: 999px;
  }
  .md-js .md-nav__toggle:hover,
  .md-js .md-nav__toggle:focus-visible {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
  }
  .md-js .md-nav__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand);
  }
  .md-js .md-nav__toggle[aria-expanded="true"] { background: var(--brand); color: #fff; }
}

/* =============================================================================
   PASTEL RIBBON SYSTEM — original artwork, owner moodboard 2026-08-09
   Luminous white canvas with calm pastel-rainbow ribbons flowing edge-to-edge.
   Built from CSS gradients rather than images: zero requests, zero layout
   shift, resolution independent, and it cannot bake text into a picture.

   Rules it obeys:
     - Ribbons live behind content in their own layer and never touch text.
     - Text always sits on white or a glass panel, never on a busy area.
     - Clipped to the section (overflow-x: clip already applied) so the
       document never widens.
     - Motion is a slow drift, disabled under prefers-reduced-motion.
   ========================================================================== */
:root {
  --rb-violet: #7C5CFF; --rb-blue: #4B8CFF; --rb-sky: #38C6FF;
  --rb-cyan:   #38E8D4; --rb-mint: #45DA8C; --rb-coral: #FF8E6E;
  --rb-pink:   #FF6FAE; --rb-amber: #FFD45C;
}

.md-ribbon { position: relative; isolation: isolate; }
.md-ribbon::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -20% -30%;
  background:
    radial-gradient(38% 44% at 12% 22%, color-mix(in oklab, var(--rb-violet) 52%, transparent) 0%, transparent 68%),
    radial-gradient(34% 40% at 34% 8%,  color-mix(in oklab, var(--rb-sky)    56%, transparent) 0%, transparent 66%),
    radial-gradient(40% 46% at 62% 26%, color-mix(in oklab, var(--rb-cyan)   46%, transparent) 0%, transparent 68%),
    radial-gradient(32% 38% at 84% 12%, color-mix(in oklab, var(--rb-pink)   42%, transparent) 0%, transparent 64%),
    radial-gradient(30% 36% at 92% 44%, color-mix(in oklab, var(--rb-amber)  38%, transparent) 0%, transparent 62%),
    radial-gradient(34% 40% at 50% 78%, color-mix(in oklab, var(--rb-mint)   40%, transparent) 0%, transparent 66%);
  filter: blur(52px);
  opacity: 1;
  animation: md-ribbon-drift 34s var(--ease) infinite alternate;
}
@keyframes md-ribbon-drift {
  from { transform: translate3d(-3%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, -1.5%, 0) scale(1.05); }
}

/* A quieter ribbon for legal and content-first pages: content stays the focus. */
.md-ribbon--calm::before { opacity: .34; filter: blur(58px); }

/* The full-spectrum hairline that separates ribboned sections. */
.md-spectrum-rule {
  height: 2px; border: 0; margin: 0; opacity: .8;
  background: linear-gradient(90deg, transparent 0%,
    var(--rb-violet) 12%, var(--rb-blue) 26%, var(--rb-sky) 40%,
    var(--rb-cyan) 54%, var(--rb-mint) 66%, var(--rb-amber) 78%,
    var(--rb-coral) 88%, var(--rb-pink) 96%, transparent 100%);
}

/* Glass panel: white, soft border, restrained shadow — text always lands here. */
.md-glass-panel {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(12,120,252,.12);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(18,40,63,.04), 0 12px 32px -18px rgba(18,40,63,.18);
}

@media (prefers-reduced-motion: reduce) {
  .md-ribbon::before { animation: none; }
}
@media (forced-colors: active) {
  .md-ribbon::before { display: none; }
}

/* Text protection over the ribbon --------------------------------------------
   The ribbon is now strong enough to read as the intended pastel-rainbow
   language, so copy no longer sits directly on it. A soft white scrim sits
   between the ribbon and the content, fading out toward the visual side, which
   keeps every heading and paragraph on an effectively white surface while the
   colour stays visible around it. Measured after: no text falls below AA. */
.md-ribbon::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.88) 34%,
    rgba(255,255,255,.55) 56%,
    rgba(255,255,255,.28) 76%,
    rgba(255,255,255,.10) 100%);
}
/* Legal pages: content first, so the scrim is near-solid. */
.md-ribbon--calm::after {
  background: linear-gradient(100deg,
    rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 60%, rgba(255,255,255,.72) 100%);
}

/* Narrow viewports: the content column fills the width, so the scrim's
   horizontal gradient compressed and copy landed over a more saturated part of
   the ribbon — measured blue button text at 4.22:1 (needs 4.5). Below 860px the
   scrim goes near-solid behind content and the ribbon reads as a soft edge
   glow instead of a wash. */
@media (max-width: 860px) {
  .md-ribbon::after {
    background: linear-gradient(180deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.95) 62%,
      rgba(255,255,255,.80) 100%);
  }
  .md-ribbon::before { opacity: .8; filter: blur(60px); }
}

/* =============================================================================
   ROUTE ART SYSTEM — original SVG compositions (see assets/img/art-*.svg)
   Replaces the gradient-only treatment Codex rejected. Each route gets its own
   illustration; the hero ribbon is the only shared element and it is a layered
   dimensional composition, not a blurred blob.
   ========================================================================== */
.md-hero-art { position: relative; }
.md-hero-art__canvas {                    /* edge-to-edge, behind content */
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.md-hero-art__canvas img,
.md-hero-art__canvas svg { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Keep copy on a readable field without hiding the artwork. */
.md-hero-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 38%,
              rgba(255,255,255,.55) 62%, rgba(255,255,255,.12) 100%);
}
@media (max-width: 860px) {
  .md-hero-art::before {
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 58%, rgba(255,255,255,.7) 100%);
  }
}

/* Route illustration blocks below the hero. */
.md-art { display: block; width: 100%; height: auto; }
.md-art--lg { max-width: 640px; margin-inline: auto; }
.md-art-figure { margin: 0; }
.md-art-figure figcaption { margin-top: .75rem; font-size: .9rem; color: var(--muted); }

/* --- Person → pair → cluster → market motion ------------------------------
   Staged reveal driven by IntersectionObserver (site.js adds .is-telling).
   transform/opacity only; paused when offscreen; fully static under
   prefers-reduced-motion with every node visible. */
.md-js .md-net .n, .md-js .md-net .e { opacity: 0; }   /* JS-only: no-JS keeps all nodes visible */
.md-net .n { transform: scale(.86); transform-origin: center; transform-box: fill-box; }
.md-net .e { stroke-dasharray: 1; stroke-dashoffset: 1; }  /* pathLength is an SVG attribute on each <path>, not CSS */
.is-telling .md-net .n,
.is-telling .md-net .e { transition: opacity 620ms var(--ease), transform 620ms var(--ease), stroke-dashoffset 720ms var(--ease); }
.is-telling .md-net .n { opacity: 1; transform: scale(1); }
.is-telling .md-net .e { opacity: 1; stroke-dashoffset: 0; }
.is-telling .md-net .s1 { transition-delay: 0ms; }
.is-telling .md-net .s2 { transition-delay: 420ms; }
.is-telling .md-net .s3 { transition-delay: 840ms; }
.is-telling .md-net .s4 { transition-delay: 1220ms; }

@media (prefers-reduced-motion: reduce) {
  .md-net .n, .md-net .e {
    opacity: 1 !important; transform: none !important;
    stroke-dashoffset: 0 !important; transition: none !important;
  }
}

/* Temporary text lockup — BLOCKED ON EXACT LOGO ASSET.
   Deliberately NOT the old mark and NOT an approximation of the supplied one. */
.md-brand__temp {
  display: inline-flex; align-items: baseline; gap: .38rem;
  font-weight: 800; letter-spacing: -.02em; font-size: 1.28rem; color: var(--ink);
}
.md-brand__temp b { font-weight: 800; color: var(--brand); }
.md-brand__temp span {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--brand); padding: .18em .5em; border-radius: 5px;
  position: relative; top: -.22em;
}

/* =============================================================================
   HOMEPAGE HERO — reference composition
   Rejected version: ribbon rendered as a small rectangle in the corner, hero
   mostly empty, mockup undersized, brand tiny. Cause: .md-hero-art__canvas had
   no height to fill because .md-hero is a padded content box, and the section
   also carried .md-wrap so the artwork was clamped to the content rail.

   Now: the hero is a full-bleed band that owns its own height; the ribbon is a
   cover-fitted layer bleeding past all four edges; content sits in an inner
   grid with the copy left and a large interface panel right.
   ========================================================================== */
.md-hero-art {
  position: relative;
  width: 100%;
  min-height: clamp(560px, 74vh, 780px);
  display: flex; align-items: center;
  padding-block: clamp(2rem, 5vh, 4rem);
  overflow: clip;                       /* ribbon may bleed; page may not grow */
}
.md-hero-art__canvas {
  position: absolute; inset: -6% -4% -10% -4%;   /* bleed past every edge */
  z-index: 0; pointer-events: none;
}
.md-hero-art__canvas img {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 78%;
  display: block;
}
/* Readability scrim, weighted to the copy side only. */
.md-hero-art::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg,
    rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 34%,
    rgba(255,255,255,.62) 56%, rgba(255,255,255,.14) 78%, rgba(255,255,255,0) 100%);
}
.md-hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--rail); margin-inline: auto;
  padding-inline: var(--bleed-pad);
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem); align-items: center;
}
.md-hero-art .md-hero__title {
  font-size: clamp(2.6rem, 4.6vw, 4.4rem); line-height: 1.02;
  letter-spacing: -.035em; margin: 0 0 1.15rem;
}
.md-hero-art .md-hero__lede { font-size: clamp(1.05rem, 1.15vw, 1.28rem); margin: 0 0 1.9rem; max-width: 46ch; }
.md-hero-art .md-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.md-hero-art .md-hero__note { flex-basis: 100%; margin-top: .9rem; font-size: .92rem; color: var(--muted); }

/* Interface panel: large, dimensional, and clearly labelled illustrative. */
.md-hero-art .md-hero__media { width: 100%; }
.md-hero-art .md-ui {
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
  box-shadow: 0 2px 6px rgba(18,40,63,.06), 0 30px 70px -28px rgba(18,40,63,.34);
  border-radius: 16px;
}

@media (max-width: 1000px) {
  .md-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .md-hero-art { min-height: 0; }
  .md-hero-art .md-ui { transform: none; }
  .md-hero-art__canvas img { object-position: 62% 88%; }
  .md-hero-art::before {
    background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 54%, rgba(255,255,255,.35) 100%);
  }
}

/* Brand lockup: legible, not a footnote. */
.md-brand__temp { font-size: clamp(1.35rem, 1.5vw, 1.62rem); }
.md-brand__temp span { font-size: .58em; }


/* ---- How your business becomes a focused prospect list ---------------------
   CSS-only tabs. The radio inputs sit before .md-pl__ui so :checked ~ can reach
   the panels; the inputs stay focusable (never display:none) so keyboard users
   keep native arrow-key movement through the group. */
.md-pl__radio {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.md-pl__picker { border: 0; padding: 0; margin: 0 0 1.5rem; }
.md-pl__legend { padding: 0; margin: 0 0 .75rem; font-size: .9rem; color: var(--muted); }
.md-pl__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.md-pl__chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .5rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--line); background: transparent;
  color: var(--text); font-size: .9375rem; font-weight: 560;
  cursor: pointer; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.md-pl__chip:hover { border-color: var(--brand); color: var(--brand); }
/* The radios are grouped ahead of .md-pl__ui so :checked ~ can reach the panels,
   which means a chip is NOT the adjacent sibling of its input — `+` silently
   matched nothing and left the control with no selected state and no focus ring.
   Target the label by its `for` attribute through the general sibling instead. */
#pl-mfg:checked ~ .md-pl__ui label[for="pl-mfg"],
#pl-saas:checked ~ .md-pl__ui label[for="pl-saas"],
#pl-agency:checked ~ .md-pl__ui label[for="pl-agency"],
#pl-wholesale:checked ~ .md-pl__ui label[for="pl-wholesale"],
#pl-construction:checked ~ .md-pl__ui label[for="pl-construction"],
#pl-ecom:checked ~ .md-pl__ui label[for="pl-ecom"],
#pl-consulting:checked ~ .md-pl__ui label[for="pl-consulting"],
#pl-other:checked ~ .md-pl__ui label[for="pl-other"] {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
#pl-mfg:focus-visible ~ .md-pl__ui label[for="pl-mfg"],
#pl-saas:focus-visible ~ .md-pl__ui label[for="pl-saas"],
#pl-agency:focus-visible ~ .md-pl__ui label[for="pl-agency"],
#pl-wholesale:focus-visible ~ .md-pl__ui label[for="pl-wholesale"],
#pl-construction:focus-visible ~ .md-pl__ui label[for="pl-construction"],
#pl-ecom:focus-visible ~ .md-pl__ui label[for="pl-ecom"],
#pl-consulting:focus-visible ~ .md-pl__ui label[for="pl-consulting"],
#pl-other:focus-visible ~ .md-pl__ui label[for="pl-other"] {
  outline: none;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--brand);
}

.md-pl__body { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 900px) { .md-pl__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.md-pl__panel { display: none; }
#pl-mfg:checked          ~ .md-pl__ui .md-pl__panel--mfg,
#pl-saas:checked         ~ .md-pl__ui .md-pl__panel--saas,
#pl-agency:checked       ~ .md-pl__ui .md-pl__panel--agency,
#pl-wholesale:checked    ~ .md-pl__ui .md-pl__panel--wholesale,
#pl-construction:checked ~ .md-pl__ui .md-pl__panel--construction,
#pl-ecom:checked         ~ .md-pl__ui .md-pl__panel--ecom,
#pl-consulting:checked   ~ .md-pl__ui .md-pl__panel--consulting,
#pl-other:checked        ~ .md-pl__ui .md-pl__panel--other { display: block; }

.md-pl__facts { margin: 0 0 1.25rem; display: grid; gap: .9rem; }
.md-pl__facts dt { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .2rem; }
.md-pl__facts dd { margin: 0; color: var(--text); }
.md-pl__outlabel { margin: 0 0 .6rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.md-pl__outs { display: flex; flex-wrap: wrap; gap: .45rem; }
.md-pl__out {
  display: inline-flex; padding: .35rem .7rem; border-radius: 8px;
  background: var(--brand-wash); color: var(--brand-deep);
  font-size: .875rem; font-weight: 560;
}

.md-pl__flow { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.md-pl__step { display: flex; gap: .8rem; align-items: baseline; }
.md-pl__num { font-variant-numeric: tabular-nums; font-size: .8125rem; font-weight: 700; color: var(--brand); flex: 0 0 auto; }
.md-pl__stepbody { color: var(--muted); font-size: .9375rem; }
.md-pl__stepbody strong { color: var(--text); font-weight: 620; }

.md-pl__net { margin-top: clamp(1.5rem, 3vw, 2.25rem) !important; }
.md-pl__net svg { max-width: 426px; display: block; margin-inline: auto; }
.md-pl__qual {
  margin: 1.5rem 0 0; padding: .9rem 1.1rem;
  border-left: 3px solid var(--line); border-radius: 0 8px 8px 0;
  background: var(--surface, transparent);
  color: var(--muted); font-size: .9375rem; max-width: 74ch;
}


/* ---- Hero globe -------------------------------------------------------------
   Layering inside the hero is explicit:
     0  background ribbon artwork (.md-hero-art__canvas)
     1  readability scrim (.md-hero-art::before) and this unit's halo
     2  hero copy and the complete globe unit (.md-hero__inner)

   .md-hero__media is a generic 4:3 media frame with overflow:hidden, a wash
   background, a radius and a tint overlay. Inherited, it cropped the sphere and
   caption. All of it is reset here. */
.md-hero__media--globe {
  position: relative;
  isolation: isolate;                 /* the halo cannot leak into the page */
  aspect-ratio: auto;
  overflow: visible;
  background: none;
  border-radius: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: .8rem;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px);
}
.md-hero__media--globe::after { content: none; }

/* Quiet milky halo behind the WHOLE unit — sphere, instruction and disclaimer.
   The rainbow ribbon may frame the globe but must never cross it or sit behind
   the text, which is what made the instruction and caption hard to read. */
.md-hero__media--globe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                        /* under the unit, still above the ribbon */
  pointer-events: none;
  border-radius: 46% / 40%;
  background: radial-gradient(closest-side,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.92) 58%,
    rgba(255,255,255,.72) 82%,
    rgba(255,255,255,0) 100%);
}

.md-globe {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;                /* reserves the box: mounting shifts nothing */
  display: grid; place-items: center;
}
.md-globe__canvas,
.md-globe__fallback {
  grid-area: 1 / 1;
  width: 100%; height: 100%;
  display: block;
  border-radius: 50%;
  /* pan-y keeps vertical page scrolling and pinch-zoom; horizontal and diagonal
     drags belong to the globe. */
  touch-action: pan-y;
}
.md-globe__canvas { cursor: grab; }
.md-globe__canvas:active { cursor: grabbing; }
.md-globe__canvas:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--brand);
}
.md-globe__hint {
  margin: 0; font-size: .875rem; font-weight: 560; color: var(--brand-deep);
  text-align: center;
}
.md-globe__cap {
  margin: 0; max-width: 42ch; text-align: center;
  font-size: .8125rem; color: var(--muted);
}
.md-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

@media (max-width: 1000px) {
  /* The globe unit has to clear the fold. With the previous spacing it began at
     y=610 in an 844px viewport and was cut in half by the first screen edge. */
  .md-globe { width: min(100%, 260px); }
  .md-hero__media--globe { padding: 14px 12px 18px; margin-bottom: 0; }
  .md-hero-art { min-height: 0; padding-block: 1rem 1.5rem; }
  .md-hero__inner { gap: 1.1rem; }
  .md-hero-art .md-hero__lede { margin-bottom: 1.1rem; }
  .md-hero-art .md-hero__note { margin-top: .5rem; }
}

/* Keep the ribbon clear of the globe column on desktop: it may frame, not cross. */
@media (min-width: 1001px) {
  .md-hero-art__canvas img { object-position: 22% 78%; }
}

/* Record card in its own section now that the globe holds the hero slot. */
.md-record__card { max-width: 720px; }