/* buildcontrol — Page-specific styles. */
/* ---------- features hub ---------- */
/* html/body use overflow-x:hidden site-wide, which silently kills position:sticky
   on the header. overflow-x:clip clips the same way without creating a scroll
   container, so the nav and the jump bar actually stay pinned. */
html,body{overflow-x:clip}
.fx-hero{background:var(--screen-bg-alt);border-bottom:1px solid var(--n-150);padding:60px 0 54px}
.fx-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.fx-hero h1{font-family:var(--f-header);font-weight:700;font-size:40px;line-height:1.12;
  color:var(--navy-900);letter-spacing:-.02em;margin:10px 0 0}
.fx-hero .sub{font-family:var(--f-header);font-weight:600;font-size:20px;line-height:1.25;
  color:var(--n-600);letter-spacing:-.01em;margin:8px 0 0}
.fx-hero .eyebrow{color:var(--brand-600);justify-content:flex-start;margin-bottom:0}
.fx-hero p{font-size:15.5px;line-height:1.7;color:var(--n-500);margin:14px 0 0;max-width:520px}
.fx-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* module map card */
.fx-map{background:#fff;border:1px solid var(--n-150);border-radius:18px;
  box-shadow:var(--shadow-3);overflow:hidden}
.fx-map-top{background:var(--header-grad);padding:15px 18px;display:flex;
  align-items:center;justify-content:space-between}
.fx-map-top b{font-family:var(--f-header);font-weight:700;font-size:14px;color:#fff}
.fx-map-top small{display:block;font-weight:400;font-size:11px;color:#B7C8DE;margin-top:1px}
.fx-map-pill{font-family:var(--f-header);font-weight:700;font-size:11px;color:#fff;
  background:rgba(255,255,255,.16);border-radius:var(--r-full);padding:4px 11px}
.fx-map-body{padding:16px}
.fx-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fx-tile{background:var(--n-50);border:1px solid var(--n-100);border-radius:10px;
  padding:12px 8px 11px;text-align:center;transition:border-color .15s ease,background .15s ease}
.fx-tile:hover{border-color:var(--brand-600);background:#fff}
.fx-tile span{width:30px;height:30px;border-radius:8px;background:var(--info-bg);
  display:grid;place-items:center;margin:0 auto 7px}
.fx-tile span svg{width:16px;height:16px;fill:var(--info)}
.fx-tile.g span{background:var(--success-bg)}.fx-tile.g span svg{fill:var(--success)}
.fx-tile.w span{background:var(--warning-bg)}.fx-tile.w span svg{fill:var(--warning)}
.fx-tile.p span{background:var(--purple-bg)}.fx-tile.p span svg{fill:var(--purple)}
.fx-tile b{display:block;font-family:var(--f-header);font-weight:600;font-size:10.8px;
  color:var(--navy-900);line-height:1.3}
.fx-map-foot{margin-top:13px;padding-top:13px;border-top:1px solid var(--n-100);
  display:flex;align-items:center;justify-content:space-between}
.fx-map-foot .t{font-size:11.8px;color:var(--n-500)}
.fx-map-foot .v{font-family:var(--f-header);font-weight:700;font-size:12.5px;color:var(--success)}

/* jump bar */
.fx-jump{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--n-150);position:sticky;top:78px;z-index:45}
.fx-jump-in{display:flex;gap:8px;flex-wrap:wrap;padding:13px 0;align-items:center}
.fx-jump-in .lb{font-family:var(--f-header);font-weight:600;font-size:12.5px;
  color:var(--n-500);margin-right:4px}
.fx-jump-in a{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--n-150);
  border-radius:var(--r-full);padding:7px 15px;font-family:var(--f-header);font-weight:600;
  font-size:13px;color:var(--navy-900);transition:border-color .15s ease,color .15s ease}
.fx-jump-in a:hover{border-color:var(--brand-600);color:var(--brand-700)}
.fx-jump-in a i{font-style:normal;font-size:11px;color:var(--n-400)}

/* category block */
.fx-cat{padding:58px 0}
.fx-cat.alt{background:var(--screen-bg-alt);border-top:1px solid var(--n-150);
  border-bottom:1px solid var(--n-150)}
.fx-cat-hd{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:28px}
.fx-cat-hd h2{font-family:var(--f-header);font-weight:700;font-size:27px;
  color:var(--navy-900);letter-spacing:-.015em;margin:6px 0 0}
.fx-cat-hd p{font-size:14.8px;color:var(--n-500);margin:7px 0 0;max-width:600px;line-height:1.65}
.fx-cat-hd .cnt{font-family:var(--f-header);font-weight:600;font-size:12.5px;
  color:var(--n-500);white-space:nowrap;background:#fff;border:1px solid var(--n-150);
  border-radius:var(--r-full);padding:6px 14px}
.fx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.fx-grid.one{grid-template-columns:1fr}
.fx-card{display:block;background:#fff;border:1px solid var(--n-150);border-radius:var(--r-xl);
  box-shadow:var(--shadow-2);padding:22px 22px 20px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.fx-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-3);border-color:var(--brand-600)}
