/* ══════════════════════════════════════════════════════════════
   ChargerHelp — shared section layout + responsive layer
   Linked by every page. One edit here lands on all 11 pages.

   Breakpoints: 1024 tablet, 640 mobile.
   Section sizes: band / std / tall / index (+ hero-ed, article).
   Side gutter is a single variable so it changes in one place.
   ══════════════════════════════════════════════════════════════ */

:root {
  --gutter: 100px;
  /* hero copy measure, as a % of the padded content width */
  --hero-w-d: 72%;
  --hero-w-t: 100%;
  --hero-w-m: 100%;
  /* body copy keeps a shorter measure than the display type */
  --hero-copy-w: 750px;
  --sec-band: 100px;
  --sec-std: 140px;
  --sec-tall: 180px;
}

/* was @media (max-width: 1024px) */
  .bp-t {
    --gutter: 32px;
    --sec-band: 60px;
    --sec-std: 100px;
    --sec-tall: 110px;
  }

/* was @media (max-width: 640px) */
  .bp-m {
    --gutter: 16px;
    --sec-band: 48px;
    --sec-std: 72px;
    --sec-tall: 80px;
  }

/* ── Section sizes ─────────────────────────────────────────── */

.sec { box-sizing: border-box; }

.sec--band { padding: var(--sec-band) var(--gutter); }
.sec--std  { padding: var(--sec-std) var(--gutter); }
.sec--tall { padding: var(--sec-tall) var(--gutter); }

/* Listing pages: tight top (hero sits above), generous bottom */
.sec--index { padding: 100px var(--gutter) 140px; }
/* was @media (max-width: 1024px) */
 .bp-t .sec--index { padding: 72px var(--gutter) 96px; } /* was @media (max-width: 640px) */
 .bp-m .sec--index { padding: 56px var(--gutter) 72px; } 
/* Editorial hero — clears the 115px fixed nav */
.sec--hero-ed { padding: 210px var(--gutter) 90px; }
/* was @media (max-width: 1024px) */
 .bp-t .sec--hero-ed { padding: 150px var(--gutter) 64px; } /* was @media (max-width: 640px) */
 .bp-m .sec--hero-ed { padding: 120px var(--gutter) 48px; } 
/* Long-form article body */
.sec--article { padding: 80px var(--gutter) 120px; }
/* was @media (max-width: 1024px) */
 .bp-t .sec--article { padding: 64px var(--gutter) 80px; } /* was @media (max-width: 640px) */
 .bp-m .sec--article { padding: 48px var(--gutter) 64px; } 
/* Modifiers */
.sec--nb { padding-bottom: 0; }                    /* runs into the next section */
.sec--edge { padding-right: 0; padding-bottom: 0; padding-left: 0; }  /* full-bleed content */

/* ── Grid archetypes ──────────────────────────────────────── */

.sec-split { display: grid; grid-template-columns: 1fr 1fr; }
.sec-eco { display: grid; grid-template-columns: 60% 40%; height: 100vh; }

/* was @media (max-width: 1024px) */
  .bp-t .sec-split, .bp-t .sec-eco { grid-template-columns: minmax(0, 1fr); }
  .bp-t .sec-eco { height: auto; }
  .bp-t .sec-eco > * { height: auto; }
  /* The copy half is an absolutely-positioned inset:0 box inside a grid cell that
     had its height from the section's 100vh. Once stacked, the cell collapses and
     the copy renders at zero height — it disappears. Put it back in flow. */
  .bp-t .sec-eco > div:first-child > div { position: static !important; }
  .bp-t .sec-eco > div:first-child > div > div { width: 100% !important; padding: 0 var(--gutter) !important; box-sizing: border-box !important; }
  .bp-t .sec-eco > div:first-child { padding: 80px 0 !important; }
  .bp-m .sec-eco > div:first-child { padding: 56px 0 !important; }
  /* No parallax on the rows column below 1024, and the scrims that mask its drift
     have nothing to hide — same treatment as Home's Ecosystem section. */
  .bp-t #ecorows { transform: none !important; }
  .bp-t .sec-eco > div:last-child > div[aria-hidden="true"] { display: none !important; }

/* ── Footer ───────────────────────────────────────────────── */

.sec-footer { box-sizing: border-box; padding: 96px 64px 40px; }
/* was @media (max-width: 1024px) */
 .bp-t .sec-footer { padding: 80px var(--gutter) 40px; } /* was @media (max-width: 640px) */
 .bp-m .sec-footer { padding: 64px var(--gutter) 32px; } 
