/* A quiet arrival. One reason to join; one action to take. */
.auth-page { min-height:100svh; display:flex; align-items:center; justify-content:center; padding:48px 24px; background:var(--canvas); }
.auth-box { width:100%; max-width:360px; }
.entry-brand { display:flex; justify-content:center; }
.entry-title { font-size:44px; line-height:1.08; letter-spacing:-.055em; font-weight:750; text-align:center; margin:42px -6px 38px; }
.entry-step-title { font-size:36px; }
.auth-box .phone-auth-form { margin-top:0; }
.auth-box .btn { width:100%; }
.auth-box .phone-primary { background:var(--lime); color:var(--accent); min-height:56px; justify-content:center; gap:12px; }
.auth-box .phone-primary:hover:not(:disabled) { background:var(--lime-hover); }
.auth-box .phone-primary:disabled { opacity:.62; }
.auth-box .phone-legacy { color:var(--muted); font-size:12px; font-weight:500; margin-top:15px; }
.auth-box .phone-legacy + .phone-legacy { margin-top:0; }
.auth-box .field input { background:var(--paper); }
.entry-status { font-size:12px; color:var(--muted); text-align:center; margin-top:14px; }
.entry-invitation { margin:-15px 0 25px; text-align:center; font-size:13px; overflow-wrap:anywhere; }
.entry-invitation span { display:block; color:var(--muted); margin-bottom:4px; }
.entry-invitation strong { font-weight:650; }
.auth-box [data-phone-expiry]:empty { display:none; }

