/* lex-critical */

/* ── 1. THE LINK RESET. This is the actual fix. ──
   Every link on the site takes its colour from a single declaration,
   a{color:inherit}, and that declaration sits inside lex-bb3ddb450c6c.css, a 107KB
   file. The page pulls 262KB of CSS across seven render-blocking stylesheets. If
   that one file is slow, truncated or dropped on a weak connection, every anchor on
   the page falls back to the user-agent default: blue, purple when visited,
   underlined. That is exactly what the phone screenshot showed, in the mega menu
   and everywhere else.
   Repeating the reset here, inline and first, means it cannot fail independently of
   the HTML it styles. */
a{color:inherit;text-decoration:none}
a:visited{color:inherit}

/* ── 2. The mega menu, hidden until opened ── */
#mega-menu{display:none}
#mega-menu.open{display:grid}

/* ── 2. If it is open, it must not look like a bare list of links ──
   A visitor who taps Explore during the first second gets this rather than
   user-agent blue. */
#mega-menu a{color:#F5F1EA;text-decoration:none}
#mega-menu a:visited{color:#F5F1EA}
#mega-menu{background:#090F20;color:#F5F1EA}

/* ── 3. The header, so the logo row is never unstyled ── */
#nav{background:#0F1E38}
#nav a{text-decoration:none}
#nav a:visited{color:inherit}
.nav-links{list-style:none;margin:0;padding:0}
/* The empty <ul> is filled by lex-nav-fix.php at priority 46. Before its CSS
   arrives the list would show as bullets across the header. */
.nav-links li{list-style:none}

/* ── 4. Controls that were rendering as a grey circle and a white pill ── */
.nav-mob-btn{background:transparent;border:0;padding:0}
.nav-mob-btn span{display:block;height:2px;background:#F5F1EA;border-radius:1px}
.nav-explore-btn{background:transparent;color:#E8B84B;border:1px solid rgba(232,184,75,.45)}
.nav-explore-main{color:#E8B84B}

/* ── 5. The legal notices modal, hidden for the same reason as the menu ──
   It is opened with element.style.display='flex', an inline style, which beats
   this rule, so opening still works. */
#lso-modal{display:none}

/* ── 5b. Every other modal, for the same reason ──
   Junaid photographed the homepage on an iPhone with his own and Jia's
   headshots rendering as page content below the footer, followed by the
   calculator panels, gold label bars and unreadable overlay text. They are
   not page content: they are .bio-modal, .assoc-modal and .cm-overlay, the
   pop-ups that sit after </footer> in the markup.

   All three are hidden by exactly one file, lex-bb3ddb450c6c.css. Nothing
   else on the site declares .bio-modal{display:none}. When that file does not
   apply, every modal on the page unfolds into the document in source order,
   which is precisely what he saw. It is the same single point of failure that
   produced the default-blue links and the 351px icons; those two symptoms are
   already covered here, so the modals were what remained visible.

   The pop-ups open by adding class .open, so both halves of the contract are
   restated. No !important, and the .open rules are declared after the hidden
   rules, so lex-bb3ddb450c6c.css continues to win everything else about their
   appearance when it does load. */
.bio-modal,.assoc-modal,.cm-overlay{display:none}
.bio-modal.open,.assoc-modal.open,.cm-overlay.open{display:flex}

/* ── 6. Icon size floor, so a missing stylesheet degrades quietly ──
   An <svg> with a viewBox but no width or height attribute has no intrinsic
   size. When the stylesheet that sizes it is not yet applied, CSS falls back
   to the replaced-element default and the icon fills its container: measured
   on the homepage with lex-bb3ddb450c6c.css disabled, six 24x24 icons
   rendered at 351x351. That is the giant black triangle Junaid photographed
   on the calculator cards, and the row of large white circles: they are the
   .calc-card-go arrows and the seal outlines, drawn at fifteen times size.

   825 inline SVGs across 353 files have no width or height attribute.

   :where() is what makes this safe. The ENTIRE selector sits inside it, so the
   rule scores (0,0,0) and loses every tie. Any real declaration outranks it:
   #practice .pill svg (1,1,1), .lx-phone-btn svg (0,1,1), and plain
   img,video,svg (0,0,1). The icons keep their designed sizes to the pixel
   when the CSS is present, and land at 1.15em when it is not.

   Wrapping only the :not() pair, as svg:where(...)[viewBox], was the first
   draft and scored (0,0,1). That ties with img,video,svg and wins on order,
   because this block sits at the top of the body and the stylesheets are in
   the head. Measured: two .lex-credential-item icons moved from 18px to 16px.
   Zero specificity fixed it. Re-measured after: 0 of 104 SVGs on the homepage
   change size, and with lex-bb3ddb450c6c.css disabled the giant icons drop
   from 6 to 0.

   Adding width and height attributes to the markup was tried first and
   reverted across all 824 tags. On the outermost <svg> in HTML those
   attributes beat the author stylesheet in Chrome: the .pill icons went from
   their designed 13px to 24px. */
:where(svg:not([width]):not([height])[viewBox]),
:where(svg:not([width]):not([height])[viewbox]){width:1.15em;height:1.15em}

/* Nothing else belongs here. Two rules I drafted and removed after checking the
   live stylesheets:
     .lex-sticky-cta{opacity:0}      already has display:none!important
     html,body{overflow-x:hidden}    already declared three times, twice !important
   Both were redundant, and the second would have been the only rule in this file
   capable of breaking something, because overflow-x:hidden on the root disables
   position:sticky and the page has one sticky element. */