/* =========================================================================
   EarningByAI — Design System
   Navy + electric-cyan editorial technology platform.
   Tokens first, then base/reset, then components, then page-level layout.
   ========================================================================= */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root{
  /* Base: Navy ink — the brand ground */
  --navy-950:#060E17;--navy-900:#0D1B2A;--navy-800:#132538;--navy-700:#1B3349;--navy-600:#26455F;--navy-500:#3A6183;--navy-400:#5E85A6;--navy-300:#8FAAC4;--navy-200:#BFD0DE;--navy-100:#DFE7EE;--navy-050:#F0F4F8;
  /* Base: Paper — warm neutrals for long-form + light surfaces */
  --paper-000:#FFFFFF;--paper-050:#FAF9F6;--paper-100:#F3F1EB;--paper-200:#E6E2D8;--paper-300:#D6D0C2;
  /* Base: Brand ramp, sampled from the logo */
  --brand-cyan-700:#04568F;--brand-cyan-600:#0576C4;--brand-cyan-500:#069CF4;--brand-cyan-400:#3FB6F8;--brand-cyan-100:#CDEBFD;--brand-cyan-050:#E9F5FE;
  --brand-blue-700:#0A2EAB;--brand-blue-600:#0659E7;--brand-blue-500:#3834E1;--brand-blue-050:#E9EEFD;
  --brand-violet-600:#5B23C9;--brand-violet-500:#7935F9;--brand-violet-100:#E4D8FE;
  --brand-ink:#041440;
  --brand-gradient:linear-gradient(100deg,#069CF4,#0659E7 42%,#3834E1 68%,#7935F9);
  /* Amber — reserved for earnings/money emphasis only */
  --amber-700:#8A5A12;--amber-600:#B57A1C;--amber-500:#E0A32E;--amber-400:#F0BC5C;--amber-300:#F7D590;--amber-100:#FBEBC9;--amber-050:#FDF6E7;
  /* Teal — secondary accent: data, verification, automation */
  --teal-700:#0C5A5B;--teal-600:#0F7B7C;--teal-500:#17A2A3;--teal-400:#4FC4C4;--teal-100:#CFEDED;--teal-050:#E9F7F7;
  /* Semantic hues */
  --green-600:#1E7A4D;--green-500:#2E9C66;--green-050:#E8F4EE;
  --red-600:#B03127;--red-500:#D14A3F;--red-050:#FAECEA;
  --blue-600:#2D62B0;--blue-050:#EBF1FB;

  /* Semantic: text */
  --text-primary:var(--navy-900);--text-secondary:var(--navy-600);--text-muted:var(--navy-400);
  --text-inverse:var(--paper-050);--text-inverse-muted:var(--navy-300);
  --text-money:var(--amber-700);
  --text-link:var(--navy-700);--text-link-hover:var(--accent-ink);

  /* Semantic: surface */
  --surface-page:var(--paper-050);--surface-card:var(--paper-000);--surface-sunken:var(--paper-100);
  --surface-inverse:var(--navy-900);--surface-inverse-raised:var(--navy-800);--surface-inverse-sunken:var(--navy-950);
  --surface-money-soft:var(--amber-050);
  --surface-data-soft:var(--teal-050);

  /* Semantic: border */
  --border-hairline:rgba(13,27,42,.10);--border-default:rgba(13,27,42,.16);--border-strong:rgba(13,27,42,.28);
  --border-on-dark:rgba(255,255,255,.12);--border-on-dark-strong:rgba(255,255,255,.22);
  --focus-ring:var(--accent);

  /* Semantic: accent — points at the logo's cyan */
  --accent:var(--brand-cyan-500);--accent-hover:var(--brand-cyan-400);--accent-press:var(--brand-cyan-600);
  --accent-ink:var(--brand-cyan-700);--accent-soft:var(--brand-cyan-050);--accent-border:rgba(6,156,244,.35);
  --accent-on-accent:#04223B;

  /* Semantic: status */
  --status-positive-fg:var(--green-600);--status-positive-bg:var(--green-050);
  --status-negative-fg:var(--red-600);--status-negative-bg:var(--red-050);
  --status-info-fg:var(--blue-600);--status-info-bg:var(--blue-050);
  --status-verified-fg:var(--teal-700);--status-verified-bg:var(--teal-050);

  /* Type families */
  --font-display:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-editorial:"Newsreader",Georgia,"Times New Roman",serif;

  /* Size ramp — 1rem = 16px */
  --text-2xs:.6875rem;--text-xs:.75rem;--text-sm:.8125rem;--text-base:.9375rem;--text-md:1rem;--text-lg:1.125rem;--text-xl:1.3125rem;--text-2xl:1.625rem;--text-3xl:2rem;--text-4xl:2.5rem;--text-5xl:3.25rem;--text-6xl:4.25rem;

  --leading-tight:1.06;--leading-snug:1.2;--leading-heading:1.28;--leading-normal:1.5;--leading-relaxed:1.65;--leading-loose:1.8;

  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;

  --tracking-tighter:-.03em;--tracking-tight:-.018em;--tracking-normal:0;--tracking-wide:.02em;--tracking-eyebrow:.14em;--tracking-mono:.01em;

  --type-display:var(--weight-bold) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-bold) var(--text-4xl)/var(--leading-snug) var(--font-display);
  --type-h2:var(--weight-semibold) var(--text-3xl)/var(--leading-heading) var(--font-display);
  --type-h3:var(--weight-semibold) var(--text-xl)/var(--leading-heading) var(--font-display);
  --type-h4:var(--weight-semibold) var(--text-lg)/var(--leading-heading) var(--font-sans);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans);
  --type-body-lg:var(--weight-regular) var(--text-lg)/var(--leading-relaxed) var(--font-sans);
  --type-small:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-label:var(--weight-semibold) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-mono:var(--weight-medium) var(--text-xs)/var(--leading-normal) var(--font-mono);
  --type-article:var(--weight-regular) var(--text-lg)/var(--leading-loose) var(--font-editorial);
  --type-eyebrow:var(--weight-semibold) var(--text-2xs)/1 var(--font-mono);

  /* 4px base scale */
  --space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;--space-11:80px;--space-12:96px;--space-13:128px;--space-14:160px;
  --section-y:var(--space-12);--section-y-tight:var(--space-10);--section-y-mobile:var(--space-10);
  --radius-xs:3px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-pill:999px;
  --stroke-hairline:1px;--stroke-medium:1.5px;--stroke-heavy:2px;
  --container-max:1200px;--container-narrow:760px;--container-wide:1400px;--gutter:24px;--gutter-mobile:16px;
  --grid-gap:24px;
  --control-h-sm:32px;--control-h-md:40px;--control-h-lg:48px;
  --tap-min:44px;

  --shadow-0:none;
  --shadow-1:0 1px 2px rgba(13,27,42,.06);
  --shadow-2:0 1px 2px rgba(13,27,42,.05),0 4px 10px rgba(13,27,42,.06);
  --shadow-3:0 2px 4px rgba(13,27,42,.05),0 10px 24px rgba(13,27,42,.08);
  --shadow-4:0 4px 8px rgba(13,27,42,.06),0 20px 48px rgba(13,27,42,.12);
  --shadow-hover:0 4px 10px rgba(13,27,42,.07),0 18px 40px rgba(13,27,42,.13);
  --shadow-accent:0 8px 24px rgba(6,156,244,.34);
  --shadow-money:0 8px 24px rgba(224,163,46,.28);
  --shadow-on-dark-1:0 1px 0 rgba(255,255,255,.06) inset,0 8px 24px rgba(0,0,0,.35);
  --shadow-on-dark-2:0 1px 0 rgba(255,255,255,.08) inset,0 18px 48px rgba(0,0,0,.45);
  --glass-bg:rgba(255,255,255,.06);
  --glass-bg-strong:rgba(255,255,255,.10);
  --glass-border:1px solid rgba(255,255,255,.14);
  --glass-blur:blur(14px) saturate(140%);
  --glass-shadow:0 20px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.12);

  --duration-instant:80ms;--duration-fast:140ms;--duration-base:220ms;--duration-slow:360ms;--duration-slower:600ms;
  --ease-standard:cubic-bezier(.2,.6,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-inout:cubic-bezier(.65,0,.35,1);
  --lift-hover:translateY(-3px);--press-scale:scale(.985);

  --grid-line:rgba(13,27,42,.055);
  --grid-line-on-dark:rgba(143,170,196,.10);
  --grid-size:32px;
  --bg-grid:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  --bg-grid-on-dark:linear-gradient(var(--grid-line-on-dark) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line-on-dark) 1px,transparent 1px);
  --bg-blueprint:linear-gradient(rgba(143,170,196,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(143,170,196,.16) 1px,transparent 1px),linear-gradient(rgba(143,170,196,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(143,170,196,.07) 1px,transparent 1px);
  --bg-blueprint-size:96px 96px,96px 96px,16px 16px,16px 16px;
  --bg-dot:radial-gradient(circle,rgba(13,27,42,.12) 1px,transparent 1px);
  --bg-dot-size:20px 20px;
  --bg-mesh-dark:radial-gradient(70% 90% at 18% 0%,rgba(6,156,244,.18),transparent 60%),radial-gradient(60% 80% at 92% 12%,rgba(121,53,249,.16),transparent 62%);
  --bg-mesh-light:radial-gradient(60% 80% at 12% 0%,rgba(6,156,244,.09),transparent 60%),radial-gradient(50% 70% at 95% 8%,rgba(121,53,249,.10),transparent 62%);
  --scrim-dark:linear-gradient(to top,rgba(4,20,64,.94),rgba(4,20,64,0));
  --scrim-hero:linear-gradient(105deg,rgba(4,20,64,.96) 0%,rgba(4,20,64,.86) 42%,rgba(6,14,23,.55) 100%);
}

@keyframes eba-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes eba-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------------------------------
   2. RESET + BASE
   --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.eba{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display)}
