/* ==========================================================================
   AtomnyX 2026 — design system
   Ported from the claude/design homepage concept.

   WHY A SEPARATE FILE: css/style.css is inherited by ~900 pages (42 tools,
   35 compare pages, blog, glossary, admin) that were built against the OLD
   tokens. Redefining those tokens in place would restyle every one of them at
   once, in a repo with no version control. This file is opt-in per page:
   include it and the page adopts the new system; omit it and nothing changes.

   LAYERS
     1. Tokens            — dark by default, light under html.light-mode
     2. Ambient backdrop  — fixed canvas + grid + glow (site-wide, reusable)
     3. Chrome            — floating nav pill, scroll progress (reusable)
     4. Motion            — reveal primitives
     5. Homepage sections
     6. CMS card skins    — restyles the markup cms-reader.js already emits

   🔴 Never hardcode a hex outside the token blocks.
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
  --ax-bg:        #08080c;
  --ax-bg-soft:   rgba(255,255,255,.025);
  --ax-panel:     rgba(255,255,255,.05);
  --ax-panel-2:   rgba(255,255,255,.08);
  --ax-glass:     rgba(255,255,255,.055);
  --ax-glass-line:rgba(255,255,255,.13);
  --ax-nav-bg:    rgba(10,10,18,.55);

  --ax-line:      rgba(255,255,255,.08);
  --ax-line-2:    rgba(255,255,255,.14);

  --ax-text:      #f3f3f8;
  --ax-muted:     #9698ab;
  --ax-dim:       #6d6f82;
  --ax-on-accent: #ffffff;

  /* 🔴 A SECOND, BRIGHTER text pair — not a duplicate of text/muted.
     Everything that sits over the ambient backdrop rather than on a panel (nav,
     hero, the stats glass, both CTAs) is pure white / white-62% in the concept,
     which is what makes the top of the page read as lit. The port mapped these
     onto --ax-text / --ax-muted (#f3f3f8 / #9698ab), and #9698ab is a grey-violet,
     not a white at 62% — so the hero and nav came out dimmer and cooler. */
  --ax-hero-fg:   #ffffff;
  --ax-hero-fg-2: rgba(255,255,255,.62);

  --ax-accent:    #7c5cff;
  --ax-accent-2:  #9d8bff;
  --ax-mint:      #35e3a4;
  --ax-cyan:      #4fd8e8;
  --ax-on-mint:   #04140d;

  /* Card cover gradients — the only place dark values are intentional in both
     themes: these sit behind white cover text, like a printed masthead. */
  --ax-cover-1:   #171033;
  --ax-cover-2:   #0a0a16;
  --ax-cover-ink: #ffffff;

  /* 🔴 A near-opaque surface for panels that FLOAT OVER CONTENT (the tools
     mega-menu). --ax-nav-bg is rgba(10,10,18,.55), which works for the nav pill
     because almost nothing passes under it — but under a 118px hero headline it
     let the type read straight through the menu. Full-bleed bands like the
     newsletter can stay translucent; floating panels cannot. */
  --ax-menu-bg:   rgba(12, 11, 24, .975);

  --ax-glow:      .55;
  --ax-canvas-op: .5;
  --ax-shadow:    0 30px 80px -40px rgba(0,0,0,.9);

  --ax-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --ax-font-body:    'Manrope', ui-sans-serif, system-ui, sans-serif;
  --ax-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --ax-max:       1280px;
  --ax-ease:      cubic-bezier(.22,1,.3,1);
  --ax-ease-out:  cubic-bezier(.2,1,.28,1);

  /* The concept's signature surface: every panel is frosted over the ambient
     backdrop. Kept as one token so the whole system stays consistent. */
  --ax-blur:      blur(22px) saturate(135%);
}

html.light-mode {
  --ax-bg:        #eceaf3;
  --ax-bg-soft:   rgba(255,255,255,.72);
  --ax-panel:     #ffffff;
  --ax-panel-2:   #f4f3f9;
  --ax-glass:     rgba(255,255,255,.86);
  --ax-glass-line:rgba(18,16,40,.10);
  --ax-nav-bg:    rgba(255,255,255,.88);

  --ax-line:      rgba(18,16,40,.09);
  --ax-line-2:    rgba(18,16,40,.18);

  --ax-text:      #0c0c14;
  --ax-muted:     #54566a;
  --ax-dim:       #6b6d84;      /* darkened from the concept for AA contrast */

  --ax-hero-fg:   #0c0c14;
  --ax-hero-fg-2: rgba(12,12,24,.62);
  --ax-menu-bg:   rgba(255,255,255,.985);

  --ax-accent-2:  #6b4fe8;

  --ax-glow:      .5;
  --ax-canvas-op: 0;            /* the tube field reads as noise on light */
  --ax-shadow:    0 26px 60px -34px rgba(30,24,80,.4);
}

/* ── Page shell ──────────────────────────────────────────────────────────── */
/* ── TWO OPT-IN LEVELS. This split is what makes the sweep safe. ───────────
   `body.ax`      → tokens, ambient backdrop, and the shared nav/footer chrome.
                    Safe on ANY page, including the ~80 built on the old scale.
   `body.ax.ax-page` → additionally adopts the 2026 TYPE SCALE and link colour.
                    Only for pages laid out for it (the homepage today).

   Why: `line-height: normal` and `a { color: inherit }` are correct for the
   2026 layout and wrong for a legacy tool page, where they would tighten every
   paragraph from 1.6 and strip the accent off in-content links. Putting them
   on `.ax` would have quietly restyled 80 pages of prose while "only adding a
   header". */
.ax {
  background: transparent;
  color: var(--ax-text);
  font-family: var(--ax-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* Remap css/style.css's OWN type tokens inside this scope. Every legacy rule
     already routes through them (`h1..h6 { font-family: var(--font-display) }`),
     so one declaration moves ~90 pages onto Space Grotesk + Manrope without
     touching a single legacy selector — and without editing the token block in
     style.css, which would hit every page at once with no rollback.
     Redefining a variable in a descendant scope is the safe half of that. */
  --font-display: var(--ax-font-display);
  --font-body:    var(--ax-font-body);
  --font-mono:    var(--ax-font-mono);
}
/* 🔴 css/style.css sets `body { line-height: 1.6 }`. The 2026 scale is built on
   the browser default and each component states its own, so the inherited 1.6
   silently loosened every heading, eyebrow, nav link and VS name. */
.ax-page { line-height: normal; }
/* 🔴 …but body copy still needs a metric. `line-height: normal` is right for
   headings, labels and chrome and WRONG for a paragraph — on /about it crushed
   five unclassed <p> elements that no component selector happened to cover.
   `:where()` has ZERO specificity, so this is a floor that every component rule
   overrides for free, and enumerating containers is never needed again. */
.ax-page :where(p, li, dd, blockquote) { line-height: 1.7; }
/* The chrome carries the 2026 metric wherever it is injected, including onto
   legacy pages that keep their own 1.6 body copy. */
.ax-header, .ax-footer, .ax-rail, .ax-mega, .ax-menu { line-height: normal; }

html:has(.ax) { background: var(--ax-bg); scroll-behavior: smooth; }
.ax ::selection { background: var(--ax-accent); color: var(--ax-on-accent); }
.ax a { text-decoration: none; transition: color .5s ease, opacity .5s ease, border-color .5s ease, transform .5s var(--ax-ease-out); }
.ax-page a,
.ax-header a, .ax-footer a, .ax-rail a, .ax-mega a { color: inherit; }
.ax a:hover { color: var(--ax-accent-2); }
.ax :focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 3px; border-radius: 6px; }

.ax-wrap  { max-width: var(--ax-max); margin: 0 auto; padding-inline: 24px; }
.ax-sect  { padding-top: clamp(70px, 9vw, 120px); }

.ax-eyebrow {
  font-family: var(--ax-font-mono);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ax-accent-2);
}
/* `line-height: normal` is explicit, not a leftover: the concept leaves section
   headings on the default metric, and css/style.css sets 1.2 on every heading.
   The port's own 1.06 made each h2 ~11px shorter than the design. */
.ax-h2 {
  margin: 14px 0 0;
  font-family: var(--ax-font-display); font-weight: 700;
  font-size: clamp(30px, 4vw, 52px); letter-spacing: -.04em; line-height: normal;
}
/* The two centred display headings run a size and metric of their own. */
.ax-h2--display {
  margin: 18px auto 0; max-width: 760px;
  font-size: clamp(30px, 4.6vw, 56px); letter-spacing: -.045em; line-height: 1.05;
  text-wrap: balance;
}
.ax-lede { margin: 20px auto 0; font-size: 16px; line-height: 1.65; color: var(--ax-muted); text-wrap: pretty; }
.ax-lede--sm { font-size: 15.5px; }
.ax-sheen {
  background: linear-gradient(100deg, var(--ax-cyan), var(--ax-accent-2) 55%, var(--ax-accent));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ax-sheen 9s linear infinite;
}
.ax-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ── 2. Ambient backdrop (injected by js/atomnyx-2026.js) ────────────────── */
.ax-bg-layer { position: fixed; inset: 0; pointer-events: none; }
.ax-bg-base  { z-index: -4; background: var(--ax-bg); }
/* The host is what pins the tube field to the viewport — see the note in
   buildBackdrop(). The canvas fills the host, never the document. */
.ax-bg-canvas-host { z-index: -3; overflow: hidden; }
.ax-bg-canvas{
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none; opacity: var(--ax-canvas-op); touch-action: none;
  transition: opacity .8s ease;
}
.ax-bg-grid  {
  z-index: -2;
  background-image: linear-gradient(var(--ax-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--ax-line) 1px, transparent 1px);
  background-size: 88px 88px; opacity: .5;
}
.ax-bg-wash  {
  z-index: -2;
  background: radial-gradient(85% 55% at 50% 0%, color-mix(in srgb, var(--ax-accent) 13%, transparent), transparent 72%);
}
.ax-orb { position: fixed; z-index: -2; border-radius: 50%; pointer-events: none; will-change: transform; }
.ax-orb--a { top: 12%; left: -6%; width: min(46vw,620px); height: min(46vw,620px); filter: blur(130px); background: var(--ax-accent); opacity: calc(var(--ax-glow) * .3); animation: ax-floaty 22s ease-in-out infinite; }
.ax-orb--b { bottom: 6%; right: -8%; width: min(42vw,560px); height: min(42vw,560px); filter: blur(140px); background: var(--ax-cyan);   opacity: calc(var(--ax-glow) * .22); animation: ax-floaty-2 28s ease-in-out infinite; }

/* ── 3. Chrome: scroll progress + floating nav pill ──────────────────────── */
.ax-progress-track { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; background: transparent; pointer-events: none; }
.ax-progress-bar {
  height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--ax-accent), var(--ax-cyan), var(--ax-mint));
}
/* Where supported this is driven by the scroll timeline itself — no JS, no jank. */
@supports (animation-timeline: scroll()) {
  .ax-progress-bar { animation: ax-bar-grow .01s linear both; animation-timeline: scroll(root); }
  html:has(.ax) .ax-progress-bar { will-change: transform; }
}

.ax-header { position: sticky; top: 16px; z-index: 100; padding: 0 20px; background: transparent; }
/* 1240, not the concept's 1120: the nav now carries five links (Tools and
   Comparisons were added) plus the language switcher. At 1120 the link row and
   the action group collided around 1150px of viewport. */
.ax-nav {
  max-width: 1240px; margin: 0 auto;
  padding: 10px 12px 10px 20px;
  display: flex; align-items: center; gap: 22px;
  border-radius: 999px; border: 1px solid var(--ax-glass-line);
  background: var(--ax-nav-bg);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 22px 50px -28px rgba(0,0,0,.95);
}
/* `.ax a.ax-brand`, not `.ax-brand` — `.ax a { color: inherit }` is (0,1,1) and
   silently outranks any single component class on an anchor. Same reason the
   two CTAs below are written that way. */
.ax a.ax-brand { display: flex; align-items: center; gap: 10px; font-family: var(--ax-font-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--ax-hero-fg); }
.ax a.ax-brand:hover { color: var(--ax-hero-fg); }
.ax-mark {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--ax-cyan), var(--ax-accent));
  color: #05050a; font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.ax-nav-spacer { flex: 1; }
/* Inactive nav links are --ax-text, NOT --ax-muted. In the concept the nav
   container is --hero-fg2 but every link matches `a { color: var(--text) }`,
   which beats inheritance — so all four render at #f3f3f8 and only the current
   page goes pure white. Ported as muted, the whole nav read as switched-off. */
.ax-nav-links { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 500; color: var(--ax-text); }
.ax-menu { max-width: 1240px; }
.ax-nav-links a { position: relative; }
.ax-nav-links a.is-active { color: var(--ax-hero-fg); }
.ax-nav-links a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px; background: var(--ax-accent); }
.ax-nav-actions { display: flex; align-items: center; gap: 10px; }

.ax-pill-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--ax-glass-line); background: var(--ax-glass);
  color: var(--ax-hero-fg-2); font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  cursor: pointer; transition: border-color .5s ease, color .5s ease;
}
.ax-pill-btn:hover { border-color: var(--ax-accent); color: var(--ax-hero-fg); }
.ax-icon-btn {
  width: 34px; height: 34px; border-radius: 999px; padding: 0;
  border: 1px solid var(--ax-glass-line); background: var(--ax-glass);
  color: var(--ax-hero-fg-2); cursor: pointer; display: grid; place-items: center;
  transition: border-color .5s ease, color .5s ease;
}
.ax-icon-btn:hover { border-color: var(--ax-accent); color: var(--ax-hero-fg); }
.ax-icon-btn svg { width: 15px; height: 15px; }

.ax a.ax-cta {
  padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; white-space: nowrap;
  background: var(--ax-accent); color: var(--ax-on-accent);
  box-shadow: 0 10px 30px -12px var(--ax-accent);
}
.ax a.ax-cta:hover { color: var(--ax-on-accent); }
.ax a.ax-cta--ghost {
  background: var(--ax-glass); color: var(--ax-hero-fg);
  border: 1px solid var(--ax-glass-line); box-shadow: none;
}
.ax a.ax-cta--ghost:hover { border-color: var(--ax-accent); color: var(--ax-hero-fg); }

.ax-burger { width: 38px; height: 38px; display: none; }
/* Same reasoning as .ax-mega: this panel floats over the page, so it needs an
   opaque base rather than the nav pill's glass. */
.ax-menu {
  display: none; max-width: 1120px; margin: 10px auto 0; padding: 20px;
  border-radius: 26px; border: 1px solid var(--ax-glass-line); background: var(--ax-menu-bg);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 30px 60px -30px rgba(0,0,0,.95);
}
.ax-menu.is-open { display: block; }
.ax-menu-links { display: flex; flex-direction: column; font-size: 17px; font-weight: 600; }
.ax-menu-links a { padding: 13px 6px; color: var(--ax-muted); border-bottom: 1px solid var(--ax-line); }
.ax-menu-links a.is-active { color: var(--ax-text); }
.ax-menu-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ax-menu-actions > * { flex: 1 1 140px; text-align: center; }
/* The switcher is moved in here below 1000px (see placeLangSwitcher) — it sizes
   to its own content beside the two stretching CTAs, as in the concept. */
.ax-menu-actions > .lang-switcher { flex: 0 1 auto; }

@media (max-width: 1000px) {
  .ax-nav-links, .ax-nav-lang, .ax-nav-cta { display: none !important; }
  .ax-burger { display: grid !important; }
}

/* ── Tools mega-dropdown ─────────────────────────────────────────────────
   Anchored to the nav pill, not the trigger, so it centres under the bar
   instead of hanging off a 46px word. */
