@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=UnifrakturCook:wght@700&display=swap');

.saln-main-content {
}

.saln-template-container > * {
  padding-left: 18px;
  padding-right: 18px;
}

.saln-main-content {
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
}


:root{
  --brand:#2b5fa5;
  --muted:#6b7280;
  --accent:rgba(11,95,165,0.88);
  --bg:#ffffff;
  --gov-height:72px;
  --gov-left-slot:120px;
}

/* PDS Template Modal Styles */
.pds-template-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pds-template-modal-content {
  background: #fff;
  border-radius: 12px;
  max-width: 1200px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
}

.pds-template-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 12px 12px 0 0;
}

.pds-template-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.pds-template-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.pds-template-modal-close:hover {
  background: #e5e7eb;
  color: #111827;
}

.pds-template-modal-body {
  padding: 0;
  flex: 1;
  overflow: hidden;
  background: #f3f4f6;
}

.pds-template-modal-iframe {
  width: 100%;
  height: 100%;
  min-height: 600px;
  border: none;
}

/* New PDS Template Modal Container Styles */
.pds-template-modal-container {
  display: none;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  margin-top: 20px;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pds-template-modal-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 700px;
}

.pds-template-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(135deg, #0f4c81 0%, #0a3558 100%);
  color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.pds-template-modal-title h4 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

.pds-template-modal-title p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}

.pds-template-modal-close-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pds-template-modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.pds-template-modal-body {
  flex: 1;
  overflow: hidden;
  background: #f8fafc;
  position: relative;
  min-height: 600px;
}

.pds-template-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.pds-template-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px;
  text-align: center;
  color: #64748b;
}

.pds-template-placeholder-icon {
  margin-bottom: 20px;
  color: #94a3b8;
}

.pds-template-placeholder h4 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #334155;
}

.pds-template-placeholder p {
  margin: 0;
  font-size: 14px;
  color: #64748b;
}

.pds-template-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}

.pds-template-modal-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pds-template-modal-badge {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pds-template-modal-meta {
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}

/* OCR Status Badge Styles */
.pds-template-modal-badge.ocr-ready {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
}

.pds-template-modal-badge.ocr-partial {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
}

.pds-template-modal-badge.ocr-unavailable {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
}

.pds-template-modal-actions {
  display: flex;
  gap: 8px;
}

/* PDS Auto-Generated Fields Styles */
.pds-auto-fields-container {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
}

.pds-auto-fields-container h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.pds-auto-fields-container > p {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: #64748b;
}

.pds-auto-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.pds-auto-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pds-auto-field label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.pds-auto-field input[type="text"],
.pds-auto-field input[type="email"],
.pds-auto-field input[type="date"],
.pds-auto-field input[type="tel"],
.pds-auto-field input[type="number"] {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.pds-auto-field input:focus {
  outline: none;
  border-color: #0f4c81;
  box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.1);
}

.pds-auto-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  cursor: pointer;
}

.pds-auto-field label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* PDS Auto-Fields Pagination Navigation */
.pds-auto-fields-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  margin: 0 -20px 20px -20px;
}

.pds-auto-fields-page-indicator {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  min-width: 100px;
  text-align: center;
}

.pds-auto-fields-nav .btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.pds-auto-fields-nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pds-auto-fields-page {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* PDS Template Preview with Overlays */
.pds-template-preview-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pds-template-overlay-text {
  position: absolute;
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #000000;
  line-height: 1.2;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  overflow: hidden;
  text-overflow: clip;
  background: transparent;
  padding: 0 0 0 2px;
  border-radius: 0;
  font-weight: 400;
  box-sizing: border-box;
}

/* Template Page Tabs */
.pds-template-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.pds-template-tab {
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pds-template-tab:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.pds-template-tab.active {
  background: #0f4c81;
  color: #ffffff;
  border-color: #0f4c81;
}

.pds-template-pages-container {
  flex: 1;
  overflow: auto;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 600px;
}

.pds-template-page-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  aspect-ratio: 612/936;
}

.pds-template-page-wrapper.hidden {
  display: none !important;
}

/* PDS Question Fields Styling */
.pds-auto-field label[for^="auto_Q"],
.pds-auto-field label[for*="_q3"] {
  color: #1e40af;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
}

.pds-auto-field:has(input[type="checkbox"]) {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.pds-auto-field:has(input[type="checkbox"]) label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
}

.pds-auto-field:has(input[type="checkbox"]) input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #0f4c81;
}

/* Question group styling */
.pds-auto-fields-grid:has([name*="q34"]) .pds-auto-field,
.pds-auto-fields-grid:has([name*="q35"]) .pds-auto-field,
.pds-auto-fields-grid:has([name*="q36"]) .pds-auto-field,
.pds-auto-fields-grid:has([name*="q37"]) .pds-auto-field,
.pds-auto-fields-grid:has([name*="q38"]) .pds-auto-field,
.pds-auto-fields-grid:has([name*="q39"]) .pds-auto-field,
.pds-auto-fields-grid:has([name*="q40"]) .pds-auto-field {
  grid-column: 1 / -1;
}

*,
*::before,
*::after{box-sizing:border-box}
html,body{height:100%}
body{font-family:Arial,Helvetica,sans-serif;margin:0;color:#111;background:var(--bg);padding-top:var(--gov-height)}
html{scroll-padding-top: var(--gov-height)}
img{max-width:100%;height:auto;display:block}
.container{width:100%;max-width:1360px;margin:0 auto;padding:0 clamp(12px,2.2vw,18px)}

/* Public pages sticky footer layout */
body.landing-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  /* styles.css sets body padding-top:0 !important; keep content/design below fixed .gov-topbar */
  padding-top:var(--gov-height) !important;
}

body.landing-page .site-footer.gov-footer{
  margin-top:auto;
}

/* Public pages: scroll area starts below fixed header */
body.landing-page{
  overflow:hidden;
}
body.landing-page .public-scroll{
  height:calc(100vh - var(--gov-height));
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
}
body.landing-page .public-scroll > *{
  flex:0 0 auto;
}
/* Dark scrollbar styling (Chromium/WebKit + Firefox) */
body.landing-page .public-scroll{
  scrollbar-color: rgba(160,160,160,0.95) #ffffff;
  scrollbar-width: auto;
}
body.landing-page .public-scroll::-webkit-scrollbar{
  width:14px;
}
body.landing-page .public-scroll::-webkit-scrollbar-track{
  background:#ffffff;
}
body.landing-page .public-scroll::-webkit-scrollbar-thumb{
  background:rgba(160,160,160,0.95);
  border-radius:999px;
  border:3px solid #ffffff;
}
body.landing-page .public-scroll::-webkit-scrollbar-button{
  height:0;
  width:0;
  display:none;
  background:transparent;
}

.gov-topbar{
  background:
    linear-gradient(135deg, rgb(10, 32, 64) 0%, rgb(15,56,110) 55%, rgb(24, 86, 159) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  height: var(--gov-height);
  backdrop-filter: none;
  box-shadow: 0 10px 26px rgba(7, 18, 38, 0.26);
  overflow: hidden;
}

.gov-topbar::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,0.10), transparent 45%),
    radial-gradient(circle at 70% 40%, rgba(255,255,255,0.08), transparent 44%);
  pointer-events:none;
}
.gov-topbar::after{
  content:"";
  position:absolute;
  right:-140px;
  top:-90px;
  width:520px;
  height:260px;
  transform: translate3d(0,0,0) rotate(-18deg);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 55%);
  opacity:0.9;
  pointer-events:none;
  will-change: transform;
  animation: govTopbarSheen 7s ease-in-out infinite alternate;
}

@keyframes govTopbarSheen{
  0%   { transform: translate3d(-80px, 0, 0) rotate(-18deg); }
  100% { transform: translate3d(140px, 0, 0) rotate(-18deg); }
}

