/* ==========================================================================
   Latitude ATC — main.css
   Shared design system for every page. Dark aviation theme by default.

   Contents
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons
   6.  Header / navigation
   7.  Hero
   8.  Section furniture
   9.  Cards
   10. Feature lists
   11. Callouts
   12. Statistics
   13. Steps
   14. Rules
   15. Forms
   16. CTA band
   17. Footer
   18b. Account, queue, and Radar
   18. Motion
   19. Utilities
   20. Responsive

   Theming
   The palette lives entirely in custom properties, so switching themes is a
   single attribute on <html> and no rule below needs to change. `:root` holds the
   dark values, which is the default. [data-theme="light"] restores the original
   light palette, kept here rather than deleted so the flip back is one line.

   Rules of the house when editing colours:
     - Change a token, never a raw hex, or the theme will drift.
     - Text on a coloured fill uses --on-accent, not a surface token. A surface
       token is near-black in dark mode and would be unreadable on a blue button.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Theme label, so components can read it if they ever need to. */
    color-scheme: dark;

    /* Surfaces. The page is a deep blue-slate rather than black, which keeps the
       navy brand feeling like sky at night instead of a dead panel. */
    --surface-page: #080f1c;
    --surface: #0f1b2e;
    --surface-2: #142338;
    --surface-3: #1b2d47;
    --surface-inset: #0b1524;

    /* Sticky header. Translucent so the page shows through, opaque enough that
       nav text stays legible over a scrolling hero. */
    --header-bg: rgba(10, 18, 32, .86);

    /* Text */
    --ink: #e9f0f9;
    --ink-soft: #b6c6db;
    --muted: #8b9cb6;
    --muted-light: #6d7f99;

    /* Lines */
    --border: #1e2e46;
    --border-strong: #2b3f5d;

    /* Accent. Blue fills stay saturated so buttons read as buttons; the text
       blues are lightened because the light values would be too dark to read on
       a dark surface. */
    --blue-700: #8cbcf2;
    --blue-600: #2a7de1;
    --blue-500: #4d97ea;
    --blue-300: #2f5c8f;
    --blue-200: #1d3d63;
    --blue-100: #172f4d;
    --blue-50: #11253f;

    /* Status */
    --green-700: #63d3a4;
    --green-100: #0d2a20;
    --green-line: #1e5540;
    --amber-800: #e8b866;
    --amber-100: #2a1d08;
    --amber-line: #5c4416;
    --red-700: #f0938c;
    --red-100: #2c1414;
    --red-line: #5e2320;

    --discord: #5865f2;
    --discord-dark: #4752c4;

    /* Text that sits on a saturated fill: buttons, badges, the navy band. */
    --on-accent: #ffffff;
    --on-navy: #ffffff;

    /*
     * The CTA band and footer stay deep navy in both themes. They are the one
     * place a light surface appears on the page, which keeps the footer reading
     * as a footer rather than as more dark grey.
     */
    --navy-band: #0b2547;
    --navy-band-2: #133a68;
    --navy-band-ink: #dbe7f5;
    --navy-band-muted: #9fb6d0;

    /* Type */
    --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

    /* Shape */
    --r-xs: 6px;
    --r-sm: 8px;
    --r: 12px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-full: 999px;

    /*
     * Elevation. On a dark background a shadow alone is invisible, so these lean
     * on a light top edge plus a deep drop. --shadow-hairline is that edge.
     */
    --shadow-hairline: inset 0 1px 0 rgba(255, 255, 255, .04);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .28);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .50), 0 2px 4px rgba(0, 0, 0, .30);
    --shadow-lg: 0 16px 38px rgba(0, 0, 0, .58), 0 4px 12px rgba(0, 0, 0, .34);
    --shadow-blue: 0 10px 26px rgba(0, 0, 0, .55);

    /* Metrics */
    --container: 1180px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --header-h: 72px;
    --section-y: clamp(3.75rem, 7.5vw, 6.5rem);

    --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   1b. Light palette
   The original light theme, preserved so it can be switched back on with
   <html data-theme="light"> or the theme toggle. Values are the ones this site
   shipped with before the dark conversion.
   -------------------------------------------------------------------------- */
