/* ============================================================================================================
   fex-nav.css — FEX Quotes site chrome
   ============================================================================================================

   The one stylesheet for the chrome: the agent nav (logged in), the public nav (logged out), the footer,
   the phone menu and the modal. Printed into the page by FexNav.pm (fex_chrome_head), never linked by hand;
   loads after bootstrap.min.css so it can undo Bootstrap's link styling inside the chrome.
   Companion script: fex-nav.js. Markup: nav_usr.htm, nav_pub.htm, footer.htm, footer_mini.htm.

   PREFIXES  Every class starts with  fxn-  (nav)  fxf-  (footer)  or  fxm-  (modal), so nothing here can
             collide with Bootstrap or with page CSS, and page CSS cannot accidentally match the chrome.

   STATE     Attributes on <header class="fxn">, set by FexNav.pm and fex-nav.js:
               data-product="fex|term"   which side of the product switch is active (colours the thumb)
               data-term-locked          non-subscriber: the padlock shows on Term / UL
               .fxn-public               the logged-out bar (plain links, Agent Login, Get Started)
               .fxn-ready                added by fex-nav.js after setup; enables the thumb animation

   LAYOUT    Desktop (860px and up): one 60px sticky bar. The agent bar carries the Final Expense / Term-UL
             switch, Web Quoter, Help, News and the profile; the public bar carries Home, Demo, Help,
             Agent Login and Get Started. Below 860px: a 58px bar (logo, switch, menu button) and a
             full-screen menu (.fxn-sheet). Between 1360 and 860 the agent bar gives up its labels in three
             steps (Help and News, then Web Quoter, then My Companies) so it never overflows.

   CONTENTS
      0  Tokens and base rules ......... colour variables, fonts, links, icons, focus rings
      1  The bar ....................... .fxn-bar, logo, divider, the flexible links slot
      2  Product switch ................ .fxn-toggle / .fxn-thumb / .fxn-tg / .fxn-lock  (agent bar)
      3  Dropdowns and menus ........... .fxn-dd / .fxn-dd-btn / .fxn-menu / .fxn-item; Help, News, profile;
                                         My Companies (.fxn-cos) and its count pill (.fxn-cnt)
      4  Public bar .................... .fxn-link, .fxn-actions, .fxn-btn (Agent Login, Get Started)
      5  Phone menu .................... .fxn-menu-btn, .fxn-sheet and its groups and footer
      6  Quote | My Companies switch ... .fxn-modes  (sits in the page card header, not in the bar)
      7  Responsive .................... 1360, 1140, 1010, 1000, 860, 480, 360px; body scroll lock
      8  Print ......................... the chrome never goes on paper
      9  Footer ........................ .fxf  (footer.htm, footer_mini.htm)
     10  Modal ......................... dialog.fx-modal + .fxm-*  (fex-nav.js job 5), and the legacy bare <dialog>

   EDITING   Change a colour in section 0 and it follows everywhere. Add a rule to the section it belongs to,
             not the end of the file. Bump $VERSION in FexNav.pm on deploy, or browsers keep the old copy.
   ============================================================================================================ */


/* ============================================================================================================
   0. TOKENS AND BASE RULES
   The palette lives on .fxn as custom properties; every component below refers to them. The header itself is
   display:contents, so it adds no box of its own: the bar is what sticks, and the phone menu is a fixed layer.
   ============================================================================================================ */
.fxn {
  --fxn-navy: #0F518E;                    /* brand blue: active thumb, avatar, primary button, focus ring   */
  --fxn-ink: #1B3A57;                     /* headings and names                                             */
  --fxn-link: #254B6C;                    /* resting link and button text                                   */
  --fxn-mute: #566879;                    /* secondary text, group labels                                   */
  --fxn-line: #DCE4EB;                    /* hairlines, dividers, menu borders                              */
  --fxn-tint: #EEF3F8;                    /* light blue fill: switch track, open button, icon tiles         */
  --fxn-hover: #F4F7FA;                   /* hover fill                                                     */
  --fxn-maroon: #913A5A;                  /* the brand maroon: bar underline, Log out                       */
  --fxn-term: #3A7465;                    /* Term / UL green                                                */
  --fxn-prod: var(--fxn-navy);            /* follows the active product; the thumb and switch text use it   */
  display: contents;                      /* the <header> adds no box, so the bar itself is what sticks     */
}
.fxn[data-product="term"] { --fxn-prod: var(--fxn-term); }

