/* ═══════════════════════════════════════════════════════════════════════
   THE DEAL, AS IT HAPPENS
   The homepage is one deal from the call to the renewal, on a clock. Each
   beat is a moment with a time, a claim and one small thing happening.
   The clock is the argument: everything before Thursday used to take until
   Thursday.
   ═══════════════════════════════════════════════════════════════════════ */
/* Centred and narrow: this is an editorial column, not a full-bleed grid.
   At full wrap width the right third was empty. */
.tl { position: relative; width: min(760px, 100%); margin: 0 auto; }
.tl-rail { position: absolute; left: 92px; top: 4px; bottom: 30px; width: 2px; border-radius: 2px; background: var(--line-2); opacity: .55; }
.tl-rail::after { content: ""; position: absolute; inset: 0 0 auto; height: var(--rail, 0%); background: linear-gradient(var(--violet), var(--violet-light)); transition: height .25s linear; }

.beat { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 34px; padding: 0 0 54px 0; }
.beat:last-child { padding-bottom: 0; }
.beat-when { text-align: right; padding-top: 2px; }
.beat-when b { display: block; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.beat-when span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
.beat-dot { position: absolute; left: 88px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); border: 2px solid var(--bg); z-index: 1; }
.beat.lit .beat-dot { background: var(--violet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 14%, transparent); }

.beat-body h2, .beat-body h3 { font-family: var(--display); font-weight: 500; font-size: clamp(23px, 2.5vw, 29px); line-height: 1.22; letter-spacing: -.01em; margin: 0 0 8px; color: var(--ink); max-width: 24ch; }
.beat-body p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.62; max-width: 58ch; }
.beat-body .who { font-size: 13px; color: var(--faint); margin-top: 10px; }

/* the small thing that happens in each beat */
.beat-vis { margin-top: 15px; max-width: 100%; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tchip { font-size: 12px; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
.tchip.on { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 34%, transparent); background: var(--violet-soft); }

.mini { background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; font-size: 13px; }
.mini + .mini { margin-top: 8px; }
.mini .k { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.mini .rowline { display: flex; justify-content: space-between; padding: 5px 0; color: var(--muted); }
.mini .rowline + .rowline { border-top: 1px solid var(--line); }
.mini .rowline b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mini .big { font-family: var(--display); font-size: 21px; color: var(--ink); }
.mini q { color: var(--text); font-style: normal; }
.mini .from { color: var(--violet); font-weight: 600; }

.bar { height: 5px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--violet); width: var(--w, 0%); border-radius: 3px; }
.barrow { display: grid; grid-template-columns: 78px 1fr 46px; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); padding: 4px 0; }
.barrow em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--faint); }

@media (max-width: 760px) {
  .tl-rail, .beat-dot { display: none; }
  .beat { grid-template-columns: 1fr; gap: 10px; padding-bottom: 46px; }
  .beat-when { text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .beat-when span { margin-top: 0; }
}
.tl-head { width: min(760px, 100%); margin: 0 auto 34px; padding-left: 114px; }
.tl-head h2.display { max-width: 20ch; }
.tl-head .section-lead { max-width: 54ch; margin-bottom: 0; }
@media (max-width: 760px) { .tl-head { padding-left: 0; } }

/* Motion: the clock advances as you read. The rail fills to wherever you have
   got to, and each dot lights as its moment arrives. Decorative, so it is all
   off under prefers-reduced-motion and the page is identical without JS. */
.beat-body, .beat-when { opacity: 1; }
.js .beat-body, .js .beat-when { opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.9,.3,1); }
.js .beat.lit .beat-body, .js .beat.lit .beat-when { opacity: 1; transform: none; }
.js .beat.lit .beat-body { transition-delay: .06s; }
.beat-dot { transition: background .35s ease, box-shadow .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .js .beat-body, .js .beat-when { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tl-rail::after { transition: none !important; }
}

/* Attachments on the first beat: what actually came out of the call. */
.mini .attach { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.mini .att { font-size: 11.5px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; white-space: nowrap; }

/* ═══ v2 (2026-09-25, "same timeline, just better") ═══════════════════════
   Wider stage: big display times in the gutter, numbered stops on a glowing
   rail, and each beat's visual in its own little app window beside the copy.
   The visuals come alive as the beat lights: bars grow, rows deal in. */
.tl-v2 { width: min(1080px, 100%); }
.tl-v2 .tl-rail { left: 150px; width: 3px; opacity: 1; background: color-mix(in srgb, var(--violet) 12%, var(--line)); }
.tl-v2 .tl-rail::after { box-shadow: 0 0 14px color-mix(in srgb, var(--violet) 45%, transparent); }
.tl-v2 .beat { grid-template-columns: 124px 1fr; gap: 56px; padding-bottom: 64px; }
.tl-v2 .beat-when { padding-top: 6px; }
.tl-v2 .beat-when b { font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -.02em; }
.tl-v2 .beat-when span { margin-top: 8px; }
.tl-v2 .beat-dot { left: 138px; top: 6px; width: 27px; height: 27px; border-radius: 50%; border: 3px solid var(--bg); background: var(--paper);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--faint); box-shadow: 0 0 0 1px var(--line-2); transition: background .35s, color .35s, box-shadow .35s, transform .45s cubic-bezier(.34,1.56,.64,1); }
.tl-v2 .beat.lit .beat-dot { background: var(--violet); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--violet) 16%, transparent); transform: scale(1.08); }
.tl-v2 .beat-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }
.tl-v2 .beat-text h3 { font-size: clamp(24px, 2.4vw, 30px); max-width: 18ch; }
.tl-v2 .beat-text p { font-size: 16.5px; }
.tl-v2 .beat-vis { margin-top: 0; }
.tl-v2 .mini { padding: 0 16px 14px; border-radius: 14px; font-size: 13.5px; box-shadow: 0 1px 2px rgba(22,21,31,.05), 0 22px 44px -26px rgba(22,21,31,.35);
  transition: transform .5s cubic-bezier(.2,.9,.3,1); }
