@charset "UTF-8";
/* =============================================================================
   Octonics Talent Network — Design System
   -----------------------------------------------------------------------------
   One stylesheet, no framework, no external fonts, no image requests.
   Layout order:
     01 tokens · 02 reset · 03 background · 04 typography · 05 buttons
     06 layout · 07 header · 08 hero · 09 sections · 10 positions
     11 footer · 12 apply/progress · 13 form controls · 14 skills · 15 upload
     16 consent/submit · 17 success · 18 legal · 19 utilities · 20 motion
   ========================================================================== */

/* -----------------------------------------------------------------------------
   01 · Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces */
    --ink:            #05070c;
    --ink-2:          #080c16;
    --surface:        rgba(255, 255, 255, .034);
    --surface-strong: rgba(255, 255, 255, .058);
    --surface-solid:  #0b1020;

    /* Text */
    --text:           #eaf0fa;
    --text-muted:     #97a6bd;
    --text-faint:     #6c7b93;

    /* Lines */
    --line:           rgba(255, 255, 255, .085);
    --line-strong:    rgba(255, 255, 255, .16);

    /* Accents */
    --accent:         #38bdf8;
    --accent-2:       #818cf8;
    --accent-3:       #22d3ee;
    --accent-soft:    rgba(56, 189, 248, .14);
    --gradient:       linear-gradient(115deg, #6366f1 0%, #38bdf8 55%, #22d3ee 100%);
    --gradient-text:  linear-gradient(115deg, #c7d2fe 0%, #7dd3fc 45%, #67e8f9 100%);

    /* Feedback */
    --danger:         #fb7185;
    --danger-soft:    rgba(251, 113, 133, .12);
    --success:        #34d399;
    --success-soft:   rgba(52, 211, 153, .12);
    --warning:        #fbbf24;

    /* Radii */
    --r-sm:  10px;
    --r-md:  14px;
    --r-lg:  20px;
    --r-xl:  28px;
    --r-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, .65);
    --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, .85);
    --glow:      0 0 0 1px rgba(56, 189, 248, .28), 0 12px 40px -14px rgba(56, 189, 248, .45);

    /* Rhythm */
    --shell:    1180px;
    --shell-pad: clamp(1.15rem, 4vw, 2.5rem);
    --section:  clamp(4.5rem, 10vw, 8rem);

    /* Type */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
            "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Motion */
    --ease:  cubic-bezier(.22, .61, .36, 1);
    --fast:  .16s var(--ease);
    --base:  .28s var(--ease);
    --slow:  .55s var(--ease);
}

/* -----------------------------------------------------------------------------
   02 · Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
}

body {
    min-height: 100%;
    background: var(--ink);
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.65;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

/* A class such as .btn (display:inline-flex) outranks the UA's [hidden] rule,
   so the attribute is enforced here for every element. */
[hidden] { display: none !important; }

a { color: var(--accent); text-decoration: none; transition: color var(--fast); }
a:hover { color: var(--accent-3); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: rgba(56, 189, 248, .28); color: #fff; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: .85rem 1.4rem;
    background: var(--surface-solid);
    border: 1px solid var(--line-strong);
    border-radius: 0 0 var(--r-md) 0;
    color: var(--text);
    font-weight: 600;
}
.skip-link:focus { left: 0; }

/* -----------------------------------------------------------------------------
   03 · Decorative background
   -------------------------------------------------------------------------- */
.bg-field {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 50% -10%, #0a1128 0%, var(--ink) 58%),
        var(--ink);
}

.bg-grid {
    position: absolute;
    inset: -20%;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 10%, transparent 72%);
    opacity: .75;
}

.bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .42;
    will-change: transform;
}
.bg-glow--one {
    width: 46rem; height: 46rem;
    top: -18rem; left: -12rem;
    background: radial-gradient(circle, rgba(99, 102, 241, .55), transparent 68%);
    animation: drift-a 26s var(--ease) infinite alternate;
}
.bg-glow--two {
    width: 40rem; height: 40rem;
    top: -10rem; right: -14rem;
    background: radial-gradient(circle, rgba(34, 211, 238, .42), transparent 68%);
    animation: drift-b 32s var(--ease) infinite alternate;
}
.bg-glow--three {
    width: 34rem; height: 34rem;
    top: 62%; left: 40%;
    background: radial-gradient(circle, rgba(56, 189, 248, .22), transparent 70%);
    animation: drift-a 38s var(--ease) infinite alternate-reverse;
}

@keyframes drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(6rem, 4rem, 0) scale(1.12); }
}
@keyframes drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.05); }
    to   { transform: translate3d(-5rem, 6rem, 0) scale(.94); }
}

