/* ============================================================
   EnterFirst — site-upgrade.css
   ADDITIVE layer. Load AFTER css/site.css:
     <link rel="stylesheet" href="css/site.css">
     <link rel="stylesheet" href="css/site-upgrade.css">

   Nothing here overrides an existing rule. It adds:
     1. New data-h hover tokens for the upgraded components
     2. Component classes (ef-*) for patterns inline styles can't express
   Existing tokens (i1eg64el, imooy5g, i1v3z6yt, i115ro7r, i1uf7zf,
   i123tk3i, i10981xb, iyxaqrk, iby2f1f, ivn2xlk, i1hxlvhb, i7lpppv,
   ilyk7pr, iheroa, iherob) stay in site.css and are untouched.
   ============================================================ */

:root{
  --ef-signal:#2143FF;  --ef-lift:#5B7BFF;   --ef-ink:#0E1116;
  --ef-canvas:#EDECE8;  --ef-paper:#FBFAF7;  --ef-sand:#F3F1EC;
  --ef-line:#E6E3DB;    --ef-line-2:#DCD9D1; --ef-line-3:#E1DED5;
  --ef-slate:#161A21;   --ef-slate-2:#1B2029;--ef-slate-3:#262A31;
  --ef-mute:#9C9788;    --ef-body:#4A463E;   --ef-body-2:#5A564D;
  --ef-fog:#C4BFB2;
  --ef-ok:#0F6B4F;      --ef-ok-fg:#6FCFA6;
  --ef-warn:#C9852B;    --ef-warn-fg:#E0B573;
  --ef-risk:#C2422F;    --ef-risk-fg:#E88C7A;
  --ef-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. New hover tokens ---------------------------- */

/* eu1 — card lift (light surfaces) */
[data-h="eu1"]{transition:transform .22s var(--ef-ease),box-shadow .22s var(--ef-ease),border-color .22s var(--ef-ease)}
[data-h="eu1"]:hover{transform:translateY(-2px);box-shadow:0 10px 30px -14px rgba(14,17,22,.28)}
/* eu2 — card lift (dark surfaces) */
[data-h="eu2"]{transition:transform .22s var(--ef-ease),background-color .22s var(--ef-ease),border-color .22s var(--ef-ease)}
[data-h="eu2"]:hover{transform:translateY(-2px);background:#1B2029;border-color:#31363F}
/* eu3 — matrix / table row */
[data-h="eu3"]{transition:background-color .16s var(--ef-ease)}
[data-h="eu3"]:hover{background:rgba(33,67,255,.04)}
/* eu4 — quiet inline link, underline on hover */
[data-h="eu4"]{transition:color .16s var(--ef-ease)}
[data-h="eu4"]:hover{color:var(--ef-signal);text-decoration:underline;text-underline-offset:3px}
/* eu5 — pill / chip */
[data-h="eu5"]{transition:background-color .18s var(--ef-ease),border-color .18s var(--ef-ease),color .18s var(--ef-ease)}
[data-h="eu5"]:hover{background:var(--ef-canvas);border-color:var(--ef-line-2)}
/* eu6 — logo wall mark, desaturated until hover */
[data-h="eu6"]{opacity:.5;transition:opacity .22s var(--ef-ease)}
[data-h="eu6"]:hover{opacity:1}

@media (prefers-reduced-motion:reduce){
  [data-h="eu1"],[data-h="eu2"],[data-h="eu3"],[data-h="eu4"],[data-h="eu5"],[data-h="eu6"]{transition:none}
  [data-h="eu1"]:hover,[data-h="eu2"]:hover{transform:none}
}

/* ---------- 2. Product UI mockup chrome -------------------- */

.ef-ui{
  display:flex;flex-direction:column;
  background:var(--ef-slate);border:1px solid var(--ef-slate-3);
  border-radius:10px;overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.65);
}
.ef-ui__bar{
  display:flex;align-items:center;gap:8px;
  padding:11px 14px;background:#12161C;border-bottom:1px solid var(--ef-slate-3);
}
.ef-ui__dot{width:9px;height:9px;border-radius:50%;background:#3A3E46;flex:none}
.ef-ui__path{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:12px;color:var(--ef-mute);margin-left:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ef-ui__live{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;color:var(--ef-ok-fg);white-space:nowrap;
}
.ef-ui__live::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--ef-ok-fg);
  animation:ef-pulse 2.4s var(--ef-ease) infinite;
}
@keyframes ef-pulse{0%,100%{opacity:1}50%{opacity:.28}}
@media (prefers-reduced-motion:reduce){.ef-ui__live::before{animation:none}}
.ef-ui__body{display:flex;flex-direction:column;gap:9px;padding:14px}
.ef-ui__foot{
  display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;
  padding:12px 14px;border-top:1px solid var(--ef-slate-3);
  font-size:12.5px;color:var(--ef-mute);
}

/* a row inside a mockup */
.ef-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;padding:13px 15px;background:var(--ef-ink);
  border-left:3px solid var(--ef-slate-3);border-radius:5px;
}
.ef-row--signal{border-left-color:var(--ef-signal)}
.ef-row--lift{border-left-color:var(--ef-lift)}
.ef-row--risk{border-left-color:var(--ef-risk)}
.ef-row--warn{border-left-color:var(--ef-warn)}
.ef-row--ok{border-left-color:var(--ef-ok)}
.ef-row__main{display:flex;flex-direction:column;gap:4px;min-width:0}
.ef-row__t{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:14.5px;font-weight:600;color:var(--ef-paper);
}
.ef-row__m{font-size:12.5px;color:var(--ef-mute)}

