/* =====================================================================
   Leadlance account pages: login, signup, agency-signup, plan pickers.
   Link order:  theme.css, then auth.css.  Colours and fonts come from theme.css.
   (Not for the marketing pages: those use site.css.)
   ===================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%;touch-action:manipulation}
body{font-family:var(--font);font-size:16px;background:var(--bg);color:var(--text-2);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance;font-family:var(--font-display);color:var(--text);font-weight:800;letter-spacing:-.03em;line-height:1.05}
input,textarea,select{font-size:16px!important}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.ic{width:16px;height:16px;vertical-align:-3px;stroke-width:2}
.ic-sm{width:14px;height:14px;vertical-align:-2px}
.ic-lg{width:24px;height:24px}

/* ---------- shared form parts ---------- */
.form-group{margin-bottom:18px}
label{display:block;margin-bottom:7px;font-weight:600;font-size:14.5px;color:var(--text)}
.required{color:var(--danger)}
input[type=text],input[type=password],input[type=email],input[type=url]{width:100%;padding:13px 14px;border:1.5px solid var(--line-strong);border-radius:var(--radius);font-family:inherit;background:var(--surface);color:var(--text);transition:border-color .15s}
input::placeholder{color:var(--text-3)}
input:hover{border-color:var(--text-3)}
input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--accent-soft)}
.field-hint{color:var(--text-3);font-size:13px;margin-top:6px;line-height:1.4}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.password-wrapper{position:relative}
.password-wrapper input{padding-right:46px}
.password-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;color:var(--text-3);display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius)}
.password-toggle:hover{color:var(--text);background:var(--surface-2)}
.btn{font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;font-size:16px;font-weight:600;line-height:1;border-radius:var(--radius);border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.btn-primary{background:var(--brand);color:var(--on-brand);width:100%}
.btn-primary:hover{background:var(--brand-hover)}
.btn-primary:disabled{opacity:.6;cursor:wait}
.btn-block{width:100%}
.btn-secondary{width:100%;background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--text)}
.back-link,.forgot-link{color:var(--accent);text-decoration:none;font-weight:600;font-size:14.5px}
.back-link:hover,.forgot-link:hover{text-decoration:underline}
.back-link{display:inline-flex;align-items:center;gap:6px}
.login-error,.signup-error{display:none;align-items:center;gap:10px;background:var(--danger-dim);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);color:var(--danger);padding:12px 14px;border-radius:var(--radius);margin-bottom:18px;font-size:14.5px;font-weight:500}
.login-error.show,.signup-error.show{display:flex}

