/* ==========================================================================
   Obstoon — Interior Page Visual System
   --------------------------------------------------------------------------
   The build shipped with every interior section painted transparent over the
   same background, which the visual audit measured as 70-82% dead space on all
   nine interior pages. This file introduces the shared layer stack that fixes
   it once, for every page, in both themes:

     L1  page background        --bg
     L2  atmospheric field      .atmos
     L3  section surface        .band  (level 1-3, alternating)
     L4  content panel          .band-panel
     L5  product visual         .stage / .voice-stage / .archive-stage
     L6  foreground type        base.css

   Design intent: stacked strata, not a stack of cards. Bands are full-bleed
   with hairline separation and ambient wash, so the page reads as layered
   terrain. Panels are reserved for genuine content grouping so that every
   section never becomes the same rounded rectangle.

   All 3D is progressive enhancement — every layer is laid out in 2D first.
   ========================================================================== */

/* ==========================================================================
   L3 — Section surfaces
   ========================================================================== */

/* Interior pages opt in via <main class="page-main page-main--interior">.
   Bands alternate automatically, so page rhythm stays consistent and a new
   page cannot accidentally ship as one flat field again. */
.page-main--interior > section {
  position: relative;
  isolation: isolate;
}

.page-main--interior > section:nth-child(4n + 1) {
  --band: var(--band-1);
}

.page-main--interior > section:nth-child(4n + 2) {
  --band: var(--band-2);
}

.page-main--interior > section:nth-child(4n + 3) {
  --band: var(--band-3);
}

.page-main--interior > section:nth-child(4n) {
  --band: var(--band-1);
}

.page-main--interior > section {
  background: var(--band, var(--band-1));
}

/* Hairline strata boundary. Full-bleed, so it reads as a geological seam
   rather than a card divider. */
.page-main--interior > section + section::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--band-line-strong) 16%,
    var(--band-line) 46%,
    var(--band-line-strong) 84%,
    transparent 100%
  );
}

/* Ambient wash. Each band gets a differently-placed light pool so adjacent
   bands differ in value AND in where the light falls — otherwise the ladder
   would read as flat alternating stripes. */
/* The grain moves to section level. It lived on body::after at z-index -1,
   which every opaque band painted straight over -- it was rendering nowhere on
   an interior page. Here it sits above the band colour and is actually seen. */
.page-main--interior > section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    var(--grain),
    linear-gradient(
      180deg,
      var(--band-lift) 0%,
      transparent 34%,
      var(--band-fall) 100%
    ),
    radial-gradient(
      420px 300px at 34% 30%,
      var(--band-pool-1) 0%,
      transparent 72%
    ),
    radial-gradient(
      380px 280px at 74% 76%,
      var(--band-pool-2) 0%,
      transparent 70%
    );
  /* Fixed pixel periods, so a 3500px band gets the same light structure as a
     400px one. Percentage-sized pools stretched to nothing on tall bands. */
  background-size: 140px 140px, 100% 100%, 820px 640px, 700px 560px;
  background-repeat: repeat, no-repeat, repeat, repeat;
  background-position: 0 0, 0 0, 8% 0, 62% 320px;
}

/* Each band nudges the pools so adjacent bands differ in where the light
   falls, not only in value. */
.page-main--interior > section:nth-child(4n + 1)::after {
  background-position: 0 0, 0 0, 4% 0, 58% 300px;
}

.page-main--interior > section:nth-child(4n + 2)::after {
  background-position: 0 0, 0 0, 66% 120px, 16% 520px;
}

.page-main--interior > section:nth-child(4n + 3)::after {
  background-position: 0 0, 0 0, 38% 420px, 82% 140px;
}

/* The homepage hero is already visually verified and locked, so it is held at
   its existing values: the band ladder, the section grain and the section
   atmosphere all skip it. Everything below it gets the new field. */
/* Only the homepage hero is held back. Interior .page-hero bands keep their
   background -- making them transparent broke the no-transparent-section
   invariant and let the body field show through. */
.page-main--interior > .hero {
  background: transparent;
}

.page-main--interior > .hero::after {
  background-image: none;
}

/* Explicit override where a page needs to hold one band across two sections
   (for example a hero and the stage directly beneath it). */
.band--hold {
  background: var(--band, var(--band-1)) !important;
}

.band--flat {
  background: var(--band-0) !important;
}

/* ---- Product tinting -----------------------------------------------------
   Each product owns one band value AND one wash hue, so Speech, Library and
   Tracker are recognisably different rooms in the same building. */
.page-main--tint-speech {
  --band-wash: rgba(242, 102, 69, 0.07);
  --band-wash-2: rgba(51, 85, 224, 0.07);
}

.page-main--tint-library {
  --band-wash: rgba(77, 157, 224, 0.07);
  --band-wash-2: rgba(122, 208, 176, 0.06);
}

.page-main--tint-tracker {
  --band-wash: rgba(91, 99, 232, 0.08);
  --band-wash-2: rgba(139, 111, 240, 0.07);
}

.page-main--tint-brand {
  --band-wash: rgba(77, 157, 224, 0.06);
  --band-wash-2: rgba(139, 111, 240, 0.06);
}

[data-theme="light"] .page-main--tint-speech {
  --band-wash: rgba(184, 57, 26, 0.055);
  --band-wash-2: rgba(45, 96, 196, 0.055);
}

[data-theme="light"] .page-main--tint-library {
  --band-wash: rgba(13, 107, 76, 0.055);
  --band-wash-2: rgba(45, 96, 196, 0.055);
}

[data-theme="light"] .page-main--tint-tracker {
  --band-wash: rgba(75, 59, 181, 0.06);
  --band-wash-2: rgba(45, 96, 196, 0.05);
}

/* ==========================================================================
   L4 — Content panels (reserved, not used for every section)
   ========================================================================== */

.band-panel {
  position: relative;
  padding: clamp(1.35rem, 0.9rem + 1.9vw, 2.5rem);
  background: var(--panel-band), var(--surface);
  border: 1px solid var(--band-line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md), var(--shadow-inset);
}

/* Top rim light: a real edge, not glassmorphism. */
.band-panel::before {
  content: "";
  position: absolute;
  inset-inline: 10%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--edge-light),
    transparent
  );
  opacity: 0.55;
}

.band-panel--quiet {
  background: var(--surface-inset);
  border-color: var(--band-line);
  box-shadow: var(--shadow-xs);
}

.band-panel--quiet::before {
  display: none;
}

/* Asymmetric panel: a wide content measure with a narrower metadata rail. */
.band-panel--rail {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 56rem) {
  .band-panel--rail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    gap: var(--space-xl) var(--space-2xl);
    align-items: start;
  }
}

.band-panel__rail {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding-left: var(--space-md);
  border-left: 1px solid var(--band-line);
}

.band-panel__rail-title {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ==========================================================================
   Page hero variants — page-specific hierarchy, not one H1 for the site
   ========================================================================== */

/* ---- Product: display + eyebrow + lead + supporting copy ---- */
.page-hero--product {
  padding-block: clamp(2.75rem, 1.8rem + 4.4vw, 5.5rem)
    clamp(2.25rem, 1.5rem + 3vw, 4rem);
  overflow: hidden;
}

.page-hero--product .page-hero__inner {
  display: grid;
  gap: var(--space-md);
  max-width: none;
}

.page-hero--product .page-hero__title {
  font-size: var(--display-product);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.page-hero--product .page-hero__lead {
  font-size: var(--lead-product);
  max-width: 54ch;
}

@media (min-width: 62rem) {
  .page-hero--product .page-hero__inner,
  .page-hero--utility .page-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: var(--space-2xl) clamp(2rem, 1rem + 3vw, 4rem);
  }

  .page-hero--product .page-hero__copy,
  .page-hero--utility .page-hero__copy {
    display: grid;
    gap: var(--space-md);
    align-content: center;
  }
}

/* Product lockup block sitting above the display heading */
.page-hero__lockup {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
}

.page-hero__lockup img {
  width: 46px;
  height: 46px;
  flex: none;
  object-fit: contain;
  padding: 4px;
  background: var(--surface-3);
  border: 1px solid var(--band-line);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-xs);
}

