/* Peptide Works -- Compound Research Hub (category page).
 *
 * The hub design was signed off as static HTML that carries nearly all of its
 * styling as INLINE styles. Those survive the port untouched, inside the
 * pw_hub_* shortcodes, which is what keeps the Elementor page pixel-identical
 * to the approved page. This file therefore carries only the three things an
 * inline style cannot express:
 *
 *   1. @font-face declarations
 *   2. :hover states
 *   3. media queries
 *
 * plus the two outer grids (.pw-hero, .pw-body), which move here because those
 * elements become Elementor CONTAINERS rather than divs -- Elementor owns their
 * style attribute, so the grid has to be reachable by class instead.
 *
 * NOTE ON TYPE: the hub uses Newsreader + IBM Plex, while the PDP (pw-pdp.css)
 * uses Source Serif 4 + Inter + Roboto Mono. Those are two different type
 * systems on one site. Deliberate decision needed -- see explainer.
 */

/* Roboto Mono is NOT a hub face -- it belongs to the PDP. It is declared here
   for one purpose: the product cards in the two [products] grids must be the
   same card as the PDP's related-products grid, and the mono face is visible
   in the figures. IBM Plex Mono draws a DOTTED zero, Roboto Mono a SLASHED
   one, so a price sat side by side in the two places did not match however
   closely the size and weight were aligned. The file already ships to this
   folder -- deploy-assets.sh syncs the whole fonts directory to both. */
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:100 700;font-display:swap;src:url('fonts/roboto-mono-var.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter-var.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/newsreader-400.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/newsreader-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');}

