/*
Theme Name:   Swinglix
Theme URI:    https://swinglix.com/
Description:  Standalone theme for the Swinglix golf simulator directory. Carries the listing post type, the seed data for all fifty states, the importer, the state-page rendering, structured data, and the full site design. No parent theme, no companion plugin. Changes no existing URL.
Author:       Swinglix
Version: 7.6.0
Requires at least: 6.3
Tested up to: 7.1
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  swinglix
Tags:         directory, listings, golf, custom-menu, featured-images, translation-ready
*/

/* ===========================================================================
   SWINGLIX DESIGN SYSTEM  v3

   The site's own pages still carry pasted CSS — 109 of them load the Tailwind
   CDN, 73 use inline style attributes. This file does not fight them. It owns
   the surfaces the theme actually controls: header, footer, article
   typography, listing components, filters, listing detail, search, 404.
   As pasted CSS is retired page by page, those pages inherit this instead.

   Neutrals are biased green rather than blue. A blue-grey slate palette is the
   default every framework ships with; on a turf-and-fairway subject it reads
   as unconsidered. Emerald #10b981 is the existing Swinglix brand colour and
   is kept — but it measures ~2.5:1 on white, so it is used for fills, and
   #047857 (~5.5:1) carries every piece of text.
   =========================================================================== */

:root {
  /* Brand */
  --brand-700: #035C43;
  --brand-600: #047857;   /* text-safe emerald */
  --brand-500: #059669;
  --brand-400: #10B981;   /* the Swinglix fill */
  --brand-200: #A7F3D0;
  --brand-100: #D1FAE5;
  --brand-50:  #ECFDF5;

  /* Deep greens for dark surfaces */
  --deep-900: #06120E;
  --deep-800: #0B1F18;
  --deep-700: #123027;

  /* Green-biased neutrals */
  --ink-900: #0A1512;
  --ink-800: #16241F;
  --ink-700: #27392F;
  --ink-600: #41564C;
  --ink-500: #5C7168;
  --ink-400: #7D9188;

  --line:        #E4EAE6;
  --line-strong: #CDD8D2;

  --paper:   #FFFFFF;
  --paper-2: #F7F9F8;
  --paper-3: #EFF3F1;

  /* Semantic */
  --warn:      #92400E;
  --warn-wash: #FFFBEB;
  --warn-line: #FDE68A;

  /* Type scale — 1.22 ratio, tuned by eye at each step */
  --t-xs:   .75rem;
  --t-sm:   .8125rem;
  --t-base: .9375rem;
  --t-md:   1rem;
  --t-lg:   1.125rem;
  --t-xl:   1.375rem;
  --t-2xl:  1.75rem;
  --t-3xl:  2.25rem;
  --t-4xl:  3rem;

  /* Spacing — 4px base */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Elevation — tinted with the ink hue, never neutral black */
  --e1: 0 1px 2px rgba(10, 21, 18, .05);
  --e2: 0 2px 6px rgba(10, 21, 18, .06), 0 1px 2px rgba(10, 21, 18, .04);
  --e3: 0 12px 28px -12px rgba(10, 21, 18, .18), 0 2px 6px rgba(10, 21, 18, .05);
  --e4: 0 28px 56px -24px rgba(10, 21, 18, .26);

  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
          'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --measure: 66ch;
  --wide:    1280px;
  --gutter:  clamp(16px, 4vw, 40px);
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-800);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg, iframe { max-width: 100%; height: auto; }
img { display: block; }

a { color: var(--brand-600); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-700); }

:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--ink-900);
  line-height: 1.18;
  letter-spacing: -.022em;
  text-wrap: balance;
  margin: 0 0 .5em;
  font-weight: 700;
}

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }
table { border-collapse: collapse; }

.slx-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink-900); color: #fff;
  padding: var(--s3) var(--s4); border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.slx-skip:focus { left: 0; color: #fff; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.slx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: inherit; font-size: var(--t-base); font-weight: 650; line-height: 1;
  padding: 11px 18px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--brand-600); color: #fff; text-decoration: none; cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
  white-space: nowrap;
}
.slx-btn:hover { background: var(--brand-700); color: #fff; box-shadow: var(--e2); }
.slx-btn:active { transform: translateY(1px); }

.slx-btn--ghost {
  background: var(--paper); color: var(--ink-700); border-color: var(--line-strong);
}
.slx-btn--ghost:hover { background: var(--paper-2); color: var(--brand-600); border-color: var(--brand-400); }

.slx-btn--sm { padding: 8px 13px; font-size: var(--t-sm); }

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

.slx-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.slx-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--e1); }

/*
 * A hairline sits under the bar at rest as well as when stuck. Without it the
 * translucent header floated against white page content with no edge, which
 * is what made the bar feel unresolved at the top of the page.
 */
.slx-header { border-bottom-color: var(--line); }

.slx-header__in {
  max-width: var(--wide); margin: 0 auto;
  padding: 11px var(--gutter);
  display: flex; align-items: center; gap: var(--s3);
}

.slx-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.slx-brand__mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: linear-gradient(145deg, var(--brand-400), var(--brand-600));
  display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: 15px; letter-spacing: -.04em;
  box-shadow: var(--e2);
}
.slx-brand__name {
  display: block; font-weight: 800; font-size: 1.06rem;
  letter-spacing: -.03em; color: var(--ink-900); line-height: 1.2;
}
.slx-brand__tag {
  display: block; font-size: var(--t-xs); font-weight: 500;
  color: var(--ink-400); letter-spacing: .005em;
}

/* Custom logo (Customizer > Site Identity).
   WordPress prints the image at its natural size, so it must be constrained
   here. Capping the height rather than the width keeps square, wide and
   wordmark logos all sitting on the same optical line as the 34px fallback
   mark, whatever their aspect ratio. */
.custom-logo-link {
  display: flex; align-items: center; flex: none;
  margin-right: auto;               /* holds the nav right, as .slx-brand does */
  text-decoration: none; line-height: 0;
}
.custom-logo {
  display: block; width: auto; height: 40px;
  max-width: 200px; object-fit: contain;
}

.slx-nav ul {
  display: flex; gap: 2px; list-style: none; margin: 0; padding: 0;
  flex-wrap: nowrap;            /* the drawer re-enables wrapping below 900px */
}
.slx-nav li { flex: none; }
.slx-nav a { white-space: nowrap; }
.slx-nav a {
  position: relative;
  /*
   * 8px of horizontal padding is tighter than this bar wants, and it is set
   * by the item count rather than by taste: nine labels plus the button fill
   * 918px of a 1210px viewport at 10px, leaving the wordmark and the nav 12px
   * apart. Until the menu loses an item -- Privacy Policy belongs in the
   * footer -- the spacing cannot grow without forcing the drawer onto
   * ordinary laptop widths.
   */
  display: block; padding: 8px 8px 9px; border-radius: var(--r-sm);
  font-size: var(--t-base); font-weight: 550; color: var(--ink-600);
  text-decoration: none; transition: color .15s ease, background .15s ease;
}
.slx-nav a:hover, .slx-nav a:focus-visible { background: var(--brand-50); color: var(--brand-600); }

/*
 * Current page: a rule under the label rather than a filled pill.
 *
 * The pill was doing too much work. Nine of them across the bar made the
 * whole header read as a row of buttons, and because it used the same
 * brand-50 fill as :hover, an active item and a hovered item were
 * indistinguishable -- the screenshot of this header looked like two tabs
 * were stuck open. A 2px rule states position quietly and leaves the fill
 * free to mean "you are pointing at this".
 */
.slx-nav .current-menu-item > a,
.slx-nav .current_page_item > a,
.slx-nav .current-menu-ancestor > a,
.slx-nav .current-page-ancestor > a {
  color: var(--ink-900); background: transparent; font-weight: 650;
}
.slx-nav .current-menu-item > a::after,
.slx-nav .current_page_item > a::after,
.slx-nav .current-menu-ancestor > a::after,
.slx-nav .current-page-ancestor > a::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 1px;
  height: 2px; border-radius: 2px; background: var(--brand-600);
}
.slx-nav .current-menu-item > a:hover,
.slx-nav .current_page_item > a:hover { background: var(--brand-50); }

/*
 * The call to action is a different kind of thing from the navigation, so a
 * hairline separates them instead of relying on the button's own weight.
 */
/*
 * No padding shorthand or padding-left here: the button's own .slx-btn--sm
 * padding must survive. An earlier version of this rule set padding-left:0
 * to make room for the divider, which knocked the label 13px off centre --
 * 1px of space on the left against 14px on the right. The divider is
 * absolutely positioned outside the box, so it needs no room at all.
 */
.slx-header__cta {
  display: inline-flex; position: relative;
  margin-left: var(--s2);
}
.slx-header__cta::before {
  content: ""; position: absolute; left: calc(var(--s2) * -1);
  top: 50%; transform: translateY(-50%);
  width: 1px; height: 22px; background: var(--line);
}

.slx-nav-toggle {
  display: none; align-items: center; gap: var(--s2);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 9px 14px;
  font: inherit; font-size: var(--t-base); font-weight: 650;
  color: var(--ink-800); cursor: pointer;
}
.slx-nav-toggle:hover { border-color: var(--brand-400); }

/* The header collapses to the drawer at 1200px, not the usual 900: nine
   menu items on a single row stop fitting at roughly 1150px, and the
   nav no longer wraps to a second row to absorb the overflow. */
@media (max-width: 1200px) {
  .custom-logo { height: 34px; max-width: 150px; }
  .slx-nav ul { flex-wrap: wrap; }
  .slx-nav a { white-space: normal; }

  .slx-nav-toggle { display: inline-flex; }
  .slx-header__cta { display: none; }
  .slx-nav { display: none; flex-basis: 100%; order: 3; }
  .slx-nav.is-open { display: block; }
  .slx-nav ul { flex-direction: column; padding: var(--s2) 0 var(--s3); gap: 1px; }
  .slx-nav a { padding: 12px 13px; }
}

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */

.slx-main { display: block; min-height: 52vh; }
.slx-page  { padding: 0; }                                   /* self-styled legacy content */
.slx-plain { max-width: var(--wide); margin: 0 auto; padding: var(--s7) var(--gutter) var(--s8); }
.slx-read  { max-width: var(--measure); margin: 0 auto; padding: var(--s7) var(--gutter) var(--s9); }
.slx-read > * { max-width: 100%; }

/* ---------------------------------------------------------------------------
   Article typography
   The 30 guides run to ~3,600 words with 40+ headings each. They need real
   hierarchy, not just a bigger font.
   --------------------------------------------------------------------------- */

.slx-article__head { margin-bottom: var(--s7); }
.slx-article__eyebrow {
  display: inline-block; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand-600);
  background: var(--brand-50); padding: 5px 11px; border-radius: var(--r-pill);
  margin: 0 0 var(--s4);
}
.slx-article__title {
  font-size: clamp(2rem, 5vw, var(--t-4xl)); font-weight: 800;
  letter-spacing: -.032em; margin: 0 0 var(--s4);
}
.slx-article__meta {
  font-size: var(--t-base); color: var(--ink-400); margin: 0;
  display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center;
}

.slx-prose { font-size: 1.0625rem; color: var(--ink-700); line-height: 1.75; }
.slx-prose > * + * { margin-top: 1.2em; }
.slx-prose p { margin: 0; }

.slx-prose h2 {
  font-size: var(--t-2xl); margin-top: 2.1em; padding-top: .5em;
  border-top: 1px solid var(--line); color: var(--ink-900);
}
.slx-prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.slx-prose h3 { font-size: var(--t-xl); margin-top: 1.8em; color: var(--ink-900); }
.slx-prose h4 { font-size: var(--t-lg); margin-top: 1.5em; color: var(--ink-900); }

.slx-prose ul, .slx-prose ol { padding-left: 1.35em; margin: 0; }
.slx-prose li + li { margin-top: .45em; }
.slx-prose li::marker { color: var(--brand-400); }
.slx-prose strong { color: var(--ink-900); font-weight: 700; }

.slx-prose img, .slx-prose figure { border-radius: var(--r-lg); box-shadow: var(--e2); }
.slx-prose figcaption {
  font-size: var(--t-sm); color: var(--ink-400);
  margin-top: var(--s2); text-align: center;
}

.slx-prose blockquote {
  margin: 1.9em 0; padding: var(--s4) var(--s5);
  background: var(--brand-50); border-left: 3px solid var(--brand-400);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink-800); font-size: var(--t-lg);
}
.slx-prose blockquote p { margin: 0; }

.slx-prose pre {
  background: var(--deep-900); color: #D9E7E1; border-radius: var(--r-md);
  padding: var(--s4) var(--s5); overflow-x: auto; font-size: var(--t-base);
}
.slx-prose :not(pre) > code {
  background: var(--paper-3); border: 1px solid var(--line);
  border-radius: 5px; padding: .12em .4em; font-size: .9em; color: var(--ink-900);
}

.slx-prose table { width: 100%; font-size: var(--t-base); display: block; overflow-x: auto; }
.slx-prose th, .slx-prose td { text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.slx-prose th { background: var(--paper-2); font-weight: 700; color: var(--ink-900); white-space: nowrap; }

/* Table of contents, injected for long posts */
.slx-toc {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s6);
}
.slx-toc__title {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-400); margin: 0 0 var(--s3);
}
.slx-toc ol { margin: 0; padding-left: 1.1em; font-size: var(--t-base); }
.slx-toc li { margin-bottom: 6px; }
.slx-toc li::marker { color: var(--ink-400); font-variant-numeric: tabular-nums; }
.slx-toc a { color: var(--ink-700); text-decoration: none; }
.slx-toc a:hover { color: var(--brand-600); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Post index
   --------------------------------------------------------------------------- */

.slx-index { max-width: var(--wide); margin: 0 auto; padding: var(--s7) var(--gutter) var(--s9); }
.slx-index__title { font-size: clamp(1.9rem, 4.4vw, var(--t-3xl)); margin: 0 0 var(--s2); letter-spacing: -.03em; }
.slx-index__sub { color: var(--ink-400); margin: 0 0 var(--s6); font-size: var(--t-lg); max-width: 56ch; }

.slx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s4); list-style: none; padding: 0; margin: 0; }
.slx-teaser {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.slx-teaser:hover { border-color: var(--brand-200); box-shadow: var(--e3); transform: translateY(-3px); }
.slx-teaser__title { font-size: var(--t-lg); margin: 0; line-height: 1.32; letter-spacing: -.018em; }
.slx-teaser__title a { color: var(--ink-900); text-decoration: none; }
.slx-teaser__title a:hover { color: var(--brand-600); }
.slx-teaser__meta { font-size: var(--t-sm); color: var(--ink-400); margin: 0; }
.slx-teaser__excerpt { font-size: var(--t-base); color: var(--ink-600); margin: 0; }

.slx-pagination { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s7); }
.slx-pagination .page-numbers {
  padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  text-decoration: none; font-size: var(--t-base); font-weight: 650; color: var(--ink-600);
}
.slx-pagination .page-numbers:hover { border-color: var(--brand-400); color: var(--brand-600); }
.slx-pagination .current { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

/* ---------------------------------------------------------------------------
   LISTING BLOCK
   --------------------------------------------------------------------------- */

.slx-block { max-width: var(--wide); margin: var(--s8) auto; padding: 0 var(--gutter); }

.slx-block__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--line);
}
.slx-block__title {
  display: flex; align-items: baseline; gap: var(--s3);
  font-size: var(--t-2xl); font-weight: 750; letter-spacing: -.028em; margin: 0;
}
.slx-block__count {
  font-size: var(--t-sm); font-weight: 700; color: var(--brand-700);
  font-variant-numeric: tabular-nums; background: var(--brand-100);
  border-radius: var(--r-pill); padding: 4px 11px; letter-spacing: 0;
}

/* Filter bar — a 214-listing page is unusable without one */
.slx-filters {
  display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--s5); padding: var(--s3);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  position: sticky; top: 68px; z-index: 20;
}
.slx-filters input[type="search"], .slx-filters select {
  font: inherit; font-size: var(--t-base); color: var(--ink-800);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 9px 12px; min-width: 0;
}
.slx-filters input[type="search"] { flex: 1 1 220px; }
.slx-filters select { flex: 0 1 auto; cursor: pointer; }
.slx-filters__count {
  margin-left: auto; font-size: var(--t-sm); color: var(--ink-400);
  font-variant-numeric: tabular-nums; padding-right: var(--s2);
}
.slx-filters__reset {
  font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  background: none; border: 0; color: var(--brand-600); padding: 6px 4px;
}
.slx-filters__reset[hidden] { display: none; }

.slx-band { margin-bottom: var(--s7); }
.slx-band__note {
  font-size: var(--t-base); color: var(--warn); background: var(--warn-wash);
  border: 1px solid var(--warn-line); border-radius: var(--r-md);
  padding: 11px 14px; margin: 0 0 var(--s4);
}
.slx-band--national { opacity: .96; }

.slx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: var(--s4); }

.slx-card {
  position: relative;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.slx-card:hover { border-color: var(--brand-200); box-shadow: var(--e3); transform: translateY(-3px); }
.slx-card[hidden] { display: none; }

.slx-card--featured { border-color: var(--brand-200); background: linear-gradient(180deg, var(--brand-50), var(--paper) 60%); }
.slx-card--verified::before,
.slx-card--featured::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  border-radius: var(--r-lg) 0 0 var(--r-lg); background: var(--brand-400);
}
.slx-card--local::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  border-radius: var(--r-lg) 0 0 var(--r-lg); background: var(--brand-400);
}

.slx-card__name { font-size: var(--t-md); font-weight: 700; line-height: 1.32; margin: 0; letter-spacing: -.016em; }
.slx-card__name a { color: var(--ink-900); text-decoration: none; }
.slx-card__name a::after { content: ""; position: absolute; inset: 0; }  /* whole card clickable */
.slx-card:hover .slx-card__name a { color: var(--brand-600); }
.slx-card__meta { font-size: var(--t-base); color: var(--ink-400); margin: 0; }

.slx-card__pills { display: flex; flex-wrap: wrap; gap: 5px; margin: var(--s1) 0 0; }
/* Scoped to the two places the theme actually emits pills.
   Unscoped, ".slx-pill" collided with a class of the same name in the
   pasted markup on Advertise With Us: the uppercase transform shouted its
   copy, and white-space:nowrap raised each grid item's min-content width
   until the three-column strip overflowed the page by 1467px. Directory
   markup is generated and predictable; page content is not, so theme rules
   stay inside their own containers. */
.slx-card__pills .slx-pill,
.slx-single__pills .slx-pill {
  display: inline-block;
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 3px 9px; border-radius: var(--r-sm); white-space: nowrap;
}
.slx-card__pills .slx-pill--featured,
.slx-single__pills .slx-pill--featured { background: var(--brand-600); color: #fff; }
.slx-card__pills .slx-pill--verified,
.slx-single__pills .slx-pill--verified { background: var(--brand-100); color: var(--brand-700); }
.slx-card__pills .slx-pill--type,
.slx-single__pills .slx-pill--type     { background: var(--paper-3); color: var(--ink-600); }
.slx-card__pills .slx-pill--chain,
.slx-single__pills .slx-pill--chain    { background: transparent; color: var(--ink-400); border: 1px dashed var(--line-strong); }

.slx-card__actions { display: flex; gap: var(--s2); margin: var(--s3) 0 0; position: relative; z-index: 1; }
.slx-card__unclaimed { margin: var(--s2) 0 0; font-size: var(--t-base); position: relative; z-index: 1; }
.slx-card__unclaimed a { color: var(--brand-600); font-weight: 600; }

.slx-empty {
  padding: var(--s8) var(--s5); text-align: center; color: var(--ink-400);
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
}

.slx-cta {
  margin: var(--s6) 0 0; padding: var(--s5);
  border: 1px solid var(--brand-200); border-radius: var(--r-lg);
  font-size: var(--t-md); color: var(--ink-700);
  background: linear-gradient(135deg, var(--brand-50), var(--paper));
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
}
.slx-cta strong { color: var(--ink-900); }

/* ---------------------------------------------------------------------------
   Listing detail
   --------------------------------------------------------------------------- */

.slx-single { max-width: 820px; margin: 0 auto; padding: var(--s6) var(--gutter) var(--s9); }
.slx-single__back { font-size: var(--t-base); margin: 0 0 var(--s5); }
.slx-single__back a { text-decoration: none; font-weight: 600; }
.slx-single__back a:hover { text-decoration: underline; }

.slx-single__head { border-bottom: 1px solid var(--line); padding-bottom: var(--s5); margin-bottom: var(--s6); }
.slx-single__title { font-size: clamp(1.8rem, 4.4vw, 2.4rem); margin: 0 0 var(--s2); font-weight: 800; letter-spacing: -.032em; }
.slx-single__where { color: var(--ink-400); margin: 0 0 var(--s3); font-size: var(--t-lg); }
.slx-single__pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

.slx-single__facts {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; margin-bottom: var(--s6);
}
.slx-fact { display: flex; gap: var(--s4); background: var(--paper); padding: 13px 17px; font-size: var(--t-md); }
.slx-fact__k { flex: 0 0 104px; color: var(--ink-400); font-weight: 500; }
.slx-fact__v { color: var(--ink-900); font-weight: 650; }

.slx-single__body { margin-bottom: var(--s6); color: var(--ink-700); }

/*
 * The claim panel is styled once, further down. An earlier duplicate of this
 * selector set a gradient, a different border and a different radius, all of
 * which the later rule overrode -- two declarations fighting over one panel,
 * with the loser still shipping in the stylesheet.
 */

.slx-single__flag {
  margin-top: var(--s5); font-size: var(--t-base); color: var(--warn);
  background: var(--warn-wash); border: 1px solid var(--warn-line);
  border-radius: var(--r-md); padding: 12px 15px;
}
.slx-single__flag a { color: var(--warn); }

/* ---------------------------------------------------------------------------
   Search, 404
   --------------------------------------------------------------------------- */

.slx-searchform { display: flex; gap: var(--s2); max-width: 480px; }
.slx-searchform input[type="search"] {
  flex: 1; font: inherit; font-size: var(--t-md); padding: 11px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink-900);
}
.slx-searchform input[type="search"]:focus { border-color: var(--brand-400); }