.page-hero__lockup-text {
  display: grid;
  gap: 0.1rem;
}

.page-hero__lockup-product {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---- Editorial (About): the largest interior statement ---- */
.page-hero--editorial {
  padding-block: clamp(3.25rem, 2rem + 6vw, 7.5rem)
    clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
}

.page-hero--editorial .page-hero__title {
  font-size: var(--display-editorial);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  max-width: 20ch;
}

.page-hero--editorial .page-hero__lead {
  font-size: var(--lead-editorial);
  max-width: 56ch;
}

/* ---- Legal: smaller, highly readable. No cinematic treatment needed. ---- */
.page-hero--legal {
  padding-block: clamp(2rem, 1.5rem + 2.2vw, 3.25rem)
    clamp(1.25rem, 1rem + 1.2vw, 2rem);
}

.page-hero--legal .page-hero__inner {
  max-width: none;
}

.page-hero--legal .page-hero__title {
  font-size: var(--display-legal);
  line-height: 1.14;
  letter-spacing: var(--tracking-snug);
}

.page-hero--legal .page-hero__lead {
  font-size: var(--lead-legal);
  max-width: 62ch;
}

/* ---- Utility (Contact, Downloads lead, 404): balanced functional ---- */
.page-hero--utility {
  padding-block: clamp(2.25rem, 1.6rem + 3vw, 4rem)
    clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
}

.page-hero--utility .page-hero__title {
  font-size: var(--display-utility);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

.page-hero--utility .page-hero__lead {
  font-size: var(--lead-utility);
  max-width: 58ch;
}

/* Utility heroes may carry a visual field (Downloads does); let the grid
   breathe instead of trapping the stage inside the 68ch prose measure. */
.page-hero--utility .page-hero__inner {
  max-width: none;
}

/* Hero-side atmospheric field. Gives the hero visual mass without inventing
   a product object, and is the first place light mode gains tonal depth. */
.page-hero__field {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--band-line-strong);
  background: var(--band-1);
  box-shadow: var(--shadow-lg), var(--shadow-inset);
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 3;
}

@media (max-width: 61.99rem) {
  .page-hero__field {
    margin-top: var(--space-md);
    aspect-ratio: 16 / 10;
  }
}

.page-hero__field svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   L5 — Product visuals
   ========================================================================== */

/* Shared stage frame. One frame language, distinct contents. */
.stage {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--band-line-strong);
  background: linear-gradient(
    180deg,
    var(--surface-2) 0%,
    color-mix(in srgb, var(--surface) 90%, var(--bg-deep)) 100%
  );
  box-shadow: var(--shadow-lg), var(--shadow-inset);
  overflow: hidden;
  isolation: isolate;
}

.stage__body {
  position: relative;
  padding: clamp(1.15rem, 0.85rem + 1.4vw, 1.85rem);
}

/* Corner registration marks — technical, quiet, and they stop large stages
   from reading as empty rounded boxes. */
.stage::before,
.stage::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-accent);
  opacity: 0.45;
  pointer-events: none;
}

.stage::before {
  top: 10px;
  left: 10px;
  border-right: 0;
  border-bottom: 0;
}

.stage::after {
  right: 10px;
  bottom: 10px;
  border-left: 0;
  border-top: 0;
}

.stage__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--band-line);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.stage__caption b {
  color: var(--accent);
  font-weight: 600;
}

/* ---- Speech: dimensional voice field -----------------------------------
   Concentric emission rings around a lit core, plus a live bar field. Reads as
   a voice leaving a body — deliberately different from the Library's stacked
   planes and Tracker's progress path. */
.voice-stage {
  position: relative;
  aspect-ratio: 5 / 4;
  background:
    radial-gradient(
      68% 68% at 50% 52%,
      color-mix(in srgb, var(--ob-coral) 24%, transparent) 0%,
      transparent 68%
    ),
    radial-gradient(
      44% 44% at 22% 12%,
      color-mix(in srgb, var(--ob-cobalt) 22%, transparent) 0%,
      transparent 66%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-deep) 58%, transparent),
      transparent 72%
    );
  display: grid;
  place-items: center;
  perspective: var(--perspective-card);
}

.voice-stage__rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.voice-stage__rings i {
  position: absolute;
  inset: calc(var(--i) * 9%);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ob-coral) 42%, transparent);
  opacity: calc(0.9 - var(--i) * 0.13);
  transform: scale(calc(0.82 + var(--i) * 0.06));
}

.voice-stage__rings::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--border-accent);
  opacity: 0.5;
}

.voice-stage__core {
  position: relative;
  z-index: 1;
  width: 27%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(
      68% 68% at 34% 28%,
      var(--obj-hot) 0%,
      var(--obj-3) 34%,
      var(--ob-coral) 72%,
      color-mix(in srgb, var(--ob-coral) 62%, var(--bg-deep)) 100%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ob-coral) 46%, transparent),
    0 0 44px -6px color-mix(in srgb, var(--ob-coral) 58%, transparent),
    0 22px 46px -18px rgba(0, 0, 0, 0.66);
}

[data-theme="light"] .voice-stage__core {
  background:
    radial-gradient(
      68% 68% at 34% 28%,
      var(--obj-hot) 0%,
      #f6b8a4 30%,
      var(--ob-coral) 70%,
      #a8351a 100%
    );
}

/* Speech bar field, along the stage floor */
.voice-stage__bars {
  position: absolute;
  inset-inline: 9%;
  bottom: 9%;
  display: flex;
  align-items: flex-end;
  gap: 2%;
  height: 34%;
}

.voice-stage__bars i {
  flex: 1;
  min-width: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    180deg,
    var(--ob-coral) 0%,
    color-mix(in srgb, var(--ob-coral) 46%, var(--ob-blue)) 100%
  );
  opacity: 0.8;
  transform-origin: bottom center;
  transform: scaleY(var(--h, 0.6));
  animation: voice-breathe 3.4s var(--ease-in-out) infinite alternate;
  animation-delay: calc(var(--i) * -140ms);
}

@keyframes voice-breathe {
  from {
    transform: scaleY(calc(var(--h, 0.6) * 0.4));
  }
  to {
    transform: scaleY(var(--h, 0.6));
  }
}

/* ---- Library: layered archive planes ------------------------------------
   Stacked, rotated document planes in real CSS 3D with a perspective floor —
   an archive, not a file list. */
.archive-stage {
  position: relative;
  aspect-ratio: 5 / 4;
  background:
    radial-gradient(
      70% 62% at 72% 14%,
      color-mix(in srgb, var(--ob-mint) 22%, transparent) 0%,
      transparent 66%
    ),
    radial-gradient(
      50% 48% at 16% 84%,
      color-mix(in srgb, var(--ob-blue) 18%, transparent) 0%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-deep) 52%, transparent),
      transparent 76%
    );
  display: grid;
  place-items: center;
  perspective: 1400px;
}

.archive-stage__stack {
  position: relative;
  width: min(66%, 300px);
  aspect-ratio: 3 / 4;
  transform-style: preserve-3d;
  transform: rotateX(17deg) rotateY(-21deg);
}

.archive-stage__plane {
  position: absolute;
  inset: 0;
  padding: 11px 13px;
  border-radius: 3px 6px 6px 3px;
  /* Lit page face: a dark page would vanish against a dark stage, and a white
     page would be the only bright thing on screen. */
  background: linear-gradient(
    156deg,
    var(--obj-3) 0%,
    var(--obj-2) 46%,
    var(--obj-1) 100%
  );
  border: 1px solid color-mix(in srgb, var(--obj-hot) 34%, transparent);
  box-shadow:
    0 18px 34px -14px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 color-mix(in srgb, var(--obj-hot) 46%, transparent);
  transform: translateZ(calc(var(--i) * 15px))
    translate(calc(var(--i) * -7px), calc(var(--i) * -11px));
}

/* Dark ink on the lit page face */
.archive-stage__plane-head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}

.archive-stage__plane-head span {
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, #0b1220 72%, transparent);
  opacity: calc(0.82 - var(--i) * 0.11);
}

.archive-stage__lines {
  display: grid;
  gap: 5px;
}

.archive-stage__lines i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, #0b1220 46%, transparent);
}

