/* ============ Onboarding ============ */

.ob-body{ min-height:100vh; display:flex; flex-direction:column; }

.ob-top{ padding:1.4rem 0; }
.ob-top-inner{ display:flex; align-items:center; gap:1rem; }
.ob-skip{ margin-left:auto; font-size:.9rem; font-weight:600; color:var(--ink-3); }
.ob-skip:hover{ color:var(--ink); }

/* progress */
.ob-progress{ display:flex; gap:.5rem; max-width:520px; margin:.4rem auto 0; padding-inline:1.2rem; width:100%; }
.ob-progress .seg{ flex:1; height:5px; border-radius:3px; background:var(--line); overflow:hidden; }
.ob-progress .seg i{ display:block; height:100%; width:0; background:var(--accent); transition:width .4s ease; }
.ob-progress .seg.done i{ width:100%; }
.ob-progress .seg.active i{ width:100%; }

/* stage */
.ob-stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:2rem 1.2rem 3rem; }
.ob-card{ width:100%; max-width:520px; }

.ob-step{ display:none; animation:obIn .45s ease both; }
.ob-step.show{ display:block; }
@keyframes obIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.ob-eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); font-weight:500; }
.ob-h{ font-size:clamp(1.7rem,4vw,2.3rem); font-weight:800; letter-spacing:-.03em; line-height:1.08; margin-top:.7rem; text-wrap:balance; }
.ob-h .ser{ font-family:var(--font-serif); font-weight:500; font-style:italic; }
.ob-p{ color:var(--ink-2); margin-top:.7rem; font-size:1.05rem; }

/* sign-in */
.signin-wrap{ text-align:center; }
.signin-mark{ width:60px; height:60px; border-radius:18px; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.7rem; margin:0 auto 1.6rem; box-shadow:var(--shadow-accent); }
.google-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:.7rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1rem; font-weight:700; font-size:1rem; color:var(--ink); box-shadow:var(--shadow-sm);
  transition:border-color .15s ease, background .15s ease; margin-top:2rem;
}
.google-btn:hover{ border-color:oklch(0.82 0.02 165); background:var(--surface-2); }
.google-btn:disabled{ opacity:.55; cursor:not-allowed; }
.google-g{ width:20px; height:20px; flex:0 0 auto; }
.signin-fine{ font-size:.82rem; color:var(--ink-3); margin-top:1.2rem; line-height:1.5; }
.signin-fine a{ color:var(--accent-ink); font-weight:600; }
.signin-error{ background:var(--die-soft); color:var(--die); border:1px solid var(--die); border-radius:var(--r); padding:.7rem 1rem; font-size:.9rem; margin-top:1rem; text-align:left; }

/* option cards */
.opt-list{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.8rem; }
.opt{
  display:flex; align-items:center; gap:1rem; text-align:left; width:100%;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-lg);
  padding:1.1rem 1.2rem; transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.opt:hover{ border-color:oklch(0.8 0.04 var(--accent-h)); }
.opt.sel{ border-color:var(--accent); background:var(--accent-tint); }
.opt-badge{
  flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line); font-weight:800; font-size:1.05rem; color:var(--ink);
}
.opt.sel .opt-badge{ background:var(--accent); color:#fff; border-color:transparent; }
.opt-txt{ flex:1; }
.opt-txt .t{ display:block; font-weight:700; font-size:1.05rem; letter-spacing:-.01em; }
.opt-txt .d{ display:block; font-size:.9rem; color:var(--ink-2); margin-top:.15rem; }
.opt-check{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; color:#fff; font-size:.75rem; transition:all .15s ease; }
.opt.sel .opt-check{ background:var(--accent); border-color:var(--accent); }
.opt.sel .opt-check::after{ content:'\2713'; }

/* nav buttons */
.ob-nav{ display:flex; gap:.8rem; align-items:center; margin-top:2rem; }
.ob-back{ background:none; border:none; font-weight:600; color:var(--ink-3); padding:.6rem; font-size:.95rem; }
.ob-back:hover{ color:var(--ink); }
.ob-next{ margin-left:auto; }
.ob-next:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* ready summary */
.ready-wrap{ text-align:center; }
.ready-ico{ width:72px; height:72px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; font-size:2rem; margin:0 auto 1.4rem; }
.ready-summary{ display:flex; flex-direction:column; gap:.6rem; margin:1.8rem 0; text-align:left; }
.ready-row{ display:flex; align-items:center; gap:.8rem; padding:1rem 1.1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
.ready-row .k{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.ready-row .v{ margin-left:auto; font-weight:700; }