/* =========================================================================
   Site header (src/header.html + gable/header.js). Replaces Beaver Builder header template 2700.
   ≥1200: one bar, dropdown panels (Features = four-column mega panel). <1200: logo + Sign Up + menu button,
   the same menu opens as a drawer with accordion sections. Menu markup is WordPress's "main-header" menu, so the
   editor classes (mega-menu, category-button, right-align, *-button) drive the layout.
   Scoped as `.fl-page .ph-header …` / `body .ph-header …` where the theme skin would otherwise win.
   ========================================================================= */
.ph-header {
  --ph-ink: #1c2737;
  --ph-muted: #5b6b82;      /* 5.3:1 on white */
  --ph-line: #e3e9f2;
  --ph-blue: #2256d3;
  --ph-blue-dark: #2246ab;
  --ph-tint: #eff7ff;
  --ph-tint-2: #dcebfd;
  --ph-logo: #2a6be6;      /* primary-base */
  --ph-bar-h: 80px;
  --ph-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E"); /* ph:arrow-right (bold) */
  --ph-top: var(--wp-admin--admin-bar--height, 0px);
  position: sticky; top: var(--ph-top); z-index: 1000;
  font-family: "Proxima Nova", "proxima-nova", system-ui, sans-serif; font-size: 16px; line-height: 1.4; color: var(--ph-ink);
  background: rgba(255, 255, 255, 0); transition: background-color .2s, box-shadow .2s;
}
.ph-header.is-scrolled, .ph-header.is-open, html.ph-nav-open .ph-header {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(28, 39, 55, .07), 0 10px 30px -18px rgba(28, 39, 55, .35);
}
/* the blur lives on a pseudo, not the header: backdrop-filter on .ph-header would make it the containing block for the
   fixed drawer (<1200), so the closed drawer would widen the page and an open one would collapse after scrolling */
@supports (backdrop-filter: blur(1px)) {
  .ph-header.is-scrolled { background: rgba(255, 255, 255, .82); }
  .ph-header.is-scrolled::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; backdrop-filter: saturate(1.6) blur(14px);
  }
}
.ph-header *, .ph-header *::before, .ph-header *::after { box-sizing: border-box; }
.ph-header ul { list-style: none; margin: 0; padding: 0; }
.ph-header li { margin: 0; padding: 0; }
.ph-header a, .ph-header a:hover, .ph-header a:focus { text-decoration: none; }
.fl-page .ph-header button, body .ph-header button {
  appearance: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; min-height: 0;
  font: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; color: inherit; cursor: pointer; text-shadow: none;
}
.ph-header :focus-visible { outline: 2px solid var(--ph-blue); outline-offset: 2px; }

.ph-header .ph-head-bar {
  position: relative; display: flex; align-items: center; gap: 24px;
  max-width: var(--ph-wrap); height: var(--ph-bar-h); margin: 0 auto; padding: 0 var(--ph-gutter);
}
/* the bar's edges line up with the hero card's (.gbl-wrap-hero: 1545px max, 40px gutter) on every page, the homepage
   included (its Beaver Builder row adds no side gutter, home2.css), so the logo never moves between pages. */
.ph-header { --ph-wrap: 1545px; --ph-gutter: 40px; }
.ph-header .ph-head-home { display: block; flex: none; color: var(--ph-logo); line-height: 0; border-radius: 6px; }
.ph-header .ph-head-logo { display: block; width: 104px; height: auto; }
.ph-header .ph-head-panel { display: flex; align-items: center; flex: 1; min-width: 0; gap: 24px; }