.ax-has-mega { position: relative; display: inline-flex; align-items: center; }
.ax-nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: inherit; font-weight: inherit;
  color: var(--ax-text); transition: color .5s ease;
}
.ax-nav-trigger:hover, .ax-has-mega.is-open .ax-nav-trigger { color: var(--ax-accent-2); }
.ax-nav-trigger.is-active { color: var(--ax-hero-fg); position: relative; }
.ax-nav-trigger.is-active::after {
  content: ''; position: absolute; left: 0; right: 14px; bottom: -7px;
  height: 1.5px; background: var(--ax-accent);
}
.ax-chev { transition: transform .3s var(--ax-ease); }
.ax-has-mega.is-open .ax-chev { transform: rotate(180deg); }

.ax-mega {
  position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%);
  width: min(92vw, 720px); padding: 22px; z-index: 110;
  border-radius: 22px; border: 1px solid var(--ax-glass-line);
  /* Same treatment as the "// Stay informed" band — a violet wash rising out of
     the bottom edge with a mint bloom behind it — as stacked background layers
     rather than extra elements (::before is already the hover bridge).
     🔴 The base layer is --ax-menu-bg (97.5% opaque), NOT the translucent
     --ax-nav-bg the nav pill uses. The first version stacked these washes on
     glass and the 118px hero headline read straight through the menu, which is
     what made the tool names almost unreadable. Wash strengths are down from
     24/34% to 16/26% for the same reason: they tint the surface, they are not
     the surface. */
  background:
    radial-gradient(120% 92% at 50% 118%, color-mix(in srgb, var(--ax-mint) 16%, transparent), transparent 62%),
    radial-gradient(95% 100% at 50% 100%, color-mix(in srgb, var(--ax-accent) 26%, transparent), transparent 74%),
    var(--ax-menu-bg);
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 40px 90px -30px rgba(0,0,0,.85);
}
/* 🔴 [hidden] must win over display:grid — see memory/tools.md #5, the same
   bug that rendered all five PDF tool panels at once. */
.ax-mega[hidden] { display: none; }
.ax-mega::before {          /* keeps hover alive across the 20px gap */
  content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px;
}
.ax-mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ax-mega-head {
  font-family: var(--ax-font-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ax-muted); margin-bottom: 10px;
}
.ax-mega-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-left: -10px; border-radius: 11px;
  font-size: 13.5px; font-weight: 500; color: var(--ax-text);
  transition: background-color .25s ease, color .25s ease;
}
.ax-mega-item:hover { background: var(--ax-panel-2); color: var(--ax-text); }
.ax-mega-ico {
  flex: 0 0 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; border: 1px solid var(--ax-glass-line);
  background: color-mix(in srgb, var(--ax-accent) 12%, transparent);
  color: var(--ax-accent-2);
}
.ax-mega-item:hover .ax-mega-ico { color: var(--ax-cyan); border-color: color-mix(in srgb, var(--ax-cyan) 45%, transparent); }
.ax-mega-all {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ax-line);
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; color: var(--ax-accent-2);
}
.ax-mega-all:hover { color: var(--ax-cyan); }
.ax-mega-all span { margin-left: auto; }

/* ── Quick-links rail (replaces the headline marquee) ─────────────────────
   Same slot under the hero, but every item is a destination. Also feeds the
   internal-link graph, which the marquee did not. */
.ax-rail {
  width: calc(100% - 40px); max-width: 1240px; margin: clamp(10px,2vw,26px) auto 0;
  padding: 10px; border-radius: 22px;
  border: 1px solid var(--ax-glass-line); background: var(--ax-nav-bg);
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 22px 50px -30px rgba(0,0,0,.9);
}
.ax-rail-scroll {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ax-rail-scroll::-webkit-scrollbar { display: none; }
.ax-rail-chip {
  flex: 1 0 auto; display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent; color: var(--ax-muted);
  font-size: 13px; font-weight: 600;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.ax-rail-chip svg { color: var(--ax-accent-2); transition: color .3s ease; }
.ax-rail-chip:hover {
  background: var(--ax-panel-2); border-color: color-mix(in srgb, var(--ax-accent) 40%, transparent);
  color: var(--ax-text);
}
.ax-rail-chip:hover svg { color: var(--ax-cyan); }
@media (max-width: 900px) { .ax-rail-chip { flex: 0 0 auto; } }

/* ── 4. Motion ───────────────────────────────────────────────────────────── */
@keyframes ax-marquee   { from { transform: translate3d(0,0,0) } to { transform: translate3d(-50%,0,0) } }
@keyframes ax-floaty    { 0%,100% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(0,-38px,0) scale(1.07) } }
@keyframes ax-floaty-2  { 0%,100% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(30px,26px,0) scale(1.1) } }
@keyframes ax-pulse-dot { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .35; transform: scale(.7) } }
@keyframes ax-sheen     { from { background-position: 0% 50% } to { background-position: 200% 50% } }
@keyframes ax-bar-grow  { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes ax-fade-away { from { opacity: 1; transform: none } to { opacity: 0; transform: translate3d(0,-70px,0) } }

/* The hero drifting up and out as you scroll. Scroll-timeline only (Chrome/Edge),
   exactly as in the concept — there is no JS fallback on purpose:
   · the from-state is opacity 1 / no transform, so at scroll 0 it is a no-op and
     the h1 still paints immediately as the LCP element;
   · a JS/IO version would have to touch opacity on the LCP element to work,
     which is the one thing this page must not do.
   Browsers without scroll timelines simply keep a static hero. */
@supports (animation-timeline: scroll()) {
  .ax-hero-inner { animation: ax-fade-away .01s linear both; animation-timeline: scroll(root); animation-range: 0 78vh; }
}

/* Reveals are one-shot and driven by IntersectionObserver in JS, so they work
   in every browser rather than Chrome only. The hidden state is applied ONLY
   after JS confirms it can observe — otherwise content renders as-is and can
   never get stuck invisible. Transform + opacity only: no layout shift. */
/* From-states mirror the concept's revealUp / revealFade / riseZoom keyframes
   exactly (64px + .975 scale, and 40px + 1.06 scale at .45 opacity). */
.ax-reveal-ready [data-ax-reveal] { opacity: 0; transform: translate3d(0,64px,0) scale(.975); }
.ax-reveal-ready [data-ax-reveal="fade"] { transform: none; }
.ax-reveal-ready [data-ax-reveal="zoom"] { opacity: .45; transform: scale(1.06) translate3d(0,40px,0); }
[data-ax-reveal].is-in {
  opacity: 1 !important; transform: none !important;
  transition: opacity .9s var(--ax-ease), transform 1.05s var(--ax-ease);
}

@media (prefers-reduced-motion: reduce) {
  .ax *, .ax-orb, .ax-bg-canvas { animation: none !important; }
  .ax-reveal-ready [data-ax-reveal] { opacity: 1 !important; transform: none !important; }
  [data-ax-reveal].is-in { transition: none !important; }
  html:has(.ax) { scroll-behavior: auto; }
}

/* ── 5. Homepage sections ────────────────────────────────────────────────── */
.ax-hero { position: relative; overflow: hidden; margin-top: -70px; padding: clamp(150px,17vw,225px) 24px clamp(70px,8vw,110px); }
.ax-hero-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.ax-hero-orb--a { top: -140px; left: 8%;  width: 420px; height: 420px; filter: blur(110px); background: var(--ax-accent); opacity: calc(var(--ax-glow) * .5);  animation: ax-floaty 14s ease-in-out infinite; }
.ax-hero-orb--b { top: 80px;   right: 6%; width: 360px; height: 360px; filter: blur(120px); background: var(--ax-cyan);   opacity: calc(var(--ax-glow) * .34); animation: ax-floaty-2 18s ease-in-out infinite; }
.ax-hero-inner { position: relative; max-width: 1080px; margin: 0 auto; text-align: center; }

.ax-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--ax-glass-line); background: var(--ax-glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 12.5px; font-weight: 600; color: var(--ax-hero-fg-2);
}
.ax-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ax-mint); animation: ax-pulse-dot 2.2s ease-in-out infinite; }

