/*
 * HPL components
 * 1. Page shell (header brand, footer) matching bodyfence.net/hpl
 * 2. App pieces ported from the HPL plugin front.css (core screens only; the ambassador
 *    dashboard comes with step 6). The plugin uses generic class names (.card, .tabs,
 *    .button, ...), so they are scoped under .hpl-app to avoid clashing with Bootstrap.
 *    Wrap markup ported from the plugin in <div class="hpl-app">.
 */

/* ---------- 1. Page shell ---------- */

/*
 * Header: a transparent bar over the dark top of the page, like bodyfence.net/hpl (white BODYFENCE | HPL logos,
 * thin white menu, outlined trial button). It scrolls away with the page. The dark page tops (home hero, pricing,
 * page header band) slide under it with a negative margin of --hpl-header-height; pages that start light get a
 * dark bar instead.
 */
:root {
  --hpl-header-height: 96px;
}

@media (max-width: 1399.98px) {
  :root {
    --hpl-header-height: 80px;
  }
}

@media (max-width: 575.98px) {
  :root {
    --hpl-header-height: 68px;
  }
}

#main-header {
  position: relative;
  z-index: 1030;
  background-color: var(--hpl-dark);
}

body:has(.hpl-hero, .hpl-pricing, .hpl-page-header) #main-header {
  background-color: transparent;
}

.hpl-header-bar {
  min-height: var(--hpl-header-height);
  padding: 0 40px;
}

/* custom.css adds 15px more on phones, which made the header taller */
.hpl-header-bar > .container-fluid {
  padding: 0;
}

/* Thin white capitals like the site; the page you are on in red.
   The selector outranks custom.css ".Landing-Nav li.nav-item a" (black) without !important. */
.hpl-header-bar .navbar-nav .nav-link {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  color: var(--hpl-white);
  font-size: 1rem;
  font-weight: var(--hpl-weight-light);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hpl-header-bar .navbar-nav .nav-link:hover,
.hpl-header-bar .navbar-nav .nav-link:focus,
.hpl-header-bar .navbar-nav .nav-link.active,
.hpl-header-bar .navbar-nav .nav-link.show {
  color: var(--hpl-red);
}

.hpl-nav-dropdown {
  border: 0;
  border-radius: var(--hpl-radius);
  box-shadow: var(--hpl-shadow);
}

.hpl-nav-dropdown .dropdown-item {
  color: var(--hpl-dark);
  font-size: 0.9rem;
}

.hpl-nav-dropdown .dropdown-item:hover,
.hpl-nav-dropdown .dropdown-item:focus {
  background-color: var(--hpl-grey-200);
  color: var(--hpl-red);
}

/* The current page in a dropdown: red like the top-level links, not Bootstrap's blue */
.hpl-nav-dropdown .dropdown-item.active {
  background-color: transparent;
  color: var(--hpl-red);
  font-weight: var(--hpl-weight-semibold);
}

/* "Se connecter / S'inscrire": white text links, red on hover.
   The .navbar-nav variant outranks custom.css ".Landing-Nav li.nav-item a" inside the phone menu. */
.hpl-header-login,
.hpl-header-bar .navbar-nav .hpl-header-login {
  padding: 0;
  border: 0;
  background: none;
  color: var(--hpl-white);
  font-size: 0.95rem;
  font-weight: var(--hpl-weight-light);
  white-space: nowrap;
}

.hpl-header-login:hover,
.hpl-header-login:focus,
.hpl-header-bar .navbar-nav .hpl-header-login:hover,
.hpl-header-bar .navbar-nav .hpl-header-login:focus {
  color: var(--hpl-red);
}

.hpl-header-register::before {
  content: "/";
  margin: 0 6px;
  color: rgba(255, 255, 255, 0.5);
}

/* custom.css hides .loginNavCustom on wide screens (it used a second copy inside the menu) */
.hpl-header-bar .loginNavCustom {
  display: flex;
  align-items: center;
  margin: 0 0 0 16px;
  padding: 0;
  list-style: none;
}

@media (min-width: 1400px) {
  /* Full menu (navbar-expand-xxl), in the site's order: logos, menu, sign in / account, then the trial button at
     the right end. The menu's wrapper steps aside so its two parts can sit on either side of the sign-in links. */
  .hpl-header-bar .navbar-collapse {
    display: contents !important;
  }

  .hpl-header-bar .hpl-menu-panel-body {
    display: contents !important;
  }

  .hpl-header-bar #mainNavbarScroll .hpl-menu-panel-body > .navbar-nav {
    order: 1;
  }

  .hpl-header-bar > .container-fluid > .d-flex {
    order: 2;
  }

  /* custom.css forces this block to 35-40% of the header (!important) */
  .hpl-header-bar .nav-icons-right.main-nav-right {
    order: 3;
    width: auto !important;
    margin-left: 20px;
  }
}

/* MatMak's dark settings icon (signed in) */
.hpl-header-bar .settings-hover-icon {
  filter: invert(1);
}

/* "Essai gratuit": dark pill with a red outline and a chevron, like the site */
.hpl-header-bar .trial-button {
  padding: 7px 18px 7px 14px;
  border: 2px solid var(--hpl-red-dark);
  border-radius: var(--hpl-radius-pill);
  background: var(--hpl-dark);
  color: var(--hpl-white);
  font-size: 0.85rem;
  font-weight: var(--hpl-weight-light);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: none;
  animation: none; /* MatMak's custom.css pulses this button blue/black */
}

.hpl-header-bar .trial-button i {
  margin-right: 8px;
}

.hpl-header-bar .trial-button::before {
  content: none; /* MatMak's animated outline */
}

.hpl-header-bar .trial-button:hover,
.hpl-header-bar .trial-button:focus {
  border-color: var(--hpl-red-dark);
  background: var(--hpl-red-dark);
  color: var(--hpl-white);
}

/* Home page: the blade cuts the button letter by letter (js/trial-cut.js) */
.hpl-header-bar .trial-button.is-cutting,
.hpl-header-bar .trial-button.is-cut {
  position: relative;
}

.trial-button .hpl-cut-char {
  transition: color 0.2s ease;
}

/* Not cut yet: faded, then solid once the blade has passed */
.trial-button.is-cutting .hpl-cut-char:not(.is-cut) {
  color: rgba(255, 255, 255, 0.3);
}

.hpl-cut-blade {
  position: absolute;
  top: -14px;
  left: 0;
  width: 14px;
  height: 22px;
  margin-left: -7px;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
  transition: transform 70ms linear, opacity 0.3s ease;
}

.hpl-cut-blade svg {
  display: block;
  width: 100%;
  height: 100%;
}

.trial-button.is-cut .hpl-cut-blade {
  opacity: 0;
}

/* Brand: white BODYFENCE wordmark | white HEXIS PRECUT LAB, at the site's size */
.hpl-brand {
  display: inline-flex;
  align-items: center;
  gap: 22px;
}

.hpl-brand-link {
  display: inline-flex;
  border-radius: 4px;
}

.hpl-brand-link:focus-visible {
  outline: 2px solid var(--hpl-white);
  outline-offset: 4px;
}

.hpl-brand-bodyfence {
  height: 61px;
  width: auto;
}

.hpl-brand-divider {
  width: 1px;
  height: 64px;
  background-color: rgba(255, 255, 255, 0.7);
}

.hpl-brand-hpl {
  height: 69px;
  width: auto;
}

/* Up to 1600px the full menu needs a little room */
@media (max-width: 1599.98px) {
  .hpl-header-bar {
    padding: 0 24px;
  }

  .hpl-brand { gap: 16px; }
  .hpl-brand-bodyfence { height: 44px; }
  .hpl-brand-divider { height: 50px; }
  .hpl-brand-hpl { height: 56px; }

  .hpl-header-bar .navbar-nav .nav-link {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    font-size: 0.95rem;
  }

  .hpl-header-bar .trial-button {
    padding: 6px 14px 6px 12px;
    font-size: 0.8rem;
  }

  .hpl-header-bar .trial-button i {
    margin-right: 6px;
  }

  .hpl-header-bar .loginNavCustom {
    margin-left: 12px;
  }

  .hpl-header-login,
  .hpl-header-bar .navbar-nav .hpl-header-login {
    font-size: 0.9rem;
  }
}

/* Full menu up to 1800px: six menu items fit on one line in every language (French is the longest);
   wider screens keep the full-size logos */
@media (min-width: 1400px) and (max-width: 1799.98px) {
  .hpl-brand { gap: 12px; }
  .hpl-brand-bodyfence { height: 38px; }
  .hpl-brand-divider { height: 44px; }
  .hpl-brand-hpl { height: 48px; }

  .hpl-header-bar .navbar-nav .nav-link {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .hpl-header-bar .trial-button {
    font-size: 0.75rem;
  }

  .hpl-header-login,
  .hpl-header-bar .navbar-nav .hpl-header-login {
    font-size: 0.85rem;
  }
}

@media (max-width: 1399.98px) {
  .hpl-brand-bodyfence { height: 38px; }
  .hpl-brand-divider { height: 42px; }
  .hpl-brand-hpl { height: 48px; }

}

@media (max-width: 575.98px) {
  .hpl-header-bar {
    padding: 0 16px;
  }

  /* Logos, menu button and the signed-in account menu stay on one line */
  .hpl-header-bar .navbar-brand {
    margin-right: 0;
  }

  .hpl-header-bar .navbar-toggler {
    padding: 0.25rem 0.5rem;
  }

  .hpl-header-bar .loginNavCustom {
    margin-left: 6px;
  }

  .hpl-brand { gap: 10px; }
  .hpl-brand-bodyfence { height: 28px; }
  .hpl-brand-divider { height: 30px; }
  .hpl-brand-hpl { height: 36px; }
}

/* Very small phones: room for the menu button and the account menu */
@media (max-width: 359.98px) {
  .hpl-brand { gap: 8px; }
  .hpl-brand-bodyfence { height: 22px; }
  .hpl-brand-divider { display: none; }
  .hpl-brand-hpl { height: 30px; }
}

/* Home hero, like bodyfence.net/hpl: short enough that the numbers below show on the first screen,
   with the image anchored to the bottom so the laptop sits higher */
.hpl-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, calc(100vh - 216px), 760px);
  margin-top: calc(-1 * var(--hpl-header-height));
  padding: calc(64px + var(--hpl-header-height)) 0 64px;
  background: var(--hpl-dark) url("../../img/hpl/hero.webp") 50% 100% / cover no-repeat;
  color: var(--hpl-white);
  overflow: hidden;
}

/* Darken the left side so the title stays readable over the image. The shade fades out toward the bottom, so the
   hero ends in the image's own dark grey and runs on into the numbers band without a visible edge. */
.hpl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 22, 27, 0.85) 0%, rgba(20, 22, 27, 0.45) 45%, rgba(20, 22, 27, 0) 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  pointer-events: none;
}

.hpl-hero-inner {
  position: relative;
  z-index: 1;
  /* Own width (custom.css widens .container) */
  max-width: 1180px;
  padding-left: 28px;
  padding-right: 28px;
}

.hpl-hero-tagline {
  margin-bottom: 28px;
  font-size: 0.95rem;
  font-weight: var(--hpl-weight-light);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hpl-grey-300);
}

