/* sign-up, welcome, profile */
.acct{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,460px);gap:clamp(1.5rem,5vw,4rem);align-items:center;max-width:1080px;margin:clamp(.5rem,5vh,3rem) auto 0}
.acct.solo{grid-template-columns:minmax(0,520px);justify-content:center}
.acct>.sidehero{order:-1}
.sidehero{display:grid;gap:.7rem;justify-items:start;color:var(--amber-text)}
.sidehero .art{width:min(260px,70%)}.sidehero svg{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 30px var(--amber-glow))}
.sidehero h2{font-size:clamp(1.6rem,3vw,2.4rem);color:var(--white);line-height:1.1}
.sidehero p{color:var(--muted);max-width:30ch}
.acard{padding:clamp(1.25rem,3vw,2rem);display:grid;gap:.9rem;position:relative;overflow:hidden;box-shadow:0 20px 60px -30px var(--amber-glow)}
.acard h1{font-size:clamp(1.4rem,2.4vw,1.8rem);line-height:1.15}
.acard form{display:grid;gap:.85rem}
.acard h1:focus{outline:none}
.dots{list-style:none;display:flex;gap:.4rem;align-items:center}
.dots li{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.78rem;flex:1;min-width:0}
.dots li:not(:last-child)::after{content:"";flex:1;height:2px;background:var(--track);border-radius:2px;min-width:8px}
.dots li.done:not(:last-child)::after{background:var(--amber)}
.dots i{flex:none;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;border:1px solid var(--border-ctl);font:600 .75rem var(--font-head);font-style:normal;transition:background .25s,border-color .25s}
.dots li[aria-current=step] i{background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
.dots li[aria-current=step]{color:var(--white);font-weight:600}
.dots li.done i{background:var(--amber-dim);border-color:var(--amber);color:var(--amber-text)}
.dots span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc{display:flex;align-items:stretch}
.cc b{display:grid;place-items:center;padding:0 .8rem;border:1px solid var(--border-ctl);border-right:0;border-radius:12px 0 0 12px;background:var(--bg-card2);color:var(--white);font-weight:600}
.cc input{border-radius:0 12px 12px 0}
input[type=email],input[type=text],input[type=tel],input[type=number]{width:100%}
.acard input:not([type=file]),.pform input{width:100%;padding:.7rem 1rem;border-radius:12px;border:1px solid var(--border-ctl);background:var(--bg-card);color:var(--white);font:inherit;min-height:44px}
.acard input:focus,.pform input:focus{border-color:var(--focus);outline:2px solid var(--focus);outline-offset:2px}
.acard input[aria-invalid=true]{border-color:var(--bad)}

.otpbox{display:flex;gap:clamp(.5rem,2vw,.8rem);justify-content:center}
.acard input.ob{width:clamp(48px,16vw,64px);height:clamp(56px,18vw,72px);padding:0;text-align:center;font:600 1.6rem var(--font-head);border-radius:14px}
.ob.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.acard .btn-lg{width:100%}
.newhere{margin-top:.8rem}

.av{--s:96px;display:inline-grid;place-items:center;width:var(--s);height:var(--s);border-radius:50%;flex:none;overflow:hidden;background:linear-gradient(135deg,var(--amber),var(--gold));color:var(--on-amber);border:2px solid var(--border-amber);box-shadow:0 6px 22px -8px var(--amber-glow)}
.av b{font:700 calc(var(--s)*.38) var(--font-head);letter-spacing:.02em}
.av img{width:100%;height:100%;object-fit:cover;animation:fade .3s both}
.photo{display:grid;justify-items:center;gap:.8rem;text-align:center}
.avwrap{border-radius:50%;padding:6px;border:2px dashed var(--border-amber);transition:border-color .2s,background .2s,opacity .2s}
.avwrap.over{border-color:var(--amber);background:var(--amber-dim)}.avwrap.busy{opacity:.55}
.photo-act{display:grid;gap:.4rem;justify-items:center}
.me{display:inline-flex;align-items:center;gap:.5rem;color:inherit;text-decoration:none;border-radius:100px;padding:.2rem .7rem .2rem .2rem;border:1px solid transparent;transition:background .2s,border-color .2s}
.me:hover{background:var(--amber-dim);border-color:var(--border-amber)}
.me .av{border-width:1px;box-shadow:none}
.okmark svg{width:72px;height:72px;margin:0 auto;display:block;fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.okmark circle{stroke-dasharray:151;stroke-dashoffset:151;animation:draw .6s .1s ease-out forwards}
.okmark path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .4s .6s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.acard:has(.okmark){text-align:center;justify-items:center}

.pcard{width:100%;display:grid;gap:1.1rem}
.phead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem 1.5rem;align-items:center}
.pname{font-size:1.4rem;margin:0 0 .2rem;display:block}
.kvs{display:grid;gap:.1rem}
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--border)}
.kv dt{color:var(--muted);font-size:.85rem}.kv dd{font-weight:500;text-align:right;overflow-wrap:anywhere}
.pform{display:grid;gap:.85rem}
.phead .photo{justify-items:center;text-align:center;max-width:200px}

