/*
 * Theme tokens mirror Hiring's shadcn zinc palette
 * (web/src/styles/globals.css): light at :root, dark via OS preference.
 * Careers keeps its own aliases (--bg-base, --text-*, --hairline, …) so the
 * Django templates stay readable; those aliases resolve to the shared roles.
 */
:root {
  color-scheme: light;

  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --accent: oklch(0.967 0.001 286.375);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --destructive: oklch(0.577 0.245 27.325);
  --success: oklch(0.52 0.09 155);
  --warning: oklch(0.58 0.09 85);
  --warning-foreground: oklch(0.984 0.019 85);

  /* Emil Kowalski easing — same curve Hiring uses for control feedback. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --bg-base: var(--background);
  --bg-surface: var(--card);
  --bg-elevated: var(--muted);
  --text-primary: var(--foreground);
  --text-secondary: var(--muted-foreground);
  --text-tertiary: color-mix(in oklch, var(--muted-foreground) 78%, transparent);
  --hairline: var(--border);
  --hairline-strong: var(--input);
  --focus: var(--ring);
  --danger: var(--destructive);
  --selection: color-mix(in oklch, var(--foreground) 16%, transparent);
  --header-blur: color-mix(in oklch, var(--background) 85%, transparent);
  --panel-solid: color-mix(in oklch, var(--background) 96%, transparent);
  --on-primary-muted: color-mix(in oklch, var(--primary-foreground) 70%, transparent);
  --banner-bg: color-mix(in oklch, var(--warning) 18%, var(--background));
  --banner-text: oklch(0.45 0.08 75);
  --page-width: 72rem;
  --reading-width: 58rem;
  --private-width: 44rem;
  /* Hiring's compact control scale. */
  --control-height: 2rem;
  font-family:
    "Space Grotesk", "Helvetica Neue", Helvetica, Arial, ui-sans-serif,
    system-ui, sans-serif;
  font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --background: oklch(0.141 0.005 285.823);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.21 0.006 285.885);
    --muted: oklch(0.274 0.006 286.033);
    --muted-foreground: oklch(0.705 0.015 286.067);
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.21 0.006 285.885);
    --secondary: oklch(0.274 0.006 286.033);
    --secondary-foreground: oklch(0.985 0 0);
    --accent: oklch(0.274 0.006 286.033);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.552 0.016 285.938);
    --destructive: oklch(0.704 0.191 22.216);
    --success: oklch(0.75 0.1 155);
    --warning: oklch(0.8 0.1 85);
    --warning-foreground: oklch(0.26 0.04 85);

    --selection: color-mix(in oklch, var(--foreground) 22%, transparent);
    --banner-bg: color-mix(in oklch, var(--warning) 16%, var(--background));
    --banner-text: oklch(0.9 0.04 85);
  }
}

* {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection);
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  border-radius: 0;
  font: inherit;
}

button:not(:disabled),
input[type="file"]:not(:disabled),
select:not(:disabled) {
  cursor: pointer;
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--ring) 50%, transparent);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.preview-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--hairline-strong);
  background: var(--banner-bg);
  color: var(--banner-text);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.button[aria-disabled="true"],
.secondary-button[aria-disabled="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  transform: translateY(-200%);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.875rem;
  font-weight: 500;
}

.skip-link:focus {
  transform: translateY(0);
}

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

.site-header {
  border-bottom: 1px solid var(--hairline);
}

.header-inner,
.footer-inner {
  display: flex;
  width: min(100% - 2rem, var(--page-width));
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.header-inner {
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  text-decoration: none;
}

.brand-mark {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.055em;
}

.brand-surface {
  padding-left: 0.75rem;
  border-left: 1px solid var(--hairline-strong);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
}

.site-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.site-nav a {
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--text-primary);
}

.main-content {
  width: 100%;
  flex: 1;
}

.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--hairline);
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.footer-inner {
  min-height: 5rem;
}

.footer-inner p {
  margin: 0;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text-secondary);
}

.eyebrow {
  margin: 0 0 1.25rem;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  font-weight: 500;
}

.hero,
.roles-section,
.general-callout,
.holding-section,
.not-found-section,
.form-page,
.reading-shell {
  width: min(100% - 2rem, var(--page-width));
  margin-inline: auto;
}

.hero {
  padding-block: clamp(5rem, 12vw, 10rem);
}

.hero h1,
.holding-section h1 {
  max-width: 58rem;
  margin: 0;
  font-size: clamp(2.75rem, 7vw, 6.75rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-wrap: balance;
}

.hero-copy {
  max-width: 40rem;
  margin: 2.25rem 0 0;
  color: var(--text-secondary);
  font-size: clamp(1.125rem, 2vw, 1.35rem);
  line-height: 1.65;
}

.text-link {
  display: inline-flex;
  min-height: 2.75rem;
  margin-top: 2rem;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  text-underline-offset: 0.3rem;
}

.text-link:hover {
  color: var(--text-primary);
}

.text-link.compact {
  min-height: auto;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
}

.roles-section {
  padding-block: 5rem 7rem;
  border-top: 1px solid var(--hairline);
}

.section-heading {
  display: flex;
  margin-bottom: 2.5rem;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
}

.section-heading .eyebrow {
  margin-bottom: 0.75rem;
}

.section-heading h2,
.general-callout h2,
.role-apply-callout h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.section-heading > p {
  margin: 0 0 0.35rem;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
}

.role-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
}

.role-card {
  display: grid;
  min-height: 8.5rem;
  padding: 1.75rem 0.25rem;
  border-bottom: 1px solid var(--hairline);
  grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 1fr);
  align-items: center;
  gap: 2rem;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    padding 160ms ease;
}

.role-card:hover {
  padding-inline: 1rem;
  background: var(--bg-surface);
}

.role-card-main,
.role-card-side {
  display: flex;
  min-width: 0;
}

.role-card-main {
  flex-direction: column;
  gap: 0.65rem;
}

