/* what-we-fix.css: page-specific rules, loaded after site.css. Sections:
   0 page tokens; 1 hero (image far plane + two SVG arcs); 2 the page device
   (sticky band stack, 68px staircase, from site.css's .stack > .card);
   3 the fix cards + artefact vignettes; 4 the entrance reveal (transition
   only -- the 13 looping keyframe animations that drove continuous scans,
   pulses and pops, and the JS ticker that kept rewriting them, are retired,
   per DESIGN-phase3.md);
   5 honesty line; 6 CTA band; 7 mobile; 8 reduced motion. */

/* --------------------------------------------------------- 0. page tokens
   --green: status "done/running", dark surfaces. --cyan-lt / --brand-lt:
   the approved light-band tokens (DESIGN-phase3.md sec 1), used only inside
   .viz.paper where the surface is light and the dark-surface cyan/green
   collapse under AA (measured, see the .viz.paper rule below). None of
   these are banned tokens or banned hex values. */
:root {
  --green: #7ac74f;
  --cyan-lt: #07686a;   /* 5.81:1 on paper */
  --brand-lt: #3f7a22;  /* 4.62:1 on paper */
  --ink-muted: #5f6884; /* 4.89:1 on paper */
  --border-strong: #2c3656;
}

p { margin: 0 0 19px; }
p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- 1. hero
   far = the generated image; mid + near = two SVG arcs (parallax .10/.25/
   .60 via site.js, which already matches .planes .plane-far/-mid/-near).
   The scrim sits over the upper two-thirds, where the H1 and eyebrow read,
   so glyph-pixel contrast holds even in the --white-media worst case. */
.hero { position: relative; overflow: hidden; padding: 40px 0 64px; }
.hero .hero-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
}
.hero .hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 14, 26, .93) 0%, rgba(10, 14, 26, .90) 30%,
    rgba(10, 14, 26, .68) 54%, rgba(10, 14, 26, .30) 72%,
    rgba(10, 14, 26, 0) 90%);
}
/* mid arc: a soft ridge separating the open "headline sky" from the lit
   desk below. top+height (not bottom) so the shared .plane-mid's bottom:0
   is the over-constrained value the spec drops, per CSS2.1 10.6.4. */
.hero .hero-arc-mid { top: 34%; bottom: auto; height: 220px; z-index: 1; opacity: .55; }
.hero .hero-arc-mid svg, .hero .hero-arc-near svg { display: block; width: 100%; height: 100%; }
/* near arc: height (72px) exceeds the hero's own bottom padding (64px) by
   exactly 8px, so the curve's peak -- clipped at the top of its box --
   overlaps the last 8px of the content column above it. */
.hero .hero-arc-near { bottom: 0; height: 72px; z-index: 2; }
.hero-inner { position: relative; z-index: 3; padding-top: 8px; }
.hero-inner .eyebrow { margin-bottom: 22px; }
.hero-inner h1 { max-width: 15ch; }
.hero-inner .sub {
  margin: 22px 0 0; max-width: 620px;
  font-size: clamp(17px, 2vw, 19px); line-height: 1.6; color: var(--text);
}
.hero-act { margin-top: 30px; }
/* Round C coordinator ruling: the hero had zero filled lime in the first
   view. Same technique already shipped on three other pages (first-agent,
   agent-mot, the homepage): the full label stays in the markup, a
   descriptive word hides under 600px so the button's pixel area clears
   the "lime under 2% of the first view" cap without shrinking the
   control itself. */
@media (max-width: 600px) {
  .hero-act .btn-lime .long { display: none; }
}

/* ------------------------------------------------- 2. the page device
   Five bands as sticky sibling cards (site.css's .stack > .card: 68px
   staircase, overflow: hidden, flat below 600px). --i resets to 0 here so
   the card's own stack index (set inline, 0-4) does not leak into the
   vignette rows below, which set their OWN --i per nth-child (section 3). */