p{margin:0 0 1em}
a{color:var(--text-link);text-decoration-color:var(--border-strong)}
a:hover{color:var(--accent-ink)}
img{display:block;max-width:100%}
ul,ol{padding-left:1.2em}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.eba-skip-link{position:absolute;left:-9999px;top:0;background:var(--navy-900);color:#fff;padding:12px 18px;z-index:999;border-radius:0 0 8px 0}
.eba-skip-link:focus{left:0}
button{font-family:inherit}

.container{max-width:var(--container-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.container-wide{max-width:var(--container-wide);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.eba-section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.eba-section--tight{padding-top:var(--section-y-tight);padding-bottom:var(--section-y-tight)}
.eba-section--0{padding-top:0;padding-bottom:0}

.eba-grid{display:grid;gap:var(--space-5)}
.eba-grid-2{grid-template-columns:repeat(2,1fr)}
.eba-grid-3{grid-template-columns:repeat(3,1fr)}
.eba-grid-4{grid-template-columns:repeat(4,1fr)}
.eba-grid-5{grid-template-columns:repeat(5,1fr)}
.eba-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:center}
.eba-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-9);align-items:center}
.eba-sidebar-grid{display:grid;grid-template-columns:240px 1fr;gap:var(--space-8)}
.eba-aside-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-9);align-items:start}
.eba-stats{display:flex;gap:var(--space-9);flex-wrap:wrap}
.eba-only-mobile{display:none!important}

@media (max-width:1080px){
  .eba-grid-5{grid-template-columns:repeat(3,1fr)}
  .eba-grid-4{grid-template-columns:repeat(2,1fr)}
  .eba-aside-grid{grid-template-columns:1fr}
  .eba-aside-grid>aside{position:static!important;top:auto!important}
}
@media (max-width:900px){
  .eba-grid-3{grid-template-columns:repeat(2,1fr)}
  .eba-hero-grid,.eba-split{grid-template-columns:1fr;gap:var(--space-7)}
  .eba-sidebar-grid{grid-template-columns:1fr}
  .eba-sidebar-grid>aside{position:static!important;top:auto!important}
  .eba-only-desktop{display:none!important}
  .eba-only-mobile{display:block!important}
}
@media (max-width:640px){
  .eba-grid-5,.eba-grid-4,.eba-grid-3,.eba-grid-2{grid-template-columns:1fr}
  .eba-stats{gap:var(--space-6)}
  :root{--gutter:var(--gutter-mobile)}
  .eba-section{padding-top:var(--section-y-mobile);padding-bottom:var(--section-y-mobile)}
}

/* ---------------------------------------------------------------------
   3. BACKDROP FIELDS (section grounds)
   --------------------------------------------------------------------- */
/* Decorative layers (img/scrim/pattern/mesh) sit on an explicit z-index:0,
   and every actual direct child (whatever tag/class it uses — div, section,
   anything) is pinned to z-index:1. This used to rely on those decorative
   layers happening to be earlier in DOM order than the content wrapper, and
   on the wrapper matching one of a few hard-coded selectors (.container,
   .eba-hero-grid, or a bare div) to earn position:relative — a template
   using e.g. <section class="eba-section"> as the direct child silently
   fell outside that rule, stayed position:static, and got painted *behind*
   the backdrop image instead of in front of it. Explicit stacking removes
   that trap entirely. */
