/* ──────────────────────────────────────────────────────────
   Bynli Onboarding — au-* front-door language (Entry bucket, #1661)
   Prefix: on-   (class names preserved so onboarding.php is unchanged)
   Rebuilt to match the login/forgot/reset auth pages: violet primary,
   calm single bloom, 16px inputs, au- inputs/buttons/cards, focus rings,
   safe-area insets. Success states stay green.
   Base: 360px. min-width breakpoints at 500/600/900px.
   ────────────────────────────────────────────────────────── */

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

/* [hidden] must win — .on-error-box sets display:flex */
[hidden] { display: none !important; }

:root {
    --bg:#0B0A0F;
    --ground:#0B0A0F;
    --surface:#15131C;
    --card:#1B1824;
    --card-2:#221E2E;

    --text:#F6F4FA;
    --dim:rgba(246,244,250,.62);
    --dimmer:rgba(246,244,250,.40);

    --border:rgba(246,244,250,.09);
    --border-2:rgba(246,244,250,.06);
    --border-h:rgba(246,244,250,.20);
    --mist:#15131C;

    --accent:#7C3AED; --accent-hi:#6D28D9; --accent-deep:#4C1D95;
    --accent-soft:rgba(124,58,237,.16);
    /* legacy gold* aliases → violet brand */
    --gold:#7C3AED; --gold-hi:#A78BFA;

    --green:#25B866; --green-hi:#25B866;

    --r-sm:8px; --r-md:12px; --r-lg:18px;
    --focus:0 0 0 3px rgba(124,58,237,.25);

    --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif;
    --font-sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,Roboto,sans-serif;
}

html, body {
    min-height:100%;
    background:var(--ground);
    color:var(--text);
    font-family:var(--font-sans);
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
}

/* ── Backdrop — calm single violet bloom (au- parity) ─── */
.on-bg {
    position:fixed; inset:0; z-index:0;
    background:
        radial-gradient(1100px 560px at 25% -10%, rgba(124,58,237,.12), transparent 60%),
        var(--ground);
}
/* Aurora + noise retired for the unified calm look; markup kept, hidden. */
.on-aurora, .on-noise { display:none; }

/* ── Topbar ──────────────────────────────────────────── */
.on-topbar {
    position:fixed; top:0; left:0; right:0; z-index:10;
    display:flex; align-items:center; justify-content:space-between;
    padding:calc(.75rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .75rem max(1rem, env(safe-area-inset-left));
    border-bottom:1px solid var(--border);
    background:rgba(11,10,15,.72);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
.on-logo {
    display:flex; align-items:center; gap:.55rem;
    font-size:1.25rem; font-weight:700; letter-spacing:-.02em;
    color:var(--text);
}
.on-logo-glyph {
    width:32px; height:32px; border-radius:10px;
    background:linear-gradient(140deg, var(--accent), var(--accent-deep));
    display:grid; place-items:center; color:#fff; font-size:16px;
    box-shadow:0 6px 16px -5px rgba(124,58,237,.7);
    flex-shrink:0;
}
.on-logo-dot { color:var(--accent); }
.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); }
.on-topbar-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

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

