:root { --onb-ink:#153445; --onb-teal:#0d6873; --onb-yellow:#f6c84c; --onb-mint:#63d8a1; --onb-coral:#ef7867; }
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; color: var(--onb-ink); background: #f4f9f8; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; letter-spacing: 0; }
.hidden { display: none !important; }
.onboarding-header { min-height: 78px; padding: 8px clamp(18px, 5vw, 70px); display: flex; justify-content: space-between; gap: 20px; align-items: center; background: #fff; border-bottom: 1px solid #d7e6e6; }
.onboarding-wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--onb-ink); text-decoration: none; }
.onboarding-header .onboarding-mascot-mark { width: 57px; height: 63px; object-fit: contain; object-position: center bottom; }
.onboarding-wordmark > span { display: grid; gap: 5px; }
.onboarding-wordmark b { color: #d99c00; font-size: 28px; font-weight: 950; line-height: .9; }
.onboarding-wordmark b strong { color: var(--onb-teal); }
.onboarding-wordmark small { display: flex; align-items: center; gap: 6px; color: #6a7e88; font-size: 10px; font-weight: 820; }
.onboarding-wordmark small img { width: 18px; height: 18px; object-fit: cover; border: 1px solid #d6e3e5; border-radius: 50%; }
.onboarding-header > div { display: flex; align-items: center; gap: 11px; color: #607681; font-size: 13px; }
.onboarding-header > div a { padding: 10px 14px; color: #fff; background: var(--onb-teal); border-radius: 6px; text-decoration: none; font-weight: 850; }
.onboarding-shell { min-height: calc(100dvh - 78px); display: grid; grid-template-columns: minmax(0, .95fr) minmax(520px, 1.05fr); }
.onboarding-story { min-width: 0; position: relative; overflow: hidden; padding: clamp(34px, 5vw, 76px); display: grid; grid-template-rows: auto minmax(300px, 1fr); color: #fff; background: #123d50; }
.onboarding-story-copy { position: relative; z-index: 2; }
.onboarding-eyebrow { margin: 0 0 8px; color: var(--onb-teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.onboarding-story .onboarding-eyebrow { color: #9be9d9; }
.onboarding-story h1 { max-width: 720px; margin: 0; color: var(--onb-yellow); font-size: clamp(44px, 5vw, 72px); line-height: .98; }
.onboarding-story-copy > p:last-of-type { max-width: 650px; margin: 22px 0; color: #d7e8ec; font-size: 18px; line-height: 1.55; }
.onboarding-story ul { max-width: 630px; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; }
.onboarding-story li { padding: 12px; display: grid; gap: 3px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); border-radius: 7px; }
.onboarding-story li b { color: var(--onb-yellow); font-size: 23px; }
.onboarding-story li span { color: #d4e5e9; font-size: 12px; line-height: 1.35; }
.onboarding-narha { min-height: 0; position: relative; align-self: end; display: grid; place-items: end center; }
.onboarding-narha img { width: min(390px, 70%); max-height: 470px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 20px 20px rgba(0,0,0,.25)); }
.onboarding-narha div { width: min(380px, 62%); position: absolute; z-index: 2; top: 35px; left: 0; padding: 16px 18px; color: var(--onb-ink); background: #fff7d1; border: 3px solid var(--onb-yellow); border-radius: 8px; line-height: 1.4; font-weight: 850; }
.onboarding-form-panel { min-width: 0; padding: clamp(30px, 5vw, 70px); background: #f7fbfa; }
.onboarding-progress { max-width: 650px; height: auto; margin: 0 auto 42px; display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 10px; align-items: center; background: transparent; }
.onboarding-progress > span { width: auto; height: auto; display: grid; justify-items: center; gap: 4px; color: #78909a; background: transparent; transition: none; }
.onboarding-progress b { width: 34px; height: 34px; display: grid; place-items: center; background: #e4eeee; border: 2px solid #bfd1d4; border-radius: 50%; }
.onboarding-progress small { font-size: 9px; font-weight: 850; }
.onboarding-progress i { height: 3px; background: #d4e2e3; border-radius: 999px; }
.onboarding-progress span.active { color: var(--onb-teal); }
.onboarding-progress span.active b { color: #fff; background: var(--onb-teal); border-color: var(--onb-teal); }
.onboarding-form-panel form, .signup-success { max-width: 650px; margin: auto; }
.onboarding-step { display: none; }
.onboarding-step.active { display: block; animation: onb-in .24s ease; }
@keyframes onb-in { from { opacity: 0; transform: translateX(12px); } }
.onboarding-step h2, .signup-success h2 { margin: 0; font-size: clamp(34px, 4vw, 50px); line-height: 1.05; }
.onboarding-step > p:not(.onboarding-eyebrow), .signup-success > p:not(.onboarding-eyebrow) { margin: 12px 0 24px; color: #607780; font-size: 16px; line-height: 1.5; }
.onboarding-step > label { margin: 12px 0 6px; display: block; color: #526d78; font-size: 12px; font-weight: 870; }
.onboarding-step > input, .onboarding-password input { width: 100%; min-height: 50px; padding: 11px 13px; color: var(--onb-ink); background: #fff; border: 1px solid #b8ccd1; border-radius: 7px; outline: 0; }
.onboarding-step input:focus { border-color: var(--onb-teal); box-shadow: 0 0 0 4px rgba(13,104,115,.11); }
.onboarding-step fieldset { margin: 20px 0 0; padding: 0; border: 0; }
.onboarding-step legend { margin-bottom: 9px; color: #526d78; font-size: 12px; font-weight: 870; }
.relationship-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.relationship-grid label { min-width: 0; min-height: 74px; padding: 12px; display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #c5d7da; border-radius: 7px; }
.relationship-grid label:has(input:checked) { background: #e6f7f2; border-color: #4bb797; box-shadow: inset 4px 0 #4bb797; }
.relationship-grid input { width: 19px; height: 19px; accent-color: var(--onb-teal); }
.relationship-grid span { min-width: 0; display: grid; gap: 3px; }
.relationship-grid b { font-size: 15px; }
.relationship-grid small { color: #6b818a; font-size: 11px; }
.goal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.goal-grid label { min-height: 86px; padding: 13px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 11px; align-items: center; background: #fff; border: 1px solid #c5d7da; border-radius: 7px; }
.goal-grid label:has(input:checked) { background: #fff7d1; border-color: #dfb431; box-shadow: inset 4px 0 var(--onb-yellow); }
.goal-grid input { position: absolute; opacity: 0; pointer-events: none; }
.goal-grid > label > span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--onb-teal); background: #eaf5f3; border-radius: 50%; font-size: 21px; }
.goal-grid div { display: grid; gap: 3px; }
.goal-grid small { color: #6b818a; font-size: 11px; }
.onboarding-password { position: relative; }
.onboarding-password input { padding-right: 56px; }
.onboarding-password button { width: 46px; height: 46px; position: absolute; top: 2px; right: 2px; padding: 10px; color: #59737e; background: transparent; border: 0; }
.onboarding-password svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.onboarding-password button.is-visible .password-slash { display: none; }
.onboarding-consent { margin-top: 14px !important; display: grid !important; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; align-items: start; color: #5d747e !important; font-size: 11px !important; line-height: 1.45; }
.onboarding-consent input { width: 18px; height: 18px; margin: 0; accent-color: var(--onb-teal); }
.onboarding-consent a { color: var(--onb-teal); font-weight: 850; }
.onboarding-error { min-height: 22px; margin: 14px 0 0; color: #b83e36; font-size: 13px; font-weight: 780; }
.onboarding-actions { margin-top: 14px; display: flex; justify-content: flex-end; gap: 9px; }
.onboarding-primary, .onboarding-secondary { min-height: 49px; padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; text-decoration: none; font-weight: 900; }
.onboarding-primary { color: #fff; background: var(--onb-teal); border: 1px solid #084e58; }
.onboarding-primary:hover { background: #084e58; }
.onboarding-primary:disabled { opacity: .6; cursor: progress; }
.onboarding-secondary { color: var(--onb-ink); background: #fff; border: 1px solid #b9ced3; }
.signup-success { display: grid; justify-items: start; }
.signup-success > img { width: 130px; height: 145px; object-fit: contain; object-position: center bottom; }
.signup-success > a:last-child { margin-top: 15px; color: var(--onb-teal); font-weight: 850; }
@media (max-width: 920px) {
  .onboarding-shell { grid-template-columns: 1fr; }
  .onboarding-story { min-height: 590px; grid-template-rows: auto minmax(250px, 1fr); }
  .onboarding-story-copy { max-width: 730px; }
  .onboarding-narha img { max-height: 350px; }
  .onboarding-narha div { top: 10px; }
}
@media (max-width: 580px) {
  .onboarding-header { align-items: flex-start; }
  .onboarding-header > div { align-items: flex-end; flex-direction: column; }
  .onboarding-header > div span { display: none; }
  .onboarding-header .onboarding-mascot-mark { width: 47px; height: 53px; }
  .onboarding-wordmark b { font-size: 23px; }
  .onboarding-wordmark small { font-size: 9px; }
  .onboarding-story { min-height: 540px; padding: 26px 20px; }
  .onboarding-story h1 { font-size: 42px; }
  .onboarding-story ul { grid-template-columns: 1fr 1fr; }
  .onboarding-narha div { width: 58%; font-size: 12px; }
  .onboarding-form-panel { padding: 32px 18px 50px; }
  .onboarding-progress small { display: none; }
  .relationship-grid, .goal-grid { grid-template-columns: 1fr; }
}