/* site-chrome.css — shared header + footer, extracted from index.html.
   index.html keeps its own inline copy; change both together. */
.bar,.ft{font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--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)}
.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,.brand__slot svg{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;
  
  color:rgba(237,232,223,.74);padding:0 15px;border-radius:999px;
  font-weight:450;letter-spacing:.004em;
  
  transition:color .13s ease-out;
}
.bar__nav a:hover{color:#FFFFFF}
.bar__nav a:focus-visible{outline:2px solid rgba(237,232,223,.5);outline-offset:-2px;
  color:#FFFFFF}
.bar__nav a[aria-current="page"]{color:var(--gold);font-weight:600}
.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:36px;padding:0 14px;border-radius:999px;
  background:rgba(8,11,17,.34);
  border:1px solid transparent;
  transition:width .22s cubic-bezier(.32,.72,0,1), background-color .16s,
             border-color .16s, box-shadow .16s;
  width:168px}
.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,.22);
  box-shadow:0 0 0 3px rgba(237,232,223,.07)}
.search svg{width:14px;height:14px;flex:0 0 auto;stroke:rgba(237,232,223,.74);
  fill:none;stroke-width:1.8;stroke-linecap:round;transition:stroke .13s}
.search:focus-within svg{stroke:var(--bone)}
.search input{
  width:100%;min-width:0;border:0;outline:0;background:transparent;
  color:var(--bone);font:400 13.5px/1 Archivo,-apple-system,sans-serif;
  letter-spacing:.005em;
}
.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}
@media (max-width:980px){
.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}
}
@media (max-width:640px){
.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}
}
.rv,.ft{position:relative;z-index:1}
.rv__shell,.ft__shell{width:min(1320px,calc(100% - clamp(30px,5vw,88px)));
  margin-inline:auto}
.ft{padding:clamp(34px,3.4vw,52px) 0 clamp(28px,2.8vw,44px);
  border-top:1px solid var(--rule);
  background:linear-gradient(180deg,rgba(10,13,20,0),rgba(10,13,20,.55))}
.ft__sig{display:flex;align-items:center;gap:clamp(12px,1.5vw,26px)}
.ft__ball{width:clamp(34px,7vw,104px);height:clamp(34px,7vw,104px);
  flex:0 0 auto;object-fit:contain;display:block}
.ft__word{font-variation-settings:"wdth" 84,"wght" 900;
  font-size:clamp(38px,9.4vw,136px);line-height:.82;letter-spacing:-.012em;
  white-space:nowrap;color:#FFFFFF}
.ft__fit{display:inline-block}
.ft__mid{margin-top:clamp(22px,2.4vw,38px);
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,2fr);
  gap:clamp(20px,3vw,64px);align-items:start}
.ft__line{margin:0;color:rgba(237,232,223,.62);
  font-size:clamp(14px,1.1vw,15.5px);line-height:1.55}
.ft__nav{margin-top:0}
.ft__nav h2{font-variation-settings:"wdth" 100,"wght" 700;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(237,232,223,.55);margin:0}
.ft__row{display:grid;grid-template-columns:118px minmax(0,1fr);
  gap:6px 24px;align-items:baseline;padding:10px 0;
  border-top:1px solid var(--rule)}
.ft__row:first-child{border-top:0;padding-top:0}
.ft__row ul{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:4px clamp(20px,2.4vw,40px)}
.ft__row a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--bone);font-size:clamp(14.5px,1.1vw,15.5px);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.ft__row a:hover,.ft__row a:focus-visible{color:#FFFFFF;
  border-bottom-color:var(--gold)}
.ft__ad{margin-top:clamp(24px,2.6vw,38px);
  padding:clamp(18px,1.9vw,26px) clamp(20px,2.2vw,30px);border-radius:16px;
  background:rgba(10,13,20,.5);border:1px solid var(--rule);
  border-left:3px solid var(--gold);
  display:grid;grid-template-columns:max-content minmax(0,1fr);
  gap:4px clamp(22px,2.6vw,44px);align-items:baseline}
.ft__adH{margin:0;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap;
  font-variation-settings:"wdth" 100,"wght" 700}
