/* ==========================================================================
   Command — hero console, the picture on every screen, domain by domain,
   tasking and dispatch, Lock Down, the notch, the phone as a remote,
   people in command, call to action. Scoped under .page-command.

   The map is one SVG sector (#cm-base in the sprite at the top of <main>),
   drawn in a 1200 × 700 space and reused with <use>. Overlays are drawn in
   the same coordinates, so they stay on target at every crop.
   ========================================================================== */

.page-command .cm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* The V-mark as a mask, in the current colour */
.page-command .cm-vmark {
  display: inline-block;
  width: 1.45em;
  height: 1em;
  flex: none;
  background: currentColor;
  -webkit-mask: url("../../assets/brand/v-mark-mask.svg") center / contain no-repeat;
  mask: url("../../assets/brand/v-mark-mask.svg") center / contain no-repeat;
}

/* Instrument type used across the page */
.page-command .cm-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ================================================================= Hero */
.cm-hero { padding: calc(var(--header-h) + clamp(56px, 7vw, 112px)) 0 clamp(48px, 6vw, 96px); }
.cm-hero .bg-glow { top: -40%; opacity: 0.85; }
.cm-hero .eyebrow { color: var(--ink-3); }
.cm-hero__title { max-width: 13.5ch; font-size: clamp(3rem, 0.7rem + 6.4vw, 7.2rem); line-height: 0.94; }
.cm-hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-top: 30px;
}
.cm-hero__lead { max-width: 600px; margin-top: 0; }
.cm-hero__actions { flex: none; margin-top: 0; }
@media (max-width: 1024px) {
  .cm-hero__row { flex-direction: column; align-items: flex-start; }
}

/* The frame rises flat as it comes into view (scroll-linked tilt) */
.cm-console-wrap {
  --t: clamp(0, (var(--p, 1) - 0.08) / 0.3, 1);
  margin-top: clamp(44px, 5.5vw, 80px);
  transform-origin: 50% 0;
  transform: perspective(2200px) rotateX(calc((1 - var(--t)) * 11deg)) scale(calc(0.955 + var(--t) * 0.045));
  will-change: transform;
}
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .cm-console-wrap { transform: none; will-change: auto; }
}

/* ------------------------------------------------------------- Console */
.page-command .cm-console {
  --c-line: rgb(255 255 255 / 0.08);
  --c-ink: #F5F5F7;
  --c-ink-2: rgb(245 245 247 / 0.72);
  --c-ink-3: rgb(245 245 247 / 0.5);
  --c-alert: var(--crimson-300);
  aspect-ratio: auto;
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: var(--r-xl);
  background: #07070A;
  color: var(--c-ink);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.09),
    0 1px 0 rgb(255 255 255 / 0.06) inset,
    0 70px 120px -60px rgb(0 0 0 / 0.95),
    0 40px 110px -60px rgb(var(--crimson-rgb) / 0.45);
}

.cm-console__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  height: 50px;
  padding: 0 14px 0 20px;
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0));
}
.cm-console__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  white-space: nowrap;
}
.cm-console__brand .cm-vmark { color: var(--crimson-300); font-size: 12px; }
.cm-console__tabs { display: flex; justify-content: center; gap: 2px; }
.cm-tab {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 34px;
  color: var(--c-ink-3);
  transition: color var(--t-fast), background-color var(--t-fast);
}
.cm-tab span { color: rgb(245 245 247 / 0.32); transition: color var(--t-fast); }
.cm-tab b { font-weight: inherit; }
.cm-tab::after { /* thin rule under the chosen domain */
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 3px;
  height: 1px;
  background: rgb(245 245 247 / 0.6);
  transform: scaleX(0);
  transition: transform var(--t-med) var(--ease-out);
}
.cm-tab.is-preview { color: var(--c-ink); background: rgb(255 255 255 / 0.05); }
@media (hover: hover) { .cm-tab:hover { color: var(--c-ink); background: rgb(255 255 255 / 0.05); } }   /* no highlight left behind after a tap */
.cm-tab[aria-pressed="true"] { color: var(--c-ink); }
.cm-tab[aria-pressed="true"] span { color: var(--crimson-300); }
@media (hover: hover) { .cm-tab:hover span { color: var(--crimson-300); } }
.cm-tab[aria-pressed="true"]::after { transform: scaleX(1); }
.cm-tab:focus-visible { box-shadow: 0 0 0 2px var(--night-ink); border-radius: 8px; }
.cm-console__sector {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  white-space: nowrap;
}
.cm-console__pause {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--c-ink-2);
  border: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.04);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
@media (hover: hover) { .cm-console__pause:hover { color: #fff; background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.3); } }
.cm-console__pause vm-icon { grid-area: 1 / 1; }
.cm-console__pause vm-icon[name="play"], .cm-console__pause[aria-pressed="true"] vm-icon[name="pause"] { display: none; }
.cm-console__pause[aria-pressed="true"] vm-icon[name="play"] { display: inline-flex; }
.cm-console__pause[hidden] { display: none; }

.cm-console__body {
  display: grid;
  grid-template-columns: minmax(210px, 0.78fr) minmax(0, 3.3fr) minmax(236px, 1fr);
  height: auto;   /* grows with the alerts and the Recommended card; never clips them */
  min-height: clamp(440px, 38vw, 590px);
}
.cm-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.cm-panel__head b { font-weight: 500; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }

/* Assets */
.cm-console__assets { padding: 18px 16px 16px 20px; overflow: hidden; }
.cm-assets li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-areas: "icon name" "icon state";
  column-gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.05);
  transition: opacity var(--t-med) var(--ease-soft);
}
.cm-assets vm-icon { grid-area: icon; margin-top: 2px; color: var(--c-ink-3); transition: color var(--t-med); }
.cm-assets__name { grid-area: name; font-family: var(--font-text); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--c-ink); }
.cm-assets__state { grid-area: state; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-assets li.is-focus vm-icon { color: var(--crimson-300); }
.cm-assets li.is-moving .cm-assets__state { color: var(--crimson-300); }
.has-focus .cm-assets li:not(.is-focus), .has-focus .cm-alerts li:not(.is-focus) { opacity: 0.32; }

/* Map */
.cm-console__map {
  position: relative;
  overflow: hidden;
  border-inline: 1px solid var(--c-line);
  background: #06080B;
}
.cm-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.cm-console__hud .hud__read { top: 20px; font-size: 10px; }
.cm-console__hud .hud__read--tl { left: 28px; }
.cm-console__hud::before { background: radial-gradient(120% 95% at 50% 50%, transparent 62%, rgb(0 0 0 / 0.5)); }
.cm-north {
  position: absolute;
  top: 22px;
  right: 30px;
  display: grid;
  justify-items: center;
  gap: 4px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgb(255 255 255 / 0.8);
}
.cm-north i { width: 1px; height: 16px; background: linear-gradient(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0)); }
.cm-scale {
  position: absolute;
  right: 30px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.7);
}
.cm-scale i { width: 56px; height: 5px; border: 1px solid rgb(255 255 255 / 0.6); border-top: 0; }