.archive-stage__lines i:nth-child(2n) {
  width: 84%;
}

.archive-stage__lines i:nth-child(3n) {
  width: 62%;
}

/* Spine edge — the one detail that makes a plane read as a bound volume */
.archive-stage__plane::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 7px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ob-mint) 78%, #06111d),
    color-mix(in srgb, var(--ob-mint) 34%, #06111d)
  );
  opacity: calc(0.9 - var(--i) * 0.14);
}

.archive-stage__tag {
  position: absolute;
  right: 9px;
  bottom: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  color: color-mix(in srgb, #0b1220 74%, transparent);
}

/* ---- Downloads: package / distribution stage -----------------------------
   Honest about being unreleased: a sealed, labelled package rather than a
   download button that pretends to deliver something. */
.package-stage {
  position: relative;
  aspect-ratio: 5 / 4;
  background:
    radial-gradient(
      66% 64% at 50% 106%,
      color-mix(in srgb, var(--accent) 24%, transparent) 0%,
      transparent 68%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-deep) 54%, transparent),
      transparent 74%
    );
  display: grid;
  place-items: center;
  perspective: 1300px;
}

.package-stage__box {
  position: relative;
  width: min(58%, 250px);
  aspect-ratio: 1 / 0.82;
  transform: rotateX(9deg) rotateY(-15deg);
  transform-style: preserve-3d;
}

.package-stage__face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xs);
  background: linear-gradient(
    152deg,
    var(--obj-3) 0%,
    var(--obj-2) 48%,
    var(--obj-1) 100%
  );
  border: 1px solid color-mix(in srgb, var(--obj-hot) 30%, transparent);
  box-shadow:
    0 24px 44px -18px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 color-mix(in srgb, var(--obj-hot) 44%, transparent);
  display: grid;
  place-items: center;
  gap: var(--space-2xs);
  padding: var(--space-md);
  text-align: center;
}

.package-stage__seal {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, #0b1220 46%, transparent);
  color: color-mix(in srgb, #0b1220 78%, transparent);
}

.package-stage__seal svg {
  width: 24px;
  height: 24px;
}

.package-stage__label {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: color-mix(in srgb, #0b1220 80%, transparent);
}

/* Sealed-tape band across the package */
.package-stage__tape {
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 15px;
  transform: translateX(-50%) translateZ(2px);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-2) 68%, transparent),
    color-mix(in srgb, var(--accent-2) 34%, transparent)
  );
  border-inline: 1px solid
    color-mix(in srgb, var(--accent-2) 40%, transparent);
}
/* ---- Tracker: capability markers ----------------------------------------
   Small static scenes for the Tracker showcase page. Each states one part of
   the concept — progress path, certificate, language level, study path, future
   CV — without implying a working interface or any stored data. */
.miniviz.mv-trail,
.miniviz.mv-stage,
.miniviz.mv-cv {
  padding: 0;
}

/* -- trail: an ascending progress path with milestones ------------------- */
.mv-trail .vis-path {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: inherit;
}

.mv-trail .vis-path__cert {
  width: 22%;
}

/* -- cert: a record card with a header block and a seal ------------------ */
.mv-cert {
  display: grid;
  place-items: center;
}

.mv-cert__sheet {
  position: relative;
  width: 46%;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2xs);
  background: linear-gradient(160deg, var(--surface-3), color-mix(in srgb, var(--surface) 82%, var(--ob-indigo)));
  box-shadow: var(--shadow-md);
  transform: rotate(-4deg);
}

.mv-cert__sheet::before {
  content: "";
  position: absolute;
  inset-inline: 18%;
  inset-block: 22% 66%;
  border-radius: var(--radius-2xs);
  background: color-mix(in srgb, var(--mv-accent, var(--accent)) 24%, transparent);
}

.mv-cert__sheet::after {
  content: "";
  position: absolute;
  inset-inline: 18%;
  inset-block: 40% 58%;
  box-shadow:
    0 6px 0 color-mix(in srgb, var(--mv-accent, var(--accent)) 70%, transparent),
    0 12px 0 color-mix(in srgb, var(--mv-accent, var(--accent)) 42%, transparent);
}

.mv-cert__seal {
  position: absolute;
  right: 14%;
  bottom: 12%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--obj-hot), var(--ob-gold) 58%, color-mix(in srgb, var(--ob-gold) 55%, transparent));
  opacity: 0.92;
}

/* -- cefr: the language-level ladder, A1 up to C1 ------------------------ */
.mv-cefr {
  display: grid;
  align-content: center;
  gap: 0.34rem;
  padding: 0 clamp(1.1rem, 3vw, 2.4rem);
}

.mv-cefr__band {
  display: grid;
  grid-template-columns: 1.8ch minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-faint);
}

.mv-cefr__track {
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--grid-line) 60%, transparent);
}

.mv-cefr__track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--mv-accent, var(--accent)) 56%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--mv-accent, var(--accent)) 40%, transparent);
}

.mv-cefr__band--up .mv-cefr__track i {
  background: var(--mv-accent, var(--accent));
}

/* -- stage: study path as stacked ledgers -------------------------------- */
.mv-stage {
  display: grid;
  align-content: center;
  gap: 0.4rem;
  padding: 0 clamp(1.1rem, 3vw, 2.4rem);
}

.mv-stage__row {
  position: relative;
  height: 1.1rem;
  border-inline: 1px solid var(--band-line);
}

.mv-stage__row i:first-child {
  position: absolute;
  left: 0;
  inset-block: 0;
  width: 0.18rem;
  background: var(--mv-accent, var(--accent));
  opacity: 0.8;
}

.mv-stage__row i:last-child {
  position: absolute;
  inset-inline: 0.6rem 0;
  inset-block: 0.18rem 0.18rem;
  background: color-mix(in srgb, var(--surface-3) 78%, var(--ob-indigo));
  border: 1px solid var(--border);
  border-radius: var(--radius-2xs);
}

.mv-stage__row--next {
  opacity: 0.55;
}

.mv-stage__row--next i:last-child {
  border-style: dashed;
}

/* -- cv: a future résumé sheet, kept deliberately schematic --------------- */
.mv-cv__sheet {
  position: relative;
  width: 46%;
  aspect-ratio: 4 / 5;
  border: 1.5px dashed var(--ad-line-strong);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  transform: rotate(3deg);
}

.mv-cv__sheet::before {
  content: "";
  position: absolute;
  inset-inline: 16%;
  top: 22%;
  box-shadow:
    0 8px 0 color-mix(in srgb, var(--mv-accent, var(--accent)) 26%, transparent),
    0 18px 0 color-mix(in srgb, var(--mv-accent, var(--accent)) 16%, transparent),
    0 28px 0 color-mix(in srgb, var(--mv-accent, var(--accent)) 30%, transparent),
    0 38px 0 color-mix(in srgb, var(--mv-accent, var(--accent)) 16%, transparent),
    0 48px 0 color-mix(in srgb, var(--mv-accent, var(--accent)) 22%, transparent);
}

.mv-cv__tag {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: 0.18em;
  color: var(--text-faint);
}

/* ---- About: atmospheric editorial field ----------------------------------
   A wide, quiet visual field with drifting contour lines and a lit horizon.
   No product object — this page is about the brand, so the composition carries
   the scale instead. */
.editorial-field {
  position: relative;
  width: 100%;
  min-height: clamp(240px, 34vw, 460px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--band-line-strong);
  background:
    radial-gradient(
      52% 74% at 50% 118%,
      color-mix(in srgb, var(--accent) 26%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      38% 52% at 16% 4%,
      color-mix(in srgb, var(--accent-2) 20%, transparent) 0%,
      transparent 66%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-deep) 56%, transparent),
      color-mix(in srgb, var(--bg-deep) 18%, transparent) 70%,
      transparent
    );
  overflow: hidden;
  isolation: isolate;
}

.editorial-field svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Oversized editorial pull statements.
   NOTE: the full `.statement` component (with __quote / __body / __aside) lives
   in effects.css and is shared with the homepage. Only the modifier variants
   that the interior pages need are defined here, so this file cannot override
   the homepage's brand statement by accident. */
.statement--lead {
  font-size: var(--text-xl);
  line-height: 1.24;
  letter-spacing: var(--tracking-snug);
  font-weight: 500;
  color: var(--text-soft);
}

/* ==========================================================================
   Layout patterns — designed, not merely populated
   ========================================================================== */

/* Asymmetric block: one dominant element, one subordinate. Alternates side
   automatically so consecutive blocks do not repeat. */
.asym {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 62rem) {
  .asym {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  }

  .asym--flip {
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
  }

  .asym--flip .asym__media {
    order: -1;
  }

  /* Narrow-media variant: media leads, copy follows */
  .asym--media-lead {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  .asym--media-lead .asym__media {
    order: -1;
  }
}

/* Editorial two-column prose with a hanging metadata rail — the layout that
   keeps long copy from becoming a centred single column in a wide viewport. */
.editorial-rail {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 64rem) {
  .editorial-rail {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

.editorial-rail__aside {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}

@media (min-width: 64rem) {
  .editorial-rail__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
  }
}

/* Section index built from the page's own headings. No invented navigation —
   this is derived entirely from content already on the page. */
.section-index {
  display: grid;
  gap: 0;
  counter-reset: sindex;
  border-top: 1px solid var(--band-line);
}

.section-index a {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: var(--space-2xs);
  align-items: baseline;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--band-line);
  font-size: var(--text-sm);
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out),
    padding-left var(--dur-3) var(--ease-out);
}

.section-index a::before {
  counter-increment: sindex;
  content: counter(sindex, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
}

.section-index a:hover {
  color: var(--accent);
  padding-left: 0.35rem;
}

/* ==========================================================================
   Legal / long-form reading surface
   ========================================================================== */

/* The audit measured a 4.2-5.2x left/right edge imbalance on legal pages: a
   narrow prose column abandoned in one half of a 1600px canvas. A real reading
   surface plus a side rail gives the second half a job. */
.legal-shell {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 64rem) {
  .legal-shell {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

.legal-shell__body {
  position: relative;
  max-width: var(--measure-legal);
  padding: clamp(1.35rem, 0.9rem + 1.9vw, 2.6rem);
  background: var(--panel-band), var(--surface);
  border: 1px solid var(--band-line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md), var(--shadow-inset);
}

/* Lit top edge. Needs position:relative on the parent above, otherwise this
   anchors to whatever ancestor happens to be positioned. */
.legal-shell__body::before {
  content: "";
  position: absolute;
  inset-inline: 10%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--edge-light),
    transparent
  );
  opacity: 0.5;
}

/* Legal prose: a real line length and measured rhythm, not default <p> flow */
.legal-prose {
  max-width: var(--measure-legal);
}

.legal-prose > * + * {
  margin-top: 1.05rem;
}

.legal-prose h2 {
  margin-top: 2.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--band-line);
  font-size: var(--text-xl);
  line-height: 1.2;
  letter-spacing: var(--tracking-snug);
}

.legal-prose h3 {
  margin-top: 1.6rem;
  font-size: var(--text-md);
  letter-spacing: var(--tracking-snug);
  color: var(--text);
}

.legal-prose p,
.legal-prose li {
  font-size: var(--lead-legal);
  line-height: var(--leading-relaxed);
  color: var(--text-soft);
}

.legal-prose strong {
  color: var(--text);
  font-weight: 620;
}

.legal-prose a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

.legal-prose ul {
  display: grid;
  gap: 0.55rem;
  padding-left: 1.15rem;
}

.legal-prose li::marker {
  color: var(--accent);
}

/* ==========================================================================
   Motion — completes the language, respects reduced motion
   ========================================================================== */

/* Product stage depth on hover: the whole point of the 3D is that it moves
   in response to the reader. Transform-only, fine pointers only. */
@media (hover: hover) and (min-width: 62rem) {
  .stage--lift:hover .archive-stage__stack {
    transform: rotateX(13deg) rotateY(-17deg) translateY(-6px);
  }

  .stage--lift:hover .package-stage__box {
    transform: rotateX(6deg) rotateY(-11deg) translateY(-5px);
  }

  .stage--lift:hover .voice-stage__core {
    transform: scale(1.045);
  }

  .stage--lift .archive-stage__stack,
  .stage--lift .package-stage__box,
  .stage--lift .voice-stage__core {
    transition: transform var(--dur-5) var(--ease-out);
  }
}

.editorial-field__line {
  transform-origin: center;
  animation: field-drift 26s linear infinite;
}

@keyframes field-drift {
  from {
    transform: translateX(-3%);
  }
  to {
    transform: translateX(3%);
  }
}

/* No-JS safety: nothing in this file hides content. The reveal classes in
   effects.css only apply their transform once JS has set `.js`, so the static
   render is fully legible. */

/* ==========================================================================
   Reduced motion — settle every animated element into a designed static pose
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .voice-stage__bars i,
  .editorial-field__line {
    animation: none !important;
  }

  .voice-stage__bars i {
    transform: scaleY(var(--h, 0.6));
  }

  .editorial-field__line {
    transform: none;
  }

  .stage--lift .archive-stage__stack,
  .stage--lift .package-stage__box,
  .stage--lift .voice-stage__core {
    transition: none !important;
  }

  .page-main--interior > section,
  .band-panel,
  .legal-shell__body {
    transition: none !important;
  }
}
/* ==========================================================================
   CAPABILITY ROWS

   Replaces the six-up feature card wall. Each capability becomes a wide,
   asymmetric row: a mono index, a framed visual object, and prose. The visual
   and text sides alternate, and the column ratio is set per row, so a page of
   them reads as art-directed rather than as a repeated grid.

   Every visual is a real composition (rings, transcript, spine, node), never a
   placeholder rectangle.
   ========================================================================== */

.capability-list {
  display: grid;
  gap: clamp(2.25rem, 3.4vw, 4rem);
}

.capability {
  position: relative;
  display: grid;
  gap: var(--space-md) clamp(1.25rem, 2.6vw, 2.75rem);
  align-items: center;
  grid-template-columns:
    [idx] minmax(0, 2.5rem)
    [vis] minmax(0, var(--cap-vis, 5fr))
    [txt] minmax(0, var(--cap-body, 7fr));
  grid-template-areas: "idx vis txt";
}

.capability--flip {
  grid-template-columns:
    [idx] minmax(0, 2.5rem)
    [txt] minmax(0, var(--cap-body, 7fr))
    [vis] minmax(0, var(--cap-vis, 5fr));
  grid-template-areas: "idx txt vis";
}

.capability__index {
  grid-area: idx;
  align-self: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-widest);
  color: var(--text-faint);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Hairline that ties the index to the visual — also adds edge density. */
.capability__index::after {
  content: "";
  width: 1px;
  flex: 1;
  min-height: 2.5rem;
  background: linear-gradient(
    180deg,
    var(--band-line-strong),
    transparent
  );
}

.capability__visual {
  grid-area: vis;
  position: relative;
}

.capability__body {
  grid-area: txt;
  max-width: 46ch;
}

.capability--flip .capability__body {
  justify-self: end;
}

.capability__title {
  font-size: var(--text-2xl);
  line-height: 1.14;
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-2xs);
}

.capability__body p {
  color: var(--text-soft);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.capability__body p + p {
  margin-top: var(--space-sm);
}

/* Small mono kicker above the title, e.g. "Session", "Storage". */
.capability__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--cap-accent, var(--accent-strong));
  margin-bottom: var(--space-2xs);
}

/* ---- Mini visualisations ------------------------------------------------
   Shared frame. Each variant draws a small, real composition for one
   documented capability. All decorative, all CSS-only, no raster payload. */

.miniviz {
  position: relative;
  aspect-ratio: var(--mv-ratio, 4 / 3);
  overflow: hidden;
  border: 1px solid var(--band-line-strong);
  border-radius: var(--radius-md);
  background:
    radial-gradient(
      72% 68% at 50% 42%,
      color-mix(in srgb, var(--mv-accent, var(--accent)) 22%, transparent) 0%,
      transparent 70%
    ),
    linear-gradient(
      168deg,
      color-mix(in srgb, var(--surface-2) 92%, transparent),
      color-mix(in srgb, var(--surface) 96%, transparent)
    );
  box-shadow: var(--shadow-sm), var(--shadow-inset);
  display: grid;
  align-content: center;
  padding: clamp(1.1rem, 2.2vw, 1.9rem);
}

