/* --- what to expect: mock-up vs reality --- */
.expect{margin-top:clamp(52px,7vw,84px);text-align:center}
.expect-head h3{font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.3rem);font-weight:400}
.expect-underline{display:block;margin:10px auto 0;width:150px;height:14px}
.expect-underline path{stroke:var(--pink);stroke-width:3;fill:none;stroke-linecap:round;
 stroke-dasharray:220;stroke-dashoffset:220}
.expect.in .expect-underline path{animation:drawline 1s .2s cubic-bezier(.16,.8,.3,1) forwards}
@keyframes drawline{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.expect-underline path{stroke-dashoffset:0}.expect.in .expect-underline path{animation:none}}
.expect-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px;text-align:left}
@media(max-width:700px){.expect-grid{grid-template-columns:1fr}}
.expect-panel{position:relative;text-align:center}
.expect-badge{display:inline-block;margin-bottom:10px;background:#22C55E;color:#06210F;
 font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:8px 22px;border-radius:100px;
 box-shadow:0 6px 18px rgba(34,197,94,.35)}
.expect-stage{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;border:1px solid var(--line2);
 background:var(--panel);display:flex;align-items:center;justify-content:center;transition:box-shadow .3s}
.expect-panel:hover .expect-stage{box-shadow:0 0 24px rgba(177,92,255,.25)}
.expect-stage img{width:100%;height:100%;object-fit:cover}
.expect-mock{background:linear-gradient(180deg,#17131F,#0E0B14)}
.expect-sign{font-family:'Allura',cursive;font-size:clamp(1.9rem,5.5vw,2.7rem);text-align:center;line-height:1.3;
 color:#B15CFF;text-shadow:0 0 7px #B15CFF,0 0 22px #B15CFF,0 0 50px #B15CFF;padding:0 20px}
.expect-note{margin-top:26px;color:var(--dim);font-size:.92rem;max-width:60ch;margin-left:auto;margin-right:auto}
.expect-note b{color:var(--ink);font-weight:600}
/* --- have a logo ready? section: two-card layout --- */
.logo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.logo-grid{grid-template-columns:1fr}}
.logo-card{background:var(--panel);border:1px solid var(--line2);border-radius:6px;padding:clamp(22px,3.4vw,30px)}
.logo-card h4{font-family:var(--serif);font-size:1.28rem;font-weight:400}
.logo-card p{margin-top:10px;color:var(--dim);font-size:.9rem;line-height:1.55}
.logo-card .logo-cta-btns{margin-top:20px}
.logo-cta-btns{display:flex;flex-direction:column;gap:10px}
.logo-cta-btns .btn{padding:12px 20px;font-size:.82rem;width:100%}

.logo-upload-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.logo-file-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--line2);border-radius:3px;
 color:var(--ink);font-size:.82rem;font-weight:600;cursor:pointer;transition:.2s;flex:none}
.logo-file-btn:hover{border-color:var(--gold-d);color:var(--gold)}
.logo-file-name{font-size:.8rem;color:var(--dim2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.logo-stage{position:relative;aspect-ratio:4/3;border-radius:5px;overflow:hidden;border:1px solid var(--line2);
 background:var(--bg2);display:flex;align-items:center;justify-content:center;margin-top:14px}
.logo-stage-img{width:100%;height:100%;object-fit:cover;animation:fadein .5s ease}
.logo-stage-loading{text-align:center;color:var(--dim)}
.logo-stage-loading p{font-size:.82rem;margin-top:14px}
/* --- configurator --- */
.cfg{position:relative}
.cfg-body{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,46px);align-items:start}
.cfg-body>*{min-width:0}
@media(max-width:940px){.cfg-body{grid-template-columns:1fr}}
.stage{position:relative;aspect-ratio:4/3;border-radius:5px;overflow:hidden;border:1px solid var(--line2);background:var(--panel)}
.stage-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:filter .4s,background-image .35s}
.stage-bg::after{content:"";position:absolute;inset:0;background:rgba(8,6,12,.3);pointer-events:none}
.sign{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);z-index:2;width:86%;text-align:center;
 line-height:1.16;word-break:break-word;font-family:'Neonderthaw',cursive;font-size:clamp(2.1rem,9vw,3.4rem);
 color:var(--glow,#FF3D93);text-shadow:0 0 7px var(--glow,#FF3D93),0 0 20px var(--glow,#FF3D93),0 0 52px var(--glow,#FF3D93);
 transition:color .25s,text-shadow .25s,font-size .3s;
 animation:neonflicker 7s ease-in-out infinite}
@keyframes neonflicker{0%,19%,21%,23%,54%,56%,100%{opacity:1}20%,22%,55%{opacity:.85}}
@keyframes huecycle{to{filter:hue-rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sign{animation:none}}
.lit-pill{position:absolute;top:14px;left:14px;z-index:4;display:flex;align-items:center;width:74px;height:32px;border-radius:100px;
 background:#1E5140;border:1px solid var(--line2);cursor:pointer;transition:.25s}
.lit-pill .knob{position:absolute;top:2px;left:43px;width:26px;height:26px;border-radius:50%;background:#4ADE80;box-shadow:0 0 12px #4ADE80;transition:.25s}
.lit-pill span{position:absolute;font-size:.58rem;font-weight:800;letter-spacing:.06em}
.lit-pill .l-on{left:10px;color:#8FE3C3}
.lit-pill .l-off{right:9px;color:#6C6478}
.badge{position:absolute;top:14px;right:14px;z-index:4;background:rgba(10,7,16,.86);border:1px solid var(--line2);
 padding:8px 15px;border-radius:100px;font-size:.82rem;font-weight:600;color:var(--gold);letter-spacing:.02em}
.badge .price::after{content:"AED 460"}
.dims{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:4;font-size:.68rem;color:rgba(255,255,255,.6);
 background:rgba(10,7,16,.6);padding:5px 13px;border-radius:100px;letter-spacing:.05em}
.dims{display:none}
.thumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;max-width:100%}
.th{flex:none;width:62px;height:48px;border-radius:3px;overflow:hidden;border:1.5px solid transparent;opacity:.55;cursor:pointer;transition:.2s}
.th img{width:100%;height:100%;object-fit:cover}
.th:hover{opacity:.85;transform:translateY(-1px)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:clamp(20px,3.4vw,30px)}
.lbl{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:24px 0 11px}
.lbl:first-of-type{margin-top:0}
#txt,#szw{width:100%;background:var(--bg2);border:1px solid var(--line2);color:var(--ink);padding:14px 15px;border-radius:3px;
 font-family:var(--sans);font-size:16px;font-weight:400;transition:border-color .2s}
#txt:focus,#szw:focus{border-color:var(--gold-d);outline:none}
.sw-row{display:flex;gap:9px;flex-wrap:wrap}
.sw{width:33px;height:33px;border-radius:50%;background:var(--sw);border:2px solid transparent;cursor:pointer;
 box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 0 12px var(--sw);transition:.2s}
.sw:hover{transform:scale(1.1)}
.fo-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media(max-width:520px){.fo-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fo{background:var(--bg2);border:1px solid var(--line2);border-radius:4px;padding:13px 6px 9px;text-align:center;
 color:var(--dim);font-size:1.35rem;line-height:1;cursor:pointer;transition:.2s}
.fo:hover{border-color:var(--gold-d);color:var(--ink)}
.fo small{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.06em;color:var(--dim2);margin-top:7px}
.so-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.so{background:var(--bg2);border:1px solid var(--line2);border-radius:4px;padding:12px 4px;text-align:center;
 font-size:.78rem;color:var(--dim);cursor:pointer;transition:.2s;font-weight:500}
.so:hover{border-color:var(--gold-d);color:var(--ink)}
.eo-row{display:flex;flex-direction:column;gap:8px}
.eo{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--line2);
 border-radius:4px;padding:13px 15px;font-size:.86rem;color:var(--dim);cursor:pointer;transition:.2s}
.eo:hover{border-color:var(--gold-d);color:var(--ink)}
.eo small{font-size:.72rem;color:var(--dim2);font-weight:600;letter-spacing:.03em}

/* --- mode tabs (build vs AI) --- */
.mode-tabs{display:flex;gap:10px;margin-bottom:clamp(22px,3.6vw,32px);flex-wrap:wrap}
.mtab{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border:1px solid var(--line2);border-radius:100px;
 font-size:.82rem;font-weight:600;color:var(--dim);cursor:pointer;transition:.2s;background:var(--panel)}
.mtab:hover{color:var(--ink);border-color:var(--gold-d)}
.mtab .ai-badge{font-size:.58rem;letter-spacing:.08em;padding:3px 8px;border-radius:100px;background:var(--grad);color:#12071A;font-weight:800}
#mode-build:checked ~ .mode-tabs .mtab-build,
#mode-ai:checked ~ .mode-tabs .mtab-ai,
#mode-logo:checked ~ .mode-tabs .mtab-logo{border-color:var(--gold);color:var(--gold);background:rgba(240,198,116,.09);
 animation:tabglow 3s ease-in-out infinite}
@keyframes tabglow{0%,100%{box-shadow:0 0 0 rgba(240,198,116,0)}50%{box-shadow:0 0 16px rgba(240,198,116,.35)}}
@media(prefers-reduced-motion:reduce){#mode-build:checked ~ .mode-tabs .mtab-build,#mode-ai:checked ~ .mode-tabs .mtab-ai,#mode-logo:checked ~ .mode-tabs .mtab-logo{animation:none}}

/* --- AI concept generator --- */
#mode-ai:checked ~ .cfg-body,
#mode-logo:checked ~ .cfg-body{display:none}
.ai-body{display:none}
#mode-ai:checked ~ .ai-body{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,46px);align-items:start}
.ai-body>*{min-width:0}
@media(max-width:940px){.ai-body{grid-template-columns:1fr!important}}
/* --- have a logo? tab --- */
.logo-body{display:none}
#mode-logo:checked ~ .logo-body{display:block}
.ai-stage{position:relative;aspect-ratio:4/3;border-radius:5px;overflow:hidden;border:1px solid var(--line2);
 background:var(--panel);display:flex;align-items:center;justify-content:center}
.ai-stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:fadein .5s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.ai-stage-empty{text-align:center;color:var(--dim2);padding:0 32px}
.ai-stage-empty svg{opacity:.5;margin-bottom:12px}
.ai-stage-empty p{font-size:.86rem;line-height:1.5}
.ai-stage-loading{text-align:center;color:var(--dim)}
.ai-spinner{width:32px;height:32px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--gold);
 margin:0 auto 14px;animation:aispin .8s linear infinite}
@keyframes aispin{to{transform:rotate(360deg)}}
.ai-stage-loading p{font-size:.82rem}
#idea{width:100%;background:var(--bg2);border:1px solid var(--line2);color:var(--ink);padding:14px 15px;border-radius:3px;
 font-family:var(--sans);font-size:16px;font-weight:400;resize:vertical;min-height:86px;line-height:1.5;transition:border-color .2s}
#idea:focus{border-color:var(--gold-d);outline:none}
.ai-hint{margin-top:8px;font-size:.72rem;color:var(--dim2)}
.ai-err{margin-top:12px;font-size:.8rem;color:#FF7A7A;display:none;line-height:1.5}
.ai-err.show{display:block}

/* checked-state wiring */
#col-pink:checked ~ .cfg-body{--glow:#FF3D93;}
#col-pink:checked ~ .cfg-body .sw-pink{transform:scale(1.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 0 3px #0B0812,0 0 0 4.5px var(--sw),0 0 26px var(--sw);}
#col-purple:checked ~ .cfg-body{--glow:#B15CFF;}
#col-purple:checked ~ .cfg-body .sw-purple{transform:scale(1.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 0 3px #0B0812,0 0 0 4.5px var(--sw),0 0 26px var(--sw);}
#col-blue:checked ~ .cfg-body{--glow:#4E7CFF;}
#col-blue:checked ~ .cfg-body .sw-blue{transform:scale(1.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 0 3px #0B0812,0 0 0 4.5px var(--sw),0 0 26px var(--sw);}
#col-cyan:checked ~ .cfg-body{--glow:#3CE7F5;}
#col-cyan:checked ~ .cfg-body .sw-cyan{transform:scale(1.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 0 3px #0B0812,0 0 0 4.5px var(--sw),0 0 26px var(--sw);}
#col-gold:checked ~ .cfg-body{--glow:#F0C674;}
#col-gold:checked ~ .cfg-body .sw-gold{transform:scale(1.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 0 3px #0B0812,0 0 0 4.5px var(--sw),0 0 26px var(--sw);}
#col-green:checked ~ .cfg-body{--glow:#7CFF8A;}
#col-green:checked ~ .cfg-body .sw-green{transform:scale(1.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 0 3px #0B0812,0 0 0 4.5px var(--sw),0 0 26px var(--sw);}
#col-white:checked ~ .cfg-body{--glow:#FFF6E9;}
#col-white:checked ~ .cfg-body .sw-white{transform:scale(1.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 0 3px #0B0812,0 0 0 4.5px var(--sw),0 0 26px var(--sw);}
#col-red:checked ~ .cfg-body{--glow:#FF4D4D;}
#col-red:checked ~ .cfg-body .sw-red{transform:scale(1.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 0 3px #0B0812,0 0 0 4.5px var(--sw),0 0 26px var(--sw);}
#fnt-neon:checked ~ .cfg-body .sign{font-family:'Neonderthaw',cursive;}
#fnt-neon:checked ~ .cfg-body .fo-neon{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-vibes:checked ~ .cfg-body .sign{font-family:'Great Vibes',cursive;}
#fnt-vibes:checked ~ .cfg-body .fo-vibes{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-dancing:checked ~ .cfg-body .sign{font-family:'Dancing Script',cursive;}
#fnt-dancing:checked ~ .cfg-body .fo-dancing{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-yellow:checked ~ .cfg-body .sign{font-family:'Yellowtail',cursive;}
#fnt-yellow:checked ~ .cfg-body .fo-yellow{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-satisfy:checked ~ .cfg-body .sign{font-family:'Satisfy',cursive;}
#fnt-satisfy:checked ~ .cfg-body .fo-satisfy{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-pacifico:checked ~ .cfg-body .sign{font-family:'Pacifico',cursive;}
#fnt-pacifico:checked ~ .cfg-body .fo-pacifico{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-caveat:checked ~ .cfg-body .sign{font-family:'Caveat',cursive;}
#fnt-caveat:checked ~ .cfg-body .fo-caveat{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-monoton:checked ~ .cfg-body .sign{font-family:'Monoton',cursive;}
#fnt-monoton:checked ~ .cfg-body .fo-monoton{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-shadows:checked ~ .cfg-body .sign{font-family:'Shadows Into Light',cursive;}
#fnt-shadows:checked ~ .cfg-body .fo-shadows{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-sacramento:checked ~ .cfg-body .sign{font-family:'Sacramento',cursive;}
#fnt-sacramento:checked ~ .cfg-body .fo-sacramento{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-parisienne:checked ~ .cfg-body .sign{font-family:'Parisienne',cursive;}
#fnt-parisienne:checked ~ .cfg-body .fo-parisienne{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-allura:checked ~ .cfg-body .sign{font-family:'Allura',cursive;}
#fnt-allura:checked ~ .cfg-body .fo-allura{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-playball:checked ~ .cfg-body .sign{font-family:'Playball',cursive;}
#fnt-playball:checked ~ .cfg-body .fo-playball{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-kalam:checked ~ .cfg-body .sign{font-family:'Kalam',cursive;font-weight:700;}
#fnt-kalam:checked ~ .cfg-body .fo-kalam{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-amatic:checked ~ .cfg-body .sign{font-family:'Amatic SC',cursive;font-weight:700;}
#fnt-amatic:checked ~ .cfg-body .fo-amatic{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-bungee:checked ~ .cfg-body .sign{font-family:'Bungee',cursive;}
#fnt-bungee:checked ~ .cfg-body .fo-bungee{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-marker:checked ~ .cfg-body .sign{font-family:'Permanent Marker',cursive;}
#fnt-marker:checked ~ .cfg-body .fo-marker{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-alexbrush:checked ~ .cfg-body .sign{font-family:'Alex Brush',cursive;}
#fnt-alexbrush:checked ~ .cfg-body .fo-alexbrush{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-apple:checked ~ .cfg-body .sign{font-family:'Homemade Apple',cursive;}
#fnt-apple:checked ~ .cfg-body .fo-apple{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-marck:checked ~ .cfg-body .sign{font-family:'Marck Script',cursive;}
#fnt-marck:checked ~ .cfg-body .fo-marck{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-righteous:checked ~ .cfg-body .sign{font-family:'Righteous',cursive;}
#fnt-righteous:checked ~ .cfg-body .fo-righteous{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-luckiest:checked ~ .cfg-body .sign{font-family:'Luckiest Guy',cursive;}
#fnt-luckiest:checked ~ .cfg-body .fo-luckiest{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#fnt-fredericka:checked ~ .cfg-body .sign{font-family:'Fredericka the Great',cursive;}
#fnt-fredericka:checked ~ .cfg-body .fo-fredericka{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#scn-greylounge:checked ~ .cfg-body .stage-bg{background-image:url(/images/wall-1.webp);}
#scn-greylounge:checked ~ .cfg-body .th-greylounge{opacity:1;box-shadow:0 0 0 2px var(--glow),0 0 18px -2px var(--glow);}
#scn-teal:checked ~ .cfg-body .stage-bg{background-image:url(/images/wall-2.webp);}
#scn-teal:checked ~ .cfg-body .th-teal{opacity:1;box-shadow:0 0 0 2px var(--glow),0 0 18px -2px var(--glow);}
#scn-rustic:checked ~ .cfg-body .stage-bg{background-image:url(/images/wall-3.webp);}
#scn-rustic:checked ~ .cfg-body .th-rustic{opacity:1;box-shadow:0 0 0 2px var(--glow),0 0 18px -2px var(--glow);}
#scn-office:checked ~ .cfg-body .stage-bg{background-image:url(/images/wall-4.webp);}
#scn-office:checked ~ .cfg-body .th-office{opacity:1;box-shadow:0 0 0 2px var(--glow),0 0 18px -2px var(--glow);}
#scn-stone:checked ~ .cfg-body .stage-bg{background-image:url(/images/wall-5.webp);}
#scn-stone:checked ~ .cfg-body .th-stone{opacity:1;box-shadow:0 0 0 2px var(--glow),0 0 18px -2px var(--glow);}
#scn-dark:checked ~ .cfg-body .stage-bg{background-image:url(/images/wall-6.webp);}
#scn-dark:checked ~ .cfg-body .th-dark{opacity:1;box-shadow:0 0 0 2px var(--glow),0 0 18px -2px var(--glow);}
#scn-pinkbrick:checked ~ .cfg-body .stage-bg{background-image:url(/images/wall-7.webp);}
#scn-pinkbrick:checked ~ .cfg-body .th-pinkbrick{opacity:1;box-shadow:0 0 0 2px var(--glow),0 0 18px -2px var(--glow);}
#scn-beam:checked ~ .cfg-body .stage-bg{background-image:url(/images/wall-8.webp);}
#scn-beam:checked ~ .cfg-body .th-beam{opacity:1;box-shadow:0 0 0 2px var(--glow),0 0 18px -2px var(--glow);}
#sz-s:checked ~ .cfg-body .sz-s{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#sz-m:checked ~ .cfg-body .sz-m{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#sz-l:checked ~ .cfg-body .sz-l{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#sz-xl:checked ~ .cfg-body .sz-xl{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#sz-s:checked ~ .cfg-body .sign{font-size:clamp(1.6rem,7vw,2.6rem);}
#sz-m:checked ~ .cfg-body .sign{font-size:clamp(2.1rem,9vw,3.4rem);}
#sz-l:checked ~ .cfg-body .sign{font-size:clamp(2.6rem,11vw,4.2rem);}
#sz-xl:checked ~ .cfg-body .sign{font-size:clamp(3.1rem,13vw,5rem);}
#eff-single:checked ~ .cfg-body .ef-single{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#eff-multi:checked ~ .cfg-body .ef-multi{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#eff-rgb:checked ~ .cfg-body .ef-rgb{border-color:var(--glow);color:var(--ivory,#F4EEE4);background:color-mix(in srgb,var(--glow) 13%,transparent);box-shadow:0 0 0 1px var(--glow),0 0 26px -6px var(--glow);}
#eff-rgb:checked ~ .cfg-body .sign{animation:huecycle 6s linear infinite,neonflicker 7s ease-in-out infinite;}
#eff-multi:checked ~ .cfg-body .sign{background:linear-gradient(92deg,#FF3D93,#B15CFF,#4E7CFF,#3CE7F5);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(177,92,255,.7));text-shadow:none;}
#lit-off:checked ~ .cfg-body .sign{color:rgba(255,255,255,.22);text-shadow:none;filter:none;background:none;-webkit-text-fill-color:rgba(255,255,255,.22);animation:none;}
#lit-off:checked ~ .cfg-body .stage-bg{filter:brightness(.62) saturate(.7);}
.pill-b{display:none}
#lit-off:checked ~ .cfg-body .pill-a{display:none}
#lit-off:checked ~ .cfg-body .pill-b{display:flex;background:#2A2333;}
#lit-off:checked ~ .cfg-body .pill-b .knob{left:3px;background:#7A7185;box-shadow:none;}
#lit-off:checked ~ .cfg-body .pill-b .l-on{color:#6C6478;}
#lit-off:checked ~ .cfg-body .pill-b .l-off{color:var(--ink);}

/* === v16: live price includes finish; size labels carry base prices === */
.badge[data-js] .price::after{content:"" !important}
.so small{display:block;font-size:.6rem;color:var(--dim2);margin-top:4px;font-weight:400;letter-spacing:.02em}


/* === v31 luxe studio ============================================ */
#col-pink:checked ~ .cfg-body .sw-name::after{content:"Pink"}
#col-purple:checked ~ .cfg-body .sw-name::after{content:"Purple"}
#col-blue:checked ~ .cfg-body .sw-name::after{content:"Blue"}
#col-cyan:checked ~ .cfg-body .sw-name::after{content:"Ice"}
#col-gold:checked ~ .cfg-body .sw-name::after{content:"Gold"}
#col-green:checked ~ .cfg-body .sw-name::after{content:"Mint"}
#col-white:checked ~ .cfg-body .sw-name::after{content:"Warm white"}
#col-red:checked ~ .cfg-body .sw-name::after{content:"Red"}
#fnt-neon:checked ~ .cfg-body .fo-name::after{content:"Neon tube"}
#fnt-vibes:checked ~ .cfg-body .fo-name::after{content:"Elegant"}
#fnt-dancing:checked ~ .cfg-body .fo-name::after{content:"Script"}
#fnt-yellow:checked ~ .cfg-body .fo-name::after{content:"Flowing"}
#fnt-satisfy:checked ~ .cfg-body .fo-name::after{content:"Brush"}
#fnt-pacifico:checked ~ .cfg-body .fo-name::after{content:"Retro"}
#fnt-caveat:checked ~ .cfg-body .fo-name::after{content:"Marker"}
#fnt-monoton:checked ~ .cfg-body .fo-name::after{content:"Block"}
#fnt-shadows:checked ~ .cfg-body .fo-name::after{content:"Casual"}
#fnt-sacramento:checked ~ .cfg-body .fo-name::after{content:"Thin script"}
#fnt-parisienne:checked ~ .cfg-body .fo-name::after{content:"Flowing"}
#fnt-allura:checked ~ .cfg-body .fo-name::after{content:"Wedding"}
#fnt-playball:checked ~ .cfg-body .fo-name::after{content:"Rounded"}
#fnt-kalam:checked ~ .cfg-body .fo-name::after{content:"Handwritten"}
#fnt-amatic:checked ~ .cfg-body .fo-name::after{content:"Tall & thin"}
#fnt-bungee:checked ~ .cfg-body .fo-name::after{content:"Bold Vegas"}
#fnt-marker:checked ~ .cfg-body .fo-name::after{content:"Marker"}
#fnt-alexbrush:checked ~ .cfg-body .fo-name::after{content:"Delicate"}
#fnt-apple:checked ~ .cfg-body .fo-name::after{content:"Diary"}
#fnt-marck:checked ~ .cfg-body .fo-name::after{content:"Bold script"}
#fnt-righteous:checked ~ .cfg-body .fo-name::after{content:"Modern"}
#fnt-luckiest:checked ~ .cfg-body .fo-name::after{content:"Playful"}
#fnt-fredericka:checked ~ .cfg-body .fo-name::after{content:"Vintage"}

.cfg-body{--glow:#FF3D93;grid-template-columns:1.32fr .88fr;gap:clamp(22px,3.4vw,44px)}
.stage-col{min-width:0}
/* stage: framed in the brand gradient, lit by the sign's colour */
.stage-wrap{position:relative;padding:1px;border-radius:20px;
 background:linear-gradient(125deg,rgba(255,63,210,.75),rgba(176,92,255,.55) 40%,rgba(61,180,255,.7));
 box-shadow:0 40px 100px -46px var(--glow),0 0 70px -30px var(--glow);transition:box-shadow .6s}
.stage-wrap::before{content:"";position:absolute;inset:-18%;z-index:-1;border-radius:50%;pointer-events:none;
 background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 22%,transparent),transparent);filter:blur(30px);opacity:.8;transition:background .6s}
.stage{border:0;border-radius:19px;background:#0B0812;transform:translateZ(0)}
.spill{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.42;transition:opacity .5s,background .5s;
 background:radial-gradient(60% 46% at 50% 47%,var(--glow),transparent 70%)}
#lit-off:checked ~ .cfg-body .spill{opacity:0}
#lit-off:checked ~ .cfg-body .stage-wrap{box-shadow:0 30px 80px -50px rgba(0,0,0,.8)}
.live{position:absolute;top:14px;right:14px;z-index:4;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:100px;
 background:rgba(8,6,12,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);
 font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#F4EEE4}
.live i{width:7px;height:7px;border-radius:50%;background:#FF4D6D;box-shadow:0 0 10px #FF4D6D;animation:livepulse 1.6s ease-in-out infinite}
@keyframes livepulse{50%{opacity:.25}}
#lit-off:checked ~ .cfg-body .live i{animation:none;background:#6C6478;box-shadow:none}
.lit-pill{top:14px;left:14px;width:70px;height:30px;background:rgba(8,6,12,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14)}
.lit-pill .knob{top:2px;left:41px;width:24px;height:24px;background:var(--glow);box-shadow:0 0 14px var(--glow)}
.lit-pill .l-on{color:#F4EEE4}
.sign.zap{animation:zap .55s linear 1,neonflicker 7s ease-in-out .55s infinite}
@keyframes zap{0%{opacity:.15}12%{opacity:1}22%{opacity:.35}34%{opacity:1}48%{opacity:.6}60%,100%{opacity:1}}
/* wall strip */
.thumbs{gap:10px;margin-top:16px;padding:4px 4px 8px;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.th{width:76px;height:54px;border-radius:12px;border:0;opacity:.5;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.th:hover{opacity:.9}
.stage-col .note{margin-top:8px;font-size:.72rem;color:var(--dim2)}
/* glass control panel */
.panel{border-radius:20px;border:1px solid rgba(255,255,255,.08);
 background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 40%),#0D0A14;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 80px -50px rgba(0,0,0,.9)}
.step-h{display:flex;align-items:center;gap:12px;margin:28px 0 14px;font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#F4EEE4}
.panel .step-h:first-child{margin-top:0}
.step-h b{font-family:var(--mono);font-weight:500;letter-spacing:.06em;background:linear-gradient(100deg,#FF3FD2,#B05CFF,#3DB4FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.step-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.14),transparent);order:2}
.step-h em{order:3;font-style:normal;font-family:var(--serif);font-size:1.02rem;letter-spacing:0;text-transform:none;font-weight:400;color:var(--glow);text-shadow:0 0 14px color-mix(in srgb,var(--glow) 60%,transparent)}
#txt,#szw,#idea{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px 18px;color:#F4EEE4;transition:border-color .25s,box-shadow .25s}
#txt{font-size:18px}
#szw{margin-top:12px;font-size:15px}
#txt:focus,#szw:focus,#idea:focus{border-color:var(--glow,#B05CFF);box-shadow:0 0 0 4px color-mix(in srgb,var(--glow,#B05CFF) 22%,transparent)}
/* colour orbs */
.sw-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.sw{width:auto;height:auto;aspect-ratio:1;max-width:44px;border:0;
 background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.75),var(--sw) 38%,color-mix(in srgb,var(--sw) 70%,#000) 100%);
 box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 14px -2px var(--sw)}
/* fonts: compact tiles; a 2-row swipe strip on phones */
.fo-row{gap:8px}
.fo{border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#CFC8DD;padding:14px 6px 10px;transition:border-color .2s,box-shadow .25s,color .2s,background .2s,transform .2s}
.fo:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.22);color:#fff}
.fo small{font-family:var(--sans);letter-spacing:.04em}
.cfg-body [class*="fo-"]{}
/* the picked font glows in the chosen colour */
#fnt-neon:checked ~ .cfg-body .fo-neon,#fnt-vibes:checked ~ .cfg-body .fo-vibes,#fnt-dancing:checked ~ .cfg-body .fo-dancing,#fnt-yellow:checked ~ .cfg-body .fo-yellow,#fnt-satisfy:checked ~ .cfg-body .fo-satisfy,#fnt-pacifico:checked ~ .cfg-body .fo-pacifico,#fnt-caveat:checked ~ .cfg-body .fo-caveat,#fnt-monoton:checked ~ .cfg-body .fo-monoton,#fnt-shadows:checked ~ .cfg-body .fo-shadows,#fnt-sacramento:checked ~ .cfg-body .fo-sacramento,#fnt-parisienne:checked ~ .cfg-body .fo-parisienne,#fnt-allura:checked ~ .cfg-body .fo-allura,#fnt-playball:checked ~ .cfg-body .fo-playball,#fnt-kalam:checked ~ .cfg-body .fo-kalam,#fnt-amatic:checked ~ .cfg-body .fo-amatic,#fnt-bungee:checked ~ .cfg-body .fo-bungee,#fnt-marker:checked ~ .cfg-body .fo-marker,#fnt-alexbrush:checked ~ .cfg-body .fo-alexbrush,#fnt-apple:checked ~ .cfg-body .fo-apple,#fnt-marck:checked ~ .cfg-body .fo-marck,#fnt-righteous:checked ~ .cfg-body .fo-righteous,#fnt-luckiest:checked ~ .cfg-body .fo-luckiest,#fnt-fredericka:checked ~ .cfg-body .fo-fredericka{text-shadow:0 0 6px var(--glow),0 0 16px var(--glow)}
/* size: one segmented control */
.so-row{gap:4px;padding:4px;border-radius:100px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.so{border:1px solid transparent;border-radius:100px;background:transparent;padding:11px 4px;color:#BDB6CC}
.so:hover{color:#fff;border-color:transparent}
/* finish: three cards with a mini preview */
.eo-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.eo{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:6px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);padding:14px 12px;color:#E9E3F2;font-size:.84rem;line-height:1.25}
.eo:hover{border-color:rgba(255,255,255,.22);color:#fff}
.eo small{font-weight:400;font-size:.68rem;letter-spacing:.02em;color:var(--dim2)}
.eo-viz{display:block;width:100%;height:8px;border-radius:8px;margin-bottom:6px}
.ef-single .eo-viz{background:var(--glow);box-shadow:0 0 12px var(--glow)}
.ef-multi .eo-viz{background:linear-gradient(90deg,#FF3D93,#B15CFF,#4E7CFF,#3CE7F5);box-shadow:0 0 12px rgba(177,92,255,.6)}
.ef-rgb .eo-viz{background:linear-gradient(90deg,#FF4D4D,#F0C674,#7CFF8A,#3CE7F5,#4E7CFF,#B15CFF,#FF3D93,#FF4D4D);background-size:200% 100%;animation:rgbslide 3s linear infinite;box-shadow:0 0 12px rgba(124,255,138,.45)}
@keyframes rgbslide{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.ef-rgb .eo-viz,.live i,.btn-glow::after{animation:none}}
/* the big button picks up your colour */
.btn-glow{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;margin-top:28px;
 border-radius:100px;color:#fff;font-family:var(--sans);font-size:.86rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
 background:linear-gradient(100deg,#FF3FD2,#B05CFF 52%,#3DB4FF);
 box-shadow:0 18px 50px -14px var(--glow),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .35s var(--ease),box-shadow .35s}
.btn-glow::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn-glow:hover{transform:translateY(-2px);box-shadow:0 24px 60px -12px var(--glow),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-glow svg{width:18px;height:18px;flex:none}
.btn-glow[aria-busy="true"]{opacity:.75}
.cta-note{margin-top:12px;text-align:center;font-size:.72rem;color:var(--dim2)}
/* mode switcher: glass segmented pill */
.mode-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:100px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none}
.mode-tabs::-webkit-scrollbar{display:none}
.mtab{border:0;background:transparent;white-space:nowrap;padding:11px 18px;color:#BDB6CC}
.mtab:hover{color:#fff}
#mode-build:checked ~ .mode-tabs .mtab-build,#mode-ai:checked ~ .mode-tabs .mtab-ai,#mode-logo:checked ~ .mode-tabs .mtab-logo{
 animation:none;color:#fff;background:linear-gradient(100deg,rgba(255,63,210,.32),rgba(176,92,255,.32),rgba(61,180,255,.32));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 6px 24px -10px #B05CFF}
.ai-stage,.logo-stage{border-radius:20px;border:1px solid rgba(255,255,255,.1);background:#0B0812}
.logo-card{border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 40%),#0D0A14}
.ai-spinner{border-top-color:#B05CFF}
/* what to expect */
.expect-badge{background:rgba(255,255,255,.05);color:#F4EEE4;border:1px solid rgba(255,255,255,.14);box-shadow:none;font-family:var(--mono);font-weight:500;letter-spacing:.16em;padding:8px 18px}
.expect-stage{border-radius:20px;border:1px solid rgba(255,255,255,.1)}
.expect-sign{font-family:'Neonderthaw',cursive;font-size:clamp(2.4rem,6vw,3.4rem);line-height:1.2}
.expect-underline path{stroke:#B05CFF}

@media(min-width:941px){.stage-col{position:sticky;top:calc(var(--hdr-h,80px) + 18px);align-self:start;transition:top .6s var(--ease)}}
@media(max-width:940px){
 .cfg-body{display:block}
 .stage-col{display:contents}
 .stage-wrap{position:sticky;top:calc(var(--hdr-h,0px) + 8px);z-index:6;transition:top .6s var(--ease)}
 .stage-wrap::before{display:none}
 .panel{margin-top:18px}
}
@media(max-width:560px){
 .stage-wrap{border-radius:16px}.stage{border-radius:15px}
 .live{top:10px;right:10px;padding:6px 10px;font-size:.52rem}
 .lit-pill{top:10px;left:10px}
 .panel{padding:20px 16px;border-radius:18px}
 .sw-row{gap:7px}
 .fo-row{grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:86px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:none}
 .fo-row::-webkit-scrollbar{display:none}
 .fo{scroll-snap-align:start}
 .eo{padding:12px 10px;font-size:.78rem}
 .eo small{display:none}
 .thumbs{margin-top:12px}
}

/* keep the glow clipped without breaking the pinned preview */
.page-hero{overflow:clip}

/* the hidden radios sit fixed in the viewport, so picking an option never scrolls the page */
.cfg .st{position:fixed;top:0;left:0}
@media(max-width:560px){
 .stage{aspect-ratio:3/2}
 .mode-tabs{display:flex;width:100%}
 .mtab{flex:1 1 auto;justify-content:center;padding:10px 10px;font-size:.76rem;gap:6px}
 .mtab .ai-badge{padding:2px 6px}
}
.thumbs:focus-visible,.fo-row:focus-visible{outline:2px solid #B05CFF;outline-offset:4px;border-radius:12px}