/* Onboarding app shell. Follows the BrandRobin app pattern (dark, single centered column, 3-step progress), in RedBubblegum's warm dark + red. Deliberately dark-only, like an app. */
:root{
  color-scheme: dark;
  --bg:#151110; --side:#110D0C; --panel:#1C1716; --panel-2:#241E1C;
  --line:#2E2624; --field-line:#3A302E; --track:#2A2321;
  --text:#F4EAE7; --muted:#A3948F; --faint:#766965;
  --brand:#B3202A; --brand-hover:#C42630; --brand-edge:#7E141B; --link:#F2636B;
  --ok:#5BBF8A;
  --ctrl-line:#3A3230; --ctrl-hover:#2C2523; --focus:#7A5A56; --ring:rgba(179,32,42,.22); --drop:#0B0807; --pat:#2A1C1B; --bub-fill:rgba(255,77,109,.10); --bub-stroke:rgba(255,77,109,.38); --bub-text:#FF8FA3; --bub-dim:.55; --card:#1C1716; --card-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 20px -10px rgba(0,0,0,.5); --warm-bg:rgba(255,177,61,.14); --warm-text:#FFB13D; --seg-bg:#211A19; --ok-bg:rgba(91,191,138,.14); --ok-line:rgba(91,191,138,.4); --read-bg:rgba(179,32,42,.16); --read-line:rgba(242,99,107,.45);
  --pop-shadow:0 20px 40px -12px rgba(0,0,0,.6); --tile-ring:transparent; --sel-bg:rgba(179,32,42,.18); --sel-text:#fff;
  --font:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.2,.6,.3,1);
}
*{box-sizing:border-box}
html,body{min-height:100%}
/* the scrollbar coming and going must not shift the page sideways */
html{scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea{font:inherit;color:var(--text)}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:6px}
@keyframes in{from{opacity:0;translate:0 8px}}
@keyframes spin{to{rotate:360deg}}
@keyframes sheen{from{background-position:120% 0}to{background-position:-20% 0}}

/* light theme, matching the landing page (default). Dark stays available from the prototype switcher. */
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#F8F5F3; --side:#F2ECE9; --panel:#FFFFFF; --panel-2:#FFFFFF;
  --line:#E8DFDB; --field-line:#D4C8C3; --track:#E8DFDB;
  --text:#1C1413; --muted:#7D6F6A; --faint:#A69894;
  --brand:#B3202A; --brand-hover:#931821; --brand-edge:#931821; --link:#B3202A;
  --ok:#2E8B57;
  --ctrl-line:#D4C8C3; --ctrl-hover:#F6F1EE; --focus:#D98F89; --ring:rgba(179,32,42,.12); --drop:rgba(28,20,19,.08); --pat:#E3D6D1; --bub-fill:rgba(255,77,109,.10); --bub-stroke:rgba(255,77,109,.42); --bub-text:#B8324E; --bub-dim:.5; --card:#FFFFFF; --card-shadow:0 1px 2px rgba(28,20,19,.05),0 8px 22px -12px rgba(28,20,19,.16); --warm-bg:#FFF3DC; --warm-text:#8A5200; --seg-bg:#E9E1DD; --ok-bg:#E7F4EC; --ok-line:#B9DEC8; --read-bg:#FBEDEB; --read-line:#F0CBC6;
  --pop-shadow:0 12px 30px -10px rgba(28,20,19,.22); --tile-ring:#E8DFDB; --sel-bg:#FBEDEB; --sel-text:#B3202A;
}

/* shared controls */
.logo{display:inline-flex;align-items:center;gap:10px;font-family:Manrope,var(--font);font-weight:800;font-size:19px;letter-spacing:-.045em;color:var(--text)}
.logo svg{width:28px;height:28px}
.logo-dot{color:#FF4D6D}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:6px;font-size:15px;font-weight:600;white-space:nowrap;transition:background-color .15s,opacity .15s,scale .12s}
.btn:active{scale:.985}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--brand);color:#fff;border:1px solid var(--brand-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 var(--drop),0 1px 2px rgba(0,0,0,.1)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-primary:disabled{opacity:.45;cursor:default;scale:1}
.btn-primary:disabled:hover{background:var(--brand)}
.btn-dark{background:var(--panel-2);color:var(--text);border:1px solid var(--ctrl-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 var(--drop)}
.btn-dark:hover{background:var(--ctrl-hover)}
.btn-sm{height:40px;padding:0 18px}
.full{width:100%}
.link{font-size:13px;font-weight:600;color:var(--link)}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.back{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;margin-left:-12px;border-radius:6px;font-size:13px;font-weight:600;color:var(--muted);transition:color .15s,background-color .15s}
.back:hover{color:var(--text);background:var(--panel)}
.back svg{width:16px;height:16px}
.label{display:block;font-size:13px;font-weight:600;line-height:1.35;margin-bottom:6px}
.help{font-size:13px;line-height:1.55;color:var(--muted);margin-top:6px}
.field{display:block;width:100%;height:36px;padding:4px 12px;border-radius:6px;background:var(--panel);border:1px solid var(--field-line);font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s}
.field::placeholder{color:var(--faint)}
.field:focus{border-color:var(--focus);box-shadow:0 0 0 3px var(--ring)}
.field.bad{border-color:var(--link)}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin .8s linear infinite}
.tile{flex:none;position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:6px;background:#fff;color:#151110;font-weight:700;font-size:17px;border:1px solid var(--line);overflow:hidden}
.tile img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;opacity:0;transition:opacity .2s}
.tile.has-logo{color:transparent}
.tile.has-logo img{opacity:1}

