/* ── RESET + VARS ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Product sub-header (shared across all layouts) ── */
.psh { background: var(--bg); border-bottom: 1px solid var(--border2); }
.psh-inner { max-width: 1440px; margin: 0 auto; padding: 28px 40px 20px; }
.psh-wordmark { display: block; margin-bottom: 10px; }
.psh-wordmark-svg { height: 28px; width: auto; display: block; }
.psh-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 8px;
}
.psh-desc {
  font-family: 'Gabarito', sans-serif;
  font-size: 15px;
  color: var(--text2);
  line-height: 1.55;
  max-width: 580px;
  min-height: 46px;
}
.psh-rainbow {
  height: 3px;
  background: linear-gradient(90deg,
    #f87171 0%, #fb923c 14%, #fbbf24 28%, #4ade80 42%,
    #60a5fa 57%, #a78bfa 71%, #f472b6 85%, #f87171 100%);
}
@media (max-width: 860px) { .psh-inner { padding: 20px 20px 16px; } }
@media (max-width: 480px) { .psh-inner { padding: 16px 16px 12px; } }

/* ── GLOBAL LINK STYLES ── */
/* Prose links - used in body content, descriptions, guides */
a { color: var(--lavender); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--text); }
a:visited { color: var(--lavender); }
a:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 2px; }
a:active { color: var(--violet); }

/* Prose context: underline body text links */
p a, li a, td a, .doc-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(153,138,194,0.5);
}
p a:hover, li a:hover, td a:hover, .doc-content a:hover {
  color: var(--text);
  text-decoration-color: var(--text);
}

/* Light mode global links */
[data-theme="light"] a { color: var(--lavender); }
[data-theme="light"] a:hover { color: var(--text); }
[data-theme="light"] p a,
[data-theme="light"] li a,
[data-theme="light"] td a,
[data-theme="light"] .doc-content a {
  text-decoration-color: rgba(107,58,154,0.4);
}
[data-theme="light"] p a:hover,
[data-theme="light"] li a:hover,
[data-theme="light"] td a:hover,
[data-theme="light"] .doc-content a:hover {
  text-decoration-color: var(--text);
}


:root {
  --bg:         #101420;
  --bg2:        #111437;
  --bg3:        #192135;
  --violet:       #784a9d;
  --violet-hover: #6a3d8a;
  --violet-m:     #8066ad;
  --lavender:   #998ac2;
  --amber:      #fdbb25;
  --teal:       #139589;
  --text:       #f0f4ff;
  --text2:      #8892a8;
  --text3:      #6d7f99;
  --eggshell:   #ece7de;
  --border:     rgba(120,74,157,0.18);
  --border2:    rgba(120,74,157,0.09);
  --nav-h:      60px;
  /* Code / inline highlight */
  --code-bg:      rgba(120,74,157,0.22);
  --code-text:    #ffffff;
  --code-border:  rgba(153,138,194,0.35);
  --pre-bg:       rgba(120,74,157,0.18);
  /* Callouts */
  --callout-text: #f0f4ff;
  --callout-note-bg:    rgba(120,74,157,0.22);
  --callout-note-bdr:   rgba(153,138,194,0.35);
  --callout-warn-bg:    rgba(243,158,30,0.15);
  --callout-warn-bdr:   rgba(243,158,30,0.4);
  --callout-ok-bg:      rgba(21,128,61,0.15);
  --callout-ok-bdr:     rgba(74,222,128,0.35);
  --callout-danger-bg:  rgba(185,32,37,0.15);
  --callout-danger-bdr: rgba(185,32,37,0.4);
}