[data-theme="light"] {
    color-scheme: light;

    --surface-page: #ffffff;
    --surface: #ffffff;
    --surface-2: #f7f9fc;
    --surface-3: #eef2f7;
    --surface-inset: #f1f7fe;

    --header-bg: rgba(255, 255, 255, .88);

    --ink: #0d2b4e;
    --ink-soft: #40556e;
    --muted: #64748b;
    --muted-light: #8b98a9;

    --border: #e1e8f0;
    --border-strong: #cfdae7;

    --blue-700: #12508f;
    --blue-600: #1665c1;
    --blue-500: #2a7de1;
    --blue-300: #bcd8f7;
    --blue-200: #bcd8f7;
    --blue-100: #e3eefc;
    --blue-50: #f1f7fe;

    --green-700: #0f6b4a;
    --green-100: #e2f4ec;
    --green-line: #c6e6d8;
    --amber-800: #8a4b04;
    --amber-100: #fdf1dc;
    --amber-line: #f2ddb6;
    --red-700: #a32a22;
    --red-100: #fceceb;
    --red-line: #f4cfcc;

    --on-accent: #ffffff;
    --on-navy: #ffffff;

    --navy-band: #0b2547;
    --navy-band-2: #133a68;
    --navy-band-ink: #dbe7f5;
    --navy-band-muted: #9fb6d0;

    --shadow-hairline: none;
    --shadow-xs: 0 1px 2px rgba(13, 43, 78, .05);
    --shadow-sm: 0 1px 2px rgba(13, 43, 78, .06), 0 2px 6px rgba(13, 43, 78, .04);
    --shadow-md: 0 4px 10px rgba(13, 43, 78, .07), 0 2px 4px rgba(13, 43, 78, .04);
    --shadow-lg: 0 14px 34px rgba(13, 43, 78, .10), 0 4px 10px rgba(13, 43, 78, .05);
    --shadow-blue: 0 10px 24px rgba(22, 101, 193, .22);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink-soft);
    background-color: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--blue-600);
    text-decoration: none;
    text-underline-offset: .18em;
}

a:hover {
    color: var(--blue-700);
    text-decoration: underline;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0;
}

:focus-visible {
    outline: 2px solid var(--blue-600);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

::selection {
    background: var(--blue-100);
    color: var(--ink);
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 2000;
    background: var(--navy-band);
    color: var(--on-accent);
    padding: .7rem 1.15rem;
    border-radius: var(--r-sm);
    font-size: .9rem;
    font-weight: 600;
    transition: top .2s var(--ease);
}

.skip-link:focus {
    top: 1rem;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.4rem, 5.4vw, 3.9rem);
    letter-spacing: -.03em;
}

h2 {
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
}

h3 {
    font-size: clamp(1.15rem, 1.7vw, 1.35rem);
    letter-spacing: -.015em;
}

h4 {
    font-size: 1.02rem;
}

p {
    margin: 0;
    text-wrap: pretty;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--blue-600);
    margin: 0 0 .9rem;
}

.eyebrow::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--blue-500);
}

.lead {
    font-size: clamp(1.05rem, 1.5vw, 1.18rem);
    line-height: 1.72;
    color: var(--ink-soft);
}

.prose>*+* {
    margin-top: 1.1rem;
}

.prose h2 {
    margin-top: 2.75rem;
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
}

.prose h3 {
    margin-top: 1.9rem;
}

.mono {
    font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: var(--section-y);
}

.section--alt {
    background-color: var(--surface-2);
    border-block: 1px solid var(--border);
}

.section--tight {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.section__head {
    max-width: 44rem;
    margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.section__head--center {
    margin-inline: auto;
    text-align: center;
}

.section__head .lead {
    margin-top: 1rem;
}

.grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

.grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 4.5vw, 4rem);
    align-items: center;
}

.stack>*+* {
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .8rem 1.5rem;
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s var(--ease), border-color .18s var(--ease),
        color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn--primary {
    background: var(--blue-600);
    color: var(--on-accent);
    box-shadow: var(--shadow-blue);
}

.btn--primary:hover {
    background: var(--blue-700);
    color: var(--on-accent);
}

.btn--secondary {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
}

.btn--secondary:hover {
    color: var(--blue-700);
    border-color: var(--blue-200);
    background: var(--blue-50);
}

.btn--quiet {
    background: transparent;
    color: var(--blue-600);
    border-color: transparent;
    padding-inline: .5rem;
}

.btn--quiet:hover {
    background: var(--blue-50);
    color: var(--blue-700);
}

/* Destructive or terminal actions, where a filled button would overstate how
   much is happening. Sign out sits next to real navigation, so it stays quiet
   and only picks up an outline on hover. */
.btn--ghost {
    background: transparent;
    color: var(--muted);
    border-color: var(--border);
}

.btn--ghost:hover {
    background: var(--red-100);
    border-color: var(--red-line);
    color: var(--red-700);
}

.btn--discord {
    background: var(--discord);
    color: var(--on-accent);
    box-shadow: 0 10px 24px rgba(88, 101, 242, .26);
}

.btn--discord:hover {
    background: var(--discord-dark);
    color: var(--on-accent);
}

.btn--lg {
    padding: .95rem 1.85rem;
    font-size: 1rem;
}

.btn--sm {
    padding: .55rem 1rem;
    font-size: .875rem;
}

.btn--block {
    width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn__icon {
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* A config link whose URL has not been set yet */
.is-unconfigured {
    border-style: dashed;
    opacity: .75;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .95rem;
}

.link-arrow svg {
    transition: transform .2s var(--ease);
}

.link-arrow:hover svg {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--header-bg);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.site-header.is-stuck {
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.site-header__inner {
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    flex: 0 0 auto;
    color: var(--ink);
}

.brand:hover {
    text-decoration: none;
    color: var(--ink);
}

.brand img {
    width: auto;
    height: 34px;
}

.brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand__name {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.brand__tag {
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-light);
}

.nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
}

.nav__list {
    display: flex;
    align-items: center;
    gap: clamp(.85rem, 1.7vw, 1.5rem);
}

.nav__link {
    position: relative;
    display: inline-block;
    padding: .35rem 0;
    font-size: .94rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--blue-600);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s var(--ease);
}

.nav__link:hover {
    color: var(--ink);
    text-decoration: none;
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
    transform: scaleX(1);
}

.nav__link[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--ink);
    cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    position: relative;
    transition: transform .22s var(--ease), opacity .18s var(--ease);
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
    content: "";
    position: absolute;
}

.nav-toggle__bar::before {
    top: -6px;
}

.nav-toggle__bar::after {
    top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
    opacity: 1;
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
    opacity: 1;
    transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, var(--surface-inset) 0%, var(--surface-page) 62%);
    border-bottom: 1px solid var(--border);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("../images/airspace-pattern.svg");
    background-size: 1200px 800px;
    background-position: right -120px top -80px;
    background-repeat: no-repeat;
    opacity: .9;
}

.hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -30%;
    right: -10%;
    width: 46rem;
    height: 46rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 101, 193, .13) 0%, rgba(22, 101, 193, 0) 68%);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
    padding-block: clamp(3.5rem, 7.5vw, 6.5rem);
}

.hero__title {
    max-width: 15ch;
}

.hero__title em {
    font-style: normal;
    color: var(--blue-600);
}

.hero__lead {
    max-width: 34rem;
    margin-top: 1.35rem;
    font-size: clamp(1.05rem, 1.45vw, 1.18rem);
    line-height: 1.72;
}

.hero__actions {
    margin-top: 2rem;
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.hero__meta-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--muted);
}

.hero__meta-item svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--blue-500);
    flex: 0 0 auto;
}

/* Radar / airspace card */
.hero__panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.hero__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.15rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.hero__panel-body {
    padding: 1.35rem 1.15rem;
}

.status-list {
    display: grid;
    gap: .55rem;
}

.status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem .9rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.status-item__state {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .7rem;
    color: var(--muted-light);
    letter-spacing: .12em;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green-700);
    flex: 0 0 auto;
}

.status-dot--idle {
    background: var(--muted-light);
}

.status-dot--warn {
    background: var(--amber-800);
}

.hero__panel-foot {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.15rem;
    border-top: 1px solid var(--border);
    background: var(--blue-50);
    font-size: .82rem;
    color: var(--ink-soft);
}

/* Page hero for interior pages */
.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, var(--surface-inset) 0%, var(--surface-page) 100%);
    border-bottom: 1px solid var(--border);
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("../images/airspace-pattern.svg");
    background-size: 1100px 733px;
    background-position: right -160px center;
    background-repeat: no-repeat;
    opacity: .75;
}

.page-hero__inner {
    padding-block: clamp(2.75rem, 5.5vw, 4.5rem);
    max-width: 46rem;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    font-size: .82rem;
    color: var(--muted);
}

.breadcrumb a {
    color: var(--muted);
}

.breadcrumb a:hover {
    color: var(--blue-600);
}

.breadcrumb__sep {
    color: var(--muted-light);
}

.page-hero .lead {
    margin-top: 1.1rem;
}

/* --------------------------------------------------------------------------
   8. Section furniture
   -------------------------------------------------------------------------- */
.rule-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--muted-light);
}

.rule-strip::before,
.rule-strip::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: repeating-linear-gradient(90deg,
            var(--border-strong) 0 10px,
            transparent 10px 20px);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .06em;
    background: var(--blue-50);
    color: var(--blue-700);
    border: 1px solid var(--blue-100);
    border-radius: var(--r-full);
}

.chip--grey {
    background: var(--surface-3);
    color: var(--muted);
    border-color: var(--border);
}

.chip--green {
    background: var(--green-100);
    color: var(--green-700);
    border-color: var(--green-line);
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.75rem;
    box-shadow: var(--shadow-hairline), var(--shadow-xs);
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}

.card:hover {
    border-color: var(--blue-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.card--flat:hover {
    transform: none;
}

.card--accent {
    border-top: 3px solid var(--blue-600);
}

.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.1rem;
    background: var(--blue-50);
    color: var(--blue-600);
    border: 1px solid var(--blue-100);
    border-radius: var(--r-sm);
}

.card__icon svg {
    width: 22px;
    height: 22px;
}

.card__title {
    font-size: 1.16rem;
    margin-bottom: .5rem;
}

.card__text {
    color: var(--muted);
    font-size: .98rem;
    line-height: 1.68;
}

.card__text+.card__text,
.card__text+.card__list,
.card__list+.btn {
    margin-top: .9rem;
}

.card__list {
    display: grid;
    gap: .5rem;
    margin: 1rem 0 0;
}

.card__list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: .94rem;
    color: var(--muted);
}

.card__list li::before {
    content: "";
    position: absolute;
    left: .2rem;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue-500);
}

.card__foot {
    margin-top: auto;
    padding-top: 1.35rem;
}