@media (prefers-reduced-motion: reduce){
  .gov-topbar::after{ animation: none !important; }
}
.gov-inner{
  max-width:1360px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 14px;
  padding: 0 18px;
  height:100%;
  position:relative;
  z-index:1;
}
.gov-left{display:flex;align-items:center;min-width:0}
.gov-brand{
  display:inline-flex;
  align-items:center;
  gap: 14px;
  text-decoration:none;
  color:#f8fbff;
  white-space:nowrap;
}
.gov-brand-logo{
  width:38px;
  height:38px;
  border-radius:999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 22px rgba(0,0,0,0.20);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex: 0 0 auto;
}
.gov-brand-logo img{width:32px;height:32px;display:block;object-fit:contain}
.gov-brand-title{font-weight:900;letter-spacing:0.02em;font-size:16px}
.gov-brand-sep{color:rgba(255,255,255,0.36);font-weight:800}
.gov-brand-subtitle{font-size:14px;color:rgba(226, 238, 255, 0.88);font-weight:600}
.gov-toplink-ico{display:inline-flex;align-items:center;justify-content:center}
.gov-privacy-link{color:#dbe9ff;text-decoration:none;font-size:14px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;padding:8px 0}
.gov-privacy-link:hover{text-decoration:underline}
.gov-nav{display:none;align-items:stretch;justify-content:flex-start;min-width:0;height:100%}
.gov-nav-item{position:relative;height:100%}
.gov-nav a,
.gov-nav-item > a{margin:0;color:#f4f8ff;text-decoration:none;font-size:14px;padding:0 14px;min-width:72px;white-space:nowrap;display:flex;align-items:center;justify-content:center;height:100%;border-right:1px solid rgba(255,255,255,0.12)}
.gov-nav a.active{background:rgba(255,255,255,0.14);color:#ffffff}
.gov-nav a:hover:not(.active){background:rgba(255,255,255,0.06);color:#ffffff;box-shadow:inset 0 -2px 0 rgba(255,255,255,0.35)}
.gov-nav a.has-caret::after,
.gov-contact-link.has-caret::after{content:"";width:0;height:0;margin-left:10px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #d9e7ff}
.gov-dropdown{position:absolute;top:100%;left:0;min-width:220px;background:#fff;border:1px solid rgba(0,0,0,0.10);border-top:0;box-shadow:0 14px 30px rgba(24,39,75,0.14);padding:0;display:none;z-index:1100}
.gov-dropdown a{display:flex;width:100%;min-width:0;height:auto;padding:12px 20px;border-right:0;border-bottom:0;background:#fff;justify-content:flex-start;font-size:14px}
.gov-dropdown a:hover{background:rgba(0,0,0,0.08);color:#111}
.gov-nav-item.has-dropdown:hover .gov-dropdown{display:block}
.gov-dropdown-item{position:relative}
.gov-dropdown-item.has-submenu > a{justify-content:space-between;align-items:center}
.gov-submenu-caret{display:inline-block;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:7px solid #8f8f8f;margin-left:14px}
.gov-submenu{position:absolute;top:0;left:100%;min-width:250px;background:#fff;border:1px solid rgba(0,0,0,0.10);box-shadow:0 14px 30px rgba(24,39,75,0.14);display:none;z-index:1101}
.gov-submenu a{display:flex;width:100%;padding:12px 18px;background:#fff;border:0;justify-content:flex-start;font-size:14px}
.gov-submenu a:hover{background:rgba(0,0,0,0.08)}
.gov-dropdown-item.has-submenu:hover .gov-submenu{display:block}
.gov-contact-link{
  color:#f4f8ff;
  text-decoration:none;
  font-size:14px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.gov-contact-link:hover{transform:translateY(-1px);background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.26)}
.gov-contact-link{margin-left:auto}
.gov-search{display:flex;align-items:center;justify-content:center;height:100%;padding:0 10px;border-right:1px solid rgba(255,255,255,0.12)}
.gov-search input{width:200px;height:40px;padding:0 12px;border:1px solid rgba(255,255,255,0.18);border-radius:0;font-size:14px;background:rgba(255,255,255,0.96);color:#173761}
    
/* topbar action buttons (login/register) */
.gov-actions{display:flex;align-items:center;gap:10px;margin-left:10px}
.gov-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:800;font-size:14px}
.btn-login{
  background: linear-gradient(135deg, rgba(32, 104, 204, 0.95), rgba(24, 86, 159, 0.95));
  color:#fff;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 16px 30px rgba(10, 32, 64, 0.32);
}
.btn-login:hover{transform:translateY(-1px);filter:saturate(1.03)}
.btn-register{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.btn-register:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.gov-actions:has(.btn-register:hover) .btn-login,
.gov-actions:has(.btn-register:focus-visible) .btn-login{
  background:#fff;
  color:var(--brand);
  border-color:var(--brand);
}
.gov-actions .gov-privacy-link{display:inline-flex;align-items:center;justify-content:center;height:auto;padding:0;color:#dbe9ff}
.gov-actions .gov-privacy-link:hover{color:#ffffff;text-decoration:underline}
.gov-menu-toggle{display:none;align-items:center;justify-content:center;gap:14px;height:50px;padding:0;border:0;background:transparent;color:#f8fbff;cursor:pointer}
.gov-menu-toggle-label{font-size:26px;font-weight:700;letter-spacing:0.2px}
.gov-menu-toggle-box{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;width:38px;height:34px;background:transparent}
.gov-menu-toggle-box span{display:block;width:34px;height:4px;border-radius:999px;background:#f8fbff;transition:transform 220ms ease, opacity 220ms ease}
.gov-mobile-panel{display:none}
.gov-mobile-nav{position:relative}
.gov-mobile-nav a,
.gov-mobile-parent{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 24px;background:#fff;color:#111;text-decoration:none;font-size:20px;font-weight:500;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.08);border:0;text-align:left}
.gov-mobile-nav a.active{background:#ececec}
.gov-mobile-group{display:block}
.gov-mobile-parent{cursor:pointer}
.gov-mobile-parent::after{content:"";width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:9px solid #9d9d9d}
.gov-mobile-submenu-view{position:absolute;inset:0;background:#fff;z-index:5;overflow:auto;padding-top:0}
.gov-mobile-back{display:flex;align-items:center;gap:14px;width:100%;padding:18px 24px 12px;background:#fff;border:0;color:#111;font-size:18px;text-align:left}
.gov-mobile-back-icon{display:inline-block;width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-right:12px solid #a5a5a5}
.gov-mobile-submenu-title{padding:0 24px 18px;background:#fff;color:#111;font-size:26px;font-weight:700;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.12)}
.gov-mobile-submenu{display:grid}
.gov-mobile-submenu a{padding:16px 24px;background:#fff;font-size:17px;font-weight:400;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.06)}
.gov-mobile-submenu a:hover{background:#f5f7fb}
.gov-mobile-submenu-group{display:grid}
.gov-mobile-submenu-group-title{padding:14px 24px 10px;background:#f7f9fc;color:#3a4a63;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.06)}
.gov-mobile-submenu-group-title-link{display:block;position:relative;padding:14px 64px 10px 24px;background:#f7f9fc;color:#2c3f5f;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.06)}
.gov-mobile-submenu-group-title-link:hover{background:#eef3fb;color:#173761}
.gov-mobile-submenu-group > a:not(.gov-mobile-submenu-group-title-link){padding-left:34px;background:#fbfcff}
.gov-mobile-submenu-group.is-collapsible > a:not(.gov-mobile-submenu-group-title-link){display:none}
.gov-mobile-submenu-group.is-collapsible.is-open > a:not(.gov-mobile-submenu-group-title-link){display:flex}
.gov-mobile-submenu-toggle{position:relative;margin:-41px 12px 6px auto;width:20px;height:20px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.gov-mobile-submenu-toggle::before{content:"";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #8b8b8b;transition:transform 180ms ease}
.gov-mobile-submenu-group.is-open > .gov-mobile-submenu-toggle::before{transform:rotate(180deg)}
.gov-mobile-submenu-toggle:hover::before{border-top-color:#5f5f5f}
.gov-mobile-search{display:none;padding:16px 24px 18px;background:#f7f7f7;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.08)}
.gov-mobile-search input{width:100%;height:56px;padding:0 16px;border:2px solid #d4d4d4;border-radius:0;background:#fff;font-size:18px;color:#2a2a2a}
.gov-mobile-search input::placeholder{color:#c9c9c9}
.gov-mobile-actions{display:grid;grid-template-columns:repeat(2, 136px);justify-content:center;gap:14px;padding:16px 24px 20px;background:#f7f7f7}
.gov-mobile-actions .btn{width:136px;height:64px;padding:0;font-size:16px;line-height:1}

@media(max-width:1180px){
  .gov-topbar.menu-open{--gov-mobile-menu-open-width:124px;--gov-mobile-panel-open-width:min(34vw,420px);--gov-mobile-search-open-width:min(var(--gov-mobile-panel-open-width),calc(100vw - var(--gov-mobile-menu-open-width)))}
  body{padding-top:var(--gov-height)}
  .gov-topbar{height:var(--gov-height);min-height:0}
  .gov-inner{display:grid;grid-template-columns:auto 1fr auto;height:100%;padding-top:0;padding-bottom:0;column-gap:16px;padding-left:max(8px, env(safe-area-inset-left));padding-right:max(8px, env(safe-area-inset-right))}
  .gov-left{display:flex;min-width:auto;padding:0;font-size:clamp(15px,3.2vw,22px);font-weight:700;letter-spacing:0.3px;justify-content:flex-start;white-space:nowrap}
  .gov-left-title{font-size:clamp(15px,3.2vw,22px)}
  .gov-left-subtitle{display:inline-flex;font-size:clamp(10px,1.6vw,13px)}
  .gov-nav,
  .gov-contact-link,
  .gov-search{display:none}
  .gov-actions{display:flex;grid-column:3;justify-self:end;align-items:center;gap:6px;height:100%;padding:0;border-right:0;margin-right:0}
  .gov-actions .btn{padding:8px 14px;font-size:13px}
  .gov-menu-toggle{display:none}
  .gov-menu-toggle-label{font-size:clamp(14px,3vw,24px);white-space:nowrap}
  .gov-menu-toggle-box{width:32px;height:28px;flex:0 0 auto}
  .gov-menu-toggle-box span{width:32px;height:4px}
  .gov-mobile-search{display:none}
  .gov-mobile-panel{display:none;position:fixed;top:var(--gov-height);right:0;width:min(34vw,420px);min-width:320px;height:calc(100vh - var(--gov-height));padding:0;background:#f7f7f7;border-left:1px solid rgba(0,0,0,0.08);box-shadow:-18px 0 36px rgba(15,23,42,0.12);overflow:auto;z-index:1200;transform:translateX(100%);transition:transform 460ms cubic-bezier(0.22, 1, 0.36, 1)}
  .gov-topbar:not(.menu-open) .gov-mobile-panel{display:none}
  .gov-topbar.menu-open .gov-mobile-panel,
  .gov-topbar.menu-closing .gov-mobile-panel{display:grid}
  .gov-topbar.menu-open .gov-mobile-panel{transform:translateX(0)}
  .gov-topbar.menu-closing .gov-mobile-panel{transform:translateX(100%)}
  .gov-topbar.menu-open .gov-left{visibility:visible;opacity:1;pointer-events:auto}
  .gov-topbar.menu-open .gov-menu-toggle{position:fixed;top:0;left:auto;right:var(--gov-mobile-search-open-width);width:var(--gov-mobile-menu-open-width);min-width:var(--gov-mobile-menu-open-width);height:var(--gov-height);padding:0 8px;background:rgba(15,56,110,0.98);border:0;box-shadow:inset 0 -1px 0 rgba(255,255,255,0.12);z-index:1251}
  .gov-topbar.menu-open .gov-mobile-search{display:flex;position:fixed;top:0;left:auto;right:0;width:var(--gov-mobile-search-open-width);max-width:none;min-width:0;height:var(--gov-height);align-items:center;padding:8px 16px 8px 12px;background:rgba(15,56,110,0.98);border:0;box-shadow:inset 0 -1px 0 rgba(255,255,255,0.12);z-index:1250}
  .gov-topbar.menu-open .gov-mobile-search input{height:100%}
  .gov-mobile-nav{padding-top:0}
  .gov-mobile-panel.submenu-open .gov-mobile-actions{display:none}
}

@media(max-width:640px){
  .gov-topbar::after{display:none}
  .gov-topbar.menu-open{--gov-mobile-menu-open-width:96px;--gov-mobile-panel-open-width:min(86vw,360px);--gov-mobile-search-open-width:min(var(--gov-mobile-panel-open-width),calc(100vw - var(--gov-mobile-menu-open-width)))}
  .gov-inner{display:flex;align-items:center;column-gap:0;padding-left:8px;padding-right:8px}
  .gov-left{font-size:clamp(14px,5vw,18px);gap:2px;flex:0 1 auto;min-width:0;flex-direction:column;align-items:flex-start;line-height:1.1}
  .gov-left-title{font-size:clamp(14px,5vw,18px)}
  .gov-left-subtitle{display:inline-flex;font-size:clamp(10px,2.8vw,12px);color:rgba(226, 238, 255, 0.88);white-space:normal}
  .gov-actions{gap:4px;padding:0;flex:0 0 auto;margin-left:auto}
  .gov-actions .btn{padding:7px 10px;font-size:12px}
  .gov-menu-toggle{gap:8px}
  .gov-menu-toggle-label{display:inline;white-space:nowrap}
  .gov-menu-toggle-box{width:30px;height:24px}
  .gov-menu-toggle-box span{width:30px;height:4px}
  .gov-mobile-panel{width:min(86vw,360px);min-width:0}
  .gov-topbar.menu-open .gov-menu-toggle{left:auto;right:var(--gov-mobile-search-open-width);width:var(--gov-mobile-menu-open-width);min-width:var(--gov-mobile-menu-open-width);padding:0 6px}
  .gov-topbar.menu-open .gov-mobile-search{left:auto;right:0;width:var(--gov-mobile-search-open-width);max-width:none;min-width:0;height:var(--gov-height);padding:8px 12px 8px 12px}
  .gov-mobile-submenu-view{padding-top:0}
  .gov-mobile-back{padding:14px 18px 10px}
  .gov-mobile-submenu-title{padding:0 18px 16px;font-size:24px}
  .gov-mobile-submenu a{padding:15px 18px;font-size:16px}
}

@media(max-width:420px){
  .gov-topbar.menu-open{--gov-mobile-menu-open-width:64px;--gov-mobile-panel-open-width:min(86vw,360px);--gov-mobile-search-open-width:min(var(--gov-mobile-panel-open-width),calc(100vw - var(--gov-mobile-menu-open-width)))}
  .gov-inner{display:flex;align-items:center;padding-left:8px;padding-right:8px}
  .gov-actions{gap:3px;padding:0;flex:0 0 auto;margin-left:auto}
  .gov-actions .btn{padding:7px 8px;font-size:11px}
  .gov-menu-toggle-label{display:none}
  .gov-menu-toggle{gap:0;padding-right:4px}
  .gov-topbar.menu-open .gov-menu-toggle{padding:0 6px;width:var(--gov-mobile-menu-open-width);min-width:var(--gov-mobile-menu-open-width)}
  .gov-topbar.menu-open .gov-mobile-search{left:auto;right:0;width:var(--gov-mobile-search-open-width);max-width:none;padding:8px 10px 8px 10px}
}

@media(min-width:1400px){
  .gov-inner{padding-left:24px;padding-right:24px}
}
.gov-search input{width:180px}
/* header */
.site-header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:100%;
  /* Responsive vertical room so the header design + logos don't get clipped. */
  min-height:clamp(120px, 12vw, 170px);
  padding:clamp(18px, 2.8vw, 32px) 0 clamp(20px, 3.6vw, 42px);
  /* Keep header background transparent so the design layer (pseudo elements) isn't covered by a white band. */
  background: transparent;
  border-bottom: 0;
  overflow:hidden;
  z-index:1;
}
@media(max-width:768px){
  .site-header{
    display:block;
    min-height:0;
    padding:18px 0 26px;
    background:#ffffff;
    box-shadow:0 8px 18px rgba(15, 35, 60, 0.06);
    overflow:visible;
  }
  .site-header::after{display:none}
  .header-wrap{display:grid;grid-template-columns:1fr;align-items:flex-start;justify-content:flex-start;gap:16px;width:100%}
  .brand-group{display:grid;grid-template-columns:minmax(56px,72px) minmax(0,1fr);width:100%;align-items:flex-start;gap:12px}
  .left-logos{display:flex;align-items:flex-start;justify-content:flex-start;grid-template-columns:none;column-gap:0;margin-left:0}
  .left-logos img{max-height:72px}
  .left-logos img:first-child{max-height:78px}
  .right-info{width:100%;max-width:none}
  .pst-card{width:100%;justify-content:flex-start}
  .center-brand{width:100%;max-width:none}
}
@media(max-width:480px){
  .site-header{
    padding:16px 0 22px;
    background:#ffffff;
    box-shadow:0 8px 18px rgba(15, 35, 60, 0.06);
    overflow:visible;
  }
  .brand-group{grid-template-columns:1fr;gap:10px}
  .left-logos{align-items:center}
  .center-brand{width:100%}
}

/* Philippine Standard Time card (public header) */
.gov-topbar .gov-brand-logo{width:32px;height:32px}
.gov-topbar .gov-brand-logo img{width:26px;height:26px}
/* Public topbar: hide the small round logo beside "LTO-HRIS" (text-only brand). */
.gov-topbar .gov-brand-logo{display:none !important}
.gov-topbar .gov-left{flex-direction:row;align-items:center;gap:10px;line-height:1.1}
.gov-topbar .gov-left-brand{display:inline-flex;align-items:center;gap:10px;line-height:1.1;text-decoration:none;color:inherit;min-width:0}
.gov-topbar .gov-left-title{
  font-weight:900;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-size:16px;
  color:#ffffff;
}
.gov-topbar .gov-left-separator{color:rgba(255,255,255,0.38);font-weight:700}
.gov-topbar .gov-left-subtitle{
  font-weight:400;
  color:rgba(255,255,255,0.92);
  font-size:14px;
  letter-spacing:0.01em;
  white-space:nowrap;
}
.landing-page .gov-topbar .gov-left-brand{
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 44%,
    #7dd3fc 50%,
    #ffffff 56%,
    #ffffff 100%
  );
  background-size: 420% 100%;
  background-position: 0% 50%;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: topbarTitleSlide 3.8s linear infinite;
  will-change: background-position;
}
.landing-page .gov-topbar .gov-left-brand .gov-left-title,
.landing-page .gov-topbar .gov-left-brand .gov-left-separator,
.landing-page .gov-topbar .gov-left-brand .gov-left-subtitle{color:inherit}

/* Hide subtitle on mobile/tablet layout. */
@media(max-width:1024px){
  .gov-topbar .gov-left-subtitle{display:none}
  .gov-topbar .gov-left-separator{display:none}
  .gov-topbar .gov-left{gap:0}
  .gov-topbar .gov-left-brand{gap:0}
}

.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    /* left-edge vertical wave */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='700' viewBox='0 0 260 700' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%233b82f6' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%233b82f6' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='1' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ef4444' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23ef4444' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0 C180 60 80 160 260 220 L260 700 L0 700 Z' fill='url(%23b)'/%3E%3Cpath d='M0 60 C140 140 90 220 260 280 L260 700 L0 700 Z' fill='url(%23r)'/%3E%3C/svg%3E") left center/clamp(120px, 22vw, 240px) 100% no-repeat,
    /* subtle diagonal panels */
    linear-gradient(120deg, rgba(43,95,165,0.06) 0%, rgba(43,95,165,0) 46%) left top/52% 100% no-repeat,
    linear-gradient(-120deg, rgba(43,95,165,0.06) 0%, rgba(43,95,165,0) 46%) right top/52% 100% no-repeat,
    /* soft haze */
    radial-gradient(circle at 10% 36%, rgba(43,95,165,0.10), transparent 42%),
    radial-gradient(circle at 92% 30%, rgba(43,95,165,0.10), transparent 44%),
    /* base fill (prevents "white strip" showing through) */
    linear-gradient(180deg, #f7fbff 0%, #ffffff 68%);
  pointer-events:none;
  opacity:0.92;
  z-index:0;
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:clamp(78px, 7vw, 110px);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0,120 C240,40 420,160 720,92 C1030,22 1180,150 1440,70 L1440,160 L0,160 Z' fill='%232b5fa5' fill-opacity='0.10'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center bottom;
  pointer-events:none;
  opacity:1;
  z-index:0;
}
.header-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 22px;
  position:relative;
  z-index:2;
}
.brand-group{display:flex;align-items:center;gap:clamp(8px,0.8vw,14px);min-width:0;flex:1 1 auto;padding-left:0}
.left-logos{display:grid;grid-template-columns:clamp(78px,9vw,var(--gov-left-slot)) auto;align-items:center;column-gap:12px;flex-shrink:0;margin-left:clamp(0px,2vw,32px)}
.left-logos img{max-height:clamp(58px,7vw,102px);height:auto;width:auto;max-width:100%;display:block}
.left-logos img:first-child{justify-self:center;max-height:clamp(72px,8.4vw,118px);height:auto}
.left-logos img:last-child{justify-self:start;margin-left:clamp(-10px,-1vw,-18px)}
.center-brand{text-align:left;padding-top:0;min-width:0;max-width:min(48vw,760px)}
.center-brand .govtext{font-size:clamp(11px,1.35vw,18px);color:#2f2f2f;line-height:0.98;font-family:'UnifrakturCook',cursive;font-weight:700;letter-spacing:0;text-transform:none}
.center-brand .govtext strong{display:block;margin-top:6px;font-size:clamp(11px,1.25vw,18px);font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:clamp(0.7px,0.12vw,1.2px)}
.center-brand h1{margin:2px 0 0;font-size:clamp(14px,1.7vw,24px);letter-spacing:0.16px;color:#222;font-family:'Oswald',sans-serif;font-weight:700;line-height:0.96;text-transform:uppercase;word-break:break-word}
.center-brand .office-address{margin:10px 0 0;font-size:clamp(9px,0.9vw,12px);line-height:1.35;color:#4b5563;font-family:'Oswald',sans-serif;font-weight:400;letter-spacing:0.04em;text-transform:none;display:flex;align-items:center;gap:8px}
.office-pin{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:#1f3f78;flex:0 0 auto}
.right-info{flex:0 0 auto;min-width:0;max-width:min(46vw,520px)}
.pst-card{
  display:flex;
  align-items:center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(43,95,165,0.14);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 18px 44px rgba(15, 35, 60, 0.10);
  backdrop-filter: blur(10px);
  max-width:100%;
}
.pst-card-icon{
  width:48px;
  height:48px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(43,95,165,0.10);
  color: #1f4d8f;
  border: 1px solid rgba(43,95,165,0.18);
}
.pst-card-icon::before{
  content:"";
  width:22px;
  height:22px;
  display:block;
  background:rgba(15, 76, 129, 0.92);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8a8 8 0 0 1-8 8Zm.5-13H11v6l5 3l.75-1.23l-4.25-2.52Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8a8 8 0 0 1-8 8Zm.5-13H11v6l5 3l.75-1.23l-4.25-2.52Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pst-card-label{font-size:12px;font-weight:700;color:#64748b;letter-spacing:0.02em}
.pst-card-value{margin-top:4px;color:#0b2a52}
#pstClock{display:block;white-space:pre-line;font-weight:700;font-size:20px;line-height:1.15;letter-spacing:-0.01em;color:#334155}
#pstClock::first-line{font-size:15px;font-weight:600;color:#475569;letter-spacing:0}
.right-info .time{max-width:100%}
.right-info .icons{display:flex;align-items:center;justify-content:center;gap:clamp(6px,0.8vw,10px);margin-top:clamp(8px,1.2vw,14px)}
.right-info .icons img{height:clamp(38px,5vw,70px);margin-left:0}

@media(max-width:640px){
  #pstClock{font-size:18px}
  #pstClock::first-line{font-size:13px}
  .gov-topbar .gov-left-title{font-size:15px}
  .gov-topbar .gov-left-subtitle{font-size:13px}
  .gov-topbar .gov-left{gap:8px}
  .gov-topbar .gov-left-subtitle::before{height:14px;margin-right:8px}
}

/* Public header responsiveness */
@media(max-width:1024px){
  .site-header{margin-bottom:18px}
  .header-wrap{display:grid;grid-template-columns:1fr;align-items:flex-start;justify-content:flex-start;gap:18px;width:100%}
  .brand-group{display:grid;grid-template-columns:minmax(56px,72px) minmax(0,1fr);width:100%;align-items:flex-start;gap:12px}
  .left-logos{display:flex;align-items:flex-start;justify-content:flex-start;grid-template-columns:none;column-gap:0;margin-left:0}
  .center-brand{width:100%;max-width:none}
  .right-info{width:100%;max-width:none}
  .pst-card{width:100%;justify-content:flex-start;padding:14px 16px}
}

@media(max-width:768px){
  .brand-group{grid-template-columns:minmax(56px,72px) minmax(0,1fr)}
}

@media(max-width:480px){
  .site-header{margin-bottom:14px}
  .header-wrap{gap:12px}
  .brand-group{grid-template-columns:minmax(52px,68px) minmax(0,1fr);align-items:flex-start;gap:10px}
  .left-logos{align-items:flex-start}
  .left-logos img{max-height:62px}
  .left-logos img:first-child{max-height:68px}
  .left-logos img:last-child{margin-left:0}
  .center-brand .govtext{font-size:13px;line-height:1.05}
  .center-brand .govtext strong{font-size:13px}
  .center-brand h1{font-size:18px;line-height:1.02}
  .center-brand .office-address{margin-top:8px;font-size:11px}
  .pst-card{gap:12px;padding:12px 14px;border-radius:16px}
  .pst-card-icon{width:44px;height:44px;border-radius:14px}
}

@media(max-width:360px){
  .brand-group{grid-template-columns:minmax(48px,60px) minmax(0,1fr);gap:8px}
  .left-logos img{max-height:62px}
  .left-logos img:first-child{max-height:68px}
  .center-brand h1{font-size:16px}
  #pstClock{font-size:17px}
}

/* News and updates */
.news-updates{
  position:relative;
  z-index:0;
  flex:0 0 auto;
  width:100%;
  margin-top: 0;
  padding:26px 0 14px;
  background:
  linear-gradient(180deg, rgba(43,95,165,0.04), rgba(255,255,255,0) 52%),
  radial-gradient(circle at top right, rgba(43,95,165,0.08), transparent 28%);
  border-bottom:6px solid #fff}
.news-updates:not(:has(.banner-slide)){display:none}
.news-updates::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(43,95,165,0.18),transparent)}
.section-heading{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;margin:0 0 22px;text-align:left}
.section-kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--brand)}
.section-kicker::before{content:"";width:46px;height:2px;background:linear-gradient(90deg,var(--brand),rgba(43,95,165,0.15))}
.section-heading h2{margin:0;font-family:'Oswald',sans-serif;font-size:56px;line-height:0.95;color:#1d2f4d;letter-spacing:0.8px;text-transform:uppercase}

/* Carousel (announcements) */
.carousel{position:relative;overflow:hidden;padding:18px 0}
.carousel-track{display:flex;transition:transform 400ms ease;will-change:transform}
.carousel-slide{min-width:100%;padding:24px 0;display:block}
.announce-date{color:#9aa0a6;font-size:13px;margin-bottom:6px}
.announce-title{margin:0 0 8px;font-size:20px;color:#23324a;font-weight:700}
.announce-body{margin:0;color:#555;max-width:900px}
.carousel-nav{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.carousel-nav .dots{margin:0;padding:0;display:flex;gap:10px;list-style:none}
.carousel-nav .dots li{width:12px;height:12px;border-radius:999px;background:#dcdcdc;cursor:pointer}
.carousel-nav .dots li.on{background:#bdbdbd}
.carousel-nav .slider-control{color:#c4c4c4;font-weight:700}

@media(max-width:700px){
  .announce-title{font-size:18px}
  .announce-body{font-size:14px}
}

/* Banner carousel styles */
.banner-carousel{position:relative;overflow:hidden;margin:0;border-radius:28px;background:#fff;border:1px solid rgba(43,95,165,0.08);box-shadow:0 22px 48px rgba(25,40,75,0.12);transition:box-shadow 240ms ease, transform 240ms ease, height 280ms ease;--banner-control-scale:1}
.banner-track{display:flex;align-items:flex-start;transition:transform 500ms ease;width:100%}
.banner-slide{min-width:100%;flex:0 0 100%;position:relative;overflow:hidden;background:transparent}
.banner-slide--has-bg{background-position:center;background-size:cover;background-repeat:no-repeat}
.banner-slide--has-bg::before{content:"";position:absolute;inset:0;background:inherit;filter:blur(16px);transform:scale(1.12);opacity:.92;pointer-events:none;z-index:0}
.banner-slide img{display:block;width:100%;height:auto;margin:0;position:relative;z-index:1}
.banner-carousel::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(15,27,54,0.08));pointer-events:none}
.banner-controls{position:absolute;top:14px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:2}
.slide-counter{pointer-events:auto;display:inline-flex;align-items:center;gap:4px;color:#fff;font-size:12px;font-weight:700;letter-spacing:0.08em;padding:6px 10px;background:rgba(12,22,42,0.28);border:1px solid rgba(255,255,255,0.38);border-radius:999px;backdrop-filter:blur(10px);box-shadow:0 10px 24px rgba(8,15,30,0.22);text-shadow:0 1px 3px rgba(0,0,0,0.35);transform:scale(var(--banner-control-scale));transform-origin:top left;transition:background-color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease}
.banner-pause{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;min-width:36px;background:rgba(12,22,42,0.28);border:1px solid rgba(255,255,255,0.38);border-radius:999px;backdrop-filter:blur(10px);box-shadow:0 10px 24px rgba(8,15,30,0.22);color:#fff;font-size:15px;line-height:1;padding:0;cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,0.35);transform:scale(var(--banner-control-scale));transform-origin:top right;transition:background-color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease}
.banner-pause:hover,
.slide-counter:hover{background:rgba(12,22,42,0.38);border-color:rgba(255,255,255,0.52);box-shadow:0 12px 28px rgba(8,15,30,0.28);transform:translateY(-1px) scale(var(--banner-control-scale))}
.banner-arrows{position:absolute;inset:50% 14px auto 14px;display:flex;align-items:center;justify-content:space-between;transform:translateY(-50%);pointer-events:none;z-index:2}
.banner-arrow{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,0.42);background:linear-gradient(180deg,rgba(12,22,42,0.28),rgba(12,22,42,0.18));backdrop-filter:blur(12px);box-shadow:0 14px 30px rgba(8,15,30,0.22),0 0 0 1px rgba(255,255,255,0.08) inset;color:#fff;cursor:pointer;transform:scale(var(--banner-control-scale));transition:transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease, opacity 220ms ease}
.banner-arrow-prev{transform-origin:left center}
.banner-arrow-next{transform-origin:right center}
.banner-arrow-icon{display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:11px solid #fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.22))}
.banner-arrow-next .banner-arrow-icon{border-right:0;border-left:11px solid #fff}
.banner-arrow:hover{transform:translateY(-2px) scale(calc(var(--banner-control-scale) * 1.03));background:linear-gradient(180deg,rgba(12,22,42,0.38),rgba(12,22,42,0.24));border-color:rgba(255,255,255,0.58);box-shadow:0 18px 34px rgba(8,15,30,0.26),0 0 0 1px rgba(255,255,255,0.12) inset}
.banner-arrow:active{transform:translateY(0) scale(calc(var(--banner-control-scale) * 0.98))}
.banner-dots{position:absolute;left:50%;transform:translateX(-50%) scale(var(--banner-control-scale));transform-origin:center bottom;bottom:14px;z-index:2}
.banner-dots ul{display:flex;gap:8px;padding:0;margin:0;list-style:none}
.banner-dots li{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,0.76);border:1px solid rgba(13,27,52,0.2);backdrop-filter:blur(8px);box-shadow:0 3px 10px rgba(8,15,30,0.16),0 0 0 1px rgba(255,255,255,0.18) inset;cursor:pointer;transition:width 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease}
.banner-dots li:hover{transform:translateY(-1px);background:rgba(255,255,255,0.94);border-color:rgba(13,27,52,0.28);box-shadow:0 5px 12px rgba(8,15,30,0.18),0 0 0 1px rgba(255,255,255,0.24) inset}
.banner-dots li.on{width:26px;background:rgba(12,22,42,0.28);border-color:rgba(255,255,255,0.38);box-shadow:0 10px 24px rgba(8,15,30,0.22),0 0 0 1px rgba(255,255,255,0.08) inset;backdrop-filter:blur(10px)}

@media(max-width:1000px){
  .section-heading h2{font-size:44px}
  .banner-carousel{aspect-ratio:auto}
}
@media(max-width:768px){
  .banner-controls{top:14px;left:14px;right:14px}
  .slide-counter{font-size:11px;gap:4px;padding:5px 9px}
  .banner-pause{width:34px;height:34px;min-width:34px;font-size:15px}
  .banner-arrows{inset:50% 14px auto 14px;transform:translateY(-50%)}
  .banner-arrow{width:34px;height:34px}
  .banner-arrow-icon{border-top-width:7px;border-bottom-width:7px;border-right-width:10px}
  .banner-arrow-next .banner-arrow-icon{border-left-width:10px}
  .banner-dots{bottom:12px}
  .banner-dots ul{gap:7px}
  .banner-dots li{width:9px;height:9px}
  .banner-dots li.on{width:22px}
}
@media(max-width:768px){
  .section-heading{align-items:flex-start;flex-direction:column;gap:8px}
  .section-heading h2{font-size:32px}
  .banner-carousel{
    aspect-ratio:auto;
    height:clamp(180px, 42vw, 260px);
    --banner-control-scale:.9;
  }
  .banner-track{align-items:stretch;height:100%}
  .banner-slide{height:100%}
  /* Keep full image visible; background stays filled via blurred slide background. */
  .banner-slide img{height:100%;object-fit:contain;position:relative;z-index:1}
  .banner-controls{top:10px;left:10px;right:10px}
  .slide-counter{font-size:11px;gap:4px;padding:5px 9px}
  .banner-pause{width:34px;height:34px;min-width:34px;font-size:15px}
  .banner-arrows{inset:54% 10px auto 10px;transform:translateY(-50%)}
  .banner-arrow{width:34px;height:34px}
  .banner-arrow-icon{border-top-width:7px;border-bottom-width:7px;border-right-width:10px}
  .banner-arrow-next .banner-arrow-icon{border-left-width:10px}
  .banner-dots{bottom:10px}
  .banner-dots ul{gap:7px}
  .banner-dots li{width:9px;height:9px}
  .banner-dots li.on{width:22px}
}
@media(max-width:480px){
  .banner-carousel{
    --banner-control-scale:.84;
    height:clamp(140px, 56vw, 180px);
  }
  .banner-controls{top:8px;left:8px;right:8px}
  .slide-counter{font-size:10px;gap:3px;padding:4px 8px}
  .banner-pause{width:28px;height:28px;min-width:28px;font-size:12px}
  .banner-arrows{top:56%;bottom:auto;left:8px;right:8px;transform:translateY(-50%)}
  .banner-arrow{width:28px;height:28px}
  .banner-arrow-icon{border-top-width:6px;border-bottom-width:6px;border-right-width:9px}
  .banner-arrow-next .banner-arrow-icon{border-left-width:9px}
  .banner-dots{bottom:8px}
  .banner-dots ul{gap:6px}
  .banner-dots li{width:8px;height:8px}
  .banner-dots li.on{width:18px}
}
.dots{display:flex;justify-content:center;gap:10px;list-style:none;padding:0;margin:0}
.dots li{width:12px;height:12px;border-radius:999px;background:#d7d7d7}
.dots li.on{background:#bdbdbd}
.slider-control{position:relative;float:right;margin-top:-26px;font-weight:700;color:#bdbdbd}

/* tiles grid */
.tiles-wrap{padding:28px 0}
.tiles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.tile{position:relative;display:block;overflow:hidden;height:250px;border-radius:2px}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile .overlay{position:absolute;inset:0;background:var(--accent);mix-blend-mode:multiply;opacity:0.92}
.tile-title{position:absolute;top:22px;left:22px;color:#fff;font-weight:700;font-size:22px;letter-spacing:2px;text-transform:uppercase;line-height:1.0}

/* footer */
.site-footer{padding:18px 0;border-top:1px solid #eee;color:#666}

@media(max-width:980px){
  .tiles-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
}
@media(max-width:640px){
  .gov-inner{display:flex;gap:12px}
  .gov-nav{display:none}
  .tiles-grid{grid-template-columns:1fr}
}

/* Public footer (dark, modern) */
.gov-footer{
  position:relative;
  isolation:isolate;
  padding:26px 0 0;
  border-top:0;
  overflow:visible;
  background: linear-gradient(180deg, #f2f5fa 0%, #d6dde8 55%, #c6cfdd 100%);
  color:rgba(15, 23, 42, 0.86);
}
.gov-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1.6px) 0 0/22px 22px;
  opacity:0.16;
  pointer-events:none;
  z-index:-1;
}
.gov-footer .footer-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: repeat(3, minmax(240px, 420px));
  justify-content:center;
  justify-items:stretch;
  gap:clamp(18px, 3.2vw, 56px);
  align-items:start;
  padding-bottom:16px;
}
.gov-footer .gov-footer-bottom{position:relative;z-index:1}
.gov-footer .footer-seal{display:flex;justify-content:flex-start;align-items:flex-start}
.gov-footer .footer-seal img{width:88px;height:88px;max-width:100%;object-fit:contain;display:block;filter:drop-shadow(0 12px 18px rgba(0,0,0,0.20))}
.gov-footer .footer-col{min-width:0;position:relative;padding-left:28px}
.gov-footer .footer-col::before{
  content:none;
}
.gov-footer .footer-col:first-of-type{padding-left:0}
.gov-footer .footer-col:first-of-type::before{display:none}
.gov-footer .footer-heading{
  margin:0 0 10px;
  font-family:'Oswald',sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(15, 23, 42, 0.92);
  display:flex;
  align-items:center;
  gap:0;
}
.gov-footer .footer-heading::before{
  content:none;
}
.gov-footer .footer-col{text-align:left}
.gov-footer .footer-contact-list{display:grid;gap:10px}
.gov-footer .footer-item{display:flex;align-items:flex-start;gap:12px;margin:0;color:rgba(15, 23, 42, 0.80)}
.gov-footer .footer-item-icon{
  width:18px;
  height:18px;
  border-radius:0;
  background:transparent;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  box-shadow:none;
}
.gov-footer .footer-item-icon img{
  width:18px;
  height:18px;
  object-fit:contain;
  filter:none;
  opacity:1;
}
.gov-footer .footer-item-text,
.gov-footer .footer-item-link{line-height:1.55}
.gov-footer .footer-item-link{color:rgba(15, 23, 42, 0.80);text-decoration:none}
.gov-footer .footer-item-link:hover{color:#2b5fa5;text-decoration:underline}
.gov-footer .footer-blurb{
  margin:0 0 10px;
  color:rgba(15, 23, 42, 0.78);
  line-height:1.65;
  font-size:12.5px;
}
.gov-footer .footer-links{padding:0;margin:0;list-style:none;display:grid}
.gov-footer .footer-links li{margin:0}
.gov-footer .footer-links a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:9px 0;
  color:rgba(15, 23, 42, 0.82);
  text-decoration:none;
  border-top:0;
  font-size:12.5px;
}
.gov-footer .footer-links li:first-child a{border-top:0}
.gov-footer .footer-links a::after{
  content:none;
}
.gov-footer .footer-links a:hover{color:#2b5fa5}
.gov-footer .footer-links a:hover::after{opacity:1}
.gov-footer-bottom{
  position:relative;
  z-index:1;
  margin-top:12px;
  padding:12px 0 12px;
  border-top:1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(10px);
}
.gov-footer-bottom-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  color:rgba(15, 23, 42, 0.70);
  font-size:11.5px;
}

@media (max-width:480px){
  .gov-footer-bottom-inner{
    flex-wrap:nowrap;
    gap:10px;
  }
  .gov-footer-bottom-inner > span:last-child{
    white-space:nowrap;
  }
}
.gov-footer-bottom-badge{
  width:28px;
  height:28px;
  border-radius:10px;
  background:transparent;
  border:0;
  display:inline-block;
  flex:0 0 auto;
  position:relative;
}
.gov-footer-bottom-badge::before{
  content:"";
  position:absolute;
  inset:6px;
  background: url("../img/icon-info-icons8-gray.png") center/contain no-repeat;
  opacity:0.9;
}

@media(max-width:1024px){
  .gov-footer .footer-inner{grid-template-columns:repeat(3,minmax(220px,1fr));justify-content:stretch;gap:22px}
  .gov-footer .footer-col{padding-left:22px}
}
@media(max-width:820px){
  .gov-footer{padding-top:22px}
  .gov-footer .footer-inner{grid-template-columns: 1fr;gap:22px}
  .gov-footer .footer-seal{justify-content:center}
  .gov-footer .footer-col{padding-left:0}
  .gov-footer .footer-col::before{display:none}
}

@media(max-width:900px){
  .gov-footer .footer-inner{grid-template-columns:1fr;grid-row-gap:20px}
  .gov-footer .footer-seal{order:0;justify-content:center}
  .gov-footer .footer-col{text-align:left}
}

@media(max-width:640px){
  .gov-footer{padding:18px 0}
  .gov-footer .footer-inner{gap:18px}
  .gov-footer .footer-seal img{width:78px;height:78px}
  .gov-footer h4{margin-bottom:8px;font-size:13px}
  .gov-footer p,
  .gov-footer .flat-links li,
  .gov-footer .footer-contact-list span,
  .gov-footer .footer-contact-list a{font-size:14px;line-height:1.5}
  .gov-footer .footer-contact-list{gap:8px}
  .gov-footer .footer-contact-list p{gap:8px}
  .gov-footer .footer-contact-list img{width:18px;height:18px;flex-basis:18px}
  .gov-footer .flat-links{margin-top:6px}
}

/* Vision & Mission modern card styles */
.vision-mission{
  width:100%;
  max-width:1360px;
  margin:0 auto;
  padding:56px 18px 54px;
  background:transparent;
}
.vision-mission .vm-inner{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;
  align-items:stretch;
}
.vision-mission .vm-col{
  position:relative;
  overflow:hidden;
  background:#f8fbff;
  border-radius:24px;
  padding:34px 36px 32px;
  box-shadow:0 18px 40px rgba(20,47,88,.10);
  border:1px solid rgba(43,95,165,.12);
  min-height:250px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.vision-mission .vm-col::before{
  content:none;
}
.vision-mission .vm-col::after{
  content:"";
  position:absolute;
  right:-34px;
  bottom:-44px;
  width:clamp(160px, 34vw, 320px);
  height:clamp(160px, 34vw, 320px);
  background:url("../img/vision-lto-office.png") center/contain no-repeat;
  opacity:0.10;
  filter:grayscale(1) contrast(0.95);
  pointer-events:none;
  z-index:0;
}
.vision-mission .vm-col:nth-child(2)::after{
  content:"";
  position:absolute;
  right:-28px;
  bottom:-50px;
  width:clamp(160px, 34vw, 320px);
  height:clamp(160px, 34vw, 320px);
  background:url("../img/mission-drivers-license.png") center/contain no-repeat;
  opacity:0.10;
  filter:grayscale(1) contrast(0.95);
  pointer-events:none;
  z-index:0;
}
.vision-mission .vm-col h2{
  margin:0 0 18px;
  font-family:'Oswald',sans-serif;
  color:#173761;
  font-size:32px;
  letter-spacing:.8px;
  line-height:1.05;
  text-transform:uppercase;
  position:relative;
  z-index:1;
}
.vision-mission .vm-col p{
  margin:0;
  max-width:60ch;
  color:#446182;
  line-height:1.88;
  font-size:18px;
  text-wrap:pretty;
  position:relative;
  z-index:1;
}
.vision-mission .vm-col:hover{
  transform:translateY(-4px);
  border-color:rgba(43,95,165,.2);
  box-shadow:0 24px 46px rgba(20,47,88,.14);
}

@media(max-width:1024px){
  .vision-mission{padding:44px clamp(12px,2.2vw,18px) 44px}
  .vision-mission .vm-inner{gap:20px}
  .vision-mission .vm-col{min-height:auto;padding:28px 24px}
  .vision-mission .vm-col h2{font-size:clamp(24px,3.2vw,28px)}
  .vision-mission .vm-col p{max-width:100%;font-size:clamp(15px,1.8vw,16px);line-height:1.78}
}

@media(max-width:768px){
  .vision-mission .vm-inner{grid-template-columns:1fr;gap:16px}
  .vision-mission{padding:34px clamp(12px,2.2vw,18px) 40px}
  .vision-mission .vm-col p{text-align:justify;text-justify:inter-word;hyphens:auto}
}

@media(max-width:480px){
  .vision-mission .vm-col{padding:24px 20px}
  .vision-mission .vm-col::after,
  .vision-mission .vm-col:nth-child(2)::after{
    /* Keep artwork as an overlay behind the text on mobile. */
    position:absolute;
    right:-26px;
    bottom:-28px;
    width:clamp(170px, 58vw, 240px);
    height:clamp(170px, 58vw, 240px);
    opacity:0.12;
  }
  .vision-mission .vm-col p{hyphens:none}
}

/* HRIS quick actions */
.section-heading-compact{margin-bottom:20px}
.section-heading-compact h2{font-size:40px}
.hris-actions{position:relative;padding:22px 18px 34px}
.hris-actions::before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,rgba(43,95,165,0.08),rgba(43,95,165,0.18),rgba(43,95,165,0.08))}
.hris-actions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.hris-action-card{position:relative;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;background:
  linear-gradient(180deg,rgba(255,255,255,0.98) 0%,rgba(246,250,255,0.98) 100%);
  border:1px solid rgba(43,95,165,0.10);border-radius:28px;padding:30px 30px 26px;min-height:290px;
  box-shadow:0 24px 54px rgba(27,45,78,0.10);backdrop-filter:blur(6px);
  transition:transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease, background-color 240ms ease}
.hris-action-card::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at top right, rgba(43,95,165,0.12), rgba(43,95,165,0) 32%),
  linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0.45));pointer-events:none}
.hris-action-card::after{content:"";position:absolute;top:0;left:0;width:100%;height:5px;background:linear-gradient(90deg,#2b5fa5,#5f88c2)}
.hris-action-card:hover{transform:translateY(-6px);box-shadow:0 30px 64px rgba(27,45,78,0.16);border-color:rgba(43,95,165,0.22)}
.hris-action-eyebrow{position:relative;z-index:1;display:inline-flex;align-items:center;width:max-content;padding:7px 12px;border-radius:999px;background:rgba(43,95,165,0.08);color:#2b5fa5;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase}
.hris-action-icon{position:relative;z-index:1;width:82px;height:82px;margin-top:18px;border-radius:24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#2b5fa5,#163f7a);color:#fff;box-shadow:0 16px 28px rgba(22,63,122,0.24)}
.hris-action-card h3{position:relative;z-index:1;margin:22px 0 12px;font-family:'Oswald',sans-serif;font-size:30px;line-height:1;color:#163f7a;letter-spacing:0.2px}
.hris-action-card p{position:relative;z-index:1;margin:0;color:#5d6f89;font-size:17px;line-height:1.8}
.hris-action-cta{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:24px;color:#184d97;font-family:'Oswald',sans-serif;font-size:18px;letter-spacing:0.4px}
.hris-action-cta::after{content:"\2192";display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:rgba(24,77,151,0.08);box-shadow:inset 0 0 0 1px rgba(24,77,151,0.16);font-size:16px;line-height:1;color:#184d97;padding:0 0 1px 1px;transition:transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease}
.hris-action-card:hover .hris-action-cta::after{transform:translateX(3px);background:rgba(24,77,151,0.14);box-shadow:inset 0 0 0 1px rgba(24,77,151,0.24)}

.login-modal-open{overflow:hidden}
.login-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;pointer-events:none;z-index:2000;overflow:hidden;overscroll-behavior:contain;transition:opacity 280ms ease,visibility 280ms ease}
.login-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.login-modal-backdrop{position:absolute;inset:0;background:rgba(11,30,54,0.78)}
.login-modal-dialog{position:relative;z-index:1;width:min(100%,920px);max-height:calc(100dvh - 48px);margin:auto 0;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none;border-radius:34px;background:#ffffff;transform:translateY(28px) scale(.97);opacity:0;transition:transform 320ms cubic-bezier(.2,.8,.2,1),opacity 320ms ease}
.login-modal-dialog::-webkit-scrollbar{width:0;height:0}
.login-modal.is-open .login-modal-dialog{transform:translateY(0) scale(1);opacity:1}
.login-card-modal{display:block;width:100%;padding:0;border-radius:34px;overflow:hidden;background:transparent;box-shadow:none;border:0}
.login-card-modal-split{position:relative;display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);width:100%;min-height:auto;border-radius:34px;overflow:hidden;background:#fff;box-shadow:0 28px 70px rgba(32,43,78,.18)}
#loginModal .login-card-modal-split{margin-top:-4px}
.login-card-modal-split::after{display:none}
.login-card-modal-split::before{display:none}
.login-modal-visual{position:relative;display:flex;align-items:center;justify-content:center;order:1;padding:22px 24px;background:
  radial-gradient(circle at top right,rgba(255,255,255,.20),rgba(255,255,255,0) 32%),
  radial-gradient(circle at bottom left,rgba(255,255,255,.12),rgba(255,255,255,0) 34%),
  linear-gradient(135deg,#163f7a 0%,#2b5fa5 48%,#6f95c9 100%);overflow:hidden;clip-path:none;min-width:0}
.login-modal-visual::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 18% 22%,rgba(255,255,255,.10),rgba(255,255,255,0) 22%),
  radial-gradient(circle at 82% 14%,rgba(255,255,255,.08),rgba(255,255,255,0) 18%),
  radial-gradient(circle at 76% 78%,rgba(255,255,255,.08),rgba(255,255,255,0) 24%);
opacity:.9}
.login-modal-visual::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at center,rgba(255,255,255,.07),rgba(255,255,255,0) 42%),
  repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.04) 0 2px,transparent 2px 42px)}
.login-modal-visual-overlay{position:absolute;inset:0;background:
  radial-gradient(circle at center,rgba(255,255,255,.08),rgba(255,255,255,0) 42%),
  linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02))}
.login-modal-visual-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(100%,290px);min-height:320px;padding:8px 8px 0;text-align:center;color:#fff}
.login-modal-visual-logo{width:200px;height:200px;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(20,17,80,.30))}
.login-modal-visual-title{margin:14px 0 6px;font-family:'Oswald',sans-serif;font-size:clamp(32px,3vw,40px);line-height:.96;font-weight:700;letter-spacing:.03em;color:#fff;white-space:normal;text-wrap:balance;overflow-wrap:anywhere}
.login-modal-visual-subtitle{margin:0;font-size:12px;line-height:1.25;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.94);font-weight:700;white-space:normal;text-wrap:balance}
.login-modal-visual-kicker{margin-top:18px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#ffffff;white-space:normal;text-wrap:balance}
.login-modal-panel{position:relative;display:flex;flex-direction:column;justify-content:center;order:2;padding:0;background:#fff;min-height:0;overflow-y:auto;overflow-x:hidden}
.login-modal-panel::before{display:none}
.login-modal-panel > .login-modal-header-plain{width:100%;margin:0}
.login-modal-panel > .login-modal-body-plain{width:min(calc(100% - 40px),520px);margin:0 auto}
.login-modal-header-plain{position:relative;display:flex;align-items:center;justify-content:center;min-height:180px;padding:26px 56px 22px 20px;margin-top:0;background:linear-gradient(135deg,#163f7a 0%,#2b5fa5 55%,#6f95c9 100%);color:#fff;border-bottom:1px solid rgba(255,255,255,.10);overflow:hidden}
.login-modal-header-plain::before,.login-modal-header-plain::after{display:none}
.login-modal-header-plain .login-modal-header-copy{width:100%;max-width:calc(100% - 44px);margin:0 auto;text-align:center}
.login-modal-title-row{display:flex;justify-content:center}
.login-modal-panel-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;color:#7a879a;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.login-modal-panel-kicker::before{content:"";width:30px;height:2px;background:linear-gradient(90deg,#b27a12,#e0bf73)}
.login-modal-header-plain h2{color:#ffffff;font-size:clamp(34px,4vw,52px);letter-spacing:-.04em;font-weight:800;text-transform:none;line-height:1.04;text-shadow:0 4px 14px rgba(12,28,58,.18);max-width:12ch;white-space:normal;text-wrap:balance;overflow-wrap:anywhere;margin:0}
.login-modal-header-plain h2 span{color:#f0c35a}
.login-modal-header-plain .login-modal-subtitle{margin:12px auto 0;color:rgba(255,255,255,.88);font-size:clamp(12px,1.2vw,15px);line-height:1.3;max-width:24ch;text-align:center;text-wrap:balance}
.login-modal-body-plain{padding:12px 32px 22px}
.login-modal-body-plain::before{display:none}
.login-modal-role-band{margin:0 0 18px;padding:0 0 12px;border:0;border-bottom:1px solid rgba(43,95,165,.14);border-radius:0;background:transparent;text-align:center;font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#7f8ca2}
.login-card-modal-split .login-form-modal{gap:14px}
.login-card-modal-split .login-input-shell{min-height:60px;padding:14px 18px;border-radius:14px;border-color:#d7e3f5;background:linear-gradient(180deg,#fbfdff,#f4f8ff);box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.login-card-modal-split .login-input-wrap-modal input{min-height:24px;padding:14px 0 0;font-size:14px;line-height:1.25;color:#2d3b53;font-family:"Segoe UI",Tahoma,Arial,sans-serif}
.login-card-modal-split .login-floating-label{left:56px;top:48%;font-size:15px;color:#7a8798;font-family:"Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:.01em}
.login-card-modal-split .login-input-wrap-modal input:focus + .login-floating-label,
.login-card-modal-split .login-input-wrap-modal input:not(:placeholder-shown) + .login-floating-label{top:10px;font-size:10px;letter-spacing:.04em;color:#2b5fa5}
.login-card-modal-split .login-input-wrap-modal:hover .login-input-shell{border-color:rgba(43,95,165,.28);background:#f7fbff}
.login-card-modal-split .login-input-wrap-modal:focus-within .login-input-shell{border-color:rgba(178,122,18,.64);box-shadow:0 0 0 4px rgba(178,122,18,.10);transform:none}
.login-card-modal-split .login-input-icon{color:#5d6475}
.login-card-modal-split .login-password-toggle{right:12px;width:34px;height:34px;padding:0;background:transparent;color:#b67812;border:0;border-radius:999px;box-shadow:none}
.login-card-modal-split .login-password-toggle:hover{background:transparent;color:#9b6200;transform:translateY(-50%)}
.login-card-modal-split .login-password-toggle.is-active{background:transparent;color:#b67812}
.login-modal-actions-row-split{display:flex;justify-content:flex-end;align-items:center;gap:18px;margin-top:4px;padding-top:0}
.login-recover-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border:1px solid rgba(93,100,117,.36);border-radius:8px;background:#fff;color:#56667c;font-size:13px;text-decoration:none}
.login-recover-btn:hover{border-color:#2b5fa5;color:#2b5fa5}
.login-card-modal-split .login-forgot-link{color:#184d97;font-weight:600}
.login-submit-btn-modal-split{margin-top:6px;min-height:48px;border-radius:14px;background:linear-gradient(135deg,#163f7a,#2b5fa5);box-shadow:0 14px 26px rgba(22,63,122,.18)}
.login-submit-btn-modal-split:hover{box-shadow:0 16px 28px rgba(22,63,122,.22);filter:none}
.login-modal-meta-split{margin-top:14px;padding-top:14px;font-size:11px;border-top:1px solid rgba(43,95,165,.12)}
.login-modal-header-plain .login-modal-close{position:absolute;top:10px;right:4px;width:30px;height:30px;padding:0;background:transparent;color:#dfe8f7;border:0;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;font-size:24px;line-height:1}
.login-modal-header-plain .login-modal-close:hover{background:transparent;color:#ffffff;transform:none}
.login-modal-header{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:18px;padding:28px 30px 24px;background:linear-gradient(135deg,#163f7a 0%,#2b5fa5 55%,#5f88c2 100%);color:#fff;overflow:hidden}
.login-modal-header::before{content:"";position:absolute;inset:auto auto -64px -58px;width:180px;height:180px;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 70%)}
.login-modal-header::after{content:"";position:absolute;top:-56px;right:88px;width:170px;height:170px;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 72%)}
.login-modal-header-copy{position:relative;z-index:1;max-width:460px}
.login-modal-agency-mark{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.login-modal-agency-mark img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(8,19,42,.22))}
.login-modal-agency-copy{display:grid;gap:2px}
.login-modal-agency-copy span{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.login-modal-agency-copy strong{font-size:15px;font-weight:700;letter-spacing:.04em;color:#fff}
.login-modal-header h2{margin:0;font-size:42px;line-height:1;letter-spacing:-.04em;color:#fff}
.login-modal-subtitle{margin:12px 0 0;max-width:28ch;font-size:14px;line-height:1.45;color:rgba(255,255,255,.88)}
.login-modal-subtitle .agency-line,
.login-modal-subtitle .system-line{display:block}
.login-modal-body{position:relative;padding:26px 30px 30px}
.login-modal-body::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0) 32%);pointer-events:none}
.login-form-modal{position:relative;z-index:1;gap:18px}
.login-modal-official-note{position:relative;z-index:1;margin:0 0 18px;padding:12px 14px;border-left:4px solid #f0a128;border-radius:14px;background:linear-gradient(180deg,#f8fbff,#eef4ff);color:#355275;font-size:13px;line-height:1.55;box-shadow:0 10px 20px rgba(33,63,112,.05)}
.login-modal-official-note strong{color:#163f7a}
.login-card-modal .alert{position:relative;z-index:1;padding:14px 16px;border-radius:14px;border:1px solid transparent;font-size:14px;line-height:1.5}
.login-card-modal .alert-error{background:#fff1f1;border-color:#efc7c7;color:#8b2e2e}
.login-card-modal .alert-success{background:#edf8f1;border-color:#cbe8d3;color:#1e6a42}
.login-input-wrap-modal{position:relative;display:block}
.login-modal .login-input-shell .login-input-icon{position:static;flex:0 0 26px;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;transform:none;color:#2b5fa5;pointer-events:none;z-index:2;background:transparent;box-shadow:none;border:0}
.login-modal .login-input-wrap-modal .login-input-icon svg{display:block;width:26px;height:26px}
.login-modal .login-input-wrap-modal .login-input-icon img{display:block;width:26px;height:26px}
.login-input-shell{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;column-gap:18px;width:100%;min-height:78px;padding:18px 24px 18px 24px;border-radius:18px;border:1px solid rgba(43,95,165,.22);background:linear-gradient(180deg,#f7fbff,#edf4ff);box-shadow:0 8px 18px rgba(29,56,106,.04);overflow:visible;transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease,background-color 180ms ease}
.login-input-wrap-modal input{display:block;grid-column:2;width:100%;margin:0;height:auto;min-height:32px;padding:12px 0 2px;border:0;border-radius:0;background:transparent;font-size:18px;line-height:1.35;color:#24344d;box-shadow:none;text-indent:0;appearance:none}
.login-input-wrap-modal:has(.login-password-toggle) input{padding-right:52px}
.login-input-wrap-modal input::placeholder{color:transparent}
.login-floating-label{position:absolute;left:56px;top:48%;transform:translateY(-50%);color:#6c7d93;font-size:17px;font-weight:600;line-height:1;pointer-events:none;font-family:"Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:.01em;transition:top 180ms ease,transform 180ms ease,font-size 180ms ease,color 180ms ease,letter-spacing 180ms ease}
.login-input-wrap-modal input:focus + .login-floating-label,
.login-input-wrap-modal input:not(:placeholder-shown) + .login-floating-label{top:14px;transform:none;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:none;color:#2b5fa5}
.login-input-wrap-modal:hover .login-input-shell{border-color:rgba(43,95,165,.34);background:linear-gradient(180deg,#f2f8ff,#e8f1ff)}
.login-input-wrap-modal:focus-within .login-input-shell{border-color:#f0a128;box-shadow:0 0 0 4px rgba(240,161,40,.14),0 10px 22px rgba(32,72,154,.08);transform:translateY(-1px)}
.login-input-wrap-modal input:hover{border-color:#bdd0f6}
.login-input-wrap-modal input:focus{outline:none;border-color:transparent;box-shadow:none;transform:none}
.login-password-toggle{-webkit-appearance:none;appearance:none;position:absolute;right:14px;top:50%;width:38px;height:38px;padding:0;transform:translateY(-50%);border:0;border-radius:999px;background:rgba(43,95,165,.08);color:#2b5fa5;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color 180ms ease,color 180ms ease,transform 180ms ease;z-index:2}
.login-password-toggle:hover{background:rgba(43,95,165,.14);transform:translateY(-50%) scale(1.05)}
.login-password-toggle.is-active{background:rgba(240,161,40,.16);color:#9b6200}
.login-password-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}
.login-password-icon svg{width:18px;height:18px}
.login-password-icon-hide{display:none}
.login-password-toggle.is-active .login-password-icon-show{display:none}
.login-password-toggle.is-active .login-password-icon-hide{display:inline-flex}
.login-modal-actions-row{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:2px;padding:4px 2px 0}
.login-forgot-under-password{display:flex;justify-content:flex-end;margin-top:0;padding:6px 2px}
.login-forgot-link{color:#184d97;font-size:14px;font-weight:800}
.login-forgot-link:hover{text-decoration:underline}
.login-captcha-block{margin:2px 2px 10px}
.login-captcha-hint-row{display:block;margin:0 0 8px}
.login-captcha-hint{margin:0;color:#223b61;font-size:13px;font-weight:700;letter-spacing:.01em}
.login-captcha-row{display:flex;align-items:stretch;gap:14px}
.login-captcha-image-wrap{display:flex;flex:1;align-items:center;gap:10px;flex-wrap:nowrap}
.login-captcha-image-frame{flex:1;display:flex;justify-content:center;align-items:center}
.login-captcha-input-wrap{flex:1;min-width:0}
.login-captcha-input-wrap .login-input-shell{min-height:62px}
.login-captcha-image{display:block;width:190px;max-width:100%;height:62px;border:1px solid rgba(36,63,100,.28);border-radius:8px;background:#f4f7fb}
.login-captcha-refresh{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid rgba(43,95,165,.36);border-radius:10px;background:#fff;color:#1f4d8f;cursor:pointer;transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,transform 160ms ease}
.login-captcha-refresh img{display:block;width:18px;height:18px}
.login-captcha-refresh:hover{background:rgba(43,95,165,.08);border-color:rgba(43,95,165,.5);color:#163f7a}
.login-captcha-refresh:active{transform:translateY(1px)}
.login-submit-btn-modal{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:60px;margin-top:8px;border-radius:18px;background:linear-gradient(135deg,#163f7a,#2b5fa5);letter-spacing:.16em;box-shadow:0 12px 24px rgba(22,63,122,.18);transition:transform 200ms ease,box-shadow 200ms ease,filter 200ms ease}
.login-submit-btn-modal:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(22,63,122,.24);filter:saturate(1.03)}
.login-submit-btn-modal,
.login-submit-btn-modal-split{position:relative}
.login-submit-btn.is-loading span{opacity:0}
.login-submit-btn.is-loading{cursor:wait;filter:saturate(.95) brightness(.98)}
.login-submit-btn.is-loading::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.95);display:inline-block;margin:0;vertical-align:middle;border:0 !important;box-shadow:12px 0 0 rgba(255,255,255,.35),24px 0 0 rgba(255,255,255,.35);animation:ltoDots 900ms ease-in-out infinite !important}
@keyframes ltoDots{
  0%{box-shadow:0 0 0 rgba(255,255,255,.95),12px 0 0 rgba(255,255,255,.35),24px 0 0 rgba(255,255,255,.35)}
  33%{box-shadow:0 0 0 rgba(255,255,255,.35),12px 0 0 rgba(255,255,255,.95),24px 0 0 rgba(255,255,255,.35)}
  66%{box-shadow:0 0 0 rgba(255,255,255,.35),12px 0 0 rgba(255,255,255,.35),24px 0 0 rgba(255,255,255,.95)}
  100%{box-shadow:0 0 0 rgba(255,255,255,.95),12px 0 0 rgba(255,255,255,.35),24px 0 0 rgba(255,255,255,.35)}
}
.login-inline-error{margin:0 0 12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(246,187,187,.95);background:linear-gradient(180deg,#ffffff,rgba(253,234,234,.72));color:#7f2a2a;font-weight:800;font-size:13px;line-height:1.35}
.login-modal-meta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(43,95,165,.14);color:#5f7088;font-size:12px;line-height:1.5}
.login-modal-meta-link{color:#184d97;font-weight:700;text-decoration:none}
.login-modal-meta-link:hover{text-decoration:underline}
.login-modal-close{-webkit-appearance:none;appearance:none;position:absolute;top:18px;right:18px;z-index:3;width:42px;height:42px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background-color 180ms ease,transform 180ms ease}
.login-modal-close:hover{background:rgba(240,161,40,.22);transform:rotate(90deg)}
.register-modal-dialog{width:min(100%,940px);max-height:calc(100dvh - 32px);overflow:hidden}
.register-modal-header{background:linear-gradient(135deg,#0f4c81 0%,#2b5fa5 55%,#7aa1d0 100%)}
.register-card-modal{border-color:rgba(15,76,129,.18)}
.register-card-modal.login-card-modal-split{grid-template-columns:minmax(300px,360px) minmax(0,1fr);min-height:auto}
.forgot-card-modal.login-card-modal-split{min-height:auto}
.forgot-modal-panel{justify-content:flex-start}
.register-modal-visual .login-modal-visual-content{width:min(100%,290px);min-height:280px;padding:8px 8px 0}
.register-modal-visual .login-modal-visual-logo{width:180px;height:180px}
.register-modal-visual .login-modal-visual-title{margin:12px 0 5px;font-size:clamp(30px,2.8vw,38px);line-height:.96}
.register-modal-visual .login-modal-visual-subtitle{font-size:11px;line-height:1.2}
.register-modal-visual .login-modal-visual-kicker{margin-top:14px;padding:8px 14px}
.register-modal-panel > .register-modal-header-plain{width:100%;margin:0}
.register-modal-panel > .register-modal-body{width:min(calc(100% - 36px),560px);margin:0 auto}
.register-modal-header-plain{background:linear-gradient(135deg,#163f7a 0%,#2b5fa5 55%,#6f95c9 100%)}
.register-modal-header-plain{min-height:186px;padding:26px 56px 22px 20px}
.register-modal-header-plain h2{font-size:clamp(34px,4vw,50px);line-height:1.04;white-space:normal;text-wrap:balance;max-width:12ch}
.register-modal-header-plain .login-modal-subtitle{margin-top:12px;font-size:clamp(12px,1.2vw,15px);line-height:1.3;max-width:24ch;text-wrap:balance}
.register-modal-body{padding:10px 28px 18px}
.register-modal-panel{min-height:0;overflow-y:auto;overflow-x:hidden}
.verification-modal-dialog{width:min(100%,760px);max-height:none !important;overflow:visible !important}
.verification-card-modal.login-card-modal-split{grid-template-columns:.72fr 1fr;min-height:460px}
.verification-modal-visual .login-modal-visual-content{width:min(100%,240px);min-height:280px}
.verification-modal-panel > .verification-modal-header-plain{width:100%;margin:0}
.verification-modal-panel > .verification-modal-body{width:min(calc(100% - 36px),420px);margin:0 auto}
.verification-modal-header-plain{background:linear-gradient(135deg,#163f7a 0%,#2b5fa5 55%,#6f95c9 100%)}
.verification-modal-body{padding:16px 24px 22px;background:#ffffff}
.verification-modal-body .alert{margin-bottom:12px}
.verification-modal-role-band{margin-bottom:12px;padding-bottom:8px;color:#7b889d;letter-spacing:.24em}
.verification-modal .login-form-modal.verification-form{gap:12px;align-items:center}
.verification-hero-icon{display:flex;justify-content:center;color:#bcc2cb;margin:0 0 8px}
.verification-hero-icon svg{width:120px;height:auto}
.verification-hero-image{display:block;width:120px;height:auto;object-fit:contain;filter:grayscale(1) saturate(0) brightness(1.08) contrast(.92);transition:filter 220ms ease}
.verification-hero-icon.is-ready{color:#84c341}
.verification-hero-icon.is-ready .verification-hero-image{filter:none}
.verification-otp-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 6px}
.verification-form input.verification-otp-digit{-webkit-appearance:none !important;appearance:none !important;display:inline-block !important;flex:0 0 42px !important;width:42px !important;min-width:42px !important;max-width:42px !important;height:58px !important;min-height:58px !important;max-height:58px !important;margin:0 !important;padding:0 !important;border:1px solid #d4d8de !important;border-radius:8px !important;background:#eceef1 !important;color:#202327 !important;font-size:36px !important;font-weight:800 !important;line-height:1 !important;text-align:center !important;box-shadow:none !important}
.verification-form input.verification-otp-digit:focus{outline:none !important;border-color:#9eb4d8 !important;box-shadow:0 0 0 3px rgba(43,95,165,.15) !important;background:#ffffff !important}
.verification-otp-ready{display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px;border-radius:999px;background:#84c341;color:#ffffff;font-size:20px;font-weight:800;opacity:0;transform:scale(.86);transition:opacity 180ms ease,transform 180ms ease}
.verification-otp-ready.is-visible{opacity:1;transform:scale(1)}
.verification-title{margin:2px 0 4px;font-size:32px;line-height:1;letter-spacing:-.02em;color:#2d333d;font-weight:800;text-align:center;width:100%}
.verification-description{margin:0 auto 6px;max-width:38ch;font-size:12px;line-height:1.5;color:#8b919b;text-align:center}
.verification-modal .login-form-modern .verification-remember-device{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0 0 8px;color:#5e6f86;font-size:13px;line-height:1.3;cursor:pointer}
.verification-form input.verification-remember-checkbox[type="checkbox"]{all:unset;appearance:auto !important;-webkit-appearance:checkbox !important;display:inline-block !important;flex:0 0 16px !important;width:16px !important;min-width:16px !important;max-width:16px !important;height:16px !important;min-height:16px !important;max-height:16px !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;vertical-align:middle !important;transform:none !important;accent-color:#2b5fa5}
.verification-modal .login-form-modern .verification-remember-text{display:inline-block;vertical-align:middle;font-weight:600}
.verification-form .verification-primary-btn{margin-top:8px}
.register-form-modal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;align-items:start}
.register-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.register-form-modal > .register-honeypot,
.register-form-modal > .password-validation-indicator,
.register-form-modal > .register-submit-btn-modal,
.register-form-modal > .register-login-row{grid-column:1/-1}
.register-form-modal > .alert{grid-column:1/-1}
.register-form-modal > .register-input-wrap:has(#registerModalPassword){order:5}
.register-form-modal > .register-input-wrap:has(#registerModalConfirmPassword){order:6}
.register-form-modal > .register-login-row{order:7}
.register-form-modal > .password-validation-indicator{order:8}
.register-form-modal > .register-submit-btn-modal{order:9}
.register-input-wrap .login-input-shell{min-height:62px;padding:14px 18px;border-radius:16px}
.register-input-wrap input{min-height:24px;padding:13px 0 0;font-size:14px}
.register-input-wrap:has(.login-password-toggle) .login-input-shell{min-height:58px;padding:12px 16px;border-radius:14px}
.register-input-wrap:has(.login-password-toggle) input{padding-top:16px;font-size:13px}
.register-input-wrap:has(.login-password-toggle) input{padding-right:34px}
.register-input-wrap .login-floating-label{left:56px}
.register-input-wrap:has(.login-password-toggle) .login-floating-label{top:50%;transform:translateY(-50%);font-size:15px}
.register-input-wrap:has(.login-password-toggle) .login-floating-label{right:24px}
.register-input-wrap .login-floating-label{font-size:15px}
.register-input-wrap input:focus + .login-floating-label,
.register-input-wrap input:not(:placeholder-shown) + .login-floating-label{top:10px;font-size:10px}
.register-input-wrap:has(.login-password-toggle) input:focus + .login-floating-label,
.register-input-wrap:has(.login-password-toggle) input:not(:placeholder-shown) + .login-floating-label{top:8px;font-size:9px}
.register-modal-role-band{margin:0 0 20px;padding:12px 16px;border:1px solid rgba(178,122,18,.18);border-radius:999px;background:linear-gradient(180deg,#fffaf1,#fff6e6);text-align:center;font-size:12px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:#9b6500}
.register-form-modal .login-password-toggle{-webkit-appearance:none;appearance:none;right:10px;width:20px;height:20px;padding:0;background:transparent;color:#b67812;border:0;border-radius:999px;box-shadow:none;outline:none}
.register-form-modal .login-password-toggle:hover{background:transparent;color:#9b6200;transform:translateY(-50%)}
.register-form-modal .login-password-toggle.is-active{background:transparent;color:#b67812}
.register-form-modal .login-password-icon{width:20px;height:20px}
.register-form-modal .login-password-icon svg{width:20px;height:20px}
.register-submit-btn-modal{min-height:44px;margin-top:2px}
.register-form-modal .password-validation-indicator{margin-top:6px;padding:14px 0 0;background:transparent;border:0;box-shadow:none}
.register-form-modal .password-validation-indicator.is-hidden{display:none}
.register-form-modal .password-strength-progress{position:relative;width:100%;height:6px;margin-bottom:16px;border-radius:999px;background:#d7dde5;overflow:hidden}
.register-form-modal .password-strength-progress-bar{display:block;width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,#d92d20,#f59e0b);transition:width 220ms ease,background 220ms ease}
.register-form-modal .password-strength-progress-bar[data-strength="medium"]{background:linear-gradient(90deg,#d49a18,#f0c35a)}
.register-form-modal .password-strength-progress-bar[data-strength="strong"]{background:linear-gradient(90deg,#2e8b57,#6fbe7b)}
.register-form-modal .password-strength-alert{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:13px;font-weight:700;line-height:1.35;color:#b42318}
.register-form-modal .password-strength-alert.is-hidden{display:none}
.register-form-modal .password-strength-alert::before{content:"";flex:0 0 10px;width:10px;height:10px;border-radius:999px;background:currentColor}
.register-form-modal .password-strength-alert[data-strength="empty"],
.register-form-modal .password-strength-alert[data-strength="weak"]{color:#b42318}
.register-form-modal .password-strength-alert[data-strength="medium"]{color:#b58112}
.register-form-modal .password-strength-alert[data-strength="strong"]{color:#2e8b57}
.register-form-modal .password-validation-title{margin-bottom:12px;font-size:14px;font-weight:700;color:#163f7a;letter-spacing:0;text-transform:none}
.register-form-modal .password-validation-list{display:grid;grid-template-columns:1fr;gap:9px}
.register-form-modal .password-validation-item{display:flex;align-items:flex-start;gap:10px;margin:0;padding:0;font-size:12px}
.register-form-modal .validation-icon{width:18px;height:18px;font-size:10px;background:transparent;border:2px solid currentColor;box-shadow:none}
.register-form-modal .validation-icon-invalid{color:#b8c0cb}
.register-form-modal .validation-icon-valid{display:none;color:#6fbe7b}
.register-form-modal .validation-text{padding-top:0;font-size:13px;line-height:1.45;color:#7ebf73;font-weight:700}
.register-form-modal .password-validation-item:not(.is-valid) .validation-text{color:#95a0ae;font-weight:600}
.register-form-modal .password-validation-item.is-valid .validation-icon-invalid{display:none}
.register-form-modal .password-validation-item.is-valid .validation-icon-valid{display:flex}
.register-form-modal .password-validation-item.is-valid .validation-text{color:#6fbe7b;font-weight:700}
.register-submit-btn-modal{background:linear-gradient(135deg,#0f4c81,#2b5fa5);box-shadow:0 12px 24px rgba(15,76,129,.18)}
.register-submit-btn-modal:hover{box-shadow:0 16px 28px rgba(15,76,129,.24)}
.register-login-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;font-size:13px;font-weight:700;color:#6c7d93}
.register-login-link{color:#184d97;font-weight:900;text-decoration:none}
.register-login-link:hover{text-decoration:underline}
.register-honeypot{position:absolute !important;left:-9999px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important}

@media (min-width:641px) and (max-width:980px){
  .login-modal{
    align-items:flex-start;
  }
  .login-modal-dialog,
  .register-modal-dialog,
  .verification-modal-dialog{
    width:min(100%,720px);
    max-height:calc(100vh - 40px);
    overflow:auto !important;
    scrollbar-width:auto;
    -ms-overflow-style:auto;
  }
  .login-modal-dialog::-webkit-scrollbar,
  .register-modal-dialog::-webkit-scrollbar,
  .verification-modal-dialog::-webkit-scrollbar{
    width:10px;
    height:10px;
  }
  .login-card-modal-split,
  .register-card-modal.login-card-modal-split,
  .forgot-card-modal.login-card-modal-split,
  .verification-card-modal.login-card-modal-split{
    display:grid;
    height:100%;
    min-height:auto;
  }
  .login-card-modal-split,
  .register-card-modal.login-card-modal-split,
  .forgot-card-modal.login-card-modal-split{
    grid-template-columns:minmax(220px,.62fr) minmax(0,1fr);
  }
  .verification-card-modal.login-card-modal-split{
    grid-template-columns:minmax(200px,.56fr) minmax(0,1fr);
  }
  #loginModal .login-modal-visual,
  #forgotPasswordModal .login-modal-visual,
  #registerModal .register-modal-visual,
  #twoFaModal .verification-modal-visual,
  #registerVerificationModal .verification-modal-visual{
    display:flex;
    padding:18px 18px;
  }
  #loginModal .login-modal-visual-content,
  #forgotPasswordModal .login-modal-visual-content,
  #registerModal .register-modal-visual-content{
    width:min(100%,220px);
    min-height:250px;
  }
  #twoFaModal .verification-modal-visual .login-modal-visual-content,
  #registerVerificationModal .verification-modal-visual .login-modal-visual-content{
    width:min(100%,200px);
    min-height:230px;
  }
  #loginModal .login-modal-visual-logo,
  #forgotPasswordModal .login-modal-visual-logo,
  #registerModal .register-modal-visual-logo{
    width:150px;
    height:150px;
  }
  #loginModal .login-modal-visual-title,
  #forgotPasswordModal .login-modal-visual-title,
  #registerModal .register-modal-visual-title{
    font-size:34px;
  }
  #loginModal .login-modal-panel,
  #forgotPasswordModal .forgot-modal-panel,
  #registerModal .register-modal-panel,
  #twoFaModal .verification-modal-panel,
  #registerVerificationModal .verification-modal-panel{
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    min-height:0;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  #loginModal .login-modal-panel::-webkit-scrollbar,
  #forgotPasswordModal .forgot-modal-panel::-webkit-scrollbar,
  #registerModal .register-modal-panel::-webkit-scrollbar,
  #twoFaModal .verification-modal-panel::-webkit-scrollbar,
  #registerVerificationModal .verification-modal-panel::-webkit-scrollbar{
    width:10px;
    height:10px;
  }
  #loginModal .login-modal-panel > .login-modal-body-plain,
  #forgotPasswordModal .forgot-modal-panel > .login-modal-body-plain,
  #registerModal .register-modal-panel > .register-modal-body,
  #twoFaModal .verification-modal-panel > .verification-modal-body,
  #registerVerificationModal .verification-modal-panel > .verification-modal-body{
    flex:1 1 auto;
    width:min(calc(100% - 40px),720px);
    min-height:0;
  }
}

@media (min-width:641px) and (max-width:760px){
  .login-modal{
    align-items:flex-start;
    padding:12px;
  }
  .login-modal-dialog,
  .register-modal-dialog,
  .verification-modal-dialog{
    width:min(100%,560px) !important;
    max-height:calc(100vh - 24px) !important;
    overflow:auto !important;
    scrollbar-width:auto;
    -ms-overflow-style:auto;
    border-radius:22px;
  }
  .login-modal-dialog::-webkit-scrollbar,
  .register-modal-dialog::-webkit-scrollbar,
  .verification-modal-dialog::-webkit-scrollbar{
    width:10px;
    height:10px;
  }
  .login-card-modal,
  .login-card-modal-split{
    border-radius:22px;
  }
  .login-card-modal-split,
  .register-card-modal.login-card-modal-split,
  .forgot-card-modal.login-card-modal-split,
  .verification-card-modal.login-card-modal-split{
    height:100%;
  }
  .login-card-modal-split,
  .register-card-modal.login-card-modal-split,
  .forgot-card-modal.login-card-modal-split{
    grid-template-columns:minmax(170px,.5fr) minmax(0,1fr);
  }
  .verification-card-modal.login-card-modal-split{
    grid-template-columns:minmax(150px,.44fr) minmax(0,1fr);
  }
  #loginModal .login-modal-visual,
  #forgotPasswordModal .login-modal-visual,
  #registerModal .register-modal-visual,
  #twoFaModal .verification-modal-visual,
  #registerVerificationModal .verification-modal-visual{
    display:flex;
    padding:12px;
  }
  #loginModal .login-modal-visual-content,
  #forgotPasswordModal .login-modal-visual-content,
  #registerModal .register-modal-visual-content{
    width:min(100%,170px);
    min-height:200px;
  }
  #twoFaModal .verification-modal-visual .login-modal-visual-content,
  #registerVerificationModal .verification-modal-visual .login-modal-visual-content{
    width:min(100%,150px);
    min-height:190px;
  }
  #loginModal .login-modal-visual-logo,
  #forgotPasswordModal .login-modal-visual-logo,
  #registerModal .register-modal-visual-logo{
    width:110px;
    height:110px;
  }
  #loginModal .login-modal-visual-title,
  #forgotPasswordModal .login-modal-visual-title,
  #registerModal .register-modal-visual-title{
    font-size:26px;
    margin:10px 0 4px;
  }
  #loginModal .login-modal-visual-subtitle,
  #forgotPasswordModal .login-modal-visual-subtitle,
  #registerModal .login-modal-visual-subtitle{
    font-size:10px;
  }
  #loginModal .login-modal-visual-kicker,
  #forgotPasswordModal .login-modal-visual-kicker,
  #registerModal .login-modal-visual-kicker{
    margin-top:10px;
    padding:6px 10px;
    font-size:8px;
  }
  #loginModal .login-modal-header-plain,
  #forgotPasswordModal .login-modal-header-plain,
  #registerModal .login-modal-header-plain,
  #twoFaModal .verification-modal-header-plain,
  #registerVerificationModal .verification-modal-header-plain{
    padding:16px 16px 10px;
  }
  #loginModal .login-modal-header-plain .login-modal-header-copy,
  #forgotPasswordModal .login-modal-header-plain .login-modal-header-copy,
  #registerModal .login-modal-header-plain .login-modal-header-copy,
  #twoFaModal .verification-modal-header-plain .login-modal-header-copy,
  #registerVerificationModal .verification-modal-header-plain .login-modal-header-copy{
    max-width:100%;
    padding:0;
  }
  #loginModal .login-modal-header-plain h2,
  #forgotPasswordModal .login-modal-header-plain h2,
  #registerModal .login-modal-header-plain h2,
  #twoFaModal .verification-modal-header-plain h2,
  #registerVerificationModal .verification-modal-header-plain h2{
    font-size:clamp(18px,5vw,30px);
    line-height:1.02;
    white-space:normal;
    text-wrap:balance;
  }
  #loginModal .login-modal-header-plain .login-modal-subtitle,
  #forgotPasswordModal .login-modal-header-plain .login-modal-subtitle,
  #registerModal .login-modal-header-plain .login-modal-subtitle,
  #twoFaModal .verification-modal-header-plain .login-modal-subtitle,
  #registerVerificationModal .verification-modal-header-plain .login-modal-subtitle{
    margin-top:6px;
    font-size:10px;
    line-height:1.2;
    max-width:24ch;
    text-align:center;
    text-wrap:balance;
  }
  #loginModal .login-modal-header-plain .login-modal-close,
  #forgotPasswordModal .login-modal-header-plain .login-modal-close,
  #registerModal .login-modal-header-plain .login-modal-close,
  #twoFaModal .verification-modal-header-plain .login-modal-close,
  #registerVerificationModal .verification-modal-header-plain .login-modal-close{
    top:6px;
    right:6px;
    width:28px;
    height:28px;
    font-size:22px;
  }
  #loginModal .login-modal-panel > .login-modal-body-plain,
  #forgotPasswordModal .forgot-modal-panel > .login-modal-body-plain,
  #registerModal .register-modal-panel > .register-modal-body,
  #twoFaModal .verification-modal-panel > .verification-modal-body,
  #registerVerificationModal .verification-modal-panel > .verification-modal-body{
    flex:1 1 auto;
    width:min(calc(100% - 24px),560px);
    min-height:0;
  }
  #loginModal .login-modal-body-plain,
  #forgotPasswordModal .login-modal-body-plain,
  #registerModal .register-modal-body,
  #twoFaModal .verification-modal-body,
  #registerVerificationModal .verification-modal-body{
    padding:10px 12px 14px;
  }
  #loginModal .login-modal-role-band,
  #forgotPasswordModal .login-modal-role-band,
  #registerModal .register-modal-role-band,
  #twoFaModal .verification-modal-role-band,
  #registerVerificationModal .verification-modal-role-band{
    margin-bottom:8px;
    padding-bottom:6px;
    font-size:9px;
    letter-spacing:.16em;
  }
  #loginModal .login-input-shell,
  #forgotPasswordModal .login-input-shell,
  #registerModal .register-input-wrap .login-input-shell{
    min-height:48px;
    padding:8px 12px;
    border-radius:12px;
  }
  #loginModal .login-input-wrap-modal input,
  #forgotPasswordModal .login-input-wrap-modal input,
  #registerModal .register-input-wrap input{
    min-height:18px;
    padding:8px 0 0;
    font-size:12px;
  }
  #registerModal .register-input-wrap:has(.login-password-toggle) input{padding-right:34px}
  #loginModal .login-floating-label,
  #forgotPasswordModal .login-floating-label,
  #registerModal .register-input-wrap .login-floating-label{
    left:46px;
    font-size:12px;
  }
  #registerModal .register-input-wrap:has(.login-password-toggle) .login-floating-label{right:22px}
  #loginModal .login-input-wrap-modal input:focus + .login-floating-label,
  #loginModal .login-input-wrap-modal input:not(:placeholder-shown) + .login-floating-label,
  #forgotPasswordModal .login-input-wrap-modal input:focus + .login-floating-label,
  #forgotPasswordModal .login-input-wrap-modal input:not(:placeholder-shown) + .login-floating-label,
  #registerModal .register-input-wrap input:focus + .login-floating-label,
  #registerModal .register-input-wrap input:not(:placeholder-shown) + .login-floating-label{
    top:7px;
    font-size:8px;
  }
  #loginModal .login-password-toggle,
  #forgotPasswordModal .login-password-toggle,
  #registerModal .register-form-modal .login-password-toggle{
    right:8px;
    width:28px;
    height:28px;
  }
  #loginModal .login-captcha-image,
  #forgotPasswordModal .login-captcha-image{
    width:150px;
    height:48px;
  }
  #loginModal .login-captcha-refresh,
  #forgotPasswordModal .login-captcha-refresh{
    width:30px;
    height:30px;
  }
  #loginModal .login-captcha-refresh img,
  #forgotPasswordModal .login-captcha-refresh img{
    width:14px;
    height:14px;
  }
  #loginModal .login-submit-btn-modal-split,
  #forgotPasswordModal .login-submit-btn-modal-split,
  #twoFaModal .verification-primary-btn,
  #registerVerificationModal .verification-primary-btn{
    min-height:42px;
    margin-top:6px;
    border-radius:12px;
    font-size:12px;
    letter-spacing:.1em;
  }
  #registerModal .register-form-modal{
    gap:6px;
  }
  #registerModal .register-login-row{
    margin-top:0;
    font-size:11px;
  }
  #registerModal .register-form-modal .password-validation-indicator{
    margin-top:0;
    padding-top:6px;
  }
  #registerModal .register-form-modal .password-strength-progress{
    height:4px;
    margin-bottom:6px;
  }
  #registerModal .register-form-modal .password-strength-alert{
    margin-bottom:6px;
    font-size:10px;
    gap:8px;
  }
  #registerModal .register-form-modal .password-validation-title{
    margin-bottom:6px;
    font-size:11px;
  }
  #registerModal .register-form-modal .password-validation-list{
    gap:4px;
  }
  #registerModal .register-form-modal .password-validation-item{
    gap:6px;
    font-size:10px;
  }
  #registerModal .register-form-modal .validation-icon{
    width:14px;
    height:14px;
    font-size:8px;
  }
  #registerModal .register-form-modal .validation-text{
    font-size:10px;
    line-height:1.2;
  }
  #registerModal .register-submit-btn-modal{
    min-height:38px;
    font-size:12px;
    border-radius:11px;
  }
  #twoFaModal .verification-otp-row,
  #registerVerificationModal .verification-otp-row{
    gap:6px;
  }
  #twoFaModal .verification-form input.verification-otp-digit,
  #registerVerificationModal .verification-form input.verification-otp-digit{
    flex:0 0 34px !important;
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    font-size:24px !important;
  }
  #twoFaModal .verification-title,
  #registerVerificationModal .verification-title{
    font-size:22px;
  }
  #twoFaModal .verification-description,
  #registerVerificationModal .verification-description{
    font-size:11px;
    line-height:1.35;
  }
}

@media(max-width:640px){
  .login-modal{padding:16px}
  .login-modal-dialog{width:100%;max-height:calc(100vh - 32px);overflow:hidden;border-radius:24px}
  .login-card-modal{border-radius:24px}
  #loginModal .login-card-modal-split{display:block}
  #loginModal .login-modal-visual{display:none}
  #loginModal .login-modal-panel{display:flex;width:100%}
  #loginModal .login-modal-header-plain{padding:18px 18px 12px}
  #loginModal .login-modal-header-plain{
    min-height:128px !important;
    padding:10px 40px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  #loginModal .login-modal-header-plain .login-modal-header-copy{
    width:100% !important;
    margin:0 auto !important;
    text-align:center !important;
  }
  #loginModal .login-modal-header-plain .login-modal-header-copy{max-width:100%;padding:0}
  #loginModal .login-modal-title-row{display:block}
  #loginModal .login-modal-header-plain h2{font-size:clamp(18px,7vw,30px);line-height:1.02;white-space:normal;text-wrap:balance}
  #loginModal .login-modal-header-plain .login-modal-subtitle{margin-top:6px;font-size:10px;line-height:1.25;max-width:22ch;text-align:center;text-wrap:balance}
  #loginModal .login-modal-header-plain .login-modal-subtitle .agency-line{white-space:nowrap}
  #loginModal .login-modal-header-plain .login-modal-close{top:8px;right:8px;width:28px;height:28px;font-size:22px}
  #loginModal .login-modal-panel > .login-modal-body-plain{width:min(calc(100% - 28px),640px)}
  #loginModal .login-modal-body-plain{padding:10px 16px 18px}
  #loginModal .login-modal-role-band{margin-bottom:10px;padding-bottom:8px;font-size:9px;letter-spacing:.18em}
  #loginModal .login-input-shell{min-height:52px;padding:10px 14px;border-radius:12px}
  #loginModal .login-input-wrap-modal input{min-height:20px;padding:10px 0 0;font-size:13px}
  #loginModal .login-floating-label{left:50px;font-size:13px}
  #loginModal .login-input-wrap-modal input:focus + .login-floating-label,
  #loginModal .login-input-wrap-modal input:not(:placeholder-shown) + .login-floating-label{top:8px;font-size:9px}
  #loginModal .login-password-toggle{right:10px;width:30px;height:30px}
  #loginModal .login-forgot-under-password{padding:4px 2px}
  #loginModal .login-forgot-link{font-size:12px}
  #loginModal .login-captcha-block{margin-bottom:6px}
  #loginModal .login-captcha-hint-row{margin-bottom:6px}
  #loginModal .login-captcha-hint{font-size:12px}
  #loginModal .login-captcha-row{gap:10px}
  #loginModal .login-captcha-image-wrap{gap:8px}
  #loginModal .login-captcha-image{width:160px;height:52px}
  #loginModal .login-captcha-refresh{width:32px;height:32px}
  #loginModal .login-captcha-refresh img{width:16px;height:16px}
  #loginModal .login-captcha-input-wrap .login-input-shell{min-height:54px}
  #loginModal .login-submit-btn-modal-split{min-height:48px;margin-top:8px;margin-bottom:0;border-radius:14px;font-size:14px;letter-spacing:.12em}
  #registerModal .register-modal-dialog{max-height:calc(100vh - 32px);overflow:hidden}
  #registerModal .register-card-modal.login-card-modal-split{display:block}
  #registerModal .register-modal-visual{display:none}
  #registerModal .register-modal-panel{display:flex;width:100%}
  #registerModal .login-modal-header-plain,
  #registerVerificationModal .login-modal-header-plain{padding:18px 18px 12px}
  #registerModal .login-modal-header-plain .login-modal-header-copy,
  #registerVerificationModal .login-modal-header-plain .login-modal-header-copy{max-width:100%;padding:0}
  #registerModal .login-modal-title-row,
  #registerVerificationModal .login-modal-title-row{display:block}
  #registerModal .login-modal-header-plain h2,
  #registerVerificationModal .login-modal-header-plain h2{font-size:clamp(18px,7vw,30px);line-height:1.02;white-space:normal;text-wrap:balance}
  #registerModal .login-modal-header-plain .login-modal-subtitle,
  #registerVerificationModal .login-modal-header-plain .login-modal-subtitle{margin-top:6px;font-size:10px;line-height:1.25;max-width:22ch;text-align:center;text-wrap:balance}
  #registerModal .login-modal-header-plain .login-modal-subtitle .agency-line,
  #registerVerificationModal .login-modal-header-plain .login-modal-subtitle .agency-line{white-space:nowrap}
  #registerModal .login-modal-header-plain .login-modal-close,
  #registerVerificationModal .login-modal-header-plain .login-modal-close{top:8px;right:8px;width:28px;height:28px;font-size:22px}
  #registerModal .register-modal-panel > .register-modal-body{width:min(calc(100% - 24px),640px)}
  #registerModal .register-modal-body{padding:6px 12px 10px}
  #registerModal .register-form-modal{gap:6px}
  #registerModal .register-input-wrap .login-input-shell{min-height:44px;padding:7px 12px;border-radius:11px}
  #registerModal .register-input-wrap input{min-height:16px;padding:8px 0 0;font-size:12px}
  #registerModal .register-input-wrap:has(.login-password-toggle) .login-input-shell{min-height:42px;padding:6px 10px}
  #registerModal .register-input-wrap:has(.login-password-toggle) input{padding-top:12px;font-size:11px}
  #registerModal .register-input-wrap:has(.login-password-toggle) input{padding-right:32px}
  #registerModal .register-input-wrap .login-floating-label{left:46px;font-size:12px}
  #registerModal .register-input-wrap:has(.login-password-toggle) .login-floating-label{top:50%;transform:translateY(-50%);font-size:12px}
  #registerModal .register-input-wrap:has(.login-password-toggle) .login-floating-label{right:20px}
  #registerModal .register-input-wrap input:focus + .login-floating-label,
  #registerModal .register-input-wrap input:not(:placeholder-shown) + .login-floating-label{top:7px;font-size:8px}
  #registerModal .register-form-modal .login-password-toggle{right:8px;width:18px;height:18px}
  #registerModal .register-form-modal .login-password-icon{width:12px;height:12px}
  #registerModal .register-form-modal .login-password-icon svg{width:12px;height:12px}
  #registerModal .register-login-row{margin-top:0;font-size:11px}
  #registerModal .register-form-modal .password-validation-indicator{margin-top:0;padding-top:6px}
  #registerModal .register-form-modal .password-strength-progress{height:4px;margin-bottom:6px}
  #registerModal .register-form-modal .password-strength-alert{margin-bottom:6px;font-size:10px;gap:8px}
  #registerModal .register-form-modal .password-strength-alert::before{width:8px;height:8px;flex-basis:8px}
  #registerModal .register-form-modal .password-validation-title{margin-bottom:6px;font-size:11px}
  #registerModal .register-form-modal .password-validation-list{gap:4px}
  #registerModal .register-form-modal .password-validation-item{gap:6px;font-size:10px}
  #registerModal .register-form-modal .validation-icon{width:14px;height:14px;font-size:8px}
  #registerModal .register-form-modal .validation-text{font-size:10px;line-height:1.2}
  #registerModal .register-submit-btn-modal{min-height:38px;margin-top:0;border-radius:11px;font-size:12px}
  .login-modal-header{padding:22px 22px 20px}
  .login-modal-header h2{font-size:36px}
  .login-modal-body{padding:22px 22px 24px}
  .login-modal-actions-row{justify-content:flex-start}
  .login-captcha-hint-row{justify-content:center}
  .login-captcha-row{flex-direction:column;align-items:stretch}
  .login-captcha-image-wrap{justify-content:center;flex-wrap:wrap}
  .login-captcha-input-wrap{min-width:0}
  .login-modal-agency-mark{gap:10px;margin-bottom:12px}
  .login-modal-agency-mark img{width:48px;height:48px}
  .login-modal-agency-copy strong{font-size:13px}
  .login-modal-subtitle{font-size:13px}
  .login-modal-meta{gap:8px 14px}
  .register-form-grid{grid-template-columns:1fr}
}

@media(max-width:420px){
  #registerModal .register-modal-body{padding:6px 10px 8px}
  #registerModal .login-modal-header-plain{padding:16px 16px 10px}
  #registerModal .login-modal-header-plain h2{font-size:clamp(17px,7.4vw,26px)}
  #registerModal .login-modal-header-plain .login-modal-subtitle{font-size:9px;max-width:20ch;text-align:center;text-wrap:balance}
  #registerModal .register-input-wrap .login-input-shell{min-height:42px;padding:6px 10px}
  #registerModal .register-input-wrap:has(.login-password-toggle) .login-input-shell{min-height:40px;padding:6px 9px}
  #registerModal .register-input-wrap:has(.login-password-toggle) input{padding-right:30px}
  #registerModal .register-input-wrap:has(.login-password-toggle) input{padding-top:11px;font-size:11px}
  #registerModal .register-input-wrap .login-floating-label{left:42px;font-size:11px}
  #registerModal .register-input-wrap:has(.login-password-toggle) .login-floating-label{top:50%;transform:translateY(-50%);font-size:11px}
  #registerModal .register-input-wrap:has(.login-password-toggle) .login-floating-label{right:18px}
  #registerModal .register-form-modal .validation-text{font-size:9px}
  #registerModal .register-submit-btn-modal{min-height:36px;font-size:11px}
}

@media (max-height:720px) and (max-width:980px){
  .login-modal{
    align-items:flex-start;
    padding:12px;
  }
  .login-modal-dialog,
  .register-modal-dialog,
  .verification-modal-dialog{
    max-height:calc(100dvh - 24px) !important;
    overflow:auto !important;
    scrollbar-width:auto;
    -ms-overflow-style:auto;
  }
  .login-modal-dialog::-webkit-scrollbar,
  .register-modal-dialog::-webkit-scrollbar,
  .verification-modal-dialog::-webkit-scrollbar{
    width:10px;
    height:10px;
  }
  #loginModal .login-modal-panel,
  #forgotPasswordModal .forgot-modal-panel,
  #registerModal .register-modal-panel,
  #twoFaModal .verification-modal-panel,
  #registerVerificationModal .verification-modal-panel{
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:0;
    max-height:calc(100dvh - 24px);
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:auto;
    -ms-overflow-style:auto;
  }
  #loginModal .login-modal-panel::-webkit-scrollbar,
  #forgotPasswordModal .forgot-modal-panel::-webkit-scrollbar,
  #registerModal .register-modal-panel::-webkit-scrollbar,
  #twoFaModal .verification-modal-panel::-webkit-scrollbar,
  #registerVerificationModal .verification-modal-panel::-webkit-scrollbar{
    width:10px;
    height:10px;
  }
  #loginModal .login-modal-panel > .login-modal-body-plain,
  #forgotPasswordModal .forgot-modal-panel > .login-modal-body-plain,
  #registerModal .register-modal-panel > .register-modal-body,
  #twoFaModal .verification-modal-panel > .verification-modal-body,
  #registerVerificationModal .verification-modal-panel > .verification-modal-body{
    flex:1 1 auto;
    min-height:0;
  }
}

@media(max-width:760px){
  .login-card-modal-split{grid-template-columns:1fr;min-height:auto}
  .login-card-modal-split::before{display:none}
  .login-modal-visual{min-height:280px;padding:32px 24px}
  .login-modal-visual::after{display:none}
  .login-modal-visual-logo{width:110px;height:110px}
  .login-modal-visual-title{font-size:54px}
  .login-modal-header-plain,
  .login-modal-body-plain{padding-left:28px;padding-right:28px}
  .verification-card-modal.login-card-modal-split{grid-template-columns:1fr}
  .verification-modal-panel > .verification-modal-body{width:min(calc(100% - 32px),560px)}
  .verification-modal-body{padding:18px 16px 24px}
  .verification-otp-row{gap:8px}
  .verification-otp-digit{width:38px;height:52px;font-size:30px}
  .verification-title{font-size:28px}
  .verification-form .verification-primary-btn{margin-top:8px}
  .register-form-modal{grid-template-columns:1fr}
  .register-form-modal .password-validation-list{grid-template-columns:1fr}

  #forgotPasswordModal .login-modal-visual-content{
    width:min(100%,320px);
  }

  #forgotPasswordModal .login-modal-visual-subtitle{
    font-size:11px;
    letter-spacing:.06em;
    white-space:nowrap;
  }
}

@media (min-width:521px) and (max-width:760px) and (hover:hover) and (pointer:fine){
  .login-card-modal-split,
  .register-card-modal.login-card-modal-split,
  .forgot-card-modal.login-card-modal-split{
    display:grid !important;
    grid-template-columns:minmax(300px,360px) minmax(0,1fr) !important;
    min-height:auto;
  }

  #loginModal .login-modal-visual,
  #forgotPasswordModal .login-modal-visual,
  #registerModal .register-modal-visual{
    display:flex !important;
    min-height:auto;
    padding:22px 24px;
  }

  #loginModal .login-modal-panel,
  #forgotPasswordModal .forgot-modal-panel,
  #registerModal .register-modal-panel{
    display:flex;
    width:auto;
  }

  #loginModal .login-modal-header-plain,
  #forgotPasswordModal .login-modal-header-plain,
  #registerModal .login-modal-header-plain{
    min-height:180px;
    padding:26px 42px 22px 20px;
  }

  #registerModal .register-modal-header-plain{
    min-height:186px;
  }

  #loginModal .login-modal-header-plain .login-modal-header-copy,
  #forgotPasswordModal .login-modal-header-plain .login-modal-header-copy,
  #registerModal .login-modal-header-plain .login-modal-header-copy{
    max-width:calc(100% - 36px);
    padding:0;
  }

  #loginModal .login-modal-header-plain h2,
  #forgotPasswordModal .login-modal-header-plain h2,
  #registerModal .login-modal-header-plain h2{
    font-size:clamp(34px,4vw,52px);
    line-height:1.04;
    white-space:normal;
    text-wrap:balance;
  }

  #registerModal .login-modal-header-plain h2{
    font-size:clamp(34px,4vw,50px);
  }

  #loginModal .login-modal-header-plain .login-modal-subtitle,
  #forgotPasswordModal .login-modal-header-plain .login-modal-subtitle,
  #registerModal .login-modal-header-plain .login-modal-subtitle{
    margin-top:12px;
    font-size:clamp(12px,1.2vw,15px);
    line-height:1.3;
    max-width:24ch;
    text-align:center;
    text-wrap:balance;
  }

  #loginModal .login-modal-header-plain .login-modal-close,
  #forgotPasswordModal .login-modal-header-plain .login-modal-close,
  #registerModal .login-modal-header-plain .login-modal-close{
    top:10px;
    right:4px;
    width:30px;
    height:30px;
    font-size:24px;
  }

  #loginModal .login-modal-body-plain,
  #forgotPasswordModal .login-modal-body-plain,
  #registerModal .register-modal-body{
    padding-left:32px;
    padding-right:32px;
  }

  #loginModal .login-modal-visual-logo,
  #forgotPasswordModal .login-modal-visual-logo{
    width:200px;
    height:200px;
  }

  #registerModal .register-modal-visual-logo{
    width:180px;
    height:180px;
  }

  #loginModal .login-modal-visual-title,
  #forgotPasswordModal .login-modal-visual-title{
    font-size:clamp(32px,3vw,40px);
    line-height:.96;
  }

  #registerModal .register-modal-visual-title{
    font-size:clamp(30px,2.8vw,38px);
    line-height:.96;
  }
}

@media (max-width:520px){
  .login-modal{
    align-items:flex-start;
    padding:8px;
  }

  .login-modal-dialog,
  .register-modal-dialog,
  .verification-modal-dialog{
    width:100%;
    max-height:calc(100dvh - 16px) !important;
    margin:0;
    border-radius:18px;
    background:#fff;
    overflow:hidden !important;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .login-modal-dialog::-webkit-scrollbar,
  .register-modal-dialog::-webkit-scrollbar,
  .verification-modal-dialog::-webkit-scrollbar{
    width:0;
    height:0;
  }

  .login-card-modal,
  .login-card-modal-split,
  .register-card-modal.login-card-modal-split,
  .forgot-card-modal.login-card-modal-split,
  .verification-card-modal.login-card-modal-split{
    display:block !important;
    width:100%;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    box-shadow:none;
  }

  #loginModal .login-modal-visual,
  #forgotPasswordModal .login-modal-visual,
  #registerModal .register-modal-visual,
  #twoFaModal .verification-modal-visual,
  #registerVerificationModal .verification-modal-visual{
    display:none !important;
  }

  #loginModal .login-modal-panel,
  #forgotPasswordModal .forgot-modal-panel,
  #registerModal .register-modal-panel,
  #twoFaModal .verification-modal-panel,
  #registerVerificationModal .verification-modal-panel{
    display:flex;
    flex-direction:column;
    width:100%;
    max-height:calc(100dvh - 16px);
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
    scrollbar-gutter:auto;
    background:transparent;
  }

  #loginModal .login-modal-panel::-webkit-scrollbar,
  #forgotPasswordModal .forgot-modal-panel::-webkit-scrollbar,
  #registerModal .register-modal-panel::-webkit-scrollbar,
  #twoFaModal .verification-modal-panel::-webkit-scrollbar,
  #registerVerificationModal .verification-modal-panel::-webkit-scrollbar{
    width:0;
    height:0;
  }

  #loginModal .login-modal-header-plain,
  #forgotPasswordModal .login-modal-header-plain,
  #registerModal .login-modal-header-plain,
  #twoFaModal .verification-modal-header-plain,
  #registerVerificationModal .verification-modal-header-plain{
    position:sticky;
    top:0;
    left:0;
    right:0;
    width:100%;
    box-sizing:border-box;
    z-index:6;
    min-height:unset;
    padding:14px 36px 12px 12px;
    margin:0;
    border-top-left-radius:18px;
    border-top-right-radius:18px;
    background:linear-gradient(135deg,#163f7a 0%,#2b5fa5 55%,#6f95c9 100%);
    overflow:visible;
  }

  #loginModal .login-modal-header-plain::after,
  #forgotPasswordModal .login-modal-header-plain::after,
  #registerModal .login-modal-header-plain::after,
  #twoFaModal .verification-modal-header-plain::after,
  #registerVerificationModal .verification-modal-header-plain::after{
    content:"";
    position:absolute;
    top:0;
    right:-18px;
    width:18px;
    height:100%;
    background:inherit;
  }

  #loginModal .login-modal-header-plain .login-modal-header-copy,
  #forgotPasswordModal .login-modal-header-plain .login-modal-header-copy,
  #registerModal .login-modal-header-plain .login-modal-header-copy,
  #twoFaModal .verification-modal-header-plain .login-modal-header-copy,
  #registerVerificationModal .verification-modal-header-plain .login-modal-header-copy{
    max-width:100%;
  }

  #loginModal .login-modal-title-row,
  #forgotPasswordModal .login-modal-title-row,
  #registerModal .login-modal-title-row,
  #twoFaModal .login-modal-title-row,
  #registerVerificationModal .login-modal-title-row{
    display:flex;
    justify-content:center;
  }

  #loginModal .login-modal-header-plain h2,
  #forgotPasswordModal .login-modal-header-plain h2,
  #registerModal .login-modal-header-plain h2,
  #twoFaModal .verification-modal-header-plain h2,
  #registerVerificationModal .verification-modal-header-plain h2{
    max-width:12ch;
    font-size:clamp(18px,7vw,28px);
    line-height:1.08;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }

  #loginModal .login-modal-header-plain .login-modal-subtitle,
  #forgotPasswordModal .login-modal-header-plain .login-modal-subtitle,
  #registerModal .login-modal-header-plain .login-modal-subtitle,
  #twoFaModal .verification-modal-header-plain .login-modal-subtitle,
  #registerVerificationModal .verification-modal-header-plain .login-modal-subtitle{
    margin-top:6px;
    max-width:none;
    font-size:clamp(10px,3.2vw,13px);
    line-height:1.25;
  }

  #loginModal .login-modal-header-plain .login-modal-close,
  #forgotPasswordModal .login-modal-header-plain .login-modal-close,
  #registerModal .login-modal-header-plain .login-modal-close,
  #twoFaModal .verification-modal-header-plain .login-modal-close,
  #registerVerificationModal .verification-modal-header-plain .login-modal-close{
    top:8px;
    right:0;
    width:28px;
    height:28px;
    font-size:22px;
  }

  #loginModal .login-modal-panel,
  #forgotPasswordModal .forgot-modal-panel,
  #registerModal .register-modal-panel,
  #twoFaModal .verification-modal-panel,
  #registerVerificationModal .verification-modal-panel{
    background:#ffffff;
  }

  #loginModal .login-modal-panel > .login-modal-body-plain,
  #forgotPasswordModal .forgot-modal-panel > .login-modal-body-plain,
  #registerModal .register-modal-panel > .register-modal-body,
  #twoFaModal .verification-modal-panel > .verification-modal-body,
  #registerVerificationModal .verification-modal-panel > .verification-modal-body{
    width:min(calc(100% - 20px),640px);
    background:#fff;
  }

  #loginModal .login-modal-body-plain,
  #forgotPasswordModal .login-modal-body-plain,
  #registerModal .register-modal-body,
  #twoFaModal .verification-modal-body,
  #registerVerificationModal .verification-modal-body{
    padding:10px 10px 14px;
  }
}

@media(max-width:1180px){
  .hris-actions-grid{gap:20px}
  .hris-action-card{padding:26px 24px 22px}
  .hris-action-card h3{font-size:26px}
  .hris-action-card p{font-size:16px;line-height:1.7}
}

@media(max-width:760px){
  .hris-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:640px){
  .hris-actions{padding:0 18px 20px}
  .hris-actions-grid{grid-template-columns:1fr;gap:18px}
  .section-heading-compact h2{font-size:32px}
  .hris-action-card{min-height:auto;padding:28px 24px}
  .hris-action-card h3{font-size:26px}
}

/* Privacy notice: formal document style */
.privacy-notice-section{padding:38px 0 44px;background:#fff}
.privacy-notice-wrap{width:100%;max-width:none;margin:0 auto;padding:8px 0 0;background:transparent;border:0;box-shadow:none}
.privacy-notice-wrap h2{margin:0 0 24px;font-family:'Oswald',sans-serif;font-size:34px;line-height:1.05;letter-spacing:0.7px;text-transform:uppercase;text-align:center;color:#1f3f78}
.privacy-accordion{display:grid;gap:18px}
.privacy-block{margin:0;padding:0;border:1px solid #dbe5f5;border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(25,57,106,0.06);overflow:hidden}
.privacy-summary{position:relative;display:block;list-style:none;cursor:pointer;margin:0;padding:18px 64px 18px 18px;color:#2458b5;font-size:18px;line-height:1.25;font-family:Arial,Helvetica,sans-serif;font-weight:700}
.privacy-summary::-webkit-details-marker{display:none}
.privacy-summary:focus{outline:none}
.privacy-summary:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(43,95,165,0.18)}
.privacy-summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;border:1px solid #cfe0fb;background:#edf4ff;color:#2458b5;font-size:24px;line-height:1;box-shadow:0 2px 6px rgba(43,95,165,0.08)}
.privacy-block[open] .privacy-summary{border-bottom:1px solid #dbe5f5}
.privacy-block[open] .privacy-summary::after{content:"-"}
.privacy-content{padding:20px}
.privacy-content p{margin:0 0 18px;color:#24364f;font-size:16px;line-height:1.7;text-align:left}
.privacy-content p:last-child{margin-bottom:0}

@media(max-width:900px){
  .privacy-notice-wrap h2{font-size:30px}
  .privacy-summary{font-size:19px;padding:18px 64px 18px 18px}
  .privacy-content{padding:18px}
}

@media(max-width:640px){
  .privacy-notice-section{padding:24px 0 30px}
  .privacy-notice-wrap h2{margin-bottom:20px;font-size:24px;letter-spacing:0.4px}
  .privacy-accordion{gap:14px}
  .privacy-summary{padding:16px 58px 16px 16px;font-size:17px}
  .privacy-summary::after{right:14px;width:28px;height:28px;font-size:21px}
  .privacy-content{padding:16px}
  .privacy-content p{margin-bottom:14px;font-size:15px;line-height:1.65}
}

.transparency-page{position:relative;padding:40px 28px 18px;background:
  radial-gradient(circle at top right,rgba(43,95,165,0.10),transparent 26%),
  linear-gradient(180deg,#f8fbff 0%,#ffffff 72%)}
.transparency-page-inner{max-width:1320px}
.transparency-hero-card{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);align-items:center;gap:36px;padding:34px 38px;border:1px solid rgba(43,95,165,0.10);border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,0.96),rgba(247,250,255,0.92));box-shadow:0 20px 44px rgba(26,44,78,0.08)}
.transparency-seal-mark{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto}
.transparency-seal-mark img{width:min(220px,42vw);height:auto;display:block}
.transparency-seal-label{margin-top:14px;font-size:24px;font-weight:600;color:#173761;letter-spacing:0.01em}
.transparency-copy{max-width:100%;color:#111}
.transparency-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;color:#2759a2;font-size:12px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase}
.transparency-kicker::before{content:"";width:42px;height:2px;background:linear-gradient(90deg,#2759a2,rgba(39,89,162,0.18))}
.transparency-copy h2{margin:0 0 14px;font-family:'Oswald',sans-serif;font-size:44px;line-height:0.95;font-weight:700;color:#142f57;text-transform:uppercase}
.transparency-copy p{margin:0 0 18px;font-size:18px;line-height:1.7;color:#24364f}
.transparency-section{padding:10px 28px 24px}
.transparency-section-list{padding:8px 28px 18px}
.transparency-inline-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:1260px}
.transparency-inline-link{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 16px;border:1px solid rgba(58,77,121,0.10);border-radius:20px;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 10px 22px rgba(21,39,74,0.05);color:#284fc7;text-decoration:none;font-size:15px;line-height:1.35;text-transform:uppercase;transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease}
.transparency-inline-link:hover{transform:translateY(-2px);border-color:rgba(40,79,199,0.22);box-shadow:0 16px 30px rgba(21,39,74,0.10);text-decoration:none}
.transparency-inline-plus{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;border-radius:999px;background:#eef3ff;color:#173761;font-weight:800;font-size:20px;line-height:1}
.transparency-inline-text{display:block}
.transparency-design-panel-wrap{padding:8px 28px 48px}
.transparency-design-panel{position:relative;padding:34px 34px 18px;border-radius:28px;background:
  radial-gradient(circle at top left,rgba(213,155,38,0.10),transparent 20%),
  linear-gradient(180deg,#fbf7ee,#fffdfa);box-shadow:inset 0 1px 0 rgba(255,255,255,0.85),0 18px 36px rgba(58,45,16,0.06)}
.transparency-note-wrap{padding-top:0;padding-bottom:44px}
.transparency-note{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.transparency-note-plain{padding:22px 24px;border:1px solid rgba(104,89,39,0.10);border-radius:20px;background:rgba(255,255,255,0.74);backdrop-filter:blur(6px)}
.transparency-note-plain h3{margin:0 0 10px;font-size:22px;color:#173761}
.transparency-note-plain p{margin:0;color:#314154;font-size:17px;line-height:1.8}
.transparency-section-panel{padding-left:0;padding-right:0}

/* Public content pages */
.public-page{padding:34px 18px 42px;background:linear-gradient(180deg,var(--public-bg-start,#f7fbff) 0%,var(--public-bg-end,#ffffff) 68%)}
.public-wrap{max-width:1360px;margin:0 auto}
.public-hero{padding:24px 24px 18px;border:1px solid var(--public-border,rgba(43,95,165,0.10));border-radius:20px;background:linear-gradient(145deg,var(--public-hero-start,#ffffff),var(--public-hero-end,#f4f9ff));box-shadow:0 14px 28px var(--public-shadow,rgba(25,40,75,0.08))}
.public-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--public-accent,#2458b5);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.public-kicker::before{content:"";width:34px;height:2px;background:linear-gradient(90deg,var(--public-accent,#2458b5),color-mix(in srgb, var(--public-accent,#2458b5) 20%, transparent))}
.public-title{margin:0 0 8px;font-family:'Oswald',sans-serif;font-size:36px;line-height:1.02;color:var(--public-title,#153764)}
.public-summary{margin:0;color:#2a415f;font-size:16px;line-height:1.7}
.public-hero,
.pub-layout,
.public-grid,
.pub-kpi-grid,
.pub-vacancy-grid,
.pub-link-grid,
.contact-form-grid,
.contact-gov-grid,
.contact-gov-grid-main,
.contact-gov-bottom-grid{min-width:0}
.public-title,
.public-summary,
.public-card p,
.pub-panel p,
.pub-alert,
.public-note,
.pub-kpi span,
.public-list li,
.pub-timeline li,
.pub-step,
.contact-channel-list li,
.contact-gov-note{overflow-wrap:anywhere}
.public-page img,
.pub-panel img,
.public-card img{max-width:100%;height:auto}
.public-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.public-card{padding:16px;border:1px solid var(--public-card-border,rgba(43,95,165,0.12));border-radius:14px;background:#fff;box-shadow:0 8px 18px rgba(22,45,84,0.05)}
.public-card h3{margin:0 0 8px;font-size:17px;color:var(--public-card-title,#18437f)}
.public-card p{margin:0;color:#3a4f69;font-size:14px;line-height:1.65}
.public-list{margin:0;padding-left:18px;color:#334b67;line-height:1.7}
.public-list li{margin:0 0 6px}
.public-chip-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.public-chip-list li{padding:7px 11px;border-radius:999px;border:1px solid var(--public-chip-border,rgba(43,95,165,0.18));background:var(--public-chip-bg,#f4f8ff);color:var(--public-chip-text,#244a84);font-size:12px;font-weight:700}
.public-note{margin-top:16px;padding:12px 14px;border-left:4px solid var(--public-note-accent,#f0a128);border-radius:10px;background:linear-gradient(180deg,var(--public-note-start,#fffaf1),var(--public-note-end,#fff5e3));color:var(--public-note-text,#5c4a1f);font-size:13px;line-height:1.6}
.public-table-wrap{margin-top:14px;overflow:auto;border:1px solid rgba(43,95,165,0.14);border-radius:12px;background:#fff}
.public-table{width:100%;border-collapse:collapse;min-width:620px}
.public-table th,.public-table td{padding:10px 12px;border-bottom:1px solid rgba(43,95,165,0.10);text-align:left;font-size:13px;color:#2d415b;vertical-align:top}
.public-table th{background:var(--public-table-head,#f2f7ff);color:var(--public-card-title,#18437f);font-weight:700}
.public-timeline{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.public-timeline li{position:relative;padding:10px 12px 10px 34px;border:1px solid rgba(43,95,165,0.10);border-radius:10px;background:#fff}
.public-timeline li::before{content:"";position:absolute;left:12px;top:15px;width:10px;height:10px;border-radius:999px;background:var(--public-accent,#2b5fa5)}

/* Per-page visual themes (LTO-related palette: blue, navy, gold, neutral) */
body.public-page-news-and-updates{--public-accent:#2b5fa5;--public-title:#173761;--public-bg-start:#f4f8ff;--public-hero-end:#edf3ff}
body.public-page-careers{--public-accent:#b27a12;--public-title:#6a4a0d;--public-bg-start:#fff9ee;--public-hero-end:#fff2dc;--public-note-accent:#d49a18}
body.public-page-lto-accredited{--public-accent:#2458b5;--public-title:#153764;--public-bg-start:#f3f8ff;--public-hero-end:#eaf2ff}
body.public-page-otdc-it-provider{--public-accent:#2b5fa5;--public-title:#173761;--public-bg-start:#f3f8ff;--public-hero-end:#eaf2ff}
body.public-page-medical-clinics{--public-accent:#3769b0;--public-title:#1e467c;--public-bg-start:#f4f8ff;--public-hero-end:#edf3ff}
body.public-page-medical-it-providers{--public-accent:#2f639f;--public-title:#1c4873;--public-bg-start:#f3f8ff;--public-hero-end:#ebf3ff}
body.public-page-lecturers{--public-accent:#4a72b8;--public-title:#2b4f8c;--public-bg-start:#f4f8ff;--public-hero-end:#edf2ff}
body.public-page-driving-schools{--public-accent:#b27a12;--public-title:#6a4a0d;--public-bg-start:#fff8ee;--public-hero-end:#fff1dc}
body.public-page-driving-school-instructors{--public-accent:#9f7322;--public-title:#60471a;--public-bg-start:#fff8f1;--public-hero-end:#fff1e3}
body.public-page-drivers-education-center{--public-accent:#8f6a24;--public-title:#59441b;--public-bg-start:#fff8f0;--public-hero-end:#fff1e2}
body.public-page-affiliates{--public-accent:#2b5fa5;--public-title:#173761;--public-bg-start:#f3f8ff;--public-hero-end:#eaf2ff}
body.public-page-ltms-portal{--public-accent:#2f66b2;--public-title:#1f4a84;--public-bg-start:#f3f7ff;--public-hero-end:#eaf1ff}
body.public-page-cde-program{--public-accent:#3a6db0;--public-title:#224a7c;--public-bg-start:#f4f8ff;--public-hero-end:#edf3ff}
body.public-page-cde-online-exam{--public-accent:#2d62a7;--public-title:#1d4578;--public-bg-start:#f3f8ff;--public-hero-end:#ebf2ff}
body.public-page-citisend{--public-accent:#496fa8;--public-title:#2a4d7f;--public-bg-start:#f4f8ff;--public-hero-end:#edf2ff}
body.public-page-resources{--public-accent:#2458b5;--public-title:#153764;--public-bg-start:#f3f8ff;--public-hero-end:#eaf2ff}
body.public-page-downloadable-forms{--public-accent:#b27a12;--public-title:#6a4a0d;--public-bg-start:#fff9ee;--public-hero-end:#fff2dd}
body.public-page-hrds-forms{--public-accent:#9b6f1e;--public-title:#5f4718;--public-bg-start:#fff8f0;--public-hero-end:#fff1e4}
body.public-page-mission-and-vision{--public-accent:#2b5fa5;--public-title:#173761;--public-bg-start:#f4f8ff;--public-hero-end:#edf3ff}
body.public-page-mandate-and-functions{--public-accent:#2f639f;--public-title:#1d4870;--public-bg-start:#f3f8ff;--public-hero-end:#ebf3ff}
body.public-page-historical-background{--public-accent:#8f6a24;--public-title:#59441b;--public-bg-start:#fff8f0;--public-hero-end:#fff1e2}
body.public-page-road-safety-action-plan{--public-accent:#b27a12;--public-title:#6a4a0d;--public-bg-start:#fff9ef;--public-hero-end:#fff3df}
body.public-page-lto-pila-office{--public-accent:#2b5fa5;--public-title:#173761;--public-bg-start:#f4f8ff;--public-hero-end:#edf3ff}
body.public-page-data-privacy-notice{
  --public-accent:#2f5f8a;--public-title:#214764;--public-bg-start:#f2f6fb;--public-hero-end:#e9f0f8;
  --policy-hero-bg:#eef3f9;--policy-panel-bg:#f8fbff;--policy-panel-emphasis:#ecf3fb;--policy-pill-bg:#eaf1fa
}
body.public-page-terms-of-use{
  --public-accent:#2b5fa5;--public-title:#173761;--public-bg-start:#f2f6fb;--public-hero-end:#e9f0f8;
  --policy-hero-bg:#eef3f9;--policy-panel-bg:#f8fbff;--policy-panel-emphasis:#ecf3fb;--policy-pill-bg:#eaf1fa
}
body.public-page-security{
  --public-accent:#2458b5;--public-title:#153764;--public-bg-start:#f1f5fb;--public-hero-end:#e7eef9;
  --policy-hero-bg:#edf2fa;--policy-panel-bg:#f7faff;--policy-panel-emphasis:#eaf1fd;--policy-pill-bg:#e8f0fc
}
body.public-page-records-retention{
  --public-accent:#2b5fa5;--public-title:#173761;--public-bg-start:#f2f6fb;--public-hero-end:#e9f0f8;
  --policy-hero-bg:#eef3f9;--policy-panel-bg:#f8fbff;--policy-panel-emphasis:#ecf3fb;--policy-pill-bg:#eaf1fa
}
body.public-page-citizens-charter{
  --public-accent:#2b5fa5;--public-title:#173761;--public-bg-start:#f2f6fb;--public-hero-end:#e9f0f8;
  --policy-hero-bg:#eef3f9;--policy-panel-bg:#f8fbff;--policy-panel-emphasis:#ecf3fb;--policy-pill-bg:#eaf1fa
}

/* Lifelike public components */
.pub-layout{display:grid;gap:14px;margin-top:16px}
.pub-panel{padding:14px;border:1px solid var(--public-card-border,rgba(43,95,165,0.12));border-radius:14px;background:#fff;box-shadow:0 8px 18px rgba(22,45,84,0.05)}
.pub-panel h3{margin:0 0 8px;font-size:17px;color:var(--public-card-title,#18437f)}
.pub-panel p{margin:0;color:#334b67;font-size:14px;line-height:1.65}
.pub-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pub-kpi{padding:12px;border-radius:12px;background:linear-gradient(145deg,#f8fbff,#eef4ff);border:1px solid rgba(43,95,165,0.14)}
.pub-kpi strong{display:block;font-size:20px;color:#173761}
.pub-kpi span{display:block;margin-top:4px;font-size:12px;color:#4e6281}
.pub-timeline{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.pub-timeline li{position:relative;padding:10px 12px 10px 34px;border:1px solid rgba(43,95,165,0.10);border-radius:10px;background:#fff}
.pub-timeline li::before{content:"";position:absolute;left:12px;top:15px;width:10px;height:10px;border-radius:999px;background:var(--public-accent,#2b5fa5)}
.pub-vacancy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pub-vacancy{padding:14px;border:1px solid rgba(43,95,165,0.14);border-radius:12px;background:#fff}
.pub-vacancy h4{margin:0 0 6px;font-size:16px;color:#163f7a}
.pub-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pub-meta li{font-size:12px;padding:5px 9px;border-radius:999px;background:#eef3ff;color:#2d4f88;border:1px solid rgba(43,95,165,0.14)}
.pub-process{display:grid;gap:10px;counter-reset:step}
.pub-step{position:relative;padding:10px 12px 10px 42px;border:1px solid rgba(43,95,165,0.12);border-radius:10px;background:#fff}
.pub-step::before{counter-increment:step;content:counter(step);position:absolute;left:12px;top:10px;width:22px;height:22px;border-radius:999px;background:var(--public-accent,#2b5fa5);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pub-link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pub-link-card{padding:12px;border:1px solid rgba(43,95,165,0.13);border-radius:12px;background:#fff;text-decoration:none;color:#244a84}
.pub-link-card:hover{background:#f5f9ff}
.pub-provider-table{width:100%;border-collapse:collapse}
.pub-provider-table th,.pub-provider-table td{padding:10px;border-bottom:1px solid rgba(43,95,165,0.10);text-align:left;font-size:13px;color:#334b67}
.pub-provider-table th{background:#f2f7ff;color:#18437f}
.pub-alert{margin-top:12px;padding:11px 12px;border-left:4px solid var(--public-note-accent,#f0a128);background:#fff6e9;border-radius:8px;color:#604b1f;font-size:13px}

@media(max-width:900px){
  .public-page{padding:28px 16px 34px}
  .public-hero{padding:20px 18px 16px;border-radius:18px}
  .public-title{font-size:clamp(28px,5vw,34px)}
  .public-summary{font-size:15px;line-height:1.65}
  .public-grid{grid-template-columns:1fr 1fr}
  .public-card,
  .pub-panel{padding:14px}
  .pub-kpi-grid,
  .pub-vacancy-grid,
  .pub-link-grid,
  .contact-form-grid{grid-template-columns:1fr}
  .public-table-wrap{margin-inline:-2px;border-radius:10px}
}

@media(max-width:640px){
  .public-page{padding:22px 14px 28px}
  .public-wrap{width:100%}
  .public-hero{padding:16px 14px 14px;border-radius:16px}
  .public-kicker{font-size:10px;letter-spacing:.12em}
  .public-kicker::before{width:24px}
  .public-title{font-size:clamp(24px,8vw,30px);line-height:1}
  .public-summary{font-size:14px;line-height:1.58}
  .public-grid,
  .pub-layout,
  .pub-kpi-grid,
  .pub-vacancy-grid,
  .pub-link-grid{gap:10px}
  .public-card,
  .pub-panel,
  .pub-kpi,
  .pub-vacancy,
  .pub-step,
  .pub-timeline li{padding:12px}
  .public-list,
  .contact-channel-list{padding-left:16px}
  .public-table{min-width:560px}
  .public-table th,.public-table td,
  .pub-provider-table th,.pub-provider-table td{padding:9px 10px;font-size:12px}
  .pub-panel h3,
  .public-card h3{font-size:16px}
  .pub-panel p,
  .public-card p,
  .pub-alert,
  .public-note{font-size:13px;line-height:1.58}
}

/* Page-specific layout differences */
body.public-page-news-and-updates .pub-layout{grid-template-columns:1.2fr .8fr}
body.public-page-careers .pub-layout{grid-template-columns:1fr}
body.public-page-lto-accredited .pub-layout{grid-template-columns:1fr}
body.public-page-otdc-it-provider .pub-layout,
body.public-page-medical-clinics .pub-layout,
body.public-page-medical-it-providers .pub-layout,
body.public-page-lecturers .pub-layout,
body.public-page-driving-schools .pub-layout,
body.public-page-driving-school-instructors .pub-layout,
body.public-page-drivers-education-center .pub-layout{grid-template-columns:1fr}
body.public-page-affiliates .pub-layout,
body.public-page-ltms-portal .pub-layout,
body.public-page-cde-program .pub-layout,
body.public-page-cde-online-exam .pub-layout,
body.public-page-citisend .pub-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
body.public-page-resources .pub-layout,
body.public-page-downloadable-forms .pub-layout,
body.public-page-hrds-forms .pub-layout{grid-template-columns:1fr}
body.public-page-mission-and-vision .pub-layout{grid-template-columns:1fr 1fr}
body.public-page-mandate-and-functions .pub-layout{grid-template-columns:1fr}
body.public-page-historical-background .pub-layout{grid-template-columns:1fr}
body.public-page-road-safety-action-plan .pub-layout{grid-template-columns:1fr}
body.public-page-lto-pila-office .pub-layout{grid-template-columns:1fr 1fr}
body.public-page-data-privacy-notice .pub-layout{grid-template-columns:1fr}
body.public-page-contact-us .pub-layout{grid-template-columns:1.2fr .8fr}

@media(max-width:980px){
  .pub-kpi-grid,.pub-vacancy-grid,.pub-link-grid,.contact-form-grid{grid-template-columns:1fr}
  .pub-layout{grid-template-columns:1fr !important}
  body.public-page-mission-and-vision .pub-panel{min-height:auto}
  body.public-page-mission-and-vision .pub-panel h3{font-size:24px}
  body.public-page-mission-and-vision .pub-panel p{font-size:16px;text-align:justify;text-justify:inter-word;hyphens:auto}
}

/* Per-page card look differences */
body.public-page-news-and-updates .pub-panel{border-radius:18px}
body.public-page-careers .pub-vacancy{border-left:4px solid #6a4f11;background:linear-gradient(180deg,#fffdf7,#fff8ea)}
body.public-page-lto-accredited .pub-panel{background:linear-gradient(180deg,#ffffff,#f3fbf7)}
body.public-page-otdc-it-provider .pub-provider-table th{background:#eaf4fb}
body.public-page-medical-clinics .pub-provider-table th{background:#e9f8f4}
body.public-page-medical-it-providers .pub-provider-table th{background:#eaf7fb}
body.public-page-lecturers .pub-panel{border-style:dashed}
body.public-page-driving-schools .pub-panel{border-left:4px solid #8b5f1c}
body.public-page-driving-school-instructors .pub-panel{box-shadow:0 10px 18px rgba(123,79,46,0.10)}
body.public-page-drivers-education-center .pub-panel{background:linear-gradient(180deg,#ffffff,#f6fbeF)}
body.public-page-affiliates .pub-link-card{border-radius:16px}
body.public-page-ltms-portal .pub-step{background:#f4f7ff}
body.public-page-cde-program .pub-step{background:#f2fbf5}
body.public-page-cde-online-exam .pub-step{background:#f1f9fd}
body.public-page-citisend .pub-step{background:#f6f3ff}
body.public-page-resources .pub-link-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
body.public-page-downloadable-forms .pub-provider-table td:first-child{font-weight:700}
body.public-page-hrds-forms .pub-step::before{background:#5e4f9e}
body.public-page-mission-and-vision .public-hero{
  border:1px solid rgba(43,95,165,.16);
  border-top:0;
  border-radius:16px;
  background:linear-gradient(180deg,#f9fbff 0%,#f2f7ff 100%);
  box-shadow:0 14px 30px rgba(22,49,90,.09);
}
body.public-page-mission-and-vision .pub-layout{
  gap:16px;
}
body.public-page-mission-and-vision .vm-brief-layout{
  align-items:stretch;
}
body.public-page-mission-and-vision .pub-panel{
  min-height:230px;
  position:relative;
  padding:18px 20px 18px;
  border:1px solid rgba(43,95,165,.16);
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);
  box-shadow:0 10px 22px rgba(23,54,99,.08);
}
body.public-page-mission-and-vision .pub-panel::before{
  content:none;
}
body.public-page-mission-and-vision .pub-panel h3{
  margin:0 0 10px;
  color:#173761;
  font-size:32px;
  letter-spacing:.35px;
  line-height:1.05;
}
body.public-page-mission-and-vision .pub-panel p{
  color:#3f5a7f;
  font-size:18px;
  line-height:1.74;
}
body.public-page-mission-and-vision .vm-brief-label{
  margin:0 0 8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#4f6f99;
}
body.public-page-mission-and-vision .vm-card-vision{
  border-left:3px solid #2b5fa5;
}
body.public-page-mission-and-vision .vm-card-mission{
  border-left:3px solid #3b6fb3;
}
body.public-page-mission-and-vision .vm-card-vision::after,
body.public-page-mission-and-vision .vm-card-mission::after{
  content:"";
  position:absolute;
  right:-28px;
  bottom:-34px;
  width:136px;
  height:136px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(43,95,165,.11),rgba(43,95,165,0) 72%);
  pointer-events:none;
}
body.public-page-mandate-and-functions .pub-kpi{background:linear-gradient(145deg,#fbfff1,#f1f7de)}
body.public-page-historical-background .pub-timeline li{border-left:4px solid #785029}
body.public-page-road-safety-action-plan .pub-step::before{background:#8b2f2f}
body.public-page-lto-pila-office .pub-panel{background:linear-gradient(180deg,#ffffff,#eef4ff)}
body.public-page-data-privacy-notice .pub-kpi{background:linear-gradient(145deg,#f4fbfc,#e7f3f6)}
body.public-page-citizens-charter .gov-policy-reference{background:#f7fbff}
body.public-page-citizens-charter .gov-policy-sections{background:#fcfdff}
body.public-page-citizens-charter .public-table-wrap{margin-top:10px;border-color:rgba(31,72,120,.2);border-radius:0}
body.public-page-citizens-charter .public-table th{background:#edf3fc;color:#173761}
body.public-page-citizens-charter .public-table td{font-size:14px;line-height:1.6}
body.public-page-citizens-charter .policy-list li{margin-bottom:10px}
body.public-page-contact-us .pub-panel{border-radius:16px}
body.public-page-contact-us .contact-secondary{background:linear-gradient(180deg,#ffffff,#f5f9ff)}
body.public-page-contact-us .contact-tertiary{background:linear-gradient(180deg,#ffffff,#f8fbff)}

/* About Us dropdown pages - professional government redesign */
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .public-page{
  background:linear-gradient(180deg,#edf3fb 0%,#f7faff 36%,#ffffff 100%);
  padding-top:30px;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .public-hero{
  border:1px solid rgba(23,55,97,0.18);
  border-top:4px solid #2b5fa5;
  border-radius:10px;
  background:linear-gradient(180deg,#f8fbff 0%,#ffffff 70%);
  box-shadow:0 10px 24px rgba(13,35,69,0.08);
  padding:22px 22px 18px;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .public-title{
  font-size:38px;
  letter-spacing:.2px;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-layout{
  margin-top:18px;
  gap:12px;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-panel{
  border:1px solid rgba(27,67,118,0.18);
  border-radius:8px;
  box-shadow:none;
  background:#fff;
  padding:14px;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-panel h3{
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(23,55,97,0.16);
  font-size:20px;
  color:#173761;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-vacancy,
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-link-card,
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-step,
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-timeline li{
  border:1px solid rgba(27,67,118,0.16);
  border-radius:8px;
  background:#fcfeff;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-provider-table th,
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .public-table th{
  background:#eaf2fc;
  color:#173761;
  border-bottom:1px solid rgba(23,55,97,0.18);
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-alert{
  border-left:3px solid #2b5fa5;
  border-radius:6px;
  background:#f4f8ff;
  color:#1f3f67;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-meta li{
  background:#f1f6ff;
  color:#1f457f;
  border:1px solid rgba(31,69,127,0.16);
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-step::before{
  background:#2b5fa5;
}

@media(max-width:980px){
  body:is(
    .public-page-news-and-updates,
    .public-page-careers,
    .public-page-lto-accredited,
    .public-page-otdc-it-provider,
    .public-page-medical-clinics,
    .public-page-medical-it-providers,
    .public-page-lecturers,
    .public-page-driving-schools,
    .public-page-driving-school-instructors,
    .public-page-drivers-education-center,
    .public-page-affiliates,
    .public-page-ltms-portal,
    .public-page-cde-program,
    .public-page-cde-online-exam,
    .public-page-citisend,
    .public-page-resources,
    .public-page-downloadable-forms,
    .public-page-hrds-forms,
    .public-page-mission-and-vision,
    .public-page-mandate-and-functions,
    .public-page-historical-background,
    .public-page-road-safety-action-plan,
    .public-page-lto-pila-office
  ) .public-title{font-size:31px}
  body:is(
    .public-page-news-and-updates,
    .public-page-careers,
    .public-page-lto-accredited,
    .public-page-otdc-it-provider,
    .public-page-medical-clinics,
    .public-page-medical-it-providers,
    .public-page-lecturers,
    .public-page-driving-schools,
    .public-page-driving-school-instructors,
    .public-page-drivers-education-center,
    .public-page-affiliates,
    .public-page-ltms-portal,
    .public-page-cde-program,
    .public-page-cde-online-exam,
    .public-page-citisend,
    .public-page-resources,
    .public-page-downloadable-forms,
    .public-page-hrds-forms,
    .public-page-mission-and-vision,
    .public-page-mandate-and-functions,
    .public-page-historical-background,
    .public-page-road-safety-action-plan,
    .public-page-lto-pila-office
  ) .public-hero{padding:18px 16px}
}

/* About Us final override: policy-like document presentation */
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
){
  --public-accent:#2b5fa5;
  --public-title:#173761;
  --public-bg-start:#f2f6fb;
  --public-hero-end:#eef3fb;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .public-kicker{
  font-size:12px;
  letter-spacing:.14em;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .public-summary{
  font-size:16px;
  max-width:76ch;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-link-grid{
  grid-template-columns:1fr;
  gap:0;
  border:1px solid rgba(23,55,97,0.16);
  border-radius:6px;
  overflow:hidden;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-link-card{
  padding:12px 14px;
  border:0;
  border-bottom:1px solid rgba(23,55,97,0.12);
  border-radius:0;
  background:#fff;
  color:#173761;
  font-weight:600;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-link-card:last-child{
  border-bottom:0;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-vacancy-grid{
  grid-template-columns:1fr;
  gap:0;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-vacancy{
  border:0;
  border-bottom:1px solid rgba(23,55,97,0.14);
  border-radius:0;
  background:#fff;
  padding:12px 2px;
}
body:is(
  .public-page-news-and-updates,
  .public-page-careers,
  .public-page-lto-accredited,
  .public-page-otdc-it-provider,
  .public-page-medical-clinics,
  .public-page-medical-it-providers,
  .public-page-lecturers,
  .public-page-driving-schools,
  .public-page-driving-school-instructors,
  .public-page-drivers-education-center,
  .public-page-affiliates,
  .public-page-ltms-portal,
  .public-page-cde-program,
  .public-page-cde-online-exam,
  .public-page-citisend,
  .public-page-resources,
  .public-page-downloadable-forms,
  .public-page-hrds-forms,
  .public-page-mission-and-vision,
  .public-page-mandate-and-functions,
  .public-page-historical-background,
  .public-page-road-safety-action-plan,
  .public-page-lto-pila-office
) .pub-vacancy:last-child{
  border-bottom:0;
}

.contact-layout{gap:14px}
.contact-list{display:grid;gap:10px}
.contact-item{display:grid;gap:4px;padding:10px 12px;border:1px solid rgba(43,95,165,0.12);border-radius:10px;background:#fff}
.contact-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5e718f}
.contact-value{font-size:14px;color:#263f61}
.contact-value a{color:#1e4f93;text-decoration:none}
.contact-value a:hover{text-decoration:underline}
.contact-form{display:grid;gap:10px}
.contact-form label{display:grid;gap:6px}
.contact-form label span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5f7392}
.contact-form input,.contact-form textarea{width:100%;padding:11px 12px;border:1px solid rgba(43,95,165,0.18);border-radius:10px;font:inherit;color:#213955;background:#fff}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid rgba(43,95,165,0.22);border-color:#2b5fa5}
.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contact-submit-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid rgba(22,63,122,.2);border-radius:12px;background:linear-gradient(135deg,#163f7a,#2b5fa5);color:#fff;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.contact-submit-btn:hover{filter:saturate(1.05)}
.contact-channel-list{margin:0;padding-left:18px;display:grid;gap:8px;color:#344c68;font-size:14px;line-height:1.6}

body.public-page-contact-us .contact-gov-page{
  background:linear-gradient(180deg,#f3f7fc 0%,#ffffff 72%);
}
body.public-page-contact-us .contact-gov-hero{
  border:1px solid rgba(29,61,102,.18);
  border-top:4px solid #2b5fa5;
  border-radius:12px;
  background:linear-gradient(180deg,#fbfdff 0%,#f6f9fe 100%);
  box-shadow:0 12px 28px rgba(18,43,78,.08);
  padding:14px 16px 12px;
  position:relative;
  overflow:hidden;
}
body.public-page-contact-us .contact-gov-hero::before{
  content:"";
  position:absolute;
  inset:auto -20% -35% -20%;
  height:60%;
  background:
    radial-gradient(120% 90% at 15% 95%,rgba(94,134,199,.17),transparent 62%),
    radial-gradient(100% 70% at 85% 100%,rgba(66,107,178,.14),transparent 64%);
  pointer-events:none;
}
body.public-page-contact-us .contact-gov-grid,
body.public-page-contact-us .contact-gov-hero > *{
  position:relative;
  z-index:1;
}
body.public-page-contact-us .contact-gov-hero .public-kicker{
  font-size:11px;
  letter-spacing:.16em;
}
body.public-page-contact-us .contact-gov-hero .public-title{
  font-size:38px;
  color:#173761;
}
body.public-page-contact-us .contact-gov-hero .public-summary{
  max-width:78ch;
  font-size:15px;
}
body.public-page-contact-us .contact-gov-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:8px;
  align-items:stretch;
}
body.public-page-contact-us .contact-gov-grid-main{
  grid-template-columns:minmax(320px,1fr) minmax(380px,1.25fr);
  gap:10px;
  align-items:stretch;
}
body.public-page-contact-us .contact-gov-info .contact-gov-table th{
  width:170px;
}
body.public-page-contact-us .contact-gov-info{display:flex;flex-direction:column;max-width:none;height:100%;justify-content:flex-start;gap:8px}
body.public-page-contact-us .contact-gov-intro{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.65;
  color:#475d7c;
  max-width:42ch;
}
body.public-page-contact-us .contact-gov-contact-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
  margin-top:2px;
}
body.public-page-contact-us .contact-gov-contact-list li{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:8px;
  align-items:start;
  color:#2f4969;
  font-size:14px;
  line-height:1.45;
  padding:6px 8px;
  border:1px solid rgba(31,72,120,.12);
  border-radius:8px;
  background:#f9fbff;
}
body.public-page-contact-us .contact-gov-contact-list a{
  color:#1d4f92;
  text-decoration:none;
}
body.public-page-contact-us .contact-gov-contact-list a:hover{text-decoration:underline}
body.public-page-contact-us .contact-gov-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-top:1px;
  background-color:#2b5fa5;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
body.public-page-contact-us .contact-gov-icon-phone{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24a11.7 11.7 0 0 0 3.68.59c.55 0 1 .45 1 1V20a1 1 0 0 1-1 1C10.3 21 3 13.7 3 4a1 1 0 0 1 1-1h3.47c.55 0 1 .45 1 1 0 1.27.2 2.5.59 3.68.12.35.03.74-.24 1.01l-2.2 2.1z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24a11.7 11.7 0 0 0 3.68.59c.55 0 1 .45 1 1V20a1 1 0 0 1-1 1C10.3 21 3 13.7 3 4a1 1 0 0 1 1-1h3.47c.55 0 1 .45 1 1 0 1.27.2 2.5.59 3.68.12.35.03.74-.24 1.01l-2.2 2.1z'/%3E%3C/svg%3E");
}
body.public-page-contact-us .contact-gov-icon-mail{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
body.public-page-contact-us .contact-gov-icon-pin{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E");
}
body.public-page-contact-us .contact-gov-icon-time{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 11h-5V11h3V7h2z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 11h-5V11h3V7h2z'/%3E%3C/svg%3E");
}
body.public-page-contact-us .contact-gov-mini-block{
  margin-top:2px;
  padding:8px 10px;
  border:1px solid rgba(31,72,120,.15);
  border-radius:10px;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  box-shadow:0 6px 14px rgba(23,58,106,.06);
}
body.public-page-contact-us .contact-gov-mini-block h4{
  margin:0 0 6px;
  color:#173761;
  font-size:17px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
body.public-page-contact-us .contact-gov-required-list{
  margin:0;
  padding-left:20px;
  display:grid;
  gap:4px;
  font-size:15px;
  line-height:1.45;
  color:#334e6f;
}
body.public-page-contact-us .contact-gov-note{
  margin-top:auto;
  padding:8px 10px;
  border:1px solid rgba(31,72,120,.14);
  border-radius:10px;
  background:linear-gradient(180deg,#f1f6ff 0%,#e8f0fc 100%);
  color:#2f4969;
  font-size:13px;
  line-height:1.5;
}
body.public-page-contact-us .contact-gov-form-section .contact-form-grid{
  grid-template-columns:1fr 1fr;
}
body.public-page-contact-us .contact-gov-form-section .contact-submit-btn{
  justify-self:start;
  min-width:200px;
}
body.public-page-contact-us .contact-gov-section{
  border:1px solid rgba(31,72,120,.16);
  border-radius:10px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  padding:10px 11px;
  position:relative;
  box-shadow:0 10px 18px rgba(17,48,90,.07);
  height:100%;
}
body.public-page-contact-us .contact-gov-section h3{
  margin:0 0 7px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(31,72,120,.14);
  font-size:20px;
  letter-spacing:.01em;
  color:#173761;
}
body.public-page-contact-us .contact-gov-wide{
  grid-column:1 / -1;
}
body.public-page-contact-us .contact-gov-bottom-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
body.public-page-contact-us .contact-channel-list-enhanced{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
}
body.public-page-contact-us .contact-channel-list-enhanced li{
  position:relative;
  padding:8px 10px 8px 42px;
  border:1px solid rgba(31,72,120,.12);
  border-radius:10px;
  background:linear-gradient(180deg,#f7faff 0%,#eef4fe 100%);
  color:#2f4969;
  font-size:15px;
  line-height:1.45;
  box-shadow:0 6px 14px rgba(20,52,99,.07);
}
body.public-page-contact-us .contact-channel-list-enhanced li::before{
  content:"";
  position:absolute;
  left:12px;
  top:11px;
  width:20px;
  height:20px;
  border-radius:999px;
  background:#dce8fb;
  box-shadow:inset 0 0 0 1px rgba(35,82,150,.14);
}
body.public-page-contact-us .contact-channel-list-enhanced li::after{
  content:"";
  position:absolute;
  left:16px;
  top:15px;
  width:12px;
  height:12px;
  background-color:#245ab0;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
body.public-page-contact-us .channel-item-general::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 22h18V8H3v14zm2-2v-4h4v4H5zm6 0v-4h4v4h-4zm6 0v-4h2v4h-2zM3 6h18V2H3v4z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 22h18V8H3v14zm2-2v-4h4v4H5zm6 0v-4h4v4h-4zm6 0v-4h2v4h-2zM3 6h18V2H3v4z'/%3E%3C/svg%3E");
}
body.public-page-contact-us .channel-item-followup::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V8h4.5L14 3.5zM8 12h8v1.5H8V12zm0 4h8v1.5H8V16z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V8h4.5L14 3.5zM8 12h8v1.5H8V12zm0 4h8v1.5H8V16z'/%3E%3C/svg%3E");
}
body.public-page-contact-us .channel-item-onsite::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5 1.34 3.5 3 3.5zM8 11c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.98 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5 1.34 3.5 3 3.5zM8 11c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.98 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}
body.public-page-contact-us .contact-timeline-cards{
  display:grid;
  gap:6px;
}
body.public-page-contact-us .contact-timeline-card{
  position:relative;
  padding:8px 10px 8px 50px;
  border:1px solid rgba(31,72,120,.13);
  border-radius:10px;
  background:linear-gradient(180deg,#f8fbff 0%,#eef4fe 100%);
  box-shadow:0 6px 14px rgba(20,52,99,.07);
}
body.public-page-contact-us .contact-timeline-card::before{
  content:"";
  position:absolute;
  left:12px;
  top:12px;
  width:28px;
  height:28px;
  border-radius:999px;
  background:#dce8fb;
  box-shadow:inset 0 0 0 1px rgba(35,82,150,.14);
}
body.public-page-contact-us .contact-timeline-card::after{
  content:"";
  position:absolute;
  left:19px;
  top:19px;
  width:14px;
  height:14px;
  background-color:#245ab0;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
body.public-page-contact-us .contact-timeline-card h4{
  margin:0 0 2px;
  color:#163f77;
  font-size:15px;
  font-weight:700;
  line-height:1.25;
}
body.public-page-contact-us .contact-timeline-card p{
  margin:0;
  color:#36506f;
  font-size:15px;
  line-height:1.45;
}
body.public-page-contact-us .timeline-item-ack::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
body.public-page-contact-us .timeline-item-review::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 2a8 8 0 1 0 4.9 14.32l4.39 4.39 1.41-1.41-4.39-4.39A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 2a8 8 0 1 0 4.9 14.32l4.39 4.39 1.41-1.41-4.39-4.39A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E");
}
body.public-page-contact-us .timeline-item-resolution::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10.59 13.41a1.996 1.996 0 0 1 0-2.82l4-4a1.996 1.996 0 1 1 2.82 2.82l-4 4a1.996 1.996 0 0 1-2.82 0zM6 4h8l6 6-9 9H5v-6l9-9H6V4z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10.59 13.41a1.996 1.996 0 0 1 0-2.82l4-4a1.996 1.996 0 1 1 2.82 2.82l-4 4a1.996 1.996 0 0 1-2.82 0zM6 4h8l6 6-9 9H5v-6l9-9H6V4z'/%3E%3C/svg%3E");
}
body.public-page-contact-us .contact-gov-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid rgba(31,72,120,.14);
  border-radius:8px;
  overflow:hidden;
  table-layout:fixed;
}
body.public-page-contact-us .contact-gov-table th,
body.public-page-contact-us .contact-gov-table td{
  text-align:left;
  vertical-align:top;
  padding:7px 9px;
  border-bottom:1px solid rgba(31,72,120,.13);
  font-size:13px;
  color:#2f4969;
}
body.public-page-contact-us .contact-gov-table th{
  width:210px;
  background:#edf3fd;
  color:#173761;
  font-weight:700;
}
body.public-page-contact-us .contact-gov-table tbody tr:nth-child(even) td{
  background:#fbfdff;
}
body.public-page-contact-us .contact-gov-table tbody tr:hover td{
  background:#f4f8ff;
}
body.public-page-contact-us .contact-gov-table tr:last-child th,
body.public-page-contact-us .contact-gov-table tr:last-child td{
  border-bottom:0;
}
body.public-page-contact-us .contact-gov-table a{
  color:#1d4f92;
  text-decoration:none;
}
body.public-page-contact-us .contact-gov-table a:hover{text-decoration:underline}
body.public-page-contact-us .contact-form{
  gap:7px;
}
body.public-page-contact-us .contact-form label span{
  color:#4f6484;
  font-size:11px;
  letter-spacing:.08em;
}
body.public-page-contact-us .contact-form input,
body.public-page-contact-us .contact-form textarea{
  border:1px solid rgba(31,72,120,.22);
  border-radius:8px;
  background:#fff;
  transition:border-color 160ms ease, box-shadow 160ms ease;
}
body.public-page-contact-us .contact-form input:focus,
body.public-page-contact-us .contact-form textarea:focus{
  outline:none;
  border-color:#1f4e89;
  box-shadow:0 0 0 2px rgba(43,95,165,.14);
}
body.public-page-contact-us .contact-submit-btn{
  min-height:36px;
  border-radius:8px;
  border:1px solid rgba(22,63,122,.24);
  background:linear-gradient(135deg,#1a4780,#2b5fa5);
  font-size:13px;
  letter-spacing:.08em;
}
body.public-page-contact-us .contact-submit-btn:hover{
  background:linear-gradient(135deg,#153b6b,#244f88);
  filter:none;
}
body.public-page-contact-us .contact-form-note{
  margin:0;
  padding:6px 8px;
  border:1px solid rgba(31,72,120,.14);
  border-radius:8px;
  background:#f5f9ff;
  color:#3b5271;
  font-size:12px;
  line-height:1.55;
}
body.public-page-contact-us .contact-gov-info .contact-gov-note{
  margin-top:auto;
}

@media(max-width:980px){
  body.public-page-contact-us .contact-gov-grid{grid-template-columns:1fr}
  body.public-page-contact-us .contact-gov-grid-main{grid-template-columns:1fr}
  body.public-page-contact-us .contact-gov-hero .public-title{font-size:32px}
  body.public-page-contact-us .contact-gov-section h3{font-size:21px}
  body.public-page-contact-us .contact-gov-section{height:auto}
  body.public-page-contact-us .contact-gov-info{height:auto}
  body.public-page-contact-us .contact-gov-note{margin-top:8px}
  body.public-page-contact-us .contact-gov-bottom-grid{grid-template-columns:1fr}
  body.public-page-contact-us .contact-gov-form-section .contact-form-grid{grid-template-columns:1fr}
  body.public-page-contact-us .contact-gov-form-section .contact-submit-btn{width:100%;min-width:0}
}

@media(max-width:640px){
  body.public-page-contact-us .contact-gov-hero{padding:12px 12px 10px;border-radius:10px}
  body.public-page-contact-us .contact-gov-hero .public-title{font-size:26px}
  body.public-page-contact-us .contact-gov-hero .public-summary{font-size:14px;line-height:1.55}
  body.public-page-contact-us .contact-gov-grid,
  body.public-page-contact-us .contact-gov-grid-main,
  body.public-page-contact-us .contact-gov-bottom-grid{gap:8px}
  body.public-page-contact-us .contact-gov-section{padding:10px;height:auto}
  body.public-page-contact-us .contact-gov-section h3{font-size:18px}
  body.public-page-contact-us .contact-gov-intro,
  body.public-page-contact-us .contact-gov-contact-list li,
  body.public-page-contact-us .contact-channel-list-enhanced li,
  body.public-page-contact-us .contact-timeline-card p{font-size:13px;line-height:1.5}
  body.public-page-contact-us .contact-gov-contact-list li{grid-template-columns:18px 1fr;padding:6px 8px}
  body.public-page-contact-us .contact-gov-mini-block{padding:8px}
  body.public-page-contact-us .contact-gov-mini-block h4{font-size:15px}
  body.public-page-contact-us .contact-gov-required-list{font-size:13px;padding-left:18px}
  body.public-page-contact-us .contact-gov-note,
  body.public-page-contact-us .contact-form-note{font-size:12px;line-height:1.5}
  body.public-page-contact-us .contact-timeline-card{padding:8px 8px 8px 44px}
  body.public-page-contact-us .contact-timeline-card h4{font-size:14px}
  body.public-page-contact-us .contact-gov-table{display:block;overflow:auto}
  body.public-page-contact-us .contact-gov-table th,
  body.public-page-contact-us .contact-gov-table td{font-size:12px;padding:8px}
}

.policy-page .policy-hero{
  border:1px solid rgba(43,95,165,0.16);
  border-radius:20px;
  background:linear-gradient(180deg,var(--policy-hero-bg,#eef3f9),var(--policy-hero-bg,#eef3f9));
  box-shadow:0 16px 34px rgba(18,43,78,.09);
}
.policy-hero-head{display:grid;gap:10px}
.policy-page .public-kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--public-accent,#2b5fa5)}
.policy-page .public-kicker::before{content:"";width:38px;height:2px;background:linear-gradient(90deg,var(--public-accent,#2b5fa5),rgba(43,95,165,.2))}
.policy-page .public-title{font-size:44px;line-height:1.02;color:var(--public-title,#173761)}
.policy-page .public-summary{max-width:72ch;color:#2f4969;font-size:18px;line-height:1.7}
.policy-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.policy-pill{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(43,95,165,.24);background:linear-gradient(180deg,var(--policy-pill-bg,#eaf1fa),var(--policy-pill-bg,#eaf1fa));color:#244a84;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.policy-layout{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px;margin-top:16px}
.policy-panel{border:1px solid rgba(43,95,165,.16);border-radius:16px;background:linear-gradient(180deg,var(--policy-panel-bg,#f8fbff),var(--policy-panel-bg,#f8fbff));padding:16px}
.policy-panel h3{margin:0 0 10px;color:#173761;font-size:22px;line-height:1.2}
.policy-panel-emphasis{background:linear-gradient(180deg,var(--policy-panel-emphasis,#ecf3fb),var(--policy-panel-emphasis,#ecf3fb))}
.policy-list{margin:0;padding-left:20px;color:#314d70;font-size:15px;line-height:1.75}
.policy-list li{margin:0 0 8px}
.policy-list li:last-child{margin-bottom:0}

.gov-policy-doc .policy-hero{
  border:1px solid rgba(31,72,120,.24);
  border-radius:8px;
  background:#eef3f9;
  padding:24px 26px 22px;
}
.gov-policy-doc .policy-hero-head{
  display:grid;
  gap:8px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(31,72,120,.16);
}
.gov-policy-doc .public-kicker{
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
}
.gov-policy-doc .public-title{
  font-size:40px;
  line-height:1.06;
  font-weight:700;
  color:#173761;
}
.gov-policy-doc .public-summary{
  max-width:76ch;
  font-size:16px;
  line-height:1.7;
  color:#2f4969;
}
.gov-policy-reference{
  margin-top:14px;
  padding:10px 12px;
  border:1px solid rgba(31,72,120,.18);
  border-left:3px solid #2b5fa5;
  background:#f8fbff;
}
.gov-policy-reference p{
  margin:0 0 6px;
  font-size:13px;
  line-height:1.55;
  color:#304d70;
}
.gov-policy-reference p:last-child{margin-bottom:0}
.gov-policy-reference strong{color:#173761}
.gov-policy-sections{
  margin-top:14px;
  border:1px solid rgba(31,72,120,.18);
  background:#fbfdff;
}
.gov-policy-section{
  padding:0;
  border-bottom:1px solid rgba(31,72,120,.14);
}
.gov-policy-section:last-child{border-bottom:0}
.gov-policy-summary{
  position:relative;
  display:block;
  list-style:none;
  cursor:pointer;
  margin:0;
  padding:14px 46px 14px 16px;
  font-size:19px;
  line-height:1.3;
  color:#173761;
  font-weight:700;
}
.gov-policy-summary::-webkit-details-marker{display:none}
.gov-policy-summary::after{
  content:"+";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:24px;
  line-height:1;
  color:#2b5fa5;
  transition:transform 160ms ease;
}
.gov-policy-section[open] > .gov-policy-summary::after{
  content:"-";
}
.gov-policy-content{
  padding:0 16px 14px;
}
.gov-policy-section h3{
  margin:0 0 8px;
  font-size:19px;
  line-height:1.3;
  color:#173761;
}
.gov-policy-section p{
  margin:0;
  font-size:15px;
  line-height:1.75;
  color:#314d70;
}
.gov-policy-doc .policy-list{
  margin:0;
  padding-left:20px;
  font-size:15px;
  line-height:1.75;
}
.gov-policy-doc .policy-list li{margin:0 0 8px}
.gov-policy-doc .policy-list li:last-child{margin-bottom:0}

@media(max-width:980px){
  .public-grid{grid-template-columns:1fr 1fr}
  .policy-layout{grid-template-columns:1fr !important}
  .policy-page .public-title{font-size:34px}
  .policy-page .public-summary{font-size:16px}
  .gov-policy-doc .public-title{font-size:32px}
  .gov-policy-doc .policy-hero{padding:20px 18px}
  .gov-policy-summary{padding:12px 40px 12px 12px;font-size:17px}
  .gov-policy-summary::after{right:12px}
  .gov-policy-content{padding:0 12px 12px}
}

@media(max-width:640px){
  .policy-page .public-title,
  .gov-policy-doc .public-title{font-size:26px;line-height:1.04}
  .policy-page .public-summary,
  .gov-policy-doc .public-summary{font-size:14px;line-height:1.58}
  .policy-pill-row{gap:6px}
  .policy-pill{min-height:30px;padding:0 10px;font-size:10px}
  .policy-panel{padding:12px;border-radius:12px}
  .policy-panel h3{font-size:18px}
  .policy-list,
  .gov-policy-doc .policy-list{padding-left:18px;font-size:13px;line-height:1.6}
  .gov-policy-doc .policy-hero{padding:16px 14px;border-radius:10px}
  .gov-policy-reference{margin-top:12px;padding:10px}
  .gov-policy-reference p{font-size:12px;line-height:1.5}
  .gov-policy-sections{margin-top:12px}
  .gov-policy-summary{padding:11px 38px 11px 12px;font-size:15px;line-height:1.35}
  .gov-policy-summary::after{font-size:20px}
  .gov-policy-content{padding:0 12px 11px}
  .gov-policy-section p{font-size:13px;line-height:1.6}
}

@media(max-width:640px){
  .public-page{padding:22px 16px 30px}
  .public-hero{padding:18px 16px 14px}
  .public-title{font-size:28px}
  .public-summary{font-size:15px}
  .public-grid{grid-template-columns:1fr;gap:12px}
}

@media(max-width:900px){
  .transparency-hero-card{grid-template-columns:1fr;gap:24px;padding:28px 26px}
  .transparency-copy h2{font-size:34px}
  .transparency-copy p{font-size:17px}
  .transparency-inline-links{grid-template-columns:1fr}
  .transparency-inline-link{font-size:15px}
}

@media(max-width:640px){
  .transparency-page{padding:24px 16px 18px}
  .transparency-hero-card{padding:22px 18px;border-radius:24px}
  .transparency-seal-label{font-size:20px}
  .transparency-kicker{font-size:11px;letter-spacing:0.14em}
  .transparency-copy h2{font-size:26px}
  .transparency-copy p{font-size:15px;line-height:1.65}
  .transparency-section{padding:8px 16px 20px}
  .transparency-section-list{padding:0 16px 14px}
  .transparency-inline-link{padding:14px 14px 13px;border-radius:16px;font-size:13px;line-height:1.4}
  .transparency-inline-plus{flex-basis:24px;width:24px;height:24px;font-size:17px}
  .transparency-design-panel-wrap{padding:6px 16px 32px}
  .transparency-design-panel{padding:22px 18px 6px;border-radius:22px}
  .transparency-note-plain{padding:18px 16px;border-radius:16px}
  .transparency-note-plain h3{font-size:18px}
  .transparency-note-plain p{font-size:15px;line-height:1.7}
}

@media(max-width:420px){
  .transparency-page{padding:20px 12px 16px}
  .transparency-hero-card{padding:18px 14px;border-radius:18px;gap:18px}
  .transparency-seal-mark img{width:min(170px,60vw)}
  .transparency-seal-label{font-size:17px}
  .transparency-copy h2{font-size:22px}
  .transparency-copy p{font-size:14px;line-height:1.55}
  .transparency-inline-link{padding:12px;border-radius:14px;font-size:12px}
  .transparency-design-panel-wrap{padding:6px 12px 24px}
  .transparency-design-panel{padding:18px 14px 4px;border-radius:18px}
  .transparency-note-plain{padding:14px 12px;border-radius:14px}
  .transparency-note-plain h3{font-size:16px}
  .transparency-note-plain p{font-size:14px;line-height:1.58}
}

/* Modal accessibility overrides: prevent overlap and keep content readable on zoom */
.login-modal{
  align-items:flex-start;
  padding:clamp(10px,2.6vw,24px);
}
.login-modal-dialog,
.register-modal-dialog{
  width:min(100%,940px);
  max-height:calc(100dvh - 20px) !important;
  overflow:hidden !important;
  background:#ffffff !important;
  scrollbar-width:thin;
}
.login-card-modal,
.login-card-modal-split,
.register-card-modal.login-card-modal-split{
  min-height:0;
}
.login-modal-panel,
.register-modal-panel{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-width:thin;
}
.login-modal-header-plain{
  min-height:auto;
  padding-right:72px;
}
.login-modal-header-plain .login-modal-header-copy{
  max-width:100%;
}
.login-modal-header-plain::after,
#loginModal .login-modal-header-plain::after,
#forgotPasswordModal .login-modal-header-plain::after,
#registerModal .login-modal-header-plain::after,
#twoFaModal .verification-modal-header-plain::after,
#registerVerificationModal .verification-modal-header-plain::after{
  display:none !important;
  content:none !important;
}
.login-modal-subtitle .agency-line,
.login-modal-subtitle .system-line{
  white-space:normal !important;
  overflow-wrap:anywhere;
}
.login-modal-header-plain h2,
#loginModal .login-modal-header-plain h2,
#registerModal .login-modal-header-plain h2{
  max-width:none;
  white-space:normal;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:keep-all;
  hyphens:none;
}
#loginModal .login-modal-header-plain h2{
  font-size:clamp(30px,3.4vw,46px);
  max-width:12ch;
}

/* Keep labels above user input so text is never covered when zoomed */
.login-modal .login-input-shell{
  min-height:64px;
  padding:16px 18px;
}
.login-modal .login-input-wrap-modal input,
#registerModal .register-input-wrap input{
  min-height:24px;
  padding-top:22px;
  padding-bottom:4px;
  font-size:16px;
  line-height:1.35;
}
.login-modal .login-floating-label,
#registerModal .register-input-wrap .login-floating-label{
  top:10px;
  transform:none;
  font-size:11px;
  line-height:1.2;
  max-width:calc(100% - 90px);
  white-space:normal;
}
.login-modal .login-input-wrap-modal input:focus + .login-floating-label,
.login-modal .login-input-wrap-modal input:not(:placeholder-shown) + .login-floating-label,
#registerModal .register-input-wrap input:focus + .login-floating-label,
#registerModal .register-input-wrap input:not(:placeholder-shown) + .login-floating-label{
  top:10px;
  transform:none;
  font-size:11px;
}

/* Remove blue edge/highlight around close button */
.login-modal-close,
.login-modal-header-plain .login-modal-close{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:none !important;
  -webkit-tap-highlight-color:transparent;
}
.login-modal-close:hover,
.login-modal-header-plain .login-modal-close:hover{
  background:transparent !important;
  transform:none !important;
}
.login-modal-close:focus,
.login-modal-close:focus-visible{
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
}

@media (max-width:1024px), (max-height:700px){
  .login-card-modal-split,
  .register-card-modal.login-card-modal-split{
    grid-template-columns:1fr;
  }
  #loginModal .login-card-modal-split{
    grid-template-columns:1fr !important;
  }
  #loginModal .login-modal-visual,
  #registerModal .register-modal-visual{
    display:none;
  }
  .login-modal-dialog,
  .register-modal-dialog{
    border-radius:20px;
  }
  #loginModal .login-modal-header-plain h2,
  #registerModal .login-modal-header-plain h2{
    font-size:clamp(20px,5.2vw,34px);
    line-height:1.08;
  }
  #loginModal .login-modal-header-plain .login-modal-subtitle,
  #registerModal .login-modal-header-plain .login-modal-subtitle{
    max-width:30ch;
    font-size:clamp(11px,2.1vw,14px);
  }
}

@media (max-width:520px){
  #registerModal .register-modal-dialog,
  #registerModal .register-modal-panel{
    background:#ffffff !important;
  }
  #registerModal .register-modal-panel > .register-modal-body{
    width:100% !important;
    background:#ffffff !important;
  }
}

/* Remove form panel fills inside auth modals */
.login-modal .login-input-shell,
#registerModal .register-input-wrap .login-input-shell{
  background:transparent !important;
  box-shadow:none !important;
}
.login-modal .login-input-wrap-modal:hover .login-input-shell,
.login-modal .login-input-wrap-modal:focus-within .login-input-shell,
#registerModal .register-input-wrap:hover .login-input-shell,
#registerModal .register-input-wrap:focus-within .login-input-shell{
  background:transparent !important;
}

/* Login modal sizing: keep visible margins and avoid near full-screen coverage */
#loginModal.login-modal{
  align-items:center;
  padding:clamp(16px,3vw,34px);
}
#loginModal .login-modal-dialog{
  width:min(100%,860px) !important;
  max-height:min(calc(100dvh - 52px),820px) !important;
}
#loginModal .login-modal-header-plain{
  min-height:156px;
}
#loginModal .login-modal-body-plain{
  padding:10px 28px 18px;
}
#loginModal .login-input-shell{
  min-height:58px;
  padding:14px 16px;
}
@media (min-width:641px){
  #loginModal .login-modal-header-plain{
    padding-left:56px !important;
    padding-right:56px !important;
  }
  #loginModal .login-modal-header-plain .login-modal-header-copy{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
}

/* Keep split layout on normal laptop sizes; collapse only on very constrained viewports */
@media (max-width:900px), (max-height:700px){
  #loginModal .login-card-modal-split,
  #registerModal .register-card-modal.login-card-modal-split{
    grid-template-columns:1fr !important;
  }
  #loginModal .login-modal-visual,
  #registerModal .register-modal-visual{
    display:none !important;
  }
  #loginModal .login-modal-dialog,
  #registerModal .register-modal-dialog{
    width:min(100%,760px) !important;
  }
}

/* Prevent white edge bleed on zoom: dialog shell stays transparent, card is the only surface */
#loginModal .login-modal-dialog,
#forgotPasswordModal .forgot-modal-dialog,
#registerModal .register-modal-dialog,
#twoFaModal .verification-modal-dialog,
#registerVerificationModal .verification-modal-dialog{
  background:transparent !important;
}

#loginModal .login-card-modal-split,
#forgotPasswordModal .forgot-card-modal.login-card-modal-split,
#registerModal .register-card-modal.login-card-modal-split,
#twoFaModal .verification-card-modal.login-card-modal-split,
#registerVerificationModal .verification-card-modal.login-card-modal-split{
  border-radius:inherit;
  overflow:hidden;
}

/* Remove right-edge white strip at high zoom: suppress visible scrollbar gutters/tracks */
#loginModal .login-modal-dialog,
#forgotPasswordModal .forgot-modal-dialog,
#registerModal .register-modal-dialog,
#twoFaModal .verification-modal-dialog,
#registerVerificationModal .verification-modal-dialog{
  overflow:hidden !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}

#loginModal .login-modal-dialog::-webkit-scrollbar,
#forgotPasswordModal .forgot-modal-dialog::-webkit-scrollbar,
#registerModal .register-modal-dialog::-webkit-scrollbar,
#loginModal .login-modal-panel::-webkit-scrollbar,
#forgotPasswordModal .forgot-modal-panel::-webkit-scrollbar,
#registerModal .register-modal-panel::-webkit-scrollbar,
#twoFaModal .verification-modal-dialog::-webkit-scrollbar,
#registerVerificationModal .verification-modal-dialog::-webkit-scrollbar,
#twoFaModal .verification-modal-panel::-webkit-scrollbar,
#registerVerificationModal .verification-modal-panel::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  background:transparent !important;
}

#loginModal .login-modal-panel,
#forgotPasswordModal .forgot-modal-panel,
#registerModal .register-modal-panel,
#twoFaModal .verification-modal-panel,
#registerVerificationModal .verification-modal-panel{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  background:transparent !important;
}

#twoFaModal .verification-modal-panel > .verification-modal-body,
#registerVerificationModal .verification-modal-panel > .verification-modal-body{
  background:transparent !important;
}

/* Register header breathing room: prevent subtitle from sitting too close to bottom edge */
#registerModal .login-modal-header-plain{
  padding-bottom:22px !important;
}
#registerModal .login-modal-header-plain .login-modal-header-copy{
  padding-bottom:4px;
}
#registerModal .login-modal-header-plain .login-modal-subtitle{
  margin-bottom:4px;
  line-height:1.32;
}

/* Keep title/subtitle mathematically centered at any zoom level */
#loginModal .login-modal-header-plain,
#forgotPasswordModal .login-modal-header-plain,
#registerModal .login-modal-header-plain{
  padding-left:clamp(16px,3vw,56px) !important;
  padding-right:clamp(16px,3vw,56px) !important;
}

#loginModal .login-modal-header-plain .login-modal-header-copy,
#forgotPasswordModal .login-modal-header-plain .login-modal-header-copy,
#registerModal .login-modal-header-plain .login-modal-header-copy{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  max-width:100% !important;
}

/* Keep header inside the same scroll flow on zoom (not sticky/fixed) */
#loginModal .login-modal-panel,
#forgotPasswordModal .forgot-modal-panel,
#registerModal .register-modal-panel{
  justify-content:flex-start !important;
}

#loginModal .login-modal-header-plain,
#forgotPasswordModal .login-modal-header-plain,
#registerModal .login-modal-header-plain{
  position:relative !important;
  top:auto !important;
}

/* Zoom consistency: avoid oversized blue header area and excess bottom gap */
@media (max-width:1366px), (max-height:860px){
  #loginModal .login-modal-header-plain,
  #forgotPasswordModal .login-modal-header-plain,
  #registerModal .login-modal-header-plain{
    min-height:132px !important;
    padding-top:10px !important;
    padding-bottom:12px !important;
  }

  #loginModal .login-modal-header-plain h2,
  #forgotPasswordModal .login-modal-header-plain h2,
  #registerModal .login-modal-header-plain h2{
    font-size:clamp(24px,3vw,38px) !important;
    line-height:1.06 !important;
    max-width:11ch !important;
  }

  #loginModal .login-modal-header-plain .login-modal-subtitle,
  #forgotPasswordModal .login-modal-header-plain .login-modal-subtitle,
  #registerModal .login-modal-header-plain .login-modal-subtitle{
    margin-top:6px !important;
    margin-bottom:0 !important;
    font-size:clamp(11px,1.8vw,14px) !important;
    line-height:1.26 !important;
  }
}

/* Keep login submit button reachable on zoom: dialog scrolls as one container */
#loginModal .login-modal-dialog{
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

#loginModal .login-modal-panel{
  overflow:visible !important;
  max-height:none !important;
}

#loginModal .login-modal-panel > .login-modal-body-plain{
  padding-bottom:max(24px, env(safe-area-inset-bottom)) !important;
}

/* Same zoom-safe scroll behavior for register modal */
#registerModal .register-modal-dialog{
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

#registerModal .register-modal-panel{
  overflow:visible !important;
  max-height:none !important;
}

#registerModal .register-modal-panel > .register-modal-body{
  padding-bottom:max(24px, env(safe-area-inset-bottom)) !important;
}

/* Same zoom-safe scroll behavior for forgot-password modal */
#forgotPasswordModal .forgot-modal-dialog{
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

#forgotPasswordModal .forgot-modal-panel{
  overflow:visible !important;
  max-height:none !important;
}

#forgotPasswordModal .forgot-modal-panel > .login-modal-body-plain{
  padding-bottom:max(24px, env(safe-area-inset-bottom)) !important;
}

/* Register floating labels: center by default, float only on focus/value */
#registerModal .register-input-wrap .login-floating-label{
  top:50% !important;
  transform:translateY(-50%) !important;
}

#registerModal .register-input-wrap input:focus + .login-floating-label,
#registerModal .register-input-wrap input:not(:placeholder-shown) + .login-floating-label{
  top:10px !important;
  transform:none !important;
  font-size:11px !important;
}

/* Login floating labels: center by default, float only on focus/value */
#loginModal .login-input-wrap-modal .login-floating-label{
  top:50% !important;
  transform:translateY(-50%) !important;
}

#loginModal .login-input-wrap-modal input:focus + .login-floating-label,
#loginModal .login-input-wrap-modal input:not(:placeholder-shown) + .login-floating-label{
  top:10px !important;
  transform:none !important;
  font-size:11px !important;
}

/* Forgot-password floating label: center by default, float on focus/value */
#forgotPasswordModal .login-input-wrap-modal .login-floating-label{
  top:50% !important;
  transform:translateY(-50%) !important;
}

#forgotPasswordModal .login-input-wrap-modal input:focus + .login-floating-label,
#forgotPasswordModal .login-input-wrap-modal input:not(:placeholder-shown) + .login-floating-label{
  top:10px !important;
  transform:none !important;
  font-size:11px !important;
}

/* Mobile register modal: centered and compact so full form + password rules remain visible */
@media (max-width:640px){
  #registerModal.login-modal{
    align-items:center !important;
    justify-content:center !important;
    padding:14px !important;
  }

  #registerModal .register-modal-dialog{
    width:min(100%,470px) !important;
    max-height:calc(100dvh - 40px) !important;
    margin:0 auto !important;
    overflow:hidden !important;
    border-radius:22px !important;
  }

  #registerModal .register-modal-panel{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    max-height:calc(100dvh - 40px) !important;
  }

  #registerModal .login-modal-header-plain{
    min-height:0 !important;
    padding:12px 40px 8px 40px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:112px !important;
  }

  #registerModal .login-modal-header-plain .login-modal-header-copy{
    width:100% !important;
    max-width:100% !important;
    padding:0 14px !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  #registerModal .login-modal-title-row{
    display:flex !important;
    justify-content:center !important;
  }

  #registerModal .login-modal-header-plain h2{
    font-size:clamp(16px,8vw,28px) !important;
    line-height:1.04 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  #registerModal .login-modal-header-plain .login-modal-subtitle{
    margin-top:4px !important;
    font-size:clamp(9px,2.8vw,12px) !important;
    line-height:1.2 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  #registerModal .register-modal-panel > .register-modal-body{
    width:min(calc(100% - 28px),560px) !important;
  }

  #registerModal .register-modal-body{
    padding:6px 14px 14px !important;
  }

  #registerModal .register-form-modal{
    gap:5px !important;
  }

  #registerModal .register-input-wrap .login-input-shell{
    min-height:46px !important;
    padding:8px 10px !important;
    border-radius:10px !important;
    grid-template-columns:18px minmax(0,1fr) !important;
    column-gap:14px !important;
  }

  #registerModal .register-input-wrap input{
    min-height:18px !important;
    font-size:11px !important;
    padding-top:15px !important;
    padding-bottom:4px !important;
    line-height:1.3 !important;
  }

  #registerModal .register-input-wrap:has(.login-password-toggle) input{
    padding-top:15px !important;
    padding-bottom:4px !important;
  }

  #registerModal .register-input-wrap .login-floating-label{
    left:42px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    font-size:11px !important;
  }

  #registerModal .register-input-wrap input:focus + .login-floating-label,
  #registerModal .register-input-wrap input:not(:placeholder-shown) + .login-floating-label{
    top:6px !important;
    transform:none !important;
    font-size:8px !important;
    line-height:1.1 !important;
  }

  #registerModal .register-form-modal .password-validation-indicator{
    margin-top:0 !important;
    padding-top:4px !important;
  }

  #registerModal .register-form-modal .password-strength-progress{
    height:4px !important;
    margin-bottom:5px !important;
  }

  #registerModal .register-form-modal .password-strength-alert{
    margin-bottom:5px !important;
    font-size:10px !important;
    line-height:1.2 !important;
  }

  #registerModal .register-form-modal .password-validation-title{
    margin-bottom:5px !important;
    font-size:10px !important;
  }

  #registerModal .register-form-modal .password-validation-list{
    gap:3px !important;
  }

  #registerModal .register-form-modal .password-validation-item{
    gap:5px !important;
  }

  #registerModal .register-form-modal .validation-icon{
    width:12px !important;
    height:12px !important;
    font-size:7px !important;
  }

  #registerModal .register-form-modal .validation-text{
    font-size:9px !important;
    line-height:1.15 !important;
  }

  #registerModal .register-submit-btn-modal{
    min-height:36px !important;
    margin-top:0 !important;
    border-radius:10px !important;
    font-size:11px !important;
  }
}

/* Desktop/web: keep only register title on a single line */
@media (min-width:641px){
  #registerModal .login-modal-header-plain h2{
    white-space:nowrap !important;
    max-width:none !important;
  }

  #loginModal .login-modal-header-plain h2{
    white-space:normal !important;
    max-width:12ch !important;
  }
}

/* Mobile: reduce modal icon sizes across login/forgot/register/verification */
@media (max-width:640px){
  #loginModal .login-input-wrap-modal .login-input-icon,
  #forgotPasswordModal .login-input-wrap-modal .login-input-icon,
  #registerModal .register-input-wrap .login-input-icon{
    flex:0 0 18px !important;
    width:18px !important;
    height:18px !important;
  }

  #loginModal .login-input-wrap-modal .login-input-icon svg,
  #loginModal .login-input-wrap-modal .login-input-icon img,
  #forgotPasswordModal .login-input-wrap-modal .login-input-icon svg,
  #forgotPasswordModal .login-input-wrap-modal .login-input-icon img,
  #registerModal .register-input-wrap .login-input-icon svg,
  #registerModal .register-input-wrap .login-input-icon img{
    width:18px !important;
    height:18px !important;
  }

  #loginModal .login-password-icon,
  #forgotPasswordModal .login-password-icon,
  #registerModal .register-form-modal .login-password-icon{
    width:14px !important;
    height:14px !important;
  }

  #loginModal .login-password-icon svg,
  #forgotPasswordModal .login-password-icon svg,
  #registerModal .register-form-modal .login-password-icon svg{
    width:14px !important;
    height:14px !important;
  }

  #loginModal .login-captcha-refresh,
  #forgotPasswordModal .login-captcha-refresh{
    width:28px !important;
    height:28px !important;
  }

  #loginModal .login-captcha-refresh img,
  #forgotPasswordModal .login-captcha-refresh img{
    width:14px !important;
    height:14px !important;
  }

  #twoFaModal .verification-hero-icon svg,
  #registerVerificationModal .verification-hero-icon svg{
    width:86px !important;
  }

  #twoFaModal .verification-otp-ready,
  #registerVerificationModal .verification-otp-ready{
    width:22px !important;
    height:22px !important;
    font-size:14px !important;
  }

  /* Mobile forgot-password modal must stay centered (not pinned to top) */
  #forgotPasswordModal.login-modal{
    align-items:center !important;
    justify-content:center !important;
    padding:10px !important;
  }

  #forgotPasswordModal .forgot-modal-dialog{
    margin:0 auto !important;
    max-height:calc(100dvh - 20px) !important;
  }

  #forgotPasswordModal .login-modal-header-plain{
    min-height:104px !important;
    padding:10px 40px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #forgotPasswordModal .login-modal-header-plain .login-modal-header-copy{
    margin:0 auto !important;
    text-align:center !important;
  }

  #forgotPasswordModal .login-modal-header-plain .login-modal-subtitle{
    margin-top:4px !important;
    margin-bottom:0 !important;
    line-height:1.2 !important;
  }

  #forgotPasswordModal .forgot-modal-panel > .login-modal-body-plain{
    width:min(calc(100% - 28px),560px) !important;
  }

  #forgotPasswordModal .login-modal-body-plain{
    padding:8px 14px 14px !important;
  }

  #forgotPasswordModal .login-input-shell{
    min-height:44px !important;
    padding:7px 12px !important;
    border-radius:11px !important;
  }

  #forgotPasswordModal .login-input-wrap-modal input{
    min-height:16px !important;
    padding-top:8px !important;
    font-size:12px !important;
  }

  #forgotPasswordModal .login-floating-label{
    left:46px !important;
    font-size:12px !important;
  }

  #forgotPasswordModal .login-input-wrap-modal input:focus + .login-floating-label,
  #forgotPasswordModal .login-input-wrap-modal input:not(:placeholder-shown) + .login-floating-label{
    top:7px !important;
    font-size:9px !important;
  }
}

/* Desktop/web forgot-password modal spacing tune */
@media (min-width:641px){
  #forgotPasswordModal .forgot-modal-dialog{
    width:min(100%,780px) !important;
  }

  #forgotPasswordModal .forgot-card-modal.login-card-modal-split{
    grid-template-columns:minmax(240px,300px) minmax(0,1fr) !important;
  }

  /* Match forgot-password input box sizing to login modal on web view */
  #forgotPasswordModal .login-input-shell{
    min-height:58px !important;
    padding:14px 16px !important;
  }

  #forgotPasswordModal .login-input-wrap-modal input{
    min-height:24px !important;
    padding-top:22px !important;
    padding-bottom:4px !important;
    font-size:16px !important;
    line-height:1.35 !important;
  }

  #forgotPasswordModal .login-modal-header-plain{
    min-height:130px !important;
    padding-top:16px !important;
    padding-bottom:12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #forgotPasswordModal .login-modal-header-plain .login-modal-header-copy{
    margin:0 auto !important;
    text-align:center !important;
  }

  #forgotPasswordModal .login-modal-header-plain .login-modal-subtitle{
    margin-top:6px !important;
    margin-bottom:0 !important;
    line-height:1.22 !important;
  }

  #forgotPasswordModal .forgot-modal-panel > .login-modal-body-plain{
    width:min(calc(100% - 24px),500px) !important;
  }

  #forgotPasswordModal .login-modal-body-plain{
    padding-bottom:28px !important;
  }

  #forgotPasswordModal .login-submit-btn-modal-split{
    margin-bottom:8px !important;
  }
}

/* Web zoom: forgot-password should behave like login modal (collapse to form-only on constrained viewport) */
@media (min-width:641px) and ((max-width:1100px) or (max-height:760px)){
  #forgotPasswordModal .forgot-card-modal.login-card-modal-split{
    grid-template-columns:1fr !important;
  }

  #forgotPasswordModal .login-modal-visual{
    display:none !important;
  }

  #forgotPasswordModal .forgot-modal-dialog{
    width:min(100%,760px) !important;
  }
}

/* Password eye toggle color behavior (login/register): blue by default, orange only on input focus */
#loginModal .login-input-wrap-modal:has(.login-password-toggle) .login-password-toggle,
#registerModal .register-input-wrap:has(.login-password-toggle) .login-password-toggle{
  color:#2b5fa5 !important;
  background:transparent !important;
}

#loginModal .login-input-wrap-modal:has(.login-password-toggle) .login-password-toggle:hover,
#registerModal .register-input-wrap:has(.login-password-toggle) .login-password-toggle:hover,
#loginModal .login-input-wrap-modal:has(.login-password-toggle) .login-password-toggle.is-active,
#registerModal .register-input-wrap:has(.login-password-toggle) .login-password-toggle.is-active{
  color:#2b5fa5 !important;
  background:transparent !important;
}

#loginModal .login-input-wrap-modal:has(.login-password-toggle):focus-within .login-password-toggle,
#registerModal .register-input-wrap:has(.login-password-toggle):focus-within .login-password-toggle,
#loginModal .login-input-wrap-modal:has(.login-password-toggle):focus-within .login-password-toggle:hover,
#registerModal .register-input-wrap:has(.login-password-toggle):focus-within .login-password-toggle:hover,
#loginModal .login-input-wrap-modal:has(.login-password-toggle):focus-within .login-password-toggle.is-active,
#registerModal .register-input-wrap:has(.login-password-toggle):focus-within .login-password-toggle.is-active{
  color:#b67812 !important;
  background:transparent !important;
}

/* Desktop/web: keep login header copy away from top edge */
@media (min-width:641px){
  #loginModal .login-modal-header-plain{
    min-height:136px !important;
    padding-top:16px !important;
    padding-bottom:12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #loginModal .login-modal-header-plain .login-modal-header-copy{
    margin:0 auto !important;
    text-align:center !important;
  }

  #loginModal .login-modal-header-plain .login-modal-subtitle{
    margin-top:6px !important;
    margin-bottom:0 !important;
    line-height:1.22 !important;
  }

}

@media (max-width:640px){
  #forgotPasswordModal .login-modal-actions-row,
  #forgotPasswordModal .login-modal-actions-row-split{
    justify-content:flex-end !important;
  }

  #forgotPasswordModal .login-forgot-link{
    margin-left:auto;
    text-align:right;
  }

  /* Match login modal bottom padding behavior on zoom-collapsed layout */
  #registerModal .register-modal-panel > .register-modal-body{
    padding-bottom:max(30px, env(safe-area-inset-bottom)) !important;
  }

  #registerModal .register-submit-btn-modal{
    margin-bottom:10px !important;
  }

  /* Mobile: keep "Create Account" title in one line */
  #registerModal .login-modal-header-plain h2{
    white-space:nowrap !important;
    max-width:none !important;
  }

  /* Mobile: keep "Welcome to LTO HRIS" title in one line */
  #loginModal .login-modal-header-plain h2{
    white-space:nowrap !important;
    max-width:none !important;
  }

  /* Mobile: tighten login header vertical spacing */
  #loginModal .login-modal-header-plain{
    min-height:96px !important;
    padding:8px 36px 6px !important;
  }

  #loginModal .login-modal-header-plain .login-modal-subtitle{
    margin-top:3px !important;
    line-height:1.15 !important;
  }

  #loginModal .login-modal-header-plain .login-modal-close{
    top:4px !important;
  }

  /* Mobile: tighten register header vertical spacing */
  #registerModal .login-modal-header-plain{
    min-height:96px !important;
    padding:8px 36px 6px !important;
  }

  #registerModal .login-modal-header-plain .login-modal-subtitle{
    margin-top:3px !important;
    line-height:1.15 !important;
  }

  #registerModal .login-modal-header-plain .login-modal-close{
    top:4px !important;
  }

  /* Mobile: tighten forgot-password header vertical spacing */
  #forgotPasswordModal .login-modal-header-plain{
    min-height:96px !important;
    padding:8px 36px 6px !important;
  }

  #forgotPasswordModal .login-modal-header-plain .login-modal-subtitle{
    margin-top:3px !important;
    line-height:1.15 !important;
  }

  #forgotPasswordModal .login-modal-header-plain .login-modal-close{
    top:4px !important;
  }
}

/* Keep login heading truly centered across high zoom levels */
#loginModal .login-modal-title-row{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}

#loginModal .login-modal-header-plain h2{
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

/* Login header anti-overlap guard: keep title/subtitle stacked with stable spacing on all zoom levels */
#loginModal .login-modal-header-plain .login-modal-header-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
}

#loginModal .login-modal-header-plain h2{
  margin:0 !important;
  line-height:1.08 !important;
}

#loginModal .login-modal-header-plain .login-modal-subtitle{
  margin:0 !important;
  line-height:1.24 !important;
}

@media (max-width:640px){
  #loginModal .login-modal-header-plain .login-modal-header-copy{
    gap:4px !important;
  }

  /* Match login/forgot input text alignment and breathing room to register modal */
  #loginModal .login-input-shell,
  #forgotPasswordModal .login-input-shell{
    grid-template-columns:18px minmax(0,1fr) !important;
    column-gap:14px !important;
  }

  #loginModal .login-input-wrap-modal input,
  #forgotPasswordModal .login-input-wrap-modal input{
    padding-top:14px !important;
    padding-bottom:2px !important;
    line-height:1.3 !important;
  }

  #loginModal .login-floating-label{
    left:46px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
  }

  #forgotPasswordModal .login-floating-label{
    left:44px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
  }

  #loginModal .login-input-wrap-modal input:focus + .login-floating-label,
  #loginModal .login-input-wrap-modal input:not(:placeholder-shown) + .login-floating-label,
  #forgotPasswordModal .login-input-wrap-modal input:focus + .login-floating-label,
  #forgotPasswordModal .login-input-wrap-modal input:not(:placeholder-shown) + .login-floating-label{
    top:6px !important;
    transform:none !important;
  }

  /* Mobile: compact verification modals (2FA + register verification) */
  #twoFaModal.login-modal,
  #registerVerificationModal.login-modal{
    padding:12px !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #twoFaModal .verification-modal-dialog,
  #registerVerificationModal .verification-modal-dialog{
    width:min(100%,520px) !important;
    max-height:calc(100dvh - 36px) !important;
    overflow:hidden !important;
    border-radius:20px !important;
  }

  #twoFaModal .verification-modal-panel,
  #registerVerificationModal .verification-modal-panel{
    max-height:calc(100dvh - 36px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  #twoFaModal .verification-modal-header-plain,
  #registerVerificationModal .verification-modal-header-plain{
    min-height:86px !important;
    padding:0 34px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #twoFaModal .verification-modal-header-plain .login-modal-header-copy,
  #registerVerificationModal .verification-modal-header-plain .login-modal-header-copy{
    margin:0 auto !important;
    text-align:center !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    width:100% !important;
  }

  #twoFaModal .verification-modal-header-plain .login-modal-subtitle,
  #registerVerificationModal .verification-modal-header-plain .login-modal-subtitle{
    margin-top:2px !important;
    line-height:1.15 !important;
  }

  #twoFaModal .verification-modal-body,
  #registerVerificationModal .verification-modal-body{
    padding:10px 14px 14px !important;
  }

  #twoFaModal .verification-modal-role-band,
  #registerVerificationModal .verification-modal-role-band{
    margin-bottom:8px !important;
    padding-bottom:6px !important;
  }

  #twoFaModal .verification-hero-image,
  #registerVerificationModal .verification-hero-image{
    width:90px !important;
  }

  #twoFaModal .verification-otp-row,
  #registerVerificationModal .verification-otp-row{
    gap:6px !important;
    margin:0 0 4px !important;
  }

  #twoFaModal .verification-form input.verification-otp-digit,
  #registerVerificationModal .verification-form input.verification-otp-digit{
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
    font-size:28px !important;
  }

  #twoFaModal .verification-title,
  #registerVerificationModal .verification-title{
    margin:0 0 2px !important;
    font-size:22px !important;
    line-height:1.08 !important;
  }

  #twoFaModal .verification-description,
  #registerVerificationModal .verification-description{
    margin:0 auto 4px !important;
    font-size:11px !important;
    line-height:1.35 !important;
  }

  #twoFaModal .verification-form .verification-primary-btn,
  #registerVerificationModal .verification-form .verification-primary-btn{
    margin-top:6px !important;
    min-height:44px !important;
  }
}

@media (min-width:641px){
  /* Match login modal bottom padding behavior on web zoom */
  #registerModal .register-modal-panel > .register-modal-body{
    padding-bottom:max(24px, env(safe-area-inset-bottom)) !important;
  }

  /* Match login modal web-view sizing/scroll rules for verification modals */
  #twoFaModal.login-modal,
  #registerVerificationModal.login-modal{
    align-items:center;
    padding:clamp(16px,3vw,34px);
  }

  #twoFaModal .verification-modal-dialog,
  #registerVerificationModal .verification-modal-dialog{
    width:min(100%,860px) !important;
    max-height:min(calc(100dvh - 52px),820px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  #twoFaModal .verification-modal-header-plain,
  #registerVerificationModal .verification-modal-header-plain{
    min-height:156px;
    padding-left:clamp(16px,3vw,56px) !important;
    padding-right:clamp(16px,3vw,56px) !important;
    position:relative !important;
    top:auto !important;
  }

  #twoFaModal .verification-modal-header-plain .login-modal-header-copy,
  #registerVerificationModal .verification-modal-header-plain .login-modal-header-copy{
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
    max-width:100% !important;
  }

  #twoFaModal .verification-modal-body,
  #registerVerificationModal .verification-modal-body{
    padding:10px 28px 18px !important;
    background:transparent !important;
  }

  #twoFaModal .verification-modal-panel,
  #registerVerificationModal .verification-modal-panel{
    overflow:visible !important;
    max-height:none !important;
    justify-content:flex-start !important;
  }

  #twoFaModal .verification-modal-panel > .verification-modal-body,
  #registerVerificationModal .verification-modal-panel > .verification-modal-body{
    width:100% !important;
    max-width:none !important;
    background:transparent !important;
    padding-bottom:max(24px, env(safe-area-inset-bottom)) !important;
  }

}

/* Keep split layout on normal laptop sizes; collapse only on very constrained viewports */
@media (min-width:641px) and ((max-width:900px) or (max-height:700px)){
  #twoFaModal .verification-card-modal.login-card-modal-split,
  #registerVerificationModal .verification-card-modal.login-card-modal-split{
    grid-template-columns:1fr !important;
  }

  #twoFaModal .verification-modal-visual,
  #registerVerificationModal .verification-modal-visual{
    display:none !important;
  }

  #twoFaModal .verification-modal-dialog,
  #registerVerificationModal .verification-modal-dialog{
    width:min(100%,760px) !important;
  }
}

/* Zoom consistency parity with login modal for verification headers */
@media (min-width:641px) and ((max-width:1366px) or (max-height:860px)){
  #twoFaModal .verification-modal-header-plain,
  #registerVerificationModal .verification-modal-header-plain{
    min-height:132px !important;
    padding-top:10px !important;
    padding-bottom:12px !important;
  }

  #twoFaModal .verification-modal-header-plain h2,
  #registerVerificationModal .verification-modal-header-plain h2{
    font-size:clamp(24px,3vw,38px) !important;
    line-height:1.06 !important;
    max-width:11ch !important;
  }

  #twoFaModal .verification-modal-header-plain .login-modal-subtitle,
  #registerVerificationModal .verification-modal-header-plain .login-modal-subtitle{
    margin-top:6px !important;
    margin-bottom:0 !important;
    font-size:clamp(11px,1.8vw,14px) !important;
    line-height:1.26 !important;
  }
}

/* Desktop zoom-out consistency: keep login header layout same as normal view */
@media (min-width:1200px){
  #loginModal .login-modal-header-plain{
    min-height:172px !important;
    padding:18px clamp(78px,6.2vw,124px) 16px clamp(62px,5.2vw,108px) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #loginModal .login-modal-header-plain .login-modal-header-copy{
    width:100% !important;
    max-width:980px !important;
    margin:0 auto !important;
    padding:0 24px !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    text-align:center !important;
  }

  #loginModal .login-modal-title-row{
    display:flex !important;
    justify-content:center !important;
    width:100% !important;
    padding:0 clamp(10px,1.4vw,22px) !important;
    box-sizing:border-box !important;
  }

  #loginModal .login-modal-header-plain h2{
    white-space:nowrap !important;
    max-width:calc(100% - 48px) !important;
    font-size:clamp(36px,2.55vw,46px) !important;
    line-height:1.02 !important;
    padding:0 clamp(12px,1.8vw,26px) !important;
    box-sizing:border-box !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  #loginModal .login-modal-header-plain .login-modal-subtitle{
    max-width:30ch !important;
    margin:0 auto !important;
    text-align:center !important;
    line-height:1.2 !important;
  }

  #loginModal .login-modal-header-plain .login-modal-subtitle .agency-line,
  #loginModal .login-modal-header-plain .login-modal-subtitle .system-line{
    white-space:nowrap !important;
  }

  #loginModal .login-modal-header-plain .login-modal-close{
    top:10px !important;
    right:12px !important;
  }

  /* Register modal parity for wide web zoom (25%-90%) */
  #registerModal .login-modal-header-plain{
    min-height:172px !important;
    padding:18px clamp(78px,6.2vw,124px) 16px clamp(62px,5.2vw,108px) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #registerModal .login-modal-header-plain .login-modal-header-copy{
    width:100% !important;
    max-width:980px !important;
    margin:0 auto !important;
    padding:0 24px !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    text-align:center !important;
  }

  #registerModal .login-modal-title-row{
    display:flex !important;
    justify-content:center !important;
    width:100% !important;
    overflow:visible !important;
  }

  #registerModal .login-modal-header-plain h2{
    max-width:none !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow-wrap:normal !important;
    font-size:clamp(24px,2.35vw,46px) !important;
    line-height:1.05 !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  #registerModal .login-modal-header-plain .login-modal-subtitle{
    margin:6px auto 0 !important;
    max-width:24ch !important;
    text-align:center !important;
    line-height:1.2 !important;
  }

  #registerModal .login-modal-header-plain .login-modal-close{
    top:10px !important;
    right:12px !important;
  }
}

/* Desktop/web edge breathing room: prevent login title from touching left/right edges on zoom-out */
@media (min-width:641px) and (max-width:1199px){
  #loginModal .login-modal-header-plain{
    padding-left:clamp(24px,4vw,64px) !important;
    padding-right:clamp(44px,5vw,84px) !important;
  }

  #loginModal .login-modal-header-plain .login-modal-header-copy{
    width:100% !important;
    max-width:calc(100% - 12px) !important;
    padding:0 clamp(8px,1.4vw,18px) !important;
    box-sizing:border-box !important;
  }

  #loginModal .login-modal-header-plain h2{
    max-width:100% !important;
    padding-left:clamp(10px,1.6vw,20px) !important;
    padding-right:clamp(10px,1.6vw,20px) !important;
    box-sizing:border-box !important;
  }

  #loginModal .login-modal-header-plain .login-modal-close{
    right:8px !important;
  }
}

/* Web view safeguard: keep login header title in one line */
@media (min-width:641px){
  #loginModal .login-modal-header-plain .login-modal-header-copy{
    padding-right:clamp(18px,2.2vw,34px) !important;
  }

  #loginModal .login-modal-title-row{
    overflow:visible !important;
  }

  #loginModal .login-modal-header-plain h2{
    max-width:none !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow-wrap:normal !important;
    font-size:clamp(24px,2.35vw,46px) !important;
    line-height:1.05 !important;
  }

  #registerModal .login-modal-header-plain{
    padding-left:clamp(24px,4vw,64px) !important;
    padding-right:clamp(44px,5vw,84px) !important;
  }

  #registerModal .login-modal-header-plain .login-modal-header-copy{
    width:100% !important;
    max-width:calc(100% - 12px) !important;
    margin:0 auto !important;
    padding:0 clamp(8px,1.4vw,18px) !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }

  #registerModal .login-modal-title-row{
    display:flex !important;
    justify-content:center !important;
    width:100% !important;
    overflow:visible !important;
  }

  #registerModal .login-modal-header-plain h2{
    max-width:none !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow-wrap:normal !important;
    font-size:clamp(24px,2.35vw,46px) !important;
    line-height:1.05 !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  #registerModal .login-modal-header-plain .login-modal-subtitle{
    margin:6px auto 0 !important;
    max-width:24ch !important;
    text-align:center !important;
  }

  #registerModal .login-modal-header-plain .login-modal-close{
    right:8px !important;
  }

  /* Verification modals: keep title in one line on web view */
  #twoFaModal .verification-modal-header-plain h2,
  #registerVerificationModal .verification-modal-header-plain h2{
    max-width:none !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow-wrap:normal !important;
  }
}

/* Final lock: keep login title font-size consistent on wide web zoom-out (25%-90%) */
@media (min-width:1200px){
  #loginModal .login-modal-header-plain h2{
    font-size:40px !important;
    line-height:1.05 !important;
  }
}

/* Absolute final mobile-center lock for login header text */
@media (max-width:640px){
  #loginModal .login-modal-header-plain{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  #loginModal .login-modal-header-plain .login-modal-header-copy{
    position:static !important;
    transform:none !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 18px !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:2px !important;
  }

  #loginModal .login-modal-title-row,
  #loginModal .login-modal-header-plain h2,
  #loginModal .login-modal-header-plain .login-modal-subtitle,
  #loginModal .login-modal-header-plain .login-modal-subtitle .agency-line,
  #loginModal .login-modal-header-plain .login-modal-subtitle .system-line{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    text-align:center !important;
    justify-content:center !important;
  }
}

/* Mirror register header behavior on login (exact visual parity) */
@media (min-width:641px){
  #loginModal .login-modal-header-plain{
    padding-left:clamp(24px,4vw,64px) !important;
    padding-right:clamp(44px,5vw,84px) !important;
  }

  #loginModal .login-modal-header-plain .login-modal-header-copy{
    width:100% !important;
    max-width:calc(100% - 12px) !important;
    margin:0 auto !important;
    padding:0 clamp(8px,1.4vw,18px) !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }

  #loginModal .login-modal-title-row{
    display:flex !important;
    justify-content:center !important;
    width:100% !important;
    overflow:visible !important;
  }

  #loginModal .login-modal-header-plain h2{
    max-width:none !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow-wrap:normal !important;
    font-size:clamp(24px,2.35vw,46px) !important;
    line-height:1.05 !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  #loginModal .login-modal-header-plain .login-modal-subtitle{
    margin:6px auto 0 !important;
    max-width:24ch !important;
    text-align:center !important;
    line-height:1.2 !important;
  }

  #loginModal .login-modal-header-plain .login-modal-close{
    right:8px !important;
  }
}

@media (max-width:640px){
  #loginModal .login-modal-header-plain{
    min-height:96px !important;
    padding:8px 36px 6px !important;
  }

  #loginModal .login-modal-header-plain .login-modal-header-copy{
    max-width:100% !important;
    padding:0 !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  #loginModal .login-modal-title-row{
    display:flex !important;
    justify-content:center !important;
    width:100% !important;
  }

  #loginModal .login-modal-header-plain h2{
    font-size:clamp(17px,7.4vw,26px) !important;
    line-height:1.02 !important;
    white-space:nowrap !important;
    max-width:none !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  #loginModal .login-modal-header-plain .login-modal-subtitle{
    margin-top:3px !important;
    line-height:1.15 !important;
    text-align:center !important;
  }
}

/* Ultimate anti-right-edge cut fix (zoomed web + mobile): centered + responsive one-line fit */
#loginModal .login-modal-header-plain{
  overflow:hidden !important;
}

#loginModal .login-modal-header-plain .login-modal-header-copy{
  margin:0 auto !important;
  text-align:center !important;
}

#loginModal .login-modal-title-row{
  justify-content:center !important;
}

#loginModal .login-modal-header-plain h2{
  display:block !important;
  width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
  white-space:nowrap !important;
  max-width:100% !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

@media (max-width:900px){
  #loginModal .login-modal-header-plain{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  #loginModal .login-modal-header-plain .login-modal-header-copy{
    width:calc(100% - 72px) !important;
    max-width:calc(100% - 72px) !important;
    padding:0 !important;
  }

  #loginModal .login-modal-header-plain h2{
    font-size:20px !important;
    line-height:1.04 !important;
  }
}

@media (max-width:640px){
  #loginModal .login-modal-header-plain .login-modal-header-copy{
    width:calc(100% - 64px) !important;
    max-width:calc(100% - 64px) !important;
  }

  #loginModal .login-modal-header-plain h2{
    font-size:16px !important;
  }
}

@media (max-width:420px){
  #loginModal .login-modal-header-plain .login-modal-header-copy{
    width:calc(100% - 56px) !important;
    max-width:calc(100% - 56px) !important;
  }

  #loginModal .login-modal-header-plain h2{
    font-size:13px !important;
  }
}

/* Single source of truth: keep login heading perfectly centered at all zoom levels */
#loginModal .login-modal-header-plain{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  padding-left:16px !important;
  padding-right:16px !important;
}

#loginModal .login-modal-header-plain .login-modal-header-copy{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:min(100%,560px) !important;
  max-width:min(100%,560px) !important;
  margin:0 auto !important;
  padding:0 28px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  text-align:center !important;
}

#loginModal .login-modal-title-row,
#loginModal .login-modal-header-plain .login-modal-subtitle{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
}

#loginModal .login-modal-header-plain h2{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
  white-space:nowrap !important;
  text-wrap:nowrap !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  line-height:1.04 !important;
  font-size:clamp(20px,2.2vw,32px) !important;
}

@media (max-width:640px){
  #loginModal .login-modal-header-plain{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  #loginModal .login-modal-header-plain .login-modal-header-copy{
    width:100% !important;
    max-width:100% !important;
    padding:0 26px !important;
  }

  #loginModal .login-modal-header-plain h2{
    font-size:clamp(14px,5.8vw,24px) !important;
  }
}

/* Absolute final rule: login header text is always centered on web and mobile */
#loginModal .login-modal-header-plain{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  padding-left:16px !important;
  padding-right:16px !important;
}

#loginModal .login-modal-header-plain .login-modal-header-copy{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:0 48px !important; /* symmetric space, includes room for close icon */
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

#loginModal .login-modal-title-row,
#loginModal .login-modal-header-plain .login-modal-subtitle{
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

#loginModal .login-modal-header-plain h2{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
  white-space:nowrap !important;
  text-wrap:nowrap !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

@media (max-width:640px){
  #loginModal .login-modal-header-plain .login-modal-header-copy{
    padding:0 36px !important;
  }
}

/* Ultimate center fix: keep login header text exactly centered at all sizes */
#loginModal .login-modal-header-plain{
  position:relative !important;
}

#loginModal .login-modal-header-plain .login-modal-header-copy{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  width:calc(100% - 96px) !important;
  max-width:calc(100% - 96px) !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

#loginModal .login-modal-title-row,
#loginModal .login-modal-header-plain .login-modal-subtitle,
#loginModal .login-modal-header-plain h2{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
}

@media (max-width:640px){
  #loginModal .login-modal-header-plain .login-modal-header-copy{
    width:calc(100% - 84px) !important;
    max-width:calc(100% - 84px) !important;
  }
}

/* Canonical responsive login modal (final override) */
#loginModal.login-modal{
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(12px,2.4vw,28px) !important;
}

#loginModal .login-modal-dialog{
  width:min(100%,860px) !important;
  max-height:min(calc(100dvh - 40px),820px) !important;
  overflow:hidden !important;
  border-radius:28px !important;
}

#loginModal .login-card-modal-split{
  display:grid !important;
  grid-template-columns:minmax(300px,360px) minmax(0,1fr) !important;
  min-height:auto !important;
}

#loginModal .login-modal-visual{
  display:flex !important;
}

#loginModal .login-modal-panel{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

#loginModal .login-modal-header-plain{
  position:relative !important;
  min-height:132px !important;
  padding:12px 44px 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#loginModal .login-modal-header-plain .login-modal-header-copy{
  position:static !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  transform:none !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  text-align:center !important;
}

#loginModal .login-modal-title-row,
#loginModal .login-modal-header-plain .login-modal-subtitle{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
}

#loginModal .login-modal-header-plain h2{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
  white-space:nowrap !important;
  text-wrap:nowrap !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  font-size:clamp(22px,2.1vw,34px) !important;
  line-height:1.05 !important;
}

#loginModal .login-modal-header-plain .login-modal-subtitle{
  margin-top:2px !important;
  line-height:1.2 !important;
}

#loginModal .login-modal-header-plain .login-modal-close{
  top:6px !important;
  right:8px !important;
}

@media (min-width:641px) and ((max-width:1100px) or (max-height:760px)){
  #loginModal .login-modal-dialog{
    width:min(100%,760px) !important;
    max-height:calc(100dvh - 28px) !important;
  }

  #loginModal .login-card-modal-split{
    grid-template-columns:1fr !important;
  }

  #loginModal .login-modal-visual{
    display:none !important;
  }
}

