/* Client area styles (onboarding now; a future client portal can reuse these).
   Builds on styles.css: same tokens, fonts, buttons and form fields. */
.client-main{padding:calc(var(--nav) + clamp(40px,7vw,90px)) 0 clamp(70px,9vw,120px)}
.client-wrap{max-width:900px}
.client-title{font-family:var(--display);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(40px,8vw,84px);line-height:.92;letter-spacing:-.005em;margin:0 0 24px}
.client-title--sm{font-size:clamp(34px,6vw,60px)}
.client-intro .lede{max-width:52ch}

/* what happens next */
.next-steps{list-style:none;margin:0 0 clamp(36px,5vw,56px);padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.next-steps li{display:flex;flex-direction:column;gap:10px;padding:22px 22px 6px 0;border-right:1px solid var(--line2)}
.next-steps li + li{padding-left:22px}
.next-steps li:last-child{border-right:0}
.next-steps__n{font-family:var(--display);font-weight:300;font-stretch:70%;font-size:44px;line-height:.9;color:transparent;-webkit-text-stroke:1px rgba(236,230,218,.55)}
.next-steps__t{font:600 13px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;margin:0 0 6px;color:var(--ivory)}
.next-steps p{margin:0;color:#bdb7ab;font-size:15px;line-height:1.5}

/* the card holding the form */
.client-card{background:var(--char2);border:1px solid var(--line2);padding:clamp(22px,4vw,48px)}

/* stepper */
.stepper{margin:0 0 30px}
.stepper__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;margin-bottom:12px}
.stepper__count{margin:0;font:600 12px/1.2 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory)}
.stepper__saved{margin:0;font-size:13px;color:var(--muted)}
.stepper__bar{height:2px;background:var(--line);overflow:hidden}
.stepper__bar span{display:block;height:100%;width:20%;background:var(--ivory);transition:width .35s cubic-bezier(.2,.7,.2,1)}
.stepper__list{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;font:500 11px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#6f6b64}
.stepper__list li.is-done{color:var(--muted)}
.stepper__list li.is-current{color:var(--ivory)}

/* form layout */
.ob-form{display:grid;gap:0}
.req-note{margin:0 0 18px;font-size:13px;color:var(--muted)}
.ob-form.is-stepped .req-note{display:none}
.req{color:#e8a091;font-weight:600;letter-spacing:0}
.ob-step{border:0;margin:0;padding:0;min-width:0;display:grid;gap:22px}
.ob-step + .ob-step{margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}
.ob-form.is-stepped .ob-step{display:none}
.ob-form.is-stepped .ob-step.is-current{display:grid;margin-top:0;padding-top:0;border-top:0}
.ob-legend{padding:0;margin:0 0 20px;display:flex;align-items:baseline;gap:14px;font-family:var(--display);font-weight:700;font-stretch:88%;text-transform:uppercase;font-size:clamp(24px,3vw,32px);line-height:1.1;letter-spacing:.01em;color:var(--ivory);outline:0}
.ob-legend__n{font:600 12px/1 var(--body);letter-spacing:.18em;color:var(--muted)}
.field--half{max-width:calc(50% - 8px)}
.field--sub{margin-top:6px}
.field > span .req{margin-left:2px}

/* chips (checkbox / radio) */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border:1px solid rgba(236,230,218,.28);font:500 15px/1.2 var(--body);color:#cfc9bd;transition:background .15s,color .15s,border-color .15s;user-select:none}
.chip:hover span{border-color:var(--ivory)}
.chip input:checked + span{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.chip input:focus-visible + span{outline:2px solid var(--ivory);outline-offset:3px}
.choice-group > .chips{margin-top:4px}
.choice-group.is-invalid .chip span{border-color:#e08a7a}

/* top 3 */
.top3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.top3__item{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(236,230,218,.28)}
.top3__item b{font:600 12px/1 var(--body);color:var(--muted);width:14px}
.top3__item input{flex:1;min-width:0;background:transparent;color:var(--ivory);border:0;padding:10px 0 12px;font:400 17px/1.4 var(--body);border-radius:0}
.top3__item input:focus{outline:0}
.top3__item:focus-within{border-color:var(--ivory)}
.top3__item.is-invalid{border-color:#e08a7a}

/* big checkboxes */
.check{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;cursor:pointer;font-size:16px;line-height:1.5;color:#cfc9bd;padding:16px;border:1px solid var(--line)}
.check input{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin:1px 0 0;border:1px solid rgba(236,230,218,.5);background:transparent;display:grid;place-content:center;cursor:pointer;border-radius:0}
.check input::after{content:"";width:12px;height:7px;border:2px solid var(--ink);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.check input:checked{background:var(--ivory);border-color:var(--ivory)}
.check input:checked::after{opacity:1}
.check input:focus-visible{outline:2px solid var(--ivory);outline-offset:3px}
.check a{color:var(--ivory)}
.check.is-invalid{border-color:#e08a7a}

/* notes */
.callout{margin:0;padding:16px 18px;border-left:2px solid var(--ivory);background:rgba(236,230,218,.05);color:#cfc9bd;font-size:15px;line-height:1.55}
.callout strong{color:var(--ivory)}
.callout--warn{border-left-color:#e8a091}
.small-note{margin:0;font-size:14px;color:var(--muted)}
.hint{margin-top:-8px;font-size:14px;color:#bdb7ab}
.hint summary{cursor:pointer;color:var(--ivory);font:600 12px/1.6 var(--body);letter-spacing:.14em;text-transform:uppercase;list-style:none}
.hint summary::-webkit-details-marker{display:none}
.hint summary::before{content:"+ "}
.hint[open] summary::before{content:"– "}
.hint ul{margin:10px 0 0;padding-left:18px}
.hint li{margin:0 0 6px}
.hint strong{color:var(--ivory);font-weight:600}

/* nav buttons */
.ob-nav{display:flex;gap:12px;justify-content:flex-end;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.ob-nav [data-back]{margin-right:auto}
.ob-nav [hidden]{display:none}
.ob-form .form__status{margin-top:18px}
.ob-form .form__status:empty{display:none}

/* thank-you */
.ob-done{outline:0}
.ob-done .actions{margin:22px 0 0}

@media (max-width:720px){
  .next-steps{grid-template-columns:1fr}
  .next-steps li,.next-steps li + li{flex-direction:row;align-items:flex-start;gap:16px;padding:18px 0;border-right:0;border-bottom:1px solid var(--line2)}
  .next-steps__n{font-size:34px;min-width:38px}
  .client-card{padding:22px 18px 26px;margin:0 calc(var(--pad) * -1 + 8px)}
  .field--half{max-width:none}
  .top3{grid-template-columns:1fr;gap:8px}
  .stepper__list{display:none}
  .ob-nav .btn{flex:1;padding:0 16px}
  .ob-nav [data-back]{flex:0 0 auto}
  .ob-done .actions .btn{width:100%}
}
@media (max-width:640px){.client .footer{padding-bottom:48px}}
.client [hidden]{display:none!important}


/* ---- onboarding v2 (3 short steps) ---- */
.ob2 .client-main{padding-top:calc(var(--nav) + clamp(28px,5vw,64px))}
.ob2 .client-title{font-size:clamp(40px,8vw,76px);margin-bottom:16px}
.ob2 .client-title .gold{color:#c9a978}
.ob2 .client-intro .lede{margin-bottom:clamp(22px,3vw,34px)}
.ob2 .client-card{position:relative;border-top:1px solid rgba(201,169,120,.55)}
.ob2 .stepper{margin-bottom:24px}
.ob2 .stepper__bar span{background:#c9a978;width:33.4%}
.ob2 .stepper__list{grid-template-columns:repeat(3,1fr)}
.ob2 .ob-step{gap:20px}
.ob2 .ob-legend{margin-bottom:8px;padding-bottom:4px;font-family:var(--display);font-weight:700;font-stretch:85%;text-transform:uppercase;font-size:clamp(22px,3vw,30px);line-height:1.05;letter-spacing:.01em}
.ob2 .ob-legend__n{color:#c9a978}
.ob2 .chips--sub{margin-top:10px}
.ob2 .chips--days{gap:8px}
.ob2 .chips--days .chip span{min-width:52px;justify-content:center;padding:0 10px}
.ob2 .chips--rank .chip{position:relative}
.ob2 .chips--rank .chip[data-rank] span::before{content:attr(data-rank);display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;background:#c9a978;color:var(--ink);font:700 11px/1 var(--body)}
.ob2 .chips--rank .chip[data-rank] span{padding-left:10px}
.ob2 .upload input[type=file]{border:1px dashed rgba(236,230,218,.3);padding:14px 12px;font-size:15px;color:#bdb7ab}
.ob2 .upload input[type=file]::file-selector-button{margin-right:12px;background:var(--ivory);color:var(--ink);border:0;padding:9px 14px;font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.ob2 .upload__msg{font-size:13px;color:var(--muted)}
.ob2 .howto{margin:0;padding:0;list-style:none;counter-reset:h;display:grid;gap:0;border-top:1px solid var(--line2)}
.ob2 .howto li{counter-increment:h;display:grid;grid-template-columns:34px 1fr;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line2);font-size:16px;line-height:1.45;color:#d9d3c7}
.ob2 .howto li::before{content:counter(h,decimal-leading-zero);font:600 12px/1 var(--body);letter-spacing:.12em;color:#c9a978}
.ob2 .howto strong{color:var(--ivory);font-weight:600}
.ob2 .howto__video{justify-self:start}
.ob2 .checks{display:grid;gap:12px;margin-top:4px}
.ob2 .check small{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.ob2 .fineprint{margin:16px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.ob2 .fineprint a{color:#cfc9bd}
.ob2 .ob-nav{margin-top:26px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:720px){
  .ob2 .stepper__list{display:none}
  .ob2 .howto__video{justify-self:stretch;text-align:center}
}