:root {
    --fp-blue: #253fad;
    --fp-blue-dark: #1e2f8a;
    --fp-yellow: #efd620;
    --fp-yellow-dark: #d4b71a;
    --fp-bg: #f8f9fa;
    --fp-border: #e0e1e2;
    --fp-text: #1f2430;
    --fp-muted: #4a5160;
    --fp-placeholder: #6c7383;
    --fp-tint: #eef1fb;
    --fp-tint-border: #ccd3ee;
    --fp-navy: #051133;
    --fp-navy-text: #b9c4f0;
    --fp-danger: #dc3545;
    --fp-focus-ring: 0 0 0 4px rgba(37, 63, 173, 0.25);
}

body.fp-public *,
body.fp-public *::before,
body.fp-public *::after {
    box-sizing: border-box;
}

body.fp-public {
    margin: 0;
    font-family: 'Nunito Sans', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--fp-bg);
    color: var(--fp-text);
}

.fp-public a:not(.btn, [class*="fp-btn"], .fp-cancel-link) {
    color: var(--fp-blue);
}

.fp-public a:not(.btn, [class*="fp-btn"], .fp-cancel-link):hover {
    color: var(--fp-blue-dark);
}

.fp-btn,
.fp-public .btn {
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out;
}

.fp-btn--blue,
.fp-public .btn-primary {
    background-color: var(--fp-blue);
    border-color: var(--fp-blue);
    color: #ffffff;
}

.fp-btn--blue:hover,
.fp-btn--blue:focus,
.fp-public .btn-primary:hover,
.fp-public .btn-primary:focus {
    background-color: var(--fp-blue-dark);
    border-color: var(--fp-blue-dark);
    color: #ffffff;
}

.fp-btn--yellow {
    background-color: var(--fp-yellow);
    color: var(--fp-blue);
    font-weight: 700;
}

.fp-btn--yellow:hover,
.fp-btn--yellow:focus {
    background-color: var(--fp-yellow-dark);
    color: var(--fp-blue);
}

.fp-public .btn-secondary,
.fp-public .btn-info {
    background-color: #ffffff;
    border-color: var(--fp-tint-border);
    color: var(--fp-blue);
}

.fp-public .btn-secondary:hover,
.fp-public .btn-secondary:focus,
.fp-public .btn-info:hover,
.fp-public .btn-info:focus {
    background-color: var(--fp-tint);
    border-color: var(--fp-tint-border);
    color: var(--fp-blue);
}

.fp-public .btn-link {
    text-transform: none;
    letter-spacing: 0;
    color: var(--fp-placeholder);
    text-decoration: none;
}

.fp-public .btn-link:hover {
    color: var(--fp-blue);
    text-decoration: none;
}

.fp-public .btn-sm {
    font-size: 12px;
    padding: 8px 16px;
}

.fp-public .btn:focus {
    outline: 0;
    box-shadow: var(--fp-focus-ring);
}

.fp-public input[type="text"],
.fp-public input[type="password"],
.fp-public input[type="email"],
.fp-public input[type="number"],
.fp-public input[type="tel"],
.fp-public input[type="url"],
.fp-public select,
.fp-public textarea {
    display: block;
    width: 100%;
    height: 38px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    color: var(--fp-text);
    background-color: #ffffff;
    border: 1px solid var(--fp-border);
    border-radius: 6px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.fp-public textarea {
    height: auto;
    min-height: 96px;
}

.fp-public input:focus,
.fp-public select:focus,
.fp-public textarea:focus {
    border-color: var(--fp-blue);
    outline: 0;
    box-shadow: var(--fp-focus-ring);
}

.fp-public input::placeholder,
.fp-public textarea::placeholder {
    color: var(--fp-placeholder);
    opacity: 1;
}

.fp-public input[name$="otp_token"],
.fp-public input[name$="-token"] {
    height: 52px;
    font-size: 24px;
    letter-spacing: 8px;
    text-align: center;
}

.fp-otp-boxes {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.fp-public input.fp-otp-box {
    width: 48px;
    height: 56px;
    padding: 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
}

.fp-public label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--fp-text);
    margin-bottom: 6px;
}

.fp-field {
    margin-bottom: 18px;
    text-align: left;
}

.fp-field .fp-help {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--fp-muted);
}

.fp-public .errorlist {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    font-size: 13px;
    color: var(--fp-danger);
}

.fp-form-errors {
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--fp-danger);
}

.fp-card p.fp-auth-note {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.fp-auth-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 16px;
}