.role-title {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.role-summary,
.role-meta {
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

.role-summary {
  max-width: 38rem;
}

.role-card-side {
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
}

.role-meta {
  text-align: right;
}

.role-arrow {
  color: var(--text-tertiary);
  font-size: 1.25rem;
  transition: transform 160ms ease;
}

.role-card:hover .role-arrow {
  transform: translate(0.2rem, -0.2rem);
}

.general-callout {
  padding-block: 6rem;
  border-top: 1px solid var(--hairline);
}

.general-callout > p:not(.eyebrow),
.role-apply-callout > p,
.form-header > p,
.state-panel > p {
  max-width: 40rem;
  margin: 1.25rem 0 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.button,
.secondary-button {
  display: inline-flex;
  min-height: 2rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid transparent;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color 150ms var(--ease-out),
    border-color 150ms var(--ease-out),
    color 150ms var(--ease-out),
    opacity 150ms var(--ease-out),
    transform 150ms var(--ease-out);
}

.general-callout .button,
.role-apply-callout .button {
  margin-top: 2rem;
}

.button:hover:not(:disabled):not(.button-disabled) {
  background: color-mix(in oklch, var(--primary) 80%, transparent);
}

.button:active:not(:disabled):not(.button-disabled),
.secondary-button:active:not(:disabled) {
  transform: scale(0.97);
}

.button-disabled {
  border-color: var(--hairline);
  background: var(--bg-elevated);
  color: var(--text-tertiary);
}

.secondary-button {
  border-color: var(--hairline);
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.secondary-button:hover:not(:disabled) {
  background: color-mix(in oklch, var(--secondary) 92%, var(--foreground));
}

.holding-section,
.not-found-section {
  display: flex;
  min-height: calc(100vh - 9.5rem);
  padding-block: 5rem;
  flex-direction: column;
  justify-content: center;
}

.holding-section h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
}

.not-found-section h1 {
  max-width: 40rem;
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.05;
  text-wrap: balance;
}

.not-found-section > p:not(.eyebrow) {
  max-width: 34rem;
  margin: 1.25rem 0 0;
  color: var(--text-secondary);
}

.reading-shell {
  max-width: var(--reading-width);
  padding-block: 1.5rem 7rem;
}

.back-link {
  display: inline-flex;
  min-height: 2rem;
  margin-block: 0 1.25rem;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-tertiary);
  font-size: 0.875rem;
  text-decoration: none;
}

.back-link:hover {
  color: var(--text-primary);
}

.prose {
  max-width: 48rem;
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.78;
  overflow-wrap: anywhere;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  margin: 2.75em 0 0.75em;
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.prose h1,
.prose h2 {
  font-size: 1.65rem;
}

.prose h3 {
  font-size: 1.25rem;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote {
  margin-block: 1.25rem;
}

.prose ul,
.prose ol {
  padding-left: 1.4rem;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  margin-block: 0.5rem;
  padding-left: 0.25rem;
}

.prose a {
  color: var(--text-primary);
  text-underline-offset: 0.3rem;
}

.prose blockquote {
  padding-left: 1.25rem;
  border-left: 2px solid var(--hairline-strong);
  color: var(--text-tertiary);
}

.prose pre {
  max-width: 100%;
  padding: 1.25rem;
  overflow-x: auto;
  background: var(--bg-elevated);
  font-size: 0.875rem;
}

.prose code {
  padding: 0.15em 0.35em;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 0.9em;
}

/* display:block keeps a wide table scrollable instead of stretching the page,
   but it also stops width:100% reaching the table's own layout, which left
   columns collapsed against each other. max-content sizes the columns to their
   contents first, then max-width keeps the box inside the article. */
.prose table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9rem;
}

/* .prose sets overflow-wrap:anywhere for long URLs in body copy. Cells must opt
   out: "anywhere" feeds into min-content sizing, so a wide table shrinks to a
   few characters per column and breaks headings mid-word instead of scrolling.
   GFM column alignment arrives as an inline text-align style, which outranks
   the default below. */
.prose th,
.prose td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  overflow-wrap: normal;
}

/* overflow-wrap:anywhere on .prose would break an expression apart mid-symbol. */
.prose math {
  font-size: 1.05em;
  overflow-wrap: normal;
}

/* Long derivations scroll rather than widening the article. */
.prose math[display="block"] {
  margin: 1.5rem 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.role-apply-callout,
.mission-callout {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--hairline);
}

.mission-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.mission-callout .eyebrow {
  margin: 0;
}

.mission-callout > p:not(.eyebrow) {
  max-width: 32rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.15rem;
}

.mission-callout .text-link {
  flex: 0 0 auto;
  margin: 0;
}

.form-page {
  max-width: 64rem;
  padding-block: 1.5rem 7rem;
}

.form-header {
  margin-bottom: 3.5rem;
}

.form-header h1,
.booking-view > h1,
.take-home-view > h1,
.private-state h1 {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.05;
  text-wrap: balance;
}

.application-form {
  position: relative;
}

.form-section {
  display: grid;
  margin: 0;
  padding: 2.75rem 0;
  border: 0;
  border-top: 1px solid var(--hairline);
  grid-template-columns: minmax(11rem, 0.65fr) minmax(0, 1.6fr);
  column-gap: 3rem;
}

.form-section h2 {
  margin: 0;
  padding: 0;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 500;
}

.section-description {
  max-width: 15rem;
  margin: 0.65rem 0 0;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  line-height: 1.55;
  grid-column: 1;
}

.field-grid,
.form-section > .field {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.field {
  min-width: 0;
}

.field-wide {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
}

.field input,
.field select,
.field textarea,
.timezone-row select {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--input);
  background: transparent;
  color: var(--text-primary);
  font-size: 1rem;
  transition:
    border-color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out),
    background-color 150ms var(--ease-out);
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.55;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-tertiary);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.timezone-row select:focus {
  border-color: var(--ring);
  outline: 0;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--ring) 50%, transparent);
}

