/* /free-key and /premium, owner -fc. Built from the home page's parts; every frame is a user asset drawn with border-image
   (its plain middle stretched), never a CSS shape or gradient:
   - Section head: kit/home/guides/section_header_latest_news with the title live over it, chevron_triple_right on the link.
   - Tiles (providers, plan tiles): class_recon_card exactly as the home trending row draws it (kit/home/trending).
   - Steps: Cyber Eden ASSET-0003 notice window (NOTICE and the close box painted out), each with an ASSET-0017 progress bar
     (LOADING and 78% painted out; its own filled / empty segments repainted to 5, 11 and 16 of 16 for steps 1-3).
   - Rules, perks and the loader: ASSET-0012 status bar (text painted out). Warnings: ASSET-0016 (text painted out).
   - Best value tag: ASSET-0007 (home hero kit). Buttons: .ax-btn (site-apex.css) and the kit nav-11/12 striped buttons.
   Eden reds are shifted to the site red and their alpha haze (1-11) cleared, so the hover glow follows each shape.
   Hover is the shared spec from site-apex.css: glow, grow from the centre, and neighbours in a row pushed apart. */

.axa-page { padding-bottom: 14px; }
.ax-sec.axa { padding-block: 16px; }
.ax-sec.axa:first-child { padding-top: 28px; }
.axa h3, .axa p { margin: 0; }
.axa .ax-kicker { font-weight: 700; }

