/* ============================================================================
   InNova theme — design tokens + shared components.
   NOTE: milligram sets html { font-size: 62.5% }, so 1rem = 10px on this site.
   All rem values below are calibrated against that base.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Typography — Gabarito for headers, Geist for body text
   (fonts are already loaded via custom.css @import from Google Fonts).
   --------------------------------------------------------------------------- */
body {
    font-family: 'Geist', 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.tp-hero h1, .tp-hero h2, .tp-hero h3,
.tp-card-header,
.tp-section-header-title,
.tp-login-card h3,
.tp-hero-stat-value,
.tp-stat-value,
.tp-footer h4 {
    font-family: 'Gabarito', 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

:root {
    --tp-teal-900: #0a2540;
    --tp-teal-700: #0f4c5c;
    --tp-teal-500: #087e8b;
    --tp-teal-400: #2a9fae;
    --tp-teal-100: #d7edf1;

    --tp-gold-500: #c9a04a;
    --tp-gold-100: #f4e8cf;

    --tp-green-500: #16a34a;
    --tp-green-100: #dcfce7;

    --tp-amber-500: #f59e0b;
    --tp-amber-100: #fef3c7;

    --tp-red-500: #dc2626;
    --tp-red-100: #fee2e2;

    --tp-ink-900: #0f172a;
    --tp-ink-700: #334155;
    --tp-ink-500: #64748b;
    --tp-ink-300: #cbd5e1;
    --tp-ink-100: #f1f5f9;

    --tp-surface: #ffffff;
    --tp-page-bg: #f4f6f8;

    --tp-radius-sm: 6px;
    --tp-radius: 12px;
    --tp-radius-lg: 16px;

    --tp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --tp-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    --tp-shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.12);

    --tp-header-gradient: linear-gradient(135deg, var(--tp-teal-900) 0%, var(--tp-teal-700) 55%, var(--tp-teal-500) 100%);
}

/* ---------------------------------------------------------------------------
   Card
   --------------------------------------------------------------------------- */
.tp-card {
    background: var(--tp-surface);
    border-radius: var(--tp-radius-lg);
    box-shadow: var(--tp-shadow);
    border: 1px solid var(--tp-ink-100);
    margin: 16px 0;
    overflow: hidden;
}

.tp-card + .tp-card { margin-top: 20px; }

.tp-card-header {
    padding: 22px 28px;
    background: var(--tp-header-gradient);
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 14px;
}
.tp-card-header .tp-card-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-size: 1.8rem;
}

.tp-card-body {
    padding: 24px 28px;
    color: var(--tp-ink-900);
    font-size: 1.6rem;
}
.tp-card-body > :first-child { margin-top: 0; }
.tp-card-body > :last-child { margin-bottom: 0; }

/* Light / inline section header — matches the mockup's section cards. */
.tp-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 28px 12px;
    color: var(--tp-teal-700);
}
.tp-section-header-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--tp-teal-100);
    color: var(--tp-teal-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    flex-shrink: 0;
}
.tp-section-header-title {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--tp-teal-700);
    line-height: 1.1;
}
.tp-section-header-subtitle {
    font-size: 1.5rem;
    color: var(--tp-ink-500);
    margin-top: 4px;
}
.tp-section-header-actions {
    margin-left: auto;
    font-size: 1.5rem;
}
.tp-section-header-actions a {
    color: var(--tp-teal-500);
    text-decoration: none;
    font-weight: 600;
}
.tp-section-header-actions a:hover { color: var(--tp-teal-400); }

/* ---------------------------------------------------------------------------
   Hero / welcome banner
   --------------------------------------------------------------------------- */
.tp-hero {
    background: var(--tp-header-gradient);
    color: #fff;
    padding: 48px 44px;
    border-radius: var(--tp-radius-lg);
    box-shadow: var(--tp-shadow);
    margin: 24px 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.tp-hero h1,
.tp-hero h2,
.tp-hero h3 {
    color: #fff !important;
    margin: 6px 0 10px 0 !important;
    letter-spacing: 0.01em;
    font-size: 5.2rem !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

.tp-hero-subtle {
    font-size: 1.8rem;
    opacity: 0.9;
    line-height: 1.4;
}

.tp-hero-stat {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--tp-radius);
    padding: 22px 28px;
    min-width: 260px;
    text-align: right;
}

.tp-hero-stat .tp-hero-stat-label {
    font-size: 1.25rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 10px;
}

.tp-hero-stat .tp-hero-stat-value {
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

/* Hero identity block (avatar + name + email + badge). */
.tp-hero-identity {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1 1 auto;
    min-width: 0;
}

.tp-hero-avatar {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 4.4rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.05em;
    position: relative;
    flex-shrink: 0;
}

.tp-hero-avatar-badge {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tp-teal-500);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--tp-teal-900);
    font-size: 1.1rem;
}

.tp-hero-badge {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-top: 10px;
}

/* Hero info stack on the right (mockup's Account Number / Name / Member Since). */
.tp-hero-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 32px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    min-width: 260px;
}
.tp-hero-info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.tp-hero-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    font-size: 1.6rem;
}
.tp-hero-info-label {
    font-size: 1.4rem;
    opacity: 0.85;
    letter-spacing: 0.05em;
}
.tp-hero-info-value {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   Stat / summary grid
   --------------------------------------------------------------------------- */
.tp-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.tp-stat {
    background: var(--tp-surface);
    border: 1px solid var(--tp-ink-100);
    border-radius: var(--tp-radius);
    padding: 24px 26px;
    display: flex;
    gap: 20px;
    align-items: center;
    box-shadow: var(--tp-shadow-sm);
}

.tp-stat-icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tp-teal-100);
    color: var(--tp-teal-500);
    flex-shrink: 0;
    font-size: 2.6rem;
}

.tp-stat-body { min-width: 0; }

.tp-stat-value {
    font-size: 4.4rem;
    font-weight: 700;
    color: var(--tp-ink-900);
    line-height: 1;
}

.tp-stat-label {
    font-size: 1.4rem;
    color: var(--tp-ink-500);
    margin-top: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Notice / callout
   --------------------------------------------------------------------------- */
.tp-notice {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px 24px;
    border-radius: var(--tp-radius);
    background: var(--tp-teal-100);
    border-left: 4px solid var(--tp-teal-500);
    color: var(--tp-ink-700);
    margin: 16px 0;
    font-size: 1.5rem;
    line-height: 1.5;
}

.tp-notice-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--tp-teal-500);
    color: #fff;
    font-weight: 700;
    font-size: 1.6rem;
}

.tp-notice-title {
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tp-teal-700);
    display: block;
    margin-bottom: 4px;
    font-size: 1.25rem;
}

