/* Additive product-only rules; existing shared CSS and cache keys stay intact. */
.content-page[data-product-code] .page-hero{grid-template-columns:minmax(0,1fr)}
.content-page[data-product-code] .page-hero h1{font-size:clamp(27px,3vw,44px);overflow-wrap:anywhere}
.content-page[data-product-code] .page-hero .product-subtitle{font-size:clamp(21px,2vw,27px);line-height:1.5;margin-block:18px 0}
.product-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-block-start:24px}
.product-hero-actions .button,.product-download-row .button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;max-width:100%;white-space:normal}
.product-hero-actions svg,.product-download-row svg{width:22px;height:22px;flex:none}
.product-body,.product-body *{box-sizing:border-box}
.product-status{padding:18px 20px;margin-block:22px 0!important;border:1px solid #d3ad6b;border-inline-start:5px solid var(--orange,#ef7900);border-radius:12px;background:#fff1d9;color:#614009!important;font-size:18px;line-height:1.7;font-weight:600}
/* The mobile reader omits the hero and strips these classes; its section copy
   therefore retains the notice. Desktop already displays the same notice above
   its first Download action. */
.product-body>.product-status{display:none}
.product-audience{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:center}
.product-audience>div{min-width:0}
.product-art{margin:0;min-width:0}
.product-art img{display:block;width:100%;height:auto;object-fit:contain}
.product-download-row{margin-block-start:22px!important}
.product-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;list-style:none;padding:0!important;margin:0}
.product-features>.product-feature{min-width:0;border:1px solid var(--content-outline);border-radius:18px;padding:24px;background:#ffffff45;margin:0}
.product-feature p{margin:0}
.product-infographic{margin:0;min-width:0}
.product-flow{display:grid;gap:22px;counter-reset:product-step;list-style:none;padding:0!important;margin:0}
.product-flow>li{position:relative;display:grid;grid-template-columns:40px 48px minmax(0,1fr);gap:16px;align-items:start;counter-increment:product-step;border:1px solid var(--content-outline);border-radius:18px;background:#ffffff45;padding:22px;margin:0}
.product-flow>li::before{content:counter(product-step);display:grid;place-items:center;inline-size:40px;block-size:40px;border:1px solid #b7cbd6;border-radius:50%;background:#f8fbfd;color:#255b7a;font-weight:650;font-size:18px;grid-column:1;grid-row:1}
.product-flow>li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:42px;inset-block-start:100%;block-size:23px;border-inline-start:2px solid #a3becd}
.product-step-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:#e7eff2;color:#255b7a;grid-column:2;grid-row:1}
.product-step-icon svg{width:27px;height:27px}
.product-step-copy{grid-column:3;grid-row:1;min-width:0}
.product-step-copy h3{margin:0 0 9px}
.product-step-copy p{margin:0}
.a11y-contrast .product-feature,.a11y-contrast .product-flow>li,.a11y-contrast .product-status{background:#fff;color:#000!important;border-color:#555}
.a11y-contrast .product-step-icon,.a11y-contrast .product-flow>li::before{background:#fff;color:#000;border:1px solid #555}
@media(max-width:1000px){.product-audience{grid-template-columns:minmax(0,1fr) 230px;gap:24px}}
@media(max-width:800px){.product-audience{grid-template-columns:minmax(0,1fr)}.product-art{max-width:290px;margin-inline:auto}.product-features{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
 .product-features>.product-feature{padding:21px 18px}
 .product-flow>li{grid-template-columns:34px minmax(0,1fr);gap:12px;padding:19px 16px}
 .product-flow>li::before{inline-size:34px;block-size:34px;font-size:16px}
 .product-step-icon{grid-column:1;grid-row:2;width:34px;height:34px;border-radius:9px}
 .product-step-icon svg{width:23px;height:23px}
 .product-step-copy{grid-column:2;grid-row:1/span 2}
 .product-flow>li:not(:last-child)::after{inset-inline-start:33px}
}
@media print{
 .product-art{max-width:45mm}
 .product-features{grid-template-columns:minmax(0,1fr)}
 .product-feature,.product-flow>li{break-inside:avoid}
 .product-status,.product-step-icon,.product-flow>li::before{print-color-adjust:exact}
}