.slx-404 { text-align: center; padding: var(--s9) var(--gutter); max-width: 620px; margin: 0 auto; }
.slx-404 h1 { font-size: clamp(2rem, 6vw, var(--t-4xl)); letter-spacing: -.035em; }
.slx-404 p { color: var(--ink-400); font-size: var(--t-lg); margin: 0 auto var(--s6); }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.slx-footer { background: var(--deep-900); color: #B9CCC4; margin-top: var(--s9); }

/*
 * Columns.
 *
 * The previous template read
 *     grid-template-columns: 1.4fr repeat(auto-fit, minmax(160px, 1fr));
 * which the spec does not allow: auto-fit cannot sit alongside a flexible
 * track. The whole declaration was therefore invalid and dropped, the grid
 * fell back to one column, and every desktop viewport got the four blocks
 * stacked into a 919px-tall wall. Explicit tracks fix it and are easier to
 * reason about than an auto-fit that has to be exactly right to work at all.
 */
.slx-footer__in {
  max-width: var(--wide); margin: 0 auto;
  padding: var(--s8) var(--gutter) var(--s7);
  display: grid; grid-template-columns: 1fr; gap: var(--s6);
}
@media (min-width: 640px) {
  .slx-footer__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
}
@media (min-width: 960px) {
  .slx-footer__in {
    /* Brand column carries a paragraph and a button, so it gets the room. */
    grid-template-columns: minmax(260px, 1.7fr) repeat(3, minmax(140px, 1fr));
    gap: var(--s7);
    align-items: start;
  }
}

/* Column headings: small caps labels, deliberately quiet. */
.slx-footer h2 {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #7E968C; margin: 0 0 var(--s4);
}

.slx-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.slx-footer a { color: #CBDBD4; text-decoration: none; font-size: var(--t-base); }
/*
 * Underline on hover shifts nothing, but it did make the link jump against
 * its neighbours on a dark ground. Colour alone carries it.
 */
.slx-footer a:hover { color: var(--brand-200); text-decoration: none; }
.slx-footer li a { display: inline-block; transition: color .15s ease, transform .15s ease; }
.slx-footer li a:hover { transform: translateX(2px); }

/* Brand block -------------------------------------------------------------- */

.slx-footer__brand { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; }
.slx-footer__logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; line-height: 1;
}
.slx-footer__logo-img { display: block; width: auto; height: 34px; max-width: 150px; object-fit: contain; }
.slx-footer__name {
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; color: #fff;
}
.slx-footer__logo:hover .slx-footer__name { color: var(--brand-200); }
.slx-footer__blurb {
  font-size: var(--t-base); color: #8FA79D; margin: 0; max-width: 38ch; line-height: 1.6;
}
.slx-footer__cta-line { margin: var(--s1) 0 0; }
.slx-footer__cta-line .slx-btn { background: var(--brand-500); }
.slx-footer__cta-line .slx-btn:hover { background: var(--brand-400); color: var(--deep-900); }

.slx-footer .slx-brand__name { color: #fff; }
.slx-footer .slx-brand__tag { color: #7E968C; }

/*
 * Base bar: the repeated site menu on one line, legal text on the other.
 * Column-reverse at narrow widths keeps the copyright last on the page.
 */
.slx-footer__base {
  max-width: var(--wide); margin: 0 auto;
  padding: var(--s5) var(--gutter) var(--s6);
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: var(--t-sm); color: #7E968C;
  display: flex; flex-direction: column; gap: var(--s4);
}
.slx-footer__base a { font-size: var(--t-sm); color: #8FA79D; }
.slx-footer__base a:hover { color: var(--brand-200); }

.slx-footer__navlist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
}
.slx-footer__navlist li { flex: none; }
.slx-footer__navlist a { display: inline-block; }
/* The inline row must not inherit the stacked-column layout above it. */
.slx-footer__base ul { flex-direction: row; }

.slx-footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  align-items: center;
}

@media (min-width: 800px) {
  .slx-footer__base {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: var(--s5);
  }
  .slx-footer__legal { justify-content: flex-end; }
}

/* ---------------------------------------------------------------------------
   Motion
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .slx-card:hover, .slx-teaser:hover { transform: none; }
}

/* ===========================================================================
   UNIFORM STATE PAGE
   Every state page now shares one shape regardless of which generation of
   pasted markup it happens to carry:
       breadcrumb -> hero -> filters + listings -> editorial -> CTA
   =========================================================================== */

.slx-crumbs {
  max-width: var(--wide); margin: 0 auto; padding: var(--s5) var(--gutter) 0;
  font-size: var(--t-base); color: var(--ink-400);
  display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center;
}
.slx-crumbs a { color: var(--ink-500); text-decoration: none; }
.slx-crumbs a:hover { color: var(--brand-600); text-decoration: underline; }
.slx-crumbs span[aria-hidden] { color: var(--line-strong); }
.slx-crumbs [aria-current] { color: var(--ink-800); font-weight: 600; }

.slx-state {
  max-width: var(--wide); margin: 0 auto;
  padding: var(--s5) var(--gutter) 0;
}
.slx-state__title {
  font-size: clamp(2rem, 5.2vw, 3.25rem); font-weight: 800;
  letter-spacing: -.035em; margin: 0 0 var(--s4); max-width: 20ch;
}
.slx-state__lede {
  font-size: var(--t-lg); color: var(--ink-500);
  max-width: 62ch; margin: 0 0 var(--s6); line-height: 1.6;
}

.slx-stats {
  display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 var(--s6); padding: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.slx-stat {
  padding: var(--s4) var(--s6) var(--s4) 0;
  margin-right: var(--s6); border-right: 1px solid var(--line);
}
.slx-stat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.slx-stat dt {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-400); margin: 0 0 var(--s1);
}
.slx-stat dd {
  margin: 0; font-size: var(--t-2xl); font-weight: 800;
  letter-spacing: -.03em; color: var(--ink-900);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}

/* The page's own editorial copy, stripped of its pasted styling and rendered
   through the theme's typography — the reason all 99 now match. */
.slx-state__body { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.slx-state__editorial {
  max-width: var(--measure);
  padding-top: var(--s7);
  border-top: 1px solid var(--line);
}
.slx-state__editorial h2 { font-size: var(--t-2xl); }
.slx-state__editorial h3 { font-size: var(--t-xl); }
.slx-state__editorial h4 { font-size: var(--t-lg); }
.slx-state__editorial img { display: none; }   /* pasted decorative images, now unstyled */
.slx-state__editorial a[href^="http"]:not([href*="swinglix"]) { word-break: break-word; }

@media (max-width: 620px) {
  .slx-stat { padding-right: var(--s4); margin-right: var(--s4); }
  .slx-stat dd { font-size: var(--t-xl); }
}

/* Remaining national installers, listed compactly so every company appears
   without 15 more full cards repeating on all fifty pages. */
.slx-more {
  margin-top: var(--s6); padding: var(--s5);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.slx-more__title {
  font-size: var(--t-base); font-weight: 700; letter-spacing: .01em;
  color: var(--ink-600); margin: 0 0 var(--s3);
}
.slx-more__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s2) var(--s4);
}
.slx-more__list li {
  display: flex; justify-content: space-between; gap: var(--s3);
  font-size: var(--t-base); padding: 7px 0; border-bottom: 1px solid var(--line);
}
.slx-more__list a { color: var(--ink-800); text-decoration: none; font-weight: 600; }
.slx-more__list a:hover { color: var(--brand-600); text-decoration: underline; }
.slx-more__list span { color: var(--ink-400); font-size: var(--t-sm); white-space: nowrap; }


/* ---- City index on a state page, and the cross-links on a city page ----
   Cities are a navigation layer, not content, so the cards stay quieter than
   a listing card: no shadow at rest, and the venue count carries the weight
   rather than a coloured accent. */
.slx-cities { margin-top: var(--s6); }

.slx-citygrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.slx-citycard { margin: 0; }
.slx-citycard__link {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.slx-citycard__link:hover,
.slx-citycard__link:focus-visible {
  border-color: var(--brand-400); background: var(--brand-50);
  transform: translateY(-1px);
}
.slx-citycard__link--flat { cursor: default; }
.slx-citycard__link--flat:hover { border-color: var(--line); background: var(--paper); transform: none; }
.slx-citycard__name {
  font-weight: 600; color: var(--ink-800); letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.slx-citycard__link--flat .slx-citycard__name { color: var(--ink-600); }
.slx-citycard__n {
  flex: none; font-size: var(--t-xs); font-weight: 500;
  color: var(--ink-400); font-variant-numeric: tabular-nums;
}

/* Other cities in the state, shown at the foot of a city page. */
.slx-nearby { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); }
.slx-nearby__title { font-size: var(--t-lg); margin: 0 0 var(--s3); letter-spacing: -.02em; }
/* .slx-prose ul sets padding-left: 1.35em (22.95px at 17px), which outranks
   a single class. Matching its specificity puts the pills back in line with
   the heading above them. */
ul.slx-nearby__list,
.slx-prose ul.slx-nearby__list {
  list-style: none; margin: 0 0 var(--s4);
  padding: 0; padding-inline-start: 0;
  display: flex; flex-wrap: wrap; gap: var(--s2);
}
.slx-nearby__list li {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 11px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--paper);
}
.slx-nearby__list a { text-decoration: none; color: var(--ink-700); font-weight: 550; }
.slx-nearby__list a:hover, .slx-nearby__list a:focus-visible { color: var(--brand-600); }
.slx-nearby__list em {
  font-style: normal; font-size: var(--t-xs); color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.slx-nearby__up { margin: 0; }

.slx-block--tight { margin-top: var(--s5); }

@media (max-width: 620px) {
  .slx-citygrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}


/* ---- Claim / add-a-business form ----
   Sits at the foot of an unclaimed listing. Kept visually calm: this is a
   task, not a pitch, and the owner has already decided to act by the time
   they reach it. */
.slx-claim {
  margin-top: var(--s6); padding: var(--s5);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper-2);
}
.slx-claim__title { margin: 0 0 var(--s2); font-size: var(--t-lg); letter-spacing: -.02em; }
.slx-claim__lede  { margin: 0 0 var(--s4); color: var(--ink-600); max-width: 62ch; }
.slx-claim--done  { border-color: var(--brand-400); background: var(--brand-50); }

.slx-form { display: flex; flex-direction: column; gap: var(--s3); }
.slx-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.slx-field { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.slx-field label { font-size: var(--t-sm); font-weight: 600; color: var(--ink-800); }
.slx-field input,
.slx-field select,
.slx-field textarea {
  width: 100%; padding: 9px 11px;
  font: inherit; font-size: var(--t-base); color: var(--ink-900);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); transition: border-color .15s ease, box-shadow .15s ease;
}
.slx-field input:focus,
.slx-field select:focus,
.slx-field textarea:focus {
  outline: none; border-color: var(--brand-600);
  box-shadow: 0 0 0 3px var(--brand-50);
}
.slx-field textarea { resize: vertical; min-height: 90px; }
.slx-hint { font-size: var(--t-xs); color: var(--ink-400); }
.slx-form__submit { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: var(--s2) 0 0; }

/* The honeypot must be unreachable for people but present for bots, so it is
   moved off-canvas rather than display:none -- some bots skip hidden fields. */
.slx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.slx-notice { padding: 11px 14px; border-radius: var(--r-sm); margin: 0 0 var(--s3); }
.slx-notice--error { background: #fdeceb; border: 1px solid #f3b6b2; color: #8a1f1a; }
.slx-notice p { margin: 0; }

@media (max-width: 620px) {
  .slx-field-row { grid-template-columns: 1fr; }
  .slx-claim { padding: var(--s4); }
}


/* ---- Business description on a card ----
   The card now carries a sentence describing what the business actually
   offers, drawn from its own data. It is the reason to click, so it gets
   real reading width and a settled grey rather than the muted meta tone --
   but it stays below the name and city, which are what people scan for.
   Clamped to three lines so a 900-character entry cannot stretch one card
   taller than its neighbours in the grid. */
.slx-card__desc {
  margin: 7px 0 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-600);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Cards sit in a grid, so pin the actions to the bottom and let the
   description absorb the slack. Without this a card with no description
   leaves its buttons floating mid-height. */
.slx-card { display: flex; flex-direction: column; }
.slx-card__pills { margin-top: auto; }

/* The full text on a listing's own page, where there is room for it. */
.slx-single__desc {
  margin: 0 0 var(--s4);
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 62ch;
  padding-left: var(--s4);
  border-left: 3px solid var(--brand-400);
}

@media (max-width: 620px) {
  .slx-card__desc { -webkit-line-clamp: 4; }
  .slx-single__desc { font-size: var(--t-base); padding-left: var(--s3); }
}


/* ---- Find your business (claim entry point) ----
   Sits above the add-a-business form on the Advertise page. Owner-supplied
   detail is the best data the directory can get, but only if an owner can
   reach their own entry, so this is deliberately the first thing they meet. */
.slx-find {
  margin-top: var(--s6); padding: var(--s5);
  border: 1px solid var(--brand-400); border-radius: var(--r-md);
  background: var(--brand-50);
}
.slx-find__title { margin: 0 0 var(--s2); font-size: var(--t-lg); letter-spacing: -.02em; }
.slx-find__lede  { margin: 0 0 var(--s4); color: var(--ink-700); max-width: 62ch; }
.slx-find__form  { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s4); }
.slx-find__form input[type="search"] {
  flex: 1 1 260px; padding: 10px 12px; font: inherit; font-size: var(--t-base);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper);
}
.slx-find__form input[type="search"]:focus {
  outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-100);
}
.slx-find__count, .slx-find__none { margin: 0 0 var(--s3); color: var(--ink-600); font-size: var(--t-sm); }
.slx-find__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.slx-find__item {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: 11px 13px; background: var(--paper); border-radius: var(--r-sm);
}
.slx-find__name { font-weight: 650; }
.slx-find__name a { text-decoration: none; }
.slx-find__where { color: var(--ink-400); font-size: var(--t-sm); }
.slx-find__gap   { color: var(--ink-400); font-size: var(--t-xs); }
.slx-find__state--done { margin-left: auto; font-size: var(--t-xs); color: var(--brand-700); font-weight: 650; }
.slx-find__item .slx-btn { margin-left: auto; }

