/* ==========================================================================
   The Operator's Map — Cohort 02
   Grammar: continuous world (worldflight). One fixed canvas, seven legs, copy
   arriving at waypoints, and a map that is the nav.

   The page is climbed: it lands at its own bottom and progress runs toward
   scrollY 0. Nothing here depends on that except the map, which reads its own
   climb variable, and the copy windows, which live in the markup.

   Do not restyle .sc-world, .sc-world__seg, or [data-sc-copy] opacity. Those
   are the mechanism.
   ========================================================================== */

:root {
  /* Six roles, one accent. The world is photographic, so the canvas only shows
     at the very first paint and behind the grain. */
  --sc-canvas:     #0A101C;
  --sc-surface:    #111A2B;
  --sc-ink:        #F4F1EA;
  --sc-ink-soft:   #AEB8C9;
  --sc-accent:     #DAB039;
  --sc-accent-ink: #0F1726;

  --sc-font-display: 'Playfair Display', Georgia, serif;
  --sc-font-text:    'DM Sans', system-ui, sans-serif;
  --om-mono: 'DM Mono', ui-monospace, monospace;

  --om-hair: rgba(174, 184, 201, 0.28);
  --om-climb: 0;
}

html body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  overflow-x: hidden;
}

/* ---- scrims ------------------------------------------------------------
   Copy lands at BOTH ends of the frame here, so a bottom-only band leaves the
   top uncovered on exactly the blocks anchored high. Two bands, each shaped to
   where copy actually sits, and neither is a child of the text it protects:
   the verification pass hides a copy block and everything inside it to
   photograph the frame underneath. */

.om-scrim {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 0;
}

.om-scrim--bottom {
  bottom: 0;
  height: 68%;
  background: linear-gradient(to top,
    rgba(6, 10, 18, 0.95) 0%,
    rgba(6, 10, 18, 0.86) 22%,
    rgba(6, 10, 18, 0.56) 46%,
    rgba(6, 10, 18, 0.2) 72%,
    rgba(6, 10, 18, 0) 100%);
}

.om-scrim--top {
  top: 0;
  height: 54%;
  background: linear-gradient(to bottom,
    rgba(6, 10, 18, 0.94) 0%,
    rgba(6, 10, 18, 0.85) 24%,
    rgba(6, 10, 18, 0.55) 50%,
    rgba(6, 10, 18, 0.18) 76%,
    rgba(6, 10, 18, 0) 100%);
}

/* A plate of density for the centred blocks, which sit where neither edge scrim
   reaches. Shaped to the copy rather than veiling the whole frame. */
.om-plate {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(92rem, 150vw);
  height: min(64dvh, 32rem);
  pointer-events: none;
  z-index: 0;
  /* Defocus, not a black box. A dark plate over a photograph reads as UI the
     moment its edge is findable, and it was. Blurring the backdrop reads as a
     lens doing what lenses do, which belongs in a world already shot with haze:
     the photograph keeps its brightness and colour, and only its detail softens
     where the words are. The tint is small and only there to carry contrast. */
  background: rgba(6, 10, 18, 0.4);
  backdrop-filter: blur(20px) brightness(0.6) saturate(0.85);
  -webkit-backdrop-filter: blur(20px) brightness(0.6) saturate(0.85);
  /* The mask is the whole trick: it fades the blur AND the tint out together
     over a long falloff, so there is no boundary anywhere for the eye to catch. */
  -webkit-mask-image: radial-gradient(56% 58% at 50% 50%,
    #000 0%, rgba(0,0,0,0.98) 28%, rgba(0,0,0,0.82) 48%,
    rgba(0,0,0,0.46) 68%, rgba(0,0,0,0.16) 85%, transparent 100%);
  mask-image: radial-gradient(56% 58% at 50% 50%,
    #000 0%, rgba(0,0,0,0.98) 28%, rgba(0,0,0,0.82) 48%,
    rgba(0,0,0,0.46) 68%, rgba(0,0,0,0.16) 85%, transparent 100%);
}

