/* ============================================================
   The comparator.

   Two objects side by side, both cut from the hero dock's material:
   hairline edge, a reflection along the top, a contact shadow, generous
   radius. The dock on the left names the firms; the panel on the right
   holds one firm's programs. Nothing is nested inside a second frame,
   because a frame inside a frame reads as a mistake rather than as depth.

   Gold is spent in three places only: the control you have pressed, the
   mark on the firm that pays us, and a discounted price. Everywhere else
   the hierarchy is carried by size and weight.

   Rows run in the order the decision is actually made — what it costs,
   what the rules are, what you are paid, and what you trade on.
   ============================================================ */

.cx{
  --cx-surface:#131A27;
  --cx-head:#0E1420;
  --cx-hover:#19212F;
  --cx-edge:rgba(237,232,223,.1);
  --cx-line:rgba(237,232,223,.065);
  --cx-gold:#F0CE80;
  --cx-ink:#EDE8DF;
  --cx-dim:#8D9BB1;

  position:relative;z-index:1;
  padding:54px 24px 42px;
  color:var(--cx-ink);
  font-family:Archivo,Arial,sans-serif;
  scroll-margin-top:105px;
}
.cx-shell{max-width:1340px;margin:0 auto}
.cx button{font:inherit;cursor:pointer}
.cx :focus-visible{outline:2px solid #F7C44D;outline-offset:3px}
.cx-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.cp-kicker{font-size:10px;font-weight:650;letter-spacing:.16em;color:#ffc02b}

/* The surface every box in this section is cut from. */
.cx-card,.cx-dock,.cx-stage{
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(237,232,223,.05) 0%,rgba(237,232,223,0) 140px),
    var(--cx-surface);
  border:1px solid var(--cx-edge);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6),
             inset 0 1px 0 rgba(237,232,223,.11);
}

/* ---------- heading ---------------------------------------------- */

/* A centred column, not a heading on the left with a link pushed to the
   right. The h2 is the line a reader uses to place the section, and a line
   with something else sitting beside it is not centred — it is off to one
   side by a smaller amount. */
