/* Shared UI tokens extracted from the protected root index.html / assets/home.css.
   Kept separate from home.css so the reference page cannot change indirectly. */
body.hp-ui {
  --ink: #0d1435;
  --muted: #586579;
  --blue: #0064f5;
  --green: #13b79a;
  --bg-main: #fbfefe;
  --bg-card: #fff;
  --bg-card-hover: #f0f7ff;
  --bg-input: #f8fbff;
  --text-main: #0d1435;
  --text-muted: #586579;
  --text-dim: #64748b;
  --accent-blue: #0064f5;
  --accent-orange: #0064f5;
  --primary-orange: #0064f5;
  --primary-orange-hover: #0058d6;
  --accent-blue-hover: #0058d6;
  --success-green: #079681;
  --warning-yellow: #946300;
  --danger-red: #c52c45;
  --border-color: #dfe8f3;
  --border-focus: #0064f5;
  --shadow-card: 0 8px 28px #1237650b;
  --shadow-glow: 0 4px 15px #0064f51a;
  --shadow-blue-glow: 0 4px 15px #0064f51a;
  --bg: #fbfefe;
  --surface: #fff;
  --surface-alt: #f0f7ff;
  --text: #0d1435;
  --border: #dfe8f3;
  --primary: #0064f5;
  --primary-dark: #0058d6;
  --accent: #0064f5;
  --purple: #0064f5;
  --line: #dfe8f3;
  --font-sans: "Segoe UI", Arial, sans-serif;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  width: 100%;
  font-family: "Segoe UI", Arial, sans-serif !important;
  background: linear-gradient(#fff, #fbfefe) !important;
  color: #0d1435 !important;
  font-size: 14px;
  line-height: 1.7;
  overflow-x: visible !important;
}
.hp-ui,
.hp-ui * {
  box-sizing: border-box;
}
.hp-ui :where(main, section, article, div, figure, form, aside) {
  min-width: 0;
}
.hp-ui :where(h1, h2, h3, h4, p, a, li, td, th, code) {
  overflow-wrap: anywhere;
}
.hp-ui :where(h1, h2, h3, h4) {
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.5px;
}
.hp-ui h1 {
  font-size: clamp(28px, 3.7vw, 46px) !important;
  max-width: 100%;
  white-space: normal !important;
  line-height: 1.2 !important;
}
.hp-ui h2 {
  font-size: clamp(22px, 2.4vw, 30px);
}
.hp-ui :where(a) {
  color: #005bcf;
  text-underline-offset: 4px;
}
.hp-ui :where(a:hover) {
  color: #0046a8;
}
.hp-ui :where(button, input, textarea, select) {
  font: inherit;
}
.hp-ui :where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid #0076ff;
  outline-offset: 3px;
}
.hp-ui :where(img, video, iframe) {
  max-width: 100%;
}
.hp-ui img {
  object-fit: contain !important;
}
.hp-ui :where(img) {
  height: auto;
}
.hp-ui :where(.container, .wrap, .page-shell) {
  width: calc(100% - 88px) !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
.hp-ui
  :where(.container, .wrap, .page-shell)
  :where(.container, .wrap, .page-shell) {
  width: 100% !important;
  max-width: 100% !important;
}
.hp-ui .hp-page-main {
  flex: 1;
  max-width: 100%;
  padding-bottom: 24px;
}
.hp-ui .hp-page-main > .hero:not(.container),
.hp-ui .about-hero {
  width: calc(100% - 88px);
  max-width: 1240px;
  margin-inline: auto;
}
.hp-ui :where(.hero, .about-hero) {
  position: relative;
  padding-block: clamp(34px, 5vw, 65px) !important;
  background: linear-gradient(115deg, #f5faff, #effcfb) !important;
  border-radius: 20px;
  color: var(--ink) !important;
  overflow: visible !important;
}
.hp-ui :where(.hero, .about-hero) :where(p, .subtitle, .lead) {
  color: #586579 !important;
  max-width: 760px;
}
.hp-ui :where(.hero, .about-hero) > p {
  margin-inline: auto;
}
.hp-ui :where(.hero, .about-hero) :where(h1, h2) {
  color: #0d1435 !important;
}
.hp-ui :where(.hero, .about-hero) :where(h1 span, .app-name) {
  color: #0064f5 !important;
}
.hp-ui :where(.hero-grid, .hero__content, .hero__showcase) {
  min-width: 0;
}
.hp-ui
  :where(
    .hero-actions,
    .hero__actions,
    .actions,
    .app-links,
    .download-hero-wrapper
  ) {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 100%;
}
.hp-ui :where(.app-badge, .hero-badge, .auth-badge, .eyebrow, .chip, .badge) {
  color: #005dc7;
  background: #e4f3ff;
  border-color: #dceeff;
  border-radius: 20px;
}
.hp-ui
  :where(
    .section,
    .features-section,
    .pricing-section,
    .screenshots-section,
    .gallery,
    .info-section,
    .privacy-design
  ) {
  margin-block: clamp(28px, 4vw, 48px);
}
.hp-ui
  :where(
    .app-grid,
    .feature-grid,
    .features-grid,
    .pricing-grid,
    .pain-points-grid,
    .steps-grid,
    .contact-grid,
    .topics-grid
  ) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px;
  align-items: stretch;
}
.hp-ui
  :where(
    .app-card,
    .feature-card,
    .feature,
    .pricing-card,
    .pain-card,
    .step-card,
    .contact-card,
    .topic-box,
    .support-card,
    .card,
    .stat-card,
    .info-panel,
    .info-box,
    .privacy-box
  ) {
  background: #fff !important;
  color: var(--ink) !important;
  border: 1px solid #e0eaf6 !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 22px #12376508;
  padding: clamp(18px, 2.2vw, 28px);
}
.hp-ui
  :where(
    .app-card,
    .feature-card,
    .pricing-card,
    .pain-card,
    .step-card,
    .contact-card
  ) {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.hp-ui
  :where(
    .app-card,
    .feature-card,
    .pricing-card,
    .pain-card,
    .step-card,
    .contact-card
  )
  > :last-child:not(p):not(h3) {
  margin-top: auto;
}
.hp-ui
  :where(
    .app-description,
    .app-desc,
    .card-subtitle,
    .feature-card p,
    .contact-meta
  ) {
  color: var(--muted) !important;
}
.hp-ui
  :where(
    .app-title,
    .card-title,
    .card-header h2,
    .feature-card h3,
    .contact-card h3
  ) {
  color: var(--ink) !important;
}
.hp-ui :where(.app-screenshot-wrapper) {
  height: auto !important;
  max-height: none !important;
  background: #f3f8fe !important;
  display: grid;
  place-items: center;
  padding: 15px;
  border: 1px solid #e4edf7 !important;
}
.hp-ui :where(.app-screenshot) {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 410px !important;
  object-fit: contain !important;
}
.hp-ui .hp-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch;
  overflow: visible !important;
  padding: 0;
  max-width: 100%;
}
.hp-ui .hp-gallery :where(.screenshot-item, .gallery-item, .shot-card) {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #f5f9ff !important;
  border: 1px solid #e0eaf6;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: none;
  transform: none;
}
.hp-ui .hp-gallery img {
  display: block;
  max-width: 100% !important;
  width: 100% !important;
  height: clamp(300px, 38vw, 460px) !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: auto;
  padding: 12px;
  background: #f0f6fc;
}
.hp-ui .hp-gallery :where(.shot-frame) {
  height: auto !important;
  max-height: none !important;
  background: #f0f6fc;
}
.hp-ui
  .hp-gallery
  :where(.screenshot-caption, .shot-info, .shot-title, figcaption) {
  color: var(--ink) !important;
  padding: 14px;
  flex: 1;
}
.hp-ui :where(.phone-frame, .hero-phone, .hero__phone) {
  max-width: 100%;
}
.hp-ui :where(.feature-icon-box, .feature-icon, .card-icon-box, .step-num) {
  color: #0064f5 !important;
  background: #e9f4ff !important;
}
.hp-ui
  :where(
    .btn,
    .button,
    .btn-primary,
    .btn-download,
    .btn-card,
    .btn-nav-cta,
    .download-btn
  ) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  max-width: 100%;
  padding: 11px 22px;
  border: 1px solid #0066ef !important;
  border-radius: 22px !important;
  background: linear-gradient(110deg, #0061f3, #0879ff) !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
  text-decoration: none;
  white-space: normal !important;
  text-align: center;
  box-shadow: inset 0 0 0 3px #ffffff0d;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.hp-ui :where(.btn, .button, .btn-primary, .btn-download, .btn-card):hover {
  filter: brightness(0.97);
  box-shadow: 0 6px 18px #0064f51f;
}
.hp-ui :where(.btn-outline, .btn-secondary, .btn-google, .button.secondary) {
  background: #fff !important;
  border-color: #a9c9ef !important;
  color: #075ad5 !important;
}
.hp-ui :where(.btn-sm) {
  padding: 7px 15px;
  min-height: 36px;
  font-size: 12px;
}
.hp-ui :where(.btn-block) {
  width: 100%;
}
.hp-ui :where(button:disabled) {
  opacity: 0.6;
  cursor: wait;
}
.hp-ui :where(.lang-switcher, .lang-tabs, .lang-switch) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
  margin-block: 20px;
}
.hp-ui :where(.lang-btn, .lang-switch button) {
  font:
    600 13px/1.4 "Segoe UI",
    Arial,
    sans-serif;
  padding: 9px 17px;
  border: 1px solid #d5e4f7;
  border-radius: 20px;
  background: #fff;
  color: #52657f;
  cursor: pointer;
}
.hp-ui
  :where(
    .lang-btn.active,
    .lang-btn[aria-pressed="true"],
    .lang-switch button.active
  ) {
  background: #0064f5;
  color: #fff;
  border-color: #0064f5;
}
.hp-ui
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    textarea,
    select,
    .form-control
  ) {
  min-width: 0;
  max-width: 100%;
  background: #f8fbff !important;
  color: #0d1435 !important;
  border: 1px solid #cfdff1 !important;
  border-radius: 11px;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.5;
}
.hp-ui :where(textarea) {
  resize: vertical;
}
.hp-ui :where(input, textarea)::placeholder {
  color: #687990;
  opacity: 1;
}
.hp-ui :where(.input-with-icon .form-control) {
  padding-left: 44px;
  padding-right: 44px;
}
.hp-ui :where(label, .form-label) {
  color: #37455b;
}
.hp-ui :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: #0064f5;
  flex-shrink: 0;
}
.hp-ui :where(.form-row, .form-footer-links) {
  gap: 16px;
  flex-wrap: wrap;
}
.hp-ui :where(.alert, .notification) {
  border-radius: 12px;
  line-height: 1.6;
}
.hp-ui :where(.alert-error) {
  background: #fff1f4 !important;
  color: #a01e3a !important;
  border: 1px solid #ffc7d4 !important;
}
.hp-ui :where(.alert-success) {
  background: #eafbf5 !important;
  color: #08715f !important;
  border: 1px solid #bae8d9 !important;
}
.hp-ui :where(.alert-info) {
  background: #eef7ff !important;
  color: #1255a0 !important;
  border: 1px solid #cce3ff !important;
}
.hp-ui :where(.table-responsive, .table-wrap, .hp-table-scroll) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid #e0eaf6;
  border-radius: 12px;
  background: white;
}
.hp-ui table {
  max-width: 100%;
  border-collapse: collapse;
  color: var(--ink);
}
.hp-ui th {
  background: #eef6ff !important;
  color: #163d70 !important;
  text-align: left;
}
.hp-ui :where(td, th) {
  padding: 13px 16px;
  border-color: #e0eaf6 !important;
}
.hp-ui td {
  color: #475569;
}
.hp-ui :where(pre) {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
}
.hp-ui .hp-context-links {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 20px auto;
  width: calc(100% - 88px);
  max-width: 900px;
  font-size: 13px;
}
/* Legal documents keep their original wording and bilingual controls. */
.hp-ui .hp-legal-content {
  width: calc(100% - 88px) !important;
  max-width: 940px !important;
  margin: 30px auto 0 !important;
  padding: clamp(20px, 3vw, 38px) !important;
  background: #fff;
  border: 1px solid #e3ecf7;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.85;
  box-shadow: 0 6px 25px #12376505;
}
.hp-ui .hp-legal-content :where(.container, .page-shell, .wrap) {
  width: 100% !important;
  padding: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 0;
  box-shadow: none;
}
.hp-ui .hp-legal-content h1 {
  font-size: clamp(26px, 3vw, 38px) !important;
  margin: 20px 0;
}
.hp-ui .hp-legal-content :where(h2, .section-title) {
  font-size: clamp(18px, 2vw, 23px) !important;
  text-transform: none;
  letter-spacing: -0.3px;
  margin: 30px 0 12px;
  color: #123d75 !important;
  line-height: 1.5;
  background: transparent;
}
.hp-ui .hp-legal-content h3 {
  font-size: 18px;
  margin: 22px 0 10px;
}
.hp-ui .hp-legal-content :where(p, ul, ol) {
  margin-block: 12px;
}
.hp-ui .hp-legal-content :where(ul, ol) {
  padding-left: 24px;
}
.hp-ui .hp-legal-content :where(a) {
  overflow-wrap: anywhere;
  text-decoration: underline;
}
.hp-ui
  .hp-legal-content
  :where(.app-info, .sub-header, .summary, .content-section) {
  color: #475569;
}
.hp-ui
  .hp-legal-content
  :where(.hero-card, .summary-banner, .disclaimer-banner, .section-block) {
  background: #f7fbff !important;
  color: #0d1435 !important;
  border-color: #dfe9f6;
}
.hp-ui .hp-legal-content .legal-layout {
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 26px;
}
.hp-ui .hp-legal-content .legal-toc {
  top: 100px;
}
.hp-ui .hp-back-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #075ad5;
  text-decoration: none !important;
  margin: 0 0 16px;
}
/* Portal pages keep their existing forms, handlers, status badges and account navigation. */
.hp-ui .auth-wrapper {
  width: 100%;
  padding: clamp(28px, 5vw, 60px) 18px;
  display: flex;
  justify-content: center;
  flex: 1;
}
.hp-ui .auth-card {
  width: 100%;
  max-width: 540px;
  padding: clamp(22px, 4vw, 40px) !important;
  border: 1px solid #dfe8f3;
  background: #fff !important;
  color: var(--ink);
  border-radius: 20px;
  box-shadow: 0 10px 40px #1237650a;
}
.hp-ui .auth-title {
  font-size: 32px !important;
}
.hp-ui .auth-card :where(.divider) {
  color: #64748b;
  background: #fff;
}
.hp-ui .auth-card .divider span {
  background: #fff;
}
.hp-ui .hp-workspace-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffffef;
  border-bottom: 1px solid #e0eaf6;
  backdrop-filter: blur(16px);
  padding: 16px 0;
}
.hp-ui .hp-workspace-nav > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.hp-ui .hp-workspace-nav .logo-text {
  color: var(--ink);
  font-size: 20px;
  white-space: normal;
}
.hp-ui .hp-workspace-nav .logo-text span {
  color: #0064f5;
}
.hp-ui .hp-workspace-nav .logo-badge {
  background: #e5f2ff;
  color: #0064f5;
  box-shadow: none;
}
.hp-ui .hp-workspace-nav .logo-version {
  font-size: 10px;
}
.hp-ui .hp-workspace-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hp-ui .hp-workspace-nav .nav-links a {
  color: #005bcf;
}
.hp-ui .dashboard-wrapper {
  padding-block: 32px;
}
.hp-ui .welcome-header {
  gap: 20px;
  flex-wrap: wrap;
}
.hp-ui .welcome-header h1 {
  font-size: clamp(26px, 3vw, 36px) !important;
}
.hp-ui .admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.hp-ui .grid-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px;
}
.hp-ui .license-box {
  background: #f3f8ff !important;
  border-color: #dce9f8 !important;
}
.hp-ui .license-key-display {
  background: #eaf3ff;
  border-color: #d3e5fa;
  gap: 14px;
  flex-wrap: wrap;
}
.hp-ui .license-key-code {
  font-size: clamp(16px, 2.2vw, 24px);
  overflow-wrap: anywhere;
  min-width: 0;
}
.hp-ui .admin-controls {
  gap: 14px;
  flex-wrap: wrap;
}
.hp-ui .admin-controls > .search-input-group {
  flex: 1 1 260px;
  min-width: 0;
}
.hp-ui .custom-table {
  min-width: 900px;
  width: 100%;
}
.hp-ui :where(.status-badge, .badge) {
  max-width: 100%;
  white-space: normal;
}
.hp-ui .stat-val {
  color: #0064f5;
}
/* Footer visual system is shared; original app-specific contacts and copyright remain. */
.hp-ui .hp-site-footer {
  width: calc(100% - 88px) !important;
  max-width: 1240px !important;
  margin: 36px auto 0 !important;
  padding: 25px 0 !important;
  color: #586579 !important;
  background: transparent !important;
  border-top: 1px solid #e0eaf6 !important;
  text-align: left !important;
  font-size: 12px !important;
}
.hp-ui .hp-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hp-ui .hp-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #0d1435;
  font-size: 19px;
  font-weight: 800;
  white-space: nowrap;
}
.hp-ui .hp-footer-brand .hp-brand-mark {
  transform: scale(0.8);
  transform-origin: left center;
  width: 31px;
}
.hp-ui .hp-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 12px;
}
.hp-ui .hp-footer-details {
  margin-top: 18px;
  line-height: 1.8;
  color: #64748b;
}
.hp-ui .hp-footer-details .container {
  width: 100% !important;
}
.hp-ui .hp-footer-details :where(a, strong) {
  color: inherit !important;
}
.hp-ui .hp-footer-details :where(p, div) {
  margin-block: 4px;
}
.hp-ui .hp-footer-details .sub-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
}
@media (min-width: 1400px) {
  .hp-ui .hero h1 {
    font-size: 46px !important;
  }
}
@media (max-width: 1150px) {
  .hp-ui :where(.container, .wrap, .page-shell) {
    width: calc(100% - 64px) !important;
  }
  .hp-ui .hp-page-main > .hero:not(.container),
  .hp-ui .about-hero {
    width: calc(100% - 64px);
  }
  .hp-ui .hp-site-footer {
    width: calc(100% - 64px) !important;
  }
}
@media (max-width: 1000px) {
  .hp-ui
    :where(
      .app-grid,
      .feature-grid,
      .features-grid,
      .pricing-grid,
      .pain-points-grid,
      .steps-grid,
      .contact-grid,
      .topics-grid
    ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .hp-ui .hp-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .hp-ui .grid-dashboard {
    grid-template-columns: 1fr;
  }
  .hp-ui .admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hp-ui .hp-legal-content .legal-layout {
    grid-template-columns: 1fr;
  }
  .hp-ui .legal-toc {
    position: static !important;
  }
  .hp-ui .hp-footer-top {
    gap: 14px;
  }
}
@media (max-width: 700px) {
  .hp-ui :where(.container, .wrap, .page-shell) {
    width: calc(100% - 36px) !important;
  }
  .hp-ui .hp-page-main > .hero:not(.container),
  .hp-ui .about-hero {
    width: calc(100% - 36px);
  }
  .hp-ui :where(.hero, .about-hero) {
    padding: 30px 18px !important;
    border-radius: 16px;
  }
  .hp-ui
    :where(
      .hero-grid,
      .hero__showcase,
      .hero,
      .info-grid,
      .support-grid,
      .form-row,
      .info-section
    ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .hp-ui :where(.hero h1, .about-hero h1) {
    font-size: clamp(28px, 7.5vw, 36px) !important;
  }
  .hp-ui
    :where(
      .app-grid,
      .feature-grid,
      .features-grid,
      .pricing-grid,
      .pain-points-grid,
      .steps-grid,
      .contact-grid,
      .topics-grid
    ) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
  }
  .hp-ui .hp-gallery {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .hp-ui .hp-gallery img {
    height: auto !important;
    max-height: 600px !important;
    padding: 14px;
    object-fit: contain !important;
  }
  .hp-ui
    :where(
      .section,
      .features-section,
      .pricing-section,
      .screenshots-section,
      .gallery,
      .info-section
    ) {
    margin-block: 28px;
  }
  .hp-ui .hp-legal-content {
    width: calc(100% - 36px) !important;
    padding: 20px !important;
    margin-top: 18px !important;
    font-size: 14px;
  }
  .hp-ui .hp-legal-content h1 {
    font-size: 27px !important;
  }
  .hp-ui
    .hp-legal-content
    :where(.hero-card, .summary-banner, .disclaimer-banner, .section-block) {
    padding: 17px;
  }
  .hp-ui .hp-context-links {
    width: calc(100% - 36px);
    gap: 10px;
  }
  .hp-ui :where(.hero-actions, .hero__actions, .actions, .app-links) {
    justify-content: center;
  }
  .hp-ui :where(.btn, .button, .btn-primary, .btn-download, .btn-card) {
    padding: 11px 18px;
  }
  .hp-ui :where(.hero-phones) {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
    overflow: visible;
    padding: 15px 0;
  }
  .hp-ui :where(.phone-frame) {
    width: 46%;
    max-width: 180px !important;
    transform: none !important;
  }
  .hp-ui .hero__phone {
    width: 100%;
    max-width: 260px !important;
    transform: none !important;
  }
  .hp-ui .welcome-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .hp-ui .hp-workspace-nav .nav-links {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
  }
  .hp-ui .hp-workspace-nav .logo-group {
    max-width: 100%;
  }
  .hp-ui .hp-workspace-nav .logo-text {
    font-size: 18px;
  }
  .hp-ui .hp-workspace-nav .logo-version {
    display: inline-block;
    margin-left: 4px;
  }
  .hp-ui .admin-stats {
    gap: 12px;
  }
  .hp-ui .admin-stats .stat-card {
    padding: 15px;
  }
  .hp-ui .stat-label {
    font-size: 10px;
  }
  .hp-ui .stat-val {
    font-size: 27px;
  }
  .hp-ui .card {
    padding: 20px;
  }
  .hp-ui .card-title {
    font-size: 20px;
  }
  .hp-ui .license-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  .hp-ui .form-footer-links {
    font-size: 12px;
  }
  .hp-ui .hp-site-footer {
    width: calc(100% - 36px) !important;
    margin-top: 25px !important;
  }
  .hp-ui .hp-footer-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
  .hp-ui .hp-footer-links {
    gap: 10px 16px;
    font-size: 11px;
  }
  .hp-ui .hp-footer-details {
    font-size: 11px;
  }
  .hp-ui .card [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hp-ui {
    scroll-behavior: auto;
  }
  .hp-ui * {
    transition: none !important;
    animation: none !important;
  }
}
@media print {
  .hp-ui {
    background: white !important;
  }
  .hp-ui .hp-legal-content {
    width: 100% !important;
    border: 0;
    box-shadow: none;
  }
  .hp-ui .hp-site-footer {
    width: 100% !important;
  }
}

.hp-ui .hp-anchor {
  display: block;
  scroll-margin-top: 100px;
}

.hp-ui .navbar {
  background: #f5faff !important;
  border-color: #e0eaf6 !important;
  box-shadow: none;
  color: var(--ink);
}
.hp-ui .navbar .logo-text {
  color: var(--ink);
}
.hp-ui .navbar .logo-badge {
  background: #e0efff;
  color: #0064f5;
  box-shadow: none;
}
.hp-ui .navbar .nav-links a {
  color: #005bcf;
}

.hp-ui [hidden] {
  display: none !important;
}
.hp-ui h1,
.hp-ui h2,
.hp-ui h3 {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.hp-ui .hp-legacy-nav-shell {
  display: contents;
}
/* Bring the remaining legacy dark panels into the reference palette. */
.hp-ui
  :where(
    .independent-notice,
    .disclaimer-card,
    .summary-banner,
    .disclaimer-banner,
    .disclaimer-box,
    .release-box,
    .support-hours-box,
    .download-action-box,
    .highlight-banner,
    .solution-banner,
    .bottom-cta,
    .upgrade-card,
    .data-panel,
    .notice,
    .notice-box
  ) {
  background: #f1f7ff !important;
  color: #263c59 !important;
  border-color: #d9e8fa !important;
  border-radius: 16px;
}
.hp-ui
  :where(
    .summary-banner,
    .disclaimer-banner,
    .independent-notice,
    .highlight-banner,
    .solution-banner,
    .bottom-cta,
    .upgrade-card
  )
  :where(p, h2, h3, strong) {
  color: inherit !important;
}
.hp-ui :where(.hero__badges, .meta-badges) :where(.badge, .chip) {
  color: #245c96 !important;
  background: #e8f3ff !important;
  border-color: #cfe4fa !important;
}
.hp-ui :where(.hero__badges, .meta-badges) :where(.badge--green) {
  color: #096c5b !important;
  background: #dff6ed !important;
  border-color: #b8e6d3 !important;
}
.hp-ui :where(.btn-secondary) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid #a9c9ef !important;
  border-radius: 22px !important;
  background: #fff !important;
  color: #075ad5 !important;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}
.hp-ui .container.hp-page-main > .hero {
  width: 100%;
  padding-inline: clamp(20px, 3vw, 36px) !important;
}
/* Explicitly replace legacy hardcoded text colors on the new light surfaces. */
.hp-ui .lang-btn.active,
.hp-ui .lang-btn[aria-pressed="true"] {
  color: #fff !important;
  background: #0064f5 !important;
}
.hp-ui .hp-legal-content .section-block p,
.hp-ui .hp-legal-content .section-block li,
.hp-ui .hp-legal-content .section-block strong {
  color: #37475d !important;
}
.hp-ui .hp-legal-content .summary-banner p,
.hp-ui .hp-legal-content .summary-banner strong,
.hp-ui .hp-legal-content .disclaimer-banner p {
  color: #37475d !important;
}
.hp-ui .hp-legal-content .legal-card {
  background: #f7fbff !important;
  border-color: #dfe8f3;
  border-radius: 14px;
}
.hp-ui .hp-legal-content .legal-card li,
.hp-ui .hp-legal-content .legal-card strong {
  color: #37475d !important;
}
.hp-ui .hp-legal-content .legal-card.allowed .legal-title {
  color: #08765e;
}
.hp-ui .hp-legal-content .legal-card.prohibited .legal-title {
  color: #b62a45;
}
.hp-ui .hp-legal-content .legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.hp-ui .upgrade-card a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 22px;
  background: linear-gradient(110deg, #0061f3, #0879ff) !important;
  color: #fff !important;
  font-size: 13px;
  padding: 11px 22px;
  box-shadow: none !important;
}
.hp-ui .hero a[style*="background:"] {
  background: linear-gradient(110deg, #0061f3, #0879ff) !important;
  color: #fff !important;
  border-radius: 22px !important;
}
@media (max-width: 700px) {
  .hp-ui .hp-legal-content .legal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.hp-ui .hp-page-main p,
.hp-ui .hp-page-main li {
  color: #475569 !important;
}
.hp-ui .hp-page-main strong,
.hp-ui .hp-page-main em {
  color: inherit !important;
}
.hp-ui .hp-page-main code {
  color: #195992 !important;
  background: #edf5ff;
  border-radius: 4px;
  padding: 1px 4px;
}
.hp-ui .values-list li div,
.hp-ui .sub-bullet {
  color: #475569 !important;
}
.hp-ui .callout,
.hp-ui .callout-danger {
  background: #eef6ff !important;
  color: #37475d !important;
  border-color: #cedff3 !important;
}
.hp-ui .callout-danger {
  background: #fff8ec !important;
  border-color: #e8d6b3 !important;
}
.hp-ui .summary-pill {
  color: #08765e !important;
  background: #e4f7ee !important;
}
.hp-ui .badge-pill {
  color: #245c96 !important;
  background: #e8f3ff !important;
  border-color: #cfe4fa !important;
}
.hp-ui .disclaimer-card h2 {
  color: #71501b !important;
}
.hp-ui .release-status-header span,
.hp-ui .section-eyebrow {
  color: #1258a5 !important;
}
.hp-ui .hp-inline-action {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(110deg, #0061f3, #0879ff) !important;
  color: #fff !important;
  border-radius: 22px !important;
  padding: 11px 22px;
  font-weight: 650;
  max-width: 100%;
}
.hp-ui .hp-page-main h3,
.hp-ui .hp-page-main dd {
  color: #0d1435 !important;
}
.hp-ui .hp-legal-content .nav-links a {
  color: #075ad5 !important;
}
.hp-ui .navbar .logo-version {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  vertical-align: middle;
}

/* Catalog artwork is distinct from a phone screenshot. */
.hp-ui #zalo-ky-thuat {
  scroll-margin-top: 100px;
}
.hp-ui .hp-support-qr {
  margin: 0 auto 18px;
  width: min(100%, 244px);
  text-align: center;
}
.hp-ui .hp-support-qr img {
  display: block;
  width: 100%;
  height: auto;
  padding: 12px;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 12px;
}
.hp-ui .hp-support-qr figcaption {
  color: #586579;
  font-size: 12px;
  line-height: 1.6;
  margin-top: 10px;
}
.hp-ui .app-card .app-artwork {
  display: grid;
  place-items: center;
  height: 165px;
}
.hp-ui .app-card .app-artwork img {
  display: block;
  width: 140px;
  height: 140px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 24px;
}