/* Onboarding: one question per screen, iOS system style. */
.onb{--ink:#1c1c1e;--muted:#6e6e73;--line:#e5e5ea;--fill:#f2f2f7;--brand:#5b2bd6;--brand-2:#7c4dff;--spring:cubic-bezier(.34,1.3,.64,1);--out:cubic-bezier(.22,1,.36,1);
 width:min(640px,100vw);height:min(820px,100dvh);max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:32px;overflow:hidden;background:var(--fill);color:var(--ink);
 font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 40px 120px -30px #1a0b4d80}
.onb[open]{display:flex;flex-direction:column;animation:onb-in .55s var(--out) both}
.onb::backdrop{background:#0e0620b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:onb-fade .4s both}
@keyframes onb-in{from{opacity:0;translate:0 40px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes onb-fade{from{opacity:0}}
body.onb-open{overflow:hidden}
.onb-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 0}
.onb-icon{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 1px 2px #0000000d;transition:transform .3s var(--spring)}
.onb-icon:active{transform:scale(.9)}
.onb-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.onb-dots{display:flex;gap:6px}.onb-dots i{width:8px;height:8px;border-radius:99px;background:#d1d1d6;transition:width .45s var(--spring),background .3s}.onb-dots i.on{width:22px;background:var(--brand)}
.onb-track{flex:1;display:flex;min-height:0;translate:calc(var(--step,0) * -100%) 0;transition:translate .6s var(--out)}
.onb-step{flex:0 0 100%;min-width:0;overflow-y:auto;padding:22px 24px 12px;opacity:.35;transition:opacity .5s var(--out)}
.onb-step.is-active{opacity:1}
.onb-step h1{margin:6px 0 22px;font-size:clamp(28px,6vw,34px);line-height:1.1;letter-spacing:-.03em;font-weight:700}
/* Step 1 */
.onb-goals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.onb-goal{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:26px;min-height:116px;padding:18px;border:0;border-radius:22px;background:#fff;color:var(--ink);font-family:inherit;font-weight:600;font-size:17px;line-height:1.2;letter-spacing:-.01em;text-align:left;cursor:pointer;box-shadow:0 1px 2px #0000000a;transition:transform .45s var(--spring),box-shadow .3s}
.onb-goal span{font-size:30px;line-height:1}
.onb-goal:hover{box-shadow:0 10px 28px -14px #1c1c1e40}.onb-goal:active{transform:scale(.96)}
.onb-goal.on{box-shadow:0 0 0 3px var(--brand)}
/* Step 2 */
.onb-looks{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -24px;padding:6px 24px 18px;scrollbar-width:none}.onb-looks::-webkit-scrollbar{display:none}
.onb-look{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;scroll-snap-align:center}
.onb-phone{position:relative;display:block;width:222px;height:420px;border-radius:34px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px #0000000d,0 18px 40px -22px #1c1c1e66;transition:transform .45s var(--spring),box-shadow .3s}
.onb-scale{position:absolute;top:0;left:0;width:390px;transform:scale(.57);transform-origin:0 0;pointer-events:none}
.onb-scale .bio-page{min-height:740px}.onb-scale .p-tools{visibility:hidden}
.onb-look[aria-selected="true"] .onb-phone{box-shadow:0 0 0 4px var(--brand),0 18px 40px -18px #5b2bd680;transform:translateY(-4px)}
.onb-look:active .onb-phone{transform:scale(.97)}
.onb-look-name{font-size:15px;font-weight:600}
/* Step 3 and 4: grouped inset lists */
.onb-split{display:grid;gap:20px}
.onb-live{display:flex;justify-content:center}.onb-live .onb-phone{width:176px;height:330px;border-radius:28px}.onb-live .onb-scale{transform:scale(.45)}
.onb-group{overflow:hidden;border-radius:16px;background:#fff}
.onb-group label{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border-bottom:1px solid var(--line)}
.onb-group label:last-child{border-bottom:0}
.onb-group label>span{flex:0 0 58px;font-size:16px;font-weight:500}
.onb-group input{flex:1;min-width:0;height:52px;border:0;outline:0;background:none;color:var(--ink);font-family:inherit;font-weight:400;font-size:17px}
.onb-group input::placeholder{color:#b0b0b5}
.onb-link{flex-wrap:wrap;padding-top:4px!important;padding-bottom:4px!important}
.onb-link b{flex:0 0 100%;margin:-10px 0 8px;font-size:13px;font-weight:600;color:var(--brand)}
.onb-link b[hidden]{display:none}
.onb-caption{margin:22px 0 8px 16px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.onb-claim .onb-prefix{flex:none;font-size:17px;color:var(--muted)}
.onb-claim input{font-weight:600}
.onb-note{margin:10px 16px 0;font-size:14px;color:#c9341f}.onb-note.ok{color:#1f8a4c}
/* Footer */
.onb-foot{display:grid;gap:4px;padding:12px 24px calc(18px + env(safe-area-inset-bottom))}
.onb-primary{min-height:56px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-family:inherit;font-weight:600;font-size:17px;letter-spacing:-.01em;cursor:pointer;box-shadow:0 14px 30px -16px #5b2bd6cc;transition:transform .45s var(--spring),opacity .2s}
.onb-primary:active{transform:scale(.97)}.onb-primary:disabled{opacity:.4;cursor:default;transform:none}
.onb-primary[hidden],.onb-secondary[hidden]{display:none}
.onb-secondary{min-height:48px;border:0;background:none;color:var(--brand);font-family:inherit;font-weight:500;font-size:16px;cursor:pointer}
@media(min-width:720px){.onb-split{grid-template-columns:auto minmax(0,1fr);align-items:start}.onb-live{position:sticky;top:0}}
@media(max-width:640px){.onb{width:100vw;height:100dvh;border-radius:0}.onb-goal{min-height:104px}}
@media(prefers-reduced-motion:reduce){.onb,.onb *{animation:none!important;transition:none!important}}
.onb-step{scrollbar-width:none}.onb-step::-webkit-scrollbar{display:none}
.onb-note:empty{display:none}
.onb-reveal{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:26px}
.onb-reveal .onb-phone{width:200px;height:370px;border-radius:32px;animation:onb-rise .7s var(--spring) both}.onb-reveal .onb-scale{transform:scale(.513)}
.onb-url{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;background:#fff;box-shadow:0 1px 2px #0000000d;font-size:16px;font-weight:600;letter-spacing:-.01em}
@keyframes onb-rise{from{opacity:0;translate:0 24px;scale:.94}}
/* Paywall */
.pay-body{flex:1;overflow-y:auto;padding:0 24px 8px;scrollbar-width:none}.pay-body::-webkit-scrollbar{display:none}
.pay .onb-reveal{margin:4px 0 22px}.pay .onb-reveal .onb-phone{width:150px;height:280px;border-radius:26px}.pay .onb-reveal .onb-scale{transform:scale(.385)}
.pay h1{margin:0 0 18px;text-align:center;font-size:30px;line-height:1.1;letter-spacing:-.03em;font-weight:700}
.pay-plans{display:grid;gap:10px;margin:18px 0}
.pay-plan{display:flex;align-items:center;gap:14px;min-height:68px;padding:0 18px;border-radius:18px;background:#fff;cursor:pointer;box-shadow:0 0 0 1.5px transparent;transition:box-shadow .25s,transform .4s var(--spring)}
.pay-plan:active{transform:scale(.985)}
.pay-plan input{position:absolute;opacity:0;pointer-events:none}
.pay-plan span{flex:1;display:grid;gap:2px}.pay-plan b{font-size:17px;font-weight:600}.pay-plan small{font-size:14px;color:var(--muted)}
.pay-plan strong{font-size:22px;font-weight:700;letter-spacing:-.02em}.pay-plan strong small{font-size:14px;font-weight:500}
.pay-plan:has(input:checked){box-shadow:0 0 0 2.5px var(--brand)}
.pay-plan:has(input:focus-visible){outline:3px solid #7c4dff66;outline-offset:2px}
.pay-list{list-style:none;margin:0;padding:6px 4px;display:grid;gap:12px}
.pay-list li{display:flex;align-items:center;gap:12px;font-size:16px}
.pay-list svg,.done-mark svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--brand);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pay-fine{margin:6px 0 0;text-align:center;font-size:13px;line-height:1.4;color:var(--muted)}
a.onb-primary{display:grid;place-items:center;text-decoration:none}
/* Success */
.done{height:auto;max-height:min(640px,100dvh)}
.done-body{padding:48px 28px 10px;text-align:center}
.done-mark{width:76px;height:76px;margin:0 auto 22px;display:grid;place-items:center;border-radius:50%;background:#efe8ff}
.done-mark svg{width:38px;height:38px}
.done.is-live .done-mark{background:linear-gradient(135deg,var(--brand),var(--brand-2));animation:done-pop .7s var(--spring) both}
.done.is-live .done-mark svg{stroke:#fff;stroke-dasharray:30;stroke-dashoffset:30;animation:done-draw .5s .35s var(--out) forwards}
.done h1{margin:0 0 10px;font-size:32px;letter-spacing:-.03em}
.done p{margin:0 auto;max-width:34ch;font-size:16px;line-height:1.5;color:var(--muted)}
.done-link{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 0;padding:8px 8px 8px 18px;border-radius:999px;background:#fff;font-weight:600}
.done-link[hidden]{display:none}
.done-link button{min-height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--fill);color:var(--ink);font-family:inherit;font-weight:600;font-size:15px;cursor:pointer}
@keyframes done-pop{from{scale:.4;opacity:0}}
@keyframes done-draw{to{stroke-dashoffset:0}}
@media(max-width:640px){.done{height:auto;border-radius:28px 28px 0 0;margin-bottom:0}}
.pay .onb-url{display:none}.pay .onb-reveal{margin:0 0 16px}.pay .onb-reveal .onb-phone{width:118px;height:220px;border-radius:22px}.pay .onb-reveal .onb-scale{transform:scale(.303)}.pay h1{font-size:28px;margin-bottom:14px}.pay-plans{margin:14px 0}
.onb.done{height:auto;max-height:min(640px,100dvh)}.onb.done[open]{display:block}
.onb.done{height:fit-content}
/* Details: photo, colour and a growing list of links */
.onb-photo{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.onb-avatar{width:64px;height:64px;flex:none;border-radius:50%;background:#e5e5ea center/cover no-repeat;box-shadow:inset 0 0 0 1px #0000000d}
.onb-photo-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;color:var(--brand);font-weight:600;font-size:16px;cursor:pointer;box-shadow:0 1px 2px #0000000d}
.onb-photo-remove{min-height:44px;border:0;background:none;color:var(--muted);font-family:inherit;font-size:15px;cursor:pointer}.onb-photo-remove[hidden]{display:none}
.onb-colours{display:flex;flex-wrap:wrap;gap:12px;padding:4px 2px}
.onb-swatch{width:36px;height:36px;border:0;border-radius:50%;background:var(--sw);cursor:pointer;box-shadow:inset 0 0 0 1px #0000001a;transition:transform .35s var(--spring)}
.onb-swatch-original{background:conic-gradient(#f2c14e,#e0457b,#7c4dff,#1f9d6b,#f2c14e)}
.onb-swatch[aria-checked="true"]{box-shadow:0 0 0 3px var(--fill),0 0 0 5px var(--brand)}
.onb-swatch:active{transform:scale(.9)}
.onb-link{position:relative}
.onb-remove{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:var(--fill);color:var(--muted);font-size:18px;line-height:1;cursor:pointer}.onb-remove[hidden]{display:none}
.onb-add{margin:10px 0 0;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--brand);font-family:inherit;font-weight:600;font-size:16px;cursor:pointer}.onb-add[hidden]{display:none}