/* Utsav · create flow. One question per screen, big tap targets, live preview. */
body.create{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--ivory)}
.ctop{display:flex;align-items:center;gap:12px;padding:10px var(--pad);height:60px;background:var(--ivory);position:sticky;top:0;z-index:20}
.ctop .brand{font-size:21px}.ctop .brand img{width:30px;height:30px}
.stepno{margin-left:auto;font-size:13px;font-weight:700;color:var(--mute);white-space:nowrap}
.pv-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;font-weight:700;font-size:14px;cursor:pointer}
.cprog{height:4px;background:var(--line)}
.cprog i{display:block;height:100%;width:0;background:var(--maroon);transition:width .4s cubic-bezier(.3,.8,.2,1)}
.clayout{flex:1;display:grid;width:100%;max-width:1200px;margin:0 auto}
@media (min-width:980px){.clayout{grid-template-columns:minmax(0,1fr) 420px;gap:40px;padding:0 var(--pad)}.pv-btn{display:none}}
.cpane{display:flex;flex-direction:column;min-width:0;padding:clamp(22px,4vw,44px) var(--pad) 0}
@media (min-width:980px){.cpane{padding-left:0;padding-right:0}}
.q{flex:1;max-width:640px;width:100%;animation:qin .45s cubic-bezier(.2,.75,.2,1)}
@keyframes qin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.q .kicker{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--maroon);margin-bottom:10px}
.q h1{font-size:clamp(28px,5vw,40px);line-height:1.12}
.q .hint{margin:10px 0 0;color:var(--mute);font-size:15.5px;max-width:52ch}
.q .body{margin-top:24px;display:flex;flex-direction:column;gap:14px}
.cnav{position:sticky;bottom:0;display:flex;gap:10px;padding:14px 0 calc(14px + env(safe-area-inset-bottom));margin-top:26px;background:linear-gradient(transparent,var(--ivory) 30%);max-width:640px}
.cnav .btn{flex:1}.cnav #backBtn{flex:0 0 auto;min-width:96px}
.cnav[hidden]{display:none}