.hpl-hero-title {
  max-width: 760px;
  margin-bottom: 44px;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--hpl-weight-light);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--hpl-white);
  /* Long words (German) wrap instead of running past the edge on small phones */
  overflow-wrap: break-word;
  hyphens: auto;
}

.hpl-hero-title em {
  font-style: italic;
  font-weight: 900;
}

.hpl-hero-title strong {
  font-weight: 900;
  color: var(--hpl-red-dark);
}

/* Glowing pill CTA used on the site hero */
.hpl-btn-glow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 35px;
  border: 2px solid var(--hpl-red-dark);
  border-radius: var(--hpl-radius-pill);
  background-color: var(--hpl-dark);
  color: var(--hpl-white);
  font-weight: var(--hpl-weight-light);
  box-shadow: 0 0 4.8px 1.6px var(--hpl-red-dark), 0 0 19.2px 3.2px rgba(255, 70, 70, 0.6);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.hpl-btn-glow:hover,
.hpl-btn-glow:focus {
  color: var(--hpl-white);
  background-color: var(--hpl-red-dark);
  transform: scale(1.05);
}

/* Hero buttons side by side, stacked when there's no room */
.hpl-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 40px;
}

/* "| Find your vehicle": white tab with the car sitting on its square corner, like bodyfence.net/hpl */
.hpl-find-vehicle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 30px 10px 110px;
  border-radius: 0 var(--hpl-radius-pill) var(--hpl-radius-pill) var(--hpl-radius-pill);
  background-color: var(--hpl-white);
  color: var(--hpl-dark);
  font-weight: var(--hpl-weight-medium);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.hpl-find-vehicle-icon {
  position: absolute;
  top: 35%;
  left: 60px;
  width: 50px;
  height: 50px;
  transform: translate(-30px, -50%);
  transition: transform 0.3s ease;
}

.hpl-find-vehicle-body {
  fill: var(--hpl-dark);
}

.hpl-find-vehicle-wheels {
  fill: var(--hpl-muted);
  transition: fill 0.3s ease;
}

.hpl-find-vehicle:hover,
.hpl-find-vehicle:focus-visible {
  background-color: var(--hpl-red-dark);
  color: var(--hpl-white);
}

.hpl-find-vehicle:focus-visible {
  outline: 2px solid var(--hpl-white);
  outline-offset: 3px;
}

.hpl-find-vehicle:hover .hpl-find-vehicle-icon,
.hpl-find-vehicle:focus-visible .hpl-find-vehicle-icon {
  transform: translate(0, -50%);
}

.hpl-find-vehicle:hover .hpl-find-vehicle-wheels,
.hpl-find-vehicle:focus-visible .hpl-find-vehicle-wheels {
  fill: var(--hpl-white);
}

@media (prefers-reduced-motion: reduce) {
  .hpl-find-vehicle,
  .hpl-find-vehicle-icon,
  .hpl-find-vehicle-wheels {
    transition: none;
  }
}

@media (max-width: 991.98px) {
  .hpl-hero {
    min-height: 70vh;
    background-image: url("../../img/hpl/hero-tablet.webp");
    background-position: 70% center;
  }

  .hpl-hero::before {
    background: rgba(20, 22, 27, 0.7);
  }
}

@media (max-width: 575.98px) {
  /* Tighter on phones so the numbers below still show on the first screen */
  .hpl-hero {
    min-height: 0;
    padding: calc(32px + var(--hpl-header-height)) 0 40px;
  }

  .hpl-hero-tagline { letter-spacing: 0.2em; font-size: 0.8rem; }
  .hpl-hero-title { margin-bottom: 28px; }

  /* "Find your vehicle" stays on one line */
  .hpl-find-vehicle {
    padding-left: 92px;
    padding-right: 22px;
    white-space: nowrap;
  }

  .hpl-find-vehicle-icon {
    left: 48px;
  }
}

/* Home statistics band, like bodyfence.net/hpl: dark, continuing the hero, the line icon beside each number */
.hpl-stats {
  padding: 40px 16px;
  background-color: var(--hpl-dark);
  text-align: center;
}

/* Home page: closer under the hero, with the chevron at the bottom of the first screen like the site */
.hpl-stats-home {
  padding: 34px 16px 16px;
}

.hpl-stats-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.hpl-stat {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.hpl-stat-icon {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  fill: var(--hpl-white);
}

.hpl-stat-icon-detail {
  opacity: 0.3;
}

.hpl-stat-number {
  margin: 0;
  color: var(--hpl-muted);
  font-size: 3rem;
  font-weight: var(--hpl-weight-bold);
  line-height: 1;
}

.hpl-stat-label {
  margin: 4px 0 0;
  color: var(--hpl-white);
  font-size: 1.2rem;
  font-weight: var(--hpl-weight-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* One line, so the three numbers stay level ("Marques de voitures" would wrap) */
  white-space: nowrap;
}

@media (max-width: 1199.98px) {
  .hpl-stat-number { font-size: 2.5rem; }
  .hpl-stat-label { font-size: 1rem; }
}

/* The site's chevron under the numbers (home page) */
.hpl-stats-more {
  display: block;
  width: 40px;
  height: 40px;
  margin: 46px auto 0;
  fill: var(--hpl-grey-300);
}

/* Narrower screens: the icon above the number, the three side by side, like the site on phones */
@media (max-width: 991.98px) {
  .hpl-stats {
    padding: 20px 12px 24px;
  }

  .hpl-stats-row {
    gap: 8px;
  }

  .hpl-stat {
    flex: 1 1 0;
    flex-direction: column;
    gap: 8px;
  }

  .hpl-stat-icon {
    width: 36px;
    height: 36px;
  }

  .hpl-stat-number {
    font-size: 1.6rem;
  }

  .hpl-stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    white-space: normal;
  }

  .hpl-stats-more {
    width: 28px;
    height: 28px;
    margin-top: 20px;
  }
}

/* Footer: dark and centered, like bodyfence.net/hpl */
.hpl-footer {
  padding: 64px 0 32px;
  background-color: var(--hpl-dark);
  color: var(--hpl-white);
  font-weight: var(--hpl-weight-light);
}

/*
 * MatMak's legacy custom.css pins <footer> with position: fixed and makes every page reserve
 * space for it (.container-margin-bottom / .learn-more-section, up to 780px). Put the footer
 * back in the normal page flow and drop that reserved space.
 */
footer.hpl-footer {
  position: static;
  display: block;
  height: auto;
  bottom: auto;
  z-index: auto;
  background-image: none;
}

.container-margin-bottom,
.learn-more-section {
  margin-bottom: 0;
}

/* Footer newsletter, like the site's "Abonnez-vous à notre newsletter" block above "À propos de nous" */
.hpl-newsletter {
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hpl-newsletter-title {
  margin: 0 0 16px;
  color: var(--hpl-white);
  font-size: 1.1rem;
  font-weight: var(--hpl-weight-semibold);
  letter-spacing: 0.04em;
}

.hpl-newsletter-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
}

.hpl-newsletter-input {
  flex: 1 1 220px;
  min-width: 0;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--hpl-muted);
  border-radius: var(--hpl-radius-pill);
  background-color: var(--hpl-white);
  color: var(--hpl-text);
  font-size: 0.95rem;
}

.hpl-newsletter-input:focus {
  outline: none;
  border-color: var(--hpl-red);
  box-shadow: var(--hpl-focus-ring);
}

.hpl-newsletter-input[aria-invalid="true"] {
  border-color: var(--hpl-red);
}

.hpl-newsletter-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--hpl-radius-pill);
  background-color: var(--hpl-red);
  color: var(--hpl-white);
  font-weight: var(--hpl-weight-semibold);
}

.hpl-newsletter-button:hover,
.hpl-newsletter-button:focus-visible {
  background-color: var(--hpl-red-dark);
}

.hpl-newsletter-button:focus-visible {
  outline: 2px solid var(--hpl-white);
  outline-offset: 2px;
}

/* The captcha only shows when Cloudflare needs the visitor to interact */
.hpl-newsletter-captcha {
  display: flex;
  flex-basis: 100%;
  justify-content: center;
}

.hpl-newsletter-captcha:empty {
  display: none;
}

.hpl-newsletter-message {
  display: inline-block;
  margin: 14px 0 0;
  padding: 8px 16px;
  border-radius: var(--hpl-radius-pill);
  font-size: 0.9rem;
  font-weight: var(--hpl-weight-medium);
}

.hpl-newsletter-message.is-success {
  background-color: var(--hpl-success-bg);
  color: var(--hpl-success);
}

.hpl-newsletter-message.is-error {
  background-color: #FDECEE;
  color: var(--hpl-danger);
}

.hpl-footer-logo {
  height: 96px;
  width: auto;
  margin-bottom: 28px;
}