/* Light mode variable overrides */
[data-theme="light"] {
  --bg:         #f7f8fc;
  --bg2:        #edf0f7;
  --bg3:        #e4e8f2;
  --violet:       #6b3a9a;
  --violet-hover: #5c3088;
  --violet-m:     #7a52b0;
  --lavender:   #5a3498;
  --amber:      #a05800;
  --teal:       #0d7a6f;
  --text:       #111827;
  --text2:      #374151;
  --text3:      #6b7280;
  --eggshell:   #2a2520;
  --border:     rgba(107,58,154,0.2);
  --border2:    rgba(107,58,154,0.12);
  /* Code / inline highlight */
  --code-bg:      rgba(107,58,154,0.1);
  --code-text:    #1a0a2e;
  --code-border:  rgba(107,58,154,0.25);
  --pre-bg:       rgba(107,58,154,0.07);
  /* Callouts */
  --callout-text: #1a0a2e;
  --callout-note-bg:    rgba(107,58,154,0.12);
  --callout-note-bdr:   rgba(107,58,154,0.3);
  --callout-warn-bg:    rgba(160,88,0,0.08);
  --callout-warn-bdr:   rgba(160,88,0,0.3);
  --callout-ok-bg:      rgba(22,101,52,0.08);
  --callout-ok-bdr:     rgba(22,101,52,0.3);
  --callout-danger-bg:  rgba(185,32,37,0.08);
  --callout-danger-bdr: rgba(185,32,37,0.3);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Gabarito', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── INLINE CODE CHIPS (global - applies to all layouts) ── */
:not(pre) > code {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 14px;
  color: #ffffff !important;
  background: var(--code-bg) !important;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--code-border);
}
[data-theme="light"] :not(pre) > code {
  color: #1a0a2e !important;
  background: var(--code-bg) !important;
}
pre > code {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  border: none;
  background: none;
  padding: 0;
  color: #ffffff !important;
}
[data-theme="light"] pre > code {
  color: #1a0a2e !important;
}

/* ── SKIP LINK ── */
.skip-link {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: fixed; left: 16px; top: 16px;
  width: auto; height: auto; overflow: visible;
  background: var(--violet); color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 8px 16px; border-radius: 6px;
  text-decoration: none; z-index: 9999;
}

/* ── NAV ── */
.site-nav {
  position: relative; z-index: 200;
  height: var(--nav-h);
  background: rgba(16,20,32,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border2);
  display: flex; align-items: center;
}

.nav-inner {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--text); flex-shrink: 0;
}

.nav-wordmark {
  font-family: 'Gabarito', sans-serif;
  font-weight: 500; font-size: 15px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text);
}

.nav-sep {
  width: 1px; height: 16px;
  background: var(--border);
  margin: 0 16px;
  flex-shrink: 0;
}

.nav-section-label { font-size: 13px; color: var(--text2); }

.nav-links {
  display: flex; align-items: center; gap: 2px; list-style: none;
}

/* Plain nav links (e.g. Inspect) */
.nav-links a {
  font-size: 14px; font-weight: 500;
  color: var(--lavender); text-decoration: none;
  transition: color 0.15s, background 0.15s; white-space: nowrap;
  padding: 6px 14px; border-radius: 6px; display: inline-block; font-size: 16px;
}
.nav-links a:hover { color: var(--text) !important; background: rgba(120,74,157,0.1); }
.nav-links a::after { display: none; }

/* Dropdown trigger buttons */
.nav-dd-item { position: relative; }
.nav-dd-trigger {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 500;
  color: var(--lavender); padding: 6px 14px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color 0.15s, background 0.15s; white-space: nowrap;
}
.nav-dd-trigger:hover, .nav-dd-item.dd-open .nav-dd-trigger {
  color: var(--text); background: rgba(120,74,157,0.1);
}
.nav-dd-trigger .nav-chevron { transition: transform 0.18s; flex-shrink: 0; }
.nav-dd-item.dd-open .nav-dd-trigger .nav-chevron { transform: rotate(180deg); }