@media (max-width:640px){
  #loginModal.login-modal{
    padding:10px !important;
  }

  #loginModal .login-modal-dialog{
    width:min(100%,520px) !important;
    max-height:calc(100dvh - 20px) !important;
    border-radius:22px !important;
  }

  #loginModal .login-card-modal-split{
    grid-template-columns:1fr !important;
  }

  #loginModal .login-modal-visual{
    display:none !important;
  }

  #loginModal .login-modal-header-plain{
    min-height:98px !important;
    padding:8px 36px 6px !important;
  }

  #loginModal .login-modal-header-plain h2{
    font-size:clamp(18px,7vw,30px) !important;
    line-height:1.02 !important;
  }

  #loginModal .login-modal-header-plain .login-modal-subtitle{
    line-height:1.15 !important;
    margin-top:2px !important;
  }
}

/* Absolute final reset for 400%-500%: remove all offset sources and hard-center heading/subtitle */
@media (max-width:640px){
  #loginModal .login-modal-header-plain{
    padding-left:16px !important;
    padding-right:16px !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
  }

  #loginModal .login-modal-header-plain .login-modal-header-copy{
    position:static !important;
    transform:none !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  #loginModal .login-modal-title-row,
  #loginModal .login-modal-header-plain .login-modal-subtitle,
  #loginModal .login-modal-header-plain h2{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
    text-align:center !important;
  }

  #loginModal .login-modal-header-plain h2{
    font-size:clamp(14px,6vw,24px) !important;
    line-height:1.03 !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
}

