/* Employer onboarding — surface-owned component layer.
   Reproduces the employer-onboarding mock exactly. Built on the shared
   --pt-* tokens (colors, fonts, radii, eases from portal/css/tokens.css);
   only loaded on the employer onboarding page via the base extra_head block.
   Radius/ease aliases map onto the shared scale: --r-md == --pt-radius-md, etc. */

/* ============ Buttons ============ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; padding: 0 24px; border-radius: var(--pt-radius-pill);
    font-family: var(--pt-font-body); font-weight: 600; font-size: 16px; line-height: 1;
    border: 0; cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: transform .15s var(--pt-ease-paper), background .15s var(--pt-ease-paper),
                color .15s var(--pt-ease-paper), opacity .15s var(--pt-ease-paper);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--pt-rocket-flame); color: #fff; }
.btn-primary:hover { background: #d95428; }
.btn-primary[disabled] { opacity: .4; cursor: not-allowed; }
.btn-light { background: var(--pt-white); color: var(--pt-graphite-core); border: 1px solid var(--pt-lunar-dust); }
.btn-light:hover { background: var(--pt-cosmic-fog); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }

/* ============ Header ============ */
header.topbar {
    height: 80px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 40px; border-bottom: 1px solid var(--pt-lunar-dust);
    position: sticky; top: 0; background: var(--pt-bg); z-index: 10;
}
header.topbar.center { justify-content: center; }
header.topbar.center .save-draft { display: none; }
.logo img { display: block; height: 28px; width: auto; }

/* ============ Stage / steps ============ */
.stage { min-height: calc(100vh - 80px); }
.step { display: none; animation: emp-fadeup .32s var(--pt-ease-paper) both; }
.step.active { display: block; }
@keyframes emp-fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* group: step card centered in the viewport, fee sidebar centered in the
   remaining right column. align-content centers the row block vertically
   (safe falls back to top-align when content overflows); align-items keeps
   card and fee on a shared vertical center. The wizard sits below the 80px
   header AND the 4px progress bar, so it reserves that full 84px band on BOTH
   sides (168px total). This centers the row on the TRUE viewport center —
   counting the header and progress bar — instead of leaving them to push the
   content below the visual middle. */
.wizard {
    display: grid; grid-template-columns: 1fr minmax(0, 720px) 1fr;
    align-items: center; align-content: safe center;
    min-height: calc(100vh - 2 * (80px + 4px));
    margin: 0 auto; padding: 48px 40px;
}
.wizard > .pt-onboard-frame, .wizard > .card { grid-column: 2; }
.wizard > .fee { grid-column: 3; justify-self: center; }
.card {
    background: var(--pt-surface); border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md); width: 720px; max-width: 100%;
}

/* The cosmic-fog outer card (.pt-onboard-frame) lives in the shared
   portal/css/styles.css; the prompt recap strip below sits in its fog area. */
