:root {
    --c-primary: #0A7289;
    --c-navy: #071B24;
    --c-cyan: #28D4E8;
    --c-blue: #236BFE;
    --c-ice: #F4FAFC;
    --c-white: #FFFFFF;
    --c-text: #1E252B;
    --c-muted: #6B7A86;
    --c-border: #D7E5EA;
    --radius-lg: 28px;
    --radius-md: 18px;
    --shadow-soft: 0 24px 80px rgba(7, 27, 36, 0.16);
    --ink: var(--c-text);
    --muted: var(--c-muted);
    --panel: rgba(255, 255, 255, .88);
    --panel-strong: #EAF6F9;
    --line: var(--c-border);
    --field: #F8FCFD;
    --forest: var(--c-navy);
    --moss: var(--c-primary);
    --copper: var(--c-primary);
    --amber: var(--c-cyan);
    --sky: var(--c-cyan);
    --danger: #A6382F;
    --shadow: var(--shadow-soft);
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(40, 212, 232, .20), transparent 28rem),
        radial-gradient(circle at 80% 12%, rgba(35, 107, 254, .10), transparent 24rem),
        linear-gradient(135deg, #F4FAFC 0%, #EAF6F9 44%, #DDEFF4 100%);
    font-family: "IBM Plex Sans", sans-serif;
}

h1, h2, h3, h4, h5, .brand-title, .metric-value {
    font-family: "Space Grotesk", sans-serif;
    letter-spacing: -0.03em;
}

a { color: #245b46; }

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 284px;
    padding: 24px;
    color: #fff;
    background:
        linear-gradient(160deg, rgba(7, 27, 36, .98), rgba(4, 18, 25, .98)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 9px);
    overflow-y: auto;
}

.brand-block {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 30px;
}

.brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: var(--c-navy);
    background: var(--c-cyan);
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
}

.brand-mark img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
}

.brand-title { font-size: 1.1rem; font-weight: 700; line-height: 1; }
.brand-subtitle { font-size: .84rem; color: rgba(255,255,255,.62); }

.sidebar-nav .nav-link {
    color: rgba(255,255,255,.72);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 4px;
    font-weight: 600;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,.13);
}

.sidebar-footer {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.14);
}

.main-panel {
    margin-left: 284px;
    width: calc(100% - 284px);
    padding: 32px;
}

.top-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.top-strip h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.2rem);
}

.eyebrow {
    color: var(--copper);
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.card,
.metric-card,
.table-panel,
.form-panel,
.pipeline-column,
.empty-state {
    background: rgba(255, 253, 245, .86);
    border: 1px solid rgba(227, 220, 200, .9);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.card { overflow: hidden; }
.card-header { background: rgba(246,239,217,.82); border-color: var(--line); }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card {
    padding: 18px;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.metric-label {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.metric-value {
    font-size: 2.35rem;
    font-weight: 700;
    line-height: 1;
}

.metric-hint { color: var(--muted); font-size: .9rem; }

.table-panel,
.form-panel { padding: 20px; }

.table > :not(caption) > * > * { background: transparent; }

.btn-synapse {
    color: #fff;
    background: var(--c-primary);
    border-color: var(--c-primary);
}

.btn-synapse:hover { color: #fff; background: #07596B; border-color: #07596B; }

.btn-cyan {
    color: var(--c-navy);
    background: var(--c-cyan);
    border-color: var(--c-cyan);
    font-weight: 800;
}

.btn-cyan:hover {
    color: var(--c-navy);
    background: #65E4F0;
    border-color: #65E4F0;
}

.form-control,
.form-select,
.form-check-input {
    background-color: var(--field);
    border-color: #d8cfb7;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--moss);
    box-shadow: 0 0 0 .2rem rgba(111, 139, 67, .18);
}

.pipeline-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
}

.pipeline-column { padding: 16px; min-height: 380px; }
.pipeline-column h3 { font-size: 1rem; margin-bottom: 12px; }
.pipeline-card {
    background: #fffaf0;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 10px;
}

.badge { font-weight: 700; }

.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    overflow: hidden;
    border-radius: 34px;
    background: rgba(255,253,245,.9);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
}

.login-hero {
    padding: 44px;
    color: #fff;
    background: linear-gradient(145deg, var(--forest), #0d2119);
}

.login-form { padding: 44px; }

.empty-state { padding: 28px; color: var(--muted); text-align: center; }

.ai-box {
    white-space: pre-wrap;
    background: #111f19;
    color: #f9f0db;
    border-radius: 18px;
    padding: 18px;
    font-size: .95rem;
}

@media (max-width: 1080px) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sidebar { width: 244px; }
    .main-panel { margin-left: 244px; width: calc(100% - 244px); padding: 24px; }
}

@media (max-width: 780px) {
    .app-shell { display: block; }
    .sidebar { position: relative; width: 100%; bottom: auto; }
    .main-panel { margin-left: 0; width: 100%; padding: 18px; }
    .top-strip { align-items: flex-start; flex-direction: column; }
    .metric-grid { grid-template-columns: 1fr; }
    .login-card { grid-template-columns: 1fr; }
    .login-hero, .login-form { padding: 28px; }
}

.apply-page {
    min-height: 100vh;
    color: var(--c-text);
    background:
        radial-gradient(circle at 16% 8%, rgba(40, 212, 232, .22), transparent 28rem),
        radial-gradient(circle at 84% 12%, rgba(35, 107, 254, .15), transparent 24rem),
        linear-gradient(180deg, var(--c-navy) 0 34rem, var(--c-ice) 34rem 100%);
    padding: 26px clamp(16px, 4vw, 56px) 56px;
}

.hero-circuit {
    width: min(1180px, 100%);
    margin: 0 auto 26px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 42px;
    align-items: center;
    padding-top: 52px;
}

.hero-copy {
    color: var(--c-white);
}

.apply-pill,
.apply-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: var(--c-cyan);
    background: rgba(40, 212, 232, .10);
    border: 1px solid rgba(40, 212, 232, .28);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.apply-kicker {
    color: var(--c-primary);
    background: rgba(10, 114, 137, .08);
    border-color: rgba(10, 114, 137, .16);
    margin-bottom: 10px;
}

.hero-copy h1 {
    max-width: 780px;
    margin: 18px 0;
    color: var(--c-white);
    font-size: clamp(3.4rem, 8vw, 6.8rem);
    line-height: .86;
    letter-spacing: -.08em;
}

.hero-copy p {
    max-width: 620px;
    color: rgba(255, 255, 255, .78);
    font-size: 1.12rem;
}

.signal-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;
}

.signal-timeline::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 30px;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(40,212,232,0.9) 0 12px, transparent 12px 24px);
}

.signal-step {
    position: relative;
    z-index: 1;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(18px);
}

.signal-step span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-bottom: 12px;
    color: var(--c-navy);
    background: var(--c-cyan);
    border-radius: 999px;
    font-weight: 900;
    font-size: .72rem;
}

.signal-step strong,
.signal-step small {
    display: block;
}

.signal-step small {
    color: rgba(255, 255, 255, .64);
    margin-top: 3px;
}

.circuit-visual {
    position: relative;
    min-height: 520px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 44px;
    background:
        radial-gradient(circle at center, rgba(40, 212, 232, .20), transparent 9rem),
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    box-shadow: 0 30px 100px rgba(0, 0, 0, .22);
    overflow: hidden;
}

.circuit-lines {
    position: absolute;
    inset: 26px;
    opacity: .9;
    background:
        linear-gradient(90deg, transparent 48%, rgba(40,212,232,.42) 49%, rgba(40,212,232,.42) 51%, transparent 52%),
        linear-gradient(0deg, transparent 48%, rgba(40,212,232,.32) 49%, rgba(40,212,232,.32) 51%, transparent 52%),
        radial-gradient(circle at 50% 50%, transparent 0 72px, rgba(40,212,232,.32) 73px 75px, transparent 76px),
        radial-gradient(circle at 28% 30%, transparent 0 44px, rgba(40,212,232,.24) 45px 47px, transparent 48px),
        radial-gradient(circle at 74% 72%, transparent 0 50px, rgba(40,212,232,.22) 51px 53px, transparent 54px);
}

.node {
    position: absolute;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    color: var(--c-white);
    border: 1px solid rgba(40, 212, 232, .42);
    border-radius: 32px;
    background: rgba(7, 27, 36, .84);
    box-shadow: 0 20px 60px rgba(40, 212, 232, .18);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
}

