/* LeadSnap brand (guidelines v1.0): Inter for type, the logo in the sidebar. Colours live in App\Support\Branding. */
@font-face { font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap; src:url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations"), url(/fonts/inter-latin-ext-wght-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap; src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"), url(/fonts/inter-latin-wght-normal.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; }
body, button, input, select, textarea { font-family:Inter,Arial,"Segoe UI",system-ui,-apple-system,sans-serif; }

/* LeadSnap logo in the sidebar when the company has not uploaded its own: the full logo when the menu is open, the mark on the icon rail.
   Light surfaces get the standard artwork; dark surfaces the reverse (white lettering) version, as the guidelines require. */
.brand img.ls { display:none; }
body:not(.collapsed) .brand:has(img.ls) { flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:6px; }
body:not(.collapsed) .brand img.ls-full.ls-light { display:block; height:30px; width:auto; max-width:100%; }
body.collapsed .brand img.ls-mark.ls-light { display:block; width:46px; height:46px; }
[data-theme=dark] body:not(.collapsed) .brand img.ls-full.ls-light, [data-theme=dark] body.collapsed .brand img.ls-mark.ls-light { display:none; }
[data-theme=dark] body:not(.collapsed) .brand img.ls-full.ls-dark { display:block; height:30px; width:auto; max-width:100%; }
[data-theme=dark] body.collapsed .brand img.ls-mark.ls-dark { display:block; width:46px; height:46px; }
@media (max-width:900px) { body .brand:has(img.ls) { flex-direction:column; align-items:flex-start; } .brand img.ls-mark { display:none !important; } .brand img.ls-full.ls-light { display:block; height:30px; width:auto; } [data-theme=dark] .brand img.ls-full.ls-light { display:none; } [data-theme=dark] .brand img.ls-full.ls-dark { display:block; height:30px; width:auto; } }

