/* ============================================================
   Apex Trader Funding review — page styles.

   PART 1 mirrors the homepage shell (tokens, bar, buttons) character
   for character from index.html, so the two pages cannot drift apart
   visually. If a shell rule changes there, change it here. Nothing in
   PART 1 is new work. The footer is NOT here: build-apex.py lifts its
   rules straight out of index.html, because the copy that used to live
   here had already drifted away from the homepage.

   PART 2 is the page itself. It keeps the homepage's three planes:
   the background makes the atmosphere, the surfaces hold the
   information, gold marks a selection or an action.

   On relief, measured rather than asserted: index.html spends drop
   shadows on 16 distinct carriers (its bar, cards, docks, dialogs,
   stage surfaces, code buttons, even a sticky table header). This
   page spends them on 8 — the hero mark via gradients, the account
   cards, the comparison, the drawdown panels, the two table wrappers,
   the closing block, the search box and its result popover. Staying
   under the homepage is the point; a flatter page would read as a
   different site. Gold stays a ring on the severity badges and is
   never used as elevation.
   ============================================================ */

/* ============================================================
   PART 1 — shell, mirrored from index.html
   ============================================================ */

:root{
  --bg:#171C27;
  --lift:#2A3244;
  --bone:#EDE8DF;
  --bone-dim:rgba(237,232,223,.55);
  --tile:#232A3A;
  --gold:#FCAF00;
  --rule:rgba(237,232,223,.1);
  --rule-up:rgba(237,232,223,.22);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--bone);
  font:400 16px/1.5 Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  /* The one rule that keeps a long editorial page honest at 360px. */
  overflow-x:hidden;
}

body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(118% 88% at 50% 44%,var(--lift) 0%,transparent 62%);
}

/* ---------- menu bar ------------------------------------------------ */

.bar{
  position:fixed;top:14px;left:0;right:0;z-index:40;
  display:flex;justify-content:center;
  padding:0 16px;pointer-events:none;
}
.bar__shell{
  position:relative;pointer-events:auto;
  display:flex;align-items:center;gap:8px;
  width:min(1120px,100%);
  height:56px;padding:6px 6px 6px 10px;
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(237,232,223,.055) 0%,rgba(237,232,223,0) 46%),
    rgba(20,25,35,.62);
  backdrop-filter:saturate(180%) blur(30px);
  -webkit-backdrop-filter:saturate(180%) blur(30px);
  border:1px solid rgba(237,232,223,.07);
  box-shadow:
    0 18px 40px -16px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,253,247,.09);
  font-size:13.5px;letter-spacing:.005em;
}

.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;
  text-decoration:none;color:var(--bone);padding:4px 8px 4px 4px;border-radius:999px;
  transition:opacity .16s}
.brand:hover{opacity:.84}
.brand:focus-visible{outline:2px solid rgba(237,232,223,.5);outline-offset:2px}
.brand__slot{width:30px;height:30px;flex:0 0 auto;display:block}
.brand__slot img{width:100%;height:100%;object-fit:contain;display:block}
.brand__name{font-weight:900;letter-spacing:-.012em;white-space:nowrap;font-size:15px}

.bar__nav{position:relative;display:flex;align-items:center;gap:0;
  margin:0 auto;min-width:0}
.bar__nav a{
  position:relative;z-index:1;
  display:flex;align-items:center;height:36px;
  white-space:nowrap;text-decoration:none;
  padding:0 13px;border-radius:999px;
  color:rgba(237,232,223,.74);transition:color .16s}
.bar__nav a:hover{color:#FFFFFF}
.bar__nav a:focus-visible{outline:2px solid rgba(237,232,223,.5);outline-offset:-2px;
  color:#FFFFFF}
/* Before the pill is measured, and on touch where it never follows a finger,
   the current page carries the highlight itself — the bar is never left
   without an answer to "where am I". Mirrors index.html exactly. */
.bar__nav:not(.has-pill) a[aria-current="page"]{
  background:rgba(237,232,223,.09)}
.bar__pill{
  position:absolute;top:50%;left:0;height:36px;width:0;
  margin-top:-18px;border-radius:999px;pointer-events:none;opacity:0;
  background:rgba(237,232,223,.11);
  transition:transform .26s cubic-bezier(.32,.72,0,1),
             width .26s cubic-bezier(.32,.72,0,1),
             opacity .16s}
.bar__nav.has-pill .bar__pill{opacity:1}

.bar__sep{width:1px;height:20px;flex:0 0 auto;margin:0 7px;
  background:linear-gradient(180deg,transparent,rgba(237,232,223,.13),transparent)}

.search{flex:0 0 auto;display:flex;align-items:center;gap:8px;
  height:38px;width:182px;padding:0 14px;border-radius:999px;
  background:rgba(8,11,17,.38);border:1px solid rgba(237,232,223,.08);
  transition:width .2s cubic-bezier(.2,.8,.2,1),background-color .16s}
.search:hover{background:rgba(8,11,17,.46)}
.search:focus-within{width:258px;background:rgba(8,11,17,.58);
  border-color:rgba(237,232,223,.2)}
.search svg{width:14px;height:14px;flex:0 0 auto;stroke:rgba(237,232,223,.74);
  fill:none;stroke-width:1.6;stroke-linecap:round}
.search:focus-within svg{stroke:var(--bone)}
.search input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  color:var(--bone);font:inherit;font-size:13px}
.search input::placeholder{color:var(--bone-dim)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* ---------- buttons ---------- */

.btn{display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding:0 20px;border-radius:9px;
  font-size:15px;line-height:1;text-decoration:none;white-space:nowrap;
  font-variation-settings:"wdth" 98,"wght" 700;
  transition:background-color .14s,border-color .14s,color .14s}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn--gold{background:var(--gold);color:#171C27;border:1px solid var(--gold)}
.btn--gold:hover{background:#FFBE2E;border-color:#FFBE2E}
.btn--gold:focus-visible{outline-color:#FFFFFF}
.btn--ghost{background:transparent;color:#FFFFFF;
  border:1px solid rgba(237,232,223,.26)}
.btn--ghost:hover{border-color:rgba(237,232,223,.58);
  background:rgba(237,232,223,.055)}

/* ---------- footer ---------- */

/* The footer's rules are lifted out of index.html by build-apex.py and
   inlined in the page, so there is exactly one copy of them. They used to
   be transcribed here and had already drifted. Do not restate them. */


/* ============================================================
   PART 2 — the review page
   ============================================================ */

.ax{
  /* Surfaces. One face, one recess, one hover; nothing else. */
  --ax-surface:#131A27;
  --ax-recess:#0E1420;
  --ax-hover:#19212F;
  --ax-edge:rgba(237,232,223,.1);
  --ax-line:rgba(237,232,223,.065);
  /* Champagne, the quiet gold. It labels; --gold acts. */
  --ax-champagne:#F0CE80;
  --ax-dim:#8D9BB1;
  /* Apex's own blue, read off their mark. Used on their logo and on
     nothing else, so the page never borrows a second brand colour. */
  --ax-blue:#1B2BFA;
  /* Every anchor clears the floating bar by this much. */
  --ax-stick:118px;

  /* Spacing. One scale, eight steps, nothing between them. Every margin,
     padding and gap on this page resolves to one of these. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s6:24px; --s8:32px; --s12:48px; --s16:64px;

  /* Type. One ramp; comparable labels share a step rather than being
     nudged by a half pixel each time a column felt tight. */
  --t-micro:11px;    /* uppercase eyebrows and pill labels */
  --t-small:12.5px;  /* secondary lines under a value */
  --t-body:14px;     /* criteria keys, buttons, table cells */
  --t-value:15px;    /* criteria values */
  --t-sub:17px;      /* combined cost */
  --t-price:25px;    /* the entry price */

  /* The width one card needs before four of them stop being readable.
     The 4-up / 2-col thresholds below are derived from this, not chosen. */
  --ax-card-min:250px;
}

.ax{position:relative;z-index:1;color:var(--bone)}
.ax-shell{width:min(1240px,calc(100% - clamp(28px,5vw,80px)));margin-inline:auto}
.ax button,.ax input,.ax select{font:inherit}
.ax :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.ax-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Tabular figures everywhere a number is compared with another number. */
.ax-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- section scaffolding ---------- */

.ax-sec{padding:clamp(52px,6vw,96px) 0 0;scroll-margin-top:var(--ax-stick)}
/* Search results deep-link to single rows and cards, not only to sections;
   without this they land underneath the sticky header. */
[id^="ax-faq-"],[id^="ax-fee-"],[id^="ax-rule-"],
[id^="ax-cf-"],[id^="ax-uv-"],#axWarn{scroll-margin-top:var(--ax-stick)}
.ax-sec:last-of-type{padding-bottom:clamp(40px,5vw,72px)}
/* One header shape for every section: title, then intro, then the module.
   The kickers are gone — each one restated its own title in smaller caps. */
.ax-head{max-width:none;margin-bottom:var(--s8)}
.ax-head--wide{max-width:none}
.ax-h2{margin:0;color:#FFFFFF;text-wrap:balance;
  font-variation-settings:"wdth" 88,"wght" 800;
  font-size:clamp(27px,3.1vw,42px);line-height:1.1;letter-spacing:-.021em}
.ax-lede{margin:var(--s3) 0 0;max-width:none;text-wrap:wrap;
  color:rgba(237,232,223,.76);
  font-size:clamp(15px,1.15vw,16.5px);line-height:1.62}
.ax-h3{margin:0;color:#FFFFFF;
  font-variation-settings:"wdth" 94,"wght" 700;
  font-size:clamp(17px,1.45vw,20px);line-height:1.25;letter-spacing:-.012em}
.ax-note{margin:0;color:rgba(237,232,223,.58);
  font-size:var(--t-body);line-height:1.55}

/* ---------- hero ---------- */

/* Compact by construction: the mark is capped, the title is set from the
   width rather than from the viewport height, and the whole block is
   measured so the accounts module starts inside the first scroll on a
   900px-tall laptop. */
.ax-hero{position:relative;z-index:1;
  padding:clamp(84px,9vh,106px) 0 clamp(14px,1.8vw,24px);
  text-align:center}
.ax-hero__lock{position:relative;display:inline-block;max-width:100%}

/* The mark. Depth is built from layers, never from a filter on the artwork
   itself: a dark plinth behind it, a soft pool of light under it, and the
   logo untouched on top. Nothing is recoloured, squeezed or cropped. */
.ax-mark{position:relative;display:block;margin:0 auto;
  width:clamp(118px,15vw,186px);aspect-ratio:760/378}
.ax-mark::before{
  content:"";position:absolute;z-index:0;
  left:-16%;right:-16%;top:-26%;bottom:-34%;
  background:radial-gradient(58% 54% at 50% 46%,
    rgba(80,110,255,.17) 0%,rgba(40,60,180,.07) 42%,transparent 72%);
  filter:blur(2px)}
.ax-mark::after{
  content:"";position:absolute;z-index:0;
  left:14%;right:14%;bottom:-11%;height:16px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.52),transparent 72%)}
.ax-mark img{position:relative;z-index:1;
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 12px 26px rgba(4,8,22,.62))}

/* The title sits under the mark and rises into it. The overlap is set in em
   so it holds at every size, and it is small enough that no letter is ever
   obscured: the mark clears the cap line, it does not cross it. */
.ax-hero__h1{position:relative;z-index:2;
  margin:-.15em 0 0;color:#FFFFFF;white-space:nowrap;
  font-variation-settings:"wdth" 76,"wght" 900;
  font-size:clamp(34px,5.8vw,76px);line-height:.98;letter-spacing:-.025em}
.ax-hero__h1 em{font-style:normal;display:inline}

.ax-hero__sub{margin:var(--s4) auto 0;max-width:none;
  color:rgba(237,232,223,.78);text-wrap:wrap;
  font-size:clamp(15px,1.2vw,17.5px);line-height:1.55}

/* The page's one public date. A label, not a badge: it should read as a
   fact about the article, not as a claim competing with the headline. */
.ax-stamp{margin:var(--s3) 0 0;color:rgba(237,232,223,.5);
  font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 650}
.ax-stamp time{color:var(--ax-champagne)}

/* ---------- hero search ---------- */

/* Elegant but subordinate: it is a 44px field on a 520px measure under a
   86px title, so it reads as a tool under the headline rather than a second
   headline. */
.ax-find{position:relative;z-index:30;
  margin:clamp(15px,1.7vw,21px) auto 0;width:min(520px,100%);text-align:left}
.ax-find__box{position:relative;display:flex;align-items:center;gap:10px;
  height:50px;padding:0 10px 0 16px;border-radius:12px;
  background:
    linear-gradient(180deg,rgba(237,232,223,.05) 0%,rgba(237,232,223,0) 60%),
    rgba(14,20,32,.86);
  border:1px solid var(--ax-edge);
  box-shadow:0 2px 5px -2px rgba(4,7,12,.6),0 18px 34px -24px rgba(4,7,12,.9),
             inset 0 1px 0 rgba(255,253,247,.07);
  transition:border-color .16s,box-shadow .16s}
.ax-find__box:focus-within{border-color:rgba(240,206,128,.42);
  box-shadow:0 2px 5px -2px rgba(4,7,12,.6),0 18px 34px -24px rgba(4,7,12,.9),
             inset 0 1px 0 rgba(255,253,247,.07),0 0 0 3px rgba(252,175,0,.15)}
.ax-find__box svg{width:16px;height:16px;flex:0 0 auto;
  stroke:rgba(237,232,223,.6);fill:none;stroke-width:1.7;stroke-linecap:round}
.ax-find__box input{flex:1;min-width:0;background:none;border:0;outline:none;
  color:var(--bone);font-size:15px;height:100%}
.ax-find__box input::placeholder{color:rgba(237,232,223,.45)}
.ax-find__box input::-webkit-search-cancel-button{-webkit-appearance:none}
.ax-find__clear{display:none;align-items:center;justify-content:center;
  width:34px;height:34px;flex:0 0 auto;border:0;border-radius:8px;
  background:rgba(237,232,223,.07);color:rgba(237,232,223,.72);
  cursor:pointer;font-size:15px;line-height:1}
.ax-find__clear:hover{background:rgba(237,232,223,.13);color:#FFFFFF}
.ax-find.is-filled .ax-find__clear{display:flex}

.ax-find__hint{margin:9px 2px 0;display:flex;flex-wrap:wrap;gap:7px;
  align-items:center;font-size:12px;color:rgba(237,232,223,.45)}
.ax-find__hint b{font-variation-settings:"wdth" 100,"wght" 600;
  color:rgba(237,232,223,.55);font-size:11px;letter-spacing:.04em}
.ax-chip{appearance:none;border:1px solid var(--ax-edge);border-radius:999px;
  background:rgba(237,232,223,.035);color:rgba(237,232,223,.72);
  font-size:11.5px;padding:5px 11px;cursor:pointer;
  transition:border-color .14s,color .14s,background-color .14s}
.ax-chip:hover{border-color:rgba(240,206,128,.4);color:#FFFFFF;
  background:rgba(240,206,128,.07)}

/* results */
.ax-find__out{position:absolute;left:0;right:0;top:calc(100% + 9px);z-index:40;
  border-radius:14px;overflow:hidden;display:none;
  background:
    linear-gradient(180deg,rgba(237,232,223,.045) 0%,rgba(237,232,223,0) 90px),
    #101724;
  border:1px solid var(--ax-edge);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.76),
             inset 0 1px 0 rgba(255,253,247,.08)}
.ax-find.is-open .ax-find__out{display:block}
.ax-find__list{list-style:none;margin:0;padding:6px;
  max-height:min(52vh,420px);overflow-y:auto;overscroll-behavior:contain}
.ax-res{display:block;text-decoration:none;color:inherit;
  padding:10px 12px;border-radius:9px;cursor:pointer;
  border:1px solid transparent}
.ax-res:hover,.ax-res.is-active{background:rgba(237,232,223,.055);
  border-color:rgba(237,232,223,.08)}
.ax-res__top{display:flex;align-items:baseline;gap:10px;justify-content:space-between}
.ax-res__t{color:#FFFFFF;font-size:14.5px;line-height:1.3;
  font-variation-settings:"wdth" 96,"wght" 650}
.ax-res__cat{flex:0 0 auto;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ax-champagne);
  font-variation-settings:"wdth" 100,"wght" 700}
.ax-res__s{margin:3px 0 0;font-size:12.5px;line-height:1.45;
  color:rgba(237,232,223,.6);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.ax-res mark{background:rgba(252,175,0,.2);color:#FFFFFF;border-radius:2px;
  padding:0 1px}
.ax-find__empty{padding:18px 16px;color:rgba(237,232,223,.6);font-size:13.5px}
.ax-find__empty b{display:block;color:#FFFFFF;margin-bottom:4px;
  font-variation-settings:"wdth" 96,"wght" 650}
.ax-find__foot{padding:8px 14px;border-top:1px solid var(--ax-line);
  font-size:11.5px;color:rgba(237,232,223,.42);
  display:flex;justify-content:space-between;gap:12px}

/* the soft highlight a deep link leaves behind */
@keyframes ax-ping{
  0%{box-shadow:0 0 0 0 rgba(252,175,0,0)}
  18%{box-shadow:0 0 0 3px rgba(252,175,0,.42)}
  100%{box-shadow:0 0 0 3px rgba(252,175,0,0)}
}
.ax-ping{animation:ax-ping 1.5s ease-out;border-radius:12px}

/* ---------- section nav ---------- */

.ax-nav{position:sticky;top:78px;z-index:35;
  margin-top:clamp(18px,2.2vw,26px)}
.ax-nav .ax-shell{display:flex;justify-content:center}
.ax-nav__in{display:flex;align-items:center;gap:4px;max-width:100%;
  padding:4px;border-radius:999px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  background:
    linear-gradient(180deg,rgba(237,232,223,.05) 0%,rgba(237,232,223,0) 46%),
    rgba(14,19,30,.97);
  backdrop-filter:saturate(170%) blur(22px);
  -webkit-backdrop-filter:saturate(170%) blur(22px);
  border:1px solid rgba(237,232,223,.07);
  box-shadow:0 16px 36px -20px rgba(0,0,0,.66),
             inset 0 1px 0 rgba(255,253,247,.07)}
.ax-nav__in::-webkit-scrollbar{display:none}
.ax-nav a{flex:0 0 auto;display:inline-flex;align-items:center;
  height:36px;padding:0 14px;border-radius:999px;
  text-decoration:none;white-space:nowrap;font-size:13.5px;
  color:rgba(237,232,223,.7);
  transition:color .16s,background-color .16s}
.ax-nav a:hover{color:#FFFFFF;background:rgba(237,232,223,.05)}
.ax-nav a[aria-current="true"]{color:#171C27;background:var(--ax-champagne);
  font-variation-settings:"wdth" 100,"wght" 650}

/* ---------- the account module ---------- */

/* One configuration bar, and it has to read as simpler than the cards it
   drives. So: one surface, no inner track around the size buttons, no
   gradient, no inset highlight. Three groups on one baseline, each group a
   label over a control of the same 44px height. */
.ax-ctl{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);
  align-items:end;margin-bottom:var(--s6);padding:var(--s4);
  border-radius:14px;
  background:var(--ax-surface);border:1px solid var(--ax-edge)}
.ax-ctl__g{display:flex;flex-direction:column;gap:var(--s2);min-width:0;
  flex:1 1 220px}
.ax-ctl__g--size{flex:1 1 320px}
.ax-ctl__l{font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:rgba(237,232,223,.52);
  font-variation-settings:"wdth" 100,"wght" 650}

/* Four sizes, four buttons of exactly the same width: a grid of equal
   fractions, never intrinsic widths, so 25K and 150K are the same target
   and the selected one does not resize the row. */
.ax-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s2);max-width:100%}
.ax-seg button{appearance:none;min-width:0;cursor:pointer;
  border:1px solid var(--ax-edge);background:var(--ax-recess);
  color:rgba(237,232,223,.74);
  height:56px;padding:0 var(--s2);border-radius:8px;
  font-size:var(--t-body);font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .16s,color .16s,border-color .16s}
