/* ============================================================
   SCIKIQ Certified Data and AI Engineer (SCDAI) -- visual + interactive layer.
   Loaded after main.css and academy.css; reuses their tokens and the
   .ac-* quiz/lab styling. Everything here degrades to readable HTML
   with JS off: panels are visible by default and hidden only once
   scripts/fde.js marks the root as enhanced (.fx-on).
   ============================================================ */

.fx-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- sticky part switcher ---------------------------- */
/* The whole program is five views, not one endless scroll. */
.fx-tabs{position:sticky;top:var(--hdr-h,64px);z-index:40;background:var(--bg);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 var(--line-soft)}
.fx-tabrow{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.fx-tabrow::-webkit-scrollbar{display:none}
.fx-tab{display:flex;align-items:baseline;gap:9px;padding:15px 18px;text-decoration:none;
  color:var(--fg-dim);border-bottom:2px solid transparent;white-space:nowrap;transition:.15s;
  margin-bottom:-1px}
.fx-tab .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;opacity:.7}
.fx-tab .t{font-size:var(--step--1);font-weight:600}
.fx-tab:hover{color:var(--fg);background:var(--paper)}
.fx-tab[aria-selected="true"]{color:var(--h,var(--accent));border-bottom-color:var(--h,var(--accent))}
.fx-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:700px){.fx-tab{padding:13px 14px}.fx-tab .n{display:none}}

.fx-tabpanel{scroll-margin-top:120px}
.fx-on .fx-tabpanel[hidden]{display:none}

/* ---------- collapsible secondary blocks -------------------- */
.fx-more{border:1px solid var(--line);border-radius:14px;background:var(--bg);margin-top:22px}
.fx-more > summary{cursor:pointer;padding:16px 20px;list-style:none;display:flex;
  align-items:center;justify-content:space-between;gap:14px;font-weight:600;
  font-size:var(--step-0);transition:background .15s}
.fx-more > summary::-webkit-details-marker{display:none}
.fx-more > summary:hover{background:var(--paper)}
.fx-more > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fx-more > summary .chev{width:18px;height:18px;color:var(--fg-faint);flex:none;transition:transform .2s}
.fx-more[open] > summary .chev{transform:rotate(180deg)}
.fx-more-body{padding:0 20px 22px}

/* ---------- part header ------------------------------------ */
.fx-part{padding:clamp(56px,7vw,96px) 0 0}
.fx-part-h{display:flex;align-items:flex-start;gap:20px;
  border-top:2px solid var(--fg);padding-top:22px;margin-bottom:14px}
.fx-part-n{font-family:var(--f-mono);font-size:var(--step-2);line-height:1;
  font-weight:500;color:var(--h,var(--accent));flex:none;letter-spacing:-.02em}
.fx-part-t h2{font-family:var(--f-display);font-size:var(--step-2);line-height:1.1;
  letter-spacing:-.02em;margin:0 0 6px}
.fx-part-t .k{display:block;font-family:var(--f-mono);font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.14em;color:var(--fg-dim);margin-bottom:8px}
.fx-part-lead{font-size:var(--step-1);line-height:1.55;color:var(--fg-dim);
  max-width:70ch;margin:0 0 8px}

.fx-sec{padding:clamp(34px,4.5vw,56px) 0 0}
.fx-h3{font-family:var(--f-display);font-size:var(--step-1);letter-spacing:-.01em;margin:0 0 6px}
.fx-sub{color:var(--fg-dim);margin:0 0 20px;max-width:68ch}

/* ---------- hero ------------------------------------------- */
.fx-hero{padding:clamp(40px,6vw,80px) 0 clamp(28px,3vw,40px);
  background:linear-gradient(180deg,var(--accent-wash),transparent 70%)}
.fx-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);
  font-size:var(--step--1);text-transform:uppercase;letter-spacing:.14em;color:var(--h,var(--accent))}
.fx-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--h,var(--accent))}
.fx-hero h1{font-family:var(--f-display);font-size:var(--step-3);line-height:1.05;
  letter-spacing:-.03em;margin:14px 0 16px;max-width:20ch}
.fx-hero .lead{font-size:var(--step-1);line-height:1.55;color:var(--fg-dim);max-width:64ch;margin:0 0 22px}
.fx-facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;padding:0;list-style:none}
.fx-fact{display:inline-flex;align-items:baseline;gap:8px;padding:7px 13px;border:1px solid var(--line);
  border-radius:999px;background:var(--bg);font-size:var(--step--1)}
.fx-fact b{font-family:var(--f-mono);font-weight:500;color:var(--h,var(--accent))}
.fx-fact span{color:var(--fg-dim)}

/* proof stat row */
.fx-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:26px}
.fx-proof div{background:var(--bg);padding:18px 16px}
.fx-proof .v{display:block;font-family:var(--f-mono);font-size:var(--step-1);font-weight:500;
  color:var(--h,var(--accent));letter-spacing:-.02em;line-height:1.15}
.fx-proof .k{display:block;font-size:var(--step--1);color:var(--fg-dim);margin-top:7px;line-height:1.4}
.fx-proof .s{display:block;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--fg-faint);margin-top:8px}
@media (max-width:900px){.fx-proof{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.fx-proof{grid-template-columns:1fr}}

/* ---------- 1. value chain explorer ------------------------ */
.fx-chain{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg)}
.fx-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line)}
.fx-stage{appearance:none;border:0;background:var(--paper);text-align:left;cursor:pointer;
  padding:15px 14px 17px;font:inherit;color:var(--fg);position:relative;transition:background .15s}
.fx-stage:hover{background:var(--paper-2)}
.fx-stage .n{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;
  color:var(--fg-faint)}
.fx-stage .t{display:block;font-weight:600;font-size:var(--step--1);line-height:1.3;margin-top:7px}
.fx-stage::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.fx-stage[aria-selected="true"]{background:var(--bg)}
.fx-stage[aria-selected="true"]::after{background:var(--h,var(--accent))}
.fx-stage[aria-selected="true"] .t{color:var(--h,var(--accent))}
.fx-stage.lit{box-shadow:inset 0 0 0 2px var(--h,var(--accent))}
.fx-stage:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:960px){.fx-rail{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.fx-rail{grid-template-columns:repeat(2,1fr)}}

.fx-panel{padding:clamp(20px,3vw,30px)}
.fx-panel-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:6px}
.fx-panel-h h4{font-family:var(--f-display);font-size:var(--step-1);margin:0;letter-spacing:-.01em}
.fx-panel-h .n{font-family:var(--f-mono);font-size:var(--step--1);color:var(--h,var(--accent))}
.fx-panel > p.d{color:var(--fg-dim);margin:0 0 20px;max-width:70ch}
.fx-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:860px){.fx-cols{grid-template-columns:1fr}}
.fx-col h5{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-faint);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.fx-col ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.fx-col li{display:flex;gap:9px;font-size:var(--step--1);line-height:1.5;color:var(--fg-dim)}
.fx-col li::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--h,var(--accent));margin-top:8px;opacity:.6}
.fx-panel-foot{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.fx-ai{flex:1 1 380px;font-size:var(--step--1);line-height:1.55}
.fx-ai b{display:block;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-faint);margin-bottom:6px;font-weight:400}
.fx-metrics{display:flex;flex-wrap:wrap;gap:7px}
.fx-metrics span{font-family:var(--f-mono);font-size:11px;padding:5px 10px;border-radius:6px;
  background:var(--paper);border:1px solid var(--line-soft);color:var(--fg-dim)}
.fx-who{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.fx-who a{font-size:11px;font-family:var(--f-mono);padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);color:var(--fg-dim);text-decoration:none;transition:.15s}
.fx-who a:hover{border-color:var(--h,var(--accent));color:var(--h,var(--accent))}

/* ---------- 2. personas ------------------------------------ */
.fx-personas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.fx-p{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--bg);
  display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:.18s;text-align:left;
  appearance:none;font:inherit;color:var(--fg)}
.fx-p:hover{border-color:var(--h,var(--accent));transform:translateY(-2px);box-shadow:var(--shadow)}
.fx-p[aria-pressed="true"]{border-color:var(--h,var(--accent));box-shadow:inset 0 0 0 1px var(--h,var(--accent))}
.fx-p:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fx-p-top{display:flex;gap:12px;align-items:flex-start}
.fx-p-ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--h,var(--accent)) 12%,transparent);color:var(--h,var(--accent))}
.fx-p-ic svg{width:19px;height:19px}
.fx-p-nm b{display:block;font-size:var(--step-0);line-height:1.25}
.fx-p-nm span{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--fg-faint)}
.fx-p dl{margin:0;display:grid;gap:9px}
.fx-p dt{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-faint)}
.fx-p dd{margin:3px 0 0;font-size:var(--step--1);line-height:1.5;color:var(--fg-dim)}
.fx-p .asks{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft);
  font-family:var(--f-display);font-style:italic;font-size:var(--step--1);line-height:1.5;color:var(--fg)}
.fx-kpi{display:flex;flex-wrap:wrap;gap:6px}
.fx-kpi span{font-family:var(--f-mono);font-size:10px;padding:4px 8px;border-radius:5px;
  background:var(--paper);color:var(--fg-dim)}

/* ---------- 3. trends -------------------------------------- */
.fx-trends{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.fx-tr{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--bg);
  border-left:3px solid var(--h,var(--accent));display:flex;flex-direction:column;gap:10px}
.fx-tr-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fx-src{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  padding:4px 9px;border-radius:5px;background:var(--fg);color:var(--bg);font-weight:500}
.fx-stat{font-family:var(--f-mono);font-size:var(--step--1);color:var(--h,var(--accent));
  text-align:right;line-height:1.3}
.fx-tr h4{font-size:var(--step-0);margin:0;line-height:1.3}
.fx-tr p{margin:0;font-size:var(--step--1);line-height:1.6;color:var(--fg-dim)}

/* ---------- 4. data landscape ------------------------------ */
/* Fixed 3 columns: every program supplies exactly six source families, so a
   3x2 grid fills completely. auto-fit left grey gaps where cells were absent. */