/* ── Inner grids ───────────────────────────────────────────
   Card rows and two-column blocks. Desktop column count is the
   class name; tablet/mobile collapse is defined once, here. */

.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Label beside a flowing element (logo marquees, eyebrow + track) */
.grid-label-flow { grid-template-columns: max-content minmax(0, 1fr); }
/* Asymmetric two-column (copy beside a wider visual) */
.grid-2-uneven { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }

/* was @media (max-width: 1024px) */
  .bp-t .cards-2, .bp-t .grid-2-uneven, .bp-t .grid-label-flow { grid-template-columns: minmax(0, 1fr); }
  .bp-t .cards-3, .bp-t .cards-4, .bp-t .cards-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-t /* the label half usually carries nowrap, .bp-t which would set the column's floor */
  .grid-label-flow > *:first-child { white-space: normal !important; }
  /* Eyebrow label hidden below 1024 — matches the dark logo bar, and the label
     stacked above the marquee reads as a stray line rather than a caption. */
  .bp-t .grid-label-flow > *:first-child { display: none !important; }

/* was @media (max-width: 640px) */
  .bp-m .cards-3, .bp-m .cards-4, .bp-m .cards-5 { grid-template-columns: minmax(0, 1fr); }

/* ── Split-module panes ────────────────────────────────────
   The copy/visual halves inside .sec-split and .sec-eco carry tall
   desktop min-heights and deep padding. Desktop values stay inline;
   these only reclaim the space once the halves stack. */

/* was @media (max-width: 1024px) */
  .bp-t .split-pane { min-height: 0 !important; padding: 72px 300px 72px var(--gutter) !important; }
/* was @media (max-width: 640px) */
  .bp-m .split-pane { padding: 56px 24px 56px var(--gutter) !important; }
  /* "Network maze" header block matches the Home RaaS pane's measure: no max-width,
     wrapping set by the same deep right inset (300px tablet / 24px mobile). */
  /* Direct child only — a bare .m-anim descendant selector also matched the card
     children inside this section, giving every card the 300px right inset. */
  .bp-t [data-screen-label="Network maze"] > .m-anim { max-width: none !important; padding-right: 300px !important; }
  .bp-m [data-screen-label="Network maze"] > .m-anim { padding-right: 24px !important; }
  /* Cards stay in a single horizontal row at tablet instead of collapsing to 2-up. */
  .bp-t:not(.bp-m) [data-screen-label="Network maze"] .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .bp-t [data-screen-label="Network maze"] .cards-3 { gap: 12px !important; }
  .bp-t:not(.bp-m) [data-screen-label="Network maze"] .cards-3 > .m-anim { padding: 24px !important; }
  /* Split-visual gradients blend the photo into the copy pane beside it. Once the
     halves stack there is nothing to blend into, so the wash just dims the photo. */
  .bp-t .sec-split > div:not(.split-pane) > div[aria-hidden="true"] { display: none !important; }
  /* Stacked EMPWR screenshot fills the width — the desktop left inset and 1100px
     cap left it floating short of both edges. */
  .bp-t [data-screen-label="EMPWR module"] > .split-pane { padding-bottom: 0 !important; padding-right: var(--gutter) !important; }
  .bp-m [data-screen-label="EMPWR module"] > .split-pane { padding-right: 24px !important; }
  .bp-t [data-screen-label="EMPWR module"] > div:has(> img) { padding: 0 var(--gutter) !important; }
  .bp-t [data-screen-label="EMPWR module"] { padding-bottom: 0 !important; }
  /* Screenshot bleeds into the section below, as it does on Home: the container
     stops centring the image and the 1px negative margin closes the seam. */
  /* Scoped to the image container with :has(> img) — a bare :not(.split-pane) also
     matched the copy wrapper and pushed its eyebrow and CTA to the right edge. */
  .bp-t [data-screen-label="EMPWR module"] > div:has(> img) { align-items: flex-end !important; }
  .bp-t [data-screen-label="EMPWR module"] > div:has(> img) > img { margin-bottom: -1px !important; }
/* Desktop keeps the original off-canvas screenshot; tablet/mobile use the stacked
   one. Two <img> tags, since a stylesheet cannot swap a src. Default state is the
   desktop one, so an un-classed first frame never shows both. */
