/* ==========================================================================
   Equitiesnagain — Design System
   Palette: deep navy authority + brass accent, warm parchment background
   Type: Source Serif 4 (display/headlines) + IBM Plex Sans (UI/body)
   ========================================================================== */

:root{
  /* Color tokens */
  --navy-950: #0B1B30;
  --navy-900: #10233D;
  --navy-800: #16304F;
  --navy-700: #1F4066;
  --parchment: #F6F3EC;
  --parchment-deep: #ECE6D6;
  --ink: #1B1D1F;
  --ink-soft: #4A4F55;
  --brass: #A9812F;      /* accent — base 4.6:1 on parchment, use --brass-deep for text */
  --brass-deep: #7A5A1D; /* AA-safe on parchment, 5.8:1 */
  --brass-bright: #C79A3E; /* decorative only, not for text on light bg */
  --line: #D8D1BE;
  --line-dark: rgba(246,243,236,0.18);
  --alert-bg: #F6E9E4;
  --alert-border: #B4472E;
  --alert-text: #7A2E1C;
  --focus-ring: #1F4066;

  /* Type */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale (rem-based — required for the font-size accessibility toggle) */
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: 2.05rem;
  --step-4: 2.75rem;
  --step-5: 3.6rem;

  --radius-sm: 3px;
  --radius-md: 6px;
  --shadow-card: 0 1px 2px rgba(11,27,48,0.06), 0 8px 24px rgba(11,27,48,0.07);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: auto; } /* Lenis handles smooth scroll; avoid dual-scroll conflict */
body{
  margin:0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--navy-800); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
/* On dark-background regions the default navy focus ring drops to ~1.6:1
   against the navy-950 backdrop, failing WCAG 1.4.11 non-text contrast.
   Swap to brass-bright there, which holds 6.7:1 against navy-950. */
.site-header a:focus-visible, .site-header button:focus-visible,
.hero a:focus-visible, .hero button:focus-visible,
.section-navy a:focus-visible, .section-navy button:focus-visible,
.site-footer a:focus-visible, .site-footer button:focus-visible{
  outline-color: var(--brass-bright);
}
/* The accessibility toggle is position:fixed and can sit over any part of
   the page as the user scrolls, so a single outline color can't be relied
   on for 3:1 contrast against an unpredictable backdrop. A white ring plus
   a navy halo guarantees at least one ring reads clearly on any surface. */
.a11y-toggle:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--navy-950);
}
.container{ max-width: 1140px; margin:0 auto; padding: 0 24px; }
.visually-hidden{
  position:absolute !important; width:1px;height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; margin:-1px; padding:0; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-60px; background:var(--navy-950); color:#fff;
  padding:10px 16px; z-index:1000; border-radius: var(--radius-sm); transition: top .15s ease;
}
.skip-link:focus{ top:12px; }

