/* ─── Brand tokens ────────────────────────────────────────────────────────── */
:root {
  --color-primary:       #334155; /* slate-700 */
  --color-primary-dark:  #1e293b; /* slate-800 */
  --color-primary-light: #f1f5f9; /* slate-100 */
  /* THE ACTION COLOUR. Everything clickable, and nothing else.
     This was #334155 — the same value as --color-primary — which meant the
     brand, the body links, the nav and every primary button were one colour
     and none of them read as an action.
     Blue rather than a warm hue on purpose: --color-error-text (#dc2626) and
     --color-success-text (#15803d) share a screen with this in the leads
     table, and an accent near either of them makes "act" and "problem"
     compete. Blue is far from both in hue. */
  --color-accent:        #244666;
  --color-accent-dark:   #065eac;
  --color-accent-wash:   #e8f2fc;

  --color-bg:            #f8fafc;
  --color-surface:       #ffffff;
  --color-border:        #e2e8f0;
  --color-border-hover:  #d9dfe7;

  --color-text:          #0f172a;
  --color-text-muted:    #464e5a;
  --color-text-subtle:   #a57a71;

  --color-success-bg:    #f0fdf4;
  --color-success-border:#bbf7d0;
  --color-success-text:  #15803d;

  --color-error-bg:      #fef2f2;
  --color-error-border:  #fecaca;
  --color-error-text:    #dc2626;

  --color-focus-ring:    #64748b;

  --radius-sm:  3px;
  --radius-md:  5px;
  --radius-lg:  10px;

  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / .07), 0 1px 2px -1px rgb(0 0 0 / .07);
}

/* ─── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Layout ──────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

main { flex: 1; }

/* ─── Navbar ──────────────────────────────────────────────────────────────── */
.navbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
}

.navbar__brand {
  display: block;
  overflow: hidden;
}
.navbar__brand:hover { text-decoration: none; color: var(--color-primary); }

.navbar__brand img{
  display: block;
  max-height: 40px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: .875rem;
}

.navbar__links a,
.navbar__links button {
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .875rem;
  padding: 0;
  font-weight: 600;
}
.navbar__links a:hover,
.navbar__links button:hover {
  color: var(--color-text);
  text-decoration: none;
}

/* Full-width tap target on mobile. On desktop this is display:none, which
   removes it from the tab order as well as from view. */
.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.navbar__toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text-muted);
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.navbar__toggle--open .navbar__toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navbar__toggle--open .navbar__toggle-bar:nth-child(2) { opacity: 0; }
.navbar__toggle--open .navbar__toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* The logout form is a flex child of .navbar__links and would otherwise
   introduce its own block box, breaking the gap rhythm. */
.navbar__logout { display: flex; align-items: center; }

/* .btn--primary is width:100% by default, which is wrong inside a nav bar.
   Replaces the inline style="width:auto;padding:.45rem 1rem" that used to sit
   on this element — inline styles are one of the things the enforcing CSP
   will have to account for. */
.btn--nav {
  width: auto !important;
  padding: .45rem 1rem !important;
  font-size: .8125rem;
}

/* Visually hidden until focused. Without it a keyboard user tabs through the
   whole navigation on every page before reaching the content. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .625rem 1rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 600;
}
.skip-link:focus {
  left: .5rem;
  top: .5rem;
  text-decoration: none;
}

@media (max-width: 900px) {
  .navbar__toggle { display: flex; }
  .navbar__inner { flex-wrap: wrap; }

  .navbar__links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    padding: .75rem 0 .25rem;
    margin-top: .75rem;
    border-top: 1px solid var(--color-border);
  }
  .navbar__links--open { display: flex; }

  /* 44px minimum height. A 14px link with no padding is a target most
     people miss on a phone. */
  .navbar__links a,
  .navbar__links button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    font-size: .9375rem;
  }
  .navbar__logout { width: 100%; }
  .btn--nav { margin-top: .5rem; }
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 3rem 1.25rem 1.5rem;
}

.site-footer__inner {
  max-width: 1160px;
  margin: 0 auto 2.5rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
}

.site-footer__name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--color-text);
  margin-bottom: .625rem;
}

.site-footer__blurb {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 20rem;
  margin: 0;
}

/* <h2> in the markup, because a footer column heading is a heading — but it
   must not look like one, so the visual weight comes down here rather than
   the element being downgraded to a <span>. */
