/* Attribyte waitlist + login modals: the look. Shared by every page that offers
   them: the live landing (templates/marketing/base.html) and /home0. Markup lives in
   templates/marketing/_modals.html, behaviour in modals.js.

   Self-contained on purpose: the tokens, the typography and the element reset the
   modals used to take from landing.css are declared again here, SCOPED to
   .login-overlay (the root of both modals), so the modals look the same on a page
   that does not load landing.css and none of it leaks into the host page. On the
   live landing every value below is identical to the landing.css one it mirrors, so
   loading both changes nothing there.

   A host page must load this file AFTER its own stylesheets (see the shield). */

/* ── Host shield ──────────────────────────────────────────────────────────
   A host page's element rules would otherwise restyle the modals wherever their
   class rules rely on a browser default: /home0's Tailwind preflight, for one,
   sets button{font:inherit}, h2{font-size:inherit} and svg{display:block}.
   `all:revert` sends every property the rules below do not set back to the
   browser default, which is what landing.css leaves those properties at.
   · :where() keeps it at zero specificity, so every rule in this file still wins.
   · It beats anything in a cascade layer (Tailwind's base layer included) because
     this file is unlayered. An UNLAYERED host rule with a type selector still
     wins over it: another reason to load this file last.
   · SVG is left out: reverting would also drop its presentation attributes
     (fill, stroke). The one SVG default a host reset touches is pinned below. */
:where(.login-overlay :not(svg, svg *)){all:revert}

