/* Lead Linkz client onboarding. Brand guidelines v1.0, October 2026. */
@font-face{font-family:"Jost";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/jost-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/jost-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --void:#050505; --surface:#0D0D0D; --raised:#141414; --line:#242424;
  --bone:#F2EDE1; --muted:#8C8C8C; --green:#38D480; --green-deep:#0F7A45;
  --error:#F0555D;
  --font:"Jost",Futura,"Century Gothic",system-ui,sans-serif;
  --radius-card:18px; --radius-pill:999px;
  --glow-green:0 0 24px rgba(56,212,128,.35);
  --glow-green-hi:0 0 40px rgba(56,212,128,.5);
  --glow-gold:rgba(238,214,160,.38);
}

html{scroll-behavior:smooth;color-scheme:dark}
body{
  font-family:var(--font);background:var(--void);color:var(--bone);
  min-height:100vh;line-height:1.5;font-size:17px;-webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:60px 60px;
}
body > *{position:relative;z-index:1}
a{color:inherit}

/* Logo with warm gold glow */
.mark-wrap{position:relative;display:block;flex:none}
.mark-wrap::before{
  content:"";position:absolute;inset:-60%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--glow-gold) 0%,rgba(238,214,160,.12) 38%,rgba(238,214,160,0) 68%);
  transition:transform .25s;
}
.mark-wrap img{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.logo:hover .mark-wrap::before{transform:scale(1.18)}

/* Header: floating pill, same as leadlinkz.com */
header{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100;
  width:min(1200px,calc(100% - 32px));height:60px;padding:0 14px 0 20px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(13,13,13,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:var(--radius-pill);transition:border-color .2s;
}
header:hover{border-color:rgba(238,214,160,.22)}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.logo .mark-wrap{width:30px;height:30px}
.logo-text{font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--bone)}
.header-label{
  font-size:14px;font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0;
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:7px 16px;
}

/* Progress */
.progress-wrap{padding:112px 24px 0}
.progress-steps{display:flex;align-items:center;justify-content:center;gap:16px}
.step-item{display:flex;align-items:center;gap:12px;color:var(--muted)}
.step-dot{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:14px;font-weight:500;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  transition:background .25s,border-color .25s,color .25s;
}
.step-dot.active{background:var(--bone);border-color:var(--bone);color:var(--void);font-weight:600}
.step-dot.done{background:var(--surface);border-color:var(--green);color:var(--green);font-weight:600}
.step-label{font-size:15px;font-weight:500;white-space:nowrap}
.step-item.active .step-label{color:var(--bone)}
.step-item.done .step-label{color:var(--muted)}
.step-line{width:56px;height:1px;background:var(--line);transition:background .25s}
.step-line.done{background:var(--green)}
.meter{max-width:340px;margin:22px auto 0;text-align:center}
.meter-track{height:3px;border-radius:var(--radius-pill);background:var(--line);overflow:hidden}
.meter-fill{height:100%;width:0;border-radius:var(--radius-pill);background:var(--bone);transition:width .35s ease}
.meter-text{font-size:14px;color:var(--muted);margin-top:10px}

/* Layout */
main{padding:0 0 80px;min-height:60vh}
.container{max-width:780px;margin:0 auto;padding:48px 24px 0}
.step-panel{display:none;animation:fadeIn .4s ease}
.step-panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.section-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.eyebrow-line{width:28px;height:1px;background:var(--line)}
.eyebrow-text{font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.section-title{font-size:clamp(34px,5.2vw,48px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-bottom:18px}
.section-title span{color:var(--green)}
.section-desc{color:var(--muted);font-size:18px;max-width:620px;margin-bottom:20px}
.meta-pill{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 14px;margin-bottom:40px;
}
.meta-pill svg{width:14px;height:14px;flex:none}

/* Cards: hairline, no shadow, pointer spotlight on hover */
.card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:32px;margin-bottom:24px;transition:border-color .25s;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(56,212,128,.07),transparent 60%);
}
.card:hover{border-color:rgba(56,212,128,.28)}
.card:hover::before{opacity:1}
.card > *{position:relative}
.card-title{font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin-bottom:24px;text-transform:none;color:var(--bone);padding:0;border:0}
.card.has-error{border-color:var(--error)}
.card.has-error .card-title{color:var(--error)}
.divider{height:1px;background:var(--line);margin:32px 0}

/* Fields */
.field{margin-bottom:24px}
.field:last-child{margin-bottom:0}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
label{display:block;font-size:16px;font-weight:500;margin-bottom:10px;color:var(--bone)}
label .req,.card-title .req{color:var(--muted);font-weight:400;margin-left:2px}
label .optional{font-size:14px;font-weight:400;color:var(--muted);margin-left:6px}

input[type=text],input[type=email],input[type=url],input[type=password],input[type=search],textarea,select{
  width:100%;font:inherit;font-size:16px;color:var(--bone);
  background:var(--void);border:1px solid var(--line);border-radius:var(--radius-pill);
  height:52px;padding:0 22px;outline:none;transition:border-color .15s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
textarea{border-radius:var(--radius-card);height:auto;min-height:128px;padding:16px 22px;resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:#6A6A6A}
input:hover,textarea:hover{border-color:rgba(140,140,140,.45)}
input:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(56,212,128,.12),var(--glow-green)}
.field-hint{font-size:15px;color:var(--muted);margin-top:10px;line-height:1.5}
.card > p.field-hint{margin-top:0;margin-bottom:14px}
.field-error{display:none;font-size:14px;color:var(--error);margin-top:8px}
.field.has-error input,.field.has-error textarea{border-color:var(--error)}
.field.has-error .field-error{display:block}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}

.countries-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip-label{position:relative;display:inline-block;margin:0;cursor:pointer}
.chip-label input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}
.chip{
  display:inline-flex;align-items:center;font-size:15px;font-weight:500;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 16px;line-height:1.3;
  background:transparent;user-select:none;white-space:normal;
  transition:border-color .15s,color .15s,background .15s,box-shadow .2s;
}
.chip-label:hover .chip{border-color:rgba(238,214,160,.5);color:var(--bone);box-shadow:0 0 18px rgba(238,214,160,.16)}
.chip-label input:checked + .chip{border-color:var(--bone);background:var(--raised);color:var(--bone)}
.chip-label input:focus-visible + .chip{outline:2px solid var(--green);outline-offset:2px}
.chip-label.disabled{cursor:not-allowed}
.chip-label.disabled .chip{opacity:.35;box-shadow:none}
.chip-label.hide{display:none}