/* ---------- loading ---------- */
#loadingSpinner{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.spinner,.section-loader{width:34px;height:34px;border:3px solid var(--line-strong);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
.section-loader{margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ======================= LOGIN ======================= */
.login-screen{display:none}
.login-screen.show{display:block}
.login-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:100vh}
.login-sidebar{background:var(--band);color:#fff;padding:48px 56px;display:flex}
.sidebar-content{display:flex;flex-direction:column;width:100%;max-width:520px;margin:0 auto}
.sidebar-brand img{height:30px;width:auto}
.sidebar-main{margin:auto 0;padding:56px 0}
.sidebar-eyebrow{display:none}
.login-sidebar h1{color:#fff;font-size:clamp(2.4rem,4.2vw,3.7rem);line-height:1;letter-spacing:-.04em;margin-bottom:22px}
.login-sidebar h1 span{display:block;color:inherit;opacity:.78}
.sidebar-description{font-size:1.1rem;color:rgba(255,255,255,.82);max-width:30rem;margin-bottom:44px}
.sidebar-features{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.25)}
.sidebar-feature{display:flex;gap:14px;align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.25)}
.sidebar-feature-icon{display:none}
.sidebar-feature strong{color:#fff;font-weight:600;margin-right:10px}
.sidebar-feature span{color:rgba(255,255,255,.75);font-size:15px}
.sidebar-feature>div{display:flex;gap:6px 12px;flex-wrap:wrap;align-items:baseline}
.login-main{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.login-wrapper{width:100%;max-width:420px}
.mobile-login-logo{display:none;margin-bottom:32px}
.mobile-login-logo img{height:28px;width:auto}
.login-title{font-family:var(--font-display);font-size:2.3rem;font-weight:800;letter-spacing:-.035em;color:var(--text);line-height:1.05;margin-bottom:8px}
.login-subtitle{color:var(--text-2);margin-bottom:30px}
.login-actions{margin-top:16px}
.signup-prompt{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);color:var(--text-2);font-size:15px}
.signup-prompt a{font-weight:600}
.login-footer{margin-top:16px}

/* ======================= SIGNUP / AGENCY SIGNUP ======================= */
.page{min-height:100vh}
.layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:100vh}
.intro{background:var(--band);color:#fff;padding:48px 56px;display:flex;flex-direction:column}
.intro>*{max-width:520px;width:100%;margin-left:auto;margin-right:auto}
.intro .logo img{height:30px;width:auto}
.intro .logo{margin-bottom:auto}
.intro h1{color:#fff;font-size:clamp(2.4rem,4.2vw,3.7rem);line-height:1;letter-spacing:-.04em;margin:56px auto 22px}
.intro h1 span{color:inherit;text-shadow:none}
.intro-copy{font-size:1.1rem;color:rgba(255,255,255,.82);margin-bottom:40px}
.benefits{display:grid;border-top:1px solid rgba(255,255,255,.25);margin-bottom:auto!important}
.benefit{display:block;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.25)}
.benefit-icon{display:none}
.benefit strong{display:block;color:#fff;font-weight:600;margin-bottom:2px}
.benefit span{color:rgba(255,255,255,.75);font-size:15px}
.signup-box{background:var(--bg);padding:48px 56px;align-self:center;width:100%;max-width:560px;margin:0 auto}
.signup-header{margin-bottom:28px}
.signup-header h2{font-size:2.3rem;letter-spacing:-.035em;margin-bottom:8px}
.signup-header p{color:var(--text-2)}
.application-note{display:flex;gap:10px;background:var(--surface-2);border-radius:var(--radius);padding:12px 14px;margin:16px 0 20px;color:var(--text-2);font-size:14px}
.login-link{text-align:center;color:var(--text-2);font-size:15px;margin-top:22px}
.login-link a{font-weight:600}
.signup-box .back-link{margin-top:22px}
.verify-screen{display:none}
.verify-icon{width:48px;height:48px;margin:0 0 20px;border-radius:var(--radius);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.verify-screen h2{font-size:2rem;margin-bottom:10px}
.verify-screen p{color:var(--text-2);margin-bottom:24px}
.verify-email{color:var(--text);font-weight:700}
#su_code{height:54px;text-align:center;letter-spacing:6px;font-family:var(--mono);font-size:1.35rem!important}

/* ======================= PLAN PICKERS ======================= */
.plan-picker-screen{display:none;min-height:100vh;background:var(--bg)}
.plan-picker-screen.show{display:block}
.plan-picker-box{max-width:1180px;margin:0 auto;padding:36px 28px 72px}
.pp-logout{margin-bottom:36px}
.plan-picker-title{font-family:var(--font-display);font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:800;letter-spacing:-.04em;color:var(--text);line-height:1;margin-bottom:14px}
.plan-picker-subtitle{max-width:46rem;color:var(--text-2);font-size:1.1rem;margin-bottom:30px}
.discount-banner{display:none;align-items:center;gap:12px;background:var(--accent-soft);border-left:4px solid var(--brand);padding:14px 18px;margin-bottom:26px;color:var(--text);font-size:15px}
.discount-banner.show{display:flex}
.discount-code{font-weight:700}
.discount-banner.winback{gap:20px;padding:18px 22px}
.wb-badge{display:flex;flex-direction:column;align-items:center;line-height:1;color:var(--accent);font-family:var(--font-display);font-weight:700}
.wb-badge span{font-size:2.2rem;letter-spacing:-.04em}
.wb-badge small{font-size:12px;letter-spacing:.04em}
.wb-body{flex:1}
.wb-title{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--text);letter-spacing:-.02em}
.wb-text{color:var(--text-2);font-size:15px}
.wb-timer{font-weight:700;color:var(--accent);white-space:nowrap}
.pp-tabs{gap:4px;margin-bottom:24px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.pp-tab{font-family:inherit;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:12px 18px;font-size:16px;font-weight:600;color:var(--text-3);cursor:pointer}
.pp-tab:hover{color:var(--text)}
.pp-tab.active{color:var(--text);border-bottom-color:var(--brand)}
.pp-save{margin-left:8px;font-size:12.5px;font-weight:700;color:var(--accent)}
#ppLoading,#rppLoading{text-align:center;color:var(--text-3)}
.pp-grid{display:grid;grid-template-columns:repeat(var(--pp-cols,3),minmax(0,1fr));gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);border-radius:var(--radius-lg);overflow:hidden}
.pp-cell{display:contents}
.pp-tail{display:none}
.pp-empty{grid-column:1/-1;background:var(--surface);padding:28px;color:var(--text-3)}
.pp-card{position:relative;display:flex;flex-direction:column;background:var(--surface);padding:32px 26px 28px}
.pp-card-popular{background:var(--brand);color:var(--on-brand)}
.pp-card-popular .pp-name,.pp-card-popular .pp-price,.pp-card-popular strong{color:var(--on-brand)}
.pp-card-popular .pp-description,.pp-card-popular .pp-feature,.pp-card-popular .pp-discount-note{color:color-mix(in srgb,var(--on-brand) 84%,transparent)}
.pp-card-popular .pp-feature::before{background:var(--on-brand)}
.pp-popular-badge,.pp-trial-badge{align-self:flex-start;font-size:13px;font-weight:700;padding:3px 9px;border-radius:var(--radius-sm);margin-bottom:12px}
.pp-popular-badge{background:var(--on-brand);color:var(--brand)}
.pp-trial-badge{background:var(--accent-soft);color:var(--accent)}
.pp-card-popular .pp-trial-badge{background:color-mix(in srgb,var(--on-brand) 18%,transparent);color:var(--on-brand)}
.pp-popular-badge svg{display:none}
.pp-badge-slot{height:28px;margin-bottom:12px}
.pp-name{font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:var(--text);letter-spacing:-.025em}
.pp-description{font-size:15px;color:var(--text-2);margin:6px 0 18px;min-height:2.9em;line-height:1.45}
.pp-price{font-family:var(--font-display);font-size:3rem;font-weight:800;color:var(--text);letter-spacing:-.045em;line-height:1.05;margin-bottom:6px}
.pp-price span{font-family:var(--font);font-size:.95rem;font-weight:500;letter-spacing:0;opacity:.7;margin-left:4px}
.pp-price-discounted .pp-price-was{text-decoration:line-through;opacity:.5;font-size:1.6rem;margin-right:10px;margin-left:0}
.pp-discount-note{font-size:13.5px;font-weight:600;color:var(--accent);margin-bottom:6px}
.pp-feature{position:relative;padding-left:20px;margin-top:9px;font-size:15px;color:var(--text-2);line-height:1.4}
.pp-feature::before{content:'';position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pp-feature.is-off{color:var(--text-3)}
.pp-feature.is-off::before{background:var(--line-strong)}
.pp-feature strong{color:inherit}
.pp-cta{font-family:inherit;margin-top:22px;width:100%;padding:13px 18px;border-radius:var(--radius);border:1.5px solid transparent;background:var(--brand);color:var(--on-brand);font-size:15.5px;font-weight:600;cursor:pointer}
.pp-card:not(.pp-card-popular) .pp-cta:not(:disabled):hover{background:var(--brand-hover)}
.pp-cta:disabled{background:transparent;border-color:var(--line-strong);color:var(--text-3);cursor:default}
.pp-cta-secondary{background:transparent;border-color:var(--line-strong);color:var(--text);margin-top:10px}
.pp-cta-secondary:hover{border-color:var(--text)!important;background:transparent!important}
.pp-card-popular .pp-cta{background:var(--on-brand);color:var(--brand)}
.pp-card-popular .pp-cta-secondary{background:transparent;border-color:color-mix(in srgb,var(--on-brand) 55%,transparent);color:var(--on-brand)}
.pp-cta .ic-sm{display:none}
.pp-compare-title{font-size:1.7rem;margin:56px 0 14px}
.pp-compare-wrap{overflow-x:auto}
.pp-compare{width:100%;border-collapse:collapse;min-width:560px;font-size:15px}
.pp-compare th{text-align:left;font-family:var(--font-display);font-size:1.1rem;font-weight:800;color:var(--text);padding:12px 14px;border-bottom:2px solid var(--text)}
.pp-compare td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--text-2)}
.pp-compare td:first-child{color:var(--text);font-weight:500}
.pp-yes{color:var(--accent)}
.pp-no{color:var(--text-3)}
.pp-skip-note{margin-top:30px;color:var(--text-3);font-size:15px;max-width:52rem}
.pp-skip-note a{font-weight:600}

/* ======================= MODAL ======================= */
.modal{display:none;position:fixed;inset:0;background:var(--overlay);z-index:2000;align-items:center;justify-content:center;padding:16px}
.modal.active{display:flex}
.modal-content{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-lg);max-width:460px;width:100%;padding:30px;box-shadow:var(--shadow-lg)}
.modal-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.modal-title{font-size:1.5rem;display:flex;align-items:center;gap:10px}
.modal-title .ic-lg{display:none}
.close-modal{background:none;border:0;color:var(--text-3);cursor:pointer;width:34px;height:34px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center}
.close-modal:hover{background:var(--surface-2);color:var(--text)}