.eba-backdrop{position:relative;overflow:hidden}
.eba-backdrop__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.eba-backdrop__scrim{position:absolute;inset:0;pointer-events:none;background:var(--scrim-hero);z-index:0}
.eba-backdrop__pattern{position:absolute;inset:0;pointer-events:none;z-index:0}
.eba-backdrop__mesh{position:absolute;inset:0;pointer-events:none;z-index:0}
.eba-backdrop>:not(.eba-backdrop__img):not(.eba-backdrop__scrim):not(.eba-backdrop__pattern):not(.eba-backdrop__mesh){position:relative;z-index:1}
.eba-backdrop--grid-dark{background:var(--navy-900)}
.eba-backdrop--grid-dark .eba-backdrop__pattern{background-image:var(--bg-grid-on-dark);background-size:var(--grid-size) var(--grid-size);mask-image:radial-gradient(120% 100% at 50% 0%,#000 35%,transparent 100%)}
.eba-backdrop--grid-dark .eba-backdrop__mesh{background-image:var(--bg-mesh-dark)}
.eba-backdrop--dot-light{background:var(--surface-page)}
.eba-backdrop--dot-light .eba-backdrop__pattern{background-image:var(--bg-dot);background-size:var(--bg-dot-size)}
.eba-backdrop--dot-light .eba-backdrop__mesh{background-image:var(--bg-mesh-light)}
.eba-backdrop--blueprint{background:var(--accent-on-accent)}
.eba-backdrop--blueprint .eba-backdrop__pattern{background-image:var(--bg-blueprint);background-size:var(--bg-blueprint-size)}

/* ---------------------------------------------------------------------
   4. TYPE HELPERS
   --------------------------------------------------------------------- */
.eba-eyebrow{display:inline-flex;align-items:center;gap:10px;font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--accent-ink)}
.eba-eyebrow::before{content:"";width:18px;height:1px;background:currentColor;opacity:.6}
.eba-eyebrow--dark{color:var(--accent-hover)}
.eba-eyebrow--muted{color:var(--navy-400)}
.eba-h1{margin:0;font:var(--type-h1);letter-spacing:var(--tracking-tighter);color:var(--text-primary)}
.eba-h1--inverse{color:var(--text-inverse)}
.eba-display{margin:0;font:var(--type-display);letter-spacing:var(--tracking-tighter)}
.eba-lede{margin:0;font:var(--type-body-lg);color:var(--text-secondary)}
.eba-lede--inverse{color:var(--text-inverse-muted)}
.eba-mono{font:var(--type-mono);letter-spacing:var(--tracking-mono)}
.eba-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.eba-section-heading__text{display:flex;flex-direction:column;gap:10px;max-width:640px}
.eba-section-heading h2{font:var(--type-h2);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.eba-section-heading--dark h2{color:var(--text-inverse)}
.eba-section-heading p{margin:0;font:var(--type-body);color:var(--text-secondary)}
.eba-section-heading--dark p{color:var(--text-inverse-muted)}

/* ---------------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------------- */
.eba-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h-md);padding:0 18px;box-sizing:border-box;font:var(--weight-semibold) var(--text-base)/1 var(--font-sans);letter-spacing:var(--tracking-tight);border-radius:var(--radius-md);border:var(--stroke-hairline) solid transparent;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-instant) var(--ease-standard);}
.eba-btn:active{transform:var(--press-scale)}
.eba-btn svg{width:16px;height:16px;flex:0 0 auto}
.eba-btn--sm{height:var(--control-h-sm);padding:0 12px;font-size:var(--text-sm);border-radius:var(--radius-sm);gap:6px}
.eba-btn--lg{height:var(--control-h-lg);padding:0 24px;font-size:var(--text-md);gap:10px}
.eba-btn--full{display:flex;width:100%}
.eba-btn--primary{background:var(--accent);color:var(--accent-on-accent)}
.eba-btn--primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-accent);color:var(--accent-on-accent)}
.eba-btn--secondary{background:var(--navy-900);color:var(--paper-050)}
.eba-btn--secondary:hover{background:var(--navy-800);box-shadow:var(--shadow-2);color:var(--paper-050)}
.eba-btn--outline{background:transparent;color:var(--navy-900);border-color:var(--border-strong)}
.eba-btn--outline:hover{background:var(--paper-100);color:var(--navy-900)}
.eba-btn--ghost{background:transparent;color:var(--navy-700)}
.eba-btn--ghost:hover{background:var(--paper-100);color:var(--navy-700)}
.eba-btn--outline-dark{background:rgba(255,255,255,.06);color:var(--paper-050);border-color:var(--border-on-dark-strong)}
.eba-btn--outline-dark:hover{background:rgba(255,255,255,.12);color:var(--paper-050)}
.eba-btn--ghost-dark{background:transparent;color:var(--navy-200)}
.eba-btn--ghost-dark:hover{background:rgba(255,255,255,.08);color:var(--navy-200)}
.eba-icon-btn{width:var(--control-h-md);height:var(--control-h-md);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);cursor:pointer;background:var(--surface-card);border:var(--stroke-hairline) solid var(--border-default);color:var(--navy-800)}
.eba-icon-btn:hover{background:var(--paper-100)}
.eba-icon-btn--dark{background:rgba(255,255,255,.07);border-color:var(--border-on-dark);color:var(--paper-050)}
.eba-icon-btn--dark:hover{background:rgba(255,255,255,.14)}
.eba-icon-btn--active{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}

/* ---------------------------------------------------------------------
   6. BADGES
   --------------------------------------------------------------------- */
.eba-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font:var(--weight-semibold) var(--text-xs)/1.35 var(--font-sans);letter-spacing:var(--tracking-wide);border-radius:var(--radius-pill);white-space:nowrap;border:var(--stroke-hairline) solid transparent}
.eba-badge--sm{padding:2px 7px;font-size:var(--text-2xs)}
.eba-badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.eba-badge--neutral{color:var(--navy-600);background:var(--paper-100);border-color:var(--border-hairline)}
.eba-badge--accent{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-border)}
.eba-badge--positive{color:var(--status-positive-fg);background:var(--status-positive-bg);border-color:rgba(30,122,77,.22)}
.eba-badge--negative{color:var(--status-negative-fg);background:var(--status-negative-bg);border-color:rgba(176,49,39,.22)}
.eba-badge--verified{color:var(--status-verified-fg);background:var(--status-verified-bg);border-color:rgba(12,90,91,.2)}
.eba-badge--dark{color:var(--paper-050);background:rgba(255,255,255,.1);border-color:var(--border-on-dark-strong)}

/* ---------------------------------------------------------------------
   7. CARDS
   --------------------------------------------------------------------- */
.eba-card{border-radius:var(--radius-lg);padding:var(--space-6);box-sizing:border-box;background:var(--surface-card);border:var(--stroke-hairline) solid var(--border-hairline);box-shadow:var(--shadow-2);color:var(--text-primary);transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-standard),border-color var(--duration-fast) linear}
.eba-card--flat{border-color:var(--border-default);box-shadow:none}
.eba-card--sunken{background:var(--surface-sunken);box-shadow:none}
.eba-card--dark{background:var(--surface-inverse-raised);border-color:var(--border-on-dark);box-shadow:var(--shadow-on-dark-1);color:var(--text-inverse)}
.eba-card--glass{background:var(--glass-bg);border:var(--glass-border);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);color:var(--text-inverse)}
.eba-card--pad-sm{padding:var(--space-5)}
.eba-card--interactive:hover{transform:var(--lift-hover);box-shadow:var(--shadow-hover)}
.eba-card--winner{border-color:var(--accent);box-shadow:var(--shadow-3)}

/* ---------------------------------------------------------------------
   7b. WP ADMIN BAR — logged-in-only overflow guard
   When enough admin-bar plugins are active (Site Kit, Rank Math, Hostinger,
   etc.) their combined width can exceed the viewport, which pushes the
   right-floated account menu ("Howdy, ...") onto a second line. Because
   #wpadminbar is position:fixed with a very high z-index, that wrapped
   second line then renders on top of our own sticky header instead of
   inside the 32px admin bar. Scrolling the bar horizontally instead of
   wrapping keeps it a clean single row so it never collides with our
   header. Purely cosmetic for logged-in staff — visitors never see the
   admin bar at all.
   --------------------------------------------------------------------- */
@media screen and (min-width:783px){
	#wpadminbar{overflow-x:auto;overflow-y:hidden}
	#wpadminbar #wp-toolbar{display:flex;flex-wrap:nowrap;align-items:stretch;min-width:-webkit-max-content;min-width:max-content}
	#wpadminbar #wp-admin-bar-root-default,#wpadminbar #wp-admin-bar-top-secondary{float:none;flex:0 0 auto;white-space:nowrap}
	#wpadminbar #wp-admin-bar-top-secondary{margin-left:auto}
}

/* ---------------------------------------------------------------------
   8. HEADER
   --------------------------------------------------------------------- */