/* ---- page shell -------------------------------------------------------- */
/* Scoped to .pw-hub so nothing here can reach the PDP or the rest of the theme. */
.pw-hub{font-family:'IBM Plex Sans',system-ui,sans-serif;color:#16191B;}
.pw-hub a{color:#1D5C2C;text-decoration:none;}
.pw-hub a:hover{color:#123D1D;}
.pw-hub *{box-sizing:border-box;}

/* The theme wraps page content in its own padded container; the hub bands are
   full-bleed by design (the hero and products bands carry their own tinted
   background edge-to-edge), so the padding has to be neutralised here. */
.pw-hub-band{width:100%;}

/* ---- the two outer grids (now Elementor containers) -------------------- */
.pw-hub .pw-hero{max-width:1320px;margin:0 auto;padding:clamp(30px,4vw,54px) clamp(14px,3vw,32px);display:grid;grid-template-columns:2fr 1fr;gap:clamp(26px,4vw,56px);align-items:start;}
.pw-hub .pw-body{max-width:1320px;margin:0 auto;padding:clamp(30px,3.8vw,52px) clamp(14px,3vw,32px) clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(30px,4vw,62px);align-items:start;}
.pw-hub .pw-body > .pw-body-main{min-width:0;}
.pw-hub .pw-rail{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px;}

/* ---- hovers ------------------------------------------------------------ */
.pw-hub .pw-navlink:hover{color:#1D5C2C !important;}
.pw-hub .pw-cta:hover{background:#123D1D !important;}
.pw-hub .pw-dlbtn:hover{background:#F4F7F2 !important;}
.pw-hub .pw-prodcard:hover{border-color:rgba(29,92,44,0.45) !important;}
/* The Elementor kit styles bare <button> with white-space:nowrap, which
   inherits into the question text and stops it wrapping: the longest FAQ
   question then measures 599px inside a 402px column and the whole page
   scrolls sideways on a phone. Nothing in our own markup sets it -- same class
   of trap as the kit's button rule inverting the PDP pill styling. Reset it
   here on both the button and its question span. */
/* font-family as well as white-space, and for the same underlying reason: the
   Elementor kit styles bare <button>, and a button does not inherit typography
   from its ancestors the way ordinary elements do -- the UA gives form controls
   their own font, so whatever the kit declares on the element wins outright.
   The question spans then inherit Inter from the button. Two visits to this one
   rule now; anything else the kit puts on <button> will land here too. */
.pw-hub .pw-faq-btn,
.pw-hub .pw-faq-btn>span{white-space:normal;font-family:'IBM Plex Sans',system-ui,sans-serif;}
.pw-hub .pw-faq-btn:hover{color:#1D5C2C;}
/* Visible focus for the accordion -- the static page relied on the UA ring,
   which the theme resets away. */
.pw-hub .pw-faq-btn:focus-visible{outline:2px solid #1D5C2C;outline-offset:3px;}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:1080px){
  .pw-hub .pw-body{grid-template-columns:1fr !important;gap:38px !important;}
  .pw-hub .pw-rail{position:static !important;}
  .pw-hub .pw-toc{display:none !important;}

  /* Once the two columns collapse, the rail's two cards want different homes.
     "On this page" is wayfinding and belongs ABOVE the sections it indexes --
     stacked underneath, the reader only meets the index after scrolling past
     everything it was meant to help them skip. References are end-matter and
     stay at the bottom, so this is not a matter of moving the rail as a block.

     They can only be separated by dissolving the <aside> box: display:contents
     promotes both cards to direct grid items of .pw-body, which is what makes
     them independently orderable. Nothing else in the file needs the aside's
     own box below this width -- it is already position:static, and its
     flex-column gap is replaced by the grid's own 38px. */
  .pw-hub .pw-rail{display:contents;}
  .pw-hub .pw-rail > .pw-onthispage{order:1;}
  .pw-hub .pw-body > .pw-body-main{order:2;}
  .pw-hub .pw-rail > .pw-refs{order:3;}
  /* The 14px card margin stacked on top of the grid gap once these became grid
     items in their own right; the gap alone is the spacing now. */
  .pw-hub .pw-rail > .pw-onthispage,
  .pw-hub .pw-rail > .pw-refs{margin-bottom:0;}
}
@media (max-width:900px){
  .pw-hub .pw-hero{grid-template-columns:1fr !important;gap:26px !important;}
  .pw-hub .pw-facts{grid-template-columns:repeat(2,1fr) !important;}
  .pw-hub .pw-foot{grid-template-columns:repeat(2,1fr) !important;}
  .pw-hub .pw-h1{font-size:36px !important;}
}
@media (max-width:620px){
  .pw-hub .pw-row{grid-template-columns:1fr !important;gap:3px !important;padding:12px 14px !important;}
  .pw-hub .pw-facts{grid-template-columns:1fr !important;}
}

/* ---- Woo product grids ([products] shortcode) -------------------------- */
/* The two grids in the design were hand-written .pw-prodcard anchors; on the
 * real page they are WooCommerce loops. Same fixes the PDP's related band
 * needed, and for the same reasons -- see pw-pdp.css around `ul.products`:
 *
 *   `ul.products` not `.products`  -- Woo puts .products on the wrapping
 *      <section> too, so the bare class matches twice and the outer match
 *      wins the cascade.
 *   ::before/::after killed        -- Woo's clearfix pseudo-elements become
 *      phantom grid items and blow a hole in the middle of the grid.
 *   width/float reset              -- Woo ships li.product{width:22%;float:left}
 *      at a specificity that beats a bare grid declaration.
 */
/* 4 columns in the band, matching the PDP's related-products grid exactly --
   both sit in the same 1256px container, so this is what makes the CARD the
   same size (299px) rather than 37% larger. The hero grid is in a narrower
   column and keeps 3; see below. */
.pw-hub .pw-prodgrid ul.products{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:clamp(12px,1.6vw,20px);margin:0 !important;padding:0 !important;list-style:none;}
.pw-hub .pw-prodgrid ul.products::before,
.pw-hub .pw-prodgrid ul.products::after{display:none !important;content:none !important;}
/* The card is a SHARED COMPONENT, so it carries the PDP's typography, not the
   hub's. Inter and IBM Plex Sans have visibly different letterforms; setting
   it on the card means the title and button inherit the right face without
   restating it on each. Everything OUTSIDE these grids stays on the hub's
   own faces -- the wrapper rule further down re-establishes IBM Plex Sans
   for the rest of the page. */
.pw-hub .pw-prodgrid ul.products li.product{width:100% !important;float:none !important;margin:0 !important;padding:0 !important;display:flex;flex-direction:column;font-family:'Inter',system-ui,sans-serif;font-size:15.5px;line-height:1.55;background:#FFFFFF;border:1px solid rgba(22,25,27,0.11);border-radius:16px;overflow:hidden;transition:border-color .15s ease;}
.pw-hub .pw-prodgrid ul.products li.product:hover{border-color:rgba(29,92,44,0.45);}
/* margin-bottom matches WooCommerce's own 1em, which the PDP card keeps and our
   `margin:0` reset had removed -- it is the gap between image and title. */
.pw-hub .pw-prodgrid ul.products li.product img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#F4F7F2;mix-blend-mode:multiply;margin:0 0 15.5px !important;display:block;}
/* font-family is explicit, and has to be. The rule set size, weight and colour
   but not the family, so the loop title inherited the THEME's serif (Rufina)
   -- a face this page does not otherwise use anywhere. It rendered the card
   title in a serif while every other card on the site shows a sans, and it
   was invisible in review because the size and weight were already right.
   Anything WooCommerce renders inside our markup inherits from the theme
   unless told otherwise; state the family. */
.pw-hub .pw-prodgrid ul.products li.product .woocommerce-loop-product__title{font-family:'Inter',system-ui,sans-serif !important;font-size:15.5px !important;font-weight:600 !important;line-height:22px;color:#16191B;margin:0 !important;padding:15px 15px 0 !important;}
/* Size and weight taken from the PDP's related-products card, measured rather
   than eyeballed: 15px / 400. It was 14.5px / 600, which is what made the
   amount read heavier here than the identical card on the product page. */
.pw-hub .pw-prodgrid ul.products li.product .price{font-family:'Roboto Mono',monospace !important;font-size:15px !important;font-weight:400 !important;color:#16191B !important;margin:2px 0 0 !important;padding:6px 15px 14px !important;font-variant-numeric:tabular-nums;display:block;line-height:22px !important;margin-bottom:7.5px !important;}
/* Pushes the price (and the button under it) to the bottom of the card, so a
   one-price product and a price-range product still line their buttons up. */
.pw-hub .pw-prodgrid ul.products li.product .price{margin-top:auto !important;}
.pw-hub .pw-prodgrid ul.products li.product .price .woocommerce-Price-amount{display:inline !important;padding:0 !important;font-family:inherit !important;font-weight:inherit !important;color:inherit !important;}
.pw-hub .pw-prodgrid ul.products li.product .price del{opacity:.55;margin-right:6px;}
.pw-hub .pw-prodgrid ul.products li.product .price ins{text-decoration:none;}
/* Loop buttons, matching the PDP's related-products cards exactly.
 *
 * These were hidden, on the reasoning that a hub is a reading page and a
 * variable product's loop button only links back to the PDP the card already
 * links to. That was overruled: the two grids must look like the ones on the
 * product page, and a card with no button does not.
 *
 * Restated rather than inherited -- the loop button is <a class="button">, which
 * the Elementor kit's button rule does not match (it covers button/input/
 * .elementor-button), so without this it falls through to WooCommerce's default
 * grey. Same fix, same reason, as the PDP's own rule. */
.pw-hub .pw-prodgrid ul.products li.product a.button{
  display:block;margin:0 15px 15px;padding:10px 14px;
  background:#1D5C2C !important;color:#FFFFFF !important;
  border:0 !important;border-radius:12px !important;
  font-family:'Inter',system-ui,sans-serif !important;font-size:13.5px !important;font-weight:600 !important;
  line-height:1.3 !important;text-align:center;white-space:normal !important;
}
.pw-hub .pw-prodgrid ul.products li.product a.button:hover,
.pw-hub .pw-prodgrid ul.products li.product a.button:focus{background:#123D1D !important;color:#FFFFFF !important;}
.pw-hub .pw-prodgrid ul.products li.product a.added_to_cart{display:block;margin:0 15px 15px;font-size:13px;color:#123D1D;text-align:center;}
.pw-hub .pw-prodgrid ul.products li.product a{text-decoration:none;color:inherit;}
/* Hero grid is narrower, so its cards are smaller. */
.pw-hub .pw-prodgrid-hero ul.products{grid-template-columns:repeat(3,1fr) !important;gap:12px;}
.pw-hub .pw-prodgrid-hero ul.products li.product{border-radius:14px;}
@media (max-width:760px){
  .pw-hub .pw-prodgrid ul.products,
  .pw-hub .pw-prodgrid-hero ul.products{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:620px){
  .pw-hub .pw-prodgrid ul.products{grid-template-columns:1fr !important;}
}

/* ---- band backgrounds -------------------------------------------------- */
/* In the static page these lived on the <section> wrappers' style attribute.
 * Those wrappers are Elementor containers now and Elementor owns their style
 * attribute, so the tint has to be reached by class or the hero and products
 * bands render flat white against the page. */
.pw-hub-hero-band{background:#F4F7F2;border-bottom:1px solid rgba(22,25,27,0.09);}
.pw-hub-products-band{background:#F4F7F2;border-top:1px solid rgba(22,25,27,0.09);border-bottom:1px solid rgba(22,25,27,0.09);}

/* Woo's sale flash is absolutely positioned against the <li>, so with the card's
 * overflow:hidden it clips against the rounded corner and reads as a bug.
 * Re-seat it inside the image area in the hub's own type. */
.pw-hub .pw-prodgrid ul.products li.product{position:relative;}
.pw-hub .pw-prodgrid ul.products li.product .onsale{
  position:absolute !important;top:10px !important;right:10px !important;left:auto !important;
  margin:0 !important;padding:3px 8px !important;min-height:0 !important;min-width:0 !important;
  border-radius:999px !important;background:#1D5C2C !important;color:#FFFFFF !important;
  font-family:'IBM Plex Mono',monospace !important;font-size:9.5px !important;font-weight:500 !important;
  letter-spacing:0.08em !important;text-transform:uppercase !important;line-height:1.6 !important;
}

/* ---- sections: headings + prose as real Elementor widgets -------------- */
/* These were inline styles on <span>/<h2>/<p> in the approved page. They move
 * here because those elements are now Elementor heading/text-editor widgets --
 * the client edits the WORDS in the editor, and the styling stays out of their
 * way (and out of reach of the rich-text editor, which would rewrite it).
 *
 * Specificity note: the Elementor global Kit styles bare h2/p, so each rule
 * targets the widget's own class to sit above it in the cascade.
 */
.pw-hub .pw-sec{scroll-margin-top:88px;margin-top:clamp(34px,4vw,54px);}
.pw-hub .pw-body-main > .pw-sec:first-child{margin-top:0;}

.pw-hub .pw-eyebrow .elementor-heading-title{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:#66706B;font-weight:400;line-height:1.4;}

.pw-hub .pw-h2 .elementor-heading-title{
  font-family:'Newsreader',Georgia,serif;font-weight:500;
  font-size:clamp(26px,2.8vw,34px);line-height:1.1;letter-spacing:-0.015em;
  color:#16191B;margin:4px 0 0;}

/* Re-establish the page font at EVERY Elementor widget wrapper.
 *
 * Elementor's kit declares font-family on the widget wrappers themselves --
 * .elementor-widget-text-editor, and the same for shortcode and html widgets.
 * Those wrappers sit BETWEEN .pw-hub and our content, and inheritance takes the
 * nearest ancestor that declares a value: specificity is irrelevant, because
 * these are different elements, not competing rules on one element. So
 * .pw-hub{font-family:...} is silently overridden for everything inside any
 * widget -- which is everything on the page.
 *
 * Chasing the symptoms one element at a time is how this gets missed twice: it
 * showed up first as body prose in Inter, then again as the FAQ questions. Fix
 * it once, at the wrapper. Our own inline font-family declarations (IBM Plex
 * Mono for figures, Newsreader for headings) still win, being inline. */
.pw-hub .elementor-widget-text-editor,
.pw-hub .elementor-widget-shortcode,
.pw-hub .elementor-widget-html,
.pw-hub .elementor-widget-container{font-family:'IBM Plex Sans',system-ui,sans-serif;}

/* The prose font has to be declared HERE, not left to .pw-hub.
 *
 * Elementor's kit sets `font-family: var(--e-global-typography-text-font-family),
 * Inter` on `.elementor-widget-text-editor`. That wrapper is a NEARER ancestor to
 * the paragraphs than .pw-hub, and inheritance takes the nearest ancestor's
 * computed value -- specificity never enters into it, so .pw-hub declaring IBM
 * Plex Sans on an outer element does nothing at all.
 *
 * Net effect before this rule: every structured block rendered in IBM Plex Sans
 * and every paragraph of body copy rendered in Inter, on the same page. It was a
 * regression from the port -- in the static original the prose carried its own
 * inline font, and moving it into text-editor widgets to make it editable is
 * exactly what dropped it. Anything moved out of inline-styled markup and into
 * an Elementor widget needs its typography restated. */
.pw-hub .pw-prose,
.pw-hub .pw-prose p{font-family:'IBM Plex Sans',system-ui,sans-serif;}
.pw-hub .pw-prose{margin-top:16px;}
.pw-hub .pw-prose p{margin:0 0 15px;text-wrap:pretty;color:#3C443E;}
.pw-hub .pw-prose p:last-child{margin-bottom:0;}

/* The one structured block that carried no top margin of its own. */
.pw-hub #classification dl{margin-top:16px;}

/* Disclaimer: the tinted box was the <section>'s own inline style. */
.pw-hub .pw-disclaimer{
  background:#F7F9F6;border:1px solid rgba(22,25,27,0.1);border-radius:16px;
  padding:clamp(20px,2.6vw,30px);}
.pw-hub .pw-disclaimer .pw-eyebrow .elementor-heading-title{letter-spacing:0.14em;}
.pw-hub .pw-disclaimer .pw-prose{margin-top:13px;}
.pw-hub .pw-disclaimer .pw-prose p{margin-bottom:13px;color:#4A544D;}

/* ---- neutralise Elementor's stacking container padding ------------------ */
/* Elementor gives EVERY container 10px of padding and it stacks at each
 * nesting level (explainer gotcha #24). The hub nests six deep -- main > band >
 * body > column > section > widget -- so the prose measured 750px against the
 * 770px the approved design specifies, and the error grows with depth.
 *
 * Zero it across the hub, then re-declare the three places that genuinely want
 * padding. These rules come LAST on purpose: same specificity as the reset, so
 * source order is what makes them win. */
.pw-hub.e-con,
.pw-hub .e-con{padding:0;}
.pw-hub .pw-hero{padding:clamp(30px,4vw,54px) clamp(14px,3vw,32px);}
.pw-hub .pw-body{padding:clamp(30px,3.8vw,52px) clamp(14px,3vw,32px) clamp(40px,5vw,72px);}
.pw-hub .pw-disclaimer{padding:clamp(20px,2.6vw,30px);}

/* ==========================================================================
   v2 -- rendered from fields, not from markup in post meta.
   Every value here was an inline style in the old blocks. Moving them into
   classes is what removes the kses-stripping risk for good (gotcha 29) and what
   makes the markup something a person could read.
   ========================================================================== */

/* hero */
.pw-hub .pw-hero{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(22px,3.4vw,48px);align-items:start;padding:clamp(30px,4vw,54px) 0 clamp(24px,3vw,40px);}
.pw-hub .pw-hero h1{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:clamp(30px,3.6vw,44px);line-height:1.08;letter-spacing:-0.015em;margin:6px 0 0;color:#16191B;}
.pw-hub .pw-hero-intro{max-width:60ch;margin:14px 0 0;font-size:15px;line-height:1.6;color:#3C443E;text-wrap:pretty;}
.pw-hub .pw-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0;}
.pw-hub .pw-chips li{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.06em;color:#3C443E;background:#F4F7F2;border:1px solid rgba(22,25,27,0.10);border-radius:999px;padding:5px 11px;}

/* key facts card */
.pw-hub .pw-hero-card{background:#FFFFFF;border:1px solid rgba(22,25,27,0.12);border-radius:14px;overflow:hidden;}
.pw-hub .pw-hero-card dl{margin:0;display:grid;grid-template-columns:1fr 1fr;}
.pw-hub .pw-fact{padding:13px 16px;border-bottom:1px solid rgba(22,25,27,0.08);}
.pw-hub .pw-fact:nth-last-child(-n+2){border-bottom:0;}
.pw-hub .pw-fact dt{margin:0;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:#66706B;}
.pw-hub .pw-fact dd{margin:3px 0 0;font-size:14.5px;font-weight:600;color:#16191B;}

/* specification table */
.pw-hub .pw-spec{margin:16px 0 0;border:1px solid rgba(22,25,27,0.12);border-radius:14px;overflow:hidden;background:#FFFFFF;}
.pw-hub .pw-spec-row{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;padding:13px 18px;border-bottom:1px solid rgba(22,25,27,0.08);}
.pw-hub .pw-spec-row:last-child{border-bottom:0;}
.pw-hub .pw-spec dt{margin:0;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.11em;text-transform:uppercase;color:#66706B;padding-top:2px;}
.pw-hub .pw-spec dd{margin:0;font-size:14.5px;font-weight:500;color:#16191B;word-break:break-word;}

/* research areas */
.pw-hub .pw-areas{display:grid;gap:12px;margin-top:16px;}
.pw-hub .pw-area{border:1px solid rgba(22,25,27,0.12);border-radius:14px;padding:18px 20px;background:#FFFFFF;}
/* #9AA39C failed WCAG AA everywhere it was used: 2.58:1 on the page ground at
   10.5px, against the 4.5:1 small-text floor (axe, 24 nodes on a hub page --
   every .pw-eyebrow and every .pw-area-num/.pw-num). Replaced with #66706B,
   which the same file already used for the on-this-page/refs eyebrow, so this
   collapses two greys into one token rather than inventing a third. Worst case
   across all four hub grounds (#FFFFFF/#F7F9F6/#F4F7F2/#F2F7EF) is 4.72:1. */
.pw-hub .pw-area-num{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.11em;color:#66706B;}
.pw-hub .pw-area h3{margin:4px 0 8px;font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:19px;line-height:1.2;color:#16191B;}
.pw-hub .pw-area p{margin:0 0 10px;font-size:14px;line-height:1.6;color:#3C443E;text-wrap:pretty;}
.pw-hub .pw-area p:last-child{margin-bottom:0;}

/* storage tiles */
.pw-hub .pw-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px;}
.pw-hub .pw-tile{border:1px solid rgba(22,25,27,0.12);border-radius:12px;padding:13px 15px;background:#F7F9F6;}
.pw-hub .pw-tile-label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:#66706B;}
.pw-hub .pw-tile strong{display:block;margin-top:4px;font-size:14px;font-weight:600;color:#16191B;}

/* certificate */
.pw-hub .pw-coa{margin-top:16px;border:1px solid rgba(29,92,44,0.18);border-radius:14px;overflow:hidden;background:#F2F7EF;}
.pw-hub .pw-coa-head{padding:11px 18px;border-bottom:1px solid rgba(29,92,44,0.15);}
.pw-hub .pw-coa-row{display:flex;justify-content:space-between;gap:16px;padding:11px 18px;border-bottom:1px solid rgba(29,92,44,0.10);font-size:14px;}
.pw-hub .pw-coa-row:last-child{border-bottom:0;}
.pw-hub .pw-coa-row span{color:#4A544D;}
.pw-hub .pw-coa-empty{margin:16px 0 0;font-size:14px;color:#66706B;font-style:italic;}

/* note callout */
.pw-hub .pw-note{margin:14px 0 0;padding:11px 15px;border-left:3px solid rgba(29,92,44,0.35);background:#F7F9F6;font-size:13.5px;line-height:1.55;color:#4A544D;}

/* prose */
.pw-hub .pw-prose p{margin:0 0 15px;font-size:15px;line-height:1.65;color:#3C443E;text-wrap:pretty;max-width:70ch;}
.pw-hub .pw-prose p:last-child{margin-bottom:0;}

/* rail */
.pw-hub .pw-onthispage,.pw-hub .pw-refs{background:#F7F9F6;border:1px solid rgba(22,25,27,0.10);border-radius:14px;padding:16px;margin-bottom:14px;}
.pw-hub .pw-onthispage ol,.pw-hub .pw-refs ol{list-style:none;margin:10px 0 0;padding:0;}
.pw-hub .pw-onthispage a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;padding:5px 0;font-size:13.5px;color:#3C443E;text-decoration:none;}
.pw-hub .pw-onthispage a:hover{color:#1D5C2C;}
.pw-hub .pw-num{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#66706B;}
.pw-hub .pw-refs li{padding:11px 0;border-bottom:1px solid rgba(22,25,27,0.08);font-size:12.5px;line-height:1.5;color:#3C443E;}
.pw-hub .pw-refs li:last-child{border-bottom:0;}
.pw-hub .pw-refs a{display:inline-block;margin-top:4px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#1D5C2C;}

@media (max-width:980px){
  .pw-hub .pw-hero{grid-template-columns:1fr;}
  .pw-hub .pw-tiles{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .pw-hub .pw-spec-row{grid-template-columns:1fr;gap:4px;}
  .pw-hub .pw-tiles{grid-template-columns:1fr;}
  .pw-hub .pw-hero-card dl{grid-template-columns:1fr;}
  .pw-hub .pw-fact:nth-last-child(-n+2){border-bottom:1px solid rgba(22,25,27,0.08);}
  .pw-hub .pw-fact:last-child{border-bottom:0;}
}

/* The v1 eyebrow rule targets `.pw-eyebrow .elementor-heading-title` -- it was
   written against the heading WIDGET's inner markup, so with Elementor out of
   the path it matched nothing and the eyebrows rendered as plain text. Styled
   on the element itself now. A good illustration of why the v1 CSS could not
   simply be reused: half of it was shaped by Elementor's DOM, not the design. */
.pw-hub .pw-eyebrow{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#1D5C2C;}
.pw-hub .pw-sec > .pw-eyebrow{color:#66706B;letter-spacing:0.11em;font-size:10.5px;margin-bottom:2px;}
.pw-hub .pw-onthispage > .pw-eyebrow,
.pw-hub .pw-refs > .pw-eyebrow{color:#66706B;font-size:10.5px;letter-spacing:0.13em;}
.pw-hub .pw-coa-head .pw-eyebrow{color:#123D1D;font-size:10.5px;letter-spacing:0.14em;}

/* FAQ accordion, v2 markup.
 *
 * The v1 rules were written against the old shortcode's inline-styled output and
 * match nothing here, so the buttons fell through to the Elementor kit's button
 * styling and rendered as green pills -- the same kit rule that has now caught
 * the PDP pills, the FAQ nowrap and the loop buttons. Anything that is a bare
 * <button> on this site needs its appearance stated outright. */
.pw-hub .pw-faq-list{margin-top:16px;border-top:1px solid rgba(22,25,27,0.12);}
.pw-hub .pw-faq-item{border-bottom:1px solid rgba(22,25,27,0.12);}
.pw-hub .pw-faq-btn{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;
  background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
  padding:15px 0 !important;margin:0 !important;text-align:left;cursor:pointer;
  font-family:'IBM Plex Sans',system-ui,sans-serif !important;font-size:15.5px !important;
  font-weight:600 !important;line-height:1.35 !important;color:#16191B !important;white-space:normal !important;}
.pw-hub .pw-faq-btn:hover{color:#1D5C2C !important;background:none !important;}
.pw-hub .pw-faq-btn:focus-visible{outline:2px solid #1D5C2C;outline-offset:3px;}
/* flex:1;min-width:0 or the question refuses to shrink below its max-content
   width and pushes the page sideways on a phone -- see gotcha notes. */
.pw-hub .pw-faq-q{flex:1;min-width:0;}
.pw-hub .pw-faq-sign{flex:none;font-size:19px;line-height:1;color:#7C867E;}
.pw-hub .pw-faq-a{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:#3C443E;text-wrap:pretty;max-width:none;}

/* Prose was capped at 70ch on top of the column's own width, so it sat visibly
   narrower than everything beside it. The body column already sets the measure;
   a second cap inside it just makes the page look mis-aligned. */
.pw-hub .pw-prose p{max-width:none;}

/* .pw-wrap had NO rule at all. In v1 it was a class on markup that carried its
   own inline max-width, so the class was decorative; in v2 the template relies
   on it and the bands ran edge to edge. The v1 stylesheet kept only what
   Elementor did not already handle -- which is why carrying it over piecemeal
   keeps finding holes like this one and the eyebrow. */
.pw-hub .pw-wrap{max-width:1320px;margin-left:auto;margin-right:auto;padding-left:clamp(14px,3vw,32px);padding-right:clamp(14px,3vw,32px);}
.pw-hub .pw-hub-band{width:100%;}
.pw-hub .pw-hub-products-band{background:#F2F7EF;padding:clamp(30px,4vw,54px) 0;}
.pw-hub .pw-hub-hero-band{background:linear-gradient(180deg,#F7F9F6 0%,#FFFFFF 100%);}
.pw-hub .pw-hub-products-band .pw-h2{margin:6px 0 18px;font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:clamp(26px,2.8vw,34px);line-height:1.1;color:#16191B;}

/* The body grid: document + rail. */
.pw-hub .pw-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(24px,3.4vw,52px);align-items:start;padding-top:clamp(26px,3.4vw,44px);padding-bottom:clamp(30px,4vw,56px);}
.pw-hub .pw-body-main{min-width:0;}
.pw-hub .pw-rail{position:sticky;top:137px;}
.pw-hub .pw-sec{scroll-margin-top:137px;padding-top:clamp(22px,2.8vw,38px);}
.pw-hub .pw-sec .pw-h2{margin:2px 0 12px;font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:clamp(26px,2.8vw,36px);line-height:1.12;letter-spacing:-0.015em;color:#16191B;}
.pw-hub .pw-disclaimer{margin-top:clamp(20px,2.6vw,32px);background:#F2F7EF;border:1px solid rgba(29,92,44,0.18);border-radius:16px;padding:clamp(20px,2.6vw,30px);}
.pw-hub .pw-disclaimer .pw-prose p{font-size:14px;color:#4A544D;}

@media (max-width:1024px){
  .pw-hub .pw-body{grid-template-columns:1fr;}
  .pw-hub .pw-rail{position:static;}
}

/* Separator between certificates when a page has more than one. */
.pw-hub .pw-coa-group{padding:11px 18px 4px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:#123D1D;border-top:1px solid rgba(29,92,44,0.15);}
.pw-hub .pw-coa-group:first-of-type{border-top:0;}