/* THE GAP, "Cobalt Feed" (homepage section styles; from the gap-4 prototype)
   ------------------------------------------------------------------
   gap-3's cobalt poster and gap-2's story player as one piece.

   The section floods cobalt edge to edge; every statistic is drawn to
   scale with gap-3's rule: PAPER = the share, INK = the rest. Next to the
   figures stands the phone (gap-2's story player). The phone is the
   driver: the story it plays lights the matching figure (the others dim)
   and draws it, and each figure's index rule is that story's progress
   segment, filling in lockstep with the phone's bar. The last story
   lights every figure: the finished poster.

   Render modes
     static  (default: no JS, or prefers-reduced-motion) — the phone is a
             stacked list of all six stories, every figure is drawn in its
             final state, nothing dims, nothing moves.
     live    (.gap4--live, added by gap.js) — the player runs and the
             figures sync to it. Wide screens (>= 1200px) show the whole
             board; narrower screens show one figure at a time (the active
             one) with a strip of tabs to jump between stories.
     armed   (.gap4--armed, gap.js) — one-shot entrance for the head,
             the console and the closing note.

   All motion is transform / opacity / clip-path. Every class is
   prefixed gap4 so motion.js never touches this section.
   ------------------------------------------------------------------ */

.gap4 {
  --g4-field: var(--cobalt, #2b34ff);
  --g4-paper: var(--paper, #f0ece3);
  --g4-ink: var(--ink, #14110c);
  --g4-rule: rgba(240, 236, 227, 0.5);
  --g4-on: rgba(240, 236, 227, 0.74);          /* secondary text on the phone screen */
  --g4-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --g4-draw: cubic-bezier(0.65, 0, 0.2, 1);   /* measured, deliberate fill */
  --g4-dim: 0.3;                               /* figures that are not playing */
  --g4-d: 5.5s;                                /* current story length (gap.js) */

  /* phone width: big enough to read, never taller than the viewport */
  --g4-w: max(280px, min(clamp(290px, 27vw, 360px), calc((100vh - 170px) * 0.5625)));
  --g4-w: max(280px, min(clamp(290px, 27vw, 360px), calc((100svh - 170px) * 0.5625)));
  --g4-bezel: 5px;
  --g4-radius: calc(var(--g4-w) * 0.13);

  position: relative;
  isolation: isolate;
  overflow: hidden;                            /* fallback: the bleeds must never scroll */
  overflow: clip;
  background: var(--g4-field);
  color: var(--g4-paper);
  padding: clamp(80px, 10vw, 150px) 0 0;
}
.gap4 ::selection { background: var(--g4-paper); color: var(--g4-field); }
.gap4 :focus-visible { outline-color: var(--g4-paper); }

/* Film grain (gap-3): an opaque, contrast-boosted noise tile, hard-light
   blended at low opacity so it reads on saturated cobalt. Oversized so
   the stepped jitter never shows an edge. */
.gap4__grain {
  position: absolute;
  inset: -64px;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.11;
  mix-blend-mode: hard-light;
}
@keyframes gap4Grain {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-28px, 18px, 0); }
  50%  { transform: translate3d(22px, -34px, 0); }
  75%  { transform: translate3d(-40px, -12px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .gap4__grain { animation: gap4Grain 0.8s steps(4) infinite; }
  .gap4--idle .gap4__grain { animation-play-state: paused; }   /* off screen (gap.js) */
}

.gap4__inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw, 1320px);
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
}

.gap4__nw { white-space: nowrap; }
.gap4__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   HEAD
   ================================================================ */
.gap4__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1;
}
.gap4__label-mark {
  width: 12px;
  height: 12px;
  background: var(--g4-ink);
  flex: 0 0 auto;
}
.gap4__label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--g4-rule);
}
.gap4__headline {
  margin: clamp(22px, 2.6vw, 36px) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  font-size: clamp(3.05rem, 12.6vw, 11.6rem);
  line-height: 0.84;
  letter-spacing: -0.034em;
  word-spacing: 0.04em;
  max-width: none;
  text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* ================================================================
   CONSOLE: the phone (driver) + the board (the poster)
   ================================================================ */
.gap4__console {
  display: grid;
  grid-template-columns: var(--g4-w) minmax(0, 1fr);
  column-gap: clamp(40px, 4.4vw, 72px);
  align-items: start;
  margin-top: clamp(56px, 7vw, 110px);
}
.gap4__deck { min-width: 0; }
.gap4__board { min-width: 0; }

/* ---------------- the phone ---------------- */
.gap4__phone {
  position: relative;
  z-index: 1;
  width: var(--g4-w);
  padding: var(--g4-bezel);
  border-radius: var(--g4-radius);
  background: var(--g4-ink);
  /* ink shadows only: the phone sits ON the poster, it does not glow */
  box-shadow:
    0 1px 2px rgba(20, 17, 12, 0.24),
    0 26px 44px -22px rgba(20, 17, 12, 0.6),
    0 70px 90px -60px rgba(20, 17, 12, 0.55);
}
.gap4__screen {
  position: relative;
  min-height: calc((var(--g4-w) - 2 * var(--g4-bezel)) * 16 / 9);
  border-radius: calc(var(--g4-radius) - var(--g4-bezel));
  overflow: hidden;
  isolation: isolate;
  background: var(--g4-ink);
  color: var(--g4-paper);
  container-type: inline-size;
}
.gap4__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* soften the footage into a backdrop: the story type must win */
  filter: saturate(0.45) brightness(0.64) blur(2.5px);
  transform: scale(1.06);
}
.gap4__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(20, 17, 12, 0.80) 0%,
    rgba(20, 17, 12, 0.48) 14%,
    rgba(20, 17, 12, 0.74) 32%,
    rgba(20, 17, 12, 0.90) 62%,
    rgba(20, 17, 12, 0.96) 100%);
  pointer-events: none;
}
.gap4__shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g4-ink);
  opacity: 0;
  transition: opacity 0.7s var(--g4-ease);
}

