/* ==========================================================================
   US Pilot Cars — Design System
   Palette: deep highway-night navy, permit-board amber, reflective paper.
   Signature: sidebar styled like a roadside DOT permit board; state codes
   rendered as placard chips; data set in a mono "manifest" face.
   ========================================================================== */

:root{
  --navy-950:#0b1c2b;
  --navy-900:#0f2436;
  --navy-800:#17324a;
  --navy-700:#20415d;
  --navy-line:#2c4f6c;

  --amber-500:#e8871e;
  --amber-600:#c96a0e;
  --amber-100:#fdeddb;

  --paper:#ffffff;
  --paper-dim:#f4f6f7;
  --paper-dim-2:#eceff1;
  --border:#d8dee2;
  --border-strong:#c0c9ce;

  --ink:#1b2733;
  --ink-muted:#5b6b77;
  --ink-faint:#8b98a2;

  --safety-green:#2f7d52;
  --caution-red:#b23a2e;

  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;

  --shadow-sm:0 1px 2px rgba(15,36,54,.08);
  --shadow-md:0 4px 14px rgba(15,36,54,.12);

  --font-display:'Oswald', 'Arial Narrow', sans-serif;
  --font-body:'Source Sans 3','Segoe UI',Arial,sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;

  --sidebar-w:272px;
  --header-h:64px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper-dim);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--navy-800); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--navy-900);
  line-height:1.15;
  margin:0 0 .5em;
}
h1{ font-size:2rem; }
h2{ font-size:1.4rem; }
h3{ font-size:1.1rem; }
p{ margin:0 0 1em; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
:focus-visible{
  outline:3px solid var(--amber-500);
  outline-offset:2px;
}

/* ---------- App shell ---------- */
.app-shell{
  display:flex;
  min-height:100vh;
}

/* ---------- Top bar (mobile + brand strip) ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:none;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
  padding:0 16px;
  background:var(--navy-950);
  color:#fff;
  box-shadow:var(--shadow-md);
}
.topbar .brand{
  display:flex; align-items:center; gap:10px;
  color:#fff; font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:.03em; font-size:1rem;
}
.topbar .brand .badge{
  width:34px;height:34px;border-radius:6px;
  background:var(--amber-500); color:var(--navy-950);
  display:flex;align-items:center;justify-content:center;
  font-weight:700; font-family:var(--font-display); font-size:1rem;
}
.menu-toggle{
  background:transparent; border:1px solid var(--navy-line);
  color:#fff; border-radius:var(--radius-sm);
  padding:8px 12px; font-family:var(--font-display);
  letter-spacing:.03em; text-transform:uppercase; font-size:.85rem;
  cursor:pointer;
}
.menu-toggle:hover{ background:var(--navy-800); }

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  background:var(--navy-950);
  color:#dbe4ea;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-brand{
  padding:20px 18px 16px;
  border-bottom:1px solid var(--navy-line);
}
.sidebar-brand a{
  display:flex; align-items:center; gap:10px; color:#fff;
}
.sidebar-brand .badge{
  width:38px;height:38px;border-radius:6px;
  background:var(--amber-500); color:var(--navy-950);
  display:flex;align-items:center;justify-content:center;
  font-weight:700; font-family:var(--font-display); font-size:1.1rem;
  flex:none;
}
.sidebar-brand .brand-text{
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.03em; font-size:1rem; line-height:1.2;
}
.sidebar-brand .brand-text small{
  display:block; font-family:var(--font-body); text-transform:none;
  letter-spacing:0; font-size:.72rem; color:var(--ink-faint);
}

.sidebar-scroll{ padding:14px 0 24px; flex:1; }

.nav-section{ margin-bottom:6px; }
.nav-section-label{
  font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); padding:14px 18px 6px;
}
.nav-link{
  display:flex; align-items:center; gap:10px;
  padding:9px 18px; color:#dbe4ea; font-size:.94rem;
  border-left:3px solid transparent;
}
.nav-link:hover{ background:var(--navy-800); text-decoration:none; }
.nav-link.is-active{
  background:var(--navy-800);
  border-left-color:var(--amber-500);
  color:#fff; font-weight:600;
}
.nav-link .chevron{ color:var(--amber-500); font-family:var(--font-mono); }

/* placard-style state list inside sidebar */
.placard-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  padding:4px 14px 14px;
}
.placard{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.02em;
  background:var(--navy-800); color:#cfe0ea;
  border:1px solid var(--navy-line); border-radius:var(--radius-sm);
  padding:5px 6px; text-align:center;
}
.placard:hover{ background:var(--navy-700); text-decoration:none; }
.placard.is-active{ background:var(--amber-500); color:var(--navy-950); border-color:var(--amber-500); font-weight:700; }

.sidebar-footer{
  padding:14px 18px 20px; border-top:1px solid var(--navy-line);
  font-size:.78rem; color:var(--ink-faint);
}
.sidebar-footer a{ color:#cfe0ea; }

/* ---------- Main column ---------- */
.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }

.page-header{
  background:var(--navy-900);
  color:#fff;
  padding:34px 40px;
}
.page-header .eyebrow{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber-500); margin-bottom:8px;
}
.page-header h1{ color:#fff; margin-bottom:6px; }
.page-header p{ color:#c8d4dc; max-width:60ch; margin-bottom:0; }
.breadcrumbs{
  font-family:var(--font-mono); font-size:.78rem; color:#9fb2bf;
  margin-bottom:14px;
}
.breadcrumbs a{ color:#cfe0ea; }
.breadcrumbs .sep{ margin:0 6px; color:var(--navy-line); }

.content{
  padding:32px 40px 64px;
  max-width:1180px;
}
.two-col{
  display:grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap:28px;
  align-items:start;
}

/* ---------- Cards & sections ---------- */
.panel{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  padding:22px 24px;
  margin-bottom:22px;
}
.panel > h2:first-child, .panel > h3:first-child{ margin-top:0; }

.disclaimer{
  border:1px solid #ecd0ca;
  background:#fbf1ef;
  border-left:4px solid var(--caution-red);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  font-size:.92rem;
  color:#6d2a22;
}
.disclaimer strong{ color:var(--caution-red); }

.callout{
  border:1px solid var(--border);
  border-left:4px solid var(--navy-800);
  background:var(--paper-dim);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  font-size:.92rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em;
  font-size:.85rem; padding:10px 18px; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer;
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background:var(--amber-500); color:var(--navy-950); }
.btn-primary:hover{ background:var(--amber-600); }
.btn-outline{ background:transparent; border-color:var(--navy-line); color:var(--navy-900); }
.btn-outline:hover{ background:var(--navy-900); color:#fff; }
.btn-call{ background:var(--safety-green); color:#fff; }
.btn-call:hover{ background:#256640; }
.btn-sm{ padding:6px 12px; font-size:.72rem; }

/* ---------- Directory / grid layout ---------- */
.region-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;
}
.region-tile{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:.92rem;
  color:var(--ink);
}
.region-tile:hover{ border-color:var(--amber-500); text-decoration:none; background:var(--amber-100); }
.region-tile .code{
  font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint);
  background:var(--paper-dim-2); border-radius:3px; padding:2px 6px;
}
.region-tile.is-unavailable{ opacity:.55; }

.search-row{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;
}
.search-row input[type="search"]{
  flex:1; min-width:220px;
  padding:10px 14px; border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); font-size:.95rem; font-family:var(--font-body);
}

/* ---------- Ad units ---------- */
.ad{
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  margin-bottom:16px;
}
.ad .ad-kicker{
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
  padding:6px 14px 0;
}
.ad-body{ padding:14px 16px 16px; }
.ad-image{ width:100%; aspect-ratio:16/6; object-fit:cover; background:var(--paper-dim-2); }
.ad-name{ font-family:var(--font-display); text-transform:uppercase; font-size:1.05rem; color:var(--navy-900); margin-bottom:4px; }
.ad-location{ font-size:.85rem; color:var(--ink-muted); margin-bottom:8px; }
.ad-desc{ font-size:.9rem; margin-bottom:10px; }
.ad-services{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.svc-chip{
  font-family:var(--font-mono); font-size:.68rem;
  background:var(--navy-900); color:#fff;
  padding:3px 8px; border-radius:20px;
}
.ad-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.ad--banner{ border-top:4px solid var(--amber-500); }
.ad--banner .ad-name{ font-size:1.35rem; }
.ad--banner .ad-image{ aspect-ratio:16/5; }

.ad--super .ad-name{ font-size:1.15rem; }

.ad--bold .ad-name{ font-weight:700; }
.ad--bold{ border-left:4px solid var(--navy-800); }

.ad--basic{ box-shadow:none; }
.ad--basic .ad-name{ font-size:.98rem; }

.ad-sidebar-stack .ad{ margin-bottom:14px; }

.listing-table{
  width:100%; border-collapse:collapse; font-size:.92rem;
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;
}
.listing-table th{
  text-align:left; font-family:var(--font-mono); text-transform:uppercase;
  font-size:.7rem; letter-spacing:.06em; color:var(--ink-muted);
  background:var(--paper-dim); padding:10px 12px; border-bottom:1px solid var(--border);
}
.listing-table td{ padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
.listing-table tr:last-child td{ border-bottom:none; }
.listing-table .phone{ font-family:var(--font-mono); white-space:nowrap; }

/* ---------- Home hero ---------- */
.hero{
  background:linear-gradient(160deg,var(--navy-950),var(--navy-800));
  color:#fff; padding:56px 40px; border-radius:0;
  position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:auto -60px -80px auto;
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,var(--amber-500) 0%,transparent 70%);
  opacity:.25;
}
.hero .eyebrow{ font-family:var(--font-mono); color:var(--amber-500); letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; margin-bottom:10px;}
.hero h1{ color:#fff; font-size:2.6rem; max-width:16ch; }
.hero p.lead{ color:#c8d4dc; max-width:60ch; font-size:1.1rem; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }

.stat-strip{
  display:flex; gap:0; flex-wrap:wrap;
  background:var(--navy-900); color:#fff;
}
.stat-strip .stat{
  flex:1; min-width:160px; padding:16px 24px; text-align:center;
  border-right:1px solid var(--navy-line);
}
.stat-strip .stat:last-child{ border-right:none; }
.stat .num{ font-family:var(--font-display); font-size:1.4rem; color:var(--amber-500); }
.stat .label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#c8d4dc; }

.feature-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;
}
.feature-card{
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:20px; box-shadow:var(--shadow-sm);
}
.feature-card .icon{
  width:38px;height:38px;border-radius:8px;background:var(--amber-100);color:var(--amber-600);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.1rem;margin-bottom:12px;
}

footer.site-footer{
  border-top:1px solid var(--border); padding:28px 40px;
  font-size:.85rem; color:var(--ink-muted); background:var(--paper);
}
footer.site-footer a{ color:var(--navy-800); }
footer.site-footer .links{ display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; }

/* ---------- Mobile ---------- */
@media (max-width: 900px){
  .topbar{ display:flex; }
  .sidebar{
    position:fixed; left:0; top:var(--header-h); height:calc(100vh - var(--header-h));
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:35; width:86vw; max-width:320px;
    box-shadow:var(--shadow-md);
  }
  .sidebar.is-open{ transform:translateX(0); }
  .app-shell{ padding-top:0; flex-direction:column; }
  .main-col{ width:100%; }
  .page-header, .content{ padding-left:20px; padding-right:20px; }
  .two-col{ grid-template-columns:1fr; }
  .hero{ padding:36px 20px; }
  .hero h1{ font-size:1.9rem; }
  .scrim{
    display:none; position:fixed; inset:0; background:rgba(11,28,43,.5); z-index:30;
  }
  .scrim.is-open{ display:block; }
}

/* ===================================================================
   Directory page additions (2026 rebuild)
   =================================================================== */
.content-wide{ max-width:1180px; }

/* Paid featured ads sit at the very top of a state page */
.featured-ads{ display:grid; gap:16px; margin-bottom:20px;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); }
.featured-ads .ad--banner{ grid-column:1 / -1; }

/* City table */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.legend{ font-size:.92rem; color:var(--ink-muted); margin:0 0 12px; }
.legend .svc-chip{ margin:0 4px 4px 0; }
.listing-table .city{ font-weight:600; white-space:nowrap; }
.listing-table .co-svcs{ margin-top:4px; }
.listing-table .co-svcs .svc-chip{ margin:0 4px 4px 0; }
.listing-table .phone a{ display:block; }

/* Bold listing = visibly heavier than basic. That difference is the product. */
.row-bold .co-name{ font-weight:700; font-size:1.06rem; }
.row-bold .city{ font-weight:700; }

/* Hotel placement, inline among the companies of the same city */
.row-hotel td{ background:var(--amber-100); }
.row-hotel td:first-child{ box-shadow:inset 4px 0 0 var(--amber-500); }
.hotel-tag{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#8a4b0c; margin-bottom:2px; }
.row-hotel .co-name{ font-weight:700; }
.hotel-meta{ font-size:.9rem; color:var(--ink-muted); }

/* Nearby states */
.nearby ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.nearby a{ display:inline-block; padding:6px 12px; border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); text-decoration:none; }
.nearby a:hover, .nearby a:focus{ border-color:var(--navy-line); }

/* Phones: the table stacks into cards so nothing scrolls sideways */
@media (max-width: 640px){
  .listing-table thead{ display:none; }
  .listing-table, .listing-table tbody, .listing-table tr, .listing-table td{ display:block; width:100%; }
  .listing-table tr{ border-bottom:1px solid var(--border); padding:8px 0; }
  .listing-table td{ border-bottom:none; padding:2px 12px; }
  .listing-table .phone a{ display:inline-block; margin-right:12px; padding:4px 0; }
}

/* Imported legacy products (2026 migration) */
/* Expanded Bold: the paid highlighted row */
.row-highlight td{ background:#fff7c2; }
.row-highlight td:first-child{ box-shadow:inset 4px 0 0 var(--amber-500); }
.co-tag{ font-size:.88rem; color:var(--ink-muted); font-style:italic; margin-top:2px; }
.badge-chip{ background:var(--navy-800); color:#fff; border-color:var(--navy-800); }

/* ===================================================================
   Ads everywhere (2026): sitewide banner block, state ads, sponsor column
   =================================================================== */
.banner-wrap{ padding:16px 40px 0; }
.banner-wrap:empty{ display:none; }
.banner-row{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.banner-ad{ display:block; border-radius:var(--radius-sm); overflow:hidden; background:var(--navy-950);
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .12s ease, box-shadow .12s ease; }
.banner-ad:hover, .banner-ad:focus-visible{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.22); }
.banner-ad img{ display:block; width:100%; height:auto; }
.banner-fallback{ display:flex; flex-direction:column; justify-content:center; gap:6px; min-height:150px;
  padding:20px 24px; color:#fff; background:linear-gradient(135deg, var(--navy-800), var(--navy-950));
  border-top:4px solid var(--amber-500); }
.bf-name{ font-size:1.35rem; font-weight:700; }
.bf-desc{ color:#d6dde3; font-size:.95rem; }
.bf-phone{ color:var(--amber-500); font-weight:700; }
.featured-ads .banner-ad{ grid-column:1 / -1; }

.with-aside{ display:grid; gap:24px; grid-template-columns:minmax(0, 1fr) 300px; max-width:1180px; }
.with-aside .main-stack{ min-width:0; }
.sponsor-aside{ display:flex; flex-direction:column; gap:14px; }
.aside-label{ font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
@media (max-width: 980px){ .with-aside{ grid-template-columns:1fr; } }

/* Imported regulations */
.reg-body h2{ margin:22px 0 8px; font-size:1.2rem; }
.reg-body h2:first-child{ margin-top:0; }
.reg-body h3{ margin:14px 0 6px; font-size:1.02rem; }
.reg-body ul{ margin:0 0 6px 1.1em; }
.reg-body li{ margin:3px 0; }
.reg-body a{ overflow-wrap:anywhere; }

/* Design services */
.svc-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); margin:18px 0 24px; }
.svc-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px; }
.svc-card h3{ margin:0 0 6px; font-size:1.05rem; }
.svc-price{ margin-top:8px; font-weight:700; color:var(--amber-600); }
.inquiry-form{ display:flex; flex-direction:column; gap:14px; }
.inquiry-form label{ display:flex; flex-direction:column; gap:5px; font-weight:600; }
.inquiry-form input, .inquiry-form select, .inquiry-form textarea{ font:inherit; padding:10px 12px;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:#fff; }
.inquiry-form .form-row{ display:grid; gap:14px; grid-template-columns:1fr 1fr; }
@media (max-width: 640px){ .inquiry-form .form-row{ grid-template-columns:1fr; } .banner-wrap{ padding:12px 14px 0; } }
.inquiry-form .btn[disabled]{ opacity:.55; cursor:not-allowed; }
.form-note{ background:var(--amber-100); padding:10px 14px; border-radius:var(--radius-sm); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Searchable / sortable tables (hotels, and reusable for other lists) */
.table-tools{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:flex-end; margin:0 0 10px; }
.table-tools label{ display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:.9rem; }
.table-tools input, .table-tools select{ font:inherit; padding:9px 12px; min-width:220px;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:#fff; }
.table-count{ font-size:.9rem; color:var(--ink-muted); margin:0 0 8px; }
.table-empty{ padding:14px; background:var(--amber-100); border-radius:var(--radius-sm); }
.data-table{ width:100%; border-collapse:collapse; }
.data-table th, .data-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
.data-table th{ background:var(--navy-900); color:#fff; font-size:.85rem; letter-spacing:.03em; }
.data-table th button{ all:unset; cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
.data-table th button::after{ content:"\2195"; opacity:.45; font-size:.85em; }
.data-table th[aria-sort="ascending"] button::after{ content:"\25B2"; opacity:1; }
.data-table th[aria-sort="descending"] button::after{ content:"\25BC"; opacity:1; }
.data-table th button:focus-visible{ outline:2px solid var(--amber-500); outline-offset:3px; }
.data-table tr[hidden]{ display:none !important; }
.data-table .phone a{ white-space:nowrap; }
.deal-chip{ margin-left:8px; background:var(--amber-100); border-color:var(--amber-500); color:#6b3a06; }
@media (max-width: 640px){
  .data-table thead{ display:none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td{ display:block; width:100%; }
  .data-table tr{ border-bottom:1px solid var(--border); padding:8px 0; }
  .data-table td{ border:none; padding:3px 12px; }
  .data-table td[data-label]::before{ content:attr(data-label); display:block; font-size:.72rem;
    text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); }
  .table-tools input, .table-tools select{ min-width:0; width:100%; }
  .table-tools label{ flex:1 1 100%; }
}

/* Text-only banners match the shape of picture banners (about 500x215),
   so a missing picture never makes one advertiser's space bigger or smaller. */
.banner-row .banner-fallback{ aspect-ratio:500 / 215; min-height:0; overflow:hidden; }
.banner-row .bf-desc{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Phones: one swipeable row instead of a tall stack, so every page's
   content starts right after the sponsors. The next banner peeks in. */
@media (max-width: 640px){
  .banner-row{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px;
    padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .banner-row > .banner-ad{ flex:0 0 88%; scroll-snap-align:start; }
  .banner-row .banner-fallback{ padding:14px 16px; gap:4px; }
  .banner-row .bf-name{ font-size:1.05rem; }
  .banner-row .bf-desc{ font-size:.85rem; -webkit-line-clamp:2; }
}

/* Pinned listings: paid "Top listing" spot above every city */
.row-pinned td{ background:#eef4ff; }
.row-pinned td:first-child{ box-shadow:inset 4px 0 0 var(--navy-700); }
.row-pinned.row-highlight td{ background:#fff7c2; }
.pin-tag{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--navy-700); margin-bottom:2px; }

/* Ad lineup page */
.lineup td.pos{ font-variant-numeric:tabular-nums; width:3.5em; }
.lineup-state summary{ cursor:pointer; display:flex; gap:12px; align-items:baseline; }
.lineup-state h3{ margin:16px 0 8px; font-size:1rem; }

/* Nationwide Sponsors section -- sitewide banners, under each page's title */
.sponsor-band{ margin:18px 40px 0; padding:14px 16px 16px; background:#fff;
  border:1px solid var(--border); border-top:4px solid var(--amber-500); border-radius:var(--radius-sm); }
.sponsor-band-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin-bottom:12px; }
.sponsor-band-head h2{ margin:0; font-size:1rem; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-900); }
.sb-mark{ color:var(--amber-500); font-size:1rem; }
.sb-note{ font-size:.85rem; color:var(--ink-muted); }
.hero + .sponsor-band{ margin-top:22px; }
@media (max-width: 640px){
  .sponsor-band{ margin:12px 12px 0; padding:10px 10px 12px; }
  .sponsor-band-head{ margin-bottom:8px; }
  .sb-note{ flex-basis:100%; font-size:.8rem; }
}

/* ===================================================================
   Logo (assets/images/branding/logo-wordmark.svg, drawn inline)
   Site colours normally; the ORIGINAL logo colours on hover/keyboard focus.
   =================================================================== */
.site-logo{ display:block; width:100%; height:auto; overflow:visible; }
.site-logo .lg-type{ font-family:var(--font-display); }
.site-logo .lg-plate{ fill:#fff; fill-opacity:0; }
.site-logo .lg-us, .site-logo .lg-pilot, .site-logo .lg-star2{ fill:#fff; }
.site-logo .lg-ca, .site-logo .lg-star1{ fill:var(--amber-500); }
.site-logo .lg-line{ stroke:var(--amber-500); }
.site-logo *{ transition:fill .25s ease, fill-opacity .25s ease, stroke .25s ease; }

.logo-link:hover .site-logo .lg-plate,
.logo-link:focus-visible .site-logo .lg-plate{ fill-opacity:1; }
.logo-link:hover .site-logo .lg-us,
.logo-link:focus-visible .site-logo .lg-us,
.logo-link:hover .site-logo .lg-star2,
.logo-link:focus-visible .site-logo .lg-star2{ fill:#0000FE; }
.logo-link:hover .site-logo .lg-ca,
.logo-link:focus-visible .site-logo .lg-ca,
.logo-link:hover .site-logo .lg-star1,
.logo-link:focus-visible .site-logo .lg-star1{ fill:#FE0000; }
.logo-link:hover .site-logo .lg-pilot,
.logo-link:focus-visible .site-logo .lg-pilot{ fill:#000; }
.logo-link:hover .site-logo .lg-line,
.logo-link:focus-visible .site-logo .lg-line{ stroke:#FE0000; }
/* the original had a thin black outline on the coloured words */
.logo-link:hover .site-logo .lg-us, .logo-link:hover .site-logo .lg-ca,
.logo-link:focus-visible .site-logo .lg-us, .logo-link:focus-visible .site-logo .lg-ca{
  stroke:#000; stroke-width:.8px; paint-order:stroke; }
.logo-link:focus-visible{ outline:2px solid var(--amber-500); outline-offset:4px; border-radius:8px; }
@media (prefers-reduced-motion: reduce){ .site-logo *{ transition:none; } }

.sidebar-brand .logo-link{ display:block; max-width:236px; text-decoration:none; }
.sidebar-brand .brand-tagline{ display:block; margin-top:8px; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:#9fb0bd; }
.topbar .logo-link{ display:block; width:140px; }

/* ===================================================================
   Ads imported from the old site, drawn in their original design
   =================================================================== */
.lbox-wrap{ container-type:inline-size; width:100%; }
.lbox{ position:relative; width:100%; overflow:hidden; background:#fff center / 100% 100% no-repeat;
  border-radius:var(--radius-sm); box-shadow:0 1px 3px rgba(0,0,0,.18); }
.lbox .lp{ position:absolute; margin:0; overflow:hidden; }
.lbox .lp-img{ object-fit:fill; }
.lbox p{ margin:0; }
.lbox [style*="--fs"]{ font-size:calc(var(--fs) * 100cqw / var(--w)); }
.lbox a{ color:inherit; }
.lbox a.lb-tel{ text-decoration:none; }
.lbox a.lb-tel:hover{ text-decoration:underline; }
/* Narrow screens: keep the background, let the text flow at a readable size */
@container (max-width: 460px){
  .lbox:not(.lbox-flow){ aspect-ratio:auto !important; padding:12px 10px; display:flex; flex-direction:column;
    align-items:center; gap:6px; }
  .lbox:not(.lbox-flow) .lp{ position:static; width:auto !important; height:auto !important; }
  .lbox:not(.lbox-flow) .lp-img{ max-width:60%; max-height:110px; object-fit:contain; }
  .lbox:not(.lbox-flow) .lp-fill{ display:none; }
  .lbox:not(.lbox-flow) [style*="--fs"]{ font-size:calc(var(--fs) * 1px); }
}
/* Short text ads from the old text-ad columns */
.lbox-flow{ padding:12px 14px; text-align:center; background:#fff; border:1px solid var(--border); box-shadow:none; }
.lbox-flow [style*="--fs"]{ font-size:calc(var(--fs) * 1.08px); }

.state-ad-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.text-ad-grid{ display:grid; gap:10px; margin-top:14px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.state-band{ border-top-color:var(--navy-700); }
.state-band .sb-mark{ color:var(--navy-700); }
.content-wide > .state-band{ margin:0 0 20px; }
@media (max-width: 640px){
  .banner-row > .lbox-wrap{ flex:0 0 88%; scroll-snap-align:start; }
}

/* Fixes after visual check */
.banner-row, .state-ad-grid{ align-items:start; }
.banner-ad{ background:transparent; }
/* Leave a little room: the old boxes were sized to Tahoma/Rockwell exactly,
   and a substitute font can run slightly larger. Never clip text. */
.lbox [style*="--fs"]{ font-size:calc(var(--fs) * 93cqw / var(--w)); }
.lbox .lp-text{ overflow:visible; }
.lbox{ overflow:visible; }
/* Text fitting (see main.js): --fit shrinks a panel's text only when needed.
   The box itself clips, so nothing can ever spill onto a neighbouring ad. */
.lbox [style*="--fs"]{ font-size:calc(var(--fs) * 99cqw / var(--w) * var(--fit, 1)); }
.lbox{ overflow:hidden; }
.lbox .lp-text{ overflow:hidden; }
@container (max-width: 460px){
  .lbox:not(.lbox-flow) .lp-text{ overflow:visible; }
  .lbox:not(.lbox-flow) [style*="--fs"]{ font-size:calc(var(--fs) * 1px); }
}
/* The old ads' paragraphs used an 11px base (WebPlus "Normal" style). Without
   this, each line inherits the site's 16px body text and spacing, so lines
   stay ~24px tall however small the text -- too airy, and impossible to fit. */
.lbox .lp-text{ font-size:calc(11 * 99cqw / var(--w) * var(--fit, 1)); line-height:1.18; }
.lbox .lp-text p, .lbox-flow p{ line-height:inherit; }
.lbox-flow{ font-size:12px; line-height:1.22; }
@container (max-width: 460px){ .lbox .lp-text{ font-size:11px; } }

/* ===================================================================
   State page structure (sketch): 3 Nationwide Sponsors, 4 State listings,
   5 Super listings, 6 Basic listings -- each a collapsible section.
   =================================================================== */
details.page-section > summary{ list-style:none; cursor:pointer; user-select:none; }
details.page-section > summary::-webkit-details-marker{ display:none; }
details.page-section > summary h2{ display:inline; }
.sec-count{ font-size:.78rem; font-weight:700; padding:1px 8px; border-radius:999px;
  background:var(--navy-900); color:#fff; }
.sec-toggle{ margin-left:auto; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border-strong); border-radius:50%; }
.sec-toggle::before{ content:"\25BE"; font-size:.9rem; transition:transform .15s ease; }
details.page-section:not([open]) .sec-toggle::before{ transform:rotate(-90deg); }
details.page-section:not([open]) > summary{ margin-bottom:0; }
details.page-section > summary:focus-visible{ outline:2px solid var(--amber-500); outline-offset:4px; border-radius:4px; }
.sponsor-band.in-content{ margin:0 0 20px; }
.sec-state{ border-top-color:var(--navy-700); }
.sec-super{ border-top-color:var(--amber-600); }
.sec-basic{ border-top-color:var(--navy-900); }
.sec-basic .legend{ margin-top:0; }

/* 4. State listings: about half a banner's height, several per row */
.compact-grid{ display:grid; gap:10px; align-items:start;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.ad-compact{ display:block; border-radius:var(--radius-sm); overflow:hidden; }
.ad-compact-img img{ display:block; width:100%; height:auto; max-height:120px; object-fit:contain; background:#fff; }
.ad-compact-text{ border:1px solid var(--border); padding:10px 12px; background:#fff; display:flex; flex-direction:column; gap:3px; }
.ac-name{ font-size:.98rem; }
.ac-desc{ font-size:.85rem; color:var(--ink-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ac-phone{ font-weight:700; color:var(--amber-600); text-decoration:none; }

/* 5. Super listings: two side by side */
.super-grid{ display:grid; gap:16px; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; }
@media (max-width: 760px){ .super-grid{ grid-template-columns:1fr; } }
.super-ad{ border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:#fff; }
.super-img{ display:block; }
.super-img img{ display:block; width:100%; height:auto; }
.super-body{ padding:12px 16px 16px; }
.super-body h3{ margin:0 0 6px; font-size:1.1rem; }
.super-body p{ margin:0 0 10px; color:var(--ink-muted); }
.super-actions{ display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width: 640px){
  details.page-section > summary{ flex-wrap:wrap; }
  details.page-section > summary h2{ font-size:.92rem; }
  .sec-toggle{ width:26px; height:26px; }
}
/* Phones: fold arrow stays on the title line; the note drops beneath */
details.page-section > summary .sec-toggle{ order:2; }
details.page-section > summary .sb-note{ order:3; }
@media (max-width: 640px){ details.page-section > summary .sb-note{ flex-basis:100%; } }

/* ---- 4. State listings: half-height strips, two per row ---------------- */
.strip-grid{ display:grid; gap:10px; align-items:start;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.ad-strip{ display:block; border-radius:var(--radius-sm); overflow:hidden; }
.ad-strip-img img{ display:block; width:100%; height:auto; max-height:120px; object-fit:contain; background:#fff; }
.ad-strip-text{ background:var(--strip); color:var(--strip-ink); padding:9px 12px; text-align:center;
  border:1px solid rgba(0,0,0,.18); min-height:58px; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.ad-strip-text a{ color:inherit; }
.as-line1{ font-size:.98rem; }
.as-line2{ font-size:.82rem; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.as-phone{ font-weight:700; text-decoration:none; white-space:nowrap; }

/* ---- 5. Super listings: the two-column block of short text ads ---------- */
.super-list{ columns:2 280px; column-gap:28px; column-rule:1px solid var(--border);
  border:1px solid var(--border-strong); background:#fff; padding:14px 16px; }
.super-entry{ break-inside:avoid; margin:0 0 16px; font-size:.9rem; line-height:1.3; }
.se-name{ font-weight:700; text-transform:uppercase; }
.se-name a{ color:#0000cc; }
.se-svcs{ margin:2px 0; }
.se-svc{ display:inline-block; font-size:.68rem; font-weight:700; color:#c00000; margin-right:6px; }
.se-loc{ font-weight:700; text-transform:uppercase; font-size:.84rem; }
.se-desc{ font-size:.82rem; color:var(--ink-muted); }
.se-phone{ display:inline-block; font-weight:700; color:#d40000; text-decoration:none; }
.se-phone:hover{ text-decoration:underline; }
.se-img{ display:block; max-width:100%; height:auto; margin:4px 0; }
/* Desktop: note beside the title, fold arrow at the far right.
   Phones: arrow stays on the title line, note drops beneath. */
details.page-section > summary .sb-note{ order:2; }
details.page-section > summary .sec-toggle{ order:3; }
@media (max-width: 640px){
  details.page-section > summary .sec-toggle{ order:2; }
  details.page-section > summary .sb-note{ order:3; flex-basis:100%; }
}
.sponsor-band-head h2 .sec-count{ vertical-align:2px; margin-left:4px; }
@media (max-width: 640px){
  details.page-section > summary{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; }
  details.page-section > summary h2{ grid-column:1; grid-row:1; }
  details.page-section > summary .sec-toggle{ grid-column:2; grid-row:1; margin:0; }
  details.page-section > summary .sb-note{ grid-column:1 / -1; grid-row:2; }
}
.svc-chip{ display:inline-block; white-space:nowrap; }
.super-list-one{ columns:1; column-rule:none; }

/* Nationwide Sponsors fill column by column (down the left, then the right),
   like the old page -- keeps the owner's order and leaves no gaps. */
.sec-national .banner-row{ display:block; columns:2 380px; column-gap:14px; }
.sec-national .banner-row > *{ break-inside:avoid; margin:0 0 14px; display:block; }
@media (max-width: 640px){
  .sec-national .banner-row{ display:flex; columns:auto; }
  .sec-national .banner-row > *{ margin:0; }
}

/* ---- State listings: strips designed in the editor ---------------------- */
.ad-strip-built{ display:flex; align-items:center; gap:10px; padding:8px 12px; min-height:58px;
  border-radius:var(--radius-sm); container-type:inline-size; }
.ad-strip-built .sl-lines{ flex:1; min-width:0; }
.ad-strip-built .sl-line{ font-size:calc(var(--fs) * 1.08px); line-height:1.22; overflow-wrap:anywhere; }
.ad-strip-built a{ color:inherit; }
.ad-strip-built .sl-name{ text-decoration:underline; text-underline-offset:2px; }
.ad-strip-built span.sl-name{ text-decoration:none; }
.ad-strip-built .sl-phone{ text-decoration:none; white-space:nowrap; }
.ad-strip-built .sl-phone:hover{ text-decoration:underline; }
.ad-strip-built .sl-logo{ max-height:64px; max-width:30%; object-fit:contain; flex:none; }

/* Pinned Super listings (paid): full width, above the columns */
.super-pinned-row{ display:grid; gap:10px; margin:0 0 12px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.super-entry.super-pinned{ margin:0; padding:10px 12px; background:#eef4ff; border:1px solid var(--navy-700);
  border-left:4px solid var(--navy-700); border-radius:var(--radius-sm); }
.super-pinned .pin-tag{ margin-bottom:3px; }

/* Super Listings: always two columns, in reading order (row by row).
   Grid fills left-to-right then down; a centre rule keeps the old look. */
.super-list{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:28px; row-gap:14px;
  columns:auto; column-rule:none; position:relative; align-items:start; }
.super-list::before{ content:""; position:absolute; top:14px; bottom:14px; left:50%; border-left:1px solid var(--border); }
.super-list .super-entry{ margin:0; }
.super-list-one{ columns:auto; }
.super-pinned-row{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px){
  .super-list, .super-pinned-row{ grid-template-columns:1fr; }
  .super-list::before{ display:none; }
}
/* Logo beside the text -- left (default) or right, never behind it */
.ad-strip-built.logo-right .sl-logo{ order:2; }
.ad-strip-built .sl-logo{ max-height:72px; max-width:28%; width:auto; height:auto; }
/* Second column of text (e.g. Valid: name left, phone and details right) */
.ad-strip-built .sl-lines-right{ flex:1.6; }
.ad-strip-built.logo-right .sl-logo{ order:3; }
@container (max-width: 420px){ .ad-strip-built{ flex-wrap:wrap; } .ad-strip-built .sl-lines{ flex-basis:100%; } }
.se-phones{ color:#d40000; font-weight:700; }

/* Listing counts beside each state (sidebar) and on the home page picker */
.placard{ display:flex; align-items:center; justify-content:center; gap:5px; }
.pc-count{ font-size:.66rem; font-weight:700; padding:0 5px; border-radius:999px; background:var(--amber-500); color:#1b1206; line-height:1.5; }
.nav-link .pc-count{ margin-left:6px; }
.picker-h{ margin:14px 0 8px; font-size:.95rem; }
.state-picker{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
.state-picker .region-tile .code{ background:var(--amber-100); color:#6b3a06; border-radius:999px; padding:0 8px; font-weight:700; }

/* State listing strips: keep the old site's proportions.
   Text scales with the strip's own width (reference: the old 509px strip,
   ~480px of text area), never larger than designed and never below 85%, so a
   strip that is narrower than the original wraps the way the original did
   instead of growing taller. */
.ad-strip-built .sl-line{
  font-size:clamp(max(calc(var(--fs) * .85px), 8px), calc(var(--fs) * 100cqw / 470), calc(var(--fs) * 1.08px)); }
/* Strips in the same row are the same height, content centred -- no holes. */
.strip-grid{ align-items:stretch; }
.strip-grid > .ad-strip, .strip-grid > .ad-strip-built{ height:100%; }
.ad-strip-img{ display:flex; align-items:center; justify-content:center; background:#fff; }
/* Two-column strips: the left column only takes the room its words need;
   the right column (usually the longer details) gets the rest. */
.ad-strip-built:has(.sl-lines-right) > .sl-lines:not(.sl-lines-right){ flex:0 1 auto; max-width:42%; }
.ad-strip-built .sl-lines-right{ flex:1 1 auto; }
/* Phones: don't shrink strip text -- a full-width strip can wrap instead.
   Never below 10px, so the small print stays readable. */
@media (max-width: 640px){
  .ad-strip-built .sl-line{ font-size:max(calc(var(--fs) * 1px), 10px); }
}
/* ...but never narrower than its longest word. */
.ad-strip-built:has(.sl-lines-right) > .sl-lines:not(.sl-lines-right){ min-width:min-content; overflow-wrap:normal; }
.ad-strip-built:has(.sl-lines-right) > .sl-lines:not(.sl-lines-right) .sl-line{ overflow-wrap:normal; }

/* Nationwide Sponsors auto-scroll on phones (see main.js) */
.sec-national .banner-row.is-autoscroll{ scroll-snap-type:none; scrollbar-width:none; }
.sec-national .banner-row.is-autoscroll::-webkit-scrollbar{ display:none; }
.autoscroll-toggle{ display:block; margin:0 0 8px auto; font:600 .78rem/1 inherit; padding:6px 10px;
  border:1px solid var(--border-strong); border-radius:999px; background:#fff; color:var(--navy-900); cursor:pointer; }
.autoscroll-toggle:focus-visible{ outline:2px solid var(--amber-500); outline-offset:2px; }
@media (min-width: 641px){ .autoscroll-toggle{ display:none; } }

/* ===================================================================
   Advertise page: price table, cart bar, order form
   =================================================================== */
.reason-list{ columns:2 260px; margin:0; padding-left:1.1em; }
.reason-list li{ margin:3px 0; font-weight:600; }
.price-table td{ vertical-align:middle; }
.pkg-desc{ font-size:.86rem; color:var(--ink-muted); margin-top:3px; max-width:46ch; }
.pkg-states{ font-size:.8rem; font-weight:700; color:var(--navy-700); margin-top:3px; }
.price-badge{ display:inline-block; margin-left:8px; font-size:.7rem; font-weight:700; padding:1px 7px; border-radius:999px;
  background:var(--amber-100); color:#6b3a06; vertical-align:2px; }
.price-cell{ white-space:nowrap; }
.price{ font-size:1.15rem; font-weight:700; color:var(--navy-900); }
.price span{ font-size:.78rem; font-weight:600; color:var(--ink-muted); margin-left:2px; }
.price-na{ color:var(--ink-muted); }
.btn-add{ margin-top:6px; padding:7px 12px; font-size:.82rem; }
.btn-add.is-added{ background:#1f7a3a; border-color:#1f7a3a; color:#fff; }
.specialty h2{ margin-top:0; }
.cart-bar{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background:var(--navy-900); color:#fff; box-shadow:0 -4px 14px rgba(0,0,0,.25); }
.cart-bar[hidden]{ display:none; }
.cart-count{ font-weight:600; }
.cart-table td{ vertical-align:middle; }
.btn-remove{ background:none; border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:5px 10px; cursor:pointer; font:inherit; font-size:.82rem; }
.cart-total{ font-size:1.05rem; margin:12px 0 4px; }
.item-form h2{ font-size:1.05rem; }
.svc-pick{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px; margin:0; }
.svc-pick legend{ font-weight:600; padding:0 4px; }
.inquiry-form label.check{ flex-direction:row; align-items:center; gap:8px; font-weight:500; display:inline-flex; margin-right:14px; }
.form-error{ background:#fde8e8; color:#8a1c1c; padding:10px 14px; border-radius:var(--radius-sm); font-weight:600; }
@media (max-width: 640px){ .reason-list{ columns:1; } }

/* "Expand My Listing" is sold as bold on a GREEN background -- match it. */
.row-highlight td{ background:#dcf5d3; }
.row-highlight td:first-child{ box-shadow:inset 4px 0 0 #2e9e3f; }
.row-pinned.row-highlight td{ background:#dcf5d3; }
/* Room under the page for the cart bar, so it never covers the last rows */
body:has(#cart-bar:not([hidden])){ padding-bottom:84px; }
/* Even spacing between every question in an order section */
.item-form{ display:flex; flex-direction:column; gap:14px; }
.item-form > h2{ margin:0; }
.item-form .form-row{ margin:0; }
@media (max-width: 640px){
  /* Phones: monthly and yearly side by side, so each package card is shorter */
  .price-table td.price-cell{ display:inline-block; width:50%; vertical-align:top; }
  .price-table td.price-cell .btn-add{ width:100%; }
}
@media (max-width: 640px){
  .price-table tbody tr{ display:flex; flex-wrap:wrap; }
  .price-table tbody td{ flex:1 1 100%; }
  .price-table tbody td.price-cell{ flex:1 1 50%; width:auto; display:block; }
}
@media (max-width: 640px){
  .price-table tbody td.price-cell{ flex:1 1 0; min-width:0; box-sizing:border-box; }
}
@media (max-width: 640px){ .price-table td.price-cell{ white-space:normal; } }

/* ===================================================================
   Directory table grouped by city: one header per city
   =================================================================== */
.listing-table .city-head th{ text-align:left; padding:9px 12px; background:var(--paper-dim-2);
  border-top:2px solid var(--navy-700); font-family:var(--font-display); font-size:.95rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.cg-count{ display:inline-block; margin-left:6px; font-family:var(--font-body); font-size:.7rem; font-weight:700;
  padding:0 7px; border-radius:999px; background:var(--navy-700); color:#fff; letter-spacing:0; vertical-align:2px; }
.co-city{ font-size:.8rem; font-weight:700; text-transform:uppercase; color:var(--ink-muted); margin-top:1px; }
@media (max-width: 640px){ .listing-table .city-head th{ display:block; } }

/* Breadcrumbs ("Home / New Mexico"): readable on the light page background */
.breadcrumbs{ color:var(--ink-muted); }
.breadcrumbs a{ color:var(--navy-700); text-decoration:underline; text-underline-offset:2px; }
.breadcrumbs .sep{ color:var(--ink-faint); }

/* State Listings on the home page */
.home-band{ margin:22px 40px 0; }
@media (max-width: 640px){ .home-band{ margin:14px 12px 0; } }

/* Theme switch */
.theme-toggle{ display:inline-flex; align-items:center; gap:6px; font:600 .8rem/1 var(--font-body); padding:7px 11px;
  border:1px solid var(--navy-line); border-radius:999px; background:transparent; color:#e6edf2; cursor:pointer; }
.theme-toggle:hover{ border-color:var(--amber-500); }
.theme-toggle:focus-visible{ outline:2px solid var(--amber-500); outline-offset:2px; }
.sidebar-brand .theme-toggle{ margin-top:12px; }

/* ===================================================================
   Dark theme. Advertisers' artwork and designed strips keep their own
   colours in both themes; everything around them goes dark.
   =================================================================== */
[data-theme="dark"]{
  color-scheme:dark;
  --paper:#13202b; --paper-dim:#0c161f; --paper-dim-2:#1a2a37;
  --border:#2b3d4c; --border-strong:#3c5163;
  --ink:#e4ecf1; --ink-muted:#aab8c3; --ink-faint:#8395a2;
  --amber-100:#3b2b16;
}
[data-theme="dark"] body{ background:var(--paper-dim); color:var(--ink); }
[data-theme="dark"] main a:not(.btn):not(.region-tile){ color:#9cc8ee; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4{ color:var(--ink); }
[data-theme="dark"] .page-header h1, [data-theme="dark"] .hero h1{ color:#fff; }
[data-theme="dark"] .breadcrumbs a{ color:#9cc8ee; }
[data-theme="dark"] .btn-outline{ color:var(--ink); border-color:var(--border-strong); }
[data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-primary:visited{ color:var(--navy-950); }
[data-theme="dark"] .ad-name, [data-theme="dark"] .price, [data-theme="dark"] .sponsor-band-head h2{ color:var(--ink); }
[data-theme="dark"] footer.site-footer a{ color:#9cc8ee; }
[data-theme="dark"] .svc-card, [data-theme="dark"] .sponsor-band, [data-theme="dark"] .lbox-flow,
[data-theme="dark"] .ad-compact-text, [data-theme="dark"] .super-ad, [data-theme="dark"] .super-list,
[data-theme="dark"] .autoscroll-toggle{ background:var(--paper); color:var(--ink); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea{ background:var(--paper-dim); color:var(--ink); border-color:var(--border-strong); }
[data-theme="dark"] .row-highlight td, [data-theme="dark"] .row-pinned.row-highlight td{ background:#1d3a24; }
[data-theme="dark"] .row-pinned td, [data-theme="dark"] .super-entry.super-pinned{ background:#1a2d42; }
[data-theme="dark"] .pin-tag, [data-theme="dark"] .pkg-states, [data-theme="dark"] .state-band .sb-mark{ color:#9cc8ee; }
[data-theme="dark"] .se-name a{ color:#8fb8ff; }
[data-theme="dark"] .se-phone, [data-theme="dark"] .se-phones, [data-theme="dark"] .se-svc{ color:#ff8a8a; }
[data-theme="dark"] .price-badge, [data-theme="dark"] .deal-chip,
[data-theme="dark"] .state-picker .region-tile .code{ color:#f5c48a; }
[data-theme="dark"] .form-error{ background:#4a1d1d; color:#ffd6d6; }
[data-theme="dark"] .listing-table .city-head th{ border-top-color:#3c5f80; }
[data-theme="dark"] .sec-count, [data-theme="dark"] .cg-count{ background:#2c4f6c; }
.topbar-actions{ display:flex; align-items:center; gap:8px; }
.topbar .theme-toggle{ padding:8px 10px; }
/* one switch at a time: the phone header has its own below 900px */
@media (max-width: 900px){ .sidebar-brand .theme-toggle{ display:none; } }
@media (min-width: 901px){ .topbar .theme-toggle{ display:none; } }
.breadcrumbs .sep{ color:var(--ink-muted); }
[data-theme="dark"] .hotel-tag{ color:#f5c48a; }
/* "Skip to main content" (for keyboard users): high contrast in both themes */
a.visually-hidden, [data-theme="dark"] a.visually-hidden{ color:var(--navy-950); background:var(--amber-500); }
a.visually-hidden:focus, a.visually-hidden:focus-visible{ position:fixed; top:10px; left:10px; z-index:200;
  width:auto; height:auto; clip:auto; clip-path:none; overflow:visible; white-space:nowrap; margin:0;
  padding:10px 14px; border-radius:var(--radius-sm); font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.3); }

/* Nationwide Sponsors (and home State Listings) line up with the sections
   below at every screen size -- open or folded. Page sides: 40px, or 20px
   below 900px wide. */
@media (max-width: 900px){
  .sponsor-band:not(.in-content){ margin-left:20px; margin-right:20px; }
}

/* Super Listings: each row's two entries share a height, with a faint line
   between rows -- no uneven gaps, and each company clearly separate. */
.super-list{ row-gap:0; align-items:stretch; padding:2px 16px; }
.super-list .super-entry{ margin:0; padding:12px 6px; }
.super-list .super-entry:nth-child(n+3){ border-top:1px solid var(--border); }
.super-list .super-entry.super-pinned{ padding:12px 12px; border-top:0; margin:8px 0; }
@media (max-width: 640px){
  .super-list .super-entry:nth-child(n+2){ border-top:1px solid var(--border); }
  .super-list .super-entry.super-pinned{ border-top:0; }
}

/* Checkout steps: 1 Choose packages -> 2 Your details -> 3 Payment */
.checkout-steps{ display:flex; flex-wrap:wrap; gap:6px 18px; list-style:none; padding:0; margin:0 0 18px; font-weight:600; color:var(--ink-muted); }
.checkout-steps li{ display:flex; align-items:center; gap:7px; }
.checkout-steps li span{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%;
  border:2px solid var(--border-strong); font-size:.8rem; }
.checkout-steps li.is-current{ color:var(--ink); }
.checkout-steps li.is-current span{ background:var(--amber-500); border-color:var(--amber-500); color:var(--navy-950); }
.checkout-steps li.is-done span{ background:var(--navy-700); border-color:var(--navy-700); color:#fff; }
/* Payment page */
.pay-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 0; border-bottom:1px solid var(--border); }
.pay-row.is-opened strong::after{ content:" \2713"; color:#1f7a3a; }
.pay-later{ font-size:.9rem; color:var(--ink-muted); max-width:34ch; }
[data-theme="dark"] .checkout-steps li.is-done span{ background:#3c5f80; border-color:#3c5f80; }

/* State Listing pictures hug the picture: no white box around it, no
   stretching to match a taller neighbour. The frame (rounded corners, soft
   shadow) sits on the picture itself, matching the designed strips. */
.strip-grid > .ad-strip-img{ display:block; align-self:start; height:auto; background:transparent;
  border-radius:0; overflow:visible; line-height:0; text-align:center; }
.ad-strip-img img{ display:inline-block; width:auto; max-width:100%; height:auto; max-height:120px;
  background:transparent; border-radius:var(--radius-sm); box-shadow:0 1px 3px rgba(0,0,0,.18); }
/* "Whole picture": its own shape and size, never blown up past its real size */
.ad-strip-img.is-natural img{ max-height:none; }
/* "Full row": the listing takes the whole row */
.strip-grid > .is-full{ grid-column:1 / -1; }
/* Short strip: exactly as before (fills the width, up to 120px tall), but
   never stretched into a taller box. */
.ad-strip-img img{ display:block; width:100%; max-height:120px; object-fit:contain; box-shadow:none; border-radius:0; }
/* Whole picture: fills the width, height follows the picture's own shape --
   no empty space anywhere. Framed like the designed strips. */
.ad-strip-img.is-natural img{ max-height:none; object-fit:fill; border-radius:var(--radius-sm); box-shadow:0 1px 3px rgba(0,0,0,.18); }
/* A designed strip beside a "Whole picture" ad keeps its own height (top
   aligned) instead of stretching to match a tall picture. Two strips side
   by side still match heights. (Left column = odd child, right = even.) */
.strip-grid > .ad-strip-built:nth-child(odd):has(+ .is-natural),
.strip-grid > .is-natural:nth-child(odd) + .ad-strip-built{ align-self:start; height:auto; }
/* Whole picture: fills the width; very tall pictures are kept to 420px and
   centred, so one ad can't take over the page. No added frame -- pictures
   show their own artwork edges, like the short strips. */
.ad-strip-img.is-natural img{ max-height:420px; object-fit:contain; box-shadow:none; border-radius:0; }

/* Narrow windows (top bar + pull-out menu): the top bar already shows the
   logo, so the menu doesn't repeat it -- no two logos side by side. */
@media (max-width: 900px){ .sidebar .sidebar-brand{ display:none; } }
/* A box the form still needs */
.inquiry-form .is-missing{ border-color:#c62828 !important; box-shadow:0 0 0 2px rgba(198,40,40,.25); }

/* Cloudflare's bot check -- usually invisible; when it does show, a little room */
.inquiry-form .cf-turnstile{ margin:4px 0 12px; }
.inquiry-form .cf-turnstile:empty{ margin:0; }