/* Three short, user-paced scenes. Nothing starts until the person chooses. */
.intro-page { max-width:700px; min-height:100svh; margin:0 auto; padding:30px 32px; display:flex; flex-direction:column; color:var(--ink); }
.intro-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.intro-skip,.intro-back { min-height:44px; padding:10px 13px; border-radius:14px; font-size:13px; font-weight:600; color:var(--muted); }
.intro-skip:hover,.intro-back:hover { background:var(--lilac-soft); color:var(--ink); }
.intro-content { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px 0; }
.intro-art { width:min(100%,350px); height:258px; position:relative; margin:8px auto 30px; }
.intro-copy { text-align:center; max-width:375px; }
.intro-copy h1 { font-size:36px; line-height:1.1; letter-spacing:-.055em; margin:0 0 16px; outline-offset:6px; }
.intro-copy h1:focus { outline:none; }
.intro-copy p { max-width:300px; margin:auto; color:var(--muted); font-size:16px; line-height:1.6; text-wrap:pretty; }
.intro-footer { width:100%; max-width:380px; margin:0 auto; padding:8px 0 0; }
.intro-progress { display:flex; justify-content:center; gap:0; margin:0 0 18px; }
.intro-dot { width:38px; height:44px; display:grid; place-items:center; border-radius:12px; }
.intro-dot::before { content:''; width:7px; height:7px; background:#c8d0c0; border-radius:9px; transition:width 160ms ease; }
.intro-dot[aria-current=step]::before { width:23px; background:var(--accent); }
.intro-actions { display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.intro-next { min-height:52px; border-radius:17px; flex:1; background:var(--lime); color:var(--accent); justify-content:center; }
.intro-next:hover:not(:disabled) { background:var(--lime-hover); }
.intro-footer .error-text { text-align:center; margin-bottom:14px; }
.intro-plan { position:absolute; width:245px; min-height:158px; border-radius:27px; padding:24px; font-size:19px; font-weight:700; letter-spacing:-.03em; box-shadow:0 12px 22px #194f3c09; }
.intro-plan-back { top:10px; right:4px; transform:rotate(7deg); background:var(--lilac); color:var(--lilac-ink); }
.intro-plan-front { top:84px; left:3px; transform:rotate(-5deg); background:var(--accent); color:var(--lime); }
.intro-plan-mark { display:block; font-size:28px; margin-bottom:7px; }
.intro-people { display:flex; margin-top:19px; }
.intro-people .avatar { width:31px; height:31px; flex-basis:31px; font-size:9px; border-radius:50%; border:2px solid var(--accent); margin-right:-7px; }
.intro-link { display:flex; align-items:center; justify-content:center; gap:8px; width:260px; padding:18px 14px; border-radius:20px; color:var(--accent); background:var(--lime); font-size:14px; font-weight:650; position:absolute; top:25px; left:calc(50% - 130px); transform:rotate(-5deg); }
.intro-bubble { position:absolute; display:flex; align-items:center; gap:10px; font-size:17px; font-weight:650; }
.intro-bubble .avatar { width:39px; height:39px; flex-basis:39px; border-radius:15px; font-size:11px; }
.intro-bubble > span:not(.avatar) { padding:16px 21px; border-radius:23px 23px 23px 6px; background:var(--paper); box-shadow:0 7px 22px #194f3c08; }
.intro-bubble-one { top:110px; left:10px; transform:rotate(-2deg); }
.intro-bubble-two { top:185px; right:3px; transform:rotate(3deg); }
.intro-bubble-two > span:not(.avatar) { background:var(--lilac); border-radius:23px 23px 6px 23px; }
.intro-sidekick { display:grid; grid-template-columns:45px 1fr; column-gap:12px; width:255px; border-radius:24px; position:absolute; padding:17px 20px; box-shadow:0 10px 25px #194f3c09; }
.intro-sidekick > span { grid-row:span 2; display:grid; place-items:center; font-size:26px; font-weight:750; }
.intro-sidekick strong { font-size:17px; letter-spacing:-.025em; }
.intro-sidekick small { font-size:12px; margin-top:3px; }
.intro-goat { top:12px; left:5px; transform:rotate(-6deg); background:var(--lime); color:var(--accent); }
.intro-trip { top:98px; right:0; transform:rotate(5deg); background:var(--lilac); color:var(--lilac-ink); }
.intro-game { top:182px; left:20px; transform:rotate(-3deg); background:var(--accent); color:#f2f6e9; }
@media(max-width:680px) {
  .auth-page { padding:max(38px,env(safe-area-inset-top)) 27px max(34px,env(safe-area-inset-bottom)); }
  .entry-title { font-size:40px; margin:40px -4px 34px; }
  .entry-step-title { font-size:33px; }
  .intro-page { padding:calc(22px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); }
  .intro-copy h1 { font-size:32px; }
  .intro-copy p { font-size:15px; }
  .intro-art { margin-top:15px; margin-bottom:26px; }
}
@media(max-width:360px) {
  .auth-page { padding-left:23px; padding-right:23px; }
  .entry-title { font-size:36px; }
  .intro-page { padding-left:19px; padding-right:19px; }
  .intro-top { gap:6px; }
  .intro-top .brand-symbol { width:34px; height:34px; flex-basis:34px; }
  .intro-top .brand-wordmark { width:121px; height:31px; flex-basis:121px; }
  .intro-copy h1 { font-size:29px; }
  .intro-art { height:249px; }
  .intro-plan { width:230px; padding:21px; }
  .intro-sidekick { width:240px; }
}
@media(max-height:620px) {
  .auth-page { align-items:flex-start; padding-top:30px; padding-bottom:30px; }
  .entry-title { margin-top:26px; margin-bottom:26px; }
  .intro-art { margin-top:15px; margin-bottom:22px; }
  .intro-content { padding-top:8px; }
}
@media(max-height:520px) and (min-width:520px) {
  .intro-page { padding:14px 24px; max-width:760px; }
  .intro-content { flex-direction:row; gap:25px; padding:5px 0; min-height:190px; }
  .intro-art { width:270px; flex:0 0 270px; height:258px; margin:-35px -28px; transform:scale(.7); }
  .intro-copy { max-width:300px; text-align:left; }
  .intro-copy h1 { font-size:27px; margin-bottom:12px; }
  .intro-copy p { font-size:14px; }
  .intro-footer { display:flex; align-items:center; gap:18px; max-width:none; padding:0; }
  .intro-progress { margin:0; flex:1; justify-content:flex-start; }
  .intro-actions { min-width:235px; }
  .intro-next { min-height:44px; }
  .intro-footer .error-text { flex:1; margin:0; font-size:12px; }
}
/* Keep all three scenes and their actions in view on short, narrow phones. */
@media(max-width:380px) and (max-height:720px) {
  .intro-page { padding-top:calc(18px + env(safe-area-inset-top)); padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
  .intro-content { padding:12px 0; }
  .intro-art { margin-top:10px; }
  .intro-progress { margin-bottom:10px; }
}
@media(forced-colors:active) { .intro-dot::before { background:CanvasText; forced-color-adjust:none; } }