/* -----------------------------------------------------------------------------
   04 · Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
    line-height: 1.14;
    letter-spacing: -.028em;
    font-weight: 680;
    text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 8vw, 5.2rem); }
h2 { font-size: clamp(1.85rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing: -.018em; }

p { text-wrap: pretty; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .74rem;
    font-weight: 620;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--accent);
}
.eyebrow::before {
    content: "";
    width: 1.9rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent));
}

.gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lede {
    font-size: clamp(1.02rem, 1.9vw, 1.22rem);
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 48ch;
}

.section-head { max-width: 60ch; margin-bottom: clamp(2.25rem, 5vw, 3.25rem); }
.section-head p { margin-top: 1rem; color: var(--text-muted); font-size: 1.03rem; }

/* -----------------------------------------------------------------------------
   05 · Buttons
   -------------------------------------------------------------------------- */
.btn {
    --btn-pad: 1.02rem 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3.25rem;
    padding: var(--btn-pad);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: .97rem;
    font-weight: 620;
    letter-spacing: -.008em;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--fast), box-shadow var(--base), background var(--base),
                border-color var(--base), color var(--base), opacity var(--fast);
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.btn--primary {
    position: relative;
    background: var(--gradient);
    color: #04121c;
    box-shadow: 0 10px 30px -12px rgba(56, 189, 248, .7);
    font-weight: 680;
}
.btn--primary:hover {
    color: #04121c;
    transform: translateY(-2px);
    box-shadow: 0 18px 44px -14px rgba(56, 189, 248, .85);
}

.btn--ghost {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--text);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover {
    background: var(--surface-strong);
    border-color: rgba(56, 189, 248, .45);
    color: var(--text);
    transform: translateY(-2px);
}

.btn--quiet { background: transparent; border-color: var(--line); color: var(--text-muted); }
.btn--quiet:hover { color: var(--text); border-color: var(--line-strong); }

.btn--sm { --btn-pad: .62rem 1.15rem; min-height: 2.6rem; font-size: .88rem; }
.btn--lg { --btn-pad: 1.15rem 2.4rem; min-height: 3.6rem; font-size: 1.03rem; }
.btn--block { width: 100%; }

.btn__spinner {
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid rgba(0, 0, 0, .25);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -----------------------------------------------------------------------------
   06 · Layout
   -------------------------------------------------------------------------- */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--shell-pad);
}
.shell--narrow { max-width: 820px; }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 7vw, 5rem); }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* -----------------------------------------------------------------------------
   07 · Site header
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(5, 7, 12, .72);
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    transition: border-color var(--base), background var(--base);
}
.site-header.is-stuck {
    border-bottom-color: var(--line);
    background: rgba(5, 7, 12, .9);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 4.5rem;
}

/* The wordmark is supplied as artwork (logo/logo.png, recoloured for dark
   surfaces by tools/generate-assets.php), with "Talent Network" set beneath. */
.brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    color: var(--text);
    transition: opacity var(--fast);
}
.brand:hover { color: var(--text); opacity: .82; }

.brand__logo {
    height: 1.4rem;
    width: auto;
    flex: none;
}
.brand__sub {
    font-size: .58rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--text-faint);
    line-height: 1;
    padding-left: .1em;
}

@media (max-width: 520px) {
    .brand__logo { height: 1.2rem; }
    .brand__sub { font-size: .53rem; letter-spacing: .2em; }
}

.site-nav {
    display: none;
    margin-left: auto;
    gap: 2rem;
}
.site-nav a {
    position: relative;
    color: var(--text-muted);
    font-size: .92rem;
    font-weight: 520;
    padding-block: .35rem;
}
.site-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: var(--accent);
    transition: width var(--base);
}
.site-nav a:hover { color: var(--text); }
.site-nav a:hover::after { width: 100%; }

.site-header__cta { margin-left: auto; }
.site-nav + .site-header__cta { margin-left: 0; }

@media (min-width: 900px) {
    .site-nav { display: flex; }
}

