/* =============================================================================================
 * css/payco-industries.css — the shared skin for the industry index and all 68 industry pages.
 *
 * LINKED BY:  industries.html  (repo root)          -> href="css/payco-industries.css"
 *             industries/<slug>.html (68 pages)     -> href="../css/payco-industries.css"
 * LINK ORDER, and it matters:
 *     vendor/inter/inter.css        the font face
 *     css/payco-system.css          THE TOKEN LAYER — this sheet does not work without it
 *     marketing-core.css            the public-marketing base (hero, .btn, footer)
 *     payco-marketing.css           the shared header; every marketing page links it last
 *     css/payco-industries.css      this file, after all of them
 *
 * ---------------------------------------------------------------------------------------------
 * NOT ONE COLOUR VALUE IS WRITTEN IN THIS FILE, AND THAT IS THE POINT.
 * ---------------------------------------------------------------------------------------------
 * W7 rule 5: the palette is the existing PayCo blue, reached through custom properties only. So
 * every paint below resolves through the --pci-* bridge in section 1, and every --pci-* is a
 * var() chain and never a literal:
 *
 *     --pci-<role>: var(--pc-<hud-token>, var(--<payco-system-token>));
 *
 * The HUD contract (v1) puts theme tokens named --pc-* on :root and on [data-theme="dark"], and
 * lane 1 ships them. Until that merge lands the first name in each chain is undefined and the
 * chain falls through to css/payco-system.css's frozen token set — the same values the fifteen
 * blue consoles already wear. When it lands, these pages take the HUD's tokens and its dark
 * theme WITHOUT AN EDIT HERE, because the fallback is the second link in the chain rather than a
 * hardcoded copy of it. A literal here would have quietly opted all 68 pages out of the theme.
 *
 * grep -nE '#[0-9a-fA-F]{3,8}\b' over this file returns nothing. tests/industries.mjs asserts it,
 * so the rule cannot rot back in one careless declaration at a time.
 *
 * The two places a colour still has to be COMPUTED rather than named — the hero scrim and the
 * hairline tint — use color-mix() against a token, which is a derivation of the palette and not
 * a second palette.
 * ============================================================================================= */


/* =============================================================================================
 * 1. THE TOKEN BRIDGE. The only block in this file that may name a token from another sheet.
 * ============================================================================================= */
:root {
  /* ---- ink ---- */
  --pci-ink:        var(--pc-ink,        var(--ink));
  --pci-ink-soft:   var(--pc-ink-soft,   var(--ink-soft));
  --pci-ink-mute:   var(--pc-ink-mute,   var(--ink-mute));

  /* ---- paper ---- */
  --pci-surface:    var(--pc-surface,    var(--white));
  --pci-surface-2:  var(--pc-surface-2,  var(--paper));
  --pci-recess:     var(--pc-recess,     var(--paper-warm));

  /* ---- brand ---- */
  --pci-brand:      var(--pc-brand,      var(--blue));
  --pci-brand-deep: var(--pc-brand-deep, var(--blue-deep));
  --pci-focus:      var(--pc-focus,      var(--blue-electric));
  --pci-ramp:       var(--pc-ramp,       var(--gradient));
  --pci-ramp-text:  var(--pc-ramp-text,  var(--gradient-text));
  --pci-sliver:     var(--pc-sliver,     var(--sliver));

  /* ---- semantic ---- */
  --pci-ok:         var(--pc-ok,         var(--ok));
  --pci-ok-bg:      var(--pc-ok-bg,      var(--ok-bg));
  --pci-bad:        var(--pc-bad,        var(--warn));
  --pci-bad-bg:     var(--pc-bad-bg,     var(--warn-bg));

  /* ---- rules and edges ----
     ONE HAIR THICKER SITEWIDE (W7 rule 5). The house border is 1px; every divider this sheet
     draws is --pci-rule-w, set here once so "one hair" is a value and not sixty-eight opinions.
     1.5px rather than 2px: on a 2x screen that is a crisp three device pixels, and on a 1x
     screen the browser rounds it up to 2 — visibly firmer than the 1px it replaces, without
     becoming a box. */
  --pci-rule-w:     1.5px;
  --pci-line:       var(--pc-line,       var(--line));
  --pci-line-soft:  var(--pc-line-soft,  var(--line-soft));

  /* ---- elevation ---- */
  --pci-lift-sm:    var(--pc-shadow-sm,  var(--shadow-sm));
  --pci-lift:       var(--pc-shadow-md,  var(--shadow-md));
  --pci-lift-lg:    var(--pc-shadow-lg,  var(--shadow-lg));

  /* ---- geometry ---- */
  --pci-radius-sm:  var(--pc-radius-sm,  var(--radius-sm));
  --pci-radius:     var(--pc-radius,     var(--radius));
  --pci-radius-lg:  var(--pc-radius-lg,  var(--radius-lg));
  --pci-maxw:       var(--pc-maxw,       var(--maxw));
  --pci-font:       var(--pc-font,       var(--font));

  /* ---- rhythm. Generous panels: the pad grows with the viewport, symmetrical on all four
     sides, so a panel never reads as a box with a margin bolted to one edge. ---- */
  --pci-pad:        clamp(20px, 3.4vw, 34px);
  --pci-gap:        clamp(14px, 2vw, 22px);
  --pci-band:       clamp(46px, 7vw, 86px);

  /* ---- motion. One curve for the whole surface. iPhone-grade means: short, eased out, and
     the same everywhere, so nothing on the page moves to a different rhythm than anything
     else. ---- */
  --pci-ease:       var(--ease-std, cubic-bezier(.32, .72, 0, 1));   /* W5 POLISH: one curve */
  --pci-fast:       var(--dur-fast, .16s);   /* W5 POLISH: was .18s */
  --pci-slow:       var(--dur-slow, .34s);   /* W5 POLISH: was .42s */

  /* ---- the hero scrim. A derivation of --pci-ink, not a second colour. ---- */
  --pci-scrim-top:  62%;
  --pci-scrim-bot:  86%;
}

/* Dark theme. Lane 1's [data-theme="dark"] block re-points the --pc-* tokens, and every chain
   above follows it with no edit here — so this block carries ONLY the two things that are a
   property of the theme rather than of the palette: a scrim over a dark photograph has to be
   heavier to keep white type legible, and a drop shadow on a dark surface reads as dirt, so the
   panels trade elevation for a firmer edge. Both are numbers, not colours. */
[data-theme="dark"] {
  --pci-scrim-top:  74%;
  --pci-scrim-bot:  94%;
  --pci-lift:       none;
  --pci-lift-lg:    none;
  --pci-rule-w:     1.5px;
}


/* =============================================================================================
 * 2. SHARED FURNITURE — used by the index and by every industry page.
 * ============================================================================================= */

/* The centred column. Symmetrical by construction: one max-width, one padding, applied to the
   band rather than to the content inside it, so nothing can drift off-axis. */
.pci-wrap {
  width: 100%;
  max-width: var(--pci-maxw);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* A vertical band. Sections are separated by rhythm, not by borders. */
.pci-band { padding-block: var(--pci-band); }
.pci-band + .pci-band { padding-top: 0; }

/* The section rule — the "one hair thicker" divider. Drawn as a border rather than an <hr> so it
   cannot be selected, read out, or land in the tab order. */
.pci-rule {
  border: 0;
  border-top: var(--pci-rule-w) solid var(--pci-line);
  margin-block: var(--pci-band) 0;
}

/* The eyebrow / section heading pair. Centred, because every band on these pages is centred. */
.pci-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pci-brand);
  text-align: center;
}
.pci-h2 {
  margin: 0 auto 12px;
  max-width: 22ch;
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 700;
  color: var(--pci-ink);
  text-align: center;
}
.pci-sub {
  margin: 0 auto;
  max-width: 62ch;
  color: var(--pci-ink-soft);
  text-align: center;
  font-size: clamp(15px, 1.4vw, 17px);
}

/* The panel. Generous padding on all four sides, the house sliver along the top edge, and a
   hairline that is one hair thicker than the site's. */
.pci-panel {
  background:
    var(--pci-sliver) top center / 100% var(--sliver-h, 3px) no-repeat,
    var(--pci-surface);
  background-origin: border-box;
  border: var(--pci-rule-w) solid var(--pci-line);
  border-radius: var(--pci-radius);
  padding: var(--pci-pad);
  box-shadow: var(--pci-lift-sm);
  transition: background-size var(--pci-fast) var(--pci-ease),
              box-shadow var(--pci-fast) var(--pci-ease),
              transform var(--pci-fast) var(--pci-ease);
}
.pci-panel:hover { --sliver-h: var(--sliver-h-hover, 4px); }