/* Dropdown panel */
.nav-dd-panel {
  position: absolute; top: calc(100% + 6px); left: -8px;
  background: rgba(11,14,24,0.97);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 6px; min-width: 260px;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.nav-dd-panel.wide { min-width: 380px; }
.nav-dd-item.dd-open .nav-dd-panel { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-dd-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.nav-dd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

/* Dropdown items */
.nav-dd-link {
  display: block;
  padding: 7px 9px;
  border-radius: 6px; text-decoration: none;
  transition: background 0.13s; cursor: pointer;
}
.nav-dd-link::after { content: ''; display: table; clear: both; }
.nav-dd-link:hover { background: rgba(120,74,157,0.12); }
.nav-dd-link.nav-dd-disabled { opacity: 0.45; pointer-events: none; }
.nav-dd-icon {
  float: left; margin-right: 9px;
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--bg3); display: flex; align-items: center; justify-content: center;
}
.nav-dd-icon svg { width: 14px; height: 14px; }
/* Text group: new BFC so it can't overlap the float */
.nav-dd-link > span:not(.nav-dd-icon) { display: block; overflow: hidden; }
.nav-dd-name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.2; display: block; }
.nav-dd-desc { font-size: 12px; color: var(--text3); margin-top: 2px; line-height: 1.35; display: block; }
.nav-dd-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .05em;
  padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: middle;
}
.nav-dd-badge.free { background: rgba(74,222,128,.12); color: #4ade80; }
.nav-dd-badge.soon { background: rgba(253,187,37,.15); color: #fdbb25; }
.nav-dd-all {
  display: flex; align-items: center; gap: 5px; padding: 7px 9px; margin-top: 2px;
  font-size: 13px; font-weight: 600; color: var(--lavender);
  text-decoration: none; border-radius: 6px; transition: color 0.13s, background 0.13s;
}
.nav-dd-all:hover { background: rgba(120,74,157,0.12); color: var(--text); }

/* Light theme */
[data-theme="light"] .nav-links a:hover { color: var(--violet) !important; background: rgba(107,58,154,0.08); }
[data-theme="light"] .nav-dd-trigger:hover,
[data-theme="light"] .nav-dd-item.dd-open .nav-dd-trigger { color: var(--violet); background: rgba(107,58,154,0.08); }
[data-theme="light"] .nav-dd-panel { background: #fff; border-color: var(--border); }
[data-theme="light"] .nav-dd-name { color: var(--text); }
[data-theme="light"] .nav-dd-link:hover { background: rgba(107,58,154,0.07); }

/* ── NAV ACTIONS (theme, a11y panel) ── */
.mkt-nav-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: 16px; }
.mkt-nav-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 7px; background: transparent; border: none; color: var(--text2); cursor: pointer; transition: color 0.15s, background 0.15s; }
.mkt-nav-btn:hover { background: rgba(120,74,157,0.1); color: var(--text); }
.mkt-nav-btn.active-pref { background: rgba(120,74,157,0.15); color: var(--lavender); }
.mkt-icon-sun { display: none; }
.mkt-icon-moon { display: block; }
[data-theme="light"] .mkt-icon-sun { display: block; }
[data-theme="light"] .mkt-icon-moon { display: none; }

/* ── HAMBURGER ── */
.nav-hamburger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: transparent; border: none; color: var(--text2); cursor: pointer; transition: color 0.15s, background 0.15s; flex-shrink: 0; }
.nav-hamburger:hover { background: rgba(120,74,157,0.1); color: var(--text); }