.ef-tag{
  padding:5px 10px;border-radius:3px;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.ef-tag--signal{background:rgba(33,67,255,.18);color:#94A9FF}
.ef-tag--risk{background:rgba(194,66,47,.2);color:var(--ef-risk-fg)}
.ef-tag--warn{background:rgba(201,133,43,.2);color:var(--ef-warn-fg)}
.ef-tag--ok{background:rgba(15,107,79,.24);color:var(--ef-ok-fg)}
.ef-tag--idle{background:var(--ef-slate-2);color:var(--ef-mute)}

/* stepper inside a mockup */
.ef-step{display:flex;align-items:center;gap:11px;font-size:14.5px}
.ef-step__n{
  flex:none;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;
}
.ef-step--done .ef-step__n{background:var(--ef-signal);color:var(--ef-paper)}
.ef-step--done{color:var(--ef-fog)}
.ef-step--now .ef-step__n{background:var(--ef-lift);color:var(--ef-ink)}
.ef-step--now{color:var(--ef-paper)}
.ef-step--todo .ef-step__n{background:var(--ef-slate-3);color:var(--ef-mute)}
.ef-step--todo{color:var(--ef-mute)}

/* ---------- 3. Comparison / feature matrix ----------------- */

.ef-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ef-matrix{width:100%;border-collapse:collapse;min-width:640px;text-align:left}
.ef-matrix caption{
  text-align:left;padding-bottom:14px;font-size:15.5px;color:var(--ef-body-2);
}
.ef-matrix th,.ef-matrix td{
  padding:16px 18px;border-bottom:1px solid var(--ef-line-2);
  font-size:15.5px;line-height:1.5;vertical-align:top;
}
.ef-matrix thead th{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ef-body-2);border-bottom:1px solid var(--ef-line-2);
  padding-top:0;white-space:nowrap;
}
.ef-matrix thead th[data-own]{color:var(--ef-signal)}
.ef-matrix tbody th{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-weight:600;letter-spacing:-.015em;color:var(--ef-ink);
}
.ef-matrix td{color:var(--ef-body)}
.ef-matrix td[data-own]{color:var(--ef-ink);font-weight:500}
.ef-matrix col[data-own]{background:rgba(33,67,255,.045)}
.ef-matrix tr:last-child th,.ef-matrix tr:last-child td{border-bottom:0}

.ef-yes,.ef-no,.ef-part{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ef-yes::before{content:"";width:15px;height:15px;flex:none;
  background:var(--ef-signal);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5L20 7' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/11px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5L20 7' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/11px no-repeat;
  border-radius:0;}
.ef-no::before{content:"";width:15px;height:2px;flex:none;background:#B9B3A5;border-radius:2px}
.ef-part::before{content:"";width:13px;height:13px;flex:none;border:2px solid #B9B3A5;border-radius:50%;
  background:linear-gradient(90deg,#B9B3A5 50%,transparent 50%)}

/* ---------- 4. Social proof -------------------------------- */

.ef-logos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px clamp(24px,4vw,56px);
}
.ef-logo{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:clamp(15px,2vw,18px);font-weight:600;letter-spacing:-.02em;
  color:var(--ef-body-2);white-space:nowrap;
}
.ef-logo--dk{color:var(--ef-fog)}

.ef-metric{display:flex;flex-direction:column;gap:5px}
.ef-metric__n{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:clamp(26px,3.6vw,36px);font-weight:600;letter-spacing:-.035em;
  line-height:1;color:var(--ef-ink);
}
.ef-metric__n--dk{color:var(--ef-paper)}
.ef-metric__l{font-size:14px;line-height:1.45;color:var(--ef-body-2)}
.ef-metric__l--dk{color:var(--ef-mute)}

.ef-quote{display:flex;flex-direction:column;gap:18px;height:100%}
.ef-quote__t{font-size:16.5px;line-height:1.65}
.ef-quote__t::before{content:"\201C"}
.ef-quote__t::after{content:"\201D"}
.ef-quote__by{
  display:flex;flex-direction:column;gap:3px;margin-top:auto;
  padding-top:16px;border-top:1px solid var(--ef-line-3);
}
.ef-quote__by--dk{border-top-color:var(--ef-slate-3)}

/* ---------- 5. Small utilities ----------------------------- */

.ef-eyebrow{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:12.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ef-signal);
}
.ef-eyebrow--dk{color:var(--ef-lift)}
.ef-rule{height:1px;background:var(--ef-line-2);border:0;margin:0}

/* keeps wide mockups and tables from pushing the page sideways */
.ef-scroll,.ef-ui{max-width:100%}
img,svg{max-width:100%}

/* ============================================================
   6. Site navigation — mega-menu + mobile drawer
   Requires js/nav.js. Degrades to plain links with JS off:
   every panel link is present in the DOM and reachable.
   ============================================================ */

.ef-hdr{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:10px 20px;
  padding:12px clamp(16px,4vw,56px);
  background:rgba(251,250,247,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ef-line);
}
.ef-hdr__brand{display:flex; align-items:center; gap:11px; color:var(--ef-ink); flex:none}
.ef-hdr__bars{display:flex; flex-direction:column; gap:3.5px}
.ef-hdr__bars i{display:block; height:5px; border-radius:3px}
.ef-hdr__bars i:nth-child(1){width:26px; background:var(--ef-signal)}
.ef-hdr__bars i:nth-child(2){width:18px; background:var(--ef-ink)}
.ef-hdr__bars i:nth-child(3){width:10px; background:var(--ef-ink)}
.ef-hdr__name{font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:19px; font-weight:600; letter-spacing:-.03em}
.ef-hdr__name span{color:var(--ef-signal)}

.ef-nav{flex:1 1 auto; display:flex; align-items:center; gap:2px; min-width:0}
.ef-nav__item{position:relative}
.ef-nav__link{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 15px; border:0; background:none; border-radius:100px;
  font:inherit; font-size:14.5px; font-weight:500; color:var(--ef-body);
  white-space:nowrap; cursor:pointer;
  transition:background-color .16s var(--ef-ease), color .16s var(--ef-ease);
}
.ef-nav__link:hover{background:var(--ef-canvas); color:var(--ef-ink)}
.ef-nav__link[aria-current="page"]{background:var(--ef-ink); color:var(--ef-paper); font-weight:600}
.ef-nav__link[aria-current="page"]:hover{background:var(--ef-ink); color:var(--ef-paper)}
.ef-nav__chev{width:11px; height:11px; flex:none; transition:transform .18s var(--ef-ease)}
.ef-nav__link[aria-expanded="true"] .ef-nav__chev{transform:rotate(180deg)}
.ef-nav__link[aria-expanded="true"]{background:var(--ef-canvas); color:var(--ef-ink)}

.ef-panel{
  position:absolute; top:calc(100% + 10px); left:0;
  display:grid; gap:6px; padding:10px;
  background:var(--ef-paper); border:1px solid var(--ef-line);
  border-radius:12px; box-shadow:0 22px 60px -26px rgba(14,17,22,.42);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s var(--ef-ease), transform .18s var(--ef-ease), visibility .18s;
}
.ef-panel[data-open]{opacity:1; visibility:visible; transform:none}
.ef-panel--wide{grid-template-columns:repeat(2,minmax(min(240px,100%),1fr)); width:min(560px,84vw)}
.ef-panel--tall{width:min(300px,84vw)}

.ef-panel__a{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 13px; border-radius:8px;
  transition:background-color .14s var(--ef-ease);
}
.ef-panel__a:hover{background:var(--ef-sand)}
.ef-panel__ic{flex:none; color:var(--ef-signal); display:inline-flex; padding-top:1px}
.ef-panel__t{font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:15px; font-weight:600; letter-spacing:-.015em; color:var(--ef-ink); display:block}
.ef-panel__d{font-size:13.5px; line-height:1.45; color:var(--ef-body-2); display:block; margin-top:2px}
.ef-panel__foot{
  grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  margin-top:4px; padding:12px 13px 4px; border-top:1px solid var(--ef-line);
  font-size:13.5px; color:var(--ef-body-2);
}
.ef-panel__foot a{font-weight:600; color:var(--ef-signal)}
.ef-panel__foot a:hover{text-decoration:underline; text-underline-offset:3px}

.ef-hdr__cta{
  flex:none; display:inline-flex; align-items:center;
  padding:10px 20px; background:var(--ef-signal); border-radius:100px;
  font-size:14px; font-weight:600; color:var(--ef-paper); white-space:nowrap;
  transition:background-color .16s var(--ef-ease);
}
.ef-hdr__cta:hover{background:#1A37D8}

.ef-burger{
  display:none; flex:none; width:42px; height:42px; padding:0;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--ef-line); border-radius:10px;
  color:var(--ef-ink); cursor:pointer;
}
.ef-burger:hover{background:var(--ef-canvas)}

/* ---- drawer ---- */
.ef-scrim{
  position:fixed; inset:0; z-index:70; background:rgba(14,17,22,.45);
  opacity:0; visibility:hidden; transition:opacity .22s var(--ef-ease), visibility .22s;
}
.ef-scrim[data-open]{opacity:1; visibility:visible}
.ef-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:80;
  width:min(400px,88vw); display:flex; flex-direction:column;
  background:var(--ef-paper); border-left:1px solid var(--ef-line);
  transform:translateX(100%); transition:transform .26s var(--ef-ease);
  overflow-y:auto; overscroll-behavior:contain;
}
.ef-drawer[data-open]{transform:none}
.ef-drawer__top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px; border-bottom:1px solid var(--ef-line); position:sticky; top:0;
  background:var(--ef-paper);
}
.ef-drawer__x{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--ef-line); border-radius:10px;
  color:var(--ef-ink); cursor:pointer;
}
.ef-drawer__x:hover{background:var(--ef-canvas)}
.ef-drawer__body{display:flex; flex-direction:column; padding:8px 12px 20px}
.ef-acc summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 8px; list-style:none; cursor:pointer;
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--ef-ink);
  border-bottom:1px solid var(--ef-line);
}
.ef-acc summary::-webkit-details-marker{display:none}
.ef-acc[open] summary .ef-nav__chev{transform:rotate(180deg)}
.ef-acc__list{display:flex; flex-direction:column; padding:6px 0 14px}
.ef-acc__list a{
  display:flex; gap:11px; align-items:center;
  padding:11px 8px; font-size:15.5px; color:var(--ef-body); border-radius:8px;
}
.ef-acc__list a:hover{background:var(--ef-sand); color:var(--ef-ink)}
.ef-drawer__flat{
  display:block; padding:15px 8px; border-bottom:1px solid var(--ef-line);
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--ef-ink);
}
.ef-drawer__cta{
  display:inline-flex; align-items:center; justify-content:center; margin:18px 8px 0;
  padding:15px 24px; background:var(--ef-signal); border-radius:100px;
  font-size:16px; font-weight:600; color:var(--ef-paper);
}
.ef-drawer__meta{padding:18px 8px 0; font-size:14px; line-height:1.6; color:var(--ef-body-2)}
.ef-drawer__meta a{color:var(--ef-signal); font-weight:600}