/* Absolute final center fix (web): identical centered width for title + subtitle */
@media (min-width:641px){
  #loginModal .login-modal-header-plain .login-modal-header-copy{
    width:calc(100% - 120px) !important;
    max-width:calc(100% - 120px) !important;
    margin:0 auto !important;
    padding:0 !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }

  #loginModal .login-modal-title-row,
  #loginModal .login-modal-header-plain .login-modal-subtitle{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  #loginModal .login-modal-header-plain h2{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    text-align:center !important;
  }
}

/* Final parity lock: make login heading behave like register heading at all zoom levels */
@media (min-width:641px){
  #loginModal .login-modal-header-plain{
    padding-left:clamp(24px,4vw,64px) !important;
    padding-right:clamp(44px,5vw,84px) !important;
  }

  #loginModal .login-modal-header-plain .login-modal-header-copy{
    width:100% !important;
    max-width:calc(100% - 12px) !important;
    margin:0 auto !important;
    padding:0 clamp(8px,1.4vw,18px) !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }

  #loginModal .login-modal-title-row{
    display:flex !important;
    justify-content:center !important;
    width:100% !important;
    overflow:visible !important;
  }

  #loginModal .login-modal-header-plain h2{
    max-width:none !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow-wrap:normal !important;
    font-size:clamp(24px,2.35vw,46px) !important;
    line-height:1.05 !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  #loginModal .login-modal-header-plain .login-modal-subtitle{
    margin:6px auto 0 !important;
    max-width:24ch !important;
    text-align:center !important;
    line-height:1.2 !important;
  }

  #loginModal .login-modal-header-plain .login-modal-close{
    right:8px !important;
  }
}

