/* ===========================================================================
   Be Watch - 2026 reading scale.

   Loaded AFTER be-shell.css (that enqueues on wp_enqueue_scripts at 99, this at
   100) because it re-points the shared --be-* tokens rather than restyling the
   components. Every size in bewatch.css already reads those tokens, so one block
   here moves the whole site and nothing can drift out of step.

   WHY these numbers: the family scale set on 2026-09-16 (body 17.5 / h2 40) was
   calibrated for a poster-sized hero and reads heavy on a laptop. Be Connect's
   2026 redesign settled the sub-hero levels at body 15.5 / h2 ~32 / card title
   17.5 / eyebrow 11.5 in Poppins, which Gaurav confirmed "looks so natural to
   read". Instrument Sans has a smaller x-height than Poppins, so each level is
   taken +0.5px to read at the same size on the page.

   The HERO h1 is deliberately NOT touched - it stays on the family 36/63/72.
   Only the levels below it come down.

   Every middle term is written `px + vw` and solved between 380 and 1440, not
   `Nvw`, because a bare vw middle leaves the clamp sitting on its floor for most
   of the viewport range (the 2026-09-16 trap).
   ========================================================================= */

:root{
	/* ---- content width --------------------------------------------------
	   The family default is --be-max:1440px, which left 233px of dead gutter
	   on each side of a 1905px browser. Be Online already runs 2400 and Be
	   Connect 1920; Be Watch now matches Be Online, so the page fills the
	   window on a wide monitor instead of sitting in a 1440 column.
	   Below ~1500px nothing changes - the gutter was already doing the work.
	   Long-form prose keeps its own measure via --max-narrow / .wrap--narrow;
	   width here is for the LAYOUT, not for reading line length. */
	--be-max:2400px;
	/* A touch more air at the extremes now the content reaches the glass. */
	--be-gutter:clamp(20px,3.2vw,64px);

	/* ---- headings ------------------------------------------------------- */
	/* hero h1 (--be-h1) intentionally inherited: 36 · 63 · 72 */
	--be-h1-page:clamp(28px,calc(22.26px + 1.5094vw),44px);   /* 28 · 44 · 44  was 32 · 47 · 52 */
	--be-h2:clamp(22px,calc(18.415px + .9434vw),34px);        /* 22 · 32 · 34  was 28 · 40 · 44 */
	--be-h3:clamp(18px,calc(16.925px + .283vw),22px);         /* 18 · 21 · 22  was 19 · 23 · 24 */
	--be-h3-card:clamp(16px,calc(15.462px + .1415vw),18px);   /* 16 · 17.5 · 18  card titles */

	/* ---- body and ledes -------------------------------------------------- */
	/* Flat 16px at EVERY width. The shell drops --be-body to 17px below 640px;
	   that override is cancelled below. 16 is also the iOS zoom threshold, so
	   body copy must not go under it where a form field might inherit. */
	--be-body:16px; --be-body-lh:1.65;
	--be-body-card:15.25px;
	--be-lede-hero:clamp(17px,calc(16.283px + .1887vw),20px); /* 17 · 19 · 20  was 19 · 22 · 23 */
	--be-lede:clamp(16px,calc(15.642px + .0943vw),17.5px);    /* 16 · 17 · 17.5  was 18 · 20 · 21 */
	--be-small:13.5px;

	/* ---- labels ---------------------------------------------------------- */
	--be-eyebrow:11.5px;

	/* ---- line height rises as size falls --------------------------------- */
	--be-h2-lh:1.18; --be-h3-lh:1.3; --be-lede-lh:1.55;
}

/* The shell lifts body copy on small screens. At 16px flat that is no longer
   wanted - it would make phone body copy LARGER than desktop. */
@media (max-width:640px){
	:root{ --be-body:16px; }
}

/* Eyebrows are mono + uppercase + letterspaced, so 11.5px is the cap height of
   roughly 13px lowercase. Tighten the tracking a little at this size or the
   words fall apart. */
.eyebrow{letter-spacing:.14em;margin-bottom:.7rem}

/* Card titles must use the CARD token, never the section h3 token. This was the
   exact defect found on Be Online (28.4px card titles inherited from h3). */
.pillar h3,
.card h3,
.plan h3,
.menu a b,
.grid-3 h3,
.tile h3,
.why>div h3,
.contact-cards h3{font-size:var(--be-h3-card);line-height:1.3;letter-spacing:-.012em}

/* .plan h3 carried its own oversized clamp (24-32px) that ignored the tokens. */
.plan h3{font-size:var(--be-h3);letter-spacing:-.02em}

/* ---- ONE shared gap between sections ------------------------------------
   Two stacked .sec blocks each paid --sec-y, so the visual gap was double the
   intended one. Collapse the second one's top padding - but ONLY between two
   sections that share a background. A tinted band (.sec--lift / .sec--plate)
   keeps its own top padding on both sides, or its content would sit hard
   against the colour boundary. */
.sec:not(.sec--lift):not(.sec--plate) + .sec:not(.sec--lift):not(.sec--plate){padding-top:0}

/* Headings never balance: it evens line lengths and leaves the right third of a
   full-width header empty (the Sachin Graphics finding, 2026-10-02). */
h1,h2,h3,h4{text-wrap:pretty}

/* ---- NO ch-BASED MEASURE CAPS ANYWHERE ----------------------------------
   Standing rule (2026-10-06): hero ledes, section leads, CTA paragraphs and
   solo text columns span their container. Width is governed by the CONTAINER
   - a .wrap, a grid column - never by a ch cap on the text itself.

   An earlier pass here only lifted `.hero .lede` and a direct-child selector,
   which missed every section lede nested one level deeper. Audited at 1900px
   across all 43 pages, three caps were still biting:
     .lede                          68ch -> 45% of its container, 10 pages
     .split .lede / .cta-in .lede   62ch -> 60% of its column,    34 pages
     .ftr-brand p                   52ch -> 60% of its column,    43 pages
   So the caps are removed by name rather than by guessing at the structure.
   `.wrap--narrow` (--max-narrow) is the ONE remaining measure and is applied
   to the container, which is the right place for genuine long-form prose. */
.lede,
.hero .lede,
.split .lede,
.cta-in .lede,
.hero-page-in .lede,
.ftr-brand p,
.lede--full{max-width:none}