/* Home page only. site.css loads first and owns everything shared - colour,
   shape, elevation, type, motion tokens, the rail, the top bar, the congress
   strip, the buttons. This file is what only this page has: the two heroes,
   the hero, the proof strips and the section rhythm.

   It used to be a whole standalone stylesheet inside landing/index.html, and
   its :root redefined 34 tokens site.css already defines. Loading second, it
   won the cascade for every one of them - which is the mechanism behind every
   "the home page looks different" report: two sources of truth, the wrong one
   winning. Only the nine tokens below are this page's own, and four of those
   are aliases so a change in site.css still reaches here.

   The @font-face block went too. site.css declares the same five faces with a
   content hash on each URL; these had none, so a cached subset would have kept
   serving stale glyphs on the one page that redeclared them. */
:root{
  --uj:var(--m3e-uj);
  --surface-lowest:var(--surface-2);
  --surface-low:var(--surface-3);
  --warm-cont:var(--warm);

  /* B7's curve. Heavy - it settles rather than stops. Page-local on purpose:
     the rest of the site uses M3's standard easing and should keep doing so. */
  --ease:cubic-bezier(0.32,0.72,0,1);

  /* One --dur put a 700ms delay on the moment a finger lifts. Split by what
     the motion IS, not by which rule wrote it. */
  --dur-press:160ms;
  --dur-hover:150ms;
  --dur-menu:200ms;
  --dur-reveal:700ms;
}


/* ══ SCOPED TO THE PAGE BODY ═══════════════════════════════════════════════
   THIS IS THE BUG THAT KEPT THE HOME PAGE LOOKING DIFFERENT, and it survived
   four passes of syncing the rail because it was never in the rail's own CSS.

   These were bare element selectors - `p`, `h1,h2,h3`, `a`, `section`,
   `footer`. site.css declares the same elements at the SAME specificity
   (0,0,1), and landing.css loads SECOND, so on the home page and nowhere else
   these won every one of those ties. The visible result:

     p{margin:0}          beat  p{margin:0 0 1em}
                          -> .rail-label IS a <p>. It lost its 11px bottom
                             margin, so the entire navigation started 11.76px
                             higher on / than on every other page. Measured:
                             .rail-nav at y=107.41 on /, y=119.17 elsewhere.
     h1,h2,h3{...700...}  beat  h1,h2,h3,h4{...800...}  - every heading on the
                             home page a weight lighter and with different
                             tracking than the same heading anywhere else.
     footer{...}          restyled the SHARED footer, on this page only.
     html{}, a{}, body{font-size:17px}
                          exact duplicates of site.css - deleted outright.
                          (--text-body-lg IS 17px.)

   The fix is `:where(#main)`. It confines each rule to the page body - the
   rail, the top bar and the footer are all OUTSIDE <main> and now unreachable
   - while :where() contributes ZERO specificity, so the cascade inside main
   behaves exactly as it did before. Scoping with a plain `#main p` would have
   worked too and would have quietly promoted these to (1,0,1), overriding
   class-based rules they never used to beat. */
:where(#main) h1, :where(#main) h2, :where(#main) h3 {
  font-family:var(--font-display); font-weight:700; letter-spacing:-.022em;
  text-wrap:balance; margin:0;
}
:where(#main) p { margin:0 }

/* DELETED, not scoped. site.css already defines .wrap, including a
   `@media (min-width:1100px)` rule that narrows it to calc(var(--wrap) - 80px)
   to account for the rail. This copy had the same specificity and loaded later,
   so it won - and the home page's content column came out 80px wider than every
   other page's. Measured: .wrap max-width 1140px here against 1060px on
   /programme. A media query adds no specificity, which is what made this one
   easy to miss. */

/* ── B9 state set, shared ─────────────────────────────────────────────── */
.btn{
  position:relative; isolation:isolate; display:inline-flex; align-items:center;
  gap:8px; padding:16px 28px; border-radius:var(--radius-full);
  font:inherit; font-weight:700; font-size:17px; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer;
  transition:box-shadow var(--dur-press) var(--ease), transform var(--dur-press) var(--ease);
}
.btn::before{content:''; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; background:currentColor; opacity:0;
  transition:opacity var(--dur-hover) var(--ease)}
/* Gated: on a touch screen a tap fires a hover that then sticks, leaving the
   state layer lit on a button the user has already left. */
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{opacity:.08}
  .btn-primary:hover{box-shadow:var(--elev-3)}
  .faq summary:hover{background:var(--surface-low)}
}
.btn:focus-visible::before,.btn:active::before{opacity:.10}
.btn:focus-visible{outline:3px solid var(--primary); outline-offset:3px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--uj); color:#24150E; box-shadow:var(--elev-1)}
.btn-ghost{background:transparent; color:var(--primary); border-color:var(--outline)}

