/* ============================================================
   INDEX1 — VARIANT OVERRIDES
   Loaded AFTER style.css. Holds only what differs from the base
   page; everything else is inherited, so a fix to a shared
   section reaches both pages.
   ============================================================ */

/* ============================================================
   VII. ENGINE — the performance field
   The copy argues distribution — a few posts carry most of the
   reach — so the visual is a real performance field over a
   graded photographic plate, not an abstract diagram.
   ============================================================ */
.sc-engine {
  position: relative;
  isolation: isolate; /* confines the plate's stacking context to this section */
}
/* ---- Background plate ----------------------------------------
   Graded like the hero portrait — desaturated, contrast lifted,
   violet wash, edges dissolved — so the stock image sits in the
   page's palette rather than against it. */
.eplate {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.eplate img {
  position: absolute;
  inset: -12% 0 -12% 0; /* headroom for the parallax drift */
  width: 100%;
  height: 124%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: grayscale(0.82) contrast(1.15) brightness(0.34);
  will-change: transform;
}
.eplate:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 70% 60% at 70% 40%,
      rgb(var(--rgb-primary) / 0.3),
      transparent 70%
    ),
    linear-gradient(90deg, var(--bg) 6%, rgb(15 10 20 / 0.72) 52%),
    linear-gradient(0deg, var(--bg) 3%, transparent 30%),
    linear-gradient(180deg, var(--bg) 2%, transparent 26%);
}

/* ---- The performance field ------------------------------------ */
.efield {
  position: relative;
  justify-self: center;
  width: 100%;
  border: 1px solid var(--line);
  background: rgb(10 6 20 / 0.5);
  backdrop-filter: blur(6px);
  padding: clamp(18px, 2.4vw, 30px);
}
.efield-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.efield-label,
.efield-legend i {
  font-family: var(--display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  font-style: normal;
}
.efield-label {
  color: var(--ink-soft);
}
.efield-legend i {
  color: var(--accent);
}
/* align-items:flex-end gives the bars a shared baseline to grow from. */
.efield-plot {
  display: flex;
  align-items: flex-end;
  gap: clamp(4px, 0.7vw, 9px);
  height: clamp(150px, 24vh, 250px);
  margin-top: clamp(18px, 2.6vh, 30px);
}
.ebar {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
/* --h is the post's reach as a percentage of the best performer.
   The timeline drives scaleY from 0, so the field builds on entry. */
.ebar-fill {
  display: block;
  width: 100%;
  height: calc(var(--h) * 1%);
  min-height: 3px;
  transform: scaleY(0);
  transform-origin: bottom center;
  background: linear-gradient(
    0deg,
    rgb(var(--rgb-primary) / 0.28),
    rgb(var(--rgb-primary) / 0.7)
  );
  border-top: 1px solid var(--accent);
}
/* The top two read as signal; the tail is noise. */
.ebar:nth-child(-n + 2) .ebar-fill {
  background: linear-gradient(
    0deg,
    rgb(var(--rgb-primary) / 0.5),
    var(--accent)
  );
  box-shadow: 0 0 34px rgb(var(--rgb-primary) / 0.42);
}
.efield-note {
  margin: clamp(16px, 2.2vh, 24px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
}
.efield-note b {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 1024px) {
  .efield-plot {
    height: clamp(120px, 20vh, 180px);
  }
}
@media (max-width: 600px) {
  .eplate img {
    filter: grayscale(0.82) contrast(1.15) brightness(0.26);
  }
  .efield {
    padding: 16px;
  }
}
/* Neither condition runs the build tween, so the bars rest at full height.
   This list mirrors the early-return guard in main1.js; keep the two in step. */
@media (prefers-reduced-motion: reduce), (max-width: 600px) {
  .ebar-fill {
    transform: scaleY(1);
  }
}

/* ============================================================
   IX. PROCESS — machine becomes person
   Pinned split-screen. The argument holds the left column while
   a traced wireframe of the portrait constructs itself on the
   right, then the photograph resolves through it.
   ============================================================ */
.sc-process-x {
  height: 100svh;
}
/* ScrollTrigger pins the section itself, so the stage must not also be sticky
   — it would stick inside its own pinned parent and ride up under the previous
   scene. Matches the override on the base page's pinned scenes. */
.sc-process-x .stage {
  position: relative;
}
.px-stage {
  background: var(--bg);
  align-content: safe center;
  overflow: hidden;
}
.px-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(12px, 2.4vh, 26px) var(--pad);
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
}

/* ---- Left column: the argument ------------------------------- */
/* Mirrors .kicker but carries a private class: base main.js animates every
   .kicker on the page, and that reveal is built before this scene's pin
   exists, so it would fire far too early. */
.px-kicker {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
  /* Inline flow, matching .kicker. A flex row can only break between its
     items, which strands the separators. */
  line-height: 1.7;
  overflow-wrap: anywhere;
  opacity: 0;
}
.px-kicker i {
  font-style: normal;
  color: var(--dim);
  font-size: 9px;
  white-space: nowrap;
  margin-inline-end: 14px;
}
/* Larger than the base .h-scene: this section is the page's centrepiece and
   the type scale says so. Fixed, not scroll-driven — a headline that resizes
   mid-scroll destabilises the hierarchy every other section is built on. */
.px-title {
  margin-top: 18px;
  max-width: 18ch;
  opacity: 0;
  font-size: clamp(34px, 4.3vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.px-phases {
  list-style: none;
  margin: clamp(26px, 4.5vh, 54px) 0 0;
  padding: 0;
}
/* Each phase is dim until the construction reaches it, then resolves to full
   presence, so copy and drawing advance together. The active phase also scales
   up — the type size itself carries the emphasis. */
.px-phase {
  position: relative; /* anchors the :before progress rule */
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 1.9vw, 28px);
  padding: clamp(14px, 2.1vh, 24px) 0;
  border-top: 1px solid var(--line-soft);
  opacity: 0.22;
  /* GSAP animates this; declared here so the no-JS resting state is correct. */
  transform-origin: left center;
}
.px-phase:last-child {
  border-bottom: 1px solid var(--line-soft);
}
/* A rule that draws itself along the active phase. GSAP cannot target a
   pseudo-element, so the timeline animates --px-rule on the <li> and the
   pseudo-element reads it. @property below registers it as <number> so it
   interpolates instead of flipping 0 -> 1 at the halfway point. */
@property --px-rule {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.px-phase:before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(var(--px-rule, 0));
  transform-origin: left center;
}
.px-n {
  font-family: var(--display);
  font-size: clamp(15px, 1.5vw, 22px);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  padding-top: 6px;
  min-width: 2.4ch;
}
.px-phase h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 33px);
  letter-spacing: -0.025em;
  line-height: 1.12;
}
.px-phase p {
  margin: 0;
  font-size: clamp(13px, 1.02vw, 15px);
  line-height: 1.68;
  color: var(--dim);
  max-width: 46ch;
}
.px-foot {
  margin: clamp(18px, 2.6vh, 34px) 0 0;
  max-width: 60ch;
  opacity: 0;
}

/* ---- Right column: the transformation ------------------------ */
.px-figure {
  margin: 0;
  justify-self: center;
  width: 100%;
}
/* Mesh and photo must crop IDENTICALLY or the wireframe drifts off the face.
   Both describe the same window on the source image: the SVG via
   viewBox="140 170 1120 1360", the photo via the scale+position below. The
   frame's aspect-ratio must equal that window (1120/1360). */
.px-frame {
  position: relative;
  width: 100%;
  max-width: clamp(250px, 33vh, 420px);
  margin: 0 auto;
  aspect-ratio: 1120 / 1360;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-deep);
}
/* The photo lives INSIDE the SVG as an <image> at the source image's own
   coordinates (0 0 1400 2238), so one viewBox governs photo and mesh together
   and they scale and crop as a single unit. Do not position it with CSS
   offsets — that decouples it from the viewBox. */
