/* ==========================================================================
   theme-modern: modern dark palette, site-wide. Loaded AFTER site.css only
   when the visitor opted in (tc_theme=modern). Pure overrides: tokens first,
   then the few component rules that hard-code carbon materials.
   Specificity: :root:root (0,2,0) beats .theme-carbon (0,1,0).
   ========================================================================== */
:root:root {
  --bg: #0b0f17; --surface: #111827; --surface-2: #1a2233; --ink-band: #080b12;
  --ink: #f3f4f6; --ink-2: #d1d5db; --ink-3: #9ca3af;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.06);
  --brand: #f5b942; --brand-dark: #f7c865; --brand-tint: rgba(245,185,66,.12);
  --accent: #f5b942; --accent-tint: rgba(245,185,66,.12); --gold: #f5b942;
  --cta: #f5b942; --cta-dark: #e9a92a; --cta-tint: rgba(245,185,66,.12);
  --cta-ink: #111318; --brand-ink: #111318;
  --cool: #2dd4bf; --cool-tint: rgba(45,212,191,.10);
  --ok: #34d399; --ok-tint: rgba(52,211,153,.12);
  --warn: #f5b942; --warn-tint: rgba(245,185,66,.12);
  --bad: #f87171; --bad-tint: rgba(248,113,113,.12);
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.18);
  --shadow-2: 0 8px 26px rgba(0,0,0,.32);
  --shadow-3: 0 18px 48px rgba(0,0,0,.42);
  --rail-bg: #0d1320; --rail-bg-2: #1a2233; --rail-hairline: rgba(255,255,255,.08);
  --rail-text: #9ca3af; --rail-text-hi: #f3f4f6;
  color-scheme: dark;
}
:root:root body {
  background-color: #0b0f17;
  background-image: radial-gradient(70rem 40rem at 50% -12rem, rgba(99,102,241,.10), transparent 65%),
                    radial-gradient(50rem 30rem at 100% 0, rgba(45,212,191,.05), transparent 60%);
  background-attachment: scroll;
  color: var(--ink);
}
:root:root a { color: #f5b942; }
:root:root a:hover { color: #f7c865; }

/* Header + subnav: frosted slate instead of brushed steel. */
:root:root .site-header {
  background: rgba(11,15,23,.82); background-image: none;
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
:root:root .subnav { background: rgba(17,24,39,.7); border-bottom: 1px solid var(--line); }
:root:root .subnav a { color: var(--ink-3); }
:root:root .subnav a:hover { background: var(--cool-tint); color: #5eead4; }
:root:root .site-nav a { color: var(--ink-2); border-radius: 10px; }
:root:root .site-nav a:hover { background: rgba(255,255,255,.05); color: var(--ink); }
:root:root .site-nav a.btn--primary { color: #111318; }
:root:root .header-search input, :root:root .header-search .input { background: #111827; border-color: var(--line); border-radius: 999px; }

/* Footer */
:root:root .site-footer { background: #080b12; border-top: 1px solid var(--line); color: var(--ink-3); }
:root:root .site-footer a { color: var(--ink-3); }
:root:root .site-footer a:hover { color: #f3f4f6; }
:root:root .footer-bottom { border-top-color: var(--line); }

/* Surfaces: drop carbon hairlines/textures, use soft slate cards. */
:root:root .card, :root:root .listing, :root:root .filter-panel, :root:root .type-tile,
:root:root .steps__item, :root:root .answer-block, :root:root .faq, :root:root .key-facts table {
  background: linear-gradient(180deg, #131b2b, #111827); background-image: linear-gradient(180deg, #131b2b, #111827);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1);
}
:root:root .card::after, :root:root .listing::after, :root:root .filter-panel::after,
:root:root .steps__item::after { display: none; }
:root:root .listing:hover, :root:root .type-tile:hover { border-color: rgba(245,185,66,.35); box-shadow: var(--shadow-2); }
:root:root .listing--featured { border-color: rgba(245,185,66,.45); background: linear-gradient(180deg, rgba(245,185,66,.08), transparent 40%), #111827; }
:root:root .key-facts th { background: #1a2233; }
:root:root .answer-block::before { background: linear-gradient(90deg, #f5b942, #2dd4bf 60%, transparent); }
:root:root .steps__icon { background: var(--cool-tint); border-color: rgba(45,212,191,.25); color: #2dd4bf; }

/* Buttons */
:root:root .btn { border-radius: 12px; }
:root:root .btn--primary { background: #f5b942; background-image: none; border-color: #f5b942; color: #111318; font-weight: 700; box-shadow: 0 6px 18px rgba(245,185,66,.18); }
:root:root .btn--primary:hover { background: #f7c865; border-color: #f7c865; color: #111318; }
:root:root .btn--ghost { background: rgba(255,255,255,.04); background-image: none; border-color: rgba(255,255,255,.14); color: var(--ink); box-shadow: none; }
:root:root .btn--ghost:hover { border-color: #f5b942; color: #fff; background: rgba(255,255,255,.06); }

/* Chips & badges */
:root:root .chip { border-radius: 999px; background: rgba(255,255,255,.04); border-color: var(--line); color: var(--ink-2); }
:root:root a.chip:hover { background: var(--cool-tint); border-color: rgba(45,212,191,.4); color: #5eead4; }
:root:root .chip--solid { background: #f5b942; border-color: #f5b942; color: #111318; }
:root:root .chip--ok { background: var(--ok-tint); border-color: rgba(52,211,153,.35); color: #6ee7b7; }
:root:root .chip--gold, :root:root .chip--brand { background: var(--brand-tint); border-color: rgba(245,185,66,.45); color: #f5b942; }
:root:root .stars { color: #f5b942; }

/* Forms */
:root:root input:not([type=checkbox]):not([type=radio]):not([type=range]), :root:root select, :root:root textarea {
  background-color: #0f1522; border-color: rgba(255,255,255,.12); color: var(--ink); border-radius: 10px;
}
:root:root input:focus, :root:root select:focus, :root:root textarea:focus { border-color: #2dd4bf; box-shadow: 0 0 0 3px rgba(45,212,191,.18); outline: none; }
:root:root ::placeholder { color: #6b7280; }

/* Hero bands */
:root:root .page-hero { border-radius: 16px; border: 1px solid var(--line); }
:root:root .page-hero::after { background: linear-gradient(100deg, rgba(11,15,23,.92) 8%, rgba(11,15,23,.6) 50%, rgba(11,15,23,.2) 100%), linear-gradient(to top, rgba(11,15,23,.6), transparent 60%); }
:root:root .section--ink, :root:root .band { background: #0d1320; }
:root:root .eyebrow { color: #2dd4bf; }

/* Misc */
:root:root .pagination a, :root:root .pagination span { border-radius: 10px; }
:root:root .pagination [aria-current="page"] { background: #f5b942; border-color: #f5b942; color: #111318; }
:root:root .flash { border-radius: 12px; }
:root:root hr { border-color: var(--line); }
:root:root table th { color: var(--ink-3); }
:root:root .badge-featured { background: rgba(245,185,66,.14); color: #f5b942; border-color: rgba(245,185,66,.5); }

/* Dashboard shell */
:root:root .shell { --rail: #0d1320; --rail-2: #1a2233; --rail-line: rgba(255,255,255,.08); --rail-ink: #9ca3af; --rail-ink-hi: #f3f4f6; --work-bg: #0b0f17; }
:root:root .shell__nav a { border-radius: 0 10px 10px 0; }

/* Pricing: the 310Web tag was white-on-white on dark themes. */
:root:root .plan__tag { background: rgba(45,212,191,.14); color: #5eead4; border: 1px solid rgba(45,212,191,.35); }
:root:root .plan--agency { border-color: rgba(45,212,191,.35); }

/* Mobile header: the search box used to squash to a sliver beside the buttons.
   Below 62rem it gets its own full-width row (hidden on the homepage, whose
   hero already has a search box). */
@media (max-width: 62rem) {
  :root:root .site-header__bar { flex-wrap: wrap; row-gap: 0; }
  :root:root .header-search { display: flex; order: 3; flex: 1 1 100%; max-width: none; margin: 0 0 .6rem; }
  :root:root .header-search input { min-width: 0; flex: 1; }
  :root:root body:has(.hh) .header-search { display: none; }
}

/* City hero lead: no card box inside the photo hero. */
:root:root .answer-block.rd-lead { background: none; background-image: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }