/* ============================================================
   Fox Licensing — product page
   Tokens come from mindfox-redesign.css. No new colours: the only
   accent on this page is --orange, and every state that needs to be
   told apart is told apart by glyph and wording, never by hue alone.
   Prefixed ml-* so it cannot collide with fp-*, fw-*, fi-* or fx-*.
   ============================================================ */

/* ── Reveal (matches the other product pages) ── */
.mf-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.mf-reveal.is-visible { opacity: 1; transform: translateY(0); }
.mf-reveal-delay-1 { transition-delay: 0.12s; }
.mf-reveal-delay-2 { transition-delay: 0.24s; }

/* ── Shared bits ── */
.ml-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.ml-eyebrow::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--orange);
  opacity: 0.8;
}
.ml-eyebrow__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 123, 28, 0.14);
  animation: pulse-dot 2s ease-in-out infinite;
}
.ml-eyebrow--dotted::before { display: none; }

.ml-rule {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

/* The page's own material is monospace: keys, file extensions, states and
   API names are all things a developer reads character by character. */
.ml-mono {
  font-family: var(--font-mono);
}

/* Bootstrap's reboot paints a bare <code> #d63384 — a pink that belongs to no
   part of this palette, and it was showing up in the air-gap quote and the seal.
   Colour only here: the chip treatment stays where it is declared, further down,
   so the hardening cards do not turn into a row of orange pills. */
.ml-hero code,
.ml-section code,
.ml-cta code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--orange-light);
}
.ml-section { padding: var(--section-padding) 0; background: var(--bg-primary); }
.ml-section--alt { background: var(--bg-secondary); }

.ml-head { max-width: 780px; margin: 0 auto clamp(34px, 5vw, 56px); text-align: center; }
.ml-head h2 {
  font-size: clamp(1.65rem, 3.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.ml-head p {
  font-size: clamp(0.94rem, 1.9vw, 1.04rem);
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
}
.ml-head .ml-eyebrow { justify-content: center; }

/* A caption that says what a drawn thing is. Load-bearing on this page. */
.ml-cap {
  margin: 14px 0 0;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
}

/* ══ HERO ══════════════════════════════════════════════════ */
.ml-hero {
  position: relative;
  padding: calc(var(--section-padding) + 80px) 0 var(--section-padding);
  overflow: hidden;
  background: var(--bg-primary);
}
.ml-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 16% 14%, rgba(255, 123, 28, 0.13) 0%, transparent 66%),
    radial-gradient(ellipse 45% 40% at 90% 86%, rgba(255, 123, 28, 0.06) 0%, transparent 60%);
  pointer-events: none;
}
.ml-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);   /* same split as every product hero */
  gap: 54px;
  align-items: center;
}
.ml-hero__content { max-width: 620px; }
.ml-hero__content h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
/* Same specificity trap the sibling pages document: `.ml-hero__content p` is
   (0,1,1), so a bare `.ml-hero__sub` (0,1,0) would lose and render as body copy. */
.ml-hero__content .ml-hero__sub {
  font-size: clamp(1rem, 2.2vw, 1.28rem);
  font-weight: 600;
  color: var(--orange);
  margin-bottom: 18px;
}
.ml-hero__content p {
  font-size: clamp(0.97rem, 2vw, 1.08rem);
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 26px;
}
.ml-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ══ THE RIG — one key, four SKUs ══════════════════════════
   The page's signature. Every value in it is what the platform really
   does; the switch is the product's central commercial claim made
   operable. Nothing in it moves the page: the capability list has a
   fixed row count, and the two lines that can wrap render all four
   variants stacked in one grid cell so the box always measures its
   tallest state at any width, font size or zoom.
   ────────────────────────────────────────────────────────── */
.ml-rig {
  position: relative;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
}
.ml-rig__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 15px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
.ml-rig__app { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); }
.ml-rig__app b { color: var(--orange); font-weight: 800; }
.ml-rig__where {
  font-size: 0.72rem;
  color: var(--text-secondary);
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--border);
}

/* Segmented control: the licence type */
.ml-sku {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 15px 0;
}
.ml-sku__btn {
  flex: 1 1 auto;
  min-width: 96px;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.ml-sku__btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.ml-sku__btn[aria-pressed="true"] {
  background: var(--orange);
  border-color: var(--orange);
  color: #0A0A0C;
}
.ml-sku__btn:focus-visible {
  outline: 2px solid var(--orange-light);
  outline-offset: 2px;
}

.ml-rig__body { padding: 16px 15px 18px; }

/* The key itself */
.ml-key {
  display: block;
  font-size: clamp(0.82rem, 2.4vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  word-break: break-all;
  margin-bottom: 12px;
}
.ml-key__prefix { color: var(--orange); }

.ml-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ml-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
  font-size: 0.74rem;
  color: var(--text-secondary);
}
.ml-chip b { color: var(--text-primary); font-weight: 600; }

.ml-rig__split {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.ml-rig__split::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

/* Capability list — fixed rows, only the glyph changes */
.ml-caps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 16px;
}
.ml-caps li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  transition: color var(--transition);
}
.ml-caps li.is-on { color: var(--text-primary); }
.ml-caps__glyph {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 0.62rem;
  font-weight: 800;
  /* Not --text-muted: measured 3.17:1 on the card, and this glyph is the only
     thing distinguishing a locked feature from an unlocked one. */
  color: var(--text-secondary);
}
.ml-caps li.is-on .ml-caps__glyph {
  border-color: var(--orange);
  background: var(--orange-glow);
  color: var(--orange);
}

/* All-states-rendered stack: the box measures its tallest variant, so
   switching SKU cannot shift a single pixel of the page below it. */
.ml-stack { display: grid; margin-top: 16px; }
.ml-stack--tight { margin-top: 0; }
.ml-stack > * {
  grid-area: 1 / 1;
  visibility: hidden;
  margin: 0;
}
.ml-stack > .is-shown { visibility: visible; }

.ml-note {
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.ml-note b { color: var(--text-primary); font-weight: 600; }

.ml-state {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.76rem;
  color: var(--text-secondary);
}
.ml-state__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 123, 28, 0.14);
  align-self: center;
}
.ml-state__val { color: var(--text-primary); font-weight: 700; }

/* ══ LICENCE TYPES ═════════════════════════════════════════ */
.ml-types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.ml-card {
  position: relative;
  overflow: hidden;
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.ml-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
  transform: translateY(-3px);
}
.ml-card:hover .ml-rule { opacity: 1; }
.ml-card__tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.ml-card h3 {
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 10px;
}
.ml-card > p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.ml-card ul { list-style: none; margin: 0; padding: 0; }
.ml-card ul li {
  position: relative;
  padding-left: 16px;
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 7px;
}
.ml-card ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.75;
}
.ml-card ul li:last-child { margin-bottom: 0; }
.ml-card code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--orange-light);
  background: rgba(255, 123, 28, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
}

/* The code-block styles that lived here are gone with the block itself — no SDK
   source on a public page. `.ml-seal` carries the claim in prose instead. */

/* ══ IN PLAIN WORDS ════════════════════════════════════════
   This page sells to a product owner, not to their developer, and the rest of it
   uses six words that mean nothing outside software licensing. They get defined
   once, in the reader's language, before anything relies on them. The trade term
   rides along in brackets so the engineer who reads it later can map the two.
   ────────────────────────────────────────────────────────── */
.ml-plain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ml-term {
  position: relative;
  overflow: hidden;
  padding: 22px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  transition: border-color var(--transition), background var(--transition);
}
.ml-term:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.ml-term:hover .ml-rule { opacity: 1; }
.ml-term h3 {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 4px;
}
.ml-term__also {
  display: block;
  font-size: 0.74rem;
  color: var(--orange);
  margin-bottom: 11px;
}
.ml-term p { font-size: 0.88rem; line-height: 1.72; color: var(--text-secondary); margin: 0; }

/* Says out loud which part of a section is for whom, so a non-technical reader
   knows the line of version numbers below is not for them. */