.px-photo {
  filter: grayscale(1) contrast(1.12) brightness(0.52);
  opacity: 0.18;
  will-change: filter, opacity;
}
/* Violet wash, matching the grade on every other photographic surface. */
.px-frame:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 50% 30%,
      rgb(var(--rgb-primary) / 0.22),
      transparent 68%
    ),
    linear-gradient(0deg, var(--bg-deep) 2%, transparent 34%);
}
/* Must clip: the <image> inside is the full 1400x2238 source and the viewBox
   shows only a window onto it. overflow:visible paints the rest outside the frame. */
.px-mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* Three stroke weights: construction faintest, structure carrying the drawing,
   features brightest. A single weight throughout reads as clip-art. */
.px-axis path,
.px-axis ellipse {
  stroke: rgb(var(--rgb-primary) / 0.3);
  stroke-width: 2;
  stroke-dasharray: 10 14;
  vector-effect: non-scaling-stroke;
}
.px-struct path {
  stroke: rgb(var(--rgb-primary) / 0.62);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.px-feat path {
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.px-nodes circle {
  fill: var(--accent);
  stroke: none;
  opacity: 0;
}

/* Sweeps down the frame as the photograph resolves. */
.px-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--rgb-primary) / 0.9),
    transparent
  );
  box-shadow: 0 0 26px 6px rgb(var(--rgb-primary) / 0.34);
}

