:root{
      --brand-700:#5b2cff; --brand-600:#6d45ff; --brand-500:#7c59ff;
      --ink:#0f1222; --muted:#5b6070; --bg:#ffffff; --bg-sub:#f6f7fb;
      --card:#ffffff; --border:#e7e9f2; --success:#10b981; --warning:#f59e0b;
      --radius:16px; --shadow:0 10px 30px rgba(20,16,48,.08);
      --max:1200px;
    }

    /* Auto dark mode (prefers-color-scheme) */
    @media (prefers-color-scheme: dark) {
    :root {
        --bg:#0f1222;          /* page background */
        --bg-sub:#14172b;
        --ink:#f6f7fb;         /* body text */
        --muted:#b6bbcf;
        --card:#171a2f;        /* card background */
        --border:#2a2f4a;      /* soft borders */
        --shadow: 0 10px 30px rgba(0,0,0,.35);
        /* brand colors stay the same */
    }
    }

    /* Manual dark mode override (applies regardless of system setting) */
    body.theme-dark {
    --bg:#0f1222;
    --bg-sub:#14172b;
    --ink:#f6f7fb;
    --muted:#b6bbcf;
    --card:#171a2f;
    --border:#2a2f4a;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    }

    /* If you ever want to force light mode manually */
    body.theme-light {
    --bg:#ffffff;
    --bg-sub:#f6f7fb;
    --ink:#0f1222;
    --muted:#5b6070;
    --card:#ffffff;
    --border:#e7e9f2;
    --shadow: 0 10px 30px rgba(20,16,48,.08);
    }

    /* === Links (default) === */
    a {
    color: var(--brand-700);
    text-decoration: none;
    }
    a:hover {
    color: var(--brand-600);
    text-decoration: underline;
    }
    a:visited {
    color: #5a4fcf; /* slightly muted purple/indigo for visited links */
    }

    /* === Dark Mode Links === */
    body.theme-dark a {
    color: #9ecbff; /* lighter blue for dark backgrounds */
    }
    body.theme-dark a:hover {
    color: #b8d9ff;
    text-decoration: underline;
    }
    body.theme-dark a:visited {
    color: #c49dff; /* soft lavender for visited links in dark mode */
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0;color:var(--ink);background:var(--bg);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
    a{color:var(--brand-700);text-decoration:none}
    /* Base button */
    a.btn, button.btn {
    display: inline-block;
    padding: .9rem 1.15rem;
    border-radius: 999px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease;
    min-width: 180px; /* ensures consistent look */
    }

    /* Primary button */
    .btn-primary {
    background: var(--brand-700);
    color: #fff !important;
    }
    .btn-primary:hover {
    background: var(--brand-600);
    color: #fff !important;
    }

    /* Secondary button (more visible) */
    .btn-secondary {
    background: #dfe2ff;   /* darker lavender */
    color: var(--brand-700);
    }
    .btn-secondary:hover {
    background: #c7cbff;   /* darker on hover */
    color: var(--brand-700);
    }

    /* AEO form — keep input + button perfectly aligned */
    :root { --control-h: 48px; } /* tweak to 44/50 if you prefer */

    .aeo-form{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    }

    .aeo-input{
    height: var(--control-h);
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1;
    }
    .aeo-input::placeholder{ color: var(--muted); }

    /* Make the button match the input height visually */
    .aeo-form .aeo-submit{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-h);
    padding: 0 18px;            /* controls horizontal size */
    border-radius: 999px;
    }

    /* Nice focus handling */
    .aeo-input:focus{
    outline: none;
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px rgba(91,44,255,0.12);
    }

    .impact-box {
    margin-top:24px;
    border-radius:6px;
    padding:14px;
    background:#f9f9f9;
    border-left:6px solid;
    border:1px solid rgba(0,0,0,0.1);
    }

    .http-badge {
    display: inline-block;
    font-weight: 500;
    line-height: 1;
    }

    /* Diagnostic Tools Uniform Layout */
    .diag-tools .card .cta {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    }

    .diag-tools .card .cta a,
    .diag-tools .aeo-form input,
    .diag-tools .a11y-form input,
    .diag-tools .aeo-form button,
    .diag-tools .a11y-form button {
    width: 100%;
    }

    /* Optional: On wide screens, keep them stacked for consistency */
    @media (min-width: 960px) {
    .diag-tools .aeo-form,
    .diag-tools .a11y-form {
        grid-template-columns: 1fr; /* stays stacked */
    }
    }

    /* Homepage diagnostic cards: force stacked inputs/buttons */
    .section.alt .diag-tools #aeo-checker .aeo-form,
    .section.alt .diag-tools #a11y-checker .a11y-form {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: 1fr !important; /* stack */
    }

    .section.alt .diag-tools #aeo-checker .aeo-form input,
    .section.alt .diag-tools #aeo-checker .aeo-form button,
    .section.alt .diag-tools #a11y-checker .a11y-form input,
    .section.alt .diag-tools #a11y-checker .a11y-form button {
    width: 100% !important;
    display: block;
    }

    /* Dark mode border/background consistency */
    body.theme-dark .aeo-input{
    background: var(--card);
    border-color: var(--border);
    }

    /* Mobile: stack */
    @media (max-width:720px){
    .aeo-form{ grid-template-columns: 1fr; }
    .aeo-form .aeo-submit{ width: 100%; }
    }

    /* Default CTA layout (centered for hero, pricing, footer) */
    .cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    }

    .cta a {
    text-align: center;
    min-width: 160px;
    max-width: 250px;
    flex: 0 1 auto;
    }

    /* Override only inside case study cards */
    .card .cta,
    .card p.cta {
    justify-content: flex-start !important; /* force left alignment */
    text-align: left;
    }

    .card .cta a,
    .card p.cta a {
    margin-left: 0;
    }

    /* CTA alignment utilities */
    .cta--left   { justify-content: flex-start; text-align: left; }
    .cta--center { justify-content: center; }
    .cta--right  { justify-content: flex-end; }

    /* keep mobile behavior */
    @media (max-width: 720px) {
    .cta--left,
    .cta--right { align-items: stretch; }
    }

    /* Mobile layout: full width */
    @media (max-width: 720px) {
    .cta {
        flex-direction: column;
        align-items: stretch;
    }
    .cta a {
        width: 100%;
        max-width: none;
    }
    }
    .container{max-width:var(--max);margin:auto;padding:0 20px}
    .grid{display:grid;gap:20px}
    .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    @media (max-width: 960px){ .grid-3,.grid-2{grid-template-columns:1fr} }

    /* Layout */
   /* Use variables for hero gradient so it flips automatically */
    /* Use variables for hero gradient so it flips automatically */
    header.hero{
    background: linear-gradient(180deg, var(--bg-sub) 0%, var(--bg) 100%);
    padding: 80px 0 50px;        /* <- restore spacing */
    position: relative;
    overflow: hidden;
    }

    /* Optional richer gradient in manual dark mode */
    body.theme-dark header.hero{
    background: linear-gradient(180deg, #14172b 0%, #0f1222 100%);
    }

    .hero h1{font-size:clamp(2rem,4.2vw,3rem);margin:0 0 10px}
    .hero p{font-size:1.1rem;color:var(--muted);max-width:780px}
    .hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
    .trust{border-top:1px solid var(--border);background:var(--bg-sub);padding:16px 0}
    .logos{display:flex;gap:28px;flex-wrap:wrap;align-items:center;opacity:.8}
    .logos img{height:28px;filter:grayscale(100%);opacity:.7}

    section.section{padding:30px 0}
    .section h2{font-size:1.8rem;margin:0 0 10px}
    .section p.lead{color:var(--muted);margin-top:0}

    .section.alt {
    background: var(--bg-sub);
    }

    .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
    .card h3{margin-top:0}

    .offers .card h3{display:flex;align-items:center;gap:10px}
    .price{font-weight:700}
    .benefits{margin:10px 0 0;padding:0 0 0 18px}
    .benefits li{margin:.2rem 0}

    .leadbox form{display:grid;gap:12px;grid-template-columns:2fr 1fr}
    .leadbox input[type="email"]{border:1px solid var(--border);border-radius:999px;padding:.85rem 1rem;font-size:1rem}
    .leadbox button{width:100%}
    @media (max-width:720px){ .leadbox form{grid-template-columns:1fr} }

    .faq details{border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:var(--card);color:var(--ink)}
    .faq details+details{margin-top:12px}
    .faq summary{cursor:pointer;font-weight:600}

    footer{border-top:1px solid var(--border);background:var(--bg-sub);padding:32px 0;color:var(--muted)}
    .footer-grid{display:grid;gap:20px;grid-template-columns:2fr 1fr 1fr}
    @media (max-width:960px){ .footer-grid{grid-template-columns:1fr} }

    @media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

    .a11y-btn[disabled] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
    }

    /* === Pricing cards (shared across homepage + /pricing/) === */
