/* ==========================================================================
   Quant Apprenticeship Program — /apprenticeship
   Single hero panel with an animated gradient-mesh canvas background.
   ========================================================================== */

:root {
    --appr-base-1: #0a1f6b;
    --appr-base-2: #0d2f9e;
    --appr-base-3: #071744;
    --appr-violet: #6d3aed;
    --appr-violet-dark: #4f2ad9;
}

html.appr-html {
    background-color: #071744;
}

/* Page scrollbar, matched to the sidebar nav's barely-there treatment.
   The extra :not()s aren't decoration: when logged in this page also loads
   styles.css, whose `html:not(.mc-standalone):not(.phf-standalone)` rule
   paints the scrollbar Quant Guild blue and outranks a plain `html.appr-html`.
   Repeating them here wins on specificity instead of resorting to !important. */
html.appr-html:not(.mc-standalone):not(.phf-standalone) {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

body.appr-page {
    color-scheme: dark;
    margin: 0;
    min-height: 100vh;
    background-color: #071744;
    color: #eef2ff;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow-x: hidden;
}

/* WebKit fallback, mirroring .sidebar nav's 6px translucent-white bar. */
html.appr-html::-webkit-scrollbar {
    width: 6px;
}

html.appr-html::-webkit-scrollbar-track {
    background: transparent;
}

html.appr-html::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    transition: background 0.18s ease;
}

html.appr-html:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
}

/* styles.css gives standard pages native blue arrow buttons; they'd read as
   opaque chrome against this page's dark canvas, so they're removed here. */
html.appr-html::-webkit-scrollbar-button,
html.appr-html::-webkit-scrollbar-button:single-button {
    display: none;
}

/* Author `display` rules outrank the UA stylesheet's [hidden] { display: none },
   so state-toggled elements below need this to stay hidden. */
body.appr-page [hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Public (logged-out) top nav

   The bar itself lives in public_top_nav.css, shared with every other
   marketing page. Only the space it reserves is a page concern.
   -------------------------------------------------------------------------- */
body.appr-page:not(.appr-page--app-nav) {
    --appr-public-nav-offset: var(--qg-topnav-offset);
    padding-top: var(--appr-public-nav-offset);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.appr-wrap {
    width: 100%;
}

/* Full-bleed inside the app shell: the panel owns the whole content column. */
.appr-page--app-nav .desktop-container.appr-app-shell {
    display: block;
    height: auto;
    min-height: 100vh;
    background: transparent;
}

.appr-page--app-nav .main-content.appr-main-content {
    padding: 0 !important;
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden;
    background: transparent !important;
    border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   Panel + animated background
   -------------------------------------------------------------------------- */
.appr-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* Fills the viewport below whichever nav is showing. The custom property is
       only defined in the logged-out (public nav) case; logged-in falls back to 0. */
    min-height: calc(100vh - var(--appr-public-nav-offset, 0px));
    min-height: calc(100dvh - var(--appr-public-nav-offset, 0px));
    background:
        radial-gradient(120% 120% at 50% 0%, var(--appr-base-2) 0%, var(--appr-base-1) 45%, var(--appr-base-3) 100%);
}

.appr-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
}

/* Keeps text contrast stable no matter where the orbs drift. */
.appr-canvas-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(90% 70% at 50% 42%, rgba(4, 14, 48, 0.55) 0%, rgba(4, 14, 48, 0.2) 45%, rgba(4, 14, 48, 0.66) 100%);
}

.appr-grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(75% 65% at 50% 45%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(75% 65% at 50% 45%, #000 0%, transparent 78%);
}

.appr-panel-inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    padding: 4rem 1.75rem 3.5rem;
}

/* --------------------------------------------------------------------------
   Hero copy
   -------------------------------------------------------------------------- */
.appr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.1rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.appr-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22);
    animation: apprPulse 2.4s ease-in-out infinite;
}

@keyframes apprPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.82); }
}

/* nowrap keeps the rocket on the same flex line as the wordmark; the text
   itself still wraps internally if the viewport gets tight. */
.appr-title {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 0 0.55rem;
    font-size: clamp(1.75rem, 4.6vw, 3.1rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #fff;
}

/* The emoji is already full-color and drawn tilted, so the old amber tint,
   -15deg rotation and glow are all dropped. Emoji glyphs run large for their
   point size, so it's scaled down to sit evenly with the wordmark. */
.appr-title-icon {
    flex-shrink: 0;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji',
        'Twemoji Mozilla', sans-serif;
    font-size: 0.85em;
    line-height: 1;
}

.appr-title-text {
    min-width: 0;
}

.appr-subtitle {
    margin: 0 0 1.5rem;
    font-size: clamp(1.05rem, 2.4vw, 1.45rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
}

.appr-lead {
    margin: 0 0 1.6rem;
    max-width: 640px;
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
}

.appr-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin: 0 0 2.25rem;
    padding: 0;
    list-style: none;
}

.appr-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.appr-chip-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   Form card
   -------------------------------------------------------------------------- */
.appr-card {
    position: relative;
    width: 100%;
    /* Sized so the "100% secure / hate spam" line fits on one line. */
    max-width: 500px;
    padding: 1.75rem 1.75rem 1.35rem;
    border-radius: 16px;
    background: #fff;
    box-shadow:
        0 24px 70px rgba(3, 12, 40, 0.45),
        0 2px 8px rgba(3, 12, 40, 0.25);
}

.appr-card-glow {
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(109, 58, 237, 0.55), rgba(34, 211, 238, 0.45));
    filter: blur(16px);
    opacity: 0.7;
}