/* The h1 is the LCP element — it is never revealed, faded or transformed in. */
.ax-hero h1 {
  margin: 26px 0 0; font-family: var(--ax-font-display); font-weight: 700;
  letter-spacing: -.045em; line-height: .95;
  font-size: clamp(48px, 8.6vw, 118px); text-wrap: balance; color: var(--ax-hero-fg);
}
.ax-hero h1 > span { display: block; }
.ax-hero-sub { margin: 28px auto 0; max-width: 620px; font-size: clamp(15px,1.45vw,18.5px); line-height: 1.65; color: var(--ax-hero-fg-2); text-wrap: pretty; }
.ax-hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* Must out-specify `.ax a.ax-cta` above (0,2,1), or the hero buttons inherit the
   small nav-pill padding and shadow. */
.ax a.ax-btn-lg { padding: 15px 32px; border-radius: 999px; font-weight: 700; font-size: 15px; }
.ax a.ax-btn-lg.ax-cta { box-shadow: 0 24px 50px -22px var(--ax-accent); }
.ax a.ax-btn-lg.ax-cta:hover { transform: translateY(-2px); }

.ax-stats {
  margin: 64px auto 0; max-width: 820px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,180px), 1fr)); gap: 20px;
  padding: 30px 34px; border-radius: 22px;
  border: 1px solid var(--ax-glass-line); background: var(--ax-glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 34px 70px -44px rgba(0,0,0,.95);
}
/* 🔴 Three classes deep, not two. .number / .label are load-bearing hooks for
   js/main.js + js/cms-reader.js, and css/style.css styles `.hero-stat .number`
   (0,2,0) — which beat a bare `.ax-stat-num` and rendered the hero counters at
   28px/800 in the legacy grey instead of 42px/700 in the display colour. */
.ax .hero-stat .ax-stat-num { font-family: var(--ax-font-mono); font-size: clamp(28px,3.6vw,42px); font-weight: 700; letter-spacing: -.03em; color: var(--ax-hero-fg); }
.ax .hero-stat .ax-stat-lbl { margin-top: 6px; font-size: 12.5px; color: var(--ax-hero-fg-2); letter-spacing: .04em; }

/* Ticker */
.ax-ticker {
  width: calc(100% - 40px); max-width: 1560px; margin: clamp(10px,2vw,26px) auto 0;
  padding: 13px 0; border-radius: 999px;
  border: 1px solid var(--ax-glass-line); background: var(--ax-nav-bg);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 22px 50px -30px rgba(0,0,0,.9);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ax-ticker-track { display: flex; width: max-content; animation: ax-marquee 46s linear infinite; }
.ax-ticker-track:hover { animation-play-state: paused; }
.ax-ticker-run {
  display: flex; align-items: center; gap: 44px; padding-right: 44px;
  font-family: var(--ax-font-mono); font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ax-dim); white-space: nowrap;
}
.ax-ticker-run a { color: var(--ax-dim); }
.ax-ticker-run a:hover { color: var(--ax-text); }
.ax-star-1 { color: var(--ax-accent); } .ax-star-2 { color: var(--ax-mint); } .ax-star-3 { color: var(--ax-cyan); }

/* Category filter pills */
.ax-pills { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.ax-pill {
  padding: 9px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ax-line); background: transparent; color: var(--ax-muted);
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
  font-family: inherit; font-size: 13px; font-weight: 700;
  transition: all .5s ease;
}
.ax-pill:hover { border-color: var(--ax-line-2); color: var(--ax-text); }
.ax-pill[aria-pressed="true"] { border-color: var(--ax-accent); background: var(--ax-accent); color: var(--ax-on-accent); }
.ax-empty {
  margin-top: 34px; padding: 56px 24px; border: 1px dashed var(--ax-line-2);
  border-radius: 20px; text-align: center;
}
.ax-empty-t { font-family: var(--ax-font-mono); font-size: 12.5px; letter-spacing: .16em; color: var(--ax-dim); text-transform: uppercase; }
.ax-empty-s { margin-top: 10px; font-size: 14px; color: var(--ax-muted); }

.ax-link-ghost { padding: 11px 22px; border-radius: 999px; border: 1px solid var(--ax-line-2); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.ax-link-ghost:hover { border-color: var(--ax-text); color: var(--ax-text); }

/* Comparison cards */
.ax-vs-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,420px), 1fr)); gap: 22px; }
/* 🔴 Written as `.ax a.ax-vs` on purpose. As a bare `.ax-vs` (0,1,0) this rule
   LOST to `.ax a` (0,1,1) above, so the comparison cards ran the generic link
   transition — 0.35s, and neither box-shadow nor background-color was in the
   list, which made the whole hover snap instead of bloom. */
.ax a.ax-vs {
  display: block; padding: 28px; border-radius: 20px;
  border: 1px solid var(--ax-line); background: var(--ax-panel);
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
  transition: border-color 1.4s var(--ax-ease), box-shadow 1.4s var(--ax-ease), background-color 1.4s ease;
}
.ax a.ax-vs:hover {
  color: var(--ax-text);
  border-color: color-mix(in srgb, var(--ax-accent) 70%, transparent);
  background-color: var(--ax-panel-2);
  box-shadow: 0 50px 100px -50px var(--ax-accent),
              0 0 60px -20px color-mix(in srgb, var(--ax-accent) 45%, transparent) inset,
              0 0 0 1px color-mix(in srgb, var(--ax-accent) 30%, transparent) inset;
}
.ax-vs-kicker { font-family: var(--ax-font-mono); font-size: 10.5px; letter-spacing: .2em; color: var(--ax-mint); text-transform: uppercase; }
.ax-vs-row { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 22px; }
.ax-vs-name { flex: 1; text-align: center; font-family: var(--ax-font-display); font-weight: 700; font-size: 22px; }
.ax-vs-tag { padding: 5px 11px; border: 1px solid var(--ax-line-2); border-radius: 8px; font-family: var(--ax-font-mono); font-size: 11px; color: var(--ax-accent-2); }
.ax-vs p { margin: 22px 0 0; font-size: 14px; line-height: 1.65; color: var(--ax-muted); }
.ax-vs-more { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--ax-accent-2); }

/* Newsletter */
.ax-news {
  margin-top: clamp(80px,10vw,140px); position: relative; overflow: hidden;
  border-top: 1px solid var(--ax-line); border-bottom: 1px solid var(--ax-line);
  background: var(--ax-bg-soft); padding: clamp(70px,9vw,120px) 24px;
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
}
.ax-news-wash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 100% at 50% 100%, color-mix(in srgb, var(--ax-accent) 22%, transparent), transparent 70%); opacity: var(--ax-glow); }
/* The mint bloom rising out of the bottom edge. Without it the section is a
   flat violet wash — this is the second half of the concept's background. */
.ax-news-orb {
  position: absolute; left: 50%; bottom: -160px; margin-left: -260px;
  width: 520px; height: 320px; border-radius: 50%; pointer-events: none;
  filter: blur(120px); background: var(--ax-mint); opacity: calc(var(--ax-glow) * .3);
}
.ax-news-inner { position: relative; max-width: 640px; margin: 0 auto; text-align: center; }
.ax-news h2 { margin: 18px 0 0; font-family: var(--ax-font-display); font-weight: 700; font-size: clamp(32px,5vw,60px); letter-spacing: -.045em; line-height: 1.03; text-wrap: balance; }
/* 🔴 `flex-direction: row` is not redundant. css/style.css flips
   `.newsletter-form` to `column` under a max-width media query, and in a COLUMN
   flex container `flex: 1 1 240px` sizes the MAIN axis — so the email field
   became a 240px-TALL capsule on every phone. The row + wrap here is what the
   design intends: the field takes the full width and the button drops below it.
   Scoped `.ax .ax-news-form` so it outranks the media-query rule. */
.ax .ax-news-form { margin: 34px auto 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 520px; }
/* 🔴 Three classes deep on purpose. The form also carries .newsletter-form so
   js/main.js still wires the subscribe handler, and css/style.css styles
   `.newsletter-form input[type="email"]` — (0,2,1), which beat a bare
   `.ax-news-input`. The field was rendering in the LEGACY skin (solid #1a1a25,
   1.5px border, 13.6/20 padding) inside the redesigned section. */