.fp-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 40px;
}

.fp-card--wide {
    max-width: 560px;
}

.fp-card-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.fp-card-logo img {
    width: 110px;
    height: auto;
}

.fp-card h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--fp-blue);
    text-align: center;
    margin: 0 0 8px;
}

.fp-card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--fp-muted);
    text-align: center;
}

.fp-card--wide p {
    text-align: left;
}

.fp-card hr {
    border: 0;
    border-top: 1px solid var(--fp-border);
    margin: 20px 0;
}

.fp-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.fp-cancel-link {
    display: block;
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--fp-placeholder);
    text-decoration: none;
}

.fp-cancel-link:hover {
    color: var(--fp-blue);
}

.fp-backup-form {
    margin-top: 12px;
}

.fp-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.fp-token-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 8px 0 16px;
}

.fp-token {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 600;
    color: var(--fp-blue);
    background: var(--fp-tint);
    border: 1px solid var(--fp-tint-border);
    border-radius: 6px;
    padding: 10px 4px;
    text-align: center;
    overflow-wrap: anywhere;
}

.fp-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 40px 16px;
}

.fp-page-logo {
    width: 94px;
    height: 88px;
    margin-bottom: 16px;
}

.fp-card--page {
    max-width: none;
}

.fp-card--page h1,
.fp-card--page h2,
.fp-card--page h3,
.fp-card--page p {
    text-align: left;
}

.fp-card--page h1 {
    margin-bottom: 16px;
}

.fp-card--page h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--fp-blue);
    margin: 24px 0 8px;
}

.fp-card--page h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--fp-blue);
    margin: 24px 0 8px;
}

.fp-card--page ul {
    padding-left: 20px;
    color: var(--fp-muted);
}

.fp-card--page li {
    margin-bottom: 8px;
}

.fp-landing {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.fp-landing main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.fp-hero {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: clamp(24px, 5vh, 72px) 64px;
    background: var(--fp-bg);
}

.fp-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 600px;
}

.fp-hero h1 {
    margin: 0;
    font-size: clamp(32px, 5vh, 48px);
    line-height: 1.1;
    font-weight: 800;
    color: var(--fp-blue);
}

.fp-hero-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: clamp(14px, 2vh, 17px);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--fp-muted);
}

.fp-hero-kicker::before {
    content: "";
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--fp-yellow);
}

.fp-hero p {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--fp-muted);
    max-width: 560px;
}

.fp-hero-actions {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.fp-hero-logo {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 32px;
}

.fp-hero-logo img {
    display: block;
    width: clamp(150px, 24vh, 260px);
    height: auto;
}

.fp-services {
    padding: clamp(20px, 4vh, 56px) 64px;
    background: #ffffff;
}

.fp-services h2 {
    margin: 0 0 12px;
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: var(--fp-blue);
}

.fp-section-sub {
    margin: 0 0 clamp(16px, 3vh, 40px);
    text-align: center;
    font-size: 16px;
    color: var(--fp-muted);
}

.fp-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.fp-service-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid var(--fp-border);
    border-radius: 10px;
    padding: clamp(16px, 2.6vh, 28px);
}

.fp-service-icon {
    width: 48px;
    height: 48px;
    background: var(--fp-tint);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-service-card h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--fp-text);
}

.fp-service-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--fp-muted);
}

.fp-footer {
    background: var(--fp-navy);
    color: #ffffff;
    padding: clamp(16px, 2.6vh, 32px) 64px 16px;
}

.fp-footer-name {
    font-size: 20px;
    font-weight: 800;
}

.fp-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 12px;
    padding-top: 12px;
    font-size: 13px;
    color: var(--fp-navy-text);
}

@media (max-width: 768px) {
    .fp-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 44px 20px;
    }

    .fp-hero h1 {
        font-size: 30px;
        line-height: 1.2;
    }

    .fp-hero p {
        font-size: 16px;
    }

    .fp-hero-actions {
        flex-direction: column;
        align-self: stretch;
        gap: 12px;
    }

    .fp-hero-actions .fp-btn {
        display: block;
    }

    .fp-hero-logo {
        display: none;
    }

    .fp-services {
        padding: 44px 20px;
    }

    .fp-services h2 {
        font-size: 24px;
    }

    .fp-section-sub {
        margin-bottom: 24px;
    }

    .fp-service-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .fp-footer {
        padding: 40px 20px 24px;
    }

    .fp-card {
        padding: 28px 20px;
    }

    .fp-actions-row {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}