/**
 * /index3.php: "The Live Minute", a homepage candidate built to
 * .scratch/index1-homepage/copy-spec.md and .scratch/homepage-layouts/index3/vibe-spec.md.
 *
 * A broadcast control room crossed with a kitchen timer: the hero's console has
 * the dark bar, the on-air dot and the reactions meter of the one, and the huge
 * friendly countdown of the other. The bands below are a rundown around that
 * minute. index-new.css loads first for the account dialogs and the .tue-page
 * ground (paper grid, type reset).
 */
.i3 { accent-color: var(--brand); caret-color: var(--brand-ink); }
.i3 p { color: var(--text-default); }

/* Checkout feedback: the pressed CTA says it is working, and an error lands
   beside it. */
.i3 .ws-btn.is-busy { cursor: progress; opacity: 0.75; pointer-events: none; }
.i3 p.i3-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);
}
.i3 p.i3-cta-error[hidden] { display: none; }
.i3-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. */
.i3 .ws-btn--primary { border: 2px solid transparent; }

.i3-icon { flex: none; width: 1.25em; height: 1.25em; }

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

.i3-hero__head { margin: 0; max-width: none; }
.i3-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. */
.i3-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;
}
.i3-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);
}
.i3-hero__actions { margin-top: var(--space-8); }
.i3-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) {
  .i3-hero__primary { order: 1; }
  .i3-hero__secondary { order: 2; }
  .i3-hero__trial { order: 3; }
}

/* ── The console ────────────────────────────────────────────────────── */
/* The live screen as Facilitate draws it: an ink bar over a white surface. It
   sizes its own two columns from its own width, so it reads the same beside
   the copy at 1440 and full width at 768. */
.i3-console {
  container-type: inline-size;
  margin: 0;
  background: var(--bg-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
/* Where the window leaves room in the gutter, the console reaches past its
   column into it: the minute is the largest thing on the first screen. */
@media (min-width: 1360px) {
  .i3-hero .i3-console { margin-right: calc(var(--space-16) * -1); }
}
.i3-console__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-ink);
  color: var(--text-inverse);
  font-size: var(--text-body);
}
.i3-onair { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--font-semibold); }
.i3-onair__dot { width: var(--space-3); height: var(--space-3); border-radius: var(--radius-full); background: var(--brand); }
.i3-console__title { font-weight: var(--font-medium); }
.i3-console__meta { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; }

.i3-console__body { display: grid; }
.i3-console__main { padding: var(--space-6); }
.i3-console__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-top: 1px solid var(--card-border);
}
@container (min-width: 640px) {
  .i3-console__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .i3-console__side { border-top: 0; border-left: 1px solid var(--card-border); }
}

.i3 .i3-console__now {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  color: var(--text-dark);
}
.i3-console__pos { font-weight: var(--font-normal); color: var(--text-muted); }
.i3 .i3-console__item {
  margin-top: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text-dark);
}

/* The kitchen timer: one number the back row can read. Tabular figures and a
   fixed width, so nothing beside it moves as it ticks. */
.i3-clock { display: grid; justify-items: start; gap: var(--space-2); margin-top: var(--space-4); }
.i3-clock__num {
  display: block;
  min-width: 4.4ch;
  font-family: var(--font-heading);
  font-size: calc(var(--text-timer-md) * 1.25);
  font-weight: var(--font-semibold);
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-dark);
}
@container (min-width: 400px) {
  .i3-clock__num { font-size: calc(var(--text-timer-lg) * 1.5); }
}
.i3-clock__of { font-size: var(--text-h4); color: var(--text-muted); }
.i3-clock__track {
  display: block;
  width: 100%;
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--brand-soft);
  overflow: hidden;
}
.i3-clock__fill {
  display: block;
  height: 100%;
  background: var(--brand);
  transform-origin: left;
  transform: scaleX(var(--left, 0.5067));
}

.i3 .i3-script {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--brand-line);
  font-size: var(--text-h4);
  line-height: var(--leading-normal);
  color: var(--text-default);
}
.i3-script__k {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-right: var(--space-1);
  font-weight: var(--font-semibold);
  color: var(--text-dark);
  vertical-align: bottom;
}

