/* ──────────────────────────────────────────────────────────
   Bynli Onboarding — Mobile-first stylesheet
   Prefix: on-   (plus a few global resets)
   Base: 360px.  min-width breakpoints at 600px and 900px.
   ────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:#12100e;
    --green:#1d8a4e; --green-hi:#25b866;
    --gold:#d4933a; --gold-hi:#f0b252;
    --text:#f5ede0; --dim:rgba(245,237,224,0.42);
    --dimmer:rgba(245,237,224,0.2);
    --border:rgba(245,237,224,0.09);
    --mist:rgba(245,237,224,0.05);
}

html, body {
    min-height:100%;
    background:var(--bg);
    color:var(--text);
    font-family:'DM Sans',sans-serif;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
}

/* ── Backdrop layers ─────────────────────────────────── */
.on-bg {
    position:fixed; inset:0; z-index:0;
    background:
        radial-gradient(ellipse 65% 50% at 50% -5%,  rgba(212,147,58,.16) 0%, transparent 55%),
        radial-gradient(ellipse 50% 45% at 5%   95%, rgba(29,138,78,.16)  0%, transparent 55%),
        radial-gradient(ellipse 35% 35% at 95%  95%, rgba(212,147,58,.08) 0%, transparent 55%),
        var(--bg);
}
.on-aurora {
    position:fixed; inset:-10%; z-index:0; pointer-events:none;
    background:
        radial-gradient(ellipse 40% 30% at 20% 20%, rgba(212,147,58,.09), transparent 60%),
        radial-gradient(ellipse 35% 28% at 80% 70%, rgba(29,138,78,.09), transparent 60%);
    filter:blur(40px);
    animation:on-drift 18s ease-in-out infinite alternate;
}
@keyframes on-drift {
    0%   { transform:translate(0, 0) scale(1); }
    100% { transform:translate(-4%, 3%) scale(1.1); }
}
.on-noise {
    position:fixed; inset:0; z-index:0; opacity:.045; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size:200px 200px;
}