.ax .ax-news-form .ax-news-input {
  flex: 1 1 240px; padding: 16px 22px; border-radius: 999px;
  border: 1px solid var(--ax-line-2); background: var(--ax-panel); color: var(--ax-text);
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
  font-family: inherit; font-size: 15px; outline: none; transition: border-color .25s;
}
.ax .ax-news-form .ax-news-input::placeholder { color: var(--ax-dim); }
.ax .ax-news-form .ax-news-input:focus { border-color: var(--ax-accent); }
.ax .ax-news-form .ax-news-btn {
  padding: 16px 34px; border-radius: 999px; border: none;
  background: var(--ax-mint); color: var(--ax-on-mint);
  font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer;
  transition: transform .5s var(--ax-ease-out), box-shadow .5s ease;
}
.ax .ax-news-form .ax-news-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -18px var(--ax-mint); }
.ax-news-note { margin-top: 16px; font-size: 12.5px; color: var(--ax-dim); }

/* Platform cards */
.ax-plat-grid { margin-top: 46px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px), 1fr)); gap: 20px; text-align: left; }
.ax-plat {
  padding: 28px; border-radius: 20px; border: 1px solid var(--ax-line); background: var(--ax-panel);
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color 1.4s var(--ax-ease), box-shadow 1.4s var(--ax-ease), background-color 1.4s ease;
}
.ax-plat:hover {
  border-color: color-mix(in srgb, var(--ax-accent) 52%, transparent);
  background-color: var(--ax-panel-2);
  box-shadow: 0 44px 90px -52px var(--ax-accent), 0 0 0 1px color-mix(in srgb, var(--ax-accent) 18%, transparent) inset;
}
.ax-plat-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; border: 1px solid var(--ax-glass-line); }
.ax-plat-ico--cyan { background: color-mix(in srgb, var(--ax-cyan) 14%, transparent); }
.ax-plat-ico--violet { background: color-mix(in srgb, var(--ax-accent) 15%, transparent); }
.ax-plat-ico--mint { background: color-mix(in srgb, var(--ax-mint) 14%, transparent); }
.ax-plat-name { font-family: var(--ax-font-display); font-weight: 700; font-size: 19px; }
.ax-plat p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ax-muted); flex: 1; }
.ax-plat-link { align-self: flex-start; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--ax-line-2); font-size: 13px; font-weight: 700; }
.ax-plat-link:hover { border-color: var(--ax-accent); color: var(--ax-accent-2); }

/* Footer */
.ax-footer {
  border-top: 1px solid var(--ax-line); background: var(--ax-bg-soft); margin-top: 0;
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
}
.ax-footer-grid { max-width: var(--ax-max); margin: 0 auto; padding: clamp(50px,6vw,80px) 24px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,180px), 1fr)); gap: 40px; }
.ax-footer-brand { grid-column: span 2; min-width: 240px; }
.ax-footer-brand p { margin: 16px 0 0; max-width: 280px; font-size: 13.5px; line-height: 1.7; color: var(--ax-muted); }
.ax-socials { margin-top: 20px; display: flex; gap: 10px; }
.ax-social { width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--ax-line); display: grid; place-items: center; color: var(--ax-muted); }
.ax-social:hover { border-color: var(--ax-accent); color: var(--ax-accent-2); }
.ax-fcol { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; color: var(--ax-muted); }
/* Same inheritance quirk as the nav: the concept's footer columns are muted,
   but every link inside matches `a { color: var(--text) }` and renders at
   #f3f3f8. `.ax a { color: inherit }` made the whole footer muted and flat. */
.ax-fcol a { color: var(--ax-text); }
.ax-fcol a:hover { color: var(--ax-accent-2); }
.ax-fcol-t { font-family: var(--ax-font-mono); font-size: 11px; letter-spacing: .18em; color: var(--ax-text); margin-bottom: 5px; }
/* ── Footer tool index ───────────────────────────────────────────────────
   A dense link table in the BrandCrowd mould: all 42 tools reachable from
   every page in one glance, grouped by what you came to do. Columns are
   auto-fit so the six groups reflow to 3 / 2 / 1 without breakpoints. */
.ax-tool-index {
  max-width: var(--ax-max); margin: clamp(40px,5vw,64px) auto 0; padding: 0 24px;
}
.ax-tool-index-head { padding-bottom: 22px; border-bottom: 1px solid var(--ax-line); }
.ax-tool-index-head p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ax-muted); max-width: 520px; }
.ax-tcols {
  margin-top: 26px; display: grid; gap: 26px 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%,190px), 1fr));
}
.ax-tcol { display: flex; flex-direction: column; gap: 9px; }
.ax-tcol-t {
  font-family: var(--ax-font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ax-text); margin-bottom: 4px;
}
.ax-tcol a { font-size: 13px; line-height: 1.35; color: var(--ax-muted); }
.ax-tcol a:hover { color: var(--ax-accent-2); }

.ax-wordmark-wrap { max-width: var(--ax-max); margin: 0 auto; padding: 0 24px; overflow: hidden; }
.ax-wordmark {
  margin-top: 50px; font-family: var(--ax-font-display); font-weight: 700;
  font-size: clamp(46px,13vw,205px); line-height: .82; letter-spacing: -.05em;
  background: linear-gradient(180deg, var(--ax-text), transparent 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .16; white-space: nowrap; user-select: none;
}
.ax-footer-legal { border-top: 1px solid var(--ax-line); }
.ax-footer-legal > div { max-width: var(--ax-max); margin: 0 auto; padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 12.5px; color: var(--ax-dim); }

/* ── 6. CMS card skins ───────────────────────────────────────────────────────
   cms-reader.js already emits .featured-article and .article-card. Restyling
   those classes (rather than changing the renderer) means the Firestore
   content adopts the new design AND the blog archive page inherits it free. */
.ax .featured-article {
  margin-top: 22px; border: 1px solid var(--ax-line); border-radius: 26px; overflow: hidden;
  background: var(--ax-panel); box-shadow: var(--ax-shadow);
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
  /* gap: 0 is load-bearing — style.css sets `gap: var(--space-2xl)` (48px) on
     .featured-article, which pulled the two halves off the 50/50 split the
     design uses (608px columns became 584px with a seam down the middle). */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,420px), 1fr)); gap: 0;
}
/* style.css gives .featured-article a purple glow + border on hover. The
   concept's featured card has no hover state at all — it is a poster. */
.ax .featured-article:hover { border-color: var(--ax-line); box-shadow: var(--ax-shadow); }
.ax .featured-article-image {
  position: relative; min-height: 320px; padding: 40px; aspect-ratio: auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(155deg, var(--ax-cover-1), var(--ax-cover-2) 55%, #08131a);
  overflow: hidden;
}
.ax .featured-article:hover .featured-article-image img { transform: none; }
.ax .featured-article-image::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 100% 7px; opacity: .5;
}
.ax .featured-article-image::after {
  content: ''; position: absolute; top: -90px; right: -60px; width: 320px; height: 320px;
  border-radius: 50%; filter: blur(90px); background: var(--ax-accent); opacity: .5;
}
.ax .featured-article-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; }
/* No text-transform: the concept's card kickers are sentence case ("Hardware",
   "AI & ML"), and forcing uppercase shouted them. font-weight 400 for the same
   reason — style.css sets 600/700 on these. */
.ax .featured-badge, .ax .category-badge {
  position: relative; align-self: flex-start; z-index: 1;
  font-family: var(--ax-font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .2em; text-transform: none;
  color: var(--ax-mint); background: transparent; padding: 0; border: 0;
}
.ax .featured-article-content { padding: clamp(30px,3.4vw,52px); display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.ax .featured-article-content h2, .ax .featured-article-content h3 {
  margin: 0; font-family: var(--ax-font-display); font-weight: 700;
  font-size: clamp(26px,2.9vw,40px); line-height: 1.14; letter-spacing: -.032em; text-wrap: balance;
}
.ax .category-label { font-family: var(--ax-font-mono); font-size: 11.5px; font-weight: 400; letter-spacing: .2em; color: var(--ax-mint); text-transform: none; }
.ax .featured-article-content p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ax-muted); text-wrap: pretty; }
.ax .featured-article-meta, .ax .article-card-footer {
  display: flex; align-items: center; gap: 14px; color: var(--ax-dim);
  border-top: 1px solid var(--ax-line);
}
.ax .featured-article-meta { padding-top: 8px; font-size: 12.5px; }
.ax .article-card-footer  { padding-top: 14px; font-size: 12px; margin-top: 0; }
/* The legacy skin gives these their own type; in the 2026 card everything in
   the footer row is one 12px/--dim line, so hand them back to the parent. */