.hpl-footer-title {
  margin-bottom: 8px;
  font-size: 0.9rem;
  font-weight: var(--hpl-weight-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hpl-footer-about {
  max-width: 760px;
  margin: 0 auto 32px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.hpl-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.hpl-footer-links a {
  color: var(--hpl-white);
  font-size: 0.85rem;
  font-weight: var(--hpl-weight-regular);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hpl-footer-links a:hover,
.hpl-footer-links a:focus {
  color: var(--hpl-red);
}

.hpl-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 28px;
  font-size: 0.8rem;
  color: var(--hpl-muted);
}

.hpl-footer-legal-title {
  font-weight: var(--hpl-weight-medium);
  letter-spacing: 0.08em;
}

.hpl-footer-legal a {
  color: var(--hpl-muted);
}

.hpl-footer-legal a:hover,
.hpl-footer-legal a:focus {
  color: var(--hpl-white);
}

.hpl-footer-separator {
  width: 1px;
  height: 16px;
  background-color: var(--hpl-muted);
}

.hpl-footer-copyright {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--hpl-muted);
}

/* Pricing page, like bodyfence.net/hpl/tarifs */
.hpl-pricing {
  /* Starts under the floating header, like the site's dark page tops */
  margin-top: calc(-1 * var(--hpl-header-height));
  padding: calc(72px + var(--hpl-header-height)) 0 72px;
  /* The site's pricing photo under a dark-to-white veil, like bodyfence.net/hpl/tarifs */
  background:
    linear-gradient(180deg, rgba(38, 42, 50, 0.8) 0%, var(--hpl-white) 90%),
    var(--hpl-dark) url("../../img/hpl/pricing-bg.webp") center / cover no-repeat;
  color: var(--hpl-white);
  text-align: center;
}

.hpl-pricing-kicker {
  margin-bottom: 4px;
  font-size: 0.95rem;
  font-weight: var(--hpl-weight-light);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.hpl-pricing-title {
  margin-bottom: 24px;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  color: var(--hpl-red);
}

.hpl-pricing-subtitle {
  margin-bottom: 48px;
  font-size: 1.15rem;
  font-weight: var(--hpl-weight-light);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Car / Bicycle switch above the cards: a frosted pill on the dark top, the chosen side in brand red (.nav-pills) */
.hpl-pricing-tabs {
  display: inline-flex;
  gap: 4px;
  margin: -16px 0 40px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--hpl-radius-pill);
  backdrop-filter: blur(4px);
}

.hpl-pricing-tabs .nav-link {
  min-width: 140px;
  padding: 8px 28px;
  color: var(--hpl-white);
  font-weight: var(--hpl-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hpl-pricing-tabs .nav-link:not(.active):hover {
  color: var(--hpl-white);
  background: rgba(255, 255, 255, 0.15);
}

.hpl-pricing-tabs .nav-link:focus-visible {
  box-shadow: var(--hpl-focus-ring);
}

@media (max-width: 399.98px) {
  .hpl-pricing-tabs .nav-link {
    min-width: 0;
    padding: 8px 20px;
  }
}

.hpl-pricing-empty {
  color: var(--hpl-grey-300);
}

.hpl-plan-col {
  display: flex;
  flex-direction: column;
}

.hpl-plan-col .hpl-plan {
  flex: 1 1 auto;
}

/* The m² / ft² note sits under the Credit card; the other columns keep an empty line so the cards stay the same height */
.hpl-plan-note {
  min-height: 1.2em;
  margin: 10px 0 0;
  /* Dark: the cards' lower edge sits on the light end of the background */
  color: rgba(var(--hpl-dark-rgb), 0.75);
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: center;
}

@media (max-width: 575.98px) {
  .hpl-plan-note:empty {
    display: none;
  }
}

.hpl-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 32px 20px 28px;
  background: rgba(255, 255, 255, 0.62);
  border: 2px solid var(--hpl-white);
  border-radius: var(--hpl-radius-sm);
  box-shadow: 0 10px 12px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
  color: var(--hpl-text);
}

.hpl-plan-featured {
  background: rgba(255, 255, 255, 0.75);
  border-color: var(--hpl-red-dark);
  box-shadow: 0 12px 30px 2px rgba(0, 0, 0, 0.45);
}

.hpl-plan-title {
  width: 80%;
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--hpl-white);
  font-size: 1.5rem;
  color: var(--hpl-dark);
}

.hpl-plan-price {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 18px 0 14px;
  font-size: 3.5rem;
  font-weight: var(--hpl-weight-heavy);
  line-height: 1;
  color: var(--hpl-red);
}

.hpl-plan-currency {
  margin: 6px 4px 0 0;
  font-size: 1rem;
  font-weight: var(--hpl-weight-semibold);
}

.hpl-plan-features {
  flex-grow: 1;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.hpl-plan-features li {
  position: relative;
  margin-bottom: 6px;
  padding-left: 16px;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--hpl-dark);
}

/* Small red corner marker, like the site */
.hpl-plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  border-style: solid;
  border-width: 0 0 8px 8px;
  border-color: transparent transparent var(--hpl-red) transparent;
}

.hpl-plan-btn {
  min-width: 142px;
  padding: 12px 30px;
  border: 2px solid var(--hpl-red);
  border-radius: var(--hpl-radius-pill);
  background-color: var(--hpl-red);
  color: var(--hpl-white);
  font-weight: var(--hpl-weight-light);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hpl-plan-btn:hover:not(:disabled) {
  background-color: var(--hpl-red-dark);
  border-color: var(--hpl-red-dark);
}

.hpl-plan-btn:disabled {
  cursor: default;
  opacity: 0.85;
}

.hpl-plan-btn.is-current {
  background-color: transparent;
  border-color: var(--hpl-dark);
  color: var(--hpl-dark);
}

/*
 * Account modals (login, register, forgot and reset password).
 * The plugin's look (white card, centered title, labels above grey pill inputs) with a visible field border,
 * one red primary button, inline errors and a full-screen sheet on phones.
 */
.hpl-modal .modal-dialog {
  max-width: 480px;
}

.hpl-modal .modal-dialog.modal-lg {
  max-width: 680px;
}

/* custom.css darkens every backdrop to 90%; behind the account forms the page stays a little visible, like the plugin */
body:has(.hpl-modal.show) .modal-backdrop.show {
  opacity: 0.75;
}

.hpl-modal .modal-content {
  position: relative;
  border: 0;
  border-radius: var(--hpl-radius-card);
  background-color: var(--hpl-white);
  box-shadow: 0 24px 64px rgba(18, 24, 32, 0.28);
  font-family: var(--hpl-font);
  color: var(--hpl-text);
}

.hpl-modal .modal-body {
  padding: 40px 40px 32px;
}

/* Close button inside the card, with a 44px touch target */
.hpl-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--hpl-grey-100);
  background-size: 12px;
  opacity: 1;
}

.hpl-modal-close:hover {
  background-color: var(--hpl-grey-300);
}

.hpl-modal-close:focus-visible {
  box-shadow: var(--hpl-focus-ring);
}

.hpl-modal-head {
  margin-bottom: 24px;
  text-align: center;
}

.hpl-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  border-radius: 50%;
  background-color: rgba(var(--hpl-red-rgb), 0.08);
  color: var(--hpl-red);
  font-size: 1.6rem;
}

.hpl-icon-badge.is-success {
  background-color: var(--hpl-success-bg);
  color: var(--hpl-success);
}

.hpl-modal-title {
  margin: 0 0 6px;
  color: var(--hpl-dark);
  font-size: 1.5rem;
  font-weight: var(--hpl-weight-bold);
  letter-spacing: 0.02em;
}

/* 75% of the dark brand color keeps supporting text above 4.5:1 on white */
.hpl-modal-subtitle {
  margin: 0;
  color: rgba(var(--hpl-dark-rgb), 0.75);
  font-size: 0.95rem;
  line-height: 1.5;
}

.hpl-modal-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--hpl-red);
  font-weight: var(--hpl-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hpl-modal-link:hover,
.hpl-modal-link:focus-visible {
  color: var(--hpl-red-dark);
}

.hpl-modal-link-muted {
  color: var(--hpl-dark);
  font-weight: var(--hpl-weight-medium);
}

.hpl-modal-footer-link {
  margin-top: 20px;
  text-align: center;
  font-size: 0.9rem;
}

/* One message area per form for the server's answer */
.hpl-alert {
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--hpl-radius);
  font-size: 0.9rem;
  line-height: 1.45;
}

.hpl-alert.is-error {
  border-color: rgba(var(--hpl-red-rgb), 0.25);
  background-color: #FDEEEE;
  color: var(--hpl-danger);
}

.hpl-alert.is-success {
  border-color: rgba(10, 122, 51, 0.25);
  background-color: var(--hpl-success-bg);
  color: var(--hpl-success);
}

.hpl-alert.is-info {
  border-color: var(--hpl-border);
  background-color: var(--hpl-grey-50);
  color: var(--hpl-dark);
}

/* Free trial summary at the top of the register form */
.hpl-modal-note {
  margin-bottom: 20px;
  padding: 16px 20px;
  border: 1px solid rgba(var(--hpl-red-rgb), 0.2);
  border-radius: var(--hpl-radius);
  background-color: rgba(var(--hpl-red-rgb), 0.05);
}

.hpl-modal-note-title {
  margin: 0 0 8px;
  color: var(--hpl-dark);
  font-weight: var(--hpl-weight-bold);
}

.hpl-modal-note-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.hpl-modal-note-list span {
  color: rgba(var(--hpl-dark-rgb), 0.75);
}

.hpl-modal-note-list strong {
  color: var(--hpl-dark);
  font-weight: var(--hpl-weight-semibold);
}

/* System requirements in the download dialog: neutral information, so the red stays for the download button */
.hpl-download-req {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius);
  background-color: var(--hpl-grey-50);
  text-align: left;
}

.hpl-download-req-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--hpl-white);
  color: var(--hpl-dark);
  font-size: 1.15rem;
  box-shadow: 0 1px 3px rgba(18, 24, 32, 0.12);
}

.hpl-download-req-title {
  margin: 0 0 2px;
  color: var(--hpl-dark);
  font-size: 0.9rem;
  font-weight: var(--hpl-weight-semibold);
}

.hpl-download-req-text {
  margin: 0;
  color: rgba(var(--hpl-dark-rgb), 0.75);
  font-size: 0.875rem;
  line-height: 1.45;
}

.hpl-done {
  text-align: center;
}

.hpl-done .hpl-modal-title {
  margin-bottom: 8px;
}

.hpl-done .hpl-modal-subtitle {
  margin-bottom: 24px;
}

/* Fields */
.hpl-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}

/* A field across both columns of the grid */
.hpl-field-grid > .hpl-field-wide {
  grid-column: 1 / -1;
}

.hpl-field {
  margin-bottom: 18px;
}

.hpl-label {
  display: block;
  margin-bottom: 6px;
  color: var(--hpl-dark);
  font-size: 0.875rem;
  font-weight: var(--hpl-weight-medium);
}

/* The plugin's grey pill, with a border that stays visible on white (WCAG 1.4.11); 16px text avoids the iOS zoom */
.hpl-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 20px;
  border: 1px solid rgba(var(--hpl-dark-rgb), 0.5);
  border-radius: var(--hpl-radius-pill);
  background-color: var(--hpl-grey-100);
  color: var(--hpl-dark);
  font-family: var(--hpl-font);
  font-size: 1rem;
  font-weight: var(--hpl-weight-regular);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.hpl-input::placeholder {
  color: var(--hpl-muted);
  opacity: 1;
}

.hpl-input:hover {
  border-color: rgba(var(--hpl-dark-rgb), 0.75);
}

.hpl-input:focus {
  border-color: var(--hpl-red);
  outline: 0;
  background-color: var(--hpl-white);
  box-shadow: var(--hpl-focus-ring);
}

.hpl-input.input-validation-error {
  border-color: var(--hpl-danger);
  background-color: #FFF7F7;
}

.hpl-select {
  padding-right: 48px;
  background-position: right 18px center;
  cursor: pointer;
}

.hpl-field-hint {
  margin: 6px 0 0;
  padding: 0 20px;
  color: rgba(var(--hpl-dark-rgb), 0.7);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.hpl-field-error {
  display: block;
  margin-top: 6px;
  padding: 0 20px;
  color: var(--hpl-danger);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.hpl-field-error:empty {
  display: none;
}

/* Show / hide password */
.hpl-password {
  position: relative;
}

.hpl-password .hpl-input {
  padding-right: 56px;
}

.hpl-password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(var(--hpl-dark-rgb), 0.7);
  font-size: 1.1rem;
  transform: translateY(-50%);
}

.hpl-password-toggle:hover {
  background-color: rgba(var(--hpl-dark-rgb), 0.06);
  color: var(--hpl-dark);
}

.hpl-password-toggle:focus-visible {
  outline: 2px solid var(--hpl-red);
  outline-offset: 0;
}

/* intl-tel-input (country flag and dial code) inside the pill */
.hpl-modal .iti {
  display: block;
  width: 100%;
}

.hpl-modal .iti__selected-flag {
  padding-left: 16px;
  border-radius: var(--hpl-radius-pill) 0 0 var(--hpl-radius-pill);
}

.hpl-modal .iti__country-list {
  max-width: min(360px, 80vw);
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius);
  box-shadow: var(--hpl-shadow);
  white-space: normal;
}

/* Terms checkbox */
.hpl-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 6px;
}