.card--flag {
    border-left: 3px solid var(--blue-500);
}

.card__badge {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
}

/* Media card */
.media-card {
    overflow: hidden;
    padding: 0;
}

.media-card__img {
    aspect-ratio: 16 / 10;
    width: 100%;
    object-fit: cover;
    background: var(--surface-3);
}

.media-card__body {
    padding: 1.5rem 1.75rem 1.75rem;
}

/* --------------------------------------------------------------------------
   10. Feature lists
   -------------------------------------------------------------------------- */
.feature {
    display: flex;
    gap: 1rem;
}

.feature+.feature {
    margin-top: 1.15rem;
}

.feature__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    margin-top: .1rem;
    background: var(--blue-50);
    color: var(--blue-600);
    border-radius: var(--r-xs);
}

.feature__mark svg {
    width: 17px;
    height: 17px;
}

.feature__body h3 {
    font-size: 1.02rem;
    margin-bottom: .25rem;
}

.feature__body p {
    font-size: .95rem;
    color: var(--muted);
    line-height: 1.65;
}

/* Numbered position list */
.position-list {
    display: grid;
    gap: .75rem;
}

.position {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1.1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.position:hover {
    border-color: var(--blue-200);
    box-shadow: var(--shadow-sm);
}

.position__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--blue-600);
    background: var(--blue-50);
    border-radius: var(--r-xs);
}

.position h4 {
    font-family: var(--font-mono);
    font-size: .95rem;
    letter-spacing: .04em;
    color: var(--ink-soft);
}

.position p {
    margin-top: .2rem;
    font-size: .93rem;
    color: var(--muted);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   11. Callouts
   -------------------------------------------------------------------------- */
.callout {
    display: flex;
    gap: 1.1rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue-500);
    border-radius: var(--r-sm);
    background: var(--blue-50);
}

.callout__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--blue-600);
    margin-top: .15rem;
}

.callout__title {
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--ink);
    margin-bottom: .3rem;
}

.callout p {
    font-size: .95rem;
    line-height: 1.65;
    color: var(--ink-soft);
}

.callout--warn {
    background: var(--amber-100);
    border-color: var(--amber-line);
    border-left-color: var(--amber-800);
}

.callout--warn .callout__icon,
.callout--warn .callout__title {
    color: var(--amber-800);
}

.callout--warn p {
    color: var(--amber-800);
}

.callout--danger {
    background: var(--red-100);
    border-color: var(--red-line);
    border-left-color: var(--red-700);
}

.callout--danger .callout__icon,
.callout--danger .callout__title {
    color: var(--red-700);
}

.callout--danger p {
    color: var(--red-700);
}

.callout--plain {
    background: var(--surface-2);
    border-left-color: var(--border-strong);
}

.callout--plain .callout__icon {
    color: var(--muted);
}

/* Definition rows */
.spec {
    display: grid;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface);
}

.spec__row {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.15rem 1.4rem;
    border-bottom: 1px solid var(--border);
}

.spec__row:last-child {
    border-bottom: none;
}

.spec__row:nth-child(odd) {
    background: var(--surface-2);
}

.spec dt {
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: .15rem;
}

.spec dd {
    margin: 0;
    font-size: .97rem;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   12. Statistics
   -------------------------------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}

.stat {
    background: var(--surface);
    padding: 1.75rem 1.5rem;
    text-align: center;
}

.stat__value {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.stat__value:empty,
.stat__value[data-empty="true"] {
    color: var(--muted-light);
}

.stat__label {
    margin-top: .5rem;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.stat__note {
    margin-top: .35rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--muted-light);
}

.stats-note {
    margin-top: 1.1rem;
    font-size: .88rem;
    color: var(--muted);
    text-align: center;
}

.stats-note code {
    font-family: var(--font-mono);
    font-size: .85em;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--r-xs);
    padding: .1em .4em;
}

/* --------------------------------------------------------------------------
   13. Steps
   -------------------------------------------------------------------------- */
.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    counter-reset: step;
}

.step {
    position: relative;
    padding: 1.6rem 1.4rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
}

.step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    display: block;
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--blue-600);
    margin-bottom: .8rem;
}

.step h3 {
    font-size: 1.04rem;
    margin-bottom: .4rem;
}