@media (max-width: 620px) {
  .slx-find { padding: var(--s4); }
  .slx-find__item .slx-btn { margin-left: 0; }
}


/* ---- double-container correction -------------------------------------
   .slx-crumbs, .slx-state, .slx-state__body and .slx-block each centre
   themselves with max-width and a gutter, which is right when a block is
   rendered straight into the page. On a directory page they arrive inside
   article.slx-plain, which already provides exactly that -- so the width
   and gutter were applied twice and every generated section sat 40px to
   the right of the page's own h1. Measured: headline at 113px, its own
   lede at 153px, on all 1,955 state and city pages.

   Neutralising them only when nested keeps standalone use intact. */
.slx-plain > .slx-crumbs,
.slx-plain .slx-prose > .slx-crumbs,
.slx-plain .slx-state,
.slx-plain .slx-state__body,
.slx-plain .slx-block {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
/* The vertical padding those blocks carry is still wanted. */
.slx-plain .slx-state { padding-top: var(--s5); }
.slx-plain .slx-block { margin-top: var(--s8); margin-bottom: var(--s8); }


/* ---- density and rhythm -----------------------------------------------
   Three measured problems on a long state page (Alabama runs to 13,500px
   with 27 city cards and 47 listings):

   1. The grid gap was 16px while each card carries 24px of internal
      padding, so cards were closer to each other than their own contents
      were to their edges -- they read as a crowded block rather than a set.
   2. The city grid sat at an 8px gap, tighter still.
   3. The card description was 13px, below comfortable reading for the one
      line on the card that is actually prose.                              */
.slx-grid { gap: var(--s5); }
.slx-citygrid { gap: var(--s3); }
.slx-card__desc { font-size: 14px; line-height: 1.55; }

/* ---- sticky filter bar -------------------------------------------------
   The base rule above was already sticky. All that was missing was the
   cue that it HAS stuck, so the hairline and shadow live here and nothing
   else is re-declared -- an earlier version restated position, background
   and padding, which quietly stripped the bar's border and left its
   contents 8px out of line with the page.                                  */
.slx-filters::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--line); opacity: 0; transition: opacity .15s ease;
}
.slx-filters.is-stuck::after { opacity: 1; }
.slx-filters.is-stuck { box-shadow: 0 6px 16px -12px rgba(11,31,23,.35); }
@media (prefers-reduced-motion: reduce) { .slx-filters::after { transition: none; } }