.hpl-check .form-check-input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border: 1.5px solid rgba(var(--hpl-dark-rgb), 0.55);
  border-radius: var(--hpl-radius-sm);
  cursor: pointer;
}

.hpl-check .form-check-input:checked {
  border-color: var(--hpl-red);
  background-color: var(--hpl-red);
}

.hpl-check .form-check-input:focus {
  border-color: var(--hpl-red);
  box-shadow: var(--hpl-focus-ring);
}

.hpl-check label {
  color: var(--hpl-text);
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
}

/* The id outranks custom.css "#RegisterFormModal a:link" (MatMak blue) without !important */
#RegisterFormModal .hpl-check a {
  color: var(--hpl-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hpl-check-error {
  margin-bottom: 8px;
  padding-left: 32px;
}

/* Primary action: the site's red pill */
.hpl-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--hpl-radius-pill);
  background-color: var(--hpl-red);
  color: var(--hpl-white);
  font-size: 0.95rem;
  font-weight: var(--hpl-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.hpl-submit:hover {
  background-color: var(--hpl-red-dark);
}

.hpl-submit:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--hpl-white), 0 0 0 5px var(--hpl-red);
}

.hpl-submit[aria-busy="true"] {
  cursor: progress;
  opacity: 0.85;
}

/* Phones: full-screen sheet that grows with the form and scrolls as one page.
   Bootstrap keeps the full-screen dialog at height 100% and centers it, which pushes the top of a taller form
   out of reach; let the dialog grow instead. */
@media (max-width: 575.98px) {
  .hpl-modal .modal-dialog {
    height: auto;
    min-height: 100%;
    align-items: stretch;
  }

  .hpl-modal .modal-content {
    height: auto;
    min-height: 100%;
    border-radius: 0;
    box-shadow: none;
  }

  .hpl-modal .modal-body {
    padding: 64px 20px 32px;
  }

  .hpl-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Inner page header (Views/Shared/PartialViews/_PageHeader.cshtml): title and breadcrumb on one line in a slim dark
 * band that starts under the floating header, aligned with the header's content. They stack on narrow screens.
 */
.hpl-page-header {
  margin-top: calc(-1 * var(--hpl-header-height));
  padding: calc(var(--hpl-header-height) + 4px) 16px 18px;
  background-color: var(--hpl-dark);
}

.hpl-page-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.hpl-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--hpl-muted-light);
  font-size: 0.75rem;
  font-weight: var(--hpl-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hpl-breadcrumb li + li::before {
  content: "/";
  margin: 0 10px;
  color: var(--hpl-red);
}

.hpl-breadcrumb a {
  color: var(--hpl-muted-light);
  text-decoration: none;
}

.hpl-breadcrumb a:hover,
.hpl-breadcrumb a:focus-visible {
  color: var(--hpl-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hpl-breadcrumb [aria-current="page"] {
  color: var(--hpl-white);
}

.hpl-page-title {
  margin: 0;
  color: var(--hpl-white);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: var(--hpl-weight-heavy);
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
}

@media (max-width: 575.98px) {
  .hpl-page-header-inner {
    padding: 0 8px;
  }
}

/* Status badge variants (the base badge is with the account modals) */
.hpl-icon-badge.is-neutral {
  background-color: var(--hpl-grey-200);
  color: var(--hpl-dark);
}

.hpl-icon-badge.is-error {
  background-color: rgba(var(--hpl-red-rgb), 0.1);
  color: var(--hpl-danger);
}

/* A link styled as the primary button keeps its white text */
a.hpl-submit,
a.hpl-submit:hover,
a.hpl-submit:focus-visible {
  color: var(--hpl-white);
  text-decoration: none;
}

/* Secondary action under a primary button */
.hpl-result-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--hpl-dark);
  font-size: 0.95rem;
  font-weight: var(--hpl-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hpl-result-link:hover,
.hpl-result-link:focus-visible {
  color: var(--hpl-red);
}

/* Stripe result pages (payment successful, cancelled or failed, trial started): one centered card */
.hpl-result-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 48px 16px 72px;
  background-color: var(--hpl-grey-50);
}

.hpl-result {
  width: 100%;
  max-width: 520px;
  padding: 40px 40px 32px;
  border-radius: var(--hpl-radius-card);
  background-color: var(--hpl-white);
  box-shadow: var(--hpl-shadow);
  text-align: center;
}

.hpl-result-title {
  margin: 0 0 12px;
  color: var(--hpl-dark);
  font-size: 1.6rem;
  font-weight: var(--hpl-weight-bold);
  letter-spacing: 0.02em;
}

.hpl-result-text {
  margin: 0 0 8px;
  color: rgba(var(--hpl-dark-rgb), 0.75);
  line-height: 1.55;
}

.hpl-result-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.hpl-result-actions .hpl-submit {
  margin-top: 0;
}

/* Contact page: the support card of bodyfence.net/hpl/contact, details on the left and the ticket form on the right */
.hpl-contact {
  padding: 40px 16px 72px;
  background-color: var(--hpl-grey-50);
}

.hpl-contact-card {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px;
  border-radius: var(--hpl-radius-card);
  background-color: var(--hpl-white);
  box-shadow: var(--hpl-shadow);
}

.hpl-contact-head {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
}

.hpl-contact-title {
  margin: 0 0 8px;
  color: var(--hpl-dark);
  font-size: 1.5rem;
  font-weight: var(--hpl-weight-bold);
  letter-spacing: 0.02em;
}

.hpl-contact-intro {
  margin: 0;
  color: rgba(var(--hpl-dark-rgb), 0.75);
}

.hpl-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 48px;
}

.hpl-contact-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-right: 32px;
  border-right: 1px solid var(--hpl-border);
}

/* Side by side, centered (Support page) */
.hpl-contact-info.is-row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 64px;
  margin: 24px 0 8px;
  padding: 0;
  border: 0;
}

.hpl-contact-block h3 {
  margin: 0 0 8px;
  color: var(--hpl-red);
  font-size: 0.85rem;
  font-weight: var(--hpl-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hpl-contact-block a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--hpl-dark);
  font-size: 1.1rem;
  font-weight: var(--hpl-weight-medium);
  text-decoration: none;
}

.hpl-contact-block a:hover,
.hpl-contact-block a:focus-visible {
  color: var(--hpl-red);
}

.hpl-contact-block a i {
  color: var(--hpl-red);
}

.hpl-contact-block span {
  display: block;
  margin: 2px 0 10px 28px;
  color: rgba(var(--hpl-dark-rgb), 0.65);
  font-size: 0.8rem;
}

.hpl-contact-account {
  margin: -6px 0 16px;
  padding: 0;
}

.hpl-contact-submit {
  width: auto;
  min-width: 240px;
}

.hpl-contact-form .hpl-done {
  padding: 32px 0;
}

/* Signed-in users send the ticket with their account name and email */
.hpl-input[readonly] {
  background-color: var(--hpl-grey-200);
  color: rgba(var(--hpl-dark-rgb), 0.75);
  cursor: default;
}

.hpl-textarea {
  height: auto;
  min-height: 150px;
  padding: 14px 20px;
  border-radius: var(--hpl-radius);
  line-height: 1.5;
  resize: vertical;
}

@media (max-width: 991.98px) {
  .hpl-contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .hpl-contact-info {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px 48px;
    padding: 0 0 24px;
    border-right: 0;
    border-bottom: 1px solid var(--hpl-border);
  }
}

@media (max-width: 575.98px) {
  .hpl-result,
  .hpl-contact-card {
    padding: 28px 20px 24px;
  }

  .hpl-contact-submit {
    width: 100%;
  }
}

/* Small uppercase line above a title, like "Precision. Efficiency. Speed." on the site */
.hpl-kicker {
  margin: 0 0 10px;
  color: var(--hpl-red);
  font-size: 0.8rem;
  font-weight: var(--hpl-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* About: intro with the software picture, then the feature cards and a trial call to action */
.hpl-about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 24px;
}

.hpl-about-title {
  margin: 0 0 16px;
  color: var(--hpl-dark);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.15;
}

.hpl-about-lead {
  margin: 0;
  color: rgba(var(--hpl-dark-rgb), 0.8);
  font-size: 1.1rem;
  line-height: 1.6;
}

.hpl-about-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--hpl-radius-card);
  box-shadow: var(--hpl-shadow);
  object-fit: cover;
  object-position: 82% 78%;
}

.hpl-about-features {
  padding: 64px 24px;
  background-color: var(--hpl-grey-50);
}

.hpl-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.hpl-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius-card);
  background-color: var(--hpl-white);
}

.hpl-feature p {
  margin: 0;
  color: var(--hpl-text);
  line-height: 1.55;
}

.hpl-feature-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--hpl-radius);
  background-color: rgba(var(--hpl-red-rgb), 0.08);
  color: var(--hpl-red);
  font-size: 1.3rem;
}

.hpl-cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
  padding: 48px 24px;
  text-align: center;
}

.hpl-cta-band p {
  max-width: 560px;
  margin: 0;
  color: var(--hpl-dark);
  font-size: 1.15rem;
  font-weight: var(--hpl-weight-medium);
}

.hpl-cta-band .hpl-submit {
  width: auto;
  margin: 0;
}

/* Legal pages: the operator's text in a readable column */
.hpl-legal {
  padding: 48px 16px 72px;
  background-color: var(--hpl-grey-50);
}

.hpl-legal-card {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 48px;
  border-radius: var(--hpl-radius-card);
  background-color: var(--hpl-white);
  box-shadow: var(--hpl-shadow-sm);
  color: var(--hpl-text);
  line-height: 1.7;
}

.hpl-legal-card h2 {
  margin: 32px 0 10px;
  color: var(--hpl-dark);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}

.hpl-legal-card h2:first-child {
  margin-top: 0;
}

.hpl-legal-card ol {
  padding-left: 1.25rem;
}

.hpl-legal-card li + li {
  margin-top: 6px;
}

.hpl-legal-card a {
  color: var(--hpl-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Support: "Need more help?" with the HPL contacts */
.hpl-support-contact {
  max-width: 1100px;
  margin: 48px auto 0;
  padding: 40px 24px;
  border-radius: var(--hpl-radius-card);
  background-color: var(--hpl-grey-50);
  text-align: center;
}

.hpl-support-contact h2 {
  margin: 0;
  color: var(--hpl-dark);
  font-size: 1.4rem;
}

.hpl-support-contact .hpl-submit {
  width: auto;
  margin-top: 16px;
}

@media (max-width: 991.98px) {
  .hpl-about-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 40px 16px;
  }

  .hpl-feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .hpl-about-features,
  .hpl-cta-band {
    padding: 40px 16px;
  }

  .hpl-legal-card {
    padding: 28px 20px;
  }

  .hpl-cta-band .hpl-submit,
  .hpl-support-contact .hpl-submit {
    width: 100%;
  }
}

/* Results page filter column: regular-size selects so the labels fit */
.research-result-left-panel .left-panel .form-select-lg {
  font-size: 0.95rem;
}

/* Header: the account pill on the dark bar, with the initials in HPL red and the first name (cut when long).
   "Compte" is only read to screen readers. */
.hpl-account-menu {
  display: flex;
  align-items: center;
}

.hpl-account-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: var(--hpl-white);
  font-size: 0.9rem;
  font-weight: var(--hpl-weight-medium);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hpl-account-toggle:hover,
.hpl-account-toggle:focus-visible,
.hpl-account-toggle[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--hpl-white);
}