.plans{
  display:grid;
  gap:24px;
  grid-template-columns:1fr;
  max-width:1000px;
  margin:30px auto;
}
@media (min-width:800px){
  .plans{ grid-template-columns:repeat(2,1fr); }
}
/* When you have 3 plans (e.g., /pricing/), switch to 3 cols on wide screens */
@media (min-width:900px){
  .plans.cols-3{ grid-template-columns:repeat(3,1fr); }
}

.plan{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:18px;
  padding:22px;
  box-shadow:var(--shadow);
  position:relative;
}
.plan.popular{
  border-color:#6f6ffb;
  box-shadow:0 6px 20px rgba(111,111,251,.15);
}
.plan .badge{
  position:absolute;
  top:14px; right:14px;
  background:#6f6ffb; color:#fff;
  padding:4px 10px; border-radius:999px;
  font-size:.78rem; font-weight:600;
}

.plan .price{
  font-size:1.8rem;
  font-weight:800;
  margin:.25rem 0 .5rem;
}
.plan .price small{
  font-weight:600; font-size:1rem; color:var(--muted);
}

.plan .includes{ margin:12px 0 0; padding-left:18px; }
.plan .includes li{ margin:6px 0; }
.plan .cta{ margin-top:14px; }

/* Comparison table (used on /pricing/) */
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ border-bottom:1px solid var(--border); padding:10px 8px; text-align:left; }
.table th{ font-weight:700; }
.check{ font-weight:700; } /* simple checkmark cell style */