/* Page headers: a calm, branded banner instead of a greeting */
.dh-eyebrow, .p2-eyebrow, .pd-eyebrow { display:block; font-size:11.5px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.phero2 { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); gap:30px; align-items:end; padding:34px 38px 30px 42px; border-radius:26px; color:#fff; background:linear-gradient(125deg,var(--nav) 0%,var(--nav-2) 100%); box-shadow:0 22px 46px -26px rgba(7,31,84,.6); }
.phero2::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(#00b5ad,#2dd4cc); }
.phero2::after { content:""; position:absolute; right:-36px; bottom:-48px; width:360px; height:360px; background:url(/brand/leadsnap-mark-reverse.png) center/contain no-repeat; opacity:.06; pointer-events:none; }
.phero2 > * { position:relative; z-index:1; }
.phero2 .p2-eyebrow { color:#6fe3db; }
.phero2 h1 { margin:8px 0 8px; color:#fff; font-size:36px; letter-spacing:-.03em; line-height:1.1; }
.phero2 p { margin:0 0 20px; max-width:560px; color:rgba(255,255,255,.8); line-height:1.6; font-size:14.5px; }
.phero2 .phero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.phero2 .cta { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; background:#fff; color:#071f54; font-weight:700; text-decoration:none; }
.phero2 .cta.ghost2 { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.3); }
.phero2 .cta:hover { text-decoration:none; transform:translateY(-1px); }
.p2-stats { display:grid; gap:16px; }
.p2-big span { display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.p2-big b { display:block; font-size:42px; line-height:1.1; margin:6px 0 4px; font-weight:780; letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums; }
.p2-big em { font-style:normal; font-size:12px; color:rgba(255,255,255,.65); }
.p2-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18); }
.p2-row b { display:block; font-size:22px; font-weight:750; color:#fff; font-variant-numeric:tabular-nums; } .p2-row span { font-size:11.5px; color:rgba(255,255,255,.7); }
@media (max-width:900px) { .phero2 { grid-template-columns:1fr; padding:24px 22px 22px 28px; } .phero2 h1 { font-size:28px; } .p2-big b { font-size:34px; } }
.dhead h1 { margin-top:4px; }

/* Platform: browsing a company's leads, contacts and events (read-only) */
.pd-head { margin:6px 2px 14px; } .pd-head h1 { margin:4px 0 4px; } .pd-head p { margin:0; max-width:720px; }
.pd-filters { margin-top:0; }
.pd-co { font-weight:600; color:var(--ink); } .pd-co:hover { color:var(--teal); }
.pd-hero { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:8px; padding:22px 24px; }
.pd-hero-main { flex:1; min-width:240px; } .pd-hero h1 { margin:0; font-size:26px; } .pd-line { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:4px 0; }
.pd-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pd-side { text-align:right; display:grid; gap:2px; } .pd-side b { font-size:16px; } .pd-side small { color:var(--mute); }
.pd-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; } @media (max-width:1000px) { .pd-cols { grid-template-columns:1fr; } }
.pd-row { padding:9px 0; border-bottom:1px solid var(--line); } .pd-row:last-child { border-bottom:0; }
.pd-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.pd-tiles a { display:grid; gap:2px; padding:16px 18px; border-radius:16px; border:1px solid var(--line); background:var(--card); color:var(--ink); text-decoration:none; border-left:5px solid var(--teal); transition:transform .12s, box-shadow .15s; }
.pd-tiles a:hover { transform:translateY(-2px); box-shadow:var(--shadow); text-decoration:none; }
.pd-tiles b { font-size:28px; font-weight:780; letter-spacing:-.02em; line-height:1.1; } .pd-tiles span { font-weight:650; } .pd-tiles em { font-style:normal; font-size:12.5px; color:var(--mute); }

/* Platform: company directory and one company's data workspace */
.pd-dir { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-top:14px; }
.pd-dc { display:grid; gap:14px; padding:18px; border-radius:18px; border:1px solid var(--line); background:var(--card); color:var(--ink); text-decoration:none; box-shadow:var(--shadow); transition:transform .12s, border-color .15s; }
.pd-dc:hover { transform:translateY(-2px); border-color:var(--teal); text-decoration:none; }
.pd-dc-top { display:flex; gap:12px; align-items:center; } .pd-dc-top > div { flex:1; min-width:0; } .pd-dc-top b { display:block; font-size:16px; } .pd-dc-top small { color:var(--mute); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-dc-nums { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pd-dc-nums strong { display:block; font-size:20px; font-weight:760; letter-spacing:-.02em; } .pd-dc-nums span { font-size:11.5px; color:var(--mute); }
.pd-dc-foot { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; font-size:12.5px; }
.pd-co-head { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:8px; padding:22px 24px; }
.pd-actions { margin-left:auto; }
.pd-tabs { display:flex; gap:6px; margin:16px 0 4px; border-bottom:1px solid var(--line); overflow-x:auto; }
.pd-tabs a { display:inline-flex; align-items:center; gap:8px; padding:11px 16px; font-weight:650; color:var(--mute); text-decoration:none; border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.pd-tabs a:hover { color:var(--ink); } .pd-tabs a.on { color:var(--teal); border-bottom-color:var(--teal); }
.pd-tabs em { font-style:normal; font-size:12px; font-weight:700; padding:1px 8px; border-radius:99px; background:var(--soft); color:var(--mute); } .pd-tabs a.on em { background:var(--teal-soft); color:var(--teal); }
.pd-bar { display:grid; grid-template-columns:150px 1fr 40px; gap:12px; align-items:center; padding:6px 0; } .pd-bar strong { text-align:right; }
.pd-track { height:8px; border-radius:99px; background:var(--soft); overflow:hidden; } .pd-track i { display:block; height:100%; border-radius:99px; background:var(--teal); min-width:0; }

.plan-del { border:0; background:none; padding:0; font:inherit; font-weight:650; color:var(--bad); cursor:pointer; } .plan-del:hover { text-decoration:underline; }

/* Dropdowns: the open list is styled as part of the app (Chrome and Edge 135+, via appearance: base-select). Other browsers keep their own list.
   Multi-selects and list boxes are left alone. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]), select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  select:not([multiple]):not([size]) { display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; }
  select:not([multiple]):not([size])::picker-icon { content:""; width:18px; height:18px; flex:none; background:var(--mute); transition:rotate .18s, background .15s;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat; }
  select:not([multiple]):not([size]):hover::picker-icon, select:not([multiple]):not([size]):focus-visible::picker-icon { background:var(--teal); }
  select:not([multiple]):not([size]):open::picker-icon { rotate:180deg; background:var(--teal); }

  select:not([multiple]):not([size])::picker(select) {
    margin-block:6px; padding:6px; max-block-size:min(340px,60vh); overflow-y:auto; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink);
    box-shadow:0 18px 44px -12px rgba(7,31,84,.28), 0 2px 8px rgba(7,31,84,.08);
    opacity:0; translate:0 -6px; transition:opacity .14s, translate .14s, display .14s allow-discrete, overlay .14s allow-discrete; }
  select:not([multiple]):not([size])::picker(select):popover-open { opacity:1; translate:0 0; }
  @starting-style { select:not([multiple]):not([size])::picker(select):popover-open { opacity:0; translate:0 -6px; } }

  select:not([multiple]):not([size]) option { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font:inherit; font-size:14.5px; color:var(--ink); cursor:pointer; }
  select:not([multiple]):not([size]) option:hover, select:not([multiple]):not([size]) option:focus-visible { background:var(--soft); outline:none; }
  select:not([multiple]):not([size]) option:checked { background:var(--teal-soft); color:var(--teal); font-weight:650; }
  select:not([multiple]):not([size]) option::checkmark { order:2; margin-left:auto; content:"\2713"; font-weight:800; color:var(--teal); }
  select:not([multiple]):not([size]) option[value=""]:not(:checked) { color:var(--mute); }
  select:not([multiple]):not([size]) option:disabled { opacity:.45; cursor:not-allowed; }
  select:not([multiple]):not([size]) hr { margin:6px 8px; border:0; border-top:1px solid var(--line); }
}

/* checkboxes and radios: branded boxes instead of the browser default */
input[type=checkbox], input[type=radio] { appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:none; margin:0; border:1.5px solid var(--line); background:var(--card); display:inline-grid; place-content:center; vertical-align:-4px; cursor:pointer; transition:background .15s, border-color .15s, box-shadow .15s; }
input[type=checkbox] { border-radius:6px; } input[type=radio] { border-radius:50%; }
input[type=checkbox]:hover, input[type=radio]:hover { border-color:var(--teal); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline:0; box-shadow:0 0 0 3px var(--teal-soft); border-color:var(--teal); }
input[type=checkbox]:checked, input[type=checkbox]:indeterminate, input[type=radio]:checked { background:var(--teal); border-color:var(--teal); }
input[type=checkbox]:checked::after { content:""; width:10px; height:10px; background:#fff; clip-path:polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }
input[type=checkbox]:indeterminate::after { content:""; width:9px; height:2px; background:#fff; border-radius:1px; }
input[type=radio]:checked::after { content:""; width:7px; height:7px; border-radius:50%; background:#fff; }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity:.45; cursor:not-allowed; }

/* date and time fields: follow the theme, brand the picker icon and calendar highlight */
input[type=date], input[type=datetime-local], input[type=time], input[type=month] { color-scheme:light; accent-color:var(--teal); }
:root[data-theme=dark] input[type=date], :root[data-theme=dark] input[type=datetime-local], :root[data-theme=dark] input[type=time], :root[data-theme=dark] input[type=month] { color-scheme:dark; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { cursor:pointer; border-radius:6px; padding:3px; opacity:.75; }
input[type=date]::-webkit-calendar-picker-indicator:hover, input[type=datetime-local]::-webkit-calendar-picker-indicator:hover, input[type=time]::-webkit-calendar-picker-indicator:hover { opacity:1; background-color:var(--teal-soft); }
input::-webkit-datetime-edit-fields-wrapper { padding:0; } input::-webkit-datetime-edit-field:focus { background:var(--teal); color:#fff; border-radius:4px; outline:0; }

/* flatpickr calendar in the brand look (light and dark) */
.flatpickr-calendar { font-family:inherit; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:0 18px 44px rgba(7,31,84,.18); padding:6px; width:auto; }
.flatpickr-calendar:before, .flatpickr-calendar:after { display:none; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-current-month input.cur-year, .flatpickr-current-month .flatpickr-monthDropdown-months { color:var(--ink); fill:var(--ink); background:transparent; font-weight:700; }
.flatpickr-current-month .flatpickr-monthDropdown-months option { background:var(--card); color:var(--ink); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color:var(--mute); fill:var(--mute); border-radius:10px; } 
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background:var(--teal-soft); } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill:var(--teal); }
span.flatpickr-weekday { color:var(--mute); font-weight:650; font-size:12px; background:transparent; }
.flatpickr-day { color:var(--ink); border-radius:10px; border:0; font-weight:500; max-width:none; height:38px; line-height:38px; }
.flatpickr-day:hover, .flatpickr-day:focus { background:var(--soft); border:0; }
.flatpickr-day.today { border:0; box-shadow:inset 0 0 0 1.5px var(--teal); background:transparent; } .flatpickr-day.today:hover { background:var(--teal-soft); color:var(--ink); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { background:var(--teal); border:0; color:#fff; font-weight:700; box-shadow:none; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled { color:var(--mute); opacity:.55; }
.flatpickr-time { border-top:1px solid var(--line) !important; max-height:50px; } .flatpickr-time input, .flatpickr-time .flatpickr-am-pm, .flatpickr-time .flatpickr-time-separator { color:var(--ink); background:transparent; font-weight:650; }
.flatpickr-time input:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus { background:var(--soft); }
.numInputWrapper span.arrowUp:after { border-bottom-color:var(--mute); } .numInputWrapper span.arrowDown:after { border-top-color:var(--mute); } .numInputWrapper:hover { background:var(--soft); }
.flatpickr-months { align-items:center; padding:4px 0 2px; } .flatpickr-months .flatpickr-month { height:36px; } .flatpickr-current-month { display:flex; align-items:center; justify-content:center; gap:6px; padding:0; height:36px; line-height:1; font-size:15px; }
.flatpickr-current-month .flatpickr-monthDropdown-months { height:30px; font-size:15px; padding:0 6px; border-radius:8px; appearance:auto; } .flatpickr-current-month input.cur-year { font-size:15px; height:30px; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { height:36px; top:2px; display:flex; align-items:center; }

/* every field type a form can hold gets the same look, so custom fields (url, phone, time, lists, files) match the built-in ones */
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=color]):not([type=range]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image])) { padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font:inherit; max-width:100%; transition:border-color .15s, box-shadow .15s; }
:where(input)::placeholder, :where(textarea)::placeholder { color:var(--mute); opacity:.8; }
.fgrid input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), .fgrid select:not([multiple]):not([size]) { min-height:44px; }
select[multiple], select[size]:not([size="1"]) { padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font:inherit; outline:0; scrollbar-width:thin; }
select[multiple]:focus, select[size]:not([size="1"]):focus { border-color:var(--teal); box-shadow:var(--ring); }
select[multiple] option, select[size]:not([size="1"]) option { padding:8px 10px; border-radius:8px; margin:1px 0; cursor:pointer; }
select[multiple] option:hover, select[size]:not([size="1"]) option:hover { background:var(--soft); }
select[multiple] option:checked, select[size]:not([size="1"]) option:checked { background:var(--teal-soft) linear-gradient(var(--teal-soft), var(--teal-soft)); color:var(--teal); font-weight:650; }
input[type=file] { max-width:100%; color:var(--mute); font:inherit; font-size:14px; }
input[type=file]::file-selector-button { margin-right:10px; padding:8px 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font:inherit; font-weight:600; cursor:pointer; transition:border-color .15s, background .15s; }
input[type=file]::file-selector-button:hover { border-color:var(--teal); background:var(--teal-soft); }
input[type=color] { width:44px; height:36px; padding:2px; border:1px solid var(--line); border-radius:10px; background:var(--card); cursor:pointer; }
input[type=range] { accent-color:var(--teal); }
textarea { min-height:90px; line-height:1.5; resize:vertical; }