/* The shared template layer. Linked after site.css by every page, before any page stylesheet.
   Sanil, 24 September 2026: "Can we have all other pages to follow the same template design, fonts etc."

   Everything here was written for the homepage first, in response to Mike's review of 21 September, and is
   lifted out unchanged so the rest of the site reads at the same size and in the same voice. Nothing below
   introduces a new size, colour or font: the scale is the one measured on joininlive.ai.

   TYPE, measured on the live site (Squarespace, September 2026):
     H1  16px + 5.52vw    95px at 1440     (site.css --fs-h1)
     H2  16px + 3.6vw     68px at 1440     (site.css --fs-h2)
     H3  16px + 1.68vw    40px at 1440     (site.css --fs-h3)
     H4  16px + 0.84vw    28px at 1440     (site.css --fs-h4)
     Large paragraph   16px + 0.48vw, 20px minimum   23px at 1440   (--fs-p-lg)
     Paragraph         16px                                          (--fs-p)
     Small             14.4px, the smallest size the live site uses  (--fs-small)

   Mike asked for explanatory text at 18 to 20px or more, and for nothing on the page to sit below the live
   site's smallest size. So the small steps are raised inside page content, section labels are set as readable
   words rather than 12px capitals, and explanatory copy takes the live site's large paragraph. */

:root{
  --fs-p-lg:max(1.25rem,calc(1rem + .48vw));   /* live "large paragraph": 20px floor, 22.9px at 1440, 25.2px at 1920 */
  --fs-p:1rem;                                 /* live paragraph: 16px */
  --fs-small:.9rem;                            /* live small: 14.4px */
}

/* The small steps, raised for page content. Every page's own components are written against these tokens, so
   raising them here lifts the vote rows, pipeline cards, tables and demos on every page at once, instead of
   leaving each page to be re-typed by hand.

   Scope: <section> and the prose pages' body. The nav, the heroes (<header>) and the footer keep site.css
   sizes, exactly as on the homepage: they are chrome, and the hero mock-ups are drawn to fit a phone screen. */
section,.pr-body{
  --fs-2xs:var(--fs-small);   /* 12 -> 14.4 */
  --fs-xs:1rem;               /* 13 -> 16 */
  --fs-sm:1.0625rem;          /* 14 -> 17 */
  --fs-md:1.125rem;           /* 16 -> 18 */
  --fs-base:1.25rem;          /* 18 -> 20 */
  --fs-lg:1.4375rem;          /* 21 -> 23 */
  --fs-title:var(--fs-h4);    /* 20-24 -> 24-28 */
  --fs-lead:var(--fs-p-lg);
}

/* ---------------------------------------------------------------- section labels: visible, not captions */
.lbl{
  font-size:var(--fs-p-lg);font-weight:var(--fw-medium);letter-spacing:var(--track);text-transform:none;
  line-height:var(--lh-ui);color:var(--blue)
}
/* Every hero carries the label on a dark ground. The pages each held their own copy of this rule at a
   different opacity; one rule now serves all five. */
.hero .lbl,.hiw-hero .lbl,.sol-hero .lbl,.wip-hero .lbl,.pr-hero .lbl{color:#fff}
.head{gap:22px}
.head p{font-size:var(--fs-p-lg);max-width:44ch}

/* ---------------------------------------------------------------- the feature panels (homepage, how it works) */
/* Two across instead of four, so each card has room for its heading and its explanation at the larger size. */
.pf{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1500px){ .pf{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:760px){ .pf{grid-template-columns:1fr} }
.pf-k{font-size:var(--fs-p-lg);color:var(--blue)}
.pf-c > p{font-size:var(--fs-p-lg)}
.pf-q{text-transform:none;letter-spacing:normal;font-size:var(--fs-p)}
.pf-why-l{font-size:var(--fs-p-lg);text-transform:none;letter-spacing:var(--track)}
.pf-why p{font-size:var(--fs-p-lg);line-height:var(--lh-body)}
.pf-why-o{font-size:var(--fs-p);text-transform:none;letter-spacing:normal}

/* ---------------------------------------------------------------- the closing band, on every page that has one */
/* The heading keeps site.css's 16ch measure: only the homepage's closing line is written to run full width. */
.close-in p{font-size:var(--fs-p-lg);max-width:52ch}

/* ---------------------------------------------------------------- the prose pages: about, credits, legal, book, contact */
/* The band's own tokens already lift this copy from 18px to 20px. The notes and the form's small print were
   the two places that still read as footnotes. */
.pr-note{font-size:var(--fs-p-lg);line-height:var(--lh-body)}
.jcf-fine{font-size:var(--fs-p)}
.jcf p.jcf-fine{font-size:var(--fs-p)}