/* ── Topbar ──────────────────────────────────────────── */
.on-topbar {
    position:fixed; top:0; left:0; right:0; z-index:10;
    display:flex; align-items:center; justify-content:space-between;
    padding:.875rem 1rem;
    border-bottom:1px solid var(--border);
    background:rgba(18,16,14,.85);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
.on-logo {
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:1.25rem; font-weight:800; letter-spacing:-0.04em;
    color:var(--text); display:flex; align-items:center; gap:.4rem;
}
.on-logo-dot { color:var(--gold); }
.on-topbar-link {
    font-size:.8125rem; color:var(--dim); text-decoration:none;
    padding:.5rem .25rem; min-height:44px; display:inline-flex; align-items:center;
    transition:color .2s;
}
.on-topbar-link:hover { color:var(--text); }

@media (min-width: 600px) {
    .on-topbar { padding:1.125rem 2rem; }
    .on-logo { font-size:1.375rem; gap:.5rem; }
}

/* ── Page frame ──────────────────────────────────────── */
.on-page {
    position:relative; z-index:1;
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding:5rem 1rem 2.5rem;
}
@media (min-width: 600px) {
    .on-page { padding:6.5rem 1.5rem 3.5rem; justify-content:center; }
}

/* ── Card ────────────────────────────────────────────── */
.on-card { width:100%; max-width:480px; animation:on-up .5s .05s ease both; }
.on-card-head { margin-bottom:1.5rem; }
.on-card-head h1 {
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:clamp(1.65rem, 6vw, 2.1rem);
    font-weight:800; letter-spacing:-0.035em;
    color:var(--text); margin-bottom:.35rem;
    line-height:1.15;
}
.on-card-head p { font-size:.875rem; color:var(--dim); font-weight:300; line-height:1.5; }
@media (min-width: 600px) { .on-card-head { margin-bottom:2rem; } }

.on-user-badge {
    display:inline-flex; align-items:center; gap:.45rem;
    background:rgba(29,138,78,.08); border:1px solid rgba(37,184,102,.2);
    border-radius:100px; padding:.35rem .8rem;
    font-size:.78rem; color:var(--green-hi); margin-top:.75rem;
    max-width:100%;
}
.on-user-badge strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Notices / errors ────────────────────────────────── */
.on-notice, .on-error-box {
    border-radius:10px; padding:.825rem 1rem;
    font-size:.8125rem; margin-bottom:1.25rem;
    display:flex; gap:.6rem; align-items:flex-start; line-height:1.5;
}
.on-notice { background:rgba(234,179,8,.06); border:1px solid rgba(234,179,8,.2); color:#fde68a; }
.on-error-box { background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); color:#fca5a5; }
.on-error-box a { color:#fca5a5; font-weight:600; }
.on-notice svg, .on-error-box svg { flex-shrink:0; margin-top:1px; }

/* ── Tabs (join / create) ────────────────────────────── */
.on-tabs {
    position:relative;
    display:flex; gap:.3rem;
    background:var(--mist); border:1px solid var(--border);
    border-radius:11px; padding:.25rem;
    margin-bottom:1.5rem;
}
.on-tab {
    position:relative; z-index:1;
    flex:1; padding:.75rem .5rem; min-height:44px;
    background:transparent; border:none; border-radius:8px;
    font-family:'DM Sans',sans-serif;
    font-size:.875rem; font-weight:500; color:var(--dim);
    cursor:pointer; transition:color .25s ease;
}
.on-tab:hover { color:var(--text); }
.on-tab.active { color:var(--gold-hi); }
.on-tab-indicator {
    position:absolute; z-index:0;
    top:.25rem; bottom:.25rem; left:.25rem;
    width:calc(50% - .3rem);
    background:rgba(212,147,58,.18);
    border:1px solid rgba(212,147,58,.22);
    border-radius:8px;
    transition:transform .32s cubic-bezier(.5,1.25,.55,1);
    pointer-events:none;
    box-shadow:0 2px 10px -4px rgba(212,147,58,.35);
}
.on-tabs[data-active="create"] .on-tab-indicator { transform:translateX(calc(100% + .3rem)); }

.on-pane { display:none; animation:on-fade .35s ease both; }
.on-pane.active { display:block; }

@keyframes on-fade {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Invite code input ───────────────────────────────── */
.on-code-wrap { margin-bottom:1.25rem; position:relative; }
.on-code-wrap label {
    display:block; font-size:.68rem; font-weight:500;
    text-transform:uppercase; letter-spacing:.13em;
    color:var(--dim); margin-bottom:.45rem;
}
.on-code-input {
    width:100%;
    background:var(--mist); border:1px solid var(--border);
    border-radius:12px;
    padding:.95rem .75rem;
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:clamp(1.1rem, 5.5vw, 1.5rem);
    font-weight:700; letter-spacing:.18em;
    text-transform:uppercase; text-align:center;
    color:var(--text); outline:none;
    transition:border-color .25s, background .25s, box-shadow .25s;
}
.on-code-input::placeholder {
    color:rgba(245,237,224,.15); font-weight:400;
    letter-spacing:.08em; font-size:clamp(1rem, 4.5vw, 1.25rem);
}
.on-code-input:focus {
    border-color:rgba(212,147,58,.6);
    background:rgba(245,237,224,.06);
    box-shadow:0 0 0 4px rgba(212,147,58,.12);
}
.on-code-input.is-valid {
    border-color:rgba(37,184,102,.6);
    background:rgba(29,138,78,.06);
    box-shadow:0 0 0 4px rgba(37,184,102,.12);
}
@media (min-width: 600px) {
    .on-code-input { padding:1rem 1.25rem; letter-spacing:.22em; }
}

/* ── Section separator ───────────────────────────────── */
.on-section-sep {
    font-size:.68rem; text-transform:uppercase; letter-spacing:.13em;
    color:rgba(245,237,224,.22);
    border-bottom:1px solid var(--border);
    padding-bottom:.5rem; margin-bottom:1rem;
}

/* ── Fields ──────────────────────────────────────────── */
.on-field { margin-bottom:1rem; }
.on-field label {
    display:block; font-size:.68rem; font-weight:500;
    text-transform:uppercase; letter-spacing:.13em;
    color:var(--dim); margin-bottom:.45rem;
}
.on-field input, .on-field-ta {
    width:100%;
    background:var(--mist); border:1px solid var(--border);
    border-radius:10px; padding:.9rem 1rem;
    font-family:'DM Sans',sans-serif;
    font-size:1rem; /* 16px min — prevents iOS zoom */
    color:var(--text); outline:none;
    transition:border-color .25s, background .25s, box-shadow .25s;
}
.on-field input::placeholder, .on-field-ta::placeholder { color:rgba(245,237,224,.18); }
.on-field input:focus, .on-field-ta:focus {
    border-color:rgba(212,147,58,.55);
    background:rgba(245,237,224,.06);
    box-shadow:0 0 0 4px rgba(212,147,58,.1);
}
.on-field-pw { position:relative; }
.on-pw-toggle {
    position:absolute; right:.6rem; bottom:.55rem;
    min-width:36px; height:36px;
    display:inline-flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid transparent; border-radius:8px;
    color:var(--dim); cursor:pointer; font-size:1rem;
    transition:color .2s, background .2s, border-color .2s;
}
.on-pw-toggle:hover { color:var(--text); background:rgba(245,237,224,.06); border-color:var(--border); }
.on-field input:-webkit-autofill {
    -webkit-text-fill-color:var(--text);
    -webkit-box-shadow:0 0 0 1000px #161310 inset;
}
.on-field-ta { resize:vertical; min-height:90px; line-height:1.55; font-family:'DM Sans',sans-serif; }

.on-field-row { display:grid; grid-template-columns:1fr; gap:.75rem; }
@media (min-width: 600px) { .on-field-row { grid-template-columns:1fr 1fr; } }

/* ── Honeypot ────────────────────────────────────────── */
.on-hp { display:none !important; }

/* ── Buttons ─────────────────────────────────────────── */
.on-btn {
    width:100%; padding:.95rem 1.25rem; min-height:48px;
    background:linear-gradient(180deg, var(--green-hi), var(--green));
    border:none; border-radius:12px;
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:1rem; font-weight:700; letter-spacing:-.01em;
    color:#fff; cursor:pointer; margin-top:.75rem;
    transition:transform .15s, box-shadow .25s, filter .25s;
    display:flex; align-items:center; justify-content:center; gap:.55rem;
    text-align:center; text-decoration:none;
    position:relative; overflow:hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,.14) inset,
        0 -1px 0 rgba(0,0,0,.22) inset,
        0 10px 22px -10px rgba(29,138,78,.55),
        0 2px 6px -2px rgba(0,0,0,.35);
}
.on-btn::after {
    content:'→';
    display:inline-block;
    transition:transform .25s cubic-bezier(.4,1.4,.6,1);
    opacity:.85;
}
.on-btn::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
    transform:translateX(-120%);
    transition:transform .6s ease;
    pointer-events:none;
}
.on-btn:hover { filter:brightness(1.07); box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 -1px 0 rgba(0,0,0,.25) inset,
    0 14px 30px -10px rgba(29,138,78,.65),
    0 2px 6px -2px rgba(0,0,0,.4); }
.on-btn:hover::after { transform:translateX(4px); }
.on-btn:hover::before { transform:translateX(120%); }
.on-btn:active { transform:translateY(1px) scale(.995); }
.on-btn:focus-visible { outline:none; box-shadow:
    0 0 0 3px rgba(37,184,102,.4),
    0 10px 22px -10px rgba(29,138,78,.55); }

.on-btn.on-btn-gold {
    background:linear-gradient(180deg, var(--gold-hi), var(--gold));
    box-shadow:
        0 1px 0 rgba(255,255,255,.18) inset,
        0 -1px 0 rgba(0,0,0,.22) inset,
        0 10px 22px -10px rgba(212,147,58,.55),
        0 2px 6px -2px rgba(0,0,0,.35);
}
.on-btn.on-btn-ghost {
    background:rgba(245,237,224,.06);
    border:1px solid var(--border); color:var(--dim);
    box-shadow:none;
}
.on-btn.on-btn-ghost::after { display:none; }
.on-btn.on-btn-ghost::before { display:none; }
.on-btn.on-btn-ghost:hover { background:rgba(245,237,224,.1); color:var(--text); filter:none; box-shadow:none; }

.on-btn.is-loading { pointer-events:none; color:transparent; }
.on-btn.is-loading::after { display:none; }
.on-btn.is-loading .on-spinner { display:block; }
.on-spinner {
    display:none; position:absolute; inset:0;
    margin:auto; width:20px; height:20px;
    border:2px solid rgba(255,255,255,.3);
    border-top-color:#fff; border-radius:50%;
    animation:on-spin .7s linear infinite;
}

/* ── Group preview (group flow) ──────────────────────── */
.on-group-preview {
    width:100%; max-width:480px;
    background:rgba(245,237,224,.03); border:1px solid var(--border);
    border-radius:14px; padding:1rem;
    margin-bottom:1.25rem;
    display:flex; gap:.875rem; align-items:center;
    animation:on-up .4s ease both;
}
.on-group-preview-logo {
    width:52px; height:52px; border-radius:12px; flex-shrink:0;
    background:var(--green);
    display:flex; align-items:center; justify-content:center;
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:1.25rem; font-weight:800; color:#fff;
    overflow:hidden;
}
.on-group-preview-logo img { width:100%; height:100%; object-fit:cover; }
.on-group-preview-body { min-width:0; flex:1; }
.on-group-preview-name {
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:1.0625rem; font-weight:800; letter-spacing:-.03em;
    color:var(--text); margin-bottom:.15rem;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.on-group-preview-tag { font-size:.8125rem; color:var(--dim); line-height:1.4; }
.on-group-preview-free {
    display:inline-block; margin-top:.35rem;
    font-size:.75rem; font-weight:600; color:var(--green-hi);
}

/* ── Footer link row ─────────────────────────────────── */
.on-page-foot { text-align:center; margin-top:1.5rem; font-size:.8125rem; color:var(--dim); }
.on-page-foot a { color:var(--gold-hi); text-decoration:none; font-weight:500; }
.on-page-foot a:hover { text-decoration:underline; }

/* ── Welcome screen ──────────────────────────────────── */
.on-welcome-wrap { width:100%; max-width:560px; animation:on-up .5s ease both; }
.on-welcome-hero { text-align:center; margin-bottom:1.75rem; }
.on-welcome-check {
    width:64px; height:64px; border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(37,184,102,.25), rgba(29,138,78,.1));
    border:1px solid rgba(37,184,102,.35);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 1rem; font-size:1.75rem; color:var(--green-hi);
    position:relative;
    animation:on-check-in .6s cubic-bezier(.4,1.6,.55,1) both;
    box-shadow:0 0 0 0 rgba(37,184,102,.4);
}
.on-welcome-check::before {
    content:''; position:absolute; inset:-8px;
    border-radius:50%;
    border:1px solid rgba(37,184,102,.18);
    animation:on-ring 3s ease-out infinite;
}
@keyframes on-check-in {
    0%   { transform:scale(.4) rotate(-20deg); opacity:0; }
    60%  { transform:scale(1.08) rotate(4deg); opacity:1; }
    100% { transform:scale(1) rotate(0); opacity:1; }
}
@keyframes on-ring {
    0%   { transform:scale(.85); opacity:.7; }
    100% { transform:scale(1.5); opacity:0; }
}
.on-welcome-hero h1 {
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:clamp(1.6rem, 6.5vw, 2rem);
    font-weight:900; letter-spacing:-.04em;
    color:var(--text); margin-bottom:.4rem; line-height:1.15;
}
.on-welcome-hero p { font-size:.9rem; color:var(--dim); line-height:1.6; }
.on-welcome-hero strong.on-txt { color:var(--text); }

/* ── Plan badge ──────────────────────────────────────── */
.on-plan-badge {
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(29,138,78,.07); border:1px solid rgba(37,184,102,.18);
    border-radius:13px; padding:.875rem 1rem;
    margin-bottom:1.5rem; gap:.75rem;
    flex-wrap:wrap;
}
.on-plan-badge-left { display:flex; align-items:center; gap:.75rem; min-width:0; flex:1 1 200px; }
.on-plan-badge-dot {
    width:9px; height:9px; border-radius:50%;
    background:var(--green-hi);
    flex-shrink:0; position:relative;
}
.on-plan-badge-dot::before {
    content:''; position:absolute; inset:-6px;
    border-radius:50%;
    background:rgba(37,184,102,.55);
    animation:on-pulse 2.2s ease-in-out infinite;
}
@keyframes on-pulse {
    0%   { transform:scale(.4); opacity:.9; }
    80%  { transform:scale(1.8); opacity:0; }
    100% { transform:scale(1.8); opacity:0; }
}
.on-plan-badge-info { min-width:0; }
.on-plan-badge-name {
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:.9375rem; font-weight:800; letter-spacing:-.02em;
    color:var(--text);
}
.on-plan-badge-sub { font-size:.72rem; color:var(--green-hi); margin-top:1px; line-height:1.4; }
.on-plan-badge-upgrade {
    font-size:.72rem; font-weight:700; color:var(--gold-hi);
    text-decoration:none; border:1px solid rgba(212,147,58,.25);
    border-radius:100px; padding:.4rem .85rem;
    transition:all .18s; white-space:nowrap;
    min-height:32px; display:inline-flex; align-items:center;
}
.on-plan-badge-upgrade:hover { background:rgba(212,147,58,.1); }

/* ── Feature grid ────────────────────────────────────── */
.on-features-label {
    font-size:.65rem; text-transform:uppercase; letter-spacing:.16em;
    font-weight:700; color:var(--dim); margin-bottom:.875rem;
}
.on-features-grid { display:grid; grid-template-columns:1fr; gap:.625rem; margin-bottom:1rem; }
@media (min-width: 480px) { .on-features-grid { grid-template-columns:1fr 1fr; gap:.75rem; } }

.on-feat-card {
    background:rgba(245,237,224,.03); border:1px solid var(--border);
    border-radius:13px; padding:.875rem 1rem;
    display:flex; flex-direction:column; gap:.4rem;
    transition:transform .25s, border-color .25s, background .25s, box-shadow .25s;
    animation:on-up .5s ease both;
    position:relative; overflow:hidden;
}
.on-feat-card:nth-child(1)  { animation-delay:.00s; }
.on-feat-card:nth-child(2)  { animation-delay:.05s; }
.on-feat-card:nth-child(3)  { animation-delay:.10s; }
.on-feat-card:nth-child(4)  { animation-delay:.15s; }
.on-feat-card:nth-child(5)  { animation-delay:.20s; }
.on-feat-card:nth-child(6)  { animation-delay:.25s; }
.on-feat-card:nth-child(7)  { animation-delay:.30s; }
.on-feat-card:nth-child(8)  { animation-delay:.35s; }
.on-feat-card:nth-child(9)  { animation-delay:.40s; }
.on-feat-card:nth-child(10) { animation-delay:.45s; }
.on-feat-card::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 30% 0%, rgba(212,147,58,.1), transparent 60%);
    opacity:0; transition:opacity .3s; pointer-events:none;
}
.on-feat-card:hover {
    border-color:rgba(245,237,224,.18);
    background:rgba(245,237,224,.05);
    transform:translateY(-2px);
    box-shadow:0 8px 20px -12px rgba(0,0,0,.4);
}
.on-feat-card:hover::before { opacity:1; }
.on-feat-card:active { transform:translateY(0); }
.on-feat-card.on-locked { opacity:.5; }
.on-feat-card.on-locked:hover { transform:none; box-shadow:none; }
.on-feat-card.on-locked .on-feat-icon { filter:grayscale(1); }
.on-feat-icon { font-size:1.125rem; }
.on-feat-name { font-size:.8125rem; font-weight:700; color:var(--text); line-height:1.3; }
.on-feat-desc { font-size:.72rem; color:var(--dim); line-height:1.45; }
.on-feat-lock, .on-feat-free {
    font-size:.62rem; font-weight:700;
    border-radius:100px; padding:1px 7px;
    display:inline-block; margin-top:2px; align-self:flex-start;
}
.on-feat-lock { color:var(--gold-hi); background:rgba(212,147,58,.08); border:1px solid rgba(212,147,58,.18); }
.on-feat-free { color:var(--green-hi); background:rgba(29,138,78,.08); border:1px solid rgba(29,138,78,.18); }

