/* ==========================================================================
   Jet Cleaners Academy - site stylesheet
   Voice: confident, plain, no hype. Aviation professional, not SaaS startup.
   Palette: Jet Clean brand. Blue-tinted dark ground, chrome type, turquoise CTAs.
   ========================================================================== */

:root {
  /* ground - blue-tinted dark, matched to jetcleantx.com */
  --ink:        #0A0F11;
  --surface:    #111719;
  --surface-2:  #161D20;
  --surface-3:  #1D2528;
  --line:       #263135;
  --line-soft:  #1A2225;

  /* chrome / steel, taken off the logo */
  --chrome-1:   #F4F7F8;
  --chrome-2:   #B9C3C7;
  --chrome-3:   #7C868B;
  --chrome-4:   #4A5459;

  /* type */
  --text:       #E9EDEF;
  --text-2:     #A9B4B8;
  --muted:      #7E8A8E;

  /* accent - Jet Clean turquoise */
  --accent:     #35DECB;
  --accent-hi:  #5FE9DA;
  --accent-lo:  #16B4A2;
  --accent-ink: #04211D;

  /* status */
  --good:       #4ADE80;
  --warn:       #FBBF24;
  --bad:        #F87171;

  /* metrics */
  --wrap:       1120px;
  --wrap-tight: 760px;
  --r-sm:       6px;
  --r:          10px;
  --r-lg:       16px;

  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:  0 2px 4px rgba(0,0,0,.4), 0 24px 64px rgba(0,0,0,.5);

  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv11' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -.022em;
  font-weight: 800;
  color: var(--chrome-1);
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -.014em; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); text-decoration: underline; }

strong { color: var(--chrome-1); font-weight: 700; }
em { color: var(--text-2); }

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

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

/* ------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}
.wrap--tight { max-width: var(--wrap-tight); }

section { padding-block: clamp(56px, 8vw, 104px); }

.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  border: 0;
  margin: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 20px;
  font-weight: 700;
  z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------------ wordmark -- */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .5ch;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }

.wordmark__jet {
  background: linear-gradient(177deg,
    #FFFFFF 0%, var(--chrome-2) 38%, var(--chrome-4) 52%,
    var(--chrome-2) 66%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.wordmark__sub {
  font-size: .5em;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  transform: translateY(-.1em);
}

/* --------------------------------------------------------------- nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 15, 17, .84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
}

.nav .wordmark { font-size: 1.35rem; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__link {
  color: var(--text-2);
  font-size: .93rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.nav__link:hover { color: var(--chrome-1); text-decoration: none; }

@media (max-width: 860px) {
  .nav__links .nav__link { display: none; }
}

/* -------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 88px) clamp(56px, 8vw, 96px);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 620px;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(53,222,203,.09), transparent 70%),
    radial-gradient(40% 60% at 78% 12%, rgba(120,150,180,.07), transparent 70%);
  pointer-events: none;
}

.hero__inner { position: relative; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
  opacity: .7;
}

.hero h1 { max-width: 15ch; margin-bottom: 24px; }

.hero__sub {
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  color: var(--text-2);
  max-width: 56ch;
  margin-bottom: 34px;
}

/* -------------------------------------------------------------- video -- */

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin-bottom: 32px;
}

.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-frame__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  background:
    repeating-linear-gradient(45deg,
      transparent, transparent 14px,
      rgba(255,255,255,.014) 14px, rgba(255,255,255,.014) 28px),
    var(--surface-2);
}

.video-frame__play {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 2px solid var(--chrome-3);
  display: grid;
  place-items: center;
  color: var(--chrome-2);
}
.video-frame__play svg { width: 24px; height: 24px; margin-left: 3px; }

.video-frame__note {
  font-size: .85rem;
  color: var(--muted);
  max-width: 42ch;
  margin: 0;
}