.fx-data{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media (max-width:900px){.fx-data{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.fx-data{grid-template-columns:1fr}}
.fx-d{background:var(--bg);padding:20px;display:flex;flex-direction:column;gap:8px}
.fx-d h4{font-size:var(--step-0);margin:0}
.fx-d p{margin:0;font-size:var(--step--1);line-height:1.55;color:var(--fg-dim)}
.fx-d .ex{font-family:var(--f-mono);font-size:11px;color:var(--fg-faint);margin-top:auto;padding-top:8px}

/* ---------- 5. architecture explorer -----------------------
   The rail is also the stack diagram: read top to bottom it is the
   architecture, so a connecting spine runs down it and each rung
   carries how many systems that layer contains. The panel then
   answers what those systems are, what they do and which business
   objects live in them, bracketed by the flow in and out.        */
.fx-arch{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:0;
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media (max-width:1000px){.fx-arch{grid-template-columns:1fr}}
/* paper, not line: the rail is shorter than the panel and the space below it
   must read as the rail continuing rather than as an empty grey block */
.fx-layers{display:flex;flex-direction:column;background:var(--paper);
  border-right:1px solid var(--line);position:relative}
@media (max-width:1000px){.fx-layers{border-right:0;border-bottom:1px solid var(--line)}}
/* the spine: what makes seven buttons read as one stack. Drawn per rung, from
   the bottom of one number circle to the top of the next, so it stops at the
   last layer instead of trailing into the space below the rail. */
.fx-layer:not(:last-of-type)::after{content:'';position:absolute;left:28px;top:39px;bottom:-14px;
  width:1px;background:var(--line-strong);opacity:.55;z-index:1}
@media (max-width:1000px){.fx-layer::after{display:none}}
.fx-layer{appearance:none;border:0;background:var(--paper);cursor:pointer;font:inherit;color:var(--fg);
  text-align:left;padding:13px 16px;display:flex;gap:14px;align-items:flex-start;
  transition:.15s;position:relative;z-index:2;border-bottom:1px solid var(--line)}
.fx-layer:last-of-type{border-bottom:0}
.fx-layer:hover{background:var(--paper-2)}
.fx-layer .n{font-family:var(--f-mono);font-size:10px;color:var(--fg-faint);flex:none;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-strong);background:var(--bg);transition:.15s}
.fx-layer .ti{display:grid;gap:3px;min-width:0}
.fx-layer .t{font-size:var(--step--1);font-weight:600;line-height:1.3}
.fx-layer .r{font-family:var(--f-mono);font-size:10px;color:var(--fg-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-layer[aria-selected="true"]{background:var(--bg)}
.fx-layer[aria-selected="true"] .t{color:var(--h,var(--accent))}
.fx-layer[aria-selected="true"] .n{border-color:var(--h,var(--accent));
  background:var(--h,var(--accent));color:#fff}
.fx-layer[aria-selected="true"]::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--h,var(--accent))}
.fx-layer.lit{box-shadow:inset 0 0 0 2px var(--h,var(--accent))}
.fx-layer:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.fx-layer-body{padding:clamp(20px,3vw,30px);background:var(--bg)}
.fx-lb-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px}
.fx-lb-head .n{font-family:var(--f-mono);font-size:var(--step-1);line-height:1;flex:none;
  color:var(--h,var(--accent));letter-spacing:-.02em}
.fx-lb-head .n i{font-style:normal;font-size:11px;color:var(--fg-faint)}
.fx-layer-body h4{font-family:var(--f-display);font-size:var(--step-1);margin:0 0 7px;letter-spacing:-.01em}
.fx-lb-head p{color:var(--fg-dim);margin:0;max-width:66ch;font-size:var(--step--1);line-height:1.6}

/* -- flow: what arrives, what leaves -- */
.fx-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
  padding:16px;border-radius:12px;background:var(--paper);margin-bottom:22px}
.fx-flow-c .k{display:block;font-family:var(--f-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-faint);margin-bottom:5px}
.fx-flow-c p{margin:0;font-size:var(--step--1);line-height:1.5;color:var(--fg-dim)}
.fx-flow-c.out p{color:var(--fg)}
.fx-flow-a{flex:none;color:var(--h,var(--accent))}
.fx-flow-a svg{width:22px;height:22px;display:block}
@media (max-width:700px){
  .fx-flow{grid-template-columns:1fr;gap:12px}
  .fx-flow-a{transform:rotate(90deg);justify-self:center}
}

/* -- the systems in this layer -- */
.fx-sys{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.fx-sys-h,.fx-sys-r{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.9fr) minmax(0,1.1fr);gap:18px}
.fx-sys-h{padding:10px 18px;background:var(--paper);border-bottom:1px solid var(--line)}
.fx-sys-h span{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-faint)}
.fx-sys-r{padding:16px 18px;border-bottom:1px solid var(--line-soft);align-items:start;transition:background .15s}
.fx-sys-r:last-child{border-bottom:0}
.fx-sys-r:hover{background:var(--paper)}
.fx-sys-r b{font-size:var(--step--1);line-height:1.35}
/* the system this industry forces on you, distinguished from the shared spine */
.fx-sys-r.is-domain{background:var(--accent-wash)}
.fx-sys-r .tag{display:block;width:fit-content;margin-top:6px;font-family:var(--f-mono);
  font-size:9px;text-transform:uppercase;letter-spacing:.1em;font-weight:400;
  padding:3px 7px;border-radius:4px;background:var(--h,var(--accent));color:#fff}
.fx-sys-r p{margin:0;font-size:var(--step--1);line-height:1.6;color:var(--fg-dim)}
.fx-sys-r .ents{display:flex;flex-wrap:wrap;gap:5px;align-content:start}
.fx-sys-r .ents span{font-family:var(--f-mono);font-size:10px;padding:3px 8px;border-radius:5px;
  background:var(--paper);border:1px solid var(--line-soft);color:var(--fg-dim);white-space:nowrap}
.fx-sys-r:hover .ents span{border-color:var(--line-strong)}
@media (max-width:820px){
  .fx-sys-h{display:none}
  .fx-sys-r{grid-template-columns:1fr;gap:8px;padding:16px 16px 18px}
  .fx-sys-r b{color:var(--h,var(--accent))}
}

/* -- what you own here, and how it fails -- */
.fx-lb-foot{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
@media (max-width:820px){.fx-lb-foot{grid-template-columns:1fr}}
.fx-owns,.fx-watch{border-left:3px solid var(--h,var(--accent));padding:2px 0 2px 15px}
.fx-watch{border-left-color:var(--amber)}
.fx-owns b,.fx-watch b{display:block;font-family:var(--f-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-faint);margin-bottom:6px;font-weight:400}
.fx-owns p,.fx-watch p{margin:0;font-size:var(--step--1);line-height:1.6}
.fx-comp{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.fx-comp span{font-family:var(--f-mono);font-size:11px;padding:6px 11px;border-radius:7px;
  background:var(--paper);border:1px solid var(--line-soft)}

/* stack + constraints */
.fx-stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.fx-st{border:1px solid var(--line);border-radius:12px;padding:17px}
.fx-st h5{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--h,var(--accent));margin:0 0 11px}
.fx-st ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.fx-st li{font-size:var(--step--1);line-height:1.45;color:var(--fg-dim);
  padding-left:13px;position:relative}
.fx-st li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:1px;background:var(--fg-faint)}
.fx-cons{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.fx-con{padding:18px;border-radius:12px;background:var(--paper);border:1px solid var(--line-soft)}
.fx-con h5{margin:0 0 7px;font-size:var(--step-0)}
.fx-con p{margin:0;font-size:var(--step--1);line-height:1.55;color:var(--fg-dim)}

/* ---------- 6. use-case matrix ----------------------------- */
.fx-filters{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;margin-bottom:20px;
  padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
.fx-fgroup{display:flex;flex-direction:column;gap:8px}
.fx-fgroup > b{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-faint);font-weight:400}
.fx-chips{display:flex;flex-wrap:wrap;gap:7px}
.fx-chip{appearance:none;font:inherit;font-size:var(--step--1);cursor:pointer;
  padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:var(--bg);
  color:var(--fg-dim);transition:.15s}
.fx-chip:hover{border-color:var(--h,var(--accent));color:var(--fg)}
.fx-chip[aria-pressed="true"]{background:var(--h,var(--accent));border-color:var(--h,var(--accent));color:#fff}
.fx-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fx-count{margin-left:auto;font-family:var(--f-mono);font-size:var(--step--1);color:var(--fg-dim)}

.fx-ucs{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.fx-uc{border:1px solid var(--line);border-radius:14px;padding:19px;background:var(--bg);
  display:flex;flex-direction:column;gap:11px;cursor:pointer;text-align:left;appearance:none;
  font:inherit;color:var(--fg);transition:.18s}
.fx-uc:hover{border-color:var(--h,var(--accent));transform:translateY(-2px);box-shadow:var(--shadow)}
.fx-uc[aria-pressed="true"]{border-color:var(--h,var(--accent));box-shadow:inset 0 0 0 1px var(--h,var(--accent))}
.fx-uc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fx-uc[hidden]{display:none}
.fx-uc h4{margin:0;font-size:var(--step-0);line-height:1.3}
.fx-uc p{margin:0;font-size:var(--step--1);line-height:1.55;color:var(--fg-dim)}
.fx-tags{display:flex;flex-wrap:wrap;gap:6px}
.fx-tag{font-family:var(--f-mono);font-size:10px;padding:4px 9px;border-radius:5px;
  background:var(--paper);border:1px solid var(--line-soft);color:var(--fg-dim);
  display:inline-flex;align-items:center;gap:5px}
.fx-tag i{width:5px;height:5px;border-radius:50%;background:var(--h,var(--accent));flex:none}
.fx-aut{font-family:var(--f-mono);font-size:10px;padding:4px 9px;border-radius:5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em}
.fx-aut.assist{background:color-mix(in srgb,var(--gv5) 14%,transparent);color:var(--gv5)}
.fx-aut.approve{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.fx-aut.auto{background:color-mix(in srgb,var(--signal) 16%,transparent);color:var(--signal)}
.fx-uc-more{border-top:1px solid var(--line-soft);padding-top:11px;display:grid;gap:8px}
.fx-uc-more div{font-size:var(--step--1);line-height:1.5}
.fx-uc-more b{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-faint);font-weight:400;display:block;margin-bottom:3px}
.fx-empty{padding:30px;text-align:center;color:var(--fg-dim);border:1px dashed var(--line);border-radius:12px}

/* ---------- 7. playbook ------------------------------------ */
.fx-play{display:grid;gap:0;counter-reset:pb}
.fx-pb{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:20px 0;
  border-top:1px solid var(--line-soft)}
.fx-pb:first-child{border-top:0}
.fx-pb .n{font-family:var(--f-mono);font-size:var(--step-1);color:var(--h,var(--accent));line-height:1}
.fx-pb h4{margin:0 0 6px;font-size:var(--step-0)}
.fx-pb p{margin:0;color:var(--fg-dim);font-size:var(--step--1);line-height:1.6;max-width:72ch}

/* ---------- 8. modules & labs ------------------------------ */
.fx-mods{display:grid;gap:10px}
.fx-mod{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg)}
.fx-mod > summary{cursor:pointer;padding:17px 20px;display:flex;align-items:center;gap:16px;
  list-style:none;transition:background .15s}
.fx-mod > summary::-webkit-details-marker{display:none}
.fx-mod > summary:hover{background:var(--paper)}
.fx-mod > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fx-mod .no{font-family:var(--f-mono);font-size:var(--step--1);color:var(--h,var(--accent));flex:none}
.fx-mod .ti{flex:1;min-width:0}
.fx-mod .ti b{display:block;font-size:var(--step-0);line-height:1.3}
.fx-mod .ti span{font-size:var(--step--1);color:var(--fg-dim);display:block;margin-top:3px}
.fx-mod .hrs{font-family:var(--f-mono);font-size:11px;color:var(--fg-dim);flex:none;
  padding:5px 10px;border-radius:6px;background:var(--paper)}
.fx-mod .chev{flex:none;width:18px;height:18px;color:var(--fg-faint);transition:transform .2s}
.fx-mod[open] .chev{transform:rotate(180deg)}
.fx-mod-body{padding:0 20px 20px;display:grid;gap:20px}
.fx-topics{display:flex;flex-wrap:wrap;gap:7px}
.fx-topics span{font-family:var(--f-mono);font-size:11px;padding:5px 10px;border-radius:6px;
  background:var(--paper);border:1px solid var(--line-soft);color:var(--fg-dim)}
.fx-labs{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:10px;overflow:hidden}
.fx-lab{background:var(--bg);padding:13px 15px;display:grid;grid-template-columns:26px 1fr;gap:12px}
.fx-lab .ln{font-family:var(--f-mono);font-size:11px;color:var(--h,var(--accent));padding-top:2px}
.fx-lab b{display:block;font-size:var(--step--1);line-height:1.35}
.fx-lab span{display:block;font-size:var(--step--1);color:var(--fg-dim);line-height:1.5;margin-top:3px}
.fx-test{border-left:3px solid var(--h,var(--accent));padding:2px 0 2px 15px;
  display:flex;flex-wrap:wrap;gap:12px;align-items:baseline}
.fx-test b{font-size:var(--step--1)}
.fx-test .meta{font-family:var(--f-mono);font-size:11px;color:var(--fg-dim)}

/* ---------- 9. assessment blueprint ------------------------ */
.fx-bp-w{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.fx-bp{width:100%;border-collapse:collapse;min-width:640px;font-size:var(--step--1)}
.fx-bp th,.fx-bp td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.fx-bp thead th{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-faint);font-weight:400;background:var(--paper);white-space:nowrap}
.fx-bp tbody tr:last-child td{border-bottom:0}
.fx-bp td.n{font-family:var(--f-mono);color:var(--h,var(--accent));white-space:nowrap}
.fx-bp td b{display:block;margin-bottom:4px}
.fx-bp .cov{display:flex;flex-wrap:wrap;gap:5px}
.fx-bp .cov span{font-size:10px;font-family:var(--f-mono);padding:3px 7px;border-radius:4px;
  background:var(--paper);color:var(--fg-dim)}
.fx-bp td.num{font-family:var(--f-mono);white-space:nowrap;color:var(--fg-dim)}
.fx-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-top:20px}
.fx-ty{padding:15px;border:1px solid var(--line);border-radius:11px}
.fx-ty b{display:block;font-size:var(--step--1);margin-bottom:5px}
.fx-ty span{font-size:var(--step--1);color:var(--fg-dim);line-height:1.5}
.fx-policy{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.fx-policy li{display:flex;gap:10px;font-size:var(--step--1);line-height:1.55;color:var(--fg-dim)}
.fx-policy svg{flex:none;width:16px;height:16px;color:var(--h,var(--accent));margin-top:3px}

/* ---------- capstones -------------------------------------- */
.fx-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.fx-cap{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--bg);
  border-top:3px solid var(--h,var(--accent))}
.fx-cap h4{margin:0 0 9px;font-size:var(--step-0);line-height:1.3}
.fx-cap p{margin:0;font-size:var(--step--1);line-height:1.6;color:var(--fg-dim)}
.fx-deliver{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px;margin-top:20px}
.fx-deliver li{list-style:none;display:flex;gap:10px;font-size:var(--step--1);line-height:1.5;
  color:var(--fg-dim)}
.fx-deliver svg{flex:none;width:16px;height:16px;color:var(--h,var(--accent));margin-top:3px}
.fx-rubric{display:grid;gap:9px;margin-top:20px}
.fx-rb{display:grid;grid-template-columns:150px 52px 1fr;gap:14px;align-items:center;
  padding:11px 0;border-top:1px solid var(--line-soft);font-size:var(--step--1)}
.fx-rb .w{font-family:var(--f-mono);color:var(--h,var(--accent))}
.fx-rb .d{color:var(--fg-dim);line-height:1.5}
@media (max-width:640px){.fx-rb{grid-template-columns:1fr auto;gap:6px}.fx-rb .d{grid-column:1/-1}}

/* ---------- hub-specific ----------------------------------- */
/* ---------- program families -------------------------------
   Twenty-one cards in one flat grid is a wall. Grouping by
   family lets a reader skip six groups and read one.         */
.fx-fams{display:grid;gap:clamp(22px,2.4vw,32px)}
.fx-fam[hidden]{display:none}
.fx-fam-h{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:5px 16px;
  padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.fx-fam-h h4{margin:0;font-family:var(--f-display);font-size:var(--step-1);letter-spacing:-.01em}
.fx-fam-h p{grid-column:1;margin:0;font-size:var(--step--1);line-height:1.5;color:var(--fg-faint);max-width:70ch}
.fx-fam-h .n{grid-row:1;grid-column:2;font-family:var(--f-mono);font-size:11px;color:var(--fg-faint)}

.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
/* Fit each family to one row at desktop width. Without this a group of four
   renders three-plus-one and the stranded card reads as a layout fault. */
@media (min-width:1080px){
  .fx-fam[data-n="4"] > .fx-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fx-fam[data-n="2"] > .fx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.fx-card{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--bg);
  display:flex;flex-direction:column;gap:9px;text-decoration:none;color:var(--fg);transition:.18s;
  border-top:3px solid var(--h,var(--accent))}
.fx-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--h,var(--accent))}
.fx-card[hidden]{display:none}
.fx-card .no{font-family:var(--f-mono);font-size:11px;color:var(--fg-faint);letter-spacing:.1em}
.fx-card h3{margin:0;font-size:var(--step-1);line-height:1.2;font-family:var(--f-display);letter-spacing:-.01em}
.fx-card .who{font-size:var(--step--1);color:var(--h,var(--accent));font-weight:600;margin-top:-4px}
/* Clamped: the card is a teaser and the full text is the first thing on the
   program page. Without this, cards in a four-across family run to very
   different heights and the row stops reading as a row. */
.fx-card p{margin:0;font-size:var(--step--1);line-height:1.55;color:var(--fg-dim);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* the sector's defining constraint -- the one line that is unique to this card */
.fx-card .hook{margin-top:auto;padding:10px 12px;border-radius:9px;background:var(--paper);
  display:grid;gap:3px}
.fx-card .hook b{font-family:var(--f-mono);font-size:11px;color:var(--h,var(--accent));font-weight:500}
.fx-card .hook span{font-size:var(--step--1);line-height:1.45;color:var(--fg-dim);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.fx-card .spec{display:flex;flex-wrap:wrap;gap:6px;padding-top:11px;
  border-top:1px solid var(--line-soft)}
.fx-card .spec span{font-family:var(--f-mono);font-size:10px;padding:4px 8px;border-radius:5px;
  background:var(--paper);color:var(--fg-faint)}
.fx-card .go{font-family:var(--f-mono);font-size:11px;color:var(--h,var(--accent));
  display:inline-flex;align-items:center;gap:7px}
.fx-card .go svg{width:14px;height:14px}

.fx-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.fx-av{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--bg)}
.fx-av .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:5px;background:var(--fg);color:var(--bg);display:inline-block}
.fx-av h3{margin:13px 0 8px;font-size:var(--step-1);font-family:var(--f-display)}
.fx-av > p{margin:0 0 16px;color:var(--fg-dim);font-size:var(--step--1);line-height:1.6}
.fx-av ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.fx-av li{display:flex;gap:9px;font-size:var(--step--1);line-height:1.5;color:var(--fg-dim)}
.fx-av svg{flex:none;width:15px;height:15px;color:var(--accent);margin-top:3px}

.fx-model{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.fx-m{padding:20px;border-radius:13px;background:var(--paper);border:1px solid var(--line-soft)}
.fx-m h4{margin:0 0 7px;font-size:var(--step-0);line-height:1.3}
.fx-m p{margin:0;font-size:var(--step--1);line-height:1.55;color:var(--fg-dim)}

.fx-om{display:grid;gap:0}
.fx-omr{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:17px 0;
  border-top:1px solid var(--line-soft)}
.fx-omr:first-child{border-top:0}
.fx-omr .n{font-family:var(--f-mono);color:var(--accent)}
.fx-omr b{display:block;margin-bottom:4px}
.fx-omr p{margin:0;color:var(--fg-dim);font-size:var(--step--1);line-height:1.55;max-width:70ch}

/* ---------- progressive enhancement ------------------------ */
/* With JS off every panel stays visible and readable. fde.js sets .fx-on. */
.fx-on .fx-panel[hidden],
.fx-on .fx-layer-body[hidden]{display:none}
.fx-on .fx-panel:not([hidden]),
.fx-on .fx-layer-body:not([hidden]){display:block}
html:not(.fx-on) .fx-rail,
html:not(.fx-on) .fx-layers{display:none}
html:not(.fx-on) .fx-panel,
html:not(.fx-on) .fx-layer-body{border-top:1px solid var(--line)}
html:not(.fx-on) .fx-arch{grid-template-columns:1fr}
html:not(.fx-on) .fx-filters{display:none}

@media (prefers-reduced-motion:reduce){
  .fx-uc,.fx-p,.fx-card{transition:none}
  .fx-uc:hover,.fx-p:hover,.fx-card:hover{transform:none}
}

/* a use case was selected on another tab -- point at where it landed */
.fx-tab.flag{position:relative}
.fx-tab.flag::after{content:'';position:absolute;top:11px;right:9px;width:6px;height:6px;
  border-radius:50%;background:var(--h,var(--accent))}

/* hero title: a small lead line above the specialisation, so the headline
   is one or two lines instead of wrapping to four */
.fx-hero h1{max-width:24ch}
.fx-hero h1 .pre{display:block;font-family:var(--f-body);font-size:var(--step-0);
  font-weight:600;letter-spacing:0;color:var(--fg-dim);margin-bottom:6px}

/* the tab bar already separates the parts, so the part header does not need
   the full section lead-in it used when everything was one scroll */
.fx-tabpanel .fx-part{padding-top:clamp(26px,3vw,42px)}
.fx-tabpanel .fx-part-h{border-top-width:1px}

/* the SCDAI ladder shows progression, not pay -- reclaim the band column */
.ac-rung.no-band .rung-skills{grid-column:auto}

/* three related programs, so pin the grid to three columns -- auto-fit left a
   filled-background gap where the fourth cell would have been */
.fx-tabpanel .ac-related{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.fx-tabpanel .ac-related{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.fx-tabpanel .ac-related{grid-template-columns:1fr}}

/* ============================================================
   Semantic layer: data domains, ontology graph, taxonomies, terms
   ============================================================ */
.fx-h4{font-family:var(--f-display);font-size:var(--step-0);letter-spacing:-.01em;margin:0 0 6px}

/* -- data domains -- */
.fx-doms{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.fx-doms{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.fx-doms{grid-template-columns:1fr}}
.fx-dom{border:1px solid var(--line);border-radius:14px;padding:19px;background:var(--bg);
  display:flex;flex-direction:column;gap:11px;border-top:3px solid var(--h,var(--accent))}
.fx-dom h4{margin:0;font-size:var(--step-0)}
.fx-dom > p{margin:0;font-size:var(--step--1);line-height:1.55;color:var(--fg-dim)}
.fx-ent{display:flex;flex-wrap:wrap;gap:6px}
.fx-ent span{font-family:var(--f-mono);font-size:10px;padding:4px 9px;border-radius:5px;
  background:color-mix(in srgb,var(--h,var(--accent)) 9%,transparent);color:var(--fg-dim)}
.fx-dom dl{margin:auto 0 0;padding-top:11px;border-top:1px solid var(--line-soft);display:grid;gap:7px}
.fx-dom dt{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-faint)}
.fx-dom dd{margin:2px 0 0;font-size:var(--step--1);line-height:1.45;color:var(--fg-dim)}

/* -- ontology graph -- */
.fx-onto{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0;
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media (max-width:900px){.fx-onto{grid-template-columns:1fr}}
.fx-graph-w{padding:10px 10px 16px;background:var(--paper);border-right:1px solid var(--line)}
@media (max-width:900px){.fx-graph-w{border-right:0;border-bottom:1px solid var(--line)}}
.fx-graph{width:100%;height:auto;display:block}
.fx-edge{stroke:var(--line-strong);stroke-width:1.1;fill:none;opacity:.5;transition:.18s}
.fx-on .fx-onto.sel .fx-edge{opacity:.12}
.fx-on .fx-onto.sel .fx-edge.on{opacity:1;stroke:var(--h,var(--accent));stroke-width:2}
.fx-node{cursor:pointer}
.fx-node .hit{fill:transparent}
.fx-node .dot{stroke:var(--bg);stroke-width:2;transition:.18s}
.fx-node text{font-family:var(--f-mono);font-size:11px;fill:var(--fg-dim);transition:.18s;
  paint-order:stroke;stroke:var(--paper);stroke-width:3px}
.fx-node:hover .dot{r:10}
.fx-node:hover text{fill:var(--fg)}
.fx-node:focus-visible{outline:none}
.fx-node:focus-visible .dot{stroke:var(--accent);stroke-width:3}
.fx-k-core .dot,.fx-k-core.fx-kind{--kc:var(--gv1)}
.fx-k-event .dot,.fx-k-event.fx-kind{--kc:var(--gv7)}
.fx-k-ref .dot,.fx-k-ref.fx-kind{--kc:var(--gv3)}
.fx-node .dot{fill:var(--kc,var(--accent))}
.fx-on .fx-onto.sel .fx-node{opacity:.35}
.fx-on .fx-onto.sel .fx-node.on{opacity:1}
.fx-on .fx-onto.sel .fx-node[aria-pressed="true"] .dot{r:11}
.fx-legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:4px}
.fx-kind{font-family:var(--f-mono);font-size:10px;padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--kc,var(--accent)) 14%,transparent);color:var(--kc,var(--accent));
  display:inline-flex;align-items:center;gap:6px}
.fx-kind::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--kc,var(--accent))}
.fx-onto-side{padding:clamp(18px,2.4vw,26px);background:var(--bg);min-height:210px}
.fx-onto-panel h4{font-family:var(--f-display);font-size:var(--step-1);margin:10px 0 7px}
.fx-onto-panel > p{margin:0 0 14px;font-size:var(--step--1);line-height:1.55;color:var(--fg-dim)}
.fx-triples{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.fx-triples li{font-size:var(--step--1);line-height:1.45;padding:7px 10px;border-radius:7px;
  background:var(--paper);color:var(--fg-dim)}
.fx-triples b{color:var(--fg);font-weight:600}
.fx-triples em{font-family:var(--f-mono);font-style:normal;font-size:10px;color:var(--h,var(--accent));
  padding:0 3px}

/* -- taxonomies -- */
.fx-taxes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.fx-taxes{grid-template-columns:1fr}}
.fx-tax{border:1px solid var(--line);border-radius:14px;padding:19px;background:var(--bg)}
.fx-tax h4{margin:0 0 12px;font-size:var(--step-0)}
.fx-tax ol{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:0;counter-reset:lv}
.fx-tax li{counter-increment:lv;position:relative;padding:7px 0 7px 26px;font-size:var(--step--1);
  line-height:1.35;color:var(--fg-dim);border-left:1px solid var(--line);margin-left:7px}