/* chrome: progress segments + account row */
.gap4__chrome {
  position: relative;
  z-index: 3;
  padding: 3.4cqw 3.4cqw 0;
  transition: opacity 0.25s linear;
  pointer-events: none;
}
.gap4__bars { display: none; gap: 1.2cqw; }
.gap4__bar {
  flex: 1 1 0;
  height: max(2px, 0.7cqw);
  border-radius: 2px;
  background: rgba(240, 236, 227, 0.3);
  overflow: hidden;
}
.gap4__fill {
  display: block;
  height: 100%;
  background: var(--g4-paper);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.gap4__who {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  margin-top: 3.2cqw;
  min-height: 9cqw;
}
.gap4__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 8.6cqw;
  height: 8.6cqw;
  border-radius: 50%;
  overflow: hidden;
  background: var(--g4-ink);
  box-shadow: 0 0 0 1.5px rgba(240, 236, 227, 0.9);
}
.gap4__avatar img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 25%;
  transform-origin: 41% 44%;
  transform: translate(9%, 6%) scale(1.6);
}
.gap4__handle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(12px, 3.8cqw);
  letter-spacing: -0.01em;
  line-height: 1;
}
.gap4__topic {
  font-family: var(--font-mono);
  font-size: max(10px, 3cqw);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--g4-on);
}

/* pause / play (live only) */
.gap4__pause[hidden] { display: none; }
.gap4__pause {
  position: absolute;
  z-index: 4;
  top: calc(3.4cqw + max(2px, 0.7cqw) + 3.2cqw + 4.5cqw);
  right: 1.6cqw;
  translate: 0 -50%;
  width: max(40px, 11cqw);
  height: max(40px, 11cqw);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--g4-paper);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gap4__pause:focus-visible { outline: 2px solid var(--g4-paper); outline-offset: -4px; }
.gap4__pause-icon { position: relative; width: 12px; height: 14px; }
.gap4__pause-icon::before,
.gap4__pause-icon::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 1px;
  background: currentColor;
}
.gap4__pause-icon::before { left: 0; }
.gap4__pause-icon::after  { right: 0; }
.gap4__pause[data-state="paused"] .gap4__pause-icon::before {
  width: 100%;
  border-radius: 0;
  clip-path: polygon(8% 0, 100% 50%, 8% 100%);
}
.gap4__pause[data-state="paused"] .gap4__pause-icon::after { display: none; }