@media (max-width: 900px) {
  /* The mobile header is a different height and the drawer overlays. */
  .slx-filters { top: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .slx-filters::after { transition: none; }
}


/* ==========================================================================
   listing-site polish
   Measured problems, and what the established directories do about them.
   ========================================================================== */

/* ---- Search and filter controls ---------------------------------------
   The filter row read as a form on a page rather than the primary tool it
   is. Directory sites give search real presence: a taller field, a visible
   icon, and enough type size to read at a glance. 45px was borderline;
   48px with a 16px face is comfortable and clears the 44px touch target. */
/* The base rule sets the flex layout; only the control sizing belongs here. */
.slx-filters input[type="search"] {
  flex: 1 1 320px;
  min-height: 48px;
  padding: 12px 14px 12px 42px;
  font-size: var(--t-md);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235C7168' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center;
}
.slx-filters select {
  min-height: 48px; padding: 12px 14px; font-size: var(--t-md);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background-color: var(--paper);
}
.slx-filters input[type="search"]:focus,
.slx-filters select:focus {
  outline: none; border-color: var(--brand-600);
  box-shadow: 0 0 0 3px var(--brand-100);
}

/* The find-your-business field is the entry point for every claim, so it
   gets the same weight rather than looking like a newsletter signup. */
.slx-find__form input[type="search"] {
  min-height: 52px; padding: 13px 16px; font-size: var(--t-md); border-radius: var(--r-md);
}
.slx-find__form .slx-btn { min-height: 52px; padding-left: var(--s5); padding-right: var(--s5); }

/* ---- Cards -------------------------------------------------------------
   The name was 16px against a 14px description -- too little separation
   for the one thing people scan. Listing sites lean hard on the title and
   let everything else recede. */
.slx-card__name { font-size: var(--t-md); line-height: 1.3; letter-spacing: -.01em; }
.slx-card__name a { text-decoration: none; color: var(--ink-900); }
.slx-card__name a:hover { color: var(--brand-700); }
.slx-card__meta {
  font-size: var(--t-sm); color: var(--ink-500);
  display: flex; align-items: center; gap: 5px;
}
/* A location pin makes the city read as a place rather than a stray word. */
.slx-card__meta::before {
  content: ""; width: 13px; height: 13px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.7 2 6 4.7 6 8c0 4.5 6 14 6 14s6-9.5 6-14c0-3.3-2.7-6-6-6zm0 8.5A2.5 2.5 0 1 1 12 5a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.7 2 6 4.7 6 8c0 4.5 6 14 6 14s6-9.5 6-14c0-3.3-2.7-6-6-6zm0 8.5A2.5 2.5 0 1 1 12 5a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.slx-card__desc {
  -webkit-line-clamp: 3;
  /* Belt and braces: the clamp draws its own ellipsis, but stating it
     means a browser without -webkit-line-clamp still signals the cut. */
  text-overflow: ellipsis;
}
/* Actions sit on their own line, separated, so the card has a clear foot. */
.slx-card__actions {
  display: flex; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.slx-card__unclaimed {
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
}

@media (max-width: 620px) {
  .slx-filters input[type="search"] { flex-basis: 100%; }
  .slx-filters select { flex: 1 1 45%; }
}

/* ===========================================================================
   LISTING DETAIL  v2

   Built from the fields this directory actually holds. There are no photos,
   ratings, hours or price bands on any listing, so none are designed for --
   an empty slot reads as a fault, a page made of real fields reads as
   finished. Everything that lets a visitor act sits in one card that stays
   with them while they read.
   =========================================================================== */

.slx-listing {
  max-width: var(--wide); margin: 0 auto; padding: var(--s5) var(--gutter) var(--s8);
}

/* Identity band ------------------------------------------------------------ */

.slx-listing__head {
  display: flex; align-items: center; gap: var(--s5);
  padding-bottom: var(--s5); margin-bottom: var(--s6);
  border-bottom: 1px solid var(--line);
}

/*
 * The mark stands in for the photograph nobody has supplied yet. A neutral
 * grey placeholder would read as a missing image; a deliberate tile carrying
 * the initial reads as a choice, and it quietly colour-codes the category.
 * When a real featured image arrives it fills the same box.
 */
.slx-listing__mark {
  flex: none; width: 92px; height: 92px; border-radius: var(--r-lg);
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, var(--brand-400), var(--brand-700));
  box-shadow: var(--e2);
}
.slx-listing__mark[data-type="installer"],
.slx-listing__mark[data-type="av-integrator"],
.slx-listing__mark[data-type="builder"],
.slx-listing__mark[data-type="turf-installer"],
.slx-listing__mark[data-type="manufacturer-installer"],
.slx-listing__mark[data-type="retailer-installer"] {
  background: linear-gradient(150deg, #3F6B5C, var(--deep-700));
}
.slx-listing__mark[data-type="coaching"] { background: linear-gradient(150deg, #2F8F73, #10513E); }
.slx-listing__mark[data-type="golf-club"] { background: linear-gradient(150deg, #4E8A4A, #1F4A2C); }
.slx-listing__mark[data-type="hybrid-venue"] { background: linear-gradient(150deg, #C98A2E, #7A4A12); }
.slx-listing__initial {
  font-size: 2.6rem; font-weight: 800; color: #fff; letter-spacing: -.04em; line-height: 1;
}
.slx-listing__photo { width: 100%; height: 100%; object-fit: cover; }

.slx-listing__ident { min-width: 0; }
.slx-listing__title {
  font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 800;
  letter-spacing: -.03em; margin: 0 0 var(--s2); color: var(--ink-900);
}
.slx-listing__where { margin: 0 0 var(--s3); color: var(--ink-500); font-size: var(--t-md); }
.slx-listing__pills { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.slx-listing__pills .slx-pill {
  display: inline-block; font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--paper-3); color: var(--ink-600);
}
.slx-listing__pills .slx-pill--featured { background: var(--brand-600); color: #fff; }
.slx-listing__pills .slx-pill--verified,
.slx-listing__pills .slx-pill--claimed  { background: var(--brand-100); color: var(--brand-700); }
.slx-listing__pills .slx-pill--chain {
  background: transparent; color: var(--ink-400); border: 1px dashed var(--line-strong);
}

/* Two columns -------------------------------------------------------------- */

.slx-listing__grid { display: grid; grid-template-columns: 1fr; gap: var(--s6); }
@media (min-width: 900px) {
  .slx-listing__grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--s7); align-items: start;
  }
}

.slx-listing__section { margin: 0 0 var(--s6); }
.slx-listing__h2 {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-400); margin: 0 0 var(--s3);
}
.slx-listing__desc { margin: 0; font-size: var(--t-lg); line-height: 1.7; color: var(--ink-700); }
.slx-listing__more { margin: var(--s3) 0 0; font-size: var(--t-base); }
.slx-listing__flag {
  background: var(--warn-wash); border: 1px solid var(--warn-line); color: var(--warn);
  padding: var(--s3) var(--s4); border-radius: var(--r-md); font-size: var(--t-base);
}

/* Action card -------------------------------------------------------------- */

.slx-listing__aside { min-width: 0; }
@media (min-width: 900px) {
  /*
   * Sticky needs a top offset clear of the sticky header, or the card slides
   * under it. 64px is the header at its tallest plus a little air.
   */
  .slx-listing__aside { position: sticky; top: 84px; }
}

.slx-actioncard {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--e2);
  padding: var(--s5);
}
.slx-actioncard__buttons { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); }
.slx-actioncard__btn { width: 100%; padding: 12px 16px; font-size: var(--t-md); }

/* Listing gallery. auto-fill rather than a fixed column count, so two photos
   do not stretch to fill a five-wide grid and look like a mistake. */
.slx-gallery {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s3);
}
.slx-gallery__item { margin: 0; }
.slx-gallery__item a {
  display: block; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper-2);
}
.slx-gallery__item a:hover { border-color: var(--brand-400); }
.slx-gallery__item a:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
/* A fixed ratio keeps the row tidy whatever the owner uploaded. */
.slx-gallery__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 620px) {
  .slx-gallery { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
}

.slx-actioncard__facts { margin: 0; display: flex; flex-direction: column; gap: var(--s4); }
/* The label sits ABOVE the value in the sidebar -- the two rules below set
   both children to display:block, which only makes sense stacked. The parent
   was left as the base .slx-fact flex row, so a fixed 104px label sat beside
   the value and the pair needed 279px of a 256px column. The website was the
   first value long enough to show it, by spilling 6px out of its own card. */
.slx-actioncard__facts .slx-fact { margin: 0; display: block; }
.slx-actioncard__facts .slx-fact__k {
  display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-400); margin: 0 0 2px;
}
.slx-actioncard__facts .slx-fact__v {
  display: block; margin: 0; font-size: var(--t-base); color: var(--ink-800); line-height: 1.5;
}
/* A URL, an email or a hyphen-free business name has no break opportunity, so
   normal wrapping cannot help it and it overflows silently. `anywhere` lets the
   browser break mid-string only when there is no other option. Applied to the
   value everywhere, not just the sidebar: a long link overruns its column in
   the main content for exactly the same reason. */
.slx-fact__v,
.slx-actioncard__facts .slx-fact__v { overflow-wrap: anywhere; }

/* Flex and grid children default to min-width:auto, which refuses to shrink
   below their content. Without this a wide child stretches the whole card. */
.slx-listing__aside,
.slx-actioncard,
.slx-actioncard__facts,
.slx-actioncard__facts .slx-fact { min-width: 0; }
.slx-actioncard__verified {
  margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--ink-400);
}
.slx-actioncard__own { margin: var(--s3) 0 0; font-size: var(--t-sm); color: var(--ink-500); }

@media (max-width: 560px) {
  .slx-listing__head { gap: var(--s4); }
  .slx-listing__mark { width: 64px; height: 64px; border-radius: var(--r-md); }
  .slx-listing__initial { font-size: 1.8rem; }
}

/* Card photograph, shown only when an owner has supplied one. ------------- */
.slx-card__media {
  display: block; margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s4);
  border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--paper-3);
}
.slx-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Claim form: the photo field and its guidance. */
.slx-form__hint { display: block; font-size: var(--t-sm); color: var(--ink-400); margin-top: 4px; }
.slx-form input[type="file"] {
  display: block; width: 100%; font: inherit; font-size: var(--t-base);
  padding: 9px 10px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  background: var(--paper-2); color: var(--ink-700);
}
.slx-form input[type="file"]:hover { border-color: var(--brand-400); }

/*
 * Paid placement disclosure. Muted amber rather than brand green: it is a
 * notice, not an endorsement, and it must not read as a quality mark the way
 * the old "Verified" pill did.
 */
.slx-card__pills .slx-pill--sponsored,
.slx-listing__pills .slx-pill--sponsored {
  background: var(--warn-wash); color: var(--warn); border: 1px solid var(--warn-line);
}

/* ===========================================================================
   PAID TIER COMPONENTS
   Rendered only when SLX_Tiers says the listing's plan includes them, so
   none of this appears on a free listing even if the fields hold values.
   =========================================================================== */

/* Hero image — City Spotlight ---------------------------------------------- */

.slx-listing__hero {
  border-radius: var(--r-lg); overflow: hidden; margin: 0 0 var(--s5);
  aspect-ratio: 21 / 8; background: var(--paper-3); box-shadow: var(--e2);
}
.slx-listing__heroimg { width: 100%; height: 100%; object-fit: cover; display: block; }
/*
 * With a hero above it the square mark repeats the same picture, so it steps
 * back to a small badge rather than competing with the banner.
 */
.slx-listing__head--hero .slx-listing__mark { width: 56px; height: 56px; border-radius: var(--r-md); }
.slx-listing__head--hero .slx-listing__initial { font-size: 1.5rem; }

/* Promotion ---------------------------------------------------------------- */

.slx-promo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3);
  margin: 0 0 var(--s5); padding: var(--s3) var(--s4);
  background: var(--warn-wash); border: 1px solid var(--warn-line);
  border-radius: var(--r-md); color: var(--ink-800);
}
.slx-promo__tag {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--warn); background: #fff; border: 1px solid var(--warn-line);
  border-radius: var(--r-pill); padding: 2px 9px; flex: none;
}
.slx-promo__text { font-weight: 650; font-size: var(--t-md); }
.slx-promo__until { font-size: var(--t-sm); color: var(--ink-500); }

.slx-card__promo {
  display: flex; align-items: baseline; gap: var(--s2);
  margin: 0 0 var(--s2); font-size: var(--t-sm); font-weight: 600; color: var(--warn);
}
.slx-card__promo-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  background: var(--warn-wash); border: 1px solid var(--warn-line);
  border-radius: var(--r-pill); padding: 1px 7px; flex: none;
}

/* Amenities ---------------------------------------------------------------- */

.slx-amenities {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s2);
}
.slx-amenity {
  font-size: var(--t-base); color: var(--ink-700);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 5px 13px;
}
.slx-card__pills .slx-pill--amenity {
  background: transparent; color: var(--ink-500); border: 1px solid var(--line);
}

/* Leagues and events ------------------------------------------------------- */

.slx-events p { margin: 0 0 var(--s3); color: var(--ink-700); }
.slx-events p:last-child { margin-bottom: 0; }