.om-plate--tall { height: min(92dvh, 46rem); }

/* The route block is the tallest copy on the page and it is bottom-anchored, so
   it reaches above where the edge scrim still has density. Its own plate, shaped
   to where it actually sits. */
.om-plate--high {
  top: 0;
  bottom: auto;
  translate: -50% 0;
  width: min(96rem, 130vw);
  height: min(72dvh, 38rem);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  background: linear-gradient(to bottom,
    rgba(6, 10, 18, 0.94) 0%,
    rgba(6, 10, 18, 0.88) 34%,
    rgba(6, 10, 18, 0.62) 60%,
    rgba(6, 10, 18, 0.24) 82%,
    rgba(6, 10, 18, 0) 100%);
}

.om-plate--low {
  top: auto;
  bottom: 0;
  translate: -50% 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  width: min(96rem, 130vw);
  height: min(86dvh, 46rem);
  background: linear-gradient(to top,
    rgba(6, 10, 18, 0.95) 0%,
    rgba(6, 10, 18, 0.9) 34%,
    rgba(6, 10, 18, 0.66) 60%,
    rgba(6, 10, 18, 0.26) 82%,
    rgba(6, 10, 18, 0) 100%);
}

@media (max-width: 700px) {
  /* A phone frame is mostly sky at the summit, so the plate has to cover more of
     it than the desktop one does to hold the headline at 4.5:1. */
  .om-plate { width: 170vw; height: min(58dvh, 24rem); }
  .om-plate--tall {
    height: min(96dvh, 42rem);
    background: radial-gradient(64% 56% at 50% 50%,
      rgba(6, 10, 18, 0.97) 0%,
      rgba(6, 10, 18, 0.95) 44%,
      rgba(6, 10, 18, 0.78) 66%,
      rgba(6, 10, 18, 0.32) 86%,
      rgba(6, 10, 18, 0) 100%);
  }
}

/* ---- copy anchors ------------------------------------------------------
   Windows overlap their neighbours by about 15% so the reader never faces an
   empty frame, which means adjacent blocks must never share an anchor or they
   print on top of each other for the whole overlap. Low, high and centre
   alternate, and they stay distinct at every width. */

.om-copy {
  position: absolute;
  z-index: 1;
  padding-inline: clamp(1.25rem, 6vw, 5.5rem);
  max-width: min(46rem, 92vw);
}

.om-copy > * + * { margin-top: 0.9rem; }

.om-copy--low  { left: 0; bottom: clamp(2.5rem, 8vh, 6rem); }

/* The landing screen sat on the floor with most of the frame empty above it.
   Lifted into the lower third so the headline has presence and sits nearer the
   trail rather than under it. */
.om-copy--trailhead { bottom: clamp(4rem, 17vh, 11rem); max-width: min(66rem, 96vw); width: min(66rem, 96vw); }

/* This headline is a longer sentence than the others, and at the shared xl ramp
   it broke to four lines and pushed white type down into the bright part of the
   frame. Wider measure plus one step down holds it to two. */
.om-copy--trailhead .om-display--xl { font-size: clamp(1.9rem, 4.4vw, 3.5rem); }
.om-copy--high { left: 0; top: clamp(2.5rem, 8vh, 5rem); }

.om-copy--centre {
  left: 50%;
  top: 50%;
  /* An explicit width, not just max-width. An absolutely positioned box at
     left:50% with auto width shrink-to-fits the space REMAINING to its right,
     which is half the viewport, so max-width above that never applies and the
     headline silently wraps to four lines on a 1440 screen. */
  width: min(48rem, 92vw);
  translate: -50% -50%;   /* `translate`, not `transform`: the engine writes
                             translateY on copy blocks and would overwrite it */
  text-align: center;
}

.om-copy--centre > * { margin-inline: auto; }

/* ---- type -------------------------------------------------------------- */