/* Section head (same sizes as the home trending and guides heads). */
.axa-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.axa-title { position: relative; container-type: inline-size; flex: 0 1 560px; min-width: 0; margin: 0; }
.axa-title img { display: block; width: 100%; height: auto; }
.axa-title span { position: absolute; left: calc(100cqw * 90 / 713); top: calc(100cqw * 14 / 713); color: #fff; font: 400 calc(100cqw * 40 / 713)/1 var(--ax-font-display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.axa-more { display: inline-flex; flex: none; align-items: center; gap: 8px; color: var(--ax-red-2); font: 700 16px/1 var(--ax-font-ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.axa-more img { width: auto; height: 14px; }
.axa-more:hover, .axa-more:focus-visible { color: #fff; }

/* Tiles: class_recon_card (236x211), drawn from slices at one source px --u, its plain row 100 stretched over --m and
   sheared along the 0.289 slant; the truncated top-right corner rebuilt from its own border (see home/trending.css).
   Four per row in the column (2 x 2 at <=900), neighbours sharing their slanted edge with a 2 px seam. */
.axa-band { --g: 2px; container-type: inline-size; display: flex; align-items: center; }
.axa-card { --h: calc(.259 * (100cqw - 7.2px) + 4px); --run: calc(.289 * var(--h)); --row: calc((100cqw - 3 * var(--g) - var(--run)) / 4);
  position: relative; container-type: size; flex: none; display: block; width: calc(var(--row) + var(--run)); height: var(--h); color: #fff; }
.axa-card + .axa-card { margin-left: calc(var(--g) - var(--run)); }
.axa-card > * { --u: calc((100cqw - .289 * 100cqh) / 195); --m: calc(100cqh - 211 * var(--u)); --s: calc(.289 * var(--m)); }
.axa-fx { position: absolute; inset: 0; }
.axa-fx i { position: absolute; width: calc(236 * var(--u)); }
.axa-fx .axa-ext { left: calc(var(--s) + 228 * var(--u)); top: calc(10 * var(--u)); width: calc(22.5 * var(--u)); height: calc(9 * var(--u)); border-image: url("kit/home/trending/class_recon_card.webp?v=2") 10 16 192 219 fill / 0; }
.axa-fx .axa-cap { left: calc(var(--s) + 224 * var(--u)); top: calc(10 * var(--u)); width: calc(12 * var(--u)); height: calc(91 * var(--u) + 1px); border-image: url("kit/home/trending/class_recon_card.webp?v=2") 101 0 109 224 fill / 0; transform: skewX(-16.12deg); transform-origin: 0 100%; }
.axa-top { left: var(--s); top: 0; height: calc(100 * var(--u)); background: url("kit/home/trending/class_recon_card.webp?v=2") 0 0 / calc(236 * var(--u)) calc(211 * var(--u)) no-repeat; }
.axa-mid { left: var(--s); top: calc(100 * var(--u) - 1px); height: calc(var(--m) + 2px); border-image: url("kit/home/trending/class_recon_card.webp?v=2") 100 0 110 0 fill / 0; transform: skewX(-16.12deg); transform-origin: 0 0; }
.axa-bot { left: 0; bottom: 0; height: calc(111 * var(--u)); background: url("kit/home/trending/class_recon_card.webp?v=2") 0 calc(-100 * var(--u)) / calc(236 * var(--u)) calc(211 * var(--u)) no-repeat; }
/* The art window (source 37..249 x 18..149 plus the stretch): the scene plate. */
.axa-art { position: absolute; left: calc(37 * var(--u)); top: calc(18 * var(--u)); width: calc(212 * var(--u) + var(--s)); height: calc(131 * var(--u) + var(--m)); overflow: hidden; clip-path: polygon(calc(37 * var(--u) + var(--s)) 0, 100% 0, calc(100% - 38 * var(--u) - var(--s)) 100%, 0 100%); }
.axa-art > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale var(--ax-art-t, .5s ease), rotate var(--ax-art-t, .5s ease); }
/* The picture zooms and turns on hover inside the art window (the clip is on .axa-art, so the window, frame and text stay put).
   The wide plan art runs 4% past the window top and bottom so its turned corners never show through. */
.axa-plan-tile .axa-art > img:first-child { inset: -4% 0; height: 108%; }
.axa-info { position: absolute; left: calc(44 * var(--u)); bottom: calc(7 * var(--u)); width: calc(130 * var(--u)); height: calc(51 * var(--u)); display: grid; align-content: center; gap: calc(4 * var(--u)); }
.axa-info strong { display: -webkit-box; overflow: hidden; color: #fff; font: 700 max(12px, calc(16 * var(--u)))/1.1 var(--ax-font-title, var(--ax-font-body)); letter-spacing: 0; text-transform: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.axa-info small { overflow: hidden; color: #cfcfd2; font: 700 max(9.5px, calc(10.5 * var(--u)))/1 var(--ax-font-ui); letter-spacing: 0; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

/* Steps: ASSET-0003 (367x242) at one source px --u (at most 1.15 px), its plain column 240 and row 120 stretched
   when the window is wider or its copy taller. "Step 01" sits where NOTICE was, before the window's own red slashes. */
.axa-steps { --n: 3; container-type: inline-size; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.axa-step { --u: min(1.15px, (100cqw - (var(--n) - 1) * 16px) / var(--n) / 367); position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; min-height: calc(242 * var(--u));
  padding: calc(84 * var(--u)) calc(36 * var(--u)) calc(38 * var(--u)); border: 0 solid transparent;
  border-image: url("kit/access/ASSET-0003.webp?v=1") 120 126 121 240 fill / calc(120 * var(--u)) calc(126 * var(--u)) calc(121 * var(--u)) calc(240 * var(--u)) stretch; }
.axa-step b { position: absolute; left: calc(88 * var(--u)); top: calc(31 * var(--u)); color: #fff; font: 700 calc(19 * var(--u))/1 var(--ax-font-ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.axa-step h3 { color: #fff; font: 400 24px/1.1 var(--ax-font-display); letter-spacing: .02em; text-transform: uppercase; }
.axa-step p { color: #d6d6da; font: 500 15px/1.5 var(--ax-font-body); }
/* ASSET-0017 (358x88): the label and percent sit where LOADING and 78% were. */
.axa-prog { position: relative; container-type: inline-size; display: block; width: min(100%, 300px); margin-top: auto; padding-top: 4px; }
.axa-prog img { display: block; width: 100%; height: auto; }
.axa-prog span, .axa-prog em { position: absolute; top: calc(4px + 100cqw * 29 / 358); color: #e6e6e9; font: 700 max(11px, calc(100cqw * 14 / 358))/1 var(--ax-font-ui); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.axa-prog span { left: calc(100cqw * 37 / 358); }
.axa-prog em { right: calc(100cqw * 34 / 358); }

/* Rules and perks: ASSET-0012 (392x138) at one source px --u (at most 1 px), its plain column 241 stretched to the column.
   Title and line sit where SYSTEM ONLINE / ALL SYSTEMS NOMINAL were, between the hex mark and the red slashes. */
.axa-rules { --n: 2; container-type: inline-size; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 16px; }
.axa-rules.axa-end { align-items: center; margin-top: 22px; }
.axa-rule { --u: min(1px, (100cqw - (var(--n) - 1) * 16px) / var(--n) / 392); display: flex; flex-direction: column; justify-content: center; gap: calc(6 * var(--u)); min-width: 0; height: calc(138 * var(--u));
  padding: calc(24 * var(--u)) calc(92 * var(--u)) calc(30 * var(--u)) calc(98 * var(--u)); border: 0 solid transparent;
  border-image: url("kit/access/ASSET-0012.webp?v=1") 0 150 0 241 fill / 0 calc(150 * var(--u)) 0 calc(241 * var(--u)) stretch; }
.axa-rule h3 { color: #fff; font: 700 max(13.5px, calc(17 * var(--u)))/1.05 var(--ax-font-ui); letter-spacing: 0; text-transform: uppercase; }
.axa-rule p { color: #b4b4bb; font: 600 max(11px, calc(12 * var(--u)))/1.25 var(--ax-font-body); letter-spacing: .01em; text-transform: uppercase; }
/* Warning: ASSET-0016 (430x100) in a grid cell at one source px --u (at most 1.38 px: as tall as a status bar), its plain column 300 stretched.
   The red title sits where MAINTENANCE was, over the hazard stripes, and the line in the strip under them. */
.axa-warn { --u: min(1.38px, (100cqw - (var(--n) - 1) * 16px) / var(--n) / 430); position: relative; min-width: 0; height: calc(100 * var(--u)); border: 0 solid transparent;
  border-image: url("kit/access/ASSET-0016.webp?v=1") 0 129 0 300 fill / 0 calc(129 * var(--u)) 0 calc(300 * var(--u)) stretch; }
.axa-warn h3 { position: absolute; left: calc(92 * var(--u)); top: calc(35 * var(--u)); color: var(--ax-red-2); font: 700 calc(17 * var(--u))/1 var(--ax-font-ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.axa-warn p { position: absolute; left: calc(92 * var(--u)); right: calc(40 * var(--u)); top: calc(68 * var(--u)); overflow: hidden; color: #c8c8ce; font: 600 max(9.5px, calc(10 * var(--u)))/1.1 var(--ax-font-body); letter-spacing: .03em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

/* Loader (free key) and closing call (premium). The code sits in an ASSET-0012 bar; Copy is the kit nav-11 button. */
.axa-loader { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: center; gap: 16px 32px; margin-top: 22px; }
.axa-loader-copy h3 { margin-top: 2px; color: #fff; font: 400 30px/1.05 var(--ax-font-display); letter-spacing: .02em; text-transform: uppercase; }
.axa-loader-copy > p:last-child { margin-top: 8px; color: #d6d6da; font: 500 16px/1.55 var(--ax-font-body); }
.axa .code-box { display: flex; align-items: center; gap: 14px; width: auto; min-width: 0; padding: 0; clip-path: none; background: none; box-shadow: none; }
.axa .code-box code { --u: .52px; flex: 1 1 0; display: block; min-width: 0; height: calc(138 * var(--u)); color: #e6e6e9; font: 500 14px/calc(138 * var(--u)) var(--mono);
  border: 0 solid transparent; border-width: 0 calc(96 * var(--u)) 0 calc(98 * var(--u));
  border-image: url("kit/access/ASSET-0012.webp?v=1") 0 150 0 241 fill / 0 calc(150 * var(--u)) 0 calc(241 * var(--u)) stretch; }
.axa .copy-btn { flex: none; height: 58px; aspect-ratio: 345 / 81; padding: 0 0 0 14%; border: 0; border-radius: 0; clip-path: none; background: url("kit/nav-11.webp") 0 0 / 100% 100% no-repeat; color: #fff; font: 700 19px/1 var(--ax-font-ui); letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.axa .copy-btn.is-copied { background-image: url("kit/nav-12.webp"); color: #fff; }
.axa-cta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; }

/* Striped kit buttons (nav-11 red, nav-12 dark). Stripes and chevron are part of the piece. */
.axa-stripe { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 58px; aspect-ratio: 345 / 81; padding: 0 54px 0 21px; background: url("kit/nav-11.webp") 0 0 / 100% 100% no-repeat; color: #fff; font: 700 18px/1 var(--ax-font-ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.axa-stripe-dark { aspect-ratio: 366 / 76; padding: 0 62px 0 21px; background-image: url("kit/nav-12.webp"); }

/* Plans: two wide class_recon_card tiles filling the column side by side (one per row at <=900), sharing their slanted edge
   with a 2 px seam like the home trending row, each 320 px tall showing the plan's
   scene, price on the tile's strip; the plan's copy, price and checkout under it.
   The frame keeps one source px per px of height (--u = height / 320); the extra width (--x) is its plain source column 136
   (top bar, divider, strip and bottom edge are all horizontal there) stretched, so every slice gets the same middle. */
.axa-plans { --g: 2px; container-type: inline-size; display: flex; align-items: stretch; }
.axa-plan { --h: 320px; --run: calc(.289 * var(--h)); --row: calc((100cqw - var(--g) - var(--run)) / 2);
  container-type: inline-size; flex: none; display: flex; flex-direction: column; gap: 20px; width: calc(var(--row) + var(--run)); min-width: 0; }
.axa-plan + .axa-plan { margin-left: calc(var(--g) - var(--run)); }
.axa-card.axa-plan-tile { --h: 320px; width: 100%; height: var(--h); }
.axa-plan-tile > * { --u: calc(100cqh / 320); --m: calc(100cqh - 211 * var(--u)); --s: calc(.289 * var(--m)); --x: calc(100cqw - .289 * 100cqh - 195 * var(--u)); }
.axa-plan-tile :is(.axa-top, .axa-mid, .axa-bot) { width: calc(236 * var(--u) + var(--x)); }
.axa-plan-tile .axa-fx .axa-ext { left: calc(var(--s) + 228 * var(--u) + var(--x)); }
.axa-plan-tile .axa-fx .axa-cap { left: calc(var(--s) + 224 * var(--u) + var(--x)); }
.axa-plan-tile .axa-top { background: none; border-image: url("kit/home/trending/class_recon_card.webp?v=2") 0 99 111 136 fill / 0 calc(99 * var(--u)) 0 calc(136 * var(--u)); }
.axa-plan-tile .axa-mid { border-image: url("kit/home/trending/class_recon_card.webp?v=2") 100 99 110 136 fill / 0 calc(99 * var(--u)) 0 calc(136 * var(--u)); }
.axa-plan-tile .axa-bot { background: none; border-image: url("kit/home/trending/class_recon_card.webp?v=2") 100 99 0 136 fill / 0 calc(99 * var(--u)) 0 calc(136 * var(--u)); }
.axa-plan-tile .axa-art { width: calc(212 * var(--u) + var(--s) + var(--x)); }
.axa-plan-tile .axa-info { width: calc(130 * var(--u) + var(--x)); }
.axa-plan-tile .axa-info strong { font-size: max(16px, calc(20 * var(--u))); }
.axa-plan-tile .axa-info small { font-size: max(11px, calc(12 * var(--u))); }
/* Both plans are the same height (the row stretches them; one per row at <=900 the rows are equal 1fr), and the buttons sit at
   the body's foot, so they line up in both cards whatever the copy, checklist or Best value tag above them. */
.axa-plan-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; padding-right: var(--run); }
.axa-plan-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; align-self: stretch; min-width: 0; }
/* Under a wide tile the copy and price take the left half, checks and checkout the right. */
@container (min-width: 650px) {
  .axa-plan-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 12px 28px; }
  .axa-plan-copy > * { grid-column: 1; justify-self: start; }
  .axa-plan-copy > .axa-checks { grid-column: 2; grid-row: 1 / 4; align-self: center; }
}
.axa-plan-body h3 { color: #fff; font: 400 34px/1 var(--ax-font-display); letter-spacing: .02em; text-transform: uppercase; }
/* ASSET-0007-wide (home hero kit: FEATURED painted out, plain middle pre-stretched) carries the Best value text in its dark plate. */
.axa-ribbon { display: inline-flex; align-items: center; height: 46px; aspect-ratio: 250 / 75; padding: 0 0 2px 15%; background: url("kit/home/hero/ASSET-0007-wide.webp") 0 0 / 100% 100% no-repeat; color: #fff; font: 700 15px/1 var(--ax-font-ui); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.axa-plan-sum { color: #d6d6da; font: 500 16px/1.5 var(--ax-font-body); }
.axa-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.axa-price strong { display: inline-flex; align-items: baseline; gap: 6px; color: #fff; font: 400 38px/1 var(--ax-font-display); }
.axa-price small { color: #a3a3aa; font: 700 15px/1 var(--ax-font-ui); letter-spacing: .08em; text-transform: uppercase; }
.axa-price > span { color: #8a8a92; font: 700 16px/1 var(--ax-font-ui); text-transform: uppercase; }
.axa-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.axa-checks li { display: flex; align-items: center; gap: 10px; color: #d6d6da; font: 500 15px/1.4 var(--ax-font-body); }
.axa-checks li::before { content: ""; flex: none; width: 14px; aspect-ratio: 116 / 96; background: url("kit/home/features/CE-0045_Chevron_Right_Red.webp?v=2") 0 0 / 100% 100% no-repeat; }
.axa-plan-actions { container-type: inline-size; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; align-self: stretch; margin-top: auto; padding-top: 4px; }
/* Plan buttons at the site's full button size (/games Load more: 77 px tall), all three arts at one size, 371 x 77: nav-12
   (dark Purchase) at its own ratio, and nav-06 (Checkout soon / Pay by card), nav-05 (Buy with Robux) and nav-11 (red Purchase)
   each with one plain middle stretched to that width (nav-06 col 154, nav-05 col 221, nav-11 cols 113-173, its grunge). --q is
   one px of the 371 px button, so on a narrower card they shrink as a whole. Labels stay centred on each art's plain panel. */
.axa-plan-actions > * { --q: min(1px, 100cqw / 371); font-weight: 700; flex: none; width: calc(371 * var(--q)); max-width: none; height: calc(77 * var(--q)); aspect-ratio: auto; font-size: calc(24 * var(--q)); }
.axa-plan-actions > .ax-btn { padding: 0 calc(96 * var(--q)) calc(2 * var(--q)) calc(51 * var(--q)); border: 0 solid transparent; background: none;
  border-image: url("kit/nav-06.webp") 0 202 0 154 fill / 0 calc(202 * 77 / 76 * var(--q)) 0 calc(154 * 77 / 76 * var(--q)) stretch; }
.axa-plan-actions > .ax-btn-red { border-image: url("kit/nav-05.webp") 0 139 0 221 fill / 0 calc(139 * var(--q)) 0 calc(221 * var(--q)) stretch; }
.axa-plan-actions > .axa-stripe-red { padding: 0 calc(71 * var(--q)) 0 calc(28 * var(--q)); border: 0 solid transparent; background: none; font-size: calc(23 * var(--q));
  border-image: url("kit/nav-11.webp") 0 172 0 113 fill / 0 calc(172 * 77 / 81 * var(--q)) 0 calc(113 * 77 / 81 * var(--q)) stretch; }
.axa-plan-actions > .axa-stripe-dark { padding: 0 calc(83 * var(--q)) 0 calc(27 * var(--q)); background-size: 100% 100%; font-size: calc(23 * var(--q)); }
.axa-btn-off { color: #9a9aa2; cursor: default; }

/* Shared hover (site-apex.css tokens) on every piece with art: it grows from its centre (never moves up), glows (a drop-shadow of its own painted
   pixels, so the glow follows the tile's slanted frame, the striped buttons and the link glyphs), its row neighbours move apart,
   and any picture inside (tile scenes, chevrons) zooms and turns by --ax-art-zoom / --ax-art-turn in its fixed window.
   Not gated on prefers-reduced-motion: the site's user browses with Windows "Animation effects" off, which alone matches that
   query, and wants the hover motion (as with the ambient loops in site-motion.css). */
a.axa-card, .axa-plan-tile, .axa-plan, .axa-more, .axa-stripe, .axa .copy-btn { transition: var(--ax-hover-t, filter .2s, transform .2s var(--ease), scale .2s var(--ease), translate .25s var(--ease)), color .2s; }
:is(a.axa-card, .axa-plan-tile, .axa-more, a.axa-stripe, .axa .copy-btn):is(:hover, :focus-visible) { z-index: 1; filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); scale: var(--ax-hover-scale, 1.06); }
.axa-btn-off:hover { filter: none; transform: none; scale: none; }
/* No white focus box or tap flash on the art (site-polish.css draws a 2px white :focus-visible outline site-wide): keyboard focus
   gets the same art-following red glow as hover instead. */
.axa :is(a, button) { -webkit-tap-highlight-color: transparent; }
.axa :is(a, button):is(:focus, :focus-visible) { outline: none; }
.axa .code-box > code { transition: translate .25s var(--ease); }
.axa-band > a.axa-card:is(:hover, :focus-visible) ~ .axa-card:not(.reveal-wait), .axa-plan-actions > :is(a:hover, a:focus-visible) ~ *, .axa-cta-actions > :is(:hover, :focus-visible) ~ * { translate: var(--ax-hover-push, 14px) 0; }
.axa-band > .axa-card:not(.reveal-wait):has(~ a.axa-card:is(:hover, :focus-visible)), .axa-plan-actions > :has(~ :is(a:hover, a:focus-visible)), .axa-cta-actions > :has(~ :is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push, 14px)) 0; }
.axa .code-box > code:has(~ .copy-btn:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push, 14px)) 0; }
/* Side by side, a hovered plan card pushes the other plan away. */
.axa-plan:has(> .axa-plan-tile:hover) { position: relative; z-index: 1; }
@media (min-width: 901px) {
  .axa-plan:has(> .axa-plan-tile:hover) ~ .axa-plan:not(.reveal-wait) { translate: var(--ax-hover-push, 14px) 0; }
  .axa-plan:not(.reveal-wait):has(~ .axa-plan > .axa-plan-tile:hover) { translate: calc(-1 * var(--ax-hover-push, 14px)) 0; }
}
.axa-more img { transition: scale var(--ax-art-t, .5s ease), rotate var(--ax-art-t, .5s ease), translate .2s var(--ease); }
.axa-more:is(:hover, :focus-visible) img { translate: 3px 0; scale: var(--ax-art-zoom, 1.1); rotate: var(--ax-art-turn, -3deg); }
:is(a.axa-card:is(:hover, :focus-visible), .axa-plan-tile:hover) .axa-art > img:first-child { scale: var(--ax-art-zoom, 1.1); rotate: var(--ax-art-turn, -3deg); }

@media (max-width: 1100px) {
  .axa-loader { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  /* Two tiles per row, at the home trending row's two-column height. */
  .axa-band { flex-wrap: wrap; row-gap: 10px; }
  .axa-band .axa-card { --h: calc(.75 * (100cqw - 16px) / 2 + 98px); --row: calc((100cqw - .5px - var(--g) - var(--run)) / 2); }
  .axa-band .axa-card:nth-child(odd) { margin-left: 0; }
  .axa-steps, .axa-rules { --n: 1; }
  .axa-plans { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; row-gap: 28px; }
  .axa-plan { width: 100cqw; }
  .axa-plan + .axa-plan { margin-left: 0; }
  .axa-plan-body { padding-right: 0; }
  .axa-cta-actions { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .axa-band .axa-card { --h: calc(.632 * (100cqw - 10px) / 2 + 119px); }
  .axa-info { gap: 2px; }
  .axa-info strong { -webkit-line-clamp: 1; }
  .axa-rule { gap: 4px; padding-top: calc(20 * var(--u)); }
  .axa-rule h3 { font-size: 15px; line-height: 1; }
  .axa-rule p { font-size: 11px; line-height: 1.2; }
}
@media (max-width: 640px) {
  .axa-head { flex-wrap: wrap; gap: 10px; }
  .axa-title { flex-basis: 100%; }
}
@media (max-width: 560px) {
  .axa .code-box { flex-wrap: wrap; }
  .axa .code-box code { flex: 1 1 100%; font-size: 13px; }
  .axa-cta-actions { flex-wrap: wrap; }
  .axa-loader-copy h3 { font-size: 26px; }
}