/* Faint coordinate grid: gives small visuals the same material language as
   the hero scene instead of leaving them as empty panels. */
.miniviz::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 25% 25%;
  opacity: 0.55;
  pointer-events: none;
}

/* Lit top edge, same trick as the legal panel. */
.miniviz::after {
  content: "";
  position: absolute;
  inset-inline: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--mv-accent, var(--accent)) 80%, transparent),
    transparent
  );
  opacity: 0.7;
  pointer-events: none;
}

/* Variants lay out their own children; nothing is force-stacked here, because
   several variants (transcript, states, progress) need a real row flow. */

/* -- voice: concentric rings around a lit core ---------------------------- */
.miniviz.mv-voice,
.miniviz.mv-install {
  padding: 0;
}

.mv-voice {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}

.mv-voice__ring {
  position: absolute;
  inset: calc(var(--r) * 6%);
  border: 1px solid
    color-mix(in srgb, var(--mv-accent, var(--accent)) 44%, transparent);
  border-radius: 50%;
  transform: scale(var(--s, 1));
  opacity: calc(0.9 - var(--s, 0) * 0.22);
}

.mv-voice__core {
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    68% 68% at 34% 30%,
    var(--obj-hot) 0%,
    var(--obj-3) 32%,
    var(--mv-accent, var(--accent)) 74%,
    var(--bg-deep) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--mv-accent, var(--accent)) 50%, transparent),
    0 0 26px -3px color-mix(in srgb, var(--mv-accent, var(--accent)) 72%, transparent);
}

/* -- transcript: paired learner/partner lines, one currently lit --------- */
.mv-transcript {
  display: grid;
  gap: 7%;
  align-content: center;
}

.mv-transcript__row {
  display: flex;
  gap: 3%;
  align-items: flex-start;
}

.mv-transcript__row--b {
  justify-content: flex-end;
}

.mv-transcript__who {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid
    color-mix(in srgb, var(--mv-accent, var(--accent)) 60%, transparent);
  background: color-mix(in srgb, var(--mv-accent, var(--accent)) 22%, transparent);
}

.mv-transcript__lines {
  display: grid;
  gap: 5px;
  width: var(--w, 68%);
}

.mv-transcript__row--b .mv-transcript__lines {
  justify-items: end;
}

.mv-transcript__lines i {
  height: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-faint) 40%, transparent);
  width: var(--lw, 100%);
}

.mv-transcript__lines i:last-child {
  width: var(--lw2, 62%);
}

/* The live line: lit, full accent. This is what makes it read as live speech. */
.mv-transcript__row--live .mv-transcript__lines i {
  background: var(--mv-accent, var(--accent));
  box-shadow: 0 0 10px -2px var(--mv-accent, var(--accent));
}

.mv-transcript__row--live .mv-transcript__who {
  background: var(--mv-accent, var(--accent));
  border-color: var(--mv-accent, var(--accent));
}

/* -- topics: browsable tag field, two positions highlighted -------------- */
.mv-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: center;
}

.mv-topics i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  padding: 0.3em 0.7em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--band-line);
  color: var(--text-faint);
  background: color-mix(in srgb, var(--surface-inset) 70%, transparent);
}

/* The two argued positions, marked on both sides. */
.mv-topics i[data-side="a"] {
  color: var(--ink-speech);
  border-color: color-mix(in srgb, var(--ink-speech) 52%, transparent);
  background: color-mix(in srgb, var(--ink-speech) 14%, transparent);
}

.mv-topics i[data-side="b"] {
  color: var(--ob-mint);
  border-color: color-mix(in srgb, var(--ob-mint) 52%, transparent);
  background: color-mix(in srgb, var(--ob-mint) 14%, transparent);
}

/* -- modes: two plates, one active --------------------------------------- */
.mv-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  align-content: center;
}

.mv-modes__plate {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  border: 1px solid var(--band-line-strong);
  background: linear-gradient(
    170deg,
    color-mix(in srgb, var(--surface-3) 88%, transparent),
    color-mix(in srgb, var(--surface) 92%, transparent)
  );
  padding: 12%;
  display: grid;
  align-content: start;
  gap: 6px;
}

.mv-modes__plate i {
  height: 3px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-faint) 46%, transparent);
}

.mv-modes__plate[data-active] {
  border-color: color-mix(in srgb, var(--mv-accent, var(--accent)) 74%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--mv-accent, var(--accent)) 30%, transparent),
    0 0 22px -6px color-mix(in srgb, var(--mv-accent, var(--accent)) 70%, transparent);
}

.mv-modes__plate[data-active] i {
  background: color-mix(in srgb, var(--mv-accent, var(--accent)) 74%, transparent);
}

/* -- progress: ascending bars with session markers ----------------------- */
.mv-progress {
  display: flex;
  align-items: flex-end;
  gap: 5%;
  height: 62%;
  align-content: end;
}

.mv-progress i {
  flex: 1;
  height: var(--h, 40%);
  border-radius: var(--radius-pill) var(--radius-pill) 2px 2px;
  background: linear-gradient(
    180deg,
    var(--mv-accent, var(--accent)),
    color-mix(in srgb, var(--mv-accent, var(--accent)) 34%, transparent)
  );
  opacity: 0.82;
}

/* -- summary: a structured study sheet ------------------------------------ */
.mv-summary {
  display: grid;
  gap: 5%;
  align-content: center;
  padding-inline: 6%;
}

.mv-summary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding-bottom: 5%;
  border-bottom: 1px solid var(--band-line-strong);
}

.mv-summary__head b {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--mv-accent, var(--accent));
  font-weight: 600;
}

.mv-summary__head span {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--text-faint);
}

.mv-summary__rows {
  display: grid;
  gap: 5px;
}

.mv-summary__rows div {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  align-items: center;
  gap: 8px;
}

.mv-summary__rows u {
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--mv-accent, var(--accent));
}

.mv-summary__rows s {
  text-decoration: none;
  height: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-faint) 42%, transparent);
  width: var(--w, 100%);
}

/* -- search: a query field over matched lines ---------------------------- */
.mv-search {
  display: grid;
  gap: 6%;
  align-content: center;
}

.mv-search__field {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.5em 0.7em;
  border-radius: var(--radius-pill);
  border: 1px solid
    color-mix(in srgb, var(--mv-accent, var(--accent)) 58%, transparent);
  background: color-mix(in srgb, var(--surface-inset) 80%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--text-soft);
}

.mv-search__hits {
  display: grid;
  gap: 5px;
}

.mv-search__hits div {
  display: flex;
  gap: 6px;
  align-items: center;
}

.mv-search__hits i {
  height: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-faint) 40%, transparent);
  width: var(--w, 100%);
}

/* The matched run inside a hit line. */
.mv-search__hits em {
  font-style: normal;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--mv-accent, var(--accent));
  box-shadow: 0 0 8px -2px var(--mv-accent, var(--accent));
  width: var(--w, 22%);
}

/* -- states: availability rows ------------------------------------------- */
.mv-states {
  display: grid;
  gap: 7%;
  align-content: center;
}

.mv-states__row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.45em 0.6em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--band-line);
  background: color-mix(in srgb, var(--surface-inset) 60%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--text-soft);
}

.mv-states__dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--st, var(--text-faint));
  box-shadow: 0 0 8px -1px var(--st, var(--text-faint));
}

.mv-states__row s {
  text-decoration: none;
  margin-left: auto;
  color: var(--st, var(--text-faint));
}

/* -- preview: sheet resolving into a plate ------------------------------- */
.mv-preview {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8%;
  align-items: center;
}

.mv-preview__sheet {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  border: 1px solid var(--band-line-strong);
  background: linear-gradient(
    168deg,
    color-mix(in srgb, var(--surface-3) 90%, transparent),
    color-mix(in srgb, var(--surface) 94%, transparent)
  );
  padding: 11%;
  display: grid;
  align-content: start;
  gap: 5px;
  transform: rotate(-3deg);
}