.appr-card-title {
    margin: 0 0 1.15rem;
    font-size: 1.12rem;
    font-weight: 700;
    color: #111827;
    text-align: center;
}

.appr-field {
    margin-bottom: 0.7rem;
}

/* Placeholders carry the labelling visually; labels stay for screen readers. */
.appr-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.appr-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.72rem 0.85rem;
    border-radius: 7px;
    border: 1px solid #d5d9e0;
    background: #fff;
    color: #111827;
    font-family: inherit;
    font-size: 0.92rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.appr-input::placeholder {
    color: #9ca3af;
}

.appr-input:focus {
    outline: none;
    border-color: var(--appr-violet);
    box-shadow: 0 0 0 3px rgba(109, 58, 237, 0.16);
}

/* Autofill: the browser's tint would only cover the phone input and not the
   country button beside it, splitting the row in two. An opaque inset shadow
   is the only way to repaint an autofilled background, so every filled field
   keeps the resting style. */
.appr-input:-webkit-autofill,
.appr-input:-webkit-autofill:hover,
.appr-input:-webkit-autofill:active {
    -webkit-text-fill-color: #111827;
    -webkit-box-shadow: 0 0 0 100px #fff inset;
    box-shadow: 0 0 0 100px #fff inset;
    caret-color: #111827;
    font-family: inherit;
    font-size: 0.92rem;
    /* Chrome animates its tint back in on blur; outrunning it keeps ours. */
    transition: background-color 100000s ease-in-out 0s;
}

.appr-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111827;
    -webkit-box-shadow: 0 0 0 100px #fff inset, 0 0 0 3px rgba(109, 58, 237, 0.16);
    box-shadow: 0 0 0 100px #fff inset, 0 0 0 3px rgba(109, 58, 237, 0.16);
}

.appr-input:autofill {
    filter: none;
}

.appr-phone-row {
    display: flex;
    gap: 0.5rem;
}

.appr-input--phone {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Country code picker (custom listbox: native selects can't show flags) --- */
.appr-country {
    position: relative;
    flex: 0 0 auto;
}

.appr-country-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 100%;
    padding: 0.72rem 0.6rem 0.72rem 0.7rem;
    border-radius: 7px;
    border: 1px solid #d5d9e0;
    background: #fff;
    color: #111827;
    font-family: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.appr-country-btn:hover {
    border-color: #b9bfc9;
}

.appr-country-btn:focus-visible,
.appr-country.is-open .appr-country-btn {
    outline: none;
    border-color: var(--appr-violet);
    box-shadow: 0 0 0 3px rgba(109, 58, 237, 0.16);
}

.appr-flag {
    display: block;
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.12);
    flex-shrink: 0;
}

.appr-country-dial {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.appr-country-caret {
    font-size: 0.65rem;
    color: #9ca3af;
    transition: transform 0.18s ease;
}

.appr-country.is-open .appr-country-caret {
    transform: rotate(180deg);
}

.appr-country-pop {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    width: 268px;
    max-width: calc(100vw - 3rem);
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 18px 44px rgba(3, 12, 40, 0.22);
    overflow: hidden;
    animation: apprPopIn 0.14s ease-out;
}

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

.appr-country-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid #eef0f3;
}

.appr-country-search-wrap i {
    position: absolute;
    left: 1.1rem;
    font-size: 0.75rem;
    color: #9ca3af;
    pointer-events: none;
}

.appr-country-search {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem 0.45rem 1.85rem;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #111827;
    font-family: inherit;
    font-size: 0.85rem;
}

.appr-country-search:focus {
    outline: none;
    border-color: var(--appr-violet);
    background: #fff;
}

.appr-country-list {
    max-height: 232px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #d6d3e8 transparent;
}

/* Slim, track-less scrollbar tinted to the form's violet — scoped to this
   list so no other scrollbar on the page is affected. */
.appr-country-list::-webkit-scrollbar {
    width: 6px;
}

.appr-country-list::-webkit-scrollbar-track {
    background: transparent;
    margin: 0.3rem 0;
}

.appr-country-list::-webkit-scrollbar-thumb {
    background-color: #d6d3e8;
    border-radius: 999px;
    transition: background-color 0.18s ease;
}

.appr-country-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--appr-violet);
}

.appr-country-list:hover {
    scrollbar-color: #c3bde0 transparent;
}