/* ---------- top-level items ---------- */
.ph-header .ph-nav-list { display: flex; align-items: center; gap: 2px; }
.ph-header .ph-nav-list > li { position: relative; }
.ph-header .ph-nav-list > li > a, .ph-header button.ph-nav-trigger {
  display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; border-radius: 10px;
  font-size: 16px; font-weight: 600; color: var(--ph-ink); white-space: nowrap; transition: background-color .15s, color .15s;
}
.ph-header .ph-nav-list > li > a:hover, .ph-header button.ph-nav-trigger:hover, .ph-header .ph-nav-list > li.is-open > button.ph-nav-trigger {
  background: var(--ph-tint); color: var(--ph-blue-dark);
}
.ph-header .ph-nav-list > li.current-menu-item > a, .ph-header .ph-nav-list > li.current-menu-ancestor > button.ph-nav-trigger,
.ph-header .ph-nav-list > li.current-menu-parent > button.ph-nav-trigger { color: var(--ph-blue); }
.ph-header .ph-chev { width: 14px; height: 14px; flex: none; fill: currentColor; opacity: .6; transition: transform .2s; }
.ph-header li.is-open > .ph-nav-trigger .ph-chev { transform: rotate(180deg); }
/* Gable item: spark + "New" chip come from gable-nav rules; tighten them for the bar */
.ph-header .gable-nav-link { display: inline-flex; align-items: center; gap: 6px; }
.ph-header .gable-spark { width: 18px; height: 18px; fill: #4645b6; flex: none; }
.ph-header .gable-new {
  display: inline-block; margin-left: 2px; padding: 3px calc(7px - .04em) 3px 7px; border-radius: 999px; background: #4645b6; color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase;
}
/* Centre the caps optically: trim the line box to cap-height/baseline so equal padding = equal space above and below */
@supports (text-box: trim-both cap alphabetic) {
  .ph-header .gable-new { text-box: trim-both cap alphabetic; padding-block: 6px; }
}
/* Feature menu items marked new (menu item class ft-menu-new, e.g. Treasury Balance): the chip in PayHOA blue, not Gable's indigo */
.ph-header .ft-menu-chip { margin-left: 8px; background: #2256d3; vertical-align: 1px; }

/* ---------- account actions ---------- */
.ph-header .ph-head-account { margin-left: auto; }
.ph-header .ph-head-actions { display: flex; align-items: center; gap: 4px; }
.ph-header .ph-head-actions a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 10px;
  font-size: 16px; font-weight: 600; color: var(--ph-ink); white-space: nowrap; transition: background-color .15s, color .15s;
}
.ph-header .ph-head-actions a:hover { background: var(--ph-tint); color: var(--ph-blue-dark); }
.ph-header .ph-head-actions .menu-item-icon { width: 22px; height: 22px; margin-right: 8px; border-radius: 0; background: none; }
.ph-header .ph-head-actions .menu-item-icon svg { inset: 0; width: 22px; height: 22px; fill: var(--ph-blue); }
.ph-header .ph-head-actions a:hover .menu-item-icon { background: none; }
/* Make a Payment: green, like the payment icon it replaced (#16925f = 3.9:1 icon, #0a725a = theme success text, 6.1:1) */
.ph-header .ph-head-actions .payment-button .menu-item-icon svg { fill: #16925f; }
.ph-header .ph-head-actions .payment-button a:hover { background: #e7f6ef; color: #0a725a; }
.ph-header .ph-head-actions .payment-button a:hover .menu-item-icon svg { fill: #0a725a; }
/* the theme hides .hidden-mobile ("Make a ") at ≤1200 with !important; the header shows it until the bar gets tight */
.fl-page .ph-header .hidden-mobile, body .ph-header .hidden-mobile { display: inline !important; white-space: pre; }
.ph-header .ph-head-actions .login-button { position: relative; margin-right: 8px; }
.ph-header .ph-head-actions .signup-button a, .ph-header .ph-head-cta {
  padding: 0 20px; background: var(--ph-blue); color: #fff; box-shadow: 0 1px 2px rgba(34, 70, 171, .3), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.ph-header .ph-head-actions .signup-button a:hover, .ph-header .ph-head-cta:hover { background: var(--ph-blue-dark); color: #fff; }
.ph-header .ph-head-cta { display: none; }
.ph-header button.ph-burger { display: none; }

/* ---------- panels (≥1200 only; the drawer rules below take over under it) ---------- */
@media (min-width: 1200px) {
  .ph-header .ph-nav-list > li > .sub-menu {
    position: absolute; z-index: 10; top: calc(100% + 16px); left: -8px; min-width: 300px; padding: 8px;
    background: #fff; border: 1px solid var(--ph-line); border-radius: 16px;
    box-shadow: 0 24px 48px -16px rgba(28, 39, 55, .28), 0 2px 6px rgba(28, 39, 55, .06);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility 0s linear .16s;
  }
  /* bridge the gap so the pointer can travel from the item to its panel */
  .ph-header .ph-nav-list > li > .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
  .ph-header .ph-nav-list > li.is-open > .sub-menu,
  html:not(.ph-nav-js) .ph-header .ph-nav-list > li:hover > .sub-menu,
  html:not(.ph-nav-js) .ph-header .ph-nav-list > li:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .16s, visibility 0s;
  }
  /* plain dropdowns: icon + title rows */
  .ph-header .ph-nav-list > li:not(.mega-menu) > .sub-menu a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
    font-size: 16px; font-weight: 600; color: var(--ph-ink); transition: background-color .15s, color .15s;
  }
  .ph-header .ph-nav-list > li:not(.mega-menu) > .sub-menu a:hover { background: var(--ph-tint); color: var(--ph-blue-dark); }
  /* a plain dropdown's "View all" link (Solutions → /solutions/), styled like the Features panel's */
  .ph-header .ph-nav-list > li:not(.mega-menu) > .sub-menu .category-button { margin-top: 4px; padding-top: 4px; border-top: 1px solid #eef2f7; }
  .ph-header .ph-nav-list > li:not(.mega-menu) > .sub-menu .category-button a { gap: 6px; font-size: 14px; color: var(--ph-blue); }
  .ph-header .ph-nav-list > li:not(.mega-menu) > .sub-menu .category-button a:hover { color: var(--ph-blue-dark); }

  /* Features: full mega panel centred under the bar */
  .ph-header .ph-nav-list > li.mega-menu { position: static; }
  .ph-header .ph-nav-list > li.mega-menu > .sub-menu {
    top: calc(var(--ph-bar-h) - 2px); left: 50%; width: min(1200px, calc(100vw - 48px)); padding: 0; overflow: hidden;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); transform: translate(-50%, -6px);
  }
  .ph-header .ph-nav-list > li.mega-menu.is-open > .sub-menu,
  html:not(.ph-nav-js) .ph-header .ph-nav-list > li.mega-menu:hover > .sub-menu { transform: translate(-50%, 0); }
  .ph-header .ph-nav-list > li.mega-menu > .sub-menu::before { top: -20px; height: 20px; }
  .ph-header .mega-menu > .sub-menu > li:not(.ph-mega-foot) { display: flex; flex-direction: column; padding: 28px 16px 24px; }
  .ph-header .mega-menu > .sub-menu > li + li:not(.ph-mega-foot) { border-left: 1px solid #eef2f7; }
  .ph-header .mega-menu > .sub-menu > li:not(.ph-mega-foot) > a {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0 0 10px 12px;
    font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ph-muted); transition: color .15s;
  }
  .ph-header .mega-menu > .sub-menu > li:not(.ph-mega-foot) > a::after, .ph-header .category-button a::after, .ph-header .ph-mega-foot a::after {
    content: ""; display: inline-block; width: 13px; height: 13px; flex: none; background: currentColor; transition: transform .15s, opacity .15s;
    -webkit-mask: var(--ph-arrow) center / contain no-repeat; mask: var(--ph-arrow) center / contain no-repeat;
  }
  /* column titles are the category links (their "View all … features" items are hidden here): a small muted arrow says so */
  .ph-header .mega-menu > .sub-menu > li:not(.ph-mega-foot) > a::after { width: 11px; height: 11px; opacity: .45; }
  .ph-header .mega-menu > .sub-menu > li:not(.ph-mega-foot) > a:hover { color: var(--ph-blue); }
  .ph-header .mega-menu > .sub-menu > li:not(.ph-mega-foot) > a:hover::after { opacity: 1; transform: translateX(3px); }
  .ph-header .mega-menu .sub-menu .sub-menu { display: flex; flex-direction: column; flex: 1; gap: 2px; }
  .ph-header .mega-menu .sub-menu .sub-menu a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ph-ink); transition: background-color .15s; }
  .ph-header .mega-menu .sub-menu .sub-menu a:hover { background: var(--ph-tint); }
  .ph-header .menu-feature-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center; font-size: 16px; font-weight: 600; line-height: 1.3; }
  .ph-header .menu-feature-item br { display: none; }
  .ph-header .menu-feature-item .menu-item-icon { grid-row: 1 / span 2; align-self: start; }
  .ph-header .menu-item-subtitle { grid-column: 2; margin-top: 2px; font-size: 14px; font-weight: 400; line-height: 1.35; color: var(--ph-muted); }
  .ph-header .mega-menu .sub-menu .sub-menu a:hover .menu-feature-item { color: var(--ph-blue-dark); }
  /* Features panel: each column's "View all … features" item repeats its title link, so the panel drops them (Dima,
     2026-10-09); the drawer keeps them. Other dropdowns (Solutions) keep theirs. */
  .ph-header .mega-menu .category-button { display: none; }
  .ph-header .category-button a:hover::after, .ph-header .ph-mega-foot a:hover::after { transform: translateX(3px); }

  /* one quiet row along the bottom of the Features panel (moved in by header.js): "View all features" in ink, not a
     second blue call to action. Gable has its own item in the bar, so it isn't repeated here. */
  .ph-header .mega-menu > .sub-menu > li.ph-mega-foot {
    grid-column: 1 / -1; display: flex; align-items: center; padding: 6px 16px; background: #f8fafd; border-top: 1px solid #eef2f7;
  }
  .ph-header .ph-mega-foot a {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 10px;
    font-size: 14px; font-weight: 600; color: var(--ph-ink); transition: background-color .15s, color .15s;
  }
  .ph-header .ph-mega-foot a::after { color: var(--ph-muted); }
  .ph-header .ph-mega-foot a:hover { background: var(--ph-tint); color: var(--ph-blue-dark); }
  .ph-header .ph-mega-foot a:hover::after { color: currentColor; }
}