.card-summary {
    display: flex; align-items: flex-end; gap: 12px;
    padding: 14px 20px;
    font-size: 14px; color: var(--pt-fg-muted); line-height: 1.5;
}
.card-summary-text { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-summary-text.open { -webkit-line-clamp: unset; }
.card-summary-more {
    border: 0; background: transparent; cursor: pointer; padding: 0; white-space: nowrap;
    flex-shrink: 0;
    color: var(--pt-rocket-flame); font-weight: 600; font-size: 14px; font-family: var(--pt-font-body);
}
.card-body { padding: 40px 48px; }
.card-body-terms { padding-bottom: 16px; }
.card-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 16px 48px; border-top: 1px solid var(--pt-lunar-dust);
}
.card-foot .btn { height: 44px; padding: 0 20px; }
.card-foot .btn-light { background: var(--pt-cosmic-fog); }
.card-foot .btn-light:hover { background: var(--pt-lunar-dust); }
.card-title { text-align: center; font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.card-sub { text-align: center; color: var(--pt-fg-muted); margin-top: 6px; }

/* ============ Step 0 — job prompt ============ */
.prompt-wrap {
    max-width: 660px; margin: 0 auto; padding: 0 24px;
    min-height: calc(100vh - 80px);
    display: flex; flex-direction: column; justify-content: center;
    gap: 24px; transform: translateY(-6%);
}
.prompt-title { text-align: center; font-size: 32px; font-weight: 500; letter-spacing: -.01em; margin: 0; }
.prompt-sub { text-align: center; color: var(--pt-fg-muted); font-size: 18px; margin: -8px 0 0; }
.composer {
    background: var(--pt-surface); border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg); padding: 16px; transition: border-color .15s var(--pt-ease-paper);
}
.composer:focus-within { border-color: var(--pt-rocket-flame); }
.composer .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.filechip {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px;
    border: 1px solid var(--pt-lunar-dust); border-radius: var(--pt-radius-pill);
    font-size: 13px; color: var(--pt-fg-muted); background: var(--pt-surface);
}
.filechip i.ph-file-pdf { color: var(--pt-red-alert); font-size: 15px; }
.filechip .x { border: 0; background: transparent; cursor: pointer; color: var(--pt-fg-muted); display: flex; padding: 2px; border-radius: var(--pt-radius-pill); }
.filechip .x:hover { background: rgba(34, 35, 38, 0.04); }
.composer textarea {
    width: 100%; border: 0; outline: 0; resize: none; background: transparent;
    font-size: 16px; color: var(--pt-fg); padding: 8px 6px 4px; min-height: 64px; line-height: 1.5;
    font-family: var(--pt-font-body);
}
.composer textarea::placeholder { color: var(--pt-fg-muted); }
.composer-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.icon-btn {
    width: 36px; height: 36px; border: 0; background: transparent; border-radius: var(--pt-radius-pill);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--pt-rocket-flame); font-size: 20px;
    transition: background .15s var(--pt-ease-paper), color .15s var(--pt-ease-paper), transform .15s var(--pt-ease-paper);
}
.icon-btn:hover { background: rgba(237, 96, 51, 0.08); color: #d95428; }
.icon-btn:active { transform: scale(0.94); }
.icon-btn.is-dictating { color: var(--pt-rocket-flame); background: rgba(237, 96, 51, 0.08); }
@media (prefers-reduced-motion: no-preference) {
    .icon-btn.is-dictating { animation: pt-mic-pulse 1.6s ease-in-out infinite; }
    @keyframes pt-mic-pulse { 50% { opacity: 0.55; } }
}
.send-btn {
    width: 40px; height: 40px; border-radius: var(--pt-radius-pill); border: 0; cursor: pointer;
    background: var(--pt-rocket-flame); color: #fff; font-size: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .15s var(--pt-ease-paper), background .15s var(--pt-ease-paper);
}
.send-btn:hover { background: #d95428; }
.send-btn:active { transform: scale(0.94); }
.send-btn:disabled { background: var(--pt-lunar-dust); color: var(--pt-fg-muted); cursor: not-allowed; }
.send-btn:disabled:hover { background: var(--pt-lunar-dust); }
.send-btn:disabled:active { transform: none; }
.coming-soon { text-align: center; color: var(--pt-fg-muted); font-size: 15px; margin: 12px 0 0; }
.composer-bar .group { display: flex; align-items: center; gap: 4px; }

/* ============ Fee sidebar ============ */
.fee {
    width: 300px; flex: 0 0 300px; border: 1px solid var(--pt-border);
    border-radius: 10px; background: rgba(226, 222, 221, 0.2); padding: 4px;
}
.fee-head { padding: 10px 16px; }
.fee-label { font-size: 16px; color: var(--pt-fg-muted); }

/* price — prior 24px look, structured for the was->now reveal */
.fee-price { position: relative; }
.fee-amount { font-size: 24px; font-weight: 600; letter-spacing: -.04em; line-height: 1.3; }
.fee-now { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(8px); }
.fee-was { position: relative; display: inline-block; vertical-align: top; }
.fee-strike {
    position: absolute; left: 0; right: 0; top: 50%; height: 2px;
    background: var(--pt-rocket-flame); transform: scaleX(0); transform-origin: left;
}

/* discount field — prior grey input. Form and applied chip overlap in the slot so
   they can cross-fade; the visible one is in flow and sizes the slot, the hidden one
   is absolute (so an un-applied slot stays input-height, not chip-height). */
.discount-slot { position: relative; margin-bottom: 8px; }
.discount-form {
    position: relative; display: flex; align-items: center; height: 40px;
    padding: 0 6px 0 16px; background: var(--pt-surface);
    border: 1px solid var(--pt-lunar-dust); border-radius: var(--pt-radius-pill);
}
.discount-input {
    flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0;
    background: transparent; font-size: 14px; color: var(--pt-fg); font-family: var(--pt-font-body);
}
.discount-input::placeholder { color: var(--pt-fg-muted); }
.discount-apply {
    border: 0; background: transparent; cursor: pointer; padding: 6px 10px;
    font-size: 14px; font-weight: 500; color: var(--pt-fg-muted); font-family: var(--pt-font-body);
    border-radius: var(--pt-radius-pill);
}
button.discount-apply:hover { color: var(--pt-graphite-core); }
.discount-apply:disabled { opacity: .6; cursor: default; }

/* applied confirmation — single line at the input's height so the Includes
   section never shifts when a code is applied */
.discount-applied {
    position: absolute; left: 0; right: 0; top: 0;
    display: flex; align-items: center; gap: 8px; height: 40px;
    padding: 0 8px 0 14px; border-radius: 10px;
    background: var(--pt-galactic-seafoam-20); color: var(--pt-ink-on-seafoam-20);
    font-size: 13px; line-height: 1.3;
    opacity: 0; transform: translateY(12px); pointer-events: none;
}
.discount-applied > i { font-size: 16px; flex: 0 0 auto; }
.discount-applied-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.discount-applied-text strong { font-weight: 600; }
.discount-applied form { display: contents; }
.discount-remove {
    flex: 0 0 auto; background: none; border: 0; cursor: pointer; color: inherit;
    opacity: .75; font-size: 14px; line-height: 1; padding: 3px;
}
.discount-remove:hover { opacity: 1; }

/* applied end state — static, so reduced-motion users land here instantly. Swap which
   element is in flow so the slot is input-height until a code applies. */
.fee.is-applied .fee-strike { transform: scaleX(1); }
.fee.is-applied .fee-was { transform: translateY(-14px) scale(.9); opacity: 0; }
.fee.is-applied .fee-now { transform: translateY(0); opacity: 1; }
.fee.is-applied .discount-form { position: absolute; left: 0; right: 0; top: 0; transform: translateY(-10px); opacity: 0; pointer-events: none; }
.fee.is-applied .discount-applied { position: relative; transform: translateY(0); opacity: 1; pointer-events: auto; }

/* the "lift away" choreography — motion only */
@media (prefers-reduced-motion: no-preference) {
    .fee-now, .fee-was { transition: transform .2s var(--pt-ease-settle), opacity .2s var(--pt-ease-settle); }
    .fee-strike { transition: transform .12s var(--pt-ease-settle); }
    .discount-form, .discount-applied { transition: transform .2s var(--pt-ease-settle), opacity .2s var(--pt-ease-settle); }

    /* Departures ride --pt-ease-push, which is ease-in fronted: the old price
       and the form hang, then accelerate away. Arrivals ride --pt-ease-paper so
       they land fast off an already-delayed start instead of easing in twice. */
    .fee.is-applied .fee-strike { transition: transform .26s var(--pt-ease-typewriter); }
    .fee.is-applied .fee-was { transition: transform .3s var(--pt-ease-push) .28s, opacity .24s var(--pt-ease-push) .28s; }
    .fee.is-applied .fee-now { transition: transform .32s var(--pt-ease-paper) .32s, opacity .3s var(--pt-ease-paper) .32s; }
    .fee.is-applied .discount-form { transition: transform .22s var(--pt-ease-settle) .36s, opacity .18s var(--pt-ease-settle) .36s; }
    .fee.is-applied .discount-applied { transition: transform .28s var(--pt-ease-paper) .36s, opacity .24s var(--pt-ease-paper) .36s; }
}
.fee-includes { background: var(--pt-surface); border: 1px solid rgba(226, 222, 221, 0.8); border-radius: 8px; padding: 16px; }
.fee-includes-title { font-size: 14px; font-weight: 500; letter-spacing: -.04em; margin-bottom: 8px; }
.fee-row {
    display: flex; align-items: center; gap: 8px; height: 32px; padding: 4px;
    border-radius: 4px; background: rgba(226, 222, 221, 0.2);
    color: var(--pt-fg-muted); font-size: 14px; margin-bottom: 4px; white-space: nowrap;
}
.fee-row:last-child { margin-bottom: 0; }
.fee-row i { font-size: 16px; width: 24px; text-align: center; }

/* ============ Accordion (filters) ============ */
.acc-item + .acc-item { margin-top: 32px; }
.acc-head {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 4px 0; background: transparent; border: 0; cursor: pointer; text-align: left;
    font-family: var(--pt-font-body); font-size: 16px; font-weight: 500; letter-spacing: -.02em; color: var(--pt-fg);
}
.acc-head i.lead { color: var(--pt-rocket-flame); font-size: 20px; }
.acc-head .caret { margin-left: auto; color: var(--pt-steel-gray); font-size: 18px; transition: transform .24s var(--pt-ease-paper); }
.acc-item.open .acc-head .caret { transform: rotate(180deg); }

/* Collapse on grid-template-rows so the panel opens in step with its caret
   (both .24s) instead of teleporting. visibility keeps a closed panel out of
   the tab order the way display:none did — on close it flips only after the
   collapse finishes, so the content doesn't vanish mid-motion. */
.acc-panel { display: grid; grid-template-rows: 0fr; }
.acc-panel__inner { overflow: hidden; min-height: 0; visibility: hidden; padding-top: 16px; }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-item.open .acc-panel__inner { visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
    .acc-panel { transition: grid-template-rows .24s var(--pt-ease-paper); }
    .acc-panel__inner { transition: visibility 0s linear .24s; }
    .acc-item.open .acc-panel__inner { transition-delay: 0s; }
}

.field-label { font-size: 13px; color: var(--pt-fg-muted); margin-bottom: 8px; display: block; }
.row2 { display: flex; gap: 16px; }
.row2 > div { flex: 1; }
.input, .select {
    width: 100%; height: 44px; padding: 0 16px; border: 1px solid var(--pt-lunar-dust);
    border-radius: var(--pt-radius-pill); background: var(--pt-surface); font-size: 15px; color: var(--pt-fg); outline: 0;
    font-family: var(--pt-font-body);
}
.input::placeholder { color: var(--pt-fg-muted); }
.input:focus, .select:focus { border-color: var(--pt-steel-gray); }
.select-wrap { position: relative; }
.select-wrap > i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--pt-steel-gray); pointer-events: none; font-size: 16px; }
.select { appearance: none; -webkit-appearance: none; cursor: pointer; }
textarea.input { height: auto; min-height: 96px; padding: 12px 16px; border-radius: var(--pt-radius-sm); resize: vertical; line-height: 1.5; }