/* ------------------------------------------------------------ buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s var(--ease), background .16s var(--ease),
              border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset,
              0 8px 24px rgba(53,222,203,.22);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #7FF0E3, var(--accent-hi));
  color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset,
              0 10px 30px rgba(53,222,203,.3);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--chrome-3); color: var(--chrome-1); }

.btn--lg { padding: 19px 40px; font-size: 1.1rem; }
.btn--sm { padding: 10px 18px; font-size: .88rem; }
.btn--block { width: 100%; }

.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

.cta-note {
  font-size: .9rem;
  color: var(--muted);
  margin: 14px 0 0;
}

/* --------------------------------------------------------------- band -- */

.band { background: var(--surface); border-block: 1px solid var(--line-soft); }
.band--deep { background: var(--surface-2); }

.section-head { max-width: 60ch; margin-bottom: 48px; }
.section-head p { color: var(--text-2); font-size: 1.06rem; margin-bottom: 0; }

/* --------------------------------------------------------- problem list -- */

.q-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}

.q-list li {
  background: var(--ink);
  padding: 20px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 1.04rem;
  color: var(--text);
}

.q-list li::before {
  content: '?';
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--chrome-4);
  color: var(--chrome-3);
  font-size: .82rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 2px;
}

/* ------------------------------------------------------------ teachers -- */

.teachers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.teacher {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
}

.teacher__name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--chrome-1);
  margin-bottom: 4px;
  letter-spacing: -.02em;
}

.teacher__role {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.teacher p { color: var(--text-2); font-size: .99rem; margin-bottom: 0; }

/* ------------------------------------------------------------- weeks -- */

.weeks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  counter-reset: wk;
}

.week {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px 24px 24px 76px;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.week:hover { border-color: var(--chrome-4); transform: translateY(-2px); }

.week::before {
  counter-increment: wk;
  content: counter(wk, decimal-leading-zero);
  position: absolute;
  left: 24px;
  top: 22px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--chrome-4);
}

.week--star { border-color: rgba(53,222,203,.32); }
.week--star::before { color: var(--accent); }

.week__title {
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--chrome-1);
  margin-bottom: 6px;
  line-height: 1.3;
}

.week__out {
  font-size: .94rem;
  color: var(--text-2);
  margin: 0;
}
.week__out strong { color: var(--accent); font-weight: 600; }

.week__flag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(53,222,203,.35);
  border-radius: 999px;
  padding: 3px 9px;
  margin-bottom: 10px;
}

/* --------------------------------------------------------------- fit -- */

.fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.fit__col {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  background: var(--surface-2);
}
.fit__col--yes { border-color: rgba(74,222,128,.24); }
.fit__col--no  { border-color: var(--line); }

.fit__head {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--chrome-1);
  margin-bottom: 18px;
}

.fit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }

.fit li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .99rem;
  color: var(--text-2);
  line-height: 1.55;
}

.fit li::before {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 800;
  margin-top: 2px;
}

.fit__col--yes li::before {
  content: '\2713';
  background: rgba(74,222,128,.14);
  color: var(--good);
}
.fit__col--no li::before {
  content: '\2715';
  background: rgba(248,113,113,.12);
  color: var(--bad);
}

/* --------------------------------------------------------------- faq -- */

.faq { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }

.faq details { background: var(--ink); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 52px 22px 4px;
  position: relative;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--chrome-1);
  transition: color .15s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }

.faq summary::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--chrome-3);
  border-bottom: 2px solid var(--chrome-3);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

.faq__body {
  padding: 0 52px 24px 4px;
  color: var(--text-2);
  font-size: 1rem;
}
.faq__body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ closing -- */

.closer {
  text-align: center;
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(53,222,203,.08), transparent 70%),
    var(--surface);
  border-top: 1px solid var(--line-soft);
}
.closer h2 { margin-bottom: 18px; }
.closer p { color: var(--text-2); max-width: 54ch; margin-inline: auto; font-size: 1.06rem; }
.closer .cta-group { justify-content: center; margin-top: 32px; }

.seats {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--chrome-2);
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: 26px;
}
.seats__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(74,222,128,.16);
}

/* ------------------------------------------------------------- footer -- */