/* Typography and box model, scoped to the two chrome containers so page CSS is untouched. */
.fxn-bar, .fxn-sheet { font-family: Inter, -apple-system, "Segoe UI", sans-serif; line-height: normal; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
.fxn-bar *, .fxn-sheet * { box-sizing: border-box; }

/* Links. Bootstrap colours every <a> and underlines it on hover; inside the chrome a link takes its colour
   from --fxn-c instead, so the component rules below only ever set that one variable. */
.fxn a, .fxn a:hover { color: var(--fxn-c, inherit); text-decoration: none; }
/* Page stylesheets have been known to flatten anchor cursors; the chrome guarantees its own. */
.fxn a { cursor: pointer; }
.fxn button { font-family: inherit; cursor: pointer; }
.fxn button:focus:not(:focus-visible) { outline: 0; }
.fxn a:focus-visible, .fxn button:focus-visible { outline: 2px solid var(--fxn-navy); outline-offset: 2px; }

/* Icons (Font Awesome <i>) and inline SVG never shrink in a flex row. Sizes per context follow. */
.fxn svg { flex-shrink: 0; }
.fxn i { flex-shrink: 0; font-size: 15px; line-height: 1; }
.fxn-tg i { font-size: 14px; }            /* product switch                                                 */
.fxn-ico i { font-size: 16px; }           /* icon tile in a menu item                                       */
.fxn i.fxn-chev { font-size: 11px; }      /* dropdown chevron                                               */
.fxn-menu-btn i { font-size: 21px; }      /* phone menu button (bars / close)                               */
.fxn-lock i { font-size: 11px; }          /* padlock on Term / UL                                           */
.fa-nav {font-size: 1.2rem !important; color:#8995bf}
/* [hidden] is how fex-nav.js opens and closes panels; the !important beats Bootstrap's display utilities. */
.fxn [hidden] { display: none !important; }

/* The unread-news dot, and the two text styles used inside the News panel. */
.fxn-dot { width: 7px; height: 7px; border-radius: 50%; background: #F9DB2F; }
/* On a bar button the dot rides high beside the label, so it reads as "unread" rather than punctuation. */
.fxn-dd-btn .fxn-dot { margin: -10px 0 0 -2px; }
.fxn-news { padding: 6px 10px 10px; font-size: 13.5px; line-height: 1.45; color: var(--fxn-mute); }
.fxn-news-title { padding: 8px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .8px; color: var(--fxn-mute); }

/* ============================================================================================================
   1. THE BAR
   A white 60px strip, sticky at the top, maroon underline. Its children sit in one flex row: logo, (switch),
   divider, the links slot, (tools), (divider), (profile), menu button. The links slot is the only child that
   grows, which is what pushes everything after it to the right.
   ============================================================================================================ */
/* flex-shrink:0 matters on pages that make <body> a flex column (the quoters do, to pin the footer): the
   header is display:contents, so a "body > *" rule in the page never reaches the bar itself. */
.fxn-bar { position: _sticky; top: 0; z-index: 40; height: 60px; flex-shrink: 0; padding: 0 24px; background: #fff; border-bottom: 2px solid var(--fxn-maroon); display: flex; align-items: center; gap: 20px; }
.fxn-logo { display: flex; align-items: center; height: 44px; flex-shrink: 0; overflow: hidden; }
/* The logo carries its own colours; this only sizes it. Works for an inline <svg> or an <img>. */
.fxn-logo svg, .fxn-logo img { display: block; width: 150px; height: 34px; max-width: none; }
.fxn-div { width: 1px; height: 28px; background: var(--fxn-line); flex-shrink: 0; }
.fxn-links { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; }


/* ============================================================================================================
   2. PRODUCT SWITCH  (agent bar)
   Final Expense | Term / UL: two plain links laid over a sliding thumb. data-product on the header says which
   side is active; fex-nav.js sets it from the address. The thumb only gets its transition once .fxn-ready is
   on, so it never slides across on page load.
   ============================================================================================================ */
.fxn-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: var(--fxn-tint); box-shadow: inset 0 0 0 1px var(--fxn-line); flex-shrink: 0; }
.fxn-thumb { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); border-radius: 10px; background: var(--fxn-prod); box-shadow: 0 1px 3px rgba(16, 42, 67, .25); }
.fxn-ready .fxn-thumb { transition: transform .22s cubic-bezier(.3, .7, .3, 1), background-color .22s ease; }
.fxn[data-product="term"] .fxn-thumb { transform: translateX(100%); }
.fxn-tg { position: relative; z-index: 1; height: 36px; padding: 0 18px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; --fxn-c: var(--fxn-link); white-space: nowrap; transition: color .18s ease; }
/* the active side's label turns white over the thumb */
.fxn[data-product="fex"] .fxn-tg[data-product="fex"], .fxn[data-product="term"] .fxn-tg[data-product="term"] { --fxn-c: #fff; }
/* the padlock on Term / UL, shown only for non-subscribers */
.fxn-lock { display: none; opacity: .75; }
.fxn[data-term-locked] .fxn-lock { display: inline-flex; }


/* ============================================================================================================
   3. DROPDOWNS AND MENUS
   One pattern serves Web Quoter, Help, News and the profile: a .fxn-dd wrapper, a .fxn-dd-btn trigger
   (aria-expanded reflects state) and a .fxn-menu panel of .fxn-item rows, each an icon tile plus title and
   subtitle. fex-nav.js does the opening and closing; this is only how they look.
   ============================================================================================================ */
/* -- trigger -------------------------------------------------------------------------------------------- */
.fxn-dd { position: relative; display: flex; align-items: center; }
.fxn-dd-btn { height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--fxn-link); }
.fxn-dd-btn:hover { background: var(--fxn-hover); }
.fxn-dd-btn[aria-expanded="true"] { background: var(--fxn-tint); color: var(--fxn-navy); }
.fxn-chev { opacity: .7; transition: transform .15s ease; }
.fxn-dd-btn[aria-expanded="true"] .fxn-chev { transform: rotate(180deg); }

/* -- Help and News cluster: right of the bar, left of the profile (where the old utility strip's links went) */
.fxn-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
/* bar buttons never wrap, however tight the bar gets */
.fxn-dd-btn { white-space: nowrap; }

/* -- My Companies: first in the links slot, right after the separator. The link, the count and the pill's colour
      follow the product switch; fex-nav.js sets them from data-fex-companies / data-term-companies on the header,
      and hides the pill when the count is blank. ---------------------------------------------------------- */
.fxn-cos { height: 44px; padding: 0 12px 0 14px; border-radius: 8px; display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; --fxn-c: var(--fxn-link); white-space: nowrap; }
.fxn-cos:hover { background: var(--fxn-hover); }
.fxn-cos[aria-current="page"] { background: var(--fxn-tint); --fxn-c: var(--fxn-prod); font-weight: 600; }   /* on a companies page */
.fxn-cnt { height: 20px; min-width: 22px; padding: 0 7px; border-radius: 10px; background: var(--fxn-prod); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; line-height: 1; }

/* -- profile trigger: avatar + first name, a rounder variant of .fxn-dd-btn (so it must follow it) -------- */
.fxn-profile-btn { padding: 0 10px 0 6px; border-radius: 22px; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fxn-ink); }
.fxn-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--fxn-navy); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* -- panel ----------------------------------------------------------------------------------------------- */
.fxn-menu { position: absolute; top: calc(100% + 10px); left: 0; width: 300px; padding: 8px; background: #fff; border: 1px solid var(--fxn-line); border-radius: 14px; box-shadow: 0 18px 40px rgba(16, 42, 67, .16); display: flex; flex-direction: column; gap: 2px; z-index: 4500; }
.fxn-menu-right { left: auto; right: 0; }             /* panels at the right edge open leftwards */

/* -- items ----------------------------------------------------------------------------------------------- */
.fxn-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; }
.fxn-item:hover { background: var(--fxn-hover); }
.fxn-ico { width: 36px; height: 36px; border-radius: 9px; background: var(--fxn-tint); color: var(--fxn-navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fxn-item-text { display: flex; flex-direction: column; gap: 2px; }
.fxn-item-title { font-size: 14px; font-weight: 600; color: var(--fxn-ink); line-height: 1.25; }
.fxn-item-sub { font-size: 12.5px; color: var(--fxn-mute); line-height: 1.3; }
.fxn-sep { height: 1px; margin: 6px 4px; background: var(--fxn-line); }
/* the Help menu leads with the phone number, tinted green so it reads as an action rather than a link */
.fxn-item-call .fxn-ico { background: #E6F0E9; color: var(--fxn-term); }

/* -- account panel: name block at the top, Log out in maroon at the bottom ------------------------------- */
.fxn-acct-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--fxn-line); }
.fxn-acct-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fxn-acct-name strong { font-size: 14px; font-weight: 600; color: var(--fxn-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxn-acct-name small { font-size: 12px; color: var(--fxn-mute); }
.fxn-logout { --fxn-c: var(--fxn-maroon); font-size: 14px; font-weight: 600; }
.fxn-logout .fxn-ico { background: transparent; color: inherit; }


/* ============================================================================================================
   4. PUBLIC BAR  (.fxn-public)
   Plain text links on the left (Home, Demo, Pricing, FAQ) and an actions cluster on the right: Help, a divider,
   Agent Login as a link (it opens the login modal) and Get Started, the bar's one button. The buttons are <a>
   elements styled as buttons, so they work without JS.
   ============================================================================================================ */
.fxn-link { height: 34px; padding: 0 14px; border-radius: 8px; display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; --fxn-c: var(--fxn-link); white-space: nowrap; }
.fxn-link:hover { background: var(--fxn-hover); }
.fxn-link[aria-current="page"] { background: var(--fxn-tint); --fxn-c: var(--fxn-navy); font-weight: 600; }   /* set by fex-nav.js */
.fxn-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.fxn-btn { height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; background: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14.5px; font-weight: 600; line-height: 1; white-space: nowrap; }
.fxn-btn-primary { background: var(--fxn-navy); color: #fff; --fxn-c: #fff; }
.fxn-btn-primary:hover { background: #0C4477; }
.fxn-btn-outline { background: #fff; border-color: #B9C7D5; color: var(--fxn-navy); --fxn-c: var(--fxn-navy); }
.fxn-btn-outline:hover { background: var(--fxn-hover); border-color: var(--fxn-navy); }
/* Agent Login in the bar: a .fxn-link in navy, so Get Started stays the only button (the phone menu uses the outline button) */
.fxn-login { --fxn-c: var(--fxn-navy); font-weight: 600; }
.fxn-actions .fxn-div { margin: 0 2px; }


/* ============================================================================================================
   5. PHONE MENU
   Below 860px the bar shows a menu button, and the menu itself is .fxn-sheet: a fixed, full-screen white
   layer with a header (name or "Menu", close button), a scrolling body of labelled groups, and a footer
   (call button, Log out, or Agent Login + Get Started on the public side). Off by default; section 7 turns
   the button on at the breakpoint, and fex-nav.js toggles the sheet's [hidden].
   ============================================================================================================ */
/* -- the button in the bar (also reused as the close button inside the sheet) ---------------------------- */
.fxn-menu-btn { display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--fxn-link); align-items: center; justify-content: center; flex-shrink: 0; }
.fxn-menu-btn:hover { background: var(--fxn-hover); }
.fxn-menu-btn .fxn-dot { position: absolute; top: 9px; right: 8px; box-shadow: 0 0 0 2px #fff; }   /* unread news, on the button's corner */
.fxn-sheet .fxn-menu-btn { display: flex; }

/* -- the sheet ------------------------------------------------------------------------------------------- */
/* z-index 1040 puts it above Bootstrap's .fixed-bottom (1030), which some pages still use. */
.fxn-sheet { position: fixed; inset: 0; z-index: 1040; background: #fff; display: flex; flex-direction: column; }
.fxn-sheet-head { height: 58px; flex-shrink: 0; padding: 0 6px 0 16px; border-bottom: 1px solid var(--fxn-line); display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 700; color: var(--fxn-ink); }
.fxn-sheet-who { display: flex; align-items: center; gap: 10px; }
.fxn-sheet-body { flex: 1 1 0; overflow-y: auto; padding: 14px 8px; display: flex; flex-direction: column; gap: 14px; }
.fxn-group { display: flex; flex-direction: column; gap: 2px; }
.fxn-group-label { padding: 0 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .8px; color: var(--fxn-mute); }
/* menu items are the same .fxn-item as the dropdowns, taller for thumbs */
.fxn-sheet .fxn-item { min-height: 52px; padding: 4px 10px; }
.fxn-sheet .fxn-item .fxn-cnt { margin-left: auto; }        /* My Companies: its count at the right edge of the row */
.fxn-sheet .fxn-item-title { font-size: 15px; }

/* -- the sheet footer ------------------------------------------------------------------------------------ */
.fxn-sheet-foot { flex-shrink: 0; padding: 10px 16px 14px; border-top: 1px solid var(--fxn-line); display: flex; flex-direction: column; gap: 6px; }
.fxn-call { height: 48px; border-radius: 10px; background: var(--fxn-navy); --fxn-c: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; }          /* agent side: call member support */
.fxn-sheet-logout { height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; --fxn-c: var(--fxn-maroon); }
.fxn-foot-row { display: flex; gap: 10px; }                                          /* public side: Agent Login | Get Started */
.fxn-foot-row .fxn-btn { flex: 1 1 0; height: 48px; font-size: 15px; }
.fxn-call-link { height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14.5px; font-weight: 600; --fxn-c: var(--fxn-navy); }   /* public side: call the Help Desk */


/* ============================================================================================================
   6. QUOTE | MY COMPANIES SWITCH
   Not part of the bar. This segmented switch sits in the blue header of the quoter's page card, so it is
   styled for a dark background. --fxn-head lets the page pass in its own header colour for the active pill.
   ============================================================================================================ */
.fxn-modes { margin-left: auto; display: grid; grid-auto-flow: column; grid-auto-columns: auto; gap: 2px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .16); font-family: Inter, -apple-system, "Segoe UI", sans-serif; flex-shrink: 0; }
.fxn-mode { height: 36px; padding: 0 16px; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; }
.fxn-mode:hover { background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; }
.fxn-mode[aria-current="page"], .fxn-mode[aria-current="page"]:hover { background: #fff; color: var(--fxn-head, #123F6D); box-shadow: 0 1px 3px rgba(11, 47, 84, .25); }
.fxn-mode:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fxn-count { height: 20px; min-width: 22px; padding: 0 7px; border-radius: 10px; background: rgba(255, 255, 255, .22); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }   /* the "64" badge */
.fxn-mode[aria-current="page"] .fxn-count { background: #EEF3F8; }


/* ============================================================================================================
   7. RESPONSIVE
   Largest first, so each later block wins over the one before it at the same specificity.
     1360px  agent bar: Help and News drop to icons (with every label showing the bar is 1305px wide)
     1140px  agent bar: Web Quoter drops to an icon
     1010px  agent bar: My Companies drops to icon + count, the switch loses its icons (fits down to 860)
     1000px  public bar: Help drops to an icon
      860px  the phone layout: bar shrinks to logo + switch + menu button, everything else moves into the sheet
      480px  bullseye-only logo (the wordmark is cropped away), tighter switch
      360px  the public bar's logo crops too
   Labels are hidden from sight only (clip, not display:none), so screen readers still announce them.
   ============================================================================================================ */
@media (max-width: 1360px) {
  .fxn-bar { gap: 12px; }
  .fxn-tools .fxn-lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .fxn-tools .fxn-chev { display: none; }
  .fxn-tools .fxn-dd-btn { padding: 0 12px; }
}
@media (max-width: 1140px) {
  .fxn-bar { padding: 0 16px; }
  .fxn-links .fxn-dd-btn .fxn-lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .fxn-links .fxn-dd-btn .fxn-chev { display: none; }
  .fxn-links .fxn-dd-btn { padding: 0 12px; }
}
@media (max-width: 1010px) {
  .fxn-cos .fxn-lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .fxn-cos { padding: 0 10px 0 12px; }
  .fxn-tg .fxn-tg-ico { display: none; }
}
@media (max-width: 1000px) {
  .fxn-public .fxn-bar { gap: 12px; }
  .fxn-actions .fxn-dd .fxn-lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .fxn-actions .fxn-dd .fxn-chev { display: none; }
  .fxn-actions .fxn-dd .fxn-dd-btn { padding: 0 12px; }
}

/* 860px: the phone layout */
@media (max-width: 859px) {
  .fxn-div, .fxn-links, .fxn-tools, .fxn-profile { display: none; }
  .fxn-bar { height: 58px; padding: 0 4px 0 12px; gap: 8px; justify-content: space-between; }
  .fxn-menu-btn { display: flex; }
  .fxn-tg { padding: 0 14px; }
  /* the Quote | My Companies switch takes the full card width */
  .fxn-modes { flex: 1 1 100%; margin-left: 0; grid-auto-flow: initial; grid-template-columns: 1fr 1.35fr; }
  .fxn-mode { height: 40px; padding: 0 8px; }
  /* public bar on a phone: logo, Agent Login, menu button. Help and Get Started move into the sheet. */
  .fxn-public .fxn-actions { gap: 4px; }
  .fxn-public .fxn-actions .fxn-dd, .fxn-public .fxn-actions .fxn-div, .fxn-public .fxn-actions .fxn-btn-primary { display: none; }
  .fxn-public .fxn-login { height: 38px; padding: 0 10px; font-size: 14px; }
}

/* 480px: bullseye only (the logo box narrows and overflow:hidden crops the wordmark), tighter switch */
@media (max-width: 479px) {
  .fxn-bar { padding-left: 8px; }
  .fxn-logo { width: 37px; }
  .fxn-tg { font-size: 13px; padding: 0 12px; }
  .fxn-tg .fxn-tg-ico { display: none; }
  .fxn-public .fxn-logo { width: auto; }      /* no switch in the public bar, so the full wordmark still fits */
}

/* 360px: even the public bar's wordmark has to go */
@media (max-width: 359px) {
  .fxn-public .fxn-logo { width: 37px; }
}

/* While the phone menu is open, fex-nav.js puts this class on <html> so the page behind does not scroll. */
html.fxn-noscroll, html.fxn-noscroll body { overflow: hidden; }


/* ============================================================================================================
   8. PRINT
   The chrome never goes on paper. Pages used to hide the old .navbar themselves; now they need not know the
   chrome's class names at all.
   ============================================================================================================ */
@media print { .fxn-bar, .fxn-sheet, .fxf { display: none !important; } }


/* ============================================================================================================
   9. FOOTER  (.fxf — footer.htm and footer_mini.htm)
   Dark footer that scrolls with the page (it replaced a fixed bottom bar). footer.htm is three columns
   (.fxf-top) over a bottom row (.fxf-bot: copyright, Terms, Privacy). footer_mini.htm is the bottom row alone.
   Same --fxf-c colour convention for links as the nav's --fxn-c.
   ============================================================================================================ */
.fxf { --fxf-bg: #2B3138; --fxf-fg: #C9D1D9; --fxf-strong: #FFFFFF; --fxf-line: rgba(255, 255, 255, .12); background: var(--fxf-bg); color: var(--fxf-fg); border-top: 2px solid #913A5A; font-family: Inter, -apple-system, "Segoe UI", sans-serif; font-size: 13px; line-height: normal; -webkit-font-smoothing: antialiased; }
.fxf * { box-sizing: border-box; }
.fxf a, .fxf a:hover { color: var(--fxf-c, var(--fxf-fg)); text-decoration: none; cursor: pointer; }
.fxf a:hover { --fxf-c: var(--fxf-strong); }
.fxf i { font-size: 12px; width: 14px; text-align: center; flex-shrink: 0; }

/* -- the three columns --------------------------------------------------------------------------------- */
.fxf-top { max-width: 980px; margin: 0 auto; padding: 30px 24px 24px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px 48px; }
.fxf-col { display: flex; flex-direction: column; gap: 8px; }
.fxf-col a { display: inline-flex; align-items: center; gap: 7px; }
.fxf-h { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--fxf-strong); margin-bottom: 2px; }   /* column heading */
/* first column: bullseye mark, wordmark, tagline, blurb, phone */
.fxf-about { gap: 12px; padding-right: 24px; }
.fxf-brand { display: flex; align-items: center; gap: 14px; }
.fxf-mark { display: block; width: 40px; height: 37px; flex-shrink: 0; }
.fxf-name { font-size: 16px; font-weight: 700; color: var(--fxf-strong); }
.fxf-tag { font-size: 12.5px; margin-top: 2px; }
.fxf-blurb { margin: 0; font-size: 13px; line-height: 1.55; max-width: 34ch; }
.fxf-phone { font-weight: 600; --fxf-c: var(--fxf-strong); }
.fxf-hire { font-weight: 600; --fxf-c: #F9DB2F; }                                     /* "We're Hiring", in the brand yellow */
.fxf-hire:hover { --fxf-c: #FFE873; }

/* -- the bottom row ------------------------------------------------------------------------------------ */
/* the padding formula keeps the row's contents aligned with the 980px column grid above it */
.fxf-bot { border-top: 1px solid var(--fxf-line); display: flex; justify-content: space-between; gap: 12px; padding: 12px max(24px, calc((100% - 980px) / 2 + 24px)); font-size: 12.5px; }
.fxf-legal { display: flex; gap: 18px; }
/* footer_mini.htm is the bottom row alone: no hairline between it and the maroon top border */
.fxf-mini .fxf-bot { border-top: 0; }

/* -- phone: two columns, the about block spanning both; the bottom row stacks and centres ----------------- */
@media (max-width: 859px) {
  .fxf-top { grid-template-columns: 1fr 1fr; gap: 22px 24px; padding: 22px 16px 18px; }
  .fxf-about { grid-column: 1 / -1; padding-right: 0; }
  .fxf-bot { flex-direction: column; align-items: center; gap: 6px; text-align: center; }
}


/* ============================================================================================================
   10. MODAL
   Two things here, in a deliberate order.

   10a  Bare <dialog>: the right-hand slide-in "panel" styling some /usr/ pages rely on for their own dialogs.
        Carried over from the old nav include's inline <style> so nothing on the site changed. It is
        page-level, not chrome, and can move out of this file once those pages carry it themselves.

   10b  The chrome modal: <dialog class="fx-modal">, created and driven by fex-nav.js (job 5) for every
        <a class="fexmodal"> — Agent Login, Support Ticket, Terms, Privacy, Contact. Centred, sized per link
        through --fxm-w / --fxm-h (set from the link's data-modal-width / -height), gradient header, iframe
        body. dialog.fx-modal outranks the bare dialog rules, which is what lets the two coexist; it is kept
        after them so its ::backdrop wins where the specificity ties. Moved here from the retired nav_footer.css.
   ============================================================================================================ */
/* -- 10a  bare <dialog>: the legacy right-hand panel ----------------------------------------------------- */
dialog { height: auto; inset: 0; left: auto; max-height: 100vh; padding: 0; overflow-x: hidden; width: 450px; border: 1px solid transparent; border-width: 0 0 0 1px; box-shadow: 0 0 3px #000022; opacity: 0; transform: translateX(20px); transition: opacity 0.1s ease-out, transform 0.2s ease-out, display 0.2s allow-discrete, overlay 0.2s allow-discrete; }
dialog[open] { opacity: 1; transform: translateX(0); }
@starting-style { dialog[open] { opacity: 0; transform: translateX(20px); } }
dialog::backdrop { background-color: rgba(0, 0, 0, 0); transition: display 0.2s allow-discrete, overlay 0.2s allow-discrete; }
dialog[open]::backdrop { background-color: rgba(0, 0, 0, 0.5); }
:is(html, body):has(:modal) { overflow: hidden; }
.panel_body { padding: 2rem; }

/* -- 10b  the chrome modal ------------------------------------------------------------------------------ */
/* Width is the link's request, capped to the viewport less a 16px margin each side; height follows the body. */
dialog.fx-modal { inset: 0; left: 0; right: 0; margin: auto; height: fit-content; width: min(var(--fxm-w, 800px), calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 18px 60px rgba(20, 28, 42, .32); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .18s ease-out, transform .18s ease-out, display .18s allow-discrete, overlay .18s allow-discrete; }
dialog.fx-modal[open] { opacity: 1; transform: none; }
@starting-style { dialog.fx-modal[open] { opacity: 0; transform: translateY(14px) scale(.98); } }
dialog.fx-modal::backdrop { background: rgba(16, 24, 36, .55); }
/* header: icon, title, close. data-title-color="wine" or data-theme="dark" on the link switches the gradient. */
.fxm-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #fff; background: linear-gradient(135deg, #0f518e, #176aa8); font-weight: 700; font-size: .95rem; }
.fxm-head.wine { background: linear-gradient(135deg, #913a5a, #aa0d57); }
.fxm-head.dark { background: linear-gradient(135deg, #2b3138, #454d57); }     /* the old bar's Support Ticket */
.fxm-head i { font-size: 1.05rem; opacity: .9; }
.fxm-x { margin-left: auto; border: 0; background: transparent; color: #fff; font-size: 1.2rem; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; }
.fxm-x:hover { background: rgba(255, 255, 255, .18); }
/* body: the iframe, at the link's requested height, capped to the viewport less the header (48px) */
.fxm-body { position: relative; height: var(--fxm-h, 300px); max-height: calc(100vh - 32px - 48px); }
.fxm-body iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.fxm-body.bordered iframe { border: 1px solid #dce4eb; }     /* data-border="true" on the link */