/* Map artwork styles (inline SVG overlays) */
.cm-layer { transition: opacity 520ms var(--ease-soft); }
.cm-map.has-focus .cm-layer:not(.is-focus) { opacity: 0.12; }
.page-command .cm-lbl { font: 500 12px/1 var(--font-mono); letter-spacing: 0.14em; fill: rgb(255 255 255 / 0.66); }
.page-command .cm-lbl--hi { fill: #FFFFFF; }
.page-command .cm-lbl--alert { fill: var(--crimson-300); }
.cm-pipe { fill: none; stroke: #FFFFFF; stroke-opacity: 0; stroke-width: 3; transition: stroke-opacity 520ms var(--ease-soft); }
.cm-layer.is-focus .cm-pipe { stroke-opacity: 0.85; }
.cm-ticks { fill: none; stroke: rgb(255 255 255 / 0.42); stroke-width: 1.2; }
.cm-power { fill: none; stroke: rgb(255 255 255 / 0.36); stroke-dasharray: 3 5; }
.cm-node { fill: #0B0B0E; stroke: rgb(255 255 255 / 0.85); stroke-width: 1.4; }
.cm-node--alert { fill: rgb(200 16 46 / 0.5); stroke: var(--crimson-300); stroke-width: 1.8; }
.cm-dish { fill: none; stroke: #FFFFFF; stroke-width: 1.4; stroke-linecap: round; }
.cm-swath { fill: none; stroke: #FFFFFF; stroke-opacity: 0.035; stroke-width: 76; }
.cm-track { fill: none; stroke: rgb(255 255 255 / 0.42); stroke-dasharray: 2 6; }
.cm-link { fill: none; stroke: rgb(255 255 255 / 0.4); stroke-dasharray: 2 4; transition: opacity 400ms; }
.cm-link--alert { stroke: var(--crimson-300); stroke-opacity: 0.8; }
.cm-sat rect { fill: #FFFFFF; }
.cm-sat .cm-sat__panel { fill: rgb(255 255 255 / 0.1); stroke: #FFFFFF; stroke-width: 1.2; }
.cm-change { fill: rgb(200 16 46 / 0.14); stroke: var(--crimson-300); stroke-width: 2; }
.cm-sgrid rect { fill: none; stroke: rgb(255 255 255 / 0.3); stroke-dasharray: 3 3; }
.cm-team { fill: #0B0B0E; stroke: #FFFFFF; stroke-width: 1.6; }
.cm-team__x { stroke: #FFFFFF; stroke-width: 1.6; }
.cm-vessel rect { fill: #06080B; stroke: #FFFFFF; stroke-width: 1.6; }
.cm-vec { stroke: rgb(255 255 255 / 0.55); stroke-width: 1.2; }
.cm-vessel--own rect { fill: #FFFFFF; }
.cm-vessel--alert > rect { fill: rgb(200 16 46 / 0.5); stroke: var(--crimson-300); stroke-width: 2; }
.cm-tag rect { fill: var(--crimson); }
.page-command .cm-tag text { font: 600 11px/1 var(--font-mono); letter-spacing: 0.12em; fill: #FFFFFF; }
.cm-tag--line rect { fill: rgb(6 6 8 / 0.78); stroke: var(--crimson-300); stroke-width: 1.2; }
.cm-ring { fill: none; stroke: rgb(255 255 255 / 0.3); stroke-dasharray: 2 5; }
.cm-hex { fill: #0B0B0E; stroke: #FFFFFF; stroke-width: 1.6; }
.cm-loiter { fill: none; stroke: rgb(255 255 255 / 0.28); stroke-dasharray: 3 5; }
.cm-route { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 4000; filter: drop-shadow(0 0 6px rgb(255 255 255 / 0.45)); }
.cm-uav__body { fill: #FFFFFF; }
.cm-cone { fill: rgb(255 255 255 / 0.07); stroke: rgb(255 255 255 / 0.2); stroke-width: 1; }
.cm-flag__box { fill: rgb(200 16 46 / 0.16); stroke: var(--crimson-300); stroke-width: 2.4; }
.cm-flag.is-inspected .cm-flag__box { fill: rgb(255 255 255 / 0.06); stroke: #FFFFFF; }
.cm-flag .cm-tag { transition: opacity 400ms; }

/* Side: alerts + recommendation */
.cm-console__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 18px 16px;
  min-height: 0;
}
.cm-alerts li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: "sev what" "sev where";
  column-gap: 10px;
  padding: 9px 0 9px 10px;
  border-bottom: 1px solid rgb(255 255 255 / 0.05);
  border-left: 1px solid transparent;
  transition: opacity var(--t-med) var(--ease-soft);
}
.cm-alerts li.is-top { border-left-color: var(--crimson-300); }
.cm-alerts__sev { grid-area: sev; align-self: start; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-3); }
.cm-alerts li.is-top .cm-alerts__sev { color: var(--crimson-300); }
.cm-alerts__what { grid-area: what; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--c-ink); }
.cm-alerts__where { grid-area: where; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink-3); }

.cm-rec {
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.025));
  border: 1px solid rgb(255 255 255 / 0.1);
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.cm-rec[data-state="pending"] { border-color: rgb(255 72 99 / 0.45); box-shadow: none; }
.cm-rec__kicker { font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: none; color: var(--night-ink-3); }
.cm-rec[data-state="enroute"] .cm-rec__kicker, .cm-rec[data-state="onstation"] .cm-rec__kicker { color: var(--c-ink-3); }
.cm-rec__title { margin-top: 6px; font-family: var(--font-sans); font-size: 18px; font-weight: 650; letter-spacing: -0.02em; color: #fff; }
.cm-rec__rows { display: grid; gap: 4px; margin: 10px 0 0; }
.cm-rec__rows div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.cm-rec__rows dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-3); padding-top: 2px; }
.cm-rec__rows dd { margin: 0; color: var(--c-ink-2); text-align: right; }
.cm-rec__actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; margin-top: 14px; }
.cm-rec__btn {
  height: 44px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink);
  border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.04);
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-exit) var(--ease-out);
}
@media (hover: hover) { .cm-rec__btn:hover { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.32); } }
.cm-rec__btn:active { transform: scale(0.97); }
.cm-rec__btn--go { border-color: transparent; background: var(--crimson); color: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / 0.2) inset; }
@media (hover: hover) { .cm-rec__btn--go:hover { background: var(--crimson-400); border-color: transparent; } }
.cm-rec__btn--wide { grid-column: 1 / -1; }
.cm-rec__btn:focus-visible { box-shadow: 0 0 0 2px #07070A, 0 0 0 4px var(--night-ink); border-radius: 10px; }
.cm-rec__btn[hidden] { display: none; }
.cm-rec__btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.cm-rec__status { margin-top: 10px; min-height: 2.6em; font-size: 12px; line-height: 1.35; color: var(--c-ink-3); }
.cm-rec[data-state="enroute"] .cm-rec__status, .cm-rec[data-state="onstation"] .cm-rec__status { color: var(--c-ink-2); }

.cm-console__foot {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 38px;
  padding: 0 20px;
  border-top: 1px solid var(--c-line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  white-space: nowrap;
  overflow: hidden;
}
.cm-console__foot > span { display: inline-flex; align-items: center; gap: 10px; }
.cm-console__foot > span:first-child { margin-right: auto; }
.cm-console__foot i { font-style: normal; color: rgb(245 245 247 / 0.32); }
.cm-console__foot em { width: 10px; height: 1px; background: rgb(255 255 255 / 0.2); }

@media (max-width: 1180px) {
  .cm-console__body { grid-template-columns: minmax(0, 1fr) minmax(236px, 0.36fr); height: auto; min-height: clamp(440px, 54vw, 580px); }
  .cm-alerts li:nth-child(n + 3) { display: none; }
  .cm-console__assets { display: none; }
  .cm-console__map { border-left: 0; }
  .cm-console__sector { display: none; }
  .cm-console__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (max-width: 900px) {
  .cm-console__foot > span:not(:first-child) { display: none; }
}
@media (min-width: 761px) and (max-width: 880px) {   /* six tabs clear the label and the pause button */
  .cm-console__tabs { gap: 0; }
  .cm-console__tabs .cm-tab { padding-inline: 6px; letter-spacing: 0.06em; }
}
@media (max-width: 760px) {
  .page-command .cm-console { border-radius: var(--r-lg); }
  .cm-console__bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 46px auto; height: auto; padding: 0 10px 0 16px; row-gap: 0; }
  .cm-console__tabs { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 -10px 0 -16px; border-top: 1px solid var(--c-line); }
  .cm-tab { justify-content: center; height: 38px; line-height: 38px; border-radius: 0; font-size: 12px; padding: 0 6px; }
  .cm-tab::after { left: 22%; right: 22%; }
  .cm-tab:nth-child(-n + 3) { border-bottom: 1px solid var(--c-line); }
  .cm-tab:not(:nth-child(3n)) { border-right: 1px solid var(--c-line); }
  .cm-console__body { display: block; height: auto; }
  .cm-console__map { height: min(118vw, 460px); border: 0; }
  .cm-console__side { padding: 14px; }
  .cm-console__alerts { display: none; }
  .cm-rec__title { font-size: 17px; }
  .cm-console__hud .hud__read, .cm-scale { display: none; }
  .cm-north { right: 24px; top: 18px; }
  .page-command .cm-map use { font-size: 17px; letter-spacing: 2.4px; }
  .page-command .cm-map .cm-lbl { font-size: 18px; }
  .cm-map .cm-tag { transform: scale(1.4); transform-box: fill-box; transform-origin: 0 100%; }
  .cm-map .cm-lbl--wide { display: none; }
  .cm-console__foot { display: none; }
}

/* ============================================================== Overview */
.cm-overview { overflow: hidden; }
.cm-screens {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  aspect-ratio: 16 / 8.6;
}
.cm-screens__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
.cm-screens__label::before { content: ""; width: 14px; height: 1px; background: var(--crimson); }

.cm-wall { position: absolute; left: 7%; right: 7%; top: 0; text-align: center; }
.cm-wall__screen {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 7.2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 18px;
  overflow: hidden;
  background: #07070A;
  border: 7px solid #141417;
  box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / 0.1), 0 50px 100px -50px rgb(0 0 0 / 0.55);
  text-align: left;
}
.cm-mini-bar {
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  height: 4.2cqw;
  padding: 0 1.8cqw;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  font-family: var(--font-mono);
  font-size: 0.9cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.42);
  white-space: nowrap;
}
.cm-mini-bar b { font-weight: 500; color: rgb(255 255 255 / 0.75); margin-right: auto; }
.cm-mini-bar .cm-vmark { color: var(--crimson-300); font-size: 1.1cqw; }
.cm-mini-bar .is-on { color: #fff; }
.cm-wall__body { display: grid; grid-template-columns: 13% minmax(0, 1fr) 17%; min-height: 0; }
.cm-mini-map { display: block; width: 100%; height: 100%; overflow: hidden; }
.page-command use { font-size: 12px; letter-spacing: 1.8px; }
.cm-map, .cm-flow__svg, .cm-app__map svg { overflow: hidden; }
.cm-mini-list { display: grid; align-content: start; gap: 1.1cqw; padding: 1.6cqw 1.4cqw; }
.cm-mini-list i { display: block; height: 0.7cqw; border-radius: 1px; background: rgb(255 255 255 / 0.12); }
.cm-mini-list i:nth-child(odd) { width: 70%; }
.cm-mini-list--alerts i { height: 2.4cqw; border-radius: 0.4cqw; background: rgb(255 255 255 / 0.06); border-left: 2px solid rgb(255 255 255 / 0.2); }
.cm-mini-list--alerts i.is-hot { border-left-color: var(--crimson-300); background: rgb(200 16 46 / 0.2); }
.cm-mini-list--alerts i:nth-child(odd) { width: auto; }

.cm-laptop { position: absolute; left: 0; bottom: 0; width: 45%; text-align: center; }
.cm-laptop .macbook { transform: translate3d(0, calc((0.5 - var(--p, 0.5)) * 50px), 0); }
.cm-laptop__screen { container-type: inline-size; }
.cm-laptop__app { position: absolute; inset: 0; display: grid; grid-template-columns: 21% minmax(0, 1fr); padding-top: 4.4%; background: #09090C; }
.cm-laptop__side { display: grid; align-content: start; gap: 1.8cqw; padding: 3cqw 2.4cqw; border-right: 1px solid rgb(255 255 255 / 0.07); background: rgb(255 255 255 / 0.025); }
.cm-laptop__side b { margin-top: 1cqw; font: 500 1.5cqw/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.35); }
.cm-laptop__side i { height: 1.3cqw; border-radius: 1px; background: rgb(255 255 255 / 0.1); }
.cm-laptop__side i.is-on { background: rgb(200 16 46 / 0.55); }
.cm-laptop__wing {
  position: absolute;
  z-index: 4;
  top: 0;
  left: calc(50% - 7.25% - 4.2%);
  width: 4.4%;
  height: 3.9%;
  display: grid;
  place-items: center start;
  padding-left: 0.4%;
  border-radius: 0 0 0 8px;
  background: #000;
}
.cm-laptop__wing img { width: 62%; aspect-ratio: 1; height: auto; object-fit: contain; }

.cm-handset { position: absolute; right: 2%; bottom: -3%; width: 16%; text-align: center; }
.cm-handset__phone { --w: 100%; width: 100%; margin-inline: auto; transform: translate3d(0, calc((0.5 - var(--p, 0.5)) * 110px), 0); }
.cm-handset__screen { container-type: inline-size; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #050506; }
.cm-handset__title { padding: 17cqw 7cqw 3cqw; font: 700 8cqw/1 var(--font-sans); letter-spacing: -0.03em; color: #fff; }
.cm-handset__card { margin: 0 4cqw 7cqw; padding: 4.5cqw; border-radius: 7cqw; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.1); display: grid; gap: 1.5cqw; text-align: left; }
.cm-handset__card small { font: 500 3.8cqw/1 var(--font-label); letter-spacing: 0; text-transform: none; color: var(--night-ink-3); }
.cm-handset__card b { font: 650 5.6cqw/1.1 var(--font-sans); color: #fff; letter-spacing: -0.02em; }
.cm-handset__card span { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5cqw; margin-top: 2cqw; }
.cm-handset__card em { display: grid; place-items: center; height: 10cqw; border-radius: 99px; font: 600 4cqw/1 var(--font-text); font-style: normal; color: #fff; border: 1px solid rgb(255 255 255 / 0.2); }
.cm-handset__card em.is-go { background: var(--crimson); border-color: transparent; }

@media (max-width: 760px) {
  .cm-screens { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.6fr); gap: 28px 18px; align-items: end; }
  .cm-wall { position: relative; inset: auto; grid-column: 1 / -1; }
  .cm-wall__screen { border-width: 4px; border-radius: 12px; }
  .cm-laptop, .cm-handset { position: relative; inset: auto; width: auto; }
  .cm-laptop .macbook, .cm-handset__phone { transform: none; }
  .cm-screens__label { font-size: 0.64rem; letter-spacing: 0.1em; }
}

/* Facts */
.cm-facts { margin-top: clamp(64px, 8vw, 120px); }
.cm-fact { padding-top: 24px; border-top: 1px solid var(--line); }
.cm-fact vm-icon { color: var(--accent-text); }
.cm-fact h3 { margin-top: 18px; font-size: var(--fs-h4); }
.cm-fact p { margin-top: 8px; color: var(--ink-3); font-size: var(--fs-small); }
.cm-fact .link-arrow { margin-top: 14px; font-size: var(--fs-small); }

/* Domain by domain */
.cm-domains { margin-top: clamp(80px, 10vw, 150px); }
.cm-domains__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(32px, 4vw, 52px); }
.cm-domains__title { margin-top: 16px; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: var(--tracking-display); font-weight: 700; }
.cm-domains__lead { max-width: 400px; color: var(--ink-3); }
.cm-domains__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); margin: 0; padding: 0; list-style: none; }
.cm-domains__grid > li { display: flex; }
.cm-dcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out), border-color var(--t-fast) var(--ease-soft);
}
.cm-dcard:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 30px 60px -32px rgb(0 0 0 / 0.35); }
.cm-dcard__top { display: flex; align-items: center; justify-content: space-between; padding-right: 44px; }
.cm-dcard__top vm-icon { color: var(--ink-3); transition: color var(--t-fast) var(--ease-soft); }
.cm-dcard:hover .cm-dcard__top vm-icon { color: var(--accent-text); }
.cm-dcard__num { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; color: var(--accent-text); }
.cm-dcard__num b { margin-left: 8px; font-weight: 500; text-transform: uppercase; color: var(--ink); }
.cm-dcard__on { margin-top: 10px; font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 650; line-height: 1.24; letter-spacing: -0.02em; color: var(--ink); }
.cm-dcard__act { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-3); }
.cm-dcard__act i { display: block; margin-bottom: 6px; font-style: normal; font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.cm-dcard__go {
  position: absolute;
  top: clamp(18px, 2vw, 24px);
  right: clamp(18px, 2vw, 24px);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.cm-dcard:hover .cm-dcard__go { border-color: var(--ink); color: var(--ink); }
@media (max-width: 1024px) {
  .cm-domains__head { flex-direction: column; align-items: flex-start; }
  .cm-domains__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .cm-domains__grid { grid-template-columns: minmax(0, 1fr); } }

/* ================================================== Tasking and dispatch */
.cm-flow { padding-bottom: var(--section-y); }
.cm-flow .section-head { margin-bottom: clamp(24px, 3vw, 40px); }
.cm-flow__runway { position: relative; height: 430vh; }
.cm-flow__stage {
  position: sticky;
  top: calc(var(--header-h-compact) + 24px);
  height: calc(100vh - var(--header-h-compact) - 48px);
  height: calc(100svh - var(--header-h-compact) - 48px);
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.6fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
}
.cm-flow__steps { display: grid; gap: 4px; counter-reset: none; }
.cm-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 8px;
  padding: 14px 0 14px 18px;
  border-left: 1px solid var(--line-2);
  opacity: 0.36;
  grid-template-rows: auto 0fr;   /* the text row opens and closes as a fraction, so the two rows in motion mirror each other */
  transition: opacity 500ms var(--ease-soft), grid-template-rows 600ms var(--ease-out);
}
.cm-step::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--crimson);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 700ms var(--ease-out);
}
.cm-step.is-done { opacity: 0.62; }
.cm-step.is-on { opacity: 1; grid-template-rows: auto 1fr; }
.cm-step.is-on::before { transform: scaleY(1); }
.cm-step__num { grid-row: 1 / span 2; padding-top: 5px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; color: var(--ink-3); }
.cm-step__name { font-size: var(--fs-h4); }
.cm-step__text { min-height: 0; overflow: hidden; margin-top: 0; font-size: var(--fs-small); color: var(--ink-3); transition: margin-top 600ms var(--ease-out); }
.cm-step.is-on .cm-step__text { margin-top: 6px; }