.footer {
  background: var(--ink);
  border-top: 1px solid var(--line-soft);
  padding-block: 48px 40px;
  font-size: .92rem;
  color: var(--muted);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.footer__links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer__links a { color: var(--text-2); font-size: .92rem; }
.footer__links a:hover { color: var(--chrome-1); }

.footer__legal {
  border-top: 1px solid var(--line-soft);
  padding-top: 22px;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 78ch;
}
.footer__legal p { margin-bottom: .7em; }

/* ============================================================ APPLY === */

.apply-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.apply-bar {
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.apply-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
}
.apply-bar .wordmark { font-size: 1.15rem; }

.apply-bar__count {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.progress {
  height: 3px;
  background: var(--line-soft);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi));
  transition: width .38s var(--ease);
}

.apply-main {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: clamp(36px, 7vh, 72px);
}

.step { display: none; }
.step.is-active { display: block; animation: stepIn .34s var(--ease) both; }

@keyframes stepIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.step__kicker {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.step__q {
  font-size: clamp(1.55rem, 3.6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.18;
  color: var(--chrome-1);
  margin-bottom: 10px;
  text-wrap: balance;
}

.step__help {
  color: var(--text-2);
  font-size: 1.02rem;
  margin-bottom: 30px;
  max-width: 54ch;
}

.field {
  width: 100%;
  max-width: 560px;
  padding: 17px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font-family: inherit;
  font-size: 1.08rem;
  line-height: 1.5;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.field::placeholder { color: #5C656E; }
.field:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-3);
  box-shadow: 0 0 0 3px rgba(53,222,203,.12);
}
textarea.field { resize: vertical; min-height: 132px; }

.choices { display: grid; gap: 11px; max-width: 640px; }

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  font-size: 1.03rem;
  color: var(--text);
  transition: border-color .15s var(--ease), background .15s var(--ease),
              transform .15s var(--ease);
}
.choice:hover { border-color: var(--chrome-4); background: var(--surface-3); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }

.choice__key {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  transition: all .15s var(--ease);
}

.choice:has(input:checked) {
  border-color: var(--accent);
  background: rgba(53,222,203,.09);
}
.choice:has(input:checked) .choice__key {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.choice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.step__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.hint {
  font-size: .85rem;
  color: var(--muted);
}
.hint kbd {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82em;
  color: var(--text-2);
}

.err {
  color: var(--bad);
  font-size: .93rem;
  margin-top: 12px;
  min-height: 1.4em;
}

.back-link {
  background: none;
  border: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: .93rem;
  cursor: pointer;
  padding: 8px 0;
}
.back-link:hover { color: var(--text); text-decoration: underline; }

/* honeypot */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------ outcome -- */

.outcome {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  text-align: center;
}

.outcome__badge {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 26px;
  font-size: 1.9rem;
}
.outcome__badge--ok {
  background: rgba(74,222,128,.13);
  border: 1px solid rgba(74,222,128,.4);
  color: var(--good);
}
.outcome__badge--wait {
  background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.36);
  color: var(--warn);
}

.outcome h1 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); margin-bottom: 16px; }
.outcome p { color: var(--text-2); max-width: 56ch; margin-inline: auto; font-size: 1.05rem; }

.cal-box {
  margin-top: 40px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 640px;
  text-align: left;
}

/* -------------------------------------------------------------- admin -- */

.admin-bar {
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 50;
}
.admin-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  flex-wrap: wrap;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}
.stat {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
}
.stat__n {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--chrome-1);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat__l {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filter {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: inherit;
  font-size: .87rem;
  font-weight: 600;
  cursor: pointer;
}
.filter:hover { border-color: var(--chrome-4); color: var(--chrome-1); }
.filter.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }

table.apps { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 860px; }
table.apps th {
  text-align: left;
  padding: 13px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
table.apps td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-2);
  vertical-align: top;
}
table.apps tr:last-child td { border-bottom: 0; }
table.apps tbody tr:hover { background: var(--surface); }
table.apps td strong { color: var(--chrome-1); }

