:root {
  --fs-color-navy-950: #07111f;
  --fs-color-navy-900: #0d1b2a;
  --fs-color-navy-800: #17304a;
  --fs-color-surface-page: #f5f7fa;
  --fs-color-surface-card: #ffffff;
  --fs-color-surface-subtle: #edf2f6;
  --fs-color-text-strong: #172033;
  --fs-color-text-muted: #526176;
  --fs-color-border: #cbd5e1;
  --fs-color-teal-700: #0f766e;
  --fs-color-teal-600: #0d9488;
  --fs-color-link: #1d4ed8;
  --fs-color-focus: #0b66ff;
  --fs-color-positive: #067647;
  --fs-color-caution: #8a4b08;
  --fs-color-danger: #b42318;
  --fs-color-info-bg: #eaf2ff;
  --fs-color-privacy-bg: #e8f7f4;
  --fs-color-caution-bg: #fff4e5;
  --fs-color-danger-bg: #fdecec;
  --fs-font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --fs-space-1: 0.25rem;
  --fs-space-2: 0.5rem;
  --fs-space-3: 0.75rem;
  --fs-space-4: 1rem;
  --fs-space-5: 1.25rem;
  --fs-space-6: 1.5rem;
  --fs-space-8: 2rem;
  --fs-space-10: 2.5rem;
  --fs-space-12: 3rem;
  --fs-space-16: 4rem;
  --fs-space-20: 5rem;
  --fs-radius-control: 0.5rem;
  --fs-radius-card: 0.875rem;
  --fs-radius-panel: 1.25rem;
  --fs-shadow-card: 0 8px 24px rgb(7 17 31 / 8%);
  --fs-page-gutter: 1rem;
  --fs-page-max: 75rem;
  --fs-reading-max: 47.5rem;
  --fs-focus-ring: 3px solid var(--fs-color-focus);
  --fs-focus-offset: 3px;
  --fs-duration-fast: 150ms;
}

@theme {
  --font-sans: var(--fs-font-sans);
  --color-navy-950: var(--fs-color-navy-950);
  --color-navy-900: var(--fs-color-navy-900);
  --color-navy-800: var(--fs-color-navy-800);
  --color-surface-page: var(--fs-color-surface-page);
  --color-surface-card: var(--fs-color-surface-card);
  --color-surface-subtle: var(--fs-color-surface-subtle);
  --color-text-strong: var(--fs-color-text-strong);
  --color-text-muted: var(--fs-color-text-muted);
  --color-focus: var(--fs-color-focus);
  --color-positive: var(--fs-color-positive);
  --color-caution: var(--fs-color-caution);
  --color-danger: var(--fs-color-danger);
  --radius-control: var(--fs-radius-control);
  --radius-card: var(--fs-radius-card);
  --shadow-card: var(--fs-shadow-card);
  --breakpoint-xs: 20rem;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
}

[data-theme="high-contrast"] {
  --fs-color-surface-page: #ffffff;
  --fs-color-surface-card: #ffffff;
  --fs-color-text-strong: #000000;
  --fs-color-text-muted: #1f2937;
  --fs-color-border: #000000;
  --fs-color-link: #0039a6;
  --fs-color-focus: #ffbf00;
  --fs-focus-ring: 3px solid var(--fs-color-focus);
}

@media (min-width: 640px) {
  :root {
    --fs-page-gutter: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-page-gutter: 2.5rem;
  }
}

@media (prefers-contrast: more) {
  :root {
    --fs-color-border: #000000;
    --fs-color-text-muted: #1f2937;
    --fs-focus-ring: 3px solid var(--fs-color-focus);
  }
}

