/* ============================================================
   Emirae.Pro global header — component CSS (loads site-wide).
   Adapted from design prototype ui_kits/emirae-header/header.css
   + emirae-header-logged-in/loggedin.css. Class family
   (.masthead/.brand/.nav-item/.dd/.mega-*/.burger/.mobile/.mm-*/
   .header-account/.acc-*/.ubadge) is header-unique (0 collisions).
   Tokens resolve via `.uaec-ds` on the <header> root.
   ============================================================ */
/* ============================================================
   Emirae.Pro — Header navigation redesign
   Tokens & .uaec-* primitives come from the design system styles.css.
   Structure mirrors the live WordPress header working copy so the
   markup + behaviour can be ported back without rewiring.
   ============================================================ */

/* ============================================================
   HEADER — transparent over stage, solid on scroll
   ============================================================ */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.masthead.is-scrolled {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.masthead__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 18px; }

/* Premium text-only wordmark + brand descriptor lockup */
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
/* No stray focus box on the logo for pointer/touch focus; keep it for keyboard. */
.brand:focus:not(:focus-visible) { outline: none; }
.brand:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 3px; border-radius: 4px; }
.brand__word {
  font-size: 24px; line-height: 1; font-weight: var(--fw-bold); letter-spacing: -0.02em;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  background-image: linear-gradient(177deg, #ffffff 0%, #dfeaff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 6px rgba(8,18,42,.35));
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: filter var(--dur) var(--ease);
}
.brand__word b { font-weight: var(--fw-bold); letter-spacing: -0.018em;
  background-image: linear-gradient(177deg, #7db4ff 0%, #3f93e6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.is-scrolled .brand__word {
  background-image: linear-gradient(177deg, #1b2a49 0%, #243657 52%, #324a72 100%);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 1px 4px rgba(20,40,90,.18));
}
.is-scrolled .brand__word b { background-image: linear-gradient(177deg, #3f93e6 0%, var(--accent) 60%, var(--accent-hover) 100%); }

/* Small brand descriptor under the wordmark, left-aligned to the logo */
.brand__desc {
  font-size: 9px; line-height: 1; font-weight: var(--fw-medium);
  letter-spacing: .11em; text-transform: uppercase; white-space: nowrap;
  color: rgba(179,206,226,.78);
  padding-left: 1px;
  transition: color var(--dur) var(--ease);
}
.is-scrolled .brand__desc { color: #6f7f99; }
@media (max-width: 400px) { .brand__desc { display: none; } }

/* Mobile phones: shrink the wordmark ~25% and keep it identical across
   states (logged-out, logged-in, and the open burger drawer). */
@media (max-width: 640px) {
  .brand__word,
  .mobile__top .brand__word { font-size: 22px; }
}

/* ---- Main nav ---- */
.mainnav { display: none; align-items: center; gap: 2px; }
@media (min-width: 1080px) { .mainnav { display: flex; } }

.nav-item { position: relative; }
.navlink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: rgba(255,255,255,.86);
  white-space: nowrap; cursor: pointer; background: transparent; border: none; font-family: inherit;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.navlink:hover, .nav-item.is-active .navlink { background: rgba(255,255,255,.12); color: #fff; }
.navlink .caret { width: 13px; height: 13px; opacity: .55; stroke-width: 2.6; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-item.is-active .navlink .caret { transform: rotate(180deg); opacity: .9; }
.is-scrolled .navlink { color: var(--text-secondary); }
.is-scrolled .navlink:hover, .is-scrolled .nav-item.is-active .navlink { background: var(--surface-alt); color: var(--text-strong); }

.header-actions { display: none; align-items: center; gap: 10px; }
@media (min-width: 1080px) { .header-actions { display: flex; } }
.login-link {
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: rgba(255,255,255,.9); padding: 9px 18px; border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.login-link:hover { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.is-scrolled .login-link { color: var(--text-secondary); background: var(--surface); border-color: var(--border); }
.is-scrolled .login-link:hover { color: var(--text-strong); background: var(--surface-alt); border-color: var(--border-strong); }

.gs-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px;
  border-radius: var(--radius-md); border: none; cursor: pointer; font-family: inherit;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #fff 14%) 0%, var(--accent) 52%, var(--accent-hover) 100%);
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gs-btn:hover { transform: translateY(-1.5px); box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--accent) 68%, transparent), inset 0 1px 0 rgba(255,255,255,.4); }
.gs-btn:active { transform: translateY(0) scale(.99); }
.gs-btn .caret { width: 14px; height: 14px; opacity: .85; stroke-width: 2.6; transition: transform var(--dur) var(--ease); }
.nav-item.is-active .gs-btn .caret { transform: rotate(180deg); }

.burger { display: inline-flex; padding: 8px; border-radius: var(--radius-md); background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer; }
.is-scrolled .burger { background: var(--surface-alt); color: var(--text); }
@media (min-width: 1080px) { .burger { display: none; } }

/* ============================================================
   DROPDOWN SYSTEM — full container-width mega panels
   ============================================================ */
.dd {
  position: fixed; left: 50%; top: calc(var(--header-h) + 6px);
  width: min(1392px, calc(100vw - 48px));
  transform: translateX(-50%) translateY(8px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl);
  box-shadow: 0 30px 80px rgba(12,18,34,.22), 0 8px 22px rgba(12,18,34,.10);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 60; overflow: hidden;
  transition: opacity .22s var(--ease), transform .26s var(--ease-out), visibility .22s;
}
.dd.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dd::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }

/* shared building blocks -------------------------------------------------- */
.dd-h { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.mega-col { display: flex; flex-direction: column; min-width: 0; }
.mega-col--div { border-left: 1px solid var(--border); padding-left: 28px; }

/* simple icon + label link (name-only lists) */
.mlink { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); line-height: 1.25; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.mlink svg { width: 18px; height: 18px; stroke-width: 1.8; color: var(--accent); opacity: .8; flex: none; }
.mlink:hover { background: var(--accent-soft); color: var(--accent-hover); }
.mlink:hover svg { opacity: 1; }
.mlink--plain::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); flex: none; transition: background var(--dur) var(--ease); margin: 0 3px; }
.mlink--plain:hover::before { background: var(--accent); }

/* rich card: icon tile + title + description */
.mcard { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: var(--radius-lg); transition: background var(--dur) var(--ease); }
.mcard:hover { background: var(--accent-soft); }
.mcard__ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(160deg, #fff, var(--surface-alt)); border: 1px solid var(--border); color: var(--accent); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mcard__ico svg { width: 19px; height: 19px; stroke-width: 1.8; }
.mcard:hover .mcard__ico { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); box-shadow: 0 8px 18px -10px rgba(17,106,204,.6); }
.mcard__body { min-width: 0; }
.mcard__t { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.25; }
.mcard:hover .mcard__t { color: var(--accent-hover); }
.mcard__s { display: block; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-secondary); margin-top: 2px; }
.mcard__count { font-size: 10px; font-weight: var(--fw-bold); color: var(--text-muted); background: var(--surface-alt); border: 1px solid var(--border); padding: 0 6px; border-radius: var(--radius-pill); flex: none; }

/* footer CTA link */
.dd-all { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent); }
.dd-all svg { width: 16px; height: 16px; stroke-width: 2.2; transition: transform var(--dur) var(--ease); }
.dd-all:hover { color: var(--accent-hover); }
.dd-all:hover svg { transform: translateX(3px); }

/* navy promo / CTA card */
.mega-promo { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: 22px; color: #fff; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: linear-gradient(158deg, #0c1325 0%, #16243f 62%, #1b2f52 100%); }
.mega-promo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 200px at 100% -10%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 62%); }
.mega-promo > * { position: relative; z-index: 1; }
.mega-promo__eyebrow { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--navy-tint); margin-bottom: 8px; }
.mega-promo__t { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.2; }
.mega-promo__s { font-size: var(--fs-xs); line-height: 1.55; color: rgba(255,255,255,.72); margin-top: 8px; }
.mega-promo__cta { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 18px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: #fff; }
.mega-promo__cta svg { width: 16px; height: 16px; stroke-width: 2.2; transition: transform var(--dur) var(--ease); }
.mega-promo__cta:hover svg { transform: translateX(3px); }

/* ---- Services ---- */
.mega-svc { display: grid; grid-template-columns: 2.5fr 1.25fr 1.3fr; gap: 0 28px; padding: 28px 30px; }
.mega-svc__core { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px 6px; align-content: start; }
.mega-svc__paths { display: grid; grid-auto-rows: min-content; gap: 1px; }

/* ---- Tools ---- */
.mega-tools { padding: 24px 30px 28px; }
.mega-tools__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 15px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.mega-tools__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em; }
.mega-tools__sub { display: block; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); margin-top: 4px; max-width: 64ch; }
.mega-tools__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.tcard { display: flex; flex-direction: column; gap: 11px; padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.tcard:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 14px 30px -18px rgba(17,106,204,.55); transform: translateY(-2px); }
.tcard__ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(160deg, var(--accent-soft), #fff); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); color: var(--accent); }
.tcard__ico svg { width: 21px; height: 21px; stroke-width: 1.8; }
.tcard__t { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.25; }
.tcard__s { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-secondary); }

/* ---- Resources ---- */
.mega-res { display: grid; grid-template-columns: 1.2fr 1.05fr 1.05fr 1.35fr; gap: 0 28px; padding: 28px 30px; }

/* Featured card */
.feat-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; padding: 20px; border-radius: var(--radius-xl); border: 1px solid var(--border); background: linear-gradient(160deg, color-mix(in srgb, var(--accent-soft) 72%, #fff), #fff 72%); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.feat-card::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5; background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent) 0 1px, transparent 1px 13px); -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%); mask-image: linear-gradient(200deg, #000, transparent 60%); }
.feat-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 14px 30px -16px rgba(17,106,204,.5); }
.feat-card > * { position: relative; z-index: 1; }
.feat-card__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--border); color: var(--accent); box-shadow: var(--shadow-sm); }
.feat-card__ico svg { width: 23px; height: 23px; stroke-width: 1.6; }
.feat-card__t { display: block; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); }
.feat-card__s { display: block; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-secondary); margin-top: 2px; }
.feat-card__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent); }
.feat-card__go svg { width: 15px; height: 15px; stroke-width: 2.4; transition: transform var(--dur) var(--ease); }
.feat-card:hover .feat-card__go svg { transform: translateX(3px); }

