/* ============================================================
   system-svc249.css
   Loaded LAST on every page so it wins the cascade.

   Two jobs:
   1. Reveal system consolidation. Three overlapping scroll reveal
      systems (rr-reveal, rdn-reveal-up, rdn-rise) shipped on the same
      elements. On battery-storage.html four sections resolved to
      opacity:0 in production, 6.3 of 16.8 screens, 37.5% of the page.
      rdn-rise is now the only animator. The other two never hide
      anything again. A visibility floor makes permanent content loss
      impossible even if an observer fails.
   2. Design tokens. Measured entropy before this file: 25 type sizes,
      68 line heights, 58 text colours, 15 navies on index.html.
      Canonical scales declared here for all future work.
   ============================================================ */

/* ---------- 1. REVEAL: rr-reveal and rdn-reveal-up are retired ---------- */
/* These two systems no longer control visibility at all. They keep their
   classes so no markup or JS breaks, but they can never hide content. */
.rr-reveal,
.rr-reveal--in,
.rdn-reveal-up,
.rdn-reveal-up--in{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* ---------- 2. REVEAL: rdn-rise is the single animator ---------- */
/* Unlocked state is a hard floor. If the observer fires, this is a no-op.
   If the observer fails, the rdn-rise-safe class below rescues it. */
.rdn-rise.rdn-rise--in,
.rdn-rise.rdn-rise--in [data-rise-child]{
  opacity:1 !important;
  transform:none !important;
}

/* JS failsafe target. reveal-failsafe-svc249.js adds this to any
   .rdn-rise still hidden 2.5s after load. */
.rdn-rise-safe,
.rdn-rise-safe [data-rise-child]{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* No JS at all: nothing may be hidden. */
.no-js .rdn-rise,
.no-js .rdn-rise [data-rise-child]{
  opacity:1 !important;
  transform:none !important;
}

@media (prefers-reduced-motion: reduce){
  .rdn-rise, .rdn-rise [data-rise-child]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ---------- 3. FONT: kill the ui-sans-serif fallback leak ---------- */
/* .cc-step__num asked for 'Satoshi', which this site never loads with
   @font-face, so it fell through to ui-sans-serif. That was the 5th
   font family measured on ev-charger.html. */
.cc-step__num{
  font-family:'Satoshi','Cabinet Grotesk',system-ui,-apple-system,sans-serif;
}

/* ---------- 4. DESIGN TOKENS, canonical scales ---------- */
/* Every new rule from svc249 forward draws from these. No new literals. */
:root{
  /* navy, 4 tiers. Was 15 distinct values on index.html. */
  --rdn-navy-900:#081127;
  --rdn-navy-800:#0d1b2e;
  --rdn-navy-700:#152338;
  --rdn-navy-600:#1d2f4a;

  /* amber, 2. green, 2. grey, 2. off-white, 2. */
  --rdn-amber:#f5a524;
  --rdn-amber-hi:#f7b23a;
  --rdn-green:#4ade80;
  --rdn-green-hi:#7ef2a6;
  --rdn-grey:#8a94a6;
  --rdn-grey-hi:#c7d0dd;
  --rdn-white:#f4f6fb;
  --rdn-white-dim:#c7d0dd;

  /* type, 8 sizes. Was 25 on index.html. */
  --rdn-t-xs:0.75rem;
  --rdn-t-sm:0.875rem;
  --rdn-t-base:1rem;
  --rdn-t-md:1.125rem;
  --rdn-t-lg:1.375rem;
  --rdn-t-xl:1.75rem;
  --rdn-t-2xl:2.25rem;
  --rdn-t-3xl:clamp(2.25rem,7vw,3.25rem);

  /* weight, 3. Was 6. */
  --rdn-w-reg:400;
  --rdn-w-med:600;
  --rdn-w-bold:700;

  /* line height, 5. Was 68 on index.html. */
  --rdn-lh-tight:1.1;
  --rdn-lh-head:1.2;
  --rdn-lh-snug:1.35;
  --rdn-lh-body:1.55;
  --rdn-lh-loose:1.7;

  /* spacing, 6 steps. Was 41 distinct gaps on index.html. */
  --rdn-s-1:0.5rem;
  --rdn-s-2:0.75rem;
  --rdn-s-3:1rem;
  --rdn-s-4:1.5rem;
  --rdn-s-5:2.5rem;
  --rdn-s-6:4rem;

  /* radius, 3. Was 20. */
  --rdn-r-sm:8px;
  --rdn-r-md:14px;
  --rdn-r-lg:22px;

  /* shadow, 2. Was 36. */
  --rdn-sh-1:0 1px 2px rgba(8,17,39,0.18);
  --rdn-sh-2:0 14px 40px rgba(8,17,39,0.32);
}

/* ---------- 5. SVG text inherits the brand font ---------- */
/* 8 <text> nodes on ev-charger.html had no font declared, so they fell
   through to the browser default ui-sans-serif. That was the 4th family
   measured on that page. SVG does not inherit font-family from body. */
svg text,
svg tspan{
  font-family:'Satoshi','Cabinet Grotesk',system-ui,-apple-system,sans-serif;
}

/* ==========================================================================
   svc250  TOKEN ADOPTION
   The site already had a token scale, --fs-1 to --fs-8, --sp-*, --radius-*,
   6,889 var() uses deep. Its only flaw was that it stopped at 1.125rem, so
   every heading above 18px had been retyped by hand: 32 distinct plain rem
   sizes and 218 distinct clamp expressions. This block EXTENDS that scale
   upward instead of starting a competing one.

   Everything is redeclared here, including the tokens raydn.css already
   defines, because raydn.css loads on only 78 of 86 pages. This file loads on
   all 86, so declaring here guarantees every var() resolves everywhere.
   Values match the existing definitions exactly, so no page changes.

   Shadows deliberately use new names --sh-1/2/3. --shadow-sm/md/lg could not
   be reused: they are defined twice with different meanings, navy 0.08 in one
   file and black 0.45 in another, so the name is not trustworthy.
   ========================================================================== */
:root{
  /* body and UI scale, unchanged, redeclared for the 8 pages missing raydn.css */
  --fs-1:.6875rem;  --fs-2:.6875rem; --fs-3:.75rem;   --fs-4:.75rem;
  --fs-5:.875rem;  --fs-6:.875rem; --fs-7:1rem;     --fs-8:1.125rem;

  /* NEW: static heading steps, 20px to 40px */
  --fs-9:1.25rem;  --fs-10:1.375rem; --fs-11:1.5rem; --fs-12:1.75rem;
  --fs-13:2rem;    --fs-14:2.25rem;  --fs-15:2.5rem;

  /* NEW: fluid display steps. Mins deliberately sit at or below the mins that
     were already dominant, so the mobile rendering shrinks or holds, never
     grows. --fs-h1 and --fs-hero are the two most used existing expressions
     kept verbatim, 160 of 612 clamp uses, so those do not move at all. */
  --fs-lead:clamp(1rem,2.4vw,1.3rem);
  --fs-h3:clamp(1.4rem,3.4vw,2.1rem);
  --fs-h2:clamp(1.6rem,4.2vw,2.5rem);
  --fs-h1:clamp(1.8rem,5vw,3.2rem);
  --fs-hero:clamp(2.5rem,4.5vw,4.5rem);

  /* NEW: line height scale. 1 and 0 stay literal, both are functional. */
  --lh-1:1.1; --lh-2:1.25; --lh-3:1.35; --lh-4:1.55; --lh-5:1.7;

  /* spacing, existing values, plus three smaller steps that were missing and
     were the reason 800 odd sub .5rem gaps had been hand typed */
  --sp-xs:.25rem; --sp-sm:.375rem; --sp-1:.5rem; --sp-15:.75rem;
  --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-5:2.5rem;
  --sp-6:3rem; --sp-8:4rem;

  /* radii, existing values, plus an explicit pill */
  --radius:.5rem; --radius-md:.625rem; --radius-lg:.875rem;
  --radius-xl:1.25rem; --radius-pill:999px;

  /* three elevations, navy tinted, on palette */
  --sh-1:0 2px 8px rgba(8,17,39,.18);
  --sh-2:0 8px 24px rgba(8,17,39,.26);
  --sh-3:0 16px 44px rgba(8,17,39,.34);
}

/* ==========================================================================
   svc251  COLOUR AND EDGE DISCIPLINE
   Measured on the five money pages before this pass: 105 distinct text
   colours, including 17 different opacities of plain white and 12 different
   ambers, plus 45 distinct border treatments on index alone, 10 of which were
   white hairlines doing one visual job. That is what "too busy" is, counted.

   One ramp replaces all of it. Reds, blues and indigos are deliberately NOT
   remapped: the reds are pre existing form validation and data viz, which are
   out of scope, and recolouring a blue info state to grey would delete
   meaning rather than noise.
   ========================================================================== */
:root{
  /* text, on dark surfaces */
  --c-1:#ffffff;          /* primary */
  --c-2:#c7d0dd;          /* secondary */
  --c-3:#8a94a6;          /* muted */
  /* text, on light surfaces */
  --c-ink:#0d1b2e;        /* primary */
  --c-ink-2:#5a687a;      /* muted, 4.6 to 1 on white */
  /* accents */
  --c-amber:#f5a524;
  --c-amber-2:#f7b23a;
  --c-amber-dk:#8a5a00;   /* amber that has to sit on a light surface */
  --c-green:#4ade80;
  --c-green-dk:#0e6b3c;   /* canonicalized on the dominant existing value, 27 uses, 6.3 to 1 on off white */

  /* edges. Three neutral levels, not one, because a focus ring and a divider
     are not the same job and flattening them loses an accessibility cue. */
  --bd-1:rgba(255,255,255,.09);   /* divider */
  --bd-2:rgba(255,255,255,.20);   /* card edge */
  --bd-3:rgba(255,255,255,.42);   /* emphasis and focus */
  --bd-amber:rgba(245,165,36,.26);
  --bd-amber-2:rgba(245,165,36,.45);
  --bd-green:rgba(74,222,128,.30);
  --bd-ink:rgba(13,27,46,.10);    /* edges on light surfaces */
}

/* --------------------------------------------------------------------------
   svc251 FIX, unreadable vendor cards inside the battery-storage accordion
   Root cause, found with CSS.getMatchedStylesForNode, not by eye:
   .rr-accordion--cream in raydn.css is a DARK theme despite the name. Its
   panel is #0d1b2e and it correctly sets white headings and translucent
   glass cards. Three of the four sections inside that panel are navy.
   The fourth, .supply-chain, carries background:#fafaf5 from raydn.css,
   so it painted cream OVER the navy panel while the panel's white text
   rules still applied. Result, white on cream at 1.05 to 1: six vendor
   names, addresses and descriptions unreadable once the accordion opened.
   The section background is the outlier, so that is what gets corrected.
   Scoped to the accordion so a standalone .supply-chain stays light.
   Pre existing, not caused by the svc251 colour pass.
   -------------------------------------------------------------------------- */
.rr-accordion__panel .supply-chain{ background:#0d1b2e; }

/* Second layer of the same wildcard collision. [class*="-card"] also matches
   supply-card__tier, __name, __addr, __drive and __note, because each of
   those class names contains the substring "-card". Every line of text was
   therefore given the glass background and a 1px border, so each one drew
   its own box. Invisible while the section was cream, obvious on navy.
   The wildcard rule scores 0,4,0 so a plain override loses. Scoped tight
   to the card's own children instead of loosening the selector sitewide. */
.rr-accordion--cream .supply-card > *{
  background:transparent !important;
  border:0 !important;
}

/* --------------------------------------------------------------------------
   svc252 DENSITY, the two oversized RV sections are now collapsed
   rr-std-grid (10,339 bytes) and rv-edu-grid (21,691 bytes) sit inside a
   native details accordion on all 10 rv-*.html pages. Content stays in the
   DOM so it is still indexable, it just no longer costs 9.2 screens of
   scroll before a visitor reaches the quote form.
   GUARD, required: raydn.css sets .js-reveal .reveal{opacity:0} and the
   scroll observer cannot fire on a node inside a closed details, so anything
   with a reveal class would open invisible. Force it visible on open.
   -------------------------------------------------------------------------- */
.rr-accordion[open] .reveal{ opacity:1 !important; transform:none !important; }
.rr-accordion__panel > .rr-std-grid,
.rr-accordion__panel > .rv-edu-grid{ margin-top:0; }
.rr-accordion--ghost > .rr-accordion__panel{ padding:14px 0 6px; }

/* --------------------------------------------------------------------------
   svc252 FIX, the RV accordion bar was invisible on navy
   MEASURED before this rule, on rv-edmonton.html:
     section background rgb(13,27,46)
     .rr-accordion__title  rgb(21,35,56)  = 1.05:1, unreadable
     .rr-accordion__hint   rgb(13,27,46)  = 1.00:1, identical to the bg
     .rr-accordion__chev   rgb(13,27,46)  on rgba(20,32,54,.05), invisible
   Cause: the base bar styles in raydn.css assume a light surface. The ghost
   variant paints no background, so on a navy section the ink text sits on
   ink. Same failure family as the svc251 supply cards.
   Scoped to data-rr-accordion^="rv-" so only the 10 RV accordions change.
   -------------------------------------------------------------------------- */
[data-rr-accordion^="rv-"] > .rr-accordion__bar{
  background:rgba(255,255,255,.04);
  border:1px solid var(--bd-amber,rgba(245,165,36,.26));
  border-radius:14px;
  padding:14px 16px;
  min-height:56px;
  cursor:pointer;
  gap:12px;
}
[data-rr-accordion^="rv-"] > .rr-accordion__bar .rr-accordion__title{
  color:var(--c-1,#ffffff);
}
[data-rr-accordion^="rv-"] > .rr-accordion__bar .rr-accordion__hint{
  color:var(--c-3,#8a94a6);
}
[data-rr-accordion^="rv-"] > .rr-accordion__bar .rr-accordion__chev{
  background:var(--c-amber,#f5a524);
  color:var(--c-ink,#0d1b2e);
  border-radius:50%;
  flex:0 0 26px;
}
[data-rr-accordion^="rv-"][open] > .rr-accordion__bar{
  border-color:var(--bd-amber-2,rgba(245,165,36,.45));
  border-radius:14px 14px 0 0;
}

/* --------------------------------------------------------------------------
   svc252 DENSITY, galleries were stacking one per row on mobile
   MEASURED on rv-edmonton.html before this rule:
     .gallery-grid computed grid-template-columns = 351px, ie ONE column
     6 slots at 263px each, grid height 1640px = 1.94 screens for 6 photos
   res-jobs-svc203.css already fixes this with a 2 up grid, but it loads on
   exactly 1 of the 19 pages that use .gallery-grid (residential-electrical).
   The other 18 stack. This ports that proven pattern to all of them.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .gallery-grid{ grid-template-columns:1fr 1fr !important; }
  .gallery-grid .gallery-slot{ min-height:0 !important; }
  .gallery-grid .gallery-slot picture{
    display:block; aspect-ratio:4 / 3; overflow:hidden;
    border-radius:var(--radius-md,12px); background:#0f1f33;
  }
  .gallery-grid .gallery-slot img{
    width:100% !important; height:100% !important;
    object-fit:cover; display:block;
  }
}

/* --------------------------------------------------------------------------
   svc253 DENSITY, mobile section padding trim, 64px to 44px
   MEASURED across all 86 pages at a 390x844 viewport before this rule:
     .section / .town-section elements at exactly 64/64 : 447
     elements at any other value                        :   6
   FIRST ATTEMPT FAILED and this is why. Physical longhands were used, and
   CDP CSS.getMatchedStylesForNode showed the winner is
       section.section,div.section{padding-block:var(--section-pad) !important}
   in raydn.css. A non important padding-top cannot beat an important
   padding-block, so 402 of 447 sections ignored the trim while .town-section,
   which has no such rule, accepted it.
   THE FIX. Override the token instead of fighting the declaration.
   raydn.css defines --section-pad: clamp(4rem,8vw,7rem), which at a 390px
   viewport resolves to the 4rem floor, ie 64px. Setting the token to 44px
   inside the mobile query lets the existing important rule apply the new
   value, and every consumer of the token follows with no specificity war.
   raydn-bill.css and raydn-privacy.css define the same token at
   clamp(3rem,7vw,5.5rem), ie 48px, on my-own-bill.html and privacy.html.
   This file loads last so those become 44px too, still a reduction.
   Mobile only. Desktop rhythm is untouched.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  :root{ --section-pad:44px; }
  .town-section{ padding-top:44px; padding-bottom:44px; }
}

/* --------------------------------------------------------------------------
   svc254 GLYPH FIX, check-list bullets rendered as a prohibition sign
   The bullet faked a checkmark with a 45 degree gradient of TWO PARALLEL
   BARS, so it painted a green circle with a diagonal slash through it, the
   universal "not allowed" symbol, sitting beside positive benefit lines like
   "Both carry 25-year warranties" and "zero roof penetrations, zero leak
   paths". Confirmed by rendering at 4x on roofing-partnership.html, not by
   reading the CSS. Origin rule is a single declaration; this file loads last
   on all 86 pages so overriding background-image is enough and the origin
   file is left untouched. Stroke is the approved green #7ef2a6.
   Affects 6 files: roofing-partnership, battery-storage, panel-upgrade,
   solar-scams-edmonton, solar-recycling-fee-alberta, panel-upgrade-edmonton.
   -------------------------------------------------------------------------- */
.check-list li::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ef2a6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px 12px;
  background-position:center;
  background-repeat:no-repeat;
}

/* --------------------------------------------------------------------------
   svc256. Completing the svc249 supply-chain correction.
   svc249 repainted .supply-chain navy inside the accordion panel and fixed
   the .supply-card__* text, but left the three SECTION HEADER rules on their
   original light theme values, because those live on .supply-chain itself
   rather than on a "-card" class and so were outside that pass.
   Measured on battery-storage.html at 390 wide, data-theme="dark":
     h2.section-title   var(--c-ink) #0d1b2e on #0d1b2e   contrast 1.00 to 1
     p.supply-chain__lede           #3d4f68 on #0d1b2e   contrast 2.07 to 1
     p.label            var(--c-amber-dk)     on #0d1b2e  contrast 2.92 to 1
   The heading "Your battery is already in Alberta" was literally invisible.
   Specificity must beat [data-theme="dark"] .section.supply-chain .x at 0,4,0,
   so these are 0,5,0. Scoped to the accordion panel to match how svc249
   scoped the background, so a standalone cream .supply-chain keeps dark text.
   -------------------------------------------------------------------------- */
[data-theme="dark"] .rr-accordion__panel .section.supply-chain .section-title{ color:#f4f6fb; }
[data-theme="dark"] .rr-accordion__panel .section.supply-chain .label{ color:#f5a524; }
[data-theme="dark"] .rr-accordion__panel .section.supply-chain .supply-chain__lede{ color:#c7d0dd; }

/* ===== svc257 bill streak, swipeable month gallery =====
   Navy cards deliberately sit on the light rr-billproof panel. Green #4ade80
   on navy #0d1b2e measures about 9:1. The same green on white measures 1.6:1,
   which would have added to the existing contrast debt. Do not lighten these
   cards without re-running the contrast checker. */
.bstk{max-width:1080px;margin:clamp(1.6rem,4vw,2.4rem) auto 0}
.bstk__head{text-align:center;margin:0 auto clamp(1rem,2.5vw,1.5rem);max-width:44ch}
.bstk__kicker{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:#b26a00;margin:0 0 .5rem}
.bstk__h{font-family:'Cabinet Grotesk','Satoshi',system-ui,sans-serif;font-weight:800;color:var(--c-ink,#0d1b2e);
 font-size:clamp(1.35rem,3.4vw,1.95rem);line-height:1.18;letter-spacing:-.01em;margin:0}
.bstk__sub{color:#3d4f68;font-size:.98rem;line-height:1.6;margin:.6rem 0 0}
.bstk__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
 padding:4px 18px 18px;margin:0 -18px;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.bstk__track::-webkit-scrollbar{display:none}
.bstk__track.is-drag{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.bstk__card{scroll-snap-align:center;flex:0 0 86%;max-width:400px;position:relative;overflow:hidden;display:flex;flex-direction:column;
 background:linear-gradient(168deg,#152338,#0d1b2e 62%);border:1px solid rgba(255,255,255,.09);
 border-radius:20px;padding:22px 20px 20px;color:#f4f6fb;text-align:left}
.bstk__card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#f5a524,transparent)}
.bstk__per{font-size:.72rem;color:#8a94a6;letter-spacing:.05em;font-weight:600;text-transform:uppercase}
.bstk__mon{font-family:'Cabinet Grotesk','Satoshi',system-ui,sans-serif;font-weight:800;font-size:1.5rem;margin:.15rem 0 .9rem;
 letter-spacing:-.01em;color:#f4f6fb;font-weight:700;line-height:1.15}
.bstk__big{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.bstk__amt{font-family:'Cabinet Grotesk','Satoshi',system-ui,sans-serif;font-weight:800;color:#4ade80;
 font-size:clamp(2.3rem,10vw,3.1rem);line-height:1;letter-spacing:-.02em}
.bstk__cr{font-size:.68rem;font-weight:700;color:#7ef2a6;border:1px solid rgba(74,222,128,.4);
 border-radius:5px;padding:3px 7px;letter-spacing:.09em;white-space:nowrap}
.bstk__cap{color:#c7d0dd;font-size:.85rem;margin:.55rem 0 0;line-height:1.5}
.bstk__rows{margin-top:1.05rem;flex:0 0 auto;border-top:1px solid rgba(255,255,255,.08);padding-top:.85rem;display:grid;gap:.55rem}
.bstk__row{display:flex;justify-content:space-between;gap:12px;font-size:.845rem;align-items:baseline}
.bstk__row>span:first-child{color:#8a94a6}
.bstk__row>span:last-child{font-variant-numeric:tabular-nums;font-weight:600;color:#f4f6fb}
.bstk__row--tot{border-top:1px solid rgba(255,255,255,.08);padding-top:.7rem;margin-top:.2rem;font-size:.94rem}
.bstk__row--tot>span:last-child{color:#4ade80;font-weight:700}
.bstk__delta{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:rgba(74,222,128,.11);
 border:1px solid rgba(74,222,128,.28);color:#7ef2a6;font-size:.73rem;font-weight:700;
 border-radius:999px;padding:5px 11px;margin-top:1rem}
.bstk__up{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid #7ef2a6}
.bstk__proof{display:block;width:100%;margin-top:auto;background:rgba(245,165,36,.1);
 border:1px solid rgba(245,165,36,.32);color:#f7b23a;font:600 .82rem/1 var(--font-ui,Inter),system-ui,sans-serif;
 padding:11px;border-radius:11px;text-align:center;margin-bottom:0;text-decoration:none;transition:background .18s}
.bstk__proof:hover,.bstk__proof:focus-visible{background:rgba(245,165,36,.18);color:#f7b23a}
.bstk__card--next{background:linear-gradient(168deg,#101d31,#0a1526 62%);border-style:dashed;
 border-color:rgba(245,165,36,.3);display:flex;flex-direction:column;align-items:center;
 justify-content:center;text-align:center;gap:.6rem;min-height:320px}
.bstk__card--next::before{display:none}
.bstk__n1{font-family:'Cabinet Grotesk','Satoshi',system-ui,sans-serif;font-size:1.25rem;color:#f5a524;font-weight:700}
.bstk__n2{color:#8a94a6;font-size:.86rem;line-height:1.55;max-width:26ch}
.bstk__dots{display:flex;gap:7px;justify-content:center;margin-top:.2rem}
.bstk__dot{width:7px;height:7px;border-radius:50%;background:rgba(13,27,46,.18);transition:.28s}
.bstk__dot.is-on{background:#b26a00;width:22px;border-radius:4px}
.bstk__hint{text-align:center;color:#5a6a80;font-size:.76rem;margin:.8rem 0 0;letter-spacing:.04em}
@media(min-width:700px){
 .bstk__card{flex:0 0 46%}
 .bstk__card--next{min-height:0}
 .bstk__track{align-items:stretch}
}
@media(prefers-reduced-motion:reduce){.bstk__track{scroll-behavior:auto}}

/* svc257 dark variant. my-own-bill.html sits on navy, where the light panel
   heading colours would be invisible. Cards lift a shade so they still read
   as raised objects against the section behind them. */
.bstk-sec{background:var(--navy,#0d1b2e);padding:clamp(2.6rem,7vw,4.2rem) clamp(1rem,4vw,2rem) 0}
.bstk--dark .bstk__h{color:#f4f6fb}
.bstk--dark .bstk__sub{color:#c7d0dd}
.bstk--dark .bstk__kicker{color:#f7b23a}
.bstk--dark .bstk__hint{color:#8a94a6}
.bstk--dark .bstk__dot{background:rgba(255,255,255,.22)}
.bstk--dark .bstk__dot.is-on{background:#f5a524}
.bstk--dark .bstk__card{background:linear-gradient(168deg,#1c2e47,#14243a 62%);border-color:rgba(255,255,255,.13)}
.bstk--dark .bstk__card--next{background:linear-gradient(168deg,#152338,#0f1e30 62%)}

/* ============================================================
   svc258 bill proof density pass.
   The section ran 2,372px on a 390px phone as three stacked blocks. The stat row
   is deleted (its three figures all repeated the H2 and card one), the bill photo
   moved inside card one, and the line items and the scan now sit behind a tap so
   an idle card is short. Cards stay navy: green #4ade80 on navy #0d1b2e is about
   9:1, the same green on the light billproof panel is 1.6:1, so navy is the only
   accessible home for these numbers.
   ============================================================ */
.rr-billproof__inner--solo{grid-template-columns:1fr !important}
.rr-billproof__inner--solo .rr-billproof__copy{max-width:none}
.bstk__lead{text-align:center;margin:0 auto clamp(.9rem,2.4vw,1.35rem);max-width:40ch;
  color:#3d4f68;font-size:.95rem;line-height:1.55;font-weight:600}
/* flex-start so opening one card does not stretch the other two. min-height keeps
   the row looking even while every card is closed. */
.bstk__track{align-items:flex-start}
.bstk__card{min-height:250px}
.bstk__card--next{min-height:250px;justify-content:center}

/* the two things to press. segmented, amber on navy, 44px tall for thumbs. */
.bstk__tabs{display:flex;gap:8px;margin-top:auto;padding-top:1rem}
.bstk__tab{flex:1 1 0;min-height:44px;padding:.6rem .5rem;cursor:pointer;
  font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.01em;
  color:#f7b23a;background:rgba(245,165,36,.09);
  border:1px solid rgba(245,165,36,.34);border-radius:10px;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.bstk__tab:hover{background:rgba(245,165,36,.17);border-color:rgba(245,165,36,.55)}
.bstk__tab:focus-visible{outline:2px solid #f7b23a;outline-offset:2px}
.bstk__tab[aria-expanded="true"]{background:#f5a524;border-color:#f5a524;color:#0a1526}
.bstk__pane{margin-top:.9rem;animation:bstkFade .22s ease both}
@keyframes bstkFade{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bstk__pane{animation:none}}
.bstk__pane .bstk__rows{margin-top:0}
.bstk__soon{color:#8a94a6;font-size:.83rem;line-height:1.55;margin:0 0 .8rem}

/* the real bill photo, unchanged markup, re-fitted inside a navy card */
.bstk__pane .rr-billproof__figure{margin:0;padding:0;max-width:none}
.bstk__pane .rr-billproof__imglink{display:block;border-radius:10px;overflow:hidden;
  background:#f4f6fb;position:relative}
.bstk__pane .rr-billproof__figure img{width:100%;height:auto;display:block}
.bstk__pane .rr-billproof__cap{color:#8a94a6;font-size:.76rem;line-height:1.5;margin:.6rem 0 0;text-align:left}
.bstk__pane .rr-billproof__cap-em{color:#c7d0dd}
.bstk__pane .rr-billproof__cta{display:inline-flex;align-items:center;gap:.4rem;margin-top:.85rem;
  min-height:44px;padding:.55rem .95rem;border-radius:10px;font-size:.85rem;font-weight:700;
  color:#f7b23a;background:transparent;border:1px solid rgba(245,165,36,.45);text-decoration:none}
.bstk__pane .rr-billproof__cta:hover{background:rgba(245,165,36,.14);border-color:#f5a524}
@media (min-width:760px){
  .bstk__card{flex:0 0 340px}
  .bstk__tab{font-size:.85rem}
}

/* svc258 fix pass, from a rendered check at 390 and 1280.
   1. .bstk__amt had proportional numerals, so "$109.98" measured 148px and
      "$114.10" measured 130px at the same 39px size. That 18px gap was enough for
      the "They owed me" chip to sit inline on one card and wrap under the other.
      Tabular numerals make every amount the same width, so the chip wraps the same
      way on every card, now and on next month's bill.
   2. Card two carries a delta chip card one does not, so it ran 340px against 292px
      on a phone and its tabs sat 48px lower. An equal min-height plus the existing
      margin-top:auto pins every card's tabs to the same line. Costs about 4px of
      section height because the tallest card already set the row height. */
.bstk__amt{font-variant-numeric:tabular-nums}
.bstk__card,.bstk__card--next{min-height:250px}
/* A hardcoded height would break the month a longer caption or a third chip lands,
   so the real equalising is measured at runtime in billstreak-svc257.js. This 250px
   is only the no-JS fallback. */