.field input[type="file"] {
  padding: 0.6rem;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.field input[type="file"]::file-selector-button {
  margin-right: 0.8rem;
  padding: 0.55rem 0.8rem;
  border: 0;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 500;
}

.field-hint,
.field-error {
  margin: 0.5rem 0 0;
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.field-error,
.form-error {
  color: var(--danger);
}

.privacy-section {
  align-items: start;
}

.privacy-section p {
  max-width: 36rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  grid-column: 2;
}

.privacy-section a,
.state-panel a,
.private-state a {
  color: var(--text-primary);
  text-underline-offset: 0.25rem;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}

.form-error,
.form-status {
  max-width: 40rem;
  margin: 0 0 1rem;
  font-size: 0.875rem;
}

.form-status {
  color: var(--text-tertiary);
}

.state-panel,
.empty-panel {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  /* Match Hiring Card: ring instead of a heavy border + fill. */
  border: 0;
  background: var(--card);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
}

.state-panel h2,
.empty-panel h2,
.empty-panel h3 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.empty-panel p {
  margin: 0.75rem 0 0;
  color: var(--text-secondary);
}

.progress-track {
  width: 100%;
  height: 2px;
  margin-top: 0.75rem;
  overflow: hidden;
  background: var(--hairline-strong);
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--primary);
  transition: width 120ms linear;
}

.private-surface .header-inner,
.private-surface .footer-inner {
  width: min(100% - 2rem, var(--private-width));
}

.private-page {
  width: min(100% - 2rem, var(--private-width));
  margin-inline: auto;
  padding-block: clamp(3rem, 8vw, 6rem);
}

.private-state {
  min-height: 24rem;
}

.private-state > p:not(.eyebrow),
.booking-view > p:not(.eyebrow),
.take-home-view > p:not(.eyebrow) {
  max-width: 36rem;
  margin: 1.25rem 0 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.context-panel,
.detail-grid,
.upload-panel,
.manage-card {
  border: 0;
  background: var(--card);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
}

.context-panel {
  margin-top: 2rem;
  padding: 1.25rem;
}

.context-panel > p {
  margin: 0.35rem 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.context-panel > small {
  display: block;
  margin-top: 0.75rem;
  color: var(--text-tertiary);
  line-height: 1.5;
}

.context-panel.prose {
  max-width: none;
  margin-top: 0;
  font-size: 1rem;
}

.context-panel.prose > :first-child {
  margin-top: 0;
}

.context-panel.prose > :last-child {
  margin-bottom: 0;
}

.timezone-row {
  display: flex;
  margin-top: 2rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.timezone-row label {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.timezone-row select {
  width: min(100%, 17rem);
  min-height: 2.75rem;
  font-size: 0.875rem;
}

.slot-list {
  display: grid;
  margin-top: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

.slot-button {
  display: flex;
  min-height: 4.5rem;
  padding: 0.75rem;
  border: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2rem;
  background: var(--card);
  color: var(--text-secondary);
  text-align: left;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
  transition:
    background-color 150ms var(--ease-out),
    color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out),
    transform 150ms var(--ease-out);
}

.slot-button span {
  color: var(--text-tertiary);
  font-size: 0.7rem;
}

.slot-button strong {
  font-size: 0.9rem;
  font-weight: 500;
}

.slot-button:hover,
.slot-button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 0 0 1px var(--primary);
}

.slot-button[aria-pressed="true"] span,
.slot-button:hover span {
  color: var(--on-primary-muted);
}

.sticky-action {
  position: sticky;
  bottom: 0;
  margin-top: 2rem;
  padding-block: 1rem max(1rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  background: var(--bg-base);
}

.manage-list {
  display: flex;
  margin-top: 2rem;
  flex-direction: column;
  gap: 1rem;
}

.manage-card {
  display: grid;
  padding: 1.25rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.25rem;
}

.manage-card h2,
.upload-panel h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.manage-card p,
.upload-panel p {
  margin: 0.45rem 0 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.card-actions {
  display: flex;
  gap: 0.5rem;
}

.link-button {
  min-height: 2.75rem;
  padding: 0.65rem 0.8rem;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.danger-link:hover {
  color: var(--danger);
}

.reschedule-panel {
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  grid-column: 1 / -1;
}

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

.compact-slots .slot-button {
  min-height: 3.75rem;
}

.take-home-section {
  display: flex;
  margin-top: 2rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.detail-grid {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 1.25rem;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.detail-grid dt {
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.detail-grid dd {
  margin: 0.35rem 0 0;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
}

.confirmation-check {
  display: flex;
  max-width: 38rem;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
}

.confirmation-check input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  flex: 0 0 auto;
  accent-color: var(--text-primary);
}

.timer-panel {
  position: sticky;
  z-index: 10;
  top: 0.75rem;
  display: flex;
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--hairline-strong);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--panel-solid);
}

.timer-panel span {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.timer-panel strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.upload-panel {
  display: flex;
  width: 100%;
  padding: 1.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.upload-panel .field {
  width: 100%;
}

.submission-summary {
  width: 100%;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}

.submission-summary p {
  color: var(--text-primary);
  font-weight: 500;
}

.submission-summary small {
  color: var(--text-tertiary);
}

.take-home-view > .state-panel {
  margin-top: 2rem;
}

@media (max-width: 48rem) {
  .header-inner,
  .footer-inner,
  .hero,
  .roles-section,
  .general-callout,
  .holding-section,
  .not-found-section,
  .form-page,
  .reading-shell,
  .private-page {
    width: min(100% - 1.5rem, var(--page-width));
  }

  .site-nav {
    gap: 1rem;
  }

  .site-nav a:first-child:not(:last-child) {
    display: none;
  }

  .footer-inner {
    padding-block: 1.25rem;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
  }

  .hero {
    padding-block: 5rem 6rem;
  }

  .roles-section {
    padding-block: 4rem 5rem;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }

  .role-card {
    min-height: 0;
    padding-block: 1.5rem;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .role-card:hover {
    padding-inline: 0.5rem;
  }

  .role-card-side {
    justify-content: space-between;
  }

  .role-meta {
    text-align: left;
  }

  .mission-callout {
    align-items: flex-start;
    flex-direction: column;
  }

  .form-section {
    display: block;
    padding-block: 2.25rem;
  }

  .section-description {
    max-width: 30rem;
    margin-bottom: 1.5rem;
  }

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

  .privacy-section p {
    margin-top: 0.75rem;
  }

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

  .manage-card {
    grid-template-columns: 1fr;
  }

  .card-actions {
    width: 100%;
  }

  .card-actions > * {
    flex: 1;
  }

  .reschedule-panel {
    grid-column: auto;
  }

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

@media (max-width: 30rem) {
  .brand {
    gap: 0.5rem;
  }

  .brand-surface {
    padding-left: 0.5rem;
  }

  .site-nav {
    max-width: 45%;
  }

  .timezone-row {
    align-items: stretch;
    flex-direction: column;
  }

  .timezone-row select {
    width: 100%;
  }

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

  .button,
  .secondary-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* One variable latin face covers 400–700; preload + optional kills FOUT. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;
  src: url("./fonts/space-grotesk-latin-wght-normal.87c506d88b9f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("./fonts/noto-naskh-arabic-arabic-400-normal.9ebecc332fb3.woff2") format("woff2");
}

body {
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
dl,
dd,
ol {
  margin: 0;
}

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

button {
  border: 0;
  background: transparent;
}

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

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid var(--hairline);
  background: var(--header-blur);
  backdrop-filter: blur(12px);
}

.header-inner,
.footer-inner {
  width: min(100% - 2rem, 72rem);
}

.header-inner {
  min-height: 3rem;
  padding-block: 0;
}

.header-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
}

.header-brand .brand-logo {
  font-size: 20px;
}

.brand-logo {
  display: inline-flex;
  min-height: 0;
  align-items: center;
  color: var(--text-primary);
  font-family: "Noto Naskh Arabic", serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
}

.brand-product {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary);
}

.header-contact {
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
}

.header-contact:hover {
  color: var(--text-primary);
}

.footer-inner {
  min-height: 0;
  padding-block: 2.5rem;
  align-items: stretch;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

.footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.footer-meta a {
  display: inline-flex;
  min-height: 0;
  align-items: center;
  text-decoration: underline;
  text-decoration-color: var(--text-tertiary);
  text-underline-offset: 4px;
}

.private-surface .footer-inner {
  padding-block: 1.5rem;
}

.private-surface .footer-meta {
  justify-content: flex-start;
}

.holding-section {
  width: min(100% - 2rem, 72rem);
}

.holding-section h1 {
  max-width: 56rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.reading-shell {
  width: min(100% - 2rem, 72rem);
  max-width: none;
  padding-block: 1.5rem 7rem;
}

.back-link {
  margin-block: 0 1.25rem;
}

.form-meta {
  margin-bottom: 1.25rem;
  color: var(--text-tertiary);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.job-detail-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(3rem, 7vw, 6rem);
}

.job-sidebar,
.job-description {
  min-width: 0;
}

/* The role page and the apply page open with the same title treatment. */
.job-heading h1,
.form-header h1 {
  margin: 0;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.job-facts {
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--hairline);
}

.job-facts > div {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--hairline);
}

.job-facts dt {
  color: var(--text-tertiary);
  font-size: 0.8125rem;
}

.job-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--text-primary);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.job-location-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.job-location-list li {
  display: grid;
  grid-template-columns: 1.5em minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0.4rem;
}

.job-location-list li + li {
  margin-top: 0.2rem;
}

.job-location-flag {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* Only the stacked list reserves a flag column, so names align down the page.
   Inline rows let the flag take its natural width. */
.job-location-list .job-location-flag {
  display: inline-block;
  width: 1.5em;
  min-height: 1em;
  line-height: 1.25;
  text-align: center;
}

.job-location-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* One wrapping row of role facts, shared by the board listings and the apply
   page header: department, employment type, then locations. */
.role-facts {
  display: flex;
  margin: 0.25rem 0 0;
  padding: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.4rem;
  color: var(--text-tertiary);
  font-size: 0.875rem;
  list-style: none;
}

.role-facts li {
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.4rem;
}

/* Separate the facts in CSS so the row reads as one line whichever of
   department, type, and locations the role actually carries. */
.role-facts li + li::before {
  content: "·";
}

.job-join-callout {
  margin-top: 3rem;
  padding: 1.5rem;
  border: 0;
  background: var(--card);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
}

.job-callout-kicker {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  font-weight: 500;
}

.job-join-callout h2 {
  margin: 0.75rem 0 0;
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.job-join-callout > p:not(.job-callout-kicker) {
  margin: 1rem 0 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.625;
}

.job-join-callout .button {
  min-width: 0;
  width: 100%;
  margin-top: 1.5rem;
  padding-inline: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.job-description {
  padding-top: 0.15rem;
}

.job-description .prose > :first-child {
  margin-top: 0;
}

.button,
.secondary-button {
  min-height: 2rem;
  padding: 0.375rem 0.625rem;
  font-weight: 500;
}

.secondary-button {
  border: 1px solid var(--hairline);
}

.prose {
  max-width: none;
  font-size: 1.0625rem;
  line-height: 1.75;
}

.prose h1,
.prose h2 {
  font-size: 1.5rem;
  font-weight: 600;
}

.prose h3 {
  font-weight: 600;
}

.role-apply-callout {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
}

.role-apply-callout > p {
  margin: 0 0 1.25rem;
  color: var(--text-secondary);
}

.role-apply-callout .button {
  margin: 0;
}

.careers-callout {
  margin-top: 4rem;
  padding: 2.5rem;
  border: 0;
  background: var(--card);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
  overflow-wrap: anywhere;
}

.careers-callout > p:first-child {
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

.careers-callout h2 {
  margin-top: 0.75rem;
  color: var(--text-primary);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.careers-callout > p:nth-child(3) {
  max-width: 36rem;
  margin-top: 1rem;
  color: var(--text-secondary);
  line-height: 1.625;
}

.careers-callout .secondary-button {
  margin-top: 1.5rem;
}

@media (max-width: 52rem) {
  .job-detail-layout {
    grid-template-columns: 1fr;
    row-gap: 3.5rem;
  }

  .job-sidebar {
    max-width: 36rem;
  }

  .job-description {
    padding-top: 3rem;
    border-top: 1px solid var(--hairline);
  }
}

.form-page {
  width: min(100% - 2rem, 72rem);
  max-width: none;
  padding-block: 1.5rem 7rem;
}

.form-header {
  margin-bottom: 2.5rem;
}

.form-meta {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

.form-header > p:last-child {
  max-width: 36rem;
  margin-top: 1rem;
  color: var(--text-secondary);
  line-height: 1.625;
}

/* The role's facts read as a subtitle under the heading, set apart from the
   copy that follows. */
.form-header .role-facts {
  margin-top: 0.875rem;
}

.form-header .role-facts + p {
  margin-top: 2rem;
}

/* Sections share the role page's spine: a label rail, then the content
   column, so the two pages line up as a visitor moves between them. */
.form-section,
.form-actions {
  padding-block: 2.5rem;
  grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
  column-gap: clamp(3rem, 7vw, 6rem);
}

.form-section h2 {
  font-size: 1rem;
  font-weight: 600;
}

.section-description {
  max-width: 20rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

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

.field label {
  color: var(--text-primary);
  font-size: 0.875rem;
}

/* Inputs match the board's search and filter controls. */
.field input,
.field select,
.field textarea {
  min-height: var(--control-height);
  /* Let the shared height govern, rather than padding plus line height. */
  padding-block: 0;
  padding-inline: 0.625rem;
  border-color: var(--input);
  background: transparent;
  font-size: 0.75rem;
  transition:
    border-color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out),
    background-color 150ms var(--ease-out);
}

@media (prefers-color-scheme: dark) {
  /* After the shared transparent field defaults. Board search/select fills
     are reapplied later once those rules declare transparent backgrounds. */
  .field input,
  .field select,
  .field textarea,
  .timezone-row select {
    background: color-mix(in oklch, var(--input) 30%, transparent);
  }
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--ring) 50%, transparent);
}

/* Overrides the file input's own padding, which is more specific than the
   shared field rule above. */
.field input[type="file"] {
  padding-block: 0;
}

.field input[type="file"]::file-selector-button {
  /* Less the input's own border, so the field lands on the shared height. */
  min-height: calc(var(--control-height) - 2px);
  margin-inline: -0.625rem 0.625rem;
  padding-inline: 0.625rem;
  border-right: 1px solid var(--hairline);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
}

.field textarea {
  min-height: 8rem;
  padding-block: 0.75rem;
}

/* Port of the Hiring app's select: a trigger that matches the sibling inputs
   plus the same elevated listbox, highlight, and check mark. */
.select-shell {
  position: relative;
}

/* Kept rendered rather than display:none, so the browser can still report a
   validation message against a required field. */
.select-shell .select-native {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  min-width: 0;
  min-height: 0;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.select-trigger {
  display: flex;
  width: 100%;
  min-height: var(--control-height);
  padding: 0 0.625rem;
  border: 1px solid var(--input);
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.75rem;
  text-align: left;
  transition:
    border-color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out),
    background-color 150ms var(--ease-out);
}

.select-trigger[data-placeholder] {
  color: var(--text-tertiary);
}

/* Long labels truncate instead of wrapping, so a trigger keeps the height of
   the inputs beside it. */
.select-value {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.select-trigger:focus-visible,
.select-trigger[aria-expanded="true"] {
  border-color: var(--ring);
  outline: 0;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--ring) 50%, transparent);
}

/* Flagged fields read as a problem, not just as a message below the control. */
.field [aria-invalid="true"],
.select-trigger[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--danger) 20%, transparent);
}

.select-caret {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  opacity: 0.5;
}

.select-listbox {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.25rem);
  right: 0;
  left: 0;
  max-height: 16rem;
  margin: 0;
  padding: 0.25rem;
  border: 0;
  background: color-mix(in oklch, var(--card) 70%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent),
    0 0.75rem 1.5rem color-mix(in oklch, var(--foreground) 12%, transparent);
  list-style: none;
  overflow-y: auto;
  backdrop-filter: blur(24px) saturate(150%);
}

.select-option {
  display: flex;
  min-height: 2rem;
  padding: 0.5rem 2rem 0.5rem 0.625rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.75rem;
  position: relative;
}

.select-option[data-highlighted],
.select-option:hover {
  background: color-mix(in oklch, var(--foreground) 10%, transparent);
}

.select-check {
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 0.5rem;
  flex: 0 0 auto;
}

.select-option[aria-selected="false"] .select-check {
  visibility: hidden;
}

/* The trigger above only exists once select.js has run. Until then the browser
   draws its own dropdown, so these carry the trigger's caret and placeholder
   colour instead of the platform's. That is the whole of what the static
   mirror shows, since it serves the snapshot under `script-src 'none'`.
   `:not(.select-native)` stops at enhancement, and it also outranks the
   per-surface select rules whose `background` and `padding-inline` shorthands
   would otherwise drop the caret. Its stroke is a fixed grey because a data
   URI resolves no `currentColor`; at 50% over either theme's background the
   trigger's own caret lands within a shade of this one. */
select[data-enhanced-select]:not(.select-native) {
  appearance: none;
  padding-inline: 0.625rem 2.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8d' stroke-width='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 0.625rem center;
  background-size: 1rem 1rem;
}

/* Matches `.select-trigger[data-placeholder]`: an empty value reads as a
   prompt rather than as a choice the visitor made. */
select[data-enhanced-select]:not(.select-native):has(option[value=""]:checked) {
  color: var(--text-tertiary);
}

.privacy-section p {
  font-size: 0.875rem;
}

.form-actions {
  display: grid;
}

.form-actions > * {
  grid-column: 2;
}

.form-actions .button {
  justify-self: start;
}

.state-panel {
  max-width: 44rem;
}

.state-panel h2 {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

@media (max-width: 52rem) {
  .form-section,
  .form-actions {
    display: block;
    padding-block: 2.25rem;
  }

  .section-description {
    max-width: 30rem;
    margin-bottom: 1.5rem;
  }

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

.private-page {
  width: min(100% - 2rem, 42rem);
  padding-block: 3rem;
}

.booking-view > h1,
.take-home-view > h1,
.private-state h1 {
  margin-top: 0.75rem;
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.private-page .eyebrow {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
}

/* The production React board was the Team Directory concept. */
.concept-lab {
  color-scheme: dark;
  --concept-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bg-base: #080908;
  --bg-surface: #0e100e;
  --bg-elevated: #171a16;
  --text-primary: #f1f3ed;
  --text-secondary: rgba(241, 243, 237, 0.74);
  --text-tertiary: rgba(241, 243, 237, 0.54);
  --hairline: rgba(241, 243, 237, 0.13);
  --hairline-strong: rgba(241, 243, 237, 0.27);
  --focus: #f1f3ed;
  --concept-accent: #f1f3ed;
  --concept-soft: rgba(241, 243, 237, 0.08);
  min-height: 100dvh;
  background: var(--bg-base);
  color: var(--text-primary);
  isolation: isolate;
}

@media (prefers-color-scheme: light) {
  .concept-lab[data-theme="system"] {
    color-scheme: light;
    --bg-base: #f3f3ed;
    --bg-surface: #fbfbf7;
    --bg-elevated: #e7e9e1;
    --text-primary: #131510;
    --text-secondary: rgba(19, 21, 16, 0.72);
    --text-tertiary: rgba(19, 21, 16, 0.62);
    --hairline: rgba(19, 21, 16, 0.14);
    --hairline-strong: rgba(19, 21, 16, 0.29);
    --focus: #131510;
    --concept-accent: #131510;
    --concept-soft: rgba(19, 21, 16, 0.08);
  }
}

.concept-lab button,
.concept-lab input {
  font-family: inherit;
}

.chapters-page {
  position: relative;
  min-height: 100dvh;
  background: transparent;
  isolation: isolate;
}

.chapters-film-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at center, transparent 18%, color-mix(in srgb, var(--bg-base) 64%, transparent) 100%),
    var(--bg-base);
  pointer-events: none;
}

.chapters-film-ambient {
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(circle at 24% 28%, color-mix(in srgb, var(--text-primary) 12%, transparent), transparent 34%),
    radial-gradient(circle at 76% 68%, color-mix(in srgb, var(--text-primary) 8%, transparent), transparent 30%);
  animation: chapters-film-ambient 13s ease-in-out infinite alternate;
}

.chapters-film-grain {
  position: absolute;
  inset: -28%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.95'/%3E%3C/svg%3E");
  background-size: 180px;
  mix-blend-mode: soft-light;
  opacity: 0.1;
  animation: chapters-film-grain 700ms steps(2, end) infinite;
}

.chapters-page > main,
.chapters-page > footer {
  position: relative;
  z-index: 1;
}

.chapters-header {
  position: sticky;
  z-index: 30;
  top: 0;
  background: color-mix(in srgb, var(--bg-base) 90%, transparent);
  backdrop-filter: blur(16px);
}

.chapters-header-inner {
  display: grid;
  max-width: 1280px;
  min-height: 66px;
  margin: 0 auto;
  padding: 0 28px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 22px;
}

.chapters-logo {
  width: fit-content;
}

.chapters-header-label {
  color: var(--text-secondary);
  font-size: 13px;
}

.chapters-intro {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(36px, 4vw, 56px);
}

.chapters-intro-label {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--text-tertiary);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chapters-intro h1 {
  margin-top: 24px;
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.chapters-intro > p {
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.5;
}

.chapters-intro-facts {
  display: flex;
  margin-top: 28px;
  flex-wrap: wrap;
  gap: 24px 56px;
}

.chapters-intro-facts dt,
.chapters-team-panel-label {
  color: var(--text-tertiary);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chapters-intro-facts dd {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 13px;
}

.chapters-openings {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(52px, 7vw, 88px) clamp(24px, 6vw, 76px);
}

.chapters-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.chapters-section-heading p {
  color: var(--concept-accent);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chapters-section-heading h2 {
  margin-top: 10px;
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}

.chapters-section-heading > span {
  color: var(--text-tertiary);
  font-size: 13px;
}

.chapters-filter-row {
  display: grid;
  margin-top: 34px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.concept-search {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 52px;
  border-bottom: 1px solid var(--hairline-strong);
  align-items: center;
}

.concept-search:focus-within {
  border-color: var(--concept-accent);
}

.concept-search-icon {
  position: absolute;
  left: 17px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.concept-search input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 52px 0 48px;
  border: 0;
  appearance: none;
  background: transparent;
  color: var(--text-primary);
  outline: none;
  font-size: 16px;
}

.concept-search input::placeholder {
  color: var(--text-tertiary);
}

.concept-search-clear {
  position: absolute;
  right: 4px;
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}

.chapters-reset {
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--hairline-strong);
  color: var(--text-secondary);
  font-size: 13px;
}

.chapters-directory-layout {
  display: grid;
  margin-top: 44px;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(36px, 6vw, 76px);
}

.chapters-team-panel {
  position: sticky;
  top: 88px;
}

.chapters-team-panel-label {
  margin-bottom: 10px;
  letter-spacing: 0.1em;
}

.chapters-team-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.chapters-team-card {
  position: relative;
  display: grid;
  min-height: 58px;
  padding: 12px 14px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: var(--text-primary);
  text-align: left;
  transition: background-color 180ms var(--concept-ease), transform 100ms var(--concept-ease);
}

.chapters-team-card[data-selected] {
  background: var(--concept-soft);
}

.chapters-team-card[data-selected]::before {
  position: absolute;
  top: 50%;
  left: 1px;
  width: 4px;
  height: 4px;
  background: var(--text-primary);
  content: "";
  transform: translateY(-50%);
}

.chapters-team-code {
  color: var(--concept-accent);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.chapters-team-card strong {
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

.chapters-team-count {
  color: var(--text-tertiary);
  font-size: 11px;
}

.chapters-group + .chapters-group {
  margin-top: 52px;
}

.chapters-group-heading {
  display: grid;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--hairline-strong);
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 18px;
}

.chapters-group-heading > span {
  color: var(--concept-accent);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.chapters-group-heading > span:last-child {
  color: var(--text-tertiary);
  letter-spacing: 0;
}

.chapters-group-heading h3 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.chapters-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.chapters-role-grid:has(li:only-child) {
  grid-template-columns: 1fr;
}

.chapters-role-card {
  display: flex;
  min-height: 240px;
  height: 100%;
  padding: 22px;
  border: 1px solid var(--hairline);
  flex-direction: column;
  background: transparent;
  text-decoration: none;
  transition: background-color 180ms var(--concept-ease), transform 100ms var(--concept-ease);
  animation: chapter-role-in 200ms var(--concept-ease) both;
}

.chapters-role-card-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.concept-role-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-tertiary);
  font-size: 12px;
  white-space: nowrap;
}

.concept-role-arrow svg {
  transition: transform 180ms var(--concept-ease);
}

.chapters-role-card h4 {
  max-width: 480px;
  margin-top: 34px;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.chapters-role-card > p {
  max-width: 600px;
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.chapters-role-meta {
  display: flex;
  margin-top: auto;
  padding-top: 28px;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.concept-empty {
  display: grid;
  padding: 28px;
  border: 1px solid var(--hairline-strong);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  background: var(--bg-surface);
}

.concept-empty-index {
  color: var(--concept-accent);
  font-size: 12px;
}

.concept-empty h3 {
  font-size: 18px;
  font-weight: 600;
}

.concept-empty p {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 14px;
}

.concept-empty button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--hairline-strong);
  color: var(--text-primary);
  font-size: 13px;
}

.concept-empty-roles {
  margin-top: 34px;
}

.chapters-general {
  position: relative;
  z-index: 1;
  display: flex;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px clamp(24px, 6vw, 76px);
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.chapters-general > div > span {
  color: var(--text-tertiary);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.chapters-general p {
  margin-top: 7px;
  color: var(--text-secondary);
  font-size: 14px;
}

.chapters-general a {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--text-primary);
  font-size: 12px;
  text-decoration: none;
}

.chapters-footer {
  display: grid;
  max-width: 1280px;
  margin: 0 auto;
  padding: 34px 28px;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 28px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.chapters-footer > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .chapters-team-card:hover,
  .chapters-role-card:hover {
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  }

  .chapters-role-card:hover .concept-role-arrow svg {
    transform: translate(3px, -3px);
  }
}

.chapters-team-card:active,
.chapters-role-card:active {
  transform: scale(0.98);
}

@keyframes chapter-role-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}

@keyframes chapters-film-ambient {
  from {
    opacity: 0.74;
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }
  to {
    opacity: 1;
    transform: translate3d(1.5%, 1%, 0) scale(1.035);
  }
}

@keyframes chapters-film-grain {
  25% { transform: translate3d(3%, -2%, 0); }
  50% { transform: translate3d(-2%, 3%, 0); }
  75% { transform: translate3d(2%, 2%, 0); }
  100% { transform: translate3d(-3%, -1%, 0); }
}

@media (max-width: 61.25rem) {
  .chapters-directory-layout {
    display: block;
    margin-top: 24px;
  }

  .chapters-team-panel {
    position: static;
  }

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

  .chapters-groups {
    margin-top: 54px;
  }
}

@media (max-width: 45rem) {
  .header-inner {
    padding-block: 0.75rem;
  }

  .reading-shell {
    padding-block: 3.5rem;
  }

  .careers-callout {
    padding: 1.5rem;
  }

  .form-section,
  .form-actions {
    display: block;
    padding-block: 2rem;
  }

  .section-description {
    max-width: 24rem;
    margin-bottom: 1.25rem;
  }

  .chapters-intro {
    padding: 46px 24px;
  }

  .chapters-intro h1 {
    font-size: clamp(3rem, 14vw, 4.4rem);
  }

  .chapters-openings {
    padding: 50px 18px;
  }

  .chapters-role-grid {
    grid-template-columns: 1fr;
  }

  .chapters-role-card {
    min-height: 220px;
  }

  .chapters-general {
    padding: 26px 20px;
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 32.5rem) {
  .chapters-header-inner {
    min-height: 62px;
    padding: 0 14px;
  }

  .chapters-intro {
    padding: 40px 16px;
  }

  .chapters-intro-label {
    font-size: 9px;
  }

  .chapters-intro h1 {
    margin-top: 26px;
    font-size: clamp(2.8rem, 15vw, 4rem);
  }

  .chapters-intro-facts {
    display: grid;
    gap: 14px;
  }

  .chapters-openings {
    padding: 44px 14px;
  }

  .chapters-section-heading {
    align-items: start;
  }

  .chapters-filter-row,
  .chapters-team-grid {
    grid-template-columns: 1fr;
  }

  .chapters-groups {
    margin-top: 46px;
  }

  .chapters-group-heading {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
  }

  .chapters-group-heading > span:last-child {
    display: none;
  }

  .chapters-role-card {
    min-height: 220px;
    padding: 20px;
  }

  .chapters-role-card h4 {
    margin-top: 30px;
    font-size: 20px;
  }

  .chapters-footer {
    padding: 28px 16px;
    grid-template-columns: 1fr auto auto;
  }

  .chapters-footer > span:nth-child(2) {
    display: none;
  }

  .concept-empty {
    padding: 22px;
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* July 16–17 React production board: classic hero and filterable list. */
.classic-careers {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
  padding-block: 6rem;
}

.classic-hero {
  margin-bottom: 2.5rem;
}

.classic-hero > p:first-child {
  margin-bottom: 1.25rem;
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

.classic-hero h1 {
  max-width: 56rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

.classic-hero > p:last-child {
  max-width: 48rem;
  margin-top: 1.5rem;
  color: var(--text-secondary);
  font-size: 1.125rem;
  line-height: 1.625;
  text-wrap: balance;
}

.classic-listing-controls {
  display: flex;
  margin-bottom: 1.25rem;
  flex-direction: column;
  gap: 1rem;
}

.classic-listing-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.classic-listing-heading h2 {
  color: var(--text-tertiary);
  font-size: 0.875rem;
  font-weight: 400;
}

.classic-listing-heading p {
  margin-top: 0.25rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.classic-listing-heading button {
  min-height: 2rem;
  padding-inline: 0.625rem;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  transition: color 150ms var(--ease-out);
}

.classic-listing-heading button:hover {
  background: color-mix(in oklch, var(--foreground) 6%, transparent);
  color: var(--text-primary);
}

/* Search, then department, then location on one line. */
.classic-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.classic-search {
  display: block;
  min-width: 0;
  flex: 1 1 16rem;
}

.classic-search-shell {
  display: flex;
  min-height: var(--control-height);
  width: 100%;
  min-width: 0;
  align-items: center;
  border: 1px solid var(--input);
  background: transparent;
  transition:
    border-color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out),
    background-color 150ms var(--ease-out);
}

.classic-search-shell:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--ring) 50%, transparent);
}

.classic-search-icon,
.classic-search-clear {
  display: inline-flex;
  /* Match the borderless input height so the 1px shell border does not
     push this control taller than the adjacent filter triggers. */
  width: calc(var(--control-height) - 2px);
  height: calc(var(--control-height) - 2px);
  flex: 0 0 calc(var(--control-height) - 2px);
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}

.classic-search-icon svg,
.classic-search-clear svg {
  width: 1rem;
  height: 1rem;
}

.classic-search-clear {
  /* Explicit ghost reset: UA button padding/appearance still show chrome
     inside the input-group shell even with the global button rule. */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  appearance: none;
}

.classic-search-clear[hidden] {
  display: none;
}

.classic-search-clear:hover {
  color: var(--text-primary);
}

.classic-filter {
  min-width: 0;
  flex: 0 1 12rem;
}

.classic-filter select {
  width: 100%;
  min-height: var(--control-height);
  padding-inline: 0.625rem;
  border: 1px solid var(--input);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.75rem;
  transition:
    border-color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out);
}

.classic-search input {
  width: 100%;
  min-width: 0;
  min-height: calc(var(--control-height) - 2px);
  padding-inline: 0 0.125rem;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.75rem;
  transition:
    border-color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out);
}

.classic-search input::placeholder {
  color: var(--text-tertiary);
}

.classic-search input::-webkit-search-cancel-button {
  display: none;
}

.classic-search input:focus {
  /* Shell owns the focus ring; keep the borderless input quiet like Hiring. */
  outline: none;
  box-shadow: none;
}

.classic-filter select:focus {
  border-color: var(--ring);
  outline: none;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--ring) 50%, transparent);
}

@media (prefers-color-scheme: dark) {
  .classic-search-shell,
  .classic-filter select,
  .select-trigger,
  .timezone-row select {
    background: color-mix(in oklch, var(--input) 30%, transparent);
  }
}

.classic-role-list {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--hairline);
  list-style: none;
}

html.select-interaction-lock [data-role-list] a {
  pointer-events: none;
}

.classic-role-list li > a {
  display: grid;
  min-width: 0;
  min-height: 5rem;
  padding-block: 1rem;
  border-top: 1px solid var(--hairline);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition:
    background-color 150ms var(--ease-out),
    border-color 150ms var(--ease-out);
}

.classic-role-list li > a:hover {
  background: color-mix(in oklch, var(--muted) 70%, transparent);
}

.classic-role-list h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.classic-role-summary {
  max-width: 42rem;
  margin-top: 0.25rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.375;
}

.classic-role-view {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  transition: color 150ms ease;
}

.classic-role-view > span {
  transition: transform 150ms ease;
}

.classic-role-list a:hover .classic-role-view {
  color: var(--text-primary);
}

.classic-role-list a:hover .classic-role-view > span {
  transform: translateX(0.125rem);
}

.classic-empty {
  padding: 1.5rem;
  border: 0;
  background: var(--card);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
}

.classic-empty p,
.classic-no-roles {
  max-width: 36rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.625;
}

.classic-no-roles {
  font-size: 1rem;
}

.classic-callout {
  margin-top: 5rem;
}

.classic-callout .careers-callout {
  margin-top: 0;
}

@media (max-width: 39.999rem) {
  .classic-careers {
    padding-block: 3rem;
  }

  .classic-hero > p:last-child {
    font-size: 1rem;
  }

  /* The search box takes its own line here, so let the two filters share the
     next one rather than leaving half the row empty. */
  .classic-filter {
    flex: 1 1 9rem;
  }

  .classic-role-list li > a {
    grid-template-columns: 1fr;
  }

  .classic-role-list h3 {
    font-size: 1rem;
  }

  .classic-callout {
    margin-top: 3rem;
  }
}