/* Compact STAR-Tank range page with the storefront's live product cards. */
.tank-landing { --tank-accent: #58b0ff; }
.tank-landing .eyebrow { color: var(--tank-accent); font-size: 10px; }
.tank-landing .eyebrow::before { background: var(--tank-accent); }
.tank-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tank-heading h1 { font-size: clamp(30px, 3vw, 40px); margin: 10px 0; }
.tank-heading p { max-width: 65ch; color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 0; }
.tank-heading > .btn { flex: none; }
.tank-hero { margin: 24px 0 32px; }
.tank-hero .story-nodes { align-items: center; width: 100%; max-width: 620px; margin-inline: auto; }
.tank-hero .story-link { flex-basis: 22px; }
.tank-hero .story-node:last-child { flex-grow: 2.6; }
.tank-hero .story-node:last-child .story-node-media { max-width: none; height: auto; aspect-ratio: 942 / 640; background: #000; }
.tank-hero .story-node:last-child .story-node-media img { padding: 0; }
.tank-screen-link { align-self: center; display: inline-flex; align-items: center; min-height: 44px; color: var(--text-dim); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.tank-screen-link:hover { color: var(--tank-accent); }
.tank-hero h2 { font-size: clamp(23px, 2.4vw, 30px); line-height: 1.2; }
.tank-hero h2 span { color: var(--tank-accent); }
.tank-hero-copy > p { font-size: 15px; line-height: 1.65; max-width: 66ch; color: var(--text-dim); margin: 12px 0 18px; }
.tank-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.tank-benefits li { padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.tank-benefits strong { display: block; font-size: 14px; margin-bottom: 5px; }
.tank-benefits span { display: block; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.tank-shop { scroll-margin-top: 105px; }
.tank-shop-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 20px; }
.tank-shop-heading h2 { font-size: 24px; }
.tank-shop-heading > span { font-size: 13px; color: var(--text-mut); }
.tank-products .pcard-img { aspect-ratio: 4 / 3; }
.tank-products .pcard-body { flex: 1; }
.tank-products .pcard-body h3 { min-height: 0; }
.tank-products .pcard-desc { display: -webkit-box; -webkit-box-orient: vertical; white-space: normal; min-height: 2.8em; -webkit-line-clamp: 2; }
/* No .pcard-foot margin override here: store.css's `.pcard-foot{margin-top:auto}`
   is what pins price + actions to the bottom of a card. It used to be cancelled
   because this page's own .tank-buy block carried the auto margin instead. With
   that block gone the standard rule has to apply again, or the longer fuel note
   leaves the two cards' price rows at different heights. */
.tank-order-note { color: var(--text-dim); font-size: 13px; line-height: 1.6; border-top: 1px solid var(--line); padding-top: 16px; margin: 16px 0; }
.tank-text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-dim); font-size: 14px; font-weight: 600; }
.tank-text-link:hover { color: var(--tank-accent); text-decoration: underline; }
.tank-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 24px; }
.tank-section { padding-top: 80px; scroll-margin-top: 110px; }
.tank-section h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; margin: 12px 0 16px; text-wrap: balance; }
.tank-section-head { max-width: 660px; margin-bottom: 28px; }
.tank-install { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.tank-install-image { border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: #fff; }
.tank-install-image img { display: block; width: 100%; height: auto; }
.tank-steps { list-style: none; padding: 0; margin: 28px 0 12px; counter-reset: tank-step; }
.tank-steps li { display: flex; gap: 18px; margin-bottom: 26px; counter-increment: tank-step; }
.tank-steps li::before { content: "0" counter(tank-step); flex: none; font: 13px var(--mono); color: var(--tank-accent); padding-top: 3px; }
.tank-steps h3 { font-size: 19px; line-height: 1.3; }
.tank-steps p { font-size: 14px; margin: 8px 0 0; }
.tank-more { border-top: 1px solid var(--line-2); margin-top: 72px; padding-top: 40px; }
.tank-more p { max-width: 70ch; }

@media (max-width: 920px) {
  .tank-hero { gap: 24px; }
  .tank-install { gap: 30px; }
}
@media (max-width: 700px) {
  .tank-heading { display: block; }
  .tank-heading > .btn { margin-top: 16px; }
  .tank-hero { grid-template-columns: 1fr; padding: 20px; margin: 20px 0 28px; }
  .tank-benefits { grid-template-columns: 1fr; gap: 6px; }
  .tank-benefits li { padding: 8px 10px; }
  .tank-benefits li > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .tank-benefits strong { font-size: 13px; margin: 0; }
  .tank-benefits span { font-size: 11px; text-align: right; }
  .tank-products.product-grid, .tank-install { grid-template-columns: 1fr; }
  .tank-shop-heading { display: block; }
  .tank-shop-heading > span { display: block; margin-top: 8px; }

  .tank-section { padding-top: 42px; }
  .tank-section h2 { font-size: 28px; }
  .tank-more { margin-top: 40px; padding-top: 28px; }
  .tank-landing .breadcrumb { font-size: 10px; line-height: 1.8; }
}
@media (max-width: 640px) {
  .tank-hero .story-node:last-child { grid-column: 1 / -1; width: 100%; max-width: 320px; justify-self: center; }
}