.pci-panel h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--pci-ink);
}
.pci-panel p { margin: 0; color: var(--pci-ink-soft); }

/* Two spacing utilities, and only two. They exist so industries/_template.html carries no
   style="" attribute at all: an inline style is markup a batch lane will copy sixty-eight times
   and then edit in one of them, and it is also the crack a hardcoded colour gets back in
   through. tests/industries.mjs scans style="" as well as <style>, so the door stays shut. */
.pci-mt   { margin-top: 20px; }
.pci-mt-l { margin-top: 26px; }

/* The grid. auto-fit so the same rule serves a 3-up desk and a 1-up phone with no breakpoint,
   and so a category with four entries and one with twenty look like the same page. */
.pci-grid {
  display: grid;
  gap: var(--pci-gap);
  grid-template-columns: 1fr;
}


/* =============================================================================================
 * 3. THE INDEX — industries.html
 * ============================================================================================= */

/* The jump bar: the nine categories as pills, above the tree. On a phone it wraps to as many
   rows as it needs rather than scrolling sideways — a horizontal scroller here hides half the
   taxonomy behind a gesture nobody is told about. */
.pci-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 26px auto 0;
  max-width: 900px;
  padding: 0;
  list-style: none;
}
/* min-height 44px, not padding that happens to add up to it. A pill sized by its line box is a
   pill that shrinks below the tap floor the first time somebody shortens the label — measured at
   42px on the first build of this page, which is why the floor is now stated rather than
   implied. tests/industries.mjs asserts 44px on every control these pages draw. */
.pci-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 16px;
  border-radius:999px;
  border: var(--pci-rule-w) solid var(--pci-line);
  background: var(--pci-surface);
  color: var(--pci-ink-soft);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--pci-fast) var(--pci-ease),
              color var(--pci-fast) var(--pci-ease),
              transform var(--pci-fast) var(--pci-ease),
              border-color var(--pci-fast) var(--pci-ease);
}
.pci-jump a:hover {
  background: var(--pci-ramp);
  border-color: var(--pci-brand);
  color: var(--pci-surface);
  transform: translateY(-2px);
}

/* A category block. scroll-margin-top keeps the heading clear of the sticky marketing header
   when the jump bar lands on it — without it the anchor drops the heading underneath the bar. */
.pci-cat { scroll-margin-top: 90px; }
.pci-cat + .pci-cat { margin-top: var(--pci-band); }

.pci-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}
.pci-cat-head h2 {
  margin: 0;
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.15;
  letter-spacing: -.03em;
  font-weight: 700;
  color: var(--pci-ink);
}
/* The count is generated from the registry, never typed. */
.pci-count {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--pci-brand-deep);
  background: var(--pci-recess);
  border: var(--pci-rule-w) solid var(--pci-line-soft);
  border-radius:999px;
  padding: 3px 11px;
  white-space: nowrap;
}

/* One industry. The whole card is the link — a card with a link inside it gives a keyboard user
   a small target inside a large one, and a mouse user a dead zone that looks clickable. */
.pci-item {
  /* CENTRED, like every other box on the industry surface. The 68 detail pages centre their
     card text (css/payco-industries-depth.css §5) and this index was the one place that did
     not, so crossing from the index into a page changed the alignment under the reader. */
  display: flex; flex-direction: column; gap: 6px;
  text-align: center;
  padding: 18px 20px;
  border: var(--pci-rule-w) solid var(--pci-line);
  border-radius: var(--pci-radius-sm);
  background: var(--pci-surface);
  text-decoration: none;
  box-shadow: var(--pci-lift-sm);
  transition: transform var(--pci-fast) var(--pci-ease),
              box-shadow var(--pci-fast) var(--pci-ease),
              border-color var(--pci-fast) var(--pci-ease);
}
.pci-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--pci-lift);
  border-color: var(--pci-brand);
}
.pci-item-name {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--pci-ink);
}
.pci-item-blurb {
  display: block;
  margin-top: 5px;
  font-size: 13px;   /* W5 POLISH: was 13.2px — a single-use step the scale does not have */
  line-height: 1.55;
  color: var(--pci-ink-mute);
}

/* The footer rows. marketing-core.css styles <footer> and its <a>; the ROWS inside it are done
   on the other public pages with inline style attributes — a margin on one, a muted grey spelled
   as a raw hex literal on the other — which is exactly the hardcoded-colour-in-markup this lane
   may not ship. Same rendering, reached through --pci-ink-mute and named instead. */
.pci-foot-row { margin-top: 4px; }
.pci-foot-row + .pci-foot-row { margin-top: 10px; }
.pci-foot-legal {
  margin: 12px auto 0;
  max-width: 900px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--pci-ink-mute);
}

/* The "not listed" closer. Same promise as the industry pages make. */
.pci-closer {
  text-align: center;
  border-radius: var(--pci-radius-lg);
  background: var(--pci-recess);
  border: var(--pci-rule-w) solid var(--pci-line);
  padding: clamp(28px, 5vw, 52px) var(--pci-pad);
}
.pci-closer p { margin: 0 auto 18px; max-width: 60ch; color: var(--pci-ink-soft); }


/* =============================================================================================
 * 4. THE INDUSTRY PAGE — industries/_template.html and its 68 copies
 * ============================================================================================= */

/* The hero. The photograph is the placeholder tier from industries/registry.js and is
   DECORATIVE: the scrim over it is what makes the headline legible, so the scrim is part of the
   type contract and not a taste choice. Both stops are derived from --pci-ink via color-mix, so
   a theme change carries them. */
.pci-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius:0;
  padding-block: clamp(52px, 9vw, 104px);
  text-align: center;
}
.pci-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.pci-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pci-ink) var(--pci-scrim-top), transparent) 0%,
    color-mix(in srgb, var(--pci-ink) var(--pci-scrim-bot), transparent) 100%);
}
/* No photograph yet, or one that failed to load: the hero falls back to the brand ramp rather
   than to a bare dark rectangle. Set by the template's onerror. */
.pci-hero.is-plain { background: var(--pci-ramp); }
.pci-hero.is-plain .pci-hero-img { display: none; }

.pci-hero h1 {
  margin: 0 auto 14px;
  max-width: 18ch;
  font-size: clamp(30px, 5.2vw, 54px);
  line-height: 1.06;
  letter-spacing: -.04em;
  font-weight: 700;
  color: var(--pci-surface);
}
.pci-hero .pci-eyebrow { color: var(--pci-surface); opacity: .82; }
.pci-hero-lede {
  margin: 0 auto 24px;
  max-width: 54ch;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--pci-surface);
  opacity: .92;
}
.pci-hero-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* The trust strip under the hero. Centred, wraps on a phone, never scrolls sideways. */
.pci-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin: 20px auto 0;
  max-width: 780px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--pci-surface);
  opacity: .88;
}

/* ---- the buying guide -------------------------------------------------------------------
   Numbered, one panel per decision, because the point of a buying guide is that the reader can
   stop after any step and still have been told something whole. */
.pci-guide { counter-reset: pci-step; }
.pci-guide .pci-panel { position: relative; padding-top: calc(var(--pci-pad) + 14px); }
.pci-guide .pci-panel::before {
  counter-increment: pci-step;
  content: counter(pci-step, decimal-leading-zero);
  position: absolute;
  top: var(--pci-pad);
  left: var(--pci-pad);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--pci-brand);
}
.pci-guide .pci-panel h3 { margin-top: 20px; }

/* A two-column comparison inside the guide. Stacks first; side by side only when there is room
   for both to be readable. */
.pci-compare { display: grid; gap: var(--pci-gap); grid-template-columns: 1fr; }
.pci-compare dt {
  font-weight: 800;
  color: var(--pci-ink);
  border-left: var(--pci-rule-w) solid var(--pci-brand);
  padding-left: 12px;
}
.pci-compare dd {
  margin: 6px 0 0;
  padding-left: 12px;
  color: var(--pci-ink-soft);
  border-left: var(--pci-rule-w) solid var(--pci-line-soft);
}

/* ---- the FAQ -----------------------------------------------------------------------------
   <details>/<summary>: open and close is the browser's, so it works with JavaScript off, it is
   in the tab order for free, and a screen reader announces the expanded state without an
   aria-expanded anybody has to remember to update. */