.seg {
    display: inline-flex; background: var(--pt-surface); border: 1px solid var(--pt-lunar-dust);
    border-radius: var(--pt-radius-pill); padding: 2px;
}
.seg button {
    border: 1px solid transparent; background: transparent; cursor: pointer; height: 34px; padding: 0 18px;
    border-radius: var(--pt-radius-pill); font-size: 14px; font-weight: 500; color: var(--pt-fg-muted);
    font-family: var(--pt-font-body);
    transition: background .15s var(--pt-ease-paper), color .15s var(--pt-ease-paper), transform .15s var(--pt-ease-paper);
}
.seg button:active { transform: scale(0.97); }
.seg button.on { background: var(--pt-cosmic-fog); border-color: var(--pt-lunar-dust); color: var(--pt-graphite-core); }

.chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tagchip {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
    border: 1px solid var(--pt-lunar-dust); border-radius: var(--pt-radius-pill);
    font-size: 14px; color: var(--pt-fg-muted); background: var(--pt-cosmic-fog);
}
.tagchip .x { cursor: pointer; display: flex; }

/* Chips are rendered by x-for, which x-transition can't reach — a one-shot
   keyframe on the chip itself runs per newly keyed node instead. */
@media (prefers-reduced-motion: no-preference) {
    .tagchip { animation: emp-chip-in .15s var(--pt-ease-paper) both; }
    @keyframes emp-chip-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
}

