:root { --bg-main: #f5f7fb; --bg-card: #ffffff; --border-soft: #d2d8e5; --text-main: #0f172a; --text-muted: #4b5563; --text-soft: #6b7280; --accent: #1f4b7b; --accent-strong: #143357; --shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.06); --max-width: 1180px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; background: radial-gradient(circle at top left, #f5f7ff 0, #e7edf9 40%, #dde5f5 100%); color: var(--text-main); -webkit-font-smoothing: antialiased; } .eicon-caret-down{ display: none !important; } .page-shell { min-height: 100vh; display: flex; flex-direction: column; } .page-inner { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 24px 22px 54px; } /* HERO */ .hero-policy { border-radius: 26px; border: 1px solid var(--border-soft); background: #050815; color: #fff; overflow: hidden; box-shadow: var(--shadow-soft); margin-bottom: 24px; position: relative; } .hero-policy-inner { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr); min-height: 220px; position: relative; z-index: 2; } .hero-left { padding: 22px 22px 18px; position: relative; z-index: 3; } .hero-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: #c7d7ff; margin-bottom: 6px; } .hero-title { font-size: 26px; line-height: 1.22; margin: 0 0 8px; } .hero-sub { font-size: 13px; color: #dfe7ff; max-width: 720px; margin: 0 0 12px; } .hero-pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .hero-pill { font-size: 11px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(190, 209, 255, 0.4); background: rgba(9, 16, 35, 0.85); color: #e6eeff; display: inline-flex; align-items: center; gap: 6px; } .hero-pill-dot { width: 6px; height: 6px; border-radius: 999px; background: #5ee7ff; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .btn-primary { padding: 8px 16px; border-radius: 999px; background: linear-gradient(120deg, #3b82f6, #1d4ed8); border: none; font-size: 12px; color: #fff !important; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn-secondary { padding: 8px 14px; border-radius: 999px; border: 1px solid #c7d7ff; font-size: 12px; color: #e3ebff !important; text-decoration: none; background: rgba(7, 13, 33, 0.6); } .hero-note { font-size: 11px; color: #c4d2ff; margin-top: 4px; max-width: 720px; } .hero-right { position: relative; min-height: 210px; overflow: hidden; } .hero-right-bg { position: absolute; inset: 0; background: linear-gradient(145deg, rgba(7, 13, 33, 0.35), rgba(7, 13, 33, 0.92)), url("/wp-content/uploads/2026/07/license-application-process.png") center/cover no-repeat; } .hero-right-mask { position: absolute; inset: 0; background: radial-gradient(circle at 20% 15%, rgba(56, 189, 248, 0.28), transparent 55%), radial-gradient(circle at 80% 80%, rgba(129, 140, 248, 0.32), transparent 60%); mix-blend-mode: screen; opacity: 0.9; } .hero-right-caption { position: absolute; right: 16px; bottom: 14px; font-size: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(7, 9, 26, 0.86); border: 1px solid rgba(148, 163, 255, 0.5); color: #dde7ff; max-width: 320px; text-align: right; } /* GRID */ .two-col { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 16px; margin-bottom: 24px; } .text-block { border-radius: 18px; border: 1px solid var(--border-soft); background: var(--bg-card); box-shadow: var(--shadow-soft); padding: 16px 16px 14px; margin-bottom: 16px; font-size: 12px; color: var(--text-muted); line-height: 1.6; } .text-block h2 { font-size: 15px; font-weight: 600; color: var(--accent-strong); margin: 0 0 6px; } .text-block h3 { font-size: 13px; font-weight: 700; color: var(--accent-strong); margin: 12px 0 6px; } .text-block ul { margin: 6px 0 10px; padding-left: 18px; } .text-block li { margin-bottom: 2px; } .callout { border-radius: 14px; border: 1px solid var(--border-soft); background: linear-gradient(135deg, #f9fbff, #e9f0ff); padding: 12px 12px 10px; color: var(--text-muted); font-size: 12px; line-height: 1.55; } .callout strong { color: var(--accent-strong); } .pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .pill { font-size: 11px; padding: 4px 9px; border-radius: 999px; background: #f3f4ff; border: 1px solid #d4dcff; color: var(--text-soft); } /* Steps */ .step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; } .step-card { border-radius: 14px; border: 1px dashed var(--border-soft); background: #f8fafc; padding: 10px 10px 9px; color: var(--text-muted); } .step-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .step-title { font-size: 12px; font-weight: 800; color: var(--accent-strong); margin: 0; } .badge { font-size: 10px; padding: 4px 8px; border-radius: 999px; border: 1px solid #d4dcff; background: #f3f4ff; color: var(--text-soft); white-space: nowrap; } .step-body { font-size: 11px; color: var(--text-soft); line-height: 1.55; margin: 0; } /* Checklist grid */ .check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; } .check-card { border-radius: 14px; border: 1px dashed var(--border-soft); background: #f8fafc; padding: 10px 10px 9px; color: var(--text-muted); } .check-title { font-size: 12px; font-weight: 800; color: var(--accent-strong); margin: 0 0 4px; } .check-note { font-size: 11px; color: var(--text-soft); line-height: 1.55; margin: 0; } /* Mini form */ .mini-form { margin-top: 10px; display: grid; gap: 10px; } .field { display: grid; gap: 6px; } label { font-size: 11px; color: var(--text-soft); letter-spacing: 0.02em; } input, select, textarea { width: 100%; padding: 10px 10px; border-radius: 12px; border: 1px solid var(--border-soft); background: #fff; font-size: 12px; outline: none; } textarea { min-height: 120px; resize: vertical; } .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; } .btn-ghost { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-soft); font-size: 12px; color: var(--accent-strong); text-decoration: none; background: rgba(255, 255, 255, 0.8); display: inline-flex; align-items: center; justify-content: center; } /* Related */ .related-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; } .related-card { border-radius: 14px; border: 1px dashed var(--border-soft); background: #f8fafc; padding: 10px 10px 9px; font-size: 12px; color: var(--text-muted); text-decoration: none; display: block; } .related-title { font-size: 12px; font-weight: 700; color: var(--accent-strong); margin-bottom: 2px; } .related-note { font-size: 11px; color: var(--text-soft); } footer { margin-top: 20px; font-size: 11px; color: var(--text-soft); text-align: right; } /* Responsive */ @media (max-width: 980px) { .two-col { grid-template-columns: minmax(0, 1fr); } .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-row { grid-template-columns: minmax(0, 1fr); } .hero-policy-inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr); } } @media (max-width: 820px) { .hero-policy-inner { grid-template-columns: minmax(0, 1fr); } .hero-right { min-height: 200px; } } @media (max-width: 640px) { .page-inner { padding: 20px 14px 40px; } .hero-title { font-size: 22px; } .step-grid { grid-template-columns: minmax(0, 1fr); } .check-grid { grid-template-columns: minmax(0, 1fr); } } /* Superior refinements — original UI preserved */ .skip-link{position:absolute;left:-9999px;top:0} .skip-link:focus{left:1rem;top:1rem;z-index:9999;background:#fff;color:var(--accent-strong);padding:.65rem 1rem;border-radius:8px;box-shadow:var(--shadow-soft)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(59,130,246,.35);outline-offset:3px} .application-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px} .application-summary>div,.assessment-grid>div,.post-grid>div{border-radius:14px;border:1px solid var(--border-soft);background:#fff;box-shadow:var(--shadow-soft);padding:11px} .application-summary strong,.application-summary span,.assessment-grid strong,.assessment-grid span,.post-grid strong,.post-grid span{display:block} .application-summary strong,.assessment-grid strong,.post-grid strong{color:var(--accent-strong);font-size:11.5px;margin-bottom:3px} .application-summary span,.assessment-grid span,.post-grid span{color:var(--text-soft);font-size:10.5px;line-height:1.45} .assessment-grid,.post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px} .form-security-note{border-radius:12px;border:1px solid #f0d8a6;background:#fffaf0;color:#6b5732;padding:10px 12px;font-size:11px;margin:10px 0} .application-footer-panel{border-radius:18px;border:1px solid var(--border-soft);background:var(--bg-card);box-shadow:var(--shadow-soft);padding:14px 16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px;font-size:11px;color:var(--text-soft)} .application-footer-panel strong,.application-footer-panel span{display:block} .application-footer-panel strong{color:var(--accent-strong);margin-bottom:3px} .application-footer-panel a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:2px} @media(max-width:980px){.application-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.application-footer-panel{grid-template-columns:1fr}} @media(max-width:640px){.application-summary,.assessment-grid,.post-grid{grid-template-columns:1fr}}