/* ========================================================================== */
/*  Global Theme Tokens + Header Integrations                                 */
/* ========================================================================== */

/* Enable OS color-scheme hints for form controls, etc. */
:root {
  color-scheme: light dark;

  /* Core theme */
  --nav-bg: #161619;
  --nav-link-color: #d6d6d6;
  --nav-mega-link-color: #e8e8ed;
  --nav-mega-h4-color: #86868a;
  --bg-color: #0e1114;
  --text-color: #fff;
  --button-bg: #fff;
  --button-text: #1d1d1f;
  --panel-bg: #1c1c1e;
  --text-subtle-color: #d0d0d0;

  /* Pegesis global nav sizing + rhythm */
  --r-globalnav-font-size: 12px;
  --mega-letterspacing: -0.022em;

  /* === Header & flyout alignment === */
  --header-max: 1400px;        /* MUST match .header-inner max-width */
  --logo-left: 1.5rem;         /* MUST match .logo { left: ... } */

  /* Align to the actual logo image (img.img-logo) */
  --logo-img-width: 28px;      /* rendered width of the logo image */
  --logo-img-gap: 12px;        /* space between logo image and column 1 */
  --flyout-align-offset: 0px;  /* extra nudge if needed */

  /* === Flyout geometry (layout) === */
  --peg-col-min: 208px; /* min width for cols 2/3 */
  --peg-col-pad-x: 0px;
  --peg-col-pad-y: 10px;

  /* === Fixed gutters (IDENTICAL rhythm, now HALVED) ===
     Column 1 → 2 total gap = 42px  (was 84px)
     Column 2 ↔ 3 gap       = 22px  (was 44px)                                  */
  --peg-col-gap: 22px;           /* 2 ↔ 3 */
  --peg-feature-gap-total: 42px; /* 1 → 2 */
  --peg-feature-extra-after-col1: calc(var(--peg-feature-gap-total) - var(--peg-col-gap)); /* 20px */

  /* Typography tokens for flyout (cols 2/3) */
  --peg-mega-sublink-size: 12px;
  --peg-mega-sublink-weight: 700;
  --peg-mega-sublink-line: 1.3333333;
  --peg-mega-sublink-track: -0.01em;

  --peg-mega-header-size: 12px;
  --peg-mega-header-weight: 400;
  --peg-mega-header-line: 1.2;
  --peg-mega-header-track: 0.012em;

  --peg-gap-header-to-first: 20px;
  --peg-gap-link-to-link: 6px;

  /* Feature column (first) */
  --peg-feature-col-min: 256px;
  --peg-feature-header-size: 12px;
  --peg-feature-header-weight: 400;
  --peg-feature-header-line: 1.2;
  --peg-feature-header-track: 0.012em;

  /* Pegesis-style big feature links (column 1) */
  --peg-feature-link-size: 20px;
  --peg-feature-link-weight: 700;
  --peg-feature-link-line: 1.25;
  --peg-feature-link-track: -0.012em;
  --peg-feature-gap-header-to-first: 14px;
  --peg-feature-gap-link-to-link: 10px;

  /* ================= Header-scoped “mega panel” tuning =================== */
  /* Spacing tuned to match Pegesis's “Explore / Shop / More” rhythm */
  --mega-col-pad-x: 32px;
  --mega-col-pad-y: 24px;
  --mega-gap-title-first: 16px;  /* title → first sublink (header scope) */
  --mega-gap-links: 10px;        /* sublink → sublink (header scope) */
  --mega-title-size: 14px;
  --mega-title-weight: 500;
  --mega-link-size-min: 16px;
  --mega-link-size-max: 20px;
  --mega-link-weight: 700;
  --mega-line: 1.35;             /* header-specific sublink leading */

  /* Title/link colors by theme */
  --mega-title-color-light: rgba(0,0,0,.6);
  --mega-title-color-dark:  rgba(255,255,255,.55);
  --mega-link-color-light:  rgba(0,0,0,.92);
  --mega-link-color-dark:   rgba(255,255,255,.92);

  /* Hover colors:
     - Light theme: Pegesis medium gray (#6e6e73)
     - Dark theme:  Pure white (#fff) */
  --mega-link-color-hover-light: #6e6e73;
  --mega-link-color-hover-dark:  #ffffff;

  /* Motion */
  --hover-transition: color 120ms ease;
}