/* -----------------------------------------------------------------------------
   08 · Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    padding-block: clamp(3.5rem, 11vw, 7.5rem) clamp(2rem, 5vw, 3.5rem);
}

.hero__inner { max-width: 62rem; }

.hero__eyebrow { margin-bottom: 1.75rem; }

.hero h1 {
    margin-bottom: 1.6rem;
    font-weight: 700;
    letter-spacing: -.042em;
}
.hero h1 .hero__line { display: block; }
.hero h1 .hero__line--muted {
    color: var(--text-faint);
    font-size: .42em;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: .9rem;
}

.hero__sub {
    max-width: 46ch;
    margin-bottom: 1rem;
    font-size: clamp(1.05rem, 2.1vw, 1.3rem);
    line-height: 1.65;
    color: var(--text-muted);
}
.hero__note {
    max-width: 44ch;
    margin-bottom: 2.5rem;
    font-size: .96rem;
    color: var(--text-faint);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-bottom: 3rem;
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem .9rem;
    font-size: .82rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.hero__meta li { display: flex; align-items: center; gap: .9rem; }
.hero__meta li:not(:last-child)::after {
    content: "";
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: .55;
}

.hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    margin-top: clamp(3.5rem, 8vw, 5rem);
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.hero__stat {
    padding: 1.5rem 1.6rem;
    background: rgba(8, 12, 22, .72);
}
.hero__stat dt {
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: .45rem;
}
.hero__stat dd {
    font-size: 1.6rem;
    font-weight: 680;
    letter-spacing: -.03em;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* -----------------------------------------------------------------------------
   09 · Content sections
   -------------------------------------------------------------------------- */
.grid-cards {
    display: grid;
    gap: 1.1rem;
    /* 15.5rem keeps four cards on one row at the 1180px shell width. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}

.value-card {
    position: relative;
    padding: 1.9rem 1.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--base), border-color var(--base), background var(--base);
}
.value-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .55), transparent);
    opacity: 0;
    transition: opacity var(--base);
}
.value-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    background: var(--surface-strong);
}
.value-card:hover::before { opacity: 1; }

.value-card__icon {
    display: grid;
    place-items: center;
    width: 2.85rem; height: 2.85rem;
    margin-bottom: 1.25rem;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    border: 1px solid rgba(56, 189, 248, .22);
    color: var(--accent);
}
.value-card h3 { margin-bottom: .6rem; }
.value-card p { color: var(--text-muted); font-size: .95rem; }

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.chip-row li {
    padding: .42rem .95rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: .82rem;
    color: var(--text-muted);
}
.chip-row--quiet li { background: transparent; font-size: .78rem; }

.steps {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    counter-reset: step;
}
.step {
    position: relative;
    padding: 1.6rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.step::before {
    counter-increment: step;
    content: "0" counter(step);
    display: block;
    margin-bottom: .9rem;
    font-family: var(--mono);
    font-size: .82rem;
    letter-spacing: .1em;
    color: var(--accent);
}
.step h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.step p { font-size: .92rem; color: var(--text-muted); }

.cta-band {
    position: relative;
    padding: clamp(2.5rem, 6vw, 4rem);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(99, 102, 241, .2), transparent 60%),
        radial-gradient(120% 140% at 100% 100%, rgba(34, 211, 238, .16), transparent 60%),
        var(--surface);
    text-align: center;
    overflow: hidden;
}
.cta-band h2 { margin-bottom: .9rem; }
.cta-band p { margin: 0 auto 2rem; color: var(--text-muted); max-width: 46ch; }

/* -----------------------------------------------------------------------------
   10 · Open positions
   -------------------------------------------------------------------------- */
.positions { display: grid; gap: .8rem; }

.position {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 1.5rem 1.65rem;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    transition: transform var(--base), border-color var(--base), background var(--base);
}
.position:hover {
    transform: translateY(-3px);
    border-color: rgba(56, 189, 248, .4);
    background: var(--surface-strong);
}

.position__main { flex: 1 1 18rem; min-width: 0; }
.position__title {
    font-size: 1.12rem;
    font-weight: 640;
    letter-spacing: -.018em;
    color: var(--text);
    margin-bottom: .45rem;
}
.position__desc {
    font-size: .92rem;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.position__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .85rem;
}
.position__tags li {
    padding: .3rem .75rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--line);
    font-size: .76rem;
    color: var(--text-faint);
    letter-spacing: .02em;
}
.position__action { flex: none; margin-left: auto; }

.positions-empty {
    padding: 2.5rem 2rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-lg);
    text-align: center;
    color: var(--text-muted);
}
.positions-empty strong { display: block; color: var(--text); margin-bottom: .5rem; font-size: 1.05rem; }

/* -----------------------------------------------------------------------------
   11 · Footer
   -------------------------------------------------------------------------- */