/* ---------------- stories: shared type ---------------- */
.gap4__stories {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 6cqw 7cqw 8cqw;
}
.gap4__story { margin: 0; }
.gap4__story-num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 13cqw;
  line-height: 0.84;
  letter-spacing: -0.045em;
  color: var(--g4-paper);
}
/* JS char split: each glyph rises out of this mask */
.gap4__mask {
  display: inline-block;
  overflow: hidden;
  padding: 0.1em 0.06em 0.05em 0;
  margin: -0.1em -0.06em -0.05em 0;
  vertical-align: top;
}
.gap4__ch { display: inline-block; }
.gap4__story-cap {
  margin: 3cqw 0 0;
  max-width: 94%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: max(13px, 4cqw);
  line-height: 1.5;
  letter-spacing: -0.005em;
}
/* the story "classic" text style: paper boxes behind every line */
.gap4__story-cap > span {
  background: var(--g4-paper);
  color: var(--g4-ink);
  padding: 0.14em 0.4em;
  border-radius: 0.26em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.gap4__story-cap mark {
  background: var(--g4-field);
  color: var(--g4-paper);
  padding: 0.14em 0.28em;
  margin: 0 -0.1em;
  border-radius: 0.22em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.gap4__story-src {
  display: flex;
  align-items: flex-start;
  gap: 1.8cqw;
  margin: 3cqw 0 0;
  font-family: var(--font-mono);
  font-size: max(10px, 2.8cqw);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--g4-on);
}
.gap4__story-src::before {
  content: "";
  flex: 0 0 auto;
  width: 4cqw;
  height: 1px;
  margin-top: 0.62em;                          /* on the first line when the source wraps */
  background: currentColor;
}

/* poll: two numerals + fill bars */
.gap4__poll { display: grid; gap: 3cqw; }
.gap4__opt {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: 3cqw;
  row-gap: 1.8cqw;
}
.gap4__story-num--opt { display: block; font-size: 11cqw; }
.gap4__opt-name {
  padding-bottom: 0.4cqw;
  font-family: var(--font-mono);
  font-size: max(10px, 3cqw);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.gap4__opt-bar {
  grid-column: 1 / -1;
  display: block;
  height: max(4px, 1.3cqw);
  border-radius: 99px;
  background: rgba(240, 236, 227, 0.2);
  overflow: hidden;
}
.gap4__opt-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--g4-paper);
  transform-origin: 0 50%;
  transform: scaleX(var(--v, 0));
}
.gap4__opt + .gap4__opt .gap4__opt-bar > span { background: var(--cobalt-light, #7a83ff); }

/* sticker numeral */
.gap4__story-num--sticker {
  display: inline-block;
  padding: 0.12em 0.16em 0.06em;
  border-radius: 0.12em;
  background: var(--g4-paper);
  color: var(--g4-ink);
  transform: rotate(-4deg);
  box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, 0.35);
}

/* final story: the note + swipe-up CTA */
.gap4__story--end { display: none; }
.gap4__end-note {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8cqw;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.gap4__end-note em { font-style: normal; color: var(--cobalt-light, #7a83ff); }
.gap4__swipe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3cqw;
  align-self: center;
  margin-top: 8cqw;
  color: var(--g4-paper);
  -webkit-tap-highlight-color: transparent;
}
.gap4__swipe:focus-visible { outline: none; }
.gap4__swipe:focus-visible .gap4__swipe-pill { outline: 2px solid var(--g4-paper); outline-offset: 3px; }
.gap4__chev {
  display: block;
  width: 3.8cqw;
  height: 3.8cqw;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateY(1cqw) rotate(45deg);
}
.gap4__swipe-pill {
  display: block;
  padding: 3.2cqw 5.4cqw;
  border-radius: 999px;
  background: var(--g4-paper);
  color: var(--g4-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(13px, 4.1cqw);
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background-color 0.3s var(--g4-ease), color 0.3s var(--g4-ease);
}
.gap4__swipe:hover .gap4__swipe-pill { background: var(--g4-field); color: var(--g4-paper); }

/* static list (no JS / reduced motion) */
.gap4__story + .gap4__story {
  margin-top: 5cqw;
  padding-top: 5cqw;
  border-top: 1px solid rgba(240, 236, 227, 0.18);
}
.gap4__story-num--sticker { font-size: 11cqw; margin: 1cqw 0 0 1cqw; }

/* hint under the phone (live only) */
.gap4__hint[hidden] { display: none; }
.gap4__hint {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  width: var(--g4-w);
  margin: 16px 0 0;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--g4-on);
}
.gap4__count { flex: 0 0 auto; }
.gap4__count b { font-weight: 500; color: var(--g4-paper); }
.gap4__how { text-align: right; text-wrap: balance; }
.gap4__how--touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .gap4__how--fine { display: none; }
  .gap4__how--touch { display: inline; }
}

/* ================================================================
   THE BOARD: five figures, each drawn to scale
   ================================================================ */
.gap4__figs {
  container: gap4figs / inline-size;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(16px, 1.7vw, 26px);
  row-gap: clamp(30px, 3.2vw, 46px);
  align-items: start;
}
.gap4__fig {
  /* graphic size: the full figure width on the board (see slot view) */
  --g4-gs: 100cqi;
  position: relative;
  margin: 0;
  min-width: 0;
  container-type: inline-size;
}
.gap4__num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 78%;
  letter-spacing: -0.045em;
  line-height: 0.8;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "kern" 1;
}

/* index + rule heading every figure; the rule is the story's progress
   segment while the player runs */
.gap4__idx {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(12px, 1.2vw, 16px);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
}
.gap4__idx-n {
  flex: 0 0 auto;
  padding: 4px 6px;
  margin-left: -6px;
  border-radius: 2px;
  transition: background-color 0.4s var(--g4-ease), color 0.4s var(--g4-ease);
}
.gap4__prog {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  overflow: hidden;
  background: var(--g4-rule);
}
.gap4__prog-fill {
  position: absolute;
  inset: 0;
  background: var(--g4-paper);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.gap4__cap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 0;
}
.gap4__desc {
  overflow-wrap: break-word;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(0.92rem, 1.08vw, 1.04rem);
  line-height: 1.26;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}
.gap4__src {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.gap4__src::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  vertical-align: 0.05em;
  background: var(--g4-ink);
}

/* ---------- 01 news: 65% — the slab ---------- */
.gap4__fig--news {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 65% 35%;
  grid-template-rows: auto auto auto;
}
.gap4__fig--news .gap4__idx { grid-column: 1 / -1; grid-row: 1; }
.gap4__slab {
  grid-column: 1 / -1;
  grid-row: 2;
  background: var(--g4-ink);
}
.gap4__slab-fill {
  --pad-x: clamp(12px, 2.4cqi, 22px);
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  padding: clamp(18px, 3cqi, 32px) var(--pad-x) clamp(10px, 1.7cqi, 16px);
  background: var(--g4-paper);
  color: var(--g4-field);                     /* cobalt carved out of paper: 5.9:1 */
}
.gap4__num--news {
  /* "65%" is ~1.54em wide: sized to fill the paper */
  font-size: 7rem;                            /* fallback without container units */
  font-size: min(19rem, calc((65cqi - 2 * var(--pad-x)) / 1.56));
  line-height: 0.74;
  margin: 0 0 0 -0.04em;
  white-space: nowrap;
}
.gap4__cap--news {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 1;
  align-self: end;
  margin: 0;
  padding: 0 clamp(12px, 2cqi, 20px) clamp(12px, 1.8cqi, 18px) clamp(14px, 2.4cqi, 24px);
}
.gap4__cap--news .gap4__desc { font-size: clamp(1rem, 1.35vw, 1.28rem); max-width: 18ch; }
.gap4__cap--news .gap4__src::before { background: var(--g4-paper); }

/* ruler under the slab: a tick every 10%, labels 0 / 50 / 100 */
.gap4__ruler {
  grid-column: 1 / -1;
  grid-row: 3;
  position: relative;
  height: 26px;
  margin-top: 7px;
  background:
    linear-gradient(var(--g4-paper), var(--g4-paper)) 50% 0 / 2px 10px no-repeat,
    linear-gradient(var(--g4-paper), var(--g4-paper)) right top / 2px 10px no-repeat,
    repeating-linear-gradient(90deg, var(--g4-paper) 0 1px, transparent 1px 10%) left top / 100% 5px no-repeat;
}
.gap4__ruler-lab {
  position: absolute;
  bottom: 0;
  left: calc(var(--at) * 1%);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
}
.gap4__ruler-lab--start { transform: none; margin-left: 6px; }
.gap4__ruler-lab--end { transform: translateX(-100%); margin-left: -6px; }

/* ---------- 02 platforms: 47 / 39 ---------- */
.gap4__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6cqi;
  width: var(--g4-gs);
}
.gap4__col { min-width: 0; }
.gap4__col-track {
  position: relative;
  height: calc(var(--g4-gs) * 0.94);
  background: var(--g4-ink);
  overflow: hidden;
  container-type: size;                       /* numeral sizes to the column, rides by its height */
}
.gap4__col-track::after {                     /* the 50% line */
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 50%;
  height: 0;
  border-top: 1px dashed rgba(240, 236, 227, 0.4);
  z-index: 2;
}
.gap4__col-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--v) * 1%);
  background: var(--g4-paper);
  transform-origin: 50% 100%;
  z-index: 1;
}
.gap4__col-num {
  --inset: 7cqi;
  position: absolute;
  left: var(--inset);
  top: calc((100 - var(--v)) * 1% + var(--inset));
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 78%;
  font-size: 2.4rem;                          /* fallback without container units */
  font-size: min(8.5rem, calc((100cqi - 2 * var(--inset)) / 1.64));
  line-height: 0.8;
  letter-spacing: -0.045em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--g4-ink);
  white-space: nowrap;
}
.gap4__col-lab {
  display: block;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

/* ---------- 03 time: 3h+ dial ---------- */
.gap4__dial {
  position: relative;
  width: var(--g4-gs);
  container-type: inline-size;
}
.gap4__dial-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gap4__ticks line { stroke: var(--g4-paper); stroke-width: 1.5; stroke-linecap: butt; }
.gap4__ticks .gap4__tick--major { stroke-width: 2.5; }
.gap4__dial-lab {
  fill: var(--g4-paper);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-anchor: middle;
  dominant-baseline: central;
}
.gap4__dial-track,
.gap4__dial-arc,
.gap4__dial-cover {
  fill: none;
  stroke-width: 34;
  stroke-linecap: butt;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);                  /* 00 at the top, clockwise */
}
.gap4__dial-track { stroke: var(--g4-ink); }
.gap4__dial-arc { stroke: var(--g4-paper); }
.gap4__dial-cover { stroke: var(--g4-ink); display: none; }
.gap4__dial-tail circle { fill: var(--g4-paper); }
.gap4__dial-tail circle:nth-child(2) { opacity: 0.7; }
.gap4__dial-tail circle:nth-child(3) { opacity: 0.45; }
.gap4__num--time {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 3rem;                            /* fallback without container units */
  font-size: 27cqi;
  line-height: 1;
  padding-top: 0.02em;
}