.tp-notice--important { background: var(--tp-amber-100); border-left-color: var(--tp-amber-500); }
.tp-notice--important .tp-notice-icon { background: var(--tp-amber-500); }
.tp-notice--important .tp-notice-title { color: #92400e; }

.tp-notice--danger { background: var(--tp-red-100); border-left-color: var(--tp-red-500); }
.tp-notice--danger .tp-notice-icon { background: var(--tp-red-500); }
.tp-notice--danger .tp-notice-title { color: #7f1d1d; }

.tp-notice--success { background: var(--tp-green-100); border-left-color: var(--tp-green-500); }
.tp-notice--success .tp-notice-icon { background: var(--tp-green-500); }
.tp-notice--success .tp-notice-title { color: #14532d; }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.tp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px !important;
    height: auto !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    border-radius: 999px !important;
    border: 1px solid transparent;
    background: var(--tp-teal-500);
    color: #fff !important;
    font-weight: 600;
    font-size: 1.6rem !important;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}

.tp-btn:hover {
    background: var(--tp-teal-400);
    box-shadow: var(--tp-shadow-sm);
}
.tp-btn:active { transform: translateY(1px); }

.tp-btn--ghost {
    background: transparent;
    color: var(--tp-teal-500) !important;
    border-color: var(--tp-teal-500);
}
.tp-btn--ghost:hover {
    background: var(--tp-teal-100);
    color: var(--tp-teal-700) !important;
}

.tp-btn--gold {
    background: var(--tp-gold-500);
    color: #1a1a1a !important;
}
.tp-btn--gold:hover { background: #b18a34; }

.tp-btn--sm { padding: 8px 16px; font-size: 1.4rem; }
.tp-btn--lg { padding: 16px 32px; font-size: 1.85rem; }

/* ---------------------------------------------------------------------------
   Pills / status badges
   --------------------------------------------------------------------------- */
.tp-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: var(--tp-ink-100);
    color: var(--tp-ink-700);
}
.tp-pill--success { background: var(--tp-green-100); color: #14532d; }
.tp-pill--warning { background: var(--tp-amber-100); color: #92400e; }
.tp-pill--danger  { background: var(--tp-red-100);   color: #7f1d1d; }
.tp-pill--teal    { background: var(--tp-teal-100);  color: var(--tp-teal-700); }
.tp-pill--gold    { background: var(--tp-gold-100);  color: #7c5b13; }

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */
.tp-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--tp-surface);
    border-radius: var(--tp-radius);
    overflow: hidden;
}

.tp-table thead {
    background: var(--tp-teal-900);
    color: #fff;
}

.tp-table thead th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 1.45rem;
    letter-spacing: 0.03em;
    color: #fff;
}

.tp-table tbody td {
    padding: 14px 16px;
    border-top: 1px solid var(--tp-ink-100);
    font-size: 1.55rem;
    color: var(--tp-ink-700);
}

.tp-table tbody tr:hover td { background: var(--tp-teal-100); }

/* ---------------------------------------------------------------------------
   Form field polish (opt-in via .tp-form on the wrapper)
   --------------------------------------------------------------------------- */
.tp-form label {
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--tp-ink-700);
    margin: 16px 0 8px;
}

.tp-form input[type="text"],
.tp-form input[type="email"],
.tp-form input[type="password"],
.tp-form input[type="number"],
.tp-form input[type="date"],
.tp-form input[type="datetime-local"],
.tp-form input[type="tel"],
.tp-form input[type="url"],
.tp-form select,
.tp-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--tp-ink-300);
    border-radius: var(--tp-radius-sm);
    background: var(--tp-surface);
    color: var(--tp-ink-900);
    font-size: 1.7rem;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tp-form input:focus,
.tp-form select:focus,
.tp-form textarea:focus {
    outline: none;
    border-color: var(--tp-teal-500);
    box-shadow: 0 0 0 3px rgba(8, 126, 139, 0.15);
}

/* ---------------------------------------------------------------------------
   Login page — decorative brand banner + form card (matches mockup)
   --------------------------------------------------------------------------- */
.tp-login-brandbar {
    background: var(--tp-header-gradient);
    background-color: var(--tp-teal-900);
    position: relative;
    overflow: hidden;
    padding: 60px 24px 110px;
    min-height: 260px;
    text-align: center;
    color: #fff;
    border-radius: 0 0 50% 50% / 0 0 60px 60px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.15);
    z-index: 1;
}
.tp-login-brandbar::before,
.tp-login-brandbar::after {
    content: '';
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
    pointer-events: none;
}
.tp-login-brandbar::before { left: 0; }
.tp-login-brandbar::after { right: 0; transform: scaleX(-1); }
.tp-login-brandbar img {
    max-width: 340px;
    width: 60%;
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 2;
}
.tp-login-tagline {
    margin-top: 16px;
    font-size: 2rem;
    letter-spacing: 0.03em;
    font-weight: 400;
    opacity: 0.95;
    position: relative;
    z-index: 2;
}

.tp-login-shell {
    max-width: 560px;
    margin: -40px auto 40px;
    padding: 0 20px;
    position: relative;
    z-index: 3;
}

.tp-login-card {
    background: var(--tp-surface);
    border-radius: var(--tp-radius-lg);
    box-shadow: var(--tp-shadow-lg);
    padding: 36px 40px;
}

.tp-login-card h3 {
    margin: 0 0 24px !important;
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: var(--tp-ink-900) !important;
    letter-spacing: -0.01em !important;
}

.tp-input-with-icon {
    position: relative;
    display: block;
}
/* Collapse CakePHP's .input wrapper so the icon aligns to the input only. */
.tp-input-with-icon .input {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}
.tp-input-with-icon > input,
.tp-input-with-icon .input input {
    padding-left: 48px !important;
    height: 52px !important;
    line-height: 1.4 !important;
}
.tp-input-with-icon > .tp-input-icon {
    position: absolute;
    left: 16px;
    top: 0;
    width: 24px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tp-ink-500);
    font-size: 1.7rem;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}
/* Kill browser autofill/scan buttons that mess up the layout. */
.tp-input-with-icon input::-webkit-credentials-auto-fill-button,
.tp-input-with-icon input::-webkit-strong-password-auto-fill-button {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 0 !important;
}

