/* Built-in guide: the existing brand tokens and original explanatory artwork. */
.bg-guide { color:var(--color-ink); }
.bg-guide img { display:block; max-width:100%; }
.bg-guide p { line-height:var(--leading-base); }
.bg-guide h2,.bg-guide h3 { color:var(--color-ink-strong); }
.bg-guide a:not(.button):hover { color:var(--color-red-dark); }
.bg-guide { --bg-header-height:var(--header-height); --bg-scene-height:clamp(500px,44.5vw,720px); --bg-art-height:var(--bg-scene-height); --bg-art-top:0px; }
body:has(.bg-guide) .site-header { background:transparent; }
.bg-hero { background:var(--color-red); color:var(--color-on-red); position:relative; margin-top:calc(-1 * var(--bg-header-height)); overflow:clip; }
.bg-hero-inner { position:relative; z-index:1; height:var(--bg-scene-height); padding-top:var(--bg-header-height); display:flex; align-items:center; }
.bg-hero-scene { position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom,var(--color-red) 0 calc(var(--bg-art-top) + var(--bg-art-height) * .84103),var(--color-surface) calc(var(--bg-art-top) + var(--bg-art-height) * .84103)); transform:translate3d(0,var(--bg-parallax-y,0px),0); will-change:transform; }
.bg-hero-copy { position:relative; z-index:1; padding-block:var(--space-7); width:100%; }
.bg-hero .eyebrow { color:var(--color-on-red); margin-bottom:var(--space-4); }
.bg-hero h1 { max-width:calc(100vw - max(4vw,calc((100vw - 1320px) / 2)) - var(--bg-art-height) * .9212); color:var(--color-on-red); font-size:clamp(42px,5.2vw,76px); font-weight:var(--weight-heavy); text-transform:uppercase; line-height:1.02; letter-spacing:-.035em; margin-bottom:var(--space-5); }
.bg-guide-label { display:inline-block; vertical-align:baseline; padding:.08em .22em .12em; margin-top:.12em; border-radius:var(--radius); background:var(--color-ink-strong); color:var(--color-on-red); font-size:.95em; line-height:1; letter-spacing:inherit; font-weight:inherit; }
.bg-hero-copy>p:not(.eyebrow) { font-size:var(--text-md); margin-bottom:var(--space-5); }
.bg-hero-art { position:absolute; top:var(--bg-art-top); right:calc(24px - var(--bg-art-height) * .26766); width:auto; max-width:none!important; height:var(--bg-art-height); pointer-events:none; }
.bg-page { max-width:1180px; padding-bottom:var(--space-7); }
.bg-intro { max-width:780px; margin:var(--space-7) auto var(--space-5); text-align:center; }
.bg-intro p { font-size:var(--text-md); }
.bg-jumps { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2); margin-bottom:var(--space-7); }
.bg-jumps a { border:var(--line); border-radius:var(--radius-pill); padding:var(--space-2) var(--space-4); font-size:var(--text-xs); font-weight:var(--weight-semibold); }
.bg-jumps a:hover { border-color:var(--color-red); background:var(--color-red-tint); }
.bg-section { padding-block:var(--space-7); border-top:var(--line); scroll-margin-top:var(--space-5); }
.bg-section-head { text-align:center; margin-bottom:var(--space-6); }
.bg-number { display:block; color:var(--color-red); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-label); margin-bottom:var(--space-3); }
.bg-section-head h2 { font-size:clamp(25px,3vw,38px); letter-spacing:-.025em; margin-bottom:var(--space-3); }
.bg-section-head>p { color:var(--color-muted); margin-inline:auto; max-width:var(--measure); }
.bg-guide h3 { font-size:var(--text-md); line-height:1.35; }
.bg-guide figure { margin:0; }
.bg-guide figcaption,.bg-small { font-size:var(--text-xs); color:var(--color-muted); line-height:1.6; }
.bg-guide figcaption { margin-top:var(--space-3); }
.bg-size-art img { width:100%; height:auto; }
.bg-size-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-5); margin-block:var(--space-5); }
.bg-size-grid h3 { color:var(--color-red); font-size:var(--text-lg); margin-bottom:var(--space-3); }
.bg-size-grid strong { display:block; font-size:var(--text-sm); margin-bottom:var(--space-2); }
.bg-size-grid p { font-size:var(--text-sm); margin-bottom:0; }
.bg-product-hint { position:relative; color:var(--color-red-dark); text-decoration:underline; text-underline-offset:3px; }
.bg-product-tooltip { position:absolute; bottom:calc(100% + 10px); left:0; z-index:5; width:max-content; max-width:min(250px,75vw); padding:9px 12px; border-radius:var(--radius); background:var(--color-ink-strong); color:var(--color-on-red); font-size:12px; font-weight:var(--weight-semibold); line-height:1.5; opacity:0; visibility:hidden; pointer-events:none; box-shadow:0 3px 12px #0002; }
.bg-product-hint:hover .bg-product-tooltip,.bg-product-hint:focus-visible .bg-product-tooltip { opacity:1; visibility:visible; }
.bg-size-grid>div:last-child .bg-product-tooltip { left:auto; right:0; }
@media(max-width:760px) { .bg-size-grid>div:nth-child(even) .bg-product-tooltip { left:auto; right:0; } }

.bg-note { margin-block:var(--space-5); background:var(--color-cream); border-left:3px solid var(--color-red); padding:var(--space-4) var(--space-5); font-size:var(--text-sm); line-height:1.7; border-radius:var(--radius); }
.bg-note strong { color:var(--color-ink-strong); }
.bg-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-7); align-items:center; margin-block:var(--space-6); }
.bg-two p,.bg-two li { font-size:var(--text-sm); }
.bg-two a:not(.button),.bg-drawing>a,.bg-fuels a,.bg-sources a { text-decoration:underline; text-underline-offset:4px; color:var(--color-red-dark); font-size:var(--text-sm); }
.bg-steps { padding-left:var(--space-5); margin-bottom:var(--space-5); }
.bg-steps li { padding:var(--space-2) 0 var(--space-2) var(--space-2); }
.bg-drawing { border:var(--line); padding:var(--space-4); border-radius:var(--radius); text-align:center; }
.bg-drawing img { width:100%; height:auto; }
.bg-drawing>a:not(.bg-drawing-product) { display:inline-block; margin-top:var(--space-3); }
.bg-drawing-product { display:block; }
#products { border-top:0; }
.bg-detail { border-bottom:var(--line); }
#size>.bg-detail:last-child { border-bottom:0; }
.bg-detail summary { padding:var(--space-4) var(--space-6) var(--space-4) 0; font-size:var(--text-sm); font-weight:var(--weight-semibold); cursor:pointer; position:relative; list-style:none; }
.bg-detail summary::-webkit-details-marker { display:none; }
.bg-detail summary::after { content:'+'; position:absolute; right:var(--space-3); top:var(--space-3); font-size:var(--text-lg); color:var(--color-red); }
.bg-detail[open] summary::after { content:'−'; }
.bg-detail>div { padding-bottom:var(--space-4); max-width:850px; }
.bg-detail p,.bg-detail li { font-size:var(--text-sm); }
.bg-detail p:last-child { margin-bottom:0; }
.bg-anatomy { margin-bottom:var(--space-6); }
.bg-anatomy-scroll { overflow-x:auto; }
.bg-anatomy-art { position:relative; }
.bg-anatomy-art img { width:100%; height:auto; }
.bg-anatomy>.bg-small { text-align:center; margin-top:var(--space-3); }
.bg-hotspot { position:absolute; transform:translate(-50%,-50%); display:grid; place-items:center; width:30px; height:30px; color:var(--color-on-red); background:var(--color-red); border-radius:50%; font-size:12px; font-weight:var(--weight-bold); border:2px solid var(--color-surface); box-shadow:0 1px 5px #0002; }
.bg-hotspot:hover,.bg-hotspot:focus-visible { background:var(--color-ink-strong); color:var(--color-on-red)!important; }
.bg-parts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4) var(--space-6); }
.bg-parts>div { display:flex; gap:var(--space-3); border-top:var(--line); padding-top:var(--space-4); scroll-margin-top:var(--space-5); }
.bg-parts>div:target { background:var(--color-red-tint); outline:2px solid var(--color-red); outline-offset:5px; border-radius:var(--radius); }
.bg-parts>div>span { color:var(--color-red); font-weight:var(--weight-bold); font-size:var(--text-xs); padding-top:2px; }
.bg-parts h3 { font-size:var(--text-sm); margin-bottom:var(--space-2); }
.bg-parts p { font-size:var(--text-xs); margin-bottom:0; }
.bg-fuels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); }
.bg-fuels article { text-align:center; }
.bg-fuels img { width:100%; height:220px; object-fit:contain; margin-bottom:var(--space-4); }
.bg-fuels h3 { font-size:var(--text-lg); }
.bg-fuels p { font-size:var(--text-sm); }
.bg-fuels .bg-small { font-size:var(--text-xs); }
.bg-lifestyle { padding-top:var(--space-5); }
.bg-lifestyle img { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius); }
.bg-flue-diagram { background:var(--color-cream); padding:var(--space-4); border-radius:var(--radius); }
.bg-flue-diagram svg { display:block; width:100%; height:auto; }
.bg-flue-diagram figcaption { text-align:center; }
.bg-banana-flue { width:100%; height:auto; border-radius:var(--radius); }
.bg-flue-artwork { position:relative; }
.bg-flue-route-label { position:absolute; left:12%; top:38%; transform:translate(-50%,-50%) rotate(-90deg); font-size:var(--text-xs); color:var(--color-ink); white-space:nowrap; }
.bg-flue-key { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2); padding-top:var(--space-4); text-align:center; }
.bg-flue-key span { font-size:var(--text-xs); }
.bg-flue-key strong { display:block; margin-bottom:var(--space-1); color:var(--color-ink-strong); }
.bg-checks { list-style:none; padding:0; }
.bg-checks li { position:relative; padding:var(--space-2) 0 var(--space-2) var(--space-5); }
.bg-checks li::before { content:'✓'; position:absolute; left:0; color:var(--color-red); font-weight:var(--weight-bold); }
.bg-flue-parts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-5); }
.bg-flue-parts img { height:180px; width:100%; object-fit:contain; }
.bg-flue-parts h3 { font-size:var(--text-sm); margin-top:var(--space-4); }
.bg-flue-parts p { font-size:var(--text-xs); }
.bg-estimate { padding-block:var(--space-5); align-items:start; }
.bg-example { background:var(--color-cream); padding:var(--space-6); border-radius:var(--radius); }
.bg-example h3 { font-size:var(--text-xl); }
.bg-shop-note { max-width:var(--measure); text-align:center; margin:0 auto var(--space-6); font-size:var(--text-sm); }
.bg-products { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-6) var(--space-4); margin-bottom:var(--space-5); }
.bg-product { min-width:0; display:flex; flex-direction:column; border:var(--line); border-radius:var(--radius); overflow:hidden; scroll-margin-top:var(--space-5); }
.bg-product:target { outline:2px solid var(--color-red); outline-offset:4px; }
.bg-product-photo { display:block; aspect-ratio:1; padding:var(--space-3); background:var(--color-surface); }
.bg-product-photo img { width:100%; height:100%; object-fit:contain; }
.bg-product-copy { display:flex; flex-direction:column; flex:1; padding:var(--space-4); border-top:var(--line); }
.bg-product-type { color:var(--color-muted); font-size:11px; line-height:1.5; margin-bottom:var(--space-2); }
.bg-product-copy h3 { font-size:var(--text-sm); line-height:1.45; margin-bottom:var(--space-3); }
.bg-product-copy>p:not(.bg-product-type) { font-size:var(--text-xs); margin-bottom:var(--space-4); }
.bg-media-buttons { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:auto; }
.bg-media-buttons button { font:inherit; font-size:11px; min-height:36px; padding:var(--space-2); border:var(--line); border-radius:var(--radius); background:var(--color-cream); color:var(--color-ink-strong); cursor:pointer; }
.bg-media-buttons button:hover { border-color:var(--color-red); color:var(--color-red-dark); }
.bg-shop-link { display:block; margin-top:var(--space-4); font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--color-red-dark); }
.bg-checklist { align-items:start; background:var(--color-cream); padding:var(--space-6); border-radius:var(--radius); }
.bg-faq { padding-bottom:var(--space-5); }
.bg-sources { margin-top:var(--space-5); }
.bg-back { display:block; font-size:var(--text-xs); margin-top:var(--space-5); color:var(--color-muted); }
.bg-dialog { width:min(1080px,94vw); max-height:94dvh; padding:var(--space-5); border:var(--line); border-radius:var(--radius); color:var(--color-ink); overflow:auto; }
.bg-dialog::backdrop { background:#000a; }
.bg-dialog-head { display:flex; justify-content:space-between; align-items:start; gap:var(--space-4); margin-bottom:var(--space-4); }
.bg-dialog h2 { font-size:var(--text-md); margin-bottom:0; }
.bg-dialog-head .eyebrow { font-size:var(--text-xs); color:var(--color-red-dark); margin-bottom:var(--space-2); }
.bg-dialog-head button { flex-shrink:0; min-height:44px; border:var(--line); background:var(--color-cream); border-radius:var(--radius); padding:var(--space-2) var(--space-3); cursor:pointer; font:inherit; font-size:var(--text-xs); }
#bg-media-stage { background:var(--color-surface); }
#bg-media-stage img { max-width:100%; max-height:67dvh; width:auto; height:auto; margin:auto; object-fit:contain; }
#bg-media-stage iframe { width:100%; height:min(65dvh,650px); border:var(--line); border-radius:var(--radius); }
#bg-media-caption { margin-top:var(--space-3); margin-bottom:var(--space-2); color:var(--color-muted); font-size:var(--text-xs); }
#bg-media-full { font-size:var(--text-xs); color:var(--color-red-dark); text-decoration:underline; }
html:has(.bg-dialog[open]) { overflow:hidden; }
@media(max-width:1100px) {
 .bg-two { gap:var(--space-5); }
 .bg-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .bg-product-type { font-size:var(--text-xs); }
 .bg-media-buttons button { font-size:var(--text-xs); }
}
@media(min-width:761px) and (max-width:850px) {
 .bg-guide { --bg-scene-height:clamp(440px,calc(67vw - 70px),500px); }
}
@media(max-width:760px) {
 .bg-guide { --bg-header-height:120px; --bg-art-height:clamp(440px,80vw,600px); --bg-art-top:clamp(65px,calc(470px - 55vw),300px); --bg-scene-height:calc(var(--bg-art-top) + var(--bg-art-height)); }
 .bg-hero-inner { align-items:start; }
 .bg-hero-copy { width:100%; padding-block:var(--space-6) 0; }
 .bg-hero h1 { max-width:100%; font-size:42px; margin-bottom:var(--space-4); }
 .bg-hero .eyebrow { font-size:10px; }
 .bg-hero-copy>p:not(.eyebrow) { font-size:var(--text-sm); }
 .bg-hero-art { right:calc(18px - var(--bg-art-height) * .66712); clip-path:inset(0 28.12% 0 0); }
 .bg-intro { margin-top:var(--space-6); text-align:left; }
 .bg-intro p { font-size:var(--text-base); }
 .bg-jumps { justify-content:start; margin-bottom:var(--space-5); }
 .bg-section { padding-block:var(--space-6); }
 .bg-section-head { text-align:left; }
 .bg-section-head p { margin-left:0; font-size:var(--text-sm); }
 .bg-size-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .bg-size-art { display:none; }
 .bg-size-grid>div { border-top:3px solid var(--color-ink); padding-top:var(--space-4); }
 .bg-two { grid-template-columns:1fr; gap:var(--space-5); }
 .bg-parts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
 .bg-anatomy-art { width:700px; }
 .bg-hotspot { width:28px; height:28px; font-size:11px; border-width:1px; }
 .bg-fuels { grid-template-columns:1fr; gap:var(--space-5); }
 .bg-fuels article { display:grid; grid-template-columns:120px 1fr; column-gap:var(--space-4); text-align:left; }
 .bg-fuels article img { grid-row:1/5; width:120px; height:150px; margin:0; }
 .bg-fuels h3 { font-size:var(--text-md); margin-bottom:var(--space-2); }
 .bg-fuels p { margin-bottom:var(--space-3); }
 .bg-flue-diagram { max-width:520px; margin:auto!important; }
 .bg-flue-parts { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .bg-flue-parts img { height:140px; }
 .bg-example,.bg-checklist { padding:var(--space-5); }
 .bg-products { gap:var(--space-4) var(--space-3); }
 .bg-product-copy { padding:var(--space-3); }
 .bg-product-copy h3 { font-size:var(--text-xs); }
 .bg-shop-note { text-align:left; }
 .bg-dialog { padding:var(--space-4); }
 .bg-dialog h2 { font-size:var(--text-sm); }
}
@media(max-width:480px) {
 .bg-hero h1 { font-size:36px; }
 .bg-hero-copy>p:not(.eyebrow) { max-width:none; }
 .bg-parts { grid-template-columns:1fr; }
 .bg-products { grid-template-columns:1fr; }
 .bg-product { display:grid; grid-template-columns:37% 1fr; }
 .bg-product-photo { align-self:start; position:sticky; top:var(--bc-header-h,0px); }
 .bg-product-copy { border-top:0; border-left:var(--line); }
 .bg-product-copy h3 { font-size:var(--text-sm); }
 .bg-media-buttons button { min-height:44px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .bg-hero-scene { transform:none; will-change:auto; } }
@media print {
 .bg-hero { background:white; color:black; }
 .bg-hero h1,.bg-hero .eyebrow { color:black; }
 .bg-media-buttons,.bg-jumps,.bg-back,.bg-dialog { display:none; }
 .bg-section { break-inside:avoid; }
}