.px-readout {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: linear-gradient(0deg, var(--bg-deep), transparent);
}
.px-readout b,
.px-readout i {
  font-family: var(--display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.24em;
  font-style: normal;
  font-variant-numeric: lining-nums tabular-nums;
}
.px-readout b {
  color: var(--ink-soft);
}
.px-readout i {
  color: var(--accent);
}

/* ---- Responsive ---------------------------------------------- */
@media (max-width: 1024px) {
  .px-inner {
    grid-template-columns: 1fr;
    gap: clamp(22px, 4vh, 40px);
  }
  /* Portrait first on a narrow screen — the transformation is the section's
     point and should not sit below a wall of text. */
  .px-figure {
    order: -1;
  }
  .px-frame {
    max-width: clamp(200px, 26vh, 300px);
  }
  .px-title {
    max-width: none;
  }
}
@media (max-width: 600px) {
  /* No pin on a phone, so the timeline never runs; everything it would have
     revealed must rest visible. */
  .sc-process-x {
    height: auto;
  }
  .px-phase,
  .px-foot,
  .px-kicker,
  .px-title {
    opacity: 1;
  }
  .px-photo {
    filter: grayscale(0) contrast(1.02) brightness(0.9);
    opacity: 1;
  }
  /* The photo is an <image> inside .px-mesh, so the SVG itself must stay
     displayed; hide only the drawn layers. */
  .px-axis,
  .px-struct,
  .px-feat,
  .px-nodes {
    display: none;
  }
  /* The timeline normally drives the rule; without it, it rests drawn. */
  .px-phase {
    --px-rule: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-phase,
  .px-foot,
  .px-kicker,
  .px-title {
    opacity: 1;
  }
  .px-photo {
    filter: grayscale(0) contrast(1.02) brightness(0.9);
    opacity: 1;
  }
  /* The photo is an <image> inside .px-mesh, so the SVG itself must stay
     displayed; hide only the drawn layers. */
  .px-axis,
  .px-struct,
  .px-feat,
  .px-nodes {
    display: none;
  }
  /* The timeline normally drives the rule; without it, it rests drawn. */
  .px-phase {
    --px-rule: 1;
  }
}
.sc-anatomy .kicker {
  justify-content: center;
}

/* ============================================================
   X — THE LEDGER (variant)
   The first year as four dated entries, each carrying a photograph
   graded to where the persona is by then: month 1 raw and colourless,
   month 12 resolved and commercial. Authored so the END state is the
   default — without JS every row is readable and every photograph
   already developed.
   ============================================================ */
.sc-ledger {
  background: var(--bg-elev);
  overflow: clip; /* the figures scale slightly on entry */
}
.lg-head {
  max-width: none;
}
.lg-title {
  margin-top: 20px;
  max-width: 30ch;
}

.lg-rows {
  position: relative;
  margin-top: clamp(50px, 8vh, 96px);
  border-top: 1px solid var(--line);
}

/* Connects the entries down the number column. A real element, not a
   pseudo, because GSAP cannot target pseudo-elements. */
.lg-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    var(--primary),
    rgb(var(--rgb-primary) / 0.55) 62%,
    rgb(var(--rgb-primary) / 0.08)
  );
  transform: scaleY(0);
  transform-origin: top center;
}

.lg-row {
  position: relative;
  display: grid;
  /* The image column is sized outright rather than left to share a bare
     1fr with the copy: at wide viewports a free split starves the
     photograph and strands empty space on the right. */
  grid-template-columns: auto minmax(300px, 34vw) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 46px);
  align-items: center;
  padding: clamp(26px, 3.6vh, 46px) 0;
  border-bottom: 1px solid var(--line-soft);
}
.lg-n {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  padding-left: clamp(14px, 2vw, 28px);
  align-self: start;
}

/* ---------- The photograph ----------
   The wipe is a clip-path on the frame; the image inside counter-scales so
   the reveal uncovers a still photograph rather than dragging it. */
.lg-figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-soft);
  background: var(--bg);
  clip-path: inset(0 0 0 0);
}
.lg-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Fallback for any row the per-row nth-child grades below don't reach. */
  filter: grayscale(0.55) contrast(1.1) brightness(0.72);
}
/* Violet cast, consistent with every other photographic surface, fading
   row by row as the persona resolves. */
.lg-figure:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    200deg,
    rgb(var(--rgb-primary) / 0.42),
    transparent 62%
  );
  pointer-events: none;
  transition: opacity var(--t-base);
}

/* THE GRADING ARC. Month 1 is nearly monochrome and dim; by months 7–12 the
   image has resolved to full presence — "machine becomes a person" on a time
   axis.

   The arc floors at grayscale(0.3) rather than 0. Full colour lets the stock
   photography's own palette through, which does not belong to this page's
   violet grade. 0.3 keeps the last frame clearly the most resolved of the
   four while staying in the page. */
.lg-row:nth-child(2) .lg-figure img {
  filter: grayscale(0.95) contrast(1.2) brightness(0.46) saturate(0.7);
}
.lg-row:nth-child(3) .lg-figure img {
  filter: grayscale(0.78) contrast(1.14) brightness(0.56) saturate(0.8);
}
/* This row's source is a white-walled room, far brighter than its three
   neighbours, so it is graded harder than the arc alone would give it. */
.lg-row:nth-child(4) .lg-figure img {
  filter: grayscale(0.72) contrast(1.1) brightness(0.5) saturate(0.72);
}
.lg-row:nth-child(5) .lg-figure img {
  filter: grayscale(0.3) contrast(1.04) brightness(0.78) saturate(1);
}
.lg-row:nth-child(2) .lg-figure:after {
  opacity: 1;
}
.lg-row:nth-child(3) .lg-figure:after {
  opacity: 0.82;
}
.lg-row:nth-child(4) .lg-figure:after {
  opacity: 0.64;
}
.lg-row:nth-child(5) .lg-figure:after {
  opacity: 0.46;
}

/* Date stacked above the title, not beside it: side by side the gutter the
   date needs pushes the headline into the middle of the row. Stacked, the
   copy reads as one block anchored to the photograph. */