/* Align plan cards & buttons */
.plan{ display:flex; flex-direction:column; }
.plan .plan-main{
  display:flex; flex-direction:column; gap:.6rem; flex:1; /* pushes CTAs down evenly */
}
.plan .cta{
  display:grid; grid-template-columns:1fr; gap:10px; margin-top:16px;
}
.plan .footnote{ margin-top:10px; color:var(--muted); font-size:.92rem; }

/* Optional: make buttons full-width inside plans for tidy alignment */
.plan .cta .btn{ width:100%; }

/* If you ever want side-by-side buttons on wide screens: uncomment
@media (min-width:900px){
  .plan .cta{ grid-template-columns:1fr 1fr; }
}
*/

/* Make room for the top-right badge so it never covers the heading */
.plan { padding-top: 28px; }                 /* a bit more breathing room at the top */
.plan .badge { top: 10px; right: 14px; }     /* snug to the corner */
.plan.popular h2 { padding-right: 110px; }   /* reserve space so text doesn't go under the badge */

/* Softer secondary buttons inside plans */
.plan .btn.btn-secondary {
  background: #eef0ff;
  color: #3b2ae0;
}

.video-thumb .play-icon {
  font-size: 2rem;
  color: #fff;
  transition: transform .2s ease, background .2s ease;
}
.video-thumb:hover .play-icon {
  background: rgba(0,0,0,0.8);
  transform: translate(-50%, -50%) scale(1.1);
}