@media(max-width:900px){
  .acct{grid-template-columns:minmax(0,1fr);max-width:480px}
  .sidehero{display:none}
  .top .who #whoName{display:inline-flex}
  .top .who .me>span:not(.av){display:none}
  .top .who .me{padding:.15rem}
}
@media(max-width:480px){.phead{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}}
@media(max-width:420px){.dots span{display:none}.dots li[aria-current=step] span{display:inline}.dots li[aria-current=step]{flex:none}.dots li:not([aria-current=step]):not(:last-child){flex:1}}
@media(min-width:1700px){.acct{max-width:1240px}}
@media(prefers-reduced-motion:reduce){.okmark circle,.okmark path{animation:none;stroke-dashoffset:0}.ob.shake{animation:none}}
.skip{position:absolute;left:.75rem;top:-4rem;z-index:60;background:var(--amber);color:var(--on-amber);padding:.6rem 1rem;border-radius:100px;font:600 .85rem var(--font-head);text-decoration:none;transition:top .2s}
.skip:focus{top:.75rem}

/* onboarding: coach-mark tour + install banner */
html.no-dir #pickDir{display:none}
.banner.pwa img{border-radius:9px;flex:none}

/* "Your logo" card: light/dark preview tiles, drop zone, watermark opt-in */
.lg-zone{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.8rem 0 .6rem;padding:.6rem;border:2px dashed var(--border-amber);border-radius:var(--r-lg,14px);cursor:pointer;transition:border-color .2s,background .2s,opacity .2s}
.lg-zone:hover,.lg-zone.over,.lg-zone:focus-visible{border-color:var(--amber);background:var(--amber-soft,rgba(255,170,0,.06))}
.lg-zone.busy{opacity:.6;pointer-events:none}
.lg-tile{display:grid;place-items:center;aspect-ratio:2/1;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.lg-light{background:#fff}.lg-dark{background:#111}
.lg-tile img{max-width:80%;max-height:80%;object-fit:contain}
.lg-dark .lg-empty{display:none}
.lg-wm{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--border)}
.lg-wm label{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer}
.lg-wm label span{display:grid;gap:.15rem}
.lg-wm input{margin-top:.25rem;width:1.1rem;height:1.1rem;accent-color:var(--amber)}

/* wp8: calm profile/settings. Logo first and prominent; empty message rows take no space. */
.ptop{margin-bottom:var(--s-4,1.25rem)}
.ptop .lg-card{gap:.6rem;border-color:var(--border-amber)}
.ptop .lg-zone{padding:.9rem;margin:.4rem 0}
.ptop .lg-tile{aspect-ratio:5/2}
.pcard .err:empty,.lg-card .err:empty,.lg-card .note:empty,.lg-card small:empty,.pcard .imp-msg:empty{display:none}
@media(min-width:900px){.ptop .lg-card{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:start;column-gap:2rem}.ptop .lg-card>h2,.ptop .lg-card>p{grid-column:1}.ptop .lg-card>.lg-zone{grid-column:2;grid-row:1/span 5}.ptop .lg-card>.lg-wm{grid-column:1/-1}}
.stor-line{margin-top:.9rem}
.stor-line .stor{display:grid;gap:.4rem}