.step p {
    font-size: .93rem;
    color: var(--muted);
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   14. Rules
   -------------------------------------------------------------------------- */
.rules {
    display: grid;
    gap: .75rem;
    counter-reset: rule;
}

/* Wraps several rule lists so numbering runs continuously across the
   category headings instead of restarting at 1 for each section. */
.rulebook {
    counter-reset: rule;
}

.rulebook .rules {
    counter-reset: none;
}

.rule {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 1.1rem;
    padding: 1.15rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.rule:hover {
    border-color: var(--blue-200);
    box-shadow: var(--shadow-sm);
}

.rule--prohibited {
    background: var(--red-100);
    border-color: var(--red-line);
}

.rule--prohibited:hover {
    border-color: var(--red-700);
    box-shadow: none;
}

.rule::before {
    counter-increment: rule;
    content: counter(rule);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    font-family: var(--font-mono);
    font-size: .85rem;
    color: var(--ink-soft);
    background: var(--surface-3);
    border-radius: var(--r-xs);
}

.rule--prohibited::before {
    color: var(--red-700);
    background: var(--red-100);
}

.rule__body h3 {
    font-size: 1.02rem;
    margin-bottom: .25rem;
}

.rule--prohibited .rule__body h3 {
    color: var(--red-700);
}

.rule__body p {
    font-size: .95rem;
    color: var(--muted);
    line-height: 1.65;
}

.rule--prohibited .rule__body p {
    color: var(--red-700);
}

.rule__tag {
    display: inline-block;
    margin-top: .55rem;
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.form {
    display: grid;
    gap: 1.15rem;
}

.form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
}

.field {
    display: grid;
    gap: .4rem;
}

.field__label {
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--ink-soft);
}

.field__req {
    color: var(--red-700);
}

.field__control {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: .75rem .95rem;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.field__control::placeholder {
    color: var(--muted-light);
}

.field__control:focus {
    outline: none;
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px rgba(42, 125, 225, .18);
}

.field__control[aria-invalid="true"] {
    border-color: var(--red-700);
    background: var(--red-100);
}

textarea.field__control {
    min-height: 140px;
    resize: vertical;
}

/*
 * Native selects draw their own arrow and, in dark mode, their popup list is
 * painted by the OS rather than the page. colour-scheme on :root handles the
 * popup; this keeps the arrow from disappearing against the dark control.
 */
select.field__control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9cb6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 1.05rem;
}

[data-theme="light"] select.field__control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.field__error {
    display: none;
    font-size: .82rem;
    font-weight: 500;
    color: var(--red-700);
}

.field__error.is-visible {
    display: block;
}

.field__hint {
    font-size: .82rem;
    color: var(--muted);
}

.form__note {
    font-size: .85rem;
    color: var(--muted);
}

/* Checkbox / consent field */
.field--check {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.field--check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: .2rem;
    accent-color: var(--blue-600);
}

.field--check .field__label {
    font-weight: 500;
    color: var(--ink-soft);
    line-height: 1.6;
}

.field--check .field__label a {
    font-weight: 600;
}

/* Application form panels */
.apply-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-hairline), var(--shadow-xs);
    overflow: hidden;
}

.apply-panel__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.apply-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    background: var(--blue-50);
    color: var(--blue-600);
    border: 1px solid var(--blue-100);
    border-radius: var(--r-sm);
}

.apply-panel__icon svg {
    width: 20px;
    height: 20px;
}

.apply-panel__head h3 {
    font-size: 1.1rem;
}

.apply-panel__head p {
    font-size: .88rem;
    color: var(--muted);
}

.apply-panel__body {
    padding: 1.5rem;
}

.apply-panel__foot {
    padding: 0 1.5rem 1.5rem;
}

.apply-panel__note {
    font-size: .85rem;
    color: var(--muted);
    margin-top: .9rem;
}

.card__status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .85rem;
    padding: .2rem .55rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid;
}

.card__status svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.card__status--closed {
    color: var(--muted);
    background: var(--surface-3);
    border-color: var(--border-strong);
}

.card__note {
    margin-top: .6rem;
    font-size: .82rem;
    color: var(--muted);
    text-align: center;
}

/* Closed application panel: staff applications are not accepting submissions. */
.apply-panel--closed .apply-panel__head {
    background: var(--surface-3);
}

.apply-panel--closed .apply-panel__icon {
    background: var(--surface-3);
    color: var(--muted);
    border-color: var(--border-strong);
}

.apply-panel__badge {
    display: inline-block;
    margin-top: .35rem;
    padding: .15rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.1rem;
    padding: .45rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid;
}

.status-pill svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.status-pill--closed {
    color: var(--ink-soft);
    background: var(--surface-3);
    border-color: var(--border-strong);
}

.status-pill--info {
    color: var(--blue-700);
    background: var(--blue-50);
    border-color: var(--blue-100);
}

/* Closed / blocked message shown in place of a form. */
.closed-notice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: 1.5rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.closed-notice--blocked {
    background: var(--blue-50);
    border-color: var(--blue-100);
}

.closed-notice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--surface);
    color: var(--muted);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
}

.closed-notice--blocked .closed-notice__icon {
    color: var(--blue-600);
    border-color: var(--blue-100);
}

.closed-notice__icon svg {
    width: 22px;
    height: 22px;
}

.closed-notice__title {
    font-size: 1.1rem;
    font-weight: 700;
}

.closed-notice p {
    color: var(--muted);
    font-size: .95rem;
}

.closed-notice__actions {
    margin-top: .5rem;
}

/* ATC eligibility gate: the form only appears once pilot status is confirmed. */
.eligibility {
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--blue-100);
    border-radius: var(--r-md);
    background: var(--blue-50);
}

.eligibility__legend {
    padding: 0 .45rem;
    margin-left: -.45rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--blue-700);
}

.eligibility__question {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink);
}