.cm-flow__art {
  position: relative;
  justify-self: end;
  width: min(100%, calc((100vh - var(--header-h-compact) - 80px) * 4 / 3));
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  background: #06080B;
  box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / 0.08), 0 60px 110px -60px rgb(0 0 0 / 0.75);
  font-family: var(--font-mono);
  color: #fff;
}
.cm-flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cm-flow__svg use { font-size: 6px; letter-spacing: 1px; }
.cm-flow__svg .cm-lbl { font-size: 6.5px; letter-spacing: 0.16em; }
.cm-f-pipe { fill: none; stroke: #FFFFFF; stroke-opacity: 0.2; stroke-width: 4; }
.cm-f-preview { fill: none; stroke: #FFFFFF; stroke-opacity: 0; stroke-width: 1.6; stroke-dasharray: 0 4000; transition: stroke-opacity 500ms; }
.cm-f-route { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 4000; filter: drop-shadow(0 0 5px rgb(255 255 255 / 0.5)); }
.cm-f-box { fill: rgb(200 16 46 / 0.18); stroke: var(--crimson-300); stroke-width: 2; opacity: 0; transform: scale(1.6); transform-box: fill-box; transform-origin: center; transition: opacity 500ms var(--ease-soft), transform 800ms var(--ease-spring), fill 500ms, stroke 500ms; }
.cm-f-cone { fill: rgb(255 255 255 / 0.1); stroke: rgb(255 255 255 / 0.35); stroke-width: 0.8; opacity: 0; transition: opacity 600ms; }
.cm-f-flag .cm-lbl { opacity: 0; transition: opacity 500ms; }
.cm-f-team__ring { fill: none; stroke: #FFFFFF; stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity 500ms; }

.cm-f-hud { position: absolute; inset: 0; pointer-events: none; }
.cm-f-hud .hud__corner { width: 18px; height: 18px; }
.cm-f-read { position: absolute; top: 22px; left: 28px; font-size: 10px; line-height: 1.7; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.8); }
.cm-f-tag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translateY(-100%);
  padding: 4px 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--crimson);
  color: #fff;
  opacity: 0;
  transition: opacity 500ms var(--ease-soft), background-color 500ms;
}