/* ── A11Y PREFERENCES PANEL ── */
.a11y-panel-wrap { position: relative; }
.mkt-a11y-btn { display: flex; align-items: center; justify-content: center; height: 34px; padding: 0 10px; border-radius: 7px; background: transparent; border: 1px solid var(--border); color: var(--text2); cursor: pointer; font-family: 'Gabarito', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; transition: color 0.15s, background 0.15s, border-color 0.15s; }
.mkt-a11y-btn:hover { background: rgba(120,74,157,0.1); color: var(--text); }
.mkt-a11y-btn[aria-expanded="true"] { background: rgba(120,74,157,0.15); color: var(--lavender); border-color: var(--violet); }
.a11y-panel { position: absolute; top: calc(100% + 10px); right: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; min-width: 220px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); z-index: 9000; }
.a11y-panel[hidden] { display: none; }
.a11y-panel-heading { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text2); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border2); }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; }
.a11y-label { font-size: 13px; font-weight: 500; color: var(--text2); cursor: pointer; line-height: 1.3; }
.a11y-toggle { flex-shrink: 0; width: 36px; height: 20px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--border); cursor: pointer; position: relative; transition: background 0.2s, border-color 0.2s; padding: 0; }
.a11y-toggle[aria-checked="true"] { background: var(--violet); border-color: var(--violet); }
.a11y-toggle-thumb { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--text3); position: absolute; top: 50%; left: 2px; transform: translateY(-50%); transition: left 0.2s, background 0.2s; }
.a11y-toggle[aria-checked="true"] .a11y-toggle-thumb { left: 18px; background: #fff; }
.mobile-a11y-section { padding: 16px 24px 24px; border-top: 1px solid var(--border2); }
.mobile-a11y-heading { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text2); margin-bottom: 12px; }
.mobile-a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border2); }
.mobile-a11y-row:last-child { border-bottom: none; }
.mobile-a11y-label { font-size: 15px; font-weight: 500; color: var(--text2); cursor: pointer; }
[data-theme="light"] .mkt-a11y-btn { color: var(--text2); border-color: var(--border); }
[data-theme="light"] .mkt-a11y-btn:hover { background: rgba(107,58,154,0.08); color: var(--text); }
[data-theme="light"] .mkt-a11y-btn[aria-expanded="true"] { background: rgba(107,58,154,0.1); color: var(--lavender); border-color: var(--violet); }
[data-theme="light"] .a11y-panel { background: var(--bg); box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
[data-theme="light"] .a11y-toggle { background: var(--bg3); border-color: var(--border); }
[data-theme="light"] .a11y-toggle[aria-checked="true"] { background: var(--violet); border-color: var(--violet); }

/* ── MOBILE DRAWER ── */
.mobile-drawer { position: fixed; top: 0; left: 0; right: 0; width: 100%; background: var(--bg2); border-bottom: 1px solid var(--border); z-index: 8000; transform: translateY(-100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; overflow-y: auto; max-height: 92vh; }
.mobile-drawer.open { transform: translateY(0); }
.mobile-drawer-overlay { position: fixed; inset: 0; z-index: 7999; background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; }
.mobile-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border2); flex-shrink: 0; }
.mobile-drawer-title { font-family: 'Gabarito', sans-serif; font-size: 13px; font-weight: 600; color: var(--text2); letter-spacing: 0.04em; }
.mobile-drawer-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: transparent; border: none; color: var(--text2); cursor: pointer; transition: color 0.15s, background 0.15s; }
.mobile-drawer-close:hover { background: rgba(120,74,157,0.1); color: var(--text); }
.mobile-drawer-nav { flex: 1; padding: 12px 0; }
.mobile-drawer-nav a { display: flex; align-items: center; justify-content: center; padding: 14px 24px; min-height: 52px; font-size: 16px; font-weight: 500; color: var(--text2); text-decoration: none; border-left: none; border-bottom: 1px solid var(--border2); transition: color 0.15s, background 0.15s; }
.mobile-drawer-nav a:hover, .mobile-drawer-nav a:active { color: var(--text); background: rgba(120,74,157,0.08); border-left-color: var(--violet); }
.mobile-drawer-section-head { font-weight: 600; color: var(--text); }
.mobile-drawer-nav .mobile-drawer-section-head.md-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 14px 24px; min-height: 52px; font-size: 16px; font-weight: 600; color: var(--text); background: none; border: none; border-bottom: 1px solid var(--border2); cursor: pointer; font-family: inherit; transition: color 0.15s, background 0.15s; }
.mobile-drawer-nav .mobile-drawer-section-head.md-toggle:hover { color: var(--text); background: rgba(120,74,157,0.08); }
.md-chevron { flex-shrink: 0; transition: transform 0.2s ease; margin-left: auto; }
.md-toggle[aria-expanded="true"] .md-chevron { transform: rotate(180deg); }
.mobile-drawer-sub { font-size: 14px; padding: 10px 24px 10px 36px; min-height: 42px; color: var(--text3); border-bottom-color: rgba(255,255,255,0.04); }
.mobile-drawer-nav .mobile-drawer-sub:hover { color: var(--text2); }
.mobile-drawer-footer { padding: 16px 20px; border-top: 1px solid var(--border2); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mobile-drawer-action { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--border); color: var(--text2); cursor: pointer; transition: color 0.15s, background 0.15s; }
.mobile-drawer-action:hover { background: rgba(120,74,157,0.1); color: var(--text); }
.mobile-drawer-action.active-pref { background: rgba(120,74,157,0.18); color: var(--lavender); border-color: var(--violet); }
.mobile-drawer-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); padding: 16px 24px 8px; display: block; }


