/* HOSTREND Free Website Design header + offer strip v277.98.
   Component styles are scoped; global tokens and reusable hover classes remain the source of truth. */
.hr-header.hr-header--free-design {
  --hr-header-height: 66px;
  --hr-header-pad: clamp(16px, 2.1vw, 30px);
  --hr-header-logo-height: 24px;
  --header-mobile-action-reserve: 132px;
  --hr-header-top-text: var(--free-website-design-header-text, var(--color-neutral-500, #64748B));
  --hr-header-solid-text: var(--free-website-design-header-text, var(--color-neutral-500, #64748B));
  --hr-header-surface: var(--free-website-design-header-surface, var(--color-white, #FFFFFF));
  --hr-header-border: var(--color-border, #E2E8F0);
  --mega-menu-radius: var(--free-website-design-mega-menu-radius, 10px);
  --mega-menu-column-padding-block: var(--free-website-design-mega-menu-padding-block, 12px);
  --mega-menu-column-padding-inline: var(--free-website-design-mega-menu-padding-inline, 14px);
  --mega-menu-column-first-padding: var(--free-website-design-mega-menu-padding-inline, 14px);
  --mega-menu-heading-color: var(--free-website-design-header-text, var(--color-neutral-500, #64748B));
  background: var(--hr-header-surface) !important;
  color: var(--hr-header-top-text) !important;
  box-shadow: 0 4px 16px rgba(19,27,36,.045);
  margin: 0;
}
/* The shared mega-menu JS portals desktop menus to <body>; scope these tokens by this page's menu id. */
body > #host-free-process-menu.host-mega-menu {
  --mega-menu-radius: var(--free-website-design-mega-menu-radius, 10px);
  --mega-menu-column-padding-block: var(--free-website-design-mega-menu-padding-block, 12px);
  --mega-menu-column-padding-inline: var(--free-website-design-mega-menu-padding-inline, 14px);
  --mega-menu-column-first-padding: var(--free-website-design-mega-menu-padding-inline, 14px);
}

/* Use in-flow sticky positioning: the header owns its space and never covers the hero. */
.hr-header.hr-header--free-design.hr-header--sticky {
  position: sticky !important;
  inset: auto !important;
  top: 0 !important;
  width: 100%;
  z-index: 1200;
}
.hr-header--free-design .hr-header__inner,
.hr-header--free-design.is-scroll-solid .hr-header__inner {
  min-height: 66px;
  padding: 6px var(--hr-header-pad);
  background: var(--hr-header-surface) !important;
  color: var(--hr-header-solid-text) !important;
}
.hr-header--free-design.is-scroll-solid {
  background: var(--hr-header-surface) !important;
  color: var(--hr-header-solid-text) !important;
  border-bottom: 1px solid var(--hr-header-border);
  box-shadow: var(--theme-shadow, 0 8px 24px rgba(19,27,36,.08));
}
.hr-header--free-design .hr-header__logo,
.hr-header--free-design.is-scroll-solid .hr-header__logo,
.hr-header--free-design .hr-navigation__mobile-brand img { content: normal !important; }
.hr-header--free-design .hr-header__brand { height: 24px; max-width: 150px; }
.hr-header--free-design .hr-header__logo { height: 24px; max-width: 150px; width: auto; object-fit: contain; }
.hr-header--free-design .hr-header__brand-zone { gap: 4px; }
.hr-header--free-design .hr-header__actions { gap: 10px; }
.hr-header--free-design .hr-navigation__list { gap: clamp(2px, .35vw, 7px); }
.hr-header--free-design .hr-navigation__link,
.hr-header--free-design .hr-navigation__trigger {
  min-height: 34px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: var(--hover-radius, 10px);
  background: transparent;
  color: var(--mega-menu-heading-color, var(--color-secondary-text, #64748B));
  font-family: var(--font-primary, "Be Vietnam Pro", sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}
/* Active text is black only while its matching section is the active location. */
.hr-header--free-design .hr-navigation--desktop .host-free-header__nav-item[data-free-nav-active="true"],
.hr-header--free-design .hr-navigation--desktop .host-free-header__nav-item[data-free-nav-active="true"]:hover,
.hr-header--free-design .hr-navigation--desktop .host-free-header__nav-item[data-free-nav-active="true"]:focus-visible,
.hr-header--free-design .hr-navigation--desktop .host-free-header__nav-item[aria-current="location"] {
  color: var(--free-website-design-header-active-text, var(--color-black, #000000)) !important;
}
.hr-header--free-design .hr-navigation__mobile-link[data-free-nav-active="true"] {
  color: var(--free-website-design-header-active-text, var(--color-black, #000000)) !important;
}
/* Non-active navigation text retains its global token on hover. Only the active page/section uses black text. */
/* Keep hover variant class selection in the shared header controller, but tint glass for white surfaces. */
.hr-header--free-design { --hover-glass-surface: var(--free-website-design-header-glass-hover, linear-gradient(135deg, rgba(33,25,255,.085) 0%, rgba(33,25,255,.035) 100%)); }
.hr-header--free-design .hr-header__toggle-icon,
.hr-header--free-design .hr-header__toggle-icon * { color: var(--free-website-design-header-icon-color, var(--color-neutral-900, #131B24)) !important; stroke: currentColor; }

/* Top announcement bar: local to this header, blue token background, all content on one line. */
.host-free-announcement,
.host-free-announcement * { box-sizing: border-box; }
.host-free-announcement {
  position: relative;
  z-index: 1201;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary, #2119FF);
  color: #FFFFFF;
  font-family: var(--font-primary, "Be Vietnam Pro", sans-serif);
  line-height: 1;
}
.host-free-announcement__inner {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(4px, .8vw, 10px);
  padding: 2px clamp(6px, 1.2vw, 16px);
  white-space: nowrap;
}
.host-free-announcement__offer,
.host-free-announcement__timer {
  box-sizing: border-box;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 10px;
  margin: 0;
  border: 0;
  border-radius: var(--hover-radius, 10px);
  background: transparent;
  color: #FFFFFF;
  font-family: var(--font-primary, "Be Vietnam Pro", sans-serif);
  font-size: clamp(10px, .68vw + 7px, 12px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.host-free-announcement__offer { flex: 0 1 auto; }
.host-free-announcement__icon,
.host-free-announcement__fallback-icon {
  display: block;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: currentColor;
  fill: currentColor;
}
.host-free-announcement__timer { flex: 0 0 auto; gap: clamp(4px, .55vw, 8px); font-size: clamp(12px, .8vw + 8px, 14px); font-weight: 700; letter-spacing: .01em; }
.host-free-announcement__colon { display: inline-block; opacity: .92; }

/* Icon-only Light/Dark/System dropdown. No visible labels; controls retain accessible names. */
.host-free-theme-menu { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; }
.host-free-theme-menu__trigger,
.host-free-theme-menu__choice {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--theme-border, #E2E8F0);
  border-radius: 10px;
  background: var(--theme-surface, #FFFFFF);
  color: var(--theme-text, #131B24);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.host-free-theme-menu__trigger [data-theme-mode-icon] { display: none; align-items: center; justify-content: center; }
.host-free-theme-menu__trigger[data-current-mode="light"] [data-theme-mode-icon="light"],
.host-free-theme-menu__trigger[data-current-mode="dark"] [data-theme-mode-icon="dark"],
.host-free-theme-menu__trigger[data-current-mode="system"] [data-theme-mode-icon="system"] { display: inline-flex; }
.host-free-theme-menu__icon { display: block; width: 17px; height: 17px; flex: 0 0 auto; }
.host-free-theme-menu__trigger:hover,
.host-free-theme-menu__trigger:focus-visible,
.host-free-theme-menu__choice:hover,
.host-free-theme-menu__choice:focus-visible { outline-offset: 3px; }
.host-free-theme-menu__popup {
  position: absolute;
  z-index: 1400;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--theme-border, #E2E8F0);
  border-radius: 13px;
  background: var(--theme-surface-raised, #FFFFFF);
  box-shadow: var(--theme-shadow, 0 8px 24px rgba(19,27,36,.12));
}
.host-free-theme-menu__popup[hidden] { display: none !important; }
.host-free-theme-menu__choice { border-color: transparent; background: transparent; }
.host-free-theme-menu__choice[aria-pressed="true"] { background: var(--color-primary, #2119FF); color: #FFFFFF; border-color: var(--color-primary, #2119FF); }
.host-free-theme-menu__choice:focus-visible,
.host-free-theme-menu__trigger:focus-visible { outline: 2px solid var(--theme-focus, #2119FF); }
.host-free-theme-menu--mobile { display: none; }
.host-free-theme-menu--mobile .host-free-theme-menu__popup { right: 0; }
.host-free-header__get-offer { flex: 0 0 auto; min-height: 34px; height: 34px; padding: 0 13px; font-size: 12px; white-space: nowrap; }

/* The dedicated header remains a white surface in Light, Dark and System modes. */
.hr-header--free-design,
.hr-header--free-design .hr-header__inner,
.hr-header--free-design.is-scroll-solid,
.hr-header--free-design.is-scroll-solid .hr-header__inner {
  background: var(--free-website-design-header-surface, var(--color-white, #FFFFFF)) !important;
  color: var(--free-website-design-header-text, var(--color-neutral-500, #64748B)) !important;
  border-color: var(--color-border, #E2E8F0);
}
.hr-header--free-design .hr-header__toggle-icon,
.hr-header--free-design .hr-header__toggle-icon * {
  color: var(--free-website-design-header-icon-color, var(--color-neutral-900, #131B24)) !important;
  stroke: currentColor;
}
.hr-header--free-design .host-free-theme-menu__trigger,
.hr-header--free-design .host-free-theme-menu__choice {
  background: var(--free-website-design-header-surface, var(--color-white, #FFFFFF));
  color: var(--free-website-design-header-text, var(--color-neutral-500, #64748B));
  border-color: var(--color-border, #E2E8F0);
}
.hr-header--free-design .host-free-theme-menu__popup {
  background: var(--free-website-design-header-surface, var(--color-white, #FFFFFF));
  color: var(--color-dark, #131B24);
  border-color: var(--color-border, #E2E8F0);
}
.hr-header--free-design .host-free-theme-menu__choice[aria-pressed="true"] {
  background: var(--color-primary, #2119FF);
  color: var(--color-white, #FFFFFF);
  border-color: var(--color-primary, #2119FF);
}
.hr-header--free-design .hr-navigation__mobile-drawer {
  background: var(--free-website-design-header-surface, var(--color-white, #FFFFFF)) !important;
  color: var(--free-website-design-header-text, var(--color-neutral-500, #64748B)) !important;
  border-color: var(--color-border, #E2E8F0) !important;
}
html[data-theme="dark"] .hr-header--free-design,
html[data-theme="dark"] .hr-header--free-design .hr-header__inner,
html[data-theme="dark"] .hr-header--free-design.is-scroll-solid,
html[data-theme="dark"] .hr-header--free-design.is-scroll-solid .hr-header__inner {
  background: var(--free-website-design-header-surface, var(--color-white, #FFFFFF)) !important;
  color: var(--free-website-design-header-text, var(--color-neutral-500, #64748B)) !important;
  border-color: var(--color-border, #E2E8F0) !important;
  box-shadow: 0 4px 16px rgba(19,27,36,.08) !important;
}
html[data-theme="dark"] .hr-header--free-design.hr-header--light-top:not(.is-scroll-solid) .hr-header__logo,
html[data-theme="dark"] .hr-header--free-design.is-scroll-solid .hr-header__logo {
  content: normal !important;
}
html[data-theme="dark"] .hr-header--free-design .hr-header__toggle-icon,
html[data-theme="dark"] .hr-header--free-design .hr-header__toggle-icon * {
  color: var(--free-website-design-header-icon-color, var(--color-neutral-900, #131B24)) !important;
  stroke: currentColor;
}
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-header__inner,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design.is-scroll-solid,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design.is-scroll-solid .hr-header__inner {
  background: var(--free-website-design-header-surface, var(--color-white, #FFFFFF)) !important;
  color: var(--free-website-design-header-text, var(--color-neutral-500, #64748B)) !important;
  border-color: var(--color-border, #E2E8F0) !important;
  box-shadow: 0 4px 16px rgba(19,27,36,.08) !important;
}
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design.hr-header--light-top .hr-header__logo,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-navigation__mobile-brand img {
  content: normal !important;
}
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-header__toggle-icon,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-header__toggle-icon * {
  color: var(--free-website-design-header-icon-color, var(--color-neutral-900, #131B24)) !important;
  stroke: currentColor;
}
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-navigation__mobile-drawer {
  background: var(--free-website-design-header-surface, var(--color-white, #FFFFFF)) !important;
  color: var(--free-website-design-header-text, var(--color-neutral-500, #64748B)) !important;
  border-color: var(--color-border, #E2E8F0) !important;
}
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-navigation__mobile-link {
  color: var(--free-website-design-header-text, var(--color-neutral-500, #64748B));
}
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-navigation__mobile-link[data-free-nav-active="true"] {
  color: var(--free-website-design-header-active-text, var(--color-black, #000000)) !important;
}
.host-free-announcement { background: var(--color-primary, #2119FF); color: var(--color-white, #FFFFFF); }

/* The in-flow header and compact hero spacing prevent the blue hero from sitting behind it. */
body.free-website-design-page .free-website-design-hero__inner { padding-top: clamp(46px, 5vw, 70px) !important; }

@media (max-width: 1023px) {
  .hr-header.hr-header--free-design { --hr-header-height: 60px; --hr-header-pad: 16px; --header-mobile-action-reserve: 132px; }
  .hr-header--free-design .hr-header__inner { min-height: 60px; padding: 5px 16px; }
  .hr-header--free-design .hr-header__brand { height: 22px; max-width: 128px; }
  .hr-header--free-design .hr-header__logo { height: 22px; max-width: 128px; }
  .hr-header--free-design .hr-header__actions { gap: 7px; }
  .hr-header--free-design .host-free-theme-menu:not(.host-free-theme-menu--mobile) { display: none !important; }
  .host-free-theme-menu--mobile { display: flex; width: max-content; margin: 14px auto 8px; }
  .host-free-theme-menu--mobile .host-free-theme-menu__popup { right: 0; }
  .hr-header--free-design .host-free-header__get-offer { min-height: 32px; height: 32px; padding-inline: 10px; font-size: 11px; }
  .hr-header--free-design .hr-header__menu-toggle { width: 30px; min-width: 30px; height: 30px; flex-basis: 30px; }
  .hr-header--free-design .hr-header__toggle-icon { width: 20px; height: 20px; }
  .host-free-announcement { min-height: 34px; }
  .host-free-announcement__inner { min-height: 34px; gap: 3px; padding-inline: 4px; }
  .host-free-announcement__offer,
  .host-free-announcement__timer { min-height: 27px; gap: 5px; padding: 4px 6px; }
  .host-free-announcement__offer { font-size: clamp(9px, 1.3vw + 5px, 11px); }
  .host-free-announcement__icon,
  .host-free-announcement__fallback-icon { width: 13px; height: 13px; }
  .host-free-announcement__timer { font-size: clamp(11px, 1.5vw + 5px, 13px); gap: 4px; }
  body.free-website-design-page .free-website-design-hero__inner { padding-top: 40px !important; }
}
@media (max-width: 380px) {
  .host-free-announcement__inner { gap: 1px; padding-inline: 2px; }
  .host-free-announcement__offer,
  .host-free-announcement__timer { padding-inline: 4px; gap: 3px; }
  .host-free-announcement__offer { font-size: 9px; letter-spacing: -.015em; }
  .host-free-announcement__icon,
  .host-free-announcement__fallback-icon { width: 12px; height: 12px; }
  .host-free-announcement__timer { font-size: 11px; }
  .hr-header--free-design .host-free-header__get-offer { padding-inline: 8px; }
  .hr-header--free-design .hr-header__actions { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-header--free-design,
  .host-free-theme-menu__trigger,
  .host-free-theme-menu__choice { transition: none !important; }
}


/* HOSTREND Free Website Design header refinements v277.99.
   The page-specific header/menu stay light-surface components in every theme mode;
   the page body remains free to use the selected global theme. */
.hr-header--free-design {
  --free-website-design-header-surface: var(--color-white, #FFFFFF);
  --free-website-design-header-text: var(--color-neutral-500, #64748B);
  --free-website-design-header-active-text: var(--color-black, #000000);
  --free-website-design-header-icon-color: var(--color-neutral-900, #131B24);
  --hover-glass-surface: var(--free-website-design-header-glass-hover, linear-gradient(135deg, rgba(33,25,255,.085) 0%, rgba(33,25,255,.035) 100%));
  --free-header-hover-surface: var(--free-website-design-header-surface-hover, color-mix(in srgb, var(--color-primary, #2119FF) 7%, #FFFFFF));
}

/* The top offer is a clickable call to action and keeps the reusable glass hover. */
.host-free-announcement__offer { cursor: pointer; }

/* Keep the logo landing on this dedicated landing page's own home/main section. */
.hr-header--free-design .hr-header__brand,
.hr-header--free-design .hr-navigation__mobile-brand { cursor: pointer; }

/* The original global theme stylesheet deliberately darkens generic menus;
   this one dedicated mega menu is explicitly pinned to the same white surface as the header. */
body.free-website-design-page > #host-free-process-menu.host-mega-menu,
html[data-theme="dark"] body.free-website-design-page > #host-free-process-menu.host-mega-menu {
  --color-dark: var(--color-neutral-900, #131B24);
  --color-secondary-text: var(--color-neutral-500, #64748B);
  --mega-menu-surface: var(--color-white, #FFFFFF);
  --mega-menu-item-color: var(--color-neutral-900, #131B24);
  --mega-menu-heading-color: var(--color-neutral-500, #64748B);
  --mega-menu-border: var(--color-neutral-200, #E2E8F0);
  --mega-menu-divider: var(--color-neutral-200, #E2E8F0);
  --mega-menu-shadow: 0 8px 24px rgba(19,27,36,.10);
  --hover-surface: var(--free-website-design-header-surface-hover, color-mix(in srgb, var(--color-primary, #2119FF) 7%, #FFFFFF));
  background: var(--mega-menu-surface) !important;
  background-color: var(--color-white, #FFFFFF) !important;
  color: var(--color-neutral-900, #131B24) !important;
  border-color: var(--color-neutral-200, #E2E8F0) !important;
  box-shadow: var(--mega-menu-shadow) !important;
  color-scheme: light;
}
body.free-website-design-page > #host-free-process-menu.host-mega-menu .host-mega-menu__grid,
body.free-website-design-page > #host-free-process-menu.host-mega-menu .host-mega-menu__column,
body.free-website-design-page > #host-free-process-menu.host-mega-menu .host-mega-menu__group {
  background-color: var(--color-white, #FFFFFF) !important;
  color: var(--color-neutral-900, #131B24) !important;
}
html[data-theme="dark"] body.free-website-design-page > #host-free-process-menu.host-mega-menu .host-mega-menu__link.host-hoverable--surface-only:hover,
html[data-theme="dark"] body.free-website-design-page > #host-free-process-menu.host-mega-menu .host-mega-menu__link.host-hoverable--surface-only:focus-visible {
  background: var(--hover-surface) !important;
  color: var(--color-neutral-900, #131B24) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Navigation hover is supplied by the shared glass variant; re-assert its light-header
   glass token in Dark Theme so the global dark surface does not replace it with white glass. */
.hr-header--free-design .hr-navigation--desktop .host-free-header__nav-item.host-hoverable--glass:hover,
.hr-header--free-design .hr-navigation--desktop .host-free-header__nav-item.host-hoverable--glass:focus-visible,
.hr-header--free-design .hr-navigation--desktop .host-free-header__nav-item.host-hoverable--glass[aria-expanded="true"] {
  background: var(--hover-glass-surface) !important;
  color: var(--color-black, #000000) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(var(--hover-glass-blur, 12px)) saturate(155%) !important;
  backdrop-filter: blur(var(--hover-glass-blur, 12px)) saturate(155%) !important;
}
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-navigation--desktop .host-free-header__nav-item.host-hoverable--glass:hover,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-navigation--desktop .host-free-header__nav-item.host-hoverable--glass:focus-visible,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-navigation--desktop .host-free-header__nav-item.host-hoverable--glass[aria-expanded="true"] {
  background: var(--hover-glass-surface) !important;
  color: var(--color-black, #000000) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(var(--hover-glass-blur, 12px)) saturate(155%) !important;
  backdrop-filter: blur(var(--hover-glass-blur, 12px)) saturate(155%) !important;
}

/* Restore the white-header interaction palette inside the mobile drawer/submenu too. */
.hr-header--free-design .hr-navigation__mobile-drawer,
.hr-header--free-design .hr-navigation__mobile-stage,
.hr-header--free-design .host-mega-menu__mobile-panel {
  background: var(--color-white, #FFFFFF) !important;
  color: var(--color-neutral-900, #131B24) !important;
  border-color: var(--color-neutral-200, #E2E8F0) !important;
  color-scheme: light;
}
.hr-header--free-design .host-mega-menu__mobile-title,
.hr-header--free-design .host-mega-menu__mobile-group-title,
.hr-header--free-design .host-mega-menu__mobile-link,
.hr-header--free-design .host-mega-menu__mobile-back {
  color: var(--color-neutral-900, #131B24) !important;
}
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-navigation__mobile-drawer,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-navigation__mobile-stage,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .host-mega-menu__mobile-panel {
  background: var(--color-white, #FFFFFF) !important;
  color: var(--color-neutral-900, #131B24) !important;
  border-color: var(--color-neutral-200, #E2E8F0) !important;
  color-scheme: light;
}
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .host-mega-menu__mobile-title,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .host-mega-menu__mobile-group-title,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .host-mega-menu__mobile-link,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .host-mega-menu__mobile-back {
  color: var(--color-neutral-900, #131B24) !important;
}

/* The theme popup itself is always light. Remove dark-theme black outlines that the
   generic theme tokens were applying to its three small icon choices. */
.hr-header--free-design .host-free-theme-menu__popup {
  background: var(--color-white, #FFFFFF) !important;
  color: var(--color-neutral-900, #131B24) !important;
  border-color: var(--color-neutral-200, #E2E8F0);
  box-shadow: var(--free-website-design-header-theme-popup-shadow, 0 8px 22px rgba(19,27,36,.10)) !important;
  color-scheme: light;
}
.hr-header--free-design .host-free-theme-menu__choice {
  border-color: transparent !important;
  box-shadow: none !important;
}
.hr-header--free-design .host-free-theme-menu__choice[aria-pressed="true"] {
  background: var(--color-primary, #2119FF) !important;
  color: var(--color-white, #FFFFFF) !important;
  border-color: transparent !important;
}
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .host-free-theme-menu__popup {
  background: var(--color-white, #FFFFFF) !important;
  color: var(--color-neutral-900, #131B24) !important;
  border-color: transparent !important;
  box-shadow: var(--free-website-design-header-theme-popup-shadow, 0 8px 22px rgba(19,27,36,.10)) !important;
  color-scheme: light;
}
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .host-free-theme-menu__trigger {
  background: var(--color-white, #FFFFFF) !important;
  color: var(--color-neutral-900, #131B24) !important;
  border-color: var(--color-neutral-200, #E2E8F0) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .host-free-theme-menu__choice {
  background: transparent !important;
  color: var(--color-neutral-900, #131B24) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .host-free-theme-menu__choice[aria-pressed="true"] {
  background: var(--color-primary, #2119FF) !important;
  color: var(--color-white, #FFFFFF) !important;
  border-color: transparent !important;
}
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-header__logo,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-navigation__mobile-brand img {
  content: normal !important;
}

/* Dark-theme mobile navigation uses the same white-header hover surface as Light Theme. */
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-navigation__mobile-link.host-hoverable--surface-only:hover,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .hr-navigation__mobile-link.host-hoverable--surface-only:focus-visible,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .host-mega-menu__mobile-link.host-hoverable--surface-only:hover,
html[data-theme="dark"] body.free-website-design-page .hr-header--free-design .host-mega-menu__mobile-link.host-hoverable--surface-only:focus-visible {
  background: var(--free-header-hover-surface, color-mix(in srgb, var(--color-primary, #2119FF) 7%, #FFFFFF)) !important;
  color: var(--color-black, #000000) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}