.cm-f-card {
  position: absolute;
  top: 5%;
  right: 4%;
  width: min(40%, 290px);
  padding: 16px 16px 14px;
  border-radius: 14px;
  background: rgb(12 12 15 / 0.86);
  border: 1px solid rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.9);
  font-family: var(--font-text);
  opacity: 0;
  transform: translate3d(12px, 0, 0);
  transition: opacity 600ms var(--ease-soft), transform 800ms var(--ease-out), border-color 500ms;
}
.cm-f-card__kicker { display: flex; justify-content: space-between; align-items: center; font: 500 var(--fs-label)/1 var(--font-label); letter-spacing: var(--tracking-label); text-transform: none; color: var(--night-ink-3); }
.cm-f-card__state { position: relative; display: grid; }
.cm-f-card__state em { grid-area: 1 / 1; justify-self: end; font-style: normal; padding: 3px 6px; border: 1px solid rgb(255 255 255 / 0.2); color: rgb(255 255 255 / 0.8); opacity: 0; transition: opacity 400ms; }
.cm-f-card__title { margin-top: 10px; font: 650 17px/1.15 var(--font-sans); letter-spacing: -0.02em; }
.cm-f-card__rows { display: grid; gap: 4px; margin: 10px 0 0; }
.cm-f-card__rows div { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.cm-f-card__rows dt { font: 500 9.5px/1.6 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); }
.cm-f-card__rows dd { margin: 0; color: rgb(255 255 255 / 0.8); }
.cm-f-card__stamp { position: relative; display: flex; align-items: center; gap: 8px; min-height: 30px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgb(255 255 255 / 0.1); font-size: 12px; color: #fff; opacity: 0; transition: opacity 500ms; }
.cm-f-card__stamp vm-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--crimson); color: #fff; }
.cm-f-card__stamp span { transition: opacity 400ms; }
.cm-f-card__stamp .is-closed { position: absolute; left: 28px; opacity: 0; }