@media (forced-colors: active) {
  :root {
    --fs-color-border: CanvasText;
    --fs-focus-ring: 3px solid Highlight;
  }

  .button,
  .comparison-card,
  .disclosure,
  .empty-state,
  .info-card,
  .limitation-panel,
  .mobile-menu-sheet,
  .notice,
  .nav-link,
  .option-grid li,
  .path-card,
  .privacy-badge,
  .privacy-banner,
  .status,
  .table-wrap,
  td,
  th {
    border-color: CanvasText;
    forced-color-adjust: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}
@media print {
  :root {
    --fs-color-surface-page: #ffffff;
    --fs-color-surface-card: #ffffff;
    --fs-color-text-strong: #000000;
    --fs-color-text-muted: #000000;
    --fs-color-border: #000000;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  .skip-link,
  .site-header,
  .mobile-menu-layer,
  .button {
    display: none !important;
  }

  .site-footer {
    border-block-start: 1px solid #000000;
    background: #ffffff;
    color: #000000;
  }

  .page-stack {
    padding-block: 1rem;
  }

  .notice,
  .status,
  .info-card,
  .section-block,
  .split-section,
  .privacy-banner,
  .limitation-panel,
  .empty-state,
  .disclosure {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    background: #ffffff;
    color: #000000;
  }

  details.disclosure > summary {
    display: block;
  }

  details.disclosure > :not(summary) {
    display: block !important;
  }

  table {
    min-width: 0;
  }

  th,
  td {
    border-color: #000000;
  }
}

@layer base {
  * {
    box-sizing: border-box;
  }

  html {
    min-width: 320px;
    color: var(--fs-color-text-strong);
    background: var(--fs-color-surface-page);
    color-scheme: light;
    font-family: var(--fs-font-sans);
    line-height: 1.55;
    scroll-padding-block-start: 5.25rem;
  }

  body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: var(--fs-color-surface-page);
  }

  a {
    color: var(--fs-color-link);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.18em;
  }

  a:hover {
    text-decoration-thickness: 0.16em;
  }

  :focus-visible {
    outline: var(--fs-focus-ring);
    outline-offset: var(--fs-focus-offset);
  }

  /* Route changes focus the page heading for assistive technology. Headings are
     not interactive controls, so do not draw a control-style focus box around them. */
  h1[tabindex="-1"]:focus {
    outline: none;
  }

  h1,
  h2,
  h3,
  li,
  p {
    margin-block: 0;
  }

  h1 {
    max-width: 15ch;
    font-size: clamp(2.125rem, 2rem + 1vw, 3.5rem);
    line-height: 1.05;
    scroll-margin-block-start: 5.25rem;
  }

  h2 {
    color: var(--fs-color-text-strong);
    font-size: clamp(1.625rem, 1.35rem + 0.7vw, 2.25rem);
    line-height: 1.15;
    scroll-margin-block-start: 5.25rem;
  }

  h3 {
    color: var(--fs-color-text-strong);
    font-size: 1.25rem;
    line-height: 1.25;
    scroll-margin-block-start: 5.25rem;
  }

  table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    color: var(--fs-color-text-strong);
  }

  caption {
    margin-block-end: var(--fs-space-3);
    color: var(--fs-color-text-muted);
    font-weight: 700;
    text-align: left;
  }

  th,
  td {
    border: 1px solid var(--fs-color-border);
    padding: var(--fs-space-3);
    text-align: left;
    vertical-align: top;
  }

  thead th {
    background: var(--fs-color-surface-subtle);
  }

  tbody th {
    background: rgb(237 242 246 / 58%);
  }
}

