/* Onboarding look ("sunrise"): /start (3 questions + plan step), /signup, the post-checkout "You're on ..." page
   and /setup. Everything here is scoped to body.onb, so the rest of the site keeps its light teal style.
   Light theme only. WCAG AA contrast (text on the lightest / darkest background it sits on):
     ink      #2E1065 on #FFF7ED..#FDE68A  12.2-14.4:1      primary  #4C1D95 (white text on it 10.9:1)
     muted    #6B4F3A                       6.0-7.5:1       hover    #3B0F70 (white text 14.1:1)
     kicker   #9A3412                       5.9-7.3:1       tag      #92400E on #FEF3C7 6.4:1
     focus ring #B45309 (non-text, >= 4.0:1 on every background; AA needs 3:1)
   Amber #F59E0B / #FBBF24 is decoration only (progress, check badge, card stripe), never text. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap");
body.onb{
  --o-ink:#2E1065;--o-plum:#4C1D95;--o-plum-d:#3B0F70;--o-lilac:#EDE9FE;--o-lilac2:#DDD6FE;--o-muted:#6B4F3A;--o-kicker:#9A3412;
  --o-amber:#F59E0B;--o-amber-l:#FEF3C7;--o-tag:#92400E;--o-line:#F3D9B8;--o-focus:#B45309;--o-card:#FFFFFF;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--o-ink);min-height:100vh;display:flow-root;margin:0;
  background:
    radial-gradient(900px 520px at 88% -8%,rgba(251,191,36,.30),transparent 62%),
    radial-gradient(760px 520px at -8% 18%,rgba(253,186,116,.28),transparent 60%),
    radial-gradient(700px 480px at 50% 112%,rgba(196,181,253,.30),transparent 62%),
    linear-gradient(180deg,#FFF7ED 0%,#FFEDD5 55%,#FDE68A 130%);
}
html:has(body.onb){background:#FEF0C7}
body.onb a{color:var(--o-plum)}
body.onb :focus-visible{outline:3px solid var(--o-focus);outline-offset:3px}
body.onb .muted{color:var(--o-muted)}
/* header + logo (kept) */
body.onb .top{padding:22px 24px}
body.onb .brand,body.onb .auth-brand{color:var(--o-ink)}
body.onb .top .who{color:var(--o-muted)}
/* layout: roomier */
body.onb main{padding:14px 22px 64px}
body.onb main#main{max-width:620px}
body.onb main.wide{max-width:1080px}
/* progress */
body.onb .progress{gap:8px;margin:14px 0 30px}
body.onb .progress i{height:8px;border-radius:8px;background:rgba(76,29,149,.12)}
body.onb .progress i.on{background:linear-gradient(90deg,var(--o-amber),#FB923C)}
/* headings: bolder, friendlier */
body.onb .kicker{display:inline-block;color:var(--o-kicker);background:rgba(255,255,255,.7);border:1px solid var(--o-line);border-radius:999px;padding:6px 14px;font-size:12.5px;letter-spacing:.08em;margin:0 0 14px}
body.onb h1{font-weight:800;font-size:clamp(30px,6vw,42px);letter-spacing:-.035em;line-height:1.08;color:var(--o-ink);margin:0 0 12px}
body.onb .lead{color:var(--o-muted);font-size:17.5px;line-height:1.55;margin:0 0 28px}
body.onb h2{color:var(--o-ink);font-weight:800}
/* step cards */
body.onb .card{background:var(--o-card);border:1px solid var(--o-line);border-radius:28px;padding:30px 28px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 50px -18px rgba(76,29,149,.28),0 6px 18px rgba(245,158,11,.10);position:relative;overflow:hidden}
body.onb .card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,#FBBF24,#FB923C,#C4B5FD)}
body.onb .q{margin:0 0 26px}
body.onb .q>label,body.onb .q>.lbl,body.onb label.f{font-weight:800;font-size:16px;color:var(--o-ink)}
/* choices */
body.onb .chips{gap:10px}
body.onb .chip{border:2px solid var(--o-line);border-radius:999px;padding:13px 20px;min-height:52px;font-size:15.5px;color:var(--o-ink);background:#FFFBF5}
body.onb .chips.big .chip{border-radius:20px;padding:18px 20px}
body.onb .chip small{color:var(--o-muted);font-size:13.5px;margin-top:4px}
body.onb .chip:hover{border-color:var(--o-plum);background:#fff}
body.onb .chip[aria-checked=true]{background:var(--o-lilac);border-color:var(--o-plum);color:var(--o-plum);box-shadow:0 0 0 3px rgba(76,29,149,.12)}
body.onb .chip[aria-checked=true] small{color:var(--o-plum)}
/* inputs */
body.onb input[type=text],body.onb input[type=email],body.onb input[type=password],body.onb input:not([type]){border:2px solid var(--o-line);border-radius:16px;padding:14px 16px;font-size:16px;background:#FFFBF5;color:var(--o-ink)}
body.onb input:focus{border-color:var(--o-plum);box-shadow:0 0 0 4px rgba(76,29,149,.15);outline:none}
body.onb input:focus-visible{outline:3px solid var(--o-focus);outline-offset:2px}
body.onb input::placeholder{color:#8A6E5A}
/* buttons */
body.onb .actions{margin-top:30px;gap:14px}
body.onb .btn{background:var(--o-plum);color:#fff;border:0;border-radius:999px;min-height:56px;padding:0 32px;font-weight:800;font-size:16.5px;box-shadow:0 10px 24px -10px rgba(76,29,149,.6);transition:background .15s,transform .15s,box-shadow .15s}
body.onb .btn:hover{background:var(--o-plum-d);transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(59,15,112,.7)}
body.onb .btn:focus-visible{outline:3px solid var(--o-focus);outline-offset:3px}
body.onb .btn.big{font-size:18px;min-height:60px;padding:0 36px}
body.onb .btn.ghost{background:#fff;color:var(--o-plum);border:2px solid var(--o-plum);box-shadow:none}
body.onb .btn.ghost:hover{background:var(--o-lilac);color:var(--o-plum-d)}
body.onb .btn-google{background:#fff;color:#1f2937;border:2px solid var(--o-line);box-shadow:none;font-weight:700}
body.onb .btn-google:hover{background:#FFFBF5;border-color:var(--o-plum)}
body.onb .link{color:var(--o-muted);font-weight:600}
body.onb .link:hover{color:var(--o-plum)}
body.onb .err{color:#B91C1C}
/* plan step */
body.onb .setup-ok,body.onb .ok-ico{width:64px;height:64px;border-radius:22px;background:linear-gradient(135deg,#FDE68A,#FDBA74);color:var(--o-ink);font-size:30px;font-weight:800;box-shadow:0 10px 24px -12px rgba(180,83,9,.55);display:flex;align-items:center;justify-content:center;margin:0 0 16px}
body.onb .summary{gap:10px;margin:0 0 32px}
body.onb .summary span{background:#fff;color:var(--o-plum);border:1px solid var(--o-lilac2);padding:8px 14px;font-size:14px;font-weight:700}
body.onb .plansec h2,body.onb .monthly h2{font-size:24px;letter-spacing:-.02em;margin:6px 0 6px}
body.onb .plansec .sub,body.onb .monthly .sub{color:var(--o-muted);font-size:16px;margin:0 0 18px}
body.onb .plans{gap:18px}
body.onb .plan{background:#fff;border:2px solid var(--o-line);border-radius:28px;padding:28px 26px 24px;box-shadow:0 18px 44px -22px rgba(76,29,149,.30)}
body.onb .plan.pick{border-color:var(--o-plum);box-shadow:0 0 0 4px rgba(76,29,149,.14),0 18px 44px -22px rgba(76,29,149,.40)}
body.onb .plan h3{font-size:19px;font-weight:800;color:var(--o-ink)}
body.onb .plan .price{color:var(--o-ink);font-weight:800;margin:12px 0 4px}
body.onb .plan .price small,body.onb .plan .term{color:var(--o-muted)}
body.onb .plan .term b{color:var(--o-ink)}
body.onb .plan ul{color:#3F2A1D;line-height:1.65}
body.onb .plan ul li::marker{color:var(--o-amber)}
body.onb .plan .btn{margin-top:10px}
body.onb .plan.pick .btn.ghost{background:var(--o-plum);color:#fff;border-color:var(--o-plum)}
body.onb .plan.pick .btn.ghost:hover{background:var(--o-plum-d)}
body.onb .plan .tag{color:var(--o-tag);background:var(--o-amber-l)}
body.onb .agree-legal,body.onb .secure{color:var(--o-muted)}
body.onb .later{margin-top:34px}
/* app.css pages: /signup, post-checkout success, /setup */
body.onb .center{margin:7vh auto}
body.onb .auth,body.onb .billing-card{border-radius:28px;padding:34px 32px 30px}
body.onb .auth h1,body.onb .billing-card h1{font-size:clamp(28px,5vw,36px);margin:10px 0 10px}
body.onb .auth-divider{color:var(--o-muted)}
body.onb .auth-divider::before,body.onb .auth-divider::after{background:var(--o-line)}
body.onb .auth .demo{border-top-color:var(--o-line)}
body.onb .langs{margin:8px 0 0}body.onb .langs a{color:var(--o-plum)}
body.onb .sum td{border-bottom-color:var(--o-line)}
body.onb .stack{margin-top:24px}
@media (max-width:520px){
  body.onb .card{padding:24px 20px;border-radius:24px}
  body.onb .auth,body.onb .billing-card{padding:28px 22px 24px}
  body.onb .plan{padding:24px 20px 20px}
  body.onb .actions .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){body.onb .btn{transition:none}body.onb .btn:hover{transform:none}}