/* ============================================================
   BIRD — programme pages (TBA · TBC · TBT · TBS)
   ------------------------------------------------------------
   Loaded by index.html (for the programmes band) and by the four
   programme landing pages. Kept out of styles.css deliberately:
   styles.css is linked with ?v=11 from ~140 pages, so extending it
   means bumping the query string in every one of them. A separate
   sheet is additive and touches only the pages that need it.

   Everything below reuses the tokens from styles.css :root — no new
   colours are introduced.
   ============================================================ */

/* ============ home page: the four programmes ============ */
.progs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.prog{position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:32px 30px 28px;box-shadow:var(--shadow-sm);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.prog:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:var(--shadow)}
.prog .pnum{position:absolute;top:22px;right:26px;font-family:var(--serif);
  font-size:44px;line-height:1;color:var(--line-2);opacity:.85;pointer-events:none}
.prog .code{display:inline-flex;align-items:center;align-self:flex-start;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);
  background:rgba(200,32,46,.08);border:1px solid rgba(200,32,46,.22);
  border-radius:999px;padding:6px 13px}
.prog h3{font-family:var(--serif);font-size:24px;line-height:1.25;
  color:var(--navy);margin:16px 0 0;max-width:22ch}
.prog .fmt{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin:10px 0 0}
.prog p{margin:14px 0 0;color:#4a4a52;font-size:16px;line-height:1.5}
.prog .go{margin-top:auto;padding-top:22px;font-family:var(--sans);font-weight:600;
  font-size:15px;color:var(--red);display:inline-flex;align-items:center;gap:8px}
.prog .go .arw{transition:transform .16s ease}
.prog:hover .go .arw{transform:translateX(4px)}
/* The whole card is the link target. */
.prog .stretch::after{content:"";position:absolute;inset:0;border-radius:18px}

/* ============ generic card grid ============ */
.pgrid{display:grid;gap:16px}
.pgrid.c2{grid-template-columns:repeat(2,1fr)}
.pgrid.c3{grid-template-columns:repeat(3,1fr)}
.pgrid.c4{grid-template-columns:repeat(4,1fr)}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:24px 22px;box-shadow:var(--shadow-sm);
  transition:transform .16s ease,border-color .16s ease}
.pcard:hover{transform:translateY(-3px);border-color:var(--red)}
.pcard .k{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--red)}
.pcard h3{font-family:var(--serif);font-size:19px;color:var(--navy);margin:8px 0 0;line-height:1.3}
.pcard p{margin:9px 0 0;font-size:15.5px;color:var(--muted);line-height:1.5}
.pcard ul{margin:10px 0 0;padding:0;list-style:none}
.pcard li{font-size:15px;color:var(--muted);line-height:1.5;padding-left:16px;position:relative}
.pcard li::before{content:"·";position:absolute;left:4px;color:var(--red);font-weight:700}
/* on navy bands */
.band.navy .pcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.band.navy .pcard:hover{border-color:#ff8a93}
.band.navy .pcard .k{color:#ff9aa2}
.band.navy .pcard h3{color:#fff}
.band.navy .pcard p,.band.navy .pcard li{color:#c2cbe8}
.band.navy .pcard li::before{color:#ff8a93}

/* ============ numbered modules / blueprints ============ */
.modules{display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.module{background:var(--white);padding:26px 26px 24px;display:flex;gap:18px;align-items:flex-start}
.module .no{font-family:var(--serif);font-size:26px;line-height:1;color:var(--red);
  opacity:.9;flex:none;min-width:1.6em}
.module h3{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy);margin:2px 0 0;line-height:1.45}
.module ul{margin:11px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.module li{font-size:15px;color:var(--muted);line-height:1.45;padding-left:17px;position:relative}
.module li::before{content:"—";position:absolute;left:0;color:var(--line-2)}
.module p{margin:11px 0 0;font-size:15px;color:var(--muted);line-height:1.5}

/* ============ fact rows (schedule, format, details) ============ */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.facts.c4{grid-template-columns:repeat(4,1fr)}
.fact{background:var(--white);padding:24px 24px}
.fact .k{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--red);margin-bottom:9px}
.fact b{display:block;font-family:var(--serif);font-size:21px;color:var(--navy);
  font-weight:600;line-height:1.3}
.fact span{display:block;margin-top:5px;font-size:15px;color:var(--muted);line-height:1.45}

/* ============ ticked list ============ */
.checks{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(2,1fr);gap:13px 28px}
.checks li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.45;color:#3c3c44}
.checks li::before{content:"✓";position:absolute;left:0;top:-1px;
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(200,32,46,.1);color:var(--red);font-size:12px;font-weight:700}
.band.navy .checks li{color:#dbe2f6}
.band.navy .checks li::before{background:rgba(255,138,147,.16);color:#ff9aa2}

/* ============ from → to arrow lines ============ */
.arrows{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0;
  border-top:1px solid rgba(255,255,255,.14)}
.arrows li{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;
  padding:20px 4px;border-bottom:1px solid rgba(255,255,255,.14);
  font-family:var(--serif);font-size:clamp(19px,2.5vw,26px);line-height:1.3}
.arrows .was{color:#8f9cc6}
.arrows .to{color:#fff;font-weight:600}
.arrows .ar{color:var(--red);font-style:normal;font-weight:700}

/* ============ the TBC → TBT → TBS chain ============ */
.chain{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:var(--white);box-shadow:var(--shadow-sm)}
.chain .step{padding:30px 26px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.chain .step.on{background:var(--paper-2)}
.chain .step .c{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red)}
.chain .step b{display:block;font-family:var(--serif);font-size:20px;color:var(--navy);
  font-weight:600;margin:9px 0 0;line-height:1.3}
.chain .step span{display:block;margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.45}
.chain .lnk{display:flex;align-items:center;justify-content:center;padding:0 16px;
  background:var(--navy);color:#fff;font-size:20px;font-weight:700}

/* ============ investment / price panel ============ */
.pricebox{display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:rgba(255,255,255,.14);border-radius:18px;overflow:hidden;max-width:720px}
.pricebox.one{grid-template-columns:1fr;max-width:420px}
.pricebox .pr{background:var(--navy-deep);padding:32px 30px;text-align:center}
.pricebox .pr .k{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:#ff9aa2}
.pricebox .pr .amt{display:block;font-family:var(--serif);font-size:clamp(34px,5vw,46px);
  color:#fff;line-height:1.1;margin:12px 0 0}
.pricebox .pr .gst{display:block;margin-top:7px;font-size:14px;color:#a9b4d8;letter-spacing:.04em}
.price-note{margin:18px 0 0;font-size:14.5px;color:#a9b4d8;max-width:60ch}

/* ── subscription plans ───────────────────────────────────────────────────
   Each plan reuses the .pricebox/.pr cells above; only the wrapper and the
   plan heading are new. Stacked rather than side by side: a plan already
   carries a two-column price pair, and nesting two columns inside two columns
   gives four cramped cells on a laptop. */
.plans{display:grid;gap:26px}
.plan-head{margin:0 0 12px}
.plan-k{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#ff9aa2}
.plan-head h3{font-family:var(--serif);color:#fff;font-size:clamp(20px,2.7vw,26px);
  margin:.25em 0 0;line-height:1.2}
.plan-boss .plan-k{color:#ffc9ce}
.plan-bonus{margin:22px 0 0;padding:15px 18px;border:1px solid rgba(255,255,255,.16);
  border-left:3px solid var(--red);border-radius:10px;background:rgba(255,255,255,.05);
  color:#dbe2f6;font-size:15px;line-height:1.55;max-width:66ch}
.plan-bonus b{color:#fff}

/* ============ testimonial quotes ============ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:28px 26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.quote p{margin:0;font-size:16px;line-height:1.6;color:#3c3c44}
.quote p::before{content:"“";font-family:var(--serif);font-size:44px;color:var(--red);
  opacity:.3;display:block;line-height:.6;margin-bottom:10px}
.quote .who{margin-top:auto;padding-top:18px;font-family:var(--serif);font-style:italic;
  font-size:15.5px;color:var(--navy)}

/* ============ pill row (names, tracks) ============ */
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pills span{font-size:14px;color:var(--muted);background:var(--white);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px}
.band.navy .pills span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#c2cbe8}

/* ============ page-level helpers ============ */
.prose-lede{font-family:var(--serif);font-size:clamp(21px,2.8vw,29px);line-height:1.35;
  color:var(--navy);max-width:26ch}
.band.navy .prose-lede{color:#fff}
.stack-lg{margin-top:44px}
.stack-md{margin-top:28px}

/* ============ responsive ============ */
@media(max-width:1000px){
  .pgrid.c4{grid-template-columns:repeat(2,1fr)}
  .pgrid.c3{grid-template-columns:repeat(2,1fr)}
  .facts.c4{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr}
  .chain{grid-template-columns:1fr}
  .chain .lnk{padding:12px 0;transform:rotate(90deg)}
}
@media(max-width:760px){
  .progs{grid-template-columns:1fr}
  .prog .pnum{font-size:36px;top:18px;right:20px}
  .pgrid.c2,.pgrid.c3,.pgrid.c4{grid-template-columns:1fr}
  .modules{grid-template-columns:1fr}
  .facts,.facts.c4{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .pricebox{grid-template-columns:1fr}
  .prose-lede{max-width:none}
}