/* icon tiles (panel rows); icons are masks so they share one colour */
.ph-header .menu-item-icon {
  display: inline-block; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--ph-tint); position: relative;
}
.ph-header .menu-item-icon svg { position: absolute; inset: 8px; width: 20px; height: 20px; fill: var(--ph-blue); }
.ph-header .menu-item-icon.is-mask::before {
  content: ""; position: absolute; inset: 9px; background: var(--ph-blue);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.ph-header a:hover .menu-item-icon { background: var(--ph-tint-2); }

/* tighter bar between 1200 and 1320 so everything stays on one line */
@media (min-width: 1200px) and (max-width: 1319px) {
  .ph-header .ph-head-bar { padding: 0 24px; gap: 16px; }
  .ph-header .ph-nav-list > li > a, .ph-header .ph-nav-trigger, .ph-header .ph-head-actions a { padding: 0 10px; }
  .ph-header .ph-head-actions .signup-button a { padding: 0 16px; }
  .ph-header .ph-head-actions .menu-item-icon { display: none; } /* no room for them here */
}

/* ---------- <1200: menu button + drawer ---------- */
@media (max-width: 1199px) {
  .ph-header { --ph-bar-h: 68px; }
  .ph-header .ph-head-bar { gap: 12px; }
  .ph-header .ph-head-cta { display: inline-flex; align-items: center; height: 40px; margin-left: auto; padding: 0 16px; border-radius: 10px; font-size: 15px; font-weight: 600; white-space: nowrap; }
  .ph-header button.ph-burger {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px; border-radius: 10px;
    border: 1px solid var(--ph-line); background: #fff; font-size: 15px; font-weight: 600; color: var(--ph-ink);
  }
  .fl-page .ph-header button.ph-burger, body .ph-header button.ph-burger { border: 1px solid var(--ph-line); border-radius: 10px; background: #fff; padding: 0 12px 0 14px; }
  .ph-header .ph-burger:hover { border-color: #c9d4e3; }
  .ph-header .ph-burger-box { position: relative; width: 18px; height: 12px; }
  .ph-header .ph-burger-box::before, .ph-header .ph-burger-box::after, .ph-header .ph-burger-box span {
    content: ""; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s, top .2s;
  }
  .ph-header .ph-burger-box::before { top: 0; }
  .ph-header .ph-burger-box span { top: 5px; }
  .ph-header .ph-burger-box::after { top: 10px; }
  .ph-header .ph-burger[aria-expanded="true"] .ph-burger-box::before { top: 5px; transform: rotate(45deg); }
  .ph-header .ph-burger[aria-expanded="true"] .ph-burger-box span { opacity: 0; }
  .ph-header .ph-burger[aria-expanded="true"] .ph-burger-box::after { top: 5px; transform: rotate(-45deg); }

  .ph-header .ph-head-panel {
    position: fixed; z-index: 5; top: calc(var(--ph-top) + var(--ph-bar-h)); right: 0; bottom: 0; width: min(100%, 440px);
    flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-top: 1px solid var(--ph-line);
    box-shadow: -24px 0 48px -24px rgba(28, 39, 55, .3);
    visibility: hidden; transform: translateX(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
  }
  .ph-header.is-open .ph-head-panel { visibility: visible; transform: none; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .ph-header .ph-nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px 24px; }
  .ph-header .ph-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .ph-header .ph-nav-list > li { border-bottom: 1px solid #eef2f7; }
  .ph-header .ph-nav-list > li > a, .ph-header button.ph-nav-trigger {
    display: flex; width: 100%; height: 56px; padding: 0 4px; border-radius: 0; font-size: 18px; justify-content: space-between;
  }
  .ph-header .ph-nav-list > li > a:hover, .ph-header button.ph-nav-trigger:hover, .ph-header .ph-nav-list > li.is-open > button.ph-nav-trigger { background: none; }
  .ph-header .ph-nav-list > li.gable-nav-item > a { justify-content: flex-start; }
  .ph-header .ph-chev { width: 20px; height: 20px; }

  /* accordion sections */
  .ph-header .ph-nav-list > li > .sub-menu { display: none; padding: 0 0 16px; }
  .ph-header .ph-nav-list > li.is-open > .sub-menu { display: block; }
  .ph-header .ph-nav-list > li > .sub-menu a {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 4px; border-radius: 8px; font-size: 16px; font-weight: 600; color: var(--ph-ink);
  }
  .ph-header .ph-nav-list > li > .sub-menu a:active { background: var(--ph-tint); }
  .ph-header .menu-item-icon { width: 32px; height: 32px; border-radius: 8px; }
  .ph-header .menu-item-icon svg { inset: 6px; }
  .ph-header .menu-item-icon.is-mask::before { inset: 8px; }
  /* Features: the four groups as titled lists, titles only */
  .ph-header .mega-menu > .sub-menu { display: none; }
  .ph-header .mega-menu.is-open > .sub-menu { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .ph-header .mega-menu > .sub-menu > li:not(.ph-mega-foot) > a {
    min-height: 32px; margin-top: 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ph-muted);
  }
  .ph-header .menu-feature-item { display: flex; align-items: center; gap: 12px; }
  .ph-header .menu-feature-item br, .ph-header .menu-item-subtitle { display: none; }
  .ph-header .mega-menu .category-button a, .ph-header .ph-nav-list > li:not(.mega-menu) > .sub-menu .category-button a { font-size: 15px; color: var(--ph-blue); }
  .ph-header .ph-nav-list > li:not(.mega-menu) > .sub-menu .category-button a { gap: 6px; }
  .ph-header .category-button a::after, .ph-header .ph-mega-foot a::after {
    content: ""; width: 13px; height: 13px; background: currentColor;
    -webkit-mask: var(--ph-arrow) center / contain no-repeat; mask: var(--ph-arrow) center / contain no-repeat;
  }
  /* "View all features" closes the Features section, a row like each group's "View all … features" */
  .ph-header .ph-mega-foot a::after { flex: none; }

  /* account actions pinned to the bottom of the drawer */
  .ph-header .ph-head-account { margin: 0; padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ph-line); background: #fff; }
  .ph-header .ph-head-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ph-header .ph-head-actions a { width: 100%; justify-content: center; height: 48px; border: 1px solid var(--ph-line); }
  .ph-header .ph-head-actions .login-button { margin: 0; }
  .ph-header .ph-head-actions .signup-button { grid-column: 1 / -1; }
  .ph-header .ph-head-actions .signup-button a { border-color: var(--ph-blue); }

  .ph-head-scrim {
    position: fixed; inset: 0; z-index: 999; background: rgba(28, 39, 55, .4); opacity: 0; transition: opacity .28s;
  }
  html.ph-nav-open .ph-head-scrim { opacity: 1; }
  /* lock on html only: overflow on body too would make body a scroll container and unstick the header mid-page */
  html.ph-nav-open { overflow: hidden; }
  /* HubSpot's chat (z-index 9990 !important) would sit over the drawer's account buttons; hide it while the drawer is
     open. It forces display with !important but not visibility, so this wins and the chat comes back on close. */
  html.ph-nav-open #hubspot-messages-iframe-container { visibility: hidden !important; }
}
@media (max-width: 768px) {
  .ph-header .ph-head-bar { padding: 0 24px; } /* the hero card drops to a 12px gutter here; the bar keeps its own */
}
@media (max-width: 480px) {
  .ph-header { --ph-bar-h: 64px; }
  .ph-header .ph-head-bar { padding: 0 16px; gap: 8px; }
  .ph-header .ph-head-logo { width: 92px; }
  .ph-header .ph-burger-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fl-page .ph-header button.ph-burger, body .ph-header button.ph-burger { width: 40px; padding: 0; justify-content: center; }
  .ph-header .ph-nav { padding: 4px 16px 24px; }
  .ph-header .ph-head-account { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-header, .ph-header *, .ph-head-scrim { transition: none !important; }
}
/* the drawer has its own Sign Up; don't show two at once */
@media (max-width: 1199px) { .ph-header.is-open .ph-head-cta { visibility: hidden; } }
/* focus ring that shows on the blue Sign Up buttons */
.ph-header .signup-button a:focus-visible, .ph-header .ph-head-cta:focus-visible { outline: 2px solid var(--ph-blue); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }