/**
 * /index2.php: the homepage candidate "Rewind from the Write-up", built to
 * .scratch/index1-homepage/copy-spec.md and .scratch/homepage-layouts/index2/
 * vibe-spec.md.
 *
 * The hero is the finished one-pager; every section under it steps back in
 * time to the moment that made it, and a ticked rule runs up the left margin
 * like an editor's timeline. index-new.css loads first for the account dialogs
 * and the .tue-page ground (paper grid, type reset).
 */
.i2 { accent-color: var(--brand); caret-color: var(--brand-ink); }
.i2 p { color: var(--text-default); }

/* Checkout feedback: the pressed CTA says it is working, and an error lands
   beside it. */
.i2 .ws-btn.is-busy { cursor: progress; opacity: 0.75; pointer-events: none; }
.i2 p.i2-cta-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-basis: 100%;
  margin: var(--space-2) 0 0;
  font-size: var(--text-h4);
  color: var(--color-error-ink);
}
.i2 p.i2-cta-error[hidden] { display: none; }
.i2-cta-error__icon { font-size: var(--text-h2); }
/* The primary has no border and the secondary a 2px one; a transparent border
   evens the pair's heights on this page without touching the shared sheet. */
.i2 .ws-btn--primary { border: 2px solid transparent; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.i2-hero { padding-block: var(--space-12) var(--space-16); }
.i2-hero__grid { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 1100px) {
  .i2-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-16); }
}
.i2-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }

.i2-hero__head { margin: 0; max-width: none; }
.i2-hero__head .ws-section-header__title {
  font-size: var(--text-display-xl);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  color: var(--text-dark);
}
/* DESIGN.md's Display Text Pattern: the emphasised words italic in brand ink,
   with a flush band in the brand's soft tint under them. */