.fixes { padding: 8px 0 64px; }
.stack > .card {
  background: var(--surface-elev); border: 1px solid var(--border);
  border-radius: 16px; padding: 32px clamp(20px, 4vw, 40px) 40px;
  --i: 0;
}
.band-head { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
.band-head .eyebrow { margin-bottom: 0; white-space: nowrap; }
.band-head::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------------------------------------------- 3. the fix cards + vignettes
   Unchanged in substance from the pre-Phase-3 page: real job artefacts
   (quote, inbox, tender, report, etc.), typeset in real markup rather than
   drawn. aria-hidden throughout -- the copy already carries the meaning. */
.diffs { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.diff.w5 { grid-column: span 5; }
.diff.w6 { grid-column: span 6; }
.diff.w7 { grid-column: span 7; }
.diff.w12 { grid-column: 1 / -1; }
.diff.w12 h2, .diff.w12 .after, .diff.w12 p { max-width: 68ch; }
.diff.w12 .viz { height: 150px; max-width: 68ch; }
@media (max-width: 640px) { .diff.w12 .viz { height: 138px; } }
/* Round C coordinator ruling: the closing card's w12 diff (.plan, not
   .flag) was previously shrunk to 700px and centred, which put its body
   at x=375 against x=112-121 on every other card -- a broken spine on the
   page's own repeated component. Left at the shared full-width .diff.w12
   box (card 0's own bare-right-half box, unchanged) so all six cards
   align on the same left edge; the 68ch copy cap (line 85 above) still
   keeps the reading measure short. */
.diff.flag { background: var(--surface); border-color: var(--border-strong); }
.diff.flag h2 { font-size: 23px; }
@media (max-width: 980px) {
  .diff.w5, .diff.w6, .diff.w7 { grid-column: span 6; }
  .diff.w12 { grid-column: 1 / -1; }
  .diff.flag h2 { font-size: 20px; }
}
/* card 0 ("Winning the work") is now its own single-diff card (split from
   the inbox/tender pair, see 2. above), so the quote vignette can sit
   beside its own copy instead of stacked above a 68ch column with the
   right half of the w12 box empty. Widths >=1100px only, matching the
   coordinator's own floor for the card-height cap: measured, the 300px
   viz column leaves a narrow enough text column between 900-1099px that
   more line-wrapping actually makes the card TALLER than the plain
   stacked fallback (662px at 900px wide vs 581px stacked) -- from
   1100px up the text column is wide enough that the grid is shorter
   AND tidier (589px down to 542px), so that's where it switches on. */
@media (min-width: 1100px) {
  .diff.flag { display: grid; grid-template-columns: 300px 1fr; column-gap: 28px; align-items: start; }
  /* grid-row: 1 / -1 does NOT span the implicit rows here -- this grid
     never declares grid-template-rows, so the EXPLICIT grid has zero row
     tracks and "-1" resolves to the same line as "1", collapsing the
     span to row 1 only (confirmed by measurement: swapping in "span 20"
     alone took the box from 150px to 292px, nothing else changed). Use
     an explicit large span instead, which reaches every implicit row
     that's actually there and stops -- no matter how many. align-self:
     stretch (overriding the block's own default "start") + height: auto
     then fills that full span top to bottom instead of sitting 150px
     tall at the top of a taller cell, which left a bare void underneath
     it. .vp (position: absolute, inset: 0) fills whatever height the
     stretch gives the box, so the stamp settles nearer the true bottom
     of the paper -- more paper showing reads as the fix, not a gap. */
  .diff.flag .viz { grid-column: 1; grid-row: 1 / span 20; margin: 2px 0 0; align-self: stretch; height: auto; min-height: 150px; }
  .diff.flag > *:not(.viz) { grid-column: 2; }
  .diff.flag .why { margin-top: 16px; }
}
.diff {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 26px 24px 24px; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .25s ease, transform .25s ease;
}
.diff:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.diff::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--cyan), transparent 70%); opacity: .55;
  transition: opacity .25s ease;
}
.diff:hover::before { opacity: .95; }
.diff.plan::before { opacity: .22; }
.diff.plan:hover::before { opacity: .45; }