/* The control room: a meter of the room's reactions on this item. */
.i3 .i3-console__label { font-size: var(--text-body); font-weight: var(--font-semibold); color: var(--text-dark); }
.i3-meter { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.i3-meter__row {
  display: grid;
  grid-template-columns: auto minmax(0, 5.5em) minmax(0, 1fr) 2ch;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body);
  color: var(--text-default);
}
.i3-meter__glyph { color: var(--text-muted); }
.i3-meter__bar { display: block; height: var(--space-2); border-radius: var(--radius-full); background: var(--card-bg); overflow: hidden; }
/* Four reactions fill a bar: the scale is the drawing's, not a share of the
   room. The count rides on the row, where the script updates it. */
.i3-meter__row[data-i3-count="1"] { --n: 1; }
.i3-meter__row[data-i3-count="2"] { --n: 2; }
.i3-meter__row[data-i3-count="3"] { --n: 3; }
.i3-meter__row[data-i3-count="4"] { --n: 4; }
.i3-meter__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--brand);
  transform-origin: left;
  transform: scaleX(calc(var(--n, 0) / 4));
}
.i3-meter__n { text-align: right; font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; color: var(--text-dark); }

/* The intervention card. On the brand's tint, brand ink holds 4.58:1. */
.i3-alert {
  margin-top: auto;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 1px var(--brand-line);
}
.i3 .i3-alert__k {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  color: var(--brand-ink);
}
.i3 .i3-alert__t {
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--text-dark);
}
.i3 .i3-alert__d { margin-top: var(--space-1); font-size: var(--text-h4); color: var(--text-default); }

/* Live: only once the script has taken over. Until then the HTML's finished
   state stands, which is what reduced motion, captures and no script show.
   is-waiting holds the card back until its moment. */
.i3-console.is-live .i3-clock__fill { transition: transform 1s linear; }
.i3-console.is-live .i3-meter__fill { transition: transform var(--duration-reveal) var(--ease-reveal); }
.i3-console.is-live .i3-alert {
  transition: opacity var(--duration-reveal) var(--ease-reveal), transform var(--duration-reveal) var(--ease-reveal);
}
.i3-console.is-waiting .i3-alert {
  opacity: 0;
  transform: translateY(var(--space-6));
  visibility: hidden;
}

/* ── The rundown: before, during and after the minute ───────────────── */
.i3-band { padding-block: var(--space-16); }
.i3-band__grid { display: grid; gap: var(--space-10); }
@media (min-width: 1000px) {
  .i3-band__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; }
  /* The captions stay beside the drawing while it scrolls past, clear of the
     sticky site header. */
  .i3-band__text { position: sticky; top: calc(var(--space-16) + var(--space-8)); }
}
.i3-band__head { margin: 0; }
.i3-band__head .ws-section-header__title {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-dark);
}
@media (min-width: 1100px) {
  .i3-band__head .ws-section-header__title { font-size: var(--text-display-lg); }
}
/* When the band happens, under its name: the rundown's timecode. */
.i3 .i3-band__when {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-h4);
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.i3-band__items { margin-top: var(--space-8); }
.i3 .i3-item__title { margin: 0 0 var(--space-2); font-size: var(--text-h2); line-height: var(--leading-snug); }
.i3-band__items p { margin: 0; max-width: 34em; font-size: var(--text-h4); line-height: var(--leading-normal); }

/* The minute itself, on the ink the console's bar uses: on air. */
.i3-band--live { background: var(--color-ink); }
.i3-band--live .ws-section-header__title,
.i3 .i3-band--live .i3-band__text p,
.i3-band--live .i3-band__text .i3-item__title { color: var(--text-inverse); }
.i3 .i3-band--live .i3-band__when { color: var(--text-inverse); }
.i3-band--live .i3-shot__cap { color: var(--text-inverse); }