.fx-card-t{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.fx-ic{width:42px;height:42px;border-radius:11px;background:var(--info-bg);
  display:grid;place-items:center;flex:none}
.fx-ic svg{width:21px;height:21px;fill:var(--info)}
.fx-ic.g{background:var(--success-bg)}.fx-ic.g svg{fill:var(--success)}
.fx-ic.w{background:var(--warning-bg)}.fx-ic.w svg{fill:var(--warning)}
.fx-ic.p{background:var(--purple-bg)}.fx-ic.p svg{fill:var(--purple)}
.fx-card h3{font-family:var(--f-header);font-weight:600;font-size:17.5px;
  color:var(--navy-900);letter-spacing:-.01em}
.fx-card h3 em{font-style:normal;font-weight:700;font-size:9.5px;color:#fff;
  background:var(--brand-600);border-radius:var(--r-full);padding:2px 7px;
  vertical-align:middle;margin-left:7px;letter-spacing:.03em}
.fx-card > p{font-size:14.5px;line-height:1.68;color:var(--n-500)}
.fx-meta{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 15px}
.fx-meta span{font-size:11.5px;color:var(--n-600);background:var(--n-50);
  border:1px solid var(--n-100);border-radius:var(--r-full);padding:4px 11px}
.fx-meta span b{font-family:var(--f-header);font-weight:600;color:var(--navy-900)}
.fx-go{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-header);
  font-weight:600;font-size:13.5px;color:var(--brand-700)}
.fx-go svg{width:14px;height:14px;fill:var(--brand-700);transition:transform .18s ease}
.fx-card:hover .fx-go svg{transform:translateX(3px)}

/* flow */
.fx-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:32px}
.fx-step{background:#fff;border:1px solid var(--n-150);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);padding:18px 16px;position:relative}
.fx-step .n{font-family:var(--f-header);font-weight:700;font-size:12px;color:var(--brand-700);
  width:26px;height:26px;border-radius:50%;background:var(--info-bg);
  display:grid;place-items:center;margin-bottom:11px}
.fx-step h3{font-family:var(--f-header);font-weight:600;font-size:14.5px;
  color:var(--navy-900);margin-bottom:6px}
.fx-step p{font-size:12.8px;line-height:1.6;color:var(--n-500)}

/* table */
.fx-tbl-wrap{background:#fff;border:1px solid var(--n-150);border-radius:var(--r-xl);
  box-shadow:var(--shadow-2);overflow:hidden;margin-top:30px}
.fx-tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fx-tbl{width:100%;border-collapse:collapse;min-width:660px}
.fx-tbl th{background:var(--n-50);font-family:var(--f-header);font-weight:600;font-size:12.5px;
  color:var(--n-600);text-align:left;padding:14px 18px;border-bottom:1px solid var(--n-150);
  text-transform:uppercase;letter-spacing:.04em}
.fx-tbl td{padding:15px 18px;border-bottom:1px solid var(--n-100);font-size:14px;
  color:var(--n-600);vertical-align:middle}
.fx-tbl tr:last-child td{border-bottom:none}
.fx-tbl tr:hover td{background:var(--n-50)}
.fx-tbl td a{font-family:var(--f-header);font-weight:600;color:var(--navy-900)}
.fx-tbl td a:hover{color:var(--brand-700)}
.fx-tbl .who{font-family:var(--f-header);font-weight:600;font-size:12px;
  color:var(--brand-700);background:var(--info-bg);border-radius:var(--r-full);
  padding:4px 11px;white-space:nowrap}

@media(max-width:980px){
  .fx-hero-in{grid-template-columns:1fr;gap:36px}
  .fx-hero h1{font-size:32px}
  .fx-flow{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .fx-hero{padding:42px 0 38px}
  .fx-hero h1{font-size:28px}
  .fx-hero .sub{font-size:17px}
  .fx-grid{grid-template-columns:1fr}
  .fx-cat{padding:44px 0}
  .fx-cat-hd{flex-direction:column;align-items:flex-start;gap:12px}
  .fx-cat-hd h2{font-size:23px}
  .fx-flow{grid-template-columns:1fr}
  .fx-jump{position:static}
}

/* The jump bar is pinned directly under the sticky header, whose height drops
   to 62px on phones — without this it floated 16px low and content scrolled
   through the gap. */
@media(max-width:640px){.fx-jump{top:62px}}