/* ── Page frame ──────────────────────────────────────── */
.on-page {
    position:relative; z-index:1;
    min-height:100vh; min-height:100dvh;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding:
        calc(5rem + env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        calc(2.5rem + env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
}
@media (min-width: 600px) {
    .on-page { padding-top:6.5rem; padding-bottom:3.5rem; justify-content:center; }
}

/* ── Card ────────────────────────────────────────────── */
.on-card { width:100%; max-width:440px; animation:on-up .5s .05s ease both; }
.on-card-head { margin-bottom:1.5rem; text-align:center; }
.on-card-head h1 {
    font-size:clamp(1.5rem, 5.5vw, 1.9rem);
    font-weight:700; letter-spacing:-.02em;
    color:var(--text); margin-bottom:.4rem; line-height:1.15;
}
.on-card-head p { font-size:.875rem; color:var(--dim); line-height:1.5; }
@media (min-width: 600px) { .on-card-head { margin-bottom:1.75rem; } }

.on-user-badge {
    display:inline-flex; align-items:center; gap:.45rem;
    background:rgba(37,184,102,.12); border:1px solid rgba(37,184,102,.28);
    border-radius:100px; padding:.35rem .8rem;
    font-size:.8rem; color:#86EFAC; 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:12px; padding:.825rem 1rem;
    font-size:.875rem; margin-bottom:1.25rem;
    display:flex; gap:.6rem; align-items:flex-start; line-height:1.5;
}
.on-notice { background:rgba(217,147,58,.12); border:1px solid rgba(217,147,58,.3); color:#F5D08A; }
.on-error-box { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); 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(--surface); border:1px solid var(--border);
    border-radius:12px; 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:9px;
    font-family:var(--font-sans);
    font-size:.9rem; font-weight:600; color:var(--dim);
    cursor:pointer; transition:color .25s ease;
}
.on-tab:hover { color:var(--text); }
.on-tab.active { color:#fff; }
.on-tab:focus-visible { outline:none; box-shadow:var(--focus); }
.on-tab-indicator {
    position:absolute; z-index:0;
    top:.25rem; bottom:.25rem; left:.25rem;
    width:calc(50% - .3rem);
    background:var(--accent-soft);
    border:1px solid rgba(124,58,237,.4);
    border-radius:9px;
    transition:transform .32s cubic-bezier(.5,1.25,.55,1);
    pointer-events:none;
    box-shadow:0 2px 10px -4px rgba(124,58,237,.4);
}
.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:.75rem; font-weight:600;
    color:var(--dim); margin-bottom:.45rem;
}
.on-code-input {
    width:100%;
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px;
    padding:.95rem .75rem;
    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 .2s, box-shadow .2s;
}
.on-code-input::placeholder { color:var(--dimmer); font-weight:400; letter-spacing:.08em; font-size:clamp(1rem, 4.5vw, 1.25rem); }
.on-code-input:focus { border-color:var(--accent); box-shadow:var(--focus); }
.on-code-input.is-valid { border-color:var(--green); box-shadow:0 0 0 3px rgba(37,184,102,.2); }
@media (min-width: 600px) { .on-code-input { padding:1rem 1.25rem; letter-spacing:.22em; } }

/* ── Section separator ───────────────────────────────── */
.on-section-sep {
    font-size:.75rem; font-weight:600;
    color:var(--dim);
    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:.75rem; font-weight:600;
    color:var(--dim); margin-bottom:.4rem;
}
.on-field input, .on-field-ta {
    width:100%;
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:.9rem 1rem;
    font-family:var(--font-sans);
    font-size:1rem; /* 16px — prevents iOS zoom */
    color:var(--text); outline:none;
    transition:border-color .2s, box-shadow .2s;
}
.on-field input::placeholder, .on-field-ta::placeholder { color:var(--dimmer); }
.on-field input:focus, .on-field-ta:focus { border-color:var(--accent); box-shadow:var(--focus); }
.on-field-pw { position:relative; }
.on-field-pw input { padding-right:3rem; }
.on-pw-toggle {
    position:absolute; right:.5rem; bottom:.4rem;
    width:44px; height:44px;
    display:inline-flex; align-items:center; justify-content:center;
    background:transparent; border:0; border-radius:8px;
    color:var(--dimmer); cursor:pointer; font-size:1rem;
    transition:color .2s;
}
.on-pw-toggle:hover { color:var(--dim); }
.on-pw-toggle:focus-visible { outline:none; box-shadow:var(--focus); }
.on-field input:-webkit-autofill {
    -webkit-text-fill-color:var(--text);
    -webkit-box-shadow:0 0 0 1000px var(--surface) inset;
    caret-color:var(--text);
}
.on-field-ta { resize:vertical; min-height:90px; line-height:1.55; }

.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 — au- violet primary ────────────────────── */
.on-btn {
    width:100%; padding:.95rem 1.25rem; min-height:48px;
    background:var(--accent);
    border:none; border-radius:14px;
    font-size:1rem; font-weight:640; letter-spacing:-.01em;
    color:#fff; cursor:pointer; margin-top:.75rem;
    display:flex; align-items:center; justify-content:center; gap:.55rem;
    text-align:center; text-decoration:none;
    position:relative; overflow:hidden;
    box-shadow:0 12px 26px -10px rgba(124,58,237,.6);
    transition:background .2s, transform .15s, opacity .2s;
}
.on-btn:hover { background:var(--accent-hi); }
.on-btn:active { transform:scale(.98); }
.on-btn:focus-visible { outline:none; box-shadow:var(--focus); }

.on-btn.on-btn-gold { background:var(--accent); }
.on-btn.on-btn-gold:hover { background:var(--accent-hi); }
.on-btn.on-btn-ghost {
    background:transparent;
    border:1px solid var(--border); color:var(--text);
    box-shadow:none;
}
.on-btn.on-btn-ghost:hover { border-color:var(--border-h); background:transparent; }

.on-btn.is-loading { pointer-events:none; color:transparent; }
.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:440px;
    background:var(--card); border:1px solid var(--border-2);
    border-radius:18px; 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:15px; flex-shrink:0;
    background:linear-gradient(135deg, var(--accent), var(--accent-deep));
    display:flex; align-items:center; justify-content:center;
    font-size:1.25rem; font-weight:700; 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-size:1.0625rem; font-weight:700; letter-spacing:-.02em;
    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:#86EFAC; }

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

/* ── 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(37,184,102,.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:#86EFAC;
    position:relative;
    animation:on-check-in .6s cubic-bezier(.4,1.6,.55,1) both;
}
.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-size:clamp(1.6rem, 6.5vw, 2rem);
    font-weight:700; letter-spacing:-.02em;
    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:var(--card); border:1px solid var(--border-2);
    border-radius:14px; 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); 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%,100% { transform:scale(1.8); opacity:0; } }
.on-plan-badge-info { min-width:0; }
.on-plan-badge-name { font-size:.9375rem; font-weight:700; letter-spacing:-.01em; color:var(--text); }
.on-plan-badge-sub { font-size:.75rem; color:var(--dim); margin-top:1px; line-height:1.4; }
.on-plan-badge-upgrade {
    font-size:.75rem; font-weight:700; color:var(--gold-hi);
    text-decoration:none; border:1px solid rgba(124,58,237,.35);
    border-radius:100px; padding:.4rem .85rem;
    transition:background .18s; white-space:nowrap;
    min-height:44px; display:inline-flex; align-items:center;
}
.on-plan-badge-upgrade:hover { background:var(--accent-soft); }

/* ── Feature grid ────────────────────────────────────── */
.on-features-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; 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:var(--card); border:1px solid var(--border-2);
    border-radius:14px; padding:.875rem 1rem;
    display:flex; flex-direction:column; gap:.4rem;
    transition:transform .25s, border-color .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:hover { border-color:var(--border-h); transform:translateY(-2px); box-shadow:0 8px 20px -12px rgba(0,0,0,.5); }
.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:.85rem; font-weight:700; color:var(--text); line-height:1.3; }
.on-feat-desc { font-size:.75rem; color:var(--dim); line-height:1.45; }
.on-feat-lock, .on-feat-free { font-size:.65rem; 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:var(--accent-soft); border:1px solid rgba(124,58,237,.28); }
.on-feat-free { color:#86EFAC; background:rgba(37,184,102,.12); border:1px solid rgba(37,184,102,.28); }

/* ── Upgrade strip ───────────────────────────────────── */
.on-upgrade-strip {
    background:var(--accent-soft);
    border:1px solid rgba(124,58,237,.28); 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:.9rem; font-weight:700; color:#fff; margin-bottom:2px; }
.on-upgrade-strip-text span { font-size:.8rem; color:var(--dim); line-height:1.5; }

/* ── Invite card ─────────────────────────────────────── */
.on-invite-card {
    background:var(--card); border:1px solid var(--border-2);
    border-radius:14px; 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:.65rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:var(--dim); margin-bottom:.375rem; }
.on-invite-code-display {
    font-size:clamp(1.05rem, 4.8vw, 1.375rem);
    font-weight:800; letter-spacing:.15em;
    color:var(--text); word-break:break-all;
}
.on-invite-copy-btn {
    background:var(--surface); border:1px solid var(--border);
    border-radius:10px; padding:.55rem .875rem; min-height:44px;
    font-family:var(--font-sans);
    font-size:.8rem; font-weight:600; color:var(--dim);
    cursor:pointer; transition: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 { color:var(--text); border-color:var(--border-h); }
.on-invite-copy-btn:active { transform:scale(.96); }
.on-invite-copy-btn.is-copied { background:rgba(37,184,102,.15); color:#86EFAC; border-color:rgba(37,184,102,.35); }
.on-invite-copy-btn:focus-visible { outline:none; box-shadow:var(--focus); }

.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:var(--border); 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(--accent-deep), var(--accent));
    border-radius:inherit; animation:on-fill .6s ease both;
}
@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:.7rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:var(--gold-hi); margin-bottom:.5rem; }
.on-setup-hero h1 { font-size:clamp(1.55rem, 6.2vw, 2rem); font-weight:700; letter-spacing:-.02em; 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; text-align:center; background:var(--surface);
    transition:transform .25s, border-color .25s, box-shadow .25s;
}
.on-type-label:hover { border-color:var(--border-h); transform:translateY(-1px); }
.on-type-radio:checked + .on-type-label {
    transform:translateY(-2px) scale(1.02);
    border-color:var(--accent); background:var(--accent-soft);
    box-shadow:0 8px 20px -10px rgba(124,58,237,.45);
}
.on-type-label i { font-size:1.25rem; transition:color .18s; }
.on-type-label span { font-size:.8rem; font-weight:600; color:var(--dim); line-height:1.2; }
.on-type-radio:checked + .on-type-label i, .on-type-radio:checked + .on-type-label span { color:#fff; }
.on-type-radio:focus-visible + .on-type-label { outline:none; box-shadow:var(--focus); }

/* Per-type icon tint (checked state overrides to white) */
.on-type-label .i-general   { color:#94A3B8; }
.on-type-label .i-dance     { color:#A78BFA; }
.on-type-label .i-church    { color:var(--gold-hi); }
.on-type-label .i-club      { color:#38BDF8; }
.on-type-label .i-sports    { color:#4ADE80; }
.on-type-label .i-nonprofit { color:#FB923C; }
.on-type-label .i-civic     { color:#3B82F6; }
.on-type-label .i-education { color:#22D3EE; }
.on-type-label .i-business  { color:#14B8A6; }
.on-type-label .i-media     { color:#EC4899; }

.on-setup-section { margin-bottom:1.5rem; }
.on-setup-section-title { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--dim); 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(--surface); border:1px solid var(--border);
    border-radius:12px; margin-bottom:.875rem; flex-wrap:wrap;
}
.on-gb-toggle-info { flex:1; min-width:180px; }
.on-gb-toggle-info strong { display:block; font-size:.9rem; font-weight:600; margin-bottom:2px; }
.on-gb-toggle-info span { font-size:.8rem; 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:var(--border); 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(--accent); }
.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-toggle-sw input:focus-visible + .on-toggle-track { box-shadow:var(--focus); }

.on-skip-link {
    display:block; text-align:center; margin-top:1rem; padding:.6rem;
    font-size:.85rem; color:var(--dim); text-decoration:none; min-height:44px;
    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, .on-feat-card,
    .on-welcome-check, .on-welcome-check::before, .on-plan-badge-dot::before, .on-step-pip::before {
        animation:none !important;
    }
    * { transition-duration:.001ms !important; }
}