/* ── B7 scroll interpolation ──────────────────────────────────────────── */
/* transform + opacity only. B7 asks for `blur-md` in the reveal, but filter is
   a paint operation, not a composited one, and this fires on 23 elements. The
   fade plus the rise carry it without the repaint. */
.reveal .rise{opacity:0; transform:translateY(28px);
  transition:opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease)}
.reveal .rise.in{opacity:1; transform:none}
/* Reduced motion means gentler, not zero: the fades stay, because they carry
   state, and only the movement comes off. */
@media (prefers-reduced-motion:reduce){
  .reveal .rise{transform:none; transition:opacity var(--dur-reveal) var(--ease)}
  .btn{transition:box-shadow var(--dur-press) var(--ease)}
  .btn:active{transform:none}
  .faq summary .msym{transition:none}
}

/* ── organisation strip ─────────────────────────────────────────────────
   Same geometry as .faces so the two proof rows rhyme. The marks are
   transparent, so each gets a light plate to sit on - a deliberate container,
   unlike the white boxes that used to be baked into the files. */
.orgs-strip{padding:8px 0 0}
.orgs{margin-top:0; max-width:100%}
/* The institution-disc rules moved to site.css on 1 Sep 2026: section 09 on
   /programme uses the same stack, and that page does not load this file. Same
   trap as the waterfront block - a rule two pages need cannot live in the
   stylesheet only one of them loads. */

/* The row is now much taller, so the caption reads better beneath it than
   squeezed beside it. */
.orgs.proof{flex-wrap:wrap}
.orgs .proof-txt{flex:1 1 100%; margin-top:14px}


/* No rule between sections here either - see site.css. */


/* The waterfront block moved to site.css on 1 Sep 2026. It is used by BOTH the
   home page and /programme now, and a rule that two pages need cannot live in
   the stylesheet only one of them loads - which is exactly how it failed: the
   programme hero got the .topshot wrapper and no photograph. */


/* ── the landing block runs the full content width ────────────────────────
   Everything in the opening section is measured against ONE line: the tagline
   paragraph ("Telemedicine stopped being a pilot..."), which fills the whole
   1041px wrap - 961px of text at a 1280 viewport. The hero's own parts were
   capped well short of it: the headline and the lede at 680px (B5's measure
   from `landing-page-design`) and the ledger card at 720px, so the opening read
   as a narrow column sitting inside a wide page while the very next section ran
   edge to edge.

   The caps are lifted here rather than edited at source: 680px is still the
   right measure for the h2s further down the page, where the text is body-sized
   and a long line genuinely hurts. This is display type and a card, and neither
   has that problem. */
#main.main-photo .hero h1,
#main.main-photo .hero .sub,
#main.main-photo .hero .proof{ max-width:none }
#main.main-photo .ledger{ max-width:none }

/* The countdown, inside the ledger's Time row rather than as its own block on
   the programme page - it belongs beside the time it is counting to.

   It reuses site.css's `.clock` and `.unit` wholesale: the outlined surface
   cards, the tabular figures, the uppercase labels and the flip to UJ orange
   when the day is live. An earlier version here was a compact inline
   d/h/m/s strip, which was a second countdown design for the same countdown.
   Only the SIZE is adjusted, because this one sits inside a table row rather
   than under a hero. */
/* Time and countdown on ONE line: the time it runs, then how long until it
   does, then "to go!". Stacked they read as two separate facts; side by side
   they read as one sentence. Wraps to two lines when the row is too narrow for
   that, which is the only time stacking is right. */
.lg-time{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap }
.lg-time-t{ font-weight:inherit; white-space:nowrap }
.lg-togo{
  font-family:var(--font-display); font-weight:800; font-size:1.15rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--primary); white-space:nowrap;
}
.lg-clock{ max-width:420px }
/* Wide enough for the longest label. "MINUTES" and "SECONDS" are seven
   characters, and at .6rem with .06em tracking they need ~54px of the box -
   more than the 96px cap left once .35rem of side padding came off it, so both
   were spilling. Sized off the label now, and nowrap so a longer one would be a
   visible overflow rather than a silent second line. */