.ml-forwhom {
  display: block;
  text-align: center;
  margin: clamp(26px, 3.5vw, 34px) auto 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ml-forwhom + .ml-targets { margin-top: 12px; }

/* ══ SEATS ═════════════════════════════════════════════════ */
.ml-seats {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.ml-pool {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
}
.ml-pool__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
.ml-pool__title { font-size: 0.84rem; font-weight: 700; color: var(--text-primary); }
.ml-pool__count { font-size: 0.74rem; color: var(--text-secondary); }
.ml-pool__count b { color: var(--orange); font-weight: 800; }
.ml-pool__body { padding: 16px; }

.ml-seatrow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.ml-seat {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  padding: 11px 8px;
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
}
.ml-seat__ico {
  width: 20px; height: 20px;
  margin: 0 auto 7px;
  color: var(--text-muted);
  display: block;
}
.ml-seat__host {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-secondary);
  word-break: break-all;
}
.ml-seat__tag {
  display: block;
  margin-top: 5px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Free / Held is small text that carries the whole point of the panel, so it
     stays on --text-secondary rather than the muted grey. */
  color: var(--text-secondary);
}
.ml-seat.is-held {
  border-style: solid;
  border-color: rgba(255, 123, 28, 0.45);
  background: var(--bg-card-hover);
}
.ml-seat.is-held .ml-seat__ico { color: var(--orange); }
.ml-seat.is-held .ml-seat__host { color: var(--text-primary); }
.ml-seat.is-held .ml-seat__tag { color: var(--orange); }
.ml-seat.is-focus { box-shadow: 0 0 0 2px rgba(255, 123, 28, 0.35); }

.ml-seatctl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.ml-seatctl__btn {
  min-height: 44px;
  padding: 11px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.ml-seatctl__btn:hover:not(:disabled) { border-color: var(--border-hover); background: var(--bg-card-hover); }
.ml-seatctl__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ml-seatctl__btn:focus-visible { outline: 2px solid var(--orange-light); outline-offset: 2px; }

/* The log reserves both of its lines from first paint. */
.ml-log {
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--text-secondary);
  min-height: calc(2 * 1.7em + 22px);
}
.ml-log b { color: var(--orange); font-weight: 700; }

.ml-nodelock { padding: 24px 22px; }
.ml-nodelock h3 { font-size: 1.06rem; font-weight: 700; margin-bottom: 12px; }
.ml-nodelock p { font-size: 0.88rem; line-height: 1.72; color: var(--text-secondary); margin-bottom: 14px; }
.ml-nodelock p:last-child { margin-bottom: 0; }
.ml-nodelock strong { color: var(--text-primary); font-weight: 600; }

/* ══ AIR GAP — a real sequence, so it is numbered ══════════ */
.ml-air {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.ml-step {
  position: relative;
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
/* A solid token rather than orange at 0.55 opacity: an opacity here would sit
   below 3:1 while still computing as full-strength orange, so it would pass a
   contrast check that the eye fails. */
.ml-step__num {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--orange-dark);
  line-height: 1;
  margin-bottom: 12px;
}
.ml-step__file {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--orange);
  background: rgba(255, 123, 28, 0.08);
  border: 1px solid rgba(255, 123, 28, 0.28);
  padding: 3px 9px;
  border-radius: 5px;
  margin-bottom: 12px;
}
.ml-step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 9px; }
.ml-step p { font-size: 0.86rem; line-height: 1.7; color: var(--text-secondary); margin: 0; }
.ml-step__quote {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid rgba(255, 123, 28, 0.4);
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--text-secondary);
  font-style: italic;
}

.ml-seal {
  max-width: 860px;
  margin: clamp(26px, 3.5vw, 38px) auto 0;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--text-secondary);
}
.ml-seal strong { color: var(--text-primary); font-weight: 600; }

/* ══ EIGHT STATES ══════════════════════════════════════════ */
.ml-states {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.ml-st {
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}
.ml-st--run { border-left-color: var(--orange); }
/* The plain phrase is the heading and the SDK's own state name is the small line
   under it — the novice reads the card, the engineer still gets the exact token. */
.ml-st__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  word-break: break-word;
}
.ml-st__code {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin: 0 0 12px 16px;
  word-break: break-word;
}
/* Runs / refuses is carried by the glyph and by the wording, never by hue. */
.ml-st__mark {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--text-muted);
}
.ml-st--run .ml-st__mark { background: var(--orange); border-color: var(--orange); }
/* --text-muted measured 3.17:1 here at 10.9px. These labels are structural, so
   they go to --text-secondary and lean on size and letterspacing to recede. */
.ml-st dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 3px;
}
.ml-st dd {
  margin: 0 0 11px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.ml-st dd:last-child { margin-bottom: 0; }
.ml-st dd b { color: var(--text-primary); font-weight: 600; }
.ml-st dl { margin: 0; }

/* ══ HARDENING ═════════════════════════════════════════════ */
.ml-hard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ml-hard__card {
  position: relative;
  overflow: hidden;
  padding: 22px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  transition: border-color var(--transition), background var(--transition);
}
.ml-hard__card:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.ml-hard__card:hover .ml-rule { opacity: 1; }
.ml-hard__card--wide { grid-column: span 3; }
.ml-hard__ico {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 123, 28, 0.3);
  background: var(--orange-glow);
  color: var(--orange);
  margin-bottom: 14px;
}
.ml-hard__ico svg { width: 18px; height: 18px; }
.ml-hard__card h3 { font-size: 0.98rem; font-weight: 700; margin-bottom: 9px; }
.ml-hard__card p { font-size: 0.86rem; line-height: 1.72; color: var(--text-secondary); margin: 0; }
.ml-hard__card p + p { margin-top: 10px; }
.ml-hard__card code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--orange-light);
  word-break: break-word;
}
.ml-hard__card--wide p { max-width: 78ch; }

