/* ============================================================================
   apexis-promo — course home (go.apexislearn.com front page)
   Dark category-rail catalogue home. Course cards reveal a red wash carrying
   the full title on hover/focus. Data is the live tenant catalogue; grouping
   is the curated map in inc/home.php.
   ============================================================================ */
:root{
  color-scheme: dark;
  --ink:#080b12; --ink-2:#0b0f17; --surface:#121a28; --surface-2:#182233;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --text:#f3f6fb; --muted:#93a0b4;
  /* --dim was #5f6b7e, which measures 3.6:1 on the page ground — under the
     4.5:1 body-text minimum, and it carries the footer links, jump counts and
     field labels. #7d8a9e measures 5.6:1 and still reads as the quiet tone. */
  --dim:#7d8a9e;
  --red:#e11d2e; --red-hi:#ff3546; --gold:#f0b429;
  --disp:'Archivo Narrow','Arial Narrow',system-ui,sans-serif;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1240px;
  --gutter:clamp(18px,4vw,40px);
  --edge:max(var(--gutter),calc((100% - var(--maxw))/2 + var(--gutter)));
}
*{box-sizing:border-box}
html,body{margin:0;background:#080b12}
/* The block theme's global stylesheet (printed by wp_head) sets a direct
   colour on headings/links, which beats inherited colour. Set ours explicitly
   so the dark treatment wins — same fix the course-promo template uses. */
.apx h1,.apx h2,.apx h3,.apx h4{color:var(--text)}
.apx{background:
    radial-gradient(120% 80% at 100% -10%, #16233a 0%, transparent 55%),
    radial-gradient(90% 70% at -10% 0%, #1a1420 0%, transparent 50%),
    var(--ink);
  color:var(--text);font-family:var(--sans);line-height:1.55;
  -webkit-font-smoothing:antialiased;letter-spacing:-.006em;overflow-x:clip;min-height:100vh}
.apx img{display:block;max-width:100%}
.apx a{color:inherit;text-decoration:none}
.apx button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.apx :focus-visible{outline:2px solid var(--red-hi);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* Visually hidden, still announced. Used for link context ("opens in a new
   tab") and for headings that structure the page for screen readers without
   repeating themselves on screen. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--red);color:#fff;
  padding:10px 16px;border-radius:0 0 6px 0;font-weight:600}
.skip-link:focus{left:0}

/* ---- top nav ----
   Full-bleed header matching the course-promo landing topbar: logo far left,
   centred nav menu + login button, TEEX lockup far right. */
.nav{position:sticky;top:0;z-index:50;background:var(--surface);
  border-bottom:1px solid var(--line)}
.nav-in{position:relative;display:flex;align-items:center;justify-content:space-between;
  height:60px;padding:0 22px}
.nav-logo img{height:24px;width:auto}
/* Menu + login button, absolutely centred and independent of the side widths. */
.nav-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:24px}
.nav-links{display:flex;gap:24px;font-size:14px;color:var(--muted)}
.nav-links a:hover{color:var(--text)}
/* .btn.nav-cta (not .nav-cta) so it out-specifies the later .btn base rule. */
.btn.nav-cta{padding:5px 13px;font-size:12.5px;border-radius:5px}
/* TEEX lockup — same treatment as the course-promo header. */
.lockup{display:flex;align-items:center;gap:14px}
.lockup .clc-tag{font-family:var(--mono);font-size:7.83px;line-height:1.35;letter-spacing:.02em;
  color:#fff;text-align:right;white-space:nowrap}
.lockup img{height:20px;width:auto}
.lockup img.teex{height:24px}
.lockup .divide{width:1px;height:22px;background:rgba(255,255,255,.22)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;
  padding:9px 16px;border-radius:6px;transition:transform .15s var(--ease),background-color .15s}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-hi);transform:translateY(-1px)}
.btn--ghost{border:1px solid var(--line-2);color:var(--text)}
.btn--ghost:hover{border-color:var(--text)}
.btn--lg{font-size:15px;padding:13px 22px}

/* ---- hero ---- */
.hero{position:relative;padding:clamp(56px,9vw,120px) 0 clamp(40px,6vw,72px)}
.hero-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.hero-eyebrow b{color:var(--gold);font-weight:600}
.hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(46px,8.2vw,104px);line-height:.94;
  letter-spacing:-.02em;margin:0 0 22px;max-width:16ch;text-wrap:balance}
.hero h1 .em{color:var(--red)}
.hero-sub{font-size:clamp(16px,1.5vw,20px);color:var(--muted);max-width:56ch;margin:0 0 30px}
.hero-sub b{color:var(--text);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-campaign{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:18px 0 0}
.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,54px);margin-top:clamp(38px,6vw,64px);
  padding-top:30px;border-top:1px solid var(--line)}