/* Booking is the primary action wherever it appears. */
.slx-actioncard__btn--book { background: var(--brand-600); }
.slx-actioncard__btn--book:hover { background: var(--brand-700); }

/*
 * City Spotlight card. Already sorted to the top by tier weight; this makes
 * that position legible rather than accidental -- a wider card with a brand
 * edge, so a visitor can see it is a different kind of entry, alongside the
 * Sponsored pill that says why.
 */
.slx-card--city-spotlight {
  border-color: var(--brand-200);
  box-shadow: var(--e3);
  position: relative;
}
.slx-card--city-spotlight::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  border-radius: var(--r-md) 0 0 var(--r-md);
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
}
@media (min-width: 780px) {
  /*
   * Two columns wide, so it reads as the lead entry on the page. The grid the
   * cards actually sit in is .slx-grid; .slx-cards is a different list and
   * matching only that one did nothing.
   */
  .slx-grid > .slx-card--city-spotlight,
  .slx-cards > .slx-card--city-spotlight { grid-column: span 2; }
}

/* ===========================================================================
   PRICING
   Rendered from the tier matrix, appended to the Advertise page above the
   claim form. The page's own content and URL are untouched.
   =========================================================================== */

.slx-pricing {
  max-width: var(--wide); margin: var(--s8) auto 0; padding: 0 var(--gutter);
}
.slx-pricing__head { text-align: center; max-width: 62ch; margin: 0 auto var(--s6); }
.slx-pricing__title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 var(--s3); }
.slx-pricing__lede { font-size: var(--t-lg); color: var(--ink-500); margin: 0; line-height: 1.6; }

.slx-plans { display: grid; grid-template-columns: 1fr; gap: var(--s4); align-items: start; }
@media (min-width: 860px) {
  .slx-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
}

.slx-plan {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); padding: var(--s5); position: relative;
}
/*
 * The recommended plan is raised rather than recoloured. A third colour in a
 * three-card row reads as decoration; height and weight read as a choice.
 */
.slx-plan--pick { border-color: var(--brand-400); box-shadow: var(--e3); }
@media (min-width: 860px) { .slx-plan--pick { margin-top: -12px; padding-top: calc(var(--s5) + 12px); } }

.slx-plan__flag {
  position: absolute; top: -11px; left: var(--s5);
  margin: 0; padding: 3px 11px; border-radius: var(--r-pill);
  background: var(--brand-600); color: #fff;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.slx-plan__name { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.slx-plan__tagline { margin: 0 0 var(--s4); color: var(--brand-600); font-weight: 600; font-size: var(--t-base); }

.slx-plan__price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.slx-plan__amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; color: var(--ink-900); line-height: 1; }
.slx-plan__per { color: var(--ink-400); font-size: var(--t-base); }
.slx-plan__yearly { margin: 6px 0 0; font-size: var(--t-sm); color: var(--ink-500); }
.slx-plan__for {
  margin: var(--s4) 0; padding-top: var(--s4); border-top: 1px solid var(--line);
  color: var(--ink-600); font-size: var(--t-base); line-height: 1.55;
}

.slx-plan__list { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; flex-direction: column; gap: 9px; }
.slx-plan__list li { position: relative; padding-left: 25px; font-size: var(--t-base); color: var(--ink-700); }
.slx-plan__list li::before {
  content: ""; position: absolute; left: 3px; top: .48em;
  width: 11px; height: 6px; border-left: 2px solid var(--brand-500); border-bottom: 2px solid var(--brand-500);
  transform: rotate(-45deg);
}
/* A row the plan does NOT include: muted text, and the tick becomes a dash.
   Kept legible rather than struck through -- the point is to let the eye run
   down a column and see where a plan stops, not to shame the cheaper plan. */
.slx-plan__list li.is-off { color: var(--ink-400); }
.slx-plan__list li.is-off::before {
  width: 10px; height: 0; top: .72em; left: 4px;
  border-left: 0; border-bottom: 2px solid var(--line-strong);
  transform: none;
}

/* Push every button onto the same line whatever the list length. */
.slx-plan__cta { margin: auto 0 0; }
.slx-plan__cta .slx-btn { width: 100%; padding: 12px 16px; }

.slx-pricing__note {
  max-width: 70ch; margin: var(--s5) auto 0; text-align: center;
  color: var(--ink-500); font-size: var(--t-base); line-height: 1.6;
}
.slx-pricing__note--small { font-size: var(--t-sm); color: var(--ink-400); margin-top: var(--s3); }

.slx-pricing__installers {
  max-width: 70ch; margin: var(--s7) auto 0; padding: var(--s5);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.slx-pricing__installers h3 { margin: 0 0 var(--s2); font-size: var(--t-lg); }
.slx-pricing__installers p { margin: 0; color: var(--ink-600); font-size: var(--t-base); line-height: 1.6; }

/* Venues / Installers switch ---------------------------------------------- */

.slx-switch {
  display: inline-flex; gap: 3px; margin: 0 auto var(--s5); padding: 4px;
  background: var(--paper-3); border-radius: var(--r-pill);
}
.slx-pricing .slx-switch { display: flex; width: max-content; margin-inline: auto; }
.slx-switch__btn {
  font: inherit; font-size: var(--t-base); font-weight: 650;
  padding: 8px 22px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-500); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.slx-switch__btn:hover { color: var(--ink-800); }
.slx-switch__btn.is-on { background: var(--paper); color: var(--ink-900); box-shadow: var(--e1); }

/*
 * Both ladders ship in the HTML and one is hidden, so a reader without
 * JavaScript sees every plan rather than none. .is-hidden is only ever added
 * by the script.
 */
.slx-ladder.is-hidden { display: none; }

/* ===========================================================================
   SIGN-UP AREA  — "find your listing" + the claim/add form
   ===========================================================================

   These two panels sit at the foot of the Advertise page and were the least
   finished thing on it. Three faults, all structural rather than decorative:

   1. Nothing constrained their width, so on a 1280px screen the text inputs
      rendered 1215px wide. A single-line field the width of a desk reads as
      an unstyled document, and it is genuinely harder to use -- the eye has
      to travel the whole width to find the caret.
   2. The two panels fought each other: one brand-green with a green border,
      the other grey on grey, stacked directly on top of one another.
   3. Fields were 39px tall with 15px text, below the 44px touch target that
      makes a form comfortable on a phone.
   =========================================================================== */

.slx-find,
.slx-claim {
  max-width: 820px;
  margin-inline: auto;
}

/* One panel, two steps. The search is the lead-in, so it keeps the tint and
   loses its own border where it meets the form below it. */
.slx-find {
  margin-top: var(--s8);
  padding: var(--s6) var(--s6) var(--s5);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(180deg, var(--brand-50), var(--paper));
}
.slx-claim {
  margin-top: 0;
  padding: var(--s5) var(--s6) var(--s6);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--paper);
  box-shadow: var(--e2);
}

.slx-find__title,
.slx-claim__title {
  font-size: var(--t-xl); font-weight: 800; letter-spacing: -.025em;
  margin: 0 0 var(--s2);
}
/* A numbered pair, so it is obvious these are two steps and not two forms. */
/* Attribute-gated: without it the rule would paint an empty green disc on
   every listing page, which shows the same panel with no step before it. */
.slx-find__title[data-step]::before,
.slx-claim__title[data-step]::before {
  content: attr(data-step);
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; margin-right: 10px; vertical-align: 2px;
  border-radius: 50%; background: var(--brand-600); color: #fff;
  font-size: var(--t-sm); font-weight: 800;
}
.slx-find__lede,
.slx-claim__lede { font-size: var(--t-md); color: var(--ink-500); line-height: 1.6; }

/* Search: one row that does not collapse into a 21px sliver. */
.slx-find__form { gap: var(--s2); align-items: stretch; }
.slx-find__form input[type="search"] {
  flex: 1 1 320px; min-height: 46px; padding: 11px 14px;
  font-size: var(--t-md); border-radius: var(--r-sm);
}
.slx-find__form .slx-btn { min-height: 46px; }

/* Fields ------------------------------------------------------------------ */

.slx-form { gap: var(--s4); }
.slx-field-row { gap: var(--s4); }
.slx-field label { font-size: var(--t-sm); font-weight: 650; color: var(--ink-700); letter-spacing: .005em; }
.slx-field input,
.slx-field select,
.slx-field textarea {
  min-height: 46px; padding: 11px 13px;
  /*
   * 16px, not the 15px used elsewhere: Safari on iOS zooms the viewport when
   * a focused field is under 16px, and the page then sits off-centre for the
   * rest of the session.
   */
  font-size: 16px;
  border-radius: var(--r-sm);
}
.slx-field textarea { min-height: 110px; }
.slx-field select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--ink-400) 50%),
  linear-gradient(135deg, var(--ink-400) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 38px;
}

.slx-form__row { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.slx-form__row > label { font-size: var(--t-sm); font-weight: 650; color: var(--ink-700); }
.slx-form__row select,
.slx-form__row input[type="file"] { min-height: 46px; font-size: 16px; }

/* The two-step notice, stated before the button rather than after it. Tinted
   rather than warning-coloured: this is how the process works, not a problem
   the person has caused. */
.slx-claim__next {
  margin: var(--s4) 0 0; padding: var(--s3) var(--s4);
  background: var(--brand-50); border: 1px solid var(--brand-200);
  border-radius: var(--r-sm);
  font-size: var(--t-sm); line-height: 1.55; color: var(--ink-700);
}
.slx-claim__next strong { color: var(--brand-700); }

/* Submit sits apart from the fields, on its own rule. */
.slx-form__submit {
  margin-top: var(--s3); padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.slx-form__submit .slx-btn { min-height: 48px; padding-inline: var(--s6); font-size: var(--t-md); }

@media (max-width: 620px) {
  .slx-find  { padding: var(--s5) var(--s4) var(--s4); }
  .slx-claim { padding: var(--s4); }
  .slx-form__submit .slx-btn { width: 100%; }
}

/* ===========================================================================
   ADVERTISE PAGE
   Rebuilt in the theme. The seven pasted sections it replaces each carried
   their own font stack, colour variables and inline padding -- a second
   design system inside the first, which is why the page never matched the
   rest of the site however much the pricing block was polished.
   =========================================================================== */

.slx-adv { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

/* Hero --------------------------------------------------------------------- */

.slx-adv__hero {
  max-width: 46rem; margin: 0 auto; padding: var(--s8) 0 var(--s7); text-align: center;
}
.slx-adv__eyebrow {
  margin: 0 0 var(--s3); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand-600);
}
.slx-adv__h1 {
  margin: 0 0 var(--s4); font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.08;
}
.slx-adv__lede {
  margin: 0 auto var(--s6); max-width: 40rem;
  font-size: var(--t-lg); line-height: 1.6; color: var(--ink-500);
}
.slx-adv__cta { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin: 0 0 var(--s7); }
.slx-adv__cta .slx-btn { min-height: 48px; padding-inline: var(--s6); font-size: var(--t-md); }

/* Counted live, so the page cannot claim a size the directory has outgrown
   or fallen short of. */
.slx-adv__stats {
  list-style: none; margin: 0; padding: var(--s5) 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s5) var(--s8);
}
.slx-adv__stats li { display: flex; flex-direction: column; gap: 2px; }
.slx-adv__stats strong {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.slx-adv__stats span { font-size: var(--t-sm); color: var(--ink-400); }

/* Sections ----------------------------------------------------------------- */

.slx-adv__section { padding: var(--s7) 0; border-top: 1px solid var(--line); }
.slx-adv__h2 {
  margin: 0 0 var(--s6); text-align: center;
  font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -.03em;
}

.slx-adv__grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 820px) { .slx-adv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
.slx-adv__card {
  padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper-2);
}
.slx-adv__card h3 { margin: 0 0 var(--s2); font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; }
.slx-adv__card p { margin: 0; color: var(--ink-600); font-size: var(--t-base); line-height: 1.6; }

/* Steps: numbered by the list itself, so the markup stays an ordered list. */
.slx-adv__steps {
  list-style: none; counter-reset: slxstep; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--s5);
}
@media (min-width: 820px) { .slx-adv__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.slx-adv__steps li { counter-increment: slxstep; padding-top: var(--s6); position: relative; }
.slx-adv__steps li::before {
  content: counter(slxstep);
  position: absolute; top: 0; left: 0;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand-600); color: #fff;
  font-size: var(--t-base); font-weight: 800;
}
.slx-adv__steps h3 { margin: 0 0 var(--s2); font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; }
.slx-adv__steps p { margin: 0; color: var(--ink-600); font-size: var(--t-base); line-height: 1.6; }

/* FAQ ---------------------------------------------------------------------- */

.slx-adv__faq { max-width: 46rem; margin: 0 auto; }
.slx-adv__faq details { border-bottom: 1px solid var(--line); }
.slx-adv__faq summary {
  cursor: pointer; list-style: none; padding: var(--s4) var(--s6) var(--s4) 0;
  font-size: var(--t-md); font-weight: 650; color: var(--ink-900); position: relative;
}
.slx-adv__faq summary::-webkit-details-marker { display: none; }
.slx-adv__faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--ink-400); border-bottom: 2px solid var(--ink-400);
  transform: rotate(45deg); transition: transform .18s ease;
}
.slx-adv__faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.slx-adv__faq summary:hover { color: var(--brand-600); }
.slx-adv__faq p { margin: 0 0 var(--s4); color: var(--ink-600); font-size: var(--t-base); line-height: 1.65; max-width: 62ch; }

/* The pricing block is injected into this placeholder by SLX_Pricing. */
#slx-pricing:empty { display: none; }

/* ===========================================================================
   HOME PAGE
   Rebuilt in the theme. What it replaces carried two <style> blocks, two hero
   sections and two <h1> elements; a document gets one first-level heading.
   =========================================================================== */

.slx-home { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

.slx-home__hero { max-width: 44rem; margin: 0 auto; padding: var(--s9) 0 var(--s8); text-align: center; }
.slx-home__h1 {
  margin: 0 0 var(--s4); font-size: clamp(2.1rem, 5.6vw, 3.4rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.05;
}
.slx-home__lede { margin: 0 auto var(--s6); max-width: 38rem; font-size: var(--t-lg); line-height: 1.6; color: var(--ink-500); }
.slx-home__cta { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin: 0; }
.slx-home__cta .slx-btn { min-height: 50px; padding-inline: var(--s6); font-size: var(--t-md); }

.slx-home__section { padding: var(--s7) 0; border-top: 1px solid var(--line); }
.slx-home__h2 {
  margin: 0 0 var(--s5); font-size: clamp(1.35rem, 2.8vw, 1.8rem);
  font-weight: 800; letter-spacing: -.03em;
  text-align: center; text-wrap: balance;
}
/* The lede belongs to the heading above it, so it centres with it -- a centred
   title over a left-hugging paragraph reads as a mistake. The content below
   each heading stays left aligned, because cards, lists and answers are read,
   not admired. */
.slx-home__intro {
  margin: -8px auto var(--s5); color: var(--ink-500); font-size: var(--t-md);
  max-width: 62ch; text-align: center;
}

/* Three routes in ------------------------------------------------------- */

.slx-home__paths { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 820px) { .slx-home__paths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }

.slx-home__path {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.slx-home__path:hover { border-color: var(--brand-400); box-shadow: var(--e3); transform: translateY(-2px); }
.slx-home__path h3 { margin: 0; font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; color: var(--ink-900); }
.slx-home__path p { margin: 0; color: var(--ink-600); font-size: var(--t-base); line-height: 1.6; }
.slx-home__go { margin-top: auto; padding-top: var(--s3); color: var(--brand-600); font-weight: 650; font-size: var(--t-base); }
/* The launch-monitor cards explain rather than link, so they do not lift. */
.slx-home__path--static { background: var(--paper-2); }
.slx-home__paths--flat .slx-home__path { box-shadow: none; }

/* Busiest cities --------------------------------------------------------- */

.slx-home__cities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s2); }
@media (min-width: 560px) { .slx-home__cities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .slx-home__cities { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); } }
.slx-home__cities a {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s3) var(--s4); border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--paper); text-decoration: none;
}
.slx-home__cities a:hover { border-color: var(--brand-400); background: var(--brand-50); }
.slx-home__cityname { font-weight: 700; color: var(--ink-900); font-size: var(--t-md); letter-spacing: -.015em; }
.slx-home__citymeta { font-size: var(--t-sm); color: var(--ink-400); }

/* Every state, as a directory front door should have ---------------------- */

.slx-home__states {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.slx-home__states a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 11px var(--s4); background: var(--paper);
  text-decoration: none; color: var(--ink-800); font-size: var(--t-base);
}
.slx-home__states a:hover { background: var(--brand-50); color: var(--brand-700); }
.slx-home__states span {
  font-size: var(--t-xs); font-weight: 700; color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

/* Questions --------------------------------------------------------------- */

.slx-home__faq { max-width: 48rem; margin-inline: auto; }
.slx-home__faqgroup {
  margin: var(--s6) 0 var(--s2); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400);
}
.slx-home__faqgroup:first-of-type { margin-top: 0; }
.slx-home__faq details { border-bottom: 1px solid var(--line); }
.slx-home__faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: var(--s4) var(--s6) var(--s4) 0;
  font-size: var(--t-md); font-weight: 650; color: var(--ink-900);
}
.slx-home__faq summary::-webkit-details-marker { display: none; }
.slx-home__faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; margin-top: -6px;
  width: 9px; height: 9px; border-right: 2px solid var(--ink-400); border-bottom: 2px solid var(--ink-400);
  transform: rotate(45deg); transition: transform .18s ease;
}
.slx-home__faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.slx-home__faq summary:hover { color: var(--brand-600); }
.slx-home__faq p { margin: 0 0 var(--s4); color: var(--ink-600); font-size: var(--t-base); line-height: 1.65; max-width: 64ch; }

/* Owner call to action ---------------------------------------------------- */

.slx-home__owner {
  margin: var(--s7) 0 var(--s8); padding: var(--s7) var(--s6);
  border-radius: var(--r-xl); background: var(--deep-900); color: #C6D6CF; text-align: center;
}
.slx-home__owner h2 { margin: 0 0 var(--s3); color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing: -.03em; }
.slx-home__owner p { margin: 0 auto var(--s5); max-width: 52ch; font-size: var(--t-md); line-height: 1.6; }
.slx-home__owner p:last-child { margin-bottom: 0; }
.slx-home__owner .slx-btn { background: var(--brand-500); min-height: 48px; padding-inline: var(--s6); }
.slx-home__owner .slx-btn:hover { background: var(--brand-400); color: var(--deep-900); }

/* ===========================================================================
   BRANDS PAGE
   Rebuilt in the theme. Class names are prefixed slx-brand rather than reusing
   slx-card / slx-grid / slx-filters, which the pasted page did -- two
   stylesheets styling the same elements and fighting over the result.
   =========================================================================== */

.slx-brands { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.slx-brands__head { max-width: 46rem; padding: var(--s8) 0 var(--s5); }
.slx-brands__h1 { margin: 0 0 var(--s3); font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; }
.slx-brands__lede { margin: 0; font-size: var(--t-lg); line-height: 1.6; color: var(--ink-500); }

.slx-brands__controls {
  position: sticky; top: 64px; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; margin-bottom: var(--s5);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.slx-brands__search { flex: 1 1 260px; display: block; }
.slx-brands__search input { width: 100%; min-height: 44px; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--ink-900); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.slx-brands__search input:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-50); }
.slx-brands__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.slx-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--t-sm); font-weight: 650; padding: 8px 14px; cursor: pointer; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--paper); color: var(--ink-600); transition: background .15s ease, border-color .15s ease, color .15s ease; }
.slx-chip:hover { border-color: var(--brand-400); color: var(--brand-700); }
.slx-chip span { font-size: var(--t-xs); font-weight: 700; color: var(--ink-400); }
.slx-chip.is-on { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.slx-chip.is-on span { color: rgba(255,255,255,.75); }
.slx-brands__count { margin: 0 0 0 auto; font-size: var(--t-sm); color: var(--ink-400); }

.slx-brands__grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 700px)  { .slx-brands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .slx-brands__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }

.slx-brand { display: flex; flex-direction: column; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); transition: border-color .15s ease, box-shadow .15s ease; }
.slx-brand:hover { border-color: var(--brand-200); box-shadow: var(--e2); }
.slx-brand[hidden] { display: none; }
.slx-brand__head { padding-bottom: var(--s3); margin-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.slx-brand__name { margin: 0 0 4px; font-size: var(--t-lg); font-weight: 800; letter-spacing: -.025em; }
.slx-brand__badge { margin: 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-600); }
.slx-brand__facts { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.slx-brand__facts li { font-size: var(--t-base); line-height: 1.55; color: var(--ink-600); }
.slx-brand__facts strong { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 1px; }
.slx-brand__tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 var(--s4); }
.slx-brand__tag { font-size: var(--t-xs); font-weight: 650; padding: 3px 9px; border-radius: var(--r-pill); background: var(--paper-3); color: var(--ink-500); }
/* Push every button onto the same baseline whatever the copy length. */
.slx-brand__cta { margin: auto 0 0; }
.slx-brand__cta .slx-btn { width: 100%; }
.slx-brands__none { margin: var(--s6) 0; text-align: center; color: var(--ink-500); }

