* { box-sizing: border-box; }
html { min-width: 320px; background: var(--color-background); }
body { margin: 0; color: var(--color-text); background: var(--color-background); font: 400 15px/1.55 var(--font-body); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
[hidden] { display: none !important; }

.page-shell { position: relative; min-height: 100vh; overflow: hidden; }
.page-shell::before, .page-shell::after { position: fixed; z-index: 0; display: block; content: ""; border-radius: 50%; pointer-events: none; }
.page-shell::before { width: 480px; height: 480px; top: -230px; right: -130px; background: rgba(211, 226, 239, .48); }
.page-shell::after { width: 360px; height: 360px; bottom: -180px; left: -150px; background: rgba(231, 240, 233, .42); }
.site-header, .main-content, .site-footer { position: relative; z-index: 1; }
.site-header { display: flex; align-items: center; justify-content: space-between; width: min(1100px, calc(100% - 64px)); margin: 0 auto; padding: 28px 0 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-logo-wrap { display: grid; width: 50px; height: 50px; place-items: center; overflow: hidden; border: 1px solid rgba(20, 52, 91, .12); border-radius: 15px; background: white; box-shadow: 0 6px 18px rgba(20, 52, 91, .08); }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; gap: 0; }
.brand-name { color: var(--color-primary); font: 700 15px/1.3 var(--font-display); letter-spacing: -.01em; }
.brand-subtitle { color: var(--color-muted); font-size: 12px; }
.header-status { display: inline-flex; align-items: center; gap: 7px; color: var(--color-muted); font-size: 12px; font-weight: 600; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 4px var(--color-success-soft); }
.main-content { display: flex; justify-content: center; width: min(100%, 1100px); margin: 0 auto; padding: 18px 24px 48px; }
.application-card { position: relative; width: min(100%, var(--card-width)); min-height: 590px; overflow: hidden; border: 1px solid rgba(20, 52, 91, .10); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 24px 60px var(--color-shadow); }
.card-branding { position: absolute; inset: 0 0 auto; height: 164px; overflow: hidden; pointer-events: none; }
.watermark { position: absolute; display: block; border: 1px solid rgba(20, 52, 91, .05); border-radius: 50%; }
.watermark-one { width: 270px; height: 270px; top: -170px; right: -50px; }
.watermark-two { width: 170px; height: 170px; top: -105px; right: 30px; }
.progress-area { position: relative; padding: 27px 38px 22px; border-bottom: 1px solid #edf1f5; background: linear-gradient(180deg, #fcfdff 0%, #fff 100%); }
.progress-meta { display: flex; justify-content: space-between; margin-bottom: 13px; color: var(--color-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
#progress-percent { color: var(--color-primary); }
.progress-indicator { display: flex; align-items: center; width: 100%; min-width: 0; }
.progress-item { display: flex; min-width: 0; flex: 1 1 0; align-items: center; }
.progress-item:last-child { flex: 0 0 auto; }
.progress-line { width: auto; min-width: 8px; height: 2px; flex: 1 1 auto; margin: 0 8px; background: #e2e8f0; }
.progress-line.is-complete { background: var(--color-primary); }
.progress-node { display: grid; width: 27px; height: 27px; place-items: center; border: 2px solid #dbe3ed; border-radius: 50%; color: var(--color-muted); background: #fff; font-size: 10px; font-weight: 700; }
.progress-node.is-active, .progress-node.is-complete { border-color: var(--color-primary); color: #fff; background: var(--color-primary); }
.progress-node.is-active { box-shadow: 0 0 0 4px var(--color-primary-soft); }
.progress-node.is-complete::after { content: "✓"; font-size: 12px; }
.progress-node.is-complete .node-number { display: none; }
.step-region { position: relative; padding: 35px 52px 38px; }
.step-view { animation: appear .25s ease-out; }
@keyframes appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.step-header { margin-bottom: 27px; }
.step-header.centered { text-align: center; }
.eyebrow { margin: 0 0 9px; color: var(--color-primary); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.step-title { margin: 0; color: var(--color-primary); font: 800 clamp(25px, 4vw, 32px)/1.2 var(--font-display); letter-spacing: -.045em; }
.step-description { max-width: 470px; margin: 11px 0 0; color: var(--color-muted); font-size: 14px; }
.centered .step-description { margin-right: auto; margin-left: auto; }
.loading-screen { display: grid; min-height: 390px; place-items: center; align-content: center; text-align: center; }
.loading-screen .step-description { max-width: 360px; }
.loading-orbit { position: relative; width: 58px; height: 58px; margin-bottom: 24px; border: 1px solid #d6e2ef; border-radius: 50%; background: var(--color-primary-soft); }
.loading-orbit::before { position: absolute; inset: 10px; border: 1px solid rgba(34, 104, 169, .20); border-radius: 50%; content: ""; }
.loading-orbit span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); animation: loading-drift 1.25s ease-in-out infinite; }
.loading-orbit span:nth-child(1) { top: 4px; left: 25px; }
.loading-orbit span:nth-child(2) { right: 7px; bottom: 11px; animation-delay: .18s; }
.loading-orbit span:nth-child(3) { bottom: 8px; left: 9px; animation-delay: .36s; }
@keyframes loading-drift { 0%, 100% { opacity: .35; transform: scale(.72); } 50% { opacity: 1; transform: scale(1); } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 14px; }
.field { min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 7px; color: var(--color-text); font-size: 12px; font-weight: 700; }
.field-label .optional { color: var(--color-muted); font-size: 11px; font-weight: 500; }
.field-hint { display: block; margin: -3px 0 7px; color: var(--color-muted); font-size: 11px; }
.text-input, .text-area { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); background: var(--color-surface); transition: border-color .15s, box-shadow .15s, background .15s; }
.text-input { min-height: 46px; padding: 0 13px; }
.text-area { min-height: 116px; padding: 12px 13px; resize: vertical; }
.text-input::placeholder, .text-area::placeholder { color: #a2afbd; }
.text-input:hover, .text-area:hover { border-color: var(--color-border-strong); }
.text-input:focus, .text-area:focus { border-color: #4380b4; outline: none; box-shadow: var(--focus-ring); }
.field.has-error .text-input, .field.has-error .text-area { border-color: var(--color-danger); background: var(--color-danger-soft); }
.error-message { display: block; min-height: 18px; margin-top: 5px; color: var(--color-danger); font-size: 11px; }
.form-stack { display: grid; gap: 19px; }
.step-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 30px; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 0 19px; color: #fff; background: var(--color-primary); font-size: 13px; font-weight: 700; transition: background .15s, transform .15s, box-shadow .15s, opacity .15s; }
.button:hover:not(:disabled) { background: var(--color-primary-deep); box-shadow: 0 8px 18px rgba(20, 52, 91, .16); transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled { opacity: .58; }
.button.secondary { border-color: var(--color-border); color: var(--color-primary); background: #fff; }
.button.secondary:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: none; }
.button.ghost { min-height: 40px; padding: 0 10px; color: var(--color-muted); background: transparent; }
.button.success-button { background: var(--color-success); }
.button .spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.upload-zone { display: block; border: 1px dashed #b9c8d8; border-radius: var(--radius-md); padding: 19px; text-align: center; color: var(--color-muted); background: var(--color-surface-muted); transition: border-color .15s, background .15s; }
.upload-zone:hover, .upload-zone.is-dragover { border-color: #4380b4; background: var(--color-primary-soft); }
.upload-zone input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.upload-icon { display: grid; width: 38px; height: 38px; place-items: center; margin: 0 auto 8px; border-radius: 11px; color: var(--color-primary); background: #fff; box-shadow: 0 3px 10px rgba(20,52,91,.08); }
.upload-icon svg { width: 19px; height: 19px; }
.upload-title { display: block; color: var(--color-primary); font-size: 12px; font-weight: 700; }
.upload-meta { display: block; margin-top: 3px; font-size: 11px; }
.upload-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 9px 10px; color: var(--color-text); background: #fff; text-align: left; font-size: 12px; }
.upload-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-file-remove { flex: 0 0 auto; border: 0; padding: 2px 4px; color: var(--color-danger); background: transparent; font-size: 11px; font-weight: 700; }
.check-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--color-muted); font-size: 13px; }
.check-list li::before { display: grid; flex: 0 0 auto; width: 17px; height: 17px; place-items: center; margin-top: 1px; border-radius: 50%; color: #fff; background: var(--color-success); content: "✓"; font-size: 10px; font-weight: 800; }
.verification-panel { display: grid; gap: 24px; border: 1px solid #e4eaf1; border-radius: var(--radius-md); padding: 19px; background: var(--color-surface-muted); }
.consent-list { display: grid; gap: 11px; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; color: var(--color-text); font-size: 12px; cursor: pointer; }
.checkbox-row input { width: 17px; height: 17px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--color-primary); }
.checkbox-row.is-error { color: var(--color-danger); }
.inline-error { margin: -10px 0 0; color: var(--color-danger); font-size: 11px; }
.animal-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 25px; align-items: start; }
.animal-copy .step-title { font-size: 27px; }
.animal-copy .step-description { font-size: 13px; }
.animal-copy .check-list { margin-top: 21px; }
.success-layout { display: grid; place-items: center; min-height: 370px; text-align: center; }
.success-mark { display: grid; width: 82px; height: 82px; place-items: center; margin-bottom: 20px; border-radius: 50%; color: #fff; background: var(--color-success); box-shadow: 0 0 0 11px var(--color-success-soft), 0 10px 25px rgba(46,157,98,.17); font-size: 39px; font-weight: 500; }
.success-layout .step-description { max-width: 410px; margin-top: 12px; }
.next-layout { display: grid; place-items: center; min-height: 370px; text-align: center; }
.next-icon { display: grid; width: 76px; height: 76px; place-items: center; margin-bottom: 21px; border-radius: 50%; color: var(--color-primary); background: var(--color-primary-soft); }
.next-icon svg { width: 37px; height: 37px; }
.next-layout .step-description { max-width: 390px; }
.alert { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; border: 1px solid #f1caca; border-radius: var(--radius-sm); padding: 11px 12px; color: var(--color-danger); background: var(--color-danger-soft); font-size: 12px; }
.alert-icon { display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--color-danger); font-size: 11px; font-weight: 700; }
.state-card { width: min(100%, 520px); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 48px 38px; background: #fff; box-shadow: 0 24px 60px var(--color-shadow); text-align: center; }
.state-icon { display: grid; width: 68px; height: 68px; place-items: center; margin: 0 auto 18px; border-radius: 50%; color: #fff; background: var(--color-danger); font-size: 28px; font-weight: 700; }
.state-card h1 { margin: 0; color: var(--color-primary); font: 800 26px/1.2 var(--font-display); letter-spacing: -.04em; }
.state-card p:not(.eyebrow) { margin: 11px auto 0; max-width: 370px; color: var(--color-muted); font-size: 14px; }
.site-footer { padding: 0 24px 28px; color: var(--color-muted); font-size: 11px; text-align: center; }
.noscript-message { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 32px; color: var(--color-primary); background: var(--color-background); font-weight: 700; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}