.site-footer {
    margin-top: clamp(4rem, 10vw, 7rem);
    padding-block: clamp(3rem, 7vw, 4.5rem) 2rem;
    border-top: 1px solid var(--line);
    background: rgba(4, 6, 11, .6);
}
.site-footer__top {
    display: grid;
    gap: 2.75rem;
    grid-template-columns: 1fr;
}
@media (min-width: 820px) {
    .site-footer__top { grid-template-columns: 1.3fr 1.7fr; gap: 3rem; }
}
.site-footer__logo {
    height: 1.5rem;
    width: auto;
    margin-bottom: .95rem;
}
.site-footer__tagline {
    max-width: 38ch;
    margin-bottom: 1.25rem;
    color: var(--text-muted);
    font-size: .93rem;
}
.site-footer__cols {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.site-footer__col h2 {
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 1rem;
    font-weight: 620;
}
.site-footer__col li { margin-bottom: .6rem; }
.site-footer__col a, .site-footer__col span {
    color: var(--text-muted);
    font-size: .93rem;
}
.site-footer__col a:hover { color: var(--accent); }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
    font-size: .84rem;
    color: var(--text-faint);
}
.site-footer__legal { display: flex; gap: 1.5rem; }
.site-footer__legal a { color: var(--text-faint); }
.site-footer__legal a:hover { color: var(--accent); }

/* -----------------------------------------------------------------------------
   12 · Apply page shell + progress
   -------------------------------------------------------------------------- */
.page-apply { --section: clamp(2.5rem, 6vw, 4rem); }

.apply-head { padding-block: clamp(2.25rem, 6vw, 3.5rem) 1.5rem; }
.apply-head h1 {
    font-size: clamp(1.85rem, 5vw, 2.9rem);
    margin-bottom: .8rem;
}
.apply-head p { color: var(--text-muted); max-width: 52ch; }

.applying-for {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    margin-bottom: 1.75rem;
    padding: 1rem 1.35rem;
    border: 1px solid rgba(56, 189, 248, .28);
    border-radius: var(--r-md);
    background: linear-gradient(100deg, rgba(56, 189, 248, .1), rgba(99, 102, 241, .06));
}
.applying-for__label {
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 620;
}
.applying-for__title { font-size: 1.08rem; font-weight: 640; letter-spacing: -.015em; }
.applying-for__meta { font-size: .85rem; color: var(--text-muted); }
.applying-for__change { margin-left: auto; font-size: .84rem; color: var(--text-faint); }
.applying-for__change:hover { color: var(--accent); }

/* Progress -------------------------------------------------------------- */
.progress { margin-bottom: 1.75rem; }

.progress__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .7rem;
}
.progress__step {
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.progress__step b { color: var(--text); font-weight: 640; }
.progress__percent {
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--accent);
}

.progress__track {
    height: 4px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .075);
    overflow: hidden;
}
.progress__bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--gradient);
    transition: width var(--slow);
}

.progress__dots {
    display: none;
    gap: .4rem;
    margin-top: 1rem;
}
.progress__dot {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 0;
    text-align: left;
    color: var(--text-faint);
    font-size: .74rem;
    letter-spacing: .01em;
    background: none;
    border: 0;
    transition: color var(--base);
}
.progress__dot::before {
    content: "";
    height: 2px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .09);
    transition: background var(--base);
}
.progress__dot[data-state="done"] { color: var(--text-muted); cursor: pointer; }
.progress__dot[data-state="done"]::before { background: rgba(56, 189, 248, .55); }
.progress__dot[data-state="current"] { color: var(--text); font-weight: 620; }
.progress__dot[data-state="current"]::before { background: var(--accent); }
.progress__dot:disabled { cursor: default; }

@media (min-width: 780px) {
    .progress__dots { display: flex; }
}

/* Form card ------------------------------------------------------------- */
.form-card {
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: rgba(9, 13, 24, .74);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-lg);
}

.step-panel { display: none; }
.step-panel.is-active { display: block; animation: panel-in .38s var(--ease); }

@keyframes panel-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.step-panel__head { margin-bottom: 1.9rem; }
.step-panel__head h2 {
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    margin-bottom: .5rem;
}
.step-panel__head p { color: var(--text-muted); font-size: .95rem; max-width: 54ch; }

/* -----------------------------------------------------------------------------
   13 · Form controls
   -------------------------------------------------------------------------- */
.field-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field-grid--single { grid-template-columns: minmax(0, 1fr); }

.field { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }

@media (max-width: 640px) {
    .field-grid { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
}

.label {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-size: .88rem;
    font-weight: 560;
    color: var(--text);
    letter-spacing: -.005em;
}
.label .req { color: var(--accent); font-weight: 700; }
.label .opt {
    margin-left: auto;
    font-size: .74rem;
    font-weight: 500;
    color: var(--text-faint);
    letter-spacing: .04em;
}

.hint { font-size: .8rem; color: var(--text-faint); line-height: 1.5; }

.control {
    width: 100%;
    min-height: 3.15rem;
    padding: .82rem 1rem;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text);
    font-size: 1rem;   /* 16px keeps iOS from zooming on focus */
    line-height: 1.5;
    transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
    appearance: none;
    -webkit-appearance: none;
}
.control::placeholder { color: #5d6b81; }
.control:hover:not(:disabled) { border-color: var(--line-strong); }
.control:focus {
    outline: none;
    border-color: rgba(56, 189, 248, .65);
    background: rgba(255, 255, 255, .055);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .16);
}
.control:disabled { opacity: .5; cursor: not-allowed; }

textarea.control { min-height: 8.5rem; resize: vertical; line-height: 1.7; }

select.control {
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2397a6bd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.05rem center;
    background-size: .72rem;
    cursor: pointer;
}
select.control option { background: #0b1020; color: var(--text); }
select.control:invalid, select.control[data-placeholder="true"] { color: #5d6b81; }

/* Date inputs keep their native picker but match the dark surface. */
input[type="date"].control { color-scheme: dark; }

/* Phone: prefix select + number in one control group ---------------------- */
.input-group {
    display: flex;
    gap: .5rem;
    min-width: 0;
}
.input-group .control--prefix {
    flex: 0 0 8.5rem;
    min-width: 0;
    font-family: var(--mono);
    /* Stays at 16px: anything smaller makes iOS Safari zoom in on focus. */
    font-size: 1rem;
    padding-inline: .8rem 2.4rem;
    background-position: right .75rem center;
}
.input-group .control--main { flex: 1 1 auto; min-width: 0; }

@media (max-width: 420px) {
    .input-group .control--prefix { flex-basis: 7.2rem; }
}

/* Salary: amount + currency */
.input-group .control--currency { flex: 0 0 6.5rem; }

/* Errors ---------------------------------------------------------------- */
.error-text {
    display: none;
    align-items: flex-start;
    gap: .4rem;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--danger);
}
.error-text::before {
    content: "";
    flex: none;
    width: 1rem; height: 1rem;
    margin-top: .12rem;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.2a.9.9 0 01.9.9v3.6a.9.9 0 11-1.8 0V5.1a.9.9 0 01.9-.9zm0 6.4a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.2a.9.9 0 01.9.9v3.6a.9.9 0 11-1.8 0V5.1a.9.9 0 01.9-.9zm0 6.4a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field.has-error .error-text { display: flex; }
.field.has-error .control,
.field.has-error .dropzone,
.field.has-error .skills-input {
    border-color: rgba(251, 113, 133, .65);
    background: var(--danger-soft);
}
.field.has-error .choice-grid { border-radius: var(--r-md); outline: 1px solid rgba(251, 113, 133, .45); outline-offset: 6px; }

/* Choice pills (radio / checkbox cards) ---------------------------------- */
.choice-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}
.choice-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.choice-grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }

.choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .95rem 1.1rem;
    min-height: 3.25rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .028);
    cursor: pointer;
    transition: border-color var(--fast), background var(--fast), transform var(--fast);
}
.choice:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .05); }
.choice:active { transform: scale(.99); }

.choice input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
}

.choice__box {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.2rem; height: 1.2rem;
    margin-top: .16rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 6px;
    transition: border-color var(--fast), background var(--fast);
}
.choice__box--round { border-radius: 50%; }
.choice__box::after {
    content: "";
    width: .62rem; height: .62rem;
    border-radius: 3px;
    background: #04121c;
    transform: scale(0);
    transition: transform var(--fast);
}
.choice__box--round::after { border-radius: 50%; }

.choice__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.choice__title { font-size: .93rem; font-weight: 540; line-height: 1.4; }
.choice__desc { font-size: .78rem; color: var(--text-faint); line-height: 1.45; }

/* Scoped to the box itself, not to .choice — the consent row reuses
   .choice__box inside a .consent label and must tick the same way. */
input:checked ~ .choice__box {
    background: var(--gradient);
    border-color: transparent;
}
input:checked ~ .choice__box::after { transform: scale(1); }
.choice:has(input:checked) {
    border-color: rgba(56, 189, 248, .55);
    background: rgba(56, 189, 248, .09);
}
input:focus-visible ~ .choice__box {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Compact pill variant for Yes/No style answers */
.choice--pill {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: .9rem 1.2rem;
}
.choice--pill .choice__box { display: none; }
.choice--pill .choice__text { align-items: center; }

/* Conditional blocks ----------------------------------------------------- */
[data-conditional] { display: none; }
[data-conditional].is-visible { display: flex; animation: panel-in .3s var(--ease); }
.field-grid > [data-conditional].is-visible { display: flex; }

/* -----------------------------------------------------------------------------
   14 · Skills tag input
   -------------------------------------------------------------------------- */
.skills-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    min-height: 3.15rem;
    padding: .5rem .6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .035);
    cursor: text;
    transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.skills-input.is-focused {
    border-color: rgba(56, 189, 248, .65);
    background: rgba(255, 255, 255, .055);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .16);
}