/* ── Upgrade strip ───────────────────────────────────── */
.on-upgrade-strip {
    background:linear-gradient(135deg, rgba(212,147,58,.1), rgba(240,178,82,.04));
    border:1px solid rgba(212,147,58,.22); border-radius:14px;
    padding:1rem; margin:1.25rem 0 1.5rem;
    display:flex; align-items:center; gap:.75rem;
}
.on-upgrade-strip-icon { font-size:1.375rem; flex-shrink:0; }
.on-upgrade-strip-text { flex:1; min-width:0; }
.on-upgrade-strip-text strong { display:block; font-size:.875rem; font-weight:700; color:#f0b252; margin-bottom:2px; }
.on-upgrade-strip-text span { font-size:.78rem; color:rgba(240,178,82,.75); line-height:1.5; }

/* ── Invite card ─────────────────────────────────────── */
.on-invite-card {
    background:rgba(245,237,224,.03); border:1px solid var(--border);
    border-radius:13px; padding:1rem;
    margin-bottom:1.25rem;
    display:flex; align-items:center; justify-content:space-between;
    gap:.75rem; flex-wrap:wrap;
}
.on-invite-card-left { min-width:0; flex:1 1 180px; }
.on-invite-card-label {
    font-size:.62rem; text-transform:uppercase; letter-spacing:.14em;
    font-weight:700; color:var(--dim); margin-bottom:.375rem;
}
.on-invite-code-display {
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:clamp(1.05rem, 4.8vw, 1.375rem);
    font-weight:800; letter-spacing:.15em;
    background:linear-gradient(100deg, var(--text) 20%, var(--gold-hi) 50%, var(--text) 80%);
    background-size:200% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    word-break:break-all;
    animation:on-shine 7s ease-in-out infinite;
}
@keyframes on-shine {
    0%, 100% { background-position:200% 0; }
    50%      { background-position:-100% 0; }
}
.on-invite-copy-btn {
    background:rgba(245,237,224,.07); border:1px solid var(--border);
    border-radius:8px; padding:.55rem .875rem; min-height:38px;
    font-family:'DM Sans',sans-serif;
    font-size:.75rem; font-weight:600; color:var(--dim);
    cursor:pointer;
    transition:background .2s, color .2s, border-color .2s, transform .15s;
    white-space:nowrap; flex-shrink:0;
    display:inline-flex; align-items:center; gap:.35rem;
}
.on-invite-copy-btn:hover { background:rgba(245,237,224,.12); color:var(--text); }
.on-invite-copy-btn:active { transform:scale(.96); }
.on-invite-copy-btn.is-copied {
    background:rgba(29,138,78,.15); color:var(--green-hi);
    border-color:rgba(37,184,102,.35);
}

.on-btn-row { display:flex; flex-direction:column; gap:.625rem; }

/* ── Setup flow ──────────────────────────────────────── */
.on-setup-wrap { width:100%; max-width:540px; animation:on-up .5s .05s ease both; }

.on-steps {
    display:flex; align-items:center; gap:.5rem;
    margin:0 auto 1.25rem;
    max-width:220px;
}
.on-step-pip {
    flex:1; height:4px; border-radius:100px;
    background:rgba(245,237,224,.1);
    position:relative; overflow:hidden;
}
.on-step-pip.is-done::before,
.on-step-pip.is-active::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, var(--gold), var(--gold-hi));
    border-radius:inherit;
    animation:on-fill .6s ease both;
}
.on-step-pip.is-active::before {
    background:linear-gradient(90deg, var(--gold), var(--gold-hi));
}
@keyframes on-fill {
    from { transform:translateX(-100%); }
    to   { transform:translateX(0); }
}
.on-setup-hero { text-align:center; margin-bottom:1.75rem; }
.on-setup-step {
    font-size:.65rem; text-transform:uppercase; letter-spacing:.16em;
    font-weight:700; color:var(--gold-hi); margin-bottom:.5rem;
}
.on-setup-hero h1 {
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:clamp(1.55rem, 6.2vw, 2rem);
    font-weight:900; letter-spacing:-.04em;
    color:var(--text); margin-bottom:.4rem; line-height:1.18;
}
.on-setup-hero p { font-size:.88rem; color:var(--dim); line-height:1.6; }