.ax .article-card-footer .read-time,
.ax .article-card-author span { font-size: inherit; color: inherit; font-family: inherit; }
/* …except the featured byline, which the concept sets apart from the date. */
.ax .featured-article-meta .article-card-author span { color: var(--ax-muted); font-weight: 600; }
.ax .featured-article-content .category-label { margin: 0; }
.ax .author-avatar {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--ax-cyan), var(--ax-accent)); color: #05050a; font-size: 11px; font-weight: 700;
}

.ax .articles-grid, .ax #cms-articles-grid, .ax #trendingGrid {
  margin-top: 34px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%,330px), 1fr)); gap: 26px;
}
/* cms-reader.js wraps every card in an <a>, so the ANCHOR is the grid item and
   the card inside it was free to be shorter than its row — cards in the same
   row came out at different heights (576 vs 552). Make the anchor a stretching
   column so the card fills it, which is what the concept gets for free by
   putting <article> straight in the grid. */
.ax .articles-grid > a, .ax #cms-articles-grid > a, .ax #trendingGrid > a { display: flex; }
.ax .articles-grid > a > .article-card,
.ax #cms-articles-grid > a > .article-card,
.ax #trendingGrid > a > .article-card { flex: 1; }

.ax .article-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--ax-line); border-radius: 20px; background: var(--ax-panel);
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
  transition: border-color 1.4s var(--ax-ease), box-shadow 1.4s var(--ax-ease), background-color 1.4s ease;
}
.ax .article-card:hover {
  /* transform: none cancels style.css's `translateY(-4px)` lift — the concept's
     cards do not move, they only light up. */
  transform: none;
  border-color: color-mix(in srgb, var(--ax-accent) 52%, transparent);
  background-color: var(--ax-panel-2);
  box-shadow: 0 44px 90px -52px var(--ax-accent), 0 0 0 1px color-mix(in srgb, var(--ax-accent) 18%, transparent) inset;
}
/* style.css also zooms the cover image 1.04 on hover. The concept has no image
   in the cover panel at all, so there is nothing to zoom. */
.ax .article-card:hover .article-card-image img { transform: none; }
.ax .article-card-image {
  /* aspect-ratio: auto cancels style.css's 3/2 ratio, which forced a 258px
     cover panel where the design specifies a 186px one — the single biggest
     reason the cards read as the wrong size. */
  position: relative; padding: 22px; min-height: 186px; aspect-ratio: auto;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(150deg, var(--ax-cover-1), var(--ax-cover-2) 70%);
  color: var(--ax-cover-ink); overflow: hidden;
}
.ax .article-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.ax .article-card-image .placeholder-icon { position: relative; align-self: flex-end; font-size: 30px; opacity: .35; }
.ax .article-card-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
/* margin: 0 — style.css adds a 1rem bottom margin that double-spaced the row
   against the body's own 12px gap. */
.ax .article-card-meta { margin: 0; font-size: 11.5px; color: var(--ax-dim); font-family: var(--ax-font-mono); display: flex; align-items: center; gap: 8px; }
.ax .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; display: inline-block; }
.ax .article-card-body h3 { margin: 0; font-family: var(--ax-font-display); font-size: 19px; line-height: 1.28; font-weight: 700; letter-spacing: -.02em; }
.ax .article-card-body p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--ax-muted); flex: 1; }
.ax .article-card-footer { justify-content: space-between; }
.ax .article-card-author { display: flex; align-items: center; gap: 8px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* The concept's only ≤560px rules are these two. The port also shrank the hero
   top padding and the stats padding here; both are removed so mobile keeps the
   designed rhythm (verified: still no horizontal overflow at 390 or 320). */
@media (max-width: 560px) {
  .ax .featured-article-image { min-height: 240px; padding: 26px; }
  .ax-footer-brand { grid-column: span 1; }
}

/* ── 6b. LEGACY SURFACE LAYER ────────────────────────────────────────────
   Re-skins the panels the ~90 legacy pages are built from, so adopting `.ax`
   changes how a tool page LOOKS without changing how it is LAID OUT.

   🔴 Deliberately restricted to background / border / radius / shadow. No
   padding, margin, display, grid or font properties — those are what the old
   layouts actually depend on, and touching them here would break 90 pages at
   once with no way to roll back. A component that needs more than a new
   surface gets its own pass and graduates to `.ax-page`. */
.ax .tool-card,
.ax .tool-hub-card,
.ax .h2h-card,
.ax .value-card,
.ax .donate-card,
.ax .use-case-box,
.ax .tool-section,
.ax .faq-item,
.ax .article-sidebar,
.ax .article-support-cta {
  background: var(--ax-panel);
  border: 1px solid var(--ax-line);
  border-radius: 20px;
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
  box-shadow: none;
  transition: border-color 1.4s var(--ax-ease), box-shadow 1.4s var(--ax-ease), background-color 1.4s ease;
}
.ax .tool-hub-card:hover,
.ax .h2h-card:hover,
.ax .value-card:hover {
  transform: none;                       /* legacy lifts these; the 2026 cards glow instead */
  border-color: color-mix(in srgb, var(--ax-accent) 52%, transparent);
  background-color: var(--ax-panel-2);
  box-shadow: 0 44px 90px -52px var(--ax-accent),
              0 0 0 1px color-mix(in srgb, var(--ax-accent) 18%, transparent) inset;
}
/* The shared image engine (31 of 42 tools) paints its own panels — same
   treatment, so a converter matches the rest of the site. */
.ax .it-panel,
.ax .it-sidebar,
.ax .it-pane,
.ax .it-drop-zone,
.ax .it-bulk-item,
.ax .it-ct,
.ax .it-related {
  background: var(--ax-panel);
  border-color: var(--ax-line);
  border-radius: 18px;
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
}
.ax .it-drop-zone:hover,
.ax .it-drag-active { border-color: var(--ax-accent); background: var(--ax-panel-2); }
.ax .it-sb-link--active { background: color-mix(in srgb, var(--ax-accent) 18%, transparent); color: var(--ax-text); }
.ax .it-ratio-btn,
.ax .it-select,
.ax .it-crop-field,
.ax .it-lock-btn { background: var(--ax-glass); border-color: var(--ax-glass-line); color: var(--ax-text); }

.ax .tool-result,
.ax .tool-input,
.ax .tool-textarea,
.ax .compare-summary-table {
  background: var(--ax-panel);
  border-color: var(--ax-line-2);
  border-radius: 14px;
}
.ax .tool-chip,
.ax .tool-link-pill,
.ax .category-tag,
.ax .tool-hub-badge,
.ax .compare-hero-badge {
  background: var(--ax-glass);
  border-color: var(--ax-glass-line);
  border-radius: 999px;
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
}
.ax .tool-chip:hover,
.ax .tool-link-pill:hover { border-color: var(--ax-accent); color: var(--ax-text); }
/* The old hero blocks paint their own dark slab over the ambient backdrop. */
.ax .tools-hero,
.ax .compare-hero,
.ax .about-hero,
.ax .donate-hero,
.ax .article-header { background: transparent; }

/* ── Full-bleed bands ─────────────────────────────────────────────────────
   The newsletter CTAs ("// Enjoyed this article?", "// Stay Sharp",
   "// Stay Connected") and "// What We Cover" all painted
   `var(--color-bg-elevated)` — a SOLID legacy slab (rgb(18,18,26)). Against
   the 2026 ambient backdrop that reads as a flat dead rectangle: it hides the
   grid, the glow and the tube field behind it, and its colour doesn't even
   match the new base. Give them the homepage's "// Stay informed" treatment —
   translucent, blurred, bordered in the new line colour — so the backdrop
   shows through and the band frames content instead of blanking it out.
   🔴 A full-bleed BAND may be translucent; a panel that FLOATS over content
   may not (see --ax-menu-bg). These are bands. */
.ax .newsletter-section,
.ax .ax-band {
  position: relative;
  background: var(--ax-bg-soft);
  border-top: 1px solid var(--ax-line);
  border-bottom: 1px solid var(--ax-line);
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
  overflow: hidden;
}
.ax .newsletter-section::before,
.ax .ax-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 100% at 50% 100%, color-mix(in srgb, var(--ax-accent) 18%, transparent), transparent 70%);
  opacity: var(--ax-glow);
}
/* keep the content above the wash */
.ax .newsletter-section > *,
.ax .ax-band > * { position: relative; z-index: 1; }