.fx-tax li::before{content:counter(lv);position:absolute;left:-8px;top:8px;width:16px;height:16px;
  border-radius:50%;background:var(--h,var(--accent));color:#fff;font-family:var(--f-mono);
  font-size:9px;display:grid;place-items:center}
.fx-tax li:last-child{border-left-color:transparent}
.fx-tax .eg{margin:0;padding-top:12px;border-top:1px solid var(--line-soft);font-family:var(--f-mono);
  font-size:11px;line-height:1.6;color:var(--fg-faint)}

/* ============================================================
   Proof, buyer and hub-chooser layers.
   Added when the featured lab, sources, prerequisites, the
   credential, the FAQ, the chooser and the comparison table
   were wired into the pages. Same tokens, same degradation
   rules: only the chooser needs JS, and it hides itself when
   JS is absent because the comparison table below it answers
   the same question without any interaction.
   ============================================================ */

/* ---------- featured lab: one lab shown end to end ---------- */
.fx-fl{border:1px solid var(--line);border-radius:16px;background:var(--bg);overflow:hidden}
.fx-fl-head{padding:clamp(20px,2.6vw,28px);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--accent-wash),transparent)}
.fx-fl-head .mod{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--h,var(--accent))}
.fx-fl-head h4{font-family:var(--f-display);font-size:var(--step-1);letter-spacing:-.01em;
  margin:9px 0 8px}