.skill-tag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .5rem .38rem .8rem;
    border-radius: var(--r-pill);
    background: rgba(56, 189, 248, .13);
    border: 1px solid rgba(56, 189, 248, .3);
    font-size: .85rem;
    line-height: 1.2;
    animation: tag-in .2s var(--ease);
    max-width: 100%;
}
.skill-tag__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-tag__remove {
    display: grid;
    place-items: center;
    width: 1.35rem; height: 1.35rem;
    flex: none;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    transition: background var(--fast), color var(--fast);
}
.skill-tag__remove:hover { background: rgba(255, 255, 255, .12); color: var(--text); }

@keyframes tag-in {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: none; }
}

.skills-input__entry {
    flex: 1 1 8rem;
    min-width: 8rem;
    min-height: 2.2rem;
    padding: .3rem .4rem;
    border: 0;
    background: none;
    font-size: 1rem;
    outline: none;
}
.skills-input__entry::placeholder { color: #5d6b81; }

.skill-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .1rem;
}
.skill-suggestion {
    padding: .35rem .8rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-pill);
    font-size: .8rem;
    color: var(--text-faint);
    transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.skill-suggestion:hover {
    color: var(--accent);
    border-color: rgba(56, 189, 248, .5);
    border-style: solid;
    background: rgba(56, 189, 248, .07);
}
.skill-suggestion[hidden] { display: none; }

.char-count {
    align-self: flex-end;
    font-family: var(--mono);
    font-size: .76rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.char-count.is-near { color: var(--warning); }
.char-count.is-over { color: var(--danger); }

/* -----------------------------------------------------------------------------
   15 · CV upload
   -------------------------------------------------------------------------- */
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    padding: clamp(1.75rem, 5vw, 3rem) 1.5rem;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .022);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--base), background var(--base), transform var(--fast);
}
.dropzone:hover { border-color: rgba(56, 189, 248, .5); background: rgba(56, 189, 248, .05); }
.dropzone.is-dragging {
    border-color: var(--accent);
    background: rgba(56, 189, 248, .1);
    transform: scale(1.008);
}
.dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.dropzone:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56, 189, 248, .16); }