.limit-badge{font-size:14px;font-weight:400;color:var(--muted);margin-bottom:16px;display:block}
.limit-badge .count{color:var(--bone);font-weight:600}

.search-wrap{position:relative;margin-bottom:8px}
.search-wrap svg{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.search-wrap input{padding-left:48px}
.no-results{display:none;font-size:15px;color:var(--muted);margin-top:20px}

.industry-category{margin-top:28px}
.industry-category.hide{display:none}
.industry-cat-title{
  font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);
}

/* Buttons: pills, one green primary per screen */
.nav-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:32px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:inherit;font-size:17px;font-weight:600;height:52px;padding:0 30px;
  border-radius:var(--radius-pill);cursor:pointer;border:1px solid transparent;text-decoration:none;
  transition:transform .15s,border-color .15s,background .15s,box-shadow .2s;
}
.btn svg{width:16px;height:16px;transition:transform .2s}
.btn-primary,.btn-submit{background:var(--green);color:var(--void);box-shadow:var(--glow-green)}
.btn-primary:hover,.btn-submit:hover{transform:translateY(-1px);box-shadow:var(--glow-green-hi)}
.btn-primary:hover svg,.btn-submit:hover svg{transform:translateX(3px)}
.btn-secondary{background:transparent;color:var(--bone);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--muted);box-shadow:0 0 24px rgba(242,237,225,.08)}
.btn:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none}