.tl-v2 .beat:hover .mini { transform: translateY(-3px); }
.tl-v2 .mini-bar { display: flex; align-items: center; gap: 5px; margin: 0 -16px 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--bg); border-radius: 14px 14px 0 0; }
.tl-v2 .mini-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.tl-v2 .mini-bar span { margin-left: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.tl-v2 .mini-brass { background: color-mix(in srgb, var(--brass) 10%, var(--paper)); }
.tl-v2 .mini-brass b { color: #5e4419; }
.tl-v2 .mini-brass > span { color: #7a5a25; }
.tl-v2 .barrow { grid-template-columns: 70px 1fr 52px; font-size: 13px; padding: 6px 0; }
.tl-v2 .bar { height: 7px; }
.tl-v2 .barrow.hot span:first-child, .tl-v2 .barrow.hot em { color: var(--violet); font-weight: 600; }
.tl-v2 .qa-q { margin-bottom: 8px; padding: 9px 11px; border-radius: 10px 10px 10px 3px; background: var(--bg-2); }
.tl-v2 .qa-a { padding: 9px 11px; border-radius: 10px 10px 3px 10px; background: var(--violet-soft); color: var(--ink); }
.tl-v2 .sigline { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1.5px solid var(--ink); padding-bottom: 4px; margin-bottom: 10px; }
.tl-v2 .sig { font-family: var(--display); font-style: italic; font-size: 26px; color: var(--ink); line-height: 1; }
.tl-v2 .stamp-ok { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); border: 2px solid var(--green); border-radius: 6px; padding: 2px 8px; transform: rotate(-5deg); }
.tl-v2 .cert { font-size: 11px; color: var(--muted); }

/* come alive when lit */
.js .tl-v2 .beat .bar i { width: 0; transition: width .9s cubic-bezier(.2,.8,.2,1) .25s; }
.js .tl-v2 .beat.lit .bar i { width: var(--w); }
.js .tl-v2 .beat .rowline, .js .tl-v2 .beat .att { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.js .tl-v2 .beat.lit .rowline, .js .tl-v2 .beat.lit .att { opacity: 1; transform: none; }
.js .tl-v2 .beat.lit .rowline:nth-child(3), .js .tl-v2 .beat.lit .att:nth-child(2) { transition-delay: .12s; }
.js .tl-v2 .beat.lit .rowline:nth-child(4), .js .tl-v2 .beat.lit .att:nth-child(3) { transition-delay: .24s; }
.js .tl-v2 .beat.lit .rowline:nth-child(5) { transition-delay: .36s; }
.js .tl-v2 .beat.lit .rowline:nth-child(6) { transition-delay: .5s; }
.js .tl-v2 .beat .stamp-ok { opacity: 0; transform: rotate(-5deg) scale(1.8); transition: opacity .2s ease .5s, transform .5s cubic-bezier(.34,1.56,.64,1) .5s; }
.js .tl-v2 .beat.lit .stamp-ok { opacity: 1; transform: rotate(-5deg) scale(1); }
.tl-head { width: min(1080px, 100%); padding-left: 180px; }
@media (max-width: 980px) {
  .tl-v2 .beat-body { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 760px) {
  .tl-head { padding-left: 0; }
  .tl-v2 .beat { grid-template-columns: 1fr; gap: 12px; padding-bottom: 44px; }
  .tl-v2 .beat-when b { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .tl-v2 .beat .bar i { width: var(--w) !important; transition: none !important; }
  .js .tl-v2 .beat .rowline, .js .tl-v2 .beat .att, .js .tl-v2 .beat .stamp-ok { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 760px) { .tl-v2 .beat-dot, .tl-v2 .tl-rail { display: none; } }