.ft__adP{margin:0;grid-column:2;
  color:rgba(237,232,223,.86);font-size:14.5px;line-height:1.6}
.ft__adP--sub{margin-top:6px;color:rgba(237,232,223,.66);font-size:13.5px}
.ft__adP a{color:#FFFFFF;text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--rule-up);
  display:inline-block;padding:6px 2px;margin:-6px -2px}
.ft__adP a:hover,.ft__adP a:focus-visible{color:var(--gold);
  text-decoration-color:var(--gold)}
.ft__base{margin-top:clamp(16px,1.6vw,24px);
  padding-top:clamp(14px,1.4vw,20px);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:4px clamp(20px,2.6vw,48px)}
.ft__legal{display:flex;align-items:center;flex-wrap:wrap;gap:0 22px}
.ft__legal ul{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:0 22px}
.ft__legal a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--bone);font-size:14px;text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:var(--rule-up)}
.ft__legal a:hover{color:#FFFFFF;text-decoration-color:var(--gold)}
.ft__copy{color:rgba(237,232,223,.55);font-size:13px;margin:0}
.ft__risk{margin:clamp(16px,1.6vw,24px) 0 0;color:rgba(237,232,223,.62);
  font-size:13px;line-height:1.6}
.rv__review:focus-visible,
.rv__crit:focus-visible,
.rv__src a:focus-visible,
.ft__row a:focus-visible,
.ft__legal a:focus-visible,
.ft__adP a:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
@media (max-width:760px){
.rv__shell,.ft__shell{width:calc(100% - 30px)}
.ft__mid{grid-template-columns:minmax(0,1fr);gap:22px}
.ft__ad{grid-template-columns:minmax(0,1fr);gap:8px}
.ft__adP{grid-column:1}
.ft__base{flex-direction:column;align-items:flex-start;gap:2px}
.ft__row{grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 0}
.ft__row:first-child{padding-top:0}
.ft__legal ul{gap:0 18px}
}
.brand__name{font-size:13.5px}
.bar__nav a{font-size:10.8px}
@media(max-width:600px){
.bar__nav a{font-size:10px;padding-inline:4px}
.bar__nav a.bar__apex-link{white-space:normal;max-width:75px;text-align:center;line-height:1.15}
}
.bar__shell{width:min(1200px,100%);height:62px;padding:7px 9px 7px 12px}
.bar__nav a{font-size:12px}
.bar__apex-logo{width:22px;height:22px;object-fit:contain;border-radius:6px;margin-right:7px;flex-shrink:0}
.bar__nav a.bar__apex-link{display:flex;align-items:center}
.ft__trading{margin-top:14px;background:rgba(14,20,32,.45)}
@media(max-width:600px){
.bar__shell{height:52px;padding:4px 6px;gap:2px}
.bar__nav a{font-size:10px;padding-inline:4px}
.bar__apex-logo{width:17px;height:17px;margin-right:4px}
.bar__nav a.bar__apex-link{max-width:100px}
.bar__nav a.bar__apex-link span{min-width:0}
}
.bar__apex-logo{object-fit:cover;border-radius:22%;width:25px;height:25px}
.ft__trading .ft__adH{font-size:18px;letter-spacing:.08em;margin-bottom:14px}
.ft__trading .ft__adP{font-size:16px;line-height:1.8;max-width:none}
.ft__trading{padding:28px 30px}
@media(max-width:600px){
.bar__apex-logo{width:18px;height:18px}
.ft__trading{padding:22px}
.ft__trading .ft__adP{font-size:15px}
}
.bar__apex-logo{width:30px;height:22px;border:0;border-radius:0;background:none;object-fit:contain;filter:brightness(0) invert(1)}
@media(max-width:700px){
.bar__shell{height:auto;min-height:82px;border-radius:24px;padding:7px 9px;gap:8px}
.bar__nav{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:0;justify-items:stretch}
.bar__nav a{font-size:10px;padding:6px 3px;min-height:32px;justify-content:center;text-align:center;display:flex;align-items:center}
.bar__nav a.bar__apex-link{grid-column:2;grid-row:1;max-width:none;white-space:normal;line-height:1.15}
.bar__nav .nav-reviews{grid-column:3;grid-row:1}
.bar__apex-logo{width:20px;height:18px;margin-right:4px}
.bar__pill{display:none}
.bar__nav a[aria-current="page"]{color:#f0ce80}
}
.nav-resources{position:relative;flex-shrink:0}
.nav-resources summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 15px;font-size:12px;color:rgba(237,232,223,.74);border-radius:999px}
.nav-resources summary::-webkit-details-marker{display:none}
.nav-resources[open] summary,.nav-resources summary:hover{color:#f0ce80;background:#ffffff08}
.nav-resources summary:focus-visible{outline:2px solid #f0ce80;outline-offset:2px}
.nav-resources__panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:175px;padding:7px;background:#101826;border:1px solid #d7b96755;border-radius:13px;box-shadow:0 14px 32px #0005}
.bar__nav .nav-resources__panel a{display:flex;min-height:44px;padding:10px 13px;font-size:12px;border-radius:8px;white-space:nowrap;justify-content:flex-start}
.nav-resources__panel a:hover{background:#eac87510;color:#f0ce80}
.ft__about{border-top:1px solid #d7b96733;margin-top:26px;padding-top:26px;scroll-margin-top:110px}
.ft__about h2{font-size:16px;color:#f0ce80;margin-bottom:12px}
.ft__about p{max-width:65ch;font-size:14px;line-height:1.7;color:#b6bfcc}
.ft__about address{font-style:normal;font-size:13px;line-height:1.8;color:#9baabd;margin-top:14px}
@media(max-width:700px){
.nav-resources{grid-column:2;grid-row:2;min-width:0}
.nav-resources summary{font-size:10px;min-height:32px;padding:6px 3px;justify-content:center;gap:3px}
.nav-resources__panel{top:calc(100% + 8px)}
.bar__nav .nav-resources__panel a{font-size:12px;min-height:44px}
.ft__about{margin-top:22px;padding-top:22px}
}
.bar__nav.scroll-fade{mask-image:none;-webkit-mask-image:none}
.nav-resources{z-index:5}
.nav-resources summary .nav-caret{flex:0 0 auto;opacity:.7;transition:transform .16s ease-out}
.nav-resources[open] summary .nav-caret{transform:rotate(180deg)}
.nav-reviews{z-index:6}
.nav-reviews__panel{width:230px}
@media(max-width:700px){
.bar__nav .nav-reviews{grid-column:3;grid-row:1;min-width:0}
.nav-reviews__panel{left:auto;right:0;transform:none;width:210px}
}
.ft-address{font-style:normal;font-size:13px;line-height:1.8;color:#9baabd;margin-top:20px;max-width:38ch}
.ft-brand#about-us{scroll-margin-top:110px}
/* chrome on subpages: clearance under the fixed bar, and the footer
   carries its own background so it reads on light pages too. */
body.chrome-pad{padding-top:96px}
body.chrome-pad-slim{padding-top:36px}
body.chrome-pad-main{margin:0}
body.chrome-pad-main>main{padding-top:104px}
@media(max-width:700px){
  body.chrome-pad{padding-top:122px}
  body.chrome-pad-slim{padding-top:56px}
  body.chrome-pad-main>main{padding-top:128px}
}
/* pages with their own global svg/button rules must not resize the chrome icons */
.bar .search svg{width:15px;height:15px;flex:0 0 auto}
.bar .nav-resources summary .nav-caret{width:10px;height:6px}
.ft{background:#171C27;margin-top:56px;color:#EDE8DF}

.nav-reviews.is-here>summary{color:var(--gold);font-weight:600}
.nav-reviews__panel a:first-child{border-bottom:1px solid rgba(237,232,223,.08);margin-bottom:4px}
.nav-resources__panel a[aria-current="page"]{color:var(--gold)}

/* Tablet widths: the full desktop menu does not fit, so the wordmark text goes
   and the menu items tighten. The logo still links home. */
@media (min-width:701px) and (max-width:1100px){
  .bar .brand__name{display:none}
  .bar .bar__nav a,.bar .nav-resources summary{padding-left:9px;padding-right:9px}
  .bar .bar__sep{margin:0 3px}
}