/* Sign in */
#login-gate{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--void);
}
#login-gate::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:60px 60px;
}
#login-gate.unlocked{display:none}
.login-card{
  position:relative;width:100%;max-width:440px;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:48px 40px 40px;
}
.login-card .mark-wrap{width:68px;height:68px;margin:0 auto 34px}
.login-card .login-logo{border-radius:0;margin:0}
.login-card .login-eyebrow{font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.login-card h1{font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px;color:var(--bone)}
.login-card h1 span{color:var(--green)}
.login-card p{color:var(--muted);font-size:16px;line-height:1.5;margin-bottom:30px}
.login-card .lfield{text-align:left;margin-bottom:18px}
.login-card .lfield label{font-size:16px;font-weight:500;color:var(--bone);margin-bottom:10px}
.login-card .lfield input{
  width:100%;background:var(--void);border:1px solid var(--line);border-radius:var(--radius-pill);
  height:52px;padding:0 22px;color:var(--bone);font-family:var(--font);font-size:16px;outline:none;
}
.login-card .lfield input:focus{border-color:var(--green)}
.login-card .login-error{display:none;color:var(--error);font-size:14px;margin:4px 0 14px;text-align:left}
.login-card .login-error.show{display:block}
.login-card button{
  width:100%;margin-top:8px;font:inherit;font-size:17px;font-weight:600;height:52px;border:0;cursor:pointer;
  border-radius:var(--radius-pill);background:var(--green);color:var(--void);box-shadow:var(--glow-green);
  transition:box-shadow .2s,transform .15s;
}
.login-card button:hover{filter:none;box-shadow:var(--glow-green-hi);transform:translateY(-1px)}
.login-card .login-help{margin-top:18px;font-size:14px;color:var(--muted)}
.login-card .login-help a{color:var(--bone)}

/* Thank you */
#thank-you{display:none;text-align:center;padding:72px 0 24px;animation:fadeIn .5s ease}
#thank-you.active{display:block}
.ty-icon{
  width:72px;height:72px;margin:0 auto 28px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--glow-green);
}
.ty-icon svg{width:30px;height:30px;stroke:var(--green)}
#thank-you .section-eyebrow{justify-content:center}
#thank-you .section-desc{margin-left:auto;margin-right:auto;margin-bottom:40px}
#thank-you .section-desc strong{color:var(--bone);font-weight:600}
.next{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:620px;margin:0 auto 24px;text-align:left}
.next .card{margin:0;padding:24px}
.next .num{font-size:14px;font-weight:500;letter-spacing:.14em;color:var(--muted);margin-bottom:10px}
.next h3{font-size:19px;font-weight:600;line-height:1.3;margin-bottom:6px}
.next p{font-size:15px;color:var(--muted)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:620px;margin:0 auto 12px;text-align:left}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:22px 24px;transition:border-color .25s}
.stat:hover{border-color:rgba(56,212,128,.28)}
.stat small{display:block;font-size:15px;color:var(--muted)}
.stat strong{display:block;font-size:44px;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--green);margin:4px 0}
.stat em{font-style:normal;font-size:14px;color:var(--muted)}
.stats-note{font-size:14px;color:var(--muted);margin-bottom:36px}

/* Footer */
footer{text-align:center;padding:32px 24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
footer a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s}
footer a:hover{border-bottom-color:var(--green)}

@media (max-width:640px){
  header{padding:0 12px 0 16px}
  .field-grid,.next,.stats{grid-template-columns:1fr}
  .card{padding:24px 20px}
  .step-label{display:none}
  .header-label{display:none}
  .nav-row{flex-wrap:wrap}
  .login-card{padding:40px 24px 32px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

.draft-note{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:12px 18px;border:1px solid var(--line,#242424);border-radius:999px;background:#0D0D0D;color:#8C8C8C;font-size:14px}
.draft-note button{flex:none;background:none;border:0;color:#38D480;font:inherit;font-weight:500;cursor:pointer;padding:0}
.draft-note button:hover{text-shadow:0 0 12px rgba(56,212,128,.5)}
@media(max-width:560px){.draft-note{border-radius:18px;flex-direction:column;align-items:flex-start;gap:6px}}

/* Form logic states. The onboarding script relies on these display rules. */
.step-panel{display:none}
.step-panel.active{display:block}
#thank-you{display:none}
#thank-you.active{display:block}
.field-error{display:none}
.field.has-error .field-error{display:block}
.field.has-error input,.field.has-error textarea{border-color:var(--error)}
.card.has-error{border-color:var(--error)}
.chip-label input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0}
.chip-label.disabled .chip{opacity:.35;cursor:not-allowed}

/* Multiple ICPs: tabs are built by the script and styled like the chips */
#icp-bar{scroll-margin-top:96px}
.icp-tabs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:24px}
.icp-tab,.icp-add{
  display:inline-flex;align-items:center;gap:8px;max-width:100%;
  font:inherit;font-size:15px;font-weight:500;line-height:1.3;padding:8px 16px;
  border:1px solid var(--line);border-radius:var(--radius-pill);background:transparent;color:var(--muted);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s,box-shadow .2s;
}
.icp-tab > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.icp-tab:hover,.icp-add:hover{border-color:rgba(238,214,160,.5);color:var(--bone);box-shadow:0 0 18px rgba(238,214,160,.16)}
.icp-tab.active{border-color:var(--bone);background:var(--raised);color:var(--bone)}
.icp-tab .icp-remove{font-size:17px;line-height:1;color:var(--muted);padding:0 2px;margin-right:-4px;transition:color .15s}
.icp-tab .icp-remove:hover{color:var(--error)}
.icp-add{border-style:dashed}
.icp-tab:focus-visible,.icp-add:focus-visible{outline:2px solid var(--green);outline-offset:2px}