@media (max-width:640px){
  #loginModal .login-modal-header-plain{
    min-height:96px !important;
    padding:8px 36px 6px !important;
  }

  #loginModal .login-modal-header-plain h2{
    white-space:nowrap !important;
    max-width:none !important;
    font-size:clamp(17px,7.4vw,26px) !important;
    line-height:1.02 !important;
    text-align:center !important;
    margin:0 auto !important;
  }

  #loginModal .login-modal-header-plain .login-modal-subtitle{
    margin-top:3px !important;
    line-height:1.15 !important;
    text-align:center !important;
  }
}

/* Extra lock for extreme web zoom (400%-500%): keep login heading stable like register */
@media (max-width:640px){
  #loginModal .login-modal-header-plain .login-modal-header-copy{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 8px !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }

  #loginModal .login-modal-title-row{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    margin:0 auto !important;
  }

  #loginModal .login-modal-header-plain h2{
    max-width:calc(100% - 24px) !important;
    font-size:clamp(14px,6.2vw,24px) !important;
    line-height:1.03 !important;
    margin:0 auto !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
}

@media (max-width:420px){
  #loginModal .login-modal-header-plain{
    padding:8px 28px 6px !important;
  }

  #loginModal .login-modal-header-plain h2{
    max-width:calc(100% - 18px) !important;
    font-size:clamp(12px,5.4vw,20px) !important;
  }
}