.mv-preview__arrow {
  width: 1.5rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--mv-accent, var(--accent))
  );
  position: relative;
}

.mv-preview__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--mv-accent, var(--accent));
  border-right: 1px solid var(--mv-accent, var(--accent));
  transform: translateY(-50%) rotate(45deg);
}

.mv-preview__plate {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 1px solid
    color-mix(in srgb, var(--mv-accent, var(--accent)) 62%, transparent);
  background: radial-gradient(
    70% 70% at 50% 40%,
    color-mix(in srgb, var(--mv-accent, var(--accent)) 26%, transparent),
    transparent 72%
  );
  box-shadow: inset 0 0 22px -10px var(--mv-accent, var(--accent));
}

/* -- favourites: a shelf with one marked spine --------------------------- */
.mv-favourites {
  display: grid;
  gap: 10%;
  align-content: center;
}

.mv-favourites__row {
  display: flex;
  gap: 4%;
  align-items: flex-end;
  height: 30%;
}

.mv-favourites__spine {
  flex: 1;
  height: var(--h, 80%);
  border-radius: 2px 2px 0 0;
  border: 1px solid var(--band-line-strong);
  border-bottom: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--mv-accent, var(--accent)) 26%, transparent),
    color-mix(in srgb, var(--surface-3) 70%, transparent)
  );
}

/* The starred spine. */
.mv-favourites__spine[data-mark] {
  border-color: color-mix(in srgb, var(--ob-gold) 70%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ob-gold) 52%, transparent),
    color-mix(in srgb, var(--surface-3) 70%, transparent)
  );
  box-shadow: 0 0 16px -6px var(--ob-gold);
}

/* Shelf board under the spines. */
.mv-favourites__board {
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--mv-accent, var(--accent)) 58%, transparent),
    transparent
  );
}

/* -- install: device frame with an install plate ------------------------- */
.mv-install {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}

.mv-install__device {
  width: 52%;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  border: 1px solid
    color-mix(in srgb, var(--mv-accent, var(--accent)) 46%, transparent);
  background: linear-gradient(
    170deg,
    color-mix(in srgb, var(--surface-3) 88%, transparent),
    color-mix(in srgb, var(--surface) 94%, transparent)
  );
  box-shadow:
    inset 0 0 26px -12px var(--mv-accent, var(--accent)),
    0 0 24px -10px color-mix(in srgb, var(--mv-accent, var(--accent)) 60%, transparent);
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 16% 12% 12%;
}

.mv-install__device i {
  height: 3px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-faint) 42%, transparent);
  width: var(--w, 100%);
}

.mv-install__bar {
  position: absolute;
  inset-inline: 14%;
  bottom: 12%;
  height: 22%;
  border-radius: var(--radius-sm);
  border: 1px solid
    color-mix(in srgb, var(--mv-accent, var(--accent)) 70%, transparent);
  background: color-mix(in srgb, var(--mv-accent, var(--accent)) 24%, transparent);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text);
  backdrop-filter: blur(2px);
}

/* -- bridge: two nodes and a link ---------------------------------------- */
.mv-bridge {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 7%;
  align-items: center;
}

.mv-bridge__node {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid
    color-mix(in srgb, var(--mv-accent, var(--accent)) 58%, transparent);
  background: radial-gradient(
    66% 66% at 38% 32%,
    color-mix(in srgb, var(--mv-accent, var(--accent)) 40%, transparent),
    color-mix(in srgb, var(--surface) 92%, transparent) 74%
  );
  box-shadow: 0 0 20px -8px var(--mv-accent, var(--accent));
}

.mv-bridge__node span {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--text-soft);
  transform: translateY(58%);
}

.mv-bridge__link {
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--mv-accent, var(--accent)) 74%, transparent) 0 6px,
    transparent 6px 12px
  );
}

/* ---- Responsive ---------------------------------------------------------
   One column below 64rem: index, then the visual object, then the prose. The
   visual keeps its own size so the focal point survives on a phone. */

@media (max-width: 64rem) {
  .capability,
  .capability--flip {
    grid-template-columns: [idx] minmax(0, 100%);
    grid-template-areas:
      "idx"
      "vis"
      "txt";
    gap: var(--space-md);
  }

  .capability--flip .capability__body {
    justify-self: start;
  }

  .capability__index {
    writing-mode: horizontal-tb;
    transform: none;
    flex-direction: row;
    align-items: center;
  }

  .capability__index::after {
    width: auto;
    height: 1px;
    min-height: 0;
    max-width: 3rem;
    background: linear-gradient(90deg, var(--band-line-strong), transparent);
  }

  .capability__body {
    max-width: none;
  }
}

/* Keep the visual object from dominating a very short phone viewport. */
@media (max-width: 30rem) {
  .miniviz {
    aspect-ratio: var(--mv-ratio-sm, 3 / 2);
  }
}

/* Tablet: the row is stacked and full width, so a 5/4 stage would be a very
   tall block. Widen the ratio to keep the visual a band, not a panel. */
@media (min-width: 48rem) and (max-width: 64rem) {
  .miniviz {
    aspect-ratio: 16 / 9;
  }

  .miniviz.mv-voice,
  .miniviz.mv-install {
    aspect-ratio: 4 / 3;
  }
}

/* ---- Motion -------------------------------------------------------------
   Hover lift is a small translate, not a scale, so text never reflows. */

@media (hover: hover) and (pointer: fine) {
  .capability__visual {
    transition: transform var(--dur-4) var(--ease-out);
  }

  .capability:hover .capability__visual {
    transform: translate3d(0, -3px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .capability__visual {
    transition: none;
  }
}

/* ==========================================================================
   THREE WORLDS — staggered, not a card row

   The three exchange types are shown as three panels on a shared stage, each
   dropped to a different height, so the section reads as one composition rather
   than three equal cards.
   ========================================================================== */

.worlds {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.75rem);
  align-items: start;
}

.worlds__item {
  position: relative;
  display: grid;
  gap: var(--space-md);
  padding: clamp(1.15rem, 2vw, 1.75rem);
  border: 1px solid var(--band-line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(
      172deg,
      color-mix(in srgb, var(--surface-2) 88%, transparent),
      color-mix(in srgb, var(--surface) 94%, transparent)
    );
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}

/* The stagger. Offsets are asymmetric on purpose: 0 / 2 units / 4 units. */
.worlds__item:nth-child(2) {
  margin-top: clamp(1.5rem, 3.4vw, 3.5rem);
}

.worlds__item:nth-child(3) {
  margin-top: clamp(3rem, 6.8vw, 7rem);
}

/* The tallest panel carries the accent; the others stay quieter so the
   composition has a clear focal point. */
.worlds__item[data-lead] {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--band-line));
  box-shadow:
    var(--shadow-md),
    var(--shadow-inset),
    0 0 46px -22px var(--accent);
}

.worlds__item[data-lead]::before {
  content: "";
  position: absolute;
  inset-inline: 14%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent
  );
  opacity: 0.8;
}

.worlds__title {
  font-size: var(--text-xl);
  line-height: 1.16;
  letter-spacing: var(--tracking-snug);
}

.worlds__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-soft);
  padding-left: var(--space-sm);
  border-left: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
}

.worlds__body {
  font-size: var(--text-sm);
  color: var(--text-soft);
  line-height: var(--leading-relaxed);
}

/* -- bubbles: an everyday exchange --------------------------------------- */
.mv-bubbles {
  display: grid;
  gap: 8%;
  align-content: center;
}

.mv-bubbles__b {
  padding: 8% 10%;
  border-radius: var(--radius-md);
  border: 1px solid var(--band-line-strong);
  background: color-mix(in srgb, var(--surface-inset) 70%, transparent);
  font-size: var(--text-3xs);
  color: var(--text-soft);
  width: var(--w, 78%);
}

.mv-bubbles__b--b {
  justify-self: end;
  border-color: color-mix(in srgb, var(--mv-accent, var(--accent)) 52%, transparent);
  background: color-mix(in srgb, var(--mv-accent, var(--accent)) 18%, transparent);
}

/* -- argue: two positions meeting ---------------------------------------- */
.mv-argue {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6%;
  align-items: center;
}

