:root{--ink:#1C1B18;--ink2:#565656;--ink3:#6E6E6E;--paper:#FFFFFF;--white:#FFFFFF;--surface:#F6F6F6;--warm:#F4F4F4;--border:rgba(28, 27, 24, .1);--border2:rgba(28, 27, 24, .18);--action-border:#1C1B18;--gold:#FFBA08;--gold-text:#9C6300;--make:#39B54A;--learn:#5271FF;--error:#B42318;--accent-display:#BF7F00;--shop-display:#BF7F00;--make-display:#319C40;--learn-display:#5271FF;--sans:Manrope, Arial, sans-serif;--heading:Bricolage, Arial, sans-serif;--mono:Manrope, Arial, sans-serif;--money:Manrope, Arial, sans-serif;--text-body:16px;--text-small:14px;--text-label:18px;--field-label:14px;--text-min:12px;--purchase-step-size:24px;--price-size:28px;--card-radius:26px;--field-radius:12px;--button-radius:999px;--control-height:44px;--card-inset:16px;--space-section:48px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--stack-tight:8px;--stack:12px;--gap:16px;--action-gap:24px;--section-gap:48px;--inset:16px}
@media(min-width:821px){:root{--section-gap:64px;--inset:24px}}
/* Shared identity across the studio, product, maker and learning templates. */
@font-face{font-family:Bricolage;src:url('/fonts/bricolage-grotesque-latin-standard-normal.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/manrope-latin-wght-normal.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Caveat;src:url('/fonts/caveat-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
:root{--gold:#FFBA08;--sans:Manrope,Arial,sans-serif;--heading:Bricolage,Arial,sans-serif;--serif:Caveat,cursive;--ring-rgb:255 186 8}
[data-site-area=make],[data-accent-area=make]{--gold:var(--make);--accent-display:var(--make-display);--ring-rgb:57 181 74}
[data-site-area=learn],[data-accent-area=learn]{--gold:var(--learn);--accent-display:var(--learn-display);--ring-rgb:82 113 255}
body{font-family:var(--sans)}
h1,h2,h3{font-family:var(--heading)}
h1 em,h2 em,h3 em,.handwritten{font-family:Caveat,cursive;font-style:normal;font-weight:600}
.nav-logo,.studio-logo,.footer-logo{display:block;flex-shrink:0;line-height:1;text-decoration:none!important}
.brand-logo{position:relative;display:block;width:160px;height:86.62px;overflow:hidden}
/* PNG content bounds: (184,116)–(1719,947) within 1920×1080. Trim only transparent margins. */
.brand-logo img{position:absolute;display:block;max-width:none!important;width:125.081434%!important;height:129.963899%!important;left:-11.986971%!important;top:-13.959086%!important;object-fit:fill!important}
/* Navigation always uses the studio's gold, with a single underline. */
.main-nav>a,.nav-links>li>a:not(.nav-cta):not(.lang-switch),.nav-prod-links>a:not(.nav-back):not(.lang-switch),.studio-header nav>a{position:relative;font-family:Manrope,Arial,sans-serif!important;font-weight:500;letter-spacing:0;text-transform:none;text-decoration:none!important;padding-top:8px;padding-bottom:8px}
.main-nav>a::after,.nav-links>li>a:not(.nav-cta):not(.lang-switch)::after,.nav-prod-links>a:not(.nav-back):not(.lang-switch)::after,.studio-header nav>a::after{content:'';position:absolute;left:0;bottom:3px;width:100%;height:2px;background:#FFBA08;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.main-nav>a:hover::after,.main-nav>a:focus-visible::after,.main-nav>a[aria-current]::after,.nav-links>li>a:hover::after,.nav-links>li>a:focus-visible::after,.nav-prod-links>a:hover::after,.nav-prod-links>a:focus-visible::after,.studio-header nav>a:hover::after,.studio-header nav>a:focus-visible::after{transform:scaleX(1)}
.main-nav>a:hover,.nav-links a:hover,.nav-prod-links a:hover{color:var(--ink)}
.nav-order,.nav-cta,.nav-back,.btn,.btn-gold,.btn-dark,.btn-outline{font-family:var(--heading);border-radius:999px;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.nav-order:hover,.nav-cta:hover,.nav-back:hover,.btn:hover,.btn-gold:hover,.btn-dark:hover,.btn-outline:hover{background:var(--gold);color:#111;box-shadow:0 5px 0 #111;transform:translateY(-3px)}
.path-label{display:block;font:600 48px/1.1 Caveat,cursive;color:var(--gold);margin-top:16px}
.image-path h3{margin-top:8px}
.ttc-cart-btn,.ttc-cart-checkout{background:var(--gold)!important}.ttc-cart-badge{color:var(--gold)!important}
[data-site-area=shop] .hero-h1,[data-site-area=learn] .lh-h1{font-family:var(--heading);font-weight:500}
[data-site-area=shop] .hero-h1 em,[data-site-area=learn] .lh-h1 em{font-family:Caveat,cursive;font-style:normal;font-weight:600}
@keyframes brand-arrow-bounce{from{transform:translate(0,0)}to{transform:translate(2px,-2px)}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.btn:hover>.button-arrow,.btn-gold:hover>.button-arrow,.nav-order:hover>.button-arrow,.nav-cta:hover>.button-arrow{animation:brand-arrow-bounce 550ms cubic-bezier(.45,0,.55,1) infinite alternate}}
@media(max-width:760px){.nav-logo .brand-logo,.studio-logo .brand-logo,.footer-logo .brand-logo{width:132px;height:71.46px}.path-label{font-size:42px}}
@media(prefers-reduced-motion:reduce){.main-nav>a::after,.nav-links a::after,.nav-prod-links a::after,.studio-header nav>a::after{transition:none}.btn,.btn-gold,.nav-order,.nav-cta,.nav-back{transition:none}.button-arrow{animation:none!important}}
/* Keep legacy decorative bleeds inside the viewport; carousels still scroll. */
html{overflow-x:clip}
.nav-order,.nav-cta,.nav-back{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}
.hero-img-frame,.prod-img-main{border-radius:26px}

[data-site-area=make] .page-intro h1 em,[data-site-area=make] .tool-intro h1 em,[data-site-area=learn] h1 em{color:var(--gold)}
[data-site-area=make] .tabs button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#111}

/* Full supplied logo lockup, including its symbol, at each breakpoint. */
.wordmark .brand-logo{width:160px;height:86.62px}
@media(max-width:760px){.wordmark .brand-logo{width:132px;height:71.46px}}
[data-site-area=make] .button[data-added=true]{background:#39B54A;color:#111;border-color:#111}
.model-card .button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
/* Product names and instructions stay in readable sans-serif type. */
[data-site-area=shop] .prod-name{font-family:var(--heading);font-weight:500;font-style:normal}
[data-site-area=shop] .prod-dims h4,[data-site-area=shop] .prod-section h4{font-family:var(--sans)}
[data-site-area=make] .small a,[data-site-area=make] .download-note a{color:#216B2B}
[data-site-area=learn] .lh-bullets{color:#263DAD}
[data-site-area=learn] .lh-hero>*{min-width:0}
[data-site-area=learn] .lh-ctas{flex-wrap:wrap}
[data-site-area=learn] .lh-ctas .btn{max-width:100%;white-space:normal;text-align:center;min-height:44px}
/* Caveat's letterforms sit lower than Bricolage at the same nominal size.
   Match their perceived size while keeping each heading's responsive scale. */
h1 em,h2 em,h3 em,.hero-h1 em,.lh-h1 em,.lh-h2 em{font-size:1.22em!important;line-height:.95}
.studio-hero h1 em{font-size:1.08em!important}
/* Shared sticky headers, larger navigation, and handwritten accents. */
body{overflow-x:clip!important}
/* Open dropdowns lock scrolling with overflow:hidden on body. Because html clips
   overflow, that would make body a scroll container and unstick the header;
   clip locks the same without one (the dropdown still blocks touch and wheel scroll). */
html body[data-scroll-locked]{overflow:clip!important}
.masthead,.studio-header,body>nav{position:sticky!important;top:0!important;z-index:300!important;background:#fff!important}
.masthead{max-width:none;padding-left:4%;padding-right:4%}
.main-nav,.nav-links,.nav-prod-links{font-size:16px!important}
.main-nav>a,.nav-links>li>a,.nav-prod-links>a,.shop-menu [data-slot=navigation-menu-trigger]{font-size:16px!important}
/* Handwriting is large text: the readable display shade on light surfaces, the bright accent on dark ones. */
body [data-handwriting][data-handwriting]{font-size:calc(var(--handwriting-size)*1.15)!important;color:var(--accent-display)!important}
body [data-handwriting=on-dark][data-handwriting=on-dark]{color:var(--gold)!important}
.studio-menu-toggle{display:none}
.unified-site-footer{padding:var(--section-gap) 5%!important;margin:0 auto;background:#fff!important;border-top:1px solid var(--line);color:var(--ink)}
.site-footer-inner{max-width:1420px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:35px}
.site-footer-menu{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;font:500 16px/1.5 var(--sans);position:static!important;background:none!important;padding:0!important;border:0!important}
.site-footer-menu a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--gold)}
.unified-site-footer .footer-biz{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:28px}
.image-paths{align-items:stretch!important;gap:24px!important}
.image-path{border:1px solid var(--line);border-radius:26px;padding:16px!important;margin:0!important;display:flex;flex-direction:column;background:#fff;min-width:0;transition:transform .3s ease,box-shadow .3s ease}
.image-path .path-image{flex-shrink:0}
.image-path .path-cta{align-self:flex-start;margin-top:auto}
.image-path h3{margin-bottom:24px}
.image-path:hover{transform:translateY(-5px);box-shadow:0 14px 32px #0000000c}
.image-path .path-image{aspect-ratio:1.15!important;border-radius:18px}
.image-path p{margin-bottom:10px}.image-path .path-label{margin-top:20px}
@keyframes menu-pill-pop{from{opacity:0;transform:translateY(-12px) scale(.86)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:1100px){.main-nav,.nav-links,.nav-prod-links{gap:12px!important}.main-nav>a,.nav-links>li>a,.nav-prod-links>a,.shop-menu [data-slot=navigation-menu-trigger]{font-size:16px!important}}
@media(max-width:1100px){
 .masthead{display:flex;flex-wrap:nowrap!important;gap:10px;padding:14px 4%!important;align-items:center}
 .masthead .utility{margin-left:auto;gap:10px}.masthead .utility>a:first-child{display:none}
 .masthead .utility .pill{font-size:12px;padding:11px 14px}
 .studio-menu-toggle,.nav-burger,.nav-prod-burger{display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:5px;position:relative;width:44px;height:44px;border:1px solid var(--line)!important;border-radius:999px;background:white!important;padding:10px!important;flex-shrink:0;cursor:pointer}
 .studio-menu-toggle span,.nav-burger span,.nav-prod-burger span{display:block!important;width:21px!important;height:2px!important;background:#111!important;transition:transform .25s ease,opacity .2s ease}
 .studio-menu-toggle[aria-expanded=true] span:nth-child(1),.nav-burger[aria-expanded=true] span:nth-child(1),.nav-prod-burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .studio-menu-toggle[aria-expanded=true] span:nth-child(2),.nav-burger[aria-expanded=true] span:nth-child(2),.nav-prod-burger[aria-expanded=true] span:nth-child(2){opacity:0}
 .studio-menu-toggle[aria-expanded=true] span:nth-child(3),.nav-burger[aria-expanded=true] span:nth-child(3),.nav-prod-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 #studioNav,#navLinks,#navProdLinks{display:none!important;position:absolute!important;top:calc(100% + 12px)!important;left:auto!important;right:4%!important;width:min(360px,92vw)!important;max-height:calc(100dvh - 110px);overflow:auto;padding:12px!important;margin:0!important;background:#fff!important;border:1px solid var(--line);border-radius:28px!important;box-shadow:0 20px 60px #0002;flex-direction:column!important;gap:10px!important;z-index:302}
 #studioNav.open,#navLinks.open,#navProdLinks.open{display:flex!important}
 #studioNav>a,#studioNav>[data-shop-menu],#navLinks>li,#navLinks>a,#navProdLinks>a,#navProdLinks>.nav-region{display:block;width:100%;margin:0;border:0;padding:0}
 #studioNav>a,#navLinks>li>a,#navLinks>a,#navProdLinks>a{display:flex;justify-content:center;align-items:center;border:1px solid var(--line);border-radius:999px;padding:14px 20px!important;font:500 22px/1.2 var(--sans)!important;text-transform:none;letter-spacing:0;min-height:52px}
 #studioNav [data-slot=navigation-menu-trigger],#navLinks [data-slot=navigation-menu-trigger]{font-size:22px!important;justify-content:center;width:100%;padding:14px 20px;border:1px solid var(--line);border-radius:999px}
 #studioNav .shop-menu,#studioNav [data-slot=navigation-menu-list],#studioNav [data-slot=navigation-menu-item],#navLinks .shop-menu,#navLinks [data-slot=navigation-menu-list],#navLinks [data-slot=navigation-menu-item]{width:100%}
 #studioNav .shop-menu-content,#navLinks .shop-menu-content{position:static;min-width:0;margin-top:8px;border-radius:26px}
 #studioNav.open:not(.ttc-closing)>*,#navLinks.open:not(.ttc-closing)>*,#navProdLinks.open:not(.ttc-closing)>*{animation:menu-pill-pop .42s cubic-bezier(.2,1.35,.35,1) both;animation-delay:calc(var(--menu-index,0)*45ms)}
 #studioNav>*:nth-child(2),#navLinks>*:nth-child(2),#navProdLinks>*:nth-child(2){--menu-index:1}
 #studioNav>*:nth-child(3),#navLinks>*:nth-child(3),#navProdLinks>*:nth-child(3){--menu-index:2}
 #studioNav>*:nth-child(4),#navLinks>*:nth-child(4),#navProdLinks>*:nth-child(4){--menu-index:3}
 #studioNav>*:nth-child(5),#navLinks>*:nth-child(5),#navProdLinks>*:nth-child(5){--menu-index:4}
 #studioNav>*:nth-child(6),#navLinks>*:nth-child(6),#navProdLinks>*:nth-child(6){--menu-index:5}
 #studioNav>*:nth-child(7),#navLinks>*:nth-child(7),#navProdLinks>*:nth-child(7){--menu-index:6}
 .site-footer-inner{flex-direction:column;align-items:flex-start}.site-footer-menu{gap:18px 24px;font-size:16px}
 .nav-order{margin-left:auto}
}
@media(max-width:380px){.masthead .utility .pill{font-size:12px;padding:10px}.masthead{gap:6px}}
@media(prefers-reduced-motion:reduce){#studioNav.open>*,#navLinks.open>*,#navProdLinks.open>*{animation:none!important}.studio-menu-toggle span,.nav-burger span,.nav-prod-burger span,.image-path{transition:none}}
/* Studio header structure also applies to workshop and tool templates. */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.masthead .main-nav{display:flex;align-items:center;gap:26px}
.masthead .utility{display:flex;align-items:center;gap:16px;font:500 14px/1.3 var(--sans)}
.masthead .pill{display:inline-flex;align-items:center;justify-content:center;background:#111;color:#fff;border:1px solid #111;border-radius:999px;padding:12px 18px;font:500 14px/1.3 var(--sans);text-decoration:none}
@media(max-width:1100px){.masthead{gap:10px}.masthead .utility{gap:10px}.masthead .pill{font-size:12px;padding:11px 14px}}
@media(max-width:380px){.masthead{gap:6px}.masthead .utility .pill{max-width:100px;font-size:12px;padding:8px 10px;white-space:normal;text-align:center}}
.product-line,.nav-links a.product-line{font-size:16px!important}
:target{scroll-margin-top:110px}
@media(max-width:1100px){.product-line,.nav-links a.product-line{font-size:18px!important}}
/* A shared control height keeps the cart circular alongside the header pills. */
body{--header-control-size:44px}
.ttc-cart-btn{position:relative;width:var(--header-control-size)!important;height:var(--header-control-size)!important;min-width:var(--header-control-size);padding:4px!important;justify-content:center;box-sizing:border-box}
.ttc-cart-ico{width:100%!important;height:100%!important}
.ttc-cart-badge{position:absolute;top:-7px;right:-8px;min-width:20px!important;height:20px!important;line-height:20px!important;padding:0 5px!important;font-size:12px!important;margin:0!important}
.masthead .utility .pill{height:var(--header-control-size);box-sizing:border-box}
.destination-icon{width:20px;height:20px;flex-shrink:0;vertical-align:middle}
.main-nav>a,.nav-links>li>a,.nav-prod-links>a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
@media(max-width:1280px) and (min-width:1101px){.masthead{gap:14px}.masthead .main-nav{gap:12px}.masthead .utility{gap:10px}.masthead .utility>a:first-child{display:none}.nav-links,.nav-prod-links{gap:8px!important}.nav-links>li>a,.nav-prod-links>a{font-size:14px!important;gap:5px}.destination-icon{width:17px;height:17px}}
@media(max-width:1100px){
 .masthead>.wordmark,.masthead>.utility,.masthead>.studio-menu-toggle,body>nav>.nav-logo,body>nav>.nav-order,body>nav>.ttc-nav-right,body>nav>.nav-burger{position:relative;z-index:304}
 #studioNav,#navLinks,#navProdLinks{top:100%!important;left:0!important;right:0!important;width:100%!important;padding:18px 5% 28px!important;border:0!important;border-radius:0 0 28px 28px!important;box-shadow:0 18px 30px #00000012;gap:4px!important;overscroll-behavior:contain;transform-origin:top}
 #studioNav.open:not(.ttc-closing)>*,#navLinks.open:not(.ttc-closing)>*,#navProdLinks.open:not(.ttc-closing)>*{animation:none!important}
 #studioNav>a,#navLinks>li>a,#navLinks>a,#navProdLinks>a,#studioNav [data-slot=navigation-menu-trigger],#navLinks [data-slot=navigation-menu-trigger]{justify-content:flex-start!important;border:0!important;border-radius:12px!important;padding:14px 16px!important;gap:14px!important;background:transparent;min-height:56px}
 #studioNav>a:hover,#navLinks>li>a:hover,#navProdLinks>a:hover{background:rgb(var(--ring-rgb) / .12)}
 #studioNav .destination-icon,#navLinks .destination-icon,#navProdLinks .destination-icon{width:24px;height:24px}
 #studioNav::after,#navLinks::after,#navProdLinks::after{content:'';display:block;align-self:center;width:36px;height:4px;min-height:4px;border-radius:99px;background:#1113;margin:16px auto -14px}
 body[data-site-area=shop] .hero-section .hero-h1 em,body[data-site-area=shop] .hero-section .hero-h1 [data-handwriting]{color:#1c1b18!important}
}
@media(max-width:1100px){
 .nav-logo,.nav-right>.ttc-cart-btn,.nav-burger,.nav-prod-burger{position:relative;z-index:304}
 .masthead .utility .pill{text-align:center}
 #studioNav>a::after,#navLinks>li>a::after,#navProdLinks>a::after{display:none}
}
@media(max-width:380px){.masthead .utility{gap:6px}.masthead .utility .pill{max-width:88px}}

.skip{position:absolute;left:20px;top:-80px;background:white;padding:12px;z-index:400}.skip:focus{top:10px}
@media(max-width:1100px){#studioNav>a,#navLinks>li>a,#navLinks>a,#navProdLinks>a{color:#111!important}.nav-cta,.nav-order{height:44px;box-sizing:border-box}}
/* Ink outlines with destination-specific color, like a sketchbook annotation. */
.handdrawn-icon .icon-color{fill:var(--icon-accent);stroke:none}
.handdrawn-icon-host{display:inline-flex;align-items:center;flex-shrink:0}
.destination-icon.handdrawn-icon{width:24px;height:24px;overflow:visible}
@media(max-width:1100px){#studioNav .handdrawn-icon,#navLinks .handdrawn-icon,#navProdLinks .handdrawn-icon{width:28px;height:28px}}
/* The shop stays upright; its illustrated double doors welcome visitors in. */
.shop-door{transform-box:fill-box;transition:transform .38s cubic-bezier(.22,1,.36,1)}
.shop-door-left{transform-origin:left center}.shop-door-right{transform-origin:right center}
[data-slot=navigation-menu-trigger][data-state=open] .shop-door-left,.image-path:hover .shop-door-left{transform:scaleX(.18) skewY(-12deg)}
[data-slot=navigation-menu-trigger][data-state=open] .shop-door-right,.image-path:hover .shop-door-right{transform:scaleX(.18) skewY(12deg)}
#studioNav .shop-menu-content,#navLinks .shop-menu-content,.shop-menu-content{border-radius:999px!important}
.path-label{display:flex;align-items:center;gap:12px}
.path-label .handdrawn-icon{width:42px;height:42px}
.site-footer-inner{align-items:flex-start;padding-bottom:32px}
.site-footer-menu{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:12px 44px}
.site-footer-menu a{padding:6px 0}
.site-footer-bottom{max-width:1420px;margin:auto;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;font:400 14px/1.6 var(--sans);color:#595954}
.site-footer-bottom p{margin:0}.footer-legal{display:flex;gap:24px;position:static;background:none;padding:0;border:0}.footer-legal a:hover{text-decoration:underline}
@media(max-width:600px){.site-footer-inner{gap:28px}.site-footer-menu{width:100%;grid-template-columns:1fr 1fr;gap:10px 24px}.site-footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}.footer-legal{font-size:14px}.studio-outro h2{font-size:clamp(36px,9vw,52px)}}
@media(prefers-reduced-motion:reduce){.shop-door{transition:none}}
/* Homepage title lines, and photographs framed around their subjects. */
.studio-hero h1{font-size:clamp(30px,3.7vw,54px);letter-spacing:-1.5px;line-height:1.12}
.hero-title-line{display:block;white-space:nowrap}.studio-hero h1 em{display:inline!important;margin:0;letter-spacing:-2px}
.studio-home .studio-intro{display:block}
.studio-home .studio-intro h2{font-size:clamp(18px,4.3vw,58px);letter-spacing:-.03em;white-space:nowrap;margin-bottom:0}
.founder-feature img,.founder-photo img{width:100%;height:auto!important;min-height:0;max-height:none;aspect-ratio:1;object-fit:cover}
.workshop-feature img{object-position:50% 20%}
.workshop-feature h2 em{display:inline-block}
.image-path{display:flex;flex-direction:column;border:2px solid #111;box-shadow:7px 7px 0 #111;transition:transform .25s ease,box-shadow .25s ease}
.image-path:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 #111}
.image-path:active{transform:translate(4px,4px);box-shadow:3px 3px 0 #111}
.studio-outro{border-top:0}.unified-site-footer{border-top:0!important}
.site-footer-menu a{display:flex;align-items:center;gap:10px}.site-footer-menu .handdrawn-icon{flex-shrink:0}
.site-footer-bottom{border-top:0;padding-top:14px}
.page-intro:has(+.founder-intro){padding-bottom:8px}.founder-intro{padding-top:24px}
.idea-photo-pair{display:flex;overflow-x:auto;gap:20px;scroll-snap-type:x mandatory;padding-bottom:14px}
.idea-photo-pair figure{flex:0 0 calc(50% - 10px);margin:0!important;scroll-snap-align:start}
.idea-photo-pair img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
[data-site-area=learn] .lh-h2{font-family:var(--heading);font-weight:500}
[data-site-area=learn] .lh-h2 em{font-family:Caveat,cursive;font-weight:600;font-style:normal}
[data-site-area=learn] .lh-ctas .btn,[data-site-area=learn] .wl-submit{white-space:nowrap;flex-shrink:0}
@media(max-width:760px){
 .studio-hero h1{font-size:clamp(28px,7.8vw,56px);letter-spacing:-1px}
 .hero-photo{height:auto;min-height:0;aspect-ratio:1}.hero-photo>img{width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:1}
 .idea-photo-pair figure{flex-basis:calc(82% - 10px)}
 .image-paths{padding-right:7px;gap:25px}
 [data-site-area=learn] .lh-ctas .btn{font-size:14px;padding:13px 18px;gap:8px}
 .tm-reviews .rv-text{font-size:14px;line-height:1.5}
 .tm-reviews .rv-meta{font-size:12px;margin-bottom:8px}
}
@media(prefers-reduced-motion:reduce){.image-path{transition:none}}
.workshop-feature h2 em{font-size:.68em!important;line-height:1.1}
.make-route-card{border:2px solid #111;border-radius:26px;padding:16px;box-shadow:7px 7px 0 #111;align-items:stretch}
.make-route-card .make-preview{border-radius:18px;aspect-ratio:1.15;height:auto;min-height:0;margin:0 0 22px;object-fit:cover}
.make-route-card h2{margin:0 0 14px;font-size:32px}.make-route-card .button{align-self:flex-start}.make-route-card .tabs{margin-top:0}
.license-options{position:relative;gap:0;border:1px solid var(--line);border-radius:26px;overflow:visible}
.license-options article{border:0;border-radius:0;padding:30px}.license-options article:last-child{border-left:1px solid var(--line)}
.license-options .button{margin-top:20px}
.license-or{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:50%;width:44px;height:44px;display:grid;place-items:center;background:white;font:600 12px var(--sans);z-index:1}
#library-grid{grid-template-columns:1fr}
#library-grid .model-card{display:grid;grid-template-columns:minmax(140px,28%) minmax(0,1fr);gap:24px;align-items:start;border-radius:26px;padding:16px}
#library-grid .card-visual{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:18px;margin:0}
#library-grid .details{padding:0;text-align:left}#library-grid h3{text-align:left;margin-top:12px}
.print-notes .text-link{display:inline-flex;align-items:center;gap:8px}
.ttc-license-section{padding:16px 0}.ttc-license-section h3{margin:0 0 8px}.ttc-license-section>p{font-size:14px;line-height:1.5}.ttc-license-total{display:flex;justify-content:space-between}
.ttc-license-checkout{display:block;padding:14px 18px;border-radius:999px;background:#39B54A;color:#111;text-align:center;font-weight:600;text-decoration:none}
.ttc-cart-foot[hidden]{display:none!important}
@media(max-width:760px){.license-options{grid-template-columns:1fr}.license-options article{padding:26px}.license-options article:last-child{border-left:0;border-top:1px solid var(--line);padding-top:36px}.license-or{top:auto;left:50%;position:relative;transform:none;margin:-22px 0 -22px -22px}.make-route-card{margin-right:7px}#library-grid .model-card{grid-template-columns:110px minmax(0,1fr);gap:14px;padding:14px}#library-grid .details h3{font-size:23px}#library-grid .details .button{padding:12px 10px;font-size:14px}#library-grid .price-row{flex-wrap:wrap;gap:6px}#library-grid .badge{font-size:12px}}
/* Shared controls retain their native form semantics with a distinct component UI. */
.studio-select-source{position:absolute!important;width:1px!important;height:1px!important;clip-path:inset(50%)!important;overflow:hidden!important;opacity:0!important;padding:0!important;border:0!important;pointer-events:none!important}
[data-studio-select]{display:block;min-width:0;width:100%}[data-studio-select][hidden]{display:none}
.studio-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:11px 14px;border:1.5px solid #b7b7b1;border-radius:12px;background:#fff;color:#1c1b18;font:500 14px/1.4 var(--sans);text-align:left;cursor:pointer}
.studio-select-trigger:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.studio-select-trigger:disabled{opacity:.5;cursor:not-allowed}
.studio-select-content{z-index:12000;max-height:min(320px,var(--radix-select-content-available-height));width:var(--radix-select-trigger-width);min-width:160px;overflow:auto;background:white;color:#111;border:1px solid #ccc;border-radius:14px;padding:6px;box-shadow:0 12px 36px #0002;font:500 14px/1.4 var(--sans)}
.studio-select-item{display:flex;align-items:center;justify-content:space-between;gap:12px;outline:none;cursor:pointer;padding:11px 12px;border-radius:9px}.studio-select-item[data-highlighted]{background:#f0f0ec}.studio-select-item[data-state=checked]{background:#fff0ba}.studio-select-item[data-disabled]{opacity:.4;pointer-events:none}
input[type=radio],input[type=checkbox]{appearance:none!important;-webkit-appearance:none!important;display:inline-grid;place-content:center;vertical-align:middle;width:20px!important;height:20px!important;min-width:20px;flex-shrink:0;border:1.5px solid #92928c!important;background:#fff;border-radius:5px;cursor:pointer;margin-right:7px;padding:0!important}
input[type=radio]{border-radius:50%}input[type=radio]:checked,input[type=checkbox]:checked{border-color:#111!important;background:var(--gold,#ffba08)}
input[type=radio]:checked:after{content:'';width:8px;height:8px;border-radius:50%;background:#111}input[type=checkbox]:checked:after{content:'';width:9px;height:5px;border-left:2px solid #111;border-bottom:2px solid #111;transform:rotate(-45deg) translateY(-1px)}
input[type=radio]:focus-visible,input[type=checkbox]:focus-visible{outline:3px solid var(--gold);outline-offset:3px}input:disabled{cursor:not-allowed}
.cfg-box{border:1.5px solid #b9b9b3!important;border-radius:20px!important;background:#fff;margin:0!important;width:100%!important;overflow:hidden}
.icon-select{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border:1px solid #d3d3cc;border-radius:16px;background:#fafaf8}
.icon-select .icon-opt{border:1.5px solid #b9b9b3;border-radius:10px;background:#fff;padding:10px 12px;min-height:40px;cursor:pointer}
.icon-select .icon-opt.selected,.icon-select .icon-opt.active{border-color:#111;background:var(--gold);color:var(--ink);box-shadow:2px 2px 0 #111}
.faq-section .s-h{font-family:var(--heading);font-weight:500}.faq-section .s-h em{font-family:Caveat,cursive;font-style:normal;font-weight:600}
.product-wrap--customise{padding-bottom:calc(var(--section-gap) / 2)}.product-wrap--customise+.faq-section{padding-top:calc(var(--section-gap) / 2);padding-bottom:var(--section-gap)}.faq-section .faq-list{margin-top:var(--action-gap)}
@media(max-width:820px){.cfg-box{margin:0!important;width:100%!important}}
/* One header scale across studio and shop; the accent identifies the page.
   The wordmark matches the 44 px Upgrade, cart and menu controls so the bar can sit shorter. */
.masthead,.studio-header,body>nav{height:64px!important;min-height:64px!important;padding:10px 4%!important;box-sizing:border-box;background:var(--gold)!important;isolation:isolate}
.masthead .brand-logo,.studio-header .brand-logo,body>nav .brand-logo{width:81.28px!important;height:44px!important;overflow:hidden;position:relative;display:block}
.masthead::before,.studio-header::before,body>nav::before{content:'';position:absolute;inset:0;background:var(--gold);z-index:303;pointer-events:none}
.masthead>*:not(.main-nav),.studio-header>*:not(nav),body>nav>*:not(.nav-links):not(.nav-prod-links){position:relative;z-index:304}
.masthead .main-nav{z-index:304}
@media(max-width:1100px){
 .masthead,.studio-header,body>nav{height:64px!important;min-height:64px!important;padding:10px 5%!important}
 #studioNav,#navLinks,#navProdLinks{height:auto!important;min-height:0!important;max-height:calc(100dvh - var(--header-height, 64px) - 12px)!important;overflow-y:auto!important;overflow-x:hidden!important;flex:initial!important;z-index:302!important;box-sizing:border-box;top:100%!important}
 #studioNav>*,#navLinks>*,#navProdLinks>*{flex-shrink:0!important}
 .masthead .main-nav{z-index:302}
}
.ideas-underline{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:10px}
/* Closely stepped shadows form a continuous extrusion, including curved corners. */
.image-path,.make-route-card,#library-grid .model-card{border:2px solid #111;border-radius:26px;box-shadow:1px 2px 0 #111,2px 4px 0 #111,3px 6px 0 #111,4px 8px 0 #111,5px 10px 0 #111,6px 12px 0 #111;transform:none}
.image-path:hover,.make-route-card:hover,#library-grid .model-card:hover{transform:translateY(-3px);box-shadow:1px 2px 0 #111,2px 4px 0 #111,3px 6px 0 #111,4px 8px 0 #111,5px 10px 0 #111,6px 12px 0 #111,7px 14px 0 #111}
.library-search-row{border-top:1px solid var(--line);padding:24px 0 32px}.library-search-row .search{width:100%;max-width:none;box-sizing:border-box}
#library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;padding:0 8px 12px 0}
#library-grid .model-card{display:flex;flex-direction:column;padding:12px;gap:16px;min-width:0;background:#fff}
#library-grid .model-card .card-visual{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:16px;margin:0}
#library-grid .details{display:flex;flex:1;flex-direction:column;padding:0 4px 6px;gap:12px;min-width:0}
#library-grid .details h3{font-size:25px;line-height:1.15;margin:0}#library-grid .details .small{font-size:14px;line-height:1.5;margin:0}
#library-grid .details .button{font-size:14px;white-space:nowrap;padding:12px 8px;margin-top:auto;gap:6px}
#library-grid .print-notes{font-size:12px;margin:0}#library-grid .print-notes summary{font-size:12px}
/* An open print-notes panel sizes its own card only; neighbours keep their natural height instead of stretching to match. */
#library-grid:has(.print-notes[open]) .model-card{align-self:start}
#library-grid .details .small{min-height:3em}
/* Coming soon: no action, muted artwork and no hover lift. */
#library-grid .model-card{position:relative}#library-grid .details .badge{position:absolute;top:24px;left:24px;margin:0;font-size:12px;font-weight:700;background:#111;color:#fff;border-radius:999px;padding:5px 10px}
#library-grid .details .badge.is-free{background:var(--gold,#ffba08);color:#111}
@media(max-width:760px){#library-grid .details .badge{top:16px;left:16px}}
#library-grid .is-coming-soon>.card-visual{filter:grayscale(.7);opacity:.7}
#library-grid .is-coming-soon:hover{transform:none;box-shadow:1px 2px 0 #111,2px 4px 0 #111,3px 6px 0 #111,4px 8px 0 #111,5px 10px 0 #111,6px 12px 0 #111}
@media(max-width:1050px){#library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){#library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}#library-grid .model-card{padding:8px;gap:12px;border-radius:20px}#library-grid .details{padding:0 2px 4px}#library-grid .details h3{font-size:21px}#library-grid .details .small{font-size:14px;min-height:4.5em}#library-grid .details .button{font-size:12px}#library-grid .model-card .card-visual{border-radius:12px}}
@media(prefers-reduced-motion:reduce){.image-path:hover,.make-route-card:hover,#library-grid .model-card:hover{transform:none}}
.pcard,.hl-card{border-radius:26px!important;border:2px solid #111!important}
@media(hover:hover){.pcard:hover,.hl-card:hover{transform:translate(-2px,-3px)!important;box-shadow:1px 2px 0 #111,2px 4px 0 #111,3px 6px 0 #111,4px 8px 0 #111,5px 10px 0 #111,6px 12px 0 #111!important}}

@media(max-width:1100px){.masthead .brand-logo,.studio-header .brand-logo,body>nav .brand-logo{width:81.28px!important;height:44px!important}}
.shop-menu-content:has(.product-lines>li:nth-child(2)){border-radius:28px!important}
@media(max-width:1100px){body>nav>.nav-right,body>nav>.ttc-nav-right{position:static!important;z-index:auto!important}}
@media(max-width:1100px){body>nav>.nav-inner{position:static!important;z-index:auto!important}}

/* Keep the wordmark visible when the optional PNG is absent. */
.brand-logo.brand-logo-fallback{color:#111;font:800 26px/.78 var(--heading);letter-spacing:-1.2px;text-align:left;text-transform:none;text-decoration:none;padding-top:1px}
@media(max-width:1100px){.masthead .brand-logo.brand-logo-fallback,.studio-header .brand-logo.brand-logo-fallback,body>nav .brand-logo.brand-logo-fallback{font-size:21px}}
/* Library toolbar, shared notes and empty state. */
.library-search-row{display:grid;gap:8px}.library-search-label{font-family:var(--heading);font-weight:600;font-size:var(--text-small)}.library-search-row .search{min-height:var(--control-height)}
.library-includes{margin:0 0 var(--space-section)}.library-includes h2{margin:0 0 16px}.library-includes dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 24px;margin:0}.library-includes dt{font-family:var(--heading);font-weight:600;margin-bottom:4px}.library-includes dd{margin:0;font-size:var(--text-small);color:var(--muted)}
.card-media{display:block;border-radius:16px}
.library-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:32px 0}.library-empty h3{font-family:var(--heading);font-size:25px;margin:0}.library-empty p{margin:0;color:var(--muted)}.library-suggestions{display:flex;flex-wrap:wrap;gap:8px}.library-suggestions .pill{min-height:var(--control-height)}
@media(max-width:1050px){.library-includes dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.library-includes dl{grid-template-columns:1fr}.library-includes{padding:20px}}
.library-includes+.library-search-row{border-top:0;padding-top:0}
@media(max-width:760px){#library-grid .details .button{white-space:normal;line-height:1.2;text-align:center}}
/* Reviews as a board: lanes of whole cards on desktop (no scrolling inside a review), one swipe row on a phone. */
.tm-reviews,.lh-tm-grid.has-video .tm-reviews{columns:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start;height:auto;overflow:visible;margin:0;padding:0;min-width:0}
.lh-tm-grid.has-video .tm-reviews{grid-template-columns:repeat(2,minmax(0,1fr))}
.rv-lane{display:flex;flex-direction:column;gap:12px;min-width:0;padding:10px;border-radius:22px;background:rgb(28 27 24 / .04)}
.tm-reviews .rv-card{width:auto;max-width:none;max-height:none;margin:0;padding:18px;overflow:visible;box-sizing:border-box}
.tm-reviews.is-collapsed .rv-lane>.rv-card:nth-child(n+3){display:none}
.review-more{display:flex;justify-content:center;margin-top:20px}.review-more .rv-more{border:1px solid #111;border-radius:999px;background:#fff;color:#111;min-height:44px;padding:10px 22px;font:600 14px/1.2 var(--sans);cursor:pointer}.review-more .rv-more:hover{background:var(--gold)}
@media(max-width:1050px) and (min-width:761px){.tm-reviews{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* A phone reads one column: the first lane's two cards until Show all. */
@media(max-width:760px){
 .tm-reviews,.lh-tm-grid.has-video .tm-reviews{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;overflow:visible;scroll-snap-type:none}
 .rv-lane{display:contents}
 .tm-reviews .rv-card{flex:none;width:auto;max-width:none;padding:16px}
 .tm-reviews.is-collapsed .rv-lane:nth-child(n+2){display:none}
}
/* Doodle placements (src/studio/doodles.js). */
.how-head{display:flex;align-items:center;gap:24px}.how-head .doodle-tap svg{width:120px;height:auto}
.lh-hero .doodle-reel{margin:0 0 14px}.lh-hero .doodle-reel svg{width:64px;height:auto}
@media(max-width:760px){.how-head .doodle-tap svg{width:96px}.lh-hero .doodle-reel svg{width:52px}}

.account-check-loader{display:flex;align-items:center;gap:10px;padding:12px 0;color:var(--muted,#686760);font-size:14px}.account-check-loader .printing-mark{display:block;width:40px;height:28px}

/* Progress uses the same mark across Make, checkout and public forms. */
.inline-loading{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;line-height:1.5}
.inline-loading .printing-mark{display:block;width:36px;height:26px;flex:0 0 36px}
.maker-account-message{margin:0 0 20px}
.account-check-loader{margin-bottom:16px}

#product-order-details{scroll-margin-top:112px}
.qr-purchase-status{margin:0 0 24px;padding:16px;border:1px solid #c9d8ca;border-radius:12px;background:#f2faf3;line-height:1.6;font-size:14px}
.qr-purchase-status .button,.qr-purchase-status .text-link{margin:12px 12px 0 0}

/* Shared Shop FAQ title: retain the compact mobile stack; use one desktop line. */
.faq-heading{max-width:480px}
@media(min-width:1024px){
 .faq-heading{max-width:none}
 .faq-heading .s-h{white-space:nowrap}
}

.connection-help{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px;font-size:14px}.connection-help [hidden]{display:none!important}.connection-help details,.connection-help .site-error{flex-basis:100%}.connection-help summary{cursor:pointer;text-decoration:underline}.connection-help select{min-height:44px;border:1px solid #111;border-radius:12px;padding:8px;background:#fff}

.connection-input-row{display:flex;gap:10px;align-items:stretch}.connection-input-row>input{flex:1;min-width:0}.connection-input-row .connection-dial{flex:0 0 126px;width:126px;min-height:44px;border:1px solid #aaa;border-radius:12px;background:#fff;padding:8px;font:inherit}.connection-input-row [hidden]{display:none!important}.purchase-route,.purchase-reassurance{border:2px solid #111;border-radius:26px;padding:18px;margin:16px 0}.purchase-route p,.purchase-reassurance p,.purchase-connections>p{font-size:14px;line-height:1.6}.purchase-connections>h3,.purchase-review-heading{font-family:var(--heading);font-size:24px}.purchase-connections .tile-group{margin:14px 0}.purchase-route button{white-space:normal}.purchase-reassurance{background:#fff8df}



/* Phones: the floating WhatsApp button (56 px, 24 px from the edge) must not cover the last footer line. */
@media(max-width:820px){.unified-site-footer{padding-bottom:calc(var(--section-gap) + 56px)!important}}

/* ── The floating nav card (every page) ──────────────────────────────────
   One white card inset from the window edge: ink border, a stepped hard
   shadow like the site's cards, links with their hand-drawn icons in the
   middle, account, library and cart on the right. It stays pinned while the
   page scrolls, and on a page whose hero has a full-bleed backdrop
   (.hero-bleed) the hero runs up underneath it. The accent colour lives on
   in the icons and the mobile menu backdrop, not the bar. */
:root{--nav-inset:16px;--nav-card-h:84px}
html body .masthead,html body .studio-header,html body>nav{position:sticky!important;top:var(--nav-inset)!important;margin:var(--nav-inset) var(--nav-inset) 0!important;width:auto!important;max-width:none!important;height:var(--nav-card-h)!important;min-height:var(--nav-card-h)!important;padding:12px 28px!important;background:#fff!important;border:2px solid #111!important;border-radius:30px!important;box-shadow:0 2px 0 #111,0 4px 0 #111,0 6px 0 #111,0 22px 30px -14px rgb(0 0 0 / .45)!important;box-sizing:border-box!important;transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease!important}
/* Scrolling down tucks the card up out of view; scrolling up eases it back. */
html body .masthead.is-tucked,html body .studio-header.is-tucked,html body>nav.is-tucked{transform:translateY(calc(-100% - var(--nav-inset) - 24px))}
@media(prefers-reduced-motion:reduce){html body .masthead,html body .studio-header,html body>nav{transition:none!important}}
/* The product page's sticky Customise card floats like the nav card. Hidden
   it sits fully above the window (it used to slide up only its own height,
   which the old solid bar covered and the floating card does not). Shown, it
   rests under the nav card, and takes the nav's place while the nav is
   tucked away. */
html body .sticky-mini-card{top:var(--nav-inset)!important;left:var(--nav-inset);right:var(--nav-inset);border:2px solid #111!important;border-radius:24px;box-shadow:0 2px 0 #111,0 4px 0 #111,0 18px 26px -14px rgb(0 0 0 / .4)!important;transform:translateY(calc(-100% - var(--nav-inset) - 24px));visibility:hidden;transition:transform .42s cubic-bezier(.2,.8,.2,1),visibility 0s linear .42s!important}
html body .sticky-mini-card.show{transform:translateY(0);visibility:visible;transition:transform .42s cubic-bezier(.2,.8,.2,1),visibility 0s!important}
html body:has(:is(.masthead,.studio-header,body>nav):not(.is-tucked)) .sticky-mini-card.show{transform:translateY(calc(var(--nav-card-h) + 14px))}
@media(prefers-reduced-motion:reduce){html body .sticky-mini-card{transition:none!important}}
html body .masthead::before,html body .studio-header::before,html body>nav::before{background:#fff!important;border-radius:28px}
html body .masthead .brand-logo,html body .studio-header .brand-logo,html body>nav .brand-logo{width:96px!important;height:52px!important}
body:has(.hero-bleed) .masthead,body:has(.hero-bleed) .studio-header,body:has(.hero-bleed)>nav{margin-bottom:calc(-1 * (var(--nav-card-h) + var(--nav-inset)))!important}
/* Labels on the card are always ink, whatever the page's header tone. */
html body .masthead[data-header-tone] .main-nav>a,html body .masthead[data-header-tone] .shop-menu [data-slot=navigation-menu-trigger],html body .masthead[data-header-tone] .shop-fallback summary,html body .masthead[data-header-tone] .utility>a:not(.pill){color:#111!important}
html body .masthead[data-header-tone=dark] .main-nav .handdrawn-icon{color:inherit}
/* design-system.css empties the icon fill for the old dark bar (white outline icons); the nav is a white card on every page now, so the accent comes back explicitly (revert-layer resolved to no fill). */
html body .masthead[data-header-tone=dark] .main-nav .handdrawn-icon .icon-color{fill:var(--icon-accent)}
@media(min-width:1101px){
 html body .masthead .main-nav{gap:28px!important}
 html body .masthead .main-nav>a,html body .masthead .shop-menu [data-slot=navigation-menu-trigger],html body .masthead .shop-fallback summary,html body>nav .nav-links>li>a,html body>nav .nav-prod-links>a{font:500 19px/1.2 var(--sans)!important;gap:10px!important}
 html body .masthead .destination-icon,html body>nav .destination-icon{width:28px!important;height:28px!important}
 html body .masthead .utility,html body>nav .ttc-nav-right{gap:22px!important}
 html body .masthead .utility>a:not(.pill){font:500 16px/1.2 var(--sans)!important}
 html body .masthead .utility .pill{min-height:52px!important;height:52px!important;padding:0 24px!important;font:600 16px/1.2 var(--sans)!important}
 html body .masthead .ttc-cart-btn,html body>nav .ttc-cart-btn{width:52px!important;height:52px!important;border:2px solid #111!important;background:#fff!important}
}
@media(min-width:1101px) and (max-width:1320px){
 html body .masthead .main-nav{gap:14px!important}
 html body .masthead .main-nav>a,html body .masthead .shop-menu [data-slot=navigation-menu-trigger],html body .masthead .shop-fallback summary{font-size:16px!important}
 html body .masthead .destination-icon{width:24px!important;height:24px!important}
}
@media(max-width:1100px){
 :root{--nav-inset:10px;--nav-card-h:68px}
 html body .masthead,html body .studio-header,html body>nav{padding:10px 14px!important;border-radius:24px!important}
 html body .masthead::before,html body .studio-header::before,html body>nav::before{border-radius:22px}
 html body .masthead .brand-logo,html body .studio-header .brand-logo,html body>nav .brand-logo{width:81.28px!important;height:44px!important}
 /* The menu opens as a second card under the nav card. */
 html body #studioNav,html body #navLinks,html body #navProdLinks{top:calc(100% + 14px)!important;left:-2px!important;right:-2px!important;width:auto!important;border:2px solid #111!important;border-radius:24px!important;box-shadow:0 2px 0 #111,0 4px 0 #111,0 20px 28px -14px rgb(0 0 0 / .4)!important}
}
/* The shop's own menu has six destinations and the currency picker: tighter type so all of it fits. */
@media(min-width:1101px){
 html body .masthead:has(.nav-region) .main-nav{gap:10px!important}
 html body .masthead:has(.nav-region) .main-nav>a{font-size:16px!important;gap:7px!important}
 html body .masthead:has(.nav-region) .destination-icon{width:22px!important;height:22px!important}
 html body .masthead:has(.nav-region) .utility{gap:14px!important}
}
@media(min-width:1101px) and (max-width:1400px){
 html body .masthead:has(.nav-region) .main-nav>a{font-size:14px!important}
 html body .masthead:has(.nav-region) .utility>a:not(.pill){display:none}
}
/* Text fields mark focus with an ink border, never a coloured highlight ring,
   on every page (the area accent used to glow around the field). Fields that
   show an error keep their red outline. Checkboxes, radios, sliders and
   buttons keep their own focus outline. */
html body :is(input:not([type=checkbox],[type=radio],[type=range],[type=button],[type=submit],[type=reset],[type=file],[type=color],[type=image]),textarea,select):not([aria-invalid=true]):is(:focus,:focus-visible){outline:none!important;box-shadow:none!important;border-color:#111!important}
/* Shared sizing contract. Keep page-specific composition in the page stylesheet. */
/* Shared values come from erp/lib/design-tokens.js, emitted ahead of this file. */
:root{--text-title:clamp(36px,4.1vw,60px);--accent-scale:1.22;--header-height:64px}
body{font-size:var(--text-body)}
.studio-feature h2,.studio-membership h2,.membership h2,.lh-h2{font-size:var(--text-title)}
h1 em,h2 em,h3 em,.workshop-feature h2 em{font-family:Caveat,cursive;font-size:calc(1em * var(--accent-scale))!important;font-weight:600;font-style:normal;line-height:1.05}
.button,.btn,.btn-gold,.btn-dark,.btn-outline,.prod-customise-cta,.sticky-mini-btn{border-radius:var(--button-radius);font-family:var(--sans);font-weight:600;letter-spacing:0;text-transform:none;min-height:var(--control-height)}
.image-path,.make-route-card,.model-card{border-radius:var(--card-radius)}
/* The phone hero sits on the orange photo (white phrase); the desktop hero is on white, so the phrase takes the Shop gold. */
body[data-site-area=shop] .hero-section .hero-h1 em,body[data-site-area=shop] .hero-section .hero-h1 [data-handwriting]{color:#fff!important}
@media(min-width:681px){body[data-site-area=shop] .hero-section .hero-h1 em,body[data-site-area=shop] .hero-section .hero-h1 [data-handwriting]{color:var(--accent-display)!important}}
/* .hero-plain: a shop hero with nothing behind its copy on phones (/light-boxes). The copy sits on the page colour, the photo in its frame below it, and the phrase keeps the Shop gold at every width. */
body[data-site-area=shop] .hero-section.hero-plain .hero-h1 em,body[data-site-area=shop] .hero-section.hero-plain .hero-h1 [data-handwriting]{color:var(--accent-display)!important}
@media(max-width:680px){.hero-section.hero-plain{background:var(--paper);min-height:0;padding-bottom:16px}.hero-section.hero-plain .hero-img-frame{display:block!important;width:100%;max-width:420px;margin:8px auto 0}.hero-section.hero-plain .hero-accent-wrap,.hero-section.hero-plain .hero-accent-word{white-space:normal;max-width:100%}}
.sticky-mini-card{top:var(--header-height);padding:16px!important;gap:16px;background:#fff}
.sticky-mini-name,.prod-name,.prod-features h4,.prod-perfect-for h4,.prod-nfc-spec h4,.prod-dims h4{font-family:var(--heading)!important;font-style:normal;font-weight:600;color:var(--ink)!important}
.prod-features h4,.prod-perfect-for h4,.prod-nfc-spec h4,.prod-dims h4{font-size:var(--text-label);letter-spacing:0;text-transform:none}
.product-wrap:not(.product-wrap--customise){padding-bottom:calc(var(--section-gap) / 2)}
.product-wrap--customise{padding-top:0!important}
#studioNav .shop-menu-content,#navLinks .shop-menu-content,.shop-menu-content:has(.product-lines){background:transparent;border:0;box-shadow:none;padding:0!important;border-radius:0!important}
.product-lines{gap:12px}
.product-line,.nav-links a.product-line{border:1px solid #deded7;background:#fff;box-shadow:0 6px 16px #00000008;border-radius:var(--button-radius)!important;padding:10px 16px 10px 10px!important}
.product-line:hover,.product-line:focus-visible{background:var(--gold,#ffba08)}
@media(max-width:1100px){:root{--header-height:64px}}
@media(max-width:760px){:root{--text-title:42px;--space-section:32px}.sticky-mini-card{padding:12px!important;gap:12px}.sticky-mini-name{font-size:16px}.sticky-mini-btn{font-size:12px;padding:10px 14px}.sticky-mini-img{width:48px;height:48px}}

/* Section boundary: one section gap, divider centred; the heading then sits one gap above its content. */
.product-wrap--customise>.divider{margin:0}
#order-form>h2#configurator{margin:0 0 var(--gap);padding:calc(var(--section-gap) / 2) 0 0}
/* The customise section opens with a section heading, the same scale as "Good questions." */
#order-form>.customise-heading{font:600 clamp(30px,4vw,44px)/1.1 var(--heading);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
/* Product previews use the full available width instead of a framed card. */
.cfg-box{border:0!important;border-radius:0!important;overflow:hidden;overflow-anchor:none;background:#f6f6f4}
@media(max-width:820px){#configurator-box.cfg-box,.maker-preview-3d.cfg-box{width:100vw!important;max-width:none;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}}
@media(max-width:640px){.hl-card{flex-basis:calc((100vw - 38px)/1.5);min-width:0}.hl-body{padding:var(--inset);gap:var(--space-2)}.hl-name{font-size:var(--purchase-step-size)}.hl-footer{gap:var(--space-2);flex-wrap:wrap}.hl-pills{gap:var(--space-1)}.hl-pill{padding:6px 8px}.hl-cta{padding:9px 12px}}
/* Shared desktop configurator frame; mobile remains full-width. */
@media(min-width:821px){.cfg-box{border:2px solid #111!important;border-radius:26px!important;overflow:hidden}}
/* Shared header works on legacy product templates as well as studio pages. */
.masthead{padding:18px 4%;box-sizing:border-box;font-family:var(--sans);line-height:1.3;border-bottom:0!important;box-shadow:none}
.masthead .main-nav{position:static;background:transparent;border:0;padding:0;margin:0;box-shadow:none;width:auto;flex:0 1 auto}
.masthead .main-nav>a,.masthead .shop-menu [data-slot=navigation-menu-trigger],.masthead .shop-fallback summary,.masthead .utility>a:not(.pill){color:#111!important;text-decoration:none}
.masthead .wordmark{flex-shrink:0}.masthead .utility{flex-shrink:0}.masthead .nav-region{flex-shrink:0}
@media(min-width:1101px){.masthead .main-nav>a:hover,.masthead .main-nav>a:focus-visible,.masthead .shop-menu [data-slot=navigation-menu-trigger]:hover,.masthead .shop-menu [data-slot=navigation-menu-trigger]:focus-visible{color:#111!important;background:transparent}.masthead .main-nav>a{padding:8px 6px}.masthead .main-nav>a::after{display:none}.masthead .main-nav{gap:16px}.masthead .shop-menu [data-slot=navigation-menu-trigger]{padding:8px 6px}.masthead .region-btn{color:#111}}
@media(min-width:1101px) and (max-width:1280px){.masthead .utility .pill{display:none}.masthead .main-nav{gap:10px}}
/* Dark header variant: white line artwork and labels over the area colour. */
.masthead .main-nav{background:transparent!important}
@media(min-width:1101px){
 .masthead[data-header-tone=dark] .main-nav>a,.masthead[data-header-tone=dark] .shop-menu [data-slot=navigation-menu-trigger],.masthead[data-header-tone=dark] .shop-fallback summary,.masthead[data-header-tone=dark] .utility>a:not(.pill){color:#fff!important}
 .masthead[data-header-tone=dark] .main-nav .handdrawn-icon{stroke:currentColor;color:#fff}
 .masthead[data-header-tone=dark] .main-nav .handdrawn-icon .icon-color{fill:none}
 .masthead[data-header-tone=dark] .main-nav>a:hover,.masthead[data-header-tone=dark] .shop-menu [data-slot=navigation-menu-trigger]:hover{background:transparent}
}
/* Shared icon interaction: one short movement on entry, a small press on click. */
@keyframes nav-make-lift{0%,100%{transform:translateY(0)}45%{transform:translateY(-3px)}}
@keyframes nav-learn-tilt{0%,100%{transform:rotate(0)}40%{transform:rotate(-8deg)}70%{transform:rotate(4deg)}}
@keyframes nav-about-nod{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(1px) rotate(7deg)}}
@media(prefers-reduced-motion:no-preference){
 #studioNav>a .handdrawn-icon,.image-path .handdrawn-icon{transform-origin:center;transition:transform 120ms ease}
 #studioNav>a:focus-visible [data-icon=make],.image-path:focus-visible [data-icon=make]{animation:nav-make-lift 360ms ease}
 #studioNav>a:focus-visible [data-icon=learn],.image-path:focus-visible [data-icon=learn]{animation:nav-learn-tilt 360ms ease}
 #studioNav>a:focus-visible [data-icon=about],.image-path:focus-visible [data-icon=about]{animation:nav-about-nod 360ms ease}
 @media(hover:hover){
  #studioNav>a:hover [data-icon=make],.image-path:hover [data-icon=make]{animation:nav-make-lift 360ms ease}
  #studioNav>a:hover [data-icon=learn],.image-path:hover [data-icon=learn]{animation:nav-learn-tilt 360ms ease}
  #studioNav>a:hover [data-icon=about],.image-path:hover [data-icon=about]{animation:nav-about-nod 360ms ease}
 }
 #studioNav>a:active .handdrawn-icon,.image-path:active .handdrawn-icon{animation:none;transform:scale(.88)}
}

/* Returning members: desktop utility link and mobile menu entry share one route. */
@media(min-width:1101px){.masthead .utility>a.member-sign-in{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}.masthead #studioNav>.member-sign-in-mobile{display:none}}
@media(max-width:1100px){
 .masthead #studioNav>.member-sign-in-mobile{justify-content:center!important;font-size:16px!important;font-weight:600;min-height:48px;margin-top:12px;border:1.5px solid #111!important;border-radius:999px!important;background:#fff;color:#111;text-decoration:none;box-shadow:2px 3px 0 #111}
 .masthead #studioNav>.member-sign-in-mobile:hover{background:rgb(var(--ring-rgb) / .12)}
 .masthead #studioNav>.member-sign-in-mobile:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
}

/* Business details and copyright share the same alignment as the footer logo. */
.unified-site-footer .site-footer-inner{padding-bottom:0}
.unified-site-footer .site-footer-meta{max-width:1420px;margin:28px auto 0;display:grid;gap:14px}
.unified-site-footer .footer-biz{max-width:none;margin:0;padding:0;border:0;justify-content:flex-start;text-align:left;font:400 14px/1.6 var(--sans);letter-spacing:0;color:#595954}
.unified-site-footer .footer-biz strong{color:#111}
.unified-site-footer .footer-biz a{color:inherit}
.unified-site-footer .site-footer-bottom{max-width:none;margin:0;padding:0;text-align:left;align-items:flex-start}
@media(max-width:600px){
 .unified-site-footer .site-footer-meta{margin-top:28px;gap:16px}
 .unified-site-footer .footer-biz{flex-direction:column;align-items:flex-start;gap:4px;font-size:14px}
}

/* PDP hierarchy: one family/size per role, shared by every product. */
:root{--pdp-body-size:var(--text-body);--pdp-label-size:var(--text-label)}
.product-wrap:not(.product-wrap--customise) :is(p,li,.prod-desc,.prod-short,.prod-tagline),.product-wrap:not(.product-wrap--customise) :is(.prod-dims,.prod-nfc-spec) p{font-family:var(--sans)!important;font-size:var(--pdp-body-size)!important;line-height:1.65;letter-spacing:0!important;font-weight:400;text-transform:none}
.product-wrap:not(.product-wrap--customise) :is(.prod-features,.prod-perfect-for,.prod-nfc-spec,.prod-dims) h4{font-family:var(--heading)!important;font-size:var(--pdp-label-size)!important;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none}
#order-form .purchase-step{font-family:var(--heading)!important;font-size:var(--purchase-step-size)!important;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none;margin:20px 0 16px}
#order-form .purchase-step>span{font-family:Caveat,cursive;font-size:1.15em;font-weight:600;white-space:nowrap}
#order-form .bm-hint{font-family:var(--sans);font-size:var(--pdp-body-size);color:var(--ink2)}
#order-form .bm-btn{font-family:var(--sans);font-size:16px;letter-spacing:0;text-transform:none}
#order-form .bm-head{align-items:center}#order-form .tile-addon-action{width:100%;text-align:left;color:var(--ink);font-family:var(--sans);background:#fff;cursor:pointer}
#order-form [data-assisted-checkout]{margin:0;width:100%;justify-content:center;min-height:44px;font-family:var(--sans);font-size:16px;letter-spacing:0;text-transform:none}

.connection-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.connection-label-row label{margin:0}.connection-help-link{border:0;background:none;text-decoration:underline;padding:0;font:14px var(--sans);color:var(--ink);cursor:pointer}.connection-help-link[hidden]{display:none!important}
.connection-dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow:auto;border:2px solid var(--ink,#111);border-radius:var(--card-radius);padding:28px;background:#fff;color:var(--ink);font:16px/1.65 var(--sans)}.connection-dialog::backdrop{background:#0007}.connection-dialog h2{font:600 26px/1.2 var(--heading);margin:0 32px 20px 0}.connection-dialog p{margin:16px 0}.connection-dialog label{display:block}.connection-dialog input{display:block;width:100%;min-height:44px;border:1px solid #aaa;border-radius:12px;padding:10px;font:inherit}.connection-dialog-close{position:absolute;right:14px;top:12px;width:44px;height:44px;border:1px solid #111;border-radius:999px;background:#fff;font:26px Arial;cursor:pointer}.connection-dialog [data-resolve-review]{margin-top:16px;font:600 16px var(--sans);text-transform:none;letter-spacing:0}

.product-wrap:not(.product-wrap--customise) .prod-label{font:600 14px/1.4 var(--sans);letter-spacing:0;text-transform:none}.product-wrap:not(.product-wrap--customise) .prod-price{font:600 28px/1.2 var(--heading);letter-spacing:0}

[data-branding-status]:empty,#bm-result:empty{display:none}

/* Purchase flow. Values come from the shared tokens; legacy declarations in
   styles.css were updated at source, so this block only composes. */
.prod-size{font:400 16px/1.5 var(--sans);color:var(--ink2)}.prod-size span{white-space:nowrap}
.prod-info{display:flex;flex-direction:column}.prod-info>.prod-name{order:1}.prod-info>.prod-price{order:2}.prod-info>.prod-size{order:3}.prod-info>.prod-desc{order:4}.prod-info>.prod-customise-cta{order:5}.prod-info>#customise,.prod-info>.divider{order:10}
.prod-info>.prod-label,.prod-info>.prod-short,.prod-info>.tile-note{display:none}
/* Product intro rhythm, identical at every width: tight stack, stack, gap, action gap. The CTA ends the section. */
.prod-info>.prod-name{margin:0 0 var(--stack-tight)!important}.prod-info>.prod-price{margin:0 0 var(--stack)!important}.prod-info>.prod-size{margin:0 0 var(--gap)!important}.prod-info>.prod-desc{margin:0 0 var(--action-gap)!important}.prod-info>.prod-customise-cta{margin:0!important}
#order-form #brand-match{border:0;border-radius:0;padding:0;margin:0 0 20px;background:transparent}#order-form .bm-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px}#order-form .bm-head .purchase-step{margin-top:0}#order-form .bm-btn{align-self:flex-start}
#order-form .purchase-step{margin:var(--space-6) 0 var(--gap)}#order-form .purchase-step:first-child,#order-form .purchase-connections>.purchase-step:first-child{margin-top:0}
#order-form{scroll-margin-top:calc(var(--header-height) + 8px)}
/* Labels: tile numbers, link labels and field labels share one style; the label-to-field gap is 12 px. */
.connection-label-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;min-height:20px;margin-bottom:12px}.connection-label-row label{margin:0}
.connection-label-row label,#order-form .form-group>label:not(.dv-opt),#order-form .quantity-section h3{font:600 var(--field-label)/1.4 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none}
/* Find Google link (and the same helper for any other platform) sits between the picker and the field.
   Its padding is the space above and below the words, and it is also the 44 px target. */
.connection-help-link{align-self:flex-start;display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;margin:0;padding-block:var(--stack);border:0;background:none;font:14px/1.4 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:normal;cursor:pointer}.connection-help-link[hidden]{display:none!important}
.connection-help-link:focus-visible,.connection-open:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.connection-input-row.is-open{gap:10px}
.connection-open-slot{flex:0 0 auto;display:flex;align-items:center;width:0;margin-inline-start:-10px;overflow:hidden;opacity:0;pointer-events:none;transition:width .22s ease,margin-inline-start .22s ease,opacity .18s ease}
.connection-input-row.is-open .connection-open-slot{width:44px;margin-inline-start:0;opacity:1;pointer-events:auto}
.connection-open{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;border:1.5px solid var(--border2);border-radius:var(--field-radius);background:#fff;color:var(--ink);text-decoration:none;transform:translateX(8px) scale(.92);transition:transform .22s ease,border-color .15s ease}
.connection-input-row.is-open .connection-open{transform:none}
.connection-open:hover{border-color:var(--ink)}
.connection-open svg{display:block;width:20px;height:20px;flex:none}
.uicons-credit{margin:12px 0 0;font:400 14px/1.5 var(--sans);color:var(--ink2)}
.uicons-credit a{color:inherit;text-decoration:underline}
@media(prefers-reduced-motion:reduce){.connection-open-slot,.connection-open{transition:none}}
#order-form .form-group input:not([type=radio]):not([type=checkbox]),#order-form .form-group textarea{font-size:var(--text-body);min-height:var(--control-height)}
#order-form .dv-opt,#order-form .dv-opt span{font-size:var(--text-small)}
/* Cards. */
#order-form .purchase-reassurance{display:grid;gap:var(--stack-tight);padding:var(--inset);margin:0 0 var(--gap);border:1px solid var(--border2);border-radius:var(--card-radius);background:var(--surface);line-height:1.5}
#order-form .purchase-reassurance strong{font:600 18px/1.35 var(--heading)}#order-form .purchase-reassurance p{margin:0;font:400 14px/1.5 var(--sans)}#order-form .purchase-reassurance .field-help{color:var(--ink2)}
.order-total{padding:var(--inset);margin:0 0 var(--gap);border:1px solid var(--border2);border-radius:var(--card-radius);background:var(--surface);font-family:var(--sans)}
.order-total-label,.order-total-sum>span:first-child{font:600 var(--field-label)/1.4 var(--sans);color:var(--ink)}
.order-total-label{margin-bottom:10px}
.order-total-rows{display:flex;flex-direction:column;gap:6px;font-size:var(--text-small);line-height:1.5}
.order-total-rule{height:1px;background:var(--border2);margin:12px 0}
.order-total-sum{display:flex;justify-content:space-between;align-items:center}.order-total-sum .money{font:700 24px/1.2 var(--heading);color:var(--ink)}
.order-total-note{margin:12px 0 0;font-size:var(--text-small);line-height:1.5;color:var(--ink2)}
/* Selectable add-on cards: checkbox 16 px from the top and right. */
.tile-addon{position:relative;padding:var(--inset) calc(var(--inset) + 32px) var(--inset) var(--inset)!important;margin:0 0 var(--gap)!important;border-radius:var(--card-radius)!important}.tile-addon>input[type=checkbox]{position:absolute;top:var(--inset);right:var(--inset);margin:0}
#order-form .tile-addon-action{display:flex;align-items:flex-start;gap:var(--stack);width:100%;border:1.5px solid var(--border2);background:var(--surface);color:var(--ink);font-family:var(--sans);text-align:left;cursor:pointer}#order-form .tile-addon-action:hover{border-color:var(--ink)}
#order-form .tile-addon-action .tile-addon-title,#order-form .tile-addon .tile-addon-title{font:600 16px/1.4 var(--sans)}#order-form .tile-addon-action .tile-addon-desc,#order-form .tile-addon .tile-addon-desc{font:400 14px/1.5 var(--sans)}
#added-tiles .tile-group{width:100%;min-width:0}#added-tiles .tile-group .form-group{width:100%;min-width:0}#added-tiles .connection-input-row{width:100%}#added-tiles .connection-input-row>input{width:100%;flex:1 1 0}
/* Checkout precedes Add to Cart at every width. */
#order-form input[aria-invalid="true"]{border-color:#d92d20!important;box-shadow:0 0 0 3px rgba(217,45,32,.28);scroll-margin:120px}
#order-form .purchase-actions{display:flex;flex-direction:column;gap:var(--stack);margin-top:var(--action-gap)}#order-form .purchase-actions>button{width:100%;margin:0;min-height:48px;display:flex;align-items:center;justify-content:center;font:600 16px/1.4 var(--sans);padding:14px 20px;cursor:pointer}#order-form .purchase-actions>[data-self-checkout]{order:0}#order-form .purchase-actions>#add-to-cart-btn{order:1;background:#fff;color:var(--ink);border:2px solid var(--ink)}
/* Added-cost prices are text, so they use the readable gold (--gold-text), never the fill gold. */
.money[data-price-prefix="+"],.money.price-add,.dv-cutoff,.tile-base-opt .money{color:var(--gold-text)!important;font-weight:700}
.faq-a-inner ul{padding-left:1.3em;margin:0;list-style:disc}.faq-a-inner li{padding-left:.3em;margin:0 0 10px;line-height:1.6}.faq-item.open .faq-icon{color:#fff;transform:rotate(45deg)}.faq-item.open .faq-icon svg{transform:none}
/* Enhanced Select: chevron centred, 16 px from the right, 44 px reserved. */
.studio-select-trigger{position:relative;padding-right:44px;min-height:48px;font-size:16px;border-radius:var(--field-radius)}.studio-select-trigger>span:last-child{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex}
/* Lone words: headings balance, prose wraps "pretty" (no manual <br> fixes). */
h1,h2,h3,h4,h5,.purchase-step,.hl-name{text-wrap:balance}p,li,.prod-desc,.field-help,.hl-use,.tile-addon-text{text-wrap:pretty}
@media(max-width:640px){.connection-input-row [data-studio-select]{flex:0 0 120px}}
.studio-select-search{width:100%;padding:12px;font:16px var(--sans);border:1px solid var(--border2);border-radius:12px}.connection-input-row [data-studio-select]{min-width:0;max-width:160px}.connection-input-row .studio-select-trigger>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-error button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;padding:10px 18px;border:1.5px solid var(--ink);border-radius:999px;background:white;color:var(--ink);font:600 16px/1.4 var(--sans);cursor:pointer}.site-error button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* Page titles use the heading face; handwriting is reserved for accents. */
.blog-article-hero h1,.co-wrap h1,.co-wrap h2{font-family:var(--heading)!important;font-weight:600;letter-spacing:-.03em;text-wrap:balance}.blog-article-hero h1{font-size:clamp(28px,4vw,44px);line-height:1.15;color:var(--ink)}
/* Standalone action primitive for shared references and utility screens. */
.ui-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 20px;border:2px solid var(--ink,#111);border-radius:999px;background:#fff;color:var(--ink,#111);font:600 16px/1.4 var(--sans,Arial);text-decoration:none;cursor:pointer}.ui-action--primary{background:var(--gold,#ffba08)}.ui-action:disabled{opacity:.45;cursor:not-allowed}.ui-action:focus-visible{outline:3px solid var(--gold,#ffba08);outline-offset:3px}

/* Footer navigation grows with its links; do not inherit the masthead height. */
.unified-site-footer .site-footer-menu{height:auto;min-height:0;transform:none;z-index:auto}


/* Spacing contract (docs/design-system.md, "Spacing"): cards pad by --inset and sit --gap apart.
   The tile name is a sibling to the left of the grey card, on the same row, so it adds no height. */
#order-form .tile-group{display:flex;flex-direction:row;align-items:center;gap:var(--stack);padding:0;margin:0 0 var(--gap);background:transparent;border-radius:0}
#order-form .tile-group>.tile-group-label{flex:0 0 auto;display:flex;align-items:center;justify-content:center;margin:0;max-width:7.5em;line-height:1.2;text-align:center}
#order-form .tile-card{flex:1 1 auto;min-width:0;background:var(--warm);border-radius:var(--card-radius);padding:var(--inset)}
/* A phone keeps the card wide: the name is one line tall, turned to read upward. */
@media(max-width:640px){
 #order-form .tile-group{gap:var(--stack-tight)}
 #order-form .tile-group>.tile-group-label{writing-mode:vertical-rl;transform:rotate(180deg);max-width:none;max-height:100%;white-space:nowrap}
}
#order-form .tile-group .tile-config-row,#order-form .tile-group>.tile-card>.form-group{margin:0}
#order-form .tile-group>.tile-card>.tile-link-group{display:flex;flex-direction:column;margin-top:var(--stack)}
#order-form .tile-group>.tile-card>.tile-link-group:has(.connection-help-link:not([hidden])){margin-top:0}
#order-form .tile-link-group>.connection-help{margin:0}
#order-form .purchase-route{padding:var(--inset);margin:0 0 var(--gap)}#order-form .purchase-route p{margin:var(--stack) 0 0}
/* FAQ questions open without the phone's grey tap flash; keyboard focus keeps its outline. */
.faq-q{-webkit-tap-highlight-color:transparent}.faq-q:active,.faq-q:focus:not(:focus-visible){background:none;outline:none}

/* What happens next. A quiet card on product pages. Unframed inside checkout,
   which is already a card, so the steps do not nest a second 26 px surface. */
.what-next{display:grid;gap:var(--gap);margin:0 0 var(--gap);padding:var(--inset);border:1px solid var(--border2);border-radius:var(--card-radius);background:var(--surface);color:var(--ink)}
.what-next--plain{margin:var(--gap) 0 0;padding:0;border:0;border-radius:0;background:transparent}
#order-form h3.what-next-title,.trust-page h3.what-next-title,.co-side h3.what-next-title,h3.what-next-title{margin:0;font-family:var(--heading);font-size:18px;font-weight:600;line-height:1.35;letter-spacing:0;text-transform:none;color:var(--ink)}
.what-next ol{margin:0;padding:0 0 0 1.25em;display:grid;gap:var(--stack);list-style:decimal}
.what-next li{font:400 16px/1.5 var(--sans);color:var(--ink);padding-left:.25em}
#order-form .what-next p.what-next-more,.what-next-more,.co-pay-note{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink2)}
.what-next a,.co-pay-note a,.trust-page a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.what-next a:focus-visible,.co-pay-note a:focus-visible,.trust-page a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.co-pay-block{display:grid;gap:var(--stack);margin-top:var(--action-gap)}
.co-pay-block .co-pay{margin-top:0}
.co-form .field-help{display:block;margin:var(--field-note-gap) 0 0;font:400 14px/1.5 var(--sans);color:var(--ink2)}
.trust-page{box-sizing:border-box;max-width:760px;margin:0 auto;padding:var(--section-gap) var(--inset) calc(var(--section-gap) + var(--inset));color:var(--ink)}
.trust-page h1{margin:0 0 var(--gap);font:600 clamp(30px,4vw,44px)/1.15 var(--heading);letter-spacing:-.02em}
.trust-page .lede{margin:0 0 var(--gap);font:400 16px/1.6 var(--sans);max-width:70ch}
.trust-page h2{margin:var(--space-6) 0 var(--gap);font:600 24px/1.3 var(--heading)}
.trust-page p{margin:0 0 var(--stack);font:400 16px/1.6 var(--sans);max-width:70ch}
.trust-page ul{margin:0 0 var(--gap);padding-left:1.25em}
.trust-page li{margin:0 0 var(--stack);font:400 16px/1.6 var(--sans);max-width:70ch}
.trust-page .what-next{margin:0 0 var(--space-6)}
.trust-confirm{margin-top:var(--gap);padding:var(--inset);border:1px solid var(--border2);border-radius:var(--card-radius);background:var(--surface)}
.trust-confirm p,.trust-confirm li{font-size:14px;color:var(--ink2)}
/* Reserve space outside focused fields so their rings cannot touch helper text.
   Shared by Shop, Make, Learn and embedded configurators. */
:root{--field-note-gap:16px}
body :is(input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=file]),textarea,select,[role=combobox],[data-studio-select],button,.control-row,.actions,.modal-actions,.download-row,.upload-zone) + :is(p,small,.small,.field-help,.form-error,.status,.co-note,.co-geo,.hint,.helper-text,.small-note,[data-field-help]){display:block;margin-block-start:var(--field-note-gap)}
/* These labels stack their text, control and helper using a flex gap. */
body .field:has(>:is(.small,small,.field-help)){row-gap:var(--field-note-gap)}
body .field>:is(input,textarea,select,[data-studio-select])+ :is(.small,small,.field-help){margin-block-start:0}

body label:has(>input:is([type=checkbox],[type=radio])){column-gap:var(--field-note-gap)}
/* Shared error treatment for retail, Make, account and embedded artwork forms. */
.site-error:not(:empty),[role="alert"]:not(:empty),.form-error:not(:empty),.generation-status.error:not(:empty),.art-msg.err[data-show="1"],.bm-error:not(:empty){display:block;color:#9f1d1d!important;background:#fff1f0!important;border:1.5px solid #d92d20;border-radius:10px;padding:12px 14px!important;font-size:14px!important;font-weight:600;line-height:1.55;overflow-wrap:anywhere;scroll-margin-top:112px}
.site-error:empty,[role="alert"]:empty,.form-error:empty{display:none}
.qr-purchase-status{width:100%;flex-basis:100%}
.printing-mark .sl-accent{fill:var(--gold,#ffba08);stroke:none}
.printing-mark .sl-printed{stroke:var(--gold,#ffba08);stroke-width:3;opacity:.4}
.printing-mark .sl-line{stroke:var(--gold,#ffba08);stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100;animation:sl-draw 2.4s ease-in-out infinite}
.printing-mark .sl-nozzle{animation:sl-move 2.4s ease-in-out infinite}
@keyframes sl-move{0%{transform:translateX(-30px)}70%{transform:translateX(30px)}100%{transform:translateX(-30px)}}
@keyframes sl-draw{0%{stroke-dashoffset:100;opacity:1}70%{stroke-dashoffset:0;opacity:1}88%,100%{stroke-dashoffset:0;opacity:0}}
@media(prefers-reduced-motion:reduce){.printing-mark .sl-nozzle,.printing-mark .sl-line{animation:none}.printing-mark .sl-line{stroke-dashoffset:0}}
.sketch-loader{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:56px 16px;color:var(--muted,#686760);text-align:center}
.sketch-loader p{margin:0;font-size:var(--text-small,14px)}

/* Hand-drawn doodles and moments (src/studio/doodles.js). Accent follows the page's --gold. */
.doodle{display:inline-block;line-height:0;flex:none}.doodle svg{display:block;overflow:visible}
.doodle .dd-accent{fill:var(--gold,#ffba08);stroke:none}
.doodle .dd-filament{stroke:var(--gold,#ffba08);stroke-width:14}.doodle .dd-strand{stroke:var(--gold,#ffba08);stroke-width:3}
/* Each doodle plays for under five seconds once it scrolls into view (experience.js adds .is-playing), then rests; hovering replays it. */
.doodle.is-playing .dd-phone{animation:dd-tap 2.4s ease-in-out 2}
.doodle-tap .dd-ripple{transform-box:fill-box;transform-origin:left center}.doodle.is-playing .dd-ripple{opacity:0;animation:dd-ripple 2.4s ease-out 2 backwards}
.doodle-tap .dd-ripple:nth-child(2){animation-delay:.14s}.doodle-tap .dd-ripple:nth-child(3){animation-delay:.28s}
.doodle.is-playing:hover *{animation-iteration-count:infinite}
@keyframes dd-tap{0%,100%{transform:translate(-12px,-20px)}30%,56%{transform:translate(0,0)}80%{transform:translate(-12px,-20px)}}
@keyframes dd-ripple{0%,30%{opacity:0;transform:scale(.7)}40%{opacity:1}72%,100%{opacity:0;transform:scale(1.15)}}
.doodle-reel .dd-reel{transform-box:fill-box;transform-origin:center}.doodle.is-playing .dd-reel{animation:dd-spin 4.5s cubic-bezier(.4,0,.3,1)}
@keyframes dd-spin{to{transform:rotate(360deg)}}
/* A tile flips to its new icon when the icon wheel settles. */
@keyframes tile-flip{from{transform:perspective(500px) rotateY(-90deg)}to{transform:perspective(500px) rotateY(0)}}
.tile-preview.is-flipping{animation:tile-flip .38s cubic-bezier(.3,.7,.4,1)}
/* A drawn underline under the handwritten words in section headings, once, as they come into view. */
.ink-underline{position:relative}.ink-underline.is-inline{display:inline-block}.ink-underline:not(.is-inline){width:fit-content}
.ink-strokes{position:absolute;inset:0;pointer-events:none}.ink-stroke{position:absolute;height:.15em;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8C40 3 80 10.5 120 6.2S180 3.6 197 7' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%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 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8C40 3 80 10.5 120 6.2S180 3.6 197 7' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.3,.7,.4,1) .15s;pointer-events:none}
.ink-underline.is-drawn .ink-stroke{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.doodle *{animation:none!important;opacity:1!important}.tile-preview.is-flipping{animation:none}.ink-stroke{transition:none}}