.om-display {
  font-family: var(--sc-font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  color: var(--sc-ink);
}

.om-display--xl { font-size: clamp(2.1rem, 5.6vw, 4.2rem); }
.om-display--lg { font-size: clamp(1.7rem, 4vw, 3rem); }
.om-display--md { font-size: clamp(1.3rem, 2.4vw, 1.85rem); }

.om-lede {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
  max-width: 56ch;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
  margin: 0;
}

.om-body {
  font-size: 0.9375rem;
  line-height: 1.62;
  max-width: 56ch;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
  margin: 0;
}

.om-cite {
  font-family: var(--om-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0;
}

.sc-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- the trailhead sign ------------------------------------------------
   A trail marker carrying a destination and a distance, not a scroll cue. It
   is the one piece of onboarding the page cannot do without: every instinct a
   reader has is to scroll the other way. */

.om-sign {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.55rem 1rem;
  border: 1px solid rgba(218, 176, 57, 0.55);
  border-radius: 5px;
  background: rgba(6, 10, 18, 0.78);
  backdrop-filter: blur(4px);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
  padding: 0.95rem 1.15rem;
  max-width: 30rem;
  font-family: var(--om-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-accent);
}

/* The one piece of onboarding the page cannot do without. Every instinct a
   reader has is to scroll the other way, so this is deliberately the loudest
   small element on the landing screen. Static: the taste floor bans animated
   scroll cues, and a sign that carries a destination and a distance is doing
   information work rather than nagging. */
.om-sign__arrow {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--sc-accent);
}

.om-sign__to { font-weight: 500; }
.om-sign__measure { color: var(--sc-ink); font-variant-numeric: tabular-nums; }

.om-sign__note {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(218, 176, 57, 0.28);
  padding-top: 0.7rem;
  margin-top: 0.2rem;
  font-family: var(--sc-font-text);
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sc-ink);
}

.om-sign__note b {
  color: var(--sc-accent);
  font-weight: 500;
}

/* ---- the figure -------------------------------------------------------- */

.om-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem 0.7rem;
  margin: 0;
}

.om-figure__num {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--sc-accent);
  font-variant-numeric: tabular-nums;
}

.om-figure__to {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.5;
  color: var(--sc-ink);
  max-width: 26ch;
}

/* ---- who --------------------------------------------------------------- */

.om-who { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.om-who > div > * + * { margin-top: 0.6rem; }

.om-portrait {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  /* Per-image framing: Waz sits high in his source frame. */
  object-position: 50% 18%;
  border: 1px solid var(--om-hair);
}

.om-quote { margin: 0; }
.om-quote p {
  margin: 0;
  font-family: var(--sc-font-display);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--sc-ink);
}
.om-quote figcaption {
  font-family: var(--om-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin-top: 0.25rem;
}

/* ---- the summit -------------------------------------------------------- */

.om-copy--summit { width: min(52rem, 94vw); max-width: min(52rem, 94vw); }
.om-copy--summit > * + * { margin-top: 1.05rem; }

.om-x { width: clamp(48px, 7vw, 76px); height: clamp(48px, 7vw, 76px); display: block; margin-inline: auto; overflow: visible; }
.om-x__ghost { stroke: rgba(218, 176, 57, 0.2); stroke-width: 7; stroke-linecap: round; fill: none; }
.om-x path:not(.om-x__ghost) {
  stroke: var(--sc-accent);
  stroke-width: 7;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 80;
  stroke-dashoffset: calc(80 * (1 - var(--om-x-draw, 0)));
}

.om-form { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; max-width: 30rem; margin-inline: auto; }

.om-form input {
  flex: 1 1 11rem;
  min-width: 0;
  background: rgba(6, 10, 18, 0.72);
  border: 1px solid var(--om-hair);
  border-radius: 3px;
  padding: 0.85rem 0.9rem;
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: 1rem;
}

.om-form input::placeholder { color: var(--sc-ink-soft); }
.om-form input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-color: transparent; }

