/* product page — page-specific rules only; shared light-page theme lives in css/light.css */

/* LOAD-BEARING: this page is rendered by JS into an empty <main>; without
   reserved height the static CTA band and footer shift a full viewport and CLS
   measures 1.0002. DESIGN.md sec.5 */
.prodroot{min-height:100vh}
.phead{max-width:1200px;margin:0 auto;padding:150px 40px 0}
.phead .eyebrow{display:block;margin-bottom:14px}
.phead h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.2vw,3.125rem);line-height:1.08;letter-spacing:-.025em;margin:0;text-wrap:balance;max-width:24ch}
.psku{font-family:var(--mono);font-size:var(--t-fine);color:var(--text-2);letter-spacing:.06em;margin-top:14px}
.plede{font-size:clamp(1rem,1.4vw,1.1875rem);color:var(--steel);margin:18px 0 0;line-height:1.6;max-width:72ch;text-wrap:pretty}
.pheadcta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

.playout{display:grid;grid-template-columns:400px 1fr;gap:26px;align-items:start;margin:48px 0 8px}
.sidecard{padding:36px;position:sticky;top:80px;display:flex;flex-direction:column}
.bigstat{display:flex;align-items:baseline;gap:10px;margin-top:26px}
.bigstat .big{font-family:var(--display);font-weight:600;font-size:4rem;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.bigstat .unit{font-family:var(--mono);font-size:0.9375rem;color:var(--text-2)}
.biglabel{font-size:var(--t-fine);color:var(--text-2);margin-top:10px}
.minirows{margin:24px 0 26px;border-top:1px solid var(--line)}
.mrow{gap:18px;padding:10px 0;font-size:var(--t-small)}
.mrow .l{color:var(--text-2)}
.mrow .v{color:var(--ink);font-weight:500;font-family:var(--mono);font-size:var(--t-fine);text-align:right}
.sidecard .btn{justify-content:center}
.qtystepper{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.qtystepper[hidden]{display:none}
.qtylabel{font-size:var(--t-fine);font-weight:600;color:var(--text-2)}
.qtystepper .qstep{background:var(--mist)}
.qtystepper .qstep button{color:var(--steel)}
.qtystepper .qstep button:hover{background:rgb(var(--cyan-rgb)/.16);color:var(--accent)}
.qtystepper .qn{color:var(--ink)}
.backlink{display:block;margin-top:16px;font-size:var(--t-small);font-weight:600;text-align:center;color:var(--text-2)}
.backlink:hover{color:var(--ink)}
.sidecard .sglyph{position:static;width:52px;height:52px;margin:0 0 16px;opacity:.9}
.assure{font-size:var(--t-fine);color:var(--text-2);line-height:1.6;margin:22px 0 0}

.specpanel{padding:36px 40px 30px}
.specpanel h2{font-family:var(--display);font-size:1.3125rem;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:0 0 10px}
.srows{border-top:1px solid var(--line)}
.srow{gap:24px;padding:12px 0;font-size:0.84375rem}
.srow .sl{color:var(--text-2)}
.srow .sv{color:var(--ink);font-weight:500;font-family:var(--mono);font-size:var(--t-fine);text-align:right;overflow-wrap:anywhere}
.srow .sv small{display:block;color:var(--text-2);font-weight:400;font-size:0.6875rem;margin-top:3px}
.srow.long{flex-direction:column;gap:5px}
.srow.long .sv{text-align:left;line-height:1.55}
.specnote{font-size:var(--t-fine);color:var(--text-2);line-height:1.6;margin:18px 0 0}
.specnote a{color:var(--accent)}

/* annotated cutaway — the hero's leader-line language on the product page */
.cutaway{position:relative;overflow:hidden;background:var(--ink);border-radius:var(--r-panel);padding:44px 44px 40px;margin:26px 0 8px;color:var(--paper)}
.cutaway::after{content:'';position:absolute;left:50%;bottom:-40%;transform:translateX(-50%);width:90%;height:70%;background:radial-gradient(ellipse at center,rgb(var(--cyan-rgb)/.12) 0%,transparent 65%);pointer-events:none}
.cuthead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.cuthead h2{font-family:var(--display);font-size:1.3125rem;font-weight:600;letter-spacing:-.015em;color:var(--text-hi);margin:0}
.cutsec{font-family:var(--mono);font-size:0.625rem;letter-spacing:.24em;color:var(--slate)}
.cutgrid{position:relative;display:grid;grid-template-columns:minmax(190px,1fr) minmax(300px,520px) minmax(190px,1fr);gap:0 14px;align-items:center}
.cutart svg{width:100%;height:auto;display:block}
.cutcol{display:grid;grid-template-rows:1fr 1fr;align-items:center;height:100%;min-height:280px}
.cutcol.l .cl{text-align:right;border-right:2px solid var(--line-dark);padding-right:14px}
.cutcol.r .cl{text-align:left;border-left:2px solid var(--line-dark);padding-left:14px}
.cl .idx{font-family:var(--mono);font-size:0.6875rem;color:var(--amber);letter-spacing:.08em}
.cl h3{font-family:var(--display);font-size:0.9375rem;font-weight:600;color:var(--text-hi);margin:5px 0 3px;letter-spacing:-.01em}
.cl p{color:var(--slate);font-size:var(--t-fine);margin:0;line-height:1.5}
.cl p b{color:var(--cyan-300);font-family:var(--mono);font-weight:500;font-size:var(--t-meta);margin-right:6px}
@media(max-width:900px){
  .cutaway{padding:34px 26px 30px}
  .cutgrid{grid-template-columns:1fr}
  .cutart{order:-1;max-width:400px;margin:0 auto 18px}
  .cutart .ldr{display:none}
  .cutcol{grid-template-rows:none;grid-template-columns:1fr 1fr;gap:14px;min-height:0;height:auto}
  .cutcol.l{margin-bottom:14px}
  .cutcol.l .cl,.cutcol.r .cl{text-align:left;border-right:none;border-left:none;border-top:1px solid rgb(var(--slate-rgb)/.3);padding:10px 0 0}
}

.related{margin:56px 0 48px}
.related h2{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0 0 26px}
.relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.relcard{display:flex;flex-direction:column;padding:30px;color:var(--ink)}
.relcard:hover{color:var(--ink)}
.relcard h3{font-family:var(--display);font-size:1.125rem;font-weight:600;margin:12px 0 6px;letter-spacing:-.015em;line-height:1.3}
.relstat{font-size:var(--t-small);color:var(--steel);font-family:var(--mono);flex:1}
.relstat span{color:var(--text-2)}
.relmore{margin-top:18px;font-size:var(--t-small);font-weight:600;color:var(--accent)}

@media(max-width:980px){.playout{grid-template-columns:1fr}.sidecard{position:static}.relgrid{grid-template-columns:repeat(2,1fr)}}
/* .wrap's gutter ladder lives in base.css -- a shorthand here would drop it */
@media(max-width:640px){.phead{padding:130px 24px 0}.specpanel{padding:26px 22px 22px}.sidecard{padding:28px 24px}.relgrid{grid-template-columns:1fr}.psku{font-size:0.6875rem}.crumb{font-size:0.6875rem}}
@supports(padding:max(0px)){
  .phead{padding-left:max(40px,env(safe-area-inset-left));padding-right:max(40px,env(safe-area-inset-right))}
  @media(max-width:640px){.phead{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}}
}