/* ── LIGHT MODE NAV ── */
[data-theme="light"] .site-nav { background: rgba(247,248,252,0.95); border-bottom-color: var(--border2); }
[data-theme="light"] .nav-wordmark, [data-theme="light"] .nav-links a { color: var(--text2); }
[data-theme="light"] .nav-links a:hover { color: var(--violet); }
[data-theme="light"] .nav-links a::after { background: var(--violet); }
[data-theme="light"] .mkt-nav-btn { color: var(--text2); }
[data-theme="light"] .mkt-nav-btn:hover { background: rgba(107,58,154,0.1); color: var(--text); }
[data-theme="light"] .mkt-nav-btn.active-pref { background: rgba(107,58,154,0.12); color: var(--lavender); }
[data-theme="light"] .nav-hamburger { color: var(--text2); }
[data-theme="light"] .nav-hamburger:hover { background: rgba(107,58,154,0.1); color: var(--text); }
[data-theme="light"] .mobile-drawer { background: var(--bg); border-left-color: var(--border); }
[data-theme="light"] .mobile-drawer-header { border-bottom-color: var(--border2); }
[data-theme="light"] .mobile-drawer-nav a { color: var(--text2); }
[data-theme="light"] .mobile-drawer-nav a:hover { background: rgba(107,58,154,0.08); border-left-color: var(--violet); color: var(--text); }
[data-theme="light"] .mobile-drawer-footer { border-top-color: var(--border2); }
[data-theme="light"] .mobile-drawer-action { background: var(--bg2); border-color: var(--border); color: var(--text2); }
[data-theme="light"] .mobile-drawer-action:hover { background: rgba(107,58,154,0.1); color: var(--text); }
[data-theme="light"] .mobile-drawer-action.active-pref { background: rgba(107,58,154,0.12); color: var(--lavender); }

