/**
 * /index1.php: the homepage candidate built to .scratch/index1-homepage/copy-spec.md.
 *
 * The page is one thread: a red rule that runs through the hero's three panels,
 * where the same agenda item appears unchanged, and on down through the
 * workshop followed before, in and after the room. index-new.css loads first
 * for the account dialogs and the .tue-page ground (paper grid, type reset).
 */
.i1 { accent-color: var(--brand); caret-color: var(--brand-ink); }
.i1 p { color: var(--text-default); }

/* Section headings below the hero take a display step, so the scale does not
   fall from the hero's 57.6px straight to body-sized h2s. */
.i1-follow .ws-section-header__title,
.i1-library .ws-section-header__title,
.i1-plans .ws-section-header__title {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
@media (min-width: 1100px) {
  .i1-follow .ws-section-header__title,
  .i1-library .ws-section-header__title,
  .i1-plans .ws-section-header__title { font-size: var(--text-display-lg); }
}
.i1-follow .ws-section-header__desc,
.i1-library .ws-section-header__desc,
.i1-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) {
  .i1-follow .ws-section-header__desc,
  .i1-library .ws-section-header__desc,
  .i1-plans .ws-section-header__desc { margin-top: var(--space-5); }
}

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

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

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

/* ── The thread ─────────────────────────────────────────────────────── */
.i1-thread {
  position: relative;
  margin: 0;
  display: grid;
  gap: var(--space-5);
  padding-left: var(--space-10);
}
.i1-thread__rail {
  position: absolute;
  left: var(--space-4);
  top: var(--space-8);
  bottom: var(--space-8);
  width: 2px;
  background: var(--brand);
  border-radius: var(--radius-full);
  transform-origin: top;
  animation: i1-draw 900ms var(--ease-out) both;
}
.i1-panel { position: relative; }
/* Each hero panel hangs from the rail by a dot level with its middle. */
.i1-thread .i1-panel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--space-4) + 1px - var(--space-10) - var(--space-1) - var(--space-1) / 2);
  width: var(--space-3);
  height: var(--space-3);
  margin-top: calc(var(--space-3) / -2);
  border-radius: var(--radius-full);
  background: var(--bg-page);
  border: 2px solid var(--brand);
}
.i1-panel__label { margin: 0 0 var(--space-3); }

/* The same item, wherever it appears. The tint keeps brand ink at 4.58:1;
   the hairline gives the lighter fill its edge. */
.i1-same {
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 1px var(--brand-line);
  border-radius: var(--radius-lg);
  animation: i1-mark 500ms var(--ease-out) both;
}
.i1-panel--plan .i1-same { animation-delay: 700ms; }
.i1-panel--run .i1-same { animation-delay: calc(700ms + var(--stagger-reveal)); }
/* In the write-up the chips carry the mark themselves: a box round them would
   nest a third surface inside the card. */
.i1-same-chip { background: var(--brand-tint); border-color: var(--brand-line); }
.i1-panel--send .i1-same-chip { animation: i1-mark 500ms var(--ease-out) both; animation-delay: calc(700ms + var(--stagger-reveal) * 2); }
.i1-same .i1-agenda__name { color: var(--brand-ink); font-weight: var(--font-semibold); }

.i1-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.i1-agenda li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-h4);
  color: var(--text-dark);
}
.i1-agenda__time, .i1-agenda__mins { font-variant-numeric: tabular-nums; color: var(--text-muted); }

.i1-live { display: grid; gap: var(--space-2); }
.i1-live__now { margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-h4); }
.i1-live__timer { margin: 0; padding-inline: var(--space-3); }
.i1-live__clock {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark);
}
.i1-live__of { font-size: var(--text-h4); color: var(--text-muted); }
.i1-live__meta { margin: 0; padding-inline: var(--space-3); font-size: var(--text-ui); color: var(--text-muted); }

