/* ============================================================
   Apply Modal — job application overlay
   Shared: careers.html + positions.html
   ============================================================ */

/* === Backdrop === */
.apl-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.apl-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

/* === Shell === */
.apl-shell {
  position: relative;
  width: 90%;
  max-width: 860px;
  height: 90vh;
  background: #0d1012;
  border-top: 2px solid var(--jg-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(28px) scale(0.985);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.apl-backdrop.is-open .apl-shell {
  transform: none;
}

/* === Header — sticky, always visible === */
.apl-header {
  flex-shrink: 0;
  background: #0d1012;
  border-bottom: 1px solid rgba(0, 189, 255, 0.12);
  padding: 22px 36px;
  display: flex;
  /* center, not flex-start — title, Apply and the X share one visual midline
     (flex-start was tuned for the button-less title + X pair) */
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.apl-role-title {
  font-family: var(--font-display, "Anton", sans-serif);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 38px);
  text-transform: uppercase;
  color: var(--jg-light, #F4F4F4);
  line-height: 1;
  display: block;
  /* single line always — fitRoleTitle() in apply-modal.js steps the size down
     from the clamp value until it fits; ellipsis is the absolute-floor case */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* copy-link — same quiet icon treatment as the close button; the "Copied"
   pill confirms the write without a toast layer */
.apl-copylink {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: rgba(244, 244, 244, 0.45);
  transition: color 0.2s ease;
  flex-shrink: 0;
  line-height: 0;
}
.apl-copylink:hover { color: var(--jg-primary, #00BDFF); }
.apl-copylink svg {
  display: block;
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.apl-copylink__tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #161719;
  background: var(--jg-primary, #00BDFF);
  padding: 5px 9px;
  border-radius: 0 8px 8px 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.apl-copylink.is-copied .apl-copylink__tip { opacity: 1; transform: none; }

.apl-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: rgba(244, 244, 244, 0.45);
  transition: color 0.2s ease;
  flex-shrink: 0;
  line-height: 0;
}

.apl-close:hover {
  color: var(--jg-primary, #00BDFF);
}

.apl-close svg {
  display: block;
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
}

/* === Body — scrollable === */
.apl-body {
  flex: 1;
  overflow-y: auto;
  padding: 40px 36px 56px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 189, 255, 0.25) transparent;
}

.apl-body::-webkit-scrollbar { width: 4px; }
.apl-body::-webkit-scrollbar-track { background: transparent; }
.apl-body::-webkit-scrollbar-thumb { background: rgba(0, 189, 255, 0.25); border-radius: 2px; }

/* === Tabs — Overview | Apply, pinned below the header === */
.apl-header__title { flex: 1; min-width: 0; }
.apl-tabs {
  flex-shrink: 0;
  display: flex;
  gap: 28px;
  padding: 0 36px;
  background: #0d1012;
  border-bottom: 1px solid rgba(244, 244, 244, 0.1);
}
.apl-tabs[hidden] { display: none; }
.apl-tab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 244, 244, 0.55);
  background: none;
  border: none;
  cursor: pointer;
  padding: 15px 2px 13px;
  /* the active underline sits ON the bar's own border */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.apl-tab:hover { color: var(--jg-light, #F4F4F4); }
.apl-tab.is-active {
  color: var(--jg-primary, #00BDFF);
  border-bottom-color: var(--jg-primary, #00BDFF);
}

/* Apply is the conversion action: same quiet tab mechanics as Overview,
   but always bold and primary cyan so it can't be missed. */
.apl-tab--apply {
  font-weight: 700;
  color: var(--jg-primary, #00BDFF);
  position: relative;
}
.apl-tab--apply:hover { color: var(--jg-primary, #00BDFF); }

/* While Apply is NOT the active tab, a light shine sweeps the label every
   ~3s. Stops the moment it becomes active (nothing left to sell), and under
   prefers-reduced-motion. */
.apl-tab--apply:not(.is-active) {
  background: linear-gradient(
    110deg,
    var(--jg-primary, #00BDFF) 0%,
    var(--jg-primary, #00BDFF) 42%,
    #eafaff 50%,
    var(--jg-primary, #00BDFF) 58%,
    var(--jg-primary, #00BDFF) 100%
  );
  background-size: 250% 100%;
  background-position: 170% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: apl-apply-shine 3s ease-in-out infinite;
}
/* rest ~60% of the cycle, then one sweep right-to-left */
@keyframes apl-apply-shine {
  0%, 58% { background-position: 170% 0; }
  100%    { background-position: -70% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .apl-tab--apply:not(.is-active) { animation: none; }
}

/* === About view — the full Greenhouse post === */
.apl-desc-view[hidden] { display: none; }
.apl-desc {
  font-family: var(--font-body, "Libre Franklin", sans-serif);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--prose-color, #DADCE0);
}
/* Greenhouse content is foreign markup — postings pasted from rich editors
   can carry <section> tags, which the site's global
   `section { padding-block: clamp(70px, 11vh, 130px) }` turns into huge
   voids (empty sections included). Neutralize page-layout styling here. */
.apl-desc section { padding: 0; margin: 0; }
.apl-desc p, .apl-desc ul, .apl-desc ol { margin: 0 0 14px; }
.apl-desc ul, .apl-desc ol { padding-left: 22px; }
.apl-desc li { margin-bottom: 6px; }
.apl-desc h1, .apl-desc h2, .apl-desc h3, .apl-desc h4 {
  font-family: var(--font-body, "Libre Franklin", sans-serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--jg-light, #F4F4F4);
  margin: 26px 0 10px;
}
.apl-desc strong, .apl-desc b { font-weight: 600; color: var(--jg-light, #F4F4F4); }
.apl-desc a { color: var(--jg-primary, #00BDFF); text-decoration: underline; }
.apl-desc > :first-child { margin-top: 0; }
.apl-desc > :last-child { margin-bottom: 0; }

/* "Apply for this role" divider heading between the post and the form */
.apl-form-head {
  font-family: var(--font-display, "Anton", sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 24px;
  color: var(--jg-light, #F4F4F4);
  margin: 0;
}

/* === Form === */
.apl-form {
  display: flex;
  flex-direction: column;
  gap: 26px;
  transition: opacity 0.25s ease;
}

/* REAL BUG, found by actually driving a submission end to end: `.apl-form`'s
   own `display: flex` ties the browser default `[hidden] { display: none }`
   on specificity, and author styles win cascade ties over the UA sheet — so
   `el.form.hidden = true` was silently doing nothing. After every successful
   submit the form (permanently-disabled "Submitting…" button included, since
   only the error path ever reset it) stayed fully on screen, pushing the
   actual success content down into scroll space nobody reaches. This is very
   likely THE "holds on Submitting… forever" bug. `[hidden]` needs to win. */
.apl-form[hidden] { display: none; }

.apl-form.is-hiding {
  opacity: 0;
  pointer-events: none;
}

/* Two-column row */
.apl-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Section heading */
.apl-section-head {
  font-family: var(--font-display, "Anton", sans-serif);
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--jg-primary, #00BDFF);
  margin: 0;
}

/* Divider */
.apl-divider {
  border: none;
  border-top: 1px solid rgba(244, 244, 244, 0.07);
  margin: 2px 0;
}

/* Field */
.apl-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.apl-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #F4F4F4;
  user-select: none;
}

.apl-required {
  color: var(--jg-primary, #00BDFF);
  margin-left: 2px;
}

/* Inputs */
.apl-input,
.apl-select,
.apl-textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(244, 244, 244, 0.18);
  color: var(--jg-light, #F4F4F4);
  font-family: var(--font-body, "Libre Franklin", sans-serif);
  font-size: 15px;
  font-weight: 300;
  padding: 9px 0 9px;
  outline: none;
  transition: border-color 0.2s ease;
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.apl-input:focus,
.apl-select:focus,
.apl-textarea:focus {
  border-bottom-color: var(--jg-primary, #00BDFF);
}

.apl-input::placeholder,
.apl-textarea::placeholder {
  color: rgba(244, 244, 244, 0.2);
}

/* Select */
.apl-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(244,244,244,0.35)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 22px;
}

.apl-select option {
  background: #0d1012;
  color: var(--jg-light, #F4F4F4);
}

/* Textarea */
.apl-textarea {
  resize: vertical;
  min-height: 82px;
  line-height: 1.6;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Radio group */
.apl-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.apl-radios {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.apl-radio {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-family: var(--font-body, "Libre Franklin", sans-serif);
  font-size: 14px;
  font-weight: 300;
  color: #F4F4F4;
  user-select: none;
}

.apl-radio input[type="radio"] {
  width: 15px;
  height: 15px;
  accent-color: var(--jg-primary, #00BDFF);
  cursor: pointer;
  flex-shrink: 0;
}

/* Submit = action button: white teardrop, no arrow (arrows mean "leaves
   the page" sitewide). */
.apl-submit {
  /* Fill + hover come from the global .btn.btn-white; this only owns layout. */
  align-self: flex-start;
  margin-top: 10px;
  min-width: 230px; /* holds width across "Submit Application" <-> "Submitting…" */
  justify-content: center;
}

.apl-submit:active {
  transform: translateY(0);
}

.apl-submit.is-sending { cursor: progress; }

/* Spinner: a rotating gap in an otherwise-solid ring, dark-on-white to match
   the button's own text color. Hidden until .is-sending so the resting
   button never carries the extra 10px gap from .btn's flex layout. */
.apl-submit__spinner {
  display: none;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(22, 23, 25, 0.25);
  border-top-color: var(--jg-dark, #161719);
}
.apl-submit.is-sending .apl-submit__spinner {
  display: inline-block;
  animation: aplSpin 0.7s linear infinite;
}
@keyframes aplSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .apl-submit.is-sending .apl-submit__spinner { animation: none; }
}

/* Whole field list dims and locks while a submit is in flight — the
   disabled submit button alone is easy to miss; this makes "something is
   happening" legible at a glance instead of just "the button changed." */
.apl-form.is-sending #apl-fields {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* The modal shell is a fixed 90vh, and the success message is short — left
   stacked at the top it read as an accident, stranded in a wall of empty
   space below it. Centering only kicks in for the success state; :has()
   keeps loading/error/the (long, scrolling) form entirely unaffected. */
.apl-body:has(.apl-success.is-visible) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* === Success state === */
.apl-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
  padding: 8px 0;
}

.apl-success.is-visible {
  display: flex;
  animation: aplSuccessIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

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

/* Checkmark sits beside the heading as one unit, big enough to lead the
   screen rather than caption it. */
.apl-success__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}

.apl-success__mark {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border: 2px solid var(--jg-primary, #00BDFF);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jg-primary, #00BDFF);
}

/* Badge pops in first (spring overshoot), then the checkmark draws itself in
   — two small motions read as one deliberate "confirmed" beat rather than
   everything just fading in at once. */
.apl-success.is-visible .apl-success__mark {
  animation: aplMarkPop 0.4s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.apl-success__mark svg {
  width: 36px;
  height: 36px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.apl-success__mark svg polyline {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
}
.apl-success.is-visible .apl-success__mark svg polyline {
  animation: aplCheckDraw 0.45s 0.25s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes aplMarkPop {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes aplCheckDraw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .apl-success.is-visible .apl-success__mark { animation: none; }
  .apl-success__mark svg polyline { stroke-dasharray: none; stroke-dashoffset: 0; }
  .apl-success.is-visible .apl-success__mark svg polyline { animation: none; }
}

.apl-success__heading {
  font-family: var(--font-display, "Anton", sans-serif);
  font-weight: 400;
  font-size: clamp(34px, 5.5vw, 64px);
  text-transform: uppercase;
  color: var(--jg-light, #F4F4F4);
  line-height: 1;
  margin: 0;
}

.apl-success__sub {
  font-family: var(--font-body, "Libre Franklin", sans-serif);
  font-size: 17px;
  font-weight: 300;
  color: #B0B2B5;
  line-height: 1.65;
  max-width: 440px;
  margin: 0;
}

.apl-success__close {
  background: none;
  border: 1px solid rgba(244, 244, 244, 0.25);
  color: rgba(244, 244, 244, 0.65);
  cursor: pointer;
  font-family: var(--font-display, "Anton", sans-serif);
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 28px;
  border-radius: 0 20px 20px 20px;
  transition: border-color 0.2s ease, color 0.2s ease;
  margin-top: 6px;
}

.apl-success__close:hover {
  border-color: var(--jg-primary, #00BDFF);
  color: var(--jg-primary, #00BDFF);
}

/* === Confirm exit dialog === */
.apl-confirm {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.apl-confirm.is-open {
  opacity: 1;
  pointer-events: all;
}

.apl-confirm__box {
  background: #0d1012;
  border-top: 2px solid var(--jg-primary, #00BDFF);
  border-left: 1px solid rgba(0, 189, 255, 0.15);
  border-right: 1px solid rgba(0, 189, 255, 0.15);
  border-bottom: 1px solid rgba(0, 189, 255, 0.15);
  padding: 32px 36px;
  max-width: 360px;
  width: 88%;
  transform: scale(0.96);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.apl-confirm.is-open .apl-confirm__box {
  transform: none;
}

.apl-confirm__q {
  font-family: var(--font-display, "Anton", sans-serif);
  font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--jg-light, #F4F4F4);
  margin: 0 0 8px;
}

.apl-confirm__sub {
  font-family: var(--font-body, "Libre Franklin", sans-serif);
  font-size: 14px;
  font-weight: 300;
  color: #B0B2B5;
  margin: 0 0 24px;
  line-height: 1.5;
}

.apl-confirm__btns {
  display: flex;
  gap: 10px;
}

.apl-confirm-keep {
  flex: 1;
  background: var(--jg-primary, #00BDFF);
  color: var(--jg-dark, #161719);
  border: none;
  cursor: pointer;
  font-family: var(--font-display, "Anton", sans-serif);
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 12px 16px;
  border-radius: 0 18px 18px 18px;
  transition: filter 0.2s ease;
}

.apl-confirm-keep:hover { filter: brightness(1.1); }

.apl-confirm-exit {
  flex: 1;
  background: none;
  border: 1px solid rgba(244, 244, 244, 0.18);
  color: rgba(244, 244, 244, 0.5);
  cursor: pointer;
  font-family: var(--font-display, "Anton", sans-serif);
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 12px 16px;
  border-radius: 0 18px 18px 18px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.apl-confirm-exit:hover {
  border-color: rgba(244, 244, 244, 0.35);
  color: rgba(244, 244, 244, 0.75);
}

/* === Responsive === */
@media (max-width: 640px) {
  .apl-shell {
    width: 96%;
    height: 94vh;
  }

  .apl-header {
    padding: 18px 20px;
  }

  .apl-body {
    padding: 28px 20px 44px;
  }

  .apl-row {
    grid-template-columns: 1fr;
  }

  .apl-radios {
    gap: 16px;
  }

  .apl-success__top {
    flex-direction: column;
    gap: 16px;
  }

  .apl-success__mark {
    width: 60px;
    height: 60px;
  }

  .apl-success__mark svg {
    width: 28px;
    height: 28px;
  }
}

/* ============================================================
   GREENHOUSE-DRIVEN FORM
   Fields are rendered from the job's question schema at open time, so these
   cover the states a static form never had: loading, failure, file inputs,
   the attach-or-paste toggle, and the voluntary self-identification block.
   ============================================================ */

/* Fields live inside this wrapper rather than directly under .apl-form, which
   would otherwise collapse them into a single flex child and swallow the 26px
   gap that separates one field from the next. Mirror the form's own layout. */
#apl-fields {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.apl-loading,
.apl-loaderr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244,244,244,0.55);
  padding: 40px 0;
  margin: 0;
}

.apl-loaderr { color: #FF6B6B; text-transform: none; letter-spacing: 0.02em; line-height: 1.6; }

.apl-formerr {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #FF6B6B;
  border-left: 2px solid #FF6B6B;
  background: rgba(255,107,107,0.06);
  padding: 12px 16px;
  margin: 0 0 20px;
}

.apl-hidden { display: none !important; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.apl-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.apl-file {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--fg-muted);
  width: 100%;
  padding: 14px;
  background: rgba(244,244,244,0.03);
  border: 1px dashed rgba(0,189,255,0.3);
  cursor: pointer;
}

.apl-file::file-selector-button {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-primary);
  background: rgba(0,189,255,0.12);
  border: 1px solid rgba(0,189,255,0.35);
  padding: 8px 16px;
  margin-right: 14px;
  cursor: pointer;
}

.apl-paste-toggle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--jg-primary, #00BDFF);
  background: none;
  border: none;
  padding: 8px 0 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.apl-paste-toggle:hover { color: #F4F4F4; }

/* Failed validation. Applied to the wrapper for attach-or-paste pairs, where
   neither individual control is wrong on its own — only the pair is. */
.is-invalid,
.apl-field[data-pair="1"].is-invalid .apl-file {
  border-color: #FF6B6B !important;
}

/* Same nesting caveat as #apl-fields: these wrap their own questions, so they
   must re-declare the column gap or the selects collapse against each other. */
.apl-eeoc {
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-left: 2px solid rgba(0,189,255,0.18);
  padding-left: 20px;
}

.apl-eeoc__note {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(244,244,244,0.5);
  margin: -12px 0 0;
}

.apl-eeoc__intro {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(244,244,244,0.4);
}

.apl-eeoc__intro p { margin: 0; }

/* The federally prescribed statements run to thousands of characters. Collapsed
   by default so the questions stay visible; the text itself is untouched. */
.apl-eeoc__details > summary {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--jg-primary, #00BDFF);
  cursor: pointer;
  padding: 4px 0;
  text-underline-offset: 3px;
}

.apl-eeoc__details > summary:hover { text-decoration: underline; }
.apl-eeoc__details[open] > summary { margin-bottom: 14px; }

/* Federally prescribed copy (Form CC-305 and the EEO categories) rendered as
   Greenhouse supplies it. Style the container, never the content. */
.apl-eeoc__desc {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(244,244,244,0.6);
  margin-bottom: 18px;
}

.apl-eeoc__desc h3 { font-size: 14px; color: var(--fg-primary); margin: 0 0 10px; }
.apl-eeoc__desc p { margin: 0 0 10px; }
.apl-eeoc__desc ul { margin: 0 0 10px 18px; }
.apl-eeoc__desc img { max-width: 100%; height: auto; }