.pci-faq { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; }
.pci-faq details {
  border: var(--pci-rule-w) solid var(--pci-line);
  border-radius: var(--pci-radius-sm);
  background: var(--pci-surface);
  overflow: hidden;
  transition: border-color var(--pci-fast) var(--pci-ease);
}
.pci-faq details[open] { border-color: var(--pci-brand); }
.pci-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 46px 16px 18px;
  position: relative;
  font-weight: 700;
  font-size: 15px;
  color: var(--pci-ink);
  min-height: 44px;
}
.pci-faq summary::-webkit-details-marker { display: none; }
.pci-faq summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: var(--pci-rule-w) solid var(--pci-brand);
  border-bottom: var(--pci-rule-w) solid var(--pci-brand);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--pci-fast) var(--pci-ease);
}
.pci-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.pci-faq .pci-faq-a {
  padding: 0 18px 18px;
  margin: 0;
  color: var(--pci-ink-soft);
  border-top: var(--pci-rule-w) solid var(--pci-line-soft);
  padding-top: 14px;
}

/* ---- the inline lead form ----------------------------------------------------------------
   Posts to the platform's EXISTING public lead route. Nothing here is a new endpoint; see the
   comment above the <form> in industries/_template.html for the file:line. */
.pci-lead {
  max-width: 640px;
  margin-inline: auto;
  border-radius: var(--pci-radius-lg);
  padding: clamp(24px, 4vw, 40px);
}
.pci-field { display: block; margin-bottom: 14px; text-align: left; }
.pci-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--pci-ink-soft);
}
.pci-field input,
.pci-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  font: inherit;
  font-family: var(--pci-font);
  color: var(--pci-ink);
  background: var(--pci-surface);
  border: var(--pci-rule-w) solid var(--pci-line);
  border-radius: var(--pci-radius-sm);
  transition: border-color var(--pci-fast) var(--pci-ease),
              box-shadow var(--pci-fast) var(--pci-ease);
}
.pci-field textarea { min-height: 96px; resize: vertical; }
.pci-field input:focus,
.pci-field textarea:focus {
  outline: none;
  border-color: var(--pci-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pci-focus) 26%, transparent);
}
.pci-lead button[type="submit"] { width: 100%; min-height: 48px; }
.pci-fine {
  margin: 12px 0 0;
  font-size: 12.5px; /* W5 POLISH: was 12.4px — 12.5 is the platform's step (281 uses) */
  line-height: 1.55;
  color: var(--pci-ink-mute);
  text-align: center;
}
/* The status region. Hidden until it has something to say; a live region that is always in the
   DOM with an empty string is a region a screen reader has already stopped listening to. */
.pci-msg {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--pci-radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--pci-ok);
  background: var(--pci-ok-bg);
  border: var(--pci-rule-w) solid color-mix(in srgb, var(--pci-ok) 34%, transparent);
}
.pci-msg.is-bad {
  color: var(--pci-bad);
  background: var(--pci-bad-bg);
  border-color: color-mix(in srgb, var(--pci-bad) 34%, transparent);
}
.pci-msg[hidden] { display: none; }

/* ---- the closing promise ------------------------------------------------------------------
   The last thing on every industry page. It is a quotation of a commitment, so it is set as one
   rather than as another paragraph in another card. */
.pci-promise {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
  border-radius: var(--pci-radius-lg);
  border: var(--pci-rule-w) solid var(--pci-line);
  background: var(--pci-recess);
  padding: clamp(30px, 5vw, 58px) var(--pci-pad);
}
.pci-promise-line {
  margin: 0 auto;
  max-width: 30ch;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.24;
  letter-spacing: -.03em;
  font-weight: 700;
  color: var(--pci-ink);
}
.pci-promise-line em {
  font-style: normal;
  background: var(--pci-ramp-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pci-promise p { margin: 16px auto 0; max-width: 58ch; color: var(--pci-ink-soft); }

/* The related-industries rail at the foot of an industry page. */
.pci-related { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; list-style: none; }
.pci-related a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* the same stated tap floor as .pci-jump a — see the note there */
  padding: 8px 16px;
  border-radius:999px;
  border: var(--pci-rule-w) solid var(--pci-line);
  background: var(--pci-surface);
  color: var(--pci-ink-soft);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--pci-fast) var(--pci-ease), color var(--pci-fast) var(--pci-ease);
}
.pci-related a:hover { border-color: var(--pci-brand); color: var(--pci-brand); }