h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; line-height:1.15; margin:0 0 .5em; color: var(--navy-950); }
h1{ font-size: clamp(2.1rem, 4.2vw, var(--step-5)); }
h2{ font-size: clamp(1.6rem, 3vw, var(--step-4)); }
h3{ font-size: var(--step-2); }
p{ margin:0 0 1em; max-width: 68ch; }
.lede{ font-size: var(--step-1); color: var(--ink-soft); max-width: 60ch; }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 60;
  background: var(--navy-950);
  color: var(--parchment);
  border-bottom: 1px solid var(--line-dark);
}
.header-bar{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding: 14px 0; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; }
.brand-mark{
  width:40px;height:40px;border-radius:50%;
  /* Solid brass-bright, not a gradient into brass-deep: navy-950 text on the
     brass-deep end of the old gradient measured 2.7:1, below the 3:1 floor
     even for bold/large text. Solid brass-bright holds 6.7:1. */
  background: var(--brass-bright);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; color: var(--navy-950); font-size:1.1rem;
  flex: none;
}
.brand-name{ font-family: var(--font-display); font-size:1.15rem; letter-spacing:.01em; }
.brand-name small{ display:block; font-family: var(--font-body); font-size:.68rem; color:#C9CFDA; font-weight:400; }

.main-nav{ display:flex; align-items:center; gap:4px; }
.main-nav a{
  color: #E7EAF0; text-decoration:none; font-size:.95rem; padding:10px 12px; border-radius: var(--radius-sm);
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ background: var(--navy-800); color:#fff; }
.nav-cta{
  background: var(--brass-bright); color: var(--navy-950) !important; font-weight:600;
}
.nav-cta:hover{ background:#D9AE52 !important; }
.nav-toggle{ display:none; }

@media (max-width: 860px){
  .main-nav{
    position:fixed; inset: 68px 0 0 0; background: var(--navy-950);
    flex-direction:column; align-items:stretch; padding: 0; gap:0;
    transform: translateX(100%); transition: transform .25s ease; overflow-y:auto;
    box-shadow: -8px 0 24px rgba(0,0,0,.25);
  }
  .main-nav.open{ transform: translateX(0); }
  .mobile-nav-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid var(--line-dark);
    font-family: var(--font-display); font-size:1.05rem; color:#fff;
  }
  .mobile-nav-close{
    background:transparent; border:1px solid var(--line-dark); color:#fff;
    width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:1rem; line-height:1;
  }
  .main-nav a{ padding:16px 20px; border-bottom:1px solid var(--line-dark); font-size:1.1rem; }
  .nav-cta{ margin:16px 20px; text-align:center; border-radius: var(--radius-sm); }
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:44px;height:44px; background:transparent; border:1px solid var(--line-dark); color:#fff;
    border-radius: var(--radius-sm); cursor:pointer; font-size:1.1rem;
  }
}
.mobile-nav-head{ display:none; }

/* While the full-screen mobile nav is open, hide the top strip and the
   floating accessibility button — both would otherwise visually collide
   with the open panel (the a11y button in particular sits at a fixed
   viewport position and was showing up awkwardly overlapping the menu). */
body.mobile-nav-open .top-strip,
body.mobile-nav-open .a11y-toggle,
body.mobile-nav-open .a11y-panel{ display:none; }

.top-strip{
  background: var(--navy-900); color:#B9C3D4; font-size:.82rem;
}
.top-strip .container{ display:flex; justify-content:center; text-align:center; gap:16px; padding:6px 24px; flex-wrap:wrap; }
.top-strip a{ color:#D8DEE9; text-decoration:none; }

/* ---------- Hero ---------- */
.hero{
  background: radial-gradient(1200px 600px at 85% -10%, rgba(169,129,47,0.18), transparent 60%), var(--navy-950);
  color: var(--parchment); padding: 72px 0 88px; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0; opacity:.08; pointer-events:none;
  background-image: repeating-linear-gradient(to top, transparent, transparent 39px, #fff 40px);
}
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:48px; align-items:center; position:relative; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-eyebrow{ color:#CBB776; font-family:var(--font-body); font-size:.85rem; margin-bottom:14px; }
.hero h1{ color:#fff; }
.hero .lede{ color:#C7CEDB; }
.hero-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.hero-card{
  background: var(--navy-900); border:1px solid var(--line-dark); border-radius: var(--radius-md);
  padding:24px; box-shadow: var(--shadow-card);
}
.hero-card dl{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin:0; }
.hero-card dt{ font-size:.72rem; color:#9DAAC0; text-transform:uppercase; letter-spacing:.06em; }
.hero-card dd{ margin:4px 0 0; font-family:var(--font-display); font-size:1.35rem; color:#fff; }
.hero-photo-placeholder{
  aspect-ratio: 4/5; border-radius: var(--radius-md); border:1px dashed rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center; color:#9DAAC0; font-size:.85rem; text-align:center;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 10px, transparent 10px, transparent 20px);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius: var(--radius-sm); font-weight:600; text-decoration:none;
  font-size:.95rem; border:1px solid transparent; cursor:pointer; min-height:44px;
}
.btn-primary{ background: var(--brass-bright); color: var(--navy-950); }
.btn-primary:hover{ background:#D9AE52; }
.btn-outline{ background:transparent; border-color: rgba(255,255,255,.4); color:#fff; }
.btn-outline:hover{ background: rgba(255,255,255,.08); }
.btn-dark{ background: var(--navy-950); color:#fff; }
.btn-dark:hover{ background: var(--navy-800); }
.btn-block{ width:100%; }

/* ---------- Sections ---------- */
.section{ padding: 72px 0; }
.section-alt{ background: var(--parchment-deep); }
.section-navy{ background: var(--navy-950); color: var(--parchment); }
.section-navy h2, .section-navy h3{ color:#fff; }
/* .lede defaults to --ink-soft (#4A4F55), which is ~1.7:1 on navy-950 —
   the exact failure Lighthouse flagged. Reuses the same light blue-grey
   already proven out on the hero's .lede for the same reason. */
.section-navy .lede{ color:#C7CEDB; }
.section-head{ max-width:720px; margin-bottom:40px; }
.eyebrow{ color: var(--brass-deep); font-weight:600; font-size:.85rem; margin-bottom:8px; }

.risk-banner{
  background: var(--alert-bg); border-top:1px solid var(--alert-border); border-bottom:1px solid var(--alert-border);
  color: var(--alert-text); font-size:.85rem; padding:10px 0; text-align:center;
}

/* About / credential grid */
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:start; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
.credential-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.credential-list li{ display:flex; gap:12px; align-items:flex-start; }
.credential-dot{ width:8px;height:8px;border-radius:50%; background:var(--brass-deep); margin-top:9px; flex:none; }

/* Feature triad */
.triad{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:800px){ .triad{ grid-template-columns:1fr; } }
.triad-item{ border-top:3px solid var(--brass-deep); padding-top:18px; }

/* Package ladder */
.package-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:4px; background:#fff; margin-bottom:32px; }
.package-toggle button{
  border:0; background:transparent; padding:9px 18px; border-radius:999px; font-weight:600; cursor:pointer; font-size:.9rem; color: var(--ink-soft);
  min-height:40px;
}
.package-toggle button[aria-pressed="true"]{ background: var(--navy-950); color:#fff; }

.package-ladder{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:56px; }
@media (max-width:900px){ .package-ladder{ grid-template-columns:1fr; } }
.package-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); padding:28px;
  display:flex; flex-direction:column; gap:16px; box-shadow: var(--shadow-card);
}
.package-card.is-featured{ border-color: var(--brass-deep); position:relative; }
.package-card.is-featured::before{
  content:"Most subscribed"; position:absolute; top:-13px; left:24px; background:var(--brass-deep); color:#fff;
  font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:999px;
}
.package-name{ font-family:var(--font-display); font-size:1.3rem; margin:0; }
.package-price{ font-family:var(--font-display); font-size:2.2rem; color:var(--navy-950); }
.package-price small{ font-family:var(--font-body); font-size:.85rem; color:var(--ink-soft); font-weight:400; }
.package-desc{ color:var(--ink-soft); font-size:.92rem; margin:0; }
.package-features{ list-style:none; margin:0; padding:0; display:grid; gap:10px; flex:1; }
.package-features li{ display:flex; gap:10px; font-size:.9rem; align-items:flex-start; }
.check{ color: var(--brass-deep); flex:none; }

/* Segment table cards */
.segment-list{ display:grid; gap:20px; }
.segment-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); padding:24px 28px;
  display:grid; grid-template-columns: 1.3fr 1fr; gap:24px;
}
@media (max-width:800px){ .segment-card{ grid-template-columns:1fr; } }
.segment-meta{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; font-size:.85rem; color:var(--ink-soft); align-content:start; }
.segment-meta dt{ font-weight:600; color:var(--ink); }
.segment-price-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.segment-price-table th, .segment-price-table td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
.segment-price-table th{ color:var(--ink-soft); font-weight:600; }

.fee-cap-note{
  background:#fff; border:1px solid var(--brass-deep); border-left-width:4px; border-radius:var(--radius-sm);
  padding:16px 20px; font-size:.88rem; color:var(--ink-soft); margin: 8px 0 48px;
}

/* Accordions (compliance docs) */
.accordion{ border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; margin-bottom:16px; background:#fff; }
.accordion-trigger{
  width:100%; text-align:left; background:#fff; border:0; padding:20px 24px; font-family:var(--font-display);
  font-size:1.05rem; display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer; color:var(--navy-950);
  min-height:44px;
}
.accordion-trigger:hover{ background: var(--parchment); }
.accordion-icon{ flex:none; transition: transform .2s ease; }
.accordion-trigger[aria-expanded="true"] .accordion-icon{ transform: rotate(45deg); }
.accordion-panel{ padding:0 24px; max-height:0; overflow:hidden; transition: max-height .25s ease; }
.accordion-panel.open{ padding:4px 24px 24px; max-height:none; }
.accordion-panel h3{ font-size:1rem; margin-top:20px; color: var(--navy-950); }
.accordion-panel ol, .accordion-panel ul{ padding-left:1.2em; }
.accordion-panel li{ margin-bottom:.6em; }
.doc-table{ width:100%; border-collapse:collapse; margin:16px 0; font-size:.88rem; }
.doc-table th, .doc-table td{ border:1px solid var(--line); padding:8px 10px; text-align:left; }
.doc-table caption{ text-align:left; font-weight:600; margin-bottom:8px; }
.doc-table tr.is-total td{ font-weight:700; background: var(--parchment-deep); }

/* Complaint data (live, fetched from Apps Script) */
.complaint-tabs{ display:flex; gap:8px; margin:16px 0; flex-wrap:wrap; }
.complaint-tabs button{
  border:1px solid var(--line); background:#fff; padding:8px 16px; border-radius:999px;
  cursor:pointer; font-size:.88rem; min-height:40px; color: var(--ink-soft);
}
.complaint-tabs button[aria-pressed="true"]{ background: var(--navy-950); color:#fff; border-color: var(--navy-950); }
.complaint-status{ font-size:.88rem; color: var(--ink-soft); }
.complaint-panel{ margin-bottom:8px; }
.complaint-panel[hidden]{ display:none; }
.complaint-meta{ font-size:.82rem; color: var(--ink-soft); margin:8px 0 16px; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:600; margin-bottom:6px; font-size:.92rem; }
.field input, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background:#fff;
  min-height:44px;
}
.field textarea{ min-height:120px; resize:vertical; }
.map-placeholder{
  aspect-ratio:16/10; border-radius:var(--radius-md); border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft); background:var(--parchment-deep);
}

/* Fraud alert banner (persistent, dismissible) */
.fraud-banner{
  background: var(--alert-bg); border-bottom:1px solid var(--alert-border); color:var(--alert-text);
}
.fraud-banner .container{ display:flex; align-items:center; gap:14px; padding:10px 24px; font-size:.85rem; }
.fraud-banner button{
  margin-left:auto; background:transparent; border:1px solid var(--alert-border); color:var(--alert-text);
  border-radius: var(--radius-sm); padding:6px 12px; cursor:pointer; flex:none; min-height:36px;
}

/* Modal (compliance popup + fraud alert modal) */
.modal-overlay{
  position:fixed; inset:0; background:rgba(11,27,48,.6); display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:200;
}
.modal-overlay[hidden]{ display:none; }
.modal{
  background:#fff; border-radius: var(--radius-md); max-width:640px; width:100%; max-height:85vh; overflow-y:auto;
  padding:32px; position:relative;
}
.modal h2{ font-size:1.4rem; }
.modal-close{
  position:absolute; top:16px; right:16px; background:transparent; border:1px solid var(--line);
  border-radius:50%; width:36px;height:36px; cursor:pointer; font-size:1.1rem; line-height:1;
}
.lang-tabs{ display:flex; gap:8px; margin-bottom:16px; }
.lang-tabs button{ border:1px solid var(--line); background:#fff; padding:6px 14px; border-radius:999px; cursor:pointer; font-size:.85rem; min-height:36px; }
.lang-tabs button[aria-pressed="true"]{ background:var(--navy-950); color:#fff; border-color:var(--navy-950); }
.lang-panel[hidden]{ display:none; }
.modal-actions{ margin-top:20px; display:flex; justify-content:flex-end; gap:12px; }

/* Footer */
.site-footer{ background: var(--navy-950); color:#B9C3D4; padding:56px 0 24px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h3{ color:#fff; font-size:.95rem; font-family:var(--font-body); font-weight:600; margin-bottom:14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.footer-grid a{ color:#B9C3D4; text-decoration:none; font-size:.9rem; }
.footer-grid a:hover{ color:#fff; }
.footer-access{
  background: var(--navy-900); border:1px solid var(--line-dark); border-radius: var(--radius-md);
  padding:16px 20px; font-size:.85rem; margin-bottom:32px;
}
.footer-legal{ border-top:1px solid var(--line-dark); padding-top:20px; font-size:.8rem; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---------- Accessibility Toolbar ---------- */
.a11y-toggle{
  position:fixed; right:20px; bottom:20px; z-index:150; width:52px;height:52px; border-radius:50%;
  background: var(--navy-950); color:#fff; border:2px solid var(--brass-bright); font-size:1.3rem; cursor:pointer;
}
.a11y-panel{
  position:fixed; right:20px; bottom:82px; z-index:150; width:290px; background:#fff; border:1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding:18px; display:grid; gap:4px;
}
.a11y-panel[hidden]{ display:none; }
.a11y-panel-title{
  font-family: var(--font-display); font-size:1.05rem; color: var(--navy-950);
  margin:0 0 10px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.a11y-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.88rem;
  padding:8px 0; border-bottom:1px solid var(--line);
}
.a11y-row:last-child{ border-bottom:0; }
/* Plain buttons that aren't on/off switches (font size, translate) */
.a11y-row button:not(.switch){
  border:1px solid var(--line); background:var(--parchment); padding:6px 10px; border-radius:var(--radius-sm);
  cursor:pointer; font-size:.85rem; min-height:36px; color: var(--ink);
}
.a11y-row .font-buttons{ display:flex; gap:6px; }

/* On/off toggle switches (contrast, greyscale, readable font, underline,
   pause animations, big cursor) — styled as real sliding switches rather
   than plain text buttons reading "Toggle". */
.switch{
  position:relative; width:44px; height:24px; flex:none; padding:0; cursor:pointer;
  /* #D8D1BE (the ordinary --line color) measured only 1.5:1 against the
     panel's white background — a switch track is a UI component conveying
     state, so it needs 3:1 per WCAG 1.4.11. This gray clears 3.7:1. */
  background: #7D8590; border:1px solid #7D8590; border-radius:999px;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.35); transition: transform .15s ease;
}
.switch[aria-checked="true"]{ background: var(--navy-950); border-color: var(--navy-950); }
.switch[aria-checked="true"]::after{ transform: translateX(20px); }

/* High contrast mode */
body.a11y-contrast{ background:#000; color:#fff; }
body.a11y-contrast .site-header, body.a11y-contrast .site-footer, body.a11y-contrast .hero{ background:#000; color:#fff; }
body.a11y-contrast .package-card, body.a11y-contrast .segment-card, body.a11y-contrast .accordion, body.a11y-contrast .accordion-trigger{
  background:#000; color:#fff; border-color:#fff;
}
body.a11y-contrast a{ color:#FFD866; }
body.a11y-contrast .btn-primary{ background:#FFD866; color:#000; }
/* The accessibility panel is its own small white card, not "site content" —
   body.a11y-contrast's color:#fff was cascading into the panel's row labels,
   which sit on the panel's white background, making them invisible
   (white text on white). Force the panel's own text back to normal
   regardless of contrast mode. */
body.a11y-contrast .a11y-panel,
body.a11y-contrast .a11y-panel *{ color: var(--ink); }
body.a11y-contrast .a11y-panel-title{ color: var(--navy-950); }

/* Greyscale mode — applied to #page-wrap, NOT body/html.
   `filter` on an ancestor creates a new containing block for any
   `position: fixed` (and `absolute`) descendants, so the fixed
   accessibility button and panel would get laid out relative to that
   filtered box instead of the viewport — which is exactly why they were
   dropping to the bottom of the page. #page-wrap holds everything except
   the a11y toggle/panel and the modals, so those stay viewport-fixed no
   matter what filter is applied inside the wrapper. */
#page-wrap.a11y-greyscale{ filter: grayscale(1); }

/* Readable font mode */
body.a11y-readable, body.a11y-readable *{ font-family: Arial, "Helvetica Neue", sans-serif !important; letter-spacing:.01em; }

/* Underline links mode */
body.a11y-underline a{ text-decoration: underline !important; }

/* Big cursor mode */
body.a11y-bigcursor, body.a11y-bigcursor *{ cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"><path d="M4 2l14 8-6 2-2 6z" fill="black" stroke="white" stroke-width="1"/></svg>') 4 4, auto !important; }

/* Paused animations mode */
body.a11y-paused *, body.a11y-paused *::before, body.a11y-paused *::after{
  animation-play-state: paused !important; transition: none !important; scroll-behavior:auto !important;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

/* Font size steps applied to :root via JS (rem-based, cascades everywhere) */