.i2-hero__head .ws-section-header__subtitle {
  font-style: italic;
  color: var(--brand-ink);
  background-image: linear-gradient(transparent calc(100% - var(--space-2)), var(--brand-soft) 0);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.i2-hero__head .ws-section-header__desc {
  margin-top: var(--space-6);
  max-width: 34em;
  font-size: var(--text-h2);
  line-height: var(--leading-normal);
  color: var(--text-default);
}
.i2-hero__actions { margin-top: var(--space-8); }
.i2-hero__trial { flex-basis: 100%; margin: 0; font-size: var(--text-h4); color: var(--text-muted); }
/* Side by side, the two buttons share the row and the trial line drops below
   both; on a phone the source order keeps it under the primary. */
@media (min-width: 641px) {
  .i2-hero__primary { order: 1; }
  .i2-hero__secondary { order: 2; }
  .i2-hero__trial { order: 3; }
}

/* ── The one-pager ──────────────────────────────────────────────────── */
/* A finished document lying a little forward of a second sheet, on the
   paper grid. */
.i2-doc { position: relative; margin: 0; padding: var(--space-4) var(--space-6) var(--space-6) 0; }
.i2-doc::before {
  content: "";
  position: absolute;
  inset: var(--space-8) 0 0 var(--space-6);
  background: var(--bg-paper-dark);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  transform: rotate(2deg);
}
.i2-doc__sheet {
  position: relative;
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  transform: rotate(-1deg);
}
.i2-doc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.i2-doc__kind { margin: 0; font-size: var(--text-body); }
/* The page's wildcard starts here: the time the write-up went out, in the
   display face. Every stamp below it runs backwards from this one. */
.i2-sent { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.i2-sent__word { font-size: var(--text-body); font-weight: var(--font-semibold); color: var(--text-default); }
.i2-sent__time {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--font-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark);
}
.i2-doc__title {
  margin: var(--space-2) 0 var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--card-border);
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  color: var(--text-dark);
}
.i2-doc__k { margin: var(--space-6) 0 var(--space-1); font-size: var(--text-body); font-weight: var(--font-semibold); color: var(--text-default); }
.i2-doc__title + .i2-doc__k { margin-top: 0; }
.i2-doc__line {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  color: var(--text-dark);
}
.i2-sources { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.i2 .ws-source-chip { padding: var(--space-1) var(--space-2); }
.i2 .ws-source-chip,
.i2 .ws-source-chip__label { font-size: var(--text-body); }
.i2 .ws-source-chip__glyph { font-size: var(--text-h4); }

/* Sources wherever they appear on the page wear the same mark: brand ink on
   the tint (4.58:1). It is the chips themselves that carry it, never a tinted
   box round them inside a card. */
.i2 .i2-lit { color: var(--brand-ink); background: var(--brand-tint); border-color: var(--brand-line); }

/* The one motion: on load the one-pager's sources light up in turn, as if the
   rewind is about to start. The lit state is the resting style, so with the
   animation off (reduced motion) they are simply lit. */
.i2-doc .i2-lit {
  animation: i2-light var(--duration-reveal) var(--ease-reveal) both;
  animation-delay: 700ms;
}
.i2-doc .i2-lit--2 { animation-delay: calc(700ms + var(--stagger-reveal)); }
.i2-doc .i2-lit--3 { animation-delay: calc(700ms + var(--stagger-reveal) * 2); }
@keyframes i2-light {
  from { color: var(--text-default); background-color: var(--gray-100); border-color: var(--gray-200); }
  to { color: var(--brand-ink); background-color: var(--brand-tint); border-color: var(--brand-line); }
}

/* ── The rewind strip ───────────────────────────────────────────────── */
/* An editor's timeline under the document: ticks along a track, the playhead
   on 18:04, and the earlier stops to its right. */
.i2-hero__visual { display: grid; gap: var(--space-6); min-width: 0; }
.i2-scrub { display: flex; align-items: flex-start; gap: var(--space-4); }
/* Level with the track, like the transport button at the head of a timeline. */
.i2-scrub__label { flex: none; font-size: var(--text-body); }
.i2 .ws-badge .ws-badge__icon .material-symbols-outlined { font-size: var(--text-h3); }
.i2-scrub__stops {
  position: relative;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: var(--space-6) 0 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.i2-scrub__stops::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--space-3);
  border-bottom: 2px solid var(--brand-line);
  background: repeating-linear-gradient(to right, var(--brand-line) 0 1px, transparent 1px var(--space-2));
}
.i2-scrub__stop { position: relative; }
.i2-scrub__stop::before {
  content: "";
  position: absolute;
  top: calc(var(--space-3) - var(--space-6) - var(--space-2) + 1px);
  left: 0;
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--bg-page);
  border: 2px solid var(--brand);
}
.i2-scrub__stop.is-here::before { background: var(--brand); }
.i2-scrub__stop a {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-1);
  margin-left: calc(var(--space-1) * -1);
  border-radius: var(--radius-sm);
  color: var(--text-default);
  text-decoration: none;
  font-size: var(--text-body);
  white-space: nowrap;
}
.i2-scrub__stop time,
.i2-scrub__day {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-dark);
}
.i2-scrub__stop a:hover span:last-child { text-decoration: underline; text-underline-offset: var(--space-1); }
.i2-scrub__stop a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }

/* ── The rewind ─────────────────────────────────────────────────────── */
/* A ticked timeline runs up the left margin through every stamp, the hero
   strip's track turned on its end. */
.i2-rewind { padding-block: var(--space-8) var(--space-16); }
.i2-rewind__inner { position: relative; padding-left: var(--space-16); }
/* The rule is drawn in pieces, so it starts at 18:04's dot and stops at
   Monday's: down through every step and straight through each mark. */
.i2-step::after,
.i2-earlier::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--space-3);
  border-left: 2px solid var(--brand-line);
  background: repeating-linear-gradient(to bottom, var(--brand-line) 0 1px, transparent 1px var(--space-2));
}
.i2-step::after { left: calc(var(--space-4) - var(--space-16)); }
.i2-step:first-of-type::after { top: calc(var(--space-10) + var(--space-6)); }
.i2-step:last-of-type::after { bottom: auto; height: calc(var(--space-10) + var(--space-6)); }
.i2-earlier::before { left: var(--space-3); z-index: -1; }
.i2-step { position: relative; display: grid; gap: var(--space-8); padding-block: var(--space-10); scroll-margin-top: var(--space-16); }
/* Each stamp hangs on the timeline by a dot level with its numerals. */
.i2-step::before {
  content: "";
  position: absolute;
  top: calc(var(--space-10) + var(--space-5));
  left: calc(var(--space-4) + 1px - var(--space-16) - var(--space-2));
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--brand);
  z-index: 1;
}
@media (min-width: 1000px) {
  .i2-step { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-10); align-items: start; }
}
.i2-step__head { margin: 0; }
/* The stamp: the time in display numerals, what happened under it. */
.i2-step__head .ws-section-header__title {
  margin: 0;
  font-size: var(--text-display-lg);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--text-dark);
}
.i2-step__head .ws-section-header__subtitle {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-h1);
  font-weight: var(--font-semibold);
  color: var(--brand-ink);
  letter-spacing: 0;
}
.i2-step__items { margin-top: var(--space-6); }
.i2-item__title { margin: 0 0 var(--space-2); font-size: var(--text-h2); line-height: var(--leading-snug); }
.i2-step__items p { margin: 0; max-width: 34em; font-size: var(--text-h4); line-height: var(--leading-normal); }