.fx-fl-head .goal{margin:0;color:var(--fg-dim);font-size:var(--step--1);line-height:1.6;max-width:74ch}
/* the code column gets the extra width: starter lines run to ~76 characters,
   and a snippet that scrolls on first sight reads as broken */
.fx-fl-body{display:grid;grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr)}
.fx-fl-col{padding:clamp(20px,2.6vw,28px);min-width:0}
.fx-fl-col + .fx-fl-col{border-left:1px solid var(--line);background:var(--paper)}
.fx-fl h5{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-faint);font-weight:400;margin:0 0 10px}
.fx-fl h5 ~ h5{margin-top:22px}
.fx-fl-col > p{margin:0;font-size:var(--step--1);line-height:1.65;color:var(--fg-dim);max-width:62ch}
.fx-fl-env{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.fx-fl-env li{display:flex;gap:9px;font-size:var(--step--1);line-height:1.5;color:var(--fg-dim)}
.fx-fl-env svg{flex:none;width:15px;height:15px;color:var(--h,var(--accent));margin-top:3px}

/* Real Python, so it wraps nowhere and scrolls instead -- a soft-wrapped
   snippet reads as broken code to the audience this page is written for. */
.fx-code{margin:0;padding:16px 18px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg);overflow-x:auto;font-family:var(--f-mono);font-size:12px;
  line-height:1.65;color:var(--fg-dim);tab-size:4}