/* ---------- 04 learn: 63 of 100 ----------
   The numeral overprints the three empty top rows (the "rest"), the way
   a poster sets type over its own graphic; the 63 filled dots stay clear. */
.gap4__learn {
  position: relative;
  width: var(--g4-gs);
}
.gap4__waffle {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: calc(var(--g4-gs) * 0.036);
  width: 100%;
  aspect-ratio: 1;
}
.gap4__dot {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--g4-ink);
}
.gap4__dot--on::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--g4-paper);
}
.gap4__num--learn {
  position: absolute;
  top: -0.04em;
  right: -0.03em;
  font-size: 4rem;                            /* fallback without container units */
  font-size: calc(var(--g4-gs) * 0.36);
  line-height: 0.76;
  white-space: nowrap;
  /* a cobalt keyline knocks the dots back from the glyph edges */
  -webkit-text-stroke: 0.09em var(--g4-field);
  paint-order: stroke fill;
}

/* ---------- 05 ROI: split at 49% ---------- */
.gap4__split {
  position: relative;
  width: var(--g4-gs);
  aspect-ratio: 1 / 1.02;
  container-type: inline-size;
}
.gap4__split-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.gap4__split-layer--base { background: var(--g4-ink); color: var(--g4-paper); }
.gap4__split-layer--cut {
  background: var(--g4-paper);
  color: var(--g4-ink);
  clip-path: inset(0 51% 0 0);               /* exactly 49% from the left */
}
.gap4__num--roi { display: block; font-size: 4.5rem; font-size: 42cqi; line-height: 1; }

/* ---------- 06 the ask (one-figure view only) ---------- */
.gap4__fig--ask { display: none; }
.gap4__ask {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 46cqi;
  padding: clamp(16px, 4.5cqi, 28px);
  background: var(--g4-paper);
  color: var(--g4-ink);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.35s var(--g4-ease), color 0.35s var(--g4-ease);
}
.gap4__ask-t {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 78%;
  font-size: clamp(2.3rem, 12.5cqi, 4.6rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  max-width: 12ch;
  text-wrap: balance;                         /* "Book an / intro call", "Varaa / esittelypuhelu" */
}
.gap4__ask-arrow {
  align-self: flex-end;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 10cqi, 3.6rem);
  line-height: 1;
  transition: transform 0.4s var(--g4-ease);
}
.gap4__ask:hover { background: var(--g4-ink); color: var(--g4-paper); }
.gap4__ask:hover .gap4__ask-arrow { transform: translateX(6px); }
.gap4__ask:focus-visible { outline: 2px solid var(--g4-paper); outline-offset: 4px; }

/* the jump button gap.js lays over each figure (live only) */
.gap4__jump {
  position: absolute;
  inset: -8px;
  z-index: 6;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gap4__jump:focus-visible { outline: 2px solid var(--g4-paper); outline-offset: 0; }

/* the story strip (live, narrow screens only) */
.gap4__strip { display: none; }

/* narrow figure frames: the slab's caption drops under the slab */
@container gap4figs (max-width: 560px) {
  .gap4__cap--news {
    grid-column: 1 / -1;
    grid-row: 4;
    padding: 0;
    margin-top: 12px;
  }
  .gap4__cap--news .gap4__desc { max-width: 30ch; }
  .gap4__cap--news .gap4__src::before { background: var(--g4-ink); }
}

/* ================================================================
   CLOSE: the verdict drops into a full-bleed ink band
   ================================================================ */
.gap4__foot {
  position: relative;
  z-index: 1;
  margin-top: clamp(96px, 10vw, 150px);
}
.gap4__note {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 760;
  font-stretch: 88%;
  font-size: clamp(2.05rem, 4.9vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.gap4__note-lead {
  display: block;
  max-width: 21ch;
  text-wrap: balance;
}
.gap4__note-hit,
.gap4__close {
  position: relative;
  z-index: 0;
}
/* the band: an oversized ::before (the section's overflow: clip trims it) */
.gap4__note-hit::before,
.gap4__close::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -100vw;
  right: -100vw;
  background: var(--g4-ink);
}
.gap4__note-hit {
  display: block;
  margin-top: clamp(36px, 4.4vw, 64px);
  padding: clamp(40px, 5vw, 76px) 0 clamp(36px, 4.4vw, 64px);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 1.78em;
  line-height: 0.88;
  letter-spacing: -0.024em;
  text-wrap: balance;
  color: var(--g4-paper);
}
.gap4__close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 44px;
  padding: 26px 0 clamp(52px, 6vw, 92px);
}
/* hairline between the verdict and the close (a pseudo, so the band never covers it) */
.gap4__close::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(240, 236, 227, 0.22);
}
.gap4__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  flex: 0 0 auto;
  padding: 1.05em 1.6em;
  border-radius: 999px;
  background: var(--g4-paper);
  color: var(--g4-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: -0.005em;
  transition: background-color 0.35s var(--g4-ease), color 0.35s var(--g4-ease);
}
.gap4__cta:hover { background: var(--g4-field); color: var(--g4-paper); }
.gap4__cta-arrow { display: inline-block; transition: transform 0.4s var(--g4-ease); }
.gap4__cta:hover .gap4__cta-arrow { transform: translateX(4px); }
.gap4__cta:focus-visible { outline: 2px solid var(--g4-paper); outline-offset: 4px; }
.gap4__sources {
  flex: 1 1 360px;
  margin: 0;
  max-width: 78ch;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: rgba(240, 236, 227, 0.82);
}