.pill {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill--approved { background: rgba(74,222,128,.14); color: var(--good); }
.pill--waitlist { background: rgba(251,191,36,.13); color: var(--warn); }
.pill--review   { background: rgba(147,197,253,.13); color: #93C5FD; }
.pill--booked   { background: rgba(53,222,203,.16); color: var(--accent-hi); }
.pill--declined { background: rgba(248,113,113,.12); color: var(--bad); }

.flagchip {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  color: var(--warn);
  border: 1px solid rgba(251,191,36,.3);
  border-radius: 4px;
  padding: 2px 7px;
  margin: 2px 3px 0 0;
  white-space: normal;
}


/* ---------------------------------------------------------- legal doc -- */

.doc { padding-block: 56px 88px; }
.doc h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 8px; }
.doc__meta { color: var(--muted); font-size: .9rem; margin-bottom: 40px; }
.doc h2 { font-size: 1.3rem; margin-top: 44px; margin-bottom: 12px; }
.doc p, .doc li { color: var(--text-2); font-size: 1rem; }
.doc ul { padding-left: 22px; display: grid; gap: 8px; margin-bottom: 1.15em; }

/* --------------------------------------------------------------- misc -- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,.22);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================================================== student worksheets ==
   The four documents a student actually works from. Designed to be used two
   ways: on screen with tickable boxes, and printed to fill in by hand on a
   ramp, which is where most of these get used.
   ======================================================================== */

.ws { padding-block: clamp(32px,6vh,60px) 90px; }
.ws h2 {
  font-size: 1.15rem; margin-top: 42px; margin-bottom: 14px;
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
  color: var(--chrome-1);
}
.ws h3 {
  font-size: .8rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
  margin: 26px 0 11px;
}
.ws p, .ws li { color: var(--text-2); font-size: 1rem; }
.ws p + p { margin-top: 10px; }
.ws strong { color: var(--chrome-1); }

/* tick lists that survive being printed */
.ws-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ws-check li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.ws-check li::before {
  content: ''; width: 15px; height: 15px; margin-top: 4px;
  border: 1.5px solid var(--chrome-4); border-radius: 3px;
}
.ws-check li > span { display: block; }

/* fill-in lines */
.ws-fill { border-bottom: 1px solid var(--chrome-4); display: inline-block;
           min-width: 110px; margin-left: 4px; }

/* the thing that must not be skipped */
.ws-danger {
  border: 1px solid rgba(248,113,113,.4); background: rgba(248,113,113,.06);
  border-radius: var(--r); padding: 18px 22px; margin: 20px 0;
}
.ws-danger h3 { color: var(--bad); margin-top: 0; }
.ws-danger .ws-check li::before { border-color: var(--bad); }

.ws-note {
  border-left: 3px solid var(--accent); background: var(--surface-2);
  padding: 16px 20px; border-radius: 0 var(--r) var(--r) 0; margin: 18px 0;
}
.ws-note p { color: var(--text); margin: 0; font-size: .97rem; }
.ws-note p + p { margin-top: 8px; }

.ws-script {
  border: 1px solid var(--line); background: var(--surface-2);
  border-radius: var(--r); padding: 20px 24px; margin: 16px 0;
  color: var(--chrome-1); font-size: 1.04rem; line-height: 1.6;
}
.ws-script + .ws-why { color: var(--muted); font-size: .93rem; margin-top: -6px; }

.ws-table { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: var(--r); }
.ws-table table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 420px; }
.ws-table th {
  text-align: left; padding: 11px 15px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); color: var(--muted);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
.ws-table td { padding: 11px 15px; border-bottom: 1px solid var(--line-soft); color: var(--text-2); }
.ws-table tr:last-child td { border-bottom: 0; }
.ws-table td:last-child { color: var(--chrome-3); }

.ws-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: .92rem; margin-bottom: 22px;
}
.ws-back:hover { color: var(--accent); text-decoration: none; }