.site-footer__head {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin: 0 0 .875rem;
}

.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin-bottom: .5rem; }
.site-footer__col a {
  font-size: .875rem;
  color: var(--color-text-muted);
}
.site-footer__col a:hover { color: var(--color-text); text-decoration: none; }

.site-footer__legal {
  max-width: 1160px;
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  font-size: .8125rem;
  color: var(--color-text-subtle);
}

@media (max-width: 860px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ─── Auth card ───────────────────────────────────────────────────────────── */
.auth-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1.25rem;
  min-height: calc(100vh - 120px);
}

.auth-card {
  width: 100%;
  max-width: 420px;
}

.auth-card__title {
  font-size: 1.375rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.75rem;
  color: var(--color-text);
  letter-spacing: -.02em;
}

.auth-card__body {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}

.auth-card__footer {
  margin-top: 1.25rem;
  text-align: center;
  font-size: .875rem;
  color: var(--color-text-muted);
}

/* ─── Form elements ───────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.1rem; }

.form-label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: .3rem;
}

.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .3rem;
}

.form-input {
  width: 100%;
  padding: .5625rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: .875rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}

.form-input:focus {
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 3px rgb(100 116 139 / .15);
}

.form-input--with-icon { padding-right: 2.5rem; }

.form-hint {
  margin-top: .25rem;
  font-size: .75rem;
  color: var(--color-text-subtle);
}

/* Checkbox row — Module 10's registration consent checkbox. No checkbox
   existed anywhere in the app before this, so nothing to reuse. */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: 1.1rem;
}

.form-check input[type="checkbox"] {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: .2rem;
  accent-color: var(--color-accent);
}

.form-check label {
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.form-check label a{
  font-weight: 700;
}

/* Password field wrapper */
.input-wrap { position: relative; }

.input-wrap__toggle {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 .65rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-subtle);
  transition: color .15s;
}
.input-wrap__toggle:hover { color: var(--color-text-muted); }
.input-wrap__toggle svg { width: 1rem; height: 1rem; }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .625rem 1.25rem;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .15s, color .15s, box-shadow .15s;
  text-decoration: none;
}

.btn--primary {
  background: var(--color-accent) !important;
  color: #fff !important;
  width: 100%;
  padding: .6875rem 1.25rem;
}
/* Darker on hover, not lighter. The previous value was --color-text-subtle,
   which is lighter than the resting state — a button that fades when you
   point at it reads as disabled. */
.btn--primary:hover {
  background: var(--color-accent-dark) !important;
  text-decoration: none;
  color: #fff !important;
}
.btn--primary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* The variant four views were already written against but which never
   existed. Bare `.btn` sets layout only — inline-flex, padding, radius — so
   an element with `class="btn"` and no modifier renders as padded text in the
   default link colour. That is why "New search", "Show all" and "Switch to
   Starter" have looked unfinished: they were asking for a style that was
   never written.

   Quiet on purpose. These sit beside primary actions, and two solid buttons
   competing in one row means neither reads as the main thing to do. */
.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  width: auto;
}

.btn--secondary:hover {
  background: var(--color-primary-light);
  border-color: var(--color-border-hover);
  color: var(--color-text);
  /* Anchors get an underline on hover from the base `a` rule. A button that
     underlines on hover reads as a link that happens to have a border. */
  text-decoration: none;
}

.btn--secondary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Toolbar sizing. A size modifier rather than one class per page: the export
   button on /leads and the one on a search results page are the same control
   and should not drift apart because they were styled in two places. */
.btn--sm {
  padding: .4rem .85rem;
  font-size: .8125rem;
  width: auto;
}

/* ─── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
  padding: .65rem .875rem;
  border-radius: var(--radius-md);
  font-size: .875rem;
  margin-bottom: 1.1rem;
  border: 1px solid transparent;
}

.alert--error {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
}

.alert--success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}

/* ─── Dashboard ───────────────────────────────────────────────────────────── */
.dashboard { padding: 2.5rem 1.25rem; max-width: 1200px; margin: 0 auto; }

.dashboard__heading {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: .25rem;
}

.dashboard__sub {
  font-size: .875rem;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  display: block;
}

.card__label {
  font-size: .8125rem;
  color: var(--color-text-muted);
  margin-bottom: .25rem;
}

.card__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -.03em;
}

.card__value--sm { font-size: 1.25rem; }