/* compensation histogram + ruler */
.hist { display: flex; align-items: flex-end; gap: 8px; height: 72px; margin-top: 24px; }
.hist .bar { flex: 1; background: var(--pt-cosmic-fog); border-radius: 4px; }
.hist .bar.on { background: var(--pt-galactic-seafoam); }
.ruler {
    position: relative; height: 12px; margin-top: 10px;
    background: repeating-linear-gradient(90deg, var(--pt-lunar-dust) 0 1.5px, transparent 1.5px 6px);
}
.ruler .fill {
    position: absolute; top: 0; bottom: 0;
    background: repeating-linear-gradient(90deg, var(--pt-galactic-seafoam) 0 1.5px, transparent 1.5px 6px);
}
.ruler .handle {
    position: absolute; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px;
    border-radius: var(--pt-radius-pill); background: #fff; border: 1px solid var(--pt-galactic-seafoam);
    display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--pt-galactic-seafoam);
}

/* ============ Pills (comms / call) ============ */
.pillrow { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.pillrow.start { justify-content: flex-start; }
.opt-pill {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
    border: 1px solid var(--pt-lunar-dust); border-radius: var(--pt-radius-pill); background: var(--pt-surface);
    cursor: pointer; font-size: 15px; font-weight: 500; color: var(--pt-fg); font-family: var(--pt-font-body);
    transition: border-color .15s var(--pt-ease-paper), color .15s var(--pt-ease-paper), background .15s var(--pt-ease-paper),
                transform .15s var(--pt-ease-paper);
}
.opt-pill:hover { background: var(--pt-cosmic-fog); }
.opt-pill:active { transform: scale(0.97); }
.opt-pill:disabled:active { transform: none; }
.opt-pill.on { border-color: var(--pt-rocket-flame); color: var(--pt-rocket-flame); }
.opt-pill svg { display: block; }
.opt-pill i.brand { color: var(--pt-rocket-flame); font-size: 18px; }
.opt-pill:disabled { opacity: .45; cursor: not-allowed; }
.opt-pill:disabled:hover { background: var(--pt-surface); }
.reveal { margin-top: 24px; display: none; }
.reveal.show { display: block; animation: emp-fadeup .24s var(--pt-ease-paper) both; }

.phone-row { display: flex; gap: 12px; }
.cc {
    display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px;
    border: 1px solid var(--pt-lunar-dust); border-radius: 14px; background: var(--pt-surface);
    cursor: pointer; font-size: 15px; color: var(--pt-fg); white-space: nowrap;
}
.cc i { color: var(--pt-steel-gray); font-size: 14px; }
.cc .flag { width: 20px; height: 14px; border-radius: 3px; overflow: hidden; display: block; }

/* ============ Terms ============ */
.terms-scroll {
    max-height: 420px; overflow-y: auto; padding-right: 16px; margin-top: 8px;
    color: var(--pt-fg-muted); font-size: 15px; line-height: 1.6;
}
.terms-scroll h4 { color: var(--pt-graphite-core); font-size: 18px; font-weight: 500; margin: 24px 0 8px; }
.terms-scroll h4:first-child { margin-top: 0; }
.terms-scroll ul { margin: 8px 0; padding-left: 22px; }
.terms-scroll::-webkit-scrollbar { width: 8px; }
.terms-scroll::-webkit-scrollbar-thumb { background: var(--pt-lunar-dust); border-radius: 8px; }
.terms-download { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 12px; font-weight: 500; color: var(--pt-rocket-flame); }
.terms-download i { font-size: 13px; }
.agree { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 15px; cursor: pointer; }
.agree input { width: 20px; height: 20px; accent-color: var(--pt-rocket-flame); cursor: pointer; }

/* ============ Sales flow ============ */
.sales-id { display: none; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.sales-id.show { display: grid; animation: emp-fadeup .24s var(--pt-ease-paper) both; }
.sales-id-full { grid-column: 1 / -1; }
.terms-download-inline { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; font-weight: 500; color: var(--pt-rocket-flame); }
.terms-download-inline i { font-size: 12px; }
.terms-consent { margin-right: auto; font-size: 13px; color: var(--pt-fg-muted); }
.terms-scroll-card { border: 1px solid var(--pt-lunar-dust); border-radius: 8px; padding: 16px; margin: 20px 0; }

/* ============ Role launched (complete) ============ */
.success {
    min-height: calc(100vh - 160px); display: flex;
    align-items: center; justify-content: center; padding: 40px 24px;
}
.success-card {
    position: relative; width: 580px; max-width: 100%; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 44px 0 0; background: var(--pt-surface); border-radius: var(--pt-radius-lg);
    box-shadow: 0 12px 32px rgba(34, 35, 38, 0.08), 0 2px 8px rgba(34, 35, 38, 0.06);
}
.success-card .close {
    position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
    border: 0; background: transparent; border-radius: var(--pt-radius-pill);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--pt-fg-muted); font-size: 18px;
    transition: background .15s var(--pt-ease-paper), color .15s var(--pt-ease-paper);
}
.success-card .close:hover { background: rgba(34, 35, 38, 0.04); color: var(--pt-graphite-core); }
/* Achievement patch: radius clips the photo's white corners. */
.success .patch {
    width: 84px; height: 84px; border-radius: 12%;
}
.success h1 { font-family: var(--pt-font-body); font-weight: 500; font-size: 28px; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
.success .sub { max-width: 380px; margin: -6px 0 0; color: var(--pt-fg-muted); font-size: 16px; line-height: 1.5; }
.launch-summary {
    width: calc(100% - 48px); padding: 20px 24px; text-align: left;
    background: var(--pt-bg); border-radius: var(--pt-radius-md);
}
.launch-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-fg-muted); }
.launch-title { margin: 10px 0 0; font-size: 20px; font-weight: 600; color: var(--pt-graphite-core); }
.launch-company { margin: 2px 0 0; font-size: 14px; font-weight: 500; color: var(--pt-fg-muted); }
.launch-desc { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--pt-fg-muted); }
.success-foot {
    width: 100%; margin-top: 8px; padding: 20px 0 24px;
    border-top: 1px solid var(--pt-border);
}
/* Slack accept walkthrough GIF: white background, so it sits borderless on the
   card; sized to the card's content inset like .launch-summary. */