.hpl-account-toggle:focus-visible {
  outline: 2px solid var(--hpl-red);
  outline-offset: 2px;
}

.hpl-account-toggle .hpl-account-avatar,
.hpl-account-dropdown-who .hpl-account-avatar {
  background-color: var(--hpl-red);
  color: var(--hpl-white);
}

.hpl-account-toggle .hpl-account-avatar.is-small {
  width: 30px;
  height: 30px;
  font-size: 0.75rem;
}

.hpl-account-toggle-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hpl-account-chevron {
  font-size: 0.7rem;
  opacity: 0.85;
  transition: transform 0.2s ease;
}

.hpl-account-toggle[aria-expanded="true"] .hpl-account-chevron {
  transform: rotate(180deg);
}

/* The menu: who is signed in at the top, sign out in red at the bottom */
.hpl-account-dropdown {
  min-width: 250px;
}

.hpl-account-dropdown-who {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 6px;
}

.hpl-account-dropdown-who .hpl-account-avatar.is-small {
  width: 38px;
  height: 38px;
  font-size: 0.8rem;
}

.hpl-account-dropdown-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hpl-account-dropdown-name {
  max-width: 180px;
  overflow: hidden;
  color: var(--hpl-dark);
  font-weight: var(--hpl-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hpl-account-dropdown-role {
  color: var(--hpl-muted);
  font-size: 0.75rem;
}

.hpl-account-menu .dropdown-item i {
  width: 20px;
  margin-right: 6px;
  color: rgba(var(--hpl-dark-rgb), 0.6);
}

.hpl-account-menu .hpl-account-logout-item,
.hpl-account-menu .hpl-account-logout-item i {
  color: var(--hpl-red);
}

/* Account pages: sidebar with who is signed in and the account menu, the page's cards beside it */
.hpl-account-page {
  background-color: var(--hpl-grey-50);
}

.hpl-account {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.hpl-account-sidebar {
  position: sticky;
  top: 24px; /* the header scrolls away with the page */
  padding: 28px 20px 24px;
  border-radius: var(--hpl-radius-card);
  background-color: var(--hpl-white);
  box-shadow: var(--hpl-shadow-sm);
}

.hpl-account-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  text-align: center;
}

.hpl-account-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: var(--hpl-dark);
  color: var(--hpl-white);
  font-size: 1.8rem;
  font-weight: var(--hpl-weight-bold);
  letter-spacing: 0.04em;
}

.hpl-account-avatar.is-small {
  width: 34px;
  height: 34px;
  font-size: 0.8rem;
}

.hpl-account-name {
  margin: 0;
  color: var(--hpl-dark);
  font-size: 1.15rem;
  font-weight: var(--hpl-weight-semibold);
}

.hpl-account-company {
  margin: 2px 0 0;
  color: var(--hpl-red);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hpl-account-nav ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: var(--hpl-radius);
  background-color: var(--hpl-grey-100);
}

.hpl-account-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: rgba(var(--hpl-dark-rgb), 0.75);
  font-weight: var(--hpl-weight-medium);
  text-decoration: none;
}

.hpl-account-nav a:hover,
.hpl-account-nav a:focus-visible {
  background-color: rgba(var(--hpl-dark-rgb), 0.06);
  color: var(--hpl-dark);
}

.hpl-account-nav a.is-active {
  background-color: var(--hpl-dark);
  color: var(--hpl-white);
}

.hpl-account-nav i {
  font-size: 1.1rem;
}

.hpl-account-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.hpl-account-download {
  margin-top: 0;
}

.hpl-account-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(var(--hpl-dark-rgb), 0.7);
  font-weight: var(--hpl-weight-medium);
  text-decoration: none;
}

.hpl-account-logout:hover,
.hpl-account-logout:focus-visible {
  color: var(--hpl-red);
}

.hpl-account-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.hpl-account-card {
  padding: 32px 36px;
  border-radius: var(--hpl-radius-card);
  background-color: var(--hpl-white);
  box-shadow: var(--hpl-shadow-sm);
}

.hpl-account-card-title {
  margin: 0 0 20px;
  color: var(--hpl-dark);
  font-size: 1.3rem;
  letter-spacing: 0.03em;
}

.hpl-account-subtitle {
  margin: 12px 0 4px;
  color: var(--hpl-dark);
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.hpl-account-hint {
  margin: 0 0 14px;
  padding: 0;
}

.hpl-account-submit {
  width: auto;
  min-width: 200px;
}

.hpl-account-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.hpl-account-form-actions .hpl-submit {
  margin-top: 0;
}

/* Settings > My rolls */
.hpl-roll-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hpl-roll {
  position: relative;
  padding: 16px 56px 2px 16px;
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius);
  background-color: var(--hpl-grey-50);
}

.hpl-roll-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  column-gap: 12px;
}

.hpl-roll .hpl-field {
  margin-bottom: 14px;
}

.hpl-roll .hpl-label {
  font-size: 0.8rem;
}

.hpl-roll-remove {
  position: absolute;
  top: 12px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(var(--hpl-dark-rgb), 0.6);
}

.hpl-roll-remove:hover,
.hpl-roll-remove:focus-visible {
  background-color: rgba(var(--hpl-red-rgb), 0.08);
  color: var(--hpl-red);
}

.hpl-roll-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--hpl-border);
  border-radius: var(--hpl-radius);
  color: rgba(var(--hpl-dark-rgb), 0.65);
  text-align: center;
}

@media (max-width: 991.98px) {
  .hpl-account {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 24px 16px 56px;
  }

  /* The sidebar becomes a compact header; its menu becomes a grid so every item stays visible */
  .hpl-account-sidebar {
    position: static;
    padding: 18px 16px;
  }

  .hpl-account-identity {
    flex-direction: row;
    gap: 14px;
    margin-bottom: 14px;
    text-align: left;
  }

  .hpl-account-avatar {
    width: 56px;
    height: 56px;
    font-size: 1.2rem;
  }

  .hpl-account-nav ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .hpl-account-nav a {
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 0.9rem;
    line-height: 1.2;
  }

  .hpl-account-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 14px;
  }

  .hpl-account-download {
    width: auto;
  }

  .hpl-roll-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hpl-roll-fields .hpl-field:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575.98px) {
  .hpl-account-card {
    padding: 24px 18px;
  }

  .hpl-account-submit,
  .hpl-account-form-actions .hpl-submit {
    width: 100%;
  }

  .hpl-roll-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Phones: the pill keeps only the initials and the chevron */
  .hpl-account-toggle {
    gap: 6px;
    padding-right: 9px;
  }

  .hpl-account-toggle-name {
    display: none;
  }
}

/* Account > Free Access users: the plugin's Free Access dashboard in the account card style */
.hpl-fa-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 8px;
}

.hpl-fa-topbar .hpl-account-card-title {
  margin: 0;
}

.hpl-fa .hpl-fa-open-create,
.hpl-fa-dialog-actions .hpl-submit {
  width: auto;
  min-height: 46px;
  margin-top: 0;
}

.hpl-fa-limit-hint {
  margin: 0 0 12px;
  color: rgba(var(--hpl-dark-rgb), 0.75);
  font-size: 0.875rem;
  text-align: right;
}

.hpl-fa-summary {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  margin: 16px 0 20px;
}

.hpl-fa-metric {
  padding: 18px 20px;
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius);
  background-color: var(--hpl-grey-50);
}

.hpl-fa-metric p {
  margin: 4px 0 0;
  color: rgba(var(--hpl-dark-rgb), 0.65);
  font-size: 0.85rem;
}

.hpl-fa-metric-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.hpl-fa-metric-label {
  display: block;
  color: rgba(var(--hpl-dark-rgb), 0.7);
  font-size: 0.8rem;
  font-weight: var(--hpl-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hpl-fa-metric-value {
  display: block;
  color: var(--hpl-dark);
  font-size: 1.9rem;
  font-weight: var(--hpl-weight-bold);
  line-height: 1.1;
}

.hpl-fa-metric-value small {
  color: rgba(var(--hpl-dark-rgb), 0.55);
  font-size: 1rem;
  font-weight: var(--hpl-weight-medium);
}

.hpl-fa-progress {
  overflow: hidden;
  height: 8px;
  margin: 12px 0 8px;
  border-radius: var(--hpl-radius-pill);
  background-color: var(--hpl-grey-200);
}

.hpl-fa-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--hpl-red);
  transition: width 0.3s ease;
}

.hpl-fa-metric-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(var(--hpl-dark-rgb), 0.7);
  font-size: 0.85rem;
}

.hpl-fa-banner {
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid #F3D9A4;
  border-radius: var(--hpl-radius);
  background-color: var(--hpl-warning-bg);
  color: #6B4A05;
  font-size: 0.9rem;
}

/* Status fits "Todos los estados" and the select arrow; below 1400px the search gets its own row */
.hpl-fa-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr) 96px auto;
  align-items: end;
  gap: 12px;
}

@media (max-width: 1399.98px) {
  .hpl-fa-toolbar {
    grid-template-columns: minmax(200px, 1fr) 96px auto;
  }

  .hpl-fa-toolbar .hpl-fa-search {
    grid-column: 1 / -1;
  }
}

.hpl-fa-toolbar .hpl-field {
  margin-bottom: 16px;
}

.hpl-fa-toolbar-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.hpl-fa-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid rgba(var(--hpl-dark-rgb), 0.35);
  border-radius: var(--hpl-radius-pill);
  background-color: var(--hpl-white);
  color: var(--hpl-dark);
  font-size: 0.875rem;
  font-weight: var(--hpl-weight-medium);
  white-space: nowrap;
}

.hpl-fa-secondary:hover:not(:disabled),
.hpl-fa-secondary:focus-visible,
.hpl-fa-secondary.is-open {
  border-color: var(--hpl-dark);
  background-color: var(--hpl-grey-100);
}

.hpl-fa-secondary:focus-visible {
  outline: 2px solid var(--hpl-red);
  outline-offset: 2px;
}

.hpl-fa-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hpl-fa-table-wrap {
  overflow-x: auto;
  /* Scrolls sideways only: overflow-x alone also turns on a vertical scrollbar for the last pixel of the table */
  overflow-y: hidden;
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius);
}

.hpl-fa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.hpl-fa-table th,
.hpl-fa-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hpl-border);
  text-align: left;
  vertical-align: middle;
}