.cm-f-sent {
  position: absolute;
  right: 4%;
  top: calc(5% + 236px);
  display: grid;
  gap: 6px;
  width: min(40%, 290px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cm-f-sent li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgb(12 12 15 / 0.78);
  border: 1px solid rgb(255 255 255 / 0.12);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.85);
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 500ms var(--ease-soft), transform 700ms var(--ease-out);
}
.cm-f-sent li + li { transition-delay: 120ms; }
.cm-f-sent vm-icon { color: var(--crimson-300); }

.cm-f-feed {
  position: absolute;
  left: 27%;
  bottom: 6%;
  width: 34%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.3);
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.9);
  opacity: 0;
  transform: scale(0.94);
  transform-origin: 50% 100%;
  transition: opacity 600ms var(--ease-soft), transform 800ms var(--ease-out);
}
.cm-f-feed img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; transform: scale(1.3); }
.cm-f-feed__read { position: absolute; top: 8px; left: 10px; font-size: 8.5px; line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 0.8); }
.cm-f-feed__box { position: absolute; left: 52%; top: 40%; width: 18%; height: 30%; border: 1.5px solid var(--crimson-300); box-shadow: 0 0 18px rgb(255 72 99 / 0.45); }

/* Steps, cumulative */
.cm-flow__art.s0 .cm-f-box { opacity: 1; transform: none; }
.cm-flow__art.s0 .cm-f-tag, .cm-flow__art.s0 .cm-f-flag .cm-lbl { opacity: 1; }
.cm-flow__art.s1 .cm-f-card { opacity: 1; transform: none; }
.cm-flow__art.s1 .cm-f-preview { stroke-opacity: 0.55; }
.cm-flow__art.s1 .cm-f-card__state .is-rec { opacity: 1; }
.cm-flow__art.s2 .cm-f-card__state .is-rec { opacity: 0; }
.cm-flow__art.s2 .cm-f-card__state .is-auth { opacity: 1; }
.cm-flow__art.s2 .cm-f-card__stamp { opacity: 1; }
.cm-flow__art.s2 .cm-f-card { border-color: rgb(255 255 255 / 0.3); }
.cm-flow__art.s3 .cm-f-preview { stroke-opacity: 0; }
.cm-flow__art.s3 .cm-f-sent li { opacity: 1; transform: none; }
.cm-flow__art.s3 .cm-f-team__ring { opacity: 0.8; }
.cm-flow__art.s4 .cm-f-cone { opacity: 1; }
.cm-flow__art.s4 .cm-f-feed { opacity: 1; transform: none; }
.cm-flow__art.s5 .cm-f-box { fill: rgb(255 255 255 / 0.06); stroke: #FFFFFF; }
.cm-flow__art.s5 .cm-f-tag { background: rgb(255 255 255 / 0.16); }
.cm-flow__art.s5 .cm-f-card__state .is-auth { opacity: 0; }
.cm-flow__art.s5 .cm-f-card__state .is-closed { opacity: 1; }
.cm-flow__art.s5 .cm-f-card__stamp .is-auth { opacity: 0; }
.cm-flow__art.s5 .cm-f-card__stamp .is-closed { opacity: 1; }
.cm-flow__art.s5 .cm-f-card__kicker > span:first-child { color: rgb(255 255 255 / 0.5); }
.cm-flow__art.s5 .cm-f-cone, .cm-flow__art.s5 .cm-f-feed { opacity: 0; }
.cm-flow__art.s5 .cm-f-sent li { opacity: 0.45; }

/* Small screens and reduced motion: no pinning, the finished picture */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .cm-flow__runway { height: auto; }
  .cm-flow__stage { position: static; height: auto; grid-template-columns: minmax(0, 1fr); padding-block: 8px 0; }
  .cm-flow__art { order: -1; justify-self: center; width: min(100%, 1040px); }
  .cm-step, .cm-step.is-on { opacity: 1; grid-template-rows: auto auto; }
  .cm-step::before { transform: scaleY(1); background: var(--line-2); }
  .cm-step__text { margin-top: 6px; }
  .cm-flow__art .cm-f-box { opacity: 1; transform: none; }
  .cm-flow__art .cm-f-tag, .cm-flow__art .cm-f-flag .cm-lbl, .cm-flow__art .cm-f-cone { opacity: 1; }
  .cm-flow__art .cm-f-card, .cm-flow__art .cm-f-card__stamp { opacity: 1; transform: none; }
  .cm-flow__art .cm-f-card__state .is-auth { opacity: 1; }
  .cm-flow__art .cm-f-card__state .is-rec, .cm-flow__art .cm-f-card__state .is-closed { opacity: 0; }
  .cm-flow__art .cm-f-card__stamp .is-closed { opacity: 0; }
  .cm-flow__art .cm-f-card__stamp .is-auth { opacity: 1; }
  .cm-flow__art .cm-f-feed { opacity: 1; transform: none; }
  .cm-flow__art .cm-f-sent { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  .cm-flow__stage { padding-top: 24px; }
  .cm-flow__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; }
}
@media (max-width: 640px) {
  .cm-flow__art { aspect-ratio: 4 / 4.6; }
  .cm-f-card { top: auto; bottom: 4%; right: 4%; left: 4%; width: auto; padding: 12px 14px; }
  .cm-f-card__rows { display: none; }
  .cm-f-card__title { font-size: 15px; margin-top: 8px; }
  .cm-f-card__stamp { margin-top: 8px; padding-top: 8px; min-height: 26px; font-size: 11px; }
  .cm-f-feed { left: auto; right: 4%; top: 16%; bottom: auto; width: 46%; }
  .cm-f-tag { left: 32.9%; }
  .cm-f-read { top: 18px; left: 24px; font-size: 9px; }
}