/* ---- For Providers ---- */
.mega-prov { display: grid; grid-template-columns: 1.15fr 1.15fr 1.3fr; gap: 0 28px; padding: 28px 30px; }
.prov-note { position: relative; overflow: hidden; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 20px; border-radius: var(--radius-xl); background: var(--surface-alt); border: 1px dashed var(--border-strong); }
.prov-note__row { display: flex; align-items: center; gap: 11px; }
.prov-note__ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--navy-800); color: var(--navy-tint); }
.prov-note__ico svg { width: 19px; height: 19px; stroke-width: 1.8; }
.prov-note__tag { margin-left: auto; flex: none; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); padding: 3px 8px; border-radius: var(--radius-pill); }
.prov-note__t { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); margin-top: 12px; }
.prov-note__t b { color: var(--text-strong); font-weight: var(--fw-bold); }

/* ---- Get Started ---- */
.mega-gs { display: grid; grid-template-columns: 0.9fr 1.1fr 1.1fr; gap: 24px; padding: 24px 30px 26px; align-items: stretch; }
.gs-intro { display: flex; flex-direction: column; }
.gs-intro__label { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.gs-intro__t { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.15; color: var(--text-strong); }
.gs-intro__s { font-size: var(--fs-sm); line-height: 1.55; color: var(--text-secondary); margin-top: 10px; }
.gs-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.gs-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 16px 34px -18px rgba(17,106,204,.5); transform: translateY(-2px); }
.gs-card__ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; }
.gs-card__ico svg { width: 23px; height: 23px; stroke-width: 1.6; }
.gs-card__ico--blue { background: linear-gradient(158deg, color-mix(in srgb, var(--accent) 86%, #fff 14%) 0%, var(--accent) 52%, var(--accent-hover) 100%); color: #fff; box-shadow: 0 6px 15px rgba(17,106,204,.34), inset 0 1px 0 rgba(255,255,255,.45); }
.gs-card__ico--navy { background: linear-gradient(158deg, #2a3a58 0%, #1a2336 60%, #141c2c 100%); color: #d6e4ff; box-shadow: 0 6px 15px rgba(14,24,46,.32), inset 0 1px 0 rgba(255,255,255,.12); }
.gs-card__t { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); }
.gs-card__t svg { width: 18px; height: 18px; stroke-width: 2.2; color: var(--text-muted); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.gs-card:hover .gs-card__t svg { color: var(--accent); transform: translateX(3px); }
.gs-card__s { font-size: var(--fs-sm); line-height: 1.55; color: var(--text-secondary); }
.gs-howto { margin-top: auto; display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.gs-howto:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--accent-soft); box-shadow: 0 10px 22px -14px rgba(17,106,204,.5); }
.gs-howto__ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(160deg, #fff, var(--surface-alt)); border: 1px solid var(--border); color: var(--accent); transition: border-color var(--dur) var(--ease); }
.gs-howto:hover .gs-howto__ico { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.gs-howto__ico svg { width: 18px; height: 18px; stroke-width: 1.8; }
.gs-howto__body { flex: 1; min-width: 0; }
.gs-howto__t { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.gs-howto__s { display: block; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-secondary); margin-top: 1px; }
.gs-howto__arrow { flex: none; width: 16px; height: 16px; stroke-width: 2.2; color: var(--text-muted); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.gs-howto:hover .gs-howto__arrow { color: var(--accent); transform: translateX(3px); }


/* ============================================================
   MOBILE MENU
   ============================================================ */
/* The off-canvas panel is fixed + translateX(100%) when closed; on narrow
   viewports that off-screen box would extend the page's horizontal scroll
   width (~18px at 320px). Clip page-level horizontal overflow at the root so
   the closed menu never creates a scrollbar. `clip` (not `hidden`) is used so
   position:sticky ancestors keep working; wide content keeps its own
   `.tbl-wrap.responsive` / `overflow-x:auto` scroll containers. */
html { overflow-x: clip; }
.mobile { position: fixed; inset: 0; z-index: 90; background: var(--surface); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); display: flex; flex-direction: column; }
.mobile.is-open { transform: translateX(0); }
.mobile__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding-inline: 20px; border-bottom: 1px solid var(--border); flex: none; background: var(--surface); }
.mobile__top .brand__word { font-size: 24px; background-image: linear-gradient(177deg, #1b2a49 0%, #243657 52%, #324a72 100%); filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 1px 4px rgba(20,40,90,.16)); }
.mobile__top .brand__word b { background-image: linear-gradient(177deg, #3f93e6 0%, var(--accent) 60%, var(--accent-hover) 100%); }
.mobile__close { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; transition: all var(--dur) var(--ease); }
.mobile__close:hover { background: #fff; border-color: var(--border-strong); color: var(--text-strong); box-shadow: var(--shadow-sm); }
.mobile__body { flex: 1; overflow: hidden auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 14px 20px; }

/* nav shell */
.mm-nav { margin: 0; }
.mm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.mm-group { border-radius: 16px; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mm-group.is-open { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 80%, #fff) 0%, color-mix(in srgb, var(--tint) 45%, var(--surface)) 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, var(--border)); }

/* toggle */
.mm-toggle { display: flex; align-items: center; gap: 13px; width: 100%; padding: 11px 12px; border: 0; background: transparent; border-radius: 16px; font-family: inherit; font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text-strong); cursor: pointer; text-align: left; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.mm-toggle:hover { background: var(--accent-soft); color: var(--accent-hover); }
.mm-group.is-open > .mm-toggle { color: var(--accent-hover); }
.mm-ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #fff, var(--surface-alt)); border: 1px solid var(--border); color: var(--navy-700); transition: all var(--dur) var(--ease); }
.mm-ico svg { width: 19px; height: 19px; stroke-width: 1.8; }
.mm-toggle:hover .mm-ico, .mm-group.is-open > .mm-toggle .mm-ico { background: #fff; border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); color: var(--accent); box-shadow: 0 8px 18px -10px rgba(17,106,204,.6); }
.mm-label { flex: 1; min-width: 0; }
.mm-caret { width: 18px; height: 18px; flex: none; color: var(--text-muted); transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease); }
.mm-group.is-open > .mm-toggle .mm-caret { transform: rotate(180deg); color: var(--accent); }

/* collapsible panel — grid-rows animation, no JS measuring */
.mm-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.mm-group.is-open > .mm-panel { grid-template-rows: 1fr; }
.mm-panelin { overflow: hidden; min-height: 0; }
.mm-group:not(.is-open) > .mm-panel .mm-panelin { visibility: hidden; transition: visibility 0s var(--dur-slow); }
.mm-panelbody { padding: 2px 8px 12px 10px; }

/* grouped link lists */
.mm-eyebrow { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin: 10px 6px 4px; }
.mm-eyebrow:first-child { margin-top: 2px; }
.mm-links { list-style: none; margin: 0 0 2px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.mm-link { display: flex; align-items: center; padding: 9px 12px; border-radius: 10px; font-size: var(--fs-sm); color: var(--text-secondary); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mm-link:hover { background: #fff; color: var(--accent-hover); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, var(--border)); }

/* terminal browse-all link */
.mm-all { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 10px 13px; border-radius: 12px; background: #fff; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent-hover); box-shadow: 0 1px 2px rgba(16,32,64,.05); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mm-all svg { width: 17px; height: 17px; stroke-width: 2; transition: transform var(--dur) var(--ease); }
.mm-all:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 10px 22px -12px rgba(17,106,204,.5); }
.mm-all:hover svg { transform: translateX(3px); }

/* featured consultant mini-cards */
.mm-feat { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; }
.mm-feat-card { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; background: #fff; border: 1px solid color-mix(in srgb, var(--accent) 13%, var(--border)); box-shadow: 0 1px 2px rgba(16,32,64,.05); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.mm-feat-card:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); box-shadow: 0 12px 24px -16px rgba(17,106,204,.5); transform: translateY(-1px); }
.mm-feat-logo { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: var(--fw-bold); color: var(--accent); background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--accent-soft) 70%, #fff)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); }
.mm-feat-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.mm-feat-name { font-size: 13px; font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-feat-svc { font-size: 11.5px; color: var(--text-secondary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-verified { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: var(--fw-medium); color: var(--success-700); }
.mm-verified svg { width: 13px; height: 13px; }

/* provider note (logged-out For Providers) */
.mm-note { display: flex; align-items: flex-start; gap: 9px; margin: 10px 4px 2px; padding: 10px 12px; border-radius: 11px; background: var(--surface-alt); border: 1px solid var(--border); font-size: var(--fs-xs); line-height: 1.45; color: var(--text-secondary); }
.mm-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--navy-700); }
.mm-note b { color: var(--text-strong); font-weight: var(--fw-bold); }

/* bottom auth — logged-out login row */
.mobile__auth { flex: none; padding: 12px 14px 35px; }
.mm-login { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mm-login:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 10px 24px -14px rgba(17,106,204,.5); }
.mm-login__ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(160deg, #fff, var(--surface-alt)); border: 1px solid var(--border); color: var(--navy-700); transition: all var(--dur) var(--ease); }
.mm-login__ico svg { width: 19px; height: 19px; stroke-width: 1.8; }
.mm-login:hover .mm-login__ico { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); color: var(--accent); }
.mm-login__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mm-login__t b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.15; }
.mm-login__t span { font-size: 11.5px; color: var(--text-muted); line-height: 1.15; }
.mm-login__go { width: 18px; height: 18px; flex: none; color: var(--text-muted); stroke-width: 2; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.mm-login:hover .mm-login__go { transform: translateX(3px); color: var(--accent); }

/* bottom CTA area */
.mobile__cta { border-top: 1px solid var(--border); padding: 14px; display: flex; flex-direction: column; gap: 11px; flex: none; background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--tint) 55%, var(--surface)) 100%); }
.mm-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-cta-row .uaec-btn { width: 100%; min-width: 0; }
.mm-social { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mm-social a { height: 34px; width: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); transition: all var(--dur) var(--ease); }
.mm-social a:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); color: var(--accent); background: var(--accent-soft); }
.mm-social svg { width: 17px; height: 17px; }
.mm-social__sep { width: 1px; height: 20px; background: var(--border); flex: none; }
.mm-social__mail { width: auto !important; padding-inline: 13px; gap: 7px; font-size: 12px; font-weight: var(--fw-bold); }

.caret { transition: transform var(--dur) var(--ease); }

/* ============================================================
   REQUESTS DROPDOWN (compact 3-column mega)
   ============================================================ */
.dd--compact { width: min(920px, calc(100vw - 48px)); }
.mega-req { display: grid; grid-template-columns: 1.15fr 1.15fr 1.5fr 1.2fr; gap: 0 30px; padding: 28px 32px; }
.mega-req .mlink { padding: 8px 10px; }

/* latest-request mini cards */
.mega-req .req-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mega-req .req-card { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.mega-req .req-card:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.mega-req .req-card__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent-hover); }
.mega-req .req-card__badge--new { background: var(--success-50); color: var(--success-700); }
.mega-req .req-card__badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mega-req .req-card__t { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-req .req-card:hover .req-card__t { color: var(--accent-hover); }
.mega-req .req-card__s { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-req .req-card__meta { font-size: 11px; color: var(--text-muted); }
.mega-req .req-empty { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); font-size: var(--fs-sm); color: var(--text-secondary); }
.mega-req .req-empty a { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); color: var(--accent); }
.mega-req .req-empty a:hover { color: var(--accent-hover); }

/* mobile latest-request item */
.m-req { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; margin: 0 12px 8px; border: 1px solid var(--border); border-radius: 10px; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.m-req:hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.m-req__badge { align-self: flex-start; font-size: 9px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-hover); }
.m-req__t { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-strong); }
.m-req__meta { font-size: 11px; color: var(--text-muted); }

/* Requests promo — accent showpiece (scoped modifier) */
.mega-promo--req { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(158deg, #0c3a74 0%, #1360c4 52%, #2a7ff0 100%); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 26px 54px -22px rgba(17,106,204,.7), inset 0 1px 0 rgba(255,255,255,.28); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease); }
.mega-promo--req > * { position: relative; z-index: 1; }
.mega-promo--req::after { content: ""; position: absolute; z-index: 0; top: -38%; right: -30%; width: 82%; height: 92%; background: radial-gradient(circle, rgba(140,190,255,.75), transparent 62%); filter: blur(12px); animation: reqFloat 6s ease-in-out infinite; }
.mega-promo--req::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.3) 47%, rgba(255,255,255,.05) 53%, transparent 66%); background-size: 250% 100%; mix-blend-mode: screen; animation: reqSheen 5.5s ease-in-out infinite; }
.mega-promo--req:hover { transform: translateY(-3px); box-shadow: 0 34px 68px -22px rgba(17,106,204,.9), inset 0 1px 0 rgba(255,255,255,.32); }
.mega-promo__spark { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); margin-bottom: 14px; }
.mega-promo__spark svg { width: 20px; height: 20px; color: #fff; stroke-width: 1.9; }
.mega-promo--req .mega-promo__eyebrow { color: rgba(255,255,255,.85); }
.mega-promo--req .mega-promo__s { color: rgba(255,255,255,.88); }
.mega-promo--req .mega-promo__cta { color: #fff; }
.mega-promo--req .mega-promo__cta svg { transition: transform var(--dur) var(--ease); }
.mega-promo--req:hover .mega-promo__cta svg { transform: translateX(3px); }
@keyframes reqSheen { 0% { background-position: 150% 0; } 55%, 100% { background-position: -60% 0; } }
@keyframes reqFloat { 0%, 100% { transform: translate(0,0) scale(1); opacity: .7; } 50% { transform: translate(-8%,6%) scale(1.15); opacity: 1; } }

/* ============================================================
   CONSULTANTS DROPDOWN (compact 3-column)
   ============================================================ */
.mega-cons { display: grid; grid-template-columns: 1.15fr 1fr 1.5fr; gap: 0 36px; padding: 28px 36px; }
/* Featured Profiles — premium showcase lane (compact) */
.mega-cons .mega-col--featured { position: relative; margin: -10px -12px -10px 0; padding: 12px 12px 12px 14px; border-radius: var(--radius-xl); border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 45%, #fff) 0%, #fff 60%); }
.mega-cons .mega-col--featured.mega-col--div { border-left: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border)); }
.mega-cons .cons-subhead { margin: 3px 0 11px; font-size: 11px; line-height: 1.4; color: var(--text-muted); }
.mega-cons .cons-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.mega-cons .cons-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 5px; padding: 9px 11px; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--accent) 13%, var(--border)); background: linear-gradient(165deg, #fdfeff 0%, color-mix(in srgb, var(--accent-soft) 55%, #fff) 100%); box-shadow: 0 1px 2px rgba(16,32,64,.05), inset 0 1px 0 rgba(255,255,255,.9); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.mega-cons .cons-card::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent), transparent); opacity: .55; transition: opacity var(--dur) var(--ease); }
.mega-cons .cons-card:hover { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); box-shadow: 0 16px 30px -18px rgba(17,106,204,.5); transform: translateY(-2px); }
.mega-cons .cons-card:hover::before { opacity: 1; }
.mega-cons .cons-card__top { display: flex; align-items: center; gap: 9px; }
.mega-cons .cons-card__logo { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: var(--fw-bold); color: var(--accent); background: linear-gradient(160deg, #fff 0%, color-mix(in srgb, var(--accent-soft) 70%, #fff) 100%); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.mega-cons .cons-card:hover .cons-card__logo { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); color: var(--accent-hover); }
.mega-cons .cons-card__head { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.mega-cons .cons-card__name { font-size: 12.5px; font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.2; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-cons .cons-card:hover .cons-card__name { color: var(--accent-hover); }
.mega-cons .cons-card__svc { font-size: 11px; color: var(--text-secondary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-cons .cons-card__pill { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 5px; border-radius: var(--radius-pill); font-size: 8.5px; font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-hover); background: linear-gradient(180deg, #eaf3ff, #d7e8ff); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px -1px rgba(17,106,204,.35); }
.mega-cons .cons-card__pill svg { width: 8px; height: 8px; color: var(--accent); }
.mega-cons .cons-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 10.5px; font-weight: var(--fw-medium); color: var(--text-secondary); }
.mega-cons .cons-card__trust { display: inline-flex; align-items: center; gap: 4px; }
.mega-cons .cons-card__trust svg { width: 12px; height: 12px; color: var(--success-500); }
.mega-cons .cons-card__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }
.mega-cons .cons-card__stars { display: inline-flex; align-items: center; gap: 3px; color: var(--warning-500); }
.mega-cons .cons-card__stars svg { width: 10px; height: 10px; }
.mega-cons .cons-card__stars b { font-size: 10px; font-weight: var(--fw-bold); color: var(--text-secondary); }
.mega-cons .cons-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.mega-cons .cons-tag { display: inline-flex; padding: 1px 6px; line-height: 1.5; border-radius: 5px; font-size: 9.5px; font-weight: var(--fw-medium); color: var(--accent-hover); background: color-mix(in srgb, var(--accent-soft) 60%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border)); }
.mega-cons .cons-note { margin-top: 2px; font-size: 11px; color: var(--text-muted); }
.mega-cons .cons-note a { font-weight: var(--fw-bold); color: var(--accent); }
.mega-cons .cons-note a:hover { color: var(--accent-hover); }
.mega-cons .cons-empty { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); font-size: var(--fs-sm); color: var(--text-secondary); }
.mega-cons .cons-empty a { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .dd, .navlink .caret, .gs-btn, .m-link, .mobile { transition: none !important; }
  .mega-promo--req::before, .mega-promo--req::after { animation: none !important; }
}


/* ============================================================
   Sticky in-page subnav — horizontal scroll affordance
   (loaded on every page via header.css; markup lives on service
   pages as .subnav > .subnav__pills + .subnav__cta)
   ============================================================ */
.subnav__pills { flex: 1 1 auto; min-width: 0; }
.subnav__more { display: none; position: relative; z-index: 2; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--accent); cursor: pointer; box-shadow: 0 4px 12px -2px rgba(8,18,42,.2); transition: background .16s var(--ease, ease), color .16s var(--ease, ease), border-color .16s var(--ease, ease), transform .16s var(--ease, ease); }
.subnav__more svg { width: 17px; height: 17px; }
.subnav__more::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 46px; pointer-events: none; }
.subnav__more--next::before { right: 100%; background: linear-gradient(90deg, transparent, var(--surface) 82%); }
.subnav__more--prev::before { left: 100%; background: linear-gradient(270deg, transparent, var(--surface) 82%); }
.subnav__more:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.06); }
.subnav__more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.subnav.is-scrollable .subnav__more--next { display: inline-flex; }
.subnav.is-scrolled .subnav__more--prev { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .subnav__more { transition: none; } .subnav__more:hover { transform: none; } }

/* ---- logged-in header additions ---- */
/* ============================================================
   Emirae.Pro — Logged-in header, account menu & badge system.
   Extends the logged-out header kit (../emirae-header/header.css).
   Tokens & .uaec-* primitives come from the design system styles.css.
   Restyles the ALREADY-CODED logged-in structure (header.php branch on
   $uaec_is_logged_in): avatar + Dashboard dropdown, bell + inbox icons
   with live unread badges, role-specific links, Log Out.
   ============================================================ */

/* ============================================================
   RIGHT CLUSTER — logged-in (replaces Log In + Get Started)
   ============================================================ */
.header-account { display: flex; align-items: center; gap: 8px; }
/* Below the nav breakpoint the main nav + logged-out actions are hidden, so the
   masthead's space-between would strand the account cluster in the centre.
   Pin it hard-right so it sits right next to the burger. */
@media (max-width: 1079px) { .header-account { margin-left: auto; } }
/* Right cluster stays visible on mobile — bell, inbox & avatar remain reachable when signed in */
@media (max-width: 600px) {
  .header-account { gap: 6px; }
  .hdr-ico { width: 38px; height: 38px; }
  .hdr-ico svg { width: 18px; height: 18px; }
  .acc-trigger { height: 38px; padding: 0 4px; }
  .acc-avatar { width: 30px; height: 30px; }
}

/* --- Notification / inbox icon buttons --- */
.hdr-ico {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--radius-md); cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.9);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hdr-ico:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.hdr-ico svg { width: 20px; height: 20px; stroke-width: 1.8; }
.is-scrolled .hdr-ico { background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
.is-scrolled .hdr-ico:hover { background: var(--surface-alt); border-color: var(--border-strong); color: var(--text-strong); }

/* --- Unread badge (shared geometry) --- */
.ubadge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.02em;
  border-radius: var(--radius-pill); border: 2px solid var(--navy-800);
  transition: border-color var(--dur) var(--ease);
}
.is-scrolled .ubadge { border-color: var(--surface); }
/* Alerts = amber (calm, non-alarm). Inbox = brand blue. Distinct but consistent. */
.ubadge--alerts { background: var(--warning-500); color: #5a4409; }
.ubadge--inbox { background: var(--accent); color: #fff; }
.hdr-ico[data-count="0"] .ubadge { display: none; }

/* --- Account trigger chip (avatar + name + caret) --- */
.acc-item { position: relative; }
.acc-trigger {
  display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px 0 6px;
  border-radius: var(--radius-pill); cursor: pointer; font-family: inherit; max-width: 220px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.acc-trigger:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); }
.is-scrolled .acc-trigger { background: var(--surface); border-color: var(--border); }
.is-scrolled .acc-trigger:hover { background: var(--surface-alt); border-color: var(--border-strong); }
.acc-item.is-active .acc-trigger { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.is-scrolled .acc-item.is-active .acc-trigger { background: var(--surface-alt); border-color: var(--border-strong); }

.acc-avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: var(--fw-bold); letter-spacing: -0.01em; color: #fff;
  background: linear-gradient(158deg, #3f93e6 0%, var(--accent) 55%, var(--accent-hover) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px rgba(12,24,48,.35);
}
.acc-avatar--provider { background: linear-gradient(158deg, #2a3a58 0%, var(--navy-700) 55%, var(--navy-900) 100%); color: var(--navy-tint); }
.acc-avatar--admin { background: linear-gradient(158deg, #4b5563 0%, var(--gray-700) 55%, var(--gray-900) 100%); color: #fff; }
.acc-trigger__name {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; text-align: left;
}
.acc-trigger__n {
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: #fff; line-height: 1.1;
  max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-scrolled .acc-trigger__n { color: var(--text-strong); }
.acc-trigger__r {
  font-size: 10px; font-weight: var(--fw-medium); letter-spacing: .04em; text-transform: uppercase;
  color: rgba(179,206,226,.8); line-height: 1;
}
.is-scrolled .acc-trigger__r { color: var(--text-muted); }
.acc-trigger .caret { width: 14px; height: 14px; opacity: .6; stroke-width: 2.6; color: rgba(255,255,255,.85); transition: transform var(--dur) var(--ease); }
.is-scrolled .acc-trigger .caret { color: var(--text-muted); }
.acc-item.is-active .acc-trigger .caret { transform: rotate(180deg); }
@media (max-width: 1200px) { .acc-trigger__name { display: none; } .acc-trigger { padding: 0 6px; } }

/* ============================================================
   ACCOUNT DROPDOWN — compact premium product menu
   ============================================================ */
.acc-dd {
  position: absolute; right: 0; top: calc(100% + 12px); width: 312px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(12,18,34,.22), 0 6px 18px rgba(12,18,34,.08);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .24s var(--ease-out), visibility .2s;
  overflow: hidden;
}
.acc-item.is-active .acc-dd { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.acc-dd::before { content: ""; position: absolute; top: -12px; right: 0; left: 0; height: 12px; }

/* Static (review-board) render */
.acc-dd.is-static { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; width: 312px; box-shadow: var(--shadow-md); }

/* Mobile: the panel is anchored to the avatar near the right edge, so its fixed
   312px width overflowed off the LEFT edge on narrow phones (iPhone mini). Pin it
   to the viewport with small equal side gutters instead, so it stays on-screen and
   reads as centered. `position: fixed` keeps it viewport-relative; the top offset
   clears the sticky header (+ the WP admin bar when present). */
@media (max-width: 640px) {
  .acc-dd {
    position: fixed;
    left: 12px; right: 12px;
    top: calc(var(--header-h, 76px) + 8px);
    width: auto; max-width: 460px;
    margin-inline: auto;
  }
  body.admin-bar .acc-dd { top: calc(var(--header-h, 76px) + 8px + 46px); }
}
@media (max-width: 640px) and (min-width: 783px) {
  body.admin-bar .acc-dd { top: calc(var(--header-h, 76px) + 8px + 32px); }
}

/* --- Identity block --- */
.acc-id { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; }
.acc-id__av {
  flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  font-size: 17px; font-weight: var(--fw-bold); color: #fff;
  background: linear-gradient(158deg, #3f93e6 0%, var(--accent) 55%, var(--accent-hover) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px -3px rgba(17,106,204,.5);
}
.acc-id__av--provider { background: linear-gradient(158deg, #2a3a58 0%, var(--navy-700) 55%, var(--navy-900) 100%); color: var(--navy-tint); }
.acc-id__av--admin { background: linear-gradient(158deg, #4b5563 0%, var(--gray-700) 55%, var(--gray-900) 100%); }
.acc-id__t { min-width: 0; flex: 1; }
.acc-id__name { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-id__role { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; }

/* --- Status chip (provider approval) --- */
.acc-chiprow { padding: 0 16px 12px; }
.acc-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .01em; line-height: 1; white-space: nowrap;
}
.acc-chip svg { width: 13px; height: 13px; stroke-width: 2; flex: none; }
.acc-chip--approved { color: var(--success-700); background: var(--success-50); border: 1px solid color-mix(in srgb, var(--success-700) 22%, transparent); }
.acc-chip--pending { color: var(--warning-700); background: var(--warning-50); border: 1px solid color-mix(in srgb, var(--warning-700) 30%, transparent); }

/* --- Quick row: Inbox + Alerts --- */
.acc-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px 12px; }
.acc-tile {
  position: relative; display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.acc-tile:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--accent-soft); box-shadow: 0 8px 18px -12px rgba(17,106,204,.5); }
.acc-tile__ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(160deg, #fff, var(--surface-alt)); border: 1px solid var(--border); color: var(--navy-700); }
.acc-tile:hover .acc-tile__ic { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); }
.acc-tile__ic svg { width: 16px; height: 16px; stroke-width: 1.8; }
.acc-tile__lab { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acc-tile__k { font-size: 12.5px; font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.1; }
.acc-tile__v { font-size: 10.5px; color: var(--text-muted); line-height: 1; }
.acc-tile__badge {
  margin-left: auto; flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: var(--fw-bold); line-height: 1;
}
.acc-tile__badge--alerts { background: var(--warning-500); color: #5a4409; }
.acc-tile__badge--inbox { background: var(--accent); color: #fff; }
.acc-tile[data-count="0"] .acc-tile__badge { display: none; }
.acc-tile[data-count="0"] .acc-tile__v::after { content: "None unread"; }

/* --- Divider --- */
.acc-div { height: 1px; background: var(--border); margin: 2px 12px; }

/* --- Nav links --- */
.acc-nav { padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; }
.acc-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); line-height: 1.2;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.acc-link__ic { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: var(--text-muted); transition: color var(--dur) var(--ease); }
.acc-link__ic svg { width: 18px; height: 18px; stroke-width: 1.8; }
.acc-link:hover { background: var(--accent-soft); color: var(--accent-hover); }
.acc-link:hover .acc-link__ic { color: var(--accent); }
.acc-link__lab { flex: 1; min-width: 0; }
.acc-link__badge { flex: none; min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--fw-bold); }
.acc-link.is-primary { color: var(--text-strong); font-weight: var(--fw-bold); }
.acc-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* --- Footer / logout --- */
.acc-foot { padding: 6px 8px 10px; }
.acc-logout {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.acc-logout__ic { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: var(--text-muted); }
.acc-logout__ic svg { width: 18px; height: 18px; stroke-width: 1.8; }
.acc-logout:hover { background: var(--error-50); color: var(--error-700); }
.acc-logout:hover .acc-logout__ic { color: var(--error-500); }

/* ============================================================
   STAGE + ROLE / STATE SWITCHER
   ============================================================ */
.role-switch {
  position: sticky; top: 0; z-index: 120; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 12px 22px; background: color-mix(in srgb, var(--navy-900) 92%, #000); border-bottom: 1px solid rgba(255,255,255,.08);
}
.role-switch__grp { display: flex; align-items: center; gap: 8px; }
.role-switch__lab { font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: rgba(179,206,226,.65); }
.role-switch__seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--radius-pill); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.role-switch__btn {
  border: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: var(--fw-medium);
  color: rgba(255,255,255,.72); background: transparent; padding: 6px 13px; border-radius: var(--radius-pill); white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.role-switch__btn:hover { color: #fff; }
.role-switch__btn.is-on { background: var(--accent); color: #fff; box-shadow: 0 4px 12px -4px rgba(17,106,204,.7); }
.role-switch__btn--muted.is-on { background: rgba(255,255,255,.9); color: var(--navy-900); box-shadow: none; }
.role-switch__hint { margin-left: auto; font-size: 12px; color: rgba(255,255,255,.5); }
.role-switch__hint b { color: rgba(255,255,255,.82); font-weight: var(--fw-medium); }

/* Floating variant (used on in-context pages so the real header stays pristine) */
.role-switch--float {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  top: auto; width: auto; max-width: calc(100vw - 32px); flex-wrap: nowrap; overflow-x: auto;
  border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 60px -18px rgba(8,14,28,.7); padding: 10px 16px;
  background: color-mix(in srgb, var(--navy-900) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.role-switch--float .role-switch__hint { display: none; }
@media (max-width: 720px) { .role-switch--float { gap: 8px 12px; } }

/* Show/hide the right cluster by logged state */
.masthead[data-auth="out"] .header-account { display: none !important; }
.masthead[data-auth="in"] .header-actions { display: none !important; }
@media (min-width: 1080px) { .masthead[data-auth="in"] .header-account { display: flex; } }

/* ============================================================
   MOBILE DRAWER — signed-in footer
   Identity row (\u2192 Dashboard), paired CTAs on one line, Log Out.
   Replaces the logged-out Log In / Get Quotes block on auth pages.
   ============================================================ */
.m-account { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.m-account:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--accent-soft); }
.m-account__av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: var(--fw-bold); color: #fff; background: linear-gradient(158deg, #3f93e6 0%, var(--accent) 55%, var(--accent-hover) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px rgba(12,24,48,.35); }
.m-account__av--provider { background: linear-gradient(158deg, #2a3a58 0%, var(--navy-700) 55%, var(--navy-900) 100%); color: var(--navy-tint); }
.m-account__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-account__t b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.15; }
.m-account__t span { font-size: 11.5px; color: var(--text-muted); line-height: 1; }
.m-account__go { width: 18px; height: 18px; margin-left: auto; color: var(--text-muted); flex: none; stroke-width: 2; }
.mobile__cta--in { gap: 12px; }
.mobile__cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mobile__cta-row .uaec-btn { width: 100%; }
.m-logout { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 11px 16px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); border: 1px solid transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.m-logout svg { width: 18px; height: 18px; stroke-width: 1.9; }
.m-logout:hover { background: var(--error-50); color: var(--error-700, #b42318); }

.stage-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(1200px 600px at 78% -8%, color-mix(in srgb, var(--accent) 44%, transparent), transparent 60%), linear-gradient(168deg, var(--navy-900) 0%, var(--navy-800) 58%, #1b2f52 100%);
}
.stage-hero__copy { padding: 60px 0 96px; }
.stage-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--navy-tint); }
.stage-hero__eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.stage-hero h1 { color: #fff; font-size: clamp(30px, 4vw, 46px); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.08; margin: 16px 0 0; max-width: 20ch; }
.stage-hero p { color: rgba(255,255,255,.72); font-size: var(--fs-lg); line-height: 1.55; margin: 16px 0 0; max-width: 60ch; }

/* ============================================================
   REVIEW BOARD
   ============================================================ */
.rbx { background: var(--page); border-top: 1px solid var(--border); }
.rbx__head { padding: 56px 0 8px; }
.rbx__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); }
.rbx__eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.rbx__head h2 { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--text-strong); margin: 12px 0 0; }
.rbx__head p { font-size: var(--fs-body); line-height: 1.6; color: var(--text-secondary); margin: 10px 0 0; max-width: 78ch; }

.rbx-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); overflow: hidden; margin-top: 26px; }
.rbx-card__bar { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 22px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--surface), var(--gray-50)); }
.rbx-card__n { font-size: 12px; font-weight: var(--fw-bold); color: #fff; background: var(--navy-800); border-radius: var(--radius-sm); padding: 2px 8px; }
.rbx-card__t { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em; }
.rbx-card__meta { font-size: var(--fs-xs); color: var(--text-muted); }
.rbx-card__meta code { font-family: var(--font-mono); font-size: 11px; background: var(--surface-alt); padding: 1px 6px; border-radius: 5px; color: var(--text-secondary); }
.rbx-card__body { padding: 26px 22px; }

/* Panel gallery */
.acc-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: start; }
.acc-demo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.acc-demo__label { text-align: center; }
.acc-demo__label b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.acc-demo__label span { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

/* Header preview strips (light + dark) */
.hdr-preview { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); }
.hdr-preview + .hdr-preview { margin-top: 16px; }
.hdr-preview__cap { display: flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.hdr-preview__cap b { color: var(--text-strong); }
.hdr-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 22px; }
.hdr-strip--dark { background: linear-gradient(120deg, var(--navy-900), #1b2f52); }
.hdr-strip--light { background: var(--surface); }
.hdr-strip__brand { font-size: 20px; font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.hdr-strip--dark .hdr-strip__brand { color: #fff; }
.hdr-strip--dark .hdr-strip__brand b { color: #7db4ff; }
.hdr-strip--light .hdr-strip__brand { color: var(--navy-800); }
.hdr-strip--light .hdr-strip__brand b { color: var(--accent); }
.hdr-strip--light .hdr-ico { background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
.hdr-strip--light .ubadge { border-color: var(--surface); }
.hdr-strip--light .acc-trigger { background: var(--surface); border-color: var(--border); }
.hdr-strip--light .acc-trigger__n { color: var(--text-strong); }
.hdr-strip--light .acc-trigger__r { color: var(--text-muted); }
.hdr-strip--light .acc-trigger .caret { color: var(--text-muted); }
.hdr-strip__right { display: flex; align-items: center; gap: 8px; }

/* Badge matrix */
.badge-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.badge-cell { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: linear-gradient(120deg, var(--navy-900), #223a63); }
.badge-cell__row { display: flex; align-items: center; gap: 12px; }
.badge-cell__cap { text-align: center; }
.badge-cell__cap b { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: #fff; }
.badge-cell__cap span { display: block; font-size: 11px; color: rgba(255,255,255,.6); margin-top: 2px; }

/* Phone (mobile) frame */
.phone-wrap { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; justify-content: center; }
.phone {
  width: 340px; flex: none; border-radius: 38px; padding: 12px;
  background: linear-gradient(160deg, #2b3a58, #141c2c); box-shadow: 0 40px 80px -30px rgba(12,18,34,.6), inset 0 1px 0 rgba(255,255,255,.12);
}
.phone__screen { border-radius: 28px; overflow: hidden; background: var(--surface); height: 660px; position: relative; display: flex; flex-direction: column; }
.phone-note { max-width: 300px; }
.phone-note h4 { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); margin: 0 0 10px; }
.phone-note ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.phone-note li { position: relative; padding-left: 20px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); }
.phone-note li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.phone-note li b { color: var(--text-strong); font-weight: var(--fw-bold); }

/* Mobile top bar (inside phone) */
.mtop { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface); flex: none; }
.mtop__brand { font-size: 19px; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--navy-800); }
.mtop__brand b { color: var(--accent); }
.mtop__right { display: flex; align-items: center; gap: 6px; }
.mtop__ico { position: relative; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-secondary); }
.mtop__ico svg { width: 20px; height: 20px; stroke-width: 1.8; }
.mtop__ico .ubadge { border-color: var(--surface); }
.mtop__ico[data-count="0"] .ubadge { display: none; }

/* Mobile drawer account block (inside phone) */
.mdraw { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; }
.mdraw__acc { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-alt); border: 1px solid var(--border); }
.mdraw__av { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 18px; font-weight: var(--fw-bold); color: #fff; background: linear-gradient(158deg, #2a3a58, var(--navy-900)); }
.mdraw__t { min-width: 0; flex: 1; }
.mdraw__name { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdraw__role { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 1px; }
.mdraw__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.mdraw__accordions { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.mdraw__acci { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 12px; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-strong); }
.mdraw__acci svg.lead { width: 20px; height: 20px; color: var(--navy-700); stroke-width: 1.8; }
.mdraw__acci svg.trail { width: 18px; height: 18px; margin-left: auto; color: var(--text-muted); }
.mdraw__acci:hover { background: var(--accent-soft); }
.mdraw__seclab { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); padding: 12px 12px 6px; }

@media (prefers-reduced-motion: reduce) {
  .acc-dd, .acc-trigger .caret, .hdr-ico { transition: none !important; }
}

/* ============================================================
   FOR PROVIDERS — third-column role-aware account panel
   Replaces the disabled placeholder card for logged-in users.
   ============================================================ */
.prov-panel {
  display: flex; flex-direction: column; padding: 15px; border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  background: linear-gradient(168deg, color-mix(in srgb, var(--accent-soft) 74%, #fff) 0%, #fff 76%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 28px -20px rgba(17,106,204,.5);
}
.prov-panel__id { display: flex; align-items: center; gap: 11px; }
.prov-panel__av {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 15px; font-weight: var(--fw-bold); color: var(--navy-tint);
  background: linear-gradient(158deg, #2a3a58 0%, var(--navy-700) 55%, var(--navy-900) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px -4px rgba(12,24,48,.5);
}
.prov-panel__t { min-width: 0; flex: 1; }
.prov-panel__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prov-panel__chip {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .01em; line-height: 1.3; white-space: nowrap;
}
.prov-panel__chip svg { width: 11px; height: 11px; stroke-width: 2.2; flex: none; }
.prov-panel__chip.is-approved { color: var(--success-700); background: var(--success-50); border: 1px solid color-mix(in srgb, var(--success-700) 22%, transparent); }
.prov-panel__chip.is-pending { color: var(--warning-700); background: var(--warning-50); border: 1px solid color-mix(in srgb, var(--warning-700) 30%, transparent); }
.prov-panel__help { font-size: var(--fs-xs); line-height: 1.45; color: var(--text-secondary); margin: 12px 0 0; }

/* Primary dashboard row */
.prov-panel__primary {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-md);
  background: linear-gradient(158deg, color-mix(in srgb, var(--accent) 90%, #fff 10%), var(--accent) 55%, var(--accent-hover));
  color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.32);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.prov-panel__primary svg.lead { width: 17px; height: 17px; stroke-width: 1.9; flex: none; }
.prov-panel__primary .arw { width: 15px; height: 15px; stroke-width: 2.4; margin-left: auto; flex: none; transition: transform var(--dur) var(--ease); }
.prov-panel__primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--accent) 68%, transparent), inset 0 1px 0 rgba(255,255,255,.4); }
.prov-panel__primary:hover .arw { transform: translateX(3px); }

/* Secondary quick rows */
.prov-panel__rows { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
.prov-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); line-height: 1.2;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.prov-row__ic { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--text-muted); transition: color var(--dur) var(--ease); }
.prov-row__ic svg { width: 17px; height: 17px; stroke-width: 1.8; }
.prov-row__lab { flex: 1; min-width: 0; }
.prov-row__badge { flex: none; min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--fw-bold); background: var(--accent); color: #fff; }
.prov-row__arw { flex: none; width: 15px; height: 15px; stroke-width: 2.2; color: var(--text-muted); opacity: .5; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.prov-row:hover { background: color-mix(in srgb, var(--accent-soft) 70%, #fff); color: var(--accent-hover); }
.prov-row:hover .prov-row__ic { color: var(--accent); }
.prov-row:hover .prov-row__arw { opacity: 1; transform: translateX(3px); color: var(--accent); }

/* Become-a-provider (non-provider) variant */
.prov-panel__jtitle { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em; line-height: 1.25; margin: 2px 0 0; }
.prov-panel__jtext { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-secondary); margin: 7px 0 0; }
.prov-panel__benefits { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.prov-panel__benefits li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text); }
.prov-panel__benefits svg { flex: none; width: 15px; height: 15px; stroke-width: 2.2; color: var(--accent); }
.prov-panel__jcta { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.prov-panel__jprimary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-md);
  background: linear-gradient(158deg, color-mix(in srgb, var(--accent) 90%, #fff 10%), var(--accent) 55%, var(--accent-hover));
  color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.32);
  transition: transform var(--dur) var(--ease); 
}
.prov-panel__jprimary:hover { transform: translateY(-1px); }
.prov-panel__jsecondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent); }
.prov-panel__jsecondary svg { width: 14px; height: 14px; stroke-width: 2.4; flex: none; }
.prov-panel__jsecondary:hover { color: var(--accent-hover); }

/* Mobile provider group inside For Providers accordion */
.m-prov-h { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); padding: 14px 12px 4px; }


/* ============================================================
   MOBILE DRAWER — logged-in account block (premium redesign)
   ============================================================ */
.mm-acct { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(180deg, #fff, var(--surface-alt)); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mm-acct:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--accent-soft); box-shadow: 0 10px 24px -14px rgba(17,106,204,.5); }
.mm-acct__av { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 15px; font-weight: var(--fw-bold); color: #fff; background: linear-gradient(158deg, #3f93e6, var(--accent-hover)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.mm-acct__av--provider { background: linear-gradient(158deg, #2a3a58 0%, var(--navy-700) 55%, var(--navy-900) 100%); color: var(--navy-tint); }
.mm-acct__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mm-acct__t b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-acct__t span { font-size: 11.5px; color: var(--text-muted); line-height: 1.15; }
.mm-acct__go { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); transition: all var(--dur) var(--ease); }
.mm-acct__go svg { width: 17px; height: 17px; stroke-width: 2; }
.mm-acct:hover .mm-acct__go { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); color: var(--accent); }
.mm-logout { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 11px 16px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); border: 1px solid var(--border); background: var(--surface); transition: all var(--dur) var(--ease); }
.mm-logout svg { width: 18px; height: 18px; stroke-width: 1.9; }
.mm-logout:hover { background: var(--error-50); border-color: color-mix(in srgb, var(--error-500, #f04438) 30%, var(--border)); color: var(--error-700, #b42318); }
.mm-prov-h { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); margin: 10px 6px 4px; }

/* Guaranteed sticky positioning for the masthead (id specificity, ASCII-safe).
   Defensive: some parsers dropped the leading .masthead rule.
   No layout border-bottom: it would make the box 77px vs the hero's -76px
   pull-up, leaving a 1px page-background line under the header. The scrolled
   hairline is drawn with box-shadow instead (no layout impact, no CLS). */
#masthead.masthead { position: sticky; top: 0; z-index: 50; border-bottom: 0; }
#masthead.masthead:not(.is-scrolled) { background: transparent; box-shadow: none; }
#masthead.masthead.is-scrolled { box-shadow: 0 1px 0 0 var(--border), var(--shadow-sm); }