.hpl-fa-table thead th {
  background-color: var(--hpl-grey-50);
  color: rgba(var(--hpl-dark-rgb), 0.75);
  font-size: 0.78rem;
  font-weight: var(--hpl-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hpl-fa-table tbody tr:last-child td {
  border-bottom: 0;
}

.hpl-fa-table td strong,
.hpl-fa-table td span:not(.hpl-fa-badge) {
  display: block;
}

.hpl-fa-table td span:not(.hpl-fa-badge) {
  color: rgba(var(--hpl-dark-rgb), 0.65);
  font-size: 0.82rem;
}

.hpl-fa-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.hpl-fa-sort::after {
  content: "\2195";
  opacity: 0.35;
}

th.is-sorted.asc .hpl-fa-sort::after {
  content: "\2191";
  opacity: 1;
}

th.is-sorted.desc .hpl-fa-sort::after {
  content: "\2193";
  opacity: 1;
}

th.is-sorted .hpl-fa-sort {
  color: var(--hpl-dark);
}

.hpl-fa-sort:focus-visible {
  outline: 2px solid var(--hpl-red);
  outline-offset: 2px;
}

.hpl-fa-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--hpl-radius-pill);
  background-color: var(--hpl-grey-200);
  color: var(--hpl-dark);
  font-size: 0.78rem;
  font-weight: var(--hpl-weight-semibold);
  white-space: nowrap;
}

.hpl-fa-badge.is-active {
  background-color: var(--hpl-success-bg);
  color: var(--hpl-success);
}

.hpl-fa-badge.is-paused {
  background-color: var(--hpl-warning-bg);
  color: #8A5A00;
}

.hpl-fa-empty td {
  padding: 28px 16px;
  text-align: center;
}

.hpl-fa-empty td strong {
  margin-bottom: 4px;
}

.hpl-fa-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  color: rgba(var(--hpl-dark-rgb), 0.75);
  font-size: 0.875rem;
}

.hpl-fa-pager {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* One floating menu for the row actions, placed under (or above) the button that opened it */
.hpl-fa-actions-menu {
  position: fixed;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  min-width: 210px;
  padding: 6px;
  border-radius: var(--hpl-radius);
  background-color: var(--hpl-white);
  box-shadow: var(--hpl-shadow);
}

.hpl-fa-actions-menu[hidden] {
  display: none;
}

.hpl-fa-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--hpl-dark);
  font-size: 0.9rem;
  text-align: left;
}

.hpl-fa-menu-item:hover:not(:disabled),
.hpl-fa-menu-item:focus-visible {
  background-color: var(--hpl-grey-100);
  color: var(--hpl-red);
  outline: none;
}

.hpl-fa-menu-item:disabled {
  opacity: 0.45;
}

/* The row's Actions button: a caret like the plugin's, and a spinner in place of the label while it works */
.hpl-fa-actions-toggle {
  position: relative;
  min-width: 108px;
  min-height: 34px;
  padding: 4px 14px;
  font-size: 0.82rem;
}

.hpl-fa-actions-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  margin: -3px 0 0 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.hpl-fa-actions-toggle.is-open::after {
  margin-top: 3px;
  transform: rotate(225deg);
}

.hpl-fa-actions-toggle.is-loading {
  color: transparent;
  cursor: wait;
}

.hpl-fa-actions-toggle.is-loading::after {
  display: none;
}

.hpl-fa-actions-toggle.is-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(var(--hpl-red-rgb), 0.25);
  border-top-color: var(--hpl-red);
  border-radius: 50%;
  animation: hpl-fa-spin 0.75s linear infinite;
}

@keyframes hpl-fa-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Hints, like the plugin's: on hover and on keyboard focus (a title only shows on mouse hover) */
.hpl-fa-menu-item[data-hint],
.hpl-fa-toolbar-actions [data-hint] {
  position: relative;
}

.hpl-fa-menu-item[data-hint]::after,
.hpl-fa-toolbar-actions [data-hint]::after {
  content: attr(data-hint);
  position: absolute;
  z-index: 5;
  width: max-content;
  max-width: min(230px, calc(100vw - 32px));
  padding: 8px 10px;
  border: 1px solid var(--hpl-border);
  border-radius: 8px;
  background-color: var(--hpl-white);
  box-shadow: 0 12px 28px rgba(18, 24, 32, 0.16);
  color: var(--hpl-dark);
  font-size: 0.78rem;
  font-weight: var(--hpl-weight-medium);
  line-height: 1.35;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

/* Menu items: to the left of the menu */
.hpl-fa-menu-item[data-hint]::after {
  top: 50%;
  right: calc(100% + 14px);
  transform: translate(4px, -50%);
}

/* Clear / Refresh: above the button, kept inside the card */
.hpl-fa-toolbar-actions [data-hint]::after {
  right: 0;
  bottom: calc(100% + 8px);
  transform: translateY(4px);
}

.hpl-fa-menu-item[data-hint]:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.hpl-fa-toolbar-actions [data-hint]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) {
  .hpl-fa-menu-item[data-hint]:hover::after {
    opacity: 1;
    transform: translate(0, -50%);
  }

  .hpl-fa-toolbar-actions [data-hint]:hover::after {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dialogs: native <dialog>, like the plugin, so a notice can open over the user form */
.hpl-fa-dialog {
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  /* Centered: custom.css's "* { margin: 0 }" removes the browser's margin: auto */
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--hpl-radius-card);
  box-shadow: var(--hpl-shadow);
  color: var(--hpl-text);
}

.hpl-fa-dialog::backdrop {
  background-color: rgba(18, 22, 30, 0.55);
}

.hpl-fa-dialog.hpl-fa-confirm {
  width: min(480px, calc(100vw - 24px));
}

.hpl-fa-dialog-body {
  padding: 24px 28px;
}

.hpl-fa-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.hpl-fa-dialog-title {
  margin: 0;
  color: var(--hpl-dark);
  font-size: 1.2rem;
  font-weight: var(--hpl-weight-bold);
}

.hpl-fa-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.hpl-fa-phone {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hpl-fa-phone-code {
  flex: 0 0 auto;
  min-width: 52px;
  color: var(--hpl-dark);
  font-weight: var(--hpl-weight-semibold);
  text-align: center;
}

.hpl-fa-phone-code:empty {
  display: none;
}

/* The user's sign-in password, set apart from their details, with its rule under both fields */
.hpl-fa-access {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--hpl-border);
}

.hpl-fa-password-hint {
  margin: -8px 0 14px;
}

.hpl-fa-user-card {
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: var(--hpl-radius);
  background-color: var(--hpl-grey-100);
}

.hpl-fa-user-card strong,
.hpl-fa-user-card span {
  display: block;
}

.hpl-fa-user-card span {
  color: rgba(var(--hpl-dark-rgb), 0.65);
  font-size: 0.875rem;
}

.hpl-fa-confirm-head {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}

.hpl-fa-confirm-head p {
  margin: 6px 0 0;
  color: rgba(var(--hpl-dark-rgb), 0.8);
}

.hpl-fa-confirm-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(var(--hpl-red-rgb), 0.1);
  color: var(--hpl-red);
  font-weight: var(--hpl-weight-bold);
}

.hpl-fa-confirm-mark i {
  font-size: 1.25rem;
  line-height: 1;
}

/* A notice about something that worked (user added or updated, welcome email sent) */
.hpl-fa-confirm-mark.is-success {
  background-color: var(--hpl-success-bg);
  color: var(--hpl-success);
}

#faConfirmSubmit.is-success {
  background-color: var(--hpl-success);
}

#faConfirmSubmit.is-danger {
  background-color: var(--hpl-red);
}

.hpl-fa-usage-title {
  margin-bottom: 16px;
}

.hpl-fa-usage-title strong,
.hpl-fa-usage-title span {
  display: block;
}

.hpl-fa-usage-title span {
  color: rgba(var(--hpl-dark-rgb), 0.65);
}

.hpl-fa-usage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hpl-fa-usage-grid > div {
  padding: 14px 16px;
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius);
}

.hpl-fa-usage-grid span {
  display: block;
  color: rgba(var(--hpl-dark-rgb), 0.65);
  font-size: 0.8rem;
}

.hpl-fa-usage-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--hpl-dark);
  font-size: 1.15rem;
}

.hpl-fa-error {
  margin: 0;
  color: var(--hpl-danger);
}

/* Account > Ambassador: the plugin's voucher cards, voucher clients (Type tabs, Actions menu) and client invoices */
.hpl-amb-section + .hpl-amb-section {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--hpl-border);
}

.hpl-amb-section-title {
  margin: 0 0 14px;
  color: var(--hpl-dark);
  font-size: 1.05rem;
  font-weight: var(--hpl-weight-semibold);
}

.hpl-amb-vouchers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hpl-amb-voucher {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius);
  background-color: var(--hpl-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .hpl-amb-voucher:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  }
}

.hpl-amb-voucher-name {
  display: block;
  color: var(--hpl-dark);
  font-size: 1.1rem;
  font-weight: var(--hpl-weight-semibold);
}

.hpl-amb-voucher-details p {
  margin: 4px 0 0;
  color: rgba(var(--hpl-dark-rgb), 0.65);
  font-size: 0.9rem;
}

.hpl-amb-code {
  color: var(--hpl-red);
  font-size: 1rem;
  font-weight: var(--hpl-weight-semibold);
  letter-spacing: 0.04em;
}

.hpl-amb-generate {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 8px;
  min-height: 38px;
  padding: 8px 18px;
  border: 0;
  border-radius: var(--hpl-radius-pill);
  background-color: var(--hpl-red);
  color: var(--hpl-white);
  font-size: 0.85rem;
  font-weight: var(--hpl-weight-semibold);
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.hpl-amb-generate:hover:not(:disabled) {
  background-color: var(--hpl-dark);
}

.hpl-amb-generate:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--hpl-white), 0 0 0 5px var(--hpl-red);
}

.hpl-amb-generate:disabled {
  cursor: progress;
  opacity: 0.85;
}

/* An empty list's sentence, shared by the account pages */
.hpl-account-empty {
  margin: 0;
  color: rgba(var(--hpl-dark-rgb), 0.65);
}

.hpl-account-muted {
  color: rgba(var(--hpl-dark-rgb), 0.65);
  font-size: 0.85rem;
}

#ambGenerateFeedback,
#ambInvoiceFeedback {
  margin-top: 14px;
}

.hpl-amb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.hpl-amb-tab {
  padding: 8px 18px;
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius-pill);
  background-color: var(--hpl-white);
  color: var(--hpl-dark);
  font-size: 0.875rem;
  font-weight: var(--hpl-weight-medium);
}

.hpl-amb-tab:hover {
  border-color: var(--hpl-dark);
}

.hpl-amb-tab[aria-selected="true"] {
  border-color: var(--hpl-dark);
  background-color: var(--hpl-dark);
  color: var(--hpl-white);
}

.hpl-amb-tab:focus-visible {
  outline: 2px solid var(--hpl-red);
  outline-offset: 2px;
}

.hpl-amb-table td:first-child {
  min-width: 9rem;
}

/* A transferred or cancelled client: faded and inactive, like the plugin */
.hpl-amb-table tr.is-done {
  opacity: 0.5;
}

.hpl-amb-table tr.is-done td {
  pointer-events: none;
}

.hpl-fa-actions-toggle.is-complete {
  opacity: 1;
  cursor: default;
}

.hpl-fa-actions-toggle.is-complete::after {
  display: none;
}

.hpl-amb-download,
.hpl-inv-download {
  min-height: 34px;
  padding: 4px 14px;
  font-size: 0.82rem;
}

