/* Generated by scripts/build_assets.py; edit the sources, not this file. */
/* /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/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/qol-pages-v1.css */
/* Quality-of-life fixes for the smaller content pages (owner-approved 2026-10-06). Loaded last on About, Contact,
   Mission, Privacy and the 404 page; every rule is scoped to its page. */

/* Mission: one page edge (the nav's gutter) for hero, statement, pillars and call to action; a readable intro. */
.page-mission .statement-section { background: none; }
.page-mission .statement-body { max-width: 780px; border-top-color: rgba(255, 255, 255, .16); font-size: clamp(17px, 1.25vw, 19px); line-height: 1.8; color: rgba(242, 242, 240, .84); }
.page-mission .pillar-desc { color: rgba(242, 242, 240, .72); font-size: 15px; }
.page-mission .cta-section { border-top-color: rgba(255, 255, 255, .1); }
.page-mission .pillars-grid { border: 0; }

/* Privacy: the standard header and footer; the reading column sits on the light page surface under the nav. */
.page-privacy #main-content { padding-top: var(--nav-h, 76px); }
.page-privacy .privacy-reading { padding-top: clamp(40px, 6vw, 72px); }
.page-privacy .privacy-reading h1 { margin-top: 0; }
.page-privacy .privacy-end { margin-top: 48px; padding-top: 24px; border-top: 1px solid #cdd2c5; }
.page-privacy .privacy-end p { margin: 0 0 8px; }

/* Contact: every field has the same inner padding, border and radius as the inquiry select. */
.page-contact .form-group input,
.page-contact .form-group textarea,
.page-contact .form-group select {
  box-sizing: border-box; padding: 12px 14px; border: 1px solid #777; border-radius: 8px; background-color: #fafafa;
  font-size: 16px; line-height: 1.4; color: #151515;
}
.page-contact .form-group input:focus,
.page-contact .form-group textarea:focus,
.page-contact .form-group select:focus { border-color: #151515; box-shadow: 0 0 0 3px rgba(21, 21, 21, .08); outline: none; }
.page-contact .form-group input::placeholder,
.page-contact .form-group textarea::placeholder { font-size: 15px; color: rgba(0, 0, 0, .42); }
.page-contact .form-group textarea { min-height: 140px; }

/* About: the product render in "A closer look" sits on a neutral panel graded to match its own studio background (no white strips). */
.page-about .about-photo-card .about-product-photo { object-fit: contain; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .02)), linear-gradient(90deg, #f7f7f7, #f1f1f1); }

/* 404: inline search (site-search-v2.js) and a way into Help's product picker. */
.page-404 .recovery-search { margin: 32px 0 8px; }
.page-404 .recovery-search .site-search-results:empty { display: none; }
.page-404 .recovery-guide {
  display: inline-flex; flex-direction: column; gap: 4px; margin: 20px 0 4px; padding: 14px 20px; border: 1px solid #d0d4c9;
  border-radius: 12px; background: #faf9f6; text-decoration: none; transition: border-color .2s, box-shadow .2s;
}
.page-404 .recovery-guide:hover { border-color: #151515; box-shadow: 0 10px 26px rgba(0, 0, 0, .06); }
.page-404 .recovery-guide-kicker { font: 500 10.5px/1.3 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6b675f; }
.page-404 .recovery-guide-label { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1.3 'DM Sans', sans-serif; color: #151515; }
.page-404 .recovery-guide-label .ui-arrow { width: 16px; height: 16px; }

/* Contact (owner-approved 2026-10-06): a quiet "Already have your part? Setup guides" line above the form, and
   the prefilled design box links to the design's page and its setup guide (product-inquiry-v2.js). */
.page-contact .contact-setup-note { margin: 0 0 22px; font: 400 14px/1.6 'DM Sans', sans-serif; color: #5f5d58; }
.page-contact .contact-setup-note a { display: inline-flex; align-items: center; gap: 2px; color: #151515; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(21, 21, 21, .3); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.page-contact .contact-setup-note a:hover { text-decoration-color: #151515; }
.page-contact .inquiry-design-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; }
.page-contact .inquiry-design-links a { display: inline-flex; align-items: center; gap: 2px; }

/* Mission (owner-approved 2026-10-06): each pillar word links to its proof ([creations], Workbench, YouTube) with a
   small caption under the word; colour-only hover, no lift. */
.page-mission .pillar-link { display: inline-block; color: inherit; text-decoration: none; }
.page-mission .pillar-link em { transition: color .2s; }
.page-mission .pillar-proof { display: flex; align-items: center; gap: 2px; margin-top: 14px; font: 500 13.5px/1.3 'DM Sans', sans-serif; font-style: normal; letter-spacing: .01em; color: #b4b4ae; text-decoration: underline; text-decoration-color: rgba(180, 180, 174, .35); text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s; }
.page-mission .pillar-link:hover em { color: #fff; }
.page-mission .pillar-link:hover .pillar-proof { color: #f2f2f0; text-decoration-color: currentColor; }
.page-mission .pillar-link:focus-visible { outline: 1px solid #f2f2f0; outline-offset: 6px; }

/* ---------------------------------------------------------------------------------------------------------------
   Secondary-page fixes (2026-10-09).
   One column edge: every section of About, Contact, Mission, Privacy and the 404 page starts on the nav gutter, and
   from 1464 px the content (hero included) sits in one centred 1320 px column, the same rule as the Workbench hero
   and the Help hero. Before, heroes used the gutter while the content below was centred at 1000-1200 px, so the two
   edges disagreed by 50-260 px on desktop. */
.page-about, .page-contact, .page-mission, .page-privacy, .page-404 {
  --pc-edge: max(var(--page-gutter, 24px), calc((100% - 1320px) / 2));
}
.page-about #main-content > *,
.page-contact #main-content > *,
.page-mission #main-content > * { padding-left: var(--pc-edge) !important; padding-right: var(--pc-edge) !important; }

/* About: inner blocks fill the column instead of re-centring at their own widths. */
.page-about .founder-inner,
.page-about .story-grid,
.page-about .about-section-head,
.page-about .journey-years,
.page-about .journey-track,
.page-about .about-photo-grid,
.page-about .about-shop-note { max-width: none; margin-left: 0; margin-right: 0; }
/* The opening paragraphs share the founder profile's two columns, so both text columns start on one line. */
.page-about .story-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.page-about .story-body { max-width: 62ch; }
.page-about .story-stat { padding-top: calc(2rem + 1px); }
.page-about .about-closing h2 { text-wrap: balance; }
@media (max-width: 760px) { .page-about .story-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Mission: one continuous charcoal surface (the hero was #171717 on top of the body gradient, so a seam showed under
   it and between sections); rules stay inside the column; tighter two-line statement. */
.page-mission #main-content { background: #151515; }
.page-mission .mission-hero { background: none; }
.page-mission .mission-hero::before { display: none; }
.page-mission .statement-section, .page-mission .pillars-section, .page-mission .cta-section { border-top: 0; }
.page-mission .cta-section { position: relative; }
.page-mission .cta-section::before { content: ''; position: absolute; top: 0; left: var(--pc-edge); right: var(--pc-edge); height: 1px; background: rgba(255, 255, 255, .12); }
.page-mission .mission-hero h1 { line-height: 1; }
.page-mission .pillars-kicker { font-size: .66rem; letter-spacing: .25em; text-transform: uppercase; color: #b4b4ae; font-weight: 400; margin-bottom: .8rem; }
.page-mission .pillars-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; color: #f2f2f0; line-height: 1.1; text-wrap: balance; }

/* Contact: the inquiry select matches the text fields (same inset and size, a drawn chevron instead of the
   platform arrow, which sat at a different inset on every browser). */
.page-contact .form-group select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; font-size: 16px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' stroke='%23151515' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;
}
.page-contact .form-group select:invalid { color: rgba(0, 0, 0, .42); }
.page-contact .form-group select option { color: #151515; }

/* 404: the inline search took the phone search sheet's 100dvh height (an empty 800 px panel under one line of
   results); it stays a normal box on the page. Content starts on the column edge. */
.page-404 .site-search-inline { width: 100%; max-width: 640px; height: auto; max-height: none; border: 1px solid #d7d4ce; border-radius: 14px; }
.page-404 .recovery-simple { max-width: none; margin: 0; padding-left: var(--pc-edge); padding-right: var(--pc-edge); }
.page-404 .recovery-simple nav { max-width: 640px; }

/* Privacy: every topic is its own section with the same rule and spacing. */
.page-privacy .privacy-reading .panel { margin-top: 40px; padding-top: 36px; }
.page-privacy .privacy-reading .panel > h2 + p { margin-top: 0; }
.page-privacy .privacy-reading .panel > p + h2 { margin-top: 36px; }
.page-privacy .privacy-reading h1 { text-wrap: balance; }
.page-privacy .privacy-questions { margin-top: 40px; }
.page-about .story-sticky { position: static; align-self: start; }
.page-about .nowrap { white-space: nowrap; }
/* /assets/css/qol-pages-v2.css */
/* Secondary pages, quality of life (2026-10-09). Loaded after qol-pages-v1.css on About, Contact, Mission, Privacy
   and the 404 page; every rule is scoped to its page. Reuses existing site patterns: the homepage hero's frosted
   chapter tiles (home-refresh-v1.css), the 404 setup-guide card, and the product-page "On this page" index.
   Hovers change border, glow or colour only. */

/* About: three frosted chapter tiles in the hero (same tile, border, blur and round arrow as the homepage hero),
   leading to the founder profile, the timeline and the workshop. */
.page-about .about-chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 4vw, 48px); }
.page-about .about-chapters a {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 76px;
  padding: 16px 76px 16px 22px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 14px; background: rgba(24, 26, 29, .52);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  color: #fff; text-decoration: none; transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.page-about .about-chapters a:hover { background: rgba(44, 47, 52, .66); border-color: rgba(255, 255, 255, .62); box-shadow: 0 10px 30px rgba(0, 0, 0, .28), 0 0 0 3px rgba(214, 228, 242, .14); }
.page-about .about-chapters a:focus-visible { outline: 2px solid #f2f2f0; outline-offset: 3px; }
.page-about .about-chapter-kicker { font: 500 11px/1.3 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #c9d1d8; }
.page-about .about-chapter-label { font: 500 17px/1.25 'DM Sans', sans-serif; letter-spacing: -.005em; color: #fff; }
.page-about .about-chapter-label .ui-arrow {
  position: absolute; right: 20px; top: 50%; width: 38px; height: 38px; padding: 10px; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; transform: translateY(-50%); transition: background-color .25s, border-color .25s;
}
.page-about .about-chapters a:hover .ui-arrow { background: rgba(255, 255, 255, .12); border-color: #fff; }
.page-about #chapters, .page-about #workshop { scroll-margin-top: 84px; }
@media (max-width: 760px) {
  .page-about .about-chapters { grid-template-columns: 1fr; gap: 8px; margin-top: 28px; }
  .page-about .about-chapters a { min-height: 60px; padding: 12px 64px 12px 16px; gap: 3px; }
  .page-about .about-chapter-kicker { font-size: 10px; }
  .page-about .about-chapter-label { font-size: 15px; }
  .page-about .about-chapter-label .ui-arrow { right: 14px; width: 34px; height: 34px; padding: 9px; }
}

/* Contact: Copy beside the email address (product-inquiry-v4.js); it wraps under the address in narrow columns. */
.page-contact .contact-detail-value:has(.contact-copy) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.page-contact .contact-copy {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px;
  border: 1px solid #cfd0ca; border-radius: 999px; background: #faf9f6; color: #3d3d3a; cursor: pointer;
  font: 500 12px/1.2 'DM Sans', sans-serif; letter-spacing: .02em; transition: border-color .2s, color .2s, background-color .2s;
}
.page-contact .contact-copy svg { width: 14px; height: 14px; }
.page-contact .contact-copy:hover { border-color: #151515; color: #151515; }
.page-contact .contact-copy.is-copied { border-color: #151515; background: #151515; color: #f4f3ef; }
.page-contact .contact-copy:focus-visible { outline: 2px solid #151515; outline-offset: 2px; }

/* Contact: "Quicker answers" in the side column, as the 404 page's setup-guide cards. */
.page-contact .contact-quick { display: grid; gap: 10px; margin-top: 8px; padding-top: 28px; border-top: 1px solid rgba(0, 0, 0, .1); }
.page-contact .contact-quick .contact-detail-label { margin: 0 0 4px; font-weight: 400; }
.page-contact .contact-quick a {
  display: flex; flex-direction: column; gap: 4px; padding: 13px 18px; border: 1px solid #d0d4c9; border-radius: 12px; background: #faf9f6;
  color: #151515; text-decoration: none; transition: border-color .2s, box-shadow .2s;
}
.page-contact .contact-quick a:hover { border-color: #151515; box-shadow: 0 10px 26px rgba(0, 0, 0, .06); }
.page-contact .contact-quick a:focus-visible { outline: 2px solid #151515; outline-offset: 2px; }
.page-contact .contact-quick-kicker { font: 500 10.5px/1.3 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6b675f; }
.page-contact .contact-quick-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 15px/1.35 'DM Sans', sans-serif; }
.page-contact .contact-quick-label .ui-arrow { width: 16px; height: 16px; flex: none; }

/* Contact: the prefilled design box (product-inquiry-v4.js) as a small card with the design's [creations] picture. */
.page-contact .inquiry-design-reference { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; padding: 14px 18px; border: 1px solid #d0d4c9; border-radius: 14px; background: #faf9f6; }
.page-contact .inquiry-design-reference.has-image { grid-template-columns: 88px minmax(0, 1fr); padding: 12px 18px 12px 12px; }
.page-contact .inquiry-design-image { display: block; width: 88px; height: 88px; object-fit: contain; border-radius: 10px; background: #f6f6f5; }
.page-contact .inquiry-design-reference .section-label { margin: 0 0 4px; font: 500 10.5px/1.3 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6b675f; }
.page-contact .inquiry-design-text > p:nth-child(2) { margin: 0 0 6px; font: 500 16px/1.35 'DM Sans', sans-serif; color: #151515; }
.page-contact .inquiry-design-text .inquiry-design-links { margin: 0; }

/* Privacy: "On this page" contents. Phones/tablets: a compact numbered list under the introduction. From 1200 px:
   a sticky index in the left column beside the reading column (the product pages' "On this page" look). */
.page-privacy .privacy-toc { margin: 8px 0 8px; padding: 18px 20px 14px; border: 1px solid #d0d4c9; border-radius: 14px; background: #faf9f6; }
.page-privacy .privacy-toc-title { margin: 0 0 8px !important; font: 500 10.5px/1.3 'DM Sans', sans-serif !important; letter-spacing: .14em; text-transform: uppercase; color: #6b675f; }
.page-privacy .privacy-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: ptoc; }
.page-privacy .privacy-toc li { counter-increment: ptoc; border-top: 1px solid #e3e5de; }
.page-privacy .privacy-toc li:first-child { border-top: 0; }
.page-privacy .privacy-toc a { display: flex; gap: 12px; padding: 9px 0; font: 400 14.5px/1.4 'DM Sans', sans-serif; color: #343830; text-decoration: none; transition: color .2s; }
.page-privacy .privacy-toc a::before { content: counter(ptoc, decimal-leading-zero); min-width: 20px; font-variant-numeric: tabular-nums; color: #8a8d84; }
.page-privacy .privacy-toc a:hover { color: #000; text-decoration: underline; text-underline-offset: 4px; }
.page-privacy .privacy-reading .panel { scroll-margin-top: 92px; }
@media (min-width: 1200px) {
  .page-privacy .privacy-reading {
    display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 712px) minmax(0, 1fr); column-gap: 48px; align-content: start;
    max-width: none; margin: 0; padding-left: var(--pc-edge); padding-right: var(--pc-edge);
  }
  .page-privacy .privacy-reading > * { grid-column: 2; }
  .page-privacy .privacy-reading > .privacy-toc { grid-column: 1; grid-row: 1 / span 40; align-self: stretch; max-width: 220px; margin: 0; padding: 14px 0 0; border: 0; border-radius: 0; background: none; }
  .page-privacy .privacy-toc-inner { position: sticky; top: 104px; }
  .page-privacy .privacy-toc li { border-top: 0; }
  .page-privacy .privacy-toc a { padding: 6px 0; font-size: 13.5px; color: #5d6058; }
}

/* Partner links (owner 2026-10-10: Work with us must be easy to find): About's hero has a fourth tile (2 x 2 on
   tablets), Contact links it in the hero line, above the form and first in Quicker answers. */
@media (min-width: 1101px) { .page-about .about-chapters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1100px) { .page-about .about-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Fifth tile, Old tech (2026-10-10): five across on desktop; on tablets it takes the full last row. */
@media (min-width: 1101px) { .page-about .about-chapters { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1100px) { .page-about .about-chapters a:nth-child(5):last-child { grid-column: 1 / -1; } }
.page-contact .contact-hero-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px; }
.page-contact .contact-hero-link:hover { text-decoration-color: currentColor; }
.page-contact .contact-partner-note { margin-bottom: 6px; }

/* Privacy on phones (owner 2026-10-11): privacy-v1.js folds each section like a Help question; the folded headings
   replace the "On this page" box. */
@media (max-width: 760px) {
  .page-privacy .privacy-reading.is-folding > .privacy-toc { display: none; }
  .page-privacy .privacy-reading.is-folding .panel { margin-top: 0; padding: 0; }
  .page-privacy .privacy-reading.is-folding > .panel:first-of-type { margin-top: 28px; }
  .page-privacy .privacy-reading.is-folding .panel:last-of-type { border-bottom: 1px solid #cdd2c5; }
  .page-privacy .privacy-reading.is-folding .panel > h2 { margin: 0; font-size: 20px; }
  .page-privacy .privacy-fold { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 64px; padding: 16px 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
  .page-privacy .privacy-fold:focus-visible { outline: 2px solid #777; outline-offset: 3px; }
  .page-privacy .privacy-plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
  .page-privacy .privacy-plus::before, .page-privacy .privacy-plus::after { content: ''; position: absolute; left: 1px; top: 7px; width: 14px; height: 1.5px; background: currentColor; }
  .page-privacy .privacy-plus::after { transform: rotate(90deg); }
  .page-privacy .panel.is-open .privacy-plus::after { display: none; }
  .page-privacy .privacy-fold-body { padding: 0 0 10px; }
}


/* Link buttons on Contact and 404 (owner 2026-10-11): the cards, the way-back links and Send message use the
   filled circle with the arrow cut out (up-right to another page, right to send), like site-refresh-v1.css. */
.page-contact .contact-quick a, .page-404 .recovery-guide { position: relative; padding-right: 60px; }
.page-contact .contact-quick a .ui-arrow, .page-404 .recovery-guide .ui-arrow { display: none; }
.page-contact .contact-quick a::after, .page-404 .recovery-guide::after { content:"";position:absolute;top:50%;right:14px;width:30px;height:30px;translate:0 -50%;border-radius:50%;background:currentColor;-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; color: #151515; }
.page-contact .contact-form .btn-submit { position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 12px 56px 12px 22px; border-radius: 12px; text-transform: none; letter-spacing: 0; font: 500 15px/1.2 'DM Sans', sans-serif; }
.page-contact .contact-form .btn-submit::after { content:"";position:absolute;top:50%;right:7px;width:32px;height:32px;translate:0 -50%;border-radius:50%;background:currentColor;-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='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") 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='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") center/100% 100% no-repeat; }
.page-404 .recovery-simple nav { gap: 10px; padding: 24px 0; }
.page-404 .recovery-simple nav a { position: relative; display: inline-flex; align-items: center; min-height: 46px; box-sizing: border-box; padding: 12px 54px 12px 18px; border: 1px solid color-mix(in srgb, currentColor 34%, transparent); border-radius: 12px; background: color-mix(in srgb, currentColor 6%, transparent); font: 500 14px/1.2 'DM Sans', sans-serif; text-decoration: none; transition: border-color .2s; }
.page-404 .recovery-simple nav a:hover { border-color: currentColor; }
.page-404 .recovery-simple nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.page-404 .recovery-simple nav a::after { content:"";position:absolute;top:50%;right:7px;width:32px;height:32px;translate:0 -50%;border-radius:50%;background:currentColor;-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; }

/* 404 on phones: recovery-v1.js keeps the first five search results and adds "Show all N results". */
.page-404 .recovery-search .is-extra { display: none !important; }
.page-404 .recovery-more-row { list-style: none; padding: 6px 8px 8px; }
.page-404 .recovery-more { width: 100%; min-height: 44px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 12px; background: none; color: #151515; font: 500 14px/1.2 'DM Sans', sans-serif; cursor: pointer; }
.page-404 .recovery-more:hover { border-color: #151515; }
.page-404 .recovery-more:focus-visible { outline: 2px solid #151515; outline-offset: 2px; }

/* Contact on phones: Quicker answers come before the form, so order questions find their answer first. */
@media (max-width: 760px) {
  .page-contact .contact-grid { display: flex; flex-direction: column; gap: 0; }
  .page-contact .contact-grid > div:first-child { width: 100%; margin-bottom: 48px; }
  .page-contact .contact-info { display: contents; }
  .page-contact .contact-quick { order: -1; margin: 0 0 40px; padding-top: 0; border-top: 0; }
  .page-contact .contact-info > h2 { margin-top: 16px; }
}