.appr-country-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.55rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #111827;
    transition: background 0.14s ease;
}

.appr-country-option:hover,
.appr-country-option:focus,
.appr-country-option.is-selected {
    background: #f3f0ff;
    outline: none;
}

.appr-country-option.is-selected {
    font-weight: 600;
}

.appr-country-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appr-country-option-dial {
    flex-shrink: 0;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.appr-country-empty {
    margin: 0;
    padding: 0.85rem 0.6rem;
    text-align: center;
    font-size: 0.82rem;
    color: #9ca3af;
}

.appr-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    margin-top: 0.65rem;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--appr-violet) 0%, var(--appr-violet-dark) 100%);
    color: #fff;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(109, 58, 237, 0.32);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.appr-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(109, 58, 237, 0.42);
}

.appr-submit:disabled {
    cursor: default;
    opacity: 0.75;
}

.appr-submit.is-loading .appr-submit-label::after {
    content: '';
    display: inline-block;
    width: 0.9em;
    text-align: left;
    animation: apprDots 1.2s steps(4, end) infinite;
}

@keyframes apprDots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

.appr-submit-icon {
    font-size: 0.85em;
    transition: transform 0.18s ease;
}

.appr-submit:hover:not(:disabled) .appr-submit-icon {
    transform: translateX(3px);
}

.appr-form-status {
    margin: 0.7rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    text-align: center;
}

.appr-form-status:empty {
    margin: 0;
}

.appr-form-status--error {
    color: #dc2626;
}

.appr-form-status--success {
    color: #059669;
}

.appr-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #6b7280;
    text-align: center;
    white-space: nowrap;
}

/* line-height: 1 collapses the icon's line box to the glyph itself, so flex
   centering aligns the padlock's ink with the text rather than its leading.
   The translate is an optical nudge: the glyph carries descender space at the
   bottom of its em box, which leaves it sitting low against the text. */
.appr-secure i {
    flex-shrink: 0;
    color: #9ca3af;
    font-size: 0.7rem;
    line-height: 1;
    transform: translateY(-0.1em);
}

/* --------------------------------------------------------------------------
   Success state
   -------------------------------------------------------------------------- */
.appr-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem 0 0.75rem;
    animation: apprRise 0.4s ease-out;
}

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

.appr-success-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.35);
}

.appr-success-title {
    margin: 0 0 0.55rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
}

.appr-success-copy {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #4b5563;
    max-width: 380px;
}

/* --------------------------------------------------------------------------
   Footnote
   -------------------------------------------------------------------------- */
.appr-footnote {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.75rem 0 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}

.appr-footnote i {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* quant_courses_mobile.css hides .desktop-container and paints
       .mobile-container #f8f9fa. Same shell escape hatch PHF/Letters use:
       keep the panel visible and collapse the nav wrapper to zero height. */
    .appr-page--app-nav .mobile-container {
        display: block !important;
        min-height: 0 !important;
        height: 0;
        overflow: visible;
        background: transparent !important;
    }

    .appr-page--app-nav .desktop-container.appr-app-shell {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .appr-page--app-nav .appr-app-shell .sidebar {
        display: none;
    }

    .appr-page--app-nav .appr-app-shell .main-content.appr-main-content {
        margin-left: 0 !important;
        width: 100% !important;
        margin-top: 64px;
        min-height: 0;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Logged-in mobile sits below the fixed 64px mobile top nav. */
    .appr-page--app-nav .appr-panel {
        min-height: calc(100vh - 64px);
        min-height: calc(100dvh - 64px);
    }

    /* On short phones, vertical centering + overflow:hidden clips the hero
       and leaves the white form card looking like a block at the top. */
    .appr-panel {
        align-items: flex-start;
    }

    .appr-panel-inner {
        padding: 2.75rem 1.15rem 2.75rem;
    }

    .appr-grid-overlay {
        background-size: 44px 44px;
    }

    .appr-chips {
        gap: 0.45rem;
        margin-bottom: 1.75rem;
    }

    .appr-chip {
        padding: 0.42rem 0.85rem;
        font-size: 0.78rem;
    }

    .appr-card {
        max-width: none;
        padding: 1.5rem 1.25rem 1.25rem;
    }

    /* Narrow screens can't fit the secure line on one line — let it wrap
       rather than overflow the card. Once it's two lines, the padlock should
       sit on the first line instead of floating in the middle of the block. */
    .appr-secure {
        white-space: normal;
        align-items: flex-start;
    }

    .appr-secure i {
        margin-top: 0.25em;
    }
}

@media (max-width: 400px) {
    .appr-country-btn {
        padding-left: 0.55rem;
        padding-right: 0.45rem;
        gap: 0.3rem;
        font-size: 0.85rem;
    }

    .appr-country-pop {
        width: 240px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .appr-eyebrow-dot,
    .appr-success,
    .appr-country-pop,
    .appr-submit.is-loading .appr-submit-label::after {
        animation: none;
    }

    .appr-submit {
        transition: none;
        animation: none;
    }
}