/* ================================================================
   LIVE (.gap4--live): the player runs, the figures follow it
   ================================================================ */
.gap4--live .gap4__screen {
  aspect-ratio: 9 / 16;
  min-height: 0;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.gap4--live .gap4__screen:focus-visible { outline: 2px solid var(--g4-paper); outline-offset: calc(var(--g4-bezel) + 4px); }
/* the footage (gap-phone-bg.mp4, shot for this phone; its subtitle band is
   softened in the encode) reads as a real story: no blur, only a slight
   dip. The scrim keeps the account row legible at the top, leaves the
   upper third clear and goes dark where the story type sits. The static
   list (no JS / reduced motion) keeps the heavier treatment above. */
.gap4--live .gap4__video { filter: saturate(0.95) brightness(0.9); transform: none; }
.gap4--live .gap4__shade {
  background: linear-gradient(180deg,
    rgba(20, 17, 12, 0.62) 0%,
    rgba(20, 17, 12, 0.18) 12%,
    rgba(20, 17, 12, 0.14) 28%,
    rgba(20, 17, 12, 0.54) 40%,
    rgba(20, 17, 12, 0.74) 54%,
    rgba(20, 17, 12, 0.84) 70%,
    rgba(20, 17, 12, 0.90) 100%);
}
.gap4--live .gap4__chrome { position: absolute; top: 0; left: 0; right: 0; }
.gap4--live .gap4__bars { display: flex; }
.gap4--live .gap4__stories { position: absolute; inset: 0; padding: 0; }
.gap4--live .gap4__story {
  position: absolute;
  inset: 25cqw 7cqw 9cqw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  transition: opacity 0.22s linear;
  pointer-events: none;
}
.gap4--live .gap4__story.is-active { opacity: 1; pointer-events: auto; }
.gap4--live .gap4__story-num { font-size: 40cqw; }
.gap4--live .gap4__story-num--opt { font-size: 25cqw; }
.gap4--live .gap4__story-num--sticker { font-size: 31cqw; margin: 0 0 1cqw 1.5cqw; }
.gap4--live .gap4__story-cap { margin-top: 5cqw; font-size: 5.3cqw; }
.gap4--live .gap4__story-src { margin-top: 5.5cqw; }
.gap4--live .gap4__poll { gap: 4.5cqw; width: 100%; }
.gap4--live .gap4__story--sticker { justify-content: center; padding-bottom: 6cqw; }
.gap4--live .gap4__story--low .gap4__story-num { align-self: flex-end; }
.gap4--live .gap4__story--end {
  display: flex;
  justify-content: flex-end;
  inset: 25cqw 7cqw 8cqw;
}
.gap4--live .gap4__screen.is-end .gap4__shade::after { opacity: 0.62; }

/* progress: the phone's bars, the figures' index rules and the strip's
   segments all run the same clock (--g4-d), started in the same frame */
.gap4--live .gap4__bar.is-done .gap4__fill { transform: scaleX(1); }
.gap4--live .gap4__bar.is-run .gap4__fill { animation: gap4-fill var(--g4-d) linear forwards; }
.gap4--paused .gap4__bar.is-run .gap4__fill { animation-play-state: paused; }
/* holding a finger down clears the chrome, like the real thing */
.gap4--live .gap4__screen.is-holding .gap4__chrome,
.gap4--live .gap4__screen.is-holding .gap4__pause { opacity: 0; }

/* story entrances (re-run every time a story becomes active) */
.gap4--live .gap4__story.is-active .gap4__ch {
  animation: gap4-rise 0.85s var(--g4-ease) both;
  animation-delay: calc(var(--i, 0) * 55ms + 40ms);
}
.gap4--live .gap4__story.is-active .gap4__opt + .gap4__opt .gap4__ch { animation-delay: calc(var(--i, 0) * 55ms + 160ms); }
.gap4--live .gap4__story.is-active .gap4__story-cap { animation: gap4-wipe 0.75s var(--g4-ease) 0.24s both; }
.gap4--live .gap4__story.is-active .gap4__story-src,
.gap4--live .gap4__story.is-active .gap4__opt-name { animation: gap4-fade 0.6s var(--g4-ease) 0.5s both; }
.gap4--live .gap4__story.is-active .gap4__opt-bar > span { animation: gap4-bar 1.1s var(--g4-ease) 0.3s both; }
.gap4--live .gap4__story.is-active .gap4__opt + .gap4__opt .gap4__opt-bar > span { animation-delay: 0.42s; }
.gap4--live .gap4__story.is-active .gap4__story-num--sticker { animation: gap4-stick 0.75s cubic-bezier(0.3, 1.45, 0.5, 1) 0.05s both; }
.gap4--live .gap4__story.is-active .gap4__end-note { animation: gap4-fade 0.8s var(--g4-ease) 0.1s both; }
.gap4--live .gap4__story.is-active .gap4__swipe { animation: gap4-fade 0.7s var(--g4-ease) 0.55s both; }
.gap4--live .gap4__story.is-active .gap4__chev { animation: gap4-bob 1.5s var(--g4-ease) 1.1s infinite; }

@keyframes gap4-fill  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gap4-fillY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes gap4-rise  { from { transform: translateY(108%); } to { transform: translateY(0); } }
@keyframes gap4-wipe  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gap4-fade  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gap4-bar   { from { transform: scaleX(0); } to { transform: scaleX(var(--v, 0)); } }
@keyframes gap4-stick { from { opacity: 0; transform: rotate(-16deg) scale(0.45); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
@keyframes gap4-bob   {
  0%, 100% { transform: translateY(1cqw) rotate(45deg); }
  50%      { transform: translateY(-1.2cqw) rotate(45deg); }
}

/* ---------- figures in sync ----------
   upcoming : dim, graphic empty (only the ink "rest" is drawn)
   active   : lit (.is-active), graphic draws, rule runs the story clock
   done     : dim, graphic full, rule full
   end      : every figure lit and full: the finished poster (.gap4--end)
   Resets are instant (no transition); only drawing is animated. */
.gap4--live .gap4__prog { background: rgba(240, 236, 227, 0.22); }
.gap4--live .gap4__fig {
  opacity: var(--g4-dim);
  transition: opacity 0.55s var(--g4-ease);
}
.gap4--live .gap4__fig.is-active,
.gap4--live.gap4--end .gap4__fig { opacity: 1; }
.gap4--live .gap4__fig:focus-within { opacity: 0.8; }
.gap4--live .gap4__fig.is-active:focus-within { opacity: 1; }
@media (hover: hover) {
  .gap4--live .gap4__fig:not(.is-active):hover { opacity: 0.62; }
}
/* the finale (board view): the dim figures light up one after another */
@media (min-width: 1200px) {
  .gap4--live.gap4--end .gap4__fig:nth-child(2) { transition-delay: 0.08s; }
  .gap4--live.gap4--end .gap4__fig:nth-child(3) { transition-delay: 0.16s; }
  .gap4--live.gap4--end .gap4__fig:nth-child(4) { transition-delay: 0.24s; }
  .gap4--live.gap4--end .gap4__fig:nth-child(5) { transition-delay: 0.32s; }
}
.gap4--live .gap4__fig.is-active .gap4__idx-n { background: var(--g4-paper); color: var(--g4-field); }
.gap4--live .gap4__fig.is-on .gap4__prog-fill,
.gap4--live.gap4--end .gap4__prog-fill { transform: scaleX(1); }
.gap4--live .gap4__fig.is-active .gap4__prog-fill { animation: gap4-fill var(--g4-d) linear both; }
.gap4--paused .gap4__fig.is-active .gap4__prog-fill { animation-play-state: paused; }

/* 01: the paper wipes across the ink from the left and stops at 65% */
.gap4--live .gap4__slab-fill { clip-path: inset(0 100% 0 0); transition: none; }
.gap4--live .gap4__num--news { transform: translate3d(-14%, 0, 0); transition: none; }
.gap4--live .is-on .gap4__slab-fill { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--g4-draw) 0.15s; }
.gap4--live .is-on .gap4__num--news { transform: none; transition: transform 1.7s var(--g4-ease) 0.15s; }

/* 02: columns rise from the floor; the numerals ride the crest */
.gap4--live .gap4__col-fill { transform: scaleY(0); transition: none; }
.gap4--live .gap4__col-num {
  opacity: 0;
  transform: translate3d(0, calc(var(--v) * 1cqh), 0);
  transition: none;
}
.gap4--live .is-on .gap4__col-fill { transform: none; transition: transform 1.3s var(--g4-draw) 0.1s; }
.gap4--live .is-on .gap4__col-num { opacity: 1; transform: none; transition: transform 1.3s var(--g4-draw) 0.1s, opacity 0.4s linear 0.1s; }
.gap4--live .is-on .gap4__col + .gap4__col .gap4__col-fill,
.gap4--live .is-on .gap4__col + .gap4__col .gap4__col-num { transition-delay: 0.26s; }

/* 03: an ink cover turns 45deg off the paper arc (the 3h draws), then the "+" */
.gap4--live .gap4__dial-cover { display: inline; transition: none; }
.gap4--live .gap4__dial-tail circle { opacity: 0; transition: none; }
.gap4--live .gap4__num--time > span[aria-hidden] { display: block; opacity: 0; transform: scale(0.86); transition: none; }
.gap4--live .is-on .gap4__dial-cover { transform: rotate(-45deg); transition: transform 1.25s var(--g4-draw) 0.1s; }
.gap4--live .is-on .gap4__dial-tail circle { transition: opacity 0.35s linear; }
.gap4--live .is-on .gap4__dial-tail circle:nth-child(1) { opacity: 1;    transition-delay: 1.35s; }
.gap4--live .is-on .gap4__dial-tail circle:nth-child(2) { opacity: 0.7;  transition-delay: 1.5s; }
.gap4--live .is-on .gap4__dial-tail circle:nth-child(3) { opacity: 0.45; transition-delay: 1.65s; }
.gap4--live .is-on .gap4__num--time > span[aria-hidden] { opacity: 1; transform: none; transition: opacity 0.6s var(--g4-ease) 0.2s, transform 1s var(--g4-ease) 0.2s; }

/* 04: 63 dots fill in sequence, bottom-left first */
.gap4--live .gap4__dot--on::after { transform: scale(0); transition: none; }
.gap4--live .gap4__num--learn { opacity: 0; transform: translate3d(0, 14%, 0); transition: none; }
.gap4--live .is-on .gap4__dot--on::after { transform: none; transition: transform 0.42s var(--g4-ease) calc(var(--i) * 15ms + 0.1s); }
.gap4--live .is-on .gap4__num--learn { opacity: 1; transform: none; transition: opacity 0.7s var(--g4-ease) 0.2s, transform 1s var(--g4-ease) 0.2s; }

/* 05: the cut sweeps in from the left and stops at 49 */
.gap4--live .gap4__split-layer--cut { clip-path: inset(0 100% 0 0); transition: none; }
.gap4--live .is-on .gap4__split-layer--cut { clip-path: inset(0 51% 0 0); transition: clip-path 1.35s var(--g4-draw) 0.1s; }

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* -------- < 1200: the board no longer fits beside the phone --------
   static: figures in two columns under/next to the list
   live  : ONE figure at a time (the active one) + a strip of tabs */
@media (max-width: 1199px) {
  .gap4 {
    --g4-w: max(250px, min(clamp(260px, 31vw, 330px), calc((100vh - 170px) * 0.5625)));
    --g4-w: max(250px, min(clamp(260px, 31vw, 330px), calc((100svh - 170px) * 0.5625)));
  }
  .gap4__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gap4__fig--news { grid-column: 1 / -1; }

  .gap4--live .gap4__board { align-self: center; }
  .gap4--live .gap4__figs { grid-template-columns: minmax(0, 1fr); }
  .gap4--live .gap4__fig,
  .gap4--live.gap4--end .gap4__fig {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s linear, visibility 0s linear 0.3s;
  }
  .gap4--live .gap4__fig.is-active,
  .gap4--live.gap4--end .gap4__fig.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s linear;
  }
  .gap4--live .gap4__fig--ask { display: block; }
  .gap4--live .gap4__jump { display: none; }      /* the strip does the jumping here */

  /* one-figure view: graphic left, words right */
  .gap4--live .gap4__fig--platforms,
  .gap4--live .gap4__fig--time,
  .gap4--live .gap4__fig--learn,
  .gap4--live .gap4__fig--roi {
    --g4-gs: 44cqi;
    display: grid;
    grid-template-columns: 44% minmax(0, 1fr);
    grid-template-areas:
      "idx idx"
      "gfx num"
      "gfx cap";
    grid-template-rows: auto auto 1fr;
    column-gap: 6cqi;
  }
  .gap4--live .gap4__fig:not(.gap4__fig--news) .gap4__idx { grid-area: idx; }
  .gap4--live .gap4__fig .gap4__gfx { grid-area: gfx; }
  .gap4--live .gap4__fig--learn .gap4__learn { display: contents; }
  .gap4--live .gap4__fig--learn .gap4__waffle { grid-area: gfx; }
  .gap4--live .gap4__fig .gap4__num--learn { position: static; grid-area: num; margin: 0 0 4px; font-size: 20cqi; -webkit-text-stroke: 0; }
  .gap4--live .gap4__fig:not(.gap4__fig--news) .gap4__cap { grid-area: cap; margin: 0; align-self: end; }
  .gap4--live .gap4__fig:not(.gap4__fig--news) .gap4__desc { font-size: clamp(0.95rem, 4.3cqi, 1.25rem); }
  .gap4--live .gap4__fig--news .gap4__num--news { font-size: calc((65cqi - 2 * var(--pad-x)) / 1.56); }

  /* the strip: a tab per story; its segment runs the same clock */
  .gap4--live .gap4__strip:not([hidden]) {
    display: flex;
    gap: 6px;
    margin-bottom: 22px;
  }
  .gap4__tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 0 0 6px;
    border: 0;
    background: none;
    font: inherit;
    color: var(--g4-paper);
    text-align: left;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.35s var(--g4-ease);
    -webkit-tap-highlight-color: transparent;
  }
  .gap4__tab:focus-visible { outline: 2px solid var(--g4-paper); outline-offset: 3px; }
  .gap4__tab.is-active,
  .gap4__tab.is-seen { opacity: 1; }
  .gap4__seg {
    position: relative;
    display: block;
    align-self: stretch;
    height: 3px;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(240, 236, 227, 0.28);
  }
  .gap4__seg-fill {
    position: absolute;
    inset: 0;
    background: var(--g4-paper);
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  .gap4__tab.is-seen .gap4__seg-fill { transform: scaleX(1); }
  .gap4__tab.is-active .gap4__seg-fill { animation: gap4-fill var(--g4-d) linear both; }
  .gap4--paused .gap4__tab.is-active .gap4__seg-fill { animation-play-state: paused; }
  .gap4__tab-n {
    font-family: var(--font-display);
    font-weight: 800;
    font-stretch: 80%;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
  }
}

/* -------- < 760: one column. Phone first, then the active figure -------- */
@media (max-width: 759px) {
  .gap4 { padding: 72px 0 0; }
  .gap4__headline { font-size: clamp(2.9rem, 14.6vw, 4.2rem); }

  .gap4 {
    --g4-w: min(calc(100vw - 2 * var(--gutter, 20px)), 440px);
    --g4-bezel: 4px;
  }
  .gap4__console {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 56px;
    margin-top: 48px;
  }
  .gap4__figs { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .gap4__fig { --g4-gs: min(100cqi, 330px); }
  .gap4__cols { width: 100%; }

  /* static list (and live): graphic left, words right, like the one-figure
     view, so five figures stay one short scroll instead of five screens */
  .gap4__fig--platforms,
  .gap4__fig--time,
  .gap4__fig--learn,
  .gap4__fig--roi {
    --g4-gs: 46cqi;
    display: grid;
    grid-template-columns: 46% minmax(0, 1fr);
    grid-template-areas:
      "idx idx"
      "gfx num"
      "gfx cap";
    grid-template-rows: auto auto 1fr;
    column-gap: 5cqi;
  }
  .gap4__fig:not(.gap4__fig--news) .gap4__idx { grid-area: idx; }
  .gap4__fig .gap4__gfx { grid-area: gfx; }
  .gap4__fig--learn .gap4__learn { display: contents; }
  .gap4__fig--learn .gap4__waffle { grid-area: gfx; }
  .gap4__fig .gap4__num--learn { position: static; grid-area: num; margin: 0 0 4px; font-size: 18cqi; -webkit-text-stroke: 0; }
  .gap4__fig:not(.gap4__fig--news) .gap4__cap { grid-area: cap; margin: 0; align-self: end; }
  .gap4__fig:not(.gap4__fig--news) .gap4__desc { font-size: 0.94rem; }
  .gap4__col-track { height: calc(var(--g4-gs) * 0.94); }

  /* live: the phone with the strip standing beside it, the one-figure
     view under both. The board dissolves into the console's grid. */
  /* phone + figure should share one screen under the site header */
  .gap4--live {
    --g4-w: max(224px, min(calc(100vw - 2 * var(--gutter, 20px) - 62px), calc((100vh - 380px) * 0.5625 + 8px)));
    --g4-w: max(224px, min(calc(100vw - 2 * var(--gutter, 20px) - 62px), calc((100svh - 380px) * 0.5625 + 8px)));
  }
  .gap4--live .gap4__console {
    grid-template-columns: var(--g4-w) minmax(52px, 1fr);
    grid-template-areas:
      "deck strip"
      "figs figs";
    column-gap: 10px;
    row-gap: 20px;
  }
  .gap4--live .gap4__board { display: contents; }
  .gap4--live .gap4__deck { grid-area: deck; }
  .gap4--live .gap4__figs { grid-area: figs; }
  .gap4--live .gap4__strip:not([hidden]) {
    grid-area: strip;
    align-self: stretch;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 4px 0 calc(16px + 1.4em);         /* keep clear of the hint line */
  }
  .gap4__tab {
    flex-direction: row;
    align-items: stretch;
    gap: 7px;
    padding: 0;
  }
  .gap4__seg { width: 3px; height: auto; align-self: stretch; }
  .gap4__seg-fill { transform: scaleY(0); transform-origin: 50% 0; }
  .gap4__tab.is-seen .gap4__seg-fill { transform: scaleY(1); }
  .gap4__tab.is-active .gap4__seg-fill { animation-name: gap4-fillY; }
  .gap4__tab-n { align-self: center; font-size: 0.86rem; }

  .gap4--live .gap4__fig--platforms,
  .gap4--live .gap4__fig--time,
  .gap4--live .gap4__fig--learn,
  .gap4--live .gap4__fig--roi { --g4-gs: 46cqi; grid-template-columns: 46% minmax(0, 1fr); column-gap: 5cqi; }
  .gap4--live .gap4__col-track { height: calc(var(--g4-gs) * 0.94); }
  .gap4--live .gap4__fig .gap4__num--learn { font-size: 18cqi; }
  .gap4--live .gap4__fig:not(.gap4__fig--news) .gap4__desc { font-size: 0.94rem; }
  .gap4--live .gap4__ruler { display: none; }

  .gap4__hint { width: auto; margin-top: 10px; }
  .gap4__foot { margin-top: 88px; }
  .gap4__note { font-size: clamp(1.95rem, 9.2vw, 2.6rem); line-height: 1.04; }
  .gap4__note-hit { font-size: 1.42em; margin-top: 32px; padding: 36px 0 32px; }
  .gap4__close { flex-direction: column; align-items: flex-start; gap: 22px; }
  .gap4__sources { flex: 0 0 auto; }
}

/* The site's sticky booking bar is cobalt: over this cobalt section it
   would vanish into the field and cover the synced figure. The section
   carries its own booking links (final story, the ask, the closing CTA),
   so the bar steps aside while the section is on screen (gap.js keeps
   .gap4--idle current; without IntersectionObserver the bar never runs). */
@media (max-width: 767px) {
  body:has(.gap4:not(.gap4--idle)) .cta-bar { transform: translateY(calc(140% + var(--consent-lift, 0px))); }
}

/* ================================================================
   ENTRANCE (only once gap.js arms the section; never under reduced
   motion). Each block runs once when .is-in lands on it.
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .gap4--armed .gap4__label,
  .gap4--armed .gap4__headline {
    opacity: 0;
    transform: translate3d(0, 0.35em, 0);
    transition: opacity 0.7s var(--g4-ease), transform 1s var(--g4-ease);
  }
  .gap4--armed .gap4__label { transform: translate3d(0, 12px, 0); }
  .gap4--armed .gap4__head.is-in .gap4__label,
  .gap4--armed .gap4__head.is-in .gap4__headline { opacity: 1; transform: none; }
  .gap4--armed .gap4__head.is-in .gap4__headline { transition-delay: 0.08s; }

  .gap4--armed .gap4__deck,
  .gap4--armed .gap4__strip,
  .gap4--armed .gap4__figs {
    opacity: 0;
    transform: translate3d(0, 48px, 0);
    transition: opacity 0.9s var(--g4-ease), transform 1.2s var(--g4-ease);
  }
  .gap4--armed .gap4__console.is-in .gap4__deck,
  .gap4--armed .gap4__console.is-in .gap4__strip,
  .gap4--armed .gap4__console.is-in .gap4__figs { opacity: 1; transform: none; }
  .gap4--armed .gap4__console.is-in .gap4__strip,
  .gap4--armed .gap4__console.is-in .gap4__figs { transition-delay: 0.14s; }

  .gap4--armed .gap4__note-lead {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.8s var(--g4-ease), transform 1.1s var(--g4-ease);
  }
  .gap4--armed .gap4__note-hit::before {
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 0.9s var(--g4-draw) 0.35s;
  }
  .gap4--armed .gap4__note-hit-t {
    display: block;
    opacity: 0;
    transform: translate3d(0, 0.28em, 0);
    transition: opacity 0.6s var(--g4-ease) 0.85s, transform 1s var(--g4-ease) 0.85s;
  }
  .gap4--armed .gap4__note.is-in .gap4__note-lead,
  .gap4--armed .gap4__note.is-in .gap4__note-hit-t,
  .gap4--armed .gap4__note.is-in .gap4__note-hit::before { opacity: 1; transform: none; }
}

/* Reduced motion never gets .gap4--live / --armed from the script; this is
   a belt-and-braces guard in case a class lingers after a runtime switch. */
@media (prefers-reduced-motion: reduce) {
  .gap4 *, .gap4 *::before, .gap4 *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}

/* keep the site's cobalt viewfinder dot visible on the cobalt field */
body:has(.gap4:hover) .vf__dot { box-shadow: 0 0 0 1.5px var(--paper, #f0ece3); }