/* ---------- sign-up (split screen) ---------- */
.su{display:grid;grid-template-columns:minmax(0,47.5%) minmax(0,1fr);min-height:100vh}
.su-side{position:relative;overflow:hidden;background:var(--side);padding:32px 40px;display:flex;flex-direction:column}
.su-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}
.su-top a.sm{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.su-top a.sm:hover{color:var(--text)}
.su-top a.sm svg{width:14px;height:14px}
.su-foot{position:relative;z-index:1;margin-top:auto;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.feed{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;width:min(440px,100%);margin:28px auto}
.ex-body{transition:opacity .3s var(--ease),translate .3s var(--ease)}
/* switching company slides the whole block like a carousel: next goes left, previous goes right */
.ex-body.go-l{opacity:0;translate:-48px 0}
.ex-body.go-r{opacity:0;translate:48px 0}
.ex-body.snap{transition:none}
.ex-k{font-size:15px;color:var(--muted)}
.ex-who{margin-top:2px;font-size:28px;font-weight:600;line-height:1.15;letter-spacing:-.03em;color:var(--text);white-space:nowrap}
.ex-win{margin-top:20px;overflow:hidden;padding:4px 4px 0;margin-left:-4px;margin-right:-4px;-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 98%);mask-image:linear-gradient(to bottom,#000 62%,transparent 98%)}
.ex-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ex-list .fc{padding:14px 16px 15px;transition:filter .5s var(--ease),opacity .5s var(--ease),border-color 1.2s var(--ease),box-shadow 1.2s var(--ease)}
.ex-list .fc-t{margin-top:8px;font-size:15px;line-height:1.45;min-height:2.9em}
.ex-dots{display:flex;gap:6px;margin-top:22px}
.ex-dots button{width:6px;height:6px;border-radius:999px;background:var(--field-line);transition:width .25s var(--ease),background-color .25s}
.ex-dots button[aria-current="true"]{width:18px;background:var(--brand)}
.fc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 15px 14px;box-shadow:var(--card-shadow)}
.fc-top{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.fc-top b{font-weight:600;color:var(--text)}
.fc-sep{margin:0 -2px;color:var(--faint)}
.fc-av{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:8.5px;font-weight:700;color:#fff;background:var(--c)}
.fc-top .tag{margin-left:auto}
.fc-t{margin-top:7px;font-size:14.5px;line-height:1.45;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;white-space:nowrap;padding:2px 8px;border-radius:999px;line-height:1.5}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
/* hot: a red tint with dark red text, easy to read and calmer than solid red */
.tag.hot{background:color-mix(in srgb,var(--brand) 13%,var(--card));color:color-mix(in srgb,var(--brand) 85%,#000)}
.tag.cold{background:var(--track);color:var(--muted)}
.tag.warm{background:var(--warm-bg);color:var(--warm-text)}
.su-main{display:grid;place-items:center;padding:40px}
.su-form{width:min(400px,100%)}
.su-form h1{font-size:32px;font-weight:600;line-height:1.12;letter-spacing:-.035em}
.su-form .lead{margin-top:8px;font-size:15px;color:var(--muted)}
.su-fields{display:grid;gap:18px;margin-top:24px}
.pw{position:relative}
.pw .field{padding-right:40px}
.pw button{position:absolute;right:0;top:0;width:36px;height:36px;display:grid;place-items:center;color:var(--muted)}
.pw button:hover{color:var(--text)}
.pw button svg{width:16px;height:16px}
.su-form .btn-primary{margin-top:24px}
.or{display:flex;align-items:center;gap:14px;margin:20px 0;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--faint)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.su-form .btn-dark svg{width:18px;height:18px}
.su-terms{margin-top:22px;font-size:12px;text-align:center;color:var(--muted)}
.su-terms a{text-decoration:underline;text-underline-offset:2px}
.su-alt{margin-top:18px;font-size:14px;text-align:center;color:var(--muted)}
.su-alt a{color:var(--text);font-weight:600}
/* password label row: "Forgot password?" sits on the label's line, at the right */
.su-pwh{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.su-pwh .label{margin-bottom:6px}
.su-forgot{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.su-forgot:hover{color:var(--text)}
.su-ok{margin-top:14px;padding:10px 12px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);font-size:14px}
.err{font-size:12.5px;color:var(--link);margin-top:6px}

/* ---------- onboarding shell ---------- */
.ob{min-height:100vh;display:flex;flex-direction:column}
.ob-top{display:flex;align-items:center;justify-content:space-between;padding:32px 40px 0}
/* RedBubblegum x the partner: their name, and their logo only once it has loaded */
.cobrand{display:flex;align-items:center;gap:14px;min-width:0}
.partner{display:inline-flex;align-items:center;gap:10px;min-width:0;font-family:Manrope,var(--font);font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--text)}
.partner b{font-weight:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(320px,40vw)}
.pt-x{color:var(--faint);font-weight:500;font-size:17px;letter-spacing:0}
.pt-tile{width:28px;height:28px;border-radius:6px;background:none;border:0} /* their logo as it is, the same size as ours */
.pt-tile img{inset:0;width:100%;height:100%}
.ob-step{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.prog{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:min(512px,calc(100% - 32px));margin:20px auto 0}
.prog span{height:4px;border-radius:999px;background:var(--track);overflow:hidden}
.prog span i{display:block;height:100%;width:0;background:var(--text);border-radius:inherit;transition:width .5s var(--ease)}
.prog span.on i{width:100%}
.ob-body{flex:1;display:flex;justify-content:center;padding:40px 16px}
.pane{display:none;width:100%}
.pane.on{display:block;animation:in .4s var(--ease)}
.col{width:min(512px,100%);margin:0 auto}
.col-wide{width:min(768px,100%);margin:0 auto}
.pane.center{align-self:center} /* centred in the space under the progress bar, like BrandRobin; nothing inside changes height, so it never shifts */
.h{font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.03em}
.lede{margin-top:8px;font-size:17px;line-height:1.6;color:var(--muted)}
.lede-sm{margin-top:6px;font-size:15px;line-height:1.6;color:var(--muted);max-width:640px}

/* step 1: website */
.w-form{margin-top:32px}
.site{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:16px;border-radius:10px;background:var(--panel);border:1px solid var(--line);animation:in .3s var(--ease)}
.site b{font-size:15px;font-weight:500}
.urlbox{display:flex;align-items:center;height:40px;border-radius:6px;background:var(--panel);border:1px solid var(--field-line);transition:border-color .15s,box-shadow .15s,opacity .2s}
.urlbox:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px var(--ring)}
.urlbox .pre{position:relative;flex:none;width:66px;height:100%;display:flex;align-items:center;padding-left:12px;overflow:hidden;user-select:none;transition:width .22s var(--ease)}
.pre-txt{font-size:15px;color:var(--faint);transition:opacity .15s}
.mini{position:absolute;left:10px;top:50%;translate:0 -50%;width:22px;height:22px;border-radius:5px;background:#fff;color:#151110;box-shadow:0 0 0 1px var(--tile-ring);display:grid;place-items:center;font-size:11px;font-weight:700;overflow:hidden;opacity:0;scale:.7;transition:opacity .2s,scale .22s var(--ease)}
.mini img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain;opacity:0;transition:opacity .2s}
.mini.has-logo{color:transparent}
.mini.has-logo img{opacity:1}
.urlbox.has-scheme:not(.show-logo) .pre{width:12px}
.urlbox.has-scheme .pre-txt{opacity:0}
.urlbox.show-logo .pre{width:40px}
.urlbox.show-logo .pre-txt{opacity:0}
.urlbox.show-logo .mini{opacity:1;scale:1}
.sitechip.no-logo{padding-left:12px}
.sitechip.no-logo .mini{display:none}
.urlbox input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;padding:0 12px 0 6px;font-size:15px}
.urlbox input::placeholder{color:var(--faint)}
.urlbox .ok{width:16px;height:16px;margin-right:12px;color:var(--ok);display:none}
.urlbox.valid .ok{display:block}
.reading .urlbox{opacity:.55}
.reading .urlbox:focus-within{box-shadow:none}
.shine{background:linear-gradient(90deg,var(--muted) 0%,var(--muted) 40%,var(--text) 50%,var(--muted) 60%,var(--muted) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 2.2s linear infinite}
.w-alt{margin-top:16px;height:20px;display:flex;align-items:center}
.w-status{font-size:13px;line-height:20px}
.w-form .btn-primary{margin-top:24px}

/* step 2: details */
.sitechip{display:inline-flex;align-items:center;gap:8px;height:32px;margin-top:16px;padding:0 12px 0 6px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.sitechip .mini{position:relative;left:auto;top:auto;translate:none;width:20px;height:20px;border-radius:5px;font-size:10px;opacity:1;scale:1}
.d-fields{display:grid;gap:22px;margin-top:28px}
.hint{font-size:13px;line-height:1.5;color:var(--muted);margin:-2px 0 8px}
.ta{display:block;width:100%;min-height:62px;resize:none;padding:8px 12px;border-radius:6px;background:var(--panel);border:1px solid var(--field-line);font-size:15px;line-height:1.55;outline:none;transition:border-color .15s,box-shadow .15s;field-sizing:content}
.ta::placeholder{color:var(--faint)}
.ta:focus{border-color:var(--focus);box-shadow:0 0 0 3px var(--ring)}
.ta.bad{border-color:var(--link)}
.d-go{margin-top:28px}
.lbl-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.lbl-row .label{margin:0}
.tip{position:relative;display:inline-flex}
.tip-btn{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:var(--faint);transition:color .15s}
.tip-btn svg{width:15px;height:15px}
.tip:hover .tip-btn,.tip-btn:focus-visible{color:var(--text)}
.tip-pop{position:absolute;left:calc(100% + 10px);top:50%;translate:-4px -50%;white-space:nowrap;padding:7px 10px;border-radius:6px;background:var(--panel-2);border:1px solid var(--ctrl-line);font-size:12.5px;line-height:1.4;color:var(--text);box-shadow:var(--pop-shadow);opacity:0;pointer-events:none;transition:opacity .15s,translate .15s var(--ease);z-index:5}
.tip-pop::after{content:"";position:absolute;right:100%;top:50%;width:8px;height:8px;background:var(--panel-2);border-left:1px solid var(--ctrl-line);border-bottom:1px solid var(--ctrl-line);translate:5px -50%;rotate:45deg}
.tip:hover .tip-pop,.tip-btn:focus-visible+.tip-pop{opacity:1;translate:0 -50%}

.toast{position:fixed;left:50%;bottom:28px;translate:-50% 0;padding:12px 18px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);font-size:14px;color:var(--text);box-shadow:var(--pop-shadow);animation:in .3s var(--ease);z-index:70}

/* ---------- scan screen (v5) ----------
   Header: title, one status line, one time estimate, one overall bar.
   Grid: Progress on the left. On the right, Your communities on top (a box that stays three rows tall)
   and Your shortlist under it. New buyers are only appended, so nothing on screen moves to make room.
   Every section follows one pattern: heading row outside (title, count, one action), content below.
   Lists of rows sit in a .panel; the shortlist's cards are the objects themselves, so they have no outer box. */
.toast{display:flex;align-items:center;gap:14px}
.toast button{font-weight:600;color:var(--link)}
.on-scan .prog,.on-scan .ob-step{display:none}
.on-scan .ob-top{padding-top:20px}
.on-scan .ob-body{padding-top:28px;padding-bottom:72px}
.sc{position:relative;width:min(1180px,100%);margin:0 auto}
.sc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.sc-head>div:first-child{min-width:0}
.sc-head .h{text-wrap:balance}
.sc-status{display:flex;align-items:center;gap:9px;margin-top:6px;font-size:15px;color:var(--muted);min-height:24px}
.sc-status span:last-child{animation:fadein .3s ease}
.sc-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--brand);animation:scpulse 1.6s ease-out infinite}
.sc.done .sc-dot{animation:none;background:var(--ok)}
@keyframes scpulse{0%{box-shadow:0 0 0 0 rgba(179,32,42,.4)}100%{box-shadow:0 0 0 8px rgba(179,32,42,0)}}
.sc-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding-bottom:2px}
.sc-left{font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.sc-mail{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--link)}
.sc-mail:hover{text-decoration:underline;text-underline-offset:3px}
.sc-mail svg{width:14px;height:14px}
.sc-mail[aria-pressed="true"]{color:var(--ok);text-decoration:none;cursor:default}
.sc-bar{display:none;margin-top:16px;height:4px;border-radius:999px;background:var(--track);overflow:hidden}
.sc-bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:inherit;transition:width .35s linear,background-color .4s}
.sc.done .sc-bar i{background:var(--ok)}

.sc-grid{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"prog cm" "prog sl";column-gap:36px;row-gap:24px;align-items:start;margin-top:24px}
.sec{min-width:0}
.sec-prog{grid-area:prog;position:sticky;top:24px;align-self:start}
/* the progress column stays in view while the shortlist scrolls (wide screens only) */
.sec-cm{grid-area:cm}
.sec-sl{grid-area:sl}
.sec-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-height:32px;margin-bottom:10px}
.sec-h h3{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.sec-n{font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.sec-x{margin-left:auto;display:flex;align-items:center;gap:8px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--card-shadow)}
.sec-h .tip-pop{white-space:normal;width:250px}
.sec-h h3+.tip{margin-left:-6px}

/* Progress: an open flow on the page background, deliberately unlike the bordered data panels.
   Three steps joined by a rail. Between steps, a hand-off line says what moves to the next step
   ("26 communities to read"). A rail segment animates while things are moving along it and turns solid once
   the step above is finished. Every step keeps a fixed height for the whole scan, so nothing shifts. */
.flow{list-style:none;margin:0;padding:2px 0 0;display:grid;grid-template-columns:minmax(0,1fr)}
.st,.hand{position:relative;padding-left:40px}
.st-mk{position:absolute;left:0;top:0;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--field-line);background:var(--bg);color:var(--faint);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;transition:background-color .3s,border-color .3s,color .3s}
.st-mk svg{position:absolute;width:12px;height:12px;color:#fff;opacity:0;transition:opacity .2s}
.st.run .st-mk{border-color:var(--brand);color:var(--brand)}
.st.run .st-mk::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;border-top-color:var(--brand);animation:spin 1s linear infinite}
.st.done .st-mk{border-color:var(--ok);background:var(--ok);color:transparent}
.st.done .st-mk svg{opacity:1}
.st::before,.hand::before{content:"";position:absolute;left:12px;width:2px;background:var(--line);border-radius:2px}
.st::before{top:30px;bottom:-1px}
.hand::before{top:0;bottom:-1px}
.flow .st:last-of-type::before{display:none}
.st.done::before,.hand.on::before{background:var(--ok)}
/* a small green dot closes the rail once the scan is done */
.flow .hand:last-child.on::after{content:"";position:absolute;left:8px;bottom:1px;width:10px;height:10px;border-radius:50%;background:var(--ok)}
.hand.flow::before{background:repeating-linear-gradient(to bottom,var(--brand) 0 6px,transparent 6px 11px);background-size:100% 22px;animation:railflow .7s linear infinite}
.st.run.feeds::before{background:repeating-linear-gradient(to bottom,var(--brand) 0 6px,transparent 6px 11px);background-size:100% 22px;animation:railflow .7s linear infinite}
@keyframes railflow{to{background-position:0 22px}}
.st-row{display:flex;align-items:baseline;gap:10px;min-height:26px}
.st-t{flex:1;min-width:0;font-size:15px;font-weight:600;line-height:26px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.st.run .st-t,.st.done .st-t{color:var(--text)}
.st-n{font-size:13.5px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.st:not(.run):not(.done) .st-n{color:var(--faint)}
.st-n .of{color:var(--faint);font-weight:500}
.st-n .y{color:var(--muted)}
.st-n .y.bump{animation:bump .7s var(--ease)}
@keyframes bump{from{color:var(--brand)}}
.st-n .grow{color:var(--faint);font-weight:500;margin-left:1px}
.st-n small{font-size:12px;font-weight:500;color:var(--muted)}
.st-d{margin-top:1px;font-size:13px;line-height:20px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.st-d b{font-weight:600;color:var(--text)}
.st .sweep{margin-top:10px}
.st.done .sweep b{background:var(--ok)}
.st.done .sweep b::after{display:none}
.st-pv{margin-top:10px;transition:height .45s var(--ease),margin-top .45s var(--ease),opacity .25s}
.st.done .st-pv,.st.done .st-sub{height:0;margin-top:0;opacity:0;overflow:hidden}
.st-sub{transition:height .45s var(--ease),margin-top .45s var(--ease),opacity .25s}
/* nothing is reserved: a line or box takes space only while it has something to show */
.st-sub:empty,.st-pv:empty{display:none}
.st:not(.run):not(.done) .sweep{display:none}
.hand.empty{height:10px;margin-bottom:0}
.hand.empty>*{display:none}
.st-sub{margin-top:8px;font-size:12.5px;line-height:18px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-sub b{font-weight:600;color:var(--text)}
.st{padding-bottom:16px}
.hand{display:flex;align-items:center;gap:6px;height:34px;margin-bottom:8px;font-size:12.5px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.hand svg{flex:none;width:13px;height:13px}
.hand.flow,.hand.on{color:var(--muted)}
.hand.on b,.hand.flow b{color:var(--text)}
.hand.end{margin:0}
.hand.end::before{bottom:50%}
.kept-row{display:flex;align-items:center;height:54px;gap:10px}
.kept-row .avs{display:flex}
.kept-row .fc-av{width:24px;height:24px;font-size:8.5px;margin-left:-6px;box-shadow:0 0 0 2px var(--bg)}
.kept-row .fc-av:first-child{margin-left:0}
.kept-row span:last-child{font-size:13px;font-weight:600;color:var(--muted)}
.fb-end{padding-top:4px;font-size:13px;color:var(--muted)}
.sweep{position:relative;height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.sweep b{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--brand);transition:width .25s linear}
.sweep b::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);background-size:60% 100%;background-repeat:no-repeat;animation:sheen 1.1s linear infinite}
.pk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px 6px 6px;border-radius:999px;background:var(--bg);border:1px solid var(--line);transition:opacity .3s}
.pk.in{animation:pkin .32s var(--ease)}
@keyframes pkin{from{opacity:0;translate:8px 0}}
.pk b{display:block;font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk .vd{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;opacity:0;transition:opacity .2s}
.pk.keep .vd{opacity:1;background:var(--read-bg);color:var(--link)}
.pk.skip{opacity:.55}
.pk.skip .vd{opacity:1;background:var(--track);color:var(--muted)}
.pk-box{min-height:0}
/* step 1: the angle being searched right now, swapped with a short fade */
.sw-angle b{color:var(--text);font-weight:500}
.sw-angle.swap{animation:fadein .35s ease}
.fb-box{min-height:0}
.fb{padding:10px 12px 11px;border-radius:10px;background:var(--card);border:1px solid var(--brand);box-shadow:0 0 0 3px var(--ring)}
.fb.in{animation:pkin .35s var(--ease)}
/* the buyer card in Progress uses the shortlist card's name and avatar size, so nothing grows when it lands */
.fb-t{margin-top:8px;font-size:15px;line-height:1.45;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fb-wait{font-size:13px;line-height:22px}
.ghost{position:absolute;z-index:6;margin:0;pointer-events:none;transform-origin:0 0}

/* Your communities: chips in a box that stays three rows tall, so the shortlist under it never moves.
   Order: by buyers found, most first; ties keep the order the communities were picked. A chip only moves
   when it gains a buyer, and the chips it passes shift along one place. A chip that wraps to the next line
   fades in rather than flying across. With no communities yet, the box is a dashed empty state like the shortlist's.
   A chip being read shows "posts read/posts posts" and fills as it goes; an analyzed chip turns green and
   shows its buyers. "+N more" opens the full list. */
.cm-box{padding:12px}
.chips{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;height:102px;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-gutter:stable}
/* every community is in the box, which scrolls (as on the dashboard) instead of opening downwards */
.chip{position:relative;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 4px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;isolation:isolate;transition:background-color .5s,border-color .5s,color .3s}
.chip::before{content:"";position:absolute;inset:0 auto 0 0;z-index:-1;width:calc(var(--p,0) * 100%);background:color-mix(in srgb,var(--brand) 17%,var(--bg));transition:width .25s linear}
.chip.q{color:var(--muted)}
.chip.run{border-color:var(--read-line)}
.chip.done{background:var(--bg);border-color:var(--line)}
.chip.done::before{opacity:0}
.chip .fc-av{width:20px;height:20px;font-size:8px}
.chip-m{font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.chip-m .x{display:inline-block;text-align:right}
.chip.q .chip-m{display:none}
.chip.run .chip-m{color:var(--text)}
.chip.done .chip-m{color:var(--ok)}
.chip.done .chip-m.none{color:var(--muted);font-weight:500}
.chip.wait{visibility:hidden}
.chip:not(.more){cursor:pointer}
.chip:not(.more):hover{border-color:var(--field-line)}
.chip.sel{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.chip.more{padding:0 12px;font-weight:600;color:var(--link);background:var(--card);cursor:pointer}
.chip.more:hover{border-color:var(--field-line)}
.cm-box.empty{background:none;box-shadow:none;border:1.5px dashed color-mix(in srgb,var(--line) 45%,var(--field-line))}
.cm-box.empty .chips{display:grid;place-items:center;align-content:center}
.cm-empty{display:grid;gap:4px;margin:0;text-align:center}
.cm-empty b{font-size:15px;font-weight:600;color:var(--text)}
.cm-empty span{font-size:13.5px;color:var(--muted)}

/* Your shortlist */
.sl-empty{display:grid;place-items:center;align-content:center;gap:4px;min-height:150px;padding:24px;border:1.5px dashed color-mix(in srgb,var(--line) 45%,var(--field-line));border-radius:12px;text-align:center}
.sl-empty b{font-size:15px;font-weight:600;color:var(--text)}
.sl-empty span{font-size:13.5px;color:var(--muted)}
.sl-grid{list-style:none;margin:0;padding:0;display:grid;align-items:stretch;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.lc{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--card-shadow);padding:14px 16px 15px;cursor:pointer;transition:border-color .2s,opacity .3s}
.lc:hover{border-color:var(--field-line)}
.lc.wait{visibility:hidden}
/* while a card's height animates (opening, or its row changing), its lines keep their size: nothing squeezes or jitters */
.lc>*{flex-shrink:0}
.lc.land{animation:lcland 1.4s var(--ease)}
@keyframes lcland{from{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring),var(--card-shadow)}}
.lc.first{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring),var(--card-shadow)}
.lc .first-tag{position:absolute;top:-10px;left:14px;padding:1px 8px;border-radius:999px;background:var(--brand);color:#fff;font-size:11px;font-weight:600}
.lc-t{margin-top:8px;font-size:15px;line-height:1.45;font-weight:500;color:var(--text)}
.lc-why{margin-top:6px;font-size:13px;line-height:1.5;color:var(--muted)}
.lc-why b{font-weight:600;color:var(--text)}
.weak{margin-top:18px}
.weak-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;width:100%;min-height:40px;padding:8px 12px;border-radius:10px;border:1px dashed var(--line);text-align:left;font-size:14px;font-weight:600;color:var(--text);transition:background-color .15s}
.weak-h:hover{background:var(--card)}
.weak-h{cursor:pointer}
.weak-t{display:inline-flex;align-items:center;gap:10px;font:inherit;color:inherit;text-align:left}
.weak-h .tip-pop{white-space:normal;width:240px;font-weight:500}
.weak-t>svg{width:14px;height:14px;color:var(--muted);rotate:-90deg;transition:rotate .2s var(--ease)}
.weak-t[aria-expanded="true"]>svg{rotate:0deg}
#slWeak{margin-top:12px}
#slWeak .lc{opacity:.85}
.lc-why{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:var(--seg-bg)}
.seg button{height:26px;padding:0 10px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* end of scan: the time estimate swaps for these two buttons in the same spot, so nothing below moves */
.sc-cta{display:flex;gap:8px;flex-wrap:wrap}
/* top bar: the way into the app, always in the same corner on the scan screen */
.top-dash{display:none;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--muted);transition:color .15s}
.on-scan .top-dash{display:inline-flex}
.top-dash .d-l,.top-dash .d-s{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:3px}
.top-dash:hover{color:var(--text)}
/* done and unlocked: the dashboard is the next step, so it turns red */
.top-dash.ready,.top-dash.ready:hover{color:var(--link)}
.top-dash:hover .d-l,.top-dash:hover .d-s{text-decoration-color:currentColor}
.top-dash svg{width:15px;height:15px;transition:translate .15s}
.top-dash:hover svg{translate:2px 0}
.top-dash .d-s{display:none}
@media (max-width:560px){ .partner b{display:none} .top-dash .d-l{display:none} .top-dash .d-s{display:inline} .top-dash{font-size:13.5px} }
/* the top section */
#scTitle .tn.bump{animation:titlebump .8s var(--ease)}
.sc.done.wait-code .sc-dot{background:var(--brand)}
@keyframes titlebump{30%{color:var(--brand)}}
.sc-code{font:inherit;color:var(--link);font-weight:500;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--link) 35%,transparent);text-underline-offset:3px}
.sc-code:hover{text-decoration-color:currentColor}
.sc.failed .sc-dot{animation:none;background:var(--faint)}
.sc-cta .btn[aria-pressed="true"]{background:var(--ok);border-color:var(--ok)}

/* open-a-buyer drawer */
.drw-ov{position:fixed;inset:0;z-index:80;background:rgba(20,14,13,.32);animation:fadein .25s}
@keyframes fadein{from{opacity:0}}
.drw{position:absolute;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--card);border-left:1px solid var(--line);box-shadow:-20px 0 50px -20px rgba(0,0,0,.35);padding:28px 26px calc(28px + env(safe-area-inset-bottom,0px));overflow:auto;animation:drwin .35s var(--ease)}
@keyframes drwin{from{translate:40px 0;opacity:0}}
.drw-x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.drw-x:hover{background:var(--bg);color:var(--text)}
.drw-x svg{width:16px;height:16px}
.drw #drwTop{margin-right:44px}
.drw h3{margin-top:12px;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--text);text-wrap:balance}
.drw-body{margin-top:10px;font-size:15px;line-height:1.6;color:var(--text)}
.drw-l{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;margin-bottom:8px;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.drw-l .seg{text-transform:none;letter-spacing:0}
.drw-why{font-size:14.5px;line-height:1.55;color:var(--text)}
.drw-ta{min-height:140px}
.drw-note{display:flex;gap:8px;margin-top:10px;padding:9px 11px;border-radius:8px;background:var(--warm-bg);font-size:13px;line-height:1.5;color:var(--warm-text)}
.drw-note svg{flex:none;width:15px;height:15px;margin-top:2px}
.drw-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.drw-act svg{width:14px;height:14px}

@media (max-width:1040px){
  .sec-prog{position:static}
  .sc-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"prog" "cm" "sl";gap:24px}
  .st-pv,.st-sub{display:none}
  .sc-right{align-items:flex-start}
}
@media (max-width:640px){ .sl-grid{grid-template-columns:minmax(0,1fr)} }

/* prototype screen switcher */
.rv{position:fixed;left:16px;bottom:16px;z-index:60;font-size:12.5px}
.rv>button{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:999px;background:var(--text);color:var(--bg);font-weight:600;box-shadow:0 8px 24px -8px rgba(0,0,0,.6)}
.rv>button svg{width:13px;height:13px}
.rv-menu{display:none;position:absolute;left:0;bottom:42px;width:230px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--pop-shadow)}
.rv.open .rv-menu{display:block}
.rv-menu p{padding:6px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.rv-menu button{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:7px;font-size:13px}
.rv-menu button:hover{background:var(--panel)}
.rv-menu button.on{background:var(--sel-bg);color:var(--sel-text);font-weight:600}
.rv-menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}