.ax-seg button:hover{color:#FFFFFF;background:var(--ax-hover)}
.ax-seg button[aria-pressed="true"]{
  color:#171C27;background:var(--ax-champagne);border-color:var(--ax-champagne);
  font-variation-settings:"wdth" 100,"wght" 650}
.ax-seg button small{font-size:var(--t-micro);opacity:.72;
  font-variation-settings:"wdth" 100,"wght" 500}

/* the two switches */
.ax-sw{display:flex;align-items:center;gap:var(--s3);min-height:56px;height:auto;box-sizing:border-box;
  padding:8px var(--s3);border-radius:8px;cursor:pointer;
  background:var(--ax-recess);border:1px solid var(--ax-edge);
  color:rgba(237,232,223,.78);font-size:var(--t-body);
  transition:border-color .16s,color .16s}
.ax-sw:hover{border-color:rgba(240,206,128,.34);color:#FFFFFF}
.ax-sw input{position:absolute;opacity:0;width:0;height:0}
.ax-sw__t{position:relative;width:36px;height:20px;flex:0 0 auto;
  border-radius:999px;background:rgba(237,232,223,.14);
  transition:background-color .18s}
.ax-sw__t::after{content:"";position:absolute;top:3px;left:3px;
  width:14px;height:14px;border-radius:50%;background:#FFFFFF;
  box-shadow:0 1px 3px rgba(0,0,0,.45);
  transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.ax-sw input:checked + .ax-sw__t{background:var(--gold)}
.ax-sw input:checked + .ax-sw__t::after{transform:translateX(16px)}
.ax-sw input:focus-visible + .ax-sw__t{outline:2px solid var(--gold);
  outline-offset:3px}
.ax-sw__x{display:flex;flex-direction:column;gap:1px;line-height:1.25;
  min-width:0}
.ax-sw__x small{font-size:var(--t-small);color:rgba(237,232,223,.5)}

/* The coupon is the one control that changes every figure on the page, so
   its zone reads apart from the neutral chrome: a champagne label, a
   champagne edge, and the code named once, right under the state. */
.ax-ctl__g--coupon .ax-ctl__l{color:var(--ax-champagne)}
.ax-ctl__g--coupon .ax-sw{border-color:rgba(240,206,128,.3)}
.ax-ctl__g--coupon .ax-sw:hover{border-color:rgba(240,206,128,.52)}
.ax-ctl__g--coupon .ax-sw__x small{color:rgba(240,206,128,.72)}

/* Stage label: which step of the journey these cards describe. A line, not
   a panel, so there is no frame between the control bar and the cards. */
.ax-stage{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  margin:0 0 var(--s4);color:rgba(237,232,223,.66);
  font-size:var(--t-small);line-height:1.5}
.ax-stage b{color:#FFFFFF;font-variation-settings:"wdth" 96,"wght" 650;
  font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  padding:3px var(--s2);border-radius:5px;background:rgba(80,110,255,.24)}

/* --- the catalogue --- */

/* Four offers, one grid. Every zone of a card is a row of that grid and
   every card is a subgrid of it, so "entry price" or "Daily loss limit"
   is the same horizontal band in all four cards. When one value needs a
   second line, its band grows in all four at once and nothing below it
   drifts out of register. No card carries a corrective margin, no zone is
   positioned absolutely to patch an edge, and nothing is pushed into line
   with margin-top:auto.

   Row map, in the order the reader needs:
     1   badge slot   — always present, so a badge never moves a price
     2   identity
     3   entry price
     4   reference price and frequency
     5   activation fee
     6   combined cost
     7   primary action
     8   face title
     9..13   five bands: the criteria in front, the rules behind
     14  face foot
     15  access to the rules

   Rows 8 to 14 are claimed by both faces of the card at once. They overlap,
   so those tracks are sized on whichever face is taller and the other one
   sits inside that height: turning a card over cannot change a single
   dimension on the page. The hidden face carries visibility:hidden, which
   also takes it out of the keyboard path, out of the accessibility tree and
   out of hit testing — there is no bleed-through and no mirrored text.

   Four across while a card still holds its criteria on one line; then the
   Intraday pair over the EOD pair as two bands of the same fourteen rows;
   then one column, where there is no row to share and the subgrid is off.
   Both thresholds come from --ax-card-min, not from a device width. */

.ax-cards{
  --ax-rows:auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:var(--ax-rows);
  column-gap:var(--s4);
  row-gap:0;
  align-items:stretch}

.ax-card{position:relative;min-width:0;
  grid-row:1 / -1;
  display:grid;grid-template-rows:subgrid;
  /* One column, and every zone named into it. Without this the two faces,
     which claim the same rows, are pushed into an implicit second column
     and each ends up half as wide as the card. */
  grid-template-columns:minmax(0,1fr);
  perspective:900px;
  padding:var(--s3) var(--s4) var(--s4);
  border-radius:14px;
  background:var(--ax-surface);
  border:1px solid var(--ax-edge);
  transition:border-color .18s}
.ax-card.is-best{border-color:rgba(240,206,128,.4)}

/* 1 — the badge slot. It is a row of its own in every card, filled or not,
   which is the whole reason a badge cannot push a price down. */
.ax-card__badge{display:flex;align-items:center;min-height:18px;
  padding-bottom:var(--s2)}
.ax-card__flag{padding:3px var(--s2);border-radius:4px;
  font-size:var(--t-micro);line-height:1;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;
  background:rgba(240,206,128,.12);color:var(--ax-champagne);
  font-variation-settings:"wdth" 100,"wght" 700}

/* 2 — identity: same logo box, formula, then family and size at a fixed
   spot. A two-line formula grows this band in all four cards together. */
.ax-card__top{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s3);align-items:start;
  padding-bottom:var(--s3);border-bottom:1px solid var(--ax-line)}
.ax-card__logo{width:28px;height:28px;flex:0 0 auto;border-radius:6px;
  object-fit:contain;background:#050927;border:1px solid var(--ax-edge)}
.ax-card__id{min-width:0}
.ax-card__name{display:block;color:#FFFFFF;
  font-size:var(--t-sub);line-height:1.22;letter-spacing:-.014em;
  font-variation-settings:"wdth" 92,"wght" 700}
.ax-card__meta{display:block;margin-top:var(--s1);
  font-size:var(--t-small);line-height:1.3;color:var(--ax-dim)}

/* 3 — the entry price. One size, one baseline, four cards. */
.ax-price__row{display:flex;align-items:baseline;gap:var(--s2);
  margin:0;padding-top:var(--s3)}
.ax-price__now{color:#FFFFFF;font-size:var(--t-price);line-height:1;
  letter-spacing:-.028em;
  font-variation-settings:"wdth" 86,"wght" 800}

/* 4 — what the price is and what it was. Kept off the price line so that
   turning the coupon off removes a strike-through, not a row. */
.ax-price__sub{display:flex;align-items:baseline;gap:var(--s2);
  margin:0;padding-top:var(--s1);min-height:17px;
  font-size:var(--t-small);line-height:1.3;color:var(--ax-dim)}
.ax-price__was{color:rgba(237,232,223,.42);
  text-decoration:line-through;text-decoration-thickness:1px}

/* 5 — activation, on its own line, never folded into the entry price. */
.ax-card__fee{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s3);margin:0;padding:var(--s3) 0 var(--s3);
  font-size:var(--t-body);line-height:1.3;color:var(--ax-dim)}
.ax-card__fee-v{flex:0 0 auto;color:#FFFFFF;
  font-variation-settings:"wdth" 96,"wght" 650}
.ax-card__fee-v .ax-none{color:rgba(237,232,223,.6);
  font-variation-settings:"wdth" 100,"wght" 500}

/* 6 — the combined cost, named and conditioned, same place in all four. */
.ax-total{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--ax-line)}
.ax-total__l{font-size:var(--t-micro);line-height:1.3;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ax-dim);
  font-variation-settings:"wdth" 100,"wght" 600}
.ax-total__v{flex:0 0 auto;color:#FFFFFF;
  font-size:var(--t-sub);line-height:1;letter-spacing:-.012em;
  font-variation-settings:"wdth" 94,"wght" 700}

/* 7 — one action, one width, one height, one position. */
.ax-card__cta{display:grid;padding-bottom:var(--s4)}
.ax-card__cta .ax-btn{width:100%}

/* Every zone names its own row rather than relying on source order, so a
   face can be placed on top of another without disturbing what is above. */
.ax-card>*{grid-column:1}
.ax-card__badge{grid-row:1}
.ax-card__top{grid-row:2}
.ax-price__row{grid-row:3}
.ax-price__sub{grid-row:4}
.ax-card__fee{grid-row:5}
.ax-total{grid-row:6}
.ax-card__cta{grid-row:7}
.ax-card__face{grid-row:8 / span 7}
.ax-card__rules{grid-row:15}

/* 8..14 — the two faces, stacked on the same seven tracks. */
.ax-card__face{min-width:0;display:grid;grid-template-rows:subgrid;
  transform-origin:left center;
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.ax-card__face--back{visibility:hidden;opacity:0;transform:rotateY(22deg)}
.ax-card.is-back .ax-card__face--front{visibility:hidden;opacity:0;
  transform:rotateY(-22deg)}
.ax-card.is-back .ax-card__face--back{visibility:visible;opacity:1;
  transform:none}
.ax-panel__t{grid-row:1;margin:0;padding-bottom:var(--s2);
  font-size:var(--t-micro);line-height:1.3;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ax-champagne);
  font-variation-settings:"wdth" 100,"wght" 700}