.lg-clock .unit{ min-width:66px; flex:0 0 auto; max-width:none; padding:.5rem .5rem .45rem }
.lg-clock .unit b{ font-size:1.35rem; letter-spacing:-.03em }
.lg-clock .unit span{ font-size:.6rem; letter-spacing:.03em; white-space:nowrap }

/* The venue is a map trigger, not a document link: no underline, and the pin
   is gone - the sheet it opens is the affordance, and the icon plus an
   underline plus a hover state was three cues for one action. */
.ledger-where{ text-decoration:none; color:inherit }
.ledger-where:hover{ text-decoration:none }

/* ══ HERO ════════════════════════════════════════════════════════════════
   Ledger is THE hero. It was one of three built with the `variant` skill and
   promoted on 31 Aug 2026; Stack was deleted at the time and Split - the
   two-column argument/evidence layout - was archived behind `?variant=split`
   with a visible switch in the page. Both the archive and the switch are gone
   now that the choice is made. The variant harness never imported from
   production and production never imported from it, so removing it took the
   `[data-hero]` display switch, the `[data-variant]` root attribute and the
   picker with it, and left nothing behind. Git has Split if it is ever wanted.
   See the 28 Aug journal entry for what the three were and what each cost. */

/* ── LEDGER: the day itself is the object ────────────────────────────────
   The headline drops a step because the card, not the type, carries the
   weight. The CTA lives inside the card, so the offer and the action are one
   thing rather than two stacked ones. */
/* Full width. B5 of landing-page-design caps a hero heading at 680px, which
   is right when the type IS the hero - Ledger's hero is the card below, so the
   headline can run the column and the measure rule stops applying. It scales
   with the viewport rather than sitting at a fixed size in a wide space. */
/* .hero[data-hero=...] not [data-hero=...]: `.hero h1{max-width:680px}` is
   the same specificity and sits later in the file, so it was winning and
   the headline kept wrapping at 680px. Two classes beats one. */
.hero[data-hero="ledger"] h1{font-size:clamp(2rem,5vw,3.6rem); max-width:none}
.sub-tight{max-width:56ch}
.ledger{
  margin-top:32px; max-width:720px;
  background:var(--surface-lowest); border:1px solid var(--outline);
  border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--elev-2);
}
.ledger-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:20px 24px; background:var(--uj); color:#24150E;
}
.ledger-day{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.ledger-date{font-family:var(--font-display); font-size:46px; font-weight:700; line-height:.9}
.ledger-mon{font-size:13px; font-weight:700; line-height:1.15; letter-spacing:.04em}
/* The pin sits with the address rather than above it, so the icon and the two
   lines read as one block. */
.ledger-where{
  margin-left:auto; display:flex; align-items:center; gap:9px;
  text-align:right; font-size:14px; line-height:1.35;
}
.ledger-pin{font-size:20px; flex:none; opacity:.75; order:2}
.ledger-addr{order:1}
.ledger-where b{display:block; font-size:16px}
.ledger-rows{list-style:none; margin:0; padding:4px 24px; display:grid; gap:2px}
.ledger-rows li{
  display:grid; grid-template-columns:20px 74px 1fr; gap:12px; align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--outline-var);
}
/* The header strip already states the date and the venue, so those two rows
   would repeat it. Hidden rather than removed from the markup so all four
   facts stay in one place and the header can change without the list going
   out of sync. Carrying fewer visible facts than the other two is this
   structure's cost, not an oversight. */