/* ══ INTEGRATION ═══════════════════════════════════════════ */
.ml-integ {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.ml-integ__card {
  position: relative;
  overflow: hidden;
  padding: 22px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.ml-integ__card--lead { border-color: rgba(255, 123, 28, 0.35); }
.ml-integ__badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0A0A0C;
  background: var(--orange);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.ml-integ__card h3 { font-size: 0.98rem; font-weight: 700; margin-bottom: 8px; }
.ml-integ__card p { font-size: 0.85rem; line-height: 1.68; color: var(--text-secondary); margin: 0; }
.ml-integ__meta {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  /* Same 3.17:1 failure as .ml-st dt — the install-time estimate is content. */
  color: var(--text-secondary);
}

.ml-targets {
  max-width: 900px;
  margin: clamp(26px, 3.5vw, 38px) auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.ml-target {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-secondary);
}
.ml-target b { color: var(--text-primary); font-weight: 700; }

.ml-manual {
  max-width: 900px;
  margin: clamp(26px, 3.5vw, 38px) auto 0;
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}
.ml-manual h3 { font-size: 1.06rem; font-weight: 700; margin-bottom: 10px; }
.ml-manual p { font-size: 0.87rem; line-height: 1.72; color: var(--text-secondary); margin: 0; }
.ml-manual ul { list-style: none; margin: 0; padding: 0; }
.ml-manual ul li {
  position: relative;
  padding-left: 17px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.ml-manual ul li:last-child { margin-bottom: 0; }
.ml-manual ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 1px;
  background: var(--orange);
}

/* ══ TWO COMMERCIAL MODELS ═════════════════════════════════ */
.ml-models {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.ml-model {
  position: relative;
  overflow: hidden;
  padding: 30px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.ml-model--lead {
  border-color: rgba(255, 123, 28, 0.35);
  box-shadow: var(--shadow-orange);
}
.ml-model h3 { font-size: 1.24rem; font-weight: 800; margin-bottom: 10px; }
.ml-model__sub {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}
.ml-model > p { font-size: 0.9rem; line-height: 1.75; color: var(--text-secondary); margin-bottom: 16px; }
.ml-model ul { list-style: none; margin: 0 0 22px; padding: 0; }
.ml-model ul li {
  position: relative;
  padding-left: 24px;
  font-size: 0.87rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.ml-model ul li:last-child { margin-bottom: 0; }
.ml-model ul li svg {
  position: absolute;
  left: 0; top: 0.18em;
  width: 15px; height: 15px;
  color: var(--orange);
}

/* ══ CTA ═══════════════════════════════════════════════════ */
.ml-cta {
  position: relative;
  padding: var(--section-padding) 0;
  overflow: hidden;
  background: var(--bg-secondary);
}
.ml-cta__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(255, 123, 28, 0.12) 0%, transparent 65%);
  pointer-events: none;
}
.ml-cta__inner { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }
.ml-cta__inner h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 14px;
}
.ml-cta__inner p {
  font-size: clamp(0.94rem, 1.9vw, 1.05rem);
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 26px;
}
.ml-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ══ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .ml-types  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-integ  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-hard   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-hard__card--wide { grid-column: span 2; }
  .ml-plain  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the hero stacks where every product hero does */
  .ml-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .ml-hero__content { max-width: 100%; }
}

@media (max-width: 980px) {
  .ml-seats { grid-template-columns: minmax(0, 1fr); }
  .ml-air { grid-template-columns: minmax(0, 1fr); }
  .ml-manual { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .ml-hero { padding: calc(var(--section-padding) + 58px) 0 var(--section-padding); }
}

@media (max-width: 760px) {
  .ml-models { grid-template-columns: minmax(0, 1fr); }
  .ml-seatrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .ml-types  { grid-template-columns: minmax(0, 1fr); }
  .ml-integ  { grid-template-columns: minmax(0, 1fr); }
  .ml-states { grid-template-columns: minmax(0, 1fr); }
  .ml-hard   { grid-template-columns: minmax(0, 1fr); }
  .ml-plain  { grid-template-columns: minmax(0, 1fr); }
  .ml-hard__card--wide { grid-column: span 1; }
  .ml-caps { grid-template-columns: minmax(0, 1fr); }
  .ml-sku__btn { min-width: 0; flex: 1 1 44%; }
  .ml-seatrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-seatctl__btn { flex: 1 1 100%; }
}

/* ══ REDUCED MOTION ════════════════════════════════════════
   The switch and the seat demo still work; they just arrive
   instantly instead of transitioning. */
@media (prefers-reduced-motion: reduce) {
  .mf-reveal { opacity: 1; transform: none; transition: none; }
  .ml-eyebrow__dot { animation: none; }
  .ml-card,
  .ml-hard__card,
  .ml-seat,
  .ml-sku__btn,
  .ml-caps li { transition: none; }
  .ml-card:hover { transform: none; }
}