.stat .n{font-family:var(--disp);font-weight:700;font-size:clamp(30px,3.4vw,46px);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .l{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-top:8px}

/* ---- section headings shared by the marketing surfaces ---- */
.sec-h{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.8vw,48px);line-height:1;
  letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.sec-p{color:var(--muted);font-size:16px;max-width:62ch;margin:0 0 28px}
.sec-p a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* ---- three visitor routes ---- */
.routes-band{padding:0 0 clamp(30px,5vw,56px)}
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.route{display:flex;flex-direction:column;gap:8px;padding:24px 22px 20px;border-radius:14px;
  border:1px solid var(--line);background:linear-gradient(160deg,var(--surface),var(--ink-2));
  transition:transform .25s var(--ease),border-color .25s}
.route:hover{transform:translateY(-3px);border-color:var(--line-2)}
.route-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.route-t{font-family:var(--disp);font-weight:700;font-size:23px;line-height:1.06;letter-spacing:-.015em}
.route-b{color:var(--muted);font-size:14.5px;line-height:1.5;flex:1}
.route-c{font-weight:600;font-size:14px;color:var(--red-hi);margin-top:6px}

/* ---- page head (marketing routes) ---- */
.page-head{padding:clamp(40px,6vw,84px) 0 clamp(24px,4vw,44px)}
.page-head h1{font-family:var(--disp);font-weight:700;font-size:clamp(38px,6.4vw,78px);line-height:.96;
  letter-spacing:-.02em;margin:0 0 20px;max-width:18ch;text-wrap:balance}
.page-head h1 .em{color:var(--red)}
.page-head .hero-eyebrow{margin-bottom:18px}

/* ---- catalogue search + jump links ---- */
.cat-filter{margin:30px 0 6px;max-width:520px}
.filter-l{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.cat-filter input{width:100%;background:var(--ink-2);border:1px solid var(--line-2);border-radius:8px;
  padding:12px 14px;color:var(--text);font:inherit;font-size:15px}
.cat-filter input:focus{outline:2px solid var(--red-hi);outline-offset:2px;border-color:var(--red-hi)}
.filter-count{font-family:var(--mono);font-size:12px;color:var(--dim);margin:8px 0 0;min-height:1.2em}
.jumps{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
/* A display value beats the [hidden] UA rule, so say it explicitly — the
   filter hides the jump links while a search is narrowing the page. */
.jumps[hidden]{display:none}
.jump{font-size:13px;padding:7px 13px;border-radius:99px;border:1px solid var(--line-2);color:var(--muted);
  transition:color .15s,border-color .15s}
.jump:hover{color:var(--text);border-color:var(--text)}
.jump-n{font-family:var(--mono);font-size:11px;color:var(--dim);margin-left:5px}
.no-results{max-width:var(--maxw);margin:0 auto;padding:40px var(--gutter);color:var(--muted)}
.linkish{color:var(--red-hi);text-decoration:underline;text-underline-offset:3px}

/* ---- category rails ---- */
.cats{padding:clamp(20px,4vw,40px) 0 40px;display:flex;flex-direction:column;gap:clamp(48px,7vw,86px)}
.cat{position:relative}
.cat-head{max-width:var(--maxw);margin:0 auto 20px;padding:0 var(--gutter);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.cat-kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:8px;margin-bottom:11px}
.cat-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.cat-name{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.4vw,44px);line-height:1;
  letter-spacing:-.015em;margin:0 0 10px}
.cat-cred{margin:0;color:var(--muted);font-size:14.5px}
.cat-cred b{color:var(--text);font-weight:600}
/* Intro + audience copy (§7.1). The head is now a two-column block: copy on
   the left, the routes out of the category on the right. */
.cats-intro{padding-bottom:clamp(18px,3vw,34px)}
.cat-head-main{max-width:60ch}
.cat-intro{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 12px}
.cat-aud{margin:0 0 10px;color:var(--muted);font-size:14px}
.cat-aud-l{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.cat-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:0 0 auto}

/* Cards in a grid rather than a horizontal rail: the home page now shows a
   curated three per category, which is a row, not something to scroll. */
.cat-grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat-grid--wide{grid-template-columns:repeat(4,1fr)}
.cats--all .cat-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
/* In a grid the card sizes itself from the column, not a fixed width. */
.cat-grid .card{width:auto}
.cat-grid .card[hidden]{display:none}
.cat-nav{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding-bottom:4px}
.arrow{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-2);color:var(--text);transition:background-color .15s,border-color .15s,opacity .15s}
.arrow svg{width:18px;height:18px}
.arrow:hover:not(:disabled){background:var(--red);border-color:var(--red)}
.arrow:disabled{opacity:.32;cursor:default}
.pathlink{margin-left:8px;font-size:14px;font-weight:600;color:var(--accent);white-space:nowrap}
.pathlink:hover{text-decoration:underline;text-underline-offset:3px}

.rail{overflow:hidden}
.rail-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px var(--gutter) 20px;
  padding-left:max(var(--gutter),calc((100% - var(--maxw))/2 + var(--gutter)));
  scroll-padding-inline-start:max(var(--gutter),calc((100% - var(--maxw))/2 + var(--gutter)));
  scrollbar-width:none;-ms-overflow-style:none}
.rail-track::-webkit-scrollbar{display:none}

/* ---- course card (the red hover-reveal thumbnail) ---- */
.card{position:relative;flex:0 0 auto;width:clamp(230px,22vw,290px);aspect-ratio:16/10;
  scroll-snap-align:start;border-radius:12px;overflow:hidden;display:block;
  border:1px solid var(--line);background:linear-gradient(150deg,var(--c1),var(--c2) 82%);
  transition:transform .38s var(--ease),border-color .3s,box-shadow .38s}
.card-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease)}
.card-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,6,10,.86),transparent 60%)}
.card-top{position:absolute;top:11px;left:12px;right:12px;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-meta{font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:rgba(255,255,255,.85);
  text-shadow:0 1px 4px rgba(0,0,0,.8)}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.03em;padding:3px 7px;border-radius:20px;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.2);color:#fff;white-space:nowrap}
.chip--free{background:var(--gold);border-color:var(--gold);color:#20160a;font-weight:700}
.card-chips{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}
/* Currency code inside a price chip — condensed and light, matching the landing
   pages. The chip itself is mono, so --disp reads as the deliberate contrast it
   is rather than as a stray font. */
.chip .ccode{font-family:var(--disp);font-stretch:condensed;font-weight:700;
  letter-spacing:.02em;color:#c9d6ea;margin-right:.08em}
/* Discount flag. Reads as a saving at a glance without the room a struck-out
   figure needs — the "was" price and the campaign label live on the course
   page, where there is space to show both numbers honestly. */
.chip--save{background:#1f7a48;border-color:#1f7a48;color:#fff;font-weight:700}
.card-title{position:absolute;left:13px;right:13px;bottom:11px;z-index:2;font-weight:650;font-size:13.5px;
  line-height:1.2;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.9);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card--adv{border-color:rgba(240,180,41,.24)}
.card:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:0 20px 46px rgba(0,0,0,.55)}
.card:hover .card-cover{transform:scale(1.07)}
/* the reveal: red wash fades in with the full title, eases out on leave */
.card-over{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;
  gap:12px;padding:18px 17px;text-align:center;
  background:linear-gradient(160deg,var(--red-hi),var(--red));
  opacity:0;transition:opacity .5s var(--ease)}
.card-over-t{color:#fff;font-weight:750;font-size:clamp(14px,1.15vw,17px);line-height:1.22;letter-spacing:-.01em;
  text-shadow:0 1px 10px rgba(90,0,6,.5);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card-cta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.92);font-weight:600}
.card:hover .card-over,.card:focus-visible .card-over{opacity:1;transition:opacity .26s ease}

/* ---- pathways band ---- */
.band{margin:clamp(30px,6vw,70px) 0 0;border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.014))}
.band-in{max-width:var(--maxw);margin:0 auto;padding:clamp(48px,7vw,84px) var(--gutter);
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px)}
.band h2{font-family:var(--disp);font-weight:700;font-size:clamp(30px,4vw,52px);line-height:.98;
  letter-spacing:-.02em;margin:0 0 16px;text-wrap:balance}
.band h2 .em{color:var(--red)}
.band p{color:var(--muted);font-size:16px;max-width:44ch;margin:0 0 22px}
.band p b{color:var(--text);font-weight:600}
.creds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.creds li{display:grid;grid-template-columns:1fr auto 1.1fr;align-items:center;gap:14px;
  padding:15px 18px;background:rgba(255,255,255,.018);transition:background-color .15s}
.creds li:hover{background:rgba(255,255,255,.05)}
.cred-cat{font-weight:600;font-size:14px}
.cred-arrow{color:var(--red);font-weight:700}
.cred-name{font-family:var(--mono);font-size:12.5px;color:var(--muted);text-align:right}

/* ---- accreditation trust card ---- */
.trust-card{border:1px solid var(--line);border-radius:12px;padding:26px 28px;
  background:rgba(255,255,255,.018);align-self:start}
.trust-kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:16px}
.trust-marks{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.trust-marks .divide{width:1px;height:22px;background:rgba(255,255,255,.22)}
.trust-marks img{height:22px;opacity:.9}
.trust-marks img.teex{height:30px}
.trust-card p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0}
.trust-note{font-family:var(--mono);font-size:12px;color:var(--dim);max-width:52ch}