/* Extreme zoom (400%-500%) true-center lock for login heading */
@media (max-width:640px){
  #loginModal .login-modal-header-plain{
    position:relative !important;
    min-height:116px !important;
    padding:8px 14px 6px !important;
  }

  #loginModal .login-modal-header-plain .login-modal-header-copy{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
    width:calc(100% - 120px) !important;
    max-width:calc(100% - 120px) !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    text-align:center !important;
  }

  #loginModal .login-modal-title-row,
  #loginModal .login-modal-header-plain .login-modal-subtitle{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  #loginModal .login-modal-header-plain h2{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    text-align:center !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    font-size:clamp(14px,5.8vw,24px) !important;
    line-height:1.03 !important;
  }

  #loginModal .login-modal-header-plain .login-modal-subtitle{
    line-height:1.12 !important;
  }

  #loginModal .login-modal-header-plain .login-modal-close{
    top:4px !important;
    right:6px !important;
  }
}

/* Final 400%-500% parity lock: preserve centered, one-line, fully visible login heading */
@media (max-width:640px){
  #loginModal .login-modal-header-plain{
    padding:10px 24px 8px !important;
  }

  #loginModal .login-modal-header-plain .login-modal-header-copy{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 18px !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }

  #loginModal .login-modal-title-row{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    margin:0 auto !important;
  }

  #loginModal .login-modal-header-plain h2{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    text-align:center !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    font-size:clamp(18px,7vw,30px) !important;
    line-height:1.02 !important;
  }

  #loginModal .login-modal-header-plain .login-modal-subtitle{
    width:100% !important;
    max-width:100% !important;
    margin:6px auto 0 !important;
    text-align:center !important;
  }
}

/* Final web centering fix (25%-110%): keep login title away from right edge and perfectly centered */
@media (min-width:641px){
  #loginModal .login-modal-header-plain .login-modal-header-copy{
    padding-left:48px !important;
    padding-right:64px !important;
    box-sizing:border-box !important;
  }

  #loginModal .login-modal-title-row{
    width:100% !important;
    padding-left:16px !important;
    padding-right:24px !important;
    box-sizing:border-box !important;
    justify-content:center !important;
  }

  #loginModal .login-modal-header-plain h2{
    max-width:calc(100% - 112px) !important;
    margin:0 auto !important;
    text-align:center !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow-wrap:normal !important;
    font-size:clamp(20px,2vw,28px) !important;
  }
}

/* True center lock (Word-style): title/subtitle centered on the same exact axis at any zoom */
#loginModal .login-modal-header-plain{
  position:relative !important;
  padding-left:32px !important;
  padding-right:32px !important;
}

#loginModal .login-modal-header-plain .login-modal-header-copy{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:0 32px !important;
  box-sizing:border-box !important;
  display:grid !important;
  justify-items:center !important;
  align-content:center !important;
  text-align:center !important;
}

#loginModal .login-modal-title-row,
#loginModal .login-modal-header-plain .login-modal-subtitle{
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  justify-self:center !important;
  text-align:center !important;
}

#loginModal .login-modal-header-plain h2{
  display:inline-block !important;
  margin:0 auto !important;
  text-align:center !important;
}