/* The marks between the steps sit on the timeline itself. */
.i2-earlier { position: relative; z-index: 1; margin: 0 0 0 calc(var(--space-4) - var(--space-16) - var(--space-3)); }
.i2 .i2-earlier .ws-badge,
.i2 .i2-scrub__label { font-size: var(--text-body); }

/* The steps' drawings: the same workshop, one moment earlier each time. */
.i2-step__visual { margin: 0; display: grid; gap: var(--space-4); min-width: 0; }
.i2-panel__label { margin: 0 0 var(--space-3); font-size: var(--text-body); }
.i2-theme {
  margin: 0 0 var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  color: var(--text-dark);
}
/* The theme's sources hang off one brand rule, the trace back from the line. */
.i2-trace { display: grid; gap: var(--space-5); padding-left: var(--space-5); border-left: 2px solid var(--brand-line); }
.i2-trace__src { display: grid; gap: var(--space-3); align-content: start; }
.i2-trace__pair { display: grid; gap: var(--space-5); }
@media (min-width: 640px) {
  .i2-trace__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.i2-trace__quote { margin: 0; font-family: var(--font-heading); font-size: var(--text-h3); line-height: var(--leading-snug); color: var(--text-dark); }
/* Three notes from the board photo, as they were stuck up. */
.i2-stickies { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 640px) {
  .i2-stickies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .i2-stickies li { min-height: calc(var(--space-16) + var(--space-8)); }
}
.i2-stickies li {
  padding: var(--space-4);
  background: var(--brand-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  color: var(--text-dark);
}
.i2-stickies li:nth-child(2) { transform: rotate(1.5deg); }
.i2-stickies li:nth-child(3) { transform: rotate(-1deg); }

/* 14:20: the console and the card that came up beside it. */
/* Side by side, the two cards share one height (Match the neighbours). */
@media (min-width: 1200px) {
  .i2-room { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
}
.i2-console__item { margin: 0; font-family: var(--font-heading); font-size: var(--text-h1); line-height: var(--leading-tight); color: var(--text-dark); }
.i2-console__timer { margin: var(--space-3) 0; display: flex; align-items: baseline; gap: var(--space-2); }
.i2-console__clock {
  font-family: var(--font-heading);
  font-size: var(--text-display-lg);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark);
}
.i2-console__of { font-size: var(--text-h4); color: var(--text-default); }
.i2-console__k { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-body); font-weight: var(--font-semibold); color: var(--text-default); }
.i2-reactions { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.i2-reaction { font-size: var(--text-body); }
.i2-console__next { margin: var(--space-3) 0 0; font-size: var(--text-body); color: var(--text-default); }
.i2-card__name { margin: 0 0 var(--space-3); font-size: var(--text-h3); }
.i2-card__say { margin: 0; font-family: var(--font-heading); font-size: var(--text-h2); line-height: var(--leading-snug); color: var(--text-dark); }

/* 09:00: the day the rest of the page happened in, and its grade. */
.i2-arc { margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--card-border); }
.i2-agenda .ws-agenda__item { padding: var(--space-2) var(--space-3); border-top-color: var(--card-border); }
/* Type beside the title rather than under it, so the whole day reads in one
   glance. */
.i2-agenda .ws-agenda__body { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); }
.i2-agenda .ws-agenda__time,
.i2-agenda .ws-agenda__duration,
.i2-agenda .ws-agenda__type { font-size: var(--text-body); }
.i2-agenda .ws-agenda__title { font-size: var(--text-h4); }
/* How Might We? (the eighth row) is the item the room is ten minutes from
   finishing at 14:20; brand ink holds 4.58:1 on the tint. */