/* Auto-fit rather than a fixed column count: the same rule handles four
   cards on a laptop and one per row on a phone, with no media query. */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.dash-card { display: flex; flex-direction: column; }

.dash-card__foot {
  font-size: .75rem;
  color: var(--color-text-muted);
  margin-top: .5rem;
}

.dash-card__foot a { color: var(--color-primary); }
.dash-card__foot a:hover { text-decoration: underline; }

/* The primary action. Sits above the statistics because a customer arriving
   here wants to search, not to read a summary. */
.dash-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.dash-cta__title { font-weight: 600; margin-bottom: .25rem; }

.dash-cta__sub {
  font-size: .8125rem;
  color: var(--color-text-muted);
}

/* width:auto overrides the full-width .btn--primary used on forms. */
.dash-cta__btn { width: auto; padding: .6rem 1.5rem; flex-shrink: 0; }

.credit-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
  margin-top: .75rem;
}

/* Transitions width so the bar animates when the page is re-rendered after a
   search rather than jumping. */
.credit-bar__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width .3s ease;
}

.credit-bar__fill--low { background: var(--color-error-text); }

.dash-note {
  font-size: .8125rem;
  color: var(--color-text-muted);
  padding: 1rem 0;
  border-top: 1px solid var(--color-border);
}

.text-muted { color: var(--color-text-muted); font-size: .875rem; margin-top: 2rem; }

/* ─── Utilities ───────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.link-small { font-size: .75rem; color: var(--color-primary); }
.link-small:hover { text-decoration: underline; }

/* ─── Pricing page ────────────────────────────────────────────────────────── */
.pricing-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 4rem;
}

.pricing-hero {
  text-align: center;
  margin-bottom: 3rem;
}

.pricing-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: .75rem;
}

.pricing-headline {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.pricing-sub {
  font-size: .9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

@media (max-width: 600px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-headline { font-size: 1.5rem; }
}

.plan-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.plan-card--featured {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-card);
}

.plan-card--active {
  background: var(--color-primary-light);
}

.plan-card__badge {
  position: absolute;
  top: -1px;
  right: 1.5rem;
  background: var(--color-primary);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .65rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.plan-card__header { margin-bottom: 1.5rem; }

.plan-card__name {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: .5rem;
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  margin-bottom: .25rem;
}

.plan-card__amount {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--color-text);
}

.plan-card__period {
  font-size: .875rem;
  color: var(--color-text-muted);
}

.plan-card__credits {
  font-size: .8125rem;
  color: var(--color-text-muted);
}

.plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  flex: 1;
}

.plan-card__features li {
  font-size: .875rem;
  color: var(--color-text-muted);
  padding: .35rem 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.plan-card__features li::before {
  content: '✓';
  color: var(--color-primary);
  font-weight: 700;
  font-size: .75rem;
  flex-shrink: 0;
}

.plan-card__features li:last-child { border-bottom: none; }

.plan-card__action { margin-top: auto; }

.plan-badge {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .35rem .75rem;
}

.plan-badge--muted {
  color: var(--color-text-muted);
  background: transparent;
}

.pricing-note {
  text-align: center;
  font-size: .8125rem;
  color: var(--color-text-subtle);
}

/* ─── Billing page ────────────────────────────────────────────────────────── */
.billing-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 3rem 1.25rem;
}

.billing-inner { display: flex; flex-direction: column; gap: 1.25rem; }

.billing__heading {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: .5rem;
}

.billing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

.billing-card--danger { border-color: var(--color-error-border); }

.billing-card__row {
  display: flex;
  gap: 2.5rem;
  margin-bottom: 1rem;
}

.billing-card__label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  margin-bottom: .25rem;
}

.billing-card__value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -.02em;
}

.billing-card__value--accent { color: var(--color-primary); }

.billing-card__footer { margin-top: 1rem; }