.ax-panel__t b{color:#FFFFFF;font-variation-settings:"wdth" 100,"wght" 700}

.ax-facts{grid-row:2 / span 5;display:grid;grid-template-rows:subgrid;
  list-style:none;margin:0;padding:0;min-width:0}
.ax-facts li{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s3);align-items:baseline;
  padding:var(--s2) 0;border-top:1px solid var(--ax-line)}
.ax-fact__k{font-size:var(--t-body);line-height:1.3;color:var(--ax-dim)}
.ax-fact__v{text-align:right;color:#FFFFFF;
  font-size:var(--t-value);line-height:1.3;letter-spacing:-.004em;
  font-variation-settings:"wdth" 96,"wght" 650}
.ax-fact__v small{display:block;margin-top:2px;
  font-size:var(--t-small);line-height:1.25;color:var(--ax-dim);
  font-variation-settings:"wdth" 100,"wght" 400}
.ax-fact__v .ax-none{color:rgba(237,232,223,.58);
  font-variation-settings:"wdth" 100,"wght" 500}
.ax-fact__v .ax-unk{color:var(--ax-champagne);font-size:var(--t-body);
  font-variation-settings:"wdth" 100,"wght" 600}

/* The back face. One rule per band, its status spelled out in words, and
   the scope of a conditional rule kept on the row instead of collapsed
   into a tick. The full statement of every rule lives in the rulebook
   section, which the foot of this face links to. */
.ax-rules{grid-row:2 / span 5;display:grid;grid-template-rows:subgrid;
  list-style:none;margin:0;padding:0;min-width:0}
.ax-rules li{display:flex;flex-direction:column;gap:var(--s1);
  justify-content:center;padding:var(--s2) 0;
  border-top:1px solid var(--ax-line)}
.ax-rule__n{color:#FFFFFF;font-size:var(--t-body);line-height:1.3;
  font-variation-settings:"wdth" 96,"wght" 650}
.ax-rule__b{display:flex;align-items:baseline;gap:var(--s2);
  flex-wrap:wrap;font-size:var(--t-small);line-height:1.35;
  color:var(--ax-dim)}
.ax-rule__s{flex:0 0 auto;padding:2px 6px;border-radius:4px;
  font-size:var(--t-micro);line-height:1.2;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap;
  font-variation-settings:"wdth" 100,"wght" 700}
.ax-rule__s--yes{background:rgba(110,205,150,.14);color:#8FD9AE}
.ax-rule__s--no{background:rgba(240,120,120,.13);color:#F09A9A}
.ax-rule__s--cond{background:rgba(240,206,128,.14);color:var(--ax-champagne)}
.ax-rule__s--na{background:rgba(237,232,223,.08);color:rgba(237,232,223,.66)}
.ax-rule__s--unk{background:rgba(240,206,128,.1);
  color:var(--ax-champagne);border:1px dashed rgba(240,206,128,.4)}

.ax-face__foot{grid-row:7;display:flex;flex-direction:column;
  gap:var(--s2);align-items:flex-start;padding-top:var(--s3);
  font-size:var(--t-small);line-height:1.5;color:var(--ax-dim)}
.ax-face__foot a{color:var(--ax-champagne);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(240,206,128,.4)}
.ax-face__foot a:hover{text-decoration-color:var(--ax-champagne)}

/* 15 — the one control that turns the card over. It never moves, never
   changes width, and carries the open state for assistive software. */
.ax-card__rules{display:grid;padding-top:var(--s3)}
.ax-flip{width:100%;height:44px;cursor:pointer;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);
  background:transparent;border:1px solid var(--ax-edge);
  color:rgba(237,232,223,.82);font-size:var(--t-body);line-height:1;
  font-variation-settings:"wdth" 98,"wght" 600;
  transition:border-color .14s,color .14s,background-color .14s}
.ax-flip:hover{border-color:rgba(240,206,128,.42);color:#FFFFFF;
  background:rgba(240,206,128,.05)}
.ax-card.is-back .ax-flip{border-color:rgba(240,206,128,.42);
  color:var(--ax-champagne)}

/* 14 — the detail, opening into space the grid already reserved. */
.ax-more{grid-row:7;margin:0;padding-top:var(--s3);align-self:start}
.ax-more>summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:var(--s2);min-height:32px;
  font-size:var(--t-small);color:rgba(237,232,223,.7);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--ax-edge);transition:text-decoration-color .15s}
.ax-more>summary::-webkit-details-marker{display:none}
.ax-more>summary:hover{color:#FFFFFF;
  text-decoration-color:var(--ax-champagne)}
.ax-more>summary::after{content:"+";font-size:14px;line-height:1;
  color:var(--ax-champagne)}
.ax-more[open]>summary::after{content:"\2212"}
.ax-more__in{margin-top:var(--s2);padding:var(--s3);border-radius:8px;
  background:var(--ax-recess);border:1px solid var(--ax-line);
  font-size:var(--t-small);line-height:1.6;color:rgba(237,232,223,.72);
  text-align:left}
.ax-more__in p{margin:0 0 var(--s2)}
.ax-more__in p:last-child{margin-bottom:0}
.ax-more__in b{color:#FFFFFF;font-variation-settings:"wdth" 100,"wght" 650}

.ax-btn{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);height:46px;padding:0 var(--s4);border-radius:8px;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  font-size:var(--t-body);line-height:1;border:1px solid transparent;
  font-variation-settings:"wdth" 98,"wght" 650;
  transition:background-color .14s,border-color .14s,color .14s}
.ax-btn--gold{background:var(--gold);color:#171C27;border-color:var(--gold)}
.ax-btn--gold:hover{background:#FFBE2E;border-color:#FFBE2E}
.ax-btn--gold:focus-visible{outline-color:#FFFFFF}
.ax-btn--sm{height:38px;font-size:13px;padding:0 var(--s3)}

/* A combination Apex does not list keeps its slot and says so. It has no
   zones to align, so it is not a subgrid. */
.ax-card--none{grid-template-rows:none;display:flex;flex-direction:column;
  border-style:dashed;border-color:rgba(237,232,223,.16);
  background:rgba(19,26,39,.5)}
.ax-card__nodata{margin:var(--s3) 0 0;
  font-size:var(--t-body);line-height:1.6;color:var(--ax-dim)}

/* one verification note for the whole catalogue, not one per card */
.ax-cards__note{margin:var(--s4) auto 0;text-align:center;max-width:72ch}

/* --- highlight differences --- */

/* The switch flips one class on the catalogue; the bands that genuinely
   differ were marked when the cards were built. The marker is an inset
   champagne edge plus a spoken label, never a colour alone, and it is
   drawn inside padding the band already had: turning it on cannot change
   a row height or move a value by a pixel. */
.ax-dsr{display:none}
.ax-cards.is-hl .ax-dsr{display:inline}
.ax-cards.is-hl .is-diff{position:relative}
.ax-cards.is-hl .is-diff::before{content:"";position:absolute;
  left:calc(var(--s4) * -1);top:0;bottom:0;width:2px;
  background:var(--ax-champagne)}
.ax-cards.is-hl .ax-facts li.is-diff,
.ax-cards.is-hl .ax-card__fee.is-diff{background:rgba(240,206,128,.06)}
.ax-cards.is-hl .ax-facts li:not(.is-diff) .ax-fact__k,
.ax-cards.is-hl .ax-facts li:not(.is-diff) .ax-fact__v{opacity:.55}

/* --- compare, mobile --- */

/* Four stacked cards cannot be read side by side, so below 860px a picker
   sets any two of them into one two-column table. On wider screens the
   catalogue itself is the comparison and this block stays out of the way. */
.ax-mcmp{display:none;margin-top:var(--s4)}
.ax-mcmp__btn{display:flex;width:100%;min-height:46px;align-items:center;
  justify-content:center;gap:var(--s2);cursor:pointer;border-radius:8px;
  background:rgba(240,206,128,.08);border:1px solid rgba(240,206,128,.32);
  color:var(--ax-champagne);font-size:var(--t-body);
  font-variation-settings:"wdth" 98,"wght" 650;
  transition:background-color .16s,border-color .16s}
.ax-mcmp__btn::after{content:"+";font-size:16px;line-height:1}
.ax-mcmp__btn[aria-expanded="true"]::after{content:"\2212"}
.ax-mcmp__btn:hover{background:rgba(240,206,128,.13)}
.ax-mcmp__panel{margin-top:var(--s3);padding:var(--s4);border-radius:14px;
  background:var(--ax-surface);border:1px solid var(--ax-edge)}
.ax-mcmp__l{margin:0 0 var(--s2);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:rgba(237,232,223,.52);
  font-variation-settings:"wdth" 100,"wght" 650}
.ax-mcmp__picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s2)}
.ax-mcmp__pick{display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:1px;min-height:46px;padding:var(--s2) var(--s3);
  cursor:pointer;border-radius:8px;
  background:var(--ax-recess);border:1px solid var(--ax-edge);
  color:rgba(237,232,223,.78);font-size:var(--t-small);text-align:left;
  transition:border-color .16s,background-color .16s,color .16s}
.ax-mcmp__pick b{color:#FFFFFF;font-size:var(--t-body);
  font-variation-settings:"wdth" 96,"wght" 650}
.ax-mcmp__pick small{font-size:var(--t-small);color:rgba(237,232,223,.55)}
.ax-mcmp__pick[aria-pressed="true"]{border-color:var(--ax-champagne);
  background:rgba(240,206,128,.1)}
.ax-mcmp__pick[aria-pressed="true"] b{color:var(--ax-champagne)}
.ax-mcmp__hint{margin:var(--s3) 0 0;font-size:var(--t-body);line-height:1.5;
  color:rgba(237,232,223,.6)}
.ax-mcmp__t{width:100%;margin-top:var(--s3);border-collapse:collapse;
  table-layout:fixed}
.ax-mcmp__t th,.ax-mcmp__t td{text-align:left;vertical-align:top;
  padding:var(--s2) var(--s2) var(--s2) 0;
  border-bottom:1px solid var(--ax-line);
  font-size:var(--t-body);line-height:1.45}
.ax-mcmp__t th:first-child{width:40%}
.ax-mcmp__t thead th{font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:rgba(237,232,223,.52);
  font-variation-settings:"wdth" 100,"wght" 650}
.ax-mcmp__t thead th small{display:block;margin-top:2px;
  font-size:var(--t-micro);
  letter-spacing:0;text-transform:none;color:rgba(237,232,223,.5)}
.ax-mcmp__t tbody th{color:rgba(237,232,223,.64);font-size:var(--t-body);
  font-variation-settings:"wdth" 100,"wght" 500}
.ax-mcmp__t td{color:#FFFFFF;font-size:var(--t-value);
  font-variant-numeric:tabular-nums;
  font-variation-settings:"wdth" 96,"wght" 600}
.ax-mcmp__t td small{display:block;margin-top:1px;font-size:var(--t-small);
  color:rgba(237,232,223,.5);font-variation-settings:"wdth" 100,"wght" 400}
.ax-mcmp__t tr:last-child th,.ax-mcmp__t tr:last-child td{border-bottom:0}
.ax-mcmp__close{display:flex;width:100%;min-height:46px;margin-top:var(--s4);
  align-items:center;justify-content:center;cursor:pointer;border-radius:8px;
  background:none;border:1px solid var(--ax-edge);color:#FFFFFF;
  font-size:var(--t-body);transition:border-color .16s,background-color .16s}
.ax-mcmp__close:hover{border-color:rgba(237,232,223,.5);
  background:rgba(237,232,223,.05)}

/* The coupon banner: logo, the advertised deal, the short conditions, then
   one copy zone and the CTA. Dock materials: navy, a fine champagne liseré,
   a top reflection and a short shadow. The figure is the loudest element,
   but "UP TO" sits right above it: Apex's claim is a ceiling, not a rate. */
.ax-offer{margin-top:clamp(16px,1.9vw,24px);
  display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;gap:6px 22px;
  padding:clamp(14px,1.6vw,20px) clamp(14px,1.8vw,22px);
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(237,232,223,.05) 0%,rgba(237,232,223,0) 46px),
    linear-gradient(180deg,rgba(23,30,44,.92),rgba(14,20,32,.88));
  border:1px solid rgba(240,206,128,.2);
  box-shadow:0 10px 24px rgba(5,8,14,.35)}
.ax-offer__logo{display:grid;place-items:center;width:64px;height:64px;
  border-radius:14px;background:rgba(10,14,23,.6);
  border:1px solid rgba(240,206,128,.22)}
.ax-offer__logo img{display:block;width:56px;height:56px;border-radius:10px}
.ax-offer__deal{margin:0;display:grid;justify-items:start;gap:2px;
  line-height:1}
.ax-offer__deal small{font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ax-champagne);
  font-variation-settings:"wdth" 100,"wght" 640}
.ax-offer__deal b{font-size:clamp(28px,2.4vw,34px);color:#FFFFFF;
  text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-variation-settings:"wdth" 94,"wght" 780}
.ax-offer__h{margin:0;font-size:15px;color:rgba(237,232,223,.88);
  font-variation-settings:"wdth" 96,"wght" 520}
.ax-offer__p{margin:3px 0 0;font-size:12.5px;line-height:1.55;
  color:rgba(237,232,223,.58)}
.ax-offer__act{display:grid;gap:8px;align-content:center;min-width:220px}
.ax-offer__act .ax-code{justify-content:center}
.ax-offer__go{min-height:46px}
.ax-code{position:relative;display:inline-flex;align-items:center;
  min-height:46px;padding:0 16px;border-radius:10px;cursor:pointer;
  background:rgba(10,14,23,.66);border:1px solid rgba(240,206,128,.45);
  color:rgba(237,232,223,.85);font-size:13.5px;
  font-variation-settings:"wdth" 98,"wght" 520;
  transition:border-color .16s,background-color .16s}
/* The copy icon is a fixed 16px tool: flex:none and both dimensions set, so
   it can never stretch with the button. Mirrors the homepage's .cdk__copy. */