.lg-body {
  display: grid;
  gap: 10px;
  align-content: center;
  max-width: 52ch;
}
.lg-when {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.lg-row h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 46px);
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin: 0;
}
.lg-row p {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--dim);
  max-width: 44ch;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .lg-row {
    grid-template-columns: auto minmax(220px, 38vw) minmax(0, 1fr);
    gap: clamp(16px, 2.6vw, 32px);
  }
}
@media (max-width: 760px) {
  .lg-row {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 14px 18px;
  }
  /* The photograph moves below the copy rather than being dropped — the
     imagery carries the section and a narrow column is no reason to lose it. */
  .lg-figure {
    grid-column: 1 / -1;
    grid-row: 2;
    aspect-ratio: 16 / 9;
    margin-top: 4px;
  }
  .lg-body {
    grid-column: 2;
    grid-row: 1;
  }
  .lg-n {
    padding-left: 0;
  }
  .lg-spine {
    display: none;
  }
}

/* Without JS or motion the ledger is already complete; only the spine needs
   its resting state corrected, since the timeline would have drawn it. */
@media (prefers-reduced-motion: reduce) {
  .lg-spine {
    transform: scaleY(1);
  }
}

/* ============================================================
   XIII. TEAM (variant)
   Portraits graded to the page like every other photograph here,
   resolving to full colour on hover — the "machine becomes person"
   move at portrait scale.
   ============================================================ */
.sc-team {
  background: var(--bg-elev);
}
.team-head {
  max-width: none;
}
.team-head .h-scene {
  margin-top: 20px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 46px) clamp(18px, 2.6vw, 40px);
  margin-top: clamp(50px, 8vh, 96px);
}
/* Centres an orphan card left by a count that does not divide by three:
   span all three columns, then cap the width to one column. The
   :last-child:nth-child(3n+1) pair matches only when an orphan actually
   exists, so members can be added or removed freely. */
.team-grid .member:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
  max-width: calc((100% - 2 * clamp(18px, 2.6vw, 40px)) / 3);
  margin-inline: auto;
}
.member-figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-deep);
}
.member-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%; /* keep faces clear of the top crop */
  filter: grayscale(0.9) contrast(1.1) brightness(0.82) saturate(0.8);
  transform: scale(1.02);
  transition:
    filter 0.7s var(--e-lux),
    transform 0.9s var(--e-lux);
}
.member:hover .member-figure img {
  filter: grayscale(0) contrast(1.02) brightness(0.98) saturate(1);
  transform: scale(1.06);
}
/* Violet floor so the portraits sit in the page rather than on it. */
.member-figure:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(10 6 20 / 0.62), transparent 46%);
}
.member h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 22px);
  letter-spacing: -0.02em;
  margin: 20px 0 6px;
}
.member p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
}

@media (max-width: 900px) {
  .team-grid {
    gap: clamp(16px, 2.4vw, 30px);
  }
  .member h3 {
    margin-top: 16px;
  }
}
@media (max-width: 600px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 14px;
  }
  /* At two columns the three-column orphan rule still matches, so reset it
     before re-centring the orphan against two. */
  .team-grid .member:last-child:nth-child(3n + 1) {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
  }
  .team-grid .member:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc((100% - 14px) / 2);
    margin-inline: auto;
  }
  .member h3 {
    font-size: 15px;
    margin-top: 14px;
  }
  .member p {
    font-size: 12px;
  }
}

/* ============================================================
   V. SHOWCASE — YouTube facade (variant)
   Each reel shows a cover image until it is clicked; main1.js then
   swaps in the YouTube iframe. The cover carries the same depth and
   grading as the frame it replaces.
   ============================================================ */
.reel-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
  display: block;
}
.reel-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 4; /* above .reel:after, which would otherwise veil the video */
}
/* Neither the cover nor the section's gradient veil may sit over a running
   video, so both clear once playback starts. */
.reel.is-playing .reel-cover,
.reel.is-playing:after {
  opacity: 0;
}
.reel-cover {
  transition: opacity var(--t-base) var(--e-lux);
}

/* ============================================================
   MOBILE CONDENSATION (variant)
   Products and the Ledger become swipeable rails under 600px; the
   desktop grids above are untouched. Slick's stylesheet is NOT loaded
   on this page, so every .slick-* rule each carousel needs is written
   here, scoped. See NOTES.md § "Mobile rails" before changing any of it.
   ============================================================ */
