:root {
    --ob-bg: light-dark(#f8fafc, #0F1419);
    --ob-text: light-dark(#1e293b, #E2E8F0);
    --ob-text-muted: light-dark(#64748b, #94A3B8);
    --ob-text-dim: light-dark(#94a3b8, #8B99AD);
    --ob-card-bg: light-dark(#ffffff, #1A2029);
    --ob-card-border: light-dark(#e2e8f0, #2A3341);
    --ob-input-bg: light-dark(#f1f5f9, #111720);
    --ob-link: light-dark(#2563eb, #60A5FA);
    --ob-link-hover: light-dark(#1d4ed8, #93C5FD);
    --ob-cite: light-dark(#94a3b8, #64748B);
    --ob-accent-blue: #3B82F6;
    --ob-accent-green: #34D399;
    --ob-accent-green-dark: #10B981;
    --ob-glow-blue: light-dark(rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.25));
    --ob-glow-green: light-dark(rgba(52, 211, 153, 0.08), rgba(52, 211, 153, 0.15));
    --ob-go-text: #022C22;
    --ob-go-hover-from: light-dark(#34D399, #6EE7B7);
    --ob-go-hover-to: light-dark(#10B981, #34D399);
    --ob-error: light-dark(#dc2626, #F87171);
    --ob-num-gradient-from: #3B82F6;
    --ob-num-gradient-to: #6366F1;
    --ob-check-border: light-dark(#d1d5db, #3A4351);
    --ob-dot: light-dark(rgba(0, 0, 0, 0.13), rgba(100, 140, 200, 0.12));
}

/* ---- Base ---- */

html { font-size: 100%; }

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

body {
    background:
        radial-gradient(ellipse at 50% 0%, light-dark(rgba(255,255,255,0.4), rgba(30,50,70,0.4)) 0%, transparent 60%),
        radial-gradient(var(--ob-dot) 1.5px, transparent 1.5px) 0.75em 0.75em / 1.5em 1.5em,
        var(--ob-bg);
    color: var(--ob-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--step-0);
    line-height: 1.5;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ---- Site header ---- */

.site-header {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 0.75rem;
    padding-block: 0.75rem 0;
}

.site-logo {
    display: block;
    font-size: var(--step-3);
    font-weight: 300;
    letter-spacing: 0.2em;
    line-height: 1;
    color: var(--ob-text);
    text-decoration: none;
}

.site-logo:hover {
    color: var(--ob-accent-blue);
}

/* ---- Main content ---- */

main {
    max-width: 65ch;
    margin-inline: auto;
    padding-inline: var(--space-xs-s);
}

.site-welcome {
    text-align: center;
    font-size: var(--step-2);
    font-weight: 600;
    color: var(--ob-text);
    margin-block: 0 var(--space-3xs);
}

.ob-instruction {
    text-align: center;
    font-size: var(--step--1);
    color: var(--ob-text-muted);
    margin-block-end: var(--space-s);
}

/* ---- Onboarding column ---- */

.onboarding {
    padding-block-end: var(--space-xl);
}

/* ---- Sign-in toggle ---- */

.signin-link {
    background: none;
    border: none;
    color: var(--ob-link);
    font: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.signin-link:hover {
    color: var(--ob-link-hover);
    text-decoration: underline;
}

/* ---- Sign-in panel ---- */

.signin-panel {
    padding-block-end: var(--space-l);
}

.returning-btns {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-block-start: var(--space-xs);
    padding-block-end: var(--space-xs);
}

.returning-btns .btn {
    text-align: center;
}

/* ---- Card animation ---- */

@keyframes card-enter {
    from { opacity: 0; transform: translateY(var(--space-s)); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Card base ---- */

.ob-card {
    background: var(--ob-card-bg);
    border: 1px solid var(--ob-card-border);
    border-radius: var(--space-xs);
    margin-block-end: var(--space-xs);
    transition: border-color 0.3s, box-shadow 0.3s, opacity 0.3s;
    animation: card-enter 0.4s ease-out both;
}

.ob-card[data-tos="1"] { animation-delay: 0.05s; }
.ob-card[data-tos="2"] { animation-delay: 0.12s; }
.ob-card[data-tos="3"] { animation-delay: 0.19s; }
.ob-card[data-tos="4"] { animation-delay: 0.26s; }
.ob-card[data-tos="5"] { animation-delay: 0.33s; }
.ob-card[data-tos="6"] { animation-delay: 0.40s; }

/* ---- Card head ---- */

.card-head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs-s);
    cursor: default;
}

label.card-head {
    cursor: pointer;
}

.num {
    width: 1.875em;
    height: 1.875em;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ob-num-gradient-from), var(--ob-num-gradient-to));
    color: white;
    font-size: var(--step--1);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.head-text {
    flex: 1;
    min-width: 0;
}

.card-title {
    font-size: var(--step-0);
    font-weight: 500;
    color: var(--ob-text);
    transition: color 0.3s;
}

/* ---- Bigcheck (checkbox visual) ---- */

.bigcheck {
    width: 2.375em;
    height: 2.375em;
    border-radius: var(--space-2xs);
    border: 2px solid var(--ob-check-border);
    background: var(--ob-input-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}

.bigcheck svg {
    width: 1.125em;
    height: 1.125em;
    opacity: 0;
    transition: opacity 0.2s;
}

.ob-card[data-tos] .bigcheck {
    border-color: var(--ob-card-border);
    background: transparent;
    cursor: pointer;
}

.ob-card[data-tos] .bigcheck:hover {
    border-color: var(--ob-accent-green);
}

/* ---- Card body (grid collapse) ---- */

.ob-card .card-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.35s ease;
}

.ob-card .card-body-inner {
    overflow: hidden;
    padding: 0 var(--space-xs-s);
}

/* ---- Card states ---- */

.ob-card.active {
    border-color: var(--ob-accent-blue);
    box-shadow: 0 0 var(--space-s) var(--ob-glow-blue);
}

.ob-card.done {
    border-color: var(--ob-accent-green);
    box-shadow: 0 0 var(--space-s) var(--ob-glow-green);
}

.ob-card.done .card-title {
    color: var(--ob-text-dim);
}

/* ---- TOS description ---- */

.tos-desc {
    font-size: var(--step--1);
    color: var(--ob-text-muted);
    line-height: 1.6;
}

.tos-desc a {
    color: var(--ob-link);
    text-decoration: underline;
}

.tos-desc a:hover { color: var(--ob-link-hover); }

.wallet-desc { padding-block-end: var(--space-xs); }
.wallet-action { margin-block-start: var(--space-xs); }

.tos-cite {
    font-style: italic;
    color: var(--ob-cite);
    margin-block-start: var(--space-3xs);
}

/* ---- Agree row / buttons ---- */

.agree-row {
    display: flex;
    justify-content: flex-end;
    padding-block: var(--space-xs);
}

.btn {
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--space-2xs);
    font-size: var(--step--1);
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    min-height: var(--space-m);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    background: transparent;
    border: 1px solid var(--ob-card-border);
    color: var(--ob-text-muted);
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-agree { color: var(--ob-text-muted); border-color: var(--ob-card-border); }
.btn-agree:hover { color: var(--ob-accent-green); border-color: var(--ob-accent-green); }

.btn-primary { color: var(--ob-text-muted); border-color: var(--ob-card-border); }
.btn-primary:hover { color: var(--ob-accent-blue); border-color: var(--ob-accent-blue); }

.btn-secondary { color: var(--ob-text-muted); border-color: var(--ob-card-border); }
.btn-secondary:hover { color: var(--ob-text); border-color: var(--ob-text-muted); }

/* ---- Promo code input ---- */

.ob-promo-input {
    flex: 1;
    min-width: 0;
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid var(--ob-card-border);
    border-radius: var(--space-2xs);
    font-size: var(--step--1);
    background: var(--ob-input-bg);
    color: var(--ob-text);
    font-family: inherit;
}

.ob-promo-input::placeholder {
    color: var(--ob-text-muted);
}

/* ---- CSS-only accordion for TOS cards ---- */

.tos-check { display: none; }

/* TOS cards: default locked */
.ob-card[data-tos] {
    pointer-events: none;
}
.ob-card[data-tos] .card-head {
    opacity: 0.35;
}

/* TOS card bodies: default collapsed */
.ob-card[data-tos] .card-body {
    grid-template-rows: 0fr;
}

/* TOS checked visual: green checkbox */
.tos-check:checked + .ob-card .bigcheck {
    background: linear-gradient(135deg, var(--ob-accent-green), var(--ob-accent-green-dark));
    border-color: transparent;
}
.tos-check:checked + .ob-card .bigcheck svg { opacity: 1; }

/* TOS done state */
.tos-check:checked + .ob-card {
    border-color: var(--ob-accent-green);
    box-shadow: 0 0 var(--space-s) var(--ob-glow-green);
    pointer-events: auto;
}
.tos-check:checked + .ob-card .card-head { opacity: 1; }
.tos-check:checked + .ob-card .card-title { color: var(--ob-text-dim); }

/* --- Progressive unlock --- */

.ob-card[data-tos="1"] { pointer-events: auto; }
.ob-card[data-tos="1"] .card-head { opacity: 1; }

#tos1:checked ~ .ob-card[data-tos="2"] { pointer-events: auto; }
#tos1:checked ~ .ob-card[data-tos="2"] .card-head { opacity: 1; }

#tos2:checked ~ .ob-card[data-tos="3"] { pointer-events: auto; }
#tos2:checked ~ .ob-card[data-tos="3"] .card-head { opacity: 1; }

#tos3:checked ~ .ob-card[data-tos="4"] { pointer-events: auto; }
#tos3:checked ~ .ob-card[data-tos="4"] .card-head { opacity: 1; }

#tos4:checked ~ .ob-card[data-tos="5"] { pointer-events: auto; }
#tos4:checked ~ .ob-card[data-tos="5"] .card-head { opacity: 1; }

#tos5:checked ~ .ob-card[data-tos="6"] { pointer-events: auto; }
#tos5:checked ~ .ob-card[data-tos="6"] .card-head { opacity: 1; }

/* --- Active state (expanded, blue border) --- */

#tos1:not(:checked) + .ob-card[data-tos="1"] {
    border-color: var(--ob-accent-blue);
    box-shadow: 0 0 var(--space-s) var(--ob-glow-blue);
}
#tos1:not(:checked) + .ob-card[data-tos="1"] .card-body {
    grid-template-rows: 1fr;
}

#tos1:checked ~ #tos2:not(:checked) + .ob-card[data-tos="2"] {
    border-color: var(--ob-accent-blue);
    box-shadow: 0 0 var(--space-s) var(--ob-glow-blue);
}
#tos1:checked ~ #tos2:not(:checked) + .ob-card[data-tos="2"] .card-body {
    grid-template-rows: 1fr;
}

#tos2:checked ~ #tos3:not(:checked) + .ob-card[data-tos="3"] {
    border-color: var(--ob-accent-blue);
    box-shadow: 0 0 var(--space-s) var(--ob-glow-blue);
}
#tos2:checked ~ #tos3:not(:checked) + .ob-card[data-tos="3"] .card-body {
    grid-template-rows: 1fr;
}

#tos3:checked ~ #tos4:not(:checked) + .ob-card[data-tos="4"] {
    border-color: var(--ob-accent-blue);
    box-shadow: 0 0 var(--space-s) var(--ob-glow-blue);
}
#tos3:checked ~ #tos4:not(:checked) + .ob-card[data-tos="4"] .card-body {
    grid-template-rows: 1fr;
}

#tos4:checked ~ #tos5:not(:checked) + .ob-card[data-tos="5"] {
    border-color: var(--ob-accent-blue);
    box-shadow: 0 0 var(--space-s) var(--ob-glow-blue);
}
#tos4:checked ~ #tos5:not(:checked) + .ob-card[data-tos="5"] .card-body {
    grid-template-rows: 1fr;
}

#tos5:checked ~ #tos6:not(:checked) + .ob-card[data-tos="6"] {
    border-color: var(--ob-accent-blue);
    box-shadow: 0 0 var(--space-s) var(--ob-glow-blue);
}
#tos5:checked ~ #tos6:not(:checked) + .ob-card[data-tos="6"] .card-body {
    grid-template-rows: 1fr;
}

/* Card 7: unlock when tos6 checked */
#tos6:checked ~ .ob-card[data-tos="7"] { pointer-events: auto; }
#tos6:checked ~ .ob-card[data-tos="7"] .card-head { opacity: 1; }

#tos6:checked ~ #tos7:not(:checked) + .ob-card[data-tos="7"] {
    border-color: var(--ob-accent-blue);
    box-shadow: 0 0 var(--space-s) var(--ob-glow-blue);
}
#tos6:checked ~ #tos7:not(:checked) + .ob-card[data-tos="7"] .card-body {
    grid-template-rows: 1fr;
}