/* ── 6c. ARTICLE READER (blog/view.html) ─────────────────────────────────
   The reader is the one legacy page whose CONTENT is the product, so it gets a
   real typographic pass rather than just the surface layer. Still scoped to
   `.ax` and still layout-safe: the .article-layout grid, the sidebar column and
   the body wrapper keep their existing geometry. */
.ax .article-header { padding-top: clamp(28px, 4vw, 48px); }
.ax .article-header .category-label,
.ax .article-info .category-label {
  font-family: var(--ax-font-mono); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ax-accent-2);
}
.ax .article-header h1 {
  font-family: var(--ax-font-display); font-weight: 700;
  font-size: clamp(32px, 4.4vw, 58px); line-height: 1.06; letter-spacing: -.04em;
  color: var(--ax-text); text-wrap: balance; margin: 18px 0 0;
}
.ax .article-subtitle {
  margin: 20px 0 0; max-width: 68ch;
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--ax-muted); text-wrap: pretty;
}
.ax .article-info,
.ax .author-inline {
  font-family: var(--ax-font-mono); font-size: 12.5px; color: var(--ax-dim);
}
.ax .article-cover {
  border-radius: 26px; overflow: hidden;
  border: 1px solid var(--ax-line); box-shadow: var(--ax-shadow);
}

/* Prose. line-height stays generous here — this is the one place on a legacy
   page where the inherited 1.6 is too tight rather than too loose. */
.ax .article-body {
  font-size: 17px; line-height: 1.78; color: var(--ax-text); text-wrap: pretty;
}
.ax .article-body > * { max-width: 72ch; }
.ax .article-body h2 {
  font-family: var(--ax-font-display); font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -.03em;
  margin: 2.2em 0 .6em;
}
.ax .article-body h3 {
  font-family: var(--ax-font-display); font-weight: 700;
  font-size: clamp(19px, 1.8vw, 23px); line-height: 1.25; letter-spacing: -.02em;
  margin: 1.8em 0 .5em;
}
.ax .article-body p { margin: 0 0 1.15em; color: var(--ax-text); }
.ax .article-body li { margin-bottom: .5em; }
.ax .article-body a { color: var(--ax-accent-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ax .article-body a:hover { color: var(--ax-cyan); }
.ax .article-body strong { color: var(--ax-text); font-weight: 700; }
.ax .article-body blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--ax-accent);
  font-size: 1.06em; line-height: 1.6; color: var(--ax-muted); font-style: normal;
}
.ax .article-body code {
  font-family: var(--ax-font-mono); font-size: .88em;
  background: var(--ax-panel-2); border: 1px solid var(--ax-line);
  border-radius: 6px; padding: .12em .38em; color: var(--ax-cyan);
}
.ax .article-body pre {
  background: var(--ax-panel); border: 1px solid var(--ax-line);
  border-radius: 16px; padding: 20px; overflow-x: auto;
}
.ax .article-body pre code { background: none; border: 0; padding: 0; color: var(--ax-text); }
.ax .article-body img { border-radius: 18px; border: 1px solid var(--ax-line); }
.ax .article-body hr { border: 0; border-top: 1px solid var(--ax-line); margin: 2.4em 0; }

.ax .article-sidebar { align-self: start; }
.ax .article-tags a,
.ax .article-tags span,
.ax #articleShare a,
.ax #articleShare button {
  border-radius: 999px; border: 1px solid var(--ax-line-2);
  background: var(--ax-glass); color: var(--ax-muted);
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
  font-family: var(--ax-font-body); font-size: 13px; font-weight: 600;
}
.ax .article-tags a:hover,
.ax #articleShare a:hover,
.ax #articleShare button:hover { border-color: var(--ax-accent); color: var(--ax-text); }
/* 🔴 The reader ships its OWN reading-progress bar (`#readProgress`, fixed at
   `top: var(--header-height)`), and the 2026 chrome injects a site-wide one at
   `top: 0`. Both were drawing — two bars creeping across the page, one under
   the nav and one above it. The shared bar supersedes it, so hide the reader's
   rather than delete markup the page's own script still writes to. */
.ax #readProgress { display: none !important; }

/* ── 6d. TOOLS HUB (/tools/) ─────────────────────────────────────────────
   The second-most-visited page, and the entry point to the 42 tools. Carries
   `ax-page` — safe here because the hub is cards and chips with three <p> on
   the whole page, unlike the prose-heavy tool pages it links to.
   🔴 Its <h1> and lede used to carry inline style="" attributes, which beat any
   stylesheet. Those were stripped from all 12 copies first; do not reintroduce
   inline type on this page. */
.ax .tools-hero-hub { padding-top: clamp(26px, 4vw, 44px); }
.ax .tool-breadcrumb { font-family: var(--ax-font-mono); font-size: 12px; color: var(--ax-dim); }
.ax .tool-breadcrumb a { color: var(--ax-muted); }
.ax .tool-breadcrumb a:hover { color: var(--ax-accent-2); }
.ax .section-label {
  font-family: var(--ax-font-mono); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ax-accent-2); margin: 22px 0 0;
}
.ax .tools-hero-hub h1 {
  margin: 18px 0 0; font-family: var(--ax-font-display); font-weight: 700;
  font-size: clamp(34px, 5vw, 62px); line-height: 1.04; letter-spacing: -.045em;
  color: var(--ax-hero-fg); text-wrap: balance;
}
.ax .tool-hub-lede {
  margin: 20px 0 0; max-width: 560px;
  font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; color: var(--ax-hero-fg-2);
}

/* Card grid — the 2026 rhythm, matching the homepage platform grid. */
.ax .tools-grid {
  margin-top: clamp(34px, 4vw, 52px);
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.ax .tool-hub-card { padding: 26px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.ax .tool-hub-icon {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  border: 1px solid var(--ax-glass-line);
  background: color-mix(in srgb, var(--ax-accent) 14%, transparent);
  color: var(--ax-accent-2); font-family: var(--ax-font-mono); font-size: 19px;
  margin-bottom: 2px;
}
.ax .tool-hub-card:hover .tool-hub-icon {
  color: var(--ax-cyan);
  border-color: color-mix(in srgb, var(--ax-cyan) 45%, transparent);
}
.ax .tool-hub-name { font-family: var(--ax-font-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--ax-text); }
.ax .tool-hub-desc { font-size: 13.5px; line-height: 1.6; color: var(--ax-muted); flex: 1; }
.ax .tool-hub-badge {
  align-self: flex-start; padding: 5px 11px; font-family: var(--ax-font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ax-mint); background: color-mix(in srgb, var(--ax-mint) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ax-mint) 30%, transparent);
}

/* The all-tools chip index. */
.ax .tool-all-section { margin-top: clamp(48px, 6vw, 76px); }
.ax .tool-all-title {
  font-family: var(--ax-font-display); font-weight: 700;
  font-size: clamp(24px, 3vw, 38px); letter-spacing: -.035em; margin: 14px 0 0;
}
.ax .tool-all-intro { margin: 12px 0 0; max-width: 560px; font-size: 14.5px; line-height: 1.65; color: var(--ax-muted); }
.ax .tool-chip-group { margin-top: 30px; }
.ax .tool-chip-group-title {
  font-family: var(--ax-font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ax-text); margin-bottom: 12px;
}
.ax .tool-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ax .tool-chip { padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--ax-muted); }

