/* ===================================================================
   ACCOUNT SYSTEM v5.1
   Loaded AFTER product-system.v5.css. Product v5.1 is the base look;
   only account-specific rules live here.

   THE THREE RULES, same as the product system:
     1. Every selector begins .zcp5
     2. Never style site chrome (header, footer, #sub-nav)
     3. Class names used by JS are a contract - do not rename

   Account pages carry a lot of ported markup with its own colors.
   The job of this sheet is to REMOVE variety, not add it: one card,
   one table, one row, in the v5 palette.
   =================================================================== */


/* -------------------------------------------------------------------
   1. JUMP TARGETS

   The bar's "On this page" menu calls scrollIntoView(), which honors
   scroll-margin-top. Without this the sticky header and the bar both
   sit on top of whatever you jumped to.

   .anchor-scroll is already on every jump target on the dashboard, so
   this needs no markup change. The value is header + bar + a little
   air; --zcp-topnav-h is measured at runtime by product-system.v5.js.
   ------------------------------------------------------------------- */
.zcp5 .anchor-scroll{ scroll-margin-top:calc(var(--zcp-topnav-h, 76px) + 52px + 1rem); }


/* -------------------------------------------------------------------
   2. PAGE RHYTHM

   The bar is flush against the header; content needs to clear it.
   Matches the spacing the cart funnel settled on.
   ------------------------------------------------------------------- */
.zcp5 .account-body{ padding:1.75rem 0 3rem; }

@media (max-width: 767.98px){
  .zcp5 .account-body{ padding:1.25rem 0 2.25rem; }
}


/* -------------------------------------------------------------------
   3. ACCOUNT CARD  - the one card

   Replaces account-card / product-card / promo-card / mascot-card /
   tool-featured-card / api-featured-card / api2-featured-card, which
   between them brought about thirty hex colors to one page.

   Structure mirrors .cart-panel from the funnel so the two surfaces
   read as one product: white body, hairline border, navy head.
   ------------------------------------------------------------------- */
.zcp5 .ac-card{
  background:#fff;
  border:1px solid var(--zcp-line);
  border-radius:.9rem;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.18);
}

.zcp5 .ac-card > h3,
.zcp5 .ac-head{
  display:flex; align-items:center; gap:.55rem;
  margin:0;
  padding:.85rem 1.15rem;
  background:var(--zcp-navy);
  color:#fff;
  font-size:var(--zcp-fs-sm);
  font-weight:600;
  letter-spacing:.01em;
}
.zcp5 .ac-card > h3 i,
.zcp5 .ac-head i{ color:#8fa3c4; font-size:.85em; }

.zcp5 .ac-body{ padding:1rem 1.15rem 1.15rem; flex:1 1 auto; }

/* the row of label/value pairs that most account cards are made of */
.zcp5 .ac-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem;
  padding:.5rem 0;
  border-bottom:1px solid #f1f5f9;
}
.zcp5 .ac-row:last-child{ border-bottom:0; padding-bottom:0; }
.zcp5 .ac-label{ color:var(--zcp-mut); font-size:var(--zcp-fs-sm); }
.zcp5 .ac-value{
  color:var(--zcp-ink); font-size:var(--zcp-fs-sm); font-weight:600;
  text-align:right; overflow-wrap:anywhere;
}




/* height:100% belongs ONLY to cards that are grid items - it is what
   makes a row of dashboard cards line up. Applied to .ac-card generally
   it makes every card on a NORMAL flow page stretch to its container's
   full height, so the cards pile on top of one another and the footer
   gets shoved up the page. That is exactly what it did to
   account_order_details_past: a 70px order header measured 1048px. */
.zcp5 .ac-grid > * > .ac-card,
.zcp5 .ac-grid > .ac-card{ height:100%; }

/* -------------------------------------------------------------------
   4. STATUS

   Three states, and they are the same three the page already computes
   (expired / expiring under 90 days / active). Color carries meaning
   here, which is exactly where color is worth spending.

   Semantic only - these are NOT the accent, and nothing else on the
   page may use them decoratively.
   ------------------------------------------------------------------- */