.cx-heading{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:9px;margin-bottom:18px;
}
.cx-heading h2{
  /* Sized to set on one line at every width this page is tested at, 360px
     included: five words at 6.9vw is about 320px of a 328px column there,
     and the ceiling stops it from becoming a second hero on a wide screen.

     Not nowrap. A reader who has enlarged the text past this point has a
     right to all five words on two lines rather than four of them on one,
     and a heading that overflows its section is worse than one that wraps.
     -.022em, not the -.045em that was here: that was tight enough to read
     as a condensed cut, and narrowing letters is the wdth axis's job, not
     the tracking's. */
  font-size:clamp(22px,6.9vw,38px);line-height:1.14;font-weight:600;
  letter-spacing:-.022em;margin:2px 0 0;color:#fff;
}
.cx-heading p{font-size:13.5px;line-height:1.6;color:#AEB9CA;margin:0;max-width:52ch}
.cx-heading>a{
  flex:0 0 auto;margin-top:3px;
  font-size:11px;color:#CFB16B;text-decoration:none;
  border:1px solid rgba(199,164,77,.3);border-radius:7px;padding:10px 13px;
}
.cx-heading>a:hover{border-color:rgba(240,206,128,.6);color:#F7DEA0}

/* ---------- the two views ---------------------------------------- */

/* The switch is a script's job, so it only exists once the script runs. */
.cx-modes{display:none;gap:2px;padding:3px;margin:0 auto 16px;width:max-content;
  border-radius:9px;background:rgba(8,13,24,.55)}
.cx.is-js .cx-modes{display:flex}
.cx-modes button{
  border:0;background:transparent;color:#A3B0C3;
  font-size:12px;font-weight:550;border-radius:6px;padding:10px 16px;
  transition:color .15s,background-color .15s,box-shadow .15s;
}
.cx-modes button:hover{color:#fff}
/* One hairline of gold on the selected view, and that is the whole accent.
   The fill is what says "selected"; the gold says which selected thing this
   page considers its own. */
.cx-modes button[aria-pressed=true]{
  background:#232D3F;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(240,206,128,.3);
}

/* `:not([hidden])` is load-bearing, not tidiness. An author `display` on the
   element beats the user agent's `[hidden]{display:none}` outright — author
   rules win over UA rules whatever the specificity — so a plain
   `.cx-explore{display:grid}` would make the hidden attribute decorative.
   Both the script's view switch and the no-script fallback set that attribute
   and nothing else, so without this the cross-firm view would appear *under*
   a still-visible panel instead of in place of it. */
/* 268px, up from 238. Ten firms are chosen from by their marks as much as by
   their names, so the tile grew with the column and the row it sits in got a
   little more air. It stops there: the panel beside it has to hold four Apex
   programmes at 210px each plus a 168px label column, which is 1008px of the
   1016px this width leaves at 1440. One more step and the programmes would be
   paying for the dock. */
.cx-explore:not([hidden]){display:grid;grid-template-columns:268px minmax(0,1fr);gap:16px;align-items:start}

.cx-cross__lede{font-size:12.5px;color:#9BAAC0;margin:0 0 14px}
.cx-cross__lede b{color:#D8E1EE;font-weight:550}
/* With the script running the two views are swapped, so this line would be
   telling you to press a button you have already pressed. */
.cx.is-js .cx-cross__lede{display:none}

/* ---------- the firm dock ---------------------------------------- */

.cx-dock{
  display:flex;flex-direction:column;gap:3px;padding:9px;
  position:sticky;top:96px;
}
.cx-pick{
  display:flex;align-items:center;gap:12px;
  padding:10px 11px;border:0;border-radius:12px;
  background:transparent;color:#AFBCCE;text-align:left;
  position:relative;transition:background-color .16s,color .16s;
}
.cx-pick img{
  flex:0 0 auto;width:38px;height:38px;object-fit:cover;
  border-radius:22.3%;background:var(--tile,#232A3A);
  border:1px solid rgba(237,232,223,.09);
  box-shadow:0 3px 9px rgba(0,0,0,.38),inset 0 1px 0 rgba(237,232,223,.09);
}
.cx-pick__name{
  font-size:13px;font-weight:500;letter-spacing:-.015em;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;
}
.cx-pick:hover{background:var(--cx-hover);color:#fff}
/* The chosen firm is not a shade darker: it is lit, lettered in white, and
   held by a gold bar at the edge. You should never have to hunt for it. */
.cx-pick.is-on{
  background:linear-gradient(90deg,rgba(240,206,128,.13),rgba(240,206,128,.03));
  color:#fff;box-shadow:inset 2px 0 0 var(--cx-gold);
}
.cx-pick.is-on .cx-pick__name{font-weight:600}
.cx-pick.is-on img{border-color:rgba(240,206,128,.4)}

/* ---------- the panel -------------------------------------------- */

.cx-stage{padding:20px 20px 18px;min-width:0}

.cx-stage__top{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.cx-stage__logo{
  flex:0 0 auto;width:52px;height:52px;object-fit:cover;
  border-radius:22.3%;background:var(--tile,#232A3A);
  border:1px solid rgba(237,232,223,.1);
  box-shadow:0 5px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(237,232,223,.1);
}
.cx-stage__id{flex:1 1 220px;min-width:0}
.cx-stage__id h3{
  font-size:21px;font-weight:600;letter-spacing:-.035em;margin:1px 0 7px;color:#fff;
}
.cx-stage__tags{display:flex;flex-wrap:wrap;gap:7px;margin:0}
.cx-tag{
  font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#93A1B6;border:1px solid rgba(237,232,223,.14);
  border-radius:5px;padding:4px 7px;white-space:nowrap;
}
.cx-tag--paid{color:var(--cx-gold);border-color:rgba(240,206,128,.34)}
.cx-tag--date{color:#7E8DA3}

.cx-stage__acts{display:flex;gap:8px;margin-left:auto}
.cx-btn{
  display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 14px;
  border-radius:8px;border:1px solid rgba(237,232,223,.17);background:transparent;
  color:#CBD6E5;font-size:11.5px;font-weight:550;text-decoration:none;
  transition:background-color .15s,color .15s,border-color .15s;
}
.cx-btn:hover{border-color:rgba(237,232,223,.34);color:#fff}
.cx-btn--go{border-color:rgba(240,206,128,.42);color:#F2DCA8}
.cx-btn--go:hover{background:linear-gradient(180deg,#F7DEA0,#DFB85F);color:#141B28;border-color:transparent}
/* Inside a table cell, where the button is one line of a row rather than the
   header of a panel. The 44px floor comes back at 850px, where the pointer
   is a thumb. */
.cx-btn--sm{min-height:31px;padding:0 11px;font-size:11px}

.cx-stage__blurb{font-size:12.5px;line-height:1.75;color:#AEBCD0;margin:14px 0 0;max-width:86ch}
.cx-aside{font-size:11px;line-height:1.7;color:#8D9BB1;margin:8px 0 0;max-width:86ch}
/* A figure nobody could re-read today says so, in place, rather than wearing
   today's date. */
.cx-stale{
  font-size:11px;line-height:1.7;color:#D9C48A;margin:12px 0 0;max-width:86ch;
  padding:9px 12px;border-radius:9px;
  background:rgba(240,206,128,.06);border:1px solid rgba(240,206,128,.2);
}
.cx-empty{font-size:12.5px;line-height:1.75;color:#AEBCD0;margin:20px 0 0;max-width:70ch}

/* ---------- controls --------------------------------------------- */

.cx-ctl{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--cx-line);
}
.cx-segments{display:flex;gap:2px;padding:3px;border-radius:9px;background:rgba(8,13,24,.55)}
.cx-segments button{
  border:0;background:transparent;color:#A3B0C3;
  font-size:12px;font-weight:550;border-radius:6px;padding:10px 15px;
  transition:color .15s,background-color .15s;
}
.cx-segments button:hover{color:#fff}
.cx-segments button[aria-pressed=true]{
  background:linear-gradient(180deg,#F7DEA0,#DFB85F);color:#141B28;
  box-shadow:inset 0 1px 0 rgba(255,250,236,.55);
}
.cx-sizes{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--cx-dim)}
.cx-sizes>div{display:flex;gap:4px}
.cx-sizes button{
  border:1px solid transparent;background:transparent;color:#B5C0D0;
  border-radius:7px;font-size:12px;padding:9px 11px;
  font-variant-numeric:tabular-nums;transition:color .15s,border-color .15s;
}
.cx-sizes button:hover{color:#fff}
.cx-sizes button[aria-pressed=true]{
  color:#F7DEA0;background:rgba(240,206,128,.08);border-color:rgba(240,206,128,.38);
}
/* A size this firm does not sell is shown and disabled, not hidden: knowing
   it is not on offer is part of the comparison. */
.cx-sizes button[disabled]{
  color:#5C687C;cursor:not-allowed;text-decoration:line-through;
  text-decoration-color:rgba(140,155,177,.5);
}
.cx-sizes button[disabled]:hover{color:#5C687C}

.cx-discount{
  margin-left:auto;position:relative;display:flex;align-items:center;gap:9px;
  font-size:12px;white-space:nowrap;cursor:pointer;
}
.cx-discount input{position:absolute;opacity:0;width:100%;height:100%;left:0;margin:0;cursor:pointer}
.cx-switch{
  width:32px;height:18px;border-radius:20px;background:#394256;
  position:relative;transition:background-color .15s;
}
.cx-switch:after{
  content:'';position:absolute;width:12px;height:12px;top:3px;left:3px;
  border-radius:50%;background:#D1D8E3;transition:transform .15s;
}
.cx-discount input:checked+.cx-switch{background:var(--cx-gold)}
.cx-discount input:checked+.cx-switch:after{transform:translateX(14px);background:#141B28}
.cx-discount input:focus-visible+.cx-switch{outline:2px solid var(--cx-gold);outline-offset:4px}

.cx-note{font-size:10px;color:#7E8DA3;margin:12px 0 0}

/* ---------- the three reading levels ----------------------------- */

/* Level one and two, switched from here. Four controls, each an icon and a
   word: the icon is what the eye finds the second time, the word is what
   makes it unambiguous the first. They sit directly above the rows they
   govern, because a filter placed anywhere else is a filter you have to
   remember you set. */
.cx-views{
  display:flex;gap:2px;padding:3px;margin:12px 0 0;width:max-content;max-width:100%;
  border-radius:10px;background:rgba(8,13,24,.55);flex-wrap:wrap;
}
.cx-views button{
  display:inline-flex;align-items:center;gap:7px;
  border:0;background:transparent;color:#A3B0C3;
  font-size:11.5px;font-weight:550;border-radius:7px;padding:9px 13px;
  transition:color .14s,background-color .14s,box-shadow .14s;
}
.cx-views button:hover{color:#fff}
/* The selected band is lit and lettered in white, with one hairline of gold —
   the same vocabulary as the view switch above the section, so a reader who
   has learnt one control has learnt this one. */
.cx-views button[aria-pressed=true]{
  background:#232D3F;color:#fff;box-shadow:inset 0 0 0 1px rgba(240,206,128,.3);
}
.cx-views button[aria-pressed=true] .cx-ico{color:var(--cx-gold)}
.cx-ico{
  flex:0 0 auto;width:14px;height:14px;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
  color:#8795AC;transition:color .14s;
}
.cx-views button:hover .cx-ico{color:#C9D4E3}

/* ---------- the criteria grid ------------------------------------ */

.cx-grid{
  margin-top:14px;overflow:auto;overscroll-behavior-x:contain;
  border-top:1px solid var(--cx-edge);
  scrollbar-width:thin;scrollbar-color:rgba(237,232,223,.2) transparent;
}
.cx-grid::-webkit-scrollbar{width:9px;height:9px}
.cx-grid::-webkit-scrollbar-thumb{background:rgba(237,232,223,.18);border-radius:9px}
.cx-grid::-webkit-scrollbar-track{background:transparent}

.cx-grid table{
  width:100%;border-collapse:separate;border-spacing:0;text-align:left;
}
.cx-grid thead th{
  background:var(--cx-head);color:#8795AC;
  font-weight:500;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:12px 14px;vertical-align:bottom;min-width:210px;
  border-bottom:1px solid rgba(237,232,223,.14);
}
.cx-prog{
  display:block;font-size:12.5px;font-weight:600;letter-spacing:-.015em;
  text-transform:none;color:#fff;
}
.cx-grid thead th small,.cx-grid tbody th small{
  display:block;margin-top:3px;
  font-size:9.5px;font-weight:400;letter-spacing:0;text-transform:none;color:#6E7C93;
}

/* The label column has to cover the cells sliding under it, so it is opaque
   and carries its own shadow once the table starts to move. */
.cx-grid tbody th[scope=row],.cx-grid thead th:first-child{
  position:sticky;left:0;z-index:2;min-width:168px;width:168px;
  background:var(--cx-surface);
  box-shadow:7px 0 14px -8px rgba(0,0,0,.55);
}
.cx-grid thead th:first-child{z-index:3;background:var(--cx-head)}
.cx-grid tbody th[scope=row]{
  font-size:11.5px;font-weight:550;color:#C9D4E3;padding:15px 14px;vertical-align:top;
}

.cx-grid tbody td{
  padding:15px 14px;vertical-align:top;
  border-bottom:1px solid var(--cx-line);
  border-left:1px solid var(--cx-line);
  transition:background-color .14s;
}
.cx-grid tbody th[scope=row]{border-bottom:1px solid var(--cx-line);transition:background-color .14s}

/* The row being read is lit, faintly, all the way across — including the
   label column, which is opaque and would otherwise be the one cell that
   stayed dark. Enough to follow a figure back to its criterion on a wide
   screen; not enough to look like a selection you have made. Focus counts as
   reading, so a keyboard gets the same line. */
.cx-grid tbody tr:not(.cx-group):hover>td,
.cx-grid tbody tr:not(.cx-group):hover>th[scope=row],
.cx-grid tbody tr:not(.cx-group):focus-within>td,
.cx-grid tbody tr:not(.cx-group):focus-within>th[scope=row]{background:var(--cx-hover)}

/* The action under the column the reader has just read down. It is a foot,
   not a row of data: no top border fighting the last criterion, and the label
   column says what the row is for rather than naming a criterion. */
.cx-grid tfoot th[scope=row],.cx-grid tfoot td{
  padding:14px;vertical-align:top;border-top:1px solid var(--cx-edge);
}
.cx-grid tfoot th[scope=row]{
  position:sticky;left:0;z-index:2;min-width:168px;width:168px;
  background:var(--cx-surface);box-shadow:7px 0 14px -8px rgba(0,0,0,.55);
  font-size:11.5px;font-weight:550;color:#C9D4E3;text-align:left;
}
.cx-grid tfoot td{border-left:1px solid var(--cx-line)}
.cx-grid tfoot .cx-btn{width:100%;justify-content:center}

/* The four groups are named in the table rather than guessed at from the
   order of the rows. */
.cx-group th{
  position:static !important;box-shadow:none !important;width:auto !important;
  background:rgba(8,13,24,.5) !important;
  padding:9px 14px !important;
  font-size:9px !important;font-weight:650 !important;letter-spacing:.14em;
  text-transform:uppercase;color:#C7A86A !important;
  border-top:1px solid var(--cx-edge);border-bottom:1px solid var(--cx-line);
}

.cx-grid td strong{
  display:block;font-size:20px;font-weight:500;line-height:1.25;
  letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;
}
.cx-val{display:block;font-size:12px;line-height:1.6;color:#D7E0EC}
/* A rule that differs between the evaluation and the funded account is shown
   as two labelled lines, never as one figure standing for both. */
.cx-stage2{display:block;font-size:12px;line-height:1.55;color:#D7E0EC;margin-top:5px}
.cx-stage2:first-child{margin-top:0}
.cx-stage2 i{
  display:block;font-style:normal;font-size:8.5px;font-weight:650;
  letter-spacing:.11em;text-transform:uppercase;color:#7E8DA3;margin-bottom:1px;
}
.cx-grid td small,.cx-card small{
  display:block;font-size:9.5px;font-weight:400;line-height:1.55;
  color:var(--cx-dim);margin-top:4px;
}
.cx-grid del{display:block;font-size:10.5px;color:#7E8DA3;margin-bottom:1px}
.cx-gold{color:#FFD67E}

/* Not verified is a statement about our reading. None is a statement the
   firm makes. They never look alike. */
.cx-nv{display:block;font-size:11.5px;font-style:italic;color:#8491A6}
.cx-none{display:block;font-size:13px;font-weight:550;color:#B9C6D7}

/* The exact wording is kept under the summary, so a cell can be read at a
   glance without the detail being thrown away. */
.cx-more{margin-top:7px}
.cx-more summary{
  font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#8FA2BD;cursor:pointer;list-style:none;padding:2px 0;
}
.cx-more summary::-webkit-details-marker{display:none}
.cx-more summary:before{content:'+ ';color:var(--cx-gold)}
.cx-more[open] summary:before{content:'– '}
.cx-more summary:hover{color:#fff}
.cx-more p{
  font-size:11px;line-height:1.75;color:#A8B6CA;margin:7px 0 0;
  padding-left:10px;border-left:1px solid var(--cx-line);
}
.cx-more b{color:#DCE4F0;font-weight:600;display:block;font-size:10px;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}

/* A gap in our reading, so it is set like the sentence it is rather than like
   a figure: italic, no caps, no gold marker — it is not an offer of more
   detail, it is the detail. The explanation it opens is the same one for
   every row, which is exactly why it is not printed under each of them. */
.cx-more--nv{margin-top:0}
.cx-more--nv summary{
  font-size:11.5px;font-style:italic;font-weight:400;
  letter-spacing:0;text-transform:none;color:#8491A6;
}
.cx-more--nv summary:before{content:none}
.cx-more--nv summary:after{content:' +';color:#6E7C93;font-style:normal}
.cx-more--nv[open] summary:after{content:' –'}
.cx-more--nv summary:hover{color:#C9D4E3}

/* ---------- level three: sources and verification ---------------- */

/* Every date, every official page and any note about how they were read, in
   one place at the foot of the panel. The summary states the shape of what is
   inside — how many pages, whether there is a caveat — so a reader can tell
   whether to open it without having it opened for them. */
.cx-src{
  margin:16px 0 0;border-radius:11px;
  border:1px solid var(--cx-line);background:rgba(8,13,24,.32);
}
.cx-src>summary{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:11px 14px;cursor:pointer;list-style:none;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#A5B3C7;
}
.cx-src>summary::-webkit-details-marker{display:none}
.cx-src>summary:before{content:'+';color:var(--cx-gold);font-size:12px;line-height:1}
.cx-src[open]>summary:before{content:'–'}
.cx-src>summary:hover{color:#fff}
.cx-src>summary small{
  font-size:9.5px;font-weight:400;letter-spacing:.02em;text-transform:none;
  color:#7E8DA3;
}
.cx-src__note{
  font-size:11px;line-height:1.75;color:#D4BE88;margin:0;padding:0 14px 12px;
}
.cx-src__links{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0 14px 13px;
  font-size:10px;line-height:1.6;
}
.cx-src__links a{color:#D9BD78;text-underline-offset:3px}

.cx-srcs{
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  font-size:10px;color:#7E8DA3;margin:14px 0 0;
}
.cx-srcs b{
  font-size:9px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;
  color:#8795AC;
}
.cx-srcs a{color:#D9BD78;text-underline-offset:3px}

/* ---------- the cross-firm table --------------------------------- */

.cx-crossbox .cx-ctl{
  margin:0 0 4px;padding:16px 18px;border-top:0;
  border:1px solid var(--cx-edge);border-radius:16px;background:var(--cx-surface);
}
.cx-crossbox .cx-grid{
  border:1px solid var(--cx-edge);border-radius:16px;margin-top:10px;
}
/* 1180px of columns: identity, five criteria and the actions. At 1440 the
   section is 1338px wide here, so the whole row is on screen and the scroller
   has nothing to do; below that it earns its keep. */
.cx-crossbox table{min-width:1180px}
.cx-crossbox thead th{min-width:148px}
.cx-crossbox thead th:nth-child(5),
.cx-crossbox thead th:nth-child(6){min-width:198px}
.cx-crossbox thead th:last-child{min-width:146px}
.cx-crossbox thead th:first-child,
.cx-crossbox tbody th[scope=row]{min-width:224px;width:224px}

/* A row is one firm, kept to a height the eye can run down. `height` on a
   table row is a floor, not a cap, so a firm whose programme name takes two
   lines grows rather than losing the second one. */
.cx-crossbox tbody tr{height:88px}
.cx-crossbox tbody td{padding:13px 14px}
.cx-crossbox tbody .cx-val{font-size:11.5px;line-height:1.55}
.cx-crossbox tbody td strong{font-size:18px}

.cx-idwrap{display:flex;align-items:center;gap:11px;min-width:0}
.cx-idwrap img{
  flex:0 0 auto;width:34px;height:34px;object-fit:cover;
  border-radius:22.3%;background:var(--tile,#232A3A);
  border:1px solid rgba(237,232,223,.09);
  box-shadow:0 4px 12px rgba(0,0,0,.38),inset 0 1px 0 rgba(237,232,223,.09);
}
.cx-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.cx-name{font-size:13px;font-weight:550;letter-spacing:-.02em;color:#fff;line-height:1.3}
.cx-id .cx-tag{align-self:flex-start;font-size:8px;padding:3px 5px}
.cx-id>small{font-size:9.5px;color:#7E8DA3;margin-top:0;line-height:1.45}
.cx-unavailable .cx-idwrap img{opacity:.45}

/* Which of a firm's programmes the row compares. A select, because four Apex
   evaluations at one size is a choice, not a caption — and because a native
   one is the smallest control that can hold four names and still be operable
   by touch, keyboard and screen reader without a line of script. */
.cx-xprog{
  width:100%;max-width:168px;margin-top:1px;
  font:inherit;font-size:10px;color:#AEBCD0;
  background:rgba(8,13,24,.5);border:1px solid var(--cx-line);
  border-radius:6px;padding:4px 5px;cursor:pointer;
}
.cx-xprog:hover{color:#fff;border-color:rgba(237,232,223,.22)}

/* [Review] [Firm] side by side, and the row's own details under them. Three
   controls, one column, none of them overlapping the figures they belong to. */
.cx-xacts{white-space:nowrap}
.cx-xacts__row{display:flex;gap:6px}
.cx-xacts .cx-btn{flex:1 1 0;justify-content:center;padding:0 9px}
.cx-xmore{
  display:inline-flex;align-items:center;gap:5px;margin-top:7px;
  border:0;background:transparent;color:#8FA2BD;
  font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 0;transition:color .14s;
}
.cx-xmore:before{content:'+';color:var(--cx-gold);font-size:11px}
.cx-xmore.is-open:before{content:'–'}
.cx-xmore:hover{color:#fff}

/* The row under the row: the wording the five cells had to clamp, the dates
   and the official pages. `sticky` is what keeps it readable on a phone — the
   row it belongs to is 1180px wide and the panel is not, so the block slides
   along with the scroller instead of waiting off to the right. */
.cx-xdrow>td{padding:0;background:rgba(8,13,24,.4);border-left:0}
.cx-xd{
  position:sticky;left:0;width:100%;max-width:calc(100vw - 46px);
  box-sizing:border-box;padding:15px 16px 17px;
  display:grid;gap:11px;
}
.cx-xd__head{
  margin:0;font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#A5B3C7;
}
.cx-xd__b{margin:0}
.cx-xd__b b{
  display:block;font-size:9px;font-weight:650;letter-spacing:.11em;
  text-transform:uppercase;color:#8795AC;margin-bottom:3px;
}
.cx-xd__b p{font-size:11.5px;line-height:1.75;color:#C3D0E0;margin:0;max-width:92ch}
.cx-xd__none{font-size:11.5px;line-height:1.7;color:#8D9BB1;margin:0}
.cx-xd__note{
  font-size:11px;line-height:1.75;color:#D4BE88;margin:0;
  padding:9px 12px;border-radius:9px;
  background:rgba(240,206,128,.06);border:1px solid rgba(240,206,128,.2);
}
.cx-xd__links{display:flex;flex-wrap:wrap;gap:5px 14px;margin:0;font-size:10px;line-height:1.6}
.cx-xd__links a{color:#D9BD78;text-underline-offset:3px}

/* The one number on this page that is a number: how many of the ten answer
   the question the controls are currently asking. Counted off the rows every
   time they are drawn. No review totals, no view counts, no badges. */
.cx-xnote{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-size:11px;line-height:1.6;color:#8D9BB1;margin:10px 2px 0}
.cx-pill{
  display:inline-flex;align-items:baseline;gap:4px;
  font-size:10px;letter-spacing:.04em;color:#AEBCD0;
  border:1px solid var(--cx-line);border-radius:20px;padding:4px 10px;
  background:rgba(8,13,24,.4);white-space:nowrap;
}
.cx-pill b{font-size:12px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}

/* ---------- the no-script firm cards ----------------------------- */

.cx-cards{display:grid;gap:10px;margin-top:18px}
.cx-card{overflow:hidden}
.cx-card>summary{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;cursor:pointer;list-style:none;
}
.cx-card>summary::-webkit-details-marker{display:none}
.cx-card>summary img{
  width:30px;height:30px;object-fit:cover;border-radius:22.3%;
  background:var(--tile,#232A3A);border:1px solid rgba(237,232,223,.09);
}
.cx-card>summary b{display:block;font-size:13px;font-weight:550;color:#fff;letter-spacing:-.02em}
.cx-card>summary small{margin-top:2px}
.cx-card__in{padding:0 18px 18px}
.cx-card__prog{font-size:11.5px;color:#9BAAC0;margin:0 0 10px}
.cx-card__go{margin:14px 0 0}
.cx-card__go a{color:#F2DCA8;font-size:11.5px;text-underline-offset:4px}
.cx-stack{width:100%;border-collapse:separate;border-spacing:0;text-align:left}
.cx-stack th[scope=row]{
  width:40%;padding:11px 12px 11px 0;vertical-align:top;
  font-size:11.5px;font-weight:550;color:#C9D4E3;border-bottom:1px solid var(--cx-line);
}
.cx-stack td{padding:11px 0;vertical-align:top;border-bottom:1px solid var(--cx-line)}
.cx-stack .cx-group th{
  border-radius:7px;margin:0;border-top:0;
  padding:8px 12px !important;width:auto;
}
.cx-stack small{display:block;font-size:9.5px;color:var(--cx-dim);margin-top:3px}
.cx-stack strong{font-size:16px;font-weight:550;color:#fff;font-variant-numeric:tabular-nums}

/* ---------- notes ------------------------------------------------ */

.cx-disclosure{font-size:11px;line-height:1.7;color:#93A1B6;margin:18px 2px 0;max-width:100ch}
.cx-disclosure a{color:#D9BD78;text-underline-offset:3px}

.cx-method{border-bottom:1px solid var(--cx-line);margin-top:10px;scroll-margin-top:110px}
.cx-method summary{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:15px 0;font-size:12px;color:#DBE3EF;cursor:pointer;list-style:none;
}
.cx-method summary::-webkit-details-marker{display:none}
.cx-method summary span{color:var(--cx-gold);font-size:15px;line-height:1}
.cx-method[open] summary span{transform:rotate(45deg)}
.cx-method[open] summary{color:#fff}
.cx-method p{font-size:12px;line-height:1.8;color:#A4B1C4;max-width:100ch;margin:0 0 12px}
.cx-method b{color:#DCE4F0;font-weight:600}

/* ---------- review dialog ---------------------------------------- */

.cx-dialog{
  color:#fff;background:#121E30;border:1px solid rgba(210,177,88,.33);
  border-radius:18px;padding:36px;width:min(600px,calc(100vw - 32px));
  max-height:85vh;box-sizing:border-box;box-shadow:0 24px 100px rgba(0,0,0,.55);
}
.cx-dialog::backdrop{background:rgba(6,12,24,.72);backdrop-filter:blur(5px)}
.cx-close{
  position:absolute;right:14px;top:10px;width:40px;height:40px;
  border:0;background:none;color:#BBC8DA;font-size:26px;line-height:1;
}
.cx-dialog h3{font-size:25px;font-weight:600;letter-spacing:-.035em;margin:15px 0 5px}
.cx-dialog h4{font-size:14px;font-weight:600;margin-top:24px}
.cx-dialog p{font-size:13px;line-height:1.8;color:#B5C2D5}
.cx-dialog .cx-dialog-program{margin-top:0;color:#9CABC2;font-size:12px}
.cx-review-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;
  padding:18px 0;border-block:1px solid rgba(237,232,223,.1);
}
.cx-review-stats strong{display:block;font-size:22px;font-weight:500;letter-spacing:-.03em;margin-top:6px}
.cx-review-stats small{display:block;font-size:10px;color:var(--cx-dim)}
.cx-dialog a{color:#F7CA61;font-size:12px;text-underline-offset:4px}
.cx-pilot-sources{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cx-review-date{margin-top:24px;display:block;font-size:10px;color:#7E8DA3;line-height:1.7}

/* ============================================================
   Narrower. The dock turns on its side and becomes a row of firms the
   thumb can swipe; the panel moves underneath it. Nothing is hidden,
   and nothing depends on a pointer that can hover.
   ============================================================ */

@media (max-width:1080px){
  /* Matches the `:not([hidden])` of the desktop rule on purpose. A media
     query adds no specificity, so a bare `.cx-explore` here would be the
     weaker selector and the two-column desktop track would survive onto the
     phone. The two selectors move together. */
  .cx-explore:not([hidden]){grid-template-columns:1fr;gap:12px}
  .cx-dock{
    position:static;flex-direction:row;gap:4px;padding:8px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:thin;scrollbar-color:rgba(237,232,223,.2) transparent;
  }
  .cx-dock::-webkit-scrollbar{height:7px}
  .cx-dock::-webkit-scrollbar-thumb{background:rgba(237,232,223,.18);border-radius:9px}
  .cx-pick{
    flex:0 0 auto;flex-direction:column;align-items:center;gap:7px;
    width:88px;min-height:92px;padding:10px 6px;text-align:center;
  }
  .cx-pick.is-on{box-shadow:inset 0 -2px 0 var(--cx-gold)}
  .cx-pick__name{
    font-size:10px;line-height:1.25;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  /* Below 1080 the dock sits above the panel, so the grid has the full
     column to itself: 148 for the labels and four programmes at 194 come to
     924, which clears the 934 a 1024px window leaves inside the stage. At
     200 it came to 948 and a tablet got a scrollbar for fourteen pixels —
     the worst width to lose, because it buys nothing and costs the reader a
     drag. Apex is the widest firm at four programmes; every other firm has
     room to spare. */
  .cx-grid thead th{min-width:194px}
  .cx-grid tbody th[scope=row],.cx-grid thead th:first-child,
  .cx-grid tfoot th[scope=row]{min-width:148px;width:148px}
}

@media (max-width:850px){
  .cx{padding:36px 14px 34px}
  /* The h2's own clamp carries it the rest of the way down. The fixed 28px
     and the 360px measure that used to be here are what made it wrap on a
     phone while the viewport still had room for the line. */
  .cx-heading p{font-size:12.5px}
  .cx-stage{padding:16px 14px 14px;border-radius:18px}
  .cx-stage__acts{margin-left:0;width:100%;order:3}
  .cx-btn{flex:1 1 0;justify-content:center;min-height:44px}
  .cx-ctl{gap:14px}
  .cx-sizes{
    order:2;width:100%;justify-content:space-between;
    padding-top:12px;border-top:1px solid var(--cx-line);
  }
  .cx-discount{order:1}
  .cx-segments button,.cx-sizes button,.cx-modes button,.cx-views button{min-height:44px}
  .cx-grid thead th{min-width:188px}
  .cx-grid tbody th[scope=row],.cx-grid thead th:first-child,
  .cx-grid tfoot th[scope=row]{min-width:124px;width:124px}
  .cx-grid tbody th[scope=row]{font-size:11px;padding:13px 10px}
  .cx-grid tbody td{padding:13px 10px}
  .cx-grid td strong{font-size:18px}
  .cx-grid tfoot th[scope=row],.cx-grid tfoot td{padding:12px 10px}

  /* The thumb gets the same 44px here as everywhere else, and the row grows
     to hold it rather than the buttons growing out of the row. */
  .cx-btn--sm{min-height:44px}
  .cx-xmore{min-height:44px;margin-top:4px}
  .cx-crossbox tbody tr{height:auto}
  /* Narrow enough to leave the figures room on a 390px screen, wide enough
     for the longest firm name on two lines and the programme selector under
     it. One scroller, one fixed column: the identity never slides away and
     nothing inside it scrolls separately. */
  .cx-crossbox table{min-width:1068px}
  .cx-crossbox thead th:first-child,
  .cx-crossbox tbody th[scope=row]{min-width:152px;width:152px}
  .cx-crossbox thead th{min-width:132px}
  .cx-crossbox thead th:nth-child(5),
  .cx-crossbox thead th:nth-child(6){min-width:176px}
  /* Wide enough for Review and Firm side by side at a 44px thumb target.
     Stacked, those two buttons alone made the row 163px tall and left the
     firm's name floating in a half-empty cell; the table already scrolls
     sideways here, so the column can simply have the width it needs. */
  .cx-crossbox thead th:last-child{min-width:168px}
  .cx-crossbox tbody td{padding:12px 10px}
  .cx-idwrap{align-items:flex-start;gap:8px}
  .cx-idwrap img{width:30px;height:30px}
  .cx-xprog{max-width:100%}
  .cx-xd{padding:14px 13px 15px}
  .cx-card__in{padding:0 14px 16px}
  .cx-stack th[scope=row]{width:44%}
}

@media (max-width:560px){
  .cx{padding:30px 12px 28px}
  /* The label and five size buttons do not fit one 360px line. Unwrapped the
     group ran 4px past the viewport and dragged the whole document into a
     horizontal scroll with it. Wrapping is the honest fix: every size stays
     reachable and visible, which is what a five-button selector should be —
     the alternative, a second scroll axis, hides choices behind a gesture. */
  .cx-sizes{gap:8px;font-size:10.5px;flex-wrap:wrap;row-gap:10px}
  .cx-sizes>div{flex-wrap:wrap;row-gap:6px}
  .cx-sizes button{padding:9px 9px}
  /* Four controls on one 360px line would be four truncated words. Two by
     two keeps every label whole and every target full width. */
  .cx-views{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .cx-views button{justify-content:center;padding:9px 8px;font-size:11px}
  .cx-stage__id h3{font-size:19px}
  .cx-dialog{padding:28px 22px}
  .cx-review-stats{gap:14px}
  .cx-review-stats strong{font-size:19px}
}

@media (prefers-reduced-motion:reduce){
  .cx *{transition:none}
}

/* The .pitch block used to be re-declared here, after the page's own rules,
   which meant the hero spacing in index.html was written but never applied. The
   duplicates are gone; .pitch is styled once, in index.html. */

.cx-heading h2{font-variation-settings:"wdth" 84,"wght" 900;font-weight:900;font-size:clamp(22px,5.52vw,30.4px);line-height:1.15;letter-spacing:-.008em}
.cx{padding-top:30px}
.cx-heading{margin-bottom:20px}

/* Roomier desktop firm rail and fine gold comparison rules. */
@media(min-width:1000px){.cx-explore:not([hidden]){grid-template-columns:300px minmax(0,1fr)}.cx-dock{gap:5px;padding:11px}.cx-pick{padding:12px 11px}}
.cx-grid{border:1px solid rgba(240,206,128,.35);border-radius:12px}
.cx-grid th,.cx-grid td{border-bottom-color:rgba(240,206,128,.17)}
.cx-grid th+th,.cx-grid td+td{border-left:1px solid rgba(240,206,128,.17)}
.cx-pick[data-firm="the5ers"] img{background:#f5f3ed}

/* Clear action hierarchy and a stronger gold table frame. */
.cx .cx-grid{border:2px solid rgba(224,185,99,.8)}
.cx-xacts__row{flex-direction:column;align-items:stretch;gap:8px;max-width:130px;margin-inline:auto}
.cx-xacts .cx-btn{flex:none;min-height:38px;width:100%;box-sizing:border-box}
.cx-id .cx-xmore{align-self:flex-start;margin-top:8px}
.cx-available{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cx-available .cx-btn{min-height:36px}