/* ========================================================================== */
/*  Light Mode Overrides                                                      */
/* ========================================================================== */

html.light {
  --nav-bg: #fbfbfd;
  --nav-link-color: #393939;
  --nav-mega-link-color: #333335;
  --nav-mega-h4-color: #6e6e72;
  --bg-color: #ffffff;
  --text-color: #1d1d1f;
  --button-bg: #000000;
  --button-text: #ffffff;
  --panel-bg: #ffffff;
  --text-subtle-color: #3a3a3c;
}

/* ========================================================================== */
/*  Page Base                                                                 */
/* ========================================================================== */

html.theme-fade {
  opacity: 0;
  transition: opacity 0.4s ease;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  transition: background-color 0.6s, color 0.6s;
  overflow-x: hidden;
}

/* ========================================================================== */
/*  Header                                                                    */
/* ========================================================================== */

header {
  position: fixed;
  inset: 0 0 auto 0;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.header-inner {
  max-width: var(--header-max);
  margin: 0 auto;
  height: 44px;
  position: relative;
  z-index: 1000;
}

/* ---------- Theme-aware logo swapping (scoped to #header) ---------- */

#header .logo-img {
  display: none;
  height: 28px;
  width: auto;
  vertical-align: middle;
}

/* 1) OS fallback: default LIGHT; swap to DARK with prefers-dark */
#header .logo-img[data-theme="light"] { display: inline-block; }

@media (prefers-color-scheme: dark) {
  #header .logo-img[data-theme="light"] { display: none; }
  #header .logo-img[data-theme="dark"]  { display: inline-block; }
}

/* 2) App-enforced theme (authoritative) */
html[data-theme="light"]  #header .logo-img,
html.light                #header .logo-img,
body.light                #header .logo-img { display: none !important; }

html[data-theme="light"]  #header .logo-img[data-theme="light"],
html.light                #header .logo-img[data-theme="light"],
body.light                #header .logo-img[data-theme="light"] { display: inline-block !important; }

html[data-theme="dark"]   #header .logo-img,
html.dark                 #header .logo-img,
body.dark                 #header .logo-img { display: none !important; }

html[data-theme="dark"]   #header .logo-img[data-theme="dark"],
html.dark                 #header .logo-img[data-theme="dark"],
body.dark                 #header .logo-img[data-theme="dark"] { display: inline-block !important; }

/* Logo container */

.logo {
  position: absolute;
  left: var(--logo-left);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  z-index: 1001;
}

.logo img { height: 28px; }

.logo-text {
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--text-color);
}

/* Navbar links (desktop) */

