/* footer-pages-ui2.css — UI2 overlay for static footer pages.
 *
 * Targets: privacy, terms, blog, samples, ontario-dental-ai-visibility,
 * unsubscribe (and other site-editorial / site-industry / site-samples
 * pages). Loaded after the inline <style> blocks so cascade wins via
 * `body.ui2.site-editorial .x` etc.
 *
 * Strategy: remap prod's --bg/--fg/--accent vars onto UI2 tokens, then
 * adjust typography (Instrument Serif headings), card surfaces, and
 * link/eyebrow accents. Keeps the prod DOM intact.
 */

/* ─── Token remap ───────────────────────────────────────────── */

body.ui2.site-editorial,
body.ui2.site-industry,
body.ui2.site-samples,
body.ui2.site-blog {
  --bg:        var(--ui2-cream);
  --bg2:       #ffffff;
  --bg3:       var(--ui2-paper);
  --fg:        var(--ui2-ink);
  --fg2:       var(--ui2-ink-3);
  --fg3:       var(--ui2-ink-4);
  --accent:    var(--ui2-amber-500);
  --accent2:   var(--ui2-amber-700);
  --red:       var(--ui2-bad);
  --yellow:    var(--ui2-warn);
  --green:     var(--ui2-good);
  --leading:   var(--ui2-amber-600);
  --competitive: var(--ui2-warn);
  --emerging:  var(--ui2-ink-5);
  --font-body: var(--ui2-font-sans);
  --font-mono: var(--ui2-font-mono);
}

body.ui2.site-editorial,
body.ui2.site-industry,
body.ui2.site-samples,
body.ui2.site-blog {
  font-family: var(--ui2-font-sans);
  background: var(--ui2-cream);
  color: var(--ui2-ink);
}

/* ─── Nav ───────────────────────────────────────────────────── */