.on-type-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:.5rem; margin-bottom:1.25rem; }
@media (min-width: 500px) { .on-type-grid { grid-template-columns:repeat(3, 1fr); gap:.625rem; } }

.on-type-radio { position:absolute; opacity:0; pointer-events:none; }
.on-type-label {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
    padding:.9rem .5rem; min-height:88px;
    border-radius:12px; border:2px solid var(--border);
    cursor:pointer;
    transition:transform .25s, border-color .25s, background .25s, box-shadow .25s;
    text-align:center;
    background:var(--mist);
}
.on-type-label:hover { border-color:rgba(245,237,224,.18); transform:translateY(-1px); }
.on-type-radio:checked + .on-type-label {
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 8px 20px -10px rgba(212,147,58,.45);
}
.on-type-label i { font-size:1.25rem; transition:color .18s; }
.on-type-label span { font-size:.78rem; font-weight:600; color:var(--dim); line-height:1.2; }
.on-type-radio:checked + .on-type-label { border-color:rgba(212,147,58,.55); background:rgba(212,147,58,.08); }
.on-type-radio:checked + .on-type-label i,
.on-type-radio:checked + .on-type-label span { color:var(--gold-hi); }
.on-type-radio:focus-visible + .on-type-label { outline:2px solid var(--gold-hi); outline-offset:2px; }