/* smaller screens: step the sign-up form down so it never dominates the window */
@media (max-width:1366px){
  .su-form{width:min(360px,100%)}
  .su-form h1{font-size:28px}
  .su-form .lead{font-size:14px}
  .su-fields{gap:14px;margin-top:20px}
  .su-form .label{font-size:12.5px;margin-bottom:5px}
  .su-form .field{height:34px;font-size:14px}
  .su-form .pw button{width:34px;height:34px}
  .su-form .help{font-size:12px}
  .su-form .btn{height:42px;font-size:14px}
  .su-form .btn-primary{margin-top:20px}
  .or{margin:16px 0}
  .su-terms{margin-top:18px;font-size:11.5px}
  .su-alt{margin-top:14px;font-size:13px}
    }
@media (max-width:900px){
  .su{grid-template-columns:1fr}
  .su-side{display:none}
  .su-main{padding:32px 16px}
  .ob-top{padding:20px 16px 0}
  .pane.center{align-self:flex-start}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:0s!important}}
/* Chrome autofill: keep the field's own colours so the box, logo and tick stay one colour */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--text);caret-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--panel) inset;transition:background-color 9999s ease-out 0s}
.field:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--panel) inset,0 0 0 3px var(--ring)}
.rv.bar{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);box-shadow:var(--pop-shadow)}
.rv.bar .rv-who{padding:0 10px 0 8px;font-weight:600;color:var(--muted)}
.rv.bar>button{height:28px;padding:0 12px;border-radius:999px;font-weight:600;color:var(--text);background:none;box-shadow:none}
.rv.bar button:hover{background:var(--ctrl-hover)}
/* email code: until it is entered, buyers show as blurred placeholders and this box sits above them */
.sec-sl{position:relative}
.sl-wrap{position:relative}
/* Locked: the code box and the blurred buyers it unlocks share one frame.
   The box is the frame's header and stays in view while scrolling the buyers. */