/* Account > My subscriptions: the plugin's credit balance line (its cards are the .hpl-item ones below) */
.hpl-subs-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 20px;
  padding: 14px 18px;
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius);
  background-color: var(--hpl-grey-50);
}

.hpl-subs-credit-label {
  color: rgba(var(--hpl-dark-rgb), 0.75);
  font-size: 0.95rem;
  font-weight: var(--hpl-weight-medium);
}

.hpl-subs-credit-value {
  color: var(--hpl-dark);
  font-size: 1.15rem;
  font-weight: var(--hpl-weight-bold);
}

.hpl-subs-unit {
  color: rgba(var(--hpl-dark-rgb), 0.6);
  font-size: 0.8rem;
  font-weight: var(--hpl-weight-medium);
}

#subsFeedback {
  margin-bottom: 16px;
}

/* Account cards (My subscriptions, My invoices): name and badge, label/value lines, actions at the bottom */
.hpl-item-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hpl-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius);
  background-color: var(--hpl-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hpl-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.hpl-item-name {
  margin: 0;
  color: var(--hpl-dark);
  font-size: 1.05rem;
  font-weight: var(--hpl-weight-semibold);
  overflow-wrap: anywhere;
}

.hpl-item-details {
  display: grid;
  gap: 8px;
  margin: 0;
}

.hpl-item-details > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.hpl-item-details dt {
  color: rgba(var(--hpl-dark-rgb), 0.65);
  font-size: 0.85rem;
  font-weight: var(--hpl-weight-regular);
}

.hpl-item-details dd {
  margin: 0;
  color: var(--hpl-dark);
  font-size: 0.9rem;
  font-weight: var(--hpl-weight-semibold);
  text-align: right;
}

.hpl-item-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

.hpl-subs-cancel {
  min-height: 34px;
  padding: 4px 16px;
  font-size: 0.82rem;
}

.hpl-subs-cancel:hover:not(:disabled) {
  border-color: var(--hpl-red);
  color: var(--hpl-red);
}

@media (max-width: 767.98px) {
  .hpl-item-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Account > My invoices: the plugin's "Next billing on" line under the cards */
.hpl-inv-next {
  margin: 20px 0 0;
  color: rgba(var(--hpl-dark-rgb), 0.65);
  font-size: 0.9rem;
  text-align: center;
}

/* The client's current subscription in the confirmation. The plan name gets the whole first row (the API sends long
   names in capitals, which a third of the dialog cut mid-word); type and end date share the second, as in Free Access */
.hpl-voucher-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 14px 0 18px;
}

.hpl-voucher-summary > div:first-child {
  grid-column: 1 / -1;
}

.hpl-voucher-summary strong {
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

@media (max-width: 1199.98px) {
  .hpl-fa-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Clear and Refresh now start at the card's left edge: their hints open to the right */
  .hpl-fa-toolbar-actions [data-hint]::after {
    right: auto;
    left: 0;
  }
}

/* Phones: the summary stacks and each user becomes a card, with the column name before each value */
@media (max-width: 767.98px) {
  .hpl-fa-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .hpl-fa-limit-hint {
    text-align: left;
  }

  .hpl-fa-table-wrap {
    overflow: visible;
    border: 0;
  }

  .hpl-fa-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .hpl-fa-table,
  .hpl-fa-table tbody,
  .hpl-fa-table tr,
  .hpl-fa-table td {
    display: block;
    width: 100%;
  }

  .hpl-fa-table tbody tr {
    margin-bottom: 12px;
    padding: 6px 14px;
    border: 1px solid var(--hpl-border);
    border-radius: var(--hpl-radius);
  }

  .hpl-fa-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    text-align: right;
  }

  .hpl-fa-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: rgba(var(--hpl-dark-rgb), 0.65);
    font-size: 0.78rem;
    font-weight: var(--hpl-weight-semibold);
    text-align: left;
    text-transform: uppercase;
  }

  .hpl-fa-table td > strong,
  .hpl-fa-table td > span:not(.hpl-fa-badge) {
    overflow-wrap: anywhere;
  }

  /* Like the plugin: the user (name and email) heads the card, and the Actions button needs no label */
  .hpl-fa-table td:first-child {
    display: block;
    padding-top: 10px;
    text-align: left;
  }

  .hpl-fa-table td:first-child > strong {
    font-size: 1rem;
  }

  .hpl-fa-table td:first-child::before,
  .hpl-fa-table td:last-child::before {
    content: none;
  }

  .hpl-fa-table td:last-child {
    justify-content: flex-end;
    padding-top: 12px;
  }

  .hpl-fa-menu-item[data-hint]::after {
    top: auto;
    right: 0;
    bottom: calc(100% + 8px);
    transform: translateY(4px);
  }

  .hpl-fa-menu-item[data-hint]:focus-visible::after {
    transform: translateY(0);
  }

  .hpl-amb-vouchers {
    grid-template-columns: minmax(0, 1fr);
  }

  .hpl-amb-table td {
    overflow-wrap: anywhere;
  }

  .hpl-fa-table tr.hpl-fa-empty td {
    display: block;
    text-align: center;
  }

  .hpl-fa-table tr.hpl-fa-empty td::before {
    content: none;
  }

  .hpl-fa-dialog-body {
    padding: 20px 18px;
  }

  .hpl-fa-dialog .hpl-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hpl-fa-dialog-actions .hpl-submit,
  .hpl-fa-dialog-actions .hpl-fa-secondary {
    flex: 1 1 auto;
  }
}

@media (max-width: 575.98px) {
  .hpl-fa-topbar .hpl-fa-open-create {
    width: 100%;
  }

  .hpl-fa-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .hpl-fa-usage-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * HPL theme for the markup inherited from MatMak.Client.
 * custom.css and the search stylesheets take their colors from the HPL tokens; this part gives MatMak's shared
 * building blocks the HPL shapes: square blue buttons, light-blue fields, tables, paging, accordion, alerts and
 * SweetAlert dialogs. That markup carries Bootstrap's !important utilities (.rounded-0, .border-0), so the overrides
 * of exactly those utilities are !important too, and only on the inherited classes.
 */

/* Buttons: MatMak's primary (.bg-blue) and dark (.bg-black) buttons become the site's pills */
.btn.bg-blue,
.btn.bg-black {
  border-radius: var(--hpl-radius-pill) !important;
  font-weight: var(--hpl-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.btn.bg-blue:hover,
.btn.bg-blue:focus-visible {
  background-color: var(--hpl-red-dark) !important;
}

.btn.bg-black {
  background-color: var(--hpl-dark) !important;
  color: var(--hpl-white) !important;
}

.btn.bg-black:hover,
.btn.bg-black:focus-visible {
  background-color: var(--hpl-black) !important;
}

.btn.bg-blue:focus-visible,
.btn.bg-black:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--hpl-white), 0 0 0 5px var(--hpl-red);
}

/* Fields: MatMak's borderless light-blue boxes become HPL fields with a visible border */
input.bg-light-blue,
select.bg-light-blue,
textarea.bg-light-blue,
.hpl-dd-trigger.bg-light-blue {
  border: 1px solid rgba(var(--hpl-dark-rgb), 0.35) !important;
  border-radius: var(--hpl-radius) !important;
  color: var(--hpl-dark);
  font-family: var(--hpl-font);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

input.bg-light-blue:hover,
select.bg-light-blue:hover,
textarea.bg-light-blue:hover,
.hpl-dd-trigger.bg-light-blue:hover {
  border-color: rgba(var(--hpl-dark-rgb), 0.6) !important;
}

input.bg-light-blue:focus,
select.bg-light-blue:focus,
textarea.bg-light-blue:focus,
.hpl-dd-trigger.bg-light-blue:focus {
  border-color: var(--hpl-red) !important;
  outline: 0;
  background-color: var(--hpl-white);
  box-shadow: var(--hpl-focus-ring);
}

/* Bootstrap's own focus rings are blue; use the brand ring everywhere */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--hpl-red);
  box-shadow: var(--hpl-focus-ring);
}

/* Tables: dark header like the site's bands, quiet rows */
.table {
  --bs-table-border-color: var(--hpl-border);
  --bs-table-hover-bg: rgba(var(--hpl-dark-rgb), 0.04);
  font-family: var(--hpl-font);
}

.table > thead > tr > th {
  --bs-table-bg: var(--hpl-dark);
  --bs-table-color: var(--hpl-white);
  border-bottom: 0;
  font-size: 0.78rem;
  font-weight: var(--hpl-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Paging */
.pagination {
  --bs-pagination-color: var(--hpl-dark);
  --bs-pagination-hover-color: var(--hpl-red);
  --bs-pagination-focus-color: var(--hpl-red);
  --bs-pagination-focus-box-shadow: var(--hpl-focus-ring);
  --bs-pagination-active-bg: var(--hpl-red);
  --bs-pagination-active-border-color: var(--hpl-red);
}

/* Accordion (FAQ) */
.accordion {
  --bs-accordion-active-color: var(--hpl-dark);
  --bs-accordion-active-bg: var(--hpl-grey-100);
  --bs-accordion-btn-focus-border-color: var(--hpl-red);
  --bs-accordion-btn-focus-box-shadow: var(--hpl-focus-ring);
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23262A32' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

/* MatMak's "primary" alert was a solid blue block; in red it would read as an error, so it becomes a neutral note */
.alert-primary {
  --bs-alert-color: var(--hpl-dark);
  --bs-alert-bg: var(--hpl-grey-100);
  --bs-alert-border-color: var(--hpl-border);
}

/* SweetAlert2 dialogs that don't pass a button color */
.swal2-popup {
  border-radius: var(--hpl-radius-card);
  font-family: var(--hpl-font);
}

.swal2-styled {
  border-radius: var(--hpl-radius-pill);
  font-weight: var(--hpl-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.swal2-styled.swal2-confirm {
  background-color: var(--hpl-red);
}

.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
  background-color: var(--hpl-dark);
}

.swal2-styled:focus,
.swal2-styled:focus-visible {
  box-shadow: var(--hpl-focus-ring);
}

/* SweetAlert's question and info icons are blue-grey by default */
.swal2-icon.swal2-question,
.swal2-icon.swal2-info {
  border-color: var(--hpl-muted);
  color: var(--hpl-dark);
}

/* Page loader (_Layout): a spinning ring in HPL red, in a small white circle over a light veil */
@keyframes hpl-spin {
  to { transform: rotate(360deg); }
}

.hpl-loader {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.55);
}

.hpl-loader-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--hpl-white);
  box-shadow: 0 12px 32px rgba(18, 24, 32, 0.18);
}

.hpl-loader-ring {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(var(--hpl-red-rgb), 0.15);
  border-top-color: var(--hpl-red);
  border-radius: 50%;
  animation: hpl-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hpl-loader-ring {
    animation-duration: 2.4s;
  }
}

@keyframes hpl-pulse-drive {
  0%, 100% { transform: translate(-50%, -50%) translateX(0) scale(1); }
  25% { transform: translate(-50%, -50%) translateX(-3px) scale(1.05); }
  75% { transform: translate(-50%, -50%) translateX(3px) scale(1.05); }
}

@media (max-width: 920px) {
  .hpl-app .grid-2,
  .hpl-app .grid-3,
  .hpl-app .mm-modal-grid { grid-template-columns: 1fr; }
}

/*
 * HPL dropdown (wwwroot/js/hpl-dropdown.js): a styled, searchable list over each select. The select itself stays in
 * the form, out of sight: 1px and transparent rather than hidden, so validation still checks it.
 */
.hpl-dd {
  position: relative;
}

.hpl-dd-native {
  position: absolute !important;
  bottom: 0;
  left: 50%;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* The button wears the select's classes, so it looks like the field it replaces; the chevron is its own */
.hpl-dd-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding-right: 48px !important;
  background-image: none !important;
  text-align: left;
  cursor: pointer;
}

.hpl-dd-trigger.text-center {
  padding-left: 48px !important;
  text-align: center;
}

.hpl-dd-trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease, margin-top 0.2s ease;
}