.ax-code__i{flex:none;width:16px;height:16px;margin-right:9px;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.ax-code b{color:#FFFFFF;letter-spacing:.09em;margin-left:6px;
  font-variation-settings:"wdth" 100,"wght" 680}
.ax-code:hover{border-color:var(--ax-champagne);background:rgba(240,206,128,.08)}
.ax-code:focus-visible{outline:2px solid var(--ax-champagne);outline-offset:2px}
/* "Copied" swaps in without changing the button's width: the label keeps its
   box and only its ink is hidden. */
.ax-code__s{position:absolute;inset:0;display:grid;place-items:center;
  visibility:hidden;color:var(--ax-champagne);font-size:12.5px;
  letter-spacing:.05em}
.ax-code.is-done .ax-code__t,.ax-code.is-done .ax-code__i{visibility:hidden}
.ax-code.is-done .ax-code__s{visibility:visible}
.ax-code.is-fail{border-color:rgba(255,107,107,.65)}
.ax-offer__note{grid-column:1/-1;margin:2px 0 0;font-size:12.5px;
  line-height:1.5;color:#FF9B9B}
.ax-offer__note b{color:#FFFFFF;letter-spacing:.09em;user-select:all}
.ax-offer__fine{grid-column:1/-1;margin:2px 0 0;font-size:11.5px;
  line-height:1.5;color:rgba(237,232,223,.45)}

/* --- compare drawer --- */

.ax-cmp{margin-top:clamp(16px,1.9vw,24px);border-radius:16px;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(237,232,223,.04) 0%,rgba(237,232,223,0) 90px),
    var(--ax-surface);
  border:1px solid var(--ax-edge);
  box-shadow:0 22px 52px -24px rgba(0,0,0,.6),
             inset 0 1px 0 rgba(237,232,223,.09)}
.ax-cmp>summary{list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:15px clamp(14px,1.6vw,20px);min-height:56px}
.ax-cmp>summary::-webkit-details-marker{display:none}
.ax-cmp>summary b{color:#FFFFFF;font-size:15px;
  font-variation-settings:"wdth" 96,"wght" 650}
.ax-cmp>summary span{font-size:12.5px;color:rgba(237,232,223,.58)}
.ax-cmp>summary::after{content:"+";margin-left:auto;font-size:17px;
  color:var(--ax-champagne);line-height:1}
.ax-cmp[open]>summary::after{content:"\2212"}
.ax-cmp[open]>summary{border-bottom:1px solid var(--ax-line)}
.ax-cmp__in{padding:clamp(14px,1.6vw,20px);overflow-x:auto}
.ax-cmp table{width:100%;border-collapse:collapse;min-width:520px}
.ax-cmp th,.ax-cmp td{text-align:left;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--ax-line);font-size:13.5px;vertical-align:top}
.ax-cmp thead th{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(237,232,223,.5);padding-bottom:9px;
  font-variation-settings:"wdth" 100,"wght" 650}
.ax-cmp tbody th{color:rgba(237,232,223,.66);
  font-variation-settings:"wdth" 100,"wght" 400;width:34%}
.ax-cmp td{color:#FFFFFF;
  font-variation-settings:"wdth" 96,"wght" 600}
.ax-cmp td.ax-diff{color:var(--ax-champagne)}
.ax-cmp tr:last-child th,.ax-cmp tr:last-child td{border-bottom:0}

/* ---------- drawdown ---------- */

.ax-dd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.7vw,22px)}
.ax-panel{border-radius:16px;padding:clamp(18px,1.9vw,26px);
  background:
    linear-gradient(180deg,rgba(237,232,223,.04) 0%,rgba(237,232,223,0) 100px),
    var(--ax-surface);
  border:1px solid var(--ax-edge);
  box-shadow:0 20px 48px -26px rgba(0,0,0,.58),
             inset 0 1px 0 rgba(237,232,223,.08)}
.ax-panel--flat{box-shadow:none;background:rgba(14,20,32,.5)}
.ax-panel__h{display:flex;align-items:center;gap:11px;margin-bottom:5px}
.ax-panel__tag{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 8px;border-radius:5px;white-space:nowrap;
  font-variation-settings:"wdth" 100,"wght" 700}