.ledger-rows li:nth-child(1),
.ledger-rows li:nth-child(3){display:none}
.ledger-rows li:last-child{border-bottom:0}
.ledger-rows .msym{font-size:17px; color:var(--primary); align-self:center}
.ledger-rows .rk{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-surface-var);
}
.ledger-rows .rv{font-size:16px; font-weight:700; line-height:1.3}
.ledger-rows .rv small{
  display:block; font-weight:400; font-size:14px; color:var(--on-surface-var); margin-top:2px;
}
.ledger-act{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:18px 24px; border-top:1px solid var(--outline-var); background:var(--surface-low);
}
.proof-foot{
  margin:0; padding:16px 24px; gap:12px;
  border-top:1px solid var(--outline-var);
}
.proof-foot .proof-txt{font-size:14px; flex-basis:200px}
.proof-foot .faces img{border-color:var(--surface-lowest)}
@media (max-width:560px){
  .ledger-head{padding:16px 18px; gap:10px}
  .ledger-where{margin-left:0; text-align:left; flex-basis:100%}
  .ledger-pin{order:0}
  .ledger-addr{order:1}
  .ledger-rows{padding:4px 18px}
  .ledger-rows li,.ev-rows li{grid-template-columns:20px 1fr; row-gap:2px}
  .ledger-rows .rv,.ev-rows .rv{grid-column:2}
  .ledger-act,.proof-foot{padding-inline:18px}
}

/* ── hero ─────────────────────────────────────────────────────────────── */
/* The wash belongs to the BAND, not the hero: the congress logos sit above
   the hero and were landing on plain surface while the hero was washed, so a
   colour edge ran right between the marks and the headline. One container,
   one gradient, no seam. */
.hero-band{position:relative; overflow:hidden}
.hero-band::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(62% 88% at 88% -12%, color-mix(in srgb, var(--uj) 30%, transparent), transparent 70%),
    radial-gradient(52% 78% at 2% 108%, color-mix(in srgb, var(--secondary) 15%, transparent), transparent 70%)}
.hero-band>*{position:relative}
.hero{position:relative; padding:0 0 64px}
.eyebrow{display:inline-flex; align-items:center; gap:8px;
  background:var(--primary-cont); color:var(--on-primary-cont);
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 16px; border-radius:var(--radius-full)}
.hero h1{margin-top:24px; font-size:clamp(2.6rem,6.4vw,4.25rem); line-height:1.03; max-width:680px}
.hero .sub{margin-top:20px; font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--on-surface-var);
  max-width:680px; font-weight:500}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:32px}
.risk{font-size:15px; color:var(--on-surface-var); font-weight:500}

/* Face row. Overlapping discs, each ringed in the surface colour so they
   read as a stack rather than a smear. The ring is the page background, so it
   works on the hero wash without a hard-coded colour. */
.proof{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:28px; max-width:680px; text-decoration:none; color:inherit;
  border-radius:var(--radius-md);
}
.proof:hover{text-decoration:none}
.proof:focus-visible{outline:2px solid var(--primary); outline-offset:6px}
.faces{display:flex; flex:none}
.faces img{
  /* 52px: at 2x that is 104 device pixels against a 173px smallest source,
     so still downscaling. 44 read timid; anything past ~86 would upscale. */
  width:52px; height:52px; border-radius:var(--radius-full);
  object-fit:cover; object-position:center 18%;
  border:2px solid var(--surface); margin-left:-14px;
  background:var(--surface-low);
  transition:transform var(--dur-hover) var(--ease);
}
.faces img:first-child{margin-left:0}
@media (hover:hover) and (pointer:fine){
  .proof:hover .faces img{transform:translateY(-2px)}
}
.proof-txt{flex:1 1 320px; font-size:15px; color:var(--on-surface-var)}
.proof-txt b{color:var(--on-surface); font-weight:700}

.facts{display:grid; gap:12px; margin-top:40px;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.fact{background:var(--surface-lowest); border:1px solid var(--outline-var);
  border-radius:var(--radius-lg); padding:16px 18px; box-shadow:var(--elev-1)}
.fact .k{display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--on-surface-var)}
.fact .k .msym{font-size:15px; color:var(--primary)}
.fact .v{margin-top:8px; font-weight:700; font-size:17px; line-height:1.3}
.fact .v small{display:block; font-weight:500; font-size:14px;
  color:var(--on-surface-var); margin-top:3px}

/* ── B11 tagline reveal ───────────────────────────────────────────────── */
.tagline{padding:104px 0; background:var(--surface-low)}
/* Full width as well: at 680px in a 1080px column it read as a narrow slab
   rather than a statement. The word-by-word reveal is the point of the
   section, so it should occupy it. */
.tagline p{font-family:var(--font-display); font-size:clamp(2rem,5vw,3.9rem);
  line-height:1.14; max-width:none; margin:0}
/* B11 wants each word to go from a muted tone to full colour. Doing that on
   `color` is 26 simultaneous paint animations on one paragraph; on `opacity`
   it is composited and, against a flat background, identical to look at. */