.i2-agenda .ws-agenda__item:nth-child(8) {
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 1px var(--brand-line);
  border-radius: var(--radius-lg);
}
.i2-agenda .ws-agenda__item:nth-child(8) .ws-agenda__title { color: var(--brand-ink); }
.i2-agenda .ws-agenda__item:nth-child(8) + .ws-agenda__item { border-top-color: transparent; }
.i2-arc__score { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-4); }
.i2-arc__num { font-family: var(--font-heading); font-size: var(--text-display); line-height: 1; color: var(--text-dark); }
.i2-arc__word { font-size: var(--text-h4); font-weight: var(--font-semibold); color: var(--text-dark); }
.i2-arc__curve { display: block; width: 100%; height: calc(var(--space-16) + var(--space-8)); color: var(--brand); }
.i2-arc__fill { fill: var(--brand-tint); }
.i2-arc__line { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.i2-arc__marks {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-body);
  color: var(--text-default);
}
.i2-arc__here { font-weight: var(--font-semibold); color: var(--text-dark); }

/* Monday: the sentence, its filled blanks underlined in the brand, and what
   came back from it. Ink, not brand ink, on the card (4.47:1 there). */
.i2-pitch {
  margin: 0 0 var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  line-height: var(--leading-snug);
  color: var(--text-dark);
}
.i2-pitch b { font-weight: var(--font-semibold); color: var(--text-dark); border-bottom: 2px solid var(--brand); }
.i2-back { margin: 0; display: grid; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--card-border); }
@media (min-width: 900px) {
  .i2-back { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.i2-back dt { margin: 0 0 var(--space-1); font-size: var(--text-body); font-weight: var(--font-semibold); color: var(--text-default); }
.i2-back dd { margin: 0; font-family: var(--font-heading); font-size: var(--text-h3); line-height: var(--leading-snug); color: var(--text-dark); }
/* The success badge's own green measures 2.72:1 on its fill; the success ink
   clears it (6.34:1). */
.i2 .i2-go { font-family: var(--font-body); font-size: var(--text-body); color: var(--color-success-ink); }

/* ── Section headings below the rewind ──────────────────────────────── */
/* A display step, so the scale does not fall from the stamps straight to
   body-sized h2s. index-new.css zeroes paragraph margins, so the description
   takes its own. */
.i2-library .ws-section-header__title,
.i2-plans .ws-section-header__title {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
@media (min-width: 1100px) {
  .i2-library .ws-section-header__title,
  .i2-plans .ws-section-header__title { font-size: var(--text-display-lg); }
}
.i2-library .ws-section-header__desc,
.i2-plans .ws-section-header__desc {
  max-width: 40em;
  margin-top: var(--space-4);
  font-size: var(--text-h3);
  line-height: var(--leading-normal);
  color: var(--text-default);
}
@media (min-width: 1100px) {
  .i2-library .ws-section-header__desc,
  .i2-plans .ws-section-header__desc { margin-top: var(--space-5); }
}

/* ── Library ────────────────────────────────────────────────────────── */
.i2-library { padding-block: var(--space-16); background: var(--bg-warm-muted); }
/* Stacked: the heading and its button, then the three entries in one row. */
.i2-library__grid { display: grid; gap: var(--space-10); }
.i2-library__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); max-width: 46em; }
.i2-library__text .ws-section-header { margin: 0; }
.i2-libcard__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }
/* The duration badge's own grey measures 4.40:1 at this size; body ink clears it. */
.i2-libcard__meta .ws-badge { font-size: var(--text-body); padding: var(--space-1) var(--space-2); color: var(--text-default); }

/* ── Listed on ──────────────────────────────────────────────────────── */
.i2-seen { padding-block: var(--space-10); }
.i2-seen__row { justify-content: center; }
.i2-seen__row > p { font-size: var(--text-body); }
.i2-seen__row img { height: var(--space-10); width: auto; }
@media (max-width: 640px) {
  .i2-seen__row > p { flex-basis: 100%; text-align: center; }
}

/* ── Plans ──────────────────────────────────────────────────────────── */
.i2-plans { padding-block: var(--space-16); }
.i2-plans__grid { display: grid; gap: var(--space-6); margin-top: var(--space-10); align-items: start; }
@media (min-width: 900px) {
  .i2-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.i2-plan { height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.i2-plan--pro { border-color: var(--brand-line); box-shadow: var(--shadow-md); }
/* Both heads share one height, so Free's price and button sit level with Pro's
   beside its billing switch. */
.i2-plan__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: var(--space-10); }
.i2-billing { display: flex; gap: var(--space-1); }
.i2-billing__btn { font-size: var(--text-body); }
.i2-billing__btn.is-on { background: var(--brand-tint); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand-line); }
/* Inside a --card-bg card, a white fill keeps the secondary button's brand ink
   at 5.02:1 (it measures 4.47:1 on the card itself). */