.hpl-dd.is-open .hpl-dd-trigger::after {
  margin-top: -1px;
  transform: rotate(225deg);
}

.hpl-dd-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hpl-dd-trigger.is-placeholder .hpl-dd-value {
  color: rgba(var(--hpl-dark-rgb), 0.6);
}

.hpl-dd-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.hpl-dd.is-open .hpl-dd-trigger {
  border-color: var(--hpl-red) !important;
  background-color: var(--hpl-white);
  box-shadow: var(--hpl-focus-ring);
}

.hpl-dd-panel {
  position: absolute;
  z-index: 1065;
  padding: 6px;
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius);
  background-color: var(--hpl-white);
  box-shadow: 0 16px 40px rgba(18, 24, 32, 0.16);
  text-align: left;
  animation: hpl-dd-in 0.14s ease;
}

.hpl-dd.is-up .hpl-dd-panel {
  animation-name: hpl-dd-in-up;
}

@keyframes hpl-dd-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes hpl-dd-in-up {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.hpl-dd-search {
  position: relative;
  margin-bottom: 6px;
}

.hpl-dd-search .bi {
  position: absolute;
  top: 50%;
  left: 14px;
  color: rgba(var(--hpl-dark-rgb), 0.55);
  font-size: 0.85rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.hpl-dd-search-input {
  width: 100%;
  min-height: 40px;
  padding: 8px 14px 8px 36px;
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius-pill);
  background-color: var(--hpl-grey-50);
  color: var(--hpl-dark);
  font-family: var(--hpl-font);
  font-size: 0.95rem;
  outline: 0;
}

.hpl-dd-search-input:focus {
  border-color: var(--hpl-red);
  background-color: var(--hpl-white);
  box-shadow: var(--hpl-focus-ring);
}

.hpl-dd-list {
  /* The items' offsets are measured from the list (scrollIntoList) */
  position: relative;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  outline: 0;
  scrollbar-width: thin;
}

.hpl-dd-list [role="option"] {
  position: relative;
  padding: 10px 40px 10px 12px;
  border-radius: 8px;
  color: var(--hpl-dark);
  font-size: 0.95rem;
  line-height: 1.3;
  cursor: pointer;
}

.hpl-dd-list [role="option"].is-active {
  background-color: rgba(var(--hpl-red-rgb), 0.08);
}

/* The keyboard's current item gets a ring as well, in case the tint is hard to see */
.hpl-dd-list:focus-visible [role="option"].is-active,
.hpl-dd-search:focus-within + .hpl-dd-list [role="option"].is-active {
  box-shadow: inset 0 0 0 1px rgba(var(--hpl-red-rgb), 0.45);
}

.hpl-dd-list [role="option"].is-selected {
  color: var(--hpl-red);
  font-weight: var(--hpl-weight-semibold);
}

.hpl-dd-list [role="option"].is-selected::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 11px;
  height: 6px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: translateY(-70%) rotate(-45deg);
}

.hpl-dd-list [role="option"].is-placeholder {
  color: rgba(var(--hpl-dark-rgb), 0.6);
  font-weight: var(--hpl-weight-regular);
}

.hpl-dd-list [role="option"][aria-disabled="true"] {
  background: none;
  color: rgba(var(--hpl-dark-rgb), 0.45);
  cursor: default;
}

.hpl-dd-empty {
  margin: 0;
  padding: 14px 12px;
  color: rgba(var(--hpl-dark-rgb), 0.65);
  font-size: 0.9rem;
  text-align: center;
}

/* Touch screens: bigger rows, and 16px search text so iOS doesn't zoom in */
@media (pointer: coarse) {
  .hpl-dd-search-input {
    min-height: 44px;
    font-size: 1rem;
  }

  .hpl-dd-list [role="option"] {
    padding-top: 13px;
    padding-bottom: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hpl-dd-panel,
  .hpl-dd-trigger::after {
    animation: none;
    transition: none;
  }
}

/* Support: the operating systems' compatibility, a status pill with an icon instead of emoji */
.hpl-compat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 5px;
  border-radius: var(--hpl-radius-pill);
  font-size: 0.85rem;
  font-weight: var(--hpl-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}

.hpl-compat .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--hpl-white);
  font-size: 0.8rem;
}

.hpl-compat.is-yes {
  background-color: var(--hpl-success-bg);
  color: var(--hpl-success);
}

.hpl-compat.is-yes .bi {
  background-color: var(--hpl-success);
}

.hpl-compat.is-no {
  background-color: rgba(var(--hpl-red-rgb), 0.08);
  color: var(--hpl-red);
}

.hpl-compat.is-no .bi {
  background-color: var(--hpl-red);
}

/*
 * Phones and tablets (below 1400px): the menu opens as a white panel like the HPL site's (Bootstrap's responsive
 * offcanvas, offcanvas-xxl): the HEXIS PRECUT LAB logo with a round close button, centered capital links, sign in,
 * the BODYFENCE logo and the languages.
 */
@media (max-width: 1399.98px) {
  /* The header keeps the panel under its own layer (z-index 1030), below Bootstrap's backdrop: let it out while open */
  #main-header:has(.hpl-menu-panel.showing, .hpl-menu-panel.show, .hpl-menu-panel.hiding) {
    z-index: auto;
  }

  .hpl-header-bar .hpl-menu-panel.offcanvas-xxl {
    --bs-offcanvas-width: min(420px, calc(100vw - 16px));
    top: 8px;
    right: 8px;
    bottom: 8px;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background-color: var(--hpl-white);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    color: var(--hpl-dark);
    transform: translateX(calc(100% + 16px));
  }

  .hpl-header-bar .hpl-menu-panel.offcanvas-xxl.showing,
  .hpl-header-bar .hpl-menu-panel.offcanvas-xxl.show:not(.hiding) {
    transform: none;
  }

  .hpl-menu-panel-header {
    position: relative;
    justify-content: center;
    padding: 30px 64px 10px;
  }

  .hpl-menu-panel-logo img {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
  }

  .hpl-menu-panel-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background-color: var(--hpl-grey-200);
    color: var(--hpl-dark);
    font-size: 1rem;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .hpl-menu-panel-close:hover {
    background-color: var(--hpl-dark);
    color: var(--hpl-white);
  }

  .hpl-menu-panel-close:focus-visible {
    outline: 2px solid var(--hpl-red);
    outline-offset: 2px;
  }

  .hpl-menu-panel-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px 24px 24px;
    text-align: center;
  }

  .hpl-header-bar .hpl-menu-panel .navbar-nav {
    width: 100%;
    margin: 0 !important;
    align-items: center;
  }

  .hpl-header-bar .hpl-menu-panel .navbar-nav .nav-link {
    padding: 9px 12px;
    color: var(--hpl-dark);
    font-size: 1.15rem;
    font-weight: var(--hpl-weight-regular);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .hpl-header-bar .hpl-menu-panel .navbar-nav .nav-link:hover,
  .hpl-header-bar .hpl-menu-panel .navbar-nav .nav-link:focus,
  .hpl-header-bar .hpl-menu-panel .navbar-nav .nav-link.active,
  .hpl-header-bar .hpl-menu-panel .navbar-nav .nav-link.show {
    color: var(--hpl-red);
  }

  /* Products and Contact open their links in place, as a soft block under the item */
  .hpl-header-bar .hpl-menu-panel .dropdown-menu {
    position: static;
    min-width: 220px;
    margin: 0 auto 6px;
    padding: 6px;
    border: 0;
    border-radius: 12px;
    background-color: var(--hpl-grey-50);
    box-shadow: none;
    text-align: center;
  }

  .hpl-header-bar .hpl-menu-panel .dropdown-item {
    border-radius: 8px;
    color: var(--hpl-dark);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: uppercase;
  }

  .hpl-header-bar .hpl-menu-panel .dropdown-item:hover,
  .hpl-header-bar .hpl-menu-panel .dropdown-item:focus,
  .hpl-header-bar .hpl-menu-panel .dropdown-item.active {
    background-color: rgba(var(--hpl-red-rgb), 0.08);
    color: var(--hpl-red);
  }

  .hpl-header-bar .hpl-menu-panel .dropdown-divider {
    display: none;
  }

  /* The languages are at the bottom of the panel */
  .hpl-header-bar .hpl-menu-panel .matmak-language-nav-item {
    display: none;
  }

  /* "Sign In / Register" in grey, like the site */
  .hpl-header-bar .hpl-menu-panel .navbar-nav .hpl-header-login {
    color: rgba(var(--hpl-dark-rgb), 0.6);
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
  }

  .hpl-header-bar .hpl-menu-panel .navbar-nav .hpl-header-login:hover,
  .hpl-header-bar .hpl-menu-panel .navbar-nav .hpl-header-login:focus {
    color: var(--hpl-red);
  }

  .hpl-header-bar .hpl-menu-panel .nav-icons-right.main-nav-right {
    display: flex;
    justify-content: center;
    width: 100% !important;
    margin: 10px 0 0;
  }

  .hpl-header-bar .hpl-menu-panel .nav-icons-right .navbar-nav {
    margin: 0 !important;
  }

  /* The trial button turns red on the white panel */
  .hpl-header-bar .hpl-menu-panel .trial-button {
    border-color: var(--hpl-red);
    background-color: var(--hpl-red);
    color: var(--hpl-white);
  }

  /* MatMak's preferences gear: the account menu in the header leads to the settings */
  .hpl-header-bar .hpl-menu-panel .Language {
    display: none;
  }

  .hpl-menu-panel-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: auto;
    padding-top: 22px;
  }

  .hpl-menu-panel-bodyfence img {
    display: block;
    width: 200px;
    height: auto;
  }

  .hpl-menu-languages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hpl-menu-language {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--hpl-radius-pill);
    background: none;
    color: rgba(var(--hpl-dark-rgb), 0.8);
    font-size: 0.85rem;
  }

  .hpl-menu-language img {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
  }

  .hpl-menu-language:hover,
  .hpl-menu-language.is-active {
    background-color: var(--hpl-grey-100);
    color: var(--hpl-dark);
  }

  .hpl-menu-language.is-active {
    font-weight: var(--hpl-weight-semibold);
  }

  .hpl-menu-language:focus-visible {
    outline: 2px solid var(--hpl-red);
    outline-offset: 2px;
  }
}