/* ---- Get Started button ---- */

.go-btn {
    display: block;
    width: 100%;
    margin-block-start: var(--space-s);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--space-2xs);
    font-size: var(--step-0);
    font-weight: 600;
    font-family: inherit;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--ob-accent-green), var(--ob-accent-green-dark));
    color: var(--ob-go-text);
    transition: background 0.3s;
}

.go-btn:hover {
    background: linear-gradient(135deg, var(--ob-go-hover-from), var(--ob-go-hover-to));
}

.go-btn:active {
    transform: scale(0.98);
}

/* ---- Error ---- */

.error-text {
    color: var(--ob-error);
    font-size: var(--step--1);
    margin-block-start: var(--space-2xs);
    text-align: center;
}

.error-box {
    margin-block-start: var(--space-xs);
    text-align: center;
}

.error-box .btn {
    margin-block-start: var(--space-2xs);
}

/* ---- Wallet options ---- */

.wallet-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-block: var(--space-xs);
}

.wallet-option-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs);
    border: 1px solid var(--ob-card-border);
    border-radius: var(--space-2xs);
    background: var(--ob-input-bg);
    color: var(--ob-text);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}

.wallet-option-btn:hover:not(:disabled) {
    border-color: var(--ob-accent-blue);
    background: var(--ob-card-bg);
}

.wallet-option-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.wallet-option-icon {
    font-size: var(--step-1);
    flex-shrink: 0;
    width: 2em;
    text-align: center;
}

.wallet-option-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wallet-option-label {
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--ob-text);
}

.wallet-option-desc {
    font-size: var(--step--2);
    color: var(--ob-text-muted);
}

.wallet-option-tag {
    font-size: var(--step--2);
    font-weight: 400;
    color: var(--ob-text-dim);
    margin-inline-start: var(--space-3xs);
}

/* ---- Wallet tab toggle ---- */

.wallet-tabs {
    display: flex;
    gap: var(--space-3xs);
    margin-block-end: var(--space-s);
    border-radius: 8px;
    background: var(--ob-card-bg);
    padding: var(--space-3xs);
}

.wallet-tab {
    flex: 1;
    padding: var(--space-3xs) var(--space-xs);
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ob-text-muted);
    font-size: var(--step--1);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wallet-tab:hover {
    color: var(--ob-text);
}

.wallet-tab.active {
    background: var(--ob-accent-blue);
    color: #fff;
}