.eba-header{position:sticky;top:0;z-index:100;background:rgba(4,20,64,.86);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid rgba(6,156,244,.22);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 10px 30px rgba(4,20,64,.35)}
.eba-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand-gradient);opacity:.85}
/* 1560px is a dedicated width for the header only — not the shared
   --container-wide token, which .container-wide also uses elsewhere on the
   page. Measured budget: logo (~178px) + actions (~151px) + two 24px gaps
   between the three flex children + 48px of bar padding + the full-label
   nav at its widest (~1019px) = ~1444px; 1560px keeps a safety margin
   above that so the full-label row never wraps even with minor font
   rendering differences across browsers/OSes. */
.eba-header__bar{position:relative;max-width:1560px;margin:0 auto;padding:0 var(--gutter);min-height:68px;display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.eba-logo{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.eba-logo img{height:28px;width:auto;display:block}
.eba-logo__stack{display:flex;flex-direction:column;gap:3px;line-height:1;white-space:nowrap}
.eba-logo__wordmark{font:var(--weight-extrabold) 1.375rem/1 var(--font-display);letter-spacing:var(--tracking-tight);color:#fff}
.eba-logo__by{color:var(--navy-200)}
.eba-logo__ai{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.eba-logo__tagline{font:var(--type-mono);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--navy-400)}
.eba-nav{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.eba-nav__item{position:relative}
.eba-nav__link{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 9px;cursor:pointer;background:transparent;border:none;border-radius:var(--radius-sm);font:var(--weight-medium) var(--text-base)/1 var(--font-sans);color:var(--navy-200);text-decoration:none;white-space:nowrap;transition:color var(--duration-fast) linear}
.eba-nav__label-full{display:none}
.eba-nav__label-short{display:inline}
@media (min-width:1460px){
  .eba-nav__link{padding:0 12px}
  .eba-nav__label-full{display:inline}
  .eba-nav__label-short{display:none}
}
.eba-nav__link:hover,.eba-nav__item.current-menu-item>.eba-nav__link,.eba-nav__item.current_page_item>.eba-nav__link{color:var(--accent-hover)}
.eba-nav__item svg{width:14px;height:14px}
.eba-nav__submenu{position:absolute;top:100%;left:0;margin-top:10px;min-width:220px;padding:8px;z-index:50;background:var(--navy-800);border:1px solid var(--border-on-dark);border-radius:var(--radius-md);box-shadow:var(--shadow-on-dark-2);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
.eba-nav__item:hover>.eba-nav__submenu,.eba-nav__item:focus-within>.eba-nav__submenu{opacity:1;visibility:visible;transform:none}
.eba-nav__submenu li{list-style:none;margin:0}
.eba-nav__submenu a{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:var(--radius-sm);font:var(--type-body);color:var(--navy-100);text-decoration:none}
.eba-nav__submenu a:hover{background:rgba(255,255,255,.06)}
.eba-header__actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.eba-header__search-panel{padding:0 var(--gutter) var(--space-4);max-width:var(--container-max);margin:0 auto;display:none}
.eba-header__search-panel.is-open{display:block;animation:eba-rise var(--duration-fast) var(--ease-out) both}
.eba-header__search-form{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);border:1px solid var(--border-on-dark-strong)}
.eba-header__search-form input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:var(--type-body);color:var(--text-inverse)}
.eba-header__search-form svg{color:var(--navy-300);width:17px;height:17px;flex:0 0 auto}
/* Menu-toggle icon swap: both the hamburger and the close glyph are always
   in the DOM (icons are plain inline SVG, not a font where a single
   character can be swapped), so the closed/open state has to hide one and
   show the other. Driven off the button's own aria-expanded attribute —
   already kept correct by main.js for accessibility — rather than adding
   a second, separate JS-toggled class that could drift out of sync with it. */
/* !important: eba_icon() sets display:inline-block as an inline style on
   every icon's <svg> (so a bare icon works standalone with no stylesheet
   present); that inline style otherwise beats any plain stylesheet rule
   here, no matter the selector's specificity. */
.eba-menu-icon-close{display:none!important}
[data-eba-menu-toggle][aria-expanded="true"] .eba-menu-icon-open{display:none!important}
[data-eba-menu-toggle][aria-expanded="true"] .eba-menu-icon-close{display:inline-block!important}

.eba-mobile-nav{display:none;border-top:1px solid var(--border-on-dark);padding:var(--space-3) var(--gutter) var(--space-6);max-height:72vh;overflow-y:auto}
.eba-mobile-nav.is-open{display:block}
.eba-mobile-nav li{list-style:none;margin:0}
.eba-mobile-nav a{display:flex;align-items:center;width:100%;min-height:var(--tap-min);padding:10px 0;text-align:left;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.07);font:var(--weight-medium) var(--text-lg)/1 var(--font-sans);color:var(--navy-100);text-decoration:none}
.eba-mobile-nav a:hover{color:var(--brand-cyan-400)}
.eba-mobile-nav .eba-btn{margin-top:var(--space-5)}
@media (max-width:900px){
  .eba-only-desktop{display:none!important}
  .eba-only-mobile{display:inline-flex!important}
}
/* The header switches to the hamburger menu earlier than the 900px used
   elsewhere in the theme (scoped to .eba-header so it doesn't touch e.g.
   the hero's decorative visual, which still hides at the usual 900px):
   ten primary-nav items (even at their short labels) plus the logo and
   header actions measure out to ~1300px of required width, so anything
   narrower than that has to hand off to the mobile nav instead of letting
   the desktop nav wrap onto its own line. 1329px keeps a small buffer
   above the ~1297px measured minimum. */
@media (max-width:1329px){
  .eba-header .eba-only-desktop{display:none!important}
  .eba-header .eba-only-mobile{display:inline-flex!important}
}

/* ---------------------------------------------------------------------
   9. FOOTER
   --------------------------------------------------------------------- */
.eba-footer{position:relative;background:var(--accent-on-accent);color:var(--navy-200);overflow:hidden}
.eba-footer__bg{position:absolute;inset:0;background-image:var(--bg-grid-on-dark);background-size:var(--grid-size) var(--grid-size);opacity:.5;pointer-events:none}
.eba-footer__inner{position:relative;max-width:var(--container-max);margin:0 auto;padding:var(--space-10) var(--gutter) var(--space-7)}
.eba-footer-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-8)}
/* These breakpoints used to live up in section 2 alongside the other
   responsive grid overrides, ahead of this base rule in the file — with
   matching specificity, the base rule (later in source) silently won at
   every viewport, so the footer never actually collapsed to fewer columns
   on tablet/mobile and the link text overflowed its column. Keeping a
   component's responsive overrides after its own base rule avoids that. */
@media (max-width:900px){ .eba-footer-cols{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .eba-footer-cols{grid-template-columns:1fr} }
.eba-footer-brand{display:flex;flex-direction:column;gap:var(--space-4)}
.eba-footer-brand p{margin:0;font:var(--type-small);color:var(--navy-400);max-width:300px}
.eba-footer-brand__email{display:inline-flex;align-items:center;gap:8px;font:var(--type-body);color:var(--brand-cyan-400);text-decoration:none}
.eba-footer-social{display:flex;gap:8px}
.eba-footer-social a{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-sm);background:rgba(255,255,255,.05);border:1px solid var(--border-on-dark);color:var(--navy-300)}
.eba-footer-col{display:flex;flex-direction:column;gap:var(--space-3)}
.eba-footer-col__title{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--accent-hover)}
/* wp_nav_menu() is called with items_wrap:'%3$s' here, i.e. no <ul> — just
   bare <li class="menu-item"> elements dropped straight into the flex
   column so each link is its own flex row. A <li> with no <ul>/<ol> parent
   still gets the browser's default list-item bullet + inset, so it has to
   be reset explicitly rather than relying on the (missing) parent list. */