.sec-sl.locked .sl-wrap{padding:0 12px 12px;border:1px solid var(--line);border-radius:16px;background:var(--read-bg);box-shadow:var(--card-shadow)}
.gate{position:sticky;top:0;z-index:4;margin:0 -12px 12px;padding:16px 18px;border-radius:15px 15px 0 0;background:var(--card);border-bottom:1px solid var(--line);animation:in .35s var(--ease)}
/* The verification gate occupies the empty shortlist too, instead of sitting below it. */
.sec-sl.locked .sl-wrap:has(>#slEmpty:not([hidden])){display:grid}
.sec-sl.locked .sl-wrap:has(>#slEmpty:not([hidden]))>#slGate,.sec-sl.locked .sl-wrap:has(>#slEmpty:not([hidden]))>#slEmpty{grid-area:1/1}
.sec-sl.locked .sl-wrap:has(>#slEmpty:not([hidden]))>#slEmpty{opacity:.2;pointer-events:none;align-self:stretch}
.sec-sl.locked .sl-wrap:has(>#slEmpty:not([hidden]))>#slGate{align-self:start;margin-bottom:0}
.gate-card{position:relative;padding-left:52px;min-height:40px}
.gate-lock{position:absolute;left:0;top:0;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--read-bg);color:var(--brand)}
.gate-lock svg{width:20px;height:20px}
.gate b{display:block;font-size:15px;font-weight:600;color:var(--text)}
.gate-card>span:not(.gate-lock){display:block;margin-top:2px;font-size:13.5px;color:var(--muted)}
.gate-row{display:flex;gap:8px;margin-top:12px}
.gate-row .field{width:150px;height:40px;font-size:18px;letter-spacing:.3em;font-variant-numeric:tabular-nums;text-align:center}
.gate .err{margin-top:8px}
.gate .link{display:inline-block}
.gate-links{display:flex;align-items:center;gap:8px;margin-top:10px}
.gate-sep{color:var(--faint)}
.gate-row .gate-email{width:260px;max-width:100%;font-size:15px;letter-spacing:0;text-align:left}
@media (max-width:560px){ .gate-card{padding-left:0} .gate-lock{position:static;width:34px;height:34px;margin-bottom:10px} }
.gate .link:disabled{opacity:.5;cursor:default;text-decoration:none}
.ph{display:block;height:.62em;margin:.42em 0;border-radius:999px;background:var(--track)}
.lc.locked{cursor:default}
/* code accepted: the lock turns into a check, the box bursts into confetti and folds away,
   the frame fades and the buyers move up and sharpen into view */
.sl-wrap{transition:background-color .85s,border-color .85s,box-shadow .85s,padding .85s cubic-bezier(.65,0,.35,1)}
.sec-sl.locked.unlocking .sl-wrap{background:transparent;border-color:transparent;box-shadow:none;padding:0}
.gate.ok{overflow:hidden}
.gate.ok .gate-lock{background:var(--ok-bg);color:var(--ok);animation:lockpop .35s var(--ease)}
@keyframes lockpop{40%{scale:1.25}}
.lc.reveal{animation:reveal 1s var(--ease) both}
@keyframes reveal{from{filter:blur(5px);opacity:.5}}
.confetti i{will-change:transform,opacity}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.confetti i{position:absolute;width:7px;height:11px;border-radius:2px}
/* wrong code: a gentle nudge of the code field, nothing alarming */
.gate-row.nudge .field{animation:nudge .4s ease-in-out}
@keyframes nudge{25%{translate:-3px 0}50%{translate:3px 0}75%{translate:-1.5px 0}}
.lc.locked .lt,.lc.locked .why,.fb.locked .lt{filter:blur(2.5px)}
/* a buyer card that just landed shows what flew in (no time, no why) until it opens up */
.lc.pre .lf,.lc.pre .lh>span[aria-hidden],.lc.pre .lh .ago,.lc.pre .lh .lc-go,.lc.pre .lh .lpkw{display:none}
/* ...at its own height, not stretched to the row, so the opening is a real expansion */
.lc.pre{align-self:start}
.drw-ta:disabled{opacity:.6}

/* Buyer cards, the same as the dashboard's: avatar, r/name, time, link to the post, Pick and the rating chip
   (intent dots and fit) on top; the title; then why and the mini chat. The buyer box that flies in uses the
   same head and title, so nothing changes size or font when it lands. */
.lc{gap:9px;width:100%;text-align:left;padding:14px 16px 13px;container-type:inline-size;transition:border-color .16s var(--ease),box-shadow .16s var(--ease),opacity .3s}
.lc:hover{border-color:var(--field-line);box-shadow:0 2px 6px rgba(28,20,19,.06),0 18px 40px -12px rgba(28,20,19,.14)}
.fb{display:flex;flex-direction:column;gap:9px;padding:14px 16px 13px;border-radius:12px}
.lh{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);min-width:0;overflow:hidden}
.lh b{color:var(--text);font-weight:600;font-size:11.5px}
.lh>.fc-av,.lh>span[aria-hidden],.lh>span:not(.sp):not([aria-hidden]),.lh>.sp{flex:none}
.lh>b{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh>span:not(.sp):not([aria-hidden]){white-space:nowrap}
.lh .sp{margin-left:auto;display:flex;gap:6px;align-items:center}
.lc:not(.pre) .lh>.lpkw+.sp{margin-left:10px}
.lh .tgg{display:none}
.lh .tag::before{display:none}
.lc .ago .ag-n{display:none}
.lc-go{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:-2px;color:var(--faint);cursor:pointer;transition:color .15s}
.lc-go:hover{color:var(--text)}
.lc-go svg{width:13px;height:13px}
.lpk{font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:underline;text-decoration-color:var(--field-line);text-underline-offset:3px;cursor:pointer;transition:color .15s}
.lpk:hover{color:var(--text);text-decoration-color:currentColor}
.lpk.on{border:1px solid var(--text);border-radius:999px;color:var(--text);text-decoration:none}
.lh .lpk{flex:none;padding:2px 8px;line-height:1.5;text-align:center}
.lh .lpk.on{padding:1px 7px}
.lh .lpkw{flex:none;margin-left:auto;display:inline-flex;align-items:center}
.lh .lpkg{display:none}
.idots{display:inline-flex;align-items:center;justify-content:center;gap:2px;flex:none;color:var(--text);border:1px solid var(--field-line);border-radius:999px;height:21px;width:37px}
.idots i{width:5px;height:5px;border-radius:50%;background:currentColor}
.lt{font-size:16px;line-height:1.42;color:var(--text);font-weight:500;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lf{display:flex;align-items:flex-start;gap:16px;min-height:44px;flex:1 1 auto}
.why{flex:1;min-width:0;margin-top:1px;font-size:14.5px;line-height:1.5;color:color-mix(in srgb,var(--text) 58%,var(--muted));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.why b{color:var(--text);font-weight:600}
.lf>.mp{align-self:flex-end;margin-left:auto}
.mp{position:relative;flex:none;width:58px;height:44px;border-radius:11px;background:var(--card);border:1.5px dashed color-mix(in srgb,var(--field-line) 75%,var(--line))}
@container (max-width:439.98px){ .lc .lh{gap:6px} .lc .ago .ag-w{display:none} .lc .ago .ag-n{display:inline} .lc:not(.pre) .lh>.lpkw+.sp{margin-left:6px} }
@container (max-width:379.98px){ .lc .lh{gap:5px} .lc .lh .lc-go{display:none} .lc .lh .sp{gap:4px} .lc:not(.pre) .lh>.lpkw+.sp{margin-left:4px} }

/* the dashboard's lead window, over this page */
.lead-pop{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:95;background:transparent}
.lead-pop.off{visibility:hidden;pointer-events:none}
html.pop-lock{overflow:hidden}

/* website step: a plan is needed, or the free scan is queued for tomorrow */
.ob-card{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);display:flex;flex-direction:column;gap:8px;text-align:left}
.ob-card b{font-size:15px;color:var(--text)}
.ob-card p{margin:0;font-size:14px;color:var(--muted)}
.ob-card .btn{align-self:flex-start;margin-top:4px}