.fx-code code{font:inherit;color:inherit;white-space:pre}

.fx-fl-grade{padding:clamp(20px,2.6vw,28px);border-top:1px solid var(--line)}
.fx-asserts{margin:0;padding:0;list-style:none;display:grid;gap:0;counter-reset:as}
.fx-asserts li{counter-increment:as;position:relative;padding:11px 0 11px 34px;
  font-size:var(--step--1);line-height:1.55;color:var(--fg-dim);
  border-bottom:1px solid var(--line-soft)}
.fx-asserts li:last-child{border-bottom:0}
.fx-asserts li::before{content:counter(as);position:absolute;left:0;top:11px;width:20px;height:20px;
  border-radius:5px;background:var(--paper);color:var(--h,var(--accent));font-family:var(--f-mono);
  font-size:10px;display:grid;place-items:center}
.fx-fl-bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:18px}
.fx-fl-bars p{margin:0;padding:14px 16px;border-radius:11px;background:var(--paper);
  font-size:var(--step--1);line-height:1.55;color:var(--fg-dim)}
.fx-fl-bars b{display:block;font-family:var(--f-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-faint);font-weight:400;margin-bottom:6px}
.fx-pass{border:1px solid var(--h,var(--accent))}
@media (max-width:860px){
  .fx-fl-body{grid-template-columns:1fr}
  .fx-fl-col + .fx-fl-col{border-left:0;border-top:1px solid var(--line)}
}

