:root{
  --paper:#FAF6EE; --paper-2:#F2EBDD; --ink:#231F1B; --ink-2:#5B524A; --muted:#6E6459; --line:#E4DACB;
  --accent:#B4472F; --accent-ink:#fff; --teal:#1F7A7A; --gold:#E3A72F; --plum:#6B3E75; --ok:#3E7D4F;
  --r:14px; --shadow:0 1px 2px rgba(35,31,27,.06),0 8px 28px rgba(35,31,27,.08);
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
[hidden]{display:none !important}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;letter-spacing:-.01em;margin:0 0 .4em}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem)} h2{font-size:clamp(1.8rem,3.4vw,2.6rem)} h3{font-size:1.25rem}
p{margin:0 0 1em} .muted{color:var(--ink-2)} .fine{font-size:.82rem;color:var(--muted)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.testbar{background:#2b2622;color:#f6efe3;text-align:center;font-size:.85rem;padding:7px 12px}
/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto;padding:18px 20px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;font-size:1.3rem;text-decoration:none;white-space:nowrap;min-height:40px}
@media (max-width:420px){.nav .logo{font-size:1.14rem;gap:8px}.nav{gap:10px;padding-left:16px;padding-right:16px}}   /* the name stays on one line beside the button */
.nav nav{display:flex;align-items:center;gap:22px}
.nav nav a{text-decoration:none;color:var(--ink-2);font-weight:500;font-size:.95rem}
.nav nav a:hover{color:var(--ink)}
@media (max-width:720px){.nav nav a:not(.btn):not(.cart-link){display:none}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:var(--paper)!important;border:0;border-radius:999px;
  padding:14px 26px;font:600 1rem var(--sans);text-decoration:none;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px);background:#000}
.btn-accent{background:var(--accent)} .btn-accent:hover{background:#B04630}
.btn-ghost{background:transparent;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)!important}
.btn-sm{padding:9px 18px;font-size:.9rem}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;max-width:1180px;margin:0 auto;padding:36px 20px 64px}
.hero .lead{font-size:1.2rem;color:var(--ink-2);max-width:34em}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 18px}
.fan{position:relative;height:520px}
.fan img{position:absolute;width:56%;box-shadow:0 12px 40px rgba(35,31,27,.22);border:10px solid #fff;border-radius:2px}
.fan img:nth-child(1){left:0;top:40px;transform:rotate(-6deg)}
.fan img:nth-child(2){left:22%;top:0;z-index:2;transform:rotate(1deg)}
.fan img:nth-child(3){right:0;top:60px;transform:rotate(7deg)}
@media (max-width:880px){.hero{grid-template-columns:1fr}.fan{height:400px}}
.promises{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:.92rem;color:var(--ink-2)}
.promises span::before{content:'✓';color:var(--ok);font-weight:700;margin-right:7px}
/* sections */
.sec{padding:72px 0}.sec-alt{background:var(--paper-2)}
.sec-head{max-width:640px;margin-bottom:34px}
.styles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
@media (max-width:980px){.styles-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.styles-grid{grid-template-columns:1fr}}
.card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .img{aspect-ratio:3/4;overflow:hidden;background:var(--paper-2)}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .img img{transform:scale(1.04)}
.card .body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .body p{font-size:.93rem;color:var(--ink-2);flex:1}
.card .body a{font-weight:600;text-decoration:none;color:var(--accent)}
/* home page cards: the whole card (picture and name too) follows its one link; people tapped the pictures and nothing happened */
.styles-grid .card{position:relative}
.styles-grid .card .body a::after{content:'';position:absolute;inset:0}
.styles-grid .card:has(a:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.styles-grid .card .body a:focus-visible{outline:none}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
@media (max-width:780px){.steps{grid-template-columns:1fr}}
.step{padding:24px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--serif);font-weight:700;margin-bottom:14px}
.occ{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:780px){.occ{grid-template-columns:1fr}}
.occ div{border-top:2px solid var(--ink);padding-top:14px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:780px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gallery figure{margin:0}
.gallery img{border:8px solid #fff;box-shadow:var(--shadow)}
.gallery figcaption{font-size:.88rem;color:var(--ink-2);margin-top:10px}
.gallery figcaption a{color:var(--accent);font-weight:600;text-decoration:none}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none}
.faq summary::after{content:'+';float:right;font-weight:400;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p{margin:10px 0 0;color:var(--ink-2)}
.cta-band{text-align:center;padding:80px 20px}
/* footer */
.foot{border-top:1px solid var(--line);padding:48px 20px 28px;max-width:1180px;margin:0 auto}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;margin-bottom:28px}
@media (max-width:780px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot h4{font:600 .8rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.foot a{display:block;text-decoration:none;color:var(--ink-2);font-size:.93rem;margin:4px 0}
.foot a:hover{color:var(--ink)} .foot .fine a{display:inline}
@media (max-width:780px){.foot a{padding:7px 0;margin:0}}   /* phones: footer links tall enough to tap */
/* prose pages */
.prose{max-width:760px;margin:0 auto;padding:30px 20px 70px}
.prose h1{font-size:2.6rem} .prose h2{font-size:1.4rem;margin-top:1.8em}
.prose li{margin:.3em 0}
/* ---------- designer ---------- */
.designer{display:grid;grid-template-columns:420px 1fr;gap:34px;max-width:1280px;margin:0 auto;padding:10px 20px 60px;align-items:start}
@media (max-width:960px){.designer{grid-template-columns:1fr;display:flex;flex-direction:column}.stage{order:1;min-height:420px;padding:28px 14px}.panel{display:contents}.panel>.box:first-child{order:0}.panel>*{order:2}.buy{order:3}}
.panel{display:flex;flex-direction:column;gap:14px}
.box{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:18px 18px 20px}
.box h3{font:600 .78rem var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;display:flex;gap:8px;align-items:center}
.box h3 b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:.7rem;letter-spacing:0}
label.lbl{display:block;font-size:.85rem;font-weight:500;color:var(--ink-2);margin:10px 0 5px}
input[type=text],input[type=email]{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font:1rem var(--sans);background:var(--paper);color:var(--ink)}
input:focus{outline:none;border-color:var(--ink)}
.search{position:relative}
.results{position:absolute;left:0;right:0;top:100%;background:#fff;border-radius:10px;box-shadow:var(--shadow);z-index:20;margin-top:4px;overflow:hidden}
.results button{display:block;width:100%;text-align:left;padding:11px 14px;border:0;background:#fff;font:.95rem var(--sans);cursor:pointer;border-bottom:1px solid var(--paper-2)}
.results button:hover,.results button:focus{background:var(--paper)}
.results .none{padding:12px 14px;color:var(--ink-2);font-size:.9rem}
.placed{font-size:.88rem;color:var(--ink-2);margin-top:8px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--paper-2);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;padding:7px 13px;border-radius:999px;font:500 .86rem var(--sans);cursor:pointer;color:var(--ink-2)}
.seg button{white-space:nowrap}
.seg button:disabled{opacity:.35;cursor:not-allowed}
@media (max-width:440px){#zoom{display:flex}#zoom button{flex:1 1 auto;padding:7px 8px;font-size:.82rem}}
.seg button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.nudge{display:grid;grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px);gap:2px}
.nudge button{border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;font-size:.8rem;color:var(--ink-2)}
.nudge button:hover{border-color:var(--ink)}
.nudge .c{visibility:hidden}
.check{display:flex;align-items:center;gap:8px;font-size:.92rem;margin-top:10px}
.style-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.style-pick button{border:2px solid transparent;border-radius:12px;background:var(--paper-2);padding:6px 6px 8px;cursor:pointer;text-align:left;font:600 .85rem var(--sans);color:var(--ink)}
.style-pick button img{aspect-ratio:1/1;object-fit:cover;object-position:center 35%;border-radius:7px;margin-bottom:6px;width:100%}
.style-pick button[aria-pressed=true]{border-color:var(--ink);background:#fff}
.type-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:18px;margin-bottom:10px}
.seg.type-tabs button{min-height:44px}
.sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sizes button{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:10px 6px;cursor:pointer;font:600 .92rem var(--sans);color:var(--ink)}
.sizes button span{display:block;font-weight:400;color:var(--ink-2);font-size:.82rem}
.sizes button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.frames{display:flex;gap:10px;margin-top:12px}
.frames button{width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line)}
.frames button[aria-pressed=true]{box-shadow:0 0 0 2.5px var(--ink)}
.type-blurb{font-size:.86rem;color:var(--ink-2);margin:10px 0 0}
.buy{position:sticky;bottom:0;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px}
.buy .total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.buy .total b{font-family:var(--serif);font-size:1.6rem}
.buy .btn{width:100%}
.buy .reassure{font-size:.8rem;color:var(--ink-2);margin:10px 0 0;text-align:center}
.err{color:#B3261E;font-size:.88rem;margin-top:8px;min-height:1em}
/* stage / mockup */
.stage{position:sticky;top:16px;border-radius:18px;padding:48px 20px;min-height:560px;display:grid;place-items:center;
  background:linear-gradient(180deg,#EDE6DA 0%,#E6DDCF 78%,#D8CDBB 78%,#CFC2AE 100%)}
.mock{position:relative;width:min(100%,460px);transition:width .3s}
.mock img{width:100%;display:block;background:#fff}
.mock.poster img{box-shadow:0 18px 40px rgba(35,31,27,.28)}
.mock.framed{padding:14px;background:var(--frame,#1d1b1a);box-shadow:0 22px 50px rgba(35,31,27,.35), inset 0 0 0 2px rgba(255,255,255,.06)}
.mock.framed img{box-sizing:border-box;padding:var(--matp,0);background:var(--mat,#fff);box-shadow:0 0 0 1px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.06)}
.mock.framed.matted img{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.mock.throw img{background:transparent;filter:drop-shadow(0 18px 30px rgba(35,31,27,.30))}
.mock.canvas img{box-shadow:6px 6px 0 rgba(0,0,0,.12),0 22px 44px rgba(35,31,27,.32)}
.loading{position:absolute;inset:0;display:none;place-items:center;background:rgba(250,246,238,.72);backdrop-filter:blur(2px);font-weight:600;text-align:center;padding:20px}
.loading.on{display:grid}
.stage-err{position:absolute;inset:0;display:grid;place-items:start center;background:rgba(250,246,238,.94);text-align:center;padding:56px 24px 24px;min-height:220px}
.stage-err p{margin:0 auto 14px;max-width:300px;font-weight:600;color:var(--ink)}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 10px}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{color:var(--ink-2);text-align:center;max-width:320px}
.stage-note{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:.8rem;color:var(--ink-2)}
.stage-price{margin:14px 0 0;text-align:center;font-size:.95rem;color:var(--ink-2)}
.stage-price b{color:var(--ink);font-size:1.1rem;margin-left:4px}
.stage-price s{color:var(--muted);font-weight:400;margin-right:4px}
.stage-offer{display:block;font-size:.8rem;color:#8a3b23;margin-top:2px}
/* thanks + admin */
.thanks{display:grid;grid-template-columns:320px 1fr;gap:40px;max-width:980px;margin:0 auto;padding:40px 20px 80px;align-items:start}
@media (max-width:760px){.thanks{grid-template-columns:1fr}}
.timeline{list-style:none;padding:0;margin:20px 0}
.timeline li{padding:8px 0 8px 30px;position:relative;color:var(--muted)}
.timeline li::before{content:'';position:absolute;left:6px;top:15px;width:10px;height:10px;border-radius:50%;background:var(--line)}
.timeline li.done{color:var(--ink)} .timeline li.done::before{background:var(--ok)}
.table{width:100%;border-collapse:collapse;font-size:.88rem;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--paper-2);text-align:left;vertical-align:top}
.table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.78rem;font-weight:600;background:var(--paper-2)}
.pill.needs_attention{background:#FBE3DF;color:#9B2C1C} .pill.shipped,.pill.delivered{background:#E1F0E4;color:#2D5E3A}
.pill.submitted,.pill.in_production{background:#E3EEF6;color:#244D6B}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:18px 0 24px}
.kpis div{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
.kpis b{display:block;font-family:var(--serif);font-size:1.8rem}
/* marker picker + orientation */
.pins{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:2px}
.pins button{aspect-ratio:1/1;border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:5px;cursor:pointer;color:var(--ink-2);display:grid;place-items:center;transition:border-color .15s,color .15s}
.pins button svg{width:100%;height:100%;max-width:24px}
.pins button:hover{border-color:var(--ink-2);color:var(--ink)}
.pins button[aria-pressed=true]{border-color:var(--ink);color:var(--accent);box-shadow:0 0 0 1px var(--ink)}
.pins button[data-v=none][aria-pressed=true]{color:var(--ink)}
@media (max-width:520px){.pins{grid-template-columns:repeat(5,1fr)}}
.seg.orient{display:flex;margin:10px 0 12px}
.seg.orient button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.seg.orient i{display:inline-block;border:1.6px solid currentColor;border-radius:2px}
.seg.orient .o-p{width:10px;height:14px}.seg.orient .o-l{width:14px;height:10px}
.pins button[aria-pressed=true]{color:var(--pin,var(--accent))}
.pin-colors{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pin-colors button{width:26px;height:26px;border-radius:50%;border:2px solid #fff;background:var(--c);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.pin-colors button.auto{background:conic-gradient(from 200deg,var(--c) 0 50%,#fff 50% 52%,#E3A72F 52% 68%,#1F7A7A 68% 84%,#6B3E75 84%)}
.pin-colors button:hover{box-shadow:0 0 0 1px var(--ink-2)}
.pin-colors button[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink)}
/* title font picker */
@font-face{font-family:IA-sans;src:url(/static/fonts/Montserrat-SemiBold.ttf);font-display:swap}
@font-face{font-family:IA-serif;src:url(/static/fonts/PlayfairDisplay-SemiBold.ttf);font-display:swap}
@font-face{font-family:IA-script;src:url(/static/fonts/GreatVibes-Regular.ttf);font-display:swap}
@font-face{font-family:IA-poster;src:url(/static/fonts/BebasNeue-Regular.ttf);font-display:swap}
@font-face{font-family:IA-typewriter;src:url(/static/fonts/SpecialElite-Regular.ttf);font-display:swap}
@font-face{font-family:IA-deco;src:url(/static/fonts/PoiretOne-Regular.ttf);font-display:swap}
.fonts{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:6px}
.fonts button{border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:8px 6px;cursor:pointer;color:var(--ink);font-size:1.02rem;line-height:1.2;white-space:nowrap;overflow:hidden}
.fonts button[data-v=default]{grid-column:1/-1;font:500 .92rem var(--sans)}
.fonts button[data-v=script]{font-size:1.35rem;padding:3px 6px}
.fonts button[data-v=poster]{font-size:1.2rem;letter-spacing:.03em}
.fonts button[data-v=deco]{font-weight:700}
.fonts button:hover{border-color:var(--ink-2)}
.fonts button[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
/* phone: place search, then the live preview, then the options (must come after the base .panel rule) */
@media (max-width:960px){
  .panel{display:contents}
  .stage{position:relative;top:auto}
  .pin-colors{gap:6px}
  .pin-colors button{width:24px;height:24px}
}

/* cart */
.cart-link{position:relative;display:inline-flex;align-items:center;color:var(--ink)!important;padding:4px}
.cart-count{position:absolute;top:-6px;right:-9px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font:600 11px/18px Inter,sans-serif;text-align:center}
.buy #viewCart{width:100%;margin-top:8px}
.cart{position:fixed;inset:0;z-index:60;pointer-events:none}
.cart-shade{position:absolute;inset:0;background:rgba(35,31,27,.38);opacity:0;transition:opacity .2s}
.cart-panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--paper);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease,box-shadow .25s}
.cart.on{pointer-events:auto}.cart.on .cart-shade{opacity:1}.cart.on .cart-panel{transform:none;box-shadow:-12px 0 40px rgba(35,31,27,.18)}   /* shadow only when open: closed, it leaked onto the page edge */
body.cart-open{overflow:hidden}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 8px}
.cart-head h3{margin:0}
.cart-x{border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:var(--ink);padding:0 4px}
.cart-added{margin:0 20px 6px;padding:10px 12px;border-radius:8px;background:#EAF3EE;color:#24543A;font-size:.9rem}
.cart-lines{list-style:none;margin:0;padding:6px 20px;overflow:auto;flex:1}
.cart-lines li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(35,31,27,.1)}
.cart-lines li img{width:72px;height:auto;align-self:flex-start;border:4px solid #fff;box-shadow:0 2px 8px rgba(35,31,27,.18)}
.cart-lines .cart-empty{color:var(--ink-2);border:0}
.cl-main{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.cl-main>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-row{display:flex;align-items:center;gap:12px;margin-top:6px}
.qty{display:inline-flex;align-items:center;border:1.5px solid rgba(35,31,27,.25);border-radius:8px}
.qty button{border:0;background:none;width:30px;height:28px;font-size:17px;cursor:pointer;color:var(--ink)}
.qty button:disabled{opacity:.3;cursor:default}
.qty span{min-width:20px;text-align:center;font-weight:600}
.cl-remove{border:0;background:none;color:var(--ink-2);text-decoration:underline;cursor:pointer;font-size:.85rem;padding:0}
.cl-price{margin-left:auto}
.cart-foot{padding:14px 20px 20px;border-top:1px solid rgba(35,31,27,.12);display:flex;flex-direction:column;gap:6px}
.cart-foot .total{display:flex;justify-content:space-between;align-items:baseline;font-size:1.1rem}
.cart-foot .total.sm{font-size:.95rem}
/* the one number that decides it: big, on its own, right above the button */
.cart-foot .cart-total{padding-top:8px;border-top:1px solid rgba(35,31,27,.12);font-size:1.05rem;align-items:center}
.cart-foot .cart-total b{font-family:var(--serif);font-size:1.6rem}
.cart-foot .cart-total small{display:block;font-size:.82rem;color:var(--ink-2)}
.cart-foot .btn-big{margin-top:4px;padding:16px 22px;font-size:1.12rem}
/* "Keep designing" is the way out, not a second offer: a quiet link under the button */
.cart-keep{align-self:center;border:0;background:none;color:var(--ink-2);text-decoration:underline;cursor:pointer;font-size:.95rem;padding:8px 10px}
.cart-foot .fine{margin:0}
.order-lines{margin:0 0 14px;padding-left:18px}
.order-lines li{margin:3px 0}
.thanks-art.multi{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nav .btn{white-space:nowrap}
.pill.awaiting_approval,.pill.redrawing{background:#FFF1C9;color:#7A5300} .pill.approved{background:#E3EEF6;color:#244D6B}

/* mats */
.mats{margin-top:14px}
.mats .lbl{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:.9rem;margin-bottom:8px}
.mats .lbl span{font-weight:400;color:var(--ink-2)}
.mat-sw{display:flex;flex-wrap:wrap;gap:8px}
.mat-sw button{width:30px;height:30px;border-radius:6px;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);padding:0;position:relative}
.mat-sw button[aria-pressed=true]{box-shadow:0 0 0 2.5px var(--ink)}
.mat-sw button.none{background:#fff;background-image:linear-gradient(135deg,transparent 46%,#C8553D 46%,#C8553D 54%,transparent 54%)}

/* style tiers and options */
.style-pick .style-group{grid-column:1/-1;margin:8px 0 0;font:600 .78rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.style-pick button.classic img{aspect-ratio:2/1}
.style-opt{margin-top:14px}
.style-opt .lbl span{font-weight:400}
.palettes{display:flex;flex-wrap:wrap;gap:8px}
.palettes button{width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);background:linear-gradient(135deg,var(--g) 0 58%,var(--l) 58% 72%,var(--g) 72%);padding:0}
.palettes button[aria-pressed=true]{box-shadow:0 0 0 2.5px var(--ink)}
.sky-row{display:flex;gap:8px}
.sky-row input{flex:1;min-width:0}

/* home address box, realtor page, holiday strip */
.hero-search{display:flex;gap:10px;margin:26px 0 14px;max-width:560px}
.hero-search input{flex:1;font-size:1.05rem;padding:14px 16px}
.hero-search .btn{white-space:nowrap}
@media (max-width:520px){.hero-search{flex-direction:column}}
.eyebrow{font:600 .8rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.fan.one{display:flex;justify-content:center;align-items:center;height:auto}
.fan.one img{position:static;transform:none;width:min(100%,420px);height:auto;box-shadow:0 22px 50px rgba(35,31,27,.28);border-radius:4px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:760px){.price-grid{grid-template-columns:1fr}}
.price{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:22px}
.price.hot{border-color:var(--accent);box-shadow:0 10px 30px rgba(200,85,61,.12)}
.price h3{margin:0 0 6px}.price .big{font:700 1.6rem var(--serif,inherit);margin:0 0 8px}
.holiday{background:var(--ink);color:#fff;text-align:center;font-size:.9rem;padding:8px 14px}
.holiday a{color:#fff}
.holiday-by{background:#FFF1EA;color:#8a3b23;text-align:center;font-size:.86rem;font-weight:600;padding:6px 14px;line-height:1.35}
.cart-holiday{margin:0 0 10px;font-size:.84rem;font-weight:600;color:#8a3b23;background:#FFF1EA;border-radius:8px;padding:7px 10px;text-align:center}
.occ.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.occ.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.occ.four{grid-template-columns:1fr}}
.how-grid{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:center}
.how-grid .steps{grid-template-columns:1fr}
.demo{width:100%;border-radius:22px;box-shadow:0 22px 50px rgba(35,31,27,.25);background:var(--paper-2)}
@media (max-width:820px){.how-grid{grid-template-columns:1fr}.demo{max-width:300px;margin:0 auto;display:block}}

.real{margin-top:14px;text-align:center}
.real-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:4px}
.real-gal button{all:unset;cursor:pointer;display:block;text-align:center;font-size:12px;color:#5B524A}
.real-gal img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;display:block;border-radius:10px;box-shadow:0 8px 20px rgba(35,31,27,.18);outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s}
.real-gal button[aria-pressed="true"] img{outline-color:#C8553D}
.real-gal button:focus-visible img{outline-color:#231F1B}
.real-gal span{display:block;margin-top:5px}
.mock.photo img{border-radius:12px;box-shadow:0 18px 40px rgba(35,31,27,.22)}
@media (max-width:640px){.real-gal{grid-template-columns:repeat(4,1fr);gap:6px}}

.real-wait{display:flex;gap:14px;align-items:flex-start;text-align:left;background:rgba(255,255,255,.55);border-radius:12px;padding:14px 16px;margin:4px auto 0;max-width:520px}
.real-wait .spinner{flex:0 0 auto;width:22px;height:22px;margin-top:2px}
.real-bar{height:4px;border-radius:2px;background:rgba(35,31,27,.12);margin-top:10px;overflow:hidden}
.real-bar i{display:block;height:100%;width:3%;background:#C8553D;transition:width .4s linear}

.palettes .mixbtn{background:conic-gradient(#20365C 0 25%,#C9A227 0 50%,#2E5A38 0 75%,#A8442E 0)!important;color:#fff;font-weight:700;font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.mix{margin-top:12px;padding:12px;border-radius:12px;background:rgba(35,31,27,.04)}
.mix-row{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center;margin-bottom:8px}
.mix-row span{font-size:13px;color:#5B524A}
.yarns{display:flex;flex-wrap:wrap;gap:5px}
.yarns button{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.18);background:var(--c);cursor:pointer;padding:0}
.yarns button[aria-pressed="true"]{outline:2px solid #231F1B;outline-offset:2px}
.yarns button:disabled{opacity:.18;cursor:not-allowed}
@media (max-width:640px){.mix-row{grid-template-columns:1fr}}
.products-grid .card .img img{width:100%;height:100%;object-fit:cover}
.card .tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#b4472f;color:#fff;border-radius:999px;padding:2px 8px;vertical-align:middle;margin-left:6px}
.placed.landed{color:var(--ink);background:#FFF4D6;border-left:3px solid #D98A36;padding:8px 10px;border-radius:0 8px 8px 0;line-height:1.4}

.buy .offer{margin:-4px 0 10px;font-size:.84rem;color:#8a3b23;background:#FFF1EA;border-radius:8px;padding:7px 10px;text-align:center}
.buy .offer b{font-weight:700}
.buy #price s{color:var(--ink-2);font-size:1rem;font-weight:400;margin-right:6px}
.buy .proof{font-size:.76rem;color:var(--ink-2);margin:6px 0 0;text-align:center}
.save{margin-top:12px;border-top:1px solid #eee7dc;padding-top:10px;text-align:center}
.save-open{background:none;border:0;color:var(--ink-2);text-decoration:underline;font-size:.84rem;cursor:pointer;padding:4px}
.save-form{display:flex;gap:8px;margin-top:6px}
.save-form input{flex:1;min-width:0;padding:10px 12px;border:1px solid #d9d2c5;border-radius:10px;font-size:.95rem}
.save-form .btn{width:auto;padding:10px 16px}
.save .fine{margin:8px 0 0}
@media (max-width:960px){.buy .proof{display:none}.save{margin-top:8px;padding-top:6px}}
/* buy box only floats once the visitor reaches step 4, The words (designer.js), phones and computers */
.buy:not(.float){position:static}.buy.float{animation:buyUp .25s ease-out}
@keyframes buyUp{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}

/* phones: slim price bar under the map once the visitor's own map is drawn (designer.js qbar) */
.qbuy{display:none}
@media (max-width:960px){
  .qbuy:not([hidden]){display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;box-shadow:0 -4px 18px rgba(0,0,0,.14);
    padding:8px 12px calc(10px + env(safe-area-inset-bottom));border-radius:14px 14px 0 0;animation:buyUp .25s ease-out}
  .qbuy .qbtns{display:flex;gap:8px}
  .qbuy .qbtns .btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 8px;line-height:1.15;min-height:54px}
  .qbuy .qbtns .btn span{font-size:.86rem;font-weight:600}
  .qbuy .qbtns .btn b{font-size:1.05rem}
  .qbuy .qbtns .btn s{opacity:.7;font-weight:400;font-size:.85rem;margin-right:2px}
  .qbuy .qsum{margin:6px 2px 0;font-size:.76rem;color:var(--ink-2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .qbuy .qsum button{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}
  .qbuy .qsave{margin:2px 0 0;text-align:center}
  .qbuy .qsave button{background:none;border:0;padding:4px 8px;min-height:28px;font:inherit;font-size:.76rem;color:var(--ink-2);text-decoration:underline;cursor:pointer}
  body:has(.qbuy:not([hidden])) .designer{padding-bottom:160px}
}

/* map or home drawing: the first choice on the home page, and a switch on both designers */
.pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px;margin:22px 0 4px}
.pick button{display:flex;align-items:center;gap:12px;text-align:left;border:2px solid var(--line);background:#fff;border-radius:14px;padding:8px 12px 8px 8px;cursor:pointer;font:400 .86rem var(--sans);color:var(--ink-2)}
.pick button img{width:54px;height:54px;object-fit:cover;border-radius:8px;flex:none}
.pick button b{display:block;font:600 1rem var(--sans);color:var(--ink)}
.pick button[aria-selected=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pane-lead{color:var(--ink-2);max-width:34em;margin:18px 0 0}
.hero .pane .promises{margin-top:12px}
.design-title{text-align:center;text-wrap:balance;font-size:clamp(1.9rem,4vw,3rem);margin:6px auto 14px;padding:0 16px;max-width:900px}
.mode-switch{display:flex;width:max-content;max-width:calc(100% - 32px);margin:0 auto 14px;background:var(--paper-2);border-radius:999px;padding:4px}
.mode-switch a{padding:8px 18px;border-radius:999px;text-decoration:none;font:500 .92rem var(--sans);color:var(--ink-2);white-space:nowrap}
.mode-switch a[aria-current=page]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
@media (max-width:520px){.pick{grid-template-columns:1fr}.mode-switch a{padding:8px 12px;font-size:.86rem}}

/* ---------- tap-to-zoom on the designer map ---------- */
.mock img#previewImg{cursor:zoom-in}
.zoom-btn{position:absolute;right:10px;top:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 10px;border:0;border-radius:999px;background:rgba(29,27,26,.82);color:#fff;font:600 13px/1 var(--sans,system-ui);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.zoom-btn:hover{background:#1d1b1a}
.zoomer{position:fixed;inset:0;z-index:1000;background:#151413;display:flex;flex-direction:column;overscroll-behavior:contain}
.zoomer[hidden]{display:none}
.zoom-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 12px 10px 16px;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none}
.zoom-hint{color:#fff;font-size:13px;background:rgba(0,0,0,.6);padding:6px 11px;border-radius:999px;transition:opacity .4s}
.zoom-x{pointer-events:auto;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.zoom-view{flex:1;position:relative;overflow:hidden;touch-action:none;display:flex;align-items:center;justify-content:center;cursor:grab}
.zoom-view.dragging{cursor:grabbing}
.zoom-view img{max-width:100%;max-height:100%;display:block;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.zoom-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fbf8f1}
.zoom-price{display:flex;flex-direction:column;line-height:1.25}
.zoom-price b{font-size:18px}
.zoom-price b s{color:#8a847b;font-weight:400;margin-right:6px}
.zoom-price span{font-size:12.5px;color:#6b655d}
body.zoom-open{overflow:hidden}

/* phones: their own map framed on a wall, once per visit (designer.js wallMaybe) */
.wall{position:fixed;inset:0;z-index:60;background:rgba(20,17,14,.55);display:flex;align-items:flex-end;justify-content:center}
.wall[hidden]{display:none}
.wall-card{position:relative;background:#fff;width:100%;max-width:520px;border-radius:16px 16px 0 0;padding:16px 16px calc(14px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:9px;animation:buyUp .3s ease-out;max-height:94vh;overflow:auto}
.wall-h{margin:0 34px 0 2px;font-family:var(--serif);font-size:1.3rem;line-height:1.2}
.wall-card img{width:100%;max-height:52vh;object-fit:cover;border-radius:8px;background:#eee}
.wall-sub{margin:0 2px;font-size:.84rem;color:var(--ink-2)}
.wall-card .btn{width:100%;padding:13px 14px;font-size:1rem}
.wall-card .btn s{opacity:.7;font-weight:400;margin-right:3px}
.wall-x{position:absolute;top:8px;right:10px;width:36px;height:36px;border:0;background:none;font-size:1.7rem;line-height:1;color:var(--ink-2);cursor:pointer}
.wall-keep{background:none;border:0;padding:6px;font:inherit;font-size:.9rem;color:var(--ink-2);text-decoration:underline;cursor:pointer}
body.wall-open{overflow:hidden}

/* ---------- phone designer: place, then their map, then styles, then one Customize button (designer.js) ---------- */
.customize{display:none}
@media (max-width:960px){
  .designer{gap:12px;padding-top:6px;align-items:stretch}   /* stretch: the stage must be full width, or the map box has nothing to size against */
  /* the place box opens up so its search sits above the map and its tools fall in with the other options */
  .place-box{display:contents}
  .place-box>h3{display:none}
  .place-box>.search{order:0}
  .place-box>.placed{order:0;margin:-4px 2px 0}
  .stage{order:1;min-height:0;padding:22px 14px 40px;border-radius:16px}
  .mock{width:min(100%,420px)}
  .mock:not(.photo):has(#previewImg[hidden]){aspect-ratio:var(--ar,3/4)}   /* shape only while nothing is drawn yet; once there is a picture it sizes the frame */
  .style-box{order:2;padding:14px 0 12px}
  .style-box>h3{padding:0 16px;margin-bottom:10px}
  .box h3 b{display:none}
  /* styles: one swipeable row of real samples */
  .style-pick{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .style-pick::-webkit-scrollbar{display:none}
  .style-pick button{flex:0 0 112px;scroll-snap-align:start;font-size:.82rem}
  .style-pick .style-group{display:none}
  .style-pick .throw-note{flex:0 0 240px;align-self:center;margin:0}
  .style-box .style-opt{padding:0 16px}
  .customize{order:3;display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:0 18px;white-space:nowrap;
    background:var(--ink);color:var(--paper);border:0;border-radius:999px;box-shadow:0 8px 22px rgba(35,31,27,.22);
    font:500 .9rem var(--sans);text-align:left;cursor:pointer;transition:transform .15s cubic-bezier(.2,.8,.2,1)}
  .customize:active{transform:scale(.98)}
  .customize:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
  .customize b{font-weight:600;font-size:1rem;color:var(--paper)}
  .customize .cz-what{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:rgba(250,246,238,.75)}
  .customize svg{flex:0 0 auto}
  .customize .cz-chev{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  .customize[aria-expanded=true] .cz-chev{transform:rotate(180deg)}
  /* everything else waits until they ask for it */
  .product-box{order:4}.words-box{order:5}#placeTools{order:6}
  body:not(.customizing) #placeTools,body:not(.customizing) .product-box,body:not(.customizing) .words-box{display:none!important}
  #placeTools{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:6px 18px 18px}
  .buy{order:7}
  .buy.float{position:static;animation:none}
  /* fingertip-sized controls */
  .seg button{min-height:40px;padding:9px 13px}
  .nudge{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px)}
  .pin-colors{gap:10px}
  .pin-colors button{width:32px;height:32px}
  .frames button{width:40px;height:40px}
  .save-open{padding:12px 8px}
  .zoom-btn{min-height:40px;padding:0 14px}
  .cart-link{padding:10px;margin:-6px}
  /* the stage stays about the picture: small thumbnails, one short caption */
  .designer>*,.style-box,.style-pick{min-width:0;max-width:100%}
  .real{margin-top:12px}
  .real-gal{grid-template-columns:repeat(2,84px);justify-content:center;gap:12px}
  .real-gal span{font-size:.78rem}
  #realNote{display:none!important}
  .stage-note{position:static;margin-top:10px;font-size:.78rem;line-height:1.4;padding:0 6px}
  .stage{display:flex;flex-direction:column;align-items:center}
}

/* before a place is chosen the stage is a calm invitation, not an empty black frame */
.mock:has(> .empty:not([hidden])){background:#fff!important;padding:36px 22px;aspect-ratio:auto;box-shadow:var(--shadow)}
/* home: two picture doors (map of a place / drawing of a home) */
.hero-doors h1{margin-bottom:.25em}
.hero-doors .lead{margin:0 0 4px}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px;margin:20px 0 16px}
.door{display:flex;flex-direction:column;text-align:left;background:#fff;border:2px solid transparent;border-radius:18px;padding:7px 7px 12px;cursor:pointer;color:var(--ink);font:inherit;
  box-shadow:0 1px 2px rgba(35,31,27,.06),0 6px 18px rgba(35,31,27,.08);transition:border-color .15s,transform .2s cubic-bezier(.2,.8,.2,1)}
.door:hover{transform:translateY(-2px)}
.door:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.door[aria-selected=true]{border-color:var(--ink)}
.door-art{display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--paper-2)}
.door-art img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.door:hover .door-art img{transform:scale(1.03)}
.door b{display:block;font:600 1.02rem/1.25 var(--sans);margin:10px 5px 0}
.door-sub{display:block;font-size:.84rem;color:var(--muted);margin:2px 5px 0}
.hero-doors .pane{max-width:520px}
.hero-doors .hero-search{margin:0 0 12px}
.photo-go{position:relative;width:100%;min-height:56px;font-size:1.05rem}
.occ-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.occ-chips button{border:0;border-radius:999px;background:var(--paper-2);padding:7px 13px;font:500 .84rem var(--sans);color:var(--ink-2);cursor:pointer}
.occ-chips button[aria-pressed=true]{background:var(--ink);color:#fff}
.sr{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:960px){.hero-doors .doors-fan{display:none}.hero-doors{padding-top:12px}.doors{max-width:none}}
@media (max-width:380px){.door b{font-size:.94rem}}
.cart-lines li.cart-pair{margin:12px 0 4px;padding:12px;border:1.5px dashed var(--accent);border-radius:14px;background:#FFF8F3}
.cart-pair b{display:block;font:600 1.02rem var(--serif)}
.cart-pair .fine{display:block;margin:2px 0 8px}

/* the new phone first screen (HOME_V2_LIVE, owner first): one-line holiday strip, a menu, a compact map/drawing switch,
   the address box and button inside a 664 px Instagram window, prices under the button. Desktop keeps the picture doors. */
.holiday-1{display:block;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem;padding:7px 14px}
.holiday-1:hover{text-decoration:underline}
.nav-menu{display:none;align-items:center;gap:7px;border:0;background:var(--paper-2);border-radius:999px;padding:9px 14px;font:600 .9rem var(--sans);color:var(--ink);min-height:40px;cursor:pointer}
.nav-menu i{display:block;width:14px;height:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
.nav-drop{display:flex;flex-direction:column;margin:-6px 16px 10px;background:#fff;border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.nav-drop a{padding:14px 18px;text-decoration:none;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.nav-drop a:last-child{border-bottom:0}
.v2-art{display:none}
.v2-price b{color:var(--ink)}
@media (min-width:721px){.nav-drop{display:none!important}}
@media (max-width:720px){
  body.v2 .nav .btn-sm{display:none}
  body.v2 .nav-menu{display:inline-flex}
  body.v2 .nav{padding-top:10px;padding-bottom:10px}
  .hero-v2{padding-top:2px!important}
  .hero-v2 h1{font-size:2.05rem;line-height:1.05;margin:4px 0 6px}
  .hero-v2 h1 br{display:none}
  .hero-v2 .lead{font-size:1rem;line-height:1.4;margin:0 0 12px}
  .hero-v2 .doors{gap:6px;margin:0 0 12px;background:var(--paper-2);border-radius:16px;padding:5px;box-shadow:none}
  .hero-v2 .door{flex-direction:row;align-items:center;gap:9px;padding:6px 8px;min-height:56px;border:0;border-radius:12px;background:transparent;box-shadow:none;transform:none!important;color:var(--ink-2)}
  .hero-v2 .door[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .hero-v2 .door-art{width:40px;height:44px;aspect-ratio:auto;border-radius:7px;flex:none}
  .hero-v2 .door b{margin:0;font-size:.92rem;line-height:1.2}
  .hero-v2 .door-sub{display:none}
  .hero-v2 .v2-art{display:flex;justify-content:center;align-items:flex-end;gap:10px;height:150px;margin:0 0 12px;padding:12px 0 0;border-radius:16px;overflow:hidden;background:var(--paper-2)}
  .hero-v2 .v2-art img{height:128px;width:auto;border:5px solid #fff;box-shadow:0 6px 18px rgba(35,31,27,.18);border-radius:2px}
  .hero-v2 .v2-art img:nth-child(1){transform:rotate(-5deg) translateY(6px)}
  .hero-v2 .v2-art img:nth-child(2){height:138px;z-index:1}
  .hero-v2 .v2-art img:nth-child(3){transform:rotate(5deg) translateY(6px)}
  .hero-v2 .v2-ba{position:relative;display:block;padding:0}
  .hero-v2 .v2-ba picture,.hero-v2 .v2-ba img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%;border:0;box-shadow:none;transform:none}
  .hero-v2 .v2-ba .tag{position:absolute;bottom:10px;background:rgba(255,255,255,.94);border-radius:999px;padding:4px 11px;font:600 .78rem var(--sans);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
  .hero-v2 .v2-ba .l{left:10px}.hero-v2 .v2-ba .r{right:10px}
  /* The full-width button must sit below the input throughout this mobile layout. */
  .hero-v2 .hero-search{flex-direction:column;gap:8px;margin:0 0 4px}
  .hero-v2 .hero-search input{background:#fff}
  .hero-v2 .hero-search .btn{width:100%;padding:15px 20px}
  .hero-v2 .v2-price{justify-content:center;gap:4px 14px;font-size:.86rem;margin-top:8px!important}
}

/* sample houses (HOUSE_SAMPLES_LIVE, owner first): our drawing sketches in across the paper, the photo it came from
   tucked in the corner like a snapshot. No lining up of photo and drawing needed. Motion stops for reduced-motion. */
.hpx-stage{position:relative;margin:0;aspect-ratio:3/2;border-radius:16px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.hpx-draw{position:absolute;inset:4% 3% 4% 3%;width:94%;height:92%;object-fit:contain}
.hpx-pen{position:absolute;top:6%;bottom:6%;left:97%;width:2px;border-radius:2px;background:var(--accent);opacity:0}
.hpx-snap{position:absolute;left:4%;bottom:6%;width:34%;background:#fff;padding:4px 4px 0;box-shadow:0 4px 14px rgba(35,31,27,.25);transform:rotate(-4deg);border-radius:2px}
.hpx-snap img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.hpx-snap b{display:block;font:600 .68rem/1.9 var(--sans);text-align:center;color:var(--ink-2)}
.hpx-tag{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.94);border-radius:999px;padding:3px 10px;font:600 .72rem var(--sans);color:var(--ink-2);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.hpx-pick{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:10px 0 14px}
.hpx-pick span{font-size:.84rem;color:var(--ink-2);margin-right:2px}
.hpx-pick button{border:0;border-radius:999px;background:var(--paper-2);padding:9px 14px;min-height:40px;font:600 .86rem var(--sans);color:var(--ink-2);cursor:pointer}
.hpx-pick button[aria-pressed=true]{background:var(--ink);color:#fff}
@media (max-width:440px){.hpx-pick span{display:none}.hpx-pick{margin:8px 0 10px}.hpx-stage{aspect-ratio:16/10}}   /* phones: the three houses on one row, the photo button stays on the first screen */
@media (prefers-reduced-motion:no-preference){
  .hpx-draw{animation:hpx-draw 2.6s cubic-bezier(.45,.05,.3,1) .5s both}
  .hpx-pen{animation:hpx-pen 2.6s cubic-bezier(.45,.05,.3,1) .5s both}
  @keyframes hpx-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes hpx-pen{0%{left:3%;opacity:1}92%{opacity:1}100%{left:97%;opacity:0}}
}
@media (prefers-reduced-motion:reduce){.hpx-draw{animation:hpx-fade .6s both}@keyframes hpx-fade{from{opacity:0}to{opacity:1}}}
/* home page, phone, "A drawing of a home" picked: the same picture in the 150 px band */
.v2-hpx{display:none}
@media (max-width:720px){
  .hero-v2 .v2-hpx{display:block;padding:0;background:none;height:auto}
  .hero-v2 .v2-hpx .hpx-stage{height:150px;aspect-ratio:auto;box-shadow:none;border:1px solid var(--line)}
  .hero-v2 .v2-hpx .hpx-snap{width:30%}
  .hero-v2 .v2-art.v2-hpx img.hpx-draw{width:94%;height:92%;border:0;box-shadow:none;transform:none;border-radius:0}   /* not the fanned map cards' look */
  .hero-v2 .v2-art.v2-hpx .hpx-snap img{width:100%;height:auto;border:0;box-shadow:none;transform:none;border-radius:0}
}

/* home: the three sample houses (SAMPLE_WINDOW_LIVE, owner first). Desktop: a window that moves through the lettered prints,
   each with its photo; phone: the same houses take turns in the 150 px picture spot. Behavior in samples-window.js. */
.hero-doors .doors-fan{min-width:0}   /* a scrolling row must not widen the grid column */
.shw{align-self:center;min-width:0;width:100%;max-width:540px;margin-left:auto}
.shw-win{position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(#F1EADD,#E7DCC8);box-shadow:var(--shadow)}
.shw-tag{position:absolute;top:14px;left:16px;z-index:3;background:rgba(255,255,255,.94);border-radius:999px;padding:4px 12px;font:600 .76rem var(--sans);color:var(--ink-2)}
.shw-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none}
.shw-track::-webkit-scrollbar,.mshw-track::-webkit-scrollbar{display:none}
.shw-track:focus-visible{box-shadow:inset 0 0 0 3px var(--accent)}
.shw-slide{position:relative;flex:0 0 100%;scroll-snap-align:center;margin:0;height:540px;display:flex;align-items:center;justify-content:center;padding:38px 0 70px}
.shw-frame{height:100%;aspect-ratio:3/4;border:12px solid #1d1b1a;background:#fff;box-shadow:0 18px 40px rgba(35,31,27,.28),0 2px 4px rgba(35,31,27,.2)}
.shw-frame img{display:block;width:100%;height:100%;object-fit:cover}
.shw-snap{position:absolute;left:3%;bottom:64px;width:27%;background:#fff;padding:5px 5px 0;box-shadow:0 6px 16px rgba(35,31,27,.28);transform:rotate(-5deg);border-radius:2px}
.shw-snap img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.shw-snap b{display:block;font:600 .72rem/2 var(--sans);text-align:center;color:var(--ink-2)}
.shw-slide figcaption{position:absolute;left:0;right:0;bottom:20px;text-align:center}
.shw-slide figcaption b{display:block;font:600 1.15rem var(--serif)}
.shw-slide figcaption span{font-size:.84rem;color:var(--ink-2)}
.shw-arrow{position:absolute;top:calc(50% - 40px);z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer}
.shw-arrow.prev{left:12px}.shw-arrow.next{right:12px}
.shw-pick{display:flex;justify-content:center;gap:6px;margin:12px 0 0}
.shw-pick button{border:0;border-radius:999px;background:var(--paper-2);padding:9px 16px;min-height:40px;font:600 .88rem var(--sans);color:var(--ink-2);cursor:pointer}
.shw-pick button[aria-pressed=true]{background:var(--ink);color:#fff}
@media (prefers-reduced-motion:no-preference){
  .shw-slide.on .shw-snap{animation:shw-drop .7s cubic-bezier(.2,.8,.2,1) .25s both}
  @keyframes shw-drop{from{opacity:0;transform:translateY(14px) rotate(-11deg)}to{opacity:1;transform:rotate(-5deg)}}
}
@media (max-width:720px){
  .hero-v2 .mshw{position:relative}
  .mshw-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;border-radius:16px}
  .hero-v2 .mshw .mshw-track .hpx-stage{flex:0 0 100%;scroll-snap-align:center}
  .mshw-dots{position:absolute;left:0;right:0;bottom:7px;display:flex;justify-content:center;gap:5px;pointer-events:none}
  .mshw-dots i{width:6px;height:6px;border-radius:50%;background:rgba(35,31,27,.25)}
  .mshw-dots i.on{background:var(--ink)}
}

.hp-perm-home{margin:8px 0 0;text-align:center;font-size:.78rem}

/* the samples, one per style: dots under the desktop window; the same turns on the house page */
.shw-dots{display:flex;justify-content:center;gap:6px;margin:12px 0 0}
.shw-dots i{width:7px;height:7px;border-radius:50%;background:rgba(35,31,27,.25)}
.shw-dots i.on{background:var(--ink)}
.turns{position:relative;margin:0 0 14px}
.turns .mshw-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;border-radius:16px}
.turns .mshw-track>.hpx-stage{flex:0 0 100%;scroll-snap-align:center}
.turns .mshw-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:5px;pointer-events:none}
.turns .mshw-dots i{width:6px;height:6px;border-radius:50%;background:rgba(35,31,27,.25)}
.turns .mshw-dots i.on{background:var(--ink)}
.hp-inapp{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#fff6e8;color:var(--ink);text-align:center;line-height:1.45;font-size:.9rem}
.hp-inapp a{font-weight:700;text-decoration:underline}