.nav-links {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-links a {
  color: var(--nav-link-color);
  text-decoration: none;
  font-size: 0.73rem;
  font-weight: 400;
  letter-spacing: -0.12px;
  white-space: nowrap;
  transition: var(--hover-transition);
}

.nav-links a:hover { color: #666; }

/* ========================================================================== */
/*  Mega Dropdown                                                             */
/* ========================================================================== */

.mega-dropdown {
  position: fixed;
  top: 44px;
  left: 0;
  width: 100%;
  background: var(--nav-bg);
  z-index: 999;
  overflow: hidden;
  max-height: 0;
  transform: translateY(-20px);
  transition: max-height 0.5s, transform 0.5s;
}

.mega-dropdown.open {
  max-height: 500px;
  transform: translateY(0);
}

/* Left-align to LOGO IMAGE & FIXED gutters (resizes perfectly with header) */

.mega-dropdown-inner {
  max-width: var(--header-max);
  margin: 0 auto; /* mirror header centering */
  padding: 2rem 2rem 3rem;

  /* place column 1 exactly under the logo image, not container */
  padding-left: calc(
    var(--logo-left) + var(--logo-img-width) + var(--logo-img-gap) + var(--flyout-align-offset)
  );

  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: var(--peg-col-gap) !important; /* EXACT 22px between column 2 and 3 */
  justify-content: start;
  align-items: start;
}

/* Columns (generic baseline) */

.mega-dropdown .column {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: var(--peg-col-min) !important;
  padding: var(--peg-col-pad-y) var(--peg-col-pad-x) !important;
  width: max-content;
  white-space: nowrap;
}

/* First column: wider + EXTRA margin so 1→2 = 42px (42 − 22 = 20px extra) */

.mega-dropdown .column:first-child {
  min-width: var(--peg-feature-col-min) !important;
  margin-right: var(--peg-feature-extra-after-col1) !important; /* 20px extra ⇒ total 42px */
}

/* Headings for all columns (Pegesis-like micro label) */

.mega-dropdown h4 {
  margin: 0 !important;
  color: var(--nav-mega-h4-color) !important;
  font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-size: var(--peg-mega-header-size) !important;
  font-weight: var(--peg-mega-header-weight) !important;
  line-height: var(--peg-mega-header-line) !important;
  letter-spacing: var(--peg-mega-header-track) !important;
  -webkit-font-smoothing: antialiased;
}

/* Default sublinks (columns 2/3) */

.mega-dropdown .column h4 + a { margin-top: var(--peg-gap-header-to-first) !important; }
.mega-dropdown .column a + a  { margin-top: var(--peg-gap-link-to-link) !important; }

/* THEME-AWARE link/title colors inside dropdown */
.mega-dropdown a {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-size: var(--peg-mega-sublink-size) !important;
  font-weight: var(--peg-mega-sublink-weight) !important;
  line-height: var(--peg-mega-sublink-line) !important;
  letter-spacing: var(--peg-mega-sublink-track) !important;
  -webkit-font-smoothing: antialiased;
  color: var(--mega-link-color-light);  /* default for light */
  transition: var(--hover-transition);
  -webkit-tap-highlight-color: transparent;
}

html.light .mega-dropdown a,
body.light .mega-dropdown a { color: var(--mega-link-color-light) !important; }
html.dark  .mega-dropdown a,
body.dark  .mega-dropdown a { color: var(--mega-link-color-dark)  !important; }

html.light .mega-dropdown h4,
body.light .mega-dropdown h4 { color: var(--mega-title-color-light) !important; }
html.dark  .mega-dropdown h4,
body.dark  .mega-dropdown h4 { color: var(--mega-title-color-dark)  !important; }

/* ========================= */
/*  Pegesis-style hover colors */
/* ========================= */

/* Light = Pegesis gray; Dark = white.
   Use !important and webkit text fill to beat any injected styles. */
html.light .mega-dropdown a:hover,
html.light .mega-dropdown a:focus-visible,
body.light  .mega-dropdown a:hover,
body.light  .mega-dropdown a:focus-visible {
  color: var(--mega-link-color-hover-light) !important; /* #6e6e73 */
  -webkit-text-fill-color: var(--mega-link-color-hover-light) !important;
}

html.dark  .mega-dropdown a:hover,
html.dark  .mega-dropdown a:focus-visible,
body.dark   .mega-dropdown a:hover,
body.dark   .mega-dropdown a:focus-visible {
  color: var(--mega-link-color-hover-dark) !important;  /* #fff */
  -webkit-text-fill-color: var(--mega-link-color-hover-dark) !important;
}

/* ======================= */
/*  FIRST COLUMN — EXACT   */
/*  Pegesis promo stack      */
/* ======================= */

.mega-dropdown .column:first-child h4 {
  font-size: var(--peg-feature-header-size) !important;
  font-weight: var(--peg-feature-header-weight) !important;
  line-height: var(--peg-feature-header-line) !important;
  letter-spacing: var(--peg-feature-header-track) !important;
}

/* Title → first big link spacing */
.mega-dropdown .column:first-child h4 + a {
  margin-top: var(--peg-feature-gap-header-to-first) !important;
}

/* Big bold links (Explore, MacBook Air, …) */
.mega-dropdown .column:first-child a {
  font-size: var(--peg-feature-link-size) !important;
  font-weight: var(--peg-feature-link-weight) !important;
  line-height: var(--peg-feature-link-line) !important;
  letter-spacing: var(--peg-feature-link-track) !important;
  transition: var(--hover-transition);
}

/* Big link → big link spacing */
.mega-dropdown .column:first-child a + a {
  margin-top: var(--peg-feature-gap-link-to-link) !important;
}

/* Optional: subtle mini-links under big list (e.g., Compare/Switch) */
.mega-dropdown .column:first-child .feature-subtle {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.33 !important;
  letter-spacing: -0.01em !important;
  opacity: 0.9;
  color: var(--nav-mega-link-color);
  margin-top: 12px !important;
  transition: var(--hover-transition);
}

html.light .mega-dropdown .column:first-child a:hover,
html.light .mega-dropdown .column:first-child a:focus-visible {
  color: var(--mega-link-color-hover-light) !important;
  -webkit-text-fill-color: var(--mega-link-color-hover-light) !important;
}
html.dark .mega-dropdown .column:first-child a:hover,
html.dark .mega-dropdown .column:first-child a:focus-visible {
  color: var(--mega-link-color-hover-dark) !important;
  -webkit-text-fill-color: var(--mega-link-color-hover-dark) !important;
}

html.light .mega-dropdown .column:first-child .feature-subtle:hover,
html.light .mega-dropdown .column:first-child .feature-subtle:focus-visible {
  color: var(--mega-link-color-hover-light) !important;
  -webkit-text-fill-color: var(--mega-link-color-hover-light) !important;
}
html.dark .mega-dropdown .column:first-child .feature-subtle:hover,
html.dark .mega-dropdown .column:first-child .feature-subtle:focus-visible {
  color: var(--mega-link-color-hover-dark) !important;
  -webkit-text-fill-color: var(--mega-link-color-hover-dark) !important;
}

/* ========================================================================== */
/*  #header-scoped “MEGA PANEL” Pegesis-style padding + responsive sizes        */
/* ========================================================================== */

#header .mega-dropdown .column {
  padding: var(--mega-col-pad-y) var(--mega-col-pad-x);
  min-width: 240px; /* readable like Pegesis */
}

#header .mega-dropdown .column h4 {
  margin: 0;
  font-size: var(--mega-title-size);
  font-weight: var(--mega-title-weight);
  letter-spacing: 0.0125em;
  line-height: 1.2;
  color: var(--mega-title-color-light);
}

