/*


 */

:root{
  --ink:#0A0A08; --paper:#F4F1EB; --accent:#1B3A2D; --accent2:#C8963E;
  --muted:#6B6860; --rule:#D4D0C8; --ad-bg:#F9F7F2; --on-accent:var(--paper);
  --serif:'Playfair Display',Georgia,serif;
  --mono:'IBM Plex Mono',monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
/* Guarantee the `hidden` attribute always hides, even on elements whose own class sets an
   explicit `display` (flex/grid cards etc.) that would otherwise beat the browser's UA default
   at equal specificity -- needed for filter_list_controller.js's item.hidden toggling. */
[hidden]{ display:none !important; }
body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.65; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---- masthead ---------------------------------------------------------- */
.mast{ border-bottom:2px solid var(--ink); padding-top:48px; }
/* Top nav (region + thesis pickers, sign-in) stays pinned through the whole scroll — guided-nav
   essential so the cuts are always reachable over a long result list. Fixed (not sticky, which would
   unstick past the masthead); .mast padding-top above reserves its height. */
.mast-top{ position:fixed; top:0; left:0; right:0; z-index:60; background:var(--canvas);
  display:flex; justify-content:space-between; align-items:center; padding:12px 40px;
  border-bottom:1px solid var(--rule); font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.08em; }
.mast-top a{ color:var(--muted); letter-spacing:.08em; }
.mast-top .right{ display:flex; gap:16px; align-items:center; }

/* ---- flash (notice/alert) ----------------------------------------------
   .mast-top is position:fixed, so this needs its own top offset to clear it rather than relying
   on normal document flow the way analysis.html.erb's flash (a non-fixed nav) can. 48px matches
   .mast's own padding-top, the number that already reserves the fixed bar's height everywhere
   else on the site. */
.site-flash{ max-width:1280px; margin:48px auto 0; padding:12px 20px 0; }
.flash-notice, .flash-alert{ padding:12px 16px; font-size:15.5px; }
.flash-notice{ background:rgba(200,150,62,0.10); color:var(--accent2); border:1.5px solid var(--accent2); }
.flash-alert{ background:rgba(27,58,45,0.08); color:var(--ink); border:1.5px solid var(--accent); }
.region-picker{ font-family:var(--mono); font-size:14px; letter-spacing:.06em; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--rule); cursor:pointer;
  padding:2px 18px 2px 1px; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><path d='M0 0h8L4 6z' fill='%23888'/></svg>");
  background-repeat:no-repeat; background-position:right 1px center; }
.region-picker:hover{ color:var(--accent2); border-color:var(--accent2); }
.region-picker option{ background:var(--canvas); color:var(--ink); letter-spacing:normal; }
.mast-lead{ display:flex; align-items:center; gap:18px; }
.home-link{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:#2d9cec; }
.home-link:hover{ color:var(--paper); text-decoration:none; }
.mast-title-wrap{ text-align:center; padding:28px 40px 20px; border-bottom:1px solid var(--rule); }
.mast-title{ font-family:var(--serif); font-size:72px; font-weight:900; letter-spacing:-2px; line-height:1; color:inherit; }
.mast-title:hover{ text-decoration:none; }
.mast-title .vc{ color:var(--accent2); }
.mast-tagline{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:10px; }
.region-nav,.view-toggle{ display:flex; justify-content:center; }
.region-nav{ border-bottom:1px solid var(--rule); flex-wrap:wrap; }
.region-link{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); padding:12px 24px; border-right:1px solid var(--rule); }
.region-link:first-child{ border-left:1px solid var(--rule); }
/* national (oluwadi.com): the word, defined — a lexicon entry held above the region chooser */
.mast-define{ text-align:center; padding:30px 40px 24px; border-bottom:1px solid var(--rule); }
.define-body{ max-width:640px; margin:16px auto 0; }
.define-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.define-meta span{ text-transform:none; letter-spacing:.04em; color:var(--ink); }
.define-gloss{ font-family:var(--serif); font-size:21px; line-height:1.5; color:var(--ink); margin-top:12px; }
.define-origin{ font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--muted); margin-top:14px; }
.define-origin span{ text-transform:uppercase; letter-spacing:.14em; margin-right:8px; }
.define-origin em{ color:var(--accent2); font-style:italic; }
.mast-define-head{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.mast-emblem{ width:72px; height:72px; flex:none; }
.mast-hero{ display:block; width:auto; max-width:84%; max-height:117px; height:auto; margin:0 auto 2px; }
.mast-hero-sm{ display:block; width:220px; max-width:58%; height:auto; margin:0 auto 4px; }
.mast-purpose{ font-family:var(--serif); font-size:23px; line-height:1.45; color:var(--ink); max-width:700px; margin:20px auto 2px; }
.mast-purpose strong{ font-weight:800; color:var(--accent); }
.mast-about-link{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted); margin:8px 0 0; }
.mast-about-link a{ color:var(--accent2); }
.region-lead{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; padding-right:18px; }
.region-link:hover{ text-decoration:none; }
.region-link.active{ color:var(--on-accent); background:var(--accent); }
.view-link{ font-family:var(--mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  padding:12px 40px; color:var(--muted); }
.view-link:first-child{ border-right:1px solid var(--rule); }
.view-link:hover{ text-decoration:none; }
.view-link.active{ background:var(--ink); color:var(--paper); }

/* ---- stat bar ---------------------------------------------------------- */
/* Column widths come from the shared .region-cols grid via `subgrid` (see below) — not hand-tuned
   here — so this always lines up with the facets/feed/sidebar grid under it. */
.statbar{ display:grid; grid-template-columns:subgrid; border-bottom:2px solid var(--ink); }
.stat{ padding:20px 28px; border-right:1px solid var(--rule); text-align:center; }
.stat:last-child{ border-right:none; }
.stat-n{ font-family:var(--serif); font-size:38px; font-weight:700; line-height:1; color:var(--accent); }
.stat-l{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:4px; }

/* ---- body grid + feed -------------------------------------------------- */
.col-head{ padding:14px 24px 7px; border-bottom:1px solid var(--rule); }
.feed-head{ display:flex; align-items:center; justify-content:space-between;
  background:var(--paper); position:sticky; top:0; z-index:10; }
.feed-head h2{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.feed-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--accent); color:var(--on-accent); padding:3px 8px; margin-left:10px; }
.feed-count{ font-family:var(--mono); font-size:11px; color:var(--accent2); }
.feed-empty{ padding:48px 28px; text-align:center; color:var(--muted); font-family:var(--mono); font-size:13px; }
.pager{ display:flex; align-items:center; justify-content:center; gap:18px; padding:24px; }
.pager-link{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 16px; border:1px solid var(--rule); color:var(--ink); }
.pager-link:hover{ background:var(--accent); color:var(--on-accent); text-decoration:none; }
.pager-link.disabled{ color:var(--rule); border-color:var(--rule); pointer-events:none; }
.pager-info{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--muted); }

.card{ display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start;
  padding:24px 28px; border-bottom:1px solid var(--rule); color:inherit; }
.card:hover{ background:rgba(27,58,45,.04); text-decoration:none; }
.card-cat{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2); margin-bottom:5px; }
.card-name{ font-family:var(--serif); font-size:21px; font-weight:700; line-height:1.2; margin-bottom:6px; }
.card-loc{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-bottom:8px; }
.card-desc{ font-size:13px; color:#3D3C38; line-height:1.6; max-width:500px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.card-meta{ text-align:right; white-space:nowrap; }
.card-meta .m{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-bottom:4px; }
.card-meta .m.gold{ color:var(--accent2); margin-top:4px; }
.card-meta .m.people{ color:var(--ink); white-space:normal; max-width:220px; }
.card-meta .m.url{ color:var(--accent2); }

/* in-tab result-set search */
/* upper-nav search: magnifying-glass toggle -> dropdown box (~30 chars) */
.nav-search-btn{ background:none; border:none; cursor:pointer; color:var(--muted); padding:4px 8px;
  display:inline-flex; align-items:center; vertical-align:middle; }
.nav-search-btn:hover{ color:var(--accent, #4169ff); }
.nat-band{ flex-wrap:wrap; align-items:center; gap:16px; padding:14px 20px; }
.nat-band-div{ color:var(--rule); }
.nat-pick{ display:inline-flex; align-items:center; gap:8px; }
.nat-pick-l{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.nav-search{ display:none; text-align:center; padding:12px 0 0; }
.nav-search.open{ display:block; }
.nav-search input[type=search]{ font:inherit; font-size:14px; width:280px; max-width:82%; padding:8px 12px;
  border:1.5px solid var(--enc, #9db4ff); border-radius:9px; background:#fff; color:var(--ink); }
.nav-search input[type=search]:focus{ outline:none; border-color:var(--accent, #4169ff); }
.search-active{ font-family:var(--mono); font-size:12px; color:var(--muted); padding:10px 28px 0; }

/* mast-top "Newsletter" CTA: button toggles a small absolute-positioned dropdown, same
   plain-onclick pattern as .nav-search above (no JS framework). */
.nav-newsletter{ position:relative; display:inline-flex; }
.nav-newsletter-btn{ background:none; border:none; cursor:pointer; font:inherit; letter-spacing:.08em;
  color:var(--muted); padding:0; }
.nav-newsletter-btn:hover{ color:var(--accent, #4169ff); }
.nav-newsletter-drop{ display:none; position:absolute; top:calc(100% + 12px); right:0; z-index:61;
  width:240px; background:#fff; border:1.5px solid var(--enc, #9db4ff); border-radius:9px;
  padding:14px; box-shadow:0 8px 24px rgba(0,0,0,.12); text-align:left; }
.nav-newsletter-drop.open{ display:block; }
.nav-newsletter-copy{ font-family:var(--sans); font-size:12px; letter-spacing:normal; color:var(--muted);
  margin:0 0 10px; }
.nav-newsletter-drop input[type=email]{ font:inherit; font-size:13px; letter-spacing:normal; width:100%;
  padding:7px 10px; border:1.5px solid var(--enc, #9db4ff); border-radius:7px; background:#fff;
  color:var(--ink); box-sizing:border-box; }
.nav-newsletter-drop input[type=email]:focus{ outline:none; border-color:var(--accent, #4169ff); }
.nav-newsletter-drop button[type=submit]{ font:inherit; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; width:100%; margin-top:8px; padding:8px; border:none; border-radius:7px;
  background:var(--accent, #4169ff); color:#fff; cursor:pointer; }
.nav-newsletter-drop button[type=submit]:hover{ opacity:.9; }
.nav-newsletter-drop .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.search-active a{ color:var(--accent, #4169ff); }

/* Business-tier localized map */
.region-map{ border:1.5px solid var(--enc, #9db4ff); border-radius:12px; overflow:hidden; margin:0 0 20px; background:#fff; }
#dmv-map{ height:420px; width:100%; }
.dmv-pin{ background:var(--accent2, #b8860b); border:2px solid #fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.dmv-pin.multi{ background:var(--accent, #4169ff); display:flex; align-items:center; justify-content:center; }
.dmv-pin.multi span{ color:#fff; font-family:var(--mono, monospace); font-size:12px; font-weight:600; line-height:1; }
.map-unmapped{ font-family:var(--mono, monospace); font-size:13px; color:var(--ink); line-height:1.5;
  margin:0; padding:13px 18px; border-top:1.5px solid var(--enc, #9db4ff); background:rgba(0,0,0,.025); }
.map-unmapped strong{ color:var(--accent2, #b8860b); font-size:15px; }
.map-unmapped span{ color:var(--muted); }

/* Pro "add a firm" submission form */
.view-toggle .add-firm{ color:var(--accent, #4169ff); }
.submit-form{ display:flex; flex-direction:column; gap:14px; max-width:480px; margin-top:20px; }
.submit-form .fld{ display:flex; flex-direction:column; gap:5px; font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.submit-form .fld input, .submit-form .fld select, .submit-form .fld textarea{
  font-family:var(--sans, inherit); font-size:15px; text-transform:none; letter-spacing:0; color:var(--ink);
  padding:9px 12px; border:1.5px solid var(--enc, #9db4ff); border-radius:9px; background:#fff; }
.submit-form .fld input:focus, .submit-form .fld select:focus, .submit-form .fld textarea:focus{
  outline:none; border-color:var(--accent, #4169ff); }
.submit-form .fld-row{ display:flex; gap:14px; } .submit-form .fld-row .fld{ flex:1; }
.submit-form .fld.state{ max-width:90px; } .submit-form .req{ color:var(--accent2, #b8860b); }
.submit-form .hint{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); font-size:11px; }
.submit-form .btn-primary{ align-self:flex-start; font-family:var(--sans); font-size:14px; cursor:pointer;
  padding:10px 22px; border:none; border-radius:9px; background:var(--accent, #4169ff); color:var(--on-accent); }
.match-hint{ font-size:13px; margin-top:-6px; min-height:18px; }
.match-hint .ok{ color:var(--muted); } .match-hint .warn{ color:var(--accent2, #b8860b); font-weight:600; }
.match-hint a{ color:var(--accent, #4169ff); }
.nexus-badge{ margin-top:8px; font-family:var(--mono); font-size:10px; padding:2px 8px;
  background:var(--accent); color:var(--on-accent); display:inline-block; }

/* ---- sidebar ----------------------------------------------------------- */
.side-sec{ padding:20px; border-bottom:1px solid var(--rule); }
.side-ad{ border-bottom:1px solid var(--rule); }
.side-title{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent2); }
.signal-row{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--rule); font-size:12px; }
.signal-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dot-high{ background:var(--accent); } .dot-med{ background:var(--accent2); } .dot-low{ background:var(--rule); }
.signal-name{ flex:1; font-weight:500; }
.signal-val{ font-family:var(--mono); font-size:11px; color:var(--accent); font-weight:600; }
.region-row{ display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--rule); font-size:12px; }
.region-row a.active{ font-weight:700; color:var(--accent); }
.region-row .cnt{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.edition-row{ padding:6px 0; border-bottom:1px solid var(--rule); }
.edition-row a{ font-size:13px; color:var(--accent); display:block; }

/* ---- ad zones ---------------------------------------------------------- */
[data-controller="ad-fallback"]{ width:100%; } /* wraps a platform ad + its hidden house/floor reveal */
.ad{ width:100%; background:var(--ad-bg); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.ad-inline{ height:100px; border-top:1px solid var(--accent2); border-bottom:1px solid var(--accent2); }
.ad-sidebar{ height:250px; }
/* Adsterra fixed-size units: exact box, centered, clipped by .ad overflow (no balloon) */
.ad-adsterra-300x250{ width:300px; height:250px; margin-inline:auto; }
.ad-adsterra-728x90{ width:728px; max-width:100%; height:90px; margin-inline:auto; border-top:1px solid var(--accent2); border-bottom:1px solid var(--accent2); }
.ad-label{ position:absolute; top:6px; left:12px; font-family:var(--mono); font-size:9px; letter-spacing:.15em; color:#888780; }
.ad-ph{ display:flex; flex-direction:column; align-items:center; gap:4px; opacity:.4; }
.ad-ph .dim{ font-family:var(--mono); font-size:12px; color:var(--accent2); }
.ad-ph .pos{ font-family:var(--mono); font-size:10px; color:#888780; }
/* last-resort floor (shared/_ad_slot.html.erb, house tier empty) — an invitation, not a void */
.ad-floor-cta{ display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none;
  padding:8px 20px; border:1px dashed var(--accent2); border-radius:3px; opacity:.85;
  transition:opacity .15s, border-color .15s; }
.ad-floor-cta:hover{ opacity:1; border-color:var(--accent); }
.ad-floor-head{ font-family:var(--serif); font-style:italic; font-size:16px; color:var(--accent2); }
.ad-floor-sub{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ---- footer ------------------------------------------------------------ */
.foot{ border-top:2px solid var(--ink); padding:20px 40px; display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:11px; color:var(--muted); }

/* ---- company detail ---------------------------------------------------- */
.detail{ max-width:760px; margin:0 auto; padding:48px 40px; }
.detail .back{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.detail h1{ font-family:var(--serif); font-size:46px; font-weight:900; line-height:1.05; margin:14px 0 6px; }
.detail .sub{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent2); }
.detail .desc{ margin:22px 0; font-size:16px; line-height:1.7; max-width:62ch; }
.detail .facts-rows{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:22px 0; }
.detail .fact-row{ display:flex; justify-content:space-between; gap:24px; }
.detail .fact-row + .fact-row{ margin-top:18px; }
.detail .fact-cell{ flex:1 1 0; min-width:0; }
.detail .fact-cell .k{ font-family:var(--serif); font-size:22px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.detail .fact-cell .v{ font-family:var(--sans); font-size:15px; font-weight:400; color:var(--accent); margin-top:3px; }

/* Investor/portfolio pivot -- one clickable name per line, no count (the list IS the information). */
.relation-group{ margin-top:24px; }
.relation-lead{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.relation-list{ list-style:none; margin:0; padding:0; }
.relation-link{ display:block; padding:3px 0; font-family:var(--sans); font-size:15px; color:var(--ink); text-decoration:none; }
.relation-link:hover{ color:var(--accent2); }

/* ---- auth (login / signup) --------------------------------------------- */
.auth{ max-width:380px; margin:0 auto; padding:48px 40px 64px; }
.auth h1{ font-family:var(--serif); font-size:32px; font-weight:900; margin-bottom:6px; }
.auth-sub{ color:var(--muted); font-size:14px; margin-bottom:18px; }
.auth-input{ display:block; width:100%; padding:11px 13px; margin-bottom:12px; font:inherit; font-size:14px;
  background:#fff; border:1px solid var(--rule); border-radius:0; color:var(--ink); }
.auth-input:focus{ outline:none; border-color:var(--accent); }
.auth-btn{ width:100%; padding:12px; font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; background:var(--ink); color:var(--paper); border:none; cursor:pointer; }
.auth-btn:hover{ background:var(--accent); }
.auth-error{ background:#fbeded; border:1px solid #e6b8b8; color:#c0392b; padding:9px 12px; font-size:13px; margin-bottom:14px; }
.auth-note{ color:var(--muted); font-size:13px; margin-top:16px; }

/* ---- pricing ----------------------------------------------------------- */
.pricing{ max-width:1000px; margin:0 auto; padding:40px; }
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:24px; }
.tier{ border:1px solid var(--rule); padding:24px; }
.tier.featured{ border:2px solid var(--accent); }
.coming-soon{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#c0392b; margin-bottom:6px; }
.tier h3{ font-family:var(--serif); font-size:24px; }
.tier .price{ font-family:var(--mono); font-size:13px; color:var(--accent2); margin:6px 0 14px; }
.tier ul{ list-style:none; font-size:13px; line-height:1.9; color:#3D3C38; }
.tier-note{ font-size:11px; line-height:1.5; color:var(--muted); margin-top:12px; padding-top:10px; border-top:1px solid var(--rule); }
.btn-upgrade{ display:inline-block; margin-top:16px; padding:9px 16px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; background:var(--accent); color:#fff; border:none; cursor:pointer; text-decoration:none; }
.btn-upgrade:hover{ background:var(--accent2); }
.tier-current{ margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ---- stats page --------------------------------------------------------- */
.stats-page{ max-width:520px; margin:0 auto; padding:64px 40px 48px; text-align:center; }
.stats-wordmark{ display:inline-flex; align-items:center; gap:14px; color:#2d9cec; margin:0 0 40px; }
.stats-wordmark:hover{ text-decoration:none; opacity:.82; }
.stats-logo-mark{ width:56px; height:56px; flex:none; }
.stats-word{ font-family:var(--serif); font-size:40px; font-weight:700; letter-spacing:-.5px; }
.stats-rule{ border:none; border-top:2px solid var(--accent2); margin:0 0 32px; width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }
.stats-list{ margin:0; }
.stats-row{ display:flex; justify-content:space-between; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--rule); }
.stats-row:first-child{ border-top:1px solid var(--rule); }
.stats-row dt{ font-family:var(--mono); font-size:18px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.stats-row dd{ font-family:var(--mono); font-size:18px; letter-spacing:.08em; font-weight:700; margin:0; }

/* ---- updates / timeline -------------------------------------------------- */
.updates-page{ max-width:1100px; margin:0 auto; padding:64px 40px 48px; text-align:center; }
.updates-lead{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 56px; }
.updates-page .stats-rule{ margin-bottom:48px; } /* a bit more air before the timeline than Stats' own use of this rule */

/* ---- consolidated blog page (Stats + Timeline + posts, 2026-07-26) -------- */
.blog-section-head{ font-family:var(--serif); font-size:28px; font-weight:700; letter-spacing:-.3px;
  text-align:center; margin:0 0 28px; }
.blog-section-head.first{ margin-top:0; }
.blog-page{ padding-top:32px; } /* match the 32px rhythm used between timeline/rule/stats below */
.blog-page .timeline{ margin-bottom:32px; }
.stats-line{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px;
  font-family:var(--mono); font-size:14px; letter-spacing:.04em; color:var(--muted); margin:0 0 32px; }
.stats-line strong{ color:var(--ink); font-weight:700; }
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:28px; text-align:left; }
.blog-card{ display:flex; flex-direction:column; color:inherit; border:1px solid var(--rule); }
.blog-card:hover{ text-decoration:none; border-color:var(--accent2); }
.blog-card-img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.blog-card-body{ padding:18px 20px 22px; }
.blog-card-date{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent2); }
.blog-card-body h3{ font-family:var(--serif); font-size:19px; font-weight:700; margin:8px 0 10px; line-height:1.25; }
.blog-card-body p{ font-size:13.5px; line-height:1.6; color:var(--muted); margin:0; }
.blog-pagination{ display:flex; justify-content:space-between; margin-top:48px; }
.blog-page-link{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent2); }
.blog-page-link.disabled{ visibility:hidden; }

/* ---- single blog post ------------------------------------------------------ */
.blog-post{ max-width:720px; margin:0 auto; padding:64px 40px 80px; }
.blog-back{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--accent2); }
.blog-post-meta{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:20px 0 6px; }
.blog-post h1{ font-family:var(--serif); font-size:clamp(28px,5vw,42px); font-weight:700; letter-spacing:-.5px; margin:0 0 28px; }
.blog-post-img{ width:100%; border-radius:4px; margin-bottom:28px; }
.blog-post-body{ font-size:16px; line-height:1.75; }
.blog-post-body p{ margin:0 0 1.3em; }

/* ---- coming-soon placeholder --------------------------------------------- */
.coming-soon-hero{ padding:56px 0; }
.coming-soon-telescope{ display:block; width:auto; max-width:70%; max-height:220px; height:auto; margin:0 auto; }
.coming-soon-title{ font-family:var(--serif); font-weight:900; font-size:clamp(56px,9vw,128px);
  letter-spacing:-1.5px; line-height:1; margin:96px 0; }

.timeline{ display:flex; align-items:center; gap:8px; }
.timeline-arrow{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--rule);
  background:transparent; color:var(--accent2); font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background-color .14s ease, transform .14s ease; }
.timeline-arrow:hover{ background:rgba(45,156,236,.12); transform:scale(1.06); }

.timeline-track{ flex:1; display:flex; align-items:center; overflow-x:auto; scroll-behavior:smooth;
  position:relative; padding:0 8px; scrollbar-width:none; }
.timeline-track::-webkit-scrollbar{ display:none; }

/* Simplified to ONE connected box per entry (date line 1, description under it) -- not a separate
   date-box/circular-node/desc-box stack. Adjacent boxes are joined by a single line, flowchart-style. */
.timeline-item{ flex:none; width:200px; margin-right:24px; position:relative; }
.timeline-item:not(:last-child)::after{ content:""; position:absolute; top:50%; left:100%;
  width:24px; height:2px; background:var(--accent2); transform:translateY(-50%); }
.timeline-box{ border:1px solid var(--rule); background:var(--canvas); padding:14px 16px; text-align:center; }
.timeline-date{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--accent2); white-space:nowrap; margin-bottom:8px; }
.timeline-desc{ display:block; font-family:var(--sans); font-size:12.5px; line-height:1.5; color:var(--ink); }

.timeline-connector{ width:0; height:24px; border-left:2px dotted var(--accent2); }
.timeline-node{ flex:none; width:14px; height:14px; border-radius:50%; background:var(--accent2);
  box-shadow:0 0 0 4px var(--canvas), 0 0 0 5px var(--accent2); position:relative; z-index:1; }

@media(max-width:820px){
  .mast-title{ font-size:52px; }
  .mast-define-head{ gap:5px; }
  .mast-emblem{ width:56px; height:56px; }
  .mast-purpose{ font-size:19px; }
}

/* ===================================================================== *
 *  OSPARNA BRAND THEME — TEST OVERRIDES  (delete this whole block to revert)
 *  Blue 1 #4169ff (royal) + Blue 2 #2d9cec (sky) -> enclosures/buttons/highlights
 *  Grey #4d4d4d -> ALL text (no blue text, except the DMV wordmark)
 *  Dark blue #0d1f4f -> page background
 * ===================================================================== */
:root{
  --ink:#c7ccd8;        /* one grey for ALL text — light, legible on dark blue */
  --muted:#c7ccd8;      /* same grey (no separate label shade) */
  --paper:#ffffff;      /* light reading surface */
  --canvas:#0d1f4f;     /* dark blue page background */
  --accent:#4169ff;     /* Blue 1 — buttons, active enclosures, borders */
  --accent2:#2d9cec;    /* Blue 2 — highlights, selection, wordmark */
  --enc:#4169ff;
  --rule:#2d9cec;       /* all separators: light blue (Blue 2) */
  --ad-bg:#f5f7ff;
  --on-accent:#fff;     /* text on --accent / --accent2 fills; monochrome editions set this to their field */
}

/* dark-blue canvas everywhere — center included, no light surfaces */
body{ background:var(--canvas); }
.mast, .statbar, .region-browse, .foot, .detail, .auth, .pricing, .feed-head, .stats-page{
  background:var(--canvas);
}
/* dark form/map fields */
.auth-input, .nav-search input[type=search], .region-map,
.submit-form .fld input, .submit-form .fld select, .submit-form .fld textarea{
  background:#0a1840;
}
.ad{ background:rgba(255,255,255,.05); }
/* all right-rail ads -> fixed 300x250 rectangle */
.ad-sidebar{ width:300px; height:250px; margin-inline:auto; }

/* selection + highlights in sky blue */
::selection{ background:var(--accent2); color:var(--on-accent); }
::-moz-selection{ background:var(--accent2); color:var(--on-accent); }

/* structural enclosures + buttons -> blue (were near-black/green) */
.mast{ border-bottom:2px solid var(--accent2); }
.statbar{ border-bottom:2px solid var(--accent2); }
.foot{ border-top:2px solid var(--accent2); }
/* upper separators (under the top menu, and before the Investors/Companies tabs)
   thickened to 2px to match the rule under the tabs */
.mast-top, .mast-title-wrap{ border-bottom-width:2px; }
.view-link.active{ background:var(--accent); color:var(--on-accent); }
.auth-btn{ background:var(--accent); }
.auth-btn:hover{ background:var(--accent2); }

/* ---- guided-nav browse: left-rail facets + results --------------------- */
.browse{ display:flex; gap:24px; max-width:1180px; margin:0 auto; padding:30px 40px; align-items:flex-start; }
.browse > .facets{ flex:0 0 235px; position:sticky; top:64px; border-right:1px solid var(--rule); padding-right:24px; }
.facet-back{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; margin-bottom:8px; }
.facet-group{ margin-bottom:28px; }
.facet-group + .facet-group{ margin-left:-24px; padding-top:20px; padding-left:24px; border-top:1px solid var(--rule); }
.facet-h{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2);
  margin-bottom:9px; margin-left:-24px; padding-bottom:7px; padding-left:24px; border-bottom:1px solid var(--rule); }
/* Inside region-browse, facet-h sits in the shared .col-head band (which owns the border/padding via
   CSS subgrid row-height, guaranteeing it lines up with feed-head/side-title regardless of font
   metrics) — so it reverts to a plain label here instead of managing its own box model. */
.region-browse .facet-h{ margin:0; padding:0; border-bottom:none; }
.facet{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:6px 10px; border-radius:4px; color:var(--ink); }
.facet:hover{ background:rgba(255,255,255,.06); text-decoration:none; }
.facet.active{ background:var(--accent); color:var(--on-accent); }
.facet-label{ font-size:13px; line-height:1.35; }
.facet-count{ font-family:var(--mono); font-size:11px; opacity:.55; white-space:nowrap; }
.facet.active .facet-count{ opacity:.9; }
.facet-more{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; opacity:.5; padding:7px 10px; cursor:pointer; }
.facet-more:hover{ opacity:.8; }
.facet-clear{ font-family:var(--mono); font-size:10px; color:var(--accent2); text-transform:none; letter-spacing:0; }
.results{ flex:1; min-width:0; }
.results .feed{ max-width:none; margin:0; }
.results .detail{ max-width:none; margin:0; }

/* Oluwadi home link (upper-left) — the lens mark + wordmark. ALWAYS Oluwadi blue (#2d9cec), brand-level,
   NOT the regional accent: the upper-left wordmark is the constant Oluwadi identity across every edition. */
.home-link{ display:inline-flex; align-items:center; gap:6px; color:#2d9cec; }
.home-link:hover{ text-decoration:none; opacity:.82; }
.home-word{ font-family:var(--serif); font-size:15px; font-weight:700; letter-spacing:-.3px; }

/* ETHOS TREATMENT (Identity Spec ethos exception) — a region defined by an ATTITUDE, not a palette,
   gets a multi-stop TREATMENT instead of a flat field. Austin = "Keep Austin Weird" → a tie-dye sweep
   across the wordmark. The ONLY edition with a gradient; every other edition uses flat regional colour. */
.edition-austin .mast-title{
  background:linear-gradient(105deg,#ffd23f 0%,#ff5ca8 23%,#c84cff 47%,#5b8cff 71%,#3ee8c8 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.results-head{ margin-bottom:14px; }
.results-head h1{ font-family:var(--serif); font-size:34px; font-weight:700; line-height:1.1; }
.results-count{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; opacity:.7; margin-top:5px; }
@media (max-width:768px){
  .browse{ flex-direction:column; gap:20px; padding:20px; }
  .browse > .facets{ position:static; flex-basis:auto; width:100%; }
}
.tier.featured{ border-color:var(--accent); }
.card:hover{ background:rgba(255,255,255,.045); }

/* TEXT IS GREY — never blue: override every blue-text rule */
a,
.stat-n, .card-meta .m.people, .region-row a.active, .edition-row a,
.search-active a, .view-toggle .add-firm, .match-hint a,
.nav-search-btn:hover, .detail .fact-cell .v{ color:var(--ink); }
.card-cat, .feed-count, .card-meta .m.gold, .card-meta .m.url,
.detail .sub, .tier .price, .ad-ph .dim, .match-hint .warn{ color:var(--muted); }
/* old hardcoded greys (#3D3C38 / #888780) -> the one grey */
.card-desc, .tier ul, .ad-label, .ad-ph .pos{ color:var(--ink); }

/* wordmark: "DMV" = Blue 2 (sky), "VC" = grey */
.mast-title{ color:var(--accent2); }
.mast-title .vc{ color:var(--ink); }

/* national landing (oluwadi.com) — the regions directory + explainer */
.national-intro{ text-align:center; padding:36px 40px 4px; max-width:720px; margin:0 auto; }
.national-lead{ font-size:15px; line-height:1.75; color:var(--ink); }
.national-cta{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:18px; text-align:center; }
.region-group{ max-width:1120px; margin:0 auto; padding:26px 28px 0; }
.region-group:last-of-type{ padding-bottom:48px; }
.region-group-h{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--accent2); padding-bottom:10px; margin-bottom:16px; border-bottom:1px solid var(--rule); }
.region-index{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
/* Root-cause fix (2026-09-06, Troy: "is the behavior site wide?" -- yes): this class is the
   house/sponsor-ad fallback for EVERY "wide" ad_slot on the site (region feeds, domains/show,
   categories/show, and the 3 index pages added today) -- its old 24px top margin made its total
   footprint (90px iframe + 24px = 114px) taller than the AdSense platform box it swaps with
   (.ad-inline, a flat 100px). ad_fallback_controller.js swaps one for the other the moment
   AdSense settles (filled/unfilled/timeout), so that ~14px mismatch nudged the page on every
   swap -- individually tiny, invisible on a normal feed, but compounding across ~20
   independently-timed slots on /regions into the large, real drift that broke its A-Z jump rail.
   Reserving the SAME 100px here, centered, with no margin of its own (spacing is each page's own
   job -- .region-index-ad already adds 6px, feed rows already have their own gaps) makes every
   platform<->fallback swap height-neutral everywhere this class is used, not just on /regions. */
.national-ad{ max-width:970px; height:100px; margin:0 auto; display:flex; align-items:center; justify-content:center; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.region-card{ display:flex; flex-direction:column; gap:7px; padding:14px 16px; border:1px solid var(--rule); text-decoration:none; transition:border-color .14s ease, transform .14s ease; }
.region-card:hover{ border-color:var(--accent2); transform:translateY(-2px); text-decoration:none; }
/* Reserved height (2026-09-06, real bug: Troy clicked "W" in the A-Z rail and landed on Ohio/
   Pennsylvania). Cause: shared/_ad_slot's platform box is a fixed 100px (.ad-inline), but its
   house/sponsor fallback (shared/_house_ad_unit, a bare iframe inside .national-ad with no fixed
   height) settles a few px taller once AdSense times out and ad_fallback_controller swaps one
   for the other -- individually tiny, but ~20 slots on this page each settle on their own
   independent timer, and the compounding, asynchronous shift moves the whole page out from under
   a scroll position an anchor jump already landed on. Reserving height here (the one wrapper this
   page controls) means neither state can change this row's height, so nothing shifts later,
   regardless of which ad ultimately renders inside. 120px covers both the 100px platform box and
   the house-ad iframe (90px) plus its own 24px top margin. */
.region-index-ad{ margin:6px 0; min-height:120px; }

/* /regions guided nav (2026-09-06, Troy: "if I want Wyoming or Washington State I am paging...
   is there a better nav concept?"). A-Z rail (jump links, no geography classification needed --
   every edition already has a real anchor by its first letter) + a live client-side name filter
   (filter_list_controller.js), same two-tool answer: browse OR type a known name, either gets
   you there without paging through 103 cards. */
.regions-layout{ display:grid; grid-template-columns:150px 1fr; gap:0; max-width:1270px; margin:0 auto; align-items:start; }
.az-rail{ position:sticky; top:66px; padding:26px 20px 40px 28px; }
.az-rail-search input{ width:100%; font:inherit; font-size:13px; padding:8px 10px; border:1.5px solid var(--rule);
  border-radius:6px; background:transparent; color:var(--ink); }
.az-rail-search input:focus{ outline:none; border-color:var(--accent2); }
.az-jump{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.az-jump a{ font-family:var(--mono); font-size:11px; font-weight:500; color:var(--muted); width:22px; height:22px;
  display:flex; align-items:center; justify-content:center; border-radius:4px; }
.az-jump a:hover{ background:var(--accent); color:var(--on-accent); text-decoration:none; }
.regions-main{ min-width:0; }
.filter-empty{ padding:20px 28px; color:var(--muted); font-size:14px; }
@media(max-width:880px){
  .regions-layout{ grid-template-columns:1fr; }
  .az-rail{ position:static; padding:16px 28px 0; }
}
.rc-name{ font-family:var(--serif); font-size:18px; line-height:1.1; color:var(--accent2); }
.rc-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); line-height:1.5; }

/* National homepage's 4-tile selection area (2026-09-06, Thea's feedback via Troy: too busy,
   didn't say what to do next -- replaces the old 20-item .region-index sampler on this one page;
   /regions, /domains, /categories keep the smaller .region-card grid since they're real listing
   pages with many rows). Deliberately bigger type than .region-card/.rc-name -- this is the
   page's main call to action, not a dense index. */
.category-index{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:1120px; margin:10px auto 0; padding:0 28px 5px; }
.category-card{ display:flex; flex-direction:column; gap:9px; padding:26px 22px; border:1px solid var(--rule); text-decoration:none; text-align:center; align-items:center; transition:border-color .14s ease, transform .14s ease; }
.category-card:hover{ border-color:var(--accent2); transform:translateY(-2px); text-decoration:none; }
.cc-tag{ font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.cc-name{ font-family:var(--serif); font-size:26px; font-weight:700; line-height:1.15; color:var(--accent2); }
.cc-desc{ font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; color:var(--muted); line-height:1.5; }
@media(max-width:880px){
  .category-index{ grid-template-columns:repeat(2,1fr); }
}

/* Nationwide universal search — the unobtrusive masthead toggle (matches the editions) + the results list. */
.nav-search-btn{ display:inline-flex; align-items:center; }
.nav-search-word{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-left:7px; }
.nat-results{ list-style:none; margin:8px auto 0; padding:0; max-width:880px; border-top:1px solid var(--rule); }
.nat-result{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; padding:14px 28px; border-bottom:1px solid var(--rule); }
.nat-result:hover{ background:var(--ad-bg); }
.nr-name{ font-family:var(--serif); font-size:18px; color:var(--accent2); }
.nr-cat{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.nr-domain{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--muted); }
.nr-loc{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-left:auto; }

/* Analysis section of nationwide search (2026-09-06) -- renders after companies/investors/
   schools, never interleaved (Troy: core types first, Analysis pieces after). */
.nat-results-h{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--accent2); max-width:880px; margin:28px auto 0; padding:0 28px 10px; }
.nat-result-post{ align-items:flex-start; }
.nr-summary{ flex-basis:100%; font-size:13.5px; color:var(--ink); line-height:1.6; margin-top:2px; }

/* Region-feed guided nav: the thesis facet rail, feed, and ad rail beside each other (same .facets
   engine as /domains). The three columns are a single CSS grid whose 3 direct children (.facets,
   .feed, .side) are each a row-subgrid spanning 2 rows (header, body) — so THESIS/FIRMS/ABOUT and
   their underlines land on the exact same grid line across all 3 columns, guaranteed by the browser's
   own row-sizing (not by hand-tuned padding matched to one font's rendered metrics, which drifts). */
/* .region-cols is the ONE grid-template-columns definition for the whole region page (set inline
   from has_facets/show_ads in the view). .statbar and .region-browse each read it via `subgrid`
   instead of keeping their own matching copy — so the stat-bar dividers and the facets/feed/
   sidebar dividers below are ALWAYS aligned, at any width, with exactly one place to change it. */
.region-cols{ display:grid; }
.region-cols > *{ grid-column:1 / -1; }

.region-browse{ display:grid; grid-template-rows:auto 1fr; grid-template-columns:subgrid; align-items:start; }
.region-browse > .facets,
.region-browse > .feed,
.region-browse > .side{ display:grid; grid-template-rows:subgrid; grid-template-columns:minmax(0,1fr); grid-row:1 / 3; min-width:0; }
.region-browse > .facets{ border-right:1px solid var(--rule); }
.region-browse:has(> .side) > .feed{ border-right:1px solid var(--rule); }
.region-browse > .facets > .col-body{ padding:20px 0 0 24px; }
@media(max-width:880px){
  .region-cols{ grid-template-columns:1fr !important; }
  .statbar{ grid-template-columns:repeat(2,1fr) !important; }
  .region-browse > .facets, .region-browse > .feed, .region-browse > .side{ grid-row:auto; grid-template-rows:none; grid-column:1 / -1 !important; }
  .region-index{ grid-template-columns:repeat(2,1fr); }
}