.ax .tool-seo-content { margin-top: clamp(48px, 6vw, 76px); }
.ax .tool-seo-content h2 {
  font-family: var(--ax-font-display); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.03em; line-height: 1.2;
}
.ax .tool-seo-content p { font-size: 15.5px; line-height: 1.7; color: var(--ax-muted); max-width: 70ch; }

/* ── 6e. SHARED HUB LAYOUT (/compare/, /blog/, /glossary/) ───────────────
   All three shipped the same hero, expressed with inline style="" — a legacy
   fixed-header offset, a max-width wrapper and a coloured lede. Those are now
   .ax-hub / .ax-hub-head / .ax-hub-lede so the design can actually be written.
   🔴 The old `padding-top: calc(var(--header-height) + …)` existed because the
   legacy header was FIXED. The 2026 nav is sticky IN FLOW, so that offset was
   pure dead space at the top of every hub. */
.ax .ax-hub { padding-top: clamp(26px, 4vw, 44px); }
.ax .ax-hub-head { max-width: 640px; margin-bottom: clamp(30px, 4vw, 48px); }
.ax .ax-hub-head h1 {
  margin: 18px 0 0; font-family: var(--ax-font-display); font-weight: 700;
  font-size: clamp(34px, 5vw, 62px); line-height: 1.04; letter-spacing: -.045em;
  color: var(--ax-hero-fg); text-wrap: balance;
}
.ax .ax-hub-lede {
  margin: 20px 0 0; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65;
  color: var(--ax-hero-fg-2); text-wrap: pretty;
}

/* Category filter bars (blog + glossary) — the homepage pill treatment. */
.ax .categories-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.ax .category-tag {
  padding: 9px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ax-line); background: transparent; color: var(--ax-muted);
  font-family: inherit; font-size: 13px; font-weight: 700;
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
  transition: all .5s ease;
}
.ax .category-tag:hover { border-color: var(--ax-line-2); color: var(--ax-text); }
.ax .category-tag.active {
  border-color: var(--ax-accent); background: var(--ax-accent); color: var(--ax-on-accent);
}

/* Comparison cards — deliberately identical to the homepage .ax-vs cards, so
   the hub and the homepage read as the same component rather than cousins. */
.ax .compare-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.ax a.compare-card {
  display: block; padding: 28px; border-radius: 20px;
  border: 1px solid var(--ax-line); background: var(--ax-panel);
  backdrop-filter: var(--ax-blur); -webkit-backdrop-filter: var(--ax-blur);
  transition: border-color 1.4s var(--ax-ease), box-shadow 1.4s var(--ax-ease), background-color 1.4s ease;
}
.ax a.compare-card:hover {
  transform: none;
  color: var(--ax-text);
  border-color: color-mix(in srgb, var(--ax-accent) 70%, transparent);
  background-color: var(--ax-panel-2);
  box-shadow: 0 50px 100px -50px var(--ax-accent),
              0 0 60px -20px color-mix(in srgb, var(--ax-accent) 45%, transparent) inset,
              0 0 0 1px color-mix(in srgb, var(--ax-accent) 30%, transparent) inset;
}
.ax .compare-card-cat {
  font-family: var(--ax-font-mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ax-mint);
}
.ax .compare-vs { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 22px; }
.ax .compare-item-name { flex: 1; text-align: center; font-family: var(--ax-font-display); font-weight: 700; font-size: 22px; }
.ax .compare-vs-badge {
  padding: 5px 11px; border: 1px solid var(--ax-line-2); border-radius: 8px;
  background: transparent; font-family: var(--ax-font-mono); font-size: 11px; color: var(--ax-accent-2);
}
.ax .compare-card-desc { margin: 22px 0 0; font-size: 14px; line-height: 1.65; color: var(--ax-muted); }

/* ── 6f. ABOUT ───────────────────────────────────────────────────────────
   🔴 The only `ax-page` with real prose (19 paragraphs), so the body copy gets
   an explicit line-height. Without it `ax-page`'s `line-height: normal` would
   crush the one page on the site people actually read top to bottom. */
.ax .about-hero h1,
.ax .about-content h2,
.ax .about-values h2 {
  font-family: var(--ax-font-display); font-weight: 700; letter-spacing: -.04em;
}
.ax .about-hero h1 { font-size: clamp(34px, 5vw, 62px); line-height: 1.04; color: var(--ax-hero-fg); text-wrap: balance; }
/* 🔴 `:not(.section-label)` throughout — the eyebrow on this page is a <p>, so
   a plain `.ax .about-hero p` (0,2,1) outranks `.ax .section-label` (0,2,0) and
   silently turned the 12px mono kicker into 18px body copy. On any page where
   the eyebrow is a paragraph, prose selectors have to exclude it. */
.ax .about-hero p:not(.section-label),
.ax .about-text p:not(.section-label),
.ax .about-content p:not(.section-label),
.ax .about-values p:not(.section-label),
.ax .value-card p { font-size: 16px; line-height: 1.75; color: var(--ax-muted); }
.ax .about-hero p:not(.section-label),
.ax .about-text p:not(.section-label) { max-width: 70ch; }
.ax .about-hero p:not(.section-label) { font-size: clamp(15px,1.4vw,18px); color: var(--ax-hero-fg-2); }
/* The legacy gradient-text helper, re-pointed at the 2026 sheen. */
.ax .text-gradient {
  background: linear-gradient(100deg, var(--ax-cyan), var(--ax-accent-2) 55%, var(--ax-accent));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ax-sheen 9s linear infinite;
}
.ax .about-text h2, .ax .about-values h3 { font-family: var(--ax-font-display); font-weight: 700; letter-spacing: -.03em; }
.ax .value-card { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.ax .value-card h3 { font-family: var(--ax-font-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.ax .platform-card { padding: 26px; }
.ax .platform-icon {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  border: 1px solid var(--ax-glass-line);
}

/* ── 7. Shared chrome injected by other scripts ──────────────────────────
   js/language-switcher.js appends .lang-switcher into .nav, and the "Most
   read" section is revealed by js/main.js. Both are styled here so the
   injected markup matches the glass nav instead of the old design. */
/* Position comes from placeLangSwitcher() moving the node into .ax-nav-actions,
   not from an order hack — the 26px nav gap would have left it detached. */
.ax .lang-switcher { position: relative; }
.ax .lang-switcher-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--ax-glass-line); background: var(--ax-glass);
  color: var(--ax-muted); font-family: var(--ax-font-body);
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em; cursor: pointer;
  transition: border-color .35s ease, color .35s ease;
}
.ax .lang-switcher-btn:hover { border-color: var(--ax-accent); color: var(--ax-text); }
.ax .lang-switcher-menu {
  border-radius: 18px; border: 1px solid var(--ax-glass-line);
  background: var(--ax-menu-bg); color: var(--ax-text);   /* floats over content */
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.95);
  padding: 8px;
}
.ax .lang-switcher-menu a { color: var(--ax-muted); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; }
.ax .lang-switcher-menu a:hover { background: var(--ax-panel-2); color: var(--ax-text); }

/* The theme button is ours, but style.css also targets .theme-toggle. */
.ax .theme-toggle { width: 34px; height: 34px; padding: 0; }
.ax .theme-toggle svg { width: 15px; height: 15px; }

/* Scroll-to-top + skip link, restyled for the new surface. */
.ax .scroll-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ax-glass-line); background: var(--ax-nav-bg); color: var(--ax-text);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  font-size: 17px; line-height: 1; display: grid; place-items: center;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .35s ease, transform .35s var(--ax-ease), border-color .35s ease;
}
.ax .scroll-top.visible { opacity: 1; pointer-events: auto; transform: none; }
.ax .scroll-top:hover { border-color: var(--ax-accent); }
.ax .skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 20px; border-radius: 0 0 12px 0;
  background: var(--ax-accent); color: var(--ax-on-accent); font-weight: 700;
}
.ax .skip-link:focus { left: 0; color: var(--ax-on-accent); }
.ax .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;
}