@media (prefers-color-scheme: dark) {
  #header .mega-dropdown .column h4 { color: var(--mega-title-color-dark); }
}

#header .mega-dropdown .column a {
  display: block;
  text-decoration: none;
  font-weight: var(--mega-link-weight);
  font-size: clamp(var(--mega-link-size-min), 1.35vw, var(--mega-link-size-max));
  line-height: var(--mega-line);
  color: var(--mega-link-color-light);
  margin: 0;
  transition: var(--hover-transition);
}

@media (prefers-color-scheme: dark) {
  #header .mega-dropdown .column a { color: var(--mega-link-color-dark); }
}

/* spacing rules are fine */
#header .mega-dropdown .column h4 + a { margin-top: var(--mega-gap-title-first); }
#header .mega-dropdown .column a + a  { margin-top: var(--mega-gap-links); }

/* ========================================================================== */
/*  Force-win hover (beats JS-injected #dropdownPanel/#dropdownContent rules) */
/* ========================================================================== */

html.light #header #dropdownPanel a:hover,
html.light #header #dropdownPanel a:focus-visible,
html.light #header #dropdownContent a:hover,
html.light #header #dropdownContent a:focus-visible {
  color: var(--mega-link-color-hover-light) !important;
  -webkit-text-fill-color: var(--mega-link-color-hover-light) !important;
}

