/* Optimus Distributor — hub pages: insights (data-hero="shelf") and
   products (data-hero="counterwall"). One sheet, two shelves.
   Loads after tokens.css + chrome.css; chrome owns promo/header/footer/buttons/cards. */

/* ---------- shared hub hero ---------- */
.hubhero{position:relative;overflow:clip;padding:76px 0 64px;border-bottom:1px solid var(--line);
  background:radial-gradient(900px 420px at 82% -10%,rgba(29,130,198,.16),transparent 60%),
  linear-gradient(180deg,var(--bg2),var(--bg))}
.hubhero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(96,168,232,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,168,232,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(720px 380px at 80% 0,#000,transparent 72%);
  mask-image:radial-gradient(720px 380px at 80% 0,#000,transparent 72%)}
.hubhero .wrap{position:relative}
.hubhero .kicker{margin-bottom:20px}
.hubhero h1{max-width:22ch}
.stand{margin-top:22px;max-width:66ch;color:var(--mut);font-size:15.5px;line-height:1.7}

/* counterwall stat row (numbers live in the HTML; JS only animates) */
/* The rule above this row spans the full 1152px while the three numbers under it
   occupied 305px -- a full-width line promising a full-width row and delivering a
   quarter of one. Distributing them turns residue into structure. (B-E3) */
.statrow{display:flex;flex-wrap:wrap;gap:var(--g5);max-width:720px;margin-top:38px;padding-top:28px;border-top:1px solid var(--line2)}
.statrow div b{display:block;font:600 clamp(30px,3.4vw,42px)/1 var(--disp);color:var(--cyan2)}
.statrow div span{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut2)}

/* ---------- shared bits ---------- */
.go{display:inline-flex;align-items:center;gap:var(--g1);margin-top:16px;
  font:500 12.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan2)}
/* the argument band on products/insights: the six families, the guide library */
.band2{border-top:1px solid var(--line);padding:var(--sec-lg) 0}
.band2 .shead h2{font:600 clamp(30px,3.8vw,44px)/1.16 var(--disp)}
.endnote{margin-top:48px;max-width:65ch;color:var(--mut);border-top:1px solid var(--line2);padding-top:26px}

/* ---------- insights: the featured guide shelf ---------- */
.guides{padding-bottom:52px}
.shelf{display:grid;grid-template-columns:1fr 1fr;gap:var(--g3)}
.gcard{display:flex;flex-direction:column;position:relative;overflow:clip;padding:0}
.gcard>article{display:flex;flex-direction:column;flex:1}
.gcard .gph{display:block;height:190px;overflow:hidden;border-bottom:1px solid var(--line);position:relative}
.gcard .gph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,13,26,.05),rgba(6,13,26,.55))}
.gcard .gph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.gcard:hover .gph img{transform:scale(1.05)}
.gcard article{padding:28px 34px 30px}
.gcard::after{content:"";position:absolute;right:-24%;bottom:-58%;width:72%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(41,170,227,.14),transparent 65%);pointer-events:none}
.gtag{align-self:flex-start;display:inline-flex;font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);border:1px solid var(--line2);border-radius:999px;padding:5px 13px;margin-bottom:20px}
.gcard h3{font:600 clamp(19px,2vw,22px)/1.3 var(--disp);letter-spacing:-.01em;max-width:30ch}
.gcard p{margin-top:12px;color:var(--mut);font-size:14.5px;line-height:1.65;max-width:52ch}

/* ---------- insights: the article grid (cloned by tooling — keep self-contained) ---------- */
.artsec{padding-top:52px}
.artgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--g3)}
.acard{display:flex;flex-direction:column;padding:28px 28px 24px}
.ameta{display:flex;align-items:center;gap:var(--g2);margin-bottom:14px}
.adate{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut2)}
.chip{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);
  background:rgba(41,170,227,.09);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.acard h3{font:600 17px/1.4 var(--disp);letter-spacing:-.005em}
.acard p{margin-top:12px;color:var(--mut);font-size:14px;line-height:1.6}
/* margin-top:auto, not a fixed gap: cards in a row now share one baseline for their
   call to action however long the heading above it wraps. (B-D11) */
.acard .go{margin-top:auto;padding-top:14px}
.gcard .go{margin-top:auto;padding-top:14px}

/* ---------- products: the brand wall ---------- */
.brandwall{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g3)}
.bcard{display:flex;flex-direction:column;padding:26px 24px 22px}
.bcard h3{font:600 20px/1.2 var(--disp);letter-spacing:.02em}
.bmeta{margin-top:7px;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut2)}
.bmeta .auth{color:var(--cyan);font-weight:500}
.bcard p{margin-top:12px;color:var(--mut);font-size:13.5px;line-height:1.6;flex:1}
.bcard .go{margin-top:auto;padding-top:14px}
.bcard.still:hover{transform:none;box-shadow:none;border-color:var(--line)}

/* ---------- products: the valve-family strip ---------- */
.families{display:grid;gap:var(--g3)}
.family{display:grid;grid-template-columns:300px 1fr;scroll-margin-top:90px;overflow:clip;
  border:1px solid var(--line);border-radius:var(--rad);
  background:linear-gradient(180deg,rgba(18,33,61,.45),rgba(12,24,48,.3))}
.family .famph{height:100%;max-height:260px;min-height:210px;border:0;border-radius:0;border-right:1px solid var(--line)}
.family{align-items:center}
.family .famtx{align-self:center}
.famph.cut{background:radial-gradient(72% 72% at 50% 46%,#11213D,#070F1E 66%,#050A14)}
.famph.cut img{object-fit:contain;padding:20px;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(41,170,227,.14))}
.famtx{padding:28px 32px 26px}
.famtx h3{font:600 19px/1.3 var(--disp)}
.famtx p{margin-top:12px;color:var(--prose);font-size:14.5px;line-height:1.65;max-width:65ch}

/* ---------- products: enquiry band ---------- */
.enquire{padding:var(--band) 0;text-align:center;border-block:1px solid var(--line2);
  background:linear-gradient(180deg,var(--bg2),var(--bg))}
.enquire h2{font:600 clamp(26px,3.2vw,36px)/1.2 var(--disp);letter-spacing:-.01em;margin:16px 0 12px}
.enquire p{color:var(--mut);max-width:52ch;margin:0 auto 28px}
.enquire .btns{justify-content:center}

/* ---------- breakpoints (card counts divide evenly at every step) ---------- */
@media (max-width:900px){
  .shelf{grid-template-columns:1fr}
  .artgrid{grid-template-columns:1fr}
  .brandwall{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .family{grid-template-columns:1fr}
  .family .famph{min-height:190px;height:190px;border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:520px){
  .brandwall{grid-template-columns:1fr}
  .statrow{gap:var(--g4)}
}

/* ---------- products: further reading shelf ---------- */
.reading{padding:var(--sec-sm) 0;border-top:1px solid var(--line)}
.readgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--g2)}
.readgrid a{display:block;height:100%;border:1px solid var(--line);border-radius:var(--rad-s);padding:18px 20px;background:rgba(12,24,48,.4);transition:border-color .2s,background .2s,transform .22s}
.readgrid a:hover{border-color:rgba(76,196,255,.4);background:rgba(41,170,227,.06);transform:translateY(-3px)}
.readgrid span{display:block;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:7px}
.readgrid b{font:600 15px/1.4 var(--disp);color:var(--ink)}
.readmore{margin-top:24px;font:500 13.5px var(--disp)}
.readmore a{color:var(--cyan2)}
.readmore a:hover{text-decoration:underline}
@media (max-width:700px){.readgrid{grid-template-columns:1fr}}

/* ---------- the full catalogue index ----------
   Twenty-four of the thirty categories have no page of their own, so before this existed
   the search could name them and then land the buyer on a page that never mentions them.
   Names and counts are verbatim from FACTS.md; each chip carries a prefilled enquiry.
   (2026-08-21 round 2, finding C-2.) */
.catindex{border-top:1px solid var(--line2);margin-top:var(--sec-sm);padding-top:var(--sec-sm)}
.catindex .shead{max-width:62ch}
.catall{display:flex;flex-wrap:wrap;gap:var(--g1);margin-top:var(--g4)}
.catall a{display:inline-flex;align-items:baseline;gap:var(--g1);border:1px solid var(--line);border-radius:999px;padding:9px 16px;background:rgba(12,24,48,.4);transition:color .2s,border-color .2s,background .2s}
.catall a:hover{color:#fff;border-color:rgba(76,196,255,.45);background:rgba(41,170,227,.08)}
.catall b{font:500 13px var(--disp);letter-spacing:.01em;color:var(--ink);font-weight:500}
.catall span{font:500 12px var(--mono);letter-spacing:.08em;color:var(--cyan)}
@media (max-width:520px){.catall a{padding:8px 13px}}

/* ---------- hub hero right column ----------
   The hub heroes stopped at ~865px of a 1296px container and left the rest of the first
   screen empty on products, insights and glossary. Raised in all three review rounds.
   The column is aria-hidden and non-essential: at 960 and below it is removed entirely,
   so nothing a crawler or a small screen needs lives only in here. */
/* column-gap ONLY. A symmetric `gap` put 56px between the kicker, the h1, the lede and
   the stat row as well as between the two columns -- the exact hazard the reviewer
   flagged when every gap in the site was migrated to one token. */
.hubhero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 440px;
  grid-template-rows:auto auto auto auto;column-gap:var(--g5);row-gap:0;align-items:start}
/* the motif was top-anchored against a bottom-weighted text column, leaving a 380x467
   diagonal void beneath it (round 4, C F-5) */
.hubhero .heroside{align-self:center}
.hubhero .kicker,.hubhero h1,.hubhero .stand,.hubhero .statrow{grid-column:1}
.heroside{grid-column:2;grid-row:1 / span 4;align-self:center;justify-self:end;width:100%;
  margin:0;border-block:1px solid var(--line2);padding:26px 0 18px}
.heroside img{width:100%;height:auto;display:block;opacity:.95}
/* The four pattern names are rendered BY THE PAGE, not inside the SVG. Referenced
   with <img> the SVG is an isolated document and cannot reach the page's webfont, so
   labels inside it came out in the OS default monospace -- directly above a caption
   that was in IBM Plex. So the page has to line the names up under the four valves itself.
   Four EQUAL columns do not do that. The valves sit at 88, 188, 288 and 388 of the SVG's
   520-wide viewBox -- 16.92%, 36.15%, 55.38%, 74.62% -- because the run continues past the
   check valve to carry the flow arrow. Four equal columns put the labels at 15.1%, 39.4%,
   63.6% and 87.9%, drifting from -10.6px to +35.2px, and at that drift CHECK sat under the
   cyan flow arrow and read as its caption rather than as the name of the valve. So each
   label is placed on its own valve's centre, in the SVG's own coordinates.
   The .08em nudge is half the trailing letter-space, which otherwise pushes the ink of an
   UPPERCASE + letter-spaced word left of its own box centre. */
.heroside-keys{position:relative;height:15px;margin:10px 0 0;padding:0;
  font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut2)}
.heroside-keys span{position:absolute;top:0;white-space:nowrap;
  transform:translateX(calc(-50% + .08em))}
.heroside-keys span:nth-child(1){left:16.92%}
.heroside-keys span:nth-child(2){left:36.15%}
.heroside-keys span:nth-child(3){left:55.38%}
.heroside-keys span:nth-child(4){left:74.62%}
.heroside-cap{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mut2);
  text-align:right}
@media (max-width:900px){
  .hubhero .wrap{grid-template-columns:minmax(0,1fr)}
  .heroside{display:none}
}