.empwr-vis-tm { display: none; }
.bp-t .empwr-vis-tm { display: block !important; }
/* Stacked EMPWR module: hold a 24px floor between the CTA and the iPad. */
.bp-t [data-screen-label="EMPWR module"] > div:has(> img.empwr-vis-tm) { margin-top: 24px !important; }
.bp-t .empwr-vis-d { display: none !important; }
  .bp-t [data-screen-label="EMPWR module"] > div:has(> img) > img { max-width: none !important; width: 100% !important; }
  .bp-t [data-screen-label="Network maze"] { padding-bottom: var(--gutter) !important; }
/* Desktop: same section's bottom inset matches its 100px side gutter. */
.bp-d [data-screen-label="Network maze"] { padding-bottom: var(--gutter) !important; }
  .bp-m [data-screen-label="Network maze"] .cards-3 { margin-top: 40px !important; }
  /* "Unification" mirrors the RaaS "Network maze" treatment below 1024: header left
     and flush to the gutter with a deep right inset, tighter card grid, bottom
     inset equal to the sides. The inline text-wrap: nowrap has to go too, or the
     headline runs off the side of a phone. */
  .bp-t [data-screen-label="Unification"] { padding-bottom: var(--gutter) !important; }
  .bp-t [data-screen-label="Unification"] > .m-anim { max-width: none !important; margin: 0 !important; text-align: left !important; align-items: flex-start !important; padding-right: 300px !important; }
  .bp-t [data-screen-label="Unification"] h2.sec-title { text-wrap: pretty !important; }
  .bp-t [data-screen-label="Unification"] .cards-4 { gap: 12px !important; }
  .bp-t [data-screen-label="Unification"] .cards-4 > .cap-card { padding: 24px !important; }
  .bp-m [data-screen-label="Unification"] > .m-anim { padding-right: 24px !important; }
  .bp-m [data-screen-label="Unification"] .cards-4 { margin-top: 40px !important; }
  .bp-m [data-screen-label="Unification"] .cards-4 > .cap-card { min-height: 0 !important; }
  /* Data-asset chart: desktop deliberately oversizes it (140% wide, pulled 140px
     right) so it bleeds past the column. Stacked, that just crops it — sit it
     inside the container at true 100%. */
  .bp-t #dataasset .cards-2 > .m-anim > svg { position: static !important; width: 100% !important; height: auto !important; transform: none !important; right: auto !important; }
  .bp-t:not(.bp-m) #dataasset .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .bp-t:not(.bp-m) #dataasset .cards-3 > .m-anim { padding-left: 16px !important; }
  .bp-t:not(.bp-m) #dataasset .cards-3 > .m-anim > div:first-child { font-size: 48px !important; }
  .bp-t #dataasset > div { gap: 12px !important; }
  .bp-t #dataasset .cards-2 { gap: 24px !important; }
  .bp-t #dataasset .cards-2 > .m-anim:has(> svg) { aspect-ratio: auto !important; display: flex !important; align-items: center !important; overflow: visible !important; }
  /* Chart bleeds past the section gutter to the right screen edge — negative margin
     equal to the gutter, plus width grown by the same amount so nothing is cropped. */
  .bp-t #dataasset .cards-2 > .m-anim:has(> svg) { margin-right: calc(var(--gutter) * -1) !important; width: calc(100% + var(--gutter)) !important; }
  /* "One standard of reliability." wrapped mid-phrase once the headline shrank —
     the <br> keeps the two sentences apart, this keeps the second one intact. */
  .bp-t #tierfade h2.sec-title { text-wrap: balance !important; max-width: 22ch !important; }
  .bp-m [data-screen-label="Network maze"] .cards-3 > .m-anim { padding: 24px !important; min-height: 0 !important; }

/* Scroll animation off for these two sections (RaaS "Network maze", EMPWR
   "Unification"), all breakpoints. The JS writes inline opacity/transform on every
   .m-anim, so this has to outrank an inline style. */
[data-screen-label="Network maze"] .m-anim,
[data-screen-label="Network maze"].m-anim,
[data-screen-label="Unification"] .m-anim,
[data-screen-label="Unification"].m-anim { opacity: 1 !important; transform: none !important; }