@media (max-width: 600px) {
  /* ---- Shared slider chrome ----
     Dots are the only signal that the rail exists. The visible mark is
     8px; the button around it is a 44px tap target. */
  .slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
  }
  .slick-dots li {
    margin: 0;
  }
  .slick-dots li:before {
    content: none; /* cancels the base sheet's global list-item decoration */
  }
  .slick-dots button {
    /* 44x44 tap target; the visible dot is drawn by :before. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .slick-dots button:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border: 1px solid var(--line-lit);
    border-radius: 50%;
    background: none;
    transition:
      background 0.4s var(--e-lux, cubic-bezier(0.16, 1, 0.3, 1)),
      border-color 0.4s var(--e-lux, cubic-bezier(0.16, 1, 0.3, 1));
  }
  .slick-dots .slick-active button:before {
    background: var(--accent);
    border-color: var(--accent);
  }
  .slick-dots button:focus-visible:before {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  /* One-line instruction under the rail. Without it a dimmed neighbouring
     card reads as a rendering fault rather than an invitation to swipe. */
  .sw-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px 0 0;
    font-family: var(--display);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--dim);
  }
  .sw-hint:before,
  .sw-hint:after {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--line-lit);
  }

  /* ---- X. LEDGER — one month per view ----
     A rail suits a timeline better than a long column: the point is sequence. */
  .lg-rows.slick-slider {
    display: block;
  }
  .lg-rows .slick-list {
    overflow: hidden;
    touch-action: pan-y;
  }
  /* The track must stay a block and the slides must keep Slick's float plus
     inline width — see the MOBILE RAILS block below. */
  .lg-rows .slick-track {
    display: block;
    min-width: 0;
  }
  .lg-rows .slick-slide {
    float: left;
    height: auto;
    min-height: 1px;
  }
  .lg-rows.slick-slider .lg-row {
    margin: 0 6px;
    padding: 20px;
    border: 1px solid var(--line-soft);
    background: rgb(var(--rgb-elev, 22 15 29) / 0.55);
    grid-template-columns: auto 1fr;
  }
  /* In a rail the rows share no vertical axis, so the connecting hairline has
     nothing to connect. main1.js also parks it outside the slider so Slick
     does not count it as a slide. */
  .lg-rows.slick-slider .lg-spine {
    display: none;
  }

  /* ---- VI. ANATOMY — twelve fields, two up ----
     The base sheet uses display:contents on .bp-fields and places each field
     by nth-child into a named column and row. That placement must be unwound
     before a plain two-column flow can take over. */
  .bp {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bp-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
  }
  .bp-field,
  .bp-field:nth-child(odd),
  .bp-field:nth-child(even) {
    grid-column: auto;
    grid-row: auto;
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 0;
    min-width: 0; /* lifts the min-content floor; see .bp-txt below */
  }
  /* The leaders point at a figure that is no longer beside the text. */
  .bp-lead {
    display: none;
  }
  /* Overrides the base sheet's `flex: 0 0 auto`, which sizes the label to
     its content and refuses to shrink — fine on a wide desktop flank, but in
     a ~168px column the long labels overflow instead of wrapping. Shrinking
     requires `1 1 auto` AND `min-width: 0`, here and on .bp-field. */
  .bp-txt {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .bp-txt b {
    margin-right: 5px;
  }
  .bp-mark {
    flex: 0 0 auto;
  }

  /* ---- XII. WHY US — four reasons, two up -----------------------
     The base sheet drops .reasons to one column at this width; two short
     cards per row read just as well and save a screen of scroll. */
  .reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 16px;
  }
  .reason h3 {
    font-size: 15px;
    margin: 12px 0 8px;
  }
  .reason p {
    font-size: 12.5px;
    line-height: 1.6;
  }

  /* ---- XIII. FAQ ----
     The glyph stays 30px; the tap target grows around it to 44px. */
  .faq-list summary {
    gap: 16px;
    padding-block: 20px;
  }
  .faq-list summary i {
    width: 44px;
    height: 44px;
    margin-right: -7px; /* keeps the glyph optically on the margin */
  }
}

/* ============================================================
   HERO — WhatsApp secondary CTA (variant)
   Ghost button carrying the WhatsApp mark. The brand green is confined
   to the icon so the button still reads as part of the page's own
   button set rather than a pasted-in platform badge.
   ============================================================ */
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-wa svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: #25d366;
}
.btn-wa:hover svg,
.btn-wa:focus-visible svg {
  fill: #fff;
}

/* Closing line under the three mechanisms in III. Styled as a quiet
   qualifier, not a fourth item — it reframes what came above. */
.shift-note {
  margin: clamp(26px, 3.6vh, 44px) 0 0;
  max-width: 68ch;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.7;
  color: var(--dim);
  border-top: 1px solid var(--line-soft);
  padding-top: clamp(16px, 2.2vh, 24px);
}

/* ============================================================
   IV. THE PRODUCT — the twin (variant)
   One product, so the layout is a portrait beside the argument rather
   than a choice between two cards.
   ============================================================ */