.tp-login-submit {
    margin-top: 24px;
    width: 100%;
    height: auto !important;
    line-height: 1.2 !important;
    padding: 18px 24px !important;
    background: var(--tp-header-gradient) !important;
    background-color: var(--tp-teal-700) !important;
    border: none !important;
    border-radius: var(--tp-radius-sm) !important;
    color: #fff !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    letter-spacing: 0.02em;
    text-transform: none !important;
}
.tp-login-submit:hover {
    filter: brightness(1.05);
}

.tp-login-links {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    font-size: 1.6rem;
    font-weight: 600;
}
.tp-login-links a {
    color: var(--tp-teal-500);
    text-decoration: none;
}
.tp-login-links a:hover { color: var(--tp-teal-400); }

/* Login-flow responsive tightening. Below tablet the brandbar's big curved
   bottom + generous padding leaves the login card marooned in dead space, so
   compact everything down and switch the footer link row to a stacked layout
   so the long "Not a Participant?" link stops crowding "Forgot Password?" */
@media (max-width: 720px) {
    .tp-login-brandbar {
        padding: 32px 20px 72px;
        min-height: 0;
        border-radius: 0 0 40% 40% / 0 0 32px 32px;
    }
    .tp-login-brandbar img { width: 55%; max-width: 260px; }
    .tp-login-tagline { margin-top: 10px; font-size: 1.6rem; }

    .tp-login-shell {
        margin: -28px auto 24px;
        padding: 0 14px;
    }
    .tp-login-card {
        padding: 24px 20px;
        border-radius: var(--tp-radius);
    }
    .tp-login-card h3 {
        font-size: 2.4rem !important;
        margin-bottom: 18px !important;
    }

    .tp-input-with-icon > input,
    .tp-input-with-icon .input input {
        height: 46px !important;
        padding-left: 42px !important;
        font-size: 1.55rem !important;
    }
    .tp-input-with-icon > .tp-input-icon {
        left: 12px;
        height: 46px;
        font-size: 1.5rem;
    }

    .tp-login-submit {
        padding: 14px 20px !important;
        font-size: 1.7rem !important;
        margin-top: 18px;
    }

    .tp-login-links {
        flex-direction: column;
        gap: 8px;
        margin-top: 18px;
        text-align: center;
        font-size: 1.45rem;
    }
}
@media (max-width: 420px) {
    .tp-login-brandbar {
        padding: 24px 16px 60px;
        border-radius: 0 0 32% 32% / 0 0 24px 24px;
    }
    .tp-login-brandbar img { width: 60%; max-width: 220px; }
    .tp-login-tagline { font-size: 1.45rem; }

    .tp-login-shell { margin-top: -24px; padding: 0 10px; }
    .tp-login-card { padding: 20px 16px; }
    .tp-login-card h3 { font-size: 2.1rem !important; }
}

/* ---------------------------------------------------------------------------
   Site footer (matches mockup — dark teal, 3-column, notice block)
   --------------------------------------------------------------------------- */
footer.tp-footer {
    background: linear-gradient(180deg, var(--tp-teal-900) 0%, #061a30 100%) !important;
    background-color: var(--tp-teal-900) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 48px 32px 24px !important;
    margin-top: 60px;
    font-size: 1.5rem;
    line-height: 1.5;
}
.tp-footer {
    background: linear-gradient(180deg, var(--tp-teal-900) 0%, #061a30 100%);
    color: rgba(255, 255, 255, 0.85);
    padding: 48px 32px 24px;
    margin-top: 60px;
    font-size: 1.5rem;
    line-height: 1.5;
}
.tp-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.tp-footer a:hover { color: #fff; }
.tp-footer-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 0;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.tp-footer-grid > div {
    padding: 0 32px;
}
.tp-footer-grid > div:first-child { padding-left: 0; }
.tp-footer-grid > div:last-child { padding-right: 0; }
.tp-footer-grid > div:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.tp-footer-brand img {
    max-width: 200px;
    margin-bottom: 16px;
    display: block;
    filter: brightness(1.05);
}
.tp-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 1.5rem;
}
.tp-footer-contact div {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tp-footer-contact .fa {
    color: var(--tp-gold-500);
    width: 20px;
    text-align: center;
    font-size: 1.4rem;
}
.tp-footer h4 {
    color: var(--tp-gold-500);
    font-size: 1.7rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 16px 0;
    padding: 0;
}
.tp-footer ul { list-style: none; padding: 0; margin: 0; }
.tp-footer ul li { margin-bottom: 10px; font-size: 1.5rem; }
.tp-footer-bottom {
    max-width: 1180px;
    margin: 24px auto 0;
    text-align: center;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.7);
}
.tp-footer-bottom-links {
    margin-bottom: 8px;
}
.tp-footer-bottom-links a {
    color: var(--tp-gold-500);
    margin: 0 8px;
    font-weight: 600;
}
.tp-footer-notice {
    max-width: 1180px;
    margin: 24px auto 0;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--tp-radius);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.tp-footer-notice .tp-notice-icon {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--tp-teal-400);
}
.tp-footer-notice-title {
    color: var(--tp-teal-400);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.tp-footer-notice-body {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.3rem;
    line-height: 1.6;
}
@media (max-width: 900px) {
    /* Brand block spans the full width on top; Links + Support share a row
       below it as two side-by-side columns. Divider borders come off so the
       stacked columns don't get a weird orphan rule between them. */
    .tp-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 24px;
    }
    .tp-footer-grid > div {
        padding: 0 !important;
        border: 0 !important;
    }
    .tp-footer-brand {
        grid-column: 1 / -1;
    }
    .tp-footer-brand img { margin-left: auto; margin-right: auto; }
    .tp-footer-brand .tp-footer-contact { align-items: center; text-align: center; }
    .tp-footer-brand .tp-footer-contact div { justify-content: center; }
}
@media (max-width: 720px) {
    footer.tp-footer,
    .tp-footer {
        padding: 32px 20px 20px !important;
        margin-top: 40px;
    }
    .tp-footer h4 {
        font-size: 1.5rem;
        letter-spacing: 0.1em;
        margin-bottom: 12px;
    }
    .tp-footer ul li { font-size: 1.4rem; margin-bottom: 8px; }
    .tp-footer-brand img { max-width: 160px; }
    .tp-footer-contact { font-size: 1.4rem; }

    .tp-footer-bottom {
        margin-top: 20px;
        font-size: 1.3rem;
    }
    .tp-footer-bottom-links a {
        display: inline-block;
        margin: 4px 6px;
    }

    .tp-footer-notice {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 18px 16px;
        gap: 10px;
    }
    .tp-footer-notice-body { font-size: 1.2rem; }
}
@media (max-width: 480px) {
    /* Below phone landscape, drop to a single stacked column so the short
       link lists don't crush into two narrow gutters. */
    .tp-footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }
    .tp-footer ul li { text-align: center; }
}

/* ---------------------------------------------------------------------------
   Participant sidebar layout — matches the dashboard mockup
   --------------------------------------------------------------------------- */
/* Kill the parallax background image entirely for participant pages so it
   doesn't bleed through the footer or content. */
html:has(.tp-with-sidenav) .parallax,
html:has(.tp-with-sidenav) main.parallax {
    background: transparent !important;
    background-image: none !important;
    background-attachment: initial !important;
    min-height: 0 !important;
}
html:has(.tp-with-sidenav) .parallax::before {
    display: none !important;
    content: none !important;
}

/* Fixed sidebar + margin-offset content. Keeps sidebar out of the flow so its
   height never caps the content column, and the footer flows naturally below. */
.tp-with-sidenav {
    background: var(--tp-page-bg);
    position: relative;
    display: block;
    clear: both;
    overflow: visible;
}
/* Nuclear footer override — no ambiguity about background or spacing. */
body footer.tp-footer,
html body footer.tp-footer {
    position: static !important;
    display: block !important;
    clear: both !important;
    margin-top: 80px !important;
    background-color: #0a2540 !important;
    background-image: none !important;
    background-attachment: scroll !important;
    color: #fff !important;
    opacity: 1 !important;
}
.tp-sidenav {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    background: #fff;
    border-right: 1px solid var(--tp-ink-100);
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 50;
}
.tp-sidenav-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 100%;
}
.tp-sidenav-inner > ul { flex: 1 1 auto; }
.tp-sidenav-brand {
    padding: 4px 20px 24px;
    text-align: center;
}
.tp-sidenav-brand img {
    max-width: 160px;
    display: inline-block;
}
.tp-sidenav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1 1 auto;
}
.tp-sidenav ul li a,
.tp-sidenav-signout a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    color: var(--tp-ink-900);
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.tp-sidenav ul li a i,
.tp-sidenav ul li a .fa,
.tp-sidenav-signout a i,
.tp-sidenav-signout a .fa {
    width: 20px;
    text-align: center;
    font-size: 1.6rem;
}
.tp-sidenav ul li a:hover {
    background: var(--tp-teal-100);
    color: var(--tp-teal-700);
}
.tp-sidenav ul li a.is-active {
    background: var(--tp-teal-100);
    color: var(--tp-teal-700);
    border-left-color: var(--tp-teal-500);
    font-weight: 600;
}
.tp-sidenav-signout {
    padding: 12px 0;
    border-top: 1px solid var(--tp-ink-100);
}
.tp-sidenav-signout a {
    color: var(--tp-red-500);
}
.tp-with-sidenav-content {
    --tp-sidenav-w: 240px;
    --tp-gutter: 32px;
    margin-left: var(--tp-sidenav-w);
    min-width: 0;
    padding: 0 var(--tp-gutter) 120px;
    overflow: visible;
}
/* Footer also offset so it doesn't slide under the fixed sidebar.
   Only applied when the sidebar is present (participant view). Custom
   properties don't inherit across siblings, so the token is declared
   here too — the mobile media query overrides both places at once. */
