/* R84: composed technical-sizing preview; deliberately static and scoped to K2. */
body.r83-home .r83h-card-media.r84-sizing {
  display:flex; flex-direction:column; gap:14px; padding:24px 24px 40px;
  aspect-ratio:4/3; min-height:330px; background:#eef1e9;
}
body.r83-home .r84-sizing-top { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; }
body.r83-home .r84-sizing-input { display:flex; flex-direction:column; gap:7px; min-width:0; }
body.r83-home .r84-sizing-label { display:block; font-size:14px; line-height:1.4; font-weight:500; color:#536c70; }
body.r83-home .r84-sizing-values { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 13px; color:#193e45; }
body.r83-home .r84-sizing-values strong { font-family:'Space Grotesk',sans-serif; font-size:30px; line-height:1.2; letter-spacing:-.03em; white-space:nowrap; }
body.r83-home .r84-sizing-values small { font-family:'IBM Plex Sans',sans-serif; font-weight:500; font-size:15px; letter-spacing:0; }
body.r83-home .r84-sizing-values > span { font-size:20px; color:#ad8850; }
body.r83-home .r83h-card-media.r84-sizing .r84-sizing-pump { width:clamp(86px,10vw,150px); height:100px; flex:0 0 auto; object-fit:contain; }
body.r83-home .r84-sizing-chart { flex:1; min-height:120px; width:100%; display:block; overflow:visible; }
body.r83-home .r84-sizing-chart text { font-family:'IBM Plex Sans',sans-serif; fill:#536c70; font-size:18px; }
body.r83-home .r84-sizing-chart .r84-sizing-point-label { fill:#805520; font-weight:600; }
body.r83-home .r84-sizing-result { display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid #b8cfc0; border-radius:6px; background:#e0eadc; color:#193e45; }
body.r83-home .r84-sizing-result > span:first-child { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#285d4e; color:white; font-size:17px; flex:none; }
body.r83-home .r84-sizing-result > div { display:flex; align-items:baseline; justify-content:space-between; flex:1; flex-wrap:wrap; gap:3px 12px; }
body.r83-home .r84-sizing-result strong { font-size:17px; line-height:1.35; }
body.r83-home .r84-sizing-result small { font-size:13px; line-height:1.4; color:#45605a; }
body.r83-home .r83h-card-media.r84-sizing figcaption { font-size:12px; left:24px; right:24px; }
@media (min-width:761px) and (max-width:1100px), (max-width:450px) {
 body.r83-home .r83h-card-media.r84-sizing { gap:9px; padding:16px 16px 38px; min-height:330px; }
 body.r83-home .r84-sizing-top { gap:8px; }
 body.r83-home .r84-sizing-values { gap:4px 7px; }
 body.r83-home .r84-sizing-values strong { font-size:25px; }
 body.r83-home .r84-sizing-values small { font-size:13px; }
 body.r83-home .r83h-card-media.r84-sizing .r84-sizing-pump { width:86px; height:70px; }
 body.r83-home .r84-sizing-chart text { font-size:25px; }
 body.r83-home .r84-sizing-result { padding:10px; gap:9px; }
 body.r83-home .r84-sizing-result > div { display:block; }
 body.r83-home .r84-sizing-result small { display:block; margin-top:2px; }
 body.r83-home .r83h-card-media.r84-sizing figcaption { left:16px; right:16px; font-size:11px; }
}

/* The four homepage examples share one media canvas and aligned action rows. */
body.r83-home .r83h-card[data-r83-demo^="k"] .r83h-card-media {
  background:#ececec; aspect-ratio:4/3; min-height:330px; flex-shrink:0;
}
body.r83-home .r84-sizing-chart circle { stroke:#ececec; }
body.r83-home .r83h-card[data-r83-demo^="k"] .r83h-card-actions .r83h-info { min-height:calc(2 * 1.45em + 20px); }
body.r83-home .r83h-card-media.r84-finder { display:flex; flex-direction:column; gap:20px; padding:24px 24px 40px; }
body.r83-home .r84-finder-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:9px 14px; }
body.r83-home .r84-finder-filters { display:flex; flex-wrap:wrap; gap:8px; }
body.r83-home .r84-finder-filters > span { display:block; border:1px solid #b4c8bc; background:#e1eadd; border-radius:5px; color:#244b43; font-size:14px; line-height:1.4; font-weight:600; padding:7px 10px; }
body.r83-home .r84-finder-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); flex:1; min-height:0; list-style:none; gap:12px; margin:0; padding:0; }
body.r83-home .r84-finder-products li { display:flex; flex-direction:column; min-width:0; min-height:0; padding:14px 10px; border:1px solid #c5cfc8; border-radius:7px; background:#fffefa; }
body.r83-home .r83h-card-media .r84-finder-products img { width:100%; height:0; min-height:0; flex:1; object-fit:contain; }
body.r83-home .r84-finder-products strong { margin-top:12px; text-align:center; font-size:15px; line-height:1.4; color:#193e45; white-space:nowrap; }
body.r83-home .r84-finder-result { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:5px 12px; color:#193e45; }
body.r83-home .r84-finder-result strong { font-size:17px; line-height:1.4; }
body.r83-home .r84-finder-result > span { color:#536c70; font-size:13px; line-height:1.4; }
body.r83-home .r83h-card-media.r84-finder figcaption { left:24px; right:24px; }
@media (min-width:761px) and (max-width:1100px), (max-width:450px) {
 body.r83-home .r83h-card-media.r84-finder { padding:16px 16px 38px; gap:14px; }
 body.r83-home .r84-finder-products { gap:7px; }
 body.r83-home .r84-finder-products li { padding:10px 5px; }
 body.r83-home .r84-finder-products strong { font-size:14px; }
 body.r83-home .r84-finder-filters > span { font-size:13px; padding:6px 8px; }
 body.r83-home .r83h-card-media.r84-finder figcaption { left:16px; right:16px; font-size:11px; }
}
/* Subgrid aligns headings, descriptions, both action rows and media within each desktop pair.
   The existing flex layout remains the fallback; on phones cards flow independently. */
@supports (grid-template-rows:subgrid) {
 @media (min-width:761px) {
  body.r83-home .r83h-grid:has(> .r83h-card[data-r83-demo="k1"]) { row-gap:0; }
  body.r83-home .r83h-card[data-r83-demo^="k"] { display:grid; grid-template-rows:subgrid; grid-row:span 6; row-gap:0; margin-bottom:28px; }
  body.r83-home .r83h-card[data-r83-demo^="k"] .r83h-card-copy { display:grid; grid-template-rows:subgrid; grid-row:span 5; row-gap:0; }
  body.r83-home .r83h-card[data-r83-demo^="k"] .r83h-card-actions { display:grid; grid-template-rows:subgrid; grid-row:span 2; row-gap:6px; margin-top:0; }
  body.r83-home .r83h-card[data-r83-demo^="k"] .r83h-card-actions .r83h-info { min-height:44px; }
 }
}
@media (max-width:760px) {
 body.r83-home .r83h-card[data-r83-demo^="k"] .r83h-card-actions .r83h-info { min-height:44px; }
}
/* Keep composed previews in normal flow so enlarged text can increase their height. */
body.r83-home .r83h-card[data-r83-demo="k2"] .r83h-card-media.r84-sizing,
body.r83-home .r83h-card[data-r83-demo="k3"] .r83h-card-media.r84-finder { aspect-ratio:auto; padding-bottom:16px; }
body.r83-home .r83h-card-media.r84-sizing { display:grid; grid-template-rows:auto minmax(120px,1fr) auto auto; }
body.r83-home .r84-sizing-chart { height:100%; min-height:120px; }
body.r83-home .r83h-card-media.r84-sizing figcaption,
body.r83-home .r83h-card-media.r84-finder figcaption { position:static; width:auto; margin:0; }
body.r83-home .r83h-card-media.r84-finder { display:grid; grid-template-rows:auto minmax(min-content,1fr) auto auto; }
body.r83-home .r84-finder-products { min-height:min-content; }
body.r83-home .r83h-card-media .r84-finder-products img { min-height:65px; }
body.r83-home .r84-finder-products strong { white-space:normal; }
@media (max-width:760px) {
 body.r83-home .r83h-card[data-r83-demo="k1"] .r83h-card-media,
 body.r83-home .r83h-card[data-r83-demo="k4"] .r83h-card-media { min-height:0; }
 body.r83-home .r83h-card[data-r83-demo="k3"] .r83h-card-media { min-height:300px; }
}
/* Preserve the showroom photograph's natural ratio plus its separate caption strip. */
body.r83-home .r83h-showroom .r83h-card-media { aspect-ratio:auto; }
body.r83-home .r83h-showroom .r83h-card-media img { width:100%; height:auto; }
@media (min-width:761px) {
 body.r83-home .r83h-card[data-r83-demo^="k"] .r83h-card-media { align-self:stretch; height:100%; }
}
@media (min-width:761px) {
 body.r83-home .r83h-card[data-r83-demo^="k"] .r83h-card-media {
  width:100%; max-width:100%; height:100%; aspect-ratio:auto;
  min-height:clamp(360px,calc(37.5vw - 34.5px),484.5px);
 }
}
body.r83-home .r84-sizing-plot { position:relative; width:100%; min-width:0; min-height:120px; }
body.r83-home .r84-sizing-plot .r84-sizing-chart { position:absolute; inset:0; width:100%; height:100%; min-height:0; }
@media (min-width:761px) {
 body.r83-home .r83h-card[data-r83-demo="k1"] .r83h-card-media > img,
 body.r83-home .r83h-card[data-r83-demo="k4"] .r83h-card-media > img {
  position:absolute; top:16px; left:16px; width:calc(100% - 32px); height:calc(100% - 54px); object-fit:contain;
 }
}