.i3-band__visual { margin: 0; display: grid; gap: var(--space-4); }
@media (min-width: 640px) {
  .i3-band__visual--pair { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
}
.i3 .i3-panel__label { margin: 0 0 var(--space-3); font-size: var(--text-body); font-weight: var(--font-semibold); color: var(--text-muted); }

/* The pitch: the filled blanks in ink for contrast on the card, the brand's
   rule underneath to mark them. */
.i3 .i3-pitch {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  color: var(--text-dark);
}
.i3-pitch b { font-weight: var(--font-semibold); color: var(--text-dark); border-bottom: 2px solid var(--brand); }

/* The agenda, at a size that reads, with the hero's item marked: on the
   brand's tint, brand ink holds 4.58:1. */
.i3-agenda .ws-agenda__time,
.i3-agenda .ws-agenda__duration,
.i3-agenda .ws-agenda__type { font-size: var(--text-body); }
.i3-agenda .ws-agenda__item { padding-inline: var(--space-3); padding-block: var(--space-2); font-size: var(--text-h4); }
.i3-agenda .ws-agenda__item:nth-child(3) {
  border-radius: var(--radius-lg);
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 1px var(--brand-line);
}
.i3-agenda .ws-agenda__item:nth-child(3) .ws-agenda__title { color: var(--brand-ink); }
.i3-agenda .ws-agenda__item:nth-child(3),
.i3-agenda .ws-agenda__item:nth-child(4) { border-top-color: transparent; }

.i3-arc { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--card-border); }
.i3 .i3-arc__score { display: flex; align-items: baseline; gap: var(--space-2); color: var(--text-dark); }
.i3-arc__num { font-family: var(--font-heading); font-size: var(--text-display); font-weight: var(--font-semibold); line-height: 1; }
.i3-arc__word { font-weight: var(--font-semibold); }
.i3-arc__what { color: var(--text-muted); }
.i3-arc__curve { display: block; width: 100%; height: var(--space-12); margin-top: var(--space-3); color: var(--brand); }
.i3-arc__fill { fill: var(--brand-tint); }
.i3-arc__line { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }

/* A participant's phone: the narrow column of the pair. */
.i3-phone { border-radius: var(--radius-2xl); }
.i3 .i3-phone__now { font-size: var(--text-body); font-weight: var(--font-semibold); color: var(--text-muted); }
.i3 .i3-phone__item { margin-top: var(--space-1); font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--font-semibold); color: var(--text-dark); }
.i3-phone__pad {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.i3-phone__pad li {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 1px var(--card-border);
  font-size: var(--text-body);
  font-weight: var(--font-medium);
  color: var(--text-dark);
}
.i3-phone__pad .i3-icon { width: var(--space-6); height: var(--space-6); color: var(--text-default); }
.i3 .i3-phone__poll {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-body);
  font-weight: var(--font-medium);
  color: var(--text-dark);
}

/* The deck the card came from; the one opened in the hero is marked by its
   rule, not a fill, so its text keeps the card's contrast. */
.i3-deck { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.i3-deck__card--open { box-shadow: inset var(--space-1) 0 0 var(--brand), var(--shadow-sm); }
.i3 .i3-deck__name { font-size: var(--text-h3); }
.i3 .i3-deck__when { margin-top: var(--space-1); font-size: var(--text-body); color: var(--text-muted); }
.i3 .i3-deck__say { margin-top: var(--space-2); font-size: var(--text-h4); color: var(--text-default); }

/* The record and the one-pager. */
.i3-record { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.i3-record li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: baseline; font-size: var(--text-h4); color: var(--text-default); }
.i3-record__time { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.i3-record__what b { font-weight: var(--font-semibold); color: var(--text-dark); margin-right: var(--space-1); }
.i3 .i3-record__tag { margin-top: var(--space-4); }
.i3 .i3-onepager__k { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-body); font-weight: var(--font-semibold); color: var(--text-muted); }
.i3 .i3-panel__label + .i3-onepager__k { margin-top: 0; }
.i3 .i3-onepager__line { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-h3); color: var(--text-dark); }
.i3-sources { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* The chips carry the mark themselves: a tinted box round them would nest a
   third surface inside the card. */
.i3-same-chip { background: var(--brand-tint); border-color: var(--brand-line); }
.i3 .ws-source-chip,
.i3 .ws-source-chip__label { font-size: var(--text-body); }

/* Section headings below the bands take a display step too, so the scale
   does not fall from the bands' headings straight to body-sized h2s. */
.i3-library .ws-section-header__title,
.i3-plans .ws-section-header__title {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
@media (min-width: 1100px) {
  .i3-library .ws-section-header__title,
  .i3-plans .ws-section-header__title { font-size: var(--text-display-lg); }
}
/* index-new.css zeroes paragraph margins, so the description sets its own. */
.i3 .i3-library .ws-section-header__desc,
.i3 .i3-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) {
  .i3 .i3-library .ws-section-header__desc,
  .i3 .i3-plans .ws-section-header__desc { margin-top: var(--space-5); }
}

/* ── Library ────────────────────────────────────────────────────────── */
.i3-library { padding-block: var(--space-16); background: var(--bg-warm-muted); }
/* Stacked: the heading and its button, then the three entries in one row. */
.i3-library__grid { display: grid; gap: var(--space-10); }
.i3-library__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); max-width: 46em; }
.i3-library__text .ws-section-header { margin: 0; }
.i3-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. */
.i3-libcard__meta .ws-badge { font-size: var(--text-body); padding: var(--space-1) var(--space-2); color: var(--text-default); }

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