.sc-twin {
  padding: clamp(110px, 14vh, 190px) var(--pad);
}
.sc-twin .products-head {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0;
}
.twin-body {
  max-width: var(--max);
  margin: clamp(46px, 7vh, 84px) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.twin-media {
  position: relative;
  aspect-ratio: 4 / 5;
  /* The column is wide on a large screen, where 4:5 alone makes a portrait
     far taller than the copy beside it. Capped to keep the two in proportion. */
  max-height: min(60vh, 520px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-deep);
}
.twin-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.05) brightness(0.9);
  transition: transform 1.4s var(--e-lux);
}
.twin-media:hover img {
  transform: scale(1.04);
}
.twin-media:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(10 6 20 / 0.6), transparent 52%);
}
.twin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 2.4vh, 26px);
}
.twin-list li {
  position: relative;
  padding-left: 26px;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.72;
  color: var(--dim);
}
.twin-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 1px;
  background: var(--accent);
}
.twin-list strong {
  color: var(--ink);
  font-weight: 500;
}
.twin-best {
  margin: clamp(24px, 3.4vh, 36px) 0 0;
  padding-top: clamp(18px, 2.4vh, 26px);
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.sc-twin .tlink {
  margin-top: clamp(20px, 2.8vh, 30px);
}
.twin-alt {
  margin: clamp(20px, 2.6vh, 28px) 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
}

@media (max-width: 900px) {
  .twin-body {
    grid-template-columns: 1fr;
    gap: clamp(26px, 4vh, 40px);
  }
  .twin-media {
    aspect-ratio: 16 / 10;
    max-height: 44vh;
  }
}
@media (max-width: 600px) {
  .twin-media {
    aspect-ratio: 4 / 3;
  }
  .twin-list li {
    padding-left: 20px;
    font-size: 14px;
  }
}

/* ============================================================
   V. PROOF — case studies (variant)
   One block per person, each film sitting directly under the name it
   belongs to. Three across on desktop, two per row on a phone.
   ============================================================ */
/* Count-agnostic: flex + justify-content:center means a final row
   holding fewer cards than --cols centres itself, for ANY number of
   cards. Add or remove a .case and nothing here needs touching.
   Card width is the track split --cols ways minus the gaps, so a
   breakpoint only ever has to change --cols. */
.cases {
  --cols: 3;
  --gap: clamp(20px, 3vw, 44px);

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin-top: clamp(44px, 6.5vh, 80px);
}
.cases > .case {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}
/* Flex column so the name owns its own band above the film — the reel's
   hover lift must not ride over the heading. */
.case {
  display: flex;
  flex-direction: column;
}
.case-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(12px, 1.8vh, 18px);
  /* Two lines' worth, so every film in the row starts on the same baseline
     whether its name wraps or not. */
  min-height: 2.5em;
  display: flex;
  align-items: flex-end;
}
/* The reel keeps the vertical frame the films are shot in. */
.cases .reel {
  position: relative;
  margin: 0;
}
.cases .reel-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  cursor: pointer;
  transition:
    border-color var(--t-base),
    box-shadow var(--t-cine);
}
.cases .reel:hover .reel-frame {
  border-color: var(--line-lit);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.4);
}

/* ---- Case metadata -------------------------------------------------
   Sector line and performance line beneath each film, on two visual tiers:
   the sector as a subtitle to the name, the numbers as evidence. One tier
   collapses the block into a wall of small grey text.

   margin-top:auto pins the pair to the foot of the .case flex column, so
   the blocks align across the row even when a name wraps to two lines and
   its reel starts lower. */
