/* ══════════════════════════════════════════════════════════════════
   Cas d'estudi · m4Social
   ------------------------------------------------------------------
   Scoped stylesheet for casos/m4social.html. Namespaced `--m4-*` /
   `.m4-*` so nothing leaks into site.css. The Punt Zero chrome (nav +
   footer) keeps its own tokens and fonts; only the case-study body
   takes on the project's identity.

   Palette and typeface lifted from m4social.org:
     #00A826 signature green · Montserrat
   The near-black base is ours: this case is about a sector deciding to
   stop being small, so the page is dark, dense and high-contrast — the
   deliberate opposite of the AYUDOC case study.

   Contrast, measured:
     #00A826 on #0E1116  5.97:1     #3ED96A on #0E1116  10.2:1
     #0E1116 on #F6F6F6 17.50:1     #00701B on #F6F6F6   5.83:1
   #00A826 sits at 3.17:1 on white, so on light surfaces it is reserved
   for large display text and graphics — never body copy.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --m4-green:     #00A826;
  --m4-green-lt:  #3ED96A;   /* on the dark base */
  --m4-green-txt: #00701B;   /* body-safe on paper */
  --m4-ink:       #0E1116;
  --m4-ink-2:     #161B22;
  --m4-paper:     #F6F6F6;
  --m4-white:     #FFFFFF;
  --m4-smoke:     #5A6470;
  --m4-mist:      rgba(246, 246, 246, .62);
  --m4-grey-dk:   #959FAB;   /* small grey text on the dark base, 6.6:1 on #161B22 */

  --m4-line:      rgba(246, 246, 246, .16);
  --m4-line-dk:   rgba(14, 17, 22, .12);

  --m4-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --m4-wrap: 1200px;
  --m4-pad:  clamp(20px, 4vw, 64px);
  --m4-ease: cubic-bezier(.16, 1, .3, 1);
  --m4-spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* ── Base ─────────────────────────────────────────────────────────── */

.m4 {
  background: var(--m4-ink);
  color: var(--m4-paper);
  font-family: var(--m4-font);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.62;
  overflow-x: clip;
}

.m4-wrap {
  width: 100%;
  max-width: var(--m4-wrap);
  margin-inline: auto;
  padding-inline: var(--m4-pad);
}

/* Setting `display` on a class outranks the UA rule behind the `hidden`
   attribute, so restore it inside this namespace. */
.m4 [hidden] { display: none !important; }

.m4-sec { padding-block: clamp(80px, 10vw, 148px); position: relative; }
.m4-sec--paper { background: var(--m4-paper); color: var(--m4-ink); }
.m4-sec--close { background: var(--m4-ink-2); }

/* ── Type ─────────────────────────────────────────────────────────── */

.m4-kicker {
  font-family: var(--pz-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--m4-green-txt);
  margin-bottom: 24px;
}
.m4-kicker--lt { color: var(--m4-green-lt); }

.m4-h2 {
  font-size: clamp(34px, 5.4vw, 76px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--m4-paper);
  max-width: 18ch;
  margin-bottom: 36px;
}
.m4-h2--dark { color: var(--m4-ink); }

.m4-lead {
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.46;
  max-width: 56ch;
  color: var(--m4-mist);
  margin-bottom: 52px;
}

.m4-p { max-width: 56ch; margin-bottom: 22px; color: var(--m4-mist); }
.m4-p--dark { color: var(--m4-smoke); }
.m4-p strong { font-weight: 700; color: var(--m4-paper); }
.m4-p--dark strong { color: var(--m4-ink); }

.m4-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(28px, 4vw, 72px);
}

.m4-quote {
  margin-top: clamp(56px, 7vw, 96px);
  padding-left: clamp(22px, 3vw, 40px);
  border-left: 3px solid var(--m4-green);
  max-width: 40ch;
}
.m4-quote p {
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--m4-paper);
}
.m4-quote--dark p { color: var(--m4-ink); }

.m4-mark {
  color: var(--m4-green-lt);
  font-weight: 700;
  background: linear-gradient(transparent 88%, rgba(0, 168, 38, .55) 88%);
}

/* ── Buttons ──────────────────────────────────────────────────────── */

.m4-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  border-radius: 2px;
  font-family: var(--m4-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background 260ms var(--m4-ease), color 260ms var(--m4-ease),
              border-color 260ms var(--m4-ease), transform 260ms var(--m4-ease);
}
.m4-btn svg { width: 17px; height: 17px; flex: none; }