@media (max-width:720px){ #aeo-checker .aeo-form{ grid-template-columns:1fr; } }
#aeoResult .ok     { color: var(--success); font-weight:700; }
#aeoResult .warn   { color: #f59e0b; font-weight:700; }
#aeoResult .bad    { color: #ef4444; font-weight:700; }

/* Global form input consistency */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 0.85rem 1rem;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 999px; /* pill-style across site */
  font-size: 1rem;
  line-height: 1.4;
  background: var(--bg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea {
  border-radius: var(--radius); /* keep textareas slightly square */
  resize: vertical;
  min-height: 120px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(91,44,255,0.1);
}

/* Readiness box: replace light gradient with theme-aware surfaces */
.leadbox {
  background: var(--card);
  border: 1px solid var(--border);
}
body.theme-dark .leadbox {
  /* optional subtle dark gradient to match site look */
  background: linear-gradient(180deg, #1b1f36 0%, #14172b 100%);
}

/* The email + button row inside leadbox */
.leadbox input[type="email"] {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
}

/* Consistent radio buttons */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 6px;
  vertical-align: middle;
}

input[type="radio"]:checked {
  border-color: var(--brand-700);
  background: var(--brand-700);
  box-shadow: inset 0 0 0 3px #fff;
}

input[type="radio"]:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(91,44,255,0.2);
}

/* Label alignment for radios */
label.radio-label {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}

/* Fixed Navbar */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.nav-inner {
  max-width: var(--max);
  margin: auto;
  padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.nav-logo img { height: 100px; }

body.theme-dark .navbar {
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

/* Links (desktop) */
.nav-links { display: flex; gap: 16px; align-items: center; }
.nav-links a { font-weight: 500; color: var(--ink); text-decoration: none; }
.nav-links a:hover { color: var(--brand-700); }

/* Toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  background: transparent; border: 0; cursor: pointer;
  width: 40px; height: 40px; border-radius: 8px;
}
.nav-toggle:focus-visible { outline: 3px solid rgba(91,44,255,0.35); }
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  display: block; width: 22px; height: 2px; background: var(--ink);
  position: relative; margin: 0 auto;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: ""; position: absolute; left: 0;
}
.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after { top: 6px; }

/* When open */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: rotate(90deg); top: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { opacity: 0; }

/* Mobile layout */
@media (max-width: 960px) {
  .nav-logo img { height: 52px; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; /* hidden by default */
    flex-direction: column; gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 20px rgba(20,16,48,.06);
  }
  .nav-links a,
  .nav-links .btn {
    width: 100%; display: block;
    padding: 14px 20px; border-radius: 0;
    border-top: 1px solid var(--border);
  }
  .nav-links .btn.btn-primary {
    margin: 8px 12px 12px; width: auto; text-align: center; border-radius: 999px;
  }
  /* open state */
  .nav-links.is-open { display: flex; }
}

/* Push page content below fixed navbar */
body { padding-top: 80px; } /* adjust if logo height changes */

/* Skip to content */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  z-index: 1100;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  outline: 3px solid rgba(91,44,255,0.35);
}

/* Active link styling */
.nav-links a.active,
.nav-links a[aria-current="page"] {
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
}

/* --- Accessibility toolbar (stable + contrast-safe) --- */
.a11y-toolbar {
  position: fixed;
  left: 0;
  top: 35%;
  z-index: 3000;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: auto;
  font-family: inherit;
  transform: translateZ(0);
  filter: none !important;   /* ignore global grayscale */
  pointer-events: auto;
}

.a11y-handle {
  background: var(--brand-700);
  color: #fff;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 6px 18px rgba(20,16,48,.15);
  font-size: 20px;
  line-height: 1;
  flex: 0 0 44px;
}
.a11y-handle:focus-visible {
  outline: 3px solid rgba(91,44,255,.35);
  outline-offset: 2px;
}

/* Panel */
.a11y-panel {
  display: none;
  width: 280px;
  max-width: 280px;
  flex: 0 0 280px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px;
  white-space: normal;
}
.a11y-panel.is-open { display: block; }

.a11y-title { margin: 4px 0 10px; font-size: 1rem; }
.a11y-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.a11y-btn {
  background: color-mix(in srgb, var(--bg) 85%, var(--brand-700) 15%);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}
.a11y-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--bg) 70%, var(--brand-700) 30%);
  border-color: color-mix(in srgb, var(--border) 60%, var(--brand-700) 40%);
}
/* Fallback if color-mix unsupported */
@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  .a11y-btn { background:#eef0ff; }
  body.theme-dark .a11y-btn { background:#262b4a; }
  .a11y-btn[aria-pressed="true"] { background:#dfe2ff; }
  body.theme-dark .a11y-btn[aria-pressed="true"] { background:#323760; }
}

.a11y-reset {
  background:#fff3f2;
  border-color:#ffd7d4;
  color:#b42318;
}
body.theme-dark .a11y-reset {
  background:#3a1f21;
  border-color:#5a2a2d;
  color:#ffb4ab;
}

/* ===============================
   High-contrast mode (scoped to site-wrap)
   =============================== */
#site-wrap.a11y-contrast {
  --border: #5a5f80;
  --ink: #0b0d18;
}

/* Sharper borders */
#site-wrap.a11y-contrast .card,
#site-wrap.a11y-contrast .leadbox,
#site-wrap.a11y-contrast .faq details,
#site-wrap.a11y-contrast .table th,
#site-wrap.a11y-contrast .table td,
#site-wrap.a11y-contrast .plan {
  border-color: #5a5f80 !important;
  box-shadow: none;
}

/* Links */
#site-wrap.a11y-contrast a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Focus rings */
#site-wrap.a11y-contrast a:focus-visible,
#site-wrap.a11y-contrast button:focus-visible,
#site-wrap.a11y-contrast input:focus-visible,
#site-wrap.a11y-contrast select:focus-visible,
#site-wrap.a11y-contrast textarea:focus-visible {
  outline: 3px solid #5b2cff;
  outline-offset: 2px;
}