.i2-plan .ws-btn--secondary { background-color: var(--bg-surface); }
.i2-plan__cost { margin: 0; color: var(--text-muted); font-size: var(--text-h4); }
.i2-plan__cost b { font-family: var(--font-heading); font-size: var(--text-display); color: var(--text-dark); font-weight: var(--font-semibold); }
.i2-plan__all { margin: 0; font-weight: var(--font-semibold); color: var(--text-dark); }
.i2-plan__list { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); font-size: var(--text-h4); color: var(--text-default); }
.i2-plan__list li::marker { color: var(--brand); }
/* Each card's action sits under its price, so the two line up side by side. */
.i2-plan__cta { margin-top: 0; }
.i2-plan__trial { margin: 0; font-size: var(--text-h4); color: var(--text-muted); }

/* ── The last word ──────────────────────────────────────────────────── */
/* The page's own close has to outrank the footer's newsletter block that
   follows it, so it takes a display step and real room. */
.i2-end { padding-block: var(--space-16); }
/* On the page's own container, so the close holds the left edge every section above it keeps. */
.i2-end .ws-cta-section__container { max-width: var(--container-xl); padding-inline: var(--space-4); }
.i2-end .ws-cta-section__title {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.i2-end .ws-cta-section__subtitle { font-size: var(--text-h3); }
@media (min-width: 1100px) {
  .i2-end .ws-cta-section__title { font-size: var(--text-display-lg); }
}

/* ── Small screens ──────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .i2-hero__head .ws-section-header__title { font-size: var(--text-display-lg); }
}
@media (max-width: 640px) {
  .i2-hero { padding-block: var(--space-6) var(--space-12); }
  .i2-hero__head .ws-section-header__title { font-size: var(--text-display); line-height: var(--leading-tight); }
  .i2-hero__head .ws-section-header__desc { margin-top: var(--space-4); font-size: var(--text-h3); }
  .i2-hero__actions { margin-top: var(--space-6); }
  .i2-hero__actions .ws-btn { width: 100%; justify-content: center; }
  .i2-doc { padding: var(--space-2) var(--space-3) var(--space-4) 0; }
  .i2-doc::before { inset: var(--space-6) 0 0 var(--space-3); }
  .i2-doc__sheet { padding: var(--space-5); }
  .i2-sent__time { font-size: var(--text-h2); }
  .i2-doc__title { font-size: var(--text-h2); }
  .i2-doc__line { font-size: var(--text-h3); }
  .i2-scrub { flex-direction: column; gap: var(--space-3); }
  .i2-scrub__stops { width: 100%; gap: var(--space-2); }
  .i2-rewind__inner { padding-left: var(--space-10); }
  .i2-step::after { left: calc(var(--space-2) - var(--space-10)); }
  .i2-earlier::before { left: var(--space-2); }
  .i2-step::before { left: calc(var(--space-2) + 1px - var(--space-10) - var(--space-2)); }
  .i2-earlier { margin-left: calc(var(--space-2) - var(--space-10) - var(--space-2)); }
  .i2-step__head .ws-section-header__title { font-size: var(--text-display); }
  .i2-step__head .ws-section-header__subtitle { font-size: var(--text-h2); }
  .i2-theme, .i2-console__item { font-size: var(--text-h2); }
  .i2-console__clock { font-size: var(--text-display); }
  .i2-card__say { font-size: var(--text-h3); }
  .i2-pitch { font-size: var(--text-h2); }
}


/* ── Real screens ───────────────────────────────────────────────────── */
/* One region of a real screen, stored at twice its pixels and framed like a
   card, so it reads as the product rather than as another drawing. */
.i2-shot { margin: 0; display: grid; gap: var(--space-3); min-width: 0; }
.i2-shot__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--bg-surface);
}
.i2-shot__cap { margin: 0; max-width: 36em; font-size: var(--text-body); line-height: var(--leading-snug); color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .i2-doc .i2-lit,
  .i2-doc .i2-lit--2,
  .i2-doc .i2-lit--3 { animation: none; }
}