/* ── Tokens + typography (landing.css :root / body, scoped) ─────────────── */
.login-overlay{
  --bg-soft:#f3f3f1;
  --ink:#000000;
  --ink-soft:rgba(0,0,0,.6);
  --line:#e8e8e4;
  --tint-mint:#e4f1e9;
  --font:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family:var(--font);
  font-size:16px;
  font-weight:400;
  font-style:normal;
  font-feature-settings:normal;
  font-variation-settings:normal;
  line-height:1.5;
  letter-spacing:normal;
  text-align:start;
  text-transform:none;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ── Element base (landing.css `*`, `a`, `img`, `h1,h2,h3` + `h2`, scoped) ── */
:where(.login-overlay), :where(.login-overlay) *{box-sizing:border-box;margin:0;padding:0}
:where(.login-overlay) a{color:inherit;text-decoration:none}
:where(.login-overlay) img{display:block;max-width:100%}
:where(.login-overlay) h2{font-size:clamp(26px,4vw,48px);font-weight:400;letter-spacing:-.02em;line-height:1.2}
:where(.login-overlay) svg{display:inline;vertical-align:baseline}

/* ── The modals (moved verbatim from landing.css) ──────────────────────── */
/* ============ LOGIN MODAL ============ */
/* The 2026 sign-in design (CreatorLoginPage / BrandLoginPage + rd/HeroPanel,
   tokens in rd/tokens.ts), drawn inside the popup. The page frame is 1440x776:
   a 358 column centred in the left half (switch @20, title @113, footer 30 from
   the bottom) and a 692x736 hero panel inset 20, radius 32. The hero drawing is
   laid out in that 692x736 space and scaled to fit by modals.js (--lm-scale).
   Selectors go through .login-modal so they also beat /home0's `.h0-dm .lm-seg*`. */
@media (prefers-reduced-motion:reduce){.login-overlay{transition:none}}
.login-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(10,12,16,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;transition:opacity .2s ease}.login-overlay.open{display:flex;opacity:1}
.login-modal{position:relative;width:min(1160px,100%);height:min(760px,calc(100vh - 48px));background:#F7F7F7;color:#16120F;border-radius:26px;overflow:hidden;display:flex;box-shadow:0 40px 100px rgba(0,0,0,.42);font-family:"DM Sans",system-ui,-apple-system,sans-serif}
.login-modal .lm-main{flex:1;min-width:0;display:flex;justify-content:center;overflow-y:auto}
.login-modal .lm-col{position:relative;width:358px;max-width:calc(100% - 32px);min-height:100%;display:flex;flex-direction:column;padding:min(113px,15vh) 0 30px}
.login-modal .lm-hero{width:49.45%;flex-shrink:0;padding:20px 20px 20px 0}
.login-modal .lm-panel{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;background:#D6E8F8}

/* Brand | Creator: radius-10 pills 8 apart, joined by the bridge — the landing's own
   switch colours (#F4F3F0, active #E7F7C8, home0/problem/tab-notch.svg). */
.login-modal .lm-seg{position:absolute;top:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:0;border:0;background:transparent;white-space:nowrap;margin:0}
.login-modal .lm-seg-btn{position:relative;display:inline-flex;align-items:center;font-family:"DM Sans",system-ui,sans-serif;font-weight:600;font-size:14px;line-height:1.1;letter-spacing:-.14px;padding:10px 14px;border:0;border-radius:10px;background:#F4F3F0;color:#16120F;box-shadow:none;cursor:pointer;transition:none}
.login-modal .lm-seg-btn.active{background:#E7F7C8;color:#000;box-shadow:none}
.login-modal .lm-seg .lm-seg-btn + .lm-seg-btn::before{content:"";position:absolute;left:-8px;top:50%;width:8.06px;height:15px;transform:translateY(-50%);background:url(home0/problem/tab-notch.svg) center / 100% 100% no-repeat}
.login-modal .lm-seg-btn:focus-visible,.login-modal .lm-submit:focus-visible,.login-modal .lm-soc:focus-visible,.login-modal .lm-forgot:focus-visible,.login-modal .lm-foot a:focus-visible,.login-modal .lm-eye:focus-visible{outline:2px solid #2F76B7;outline-offset:2px}

/* Title: Geist 600 34/34, centred, a 330 box. */
.login-modal h2.lm-title{font-family:"Geist",system-ui,-apple-system,sans-serif;font-weight:600;font-size:34px;line-height:34px;letter-spacing:0;text-align:center;max-width:330px;margin:0 auto;color:#16120F}
.login-modal .lm-sub{font-size:14px;line-height:15.4px;letter-spacing:-.14px;color:#5A5855;text-align:center;margin:16px auto 0}

/* Floating-label field (rd/kit FloatingField): white 56 high, radius 13, padding 8/14, gap 12.
   Empty, the label stands alone as the placeholder; focused or filled, the value shows under it. */
.login-modal .lm-fields{margin-top:32px;display:flex;flex-direction:column;gap:8px}
.login-modal .lm-field{display:flex;align-items:center;gap:12px;height:56px;padding:8px 14px;border-radius:13px;background:#FFFFFF;cursor:text}
.login-modal .lm-field:focus-within{box-shadow:inset 0 0 0 1px #16120F}
.login-modal .lm-field.lm-field-err,.login-modal .lm-field.lm-field-bad{background:#FEEEE9;box-shadow:inset 0 0 0 1px #E82127}
.login-modal .lm-ico{display:block;flex-shrink:0}
.login-modal .lm-fwrap{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.login-modal .lm-flabel{font-size:16px;line-height:17.6px;letter-spacing:-.16px;color:#B8B7B6;height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.login-modal .lm-in{font-family:"Inter",system-ui,sans-serif;font-weight:500;font-size:16px;line-height:17.6px;letter-spacing:-.16px;color:#16120F;border:0;outline:0;background:transparent;padding:0;margin:0;width:100%;height:0;opacity:0;box-shadow:none}
.login-modal .lm-in::placeholder{color:transparent}
.login-modal .lm-field:focus-within .lm-in,.login-modal .lm-in:not(:placeholder-shown){height:18px;opacity:1;margin-top:4px}
.login-modal .lm-eye{border:0;background:none;padding:0;cursor:pointer;position:relative;width:21px;height:21px;display:block;flex-shrink:0}
.login-modal .lm-eye-ico{position:absolute;inset:0;display:block;background:#9D9B9A;-webkit-mask:url(login/IconEyeShow.svg) center / contain no-repeat;mask:url(login/IconEyeShow.svg) center / contain no-repeat}
.login-modal .lm-eye-slash{position:absolute;inset:0;display:none}
.login-modal .lm-eye.on .lm-eye-slash{display:block}

/* "I’ve forgotten my password": DM Sans 600 12/13.2, #5A5855, 10 under the fields
   (underlined on the brand frame only, as the two pages draw it). */
.login-modal .lm-forgot{align-self:flex-start;margin-top:10px;font-size:12px;line-height:13.2px;font-weight:600;color:#5A5855;text-decoration:none;white-space:nowrap}
.login-modal[data-aud="brand"] #lmLoginView .lm-forgot{text-decoration:underline}
.login-modal #lmLoginView,.login-modal #lmResetView{display:flex;flex-direction:column}

/* CTA (rd/kit PrimaryButton) and social buttons (OutlineButton): 48 high, radius 16, 12 apart. */
.login-modal .lm-actions{margin-top:32px;display:flex;flex-direction:column;gap:12px}
.login-modal .lm-submit{width:100%;height:48px;border:0;border-radius:16px;background:#16120F;color:#FCFCFC;font-family:"DM Sans",system-ui,sans-serif;font-weight:500;font-size:16px;line-height:20.832px;letter-spacing:-.16px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.login-modal .lm-submit:disabled{opacity:.4;cursor:default}
.login-modal .lm-soc{width:100%;height:48px;border:0;border-radius:16px;box-shadow:inset 0 0 0 1px #DBDBDB;background:transparent;color:#16120F;font-family:"DM Sans",system-ui,sans-serif;font-weight:500;font-size:16px;line-height:17.6px;letter-spacing:-.16px;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;padding:0}
.login-modal .lm-soc img,.login-modal .lm-soc svg{display:block;width:20px;height:20px;object-fit:contain}
.login-modal[data-aud="brand"] .lm-soc-apple{display:none}
.login-modal .lm-err{font-size:12px;line-height:13.2px;color:#E82127;opacity:.6}
.login-modal .lm-ok{font-size:12px;line-height:15.6px;color:#4F8F12}
.login-modal .lm-back{align-self:center;margin-top:4px}

/* "Not on Attribyte yet? Join the waitlist": DM Sans 400 16 + 700 16, 5 apart, 30 from the bottom. */
.login-modal .lm-foot{margin-top:auto;padding-top:32px;text-align:center;white-space:nowrap;font-size:16px;line-height:17.6px;letter-spacing:-.16px;color:#16120F}
.login-modal .lm-foot a{font-weight:700;line-height:18px;letter-spacing:0;margin-left:1px;color:#16120F;text-decoration:none;border:0}

/* Close: a glass disc over the hero's top-right corner. */
.login-modal .lm-close{position:absolute;top:32px;right:32px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.7);color:#16120F;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:4;padding:0}
.login-modal .lm-close:hover{background:#FFFFFF}

/* Hero drawing (rd/HeroPanel), in the frame's 692x736 space. */
.login-modal .lm-art{position:absolute;left:50%;top:50%;width:692px;height:736px;transform:translate(-50%,-50%) scale(var(--lm-scale,1))}
.login-modal .lm-glow{position:absolute;left:345.5px;top:368.5px;width:637px;height:637px;transform:translate(-50%,-50%);border-radius:50%;background:#FCFCFC;opacity:.46;filter:blur(59.3px)}
.login-modal .lm-photo,.login-modal .lm-card{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg))}
.login-modal .lm-photo{display:block;max-width:none;object-fit:cover;border-radius:14.562px;box-shadow:0 0 0 1.456px #FCFCFC}
.login-modal .lm-card{display:flex;align-items:center;white-space:nowrap;background:rgba(255,255,255,.20);box-shadow:inset 0 0 0 1.456px #B7DAFB,inset 1.456px 2.184px 4.369px rgba(255,255,255,.45),inset 0 -2.912px 5.825px rgba(0,0,0,.08),-2.184px -2.184px 8.737px rgba(255,255,255,.35),0 5.825px 17.475px -2.912px rgba(0,0,0,.12);backdrop-filter:blur(11.65px);-webkit-backdrop-filter:blur(11.65px);gap:11.65px;font-family:"Inter",system-ui,sans-serif;color:#16120F}
.login-modal .lm-card-l{border-radius:20.387px;padding:11.65px 17.475px}
.login-modal .lm-card-s{border-radius:14.562px;padding:8.737px 14.562px}
.login-modal .lm-card-xl{border-radius:23.3px;padding:14.562px 20.387px}
.login-modal .lm-card-top{align-items:flex-start}
.login-modal[data-aud="brand"] .lm-for-creator,.login-modal[data-aud="creator"] .lm-for-brand{display:none}
.login-modal .lm-stack{display:flex;flex-direction:column;gap:1.456px}
.login-modal .lm-stack-0{gap:0}
.login-modal .lm-t1{font-weight:600;font-size:16.0187px;line-height:19.3863px}
.login-modal .lm-t2{font-weight:400;font-size:13.1062px;line-height:15.8615px}
.login-modal .lm-t3{font-weight:500;font-size:14.5625px;line-height:17.6239px;color:#626575}
.login-modal .lm-amt{font-family:"Outfit",system-ui,sans-serif;font-weight:700;font-size:20.3875px;line-height:25.6882px}
.login-modal .lm-wrap{white-space:normal}
.login-modal .lm-pos{color:#4F8F12}
.login-modal .lm-badge{width:34.95px;height:34.95px;border-radius:17.475px;display:grid;place-items:center;flex-shrink:0}
.login-modal .lm-badge img,.login-modal .lm-badge svg{display:block}
.login-modal .lm-badge-ink{background:#16120F}
.login-modal .lm-badge-usd{background:#ECFDF5;color:#059669;font-weight:700;font-size:17.475px;line-height:21.1487px}
.login-modal .lm-badge-kr{background:#E7F7C8;color:#4F8F12;font-weight:700;font-size:13.1062px;line-height:15.8615px}
.login-modal .lm-thumb{display:block;width:24px;height:32px;border-radius:4px;object-fit:cover;flex-shrink:0}
.login-modal .lm-tick{background:#E7F7C8;border-radius:8px;padding:4px 8px;transform:rotate(-1deg);display:flex;flex-shrink:0}
.login-modal .lm-tick img{display:block;width:11px;height:8.1px;margin:3px 2px 3px 1px}
.login-modal .lm-check{width:32.04px;height:23.3px;border-radius:7.28px;background:#CEEC66;display:grid;place-items:center;flex-shrink:0}
.login-modal .lm-check svg,.login-modal .lm-trend svg{display:block}
.login-modal .lm-tile{width:50px;height:50px;border-radius:8px;background:#E7F7C8;display:grid;place-items:center;flex-shrink:0;transform:rotate(-.34deg)}
.login-modal .lm-tile img{display:block;width:20.6px;height:18.49px}
.login-modal .lm-earn{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.login-modal .lm-growth{background:#E7F7C8;border-radius:35px;padding:2.8px 3.5px;display:flex;align-items:center;gap:1.4px;font-family:"DM Sans",system-ui,sans-serif;font-weight:600;font-size:4.2px;line-height:5.4px;color:#4F8F12}
.login-modal .lm-growth img{display:block;width:4.9px;height:4.9px}
.login-modal .lm-trend{width:40.775px;height:40.775px;border-radius:11.65px;background:#E7F7C8;box-shadow:inset 0 0 0 1.456px rgba(79,143,18,.15);display:grid;place-items:center;flex-shrink:0}
.login-modal .lm-roas{font-weight:700;font-size:17.475px;line-height:21.1487px;max-width:128.15px}

/* Below 1024 the hero goes and the column stands alone (OnboardingLayout). */
@media(max-width:1023px){
  .login-modal{width:min(440px,100%)}
  .login-modal .lm-hero{display:none}
  .login-modal .lm-col{padding-top:92px}
  .login-modal h2.lm-title{font-size:28px;line-height:28px;max-width:272px}
  .login-modal .lm-close{top:16px;right:16px;background:rgba(0,0,0,.06)}
}

/* ============ WAITLIST MODAL ============ */
.wl-modal{position:relative;width:min(430px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:26px;padding:38px 34px 30px;box-shadow:0 40px 100px rgba(0,0,0,.42)}
  .wl-close{position:absolute;top:15px;right:15px;width:34px;height:34px;border:none;border-radius:50%;background:rgba(0,0,0,.06);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:4;transition:background .15s}
  .wl-close:hover{background:rgba(0,0,0,.12)}
  .wl-step{display:none}
  .wl-step.on{display:block;animation:wlFade .25s ease}
  @keyframes wlFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .wl-h{font-size:23px;font-weight:500;letter-spacing:-.5px;line-height:1.2;margin-bottom:6px}
  .wl-sub{font-size:13.5px;line-height:20px;color:var(--ink-soft);margin-bottom:24px}
  .wl-roles{display:flex;flex-direction:column;gap:12px}
  .wl-role{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 16px;border:1px solid var(--line);border-radius:18px;background:#fff;cursor:pointer;font-family:inherit;transition:border-color .15s,box-shadow .15s,transform .12s}
  .wl-role:hover{border-color:var(--ink);box-shadow:0 6px 20px rgba(0,0,0,.07);transform:translateY(-1px)}
  .wl-role-ico{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center}
  .wl-role-ico svg{width:20px;height:20px;stroke:var(--ink)}
  .wl-role-txt{flex:1;min-width:0}
  .wl-role-t{display:block;font-size:15px;font-weight:600;letter-spacing:-.2px;color:var(--ink)}
  .wl-role-d{display:block;font-size:12.5px;line-height:17px;color:var(--ink-soft);margin-top:3px}
  .wl-role-arrow{flex:0 0 auto;color:rgba(0,0,0,.3)}
  .wl-role-arrow svg{width:18px;height:18px}
  .wl-role-spin{display:none;width:17px;height:17px;border:2px solid rgba(0,0,0,.18);border-top-color:var(--ink);border-radius:50%;animation:wlSpin .7s linear infinite;flex:0 0 auto}
  .wl-role:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
  .wl-role.loading{opacity:1;cursor:default}
  .wl-role.loading .wl-role-arrow{display:none}
  .wl-role.loading .wl-role-spin{display:block}
  .wl-back{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;font-family:inherit;font-size:13px;font-weight:500;color:var(--ink-soft);padding:0;margin-bottom:18px;cursor:pointer}
  .wl-back:hover{color:var(--ink)}
  .wl-back svg{width:15px;height:15px}
  .wl-input{width:100%;height:50px;padding:0 18px;border-radius:80px;border:1px solid var(--line);background:#fff;font-family:inherit;font-size:16px;color:var(--ink);outline:none;margin-bottom:14px;transition:border-color .15s}
  .wl-input::placeholder{color:rgba(0,0,0,.34)}
  .wl-input:focus{border-color:var(--ink)}
  .wl-input.err{border-color:#e0463e}
  .wl-submit{width:100%;height:50px;border:none;border-radius:80px;background:linear-gradient(180deg,#1c1c1c,#000);color:#fff;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.18);transition:transform .15s,box-shadow .2s,opacity .2s;display:flex;align-items:center;justify-content:center;gap:9px}
  .wl-submit:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.24)}
  .wl-submit[disabled]{opacity:.65;cursor:default;transform:none;box-shadow:none}
  .wl-spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:wlSpin .7s linear infinite;display:none}
  .wl-submit.loading .wl-spin{display:block}
  .wl-submit.loading .wl-submit-t{opacity:.7}
  @keyframes wlSpin{to{transform:rotate(360deg)}}
  .wl-note{font-size:11.5px;line-height:16px;color:rgba(0,0,0,.4);text-align:center;margin-top:14px}
  .wl-ok-ico{width:54px;height:54px;border-radius:50%;background:var(--tint-mint);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
  .wl-ok-ico svg{width:26px;height:26px;stroke:#1f7a4d}
  .wl-err-msg{font-size:12.5px;color:#c23a33;margin:-4px 0 12px;display:none}
  .wl-err-msg.on{display:block}
  @media(max-width:760px){.wl-modal{padding:34px 22px 26px}}