.ax-tag--eod{background:rgba(240,206,128,.15);color:var(--ax-champagne)}
.ax-tag--intra{background:rgba(80,110,255,.18);color:#A8B6FF}

/* the worked example. A real chart: a time axis in sessions, value marks in
   dollars at the current size, one balance path, one threshold, and the
   exact point where the rule bites. No library, no animation behind text. */
.ax-chart{margin:16px 0 0;border-radius:11px;padding:12px 12px 10px;
  background:rgba(10,14,23,.52);border:1px solid var(--ax-line)}
.ax-chart svg{width:100%;height:auto;display:block;overflow:visible}
.ax-ch__ax{stroke:rgba(237,232,223,.16);stroke-width:1}
.ax-ch__grid{stroke:rgba(237,232,223,.09);stroke-width:1;stroke-dasharray:2 4}
.ax-ch__tick{stroke:rgba(237,232,223,.3);stroke-width:1}
.ax-ch__t{fill:rgba(237,232,223,.55);font-size:9.5px;
  font-variant-numeric:tabular-nums}
.ax-ch__t--dim{fill:rgba(237,232,223,.32);font-size:8.5px}
.ax-ch__t--ok{fill:var(--ax-champagne)}
.ax-ch__t--bad{fill:#FF6B6B}
.ax-ch__thr{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round}
.ax-ch__bal{fill:none;stroke:rgba(237,232,223,.78);stroke-width:1.6;
  stroke-linejoin:round}
.ax-ch__gap{stroke:rgba(240,206,128,.8);stroke-width:1.4}
.ax-pt{fill:#0E1420;stroke:rgba(237,232,223,.75);stroke-width:1.4;
  transition:fill .15s,stroke .15s}
.ax-pt.is-on{fill:var(--gold);stroke:#FFFFFF}
.ax-pt--fail{stroke:#FF6B6B}
.ax-pt--fail.is-on{fill:#FF6B6B;stroke:#FFFFFF}
.ax-chart figcaption{margin-top:9px;display:flex;flex-wrap:wrap;
  gap:4px 14px;align-items:baseline;font-size:11.5px;line-height:1.5;
  color:rgba(237,232,223,.5)}
.ax-leg{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  color:rgba(237,232,223,.66);font-size:11px}
.ax-leg__i{width:14px;height:0;border-top:2px solid}
.ax-leg__i--bal{border-color:rgba(237,232,223,.78)}
.ax-leg__i--thr{border-color:var(--gold)}
.ax-ch__cap{flex:1 0 100%}

/* the stepper: the same example one moment at a time, with the figures */
.ax-sim{margin:14px 0 0}
.ax-sim__tabs{display:flex;gap:6px;flex-wrap:wrap}
.ax-sim__t{appearance:none;cursor:pointer;flex:1 1 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:0 11px;border-radius:9px;font-size:12.5px;
  background:rgba(10,14,23,.6);border:1px solid var(--ax-line);
  color:rgba(237,232,223,.72);white-space:nowrap;
  transition:background-color .15s,border-color .15s,color .15s}
.ax-sim__t i{font-style:normal;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;font-size:10px;
  background:rgba(237,232,223,.08);color:var(--ax-champagne);
  font-variant-numeric:tabular-nums;
  font-variation-settings:"wdth" 100,"wght" 700}
.ax-sim__t:hover{color:#FFFFFF;border-color:rgba(240,206,128,.3)}
.ax-sim__t[aria-pressed="true"]{color:#171C27;background:var(--ax-champagne);
  border-color:var(--ax-champagne);
  font-variation-settings:"wdth" 100,"wght" 650}
.ax-sim__t[aria-pressed="true"] i{background:rgba(23,28,39,.14);color:#171C27}
.ax-sim__out{margin-top:10px;padding:12px 14px;border-radius:10px;
  background:rgba(10,14,23,.5);border:1px solid var(--ax-line)}
.ax-sim__txt{margin:0;font-size:13px;line-height:1.6;
  color:rgba(237,232,223,.74);min-height:4.8em}
.ax-sim__vals{margin:10px 0 0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  padding-top:10px;border-top:1px solid var(--ax-line)}
.ax-sim__vals div{min-width:0}
.ax-sim__vals dt{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(237,232,223,.5);
  font-variation-settings:"wdth" 100,"wght" 650}
.ax-sim__vals dd{margin:3px 0 0;color:#FFFFFF;font-size:15px;
  font-variant-numeric:tabular-nums;
  font-variation-settings:"wdth" 94,"wght" 700}
.ax-sim__vals dd.is-fail{color:#FF6B6B}

/* how the threshold behaves, in three lines */
.ax-mech{margin:14px 0 0;display:grid;gap:0}
.ax-mech div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;
  padding:9px 0;border-top:1px solid var(--ax-line)}
.ax-mech dt{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ax-champagne);padding-top:2px;
  font-variation-settings:"wdth" 100,"wght" 650}
.ax-mech dd{margin:0;font-size:13px;line-height:1.55;
  color:rgba(237,232,223,.72)}
.ax-mech dd small{display:block;margin-top:3px;font-size:12px;
  color:rgba(237,232,223,.52)}
.ax-panel__dll{margin-top:12px}

/* the platform caveat, which is a real difference and gets its own object */
.ax-warn{margin-top:clamp(16px,1.9vw,24px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;
  padding:clamp(14px,1.5vw,18px);border-radius:13px;
  background:rgba(252,175,0,.055);border:1px solid rgba(252,175,0,.22)}
.ax-warn__i{width:26px;height:26px;border-radius:50%;display:grid;
  place-items:center;background:rgba(252,175,0,.18);color:var(--gold);
  font-size:14px;font-variation-settings:"wdth" 100,"wght" 800}
.ax-warn h3{margin:0 0 5px;color:#FFFFFF;font-size:14.5px;
  font-variation-settings:"wdth" 96,"wght" 650}
.ax-warn p{margin:0;font-size:13.5px;line-height:1.6;
  color:rgba(237,232,223,.74)}
.ax-warn p + p{margin-top:7px}

/* The platform difference on EOD: a comparative module, not an alert. Three
   platforms side by side, the one that breaks the pattern carries the key. */
.ax-plat{margin-top:clamp(16px,1.9vw,24px);
  padding:clamp(16px,1.8vw,22px);border-radius:16px;
  background:
    linear-gradient(180deg,rgba(237,232,223,.04) 0%,rgba(237,232,223,0) 80px),
    var(--ax-surface);
  border:1px solid var(--ax-edge);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(237,232,223,.07)}
.ax-plat:empty{display:none}
.ax-plat__head{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.ax-plat__scope{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 8px;border-radius:5px;white-space:nowrap;
  background:rgba(240,206,128,.15);color:var(--ax-champagne);
  font-variation-settings:"wdth" 100,"wght" 700}
.ax-plat__lede{margin:7px 0 0;max-width:85ch;font-size:13.5px;line-height:1.6;
  color:rgba(237,232,223,.72)}
.ax-plat__grid{list-style:none;margin:14px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.2vw,14px)}
.ax-plat__c{border-radius:11px;padding:13px 14px;
  background:rgba(10,14,23,.5);border:1px solid var(--ax-line)}
.ax-plat__c.is-key{border-color:rgba(252,175,0,.34);
  background:rgba(252,175,0,.05)}
.ax-plat__name{display:block;color:#FFFFFF;font-size:14px;
  font-variation-settings:"wdth" 94,"wght" 650}
.ax-plat__tag{display:inline-block;margin-top:6px;font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;padding:3px 7px;
  border-radius:5px;background:rgba(237,232,223,.08);
  color:rgba(237,232,223,.72);
  font-variation-settings:"wdth" 100,"wght" 700}
.ax-plat__c.is-key .ax-plat__tag{background:rgba(252,175,0,.16);color:#FFCB5C}
.ax-plat__note{margin:8px 0 0;font-size:12.5px;line-height:1.55;
  color:rgba(237,232,223,.62)}
.ax-plat__src{margin:12px 0 0;font-size:12px;color:rgba(237,232,223,.5)}

/* ---------- payouts ---------- */

/* Three separate questions, three blocks, in the order a reader meets
   them: what makes a request possible, how large it may be, and how long
   an approved one takes. Clearing the first does not shorten the third,
   so they are never merged into one list. No new surface is introduced —
   the blocks are told apart by the same hairline the tables use. */
.ax-pay{display:grid;gap:var(--s8)}
.ax-pay__b{min-width:0}
.ax-pay__b+.ax-pay__b{padding-top:var(--s8);
  border-top:1px solid var(--ax-line)}
.ax-pay__scope{margin:var(--s2) 0 var(--s4);max-width:76ch;
  font-size:var(--t-small);line-height:1.6;color:rgba(237,232,223,.66);
  text-wrap:pretty}
.ax-pay__scope b{color:#FFFFFF;
  font-variation-settings:"wdth" 100,"wght" 650}

/* One condition per line: the name on the left, the figure that decides
   it in a column on the right, and the precision that keeps the figure
   honest on its own line underneath — where it cannot widen the label
   and push the figure out of that column. */
.ax-crit{list-style:none;margin:0;padding:0}
.ax-crit li{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s1) var(--s6);align-items:baseline;
  padding:var(--s3) 0;border-top:1px solid var(--ax-line)}
.ax-crit li:first-child{border-top:0;padding-top:0}
.ax-crit__k{font-size:var(--t-body);line-height:1.35;color:var(--ax-dim)}
.ax-crit__v{text-align:right;color:#FFFFFF;
  font-size:var(--t-value);line-height:1.3;letter-spacing:-.004em;
  font-variation-settings:"wdth" 96,"wght" 650}
.ax-crit__v small{display:block;margin-top:2px;
  font-size:var(--t-small);line-height:1.25;color:var(--ax-dim);
  font-variation-settings:"wdth" 100,"wght" 400}
.ax-crit__v .ax-unk{color:var(--ax-champagne);font-size:var(--t-body);
  font-variation-settings:"wdth" 100,"wght" 600}
.ax-crit__n{grid-column:1;max-width:74ch;
  font-size:var(--t-small);line-height:1.5;color:rgba(237,232,223,.58);
  text-wrap:pretty}
.ax-crit__n a{color:var(--ax-champagne);text-decoration:underline;
  text-underline-offset:3px}

/* The whole ladder, every size and both families, folded away: the block
   above already answers the size the reader picked. Same disclosure
   grammar as the card detail, so there is one way to open a thing. */
.ax-pay__all{margin-top:var(--s4)}
.ax-pay__all>summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:var(--s2);min-height:32px;
  font-size:var(--t-small);color:rgba(237,232,223,.7);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--ax-edge);transition:text-decoration-color .15s}
.ax-pay__all>summary::-webkit-details-marker{display:none}
.ax-pay__all>summary:hover{color:#FFFFFF;
  text-decoration-color:var(--ax-champagne)}
.ax-pay__all>summary::after{content:"+";font-size:14px;line-height:1;
  color:var(--ax-champagne)}
.ax-pay__all[open]>summary::after{content:"\2212"}

/* Two columns would halve the measure of the notes, so the condition
   lists stay single-column and only the gutter tightens on a phone. */
@media (max-width:640px){
  .ax-pay{gap:var(--s6)}
  .ax-pay__b+.ax-pay__b{padding-top:var(--s6)}
  .ax-crit li{gap:var(--s1) var(--s4)}
}

/* ---------- tables ---------- */

.ax-tw{margin-top:clamp(14px,1.6vw,20px);border-radius:14px;
  border:1px solid var(--ax-edge);background:var(--ax-surface);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.55)}
.ax-tw__scroll{overflow-x:auto;border-radius:inherit}
.ax-tw table{width:100%;border-collapse:collapse;min-width:560px}
.ax-tw caption{caption-side:top;text-align:left;padding:14px 18px 0;
  font-size:13px;color:rgba(237,232,223,.62);line-height:1.5}
.ax-tw th,.ax-tw td{text-align:left;padding:11px 16px;font-size:13.5px;
  border-bottom:1px solid var(--ax-line);vertical-align:top}
.ax-tw thead th{position:sticky;top:0;background:var(--ax-recess);
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(237,232,223,.56);white-space:nowrap;
  font-variation-settings:"wdth" 100,"wght" 650}
.ax-tw tbody th{color:#FFFFFF;font-variation-settings:"wdth" 96,"wght" 600}
/* the payout ladder names the family inside the row header */
.ax-tw tbody th small{display:block;margin-top:1px;font-size:11px;
  color:rgba(237,232,223,.55);
  font-variation-settings:"wdth" 100,"wght" 500}
.ax-tw td{color:rgba(237,232,223,.82)}
.ax-tw td b,.ax-tw .ax-strong{color:#FFFFFF;
  font-variation-settings:"wdth" 96,"wght" 650}
.ax-tw tbody tr:hover{background:var(--ax-hover)}
.ax-tw tbody tr:last-child th,.ax-tw tbody tr:last-child td{border-bottom:0}
.ax-tw td small{display:block;margin-top:2px;font-size:11.5px;
  color:rgba(237,232,223,.52);line-height:1.45}
.ax-tw__hint{display:none;padding:9px 16px;font-size:11.5px;
  color:rgba(237,232,223,.46);border-top:1px solid var(--ax-line)}
.ax-tw.is-scroll .ax-tw__hint{display:block}
.ax-tw tr.is-current{background:rgba(252,175,0,.06)}
.ax-tw tr.is-current th{color:var(--gold)}

/* ---------- fees ---------- */

/* Four short columns, so nothing has to scroll sideways and no paragraph
   is squeezed into a 200px cell. The explanation opens under the row, at
   the full width of the table, which is where it always belonged. */
.ax-fees{width:100%;margin-top:var(--s4);border-collapse:collapse;
  border-radius:14px;background:var(--ax-surface);
  border:1px solid var(--ax-edge);overflow:hidden;table-layout:fixed}
.ax-fees caption{caption-side:top;text-align:left;padding:var(--s4) 0 var(--s3);
  font-size:var(--t-body);color:rgba(237,232,223,.58);line-height:1.5}
.ax-fees th,.ax-fees td{text-align:left;vertical-align:top;
  padding:var(--s3) var(--s4);font-size:var(--t-body);
  border-bottom:1px solid var(--ax-line)}
.ax-fees thead th{background:var(--ax-recess);
  font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(237,232,223,.52);
  font-variation-settings:"wdth" 100,"wght" 650}
.ax-fees tbody th{color:#FFFFFF;
  font-variation-settings:"wdth" 96,"wght" 650}
.ax-fees col{width:auto}
.ax-fees thead th:nth-child(1){width:26%}
.ax-fees thead th:nth-child(2){width:26%}
.ax-fees thead th:nth-child(3){width:28%}
.ax-fees thead th:nth-child(4){width:20%}
.ax-fees__amt{color:#FFFFFF;font-size:var(--t-value);
  font-variant-numeric:tabular-nums;
  font-variation-settings:"wdth" 96,"wght" 650}
.ax-fees__amt small{display:block;margin-top:2px;font-size:var(--t-small);
  color:rgba(237,232,223,.52);line-height:1.45;
  font-variation-settings:"wdth" 100,"wght" 400}
.ax-fees__when{color:rgba(237,232,223,.74)}
.ax-fees__act{text-align:right}
.ax-fees__r:hover{background:var(--ax-hover)}

/* The five ways of saying "no number", each one visibly its own answer.
   Free and included read calm; unavailable reads neutral; unconfirmed
   carries a dashed edge, the page's mark for something never seen. */
.ax-fstat{display:inline-block;padding:2px var(--s2);border-radius:5px;
  font-size:var(--t-small);letter-spacing:.02em;
  font-variation-settings:"wdth" 100,"wght" 650}
.ax-fstat--free{background:rgba(110,205,150,.14);color:#8FD9AE}
.ax-fstat--na{background:rgba(237,232,223,.08);color:rgba(237,232,223,.66)}
.ax-fstat--unk{background:rgba(240,206,128,.1);color:var(--ax-champagne);
  border:1px dashed rgba(240,206,128,.4)}

.ax-dbtn{appearance:none;cursor:pointer;height:36px;padding:0 var(--s3);
  border-radius:8px;background:transparent;border:1px solid var(--ax-edge);
  color:rgba(237,232,223,.8);font-size:var(--t-small);
  font-variation-settings:"wdth" 100,"wght" 650;
  transition:border-color .16s,color .16s,background-color .16s}
.ax-dbtn:hover{border-color:rgba(240,206,128,.42);color:var(--ax-champagne)}
.ax-dbtn[aria-expanded="true"]{border-color:rgba(240,206,128,.42);
  color:var(--ax-champagne);background:rgba(240,206,128,.07)}

.ax-fees__d td{padding:0 var(--s4) var(--s4);background:var(--ax-recess)}
.ax-feed{max-width:92ch;padding-top:var(--s3);
  border-top:1px solid var(--ax-line)}
.ax-feed p{margin:0;color:rgba(237,232,223,.8);
  font-size:var(--t-body);line-height:1.62}
.ax-feed p + p{margin-top:var(--s3)}
.ax-feed a{color:var(--ax-champagne);text-underline-offset:3px}
.ax-feed__warn{color:var(--ax-champagne)}
.ax-feed__src{color:rgba(237,232,223,.5);font-size:var(--t-small)}

.ax-feed__t{width:100%;max-width:620px;margin-top:var(--s4);
  border-collapse:collapse}
.ax-feed__t caption{caption-side:top;text-align:left;
  padding:0 0 var(--s2);font-size:var(--t-small);
  color:rgba(237,232,223,.52)}
.ax-feed__t th,.ax-feed__t td{text-align:left;padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--ax-line);font-size:var(--t-body)}
.ax-feed__t thead th{font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:rgba(237,232,223,.52);
  font-variation-settings:"wdth" 100,"wght" 650}
.ax-feed__t tbody th{color:#FFFFFF;font-variant-numeric:tabular-nums;
  font-variation-settings:"wdth" 96,"wght" 650}
.ax-feed__t td{color:#FFFFFF;font-variant-numeric:tabular-nums;
  font-variation-settings:"wdth" 96,"wght" 600}
.ax-feed__t tr:last-child th,.ax-feed__t tr:last-child td{border-bottom:0}

/* ---------- the rulebook ---------- */

/* One ledger per category: name and summary, who it applies to, and the
   exact consequence as a badge. The full text folds behind the row. */
.ax-rb{margin-top:clamp(26px,3vw,38px)}
.ax-rb:first-of-type{margin-top:0}
.ax-rb__intro{max-width:70ch;margin-bottom:12px}
.ax-rb__intro .ax-note{margin-top:5px}
.ax-rb__list{border-radius:14px;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(237,232,223,.035) 0%,rgba(237,232,223,0) 80px),
    var(--ax-surface);
  border:1px solid var(--ax-edge);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(237,232,223,.07)}
.ax-rb__cols{display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr) 176px 30px;
  gap:16px;align-items:center;padding:10px 18px 9px;
  border-bottom:1px solid var(--ax-line);
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(237,232,223,.42);
  font-variation-settings:"wdth" 100,"wght" 650}
.ax-rb__row + .ax-rb__row{border-top:1px solid var(--ax-line)}
.ax-rb__row.is-open{background:rgba(10,14,23,.4)}
.ax-rb__head{appearance:none;border:0;background:none;cursor:pointer;
  width:100%;text-align:left;color:inherit;
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr) 176px 30px;
  gap:16px;align-items:center;padding:13px 18px;min-height:56px;
  transition:background-color .14s}
.ax-rb__head:hover{background:var(--ax-hover)}
.ax-rb__head:focus-visible{outline-offset:-2px}
.ax-rb__main{min-width:0}
.ax-rb__name{display:flex;align-items:center;gap:9px;color:#FFFFFF;
  font-size:14px;line-height:1.3;
  font-variation-settings:"wdth" 94,"wght" 650}
.ax-rb__sum{display:block;margin:3px 0 0 18px;font-size:12.5px;line-height:1.5;
  color:rgba(237,232,223,.58)}
.ax-rb__scope{min-width:0;font-size:12.5px;line-height:1.45;
  color:rgba(237,232,223,.66)}
.ax-rb__badge{justify-self:start;font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 8px;border-radius:5px;
  line-height:1.35;
  font-variation-settings:"wdth" 100,"wght" 700}
.ax-rb__badge--stop{background:rgba(255,107,107,.13);color:#FF9D9D}
.ax-rb__badge--pause{background:rgba(252,175,0,.13);color:#FFCB5C}
.ax-rb__badge--gate{background:rgba(127,162,255,.14);color:#A8BCFF}
.ax-rb__badge--warn{background:rgba(255,107,107,.07);color:#FF9D9D;
  box-shadow:inset 0 0 0 1px rgba(255,107,107,.3)}
.ax-rb__badge--none{background:rgba(237,232,223,.08);
  color:rgba(237,232,223,.62)}
.ax-rb__tgl{position:relative;width:22px;height:22px;justify-self:end;
  border-radius:50%;background:rgba(237,232,223,.07)}
.ax-rb__tgl::before,.ax-rb__tgl::after{content:"";position:absolute;
  left:50%;top:50%;width:9px;height:1.6px;margin:-0.8px 0 0 -4.5px;
  border-radius:1px;background:var(--ax-champagne);
  transition:transform .18s}
.ax-rb__tgl::after{transform:rotate(90deg)}
.ax-rb__head[aria-expanded="true"] .ax-rb__tgl::after{transform:rotate(0deg)}
.ax-rb__body{padding:2px 18px 16px 36px;max-width:80ch}
.ax-rb__body p{margin:0 0 8px;font-size:13px;line-height:1.6;
  color:rgba(237,232,223,.72)}
.ax-rb__body p:last-child{margin-bottom:0}
.ax-rb__body b{color:#FFFFFF;font-variation-settings:"wdth" 100,"wght" 650}
.ax-rb__src{font-size:12px;color:rgba(237,232,223,.5)}

.ax-sev{flex:0 0 auto;width:9px;height:9px;border-radius:50%}
.ax-sev--stop{background:#FF6B6B;box-shadow:0 0 0 3px rgba(255,107,107,.16)}
.ax-sev--pause{background:#FCAF00;box-shadow:0 0 0 3px rgba(252,175,0,.16)}
.ax-sev--gate{background:#7FA2FF;box-shadow:0 0 0 3px rgba(127,162,255,.16)}
.ax-sev--warn{background:transparent;
  box-shadow:inset 0 0 0 1.6px #FF6B6B,0 0 0 3px rgba(255,107,107,.1)}
.ax-sev--none{background:rgba(237,232,223,.38);
  box-shadow:0 0 0 3px rgba(237,232,223,.08)}

/* ---------- the journey ---------- */

/* Five stages in one row on a desktop. The live stage is set apart by a
   dashed edge and a quieter kicker: it is not a step you can buy. */
.ax-path{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.2vw,14px);align-items:stretch}
.ax-path__s{position:relative;display:flex;flex-direction:column;
  border-radius:14px;padding:clamp(14px,1.5vw,18px);
  background:rgba(14,20,32,.6);border:1px solid var(--ax-line)}
.ax-path__s--live{border:1px dashed rgba(240,206,128,.3);
  background:rgba(14,20,32,.32)}
.ax-path__k{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ax-champagne);
  font-variation-settings:"wdth" 100,"wght" 700}
.ax-path__s--live .ax-path__k{color:rgba(237,232,223,.55)}
.ax-path__s h3{margin:7px 0 2px;color:#FFFFFF;font-size:16px;line-height:1.22;
  font-variation-settings:"wdth" 92,"wght" 700}
.ax-path__clock{margin:0 0 8px;font-size:11.5px;color:var(--ax-champagne);
  font-variation-settings:"wdth" 100,"wght" 600}
.ax-path__body{margin:0;font-size:12.5px;line-height:1.55;
  color:rgba(237,232,223,.7)}
.ax-path__pass{margin:9px 0 0;padding-top:9px;
  border-top:1px solid var(--ax-line);
  font-size:12px;line-height:1.5;color:rgba(237,232,223,.62)}
.ax-path__pass b{display:block;margin-bottom:2px;color:rgba(237,232,223,.8);
  font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 700}
.ax-path__go{margin-top:auto;padding-top:10px;display:inline-flex;
  align-items:center;gap:6px;min-height:34px;width:fit-content;
  font-size:12.5px;color:var(--ax-champagne);text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:rgba(240,206,128,.35);
  transition:color .14s,text-decoration-color .14s}
.ax-path__go:hover{color:#FFFFFF;text-decoration-color:#FFFFFF}

/* ---------- faq: one centred column with working topic filters ---------- */

.ax-head--faq{max-width:780px;margin-left:auto;margin-right:auto;
  text-align:center}
.ax-head--faq .ax-lede{margin-left:auto;margin-right:auto;max-width:62ch}

/* Topic filters. Real buttons with a real pressed state: the selection is
   visible in colour and in aria-pressed, and "All" restores the full list. */
.ax-faqf{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  max-width:960px;margin:0 auto clamp(14px,1.8vw,20px)}
.ax-faqf button{min-height:44px;padding:0 18px;border-radius:999px;
  cursor:pointer;background:rgba(10,14,23,.5);
  border:1px solid rgba(237,232,223,.16);color:rgba(237,232,223,.78);
  font:inherit;font-size:13.5px;
  font-variation-settings:"wdth" 98,"wght" 540;
  transition:border-color .16s,background-color .16s,color .16s}
.ax-faqf button:hover{border-color:rgba(240,206,128,.5)}
.ax-faqf button[aria-pressed="true"]{background:rgba(240,206,128,.12);
  border-color:var(--ax-champagne);color:var(--ax-champagne)}
.ax-faqf button:focus-visible{outline:2px solid var(--ax-champagne);
  outline-offset:2px}

.ax-faq{max-width:960px;margin:0 auto;border-radius:16px;overflow:hidden;
  border:1px solid rgba(240,206,128,.16);
  background:
    linear-gradient(180deg,rgba(237,232,223,.035) 0%,rgba(237,232,223,0) 110px),
    rgba(14,20,32,.5)}

/* The banner after the FAQ keeps the reading column's width. */
#axOffer3{max-width:960px;margin:0 auto}
.ax-faq__grp{padding-bottom:8px}
/* The hairline sits between visible groups only: a group whose predecessors
   are all hidden by a topic filter must not carry a stray top border. */
.ax-faq__grp:not([hidden]) ~ .ax-faq__grp:not([hidden]){
  border-top:1px solid rgba(237,232,223,.08)}
.ax-faq__cat{margin:16px 20px 6px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ax-champagne);
  font-variation-settings:"wdth" 100,"wght" 620}
.ax-faq__item + .ax-faq__item{border-top:1px solid rgba(237,232,223,.06)}
.ax-faq__item.is-open{background:rgba(10,14,23,.42)}
.ax-faq__q{margin:0}
.ax-faq__btn{display:flex;align-items:center;gap:14px;width:100%;
  min-height:48px;padding:12px 20px;text-align:left;cursor:pointer;
  background:none;border:0;color:#FFFFFF;font:inherit;font-size:14.5px;
  line-height:1.4;font-variation-settings:"wdth" 96,"wght" 560;
  transition:background-color .14s}
.ax-faq__btn:hover{background:rgba(237,232,223,.04)}
.ax-faq__btn:focus-visible{outline:2px solid var(--ax-champagne);
  outline-offset:-2px;border-radius:8px}
.ax-faq__btn > span:first-child{flex:1 1 auto;min-width:0}
.ax-faq__ic{flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  border:1px solid rgba(240,206,128,.4);position:relative}
.ax-faq__ic::before,.ax-faq__ic::after{content:"";position:absolute;
  left:50%;top:50%;background:var(--ax-champagne);
  transform:translate(-50%,-50%)}
.ax-faq__ic::before{width:9px;height:1.5px}
.ax-faq__ic::after{width:1.5px;height:9px;transition:transform .18s}
.ax-faq__btn[aria-expanded="true"] .ax-faq__ic::after{
  transform:translate(-50%,-50%) scaleY(0)}
.ax-faq__a{padding:0 20px 16px;max-width:75ch}
.ax-faq__item.is-open .ax-faq__a{animation:axFaqIn .2s ease}
@keyframes axFaqIn{from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}}
.ax-faq__a p{margin:0;font-size:14px;line-height:1.65;
  color:rgba(237,232,223,.74)}
.ax-faq__a p + p{margin-top:9px}
.ax-faq__a b{color:#FFFFFF;font-variation-settings:"wdth" 100,"wght" 650}
.ax-faq__mod{font-size:13px}
.ax-faq__mod a{color:var(--ax-champagne)}

/* ---------- sources ---------- */

/* Three accordions: official sources, conflicts, gaps. Native details, so
   the keyboard and search deep links work without extra wiring. */
.ax-src{display:grid;gap:clamp(10px,1.2vw,14px)}
.ax-srcg{border-radius:14px;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(237,232,223,.035) 0%,rgba(237,232,223,0) 80px),
    var(--ax-surface);
  border:1px solid var(--ax-edge);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(237,232,223,.07)}
.ax-srcg>summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:center;
  padding:13px clamp(14px,1.6vw,20px);min-height:56px}
.ax-srcg>summary::-webkit-details-marker{display:none}
.ax-srcg>summary:hover{background:var(--ax-hover)}
.ax-srcg__t{display:flex;align-items:center;gap:9px;color:#FFFFFF;
  font-size:15px;font-variation-settings:"wdth" 96,"wght" 650}
.ax-srcg__n{font-style:normal;font-size:11px;padding:2px 8px;
  border-radius:999px;background:rgba(240,206,128,.13);
  color:var(--ax-champagne);font-variant-numeric:tabular-nums;
  font-variation-settings:"wdth" 100,"wght" 700}
.ax-srcg__sub{grid-column:1;font-size:12.5px;color:rgba(237,232,223,.58)}
.ax-srcg__tgl{grid-column:2;grid-row:1 / span 2;position:relative;
  width:22px;height:22px;border-radius:50%;
  background:rgba(237,232,223,.07)}
.ax-srcg__tgl::before,.ax-srcg__tgl::after{content:"";position:absolute;
  left:50%;top:50%;width:9px;height:1.6px;margin:-0.8px 0 0 -4.5px;
  border-radius:1px;background:var(--ax-champagne);transition:transform .18s}
.ax-srcg__tgl::after{transform:rotate(90deg)}
.ax-srcg[open]>summary .ax-srcg__tgl::after{transform:rotate(0deg)}
.ax-srcg[open]>summary{border-bottom:1px solid var(--ax-line)}
.ax-srcg__in{padding:clamp(14px,1.6vw,20px)}
.ax-srcg__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.ax-srcg__list li{font-size:13px;line-height:1.55;
  color:rgba(237,232,223,.7);padding:11px 13px;border-radius:10px;
  background:rgba(10,14,23,.4);border:1px solid var(--ax-line)}
.ax-srcg__list b{display:block;color:#FFFFFF;margin-bottom:3px;
  font-variation-settings:"wdth" 96,"wght" 650}
.ax-srcg__meta{display:block;font-size:12px;color:rgba(237,232,223,.55)}
.ax-srcg__meta a{color:var(--ax-champagne);text-decoration:underline;
  text-underline-offset:3px}
.ax-srcg__meta a:hover{color:#FFFFFF}
.ax-srcg__meta time{color:rgba(237,232,223,.55)}
.ax-srcg__note{display:block;margin-top:5px;font-size:12.5px;line-height:1.55;
  color:rgba(237,232,223,.6)}
.ax-srcg__duo{display:grid;gap:6px;margin-top:5px}
.ax-srcg__duo span{display:block;padding:7px 9px;border-radius:7px;
  background:rgba(237,232,223,.04);border:1px solid var(--ax-line);
  font-size:12.5px;line-height:1.5;color:rgba(237,232,223,.72)}
.ax-srcg__duo i,.ax-srcg__shown i{display:block;font-style:normal;
  font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ax-champagne);margin-bottom:2px;
  font-variation-settings:"wdth" 100,"wght" 700}
.ax-srcg__shown{display:block;margin-top:6px;padding:7px 9px;
  border-radius:7px;background:rgba(240,206,128,.06);
  border:1px solid rgba(240,206,128,.2);
  font-size:12.5px;line-height:1.5;color:rgba(237,232,223,.78)}

/* the closing action */
.ax-end{margin-top:clamp(34px,4vw,60px);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  justify-content:space-between;
  padding:clamp(20px,2.4vw,32px);border-radius:18px;
  background:
    radial-gradient(90% 120% at 18% 0%,rgba(80,110,255,.09) 0%,transparent 62%),
    linear-gradient(180deg,rgba(237,232,223,.04) 0%,rgba(237,232,223,0) 50%),
    rgba(16,22,34,.78);
  border:1px solid rgba(240,206,128,.17);
  box-shadow:0 24px 56px -28px rgba(0,0,0,.6),
             inset 0 1px 0 rgba(255,253,247,.07)}
.ax-end h2{margin:0 0 6px;color:#FFFFFF;letter-spacing:-.018em;
  font-variation-settings:"wdth" 90,"wght" 800;
  font-size:clamp(22px,2.4vw,30px);line-height:1.15}
.ax-end p{margin:0;max-width:56ch;font-size:13.5px;line-height:1.6;
  color:rgba(237,232,223,.68)}
.ax-end__act{display:flex;flex-wrap:wrap;gap:10px}

/* ============================================================
   responsive
   ============================================================ */

/* 4 x --ax-card-min plus three gaps is 1048px of shell; the shell is the
   viewport less a 5vw gutter, so four cards stop fitting just above 1100.
   Below it the catalogue becomes two bands of the same fourteen rows: the
   Intraday pair, a gutter track, then the EOD pair. Each band re-aligns
   within itself, which is what a row of cards has to do. */
@media (max-width:1104px){
  .ax-cards{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:var(--ax-rows) var(--s6) var(--ax-rows)}
  .ax-card:nth-child(-n+2){grid-row:1 / span 15}
  .ax-card:nth-child(n+3){grid-row:17 / span 15}
}

@media (max-width:1100px){
  .ax-path{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ax-path__s--live{grid-column:1 / -1}
}

@media (max-width:980px){
  .ax{--ax-stick:104px}
  .ax-nav{top:70px}
  .bar__shell{gap:6px}
  .search{width:44px;padding:0 13px}
  .search input{opacity:0;transition:opacity .16s}
  .search:focus-within{width:min(300px,52vw)}
  .search:focus-within input{opacity:1}
  .ax-dd{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:860px){
  /* Side-by-side reading thins out here, so the two-offer picker takes
     over from the wide ten-row drawer. */
  .ax-mcmp{display:block}
  .ax-cmp{display:none}

  /* The rulebook folds its scope and consequence under the name: one
     compact card per rule, never a table scrolled in two directions. */
  .ax-rb__cols{display:none}
  .ax-rb__head{grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;
    padding:12px 15px}
  .ax-rb__main{grid-column:1;grid-row:1}
  .ax-rb__tgl{grid-column:2;grid-row:1;align-self:start;margin-top:2px}
  .ax-rb__scope{grid-column:1;grid-row:2;margin-left:18px;font-size:12px;
    color:rgba(237,232,223,.55)}
  .ax-rb__badge{grid-column:2;grid-row:2;justify-self:end;align-self:start;
    max-width:172px}
  .ax-rb__body{padding:0 15px 14px;max-width:none}

  /* Below this the two tables are wider than their window, and a row of
     figures with its label scrolled off the left is unreadable. The label
     column is pinned instead, which is the same move the homepage makes with
     its sticky table head. The tints are restated on the pinned cell because
     it now paints its own background over the row's. */
  .ax-tw tbody th{position:sticky;left:0;z-index:1;
    background:var(--ax-surface);box-shadow:1px 0 0 var(--ax-line)}
  .ax-tw tbody tr:hover th{background:var(--ax-hover)}
  .ax-tw tbody tr.is-current th{background:
    linear-gradient(rgba(252,175,0,.06),rgba(252,175,0,.06)),var(--ax-surface)}
  .ax-tw thead th:first-child{left:0;z-index:2}
}

/* Phone. The hero is recomposed, not shrunk: the mark steps down, the title
   is solved from the viewport width so three short lines each hold a whole
   phrase, and the search moves under the actions where a thumb is. */
@media (max-width:640px){
  /* The section nav is not sticky on a phone, so only the menu bar needs
     clearing: 10px of top offset, a 46px bar and a readable gap. */
  .ax{--ax-stick:74px}
  .ax-shell{width:calc(100% - 28px)}

  .bar{top:10px;padding:0 8px}
  .bar__shell{height:46px;padding:4px 4px 4px 6px;gap:2px;font-size:12px}
  .brand__name{display:none}
  .bar__nav{overflow:visible;margin:0;flex:1 1 auto;min-width:0;
    justify-content:space-between}
  .bar__nav a{padding:7px 5px;font-size:11.5px;white-space:nowrap}
  .bar__sep{display:none}
  .search{height:34px;width:34px;padding:0 9px;flex:0 0 auto}

  .ax-hero{padding:70px 0 12px}
  .ax-mark{width:min(112px,32vw)}
  .ax-hero__h1{margin-top:-.1em;font-size:clamp(29px,9.6vw,42px);
    line-height:1;letter-spacing:-.02em}
  .ax-hero__h1 em{display:block}
  .ax-hero__sub{font-size:14.5px;line-height:1.5}
  .ax-find{margin-top:16px}
  .ax-find__box{height:48px}
  .ax-find__hint{display:none}

  /* One fixed bar at a time: on a phone the section nav scrolls with the
     page as a single horizontal line instead of stacking under the menu. */
  .ax-nav{position:static;margin-top:16px}
  .ax-nav a{height:44px;padding:0 14px;font-size:13px}

  .ax-sec{padding-top:44px}
  .ax-ctl{gap:var(--s3);padding:var(--s3)}
  .ax-ctl__g,.ax-ctl__g--size{flex:1 1 100%}
  .ax-seg button{padding:0 var(--s1)}
  .ax-sw{width:100%}

  /* One column. There is no neighbour to align with, so the shared rows
     are switched off and each card sizes to its own content: no band is
     stretched by a value in a card the reader cannot see beside it. */
  .ax-cards{grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    row-gap:var(--s4)}
  .ax-card,
  .ax-card:nth-child(-n+2),
  .ax-card:nth-child(n+3){grid-row:auto;
    display:flex;flex-direction:column;grid-template-rows:none}
  /* Stacked, there is no band to reserve: the hidden face leaves the flow
     outright rather than holding open an empty gap under a thumb. */
  .ax-card__face{display:block;grid-row:auto}
  .ax-card__face--back,
  .ax-card.is-back .ax-card__face--front{display:none}
  .ax-card.is-back .ax-card__face--back{display:block;visibility:visible;
    opacity:1;transform:none}
  .ax-facts,.ax-rules{display:block;grid-row:auto}
  .ax-more,.ax-face__foot,.ax-panel__t,.ax-card__rules{grid-row:auto}

  /* The banner stacks: logo and deal on the first line, the conditions
     below, then the code and the CTA side by side at thumb height. */
  .ax-offer{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .ax-offer__logo{width:52px;height:52px}
  .ax-offer__logo img{width:44px;height:44px}
  .ax-offer__deal b{font-size:30px}
  .ax-offer__txt{grid-column:1 / -1}
  .ax-offer__act{grid-column:1 / -1;width:100%;display:flex;flex-wrap:wrap;
    gap:10px;min-width:0}
  .ax-code,.ax-offer__go{flex:1 1 46%;justify-content:center;min-height:48px}

  .ax-path{grid-template-columns:minmax(0,1fr)}

  /* The platform comparison stacks, same structure, one per row. */
  .ax-plat__grid{grid-template-columns:minmax(0,1fr)}

  /* The stepper becomes a two-by-two block of thumb-sized buttons. */
  .ax-sim__t{flex:1 1 44%;min-height:44px;font-size:12px;padding:0 8px}
  .ax-sim__txt{min-height:0}
  .ax-sim__vals dd{font-size:14px}
  .ax-mech div{grid-template-columns:minmax(0,1fr);gap:3px}
  .ax-rb__head{min-height:44px}
  .ax-path__go{min-height:44px}

  /* 38px is comfortable under a cursor and short under a thumb. The control
     is an inline-flex with an underline, so growing the box moves nothing. */
  .ax-more>summary{min-height:44px}
  .ax-faq__cat{margin:14px 15px 4px}
  .ax-faq__btn{padding:12px 15px;font-size:14px;gap:10px}
  .ax-faq__a{padding:0 15px 15px}
  .ax-end{flex-direction:column;align-items:flex-start}
  .ax-end__act{width:100%}
  .ax-end__act .btn{flex:1 1 140px}
}

/* 360px. Nothing is allowed to overflow here; the two tightest objects are
   the account card's price row and the segmented controls. */
@media (max-width:380px){
  .ax-shell{width:calc(100% - 22px)}
  .ax-seg{gap:var(--s1)}
  .ax-seg button{padding:0;font-size:var(--t-small)}
  .ax-card{padding:var(--s3)}
  .ax-facts li{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
  .ax-fact__v{text-align:left}
  .ax-hero__h1{font-size:clamp(26px,9.4vw,34px)}
}

/* ============================================================
   reduced motion and forced colours
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .ax-reveal{opacity:1 !important;transform:none !important}
  /* The faces swap outright. No rotation, no fade, nothing to follow. */
  .ax-card__face{transform:none !important}
}

@media (forced-colors:active){
  .ax-card,.ax-panel,.ax-tw,.ax-cmp,.ax-rb__list,.ax-faq,.ax-offer,
  .ax-plat,.ax-plat__c,.ax-srcg,.ax-ctl,.ax-mcmp__panel,.ax-mcmp__btn{
    border:1px solid CanvasText}
  .ax-faqf button{border:1px solid CanvasText}
  .ax-seg button[aria-pressed="true"],.ax-sim__t[aria-pressed="true"],
  .ax-mcmp__pick[aria-pressed="true"],.ax-faqf button[aria-pressed="true"]{
    forced-color-adjust:none;
    background:Highlight;color:HighlightText}
  .ax-cards.is-hl .is-diff::before{forced-color-adjust:none;
    background:Highlight}
}

/* Subgrid is how the bands are shared. Without it the card falls back to a
   column and the zones keep their order and their spacing, but only the
   card edges line up. No layout is left broken, and nothing above pretends
   otherwise. */
@supports not (grid-template-rows:subgrid){
  .ax-cards{grid-template-rows:none;row-gap:var(--s4);align-items:start}
  .ax-card,
  .ax-card:nth-child(-n+2),
  .ax-card:nth-child(n+3){grid-row:auto;
    display:flex;flex-direction:column;grid-template-rows:none}
  .ax-card__face{display:block;grid-row:auto}
  .ax-card__face--back,
  .ax-card.is-back .ax-card__face--front{display:none}
  .ax-card.is-back .ax-card__face--back{display:block;visibility:visible;
    opacity:1;transform:none}
  .ax-facts,.ax-rules{display:block;grid-row:auto}
  .ax-more,.ax-face__foot,.ax-panel__t,.ax-card__rules{grid-row:auto}
}

/* A light entrance for the main objects, nothing behind running text. */
.ax-reveal{opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.ax-reveal.is-in{opacity:1;transform:none}

/* Prominent drawdown family; same geometry across every offer. */
.ax-card__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;color:#cbd2de}
.ax-card__family{display:inline-flex;align-items:center;justify-content:center;
  min-width:72px;padding:3px 7px;border:1px solid;border-radius:5px;
  font-size:12px;line-height:1.2;letter-spacing:.055em;text-transform:uppercase;
  font-weight:750;font-variation-settings:"wdth" 100,"wght" 750;white-space:nowrap}
.ax-card__family--intraday{color:#ffe1a0;background:#3a3020;border-color:#846c3d}
.ax-card__family--eod{color:#c6e8ff;background:#1d3448;border-color:#4c7897}

/* Horizontal comparison rail: shared rows keep prices and actions aligned. */
.ax-carousel-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;color:#cbd2de;font-size:13px}
.ax-carousel-nav>div{display:flex;align-items:center;gap:12px;flex-shrink:0}
.ax-carousel-nav button{width:44px;height:44px;border-radius:50%;border:1px solid #806d44;background:#17202e;color:#f0ce80;font-size:22px;cursor:pointer}
.ax-carousel-nav button:disabled{opacity:.3;cursor:default}
#axCards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/2.7);grid-template-rows:var(--ax-rows);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#8d794f #141b27;padding-bottom:14px;row-gap:0}
#axCards>.ax-card{grid-row:1 / -1;scroll-snap-align:start;opacity:1;transform:none}
#axCards:focus-visible,.ax-carousel-nav button:focus-visible{outline:2px solid #f0ce80;outline-offset:3px}
@media(max-width:1104px){#axCards{grid-auto-columns:calc((100% - 24px)/2.15)}}
@media(max-width:640px){#axCards{grid-auto-columns:88%;grid-template-rows:auto;align-items:stretch}#axCards>.ax-card{grid-row:1;display:flex;flex-direction:column}.ax-carousel-nav{font-size:12px}.ax-carousel-nav>span{max-width:160px}.ax-card__rules{margin-top:auto}}

/* Restrained comparison cards and readable fee / rule states. */
.ax-card__face--front{background:rgba(7,12,20,.4);border-radius:10px;padding:12px}
.ax-fstat{padding:0;border:0;border-radius:0;background:none;font-size:13px;line-height:1.45;letter-spacing:0;font-variation-settings:"wdth" 100,"wght" 550;white-space:nowrap}
.ax-rb__badge{padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-size:12px;line-height:1.45;letter-spacing:0;text-transform:none;font-variation-settings:"wdth" 100,"wght" 550}
.ax-fees__amt small{max-width:30ch;line-height:1.5}
@media(max-width:900px){
 .ax-rb__head{grid-template-columns:minmax(0,1fr) 24px;gap:7px 12px}
 .ax-rb__scope{grid-column:1;grid-row:2;margin-left:18px}
 .ax-rb__badge{grid-column:1;grid-row:3;margin-left:18px;justify-self:start;max-width:none}
 .ax-rb__tgl{grid-column:2;grid-row:1}
}
@media(max-width:640px){
 .ax-fees{display:block;min-width:0!important;width:100%;margin-top:0}
 .ax-fees caption{display:block;font-size:12px;line-height:1.5;padding:12px}
 .ax-fees thead{display:none}
 .ax-fees tbody{display:block}
 .ax-fees .ax-fees__r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px;padding:16px;border-bottom:1px solid var(--ax-line)}
 .ax-fees .ax-fees__r>th,.ax-fees .ax-fees__r>td{display:block;width:auto;padding:0;border:0;min-width:0}
 .ax-fees .ax-fees__r>th{font-size:14px;line-height:1.45}
 .ax-fees__amt{text-align:right!important;font-size:14px}
 .ax-fees__amt small{font-size:12px}
 .ax-fees__when{font-size:12px;line-height:1.5;align-self:center}
 .ax-fees__act{justify-self:end}
 .ax-fees__d:not([hidden]){display:block}
 .ax-fees__d td{display:block}
 .ax-dbtn{min-height:44px}
}

/* Consistent alignment and compact controls across the review. */
.ax-card__logo{width:48px;height:48px;border-radius:10px}
.ax-card__top{align-items:center;gap:12px}
.ax-sim__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--ax-edge);border-radius:10px;background:var(--ax-recess)}
.ax-sim__t{min-width:0;min-height:44px;padding:5px 4px;gap:4px;font-size:12px;border:0;border-radius:6px;background:transparent}
.ax-sim__t i{flex-shrink:0;width:16px;height:16px;font-size:9px}
.ax-sim__t[aria-pressed="true"]{background:rgba(240,206,128,.15);color:#ffe1a0;box-shadow:inset 0 0 0 1px rgba(240,206,128,.32)}
.ax-sim__t[aria-pressed="true"] i{color:#ffe1a0;background:rgba(240,206,128,.12)}
.ax-pay__scope{max-width:none;text-wrap:wrap}
#axLadder{min-width:0;table-layout:fixed;font-variant-numeric:tabular-nums}
#axLadder th:first-child{width:26%;text-align:left}
#axLadder th:not(:first-child),#axLadder td{text-align:right;width:37%}
#axLadder th,#axLadder td{padding:12px 18px}
#axLadder caption{caption-side:bottom;padding:12px 18px;border-top:1px solid var(--ax-line);font-size:11px;line-height:1.5;color:#a2adbd}
#axLadder tbody tr:last-child{background:rgba(240,206,128,.055)}
.ax-fees__amt{font-variant-numeric:tabular-nums}
.ax-fees__r>th,.ax-fees__r>td{vertical-align:middle}
.ax-dbtn{border:0;border-radius:5px;min-height:44px;padding:0 8px;color:var(--ax-champagne);background:transparent}
.ax-dbtn::after{content:" +";padding-left:6px}
.ax-dbtn[aria-expanded="true"]::after{content:" −"}
@media(max-width:640px){
 .ax-card__logo{width:44px;height:44px}
 .ax-sim__t{font-size:11px;gap:3px;padding:4px 2px}
 .ax-fees .ax-fees__r{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:4px 12px;padding:14px 16px;align-items:center}
 .ax-fees__r>th{grid-column:1;grid-row:1}
 .ax-fees__amt{grid-column:2;grid-row:1}
 .ax-fees__when{grid-column:1;grid-row:2}
 .ax-fees__act{grid-column:2;grid-row:2}
 .ax-fees__amt small{display:none}
 .ax-fees .ax-fees__r>th{font-size:13px}
 .ax-fees__amt{font-size:13px}
 .ax-fees caption{font-size:11px;padding:12px 16px}
 #axLadder th,#axLadder td{padding:11px 12px;font-size:13px}
 #axLadder thead th{font-size:10px}
 .ax-pay{gap:24px}.ax-pay__b+.ax-pay__b{padding-top:24px}
}

/* Compact catalogue: all four offers visible on desktop; swipe on phones only. */
#axCards{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;padding-bottom:0;gap:0 12px}
.ax-carousel-nav{display:none}
#axCards>.ax-card{padding:10px 14px 12px;border-radius:12px;grid-row:1 / -1}
.ax-card__badge{min-height:19px;padding-bottom:5px}
.ax-card__flag{font-size:8px;letter-spacing:.045em;padding:3px 5px}
.ax-card__top{gap:9px;padding-bottom:10px}
.ax-card__logo{width:40px;height:40px;border-radius:8px}
.ax-card__name{font-size:16px;line-height:1.2}
.ax-card__meta{gap:4px;font-size:11px}
.ax-card__family{min-width:0;font-size:10px;padding:3px 5px}
.ax-price__row{padding-top:12px}
.ax-price__now{font-size:27px}
.ax-price__sub{font-size:11px;padding-top:5px}
.ax-card__fee{padding:10px 0;font-size:12px}
.ax-total{padding:10px 0;gap:8px}
.ax-total__l{font-size:9px;letter-spacing:.04em}
.ax-total__v{font-size:16px}
.ax-card__cta{padding-bottom:12px}
.ax-card__cta .ax-btn{min-height:40px;height:40px;padding:0 8px;font-size:13px;border-radius:7px}
.ax-card__face--front{padding:10px;border-radius:8px}
.ax-card__face--back{display:none}
.ax-card.is-back .ax-card__face--front{display:none}
.ax-card.is-back .ax-card__face--back{display:grid}
.ax-panel__t{font-size:9px;padding-bottom:7px}
.ax-facts li{padding:8px 0;gap:8px;align-items:baseline}
.ax-fact__k,.ax-fact__v{font-size:12px;line-height:1.35}
.ax-fact__v small{font-size:10px}
.ax-more{padding-top:5px}
.ax-more>summary{min-height:32px;font-size:11px}
.ax-card__rules{padding-top:10px}
.ax-flip{height:36px;font-size:12px;border-radius:7px}
.ax-rules li{padding:8px 0}
.ax-rule__n{font-size:12px}
.ax-rule__b{font-size:11px}
@media(min-width:641px) and (max-width:999px){
 #axCards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:14px}
 #axCards>.ax-card{grid-row:auto;display:flex;flex-direction:column}
 .ax-card__face,.ax-facts,.ax-rules{display:block}
 .ax-card__face--back,.ax-card.is-back .ax-card__face--front{display:none}
 .ax-card.is-back .ax-card__face--back{display:block}
}
@media(max-width:640px){
 .ax-carousel-nav{display:flex;margin-bottom:8px}
 .ax-carousel-nav button{width:36px;height:36px;font-size:18px}
 #axCards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:88%;grid-template-rows:auto;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:10px}
 #axCards>.ax-card{grid-row:1;display:flex;padding:10px 12px 12px}
 .ax-card__logo{width:40px;height:40px}
 .ax-card__name{font-size:16px}
 .ax-card__face,.ax-card.is-back .ax-card__face--back{display:block}
 .ax-card__face--back,.ax-card.is-back .ax-card__face--front{display:none}
 .ax-card__cta .ax-btn,.ax-flip{height:44px;min-height:44px}
 .ax-card__rules{margin-top:0}
}

/* Shared gold outlines and consistent editorial alignment. */
.ax{--ax-edge:rgba(219,183,104,.28)}
.ax-card,.ax-path__s,.ax-tw,.ax-fees,.ax-rb,.ax-plat,.ax-sim{border-color:rgba(219,183,104,.28)}
.ax-card.is-best{border-color:rgba(240,206,128,.6)}
.ax-path__s--live{border-color:rgba(219,183,104,.4)}
@media(min-width:1105px){
 .ax-path{grid-template-rows:repeat(6,auto);row-gap:0}
 .ax-path__s{display:grid;grid-template-rows:subgrid;grid-row:1 / span 6}
 .ax-path__go{margin-top:0;align-self:end}
}
@media(min-width:901px){
 .ax-rb__cols,.ax-rb__head{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) 252px 24px;gap:14px}
 .ax-rb__badge{white-space:nowrap;max-width:none}
}
#axProc{border:1px solid var(--ax-edge);border-radius:12px;background:var(--ax-surface);overflow:hidden}
#axProc li{grid-template-columns:minmax(0,1fr) 230px;padding:16px 20px;gap:6px 24px;align-items:center}
#axProc .ax-crit__k{color:#e0e4eb;font-weight:550}
#axProc .ax-crit__v{text-align:left;border-left:1px solid var(--ax-line);padding-left:20px;font-variant-numeric:tabular-nums}
#axProc .ax-crit__n{grid-column:1 / -1;max-width:none;font-size:12px}
#axProc li:nth-child(4){background:rgba(240,206,128,.055)}
@media(max-width:640px){
 #axProc li{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 16px}
 #axProc .ax-crit__v{border:0;padding:0;text-align:left;font-size:15px}
 #axProc .ax-crit__n{font-size:12px}
 .ax-rb__badge{max-width:100%;font-size:11px;white-space:normal}
}

/* Mobile navigation remains available above the narrower comparison rail. */
.ax-card__logo{object-fit:contain;object-position:center;padding:4px;background:#080e26;border-color:rgba(219,183,104,.4);box-sizing:border-box}
@media(max-width:640px){
 .ax{--ax-stick:126px}
 .ax-nav{position:sticky;top:62px;z-index:35;margin-top:16px}
 .ax-nav .ax-shell{width:calc(100% - 16px)}
 .ax-nav__in{width:100%;border-color:rgba(219,183,104,.25)}
 .ax-nav a{height:36px;padding:0 12px;font-size:12px}
 #axCards{grid-auto-columns:70.4%}
 .ax-card__top{grid-template-columns:44px minmax(0,1fr);gap:8px}
 .ax-card__logo{width:44px;height:44px}
 .ax-card__name{font-size:15px}
 .ax-card__meta{font-size:10px;gap:4px}
 .ax-card__family{font-size:9px}
 .ax-facts li{grid-template-columns:minmax(0,1fr) auto;gap:6px}
}

/* Trading-terminal treatment for the illustrative equity charts. */
.ax-chart{padding:14px 12px 12px;background:#0d1420;border-color:rgba(219,183,104,.2)}
.ax-chart__head{display:flex;justify-content:space-between;gap:8px;font-size:9px;letter-spacing:.06em;color:#8998ac;padding:0 2px 10px;border-bottom:1px solid rgba(180,199,222,.09);margin-bottom:8px}
.ax-chart__head b{color:#dce5f0;margin-left:6px}
.ax-ch__grid{stroke:rgba(177,195,221,.1);stroke-dasharray:none;stroke-width:.6}
.ax-ch__session{stroke:rgba(177,195,221,.2);stroke-dasharray:3 5;stroke-width:.7}
.ax-ch__bal{stroke:#becfe4;stroke-width:1.65;stroke-linecap:round}
.ax-ch__thr{stroke:#e2bd6c;stroke-width:1.7}
.ax-ch__t{font-size:10px;fill:#92a1b6}
.ax-ch__peak{fill:#e5edf6}
.ax-ch__t--ok{fill:#e2bd6c}.ax-ch__t--bad{fill:#ff8e8e}
.ax-leg__i--bal{border-color:#becfe4}
@media(max-width:640px){.ax-chart{padding:10px 6px}.ax-chart__head{font-size:8px;letter-spacing:0}.ax-chart svg{min-height:175px}.ax-chart figcaption{padding:0 5px}}

@media(max-width:640px){.ax-chart .ax-ch__t{font-size:16px}.ax-panel__h{flex-wrap:wrap;gap:8px}.ax-panel__h .ax-h3{flex:1 0 100%}}

/* Keep axis labels inside the canvas and outcome labels away from data. */
.ax-chart svg{overflow:hidden}
.ax-chart__result{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;border-top:1px solid rgba(180,199,222,.12);border-bottom:1px solid rgba(180,199,222,.12);margin:0 2px 12px;font-size:12px}
.ax-chart__result>span{font-size:9px;color:#97a5b8;letter-spacing:.04em}
.ax-chart__result strong{font-weight:600;color:#e2bd6c}
.ax-chart__result.is-breach strong{color:#ff9999}
@media(max-width:640px){.ax-chart__result{flex-wrap:wrap;padding:9px 4px;gap:5px}.ax-chart__result>span{font-size:8px}.ax-chart__result strong{font-size:11px}}

/* Graphic offer banners — shared by all three placements. */
.ax .ax-offer{position:relative;isolation:isolate;overflow:hidden;grid-template-columns:minmax(170px,.85fr) minmax(220px,1.2fr) minmax(240px,1fr);gap:8px 30px;padding:14px 32px;background:radial-gradient(ellipse at 45% 120%,#123075 0,transparent 65%),#060b16;border:1px solid rgba(224,188,110,.45);border-radius:18px}
.ax .ax-offer:before{content:"";position:absolute;z-index:-1;width:470px;height:470px;border:1px solid #236bff40;border-radius:50%;left:20%;top:-300px;box-shadow:0 0 0 26px #236bff0b,0 0 0 52px #236bff08;pointer-events:none}
.ax .ax-offer__logo{width:100%;height:auto;min-height:70px;background:none;border:0;border-radius:0;padding-right:22px;border-right:1px solid #ffffff24}
.ax .ax-offer__logo img{width:100%;max-width:260px;height:auto;border-radius:0;object-fit:contain}
.ax .ax-offer__deal{gap:5px;white-space:nowrap}
.ax .ax-offer__deal small{color:#adbedb;font-size:11px;letter-spacing:.18em}
.ax .ax-offer__deal b{font-size:clamp(40px,5vw,72px);font-weight:850;letter-spacing:-.045em;line-height:1;background:linear-gradient(180deg,#b5d4ff,#3c81ff 65%,#1460ee);color:#77abff;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-transform:uppercase}
.ax .ax-offer__txt{grid-column:1/3;grid-row:2}
.ax .ax-offer__h{font-size:15px;font-weight:600;color:#edf2ff}
.ax .ax-offer__p{font-size:12px;color:#a9b5c9}
.ax .ax-offer__act{grid-column:3;grid-row:1/3;display:grid;gap:10px;min-width:0;width:100%}
.ax .ax-offer .ax-code{background:#f4f7ff;color:#10234c;border:1px solid #fff;min-height:50px;width:100%;font-size:14px;border-radius:9px}
.ax .ax-code__t b{color:#1765ed;font-size:19px;letter-spacing:.025em}
.ax .ax-offer__go{width:100%;min-height:46px;border-radius:9px}
.ax .ax-offer__fine{padding-top:6px;border-top:1px solid #ffffff12;color:#98a5bb;line-height:1.5}
@media(max-width:700px){
.ax .ax-offer{grid-template-columns:1fr 1fr;padding:10px 18px;gap:6px 14px}
.ax .ax-offer__logo{padding-right:12px;min-height:50px}
.ax .ax-offer__deal b{font-size:clamp(30px,8vw,48px)}
.ax .ax-offer__deal small{font-size:10px}
.ax .ax-offer__txt{grid-column:1/-1;grid-row:2}
.ax .ax-offer__act{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:1fr;gap:8px}
.ax .ax-offer__fine{font-size:11px;margin:0}
}

/* Compact version of the graphic coupon above the accounts. */
.ax .ax-offer--compact{max-width:960px;margin:0 auto 26px;padding:18px 22px;grid-template-columns:minmax(150px,.9fr) minmax(170px,1fr) minmax(230px,1.15fr);gap:10px 22px;border-radius:14px}
.ax .ax-offer--compact .ax-offer__logo{min-height:50px;padding-right:18px}
.ax .ax-offer--compact .ax-offer__logo img{max-width:210px}
.ax .ax-offer--compact .ax-offer__deal b{font-size:42px}
.ax .ax-offer--compact .ax-offer__deal small{font-size:9px}
.ax .ax-offer--compact .ax-offer__txt{display:none}
.ax .ax-offer--compact .ax-offer__act{grid-row:1;gap:7px}
.ax .ax-offer--compact .ax-code{min-height:40px;padding:8px 12px;font-size:12px}
.ax .ax-offer--compact .ax-code__t b{font-size:15px}
.ax .ax-offer--compact .ax-offer__go{min-height:40px;padding:8px 12px;font-size:12px}
.ax .ax-offer--compact .ax-offer__fine{font-size:10px;padding-top:8px;margin:0}
@media(max-width:700px){
.ax .ax-offer--compact{grid-template-columns:1fr 1fr;padding:15px;gap:12px 14px;margin-bottom:24px}
.ax .ax-offer--compact .ax-offer__logo{min-height:40px;padding-right:12px}
.ax .ax-offer--compact .ax-offer__deal b{font-size:clamp(27px,8vw,36px)}
.ax .ax-offer--compact .ax-offer__act{grid-column:1/-1;grid-row:2;gap:7px}
.ax .ax-offer--compact .ax-code,.ax .ax-offer--compact .ax-offer__go{min-height:44px}
.ax .ax-offer--compact .ax-offer__fine{font-size:9px;line-height:1.5}
}

/* Standalone review: the host website supplies its main menu and footer. */
.ax{--ax-stick:72px}
.ax-nav{top:12px}
.ax-hero{padding-top:36px}
.ax .ax-offer--compact{max-width:none;width:100%;padding:12px 20px;grid-template-columns:minmax(140px,.8fr) minmax(155px,.8fr) minmax(330px,1.5fr);gap:8px 22px}
.ax .ax-offer--compact .ax-offer__act{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10px}
.ax .ax-offer--compact .ax-offer__logo{min-height:42px}
.ax .ax-offer--compact .ax-offer__logo img{max-width:185px}
.ax .ax-offer--compact .ax-offer__deal b{font-size:36px}
.ax .ax-offer--compact .ax-offer__fine{padding-top:6px}
@media(max-width:700px){
.ax .ax-offer--compact{grid-template-columns:1fr 1fr;padding:12px;gap:10px 12px}
.ax .ax-offer--compact .ax-offer__deal b{font-size:clamp(27px,8vw,36px)}
.ax .ax-offer--compact .ax-offer__act{gap:8px}
.ax .ax-offer--compact .ax-code{padding:6px;font-size:10px;gap:5px}
.ax .ax-offer--compact .ax-code__t b{font-size:12px;letter-spacing:0}
.ax .ax-offer--compact .ax-code__i{width:12px;height:12px}
.ax .ax-offer--compact .ax-offer__go{font-size:11px;padding:6px}
}

/* Compact account summaries; complete comparison stays one click away. */
#axCards{--ax-rows:repeat(9,auto)}
#axCards .ax-card__face{grid-row:8;display:block}
#axCards .ax-card__face--back,#axCards .is-back .ax-card__face--front{display:none}
#axCards .is-back .ax-card__face--back{display:block}
#axCards .ax-card__rules{grid-row:9;padding-top:8px}
#axCards .ax-facts,#axCards .ax-rules{display:block;grid-row:auto}
#axCards .ax-facts li{padding:9px 0;min-height:34px}
#axCards .ax-facts li:first-child{border-top:0}
#axCards .ax-card__face--front{padding:0 10px;background:rgba(5,10,20,.25)}
#axCards .ax-more{grid-row:auto;padding-top:2px}
#axCards .ax-more>summary{min-height:36px}
#axCards .ax-card__cta{padding-bottom:8px}
#axCards .ax-flip{background:transparent;border-color:rgba(226,189,108,.22)}
.ax-mcmp{display:none!important}
.ax-cmp{display:block!important;margin-top:18px}
.ax-cmp__in{padding:0;position:relative;overscroll-behavior-x:contain}
#axCmpT{table-layout:fixed;min-width:800px;width:100%;font-variant-numeric:tabular-nums}
#axCmpT th,#axCmpT td{padding:13px 16px;vertical-align:middle;text-align:right;font-size:13px;line-height:1.4}
#axCmpT tr>:first-child{width:21%;text-align:left;background:#141c2a;position:sticky;left:0;z-index:1}
#axCmpT thead th{background:#101725;text-transform:none;letter-spacing:0;font-size:13px;color:#e6c57b}
#axCmpT small{display:block;font-size:11px;font-weight:400;color:#aab5c7;margin-top:3px}
#axCmpT td{background:#111925}
#axCmpT .ax-compare-total>*{background:#222536;color:#f1d390;font-weight:700}
#axCmpT .ax-compare-cta{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:6px 12px;border:1px solid #cfaf6b66;border-radius:7px;color:#f1d390;text-decoration:none;font-size:12px}
#axCmpT .ax-compare-cta:hover{background:#cfaf6b15}
.ax-cmp__in:focus-visible{outline:2px solid #e2bd6c;outline-offset:-3px}
@media(max-width:640px){
#axCards .ax-facts li{padding:8px 0;min-height:33px}
#axCards .ax-card__face--front{padding:0 8px}
#axCards .ax-more>summary{min-height:44px}
.ax-cmp>summary{gap:4px 10px;padding:13px 14px}
.ax-cmp>summary b{font-size:14px}
.ax-cmp>summary span{font-size:11px;flex-basis:80%}
#axCmpT{min-width:760px}
#axCmpT th,#axCmpT td{padding:11px 12px;font-size:12px}
#axCmpT tr>:first-child{width:140px;box-shadow:3px 0 6px #0002}
}

#axCards{scroll-margin-top:76px}
.ax-compare-hint{display:none}
@media(max-width:800px){.ax-compare-hint{display:block;margin:0;padding:10px 14px;color:#aab5c7;font-size:11px;border-bottom:1px solid var(--ax-line)}}

/* Search results must sit above the sticky section navigation. */
.ax-hero:has(.ax-find.is-open){z-index:60}
.ax .ax-find__box input:focus-visible{outline:none;box-shadow:none}
.ax .ax-find__box:focus-within{border-color:#d9b66c;box-shadow:0 0 0 2px #d9b66c25}
/* Reduce the second coupon without shrinking its supporting copy. */
.ax #axOffer1 .ax-offer{padding:10px 24px;gap:6px 24px}
.ax #axOffer1 .ax-offer__logo{min-height:50px}
.ax #axOffer1 .ax-offer__logo img{max-width:210px}
.ax #axOffer1 .ax-offer__deal b{font-size:clamp(34px,4vw,54px)}
.ax #axOffer1 .ax-offer__h{display:none}
.ax #axOffer1 .ax-code,.ax #axOffer1 .ax-offer__go{min-height:44px;padding:8px 12px}
.ax #axOffer1 .ax-offer__fine{padding-top:6px}
#axCmpT .ax-compare-cta{background:var(--gold,#ffb600);border-color:var(--gold,#ffb600);color:#101725;font-weight:700;min-height:44px;width:100%;max-width:160px}
#axCmpT .ax-compare-cta:hover{background:#ffca4a;border-color:#ffca4a}
@media(max-width:700px){
.ax #axOffer1 .ax-offer{padding:12px 15px;gap:8px 12px}
.ax #axOffer1 .ax-offer__deal b{font-size:clamp(28px,8vw,40px)}
.ax #axOffer1 .ax-offer__logo{min-height:40px}
}

/* Subtle vertical guides keep each offer easy to follow. */
#axCmpT tr > * + *{border-left:1px solid rgba(217,182,108,.18)}

/* Keep the introductory offer close to the section navigation. */
.ax #accounts{padding-top:24px}
@media(max-width:700px){.ax #accounts{padding-top:18px}}