/* Drones, teams, alerts */
.cm-moves { margin-top: clamp(64px, 8vw, 112px); }
.cm-move { display: flex; flex-direction: column; gap: 12px; padding-top: 26px; border-top: 1px solid var(--line-2); }
.cm-move__icon { display: inline-flex; color: var(--ink); }
.cm-move h3 { margin-top: 8px; font-size: var(--fs-h3); }
.cm-move p { color: var(--ink-3); }
.cm-move .link-arrow { margin-top: auto; padding-top: 8px; }

/* ============================================================ Lock Down */
.cm-lock { overflow: hidden; }
.cm-lock::after { /* the room darkens a little once something is locked down */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 70% at 74% 52%, rgb(24 0 6 / 0.55), transparent 72%);
  opacity: 0;
  transition: opacity 1s var(--ease-soft);
  pointer-events: none;
}
.cm-lock.is-locked::after { opacity: 1; }
.cm-lock__grid { align-items: center; }
.cm-lock__title { max-width: 11ch; font-size: clamp(2.6rem, 0.9rem + 4.4vw, 5.4rem); }
.cm-lock .lead { color: rgb(255 255 255 / 0.88); }
.cm-lock__scopes { display: grid; gap: 0; margin: 30px 0 0; border-top: 1px solid rgb(255 255 255 / 0.24); }
.cm-lock__scopes div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / 0.18); }
.cm-lock__scopes dt { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: #fff; padding-top: 2px; }
.cm-lock__scopes dd { margin: 0; font-size: var(--fs-small); color: rgb(255 255 255 / 0.94); }
.cm-lock__note { font-size: var(--fs-micro); color: rgb(255 255 255 / 0.92); max-width: 520px; }

.cm-ld {
  position: relative;
  padding: clamp(22px, 2.8vw, 34px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 80% at 100% 0%, rgb(var(--crimson-rgb) / 0.12), transparent 55%),
    linear-gradient(180deg, #111114, #08080A);
  border: 1px solid rgb(255 255 255 / 0.1);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.07) inset, 0 60px 110px -50px rgb(40 0 8 / 0.95);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 600ms, box-shadow 800ms var(--ease-out);
}
.cm-ld::after { /* the hardened glow */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 70% at 50% 0%, rgb(var(--crimson-rgb) / 0.35), transparent 70%);
  opacity: 0;
  transition: opacity 900ms var(--ease-soft);
}
.cm-ld.is-on { border-color: rgb(255 72 99 / 0.55); box-shadow: 0 0 0 1px rgb(255 72 99 / 0.25), 0 60px 110px -50px rgb(40 0 8 / 0.95), 0 0 80px -20px rgb(var(--crimson-rgb) / 0.55); }
.cm-ld.is-on::after { opacity: 1; }
.cm-ld__head { display: flex; align-items: center; justify-content: space-between; }
.cm-ld__kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.cm-ld__kicker vm-icon { color: var(--accent-text); }
.cm-ld__chip { transition: background-color 400ms, color 400ms, border-color 400ms; }
.cm-ld.is-on .cm-ld__chip { --tick: #fff; background: var(--crimson); border-color: transparent; color: #fff; }

.cm-ld__scopes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 22px;
  padding: 4px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.08);
}
.cm-ld__scopes button {
  height: 38px;
  border-radius: 10px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-3);
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
@media (hover: hover) { .cm-ld__scopes button:hover { color: var(--ink); } }
.cm-ld__scopes button[aria-checked="true"] { color: var(--ink); background: rgb(255 255 255 / 0.12); box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 4px 12px -6px rgb(0 0 0 / 0.8); }
.cm-ld__scopes button:focus-visible { box-shadow: 0 0 0 2px var(--night-ink); border-radius: 10px; }
.cm-ld__scopes button:disabled { cursor: not-allowed; opacity: 0.5; }