.eligibility__hint {
    margin-top: .3rem;
    font-size: .9rem;
    color: var(--muted);
}

.eligibility__choices {
    display: grid;
    gap: .6rem;
    margin-top: 1rem;
}

.field--choice {
    padding: .7rem .9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.field--choice .field__label {
    font-weight: 500;
}

.eligibility-result[hidden] {
    display: none;
}

.form-alert {
    display: none;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.2rem 1.4rem;
    background: var(--green-100);
    border: 1px solid var(--green-line);
    border-radius: var(--r-sm);
    color: var(--green-700);
}

.form-alert.is-visible {
    display: flex;
}

.form-alert--success {
    background: var(--green-100);
    border-color: var(--green-line);
    color: var(--green-700);
}

.form-alert--warn {
    background: var(--amber-100);
    border-color: var(--amber-line);
    color: var(--amber-800);
}

.form-alert--error {
    background: var(--red-100);
    border-color: var(--red-line);
    color: var(--red-700);
}

.form-alert--warn .form-alert p {
    color: var(--amber-800);
}

.form-alert--error .form-alert p,
.form-alert--error p {
    color: var(--red-700);
}

.form-alert__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: .1rem;
}

.form-alert strong {
    display: block;
    font-family: var(--font-display);
    margin-bottom: .15rem;
}

.form-alert p {
    font-size: .94rem;
}

/* Contact channels */
.channels {
    display: grid;
    gap: 1rem;
}

.channel {
    display: flex;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.channel:hover {
    border-color: var(--blue-200);
    box-shadow: var(--shadow-sm);
}

.channel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    background: var(--blue-50);
    color: var(--blue-600);
    border: 1px solid var(--blue-100);
    border-radius: var(--r-sm);
}

.channel--discord .channel__icon {
    background: rgba(88, 101, 242, .16);
    color: var(--discord);
    border-color: rgba(88, 101, 242, .38);
}

.channel h3 {
    font-size: 1.02rem;
    margin-bottom: .25rem;
}

.channel p {
    font-size: .93rem;
    color: var(--muted);
    line-height: 1.62;
}

.channel__action {
    margin-top: .7rem;
    font-size: .9rem;
}

/* --------------------------------------------------------------------------
   16. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--navy-band);
    border-radius: var(--r-lg);
    padding: clamp(2.25rem, 5vw, 3.75rem);
    color: var(--navy-band-ink);
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 120% at 88% 8%, rgba(42, 125, 225, .38) 0%, rgba(42, 125, 225, 0) 70%),
        radial-gradient(50% 100% at 6% 96%, rgba(22, 101, 193, .32) 0%, rgba(22, 101, 193, 0) 70%);
}

.cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("../images/airspace-pattern.svg");
    background-size: 1100px 733px;
    background-position: left -180px bottom -220px;
    background-repeat: no-repeat;
    opacity: .16;
}

.cta-band h2 {
    color: var(--on-accent);
    max-width: 20ch;
}

.cta-band p {
    margin-top: 1rem;
    max-width: 46ch;
    color: var(--navy-band-muted);
    font-size: 1.04rem;
}

.cta-band__actions {
    margin-top: 1.9rem;
}

.cta-band--split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
}

.cta-band__panel {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--r-md);
    padding: 1.5rem;
}

.cta-band__panel h3 {
    color: var(--on-accent);
    font-size: 1.05rem;
}

.cta-band__panel ul {
    display: grid;
    gap: .55rem;
    margin-top: .9rem;
}

.cta-band__panel li {
    display: flex;
    gap: .6rem;
    font-size: .93rem;
    color: var(--navy-band-ink);
}

.cta-band__panel li svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    margin-top: .28rem;
    color: var(--blue-200);
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    padding-block: clamp(2.75rem, 5vw, 4rem) 1.75rem;
    margin-top: auto;
}

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: clamp(1.75rem, 3.5vw, 3rem);
    padding-bottom: 2.25rem;
    border-bottom: 1px solid var(--border);
}

.site-footer .brand {
    margin-bottom: .9rem;
}

.site-footer__blurb {
    font-size: .93rem;
    color: var(--muted);
    max-width: 34ch;
}

.site-footer__heading {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted-light);
    margin-bottom: 1rem;
}

.site-footer__links {
    display: grid;
    gap: .6rem;
}

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .94rem;
    color: var(--ink-soft);
    text-decoration: none;
}

.site-footer__links a:hover {
    color: var(--blue-600);
    text-decoration: none;
}

.site-footer__links svg {
    width: .95rem;
    height: .95rem;
    color: var(--muted-light);
    flex: 0 0 auto;
}

.site-footer__links a:hover svg {
    color: var(--blue-500);
}

.site-footer__bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 1.75rem;
}

.site-footer__copy {
    font-size: .88rem;
    color: var(--muted);
}

/* The domain, so people have something to type when they share the site. */
.site-footer__domain {
    margin-left: .35rem;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--muted);
    opacity: .75;
}

.disclaimer {
    max-width: 62ch;
    font-size: .8rem;
    line-height: 1.62;
    color: var(--muted-light);
}

