/* Handled sign up + log in (ported from design_src/handled/css/screen-auth.css). No app shell. */
.au{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh;min-height:100dvh;background:var(--ground)}
.au-brand{display:none}
@media (min-width:960px){
  .au{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .au-brand{display:flex;flex-direction:column;gap:32px;position:sticky;top:0;height:100vh;height:100dvh;padding:34px clamp(32px,4.4vw,72px);background:var(--ring-panel);color:var(--ring-ink);overflow:hidden}
}
.au-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--fs-4);letter-spacing:-.02em;color:var(--ring-ink)}
.au-hero{margin:auto 0;display:grid;gap:28px;max-width:460px}
.au-rings img{width:150px;height:150px;display:block}
.au-promise{font-size:clamp(32px,3vw,44px);line-height:1.2;font-weight:700;letter-spacing:-.04em;color:var(--ring-ink)}
.au-promise span{display:block;margin-top:14px;font-size:var(--fs-4);font-weight:400;line-height:1.45;letter-spacing:-.005em;color:var(--ring-ink-2)}
.au-points{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.au-points li{display:flex;align-items:center;gap:12px;font-size:var(--fs-3);color:var(--ring-ink)}
.au-pi{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;color:#000}
.au-pi.a{background:var(--answered)}
.au-pi.h{background:var(--hidden)}
.au-pi.c{background:var(--clear)}
.au-fine{font-size:var(--fs-1);color:var(--ring-ink-2)}

.au-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:56px 24px 40px;min-width:0}
.au-mark{display:none}
@media (max-width:959px){
  .au-side{justify-content:flex-start;padding:36px 16px calc(120px + env(safe-area-inset-bottom,0px))}
  .au-mark{display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:700;font-size:var(--fs-5);letter-spacing:-.02em;margin-bottom:4px}
}
/* short phones (FB in-app browser, 390x700): the logo becomes one small row so "Create account" is in view without
   scrolling (owner 10-07: 7 of 8 ad visitors left on /signup). Spacing only, nothing removed */
@media (max-width:640px){
  .au-side{padding-top:16px;gap:12px}
  .au-mark{flex-direction:row;gap:8px;font-size:var(--fs-4);margin-bottom:0}
  .au-mark img{width:28px;height:28px}
}
.au-card{width:min(440px,100%);background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow-2);padding:32px 32px 28px;display:grid;gap:20px}
@media (max-width:640px){.au-card{padding:20px 18px 20px;gap:16px;box-shadow:var(--shadow-1)}}
.au-head h1{font-size:var(--fs-7);line-height:1.1;letter-spacing:-.03em}
.au-head .sub{color:var(--ink-2);margin-top:6px}
@media (max-width:959px){.au-head h1{font-size:28px}}
.au-flash{margin:0}
.au-form{display:grid;gap:16px}
.au .input{height:48px}
@media (max-width:640px){.au .input{font-size:16px}}
.au-in{position:relative}
.au-in.pw .input{padding-right:52px}
.au-peek{position:absolute;right:2px;top:2px;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2)}
.au-peek:hover{color:var(--ink)}
.au-hint{display:flex;align-items:center;gap:6px}
.au-hint.ok{color:var(--answered-t)}
.au-err{display:flex;gap:6px;align-items:flex-start;color:var(--failed-t);font-size:var(--fs-2);line-height:1.4}
.au-err svg{flex:none;margin-top:2px}
.au-err .link{color:var(--failed-t);text-decoration-color:currentColor}
.au .input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--failed)}
.au-go{width:100%;height:48px;margin-top:6px;font-size:var(--fs-3)}
.au-go.busy{cursor:progress;pointer-events:none}
.au-go .spin{border-color:color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor}
.au-alts{display:grid;gap:8px}
.au-alt{text-align:center;font-size:var(--fs-2);color:var(--ink-2)}
.au-mail{user-select:all;-webkit-user-select:all;font-weight:600;color:var(--ink);white-space:nowrap}
.au-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;font-size:var(--fs-1);color:var(--ink-2)}
.au-foot a{text-decoration:none}
.au-foot a:hover{color:var(--ink);text-decoration:underline}
.au-legal{font-size:inherit;color:inherit}
.au-foot .au-legal:hover{color:var(--ink);text-decoration:underline}
.au-consent{text-align:center;font-size:var(--fs-1);color:var(--ink-2);line-height:1.5}
.au-consent .link{color:var(--ink-2);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-2)}
.au-consent .link:hover{color:var(--ink)}
/* live-port additions */
.au-logo img{width:32px;height:32px}
.au-mark img{width:52px;height:52px}
.au-foot a{color:inherit}
.au-flash{margin:0}
/* round C S6: the invite link page (site_v2/invite.html) */
.iv-ws{display:flex;align-items:center;justify-content:space-between;gap:12px}
.iv-role{flex:none}
.iv-can{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.iv-can li{display:flex;align-items:center;gap:10px;font-size:var(--fs-2);color:var(--ink)}
.iv-can .au-pi{width:26px;height:26px}
.iv-em{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.iv-note{color:var(--ink-2);font-size:var(--fs-2)}
a.au-go{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* "(optional)" after a field label */
.au-f label .opt{font-weight:400;color:var(--ink-3)}

/* Continue with Facebook / Google (v2.26.0, templates/_social_buttons.html). Each provider's button keeps its brand rules:
   Facebook's blue #1877F2 with the white "f"; Google's sign-in colours (light: white, #747775 line, #1F1F1F; dark: #131314,
   #8E918F line, #E3E3E3), the four-colour G and Roboto Medium. Both share the Handled pill and height, the mark pinned left
   and the words centred, so the pair reads as one set above the email form. */
.sso{display:grid;gap:10px}
.sso-b{position:relative;display:flex;align-items:center;justify-content:center;height:50px;padding:0 54px;border-radius:999px;
  font-size:var(--fs-3);font-weight:600;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;
  transition:background .15s var(--ease),box-shadow .15s var(--ease),transform .2s var(--ease)}
.sso-b svg{position:absolute;left:15px;top:50%;width:24px;height:24px;transform:translateY(-50%)}
.sso-b:active{transform:scale(.985)}
.sso-b:focus-visible{outline-offset:3px;border-radius:999px}
.sso-fb{background:#1877F2;color:#fff;box-shadow:0 1px 2px rgba(10,66,150,.24),0 10px 22px -12px rgba(24,119,242,.7)}
.sso-fb:hover{background:#166FE5}
.sso-g{background:#FFFFFF;color:#1F1F1F;box-shadow:inset 0 0 0 1px #747775;font-family:"Roboto",var(--font);font-weight:500;letter-spacing:.01em}
.sso-g:hover{background:#F5F6F6}
.sso-g svg{width:20px;height:20px;left:17px}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sso-g{background:#131314;color:#E3E3E3;box-shadow:inset 0 0 0 1px #8E918F}
  :root:not([data-theme="light"]) .sso-g:hover{background:#1E1F20}
  :root:not([data-theme="light"]) .sso-fb{box-shadow:0 1px 2px rgba(0,0,0,.4)}
}
:root[data-theme="dark"] .sso-g{background:#131314;color:#E3E3E3;box-shadow:inset 0 0 0 1px #8E918F}
:root[data-theme="dark"] .sso-g:hover{background:#1E1F20}
:root[data-theme="dark"] .sso-fb{box-shadow:0 1px 2px rgba(0,0,0,.4)}
.sso-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:var(--fs-2);line-height:1.4;color:var(--ink-2);text-align:center}
.sso-note svg{flex:none;color:var(--answered-t)}
.sso-or{display:flex;align-items:center;gap:12px;font-size:var(--fs-2);color:var(--ink-2)}
.sso-or::before,.sso-or::after{content:"";flex:1;height:1px;background:var(--line)}
/* the Instagram / Facebook app's own browser: one quiet row under the Facebook button, never a second call to action */
.sso-iab{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;padding:9px 9px 9px 12px;border-radius:var(--r-m);background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line)}
.sso-iab p{display:flex;gap:7px;align-items:flex-start;font-size:var(--fs-1);line-height:1.4;color:var(--ink-2)}
.sso-iab p svg{flex:none;margin-top:1px}
.sso-iab-b{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;background:var(--card);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2);font-size:var(--fs-2);font-weight:600;text-decoration:none;white-space:nowrap}
.sso-iab-b:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.sso-iab-b.copied{background:var(--answered-s);color:var(--answered-t);box-shadow:none}
.sso-iab .sso-iab-done{grid-column:1/-1;color:var(--answered-t)}
@media (max-width:640px){.sso-b{height:48px}}

/* "What email should we use for your account?" (site_v2/social_email.html) */
.se-who{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-m);background:var(--card-2);font-size:var(--fs-2);color:var(--ink-2)}
.se-who svg{flex:none;width:22px;height:22px}
.se-who b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}

/* what Rep learned on the lander (v2.29.0, app/scan.py signup_card): after the form, so the form stays high on a phone */
.au-know{order:10;display:grid;gap:12px;padding:14px 16px;border-radius:var(--r-l,14px);background:var(--bg-2,rgba(127,127,127,.08));border:1px solid var(--line,rgba(127,127,127,.2))}
.au-know-h{display:flex;align-items:center;gap:12px;min-width:0}
.au-know-h .rep{flex:none}
.au-know-t{font-weight:600;overflow-wrap:anywhere}
.au-site{color:var(--ink-2);font-size:var(--fs-2);overflow-wrap:anywhere}
.au-know-l{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:var(--fs-2)}
.au-know-l li{display:grid;grid-template-columns:minmax(0,9ch) 1fr;gap:4px 10px;align-items:baseline}
.au-know-l b{font-weight:600}
.au-know-l span{color:var(--ink-2);overflow-wrap:anywhere}
@media (max-width:640px){.au-know{padding:12px}.au-know-l li.more{display:none}}