.case-meta {
  margin-top: auto;
  padding-top: clamp(12px, 1.6vh, 18px);
}
.case-sector {
  font-size: clamp(12px, 0.92vw, 13.5px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
/* Inline flow, NOT flex. In a flex row each segment is a rigid item and the
   line can only break BETWEEN items, which strands the separators in a narrow
   column. Inline flow breaks at any word boundary. */
.case-stats {
  font-family: var(--display);
  font-size: clamp(10px, 0.78vw, 11.5px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.75;
  color: var(--dim);
  margin: clamp(5px, 0.7vh, 8px) 0 0;
  font-variant-numeric: lining-nums tabular-nums;
}
/* Each separator binds to the segment before it, so a dot can never begin a
   line on its own. */
.case-stats i {
  font-style: normal;
  white-space: nowrap;
  margin-inline-end: 7px;
  opacity: 0.5;
}
/* The figures carry the line, so they sit above --dim and read before the
   labels around them. */
.case-stats span {
  color: var(--ink-soft);
}

/* Two up from tablet down, phones included: the films are 9:16, so a single
   column is an unreasonable amount of scrolling. A short last row centres
   itself, so no orphan rule is needed. */
@media (max-width: 900px) {
  .cases {
    --cols: 2;
  }
}
@media (max-width: 600px) {
  .cases {
    --cols: 2;
    --gap: 14px;
  }
}

/* ============================================================
   VII. THE FUNNEL — five cards (variant)
   A numbered card per stage, description anchored to the foot of the
   card, italic closing line beneath. The row runs through one violet
   deepening left to right, so it reads as a journey without importing
   foreign brand hues.
   ============================================================ */
.fsteps {
  list-style: none;
  margin: clamp(44px, 6.5vh, 80px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
}
.fstep {
  /* Flex, not grid: the description is pushed to the foot with
     margin-top:auto, which grid align-content would cancel. */
  display: flex;
  flex-direction: column;
  min-height: clamp(200px, 26vh, 280px);
  padding: clamp(16px, 1.6vw, 26px);
  border: 1px solid var(--line);
  background: rgb(var(--rgb-primary) / 0.1);
  transition:
    transform 0.6s var(--e-lux),
    border-color var(--t-base),
    background var(--t-base);
}
/* The progression: each step sits a shade deeper than the last. */
.fstep:nth-child(1) {
  background: rgb(var(--rgb-primary) / 0.1);
}
.fstep:nth-child(2) {
  background: rgb(var(--rgb-primary) / 0.18);
}
.fstep:nth-child(3) {
  background: rgb(var(--rgb-primary) / 0.27);
}
.fstep:nth-child(4) {
  background: rgb(var(--rgb-primary) / 0.38);
}
/* The last step is the conversion, so it carries the accent outright. */
.fstep:nth-child(5) {
  background: rgb(var(--rgb-primary) / 0.52);
  border-color: rgb(var(--rgb-primary) / 0.75);
}
.fstep:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.fstep-n {
  font-family: var(--display);
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.fstep h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(15px, 1.35vw, 20px);
  letter-spacing: -0.015em;
  margin: clamp(12px, 1.8vh, 18px) 0 0;
  color: var(--ink);
}
.fstep p {
  margin: clamp(14px, 2vh, 22px) 0 0;
  margin-top: auto; /* anchors the description to the foot of the card */
  padding-top: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.78);
}
.funnel-note {
  margin: clamp(28px, 4vh, 46px) 0 0;
  font-style: italic;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.7;
  color: var(--accent);
  max-width: 92ch;
}

/* Five across stops being readable well before phone width. */
@media (max-width: 1100px) {
  .fsteps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .fsteps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .fstep {
    min-height: 0;
  }
  .fstep p {
    margin-top: 12px; /* no shared baseline to align to once the row wraps */
  }
  ol .fstep:last-child {
    grid-column: span 2;
  }
}
/* Still two-up at the narrowest widths: five steps read as a sequence, and
   one column turns them into five full-width blocks of scroll. The fifth
   sitting alone on the last row suits it — it is the conversion. */
@media (max-width: 460px) {
  .fstep {
    padding: 14px;
  }
  .fstep h3 {
    margin-top: 8px;
    font-size: 14px;
  }
  .fstep p {
    font-size: 11.5px;
  }
}

/* ============================================================
   X. THE INVESTMENT (variant)
   Foundation stated once as a full-width banner, then three package
   cards. Premium is the featured card — the middle option the copy
   positions as the common choice — marked by a lift rather than a
   second colour.
   ============================================================ */
.sc-pricing {
  background: var(--bg-elev);
}
.pricing-head {
  max-width: none;
}
.pricing-head .h-scene {
  margin-top: 20px;
}
.pricing-lede {
  margin-top: 26px;
  max-width: 74ch;
}

/* ---- Foundation banner ---- */
.foundation {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 54px);
  align-items: start;
  margin-top: clamp(42px, 6vh, 72px);
  padding: clamp(20px, 2.6vw, 34px);
  border: 1px solid rgb(var(--rgb-primary) / 0.45);
  background: rgb(var(--rgb-primary) / 0.09);
}
.foundation-label .label {
  color: var(--accent);
}
.foundation-label p {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.foundation-body h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 23px);
  letter-spacing: -0.02em;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.foundation-body h3 b {
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.foundation-body h3 i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.foundation-body p {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--dim);
  max-width: 68ch;
}

/* ---- The three packages ---- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
  margin-top: clamp(20px, 2.6vh, 32px);
}
.plan {
  /* Flex so .plan-cta can be pinned to the foot of every card and the three
     buttons line up regardless of copy length. */
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid var(--line);
  background: rgb(12 8 22 / 0.6);
  transition:
    border-color var(--t-base),
    transform 0.6s var(--e-lux);
}
.plan:hover {
  border-color: var(--line-lit);
}
.plan.is-featured {
  border-color: rgb(var(--rgb-primary) / 0.7);
  background: rgb(var(--rgb-primary) / 0.12);
  box-shadow: 0 22px 60px rgb(0 0 0 / 0.34);
}
.plan-head h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 25px);
  letter-spacing: -0.02em;
  margin: 0;
}
.plan-price {
  margin: 12px 0 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.plan-price b {
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.plan-price span {
  font-size: 12px;
  color: var(--muted);
}
.plan-for {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  min-height: 80px;
}
/* The three "Best for" blurbs run to different lengths and reflow with the
   viewport, so no min-height can line the buttons up. Each card becomes a
   4-row grid instead: head, button, list and total share a track across all
   three cards, so the buttons land on one line at every width. */
@media (min-width: 1001px) {
  .plans {
    align-items: stretch;
  }
  .plan {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    row-gap: 0;
  }
  .plan-head {
    display: flex;
    flex-direction: column;
  }
  .plan-for {
    margin-top: auto;
    padding-top: 14px;
  }
}
.plan-list {
  list-style: none;
  margin: 0;
  padding: clamp(18px, 2.4vh, 26px) 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 14px;
}
.plan-list li {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--dim);
}
.plan-list li span {
  display: block;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}
.plan-total {
  margin: clamp(16px, 2.2vh, 22px) 0 0;
  margin-top: auto; /* last element, pinned to the card foot */
  padding-top: clamp(14px, 2vh, 20px);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.plan-total b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}
/* Sits directly under the head, above the feature list. The head carries a
   min-height so the buttons line up across the row despite the "Best for"
   blurbs differing in length. */
.plan-cta {
  justify-content: center;
  width: 100%;
  margin: clamp(18px, 2.4vh, 24px) 0 0;
}
.plan-list {
  margin-top: clamp(18px, 2.4vh, 26px);
}
.pricing-note {
  margin: clamp(26px, 3.6vh, 42px) 0 0;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 80ch;
}
.pricing-micro {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 767px) {
  .plans {
    grid-template-columns: 1fr;
    /* max-width: 560px; */
  }
  .foundation {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
@media (max-width: 600px) {
  .plans {
    gap: 12px;
  }
  .plan {
    padding: 20px;
  }
  /* The featured card must not sit wider than its neighbours once the grid
     is a single column. */
  .plan.is-featured {
    box-shadow: none;
  }
}

/* The base sheet lifts .reel:nth-child(2) by 7% to stage depth in a carousel
   where the reels are siblings in one rail. Here each reel is the only child
   of its own .case, so that selector matches every reel and would scale each
   film up over its own name. */
.cases .reel {
  transform: none;
  z-index: auto;
}
.cases .reel-frame {
  transform: none;
}

/* ============================================================
   MOBILE RAILS — per-section layout
   main1.js turns these containers into Slick rails under 600px.

   Slick's own stylesheet is NOT loaded on this page, so the rules it
   normally provides are written here. Two are load bearing:

     .slick-list  { overflow: hidden }   clips the track to one card
     .slick-slide { float: left }        + the inline px width Slick
                                         writes on every slide

   Without the first, the track's full width (cards x n) escapes the
   section and drags the copy above it off-screen. Without the second,
   the slides collapse to their content width and the cards render as
   slivers of one-word-per-line text.

   Shared .slick-* chrome (dots, hint) lives in the MOBILE CONDENSATION
   block above.
   ============================================================ */
/* Desktop: the wrapper must be invisible to layout so the loss cards stay
   direct flex children of .htrack. */
.losses {
  display: contents;
}

@media (max-width: 600px) {
  /* Inside a rail the wrapper is a real box again, and a plain block:
     .mech is a grid and .htrack a flex row at every other width, and
     Slick's track cannot live inside either. min-width:0 is what stops
     the track widening its parent — a flex or grid item's automatic
     minimum size is its content, and the track's content is every card
     laid end to end. */
  .losses,
  .mech.slick-slider {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  /* .htrack is a flex row in the desktop scene. A flex line lays its
     children out on one axis with no width cap, so the rail wrapper is
     free to grow to the track's content width. A plain block gives the
     wrapper a real containing width to measure against. */
  .sc-problem .htrack {
    display: block;
  }
  .mech.slick-slider {
    margin-top: clamp(30px, 5vh, 50px);
  }

  /* The viewport onto the track — the rule that keeps the rail inside its
     section. */
  .losses .slick-list,
  .mech .slick-list {
    overflow: hidden;
    touch-action: pan-y;
  }

  /* Slick writes an inline pixel width on the track and on each slide, then
     moves the track by transform. Those widths are honoured exactly only at
     the browser defaults (block + static); the base sheet turns both
     containers into flex/grid rows at this width, so they are reset here. */
  .losses .slick-track,
  .mech .slick-track {
    display: block;
    min-width: 0;
  }
  .losses .slick-slide,
  .mech .slick-slide {
    float: left;
    height: auto;
    min-height: 1px;
  }

  /* The base sheet sizes these cards for a flex row (.loss) and a grid cell
     (.mech-item). In a rail each card is alone in a slide whose width Slick
     has already set, so the card just fills it. */
  .losses.slick-slider .loss,
  .mech.slick-slider .mech-item {
    flex: none;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0 5px;
  }
  /* Copy measures authored for a wide column leave the card half empty at
     phone width. */
  .mech.slick-slider .mech-item p,
  .losses.slick-slider .loss p {
    max-width: none;
  }

  /* Both stages are display:grid with a single implicit `auto` column. An
     auto column sizes to its content's MAX-CONTENT width, and a Slick
     track's max-content is every card laid end to end: the column grows to
     the track, Slick re-measures against the wider column, and the two feed
     each other until the section is hundreds of thousands of pixels wide.
     minmax(0, 1fr) breaks the loop by capping the column at the stage width,
     giving the track a fixed parent to measure against.

     min-width:0 on a descendant does NOT fix this — that governs a flex/grid
     ITEM's automatic minimum size, not the column TRACK. */
  .problem-stage,
  .shift-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The dots and the swipe hint render BELOW the rail, so the stage must not
     clip vertically. Both carry overflow:hidden for the desktop
     iris/horizontal-track animations, neither of which runs on a phone.
     Clipping the x-axis only still keeps a runaway width inside the section. */
  .problem-stage,
  .shift-stage,
  .sc-problem .stage,
  .sc-shift .stage {
    overflow-x: clip;
    overflow-y: visible;
  }

  /* The base sheet pins .htrack's transform to none for the horizontal
     scroll animation, which never runs on a phone. That pin would freeze a
     Slick track dead, so the rail is the .losses wrapper rather than .htrack
     itself — the track inside keeps its own transform and can still move. */
  .losses .slick-track {
    transform: translate3d(0, 0, 0);
  }
  /* .htrack is a block here, not a flex column, so its gap no longer spaces
     the kickers. */
  .sc-problem .loss-kicker {
    margin: 14px 0;
  }
}