.dropzone__icon {
    display: grid;
    place-items: center;
    width: 3.4rem; height: 3.4rem;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    border: 1px solid rgba(56, 189, 248, .22);
    color: var(--accent);
}
.dropzone__title { font-size: 1.02rem; font-weight: 600; }
.dropzone__title span { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.dropzone__hint { font-size: .84rem; color: var(--text-faint); }

.dropzone__formats {
    display: flex;
    gap: .4rem;
    margin-top: .2rem;
}
.dropzone__formats li {
    padding: .22rem .7rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .06em;
    color: var(--text-faint);
}
.dropzone__formats li:first-child {
    color: var(--accent);
    border-color: rgba(56, 189, 248, .35);
    background: rgba(56, 189, 248, .08);
}

/* Selected file card */
.file-card {
    display: none;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(52, 211, 153, .32);
    border-radius: var(--r-lg);
    background: var(--success-soft);
    animation: panel-in .3s var(--ease);
}
.file-card.is-visible { display: flex; }
.dropzone.is-hidden { display: none; }

.file-card__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.7rem; height: 2.7rem;
    border-radius: var(--r-sm);
    background: rgba(52, 211, 153, .16);
    color: var(--success);
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.file-card__body { min-width: 0; flex: 1; }
.file-card__name {
    font-size: .95rem;
    font-weight: 560;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-card__meta { font-size: .8rem; color: var(--text-muted); margin-top: .15rem; }
.file-card__remove {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.5rem;
    padding: .5rem .95rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    font-size: .84rem;
    color: var(--text-muted);
    transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.file-card__remove:hover {
    color: var(--danger);
    border-color: rgba(251, 113, 133, .5);
    background: rgba(251, 113, 133, .08);
}

/* -----------------------------------------------------------------------------
   16 · Consent, review & submit
   -------------------------------------------------------------------------- */
.consent {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.2rem 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .028);
    cursor: pointer;
    transition: border-color var(--fast), background var(--fast);
}
.consent:hover { border-color: var(--line-strong); }
.consent:has(input:checked) { border-color: rgba(56, 189, 248, .45); background: rgba(56, 189, 248, .06); }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent .choice__box { margin-top: .1rem; }
.consent__text { font-size: .9rem; line-height: 1.65; color: var(--text-muted); }
.consent__text a { text-decoration: underline; text-underline-offset: 3px; }

.review {
    display: grid;
    gap: 1px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--line);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.review__row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    padding: .85rem 1.15rem;
    background: rgba(9, 13, 24, .9);
    font-size: .9rem;
}
.review__key {
    flex: 0 0 11rem;
    color: var(--text-faint);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.review__val { flex: 1 1 12rem; color: var(--text); word-break: break-word; }
.review__val--muted { color: var(--text-faint); }

/* Form footer navigation */
.form-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}
.form-nav__spacer { flex: 1; }
.form-nav__count {
    font-family: var(--mono);
    font-size: .8rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .form-nav { flex-wrap: wrap; }
    .form-nav__count { order: -1; width: 100%; text-align: center; margin-bottom: .25rem; }
    .form-nav .btn { flex: 1 1 8rem; }
    .form-nav__spacer { display: none; }
}

/* Global form alert */
.form-alert {
    display: none;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(251, 113, 133, .4);
    border-radius: var(--r-md);
    background: var(--danger-soft);
    font-size: .92rem;
    line-height: 1.6;
    color: #ffd7de;
}
.form-alert.is-visible { display: flex; animation: panel-in .3s var(--ease); }
.form-alert__icon { flex: none; color: var(--danger); margin-top: .1rem; }

.restore-note {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
    padding: .85rem 1.15rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .04);
    font-size: .87rem;
    color: var(--text-muted);
}
.restore-note.is-visible { display: flex; }
.restore-note button {
    color: var(--accent);
    font-size: .87rem;
    font-weight: 560;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Submitting overlay */
.submitting {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    place-items: center;
    padding: 2rem;
    background: rgba(5, 7, 12, .9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.submitting.is-visible { display: grid; animation: panel-in .25s var(--ease); }
.submitting__inner { text-align: center; max-width: 22rem; }
.submitting__ring {
    width: 3.5rem; height: 3.5rem;
    margin: 0 auto 1.5rem;
    border: 3px solid rgba(255, 255, 255, .1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
.submitting__title { font-size: 1.15rem; font-weight: 620; margin-bottom: .5rem; }
.submitting__note { font-size: .9rem; color: var(--text-muted); }

/* -----------------------------------------------------------------------------
   17 · Success screen
   -------------------------------------------------------------------------- */
.page-success .site-footer { margin-top: 0; }

.success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: clamp(3rem, 10vw, 6rem) clamp(3rem, 8vw, 5rem);
}

.success__badge {
    display: grid;
    place-items: center;
    width: 5.25rem; height: 5.25rem;
    margin-bottom: 2rem;
    border-radius: 50%;
    background: rgba(52, 211, 153, .12);
    border: 1px solid rgba(52, 211, 153, .35);
    color: var(--success);
    animation: pop-in .5s var(--ease) both;
}
.success__badge svg { width: 2.4rem; height: 2.4rem; }
.success__badge path {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    animation: draw-check .5s var(--ease) .3s forwards;
}

@keyframes pop-in {
    from { opacity: 0; transform: scale(.7); }
    to   { opacity: 1; transform: none; }
}
@keyframes draw-check { to { stroke-dashoffset: 0; } }

.success h1 {
    font-size: clamp(2.6rem, 8vw, 4.5rem);
    margin-bottom: 1.1rem;
    animation: panel-in .5s var(--ease) .1s both;
}
.success__lead {
    max-width: 36ch;
    margin-bottom: .9rem;
    font-size: clamp(1.05rem, 2.2vw, 1.22rem);
    color: var(--text);
    animation: panel-in .5s var(--ease) .18s both;
}
.success__note {
    max-width: 44ch;
    margin-bottom: 2.5rem;
    color: var(--text-muted);
    font-size: .96rem;
    animation: panel-in .5s var(--ease) .26s both;
}

.reference-card {
    width: min(100%, 26rem);
    padding: 1.6rem 1.75rem;
    margin-bottom: 2.25rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(99, 102, 241, .18), transparent 62%),
        rgba(255, 255, 255, .035);
    animation: panel-in .5s var(--ease) .34s both;
}
.reference-card__label {
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: .7rem;
}
.reference-card__value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    font-family: var(--mono);
    font-size: clamp(1.15rem, 4vw, 1.5rem);
    font-weight: 600;
    letter-spacing: .06em;
    word-break: break-all;
}
.copy-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.4rem; height: 2.4rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--text-muted);
    transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.copy-btn:hover { color: var(--accent); border-color: rgba(56, 189, 248, .45); background: rgba(56, 189, 248, .08); }
.copy-btn.is-copied { color: var(--success); border-color: rgba(52, 211, 153, .5); }

.success__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 2.5rem;
    animation: panel-in .5s var(--ease) .42s both;
}
.success__closing {
    font-size: .95rem;
    color: var(--text-faint);
    font-style: italic;
    animation: panel-in .5s var(--ease) .5s both;
}