@media (max-width:900px){
  .ef-nav, .ef-hdr__cta{display:none}
  .ef-burger{display:inline-flex}
  .ef-hdr{justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  .ef-panel,.ef-scrim,.ef-drawer,.ef-nav__chev,.ef-nav__link{transition:none}
}

/* ══ 7. company profile ══════════════════════════════════════════════════
   Timeline, office grid and the entity block used by about.html.        */
.ef-tl{display:flex; flex-direction:column; border-left:1px solid var(--ef-line); padding-left:0}
.ef-tl__i{
  position:relative; display:grid;
  grid-template-columns:minmax(120px,150px) minmax(0,1fr);
  gap:6px 28px; padding:26px 0 26px 28px;
}
.ef-tl__i + .ef-tl__i{border-top:1px solid var(--ef-line)}
.ef-tl__i::before{
  content:""; position:absolute; left:-4.5px; top:34px;
  width:8px; height:8px; border-radius:100px; background:var(--ef-signal);
}
.ef-tl__i[data-quiet]::before{background:var(--ef-line-2)}
.ef-tl__meta{display:flex; flex-direction:column; gap:7px}
.ef-tl__date{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:14.5px; font-weight:600; letter-spacing:-.015em; color:var(--ef-ink);
}
.ef-tl__t{
  margin:0 0 8px; font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:clamp(18px,2.4vw,22px); font-weight:600; letter-spacing:-.03em;
  line-height:1.2; color:var(--ef-ink); text-wrap:balance;
}
.ef-tl__b{margin:0; font-size:16.5px; line-height:1.65; color:var(--ef-body); max-width:620px}
@media (max-width:640px){
  .ef-tl__i{grid-template-columns:1fr; gap:12px; padding-left:24px}
}

.ef-office{
  display:flex; flex-direction:column; gap:10px;
  padding:26px 24px; background:var(--ef-sand);
  border:1px solid transparent; border-radius:8px;
}
.ef-office__k{
  font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ef-signal);
}
.ef-office__n{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:20px; font-weight:600; letter-spacing:-.03em; color:var(--ef-ink);
}
.ef-office__d{font-size:15.5px; line-height:1.6; color:var(--ef-body-2)}

.ef-entity{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:2px; background:var(--ef-line); border-radius:8px; overflow:hidden;
}
.ef-entity > div{display:flex; flex-direction:column; gap:9px; padding:28px 26px; background:var(--ef-paper)}
.ef-entity dt{
  font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ef-body-2); margin:0;
}
.ef-entity dd{margin:0; font-size:16px; line-height:1.65; color:var(--ef-ink)}
.ef-entity dd small{display:block; font-size:14.5px; color:var(--ef-body-2); margin-top:4px}

/* ══ 8. home page — world-class RegTech furniture ═════════════════════════
   Trust chips, the before/after band, the regulator coverage grid and the
   product switcher. Used by index.html; available to any page.          */