/* ---------- sources behind the part 1 numbers --------------- */
.fx-srcs{margin:0;padding:0;list-style:none;display:grid;gap:0;counter-reset:sr}
.fx-srcs li{counter-increment:sr;display:grid;grid-template-columns:88px 1fr;gap:4px 16px;
  padding:13px 0;border-top:1px solid var(--line-soft);align-items:baseline}
.fx-srcs li:first-child{border-top:0}
.fx-srcs .org{grid-row:span 2;font-family:var(--f-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--h,var(--accent))}
.fx-srcs a{font-size:var(--step--1);line-height:1.45;color:var(--fg);text-decoration:none;
  border-bottom:1px solid var(--line-strong)}
.fx-srcs a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.fx-srcs .claim{font-size:var(--step--1);line-height:1.45;color:var(--fg-faint)}
.fx-srcs .claim::before{content:'backs: ';font-family:var(--f-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.1em}
@media (max-width:620px){
  .fx-srcs li{grid-template-columns:1fr}
  .fx-srcs .org{grid-row:auto}
}

/* ---------- prerequisites ----------------------------------- */
.fx-pre{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.fx-pre-c{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--bg)}
.fx-pre-c h4{margin:0 0 4px;font-size:var(--step-0)}
.fx-pre-c .cap{margin:0 0 14px;font-size:var(--step--1);color:var(--fg-faint);line-height:1.45}
.fx-pre-c ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.fx-pre-c li{display:flex;gap:9px;font-size:var(--step--1);line-height:1.55;color:var(--fg-dim)}
.fx-pre-c svg{flex:none;width:15px;height:15px;color:var(--h,var(--accent));margin-top:3px}

/* ---------- key/value fact lists (logistics, credential) ---- */
.fx-kvs{margin:0;display:grid;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fx-kv{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:14px 18px;
  border-top:1px solid var(--line-soft);align-items:baseline}
.fx-kv:first-child{border-top:0}
.fx-kv dt{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-faint)}
.fx-kv dd{margin:0;font-size:var(--step--1);line-height:1.55;color:var(--fg-dim)}
@media (max-width:620px){.fx-kv{grid-template-columns:1fr;gap:5px}}

/* ---------- the credential ---------------------------------- */
.fx-cert{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start}
.fx-cert-earn{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--paper)}
.fx-cert-earn h4{margin:0 0 14px;font-size:var(--step-0)}
.fx-cert-earn ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.fx-cert-earn li{display:flex;gap:9px;font-size:var(--step--1);line-height:1.55;color:var(--fg-dim)}
.fx-cert-earn svg{flex:none;width:15px;height:15px;color:var(--h,var(--accent));margin-top:3px}
.fx-note{margin:18px 0 0;padding-left:16px;border-left:2px solid var(--h,var(--accent));
  font-size:var(--step--1);line-height:1.6;color:var(--fg-dim);max-width:74ch}
@media (max-width:860px){.fx-cert{grid-template-columns:1fr}}

/* ---------- FAQ --------------------------------------------- */
.fx-faq{display:grid;gap:10px;max-width:840px}
.fx-q{border:1px solid var(--line);border-radius:12px;background:var(--bg);transition:border-color .15s}
.fx-q[open]{border-color:var(--h,var(--accent))}
.fx-q > summary{cursor:pointer;list-style:none;padding:16px 18px;display:flex;gap:16px;
  align-items:center;justify-content:space-between;font-weight:600;font-size:var(--step-0)}
.fx-q > summary::-webkit-details-marker{display:none}
.fx-q > summary:hover{background:var(--paper)}
.fx-q > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fx-q .chev{width:18px;height:18px;flex:none;color:var(--fg-faint);transition:transform .2s}
.fx-q[open] .chev{transform:rotate(180deg)}
.fx-q-body{padding:0 18px 18px}
.fx-q-body p{margin:0;font-size:var(--step--1);line-height:1.65;color:var(--fg-dim);max-width:70ch}

/* ---------- hub: the chooser -------------------------------- */
/* Two <select>s and nothing to submit, so it is useless without JS.
   Hidden until scripts/scdai.js marks the root enhanced; the comparison
   table directly below is the no-JS answer to the same question. */
.fx-chooser{display:none}
.fx-on .fx-chooser{display:block;border:1px solid var(--line);border-radius:16px;
  background:var(--bg);overflow:hidden}
.fx-ch-qs{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:clamp(18px,2.4vw,24px);
  background:linear-gradient(180deg,var(--accent-wash),transparent)}
.fx-ch-q{display:grid;gap:8px}
.fx-ch-q > span{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-faint)}
.fx-ch-q select{width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:10px;
  background:var(--bg);color:var(--fg);font:inherit;font-size:var(--step--1);cursor:pointer}
.fx-ch-q select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fx-ch-out{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.fx-ch-slot{padding:clamp(18px,2.4vw,24px);min-height:150px}
.fx-ch-slot + .fx-ch-slot{border-left:1px solid var(--line)}
.fx-ch-slot .lbl{display:block;font-family:var(--f-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-faint);margin-bottom:12px}
.fx-ch-empty{margin:0;font-size:var(--step--1);line-height:1.5;color:var(--fg-faint)}
.fx-rec{display:grid;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  border-left:3px solid var(--h,var(--accent));background:var(--paper);text-decoration:none;
  color:inherit;transition:.15s}
/* display:grid above beats the UA rule for [hidden], so restate it -- without
   this the chooser shows all thirteen cards and recommends nothing */
.fx-rec[hidden]{display:none}
.fx-rec:hover{border-color:var(--h,var(--accent));transform:translateY(-1px)}
.fx-rec .no{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--h,var(--accent))}
.fx-rec b{font-size:var(--step-0);line-height:1.3}
.fx-rec .spec{font-family:var(--f-mono);font-size:11px;color:var(--fg-faint)}
.fx-rec .go{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-size:var(--step--1);
  font-weight:600;color:var(--h,var(--accent))}