.slx-brands__section { padding: var(--s7) 0; margin-top: var(--s6); border-top: 1px solid var(--line); }
.slx-brands__h2 { margin: 0 0 var(--s5); font-size: clamp(1.35rem, 2.8vw, 1.8rem); font-weight: 800; letter-spacing: -.03em; }
.slx-brands__guide { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 820px) { .slx-brands__guide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
.slx-brands__guide h3 { margin: 0 0 var(--s2); font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; }
.slx-brands__guide p { margin: 0; color: var(--ink-600); font-size: var(--t-base); line-height: 1.6; }
.slx-brands__note { margin: var(--s5) 0 0; padding: var(--s4); border-radius: var(--r-md); background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-600); font-size: var(--t-base); }
.slx-brands__cta { text-align: center; }
.slx-brands__cta h2 { margin: 0 0 var(--s2); font-size: clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing: -.03em; }
.slx-brands__cta p { margin: 0 0 var(--s4); color: var(--ink-500); }
.slx-brands__cta .slx-btn { min-height: 48px; padding-inline: var(--s5); margin: 0 4px; }

@media (max-width: 700px) {
  .slx-brands__controls { position: static; backdrop-filter: none; }
  .slx-brands__count { margin-left: 0; }
}

/* ===========================================================================
   DIRECTORY HUBS  (venues / installers)
   One renderer for both pages, so the pair cannot drift apart the way the two
   pasted copies had -- 35KB and 38KB of near-identical markup with 65 and 64
   inline style attributes between them.
   =========================================================================== */

.slx-dir { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.slx-dir__head { max-width: 46rem; padding: var(--s8) 0 var(--s6); }
.slx-dir__h1 { margin: 0 0 var(--s3); font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; }
.slx-dir__lede { margin: 0; font-size: var(--t-lg); line-height: 1.6; color: var(--ink-500); }

.slx-dir__section { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.slx-dir__h2 { margin: 0 0 var(--s5); font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800; letter-spacing: -.03em; }

/* Busiest states: counted, not chosen. */
.slx-dir__popular { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 620px) { .slx-dir__popular { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .slx-dir__popular { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.slx-dir__popular a {
  display: flex; flex-direction: column; gap: 3px; height: 100%;
  padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.slx-dir__popular a:hover { border-color: var(--brand-400); background: var(--brand-50); }
.slx-dir__pname { font-weight: 750; color: var(--ink-900); letter-spacing: -.015em; }
.slx-dir__pn { font-size: var(--t-sm); color: var(--ink-400); font-variant-numeric: tabular-nums; }

/* All states */
.slx-dir__listhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.slx-dir__listhead .slx-dir__h2 { margin: 0; }
.slx-dir__filter { margin-left: auto; flex: 0 1 260px; }
.slx-dir__filter input {
  width: 100%; min-height: 44px; padding: 10px 14px;
  font: inherit; font-size: 16px; color: var(--ink-900);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.slx-dir__filter input:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-50); }

.slx-dir__states {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.slx-dir__states li[hidden] { display: none; }
.slx-dir__states a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 12px var(--s4); background: var(--paper);
  color: var(--ink-800); text-decoration: none; font-size: var(--t-base);
}
.slx-dir__states a:hover { background: var(--brand-50); color: var(--brand-700); }
.slx-dir__states em {
  font-style: normal; font-size: var(--t-xs); font-weight: 700;
  color: var(--ink-400); font-variant-numeric: tabular-nums;
}
.slx-dir__none { margin: var(--s5) 0 0; color: var(--ink-500); }

/* How to use */
.slx-dir__steps { list-style: none; counter-reset: slxd; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s5); }
@media (min-width: 820px) { .slx-dir__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.slx-dir__steps li { counter-increment: slxd; position: relative; padding-top: var(--s6); }
.slx-dir__steps li::before {
  content: counter(slxd); position: absolute; top: 0; left: 0;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand-600); color: #fff; font-weight: 800; font-size: var(--t-base);
}
.slx-dir__steps h3 { margin: 0 0 var(--s2); font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; }
.slx-dir__steps p { margin: 0; color: var(--ink-600); font-size: var(--t-base); line-height: 1.6; }

.slx-dir__swap { margin: var(--s6) 0 var(--s8); padding: var(--s5); border-radius: var(--r-lg); background: var(--paper-2); border: 1px solid var(--line); text-align: center; }
.slx-dir__swap p { margin: 0; font-size: var(--t-md); color: var(--ink-600); }
.slx-dir__swap a { font-weight: 700; }

@media (max-width: 620px) { .slx-dir__filter { margin-left: 0; flex-basis: 100%; } }

/* ---------------------------------------------------------------------------
   Fluent Forms — brand alignment (contact page)
   ---------------------------------------------------------------------------
   The plugin ships its own primary, #1a7efb, and the Submit button on the
   contact page was the one blue thing left on the site. Two moves here:

   1. Re-point --fluentform-primary at the brand green. Five of the plugin's
      own rules read that variable -- the field focus ring, the tooltip icon,
      the progress bar, the dropzone -- so they follow along instead of being
      chased one at a time as forms gain fields.
   2. Make the submit button the same object as .slx-btn. Same padding, weight,
      radius and hover as every other button on the site, so the form does not
      read as a bolted-on plugin.

   The button needs four classes to outrank the plugin's own
   `form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style)`, which is why the
   selector is longer than it looks like it should be. No !important.
   --------------------------------------------------------------------------- */

.fluentform {
  --fluentform-primary: var(--brand-600);
  --fluentform-primary-hover: var(--brand-700);
}

.fluentform .ff-btn.ff-btn-submit.ff_btn_style {
  font: inherit; font-size: var(--t-base); font-weight: 650; line-height: 1;
  padding: 11px 18px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--brand-600); color: #fff; cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.fluentform .ff-btn.ff-btn-submit.ff_btn_style:hover {
  background: var(--brand-700); color: #fff; box-shadow: var(--e2);
}
.fluentform .ff-btn.ff-btn-submit.ff_btn_style:active { transform: translateY(1px); }

/* The plugin's in-flight shimmer sits on ::after and inherits nothing. */
.fluentform .ff-btn.ff-btn-submit.ff_btn_style:disabled { opacity: .65; cursor: default; }

/* ---------------------------------------------------------------------------
   Home: place search, state map, A-Z index
   --------------------------------------------------------------------------- */

.slx-hfind { position: relative; max-width: 480px; margin: var(--s5) auto var(--s4); text-align: left; }
.slx-hfind__input {
  width: 100%; padding: 14px 16px; font-size: var(--t-md); line-height: 1.2;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink-900);
}
.slx-hfind__input::placeholder { color: var(--ink-400); }
.slx-hfind__input:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 1px; border-color: var(--brand-400); }

/* Results overlay the page rather than pushing it, so the layout does not
   jump around under the reader's cursor while they type. */
.slx-hfind__out {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); box-shadow: var(--e2); overflow: hidden;
}
.slx-hfind__hit {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: 11px 15px; text-decoration: none; border-bottom: 1px solid var(--line);
}
.slx-hfind__hit:last-child { border-bottom: 0; }
.slx-hfind__hit:hover, .slx-hfind__hit:focus-visible { background: var(--brand-50); }
.slx-hfind__hitname { font-weight: 650; color: var(--ink-900); }
.slx-hfind__hitmeta { font-size: var(--t-sm); color: var(--ink-400); }
.slx-hfind__none { margin: 8px 0 0; font-size: var(--t-sm); color: var(--ink-500); }

/* The tile map. Explicit rows and columns come from the PHP; this only sizes
   the cells and colours the bands. */
.slx-map {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  /* Capped and centred: at full column width the tiles grew to ~99px and the
     map became 788px tall, which made it the loudest thing on the page rather
     than an aid to navigation. */
  max-width: 720px; margin: var(--s4) auto var(--s3);
}
.slx-map__st {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; border-radius: 6px; text-decoration: none;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-600);
  transition: transform .12s ease, box-shadow .12s ease;
}
.slx-map__st:hover { transform: translateY(-2px); box-shadow: var(--e2); color: var(--ink-900); }
.slx-map__st:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }
.slx-map__abbr { font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; line-height: 1; }
.slx-map__n { font-size: 10px; line-height: 1.4; opacity: .8; font-variant-numeric: tabular-nums; }

.slx-map__st--1 { background: var(--brand-50);  border-color: var(--brand-100); color: var(--ink-700); }
.slx-map__st--2 { background: var(--brand-100); border-color: var(--brand-200); color: var(--ink-800); }
.slx-map__st--3 { background: var(--brand-400); border-color: var(--brand-500); color: #fff; }
.slx-map__st--4 { background: var(--brand-600); border-color: var(--brand-700); color: #fff; }

.slx-map__key { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 var(--s3); font-size: var(--t-xs); color: var(--ink-400); }
.slx-map__chip { width: 16px; height: 10px; border-radius: 3px; display: inline-block; }
.slx-map__chip--1 { background: var(--brand-50); border: 1px solid var(--brand-100); }
.slx-map__chip--2 { background: var(--brand-100); }
.slx-map__chip--3 { background: var(--brand-400); }
.slx-map__chip--4 { background: var(--brand-600); }

/* Below roughly 640px twelve columns become unreadable, so the map degrades to
   a wrapped run of tiles -- still every state, still every link, no longer
   pretending to be geography. */
@media (max-width: 640px) {
  .slx-map { display: flex; flex-wrap: wrap; gap: 5px; }
  .slx-map__st { grid-row: auto !important; grid-column: auto !important; width: 46px; }
}

.slx-index { margin: var(--s4) 0 0; border-top: 1px solid var(--line); padding-top: var(--s4); }
.slx-index__sum { cursor: pointer; font-weight: 650; color: var(--brand-700); }
.slx-index__sum:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.slx-index__h3 { margin: var(--s4) 0 var(--s2); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400); }
.slx-index .slx-home__states em { font-style: normal; color: var(--ink-400); font-size: var(--t-xs); }