.node-main {
    width: 142px;
    height: 142px;
    left: calc(50% - 71px);
    top: calc(50% - 71px);
    color: var(--c-navy);
    background: var(--c-cyan);
}

.node-a { left: 10%; top: 12%; }
.node-b { right: 9%; top: 18%; }
.node-c { left: 13%; bottom: 14%; }
.node-d { right: 12%; bottom: 12%; }

.apply-form-shell {
    width: 100%;
    margin: 0 auto;
}

.apply-wizard-layout {
    display: grid;
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.apply-wizard-panel {
    position: sticky;
    top: 22px;
    min-height: 680px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 24px;
    color: rgba(255, 255, 255, .78);
    border: 1px solid rgba(40, 212, 232, .18);
    border-radius: 34px;
    background:
        radial-gradient(circle at 18% 8%, rgba(40, 212, 232, .24), transparent 13rem),
        linear-gradient(160deg, #061720, #0A2A36 58%, #071B24);
    box-shadow: 0 30px 90px rgba(7, 27, 36, .26);
}

.apply-wizard-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--c-white);
}

.apply-wizard-brand > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--c-navy);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--c-cyan), #9CF3FF);
    font-family: "Space Grotesk", sans-serif;
    font-weight: 900;
}

.apply-wizard-brand strong,
.apply-wizard-brand small {
    display: block;
}

.apply-wizard-brand small {
    color: rgba(255, 255, 255, .58);
    font-size: .82rem;
}

.apply-wizard-panel p {
    margin: 0;
    color: rgba(255, 255, 255, .66);
    line-height: 1.7;
}

.apply-wizard-steps {
    display: grid;
    gap: 10px;
}

.apply-wizard-step {
    appearance: none;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    padding: 12px;
    color: rgba(255, 255, 255, .68);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    background: rgba(255, 255, 255, .045);
    text-align: left;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, color .18s ease;
}

.apply-wizard-step span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .74);
    border: 1px solid rgba(40, 212, 232, .28);
    border-radius: 14px;
    background: rgba(40, 212, 232, .08);
    font-family: "Space Grotesk", sans-serif;
    font-size: .78rem;
    font-weight: 900;
}

.apply-wizard-step strong,
.apply-wizard-step small {
    display: block;
}

.apply-wizard-step strong {
    color: var(--c-white);
}

.apply-wizard-step small {
    margin-top: 2px;
    color: rgba(255, 255, 255, .52);
    font-size: .78rem;
}

.apply-wizard-step:hover,
.apply-wizard-step:focus {
    color: var(--c-white);
    border-color: rgba(40, 212, 232, .44);
    background: rgba(40, 212, 232, .08);
    outline: none;
    transform: translateY(-1px);
}

.apply-wizard-step.is-active {
    color: var(--c-white);
    border-color: rgba(40, 212, 232, .64);
    background: rgba(40, 212, 232, .14);
}

.apply-wizard-step.is-active span,
.apply-wizard-step.is-complete span {
    color: var(--c-navy);
    background: var(--c-cyan);
}

.apply-wizard-note {
    margin-top: auto;
    padding: 16px;
    border: 1px solid rgba(40, 212, 232, .18);
    border-radius: 20px;
    background: rgba(255, 255, 255, .055);
}

.apply-wizard-note strong,
.apply-wizard-note span {
    display: block;
}

.apply-wizard-note strong {
    color: var(--c-white);
    margin-bottom: 4px;
}

.apply-wizard-note span {
    color: rgba(255, 255, 255, .58);
    font-size: .9rem;
    line-height: 1.55;
}

.apply-wizard-main {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.apply-progress-shell {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(215, 229, 234, .9);
    border-radius: 24px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 16px 50px rgba(7, 27, 36, .1);
}

.apply-progress-shell span,
.apply-progress-shell strong {
    display: block;
}

.apply-progress-shell span {
    color: var(--c-muted);
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.apply-progress-shell strong {
    color: var(--c-navy);
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.18rem;
}

.apply-progress-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(215, 229, 234, .72);
}

.apply-progress-track span {
    width: 20%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--c-primary), var(--c-cyan));
    transition: width .24s ease;
}

.apply-wizard .apply-step {
    display: none;
}

.apply-wizard .apply-step.is-active {
    display: block;
    animation: stepReveal .24s ease;
}

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

.apply-card,
.apply-submit-card {
    border: 1px solid rgba(215, 229, 234, .92);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--shadow-soft);
    padding: clamp(20px, 4vw, 34px);
}

.apply-upload-card,
.apply-submit-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.upload-zone {
    min-width: min(520px, 100%);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

.modern-upload {
    position: relative;
    min-height: 330px;
    display: grid;
    place-items: center;
    gap: 18px;
    padding: clamp(24px, 6vw, 46px);
    overflow: hidden;
    text-align: center;
    border: 1.5px dashed rgba(10, 114, 137, .34);
    border-radius: 30px;
    background:
        radial-gradient(circle at 50% 24%, rgba(40, 212, 232, .2), transparent 13rem),
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(244, 250, 252, .92));
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.modern-upload::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(40, 212, 232, .12);
    border-radius: 24px;
    pointer-events: none;
}

.modern-upload:hover,
.modern-upload.is-dragging {
    border-color: var(--c-cyan);
    box-shadow: 0 24px 70px rgba(40, 212, 232, .16);
    transform: translateY(-1px);
}

.modern-upload.has-file {
    border-style: solid;
    border-color: rgba(40, 212, 232, .72);
    background:
        radial-gradient(circle at 50% 24%, rgba(40, 212, 232, .26), transparent 13rem),
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(232, 249, 252, .94));
}

.upload-dropzone-input {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-orb {
    position: relative;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background:
        radial-gradient(circle at 35% 25%, #FFFFFF, rgba(255, 255, 255, 0) 28%),
        linear-gradient(135deg, var(--c-cyan), var(--c-primary));
    box-shadow: 0 18px 46px rgba(40, 212, 232, .32);
}

.upload-orb span {
    width: 34px;
    height: 42px;
    border: 2px solid rgba(7, 27, 36, .72);
    border-radius: 8px;
    background: rgba(255, 255, 255, .5);
}

.upload-orb span::before {
    content: "";
    display: block;
    width: 14px;
    height: 2px;
    margin: 12px auto 0;
    background: rgba(7, 27, 36, .72);
    box-shadow: 0 8px 0 rgba(7, 27, 36, .48), 0 16px 0 rgba(7, 27, 36, .28);
}

.upload-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
}

.upload-copy strong {
    color: var(--c-navy);
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.45rem, 4vw, 2.2rem);
    letter-spacing: -.04em;
}

.upload-copy span {
    color: var(--c-text);
    font-weight: 800;
}

.upload-copy small {
    color: var(--c-muted);
}

.upload-file-meta {
    position: relative;
    z-index: 1;
    max-width: 100%;
    padding: 8px 14px;
    color: var(--c-primary);
    border: 1px solid rgba(40, 212, 232, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    font-size: .9rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.upload-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-top: 18px;
}

.upload-actions span {
    color: var(--c-muted);
    font-size: .92rem;
    line-height: 1.5;
}

.apply-section-head {
    margin-bottom: 18px;
}

.apply-section-head h2,
.apply-card h2,
.apply-submit-card h2 {
    margin: 0;
    color: var(--c-navy);
}

.use-case-grid,
.model-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-wide {
    grid-column: 1 / -1;
}

.skill-dropdown-wrap {
    padding: 20px;
    border: 1px solid rgba(215, 229, 234, .94);
    border-radius: 26px;
    background:
        radial-gradient(circle at 92% 4%, rgba(40, 212, 232, .16), transparent 18rem),
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(244, 250, 252, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}

.skill-picker {
    position: relative;
    width: 100%;
}

.skill-picker-trigger {
    width: 100%;
    min-height: 62px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    color: var(--c-navy);
    border: 1px solid rgba(10, 114, 137, .2);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(244, 250, 252, .94));
    font-weight: 800;
    text-align: left;
    padding: 0 18px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.skill-picker-trigger:hover,
.skill-picker-trigger:focus,
.skill-picker.is-open .skill-picker-trigger {
    border-color: var(--c-cyan);
    box-shadow: 0 0 0 .22rem rgba(40, 212, 232, .14);
}

.skill-picker-trigger:hover {
    transform: translateY(-1px);
}

.skill-trigger-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-trigger-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--c-navy);
    border-radius: 999px;
    background: rgba(40, 212, 232, .22);
    font-weight: 900;
    transition: background .18s ease, transform .18s ease;
}

.skill-picker.is-open .skill-trigger-icon {
    background: rgba(40, 212, 232, .34);
    transform: rotate(45deg);
}

.skill-picker-panel {
    position: relative;
    top: auto;
    display: none;
    margin-top: 14px;
    max-height: min(680px, 72vh);
    overflow: auto;
    padding: 18px;
    border: 1px solid rgba(40, 212, 232, .22);
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(40, 212, 232, .14), transparent 18rem),
        linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(247, 252, 253, .98));
    box-shadow: 0 20px 64px rgba(7, 27, 36, .14);
}

.skill-picker.is-open .skill-picker-panel {
    display: block;
}

.skill-picker-tools {
    position: sticky;
    top: -18px;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin: -18px -18px 16px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(215, 229, 234, .82);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
}

.skill-picker-tools .form-control {
    min-height: 42px;
    border-radius: 999px;
}

.skill-picker-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.skill-group {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(215, 229, 234, .86);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(244, 250, 252, .72));
}

.skill-group + .skill-group {
    margin-top: 0;
}

.skill-group-title {
    margin-bottom: 12px;
    color: var(--c-primary);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.skill-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    max-width: 100%;
    padding: 8px 12px;
    color: var(--c-text);
    border: 1px solid rgba(215, 229, 234, .98);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 7px 18px rgba(7, 27, 36, .045);
    cursor: pointer;
    font: inherit;
    font-size: .88rem;
    font-weight: 750;
    line-height: 1.1;
    text-align: left;
    user-select: none;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.skill-chip[hidden],
.skill-group[hidden] {
    display: none;
}

.skill-chip:hover,
.skill-chip:focus {
    border-color: rgba(40, 212, 232, .68);
    box-shadow: 0 10px 24px rgba(7, 27, 36, .08);
    outline: none;
    transform: translateY(-1px);
}

.skill-chip.is-selected {
    color: var(--c-navy);
    border-color: var(--c-cyan);
    background:
        linear-gradient(135deg, rgba(40, 212, 232, .24), rgba(10, 114, 137, .12));
    box-shadow: 0 12px 28px rgba(40, 212, 232, .16);
}

.skill-chip.is-selected::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 999px;
    background: var(--c-primary);
}

.skill-chip.autofilled {
    animation: autofillPulse 1.4s ease;
}

.selected-skill-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 48px;
    margin-top: 14px;
    padding: 12px;
    color: var(--c-muted);
    border: 1px dashed rgba(10, 114, 137, .22);
    border-radius: 18px;
    background: rgba(255, 255, 255, .7);
    font-size: .92rem;
    line-height: 1.5;
}

.selected-skill-preview.is-empty {
    align-items: center;
}

.selected-skill-preview span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    color: var(--c-navy);
    border: 1px solid rgba(40, 212, 232, .32);
    border-radius: 999px;
    background: rgba(40, 212, 232, .12);
    font-size: .82rem;
    font-weight: 800;
}

.screening-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
}

.screening-question {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    padding: 22px;
    border: 1px solid rgba(215, 229, 234, .9);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,252,.88));
}

.question-index {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--c-navy);
    border-radius: 14px;
    background: var(--c-cyan);
    font-family: "Space Grotesk", sans-serif;
    font-weight: 900;
}

.question-body .form-label {
    margin-bottom: 4px;
    font-weight: 800;
}

.question-hint {
    margin-bottom: 10px;
    color: var(--c-muted);
    font-size: .92rem;
}

.apply-card .form-control,
.apply-card .form-select,
.apply-upload-card .form-control {
    border-radius: 16px;
    min-height: 48px;
    background: #FBFEFF;
    border-color: var(--c-border);
}

.apply-card textarea.form-control {
    min-height: auto;
}

.apply-card .form-control:focus,
.apply-card .form-select:focus,
.apply-upload-card .form-control:focus {
    border-color: var(--c-cyan);
    box-shadow: 0 0 0 .22rem rgba(40, 212, 232, .18);
}

.form-control.autofilled,
.form-select.autofilled,
textarea.autofilled {
    animation: autofillPulse 1.4s ease;
}

@keyframes autofillPulse {
    0% { box-shadow: 0 0 0 0 rgba(40, 212, 232, .42); }
    70% { box-shadow: 0 0 0 10px rgba(40, 212, 232, 0); }
    100% { box-shadow: none; }
}

.apply-status {
    margin-top: 12px;
    color: var(--c-muted);
    font-weight: 700;
}

.apply-status.success { color: #087D49; }
.apply-status.error { color: var(--danger); }
.apply-status.working { color: var(--c-primary); }

.apply-checks {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.apply-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-ice);
}

.apply-final-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.apply-final-summary > div {
    padding: 18px;
    border: 1px solid rgba(215, 229, 234, .92);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,252,.88));
}

.apply-final-summary strong,
.apply-final-summary span {
    display: block;
}

.apply-final-summary strong {
    color: var(--c-navy);
    margin-bottom: 4px;
}

.apply-final-summary span {
    color: var(--c-muted);
    line-height: 1.55;
}

.apply-wizard-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(215, 229, 234, .92);
    border-radius: 24px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 16px 50px rgba(7, 27, 36, .1);
}

.apply-wizard-actions .btn:last-child {
    margin-left: auto;
}

.apply-submit-card {
    color: var(--c-white);
    background:
        radial-gradient(circle at 10% 20%, rgba(40, 212, 232, .22), transparent 20rem),
        linear-gradient(135deg, var(--c-navy), #0B2E3A);
    border-color: rgba(40, 212, 232, .22);
}

.apply-submit-card h2 { color: var(--c-white); }
.apply-submit-card p { color: rgba(255, 255, 255, .72); margin: 4px 0 0; }

@media (max-width: 980px) {
  .hero-circuit {
    grid-template-columns: 1fr;
    padding-top: 72px;
  }

  .circuit-visual {
    min-height: 420px;
  }

  .use-case-grid,
  .model-grid,
  .signal-timeline {
    grid-template-columns: 1fr;
  }

  .signal-timeline::before {
    left: 29px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(
      180deg,
      rgba(40,212,232,0.9) 0 12px,
      transparent 12px 24px
    );
  }

  .signal-step {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 12px;
  }

  .signal-step span { grid-row: span 2; margin-bottom: 0; }
  .apply-wizard-layout {
    grid-template-columns: 1fr;
  }
  .apply-wizard-panel {
    position: relative;
    top: auto;
    min-height: auto;
  }
  .apply-wizard-steps {
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .apply-progress-shell {
    grid-template-columns: 1fr;
  }
  .apply-upload-card,
  .apply-submit-card { align-items: stretch; flex-direction: column; }
  .upload-zone { grid-template-columns: 1fr; min-width: 0; width: 100%; }
  .skill-picker-panel { width: 100%; }
  .skill-picker-groups { grid-template-columns: 1fr; }
  .apply-final-summary { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .apply-page { padding: 16px 12px 36px; }

  .hero-copy h1 {
    font-size: 3rem;
  }

  .node {
    width: 88px;
    height: 88px;
    font-size: 0.72rem;
  }

  .node-main {
    width: 118px;
    height: 118px;
    left: calc(50% - 59px);
    top: calc(50% - 59px);
  }

  .circuit-lines {
    opacity: 0.6;
  }

  .node-a { left: 6%; top: 10%; }
  .node-b { right: 6%; top: 15%; }
  .node-c { left: 8%; bottom: 10%; }
  .node-d { right: 8%; bottom: 9%; }
  .apply-wizard-panel,
  .apply-progress-shell,
  .apply-wizard-actions {
    border-radius: 22px;
  }
  .apply-wizard-panel {
    padding: 18px;
  }
  .apply-wizard-steps {
    grid-template-columns: 1fr;
  }
  .apply-wizard-step {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .apply-wizard-step span {
    width: 34px;
    height: 34px;
  }
  .modern-upload {
    min-height: 270px;
    border-radius: 24px;
  }
  .upload-orb {
    width: 78px;
    height: 78px;
    border-radius: 24px;
  }
  .upload-actions,
  .apply-wizard-actions {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .apply-wizard-actions {
    display: grid;
  }
  .apply-wizard-actions .btn:last-child {
    margin-left: 0;
  }
  .screening-question {
    grid-template-columns: 1fr;
  }
  .question-index {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }
  .skill-chip-grid {
    gap: 6px;
  }
  .skill-chip {
    font-size: .84rem;
    min-height: 34px;
    padding: 7px 10px;
  }
}

/* Minimal single-screen applicant wizard */
.public-apply-body {
    background:
        radial-gradient(circle at 18% 18%, rgba(40, 212, 232, .16), transparent 18rem),
        radial-gradient(circle at 82% 12%, rgba(10, 114, 137, .10), transparent 22rem),
        linear-gradient(135deg, #F8FCFD, #EAF6F9);
}

.public-apply-body .apply-page {
    background: transparent;
}

@media (min-width: 981px) {
    .public-apply-body {
        overflow: hidden;
    }

    .public-apply-body .apply-page {
        height: 100svh;
        min-height: 100svh;
        display: grid;
        place-items: center;
        padding: 10px;
    }

    .public-apply-body .alert {
        position: fixed;
        top: 14px;
        left: 50%;
        z-index: 40;
        width: min(680px, calc(100vw - 32px));
        transform: translateX(-50%);
        box-shadow: 0 18px 52px rgba(7, 27, 36, .16);
    }

    .public-apply-body .apply-form-shell {
        width: calc(100vw - 20px);
        max-width: none;
    }

    .public-apply-body .apply-wizard-layout {
        height: calc(100svh - 20px);
        grid-template-columns: 248px minmax(0, 1fr);
        gap: 14px;
        padding: 10px;
        border: 1px solid rgba(215, 229, 234, .74);
        border-radius: 30px;
        background: rgba(255, 255, 255, .56);
        box-shadow: 0 26px 80px rgba(7, 27, 36, .14);
        backdrop-filter: blur(18px);
    }

    .public-apply-body .apply-wizard-panel {
        position: relative;
        top: auto;
        min-height: 0;
        height: 100%;
        gap: 14px;
        padding: 16px;
        border-radius: 24px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 52px rgba(7, 27, 36, .18);
    }

    .public-apply-body .apply-wizard-brand > span {
        width: 38px;
        height: 38px;
        border-radius: 14px;
    }

    .public-apply-body .apply-wizard-panel p {
        font-size: .83rem;
        line-height: 1.5;
    }

    .public-apply-body .apply-wizard-steps {
        gap: 7px;
    }

    .public-apply-body .apply-wizard-step {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 9px;
        padding: 9px;
        border-radius: 15px;
    }

    .public-apply-body .apply-wizard-step span {
        width: 30px;
        height: 30px;
        border-radius: 11px;
        font-size: .7rem;
    }

    .public-apply-body .apply-wizard-step strong {
        font-size: .88rem;
    }

    .public-apply-body .apply-wizard-step small {
        font-size: .7rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .public-apply-body .apply-wizard-note {
        padding: 12px;
        border-radius: 16px;
    }

    .public-apply-body .apply-wizard-note span {
        font-size: .78rem;
    }

    .public-apply-body .apply-wizard-main {
        height: 100%;
        min-height: 0;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: 10px;
    }

    .public-apply-body .apply-progress-shell {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 14px;
        padding: 12px 14px;
        border-radius: 18px;
        box-shadow: 0 12px 34px rgba(7, 27, 36, .07);
    }

    .public-apply-body .apply-progress-shell span {
        font-size: .68rem;
    }

    .public-apply-body .apply-progress-shell strong {
        font-size: 1rem;
    }

    .public-apply-body .apply-progress-track {
        height: 7px;
    }

    .public-apply-body .apply-card {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        padding: 16px;
        border-radius: 22px;
        background: rgba(255, 255, 255, .82);
        box-shadow: 0 18px 52px rgba(7, 27, 36, .1);
        backdrop-filter: blur(16px);
    }

    .public-apply-body .apply-wizard .apply-step.is-active {
        display: flex;
        flex-direction: column;
        animation: minimalStepIn .26s ease both;
    }

    .public-apply-body .apply-section-head {
        margin-bottom: 12px;
    }

    .public-apply-body .apply-section-head h2,
    .public-apply-body .apply-card h2 {
        font-size: clamp(1.35rem, 2vw, 1.8rem);
    }

    .public-apply-body .apply-section-head p.text-muted {
        font-size: .9rem;
    }

    .public-apply-body .apply-kicker {
        margin-bottom: 7px;
        padding: 5px 10px;
        font-size: .66rem;
    }

    .public-apply-body .use-case-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .public-apply-body .model-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .public-apply-body .form-label {
        margin-bottom: 4px;
        font-size: .78rem;
        font-weight: 800;
    }

    .public-apply-body .apply-card .form-control,
    .public-apply-body .apply-card .form-select,
    .public-apply-body .apply-upload-card .form-control {
        min-height: 40px;
        border-radius: 12px;
        font-size: .9rem;
    }

    .public-apply-body .apply-card textarea.form-control {
        min-height: 56px;
        resize: none;
    }

    .public-apply-body .modern-upload {
        flex: 1;
        min-height: 0;
        gap: 12px;
        padding: 22px;
        border-radius: 24px;
    }

    .public-apply-body .modern-upload::before {
        inset: 12px;
        border-radius: 18px;
    }

    .public-apply-body .upload-orb {
        width: 76px;
        height: 76px;
        border-radius: 24px;
        animation: uploadFloat 3.8s ease-in-out infinite;
    }

    .public-apply-body .upload-copy strong {
        font-size: 1.55rem;
    }

    .public-apply-body .upload-actions {
        margin-top: 12px;
    }

    .public-apply-body .upload-actions span,
    .public-apply-body .apply-status {
        font-size: .84rem;
    }

    .public-apply-body .skill-dropdown-wrap {
        padding: 12px;
        border-radius: 18px;
    }

    .public-apply-body .skill-picker {
        z-index: 20;
    }

    .public-apply-body .skill-picker-trigger {
        min-height: 44px;
        border-radius: 14px;
    }

    .public-apply-body .skill-picker-panel {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 8px);
        max-height: 300px;
        padding: 12px;
        border-radius: 18px;
    }

    .public-apply-body .skill-picker-tools {
        top: -12px;
        margin: -12px -12px 10px;
        padding: 10px 12px;
    }

    .public-apply-body .skill-picker-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .public-apply-body .skill-group {
        padding: 10px;
        border-radius: 14px;
    }

    .public-apply-body .skill-group-title {
        margin-bottom: 8px;
        font-size: .64rem;
    }

    .public-apply-body .skill-chip {
        min-height: 30px;
        padding: 6px 9px;
        font-size: .76rem;
    }

    .public-apply-body .selected-skill-preview {
        min-height: 38px;
        max-height: 46px;
        overflow: hidden;
        margin-top: 9px;
        padding: 8px;
        border-radius: 14px;
    }

    .public-apply-body #other_skills {
        min-height: 38px;
    }

    .public-apply-body .screening-stack {
        flex: 1;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .public-apply-body .apply-question-step .screening-stack-single {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .public-apply-body .screening-question {
        min-height: 0;
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 8px;
        padding: 9px;
        border-radius: 15px;
    }

    .public-apply-body .question-index {
        width: 28px;
        height: 28px;
        border-radius: 10px;
        font-size: .68rem;
    }

    .public-apply-body .question-body .form-label {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .public-apply-body .question-hint {
        display: none;
    }

    .public-apply-body .question-body textarea.form-control {
        height: 52px;
        min-height: 52px;
        padding: 8px 10px;
        font-size: .85rem;
    }

    .public-apply-body .apply-question-step .question-body textarea.form-control {
        height: 72px;
        min-height: 72px;
        font-size: .9rem;
    }

    .public-apply-body .apply-final-summary {
        gap: 10px;
        margin-bottom: 12px;
    }

    .public-apply-body .apply-final-summary > div {
        padding: 14px;
        border-radius: 16px;
    }

    .public-apply-body .apply-checks {
        gap: 8px;
        margin-top: 10px;
    }

    .public-apply-body .apply-check {
        padding: 11px 12px;
        border-radius: 14px;
        font-size: .9rem;
    }

    .public-apply-body .apply-wizard-actions {
        padding: 10px;
        border-radius: 18px;
        box-shadow: 0 12px 34px rgba(7, 27, 36, .07);
    }

    .public-apply-body .btn {
        border-radius: 999px;
        transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .public-apply-body .btn:hover {
        transform: translateY(-1px);
    }
}

@keyframes minimalStepIn {
    from { opacity: 0; transform: translateY(8px) scale(.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes uploadFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@media (max-width: 980px) {
    .public-apply-body {
        overflow: auto;
    }

    .public-apply-body .apply-page {
        min-height: 100svh;
        padding: 14px;
        background: transparent;
    }

    .public-apply-body .apply-wizard-layout {
        padding: 10px;
        border: 1px solid rgba(215, 229, 234, .74);
        border-radius: 26px;
        background: rgba(255, 255, 255, .62);
        box-shadow: 0 22px 70px rgba(7, 27, 36, .12);
        backdrop-filter: blur(16px);
    }

    .public-apply-body .apply-wizard-panel {
        border-radius: 22px;
    }

    .public-apply-body .apply-card,
    .public-apply-body .apply-progress-shell,
    .public-apply-body .apply-wizard-actions {
        box-shadow: 0 14px 40px rgba(7, 27, 36, .08);
    }
}

/* Light agency-style apply flow */
.public-apply-body {
    background:
        radial-gradient(circle at 22% 18%, rgba(40, 212, 232, .08), transparent 22rem),
        linear-gradient(180deg, #F2F2F2, #ECEFF0);
}

.public-apply-body .apply-kicker {
    color: #0A7289;
    background: rgba(10, 114, 137, .08);
    border-color: rgba(10, 114, 137, .18);
}

.apply-centered-head {
    text-align: center;
}

.apply-centered-head .apply-kicker {
    margin-left: auto;
    margin-right: auto;
}

.apply-wizard-brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.role-card-grid {
    width: min(920px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.role-card {
    position: relative;
    cursor: pointer;
}

.role-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.role-card-inner {
    position: relative;
    min-height: 98px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 12px;
    align-items: start;
    padding: 16px;
    color: #111;
    border: 1px solid #E1E5E7;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 12px 26px rgba(17, 24, 28, .04);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.role-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #0A7289;
    border: 1px solid #DCE8E5;
    border-radius: 10px;
    background: #F6FAF9;
    font-family: "Space Grotesk", sans-serif;
    font-size: .68rem;
    font-weight: 900;
}

.role-card strong,
.role-card small {
    display: block;
}

.role-card strong {
    margin-bottom: 4px;
    font-size: .95rem;
    letter-spacing: -.02em;
}

.role-card small {
    color: #707B82;
    font-size: .78rem;
    line-height: 1.35;
}

.role-card i {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 1px solid #DCE2E5;
    border-radius: 6px;
    background: #FFFFFF;
}

.role-card i::before {
    content: "";
    width: 8px;
    height: 5px;
    border-left: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    transform: rotate(-45deg) translateY(-1px);
    opacity: 0;
}

.role-card:hover .role-card-inner,
.role-card input:focus + .role-card-inner {
    border-color: rgba(10, 114, 137, .42);
    box-shadow: 0 16px 34px rgba(17, 24, 28, .08);
    transform: translateY(-1px);
}

.role-card input:checked + .role-card-inner {
    border-color: #0A7289;
    background: linear-gradient(180deg, #FFFFFF, #F7FCFB);
    box-shadow: 0 18px 40px rgba(10, 114, 137, .12);
}

.role-card input:checked + .role-card-inner i {
    border-color: #0A7289;
    background: #0A7289;
}

.role-card input:checked + .role-card-inner i::before {
    opacity: 1;
}

.role-card.autofilled .role-card-inner {
    animation: autofillPulse 1.4s ease;
}

.apply-aside-contact {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-top: 1px solid #E7EAEC;
}

.apply-aside-contact strong,
.apply-aside-contact span,
.apply-aside-contact small {
    display: block;
}

.apply-aside-contact strong {
    color: #111;
    font-size: .9rem;
}

.apply-aside-contact span {
    width: fit-content;
    color: #111;
    border-bottom: 1px solid #111;
    font-size: .84rem;
    font-weight: 800;
}

.apply-aside-contact small {
    color: #727B82;
    line-height: 1.45;
}

.public-apply-body .apply-wizard-note {
    display: none;
}

@media (min-width: 981px) {
    .public-apply-body .apply-page {
        padding: 8px;
    }

    .public-apply-body .apply-form-shell {
        width: calc(100vw - 16px);
    }

    .public-apply-body .apply-wizard-layout {
        height: calc(100svh - 16px);
        grid-template-columns: 306px minmax(0, 1fr);
        gap: 0;
        padding: 0;
        overflow: hidden;
        border-color: rgba(0, 0, 0, .06);
        border-radius: 28px;
        background: #FFFFFF;
        box-shadow: 0 30px 90px rgba(14, 20, 24, .10);
        backdrop-filter: none;
    }

    .public-apply-body .apply-wizard-panel {
        padding: 28px;
        color: #111;
        border: 0;
        border-right: 1px solid #ECEEEF;
        border-radius: 0;
        background:
            radial-gradient(circle at 28% 18%, rgba(10, 114, 137, .08), transparent 14rem),
            linear-gradient(180deg, #FAFAFA, #F5F6F6);
        box-shadow: none;
    }

    .public-apply-body .apply-wizard-brand {
        color: #111;
    }

    .public-apply-body .apply-wizard-brand > span {
        width: 28px;
        height: 28px;
        padding: 0;
        color: inherit;
        border-radius: 0;
        background: transparent;
        font-size: 0;
    }

    .public-apply-body .apply-wizard-brand small {
        color: #747D84;
    }

    .public-apply-body .apply-wizard-panel p {
        color: #69747B;
        font-size: .86rem;
    }

    .public-apply-body .apply-wizard-steps {
        gap: 8px;
        margin-top: 4px;
    }

    .public-apply-body .apply-wizard-step {
        padding: 10px;
        color: #5E6970;
        border-color: transparent;
        background: transparent;
    }

    .public-apply-body .apply-wizard-step span {
        color: #59656D;
        border-color: #E0E5E7;
        background: #FFFFFF;
    }

    .public-apply-body .apply-wizard-step strong {
        color: #111;
    }

    .public-apply-body .apply-wizard-step small {
        color: #7C868D;
    }

    .public-apply-body .apply-wizard-step:hover,
    .public-apply-body .apply-wizard-step:focus {
        border-color: #E7ECEE;
        background: #FFFFFF;
        box-shadow: 0 10px 22px rgba(17, 24, 28, .045);
    }

    .public-apply-body .apply-wizard-step.is-active {
        border-color: #DDE7E5;
        background: #FFFFFF;
        box-shadow: 0 12px 28px rgba(17, 24, 28, .06);
    }

    .public-apply-body .apply-wizard-step.is-active span,
    .public-apply-body .apply-wizard-step.is-complete span {
        color: #FFFFFF;
        background: #0A7289;
    }

    .public-apply-body .apply-wizard-note {
        margin-top: auto;
        color: #111;
        border-color: #E7EAEC;
        background: #FFFFFF;
    }

    .public-apply-body .apply-wizard-note strong {
        color: #111;
    }

    .public-apply-body .apply-wizard-note span {
        color: #717A81;
    }

    .public-apply-body .apply-wizard-main {
        padding: 28px clamp(28px, 6vw, 88px);
        background: #FFFFFF;
    }

    .public-apply-body .apply-progress-shell {
        width: min(880px, 100%);
        margin: 0 auto;
        padding: 0 0 8px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .public-apply-body .apply-progress-shell span {
        color: #838B91;
    }

    .public-apply-body .apply-progress-shell strong {
        color: #111;
    }

    .public-apply-body .apply-progress-track {
        background: #EBEEF0;
    }

    .public-apply-body .apply-progress-track span {
        background: #0A7289;
    }

    .public-apply-body .apply-card {
        width: min(980px, 100%);
        margin: 0 auto;
        padding: clamp(22px, 3vw, 36px);
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .public-apply-body .apply-upload-step,
    .public-apply-body .apply-role-step {
        justify-content: center;
    }

    .public-apply-body .role-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .public-apply-body .apply-section-head {
        width: min(760px, 100%);
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .public-apply-body .apply-role-step .apply-section-head,
    .public-apply-body .apply-upload-step .apply-section-head {
        text-align: center;
    }

    .public-apply-body .modern-upload {
        width: min(760px, 100%);
        max-height: 390px;
        margin: 0 auto;
        border-color: #DBE3E5;
        background: #FAFBFB;
        box-shadow: inset 0 1px 0 #FFFFFF;
    }

    .public-apply-body .modern-upload:hover,
    .public-apply-body .modern-upload.is-dragging {
        border-color: #0A7289;
        box-shadow: 0 16px 38px rgba(17, 24, 28, .08);
    }

    .public-apply-body .upload-orb {
        background: #111;
        box-shadow: 0 16px 34px rgba(17, 24, 28, .14);
    }

    .public-apply-body .upload-orb span {
        border-color: #FFFFFF;
        background: transparent;
    }

    .public-apply-body .upload-orb span::before {
        background: #FFFFFF;
        box-shadow: 0 8px 0 rgba(255, 255, 255, .7), 0 16px 0 rgba(255, 255, 255, .45);
    }

    .public-apply-body .upload-actions {
        width: min(760px, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    .public-apply-body .use-case-grid,
    .public-apply-body .model-grid {
        width: min(920px, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    .public-apply-body .apply-question-step {
        width: min(840px, 100%);
    }

    .public-apply-body .apply-question-step .screening-stack-single {
        gap: 14px;
    }

    .public-apply-body .apply-question-step .question-body textarea.form-control {
        height: 92px;
        min-height: 92px;
    }

    .public-apply-body .screening-question,
    .public-apply-body .apply-final-summary > div,
    .public-apply-body .apply-check {
        border-color: #E4E8EA;
        background: #FFFFFF;
        box-shadow: 0 10px 24px rgba(17, 24, 28, .035);
    }

    .public-apply-body .question-index {
        color: #FFFFFF;
        background: #111;
    }

    .public-apply-body .apply-wizard-actions {
        width: min(880px, 100%);
        margin: 0 auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .public-apply-body .btn-cyan {
        color: #FFFFFF;
        background: #111;
        border-color: #111;
    }

    .public-apply-body .btn-cyan:hover {
        color: #FFFFFF;
        background: #222;
        border-color: #222;
    }
}

@media (max-width: 1180px) and (min-width: 981px) {
    .role-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .role-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .role-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Reference-style orbital sidebar */
.apply-orbit-panel {
    position: relative;
    min-height: 280px;
    overflow: hidden;
}

.orbit-ring {
    position: absolute;
    border: 1px dashed rgba(10, 114, 137, .22);
    border-radius: 999px;
}

.orbit-face {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 10px 24px rgba(17, 24, 28, .14);
    animation: faceDrift 4.8s ease-in-out infinite;
}

.face-portrait {
    position: relative;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(180deg, #F7CFAE 0 58%, #154D5E 58% 100%);
}

.face-portrait::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 24px;
    height: 16px;
    border-radius: 999px 999px 9px 9px;
    background: #34221D;
    z-index: 2;
}

.face-portrait i {
    position: absolute;
    left: 9px;
    top: 10px;
    width: 20px;
    height: 22px;
    border-radius: 999px;
    background: #F2B98F;
    z-index: 1;
}

.face-portrait i::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 9px;
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: #1E252B;
    box-shadow: 8px 0 0 #1E252B;
}

.face-portrait i::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 16px;
    width: 6px;
    height: 2px;
    border-radius: 999px;
    background: rgba(30, 37, 43, .42);
}

.face-two {
    background: linear-gradient(180deg, #E8B48D 0 58%, #C28B3D 58% 100%);
}

.face-two::before {
    background: #5D382B;
}

.face-three {
    background: linear-gradient(180deg, #F0C2A0 0 58%, #0A7289 58% 100%);
}

.face-three::before {
    background: #1F1D1B;
    height: 19px;
}

.face-four {
    background: linear-gradient(180deg, #D99D78 0 58%, #F0F4F5 58% 100%);
}

.face-four::before {
    background: #241915;
    left: 5px;
    width: 28px;
}

.face-five {
    background: linear-gradient(180deg, #F4C7A2 0 58%, #7DB6C3 58% 100%);
}

.face-five::before {
    background: #8A5A35;
}

.face-six {
    background: linear-gradient(180deg, #C88968 0 58%, #071B24 58% 100%);
}

.face-six::before {
    background: #111;
}

@keyframes faceDrift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@media (min-width: 981px) {
    .public-apply-body .apply-wizard-panel {
        overflow: hidden;
    }

    .public-apply-body .apply-wizard-steps {
        display: none;
    }

    .public-apply-body .apply-orbit-panel {
        flex: 1;
        min-height: 0;
        margin: 10px -28px 8px;
    }

    .public-apply-body .apply-orbit-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 79% 50%, rgba(40, 212, 232, .08), transparent 7rem),
            linear-gradient(90deg, rgba(255,255,255,.82), rgba(255,255,255,0) 38%);
        pointer-events: none;
        z-index: 2;
    }

    .public-apply-body .orbit-ring {
        left: 58px;
        top: 50%;
        transform: translateY(-50%);
    }

    .public-apply-body .orbit-ring-1 {
        width: 210px;
        height: 210px;
        left: 132px;
    }

    .public-apply-body .orbit-ring-2 {
        width: 330px;
        height: 330px;
        left: 72px;
    }

    .public-apply-body .orbit-ring-3 {
        width: 450px;
        height: 450px;
        left: 12px;
    }

    .public-apply-body .orbit-ring-4 {
        width: 570px;
        height: 570px;
        left: -48px;
    }

    .public-apply-body .orbit-face {
        z-index: 3;
    }

    .public-apply-body .orbit-face-1 {
        left: 98px;
        top: 30px;
        animation-delay: -.4s;
    }

    .public-apply-body .orbit-face-2 {
        left: 48px;
        top: 148px;
        animation-delay: -1.2s;
    }

    .public-apply-body .orbit-face-3 {
        left: 160px;
        top: 226px;
        width: 54px;
        height: 54px;
        animation-delay: -2s;
    }

    .public-apply-body .orbit-face-3 .face-portrait {
        width: 44px;
        height: 44px;
    }

    .public-apply-body .orbit-face-4 {
        left: 22px;
        bottom: 78px;
        animation-delay: -.8s;
    }

    .public-apply-body .orbit-face-5 {
        right: 34px;
        top: 176px;
        width: 38px;
        height: 38px;
        animation-delay: -1.6s;
    }

    .public-apply-body .orbit-face-5 .face-portrait,
    .public-apply-body .orbit-face-6 .face-portrait {
        width: 30px;
        height: 30px;
    }

    .public-apply-body .orbit-face-6 {
        right: 58px;
        bottom: 34px;
        width: 38px;
        height: 38px;
        animation-delay: -2.4s;
    }

    .public-apply-body .apply-aside-intro {
        display: none;
    }

    .public-apply-body .apply-aside-contact {
        margin-top: 0;
        padding: 16px 0 0;
        border-top-color: #E5EAEC;
    }

    .public-apply-body .apply-aside-contact::after {
        content: "General\a talent@synapsecircuits.com\a\a Support\a admin@synapsecircuits.com";
        white-space: pre-line;
        margin-top: 14px;
        color: #111;
        font-size: .78rem;
        font-weight: 700;
        line-height: 1.65;
    }

    .public-apply-body .apply-aside-contact span {
        color: var(--c-primary);
        border-bottom-color: var(--c-primary);
    }
}

@media (max-width: 980px) {
    .public-apply-body .apply-orbit-panel {
        min-height: 220px;
        margin: 6px -18px;
    }

    .public-apply-body .orbit-ring-1 {
        width: 190px;
        height: 190px;
        right: 12px;
        top: 18px;
    }

    .public-apply-body .orbit-ring-2 {
        width: 280px;
        height: 280px;
        right: -38px;
        top: -28px;
    }

    .public-apply-body .orbit-ring-3 {
        width: 370px;
        height: 370px;
        right: -84px;
        top: -74px;
    }

    .public-apply-body .orbit-ring-4 {
        width: 460px;
        height: 460px;
        right: -130px;
        top: -120px;
    }

    .public-apply-body .orbit-face-1 { left: 18%; top: 18px; }
    .public-apply-body .orbit-face-2 { left: 42%; top: 72px; }
    .public-apply-body .orbit-face-3 { left: 16%; bottom: 24px; }
    .public-apply-body .orbit-face-4 { right: 18%; bottom: 36px; }
    .public-apply-body .orbit-face-5,
    .public-apply-body .orbit-face-6 { display: none; }
}

/* Consistent slide rail and viewport fit */
@media (min-width: 981px) {
    .public-apply-body {
        --apply-slide-width: min(940px, 100%);
        --apply-slide-gap: clamp(12px, 1.8svh, 20px);
    }

    .public-apply-body .apply-wizard-main {
        grid-template-rows: auto minmax(0, 1fr) auto;
        align-items: stretch;
        padding: clamp(20px, 3svh, 30px) clamp(34px, 5vw, 82px);
    }

    .public-apply-body .apply-progress-shell,
    .public-apply-body .apply-wizard-actions {
        width: var(--apply-slide-width);
    }

    .public-apply-body .apply-progress-shell {
        padding-bottom: clamp(6px, 1svh, 12px);
    }

    .public-apply-body .apply-card {
        width: var(--apply-slide-width);
        height: 100%;
        min-height: 0;
        padding: 0;
        overflow: visible;
        justify-content: center;
        gap: var(--apply-slide-gap);
    }

    .public-apply-body .apply-section-head,
    .public-apply-body .apply-role-step .apply-section-head,
    .public-apply-body .apply-upload-step .apply-section-head {
        width: 100%;
        max-width: none;
        margin: 0;
        text-align: left;
    }

    .public-apply-body .apply-centered-head .apply-kicker,
    .public-apply-body .apply-kicker {
        margin-left: 0;
        margin-right: 0;
    }

    .public-apply-body .apply-section-head h2,
    .public-apply-body .apply-card h2 {
        font-size: clamp(1.42rem, 2.2svh + .7rem, 2rem);
        line-height: 1.05;
    }

    .public-apply-body .apply-section-head p.text-muted {
        max-width: 620px;
        margin-top: 6px;
        font-size: clamp(.82rem, 1.15svh, .95rem);
    }

    .public-apply-body .modern-upload,
    .public-apply-body .upload-actions,
    .public-apply-body .role-card-grid,
    .public-apply-body .use-case-grid,
    .public-apply-body .model-grid,
    .public-apply-body .skill-dropdown-wrap,
    .public-apply-body .screening-stack,
    .public-apply-body .apply-final-summary,
    .public-apply-body .apply-checks {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .public-apply-body .modern-upload {
        flex: 0 1 auto;
        min-height: clamp(230px, 42svh, 360px);
        max-height: none;
        padding: clamp(20px, 3svh, 34px);
    }

    .public-apply-body .upload-actions {
        grid-template-columns: auto minmax(0, 1fr);
        margin-top: 0;
    }

    .public-apply-body .role-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(9px, 1.25svh, 14px);
    }

    .public-apply-body .role-card-inner {
        min-height: clamp(78px, 11svh, 100px);
        padding: clamp(10px, 1.55svh, 16px);
        gap: 10px;
    }

    .public-apply-body .role-card strong {
        font-size: clamp(.82rem, 1.2svh, .95rem);
    }

    .public-apply-body .role-card small {
        font-size: clamp(.68rem, 1svh, .78rem);
    }

    .public-apply-body .use-case-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(9px, 1.3svh, 13px);
    }

    .public-apply-body .model-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(9px, 1.3svh, 13px);
    }

    .public-apply-body .form-wide {
        grid-column: 1 / -1;
    }

    .public-apply-body .apply-card .form-control,
    .public-apply-body .apply-card .form-select,
    .public-apply-body .apply-upload-card .form-control {
        min-height: clamp(36px, 5.4svh, 44px);
    }

    .public-apply-body .skill-dropdown-wrap {
        padding: clamp(10px, 1.55svh, 14px);
    }

    .public-apply-body .selected-skill-preview {
        max-height: clamp(34px, 5.8svh, 48px);
    }

    .public-apply-body .apply-question-step {
        width: var(--apply-slide-width);
    }

    .public-apply-body .apply-question-step .screening-stack-single {
        gap: clamp(8px, 1.25svh, 14px);
    }

    .public-apply-body .screening-question {
        padding: clamp(8px, 1.2svh, 12px);
    }

    .public-apply-body .question-body .form-label {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.15;
    }

    .public-apply-body .apply-question-step .question-body textarea.form-control {
        height: clamp(62px, 9.2svh, 92px);
        min-height: clamp(62px, 9.2svh, 92px);
    }

    .public-apply-body .apply-final-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-apply-body .apply-checks {
        gap: clamp(8px, 1.2svh, 12px);
    }
}

@media (min-width: 981px) and (max-height: 760px) {
    .public-apply-body .apply-wizard-main {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .public-apply-body .apply-wizard-actions .btn,
    .public-apply-body .btn {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .public-apply-body .apply-section-head p.text-muted {
        display: none;
    }

    .public-apply-body .role-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .public-apply-body .role-card-inner {
        grid-template-columns: 34px minmax(0, 1fr) 16px;
    }
}

@media (min-width: 981px) and (max-width: 1180px) {
    .public-apply-body .role-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .public-apply-body .use-case-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-apply-body .model-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .public-apply-body .apply-section-head,
    .public-apply-body .apply-role-step .apply-section-head,
    .public-apply-body .apply-upload-step .apply-section-head {
        text-align: left;
    }

    .public-apply-body .apply-centered-head .apply-kicker {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Public application success screen */
.apply-success-main {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    display: grid;
    align-items: center;
    justify-items: stretch;
    overflow: hidden;
    background: #FFFFFF;
}

.public-apply-body .apply-success-page,
.public-apply-body .apply-success-layout {
    width: 100%;
}

.success-card {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(28px, 6vw, 58px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.success-logo {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid #E4E9EB;
    border-radius: 24px;
    background: #F8FBFC;
}

.success-logo img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.success-card h1 {
    max-width: 620px;
    margin: 14px 0 12px;
    color: #111;
    font-size: clamp(2.1rem, 5vw, 4.2rem);
    line-height: .95;
    letter-spacing: -.07em;
}

.success-lead {
    max-width: 640px;
    margin: 0;
    color: #626D74;
    font-size: 1rem;
    line-height: 1.7;
}

.success-signal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.success-signal-grid > div,
.success-contact-card {
    padding: 16px;
    border: 1px solid #E4E9EB;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 12px 28px rgba(17, 24, 28, .04);
}

.success-signal-grid span,
.success-signal-grid strong,
.success-signal-grid small,
.success-contact-card strong,
.success-contact-card span,
.success-contact-card small {
    display: block;
}

.success-signal-grid span {
    color: var(--c-primary);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.success-signal-grid strong,
.success-contact-card strong {
    margin-top: 5px;
    color: #111;
    font-weight: 900;
}

.success-signal-grid small,
.success-contact-card small {
    margin-top: 4px;
    color: #6E7980;
    line-height: 1.45;
}

.success-contact-card {
    margin-top: 24px;
    margin-bottom: 22px;
}

.success-contact-card span {
    width: fit-content;
    color: var(--c-primary);
    border-bottom: 1px solid var(--c-primary);
    font-weight: 900;
}

.success-action {
    border-radius: 999px;
}

.success-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.confetti {
    position: absolute;
    top: -20px;
    width: 8px;
    height: 14px;
    border-radius: 3px;
    background: var(--c-primary);
    opacity: .9;
    animation: confettiFall 3.8s ease-in-out infinite;
}

.confetti:nth-child(3n) {
    background: var(--c-cyan);
}

.confetti:nth-child(4n) {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #071B24;
}

.confetti-1 { left: 6%; animation-delay: 0s; }
.confetti-2 { left: 12%; animation-delay: .7s; }
.confetti-3 { left: 18%; animation-delay: 1.1s; }
.confetti-4 { left: 24%; animation-delay: .2s; }
.confetti-5 { left: 31%; animation-delay: 1.5s; }
.confetti-6 { left: 38%; animation-delay: .5s; }
.confetti-7 { left: 45%; animation-delay: 1.9s; }
.confetti-8 { left: 52%; animation-delay: .9s; }
.confetti-9 { left: 58%; animation-delay: .1s; }
.confetti-10 { left: 64%; animation-delay: 1.3s; }
.confetti-11 { left: 70%; animation-delay: .4s; }
.confetti-12 { left: 76%; animation-delay: 1.7s; }
.confetti-13 { left: 82%; animation-delay: .8s; }
.confetti-14 { left: 88%; animation-delay: 1.2s; }
.confetti-15 { left: 94%; animation-delay: .3s; }
.confetti-16 { left: 33%; animation-delay: 2.2s; }
.confetti-17 { left: 67%; animation-delay: 2s; }
.confetti-18 { left: 50%; animation-delay: 2.5s; }

@keyframes confettiFall {
    0% { transform: translateY(-30px) rotate(0deg); opacity: 0; }
    12% { opacity: .95; }
    100% { transform: translateY(105svh) rotate(540deg); opacity: 0; }
}

@media (min-width: 981px) {
    .public-apply-body .apply-success-layout {
        height: calc(100svh - 16px);
        grid-template-columns: 306px minmax(0, 1fr);
        width: 100%;
    }
}

@media (max-width: 980px) {
    .apply-success-main {
        min-height: 640px;
        border-radius: 24px;
    }

    .success-card {
        width: calc(100% - 24px);
        padding: 24px;
    }

    .success-signal-grid {
        grid-template-columns: 1fr;
    }
}

/* Applicant passwordless login and portal */
.applicant-auth-page,
.applicant-portal-page {
    background:
        radial-gradient(circle at 15% 12%, rgba(40, 212, 232, .18), transparent 26rem),
        radial-gradient(circle at 88% 18%, rgba(10, 114, 137, .14), transparent 28rem),
        #F4FAFC;
}

.public-apply-body.applicant-auth-body .apply-page {
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    display: grid;
    place-items: stretch;
    padding: 8px;
    overflow: hidden;
}

.public-apply-body.applicant-portal-body {
    overflow: auto;
}

.public-apply-body.applicant-portal-body .apply-page {
    width: 100%;
    height: auto;
    min-height: 100svh;
    display: block;
    padding: 12px;
    overflow: visible;
}

.applicant-auth-layout {
    width: 100%;
    max-width: none;
    height: calc(100svh - 16px);
    grid-template-columns: 306px minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: 0 30px 90px rgba(14, 20, 24, .10);
}

.applicant-auth-main {
    min-width: 0;
    display: grid;
    place-items: center;
    padding: clamp(28px, 7vw, 92px);
    background: #FFFFFF;
}

.applicant-auth-card {
    width: min(680px, 100%);
    animation: applySlideIn .45s ease both;
}

.applicant-auth-card h1 {
    max-width: 620px;
    margin: 14px 0 12px;
    color: #111;
    font-size: clamp(2.4rem, 5.4vw, 5rem);
    line-height: .92;
    letter-spacing: -.075em;
}

.applicant-auth-form {
    display: grid;
    gap: 14px;
    margin-top: 26px;
}

.applicant-auth-form .form-control {
    min-height: 54px;
    border-color: #DDE7EB;
    border-radius: 18px;
    background: #F8FBFC;
}

.applicant-auth-form .form-control:focus {
    border-color: rgba(10, 114, 137, .45);
    box-shadow: 0 0 0 .22rem rgba(40, 212, 232, .16);
}

.otp-input {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: .24em;
    text-align: center;
}

.applicant-auth-links {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    color: #7B858C;
    font-size: .9rem;
}

.applicant-auth-links a {
    color: #0A7289;
    font-weight: 900;
    text-decoration: none;
}

.applicant-portal-shell {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.applicant-portal-hero,
.applicant-portal-summary,
.portal-panel {
    border: 1px solid rgba(215, 229, 234, .78);
    border-radius: 28px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 20px 70px rgba(7, 27, 36, .10);
    backdrop-filter: blur(16px);
}

.applicant-portal-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
}

.applicant-portal-summary {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(360px, 1fr);
    gap: 22px;
    padding: clamp(24px, 4vw, 44px);
}

.applicant-portal-summary h1 {
    margin: 8px 0 10px;
    color: #111;
    font-size: clamp(2.3rem, 5vw, 4.8rem);
    line-height: .92;
    letter-spacing: -.075em;
}

.applicant-portal-summary p {
    max-width: 650px;
    margin: 0;
    color: #626D74;
    line-height: 1.7;
}

.applicant-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.portal-fact {
    min-height: 104px;
    padding: 16px;
    border: 1px solid #E4E9EB;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 12px 30px rgba(17, 24, 28, .04);
}

.portal-fact span,
.portal-fact strong {
    display: block;
}

.portal-fact span {
    color: #7A858D;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.portal-fact strong {
    margin-top: 8px;
    color: #111;
    line-height: 1.35;
}

.applicant-portal-form {
    display: grid;
    gap: 18px;
}

.applicant-portal-activity {
    overflow: hidden;
}

.portal-activity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.portal-activity-grid h3 {
    margin: 0 0 12px;
    color: #111;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.portal-activity-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid #E4E9EB;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 12px 30px rgba(17, 24, 28, .04);
}

.portal-activity-card strong,
.portal-activity-card small {
    display: block;
}

.portal-activity-card strong {
    color: #111;
    font-weight: 900;
}

.portal-activity-card small,
.portal-activity-card p,
.portal-activity-card dd {
    color: #66727A;
    line-height: 1.55;
}

.portal-activity-card p {
    margin: 0;
}

.portal-activity-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.portal-activity-card dt {
    color: #7A858D;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.portal-activity-card dd {
    margin: 4px 0 0;
    font-weight: 800;
}

.portal-activity-card a {
    width: fit-content;
    color: #0A7289;
    font-weight: 900;
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 114, 137, .35);
}

.portal-meeting-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 999px;
    background: #111;
}

.portal-panel {
    padding: clamp(22px, 3.2vw, 38px);
}

.portal-question-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.portal-question-grid textarea.form-control {
    line-height: 1.55;
}

.portal-question-check {
    margin: 0;
}

.portal-panel-head {
    margin-bottom: 18px;
}

.portal-panel-head h2 {
    margin: 4px 0 0;
    color: #111;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    letter-spacing: -.04em;
}

.portal-panel .form-control,
.portal-panel .form-select {
    min-height: 48px;
    border-color: #DDE7EB;
    border-radius: 16px;
    background: #F8FBFC;
}

.portal-panel textarea.form-control {
    min-height: auto;
    resize: vertical;
}

.portal-panel .form-control:focus,
.portal-panel .form-select:focus {
    border-color: rgba(10, 114, 137, .45);
    box-shadow: 0 0 0 .22rem rgba(40, 212, 232, .16);
}

.public-apply-body.applicant-portal-body .portal-skills-field {
    grid-column: 1 / -1;
}

.public-apply-body.applicant-portal-body .portal-skills-field .skill-dropdown-wrap {
    padding: 18px;
    border-radius: 22px;
}

.public-apply-body.applicant-portal-body .portal-skills-field .skill-picker {
    z-index: 8;
}

.public-apply-body.applicant-portal-body .portal-skills-field .skill-picker-panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    max-height: min(520px, 62vh);
    overflow: auto;
}

.public-apply-body.applicant-portal-body .portal-skills-field .skill-picker-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-apply-body.applicant-portal-body .portal-skills-field .selected-skill-preview {
    max-height: none;
    overflow: visible;
}

.applicant-portal-actions {
    position: sticky;
    bottom: 14px;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    padding: 14px;
    border: 1px solid rgba(215, 229, 234, .76);
    border-radius: 22px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 18px 44px rgba(7, 27, 36, .12);
    backdrop-filter: blur(14px);
}

@media (max-width: 980px) {
    .applicant-auth-layout {
        width: 100%;
        height: auto;
        min-height: 100svh;
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    .applicant-auth-main {
        padding: 28px 18px;
    }

    .applicant-portal-page {
        padding: 12px;
    }

    .applicant-portal-shell {
        width: 100%;
    }

    .applicant-portal-summary {
        grid-template-columns: 1fr;
    }

    .portal-activity-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .applicant-auth-card h1,
    .applicant-portal-summary h1 {
        font-size: 3rem;
    }

    .applicant-status-grid,
    .applicant-portal-page .use-case-grid,
    .applicant-portal-page .model-grid {
        grid-template-columns: 1fr;
    }

    .public-apply-body.applicant-portal-body .portal-skills-field .skill-picker-groups,
    .public-apply-body.applicant-portal-body .portal-skills-field .skill-picker-tools {
        grid-template-columns: 1fr;
    }

    .applicant-portal-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .applicant-portal-actions {
        justify-content: stretch;
    }

    .applicant-portal-actions .btn {
        width: 100%;
    }
}