/* ==================================================================
   ZIP-Codes.com  LEARN-ABOUT ARTICLES  v5.1
   Loaded by learn-about/inc-template-header.asp, so it reaches every
   page built on that template and nothing else.

   WHY THESE PAGES DO NOT JUST USE THE PRODUCT TYPE SCALE
   product-system.v5.css sets `.zcp5 section{ font-size:.86rem }`. That
   is right for a product page, where the text is dense supporting copy
   around a buy box. It is wrong for a 1,000-word article: 13.8px body
   copy read in long runs is tiring, and these are pages people actually
   read rather than scan.

   So the article content stays in <div> wrappers, NOT <section>, which
   keeps it out of that rule entirely, and .lg-article sets a proper
   reading size here. Changing those wrappers to <section> would silently
   shrink the body copy on twelve pages - do not.
   ================================================================== */

/* ------------------------------------------------------------------
   ARTICLE BODY
   No max-width on the paragraphs. These pages interleave prose with
   full-width tables, map images and an interactive map, so a capped
   measure would leave the same dead gutter the TOS pages had - the
   content wrappers already constrain width via .container.
   ------------------------------------------------------------------ */
.zcp5 .lg-article{ font-size:1rem; line-height:1.75; color:#374151; }
.zcp5 .lg-article p{ margin:0 0 1.05rem; }
.zcp5 .lg-article li{ margin-bottom:.45rem; }

/* :where() ON PURPOSE - do not "tidy" this into a plain descendant
   selector.

   These rules have to reach every heading in an article, including ones
   inside components. Written as `.zcp5 .lg-article h4` they carry
   specificity (0,2,1) - IDENTICAL to `.zcp5 .zcp-code-panel > h4` in
   product-system.v5.css - and because learn.v5.css is linked after it,
   the tie broke this way and every component heading was repainted
   --zcp-ink. On the code panel that is #0f172a text on a #0f172a
   background: the sample-script headings vanished completely, and the
   hero's "Connection at a glance" went dark on navy.

   :where() contributes ZERO specificity, so these land at (0,0,1): they
   still beat the browser and Bootstrap defaults, and every component
   that states a colour of its own now wins as it should. */
:where(.zcp5 .lg-article) h2{
  font-size:1.5rem; font-weight:700; color:var(--zcp-ink);
  letter-spacing:-.015em; line-height:1.25; margin:0 0 .6rem;
}
:where(.zcp5 .lg-article) h3{
  font-size:1.12rem; font-weight:700; color:var(--zcp-ink);
  line-height:1.3; margin:1.6rem 0 .5rem;
}
:where(.zcp5 .lg-article) h4{
  font-size:1rem; font-weight:700; color:var(--zcp-ink); margin:1.3rem 0 .45rem;
}
/* The template's cards open with an <h2> then an <hr>. The rule is doing
   the job a margin should, and it lands too tight against the heading. */
.zcp5 .lg-article hr{
  border:0; border-top:1px solid var(--zcp-line);
  margin:.75rem 0 1.1rem; opacity:1;
}
.zcp5 .lg-article a{ color:#3b82f6; }

/* ...but a button is not a link. `.lg-article a` is 0,2,1 and beats
   `.zcp5 .zcp-cta` (0,2,0) on specificity, so any button placed inside the
   article had its text repainted blue - the FTP page's hero shipped with
   blue-on-green text and a blue ghost button on a dark band. Restated here
   at 0,3,0 so the button keeps its own text color. Add any new button class
   to this list rather than raising the specificity of the rule above. */
.zcp5 .lg-article .zcp-cta,
.zcp5 .lg-article .zcp-btn-ghost{ color:#fff; }
.zcp5 .lg-article .zcp-btn{ color:#3b82f6; }

/* ------------------------------------------------------------------
   PUBLISHED DATE
   Was `.updated`, right-aligned, 22px, in the Caveat script face, with
   the word "Published: " injected through a CSS ::before - so the label
   could not be selected, copied or read by anything that does not run
   CSS. It is now real text in the markup, in the hero, where a byline
   belongs. Kept small and quiet: it is provenance, not a headline.
   ------------------------------------------------------------------ */
.zcp5 .lg-pubdate{
  margin:.9rem 0 0; font-size:.76rem; color:#cbd5e1;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.zcp5 .lg-pubdate i{ opacity:.7; }
.zcp5 .lg-pubdate time{ font-variant-numeric:tabular-nums; }

/* The kick is a link back to the article index on these pages, so it
   needs to look like one without shouting. */
.zcp5 .zcp-hero .zcp-kick a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }
.zcp5 .zcp-hero .zcp-kick a:hover{ color:#fff; border-bottom-color:#fff; }

/* ------------------------------------------------------------------
   IN-PAGE JUMP NAV
   Pages hand-roll this as a row of .btn-outline-secondary pills. Those
   are navigation, not buttons - product-system.v5.css deliberately
   leaves .btn-outline-* alone for exactly this reason - so they are
   styled here into something quieter that still reads as a rail.
   ------------------------------------------------------------------ */
.zcp5 .top-below-nav{
  background:#fff; border-bottom:1px solid var(--zcp-line);
  padding:.45rem .75rem; gap:.3rem; flex-wrap:wrap;
}
/* BOTH variants. Pages hand-rolled this rail independently and picked
   different Bootstrap buttons for it - the maps page uses
   .btn-outline-secondary, the FTP page .btn-outline-primary - so the two
   rails looked nothing alike: quiet grey pills on one, blue-outlined
   blue-text buttons on the other. The rail is the same component doing
   the same job, so it gets the same treatment either way. */
.zcp5 .top-below-nav .btn-outline-secondary,
.zcp5 .top-below-nav .btn-outline-primary{
  border-color:transparent; color:var(--zcp-mut); background:transparent;
  font-size:.8rem; font-weight:600; border-radius:999px;
  padding:.3rem .8rem;
}
.zcp5 .top-below-nav .btn-outline-secondary:hover,
.zcp5 .top-below-nav .btn-outline-primary:hover{
  background:#f1f5f9; border-color:transparent; color:var(--zcp-ink);
}
.zcp5 .top-below-nav .btn-outline-secondary.active,
.zcp5 .top-below-nav .btn-outline-primary.active{
  background:#eff6ff; border-color:#dbeafe; color:#1d4ed8;
}
/* The FTP rail sits in a .secondary-nav wrapper with its own inline
   top offset; give it the same ground as the maps rail. */
.zcp5 #sub-nav-jump.secondary-nav{ background:#fff; }

/* ------------------------------------------------------------------
   FULL-WIDTH BANDS
   The articles were built as floating cards: every section was a
   `bg-light mx-3 rounded-4 my-4` panel, so the page read as a stack of
   eight detached tiles with the page background showing through the
   gaps. v5.1 elsewhere alternates full-bleed bands instead, which is
   what makes a long page scan as one document.

   Deliberately a <div>, not a <section> - see the note at the top of
   this file about `.zcp5 section{ font-size:.86rem }` shrinking article
   copy.
   ------------------------------------------------------------------ */
.zcp5 .lg-band{ background:#fff; padding:2.75rem 0; }
.zcp5 .lg-band.alt{ background:#f8fafc; }
.zcp5 .lg-band + .lg-band{ border-top:1px solid var(--zcp-line); }

/* ------------------------------------------------------------------
   MAP FIGURES
   Each map is a thumbnail linking to the full PNG, plus a full-size and
   a PDF download. Those were `.button blue` and `.button red` - two more
   colours competing on a page that already has a ten-colour map on it.
   Now both are .zcp-btn, and the icon carries the difference.
   ------------------------------------------------------------------ */
.zcp5 .lg-figure{ text-align:center; }
.zcp5 .lg-figure img{
  border:1px solid var(--zcp-line); border-radius:10px; background:#fff;
}
.zcp5 .lg-figure .zcp-btn{ margin:.5rem .25rem 0; font-size:.8rem; padding:.45rem .85rem; }

/* Reference tables. Left alone structurally - .sortableTbl is bound by
   the page's own sort script and Bootstrap owns the striping. */
.zcp5 .lg-article .table{ font-size:.86rem; }
.zcp5 .lg-article .table thead th{
  background:#f1f5f9; color:var(--zcp-ink); font-weight:600;
  border-bottom:2px solid var(--zcp-line); white-space:nowrap;
}
.zcp5 .lg-article .table td{ vertical-align:top; }

/* ------------------------------------------------------------------
   FTP SERVICES PAGE
   The one learn-about page built like a product page. It reuses the
   database-page components wholesale (.zcp-hero, .zcp-spec, .zcp-code,
   .zcp-manifest, .zcp-keynote, .zcp-qa, .zcp-contact); only these few
   joins need anything of their own.
   ------------------------------------------------------------------ */

/* This page's sections carry article prose, so they opt out of the
   product type scale the same way .lg-article does. Specificity (0,2,1)
   beats `.zcp5 section` at (0,1,1). */
.zcp5 .lg-article section{ font-size:1rem; line-height:1.7; }

/* Ports and credentials inside the hero spec panel. The panel is
   translucent white on navy, so a light code chip would punch a hole in
   it - tint from the panel's own surface instead. */
.zcp5 .zcp-spec code{
  background:rgba(255,255,255,.14); color:#fff;
  padding:.06rem .35rem; border-radius:4px;
  font-size:.82rem; white-space:nowrap;
}
.zcp5 .zcp-spec dd code + code{ margin-left:.2rem; }

/* Platform label beside a code tab's heading. */
.zcp5 .zcp-code-os{
  font-weight:400; font-size:.72rem; color:#94a3b8;
  border:1px solid #334155; border-radius:999px;
  padding:.05rem .5rem; margin-left:.5rem; white-space:nowrap;
}

/* FAQ group headings, between .zcp-qa lists. */
.zcp5 .ftp-qgroup{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--zcp-mut); font-weight:600; margin:1.75rem 0 .6rem;
}
.zcp5 .ftp-qgroup:first-of-type{ margin-top:1.25rem; }
.zcp5 .ftp-subhead{ font-size:1rem; font-weight:700; margin:1.9rem 0 .6rem; }

/* Ticked list inside the automation card. */
.zcp5 .ftp-tips{ list-style:none; margin:0 0 .9rem; padding:0; }
.zcp5 .ftp-tips li{
  position:relative; padding-left:1.4rem; margin-bottom:.45rem;
  font-size:.88rem; line-height:1.6; color:#374151;
}
.zcp5 .ftp-tips li::before{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:0; top:.1rem; font-size:.75rem; color:var(--zcp-go);
}

/* A manifest table nested in a trust card has no room for the card's own
   padding as well as its own. */
.zcp5 .zcp-trust-card .zcp-manifest{ border:0; margin:0; }
.zcp5 .zcp-trust-card .zcp-manifest table{ font-size:.8rem; }

/* Lead-in line ABOVE a code sample, as opposed to .zcp-code-note which
   trails it. Same dark ground, no top rule - a border here would read as
   a divider between the sentence and the command it introduces, which is
   the opposite of what it is doing. */
.zcp5 .zcp-code-lead{
  margin:0; padding:.15rem 1.1rem .5rem;
  font-size:.78rem; line-height:1.6; color:#94a3b8;
}
.zcp5 .zcp-code-lead b{ color:#e2e8f0; }
.zcp5 .zcp-code-lead code{
  background:rgba(255,255,255,.07); color:#e2e8f0;
  padding:.05rem .3rem; border-radius:3px; font-size:.72rem;
}
/* Consecutive trailing notes should read as one block, not a stack of
   banded strips. */
.zcp5 .zcp-code-note + .zcp-code-note{ border-top:0; padding-top:0; }

/* ------------------------------------------------------------------
   ARTICLE INDEX CARDS  (learn-about-zip-codes.asp)
   The whole card is the link. The old markup made only the title and a
   "Read More" button clickable, leaving most of the card dead to the
   pointer - and the button was the third blue thing competing for the
   eye in every tile.

   The date is shown because it was already being parsed into vDate and
   then discarded: an index of articles written between 2012 and 2025
   that hides when they were written reads as one undated pile.
   ------------------------------------------------------------------ */
.zcp5 .lg-cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1rem; align-items:stretch;
}
.zcp5 .lg-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--zcp-line); border-radius:10px;
  text-decoration:none; color:inherit;
  transition:border-color .13s ease, box-shadow .13s ease, transform .13s ease;
}
.zcp5 .lg-card:hover{
  border-color:#c7d2e0; box-shadow:0 4px 14px rgba(15,23,42,.09);
  transform:translateY(-2px); text-decoration:none;
}
.zcp5 .lg-card:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }

/* Fixed ratio, so a grid of mixed-size thumbnails still lines up. The
   old rule capped height at 100px and let every card set its own. */
.zcp5 .lg-card-img{ display:block; background:#f1f5f9; }
.zcp5 .lg-card-img img{
  display:block; width:100%; height:140px; object-fit:cover;
}
.zcp5 .lg-card-body{ display:flex; flex-direction:column; padding:.95rem 1.1rem 1.1rem; flex:1; }
.zcp5 .lg-card-date{
  display:block; font-size:.7rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--zcp-mut); margin-bottom:.3rem;
  font-variant-numeric:tabular-nums;
}
.zcp5 .lg-card-title{
  display:block; font-size:1rem; font-weight:700; line-height:1.3;
  color:var(--zcp-ink); margin-bottom:.4rem;
}
.zcp5 .lg-card:hover .lg-card-title{ color:#1d4ed8; }
/* CLAMPED, not clipped. Descriptions in _posts.json run from one line to
   a full paragraph, and .lg-card has overflow:hidden - so the longest of
   them were being sliced mid-sentence by the card edge ("...Click through
   each ZIP"). Four lines and an ellipsis ends every card deliberately
   instead, and keeps the row heights close enough to read as a grid. */
.zcp5 .lg-card-desc{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4;
  overflow:hidden;
  font-size:var(--zcp-fs-sm); line-height:1.55; color:var(--zcp-mut);
}

/* ------------------------------------------------------------------
   PROSE MEASURE  (.lg-prose)  - OPT IN, not automatic.

   Most learn-about pages interleave prose with tables, map figures and
   two-column rows, so they need the full container and a blanket cap
   would strand the wide content - the same dead-gutter the TOS pages
   had when the card stayed full width and only the text was capped.

   Pages that are nothing BUT prose have the opposite problem: at
   container width they set ~120 characters to the line. So the cap is a
   class a page opts into, and it goes on the CONTAINER so the column
   centres as a whole and no gutter opens beside it.
   ------------------------------------------------------------------ */
.zcp5 .lg-prose > .container{ max-width:52rem; }

/* ------------------------------------------------------------------
   FACTS & STATS TABLES  (.stats-band)
   zip-code-statistics.asp is a table page: five sortable tables, one of
   which stacks eleven "Top 10" lists as labelled rows inside a single
   table. Bootstrap's .table classes stay - jQuery tablesorter binds
   .sortableTbl and Bootstrap owns the striping - so this is polish only.
   ------------------------------------------------------------------ */
.zcp5 .stats-band h2{
  font-size:1.35rem; font-weight:700; color:var(--zcp-ink);
  letter-spacing:-.015em; margin:0 0 .35rem;
}
.zcp5 .stats-band > .container > div > p{
  font-size:var(--zcp-fs-sm); color:var(--zcp-mut); margin:0 0 1rem;
}
.zcp5 .stats-band .table{ font-size:.84rem; margin-bottom:0; }
.zcp5 .stats-band .table thead th{
  background:#f1f5f9; color:var(--zcp-ink); font-weight:600;
  border-bottom:2px solid var(--zcp-line); white-space:nowrap;
}
/* Figures are the point of this page, so they line up. */
.zcp5 .stats-band .table td[align="right"],
.zcp5 .stats-band .table th[align="right"]{
  font-variant-numeric:tabular-nums;
}
/* The sub-headings that split the stacked Top-10 table into its lists.
   They were plain table rows and read as data; they are section headers. */
.zcp5 .stats-band .table tr.label td,
.zcp5 .stats-band .table td.label{
  background:#eef2f7; border-top:2px solid var(--zcp-line);
}
.zcp5 .stats-band .table td.label h3{
  margin:0; font-size:.92rem; font-weight:700; color:var(--zcp-ink);
}
.zcp5 .stats-band .table td.indent{ padding-left:1.6rem !important; color:var(--zcp-mut); }
.zcp5 .stats-band .table a{ color:#1d4ed8; text-decoration:none; }
.zcp5 .stats-band .table a:hover{ text-decoration:underline; }
.zcp5 .stats-band .tool-tip{ color:#94a3b8; text-decoration:none; margin-right:.3rem; }

/* ------------------------------------------------------------------
   FACTS & STATS - PHASE 2 COMPONENTS
   ------------------------------------------------------------------ */
.zcp5 .stats-band .stats-sub{
  font-size:1.02rem; font-weight:700; color:var(--zcp-ink);
  margin:2rem 0 .35rem;
}
.zcp5 .stats-band .stats-note{
  font-size:var(--zcp-fs-sm); line-height:1.6; color:var(--zcp-mut);
  max-width:60rem; margin:0 0 1rem;
}
.zcp5 .stats-band .stats-note a{ color:#1d4ed8; }

/* First-digit spread. Drawn to scale against the largest band, so the
   inequality between prefixes is visible rather than asserted - the bar
   IS the fact. Percentages are of the national total, not of the max. */
.zcp5 .stats-bars{ list-style:none; margin:0 0 .5rem; padding:0; }
.zcp5 .stats-bars li{
  display:grid; grid-template-columns:3.6rem 1fr 5rem 3.5rem;
  align-items:center; gap:.6rem; padding:.22rem 0;
}
/* "0XXXX" rather than "0" - it is the first of FIVE digits, and the
   placeholder says so without a sentence. The site already writes it this
   way on the prefix-maps page. The significant digit carries the weight;
   the XXXX is quiet, so the column still scans as 0-9 down the page. */
.zcp5 .stats-bars .sb-key{
  font-size:.82rem; color:#94a3b8; text-align:left;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:-.02em; white-space:nowrap;
}
.zcp5 .stats-bars .sb-key b{ color:var(--zcp-ink); font-weight:700; font-size:.95rem; }
.zcp5 .stats-bars .sb-track{
  background:#e8edf3; border-radius:3px; height:.85rem; overflow:hidden;
}
.zcp5 .stats-bars .sb-fill{
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,#3b82f6,#1d4ed8);
}
.zcp5 .stats-bars .sb-val,
.zcp5 .stats-bars .sb-pct{
  font-size:.8rem; text-align:right; font-variant-numeric:tabular-nums;
}
.zcp5 .stats-bars .sb-val{ font-weight:600; color:var(--zcp-ink); }
.zcp5 .stats-bars .sb-pct{ color:var(--zcp-mut); }
@media (max-width:575.98px){
  .zcp5 .stats-bars li{ grid-template-columns:3.4rem 1fr 4.2rem; }
  .zcp5 .stats-bars .sb-pct{ display:none; }
}

/* Headline figures. Three across, one across when there is only one to
   make - a lone figure in a three-column grid reads as two missing. */
.zcp5 .stats-figs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:.9rem; margin:0 0 1rem;
}
.zcp5 .stats-figs.one{ grid-template-columns:minmax(0,26rem); }
.zcp5 .stats-figs > div{
  background:#fff; border:1px solid var(--zcp-line); border-radius:10px;
  border-top:3px solid #3b82f6; padding:1rem 1.1rem;
}
.zcp5 .stats-figs b{
  display:block; font-size:1.6rem; font-weight:700; line-height:1.1;
  color:var(--zcp-ink); font-variant-numeric:tabular-nums;
}
.zcp5 .stats-figs span{
  display:block; margin-top:.25rem;
  font-size:var(--zcp-fs-sm); line-height:1.45; color:var(--zcp-mut);
}
.zcp5 .stats-figs i{ font-style:italic; }

/* ------------------------------------------------------------------
   TOP-10 LIST GRID  (.stats-lists / .stats-list)
   Twelve lists used to be stacked inside ONE <table>, separated by
   <tr class="label"> rows carrying an <h3>. A table row is not a
   heading: it could not be linked to, it broke the sortable-table
   contract, and twelve in a single column could not be scanned.

   Each list is now its own table, two across. auto-fit rather than a
   fixed two, so the odd one out fills the row instead of stranding.
   ------------------------------------------------------------------ */
/* COLUMNS, NOT GRID. As a grid the row height is set by the tallest
   cell in that row, and the lists are not the same length - "Top 20 by
   Income" is twice the height of its neighbour, which left a half-screen
   hole under the shorter one. Multi-column flows each list directly under
   the previous one in its column, so there are no holes. Same reason
   .zcp-namelist uses columns in product-system.v5.css. */
.zcp5 .stats-lists{
  columns:2; column-gap:1.35rem; margin-top:1rem;
}
.zcp5 .stats-list{
  break-inside:avoid; page-break-inside:avoid;
  min-width:0; margin:0 0 1.35rem;
}
@media (max-width:991.98px){ .zcp5 .stats-lists{ columns:1; } }
.zcp5 .stats-list h3{
  font-size:.92rem; font-weight:700; color:var(--zcp-ink);
  margin:0 0 .45rem; line-height:1.35;
}
.zcp5 .stats-list h3 .tool-tip{ color:#94a3b8; margin-right:.25rem; }
.zcp5 .stats-list .table{ font-size:.8rem; margin-bottom:0; }
.zcp5 .stats-list .table thead th{
  background:#f1f5f9; color:var(--zcp-ink); font-weight:600;
  white-space:nowrap; border-bottom:2px solid var(--zcp-line);
}
.zcp5 .stats-list .table td{ padding:.3rem .5rem; }
.zcp5 .stats-list .table td[align="right"]{ font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------------
   PRODUCT PROMO BANDS  (.stats-promo)
   Replaces a dotted-border advert holding a 3-D render of a boxed
   product we do not ship in a box, floated with align="left" and
   cleared by an empty div, in a green used nowhere else.

   Each promo carries its OWN product's hero image - lg-05 for the U.S.
   database, lg-06 for Canadian - so the CTA looks like the page it
   leads to rather than like an advert bolted onto this one.
   ------------------------------------------------------------------ */
.zcp5 .stats-promo{
  position:relative; overflow:hidden; border-radius:12px;
  margin:1.75rem 0 .5rem; color:#fff; isolation:isolate;
}
.zcp5 .stats-promo .sp-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
/* Angled, so the text side stays near-opaque for contrast while the
   right lets enough of the image through to read as a photograph. */
.zcp5 .stats-promo .sp-veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,
    rgba(9,17,34,.95) 0%, rgba(9,17,34,.88) 38%, rgba(9,17,34,.52) 72%, rgba(9,17,34,.28) 100%);
}
.zcp5 .stats-promo .sp-body{ position:relative; z-index:2; padding:1.5rem 1.6rem; }
/* Hold the text to the opaque side of the gradient so the map stays
   legible on the right without ever running under the copy. */
@media (min-width:768px){
  .zcp5 .stats-promo .sp-body{ max-width:70%; }
}
.zcp5 .stats-promo .zcp-kick{ color:#7dd3fc; opacity:1; }
.zcp5 .stats-promo h3{
  margin:0 0 .4rem; font-size:1.3rem; font-weight:700; color:#fff;
  letter-spacing:-.015em;
}
.zcp5 .stats-promo p{
  margin:0 0 1rem; font-size:.88rem; line-height:1.6;
  color:#cbd5e1; max-width:46rem;
}
.zcp5 .stats-promo .sp-stats{
  list-style:none; display:flex; flex-wrap:wrap; gap:1.6rem;
  margin:0 0 1.15rem; padding:.9rem 0 0;
  border-top:1px solid rgba(255,255,255,.18);
}
.zcp5 .stats-promo .sp-stats b{
  display:block; font-size:1.15rem; font-weight:600; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.zcp5 .stats-promo .sp-stats span{ font-size:.7rem; opacity:.72; }
/* The Canadian promo takes the international accent so the two bands are
   distinguishable at a glance, the same way the catalog cards are. */
.zcp5 .stats-promo.f-intl .zcp-kick{ color:#c3e88d; }

/* lg-06 puts its subject - the flag and the word CANADA - just left of
   centre, which is exactly where this band is most opaque; lg-05 happens
   to sit right of centre, which is why the U.S. one needed nothing.
   Widening the image and anchoring it left slides that subject into the
   transparent side instead of cropping it away. */
@media (min-width:768px){
  .zcp5 .stats-promo.f-intl .sp-img{ width:138%; right:auto; }
}
@media (max-width:575.98px){
  .zcp5 .stats-promo .sp-body{ padding:1.15rem 1.1rem; }
  .zcp5 .stats-promo .sp-stats{ gap:1.1rem; }
}

/* Inline CTA inside a stats section. Lighter than .stats-promo, which is
   a full band with its own image - this one interrupts an argument to
   answer it, so it stays in the flow and reads as the conclusion of the
   paragraph above rather than as an advert dropped beside it. */
.zcp5 .stats-inline-cta{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem 1.5rem; flex-wrap:wrap;
  background:#fff; border:1px solid var(--zcp-line);
  border-left:3px solid #3b82f6; border-radius:8px;
  padding:.9rem 1.1rem; margin:.35rem 0 0;
}
.zcp5 .stats-inline-cta p{
  margin:0; font-size:var(--zcp-fs-sm); line-height:1.6;
  color:#374151; max-width:52rem; flex:1 1 22rem;
}
.zcp5 .stats-inline-cta p b{ color:var(--zcp-ink); }
.zcp5 .stats-inline-cta .zcp-btn{ white-space:nowrap; flex:none; }

/* Header row for the digit bars. Same grid as a data row so the labels
   sit over the columns they describe; the track cell is empty and hidden
   from assistive tech rather than removed, because dropping it would
   shift every following label one column left. */
.zcp5 .stats-bars .sb-head{ padding-bottom:.35rem; margin-bottom:.2rem; border-bottom:1px solid var(--zcp-line); }
.zcp5 .stats-bars .sb-head span{
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; color:var(--zcp-mut);
}
.zcp5 .stats-bars .sb-head .sb-key{ font-family:inherit; letter-spacing:.06em; }
.zcp5 .stats-bars .sb-head .sb-track{ background:none; height:auto; }