.eba-footer-col li{list-style:none;margin:0;padding:0}
.eba-footer-col a{font:var(--type-small);color:var(--navy-300);text-decoration:none}
.eba-footer-col a:hover{color:#fff}
.eba-footer-bottom{margin-top:var(--space-9);padding-top:var(--space-5);border-top:1px solid var(--border-on-dark);display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.eba-footer-cookie-btn{background:none;border:none;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* Cookie consent banner */
.eba-cookie-banner{position:fixed;left:var(--space-5);right:var(--space-5);bottom:var(--space-5);z-index:200;max-width:560px;margin:0 auto;border-radius:var(--radius-lg);background:var(--navy-900);border:1px solid var(--border-on-dark-strong);box-shadow:var(--shadow-on-dark-2);color:var(--text-inverse)}
.eba-cookie-banner[hidden]{display:none}
.eba-cookie-banner__inner{padding:var(--space-6)}
.eba-cookie-banner__main p,.eba-cookie-banner__customize>p{margin:0 0 var(--space-4);font:var(--type-small);color:var(--navy-200)}
.eba-cookie-banner__main a{color:var(--brand-cyan-400)}
.eba-cookie-banner__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--space-4)}
.eba-cookie-banner__customize[hidden]{display:none}
.eba-cookie-toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:10px 0;border-bottom:1px solid var(--border-on-dark)}
.eba-cookie-toggle:last-of-type{border-bottom:none}
.eba-cookie-toggle span{display:flex;flex-direction:column;gap:2px}
.eba-cookie-toggle strong{font:var(--weight-semibold) var(--text-sm)/1.2 var(--font-sans);color:#fff}
.eba-cookie-toggle small{font:var(--type-small);color:var(--navy-300)}
.eba-cookie-toggle input{width:18px;height:18px;accent-color:var(--accent);flex:0 0 auto}
@media (max-width:600px){
  .eba-cookie-banner{left:var(--space-3);right:var(--space-3);bottom:var(--space-3)}
  .eba-cookie-banner__inner{padding:var(--space-5)}
  .eba-cookie-banner__actions{flex-direction:column}
  .eba-cookie-banner__actions .eba-btn{width:100%}
}
.eba-footer-bottom span{font:var(--type-small);color:var(--navy-400);max-width:560px}
.eba-footer-bottom .eba-mono{color:var(--navy-500)}

/* ---------------------------------------------------------------------
   10. HERO / VISUAL DIAGRAMS
   --------------------------------------------------------------------- */
.eba-hero-visual{position:relative;min-height:380px}
.eba-hero-visual__center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:168px;height:168px;border-radius:50%;background:var(--glass-bg-strong);border:var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;color:#fff;box-shadow:var(--glass-shadow);z-index:2}
.eba-hero-visual__center .eba-value{font:var(--weight-bold) var(--text-3xl)/1 var(--font-display);color:var(--brand-cyan-400)}
.eba-hero-visual__center .eba-label{font:var(--type-mono);color:var(--navy-300)}
.eba-hero-visual__card{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius-lg);background:var(--glass-bg-strong);border:var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);color:#fff;animation:eba-float 9s ease-in-out infinite}
.eba-hero-visual__card .eba-icon-chip{width:34px;height:34px;border-radius:var(--radius-sm);background:rgba(255,255,255,.1);display:grid;place-items:center;color:var(--brand-cyan-400);flex:0 0 auto}
.eba-hero-visual__card .eba-t{font:var(--weight-semibold) var(--text-sm)/1.2 var(--font-sans)}
.eba-hero-visual__card .eba-d{font:var(--text-xs)/1.2 var(--font-sans);color:var(--navy-300)}
@media (max-width:900px){ .eba-hero-visual{min-height:300px} .eba-hero-visual__card{padding:9px 12px} }

.eba-workflow{display:flex;flex-wrap:wrap;gap:0}
.eba-workflow__step{flex:1 1 140px;display:flex;flex-direction:column;gap:8px;padding:14px;position:relative}
.eba-workflow__step:not(:last-child)::after{content:"";position:absolute;top:28px;right:-6px;width:24px;height:1px;background:var(--border-default)}
.eba-workflow__icon{width:38px;height:38px;border-radius:var(--radius-md);background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center}
.eba-workflow--dark .eba-workflow__icon{background:rgba(255,255,255,.08);color:var(--brand-cyan-400)}
.eba-workflow__label{font:var(--type-h4);font-size:var(--text-base)}
.eba-workflow--dark .eba-workflow__label{color:#fff}
.eba-workflow__detail{font:var(--type-small);color:var(--text-muted)}
.eba-workflow--dark .eba-workflow__detail{color:var(--navy-300)}
.eba-workflow__step.is-active .eba-workflow__icon{background:var(--accent);color:var(--accent-on-accent)}
@media (max-width:640px){ .eba-workflow{flex-direction:column} .eba-workflow__step:not(:last-child)::after{display:none} }

.eba-topic-chips{display:flex;flex-wrap:wrap;gap:10px}
.eba-topic-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border-radius:var(--radius-pill);background:var(--surface-card);border:1px solid var(--border-hairline);color:var(--text-secondary);font:var(--weight-medium) var(--text-base)/1 var(--font-sans)}
.eba-topic-chip svg{color:var(--accent);width:15px;height:15px}
.eba-topic-chips--dark .eba-topic-chip{background:rgba(255,255,255,.07);border-color:var(--border-on-dark);color:var(--navy-100)}
.eba-topic-chips--dark .eba-topic-chip svg{color:var(--brand-cyan-400)}
.eba-topic-chip--money svg{color:var(--amber-600)}

/* ---------------------------------------------------------------------
   11. STAT COUNTER / DATAVIZ
   --------------------------------------------------------------------- */
.eba-stat{display:flex;flex-direction:column;gap:2px}
.eba-stat .eba-value{font:var(--weight-bold) var(--text-3xl)/1 var(--font-display);color:var(--text-primary)}
.eba-stat--dark .eba-value{color:#fff}
.eba-stat .eba-label{font:var(--type-mono);color:var(--text-muted)}
.eba-stat--dark .eba-label{color:var(--navy-300)}

.eba-dataviz{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);border-radius:var(--radius-lg);box-sizing:border-box;background:var(--surface-card);border:1px solid var(--border-hairline);box-shadow:var(--shadow-1)}
.eba-dataviz--dark{background:var(--glass-bg);border:var(--glass-border);backdrop-filter:var(--glass-blur);box-shadow:none;color:#fff}
.eba-dataviz__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.eba-dataviz__label{font:var(--type-small);color:var(--text-muted)}
.eba-dataviz--dark .eba-dataviz__label{color:var(--navy-300)}
.eba-dataviz__value{font:var(--weight-bold) var(--text-2xl)/1 var(--font-display)}
.eba-dataviz__delta{font:var(--type-mono);color:var(--green-600)}
.eba-dataviz__chart{display:flex;align-items:flex-end;gap:4px;height:70px}
.eba-dataviz__bar{flex:1;border-radius:3px 3px 0 0;background:var(--accent)}

/* ---------------------------------------------------------------------
   12. SCORE BAR
   --------------------------------------------------------------------- */
.eba-scorebar{display:flex;flex-direction:column;gap:6px}
.eba-scorebar__head{display:flex;justify-content:space-between;font:var(--type-small);color:var(--text-secondary)}
.eba-scorebar__head b{font:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);color:var(--text-primary)}
.eba-scorebar__track{height:6px;border-radius:99px;background:var(--paper-200);overflow:hidden}
.eba-scorebar__fill{height:100%;border-radius:99px;background:var(--accent)}