/* =============================================================================================
 * 5. HUD SEAM. The four viewports are lane 1's; these pages only make room for them.
 *
 * The HUD mounts fixed viewports at [data-hud="top"|"left"|"right"|"bottom"] and the right
 * taskbar mirrors the left exactly. A page that hardcodes its own left offset breaks the moment
 * a viewport collapses, so the offsets are read from the HUD's own tokens with a zero default:
 * before lane 1's merge every one of these resolves to 0px and the page is unchanged.
 * ============================================================================================= */
.pci-shell {
  padding-left: var(--pc-hud-left-w, 0px);
  padding-right: var(--pc-hud-right-w, 0px);
  padding-top: var(--pc-hud-top-h, 0px);
  padding-bottom: var(--pc-hud-bottom-h, 0px);
  transition: padding var(--pci-slow) var(--pci-ease);
}


/* =============================================================================================
 * 6. FOCUS, MOTION AND THE MOBILE FLOOR.
 * ============================================================================================= */

/* One focus ring for everything this sheet draws. Never `outline:none` without a replacement. */
.pci-item:focus-visible,
.pci-jump a:focus-visible,
.pci-related a:focus-visible,
.pci-faq summary:focus-visible,
.pci-lead button:focus-visible {
  outline: 3px solid var(--pci-focus);
  outline-offset: 2px;
  border-radius: var(--pci-radius-sm);
}

/* Every transition in this file is a courtesy, and a courtesy that makes somebody ill is not
   one. Scoped to this sheet's own classes so it cannot reach into another lane's animation. */
@media (prefers-reduced-motion: reduce) {
  .pci-panel, .pci-item, .pci-jump a, .pci-related a,
  .pci-faq details, .pci-faq summary::after, .pci-shell,
  .pci-field input, .pci-field textarea {
    transition: none;
  }
  .pci-item:hover, .pci-jump a:hover { transform: none; }
}

/* MOBILE FIRST, and everything above this line already is: one column, wrapped rows, no fixed
   widths and no horizontal scroller anywhere. These queries only ADD columns as room appears.
   375px and 414px are asserted for horizontal overflow in tests/industries.mjs. */
@media (min-width: 560px) {
  /* Two columns here, by the same half-track mechanism, so only a trailing SINGLE can orphan. */
  .pci-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pci-grid > * { grid-column: span 2; }
  .pci-grid > :nth-child(2n + 1):last-child { grid-column: 2 / span 2; }
  .pci-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pci-lead button[type="submit"] { width: auto; min-width: 240px; }
}
/* THREES, AND A TRAILING ROW THAT CENTRES ITSELF.
 *
 * The track count is DOUBLE the column count and every card spans two. That is the whole
 * mechanism. A plain `repeat(3, 1fr)` cannot centre a short last row: it packs the remainder
 * hard against the left rail, and measured on this page at 1440 before this change that was
 * SEVEN of the nine categories — Retail 4+4+2, Health & Beauty 4+4+1, Hospitality 4+1,
 * Trades 4+2, Transport 3-of-4, Nonprofit 3-of-4, Food & Beverage 4x5 — because the sheet also
 * went to FOUR columns at 1180px, which is the "four with one hanging" the design law names by
 * hand. Six half-tracks give a trailing pair somewhere to start (track 2) and a trailing single
 * somewhere to sit (track 3), so the last row of every category is centred between the rails.
 *
 * The 1180px four-column step is GONE and is not coming back: nine categories of 3, 3, 4, 5, 6,
 * 8, 9, 10 and 20 entries produce an orphan under four columns in seven of the nine cases and
 * under three columns in none of them, once the rules below are in force. */
@media (min-width: 900px) {
  .pci-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pci-grid > * { grid-column: span 2; }
  /* RESET THE TWO-COLUMN CENTRING RULE FROM THE SMALLER BREAKPOINT FIRST. It is a
     `> :nth-child(2n+1):last-child` selector of the same 0,3,0 weight as the three-column rules
     below, so it is NOT overridden by them — it is only overridden by an equally weighted rule
     later in the source. Measured without this line: a category of exactly THREE laid out 2 + 1,
     because item 3 matched 2n+1:last-child, was sent to track 2, and could not fit beside the
     first two. Transport & Logistics and Nonprofit & Community, both 3, showed it. */
  .pci-grid > :nth-child(2n + 1):last-child        { grid-column: span 2; }
  .pci-grid > :nth-child(3n + 1):last-child       { grid-column: 3 / span 2; }
  .pci-grid > :nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }
  .pci-grid > :nth-child(3n + 2):last-child        { grid-column: 4 / span 2; }
  .pci-hero { border-radius: var(--pci-radius-lg); }
}

/* THE OVERFLOW FLOOR. minmax(0,1fr) above stops a long word from forcing a grid track wider
   than its share, and this stops one from forcing the PAGE wider than the viewport — the two
   together are why a 40-character slug in a blurb cannot produce a sideways scroll at 375px. */
.pci-item-name, .pci-item-blurb, .pci-h2, .pci-hero h1,
.pci-faq summary, .pci-promise-line {
  overflow-wrap: anywhere;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   PHONE — 560px and below.  LANE 16, W8.

   THE ONE `max-width` QUERY IN A MOBILE-FIRST SHEET, and it is here under protest rather than by
   preference. Everything above this line is written small-first with `min-width` queries, which
   is the right shape for rules this sheet OWNS. These rules do not own anything: they raise two
   controls that `marketing-core.css` draws and sizes, inside the breakpoint that file already
   opens at `marketing-core.css:109`. A `min-width` rewrite of somebody else's `max-width` rule
   would have to restate their desktop values here to have something to override, which is how
   two sheets end up disagreeing about a number neither of them owns.

   MEASURED AT 375x780 IN CHROMIUM, by the rule tests/mobilewave2.mjs:322 states — a link set
   inline inside a sentence is exempt (WCAG 2.5.8), everything else needs 44 x 44:

     footer a            38.4px tall, x14 links   marketing-core.css:109 raises the padding to
                                                  8px 12px at this same breakpoint and lands 5.6px
                                                  short of the floor.
     nav.crumb a         35.2px wide ("Home")     marketing-core.css:168 gives it colour and weight
                                                  and no box at all.

   THIS FIXES THEM ON industries.html AND NOWHERE ELSE, because this stylesheet is linked by
   industries.html and nothing else. Both defects are `marketing-core.css`'s and are on every
   public marketing page; the request to fix them once, there, is IR-5 in docs/lane-reports/
   W8-LANE-16.md. This block is not a substitute for that and does not pretend to be.

   `min-height` with `inline-flex` rather than more padding: padding has to be computed against a
   line box, so it is a number that is right for one font-size and silently wrong for the reader
   who has scaled their type up. 44 is asserted directly. */
/* =============================================================================================
 * THE DARK SIGN-IN PILL. Inserted ABOVE the mobile floor below on purpose — a rule appended at
 * the END of this sheet would sit below @media (max-width:560px) and win on source order over
 * the 12px/44px raises inside it.
 *
 * payco-marketing.css:168 paints the quiet half of the header pair
 *     .mnav .cta > a:first-child { background: white; color: var(--ink, <dark ink>); }
 * and css/payco-system.css redefines the LEGACY `--ink` to a near-white under
 * [data-theme="dark"]. A page linking only payco-marketing.css is fine, because `--ink` is then
 * undefined and its dark-ink fallback holds — that is why products.html measures 18.13:1. A page
 * linking BOTH gets near-white text on a hard-coded white pill: measured 1.83:1 on this page
 * and 1.13:1 on industries/coffee-shop.html at 1440 in dark, i.e. an invisible Sign In.
 * The repair belongs in payco-marketing.css, which is lane 7's file — see the IR in
 * docs/lane-reports/W9-LANE-8.md. This is the local floor until it lands: 0,4,1 against the
 * 0,3,1 above, and both halves of the pair repainted from tokens rather than from hex.
 * ============================================================================================= */
[data-theme="dark"] .mnav .cta > a:first-child {
  background: var(--pci-surface-2);
  color: var(--pci-ink);
  border-color: var(--pci-line);
  box-shadow: none;
}
[data-theme="dark"] .mnav .cta > a:first-child:hover {
  background: var(--pci-ramp);
  color: var(--pci-ramp-text);
  border-color: transparent;
}


@media (max-width: 560px) {
  footer a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px;
  }
  /* The breadcrumb's one link. `min-width` is what this needs — "Home" is 35.2px of type and the
     height already clears the floor — and the inline padding is what keeps the 44px box from
     colliding with the "›" that follows it. */
  .crumb a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px; padding-inline: 4px;
  }
}