.zcp5 .ac-badge{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.15rem .5rem;
  border-radius:999px;
  font-size:var(--zcp-fs-xs); font-weight:700;
  white-space:nowrap;
  border:1px solid transparent;
}
.zcp5 .ac-badge.active  { background:#eefaf0; color:#1f7a33; border-color:#c7ebd0; }
.zcp5 .ac-badge.expiring{ background:#fff7e8; color:#9a5b06; border-color:#f5dcae; }
.zcp5 .ac-badge.expired { background:#fdecec; color:#a32020; border-color:#f2c9c9; }


/* -------------------------------------------------------------------
   5. ACCOUNT HERO

   The art (hero-account-mesh) is rendered at the hero's own 5.8:1 and
   is already toned down to near-navy, so the shared veil's 70-92% is
   more suppression than it needs - at full strength the mesh arrives
   as flat haze. Lightened HERE ONLY, via .ac-hero, so no other page
   that uses .zcp-veil is touched.
   ------------------------------------------------------------------- */
.zcp5 .zcp-hero.ac-hero .zcp-veil{
  background:linear-gradient(rgba(9,17,34,.46) 0%,
                             rgba(9,17,34,.62) 52%,
                             rgba(9,17,34,.74) 100%);
}

/* The compact hero centres its kick, headline and sub-line, but .zcp-ctas
   defaults to flex-start - so the buttons sit left of centred text. The
   funnel fixes this in cart.v5.css, which account pages do not load, so
   the same rule is repeated here rather than reaching across stylesheets. */
.zcp5 .zcp-hero.compact .zcp-ctas{ justify-content:center; }


/* -------------------------------------------------------------------
   6. CARD INTERNALS

   Much of the ported markup puts content straight inside the card with
   no body wrapper, so padding is applied to whatever children turn up.
   This lets the seven old card classes collapse to .ac-card by RENAME
   alone, without restructuring several hundred lines of markup.
   ------------------------------------------------------------------- */
.zcp5 .ac-card > *:not(h3):not(.ac-head):not(.ac-body){
  padding-left:1.15rem; padding-right:1.15rem;
}
.zcp5 .ac-card > h3 + *:not(.ac-body),
/* .ac-head is a div, not an h3, so the sibling rule above missed it
   and the first row of product cards rode the navy bar. */
.zcp5 .ac-card > .ac-head + *:not(.ac-body){ padding-top:1rem; }
.zcp5 .ac-card > *:last-child{ padding-bottom:1.15rem; }
.zcp5 .ac-card > h3:last-child{ padding-bottom:.85rem; }


/* stat tiles - the 2x2 grid the API and tool cards are built from */
.zcp5 .ac-stats{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.6rem; margin:0 0 1rem;
}
.zcp5 .ac-stat{
  background:#f7f9fc; border:1px solid var(--zcp-line);
  border-radius:.55rem; padding:.6rem .7rem; min-width:0;
}
.zcp5 .ac-stat-l{
  display:block; color:var(--zcp-mut);
  font-size:var(--zcp-fs-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  margin-bottom:.15rem;
}
.zcp5 .ac-stat-v{
  display:block; color:var(--zcp-ink);
  font-size:1.05rem; font-weight:700; line-height:1.25;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.zcp5 .ac-stat-v small{ font-size:var(--zcp-fs-xs); font-weight:600; color:var(--zcp-mut); }
/* a stat holding a name or date rather than a figure */
.zcp5 .ac-stat.text .ac-stat-v{ font-size:var(--zcp-fs-sm); font-weight:600; }


/* -------------------------------------------------------------------
   7. USAGE METER

   "Credits used" and "credits remaining" are two halves of one ratio.
   Rendered as two separate figures the customer has to do the division
   themselves to answer the only question they actually have, which is
   how much is left. The bar answers it without reading either number.
   ------------------------------------------------------------------- */
.zcp5 .ac-meter{ margin:0 0 1rem; }
.zcp5 .ac-meter-top{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; margin-bottom:.35rem;
}
.zcp5 .ac-meter-v{
  font-size:1.05rem; font-weight:700; color:var(--zcp-ink);
  font-variant-numeric:tabular-nums;
}
.zcp5 .ac-meter-l{ font-size:var(--zcp-fs-xs); color:var(--zcp-mut); font-weight:600; }
.zcp5 .ac-meter-track{
  height:7px; border-radius:999px; background:#e8edf5; overflow:hidden;
}
.zcp5 .ac-meter-fill{
  height:100%; border-radius:999px; background:var(--zcp-accent);
  transition:width .4s ease;
}
/* the meter is the one place a warning color is earned on this card */
.zcp5 .ac-meter-fill.warn { background:#e8a33d; }
.zcp5 .ac-meter-fill.spent{ background:#c1443f; }


/* pills for version / status markers in a card head */
.zcp5 .ac-pill{
  display:inline-flex; align-items:center; gap:.25rem;
  margin-left:auto;
  padding:.1rem .45rem; border-radius:999px;
  font-size:var(--zcp-fs-xs); font-weight:700;
  background:rgba(255,255,255,.14); color:#dbe6f7;
  border:1px solid rgba(255,255,255,.22);
  white-space:nowrap;
}
.zcp5 .ac-pill + .ac-pill{ margin-left:.35rem; }
.zcp5 .ac-pill.new{ background:#f0b429; color:#2a1d00; border-color:#f0b429; }

/* The Products card wraps its heading together with the filter chips, so
   .ac-head carries the navy bar and the h3 inside it inherits. */
/* Some ported heads are h1 or h2, not h3 - account_orders titles its card
   with an h1, which sailed straight past a rule written for h3 only. */
.zcp5 .ac-head h1,
.zcp5 .ac-head h2,
.zcp5 .ac-head h3{
  margin:0; padding:0; background:none; color:inherit;
  font-size:var(--zcp-fs-sm); font-weight:600;
  display:inline-flex; align-items:center; gap:.55rem;
}
.zcp5 .ac-head h1 i,
.zcp5 .ac-head h2 i,
.zcp5 .ac-head h3 i{ color:#8fa3c4; font-size:.85em; }


/* -------------------------------------------------------------------
   8. THE CARD GRID

   Replaces the Bootstrap 12-column row the dashboard used to be.

   That row had to be filled exactly or the last line went ragged, so
   the page carried mascot and promo cards purely as spacers, picked by
   a four-branch scenario block. auto-fit removes the arithmetic: cards
   claim a column when they exist and the row closes itself when they
   do not, so no card can ever need a counterweight again.

   minmax(300px, 1fr) is what chooses the column count, not a
   breakpoint - three columns on a desktop, two around tablet width,
   one on a phone, with no media query doing the deciding.
   ------------------------------------------------------------------- */
.zcp5 .ac-grid{
  display:grid;
  gap:1.25rem;
  align-items:start;
  /* Explicit column counts, not auto-fit. The quantity rules further
     down have to know exactly how many columns there are, and auto-fit's
     count is implicit - it would guess wrong. Three is still the cap:
     wider than that and the spanning card stops looking primary. */
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .zcp5 .ac-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:1100px){
  .zcp5 .ac-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* Products carries the most content, so it spans. Spanning is declared
   by the card, not derived from how many siblings happen to exist. */
.zcp5 .ac-grid > .ac-wide{ grid-column:span 2; }

/*  The cards are two grids now, and a grid's gap only separates its own
    tracks - so the top row and the row below it sat flush against each
    other. This restates the same 1.25rem the gap uses, keeping the
    rhythm down the page even. */
.zcp5 .ac-top{ margin-bottom:1.25rem; }

@media (max-width: 767.98px){
  .zcp5 .ac-grid{ gap:1rem; }
  .zcp5 .ac-top{ margin-bottom:1rem; }
  /* a 2-column span in a 1-column grid would invent a second column */
  .zcp5 .ac-grid > .ac-wide{ grid-column:span 1; }
}


/* ---- closing short rows ------------------------------------------
   A card left alone on the final row stretches to close it.
   :last-child:nth-child(...) is a quantity query - "is the final card
   also at a position that starts a short row?" - so nothing in the ASP
   has to count how many cards are switched on, and it keeps working for
   combinations that do not exist yet.

   The two grids need different arithmetic because the lower one leads
   with Products spanning two columns, which offsets every position
   after it by one cell.                                              */

/*  TOP grid - every card is one cell.  */
@media (min-width:768px) and (max-width:1099.98px){
  .zcp5 .ac-top > .anchor-scroll:last-child:nth-child(odd){ grid-column:span 2; }
}
@media (min-width:1100px){
  .zcp5 .ac-top > .anchor-scroll:last-child:nth-child(3n+1){ grid-column:span 3; }
  .zcp5 .ac-top > .anchor-scroll:last-child:nth-child(3n+2){ grid-column:span 2; }
}

/*  LOWER grid - Products is first and spans 2, so N children occupy
    N+1 cells. Three columns: a last child at 3n sits at cell 3n+1 and
    is alone; at 3n+1 it leaves one gap beside it.  */
@media (min-width:1100px){
  .zcp5 .ac-grid:not(.ac-top) > .anchor-scroll:last-child:nth-child(3n){ grid-column:span 3; }
  .zcp5 .ac-grid:not(.ac-top) > .anchor-scroll:last-child:nth-child(3n+1){ grid-column:span 2; }
  /*  An only child is both first and last: the 3n+1 rule above would
      leave it spanning 2 of 3. It takes the whole row instead. */
  .zcp5 .ac-grid:not(.ac-top) > .anchor-scroll:first-child:last-child{ grid-column:span 3; }
}
/*  Two columns: Products fills row one on its own, so the remaining
    N-1 cards pair up. N even leaves the last one alone.  */
@media (min-width:768px) and (max-width:1099.98px){
  .zcp5 .ac-grid:not(.ac-top) > .anchor-scroll:last-child:nth-child(even){ grid-column:span 2; }
}


/* ===================================================================
   9. PORTED COMPONENTS

   These replace the page's 692-line inline <style> block. The markup is
   unchanged; only the styling moves here and into the v5 palette.

   The inline block used roughly thirty hex values across seven card
   vocabularies. What survives is the set that carries MEANING - the
   license states and the order states - and nothing else.
   =================================================================== */

/* ---- product rows ------------------------------------------------

   A license row used to state one fact four times - left border, badge,
   date, and a green chip reading "in 7808 days". Now: name, spec,
   ONE expiry phrase, one action. The border and the badge agree because
   both read the row's own data-status.

   The list is its own grid rather than a Bootstrap row so every card in
   a line is the same height, whatever mix of buttons it carries.
   ------------------------------------------------------------------- */
.zcp5 .pc-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:1.1rem;
}
@media (max-width: 575.98px){
  .zcp5 .pc-list{ grid-template-columns:1fr; }
}

.zcp5 .product-card{
  background:#fff;
  border:1px solid var(--zcp-line);
  border-left:3px solid #cbd5e1;
  border-radius:.6rem;
  padding:.85rem .9rem;
  margin:0;
  height:100%;
  display:flex; gap:.75rem; align-items:flex-start;
  transition:border-color .15s, box-shadow .15s;
}
.zcp5 .product-card:hover{
  border-color:#c3ccda;
  box-shadow:0 6px 18px -12px rgba(15,23,42,.35);
}
.zcp5 .product-item[data-status="active"]   .product-card{ border-left-color:#3d9c40; }
.zcp5 .product-item[data-status="expiring"] .product-card{ border-left-color:#e8a33d; }
.zcp5 .product-item[data-status="expired"]  .product-card{ border-left-color:#c1443f; }

.zcp5 .product-card .product-icon{
  flex-shrink:0; width:34px; height:34px; border-radius:.45rem;
  background:#eef2f8; color:#5b6675;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.zcp5 .product-card .product-info{
  flex:1; min-width:0;
  display:flex; flex-direction:column; height:100%;
}

/* name and state on one line, the badge pinned right so badges align
   down the column even when names wrap to different depths */
.zcp5 .pc-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:.5rem; margin-bottom:.15rem;
}
.zcp5 .product-card h4{
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
  margin:0; line-height:1.3; min-width:0;
}
.zcp5 .pc-top .ac-badge{ flex-shrink:0; }

.zcp5 .pc-spec{ font-size:var(--zcp-fs-xs); color:var(--zcp-mut); line-height:1.35; }
.zcp5 .pc-expiry{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  margin-top:.15rem;
}
/* the countdown is only ever printed while it is actionable, so when it
   IS printed it can afford to carry the row's color */
.zcp5 .product-item[data-status="expiring"] .pc-expiry{ color:#9a5b06; font-weight:600; }
.zcp5 .product-item[data-status="expired"]  .pc-expiry{ color:#a32020; font-weight:600; }

/* actions sit at the bottom, so buttons line up across a row of cards
   regardless of how tall the text above them ran */
.zcp5 .pc-actions{
  margin-top:auto; padding-top:.7rem;
  display:flex; flex-direction:column; align-items:stretch; gap:.4rem;
}
.zcp5 .pc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  width:100%; padding:.42rem .7rem;
  font-size:var(--zcp-fs-xs); font-weight:600; border-radius:.4rem;
}
.zcp5 .pc-link{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-size:var(--zcp-fs-xs); font-weight:600;
  color:var(--zcp-mut); text-decoration:none;
}
.zcp5 .pc-link:hover{ color:var(--zcp-ink); text-decoration:underline; }

/* ---- order history ----------------------------------------------- */
/*  The list fills whatever height the row gives it rather than capping
    at a fixed 400px, so Order History ends level with Products &
    Subscriptions beside it. height:0 + flex:1 means its own content
    does not set the row height - Products does - and min-height keeps
    it usable when Products is short. */
.zcp5 .order-history-list{
  height:0; flex:1 1 auto; min-height:15rem;
  overflow-y:auto;
}
.zcp5 .order-item{
  padding:.7rem .15rem; border-bottom:1px solid #f1f5f9; transition:background-color .15s;
}
.zcp5 .order-item:last-child{ border-bottom:0; }
.zcp5 .order-item:hover{ background-color:#f8fafc; }
.zcp5 .order-item .order-product{ font-size:var(--zcp-fs-sm); color:var(--zcp-ink); }
.zcp5 .order-item .order-amount{
  font-size:var(--zcp-fs-sm); font-weight:700; font-variant-numeric:tabular-nums;
}
.zcp5 .no-orders-message i{ opacity:.4; }

/* Order states. FOUR, not twelve - see func_account_ui.asp for why.

   Color marks what needs attention, not what once went wrong. On a
   real account the ten most recent orders were nine failures and one
   pending; painting all of that red made the card shout and taught the
   eye to discount red everywhere else on the page.

   So closed states (cancelled, refunded) are neutral: they are history,
   there is nothing to do about them. Only Declined and Charged Back -
   which a customer can still act on - are allowed to be loud.

   Same family as the license states above, so one page never teaches
   two color languages. */
.zcp5 .ac-badge.status-good     { background:#eefaf0; color:#1f7a33; border-color:#c7ebd0; }
.zcp5 .ac-badge.status-waiting  { background:#fff7e8; color:#9a5b06; border-color:#f5dcae; }
.zcp5 .ac-badge.status-attention{ background:#fdecec; color:#a32020; border-color:#f2c9c9; }
.zcp5 .ac-badge.status-closed   { background:#f1f5f9; color:#5b6675; border-color:#e2e8f0; }

/* ---- ZIP tool feature grid --------------------------------------- */
.zcp5 .tool-features-mini{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.5rem; margin:.9rem 0;
}
.zcp5 .tool-feature-item{
  background:#f7f9fc; border:1px solid var(--zcp-line); border-radius:.45rem;
  padding:.5rem .6rem; display:flex; align-items:center; gap:.45rem;
  font-size:var(--zcp-fs-xs);
}
.zcp5 .tool-feature-item i{ width:16px; text-align:center; color:var(--zcp-mut); }
.zcp5 .tool-feature-item span{ font-weight:600; line-height:1.2; }
@media (max-width: 575.98px){
  .zcp5 .tool-features-mini{ grid-template-columns:1fr; }
}

/* ---- FTP ---------------------------------------------------------- */
.zcp5 .ftp-setup-cta{
  background:#f7f9fc; border:1px dashed #b9c6d8; border-radius:.6rem;
  padding:1.4rem; text-align:center;
}
.zcp5 .ftp-setup-cta i{ opacity:.5; }
.zcp5 .ftp-setup-cta h4{ font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink); margin-bottom:.35rem; }
.zcp5 .ftp-setup-cta p{ font-size:var(--zcp-fs-xs); color:var(--zcp-mut); margin-bottom:1rem; }

.zcp5 .subscription-item{
  background:#f7f9fc; border:1px solid var(--zcp-line);
  border-left:3px solid #cbd5e1; border-radius:.5rem;
  padding:.85rem; margin-bottom:.85rem;
}
.zcp5 .subscription-item:last-child{ margin-bottom:0; }
.zcp5 .subscription-item h4{ font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink); margin-bottom:.45rem; }
.zcp5 .subscription-item .sub-details{ font-size:var(--zcp-fs-xs); color:var(--zcp-mut); }

/* order-date was never styled by the inline block either - it inherited
   whatever the card gave it. Made explicit rather than left to chance. */
.zcp5 .order-item .order-date{ font-size:var(--zcp-fs-xs); color:var(--zcp-mut); }

/* Order amounts were rendered .text-success - green - on EVERY row,
   including Declined and Cancelled ones. A declined $3,121.86 in
   success green reads as money received. The badge already carries the
   state, so the figure is just a figure. */
.zcp5 .order-item .order-amount{ color:var(--zcp-ink); font-weight:700; }


/* -------------------------------------------------------------------
   10. HOVER

   Same idea as the product pages (/api and zip-code-database.asp): the
   card under the pointer lifts and sharpens. Deliberately WEAKER here -
   2px rather than 3-5px, and a neutral shadow rather than a colored
   one - because a dashboard is a place you work, not a page you are
   being sold to, and nine cards all bouncing is noise.

   No sibling blur. On a marketing page dimming the other two tiers
   helps you compare; here the cards are unrelated tools and hiding one
   to highlight another would just be in the way.
   ------------------------------------------------------------------- */
.zcp5 .ac-card{
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.zcp5 .ac-grid > * > .ac-card:hover{
  border-color:#c3ccda;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 14px 30px -18px rgba(15,23,42,.34);
  transform:translateY(-2px);
}

/* The license rows lift too, and their status edge thickens - so on a
   long list you can see which row you are on without reading it. */
.zcp5 .product-card{
  transition:border-color .14s ease, box-shadow .14s ease,
             transform .14s ease, border-left-width .14s ease;
}
.zcp5 .product-card:hover{
  transform:translateY(-2px);
  border-left-width:5px;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 12px 26px -16px rgba(15,23,42,.34);
}

@media (prefers-reduced-motion: reduce){
  .zcp5 .ac-card,
  .zcp5 .product-card{ transition:none; }
  .zcp5 .ac-grid > * > .ac-card:hover,
  .zcp5 .product-card:hover{ transform:none; }
}

/* The "Show N More" control was .btn-outline-primary, which this site
   renders red - so a neutral disclosure toggle looked like a warning
   sitting under the list. It is a view control, not an action. */
.zcp5 .pc-more{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--zcp-fs-xs); font-weight:600; padding:.42rem 1rem;
}


/* -------------------------------------------------------------------
   11. LEGACY / UPSELL

   v1 is superseded by v2. Marking it costs nothing and it is the one
   upgrade conversation the account area is well placed to start, since
   the customer is already an API customer making real calls.
   ------------------------------------------------------------------- */
.zcp5 .ac-pill.legacy{
  background:rgba(255,255,255,.10); color:#a9b8d0;
  border-color:rgba(255,255,255,.18); font-weight:600;
}

.zcp5 .ac-upsell{
  margin-top:.9rem; padding:.85rem .9rem;
  background:#f4f8fd;
  border:1px solid #d8e5f5;
  border-radius:.55rem;
}
.zcp5 .ac-upsell-h{
  display:flex; align-items:center; gap:.4rem;
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
  margin-bottom:.3rem;
}
.zcp5 .ac-upsell-h i{ color:var(--zcp-accent); }
.zcp5 .ac-upsell p{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  line-height:1.5; margin:0 0 .7rem;
}
.zcp5 .ac-upsell-cta{
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:.45rem .8rem;
  font-size:var(--zcp-fs-xs); font-weight:700; border-radius:.4rem;
}


/* -------------------------------------------------------------------
   12. ACTION SEPARATOR

   Cards in a row stretch to the tallest, and actions are pinned to the
   bottom so buttons line up across the row. On a short card that leaves
   slack above the button.

   A hairline turns that slack into structure: the space is now the
   bottom of a labelled region rather than an accidental hole, and the
   buttons still align - which is the thing that makes a grid scannable.
   ------------------------------------------------------------------- */
.zcp5 .pc-actions{
  border-top:1px solid #f1f5f9;
  margin-top:auto; padding-top:.6rem;
}
/* rows with nothing to act on should not draw a rule to nothing */
.zcp5 .pc-actions:empty{ border-top:0; padding-top:0; }

/* Where a row has BOTH a button and a secondary link, they share a line.
   The gap above the actions on short cards is set by the TALLEST card in
   the row, so collapsing the two-line action area shortens every card in
   that line - which shrinks the slack everywhere, not just here.

   :has() is already used elsewhere in this system (.zcp-config
   .radio-option:has(input:checked)), so it is not a new dependency. */
.zcp5 .pc-actions:has(.pc-btn):has(.pc-link){
  flex-direction:row; align-items:center; gap:.55rem;
}
.zcp5 .pc-actions:has(.pc-btn):has(.pc-link) .pc-btn{ flex:1 1 auto; width:auto; }
.zcp5 .pc-actions:has(.pc-btn):has(.pc-link) .pc-link{ flex:0 0 auto; white-space:nowrap; }

/* and tighten the row itself a little, which comes straight off the slack */
.zcp5 .product-card{ padding:.75rem .8rem; }
.zcp5 .pc-actions{ padding-top:.55rem; }


/* -------------------------------------------------------------------
   13. LICENSE FILTER

   These were btn-outline-default / warning / success / danger with
   matching Bootstrap badges - four semantic colors, on the navy head,
   competing with the row badges below them.

   But a filter is a CONTROL, not a state. The rows already carry the
   color; the chips only need to say which view is on. So: one neutral
   segmented control, selected segment filled. The count keeps a faint
   tint of its state, which is enough to link it to the rows without
   restating them.
   ------------------------------------------------------------------- */
.zcp5 .product-filters{
  display:inline-flex; align-items:stretch;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  border-radius:.45rem;
  padding:2px; gap:2px;
}
.zcp5 .pcf{
  display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:0; border-radius:.35rem;
  padding:.24rem .55rem;
  font-size:var(--zcp-fs-xs); font-weight:600;
  color:#c6d2e4; cursor:pointer; white-space:nowrap;
  transition:background-color .12s, color .12s;
}
.zcp5 .pcf:hover{ background:rgba(255,255,255,.10); color:#fff; }
.zcp5 .pcf.active{ background:#fff; color:var(--zcp-navy); }
.zcp5 .pcf:focus-visible{ outline:2px solid #7fb2f0; outline-offset:1px; }

.zcp5 .pcf-n{
  font-size:var(--zcp-fs-xs); font-weight:700;
  font-variant-numeric:tabular-nums;
  padding:0 .3rem; border-radius:999px;
  background:rgba(255,255,255,.14); color:#e6edf8;
}
.zcp5 .pcf.active .pcf-n{ background:#e8edf5; color:#43506a; }

/* The counts carry their state color whether or not the segment is
   selected - a little color genuinely helps you find "Expired" without
   reading. Two treatments are needed because the pill sits on navy when
   the segment is idle and on white when it is selected, and one set of
   values cannot stay legible on both. */
.zcp5 .pcf-n.active  { background:rgba(93,198,118,.20); color:#7fe0a0; }
.zcp5 .pcf-n.expiring{ background:rgba(232,163,61,.22); color:#f0bd72; }
.zcp5 .pcf-n.expired { background:rgba(214,88,84,.24);  color:#ff9d99; }

.zcp5 .pcf.active .pcf-n.active  { background:#e2f4e6; color:#1f7a33; }
.zcp5 .pcf.active .pcf-n.expiring{ background:#fbeed6; color:#8a5206; }
.zcp5 .pcf.active .pcf-n.expired { background:#f9dcdc; color:#96201f; }

@media (max-width: 575.98px){
  .zcp5 .product-filters{ width:100%; justify-content:space-between; }
}


/* ===================================================================
   14. ORDER TABLE  -  account_orders and the order detail pages
   =================================================================== */
.zcp5 .ac-table{
  width:100%; border-collapse:collapse; margin:0;
  font-size:var(--zcp-fs-sm);
}
.zcp5 .ac-table thead th{
  text-align:left; white-space:nowrap;
  font-size:var(--zcp-fs-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  color:var(--zcp-mut);
  padding:.5rem .6rem;
  border-bottom:1px solid var(--zcp-line);
}
.zcp5 .ac-table tbody td{
  padding:.7rem .6rem;
  border-bottom:1px solid #f1f5f9;
  vertical-align:middle;
}
.zcp5 .ac-table tbody tr:last-child td{ border-bottom:0; }
.zcp5 .ac-table tbody tr{ transition:background-color .12s; }
.zcp5 .ac-table tbody tr:hover{ background:#f8fafc; }
/* money and ids line up as columns of digits, not as prose */
.zcp5 .ac-table .order-id,
.zcp5 .ac-table td:nth-child(3){ font-variant-numeric:tabular-nums; }
.zcp5 .ac-table .order-id{ font-weight:700; color:var(--zcp-ink); }

.zcp5 .ot-actions{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.zcp5 .ot-btn{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .6rem; border-radius:.35rem;
  font-size:var(--zcp-fs-xs); font-weight:600; white-space:nowrap;
}
.zcp5 .ot-link{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:var(--zcp-fs-xs); font-weight:600;
  color:var(--zcp-mut); text-decoration:none; white-space:nowrap;
}
.zcp5 .ot-link:hover{ color:var(--zcp-ink); text-decoration:underline; }

/* the table scrolls inside its own box - the page never scrolls sideways */
.zcp5 .table-responsive{ overflow-x:auto; }

.zcp5 .ac-empty{ text-align:center; padding:2.5rem 1.25rem; }
.zcp5 .ac-empty i{ font-size:2.2rem; color:#c3ccda; margin-bottom:.6rem; }
.zcp5 .ac-empty h3{
  background:none; color:var(--zcp-ink); padding:0; margin:0 0 .35rem;
  font-size:1rem; font-weight:700; display:block;
}
.zcp5 .ac-empty p{ color:var(--zcp-mut); margin-bottom:1rem; }

@media (max-width: 575.98px){
  .zcp5 .ac-table thead{ display:none; }
  .zcp5 .ac-table tbody td{ display:block; border-bottom:0; padding:.2rem .6rem; }
  .zcp5 .ac-table tbody tr{
    display:block; padding:.6rem 0;
    border-bottom:1px solid var(--zcp-line);
  }
  .zcp5 .ac-table tbody td:last-child{ padding-top:.5rem; }
}

/* The order-count chip in the head, and the money column. The totals were
   picking up a site heading color through inheritance rather than being
   set - a currency figure should read as ink, not as a warning. */
.zcp5 .ac-head .order-count-badge{
  display:inline-flex; align-items:center; gap:.3rem;
  margin-left:auto; padding:.15rem .5rem; border-radius:999px;
  font-size:var(--zcp-fs-xs); font-weight:700;
  background:rgba(255,255,255,.14); color:#e6edf8;
  border:1px solid rgba(255,255,255,.20); white-space:nowrap;
}
.zcp5 .ac-table tbody td{ color:var(--zcp-ink); }
.zcp5 .ac-table td:nth-child(3){ font-weight:700; }


/* ===================================================================
   15. ORDER DETAIL

   Replaces the 433-line inline block on account_order_details_past,
   which carried 36 colors, seven card vocabularies and five button
   colors (print green, download blue, manage navy, retry red,
   boundary orange).

   None of those five is a conversion action - they are all things you
   do with an order you already placed - so none of them is green.
   =================================================================== */

/* the order's own header: number, date, state */
/* flex-direction is set EXPLICITLY. Without it this inherits column
   from .ac-card, and column + align-items:center shrink-wraps every
   child and parks it in the middle of the card - which is why the
   order number, its date and the status badge were sitting centred
   with the inner justify-content-between row never spreading at all. */
.zcp5 .ac-orderhead{
  padding:1.1rem 1.25rem;
  display:flex; flex-direction:column; align-items:stretch; gap:.6rem;
}
.zcp5 .ac-orderhead .order-number{
  font-size:1.15rem; font-weight:700; color:var(--zcp-ink);
  font-variant-numeric:tabular-nums; margin:0;
}
.zcp5 .ac-orderhead .order-date{ font-size:var(--zcp-fs-xs); color:var(--zcp-mut); }
.zcp5 .ac-orderhead .order-meta{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin-left:auto;
}

/* quick actions */
.zcp5 .ac-actions{ padding:1rem 1.25rem 1.15rem; }
.zcp5 .ac-actions > h3{
  background:none; color:var(--zcp-ink); padding:0; margin:0 0 .75rem;
  font-size:var(--zcp-fs-sm); font-weight:700;
  display:flex; align-items:center; gap:.45rem;
}
.zcp5 .ac-actions > h3 i{ color:var(--zcp-mut); }
.zcp5 .ac-actiongrid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:.55rem;
}
.zcp5 .ac-actionbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.5rem .8rem; border-radius:.4rem;
  font-size:var(--zcp-fs-xs); font-weight:600;
  text-align:center; white-space:nowrap;
}
.zcp5 .ac-actionbtn.disabled{ opacity:.45; pointer-events:none; }

/* the attention variant was an inline red gradient on the card itself */
.zcp5 .ac-actions.is-attention{
  background:#fdf6f6; border-color:#f0cfcf;
}
.zcp5 .ac-actions.is-attention > h3{ color:#a32020; }
.zcp5 .ac-actions.is-attention > h3 i{ color:#c1443f; }

/* notes - was .alert-card in four tones */
.zcp5 .ac-note{
  border:1px solid var(--zcp-line);
  border-left:3px solid #cbd5e1;
  border-radius:.5rem;
  background:#f8fafc;
  padding:.8rem .95rem;
  margin-bottom:1rem;
  font-size:var(--zcp-fs-sm); color:var(--zcp-ink);
}
.zcp5 .ac-note p:last-child{ margin-bottom:0; }
.zcp5 .ac-note.info{ background:#f4f8fd; border-left-color:var(--zcp-accent); }
.zcp5 .ac-note.warn{ background:#fff9ef; border-left-color:#e8a33d; }
.zcp5 .ac-note.good{ background:#f4fbf5; border-left-color:#3d9c40; }

/* the collapsible "important information" panel */
.zcp5 .ac-important{ padding:0; }
.zcp5 .important-info-toggle{
  display:flex; align-items:center; gap:.5rem; width:100%;
  padding:.8rem 1.1rem; cursor:pointer;
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
  background:none; border:0; text-align:left;
}
.zcp5 .important-info-toggle .toggle-icon{ margin-left:auto; color:var(--zcp-mut); transition:transform .18s; }
.zcp5 .important-info-toggle.active .toggle-icon{ transform:rotate(180deg); }
/* MEASURED, not guessed. In the third-width rail the card is 316px and
   the list had a 260px text column, while two of the four bullets need
   274 and 285 to sit on one line. The width comes from three places:
   the <ul> was on the browser default 40px indent, the body repeated
   the card padding the collapse wrapper already supplies, and the copy
   is secondary so it takes the smaller size the rest of the rail uses.
   A slight outdent buys the last few pixels and reads as a deliberate
   hang rather than a misalignment. */
.zcp5 .important-info-body{
  margin:0 -0.25rem; padding:0 0 1.1rem;
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
}
.zcp5 .important-info-body ul{ margin:0; padding-left:.85rem; }
.zcp5 .important-info-body li{ margin-bottom:.3rem; line-height:1.5; }
.zcp5 .important-info-body li:last-child{ margin-bottom:0; }

/* line items */
.zcp5 .ac-table .item-name{ font-weight:700; color:var(--zcp-ink); }
.zcp5 .ac-table .item-details,
.zcp5 .ac-table .item-expiration{ font-size:var(--zcp-fs-xs); color:var(--zcp-mut); }
.zcp5 .ac-table .item-price{ font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }

/* totals */
.zcp5 .ac-totals{ padding:1rem 1.25rem 1.15rem; }
.zcp5 .totals-row{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:.4rem 0; font-size:var(--zcp-fs-sm);
  font-variant-numeric:tabular-nums;
}
.zcp5 .totals-row .ac-label{ color:var(--zcp-mut); }
.zcp5 .total-final{
  border-top:1px solid var(--zcp-line); margin-top:.4rem; padding-top:.7rem;
  font-size:1.05rem; font-weight:700; color:var(--zcp-ink);
}
.zcp5 .total-due-alert{
  margin-top:.8rem; padding:.7rem .85rem; border-radius:.45rem;
  background:#fff7e8; border:1px solid #f5dcae; color:#9a5b06;
  font-size:var(--zcp-fs-xs); font-weight:600;
}

/* The boundary-ready toast and its modal skin. These were in the inline
   block; Bootstrap supplies the modal mechanics, this is just the trim. */
.zcp5 .success-icon{ font-size:2rem; color:#3d9c40; margin-bottom:.5rem; }
.zcp5 .boundary-toast{ display:flex; align-items:center; gap:.6rem; }
.zcp5 .boundary-toast-text{ font-size:var(--zcp-fs-sm); color:var(--zcp-ink); }
.zcp5 .modal-boundary .modal-content{ border:0; border-radius:.9rem; }


/* ===================================================================
   16. ACCOUNT FORMS  -  account_edit and the other profile forms

   Ported from account_edit's 303-line inline block (20 colors).

   EVERY CLASS NAME HERE IS A CONTRACT. The page's own JS toggles
   invalid / valid / show / is-valid / is-invalid, drives the email-pill
   editor and the per-section status ticks. Only the styling changed.
   =================================================================== */

.zcp5 .form-label{
  font-weight:600; color:var(--zcp-ink);
  font-size:var(--zcp-fs-xs); margin-bottom:.3rem;
}
.zcp5 .form-label.required::after{ content:" *"; color:#c1443f; }

.zcp5 .form-control,
.zcp5 .form-select{
  font-size:var(--zcp-fs-sm);
  border:1px solid #cbd5e1; border-radius:.4rem;
  padding:.45rem .65rem;
}
.zcp5 .form-control:focus,
.zcp5 .form-select:focus{
  border-color:var(--zcp-accent);
  box-shadow:0 0 0 3px rgba(14,165,233,.15);
}
/* the browser icons duplicate .validation-icon, so they stay off */
.zcp5 .form-control.is-valid  { border-color:#3d9c40; background-image:none; }
.zcp5 .form-control.is-invalid{ border-color:#c1443f; background-image:none; }
.zcp5 .invalid-feedback{ font-size:var(--zcp-fs-xs); }

.zcp5 .input-wrapper{ position:relative; }
.zcp5 .validation-icon{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:.85rem; pointer-events:none;
}
.zcp5 .validation-icon.valid  { color:#3d9c40; }
.zcp5 .validation-icon.invalid{ color:#c1443f; }

/* Per-section tick in the card head. It sits ON navy, where the greens
   and reds used elsewhere on the page would disappear - these are the
   lifted versions, same hues, enough luminance to read on dark. */
.zcp5 .ac-head .section-status{ font-size:.95rem; margin-left:auto; }
.zcp5 .ac-head .section-status .fa-circle-check{ color:#7fe0a0; }
.zcp5 .ac-head .section-status .fa-circle-xmark{ color:#ff9d99; }

.zcp5 .username-display{
  background:#f7f9fc; border:1px solid var(--zcp-line);
  border-radius:.45rem; padding:.6rem .8rem;
  display:flex; align-items:center; gap:.6rem;
}
.zcp5 .username-display .username-value{
  font-weight:700; color:var(--zcp-ink);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:var(--zcp-fs-sm);
}
.zcp5 .username-display .btn-copy{
  margin-left:auto; padding:.2rem .5rem; font-size:var(--zcp-fs-xs);
}

/* ---- email pills ---- */
.zcp5 .email-pills-container{
  border:1px solid #cbd5e1; border-radius:.45rem;
  padding:.45rem; min-height:74px; background:#fff;
}
.zcp5 .email-pills-container:focus-within{
  border-color:var(--zcp-accent); box-shadow:0 0 0 3px rgba(14,165,233,.15);
}
.zcp5 .email-pills-container.is-invalid{ border-color:#c1443f; }
.zcp5 .email-pill{
  display:inline-flex; align-items:center;
  background:#eef4fd; border:1px solid #cddffa; color:#1f4d99;
  border-radius:999px; padding:.15rem .55rem; margin:.15rem .2rem .15rem 0;
  font-size:var(--zcp-fs-xs); font-weight:600;
}
.zcp5 .email-pill.invalid{ background:#fdecec; border-color:#f2c9c9; color:#a32020; }
.zcp5 .email-pill .pill-text{ margin-right:.4rem; }
.zcp5 .email-pill .pill-remove{ cursor:pointer; opacity:.65; transition:opacity .15s; }
.zcp5 .email-pill .pill-remove:hover{ opacity:1; }
.zcp5 .email-input-inline{
  border:0; outline:none; padding:.2rem; min-width:150px;
  font-size:var(--zcp-fs-sm); flex:1;
}
.zcp5 .email-input-wrapper{ display:flex; align-items:center; gap:.5rem; margin-top:.25rem; }
.zcp5 .email-add-btn{ flex-shrink:0; padding:.25rem .7rem; font-size:var(--zcp-fs-xs); }

/* ---- switches and the copy-billing control ---- */
.zcp5 .form-switch-lg{ padding-left:3rem; }
.zcp5 .form-switch-lg .form-check-input{
  width:3rem; height:1.5rem; margin-left:-3rem; cursor:pointer;
}
.zcp5 .form-switch-lg .form-check-label{ padding-top:.15rem; cursor:pointer; }

.zcp5 .same-as-billing{
  background:#f4fbf5; border:1px solid #cfe9d3;
  border-radius:.45rem; padding:.6rem .8rem;
}
.zcp5 .same-as-billing .form-check-input:checked{
  background-color:#3d9c40; border-color:#3d9c40;
}
/* shipping inputs read as disabled while they mirror billing */
.zcp5 .shipping-fields.disabled .form-control,
.zcp5 .shipping-fields.disabled .form-select{ background-color:#f1f5f9; opacity:.7; }

.zcp5 .outside-us-field{ display:none; }
.zcp5 .outside-us-field.show{ display:block; }

/* ---- save controls ---- */
.zcp5 .unsaved-indicator{
  display:none; color:#9a5b06; font-size:var(--zcp-fs-xs); font-weight:600;
  margin-left:.5rem; white-space:nowrap;
}
.zcp5 .unsaved-indicator.show{ display:inline-flex; align-items:center; gap:.3rem; }

.zcp5 .form-bottom-spacer{ height:80px; }
.zcp5 .desktop-save{ display:block; }
.zcp5 .sticky-save{ display:none; }
@media (max-width: 767.98px){
  /* On a phone the save control follows you, rather than sitting at the
     bottom of a long form you would have to scroll back through. */
  .zcp5 .sticky-save{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:1030;
    background:#fff; border-top:1px solid var(--zcp-line);
    padding:.65rem .9rem;
    box-shadow:0 -6px 18px -12px rgba(15,23,42,.4);
  }
  .zcp5 .sticky-save .btn{ width:100%; }
  .zcp5 .desktop-save{ display:none; }
}

.zcp5 .copy-tooltip{
  position:absolute; background:var(--zcp-navy); color:#fff;
  padding:.2rem .5rem; border-radius:.3rem;
  font-size:var(--zcp-fs-xs); opacity:0; transition:opacity .15s;
  pointer-events:none;
}
.zcp5 .copy-tooltip.show{ opacity:1; }


/* ===================================================================
   17. DOWNLOADS  -  account_database

   Replaces a 464-line inline block carrying 37 colors: four product
   family gradients and EIGHT format-button colors.

   The format colors were the real problem. MDB red, XLS green, CSV
   blue, SQL navy, TAB purple says one of these is more important than
   the others, and none of them is - they are the same data, and which
   one you want depends only on what you are loading it into. They are
   now identical neutral buttons and the LABEL does the work.

   The data-type icons stay. They are the fastest way to tell a ZIP
   database from a Canadian one at a glance, and they cost nothing.
   =================================================================== */

.zcp5 .dl-card{
  padding:.9rem 1rem 1rem;
  margin-bottom:1rem;
  display:flex; flex-direction:column; gap:.7rem;
}

.zcp5 .dl-top{ display:flex; align-items:flex-start; gap:.75rem; }
/* one tile for every family - the glyph inside is what differs */
.zcp5 .dl-icon{
  flex-shrink:0; width:40px; height:40px; border-radius:.5rem;
  background:#eef2f8; color:#41506b;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.zcp5 .dl-card h4{
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
  margin:0 0 .25rem; line-height:1.3;
}
.zcp5 .dl-meta{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.zcp5 .dl-updated{ font-size:var(--zcp-fs-xs); color:var(--zcp-mut); }

/* the segue: what is actually in the file you are about to download */
.zcp5 .spec-link{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:var(--zcp-fs-xs); font-weight:600;
  color:#1f4d99; text-decoration:none; margin-bottom:.25rem;
}
.zcp5 .spec-link:hover{ text-decoration:underline; }

/* ---- format buttons: identical by design ---- */
.zcp5 .dl-formats{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.zcp5 .dl-fmt{
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
  min-width:3.4rem; padding:.35rem .6rem;
  border:1px solid #cbd5e1; border-radius:.35rem;
  background:#fff; color:var(--zcp-ink);
  font-size:var(--zcp-fs-xs); font-weight:700;
  text-decoration:none; white-space:nowrap;
  transition:border-color .12s, background-color .12s, color .12s;
}
.zcp5 .dl-fmt:hover{
  background:var(--zcp-navy); border-color:var(--zcp-navy); color:#fff;
}
.zcp5 .dl-fmt.disabled{
  opacity:.4; pointer-events:none; background:#f8fafc;
}
/* the three wider ones say a word rather than a file extension */
.zcp5 .dl-fmt.fmt-update,
.zcp5 .dl-fmt.fmt-full,
.zcp5 .dl-fmt.fmt-history{ min-width:0; }

/* ---- renewal is the ONE place color is earned here ---- */
.zcp5 .dl-renew{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  width:100%; padding:.45rem .8rem; margin-bottom:.15rem;
  border-radius:.4rem; font-size:var(--zcp-fs-xs); font-weight:700;
  text-decoration:none; border:1px solid transparent;
}
.zcp5 .dl-renew.expiring{ background:#fff7e8; color:#9a5b06; border-color:#f5dcae; }
.zcp5 .dl-renew.expired { background:#c1443f; color:#fff; border-color:#c1443f; }
.zcp5 .dl-renew:hover{ filter:brightness(.97); }

/* ---- section headings ---- */
.zcp5 section.anchor-scroll > h2,
.zcp5 .dl-section-title{
  font-size:1.05rem; font-weight:700; color:var(--zcp-ink);
  margin:0 0 .9rem; display:flex; align-items:center; gap:.5rem;
}

/* Section and modal heads. These carried INLINE family gradients that
   survived removing the style block, because they were never in it -
   purple for ZIP+4, red for Canada, green for area codes, orange for
   other. The section already announces its family in words. */
.zcp5 .section-header{
  background:var(--zcp-navy); color:#fff;
  padding:.7rem 1rem; border-radius:.5rem .5rem 0 0;
  font-size:var(--zcp-fs-sm); font-weight:700;
  display:flex; align-items:center; gap:.5rem;
}
.zcp5 .section-header i{ color:#8fa3c4; }
.zcp5 .modal-header{ background:var(--zcp-navy); color:#fff; }
.zcp5 .modal-header .btn-close{ filter:invert(1) grayscale(1) brightness(2); }


/* ===================================================================
   18. DOWNLOADS - GROUPING AND CONTRAST

   Removing 37 colors left the page correct but flat: white cards on a
   white page, separated only by hairlines. Three fixes, none of which
   brings the rainbow back.

   1. TINT THE GROUND, NOT THE CARDS. A card is only a card if it sits
      on something. The page gets a faint cool ground and every white
      card reads as raised, at zero color cost.

   2. THE SECTION HEAD IS THE GROUPING. Same navy band as the cards on
      the dashboard, so a family reads as one block. A thin accent on
      its left edge gives each family a glance-level identity without
      returning to four full gradients.

   3. THE FORMAT ICONS WERE INVISIBLE. They are not font glyphs - they
      are SVG backgrounds with a filter that forces them to pure WHITE,
      because they were drawn for the colored buttons. On a white
      button that is white on white, appearing only on hover when the
      button turns navy. The filter is now inverted to match the button.
   =================================================================== */

/* ---- 1. ground ---- */
.zcp5.account-downloads .container-fluid,
.zcp5.account-downloads .section-content{ background:transparent; }
.zcp5.account-downloads{ background:#f4f7fb; }
.zcp5.account-downloads .dl-card{
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 10px 26px -20px rgba(15,23,42,.35);
}

/* ---- 2. section grouping ---- */
.zcp5 .section-header{
  display:flex; align-items:center; gap:.6rem;
  background:var(--zcp-navy); color:#fff;
  padding:.7rem 1rem;
  border-radius:.6rem .6rem 0 0;
  border-left:4px solid #55658a;
  margin:0;
}
.zcp5 .section-header h2{
  margin:0; font-size:var(--zcp-fs-sm); font-weight:700;
  color:#fff; letter-spacing:.01em;
}
.zcp5 .section-header i{ color:#8fa3c4; font-size:1rem; }

/* one muted accent per family - a 4px edge, not a fill */
.zcp5 #us-zip    .section-header{ border-left-color:#AB2827; }
.zcp5 #zip4      .section-header{ border-left-color:#6b62b8; }
.zcp5 #canada    .section-header{ border-left-color:#c1443f; }
.zcp5 #areacode  .section-header{ border-left-color:#3d8f6a; }
.zcp5 #other     .section-header{ border-left-color:#c08a3e; }

/* the family's cards sit in a panel under its head, so the group is
   visually one object rather than loose cards near a heading */
.zcp5 .section-content{
  background:#fbfcfe;
  border:1px solid var(--zcp-line);
  border-top:0;
  border-radius:0 0 .6rem .6rem;
  padding:1rem;
  margin-bottom:1.75rem;
}

/* ---- 3. the format icons ---- */
/* brightness(0) blackens any source; the source filter forced white. */
.zcp5 .dl-fmt i::before{
  filter:brightness(0) !important;
  opacity:.72;
}
.zcp5 .dl-fmt:hover i::before{
  filter:brightness(0) invert(1) !important;
  opacity:1;
}
.zcp5 .dl-fmt.disabled i::before{ opacity:.35; }
/* the wide buttons use real Font Awesome glyphs, which inherit color */
.zcp5 .dl-fmt i{ color:inherit; }


/* ===================================================================
   19. DOWNLOADS - DETAIL
   =================================================================== */

/* The "Technical specs" link was sitting between the product name and
   its status, pushing the thing you came to check below a link you
   might never use. Reading order should be: what it is, what state it
   is in, how to get it, and only then where to read about it.

   Fixed with flex `order` rather than by moving markup - the card is
   built inside an ASP conditional and rearranging it by hand would mean
   touching every branch. */
.zcp5 .dl-top > div:last-child{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.3rem; min-width:0; flex:1;
}
.zcp5 .dl-top h4       { order:1; margin:0; }
.zcp5 .dl-top .dl-meta { order:2; }
.zcp5 .dl-top .spec-link{ order:3; margin:0; }

/* Both reference links now read the same. .product-link lost its rule
   when the inline block went and had fallen back to a site green, so
   one card could show a blue link and a green one saying the same kind
   of thing. */
.zcp5 .spec-link,
.zcp5 .product-link{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:var(--zcp-fs-xs); font-weight:600;
  color:#1f4d99; text-decoration:none;
}
.zcp5 .spec-link:hover,
.zcp5 .product-link:hover{ text-decoration:underline; color:#16376e; }
.zcp5 .spec-link i,
.zcp5 .product-link i{ color:#7f97bd; }

/* the install guide is a card footer, not part of the format row */
.zcp5 .dl-card > .product-link{
  margin-top:.15rem; padding-top:.6rem;
  border-top:1px solid #f1f5f9; width:100%;
}

/* Format buttons: tighter, and equal width so the row reads as a set of
   choices rather than a ragged line of different-sized things. */
.zcp5 .dl-formats{ gap:.35rem; }
.zcp5 .dl-fmt{ min-width:3.9rem; padding:.32rem .5rem; }
.zcp5 .dl-fmt.fmt-update,
.zcp5 .dl-fmt.fmt-full,
.zcp5 .dl-fmt.fmt-history{ min-width:0; padding:.32rem .65rem; }

/* the "FTP access available by request" note is guidance, not an action */
.zcp5 .dl-card .ftp-note,
.zcp5 .dl-card small{ font-size:var(--zcp-fs-xs); color:var(--zcp-mut); }

/* a little more air between cards, less inside them */
.zcp5 .dl-card{ padding:.85rem .9rem .9rem; margin-bottom:0; }
.zcp5 .section-content .row{ row-gap:1rem; }


/* ===================================================================
   20. DOWNLOAD FRESHNESS, FTP, RENEWAL ROUTE
   =================================================================== */

/* The staleness note. Two levels, and BOTH are phrased as "on record"
   because PC_DownloadLog captures web downloads only - FTP collections
   are invisible to it. Someone who pulls monthly over FTP must never be
   told their data is old, so the amber tier is a nudge and even the red
   tier reports rather than accuses. */
.zcp5 .dl-fresh{
  display:flex; align-items:flex-start; gap:.35rem;
  font-size:var(--zcp-fs-xs); font-weight:600; line-height:1.35;
  margin-top:.15rem;
}
.zcp5 .dl-fresh i{ margin-top:.15em; flex-shrink:0; }
.zcp5 .dl-fresh.aging{ color:#9a5b06; }
.zcp5 .dl-fresh.stale{ color:#a32020; }

/* ---- FTP ---- */
.zcp5 .dl-ftp{
  margin-top:.7rem; padding:.7rem .8rem;
  background:#f7f9fc; border:1px solid var(--zcp-line);
  border-radius:.5rem;
}
.zcp5 .dl-ftp-t{
  display:flex; align-items:center; gap:.4rem;
  font-size:var(--zcp-fs-xs); font-weight:700; color:var(--zcp-ink);
  margin-bottom:.2rem;
}
.zcp5 .dl-ftp-t i{ color:var(--zcp-mut); }
.zcp5 .dl-ftp p{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  line-height:1.45; margin:0 0 .55rem;
}
.zcp5 .dl-ftp-a{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.zcp5 .dl-ftp-btn{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.32rem .7rem; border-radius:.35rem;
  font-size:var(--zcp-fs-xs); font-weight:600;
}
.zcp5 .dl-ftp-link{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:var(--zcp-fs-xs); font-weight:600;
  color:#1f4d99; text-decoration:none;
}
.zcp5 .dl-ftp-link:hover{ text-decoration:underline; }
.zcp5 .dl-ftp-link i{ color:#7f97bd; }

/* ---- the renewal route ---- */
/* account_renew.asp renews ONE order per call, so a customer with
   several lapsed licenses cannot get there from a single card. This is
   the one route on the page back to the list where they can pick. */
.zcp5 .dl-renewbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  margin:0 0 1.25rem;
  padding:.8rem 1rem;
  background:#fdf6f6; border:1px solid #f0cfcf;
  border-left:4px solid #c1443f;
  border-radius:.55rem;
  font-size:var(--zcp-fs-sm); color:var(--zcp-ink);
}
.zcp5 .dl-renewbar i{ color:#c1443f; margin-right:.4rem; }
.zcp5 .dl-renewbar-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.42rem .9rem; border-radius:.4rem;
  font-size:var(--zcp-fs-xs); font-weight:700; white-space:nowrap;
}

/* the lapsed button now carries a sentence, so it needs room to wrap */
.zcp5 .dl-renew{ line-height:1.3; text-align:center; height:auto; padding:.5rem .8rem; }


/* ===================================================================
   21. CHECKSUM SHELF, FTP NOTE, DOWNLOAD-CARD HOVER
   =================================================================== */

/* ---- the checksum shelf ----------------------------------------
   Collapsed by default, and absent entirely until dfChecksum has a
   value. Whoever verifies a download is doing it deliberately and will
   open a disclosure; everyone else should never see a row of hex on a
   page whose job is a download button. */
.zcp5 .dl-sums{
  margin-top:.7rem;
  border-top:1px solid var(--zcp-line);
  padding-top:.55rem;
}
.zcp5 .dl-sums > summary{
  display:flex; align-items:center; gap:.4rem;
  cursor:pointer; list-style:none;
  font-size:var(--zcp-fs-xs); font-weight:600; color:var(--zcp-mut);
}
.zcp5 .dl-sums > summary::-webkit-details-marker{ display:none; }
.zcp5 .dl-sums > summary::after{
  content:"\f078";                     /* chevron-down */
  font-family:"Font Awesome 6 Free"; font-weight:900;
  font-size:.6rem; margin-left:auto; transition:transform .15s ease;
}
.zcp5 .dl-sums[open] > summary::after{ transform:rotate(180deg); }
.zcp5 .dl-sums > summary:hover{ color:var(--zcp-ink); }
.zcp5 .dl-sums > summary i{ color:#7f97bd; }
.zcp5 .dl-sums p{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  line-height:1.45; margin:.5rem 0 .4rem;
}
.zcp5 .dl-sums ul{ list-style:none; margin:0; padding:0; }
.zcp5 .dl-sums li{
  display:flex; align-items:center; gap:.45rem;
  padding:.28rem 0; border-top:1px dashed var(--zcp-line);
}
.zcp5 .dl-sums li:first-child{ border-top:0; }
.zcp5 .dl-sums-f{
  font-size:var(--zcp-fs-xs); font-weight:700; color:var(--zcp-ink);
  min-width:3.2rem; flex-shrink:0;
}
.zcp5 .dl-sums-a{
  font-size:.62rem; font-weight:700; letter-spacing:.03em;
  color:var(--zcp-mut); background:#eef2f7;
  border-radius:.25rem; padding:.06rem .3rem; flex-shrink:0;
}
/* The hash itself gets the whole remaining row and truncates rather
   than wrapping - a 64-character hash would be three lines inside a
   card. It is there to be copied, not read. */
.zcp5 .dl-sums code{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.68rem; color:#334155; background:none; padding:0;
}
.zcp5 .dl-sums-c{
  flex-shrink:0; border:1px solid var(--zcp-line); background:#fff;
  border-radius:.3rem; padding:.14rem .34rem; line-height:1;
  color:var(--zcp-mut); cursor:pointer;
}
.zcp5 .dl-sums-c:hover{ background:#f1f5f9; color:var(--zcp-ink); }

/* ---- "you already have FTP" ------------------------------------
   Replaces the request-access panel rather than leaving a hole where
   it was. One line: the fact, and the way to act on it. */
.zcp5 .dl-ftp-have{
  display:flex; align-items:center; gap:.45rem;
  margin-top:.7rem; padding:.45rem .65rem;
  background:#f7f9fc; border:1px solid var(--zcp-line);
  border-radius:.45rem;
  font-size:var(--zcp-fs-xs); font-weight:600;
  color:var(--zcp-mut); text-decoration:none;
}
.zcp5 .dl-ftp-have:hover{ background:#eef3fa; border-color:#c3ccda; color:var(--zcp-ink); }
.zcp5 .dl-ftp-have > i{ color:#7f97bd; }
.zcp5 .dl-ftp-go{
  margin-left:auto; display:inline-flex; align-items:center; gap:.3rem;
  color:#1f4d99; white-space:nowrap;
}
.zcp5 .dl-ftp-go i{ font-size:.65em; transition:transform .14s ease; }
.zcp5 .dl-ftp-have:hover .dl-ftp-go i{ transform:translateX(2px); }

/* ---- the download and boundary cards lift like the dashboard ----
   Same 2px lift and neutral shadow as .ac-grid cards on account_home.
   The rule there is scoped to .ac-grid children on purpose - a card in
   ordinary page flow must not inherit its height:100% - so the hover
   is restated here for .dl-card rather than the scope being widened. */
.zcp5 .dl-card,
.zcp5 .pg-item{
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.zcp5 .dl-card:hover,
.zcp5 .pg-item:hover{
  border-color:#c3ccda;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 14px 30px -18px rgba(15,23,42,.34);
  transform:translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
  .zcp5 .dl-card,
  .zcp5 .pg-item{ transition:none; }
  .zcp5 .dl-card:hover,
  .zcp5 .pg-item:hover{ transform:none; }
}


/* Cards sit in Bootstrap rows here, not in .ac-grid, so they had no
   reason to match their neighbor's height and a short card left a
   ragged shelf. .row is a flex container and its columns already
   stretch, so the card only has to fill the column it is given. */
.zcp5 .row > [class*="col-"] > .dl-card,
.zcp5 .row > [class*="col-"] > .pg-item{ height:100%; }


/* ===================================================================
   22. ORDER CONFIRMATION
   =================================================================== */

/* The order-details header, used as a confirmation. It states the
   outcome once, above the order number, and then gets out of the way.

   Deliberately NOT a full green banner: the customer has just been
   through checkout and what they need next is the download button, not
   a celebration that pushes it below the fold. A tinted top edge and
   one line of type is enough to say "that worked". */
/* the lede spans the card, and its rule spans it too */
.zcp5 .ac-orderhead.is-confirm{ flex-direction:column; align-items:stretch; }
.zcp5 .ac-orderhead.is-confirm{ border-top:3px solid #3d9c40; }
.zcp5 .ac-orderhead.is-confirm.is-bad{ border-top-color:#c1443f; }

.zcp5 .oc-lede{
  display:flex; align-items:center; gap:.5rem;
  font-size:1.05rem; font-weight:700; color:#2f7a33;
  margin:0 0 .7rem; padding-bottom:.7rem;
  border-bottom:1px solid var(--zcp-line);
}
.zcp5 .oc-lede i{ font-size:1.15em; }
.zcp5 .is-bad .oc-lede{ color:#a32020; }

/* The disclosure chevron was keyed to a JS .active class that nothing
   adds, so it pointed down even when the panel was open - and on this
   page the panel starts open. Bootstrap maintains aria-expanded itself,
   so key on that and it is right on both pages without any JS. */
.zcp5 .important-info-toggle[aria-expanded="true"] .toggle-icon{ transform:rotate(180deg); }


/* ===================================================================
   23. PASSWORD FORM
   =================================================================== */

.zcp5 .pw-form{ display:flex; flex-direction:column; gap:0; }

.zcp5 .pw-field{ margin-bottom:1rem; }
.zcp5 .pw-field label{
  display:block; margin-bottom:.3rem;
  font-size:var(--zcp-fs-xs); font-weight:700; color:var(--zcp-ink);
}
/* .toggle-password is position:absolute in style.css, so the wrapper
   has to be the containing block or the eye lands somewhere else on
   the page entirely. */
.zcp5 .pw-input{ position:relative; }
.zcp5 .pw-input .form-control{
  padding-right:2.2rem;
  font-size:var(--zcp-fs-sm);
}

/* ---- the live checklist ----------------------------------------
   These are the SAME five conditions the server enforces, shown before
   you submit instead of one at a time after each rejection. Untouched
   they are neutral: an untouched form is not a failing form, and a
   column of red on arrival reads as an accusation. */
.zcp5 .pw-rules{
  list-style:none; margin:.2rem 0 1.15rem; padding:.7rem .85rem;
  background:#f7f9fc; border:1px solid var(--zcp-line); border-radius:.5rem;
  display:grid; gap:.3rem;
}
.zcp5 .pw-rules li{
  display:flex; align-items:center; gap:.45rem;
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  transition:color .12s ease;
}
.zcp5 .pw-rules li i{ width:1em; flex-shrink:0; color:#c3ccda; }
.zcp5 .pw-rules li.ok{ color:#1f7a33; }
.zcp5 .pw-rules li.ok i{ color:#3d9c40; }
.zcp5 .pw-rules li.no{ color:var(--zcp-mut); }
.zcp5 .pw-rules li.no i{ color:#c3a15b; }

.zcp5 .pw-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  width:100%; padding:.6rem 1rem;
}

.zcp5 .pw-meta{
  display:block; margin:.75rem 0 0;
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut); line-height:1.5;
}
.zcp5 .pw-meta i{ margin-right:.35rem; color:#7f97bd; }

/* ---- the advice, folded away -----------------------------------
   Six bullets of password advice above the button is six bullets
   between the customer and the thing they came to do. */
.zcp5 .pw-tips{
  margin-top:1rem; padding:.7rem .95rem;
  background:#fff; border:1px solid var(--zcp-line); border-radius:.6rem;
}
.zcp5 .pw-tips > summary{
  display:flex; align-items:center; gap:.45rem; cursor:pointer;
  list-style:none;
  font-size:var(--zcp-fs-xs); font-weight:700; color:var(--zcp-ink);
}
.zcp5 .pw-tips > summary::-webkit-details-marker{ display:none; }
.zcp5 .pw-tips > summary i{ color:#7f97bd; }
.zcp5 .pw-tips > summary::after{
  content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900;
  font-size:.6rem; margin-left:auto; color:var(--zcp-mut);
  transition:transform .15s ease;
}
.zcp5 .pw-tips[open] > summary::after{ transform:rotate(180deg); }
.zcp5 .pw-tips ul{
  margin:.7rem 0 .2rem; padding-left:1.1rem;
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut); line-height:1.55;
}
.zcp5 .pw-tips li{ margin-bottom:.3rem; }
.zcp5 .pw-tips code{
  font-size:.9em; background:#f1f5f9; padding:.05rem .25rem; border-radius:.2rem;
  color:#334155;
}

/* The other half of the credential pair. account_edit showed the
   username with a copy button and said nothing at all about the
   password, so the page about your account details had no route to the
   one detail people actually come to change. */
.zcp5 .pw-change{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.55rem .75rem;
  background:#f7f9fc; border:1px solid var(--zcp-line); border-radius:.45rem;
  font-size:var(--zcp-fs-sm); font-weight:600; color:var(--zcp-ink);
  text-decoration:none;
}
.zcp5 .pw-change:hover{ background:#eef3fa; border-color:#c3ccda; }
.zcp5 .pw-change span{ display:inline-flex; align-items:center; gap:.45rem; }
.zcp5 .pw-change span i{ color:#7f97bd; }
.zcp5 .pw-change-go{ color:#1f4d99; font-size:.8em; transition:transform .14s ease; }
.zcp5 .pw-change:hover .pw-change-go{ transform:translateX(2px); }


/* ===================================================================
   24. ORDER DETAIL  -  the receipt
   =================================================================== */

/* ---- 24.1  MINI HERO --------------------------------------------
   The order's identity, and nothing else. Left-aligned rather than
   centred like .compact, because this is a document header - a number,
   a date and an amount - not a page title being announced. It carries
   the three facts the old page printed twice (number, date, status)
   so that no card below has to repeat them. */
.zcp5 .zcp-hero.mini{ padding:26px 0 24px; text-align:left; }
.zcp5 .zcp-hero.mini .zcp-veil{
  background:linear-gradient(90deg, rgba(9,15,28,.94) 0%, rgba(9,15,28,.86) 45%, rgba(9,15,28,.62) 100%);
}
.zcp5 .zcp-hero.mini h1{
  font-size:clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
  margin:0; line-height:1.15; font-variant-numeric:tabular-nums;
}
.zcp5 .oh-kick{
  font-size:.68rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
  margin-bottom:.3rem;
}
.zcp5 .oh-lede{
  margin:.45rem 0 0; font-size:1rem; font-weight:600; color:#a5e3ac;
}
.zcp5 .oh-lede.bad{ color:#f2a9a5; }

.zcp5 .oh-facts{
  display:flex; align-items:center; flex-wrap:wrap; gap:.45rem .9rem;
  margin-top:.75rem;
}
.zcp5 .oh-fact{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:var(--zcp-fs-xs); font-weight:600; color:rgba(255,255,255,.8);
  font-variant-numeric:tabular-nums;
}
.zcp5 .oh-fact i{ color:rgba(255,255,255,.45); }
.zcp5 .oh-fact.good{ color:#a5e3ac; }
.zcp5 .oh-fact.good i{ color:#7fce88; }
.zcp5 .oh-fact.due{ color:#f5cf8c; }
.zcp5 .oh-fact.due i{ color:#e8b45c; }
/* the status badge is a light chip on a dark band - give it its own
   contrast rather than the card-surface colors it normally sits on */
.zcp5 .oh-facts .ac-badge{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); color:#fff; }
.zcp5 .oh-facts .ac-badge i{ color:inherit; }

/* ---- 24.2  LINE ITEMS -------------------------------------------
   A row is a product, what you configured it as, and what it cost.
   The configuration used to be a stack of <small> lines; it is one
   line of qualifiers now, because that is what it is. */
.zcp5 .oi-card{ overflow:hidden; }
.zcp5 .oi-list{ padding:0 1.15rem; }
.zcp5 .oi-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:start; gap:.4rem 1rem;
  padding:.95rem 0;
  border-bottom:1px solid var(--zcp-line);
}
.zcp5 .oi-row:last-child{ border-bottom:0; }
.zcp5 .oi-name{
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
  line-height:1.35;
}
.zcp5 .oi-name a{ color:var(--zcp-ink); text-decoration:none; }
.zcp5 .oi-name a:hover{ color:#16376e; text-decoration:underline; }
.zcp5 .oi-edition{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut); margin-top:.12rem;
}
.zcp5 .oi-cfg{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut); margin-top:.25rem;
  line-height:1.5;
}
.zcp5 .oi-qty{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut); font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap; padding-top:.1rem;
}
.zcp5 .oi-amt{
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right;
}

/* license state, per item */
.zcp5 .oi-state{
  display:inline-flex; align-items:center; gap:.3rem;
  margin-top:.4rem; padding:.14rem .45rem;
  border-radius:.3rem; border:1px solid transparent;
  font-size:.68rem; font-weight:700;
}
.zcp5 .oi-state.active  { background:#eefaf0; color:#1f7a33; border-color:#c7ebd0; }
.zcp5 .oi-state.expired { background:#fdecec; color:#a32020; border-color:#f2c9c9; }
.zcp5 .oi-state.disabled{ background:#f1f5f9; color:#5b6675; border-color:#e2e8f0; }

/* A cancelled line item. Takes precedence over the license chip: when
   the line was cancelled, the date its license would have run to is
   beside the point. */
.zcp5 .oi-state.cancelled{ background:#fdecec; color:#a32020; border-color:#f2c9c9; }

/* ---- 24.3  TOTALS ----------------------------------------------
   In the foot of the items card, the way a receipt reads. Rows worth
   nothing are not rendered at all - a zero discount, a zero tax and a
   zero refund said nothing and took three rows to say it. */
.zcp5 .oi-totals{
  background:#f7f9fc; border-top:1px solid var(--zcp-line);
  padding:.9rem 1.15rem 1rem;
}
.zcp5 .oi-t{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:.22rem 0;
  font-size:var(--zcp-fs-sm); color:var(--zcp-mut);
  font-variant-numeric:tabular-nums;
}
.zcp5 .oi-t.is-credit span:last-child{ color:#1f7a33; }
.zcp5 .oi-t-total{
  margin-top:.45rem; padding-top:.6rem;
  border-top:1px solid var(--zcp-line);
  font-size:1.05rem; font-weight:700; color:var(--zcp-ink);
}
.zcp5 .oi-paid{
  display:flex; align-items:center; gap:.4rem;
  margin-top:.7rem; padding-top:.6rem;
  border-top:1px dashed var(--zcp-line);
  font-size:var(--zcp-fs-xs); font-weight:600; color:#1f7a33;
}
.zcp5 .oi-due{
  display:flex; justify-content:space-between; gap:1.5rem;
  margin-top:.7rem; padding:.55rem .7rem;
  background:#fff7e8; border:1px solid #f5dcae; border-radius:.4rem;
  font-size:var(--zcp-fs-sm); font-weight:700; color:#9a5b06;
  font-variant-numeric:tabular-nums;
}

/* ---- 24.5  THE MAIN COLUMN IS A STACK --------------------------
   The cards were flush against each other because each one carried its
   own margin and .ac-card carries none. One gap on the column spaces
   every child, however many of them the order's state produces.

   It also makes the actions card's POSITION a one-line switch. Thirty
   seconds after paying, the download button is what you came for and it
   belongs above the receipt; on an order you have come back to, the
   receipt is what you came for and Print/Manage belong under it. Same
   markup, one class. */
.zcp5 .oc-main{ display:flex; flex-direction:column; gap:1.25rem; }
.zcp5 .oc-main > .ac-note{ margin-bottom:0; }
.zcp5 .oc-main.acts-last > .ac-actions{ order:5; }

/* ---- 24.4  REFERENCE RAIL --------------------------------------
   Every fact the old page showed is still here. It is beside the
   receipt rather than under it, because none of it is what you came
   to do - it is what you check when something is wrong. */
.zcp5 .ac-address{
  font-style:normal; margin:0 0 .8rem;
  font-size:var(--zcp-fs-sm); color:var(--zcp-ink); line-height:1.6;
}
.zcp5 .ac-address strong{ display:block; }
.zcp5 .ac-value.is-bad{ color:#a32020; font-weight:700; }

.zcp5 .ac-help p{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  margin:0 0 .6rem; line-height:1.5;
}
.zcp5 .ac-help-row{
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem 0; border-top:1px solid var(--zcp-line);
  font-size:var(--zcp-fs-sm); font-weight:600; color:#1f4d99;
  text-decoration:none;
}
.zcp5 .ac-help-row:hover{ text-decoration:underline; }
.zcp5 .ac-help-row i{ color:#7f97bd; width:1em; }

/* the declined card lost its inline styles */
.zcp5 .ac-actions.is-attention > p{
  color:#7f1d1d; font-size:var(--zcp-fs-sm); margin:0 0 .9rem;
}


/* ===================================================================
   25. ORDER DETAIL  -  two-up cards instead of a rail
   =================================================================== */

/* WHY THERE IS NO RAIL ANY MORE
   Most orders are one product, sometimes two, rarely three. A sticky
   column of three cards beside a two-line receipt is always taller than
   the thing it sits next to, and every card added to it pushed the rest
   of the page further down. Two rows of two, one above the receipt and
   one below, stay in proportion to whatever the order actually holds. */
/* Two cards side by side INSIDE the two-thirds column, so each reads as
   a third of the page - the same width as the rail beside them. */
.zcp5 .oc-2up{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap:1.25rem;
  align-items:start;
}

/* The rail is two short cards now, not three. Payment moved up beside
   Order, which is what stopped the right-hand side towering over a
   two-line order. */
.zcp5 .oc-rail{ display:flex; flex-direction:column; gap:1.25rem; }

/* Reading order, set once. The actions card moves to the top on the
   confirmation and to the bottom on order history without the markup
   changing; a payment problem always leads, whichever page it is on. */
.zcp5 .oc-main > .ac-note      { order:0; }
.zcp5 .oc-main > .oc-2up-a     { order:1; }
.zcp5 .oc-main > .oi-card      { order:3; }
.zcp5 .oc-main > .ac-actions   { order:5; }
.zcp5 .oc-main.acts-first > .ac-actions{ order:-1; }
.zcp5 .oc-main > .ac-actions.is-attention{ order:-1; }

/* The icon and the text were stacking, because an inline <i> followed
   by a block <div> is two lines by definition. */
.zcp5 .ac-note{ display:flex; align-items:flex-start; gap:.6rem; }
.zcp5 .ac-note > i{ margin-top:.2em; flex-shrink:0; }
.zcp5 .ac-note > div{ flex:1 1 auto; min-width:0; }
.zcp5 .ac-note p{ margin:0; }

/* A note that asks you to do something carries the thing that does it. */
.zcp5 .ac-note-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.6rem; padding:.35rem .8rem;
  font-size:var(--zcp-fs-xs); font-weight:600;
}

/* figures line up down the card */
.zcp5 .ac-value.ac-num{ font-variant-numeric:tabular-nums; }

/* the decline explanation sits under the bank's own words */
.zcp5 .ac-hint{
  display:flex; align-items:flex-start; gap:.4rem;
  margin-top:.5rem; padding:.5rem .6rem;
  background:#fdf6f6; border:1px solid #f0cfcf; border-radius:.4rem;
  font-size:var(--zcp-fs-xs); color:#7f2a2a; line-height:1.5;
}
.zcp5 .ac-hint i{ margin-top:.15em; color:#c1443f; flex-shrink:0; }

/* A row whose value is a sentence, not a figure. Side by side it makes
   the LABEL wrap in a third-width card, which is the worst of both. */
.zcp5 .ac-row.stack{ display:block; }
.zcp5 .ac-row.stack .ac-label{ display:block; margin-bottom:.15rem; }
.zcp5 .ac-row.stack .ac-value{ display:block; text-align:left; }


/* ===================================================================
   26. FTP ACCOUNT
   =================================================================== */

/* A value you are meant to copy, not read: monospace, with the button
   that copies it sitting on the same line. */
.zcp5 .ftp-copy{ display:inline-flex; align-items:center; gap:.4rem; }
.zcp5 .ftp-copy code,
.zcp5 .ftp-mask{
  font-size:.82rem; color:var(--zcp-ink);
  background:#f1f5f9; border-radius:.25rem; padding:.1rem .35rem;
}
.zcp5 .ftp-mask{ letter-spacing:.12em; color:var(--zcp-mut); }
.zcp5 .ftp-copy-btn{
  border:1px solid var(--zcp-line); background:#fff; border-radius:.3rem;
  padding:.12rem .32rem; line-height:1; color:var(--zcp-mut); cursor:pointer;
}
.zcp5 .ftp-copy-btn:hover{ background:#f1f5f9; color:var(--zcp-ink); }
.zcp5 .ftp-copy-btn.copied{ color:#1f7a33; border-color:#c7ebd0; background:#eefaf0; }

/* the qualifier after a port number - what it is for, in passing */
.zcp5 .ftp-note{
  display:block; font-size:var(--zcp-fs-xs); font-weight:400;
  color:var(--zcp-mut);
}

/* switching between the logins on one account */
.zcp5 .ftp-switch{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.5rem .7rem; margin-bottom:.5rem;
  background:#f7f9fc; border:1px solid var(--zcp-line); border-radius:.45rem;
  font-size:var(--zcp-fs-sm); font-weight:600; color:var(--zcp-ink);
  text-decoration:none;
}
.zcp5 .ftp-switch:last-child{ margin-bottom:0; }
.zcp5 .ftp-switch:hover{ background:#eef3fa; border-color:#c3ccda; }
.zcp5 .ftp-switch > span:first-child{ display:inline-flex; align-items:center; gap:.45rem; }
.zcp5 .ftp-switch i{ color:#7f97bd; }

/* the note that carries an action - .ac-note in a red tone */
.zcp5 .ac-note.bad{ background:#fdf6f6; border-left-color:#c1443f; }

/* ftpFolder is a comma list - one folder per product on the license.
   Right-aligned against its label it wrapped into a ragged block. */
.zcp5 .ftp-folders{ display:flex; flex-wrap:wrap; gap:.3rem; }
.zcp5 .ftp-folders code{
  font-size:.78rem; color:var(--zcp-ink);
  background:#f1f5f9; border:1px solid var(--zcp-line);
  border-radius:.25rem; padding:.1rem .4rem;
}
.zcp5 .ac-label .ftp-note{ font-weight:400; }

/* ---- 26.1  READ-ONLY, said once and plainly ---------------------
   The most common support question on FTP is "can I delete files once I
   have processed them", and the answer is no - so the note has to carry
   the alternative or it just leaves people stuck. Louder than an
   .ac-note because it governs everything below it, but not red: nothing
   is wrong, this is simply how the service works. */
.zcp5 .ftp-readonly{
  background:#0f172a; color:#e2e8f0;
  border-radius:.9rem; padding:1rem 1.15rem 1.1rem;
}
.zcp5 .ftp-readonly-h{
  display:flex; align-items:center; gap:.5rem;
  font-size:1.05rem; font-weight:700; color:#fff;
  margin-bottom:.5rem;
}
.zcp5 .ftp-readonly-h i{ color:#f0b429; }
.zcp5 .ftp-readonly p{
  margin:0 0 .55rem; font-size:var(--zcp-fs-sm); line-height:1.55; color:#cbd5e1;
}
.zcp5 .ftp-readonly p:last-of-type{ margin-bottom:.75rem; }
.zcp5 .ftp-readonly strong{ color:#fff; }
.zcp5 .ftp-readonly-q{
  font-weight:700; color:#fff !important;
  margin-top:.75rem !important; margin-bottom:.3rem !important;
}
.zcp5 .ftp-readonly-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--zcp-fs-xs); font-weight:700;
  color:#8fc4ff; text-decoration:none;
}
.zcp5 .ftp-readonly-link:hover{ color:#fff; text-decoration:underline; }
.zcp5 .ftp-readonly-link i{ font-size:.9em; }

/* ---- 26.2  WHY TWO SFTP PORTS ----------------------------------
   Quiet, not another dark panel - one loud thing per page. It answers a
   question the two rows above it provoke, so it sits under them rather
   than competing with the read-only note at the top. */
.zcp5 .ftp-why{ margin-top:.9rem; padding-top:.85rem; border-top:1px solid var(--zcp-line); }
.zcp5 .ftp-why-h{
  display:flex; align-items:center; gap:.4rem;
  font-size:var(--zcp-fs-xs); font-weight:700; color:var(--zcp-ink);
  margin-bottom:.4rem;
}
.zcp5 .ftp-why-h i{ color:#7f97bd; }
.zcp5 .ftp-why p{
  margin:0 0 .45rem; font-size:var(--zcp-fs-xs);
  color:var(--zcp-mut); line-height:1.55;
}
.zcp5 .ftp-why p:last-child{ margin-bottom:0; }
.zcp5 .ftp-why strong{ color:var(--zcp-ink); }
.zcp5 .ftp-why a{ color:#1f4d99; font-weight:600; }


/* ===================================================================
   27. UPGRADES
   =================================================================== */

/* The page and the modal offered the same thing in two different looks:
   an orange gradient header with orange buttons and black price badges
   in the modal, a purple gradient header on the page. One set of rules
   now, so an upgrade row reads the same wherever it is shown. */

/* what you hold today */
.zcp5 .up-group{
  border:1px solid var(--zcp-line); border-radius:.6rem;
  padding:.85rem .95rem; margin-bottom:.9rem;
  background:#f7f9fc;
}
.zcp5 .up-group:last-child{ margin-bottom:0; }
.zcp5 .up-from{ margin-bottom:.7rem; }
.zcp5 .up-from-name{
  display:flex; align-items:center; gap:.45rem;
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
}
.zcp5 .up-from-name i{ color:#7f97bd; }
.zcp5 .up-from-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:.4rem;
  margin-top:.25rem;
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
}
.zcp5 .up-from.up-from-solo{
  border-bottom:1px solid var(--zcp-line); padding-bottom:.7rem;
}

/* what you can move up to - a row that looks like the purchase it is */
.zcp5 .up-opt{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.6rem .8rem; margin-bottom:.4rem;
  background:#fff; border:1px solid var(--zcp-line); border-radius:.45rem;
  text-decoration:none; color:var(--zcp-ink);
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.zcp5 .up-opt:last-child{ margin-bottom:0; }
.zcp5 .up-opt:hover{
  border-color:#c3ccda; transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 10px 22px -16px rgba(15,23,42,.34);
}
.zcp5 .up-opt-name{
  display:flex; align-items:flex-start; gap:.5rem;
  font-size:var(--zcp-fs-sm); font-weight:700; line-height:1.35;
}
.zcp5 .up-opt-name i{ color:#3d9c40; margin-top:.15em; }
.zcp5 .up-opt-name small{
  display:block; font-size:var(--zcp-fs-xs); font-weight:400; color:var(--zcp-mut);
}
.zcp5 .up-opt-price{
  font-size:var(--zcp-fs-sm); font-weight:700; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--zcp-ink);
}

.zcp5 .up-note{
  display:flex; align-items:flex-start; gap:.4rem;
  margin:0 0 .8rem; font-size:var(--zcp-fs-xs);
  color:var(--zcp-mut); line-height:1.5;
}
.zcp5 .up-note i{ margin-top:.15em; color:#7f97bd; }

.zcp5 .up-policy{ list-style:none; margin:0; padding:0; }
.zcp5 .up-policy li{
  position:relative; padding-left:1.4rem; margin-bottom:.55rem;
  font-size:var(--zcp-fs-sm); color:var(--zcp-mut); line-height:1.55;
}
.zcp5 .up-policy li:last-child{ margin-bottom:0; }
.zcp5 .up-policy li::before{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:0; top:.15em; font-size:.72em; color:#3d9c40;
}
.zcp5 .up-policy strong{ color:var(--zcp-ink); }

/* the modal that shows the same rows */
.zcp5 .up-modal-head{ background:var(--zcp-ink); color:#fff; border-bottom:0; }
.zcp5 .up-modal-head .modal-title{ font-size:1rem; font-weight:700; }
.zcp5 .up-modal-btn{ font-size:var(--zcp-fs-xs); padding:.35rem .8rem; }


/* ===================================================================
   28. HISTORICAL ARCHIVE
   =================================================================== */

/* 442 releases across 23 years on this account. The list gets its own
   scroll pane so the page stays a page - the old one was 19,093px of
   bare dates - and the toolbar above it stays put while you scroll. */
.zcp5 .hd-card{ overflow:hidden; }

.zcp5 .hd-tools{
  padding:.8rem 1.15rem;
  border-bottom:1px solid var(--zcp-line);
  background:#f7f9fc;
}
.zcp5 .hd-years{ display:flex; flex-wrap:wrap; gap:.35rem; }
.zcp5 .hd-year{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.25rem .55rem; border-radius:.35rem;
  border:1px solid var(--zcp-line); background:#fff;
  font-size:var(--zcp-fs-xs); font-weight:600; color:var(--zcp-mut);
  cursor:pointer; font-variant-numeric:tabular-nums;
}
.zcp5 .hd-year span{
  font-size:.62rem; font-weight:700; color:var(--zcp-mut);
  background:#eef2f7; border-radius:.25rem; padding:.02rem .26rem;
}
.zcp5 .hd-year:hover{ border-color:#c3ccda; color:var(--zcp-ink); }
.zcp5 .hd-year.on{
  background:var(--zcp-ink); border-color:var(--zcp-ink); color:#fff;
}
.zcp5 .hd-year.on span{ background:rgba(255,255,255,.18); color:#fff; }

/* the pane */
.zcp5 .hd-list{ max-height:min(60vh, 620px); overflow-y:auto; }
.zcp5 .hd-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:.75rem;
  padding:.5rem 1.15rem;
  border-bottom:1px solid var(--zcp-line);
}
.zcp5 .hd-row:last-child{ border-bottom:0; }
.zcp5 .hd-row:hover{ background:#f7f9fc; }
.zcp5 .hd-pick{ display:flex; align-items:center; margin:0; cursor:pointer; }
.zcp5 .hd-cb{ width:1rem; height:1rem; cursor:pointer; }

.zcp5 .hd-when{ display:flex; align-items:baseline; gap:.5rem; min-width:0; }
.zcp5 .hd-month{
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
  white-space:nowrap;
}
.zcp5 .hd-day{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* one chip per format, grayed where that month never had one */
.zcp5 .hd-fmts{ display:flex; gap:.3rem; }
.zcp5 .hd-fmt{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:3rem; padding:.2rem .45rem;
  border:1px solid var(--zcp-line); border-radius:.3rem; background:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.02em;
  color:#1f4d99; text-decoration:none;
}
.zcp5 a.hd-fmt:hover{ background:var(--zcp-ink); border-color:var(--zcp-ink); color:#fff; }
.zcp5 .hd-fmt.off{ color:#c3ccda; background:#f8fafc; border-style:dashed; }

/* the bulk bar, which only exists once something is selected */
.zcp5 .hd-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding:.7rem 1.15rem;
  border-top:1px solid var(--zcp-line);
  background:var(--zcp-ink); color:#fff;
}
.zcp5 .hd-bar[hidden]{ display:none; }
.zcp5 .hd-bar-count{ font-size:var(--zcp-fs-sm); color:#cbd5e1; }
.zcp5 .hd-bar-count strong{ color:#fff; font-size:1.05rem; }
.zcp5 .hd-bar-act{ display:flex; align-items:center; gap:.5rem; }
.zcp5 .hd-bar-act label{ font-size:var(--zcp-fs-xs); color:#94a3b8; margin:0; }
.zcp5 .hd-bar-act .form-select{ width:5.5rem; font-size:var(--zcp-fs-xs); padding-right:1.8rem; }
.zcp5 .hd-go, .zcp5 .hd-clear{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .8rem; font-size:var(--zcp-fs-xs); white-space:nowrap;
}
.zcp5 .hd-clear{ background:transparent; border-color:rgba(255,255,255,.3); color:#fff; }
.zcp5 .hd-clear:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* said before the transfer starts, not after */
.zcp5 .hd-warn{
  padding:.6rem 1.15rem;
  background:#fff7e8; border-top:1px solid #f5dcae;
  font-size:var(--zcp-fs-xs); color:#9a5b06; line-height:1.5;
}
.zcp5 .hd-warn[hidden]{ display:none; }


/* ===================================================================
   29. BOUNDARY DATA
   =================================================================== */

/* One card per purchase. There are rarely many - 27 live entitlements
   across the whole site - so each one can afford to say what it is,
   what area it covers and how big it is. */
.zcp5 .pg-count{
  font-size:var(--zcp-fs-sm); color:var(--zcp-mut);
  margin:0 0 .9rem;
}
.zcp5 .pg-count strong{ color:var(--zcp-ink); }

/*  Spacing is the Bootstrap row gutter's job now that these sit in
    col-lg-6 columns like the download cards; the equal-height rule for
    both lives with the .dl-card block further down. */

.zcp5 .pg-meta{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  margin-bottom:.7rem;
}
.zcp5 .pg-meta a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.zcp5 .pg-meta a:hover{ color:var(--zcp-ink); }

/* the criteria the file was cut from */
.zcp5 .pg-crit{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap:.5rem .9rem; margin:0 0 .9rem; padding:.7rem .85rem;
  background:#f7f9fc; border:1px solid var(--zcp-line); border-radius:.5rem;
}
.zcp5 .pg-crit > div{ min-width:0; }
.zcp5 .pg-crit dt{
  font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--zcp-mut); margin:0 0 .1rem;
}
.zcp5 .pg-crit dd{
  font-size:var(--zcp-fs-sm); color:var(--zcp-ink); margin:0;
  overflow-wrap:anywhere;
}

.zcp5 .pg-act{
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem .9rem;
}
.zcp5 .pg-dl{ display:inline-flex; align-items:center; gap:.45rem; }
/* the size rides on the button, because the national file is 810MB */
.zcp5 .pg-dl span{
  font-size:.72rem; font-weight:600; opacity:.75;
  font-variant-numeric:tabular-nums;
}
.zcp5 .pg-exp{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  font-variant-numeric:tabular-nums;
}
.zcp5 .pg-exp.ended{ color:#a32020; }
.zcp5 .pg-note{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut); line-height:1.5;
}
.zcp5 .pg-note i{ color:#7f97bd; }
.zcp5 .pg-regen{ font-size:var(--zcp-fs-xs); padding:.35rem .75rem; }


/* ===================================================================
   30. ZIP CODE TOOL
   =================================================================== */

/* The tool is three pages, and each had written its own sub-nav and its
   own 500-line style block. This is the shared half: the second nav bar,
   and the landing page that sends you into the two tools. */

/* ---- the second bar --------------------------------------------
   inc-product-bar says where you are in the account; this says where
   you are in the tool. It sits directly under it. */
/*  Stacks under the product bar, which itself sits under the site
    header. z-index 7 keeps it below the bar (8), which is below the
    header (9) - this site overrides Bootstrap's stacking, so anything
    in the 1000s paints straight over the header. */
.zcp5 .zct-nav{
  position:sticky;
  top:calc(var(--zcp-topnav-h, 76px) + 52px);
  z-index:7;
  background:#fff; border-bottom:1px solid var(--zcp-line);
}
.zcp5 .zct-nav-inner{
  display:flex; align-items:center; gap:.3rem;
  max-width:1320px; margin:0 auto; padding:.4rem 1rem;
  overflow-x:auto; scrollbar-width:none;
}
.zcp5 .zct-nav-inner::-webkit-scrollbar{ display:none; }
.zcp5 .zct-nav-link{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .8rem; border-radius:.4rem;
  font-size:var(--zcp-fs-xs); font-weight:600;
  color:var(--zcp-mut); text-decoration:none; white-space:nowrap;
}
.zcp5 .zct-nav-link i{ font-size:.9em; color:#8fa3c4; }
.zcp5 .zct-nav-link:hover{ background:#f1f5f9; color:var(--zcp-ink); }
.zcp5 .zct-nav-link.active{ background:var(--zcp-ink); color:#fff; }
.zcp5 .zct-nav-link.active i{ color:#fff; }
.zcp5 .zct-nav-beta{
  margin-left:auto; padding:.15rem .4rem; border-radius:.25rem;
  background:#fff7e8; border:1px solid #f5dcae; color:#9a5b06;
  font-size:.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em;
}

/* ---- what you can reach, in one line ---------------------------- */
.zcp5 .zct-status{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .7rem;
  margin:0 0 1rem; font-size:var(--zcp-fs-sm); color:var(--zcp-mut);
}
.zcp5 .zct-status-tier{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .6rem; border-radius:.35rem;
  font-size:var(--zcp-fs-xs); font-weight:700;
  background:#eefaf0; color:#1f7a33; border:1px solid #c7ebd0;
}
.zcp5 .zct-status-tier i{ font-size:.9em; }

/* ---- the two tools ---------------------------------------------
   The point of the page. Two equal cards, each a single link. */
.zcp5 .zct-tools{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:.9rem; margin-bottom:1rem;
}
.zcp5 .zct-tool{
  display:flex; flex-direction:column;
  padding:1.1rem 1.15rem;
  background:#fff; border:1px solid var(--zcp-line); border-radius:.7rem;
  text-decoration:none; color:var(--zcp-ink);
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.zcp5 .zct-tool:hover{
  border-color:#c3ccda; transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 14px 28px -18px rgba(15,23,42,.4);
}
.zcp5 .zct-tool-head{
  display:flex; align-items:center; gap:.5rem;
  font-size:1.05rem; font-weight:700; margin-bottom:.35rem;
}
.zcp5 .zct-tool-head i{ color:#3d9c40; }
.zcp5 .zct-tool-say{
  font-size:var(--zcp-fs-sm); color:var(--zcp-mut); line-height:1.5;
  margin-bottom:.7rem;
}
.zcp5 .zct-tool-list{ list-style:none; margin:0 0 .9rem; padding:0; }
.zcp5 .zct-tool-list li{
  position:relative; padding-left:1.15rem; margin-bottom:.3rem;
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut); line-height:1.5;
}
.zcp5 .zct-tool-list li::before{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:0; top:.15em; font-size:.68em; color:#3d9c40;
}
.zcp5 .zct-tool-go{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:auto;
  font-size:var(--zcp-fs-sm); font-weight:700; color:#1f4d99;
}
.zcp5 .zct-tool:hover .zct-tool-go i{ transform:translateX(2px); }
.zcp5 .zct-tool-go i{ transition:transform .14s ease; font-size:.85em; }

/* ---- the upgrade rung ------------------------------------------- */
.zcp5 .zct-ladder{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .7rem;
  margin-bottom:.8rem;
}
.zcp5 .zct-rung{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .7rem; border-radius:.45rem;
  border:1px solid var(--zcp-line); background:#f7f9fc;
  font-size:var(--zcp-fs-sm); font-weight:700;
}
.zcp5 .zct-rung small{
  font-size:var(--zcp-fs-xs); font-weight:400; color:var(--zcp-mut);
}
.zcp5 .zct-rung.on i{ color:#3d9c40; }
.zcp5 .zct-rung.next{ background:#fff; border-color:#c3ccda; }
.zcp5 .zct-rung.next i{ color:#1f4d99; }
.zcp5 .zct-rung-sep{ color:#c3ccda; font-size:.8rem; }

/* ---- what it does ----------------------------------------------- */
.zcp5 .zct-feats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap:.9rem;
}
.zcp5 .zct-feat{ display:flex; gap:.6rem; }
.zcp5 .zct-feat > i{
  flex:0 0 auto; width:1.9rem; height:1.9rem; border-radius:.4rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f1f5f9; color:#7f97bd; font-size:.85rem;
}
.zcp5 .zct-feat h4{
  font-size:var(--zcp-fs-sm); font-weight:700; margin:0 0 .15rem;
  color:var(--zcp-ink);
}
.zcp5 .zct-feat p{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut); margin:0; line-height:1.5;
}

/* ---- the tier ladder -------------------------------------------- */
.zcp5 .zct-access{ list-style:none; margin:0 0 .8rem; padding:0; }
.zcp5 .zct-access li{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .7rem; margin-bottom:.35rem;
  border:1px solid var(--zcp-line); border-radius:.45rem;
}
.zcp5 .zct-access li:last-child{ margin-bottom:0; }
.zcp5 .zct-access li.on{ background:#f7fdf8; border-color:#c7ebd0; }
.zcp5 .zct-access li.on > i{ color:#3d9c40; }
.zcp5 .zct-access li.off{ background:#f8fafc; }
.zcp5 .zct-access li.off > i{ color:#c3ccda; }
.zcp5 .zct-access li.off .zct-access-name,
.zcp5 .zct-access li.off .zct-access-n{ color:var(--zcp-mut); }
.zcp5 .zct-access-name{ font-size:var(--zcp-fs-sm); font-weight:700; }
.zcp5 .zct-access-n{
  margin-left:auto; font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  font-variant-numeric:tabular-nums;
}
.zcp5 .zct-access-note{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut); line-height:1.5; margin:0;
}

/* ---- feedback, folded away by default --------------------------- */
.zcp5 .zct-fb-head{ cursor:pointer; user-select:none; }
.zcp5 .zct-fb-chev{ transition:transform .16s ease; color:#8fa3c4; font-size:.8em; }
.zcp5 .zct-fb-head.collapsed .zct-fb-chev{ transform:rotate(-90deg); }

.zcp5 .zct-admin{ margin-top:1rem; text-align:center; }
.zcp5 .zct-admin a{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut); text-decoration:none;
}
.zcp5 .zct-admin a:hover{ color:var(--zcp-ink); text-decoration:underline; }


/* ---- Your access, as a stack rather than a menu -----------------
   The editions are cumulative, so the list reads downward and each row
   says what it ADDS. Colors are the established product triad, same as
   the pricing cards: Standard amber, Deluxe green, Business red. */
.zcp5 .zct-acc-lead{
  font-size:var(--zcp-fs-sm); color:var(--zcp-mut);
  line-height:1.55; margin:0 0 .8rem;
}
.zcp5 .zct-acc-lead strong{ color:var(--zcp-ink); }

.zcp5 .zct-acc{ list-style:none; margin:0 0 .9rem; padding:0; }
.zcp5 .zct-acc li{
  position:relative; display:flex; align-items:center; gap:.6rem;
  padding:.5rem .7rem .5rem .85rem; margin-bottom:.3rem;
  border:1px solid var(--zcp-line); border-radius:.45rem;
  background:#f8fafc;
}
.zcp5 .zct-acc li:last-child{ margin-bottom:0; }
/* the tier's own color, as a rule down the edge */
.zcp5 .zct-acc li::before{
  content:""; position:absolute; left:0; top:.35rem; bottom:.35rem;
  width:3px; border-radius:3px; background:#dfe5ec;
}
.zcp5 .zct-acc li.t-entry.on::before{ background:#c98a17; }
.zcp5 .zct-acc li.t-mid.on::before  { background:#7d9a2e; }
.zcp5 .zct-acc li.t-top.on::before  { background:#AB2827; }
.zcp5 .zct-acc li.on{ background:#fff; }
.zcp5 .zct-acc li.next{
  background:#fff; border-color:#c3ccda; border-style:dashed;
}

.zcp5 .zct-acc-mark{
  flex:0 0 auto; width:1.35rem; height:1.35rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#eef2f7; color:#9aa8bd; font-size:.62rem;
}
.zcp5 .zct-acc li.on .zct-acc-mark{ background:#eefaf0; color:#1f7a33; }
.zcp5 .zct-acc-body{ display:flex; align-items:baseline; gap:.5rem; flex:1 1 auto; min-width:0; }
.zcp5 .zct-acc-name{ font-size:var(--zcp-fs-sm); font-weight:700; }
.zcp5 .zct-acc li:not(.on) .zct-acc-name{ color:var(--zcp-mut); }
.zcp5 .zct-acc-n{
  margin-left:auto; font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  text-align:right; font-variant-numeric:tabular-nums;
}
.zcp5 .zct-acc-cta{ width:100%; justify-content:center; }
.zcp5 .zct-acc-note{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  line-height:1.5; margin:.6rem 0 0;
}

/* ---- form controls, one size down ------------------------------
   The tool's inputs were sized for a page with nothing else on it. Next
   to the account cards they read as oversized, so the whole family comes
   down to the account system's own scale. Applies to the feedback form
   here and, once the tool bodies come inside .zcp5, to the search and
   radius forms too. */
.zcp5 .form-control,
.zcp5 .form-select,
.zcp5 input[type="text"],
.zcp5 input[type="number"],
.zcp5 input[type="email"],
.zcp5 input[type="search"],
.zcp5 select,
.zcp5 textarea{
  font-size:var(--zcp-fs-sm);
  padding:.4rem .6rem;
  line-height:1.4;
  border-radius:.4rem;
}
.zcp5 textarea.form-control{ min-height:5.5rem; }
.zcp5 .form-label,
.zcp5 label{
  font-size:var(--zcp-fs-xs);
  font-weight:600;
  color:var(--zcp-ink);
  margin-bottom:.2rem;
}
.zcp5 .form-check-label{ font-weight:400; color:var(--zcp-mut); }
.zcp5 .form-text{ font-size:.7rem; }


/* ---- form controls on the tool pages ---------------------------
   The tool ships its own sizing in a page-level <style>, which lands
   after this file and therefore wins on order. These carry one extra
   class so they take the cascade back without resorting to !important. */
.zcp5 .zct-form .form-control,
.zcp5 .zct-form .form-select,
.zcp5 .zct-form input[type="text"],
.zcp5 .zct-form input[type="number"],
.zcp5 .zct-form select,
.zcp5 .zct-form textarea{
  font-size:var(--zcp-fs-sm);
  padding:.35rem .55rem;
  line-height:1.4;
  height:auto;
  min-height:0;
  border-radius:.4rem;
}
.zcp5 .zct-form label,
.zcp5 .zct-form .form-label{
  font-size:var(--zcp-fs-xs);
  font-weight:600;
  margin-bottom:.15rem;
}


/* ===================================================================
   31. ZIP CODE TOOL - SEARCH & RADIUS
   ===================================================================
   Search and Radius each carried ~500 lines of page-level CSS and 69 of
   the 77 selectors were identical. This is that, once, in v5.1 language:
   flat cards instead of gradient headers, the account button instead of
   four Bootstrap colors, and the product triad wherever an edition is
   named. Class names are unchanged - they are JS and Bootstrap hooks. */

/* ---- panels ------------------------------------------------------ */
.zcp5 .search-card{
  background:#fff; border:1px solid var(--zcp-line); border-radius:.7rem;
  overflow:hidden; margin-bottom:.9rem;
}
.zcp5 .search-card > .card-header{
  display:flex; align-items:center; gap:.45rem;
  padding:.7rem 1.15rem;
  background:#f7f9fc; border-bottom:1px solid var(--zcp-line);
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
}
.zcp5 .search-card > .card-header i{ color:#8fa3c4; font-size:.9em; }
.zcp5 .search-card > .card-body{ padding:1rem 1.15rem 1.15rem; }

/* ---- the results container --------------------------------------
   The table now IS the bottom of this card: the body carries no padding,
   the grid sits flush to the edges, and the tips read as a footer strip.
   Previously the grid floated inside 1.5rem of padding within a card with
   its own 2px border, which is what made it look bolted on. */
.zcp5 .zct-results{ overflow:hidden; }
.zcp5 .zct-results > .card-header{
  padding:.7rem 1.15rem;
  background:#f7f9fc; border-bottom:1px solid var(--zcp-line);
}
.zcp5 .zct-results > .ac-body{ padding:0; }
.zcp5 .zct-results > .ac-body > .zcp-keynote{ margin:1rem 1.15rem; }

.zcp5 .results-header{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.6rem;
}
/* was 1.25rem in a navy gradient bar */
.zcp5 .results-header h2{
  display:flex; align-items:center; gap:.45rem;
  margin:0; font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
}
.zcp5 .results-header h2 i{ color:#8fa3c4; font-size:.9em; }
.zcp5 .results-count{
  padding:.15rem .5rem; border-radius:.3rem;
  background:#eefaf0; color:#1f7a33; border:1px solid #c7ebd0;
  font-size:var(--zcp-fs-xs); font-weight:700;
  font-variant-numeric:tabular-nums;
}
.zcp5 .results-info{ font-size:var(--zcp-fs-xs); color:var(--zcp-mut); }

.zcp5 .export-buttons{ display:flex; gap:.35rem; flex-wrap:wrap; }
.zcp5 .zct-exp{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.3rem .65rem; font-size:var(--zcp-fs-xs); white-space:nowrap;
}

/* the grid, flush */
.zcp5 .grid-loading{ position:relative; }
.zcp5 #myGrid{ height:600px; width:100%; margin:0; }
.zcp5 .grid-loading-overlay{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; background:rgba(255,255,255,.92);
}
.zcp5 .grid-loading-overlay .spinner-border{ width:1.6rem; height:1.6rem; }
.zcp5 .grid-tips{
  display:flex; align-items:flex-start; gap:.4rem;
  padding:.55rem 1.15rem;
  background:#f7f9fc; border-top:1px solid var(--zcp-line);
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut); line-height:1.5;
}
.zcp5 .grid-tips i{ color:#c98a17; margin-top:.15em; }

/* ---- the table itself -------------------------------------------- */
.zcp5 .tabulator{
  border:0; border-radius:0; background:#fff; overflow:hidden;
  font-size:var(--zcp-fs-xs);
}
.zcp5 .tabulator .tabulator-header{
  background:#fff; border-bottom:1px solid var(--zcp-line);
  color:var(--zcp-ink); font-weight:700;
}
.zcp5 .tabulator .tabulator-header .tabulator-col{
  background:transparent; border-right:1px solid var(--zcp-line);
}
.zcp5 .tabulator .tabulator-header .tabulator-col-content{ padding:.5rem .6rem; }
.zcp5 .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover{ background:#f1f5f9; }
.zcp5 .tabulator-row.tabulator-row-even{ background:#fbfcfe; }
.zcp5 .tabulator-row.tabulator-selectable:hover{ background:#f1f5f9; }
.zcp5 .tabulator-row.tabulator-selected{ background:#eaf2ff; }

/* ---- modals ------------------------------------------------------
   Were a navy gradient head with a white-inverted close button, and the
   body ran at page size. Now the same flat head as every card. */
.zcp5 .modal-fields .modal-header{
  background:#f7f9fc; color:var(--zcp-ink);
  border-bottom:1px solid var(--zcp-line);
  padding:.7rem 1.15rem;
}
.zcp5 .modal-fields .modal-title{ font-size:var(--zcp-fs-sm); font-weight:700; }
.zcp5 .modal-fields .btn-close{ filter:none; font-size:.7rem; }
.zcp5 .modal-fields .modal-body{
  max-height:70vh; overflow-y:auto;
  padding:1rem 1.15rem; font-size:var(--zcp-fs-sm);
}
.zcp5 .modal-fields .modal-footer{ padding:.6rem 1.15rem; }

/* ---- edition blocks inside the modals ---------------------------
   These were blue, green and purple gradients - three colors that mean
   nothing, on a site where the editions already have colors. Now the
   product triad, and as a rule rather than a color block: Standard
   amber, Deluxe green, Business red, exactly as the pricing cards and
   the Your Access ladder use them. */
.zcp5 .tier-card{
  border:1px solid var(--zcp-line); border-radius:.55rem;
  margin-bottom:.7rem; overflow:hidden;
}
.zcp5 .tier-card:last-child{ margin-bottom:0; }
.zcp5 .tier-card .tier-header{
  display:flex; align-items:center; gap:.45rem;
  padding:.5rem .8rem;
  background:#fff; color:var(--zcp-ink);
  border-bottom:1px solid var(--zcp-line);
  border-left:3px solid #dfe5ec;
  font-size:var(--zcp-fs-sm); font-weight:700;
}
.zcp5 .tier-card .tier-header i{ font-size:.9em; }
.zcp5 .tier-card.tier-standard .tier-header{ border-left-color:#c98a17; }
.zcp5 .tier-card.tier-standard .tier-header i{ color:#c98a17; }
.zcp5 .tier-card.tier-deluxe   .tier-header{ border-left-color:#7d9a2e; }
.zcp5 .tier-card.tier-deluxe   .tier-header i{ color:#7d9a2e; }
.zcp5 .tier-card.tier-business .tier-header{ border-left-color:#AB2827; }
.zcp5 .tier-card.tier-business .tier-header i{ color:#AB2827; }
.zcp5 .tier-card .tier-body{ padding:.7rem .8rem; }
.zcp5 .tier-card.tier-locked{ position:relative; opacity:.62; }
/*  The grid inside a locked tier must not take clicks - that is the
    point of locking it. But the overlay sits INSIDE .tier-body, so it
    inherited this and the Upgrade button was unclickable. The overlay
    takes its clicks back explicitly. */
.zcp5 .tier-card.tier-locked .tier-body{ pointer-events:none; }
.zcp5 .tier-card.tier-locked .tier-locked-overlay{ pointer-events:auto; }
.zcp5 .tier-locked-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem; background:rgba(255,255,255,.72); text-align:center;
}
.zcp5 .tier-locked-overlay .lock-icon{ font-size:1.1rem; color:#9aa8bd; }
.zcp5 .tier-locked-overlay p{
  margin:0 0 .1rem; font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
}
.zcp5 .tier-locked-overlay .zcp-cta{
  padding:.3rem .7rem; font-size:var(--zcp-fs-xs);
}

/* ---- field pickers ----------------------------------------------- */
.zcp5 .tier-checkbox-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap:.15rem .8rem;
}
.zcp5 .tier-checkbox-grid .form-check{
  margin:0; padding:.2rem .35rem .2rem 1.6rem; border-radius:.3rem;
}
.zcp5 .tier-checkbox-grid .form-check:hover{ background:#f1f5f9; }
.zcp5 .tier-checkbox-grid .form-check-label{ font-size:var(--zcp-fs-xs); }
.zcp5 .tier-checkbox-grid .form-check-input:checked + .form-check-label{
  color:var(--zcp-ink); font-weight:600;
}
.zcp5 .tier-check-all{
  margin-left:auto; font-size:var(--zcp-fs-xs); font-weight:600;
  color:#1f4d99; background:none; border:0; padding:0; cursor:pointer;
}
.zcp5 .tier-check-all:hover{ text-decoration:underline; }

/* ---- selected-field chips ---------------------------------------- */
.zcp5 .returned-fields-display{
  display:flex; flex-wrap:wrap; align-items:center; gap:.3rem;
  min-height:38px;
}
.zcp5 .field-pill{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .5rem; border-radius:.3rem;
  background:#f1f5f9; border:1px solid var(--zcp-line);
  font-size:var(--zcp-fs-xs); color:var(--zcp-ink);
}
.zcp5 .field-pill .pill-icon{ color:#8fa3c4; font-size:.85em; }
.zcp5 .field-pill .pill-remove{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px;
  color:#9aa8bd; cursor:pointer; font-size:.8em; background:none; border:0; padding:0;
}
.zcp5 .field-pill .pill-remove:hover{ color:#a32020; }
.zcp5 .multi-badge{
  display:inline-block; padding:.05rem .3rem; border-radius:.25rem;
  background:#eef2f7; color:var(--zcp-mut);
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}

/* ---- search rows -------------------------------------------------- */
.zcp5 .search-fields-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap:.7rem .9rem;
}
/*  NOT COSMETIC. Every search row is rendered and the modal toggles
    .active to choose which ones show. Drop these two and all of them
    appear at once regardless of the checkbox - which is what happened
    when this section was first consolidated. */
.zcp5 .search-field-item{ display:none; min-width:0; }
.zcp5 .search-field-item.active{ display:block; }
.zcp5 .search-field-item label{
  display:flex; align-items:center; gap:.3rem;
  font-size:var(--zcp-fs-xs); font-weight:600; margin-bottom:.15rem;
}
.zcp5 .search-field-item .info-icon{ color:#8fa3c4; cursor:help; font-size:.85em; }
.zcp5 .search-field-item .info-icon:hover{ color:var(--zcp-ink); }
.zcp5 .between-inputs{ display:flex; align-items:center; gap:.35rem; }
.zcp5 .between-inputs input{ flex:1 1 0; min-width:0; }
.zcp5 .between-inputs .between-separator{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut); flex:0 0 auto;
}
.zcp5 .param-option{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-bottom:.4rem;
}
.zcp5 .param-option .form-check{ margin:0; }

/* ---- radius-only -------------------------------------------------- */
.zcp5 .radius-params{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap:.7rem .9rem; margin-bottom:.8rem;
}
.zcp5 .radius-param-group label{
  display:block; font-size:var(--zcp-fs-xs); font-weight:600; margin-bottom:.15rem;
}
.zcp5 .radius-param-group .required{ color:#a32020; }
.zcp5 .radius-instruction{
  display:flex; align-items:flex-start; gap:.4rem;
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut); line-height:1.5;
  margin-bottom:.8rem;
}
.zcp5 .radius-instruction i{ color:#7f97bd; margin-top:.15em; }
.zcp5 .anchor-scroll{ scroll-margin-top:150px; }

/* ---- the run button ---------------------------------------------- */
.zcp5 .action-buttons{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--zcp-line);
}
.zcp5 .action-buttons .btn{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--zcp-fs-sm); padding:.45rem .9rem; border-radius:.45rem;
}

/*  The only breakpoint from the old page blocks that auto-fit does not
    already cover: the run button stacks on a narrow screen. */
@media (max-width: 575px){
  .zcp5 .action-buttons{ flex-direction:column; align-items:stretch; }
  .zcp5 .action-buttons .btn{ width:100%; justify-content:center; }
}


/* ---- icon + label on a CTA --------------------------------------
   .zcp-cta is inline-block in product-system, so an icon sitting directly
   before the label runs into it. Account pages use that form everywhere,
   so they get flex and a gap here instead of at each call site. */
.zcp5 .zcp-cta:has(> i:first-child),
.zcp5 .zct-acc-cta,
.zcp5 .tier-locked-overlay .zcp-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
}


/* ---- the pitch, for an account with no subscription --------------
   ZIP Code Tool is in the account nav on every page now, so people who
   have not bought a database will land here. This is what they get. */
.zcp5 .zct-pitch{ margin:0 0 1.1rem; }
.zcp5 .zct-pitch h2{
  font-size:1.35rem; font-weight:700; color:var(--zcp-ink);
  margin:0 0 .4rem; text-wrap:balance;
}
.zcp5 .zct-pitch p{
  font-size:var(--zcp-fs-sm); color:var(--zcp-mut);
  line-height:1.6; margin:0; max-width:60ch;
}

/* the two tools, shown but not linked */
.zcp5 .zct-tools-locked .zct-tool{ cursor:default; }
.zcp5 .zct-tools-locked .zct-tool:hover{
  transform:none; border-color:var(--zcp-line); box-shadow:none;
}

/* the editions */
.zcp5 .zct-eds{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap:.6rem; margin-bottom:.8rem;
}
.zcp5 .zct-ed{
  display:flex; flex-direction:column; gap:.15rem;
  padding:.7rem .8rem;
  border:1px solid var(--zcp-line); border-radius:.5rem;
  border-top:3px solid #dfe5ec; background:#fff;
}
.zcp5 .zct-ed.t-entry{ border-top-color:#c98a17; }
.zcp5 .zct-ed.t-mid  { border-top-color:#7d9a2e; }
.zcp5 .zct-ed.t-top  { border-top-color:#AB2827; }
.zcp5 .zct-ed-name{ font-size:var(--zcp-fs-sm); font-weight:700; }
.zcp5 .zct-ed-price{
  font-size:1.15rem; font-weight:700; color:var(--zcp-ink);
  font-variant-numeric:tabular-nums;
}
.zcp5 .zct-ed-price small{
  font-size:var(--zcp-fs-xs); font-weight:400; color:var(--zcp-mut);
}
.zcp5 .zct-ed-fields{ font-size:var(--zcp-fs-xs); color:var(--zcp-mut); }
.zcp5 .zct-buy{ width:100%; }


/* ===================================================================
   32. STORE LOCATOR
   ===================================================================
   Thirteen pages plus eight markup includes, all of them running on a
   2012 stylesheet (content/store_locator/account_tools/styles.css) whose
   buttons were GIF sprites and whose "table" was a 98%-wide box with
   hairline borders. That file is NOT linked by any v5.1 fork; everything
   it did lives here in the account system's own language.

   Two of its class names had to be retired rather than restyled:
     .active / .disabled  - a bare color pair on a <span>, which
       collides head-on with Bootstrap's .active. Store status is now
       .sl-pill on / off.
     .hidden - was font-weight:bold, color:#69c. The v5.1 pages use
       .hidden to MEAN hidden, so a page that loaded both files showed
       its collapsed panels in blue bold.                            */

/* ---- the second bar ---------------------------------------------
   Same stack as the ZIP Code Tool's: site header 9, product bar 8,
   this 7. Every page used to hand-write its own copy of these seven
   links; it is now includes/inc-sl-nav.asp, driven by slActive. */
.zcp5 .sl-nav{
  position:sticky;
  top:calc(var(--zcp-topnav-h, 76px) + 52px);
  z-index:7;
  background:#fff; border-bottom:1px solid var(--zcp-line);
}
.zcp5 .sl-nav-inner{
  display:flex; align-items:center; gap:.3rem;
  max-width:1320px; margin:0 auto; padding:.4rem 1rem;
  overflow-x:auto; scrollbar-width:none;
}
.zcp5 .sl-nav-inner::-webkit-scrollbar{ display:none; }
.zcp5 .sl-nav-link{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .8rem; border-radius:.4rem;
  font-size:var(--zcp-fs-xs); font-weight:600;
  color:var(--zcp-mut); text-decoration:none; white-space:nowrap;
}
.zcp5 .sl-nav-link i{ font-size:.9em; color:#8fa3c4; }
.zcp5 .sl-nav-link:hover{ background:#f1f5f9; color:var(--zcp-ink); }
.zcp5 .sl-nav-link.active{ background:var(--zcp-ink); color:#fff; }
.zcp5 .sl-nav-link.active i{ color:#fff; }

/* ---- the third level: actions on the current record set ----------
   Was <ul class="inlineImageMenu"> with .cmsAdd / .cmsViewAll /
   .cmsImport - 25px of left padding holding a background GIF. The
   icons are glyphs now, so they inherit color and scale with the text
   instead of staying 16px gray forever. */
.zcp5 .sl-actions{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin:0 0 1rem; padding:0; list-style:none;
}
.zcp5 .sl-action{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .75rem; border-radius:.4rem;
  border:1px solid var(--zcp-line); background:#fff;
  font-size:var(--zcp-fs-xs); font-weight:600;
  color:var(--zcp-ink); text-decoration:none; white-space:nowrap;
}
.zcp5 .sl-action i{ color:#8fa3c4; font-size:.95em; }
.zcp5 .sl-action:hover{
  border-color:#c3ccda; background:#f7f9fc; color:var(--zcp-ink);
}
.zcp5 .sl-action.current{
  background:#f1f5f9; border-color:#c3ccda; color:var(--zcp-ink);
}
.zcp5 .sl-action.go{
  background:var(--zcp-go); border-color:var(--zcp-go); color:#fff;
}
.zcp5 .sl-action.go i{ color:#fff; }
.zcp5 .sl-action.go:hover{ filter:brightness(1.08); color:#fff; background:var(--zcp-go); }

/* ---- status pill ------------------------------------------------- */
.zcp5 .sl-pill{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.15rem .5rem; border-radius:.3rem;
  font-size:var(--zcp-fs-xs); font-weight:700; white-space:nowrap;
}
.zcp5 .sl-pill i{ font-size:.85em; }
.zcp5 .sl-pill.on { background:#eefaf0; color:#1f7a33; border:1px solid #c7ebd0; }
.zcp5 .sl-pill.off{ background:#fdf3f3; color:#a32020; border:1px solid #f0cfcf; }
.zcp5 .sl-pill.wait{ background:#fff7e8; color:#9a5b06; border:1px solid #f5dcae; }
.zcp5 .sl-pill.star{ background:#fffbe8; color:#8a6a08; border:1px solid #f0e2a8; }

/* ---- the filter strip -------------------------------------------
   Was a bare row of unstyled <input>s with size="20" doing the sizing.
   Auto-fit so it wraps to one control per row on a phone rather than
   overflowing the card. */
.zcp5 .sl-filter{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:.5rem;
}
.zcp5 .sl-filter .f{ display:flex; flex-direction:column; gap:.15rem; }
.zcp5 .sl-filter .f label{
  font-size:.68rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--zcp-mut); margin:0;
}
.zcp5 .sl-filter input[type="text"],
.zcp5 .sl-filter select{
  font-size:var(--zcp-fs-sm); padding:.35rem .55rem;
  border:1px solid var(--zcp-line); border-radius:.4rem;
  background:#fff; min-width:9rem;
}
.zcp5 .sl-filter .f.wide input{ min-width:14rem; }
.zcp5 .sl-filter .f.narrow input{ min-width:7rem; }
.zcp5 .sl-filter-go{ display:flex; gap:.35rem; align-items:center; }

/* ---- tables flush to the card ------------------------------------
   Same treatment as the archive and the tool's results grid: the table
   IS the bottom of the card, so .ac-body loses its padding and the
   header/footer strips carry their own. */
.zcp5 .sl-tablecard > .ac-body{ padding:0; }
.zcp5 .sl-tablecard > .ac-body > .sl-strip{ padding:.75rem 1.15rem; }
.zcp5 .sl-tablecard > .ac-body > .sl-strip.top{
  border-bottom:1px solid var(--zcp-line); background:#fbfcfe;
}
.zcp5 .sl-tablecard > .ac-body > .sl-strip.bot{
  border-top:1px solid var(--zcp-line); background:#fbfcfe;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem;
}
.zcp5 .sl-tablewrap{ overflow-x:auto; }
.zcp5 .sl-tbl{
  width:100%; margin:0; border-collapse:collapse;
  font-size:var(--zcp-fs-sm);
}
.zcp5 .sl-tbl th{
  padding:.55rem .8rem; text-align:left; white-space:nowrap;
  background:#f7f9fc; border-bottom:1px solid var(--zcp-line);
  font-size:var(--zcp-fs-xs); font-weight:700; color:var(--zcp-ink);
}
.zcp5 .sl-tbl td{
  padding:.55rem .8rem; border-bottom:1px solid #eef2f7;
  vertical-align:middle; color:var(--zcp-ink);
}
.zcp5 .sl-tbl tbody tr:hover{ background:#fbfcfe; }
.zcp5 .sl-tbl tbody tr:last-child td{ border-bottom:0; }
.zcp5 .sl-tbl .num{ font-variant-numeric:tabular-nums; text-align:right; }
.zcp5 .sl-tbl .n{
  width:1%; color:var(--zcp-mut); font-variant-numeric:tabular-nums;
  font-size:var(--zcp-fs-xs);
}
.zcp5 .sl-tbl .chk{ width:1%; }
.zcp5 .sl-tbl .act{ width:1%; white-space:nowrap; text-align:right; }
.zcp5 .sl-tbl .sl-name{ font-weight:600; }
.zcp5 .sl-tbl .sl-sub{
  display:block; font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  font-weight:400;
}

/* row actions - were two bare Font Awesome links with &nbsp;&nbsp; */
.zcp5 .sl-rowact{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.7rem; height:1.7rem; border-radius:.35rem;
  color:var(--zcp-mut); text-decoration:none;
}
.zcp5 .sl-rowact:hover{ background:#f1f5f9; color:var(--zcp-ink); }
.zcp5 .sl-rowact.danger:hover{ background:#fdf3f3; color:#a32020; }

/* sort control - was two 10x10 GIF arrows side by side in every <th> */
.zcp5 .sl-sort{
  display:inline-flex; flex-direction:column; margin-left:.3rem;
  vertical-align:middle; line-height:.62;
}
.zcp5 .sl-sort a{ color:#c3ccda; text-decoration:none; font-size:.62rem; }
.zcp5 .sl-sort a:hover{ color:var(--zcp-ink); }
.zcp5 .sl-sort a.on{ color:var(--zcp-accent); }

/* ---- key/value rows ---------------------------------------------
   The settings and premium pages laid these out as a <label> followed
   by three &nbsp; and a value. */
.zcp5 .sl-kv{ display:grid; gap:.5rem .9rem; margin:0; }
.zcp5 .sl-kv > .r{
  display:grid; grid-template-columns:minmax(8rem, 12rem) 1fr;
  gap:.25rem .9rem; align-items:baseline;
  padding-bottom:.5rem; border-bottom:1px solid #eef2f7;
}
.zcp5 .sl-kv > .r:last-child{ border-bottom:0; padding-bottom:0; }
.zcp5 .sl-kv dt,
.zcp5 .sl-kv .k{
  font-size:var(--zcp-fs-xs); font-weight:600; color:var(--zcp-mut);
  margin:0;
}
.zcp5 .sl-kv dd,
.zcp5 .sl-kv .v{
  font-size:var(--zcp-fs-sm); color:var(--zcp-ink); margin:0;
  overflow-wrap:anywhere;
}
.zcp5 .sl-kv .v code{
  font-size:var(--zcp-fs-xs); background:#f1f5f9; padding:.12rem .35rem;
  border-radius:.25rem; color:var(--zcp-ink);
}
@media (max-width:575.98px){
  .zcp5 .sl-kv > .r{ grid-template-columns:1fr; }
}

/* ---- forms -------------------------------------------------------
   Legacy markup is <label> + <input> + <br />, with no wrapper to hang
   a grid on. .sl-form gives the label a column without the pages having
   to be re-marked-up field by field. */
.zcp5 .sl-form .sl-fld{
  display:grid; grid-template-columns:minmax(8rem, 12rem) 1fr;
  gap:.25rem .9rem; align-items:start;
  margin-bottom:.7rem;
}
.zcp5 .sl-form .sl-fld > label{
  font-size:var(--zcp-fs-xs); font-weight:600; color:var(--zcp-ink);
  padding-top:.4rem; margin:0;
}
.zcp5 .sl-form .sl-fld > label .req{ color:#c1443f; }
.zcp5 .sl-form .sl-fld .sl-in{ min-width:0; }
.zcp5 .sl-form input[type="text"],
.zcp5 .sl-form input[type="email"],
.zcp5 .sl-form input[type="number"],
.zcp5 .sl-form select,
.zcp5 .sl-form textarea{
  font-size:var(--zcp-fs-sm); padding:.35rem .55rem;
  border:1px solid var(--zcp-line); border-radius:.4rem;
  background:#fff; width:100%; max-width:34rem;
  line-height:1.4; height:auto; min-height:0;
}
.zcp5 .sl-form textarea{ max-width:44rem; min-height:3.4rem; }
.zcp5 .sl-form input[type="text"].sh{ max-width:12rem; }
.zcp5 .sl-form input[type="text"].xs{ max-width:7rem; }
.zcp5 .sl-form .sl-hint{
  display:block; font-size:.7rem; color:var(--zcp-mut); margin-top:.2rem;
}
.zcp5 .sl-form .sl-choices{
  display:flex; flex-wrap:wrap; gap:.35rem 1rem; padding-top:.35rem;
}
.zcp5 .sl-form .sl-choice{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:var(--zcp-fs-sm); color:var(--zcp-ink); font-weight:400;
  margin:0;
}
.zcp5 .sl-form .sl-choices.stack{ flex-direction:column; gap:.35rem; }
.zcp5 .sl-form .sl-submit{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  margin-top:1rem; padding-top:1rem; border-top:1px solid #eef2f7;
}
@media (max-width:575.98px){
  .zcp5 .sl-form .sl-fld{ grid-template-columns:1fr; }
  .zcp5 .sl-form .sl-fld > label{ padding-top:0; }
}

/* a titled group inside a form - was <fieldset><legend> */
.zcp5 .sl-group{ margin:0 0 1.4rem; }
.zcp5 .sl-group > h3{
  display:flex; align-items:center; gap:.45rem;
  margin:0 0 .2rem; padding:0; background:none;
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
}
.zcp5 .sl-group > h3 i{ color:#8fa3c4; font-size:.9em; }
.zcp5 .sl-group > .sl-groupsay{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  margin:0 0 .8rem; line-height:1.5; max-width:60ch;
}

/* ---- the premium gate -------------------------------------------
   Was .alert-warning holding an <h2> and a blue button, with a
   screenshot dropped under it at whatever size it happened to be. */
.zcp5 .sl-gate{
  display:grid; grid-template-columns:1fr; gap:1.1rem;
  padding:1.35rem 1.5rem;
  border:1px solid #f0e2a8; border-radius:.7rem;
  background:linear-gradient(180deg,#fffdf6 0%,#fff 60%);
}
@media (min-width:768px){
  .zcp5 .sl-gate{ grid-template-columns:minmax(0,1fr) minmax(0,320px); align-items:center; }
}
.zcp5 .sl-gate-kick{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.62rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#9a5b06; margin-bottom:.5rem;
}
.zcp5 .sl-gate h2{
  font-size:1.15rem; font-weight:700; color:var(--zcp-ink); margin:0 0 .4rem;
}
.zcp5 .sl-gate p{
  font-size:var(--zcp-fs-sm); color:var(--zcp-mut); line-height:1.55;
  margin:0 0 .9rem; max-width:58ch;
}
.zcp5 .sl-gate-shot{
  border:1px solid var(--zcp-line); border-radius:.5rem;
  max-width:100%; height:auto; display:block;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 12px 24px -18px rgba(15,23,42,.45);
}

/* ---- feature lists ----------------------------------------------
   Every one of these was <ul style="list-style-image:url(...gif)"> or a
   bare <ol>. The glyph inherits color, so it stays legible on the tinted
   grounds these lists actually sit on. */
.zcp5 .sl-feat{ list-style:none; margin:0 0 1rem; padding:0; }
.zcp5 .sl-feat li{
  position:relative; padding-left:1.35rem; margin-bottom:.35rem;
  font-size:var(--zcp-fs-sm); color:var(--zcp-ink); line-height:1.5;
}
.zcp5 .sl-feat li::before{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:0; top:.2em; font-size:.72em; color:#3d9c40;
}
.zcp5 .sl-feat.two{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,260px),1fr));
  gap:0 1.5rem;
}
.zcp5 .sl-feat.muted li{ font-size:var(--zcp-fs-xs); color:var(--zcp-mut); }

/* ---- plan comparison --------------------------------------------
   Was a 3-column <table> with cellpadding, bgcolor="#000000" headers
   and a check GIF in every cell. */
.zcp5 .sl-compare{ width:100%; border-collapse:collapse; font-size:var(--zcp-fs-sm); }
.zcp5 .sl-compare th{
  padding:.6rem .8rem; text-align:left; vertical-align:bottom;
  background:#f7f9fc; border-bottom:1px solid var(--zcp-line);
  font-size:var(--zcp-fs-xs); font-weight:700; color:var(--zcp-ink);
}
.zcp5 .sl-compare th.p{ text-align:center; width:6.5rem; }
.zcp5 .sl-compare th.p .t{ display:block; font-size:var(--zcp-fs-sm); }
.zcp5 .sl-compare th.p .c{
  display:block; font-size:.62rem; font-weight:600; color:var(--zcp-mut);
  text-transform:uppercase; letter-spacing:.06em;
}
.zcp5 .sl-compare td{
  padding:.5rem .8rem; border-bottom:1px solid #eef2f7; color:var(--zcp-ink);
}
.zcp5 .sl-compare td.p{ text-align:center; font-variant-numeric:tabular-nums; }
.zcp5 .sl-compare td.p .yes{ color:#3d9c40; }
.zcp5 .sl-compare td.p .no{ color:#cbd5e1; }
.zcp5 .sl-compare tr.price td{
  background:#f7f9fc; font-weight:700; border-bottom:0;
  font-size:var(--zcp-fs-sm);
}
.zcp5 .sl-compare tbody tr:hover{ background:#fbfcfe; }
.zcp5 .sl-compare tbody tr.price:hover{ background:#f7f9fc; }

/* ---- code blocks -------------------------------------------------
   The sample snippet was a <TEXTAREA> with eight inline padding rules.
   Kept as a textarea - it is there to be selected and copied - but
   sized and typed like code. */
.zcp5 .sl-code{
  position:relative; border:1px solid var(--zcp-line); border-radius:.5rem;
  background:#f8fafc; overflow:hidden;
}
.zcp5 .sl-code textarea{
  display:block; width:100%; border:0; background:transparent;
  padding:.85rem 1rem; margin:0; resize:vertical;
  font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size:.76rem; line-height:1.55; color:var(--zcp-ink);
  min-height:8.5rem; border-radius:0;
}
/* a short snippet - a column list, one line of config - should not
   be padded out to the height of a full code sample */
.zcp5 .sl-code.short textarea{ min-height:0; }
.zcp5 .sl-code textarea:focus{ outline:2px solid var(--zcp-accent); outline-offset:-2px; }
.zcp5 .sl-copy{
  position:absolute; top:.45rem; right:.45rem;
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.25rem .55rem; border-radius:.3rem;
  border:1px solid var(--zcp-line); background:#fff;
  font-size:.68rem; font-weight:600; color:var(--zcp-mut); cursor:pointer;
}
.zcp5 .sl-copy:hover{ color:var(--zcp-ink); border-color:#c3ccda; }
.zcp5 .sl-copy.done{ color:#1f7a33; border-color:#c7ebd0; background:#eefaf0; }

/* parameter reference - was nested <ul> four deep with a bullet GIF */
.zcp5 .sl-params{ display:grid; gap:1.3rem; }
.zcp5 .sl-paramgroup > h3{
  display:flex; align-items:center; gap:.45rem;
  margin:0 0 .6rem; padding:0; background:none;
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
}
.zcp5 .sl-paramgroup > h3 i{ color:#8fa3c4; font-size:.9em; }
.zcp5 .sl-param{
  padding:.7rem .85rem; margin-bottom:.5rem;
  border:1px solid var(--zcp-line); border-left:3px solid #dfe5ec;
  border-radius:.45rem; background:#fff;
}
.zcp5 .sl-param.req{ border-left-color:var(--zcp-accent); }
.zcp5 .sl-param-n{
  display:block; margin-bottom:.25rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
}
.zcp5 .sl-param-n .tag{
  margin-left:.4rem; padding:.08rem .35rem; border-radius:.25rem;
  font-family:inherit; font-size:.6rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  background:#eef4fd; color:#1f4d99; border:1px solid #d3e2f8;
}
.zcp5 .sl-param-n .tag.opt{ background:#f1f5f9; color:var(--zcp-mut); border-color:var(--zcp-line); }
.zcp5 .sl-param p{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  line-height:1.55; margin:0 0 .4rem; max-width:72ch;
}
.zcp5 .sl-param p:last-child{ margin-bottom:0; }
.zcp5 .sl-param code,
.zcp5 .sl-ex{
  display:inline-block;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.72rem; background:#f1f5f9; color:var(--zcp-ink);
  padding:.12rem .4rem; border-radius:.25rem;
}

/* ---- color swatch inputs ---------------------------------------
   The three color fields were plain text boxes wired to a jQuery
   plug-in loaded from /m/theme. Native <input type="color"> does the
   same job with nothing to load, and the text box stays beside it so a
   hex can still be pasted. */
.zcp5 .sl-swatch{ display:flex; align-items:center; gap:.4rem; }
.zcp5 .sl-swatch input[type="color"]{
  width:2.2rem; height:2.05rem; padding:.15rem; flex:0 0 auto;
  border:1px solid var(--zcp-line); border-radius:.4rem;
  background:#fff; cursor:pointer;
}
.zcp5 .sl-swatch input[type="text"]{
  max-width:7.5rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- extra domains ----------------------------------------------- */
.zcp5 .sl-domains{ display:flex; flex-direction:column; gap:.35rem; margin-top:.4rem; }
.zcp5 .sl-domain{
  display:flex; align-items:center; gap:.6rem;
  padding:.4rem .65rem; border-radius:.4rem;
  border:1px solid var(--zcp-line); background:#fbfcfe;
  font-size:var(--zcp-fs-sm);
}
.zcp5 .sl-domain i{ color:#8fa3c4; }
.zcp5 .sl-domain .d{ flex:1 1 auto; overflow-wrap:anywhere; }

/* ---- wizard steps ------------------------------------------------
   The import runs "Step 1 of 4" through "Step 4 of 4" but only ever
   printed the words. This shows where you are in the run. */
.zcp5 .sl-steps{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin:0 0 1.1rem; padding:0; list-style:none;
  counter-reset:slstep;
}
.zcp5 .sl-steps li{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .7rem .35rem .45rem; border-radius:2rem;
  border:1px solid var(--zcp-line); background:#fff;
  font-size:var(--zcp-fs-xs); font-weight:600; color:var(--zcp-mut);
}
.zcp5 .sl-steps li::before{
  counter-increment:slstep; content:counter(slstep);
  display:inline-flex; align-items:center; justify-content:center;
  width:1.35rem; height:1.35rem; border-radius:50%;
  background:#f1f5f9; color:var(--zcp-mut);
  font-size:.68rem; font-weight:700;
}
.zcp5 .sl-steps li.done{ color:var(--zcp-ink); }
.zcp5 .sl-steps li.done::before{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
  font-size:.6rem; background:#eefaf0; color:#1f7a33;
}
.zcp5 .sl-steps li.now{
  background:var(--zcp-ink); border-color:var(--zcp-ink); color:#fff;
}
.zcp5 .sl-steps li.now::before{ background:rgba(255,255,255,.22); color:#fff; }

/* ---- import progress --------------------------------------------
   Was a 280px gray box with a spinner GIF floated inside it and a
   fixed-width log pane below. */
.zcp5 .sl-prog{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .8rem; border-radius:.5rem .5rem 0 0;
  border:1px solid var(--zcp-line); border-bottom:0; background:#f7f9fc;
  font-size:var(--zcp-fs-sm); font-weight:600; color:var(--zcp-ink);
}
.zcp5 .sl-prog i{ color:var(--zcp-accent); }
.zcp5 .sl-prog.done i{ color:#3d9c40; }
.zcp5 .sl-prog.fail i{ color:#c1443f; }
.zcp5 .sl-log{
  height:11rem; overflow:auto; padding:.7rem .85rem;
  border:1px solid var(--zcp-line); border-radius:0 0 .5rem .5rem;
  background:#fff;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.72rem; line-height:1.6; color:var(--zcp-mut);
}
.zcp5 .sl-log b{ color:var(--zcp-ink); }
.zcp5 .sl-bar{
  height:.4rem; background:#eef2f7; overflow:hidden;
  border-left:1px solid var(--zcp-line); border-right:1px solid var(--zcp-line);
}
.zcp5 .sl-bar span{
  display:block; height:100%; width:0;
  background:var(--zcp-accent); transition:width .25s ease;
}

/* the import preview grid, built as a string in VBScript */
.zcp5 .sl-preview{ overflow-x:auto; }
.zcp5 .sl-preview table,
.zcp5 table.tblData{
  width:100%; border-collapse:collapse; font-size:var(--zcp-fs-xs);
}
.zcp5 .sl-preview th,
.zcp5 table.tblData th{
  padding:.4rem .6rem; text-align:left; white-space:nowrap;
  background:#f7f9fc; border-bottom:1px solid var(--zcp-line);
  font-weight:700; color:var(--zcp-ink);
}
.zcp5 .sl-preview td,
.zcp5 table.tblData td{
  padding:.35rem .6rem; border-bottom:1px solid #eef2f7;
  white-space:nowrap; color:var(--zcp-mut);
}

/* ---- charts ------------------------------------------------------
   The four reports drew their charts in Flash. Every browser dropped
   the plug-in at the end of 2020, so what shipped was a 450px hole
   above a table that worked. They now render on Chart.js 4 - the same
   library, from the same CDN, that the internal reporting pages use.

   The canvas needs an explicit height because the charts run with
   maintainAspectRatio:false, which is what lets them fill the card on
   a desktop and still be legible on a phone. */
.zcp5 .sl-chart{
  position:relative;
  height:340px;
  margin-top:.25rem;
}
@media (max-width:575.98px){
  .zcp5 .sl-chart{ height:260px; }
}
.zcp5 .sl-chart canvas{ max-width:100%; }
.zcp5 .sl-chartnote{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  margin:.75rem 0 0; text-align:center;
}

/* the headline numbers above a report - surface before detail */
.zcp5 .sl-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,140px), 1fr));
  gap:.5rem; margin-bottom:.35rem;
}
.zcp5 .sl-stat{
  padding:.6rem .8rem; border-radius:.5rem;
  background:#f7f9fc; border:1px solid var(--zcp-line);
}
.zcp5 .sl-stat-l{
  display:block; font-size:.65rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--zcp-mut); margin-bottom:.15rem;
}
.zcp5 .sl-stat-v{
  display:block; font-size:1.15rem; font-weight:700; color:var(--zcp-ink);
  font-variant-numeric:tabular-nums; line-height:1.2;
}

/* ---- the overview page ------------------------------------------- */
.zcp5 .sl-setup{ display:grid; gap:.55rem; margin:0; padding:0; list-style:none; }
.zcp5 .sl-setup li{
  display:flex; align-items:flex-start; gap:.65rem;
  padding:.7rem .85rem; border-radius:.5rem;
  border:1px solid var(--zcp-line); background:#fff;
  font-size:var(--zcp-fs-sm); color:var(--zcp-ink);
}
.zcp5 .sl-setup li.done{ background:#f8fcf9; border-color:#c7ebd0; }
.zcp5 .sl-setup-i{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:1.5rem; height:1.5rem; border-radius:50%;
  background:#f1f5f9; color:var(--zcp-mut); font-size:.7rem; font-weight:700;
}
.zcp5 .sl-setup li.done .sl-setup-i{ background:#eefaf0; color:#1f7a33; }
.zcp5 .sl-setup-t{ flex:1 1 auto; }
.zcp5 .sl-setup-t strong{ font-weight:600; }
.zcp5 .sl-setup-say{
  display:block; font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  margin-top:.1rem;
}

/* ---- the destructive action -------------------------------------
   The account system had no delete button because none of its pages
   deleted anything. The Store Locator does - stores and categories -
   and the old pages reached for `class="button red"`, which is not
   defined in either v5 stylesheet, so the confirm button rendered as
   an unstyled gray <input>. This is the one red button in the account
   section, and it only ever appears on a confirm screen. */
.zcp5 .sl-danger{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1rem; border-radius:.4rem;
  border:1px solid #c1443f; background:#c1443f; color:#fff;
  font-size:var(--zcp-fs-sm); font-weight:700;
  text-decoration:none; cursor:pointer;
}
.zcp5 .sl-danger:hover{ filter:brightness(1.08); color:#fff; background:#c1443f; }
.zcp5 .sl-quiet-danger{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:var(--zcp-fs-xs); font-weight:600; color:#a32020;
  text-decoration:none;
}
.zcp5 .sl-quiet-danger:hover{ color:#7f1d1d; text-decoration:underline; }

/* ---- legacy-service notice --------------------------------------
   The Store Locator is closed to new customers and maintained for the
   accounts that already run it. Said once, quietly, where it is true. */
.zcp5 .sl-legacy{
  display:flex; align-items:flex-start; gap:.55rem;
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  line-height:1.5; margin-top:1.25rem;
}
.zcp5 .sl-legacy i{ color:#8fa3c4; margin-top:.15rem; }


/* ===================================================================
   33. ACCOUNT ACCESS  -  login, lost password
   ===================================================================
   The front door. account_login.asp is the most linked page in the
   account section - 97 pages point at it - and it was still running on
   Bootstrap defaults with three identical full-width buttons stacked at
   the bottom, so the primary action and its two escape hatches all
   looked equally important.

   These pages sit OUTSIDE the account product bar on purpose: you are
   not in the account yet, so a nav full of Dashboard / Downloads /
   Orders links would be lying about where you can go.                */

/*  Two equal columns in a narrow container. This was a 420px form
    against a 1fr aside inside a 1320px page, which measured 1.93:1 -
    and the wider side was the SHORTER one, so the aside read as a
    stray paragraph rather than a counterweight. Equal columns at
    960px give the form the width it wants and let the aside wrap into
    a block of comparable height. */
.zcp5 .auth{
  display:grid; grid-template-columns:1fr; gap:2rem;
  max-width:960px; margin:0 auto; padding:2.5rem 1rem 3rem;
}
@media (min-width:992px){
  .zcp5 .auth{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:3rem; align-items:start; }
}
.zcp5 .auth-main{ min-width:0; }
.zcp5 .auth-head{ margin-bottom:1.5rem; }
.zcp5 .auth-head h1{
  font-size:1.75rem; font-weight:700; color:var(--zcp-ink);
  margin:0 0 .5rem; text-wrap:balance;
}
.zcp5 .auth-head p{
  font-size:var(--zcp-fs-sm); color:var(--zcp-mut);
  line-height:1.6; margin:0; max-width:46ch;
}

/* ---- the form ---------------------------------------------------
   Was <div class="search-field"> with an inline SVG person icon and a
   <label> that sat beside the input rather than above it. The icon is
   a glyph now and the label is a real label. */
.zcp5 .auth-field{ margin-bottom:1rem; }
.zcp5 .auth-field > label{
  display:block; font-size:var(--zcp-fs-xs); font-weight:600;
  color:var(--zcp-ink); margin-bottom:.25rem;
}
.zcp5 .auth-field > label .req{ color:#c1443f; }
.zcp5 .auth-input{
  position:relative; display:flex; align-items:center;
}
.zcp5 .auth-input > i:first-child{
  position:absolute; left:.75rem; color:#8fa3c4;
  font-size:.9rem; pointer-events:none;
}
.zcp5 .auth-input input{
  width:100%; padding:.6rem .75rem .6rem 2.25rem;
  font-size:var(--zcp-fs-sm); line-height:1.4;
  border:1px solid var(--zcp-line); border-radius:.45rem;
  background:#fff; color:var(--zcp-ink);
}
.zcp5 .auth-input input:focus{
  outline:none; border-color:var(--zcp-accent);
  box-shadow:0 0 0 3px rgba(14,165,233,.15);
}
/* the reveal control - was an <i> floated over the field with a
   non-standard data-bs-toggle pointing at an id */
.zcp5 .auth-reveal{
  position:absolute; right:.4rem;
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border:0; background:none; padding:0;
  color:var(--zcp-mut); cursor:pointer; border-radius:.3rem;
}
.zcp5 .auth-reveal:hover{ color:var(--zcp-ink); background:#f1f5f9; }
.zcp5 .auth-input:has(.auth-reveal) input{ padding-right:2.5rem; }

.zcp5 .auth-submit{
  display:block; width:100%; margin-top:1.25rem;
  padding:.7rem 1rem; border:0; border-radius:.45rem;
  background:var(--zcp-go); color:#fff;
  font-size:1rem; font-weight:700; text-align:center; cursor:pointer;
  text-decoration:none;
}
.zcp5 .auth-submit:hover{ filter:brightness(1.08); color:#fff; }

/* ---- the escape hatches -----------------------------------------
   Three full-width primary buttons became one primary action plus a
   quiet row, because "sign in" and "I lost my password" are not
   equally weighted choices. */
.zcp5 .auth-alt{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .9rem;
  margin-top:1.25rem; padding-top:1.25rem;
  border-top:1px solid var(--zcp-line);
  font-size:var(--zcp-fs-sm); color:var(--zcp-mut);
}
.zcp5 .auth-alt a{ font-weight:600; }
.zcp5 .auth-alt .sep{ color:var(--zcp-line); }

.zcp5 .auth-captcha{ display:flex; justify-content:center; margin:1rem 0; }

/* ---- a second task on the same page ------------------------------
   Lost Password carries two independent forms - reset by username, and
   look the username up by email. They were stacked with no boundary,
   so it read as one long form with two buttons. */
.zcp5 .auth-sep{
  display:flex; align-items:center; gap:.75rem;
  margin:2rem 0 1.5rem; color:var(--zcp-mut);
  font-size:var(--zcp-fs-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
}
.zcp5 .auth-sep::before,
.zcp5 .auth-sep::after{
  content:""; flex:1 1 auto; height:1px; background:var(--zcp-line);
}

.zcp5 .auth-rules{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  line-height:1.6; margin:.5rem 0 0; padding:.7rem .85rem;
  background:#f7f9fc; border:1px solid var(--zcp-line); border-radius:.45rem;
}
.zcp5 .auth-rules ul{ margin:.35rem 0 0; padding-left:1.1rem; }

/* ---- the aside ---------------------------------------------------
   Was a stock illustration on a gray panel. Kept as a panel, but it
   now says something true about what is behind the door. */
.zcp5 .auth-aside{
  border:1px solid var(--zcp-line); border-radius:.7rem;
  background:linear-gradient(180deg,#f7f9fc 0%,#fff 55%);
  padding:1.75rem 1.85rem;
}
.zcp5 .auth-aside h2{
  font-size:1.05rem; font-weight:700; color:var(--zcp-ink); margin:0 0 1rem;
}
.zcp5 .auth-perks{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.zcp5 .auth-perk{
  display:flex; align-items:flex-start; gap:.7rem;
  font-size:var(--zcp-fs-sm); color:var(--zcp-ink); line-height:1.5;
}
.zcp5 .auth-perk > i{
  flex:0 0 auto; width:1.9rem; height:1.9rem; border-radius:.45rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:#eef4fd; color:#1f4d99; font-size:.85rem;
}
.zcp5 .auth-perk strong{ display:block; font-weight:600; }
.zcp5 .auth-perk span{
  display:block; font-size:var(--zcp-fs-xs); color:var(--zcp-mut); margin-top:.1rem;
}


/* ===================================================================
   34. API v1 DASHBOARD  -  account_api
   ===================================================================
   The v1 API is legacy: it works, it has no sunset date, and customers
   on it are not being pushed off. But v2 is where the product is, and
   every v1 customer already has a v2 key waiting - it provisions itself
   the moment they open the v2 dashboard.

   So the job of this page is to keep running v1 properly AND make that
   fact impossible to miss, without nagging. One prominent card at the
   top, one quiet reminder further down, and nothing that blocks. */

/*  A full card of v2 features sat above the dashboard the customer
    actually came for, and pushed it below the fold. It is a one-line bar
    now that opens on click - native <details>, so it needs no JS and
    keyboard and screen-reader behavior come free. The primary action
    stays visible in the collapsed bar; only the detail is hidden. */
.zcp5 .apiv2{
  border:1px solid #bfdbfe; border-radius:.6rem;
  background:linear-gradient(180deg,#f0f7ff 0%,#fbfdff 100%);
  margin-bottom:1rem;
}
.zcp5 .apiv2[open]{ background:#f0f7ff; }
.zcp5 .apiv2-bar{
  display:flex; align-items:center; gap:.65rem;
  padding:.65rem .9rem; cursor:pointer; list-style:none;
  font-size:var(--zcp-fs-sm); color:var(--zcp-ink);
}
.zcp5 .apiv2-bar::-webkit-details-marker{ display:none; }
.zcp5 .apiv2-bar:hover{ background:rgba(31,77,153,.04); border-radius:.6rem; }
.zcp5 .apiv2-spark{ color:#1f4d99; flex:0 0 auto; }
.zcp5 .apiv2-line{ flex:1 1 auto; line-height:1.45; min-width:0; }
.zcp5 .apiv2-line strong{ font-weight:700; }
.zcp5 .apiv2-go{
  flex:0 0 auto; display:inline-flex; align-items:center;
  padding:.32rem .7rem; border-radius:.35rem;
  background:var(--zcp-go); color:#fff;
  font-size:var(--zcp-fs-xs); font-weight:700; text-decoration:none;
  white-space:nowrap;
}
.zcp5 .apiv2-go:hover{ filter:brightness(1.08); color:#fff; }
.zcp5 .apiv2-chev{ flex:0 0 auto; color:#1f4d99; font-size:.75rem; }
.zcp5 .apiv2[open] .apiv2-chev{ transform:rotate(180deg); }
.zcp5 .apiv2-body{
  padding:0 .9rem 1rem; border-top:1px solid #d8e6fb; margin-top:.15rem;
}
.zcp5 .apiv2-body > p:first-child{
  font-size:var(--zcp-fs-sm); color:var(--zcp-mut);
  line-height:1.55; margin:.85rem 0 1rem; max-width:64ch;
}
@media (max-width:575.98px){
  .zcp5 .apiv2-bar{ flex-wrap:wrap; }
  .zcp5 .apiv2-line{ flex:1 1 100%; order:2; }
  .zcp5 .apiv2-go{ order:3; }
}
.zcp5 .apiv2-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,210px), 1fr));
  gap:.75rem; margin-bottom:1.15rem;
}
.zcp5 .apiv2-item{
  display:flex; align-items:flex-start; gap:.55rem;
  font-size:var(--zcp-fs-xs); color:var(--zcp-ink); line-height:1.5;
}
.zcp5 .apiv2-item > i{ color:#1f4d99; margin-top:.15rem; }
.zcp5 .apiv2-item strong{ display:block; font-weight:700; }
.zcp5 .apiv2-item span{ color:var(--zcp-mut); }
.zcp5 .apiv2-acts{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.zcp5 .apiv2-note{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut); margin:.75rem 0 0;
}

/* the quiet second mention, further down the page */
.zcp5 .apiv2-inline{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.8rem .95rem; border-radius:.5rem;
  border:1px solid var(--zcp-line); border-left:3px solid var(--zcp-accent);
  background:#fbfcfe; font-size:var(--zcp-fs-sm); color:var(--zcp-ink);
  margin:1rem 0;
}
.zcp5 .apiv2-inline i{ color:var(--zcp-accent); margin-top:.15rem; }

/* v1 marked as what it is, wherever the version is named */
.zcp5 .api-legacy-tag{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.15rem .5rem; border-radius:.3rem;
  background:#f1f5f9; color:var(--zcp-mut); border:1px solid var(--zcp-line);
  font-size:var(--zcp-fs-xs); font-weight:700;
}

/* ---- usage meter -------------------------------------------------
   The dashboard's own numbers. Was a Bootstrap progress bar with the
   count in a floating badge beside it. */
.zcp5 .api-usage{ display:grid; gap:.9rem; }
.zcp5 .api-meter-top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.75rem; flex-wrap:wrap;
}
.zcp5 .api-meter-n{
  font-size:1.35rem; font-weight:700; color:var(--zcp-ink);
  font-variant-numeric:tabular-nums;
}
.zcp5 .api-meter-n small{
  font-size:var(--zcp-fs-sm); font-weight:400; color:var(--zcp-mut);
}
.zcp5 .api-meter{
  height:.5rem; border-radius:1rem; background:#eef2f7; overflow:hidden;
}
.zcp5 .api-meter span{
  display:block; height:100%; border-radius:1rem;
  background:var(--zcp-accent);
}
.zcp5 .api-meter.warn span{ background:#e8a33d; }
.zcp5 .api-meter.over span{ background:#c1443f; }

/* the API key, which is the thing people come here for */
.zcp5 .api-key{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding:.7rem .85rem; border-radius:.5rem;
  background:#0f172a; color:#e2e8f0;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:var(--zcp-fs-sm); overflow-wrap:anywhere;
}
.zcp5 .api-key .k{ flex:1 1 auto; }
.zcp5 .api-key button{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.3rem;
  padding:.25rem .55rem; border-radius:.3rem; cursor:pointer;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
  color:#e2e8f0; font-size:.68rem; font-weight:600;
  font-family:inherit;
}
.zcp5 .api-key button:hover{ background:rgba(255,255,255,.16); }
.zcp5 .api-key button.done{ color:#7fe0a0; border-color:#3d9c40; }

/* -------------------------------------------------------------------
   34.1  the dashboard's own components

   Lifted out of a 300-line page-level <style> block. Two things in it
   could NOT come along:

     body { background-color:#f8f9fa; }   - RULE 2. A bare body selector
       in a shared sheet repaints every page on the site.
     :root { --primary-color:#0d6efd; ... }  - it redefined global custom
       properties, so any component reading them changed meaning on this
       page only.

   Every CLASS NAME is unchanged: thirteen JavaScript functions on the
   page read and write these elements, so the names are a contract.  */

.zcp5 .dashboard-card{
  background:#fff; border:1px solid var(--zcp-line); border-radius:.7rem;
  padding:1.25rem 1.35rem; margin-bottom:1rem;
}
.zcp5 .dashboard-card h2{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
  margin:0 0 .9rem;
}
.zcp5 .dashboard-card h2 i{ color:#8fa3c4; font-size:.9em; }
.zcp5 .dashboard-card hr{ margin:1rem 0; border-color:var(--zcp-line); opacity:1; }

/* the key card - was a purple gradient, the only one on the site */
.zcp5 .dashboard-card.api-key-card{
  background:var(--zcp-ink); border-color:var(--zcp-ink); color:#e2e8f0;
}
.zcp5 .api-key-card h2{ color:#fff; }
.zcp5 .api-key-card h2 i{ color:#7fe0a0; }
.zcp5 .api-key-card p{ color:#c7d2e0; font-size:var(--zcp-fs-sm); }
.zcp5 .api-key-card strong{ color:#fff; }
.zcp5 .api-key-display{
  padding:.8rem .95rem; margin:.9rem 0; border-radius:.5rem;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:1.05rem; font-weight:700; letter-spacing:.04em;
  word-break:break-all; color:#fff;
}
.zcp5 .api-key-display.hidden-key{ filter:blur(8px); user-select:none; }
.zcp5 .api-key-actions{ display:flex; gap:.4rem; flex-wrap:wrap; }
.zcp5 .api-key-actions .btn{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.35rem .7rem; border-radius:.35rem;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.25);
  color:#e2e8f0; font-size:var(--zcp-fs-xs); font-weight:600;
}
.zcp5 .api-key-actions .btn:hover{ background:rgba(255,255,255,.18); color:#fff; }

/* usage meter - was 40px tall with the number floated over the middle */
.zcp5 .usage-progress{
  position:relative; height:1.6rem; margin:1rem 0;
  background:#eef2f7; border-radius:1rem; overflow:hidden;
}
.zcp5 .usage-progress-bar{
  height:100%; border-radius:1rem;
  transition:width .6s ease;
}
@media (prefers-reduced-motion: reduce){
  .zcp5 .usage-progress-bar{ transition:none; }
}
.zcp5 .usage-progress-label{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--zcp-fs-xs); font-weight:700; color:var(--zcp-ink);
  font-variant-numeric:tabular-nums;
}

.zcp5 .stat-card{
  padding:.75rem .85rem; border-radius:.5rem; text-align:center;
  background:#f7f9fc; border:1px solid var(--zcp-line);
}
.zcp5 .stat-card .stat-label{
  font-size:.65rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--zcp-mut);
}
.zcp5 .stat-card .stat-value{
  font-size:1.3rem; font-weight:700; color:var(--zcp-ink);
  margin:.2rem 0 .1rem; font-variant-numeric:tabular-nums;
}
.zcp5 .stat-card small{ font-size:var(--zcp-fs-xs); color:var(--zcp-mut); }

.zcp5 .quick-action-card{
  display:block; padding:.8rem .95rem; margin-bottom:.6rem;
  border:1px solid var(--zcp-line); border-radius:.5rem;
  background:#fff; text-decoration:none; color:var(--zcp-ink);
  transition:border-color .14s ease, background .14s ease;
}
.zcp5 .quick-action-card:hover{ border-color:#c3ccda; background:#fbfcfe; color:var(--zcp-ink); }
.zcp5 .quick-action-card h5{
  display:flex; align-items:center; gap:.45rem; margin:0 0 .15rem;
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
}
.zcp5 .quick-action-card h5 i{ color:#8fa3c4; font-size:.9em; }
.zcp5 .quick-action-card p{
  margin:0; font-size:var(--zcp-fs-xs); color:var(--zcp-mut); line-height:1.5;
}

.zcp5 .plan-badge{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.15rem .5rem; border-radius:.3rem;
  background:#eef4fd; color:#1f4d99; border:1px solid #d3e2f8;
  font-size:var(--zcp-fs-xs); font-weight:700;
}

.zcp5 .usage-alert{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.75rem;
  padding:.85rem 1rem; margin-bottom:1rem; border-radius:.5rem;
  background:#fff9ef; border:1px solid #f0e2a8;
  border-left:3px solid #e8a33d;
  font-size:var(--zcp-fs-sm); color:var(--zcp-ink);
}

.zcp5 .activity-item{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.55rem 0; border-bottom:1px solid #eef2f7;
  font-size:var(--zcp-fs-xs);
}
.zcp5 .activity-item:last-child{ border-bottom:0; }
.zcp5 .activity-endpoint{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:var(--zcp-ink); font-weight:600; flex:1 1 auto; overflow-wrap:anywhere;
}
.zcp5 .activity-time,
.zcp5 .activity-ip{ color:var(--zcp-mut); font-variant-numeric:tabular-nums; }
.zcp5 .activity-status{
  padding:.1rem .45rem; border-radius:.25rem; font-weight:700;
  background:#eefaf0; color:#1f7a33; border:1px solid #c7ebd0;
}

.zcp5 .empty-state{ text-align:center; padding:2rem 1rem; color:var(--zcp-mut); }
.zcp5 .empty-state i{ font-size:2rem; color:#c3ccda; margin-bottom:.5rem; }

.zcp5 .test-endpoint-form{
  padding:1rem; border-radius:.5rem;
  background:#f7f9fc; border:1px solid var(--zcp-line);
}
.zcp5 .test-result{
  margin-top:.75rem; padding:.8rem .95rem; border-radius:.5rem;
  background:#0f172a; color:#e2e8f0; overflow:auto; max-height:22rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.72rem; line-height:1.55;
}

/* -------------------------------------------------------------------
   34.2  modals

   The API dashboard's six modals were stock Bootstrap: bg-danger and
   bg-warning header bars in full-strength red and amber, .alert blocks
   inside them, and .bg-light panels. Scoped to .zcp5 so this reaches
   only v5.1 pages - the class names stay untouched, because Bootstrap's
   own JavaScript drives them.                                        */

.zcp5 .modal-content{
  border:1px solid var(--zcp-line); border-radius:.7rem;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 24px 48px -24px rgba(15,23,42,.45);
}
.zcp5 .modal-header{
  align-items:center; gap:.5rem;
  padding:.85rem 1.15rem;
  background:#f7f9fc; border-bottom:1px solid var(--zcp-line);
  border-radius:.7rem .7rem 0 0;
}
.zcp5 .modal-title{
  display:flex; align-items:center; gap:.45rem;
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
}
.zcp5 .modal-title i{ color:#8fa3c4; font-size:.9em; }
.zcp5 .modal-body{ padding:1.15rem; font-size:var(--zcp-fs-sm); color:var(--zcp-ink); }
.zcp5 .modal-body ul{ padding-left:1.15rem; margin-bottom:1rem; }
.zcp5 .modal-body ul li{ margin-bottom:.35rem; line-height:1.55; }
.zcp5 .modal-body h6{
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
  margin:0 0 .5rem;
}
.zcp5 .modal-footer{
  padding:.85rem 1.15rem; gap:.5rem;
  background:#fbfcfe; border-top:1px solid var(--zcp-line);
  border-radius:0 0 .7rem .7rem;
}

/*  A solid red or amber title bar reads as an emergency. The tone moves
    to a left rule and the icon, which carries the meaning at this size.
    .btn-close-white would be invisible on the pale ground it now sits
    on, so it is reset alongside. */
.zcp5 .modal-header.bg-danger,
.zcp5 .modal-header.bg-warning,
.zcp5 .modal-header.bg-primary,
.zcp5 .modal-header.bg-success,
.zcp5 .modal-header.bg-info{
  background:#f7f9fc !important;
  color:var(--zcp-ink) !important;
  border-left:3px solid var(--zcp-line);
}
.zcp5 .modal-header.bg-danger  { border-left-color:#c1443f; }
.zcp5 .modal-header.bg-warning { border-left-color:#e8a33d; }
.zcp5 .modal-header.bg-success { border-left-color:#3d9c40; }
.zcp5 .modal-header.bg-primary,
.zcp5 .modal-header.bg-info    { border-left-color:var(--zcp-accent); }
.zcp5 .modal-header.bg-danger  .modal-title i{ color:#c1443f; }
.zcp5 .modal-header.bg-warning .modal-title i{ color:#e8a33d; }
.zcp5 .modal-header.bg-success .modal-title i{ color:#3d9c40; }
.zcp5 .modal-header .btn-close-white{ filter:none; opacity:.6; }
.zcp5 .modal-header .btn-close-white:hover{ opacity:1; }

/*  .alert inside a modal - the same tones as .zcp-keynote, so a warning
    looks the same whether it is on the page or in a dialog. */
.zcp5 .modal-body .alert{
  border-radius:.5rem; padding:.75rem .9rem; margin-bottom:1rem;
  font-size:var(--zcp-fs-sm); border:1px solid var(--zcp-line);
  border-left-width:3px;
}
.zcp5 .modal-body .alert-warning{ background:#fff9ef; border-color:#f0e2a8; border-left-color:#e8a33d; color:#5a4213; }
.zcp5 .modal-body .alert-danger { background:#fdf3f3; border-color:#f0cfcf; border-left-color:#c1443f; color:#4a1414; }
.zcp5 .modal-body .alert-success{ background:#f4fbf5; border-color:#c7ebd0; border-left-color:#3d9c40; color:#14342a; }
.zcp5 .modal-body .alert-info   { background:#f4f8fd; border-color:#bfdbfe; border-left-color:var(--zcp-accent); color:#16304d; }

.zcp5 .modal-body .bg-light{
  background:#f7f9fc !important; border:1px solid var(--zcp-line);
  border-radius:.45rem;
}
.zcp5 .modal-body code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:var(--zcp-fs-xs); color:var(--zcp-ink);
  overflow-wrap:anywhere;
}
.zcp5 .modal-body .form-control{
  font-size:var(--zcp-fs-sm); padding:.45rem .6rem;
  border:1px solid var(--zcp-line); border-radius:.4rem;
}
.zcp5 .modal-body .form-label{
  font-size:var(--zcp-fs-xs); font-weight:600; color:var(--zcp-ink);
  margin-bottom:.25rem;
}

/* -------------------------------------------------------------------
   34.3  API plan picker  -  the "Change API level" dialog

   Eight volume plans that differ only in price and lookup count. The
   old dialog drew them two ways: five large "featured" cards and three
   compact ones behind a View-3-More toggle. One card, eight times, in
   a fixed 4x2 grid - the choice is uniform because the plans are.

   Fixed columns rather than auto-fit: eight items on auto-fit reflow
   to 5+3 at modal-lg width, which puts a ragged short row under a full
   one and re-creates the two-tier look this replaces.               */

.zcp5 .plan-lede{
  font-size:var(--zcp-fs-sm); color:var(--zcp-mut);
  line-height:1.55; margin:0 0 1.1rem; max-width:68ch;
}
.zcp5 .plan-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:.55rem;
}
@media (min-width:576px){
  .zcp5 .plan-grid{ grid-template-columns:repeat(4, 1fr); }
}
.zcp5 .plan{
  display:flex; flex-direction:column; align-items:center;
  gap:.15rem; padding:.7rem .55rem .8rem;
  border:1px solid var(--zcp-line); border-radius:.55rem;
  background:#fff; text-align:center;
}
.zcp5 .plan.is-current{
  border-color:#3d9c40; background:#f4fbf5;
  box-shadow:0 0 0 1px #3d9c40 inset;
}

/*  Always present, even when empty, so the name/price/button rows line
    up across the grid whether or not a card carries a tag. */
.zcp5 .plan-tag{
  display:block; min-height:1.05rem; margin-bottom:.1rem;
  font-size:.625rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:transparent;
}
.zcp5 .plan-tag.now{ color:#2f7d32; }
.zcp5 .plan-tag.pop{ color:var(--zcp-accent); }
.zcp5 .plan-tag i{ font-size:.9em; }

.zcp5 .plan-name{
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
}
.zcp5 .plan-price{
  font-size:1.35rem; font-weight:700; color:var(--zcp-ink);
  line-height:1.15; letter-spacing:-.01em;
}
.zcp5 .plan-price .cur{ font-size:.65em; vertical-align:.35em; margin-right:.05em; }
.zcp5 .plan-per{ font-size:var(--zcp-fs-xs); color:var(--zcp-mut); }
.zcp5 .plan-calls{
  display:block; margin:.5rem 0 .7rem;
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut); line-height:1.3;
}
.zcp5 .plan-calls strong{
  display:block; font-size:var(--zcp-fs-sm); font-weight:700;
  color:var(--zcp-ink);
}

/*  margin-top:auto pins the button to the bottom, so the row of
    buttons stays level when a plan name wraps to two lines. */
.zcp5 .plan-go{
  margin-top:auto; width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.34rem .5rem; border-radius:.35rem;
  font-size:var(--zcp-fs-xs); font-weight:700;
  text-decoration:none; border:1px solid transparent;
}
.zcp5 .plan-go.up{ background:var(--zcp-go); color:#fff; }
.zcp5 .plan-go.up:hover{ filter:brightness(1.08); color:#fff; }
.zcp5 .plan-go.down{
  background:#fff; color:var(--zcp-ink); border-color:var(--zcp-line);
}
.zcp5 .plan-go.down:hover{ background:#f7f9fc; color:var(--zcp-ink); }
.zcp5 .plan-go.current{
  background:#e7f4e8; color:#2f7d32; border-color:#bfe0c2; cursor:default;
}
.zcp5 .plan-note{ margin:1.1rem 0 0; }

/* -------------------------------------------------------------------
   33.1  ACCOUNT ACCESS - the signup variant

   Sign-in is two short columns. Signup is fourteen fields against the
   same five-item aside, so the columns cannot be the same size and
   cannot end level. Wider container, and the aside sticks so it stays
   beside the form instead of stranding itself at the top.           */

.zcp5 .auth-wide{ max-width:1140px; }
@media (min-width:992px){
  .zcp5 .auth-wide{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:3rem; }
  /*  align-items:start on .auth already lets this stick. Nothing in the
      chain may set overflow, or sticky silently stops working. */
  .zcp5 .auth-wide .auth-aside{ position:sticky; top:1.5rem; }
}

/*  .auth-input reserves 2.25rem on the left for a leading icon. The
    signup fields carry their label in the .sl-fld column instead, so
    there is no icon - reclaim the space, and leave room on the right
    for the reveal button. */
.zcp5 .auth-input.bare input{ padding-left:.75rem; padding-right:2.4rem; }

/*  The accessible reveal button inside the established .pw-input
    wrapper. .auth-reveal sets `right` but no vertical position - it
    depends on .auth-input being a flex row - so centre it explicitly
    on the field. */
.zcp5 .pw-input .auth-reveal{ top:50%; transform:translateY(-50%); }

/*  A second heading inside one .ac-card, for a form that covers two
    subjects (a card, then the address it bills to) without earning a
    card of its own. .ac-card pads children it does not recognize, so
    the spacing is stated rather than inherited. */
.zcp5 .ac-subhead{
  display:flex; align-items:center; gap:.45rem;
  margin:1.6rem 0 .9rem; padding-top:1.1rem;
  border-top:1px solid var(--zcp-line);
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
}
.zcp5 .ac-subhead i{ color:#8fa3c4; font-size:.9em; }

/*  A secondary link on a dark featured card. The cards it sits on set
    their own light-on-dark palette, so this inherits rather than
    naming a color, and earns its separation from the underline. */
.zcp5 .ac-quiet-link{
  color:inherit; text-decoration:underline;
  text-underline-offset:2px; opacity:.85; margin-left:.4rem;
  white-space:nowrap;
}
.zcp5 .ac-quiet-link:hover{ color:inherit; opacity:1; }

/*  The two reference links on a download card, on one line. They used
    to sit apart - technical specs under the title, the radius finder
    guide alone at the foot of the card - which read as two unrelated
    things rather than the pair of documents they are.

    .spec-link carries a margin-bottom for its old stacked position;
    that has to go here or the row sits off its own baseline. */
.zcp5 .dl-links{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.3rem 1.15rem;
}
.zcp5 .dl-links .spec-link{ margin-bottom:0; }

/* -------------------------------------------------------------------
   35.  UPDATE FILES  -  the modal that replaced account_dbupdate.asp

   One row per release, newest first, a column per edition the account
   holds. The old page put the current file on one screen and twelve
   months of history behind a "Download Previous Update Files" link.  */

.zcp5 .dlu-lede{
  font-size:var(--zcp-fs-sm); color:var(--zcp-mut);
  line-height:1.55; margin:0 0 1rem;
}
.zcp5 .dlu-lede code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.9em; padding:.05rem .3rem; border-radius:.25rem;
  background:#f1f5f9; color:var(--zcp-ink);
}

/*  Twelve releases against up to three editions overflows a phone long
    before it overflows the dialog, so the table scrolls inside its own
    box rather than pushing the modal wide. */
.zcp5 .dlu-scroll{
  overflow-x:auto; border:1px solid var(--zcp-line); border-radius:.5rem;
}
.zcp5 .dlu-tbl{
  width:100%; border-collapse:collapse;
  font-size:var(--zcp-fs-sm);
}
.zcp5 .dlu-tbl th,
.zcp5 .dlu-tbl td{
  padding:.55rem .75rem; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--zcp-line);
}
.zcp5 .dlu-tbl thead th{
  background:#f7f9fc; font-size:var(--zcp-fs-xs); font-weight:700;
  color:var(--zcp-mut); text-transform:uppercase; letter-spacing:.03em;
}
.zcp5 .dlu-tbl tbody tr:last-child th,
.zcp5 .dlu-tbl tbody tr:last-child td{ border-bottom:0; }
.zcp5 .dlu-tbl tbody th{ font-weight:600; color:var(--zcp-ink); }
.zcp5 .dlu-tbl tr.is-current{ background:#f4fbf5; }
.zcp5 .dlu-tag{
  display:inline-block; margin-left:.4rem; padding:.05rem .4rem;
  border-radius:.25rem; background:#e7f4e8; color:#2f7d32;
  font-size:.625rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em;
}
.zcp5 .dlu-get{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .6rem; border-radius:.3rem;
  background:var(--zcp-go); color:#fff;
  font-size:var(--zcp-fs-xs); font-weight:700; text-decoration:none;
}
.zcp5 .dlu-get:hover{ filter:brightness(1.08); color:#fff; }
/*  An edition with no file that month. Saying nothing shipped is more
    use than a link that quietly resolves to a different release. */
.zcp5 .dlu-none{ color:#c3ccda; }
.zcp5 .dlu-foot{
  font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
  margin:.9rem 0 0;
}
.zcp5 .dlu-foot i{ color:#8fa3c4; margin-right:.3rem; }

/*  The archive card. It sits in the download grid and reads like its
    neighbors: same meta line, same chip row, same reference links. The
    only difference is that its single chip opens a page instead of
    starting a download - twenty years of monthly releases is not a chip
    row. It gets a tint rather than extra height, because a taller card
    in a grid of equals reads as a different kind of thing. */
.zcp5 .fmt-archive{
  /*  Full width, unlike the format chips beside it on other cards.
      There is only ever one of these, and a lone small chip in an
      otherwise empty row reads as though the rest failed to load. */
  flex:1 1 100%; justify-content:center;
  background:#f4f8fd; border-color:#bfdbfe; color:#1f4d99;
}
.zcp5 .fmt-archive:hover{ background:#e8f1fb; color:#16376e; }

/*  Lead paragraphs inside a card had no size of their own, so they fell
    back to the 16px browser default and sat noticeably larger than the
    labels, stats and list text around them. The featured cards - ZIP
    Code Tool, Store Locator, the API CTAs - were the obvious ones
    because their whole body is that one paragraph. */
.zcp5 .ac-card p{
  font-size:var(--zcp-fs-sm);
  line-height:1.55;
}

/* ---- one button size across the account cards -------------------
   Three families were in play - the legacy .button, the v5 .zcp-btn and
   the .zcp-cta - at three different sizes, so a card could carry two
   buttons that did not look related. Size is settled here for all of
   them; color is not, because color is still saying something: green
   for a purchase, orange for the Premium upsell. The neutral ones were
   changed in the markup to .zcp-btn, which is the treatment the
   Download button already uses. */
.zcp5 .ac-card .button,
.zcp5 .ac-card .zcp-btn,
.zcp5 .ac-card .zcp-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.42rem .7rem;
  font-size:var(--zcp-fs-xs);
  font-weight:600;
  border-radius:.4rem;
  line-height:1.35;
}

/*  Account Information's two actions are peers - edit your details, or
    change your password - so they sit side by side rather than stacked,
    which also stops a short card from growing a tall column of buttons.
    .d-grid supplies display:grid and .gap-2 the gap. */
.zcp5 .ac-btn-pair{ grid-template-columns:1fr 1fr; }
@media (max-width:400px){
  .zcp5 .ac-btn-pair{ grid-template-columns:1fr; }
}

/* ---- order history rows ------------------------------------------
   Two lines. The order number leads, because that is what someone
   scanning for a specific order is looking for, with its status opposite
   it. Everything else - when, how much, the invoice - is one row of
   three beneath, so the eye travels down the numbers rather than
   hunting a date on the left and a price on the right. */
.zcp5 .oh-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; margin-bottom:.2rem;
}
.zcp5 .oh-id{
  font-size:var(--zcp-fs-sm); font-weight:700; color:var(--zcp-ink);
  font-variant-numeric:tabular-nums;
}
.zcp5 .oh-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; font-size:var(--zcp-fs-xs); color:var(--zcp-mut);
}
/*  Three even columns so dates and amounts line up down the list
    instead of drifting with the width of each value. */
.zcp5 .oh-meta > *{ flex:1 1 0; min-width:0; }
.zcp5 .oh-amt{ text-align:center; font-variant-numeric:tabular-nums; color:var(--zcp-ink); font-weight:600; }
.zcp5 .oh-inv{
  text-align:right; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:flex-end; gap:.3rem;
}

/* ---- cards in a row end level ------------------------------------
   The grid sets align-items:start so a card keeps its natural height.
   In the lower grid that left Order History hanging short beside the
   much taller Products & Subscriptions, so this row stretches instead
   and the cards fill the height they are given. .ac-card is already a
   flex column, so a card's body can take up the slack. */
.zcp5 .ac-grid:not(.ac-top){ align-items:stretch; }
.zcp5 .ac-grid:not(.ac-top) > .anchor-scroll{ min-width:0; }
.zcp5 .ac-grid:not(.ac-top) > .anchor-scroll > .ac-card{ height:100%; }

/*  Order History's body has to flex too, or the list inside it has no
    height to grow into. */
.zcp5 #order-history .ac-body{
  display:flex; flex-direction:column; min-height:0; flex:1 1 auto;
}

/*  The one-line note under a featured card's action. It carried an
    inline font-size of .85rem, which put it above everything else in
    the card, and sat left against a centred full-width button. Centred
    and at the standard small size it reads as a caption for the button
    rather than a stray sentence. */
.zcp5 .ac-cardnote{
  margin-top:.75rem;
  font-size:var(--zcp-fs-xs);
  line-height:1.45;
  opacity:.9;
  text-align:center;
  position:relative; z-index:1;
}