/* High-zoom fallback: keep login title one-line, centered, and always visible */
@media (min-width:641px) and ((max-width:1100px) or (max-height:760px)){
  #loginModal .login-modal-header-plain .login-modal-header-copy{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 clamp(10px,2vw,20px) !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }

  #loginModal .login-modal-title-row{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    overflow:visible !important;
  }

  #loginModal .login-modal-header-plain h2{
    max-width:calc(100% - 56px) !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    margin:0 auto !important;
    text-align:center !important;
    font-size:clamp(8px,1.6vw,16px) !important;
    line-height:1.05 !important;
  }
}

/* Extreme zoom lock (effective mobile viewport): keep full "WELCOME TO HRIS" visible on one line */
@media (max-width:640px){
  #loginModal .login-modal-header-plain{
    padding-left:28px !important;
    padding-right:28px !important;
  }

  #loginModal .login-modal-title-row{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    overflow:visible !important;
  }

  #loginModal .login-modal-header-plain h2{
    max-width:calc(100% - 64px) !important;
    margin:0 auto !important;
    text-align:center !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    font-size:clamp(10px,3.2vw,14px) !important;
    line-height:1.02 !important;
  }
}

/* Final lock: keep login title font size consistent across web zoom levels */
@media (min-width:641px){
  #loginModal .login-modal-header-plain h2{
    font-size:30px !important;
    line-height:1.05 !important;
    max-width:calc(100% - 64px) !important;
    margin:0 auto !important;
    text-align:center !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
}

/* Final centering lock: keep "Welcome to LTO HRIS" perfectly centered at any zoom */
#loginModal .login-modal-header-plain{
  display:flex !important;
  justify-content:center !important;
}

#loginModal .login-modal-header-plain .login-modal-header-copy{
  width:calc(100% - 64px) !important;
  max-width:calc(100% - 64px) !important;
  margin:0 auto !important;
  padding-left:32px !important;
  padding-right:32px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

#loginModal .login-modal-title-row{
  width:100% !important;
  margin:0 auto !important;
  display:flex !important;
  justify-content:center !important;
}

#loginModal .login-modal-header-plain h2{
  max-width:100% !important;
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

#loginModal .login-modal-header-plain .login-modal-subtitle{
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

@media (max-width:640px){
  #loginModal .login-modal-header-plain h2{
    font-size:20px !important;
    max-width:calc(100% - 64px) !important;
  }
}

/* Final web-range axis lock (25%-110%): title and subtitle share the exact center line */
@media (min-width:641px){
  #loginModal .login-modal-header-plain{
    padding-left:36px !important;
    padding-right:36px !important;
  }

  #loginModal .login-modal-header-plain .login-modal-header-copy{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 36px !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }

  #loginModal .login-modal-title-row,
  #loginModal .login-modal-header-plain .login-modal-subtitle{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  #loginModal .login-modal-header-plain h2{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    text-align:center !important;
    font-size:clamp(20px,2.1vw,30px) !important;
    line-height:1.05 !important;
  }
}

/* Final register modal sizing: never occupy the whole viewport */
@media (min-width:641px){
  #registerModal.login-modal{
    align-items:center !important;
    justify-content:center !important;
    padding:clamp(16px,3vw,34px) !important;
  }

  #registerModal .register-modal-dialog{
    width:min(100%,860px) !important;
    max-height:min(calc(100dvh - 52px),820px) !important;
    margin:0 auto !important;
    overflow:hidden !important;
    border-radius:28px !important;
  }

  #registerModal .register-modal-panel{
    max-height:min(calc(100dvh - 52px),820px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
}

/* Final compact register modal: keep full form + password rules viewable */
#registerModal .register-modal-dialog{
  max-height:calc(100dvh - 36px) !important;
}

#registerModal .register-modal-panel{
  max-height:calc(100dvh - 36px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

#registerModal .login-modal-header-plain{
  min-height:116px !important;
  padding:12px 42px 10px !important;
}

#registerModal .register-modal-body{
  padding:8px 18px 14px !important;
}

#registerModal .register-form-modal{
  gap:8px 12px !important;
}

#registerModal .register-input-wrap .login-input-shell{
  min-height:50px !important;
  padding:10px 14px !important;
  border-radius:12px !important;
}

#registerModal .register-input-wrap input{
  min-height:20px !important;
  padding-top:14px !important;
  font-size:13px !important;
  line-height:1.25 !important;
}

#registerModal .register-input-wrap .login-floating-label{
  font-size:13px !important;
}

#registerModal .register-input-wrap input:focus + .login-floating-label,
#registerModal .register-input-wrap input:not(:placeholder-shown) + .login-floating-label{
  top:7px !important;
  font-size:9px !important;
}

#registerModal .register-form-modal .password-validation-indicator{
  margin-top:2px !important;
  padding-top:6px !important;
}

#registerModal .register-form-modal .password-strength-progress{
  height:4px !important;
  margin-bottom:6px !important;
}

#registerModal .register-form-modal .password-strength-alert{
  margin-bottom:6px !important;
  font-size:11px !important;
  line-height:1.25 !important;
  gap:8px !important;
}

#registerModal .register-form-modal .password-validation-title{
  margin-bottom:6px !important;
  font-size:12px !important;
}

#registerModal .register-form-modal .password-validation-list{
  gap:4px !important;
}

#registerModal .register-form-modal .password-validation-item{
  gap:6px !important;
  font-size:11px !important;
}

#registerModal .register-form-modal .validation-icon{
  width:15px !important;
  height:15px !important;
  font-size:9px !important;
}

#registerModal .register-form-modal .validation-text{
  font-size:11px !important;
  line-height:1.2 !important;
}

#registerModal .register-submit-btn-modal{
  min-height:44px !important;
  margin-top:2px !important;
}

/* Register modal: smaller input icons */
#registerModal .register-input-wrap .login-input-icon{
  flex:0 0 18px !important;
  width:18px !important;
  height:18px !important;
}

#registerModal .register-input-wrap .login-input-icon svg,
#registerModal .register-input-wrap .login-input-icon img{
  width:18px !important;
  height:18px !important;
}

@media (max-width:640px){
  #registerModal .register-input-wrap .login-input-icon{
    flex:0 0 16px !important;
    width:16px !important;
    height:16px !important;
  }

  #registerModal .register-input-wrap .login-input-icon svg,
  #registerModal .register-input-wrap .login-input-icon img{
    width:16px !important;
    height:16px !important;
  }
}

/* Final compact login modal */
#loginModal .login-modal-dialog{
  width:min(100%,780px) !important;
  max-height:calc(100dvh - 32px) !important;
  border-radius:24px !important;
}

#loginModal .login-modal-panel{
  max-height:calc(100dvh - 32px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

#loginModal .login-modal-header-plain{
  min-height:108px !important;
  padding:10px 38px 8px !important;
}

#loginModal .login-modal-body-plain{
  padding:8px 18px 14px !important;
}

#loginModal .login-input-shell{
  min-height:52px !important;
  padding:10px 14px !important;
  border-radius:12px !important;
}

#loginModal .login-input-wrap-modal input{
  min-height:20px !important;
  padding-top:14px !important;
  font-size:13px !important;
}

#loginModal .login-floating-label{
  font-size:13px !important;
}

#loginModal .login-submit-btn-modal{
  min-height:46px !important;
  margin-top:4px !important;
}

@media (max-width:640px){
  #loginModal.login-modal{
    padding:10px !important;
  }

  #loginModal .login-modal-dialog{
    width:min(100%,500px) !important;
    max-height:calc(100dvh - 20px) !important;
    border-radius:20px !important;
  }

  #loginModal .login-modal-header-plain{
    min-height:96px !important;
    padding:8px 34px 6px !important;
  }

  #loginModal .login-modal-header-plain h2{
    font-size:clamp(16px,6.6vw,24px) !important;
  }
}

/* Final title size tweak: smaller "Welcome to LTO HRIS" */
#loginModal .login-modal-header-plain h2{
  font-size:clamp(18px,1.9vw,26px) !important;
}

/* Zoomed web view (>100% effective): keep auth modal buttons away from bottom edge */
@media (min-width:641px) and ((max-width:1366px) or (max-height:860px)){
  #loginModal .login-modal-panel > .login-modal-body-plain,
  #registerModal .register-modal-panel > .register-modal-body,
  #forgotPasswordModal .forgot-modal-panel > .login-modal-body-plain{
    padding-bottom:max(32px, env(safe-area-inset-bottom)) !important;
  }

  #loginModal .login-submit-btn-modal,
  #registerModal .register-submit-btn-modal,
  #forgotPasswordModal .login-submit-btn-modal{
    margin-bottom:10px !important;
  }
}

/* Forgot-password title: keep on one line */
#forgotPasswordModal .login-modal-header-plain h2{
  white-space:nowrap !important;
  text-wrap:nowrap !important;
  max-width:none !important;
}

/* Match forgot-password bottom breathing room on zoomed web view for login + register */
@media (min-width:641px) and ((max-width:1366px) or (max-height:860px)){
  #loginModal .login-modal-panel > .login-modal-body-plain{
    padding-bottom:max(36px, env(safe-area-inset-bottom)) !important;
  }

  #registerModal .register-modal-panel > .register-modal-body{
    padding-bottom:max(36px, env(safe-area-inset-bottom)) !important;
  }

  #loginModal .login-submit-btn-modal,
  #registerModal .register-submit-btn-modal{
    margin-bottom:12px !important;
  }
}

/* Final lock: copy forgot-password bottom spacing behavior to login/register on zoomed web */
@media (min-width:641px) and ((max-width:1366px) or (max-height:860px)){
  #loginModal .login-modal-body-plain{
    padding-bottom:max(42px, env(safe-area-inset-bottom)) !important;
  }

  #registerModal .register-modal-body{
    padding-bottom:max(42px, env(safe-area-inset-bottom)) !important;
  }

  #loginModal .login-submit-btn-modal-split{
    margin-bottom:14px !important;
  }

  #registerModal .register-submit-btn-modal{
    margin-bottom:14px !important;
  }
}

/* Absolute web lock: keep auth modal action buttons away from bottom edge at any zoom */
@media (min-width:641px){
  #loginModal .login-modal-body-plain,
  #registerModal .register-modal-body,
  #forgotPasswordModal .login-modal-body-plain,
  #twoFaModal .verification-modal-body,
  #registerVerificationModal .verification-modal-body{
    padding-bottom:max(42px, env(safe-area-inset-bottom)) !important;
  }

  #loginModal .login-submit-btn-modal-split,
  #registerModal .register-submit-btn-modal,
  #forgotPasswordModal .login-submit-btn-modal-split,
  #twoFaModal .verification-primary-btn,
  #registerVerificationModal .verification-primary-btn{
    margin-bottom:14px !important;
  }
}

/* Desktop zoom lock: still apply bottom spacing even when zoom triggers narrow CSS width */
@media (hover:hover) and (pointer:fine){
  #loginModal .login-modal-panel > .login-modal-body-plain,
  #registerModal .register-modal-panel > .register-modal-body,
  #forgotPasswordModal .forgot-modal-panel > .login-modal-body-plain,
  #twoFaModal .verification-modal-panel > .verification-modal-body,
  #registerVerificationModal .verification-modal-panel > .verification-modal-body{
    padding-bottom:max(42px, env(safe-area-inset-bottom)) !important;
  }

  #loginModal .login-submit-btn-modal-split,
  #registerModal .register-submit-btn-modal,
  #forgotPasswordModal .login-submit-btn-modal-split,
  #twoFaModal .verification-primary-btn,
  #registerVerificationModal .verification-primary-btn{
    margin-bottom:14px !important;
  }
}

/* Normal desktop view: add extra bottom spacing under register action area */
@media (min-width:1025px){
  #registerModal .register-modal-body{
    padding-bottom:30px !important;
  }

  #registerModal .register-submit-btn-modal{
    margin-bottom:12px !important;
  }
}

/* Normal desktop (commonly 100% zoom): move register action area slightly lower */
@media (min-width:1200px) and (min-height:760px) and (hover:hover) and (pointer:fine){
  #registerModal .register-login-row{
    margin-top:16px !important;
  }

  #registerModal .register-submit-btn-modal{
    margin-top:14px !important;
  }
}

/* Register modal: make password eye toggle icon match other input icons */
#registerModal .register-input-wrap .login-password-toggle{
  width:18px !important;
  height:18px !important;
}

#registerModal .register-input-wrap .login-password-icon,
#registerModal .register-input-wrap .login-password-icon svg{
  width:18px !important;
  height:18px !important;
}

@media (max-width:640px){
  #registerModal .register-input-wrap .login-password-toggle{
    width:16px !important;
    height:16px !important;
  }

  #registerModal .register-input-wrap .login-password-icon,
  #registerModal .register-input-wrap .login-password-icon svg{
    width:16px !important;
    height:16px !important;
  }
}

/* Login + Forgot modal: match icon sizes with register modal */
#loginModal .login-input-wrap-modal .login-input-icon,
#forgotPasswordModal .login-input-wrap-modal .login-input-icon{
  flex:0 0 18px !important;
  width:18px !important;
  height:18px !important;
}

#loginModal .login-input-wrap-modal .login-input-icon svg,
#loginModal .login-input-wrap-modal .login-input-icon img,
#forgotPasswordModal .login-input-wrap-modal .login-input-icon svg,
#forgotPasswordModal .login-input-wrap-modal .login-input-icon img{
  width:18px !important;
  height:18px !important;
}

#loginModal .login-input-wrap-modal .login-password-toggle,
#forgotPasswordModal .login-input-wrap-modal .login-password-toggle{
  width:18px !important;
  height:18px !important;
}

#loginModal .login-input-wrap-modal .login-password-icon,
#loginModal .login-input-wrap-modal .login-password-icon svg,
#forgotPasswordModal .login-input-wrap-modal .login-password-icon,
#forgotPasswordModal .login-input-wrap-modal .login-password-icon svg{
  width:18px !important;
  height:18px !important;
}

@media (max-width:640px){
  #loginModal .login-input-wrap-modal .login-input-icon,
  #forgotPasswordModal .login-input-wrap-modal .login-input-icon{
    flex:0 0 16px !important;
    width:16px !important;
    height:16px !important;
  }

  #loginModal .login-input-wrap-modal .login-input-icon svg,
  #loginModal .login-input-wrap-modal .login-input-icon img,
  #forgotPasswordModal .login-input-wrap-modal .login-input-icon svg,
  #forgotPasswordModal .login-input-wrap-modal .login-input-icon img{
    width:16px !important;
    height:16px !important;
  }

  #loginModal .login-input-wrap-modal .login-password-toggle,
  #forgotPasswordModal .login-input-wrap-modal .login-password-toggle{
    width:16px !important;
    height:16px !important;
  }

  #loginModal .login-input-wrap-modal .login-password-icon,
  #loginModal .login-input-wrap-modal .login-password-icon svg,
  #forgotPasswordModal .login-input-wrap-modal .login-password-icon,
  #forgotPasswordModal .login-input-wrap-modal .login-password-icon svg{
    width:16px !important;
    height:16px !important;
  }
}

/* Final lock: reduce input + password icon size in login/forgot/register modals */
#loginModal .login-input-wrap-modal .login-input-icon,
#forgotPasswordModal .login-input-wrap-modal .login-input-icon,
#registerModal .register-input-wrap .login-input-icon{
  flex:0 0 16px !important;
  width:16px !important;
  height:16px !important;
}

#loginModal .login-input-wrap-modal .login-input-icon svg,
#loginModal .login-input-wrap-modal .login-input-icon img,
#forgotPasswordModal .login-input-wrap-modal .login-input-icon svg,
#forgotPasswordModal .login-input-wrap-modal .login-input-icon img,
#registerModal .register-input-wrap .login-input-icon svg,
#registerModal .register-input-wrap .login-input-icon img,
#loginModal .login-password-icon,
#loginModal .login-password-icon svg,
#forgotPasswordModal .login-password-icon,
#forgotPasswordModal .login-password-icon svg,
#registerModal .register-input-wrap .login-password-icon,
#registerModal .register-input-wrap .login-password-icon svg{
  width:16px !important;
  height:16px !important;
}

@media (max-width:640px){
  #loginModal .login-input-wrap-modal .login-input-icon,
  #forgotPasswordModal .login-input-wrap-modal .login-input-icon,
  #registerModal .register-input-wrap .login-input-icon{
    flex:0 0 14px !important;
    width:14px !important;
    height:14px !important;
  }

  #loginModal .login-input-wrap-modal .login-input-icon svg,
  #loginModal .login-input-wrap-modal .login-input-icon img,
  #forgotPasswordModal .login-input-wrap-modal .login-input-icon svg,
  #forgotPasswordModal .login-input-wrap-modal .login-input-icon img,
  #registerModal .register-input-wrap .login-input-icon svg,
  #registerModal .register-input-wrap .login-input-icon img,
  #loginModal .login-password-icon,
  #loginModal .login-password-icon svg,
  #forgotPasswordModal .login-password-icon,
  #forgotPasswordModal .login-password-icon svg,
  #registerModal .register-input-wrap .login-password-icon,
  #registerModal .register-input-wrap .login-password-icon svg{
    width:14px !important;
    height:14px !important;
  }
}

/* Register modal only: keep email/password icons slightly smaller */
#registerModal .register-input-wrap .login-input-icon{
  flex:0 0 14px !important;
  width:14px !important;
  height:14px !important;
}

#registerModal .register-input-wrap .login-input-icon svg,
#registerModal .register-input-wrap .login-input-icon img,
#registerModal .register-input-wrap .login-password-icon,
#registerModal .register-input-wrap .login-password-icon svg{
  width:14px !important;
  height:14px !important;
}

@media (max-width:640px){
  #registerModal .register-input-wrap .login-input-icon{
    flex:0 0 12px !important;
    width:12px !important;
    height:12px !important;
  }

  #registerModal .register-input-wrap .login-input-icon svg,
  #registerModal .register-input-wrap .login-input-icon img,
  #registerModal .register-input-wrap .login-password-icon,
  #registerModal .register-input-wrap .login-password-icon svg{
    width:12px !important;
    height:12px !important;
  }
}

/* Password icons: slightly larger to visually match other field icons */
#loginModal .login-input-wrap-modal:has(input[type="password"]) .login-input-icon img,
#forgotPasswordModal .login-input-wrap-modal:has(input[type="password"]) .login-input-icon img,
#registerModal .register-input-wrap:has(input[type="password"]) .login-input-icon img{
  width:20px !important;
  height:20px !important;
}

@media (max-width:640px){
  #loginModal .login-input-wrap-modal:has(input[type="password"]) .login-input-icon img,
  #forgotPasswordModal .login-input-wrap-modal:has(input[type="password"]) .login-input-icon img,
  #registerModal .register-input-wrap:has(input[type="password"]) .login-input-icon img{
    width:18px !important;
    height:18px !important;
  }
}

/* Forgot-password modal: compact web layout */
@media (min-width:641px){
  #forgotPasswordModal .forgot-modal-dialog{
    width:min(100%, 780px) !important;
    max-height:calc(100dvh - 34px) !important;
  }

  #forgotPasswordModal .forgot-card-modal.login-card-modal-split{
    grid-template-columns:minmax(240px, 300px) minmax(0, 1fr) !important;
  }

  #forgotPasswordModal .login-modal-header-plain{
    min-height:136px !important;
    padding:14px 44px 12px 18px !important;
  }

  #forgotPasswordModal .login-modal-header-plain h2{
    font-size:clamp(36px, 3.2vw, 48px) !important;
    line-height:1.02 !important;
  }

  #forgotPasswordModal .login-modal-header-plain .login-modal-subtitle{
    margin-top:8px !important;
    font-size:clamp(12px, 1.05vw, 15px) !important;
    line-height:1.2 !important;
  }

  #forgotPasswordModal .forgot-modal-panel > .login-modal-body-plain{
    width:min(calc(100% - 36px), 500px) !important;
    margin:0 auto !important;
  }

  #forgotPasswordModal .login-modal-body-plain{
    padding:10px 20px 24px !important;
  }

  #forgotPasswordModal .login-modal-role-band{
    margin-bottom:10px !important;
    padding-bottom:6px !important;
    font-size:11px !important;
  }

  #forgotPasswordModal .login-input-shell{
    min-height:56px !important;
    padding:10px 14px !important;
    border-radius:14px !important;
  }

  #forgotPasswordModal .login-input-wrap-modal input{
    min-height:22px !important;
    padding-top:13px !important;
    font-size:14px !important;
    line-height:1.25 !important;
  }

  #forgotPasswordModal .login-floating-label{
    font-size:14px !important;
  }

  #forgotPasswordModal .login-modal-actions-row,
  #forgotPasswordModal .login-modal-actions-row-split{
    margin-top:4px !important;
  }

  #forgotPasswordModal .login-submit-btn-modal-split{
    min-height:50px !important;
    margin-top:6px !important;
    border-radius:16px !important;
  }
}

/* Register email verification modal: hide envelope/check hero icon */
#registerVerificationModal .verification-hero-icon{
  display:none !important;
}

/* Forgot-password normal desktop: keep split view */
@media (hover:hover) and (pointer:fine) and (min-width:1201px) and (min-height:761px){
  #forgotPasswordModal .forgot-card-modal.login-card-modal-split{
    grid-template-columns:minmax(210px,280px) minmax(0,1fr) !important;
  }

  #forgotPasswordModal .login-modal-visual{
    display:flex !important;
  }

  #forgotPasswordModal .login-modal-visual-content{
    width:min(100%,280px) !important;
    min-height:300px !important;
  }

  #forgotPasswordModal .forgot-modal-dialog{
    width:min(100%,780px) !important;
  }
}

/* Forgot-password zoomed/constrained desktop: show form-only */
@media (hover:hover) and (pointer:fine) and (min-width:641px) and ((max-width:1200px) or (max-height:760px)){
  #forgotPasswordModal .forgot-card-modal.login-card-modal-split{
    grid-template-columns:1fr !important;
  }

  #forgotPasswordModal .login-modal-visual{
    display:none !important;
  }

  #forgotPasswordModal .forgot-modal-dialog{
    width:min(100%,780px) !important;
  }

  #forgotPasswordModal .forgot-modal-panel > .login-modal-body-plain{
    width:min(calc(100% - 28px), 500px) !important;
  }
}

/* High web zoom (e.g., 250%): hide forgot-password left visual and keep form-only */
@media (hover:hover) and (pointer:fine) and (min-resolution:2dppx){
  #forgotPasswordModal .forgot-card-modal.login-card-modal-split{
    grid-template-columns:1fr !important;
  }

  #forgotPasswordModal .login-modal-visual{
    display:none !important;
  }

  #forgotPasswordModal .forgot-modal-dialog{
    width:min(100%,640px) !important;
  }

  #forgotPasswordModal .forgot-modal-panel > .login-modal-body-plain{
    width:min(calc(100% - 28px), 500px) !important;
  }
}

/* Login modal captcha field: prevent typed text/label overlap */
#loginModal .login-captcha-input-wrap #loginModalCaptcha{
  padding-top:18px !important;
  padding-bottom:4px !important;
  line-height:1.3 !important;
}

#loginModal .login-captcha-input-wrap #loginModalCaptcha + .login-floating-label{
  top:50% !important;
  transform:translateY(-50%) !important;
  left:54px !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:.01em !important;
  color:#6c7d93 !important;
  white-space:nowrap !important;
  text-wrap:nowrap !important;
}

#loginModal .login-captcha-input-wrap:focus-within #loginModalCaptcha + .login-floating-label,
#loginModal .login-captcha-input-wrap #loginModalCaptcha:not(:placeholder-shown) + .login-floating-label{
  top:10px !important;
  transform:none !important;
  font-size:10px !important;
  font-weight:700 !important;
  color:#2b5fa5 !important;
}

@media (max-width:640px){
  #loginModal .login-captcha-input-wrap #loginModalCaptcha{
    padding-top:16px !important;
  }

  #loginModal .login-captcha-input-wrap #loginModalCaptcha + .login-floating-label{
    left:50px !important;
    font-size:12px !important;
  }
}

/* Global email input icon for public/external pages */
input[type="email"]{
  background-image:url("../img/icon-email-blue.svg") !important;
  background-repeat:no-repeat !important;
  background-position:10px center !important;
  background-size:16px 16px !important;
  padding-left:34px !important;
}

input[type="password"]{
  background-image:url("../img/icon-lock-blue.svg") !important;
  background-repeat:no-repeat !important;
  background-position:10px center !important;
  background-size:16px 16px !important;
  padding-left:34px !important;
}

/* Modal-specific email icon color (login/register/forgot password) */
#loginModal input[type="email"],
#registerModal input[type="email"],
#forgotPasswordModal input[type="email"],
#resetUpdateModal input[type="email"]{
  background-image:none !important;
  padding-left:0 !important;
}

#loginModal input[type="password"],
#registerModal input[type="password"],
#forgotPasswordModal input[type="password"],
#resetUpdateModal input[type="password"]{
  background-image:none !important;
  padding-left:0 !important;
}

/* Final lock: align floating label start with typed text in public auth modals */
#loginModal .login-input-wrap-modal:not(.login-captcha-input-wrap) .login-input-shell,
#forgotPasswordModal .login-input-wrap-modal .login-input-shell,
#registerModal .register-input-wrap .login-input-shell{
  --auth-shell-pad-x:14px;
  --auth-icon-track:20px;
  --auth-icon-gap:18px;
}

#loginModal .login-input-wrap-modal:not(.login-captcha-input-wrap) .login-floating-label,
#forgotPasswordModal .login-input-wrap-modal .login-floating-label,
#registerModal .register-input-wrap .login-floating-label{
  left:calc(var(--auth-shell-pad-x) + var(--auth-icon-track) + var(--auth-icon-gap)) !important;
}

@media (max-width:640px){
  #loginModal .login-input-wrap-modal:not(.login-captcha-input-wrap) .login-input-shell,
  #forgotPasswordModal .login-input-wrap-modal .login-input-shell,
  #registerModal .register-input-wrap .login-input-shell{
    --auth-shell-pad-x:12px;
    --auth-icon-track:18px;
    --auth-icon-gap:14px;
  }
}

/* Reset-update modal: compact layout */
#resetUpdateModal .forgot-modal-dialog{
  width:min(100%, 820px) !important;
  max-height:calc(100dvh - 28px) !important;
  margin:auto !important;
}

#resetUpdateModal .forgot-card-modal.login-card-modal-split{
  grid-template-columns:minmax(250px, 320px) minmax(0, 1fr) !important;
  min-height:auto !important;
}

#resetUpdateModal .login-modal-visual-content{
  width:min(100%, 270px) !important;
  min-height:250px !important;
  padding:8px 8px 0 !important;
}

#resetUpdateModal .login-modal-visual-logo{
  width:170px !important;
  height:170px !important;
}

#resetUpdateModal .forgot-modal-panel{
  min-height:0 !important;
}

#resetUpdateModal .login-modal-header-plain{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:150px !important;
  padding:18px 46px 18px 18px !important;
}

#resetUpdateModal .login-modal-header-plain h2{
  font-size:clamp(40px, 3vw, 54px) !important;
  line-height:1.02 !important;
  white-space:nowrap !important;
  max-width:100% !important;
  text-wrap:unset !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

#resetUpdateModal .login-modal-header-plain .login-modal-subtitle{
  margin-top:6px !important;
  font-size:clamp(12px, 1.05vw, 15px) !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
}

#resetUpdateModal .login-modal-body-plain{
  width:min(calc(100% - 34px), 540px) !important;
  margin:0 auto !important;
  padding:8px 18px 18px !important;
}

#resetUpdateModal .login-modal-role-band{
  margin:0 0 10px !important;
  padding:8px 12px !important;
  font-size:11px !important;
}

#resetUpdateModal .login-form-modal{
  gap:10px !important;
}

#resetUpdateModal .login-input-shell{
  min-height:52px !important;
  padding:10px 14px !important;
  border-radius:13px !important;
}

#resetUpdateModal .login-input-icon{
  flex:0 0 14px !important;
  width:14px !important;
  height:14px !important;
}

#resetUpdateModal .login-input-icon svg,
#resetUpdateModal .login-input-icon img{
  width:14px !important;
  height:14px !important;
}

#resetUpdateModal .login-password-toggle{
  width:26px !important;
  height:26px !important;
  right:8px !important;
  background:transparent !important;
  color:#2b5fa5 !important;
}

#resetUpdateModal .login-password-icon,
#resetUpdateModal .login-password-icon svg{
  width:16px !important;
  height:16px !important;
}

#resetUpdateModal .login-password-toggle:hover{
  background:transparent !important;
  color:#2b5fa5 !important;
}

#resetUpdateModal .login-password-toggle.is-active{
  background:transparent !important;
  color:#b67812 !important;
}

#resetUpdateModal .login-input-wrap-modal input{
  min-height:22px !important;
  padding-top:12px !important;
  font-size:14px !important;
  line-height:1.25 !important;
}

#resetUpdateModal .login-floating-label{
  font-size:14px !important;
  left:52px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}

#resetUpdateModal .login-input-wrap-modal input:focus + .login-floating-label,
#resetUpdateModal .login-input-wrap-modal input:not(:placeholder-shown) + .login-floating-label{
  top:8px !important;
  font-size:9px !important;
}

#resetUpdateModal .login-submit-btn-modal-split{
  min-height:48px !important;
  margin-top:6px !important;
  border-radius:14px !important;
}

#resetUpdateModal .login-modal-actions-row{
  margin-top:4px !important;
  justify-content:flex-end !important;
}

@media (max-width:900px){
  #resetUpdateModal .forgot-card-modal.login-card-modal-split{
    grid-template-columns:1fr !important;
  }

  #resetUpdateModal .login-modal-visual{
    display:none !important;
  }

  #resetUpdateModal .forgot-modal-dialog{
    width:min(100%, 760px) !important;
  }

  #resetUpdateModal .login-modal-header-plain{
    min-height:150px !important;
    padding:18px 18px 18px 18px !important;
  }

  #resetUpdateModal .login-modal-header-plain .login-modal-header-copy{
    width:calc(100% - 64px) !important;
    max-width:calc(100% - 64px) !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  #resetUpdateModal .login-modal-title-row{
    justify-content:center !important;
  }

  #resetUpdateModal .login-modal-header-plain h2{
    font-size:clamp(22px, 8vw, 34px) !important;
    text-align:center !important;
  }

  #resetUpdateModal .login-modal-header-plain .login-modal-subtitle{
    font-size:clamp(11px, 3.4vw, 14px) !important;
    text-align:center !important;
    display:block !important;
    width:100% !important;
  }
}

@media (max-width:640px){
  #resetUpdateModal .login-input-icon{
    flex:0 0 12px !important;
    width:12px !important;
    height:12px !important;
  }

  #resetUpdateModal .login-input-icon svg,
  #resetUpdateModal .login-input-icon img,
  #resetUpdateModal .login-password-icon,
  #resetUpdateModal .login-password-icon svg{
    width:14px !important;
    height:14px !important;
  }

  #resetUpdateModal .login-password-toggle{
    width:22px !important;
    height:22px !important;
  }
}

/* Cross-browser password input reset: keep only the app's custom eye toggle visible. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{
  display:none !important;
  width:0 !important;
  height:0 !important;
}

input[type="password"]::-webkit-credentials-auto-fill-button{
  visibility:hidden !important;
  display:none !important;
  pointer-events:none !important;
  position:absolute !important;
  right:0 !important;
}

input[type="password"]::-webkit-contacts-auto-fill-button{
  visibility:hidden !important;
  display:none !important;
  pointer-events:none !important;
  position:absolute !important;
  right:0 !important;
}

input[type="password"]::-webkit-caps-lock-indicator{
  visibility:hidden !important;
  display:none !important;
  pointer-events:none !important;
}

.login-modal .login-input-wrap-modal input:-webkit-autofill,
.login-modal .login-input-wrap-modal input:-webkit-autofill:hover,
.login-modal .login-input-wrap-modal input:-webkit-autofill:focus,
.login-modal .login-input-wrap-modal textarea:-webkit-autofill,
.login-modal .login-input-wrap-modal textarea:-webkit-autofill:hover,
.login-modal .login-input-wrap-modal textarea:-webkit-autofill:focus{
  -webkit-text-fill-color:#24344d !important;
  caret-color:#24344d !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:0 0 0 1000px transparent inset !important;
  transition:background-color 999999s ease-out 0s !important;
}

.login-modal .login-input-wrap-modal input:autofill,
.login-modal .login-input-wrap-modal textarea:autofill{
  color:#24344d !important;
  background-color:transparent !important;
}

.login-modal .login-password-toggle{
  line-height:1 !important;
  -webkit-tap-highlight-color:transparent;
}

.login-modal .login-password-toggle .login-password-icon{
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
}

.login-modal .login-password-toggle .login-password-icon-show{
  display:inline-flex !important;
}

.login-modal .login-password-toggle.is-active .login-password-icon-show{
  display:none !important;
}

.login-modal .login-password-toggle.is-active .login-password-icon-hide{
  display:inline-flex !important;
}