/* Generated by scripts/build_assets.py; edit the sources, not this file. */
/* /assets/creations/product-guides-v1.css */
.product-guidance{border-top:1px solid #d6d6d1;margin-top:20px;padding-top:16px;font-family:'DM Sans',sans-serif}
#modelPreview .product-guidance h3{font-family:inherit;font-size:14px;font-weight:500;margin:0 0 8px}
#modelPreview .product-guidance p,#modelPreview .product-guidance li{font-size:13px;line-height:1.65;color:#555550}
.product-guidance ul{padding-left:18px;margin:12px 0}.product-guidance li+li{margin-top:8px}
.product-fit{border-block:1px solid #deded8;margin:16px 0;padding:12px 0}
.product-fit summary,.product-measurement summary{cursor:pointer;font-size:13px;font-weight:500;min-height:28px}
.product-measurement{margin:14px 0}.product-measurement svg{display:block;max-width:100%;width:320px;height:auto;fill:none;stroke:#59616a;stroke-width:1.5}
.product-measurement svg text{fill:#444;stroke:none;font:12px 'DM Sans',sans-serif}
.product-guidance a{color:inherit;font-size:13px;text-underline-offset:4px}.product-guide-link{display:block;margin:12px 0}
#modelPreview .product-media-tabs{display:flex;gap:6px;padding:0 16px 8px;flex:none}
#modelPreview .product-media-tabs[hidden],#modelPreview .model-browser[hidden],#modelPreview .model-controls[hidden],#modelPreview .product-installation-photo[hidden]{display:none!important}
.product-media-tabs button{background:transparent;color:#494947;border:1px solid #c6c6bf;border-radius:7px;padding:8px 12px;font:500 12px 'DM Sans',sans-serif;min-height:36px;cursor:pointer}
.product-media-tabs button[aria-pressed="true"]{background:#343432;color:#fff;border-color:#343432}
.product-media-tabs button:focus-visible,.product-guidance a:focus-visible{outline:2px solid #596b80;outline-offset:3px}
#modelPreview .model-visual:has(.product-media-tabs:not([hidden])){display:flex;flex-direction:column}
#modelPreview .model-visual:has(.product-media-tabs:not([hidden])) .model-browser{flex:1;min-height:0}
.product-installation-photo{margin:0;padding:0 16px 12px;min-height:0;flex:1;display:flex;flex-direction:column;gap:8px}
.product-installation-photo img{display:block;min-height:0;flex:1;object-fit:contain;width:100%;height:100%;border-radius:4px}
.product-installation-photo figcaption{font-size:12px;line-height:1.5;color:#5b5b55;flex:none}
.product-help-item{scroll-margin-top:110px}.product-help-item h3{font:500 16px 'DM Sans',sans-serif;margin:20px 0 8px}.product-help-item li{margin-bottom:8px}.product-help-item ul,.product-help-item ol{padding-left:22px}
.fan-comparison{overflow-x:auto;margin:24px 0;scroll-margin-top:110px}.fan-comparison table{border-collapse:collapse;width:100%;font:14px/1.6 'DM Sans',sans-serif}.fan-comparison th,.fan-comparison td{text-align:left;vertical-align:top;padding:14px 12px;border-bottom:1px solid #d4d4ce}.fan-comparison th{font-weight:500}.fan-comparison caption{text-align:left;margin-bottom:12px;font-weight:500}.fan-comparison a{color:inherit}
@media(max-width:760px){#modelPreview .product-media-tabs{padding:0 12px 6px}.product-installation-photo{padding:0 12px 8px}.product-guidance{margin-top:12px;padding-top:12px}.fan-comparison table{min-width:570px}}
.collection-fan-compare{border-bottom:1px solid #d4d4ce;margin:-12px 0 28px;padding:0 0 16px;font:14px/1.65 'DM Sans',sans-serif}
.collection-fan-compare>summary{cursor:pointer;width:fit-content;padding:8px 0;min-height:44px;font-weight:500}
.collection-fan-compare p{max-width:760px;color:#555550;margin:12px 0}.collection-fan-compare a{color:inherit;text-underline-offset:4px}
.post-body #fan-comparison,.post-body #test-notes{scroll-margin-top:110px}
.product-guide-copy,.product-guide-print{font:inherit;font-size:13px;background:none;border:1px solid #bbb;border-radius:5px;padding:8px 12px;cursor:pointer;color:inherit;transition:border-color .15s,color .15s}
.product-guide-copy:hover,.product-guide-print:hover{border-color:#777;color:#171717}
.product-guide-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid #deded8}
.product-guide-status{font-size:12px;color:#666}
.product-guide-print-source{display:none}

.fan-comparison-hint{display:none}@media(max-width:760px){.fan-comparison-hint{display:block;font-size:12px;font-weight:400;color:#666;margin-top:6px}}
/* /assets/css/bankasi-refresh-v1.css */
/* Editorial refresh. Scoped additions leave the Creations motion and card effects intact. */
.workbench-editorial{display:block!important;background:none!important;border:0!important}
.workbench-chapter{margin:0 0 clamp(48px,7vw,100px)}
.chapter-heading{font:400 clamp(28px,3vw,40px)/1.15 'Cormorant Garamond',serif;border-top:1px solid #c9ccc6;padding-top:22px;margin:0 0 28px;color:#30332f}
.chapter-stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.workbench-editorial .workbench-card{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.workbench-editorial .workbench-card:hover{background:transparent}
.workbench-editorial .workbench-card-image,.workbench-editorial .workbench-feature-image{border:0;border-radius:3px;overflow:hidden;background:#edeeea}
.workbench-editorial .workbench-card-body{padding:24px 0!important}
.workbench-editorial .card-title{font:400 clamp(27px,3vw,38px)/1.15 'Cormorant Garamond',serif;color:#30332f;margin:14px 0}
.workbench-editorial .card-excerpt{max-width:52ch;line-height:1.75}
.workbench-editorial .card-footer{padding-top:16px;margin-top:24px}
.workbench-editorial .chapter-featured .chapter-stories{display:block}
.workbench-editorial .chapter-featured .workbench-card{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.workbench-editorial .chapter-featured .card-title{font-size:clamp(36px,4.5vw,60px)}
.workbench-editorial .chapter-featured img{width:100%;height:100%;max-height:520px;object-fit:cover;aspect-ratio:5/4}
.workbench-editorial .chapter-guides .workbench-card{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start}
.workbench-editorial .chapter-guides .workbench-card-body{padding:0!important}
.workbench-editorial .chapter-guides img{width:100%;height:150px;object-fit:cover;padding:0}
.workbench-editorial .chapter-guides .card-title{font-size:30px}
.workbench-editorial .chapter-studio img{height:auto;aspect-ratio:3/2;object-fit:cover}
.chapter-archive .chapter-stories{display:block}
.workbench-editorial .archive-card{display:grid;grid-template-columns:1fr;min-height:0;border-bottom:1px solid #d6d8d2}
.workbench-editorial .archive-card .workbench-card-image,.workbench-editorial .archive-card .card-excerpt,.workbench-editorial .archive-card .card-footer{display:none}
.workbench-editorial .archive-card .workbench-card-body{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:baseline;padding:22px 0!important}
.workbench-editorial .archive-card .card-meta{flex-direction:column;align-items:flex-start;gap:6px}
.workbench-editorial .archive-card .card-title{font-size:27px;margin:0}
.workbench-editorial.is-filtered .chapter-heading{display:none}
.workbench-editorial.is-filtered .workbench-chapter{margin:0}
.workbench-editorial.is-filtered .chapter-stories{display:block}
.workbench-editorial.is-filtered .workbench-card{display:grid;grid-template-columns:140px 1fr;gap:28px;padding:24px 0!important;border-bottom:1px solid #d4d6d0}
.workbench-editorial.is-filtered .workbench-card-body{display:block;padding:0!important}
.workbench-editorial.is-filtered .workbench-card img{width:100%;height:120px;aspect-ratio:auto;object-fit:cover}
.workbench-editorial.is-filtered .workbench-card .card-title{font-size:30px}
.workbench-editorial.is-filtered .archive-card{grid-template-columns:1fr}
.workbench-editorial [hidden]{display:none!important}
/* Reading layouts: wide material, narrow prose. */
.article-refresh .post-body{max-width:1120px!important;margin-inline:auto}
.article-refresh .post-body>p,.article-refresh .post-body>h2,.article-refresh .post-body>ul,.article-refresh .post-body>ol,.article-refresh .post-body>.article-toc,.article-refresh .post-body>.archive-context,.article-refresh .post-body>.test-notebook{max-width:712px;margin-left:auto;margin-right:auto}
.article-refresh .post-body>figure{max-width:900px;margin:44px auto}
.article-refresh .post-body>figure img{width:100%;height:auto;max-height:640px;object-fit:contain;border-radius:3px}
.article-refresh .post-body figcaption{font-size:13px;line-height:1.65;color:#62675f;max-width: 70ch;margin-top:12px}
.article-refresh .post-body>.fan-comparison{max-width:100%;margin:32px 0 48px}
.article-refresh .archive-context{padding:18px 0;border-block:1px solid #cfd2ca;font:400 14px/1.7 'DM Sans',sans-serif;color:#62665e;margin-bottom:32px}
.article-refresh .test-notebook{padding:24px;border-left:2px solid #8b9388;background:#edeFE9}
.article-refresh .post-body .test-notebook p{font-size:15px;line-height:1.75}
.article-refresh .post-body .test-notebook h3{font:500 15px/1.5 'DM Sans',sans-serif;margin:22px 0 8px}
.article-refresh .post-body>h2{margin-top:56px}
/* Static instructional figures. */
.fit-illustration{margin:24px 0 28px;padding:20px 24px;background:#eeefea;border:1px solid #d8dbd3;border-radius:3px;break-inside:avoid}
.fit-illustration img{width:100%;max-width:540px;height:auto;display:block;margin:auto}
.fit-illustration figcaption{font:400 12px/1.7 'DM Sans',sans-serif;color:#62675e;margin:10px 0 0}
.help-answer .fit-illustration{max-width:620px}
.help-answer .fit-illustration img{max-height:250px}
/* Concise model reading hierarchy. */
#modelPreview #modelDescription{font-size:15px;line-height:1.7;margin:0 0 12px}
#modelPreview .model-essential{font-size:13px;font-weight:500;margin:0 0 18px;color:#3b4038}
#modelPreview .model-note-details{border-top:1px solid #d6d8d1;padding:14px 0;margin:0}
#modelPreview .model-note-details>summary{display:list-item;cursor:pointer;font:500 13px/1.6 'DM Sans',sans-serif}
#modelPreview .model-note-details p{font-size:13px;line-height:1.7;color:#5b6057;margin:12px 0}
#modelPreview .product-guidance{border-top:0;margin-top:0;padding-top:0}
#modelPreview .product-fit{margin-top:0}
#modelPreview .model-design-credit{margin-bottom:14px}
.page-creations .creation-card .model-spec{min-height:2.8em;display:flex;align-items:flex-end}
/* Comparison is only present within the existing fan comparison. */
.fan-visual-comparison{margin:24px 0 32px}
.fan-compare-intro{font-size:13px!important;color:#62675f}
.fan-compare-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.fan-compare-side{min-width:0;border-top:1px solid #c9cdc4;padding-top:20px}
.fan-compare-side h3{font:500 16px/1.4 'DM Sans',sans-serif;margin:16px 0}
.fan-compare-options{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 20px}
.fan-compare-options button{font:400 12px/1.5 'DM Sans',sans-serif;border:0;border-bottom:1px solid transparent;background:none;color:#64695f;padding:6px 0;cursor:pointer}
.fan-compare-options button[aria-pressed=true]{color:#20261c;border-color:#20261c;font-weight:500}
.fan-compare-options button:focus-visible{outline:2px solid #545c50;outline-offset:4px}
/* Phones: one sideways row of size tabs with full-height tap targets, as in the [creations] comparison (audit 2026-10-13). */
@media (max-width:760px){.fan-compare-options{flex-wrap:nowrap;gap:0 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.fan-compare-options::-webkit-scrollbar{display:none}.fan-compare-options button{flex:none;min-height:44px;min-width:24px;white-space:nowrap}.fan-compare-options button:focus-visible{outline-offset:-2px}}
.fan-compare-side img{display:block;width:100%;height:240px;object-fit:contain;background:#f7f8f4;border-radius:3px}
.fan-compare-side dl{display:grid;grid-template-columns:100px 1fr;font:13px/1.6 'DM Sans',sans-serif;margin:16px 0}
.fan-compare-side dt,.fan-compare-side dd{border-top:1px solid #d7dad1;padding:9px 0;margin:0}
.fan-compare-side dt{color:#62685c}
.fan-compare-side a{font-size:13px;text-underline-offset:4px}
/* Founder-led About. */
.page-about .founder{border-block:1px solid #d4d7cf}
.about-closing{padding:48px var(--page-gutter,5vw) 64px;border-top:1px solid #cfd3c9}
.about-closing h2{font:400 42px/1.1 'Cormorant Garamond',serif;margin:12px 0 24px}
.editorial-links{display:flex;flex-wrap:wrap;gap:18px 30px;font:400 14px/1.5 'DM Sans',sans-serif}
.editorial-links a{color:inherit;text-underline-offset:5px}
/* Contact form leads in DOM and visual order. */
.page-contact .page-hero{padding-top:128px!important;padding-bottom:38px!important;min-height:0}
.page-contact .page-hero h1{font-size:clamp(42px,5vw,64px);margin-bottom:16px}
.page-contact .contact-section{padding-top:48px!important}
.page-contact .contact-grid{grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);gap:clamp(32px,7vw,100px);align-items:start}
.inquiry-design-reference{margin:0 0 26px;padding:0 0 20px;border-bottom:1px solid #cbd0c5;font:14px/1.65 'DM Sans',sans-serif}
.inquiry-design-reference p{margin:6px 0}.inquiry-design-reference a{color:inherit;text-underline-offset:4px;font-size:13px}
/* A statement rather than a title page. */
.page-mission .mission-hero{padding-top:140px;padding-bottom:36px;min-height:0}
.page-mission .mission-hero h1{max-width:20ch;font-size:clamp(58px,7vw,100px)}
.page-mission .statement-section{padding-top:0!important;padding-bottom:64px!important}
.page-mission .statement-body{max-width:760px}
.page-mission .pillars-section{padding-top:32px!important;padding-bottom:64px!important}
.page-mission .pillar{background:none;border:0;border-top:1px solid #555850;border-radius:0;box-shadow:none;padding:26px 0}
.page-mission .pillar::before,.page-mission .pillar::after{display:none}
.page-mission .pillars-grid{background:none;gap:40px}
.page-mission .cta-section{padding-top:40px;padding-bottom:48px}
/* Short recovery and readable privacy. */
.recovery-simple{max-width:1000px;margin:auto;padding:160px 32px 90px;min-height:65vh;color:#343830}
.recovery-simple h1{font:400 clamp(48px,7vw,80px)/1.05 'Cormorant Garamond',serif;margin:20px 0 24px}
.recovery-simple>p{max-width: 50ch;font:16px/1.7 'DM Sans',sans-serif}
.recovery-simple nav{display:flex;flex-wrap:wrap;gap:20px 40px;margin:36px 0;border-block:1px solid #d0d4c9;padding:24px 0}
.recovery-simple a{color:inherit;text-underline-offset:5px}
.recovery-simple .recovery-contact{font-size:14px}
.page-privacy{background:#f4f4f0;color:#343830;font-family:'DM Sans',sans-serif}
.privacy-reading{max-width:776px;margin:auto;padding:56px 32px 80px}
.privacy-wordmark{color:inherit;text-decoration:none;font-size:16px;letter-spacing:.18em}
.privacy-wordmark sup{font-size:8px}
.privacy-reading h1{font:400 clamp(40px,6vw,60px)/1.05 'Cormorant Garamond',serif;margin:48px 0 24px}
.privacy-reading h2{font:400 30px/1.2 'Cormorant Garamond',serif;margin:0 0 18px}
.privacy-reading p{font-size:16px;line-height:1.85;margin:0 0 22px}
.privacy-reading .panel{border:0;border-top:1px solid #cdd2c5;border-radius:0;background:none;box-shadow:none;padding:32px 0 10px;margin-top:32px}
.privacy-reading a{color:inherit;text-underline-offset:4px}
.privacy-reading .muted{font-size:13px;color:#62675e}
.metric-context{display:block;font:400 11px/1.5 'DM Sans',sans-serif;margin-top:5px;color:inherit;opacity:.8}
.service-period-inline{font:400 12px/1.7 'DM Sans',sans-serif;color:#c5c8c1;max-width:36ch}
.page-home .service-feature{margin-top:40px;padding-top:40px}
@media(max-width:760px){
 .chapter-stories{grid-template-columns:1fr;gap:32px}
 .workbench-editorial .chapter-featured .workbench-card{grid-template-columns:1fr;gap:0}
 .workbench-editorial .chapter-featured img{max-height:320px;aspect-ratio:3/2}
 .workbench-editorial .chapter-guides .workbench-card{grid-template-columns:90px 1fr;gap:18px}
 .workbench-editorial .chapter-guides img{height:110px}
 .workbench-editorial .chapter-guides .card-title{font-size:27px}
 .workbench-editorial .archive-card .workbench-card-body{grid-template-columns:1fr;gap:8px}
 .workbench-editorial .archive-card .card-meta{flex-direction:row}
 .workbench-editorial.is-filtered .workbench-card{grid-template-columns:80px 1fr;gap:16px}
 .workbench-editorial.is-filtered .workbench-card img{height:90px}
 .workbench-editorial.is-filtered .workbench-card .card-title{font-size:26px}
 .workbench-editorial.is-filtered .archive-card{grid-template-columns:1fr}
 .fan-compare-pair{gap:16px}.fan-compare-side img{height:150px}.fan-compare-side dl{display:block}.fan-compare-side dd{border-top:0;padding-top:0}.fan-compare-side dt{padding-bottom:2px}.fan-compare-options{gap:2px 10px}.fan-compare-side h3{font-size:14px}
 .article-refresh .post-body>figure{margin-block:30px}
 .fit-illustration{padding:14px 8px}.article-refresh .test-notebook{padding:18px}
 .page-contact .contact-grid{grid-template-columns:1fr}.page-contact .page-hero{padding-top:114px!important}
 .page-mission .mission-hero{padding-top:120px}.page-mission .pillars-grid{grid-template-columns:1fr;gap:16px}
 .recovery-simple{padding:130px 24px 64px}.recovery-simple nav{gap:20px 26px}
 .privacy-reading{padding:36px 24px 60px}
}
@media print{.fit-illustration{background:none;max-width:420px;padding:10pt;margin:12pt 0}.fit-illustration img{max-height:150pt}.fan-compare-options{display:none}.article-refresh .post-body{max-width:100%!important}}
.article-refresh .tour-chapter{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;border-top:1px solid #cdd0c8;padding:36px 0;margin:40px 0}
.article-refresh .tour-chapter h2{margin-top:0}.article-refresh .tour-chapter figure{margin:0}.article-refresh .tour-chapter img{width:100%;height:auto;border-radius:3px}
.article-refresh .tour-text{display:block;max-width:712px;margin-inline:auto}
@media(max-width:760px){.article-refresh .tour-chapter{grid-template-columns:1fr;gap:20px}}
/* Keep expanded preview copy inside its allocated grid row, so overflow can scroll. */
#modelPreview .model-details{align-self:stretch;overscroll-behavior-y:contain}
@media(min-width:761px){#modelPreview .model-details{height:100%;max-height:100%;box-sizing:border-box}}
/* /assets/css/help-install-steps-v1.css */
/* Illustrated installation steps inside a Help guide: one drawing per step, numbered, on the schematic panel ground. */
.help-answer .install-steps { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; gap: 22px; max-width: 640px; counter-reset: none; }
.help-answer .install-steps > li { margin: 0; padding: 0; border: 1px solid #d8dbd3; border-radius: 4px; background: #fbfbf8; overflow: hidden; break-inside: avoid; }
.help-answer .install-step-figure { margin: 0; padding: 14px 16px 6px; background: #eeefea; border-bottom: 1px solid #d8dbd3; }
.help-answer .install-step-figure img { display: block; width: 100%; height: auto; max-width: 600px; margin: 0 auto; }
.help-answer .install-step-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 14px 18px 16px; }
.help-answer .install-step-number {
  grid-row: span 2; align-self: start; padding: 4px 9px; border-radius: 999px; background: #1f241e; color: #f6f6f2;
  font: 500 11px/1.3 "DM Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.help-answer .install-step-copy h4 { margin: 0 0 4px; font: 500 16px/1.35 "DM Sans", sans-serif; color: #232622; letter-spacing: -.005em; }
.help-answer .install-step-copy p { margin: 0; font-size: 14px; line-height: 1.7; color: #565651; }
.help-answer .install-steps-note { margin: 10px 0 22px; font: 400 12px/1.7 "DM Sans", sans-serif; color: #62675e; }
@media (max-width: 680px) {
  .help-answer .install-steps { gap: 16px; }
  .help-answer .install-step-figure { padding: 8px 6px 2px; }
  .help-answer .install-step-copy { grid-template-columns: 1fr; row-gap: 8px; padding: 12px 14px 14px; }
  .help-answer .install-step-number { grid-row: auto; justify-self: start; }
}
@media print {
  .help-answer .install-steps > li { border-color: #bbb; }
  .help-answer .install-step-figure img { max-height: 190pt; width: auto; }
}
.help-answer .install-step-figure a { display: block; cursor: zoom-in; border-radius: 2px; }
.help-answer .install-step-figure a:focus-visible { outline: 2px solid #1f241e; outline-offset: 3px; }
/* Legacy steps (EliteDesk four-fan version): a quiet fold-out under the current guide, for existing owners. */
.help-answer .help-legacy { max-width: 640px; margin: 0 0 26px; border: 1px solid #d8dbd3; border-radius: 4px; background: #f6f6f2; }
.help-answer .help-legacy > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 18px; font: 500 14px/1.45 "DM Sans", sans-serif; color: #232622; }
.help-answer .help-legacy > summary::-webkit-details-marker { display: none; }
.help-answer .help-legacy > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.help-answer .help-legacy[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.help-answer .help-legacy > summary:focus-visible { outline: 2px solid #1f241e; outline-offset: 2px; }
.help-answer .help-legacy-body { padding: 0 18px 18px; }
.help-answer .help-legacy-body > p { margin: 0; font-size: 14px; line-height: 1.7; color: #565651; }
@media (max-width: 0px) { .help-answer .help-legacy > summary::after { transition: none; } }
/* /assets/css/site-refresh-v1.css */
/* 2026-10 site-wide refresh: same-origin page transitions and the site search dialog. */

/* Cross-document view transitions (Chromium/Safari 18.2+; other browsers navigate normally). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
@media(max-width: 0px){@view-transition{navigation:none}}

/* Site search (⌘K / Ctrl+K / "/"). */
.site-search-open{display:inline-grid;place-items:center;width:38px;height:38px;margin-left:6px;padding:0;border:1px solid transparent;border-radius:50%;background:none;color:inherit;cursor:pointer;transition:border-color .2s,background-color .2s}
.site-search-open:hover{border-color:currentColor}
#mainNav .site-search-open{color:#f5f5f5}
#mainNav .site-search-open:hover{border-color:#ffffff66;background:#ffffff12}
.site-search-open:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.site-search-open svg{width:17px;height:17px}

/* Desktop header: logo left, links centred, search bar and CTA grouped on the right. The links sit centred in the
   space between logo and search, and exactly on the page centre once there is room (>=1400px). The bar matches
   the CTA's height and corner radius; below 1101px it is a square icon button. */
@media(min-width:769px){
 #mainNav .nav-links{margin:0 auto}
 #mainNav .site-search-open{width:40px;height:40px;margin:0 12px 0 auto;border:1px solid #ffffff2e;border-radius:8px;background:#ffffff0d;color:#f5f5f5c2;transition:border-color .2s,background-color .2s,color .2s}
 #mainNav .site-search-open:hover{border-color:#ffffff66;background:#ffffff17;color:#f5f5f5}
 #mainNav .site-search-open svg{width:16px;height:16px;flex:none}
}
@media(min-width:769px) and (max-width:900px){#mainNav .nav-links{gap:1rem}}
@media(min-width:1101px){
 #mainNav .site-search-open{display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;width:180px;padding:0 14px;font:400 13px/1 'DM Sans',sans-serif;letter-spacing:.01em;text-align:left}
 #mainNav .site-search-open::after{content:"Search"}
}
@media(min-width:1400px){
 #mainNav .nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
 #mainNav .site-search-open{width:220px}
}
.site-search{width:min(640px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 96px));margin:72px auto auto;padding:0;border:1px solid #d7d4ce;border-radius:14px;background:#faf9f6;color:#151515;box-shadow:0 30px 80px #0000004d;overflow:hidden}
.site-search::backdrop{background:#0c0c0c8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.site-search form{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #e3e0da}
.site-search form svg{flex:none;width:18px;height:18px;color:#6b6b6b}
.site-search input{flex:1;min-width:0;border:0;background:none;color:#151515;font:400 17px 'DM Sans',sans-serif;outline:none}
.site-search input::placeholder{color:#6b6b6b}
.site-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.site-search kbd{font:500 11px 'DM Sans',sans-serif;padding:3px 6px;border:1px solid #d7d4ce;border-radius:5px;color:#6b6b6b;background:#fff}
.site-search-results{list-style:none;margin:0;padding:8px;max-height:min(520px,calc(100vh - 170px));overflow:auto}
.site-search-results li{margin:0}
.site-search-results a{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:10px 12px;border-radius:9px;color:inherit;text-decoration:none}
.site-search-results a[aria-selected="true"],.site-search-results a:hover{background:#ecebe6}
.site-search-type{grid-row:span 2;align-self:center;min-width:76px;font:500 10px 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#6b675f}
.site-search-title{font:500 15px/1.3 'DM Sans',sans-serif}
.site-search-text{font:400 13px/1.4 'DM Sans',sans-serif;color:#5f5f5f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search-empty{padding:22px 16px;font:400 14px 'DM Sans',sans-serif;color:#5f5f5f}
@media(max-width:760px){.site-search{margin-top:16px;max-height:calc(100vh - 32px)}.site-search-type{min-width:0;grid-row:auto}.site-search-results a{grid-template-columns:1fr}.site-search kbd{display:none}}
/* Site search v2 (site-search-v2.js, owner-approved 2026-10-06): start view, grouped results with headers,
   design thumbnails (their [creations] card image), a Cancel button on phones, and the inline variant (404 page). */
dialog.site-search-v2[open]{display:flex;flex-direction:column}
.site-search-v2 form{flex:none}
.site-search-v2 .site-search-results{flex:1 1 auto;min-height:0;max-height:none;padding:6px 8px 12px}
.site-search-v2 .site-search-group{margin:14px 12px 6px;font:500 10.5px/1.3 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6b675f}
.site-search-v2 .site-search-group:first-child{margin-top:8px}
.site-search-v2 .site-search-results a.site-search-item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:8px 10px;border-radius:11px;color:inherit;text-decoration:none}
.site-search-v2 .site-search-results a.site-search-item[aria-selected="true"],.site-search-v2 .site-search-results a.site-search-item:hover{background:#ecebe6}
.site-search-thumb{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:#f6f6f5;box-shadow:inset 0 0 0 1px #15151512;color:#6b675f;overflow:hidden}
.site-search-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.site-search-thumb.is-video{width:80px;background:#151515}
.site-search-thumb svg{width:22px;height:22px}
.site-search-body{display:grid;gap:2px;min-width:0}
.site-search-v2 .site-search-title{font:500 15px/1.3 'DM Sans',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search-v2 .site-search-text{font:400 13px/1.4 'DM Sans',sans-serif;color:#66625b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search-tag{display:inline-block;margin-right:8px;padding:2px 7px;border:1px solid #15151533;border-radius:999px;font:500 9.5px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;vertical-align:2px}
.site-search-v2 .site-search-results a.site-search-more{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding:12px 12px;font:500 14px/1.3 'DM Sans',sans-serif;color:#151515}
.site-search-more svg{width:18px;height:18px;flex:none}
.site-search-v2 .site-search-results .site-search-empty a{display:inline;padding:0;border-radius:0;background:none;color:inherit;text-decoration:underline;text-underline-offset:3px}
.site-search-cancel{display:none;flex:none;padding:8px 2px 8px 8px;border:0;background:none;color:#151515;font:500 15px 'DM Sans',sans-serif;cursor:pointer}
.site-search-cancel:focus-visible{outline:2px solid #151515;outline-offset:2px;border-radius:6px}
@media(max-width:760px){
 .site-search-v2{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
 .site-search-v2 form{padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
 .site-search-v2 input{font-size:16px}
 .site-search-v2 kbd{display:none}
 .site-search-cancel{display:block}
 .site-search-v2 .site-search-results{padding:4px 6px calc(16px + env(safe-area-inset-bottom))}
 .site-search-v2 .site-search-results a.site-search-item{grid-template-columns:auto minmax(0,1fr);gap:12px}
}
.site-search-inline{display:block;width:100%;max-width:640px;margin:0;border:1px solid #d7d4ce;border-radius:14px;background:#faf9f6;color:#151515;box-shadow:0 18px 48px #00000014;overflow:hidden;text-align:left}
.site-search-inline .site-search-results{max-height:420px;overflow:auto}
@media(max-width:760px){.site-search-inline{border-radius:12px}.site-search-inline .site-search-results{max-height:none}}

/* Footer edges follow the nav (owner 2026-10-06: the footer reached past the nav's edge on wide screens). */
body>footer{padding-left:var(--page-gutter,clamp(24px,5vw,80px));padding-right:var(--page-gutter,clamp(24px,5vw,80px))}

/* iOS 26 Safari tints the status bar and bottom bar from the page's root background (theme-color is ignored).
   The root is therefore the header/footer charcoal, and the light page surface moves onto <main>, which with the
   footer fills the whole page, so nothing else changes visually. Mission (already dark) and privacy (no header) keep theirs. */
body[data-surface="light"]{--page-surface:#f4f4f2}
body.page-product{--page-surface:#f4f2ee}
html:has(body[data-surface="light"]){background-color:#151515!important}
body[data-surface="light"]{background-color:#151515!important}
body[data-surface="light"]>#main-content{background-color:var(--page-surface)}

/* Phone/tablet header: logo, search and menu share one centre line; the menu lines end on the page gutter
   and search sits beside the menu (desktop layout is unchanged). */
@media(max-width:768px){
 #mainNav .site-search-open{margin-left:auto;margin-right:4px}
 body:not(.page-creations) #hamburgerBtn{justify-content:center;align-items:center;width:44px;height:44px;padding:0;margin-right:-11px}
}

/* Phone menu on the main site, matching the [creations] menu (owner 2026-10-05): a frosted panel that drops under
   the header, left-aligned DM Sans rows with dividers, a "Menu / Close" text toggle, and the last two links
   (Shop on Etsy, YouTube; Old tech above them since 2026-10-10) as quieter secondary links. [creations] keeps its own rules (88 px header). */
@media (max-width: 768px) {
 body:not(.page-creations) #hamburgerBtn { display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 0; min-width: 64px; min-height: 44px; padding: 10px 0 10px 12px; color: #f2f2ec; font: 400 13px/1 'DM Sans', sans-serif; letter-spacing: .04em; }
 body:not(.page-creations) #hamburgerBtn::after { content: "Menu"; }
 body:not(.page-creations) #hamburgerBtn.open::after { content: "Close"; }
 body:not(.page-creations) #hamburgerBtn span { display: none; }
 body:not(.page-creations) #hamburgerBtn:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
 body:not(.page-creations) #mobileMenu {
  display: flex; flex-direction: column; position: fixed; inset: var(--nav-h, 80px) 0 auto; height: auto; max-height: calc(100dvh - var(--nav-h, 80px));
  padding: 18px 24px 26px; gap: 0; align-items: stretch; justify-content: flex-start; text-align: left;
  background: #20201ff5; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid #ffffff22; box-shadow: 0 18px 32px #0003;
  overflow-y: auto; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
 }
 body:not(.page-creations) #mobileMenu.open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
 body:not(.page-creations) #mobileMenu a {
  display: flex; align-items: center; justify-content: flex-start; min-height: 54px; padding: 12px 0; margin: 0;
  font: 400 17px/1.4 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none; color: #edede7;
  border-bottom: 1px solid #ffffff14; text-decoration: none; opacity: 1; transform: none;
 }
 body:not(.page-creations) #mobileMenu a:nth-last-child(2) { margin-top: 14px; }
 body:not(.page-creations) #mobileMenu a:nth-last-child(-n+2) { font-size: 14px; color: #bdbdb7; border: 0; min-height: 44px; }
 body:not(.page-creations) #mobileMenu a:focus-visible { outline: 1px solid #edede7; outline-offset: 3px; }
}
@media (max-width: 0px) { body:not(.page-creations) #mobileMenu { transition: none; } }

/* Wayfinding (site-wayfinding-v1.js, owner-approved 2026-10-06). */
/* 1. You are here (owner 2026-10-07: no dot, the page name glows): the current section's header link and phone-menu
   row are lit white with a soft silver-white glow, the [creations] wordmark's light language kept quiet; no underline
   (Contact: the CTA is lit instead). */
#mainNav .nav-links a[aria-current="page"],
html body.page-creations #mainNav .nav-links a[href][aria-current="page"]{color:#fff!important;text-decoration:none!important;text-shadow:0 0 1px #ffffffb3,0 0 7px #ffffff8c,0 0 16px #e6ecf866,0 0 28px #dce5f533}
#mainNav .nav-cta[aria-current="page"]{text-decoration:none;background:#ffffff26!important;border-color:#f2f2f0!important;color:#fff;text-shadow:0 0 7px #ffffff8c,0 0 16px #e6ecf855}
#mobileMenu a[aria-current="page"]{color:#fff!important;font-weight:500;text-shadow:0 0 1px #ffffffb3,0 0 9px #ffffff99,0 0 20px #e6ecf880,0 0 36px #dce5f540}
#mobileMenu a[aria-current="page"]::after{content:none}
/* 2. Phone menu backdrop: dims the page under the open menu; a tap on it closes the menu. */
.menu-scrim{display:none}
@media(max-width:768px){
 .menu-scrim{display:block;position:fixed;inset:0;z-index:198;background:#0c0c0c73;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s .22s;-webkit-tap-highlight-color:transparent}
 .menu-scrim.is-shown{opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s}
}
/* 3. Back to top: one rounded, frosted button in the right page gutter; colour-only hover, no lift. The script
   sets --to-top-lift to rise above the footer or the product pages' action bar. */
.to-top{position:fixed;z-index:190;right:max(12px,calc(env(safe-area-inset-right) + 12px),calc((var(--to-top-gutter,var(--page-gutter,clamp(24px,5vw,80px))) - 44px) / 2));bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));width:44px;height:44px;display:grid;place-items:center;margin:0;padding:0;border:1px solid #15151524;border-radius:50%;background:#faf9f6c9;-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);color:#151515;box-shadow:0 8px 24px #00000026,0 1px 0 #ffffffb3 inset;cursor:pointer;transform:translateY(calc(-1 * var(--to-top-lift,0px)));opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s,background-color .2s,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.to-top.is-shown{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s,background-color .2s,border-color .2s,box-shadow .2s}
.to-top:hover{background:#fff;border-color:#15151566;box-shadow:0 8px 24px #0000002e,0 0 0 3px #1515150f}
.to-top:focus-visible{outline:2px solid #151515;outline-offset:2px;box-shadow:0 0 0 5px #faf9f6}
.to-top svg{width:18px;height:18px}
@media print{.to-top,.menu-scrim{display:none}}

/* Footer (owner-approved 2026-10-06): four columns (Explore, Designs, Connect, Good to know) beside the brand on
   wide screens, a 2 x 2 grid on phones. "Privacy" sits on the copyright line (owner 2026-10-11; it was a lone
   "Analytics privacy" row under a filler line). */
body>footer .footer-nav{gap:clamp(28px,3.4vw,52px)}
body>footer .footer-privacy{display:inline-flex;align-items:center;min-height:32px;color:#cecece;font-size:13px;text-decoration:none;transition:color .2s}
body>footer .footer-privacy::before{content:"\00b7";margin:0 .7em 0 .4em;color:#8a8a8a}
body>footer .footer-privacy:hover{color:#fff}
@media(max-width:760px){
 body>footer .footer-top>div:first-child{flex:0 0 auto}
 body>footer .footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;width:100%}
}

/* Chrome system (2026-10-09 audit): one header, menu and footer across the main site, Workbench, Help and [creations].
   1. Header labels share one centre line: nav links are 40 px flex boxes like the search bar and the CTA (they sat
      1.5-2 px low because the inline padding box hung off the text baseline). */
@media(min-width:769px){
 #mainNav .nav-links li{display:flex}
 #mainNav .nav-links a{display:inline-flex;align-items:center;min-height:40px;padding-block:0}
}
/* 2. Phones: [creations] and product pages end "Menu" on the page gutter like the main site (it sat 11 px inside). */
@media(max-width:768px){
 html body.page-creations #hamburgerBtn{margin-right:-11px}
}
/* 3. Footer: the same column headings and brand line everywhere (Workbench headings were light, the homepage brand
      line was larger and narrower than every other page's). */
html body>footer .footer-col .footer-heading{font-weight:700}
html body>footer .footer-top>div>p.footer-shop-copy{max-width:40ch;font-size:.85rem;line-height:1.8}
/* 4. One focus ring weight: the phone menu toggle, menu rows and the footer privacy link drew 1 px rings while every other
      header, footer and search control draws 2 px. */
html body #hamburgerBtn:focus-visible,
html body #mobileMenu a:focus-visible,
html body>footer .footer-privacy:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Six header links since "Partnerships" (2026-10-10): at 769-900px the links tighten and the search button keeps its
   square, so the logo, links, search and CTA never touch. */
@media(min-width:769px) and (max-width:900px){
 #mainNav .nav-links{gap:.8rem;margin:0 10px 0 22px}
 #mainNav .nav-links a{font-size:11.5px;letter-spacing:.05em}
 #mainNav .site-search-open{flex:none;margin-left:8px}
}
/* Same reason at 1101-1279px (the search becomes a bar) and 1400-1599px (links centred on the page; the [creations]
   labels are longer): a little less space between links so they never run into the search bar. */
@media(min-width:1101px) and (max-width:1279px){#mainNav .nav-links{gap:1.25rem}#mainNav .site-search-open{width:150px}}
@media(min-width:1400px) and (max-width:1599px){#mainNav .nav-links{gap:1.5rem}body.page-creations #mainNav .nav-links{gap:1.1rem}}
/* Old tech in the desktop header (owner 2026-10-10: "without adding too much clutter"): not a seventh centred link but a
   quiet utility link (box icon + label, no frame) on the right, beside the search bar, so the six section links keep
   their spacing. Shown from 1280px where the right group has room; the phone menu lists it after Partnerships. */
#mainNav .nav-util{display:none}
@media(min-width:1280px){
 #mainNav .nav-util{display:inline-flex;align-items:center;gap:7px;height:40px;margin:0 14px 0 auto;padding:0 2px;flex:none;font:400 13px/1 'DM Sans',sans-serif;letter-spacing:.01em;color:#f5f5f5a8;text-decoration:none;white-space:nowrap;transition:color .2s}
 #mainNav .nav-util svg{width:16px;height:16px;flex:none}
 #mainNav .nav-util:hover,#mainNav .nav-util[aria-current="page"]{color:#fff}
 #mainNav .nav-util[aria-current="page"]{text-shadow:0 0 1px #ffffffb3,0 0 7px #ffffff8c,0 0 16px #e6ecf866}
 #mainNav .nav-util:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
 #mainNav .nav-util+.site-search-open{margin-left:0}
}
@media(min-width:1280px) and (max-width:1399px){#mainNav .nav-util+.site-search-open{width:150px}}
/* With the extra link the right group is wider, so the links stay centred between logo and search (as below 1400px)
   until 1900px, where page-centred links clear it again (the homepage's wider gutter included). */
@media(min-width:1400px) and (max-width:1899px){#mainNav:has(.nav-util) .nav-links{position:static;transform:none;margin:0 auto}}

/* Phone footer (owner 2026-10-11): the Designs column is dropped on phones; [creations] in Explore leads there. */
@media (max-width: 760px) { body > footer .footer-col:has(a[href$="#cooling"]) { display: none; } }
/* ...so Good to know spans the row and lists its four links in two columns under Explore and Connect (owner 2026-10-11). */
@media (max-width: 760px) {
 body > footer .footer-nav > .footer-col:last-child { grid-column: 1 / -1; }
 body > footer .footer-nav > .footer-col:last-child ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: 24px; }
}


/* Link buttons (owner 2026-10-11: "every one"): every standalone link and link button is a rounded button with a
   filled circle in the text colour; the arrow is cut out of the circle, so it shows the button's own colour and
   contrasts on dark and light. Arrow: up-right to another page, toward the target on the same page, right for a
   pop-up preview. Plain text links (first list) get the whole button; existing pill buttons (second list) keep their
   own fill and get the radius and the circle. Add new standalone links to one of the two lists. */
html body.page-home .text-link,html body .model-contact,html body .product-secondary>a,html body.page-home .home-build-story .feature-actions a:not(.build-watch),html body .review-design-link,html body .help-back,html body .journey-link,html body .editorial-links a,html body .founder-links a,html body .fan-compare-side>a:not(.fan-compare-image-link),html body.page-creations p>a[href$="#test-notes"]:only-child,html body .pw-all,html body .rail-all,html body .wb-rail-all,html body .product-guide-link a,html body .bento-note-link,html body .custom-note-link,html body .wwu-review-link a,html body .wwu-kit-link,html body.page-work .wwu-go,html body.page-work .wwu-direct ul a,html body.page-work .wwu-review figcaption a,html body.page-work .wwu-proof-link a,html body.page-work .wwu-case-rel,html body .product-case-more,html body .pr-all,html body .workbench-rss-link,html body .privacy-end p>a,html body .channel-link,html body .contact-setup-note a,html body .contact-detail-value a,html body .post-back,html body .post-3d-link,html body .help-toc-back,html body .help-toc-help,html body .help-toc-close,html body .help-shop{display:inline-block!important;position:relative!important;width:fit-content!important;max-width:100%;align-self:flex-start;padding:12px 54px 12px 18px!important;min-height:46px;box-sizing:border-box;border:1px solid color-mix(in srgb,currentColor 34%,transparent)!important;border-radius:12px!important;background:color-mix(in srgb,currentColor 6%,transparent)!important;background-image:none!important;font-family:'DM Sans',sans-serif;font-size:14px!important;font-weight:500!important;line-height:1.45!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none!important;white-space:normal!important;opacity:1!important;transition:border-color .2s,background-color .2s}
html body.page-home .home-build-story .feature-actions a.build-watch:hover,html body.page-home .text-link:hover,html body .model-contact:hover,html body .product-secondary>a:hover,html body.page-home .home-build-story .feature-actions a:not(.build-watch):hover,html body .review-design-link:hover,html body .help-back:hover,html body .journey-link:hover,html body .editorial-links a:hover,html body .founder-links a:hover,html body .fan-compare-side>a:not(.fan-compare-image-link):hover,html body.page-creations p>a[href$="#test-notes"]:only-child:hover,html body .pw-all:hover,html body .rail-all:hover,html body .wb-rail-all:hover,html body .product-guide-link a:hover,html body .bento-note-link:hover,html body .custom-note-link:hover,html body .wwu-review-link a:hover,html body .wwu-kit-link:hover,html body.page-work .wwu-go:hover,html body.page-work .wwu-direct ul a:hover,html body.page-work .wwu-review figcaption a:hover,html body.page-work .wwu-proof-link a:hover,html body.page-work .wwu-case-rel:hover,html body .product-case-more:hover,html body .pr-all:hover,html body .workbench-rss-link:hover,html body .privacy-end p>a:hover,html body .channel-link:hover,html body .contact-setup-note a:hover,html body .contact-detail-value a:hover,html body .post-back:hover,html body .post-3d-link:hover,html body .help-toc-back:hover,html body .help-toc-help:hover,html body .help-toc-close:hover,html body .help-shop:hover{border-color:color-mix(in srgb,currentColor 70%,transparent)!important;background-color:color-mix(in srgb,currentColor 11%,transparent)!important}
html body .home-oldtech-link,html body .model-page-cta,html body .studio-details-link,html body .home-forum-cta,html body a.ot-btn,html body a.wwu-btn,html body a.btn-primary,html body .product-buy,html body a.product-actionbar-btn,html body .review-etsy-button,html body .hero-shop-link,html body .model-shop,html body .rb-all,html body .wb-link,html body .help-contact>a,html body .post-cta>a,html body .help-end-link,html body .mto-cta a,html body .help-toc-page,html body .sv-start{position:relative!important;display:inline-flex!important;align-items:center;min-height:46px;box-sizing:border-box;padding-right:54px!important;border-radius:12px!important;text-decoration:none!important}
html body.page-home .text-link *,html body .model-contact *,html body .product-secondary>a *,html body.page-home .home-build-story .feature-actions a:not(.build-watch) *,html body .review-design-link *,html body .help-back *,html body .journey-link *,html body .editorial-links a *,html body .founder-links a *,html body .fan-compare-side>a:not(.fan-compare-image-link) *,html body.page-creations p>a[href$="#test-notes"]:only-child *,html body .pw-all *,html body .rail-all *,html body .wb-rail-all *,html body .product-guide-link a *,html body .bento-note-link *,html body .custom-note-link *,html body .wwu-review-link a *,html body .wwu-kit-link *,html body.page-work .wwu-go *,html body.page-work .wwu-direct ul a *,html body.page-work .wwu-review figcaption a *,html body.page-work .wwu-proof-link a *,html body.page-work .wwu-case-rel *,html body .product-case-more *,html body .pr-all *,html body .workbench-rss-link *,html body .privacy-end p>a *,html body .channel-link *,html body .contact-setup-note a *,html body .contact-detail-value a *,html body .post-back *,html body .post-3d-link *,html body .home-oldtech-link *,html body .model-page-cta *,html body .studio-details-link *,html body .home-forum-cta *,html body a.ot-btn *,html body a.wwu-btn *,html body a.btn-primary *,html body .product-buy *,html body a.product-actionbar-btn *,html body .review-etsy-button *,html body .hero-shop-link *,html body .model-shop *,html body .rb-all *,html body .wb-link *,html body .help-contact>a *,html body .post-cta>a *,html body .help-end-link *,html body .mto-cta a *,html body .help-toc-back *,html body .help-toc-help *,html body .help-toc-close *,html body .help-shop *,html body .help-toc-page *,html body .sv-start *{text-decoration:none!important}
html body.page-home .text-link svg,html body .model-contact svg,html body .product-secondary>a svg,html body.page-home .home-build-story .feature-actions a:not(.build-watch) svg,html body .review-design-link svg,html body .help-back svg,html body .journey-link svg,html body .editorial-links a svg,html body .founder-links a svg,html body .fan-compare-side>a:not(.fan-compare-image-link) svg,html body.page-creations p>a[href$="#test-notes"]:only-child svg,html body .pw-all svg,html body .rail-all svg,html body .wb-rail-all svg,html body .product-guide-link a svg,html body .bento-note-link svg,html body .custom-note-link svg,html body .wwu-review-link a svg,html body .wwu-kit-link svg,html body.page-work .wwu-go svg,html body.page-work .wwu-direct ul a svg,html body.page-work .wwu-review figcaption a svg,html body.page-work .wwu-proof-link a svg,html body.page-work .wwu-case-rel svg,html body .product-case-more svg,html body .pr-all svg,html body .workbench-rss-link svg,html body .privacy-end p>a svg,html body .channel-link svg,html body .contact-setup-note a svg,html body .contact-detail-value a svg,html body .post-back svg,html body .post-3d-link svg,html body .home-oldtech-link svg,html body .model-page-cta svg,html body .studio-details-link svg,html body .home-forum-cta svg,html body a.ot-btn svg,html body a.wwu-btn svg,html body a.btn-primary svg,html body .product-buy svg,html body a.product-actionbar-btn svg,html body .review-etsy-button svg,html body .hero-shop-link svg,html body .model-shop svg,html body .rb-all svg,html body .wb-link svg,html body .help-contact>a svg,html body .post-cta>a svg,html body .help-end-link svg,html body .mto-cta a svg,html body .help-toc-back svg,html body .help-toc-help svg,html body .help-toc-close svg,html body .help-shop svg,html body .help-toc-page svg,html body .sv-start svg{display:none!important}
html body.page-home .text-link::before,html body .model-contact::before,html body .product-secondary>a::before,html body.page-home .home-build-story .feature-actions a:not(.build-watch)::before,html body .review-design-link::before,html body .help-back::before,html body .journey-link::before,html body .editorial-links a::before,html body .founder-links a::before,html body .fan-compare-side>a:not(.fan-compare-image-link)::before,html body.page-creations p>a[href$="#test-notes"]:only-child::before,html body .pw-all::before,html body .rail-all::before,html body .wb-rail-all::before,html body .product-guide-link a::before,html body .bento-note-link::before,html body .custom-note-link::before,html body .wwu-review-link a::before,html body .wwu-kit-link::before,html body.page-work .wwu-go::before,html body.page-work .wwu-direct ul a::before,html body.page-work .wwu-review figcaption a::before,html body.page-work .wwu-proof-link a::before,html body.page-work .wwu-case-rel::before,html body .product-case-more::before,html body .pr-all::before,html body .workbench-rss-link::before,html body .privacy-end p>a::before,html body .channel-link::before,html body .contact-setup-note a::before,html body .contact-detail-value a::before,html body .post-back::before,html body .post-3d-link::before,html body .home-oldtech-link::before,html body .model-page-cta::before,html body .studio-details-link::before,html body .home-forum-cta::before,html body a.ot-btn::before,html body a.wwu-btn::before,html body a.btn-primary::before,html body .product-buy::before,html body a.product-actionbar-btn::before,html body .review-etsy-button::before,html body .hero-shop-link::before,html body .model-shop::before,html body .rb-all::before,html body .wb-link::before,html body .help-contact>a::before,html body .post-cta>a::before,html body .help-end-link::before,html body .mto-cta a::before,html body .help-toc-back::before,html body .help-toc-help::before,html body .help-toc-close::before,html body .help-shop::before,html body .help-toc-page::before,html body .sv-start::before{display:none!important}
html body.page-home .home-build-story .feature-actions a.build-watch::after,html body.page-home .text-link::after,html body .model-contact::after,html body .product-secondary>a::after,html body.page-home .home-build-story .feature-actions a:not(.build-watch)::after,html body .review-design-link::after,html body .help-back::after,html body .journey-link::after,html body .editorial-links a::after,html body .founder-links a::after,html body .fan-compare-side>a:not(.fan-compare-image-link)::after,html body.page-creations p>a[href$="#test-notes"]:only-child::after,html body .pw-all::after,html body .rail-all::after,html body .wb-rail-all::after,html body .product-guide-link a::after,html body .bento-note-link::after,html body .custom-note-link::after,html body .wwu-review-link a::after,html body .wwu-kit-link::after,html body.page-work .wwu-go::after,html body.page-work .wwu-direct ul a::after,html body.page-work .wwu-review figcaption a::after,html body.page-work .wwu-proof-link a::after,html body.page-work .wwu-case-rel::after,html body .product-case-more::after,html body .pr-all::after,html body .workbench-rss-link::after,html body .privacy-end p>a::after,html body .channel-link::after,html body .contact-setup-note a::after,html body .contact-detail-value a::after,html body .post-back::after,html body .post-3d-link::after,html body .home-oldtech-link::after,html body .model-page-cta::after,html body .studio-details-link::after,html body .home-forum-cta::after,html body a.ot-btn::after,html body a.wwu-btn::after,html body a.btn-primary::after,html body .product-buy::after,html body a.product-actionbar-btn::after,html body .review-etsy-button::after,html body .hero-shop-link::after,html body .model-shop::after,html body .rb-all::after,html body .wb-link::after,html body .help-contact>a::after,html body .post-cta>a::after,html body .help-end-link::after,html body .mto-cta a::after,html body .help-toc-back::after,html body .help-toc-help::after,html body .help-toc-close::after,html body .help-shop::after,html body .help-toc-page::after,html body .sv-start::after{content:""!important;display:block!important;position:absolute!important;inset:50% 7px auto auto!important;translate:0 -50%;width:32px!important;height:32px!important;margin:0!important;border:0!important;border-radius:50%;background:currentColor!important;box-shadow:none!important;opacity:1!important;transform:none!important;filter:none!important;animation:none!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21 21 11'/%3E%3Cpath d='M13.5 11H21v7.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21 21 11'/%3E%3Cpath d='M13.5 11H21v7.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
html body.page-home .home-build-story .feature-actions a.build-watch:focus-visible,html body.page-home .text-link:focus-visible,html body .model-contact:focus-visible,html body .product-secondary>a:focus-visible,html body.page-home .home-build-story .feature-actions a:not(.build-watch):focus-visible,html body .review-design-link:focus-visible,html body .help-back:focus-visible,html body .journey-link:focus-visible,html body .editorial-links a:focus-visible,html body .founder-links a:focus-visible,html body .fan-compare-side>a:not(.fan-compare-image-link):focus-visible,html body.page-creations p>a[href$="#test-notes"]:only-child:focus-visible,html body .pw-all:focus-visible,html body .rail-all:focus-visible,html body .wb-rail-all:focus-visible,html body .product-guide-link a:focus-visible,html body .bento-note-link:focus-visible,html body .custom-note-link:focus-visible,html body .wwu-review-link a:focus-visible,html body .wwu-kit-link:focus-visible,html body.page-work .wwu-go:focus-visible,html body.page-work .wwu-direct ul a:focus-visible,html body.page-work .wwu-review figcaption a:focus-visible,html body.page-work .wwu-proof-link a:focus-visible,html body.page-work .wwu-case-rel:focus-visible,html body .product-case-more:focus-visible,html body .pr-all:focus-visible,html body .workbench-rss-link:focus-visible,html body .privacy-end p>a:focus-visible,html body .channel-link:focus-visible,html body .contact-setup-note a:focus-visible,html body .contact-detail-value a:focus-visible,html body .post-back:focus-visible,html body .post-3d-link:focus-visible,html body .home-oldtech-link:focus-visible,html body .model-page-cta:focus-visible,html body .studio-details-link:focus-visible,html body .home-forum-cta:focus-visible,html body a.ot-btn:focus-visible,html body a.wwu-btn:focus-visible,html body a.btn-primary:focus-visible,html body .product-buy:focus-visible,html body a.product-actionbar-btn:focus-visible,html body .review-etsy-button:focus-visible,html body .hero-shop-link:focus-visible,html body .model-shop:focus-visible,html body .rb-all:focus-visible,html body .wb-link:focus-visible,html body .help-contact>a:focus-visible,html body .post-cta>a:focus-visible,html body .help-end-link:focus-visible,html body .mto-cta a:focus-visible,html body .help-toc-back:focus-visible,html body .help-toc-help:focus-visible,html body .help-toc-close:focus-visible,html body .help-shop:focus-visible,html body .help-toc-page:focus-visible,html body .sv-start:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Same page: toward the target (down unless it sits above). */
html body.page-home .text-link[href^="#"]::after,html body .model-contact[href^="#"]::after,html body .product-secondary>a[href^="#"]::after,html body.page-home .home-build-story .feature-actions a:not(.build-watch)[href^="#"]::after,html body .review-design-link[href^="#"]::after,html body .help-back[href^="#"]::after,html body .journey-link[href^="#"]::after,html body .editorial-links a[href^="#"]::after,html body .founder-links a[href^="#"]::after,html body .fan-compare-side>a:not(.fan-compare-image-link)[href^="#"]::after,html body.page-creations p>a[href$="#test-notes"]:only-child[href^="#"]::after,html body .pw-all[href^="#"]::after,html body .rail-all[href^="#"]::after,html body .wb-rail-all[href^="#"]::after,html body .product-guide-link a[href^="#"]::after,html body .bento-note-link[href^="#"]::after,html body .custom-note-link[href^="#"]::after,html body .wwu-review-link a[href^="#"]::after,html body .wwu-kit-link[href^="#"]::after,html body.page-work .wwu-go[href^="#"]::after,html body.page-work .wwu-direct ul a[href^="#"]::after,html body.page-work .wwu-review figcaption a[href^="#"]::after,html body.page-work .wwu-proof-link a[href^="#"]::after,html body.page-work .wwu-case-rel[href^="#"]::after,html body .product-case-more[href^="#"]::after,html body .pr-all[href^="#"]::after,html body .workbench-rss-link[href^="#"]::after,html body .privacy-end p>a[href^="#"]::after,html body .channel-link[href^="#"]::after,html body .contact-setup-note a[href^="#"]::after,html body .post-back[href^="#"]::after,html body .post-3d-link[href^="#"]::after,html body .home-oldtech-link[href^="#"]::after,html body .model-page-cta[href^="#"]::after,html body .studio-details-link[href^="#"]::after,html body .home-forum-cta[href^="#"]::after,html body a.ot-btn[href^="#"]::after,html body a.wwu-btn[href^="#"]::after,html body a.btn-primary[href^="#"]::after,html body .product-buy[href^="#"]::after,html body a.product-actionbar-btn[href^="#"]::after,html body .review-etsy-button[href^="#"]::after,html body .hero-shop-link[href^="#"]::after,html body .model-shop[href^="#"]::after,html body .rb-all[href^="#"]::after,html body .wb-link[href^="#"]::after,html body .help-contact>a[href^="#"]::after,html body .post-cta>a[href^="#"]::after,html body .help-end-link[href^="#"]::after,html body .mto-cta a[href^="#"]::after,html body .help-toc-help[href^="#"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 9v14'/%3E%3Cpath d='M10 17l6 6 6-6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 9v14'/%3E%3Cpath d='M10 17l6 6 6-6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
html body .help-back[href="#your-product"]::after,html body .help-toc-back[href="#your-product"]::after,html body .help-toc-close::after,html body .help-end-link[href="#your-product"]::after,html body.page-work .wwu-review figcaption a[href^="#"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 23V9'/%3E%3Cpath d='M10 15l6-6 6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 23V9'/%3E%3Cpath d='M10 15l6-6 6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
/* [creations] comparison "Explore this mount" opens the preview: a pop-up. */
html body.page-creations:not(.page-product) .fan-compare-side>a:not(.fan-compare-image-link)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
/* "Start step-by-step setup" (Help and product pages) opens the step viewer: a pop-up. */
html body .sv-start::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
/* Smaller versions: inside review cards and the sticky product action bar. */
html body .review-design-link{padding:8px 40px 8px 14px!important;min-height:36px;font-size:12.5px!important;border-radius:10px!important}
html body .review-design-link::after,html body a.product-actionbar-btn::after{width:24px!important;height:24px!important;right:6px!important}
html body a.product-actionbar-btn{min-height:36px;padding-right:38px!important}
html body .review-design-link strong{font-weight:600}
/* Hero chapter tiles: same filled circle; Channel and Community scroll down the page. */
.page-home .hero-chapters a:not(.hero-chapter-out) .ui-arrow{background:#f4f4f1;color:#151515;border-color:#f4f4f1!important}

/* Plain text links that sat in the pill list: give them the whole button. */
html body .rb-all,html body .hero-shop-link{padding:12px 54px 12px 18px!important;border:1px solid color-mix(in srgb,currentColor 34%,transparent)!important;background:color-mix(in srgb,currentColor 6%,transparent)!important;font-size:14px!important;font-weight:500!important}
/* The forum call to action keeps its own padding rule; make room for the circle. */
html body.page-home .forum-stage .forum-stage-cta .home-forum-cta{padding-right:62px!important}
/* [creations] preview: keep the studio's own show/hide for these two (single-column studio shows Details, hides Ask). */
html body #modelPreview.is-studio .studio-details-link{display:none!important}
html body #modelPreview .model-contact{display:none!important}
@media (min-width: 761px) and (min-width: 1025px), (min-width: 761px) and (orientation: landscape) {
  html body #modelPreview .model-contact{display:inline-block!important}
}
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  html body #modelPreview.is-studio .studio-details-link{display:inline-flex!important}
  html body #modelPreview .model-contact{display:none!important}
}
@media (max-width: 760px) {
  html body #modelPreview .studio-details-link,html body #modelPreview .model-shop{padding-right:40px!important;white-space:nowrap}
  html body #modelPreview .studio-details-link::after,html body #modelPreview .model-shop::after{width:26px!important;height:26px!important;right:7px!important}
}
html body .channel-link{white-space:nowrap!important;flex:none}

/* Header: [creations] keeps its lowercase brand spelling inside the uppercase nav (owner 2026-10-11). */
html body #mainNav .nav-links a[href="https://creations.bankasimedia.com/"]{text-transform:none!important;letter-spacing:.02em!important;font-size:13px!important}
/* Footer column headings glow like the current-page link (owner 2026-10-11; weight stays 700). */
html body .footer-col .footer-heading{color:#fff!important;text-shadow:0 0 1px #ffffffb3,0 0 7px #ffffff8c,0 0 16px #e6ecf866,0 0 28px #dce5f533}

/* BANKASI MEDIA lockup (owner 2026-10-13): 800 extra bold, MEDIA cap-top on BANKASI's cap-top line.
   MEDIA sits on the baseline and is raised by cap height x (size ratio - 1), in its own em:
   main 0.71 x (16.8/7.36 - 1) = .911em (Geist); [creations] 0.70 x (1/.58 - 1) = .507em (DM Sans).
   [creations] uses 'DM Sans Print' (same DM Sans file, 100-1000) because its 'DM Sans' face stops at 700. */
html body #mainNav .nav-logo,html body footer .nav-logo{align-items:baseline!important}
html body .nav-logo .logo-main{font-weight:800!important}
html body .nav-logo .logo-sup{font-weight:800!important;vertical-align:baseline!important;position:relative!important;top:-.911em!important;margin-top:0!important}
html body .creations-parent-name,html body .creations-parent-name sup{font-weight:800!important;font-family:'DM Sans Print','DM Sans',sans-serif!important}
html body .creations-parent-name sup{vertical-align:baseline!important;position:relative!important;top:-.507em!important}
/* [creations] wordmark (owner 2026-10-13): 500 medium in the header, hero (incl. the loading mark and typewriter layers) and footer, was 300. */
html body.page-creations .creations-bracket{font-weight:500!important}
/* /assets/css/help-picker-v1.css */
/* Help product picker (owner 2026-10-05): the box's QR code opens /help, so "Which one did you get?" comes first.
   Picture tiles (the [creations] card images) grouped like the shop; each opens its setup & care guide. No hover lift. */
.help-picker { max-width: 1440px; margin: 0 auto; padding: 44px clamp(24px, 6vw, 88px) 8px; box-sizing: border-box; scroll-margin-top: var(--help-header-h, 76px); }
.help-picker-head { margin: 0 0 22px; }
.help-picker-head h2 { margin: 6px 0 6px; font: 400 clamp(32px, 3.4vw, 46px)/1.05 'Cormorant Garamond', serif; letter-spacing: -.015em; color: #1d1d1b; }
.help-picker-head p:not(.help-eyebrow) { margin: 0; font: 400 15px/1.6 'DM Sans', sans-serif; color: #5f5c57; }
.help-picker-group { margin: 0 0 22px; }
.help-picker-group h3 { margin: 0 0 10px; font: 500 12px/1.4 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #5f5b55; }
.help-picker-group ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.help-product { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: 8px 8px 12px; border: 1px solid #e1ddd5; border-radius: 14px; background: #faf9f6; color: #151515; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.help-product:hover { border-color: #9ea7b3; box-shadow: 0 0 0 3px #b9c6d633; }
.help-product:focus-visible { outline: 2px solid #151515; outline-offset: 2px; }
.help-product.is-current { border-color: #151515; box-shadow: 0 0 0 1px #151515; }
.help-product-art { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 9px; background: #f3f2ef; }
.help-product-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.help-product-name { display: block; margin: 9px 4px 0; font: 500 14px/1.3 'DM Sans', sans-serif; }
.help-product[hidden], .help-picker-group[hidden] { display: none; }
/* Guides open below the picker; this link returns to it. */
.product-help-item { scroll-margin-top: var(--help-header-h, 76px); }
.help-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; font: 500 13px/1.4 'DM Sans', sans-serif; color: #222; text-decoration: underline; text-underline-offset: 4px; }
.help-back svg { width: 16px; height: 16px; }
@media (max-width: 680px) {
  .help-hero { padding-top: 96px; padding-bottom: 26px; gap: 18px; }
  .help-hero h1 { font-size: 42px; margin-bottom: 12px; }
  .help-hero .help-intro { font-size: 15px; line-height: 1.55; }
  .help-hero .help-search-box { display: none; }
  .help-picker { padding: 22px 24px 4px; }
  .help-picker-head { margin-bottom: 12px; }
  /* the hero already says "Pick the part you received": the first row of tiles fits on the first screen */
  .help-picker-head p:not(.help-eyebrow) { display: none; }
  .help-picker-group ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .help-product { padding: 5px 5px 9px; border-radius: 11px; }
  .help-product-art { border-radius: 7px; }
  .help-product-name { margin: 6px 2px 0; font-size: 12px; line-height: 1.25; }
}

/* The grid spans the hero's width: six columns from 1100 px (Cooling fills a row; the other groups keep the size) */
@media (min-width: 1100px) { .help-picker-group ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* "Continue at step n of N" (step-viewer-v2 remembers the last step; help-picker-v3 writes this) */
.help-product-progress { display: flex; align-items: center; gap: 6px; margin: 6px 4px 0; font: 500 12px/1.3 'DM Sans', sans-serif; color: #3f423d; }
.help-product-progress::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #1f241e; }
@media (max-width: 680px) { .help-product-progress { margin: 5px 2px 0; font-size: 11px; } }
/* /assets/css/help-guide-v1.css */
/* Help guides (owner 2026-10-06), with help-picker-v2.js and help-v3.js: the sidebar as the open guide's contents,
   two-column step cards where there is room, product pictures in guide headers, category headings, the end row,
   the search field's clear button and the phones' "Search help" button. Help only. No lift on hover. */

/* Wide screens: hero, picker and guides share one column edge (the hero used the full width, the rest 1440 px). */
@media (min-width: 1441px) {
  .help-page .help-hero { padding-left: calc((100% - 1440px) / 2 + clamp(24px, 6vw, 88px)); padding-right: calc((100% - 1440px) / 2 + clamp(24px, 6vw, 88px)); }
}

/* Guide category headings (same order and names as the picker) */
.help-page .help-guide-category { margin: 0; padding: 18px 24px 8px; border-top: 1px solid #deded8; background: #f3f3ef; font: 500 12px/1.4 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #5f5b55; }
.help-page .help-questions > .help-guide-category:first-child { border-top: 0; }
.help-page .help-guide-category + .help-item { border-top: 1px solid #deded8; }

/* Product picture in each guide's header */
.help-page .product-help-item > summary { justify-content: flex-start; gap: 16px; }
.help-page .product-help-item > summary .help-guide-name { flex: 1; min-width: 0; }
.help-page .help-guide-thumb { flex: none; width: 52px; height: 52px; border: 1px solid #e1ddd5; border-radius: 10px; background: #f3f2ef; overflow: hidden; }
.help-page .help-guide-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.help-page .product-help-item > summary { padding-top: 14px; padding-bottom: 14px; }
.help-page .product-help-item[open] > summary { padding-bottom: 12px; }

/* Fan results sit with the fit checks */
.help-page .help-answer .help-fit-note { margin: 10px 0 0; font-size: 13px; line-height: 1.75; color: #62675e; }

/* Room for two step cards side by side */
.help-page .product-help-item .help-answer { max-width: none; container-type: inline-size; }
.help-page .product-help-item .help-answer > :not(.install-steps):not(.help-guide-end) { max-width: 76ch; }
@container (min-width: 760px) {
  .help-page .help-answer .install-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; gap: 18px; }
  .help-page .help-answer .install-steps > li { display: flex; flex-direction: column; }
  .help-page .help-answer .install-steps .install-step-copy { flex: 1; grid-template-columns: 1fr; row-gap: 8px; align-content: start; }
  .help-page .help-answer .install-steps .install-step-number { grid-row: auto; justify-self: start; }
  .help-page .help-answer .help-legacy { max-width: 1040px; }
}
.help-page .help-answer .install-steps > li { scroll-margin-top: calc(var(--help-header-h, 76px) + 16px); }
.help-page .help-answer > h3, .help-page .help-answer .help-legacy { scroll-margin-top: calc(var(--help-header-h, 76px) + 16px); }

/* End of every guide: All products · Product page · Still need help? */
.help-page .help-guide-end { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 6px; padding-top: 20px; border-top: 1px solid #e3e3dd; }
.help-page .help-end-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid #d4d4ce; border-radius: 999px; background: #fff; color: #222; font: 500 14px/1 'DM Sans', sans-serif; text-decoration: none; transition: border-color .2s, background-color .2s; }
.help-page .help-end-link svg { width: 16px; height: 16px; flex: none; }
.help-page .help-end-link:hover { border-color: #292929; }
.help-page .help-end-link.is-help { background: #292929; border-color: #292929; color: #fff; }
.help-page .help-end-link.is-help:hover { background: #151515; }

/* Sidebar: topics, or the open guide's contents (desktop) */
.help-page .help-sidebar.is-guide { max-height: calc(100vh - 130px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 6px; margin-right: -6px; }
.help-page .help-guide-toc .help-toc-back { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.4 'DM Sans', sans-serif; color: #292929; text-decoration: underline; text-underline-offset: 4px; }
.help-page .help-guide-toc .help-toc-back svg { width: 16px; height: 16px; }
.help-page .help-toc-product { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; margin: 18px 0 16px; padding-bottom: 16px; border-bottom: 1px solid #d4d4cf; }
.help-page .help-toc-thumb { display: block; width: 64px; height: 64px; border: 1px solid #e1ddd5; border-radius: 12px; background: #faf9f6; overflow: hidden; }
.help-page .help-toc-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.help-page .help-toc-product .help-eyebrow { margin: 0 0 3px; font-size: 10px; }
.help-page .help-toc-name { margin: 0; font: 500 15px/1.3 'DM Sans', sans-serif; color: #1d1d1b; }
.help-page .help-guide-toc nav { display: block; border-top: 0; }
.help-page .help-guide-toc nav a { border-bottom: 0; justify-content: normal; }
.help-page .help-toc-nav ol { list-style: none; margin: 0; padding: 0; }
.help-page .help-toc-nav a { display: block; padding: 7px 0; color: #4c4c48; font: 400 14px/1.4 'DM Sans', sans-serif; text-decoration: none; transition: color .2s; }
.help-page .help-toc-nav a:hover { color: #151515; }
.help-page .help-toc-section > a { font-weight: 500; color: #66625b; }
.help-page .help-toc-section.is-within > a, .help-page .help-toc-section > a:hover { color: #151515; }
.help-page .help-toc-section + .help-toc-section { border-top: 1px solid #e3e3dd; }
.help-page .help-toc-nav a.is-active { color: #151515; font-weight: 500; }
.help-page .help-toc-steps { margin: 0 0 8px !important; border-left: 1px solid #d4d4cf; }
.help-page .help-toc-steps a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; margin-left: -1px; padding: 5px 0 5px 12px; border-left: 2px solid transparent; font-size: 13px; line-height: 1.4; color: #6a6a64; }
.help-page .help-toc-steps a.is-active { border-left-color: #151515; color: #151515; }
.help-page .help-toc-n { font-variant-numeric: tabular-nums; color: #6b675f; }
.help-page .help-toc-steps a.is-active .help-toc-n { color: #151515; }
.help-page .help-toc-links { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #d4d4cf; }
.help-page .help-toc-page { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; background: #292929; color: #fff; font: 500 13px/1 'DM Sans', sans-serif; text-decoration: none; }
.help-page .help-toc-page:hover { background: #151515; }
.help-page .help-toc-page svg { width: 16px; height: 16px; }
.help-page .help-toc-help, .help-page .help-toc-close { justify-self: start; padding: 2px 0; border: 0; background: none; color: #4c4c48; font: 400 13px/1.5 'DM Sans', sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.help-page .help-toc-help:hover, .help-page .help-toc-close:hover { color: #151515; }

/* Search field: a visible clear button (the native one is easy to miss, and absent in some browsers) */
.help-page .help-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.help-page .help-search-clear { display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin-right: -6px; padding: 0; border: 0; border-radius: 999px; background: #e3e3dd; color: #292929; cursor: pointer; }
.help-page .help-search-clear:hover { background: #d4d4ce; }
.help-page .help-search-clear svg { width: 16px; height: 16px; }
.help-page .help-search-clear[hidden] { display: none; }
.help-page .help-search-open { display: none; }
.help-page .help-picker[hidden] { display: none; }

@media (max-width: 680px) {
  /* the guide contents are a desktop aid; phones keep the topic list */
  .help-page .help-guide-toc { display: none !important; }
  .help-page.is-searching .help-sidebar { display: none; }
  .help-page .help-sidebar .help-topics[hidden] { display: block !important; }
  .help-page .help-sidebar.is-guide { max-height: none; overflow: visible; padding-right: 0; margin-right: 0; }
  .help-page .help-guide-thumb { width: 44px; height: 44px; border-radius: 8px; }
  .help-page .product-help-item > summary { gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .help-page .help-guide-category { padding: 16px 18px 8px; }
  .help-page .help-guide-end { gap: 8px; }
  .help-page .help-end-link { flex: 1 1 auto; justify-content: center; padding: 0 14px; font-size: 13.5px; }
  .help-page .help-end-link.is-help { flex-basis: 100%; }
  /* "Search help": a quiet button in the hero; the field appears under it */
  .help-page .help-search-open { display: inline-flex; align-items: center; gap: 8px; align-self: start; justify-self: start; min-height: 38px; margin-top: 2px; padding: 0 15px; border: 1px solid #ffffff38; border-radius: 999px; background: #ffffff0d; color: #f4f4f2; font: 500 14px/1 'DM Sans', sans-serif; cursor: pointer; }
  .help-page .help-search-open svg { width: 17px; height: 17px; }
  .help-page .help-search-open[aria-expanded="true"] { border-color: #ffffff70; }
  .help-page .help-hero.is-search-open .help-search-box { display: block; padding: 0; border: 0; background: none; }
  .help-page .help-hero.is-search-open .help-search-box label, .help-page .help-hero.is-search-open .help-search-box > p { display: none; }
  .help-page .help-search-open:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
}

/* "Something wrong with your order?" */
/* guides and answers land flush under the fixed header (help-picker-v3 measures it into --help-header-h) */
.help-page .help-item { scroll-margin-top: var(--help-header-h, 76px); }
/* The rounded answer box clips its corners without being a scroll container: with overflow:hidden, landing on a
   guide scrolled the box itself and hid its top under the header (the guide's own heading, the category above it). */
.help-page .help-questions { overflow: clip; }
.help-page #help-order-issues .help-answer h3 { margin: 18px 0 6px; font: 500 15px/1.4 'DM Sans', sans-serif; color: #292929; }
.help-page #help-order-issues .help-answer ul { margin: 8px 0 12px; padding-left: 20px; }
.help-page #help-order-issues .help-answer li { margin-bottom: 6px; }
.help-page #help-order-issues .help-answer strong { font-weight: 500; color: #292929; }


/* ---------- audit 2026-10-07 (help-v4, help-picker-v3, step-viewer-v2) ---------- */
/* B28 contrast: topic counts and section numbers (help-v2.css used #777, 4.0:1) */
.help-page .help-sidebar small, .help-page .help-number { color: #6b675f; }
/* help-v4 ranks title matches first inside each list while a search is on */
.help-page.is-searching .help-questions { display: flex; flex-direction: column; }
/* D8, every width since the 2026-10-11 audit (help-picker-v5.js): the picker is the only product list. With a picker
   (JS), "Product setup & care" shows only while a guide is open, and then only that guide; a search shows every match.
   No-JS keeps the whole list. */
.help-page .help-guides-note { display: none; }
.help-page.has-help-picker:not(.is-searching) #help-product-guides:not(.has-open-guide),
.help-page.has-help-picker:not(.is-searching) #help-product-guides .product-help-item:not([open]),
.help-page.has-help-picker:not(.is-searching) #help-product-guides .help-guide-category:not(.has-open-guide) { display: none; }
.help-page.has-help-picker:not(.is-searching) #help-product-guides .help-guide-category.has-open-guide { border-top: 0; }
/* W10: very wide screens get a wider column; step cards run three across and the overview drawing grows with it */
@media (min-width: 1900px) {
  .help-page .help-hero { padding-left: calc((100% - 1840px) / 2 + clamp(24px, 6vw, 88px)); padding-right: calc((100% - 1840px) / 2 + clamp(24px, 6vw, 88px)); }
  .help-page .help-layout { max-width: 1840px; grid-template-columns: 280px minmax(0, 1fr); }
  .help-page .help-picker { max-width: 1840px; }
  .help-page .help-picker-group ul { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .help-page .product-help-item .help-answer > .fit-illustration:not(.install-steps):not(.help-guide-end) { max-width: 920px; }
  .help-page .product-help-item .help-answer .fit-illustration img { max-height: 420px; }
}
@container (min-width: 1180px) {
  .help-page .help-answer .install-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .help-page .help-answer .help-legacy { max-width: none; }
}

/* ---------- Help audit 2026-10-11 (owner-approved items 2-8) ---------- */
/* 6. One column edge, the About / Contact rule: everything starts on the nav gutter and from 1464 px sits in one centred
   1320 px column (the 1440 / 1840 px columns started 14-88 px off the logo). Six tiles a row fill it. */
.help-page { --pc-edge: max(var(--page-gutter, 24px), calc((100% - 1320px) / 2)); }
.help-page .help-hero, .help-page .help-picker, .help-page .help-layout, .help-page .help-contact { padding-left: var(--pc-edge) !important; padding-right: var(--pc-edge) !important; }
.help-page .help-picker, .help-page .help-layout { max-width: none !important; }
@media (min-width: 1900px) { .help-page .help-picker-group ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* 7. The grey "set up" keeps the heading's weight. */
.help-page .help-hero h1 em { font-weight: inherit; }
/* 5. Safari draws its own clear icon beside ours in the search field. */
.help-page #help-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
/* 3 and 4. Link buttons (lists at the end of site-refresh-v1.css): the sidebar's links stack with room between them;
   the guide's Copy link / Print buttons take the same rounded corners. */
.help-page .help-toc-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.help-page .help-toc-links > * { width: 100% !important; text-align: left; }
.help-page .help-toc-close { font: inherit; font-size: 13px; color: #292929; background: none; cursor: pointer; text-align: left; }
.help-page .help-shop { margin-top: 24px; }
.help-page .product-guide-actions button { border-radius: 12px; }
/* /assets/css/step-viewer-v2.css */
/* Step-by-step viewer for the illustrated setup steps (assets/js/step-viewer-v2.js), on Help and the product pages.
   Full screen, light drawing stage, big thumb-reachable Previous / Next on phones. No lift anywhere.
   v2 (audit 2026-10-07): the Start / Continue button above each list, the touch expand icon on drawings, the last
   step's All products / Product page / Still need help? row, the "See it in 3D" chip, and phone landscape (the step
   copy scrolls instead of being cut after two lines; the hint sits above the drawing). */
html.step-viewer-open, html.step-viewer-open body { overflow: hidden; }
.install-steps.has-step-viewer .install-step-figure a { cursor: zoom-in; }
.step-viewer {
  --sv-ink: #1f241e; --sv-ground: #eeefea; --sv-paper: #fbfbf8; --sv-line: #d8dbd3; --sv-muted: #5d6258;
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--sv-paper); color: var(--sv-ink); overflow: hidden;
  display: none; grid-template-rows: auto minmax(0, 1fr) auto; font-family: "DM Sans", sans-serif;
}
.step-viewer[open] { display: grid; animation: sv-in .22s ease-out; }
.step-viewer::backdrop { background: rgba(21, 21, 21, .55); }
@keyframes sv-in { from { opacity: 0; } to { opacity: 1; } }

/* top bar: product · progress · close */
.step-viewer .sv-top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 12px 14px 12px 28px; border-bottom: 1px solid var(--sv-line); background: var(--sv-paper); }
.step-viewer .sv-kicker { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1.4 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sv-muted); }
.step-viewer .sv-bar { display: flex; gap: 4px; }
.step-viewer .sv-bar span { width: 22px; height: 3px; border-radius: 3px; background: #d5d8cf; transition: background-color .25s; }
.step-viewer .sv-bar span.is-done { background: #8f958a; }
.step-viewer .sv-bar span.is-current { background: var(--sv-ink); }
.step-viewer .sv-count { display: none; font: 500 13px/1 "DM Sans", sans-serif; font-variant-numeric: tabular-nums; color: var(--sv-ink); }
.step-viewer .sv-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--sv-line); border-radius: 999px; background: #fff; color: var(--sv-ink); cursor: pointer; transition: border-color .2s, background-color .2s; }
.step-viewer .sv-close svg { width: 20px; height: 20px; }
.step-viewer .sv-close:hover { border-color: var(--sv-ink); }

/* stage */
.step-viewer .sv-stage { position: relative; overflow: hidden; background: var(--sv-ground); touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-in; }
.step-viewer.is-zoomed .sv-stage { cursor: grab; }
.step-viewer.is-zoomed .sv-stage:active { cursor: grabbing; }
.step-viewer .sv-img, .step-viewer .sv-ghost { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; -webkit-user-drag: none; pointer-events: none; }
.step-viewer .sv-img { transition: translate .32s cubic-bezier(.2, .7, .2, 1), opacity .32s ease; }
.step-viewer .sv-img.is-swiping { transition: none; }
.step-viewer .sv-img.enter-right { translate: 48px 0; opacity: 0; transition: none; }
.step-viewer .sv-img.enter-left { translate: -48px 0; opacity: 0; transition: none; }
.step-viewer .sv-img.enter-right.go, .step-viewer .sv-img.enter-left.go { translate: 0 0; opacity: 1; transition: translate .34s cubic-bezier(.2, .7, .2, 1), opacity .3s ease; }
.step-viewer .sv-ghost { opacity: 0; }
.step-viewer .sv-ghost.is-leaving { opacity: 1; }
.step-viewer .sv-ghost.is-leaving.go { opacity: 0; transition: translate .3s ease-in, opacity .26s ease-in; }
.step-viewer .sv-ghost.to-left.go { translate: -48px 0; }
.step-viewer .sv-ghost.to-right.go { translate: 48px 0; }
.step-viewer .sv-hint { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(251, 251, 248, .92); border: 1px solid var(--sv-line); font: 500 12px/1.3 "DM Sans", sans-serif; color: var(--sv-muted); white-space: nowrap; pointer-events: none; transition: opacity .4s ease; }
.step-viewer .sv-hint.is-gone { opacity: 0; }
.step-viewer .sv-fit { position: absolute; right: 14px; bottom: 14px; padding: 9px 14px; border: 1px solid var(--sv-line); border-radius: 999px; background: #fff; color: var(--sv-ink); font: 500 13px/1 "DM Sans", sans-serif; cursor: pointer; }
.step-viewer .sv-fit:hover { border-color: var(--sv-ink); }
.step-viewer .sv-fit[hidden] { display: none; }

/* footer: previous · copy · next */
.step-viewer .sv-foot { display: grid; grid-template-columns: 180px minmax(0, 1fr) 180px; align-items: center; gap: 28px; padding: 20px 28px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sv-line); background: var(--sv-paper); }
.step-viewer .sv-copy { max-width: 680px; margin: 0 auto; text-align: center; }
.step-viewer .sv-step { margin: 0 0 6px; font: 500 11px/1.4 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sv-muted); font-variant-numeric: tabular-nums; }
.step-viewer .sv-title { margin: 0 0 6px; font: 500 21px/1.3 "DM Sans", sans-serif; letter-spacing: -.01em; color: var(--sv-ink); }
.step-viewer .sv-text { margin: 0; font: 400 15px/1.65 "DM Sans", sans-serif; color: #4d5249; }
.step-viewer .sv-nav { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 22px; border: 1px solid var(--sv-line); border-radius: 999px; background: #fff; color: var(--sv-ink); font: 500 15px/1 "DM Sans", sans-serif; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.step-viewer .sv-nav svg { width: 20px; height: 20px; flex: none; }
.step-viewer .sv-nav:hover:not(:disabled) { border-color: var(--sv-ink); }
.step-viewer .sv-nav:disabled { opacity: .38; cursor: default; }
.step-viewer .sv-next { background: var(--sv-ink); border-color: var(--sv-ink); color: #f6f6f2; }
.step-viewer .sv-next:hover:not(:disabled) { background: #000; }
.step-viewer .sv-next.is-done svg { display: none; }
.step-viewer button:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 3px; }
.step-viewer .sv-next:focus-visible { outline-color: #6a7065; }
.step-viewer .sv-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }

/* phones: one hand on the part, one thumb on the screen */
@media (max-width: 700px) {
  .step-viewer .sv-top { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 8px 8px 8px 16px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .step-viewer .sv-bar { position: absolute; left: 0; right: 0; top: 0; gap: 2px; padding: 0; }
  .step-viewer .sv-bar span { flex: 1; width: auto; height: 3px; border-radius: 0; }
  .step-viewer .sv-kicker { display: none; }
  .step-viewer .sv-count { display: block; font-size: 15px; }
  .step-viewer .sv-foot { grid-template-columns: 1fr 1fr; grid-template-areas: "copy copy" "prev next"; gap: 14px 10px; padding: 16px 16px calc(14px + env(safe-area-inset-bottom)); }
  .step-viewer .sv-copy { grid-area: copy; text-align: left; margin: 0; max-height: 34vh; overflow-y: auto; }
  .step-viewer .sv-step { display: none; }
  .step-viewer .sv-title { font-size: 19px; }
  .step-viewer .sv-text { font-size: 15px; line-height: 1.6; }
  .step-viewer .sv-prev { grid-area: prev; }
  .step-viewer .sv-next { grid-area: next; }
  .step-viewer .sv-nav { width: 100%; min-height: 58px; padding: 0 14px; font-size: 16px; }
  .step-viewer .sv-hint { bottom: 10px; font-size: 11.5px; }
  .step-viewer .sv-fit { right: 10px; bottom: 10px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .step-viewer .sv-top { padding-top: 6px; padding-bottom: 6px; }
  .step-viewer .sv-close { width: 40px; height: 40px; }
  .step-viewer .sv-foot { grid-template-columns: 150px minmax(0, 1fr) 150px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); gap: 16px; }
  /* the whole sentence stays readable: the copy scrolls inside its own box */
  .step-viewer .sv-copy { max-height: 31vh; overflow-y: auto; overscroll-behavior: contain; }
  .step-viewer .sv-step { display: none; }
  .step-viewer .sv-title { font-size: 17px; margin-bottom: 2px; }
  .step-viewer .sv-text { font-size: 14px; line-height: 1.5; }
  .step-viewer .sv-nav { min-height: 46px; padding: 0 16px; }
  .step-viewer .sv-hint { top: 8px; bottom: auto; }
}

/* Start / Continue: one primary button above every list (Help: under the guide header) */
.sv-start-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 18px; }
.sv-start { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px 0 22px; border: 1px solid #1f241e; border-radius: 999px; background: #1f241e; color: #f6f6f2; font: 500 15px/1.2 "DM Sans", sans-serif; text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s; }
.sv-start svg { width: 18px; height: 18px; flex: none; }
.sv-start-meta::before { content: " · "; }
.sv-start-meta[hidden] { display: none; }
.sv-start:hover { background: #000; border-color: #000; }
.sv-start:focus-visible { outline: 2px solid #1f241e; outline-offset: 3px; }
.sv-start-over { padding: 4px 0; border: 0; background: none; color: #4d5249; font: 400 14px/1.4 "DM Sans", sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.sv-start-over:hover { color: #1f241e; }
.sv-start-over[hidden] { display: none; }
@media (max-width: 680px) {
  .sv-start-row { margin-bottom: 16px; }
  .sv-start { width: 100%; justify-content: space-between; min-height: 52px; font-size: 15.5px; }
  .sv-start { padding-top: 9px; padding-bottom: 9px; }
  .sv-start-text { display: grid; gap: 2px; }
  .sv-start-meta { font-size: 13px; font-weight: 400; color: #c9ccc4; }
  .sv-start-meta::before { content: none; }
}

/* Touch: an expand icon on every drawing says "tap to open" */
.install-steps.has-step-viewer .install-step-figure a { position: relative; }
.install-steps .sv-expand { display: none; }
@media (pointer: coarse) {
  .install-steps .sv-expand { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #d8dbd3; border-radius: 999px; background: rgba(251, 251, 248, .92); color: #1f241e; pointer-events: none; }
  .install-steps .sv-expand svg { width: 16px; height: 16px; }
}

/* Last step: where to go next */
.step-viewer .sv-end { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.step-viewer .sv-end[hidden] { display: none; }
.step-viewer .sv-end-link { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; border: 1px solid var(--sv-line); border-radius: 999px; background: #fff; color: var(--sv-ink); font: 500 13.5px/1 "DM Sans", sans-serif; text-decoration: none; transition: border-color .2s; }
.step-viewer .sv-end-link svg { width: 15px; height: 15px; flex: none; }
.step-viewer .sv-end-link:hover { border-color: var(--sv-ink); }
.step-viewer .sv-end-link.is-help { border-color: #b9bdb3; }
.step-viewer .sv-end-link:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
@media (max-width: 700px) { .step-viewer .sv-end { justify-content: flex-start; } }

/* "See it in 3D" (product pages, steps that match an installation stage) */
.step-viewer .sv-3d { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border: 1px solid var(--sv-line); border-radius: 999px; background: rgba(251, 251, 248, .94); color: var(--sv-ink); font: 500 13px/1 "DM Sans", sans-serif; cursor: pointer; transition: border-color .2s; }
.step-viewer .sv-3d svg { width: 17px; height: 17px; }
.step-viewer .sv-3d:hover { border-color: var(--sv-ink); }
.step-viewer .sv-3d[hidden] { display: none; }

@media print { .step-viewer, .sv-start-row, .install-steps .sv-expand { display: none !important; } }