.disclaimer strong {
    color: var(--muted);
}

.page-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   18b. Account, queue, and Radar
   The three pages that depend on a signed-in session. Each has one visible
   state at a time, so they share a card shape rather than each inventing one.
   -------------------------------------------------------------------------- */

/* Elements are toggled with the hidden attribute from JavaScript. Without this,
   a display rule further down the sheet would beat the attribute's own
   `display: none` from the UA stylesheet and the state would not change. */
[hidden] {
    display: none !important;
}

/* ---- Theme toggle ---- */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--ink-soft);
    cursor: pointer;
    transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.icon-btn:hover {
    color: var(--ink);
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.icon-btn svg {
    width: 17px;
    height: 17px;
}

.icon-btn__sun {
    display: none;
}

/* In light mode the button offers the trip back to dark, so the two swap. */
[data-theme="light"] .icon-btn__sun {
    display: block;
}

[data-theme="light"] .icon-btn__moon {
    display: none;
}

/* ---- Nav action group ---- */
.nav__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* The account button carries a name that changes width when it is filled in, so
   it is not allowed to shift the nav while the session loads. */
.nav__actions [data-auth-username] {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Shared card for the session pages ---- */
.account-card,
.queue__card,
.radar-locked {
    max-width: 44rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-hairline), var(--shadow-md);
    text-align: left;
}

.account-card h2,
.queue__card h2,
.radar-locked h2 {
    margin-block: .75rem .6rem;
}

.account-card__icon,
.queue__icon,
.radar-locked__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    color: var(--blue-700);
}

.account-card__icon svg,
.queue__icon svg,
.radar-locked__icon svg {
    width: 22px;
    height: 22px;
}

.queue__icon--ok {
    color: var(--green-700);
    background: var(--green-100);
    border-color: var(--green-line);
}

.account-card__aside,
.radar-locked__note {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: .9rem;
    color: var(--muted);
}

.account-card__roles {
    margin-top: 1.25rem;
    padding: .9rem 1.1rem;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: var(--r);
    font-size: .9rem;
    color: var(--ink-soft);
}

.account-card__roles code {
    font-family: var(--font-mono);
    font-size: .85em;
    color: var(--blue-700);
}

.account-card__identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.account-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--r-full);
    border: 1px solid var(--border-strong);
    object-fit: cover;
}

.account-card__eyebrow {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.account-card__identity h2 {
    margin: .15rem 0 0;
}

.account-card__subhead {
    margin-bottom: .75rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.account-perks {
    display: grid;
    gap: .9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-perks li {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: .9rem 1.1rem;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: var(--r);
}

.account-perks svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: .15rem;
    color: var(--green-700);
}

.account-perks strong {
    display: block;
    font-size: .98rem;
}

.account-perks p {
    margin-top: .2rem;
    font-size: .9rem;
    color: var(--muted);
}

/* The account page shows one card at a time: signed out, signed in, or still
   checking. The wrapper only has to centre them and stack the spacing, because
   the card styling is shared with the queue and the Radar. */
.account {
    max-width: 44rem;
    margin-inline: auto;
}

/* ---- Sign-in prompt inside an application panel ---- */
.signin-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--blue-50);
    border: 1px solid var(--blue-300);
    border-radius: var(--r);
}

.signin-prompt__title {
    font-weight: 600;
}

.signin-prompt__body {
    margin-top: .2rem;
    font-size: .9rem;
    color: var(--ink-soft);
}

/* ---- Post-submission summary ---- */
.apply-summary {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem;
    background: var(--green-100);
    border: 1px solid var(--green-line);
    border-radius: var(--r);
}

.apply-summary__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    color: var(--green-700);
}

.apply-summary__mark svg {
    width: 22px;
    height: 22px;
}

.apply-summary__title {
    font-weight: 600;
}

.apply-summary__body {
    margin-top: .2rem;
    font-size: .92rem;
    color: var(--ink-soft);
}

.form__loading {
    padding: 1.5rem 0;
    color: var(--muted);
    font-size: .95rem;
}

/* ---- Queue ---- */
.queue__card--approved {
    border-color: var(--green-line);
}
.queue__error {
    max-width: 44rem;
    margin: 1rem auto 0;
    padding: .85rem 1.1rem;
    background: var(--red-100);
    border: 1px solid var(--red-line);
    border-radius: var(--r);
    color: var(--red-700);
    font-size: .92rem;
    text-align: left;
}

/* ---- Steps ----
   The steps component is a two column grid elsewhere. Inside the narrow queue
   panel it becomes a single column, reusing the same .step cards rather than
   inventing a second look for the same thing. */
.steps--stacked {
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* ---- Radar ---- */
.radar {
    padding: clamp(1rem, 2.5vw, 1.75rem);
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}

.radar__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.radar__legend {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.radar__chip {
    padding: .2rem .6rem;
    border-radius: var(--r-full);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.radar__chip--live {
    background: var(--green-100);
    border: 1px solid var(--green-line);
    color: var(--green-700);
}

.radar__chip--empty {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--muted);
}

.radar__updated {
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--muted);
}

.radar-sector {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-hairline);
}