/* Muted copy more readable */
#site-wrap.a11y-contrast .lead,
#site-wrap.a11y-contrast .muted,
#site-wrap.a11y-contrast [class*="muted"] {
  color: #1e2236 !important;
}

/* FAQ: always use tokens (works in both light + dark) */
#site-wrap .faq details {
  background: var(--card);
  color: var(--ink);
  border-color: var(--border);
}

/* Summary text + list items inherit readable ink */
#site-wrap .faq summary,
#site-wrap .faq p,
#site-wrap .faq li {
  color: var(--ink);
}

/* Optional: give summary a clearer affordance */
#site-wrap .faq summary {
  position: relative;
  padding-right: 1.5rem;
}
#site-wrap .faq summary::after {
  content: "+";
  position: absolute;
  right: .5rem; top: 0;
  font-weight: 700;
}
#site-wrap .faq details[open] summary::after { content: "–"; }

/* High-contrast (scoped to site-wrap) — sharper borders only */
#site-wrap.a11y-contrast .faq details {
  border-color: #5a5f80 !important;
}
#site-wrap.a11y-contrast .faq summary,
#site-wrap.a11y-contrast .faq p,
#site-wrap.a11y-contrast .faq li {
  color: #0b0d18 !important; /* matches your a11y-contrast --ink */
}

/* ===============================
   Footer (outside #site-wrap)
   =============================== */
body.a11y-contrast footer {
  background:#000 !important;
  color:#fff !important;
  border-top:1px solid #666 !important;
}
body.a11y-contrast footer a {
  color:#9ecbff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.a11y-contrast .footer-grid > * { color:#fff !important; }
body.a11y-contrast footer .btn-primary {
  background:#fff !important; color:#000 !important; border:2px solid #fff !important;
}
body.a11y-contrast footer .btn-secondary {
  background:#222 !important; color:#fff !important; border:2px solid #999 !important;
}

/* ===============================
   Dyslexic font
   =============================== */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('/fonts/OpenDyslexic-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Apply dyslexic font when the class is on #site-wrap */
#site-wrap.a11y-dyslexic,
#site-wrap.a11y-dyslexic * {
  font-family: 'OpenDyslexic', Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* ===============================
   Other modes
   =============================== */
#site-wrap.a11y-underline a { text-decoration: underline; text-underline-offset: 3px; }
#site-wrap.a11y-grayscale { filter: grayscale(100%); }
#site-wrap.a11y-reduce-motion * { animation: none !important; transition: none !important; }

/* ===============================
   Mobile adjustments
   =============================== */
@media (max-width:720px){
  .a11y-toolbar { top:auto; bottom:16px; }
  .a11y-handle { border-radius: 0 10px 0 0; }
  .a11y-panel { width: 240px; max-width: 240px; flex-basis: 240px; }
}

/* SR-only helper */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* === ZebraBar: Neurodiversity helpers === */

/* Focus Mode: reduce visual noise; keep main content prominent */
#site-wrap.a11y-focus header.navbar,
#site-wrap.a11y-focus footer,
#site-wrap.a11y-focus .trust,
#site-wrap.a11y-focus .logos {
  opacity: .25;
  filter: grayscale(100%);
  pointer-events: none;          /* prevents accidental clicks */
}

/* Focus Mode: dim everything except the main content + a11y toolbar + ruler */
#site-wrap.a11y-focus > :not(main):not(.a11y-toolbar):not(.zb-ruler) {
  opacity: .25 !important;
  filter: grayscale(100%) !important;
  pointer-events: none !important;
}