.success-foot .slack-accept {
    display: block; margin: 0 auto; width: calc(100% - 48px); max-width: 480px; height: auto;
}
.launch-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px;
    font-size: 14px; font-weight: 500; color: var(--pt-graphite-core);
}
.launch-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.launch-meta i { font-size: 16px; color: var(--pt-steel-gray); }
.launch-meta .sep { width: 4px; height: 4px; border-radius: var(--pt-radius-pill); background: var(--pt-lunar-dust); }
.status-open {
    padding: 4px 12px; border-radius: var(--pt-radius-pill); font-size: 13px;
    background: var(--pt-galactic-seafoam-20); color: var(--pt-graphite-core);
}
.status-open .dot { width: 6px; height: 6px; border-radius: var(--pt-radius-pill); background: var(--pt-galactic-seafoam); }

/* Slack Connect prompt on the success page: an inline invite-to-link card that
   mirrors .launch-summary's framing with a seafoam accent + Slack CTA. */
.connect-card {
    width: calc(100% - 48px); margin-top: 4px; padding: 18px 20px; text-align: left;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: var(--pt-galactic-seafoam-20); border-radius: var(--pt-radius-md);
}
.connect-badge {
    flex: none; width: 40px; height: 40px; border-radius: var(--pt-radius-pill);
    display: flex; align-items: center; justify-content: center;
    background: var(--pt-surface); color: var(--pt-graphite-core); font-size: 22px;
}
.connect-copy { flex: 1; min-width: 180px; }
.connect-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--pt-graphite-core); }
.connect-sub { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--pt-fg-muted); }
.connect-cta { flex: none; gap: 8px; }

/* ============ Field errors ============ */
/* .field-error / .input.is-invalid and the toast moved to the shared
   portal/css/styles.css (.pt-toast); only the employer-only composer
   selector stays here. */
.composer.is-invalid { border-color: var(--pt-red-alert); }

@media (max-width: 920px) {
    .wizard { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 40px 20px 64px; }
    .fee { width: 580px; max-width: 100%; }
    .card-body, .card-foot { padding-left: 24px; padding-right: 24px; }
}