.success__mailnote {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 2rem;
    padding: .6rem 1.1rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: .85rem;
    color: var(--text-muted);
    animation: panel-in .5s var(--ease) .38s both;
}

/* -----------------------------------------------------------------------------
   18 · Legal / content pages
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-bottom: 1rem; }
.prose h2 {
    font-size: 1.3rem;
    margin-top: 2.75rem;
    margin-bottom: .85rem;
    letter-spacing: -.02em;
}
.prose h3 { font-size: 1.05rem; margin-top: 1.75rem; margin-bottom: .5rem; }
.prose p, .prose li { color: var(--text-muted); font-size: .98rem; line-height: 1.8; }
.prose p + p { margin-top: 1rem; }
.prose ul { margin: 1rem 0; display: grid; gap: .6rem; }
.prose ul li { position: relative; padding-left: 1.4rem; }
.prose ul li::before {
    content: "";
    position: absolute;
    left: 0; top: .72em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent);
}
.prose strong { color: var(--text); font-weight: 620; }
.prose__meta {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
    font-size: .85rem;
    color: var(--text-faint);
}
.prose__callout {
    margin: 1.75rem 0;
    padding: 1.25rem 1.5rem;
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--surface);
}
.prose__callout p { color: var(--text); font-size: .93rem; }

/* Error page */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: clamp(4rem, 14vw, 8rem);
}
.error-page__code {
    font-family: var(--mono);
    font-size: clamp(4rem, 16vw, 7rem);
    font-weight: 700;
    letter-spacing: -.04em;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-bottom: 1.25rem;
}

/* -----------------------------------------------------------------------------
   19 · Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Honeypot — display:none rather than off-screen, because browsers happily
   autofill fields they can still lay out, which flagged real candidates. */
.hp-field {
    display: none !important;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 1.25rem; }
.mt-3 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1.25rem; }

/* -----------------------------------------------------------------------------
   20 · Motion, contrast & print preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .bg-glow { animation: none; }
    .success__badge path { stroke-dashoffset: 0; }
}

@media (prefers-contrast: more) {
    :root {
        --text-muted: #c3cede;
        --text-faint: #a4b2c6;
        --line: rgba(255, 255, 255, .22);
        --line-strong: rgba(255, 255, 255, .38);
    }
}

@media print {
    .bg-field, .site-header, .site-footer, .form-nav, .submitting { display: none !important; }
    body { background: #fff; color: #000; }
}

/* -----------------------------------------------------------------------------
   21 · Progressive enhancement
   Without JavaScript the wizard collapses into one long, fully usable form.
   The inline <head> script swaps .no-js for .js before first paint.
   -------------------------------------------------------------------------- */
.no-js .progress,
.no-js .restore-note,
.no-js .form-nav__count,
.no-js #review,
.no-js .submitting { display: none !important; }

.no-js .step-panel {
    display: block;
    margin-bottom: 2.5rem;
    padding-bottom: 2.25rem;
    border-bottom: 1px solid var(--line);
}
.no-js .step-panel:last-of-type { border-bottom: 0; padding-bottom: 0; }

/* Conditional blocks can't be toggled without JS, so show them all. */
.no-js [data-conditional] { display: flex !important; }

/* Server-rendered error summary (the no-JS submission path). */
.error-summary {
    max-width: 40rem;
    margin: 0 auto;
    padding: 2rem;
    border: 1px solid rgba(251, 113, 133, .4);
    border-radius: var(--r-lg);
    background: var(--danger-soft);
}
.error-summary h1 { font-size: 1.5rem; margin-bottom: .75rem; }
.error-summary ul { margin: 1.25rem 0; display: grid; gap: .6rem; }
.error-summary li {
    position: relative;
    padding-left: 1.3rem;
    color: #ffd7de;
    font-size: .93rem;
    line-height: 1.6;
}
.error-summary li::before {
    content: "";
    position: absolute;
    left: 0; top: .62em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--danger);
}