@layer components {
  .app-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  .skip-link {
    position: fixed;
    z-index: 20;
    inset-block-start: var(--fs-space-3);
    inset-inline-start: var(--fs-space-3);
    transform: translateY(calc(-100% - var(--fs-space-6)));
    border-radius: var(--fs-radius-control);
    background: var(--fs-color-navy-950);
    color: white;
    padding: var(--fs-space-3) var(--fs-space-4);
    font-weight: 700;
    transition: transform var(--fs-duration-fast) ease;
  }

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

  .site-header {
    position: sticky;
    z-index: 12;
    top: 0;
    border-block-end: 1px solid var(--fs-color-border);
    background: rgb(255 255 255 / 88%);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgb(7 17 31 / 8%);
  }

  @supports not (backdrop-filter: blur(10px)) {
    .site-header {
      background: rgb(255 255 255 / 98%);
    }
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--fs-space-4);
    min-height: 4.5rem;
    padding-block: var(--fs-space-3);
  }

  .wordmark {
    color: var(--fs-color-text-strong);
    font-size: 1.125rem;
    font-weight: 800;
    text-decoration: none;
  }

  .desktop-nav {
    display: flex;
    align-items: center;
    flex: 1;
    gap: var(--fs-space-2);
  }

  .site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fs-space-1);
  }

  .site-nav--secondary {
    margin-inline-start: auto;
  }

  .nav-link {
    border-block-end: 3px solid transparent;
    border-radius: var(--fs-radius-control);
    color: var(--fs-color-text-muted);
    padding: var(--fs-space-2) var(--fs-space-3);
    text-decoration: none;
    transition:
      background-color var(--fs-duration-fast) ease,
      border-color var(--fs-duration-fast) ease,
      color var(--fs-duration-fast) ease;
  }

  .nav-link:hover,
  .nav-link.active {
    background: var(--fs-color-surface-subtle);
    border-block-end-color: var(--fs-color-link);
    color: var(--fs-color-text-strong);
  }

  .nav-link.active {
    font-weight: 700;
  }

  .privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-space-2);
    border: 1px solid var(--fs-color-teal-700);
    border-radius: var(--fs-radius-control);
    color: var(--fs-color-teal-700);
    font-weight: 700;
    padding: var(--fs-space-2) var(--fs-space-3);
    white-space: nowrap;
  }

  .button.mobile-menu-button,
  .mobile-menu-layer {
    display: none;
  }

  .mobile-menu-layer {
    position: fixed;
    z-index: 15;
    inset: 0;
    justify-content: flex-end;
    background: rgb(7 17 31 / 52%);
  }

  .mobile-menu-sheet {
    width: min(26rem, 100%);
    min-height: 100%;
    overflow-y: auto;
    border-inline-start: 1px solid var(--fs-color-border);
    background: var(--fs-color-surface-card);
    padding: var(--fs-space-4);
    box-shadow: var(--fs-shadow-card);
  }

  .mobile-menu-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fs-space-3);
    margin-block-end: var(--fs-space-4);
  }

  .mobile-menu-heading h2 {
    font-size: 1.25rem;
  }

  .site-nav--mobile {
    display: grid;
    gap: var(--fs-space-2);
    margin-block-start: var(--fs-space-3);
  }

  .site-nav--mobile .nav-link {
    min-height: 44px;
    align-items: center;
    border: 1px solid var(--fs-color-border);
    display: flex;
  }

  .site-main {
    flex: 1;
    scroll-margin-block-start: 5.25rem;
  }

  .site-footer {
    border-block-start: 1px solid var(--fs-color-border);
    background: var(--fs-color-navy-950);
    color: white;
  }

  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--fs-space-5);
    padding-block: var(--fs-space-6);
  }

  .site-footer__statement {
    display: grid;
    max-width: 42rem;
    gap: var(--fs-space-2);
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--fs-space-3);
  }

  .footer-links a {
    color: white;
  }

  .page-container {
    width: min(100% - (var(--fs-page-gutter) * 2), var(--fs-page-max));
    margin-inline: auto;
  }

  .page-stack {
    display: grid;
    gap: var(--fs-space-8);
    padding-block: var(--fs-space-12);
  }

  .page-header {
    display: grid;
    max-width: var(--fs-reading-max);
    gap: var(--fs-space-4);
  }

  .placeholder-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: var(--fs-radius-control);
    background: var(--fs-color-privacy-bg);
    color: var(--fs-color-teal-700);
  }

  .eyebrow {
    color: var(--fs-color-teal-700);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .lead {
    max-width: var(--fs-reading-max);
    color: var(--fs-color-text-muted);
    font-size: 1.125rem;
  }

  .lead p + p {
    margin-block-start: var(--fs-space-3);
  }

  .notice {
    display: grid;
    max-width: var(--fs-reading-max);
    grid-template-columns: auto 1fr;
    gap: var(--fs-space-3);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-card);
    padding: var(--fs-space-4);
  }

  .notice--info {
    background: var(--fs-color-info-bg);
  }

  .notice--privacy {
    background: var(--fs-color-privacy-bg);
  }

  .notice--warning {
    background: var(--fs-color-caution-bg);
  }

  .notice--error {
    background: var(--fs-color-danger-bg);
  }

  .notice__icon {
    color: currentColor;
  }

  .notice__title {
    font-size: 1rem;
    line-height: 1.35;
  }

  .notice__body {
    margin-block-start: var(--fs-space-1);
    color: var(--fs-color-text-muted);
  }

  .status {
    width: -moz-fit-content;
    width: fit-content;
    max-width: var(--fs-reading-max);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-control);
    padding: var(--fs-space-3) var(--fs-space-4);
    font-weight: 700;
  }

  .status--info {
    background: var(--fs-color-info-bg);
  }

  .status--success {
    background: var(--fs-color-privacy-bg);
  }

  .status--warning {
    background: var(--fs-color-caution-bg);
  }

  .status--error {
    background: var(--fs-color-danger-bg);
  }

  .button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: var(--fs-space-2);
    border: 1px solid transparent;
    border-radius: var(--fs-radius-control);
    padding: var(--fs-space-3) var(--fs-space-4);
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    transition:
      background-color var(--fs-duration-fast) ease,
      border-color var(--fs-duration-fast) ease,
      color var(--fs-duration-fast) ease,
      transform var(--fs-duration-fast) ease;
  }

  .button--primary {
    background: var(--fs-color-teal-700);
    color: white;
  }

  .button--secondary {
    border-color: var(--fs-color-border);
    background: var(--fs-color-surface-card);
    color: var(--fs-color-text-strong);
  }

  .button--quiet {
    background: transparent;
    color: var(--fs-color-link);
  }

  .button--danger {
    background: var(--fs-color-danger);
    color: white;
  }

  .button:hover:not(:disabled) {
    transform: translateY(-1px);
  }

  .button:active:not(:disabled) {
    transform: translateY(0);
  }

  .button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
  }

  .button__icon {
    display: inline-flex;
  }

  .action-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fs-space-3);
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hero-section {
    background:
      linear-gradient(90deg, rgb(13 27 42 / 94%) 0 2px, transparent 2px 100%),
      linear-gradient(0deg, rgb(13 27 42 / 68%) 0 2px, transparent 2px 100%),
      var(--fs-color-navy-950);
    background-size: 4rem 4rem;
    color: white;
  }

  .hero-grid {
    display: grid;
    gap: var(--fs-space-10);
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--fs-space-16);
  }

  .hero-copy {
    display: grid;
    align-content: center;
    gap: var(--fs-space-5);
  }

  .hero-copy h1,
  .hero-copy .hero-lead {
    color: white;
  }

  .hero-lead {
    max-width: 48rem;
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.35rem);
    line-height: 1.55;
  }

  .hero-reassurance {
    color: rgb(255 255 255 / 82%);
    font-weight: 700;
  }

  .eyebrow--on-dark {
    color: #8be0d7;
  }

  .comparison-panel {
    display: grid;
    gap: var(--fs-space-4);
    align-self: center;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: var(--fs-radius-panel);
    background: rgb(255 255 255 / 8%);
    padding: var(--fs-space-4);
  }

  .comparison-card,
  .info-card,
  .path-card {
    display: grid;
    gap: var(--fs-space-3);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-card);
    background: var(--fs-color-surface-card);
    padding: var(--fs-space-5);
  }

  .comparison-card {
    border-color: rgb(255 255 255 / 20%);
    background: rgb(255 255 255 / 94%);
    color: var(--fs-color-text-strong);
  }

  .comparison-card--boundary {
    background: var(--fs-color-info-bg);
  }

  .icon-list,
  .option-grid {
    display: grid;
    gap: var(--fs-space-3);
    padding: 0;
    list-style: none;
  }

  .icon-list li,
  .option-grid li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--fs-space-3);
  }

  .icon-list svg,
  .option-grid svg {
    color: var(--fs-color-teal-700);
    margin-block-start: 0.15rem;
  }

  .home-stack {
    display: grid;
    gap: var(--fs-space-12);
    padding-block: var(--fs-space-12);
  }

  .section-block,
  .split-section,
  .final-cta,
  .privacy-banner,
  .limitation-panel,
  .empty-state {
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-panel);
    background: var(--fs-color-surface-card);
    padding: var(--fs-space-6);
  }

  .section-block {
    display: grid;
    gap: var(--fs-space-6);
  }

  .section-heading {
    display: grid;
    max-width: var(--fs-reading-max);
    gap: var(--fs-space-3);
  }

  .section-heading p {
    color: var(--fs-color-text-muted);
  }

  .step-grid,
  .content-grid {
    display: grid;
    gap: var(--fs-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  .info-card p,
  .path-card p,
  .empty-state p,
  .limitation-panel p,
  .privacy-banner p,
  .final-cta p {
    color: var(--fs-color-text-muted);
  }

  .card-icon,
  .empty-state__icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-control);
    background: var(--fs-color-privacy-bg);
    color: var(--fs-color-teal-700);
  }

  .split-section,
  .final-cta,
  .privacy-banner,
  .limitation-panel,
  .empty-state {
    display: grid;
    gap: var(--fs-space-5);
  }

  .separation-diagram {
    display: grid;
    gap: var(--fs-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }

  .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-card);
    background: var(--fs-color-surface-card);
  }

  .table-wrap table {
    border-style: hidden;
  }

  .table-wrap caption {
    padding: var(--fs-space-3) var(--fs-space-3) 0;
  }

  .privacy-banner {
    background: var(--fs-color-privacy-bg);
  }

  .limitation-panel {
    background: var(--fs-color-caution-bg);
  }

  .final-cta {
    align-items: center;
    background: var(--fs-color-navy-900);
    color: white;
  }

  .final-cta h2,
  .final-cta p {
    color: white;
  }

  .option-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }

  .option-grid li {
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-control);
    background: var(--fs-color-surface-card);
    padding: var(--fs-space-3);
    font-weight: 700;
  }

  .education-page .content-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }

  .disclosure-stack {
    display: grid;
    gap: var(--fs-space-3);
  }

  .disclosure {
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-card);
    background: var(--fs-color-surface-card);
  }

  .disclosure__summary {
    cursor: pointer;
    padding: var(--fs-space-4);
    font-weight: 800;
  }

  .disclosure__body {
    border-block-start: 1px solid var(--fs-color-border);
    color: var(--fs-color-text-muted);
    padding: var(--fs-space-4);
  }

  .empty-state {
    max-width: var(--fs-reading-max);
    grid-template-columns: auto 1fr;
  }

  .empty-state__body {
    display: grid;
    gap: var(--fs-space-3);
  }

  .setup-form {
    display: grid;
    gap: var(--fs-space-6);
  }

  .setup-summary {
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-card);
    background: var(--fs-color-info-bg);
    padding: var(--fs-space-4);
  }

  .setup-summary dl {
    display: grid;
    gap: var(--fs-space-3);
    margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  }

  .setup-summary div {
    display: grid;
    gap: var(--fs-space-1);
  }

  .setup-summary dt,
  .field label,
  .radio-group legend {
    color: var(--fs-color-text-strong);
    font-weight: 800;
  }

  .setup-summary dd {
    margin: 0;
    color: var(--fs-color-text-muted);
  }

  .setup-form__sections,
  .question-draft-list,
  .question-editor-row,
  .question-review,
  .resume-import-panel,
  .resume-import-preview,
  .research-panel,
  .research-result,
  .form-section,
  .field,
  .field-group,
  .device-panel,
  .mic-meter,
  .condition-list {
    display: grid;
    gap: var(--fs-space-4);
  }

  .question-review {
    border-block-start: 1px solid var(--fs-color-border);
    margin-block-start: var(--fs-space-2);
    padding-block-start: var(--fs-space-4);
  }

  .question-review__list {
    display: grid;
    gap: var(--fs-space-4);
    margin: 0;
    padding-inline-start: var(--fs-space-5);
  }

  .question-review__list li {
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-card);
    background: var(--fs-color-surface-subtle);
    padding: var(--fs-space-4);
  }

  .resume-import-preview {
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-card);
    background: var(--fs-color-surface-subtle);
    padding: var(--fs-space-4);
  }

  .research-panel {
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-card);
    background: var(--fs-color-surface-subtle);
    padding: var(--fs-space-4);
  }

  .research-summary {
    display: grid;
    gap: var(--fs-space-3);
    margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }

  .research-summary div,
  .resume-file-card {
    display: grid;
    gap: var(--fs-space-1);
  }

  .research-summary dt {
    color: var(--fs-color-text-strong);
    font-weight: 800;
  }

  .research-summary dd {
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--fs-color-text-muted);
  }

  .candidate-list,
  .research-findings {
    display: grid;
    gap: var(--fs-space-3);
    margin: 0;
    padding: 0;
  }

  .candidate-card,
  .research-findings li,
  .resume-file-card {
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-card);
    background: var(--fs-color-surface-card);
    padding: var(--fs-space-4);
  }

  .candidate-card {
    color: var(--fs-color-text-strong);
    cursor: pointer;
    text-align: left;
  }

  .candidate-card span,
  .candidate-card small,
  .resume-file-card span {
    color: var(--fs-color-text-muted);
  }

  .resume-import-metadata {
    display: grid;
    gap: var(--fs-space-3);
    margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }

  .resume-import-metadata div {
    display: grid;
    gap: var(--fs-space-1);
  }

  .resume-import-metadata dt {
    color: var(--fs-color-text-strong);
    font-weight: 800;
  }

  .resume-import-metadata dd {
    margin: 0;
    color: var(--fs-color-text-muted);
  }

  .resume-preview-text {
    max-height: 18rem;
    overflow: auto;
    margin: 0;
    border-block-start: 1px solid var(--fs-color-border);
    color: var(--fs-color-text-strong);
    padding: var(--fs-space-4);
    white-space: pre-wrap;
    word-break: break-word;
  }

  .form-section,
  .device-panel,
  .error-summary {
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-panel);
    background: var(--fs-color-surface-card);
    padding: var(--fs-space-5);
  }

  .form-section__heading {
    display: grid;
    gap: var(--fs-space-2);
  }

  .form-section__heading h2,
  .device-panel h2,
  .error-summary h2 {
    font-size: 1.35rem;
  }

  .form-section__heading p,
  .field-help,
  .device-panel p,
  .condition-list,
  .error-summary li {
    color: var(--fs-color-text-muted);
  }

  .form-grid,
  .check-grid,
  .device-grid {
    display: grid;
    gap: var(--fs-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-control);
    background: white;
    color: var(--fs-color-text-strong);
    font: inherit;
    padding: var(--fs-space-3);
  }

  .field textarea {
    resize: vertical;
  }

  .field input[aria-invalid="true"],
  .field textarea[aria-invalid="true"] {
    border-color: var(--fs-color-danger);
    box-shadow: inset 0 0 0 1px var(--fs-color-danger);
  }

  .field-error {
    color: var(--fs-color-danger);
    font-weight: 800;
  }

  .error-summary {
    background: var(--fs-color-danger-bg);
  }

  .error-summary ul,
  .plain-list,
  .condition-list {
    margin: 0;
    padding-inline-start: var(--fs-space-5);
  }

  .radio-group {
    display: grid;
    gap: var(--fs-space-3);
    min-width: 0;
    border: 0;
    margin: 0;
    padding: 0;
  }

  .segmented-control {
    display: grid;
    gap: var(--fs-space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }

  .segmented-control__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--fs-space-3);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-control);
    padding: var(--fs-space-3);
  }

  .segmented-control__item small {
    display: block;
    color: var(--fs-color-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
  }

  .check-control {
    display: inline-grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    gap: var(--fs-space-2);
    font-weight: 700;
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fs-space-3);
  }

  .device-panel__header {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    gap: var(--fs-space-3);
  }

  .device-panel__header svg {
    color: var(--fs-color-teal-700);
  }

  .preview-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fs-space-4);
  }

  .camera-preview {
    display: grid;
    min-height: 15rem;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-card);
    background: var(--fs-color-navy-950);
    color: white;
  }

  .camera-preview__video {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--fs-color-navy-950);
    -o-object-fit: cover;
       object-fit: cover;
  }

  .camera-preview__video.mirror {
    transform: scaleX(-1);
  }

  .camera-preview__hidden {
    display: grid;
    place-items: center;
    gap: var(--fs-space-2);
    padding: var(--fs-space-6);
  }

  .mic-meter__track {
    position: relative;
    min-height: 1rem;
    overflow: hidden;
    border: 1px solid var(--fs-color-border);
    border-radius: 999px;
    background: var(--fs-color-surface-subtle);
  }

  .mic-meter__track span {
    display: block;
    min-height: 100%;
    background: var(--fs-color-teal-700);
  }

  .interview-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fs-space-3);
    border-block: 1px solid var(--fs-color-border);
    padding-block: var(--fs-space-4);
  }

  .interview-status p {
    color: var(--fs-color-text-muted);
    font-weight: 700;
  }

  .media-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fs-space-2);
  }

  .interview-workspace {
    display: grid;
    gap: var(--fs-space-5);
  }

  .interview-main,
  .interview-side,
  .question-panel,
  .timer-panel,
  .measurement-panel,
  .recording-panel,
  .coaching-panel,
  .transcript-review-panel,
  .delivery-observations,
  .live-prompt-card,
  .preview-card,
  .attempt-panel,
  .interview-controls {
    display: grid;
    gap: var(--fs-space-4);
  }

  .question-panel,
  .timer-panel,
  .measurement-panel,
  .recording-panel,
  .coaching-panel,
  .transcript-review-panel,
  .delivery-observations,
  .live-prompt-card,
  .preview-card,
  .attempt-panel,
  .confirm-dialog {
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-panel);
    background: var(--fs-color-surface-card);
    padding: var(--fs-space-5);
  }

  .question-panel h2,
  .measurement-panel h2,
  .recording-panel h2,
  .coaching-panel h2,
  .transcript-review-panel h2,
  .delivery-observations h2,
  .live-prompt-card h2,
  .preview-card h2,
  .attempt-panel h2,
  .confirm-dialog h2 {
    font-size: 1.35rem;
  }

  .compact-field {
    max-width: 32rem;
  }

  .measurement-list {
    display: grid;
    gap: var(--fs-space-2);
  }

  .measurement-list div {
    display: grid;
    gap: var(--fs-space-1);
    border-block-end: 1px solid var(--fs-color-border);
    padding-block: var(--fs-space-2);
  }

  .measurement-list dt {
    color: var(--fs-color-text-muted);
    font-weight: 700;
  }

  .measurement-list dd {
    margin: 0;
    color: var(--fs-color-text-strong);
    font-weight: 800;
  }

  .coaching-sections {
    display: grid;
    gap: var(--fs-space-4);
  }

  .coaching-panel--takeaway,
  .coaching-panel--next {
    border-color: color-mix(
      in srgb,
      var(--fs-color-teal-700) 38%,
      var(--fs-color-border)
    );
  }

  .transcript-review-panel textarea {
    min-block-size: 12rem;
  }

  .live-prompt-card {
    position: sticky;
    inset-block-start: 5.5rem;
    z-index: 4;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    border-color: var(--fs-color-teal-700);
    box-shadow: var(--fs-shadow-card);
  }

  .live-prompt-card p {
    margin: 0;
  }

  .technical-details {
    display: grid;
    gap: var(--fs-space-4);
  }

  .recording-panel audio,
  .recording-panel video {
    inline-size: 100%;
  }

  .recording-panel video {
    max-block-size: 24rem;
    border-radius: var(--fs-radius-card);
    background: var(--fs-color-navy-950);
  }

  .timer-panel {
    background: var(--fs-color-info-bg);
  }

  .timer-panel strong {
    color: var(--fs-color-text-strong);
    font-size: 2rem;
    line-height: 1;
  }

  .interview-controls {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }

  .interview-preview {
    position: relative;
    display: grid;
    min-height: 13rem;
    overflow: hidden;
    place-items: center;
    gap: var(--fs-space-2);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-card);
    background: var(--fs-color-navy-950);
    color: white;
    text-align: center;
  }

  .interview-preview__video {
    width: 100%;
    min-height: 13rem;
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .interview-preview__video.mirror {
    transform: scaleX(-1);
  }

  .interview-preview__video.is-hidden {
    opacity: 0;
  }

  .interview-preview__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    gap: var(--fs-space-2);
    padding: var(--fs-space-4);
    background: rgb(7 17 31 / 82%);
  }

  .dialog-backdrop {
    position: fixed;
    z-index: 25;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgb(7 17 31 / 58%);
    padding: var(--fs-space-4);
  }

  .confirm-dialog {
    width: min(100%, 32rem);
    box-shadow: var(--fs-shadow-card);
  }
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr);
  }

  .split-section,
  .final-cta,
  .privacy-banner,
  .limitation-panel {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .interview-workspace {
    grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
  }
}