/* ---- why cards / capability cards / audiences / taxonomy ---- */
.wcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.wcard{padding:22px 20px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.018)}
.wcard h3{font-size:16px;font-weight:650;margin:0 0 8px;letter-spacing:-.01em}
.wcard p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.auds{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.aud{padding:20px;border-left:2px solid var(--red);background:rgba(255,255,255,.014);border-radius:0 10px 10px 0}
.aud h3{font-size:15.5px;margin:0 0 6px;font-weight:650}
.aud p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.taxes{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tax{padding:20px 22px;background:rgba(255,255,255,.018)}
.tax h3{margin:0 0 6px;font-size:16px;font-weight:650;color:var(--gold)}
.tax p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:80ch}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.step-n{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-2);font-family:var(--mono);font-size:13px;color:var(--gold)}
.steps h3{margin:0 0 3px;font-size:15.5px;font-weight:650}
.steps p{margin:0;color:var(--muted);font-size:14.5px}
.band-more{margin:20px 0 0;font-size:14.5px}
.band-more a{color:var(--red-hi);font-weight:600}
.band--featured,.band--why,.band--auds,.band--verify{padding:clamp(46px,7vw,80px) 0}
.band--why .wcards,.band--featured .cat-grid{margin-top:6px}

/* ---- final CTA ---- */
.finalcta{padding:clamp(56px,8vw,110px) 0;border-top:1px solid var(--line);text-align:center;
  background:radial-gradient(90% 120% at 50% 0%,rgba(225,29,46,.09),transparent 60%)}
.finalcta h2{font-family:var(--disp);font-weight:700;font-size:clamp(32px,5vw,62px);line-height:1;
  letter-spacing:-.02em;margin:0 auto 14px;max-width:20ch;text-wrap:balance}
.finalcta h2 .em{color:var(--red)}
.finalcta p{color:var(--muted);margin:0 auto 26px;max-width:52ch}
.finalcta .hero-cta{justify-content:center}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line);margin-top:8px}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:clamp(36px,5vw,58px) var(--gutter);
  display:grid;grid-template-columns:1.3fr 2fr;gap:clamp(28px,5vw,64px);color:var(--dim);font-size:13px}
.foot img{height:20px;opacity:.85;margin-bottom:16px}
.foot-brand p{margin:0 0 10px;max-width:52ch;line-height:1.6}
.foot-contact a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.foot-contact a:hover{color:var(--text)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot-h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;font-weight:600}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot-col a{color:var(--dim)}
.foot-col a:hover{color:var(--text)}

@media (max-width:1040px){
  .routes{grid-template-columns:1fr}
  .cat-grid,.cat-grid--wide{grid-template-columns:repeat(2,1fr)}
  .foot-in{grid-template-columns:1fr}
}
@media (max-width:820px){
  .nav-links{display:none}          /* leaves just the centred login button */
  .nav-in{padding:0 14px}
  .nav-logo img{height:20px}
  .lockup{gap:9px}
  .lockup .clc-tag{display:none}
  .lockup img{height:15px}.lockup img.teex{height:18px}
  .lockup .divide{height:16px}
  .cat-head{flex-direction:column;align-items:flex-start;gap:14px}
  .cat-nav{width:100%}
  .cat-actions{align-items:flex-start;flex-direction:row;flex-wrap:wrap;width:100%}
  .pathlink{margin-left:auto}
  .band-in{grid-template-columns:1fr}
  .creds li{grid-template-columns:1fr;gap:4px}
  .cred-name{text-align:left}
  .cred-arrow{display:none}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .cat-grid,.cat-grid--wide,.cats--all .cat-grid{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .apx *{transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---- currency switch (USD / TTD) ----
   Display only: the learn app bills the course's own currency. Cards show a
   single code-prefixed figure. */
.ccy{display:inline-flex;align-items:center;gap:1px;padding:1px;border-radius:999px;
  border:1px solid var(--line-2)}
/* Kept in step with the landing header's switcher — see course-promo.css.
   Scoped to .apx to out-specify `.apx button{font:inherit}` above; unscoped it
   loses and the control renders at body size. */
.apx .ccy-btn{font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 7px;line-height:1.3;
  border-radius:999px;color:var(--muted);transition:background-color .15s,color .15s}
.ccy-btn:hover{color:var(--text)}
.ccy-btn.is-on{background:var(--red);color:#fff}
/* Kept on small screens, only tighter — see the note in course-promo.css. */
@media (max-width:820px){ .apx .ccy-btn{font-size:9.5px;padding:2px 5px} }