.m4-btn--solid {
  background: var(--m4-green);
  color: #04210B;
  border: 1px solid var(--m4-green);
}
.m4-btn--solid:hover,
.m4-btn--solid:focus-visible { background: var(--m4-green-lt); border-color: var(--m4-green-lt); transform: translateY(-2px); }

.m4-btn--ghost {
  background: transparent;
  color: var(--m4-paper);
  border: 1px solid var(--m4-line);
}
.m4-btn--ghost:hover,
.m4-btn--ghost:focus-visible { border-color: var(--m4-green-lt); color: var(--m4-green-lt); transform: translateY(-2px); }


.m4 :is(a, button):focus-visible {
  outline: 3px solid var(--m4-green-lt);
  outline-offset: 3px;
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.m4-hero {
  position: relative;
  background: var(--m4-ink);
  padding-block: clamp(130px, 16vh, 210px) clamp(80px, 10vw, 130px);
  overflow: hidden;
  isolation: isolate;
}
.m4-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.m4-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14, 17, 22, .94) 0%, rgba(14, 17, 22, .78) 38%, rgba(14, 17, 22, .1) 68%, rgba(14, 17, 22, .35) 100%);
}
@media (max-width: 860px) {
  .m4-hero__veil { background: linear-gradient(180deg, rgba(14, 17, 22, .55) 0%, rgba(14, 17, 22, .9) 46%, rgba(14, 17, 22, .96) 100%); }
}
.m4-hero__inner { position: relative; z-index: 2; }

.m4-hero__title {
  font-size: clamp(60px, 15vw, 200px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.055em;
  margin-bottom: 34px;
  overflow: hidden;
  padding-bottom: .08em;
}
.m4-hero__word {
  display: inline-block;
  color: var(--m4-paper);
  animation: m4-title-in 1200ms var(--m4-ease) 180ms both;
}
.m4-hero__word em { font-style: normal; color: var(--m4-green); }
@keyframes m4-title-in {
  from { transform: translateY(102%); }
  to   { transform: none; }
}

.m4-hero__claim {
  font-size: clamp(20px, 2.2vw, 31px);
  line-height: 1.38;
  font-weight: 500;
  max-width: 30ch;
  color: var(--m4-paper);
  margin-bottom: clamp(44px, 5.5vw, 70px);
  animation: m4-fade-up 900ms var(--m4-ease) 940ms both;
}
@keyframes m4-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.m4-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 26px 34px;
  padding-block: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid var(--m4-line);
  border-bottom: 1px solid var(--m4-line);
  margin-bottom: clamp(38px, 4.6vw, 54px);
}
.m4-meta__row { display: flex; flex-direction: column; gap: 6px; }
.m4-meta dt {
  font-family: var(--pz-font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--m4-green-lt);
}
.m4-meta dd { margin: 0; font-size: 17px; font-weight: 600; color: var(--m4-paper); }

/* ── The client ───────────────────────────────────────────────────── */

.m4-client {
  background: var(--m4-white);
  color: var(--m4-ink);
  padding-block: clamp(44px, 5.5vw, 72px);
}
.m4-client__inner {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 76px);
  align-items: center;
}
@media (max-width: 860px) { .m4-client__inner { grid-template-columns: 1fr; gap: 28px; } }

.m4-client__logo { display: block; width: 100%; max-width: 360px; height: auto; }
.m4-client__desc { max-width: 60ch; color: var(--m4-smoke); margin-bottom: 26px; }
.m4-client .m4-kicker { color: var(--m4-green-txt); }

.m4-client__figs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 44px;
  padding: 0;
  margin: 0;
}
.m4-client__figs li { display: flex; flex-direction: column; gap: 3px; }
.m4-client__figs b {
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--m4-ink);
}
.m4-client__figs span { font-size: 14px; color: var(--m4-smoke); max-width: 20ch; line-height: 1.35; }

/* ── Closing ──────────────────────────────────────────────────────── */

.m4-close { text-align: center; }
.m4-close__t {
  font-size: clamp(30px, 4.6vw, 62px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--m4-paper);
  max-width: 20ch;
  margin: 0 auto 24px;
}
.m4-close__p { font-size: clamp(18px, 1.7vw, 23px); color: var(--m4-mist); max-width: 50ch; margin: 0 auto 40px; }
.m4-close__acts { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; }