.i1-theme {
  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);
}
.i1-sources { margin: 0; padding: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.i1 .ws-source-chip,
.i1 .ws-source-chip__label { font-size: var(--text-body); }

@keyframes i1-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes i1-mark { from { background-color: transparent; } to { background-color: var(--brand-tint); } }

/* ── One workshop, followed through ─────────────────────────────────── */
.i1-follow { padding-block: var(--space-16); }
.i1-stops {
  position: relative;
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: 0 0 0 var(--space-10);
}
/* The hero's thread carries on down the page, quieter. */
.i1-stops::before {
  content: "";
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  bottom: var(--space-2);
  width: 2px;
  background: var(--brand-line);
}
.i1-stop { position: relative; display: grid; gap: var(--space-8); padding-block: var(--space-10); }
.i1-stop + .i1-stop { border-top: 1px solid var(--card-border); }
.i1-stop::before {
  content: "";
  position: absolute;
  top: calc(var(--space-10) + var(--space-1));
  left: calc(var(--space-4) + 1px - var(--space-10) - var(--space-2));
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--brand);
}
/* The screenshots take two thirds of the row: at less, their UI text is too
   small to read. */
@media (min-width: 1000px) {
  .i1-stop { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-10); align-items: start; }
}
.i1-stop__text > .ws-text { font-size: var(--text-h1); line-height: var(--leading-tight); }
.i1-stop__items { margin-top: var(--space-5); }
.i1-item__title { margin: 0 0 var(--space-1); font-size: var(--text-h3); }
.i1-stop__items p { margin: 0; max-width: 40em; font-size: var(--text-h4); line-height: var(--leading-normal); }

/* The stops' drawings: the hero's workshop, before, in and after the room. */
.i1-stop__visual { margin: 0; display: grid; gap: var(--space-4); }
.i1-pitch {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  color: var(--text-dark);
}
/* The filled blanks: ink for contrast on the card (brand ink there is 4.47:1),
   the brand's rule underneath to mark them. */
.i1-pitch b { font-weight: var(--font-semibold); color: var(--text-dark); border-bottom: 2px solid var(--brand); }
.i1-arc__score { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-3); }
.i1-arc__num { font-family: var(--font-heading); font-size: var(--text-display); line-height: 1; color: var(--text-dark); }
.i1-arc__word { font-weight: var(--font-semibold); color: var(--text-dark); }
.i1-arc__curve { display: block; width: 100%; height: var(--space-16); color: var(--brand); }
.i1-arc__fill { fill: var(--brand-tint); }
.i1-arc__line { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.i1-arc__items {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  font-size: var(--text-body);
  color: var(--text-muted);
}
.i1-arc__items .i1-same { padding: var(--space-1) var(--space-2); color: var(--brand-ink); font-weight: var(--font-semibold); }
/* Four labels don't fit a phone's width in one row. */
@media (max-width: 480px) {
  .i1-arc__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.i1-record { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.i1-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); }
.i1-record__time { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.i1-record__what b { font-weight: var(--font-semibold); color: var(--text-dark); margin-right: var(--space-1); }
.i1-record__tag { margin: var(--space-4) 0 0; }
.i1-onepager__k { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-body); font-weight: var(--font-semibold); color: var(--text-muted); }
.i1-onepager__k:first-of-type { margin-top: 0; }
.i1-onepager__line { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-h3); color: var(--text-dark); }
.i1-stop__visual .i1-sources { padding: 0; }

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

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

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

/* ── Small screens ──────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .i1-hero__head .ws-section-header__title { font-size: var(--text-display-lg); }
}
@media (max-width: 640px) {
  .i1-hero { padding-block: var(--space-6) var(--space-12); }
  .i1-hero__head .ws-section-header__title { font-size: var(--text-display); line-height: var(--leading-tight); }
  .i1-hero__head .ws-section-header__desc { margin-top: var(--space-4); font-size: var(--text-h3); }
  .i1-hero__actions { margin-top: var(--space-6); }
  .i1-hero__actions .ws-btn { width: 100%; justify-content: center; }
  .i1-thread { padding-left: var(--space-8); }
  .i1-thread__rail { left: var(--space-3); }
  .i1-thread .i1-panel::before { left: calc(var(--space-3) + 1px - var(--space-8) - var(--space-1) - var(--space-1) / 2); }
  .i1-stops { padding-left: var(--space-8); }
  .i1-stops::before { left: var(--space-3); }
  .i1-stop::before { left: calc(var(--space-3) + 1px - var(--space-8) - var(--space-2)); }
}


/* ── 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. */
.i1-shot { margin: 0; display: grid; gap: var(--space-3); min-width: 0; }
.i1-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);
}
.i1-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) {
  .i1-thread__rail, .i1-same, .i1-same-chip, .i1-panel--send .i1-same-chip { animation: none; }
}