:root{
  --bg:#FFF8F0; --paper:#FFFFFF; --ink:#16130F; --ink2:#4B443C; --muted:#857B70;
  --line:#EEE3D5; --accent:#FF5A36; --accent-d:#E8431F; --sun:#FFC83D; --mint:#2EC4A6; --sky:#5B7CFA;
  --r:20px; --shadow:0 18px 50px -20px rgba(60,35,10,.28);
  --display:"Bricolage Grotesque",Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(44px,7vw,84px);font-weight:800}
h2{font-size:clamp(28px,4vw,44px);font-weight:800}
h3{font-size:21px;font-weight:600}
p{margin:0 0 1em}
a{color:inherit}
button{font:inherit;cursor:pointer}
.muted{color:var(--muted)} .tiny{font-size:13px} .center{text-align:center}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}

.demo-bar{background:var(--ink);color:#FFE7C2;text-align:center;font-size:13px;padding:7px 16px}

/* buttons */
.btn{border:0;border-radius:999px;padding:12px 22px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px;transition:transform .15s,box-shadow .15s,background .15s}
.btn:active{transform:scale(.97)}
.btn-lg{padding:16px 28px;font-size:17px}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px -10px var(--accent)}
.btn-primary:hover{background:var(--accent-d)}
.btn-primary:disabled{background:#E9DCCD;box-shadow:none;cursor:not-allowed}
.btn-dark{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.icon-btn{width:40px;height:40px;border-radius:50%;border:0;background:#F3E9DC;font-size:24px;line-height:1;color:var(--ink)}
.icon-btn.light{background:rgba(255,255,255,.08);color:#fff}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,48px);background:rgba(255,248,240,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav nav{display:flex;gap:28px;font-weight:500;font-size:15px}
.nav nav a{text-decoration:none;color:var(--ink2)} .nav nav a:hover{color:var(--ink)}
.logo{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:24px;text-decoration:none;letter-spacing:-.03em}
.logo b{color:var(--accent)}
.logo-mark{width:28px;height:28px;border-radius:9px;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M18 40l14 8 14-8V24l-14-8-14 8z' fill='none' stroke='white' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;display:inline-block}
.logo-mark.sm{width:22px;height:22px;border-radius:7px}

section{padding:clamp(56px,8vw,110px) clamp(16px,5vw,64px)}
.section-head{max-width:640px;margin-bottom:40px}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding-top:clamp(40px,6vw,80px);max-width:1320px;margin:0 auto}
.hl{background:linear-gradient(100deg,var(--accent),#FF9A3D);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--ink2);max-width:540px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 32px}
.trust{list-style:none;padding:0;margin:0;display:flex;gap:28px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.trust b{display:block;color:var(--ink);font-size:15px}
.hero-visual{position:relative}
.hero-stage{position:relative;aspect-ratio:1/1;border-radius:36px;background:radial-gradient(circle at 50% 42%,#fff 0,#FFE9D2 55%,#FFD9B3 100%);box-shadow:var(--shadow)}
.hero-stage model-viewer{width:100%;height:100%;--poster-color:transparent}
.float-card{position:absolute;background:#fff;border-radius:16px;padding:8px 12px 8px 8px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);font-size:13px;font-weight:600;animation:bob 6s ease-in-out infinite}
.float-card img{width:52px;height:52px;border-radius:10px;object-fit:cover}
.fc1{left:-22px;bottom:18%}
.fc2{right:-18px;top:12%;animation-delay:-3s}
.float-tag{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:12px;color:var(--ink2);background:rgba(255,255,255,.75);padding:5px 12px;border-radius:99px;white-space:nowrap}
@keyframes bob{50%{transform:translateY(-10px)}}

/* how */
.how{background:var(--paper);border-block:1px solid var(--line)}
.how h2{text-align:center;max-width:700px;margin:0 auto 48px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1200px;margin:0 auto}
.step i{font-style:normal;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--sun);font-family:var(--display);font-weight:800;font-size:20px;margin-bottom:16px}
.step:nth-child(2) i{background:#FFB8A6}.step:nth-child(3) i{background:#B9F0E4}.step:nth-child(4) i{background:#C9D3FF}
.step p{color:var(--ink2);font-size:15px}

/* shop */
.shop,.gallery,.faq{max-width:1240px;margin:0 auto}
.products{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.product{background:var(--paper);border-radius:28px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.product-img{position:relative;aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center;justify-content:flex-start}
.product-img .main{position:relative;height:100%;width:auto;max-width:78%;object-fit:contain;transition:transform .5s;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.product:hover .product-img .main{transform:scale(1.03)}
.duckbg{background:linear-gradient(180deg,#d5d5d5 0%,#d4d4d2 50%,#e3e3e5 100%)}.popbg{background:linear-gradient(180deg,#9c9c9e 0%,#c1c1c3 50%,#e5e5e7 100%)}
.badge{position:absolute;top:16px;left:16px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:6px 12px;border-radius:99px}
.badge-new{background:var(--mint)}
.src-badge{position:absolute;top:16px;right:16px;background:rgba(22,19,15,.72);color:#fff;font-size:13px;font-weight:600;padding:6px 12px;border-radius:99px;backdrop-filter:blur(6px)}
.inset{position:absolute;right:4%;top:50%;margin-top:-17%!important;width:24%;margin:0;background:#fff;padding:6px 6px 22px;border-radius:10px;box-shadow:0 14px 30px -10px rgba(0,0,0,.45);transform:rotate(-7deg);transition:transform .4s}
.inset img{width:100%!important;height:auto!important;aspect-ratio:3/4;object-fit:cover;border-radius:6px}
.product:hover .inset{transform:rotate(-3deg) translateY(-4px)}
.product:hover .inset img{transform:none}
.fc-arrow{color:var(--accent);font-weight:800}
.product-body{padding:28px;display:flex;flex-direction:column;flex:1}
.product-body p{color:var(--ink2)}
.spec{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:8px}
.spec li{font-size:13px;background:#FBF3E9;border-radius:99px;padding:5px 12px;color:var(--ink2)}
.product-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.price{font-family:var(--display);font-weight:800;font-size:40px;line-height:1}
.price small{display:block;font-family:Inter;font-weight:500;font-size:12px;color:var(--muted);margin-top:4px}
.soon{margin-top:36px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.soon>span{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.soon-row{display:flex;gap:8px;flex-wrap:wrap}
.soon-row em{font-style:normal;border:1px dashed #DCCDBB;border-radius:99px;padding:6px 14px}

/* gallery */
.gfilter{display:flex;gap:8px;flex-wrap:wrap;margin:-16px 0 24px}
.gfilter button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 16px;font-weight:600;font-size:14px;color:var(--ink2)}
.gfilter button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ggrid figure{margin:0;position:relative;border-radius:22px;overflow:hidden;background:#E6E3E0;aspect-ratio:1/1;animation:rise .4s ease both}
.ggrid img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ggrid figure:hover img{transform:scale(1.05)}
.ggrid figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);font-size:13px;font-weight:600;padding:5px 12px;border-radius:99px}
.ggrid .inset{width:32%;right:10px;bottom:auto;top:10px;padding:4px 4px 14px}
.ggrid .inset img{transform:none!important}
.ggrid figure button{position:absolute;right:12px;bottom:12px;border:0;border-radius:99px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:6px 12px;opacity:0;transform:translateY(6px);transition:.2s}
.ggrid figure:hover button{opacity:1;transform:none}
@media (max-width:960px){.ggrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.ggrid{grid-template-columns:repeat(2,1fr);gap:10px}.ggrid .inset{width:32%;right:10px;bottom:auto;top:10px;padding:4px 4px 14px}
.ggrid .inset img{transform:none!important}
.ggrid figure button{opacity:1;transform:none}}
.masonry{columns:4 220px;column-gap:16px}
.masonry figure{margin:0 0 16px;break-inside:avoid;position:relative;border-radius:18px;overflow:hidden;background:#E6E3E0}
.masonry figcaption{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.9);font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px}

.reviews{max-width:1240px;margin:0 auto}
.rev-head p{color:var(--ink2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stars{color:#F5A623;letter-spacing:2px}
.sample-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:3px 9px}
.rev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rev{background:var(--paper);border-radius:24px;padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.rev h3{font-size:19px;margin:8px 0 6px}
.rev p{color:var(--ink2);font-size:14.5px;flex:1}
.rev small{color:var(--muted);font-size:13px}.rev small b{color:var(--ink)}
.rev-img{border-radius:16px;aspect-ratio:1;object-fit:cover;margin-bottom:12px;background:#E6E3E0}
.rev-big{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;padding:22px}
.rev-big h3{font-size:clamp(24px,3vw,34px)}
.rev-big p{font-size:17px}
.rev-pics{display:grid;grid-template-columns:.75fr auto 1fr;align-items:center;gap:12px}
.rev-pics img{border-radius:18px;width:100%;object-fit:cover;background:#E6E3E0}
.rev-pics img:first-child{aspect-ratio:3/4}.rev-pics img:last-child{aspect-ratio:1}
.arrow{font-size:28px;color:var(--accent);font-weight:700}
@media (max-width:960px){.rev-grid{grid-template-columns:1fr 1fr}.rev-big{grid-template-columns:1fr}}
@media (max-width:560px){.rev-grid{grid-template-columns:1fr}}
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;background:var(--ink);color:#fff;padding-block:64px}
.promise h3{color:var(--sun)} .promise p{color:#CFC6BB;font-size:15px}
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{font-weight:600;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.faq summary::after{content:"+";font-size:24px;color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:12px 0 0;color:var(--ink2)}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:40px clamp(16px,5vw,64px);border-top:1px solid var(--line)}
.foot-brand p{margin:6px 0 0;color:var(--muted);font-size:14px}
.powered{font-size:14px;color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 16px}
.foot-note{width:100%;font-size:13px;color:var(--muted);margin:0}

/* ================= studio ================= */
.studio{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;overflow:auto}
.studio[hidden]{display:none}
.studio-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,40px);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:2}
.progress{list-style:none;display:flex;gap:6px;padding:0;margin:0;counter-reset:p}
.progress li{counter-increment:p;font-size:13px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px}
.progress li::before{content:counter(p);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#EFE4D6;font-size:11px}
.progress li.on{color:var(--ink);background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.progress li.on::before{background:var(--accent);color:#fff}
.progress li.past::before{content:"\2713";background:var(--ink);color:#fff}
.studio-body{flex:1;display:flex;padding:clamp(24px,5vw,56px) clamp(16px,4vw,40px)}
.panel{display:none;width:100%;animation:rise .45s ease both}
.panel.on{display:block}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.panel-narrow{max-width:640px;margin:4vh auto 0;text-align:center}
.panel-narrow.wide{max-width:760px}
.prompt-box{display:flex;gap:8px;background:#fff;border-radius:999px;padding:8px;box-shadow:var(--shadow);margin:28px 0 20px;border:2px solid transparent;transition:border-color .2s}
.prompt-box:focus-within{border-color:var(--accent)}
.prompt-box input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:20px;padding:0 16px;background:transparent}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 14px 5px 5px;font-weight:600;font-size:14px;transition:transform .15s,border-color .15s}
.chip:hover{border-color:var(--accent);transform:translateY(-2px)}
.chip img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 16px}
.person{background:#fff;border:2px solid var(--line);border-radius:22px;padding:10px;text-align:left;transition:border-color .15s,transform .15s}
.person:hover{transform:translateY(-3px)}
.person.sel{border-color:var(--accent);box-shadow:0 10px 28px -14px var(--accent)}
.person img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:14px;background:#E6E3E0}
.person b{display:block;margin:10px 6px 0}
.person small{display:block;margin:0 6px 4px;color:var(--muted)}
.person.upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-style:dashed;color:var(--ink2);cursor:pointer;position:relative;min-height:100%}
.person.upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.person.upload .up-ico{width:52px;height:52px;border-radius:50%;background:#FFE7DE;color:var(--accent);display:grid;place-items:center;font-size:28px;font-weight:300}
.person.upload b{margin:0;text-align:center}.person.upload small{margin:0;text-align:center}
.person.upload.has img{display:block}.person.upload img{display:none}
.people.four{grid-template-columns:repeat(4,1fr)}
.or{display:flex;align-items:center;gap:14px;margin:36px 0 4px;color:var(--muted);font-size:14px;font-weight:600}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.photo-pill{display:inline-flex;align-items:center;gap:6px;background:#FBF3E9;border-radius:99px;padding:4px 6px 4px 4px;font-size:13px;font-weight:600;white-space:nowrap;align-self:center}
.photo-pill img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.photo-pill button{border:0;background:#fff;border-radius:50%;width:22px;height:22px;line-height:1;font-size:15px;color:var(--muted)}
.design-frame .from-photo{position:absolute;top:16px;right:16px;width:96px;border-radius:14px;overflow:hidden;border:3px solid #fff;box-shadow:var(--shadow);background:#fff}
.design-frame .from-photo img{width:100%;aspect-ratio:3/4;object-fit:cover}
.design-frame .from-photo span{display:block;font-size:10px;font-weight:700;text-align:center;padding:3px 0;text-transform:uppercase;letter-spacing:.05em}
.live-box{padding:12px 18px;border-bottom:1px solid #1E2738}
.live-row{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
.live-row small{grid-column:2;color:#8B97B5;font-size:12px}
.live-dot{width:9px;height:9px;border-radius:50%;background:#8B97B5}
.live-box.on .live-dot{background:#FF5A5A;box-shadow:0 0 0 4px rgba(255,90,90,.2);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.4}}
.live-form{display:flex;gap:8px;margin-top:10px}
.live-form input{flex:1;min-width:0;background:#161D2D;border:1px solid #2A3350;border-radius:8px;color:#fff;padding:8px 10px;font:inherit;font-size:13px}
.live-form button{border:0;border-radius:8px;background:#7DF0C8;color:#0F1420;font-weight:700;font-size:13px;padding:0 14px}
.live-box.on .live-form button{background:#2A3350;color:#fff}
.live-badge{position:fixed;left:18px;bottom:18px;z-index:70;background:#FF5A5A;color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em;padding:6px 12px;border-radius:99px;display:none}
.live-badge.on{display:block}
.upload-disabled{border:2px dashed #DCCDBB;border-radius:18px;padding:14px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;font-weight:600;margin-bottom:28px}
.upload-disabled small{font-weight:500}
.field-label{display:block;font-weight:600;text-align:left;margin-left:12px}
#popForm{margin-top:10px}

.working{max-width:480px;margin:8vh auto 0;text-align:center}
.orb{width:120px;height:120px;margin:0 auto 32px;position:relative}
.orb span{position:absolute;inset:0;border-radius:50%;border:4px solid transparent;border-top-color:var(--accent);animation:spin 1.1s linear infinite}
.orb span:nth-child(2){inset:14px;border-top-color:var(--sun);animation-duration:1.6s;animation-direction:reverse}
.orb span:nth-child(3){inset:28px;border-top-color:var(--mint);animation-duration:2.2s}
@keyframes spin{to{transform:rotate(360deg)}}
.work-steps{list-style:none;padding:0;margin:24px 0 0;text-align:left;display:inline-block}
.work-steps li{padding:6px 0 6px 32px;position:relative;color:var(--muted);transition:color .3s}
.work-steps li::before{content:"";position:absolute;left:0;top:9px;width:18px;height:18px;border-radius:50%;border:2px solid #DCCDBB}
.work-steps li.active{color:var(--ink);font-weight:600}
.work-steps li.active::before{border-color:var(--accent);border-right-color:transparent;animation:spin .8s linear infinite}
.work-steps li.ok{color:var(--ink2)}
.work-steps li.ok::before{content:"\2713";border:0;background:var(--mint);color:#fff;font-size:11px;display:grid;place-items:center}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,64px);align-items:center;max-width:1180px;margin:0 auto}
.design-frame,.viewer-frame{position:relative;border-radius:32px;overflow:hidden;background:#E6E3E0;aspect-ratio:1/1;box-shadow:var(--shadow)}
.design-frame img{width:100%;height:100%;object-fit:cover;animation:reveal .9s ease both}
@keyframes reveal{from{filter:blur(18px);transform:scale(1.04)}}
.viewer-frame{background:radial-gradient(circle at 50% 40%,#fff,#E9E4DE 70%)}
.viewer-frame model-viewer{width:100%;height:100%}
.frame-tag{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.88);font-size:12px;font-weight:600;padding:6px 12px;border-radius:99px}
.side-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.side-actions.center{justify-content:center}
.facts{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.facts li{background:#fff;border-radius:16px;padding:14px 16px;border:1px solid var(--line)}
.facts small{display:block;color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.facts b{font-size:17px}
.facts .printed-prev{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:10px}
.printed-prev img{width:72px;height:72px;border-radius:12px;object-fit:cover}
.swatches{display:flex;gap:4px;margin-top:6px}
.swatches i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}

.quote{max-width:720px;margin:0 auto;background:#fff;border-radius:28px;box-shadow:var(--shadow);padding:clamp(22px,4vw,40px)}
.quote-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:18px}
.quote-head h2{font-size:28px;margin:0}
.valid{font-size:13px;background:#E8FAF5;color:#0E8A72;padding:6px 12px;border-radius:99px;font-weight:600;white-space:nowrap}
.quote-item{display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:center;padding:22px 0}
.quote-item img{width:96px;height:96px;border-radius:18px;object-fit:cover;background:#E6E3E0}
.quote-item h3{margin:0 0 4px}
.quote-item p{margin:0;font-size:14px}
.qty{display:flex;align-items:center;background:#FBF3E9;border-radius:99px;padding:4px}
.qty button{width:34px;height:34px;border-radius:50%;border:0;background:#fff;font-size:18px}
.qty span{min-width:32px;text-align:center;font-weight:700}
.quote-lines{width:100%;border-collapse:collapse;font-size:15px}
.quote-lines td{padding:10px 0;border-top:1px solid #F4ECE2}
.quote-lines td:last-child{text-align:right;font-weight:600}
.quote-lines .total td{font-family:var(--display);font-size:26px;font-weight:800;border-top:2px solid var(--ink);padding-top:16px}
.quote-foot{display:flex;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}

.checkout{max-width:940px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:28px;box-shadow:var(--shadow);overflow:hidden}
.co-summary{background:#FBF6F0;padding:36px}
.co-merchant{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.co-summary p{margin:24px 0 2px}
.co-amount{font-size:40px;font-weight:700;letter-spacing:-.02em;margin-bottom:28px}
.co-item{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;font-size:14px;margin-bottom:20px}
.co-item img{width:48px;height:48px;border-radius:10px;object-fit:cover}
.co-item small{display:block;color:var(--muted)}
.co-row{display:flex;justify-content:space-between;font-size:14px;padding:10px 0;border-top:1px solid var(--line)}
.co-total{font-weight:700}
.co-form{padding:36px;display:flex;flex-direction:column;gap:14px;position:relative}
.co-form label{font-size:13px;font-weight:600;color:var(--ink2);display:flex;flex-direction:column;gap:6px}
.co-form input{font:inherit;font-size:15px;padding:11px 12px;border:1px solid #E3D8CB;border-radius:10px;outline:0;color:var(--ink)}
.co-form input:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(91,124,250,.18)}
.card-box{border:1px solid #E3D8CB;border-radius:10px;overflow:hidden}
.card-box input{border:0;border-radius:0;width:100%}
.card-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #E3D8CB}
.card-row input+input{border-left:1px solid #E3D8CB}
.test-pill{align-self:flex-start;background:#FFF1D6;color:#9A5B00;font-size:11px;font-weight:800;letter-spacing:.06em;padding:5px 10px;border-radius:6px}
.btn-pay{background:var(--ink);color:#fff;border-radius:12px;justify-content:center;padding:15px;font-size:16px;margin-top:6px}
.btn-pay.loading{opacity:.75;pointer-events:none}

.done{max-width:760px;margin:2vh auto 0;text-align:center}
.check{width:84px;height:84px;border-radius:50%;background:var(--mint);color:#fff;font-size:42px;display:grid;place-items:center;margin:0 auto 22px;animation:pop .5s cubic-bezier(.3,1.6,.6,1) both}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.done-card{display:grid;grid-template-columns:200px 1fr;gap:24px;background:#fff;border-radius:24px;padding:20px;box-shadow:var(--shadow);text-align:left;margin-top:28px;align-items:center}
.done-card img{border-radius:16px;aspect-ratio:1;object-fit:cover}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:0 0 16px 28px;position:relative;color:var(--muted)}
.timeline li::before{content:"";position:absolute;left:0;top:4px;width:14px;height:14px;border-radius:50%;background:#E8DCCD}
.timeline li::after{content:"";position:absolute;left:6px;top:20px;bottom:0;width:2px;background:#EFE5D8}
.timeline li:last-child::after{display:none}
.timeline li.on{color:var(--ink)} .timeline li.on::before{background:var(--mint)}
.timeline b{display:block;font-size:15px} .timeline small{font-size:13px;color:var(--muted)}

/* ================= API inspector ================= */
.api-toggle{position:fixed;right:18px;bottom:18px;z-index:70;border:0;border-radius:99px;background:#121826;color:#C9D5FF;font-size:13px;font-weight:600;padding:10px 14px;display:flex;align-items:center;gap:8px;box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
.api-toggle span{font-family:ui-monospace,Menlo,monospace;color:#7DF0C8}
.api-toggle em{font-style:normal;background:#2A3350;border-radius:99px;padding:1px 8px;font-size:12px}
.api-toggle.ping em{background:#7DF0C8;color:#121826}
.api-panel{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:80;background:#0F1420;color:#DCE3F5;transform:translateX(100%);transition:transform .35s ease;display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.35)}
.api-panel:not(.open){box-shadow:none;visibility:hidden;transition:transform .35s ease,visibility 0s .35s}
.api-panel.open{transform:none}
.api-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 18px 14px;border-bottom:1px solid #1E2738}
.api-head b{display:block;font-size:16px} .api-head small{color:#8B97B5;font-size:12px}
.api-econ{padding:12px 18px;border-bottom:1px solid #1E2738;font-size:13px;display:none;gap:10px;grid-template-columns:repeat(3,1fr)}
.api-econ.show{display:grid}
.api-econ div{background:#161D2D;border-radius:10px;padding:8px 10px}
.api-econ small{display:block;color:#8B97B5;font-size:11px}
.api-econ b{font-size:16px;color:#fff}
.api-econ .good b{color:#7DF0C8}
.api-log{flex:1;overflow:auto;padding:14px 18px 40px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.api-empty{font-family:Inter;color:#8B97B5}
.call{background:#161D2D;border-radius:12px;margin-bottom:12px;overflow:hidden;animation:rise .35s ease both;border:1px solid #1E2738}
.call-top{display:flex;align-items:center;gap:8px;padding:9px 12px}
.m{font-weight:700;font-size:11px;padding:2px 6px;border-radius:5px}
.m.POST{background:#24467A;color:#9CC4FF}.m.GET{background:#1F5244;color:#7DF0C8}.m.PUT{background:#5A3D14;color:#FFCF7D}.m.EVENT{background:#4B2A5C;color:#E6B0FF}
.path{flex:1;color:#fff;word-break:break-all}
.st{font-size:11px;color:#7DF0C8}.st.wait{color:#FFCF7D}
.call-note{padding:0 12px 8px;font-family:Inter;font-size:12px;color:#8B97B5}
.call pre{margin:0;padding:10px 12px;background:#0B0F18;color:#B9C6E4;white-space:pre-wrap;word-break:break-all;border-top:1px solid #1E2738;max-height:180px;overflow:auto}
.call pre .k{color:#9CC4FF}.call pre .s{color:#FFCF7D}.call pre .n{color:#7DF0C8}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;z-index:90;transition:transform .3s}
.toast.show{transform:translate(-50%,0)}

/* responsive */
@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .hero-visual{max-width:520px;margin:0 auto;width:100%}
  .steps{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .checkout{grid-template-columns:1fr}
  .nav nav{display:none}
  .progress li{font-size:0;padding:6px}
  .progress li.on{font-size:13px;padding:6px 10px}
}
@media (max-width:680px){
  .products{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .promise{grid-template-columns:1fr}
  .people,.people.four{grid-template-columns:repeat(2,1fr);gap:8px}
  .person{padding:6px;border-radius:16px}
  .person small{display:none}
  .fc1{left:8px;bottom:8%}.fc2{right:8px;top:6%}
  .float-card img{width:40px;height:40px}
  .quote-item{grid-template-columns:72px 1fr}
  .quote-item img{width:72px;height:72px}
  .qty{grid-column:1/-1;justify-self:start}
  .done-card{grid-template-columns:1fr}
  .done-card img{max-width:220px;margin:0 auto}
  .facts{grid-template-columns:1fr 1fr}
  .prompt-box input{font-size:17px}
  .nav .btn-sm{display:none}
  .progress li:not(.on){display:none}
  .studio-top .logo{font-size:20px}
  .hero-ctas .btn{flex:1;justify-content:center}
}