.mv-argue__side {
  display: grid;
  gap: 6px;
  align-content: center;
}

.mv-argue__side span {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--sc, var(--text-faint));
  width: var(--w, 100%);
  opacity: 0.8;
}

.mv-argue__mid {
  width: 1px;
  height: 74%;
  justify-self: center;
  background: linear-gradient(
    180deg,
    transparent,
    var(--mv-accent, var(--accent)),
    transparent
  );
  box-shadow: 0 0 12px -3px var(--mv-accent, var(--accent));
}

/* -- tasks: the three oral tasks in sequence ----------------------------- */
.mv-tasks {
  display: grid;
  gap: 7%;
  align-content: center;
}

.mv-tasks__row {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 8px;
  align-items: center;
}

.mv-tasks__row u {
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--mv-accent, var(--accent));
  border: 1px solid
    color-mix(in srgb, var(--mv-accent, var(--accent)) 54%, transparent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}

.mv-tasks__row s {
  text-decoration: none;
  height: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-faint) 44%, transparent);
  width: var(--w, 100%);
}

.mv-tasks__row[data-done] s {
  background: var(--mv-accent, var(--accent));
  box-shadow: 0 0 10px -3px var(--mv-accent, var(--accent));
}

/* ==========================================================================
   SESSION FLOW — a run through a practice session

   Replaces a plain numbered list. A continuous rail, numbered nodes, an
   alternating indent for asymmetry, and a phase bar that fills as the run
   progresses, so the section carries real visual material.
   ========================================================================== */

.session-flow {
  display: grid;
  gap: clamp(1.35rem, 2.2vw, 2.25rem);
}

.session-flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: clamp(0.9rem, 1.8vw, 1.75rem);
  align-items: start;
}

/* Connector between nodes. */
.session-flow__step::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 2.4rem;
  bottom: calc(-1 * clamp(1.35rem, 2.2vw, 2.25rem));
  width: 1px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 52%, transparent),
    var(--band-line)
  );
}

.session-flow__step:last-child::before {
  display: none;
}

.session-flow__node {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid
    color-mix(in srgb, var(--accent) 58%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--accent);
  box-shadow: 0 0 20px -8px var(--accent);
}

.session-flow__text {
  display: grid;
  gap: var(--space-2xs);
  padding-top: 0.35rem;
  max-width: 62ch;
}

/* Alternating indent: the asymmetry that stops this reading as a list. */
.session-flow__step:nth-child(even) .session-flow__text {
  margin-left: clamp(0rem, 5vw, 4.5rem);
}

.session-flow__title {
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: var(--tracking-snug);
}

.session-flow__body {
  font-size: var(--text-sm);
  color: var(--text-soft);
  line-height: var(--leading-relaxed);
}

/* Phase bar: fills across the run. Honest — it is the step's position. */
.session-flow__bar {
  margin-top: var(--space-2xs);
  height: 3px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-faint) 22%, transparent);
  overflow: hidden;
}

.session-flow__bar i {
  display: block;
  height: 100%;
  width: var(--p, 20%);
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 46%, transparent),
    var(--accent)
  );
  box-shadow: 0 0 10px -3px var(--accent);
}

@media (max-width: 48rem) {
  .worlds {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Offsets go away on a phone: a staggered stack would just read as broken. */
  .worlds__item:nth-child(2),
  .worlds__item:nth-child(3) {
    margin-top: 0;
  }

  .session-flow__step:nth-child(even) .session-flow__text {
    margin-left: 0;
  }
}

/* ==========================================================================
   LAYER STACK — Resource / File / Document as an exploded diagram

   The three words are a nesting relationship, so they are shown as three
   planes separated in real 3D rather than as a list. Each plane carries its
   own definition, so the diagram is the content.
   ========================================================================== */

.layerstack {
  position: relative;
  display: grid;
  gap: clamp(0.85rem, 1.5vw, 1.35rem);
  perspective: 1500px;
  perspective-origin: 50% 42%;
}

.layerstack__plane {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: clamp(0.9rem, 2vw, 2rem);
  align-items: center;
  padding: clamp(1.1rem, 2vw, 1.75rem);
  border: 1px solid var(--band-line-strong);
  border-radius: var(--radius-md);
  background:
    linear-gradient(
      166deg,
      color-mix(in srgb, var(--surface-2) 90%, transparent),
      color-mix(in srgb, var(--surface) 94%, transparent)
    );
  box-shadow: var(--shadow-md), var(--shadow-inset);
  /* Real Z separation: the planes recede from the viewer. */
  transform: translate3d(var(--dx, 0px), 0, var(--dz, 0px));
  transform-style: preserve-3d;
}

/* Cascade: each plane steps in and back, so the stack reads as depth.
   The recession goes LEFT and stays shallow. Pushing it right while translateZ
   scales the plane up pushes its far edge past the container — that produced a
   6px horizontal overflow at 1600px before this was corrected. */
.layerstack__plane:nth-child(1) {
  --dz: 0px;
  --dx: 0px;
  z-index: 3;
}

.layerstack__plane:nth-child(2) {
  --dz: 30px;
  --dx: calc(-1 * clamp(0.75rem, 2vw, 1.75rem));
  z-index: 2;
  opacity: 0.94;
}

.layerstack__plane:nth-child(3) {
  --dz: 60px;
  --dx: calc(-1 * clamp(1.5rem, 4vw, 3.5rem));
  z-index: 1;
  opacity: 0.88;
}

/* Lit edge on the front plane only, so depth order stays unambiguous. */
.layerstack__plane:nth-child(1)::before {
  content: "";
  position: absolute;
  inset-inline: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent
  );
}

.layerstack__tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.layerstack__plane:nth-child(1) .layerstack__tag::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.layerstack__body {
  font-size: var(--text-sm);
  color: var(--text-soft);
  line-height: var(--leading-relaxed);
}

@media (max-width: 48rem) {
  /* Perspective separation is a wide-viewport device; on a phone it just
     shrinks the type. Fall back to a plain cascade. */
  .layerstack__plane,
  .layerstack__plane:nth-child(1),
  .layerstack__plane:nth-child(2),
  .layerstack__plane:nth-child(3) {
    --dz: 0px;
    --dx: 0px;
    transform: none;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
    opacity: 1;
  }
}

/* ==========================================================================
   GAP CARDS — documented gaps as visibly unfilled slots

   An honest gap is drawn as an empty, marked slot rather than hidden in prose.
   Nothing here implies a feature exists.
   ========================================================================== */

.gaps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}

.gapcard {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: clamp(1.25rem, 2.2vw, 1.9rem);
  border: 1px solid var(--band-line);
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--surface-inset) 60%, transparent) 0 1px,
      transparent 1px 9px
    ),
    linear-gradient(
      170deg,
      color-mix(in srgb, var(--surface-2) 76%, transparent),
      color-mix(in srgb, var(--surface) 88%, transparent)
    );
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}

.gapcard__tag {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ob-gold);
  padding: 0.35em 0.7em;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--ob-gold) 46%, transparent);
  background: color-mix(in srgb, var(--ob-gold) 12%, transparent);
}

.gapcard__title {
  font-size: var(--text-xl);
  line-height: 1.16;
  letter-spacing: var(--tracking-snug);
}

.gapcard__body {
  font-size: var(--text-sm);
  color: var(--text-soft);
  line-height: var(--leading-relaxed);
}

/* The empty slot. Dashed, low contrast, and never filled. */
.gapcard__slot {
  margin-top: var(--space-2xs);
  min-height: 3.25rem;
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--text-faint) 46%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-deep) 26%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
}

@media (max-width: 48rem) {
  .gaps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Batch 2: Downloads requirements -------------------------------------
   These three are technical preconditions, not product features, so the
   visuals are diagrams of a mechanism rather than product scenes. */
.mv-wave {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.mv-wave__axis {
  fill: none;
  stroke: var(--grid-line);
  stroke-width: 1;
}

.mv-wave__line {
  fill: none;
  stroke: var(--mv-accent, var(--accent));
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mv-accent, var(--accent)) 55%, transparent));
}

.mv-wave__head {
  position: absolute;
  top: 14%;
  bottom: 14%;
  left: 62%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--mv-accent, var(--accent)),
    transparent
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--mv-accent, var(--accent)) 70%, transparent);
}