html.dark #header #dropdownPanel a:hover,
html.dark #header #dropdownPanel a:focus-visible,
html.dark #header #dropdownContent a:hover,
html.dark #header #dropdownContent a:focus-visible {
  color: var(--mega-link-color-hover-dark) !important;
  -webkit-text-fill-color: var(--mega-link-color-hover-dark) !important;
}

/* ========================================================================== */
/*  Theme Toggle                                                              */
/* ========================================================================== */

.theme-toggle {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  margin-left: auto;
  cursor: pointer;
}

.theme-icon-wrapper { position: relative; width: 18px; height: 18px; }

.theme-icon {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  transition: opacity 0.4s, filter 0.4s;
  filter: invert(100%) brightness(200%) saturate(0%);
  opacity: 1;
  pointer-events: none;
}

html.light .theme-icon { filter: invert(0%) brightness(20%) saturate(200%); }

.theme-icon.sun  { opacity: 1; }
.theme-icon.moon { opacity: 0; }
html.light .theme-icon.sun  { opacity: 0; }
html.light .theme-icon.moon { opacity: 1; }

/* ========================================================================== */
/*  Burger & Mobile Menu                                                      */
/* ========================================================================== */

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
}

.burger div {
  width: 20px;
  height: 2px;
  background: var(--text-color);
  margin: 4px 0;
  transition: 0.4s;
}

.burger.open .line1 { transform: rotate(45deg) translate(5px, 5px); }
.burger.open .line2 { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg-color);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  z-index: 998;
}

.mobile-menu.open { opacity: 1; visibility: visible; }

.mobile-menu a {
  color: var(--nav-mega-link-color);
  text-decoration: none;
  font-size: 1.5rem;
  margin: 1rem 0;
  font-weight: 600;
}

/* ========================================================================== */
/*  Sections / Content                                                        */
/* ========================================================================== */

h1 { font-size: 3rem; font-weight: 600; color: var(--text-color); }

p  { font-size: 1.25rem; line-height: 1.6; margin: 1.5rem 0 2rem; color: var(--text-subtle-color); }

.cta-button {
  padding: 14px 38px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-text);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .burger    { display: flex; }
  .theme-toggle { right: 3.5rem; }
}

#mainContent.blur-bg { position: relative; }

#mainContent.blur-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  backdrop-filter: blur(18px) brightness(0.96);
  -webkit-backdrop-filter: blur(18px) brightness(0.96);
  transition: backdrop-filter 0.3s cubic-bezier(.6,.2,.4,1);
}

.section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
  position: relative;
  transition: all 0.5s;
  box-sizing: border-box;
  background: var(--panel-bg);
  color: var(--text-color);
  box-shadow: none;
}

.section.light,
.section.centered-box,
.section.light.centered-box {
  background: #fff !important;
  color: #1d1d1f !important;
  box-shadow: none !important;
  --text-color: #1d1d1f;
  --text-subtle-color: #6e6e73;
  --button-bg: #1d1d1f;
  --button-text: #fff;
}

.section.dark {
  background: #1c1c1e !important;
  color: #fff !important;
  box-shadow: none !important;
  --text-color: #f5f5f7;
  --text-subtle-color: #86868b;
  --button-bg: #fff;
  --button-text: #1d1d1f;
}

.section *,
.section.centered-box * { background: transparent !important; }

.section.centered-box,
.section.scaled-down {
  background: #fff !important;
  color: #1d1d1f !important;
  border-radius: 28px;
  box-shadow: 0 0 48px rgba(0,0,0,.08);
  transition: all 0.4s;
  overflow: visible;
  --text-color: #1d1d1f;
  --text-subtle-color: #6e6e73;
  --button-bg: #1d1d1f;
  --button-text: #fff;
}