/* ── LIGHT MODE LOGO FILLS - all SVG class variants ── */
[data-theme="light"] .ni1, [data-theme="light"] .mni1, [data-theme="light"] .dli1, [data-theme="light"] .fi1 { fill: #5a3498; }
[data-theme="light"] .ni2, [data-theme="light"] .mni2, [data-theme="light"] .dli2, [data-theme="light"] .fi2 { fill: #0d7a6f; }
[data-theme="light"] .pli1, [data-theme="light"] .pai1 { fill: #5a3498; }
[data-theme="light"] .pli2, [data-theme="light"] .pai2 { fill: #0d7a6f; }

/* ── DYSLEXIA MODE ── */
[data-dyslexia="true"] body, [data-dyslexia="true"] p, [data-dyslexia="true"] li, [data-dyslexia="true"] td { font-family: 'Atkinson Hyperlegible', sans-serif !important; letter-spacing: 0.03em; word-spacing: 0.12em; line-height: 1.9; }
[data-dyslexia="true"] h1, [data-dyslexia="true"] h2, [data-dyslexia="true"] h3, [data-dyslexia="true"] h4 { font-family: 'Atkinson Hyperlegible', sans-serif !important; letter-spacing: 0.02em; }
[data-dyslexia="true"] .doc-content p, [data-dyslexia="true"] .doc-content li { text-align: left !important; }
[data-dyslexia="true"] .hero-headline, [data-dyslexia="true"] .home-wordmark, [data-dyslexia="true"] .page-title { font-family: 'Atkinson Hyperlegible', sans-serif !important; }

/* ── REDUCED MOTION ── */
html[data-reduced-motion="true"] *, html[data-reduced-motion="true"] *::before, html[data-reduced-motion="true"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }

/* ── TEXT SIZE ── */
html[data-text-size="large"] main { zoom: 1.25; }

/* ── HOVER HIGHLIGHTS ── */
html[data-focus="enhanced"] a:hover,
html[data-focus="enhanced"] button:hover,
html[data-focus="enhanced"] [role="button"]:hover,
html[data-focus="enhanced"] input:hover,
html[data-focus="enhanced"] select:hover,
html[data-focus="enhanced"] textarea:hover,
html[data-focus="enhanced"] *:focus-visible { outline: 3px solid #fdbb25 !important; outline-offset: 3px !important; }
html[data-focus="enhanced"] a:hover,
html[data-focus="enhanced"] a:focus-visible { border-radius: 3px; }
html[data-theme="light"][data-focus="enhanced"] a:hover,
html[data-theme="light"][data-focus="enhanced"] button:hover,
html[data-theme="light"][data-focus="enhanced"] [role="button"]:hover,
html[data-theme="light"][data-focus="enhanced"] input:hover,
html[data-theme="light"][data-focus="enhanced"] select:hover,
html[data-theme="light"][data-focus="enhanced"] textarea:hover,
html[data-theme="light"][data-focus="enhanced"] *:focus-visible { outline-color: #b45309 !important; }

/* ── UNDERLINE LINKS (scoped to main content only) ── */
html[data-underline-links="true"] main a { text-decoration: underline !important; text-underline-offset: 3px !important; }
html[data-underline-links="true"] [inert] a,
html[data-underline-links="true"] a[aria-hidden="true"],
html[data-underline-links="true"] a[tabindex="-1"] { text-decoration: none !important; }

/* ── HIGH CONTRAST ── */
/* Dark mode + high contrast: pure black bg, pure white fg */
html[data-contrast="high"] {
  --bg: #000 !important; --bg2: #000 !important; --bg3: #0e0e0e !important;
  --text: #fff !important; --text2: #fff !important; --text3: #bbb !important;
  --border: rgba(255,255,255,0.35) !important; --border2: rgba(255,255,255,0.15) !important;
  --violet: #fff !important; --lavender: #fff !important; --amber: #fff !important;
  --pre-bg: #0e0e0e !important; --code-border: rgba(255,255,255,0.2) !important;
  --callout-note-bg: rgba(255,255,255,0.06) !important; --callout-warn-bg: rgba(255,255,255,0.06) !important;
  --callout-ok-bg: rgba(255,255,255,0.06) !important; --callout-danger-bg: rgba(255,255,255,0.06) !important;
  --callout-text: #fff !important;
}
html[data-contrast="high"] body { background: #000 !important; }
html[data-contrast="high"] .site-nav { background: rgba(0,0,0,0.97) !important; border-bottom-color: rgba(255,255,255,0.25) !important; }
/* SVG logo and wordmark fills */
html[data-contrast="high"] .fi1,
html[data-contrast="high"] .fi2,
html[data-contrast="high"] .dli1,
html[data-contrast="high"] .dli2,
html[data-contrast="high"] .cls-1,
html[data-contrast="high"] .cls-2 { fill: #fff !important; }
/* Hardcoded text colors */
html[data-contrast="high"] .home-wordmark { color: #fff !important; }
html[data-contrast="high"] .hero-about { color: #fff !important; }
html[data-contrast="high"] .hero-about a { color: #fff !important; }
/* Plan card buttons */
html[data-contrast="high"] .btn-plan-cta,
html[data-contrast="high"] .btn-plan-cta:visited { background: #fff !important; color: #000 !important; }
html[data-contrast="high"] .btn-plan-cta:hover { background: #ddd !important; }
html[data-contrast="high"] .btn-primary,
html[data-contrast="high"] .btn-primary:visited { background: #fff !important; color: #000 !important; }
html[data-contrast="high"] .btn-primary:hover { background: #ddd !important; }
/* Plan card tier colors */
html[data-contrast="high"] .plan-name.free,
html[data-contrast="high"] .plan-features li .check-free { color: #fff !important; }
html[data-contrast="high"] .plan-name.pro,
html[data-contrast="high"] .plan-features li .check-pro { color: #fff !important; }
html[data-contrast="high"] .nav-links a:hover { color: #fff !important; }
/* Toggle */
html[data-contrast="high"] .a11y-toggle[aria-checked="true"] { background: #fff !important; border-color: #fff !important; }
html[data-contrast="high"] .a11y-toggle[aria-checked="true"] .a11y-toggle-thumb { background: #000 !important; }

/* Light mode + high contrast: pure white bg, pure black fg */
html[data-theme="light"][data-contrast="high"] {
  --bg: #fff !important; --bg2: #fff !important; --bg3: #f0f0f0 !important;
  --text: #000 !important; --text2: #000 !important; --text3: #333 !important;
  --border: rgba(0,0,0,0.35) !important; --border2: rgba(0,0,0,0.15) !important;
  --violet: #000 !important; --lavender: #000 !important; --amber: #000 !important;
  --pre-bg: #f0f0f0 !important; --code-border: rgba(0,0,0,0.2) !important;
  --callout-note-bg: rgba(0,0,0,0.05) !important; --callout-warn-bg: rgba(0,0,0,0.05) !important;
  --callout-ok-bg: rgba(0,0,0,0.05) !important; --callout-danger-bg: rgba(0,0,0,0.05) !important;
  --callout-text: #000 !important;
}
html[data-theme="light"][data-contrast="high"] body { background: #fff !important; }
html[data-theme="light"][data-contrast="high"] .site-nav { background: rgba(255,255,255,0.97) !important; border-bottom-color: rgba(0,0,0,0.25) !important; }
/* SVG logo and wordmark fills */
html[data-theme="light"][data-contrast="high"] .fi1,
html[data-theme="light"][data-contrast="high"] .fi2,
html[data-theme="light"][data-contrast="high"] .dli1,
html[data-theme="light"][data-contrast="high"] .dli2,
html[data-theme="light"][data-contrast="high"] .cls-1,
html[data-theme="light"][data-contrast="high"] .cls-2 { fill: #000 !important; }
/* Hardcoded text colors */
html[data-theme="light"][data-contrast="high"] .home-wordmark { color: #000 !important; }
html[data-theme="light"][data-contrast="high"] .hero-about { color: #000 !important; }
html[data-theme="light"][data-contrast="high"] .hero-about a { color: #000 !important; }
/* Plan card buttons */
html[data-theme="light"][data-contrast="high"] .btn-plan-cta,
html[data-theme="light"][data-contrast="high"] .btn-plan-cta:visited { background: #000 !important; color: #fff !important; }
html[data-theme="light"][data-contrast="high"] .btn-plan-cta:hover { background: #333 !important; }
html[data-theme="light"][data-contrast="high"] .btn-primary,
html[data-theme="light"][data-contrast="high"] .btn-primary:visited { background: #000 !important; color: #fff !important; }
html[data-theme="light"][data-contrast="high"] .btn-primary:hover { background: #333 !important; }
/* Plan card tier colors */
html[data-theme="light"][data-contrast="high"] .plan-name.free,
html[data-theme="light"][data-contrast="high"] .plan-features li .check-free { color: #000 !important; }
html[data-theme="light"][data-contrast="high"] .plan-name.pro,
html[data-theme="light"][data-contrast="high"] .plan-features li .check-pro { color: #000 !important; }
html[data-theme="light"][data-contrast="high"] .nav-links a:hover { color: #000 !important; }
/* Toggle */
html[data-theme="light"][data-contrast="high"] .a11y-toggle[aria-checked="true"] { background: #000 !important; border-color: #000 !important; }
html[data-theme="light"][data-contrast="high"] .a11y-toggle[aria-checked="true"] .a11y-toggle-thumb { background: #fff !important; }
html[data-theme="light"][data-contrast="high"] .a11y-panel { background: #fff !important; box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important; }

/* ── A11Y RESET BUTTON ── */
.a11y-reset-row { padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--border2); }
.a11y-reset-btn { font-size: 11.5px; color: var(--text3); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s; font-family: 'Gabarito', sans-serif; width: 100%; text-align: left; }
.a11y-reset-btn:hover { color: var(--text2); }

/* ── MOBILE NAV ── */
@media (max-width: 640px) {
  .nav-links { display: none !important; }
  .mkt-nav-actions { display: none !important; }
  .nav-hamburger { display: flex; }
  .nav-inner { padding: 0 16px; }
  .footer-inner { flex-direction: column; align-items: flex-end; gap: 16px; text-align: right; }
  .footer-logo { display: flex; justify-content: flex-end; width: 100%; }
  .footer-right { text-align: right; width: 100%; }
  .footer-rows { align-items: flex-end; }
  .footer-credit { text-align: right; }
  .footer-nav-row { justify-content: flex-end; }
  .footer-legal-row { justify-content: flex-end; }
}


/* ── BUTTONS ── */
.btn-primary,
.btn-primary:visited,
.btn-primary:active {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--violet); color: #fff !important;
  font-family: 'Gabarito', sans-serif; font-size: 14px; font-weight: 600;
  padding: 11px 22px; border-radius: 8px;
  text-decoration: none !important;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--violet-hover); color: #fff !important; }
.btn-primary.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-secondary,
.btn-secondary:visited {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--text2) !important;
  font-family: 'Gabarito', sans-serif; font-size: 14px; font-weight: 500;
  padding: 11px 22px; border-radius: 8px;
  border: 1px solid var(--lavender);
  text-decoration: none !important;
  transition: border-color 0.15s, color 0.15s;
}
.btn-secondary:hover { border-color: var(--violet); color: var(--text) !important; }
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-secondary:visited { border-color: var(--lavender); }

.callout--note,
.callout--info,
.callout--warning,
.callout--success,
.callout--danger {
  border-radius: 8px; padding: 16px 20px;
  margin: 20px 0; max-width: min(640px, 100%);
  font-size: 16px; line-height: 1.65;
  color: var(--callout-text);
}
.callout--note, .callout--info { background: var(--callout-note-bg); border: 1px solid var(--callout-note-bdr); }
.callout--warning { background: var(--callout-warn-bg); border: 1px solid var(--callout-warn-bdr); }
.callout--success { background: var(--callout-ok-bg); border: 1px solid var(--callout-ok-bdr); }
.callout--danger  { background: var(--callout-danger-bg); border: 1px solid var(--callout-danger-bdr); }
/* Explicit p rule - MUST be here or .doc-content p / .gs-guide-body p will override inherited color */
.callout--note p, .callout--info p,
.callout--warning p, .callout--success p,
.callout--danger p { color: var(--callout-text) !important; font-size: 16px; max-width: none; }
.callout--note strong, .callout--info strong,
.callout--warning strong, .callout--success strong,
.callout--danger strong { font-weight: 700; color: var(--callout-text); }
.callout--note li, .callout--info li,
.callout--warning li, .callout--success li,
.callout--danger li { color: var(--callout-text) !important; font-size: 16px; }
.callout--note ul, .callout--info ul,
.callout--warning ul, .callout--success ul,
.callout--danger ul { margin-top: 8px; margin-bottom: 0; }
.callout--note pre, .callout--info pre,
.callout--warning pre, .callout--success pre,
.callout--danger pre { background: rgba(0,0,0,0.2); margin: 10px 0 4px; }

/* ── FOOTER ── */
.site-footer {
  padding: 64px 0;
  position: relative; z-index: 1;
}

.footer-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

.footer-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
}

.footer-right { text-align: right; }
.footer-rows { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.footer-nav-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.site-footer .footer-nav-row a { font-size: 13.5px; color: var(--text2); text-decoration: none; transition: color 0.15s; }
.site-footer .footer-nav-row a:hover { color: var(--lavender); }
.footer-legal-row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.site-footer .footer-legal-row a { font-size: 12px; color: var(--text3); text-decoration: none; padding: 1px 5px; transition: color 0.15s; }
.site-footer .footer-legal-row a:hover { color: var(--text2); }
.footer-sep { color: var(--border); font-size: 11px; }
.footer-version { font-size: 11px; color: var(--text3); margin-left: 6px; line-height: 1; vertical-align: middle; }
.footer-attribution { font-size: 11px; color: var(--text2); }
.footer-attribution .footer-byline { color: var(--text2); }
.footer-attribution .footer-byline a { color: var(--lavender); }
.footer-attribution .footer-copyright { color: var(--text3); opacity: 0.45; }
.site-footer .footer-attribution a { color: var(--text3); }