.reveal .tag-w{opacity:.3; transition:opacity 600ms var(--ease)}
.reveal .tag-w.lit{opacity:1}

/* ── sections ─────────────────────────────────────────────────────────── */
/* :where(#main) for the same reason as the block at the top of this file: a
   bare `section` selector also matches <section class="hero"> inside the rail's
   siblings and anything a future page puts outside main, and a bare `h2` fought
   site.css's own heading rule at equal specificity on this page alone. */
:where(#main) section{padding:88px 0}
.sec-alt{background:var(--surface-low)}
:where(#main) h2{font-size:clamp(1.9rem,3.4vw,2.5rem); max-width:680px}
.lede{margin-top:14px; color:var(--on-surface-var); max-width:640px}

.gains{list-style:none; margin:40px 0 0; padding:0; display:grid; gap:14px;
  /* 400px minimum so four cards land 2x2 rather than 3+1 with an orphan -
     but wrapped in min(), because a bare minmax(400px,1fr) cannot shrink below
     its own minimum and overflowed a 320px viewport by 104px. min(400px,100%)
     lets the track collapse to the container when there is less room than the
     ideal. */
  grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.gains li{display:flex; gap:14px; padding:22px;
  background:var(--surface-lowest); border:1px solid var(--outline-var);
  border-radius:var(--radius-lg); box-shadow:var(--elev-1)}
.gains .msym{font-size:24px; color:var(--primary)}
.gains b{display:block; font-size:17px; margin-bottom:5px}
.gains span.t{font-size:15px; color:var(--on-surface-var)}

.steps{counter-reset:s; list-style:none; margin:40px 0 0; padding:0;
  display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.steps li{counter-increment:s; padding-top:20px; border-top:2px solid var(--outline-var)}
.steps li::before{content:counter(s,decimal-leading-zero);
  font-family:var(--font-display); font-size:30px; color:var(--primary); display:block}
.steps b{display:block; margin-top:8px; font-size:18px}
.steps p{margin-top:6px; font-size:15px; color:var(--on-surface-var)}

.people{display:grid; gap:12px; margin-top:36px;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.who{background:var(--surface-lowest); border:1px solid var(--outline-var);
  border-radius:var(--radius-lg); padding:18px; box-shadow:var(--elev-1)}
.who .r{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--primary)}
.who b{display:block; margin-top:7px; font-size:16px; line-height:1.3}
.who span{display:block; margin-top:5px; font-size:14px; color:var(--on-surface-var)}

.faq{margin-top:36px; border:1px solid var(--outline-var); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--surface-lowest)}
.faq details+details{border-top:1px solid var(--outline-var)}
.faq summary{list-style:none; cursor:pointer; padding:20px 22px; font-weight:700;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
  transition:background var(--dur-hover) ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:3px solid var(--primary); outline-offset:-3px}
/* This page's FAQ carries its own chevron in the markup (a .msym on each
   <summary>), and site.css ALSO draws one with `.faq summary::after`. Both
   rendered, so every question had two arrows. The markup one stays - it is a
   real glyph rather than two rotated borders, and it is the one landing.css
   animates - so the CSS-drawn one is suppressed here. */
.faq summary::after{display:none}
.faq summary .msym{font-size:20px; color:var(--primary);
  transition:transform var(--dur-menu) var(--ease)}
.faq details[open] summary .msym{transform:rotate(180deg)}
.faq .a{padding:0 22px 22px; color:var(--on-surface-var); max-width:70ch; font-size:16px}

.final{background:var(--warm-cont); border-radius:var(--radius-xl);
  padding:56px 40px; text-align:center; margin:0 auto}
.final h2{margin:0 auto; max-width:560px}
.final .lede{margin:14px auto 0}
.final .cta-row{justify-content:center}

/* The footer rules that used to live here are DELETED, not scoped.
   This page no longer has a footer of its own - shell() emits the shared
   <footer class="foot"> that every page gets, and landing_body.html contains
   no <footer> at all. These bare `footer` selectors were therefore restyling
   the SHARED footer, on the home page only: different padding, a different
   border colour, 14px type and a different link colour from the identical
   footer on all seventeen other pages.
   `.foot` in site.css is the one definition now. */
.fnav{display:flex; flex-wrap:wrap; gap:20px; margin-bottom:14px}