/* The StationX site menu — one stylesheet for app, www and labs (src/lib/site-nav/).
   Everything is scoped under .sxn so neither the host's CSS (Tailwind/DaisyUI, Astra) nor
   this file leaks into the other. Every selector carries :is(.sxn,#sxn-host): :is() takes its
   strongest argument's specificity, so each rule gains one id's weight while still matching by
   class (no element has id sxn-host). Host rules such as www's Elementor kit
   `.elementor-kit-8625 button{color:#fff}` (0,1,1) then lose to every menu rule; order between
   menu rules is unchanged (all gain the same). Found on www staging, 2 Nov. A test enforces it. Rules: text never below 16px (Nathan, 22 Oct); Ludus palette;
   Nunito Sans (the host loads it; system-ui is the fallback). */
.sxn:is(.sxn,#sxn-host){--sxn-navy:#01236A;--sxn-ink:#0F172A;--sxn-slate:#475569;--sxn-muted:#64748B;--sxn-line:#E2E8F0;--sxn-mist:#F4F6FA;--sxn-blue:#2F6FE8;--sxn-blue-d:#2459C9;--sxn-deep:#0E1E44;
  position:relative;z-index:50;background:#fff;border-bottom:1px solid var(--sxn-line);font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;color:var(--sxn-slate);text-align:left;-webkit-font-smoothing:antialiased}
.sxn:is(.sxn,#sxn-host) :where(*,*::before,*::after){box-sizing:border-box}
.sxn:is(.sxn,#sxn-host) :where(a){color:inherit;text-decoration:none}
.sxn:is(.sxn,#sxn-host) :where(img,video){max-width:100%;display:block}
.sxn:is(.sxn,#sxn-host) :where(button){font:inherit;color:inherit;background:none;border:0;margin:0;cursor:pointer;padding:0;text-transform:none;letter-spacing:normal}
.sxn:is(.sxn,#sxn-host) :where(h2,h3,p){margin:0;font-family:inherit;letter-spacing:normal;text-transform:none}
.sxn:is(.sxn,#sxn-host) [hidden],.sxn:is(.sxn,#sxn-host) .hidden{display:none!important}
.sxn:is(.sxn,#sxn-host) :focus-visible{outline:3px solid var(--sxn-blue);outline-offset:2px;border-radius:6px}
/* Host themes outline every focused link (Astra: a:focus{outline:thin dotted}); the menu shows its
   own ring for keyboard focus only. */
.sxn:is(.sxn,#sxn-host) :focus:not(:focus-visible){outline:none}

/* ---- bar ---- */
:is(.sxn,#sxn-host) .sxn-bar{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:8px;height:76px}
:is(.sxn,#sxn-host) .sxn-logo{display:flex;align-items:center;margin-right:18px;flex:none}
:is(.sxn,#sxn-host) .sxn-logo img{height:30px;width:auto}
:is(.sxn,#sxn-host) .sxn-nav{display:flex;align-items:center;gap:2px;height:100%}
:is(.sxn,#sxn-host) .sxn-item{height:100%;display:flex;align-items:center}
/* Bar items: uppercase, in the same type as today's www/app menu (Nunito Sans 17px/400, #10334a,
   measured on WP 2026-07-02) — Nathan, 2 Nov: "not so bold … the same as what we already have". */
:is(.sxn,#sxn-host) .sxn-trig{display:flex;align-items:center;gap:8px;height:44px;padding:0 13px;border-radius:8px;font-weight:400;font-size:17px;letter-spacing:normal;text-transform:uppercase;color:#10334a;white-space:nowrap}
:is(.sxn,#sxn-host) .sxn-trig:hover,:is(.sxn,#sxn-host) .sxn-trig[aria-expanded="true"]{background:var(--sxn-mist);color:var(--sxn-navy)}
:is(.sxn,#sxn-host) .sxn-chev{display:inline-block;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .15s}
:is(.sxn,#sxn-host) [aria-expanded="true"]>.sxn-chev{transform:rotate(-135deg) translate(-2px,-1px)}
:is(.sxn,#sxn-host) .sxn-right{margin-left:auto;display:flex;align-items:center;gap:10px}
:is(.sxn,#sxn-host) .sxn-signin{font-weight:800;font-size:16px;color:var(--sxn-ink);padding:0 12px;height:44px;display:flex;align-items:center;border-radius:8px}
:is(.sxn,#sxn-host) .sxn-signin:hover{background:var(--sxn-mist)}
:is(.sxn,#sxn-host) .sxn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:10px;font-weight:800;font-size:16px;white-space:nowrap;line-height:1}
:is(.sxn,#sxn-host) .sxn-btn-blue{background:var(--sxn-blue);color:#fff!important;box-shadow:0 6px 16px rgba(47,111,232,.28)}
:is(.sxn,#sxn-host) .sxn-btn-blue:hover{background:var(--sxn-blue-d)}
:is(.sxn,#sxn-host) .sxn-btn-line{box-shadow:inset 0 0 0 2px var(--sxn-blue);color:var(--sxn-blue-d)!important;background:#fff}
:is(.sxn,#sxn-host) .sxn-btn-line:hover{background:#EEF3FD}
:is(.sxn,#sxn-host) .sxn-btn-white{background:#fff;color:var(--sxn-navy)!important;box-shadow:none}
:is(.sxn,#sxn-host) .sxn-btn-white:hover{background:#E8EEFF}
:is(.sxn,#sxn-host) .sxn-memtrig .sxn-chev{width:8px;height:8px;border-color:#fff}
:is(.sxn,#sxn-host) .sxn-burger{display:none;width:46px;height:46px;border-radius:8px;align-items:center;justify-content:center;flex:none}
:is(.sxn,#sxn-host) .sxn-burger span,:is(.sxn,#sxn-host) .sxn-burger span::before,:is(.sxn,#sxn-host) .sxn-burger span::after{display:block;width:22px;height:2.5px;background:var(--sxn-ink);border-radius:2px;position:relative}
:is(.sxn,#sxn-host) .sxn-burger span::before,:is(.sxn,#sxn-host) .sxn-burger span::after{content:"";position:absolute;left:0}
:is(.sxn,#sxn-host) .sxn-burger span::before{top:-7px}:is(.sxn,#sxn-host) .sxn-burger span::after{top:7px}

/* ---- panels: full width under the bar ---- */
:is(.sxn,#sxn-host) .sxn-panel{position:absolute;left:0;right:0;top:100%;background:linear-gradient(90deg,#fff 50%,var(--sxn-deep) 50%);border-bottom:1px solid var(--sxn-line);box-shadow:0 30px 60px -20px rgba(15,23,42,.28);animation:sxn-drop .16s ease-out}
:is(.sxn,#sxn-host) .sxn-panel:has(>.sxn-cardwrap){background:#fff}
@keyframes sxn-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){:is(.sxn,#sxn-host) .sxn-panel,:is(.sxn,#sxn-host) .sxn-mem{animation:none}}
:is(.sxn,#sxn-host) .sxn-wrap{max-width:1240px;margin:0 auto;padding:26px 24px 28px}
:is(.sxn,#sxn-host) .sxn-pin{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,28vw,400px);min-height:360px;background:#fff}
:is(.sxn,#sxn-host) .sxn-pin.sxn-narrow{grid-template-columns:minmax(0,1fr) clamp(260px,24vw,340px)}
:is(.sxn,#sxn-host) .sxn-pmain{padding:30px 40px 30px 24px}
:is(.sxn,#sxn-host) .sxn-ptitle{color:var(--sxn-ink)!important;font-size:22px!important;font-weight:800!important;line-height:1.3!important;margin:0 0 6px!important}
:is(.sxn,#sxn-host) .sxn-plead{margin:0 0 22px!important;max-width:60ch;color:var(--sxn-slate);font-size:16px}
:is(.sxn,#sxn-host) .sxn-grp{font-size:16px;font-weight:800;color:var(--sxn-navy);margin:0 0 10px}
:is(.sxn,#sxn-host) .sxn-more{margin-top:18px;padding-top:16px;border-top:1px solid var(--sxn-line);display:flex;gap:10px 24px;flex-wrap:wrap}
:is(.sxn,#sxn-host) .sxn-more a{font-weight:800;color:var(--sxn-blue-d);font-size:16px}
:is(.sxn,#sxn-host) .sxn-more a:hover{text-decoration:underline}

/* ---- Training: four cards. Subgrid lines up every row (picture, title, text, links,
   button) across the cards, so a two-line title or a three-line description in one card
   moves the same row in all of them (Nathan, 2 Nov: "vertical consistency"). ---- */
:is(.sxn,#sxn-host) .sxn-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto auto 1fr;gap:0 18px}
:is(.sxn,#sxn-host) .sxn-card{grid-row:span 5;display:grid;grid-template-rows:subgrid;min-width:0;border:1px solid var(--sxn-line);border-radius:16px;overflow:hidden;background:#fff}
:is(.sxn,#sxn-host) .sxn-card-art{display:block;border-bottom:1px solid var(--sxn-line)}
:is(.sxn,#sxn-host) .sxn-card-art .sxn-art{aspect-ratio:16/9}
:is(.sxn,#sxn-host) .sxn-card-title{padding:16px 18px 0;margin:0!important;font-size:19px!important;font-weight:800!important;color:var(--sxn-ink)!important;line-height:1.3!important}
:is(.sxn,#sxn-host) .sxn-card-title a:hover{color:var(--sxn-blue-d)}
/* Each title line stays on one line at every desktop width: the size scales from 19px down
   to the 16px floor, so "AI-Driven Cyber Security" fits a card at 1101px. */
:is(.sxn,#sxn-host) .sxn-tl{display:block;white-space:nowrap}
:is(.sxn,#sxn-host) .sxn-card-title{font-size:clamp(16px,1.45vw,19px)!important}
/* A bullet before each card title (Nathan, 2 Nov): hangs in the margin so both title lines
   start at the same edge. */
:is(.sxn,#sxn-host) .sxn-card-title{position:relative;padding-left:40px!important}
:is(.sxn,#sxn-host) .sxn-card-title::before{content:"";position:absolute;left:18px;top:calc(16px + .65em - 6px);width:12px;height:12px;border-radius:3px;background:var(--sxn-blue);transform:rotate(45deg)}
:is(.sxn,#sxn-host) .sxn-card-text{padding:6px 18px 12px;font-size:16px;color:var(--sxn-slate);line-height:1.5}
:is(.sxn,#sxn-host) .sxn-card-links{padding:0 18px}
:is(.sxn,#sxn-host) .sxn-card-cta{padding:14px 18px 18px;display:flex;align-items:flex-end}
:is(.sxn,#sxn-host) .sxn-card-cta .sxn-btn{width:100%;height:44px}
:is(.sxn,#sxn-host) .sxn-go{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-top:1px solid var(--sxn-line);font-size:16px;font-weight:800;color:var(--sxn-blue-d)!important}
:is(.sxn,#sxn-host) .sxn-go:last-child{border-bottom:1px solid var(--sxn-line)}
:is(.sxn,#sxn-host) .sxn-go::after{content:"";width:8px;height:8px;border-right:2.5px solid currentColor;border-top:2.5px solid currentColor;transform:rotate(45deg);flex:none;margin-right:3px}
:is(.sxn,#sxn-host) .sxn-go:hover{color:var(--sxn-ink)!important}

/* ---- the pictures: navy tile + lattice + the product's own asset ---- */
:is(.sxn,#sxn-host) .sxn-art{position:relative;overflow:hidden;background:var(--sxn-deep);isolation:isolate;height:100%}
:is(.sxn,#sxn-host) .sxn-net{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.9}
:is(.sxn,#sxn-host) .sxn-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
:is(.sxn,#sxn-host) .sxn-win{position:absolute;border-radius:8px;overflow:hidden;box-shadow:0 16px 36px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.16);background:#fff}
:is(.sxn,#sxn-host) .sxn-win img{width:100%;height:100%;object-fit:cover;object-position:0 0}
/* Both windows end inside the tile, so every card's picture has a clear bottom edge. */
:is(.sxn,#sxn-host) .sxn-w1{left:6%;top:10%;width:60%;aspect-ratio:16/10}
:is(.sxn,#sxn-host) .sxn-w2{right:6%;bottom:9%;width:54%;aspect-ratio:16/10}
:is(.sxn,#sxn-host) .sxn-badges{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
:is(.sxn,#sxn-host) .sxn-badges img{width:30%;max-width:150px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))}
:is(.sxn,#sxn-host) .sxn-badges img:nth-child(1){transform:rotate(-8deg) translateX(18%)}
:is(.sxn,#sxn-host) .sxn-badges img:nth-child(2){position:relative;z-index:2;width:34%}
:is(.sxn,#sxn-host) .sxn-badges img:nth-child(3){transform:rotate(8deg) translateX(-18%)}
:is(.sxn,#sxn-host) .sxn-partner{position:absolute;left:4%;top:7%;width:15%;max-width:64px;border-radius:8px;background:#fff;padding:4px}

/* Status pills on the card pictures (top-right) and beside spotlight titles:
   "New" green, "Coming soon" amber (Nathan, 2 Nov). */
:is(.sxn,#sxn-host) .sxn-card-art{position:relative}
:is(.sxn,#sxn-host) .sxn-badge{position:absolute;right:12px;top:12px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:16px;font-weight:800;line-height:1.2;box-shadow:0 6px 16px rgba(0,0,0,.3);white-space:nowrap}
:is(.sxn,#sxn-host) .sxn-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
:is(.sxn,#sxn-host) .sxn-tone-soon{background:#FBBF24;color:#1F1400}
:is(.sxn,#sxn-host) .sxn-tone-new{background:#22C55E;color:#04260F}
:is(.sxn,#sxn-host) .sxn-badge-inline{position:static;flex:none}
/* Screen-reader-only text (the card title's "(New)" / "(Coming soon)"): read out, never shown. */
:is(.sxn,#sxn-host) .sxn-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
:is(.sxn,#sxn-host) .sxn-spot-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 6px}
:is(.sxn,#sxn-host) .sxn-spot-head h3{flex:1 1 12ch;min-width:0}
:is(.sxn,#sxn-host) .sxn-spot-head h3{margin:0!important}

/* ---- the navy spotlight ---- */
:is(.sxn,#sxn-host) .sxn-spot{position:relative;background:var(--sxn-deep);color:#C9D6EE;padding:26px 28px 28px;overflow:hidden;display:flex;flex-direction:column;isolation:isolate}
:is(.sxn,#sxn-host) .sxn-spot h3{color:#fff!important;font-size:21px!important;font-weight:800!important;line-height:1.25!important;margin:0 0 6px!important}
:is(.sxn,#sxn-host) .sxn-spot p{margin:0 0 14px;font-size:16px;color:#DCE6F7}
:is(.sxn,#sxn-host) .sxn-shot{border-radius:12px;overflow:hidden;aspect-ratio:16/9;margin-bottom:16px;box-shadow:0 14px 30px rgba(0,0,0,.35)}
:is(.sxn,#sxn-host) .sxn-facts{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
:is(.sxn,#sxn-host) .sxn-facts span{font-size:16px;font-weight:800;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:4px 10px;border-radius:999px}
:is(.sxn,#sxn-host) .sxn-spot .sxn-btn{margin-top:auto;align-self:flex-start}
:is(.sxn,#sxn-host) .sxn-spot-link{cursor:pointer}
:is(.sxn,#sxn-host) .sxn-spot-link .sxn-btn::after{content:"";position:absolute;inset:0;z-index:4}
:is(.sxn,#sxn-host) .sxn-spot-link:hover .sxn-btn-white{background:#E8EEFF}
:is(.sxn,#sxn-host) .sxn-cover-wrap{display:flex;justify-content:center;margin:4px 0 18px}
:is(.sxn,#sxn-host) .sxn-book{width:62%;max-width:210px;height:auto;border-radius:6px;box-shadow:0 22px 44px rgba(0,0,0,.55);transform:rotate(-3deg)}
:is(.sxn,#sxn-host) .sxn-feat{display:block;color:#fff!important;margin:4px 0 14px}
:is(.sxn,#sxn-host) .sxn-feat img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:10px;box-shadow:0 12px 26px rgba(0,0,0,.4);margin-bottom:10px}
:is(.sxn,#sxn-host) .sxn-feat b{display:block;font-size:18px;font-weight:800;line-height:1.35;color:#fff}
:is(.sxn,#sxn-host) .sxn-feat:hover b{text-decoration:underline}
:is(.sxn,#sxn-host) .sxn-tops{display:grid;gap:8px;margin-bottom:18px}
:is(.sxn,#sxn-host) .sxn-tops a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.08);color:#fff!important;font-size:16px;font-weight:700;line-height:1.4}
:is(.sxn,#sxn-host) .sxn-tops a::after{content:"";width:7px;height:7px;border-right:2.5px solid #7FB0FF;border-top:2.5px solid #7FB0FF;transform:rotate(45deg);flex:none;margin-right:3px}
:is(.sxn,#sxn-host) .sxn-tops a:hover{background:rgba(255,255,255,.16)}

/* ---- Certifications: one row per exam, two clear buttons ---- */
/* Rows never squeeze: a row needs ~340px, so the grid drops to one column before the exam
   name could touch its buttons (Nathan, 2 Nov: the name ran into "Training" at ~1200px). */
:is(.sxn,#sxn-host) .sxn-xrows{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:8px 18px}
:is(.sxn,#sxn-host) .sxn-xrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--sxn-line);border-radius:12px}
:is(.sxn,#sxn-host) .sxn-xrow img{width:44px;height:44px;flex:none}
:is(.sxn,#sxn-host) .sxn-xrow b{flex:1 0 auto;font-size:17px;font-weight:800;color:var(--sxn-ink);white-space:nowrap}
:is(.sxn,#sxn-host) .sxn-xb{display:inline-flex;align-items:center;flex:none;height:38px;padding:0 12px;border-radius:10px;font-size:16px;font-weight:800;white-space:nowrap}
:is(.sxn,#sxn-host) .sxn-xt{box-shadow:inset 0 0 0 1.5px #B9CCF5;color:var(--sxn-blue-d)!important}
:is(.sxn,#sxn-host) .sxn-xt:hover{background:#EEF3FD}
:is(.sxn,#sxn-host) .sxn-xv{background:var(--sxn-blue);color:#fff!important}
:is(.sxn,#sxn-host) .sxn-xv:hover{background:var(--sxn-blue-d)}
:is(.sxn,#sxn-host) .sxn-xall{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:14px 18px;border-radius:12px;background:var(--sxn-mist);font-size:16px}
:is(.sxn,#sxn-host) .sxn-xall b{color:var(--sxn-ink);font-weight:800;margin-right:8px}
:is(.sxn,#sxn-host) .sxn-xall:hover{background:#EAEFF8}
:is(.sxn,#sxn-host) .sxn-xall .sxn-btn{height:40px;flex:none}

/* ---- Free + Articles: icon links ---- */
:is(.sxn,#sxn-host) .sxn-groups{display:grid;grid-template-columns:1fr;gap:8px 34px}
:is(.sxn,#sxn-host) .sxn-groups.sxn-cols2{grid-template-columns:1.25fr 1fr}
:is(.sxn,#sxn-host) .sxn-links2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
:is(.sxn,#sxn-host) .sxn-lk{display:flex;gap:14px;align-items:flex-start;padding:10px 12px;margin:0 -12px;border-radius:12px}
:is(.sxn,#sxn-host) .sxn-lk:hover{background:var(--sxn-mist)}
:is(.sxn,#sxn-host) .sxn-lkt b{display:block;color:var(--sxn-ink);font-size:16px;font-weight:800;line-height:1.3}
:is(.sxn,#sxn-host) .sxn-lkt span{display:block;font-size:16px;color:var(--sxn-muted);line-height:1.45;margin-top:2px}
:is(.sxn,#sxn-host) .sxn-ico{flex:none;width:46px;height:46px;border-radius:12px;background:linear-gradient(140deg,#13306E,#0E1E44);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(143,178,255,.25)}
:is(.sxn,#sxn-host) .sxn-ico svg{width:22px;height:22px}
:is(.sxn,#sxn-host) .sxn-ico .sxn-hl{stroke:#7FB0FF}

/* ---- Membership dropdown ---- */
:is(.sxn,#sxn-host) .sxn-memitem{position:relative}
:is(.sxn,#sxn-host) .sxn-mem{position:absolute;right:0;top:calc(100% - 10px);width:min(720px,calc(100vw - 48px));background:#fff;border:1px solid var(--sxn-line);border-radius:18px;box-shadow:0 30px 70px -20px rgba(15,23,42,.35);padding:18px;animation:sxn-drop .16s ease-out}
:is(.sxn,#sxn-host) .sxn-memgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
:is(.sxn,#sxn-host) .sxn-mcard{border-radius:14px;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--sxn-line)}
:is(.sxn,#sxn-host) .sxn-mart{display:block;aspect-ratio:16/8;overflow:hidden;border-bottom:1px solid var(--sxn-line)}
:is(.sxn,#sxn-host) .sxn-card-art{overflow:hidden}
:is(.sxn,#sxn-host) .sxn-mbody{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
:is(.sxn,#sxn-host) .sxn-mbody h3{color:var(--sxn-ink)!important;font-size:19px!important;font-weight:800!important;line-height:1.3!important}
:is(.sxn,#sxn-host) .sxn-mbody p{margin:4px 0 12px;font-size:16px}
:is(.sxn,#sxn-host) .sxn-mbody .sxn-btn{height:42px;margin-top:auto}
:is(.sxn,#sxn-host) .sxn-memteam{display:block;margin:14px 4px 0;font-size:16px;font-weight:800;color:var(--sxn-blue-d)!important}
:is(.sxn,#sxn-host) .sxn-memteam::after,:is(.sxn,#sxn-host) .sxn-dteam::after{content:" \203A"}
:is(.sxn,#sxn-host) .sxn-memteam:hover{text-decoration:underline}

/* ---- phones and small tablets: the drawer ---- */
@media (max-width:1199px){
  :is(.sxn,#sxn-host) .sxn-nav,:is(.sxn,#sxn-host) .sxn-signin,:is(.sxn,#sxn-host) .sxn-mem,:is(.sxn,#sxn-host) .sxn-memtrig .sxn-chev{display:none!important}
  :is(.sxn,#sxn-host) .sxn-burger{display:flex}
  :is(.sxn,#sxn-host) .sxn-bar{height:64px;padding:0 16px}
  :is(.sxn,#sxn-host) .sxn-logo{margin-right:auto}
  :is(.sxn,#sxn-host) .sxn-logo img{height:24px}
  :is(.sxn,#sxn-host) .sxn-right{margin-left:0;gap:6px}
  :is(.sxn,#sxn-host) .sxn-memtrig{height:42px;padding:0 14px}
  :is(.sxn,#sxn-host) .sxn-drawer{position:fixed;inset:64px 0 0;background:#fff;z-index:60;overflow:auto;padding:12px 20px 120px;border-top:1px solid var(--sxn-line)}
  :is(.sxn,#sxn-host) .sxn-dmem{display:grid;gap:10px;margin:6px 0 8px}
  :is(.sxn,#sxn-host) .sxn-dteam{display:flex;align-items:center;min-height:44px;margin-bottom:8px;font-size:16px;font-weight:800;color:var(--sxn-blue-d)}
  :is(.sxn,#sxn-host) .sxn-dmc{display:flex;gap:12px;align-items:center;border:1px solid var(--sxn-line);border-radius:14px;padding:10px;min-height:76px}
  :is(.sxn,#sxn-host) .sxn-dmc>span:last-child{min-width:0;overflow-wrap:anywhere}
  :is(.sxn,#sxn-host) .sxn-dthumb{width:clamp(72px,26vw,104px);flex:none;border-radius:10px;overflow:hidden;aspect-ratio:4/3}
  :is(.sxn,#sxn-host) .sxn-dthumb img{width:100%;height:100%;object-fit:cover}
  :is(.sxn,#sxn-host) .sxn-dmc b{display:block;color:var(--sxn-ink);font-weight:800;font-size:17px}
  :is(.sxn,#sxn-host) .sxn-dmc span span{font-size:16px;color:var(--sxn-muted)}
  /* Fold-outs: category (summary) → group heading → links indented on a blue guide line. */
  :is(.sxn,#sxn-host) .sxn-acc{border-top:1px solid var(--sxn-line)}
  :is(.sxn,#sxn-host) .sxn-acc:last-of-type{border-bottom:1px solid var(--sxn-line)}
  :is(.sxn,#sxn-host) .sxn-acc>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:58px;font-weight:800;font-size:18px;color:var(--sxn-ink);cursor:pointer}
  :is(.sxn,#sxn-host) .sxn-acc>summary::-webkit-details-marker{display:none}
  :is(.sxn,#sxn-host) .sxn-acc>summary::after{content:"";width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);margin-right:6px;transition:transform .15s}
  :is(.sxn,#sxn-host) .sxn-acc[open]>summary{color:var(--sxn-navy)}
  :is(.sxn,#sxn-host) .sxn-acc[open]>summary::after{transform:rotate(-135deg)}
  :is(.sxn,#sxn-host) .sxn-dbody{margin:0 0 12px;padding:6px 14px 14px;background:var(--sxn-mist);border-radius:14px}
  :is(.sxn,#sxn-host) .sxn-dgroup{padding:8px 0 4px}
  :is(.sxn,#sxn-host) .sxn-dhead{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:800;font-size:17px;color:var(--sxn-navy)}
  :is(.sxn,#sxn-host) .sxn-dhead::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--sxn-blue);transform:rotate(45deg);flex:none}
  :is(.sxn,#sxn-host) .sxn-dlabel{color:var(--sxn-slate)}
  :is(.sxn,#sxn-host) .sxn-dlabel::before{background:var(--sxn-muted)}
  :is(.sxn,#sxn-host) .sxn-dsub{margin-left:4px;padding-left:18px;border-left:2px solid #CBD8F2}
  :is(.sxn,#sxn-host) .sxn-dl{display:flex;align-items:center;gap:12px;min-height:46px;padding:4px 0;font-weight:700;font-size:16px;color:var(--sxn-ink)}
  :is(.sxn,#sxn-host) .sxn-dl:active{color:var(--sxn-blue-d)}
  :is(.sxn,#sxn-host) .sxn-dico{flex:none;width:32px;height:32px;border-radius:9px;background:linear-gradient(140deg,#13306E,#0E1E44);color:#fff;display:flex;align-items:center;justify-content:center}
  :is(.sxn,#sxn-host) .sxn-dico svg{width:17px;height:17px}
  :is(.sxn,#sxn-host) .sxn-dico .sxn-hl{stroke:#7FB0FF}
  :is(.sxn,#sxn-host) .sxn-dbadge{padding:2px 10px;border-radius:999px;font-size:16px;font-weight:800;white-space:nowrap}
  :is(.sxn,#sxn-host) .sxn-dexams{display:grid;gap:8px;padding-top:8px}
  :is(.sxn,#sxn-host) .sxn-dexam{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--sxn-line);border-radius:12px;padding:8px 10px}
  :is(.sxn,#sxn-host) .sxn-dexam img{width:36px;height:36px;flex:none}
  :is(.sxn,#sxn-host) .sxn-dexam b{flex:1 0 auto;color:var(--sxn-ink);font-weight:800;white-space:nowrap}
  :is(.sxn,#sxn-host) .sxn-dxb{display:inline-flex;align-items:center;height:40px;padding:0 12px;border-radius:10px;font-size:16px;font-weight:800;white-space:nowrap;flex:none}
  :is(.sxn,#sxn-host) .sxn-dall{width:100%;margin-top:12px;height:46px}
  :is(.sxn,#sxn-host) .sxn-dmore{display:flex;flex-wrap:wrap;gap:4px 18px;padding-top:8px;margin-top:6px;border-top:1px solid var(--sxn-line)}
  :is(.sxn,#sxn-host) .sxn-dmore a{display:flex;align-items:center;min-height:44px;color:var(--sxn-blue-d);font-weight:800;font-size:16px}
  :is(.sxn,#sxn-host) .sxn-dfoot{margin-top:16px;display:grid;gap:10px}
  :is(.sxn,#sxn-host) .sxn-dfoot .sxn-btn{width:100%}
}
@media (min-width:1200px){:is(.sxn,#sxn-host) .sxn-drawer{display:none!important}}
@media (max-width:420px){:is(.sxn,#sxn-host) .sxn-memtrig{padding:0 12px}:is(.sxn,#sxn-host) .sxn-logo img{height:21px}:is(.sxn,#sxn-host) .sxn-bar{gap:4px;padding:0 12px}}
/* Android large text lays out at 256–320px: there is no room for the Membership button, and
   the drawer already opens on the two memberships. */
@media (max-width:340px){:is(.sxn,#sxn-host) .sxn-memitem{display:none!important}:is(.sxn,#sxn-host) .sxn-drawer{padding-left:14px;padding-right:14px}:is(.sxn,#sxn-host) .sxn-dbody{padding-left:10px;padding-right:10px}}
/* Phones under ~420px: an exam row is too narrow for name + two buttons, so the buttons drop
   to their own line, each half the row. */
@media (max-width:420px){:is(.sxn,#sxn-host) .sxn-dexam{flex-wrap:wrap}:is(.sxn,#sxn-host) .sxn-dexam b{flex-basis:calc(100% - 50px)}:is(.sxn,#sxn-host) .sxn-dxb{flex:1;justify-content:center}}

/* Spotlight backgrounds (Nathan, 2 Nov: "they need something more now in the background", the
   book "a real centerpiece … glowing"). Soft colour glows only, no lines behind the text. */
/* The glows fade out before the right edge, which stays plain navy so the spotlight runs on into
   the panel's navy half with no visible seam (Nathan, 2 Nov: "a big line down it"). */
:is(.sxn,#sxn-host) .sxn-spot{background:radial-gradient(70% 45% at 35% 18%,rgba(47,111,232,.42),transparent 70%),radial-gradient(60% 40% at 15% 100%,rgba(124,58,237,.26),transparent 70%),var(--sxn-deep)}
:is(.sxn,#sxn-host) .sxn-cover-wrap{position:relative;margin:6px 0 22px;padding:18px 0 8px;isolation:isolate}
:is(.sxn,#sxn-host) .sxn-cover-wrap::before{content:"";position:absolute;left:50%;top:52%;width:88%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(147,197,253,.95) 0%,rgba(59,130,246,.6) 28%,rgba(79,70,229,.25) 48%,rgba(14,30,68,0) 68%);z-index:-1;filter:blur(10px);animation:sxn-glow 4s ease-in-out infinite alternate}
@keyframes sxn-glow{from{opacity:.75}to{opacity:1}}
@media (prefers-reduced-motion:reduce){:is(.sxn,#sxn-host) .sxn-cover-wrap::before{animation:none}}
:is(.sxn,#sxn-host) .sxn-book{width:72%!important;max-width:240px!important;transform:perspective(900px) rotateY(-14deg) rotate(-2deg)!important;box-shadow:0 0 0 1px rgba(255,255,255,.15),18px 26px 48px rgba(0,0,0,.55),0 0 50px 8px rgba(96,165,250,.7),0 0 70px 12px rgba(59,130,246,.4)!important;transition:transform .3s ease}
:is(.sxn,#sxn-host) .sxn-cover-wrap:hover .sxn-book{transform:perspective(900px) rotateY(-6deg) rotate(0)!important}
@media (prefers-reduced-motion:reduce){:is(.sxn,#sxn-host) .sxn-book{transition:none}}
:is(.sxn,#sxn-host) .sxn-feat img{background:#fff}