.om-cta {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  font-family: var(--om-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.9rem 1.5rem;
  border-radius: 3px;
  white-space: nowrap;
  transition: background-color 140ms ease-out, transform 120ms ease-out;
}

.om-cta:hover { background: #C79B2B; }
.om-cta:active { transform: translateY(1px); }
.om-cta:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.om-cta[disabled] { opacity: 0.55; cursor: default; }

.om-form__msg { font-size: 0.8125rem; color: var(--sc-ink-soft); margin: 0; min-height: 1.2em; }
.om-form__msg[data-ok='1'] { color: var(--sc-accent); }

.om-alt { font-size: 0.8125rem; line-height: 1.6; color: var(--sc-ink-soft); margin: 0; }
.om-alt a { color: var(--sc-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; padding-block: 0.9rem; }

/* ==========================================================================
   THE MAP — the nav, and the signature move.

   Two routes leave the same trailhead. One is the order the program runs, and
   it arrives. The other skips governance and defense to get at the revenue work,
   and it stops. Both draw as the reader climbs; only one of them keeps going.
   ========================================================================== */

.om-map {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.75rem);
  bottom: clamp(0.75rem, 2vw, 1.75rem);
  z-index: 40;
  width: clamp(120px, 14vw, 200px);
  padding: 0.7rem 0.7rem 0.55rem;
  border: 1px solid var(--om-hair);
  border-radius: 5px;
  background: rgba(6, 10, 18, 0.72);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.9);
}

.om-map__svg { display: block; width: 100%; height: auto; overflow: visible; }

.om-map__ghost {
  fill: none;
  stroke: rgba(174, 184, 201, 0.3);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 3;
}

.om-map__route {
  fill: none;
  stroke: var(--sc-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--om-len, 400);
  stroke-dashoffset: calc(var(--om-len, 400) * (1 - var(--om-draw, 0)));
}

.om-map__skip {
  fill: none;
  stroke: rgba(174, 184, 201, 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--om-len, 200);
  stroke-dashoffset: calc(var(--om-len, 200) * (1 - var(--om-draw, 0)));
}

.om-map__deadend {
  opacity: 0;
  transition: opacity 260ms var(--sc-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.om-map__deadend[data-on='1'] { opacity: 1; }
.om-map__deadend path {
  stroke: #C4535C;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.om-map__you {
  fill: var(--sc-accent);
  stroke: rgba(6, 10, 18, 0.9);
  stroke-width: 1.4;
}

.om-map__x { stroke: var(--sc-accent); stroke-width: 2.4; stroke-linecap: round; fill: none; opacity: 0.75; }

.om-pin { cursor: pointer; }
.om-pin__hit { fill: transparent; }
.om-pin__dot {
  fill: rgba(6, 10, 18, 0.9);
  stroke: rgba(174, 184, 201, 0.5);
  stroke-width: 1.2;
  transition: fill 160ms ease-out, stroke 160ms ease-out;
}
.om-pin[data-reached='1'] .om-pin__dot { fill: var(--sc-accent); stroke: var(--sc-accent); }
.om-pin[data-layer='offense'][data-reached='1'] .om-pin__dot { fill: #F0CE72; stroke: #F0CE72; }

@media (hover: hover) and (pointer: fine) {
  .om-pin:hover .om-pin__dot { stroke: var(--sc-ink); stroke-width: 2; }
}
.om-pin:focus { outline: none; }
.om-pin:focus-visible .om-pin__dot { stroke: var(--sc-ink); stroke-width: 2.4; }

.om-map__read {
  margin: 0.45rem 0 0;
  font-family: var(--om-mono);
  font-size: 0.75rem;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  border-top: 1px solid var(--om-hair);
  padding-top: 0.4rem;
  min-height: 2.1em;
}

.om-map[data-dead='1'] .om-map__read { color: var(--sc-ink); }

/* ---- phone ------------------------------------------------------------- */

@media (max-width: 700px) {
  /* taste.md: step the display down a rung. The desktop floor wraps a normal
     headline to six lines at 390px. */
  .om-display--xl { font-size: clamp(1.75rem, 8.2vw, 2.35rem); }
  .om-display--lg { font-size: clamp(1.45rem, 6.6vw, 1.9rem); }

  .om-copy { max-width: none; padding-inline: 1.25rem; }
  .om-copy--low { bottom: 1.5rem; }
  .om-copy--high { top: 1.25rem; padding-right: 6.5rem; }
  .om-copy--centre { width: calc(100vw - 2.5rem); max-width: none; }

  .om-scrim--bottom { height: 74%; }
  /* The high-anchored blocks sit against a rising sun on a phone, where there is
     far less frame to spread the density across than on desktop. */
  .om-scrim--top {
    height: 62%;
    background: linear-gradient(to bottom,
      rgba(6, 10, 18, 0.96) 0%,
      rgba(6, 10, 18, 0.9) 30%,
      rgba(6, 10, 18, 0.62) 56%,
      rgba(6, 10, 18, 0.2) 80%,
      rgba(6, 10, 18, 0) 100%);
  }

  .om-map { width: 104px; top: 0.75rem; bottom: auto; right: 0.75rem; padding: 0.4rem 0.4rem 0.3rem; }
  .om-map__read { font-size: 0.6875rem; letter-spacing: 0.04em; min-height: 2.4em; }

  .om-who { grid-template-columns: 1fr; gap: 0.75rem; }
  .om-portrait { width: 52px; height: 52px; }
  .om-form { max-width: none; }
  .om-cta { width: 100%; }
  .om-sign { max-width: none; font-size: 0.75rem; padding: 0.8rem 0.9rem; }
  .om-sign__note { font-size: 0.875rem; }
  .om-sign__arrow { font-size: 1.1rem; }
  .om-copy--trailhead { bottom: 1.5rem; max-width: none; width: auto; }
}

/* ---- reduced motion -----------------------------------------------------
   The engine fetches no clip at all here: the posters are the film, they cross
   dissolve through the same seams at the same scroll positions, and every copy
   window still opens and closes. What goes is the self-running transitions. */

@media (prefers-reduced-motion: reduce) {
  .om-pin__dot,
  .om-map__deadend,
  .om-cta { transition-duration: 1ms; }
}

/* ==========================================================================
   SUBSTANCE
   The first cut moved the whole curriculum onto a 200px map and left the page
   with about 140 words on it. Dense and wordy are not the same thing: these
   blocks carry real information at a glance, and none of them is a paragraph.
   ========================================================================== */

/* ---- the route: three layers, eight builds -----------------------------
   The layers are the argument. Eight items in a grid is a feature list; the
   same eight under Module Zero, Defense and Offense is a philosophy, and it is
   the thing the reader is actually deciding about. */

.om-copy--route { max-width: min(72rem, 96vw); width: min(72rem, 96vw); }

.om-layers {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0 2.25rem;
  align-items: start;
}

.om-layer { border-top: 2px solid var(--om-layer-c, var(--om-hair)); padding-top: 0.7rem; }
.om-layer[data-layer='zero']    { --om-layer-c: #7E8DA8; }
.om-layer[data-layer='defense'] { --om-layer-c: #AEB8C9; }
.om-layer[data-layer='offense'] { --om-layer-c: var(--sc-accent); }

.om-layer h3 {
  margin: 0 0 0.15rem;
  font-family: var(--om-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.om-layer__n   { color: var(--om-layer-c); font-weight: 500; }
.om-layer__sub { color: var(--sc-ink-soft); }

.om-layer__why {
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--sc-ink-soft);
  max-width: 34ch;
}

.om-builds { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }

.om-builds li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
  padding: 0.3rem 0;
  border-top: 1px solid rgba(174, 184, 201, 0.14);
}
.om-builds li:first-child { border-top: 0; }

.om-builds b {
  font-family: var(--om-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--om-layer-c);
  font-variant-numeric: tabular-nums;
}

.om-builds span { font-size: 0.875rem; font-weight: 500; color: var(--sc-ink); line-height: 1.3; }

.om-builds i {
  grid-column: 2;
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--sc-ink-soft);
}

/* ---- the two things that make the order different ---------------------- */

.om-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 46rem; }

.om-facts > div { border-top: 1px solid rgba(174, 184, 201, 0.2); padding-top: 0.55rem; }

.om-facts b {
  display: block;
  font-family: var(--om-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-accent);
  margin-bottom: 0.3rem;
}

.om-facts span { font-size: 0.875rem; line-height: 1.5; color: var(--sc-ink-soft); }

/* ---- proof, verified only ---------------------------------------------- */

.om-proof { display: grid; gap: 0.7rem; }
.om-proof .om-quote p { font-size: 0.9375rem; }

/* ---- the commercial spec ------------------------------------------------ */

.om-spec {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  gap: 0 1.5rem;
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(174, 184, 201, 0.2);
}

.om-spec > div { text-align: center; }

.om-spec dt {
  font-family: var(--om-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin-bottom: 0.2rem;
}

.om-spec dd { margin: 0; font-size: 0.8125rem; font-weight: 500; color: var(--sc-ink); }

@media (max-width: 860px) {
  .om-layers { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .om-layer__why { max-width: none; font-size: 0.75rem; margin-bottom: 0.4rem; }
  .om-builds li { padding: 0.16rem 0; }
  .om-builds span { font-size: 0.8125rem; }
  .om-builds i { display: none; }          /* the name is the fact on a phone */
  .om-facts { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
  .om-spec { grid-template-columns: repeat(2, auto); gap: 0.6rem 1.25rem; }
  .om-proof .om-quote:nth-child(n+3) { display: none; }
}

/* The promise is the second thing on the page and the reason to keep climbing,
   so it gets a wider measure than the other high-anchored blocks and its own
   size step: at the shared xl ramp it broke to four lines. */
.om-copy--promise { max-width: min(62rem, 96vw); width: min(62rem, 96vw); }
.om-copy--promise .om-display--xl { font-size: clamp(1.9rem, 4.4vw, 3.4rem); }

/* The figure now sits inside the proof cluster rather than owning a beat, so it
   steps down to sit alongside the quotes instead of over them. */
.om-who .om-figure__num { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.om-who .om-figure { margin-top: 0.2rem; }

/* ---- the philosophy label ----------------------------------------------
   The only eyebrow on the page, which is what the taste floor allows: one per
   three sections. It earns its place because this beat is the firm's method
   rather than a feature, and the reader has no other way to know that. */

.om-eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--om-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-accent);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.om-eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: var(--sc-accent);
  flex: none;
}

.om-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 58rem; }

/* ---- the cohort that filled --------------------------------------------
   The strongest proof this page has, because it is not a claim about outcomes.
   25 confirmed by the operator Aug 25 2026. */

.om-soldout {
  margin: 0.15rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(218, 176, 57, 0.28);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sc-ink-soft);
}

.om-soldout b { color: var(--sc-accent); font-weight: 500; }

@media (max-width: 860px) {
  .om-facts { grid-template-columns: minmax(0, 1fr); }
}

/* The belief is a longer sentence than the display ramp assumes and broke to
   four lines, which pushes type toward the frame edges and weakens the stillest
   moment on the page. Wider measure, one step down, held to two lines. */
.om-copy--belief { width: min(64rem, 96vw); max-width: min(64rem, 96vw); }
.om-copy--belief .om-display--xl { font-size: clamp(1.9rem, 4.6vw, 3.6rem); }

/* The member door. Deliberately the quietest line on the closing screen: it is
   for people who already bought, and it must not compete with the CTA. */
.om-alt--quiet { font-size: 0.75rem; color: rgba(174, 184, 201, 0.75); }
.om-alt--quiet a { color: rgba(218, 176, 57, 0.85); }