/* ============================================================
   POWR2 — dedicated product pages (MAX, PRO/XPRO/XPRO+, Hybrid, XPRO+)
   Shares --steel/--lemon/etc. custom properties from global-styles-inline-css.
   ============================================================ */

/* Hero */
.pp-hero{position:relative;color:#fff;padding:0;}
.pp-hero-bg{position:absolute;top:0;bottom:0;left:0;width:100%;background:var(--steel-900);z-index:0;}
.pp-hero-wrap{position:relative;z-index:1;padding:0 28px;}
.pp-hero-inner{display:grid;grid-template-columns:2fr 1fr;gap:0;align-items:stretch;min-height:480px;}
.pp-hero-media{position:relative;min-height:320px;}
.pp-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;}
.pp-hero-text{display:flex;flex-direction:column;justify-content:center;padding:64px 0 64px 48px;}
.pp-eyebrow-badge{margin-bottom:16px;}
.pp-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lemon);margin-bottom:14px;}
.pp-hero .pp-hero-text h1{font-size:clamp(34px,4.2vw,54px);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0 0 18px;color:#fff;}
.pp-hero .pp-tagline{font-size:16px;line-height:1.6;color:rgba(255,255,255,.75);max-width:480px;margin:0 0 28px;}

/* General section rhythm */
.pp-section{padding:56px 0;}
.pp-section-alt{background:var(--paper-2);}
.pp-narrow{max-width:932px;margin:0 auto;padding:0 28px;}
.pp-h2{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;color:var(--steel-900);margin:0 0 20px;}
.pp-lede{font-size:19px;line-height:1.65;color:var(--steel-900);font-weight:500;max-width:720px;}
.pp-body{font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 20px;max-width:720px;}

.pp-section-block{margin:38px 0;}
.pp-table{width:100%;border-collapse:collapse;}
.pp-table tr{border-bottom:1px solid var(--line);}
.pp-table tr:last-child{border-bottom:none;}
.pp-table th{text-align:left;padding:14px 15px;font-size:14px;font-weight:700;color:var(--steel-900);width:44%;vertical-align:top;}
.pp-table td{text-align:left;padding:14px 15px;font-size:15px;color:var(--muted);font-weight:500;}

/* Applications */
.pp-applications{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;}
.pp-applications li{position:relative;padding-left:24px;font-size:15px;font-weight:600;color:var(--steel-900);}
.pp-applications li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:2px;background:var(--lemon);}

/* Quote */
.pp-quote{border-left:3px solid var(--lemon);padding:6px 0 6px 26px;margin:0;max-width:760px;}
.pp-quote p{font-size:clamp(19px,2vw,24px);line-height:1.4;font-weight:300;font-style:italic;color:var(--steel-900);letter-spacing:-.01em;margin:0;}
.pp-quote cite{display:block;margin-top:14px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--muted);font-style:normal;}

/* Proof point */
.pp-proof{display:flex;align-items:center;gap:32px;flex-wrap:wrap;}
.pp-proof .pp-proof-stat{font-size:clamp(40px,6vw,64px);font-weight:800;color:var(--steel-900);letter-spacing:-.02em;flex:0 0 auto;}
.pp-proof .pp-body{margin:0;flex:1 1 320px;min-width:240px;}

/* Link with arrow (used under ADVANTAGE paragraph) */
.pp-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--steel);text-decoration:none;letter-spacing:.02em;}
.pp-link:hover{color:var(--lemon-600);}
.pp-link svg{width:14px;height:14px;}

@media(max-width:840px){
  .pp-hero-inner{grid-template-columns:1fr;min-height:0;}
  .pp-hero-media{min-height:260px;}
  .pp-hero-text{padding:40px 0;}
  .pp-applications{grid-template-columns:1fr;}
}

/* Dark mode — these components hardcode near-black text (--steel-900) and
   mid-gray (--muted) that vanish on a dark background. Re-map them to the
   site's dark-mode palette (same vars article.css sets on html.powr2-dark)
   so the specs table, section headings, and applications list stay readable
   when a page is toggled to dark mode. Both html.powr2-dark and the legacy
   html.dark selector are covered. */
html.powr2-dark .pp-h2,
html.dark .pp-h2{color:var(--heading);}
html.powr2-dark .pp-table th,
html.dark .pp-table th{color:var(--heading);}
html.powr2-dark .pp-table td,
html.dark .pp-table td{color:var(--fg-soft);}
html.powr2-dark .pp-table tr,
html.dark .pp-table tr{border-bottom-color:var(--hairline);}
html.powr2-dark .pp-applications li,
html.dark .pp-applications li{color:var(--fg);}
html.powr2-dark .pp-lede,
html.dark .pp-lede{color:var(--fg);}
html.powr2-dark .pp-body,
html.dark .pp-body{color:var(--fg-soft);}