/* Keep toolbar usable */
#site-wrap.a11y-focus .a11y-toolbar {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* Optional: lightly emphasize main content */
#site-wrap.a11y-focus main {
  max-width: 900px;
  margin-inline: auto;
  outline: 2px solid rgba(91,44,255,.25);
  outline-offset: 6px;
}

/* Reading Ruler band */
.zb-ruler {
  position: fixed;
  left: 0; right: 0;
  height: 2.2em;                 /* approx one text line + padding */
  background: rgba(91,44,255,0.10);  /* subtle brand-tinted highlight */
  outline: 2px solid rgba(91,44,255,0.35);
  pointer-events: none;          /* never block UI */
  z-index: 4000;                 /* above navbar (1000) & toolbar (3000) */
}

/* Dark/HC refinements */
body.theme-dark .zb-ruler {
  background: rgba(255,255,255,0.08);
  outline-color: rgba(255,255,255,0.35);
}
#site-wrap.a11y-contrast .zb-ruler {
  background: rgba(255,255,0,0.18);
  outline-color: #ff0;
}

/* When ruler is active, keep a visible cursor */
#site-wrap.a11y-ruler { 
  cursor: default;               /* or try: cursor: crosshair; */
}

/* Homepage diagnostic cards: normalize spacing */
.diag-tools #aeo-checker .aeo-form,
.diag-tools #a11y-checker .a11y-form {
  display: grid;
  grid-template-columns: 1fr; /* stack */
  gap: 10px;
  margin: 0;                  /* no extra margins on the form */
}

/* Remove default input margins inside the cards so spacing = grid gap */
.diag-tools #aeo-checker .aeo-form input,
.diag-tools #a11y-checker .a11y-form input {
  margin: 0;
}

/* And the buttons too (just in case a theme adds some) */
.diag-tools #aeo-checker .aeo-form button,
.diag-tools #a11y-checker .a11y-form button {
  margin: 0;
  width: 100%;
  display: block;
}

/* Pin form/CTA to bottom inside each diagnostic card */
.diag-tools .card {
  display: flex;
  flex-direction: column;
}
.diag-tools .card form,
.diag-tools .card .cta {
  margin-top: auto;
}

.diag-tools .ai-form { display: grid; gap: 10px; grid-template-columns: 1fr; }

/* Pillar card images (landing hub) */
.card .pillar-img {
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: 12px;
  display: block;
  object-fit: cover;
}

.pillar-img{
  width:100%;
  aspect-ratio: 2 / 1;          /* keeps a consistent banner shape */
  object-fit: cover;             /* crops nicely if needed */
  border-radius: var(--radius);
  display:block;
  margin-bottom: 12px;
  border:1px solid var(--border);
  background: var(--bg-sub);
}
.is-landing .hero { padding: 60px 0 40px; } /* slightly tighter landing hero */

/* AEO + GEO results layout */
.aeo-geo-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(3, minmax(280px, 1fr)); /* give each column a sane min */
  align-items:start;
}
@media (max-width:1100px){ .aeo-geo-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:720px){  .aeo-geo-grid{ grid-template-columns:1fr; } }

.pillar{ display:grid; gap:12px; min-width:0; } /* allow content to shrink inside grid cells */

/* Key/value table inside each pillar */
.kv{
  display:grid;
  grid-template-columns:minmax(140px, 220px) 1fr;  /* 220px when there’s room; shrink to 140px when tight */
  gap:8px 14px;
}
@media (max-width:480px){ .kv{ grid-template-columns:1fr; } }

/* keep long values from pushing columns */
.kv div{ padding:6px 0; border-bottom:1px dashed var(--border); min-width:0; }
.kv div:last-child{ overflow-wrap:anywhere; word-break:break-word; }

/* --- Readiness Report Layout --- */

/* Score summary row */
.score-row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 12px 0 8px;
}
@media (max-width: 960px) {
  .score-row { grid-template-columns: 1fr; }
}

