/* ============================================================
   Pressure Tanker ISO page — small page-specific additions.
   Loaded after styles.css; uses the shared design tokens only.
   (Line-break balancing, sticky-card fit, sidebar stretch and the
   compact phone spec tiles now live in styles.css / main.js.)
   ============================================================ */

/* ---------- Overview: main column + key-spec sidebar ----------
   Source order is top / aside / bottom so the key specs and quote
   buttons sit before the long table on tablets and phones. On desktop
   the aside spans both rows (and stretches — shared rule), so its card
   can stay sticky beside the specifications table. */
@media (min-width:1025px){
  .pti-main-top{grid-column:1;grid-row:1}
  .pti-main-bottom{grid-column:1;grid-row:2}
  .pti-aside{grid-column:2;grid-row:1 / span 2}
}
.pti-hero-media{margin-bottom:32px}
.prose .pti-intro{font-size:1.08rem;color:var(--ink)}
.pti-tiles{margin:32px 0 0}
.pti-h2{font-size:1.6rem;margin:0 0 16px}

/* ---------- Key benefits (ordered list of cards) ---------- */
.pti-benefits{list-style:none}
/* 04: its chip row sits at the card foot (shared .benefit-body>.chips:last-child rule) */
/* portrait data-plate photo inside a wide card: frame the plate and logo */
.pti-plate img{object-position:center 58%}
@media (max-width:640px){
  /* 16:9 frame on phones: show the whole MAXGROSS…CUB.CAP block */
  .pti-plate img{object-position:center 52%}
}
/* tablet (2 columns): keep every row full and balanced —
   03 becomes a horizontal photo card (like 08 and 10), then the text
   cards pair up (04+05, 06+07, 11+12) and 09 / 13 span the row */
@media (min-width:641px) and (max-width:1024px){
  .pti-benefits .pti-tspan{grid-column:1/-1}
  .pti-benefits .pti-trow{grid-column:1/-1;flex-direction:row}
  .pti-benefits .pti-trow .benefit-media{flex:0 0 46%;aspect-ratio:auto;min-height:260px}
  .pti-benefits .pti-trow .benefit-media img{position:absolute;inset:0}
}

/* ---------- Discharge system ---------- */
.pti-sub .copy h3{font-size:clamp(1.45rem,2.3vw,1.8rem);margin:.4rem 0 .75rem}
.pti-sub .valve-legend{margin-top:24px}
.pti-sub .steps{margin-top:30px}
.pti-ops{margin-top:84px}
.pti-ops-aside .callout{margin:0}
@media (min-width:901px){
  .pti-ops-aside{position:sticky;top:calc(var(--header-h) + 24px)}
}
@media (max-width:900px){
  .pti-ops{margin-top:56px}
}

/* ---------- Outcome strip: icon-left rows on phones ---------- */
@media (max-width:560px){
  .pti-outcomes .outcome{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:start;padding:20px 22px}
  .pti-outcomes .outcome .ic{grid-row:1 / span 2;margin:0}
}