/* ---------------------------------------------------------------------
   13. FORM CONTROLS
   --------------------------------------------------------------------- */
.eba-search-field{display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);border:1px solid var(--border-on-dark-strong)}
.eba-search-field input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:var(--type-body-lg);color:#fff}
.eba-search-field input::placeholder{color:var(--navy-300)}
.eba-search-field svg{color:var(--navy-300);flex:0 0 auto}
.eba-search-field--light{background:var(--surface-card);border-color:var(--border-default)}
.eba-search-field--light input{color:var(--text-primary)}
.eba-search-field--light input::placeholder{color:var(--text-muted)}
.eba-search-field--light svg{color:var(--text-muted)}

.eba-field{display:flex;flex-direction:column;gap:7px}
.eba-field label,.eba-field__label{font:var(--type-label);color:var(--text-primary);display:flex;justify-content:space-between}
.eba-field__label .val{font:var(--type-mono);color:var(--accent-ink)}
.eba-input,.eba-select{height:var(--control-h-md);padding:0 14px;border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--surface-card);font:var(--type-body);color:var(--text-primary);width:100%}
.eba-input:focus,.eba-select:focus{border-color:var(--accent)}
.eba-checkbox{display:inline-flex;align-items:center;gap:8px;font:var(--type-body);color:var(--text-secondary);cursor:pointer}
.eba-range{width:100%;height:var(--tap-min);accent-color:var(--accent);cursor:pointer}
.eba-textarea{padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--surface-card);font:var(--type-body);color:var(--text-primary);width:100%;resize:vertical;min-height:180px;box-sizing:border-box}
.eba-textarea:focus{border-color:var(--accent);outline:none}
.eba-generator-output{display:flex;flex-direction:column;gap:10px}
.eba-generator-output[hidden]{display:none}
.eba-generator-output__item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--radius-md);background:var(--surface-sunken);border:1px solid var(--border-hairline);font:var(--type-body);color:var(--text-primary)}
.eba-generator-output__item p{margin:0;flex:1;white-space:pre-line}
.eba-generator-output__copy{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--surface-card);font:var(--weight-medium) var(--text-sm)/1 var(--font-sans);color:var(--text-secondary);cursor:pointer}
.eba-generator-output__copy:hover{border-color:var(--accent);color:var(--accent-ink)}
.eba-generator-output__copy.is-copied{border-color:var(--positive,#1a9c6b);color:var(--positive,#1a9c6b)}
.eba-filter-chips{display:flex;flex-wrap:wrap;gap:8px}
.eba-filter-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-secondary);font:var(--weight-medium) var(--text-sm)/1 var(--font-sans);cursor:pointer}
.eba-filter-chip.is-active{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent-ink)}
.eba-filter-chip .eba-count{color:var(--text-muted);font:var(--type-mono)}

/* ---------------------------------------------------------------------
   14. DIRECTORY / CONTENT CARDS
   --------------------------------------------------------------------- */
/* Category card */
.eba-cat-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);border-radius:var(--radius-lg);text-decoration:none;background:var(--surface-card);border:1px solid var(--border-hairline);box-shadow:var(--shadow-1);transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-standard)}
.eba-cat-card:hover{transform:var(--lift-hover);box-shadow:var(--shadow-hover)}
.eba-cat-card__icon{position:relative;width:46px;height:46px;display:grid;place-items:center;border-radius:var(--radius-md);color:var(--accent-cat,var(--accent));background:color-mix(in oklab,var(--accent-cat,var(--accent)) 14%,white);border:1px solid color-mix(in oklab,var(--accent-cat,var(--accent)) 30%,white)}
.eba-cat-card__name{font:var(--type-h4);color:var(--text-primary)}
.eba-cat-card__desc{margin:0;font:var(--type-small);color:var(--text-secondary)}

/* Tool card */
.eba-tool-card{display:flex;flex-direction:column;gap:var(--space-4);position:relative;overflow:hidden}
.eba-tool-card__head{display:flex;align-items:flex-start;gap:var(--space-3)}
.eba-tool-card__icon{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:var(--radius-md);color:var(--accent-tool,var(--accent));background:color-mix(in oklab,var(--accent-tool,var(--accent)) 14%,white);border:1px solid color-mix(in oklab,var(--accent-tool,var(--accent)) 28%,white)}
.eba-tool-card__meta{min-width:0;flex:1}
/* min-width:0 on the row + name lets a long tool name truncate with an
   ellipsis instead of overflowing past the row's own box — without it, a
   name a little wider than the column (e.g. "ElevenLabs" next to a
   verified-tick icon) pushes that icon out past the row and it visually
   lands on top of the score number in the next column over, since flexbox
   doesn't clip overflowing content by default. */
.eba-tool-card__name-row{display:flex;align-items:center;gap:8px;min-width:0}
.eba-tool-card__name{font:var(--type-h4);color:var(--text-primary);text-decoration:none;letter-spacing:var(--tracking-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.eba-tool-card__cat{font:var(--type-mono);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.eba-tool-card__score{font:var(--weight-bold) var(--text-lg)/1 var(--font-display);color:var(--text-primary)}
.eba-tool-card__score span{font:var(--type-mono);color:var(--text-muted)}
.eba-tool-card__summary{margin:0;font:var(--type-body);color:var(--text-secondary)}
.eba-tool-card__foot{display:flex;align-items:center;gap:8px;margin-top:auto;flex-wrap:wrap}
.eba-tool-card__read{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);color:var(--navy-600);text-decoration:none}
.eba-tool-card:hover .eba-tool-card__read{color:var(--accent-ink)}

/* Free tool card (dark) */
.eba-freetool-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-lg);text-decoration:none;background:var(--surface-inverse-raised);color:var(--text-inverse);border:1px solid var(--border-on-dark);box-shadow:var(--shadow-on-dark-1);transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-standard)}
.eba-freetool-card:hover{transform:var(--lift-hover);box-shadow:var(--shadow-on-dark-2)}
.eba-freetool-card::before{content:"";position:absolute;inset:0;background-image:var(--bg-grid-on-dark);background-size:22px 22px;opacity:.5}
.eba-freetool-card__icon{position:relative;width:48px;height:48px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--glass-bg-strong);border:var(--glass-border);color:var(--accent-tool,var(--brand-cyan-400))}
.eba-freetool-card__name{position:relative;font:var(--type-h4)}
.eba-freetool-card__desc{position:relative;margin:0;font:var(--type-small);color:var(--text-inverse-muted)}
.eba-freetool-card__cta{position:relative;margin-top:auto;display:inline-flex;align-items:center;gap:6px;font:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);color:var(--accent-tool,var(--brand-cyan-400))}