/* fields */
.f{display:flex;flex-direction:column;gap:6px}
.f>span{font-size:14px;font-weight:700;color:var(--ink2)}
.f small{color:var(--mute);font-size:13px}
.f input,.f textarea,.f select{width:100%;min-height:54px;padding:12px 16px;border:1.5px solid var(--line2);border-radius:14px;background:var(--paper);font-size:17px}
.f textarea{min-height:92px;resize:vertical;line-height:1.45}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,92,90,.15)}
.two{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.three{display:grid;gap:10px;grid-template-columns:1.3fr 1fr 1fr}
@media (max-width:420px){.three{grid-template-columns:1fr 1fr}.three .f:first-child{grid-column:1/-1}}
.err{color:var(--maroon);font-size:14px;font-weight:600;margin:4px 0 0}

/* option cards */
.opts{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.opts.wide{grid-template-columns:1fr}
.opts.two-up{grid-template-columns:1fr 1fr}
.opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:16px;border:2px solid var(--line);border-radius:16px;background:var(--paper);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s;min-height:64px}
.opt:hover{border-color:var(--line2)}
.opt:active{transform:scale(.985)}
.opt b{font-size:16.5px}.opt small{color:var(--mute);font-size:13.5px;line-height:1.4}
.opt.on{border-color:var(--maroon);box-shadow:0 0 0 3px rgba(176,39,27,.12)}
.opt.on::after{content:"";position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;background:var(--maroon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/16px no-repeat}
.opt.design{padding:0;overflow:hidden}
.opt.design .shot{width:100%;aspect-ratio:390/800;overflow:hidden;background:var(--sand)}   /* the whole cover, phone-shaped */
.opt.design .shot{position:relative}
.opt.design .shot iframe.mini{position:absolute;top:0;left:0;width:390px;height:800px;border:0;transform-origin:0 0;pointer-events:none;background:var(--sand)}
.opt.design .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.opt.design .m{display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px}
.q.still{animation:none}.q.keep-reveal .reveal{animation:none}
.opt.design .opens{display:block;font-size:11.5px;line-height:1.35;color:var(--mute);margin-top:3px}
.opt.design .opens::before{content:"▶ ";font-size:9px;color:var(--maroon)}
.hint.want{margin-top:14px;padding:10px 14px;border-radius:12px;background:#FFF6E0;border:1px solid #F0D9A0;color:var(--ink2)}
.opt.design .team{display:inline-block;font-size:11px;font-weight:700;color:var(--teal);background:var(--teal-soft);padding:2px 8px;border-radius:999px;margin-top:4px}
.opt.sym{align-items:center;justify-content:center;text-align:center;min-height:96px}
.opt.sym .glyph{font-size:26px;line-height:1.3;color:var(--maroon)}
.opt.sym .glyph.big{font-size:40px}
.swatch-opt{align-items:center;flex-direction:row;gap:12px}
.swatch-opt i{width:46px;height:46px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.1);box-shadow:inset 0 0 0 5px rgba(255,255,255,.25)}

/* yes / no */
.yn{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.yn .opt{align-items:center;text-align:center;justify-content:center;min-height:92px;padding:16px 10px}
.yn .opt b{font-size:19px}
.reveal{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:16px;background:var(--paper);border:1px solid var(--line);animation:qin .35s ease}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip-opt{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;border:2px solid var(--line);background:var(--paper);font-weight:700;font-size:15.5px;cursor:pointer}
.chip-opt.on{border-color:var(--maroon);background:#FBE9E6;color:var(--maroon2)}
.chip-opt.on::before{content:"✓"}
.add-inline{display:flex;gap:8px}.add-inline input{flex:1}

/* event cards */
.ev{border:1.5px solid var(--line);border-radius:16px;background:var(--paper);padding:16px;display:flex;flex-direction:column;gap:12px}
.ev-h{display:flex;align-items:center;gap:10px}
.ev-h b{font-family:var(--f-disp);font-size:21px;font-weight:600}
.ev-h .main{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);background:var(--teal-soft);padding:3px 9px;border-radius:999px}
.linkish{border:0;background:none;color:var(--maroon);font-weight:700;cursor:pointer;padding:6px 0;text-align:left;font-size:14.5px}

/* know questions */
.kq{display:flex;flex-direction:column;gap:10px;padding:16px 0;border-bottom:1px dashed var(--line)}
.kq:last-child{border-bottom:0}
.kq>b{font-size:16px}

/* review */
.sum{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden}
.sum div{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.sum div:last-child{border-bottom:0}
.sum span{color:var(--mute);font-size:14px}.sum b{font-size:15px;text-align:left;min-width:0;overflow-wrap:anywhere}
.lock-note{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:14px;background:var(--teal-soft);color:var(--ink);font-size:14.5px;line-height:1.45}.lock-note b{font-size:15.5px}
.sum button{border:0;background:none;color:var(--maroon);font-weight:700;cursor:pointer;font-size:14px;padding:4px}
.done-card{border-radius:20px;background:var(--paper);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:14px}
.linkbox{display:flex;gap:8px}.linkbox input{flex:1;min-width:0;font-size:14px;min-height:46px;padding:0 12px;border:1.5px solid var(--line2);border-radius:12px;background:var(--ivory)}
.next-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.next-steps li{display:flex;gap:12px;align-items:flex-start}
.next-steps i{width:30px;height:30px;border-radius:50%;background:var(--maroon);color:#fff;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.welcome-art{display:flex;gap:10px;margin-top:26px}
.welcome-art img{width:31%;border-radius:16px;box-shadow:var(--sh);aspect-ratio:540/1108;object-fit:cover;object-position:top}

/* preview */
.cpreview{display:none}
@media (min-width:980px){.cpreview{display:flex;flex-direction:column;align-items:center;position:sticky;top:64px;align-self:start;padding:28px 0}}
.phone-frame{width:360px;height:min(720px,calc(100vh - 170px));border-radius:36px;border:10px solid #1F1714;background:#1F1714;overflow:hidden;box-shadow:0 24px 50px rgba(31,23,20,.25)}
.phone-frame iframe,.sheet iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.pv-actions{margin-top:12px}.pv-note{margin:8px 0 0;font-size:12.5px;color:var(--mute);text-align:center}
.sheet{position:fixed;inset:0;z-index:60;background:#1F1714;display:flex;flex-direction:column}
.sheet[hidden]{display:none}
.sheet-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--ivory)}
.sheet-bar b{margin-right:auto}
.sheet .x{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;font-size:18px;cursor:pointer}
.sheet iframe{flex:1}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-weight:600;font-size:14px;z-index:70;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:qin .3s ease}

/* colour and date-style cards: live mini invites */
.opts.cols{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){.opts.cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:980px) and (max-width:1100px){.opts.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opt.design .shot.short{aspect-ratio:1/1}
.opt.design .shot.short iframe.mini{height:390px}
.colour-opt .dots{display:flex;gap:4px;margin-top:6px}.colour-opt .dots i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.date-none{grid-column:1/-1;min-height:0}
.opt.design{min-width:0}
.opts{min-width:0}.q .body{min-width:0}
/* prices up front, premium designs, extras, what sending costs */
.price-note{display:flex;flex-direction:column;gap:4px;margin:18px 0 4px;padding:14px 16px;border-radius:14px;background:#FFF6E0;border:1px solid #F2D58A;font-size:14.5px;line-height:1.5;color:var(--ink2);max-width:52ch}
.price-note b{color:var(--ink);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.opt.design.prem{border-color:#E3C27A;background:linear-gradient(180deg,#FFFBF0,var(--paper))}
.opt.design.prem.on{border-color:#B8860B;box-shadow:0 0 0 3px rgba(184,134,11,.18)}
.opt.design .team.premium{color:#7A5200;background:linear-gradient(90deg,#FBE7B0,#F6D27A)}
.xopt{padding-right:64px}
.xopt .xprice{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-weight:700;font-size:15px;color:var(--ink)}
.xopt.on .xprice{right:46px}
.xopt.incl{cursor:default;background:var(--sand)}.xopt.incl .xprice{color:var(--teal);font-size:12.5px;max-width:92px;text-align:right;line-height:1.3}
.small-hint{font-size:14px!important}
.cost{display:flex;flex-direction:column;gap:6px;margin:16px 0;padding:14px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);font-size:14.5px}
.cost>b{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--maroon)}
.cost>div{display:flex;justify-content:space-between;gap:12px}.cost .ctot{border-top:1px dashed var(--line2);padding-top:8px;font-weight:700;font-size:16px}
.cost small{color:var(--mute);font-size:12.5px;line-height:1.45}