.fx-rec .go svg{width:15px;height:15px}
.fx-ch-notes{border-top:1px solid var(--line);background:var(--paper)}
.fx-ch-note{margin:0;padding:16px clamp(18px,2.4vw,24px);font-size:var(--step--1);line-height:1.6;
  color:var(--fg-dim);max-width:80ch}
.fx-on .fx-ch-note[hidden]{display:none}
@media (max-width:760px){
  .fx-ch-qs,.fx-ch-out{grid-template-columns:1fr}
  .fx-ch-slot + .fx-ch-slot{border-left:0;border-top:1px solid var(--line)}
}

/* ---------- hub: the comparison table ----------------------- */
.fx-cmp-w{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.fx-cmp{width:100%;border-collapse:collapse;min-width:820px;font-size:var(--step--1)}
.fx-cmp th,.fx-cmp td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.fx-cmp thead th{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-faint);font-weight:400;background:var(--paper);white-space:nowrap}
.fx-cmp tbody tr:last-child td,.fx-cmp tbody tr:last-child th{border-bottom:0}
.fx-cmp tbody tr:hover{background:var(--paper)}
.fx-cmp tbody th{font-weight:400;min-width:210px}
.fx-cmp tbody th a{text-decoration:none;color:inherit;display:grid;gap:3px}
.fx-cmp tbody th a:hover b{color:var(--accent)}
.fx-cmp tbody th .no{font-family:var(--f-mono);font-size:10px;color:var(--fg-faint)}
.fx-cmp tbody th b{font-size:var(--step-0);line-height:1.25}
.fx-cmp td.kind{white-space:nowrap;color:var(--fg-dim)}
.fx-cmp td.num,.fx-cmp thead th.num{font-family:var(--f-mono);white-space:nowrap;text-align:right}
.fx-cmp td.num{color:var(--fg-dim)}
.fx-cmp td.who{color:var(--fg-faint);line-height:1.45;min-width:250px}

/* ---------- specimen certificate ----------------------------
   The artefact at the end of an 80-hour program, shown rather
   than described. Watermarked and placeholder-named so a
   screenshot can never pass as a real award.                  */
.fx-certw{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:960px){.fx-certw{grid-template-columns:1fr}}

.fx-doc{position:relative;margin:0;padding:clamp(24px,3.2vw,38px);overflow:hidden;
  border:1px solid var(--line-strong);border-radius:14px;background:var(--bg);
  box-shadow:0 10px 34px rgba(0,0,0,.08);
  background-image:linear-gradient(135deg,var(--accent-wash),transparent 55%)}
.fx-doc::before{content:'';position:absolute;inset:9px;border:1px solid var(--line);
  border-radius:9px;pointer-events:none}
.fx-doc-wm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-24deg);
  /* sized so the whole word fits the card once rotated -- a clipped watermark
     reading "SPEC" undermines the one thing it is there to say */
  font-family:var(--f-display);font-size:clamp(34px,6.4vw,74px);letter-spacing:.06em;
  color:var(--fg);opacity:.05;text-transform:uppercase;pointer-events:none;user-select:none;
  white-space:nowrap;font-weight:700}
/* :not() matters -- this rule and .fx-doc-wm have equal specificity, so without
   the exclusion it wins on source order and drops the watermark back into flow */
.fx-doc > *:not(.fx-doc-wm){position:relative}
.fx-doc-top{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between;
  padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.fx-doc-top .brand{font-family:var(--f-display);font-size:var(--step-0);font-weight:700;letter-spacing:-.01em}
.fx-doc-top .kind{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--fg-faint)}
.fx-doc-awarded{margin:0;font-size:var(--step--1);color:var(--fg-faint)}
.fx-doc-name{margin:6px 0 16px;font-family:var(--f-display);font-size:var(--step-2);line-height:1.1;
  letter-spacing:-.02em;color:var(--fg-faint);border-bottom:1px dashed var(--line-strong);
  padding-bottom:8px;display:inline-block;min-width:min(320px,100%)}
.fx-doc-title{margin:6px 0 2px;font-family:var(--f-display);font-size:var(--step-1);line-height:1.2;
  letter-spacing:-.01em}
.fx-doc-spec{margin:0 0 20px;font-family:var(--f-mono);font-size:var(--step--1);
  color:var(--h,var(--accent))}
.fx-doc-rec{margin:0;display:grid;gap:0;border-top:1px solid var(--line-soft)}
.fx-cert-row{display:grid;grid-template-columns:minmax(0,170px) 1fr;gap:8px 16px;padding:9px 0;
  border-bottom:1px solid var(--line-soft)}
.fx-cert-row dt{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.11em;color:var(--fg-faint)}
.fx-cert-row dd{margin:0;font-size:var(--step--1);line-height:1.45;color:var(--fg-dim)}
@media (max-width:560px){.fx-cert-row{grid-template-columns:1fr;gap:3px}}
.fx-doc-foot{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--line)}
.fx-doc-foot .k{display:block;font-family:var(--f-mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-faint)}
.fx-doc-foot .v{display:block;margin-top:3px;font-size:var(--step--1);color:var(--fg-dim)}
.fx-doc-foot .sig{margin-left:auto;padding-top:14px;border-top:1px solid var(--line-strong);
  min-width:210px;align-self:flex-end}

.fx-cert-side{display:grid;gap:18px;align-content:start}
.fx-cert-read{margin:0;padding:0;list-style:none;display:grid;gap:0}
.fx-cert-read li{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--line-soft)}
.fx-cert-read li:last-child{border-bottom:0}
.fx-cert-read .n{font-family:var(--f-mono);font-size:10px;color:var(--h,var(--accent));padding-top:2px}
.fx-cert-read b{display:block;font-size:var(--step--1);margin-bottom:3px}
.fx-cert-read p{margin:0;font-size:var(--step--1);line-height:1.55;color:var(--fg-dim)}
.fx-cert-share{padding:20px;border-radius:13px;background:var(--paper);
  border:1px solid var(--line);display:grid;gap:10px}
.fx-cert-share b{font-size:var(--step-0)}
.fx-cert-share p{margin:0;font-size:var(--step--1);line-height:1.55;color:var(--fg-dim)}
.fx-cert-share .btn{justify-self:start}
.fx-cert-note{font-size:11px;line-height:1.5;color:var(--fg-faint)}