@media print {
  body { background: #fff; }
  .apply-bar, .footer, .no-print, .ws-back { display: none !important; }
  .ws { padding: 0; }
  .ws p, .ws li, .ws-table td { color: #222 !important; }
  h1, h2, .ws strong, .ws-script { color: #000 !important; }
  .ws h3 { color: #0d7d70 !important; }
  .ws-note, .ws-script, .ws-table { background: #fafafa !important; border-color: #ccc !important; }
  .ws-danger { background: #fff5f5 !important; border-color: #d66 !important; }
  .ws-check li::before { border-color: #666 !important; }
  .ws h2 { break-after: avoid; page-break-after: avoid; }
  .ws-danger, .ws-script, .ws-note { break-inside: avoid; page-break-inside: avoid; }
  @page { size: Letter; margin: 14mm; }
}


/* ------------------------------------------------ admin: recordings ---- */
.sesrow {
  display: grid; grid-template-columns: 34px 1fr 2fr auto;
  gap: 12px; align-items: center;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}
.sesrow__n {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); border: 1px solid var(--line);
  color: var(--chrome-3); font-weight: 700; font-size: .82rem;
}
.sesrow__t { color: var(--chrome-1); font-weight: 600; font-size: .95rem; }
.sesrow__d { color: var(--muted); font-size: .82rem; }
.sesrow__in { padding: 9px 12px; font-size: .9rem; }

@media (max-width: 760px) {
  .sesrow { grid-template-columns: 34px 1fr; gap: 8px 12px; }
  .sesrow__in { grid-column: 1 / -1; font-size: 16px; }
  .sesrow button { grid-column: 1 / -1; width: 100%; padding: 10px; }
}

/* ================================================= photographic grounds ==
   Our own photography, already darkened and desaturated at the image level
   so these rules only handle the dissolve into the palette. Every one is
   decorative: behind text, never carrying meaning.
   ======================================================================== */

.photo-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.photo-bg__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.photo-bg__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(53,222,203,.13), transparent 60%),
    linear-gradient(180deg, rgba(10,15,17,.34) 0%, rgba(10,15,17,.62) 45%,
                            rgba(10,15,17,.90) 78%, var(--ink) 100%);
}

/* Hero copy is left aligned, so the dark column sits left and the
   photograph keeps the right edge where nothing has to be read. */
.hero .photo-bg__veil {
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(53,222,203,.13), transparent 60%),
    linear-gradient(90deg, rgba(10,15,17,.88) 0%, rgba(10,15,17,.72) 38%,
                           rgba(10,15,17,.34) 68%, rgba(10,15,17,.18) 100%),
    linear-gradient(180deg, rgba(10,15,17,.10) 0%, rgba(10,15,17,.38) 55%,
                            rgba(10,15,17,.86) 85%, var(--ink) 100%);
}

/* the landing hero sits over it */
.hero { position: relative; }
.hero > .wrap { position: relative; z-index: 1; }
.hero .photo-bg__img { background-image: url('/assets/photos/nose.webp'); opacity: .70; background-position: center 30%; }

/* a slim band, for pages that just want a sense of place */
.photo-band {
  position: relative; height: clamp(150px, 26vw, 240px);
  overflow: hidden; border-radius: var(--r-lg);
  margin-bottom: 30px; border: 1px solid var(--line);
}
.photo-band .photo-bg__img { opacity: .82; }
.photo-band .photo-bg__veil {
  background: linear-gradient(180deg, rgba(10,15,17,.15), rgba(10,15,17,.55) 70%, rgba(10,15,17,.9));
}
.photo-band__cap {
  position: absolute; left: 20px; right: 20px; bottom: 14px; z-index: 1;
  color: var(--chrome-2); font-size: .82rem; letter-spacing: .02em;
  text-shadow: 0 1px 10px rgba(0,0,0,.8);
}

@media print { .photo-bg, .photo-band { display: none !important; } }

/* ======================================================== video sound ==
   Autoplay is only permitted muted, so the video starts silent and this is
   the way back to sound. Deliberately large and central: a small speaker
   icon in a corner gets missed, and a viewer who never finds the audio is a
   viewer who watched a silent advert.
   ====================================================================== */

.video-sound {
  position: absolute;
  left: 50%;
  bottom: 58px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: rgba(8, 22, 21, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  transition: opacity .2s ease, transform .2s ease;
}
.video-sound svg { width: 19px; height: 19px; }
.video-sound:hover { transform: translateX(-50%) translateY(-1px); }
.video-sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Hidden once sound is on, or if the video is not actually playing. */
.video-frame.is-audible .video-sound,
.video-frame.is-idle    .video-sound { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .video-sound { transition: none; }
}
@media (max-width: 520px) {
  .video-sound { bottom: 46px; font-size: .86rem; padding: 9px 16px; }
}

/* ==================================================== hero, full screen ==
   The first screen is one job: watch this, then apply. Everything that was
   competing with the video for that space is gone. Centred because with the
   eyebrow and subheading removed there is nothing left to align to a left
   edge, and a lone headline over a centered video reads as a mistake.
   ====================================================================== */

.hero {
  min-height: 100svh;              /* svh, so mobile browser chrome cannot crop it */
  display: flex;
  align-items: center;
  padding-top: 72px;               /* clears the fixed header */
  padding-bottom: 56px;
}
.hero__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hero h1 {
  max-width: 20ch;
  margin: 0 auto 22px;
  text-wrap: balance;
}
.hero .video-frame {
  width: 100%;
  max-width: 780px;
  margin-bottom: 26px;
}
.hero .cta-group { justify-content: center; }
.hero .cta-note { margin-top: 12px; }

/* A quiet cue that the page continues, so a full-height hero does not read
   as the whole site. */
.hero__more {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--text-2);
  opacity: .55;
  animation: heroNudge 2.4s ease-in-out infinite;
}
.hero__more svg { width: 26px; height: 26px; display: block; }
.hero__more:hover { opacity: 1; }
@keyframes heroNudge {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__more { animation: none; }
}

/* Short screens: the video matters more than breathing room. */
@media (max-height: 760px) {
  .hero h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 16px; }
  .hero .video-frame { margin-bottom: 18px; max-width: 640px; }
  .hero__more { display: none; }
}
@media (max-width: 620px) {
  .hero { padding-top: 64px; }
  .hero h1 { max-width: 16ch; }
}

/* The hero sub, centered and short. Sized so it reads as one thought under the
   headline rather than a paragraph competing with it. */
.hero .hero__sub {
  max-width: 34ch;
  margin: 0 auto 26px;
  text-align: center;
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  text-wrap: balance;
}
@media (max-height: 760px) {
  .hero .hero__sub { margin-bottom: 18px; font-size: 1rem; }
}

/* ============================================ hero fit, height driven ==
   The video must never push Apply Now below the fold. Rather than guessing a
   width, size it from the height that is actually left over once the headline,
   sub, button and note have taken theirs. 540px is measured, not estimated.
   16/9 converts that spare height into a width.
   ====================================================================== */
.hero .video-frame {
  max-width: min(780px, calc((100svh - 540px) * 16 / 9));
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 620px) {
  /* On a phone width is the binding constraint, not height, and the stack is
     shorter because the sub wraps tighter. */
  .hero .video-frame { max-width: min(100%, calc((100svh - 470px) * 16 / 9)); }
}

/* Sound prompt moved off the captions. Bottom center is the convention but it
   sat directly on the burned-in subtitles, which are the whole reason the
   video works muted in the first place. */
.video-sound {
  left: auto;
  right: 12px;
  bottom: auto;
  top: 12px;
  transform: none;
  padding: 9px 15px;
  font-size: .86rem;
}
.video-sound:hover { transform: translateY(-1px); }
@media (max-width: 520px) {
  .video-sound { top: 10px; right: 10px; padding: 8px 13px; font-size: .8rem; }
  .video-sound span { display: none; }        /* icon only, keeps it small */
  .video-sound svg { width: 17px; height: 17px; }
}

/* Reserve measured against the real thing rather than estimated: at 1280x800
   and 1440x900 the cta-note was landing a few pixels under the fold. A little
   more reserved height and a tighter note pulls it back inside on every size
   tested, phone through desktop. */
.hero .video-frame {
  max-width: min(780px, calc((100svh - 565px) * 16 / 9));
}
@media (max-width: 620px) {
  .hero .video-frame { max-width: min(100%, calc((100svh - 470px) * 16 / 9)); }
}
.hero .cta-note { margin-top: 8px; }
.hero { padding-bottom: 40px; }

/* 565 landed the note exactly on the fold line at 1280x800 and 1440x900, which
   is a sub-pixel coin toss. 582 gives real headroom on both. */
.hero .video-frame { max-width: min(780px, calc((100svh - 582px) * 16 / 9)); }

/* Must come last. The desktop reserve above is unconditional, so without this
   it also applied on phones and squeezed the video to 151px on a 375x667
   screen. On a phone width is the binding constraint, not height. */
@media (max-width: 620px) {
  .hero .video-frame { max-width: min(100%, calc((100svh - 430px) * 16 / 9)); }
}

/* ==================================================== sound, unmissable ==
   Replaces the corner icon. It covers the whole video, because somebody
   watching a sales video in silence has not really watched it, and a small
   speaker in a corner gets missed by most people on a phone.

   The veil is light enough that the footage still reads underneath, so the
   video is visibly playing rather than looking like a static poster with a
   play button on it. That difference is what makes people tap.
   ====================================================================== */
.video-sound {
  position: absolute;
  inset: 0;
  left: 0; right: 0; top: 0; bottom: 0;
  width: 100%; height: 100%;
  transform: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(4,14,13,.30) 0%, rgba(4,14,13,.52) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  cursor: pointer;
  z-index: 3;
}
.video-sound__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.video-sound__ico {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #05201F;
  box-shadow: 0 6px 26px rgba(0,0,0,.4);
  transition: transform .18s ease;
}
.video-sound__ico svg { width: 28px; height: 28px; }
.video-sound:hover .video-sound__ico { transform: scale(1.06); }
.video-sound__txt {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.video-sound:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

@media (max-width: 520px) {
  .video-sound__ico { width: 54px; height: 54px; }
  .video-sound__ico svg { width: 25px; height: 25px; }
  .video-sound__txt { font-size: .94rem; display: block; }   /* keep the words on mobile */
}
@media (prefers-reduced-motion: reduce) {
  .video-sound__ico { transition: none; }
}

/* Undo the corner-icon era rule. An earlier `.video-sound span { display:none }`
   was written when the prompt was a small pill and the label was dropped on
   narrow screens. It now hits every span in the full-cover overlay, including
   the icon and its wrapper, collapsing them to 0x0. The result was a dimmed
   video with no visible button, which is exactly the thing this was meant to
   fix. Must stay after that rule. */
.video-sound span { display: initial; }
.video-sound__inner {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.video-sound__ico {
  display: grid !important;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--accent);
  color: #05201F;
  box-shadow: 0 6px 26px rgba(0,0,0,.4);
}
.video-sound__ico svg { width: 28px !important; height: 28px !important; display: block; }
.video-sound__txt {
  display: block !important;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
@media (max-width: 520px) {
  .video-sound__ico { width: 54px; height: 54px; }
  .video-sound__ico svg { width: 25px !important; height: 25px !important; }
  .video-sound__txt { font-size: .94rem; }
}


/* The visible sound prompt was removed on request: it works without one for a
   returning visitor whose browser already trusts the site. The rules are left
   above rather than deleted, in case a first-time visitor landing on a silent
   video turns out to cost more than the prompt did. Restoring it is one line
   of markup plus removing this. */
.video-sound { display: none !important; }

/* ------------------------------------------------------------- logo ----
   The JCA logo replaces the old text wordmark. Sized in em, so every inline
   font-size override already on .wordmark (1.15rem through 1.85rem) keeps
   working untouched.

   Two files, because every page flips to a white background under
   @media print and the light logo is invisible on white. Exactly one is
   ever displayed. */
.wordmark__img { height: 2.6em; width: auto; display: block; }
.wordmark__img--ink { display: none; }

@media print {
  .wordmark__img        { display: none; }
  .wordmark__img--ink   { display: block; }
}