/* Per-type icon tint (checked state overrides to gold) */
.on-type-label .i-general   { color:#64748b; }
.on-type-label .i-dance     { color:#a78bfa; }
.on-type-label .i-church    { color:#f0b252; }
.on-type-label .i-club      { color:#38bdf8; }
.on-type-label .i-sports    { color:#4ade80; }
.on-type-label .i-nonprofit { color:#fb923c; }

.on-setup-section { margin-bottom:1.5rem; }
.on-setup-section-title {
    font-size:.65rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.14em;
    color:rgba(245,237,224,.3);
    border-bottom:1px solid var(--border);
    padding-bottom:.4rem; margin-bottom:.875rem;
}
.on-field-2col { display:grid; grid-template-columns:1fr; gap:.75rem; }
@media (min-width: 600px) { .on-field-2col { grid-template-columns:1fr 1fr; } }

.on-gb-toggle-row {
    display:flex; align-items:center; gap:.875rem;
    padding:.875rem 1rem;
    background:var(--mist); border:1px solid var(--border);
    border-radius:10px; margin-bottom:.875rem;
    flex-wrap:wrap;
}
.on-gb-toggle-info { flex:1; min-width:180px; }
.on-gb-toggle-info strong { display:block; font-size:.88rem; font-weight:600; margin-bottom:2px; }
.on-gb-toggle-info span { font-size:.78rem; color:var(--dim); line-height:1.4; }

.on-toggle-sw { position:relative; width:44px; height:24px; flex-shrink:0; }
.on-toggle-sw input { opacity:0; width:0; height:0; }
.on-toggle-track {
    position:absolute; inset:0;
    background:rgba(245,237,224,.1); border-radius:24px;
    cursor:pointer; transition:.2s;
}
.on-toggle-track::before {
    content:''; position:absolute;
    width:18px; height:18px; left:3px; top:3px;
    background:#fff; border-radius:50%; transition:.2s;
}
.on-toggle-sw input:checked + .on-toggle-track { background:var(--green); }
.on-toggle-sw input:checked + .on-toggle-track::before { transform:translateX(20px); }
.on-toggle-sw input:disabled + .on-toggle-track { opacity:.5; cursor:not-allowed; }

.on-skip-link {
    display:block; text-align:center;
    margin-top:1rem; padding:.6rem;
    font-size:.82rem; color:var(--dim); text-decoration:none;
    transition:color .15s;
}
.on-skip-link:hover { color:var(--text); }

/* ── Animation ───────────────────────────────────────── */
@keyframes on-up {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes on-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .on-card, .on-welcome-wrap, .on-setup-wrap, .on-group-preview { animation:none; }
}