.mv-wave__tag {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.mv-wave__tag--in { left: 6%; top: 12%; }

.mv-wave__tag--out { right: 6%; bottom: 12%; }

/* WebSocket transport: browser and server, one link, packets on the wire. */
.mv-socket {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.1rem);
}

.mv-socket__node {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  padding: 0.7rem 0.6rem;
  border: 1px solid var(--band-line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}

.mv-socket__glyph {
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--mv-accent, var(--accent));
  border-radius: var(--radius-3xs);
  opacity: 0.9;
}

.mv-socket__label {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}

.mv-socket__link {
  position: relative;
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--mv-accent, var(--accent)) 20%, transparent),
    var(--mv-accent, var(--accent)),
    color-mix(in srgb, var(--mv-accent, var(--accent)) 20%, transparent)
  );
}

.mv-socket__packet {
  position: absolute;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: -0.2rem;
  border-radius: 50%;
  background: var(--mv-accent, var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--mv-accent, var(--accent)) 80%, transparent);
}

.mv-socket__packet:nth-child(1) { left: 18%; }
.mv-socket__packet:nth-child(2) { left: 48%; }
.mv-socket__packet:nth-child(3) { left: 78%; }

/* Service worker: an installed shell that keeps working without a network. */
.mv-offline {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
}

.mv-offline__device {
  width: min(9rem, 62%);
  aspect-ratio: 3 / 4;
  border: 1px solid var(--band-line-strong);
  border-radius: var(--radius-md);
  background: linear-gradient(
    168deg,
    color-mix(in srgb, var(--surface-2) 92%, transparent),
    color-mix(in srgb, var(--surface) 96%, transparent)
  );
  box-shadow: var(--shadow-sm), var(--shadow-inset);
  padding: 0.7rem 0.6rem;
  display: grid;
  gap: 0.34rem;
  align-content: start;
}

.mv-offline__line {
  height: 0.28rem;
  border-radius: var(--radius-pill);
  background: var(--band-line);
}

.mv-offline__line:nth-child(1) { width: 72%; background: color-mix(in srgb, var(--mv-accent, var(--accent)) 46%, transparent); }
.mv-offline__line:nth-child(2) { width: 88%; }
.mv-offline__line:nth-child(3) { width: 54%; }
.mv-offline__line:nth-child(4) { width: 78%; }

.mv-offline__check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.mv-offline__check::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1px solid var(--mv-accent, var(--accent));
  background:
    linear-gradient(45deg, transparent 44%, var(--mv-accent, var(--accent)) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--mv-accent, var(--accent)) 44% 56%, transparent 56%);
}

/* ---- Approach principles (About) ------------------------------------------
   Deliberately neither a capability list nor a card grid. These are editorial
   claims, so they read as ruled rows: mono numeral, serif title, and a small
   mark carrying the argument. The type does the work, which is the point the
   section is making. */
.principles {
  margin-top: var(--space-xl);
}

.principle {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: clamp(0.9rem, 2.2vw, 2.2rem);
  align-items: start;
  padding-block: clamp(1.4rem, 2.8vw, 2.4rem);
  border-top: 1px solid var(--band-line);
}

.principle:last-child {
  border-bottom: 1px solid var(--band-line);
}

.principle__num {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.18em;
  color: var(--text-faint);
  padding-top: 0.4rem;
}

.principle__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  margin-bottom: 0.45rem;
}

.principle__body {
  color: var(--text-muted);
  max-width: 62ch;
}

.principle__mark {
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--band-line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}

/* calm before clever: rings settling to a still centre */
.pm-calm {
  display: grid;
  place-items: center;
}

.pm-calm span {
  position: absolute;
  border: 1px solid var(--accent);
  border-radius: 50%;
}

.pm-calm span:nth-child(1) { width: 0.5rem; height: 0.5rem; background: var(--accent); }
.pm-calm span:nth-child(2) { width: 1.1rem; height: 1.1rem; opacity: 0.62; }
.pm-calm span:nth-child(3) { width: 1.75rem; height: 1.75rem; opacity: 0.34; }

/* typography does the work: a measure column over text lines */
.pm-type {
  position: relative;
  width: 1.9rem;
  height: 2.1rem;
}

.pm-type span {
  position: absolute;
  left: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--band-line-strong);
}

.pm-type span:nth-child(1) { top: 0.2rem; width: 78%; background: var(--accent); }
.pm-type span:nth-child(2) { top: 0.62rem; width: 100%; }
.pm-type span:nth-child(3) { top: 1.04rem; width: 92%; }
.pm-type span:nth-child(4) { top: 1.46rem; width: 100%; }

.pm-type::before,
.pm-type::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--accent-line);
}

.pm-type::before { left: 0; }
.pm-type::after { right: 0; }

/* human, not gamified: slots that stay empty on purpose */
.pm-plain {
  position: relative;
  width: 1.9rem;
  height: 1.7rem;
}

.pm-plain span {
  position: absolute;
  top: 0;
  width: 0.55rem;
  height: 0.55rem;
  border: 1px dashed var(--band-line-strong);
  border-radius: var(--radius-3xs);
}

.pm-plain span:nth-child(1) { left: 0; }
.pm-plain span:nth-child(2) { left: 0.68rem; }
.pm-plain span:nth-child(3) { left: 1.36rem; }

.pm-plain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  opacity: 0.8;
}

/* private by construction: a closed plate */
.pm-private {
  position: relative;
  width: 1.6rem;
  height: 1.35rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-3xs);
  opacity: 0.9;
}

.pm-private::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.62rem;
  width: 0.8rem;
  height: 0.62rem;
  margin-left: -0.4rem;
  border: 1px solid var(--accent);
  border-bottom: 0;
  border-radius: 0.5rem 0.5rem 0 0;
}

@media (max-width: 64rem) {
  .principle {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .principle__mark {
    grid-column: 2;
    justify-self: start;
    margin-top: 0.6rem;
  }
}

@media (max-width: 40rem) {
  .mv-socket__label { font-size: 0.5rem; letter-spacing: 0.06em; }
}

/* ---- Batch 3: Homepage lower sections -------------------------------------
   The Tracker field is the focal object, so it gets the wide column and the
   three concept statements sit beside it as a ruled ledger rather than
   underneath it as a card wall. */
.track-composition {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: start;
  margin-top: var(--space-lg);
}

.track-composition .track-field {
  margin-top: 0;
  aspect-ratio: 16 / 10;
}

.track-composition .track-field__status {
  position: relative;
  z-index: 1;
}

.track-ledger {
  display: grid;
  align-content: start;
}

.track-ledger__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  padding-block: clamp(0.9rem, 1.6vw, 1.15rem);
  border-top: 1px solid var(--band-line);
}

.track-ledger__item:last-child {
  border-bottom: 1px solid var(--band-line);
}

.track-ledger__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--ink-tracker);
  opacity: 0.85;
}

.track-ledger__title {
  font-size: var(--text-base);
  margin-bottom: 0.2rem;
}

.track-ledger__body {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Library showcase ledger: three statements across one hairline-divided row.
   A third shape, so Home does not read as capability-rows-again. */
.ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-lg);
}

.ledger__item {
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.7rem);
  border-left: 1px solid var(--band-line);
}

.ledger__item:first-child {
  border-left: 0;
  padding-left: 0;
}

.ledger__item:last-child {
  padding-right: 0;
}

.ledger__num {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: 0.18em;
  color: var(--text-faint);
  margin-bottom: 0.5rem;
}

.ledger__title {
  font-size: var(--text-base);
  margin-bottom: 0.3rem;
}

.ledger__body {
  color: var(--text-muted);
  font-size: var(--text-sm);
  max-width: 40ch;
}

@media (max-width: 64rem) {
  .track-composition {
    grid-template-columns: minmax(0, 1fr);
  }

  .ledger {
    grid-template-columns: minmax(0, 1fr);
  }

  .ledger__item {
    border-left: 0;
    border-top: 1px solid var(--band-line);
    padding-inline: 0;
  }

  .ledger__item:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .ledger__item:last-child {
    border-bottom: 0;
  }
}