/* Each score pill (Combined, AI, AEO+GEO, Accessibility) */
.score-pill {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.score-ring {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
}
.score-pill small {
  color: var(--muted);
  display: block;
  margin-top: 4px;
}

/* Horizontal matrix report */
.report {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-top: 16px;
}
.report-head {
  display: grid;
  grid-template-columns: 220px 1fr 1fr 1fr;
  background: var(--bg-sub);
  font-weight: 700;
  padding: 12px 16px;
}
.report-row {
  display: grid;
  grid-template-columns: 220px 1fr 1fr 1fr;
  padding: 10px 16px;
  border-top: 1px dashed var(--border);
}
@media (max-width: 960px) {
  .report-head, .report-row { grid-template-columns: 1fr; }
}

/* Inline status pills for each check value */
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.status-pill.ok   { background: #dcfce7; color: #166534; }   /* green */
.status-pill.warn { background: #fef9c3; color: #92400e; }   /* yellow */
.status-pill.bad  { background: #fee2e2; color: #991b1b; }   /* red */

/* Email capture box */
.email-report {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr auto;
  margin-top: 16px;
  align-items: center;
}
@media (max-width: 720px) {
  .email-report { grid-template-columns: 1fr; }
}

/* --- Readiness report (stacked cards) --- */
.report-stack { display: grid; gap: 16px; }

/* Score header */
.report-card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.report-headline {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sub);
}
.report-title {
  display: flex; flex-direction: column; gap: 2px;
}
.report-title h2 {
  margin: 0; font-size: 1.05rem; line-height: 1.2;
}
.report-title small { color: var(--muted); }

/* Score ring + pill colors */
.score-ring {
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; border: 2px solid transparent;
}

/* Checks table */
.report-table { width: 100%; border-collapse: collapse; }
.report-table th, .report-table td {
  padding: 10px 14px; border-bottom: 1px dashed var(--border);
  text-align: left; vertical-align: top;
}
.report-table th { width: 240px; font-weight: 700; color: var(--ink); }
@media (max-width: 720px) {
  .report-table th { width: auto; display: block; padding-bottom: 4px; }
  .report-table td { display: block; padding-top: 0; }
}

/* Status chips */
.chip { display: inline-block; padding: 4px 8px; border-radius: 999px; font-weight: 600; }
.chip.ok   { background: #10b98120; color: #047857; border: 1px solid #10b98150; }
.chip.warn { background: #f59e0b20; color: #92400e; border: 1px solid #f59e0b50; }
.chip.bad  { background: #ef444420; color: #991b1b; border: 1px solid #ef444450; }

/* Value bubble (for long text like meta desc) */
.val {
  display: inline-block; padding: 6px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 85%, var(--brand-700) 15%);
  border: 1px solid var(--border);
}

/* small polish */
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display:none; }
details summary strong::after { content: " ▾"; color:#6b7280; font-weight:400; }
details[open] summary strong::after { content: " ▴"; }
.card .badge { border-radius:999px; padding:.15rem .55rem; border:1px solid #e5e7eb; background:#fff; color:#374151; }

.disclaimer {
  font-size: 0.75rem;      /* slightly smaller than body text */
  color: var(--muted);          /* subtle grey */
  margin-top: 1.5em;       /* spacing above */
  font-style: italic;      /* softer look */
}

/* Landing hero */
.hero--landing .hero-wrap{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; /* allow stacking on mobile */
}

.hero--landing .hero-logo{
  height: clamp(48px, 9vw, 96px);  /* scales with viewport */
  width:auto; flex-shrink:0;
}

.hero--landing .hero-title{
  margin:0 0 4px;
  line-height:1.2;
  font-size: clamp(1.35rem, 4.2vw, 2.4rem);
}

.hero--landing .hero-sub{
  margin:4px 0 0;
  font-size: clamp(0.95rem, 2.7vw, 1.15rem);
}

/* Cards: responsive grid */
.grid.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}
@media (max-width: 1024px){
  .grid.grid-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .grid.grid-3{ grid-template-columns: 1fr; }
}

/* Card images scale nicely and keep ratio */
.pillar-img{
  width:100%; height:auto; border-radius:10px;
  aspect-ratio: 16 / 9; object-fit: cover; display:block;
}

/* Button sizing (prevent giant pills on mobile) */
.btn{ padding:.7rem 1.05rem; } /* global nudge smaller */
@media (max-width: 640px){
  .cta .btn{ width:100%; }      /* stacked, easy to tap */
}

/* Add breathing room above footer so floating widgets don't overlap */
@media (max-width: 640px){
  footer{ padding-bottom: 72px; }
}

.is-landing .cta .btn{
  padding:.65rem 1rem;
  font-size: .98rem;
}