/* ======================= RESPONSIVE ======================= */
@media (max-width:980px){
  .pp-grid{grid-template-columns:1fr}
  .pp-description{min-height:0}
}
@media (max-width:860px){
  .login-layout,.layout{grid-template-columns:1fr;min-height:0}
  .login-sidebar{display:none}
  .mobile-login-logo{display:block}
  .login-main{align-items:flex-start;padding:36px 22px 56px;min-height:100vh}
  .intro{padding:32px 22px 36px}
  .intro .logo{margin-bottom:0}
  .intro h1{margin:32px 0 14px;font-size:2.6rem}
  .intro-copy{margin-bottom:24px}
  .benefits{display:none}
  .signup-box{padding:36px 22px 56px;max-width:none}
}
@media (max-width:520px){
  .form-row{grid-template-columns:1fr;gap:0}
  .plan-picker-box{padding:24px 18px 56px}
  .discount-banner.winback{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.spinner,.section-loader{animation-duration:2s}}

/* plan cards: keep rows aligned whatever the text length or badges */
.pp-popular-badge{position:absolute;top:0;left:26px;margin:0;border-radius:0 0 var(--radius-sm) var(--radius-sm)}
.pp-card > .pp-feature:last-of-type{margin-bottom:22px}
.pp-cta{margin-top:auto;min-height:48px;box-sizing:border-box}
.pp-cta-secondary{margin-top:10px}
/* when a row has a trial card (two buttons), give one-button cards matching space so every "Buy Now" lines up */
.pp-grid:has(.pp-cta-secondary) .pp-card:not(:has(.pp-cta-secondary)) .pp-cta{margin-bottom:58px}
.pp-cta{height:48px;min-height:0;padding-top:0;padding-bottom:0}
.pp-trial-badge,.pp-badge-slot{box-sizing:border-box;height:28px;display:flex;align-items:center;margin-bottom:12px}
.pp-trial-badge{align-self:flex-start}