@media (max-width: 980px) {
  .site-header__inner {
    justify-content: space-between;
  }

  .desktop-nav {
    display: none;
  }

  .button.mobile-menu-button {
    display: inline-flex;
  }

  .mobile-menu-layer {
    display: flex;
  }

  .privacy-badge {
    margin-inline-start: auto;
  }
}

@media (max-width: 640px) {
  h1 {
    font-size: clamp(2.125rem, 1.9rem + 0.8vw, 2.5rem);
  }

  .hero-grid {
    padding-block: var(--fs-space-10);
  }

  .page-stack,
  .home-stack {
    padding-block: var(--fs-space-8);
  }

  .section-block,
  .split-section,
  .final-cta,
  .privacy-banner,
  .limitation-panel,
  .empty-state {
    padding: var(--fs-space-4);
  }

  .empty-state {
    grid-template-columns: 1fr;
  }

  .action-row,
  .button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .privacy-badge {
    display: none;
  }
}

@media (max-width: 360px) {
  .site-header__inner {
    gap: var(--fs-space-2);
  }

  .wordmark {
    font-size: 1rem;
  }
}

@layer components {
  .saved-toolbar {
    display: grid;
    align-items: end;
    gap: var(--fs-space-4);
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(11rem, 1fr));
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-card);
    background: var(--fs-color-surface-card);
    padding: var(--fs-space-5);
  }

  .saved-search-field {
    min-width: 0;
  }

  .input-with-icon {
    position: relative;
  }

  .input-with-icon svg {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--fs-space-3);
    color: var(--fs-color-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
  }

  .input-with-icon input {
    width: 100%;
    padding-inline-start: 2.75rem;
  }

  .saved-session-list,
  .report-question-list {
    display: grid;
    gap: var(--fs-space-5);
  }

  .saved-session-card,
  .report-question-card,
  .report-overview,
  .saved-recording-panel {
    display: grid;
    gap: var(--fs-space-5);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-panel);
    background: var(--fs-color-surface-card);
    padding: var(--fs-space-6);
  }

  .saved-session-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fs-space-4);
  }

  .saved-session-card__heading > div {
    display: grid;
    min-width: 0;
    gap: var(--fs-space-2);
  }

  .saved-session-card h2,
  .report-question-card h2 {
    max-width: none;
    overflow-wrap: anywhere;
  }

  .saved-session-meta {
    display: grid;
    gap: var(--fs-space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    margin: 0;
  }

  .saved-session-meta div,
  .metric-list div {
    display: grid;
    gap: var(--fs-space-1);
  }

  .saved-session-meta dt,
  .metric-list dt {
    color: var(--fs-color-text-muted);
    font-size: 0.875rem;
    font-weight: 800;
  }

  .saved-session-meta dd,
  .metric-list dd {
    margin: 0;
    color: var(--fs-color-text-strong);
  }

  .inline-edit-panel,
  .transcript-panel,
  .notes-panel,
  .practice-takeaway {
    display: grid;
    gap: var(--fs-space-3);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-card);
    background: var(--fs-color-surface-subtle);
    padding: var(--fs-space-4);
  }

  .saved-session-actions .button--quiet:last-child {
    color: var(--fs-color-danger);
  }

  .report-overview,
  .report-question-card {
    max-width: none;
  }

  .report-summary-grid {
    padding-block: var(--fs-space-2);
  }

  .attempt-report,
  .report-content-section,
  .coaching-report,
  .technical-details__body,
  .report-category-list {
    display: grid;
    gap: var(--fs-space-4);
  }

  .report-two-column {
    display: grid;
    gap: var(--fs-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }

  .report-two-column ul {
    margin: 0;
    padding-inline-start: 1.25rem;
  }

  .report-category-row {
    display: grid;
    align-items: start;
    gap: var(--fs-space-2);
    border-block-end: 1px solid var(--fs-color-border);
    padding-block-end: var(--fs-space-4);
  }

  .report-category-row:last-child {
    border-block-end: 0;
    padding-block-end: 0;
  }

  .technical-details > summary {
    cursor: pointer;
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-control);
    background: var(--fs-color-info-bg);
    padding: var(--fs-space-4);
    font-weight: 800;
  }

  .technical-details[open] > summary {
    margin-block-end: var(--fs-space-4);
  }

  .metric-list {
    display: grid;
    gap: var(--fs-space-3);
    margin: 0;
  }

  .metric-list div {
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 1fr);
    border-block-end: 1px solid var(--fs-color-border);
    padding-block-end: var(--fs-space-2);
  }

  .saved-recording-media {
    width: 100%;
    max-height: 32rem;
    border-radius: var(--fs-radius-card);
    background: var(--fs-color-navy-950);
  }
}

@media (max-width: 760px) {
  .saved-toolbar {
    grid-template-columns: 1fr;
  }

  .saved-session-card__heading {
    align-items: stretch;
    flex-direction: column;
  }

  .metric-list div {
    grid-template-columns: 1fr;
  }
}

.settings-page {
  max-width: 76rem;
}

.settings-card {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.25rem, 2vw, 2rem);
  border: 1px solid var(--fs-color-border);
  border-radius: 1.25rem;
  background: var(--fs-color-surface-card);
}

.settings-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.settings-card__heading h2,
.settings-card__heading p {
  margin: 0;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.settings-checks {
  display: grid;
  gap: 0.75rem;
}

.storage-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.storage-summary > div {
  padding: 1rem;
  border: 1px solid var(--fs-color-border);
  border-radius: 0.9rem;
  background: var(--fs-color-surface-subtle);
}

.storage-summary dt {
  font-size: 0.86rem;
  color: var(--fs-color-text-muted);
}

.storage-summary dd {
  margin: 0.35rem 0 0;
  font-size: 1.35rem;
  font-weight: 750;
}

.paragraph-text {
  display: grid;
  gap: 0.85rem;
}

.paragraph-text > p {
  margin: 0;
  white-space: pre-wrap;
}