/* ── Legend · shape and colour both carry the meaning ─────────────── */

.m4-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--pz-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m4-mist);
}
.m4-legend li { display: inline-flex; align-items: center; gap: 9px; }
.m4-legend i { display: inline-block; flex: none; }
.m4-legend__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--m4-green-lt); }
.m4-legend__sq  { width: 8px; height: 8px; background: var(--m4-paper); }

.m4-hero__legend {
  position: absolute;
  z-index: 2;
  right: var(--m4-pad);
  bottom: clamp(22px, 3vw, 36px);
}
@media (max-width: 860px) { .m4-hero__legend { display: none; } }

/* ── 02 · The loom · five weft threads woven at once ─────────────── */

.m4-loom {
  position: relative;
  background: var(--m4-ink-2);
  color: var(--m4-paper);
  padding-block: clamp(80px, 10vw, 148px);
  --lane: clamp(56px, 6.4vw, 76px);
}
.m4-loom__fig {
  display: grid;
  grid-template-columns: clamp(150px, 19vw, 230px) minmax(0, 1fr);
  gap: 0 clamp(14px, 2vw, 28px);
  margin-top: clamp(20px, 3vw, 40px);
}
.m4-loom__tabs { display: grid; grid-auto-rows: var(--lane); }
.m4-loom__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 4px 0 0;
  border: 0;
  border-top: 1px solid var(--m4-line);
  background: none;
  color: var(--m4-mist);
  font-family: var(--m4-font);
  font-size: clamp(14px, 1.25vw, 17px);
  font-weight: 600;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
  transition: color 260ms var(--m4-ease);
}
.m4-loom__tab:last-child { border-bottom: 1px solid var(--m4-line); }
.m4-loom__no {
  font-family: var(--pz-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--m4-grey-dk);
  transition: color 260ms var(--m4-ease);
}
.m4-loom__tab:hover,
.m4-loom__tab.is-hover { color: var(--m4-paper); }
.m4-loom__tab[aria-selected="true"] { color: var(--m4-paper); }
.m4-loom__tab[aria-selected="true"] .m4-loom__no { color: var(--m4-green-lt); }
.m4-loom__tab[aria-selected="true"] .m4-loom__name {
  background: linear-gradient(transparent 86%, rgba(62, 217, 106, .7) 86%);
}

.m4-loom__cloth { position: relative; min-width: 0; }
.m4-loom__canvas {
  display: block;
  width: 100%;
  height: calc(5 * var(--lane));
  cursor: pointer;
}
.m4-loom__years {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  font-family: var(--pz-font-mono);
  font-size: 11.5px;
  color: var(--m4-grey-dk);
}
.m4-loom__years li { padding-left: 6px; border-left: 1px solid var(--m4-line); }

.m4-loom__key {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-family: var(--pz-font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--m4-mist);
}
.m4-loom__key li { display: inline-flex; align-items: center; gap: 9px; }
.m4-loom__key i { display: inline-block; flex: none; }
.m4-loom__key-warp { width: 2px; height: 14px; background: rgba(246, 246, 246, .45); }
.m4-loom__key-weft { width: 20px; height: 5px; border-radius: 3px; background: var(--m4-green-lt); }
.m4-loom__key-knot { width: 8px; height: 8px; background: var(--m4-paper); transform: rotate(45deg); }
.m4-loom__key-note { text-transform: none; letter-spacing: .02em; color: var(--m4-grey-dk); }

.m4-loom__panels {
  margin-top: clamp(34px, 4vw, 56px);
  border-left: 3px solid var(--m4-green);
  padding-left: clamp(18px, 2.4vw, 32px);
  max-width: 760px;
}
.m4-loom__panels.is-live { display: grid; }
.m4-loom__panels.is-live > .m4-loom__panel { grid-area: 1 / 1; }
.m4-loom__panel.is-off { visibility: hidden; }
.m4-loom__panel.is-on { animation: m4-fade-up 520ms var(--m4-ease) both; }
.m4-loom__panel:focus-visible { outline: 3px solid var(--m4-green-lt); outline-offset: 6px; }
.m4-loom__kick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-family: var(--pz-font-mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--m4-green-lt);
  margin-bottom: 12px;
}
.m4-loom__kick span:first-child { color: var(--m4-paper); letter-spacing: .04em; }
.m4-loom__t {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
  margin-bottom: 14px;
}
.m4-loom__d { color: var(--m4-mist); max-width: 62ch; }