body.ui2.site-editorial nav,
body.ui2.site-industry nav,
body.ui2.site-blog nav {
  background: rgba(250, 246, 240, 0.92);
  border-bottom: 1px solid var(--ui2-rule);
}
body.ui2.site-editorial .logo,
body.ui2.site-industry .logo,
body.ui2.site-blog .logo,
body.ui2.site-samples .brand {
  font-family: var(--ui2-font-serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.03em;
}
body.ui2.site-editorial .logo span,
body.ui2.site-industry .logo span,
body.ui2.site-blog .logo span,
body.ui2.site-samples .brand span {
  color: var(--ui2-amber-500);
}
body.ui2.site-editorial .nav-links a:hover,
body.ui2.site-industry nav a:hover,
body.ui2.site-blog nav a:hover {
  color: var(--ui2-amber-600);
}

/* ─── Hero / page header ────────────────────────────────────── */

body.ui2.site-editorial h1,
body.ui2.site-industry h1,
body.ui2.site-blog h1,
body.ui2.site-samples h1 {
  font-family: var(--ui2-font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ui2-ink);
}
body.ui2.site-editorial h2,
body.ui2.site-industry h2,
body.ui2.site-blog h2,
body.ui2.site-samples h2 {
  font-family: var(--ui2-font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ui2-ink);
}
body.ui2.site-editorial h3,
body.ui2.site-industry h3,
body.ui2.site-blog h3,
body.ui2.site-samples h3 {
  font-family: var(--ui2-font-serif);
  font-weight: 500;
  color: var(--ui2-ink);
}

body.ui2.site-editorial .eyebrow,
body.ui2.site-industry .eyebrow,
body.ui2.site-blog .eyebrow,
body.ui2.site-samples .eyebrow,
body.ui2.site-editorial .badge,
body.ui2.site-industry .badge,
body.ui2.site-blog .badge {
  font-family: var(--ui2-font-mono);
  background: var(--ui2-amber-50);
  border: 1px solid var(--ui2-amber-200);
  color: var(--ui2-amber-700);
  letter-spacing: 0.06em;
}

body.ui2.site-editorial .intro,
body.ui2.site-industry .intro,
body.ui2.site-blog .intro {
  color: var(--ui2-ink-3);
}

/* ─── Cards / panels ────────────────────────────────────────── */

body.ui2.site-editorial .card,
body.ui2.site-industry .card,
body.ui2.site-blog .card,
body.ui2.site-samples .card,
body.ui2.site-samples .panel {
  background: white;
  border: 1px solid var(--ui2-rule);
  border-radius: 10px;
  box-shadow: var(--ui2-shadow-sm);
}
body.ui2.site-samples .panel-accent {
  background: var(--ui2-amber-50);
  border-color: var(--ui2-amber-200);
}
body.ui2.site-editorial .card.note,
body.ui2.site-industry .card.note {
  background: var(--ui2-amber-50);
  border-color: var(--ui2-amber-200);
}
body.ui2.site-editorial .card p,
body.ui2.site-editorial .card li,
body.ui2.site-industry .card p,
body.ui2.site-industry .card li {
  color: var(--ui2-ink-3);
}
body.ui2.site-editorial .card a,
body.ui2.site-industry .card a {
  color: var(--ui2-amber-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.ui2.site-editorial .card a:hover,
body.ui2.site-industry .card a:hover {
  color: var(--ui2-amber-600);
}

/* ─── Pills / status badges ─────────────────────────────────── */

body.ui2.site-samples .pill,
body.ui2.site-industry .pill {
  font-family: var(--ui2-font-mono);
}
body.ui2.site-samples .pill.good,
body.ui2.site-industry .pill.good {
  background: rgba(79, 122, 74, 0.12);
  border-color: rgba(79, 122, 74, 0.32);
  color: var(--ui2-good);
}
body.ui2.site-samples .pill.warn,
body.ui2.site-industry .pill.warn {
  background: rgba(182, 121, 31, 0.12);
  border-color: rgba(182, 121, 31, 0.32);
  color: var(--ui2-warn);
}
body.ui2.site-samples .pill.bad,
body.ui2.site-industry .pill.bad {
  background: rgba(162, 63, 42, 0.12);
  border-color: rgba(162, 63, 42, 0.32);
  color: var(--ui2-bad);
}

/* ─── Samples-specific overrides (was dark) ─────────────────── */

body.ui2.site-samples {
  background: var(--ui2-cream) !important;
  color: var(--ui2-ink) !important;
  background-image: none !important;
}
body.ui2.site-samples .shell {
  color: var(--ui2-ink);
}
body.ui2.site-samples a {
  color: var(--ui2-amber-700);
}
body.ui2.site-samples a:hover {
  color: var(--ui2-amber-600);
}
body.ui2.site-samples p,
body.ui2.site-samples .card p,
body.ui2.site-samples .panel p {
  color: var(--ui2-ink-3);
}
body.ui2.site-samples .meta {
  font-family: var(--ui2-font-mono);
  color: var(--ui2-ink-4);
}
body.ui2.site-samples .card .score {
  font-family: var(--ui2-font-serif);
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ui2-amber-600) !important;
}
body.ui2.site-samples .btn-ghost {
  background: transparent;
  border: 1px solid var(--ui2-rule);
  color: var(--ui2-ink-3);
  border-radius: 999px;
}
body.ui2.site-samples .btn-ghost:hover {
  border-color: var(--ui2-amber-500);
  color: var(--ui2-amber-600);
  text-decoration: none;
}
body.ui2.site-samples newsletters {
  display: block;
  background: var(--ui2-amber-50);
  border-color: var(--ui2-amber-200);
}

/* ─── Blog post body ────────────────────────────────────────── */

body.ui2.site-blog article.post-body h2,
body.ui2.site-blog article.post-body h3 {
  font-family: var(--ui2-font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ui2-ink);
}
body.ui2.site-blog article.post-body p,
body.ui2.site-blog article.post-body li {
  color: var(--ui2-ink-3);
}
body.ui2.site-blog article.post-body strong {
  color: var(--ui2-ink);
}
body.ui2.site-blog article.post-body code {
  background: var(--ui2-paper);
  color: var(--ui2-amber-700);
  border: 1px solid var(--ui2-rule);
}
body.ui2.site-blog article.post-body pre {
  background: var(--ui2-paper);
  border: 1px solid var(--ui2-rule);
}
body.ui2.site-blog article.post-body blockquote {
  border-left-color: var(--ui2-amber-500);
  color: var(--ui2-ink-3);
}
body.ui2.site-blog .callout {
  background: var(--ui2-amber-50);
  border: 1px solid var(--ui2-amber-200);
  border-left: 3px solid var(--ui2-amber-500);
}
body.ui2.site-blog .callout .callout-label {
  font-family: var(--ui2-font-mono);
  color: var(--ui2-amber-700);
}
body.ui2.site-blog .crumbs {
  font-family: var(--ui2-font-mono);
  color: var(--ui2-ink-4);
}
body.ui2.site-blog .byline {
  font-family: var(--ui2-font-mono);
  color: var(--ui2-ink-4);
}
body.ui2.site-blog .byline strong {
  color: var(--ui2-ink-3);
}
body.ui2.site-blog .lede-sub {
  color: var(--ui2-ink-3);
}
body.ui2.site-blog .post-header {
  border-bottom-color: var(--ui2-rule);
}
body.ui2.site-blog footer.post-footer {
  background: white;
  border: 1px solid var(--ui2-rule);
}
body.ui2.site-blog .btn-primary {
  background: var(--ui2-ink);
  color: var(--ui2-cream);
  border-radius: 999px;
  font-family: var(--ui2-font-sans);
  font-weight: 500;
}
body.ui2.site-blog .btn-primary:hover {
  background: var(--ui2-amber-500);
  color: white;
}
body.ui2.site-blog .btn-ghost {
  background: transparent;
  color: var(--ui2-ink);
  border: 1px solid var(--ui2-rule);
  border-radius: 999px;
  font-family: var(--ui2-font-sans);
}
body.ui2.site-blog .btn-ghost:hover {
  border-color: var(--ui2-amber-500);
  color: var(--ui2-amber-600);
}
body.ui2.site-blog .nav-cta {
  background: var(--ui2-ink);
  color: var(--ui2-cream);
  border-radius: 999px;
}
body.ui2.site-blog .nav-cta:hover {
  background: var(--ui2-amber-500);
}
body.ui2.site-blog nav .logo,
body.ui2.site-blog nav .logo a {
  font-family: var(--ui2-font-serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--ui2-ink);
}
body.ui2.site-blog nav .logo span {
  color: var(--ui2-amber-500);
}
body.ui2.site-blog .nav-user-initial {
  background: var(--ui2-amber-500);
  color: white;
}

/* ─── Blog-specific list ────────────────────────────────────── */

body.ui2.site-blog .post-card,
body.ui2.site-blog .post-item,
body.ui2.site-blog article {
  background: white;
  border: 1px solid var(--ui2-rule);
  border-radius: 10px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
body.ui2.site-blog .post-card:hover,
body.ui2.site-blog .post-item:hover {
  border-color: var(--ui2-amber-500);
  box-shadow: 0 8px 40px rgba(232, 89, 12, 0.08);
  transform: translateY(-2px);
}
body.ui2.site-blog .post-meta,
body.ui2.site-blog time {
  font-family: var(--ui2-font-mono);
  color: var(--ui2-ink-4);
}
body.ui2.site-blog .tag {
  font-family: var(--ui2-font-mono);
  background: var(--ui2-amber-50);
  border: 1px solid var(--ui2-amber-200);
  color: var(--ui2-amber-700);
}

/* ─── Industry index (ontario-dental) — leading/competitive markers */

body.ui2.site-industry .leading,
body.ui2.site-industry .pill-leading {
  background: var(--ui2-amber-50);
  color: var(--ui2-amber-700);
  border-color: var(--ui2-amber-200);
}
body.ui2.site-industry .competitive,
body.ui2.site-industry .pill-competitive {
  background: rgba(182, 121, 31, 0.12);
  color: var(--ui2-warn);
}
body.ui2.site-industry .emerging,
body.ui2.site-industry .pill-emerging {
  background: var(--ui2-paper);
  color: var(--ui2-ink-4);
}

/* ─── Footer ────────────────────────────────────────────────── */

body.ui2.site-editorial footer,
body.ui2.site-industry footer,
body.ui2.site-blog footer {
  border-top: 1px solid var(--ui2-rule);
  color: var(--ui2-ink-4);
}
body.ui2.site-editorial footer a:hover,
body.ui2.site-industry footer a:hover,
body.ui2.site-blog footer a:hover {
  color: var(--ui2-amber-600);
}
body.ui2.site-editorial code,
body.ui2.site-industry code,
body.ui2.site-blog code {
  font-family: var(--ui2-font-mono);
  background: var(--ui2-paper);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--ui2-rule);
  font-size: 0.9em;
  color: var(--ui2-ink-2);
}

/* ─── Unsubscribe page (small, centered card) ───────────────── */

body.ui2.page-unsubscribe {
  background: var(--ui2-cream);
  color: var(--ui2-ink);
  font-family: var(--ui2-font-sans);
}
body.ui2.page-unsubscribe .card {
  background: white;
  border: 1px solid var(--ui2-rule);
  border-radius: 12px;
  box-shadow: var(--ui2-shadow-md);
}
body.ui2.page-unsubscribe h1 {
  font-family: var(--ui2-font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ui2-ink);
}
body.ui2.page-unsubscribe h1 .green {
  color: var(--ui2-amber-500);
}
body.ui2.page-unsubscribe .muted {
  color: var(--ui2-ink-4);
}
body.ui2.page-unsubscribe .btn {
  background: var(--ui2-ink);
  color: var(--ui2-cream);
  border-radius: 999px;
  font-weight: 500;
  font-family: var(--ui2-font-sans);
  transition: transform 0.18s, background 0.18s;
}
body.ui2.page-unsubscribe .btn:hover {
  background: var(--ui2-amber-500);
  opacity: 1;
  transform: translateY(-1px);
}
body.ui2.page-unsubscribe .btn-ghost {
  background: transparent;
  border: 1px solid var(--ui2-rule);
  color: var(--ui2-ink-3);
  border-radius: 999px;
}
body.ui2.page-unsubscribe .btn-ghost:hover {
  border-color: var(--ui2-amber-500);
  color: var(--ui2-amber-600);
}
body.ui2.page-unsubscribe .btn-danger {
  border-color: var(--ui2-bad);
  color: var(--ui2-bad);
  border-radius: 999px;
}
body.ui2.page-unsubscribe .row {
  border-top-color: var(--ui2-rule);
}
body.ui2.page-unsubscribe .ok {
  color: var(--ui2-good);
}
body.ui2.page-unsubscribe .fail {
  color: var(--ui2-bad);
}
body.ui2.page-unsubscribe .pill {
  font-family: var(--ui2-font-mono);
  border-color: var(--ui2-rule);
  color: var(--ui2-ink-4);
}
body.ui2.page-unsubscribe .pill.off {
  color: var(--ui2-bad);
  border-color: var(--ui2-bad);
}
body.ui2.page-unsubscribe .footer {
  border-top-color: var(--ui2-rule);
  color: var(--ui2-ink-4);
}

/* ─── Login page (sensitive, CSS overlay only) ──────────────── */

body.ui2.page-site-login {
  background: var(--ui2-cream);
  color: var(--ui2-ink);
  font-family: var(--ui2-font-sans);
}
body.ui2.page-site-login .poster-brand {
  font-family: var(--ui2-font-serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.03em;
}
body.ui2.page-site-login .poster-brand span {
  color: var(--ui2-amber-500);
}
body.ui2.page-site-login .poster-heading {
  font-family: var(--ui2-font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ui2-ink);
}
body.ui2.page-site-login .poster-badge {
  font-family: var(--ui2-font-mono);
  background: var(--ui2-amber-50);
  color: var(--ui2-amber-700);
  border: 1px solid var(--ui2-amber-200);
  letter-spacing: 0.06em;
}
body.ui2.page-site-login .poster-copy,
body.ui2.page-site-login .poster-point-copy,
body.ui2.page-site-login .poster-note {
  color: var(--ui2-ink-3);
}
body.ui2.page-site-login .poster-point-label {
  font-family: var(--ui2-font-mono);
  color: var(--ui2-ink-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.ui2.page-site-login .site-login-card {
  background: white;
  border: 1px solid var(--ui2-rule);
  border-radius: 12px;
  box-shadow: var(--ui2-shadow-md);
}
body.ui2.page-site-login .site-login-card .badge {
  font-family: var(--ui2-font-mono);
  background: var(--ui2-amber-50);
  color: var(--ui2-amber-700);
  border-color: var(--ui2-amber-200);
}
body.ui2.page-site-login .site-login-card h2 {
  font-family: var(--ui2-font-serif);
  font-weight: 400;
  color: var(--ui2-ink);
}
body.ui2.page-site-login .google-btn {
  background: white;
  border: 1px solid var(--ui2-rule);
  color: var(--ui2-ink);
  border-radius: 8px;
  font-family: var(--ui2-font-sans);
  font-weight: 500;
  transition: border-color 0.18s, box-shadow 0.18s;
}
body.ui2.page-site-login .google-btn:hover {
  border-color: var(--ui2-amber-500);
  box-shadow: 0 4px 14px rgba(232, 89, 12, 0.12);
}
body.ui2.page-site-login .tab {
  font-family: var(--ui2-font-sans);
  color: var(--ui2-ink-3);
  border-color: var(--ui2-rule);
}
body.ui2.page-site-login .tab.is-active {
  color: var(--ui2-ink);
  border-color: var(--ui2-ink);
}
body.ui2.page-site-login input[type="text"],
body.ui2.page-site-login input[type="email"] {
  background: var(--ui2-cream);
  border: 1px solid var(--ui2-rule);
  border-radius: 6px;
  font-family: var(--ui2-font-sans);
  color: var(--ui2-ink);
}
body.ui2.page-site-login input:focus {
  border-color: var(--ui2-amber-500);
  box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.12);
}
body.ui2.page-site-login button[type="submit"],
body.ui2.page-site-login .submit-btn {
  background: var(--ui2-ink);
  color: var(--ui2-cream);
  border-radius: 999px;
  font-weight: 500;
  font-family: var(--ui2-font-sans);
}
body.ui2.page-site-login button[type="submit"]:hover,
body.ui2.page-site-login .submit-btn:hover {
  background: var(--ui2-amber-500);
}
body.ui2.page-site-login .divider {
  font-family: var(--ui2-font-mono);
  color: var(--ui2-ink-4);
}
body.ui2.page-site-login a {
  color: var(--ui2-amber-700);
}
body.ui2.page-site-login a:hover {
  color: var(--ui2-amber-600);
}