/* Article card */
.eba-article-card{display:grid;grid-template-columns:1fr;text-decoration:none;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-card);border:1px solid var(--border-hairline);box-shadow:var(--shadow-1);transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-standard)}
.eba-article-card:hover{transform:var(--lift-hover);box-shadow:var(--shadow-hover)}
.eba-article-card__media{position:relative;min-height:132px;overflow:hidden;background:linear-gradient(150deg,var(--navy-900),var(--navy-700))}
.eba-article-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slower) var(--ease-out)}
.eba-article-card:hover .eba-article-card__media img{transform:scale(1.06)}
.eba-article-card__media::after{content:"";position:absolute;inset:0;background:var(--scrim-dark);opacity:.75}
.eba-article-card__tag{position:absolute;left:16px;top:16px;z-index:2}
.eba-article-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.eba-article-card__kicker{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--accent-ink)}
.eba-article-card__title{margin:0;font:var(--type-h3);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.eba-article-card__excerpt{margin:0;font:var(--type-body);color:var(--text-secondary)}
.eba-article-card__meta{display:flex;gap:14px;font:var(--type-mono);color:var(--text-muted);margin-top:2px}
.eba-article-card--featured{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-7)}
.eba-article-card--featured .eba-article-card__media{min-height:260px;border-radius:var(--radius-lg)}
.eba-article-card--featured .eba-article-card__title{font:var(--type-h2)}
.eba-article-card--featured .eba-article-card__body{padding:var(--space-8) var(--space-8) var(--space-8) 0;justify-content:center}
@media (max-width:760px){ .eba-article-card--featured{grid-template-columns:1fr;gap:0} .eba-article-card--featured .eba-article-card__body{padding:var(--space-5)} }

/* Industry card */
.eba-industry-card{position:relative;overflow:hidden;display:flex;gap:var(--space-5);align-items:flex-start;padding:var(--space-6);border-radius:var(--radius-lg);text-decoration:none;background:var(--surface-card);border:1px solid var(--border-hairline);box-shadow:var(--shadow-1)}
.eba-industry-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38;z-index:0}
/* z-index:1 keeps this scrim above the image but below the icon/body/stat
   content below — without it, this pseudo-element paints last (pseudo-
   elements always come after real children in stacking order) and sits on
   top of the title, description and stat, muddying them to near-illegible
   against the image even though their own text colors are light/white. */
.eba-industry-card::after{content:"";position:absolute;inset:0;background:var(--scrim-hero);z-index:1}
.eba-industry-card__icon{position:relative;z-index:2;width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--accent-soft);border:1px solid rgba(6,156,244,.34);color:var(--accent-ink)}
.eba-industry-card__body{position:relative;z-index:2;flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;color:#fff}
.eba-industry-card__body h3{font:var(--type-h3)}
.eba-industry-card__body p{margin:0;font:var(--type-body);color:var(--navy-100)}
.eba-industry-card__stat{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;flex:0 0 auto;color:#fff}
.eba-industry-card__stat .n{font:var(--weight-bold) var(--text-2xl)/1 var(--font-display)}
.eba-industry-card__stat .l{font:var(--type-mono);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--navy-300)}

/* ---------------------------------------------------------------------
   15. TOOL SCORE CARD / COMPARISON / PROS-CONS
   --------------------------------------------------------------------- */
.eba-toolscore{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--surface-card);border:1px solid var(--border-hairline);box-shadow:var(--shadow-2)}
.eba-toolscore__top{display:flex;align-items:center;justify-content:space-between}
.eba-toolscore__overall{display:flex;align-items:baseline;gap:4px}
.eba-toolscore__overall b{font:var(--weight-bold) var(--text-5xl)/1 var(--font-display);color:var(--text-primary)}
.eba-toolscore__overall span{font:var(--type-mono);color:var(--text-muted)}
.eba-toolscore__verdict{margin:0;font:var(--type-small);color:var(--text-secondary)}
.eba-toolscore hr{border:none;border-top:1px solid var(--border-hairline);margin:0}

.eba-comparison{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border-hairline);background:var(--surface-card);box-shadow:var(--shadow-2)}
.eba-comparison table{border-collapse:collapse;width:100%;min-width:520px}
.eba-comparison th,.eba-comparison td{padding:14px var(--space-5);border-bottom:1px solid var(--border-hairline);border-left:1px solid var(--border-hairline);text-align:center}
.eba-comparison thead th:first-child,.eba-comparison tbody td:first-child{text-align:left;border-left:none;background:var(--surface-sunken);font:var(--type-label);color:var(--text-secondary)}
.eba-comparison thead th{background:var(--surface-sunken);padding:var(--space-5)}
.eba-comparison thead th.is-winner{background:var(--accent-soft);box-shadow:inset 0 2px 0 var(--accent)}
.eba-comparison__col-head{display:flex;flex-direction:column;align-items:center;gap:8px}
.eba-comparison__col-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--surface-card);border:1px solid var(--border-hairline)}
.eba-comparison td.is-winner{background:rgba(233,245,254,.6)}
.eba-comparison svg.yes{color:var(--green-600)}
.eba-comparison svg.no{color:var(--navy-300)}