/* ── Plans ──────────────────────────────────────────────────────────── */
.i3-plans { padding-block: var(--space-16); }
.i3-plans__grid { display: grid; gap: var(--space-6); margin-top: var(--space-10); align-items: start; }
@media (min-width: 900px) {
  .i3-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.i3-plan { height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.i3-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. */
.i3-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); }
.i3-billing { display: flex; gap: var(--space-1); }
.i3-billing__btn { font-size: var(--text-body); }
.i3-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). */
.i3-plan .ws-btn--secondary { background-color: var(--bg-surface); }
.i3-plan__cost { margin: 0; color: var(--text-muted); font-size: var(--text-h4); }
.i3-plan__cost b { font-family: var(--font-heading); font-size: var(--text-display); color: var(--text-dark); font-weight: var(--font-semibold); }
.i3-plan__all { margin: 0; font-weight: var(--font-semibold); color: var(--text-dark); }
.i3-plan__list { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); font-size: var(--text-h4); color: var(--text-default); }
.i3-plan__list li::marker { color: var(--brand); }
/* Each card's action sits under its price, so the two line up side by side. */
.i3-plan__cta { margin-top: 0; }
.i3-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 the hero's display scale and real room. */
.i3-end { padding-block: var(--space-16); }
/* On the page's own container, so the close holds the left edge every section above it keeps. */
.i3-end .ws-cta-section__container { max-width: var(--container-xl); padding-inline: var(--space-4); }
.i3-end .ws-cta-section__title {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.i3-end .ws-cta-section__subtitle { font-size: var(--text-h3); }
@media (min-width: 1100px) {
  .i3-end .ws-cta-section__title { font-size: var(--text-display-lg); }
}

/* ── Small screens ──────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .i3-hero__head .ws-section-header__title { font-size: var(--text-display-lg); }
}
@media (max-width: 640px) {
  .i3-hero { padding-block: var(--space-6) var(--space-12); }
  .i3-hero__head .ws-section-header__title { font-size: var(--text-display); line-height: var(--leading-tight); }
  .i3-hero__head .ws-section-header__desc { margin-top: var(--space-4); font-size: var(--text-h3); }
  .i3-hero__actions { margin-top: var(--space-6); }
  .i3-hero__actions .ws-btn { width: 100%; justify-content: center; }
  .i3-console__bar { padding-inline: var(--space-4); }
  .i3-console__main, .i3-console__side { padding: var(--space-5) var(--space-4); }
}

/* Reduced motion: the finished minute, still. The selectors repeat the live
   ones so they outweigh them. */

/* ── 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. */
.i3-shot { margin: 0; display: grid; gap: var(--space-3); min-width: 0; }
.i3-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);
}
.i3-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) {
  .i3-console.is-live .i3-clock__fill,
  .i3-console.is-live .i3-meter__fill,
  .i3-console.is-live .i3-alert { transition: none; }
  .i3-console.is-waiting .i3-alert { opacity: 1; transform: none; visibility: visible; }
}