.cm-ld__core {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  padding: 20px 0;
  border-block: 1px solid rgb(255 255 255 / 0.08);
}
.cm-ld__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: var(--ink-2);
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.1);
  transition: background-color 500ms var(--ease-out), color 500ms, border-color 500ms, box-shadow 700ms var(--ease-out);
}
.cm-ld__icon vm-icon { grid-area: 1 / 1; transition: opacity 300ms, transform 500ms var(--ease-spring); }
.cm-ld__icon vm-icon[name="lock"] { opacity: 0; transform: scale(0.7); }
.cm-ld.is-on .cm-ld__icon { color: #fff; background: var(--crimson); border-color: transparent; box-shadow: none; }
.cm-ld.is-on .cm-ld__icon vm-icon[name="lock"] { opacity: 1; transform: none; }
.cm-ld.is-on .cm-ld__icon vm-icon[name="lock-open"] { opacity: 0; transform: scale(0.7); }
.cm-ld__scope { font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.cm-ld__state { margin-top: 6px; font-family: var(--font-sans); font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem); font-weight: 650; letter-spacing: -0.025em; color: var(--ink); }
.cm-ld__sub { margin-top: 4px; font-size: var(--fs-small); color: var(--ink-3); }

.cm-ld__switch {
  position: relative;
  width: 62px;
  height: 36px;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.16);
  border: 1px solid rgb(255 255 255 / 0.12);
  transition: background-color 400ms var(--ease-soft), border-color 400ms;
}
.cm-ld__switch i { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / 0.4); transition: transform 500ms var(--ease-spring); }
.cm-ld__switch[aria-checked="true"] { background: var(--crimson); border-color: rgb(255 255 255 / 0.2); }
.cm-ld__switch[aria-checked="true"] i { transform: translateX(26px); }
@media (hover: hover) { .cm-ld__switch:hover { border-color: rgb(255 255 255 / 0.3); } }
.cm-ld__switch:focus-visible { box-shadow: 0 0 0 3px #0B0B0E, 0 0 0 5px var(--night-ink); border-radius: 99px; }

.cm-ld__listhead { margin-top: 22px; font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); transition: color 400ms; }
.cm-ld.is-on .cm-ld__listhead { color: var(--accent-text); }
.cm-ld__list { display: grid; gap: 0; margin-top: 10px; }
.cm-ld__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  font-size: var(--fs-small);
  color: var(--ink-3);
  transition: color 400ms var(--ease-soft);
  transition-delay: calc(var(--k, 0) * 90ms);
}
.cm-ld__list li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 3px;
  background: transparent center / 11px no-repeat;
  transition: background-color 400ms, border-color 400ms;
  transition-delay: inherit;
}
.cm-ld.is-on .cm-ld__list li { color: var(--ink); }
.cm-ld.is-on .cm-ld__list li::before {
  border-color: transparent;
  background-color: var(--crimson);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.cm-ld__stamp { margin-top: 16px; min-height: 1.5em; font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.cm-ld.is-on .cm-ld__stamp { color: var(--ink-2); }

.cm-ld__confirm {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  background: rgb(5 5 6 / 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: cm-fade 300ms var(--ease-soft);
}
.cm-ld__confirm[hidden] { display: none; }
.cm-ld__sheet {
  width: 100%;
  padding: 22px;
  border-radius: 22px;
  background: #16161A;
  border: 1px solid rgb(255 255 255 / 0.12);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.9);
  animation: cm-rise 520ms var(--ease-out);
}
.cm-ld__ctitle { font-family: var(--font-sans); font-size: 1.2rem; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.cm-ld__ctext { margin-top: 8px; font-size: var(--fs-small); color: var(--ink-3); }
.cm-ld__cactions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
@keyframes cm-fade { from { opacity: 0; } }
@keyframes cm-rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } }

/* ============================================================== Notch */
.cm-notch-sec { padding-top: clamp(40px, 6vw, 96px); }
.cm-notch-sec__head { align-items: end; margin-bottom: clamp(24px, 4vw, 48px); }
/* The demo itself (a full-bleed band, with the menu, Lock Down, voice and display extras): css/notch-demo.css */
.cm-notch-facts { margin-top: clamp(56px, 7vw, 96px); }

/* ======================================================== Phone remote */
.cm-remote { overflow: hidden; }
.cm-remote__grid { align-items: center; }
.cm-remote__title { max-width: 11ch; }
.cm-remote__list { display: grid; gap: 18px; margin-top: 34px; }
.cm-remote__list li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-3); font-size: var(--fs-small); line-height: 1.5; }
.cm-remote__list vm-icon { color: var(--accent-text); margin-top: 1px; }
.cm-remote__list b { color: var(--ink); font-weight: 650; }
.cm-inline-link { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cm-inline-link:hover { text-decoration-thickness: 2px; }

.cm-remote__stage { position: relative; display: grid; place-items: center; padding: 20px 0 30px; }
.cm-remote__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 80%;
  height: 34%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(var(--crimson-rgb) / 0.35), transparent);
  filter: blur(24px);
  z-index: -1;
}
.cm-remote__phone { --w: clamp(270px, 25vw, 330px); }

