: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}}
:root{--ink:#1c1b18;--paper:#faf9f6;--gold:#ffba08;--muted:#686760;--line:#deded7;--sans:'DM Sans',Arial,sans-serif;--serif:'DM Serif Display',Georgia,serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #805600;outline-offset:4px}.skip{position:absolute;left:20px;top:-80px;background:white;padding:12px;z-index:50}.skip:focus{top:10px}.masthead{max-width:1440px;margin:auto;padding:25px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:28px}.wordmark{font-size:25px;letter-spacing:-1px;font-weight:700}.wordmark span{font-weight:400}.main-nav{display:flex;gap:30px;font-size:14px}.main-nav a:hover,.main-nav [aria-current]{text-decoration:underline;text-underline-offset:7px}.utility{display:flex;gap:18px;align-items:center;font-size:14px}.pill,.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;border:1px solid var(--ink);border-radius:6px;padding:12px 22px;font-weight:600;font-size:14px;background:transparent;color:var(--ink)}.pill{padding:8px 15px}.button.primary,.pill.primary{background:var(--ink);color:white}.button.gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}.button:hover,.pill:hover{transform:translateY(-1px)}.wrap{max-width:1320px;margin:auto;padding:0 5%}.eyebrow{font-size:12px;letter-spacing:0;font-weight:600;display:flex;align-items:center;gap:9px}.dot{width:7px;height:7px;background:var(--gold);border-radius:50%;display:inline-block}.hero{padding:75px 0 55px;display:grid;grid-template-columns:1.03fr 1fr;gap:55px;align-items:center}h1,h2,h3,p{margin-top:0}h1{font-weight:400;font-size:clamp(52px,5.7vw,84px);line-height:1.03;letter-spacing:-3.5px;margin:26px 0}h1 em,h2 em{font-family:var(--serif);font-weight:400}h2{font-size:clamp(32px,3.3vw,48px);font-weight:400;line-height:1.12;letter-spacing:-1.5px}h3{font-size:22px;line-height:1.25;font-weight:500;letter-spacing:-.5px}.lede{font-size:16px;color:var(--muted);max-width:480px;line-height:1.8}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:28px 0}.text-link{font-size:14px;text-decoration:underline;text-underline-offset:5px}.hero-visual{position:relative;background:#e5e5e0;border-radius:12px;overflow:hidden;min-height:490px}.hero-visual img{width:100%;height:490px;object-fit:cover;object-position:67% center}.visual-label{position:absolute;bottom:22px;left:22px;right:22px;background:#fffef9ed;backdrop-filter:blur(12px);border-radius:7px;padding:15px 18px;display:flex;justify-content:space-between;align-items:center;font-size:12px}.visual-label strong{display:block;font-size:16px}.vertical-note{position:absolute;top:20px;left:20px;background:var(--paper);border-radius:4px;padding:6px 10px;font-size:12px;letter-spacing:1px}.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:20px 0;gap:20px;font-size:12px;letter-spacing:0;}.section{padding:72px 0;border-bottom:1px solid var(--line)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:30px}.section-head h2{margin-bottom:0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{border:1px solid var(--line);border-radius:10px;background:#fff;padding:27px;display:flex;flex-direction:column;align-items:start}.card p{font-size:14px;color:var(--muted)}.card .text-link{margin-top:auto}.number{font-family:monospace;font-size:12px;color:var(--muted);margin-bottom:34px}.card-visual{height:190px;width:100%;object-fit:cover;border-radius:7px;margin-bottom:23px}.split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.split img{width:100%;border-radius:10px;max-height:420px;object-fit:cover}.membership{background:#232720;color:#fff;border-radius:12px;padding:48px;display:grid;grid-template-columns:1.1fr 1fr;gap:70px}.membership .eyebrow{color:#d9e2c8}.membership p{color:#c9cec3}.price{font-size:60px;letter-spacing:-3px;line-height:1.2}.price small{font-size:14px;letter-spacing:0;color:#ccc}.checklist{padding:0;list-style:none;font-size:14px}.checklist li{padding:11px 0;border-bottom:1px solid #ffffff24}.checklist li:before{content:'✓';margin-right:12px;color:var(--gold)}.small{font-size:14px;color:var(--muted)}.membership .small{color:#c9cec3}.footer{padding:45px 5%;max-width:1440px;margin:auto;display:flex;justify-content:space-between;gap:25px}.footer-links{display:flex;gap:24px;flex-wrap:wrap;font-size:14px}.page-intro{padding:64px 0 30px;max-width:760px}.page-intro h1{font-size:64px}.notice{background:#fff2cd;border:1px solid #e6cf88;border-radius:6px;padding:14px 18px;font-size:14px;margin:20px 0}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.tabs button{border:1px solid var(--line);border-radius:30px;background:white;padding:8px 16px;font-size:14px}.tabs button[aria-pressed=true]{background:var(--ink);color:white}.search{width:100%;max-width:420px;padding:12px 15px;border:1px solid var(--line);border-radius:7px;background:#fff}.model-card{padding:15px}.model-card .card-visual{height:240px;background:#eee}.model-card .details{padding:8px 9px;width:100%}.model-card .button{width:100%;margin-top:13px}.badge{font-size:12px;letter-spacing:0;background:#efefe7;padding:5px 8px;border-radius:4px;display:inline-block;margin-bottom:12px}.price-row{display:flex;justify-content:space-between;align-items:center;font-size:14px}.form-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;margin-bottom:70px}.form-card{background:white;border:1px solid var(--line);border-radius:10px;padding:30px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{display:flex;flex-direction:column;gap:7px;font-size:14px}.field.full{grid-column:1/-1}.field input,.field select,.field textarea{width:100%;padding:12px;border:1px solid #c8c8be;border-radius:5px;background:white}.field textarea{min-height:100px}.consent{display:flex;gap:10px;font-size:14px;align-items:flex-start;margin:24px 0}.consent input{margin-top:5px;flex-shrink:0}.summary{align-self:start;position:sticky;top:24px}.summary-row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}.summary-row button{font-size:12px;border:0;background:none;text-decoration:underline}.status{font-size:14px;white-space:pre-line}.status:empty{display:none}details{border-bottom:1px solid var(--line);padding:20px 0}summary{cursor:pointer;font-weight:500}details p{color:var(--muted);font-size:14px;margin:16px 0 0}.mobile-menu{display:none}.empty{padding:40px 0;color:var(--muted)}@media(max-width:900px){.hero{gap:25px}.hero-visual,.hero-visual img{min-height:400px;height:400px}.main-nav{gap:16px}.utility>a:first-child{display:none}.membership{gap:30px;padding:30px}.split{gap:30px}}@media(max-width:680px){.masthead{flex-wrap:wrap;padding:18px 5%;gap:12px}.wordmark{font-size:22px}.main-nav{order:3;width:100%;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px;font-size:14px}.utility{gap:10px}.pill{padding:7px 10px;font-size:12px}.hero{grid-template-columns:1fr;padding:35px 0}.hero h1{font-size:62px}.hero-visual,.hero-visual img{height:340px;min-height:340px}.strip{font-size:12px;letter-spacing:.5px;gap:10px;flex-wrap:wrap}.grid,.split,.membership,.form-layout{grid-template-columns:1fr}.section{padding:45px 0}.section-head{align-items:start;flex-direction:column;gap:15px}.membership{gap:18px}.footer{flex-direction:column}.fields{grid-template-columns:1fr}.field.full{grid-column:auto}.page-intro h1{font-size:48px}.summary{position:static}.form-card{padding:22px}.page-intro{padding-top:35px}.card-visual{height:220px}.number{margin-bottom:20px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Studio art direction. Content surfaces are rounded; actions are pills. */
@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{--paper:#fff;--ink:#111;--muted:#62625e;--line:#e9e8e4;--sans:Manrope,Arial,sans-serif;--serif:Caveat,cursive;--radius-surface:26px;--radius-action:999px;--heading:Bricolage,Arial,sans-serif}body{line-height:1.5}.wrap{max-width:1540px;padding:0 4%}.masthead{max-width:1540px;padding:22px 4%;border:0;position:relative;z-index:70;background:#fff;gap:25px}.wordmark{font-family:var(--heading);font-size:28px;letter-spacing:-1.4px;font-weight:700;line-height:1}.wordmark img{display:block;width:144px;height:48px;object-fit:contain}.main-nav{align-items:center;font-size:14px;gap:28px}.main-nav>a{padding:9px 0}.utility{gap:15px}.utility .ttc-cart-btn{margin-left:0!important}.button,.pill{border-radius:var(--radius-action);font-family:var(--heading);font-weight:500;padding:14px 23px;gap:16px;line-height:1.15;min-height:48px;transition:background 180ms,transform 180ms}.pill{min-height:40px;padding:11px 18px}.button.primary,.pill.primary{background:#111;color:#fff}.button.primary:hover,.pill.primary:hover{background:var(--gold);color:var(--ink)}.button.gold{color:#111;background:var(--gold);border-color:var(--gold)}.button.outline{background:white;border-color:var(--action-border,#1C1B18)}.text-link{display:inline-flex;align-items:center;gap:13px;font-size:14px}.card,.form-card,.membership,.notice{border-radius:var(--radius-surface)}.field input,.field select,.field textarea,.search{border-radius:10px}.badge{border-radius:5px}.card h3,h1,h2,h3{font-family:var(--heading);font-weight:500}h1 em,h2 em{font-family:var(--serif);font-weight:600;font-style:normal;letter-spacing:-1.5px}h1{letter-spacing:-3px}h2{letter-spacing:-1.6px;line-height:1.04}.lede{line-height:1.5}.footer{border-top:1px solid var(--line);max-width:1420px;padding:36px 0;margin:50px auto 0;align-items:start}.footer-links{align-items:center}.footer .small{line-height:1.5;margin-top:14px}.membership{background:#111}.membership .eyebrow{display:none}
.studio-hero{display:grid;grid-template-columns:.97fr 1.03fr;align-items:center;gap:36px;padding:45px 0 62px}.hero-copy{padding:15px 0}.studio-hero h1{font-size:clamp(62px,7.7vw,118px);font-weight:600;line-height:.93;letter-spacing:-6px;margin:0 0 28px}.studio-hero h1 em{display:block;font-size:1.2em;line-height:.87;margin:5px 0 0;letter-spacing:-5px;transform:rotate(-3deg);transform-origin:left center}.hero-description{font-size:18px;line-height:1.45;color:#545450;margin-top:34px}.studio-hero .actions{gap:10px;margin:23px 0}.studio-hero .button{font-size:14px;padding:15px 21px}.hand-note{font:600 25px/1.1 Caveat,cursive;transform:rotate(-3deg);margin:30px 0 0 16px;color:#605e53}.hero-photo{margin:0;position:relative;align-self:stretch;min-height:580px}.hero-photo>img{display:block;width:100%;height:100%;max-height:650px;min-height:580px;object-fit:cover;object-position:57% center;border-radius:var(--radius-surface)}.hero-photo figcaption{position:absolute;bottom:13px;left:20px;right:15px;font-size:12px;color:white;text-shadow:0 1px 6px #000;background:#0006;border-radius:4px;width:fit-content;padding:3px 7px}.studio-intro{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;padding:58px 0 42px;border-top:1px solid var(--line)}.studio-intro h2{font-size:clamp(40px,4.5vw,64px);margin:0}.studio-intro h2 em{font-size:1.18em;line-height:1}.studio-intro p{font-size:18px;line-height:1.5;max-width:500px;margin-bottom:18px}.image-paths{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;padding:10px 0 72px}.image-path{display:block;min-width:0}.path-image{position:relative;overflow:hidden;border-radius:var(--radius-surface);aspect-ratio:1/1.06;background:#f0efeb}.path-image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 650ms cubic-bezier(.2,.7,.3,1)}.image-path:nth-child(2){padding-top:65px}.image-path:nth-child(2) .path-image{aspect-ratio:1/1.04}.image-path:nth-child(2) img{object-position:28% center}.image-path:nth-child(3){padding-top:28px}.image-path h3{font-size:25px;margin:20px 0 5px;letter-spacing:-.7px}.image-path p{font-size:14px;color:var(--muted);line-height:1.4;margin:0}.path-action{display:grid;place-items:center;position:absolute;bottom:16px;right:16px;width:44px;height:44px;border-radius:50%;background:white;color:#111;transition:background 180ms}.image-path:hover .path-image img{transform:scale(1.035)}.image-path:hover .path-action{background:var(--gold)}.studio-feature{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center;padding:58px 0}.studio-feature figure{margin:0}.studio-feature img{display:block;width:100%;height:490px;object-fit:cover;border-radius:var(--radius-surface)}.studio-feature h2{font-size:clamp(38px,4.1vw,60px);margin-bottom:24px}.studio-feature h2 em{font-size:1.12em;line-height:1.04}.studio-feature p{font-size:16px;color:#53534f;line-height:1.5;max-width:480px;margin-bottom:26px}.studio-membership{background:#111;color:#fff;border-radius:var(--radius-surface);display:grid;grid-template-columns:1.2fr 1fr;gap:100px;padding:66px;margin:58px 0}.studio-membership h2{font-size:clamp(38px,4vw,60px);line-height:1.05}.studio-membership h2 em{font-size:1.08em}.studio-membership p{font-size:16px;color:#c1c1bb;max-width:470px;line-height:1.5}.studio-membership .button{margin-top:14px}.studio-membership .membership-price{font:500 60px/1 var(--heading);letter-spacing:-2px;color:white;margin-bottom:24px}.membership-price span{font:400 14px/1 var(--sans);letter-spacing:0;margin-left:7px}.member-details ul{list-style:none;margin:0 0 20px;padding:0}.member-details li{padding:13px 0;border-bottom:1px solid #ffffff26;font-size:14px}.member-details li::before{content:'+';color:var(--gold);padding-right:13px}.studio-membership .small{font-size:14px;line-height:1.5;margin-bottom:20px}.workshop-feature{grid-template-columns:.9fr 1.1fr}.studio-outro{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:80px;padding:75px 0 55px;border-top:1px solid var(--line);margin-top:55px}.studio-outro h2{font-size:64px;margin:0}.studio-outro p{font-size:18px;max-width:420px;margin-bottom:23px}.studio-home .footer{margin-top:30px}
@media(min-width:1550px){.studio-hero h1{font-size:120px}}@media(max-width:1100px){.masthead{gap:16px}.main-nav{gap:19px}.utility>a:first-child{display:none}.studio-hero h1{font-size:83px;letter-spacing:-4px}.studio-hero .actions{flex-direction:column;align-items:flex-start}.hero-photo,.hero-photo>img{min-height:530px}.studio-feature{gap:38px}.studio-membership{gap:45px;padding:40px}.footer{margin-left:4%;margin-right:4%}.studio-intro{gap:45px}}@media(max-width:760px){.masthead{flex-wrap:wrap;padding:16px 5%}.wordmark{font-size:24px}.wordmark img{width:120px;height:42px}.main-nav{order:3;width:100%;justify-content:space-between;gap:12px;border-top:1px solid #eee;padding-top:8px}.utility{margin-left:auto;gap:9px}.utility .pill{font-size:12px;min-height:36px;padding:10px 12px}.utility .ttc-cart-ico{height:25px;width:25px}.wrap{padding:0 5%}.studio-hero{grid-template-columns:1fr;gap:28px;padding:32px 0 38px}.hero-copy{padding:0}.studio-hero h1{font-size:clamp(65px,12.6vw,96px);letter-spacing:-3.5px;line-height:.96}.studio-hero h1 em{display:inline-block;letter-spacing:-3px;line-height:.95;margin-left:4px}.hero-description{font-size:16px;margin-top:26px}.studio-hero .actions{flex-direction:row;gap:9px}.studio-hero .button{font-size:12px;padding:13px 17px;min-height:44px}.hand-note{font-size:23px;margin:24px 0 0 8px}.hero-photo,.hero-photo>img{min-height:0;height:420px;max-height:none}.hero-photo img{object-position:50% center}.studio-intro{grid-template-columns:1fr;gap:22px;padding:38px 0 28px}.studio-intro h2{font-size:44px}.studio-intro p{font-size:16px}.image-paths{gap:16px;grid-template-columns:1fr;padding-bottom:25px}.image-path:nth-child(n){padding-top:0;margin-bottom:20px}.path-image,.image-path:nth-child(2) .path-image{aspect-ratio:1.23}.image-path h3{font-size:24px;margin-top:15px}.studio-feature,.workshop-feature{grid-template-columns:1fr;gap:28px;padding:34px 0}.studio-feature img{height:340px}.studio-feature h2{font-size:42px}.studio-feature p{font-size:16px}.studio-membership{grid-template-columns:1fr;padding:30px 25px;gap:28px;margin:30px 0}.studio-membership h2{font-size:42px}.studio-membership .membership-price{font-size:48px}.studio-outro{grid-template-columns:1fr;gap:25px;padding:35px 0;margin-top:28px}.studio-outro h2{font-size:50px}.studio-outro p{font-size:16px}.footer{padding:28px 0}.footer-links{gap:18px}.footer .wordmark img{width:120px}}@media(prefers-reduced-motion:reduce){.path-image img,.button,.pill{transition:none}.image-path:hover .path-image img{transform:none}}
/* Display the supplied transparent logo at its artwork bounds, without modifying it. */
.wordmark .brand-logo{position:relative;display:block;width:140px;height:58px;overflow:hidden}.wordmark .brand-logo img{position:absolute;max-width:none;width:170.45px;height:95.88px;left:-16.87px;top:-15.71px;object-fit:fill}@media(max-width:760px){.wordmark .brand-logo{width:112px;height:46.4px}.wordmark .brand-logo img{width:136.36px;height:76.7px;left:-13.5px;top:-12.57px}}

/* Gold marks interactive moments; surfaces retain their quieter rounded shape. */
.studio-home .hero-copy em { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: .045em; text-underline-offset: .12em; }
.main-nav>a { position: relative; transition: color .2s; }
.main-nav>a::after { content: ''; position: absolute; bottom: -5px; left: 0; height: 3px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .22s; }
.main-nav>a:hover::after,.main-nav>a:focus-visible::after,.main-nav>a[aria-current]::after { transform: scaleX(1); }
.button,.pill { transition: background .2s,color .2s,transform .2s,box-shadow .2s; }
.button:hover,.pill:hover,.button.primary:hover,.pill.primary:hover,.button.outline:hover { background: var(--gold); color: var(--ink); box-shadow: 0 5px 0 #111; transform: translateY(-3px); }
.button:active,.pill:active { transform: translateY(0); box-shadow: none; }
.button svg,.path-action svg { transition: transform .25s; }
.image-path:hover .path-action svg { transform: translate(2px,-2px); }
@keyframes button-arrow-bounce { from { transform: translate(0,0); } to { transform: translate(2px,-2px); } }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .button:hover .button-arrow,.pill:hover .button-arrow { animation: button-arrow-bounce 550ms cubic-bezier(.45,0,.55,1) infinite alternate; }
}
@media (prefers-reduced-motion:reduce) { .button-arrow { animation:none!important; transform:none!important; } }
.hand-note { color: #8b6500; }
.image-path:focus-within .path-image,.image-path:hover .path-image { box-shadow: 0 0 0 3px var(--gold); }
.studio-membership { border: 1px solid var(--gold); }
:where(.button,.pill,.main-nav a):focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
@media(prefers-reduced-motion:reduce) { .button,.pill,.button svg,.path-action svg { transition:none; transform:none!important; } .main-nav>a::after { transition:none; } }
@media(prefers-reduced-motion:no-preference) { .reveal { opacity:0; translate:0 18px; transition:opacity .6s ease,translate .6s cubic-bezier(.16,1,.3,1); } .reveal.is-visible { opacity:1; translate:0 0; } }

/* Keep the headline in three deliberate lines at every screen size. */
.studio-hero h1 em { display:inline-block; }
@media(max-width:760px) { .studio-hero h1 { font-size:clamp(54px,11.8vw,88px); } .studio-hero h1 em { margin-left:0; } }

.hero-idea-line { white-space:nowrap; }
@media(min-width:761px) and (max-width:1100px) { .studio-hero h1 { font-size:clamp(54px,7.1vw,78px); } }

/* Clear routes, real examples and readable purchase information. */
.studio-proof{padding:45px 0 65px;border-top:1px solid var(--line)}
.studio-proof h2{font-size:clamp(36px,4vw,54px);line-height:1.04;margin-bottom:30px}
.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.proof-grid article{min-width:0}.proof-grid>article>img,.making-example{width:100%;height:290px;object-fit:cover;border-radius:26px;margin-bottom:20px}
.proof-grid>article:first-child>img{object-position:center 65%}
.proof-grid h3{font-size:24px;line-height:1.12;margin-bottom:12px}
.proof-grid p{margin-bottom:14px}.proof-grid blockquote{font:500 23px/1.3 var(--heading);margin:0 0 14px}
.making-example{display:flex;align-items:center;gap:8px;padding:18px;background:#f4f4ef;overflow:hidden}
.making-example img{width:44%;height:85%;object-fit:contain}.making-example span{font-size:24px}
.make-route-card .make-preview{width:100%;height:245px;object-fit:contain;border-radius:26px;background:#f4f4ef;margin-bottom:25px}
.make-route-media{position:relative;width:100%;margin-bottom:22px}
.make-routes .make-route-card .make-route-media .make-preview{display:block;margin-bottom:0}
.make-routes .make-route-card .make-route-media .qr-preview{display:flex}
.make-routes .make-route-card .qr-generator-preview{object-fit:cover;padding:0;background:#20c4cc}
.make-route-media .make-access-pill{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;min-height:32px;margin:0;padding:7px 13px;border:2px solid var(--ink);border-radius:var(--button-radius,999px);background:var(--gold);color:var(--ink);box-shadow:2px 2px 0 var(--ink);font-family:var(--sans);font-size:var(--text-small,14px);font-weight:700;line-height:1.15;letter-spacing:0;text-transform:none}
.make-route-media .make-access-pill.is-paid{background:var(--ink);color:var(--paper)}
.qr-preview{display:flex;align-items:center;justify-content:center;gap:25px;padding:24px}.qr-preview img{width:42%;height:auto}.qr-preview p{font:500 28px/1.1 var(--heading);margin:0}.qr-preview em{font:600 36px/1.1 Caveat,cursive}
.license-options{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:25px}
.license-options article{border:1px solid var(--line);border-radius:26px;padding:25px}.license-options h2{font-size:24px;letter-spacing:-.6px;margin-bottom:12px}.license-options p{margin:0;max-width:50ch}
.download-note{max-width:85ch;color:#454545;font-size:16px}
.model-card .card-visual{object-fit:contain;background:#f2f2ef}.model-card .details{display:flex;flex-direction:column;align-items:stretch}.model-card .badge{align-self:flex-start}.model-card h3{font-family:var(--heading);font-size:25px;line-height:1.15}
.model-card .price-row strong{font-size:25px;white-space:nowrap}.model-card .price-row span{font-size:14px}.model-card .button{margin-top:auto}
.print-notes{border-top:1px solid var(--line);padding:15px 0;margin:0 0 18px;font-size:14px}.print-notes summary{cursor:pointer;font-weight:600;list-style:revert}.print-notes p{margin:12px 0;color:#454545}.print-notes .package-parts{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}.package-parts span{padding:7px 10px;border:1px solid var(--line);border-radius:12px;font-size:12px;color:#222}
@media(max-width:760px){.proof-grid,.license-options{grid-template-columns:1fr}.studio-proof{padding:30px 0}.proof-grid{gap:32px}.proof-grid>article>img,.making-example{height:280px}.make-route-card .make-preview{height:220px}.qr-preview{gap:15px;padding:18px}.qr-preview p{font-size:24px}.license-options{gap:14px}.license-options article{padding:20px}}

/* Founder story and an accessible, concrete example of algorithmic making. */
.founder-feature figcaption,.founder-photo figcaption{font-size:14px;color:var(--muted);margin-top:12px}
.founder-feature h2{font-size:clamp(32px,3.1vw,46px)}
.founder-photo{margin:0;min-width:0}.founder-photo img{display:block;width:100%;border-radius:26px;object-fit:cover}
.story-chapter,.process-intro{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:start}
.story-chapter p,.founder-intro p{max-width:60ch}
.making-process h2 em{color:var(--gold)}
.process-steps{list-style:none;padding:0;margin:34px 0 16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:making}
.process-steps li{min-width:0;counter-increment:making}.process-steps h3{font-size:23px;margin:22px 0 12px}.process-steps h3:before{content:counter(making,decimal-leading-zero) ' / ';font-size:14px;color:var(--muted);margin-right:7px}
.process-steps p{color:var(--muted);font-size:16px;max-width:38ch}.process-visual{height:270px;border:1px solid var(--line);border-radius:26px;padding:26px;display:flex;align-items:center;justify-content:center;background:#f6f6f1;overflow:hidden}.process-visual img{display:block;width:80%;height:100%;object-fit:contain}.process-visual .process-product{width:100%}
.process-input{flex-direction:column;align-items:stretch;gap:18px}.process-field-label{font-weight:600}.example-link{border:1px solid var(--line);border-radius:12px;padding:14px;background:white;overflow-wrap:anywhere}.process-hint{font-size:14px;color:var(--muted)}.process-caption{max-width:75ch;margin-bottom:25px}
@media(max-width:900px){.story-chapter,.process-intro{gap:30px}.process-steps{gap:16px}.process-visual{padding:18px;height:230px}}
@media(max-width:760px){.story-chapter,.process-intro,.process-steps{grid-template-columns:1fr}.story-chapter,.process-intro{gap:16px}.process-steps{gap:25px}.process-visual{height:260px}.founder-feature h2{font-size:34px}}

/* Real studio photographs: keep hands, faces and objects in the crop. */
.hero-photo>img{object-position:50% 58%}.hero-photo figcaption{font-size:12px}
.founder-feature img{height:auto;aspect-ratio:4/5;object-position:50% 44%}
.founder-photo img{max-height:none;aspect-ratio:4/5;object-position:50% 66%}
.path-image .assembly-photo{object-position:50% 56%}
.proof-grid>article:first-child>.counter-photo{object-position:50% 62%}
.process-visual .process-product{height:100%;width:100%;object-fit:cover;object-position:50% 60%;border-radius:14px}
.idea-gallery .section-head p{max-width:40ch;color:var(--muted)}
.idea-photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.idea-photo-pair figure{margin:0;min-width:0}.idea-photo-pair img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:26px}.idea-photo-pair figure:first-child img{object-position:50% 58%}.idea-photo-pair figure:last-child{margin-top:70px}.idea-photo-pair figure:last-child img{object-position:50% 54%}.idea-photo-pair figcaption{font-size:14px;margin-top:12px;color:var(--muted)}
@media(max-width:760px){.idea-photo-pair{gap:20px;grid-template-columns:1fr}.idea-photo-pair figure:last-child{margin-top:0}.founder-feature img{aspect-ratio:4/5}.hero-photo>img{object-position:50% 58%}}

/* Keep the dial code and phone aligned without squeezing mobile inputs. */
.profile-phone{display:grid;grid-template-columns:minmax(110px,.65fr) minmax(0,1.35fr);gap:12px}.profile-phone .field{min-width:0}.profile-phone .studio-select-trigger{width:100%}
/* Member workspace: shadcn primitives, 21st.dev dashboard/card layout reference. */
.maker-account{margin-bottom:64px}.maker-panel{border:1px solid #e2e3df;border-radius:var(--card-radius,26px);padding:28px;background:#fff}.maker-eyebrow{font-size:12px;font-weight:800;letter-spacing:0;color:#647067}.maker-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px 0}.maker-heading h1{font-size:40px;margin:16px 0 8px}.maker-heading .text-link{display:inline-flex;align-items:center;gap:8px}.maker-badge{display:inline-flex;gap:8px;align-items:center;border-radius:99px;background:#eaf7ec;padding:8px 12px;font-size:12px;color:#24622d}.maker-workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start}.maker-preview{position:sticky;top:110px;background:#f0f1ed;border-radius:24px;min-height:480px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}.flat-model{padding:20px;border:1px solid #c8cbc4;border-radius:14px;box-shadow:0 16px 30px #0001;margin:24px auto;width:100%;max-width:440px}.flat-face{height:180px;border:1px solid #ccc;border-radius:12px;margin-bottom:20px}.flat-tiles{display:flex;gap:10px;justify-content:center}.flat-tiles button{border:0;padding:4px;border-radius:10px;flex:1;max-width:100px;aspect-ratio:1}.flat-tiles button[aria-pressed=true]{outline:2px solid #36b34a;outline-offset:4px}.flat-tiles span{display:grid;place-items:center;border-radius:8px;width:100%;height:100%}.flat-tiles i{display:block;width:65%;height:65%;mask-size:contain;mask-repeat:no-repeat;mask-position:center}.flat-caption{text-align:center;font-size:12px;font-weight:800;margin-top:16px}.maker-settings h2{font-size:18px;margin:24px 0 12px}.maker-settings h2:first-child{margin-top:0}.maker-part-tabs{display:flex;flex-wrap:wrap;gap:8px}.maker-tab{display:inline-flex;align-items:center;gap:8px;border:1px solid #d9dcd5;background:#fff;border-radius:9px;padding:8px 12px;color:#242820;cursor:pointer;font:inherit;font-size:14px}.maker-tab span{width:14px;height:14px;border:1px solid #0002;border-radius:50%}.maker-tab[aria-pressed=true]{background:#e9f6eb;border-color:#2c8d3b}.maker-colour-label{font-size:14px;margin:18px 0 10px;display:flex;justify-content:space-between}.maker-palette{display:grid;grid-template-columns:repeat(auto-fill,32px);gap:10px}.maker-palette button{height:30px;width:30px;border-radius:50%;border:1px solid #0002;cursor:pointer}.maker-palette button[aria-pressed=true]{outline:2px solid #222;outline-offset:3px}.maker-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:14px}.maker-icons button{display:flex;align-items:center;flex-direction:column;gap:8px;padding:10px 4px;border:1px solid #e2e3df;border-radius:10px;background:#fff;cursor:pointer}.maker-icons img{width:26px;height:26px}.maker-icons span{font-size:12px}.maker-icons button[aria-pressed=true]{background:#e9f6eb;border-color:#2c8d3b}.maker-download{margin-top:24px;border-top:1px solid #e2e3df;padding-top:24px}.maker-download .button{width:100%;font-size:14px;gap:8px;white-space:normal}.maker-download button:disabled{opacity:.6}.maker-select{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:var(--control-height,44px);padding:12px;border:1px solid #ddd;border-radius:10px;background:#fff}.maker-options{z-index:1000;background:white;border:1px solid #ddd;border-radius:10px;padding:8px;box-shadow:0 8px 24px #0002}.maker-options [role=option]{padding:10px 26px;position:relative;cursor:pointer}.maker-options [data-highlighted]{background:#e9f6eb}.maker-designer>.print-notes{margin:28px 0 var(--space-section,48px)}.maker-designer button:focus-visible{outline:3px solid #2c8d3b;outline-offset:3px}@media(max-width:850px){.maker-workspace{grid-template-columns:1fr}.maker-preview{position:static;min-height:340px}.maker-heading{align-items:flex-start;flex-direction:column}.maker-panel{padding:20px}}@media(max-width:520px){.maker-heading h1{font-size:32px}}

/* Keep the library heading and its two paragraphs in one compact intro. */
.library-intro{max-width:900px;padding-bottom:24px}
.library-intro h1{display:flex;flex-direction:column;gap:0;line-height:1.02;margin-bottom:24px}
.library-intro h1 em{display:block;line-height:.9;margin-top:-.02em}
.library-intro .lede{margin:0;max-width:85ch}
.library-intro .download-note{margin:16px 0 0}
.maker-preview-3d{padding:0;overflow:hidden;gap:0;min-height:0;background:#f6f6f4}
.maker-preview-label{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #deded7}
.maker-preview-label .small{font-size:14px}
.maker-model-frame{display:block;width:100%;height:540px;border:0;background:#f6f6f4}
.maker-preview-status:empty{display:none}.maker-preview-status{padding:12px 20px;font-size:14px}
@media(max-width:850px){.maker-model-frame{height:420px}}
@media(max-width:520px){.maker-model-frame{height:360px}.maker-preview-label{padding:12px;flex-wrap:wrap}}
/* Member print controls reuse the retail viewer; tile choices sit beside it. */
.maker-preview-3d{position:static;align-self:start;padding:0;gap:0;min-height:0;overflow:hidden}
.maker-preview-3d .maker-model-frame{display:block;width:100%;max-height:none;border:0}
.maker-preview-3d .maker-preview-status:empty{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Member tile cards mirror the retail tile card and icon wheel (src/styles.css "Order Page: Tile Groups" and ".tile-config-row"). Keep the two in step. */
.member-tile-list{display:grid;gap:16px}
.maker-designer .tile-group{background:#f4f4f4;border-radius:12px;padding:20px}
.maker-designer .tile-group-label{display:block;margin-bottom:14px;font-size:12px;font-weight:800;letter-spacing:0;color:#647067}
.maker-designer .tile-config-row{--iw-pv:150px;--iw-h:150px;display:flex;gap:14px;align-items:flex-start}
.maker-designer .tile-preview{position:relative;flex:none;width:var(--iw-pv);aspect-ratio:1;border-radius:12.2%;overflow:hidden;border:1px solid rgba(28,27,24,.1);box-shadow:0 1px 4px rgba(28,27,24,.08)}
.maker-designer .tp-bg{position:absolute;inset:0;background:#fefefe}
.maker-designer .tp-icon{position:absolute;left:50%;top:50%;width:72%;aspect-ratio:1;transform:translate(-50%,-50%);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.maker-designer .icon-wheel-box{position:relative;flex:1;min-width:0;height:var(--iw-h);border:1.5px solid rgba(28,27,24,.18);border-radius:14px;background:#fff;overflow:hidden}
.maker-designer .icon-wheel-box:has(.icon-wheel:focus-visible){outline:3px solid #805600;outline-offset:3px}
.maker-designer .iw-highlight{position:absolute;left:10px;right:10px;top:50%;height:34px;transform:translateY(-50%);border-radius:9px;background:rgb(var(--ring-rgb,255 186 8) / .13);border:1.5px solid var(--gold,#ffba08);pointer-events:none}
.maker-designer .icon-wheel{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;outline:0}
.maker-designer .icon-wheel::-webkit-scrollbar{display:none}
.maker-designer .iw-item{display:flex;align-items:center;justify-content:center;height:34px;scroll-snap-align:center;cursor:pointer;font-size:14px;color:#565656;white-space:nowrap;will-change:transform,opacity}
.maker-designer .iw-item.centered{color:var(--ink);font-weight:600}
.maker-designer .iw-arrows{display:flex;flex:none;flex-direction:column;gap:8px;height:var(--iw-h)}
.maker-designer .iw-arrow{flex:1;width:44px;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(28,27,24,.18);border-radius:12px;background:#fff;color:#565656;transition:border-color .15s,color .15s}
.maker-designer .iw-arrow:hover{border-color:var(--ink);color:var(--ink)}.maker-designer .iw-arrow:disabled{opacity:.35;cursor:default}
@media(max-width:640px){.maker-designer .tile-config-row{--iw-pv:168px;--iw-h:168px;gap:10px}.maker-designer .iw-highlight{left:6px;right:6px}.maker-designer .iw-arrows{display:none}}
@media(max-width:360px){.maker-designer .tile-config-row{--iw-pv:148px;--iw-h:148px}}
/* On mobile the settings sit on the page like the retail tile cards; the 3D frame goes full width via the shared .cfg-box rule. */
@media(max-width:640px){.maker-settings.maker-panel{border:0;padding:0;background:transparent}}
/* Member colour tools mirror the product page's logo match panel (src/styles.css ".bm-*") in the studio type and button styles. */
.colour-tools{display:grid;gap:16px}.colour-tools h2{margin-bottom:0}
.maker-designer .bm-wrap{padding:20px;border-radius:12px;background:#f4f4f4}
.maker-designer .bm-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.maker-designer .bm-title{margin:0 0 6px;font:800 12px/1.4 var(--sans);letter-spacing:0;color:#647067}
.maker-designer .bm-hint{margin:0;font-size:var(--text-small,14px);line-height:1.5;color:var(--muted)}
.maker-designer .bm-btn{position:relative;flex:none;gap:8px;cursor:pointer;background:#fff}.maker-designer .bm-btn.is-busy{opacity:.6;pointer-events:none}
.maker-designer .bm-btn:has(input:focus-visible){outline:3px solid #805600;outline-offset:3px}
.maker-designer .bm-exact{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:var(--text-small,14px);cursor:pointer}.maker-designer .bm-exact input{width:18px;height:18px;margin:1px 0 0;accent-color:#111}.maker-designer .bm-exact small{display:block;color:var(--muted);font-size:12px}
.maker-designer .bm-result{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(28,27,24,.18);display:grid;gap:10px}.maker-designer .bm-result[hidden]{display:none}
.maker-designer .bm-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.maker-designer .bm-art{width:44px;height:44px;flex:none;border-radius:8px;border:1px solid rgba(28,27,24,.18);background:#fff center/contain no-repeat}
.maker-designer .bm-found{display:flex;gap:4px}.maker-designer .bm-found span,.maker-designer .bm-chip span{display:inline-block;width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.maker-designer .bm-arrow{color:var(--muted)}.maker-designer .bm-map{display:flex;flex-wrap:wrap;gap:6px}
.maker-designer .bm-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border-radius:999px;background:#fff;font-size:12px;color:#454545}.maker-designer .bm-chip span{width:12px;height:12px}.maker-designer .bm-chip b{font-weight:700;color:var(--ink)}
.maker-designer .bm-notes{margin:0;padding-left:18px;font-size:14px;color:var(--muted);line-height:1.5}
.maker-designer .bm-error{margin:0;font-size:var(--text-small,14px);color:#b42318}
@media(max-width:520px){.maker-designer .bm-head{flex-direction:column;align-items:flex-start}}
/* Sized like the product pages (src/styles.css .product-wrap and #customise #order-form): 1020 px of content,
   two equal columns 72 px apart, the 3D viewer pinned under the header until the settings column ends. */
.make-routes{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.make-routes .make-route-card .make-preview{aspect-ratio:16/10;margin-bottom:18px}
@media(min-width:821px){.make-routes .make-route-card h2{font-size:28px}.make-routes .make-route-card p{font-size:var(--text-small,14px)}.make-routes .qr-preview p{font-size:22px}}.make-routes .qr-preview img{max-height:100%;width:auto;max-width:42%}
.maker-designer{max-width:1020px;margin-inline:auto}
.maker-heading{padding:32px 0 24px}.maker-heading h1{margin:20px 0 8px}
.maker-back{gap:6px;min-height:var(--control-height,44px);padding:10px 18px 10px 12px;font-size:14px}
.maker-settings.maker-panel{border:0;padding:0;background:transparent}
.maker-download p:empty{display:none}
@media(min-width:821px){.maker-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}.maker-preview-3d{position:sticky;top:calc(84px + env(safe-area-inset-top))}}

/* Account page: membership and sign-in panels built from .maker-panel, .maker-eyebrow, .maker-badge and .actions. */
.account-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
.account-panel{display:flex;flex-direction:column;gap:16px}.account-panel>*{margin:0}
.account-panel h2{font-size:28px;line-height:1.15;margin:0}.account-panel p{margin:0}
.account-panel .actions{margin:8px 0 0}
.account-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.maker-badge.is-muted{background:#f1f1ee;color:#55554f}
.account-rows{display:grid;gap:12px;margin:0;padding:16px 0;border-block:1px solid var(--line)}
.account-rows div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px}.account-rows dt{font-weight:600}.account-rows dd{margin:0;color:var(--muted)}
.account-section{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
.account-section h3{font-size:18px;margin:0}.account-section p{color:var(--muted)}.account-section .actions{margin-top:8px}
.account-email{overflow-wrap:anywhere;font-size:22px!important}
.account-sign-in{max-width:520px}.account-sign-in .small{color:var(--muted)}
@media(max-width:820px){.account-grid{grid-template-columns:1fr}}
@media(max-width:520px){.account-rows div{grid-template-columns:1fr;gap:2px}}
/* Members on the library page see their designs, not the sign-in note or the membership pitch. */
.is-member .library-intro .download-note,.is-member #membership{display:none}

@media(max-width:1000px){.make-routes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.make-routes{grid-template-columns:1fr}}
[data-google-sign-in]{min-height:44px;margin:20px 0}

/* Keep the full QR Maker assembly visible in the supplied square photograph. */
.make-routes .make-route-card .qr-maker-photo{height:auto;aspect-ratio:1;object-fit:cover}

.membership-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.plan-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:26px;padding:30px;background:white;min-width:0}.plan-card h2{font-family:var(--heading);font-size:32px;line-height:1.15}.plan-card .price{margin:20px 0;font-size:38px}.plan-card ul{padding-left:20px;margin:16px 0 28px;line-height:1.75}.plan-card .button{align-self:flex-start;margin-top:auto}.plan-card .price small{font-size:16px}.plan-card p{color:var(--muted)}.plan-card .price{color:var(--ink)}
@media(max-width:720px){.membership-plans{grid-template-columns:1fr}.plan-card{padding:24px 20px}.plan-card .button{width:100%}}

/* Membership copy stays separate from the plan cards and readable at full width. */
.membership-intro h1{font-size:clamp(38px,5.4vw,64px)}.membership-intro h1 em{white-space:nowrap}
.membership-terms{max-width:78ch;margin-top:28px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;line-height:1.75;color:var(--muted)}.membership-terms p{margin:0 0 12px}.membership-terms p:last-child{margin-bottom:0}#membership-plan-status:empty{display:none}

#membership-plan-status:not(:empty){margin:20px 0 0;font-size:14px}

.plan-card-label{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.plan-card-label .maker-eyebrow{margin:0}
.current-tier-pill{display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;line-height:1.5;white-space:nowrap;background:#e9f7eb;color:#206c2c}
.current-tier-pill[hidden]{display:none}
.plan-card-paid{background:#111;border-color:var(--make,#35b644);color:#fff}
.plan-card-paid h2,.plan-card-paid .price{color:#35b644}
.plan-card-paid p,.plan-card-paid .maker-eyebrow{color:#d2d2cc}
.plan-card-paid .current-tier-pill{background:#35b644;color:#111;border-color:#35b644}
.plan-card-paid .button{background:#35b644;color:#111;border-color:#35b644}
.make-answers .section-head>p{max-width:48ch;color:var(--muted)}
.make-answers details p{max-width:78ch}
.make-route-card>.text-link{margin-top:16px}

/* Keep the one-time licence directly below the monthly option. */
.membership-plans{align-items:start}.paid-plan-options{display:grid;gap:24px;min-width:0}.plan-card-perpetual{border:2px solid var(--make,#35b644)}

/* Build-tools sign-in. Split showcase on the account page. The notice lives in the card. */
.auth-split{display:grid;grid-template-columns:minmax(280px,1.05fr) minmax(320px,440px);gap:28px;align-items:stretch;width:min(1080px,100%);margin:8px auto 48px}
.auth-showcase{position:relative;min-height:560px;border-radius:26px;overflow:hidden;background:#111;color:#fff}
.auth-showcase-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.auth-showcase-caption{position:absolute;left:24px;right:24px;bottom:76px;margin:0;font:600 clamp(26px,3vw,40px)/1.1 var(--heading),Arial,sans-serif;letter-spacing:-.03em;text-shadow:0 2px 12px #000}
.auth-tabs{position:absolute;left:16px;right:16px;bottom:16px;display:flex;gap:8px;flex-wrap:wrap}
.auth-tab{border:0;background:#ffffffd6;color:#111;border-radius:999px;min-height:36px;padding:8px 14px;font:600 12px/1 var(--heading),Arial,sans-serif}
.auth-tab[aria-selected=true]{background:#111;color:#fff}
.auth-card{border:2px solid #111;border-radius:26px;background:#fff;padding:32px 28px;display:flex;flex-direction:column;gap:14px;align-self:center}
.auth-logo{width:144px;height:48px;object-fit:contain;align-self:center}
.auth-card h2,.auth-card h3{font-family:var(--heading),Arial,sans-serif}
.auth-card h2{margin:0;text-align:center;font-size:32px;letter-spacing:-.03em}
.auth-card h3{margin:0;font-size:26px;letter-spacing:-.02em}
.auth-kicker,.auth-or{margin:0;text-align:center;color:#62625e;font-size:14px}
.auth-stage{overflow:hidden;max-height:520px;opacity:1;transition:max-height 280ms ease,opacity 280ms ease}
.auth-stage.is-leaving{max-height:0;opacity:0;margin:0;pointer-events:none}
.auth-stage[hidden]{display:none}
.auth-wait,.auth-sent{text-align:center}
.auth-loader{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0}
.auth-loader p{margin:0}
.auth-error{margin:0;color:#a32820;font-size:14px}
.auth-error[hidden]{display:none}
.auth-card .field input{border:2px solid #111;border-radius:999px;min-height:48px;padding:12px 16px}
.auth-card .button{width:100%}
body:has(.auth-split) .page-intro{display:none}
@media(max-width:860px){.auth-split{grid-template-columns:1fr}.auth-showcase{min-height:280px}.auth-showcase-caption{font-size:24px;bottom:64px}.auth-card{padding:24px 18px}}
@media(prefers-reduced-motion:reduce){.auth-stage{transition:none}}
/* The form stage spaces its own rows: the email field never touches Continue. */
.auth-stage[data-auth-form]:not([hidden]){display:flex;flex-direction:column;gap:14px}
.auth-stage[data-auth-form] .field{display:flex;flex-direction:column;gap:8px;margin:0}
/* No coloured ring on the sign-in field: focus thickens the ink border instead. */
.auth-card .field input:focus,.auth-card .field input:focus-visible{outline:none;box-shadow:inset 0 0 0 1px #111;border-color:#111}
/* Signed out, the sign-in takes the whole viewport: picture left, form right, no header or footer. */
body.auth-full{overflow:hidden}
body.auth-full .auth-split{position:fixed;inset:0;z-index:2000;margin:0;width:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:#fff;overflow-y:auto}
body.auth-full .auth-showcase{min-height:100%;border-radius:0}
body.auth-full .auth-card{border:0;border-radius:0;width:min(440px,100%);box-sizing:border-box;justify-self:center;align-self:center;padding:40px 24px}
@media(max-width:860px){body.auth-full .auth-split{grid-template-columns:1fr;grid-template-rows:240px auto}body.auth-full .auth-showcase{min-height:240px}body.auth-full .auth-showcase-caption{font-size:20px;bottom:66px}body.auth-full .auth-card{padding:28px 16px 40px}}

/* One column for every sign-in element: centred, the same width, so the
   Google button, the email field and every action line up. */
.auth-card{align-items:center}
.auth-card>*,.auth-card .auth-stage{width:100%;max-width:360px;box-sizing:border-box}
.auth-card .auth-logo{width:144px;max-width:144px}
.auth-card [data-google-sign-in]{width:100%;display:flex;flex-direction:column;align-items:stretch}
.auth-card .auth-google-slot{display:flex;justify-content:center;padding:4px 0}
.auth-card .auth-google-slot iframe{margin:0 auto!important}
.auth-card .actions{display:flex;flex-direction:column;gap:10px;width:100%}
.auth-card .actions .button{width:100%;margin:0}
.auth-card .small{text-align:center}
/* Continue stays ink in every state (no accent fill on tap or hover). */
.auth-card .auth-continue,.auth-card .auth-continue:hover,.auth-card .auth-continue:focus-visible,.auth-card .auth-continue:active{background:#111;color:#fff;border-color:#111;box-shadow:none;transform:none}
.auth-card .auth-continue:focus-visible{outline:2px solid #111;outline-offset:3px}
/* The field shows focus with a quiet ink underline, not a coloured ring. */
.auth-card .field input:focus,.auth-card .field input:focus-visible{outline:none;box-shadow:0 2px 0 #111;border-color:#111}
/* Password sign-in: the switch between a link and a password, and "Forgot password?". */
.auth-card .auth-alt{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;width:100%;max-width:360px}
.auth-card .auth-alt .text-link{border:0;background:none;padding:4px 0;font:inherit;font-size:14px;color:#111;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.auth-card .auth-alt [data-auth-forgot]{margin-left:auto}
.auth-card .field[hidden]{display:none}
.account-password .auth-password-form{display:flex;flex-direction:column;gap:10px;max-width:360px}
.account-password .field input{border:2px solid #111;border-radius:999px;min-height:48px;padding:12px 16px}
.account-password .field input:focus{outline:none;box-shadow:0 2px 0 #111}
/* Login, Magnific-style: the showcase is a rounded card inset from the page
   edge, with a soft shade, a title and a line under it, and tabs that fill
   like progress bars while each slide plays. */
body.auth-full .auth-split{padding:16px;gap:16px;box-sizing:border-box}
body.auth-full .auth-showcase{border-radius:24px;min-height:calc(100dvh - 32px);isolation:isolate}
.auth-showcase-img{transition:opacity 420ms ease,transform 6s ease}
.auth-showcase-img.is-in{animation:auth-slide-in 520ms ease both}
@keyframes auth-slide-in{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}
.auth-showcase-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0000 45%,#000000b3 100%);pointer-events:none}
.auth-showcase-text{position:absolute;left:28px;right:28px;bottom:84px;display:flex;flex-direction:column;gap:8px}
.auth-showcase-text .auth-showcase-caption{position:static;text-shadow:none}
.auth-showcase-sub{margin:0;max-width:44ch;font-size:15px;line-height:1.5;color:#ffffffd9}
.auth-tabs{left:28px;right:28px;bottom:28px;gap:12px;flex-wrap:nowrap}
.auth-tab,.auth-tab[aria-selected=true]{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:none;color:#ffffffa6;padding:0;min-height:36px;border-radius:0;cursor:pointer;font:600 12px/1 var(--heading),Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em}
.auth-tab[aria-selected=true]{color:#fff}
.auth-tab:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
.auth-tab-bar{display:block;width:100%;height:3px;border-radius:3px;background:#ffffff47;overflow:hidden}
.auth-tab-bar i{display:block;height:100%;width:0;background:#fff;border-radius:inherit}
.auth-tab[aria-selected=true] .auth-tab-bar i{animation:auth-progress 6s linear forwards}
.auth-showcase:hover .auth-tab[aria-selected=true] .auth-tab-bar i{animation-play-state:paused}
.auth-showcase.is-still .auth-tab[aria-selected=true] .auth-tab-bar i{animation:none;width:100%}
@keyframes auth-progress{from{width:0}to{width:100%}}
.auth-card .auth-or{display:flex;align-items:center;gap:12px}
.auth-card .auth-or::before,.auth-card .auth-or::after{content:"";flex:1;height:1px;background:#d9d7d0}
.auth-card .auth-kicker{font-weight:600;color:#111}
.auth-card .field-help{margin:-6px 0 0;font-size:13px;color:#62625e}
.auth-card .field-help[hidden]{display:none}
.auth-card .auth-switch{margin:0;color:#62625e}
.auth-card .auth-switch .text-link,.auth-card .auth-plans .text-link{border:0;background:none;padding:0;font:inherit;font-weight:700;color:#111;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.auth-card .auth-plans{margin:-6px 0 0}
@media(max-width:860px){body.auth-full .auth-split{padding:12px;gap:8px;grid-template-rows:260px auto}body.auth-full .auth-showcase{min-height:260px;border-radius:20px}.auth-showcase-text{left:18px;right:18px;bottom:62px}.auth-showcase-sub{display:none}.auth-tabs{left:18px;right:18px;bottom:18px;gap:8px}}
@media(prefers-reduced-motion:reduce){.auth-showcase-img.is-in{animation:none}.auth-tab[aria-selected=true] .auth-tab-bar i{animation:none;width:100%}}
.auth-card .auth-alt [hidden],.auth-card .auth-switch [hidden]{display:none}
@media(max-width:860px){.auth-showcase-text{bottom:72px}}

/* ── Build Lab (/build) ──────────────────────────────────────────────── */
/* Hero: a dark rounded panel from edge to edge (inset like the nav card),
   with the nav floating over its top. */
.build-hero{margin:var(--nav-inset,16px);border-radius:30px;color:#fff;overflow:hidden;
 background:radial-gradient(60% 80% at 12% 112%,rgb(57 181 74 / .55),transparent 62%),radial-gradient(45% 60% at 92% -8%,rgb(255 186 8 / .28),transparent 60%),#0f120e;
 padding:calc(var(--nav-card-h,84px) + var(--nav-inset,16px) + 72px) 0 96px;min-height:min(780px,94vh);display:flex;align-items:center;box-sizing:border-box}
.build-hero-inner{width:100%;max-width:1540px;margin:0 auto;padding:0 4%;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:56px;align-items:center}
.build-hero-eyebrow{margin:0}.build-hero-eyebrow span{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border:1.5px solid rgb(255 255 255 / .28);border-radius:999px;background:rgb(255 255 255 / .06);font:600 14px/1.2 var(--sans)}
.build-hero-eyebrow span::before{content:"";width:8px;height:8px;border-radius:50%;background:#39b54a}
.build-hero h1{margin:24px 0 20px;color:#fff;font-size:clamp(44px,5.4vw,82px);line-height:1.02;letter-spacing:-3px;max-width:13ch}
.build-hero h1 em{color:#ffba08}
.build-hero-sub{margin:0;max-width:60ch;font-size:18px;line-height:1.55;color:rgb(255 255 255 / .8)}
.build-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.build-hero .build-hero-primary{background:#fff;color:#111;border-color:#fff}.build-hero .build-hero-primary:hover{background:#ffba08;border-color:#ffba08;color:#111}
.build-hero .build-hero-secondary{background:transparent;color:#fff;border:1.5px solid #fff}.build-hero .build-hero-secondary:hover{background:#fff;color:#111}
.build-hero a:focus-visible{outline:3px solid #ffba08;outline-offset:3px}
.build-hero-list{list-style:none;margin:0;padding:0 0 0 36px;display:flex;flex-direction:column;gap:18px}
.build-hero-list li{position:relative;font:600 clamp(22px,2.2vw,34px)/1.15 var(--heading);letter-spacing:-.02em;color:rgb(255 255 255 / .28);transition:color .45s ease}
.build-hero-list li.is-on{color:#fff}
.build-hero-list li.is-on::before{content:"";position:absolute;left:-34px;top:50%;width:0;height:0;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #39b54a;transform:translateY(-50%)}
@media(max-width:980px){.build-hero-inner{grid-template-columns:1fr;gap:36px}.build-hero{min-height:0;padding-bottom:64px}.build-hero-list{gap:10px}}
@media(max-width:640px){.build-hero{border-radius:24px;padding-top:calc(var(--nav-card-h,68px) + var(--nav-inset,10px) + 40px)}.build-hero h1{letter-spacing:-1.6px}.build-hero-sub{font-size:16px}.build-hero-list{display:none}}

/* One place for everything: pills that advance on their own, a card per tool. */
.lab-tools{text-align:center}
.lab-tools-head h2{margin:0 0 12px}.lab-tools-head p{margin:0 auto;max-width:56ch;color:var(--muted)}
.lab-pills::-webkit-scrollbar{display:none}
.lab-pill:hover{color:var(--ink)}
.lab-pill:focus-visible{outline:3px solid #ffba08;outline-offset:2px}
@keyframes lab-fill{from{width:0}to{width:100%}}
.lab-stage{margin-top:28px;text-align:left}
.lab-panel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center;padding:44px;border-radius:30px;background:#1c1b18;color:#fff;animation:lab-in .45s ease both}
.lab-panel[hidden]{display:none}
@keyframes lab-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lab-panel-copy h3{margin:0 0 14px;color:#fff;font-size:clamp(28px,2.6vw,38px);line-height:1.1;letter-spacing:-.03em}
.lab-panel-copy p{margin:0 0 28px;font-size:18px;line-height:1.55;color:rgb(255 255 255 / .78)}
.lab-panel .lab-panel-cta{background:#fff;color:#111;border-color:#fff}.lab-panel .lab-panel-cta:hover{background:#ffba08;border-color:#ffba08}
.lab-panel .lab-panel-cta:focus-visible{outline:3px solid #ffba08;outline-offset:3px}
.lab-panel-media img{display:block;width:100%;height:auto;aspect-ratio:16/9}
@media(max-width:900px){.lab-panel{grid-template-columns:1fr;gap:24px;padding:28px}.lab-pills{justify-content:flex-start}}
@media(max-width:640px){.lab-panel{padding:22px;border-radius:24px}.lab-panel-copy p{font-size:16px}.lab-pill{padding:11px 16px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.lab-panel{animation:none}.build-hero-list li{transition:none}}

/* Tool cards: the configurator and the library lead, every picture 16:9. */
/* Two wide cards, then four a row. */
.lab-cards{grid-template-columns:repeat(12,minmax(0,1fr))!important}
.lab-cards .make-route-card{grid-column:span 4}
@media(max-width:1280px){.lab-cards .make-route-card{grid-column:span 6}}
.make-routes .make-route-card .make-route-media{aspect-ratio:16/9;overflow:hidden;border-radius:18px;margin-bottom:22px}
.make-routes .make-route-card .make-route-media>.make-preview,.make-routes .make-route-card .make-route-media .qr-maker-photo{width:100%;height:100%!important;aspect-ratio:auto!important;object-fit:cover;border-radius:0;margin:0}
.make-routes .make-route-card .make-route-media .qr-preview{height:100%;box-sizing:border-box;background:#f4f4ef}
@media(max-width:1000px){.lab-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}.lab-cards .make-route-card{grid-column:span 1}}
@media(max-width:640px){.lab-cards{grid-template-columns:1fr!important}}

/* Plans, then how they compare: one column per plan, its button at the top. */
.plan-compare{margin-top:56px}
.plan-compare h2{margin:0 0 20px}
.plan-compare-scroll{overflow-x:auto;border:2px solid #111;border-radius:26px;background:#fff}
.plan-compare-scroll:focus-visible{outline:3px solid #ffba08;outline-offset:3px}
.plan-compare-table{width:100%;min-width:760px;border-collapse:collapse;font-size:16px}
.plan-compare-table th,.plan-compare-table td{padding:16px 20px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.plan-compare-table tbody tr:last-child th,.plan-compare-table tbody tr:last-child td{border-bottom:0}
.plan-compare-table thead th{vertical-align:top;padding-top:24px;padding-bottom:24px;border-bottom:2px solid #111}
.plan-compare-table thead th .button{margin-top:14px;min-height:44px;padding:10px 18px;font-size:14px;white-space:nowrap}
.plan-compare-table tbody th{font-weight:500;color:var(--ink)}
.plan-compare-table td{color:var(--muted)}
.plan-compare-table .is-featured{background:#fff8e1}
.plan-col-name{display:block;font:600 14px/1.2 var(--sans);color:var(--muted)}
.plan-col-price{display:block;margin-top:6px;font:600 24px/1.15 var(--heading);color:var(--ink)}.plan-col-price small{font:500 14px var(--sans);color:var(--muted)}
.plan-yes{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#39b54a;color:#fff;font-weight:700;font-size:14px}
.plan-no{color:#b9b9b3;font-size:20px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* What membership gives you: a dark panel of icons, headings and lines. */
.lab-features{border-radius:30px;background:#1c1b18;color:#fff;padding:56px clamp(24px,4vw,64px)}
.lab-features h2{margin:0;color:#fff}
.lab-features .lab-features-sub{margin:14px 0 44px;font-size:18px;color:rgb(255 255 255 / .62)}
.lab-features ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 40px}
.lab-features li{display:flex;gap:18px;align-items:flex-start}
.lab-feature-icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border:1.5px solid rgb(255 255 255 / .28);border-radius:12px;color:#fff}
.lab-features h3{margin:2px 0 8px;color:#fff;font-size:20px;line-height:1.25;letter-spacing:-.01em}
.lab-features p{margin:0;font-size:16px;line-height:1.55;color:rgb(255 255 255 / .62)}
@media(max-width:1000px){.lab-features ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.lab-features{padding:36px 22px;border-radius:24px}.lab-features ul{grid-template-columns:1fr;gap:26px}}
@media(max-width:640px){.make-routes .make-route-card .make-route-media .qr-preview{padding:44px 16px 14px}.make-routes .qr-preview p{font-size:16px}.make-routes .qr-preview em{font-size:24px}}
/* Login showcase with the Build Lab tool pictures: each 16:9 picture sits
   whole in the middle of the dark card, above the caption and tabs. */
.auth-showcase.is-tools{background:#151513}
.auth-showcase.is-tools .auth-showcase-img{object-fit:contain;object-position:50% 38%;padding:8% 6% 30%;box-sizing:border-box}
.auth-showcase.is-tools .auth-showcase-shade{background:linear-gradient(180deg,#0000 55%,#000000b3 100%)}
@media(max-width:860px){.auth-showcase.is-tools .auth-showcase-img{padding:6% 6% 26%;object-position:50% 30%}}
.auth-tab-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.auth-showcase.is-tools .auth-tab-label{display:none}.auth-showcase.is-tools .auth-tab{min-height:24px;justify-content:center}.auth-showcase.is-tools .auth-showcase-text{bottom:44px}}

/* Build Lab, round two. Pills: one dark thumb slides from pill to pill and
   the countdown runs in a bar underneath the active pill, outside the row. */
.lab-pills-wrap{position:relative;width:fit-content;max-width:100%;margin:32px auto 0;padding-bottom:16px}
.lab-pills{position:relative;display:flex;gap:4px;max-width:100%;padding:6px;border:1.5px solid var(--line);border-radius:999px;background:#fff;overflow-x:auto;scrollbar-width:none;box-sizing:border-box}
.lab-pill-thumb{position:absolute;top:6px;bottom:6px;left:0;width:var(--thumb-w,0);transform:translateX(var(--thumb-x,0));border-radius:999px;background:#111;transition:transform .5s cubic-bezier(.65,0,.25,1),width .5s cubic-bezier(.65,0,.25,1);pointer-events:none}
.lab-pill{position:relative;z-index:1;flex:none;border:0;background:transparent;border-radius:999px;padding:13px 20px;font:600 16px/1.2 var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .35s ease}
.lab-pill[aria-selected=true]{color:#fff}
.lab-progress{position:absolute;left:0;bottom:0;height:3px;width:calc(var(--thumb-w,0px) - 40px);transform:translateX(calc(var(--bar-x,0px) + 20px));border-radius:3px;background:var(--line);overflow:hidden;transition:transform .5s cubic-bezier(.65,0,.25,1),width .5s cubic-bezier(.65,0,.25,1)}
.lab-progress i{display:block;height:100%;width:0;background:#111;animation:lab-fill 6.5s linear forwards}
.lab-tools:hover .lab-progress i,.lab-tools:focus-within .lab-progress i{animation-play-state:paused}
.lab-tools.is-manual .lab-progress,.lab-tools.is-still .lab-progress{opacity:0}
@media(prefers-reduced-motion:reduce){.lab-pill-thumb,.lab-progress{transition:none}}

/* No section dividers on Build Lab. */
body:has(.build-hero) .section{border-bottom:0}

/* Plans: three across on desktop. */
@media(min-width:1001px){.membership-plans{grid-template-columns:repeat(3,minmax(0,1fr))}.membership-plans .paid-plan-options{display:contents}}
@media(min-width:721px) and (max-width:1000px){.membership-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Tool cards like the shop's product cards: the picture runs to the card's
   top, left and right edges; the words keep their inset. */
.lab-cards .make-route-card{padding:0 0 26px;overflow:hidden}
.lab-cards .make-route-card .make-route-media{border-radius:0;margin:0 0 22px;border-bottom:2px solid #111}
.lab-cards .make-route-card>*:not(.make-route-media){margin-left:26px;margin-right:26px;max-width:calc(100% - 52px)}
.lab-cards .make-route-card .make-route-media .make-access-pill{top:14px;right:14px}
/* Black and white at rest; colour on hover or keyboard focus, and on touch
   screens for the card crossing the middle of the screen (studio.js). */
.lab-cards .make-route-media{filter:grayscale(1);transition:filter .45s ease}
.lab-cards .make-route-card:is(:hover,:focus-within,.is-lit) .make-route-media{filter:none}
@media(hover:none){
 .lab-cards .make-route-card{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s cubic-bezier(.2,.8,.2,1)}
 .lab-cards .make-route-card.is-lit{transform:translateY(-3px) scale(1.02);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}
}
@media(prefers-reduced-motion:reduce){.lab-cards .make-route-media{transition:none}.lab-cards .make-route-card.is-lit{transform:none}}

/* FAQs in the shop page's style: one bordered list, a round plus that
   turns and fills ink when open, answers easing open. */
.lab-faq{interpolate-size:allow-keywords}
.lab-faq details{border:0;border-bottom:1px solid var(--line);padding:0;margin:0}
.lab-faq .section-head+details{border-top:1.5px solid var(--line);border-radius:26px 26px 0 0}
.lab-faq{--faq-border:1.5px solid var(--line)}
.lab-faq>details{border-left:var(--faq-border);border-right:var(--faq-border);background:#fff}
.lab-faq>details:last-of-type{border-bottom:var(--faq-border);border-radius:0 0 26px 26px}
.lab-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px;font:500 16px/1.4 var(--sans);color:var(--ink);cursor:pointer}
.lab-faq summary::-webkit-details-marker{display:none}
.lab-faq summary:focus-visible{outline:3px solid #ffba08;outline-offset:-3px;border-radius:12px}
.lab-faq .faq-icon{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:1.5px solid #c8c8be;display:flex;align-items:center;justify-content:center;color:#1c1b18;transition:transform .25s ease,background .2s ease,border-color .2s ease,color .2s ease}
.lab-faq details[open] .faq-icon{background:#111;border-color:#111;color:#fff;transform:rotate(45deg)}
.lab-faq details p{margin:0;padding:0 28px 14px;font-size:16px;line-height:1.65;color:var(--muted);max-width:70ch}
.lab-faq details p:last-child{padding-bottom:22px}
.lab-faq details::details-content{block-size:0;overflow:hidden;transition:block-size .35s ease,content-visibility .35s allow-discrete}
.lab-faq details[open]::details-content{block-size:auto}
@media(max-width:640px){.lab-faq summary{padding:18px 20px}.lab-faq details p{padding:0 20px 12px}}
@media(prefers-reduced-motion:reduce){.lab-faq details::details-content{transition:none}.lab-faq .faq-icon{transition:none}}
/* shadcn Navigation Menu: pill product-line links, Radix focus and dismissal. */
[data-shop-menu]{position:relative;display:inline-flex;text-align:left;z-index:60}.shop-menu{position:relative;isolation:isolate}.shop-menu [data-slot=navigation-menu-list],.product-lines{list-style:none;margin:0;padding:0;display:flex}.shop-menu [data-slot=navigation-menu-item]{position:relative}.shop-menu [data-slot=navigation-menu-trigger],.shop-fallback summary{display:inline-flex;align-items:center;gap:5px;font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:9px 2px;line-height:1.2;list-style:none}.shop-menu-content{position:absolute;top:calc(100% + 14px);left:-18px;min-width:274px;padding:8px;background:#fff;border:1px solid #e8e8e8;border-radius:999px;box-shadow:0 12px 36px #00000012;transform-origin:28px 0;z-index:100;color:#111}.shop-menu-content[data-state=open]{animation:shop-in 330ms cubic-bezier(.16,1,.3,1)}.shop-menu-content[data-state=closed]{animation:shop-out 180ms ease-in}.product-lines{flex-direction:column;gap:8px}.product-line,.nav-links a.product-line{display:flex!important;align-items:center;gap:13px;border-radius:999px;padding:6px 16px 6px 6px!important;white-space:nowrap;font-size:14px!important;font-weight:500;text-decoration:none!important;color:#111!important;transition:background 180ms}.product-line:hover,.product-line:focus-visible{background:#f3f2ee}.product-line img{display:block;width:46px!important;height:46px!important;max-width:none!important;object-fit:cover;border-radius:50%;background:#eee}.product-line>svg{margin-left:auto;flex-shrink:0}.shop-menu :focus-visible{outline:2px solid #a57100;outline-offset:4px}.shop-fallback summary::-webkit-details-marker{display:none}@keyframes shop-in{from{opacity:0;transform:translateY(-9px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes shop-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-6px) scale(.98)}}@media(max-width:680px){.shop-menu-content{left:0;top:calc(100% + 10px);min-width:250px}.shop-menu [data-slot=navigation-menu-trigger]{padding:10px 0}}@media(prefers-reduced-motion:reduce){.shop-menu-content[data-state]{animation:none}}

.shop-menu [data-state="open"]>svg { color:var(--gold,#ffba08); }
.product-line:hover,.product-line:focus-visible { background:#ffba08; color:#111; }
/* 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}

.gallery-card:has(.gallery-tag-caption){position:relative}.gallery-tag-caption{position:absolute;bottom:8px;left:8px;right:8px;padding:8px;border-radius:12px;background:#fff;color:#111;font:12px/1.4 var(--sans);text-align:left;pointer-events:none}

/* 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}}
.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%}

.cfg-app h1{font:600 36px/1.15 var(--heading),Arial,sans-serif;letter-spacing:-.03em;margin:0}
.cfg-app h2{font:600 26px/1.2 var(--heading),Arial,sans-serif;letter-spacing:-.02em}
.cfg-app h3{font:600 20px/1.3 var(--heading),Arial,sans-serif;letter-spacing:0}
.cfg-preview{background:#fff;color:#111}
.cfg-preview main{max-width:1100px;margin:0 auto;padding:32px 4% 48px}
.cfg-preview main>p{margin:16px 0 0;font-size:16px;line-height:1.5;color:#62625e;max-width:62ch}