.tp-with-sidenav ~ footer.tp-footer {
    --tp-sidenav-w: 240px;
    margin-left: var(--tp-sidenav-w);
}
/* Full-width white top bar inside the participant content column. */
.tp-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    padding: 18px var(--tp-gutter);
    background: #fff;
    border-bottom: 1px solid var(--tp-ink-100);
    color: var(--tp-ink-900);
    /* Bleed to sidebar + page edges */
    margin-left: calc(-1 * var(--tp-gutter));
    margin-right: calc(-1 * var(--tp-gutter));
    margin-bottom: 0;
}
.tp-topbar-account,
.tp-topbar-bell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--tp-ink-900);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
    transition: background 0.15s ease;
}
.tp-topbar-account:hover,
.tp-topbar-bell:hover { background: var(--tp-ink-100); }
.tp-topbar-account .fa,
.tp-topbar-bell .fa { color: var(--tp-ink-700); font-size: 2rem; }
.tp-topbar-bell {
    width: 44px; height: 44px; padding: 0;
    justify-content: center;
    position: relative;
}
.tp-topbar-bell-dot {
    position: absolute;
    top: 8px; right: 10px;
    width: 9px; height: 9px;
    background: var(--tp-teal-500);
    border-radius: 50%;
    border: 2px solid #fff;
}

/* Make hero blocks bleed to the sidebar edge and page edge, matching the mockup.
   Flatten ALL corners so the block sits flush against the sidebar on the left
   and the page edge on the right. */
.tp-with-sidenav-content .tp-hero,
.tp-with-sidenav-content .tp-bal-hero {
    margin-top: 0;
    margin-left: calc(-1 * var(--tp-gutter));
    margin-right: calc(-1 * var(--tp-gutter));
    border-radius: 0;
    box-shadow: none;
}

/* Kill milligram/custom.css max-width caps inside the sidebar layout so
   the main content actually fills the remaining page width. */
.tp-with-sidenav-content main.parallax,
.tp-with-sidenav-content main.parallax .container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.tp-with-sidenav-content main.parallax {
    background: transparent !important;
    padding-top: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}
.tp-with-sidenav-content main.parallax::before {
    display: none !important;
    content: none !important;
}
@media (max-width: 768px) {
    .tp-with-sidenav-content {
        --tp-sidenav-w: 0px;
        --tp-gutter: 16px;
    }
    .tp-with-sidenav ~ footer.tp-footer { --tp-sidenav-w: 0px; }
    .tp-sidenav {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding: 12px;
    }
    .tp-sidenav-brand { display: none; }
    .tp-sidenav ul { display: flex; }
    .tp-sidenav ul li a,
    .tp-sidenav-signout a { border-left: none; border-bottom: 3px solid transparent; padding: 10px 14px; }
    .tp-sidenav ul li a.is-active { border-left: none; border-bottom-color: var(--tp-teal-500); }
    .tp-sidenav-signout { border-top: none; }
}

/* ---------------------------------------------------------------------------
   Legacy .button tune-up
   --------------------------------------------------------------------------- */
.button.tp-primary,
button.tp-primary,
input[type='submit'].tp-primary {
    background: var(--tp-teal-500);
    border-color: var(--tp-teal-500);
}
.button.tp-primary:hover,
button.tp-primary:hover,
input[type='submit'].tp-primary:hover {
    background: var(--tp-teal-400);
    border-color: var(--tp-teal-400);
}