.section.dark.centered-box,
.section.dark.scaled-down {
  background: #1c1c1e !important;
  color: #fff !important;
  --text-color: #f5f5f7;
  --text-subtle-color: #86868b;
  --button-bg: #fff;
  --button-text: #1d1d1f;
}

.section.fullscreen { min-height: 100vh; height: 100dvh; }
.section.fullwidth  { width: 100vw;  min-height: 60vh;  }

.section.scaling {
  min-height: 100vh;
  height: 100vh;
  transform: scale(1);
  border-radius: 0;
  transition: transform .5s, border-radius .5s;
}

.section.left-align  { justify-content: flex-start; text-align: left; }
.section.right-align { justify-content: flex-end;   text-align: right; }
.section.center-align{ justify-content: center;     text-align: center; }

.section .content { max-width: 840px; padding: 2rem; box-sizing: border-box; }

.section h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
  color: var(--text-color);
}

.section p,
.section .subtitle {
  font-size: 1.2rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  color: var(--text-subtle-color);
}

.section .cta-button {
  padding: 14px 40px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-text);
  cursor: pointer;
  transition: background .3s, color .3s;
}

/* Light/dark panel tokens for sections (convenience) */
:root      { --panel-bg: #1c1c1e; --text-subtle-color: #d0d0d0; }
html.light { --panel-bg: #fff;    --text-subtle-color: #3a3a3c;   }
html:not(.light) { --panel-bg: #1c1c1e; --text-subtle-color: #d0d0d0; }

/* Responsive section typography */
@media (max-width: 768px) {
  .section { padding: 4rem 1.5rem; }
  .section .content { padding: 1.5rem 1rem; }
  .section h1 { font-size: 2rem; }
  .section p,
  .section .subtitle { font-size: 1rem; }
}

/* ========================================================================== */
/*  Mobile hero title gutters & Apple-like treatment (integrated)             */
/* ========================================================================== */

/* Page-edge gutter token for small screens */
:root{
  --page-gutter: clamp(16px, 4vw, 28px);
}

/* Apply gutters and text rhythm for the hero on small screens */
@media (max-width: 734px){
  .agents-hero .mf-container,
  .agents-hero .mf-hero,
  .agents-hero .mf-hero-media{
    padding-inline: calc(var(--page-gutter) + env(safe-area-inset-left))
                    calc(var(--page-gutter) + env(safe-area-inset-right));
    box-sizing: border-box;
  }

  .mf-hero-title{
    margin: 0;
    padding-inline: 0;        /* container provides gutters */
    max-width: 28ch;          /* comfortable line length */
    text-wrap: balance;       /* improved line breaks */
    line-height: 1.06;        /* tight Apple-like leading */
    letter-spacing: -0.02em;  /* slight negative tracking */
    font-size: clamp(2rem, 7.2vw, 2.4rem);
    font-weight: 700;
  }

  .mf-lede{
    max-width: 36ch;
    text-wrap: pretty;
  }
}

/* Extra gutter on very small devices */
@media (max-width: 380px){
  :root{ --page-gutter: clamp(18px, 6vw, 32px); }
}

/* Keep media edge-to-edge while text aligns to gutters */
.agents-hero .mf-hero-media{
  margin-inline: calc(-1 * (var(--page-gutter) + env(safe-area-inset-left)))
                 calc(-1 * (var(--page-gutter) + env(safe-area-inset-right)));
}

/* =================== VALIDATION CHECK (comment, not code) ===================
 - First column aligns under the *logo image* via:
     .mega-dropdown-inner { padding-left: calc(var(--logo-left) + var(--logo-img-width) + var(--logo-img-gap) + var(--flyout-align-offset)); }
 - Column 1→2 fixed to 42px using:
     --peg-feature-extra-after-col1 (20px) + column-gap (22px) = 42px.
 - Column 2↔3 fixed to EXACT 22px via:
     column-gap: var(--peg-col-gap).
 - Hover behavior now: light = #6e6e73, dark = #fff. Safari-safe via
   -webkit-text-fill-color, and hard overrides defeat JS-injected rules.
============================================================================= */