.eba-proscons{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.eba-proscons__col{padding:var(--space-5);border-radius:var(--radius-lg);background:var(--surface-card);border:1px solid var(--border-default)}
.eba-proscons__head{display:flex;align-items:center;gap:8px;font:var(--type-label)}
.eba-proscons__head--pos{color:var(--green-600)}
.eba-proscons__head--neg{color:var(--red-600)}
.eba-proscons ul{margin:10px 0 0;padding-left:18px;font:var(--type-body);color:var(--text-secondary)}
@media (max-width:640px){ .eba-proscons{grid-template-columns:1fr} }

/* ---------------------------------------------------------------------
   16. NEWSLETTER / CTA
   --------------------------------------------------------------------- */
.eba-newsletter{position:relative;overflow:hidden;border-radius:var(--radius-xl);padding:var(--space-10);background:var(--surface-inverse);background-image:var(--bg-mesh-dark);color:var(--text-inverse);box-shadow:var(--shadow-on-dark-2)}
.eba-newsletter::before{content:"";position:absolute;inset:0;background-image:var(--bg-grid-on-dark);background-size:var(--grid-size) var(--grid-size);-webkit-mask-image:radial-gradient(70% 100% at 50% 0%,#000,transparent);mask-image:radial-gradient(70% 100% at 50% 0%,#000,transparent);pointer-events:none}
.eba-newsletter__inner{position:relative;display:flex;flex-direction:column;gap:var(--space-4);max-width:520px}
.eba-newsletter h3{margin:0;font:var(--type-h2);letter-spacing:var(--tracking-tight)}
.eba-newsletter p{margin:0;font:var(--type-body-lg);color:var(--text-inverse-muted)}
.eba-newsletter form{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.eba-newsletter input[type=email]{flex:1 1 240px;height:48px;padding:0 16px;border-radius:var(--radius-md);background:rgba(255,255,255,.08);border:var(--glass-border);color:#fff;font:var(--type-body)}
.eba-newsletter input[type=email]::placeholder{color:var(--navy-300)}
.eba-newsletter button{height:48px;padding:0 26px;border-radius:var(--radius-md);border:none;cursor:pointer;background:var(--accent);color:var(--accent-on-accent);font:var(--weight-semibold) var(--text-base)/1 var(--font-sans)}
.eba-newsletter .eba-note{font:var(--type-small);color:var(--navy-400)}
.eba-newsletter .eba-success{display:flex;align-items:center;gap:10px;font:var(--type-body);color:var(--accent-hover)}

.eba-cta{position:relative;overflow:hidden;border-radius:var(--radius-xl);padding:var(--space-10);text-align:center;background:var(--surface-inverse);background-image:var(--bg-mesh-dark);border:1px solid var(--border-on-dark);color:var(--text-inverse);box-shadow:var(--shadow-on-dark-2)}
.eba-cta--light{background:var(--accent-soft);background-image:var(--bg-mesh-light);border-color:var(--accent-border);color:var(--text-primary);box-shadow:var(--shadow-2)}
.eba-cta__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);max-width:620px;margin:0 auto}
.eba-cta h2{margin:0;font:var(--type-h1);letter-spacing:var(--tracking-tight)}
.eba-cta p{margin:0;font:var(--type-body-lg);color:var(--text-inverse-muted)}
.eba-cta--light p{color:var(--text-secondary)}
.eba-cta__actions{display:flex;gap:12px;margin-top:var(--space-2);flex-wrap:wrap;justify-content:center}

/* ---------------------------------------------------------------------
   17. DISCLOSURE / AUTHOR / AD SLOT
   --------------------------------------------------------------------- */
.eba-disclosure{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:var(--radius-md);background:var(--surface-sunken);border:1px solid var(--border-hairline);font:var(--type-small);color:var(--text-secondary)}
.eba-disclosure svg{flex:0 0 auto;color:var(--text-muted);margin-top:2px}

.eba-byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.eba-byline__avatar{width:40px;height:40px;border-radius:50%;background:var(--brand-gradient);color:#fff;display:grid;place-items:center;font:var(--weight-bold) var(--text-sm)/1 var(--font-display);flex:0 0 auto}
.eba-byline__meta{font:var(--type-small);color:var(--text-inverse-muted);display:flex;flex-direction:column;gap:2px}
.eba-byline__meta b{color:#fff;font-weight:var(--weight-semibold)}
.eba-byline--light .eba-byline__meta{color:var(--text-secondary)}
.eba-byline--light .eba-byline__meta b{color:var(--text-primary)}

.eba-adslot{display:flex;align-items:center;justify-content:center;min-height:90px;border:1px dashed var(--border-default);border-radius:var(--radius-md);background:var(--surface-sunken);color:var(--text-muted);font:var(--type-mono);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase}
.eba-adslot--leaderboard{min-height:90px}
.eba-adslot--sidebar{min-height:250px}
.eba-adslot--in-article{min-height:120px;margin:var(--space-2) 0}
@media (max-width:760px){ .eba-adslot--hide-mobile{display:none} }

/* ---------------------------------------------------------------------
   18. BREADCRUMB / TOC / FAQ / TAKEAWAYS
   --------------------------------------------------------------------- */
.eba-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:var(--type-small);color:var(--navy-300)}
.eba-breadcrumb a{color:var(--navy-300);text-decoration:none}
.eba-breadcrumb a:hover{color:#fff}
.eba-breadcrumb--light,.eba-breadcrumb--light a{color:var(--text-muted)}
.eba-breadcrumb--light a:hover{color:var(--accent-ink)}
.eba-breadcrumb svg{width:12px;height:12px;opacity:.6}
.eba-breadcrumb span[aria-current]{color:inherit}

.eba-toc{padding:var(--space-5);border-radius:var(--radius-lg);background:var(--surface-sunken);border:1px solid var(--border-hairline)}
.eba-toc__title{font:var(--type-label);color:var(--text-primary);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.eba-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.eba-toc li.is-sub{padding-left:16px}
.eba-toc a{display:block;padding:6px 10px;border-radius:var(--radius-sm);font:var(--type-body);font-size:var(--text-sm);color:var(--text-secondary);text-decoration:none}
.eba-toc a:hover{background:var(--paper-100)}
.eba-toc a.is-active{background:var(--accent-soft);color:var(--accent-ink);font-weight:var(--weight-semibold)}

.eba-takeaways{padding:var(--space-5);border-radius:var(--radius-lg);background:var(--accent-soft);border:1px solid var(--accent-border)}
.eba-takeaways__title{display:flex;align-items:center;gap:8px;font:var(--type-label);color:var(--accent-ink);margin-bottom:10px}
.eba-takeaways ul{margin:0;padding-left:20px;font:var(--type-body);color:var(--text-primary);display:flex;flex-direction:column;gap:6px}

.eba-faq{display:flex;flex-direction:column;gap:10px}
.eba-faq__item{border-radius:var(--radius-md);border:1px solid var(--border-hairline);background:var(--surface-card);overflow:hidden}
.eba-faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:transparent;border:none;cursor:pointer;text-align:left;font:var(--type-label);font-size:var(--text-base);color:var(--text-primary)}
.eba-faq__q svg{flex:0 0 auto;transition:transform var(--duration-base) var(--ease-standard);color:var(--text-muted)}
.eba-faq__item.is-open .eba-faq__q svg{transform:rotate(45deg)}
.eba-faq__a{max-height:0;overflow:hidden;transition:max-height var(--duration-slow) var(--ease-standard)}
.eba-faq__a p{margin:0;padding:0 18px 16px;font:var(--type-body);color:var(--text-secondary)}
.eba-faq__item.is-open .eba-faq__a{max-height:600px}

/* ---------------------------------------------------------------------
   19. ARTICLE / EDITORIAL PROSE
   --------------------------------------------------------------------- */
.eba-prose{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.eba-prose p.eba-lede-p,.eba-prose>p{margin:0;font:var(--type-article);color:var(--text-primary);max-width:68ch}
.eba-prose h2{margin:var(--space-6) 0 0;font:var(--type-h2);letter-spacing:var(--tracking-tight);color:var(--text-primary);scroll-margin-top:90px}
.eba-prose h3{margin:var(--space-5) 0 0;font:var(--type-h3);color:var(--text-primary);scroll-margin-top:90px}
.eba-prose ul,.eba-prose ol{font:var(--type-article);color:var(--text-primary);max-width:68ch}
.eba-prose img{border-radius:var(--radius-lg);width:100%}
.eba-prose figcaption{font:var(--type-small);color:var(--text-muted);margin-top:6px}
.eba-prose blockquote{margin:0;padding:var(--space-5) var(--space-6);border-left:3px solid var(--accent);background:var(--surface-sunken);border-radius:0 var(--radius-md) var(--radius-md) 0;font:var(--type-article);font-style:italic;color:var(--text-primary)}
.eba-prose a{color:var(--accent-ink);text-decoration:underline;text-decoration-color:var(--accent-border)}

/* ---------------------------------------------------------------------
   20. PAGINATION / MISC
   --------------------------------------------------------------------- */
.eba-pagination{display:flex;gap:8px;justify-content:center;padding-top:var(--space-6)}
.eba-pagination a,.eba-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;border-radius:var(--radius-sm);border:1px solid var(--border-default);text-decoration:none;color:var(--text-secondary);font:var(--type-body)}
.eba-pagination .current{background:var(--accent);border-color:var(--accent);color:var(--accent-on-accent)}
.eba-pagination a:hover{background:var(--paper-100)}

.eba-empty{padding:var(--space-10);text-align:center;font:var(--type-body);color:var(--text-muted);border:1px dashed var(--border-default);border-radius:var(--radius-lg)}

/* 404 */
.eba-404{text-align:center;padding:var(--space-13) var(--gutter);display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}
.eba-404 .eba-404-code{font:var(--weight-bold) var(--text-6xl)/1 var(--font-display);color:var(--accent);letter-spacing:var(--tracking-tighter)}

/* Screen-reader only */
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}

/* WP core alignment helpers used in editor content */
.alignwide{max-width:calc(var(--container-narrow) + 160px);margin-left:auto;margin-right:auto}
.alignfull{max-width:none;width:100%}
.aligncenter{margin-left:auto;margin-right:auto}