/* trust chips ---------------------------------------------------------- */
.ef-chips{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px}
.ef-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px 9px 12px; background:var(--ef-paper);
  border:1px solid var(--ef-line); border-radius:100px;
  font-size:13.5px; font-weight:600; color:var(--ef-ink); white-space:nowrap;
  transition:border-color .18s var(--ef-ease), transform .18s var(--ef-ease);
}
.ef-chip:hover{border-color:#C9C4B7; transform:translateY(-1px)}
.ef-chip svg{width:15px; height:15px; flex:none; color:var(--ef-signal)}
.ef-chip--dk{background:transparent; border-color:#31363F; color:var(--ef-paper)}
.ef-chip--dk svg{color:var(--ef-lift)}

/* before / after ------------------------------------------------------- */
.ef-ba{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  grid-template-rows:auto auto auto; gap:2px;
  background:var(--ef-line); border-radius:10px; overflow:hidden}
/* subgrid keeps the job / today / EnterFirst rows aligned across all three
   cards no matter how many lines each headline takes. Browsers without it
   fall back to three independently-sized cards, which still reads fine. */
.ef-ba__c{grid-row:span 3; display:grid; grid-template-rows:subgrid; background:var(--ef-paper)}
@supports not (grid-template-rows:subgrid){
  .ef-ba{grid-template-rows:none}
  .ef-ba__c{grid-row:auto; display:flex; flex-direction:column}
}
.ef-ba__job{
  padding:24px 26px 18px; font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:17px; font-weight:600; letter-spacing:-.025em; line-height:1.3;
  color:var(--ef-ink); border-bottom:1px solid var(--ef-line);
}
.ef-ba__side{display:flex; flex-direction:column; gap:6px; padding:20px 26px 24px}
.ef-ba__side + .ef-ba__side{border-top:1px solid var(--ef-line)}
.ef-ba__side--now{background:var(--ef-sand)}
.ef-ba__k{font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase}
.ef-ba__side--old .ef-ba__k{color:var(--ef-body-2)}
.ef-ba__side--now .ef-ba__k{color:var(--ef-signal)}
.ef-ba__v{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:clamp(22px,3vw,29px); font-weight:600; letter-spacing:-.04em;
  line-height:1.05; color:var(--ef-ink);
}
.ef-ba__side--old .ef-ba__v{color:var(--ef-body-2)}
.ef-ba__d{font-size:14.5px; line-height:1.55; color:var(--ef-body-2)}

/* regulator coverage --------------------------------------------------- */
.ef-cov{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:16px}
.ef-cov__g{
  display:flex; flex-direction:column; gap:14px;
  padding:26px 24px; background:rgba(33,67,255,.05); border:1px solid rgba(91,123,255,.18); border-radius:8px;
}
.ef-cov__h{display:flex; align-items:center; gap:10px}
.ef-cov__h svg{width:19px; height:19px; flex:none; color:var(--ef-lift)}
.ef-cov__t{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:16.5px; font-weight:600; letter-spacing:-.025em; color:var(--ef-paper);
}
.ef-cov__list{display:flex; flex-wrap:wrap; gap:7px}
.ef-cov__b{
  padding:6px 11px; background:#0E1116; border:1px solid #2E333B; border-radius:5px;
  font-size:13px; font-weight:600; letter-spacing:.01em; color:#C4BFB2;
  transition:border-color .16s var(--ef-ease), color .16s var(--ef-ease);
}
.ef-cov__g:hover .ef-cov__b{border-color:#3A4049; color:#DAD5C8}
.ef-cov__m{font-size:14px; line-height:1.55; color:var(--ef-mute); margin-top:auto; padding-top:4px}

/* product switcher ----------------------------------------------------- */
.ef-tabs{display:flex; flex-wrap:wrap; gap:6px; padding:5px; background:var(--ef-sand);
  border-radius:100px; width:fit-content; max-width:100%}
.ef-tab{
  display:inline-flex; align-items:center; gap:9px; padding:10px 20px;
  border:0; border-radius:100px; background:transparent; cursor:pointer;
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--ef-body);
  transition:background-color .2s var(--ef-ease), color .2s var(--ef-ease);
}
.ef-tab:hover{color:var(--ef-ink)}
.ef-tab svg{width:16px; height:16px; flex:none}
.ef-tab[aria-selected="true"]{background:var(--ef-ink); color:var(--ef-paper)}
.ef-tab[aria-selected="true"] svg{color:var(--ef-lift)}
.ef-tab:focus-visible{outline:2px solid var(--ef-signal); outline-offset:2px}
.ef-pane[hidden]{display:none !important}
.ef-pane{animation:ef-fade .28s var(--ef-ease)}
@keyframes ef-fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* insights ------------------------------------------------------------- */
.ef-post{
  display:flex; flex-direction:column; gap:11px;
  padding:26px 24px; background:var(--ef-paper);
  border:1px solid var(--ef-line); border-radius:8px;
}
.ef-post__k{font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ef-signal)}
.ef-post__t{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:18px; font-weight:600; letter-spacing:-.028em; line-height:1.25;
  color:var(--ef-ink); text-wrap:balance;
}
.ef-post__d{font-size:15.5px; line-height:1.6; color:var(--ef-body-2)}
.ef-post__m{margin-top:auto; padding-top:10px; font-size:13.5px; color:var(--ef-body-2)}

@media (prefers-reduced-motion:reduce){
  .ef-pane{animation:none}
  .ef-chip,.ef-cov__b,.ef-tab{transition:none}
}

/* ══ 9. no underlines ═════════════════════════════════════════════════════
   Links carry weight, colour and motion instead of a rule under the text.
   These selectors are deliberately specific enough to beat the [data-h]
   hover tokens in site.css without needing !important.                   */
a{text-decoration:none}
a:hover, a:focus,
a[data-h]:hover, a[data-h]:focus,
[data-h]:hover, [data-h]:focus{text-decoration:none}

/* .ef-link — the arrow link. Replaces every "Something →" that used to sit
   on a 1px border-bottom. The arrow moves; nothing is underlined.        */
.ef-link{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:15.5px; font-weight:600; letter-spacing:-.015em;
  color:var(--ef-signal); transition:color .18s var(--ef-ease);
}
.ef-link__x{
  display:inline-flex; align-items:center; justify-content:center;
  width:23px; height:23px; flex:none; border-radius:100px;
  background:rgba(33,67,255,.10);
  transition:background-color .22s var(--ef-ease), transform .22s var(--ef-ease);
}
.ef-link__x svg{width:13px; height:13px}
.ef-link:hover{color:#1A37D8}
.ef-link:hover .ef-link__x{background:rgba(33,67,255,.19); transform:translateX(3px)}
.ef-link:focus-visible{outline:2px solid var(--ef-signal); outline-offset:4px; border-radius:4px}
.ef-link--dk{color:var(--ef-lift)}
.ef-link--dk .ef-link__x{background:rgba(91,123,255,.16)}
.ef-link--dk:hover{color:#93A9FF}
.ef-link--dk:hover .ef-link__x{background:rgba(91,123,255,.30)}
.ef-link--dk:focus-visible{outline-color:var(--ef-lift)}

/* eu4 — inline link inside body copy. Weight and colour distinguish it from
   the surrounding text (a non-colour cue, so this is not colour alone), and
   hover raises a soft highlight rather than a rule.                       */
[data-h="eu4"]{
  color:var(--ef-signal); font-weight:600;
  border-radius:3px; padding:0 1px; margin:0 -1px;
  transition:color .16s var(--ef-ease), background-color .16s var(--ef-ease),
             box-shadow .16s var(--ef-ease);
}
[data-h="eu4"]:hover{
  color:#1A37D8; background:rgba(33,67,255,.09);
  box-shadow:0 0 0 3px rgba(33,67,255,.09);
}
[data-h="eu4"]:focus-visible{outline:2px solid var(--ef-signal); outline-offset:2px}

/* mega-menu footer link — arrow slide, no rule */
.ef-panel__foot a{
  display:inline-flex; align-items:center; gap:6px;
  transition:color .18s var(--ef-ease), gap .18s var(--ef-ease);
}
.ef-panel__foot a:hover{color:#1A37D8; gap:10px}

/* the one remaining underline in the codebase was an inline style on the
   closing-CTA mail link; it is now a soft chip instead */
.ef-mail{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:5px;
  background:rgba(251,250,247,.14); font-weight:600; color:#FBFAF7;
  transition:background-color .18s var(--ef-ease);
}
.ef-mail:hover{background:rgba(251,250,247,.24)}

/* ══ 10. surface system ═══════════════════════════════════════════════════
   The audit found 36 distinct font sizes, 7 border radii, 5 near-identical
   section paddings and 14 different section-heading sizes. This section
   defines the scale; _build/polish_index.py normalises the markup onto it.

   It also adds what the page was missing to read as current work: glass,
   depth, icon tiles and gradient numerals.                                */
:root{
  /* radius scale — was 3/4/5/6/8/10/100, now four steps */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:100px;

  /* elevation */
  --sh-1:0 1px 2px rgba(14,17,22,.04), 0 10px 26px -14px rgba(14,17,22,.16);
  --sh-2:0 2px 4px rgba(14,17,22,.05), 0 26px 54px -22px rgba(14,17,22,.28);
  --sh-dk:0 2px 6px rgba(0,0,0,.32), 0 30px 68px -30px rgba(0,0,0,.72);

  /* glass */
  --glass-lt:rgba(251,250,247,.74);
  --glass-dk:rgba(22,26,33,.60);
  --hair-lt:rgba(14,17,22,.09);
  --hair-dk:rgba(251,250,247,.11);
}

/* ---- glass -------------------------------------------------------- */
.ef-glass{
  background:var(--glass-lt);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid var(--hair-lt);
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.7);
}
.ef-glass--dk{
  background:var(--glass-dk);
  border-color:var(--hair-dk);
  box-shadow:var(--sh-dk), inset 0 1px 0 rgba(251,250,247,.07);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ef-glass{background:var(--ef-paper)}
  .ef-glass--dk{background:var(--ef-slate)}
}

/* ---- cards -------------------------------------------------------- */
.ef-card{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(176deg,#FDFCFA 0%,#F5F3EE 100%);
  border:1px solid var(--ef-line); border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  transition:transform .26s var(--ef-ease), box-shadow .26s var(--ef-ease),
             border-color .26s var(--ef-ease);
}
.ef-card:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:#D9D4C8}
.ef-card--dk{
  background:linear-gradient(176deg,#1A1F27 0%,#12161C 100%);
  border-color:#272C34; box-shadow:var(--sh-dk);
}
.ef-card--dk:hover{border-color:#3A414C}
.ef-card--flat{box-shadow:none}
.ef-card--flat:hover{box-shadow:var(--sh-1)}

/* ---- icon tiles --------------------------------------------------- */
.ef-ico{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; border-radius:var(--r-xs);
  background:linear-gradient(148deg,rgba(33,67,255,.15) 0%,rgba(33,67,255,.04) 100%);
  border:1px solid rgba(33,67,255,.17); color:var(--ef-signal);
  transition:transform .26s var(--ef-ease), border-color .26s var(--ef-ease),
             background .26s var(--ef-ease);
}
.ef-ico--dk{
  background:linear-gradient(148deg,rgba(91,123,255,.24) 0%,rgba(91,123,255,.05) 100%);
  border-color:rgba(91,123,255,.26); color:var(--ef-lift);
}
.ef-ico--sm{width:36px; height:36px}
.ef-card:hover .ef-ico{transform:translateY(-2px) rotate(-3deg); border-color:rgba(33,67,255,.34)}
.ef-card--dk:hover .ef-ico{border-color:rgba(91,123,255,.46)}

/* ---- gradient numerals -------------------------------------------- */
.ef-num{
  font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:600;
  letter-spacing:-.045em; line-height:1;
  background:linear-gradient(150deg,var(--ef-ink) 12%,#3B4250 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ef-num--signal{background:linear-gradient(150deg,var(--ef-signal) 0%,#6E8BFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.ef-num--dk{background:linear-gradient(150deg,#FBFAF7 10%,#9FA9BC 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---- the workspace mock, now glass -------------------------------- */
.ef-ui{
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:var(--sh-dk), inset 0 1px 0 rgba(251,250,247,.07);
}
.ef-cov__g{
  background:rgba(33,67,255,.05); border-radius:var(--r-md);
  transition:background .24s var(--ef-ease), border-color .24s var(--ef-ease), transform .24s var(--ef-ease);
}
.ef-cov__g:hover{transform:translateY(-3px); background:rgba(33,67,255,.09); border-color:rgba(91,123,255,.32)}

/* ---- trust score --------------------------------------------------- */
.ef-trust{
  display:grid; grid-template-columns:minmax(240px,300px) minmax(min(280px,100%),1fr);
  gap:clamp(28px,4vw,52px); align-items:center;
  padding:clamp(30px,4vw,44px); border-radius:var(--r-lg);
}
.ef-trust__score{display:flex; flex-direction:column; gap:14px}
.ef-trust__n{display:flex; align-items:baseline; gap:10px}
.ef-trust__big{font-size:clamp(56px,8vw,84px)}
.ef-trust__of{font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:22px; font-weight:500; color:var(--ef-mute)}
.ef-trust__stars{display:flex; gap:5px}
.ef-trust__stars svg{width:19px; height:19px; color:var(--ef-lift)}
.ef-trust__src{font-size:14.5px; line-height:1.55; color:var(--ef-mute); max-width:280px}
.ef-trust__bars{display:flex; flex-direction:column; gap:21px}
.ef-trust__row{display:flex; flex-direction:column; gap:8px}
.ef-trust__lab{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.ef-trust__lab span:first-child{font-size:15.5px; color:#DAD5C8}
.ef-trust__lab span:last-child{font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:16px; font-weight:600; color:var(--ef-paper)}
.ef-trust__track{height:6px; border-radius:100px; background:rgba(251,250,247,.11); overflow:hidden}
.ef-trust__fill{height:100%; border-radius:100px;
  background:linear-gradient(90deg,var(--ef-signal),var(--ef-lift))}
.ef-trust__note{font-size:13px; line-height:1.55; color:var(--ef-mute)}
.ef-trust__note a{color:#B9B3A4; font-weight:600}
@media (max-width:760px){.ef-trust{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .ef-card,.ef-ico,.ef-cov__g{transition:none}
  .ef-card:hover,.ef-cov__g:hover{transform:none}
  .ef-card:hover .ef-ico{transform:none}
}

/* a card's trailing arrow link sits on the floor, so three cards of unequal
   copy length still line their calls-to-action up */
.ef-card > .ef-link:last-child{margin-top:auto; padding-top:16px}

/* ══ 11. footer ═══════════════════════════════════════════════════════════
   Four layers: status rail, pitch, link matrix, baseline — with the wordmark
   set oversized and clipped at the floor as the graphic anchor.          */
.ef-foot{
  position:relative; display:flex; flex-direction:column;
  background:#0B0E13; color:var(--ef-paper); overflow:hidden; isolation:isolate;
}
.ef-foot__mesh{
  position:absolute; inset:-40% -10% auto -10%; height:150%; pointer-events:none;
  background:
    radial-gradient(46% 38% at 12% 8%, rgba(33,67,255,.30), transparent 70%),
    radial-gradient(38% 34% at 88% 22%, rgba(91,123,255,.18), transparent 72%),
    radial-gradient(44% 40% at 62% 92%, rgba(33,67,255,.14), transparent 74%);
}
.ef-foot__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(251,250,247,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(251,250,247,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 78%);
  mask-image:linear-gradient(180deg, #000 0%, transparent 78%);
}
.ef-foot > *:not(.ef-foot__mesh):not(.ef-foot__grid){position:relative; z-index:1}

/* 1 — status rail */
.ef-foot__status{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px clamp(18px,3vw,40px);
  padding:20px clamp(16px,4vw,56px);
  border-bottom:1px solid rgba(251,250,247,.09);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  background:rgba(11,14,19,.4);
}
.ef-fstat{display:flex; align-items:baseline; gap:8px}
.ef-fstat__dot{width:7px; height:7px; border-radius:100px; flex:none; transform:translateY(-2px)}
.ef-fstat__dot--ok{background:#4ED39B; box-shadow:0 0 0 4px rgba(78,211,155,.16)}
.ef-fstat__dot--signal{background:var(--ef-lift); box-shadow:0 0 0 4px rgba(91,123,255,.16)}
.ef-fstat__v{font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--ef-paper)}
.ef-fstat__l{font-size:13.5px; color:var(--ef-mute)}
.ef-foot__kbd{
  display:inline-flex; align-items:center; gap:7px; margin-left:auto;
  padding:7px 10px 7px 14px; border:1px solid rgba(251,250,247,.14); border-radius:100px;
  font-size:13.5px; color:#C4BFB2;
  transition:border-color .2s var(--ef-ease), color .2s var(--ef-ease);
}
.ef-foot__kbd:hover{border-color:rgba(251,250,247,.3); color:var(--ef-paper)}
.ef-foot__kbd kbd{
  font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:4px 6px; border-radius:5px; background:rgba(251,250,247,.10); color:var(--ef-paper);
}

/* 2 — pitch */
.ef-foot__lead{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(28px,4vw,64px); align-items:end;
  padding:clamp(48px,7vw,84px) clamp(16px,4vw,56px) clamp(36px,4.5vw,52px);
}
.ef-foot__pitch{display:flex; flex-direction:column; gap:18px}
.ef-foot__brand .ef-hdr__name{color:var(--ef-paper); font-size:21px}
.ef-foot__brand .ef-hdr__name span{color:var(--ef-lift)}
.ef-foot__brand .ef-hdr__bars i:nth-child(1){background:var(--ef-lift)}
.ef-foot__brand .ef-hdr__bars i:nth-child(2),
.ef-foot__brand .ef-hdr__bars i:nth-child(3){background:var(--ef-paper)}
.ef-foot__line{
  margin:0; font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:clamp(26px,3.6vw,40px); font-weight:500; letter-spacing:-.042em;
  line-height:1.1; color:var(--ef-paper); max-width:540px; text-wrap:balance;
}
.ef-foot__sub{margin:0; font-size:16.5px; line-height:1.62; color:var(--ef-mute); max-width:470px}
.ef-foot__act{display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.ef-foot__cta{
  display:inline-flex; align-items:center; gap:10px; padding:16px 20px 16px 28px;
  background:var(--ef-signal); border-radius:var(--r-pill);
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:16.5px; font-weight:600; letter-spacing:-.01em; color:var(--ef-paper);
  box-shadow:0 12px 34px -14px rgba(33,67,255,.9);
  transition:background-color .2s var(--ef-ease), box-shadow .2s var(--ef-ease),
             transform .2s var(--ef-ease);
}
.ef-foot__cta .ef-link__x{background:rgba(251,250,247,.20)}
.ef-foot__cta:hover{background:#1A37D8; transform:translateY(-2px);
  box-shadow:0 18px 44px -16px rgba(33,67,255,1)}
.ef-foot__cta:hover .ef-link__x{transform:translateX(3px); background:rgba(251,250,247,.3)}
.ef-foot__pills{display:flex; flex-wrap:wrap; gap:10px}
.ef-foot__pill{
  display:inline-flex; align-items:center; gap:9px; padding:10px 16px;
  border:1px solid rgba(251,250,247,.13); border-radius:var(--r-pill);
  font-size:14px; font-weight:600; color:#C4BFB2;
  transition:border-color .2s var(--ef-ease), color .2s var(--ef-ease),
             background-color .2s var(--ef-ease);
}
.ef-foot__pill:hover{border-color:rgba(251,250,247,.28); color:var(--ef-paper);
  background:rgba(251,250,247,.05)}

/* 3 — link matrix */
.ef-foot__matrix{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:clamp(26px,3.4vw,44px);
  padding:clamp(32px,4vw,48px) clamp(16px,4vw,56px);
  border-top:1px solid rgba(251,250,247,.09);
}
.ef-fcol{display:flex; flex-direction:column; gap:3px}
.ef-fcol__h{
  margin:0 0 11px; font-size:11.5px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:#6F6A5D;
}
.ef-fcol a{
  position:relative; padding:6px 0 6px 0; font-size:15px; color:#C4BFB2;
  transition:color .18s var(--ef-ease), padding-left .18s var(--ef-ease);
}
.ef-fcol a::before{
  content:""; position:absolute; left:0; top:50%; width:0; height:1.5px;
  background:var(--ef-lift); border-radius:2px; transform:translateY(-50%);
  transition:width .22s var(--ef-ease); opacity:.9;
}
.ef-fcol a:hover{color:var(--ef-paper); padding-left:16px}
.ef-fcol a:hover::before{width:10px}

/* entities */
.ef-foot__ents{
  display:flex; flex-direction:column; gap:16px;
  padding:clamp(26px,3.4vw,40px) clamp(16px,4vw,56px);
  border-top:1px solid rgba(251,250,247,.09);
}
.ef-foot__entsk{font-size:11.5px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:#6F6A5D}
.ef-foot__entrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:16px}
.ef-fent{
  display:flex; flex-direction:column; gap:6px; padding:20px 22px;
  border:1px solid rgba(251,250,247,.09); border-radius:var(--r-md);
  background:rgba(251,250,247,.03);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:border-color .22s var(--ef-ease), background-color .22s var(--ef-ease);
}
.ef-fent:hover{border-color:rgba(251,250,247,.2); background:rgba(251,250,247,.055)}
.ef-fent__k{font-size:11px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ef-lift)}
.ef-fent__n{font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:16.5px; font-weight:600; letter-spacing:-.025em; color:var(--ef-paper)}
.ef-fent__a{font-size:14.5px; line-height:1.6; color:var(--ef-mute)}

@media (prefers-reduced-motion:reduce){
  .ef-foot__cta,.ef-fcol a,.ef-fcol a::before,.ef-fent,.ef-foot__pill{transition:none}
  .ef-foot__cta:hover{transform:none}
}

/* ══ 12. command palette ══════════════════════════════════════════════════
   ⌘K from anywhere. Built by js/palette.js; nothing here renders without it. */
.ef-pal{position:fixed; inset:0; z-index:200; display:none}
.ef-pal[data-open]{display:block}
.ef-pal__scrim{
  position:absolute; inset:0; background:rgba(8,10,14,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:ef-fade .2s var(--ef-ease);
}
.ef-pal__box{
  position:relative; margin:min(14vh,120px) auto 0; width:min(620px,92vw);
  border-radius:var(--r-lg); overflow:hidden;
  /* a modal has to stay legible over a near-black footer as well as over
     paper, so it is far more opaque than the ambient glass token */
  background:rgba(253,252,250,.94);
  -webkit-backdrop-filter:blur(26px) saturate(1.6); backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid rgba(14,17,22,.12);
  box-shadow:0 40px 90px -30px rgba(8,10,14,.6), inset 0 1px 0 rgba(255,255,255,.7);
  animation:ef-pal-in .24s var(--ef-ease);
}
@keyframes ef-pal-in{from{opacity:0; transform:translateY(-10px) scale(.985)}to{opacity:1; transform:none}}
.ef-pal__top{display:flex; align-items:center; gap:12px; padding:15px 16px;
  border-bottom:1px solid var(--ef-line)}
.ef-pal__mag{width:19px; height:19px; flex:none; color:var(--ef-body-2)}
.ef-pal__in{
  flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none;
  font-family:inherit; font-size:16.5px; color:var(--ef-ink);
}
.ef-pal__in::placeholder{color:#9C9788}
.ef-pal__esc, .ef-pal__foot kbd{
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:5px 7px; border-radius:5px; background:var(--ef-sand);
  border:1px solid var(--ef-line); color:var(--ef-body-2);
}
.ef-pal__list{max-height:min(52vh,420px); overflow-y:auto; padding:8px}
.ef-pal__row{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;
  align-items:baseline; gap:12px; padding:11px 12px; border-radius:var(--r-xs);
}
.ef-pal__row[aria-selected="true"]{background:rgba(33,67,255,.10)}
.ef-pal__t{font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:15.5px; font-weight:600; letter-spacing:-.02em; color:var(--ef-ink); white-space:nowrap}
.ef-pal__d{font-size:14px; color:var(--ef-body-2); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.ef-pal__k{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ef-signal); opacity:.75}
.ef-pal__empty{margin:0; padding:22px 20px; font-size:15px; color:var(--ef-body-2)}
.ef-pal__foot{display:flex; flex-wrap:wrap; gap:8px 18px; padding:11px 16px;
  border-top:1px solid var(--ef-line); font-size:12.5px; color:var(--ef-body-2)}
.ef-pal__foot span{display:inline-flex; align-items:center; gap:6px}

/* header affordance */
.ef-hdr__k{
  display:inline-flex; align-items:center; gap:6px; padding:8px 10px;
  border:1px solid var(--ef-line); border-radius:var(--r-pill);
  font-size:12.5px; color:var(--ef-body-2); flex:none;
  transition:border-color .2s var(--ef-ease), color .2s var(--ef-ease);
}
.ef-hdr__k:hover{border-color:#C9C4B7; color:var(--ef-ink)}
.ef-hdr__k kbd{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:3px 5px; border-radius:4px; background:var(--ef-canvas)}
@media (max-width:1080px){.ef-hdr__k{display:none}}

/* ══ 13. reading flow ═════════════════════════════════════════════════════
   Progress bar, section rail and section reveal. Every rule here is gated on
   html.ef-flow, which only js/flow.js sets — so with JS off, or with reduced
   motion asked for, nothing is hidden and nothing moves.                  */
.ef-prog{position:fixed; top:0; left:0; right:0; height:2px; z-index:120; pointer-events:none}
.ef-prog i{
  display:block; height:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--ef-signal),var(--ef-lift));
}

.ef-rail{
  position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:110;
  display:flex; flex-direction:column; gap:3px; padding:8px 6px;
  border-radius:var(--r-pill);
}
.ef-rail__d{display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:5px 4px}
.ef-rail__d i{
  width:7px; height:7px; border-radius:100px; flex:none;
  background:rgba(14,17,22,.22);
  transition:background-color .22s var(--ef-ease), transform .22s var(--ef-ease);
}
.ef-rail__l{
  padding:5px 11px; border-radius:100px;
  background:var(--ef-paper); border:1px solid var(--ef-line);
  box-shadow:0 8px 22px -12px rgba(14,17,22,.4);
  font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ef-ink); opacity:0; transform:translateX(6px);
  white-space:nowrap; pointer-events:none;
  transition:opacity .22s var(--ef-ease), transform .22s var(--ef-ease);
}
/* the label appears on hover only — showing it for the current section
   meant a permanent word floating over whatever sits at the right edge */
.ef-rail__d:hover .ef-rail__l{opacity:1; transform:none}
.ef-rail__d[data-on] i{background:var(--ef-signal); transform:scale(1.35)}
.ef-rail__d:hover i{background:var(--ef-signal)}
/* the rail is for the argument, not the footer — it steps aside there */
.ef-rail[data-hide]{opacity:0; visibility:hidden; transition:opacity .3s var(--ef-ease)}
/* the rail sits over both grounds, so it needs to survive a dark section */
@media (prefers-color-scheme:dark){.ef-rail__d i{background:rgba(251,250,247,.28)}}

html.ef-flow [data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity .55s var(--ef-ease), transform .55s var(--ef-ease);
}
html.ef-flow [data-reveal-in]{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html.ef-flow [data-reveal]{opacity:1; transform:none; transition:none}
  .ef-prog,.ef-rail{display:none}
  .ef-pal__box,.ef-pal__scrim{animation:none}
}

/* ══ 14. menu, second pass ════════════════════════════════════════════════
   Overrides §6. A panel is a surface, not a dropdown: it uses the same glass,
   radius, tile and shadow language as the cards on the page it opens over. */

/* the bar condenses once you leave the top */
.ef-hdr{
  transition:padding .28s var(--ef-ease), background-color .28s var(--ef-ease),
             box-shadow .28s var(--ef-ease), border-color .28s var(--ef-ease);
  border-bottom-color:transparent;
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
}
.ef-hdr[data-scrolled]{
  padding-top:8px; padding-bottom:8px;
  background:rgba(251,250,247,.94);
  border-bottom-color:var(--ef-line);
  box-shadow:0 10px 30px -22px rgba(14,17,22,.5);
}
.ef-hdr[data-scrolled] .ef-hdr__name{font-size:18px}
.ef-hdr__name{transition:font-size .28s var(--ef-ease)}

/* nav items */
.ef-nav{gap:1px}
.ef-nav__link{padding:9px 14px; font-weight:500}
.ef-nav__link:hover{background:rgba(14,17,22,.05); color:var(--ef-ink)}
.ef-nav__link[aria-expanded="true"]{background:rgba(33,67,255,.09); color:var(--ef-signal)}
.ef-nav__link[aria-expanded="true"] .ef-nav__chev{color:var(--ef-signal)}
/* current page: a soft tint and a dot, not a black slug */
.ef-nav__link[aria-current="page"]{
  background:rgba(33,67,255,.10); color:var(--ef-signal); font-weight:600;
}
.ef-nav__link[aria-current="page"]:hover{background:rgba(33,67,255,.16); color:var(--ef-signal)}
.ef-nav__dot{
  width:5px; height:5px; border-radius:100px; background:currentColor; flex:none;
  margin-right:1px;
}

/* the panel */
.ef-panel{
  top:calc(100% + 8px); padding:10px; gap:0;
  /* Solid, not glass. The header above it already carries a backdrop-filter,
     and Chromium ghosts the page through a nested backdrop-filter no matter
     how opaque the fill is — the hero headline was legible straight through
     a 98.5%-opaque panel. Depth comes from the shadow and the inset
     highlight instead, which is the right call for a reading surface. */
  background:#FCFBF8;
  border:1px solid rgba(14,17,22,.10); border-radius:var(--r-lg);
  box-shadow:0 30px 70px -30px rgba(14,17,22,.5),
             0 2px 6px rgba(14,17,22,.05),
             inset 0 1px 0 rgba(255,255,255,.75);
  transform:translateY(-8px) scale(.985); transform-origin:top left;
  transition:opacity .2s var(--ef-ease), transform .24s var(--ef-ease), visibility .24s;
}
.ef-panel[data-open]{transform:none}
.ef-panel--mega{
  grid-template-columns:minmax(0,1fr) 250px; width:min(760px,92vw);
  gap:10px; padding:12px;
}
.ef-panel--tall{width:min(320px,92vw); grid-template-columns:1fr}
.ef-panel__links{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px}
.ef-panel--tall .ef-panel__links{grid-template-columns:1fr}

.ef-panel__a{
  position:relative; align-items:flex-start; gap:12px; padding:11px 12px;
  border-radius:var(--r-xs);
  transition:background-color .16s var(--ef-ease);
}
.ef-panel__a:hover{background:rgba(33,67,255,.06)}
.ef-panel__txt{min-width:0}
.ef-panel__go{
  width:14px; height:14px; flex:none; margin-left:auto; margin-top:12px;
  color:var(--ef-signal);
  opacity:0; transform:translateX(-4px);
  transition:opacity .18s var(--ef-ease), transform .18s var(--ef-ease);
}
.ef-panel__a:hover .ef-panel__go{opacity:1; transform:none}
.ef-panel__a:hover .ef-ico{border-color:rgba(33,67,255,.34)}
.ef-panel__t{font-size:15px}
.ef-panel__d{font-size:13px; margin-top:3px}
.ef-panel__foot{
  grid-column:1/-1; margin-top:6px; padding:12px 12px 4px;
  border-top:1px solid var(--ef-line);
}
.ef-panel__foot .ef-link{font-size:14.5px}

/* the feature column — what a mega-menu is actually for */
.ef-feat{
  display:flex; flex-direction:column; gap:9px; padding:20px 18px;
  border-radius:var(--r-sm);
  background:linear-gradient(168deg, rgba(33,67,255,.09) 0%, rgba(33,67,255,.02) 60%, transparent 100%),
             var(--ef-sand);
  border:1px solid rgba(33,67,255,.10);
}
.ef-feat__k{font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ef-signal)}
.ef-feat__t{font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:16px; font-weight:600; letter-spacing:-.028em; line-height:1.22; color:var(--ef-ink)}
.ef-feat__d{font-size:13px; line-height:1.55; color:var(--ef-body-2)}
.ef-feat .ef-link{font-size:14px; margin-top:2px}
.ef-feat__stats{display:flex; gap:18px; margin-top:auto; padding-top:14px;
  border-top:1px solid rgba(14,17,22,.08)}
.ef-feat__stats span{display:flex; flex-direction:column; gap:1px;
  font-size:11.5px; line-height:1.3; color:var(--ef-body-2)}
.ef-feat__stats b{font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:17px; font-weight:600; letter-spacing:-.03em; color:var(--ef-ink)}
@media (max-width:980px){
  .ef-panel--mega{grid-template-columns:minmax(0,1fr); width:min(520px,92vw)}
  .ef-feat{display:none}
}

/* panels near the right edge open leftwards */
.ef-nav__item:nth-last-child(-n+2) .ef-panel{left:auto; right:0; transform-origin:top right}

/* burger, drawn rather than iconed */
.ef-burger{border-radius:var(--r-sm)}
.ef-burger__b{display:flex; flex-direction:column; gap:4px; align-items:flex-end}
.ef-burger__b i{display:block; height:2px; border-radius:2px; background:currentColor;
  transition:width .22s var(--ef-ease)}
.ef-burger__b i:nth-child(1){width:18px}
.ef-burger__b i:nth-child(2){width:13px}
.ef-burger__b i:nth-child(3){width:16px}
.ef-burger:hover .ef-burger__b i{width:18px}

/* drawer rows pick up the same tiles and chevrons */
.ef-acc__list a{display:flex; align-items:center; gap:12px; padding:11px 8px}
.ef-acc__list a .ef-panel__go{margin-left:auto; opacity:.45; transform:none; width:13px; height:13px}
.ef-drawer__flat{display:flex; align-items:center}
.ef-drawer__flat .ef-panel__go{margin-left:auto; width:14px; height:14px; color:var(--ef-signal); opacity:.5}
.ef-drawer__cta{gap:10px}
.ef-drawer__find{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:10px 8px 0; padding:13px 20px; cursor:pointer;
  background:none; border:1px solid var(--ef-line); border-radius:var(--r-pill);
  font:inherit; font-size:15px; font-weight:600; color:var(--ef-body);
}
.ef-drawer__find:hover{border-color:#C9C4B7; color:var(--ef-ink)}

@media (prefers-reduced-motion:reduce){
  .ef-hdr,.ef-hdr__name,.ef-panel__go,.ef-burger__b i{transition:none}
}

/* ---- 4. baseline: two rows, not one cramped line -------------------- */
.ef-foot__base{
  display:flex; flex-direction:column; gap:16px;
  padding:22px clamp(16px,4vw,56px) 26px;
  border-top:1px solid rgba(251,250,247,.09);
}
.ef-foot__baserow{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px clamp(16px,2.6vw,30px);
}
.ef-foot__baserow--end{
  padding-top:16px; border-top:1px solid rgba(251,250,247,.06);
  font-size:13px; color:#6F6A5D;
}
.ef-foot__baselinks{display:flex; flex-wrap:wrap; gap:6px 6px}
.ef-foot__baselinks a{
  padding:7px 13px; border-radius:100px; font-size:13.5px; color:#8C8779;
  transition:color .18s var(--ef-ease), background-color .18s var(--ef-ease);
}
.ef-foot__baselinks a:hover{color:var(--ef-paper); background:rgba(251,250,247,.07)}
.ef-foot__top{
  display:inline-flex; align-items:center; gap:9px; margin-left:auto;
  padding:9px 18px 9px 14px; border-radius:100px;
  border:1px solid rgba(251,250,247,.14); font-size:13.5px; font-weight:600; color:#C4BFB2;
  transition:border-color .2s var(--ef-ease), color .2s var(--ef-ease),
             background-color .2s var(--ef-ease);
}
.ef-foot__top svg{width:15px; height:15px; transition:transform .22s var(--ef-ease)}
.ef-foot__top:hover{border-color:rgba(251,250,247,.34); color:var(--ef-paper);
  background:rgba(251,250,247,.06)}
.ef-foot__top:hover svg{transform:translateY(-2px)}
/* the mark, small, as the sign-off */
.ef-foot__mk{display:flex; flex-direction:column; gap:2.5px; flex:none}
.ef-foot__mk i{display:block; height:3px; border-radius:2px}
.ef-foot__mk i:nth-child(1){width:15px; background:var(--ef-lift)}
.ef-foot__mk i:nth-child(2){width:10px; background:rgba(251,250,247,.5)}
.ef-foot__mk i:nth-child(3){width:6px;  background:rgba(251,250,247,.5)}
.ef-foot__cin{font-variant-numeric:tabular-nums; color:#5D584C}
.ef-foot__made{margin-left:auto; color:#5D584C; letter-spacing:.02em}
@media (max-width:640px){
  .ef-foot__top,.ef-foot__made{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .ef-foot__top,.ef-foot__top svg,.ef-foot__baselinks a{transition:none}
  .ef-foot__top:hover svg{transform:none}
}

/* ══ 15. small screens ════════════════════════════════════════════════════
   Measured at 320 / 360 / 390 / 768. Two classes of fix:

   1. TAP TARGETS. WCAG 2.5.8 asks for 24x24 CSS px on anything you press.
      Standalone arrow links measured 23px tall, and the drawer's mail link
      16px. Inline links inside a sentence are exempt and are left alone.
   2. TYPE FLOOR. Eyebrows, tags and step numerals sit at 11-11.5px, which is
      legible on a desktop at arm's length and not on a phone. Below 520px
      they step up to 12px. Nothing above 12px is touched, so the rhythm of
      the page is unchanged. */

.ef-link{min-height:26px}
.ef-drawer__meta a{display:inline-block; padding:5px 0; min-height:26px}
.ef-foot__pill, .ef-foot__kbd, .ef-hdr__k{min-height:34px}
.ef-fcol a{min-height:30px}
.ef-pal__row{min-height:44px}
.ef-rail__d{min-height:26px}
.ef-crumb{display:inline-block; padding:4px 0; min-height:24px}

@media (max-width:520px){
  .ef-eyebrow, .ef-ba__k, .ef-post__k, .ef-fcol__h, .ef-foot__entsk,
  .ef-fent__k, .ef-feat__k, .ef-office__k, .ef-ui__live, .ef-entity dt{font-size:12px}
  .ef-tag{font-size:11.5px; padding:4px 9px}
  .ef-step__n{font-size:12px}
  .ef-foot__base{font-size:13.5px}
  .ef-foot__baserow--end{font-size:12.5px}
  /* the status rail reads as a list, not a squeezed row, on a phone */
  .ef-foot__status{gap:12px 20px}
  .ef-trust__big{font-size:clamp(48px,15vw,64px)}
}

/* nothing on the site may scroll the page sideways. Wide tables and the
   matrix scroll inside their own container instead — that is what
   .ef-scroll is for. */
html, body{overflow-x:hidden; max-width:100%}