.m4-loom__cohesion {
  margin-top: clamp(70px, 9vw, 130px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--m4-line);
}
.m4-loom__ct {
  font-size: clamp(32px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 16ch;
  margin-bottom: 30px;
}

/* No JS: every front reads in full, one after another. */
.m4-loom__panels:not(.is-live) .m4-loom__panel + .m4-loom__panel { margin-top: 36px; }

@media (max-width: 700px) {
  .m4-loom { --lane: 58px; }
  .m4-loom__fig { grid-template-columns: 96px minmax(0, 1fr); gap: 0 10px; }
  .m4-loom__tab { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; font-size: 12.5px; }
  .m4-loom__years { font-size: 10px; }
  .m4-loom__years li { padding-left: 3px; }
}

/* ── 03 · The decade · questions, and what got built ─────────────── */

.m4-dec {
  background: var(--m4-paper);
  color: var(--m4-ink);
  padding-block: clamp(80px, 10vw, 148px);
}
.m4-lead--dark { color: var(--m4-smoke); }

.m4-dec__body {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  margin-top: clamp(30px, 4vw, 56px);
}

/* Rail · sticky; 11 years top to bottom, our years marked */
.m4-dec__rail {
  position: sticky;
  top: calc(var(--m4-nav-h, 80px) + 16px);
  align-self: start;
  height: calc(100vh - 140px);
  height: calc(100svh - 140px);
  max-height: 620px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.m4-dec__ruler { position: relative; flex: 1; }
.m4-dec__ruler::before {           /* the track */
  content: "";
  position: absolute;
  left: 7px; top: calc(.5 / 11 * 100%); bottom: calc(.5 / 11 * 100%);
  width: 2px;
  background: var(--m4-line-dk);
}
.m4-dec__band {
  position: absolute;
  left: 3px; width: 10px;
  top: calc(1.5 / 11 * 100%);
  height: calc(4 / 11 * 100%);
  border-radius: 5px;
  background: rgba(0, 168, 38, .22);
  border: 1px solid rgba(0, 112, 27, .45);
}
.m4-dec__fill {
  position: absolute;
  left: 7px; width: 2px;
  top: calc(.5 / 11 * 100%);
  height: calc(var(--m4-yr, 0) * 10 / 11 * 100%);
  background: var(--m4-ink);
}
.m4-dec__marker {
  position: absolute;
  left: 8px;
  top: calc((.5 + var(--m4-yr, 0) * 10) / 11 * 100%);
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--m4-ink);
  box-shadow: 0 0 0 4px var(--m4-paper);
  transition: background 300ms var(--m4-ease);
}
.m4-dec.is-band-now .m4-dec__marker { background: var(--m4-green); }
.m4-dec__ticks {
  list-style: none;
  margin: 0; padding: 0 0 0 28px;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(11, minmax(0, 1fr));
  align-items: center;
  font-family: var(--pz-font-mono);
  font-size: 12px;
  color: var(--m4-smoke);
}
.m4-dec__ticks li { transition: color 300ms var(--m4-ease); }
.m4-dec__ticks li:nth-child(n+2):nth-child(-n+6) { color: var(--m4-green-txt); }
.m4-dec__ticks li.is-now { color: var(--m4-ink); font-weight: 700; }

.m4-dec__key {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
  font-family: var(--pz-font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--m4-smoke);
}
.m4-dec__key li { display: flex; align-items: center; gap: 8px; }
.m4-dec__key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.m4-dec__key-ours  { background: rgba(0, 168, 38, .22); border: 1px solid rgba(0, 112, 27, .45); }
.m4-dec__key-after { border: 1px dashed var(--m4-smoke); }

/* Chapters */
.m4-dec__list { list-style: none; margin: 0; padding: 0; }
.m4-ch {
  position: relative;
  padding: clamp(34px, 4.4vw, 60px) 0 clamp(34px, 4.4vw, 60px) clamp(20px, 2.6vw, 36px);
  border-left: 3px solid var(--m4-line-dk);
}
.m4-ch--ours  { border-left-color: var(--m4-green); }
.m4-ch--after { border-left-style: dashed; border-left-color: rgba(90, 100, 112, .5); }
.m4-ch--ours + .m4-ch--ours { padding-top: clamp(14px, 2vw, 24px); }

.m4-ch__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  font-family: var(--pz-font-mono);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--m4-smoke);
  margin-bottom: 10px;
}
.m4-ch__y { font-size: 15px; letter-spacing: .06em; font-weight: 500; color: var(--m4-ink); }
.m4-ch--ours .m4-ch__y { color: var(--m4-green-txt); }
.m4-ch__q {
  font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  max-width: 22ch;
  color: var(--m4-ink);
  transition: color 400ms var(--m4-ease);
}
.m4-dec.is-live .m4-ch:not(.is-on) .m4-ch__q { color: #6B737D; }   /* 4.6:1 on paper */
.m4-ch__tag {
  display: inline-block;
  margin: 18px 0 16px;
  padding: 5px 10px;
  border-radius: 2px;
  font-family: var(--pz-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m4-smoke);
  border: 1px dashed rgba(90, 100, 112, .55);
}
.m4-ch--ours .m4-ch__tag { color: var(--m4-green-txt); border: 1px solid rgba(0, 112, 27, .45); background: rgba(0, 168, 38, .08); }
.m4-ch--before .m4-ch__tag { border-style: solid; border-color: var(--m4-line-dk); }
.m4-ch__ctx { color: var(--m4-smoke); max-width: 58ch; }

.m4-ch__builds {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}
.m4-build {
  background: var(--m4-white);
  border: 1px solid var(--m4-line-dk);
  border-radius: 4px;
  padding: 20px 22px 22px;
}
.m4-ch--after .m4-build { background: transparent; border-style: dashed; }
.m4-build__y {
  display: inline-block;
  font-family: var(--pz-font-mono);
  font-size: 11.5px;
  color: var(--m4-smoke);
  margin-bottom: 8px;
}
.m4-build__t {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: 8px;
}
.m4-build__d { font-size: 15.5px; line-height: 1.55; color: var(--m4-smoke); }

.m4-dec__close {
  margin-top: clamp(50px, 6vw, 90px);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  max-width: 36ch;
}

/* Phones: the rail becomes a bar under the nav */
@media (max-width: 760px) {
  .m4-dec__body { grid-template-columns: 1fr; gap: 0; }
  .m4-dec__rail {
    top: var(--m4-nav-h, 73px);
    z-index: 5;
    height: auto;
    max-height: none;
    margin-inline: calc(-1 * var(--m4-pad));
    padding: 10px var(--m4-pad) 8px;
    background: color-mix(in oklab, var(--m4-paper) 94%, transparent);
    border-bottom: 1px solid var(--m4-line-dk);
  }
  .m4-dec__key { display: none; }
  .m4-dec__ruler { height: 34px; flex: none; }
  .m4-dec__ruler::before { left: calc(.5 / 11 * 100%); right: calc(.5 / 11 * 100%); top: 6px; bottom: auto; width: auto; height: 2px; }
  .m4-dec__band { top: 2px; left: calc(1.5 / 11 * 100%); width: calc(4 / 11 * 100%); height: 10px; }
  .m4-dec__fill { top: 6px; left: calc(.5 / 11 * 100%); height: 2px; width: calc(var(--m4-yr, 0) * 10 / 11 * 100%); }
  .m4-dec__marker { top: 7px; left: calc((.5 + var(--m4-yr, 0) * 10) / 11 * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; }
  .m4-dec__ticks {
    padding: 18px 0 0;
    height: auto;
    grid-template-rows: none;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    text-align: center;
    font-size: 9px;
    letter-spacing: -.02em;
  }
  .m4-dec__ticks li:nth-child(even):not(.is-now) { color: transparent; }
  .m4-ch { padding-left: 16px; }
}
/* Without JS the rail has nothing to follow. */
.m4-dec:not(.is-live) .m4-dec__rail { display: none; }
.m4-dec:not(.is-live) .m4-dec__body { grid-template-columns: 1fr; }

/* ── Reduced motion · everything lands on its final state ─────────── */

@media (prefers-reduced-motion: reduce) {
  .m4-hero__word,
  .m4-hero__claim { animation: none; }
  .m4-ch__q, .m4-dec__marker { transition: none; }
  .m4-loom__panel.is-on { animation: none; }
  .m4-btn { transition: none; }
  .m4-btn--solid:hover, .m4-btn--ghost:hover,
  .m4-btn--solid:focus-visible, .m4-btn--ghost:focus-visible { transform: none; }
}