.billing-card__help {
  font-size: .875rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.billing-note {
  font-size: .8125rem;
  color: var(--color-text-subtle);
}

.btn--danger {
  background: var(--color-error-text);
  color: #fff;
  width: auto;
  padding: .5rem 1.25rem;
}
.btn--danger:hover { background: #b91c1c; text-decoration: none; color: #fff; }


/* ═══════════════════════════════════════════════════════════════════════════
   Module 3 — Search & results
   Append this block to the end of public/css/style.css.
   Uses the existing brand tokens; adds no new variables.
   ═══════════════════════════════════════════════════════════════════════════ */

.search-wrap  { padding: 2.5rem 1.25rem 4rem; }
.search-inner { width: 100%; max-width: 1160px; margin: 0 auto; }

.search-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.search__heading { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
.search__sub     { color: var(--color-text-muted); font-size: .9375rem; }

.search-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: .625rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.search-balance__label { font-size: .75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.search-balance__value { font-size: 1.375rem; font-weight: 600; line-height: 1.2; }

.search-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.search-card--flush { padding: 0; overflow: hidden; }

.search-section__heading { font-size: 1rem; font-weight: 600; margin: 2rem 0 .75rem; }
.search-footnote { margin-top: 1rem; font-size: .875rem; }

/* ─── Running state ──────────────────────────────────────────────────────── */

.search-status { text-align: center; padding: 3rem 1.5rem; }
.search-status__text  { font-weight: 600; margin-top: 1rem; }
.search-status__hint  { color: var(--color-text-muted); font-size: .875rem; margin-top: .5rem; max-width: 42ch; margin-inline: auto; }

.spinner {
  width: 28px; height: 28px;
  margin: 0 auto;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: cl-spin .8s linear infinite;
}
@keyframes cl-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
}

/* ─── Results table ──────────────────────────────────────────────────────── */

.lead-table { width: 100%; border-collapse: collapse; font-size: .875rem; }

.lead-table th {
  text-align: left;
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  padding: .75rem 1rem;
  background: var(--color-primary-light);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.lead-table td {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.lead-table tbody tr:last-child td { border-bottom: none; }
.lead-table tbody tr:hover { background: var(--color-bg); }

.lead-table .num   { text-align: right; white-space: nowrap; }
/* Phone column — never break a number across lines. */
.lead-table td:nth-child(2) { white-space: nowrap; }
/* Email under the phone (Module 14). Its own line, and allowed to wrap:
   the cell's nowrap is for phone numbers, and a long address would
   otherwise push the whole table sideways on a phone screen. */
.lead-table .lead-email {
  display: block;
  margin-top: .25rem;
  font-size: .8125rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.lead-table .muted,
.muted             { color: var(--color-text-muted); font-size: .8125rem; }

.tag {
  display: inline-block;
  margin-left: .375rem;
  padding: .0625rem .375rem;
  font-size: .6875rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-text-muted);
  vertical-align: middle;
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
  font-size: .875rem;
}
.pager__info { color: var(--color-text-muted); }
.pager__link {
  padding: .375rem .875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.pager__link:hover { text-decoration: none; background: var(--color-primary-light); }

/* ─── Small screens ──────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .search-card--flush { overflow-x: auto; }
  .lead-table { min-width: 640px; }
}

/* ─── Legal pages ─────────────────────────────────────────────────────────── */

.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

.legal__title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 .375rem;
  color: var(--color-text);
}

.legal__meta {
  font-size: .875rem;
  color: var(--color-text-subtle);
  margin: 0 0 2rem;
}

/* Draft warning. Delete this rule once the notice divs come out. */
.legal__notice {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text);
  border-radius: var(--radius-md);
  padding: .875rem 1rem;
  font-size: .9375rem;
  margin-bottom: 2rem;
}

.legal h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 2rem 0 .625rem;
}

.legal h3 {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 1.25rem 0 .5rem;
}

.legal p,
.legal li {
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.legal p { margin: 0 0 .875rem; }

.legal ul {
  margin: 0 0 .875rem;
  padding-left: 1.25rem;
}

.legal li { margin-bottom: .375rem; }

/* Right-aligned above the table, matching the export on /leads. A lone
   left-aligned action under the heading reads as part of the heading block
   rather than as a control belonging to the table below it. */
.results-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

/* ─── Sticky header and anchor scrolling ──────────────────────────────────
   DESKTOP ONLY, both of them. Everything here is inside a min-width query,
   so a phone gets exactly the behaviour it has today.

   WHY NOT ON MOBILE
     A phone viewport is short, and a header pinned to the top of it costs
     roughly 10% of the visible page on every scroll. Worse, the mobile menu
     expands *inside* .navbar — so an open menu on a sticky header would pin
     a ~350px block to the top of the screen and leave a slot to read the
     page through. The menu is one tap away either way.

   WHY sticky AND NOT fixed
     position:fixed removes the element from flow, so the page jumps up by
     the header's height the moment it is applied and every page needs
     padding-top to compensate — a number that then has to be kept in sync
     with the header's real height forever, and which is wrong the moment a
     nav link wraps. position:sticky leaves the element in flow: it occupies
     its space normally and only detaches once it reaches the top of the
     viewport. No compensation, no layout shift, nothing to keep in sync.

   THE SCROLL OFFSET IS THE PART THAT IS ACTUALLY EASY TO GET WRONG
     A sticky header covers the top of whatever an anchor scrolls to. Jump
     to #pricing and the heading lands underneath the header, so the section
     appears to start at its second paragraph. scroll-margin-top fixes it at
     the target rather than at the link, which is why it works for the back
     button and for a URL pasted with a #fragment too — neither of which a
     JavaScript click handler would ever see.

     Applied to [id] rather than to a list of sections on purpose. It also
     covers #main behind the skip link, and #refunds on the Terms page, which
     is linked from the footer of every page in the site.
   ------------------------------------------------------------------------ */

@media (min-width: 901px) {

  :root {
    /* Measured, not guessed. .navbar__inner is 14px of padding top and
       bottom around its tallest child. Logged out that is .btn--nav at
       35.2px, giving 63.2px plus the 1px border — call it 64. Logged in
       there is no button and the brand is the tallest thing, so the header
       is ~58px and this offset is 6px more generous. Either way the target
       clears the header with room to breathe rather than touching it. */
    --nav-h:      4rem;   /* 64px — the header at its tallest */
    --nav-offset: 5rem;   /* 80px — nav height plus 16px of gap */
  }

  .navbar {
    position: sticky;
    top: 0;
    /* Nothing else in the project sets z-index at all, so 50 only has to
       beat the auto-stacked page content. It sits below .skip-link's 100,
       which is deliberate — the skip link has to be reachable over the
       header it lets you skip past. */
    z-index: 50;
  }

  /* Any element an anchor can target stops this far below the header. */
  [id] {
    scroll-margin-top: var(--nav-offset);
  }
}

/* Smooth scrolling. Separate query rather than folded into the one above,
   because it carries a second condition.

   no-preference, not a `reduce` override: this way smooth scrolling is opt
   -in by the visitor's own setting. Someone who has never touched the
   accessibility panel gets it; someone whose OS reports a motion preference
   never has it applied in the first place, rather than having it applied and
   then undone. Animated scrolling is a genuine trigger for motion sickness
   and vestibular symptoms, so the default here matters. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ─── Pricing: free tier strip (Module 11) ─────────────────────────────── */

.plan-free {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 1.5rem 2rem;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-hover);
  border-radius: var(--radius-lg);
}
.plan-free--active { background: var(--color-primary-light); border-style: solid; }
.plan-free__info { flex: 1 1 380px; }
.plan-free__price { margin: .25rem 0 .35rem; }
.plan-free__text { font-size: .875rem; color: var(--color-text-muted); max-width: 52ch; }
.plan-free__action { flex: 0 0 auto; text-align: right; }
.plan-free__action .btn { width: auto; }
.plan-free__left { margin-top: .5rem; font-size: .8125rem; color: var(--color-text-muted); max-width: 30ch; }

@media (max-width: 600px) {
  .plan-free { padding: 1.25rem; }
  .plan-free__action { text-align: left; width: 100%; }
  .plan-free__action .btn { width: 100%; }
}

/* ─── One-time credit pack (Module 13) ──────────────────────────────────────
   A full-width strip under the two plans rather than a third column: the
   pack is the low-commitment way in, not a peer of the subscriptions, and
   three columns do not fit the 900px pricing wrapper without squeezing the
   feature lists. */
.pack-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
}

.pack-card__title {
  font-size: 1rem;
  color: var(--color-text);
  margin: 0 0 .35rem;
}

.pack-card__amount {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-right: .25rem;
}

.pack-card__sub {
  font-size: .8125rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0 0 .25rem;
}

.pack-card__action { flex-shrink: 0; }

@media (max-width: 600px) {
  .pack-card { flex-direction: column; align-items: stretch; padding: 1.25rem; }
  .pack-card__action .btn { width: 100%; }
}

/* Module 13: subscription hook on the dashboard Plan card. */
.dash-card__cta { font-weight: 600; }

/* Module 13e: top-up banner — up to two buttons side by side. */
.dash-cta__actions { display: flex; gap: .75rem; flex-wrap: wrap; flex-shrink: 0; }
.dash-cta--topup { border-color: var(--color-primary); }