.viz {
  position: relative; height: 132px; margin: 2px 0 18px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--navy); overflow: hidden;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; line-height: 1.5;
  color: var(--text-dim); transition: border-color .25s ease;
  contain: paint;
}
.diff:hover .viz { border-color: var(--border-strong); }
/* Paper: documents ARE white. --green/--cyan-deep are tuned for the navy
   field and collapse on a light one (measured 1.84:1 / 2.22:1 against
   #eef1f7, both under the 4.5 bar); the approved light-band tokens clear AA
   (4.62:1 / 5.81:1), measured at the glyph pixels, not eyeballed. */
.viz.paper {
  background: #eef1f7; border-color: #cbd3e2; color: #39415c;
  --green: var(--brand-lt);
  --cyan-deep: var(--cyan-lt);
}
.viz .vp { position: absolute; inset: 0; padding: 12px 14px; }
.vz-h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 9px; letter-spacing: 1.3px; text-transform: uppercase;
  padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.viz.paper .vz-h { border-bottom-color: #cbd3e2; color: var(--ink-muted); }
.vz-r { display: flex; align-items: center; gap: 8px; min-height: 19px; border-radius: 3px; }
.vz-t {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: Inter, sans-serif; font-size: 11px; color: var(--text);
}
.viz.paper .vz-t { color: #232a42; }
.vz-m { color: var(--text-faint); font-size: 9.5px; }
.viz.paper .vz-m { color: var(--ink-muted); }
.vz-bar { height: 6px; border-radius: 3px; background: currentColor; opacity: .22; }
.vz-chip {
  font-size: 8.5px; letter-spacing: .9px; text-transform: uppercase; padding: 2px 6px;
  border-radius: 4px; border: 1px solid var(--cyan-deep, var(--cyan)); color: var(--cyan);
  white-space: nowrap; flex-shrink: 0;
}
.vz-chip.q { border-color: var(--border-strong); color: var(--text-faint); }
.vz-chip.ok { border-color: var(--green); color: var(--green); }
.vz-tick { width: 11px; flex-shrink: 0; color: var(--green); font-size: 11px; line-height: 1; }
.vz-tick.pend { color: var(--cyan-deep, var(--cyan)); }
.vz-box { width: 9px; height: 9px; border-radius: 2px; border: 1px solid var(--text-faint); flex-shrink: 0; }
.viz.paper .vz-box { border-color: #9aa3bd; }
.vz-box.on { background: var(--green); border-color: var(--green); }
.vz-total { margin-top: 5px; padding-top: 6px; border-top: 1px solid #cbd3e2; }
.vz-total .vz-t { font-weight: 600; }
.vz-total .vz-bar { opacity: .45; height: 7px; }
.vz-r.flag .vz-t { color: #0f1424; font-weight: 600; }
.vz-r.flag .vz-tick { color: var(--cyan-deep, var(--cyan)); }
.vz-wave { display: flex; align-items: center; gap: 2px; height: 20px; }
.vz-wave i { display: block; width: 2px; border-radius: 1px; background: var(--cyan-deep, var(--cyan)); opacity: .5; }
.vz-board { display: flex; gap: 6px; height: 62px; }
.vz-col { flex: 1; border: 1px solid var(--border); border-radius: 5px; padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.vz-card { height: 8px; border-radius: 2px; background: var(--border-strong); }
.vz-card.hot { background: var(--cyan-deep, var(--cyan)); opacity: .7; }
.vz-col b { font-size: 8px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-faint); font-weight: 500; }
.vz-week { display: flex; gap: 4px; }
.vz-day { flex: 1; height: 26px; border-radius: 4px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--text-faint); }
.vz-day.on { border-color: var(--cyan-deep, var(--cyan)); color: var(--cyan); background: rgba(0, 227, 228, .08); }
.vz-live { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); margin-right: 5px; vertical-align: 1px; }
.vz-stamp {
  position: absolute; right: 12px; bottom: 12px; transform: rotate(-7deg);
  border: 1.5px solid var(--green); color: var(--green); border-radius: 5px;
  background: var(--navy); padding: 3px 8px; font-size: 9px; letter-spacing: 1.4px; font-weight: 600;
}
.viz.paper .vz-stamp { background: #eef1f7; }
@media (max-width: 640px) {
  .viz, .diff.w12 .viz { height: auto; min-height: 118px; }
  .viz .vp { position: static; }
}

.diff h2 {
  font-family: Inter, sans-serif; font-weight: 650; font-size: 19.5px; line-height: 1.28;
  margin: 0 0 12px; color: var(--text); letter-spacing: -0.01em; max-width: none;
}
.diff p { font-size: 15.5px; line-height: 1.6; color: var(--text-dim); margin: 0 0 12px; }
.diff .after { font-size: 16.5px; font-weight: 650; line-height: 1.4; color: var(--text); margin: 0 0 10px; letter-spacing: -0.005em; }
.diff .why { font-size: 15px; line-height: 1.6; color: var(--text); margin: 0; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.diff .take { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; align-self: flex-start; }
.diff .why b {
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan-deep, var(--cyan));
  display: block; margin-bottom: 5px;
}
.diff .why b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 8px; vertical-align: 1px; }
.diff .why b.build { color: var(--text-dim); }
.diff .why b.build::before { background: transparent; border: 1px solid var(--text-faint); }

/* ----------------------------------------------- 4. the entrance reveal
   Transitions only, no looping keyframe rules: each card arrives on its own beat, then
   its vignette's rows/bars/ticks/chips settle a beat after, on the SAME
   inherited --vd stagger as before. This is the "scroll-revealed" half of
   DESIGN-phase3.md's instruction for this device; the "or static" half
   covers everything that used to loop forever (see what it no longer does,
   below section 8). Content is never hidden without JS (.js gate) and
   never for reduced motion. */
html.js .diff, html.js .honesty, html.js .band-head { opacity: 0; transform: translateY(26px) scale(.97); }
html.js .band-head { transform: translateY(14px); }
html.js .diffs .diff:nth-child(odd) { transform: translate(-18px, 26px) scale(.97); }
html.js .diffs .diff:nth-child(even) { transform: translate(18px, 26px) scale(.97); }
html.js .diffs .diff.w12 { transform: translateY(26px) scale(.985); }
html.js .diff.in, html.js .honesty.in, html.js .band-head.in {
  opacity: 1; transform: none;
  transition: opacity .6s ease var(--rd, 0s),
              transform .7s cubic-bezier(.22, 1, .36, 1) var(--rd, 0s),
              border-color .25s ease;
}
/* The three hidden-state transform overrides above (nth-child odd/even,
   .w12) are each 4 class-selectors deep; the revealed rule just above is
   only 3 (.js .diff .in), so on its own it never wins the transform
   property and every card sits permanently at its hidden offset/scale even
   once opacity (contested at equal specificity, so source order settles
   it) correctly reaches 1. Matching the selector depth here, the same fix
   pattern this file uses elsewhere for the reduced-motion overrides. */
html.js .diffs .diff:nth-child(odd).in,
html.js .diffs .diff:nth-child(even).in,
html.js .diffs .diff.w12.in { transform: none; }
html.js .diff::before { transform: scaleY(0); transform-origin: top; }
html.js .diff.in::before {
  transform: scaleY(1);
  transition: transform .75s cubic-bezier(.22, 1, .36, 1) calc(var(--rd, 0s) + .3s), opacity .25s ease;
}
/* the H2 gets its own small line-reveal (opacity + 8px lift, same shape as
   the shared .reveal-line primitive), but driven by THIS diff's own .in
   trigger rather than the shared primitive's separate 60%-visibility
   observer -- staggered 60ms after the card's own reveal starts (--rd),
   not against a second observer. Two observers at different thresholds
   left the heading dim for a real scroll window while the rest of a
   sticky card was already fully lit (a competing-observer bug, not a
   timing one) -- tested and confirmed on this page, so kept off the
   shared primitive; this is the one-observer fix instead. */
html.js .diff h2 { opacity: .25; transform: translateY(8px); }
html.js .diff.in h2 {
  opacity: 1; transform: none;
  transition: opacity .5s ease calc(var(--rd, 0s) + .06s),
              transform .5s cubic-bezier(.22, 1, .36, 1) calc(var(--rd, 0s) + .06s);
}
html.js .diff .viz { opacity: 0; transform: translateY(10px); }
html.js .diff.in .viz {
  opacity: 1; transform: none;
  transition: opacity .55s ease calc(var(--rd, 0s) + .28s),
              transform .6s cubic-bezier(.22, 1, .36, 1) calc(var(--rd, 0s) + .28s),
              border-color .25s ease;
}
html.js .diff .vz-stamp { opacity: 0; transform: rotate(-7deg) scale(1.5); }
html.js .diff.in .vz-stamp {
  opacity: 1; transform: rotate(-7deg) scale(1);
  transition: opacity .3s ease calc(var(--rd, 0s) + .95s),
              transform .45s cubic-bezier(.34, 1.56, .64, 1) calc(var(--rd, 0s) + .95s);
}
html.js .diff .vz-flip { opacity: 0; transform: translateX(-6px); }
html.js .diff.in .vz-flip {
  opacity: 1; transform: none;
  transition: opacity .4s ease calc(var(--rd, 0s) + .95s), transform .5s cubic-bezier(.22, 1, .36, 1) calc(var(--rd, 0s) + .95s);
}
html.js .diff .vp > *:not(.vz-stamp):not(.vz-flip) { opacity: 0; transform: translateY(6px); }
html.js .diff.in .vp > *:not(.vz-stamp):not(.vz-flip) {
  opacity: 1; transform: none;
  transition: opacity .38s ease var(--vd), transform .44s cubic-bezier(.22, 1, .36, 1) var(--vd);
}
html.js .diff .vp > * { --vd: calc(var(--rd, 0s) + .34s + var(--i, 0) * .085s); }
html.js .diff .vp > *:nth-child(2) { --i: 1; }
html.js .diff .vp > *:nth-child(3) { --i: 2; }
html.js .diff .vp > *:nth-child(4) { --i: 3; }
html.js .diff .vp > *:nth-child(5) { --i: 4; }
html.js .diff .vp > *:nth-child(6) { --i: 5; }
html.js .diff .vz-bar { transform: scaleX(0); transform-origin: right; }
html.js .diff.in .vz-bar { transform: scaleX(1); transition: transform .5s cubic-bezier(.22, 1, .36, 1) calc(var(--vd) + .12s); }
html.js .diff .vz-tick, html.js .diff .vz-box.on { transform: scale(0); }
html.js .diff.in .vz-tick, html.js .diff.in .vz-box.on { transform: scale(1); transition: transform .38s cubic-bezier(.34, 1.56, .64, 1) calc(var(--vd) + .16s); }
html.js .diff .vz-chip { opacity: 0; transform: scale(.85); }
html.js .diff.in .vz-chip {
  opacity: 1; transform: none;
  transition: opacity .3s ease calc(var(--vd) + .2s), transform .38s cubic-bezier(.34, 1.56, .64, 1) calc(var(--vd) + .2s);
}
html.js .diff .vz-col { --vd: calc(var(--rd, 0s) + .34s + var(--i, 0) * .085s); }
html.js .diff .vz-col:nth-child(1) { --i: 2; }
html.js .diff .vz-col:nth-child(2) { --i: 3; }
html.js .diff .vz-col:nth-child(3) { --i: 4; }
html.js .diff .vz-card { transform: scaleX(0); transform-origin: left; }
html.js .diff.in .vz-card { transform: scaleX(1); transition: transform .42s cubic-bezier(.22, 1, .36, 1) calc(var(--vd) + .1s); }
html.js .diff .vz-day { --vd: calc(var(--rd, 0s) + .34s + var(--i, 0) * .085s); --i: 2; }
html.js .diff .vz-day:nth-child(2) { --i: 2.6; }
html.js .diff .vz-day:nth-child(3) { --i: 3.2; }
html.js .diff .vz-day:nth-child(4) { --i: 3.8; }
html.js .diff .vz-day:nth-child(5) { --i: 4.4; }
html.js .diff .vz-day:nth-child(6) { --i: 5; }
html.js .diff .vz-day:nth-child(7) { --i: 5.6; }
html.js .diff .vz-day.on { background: transparent; border-color: var(--border); color: var(--text-faint); }
html.js .diff.in .vz-day.on {
  background: rgba(0, 227, 228, .08); border-color: var(--cyan-deep, var(--cyan)); color: var(--cyan);
  transition: background .4s ease calc(var(--vd) + .3s), border-color .4s ease calc(var(--vd) + .3s), color .4s ease calc(var(--vd) + .3s);
}

/* ---------------------------------------------------- 5. the honesty line */
.honesty {
  margin: 30px auto 0; padding: 22px 24px; border: 1px solid var(--border);
  border-left: 2px solid var(--cyan-deep, var(--cyan)); border-radius: 0 14px 14px 0;
  background: var(--surface); font-size: 15.5px; line-height: 1.65; color: var(--text);
  max-width: 760px;
}
.honesty b {
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan-deep, var(--cyan));
  display: block; margin-bottom: 6px;
}

/* ------------------------------------------------------------- 6. CTA band
   Round C coordinator ruling: the hero now carries the one filled lime
   control per view (brand law, site.css), so this repeat goes ghost --
   shared .btn-outline, same label, same link, matching the convention
   documented in site.css directly above .btn-outline's own definition.
   No page-local size override: the shared .btn-outline (15px) is correct
   as shipped, where the earlier .btn-lime override here ran 17px/56px
   against the site's 15px/49px. */
.cta-band { border-top: 1px solid var(--border); padding: 48px 0 8px; text-align: center; }
.cta-band p { font-size: 16px; color: var(--text-dim); margin: 0 0 18px; }
.cta-band p.cta-sub { font-size: 14px; color: var(--text); opacity: .85; margin: 16px 0 0; }

/* --------------------------------------------------------------- 7. mobile */
@media (max-width: 640px) {
  .diffs { grid-template-columns: 1fr; gap: 16px; }
  .diff.w5, .diff.w6, .diff.w7 { grid-column: auto; }
  .diff h2 { font-size: 18.5px; }
  .diff.flag h2 { font-size: 19.5px; }
  .stack > .card { padding: 26px 20px 32px; }
  .hero { padding: 24px 0 56px; }
  .hero-inner h1 { max-width: none; }
}

/* ---------------------------------------------------- 8. reduced motion
   Everything the entrance reveal (section 4) animates has to be listed
   here too, or it keeps its hidden start state forever under reduced
   motion. Nothing else needs an override: the 13 looping keyframe rules
   that used to need one (row scans, paper sheen, pending/blink glows, the
   live-dot and waveform loops, the ticker's arrive/stamp/swap/land pops,
   the asking caret) are gone outright, not just muted, so there is no loop
   left to silence for those. */
@media (prefers-reduced-motion: reduce) {
  html.js .diff, html.js .diffs .diff:nth-child(odd), html.js .diffs .diff:nth-child(even),
  html.js .diffs .diff.w12, html.js .band-head, html.js .honesty { opacity: 1; transform: none; transition: none; }
  html.js .diff::before { transform: none; transition: none; }
  html.js .diff h2 { opacity: 1; transform: none; transition: none; }
  html.js .diff .viz, html.js .diff .vz-flip,
  html.js .diff .vp > *:not(.vz-stamp):not(.vz-flip),
  html.js .diff .vz-bar, html.js .diff .vz-tick, html.js .diff .vz-box.on,
  html.js .diff .vz-chip, html.js .diff .vz-card { opacity: 1; transform: none; transition: none; }
  html.js .diff .vz-stamp { opacity: 1; transform: rotate(-7deg); transition: none; }
  html.js .diff .vz-day.on { background: rgba(0, 227, 228, .08); border-color: var(--cyan-deep, var(--cyan)); color: var(--cyan); transition: none; }
}