/* ── Field Notes ──────────────────────────────────────────────
   These lived only in Home's head block, so the RaaS/EMPWR copies of the same
   section kept their desktop layout below 1024. Shared now — one component,
   one set of breakpoint rules, every page. */
  .bp-t [data-screen-label="Field Notes"] .sec-title { white-space: normal !important; }
  .bp-t [data-screen-label="Field Notes"] > div > div:last-child { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .bp-m [data-screen-label="Field Notes"] > div { gap: 40px !important; }
  .bp-m [data-screen-label="Field Notes"] > div > div:last-child { grid-template-columns: 1fr !important; gap: 20px !important; }

/* ── Shared chrome that also lives on Home ─────────────────────
   Rules for components that appear on every page belong HERE, not in one page's
   head block. Home is the most-tested page, so anything proven there should be
   shared by default — Field Notes above was left behind that way. */
  .bp-t footer > div > div:first-child { flex-direction: column !important; gap: 48px !important; }
  .bp-t footer > div > div:first-child > div:last-child { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }
  .bp-m footer > div > div:first-child > div:last-child { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* Logo marquees — any "Logo Bar" variant, light or dark */
  .bp-t [data-screen-label^="Logo Bar"] > div { grid-template-columns: minmax(0,1fr) !important; gap: 32px !important; }
  .bp-m .partners-track, .bp-m .bb-track { gap: 56px !important; }

/* ── Eyebrows ──────────────────────────────────────────────
   Every eyebrow is an uppercase 0.18em-tracked label at 14px on desktop.
   Below 1024 they all drop to 11px, site-wide. */
.bp-t [style*="letter-spacing: 0.18em"] { font-size: 11px !important; }

/* ── Body copy scale ───────────────────────────────────────
   Site-wide paragraph sizes below 1024. Cards (anything inside a
   .card* element or a list item) keep their own sizes. */
/* Desktop-only manual line breaks: at tablet/mobile the type is much smaller, so a
   hardcoded break splits a headline that would otherwise fit on one line. */
.bp-t br.brk-d { display: none; }
/* The space that replaces a hidden break — a bare space beside a display:none <br>
   collapses, which jammed the two words together. */
.brk-d-sp { display: none; }
.bp-t .brk-d-sp { display: inline; }

.bp-t p:not(li p, [class*="card"] p) { font-size: 17px !important; }
.bp-m p:not(li p, [class*="card"] p) { font-size: 15px !important; }
/* Section titles at tablet (h2 only — hero h1s keep their own sizes) */
.bp-t:not(.bp-m) h2.sec-title { font-size: 40px !important; }
.bp-m h2.sec-title { font-size: 32px !important; }
.bp-m .split-pane .sec-title { font-size: 32px !important; }

/* Secondary-page hero headlines. Desktop values are inline per page (60–64px);
   these bring them down site-wide so no page needs its own rule. The Home hero
   is exempt — its size comes from an inline var() that outranks any stylesheet. */
.bp-t:not(.bp-m) h1.sec-title { font-size: 44px !important; letter-spacing: -0.5px !important; }
.bp-m h1.sec-title { font-size: 32px !important; line-height: 1.16 !important; letter-spacing: -0.25px !important; }
/* Hero body copy sits a step above section body copy — the generic rule above
   would drop it to 15/17px, which reads as caption text under a 44px headline. */
.bp-t:not(.bp-m) .hero-pane p { font-size: 19px !important; }
.bp-m .hero-pane p { font-size: 16px !important; }

/* ── Secondary hero (deep top padding clears the fixed nav) ── */

/* was @media (max-width: 1024px) */
  .bp-t .hero-pane { padding: 300px 120px 56px var(--gutter) !important; }
  /* Class-based, NOT inline-style matching: the DC runtime re-serializes style
     attributes (`padding: 0 100px` becomes `padding: 0px 100px`), so [style*=]
     selectors silently stop matching. */
  .bp-t .title-half { max-width: none !important; }
  .bp-t .sec-head { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
  /* Value cards: the 32px lead line is a desktop display size — bring it in line
     with the capability cards on RaaS/EMPWR (19px title, 8px to body). */
  .bp-t .value-card > div > p:first-child { font-size: 19px !important; line-height: 1.35 !important; }
  .bp-t .value-card > div { gap: 8px !important; }
  .bp-t .value-card { gap: 20px !important; padding: 28px !important; }
  .bp-m .value-card { padding: 24px !important; }
  /* Value cards stay in one horizontal row at tablet (About Us, Careers) */
  .bp-t:not(.bp-m) .cards-3:has(> .value-card) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
/* was @media (max-width: 640px) */
  .bp-m .hero-pane { padding: 225px var(--gutter) 44px !important; }
/* Desktop pins these panes to a tall viewport fraction so the photo half fills.
   Stacked, that leaves a screen of empty navy under the copy. */
  .bp-t .hero-pane { min-height: 0 !important; }
  /* Hero photo: drop the 580px floor; height is 80% of the column's own width.
     Done with a percentage padding-top spacer, not aspect-ratio + height:auto —
     that combination collapsed to zero height on iOS, since the img is absolutely
     positioned so the box has no in-flow content to size from. */
  .bp-t .hero-up .cards-2 > div:has(> img) { min-height: 0 !important; height: auto !important; align-self: start !important; }
  .bp-t .hero-up .cards-2 > div:has(> img)::before { content: ""; display: block; padding-top: 75%; }
  .bp-t [data-screen-label="Hero - Secondary"] { min-height: 0 !important; }
  .bp-t .hero-up .cards-2 > div:not(:has(> img)) { padding-left: 60px !important; padding-right: 150px !important; }
  .bp-t:not(.bp-m) .hero-up .cards-2 h2 { font-size: 28px !important; }
  .bp-m .hero-up .cards-2 > div:not(:has(> img)) { padding-left: 32px !important; padding-right: 32px !important; }

/* ── Wide tables ───────────────────────────────────────────
   The tier-comparison table has a fixed column count that cannot collapse, so it
   scrolls sideways instead of squeezing its cells. The floor has to sit on the
   TABLE (min-width does not apply to thead/tbody row-group boxes) and the scroll
   on its parent — hence :has() rather than display: block on the table itself. */
  .bp-t .cmp { min-width: 620px !important; }
  .bp-t *:has(> .cmp) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* The small comparison chart shows two columns, so it fits — no scroll, no floor. */
  .bp-t #tierfade .cmp { min-width: 0 !important; }
  .bp-t #tierfade *:has(> .cmp) { overflow-x: visible !important; }

/* ── Remaining grid archetypes ─────────────────────────────── */

.grid-30-70 { grid-template-columns: 30% 70%; }
.grid-40-60 { grid-template-columns: 40% minmax(0, 60%); }
.grid-2-lean { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.grid-flow-auto { grid-template-columns: minmax(0, 1fr) auto; }
.grid-main-side { grid-template-columns: minmax(0, 1fr) 300px; }
.grid-side-main { grid-template-columns: 320px minmax(0, 1fr); }

/* was @media (max-width: 1024px) */
  .bp-t .grid-30-70, .bp-t .grid-40-60, .bp-t .grid-2-lean, .bp-t .grid-flow-auto, .bp-t .grid-main-side, .bp-t .grid-side-main { grid-template-columns: minmax(0, 1fr); }

/* ── Overflow guard ────────────────────────────────────────
   Wide inline diagrams (SVG built at desktop width) push the page sideways
   once the container narrows. Scale them, and stop stray 1–3px bleed. */
  .bp-t .m-anim > svg, .bp-t figure > svg { max-width: 100%; height: auto; }
  /* clip (not hidden) — keeps position: sticky working */
  .bp-t section, .bp-t footer { overflow-x: clip; }

/* ── Split-module visual halves ────────────────────────────
   A visual half whose image is absolutely filled has no intrinsic height,
   so it collapses to nothing once the split stacks. Give it one. */
  .bp-t .sec-split > div:not(.split-pane) { min-height: 400px; }
  .bp-m .sec-split > div:not(.split-pane) { min-height: 250px; }

/* ── Stacked action rows ───────────────────────────────────
   grid-flow-auto drops to one column below 1024; its trailing button
   would stretch the full width, so keep it hugging its label. */
  .bp-t .grid-flow-auto > a, .bp-t .grid-flow-auto > button { justify-self: start; width: auto; align-self: start; }

/* ── Logo bar ──────────────────────────────────────────────
   One knob per breakpoint for the client wordmarks and their marks. */
[data-screen-label^="Logo Bar"] { --bb-logo: 20px; }
.bp-t [data-screen-label^="Logo Bar"] { --bb-logo: 16px; }
.bp-m [data-screen-label^="Logo Bar"] { --bb-logo: 12px; }
[data-screen-label^="Logo Bar"] .bb-track span, [data-screen-label^="Logo Bar"] .bb-grid span { font-size: var(--bb-logo) !important; }
[data-screen-label^="Logo Bar"] .bb-track svg, [data-screen-label^="Logo Bar"] .bb-grid svg { width: var(--bb-logo) !important; height: var(--bb-logo) !important; }

/* ── Absolutely-positioned visual halves ───────────────────
   Some split modules pin their visual to the section corner. That works
   beside the copy, but leaves the flow entirely once the grid stacks —
   so rejoin it as a normal cell at tablet and below. */

/* was @media (max-width: 1024px) */
  .bp-t .abs-visual {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 560px !important;
  }
  /* Full width at tablet — the 560px cap left the coverage map floating small. */
  .bp-t:not(.bp-m) .abs-visual { max-width: none !important; }

/* ── Form section ──────────────────────────────────────────
   Desktop pins this full-viewport under the nav. That cannot scroll on a
   phone, so below 1024 it rejoins the flow and clears the fixed nav itself. */

/* was @media (max-width: 1024px) */
  .bp-t .sec--form {
    position: static !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    height: auto !important;
    padding: 170px var(--gutter) 72px !important;
  }
/* was @media (max-width: 640px) */
  .bp-m .sec--form { padding: 150px var(--gutter) 56px !important; }
  /* Form card's own inset — 80px sides is most of a phone screen */
  .bp-m .sec--form > div { padding: 24px 16px !important; }

/* The Close was viewport-pinned because the panel it closes was too. Once the
   panel scrolls, the Close has to travel with it. */
/* was @media (max-width: 1024px) */
  .bp-t .form-close {
    position: absolute !important;
    top: 182px !important;
    right: 60px !important;
    /* Now on the light card, not the navy ground — invert to the DS tertiary
       treatment (1px neutral border, Midnight glyph). 44px target unchanged. */
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    color: #1F2937 !important;
  }
  .bp-t .form-close svg { stroke: #1F2937 !important; }
  .bp-t .form-close:hover { border-color: #9CA3AF !important; background: #FFFFFF !important; }
/* was @media (max-width: 640px) */
  .bp-m .form-close { top: 160px !important; right: 32px !important; }

/* ── Breakpoint switcher (authoring affordance, not page content) ── */

.bp-switch {
  /* stacked above the existing 48px panel toggle at bottom:24 right:24 —
     sharing the corner trapped that button's clicks */
  position: fixed; right: 20px; bottom: 84px; z-index: 999;
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border: 1px solid #2B2F36; border-radius: 8px;
  background: rgba(20, 22, 26, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: Montserrat, system-ui, sans-serif;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 28px rgba(0,0,0,0.3);
}
.bp-btn {
  border: 0; border-radius: 6px; padding: 6px 11px;
  font-family: inherit; font-size: 11px; font-weight: 500; cursor: pointer;
  background: transparent; color: #9CA3AF;
  transition: background 140ms cubic-bezier(0.2,0,0,1), color 140ms cubic-bezier(0.2,0,0,1);
}
.bp-btn:hover { color: #E5E7EB; }
.bp-btn[data-on="yes"] { background: #F3F4F6; color: #14161A; }
.bp-switch[data-hidden="yes"] { display: none; }

@media print { .bp-switch { display: none !important; } }

/* ── Hero copy measure ─────────────────────────────────────
   Width as a percentage of the hero's padded content box, per
   breakpoint. Set from the Home page's Tweaks panel. */

.hero-measure { width: var(--hero-w-d); max-width: 100%; }
/* The headline can span the full measure; body copy stays inside the design
   system's ~640-750px reading length. Below 1024 the gutter governs instead. */
.hero-measure > p { max-width: var(--hero-copy-w); }
.bp-t .hero-measure > p { max-width: 100%; }
.bp-t .hero-measure { width: var(--hero-w-t); }
.bp-m .hero-measure { width: var(--hero-w-m); }

/* ── Button sizing per breakpoint ──────────────────────────
   Desktop values stay inline on each button (two sizes in use:
   14px/28px at 15px type, and 13px/26px at 15px type).
   Tablet deliberately mirrors desktop — no rules here.
   Mobile is the only override. */

.bp-m .btn-primary-dark,
.bp-m .btn-primary-light,
.bp-m .btn-secondary-dark,
.bp-m .btn-secondary-light,
.bp-m .btn-ignite,
.bp-m .btn-line {
  padding: 12px 22px !important;
  font-size: 14px !important;
  min-height: 44px !important;   /* touch target floor */
  box-sizing: border-box !important;
}
.bp-m .btn-primary-dark svg,
.bp-m .btn-primary-light svg,
.bp-m .btn-secondary-dark svg,
.bp-m .btn-secondary-light svg,
.bp-m .btn-ignite svg,
.bp-m .btn-line svg { width: 15px !important; height: 15px !important; }

/* 2026 Reliability Report kill switch — driven by the showReport prop on each page. */
html.no-report [data-report] { display: none !important; }

/* Privacy / Terms kill switch — driven by the showLegal prop on each page. */
html.no-legal [data-legal] { display: none !important; }