.radar-sector__name {
    font-size: 1rem;
    letter-spacing: .02em;
}

.radar-sector__freq {
    margin-top: .15rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--muted);
}

.radar-sector__positions {
    display: grid;
    gap: .4rem;
    margin: .9rem 0 0;
    padding: 0;
    list-style: none;
}

.radar-sector__position {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .6rem;
    background: var(--green-100);
    border: 1px solid var(--green-line);
    border-radius: var(--r-xs);
    font-size: .88rem;
}

.radar-sector__position--empty {
    background: transparent;
    border-style: dashed;
    border-color: var(--border-strong);
    color: var(--muted);
}

.radar-sector__tag {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--green-700);
}

.radar-error {
    margin-top: 1rem;
    padding: .85rem 1.1rem;
    background: var(--red-100);
    border: 1px solid var(--red-line);
    border-radius: var(--r);
    color: var(--red-700);
    font-size: .92rem;
}

/* ---- Informational callout ---- */
.callout--info {
    background: var(--blue-50);
    border-color: var(--blue-300);
}

.callout--info .callout__icon,
.callout--info .callout__title {
    color: var(--blue-700);
}

.callout--info p {
    color: var(--ink-soft);
}

.apply-panel__note {
    margin-top: 1rem;
    font-size: .88rem;
    color: var(--muted);
}

/* ---- Extra spacing utility, matching the existing scale ---- */
.mt-6 {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ---- Hero copy column ----
   A grid item holding text needs min-width 0, otherwise a long unbroken string
   can push the column wider than its track. */
.hero__content {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   18. Motion
   -------------------------------------------------------------------------- */

.js .reveal {
    opacity: 0;
    transform: translateY(18px);
}

.reveal {
    transition: opacity .65s var(--ease), transform .65s var(--ease);
}

/* Matches the class main.js adds when an element scrolls into view. The other
   components in this sheet use is-visible for the same idea. */
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.reveal[data-delay="1"] {
    transition-delay: .07s;
}

.reveal[data-delay="2"] {
    transition-delay: .14s;
}

.reveal[data-delay="3"] {
    transition-delay: .21s;
}

.reveal[data-delay="4"] {
    transition-delay: .28s;
}

.reveal[data-delay="5"] {
    transition-delay: .35s;
}

@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;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }

    .btn:hover,
    .card:hover,
    .link-arrow:hover svg {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   19. Utilities
   -------------------------------------------------------------------------- */
.text-center {
    text-align: center;
}

.mx-auto {
    margin-inline: auto;
}

.muted {
    color: var(--muted);
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: .5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mt-5 {
    margin-top: 2.75rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.w-full {
    width: 100%;
}

.no-wrap {
    white-space: nowrap;
}

.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;
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .hero__inner {
        grid-template-columns: 1fr;
    }

    .hero__title {
        max-width: 100%;
    }

    .hero__panel {
        max-width: 30rem;
    }

    .site-footer__top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The nav carries six links plus the theme toggle, the account button, and
       Join Discord. Past this width that is more than fits on one line, so the
       menu collapses into the toggle rather than wrapping or overflowing. */
    .nav-toggle {
        display: inline-flex;
    }

    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .5rem var(--gutter) 1.25rem;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-md);
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
    }

    .nav.is-open {
        display: flex;
    }

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav__link {
        padding: .8rem 0;
        border-bottom: 1px solid var(--border);
        font-size: 1rem;
    }

    .nav__link::after {
        display: none;
    }

    .nav__actions {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
        margin-top: 1rem;
    }

    .nav__actions .btn {
        width: 100%;
        margin-top: 0;
    }

    /* The account button is the only action that is not a full-width row in the
       open menu, so it keeps its natural height. */
    .nav__actions .icon-btn {
        position: absolute;
        top: 50%;
        right: calc(50% + 3rem);
        transform: translateY(-50%);
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 960px) {

    .grid--3,
    .grid--4,
    .grid--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split {
        grid-template-columns: 1fr;
    }

    .cta-band--split {
        grid-template-columns: 1fr;
    }

    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    :root {
        --header-h: 64px;
    }

    /* Nav collapse moved to the 1080px breakpoint above; only the header height
       still differs here. */
}

@media (max-width: 720px) {

    .grid--2,
    .grid--3,
    .grid--4,
    .grid--5,
    .steps,
    .form__row {
        grid-template-columns: 1fr;
    }

    .stats {
        grid-template-columns: 1fr 1fr;
    }

    .rule {
        grid-template-columns: 2.2rem minmax(0, 1fr);
        gap: .85rem;
        padding: 1rem 1.1rem;
    }

    .spec__row {
        grid-template-columns: 1fr;
        gap: .3rem;
    }

    .site-footer__top {
        grid-template-columns: 1fr;
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .brand__text {
        display: none;
    }
}

@media (max-width: 460px) {
    .stats {
        grid-template-columns: 1fr;
    }

    .btn--block-sm {
        width: 100%;
    }
}