.cm-app {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 17% 5% 4.5%;
  background:
    radial-gradient(90% 50% at 50% 0%, rgb(var(--crimson-rgb) / 0.2), transparent 70%),
    #050506;
  color: #F5F5F7;
  text-align: left;
}
.cm-app__top { display: flex; align-items: flex-start; justify-content: space-between; padding-inline: 1.5cqw; }
.cm-app__title { font: 700 9cqw/1 var(--font-sans); letter-spacing: -0.035em; }
.cm-app__sector { margin-top: 1.6cqw; font: 500 3.4cqw/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); }
.cm-app__mark { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 3cqw; background: var(--crimson); color: #fff; font-size: 3.4cqw; }
.cm-app__map { position: relative; flex: 1 1 auto; min-height: 30cqw; border-radius: 6cqw; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.1); }
.cm-app__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cm-app__map use { font-size: 8px; letter-spacing: 1.2px; }
.cm-app__maptag { position: absolute; left: 4cqw; top: 4cqw; padding: 1.2cqw 2.2cqw; font: 500 3cqw/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; background: var(--crimson); color: #fff; }
.cm-a-route { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 4000; }
.cm-a-box { fill: rgb(200 16 46 / 0.2); stroke: var(--crimson-300); stroke-width: 2.4; }
.cm-app__card { position: relative; padding: 4.6cqw; border-radius: 6cqw; background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.1); }
.cm-app__kicker { display: flex; align-items: center; justify-content: space-between; font: 500 3.2cqw/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.55); }
.cm-app__badge { padding: 1cqw 1.8cqw; border: 1px solid rgb(255 72 99 / 0.6); color: #FF7A8F; transition: color 300ms, border-color 300ms, background-color 300ms; }
.cm-app[data-state="approved"] .cm-app__badge, .cm-app[data-state="onstation"] .cm-app__badge { border-color: transparent; background: rgb(255 255 255 / 0.14); color: #fff; }
.cm-app__task { margin-top: 2.8cqw; font: 650 6.2cqw/1.1 var(--font-sans); letter-spacing: -0.025em; }
.cm-app__why { margin-top: 1.6cqw; font-size: 3.9cqw; line-height: 1.4; color: rgb(255 255 255 / 0.62); }
.cm-app__actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 2.6cqw; margin-top: 4cqw; }
.cm-app__btn { min-height: 40px; height: 13cqw; border-radius: 99px; font-size: max(13px, 4.4cqw); font-weight: 600; color: #fff; border: 1px solid rgb(255 255 255 / 0.2); background: rgb(255 255 255 / 0.05); transition: background-color var(--t-fast), transform var(--t-exit) var(--ease-out), opacity 300ms; }
@media (hover: hover) { .cm-app__btn:hover { background: rgb(255 255 255 / 0.12); } }
.cm-app__btn:active { transform: scale(0.96); }
.cm-app__btn--go { background: var(--crimson); border-color: transparent; box-shadow: none; }
@media (hover: hover) { .cm-app__btn--go:hover { background: var(--crimson-400); } }
.cm-app__btn--wide { grid-column: 1 / -1; }
.cm-app__btn:focus-visible { box-shadow: 0 0 0 2px #050506, 0 0 0 4px var(--night-ink); border-radius: 99px; }
.cm-app__btn[hidden] { display: none; }
.cm-app__btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.cm-app__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgb(10 10 12 / 0.9);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-soft);
}
.cm-app__face vm-icon { transition: transform 700ms var(--ease-spring), color 300ms; }
.cm-app[data-state="confirm"] .cm-app__face { opacity: 1; }
.cm-app[data-state="confirm"] .cm-app__face vm-icon { transform: scale(1.08); color: #FF7A8F; }
.cm-app__status { margin-top: 3cqw; min-height: 2.8em; font-size: max(11.5px, 3.6cqw); line-height: 1.4; color: rgb(255 255 255 / 0.62); }
.cm-app__dock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding: 3cqw 2cqw 0; border-top: 1px solid rgb(255 255 255 / 0.08); }
.cm-app__dock span { display: grid; justify-items: center; gap: 1.4cqw; font: 500 3cqw/1 var(--font-text); color: rgb(255 255 255 / 0.55); }
.cm-app__dock span:first-child { color: #fff; }
.cm-app__dock vm-icon { color: inherit; }
@media (max-width: 900px) { .cm-remote__stage { order: 2; } }

/* ==================================================== People in command */
.cm-people { overflow: hidden; }
.cm-people .bg-mark { right: -12%; bottom: -30%; width: min(900px, 84vw); }
.cm-people__grid { align-items: center; }
.cm-people__title { max-width: 12ch; font-size: clamp(2.4rem, 0.9rem + 4.2vw, 5.1rem); }
.cm-people__checks { margin-top: 32px; }
.cm-people__checks li { color: var(--ink-2); }

.cm-record {
  position: relative;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #0F0F12, #09090B);
  border: 1px solid rgb(255 255 255 / 0.09);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 50px 100px -50px rgb(0 0 0 / 0.95);
  font-family: var(--font-mono);
}
.cm-record__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgb(255 255 255 / 0.1); font-size: var(--fs-nano); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.cm-record__head span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.cm-record__head vm-icon { color: var(--accent-text); }
.cm-record__list { display: grid; margin-top: 4px; }
.cm-record__list li {
  display: grid;
  grid-template-columns: 26px 108px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0 13px 12px;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  border-left: 1px solid rgb(255 255 255 / 0.12);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.cm-record__list li.is-person { border-left-color: #fff; }
.js .cm-record__list li { opacity: 0; transform: translate3d(-8px, 0, 0); transition: opacity 600ms var(--ease-soft), transform 700ms var(--ease-out); transition-delay: calc(var(--k, 0) * 140ms + 250ms); }
.js .cm-record.is-in .cm-record__list li { opacity: 1; transform: none; }
.cm-record__n { color: var(--ink-3); }
.cm-record__verb { font-family: var(--font-label); text-transform: none; letter-spacing: var(--tracking-label); font-size: var(--fs-label); font-weight: var(--weight-medium); color: var(--ink-2); }
.cm-record__list li:not(.is-person) .cm-record__verb { color: var(--ink-3); }
.cm-record__what { font-family: var(--font-text); font-size: var(--fs-small); letter-spacing: -0.005em; color: var(--ink); }
.cm-record__who { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.cm-record__list li.is-person .cm-record__who { color: #fff; }
.cm-record__foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: var(--fs-nano); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.cm-record__foot span { display: inline-flex; align-items: center; gap: 8px; }
.cm-record__foot span::before { content: ""; width: 1px; height: 14px; background: #fff; }
.cm-record__foot span:last-child::before { background: rgb(255 255 255 / 0.25); }
.cm-record__foot i { width: 14px; }
@media (max-width: 560px) {
  .cm-record__list li { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: 4px; }
  .cm-record__verb { grid-column: 2; }
  .cm-record__who { grid-column: 3; grid-row: 1; }
  .cm-record__what { grid-column: 2 / -1; }
}

/* Three disciplines */
.cm-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(72px, 9vw, 128px); }
.cm-three__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "num go" "name name" "line line";
  gap: 6px 12px;
  padding: 24px 0 8px;
  border-top: 1px solid var(--line-2);
  transition: border-color var(--t-med);
}
.cm-three__item::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--crimson); transition: width 900ms var(--ease-out); }
.cm-three__item:hover::before, .cm-three__item.is-here::before { width: 100%; }
.cm-three__num { grid-area: num; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-3); letter-spacing: 0.08em; }
.cm-three__name { grid-area: name; font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: 650; letter-spacing: -0.025em; color: var(--ink); }
.cm-three__line { grid-area: line; font-size: var(--fs-small); color: var(--ink-3); }
.cm-three__item > vm-icon { grid-area: go; color: var(--ink-3); transition: transform var(--t-med) var(--ease-out), color var(--t-fast); }
.cm-three__item:hover > vm-icon { transform: translate(3px, -3px); color: var(--ink); }
.cm-three__here { grid-area: go; font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 760px) { .cm-three { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================== CTA */
.cm-cta { overflow: hidden; padding-block: clamp(64px, 8vw, 128px); }
.cm-cta::after { /* dissolves into the night footer, no hard edge */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: clamp(120px, 16vw, 230px);
  background: linear-gradient(180deg, rgb(5 5 6 / 0), rgb(42 2 10 / 0.55) 45%, var(--night));
  pointer-events: none;
  z-index: -1;
}
.cm-cta .bg-mark { right: -7%; bottom: auto; top: 6%; width: min(820px, 72vw); }
.cm-cta__inner { position: relative; }
.cm-cta__title { margin-top: 20px; max-width: 13ch; font-size: var(--fs-display); line-height: 0.95; letter-spacing: var(--tracking-display); color: #fff; }
.cm-cta__lead { margin-top: 26px; max-width: 600px; color: rgb(255 255 255 / 0.88); }
.cm-cta__actions { margin-top: 38px; --cluster-gap: 12px; }
.cm-cta__mail { margin-top: 28px; font-size: var(--fs-small); color: rgb(255 255 255 / 0.92); }
.cm-cta__mail a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cm-cta__mail a:hover { text-decoration-thickness: 2px; }

/* ====================================================== Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js .cm-record__list li { opacity: 1; transform: none; }
  .cm-laptop .macbook, .cm-handset__phone { transform: none; }
  .cm-console__pause { display: none; }
}