/* /start: the "About you" step between the homepage email and the app's sign-up.
   Reuses the tokens, fonts, nav, rails and buttons from site.css. */

.start{background:var(--mist)}
.st-main{min-height:calc(100svh - var(--nav-h));display:flex;justify-content:center;padding:clamp(32px,7vh,72px) 16px 64px}
.st-col{width:min(100%,480px);display:flex;flex-direction:column;align-items:stretch}

/* progress: three segments */
.st-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.st-steps li{display:flex;flex-direction:column;gap:8px}
.st-bar{height:3px;border-radius:3px;background:var(--line-2);position:relative;overflow:hidden}
.st-bar::after{content:'';position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);transition:transform .6s var(--ease)}
.st-steps .done .st-bar::after{transform:none}
.st-steps .now .st-bar::after{transform:scaleX(.5);animation:st-fill .9s var(--ease) both}
@keyframes st-fill{from{transform:scaleX(0)}}
.st-name{font:600 11px/1.3 var(--f-label);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.st-steps .done .st-name,.st-steps .now .st-name{color:var(--label)}

.st-h{font:400 clamp(34px,4.4vw,48px)/1.15 var(--f-display);letter-spacing:-.005em;margin-top:clamp(28px,5vh,44px);text-wrap:balance}
.st-lede{margin-top:12px;color:var(--muted);font-size:16px;line-height:1.65;text-wrap:pretty}

/* steps: one visible at a time, fading in */
.st-view[hidden]{display:none}
.st-view{animation:st-in .45s var(--ease) both}
@keyframes st-in{from{opacity:0;transform:translateY(10px)}}
.st-h:focus{outline:none}

/* card + fields */
.st-card{margin-top:28px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,4vw,28px);display:flex;flex-direction:column;gap:18px;box-shadow:0 1px 0 rgb(var(--lk) / .04),0 12px 32px -18px rgb(var(--lk) / .25)}
.st-field{display:flex;flex-direction:column;gap:7px}
.st-field label{font:500 14px/1.2 var(--f-body);color:var(--ink);display:flex;align-items:baseline;justify-content:space-between}
.st-opt{font:400 13px/1.2 var(--f-body);color:var(--faint)}
.st-field input{height:46px;border:1px solid var(--field);border-radius:8px;background:var(--white);padding:0 14px;font:400 16px/1.2 var(--f-body);color:var(--ink);transition:border-color .2s,box-shadow .2s;width:100%}
.st-field input::placeholder{color:var(--faint)}
.st-field input:hover{border-color:var(--line-hover)}
.st-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgb(var(--lk) / .15)}
.st-field.err input{border-color:var(--alert)}
.st-field input.prefilled{background:var(--mist)}
.st-hint{font-size:13px;line-height:1.45;color:var(--faint)}
.st-msg{font-size:13px;line-height:1.4;color:var(--alert);min-height:0}
.st-msg:empty{display:none}

.st-go{height:48px;width:100%;font-size:15.5px;display:inline-grid;place-items:center;margin-top:2px}
.st-go>span{grid-area:1/1;display:inline-flex;align-items:center;gap:8px;transition:opacity .25s ease,transform .35s var(--ease)}
.st-go .b-ok{opacity:0;transform:translateY(8px);gap:7px}
.st-go .b-ck{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.st-card.going .st-go .b-lab{opacity:0;transform:translateY(-8px)}
.st-card.going .st-go .b-ok{opacity:1;transform:none}
.st-card.going input{color:var(--muted)}
.st-fine{font-size:13px;color:var(--faint);text-align:center}
.st-fine a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.st-legal{font-size:12px;line-height:1.5;margin-top:-10px}
#v-done .st-next{margin-top:28px}

/* volume: one tap */
.st-vol{gap:10px}
.st-opt-btn{height:52px;width:100%;border:1px solid var(--field);border-radius:10px;background:var(--white);font:500 16px/1.2 var(--f-body);color:var(--ink);cursor:pointer;text-align:left;padding:0 18px;display:flex;align-items:center;justify-content:space-between;transition:border-color .2s,background-color .2s,box-shadow .2s}
.st-opt-btn::after{content:'';width:18px;height:18px;border-radius:50%;border:1px solid var(--line-3);flex:none;transition:border-color .2s,box-shadow .2s,background-color .2s}
.st-opt-btn:hover{border-color:var(--line-hover);background:var(--mist)}
.st-opt-btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgb(var(--lk) / .15)}
.st-opt-btn.picked{border-color:var(--accent);background:var(--mist)}
.st-opt-btn.picked::after{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--white)}
.st-skip{margin-top:4px;background:none;border:0;padding:8px 0;font:400 14px/1.3 var(--f-body);color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:center}
.st-skip:hover{color:var(--ink)}
.st-vol.busy{pointer-events:none}

/* done */
.st-tick{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);margin-top:clamp(28px,5vh,44px)}
.st-tick svg{width:22px;height:22px;fill:none;stroke:var(--on-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:st-draw .5s .15s var(--ease) forwards}
@keyframes st-draw{to{stroke-dashoffset:0}}
#v-done .st-h{margin-top:18px}
.st-done{gap:12px}
.st-done .st-go{display:inline-flex}

/* what happens next */
.st-next{margin-top:32px}
.st-next ol{margin-top:12px;display:flex;flex-direction:column;counter-reset:st}
.st-next li{counter-increment:st;display:grid;grid-template-columns:28px 1fr;column-gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.st-next li::before{content:counter(st);grid-row:span 2;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-3);display:grid;place-items:center;font:500 12px/1 var(--f-body);color:var(--slate)}
.st-next b{font:500 15px/1.35 var(--f-body)}
.st-next span{font-size:14px;line-height:1.5;color:var(--muted)}
.st-help{margin-top:22px;font-size:14px;color:var(--muted)}

@media (max-width:560px){
  .st-have{display:none}
  .st-main{padding-top:24px}
}
@media (prefers-reduced-motion:reduce){
  .st-steps .now .st-bar::after{animation:none}
  .st-go>span,.st-bar::after{transition:none}
  .st-view{animation:none}
  .st-tick svg{animation:none;stroke-dashoffset:0}
}
/* Step 2 copy: "Two details" when the homepage email is already filled in, otherwise "Three details" (see start.html). */
.st-c-has{display:none}
.st-has-email .st-c-has{display:inline}
.st-has-email .st-c-no{display:none}