/* ==========================================================
   ATS Checker
   Same Material-style language as the funnel calculator.
   Blue tone (Resume Tools cluster).
   ========================================================== */

:root {
  --ats-primary: #2563eb;
  --ats-primary-light: #3B82F6;
  --ats-primary-deep: #1d4ed8;
  --ats-primary-50: #eff6ff;
  --ats-primary-100: #dbeafe;
  --ats-primary-200: #bfdbfe;
  --ats-primary-700: #1d4ed8;
  --ats-ink: #0f172a;
  --ats-ink-soft: #334155;
  --ats-mute: #64748b;
  --ats-mute-soft: #94a3b8;
  --ats-surface: #ffffff;
  --ats-surface-2: #f8fafc;
  --ats-surface-3: #f1f5f9;
  --ats-border: #e2e8f0;
  --ats-border-soft: #f1f5f9;
  --ats-radius: 12px;
  --ats-radius-lg: 16px;
  --ats-radius-xl: 24px;

  --ats-good-bg: #ecfdf5;
  --ats-good-fg: #047857;
  --ats-good-bd: #a7f3d0;
  --ats-warn-bg: #fffbeb;
  --ats-warn-fg: #92400e;
  --ats-warn-bd: #fde68a;
  --ats-bad-bg: #fef2f2;
  --ats-bad-fg: #b91c1c;
  --ats-bad-bd: #fecaca;
  --ats-neutral-bg: #f1f5f9;
  --ats-neutral-fg: #334155;

  --ats-elev-1: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 6px rgba(15, 23, 42, .06);
  --ats-elev-2: 0 2px 4px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .08);
  --ats-elev-3: 0 4px 8px rgba(15, 23, 42, .04), 0 18px 40px rgba(15, 23, 42, .10);
}

body.ats-tool {
  background:
    radial-gradient(1100px 600px at 50% 0%, rgba(37, 99, 235, .14), transparent 70%),
    radial-gradient(900px 500px at 100% 30%, rgba(16, 185, 129, .07), transparent 65%),
    linear-gradient(180deg, #f0f5ff 0%, #f4f7fc 360px, #f8fafc 100%);
  background-attachment: fixed;
}

/* Round the Free-Resume-Review band so it matches the diag card / paper
   radius rather than running flush full-bleed corners. */
body.ats-tool .tcv-free-review-split {
  border-radius: var(--ats-radius-xl);
  overflow: hidden;
}


/* ==========================================================
   §1 BREADCRUMB
   ========================================================== */
.ats-breadcrumb { position: relative; background: transparent; padding: 16px 1.25rem 0; }
.ats-breadcrumb__inner {
  max-width: 1180px; margin: 0 auto;
  font-size: 13px; color: var(--ats-mute);
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.ats-breadcrumb a { color: var(--ats-primary-700); font-weight: 600; }
.ats-breadcrumb a:hover { text-decoration: underline; }
.ats-crumb-current { color: var(--ats-ink-soft); font-weight: 600; }


/* ==========================================================
   §2 HERO — typography-forward, two soft blobs over a faint grid.
   Mirrors the hub-hero language but tuned tighter for a tool page.
   ========================================================== */
.ats-hero {
  position: relative;
  overflow: hidden;
  padding: 20px 1.25rem 28px;
  isolation: isolate;
  background:
    radial-gradient(900px 380px at 70% -10%, rgba(37, 99, 235, .12), transparent 60%),
    radial-gradient(700px 320px at 0% 110%, rgba(16, 185, 129, .06), transparent 65%),
    linear-gradient(180deg, #f4f7ff 0%, #eef2ff 100%);
}
.ats-hero__decor { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.ats-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}
.ats-hero__blob--a {
  width: 460px; height: 460px;
  top: -180px; right: -120px;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  opacity: .18;
}
.ats-hero__blob--b {
  width: 320px; height: 320px;
  bottom: -140px; left: -100px;
  background: linear-gradient(135deg, #23ce6b, #00a6fb);
  opacity: .12;
}
.ats-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(37, 99, 235, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 99, 235, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  opacity: .8;
}

.ats-hero__inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.ats-hero__title {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ats-ink);
  margin: 0 0 16px;
  background: none;
  -webkit-text-fill-color: var(--ats-ink);
}
.ats-hero__title-grad {
  background: linear-gradient(90deg, #3B82F6 0%, #2563EB 50%, #1d4ed8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}
.ats-hero__sub {
  max-width: 660px;
  margin: 0 auto 22px;
  color: var(--ats-ink-soft);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Feature pills — small inline badges with a checkmark icon */
.ats-hero__features {
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0;
  margin: 0 0 22px;
}
.ats-hero__features li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ats-ink-soft);
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: 999px;
  padding: 5px 11px;
  letter-spacing: -0.005em;
}
.ats-hero__features svg {
  width: 13px; height: 13px;
  color: var(--ats-primary-700);
  flex: 0 0 auto;
}

/* Jump nav — same pattern as funnel calc, refined */
.ats-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ats-jump a {
  font-size: 12.5px; font-weight: 600;
  color: var(--ats-mute);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 4px 8px;
  transition: color .15s ease;
}
.ats-jump a:hover {
  color: var(--ats-primary-700);
  background: transparent;
}


/* ==========================================================
   §3 MAIN
   ========================================================== */
.ats-main { max-width: 1180px; margin: 0 auto; padding: 12px 1.25rem 40px; }


/* ==========================================================
   §4 CHECKER
   ========================================================== */
.ats-checker-section {
  display: flex; flex-direction: column; gap: 20px;
  margin: 36px auto 56px;
}

.ats-checker-card {
  align-self: center;
  width: 100%;
  max-width: 680px;
  background: #fff;
  border-radius: var(--ats-radius-xl);
  padding: 28px;
  box-shadow: var(--ats-elev-2);
}

.ats-upload__head { text-align: center; margin-bottom: 22px; }
.ats-upload__head h2 {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--ats-ink); margin: 0 0 8px; line-height: 1.2; text-align: center;
}
.ats-upload__head p {
  color: var(--ats-ink-soft); font-size: 0.95rem; line-height: 1.55;
  margin: 0 auto; max-width: 640px;
}

/* Dropzone — minimal vertical stack with subtle dashed border */
.ats-dropzone {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px;
  padding: 28px 24px;
  background: #fbfcfe;
  border: 1.5px dashed #d8dfee;
  border-radius: 16px;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  margin-bottom: 18px;
}
.ats-dropzone:hover,
.ats-dropzone.is-hover {
  background: #f4f8ff;
  border-color: var(--ats-primary);
  transform: translateY(-1px);
}
.ats-dropzone.is-filled {
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f8ff 100%);
  border-style: solid;
  border-color: var(--ats-primary-200);
  box-shadow: 0 8px 24px rgba(37, 99, 235, .08);
}
.ats-dropzone__icon {
  display: inline-flex; flex: 0 0 auto;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  color: var(--ats-primary);
}
.ats-dropzone__icon svg { width: 28px; height: 28px; }
.ats-dropzone__title {
  font-size: 0.92rem; font-weight: 600; color: var(--ats-ink);
  margin: 0; line-height: 1.4; letter-spacing: -0.005em;
}
.ats-dropzone__title strong { color: var(--ats-primary-700); font-weight: 700; }
.ats-dropzone__hint { font-size: 12px; color: var(--ats-mute); margin: 0; }

.ats-upload__actions {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.ats-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  font-size: 15px; font-weight: 700; font-family: inherit;
  border-radius: 12px; border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s, color .12s, opacity .12s;
}
.ats-btn--primary {
  color: #fff;
  background: linear-gradient(90deg, #3B82F6 0%, #2563EB 100%);
  box-shadow: 0 6px 18px rgba(37, 99, 235, .26);
}
.ats-btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(37, 99, 235, .35);
}
.ats-btn--primary:disabled { opacity: .55; cursor: not-allowed; }
.ats-btn--ghost {
  color: var(--ats-ink-soft);
  background: var(--ats-surface-2);
}
.ats-btn--ghost:hover { background: var(--ats-primary-50); color: var(--ats-primary-700); }

.ats-btn__spinner {
  display: none;
  width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ats-spin .7s linear infinite;
}
.ats-btn.is-loading .ats-btn__label { opacity: .6; }
.ats-btn.is-loading .ats-btn__spinner { display: inline-block; }

@keyframes ats-spin { to { transform: rotate(360deg); } }

.ats-upload__privacy {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--ats-mute);
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ats-border-soft);
  justify-content: space-between;
}
.ats-upload__privacy-text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ats-upload__privacy svg { width: 14px; height: 14px; color: var(--ats-mute-soft); flex: 0 0 auto; }
.ats-upload__terms-pill {
  display: inline-flex; align-items: center;
  flex: 0 0 auto;
  padding: 2px 9px;
  background: var(--ats-surface-3);
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: var(--ats-mute);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.ats-upload__terms-pill:hover {
  background: var(--ats-primary-50);
  color: var(--ats-primary-700);
}


/* Loading state — centered, sleek, progressive reveal */
.ats-loading {
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 22px;
  background: linear-gradient(180deg, #fafbfd 0%, #f6f8fc 100%);
  border: 1px solid var(--ats-border-soft);
  border-radius: var(--ats-radius-lg);
  margin-top: 4px;
}
.ats-loading__head {
  display: flex; flex-direction: column; gap: 4px;
  text-align: center;
}
.ats-loading__title {
  font-size: 0.98rem; font-weight: 700; color: var(--ats-ink);
  margin: 0; letter-spacing: -0.005em; line-height: 1.3;
}
.ats-loading__sub {
  font-size: 12px; color: var(--ats-mute); margin: 0; line-height: 1.5;
  max-width: 360px; margin-left: auto; margin-right: auto;
}

.ats-steps {
  list-style: none; padding: 0; margin: 2px 0 0;
  display: flex; flex-direction: column; gap: 2px;
}
.ats-step {
  display: none;  /* hidden until is-revealed; lets the parent box grow as steps appear */
  align-items: flex-start; gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ats-mute);
  transition: background .25s ease, color .25s ease;
}
.ats-step.is-revealed {
  display: flex;
  animation: ats-step-reveal .32s ease both;
}
@keyframes ats-step-reveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ats-step__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  flex: 0 0 auto;
  color: #cbd5e1;
  margin-top: 1px;
  transition: color .25s ease;
}
.ats-step__icon svg {
  width: 20px; height: 20px;
  display: block;
  overflow: visible;
}
.ats-step__ring { transition: stroke .25s ease, fill .25s ease; }
.ats-step__check { opacity: 0; transition: opacity .3s ease .05s; }

.ats-step__body { display: flex; flex-direction: column; min-width: 0; }
.ats-step__label { line-height: 1.4; }
.ats-step__desc {
  font-size: 12px;
  color: var(--ats-mute);
  line-height: 1.45;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease, margin-top .25s ease;
}
.ats-step.is-active .ats-step__desc {
  max-height: 80px;
  opacity: 1;
  margin-top: 2px;
}

/* Active — blue tint, ring spins, description visible */
.ats-step.is-active {
  background: rgba(37, 99, 235, .07);
  color: var(--ats-ink);
  font-weight: 600;
}
.ats-step.is-active .ats-step__icon { color: var(--ats-primary); }
.ats-step.is-active .ats-step__icon svg {
  animation: ats-step-spin .9s linear infinite;
  transform-origin: center;
}
.ats-step.is-active .ats-step__ring {
  stroke-dasharray: 14 42;
  stroke-dashoffset: 0;
}

/* Done — filled green ring, white check, description collapses */
.ats-step.is-done { color: var(--ats-ink-soft); }
.ats-step.is-done .ats-step__icon { color: #059669; }
.ats-step.is-done .ats-step__icon svg { animation: none; }
.ats-step.is-done .ats-step__ring {
  fill: #059669;
  stroke: #059669;
  stroke-dasharray: none;
}
.ats-step.is-done .ats-step__check {
  opacity: 1;
  stroke: #fff;
}

@keyframes ats-step-spin {
  to { transform: rotate(360deg); }
}


/* Error state */
.ats-error {
  background: var(--ats-bad-bg);
  border: 1px solid var(--ats-bad-bd);
  border-radius: var(--ats-radius);
  padding: 14px 18px;
  font-size: 14px; color: var(--ats-bad-fg);
  margin-top: 12px;
}


/* ==========================================================
   §5 RESULTS — 2-COL LAYOUT
   Left: tabbed diagnostic. Right: A4-proportioned paper view
   of the parsed text. Sized to fit a 13" viewport.
   ========================================================== */
.ats-results {
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.ats-results__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}

.ats-results__diag {
  background: #fff;
  border-radius: var(--ats-radius-xl);
  padding: 24px;
  box-shadow: var(--ats-elev-2);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  /* Match the right-column paper height so left/right read as a pair */
  height: min(720px, 78vh);
  max-height: min(720px, 78vh);
  overflow: hidden;
}

/* File-status bar — replaces the upload form once a check has run */
.ats-filebar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fff 0%, #f7faff 100%);
  border: 1px solid var(--ats-primary-200);
  border-radius: var(--ats-radius);
  box-shadow: 0 4px 14px rgba(37, 99, 235, .08);
  margin-top: 28px;
  margin-bottom: 16px;
}
.ats-filebar__icon {
  display: inline-flex;
  width: 28px; height: 28px;
  flex: 0 0 auto;
  align-items: center; justify-content: center;
  background: #059669;
  color: #fff;
  border-radius: 50%;
}
.ats-filebar__icon svg { width: 14px; height: 14px; }
.ats-filebar__copy { flex: 1; min-width: 0; }
.ats-filebar__name {
  font-size: 13px; font-weight: 700; color: var(--ats-ink);
  margin: 0; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ats-filebar__hint {
  font-size: 11px; color: var(--ats-mute); margin: 0; line-height: 1.3;
}
.ats-filebar__reset {
  font-size: 13px; font-weight: 600; font-family: inherit;
  color: var(--ats-primary-700);
  background: var(--ats-primary-50);
  border: 1px solid var(--ats-primary-200);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.ats-filebar__reset:hover {
  background: var(--ats-primary-100);
  border-color: var(--ats-primary);
}


/* Score header — compact, single row, full width */
.ats-score {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ats-border-soft);
}
.ats-score__num { display: flex; align-items: baseline; gap: 3px; }
.ats-score__value {
  font-size: 3.25rem; font-weight: 900; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  color: var(--ats-ink);
}
.ats-score__suffix { font-size: 1rem; font-weight: 700; color: var(--ats-mute-soft); letter-spacing: -0.02em; }
.ats-score__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ats-score__pill {
  font-size: 12px; font-weight: 800; letter-spacing: .4px;
  padding: 6px 12px; border-radius: 999px;
  color: #fff; white-space: nowrap;
  background: #94a3b8;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
}
.ats-score--good .ats-score__pill { background: #059669; box-shadow: 0 4px 12px rgba(5, 150, 105, .25); }
.ats-score--warn .ats-score__pill { background: #d97706; box-shadow: 0 4px 12px rgba(217, 119, 6, .25); }
.ats-score--bad  .ats-score__pill { background: #dc2626; box-shadow: 0 4px 12px rgba(220, 38, 38, .25); }
.ats-score__label {
  font-size: 10px; font-weight: 700; color: var(--ats-mute);
  letter-spacing: 1px; text-transform: uppercase; margin: 0;
}

.ats-verdict {
  font-size: 13.5px; line-height: 1.55;
  color: var(--ats-ink-soft); margin: 0;
}
.ats-verdict strong { color: var(--ats-ink); font-weight: 800; }


/* Stacked diagnostic — Layout & Format, Parsing, Tech skills (accordion).
   scrollbar-gutter reserves space for the scrollbar without the negative-
   margin hack getting clipped by the parent's overflow: hidden. */
.ats-diag-stack {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ats-diag-stack::-webkit-scrollbar { width: 6px; }
.ats-diag-stack::-webkit-scrollbar-thumb { background: var(--ats-border); border-radius: 3px; }
.ats-diag-stack::-webkit-scrollbar-thumb:hover { background: var(--ats-mute-soft); }

.ats-diag-section { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.ats-diag-section__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ats-border-soft);
}
.ats-blockers,
.ats-sections,
.ats-skills { width: 100%; }
.ats-diag-section__title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ats-mute);
  margin: 0;
  flex: 1;
  text-align: left;
  line-height: 1.3;
}
.ats-diag-section__count {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--ats-surface-3);
  color: var(--ats-mute);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.ats-diag-section__count:empty { display: none; }
.ats-diag-section__count--warn { background: rgba(217, 119, 6, .1); color: #b45309; }
.ats-diag-section__count--good { background: rgba(5, 150, 105, .1); color: #047857; }

/* Collapsible (Tech skills) */
.ats-diag-collapsible { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.ats-diag-collapsible > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.ats-diag-collapsible > summary::-webkit-details-marker { display: none; }
.ats-diag-section__head--summary { transition: color .15s ease; }
.ats-diag-collapsible:hover > summary .ats-diag-section__title,
.ats-diag-collapsible:hover > summary .ats-diag-collapsible__chevron { color: var(--ats-primary-700); }
.ats-diag-collapsible__chevron {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--ats-mute);
  transition: transform .2s ease, color .15s ease;
  flex: 0 0 auto;
}
.ats-diag-collapsible__chevron svg { width: 14px; height: 14px; }
.ats-diag-collapsible[open] > summary .ats-diag-collapsible__chevron { transform: rotate(180deg); }

.ats-empty-text {
  font-size: 13px; color: var(--ats-mute); margin: 0; line-height: 1.5;
  padding: 8px 0;
}


/* ==========================================================
   §5b A4 PAPER VIEW
   ========================================================== */
.ats-results__view {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}
/* Meta info chips — slim caption strip floating just below the dots
   indicator. Absolutely positioned so it doesn't add to the wrap height
   (which keeps the right column the same total height as the diag card). */
.ats-paper-meta {
  position: absolute;
  left: 50%;
  bottom: -42px;
  transform: translateX(-50%);
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  white-space: nowrap;
}
.ats-paper-meta__chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  color: var(--ats-primary-700);
  background: var(--ats-primary-50);
  border: 1px solid var(--ats-primary-100);
  border-radius: 999px;
  padding: 3px 10px;
  font-variant-numeric: tabular-nums;
}
.ats-paper-meta__chip--mute {
  color: var(--ats-mute);
  background: var(--ats-surface-2);
  border-color: var(--ats-border-soft);
}

.ats-paper-stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* breathing room below the paper for the dot indicator + meta strip */
  padding-bottom: 64px;
}
/* Wrap defines the coordinate system: explicit aspect-ratio + height
   so absolutely-positioned chevrons + dots + meta have stable anchors. */
.ats-paper-wrap {
  position: relative;
  aspect-ratio: 1 / 1.414;
  height: min(720px, 78vh);
}
.ats-paper {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 4px;
  position: relative;
  z-index: 3;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .05),
    0 14px 36px rgba(15, 23, 42, .14);
}

/* Diagonal stack-of-papers relief — fake sheets behind the active paper,
   rotated and offset so the stack reads from a glance. Standard
   "image shape" iconography pattern. */
.ats-paper-stack__sheet {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
  transform-origin: 50% 50%;
}
.ats-paper-stack__sheet--mid {
  z-index: 2;
  transform: rotate(-2.4deg) translate(-6px, 4px);
}
.ats-paper-stack__sheet--back {
  z-index: 1;
  transform: rotate(3.2deg) translate(10px, 12px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.ats-paper__page {
  position: absolute; inset: 0;
  box-sizing: border-box;
  padding: 36px 42px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 9.5px;
  line-height: 1.45;
  color: #1f2937;
  overflow: hidden;
}
.ats-paper__page mark {
  background: linear-gradient(180deg, transparent 62%, rgba(37, 99, 235, .28) 62%);
  color: var(--ats-primary-700);
  font-weight: 700;
  padding: 0 1px;
  border-radius: 2px;
}

/* Resume template — basic single-column layout */
.resume-header {
  text-align: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid #1f2937;
}
.resume-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #0f172a;
  margin: 0 0 4px;
  line-height: 1.1;
}
.resume-contact {
  font-size: 9px;
  color: #475569;
  margin: 0;
  line-height: 1.4;
  letter-spacing: 0.2px;
}

.resume-section-heading {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #0f172a;
  margin: 10px 0 5px;
  padding-bottom: 2px;
  border-bottom: 1px solid #cbd5e1;
  page-break-after: avoid;
}
.resume-section-heading:first-child { margin-top: 0; }

.resume-block { margin-bottom: 8px; }
.resume-block:last-child { margin-bottom: 0; }

.resume-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 1px;
}
.resume-block-title {
  font-size: 10px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
  flex: 1;
}
.resume-block-title em {
  font-style: italic;
  font-weight: 600;
  color: #334155;
}
.resume-block-meta {
  font-size: 9px;
  color: #475569;
  font-style: italic;
  white-space: nowrap;
  margin: 0;
}

.resume-bullets {
  list-style: none;
  padding: 0;
  margin: 3px 0 0;
}
.resume-bullets li {
  font-size: 9.5px;
  color: #1f2937;
  line-height: 1.45;
  padding-left: 12px;
  position: relative;
  margin-bottom: 1.5px;
}
.resume-bullets li::before {
  content: "•";
  position: absolute;
  left: 2px;
  top: 0;
  color: #475569;
  font-weight: 700;
}
.resume-bullets li.resume-bullets__header {
  padding-left: 0;
  font-weight: 700;
  margin-top: 4px;
  color: #0f172a;
}
.resume-bullets li.resume-bullets__header::before { content: ""; }

.resume-summary {
  font-size: 9.5px;
  color: #1f2937;
  line-height: 1.5;
  margin: 0;
}

.resume-skill-row {
  font-size: 9.5px;
  color: #1f2937;
  line-height: 1.5;
  margin: 0 0 2px;
}
.resume-skill-row strong {
  color: #0f172a;
  font-weight: 700;
}
.resume-skill-row:last-child { margin-bottom: 0; }

.resume-cert,
.resume-misc {
  font-size: 9.5px;
  color: #1f2937;
  line-height: 1.5;
  margin: 0 0 3px;
}
.resume-cert strong,
.resume-misc strong {
  color: #0f172a;
  font-weight: 700;
}

.resume-empty {
  text-align: center;
  color: #94a3b8;
  font-size: 11px;
  font-style: italic;
  padding: 40px 0;
}

/* Side chevron buttons — round, vertically centered on the paper, slightly
   overlapping the paper edge. Style cue: Swiper-style hero carousel nav. */
.ats-paper-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  z-index: 6;
  box-shadow:
    0 1px 2px rgba(37, 99, 235, .12),
    0 8px 22px rgba(37, 99, 235, .32);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.ats-paper-arrow svg { width: 16px; height: 16px; display: block; }
.ats-paper-arrow--prev { left: -22px; }
.ats-paper-arrow--next { right: -22px; }
.ats-paper-arrow:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563EB 0%, #1d4ed8 100%);
  transform: translateY(-50%) scale(1.06);
  box-shadow:
    0 2px 4px rgba(37, 99, 235, .16),
    0 14px 32px rgba(37, 99, 235, .40);
}
.ats-paper-arrow:active:not(:disabled) {
  transform: translateY(-50%) scale(0.97);
}
.ats-paper-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: 0 1px 2px rgba(37, 99, 235, .12);
}
.ats-paper-arrow[hidden] { display: none; }

/* Dot indicators — small, centered below the paper edge */
.ats-paper-dots {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  z-index: 5;
}
.ats-paper-dots[hidden] { display: none; }
.ats-pagenav__dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #cbd5e1;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: width .25s cubic-bezier(.4, 0, .2, 1), background .2s ease;
}
/* Expand the click target without changing visual size */
.ats-pagenav__dot::before {
  content: "";
  position: absolute;
  inset: -8px -3px;
}
.ats-pagenav__dot:hover { background: var(--ats-mute); }
.ats-pagenav__dot.is-active {
  width: 18px;
  background: var(--ats-primary);
  cursor: default;
}


/* When results are showing, hide the upload card form (we'll show
   the file-status bar instead). The .ats-checker-card itself stays
   as the upload host until reset. */
body.ats-tool.has-results .ats-checker-card { display: none; }


/* ATS blockers — flat checklist rows, hairline separators, full width */
.ats-blockers {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.ats-blocker {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ats-border-soft);
  background: transparent;
}
.ats-blocker:last-child { border-bottom: 0; padding-bottom: 4px; }
.ats-blocker:first-child { padding-top: 4px; }

.ats-blocker__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-top: 1px;
  color: #fff;
  background: var(--ats-mute-soft);
}
.ats-blocker__dot svg { width: 11px; height: 11px; display: block; }
.ats-blocker--good .ats-blocker__dot { background: #059669; }
.ats-blocker--warn .ats-blocker__dot { background: #d97706; }
.ats-blocker--bad  .ats-blocker__dot { background: #dc2626; }

.ats-blocker__copy { flex: 1; min-width: 0; }
.ats-blocker__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ats-ink);
  margin: 0;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.ats-blocker__detail {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ats-mute);
  margin: 3px 0 0;
}


/* Section parse status — same flat checklist look as blockers */
.ats-sections {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.ats-section {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ats-border-soft);
}
.ats-section:last-child { border-bottom: 0; padding-bottom: 4px; }
.ats-section:first-child { padding-top: 4px; }

.ats-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-top: 1px;
  color: #fff;
  background: var(--ats-mute-soft);
}
.ats-section__icon svg { width: 11px; height: 11px; display: block; }
.ats-section--good .ats-section__icon { background: #059669; }
.ats-section--warn .ats-section__icon { background: #d97706; }
.ats-section--bad  .ats-section__icon { background: #dc2626; }

.ats-section__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ats-section__head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.ats-section__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ats-ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.ats-section__status {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ats-mute);
}
.ats-section--good .ats-section__status { color: #059669; }
.ats-section--warn .ats-section__status { color: #b45309; }
.ats-section--bad  .ats-section__status { color: #dc2626; }

.ats-section__detail {
  font-size: 12.5px;
  color: var(--ats-mute);
  line-height: 1.45;
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  align-items: center;
}
.ats-section__detail .ats-chip-soft {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  color: var(--ats-ink-soft);
  background: var(--ats-surface-3);
  border-radius: 4px; padding: 2px 7px;
  font-variant-numeric: tabular-nums;
}


/* Technical skills detected */
.ats-skills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ats-skill-cat {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px; width: 100%;
}
.ats-skill-cat__name {
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ats-mute); margin: 0;
}
.ats-skill-cat__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ats-chip {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 500;
  color: var(--ats-primary-700);
  background: var(--ats-primary-50);
  border: 1px solid var(--ats-primary-100);
  border-radius: 6px; padding: 3px 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}


/* What the ATS sees */
.ats-sees__meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px;
}
.ats-sees__chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--ats-primary-700);
  background: var(--ats-primary-50);
  border: 1px solid var(--ats-primary-100);
  border-radius: 999px; padding: 5px 12px;
  font-variant-numeric: tabular-nums;
}
.ats-sees__chip--mute {
  color: var(--ats-mute);
  background: var(--ats-surface-2);
  border-color: var(--ats-border-soft);
}
.ats-sees {
  position: relative;
  background: var(--ats-surface-2);
  border: 1px solid var(--ats-border-soft);
  border-radius: var(--ats-radius);
  padding: 18px 20px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ats-ink-soft);
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 480px;
  overflow-y: auto;
}
.ats-sees__kw {
  background: linear-gradient(180deg, transparent 60%, rgba(37, 99, 235, .25) 60%);
  color: var(--ats-primary-700);
  font-weight: 700;
  padding: 0 2px;
  border-radius: 2px;
}


/* Action — hint on the left, CTA button on the right (single row) */
.ats-action {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ats-border-soft);
  margin-top: 8px;
}
.ats-action__hint {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ats-mute);
  margin: 0;
  line-height: 1.5;
}
.ats-action__cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px;
  font-size: 14px; font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #3B82F6 0%, #2563EB 100%);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .26);
  transition: transform .12s, box-shadow .12s;
  white-space: nowrap;
}
.ats-action__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(37, 99, 235, .34);
  color: #fff;
}


/* ==========================================================
   §6 CONTENT SECTIONS (matches funnel calc design)
   ========================================================== */
.ats-content {
  padding: 56px 0 16px;
  scroll-margin-top: 96px;
}
.ats-content--alt { background: none; backdrop-filter: none; box-shadow: none; padding: 56px 0 16px; margin: 0; }
.ats-content__head {
  max-width: 760px; margin: 0 auto 36px; text-align: center;
}
.ats-content__head--sub { margin-top: 36px; }
.ats-content__eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ats-primary-700); margin: 0 0 8px;
}
.ats-content__head h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 800; letter-spacing: -0.015em;
  color: var(--ats-ink); margin: 0 0 12px; line-height: 1.2;
  text-align: center;
}
.ats-content__head p {
  color: var(--ats-ink-soft); font-size: 1rem; line-height: 1.6; margin: 0;
}

.ats-content__grid {
  display: grid; gap: 16px;
  max-width: 1080px; margin: 0 auto;
}
.ats-content__grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.ats-content__card {
  background: #fff;
  border-radius: var(--ats-radius-lg);
  padding: 22px 22px 20px;
  box-shadow: var(--ats-elev-1);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ats-content__card:hover { transform: translateY(-2px); box-shadow: var(--ats-elev-2); }
.ats-content__card-num {
  display: inline-flex; width: 36px; height: 36px;
  align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; color: #fff;
  border-radius: 10px; margin-bottom: 10px;
}
.ats-content__card-num[data-tone="blue"]  { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.ats-content__card-num[data-tone="green"] { background: linear-gradient(135deg, #34d399, #059669); }
.ats-content__card-num[data-tone="amber"] { background: linear-gradient(135deg, #fbbf24, #d97706); }

.ats-content__card-icon {
  display: inline-flex; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: 12px; margin-bottom: 12px;
}
.ats-content__card-icon svg { width: 22px; height: 22px; }
.ats-content__card-icon[data-tone="blue"]  { background: var(--ats-primary-50);   color: var(--ats-primary-700); }
.ats-content__card-icon[data-tone="green"] { background: #ecfdf5;  color: #047857; }
.ats-content__card-icon[data-tone="amber"] { background: #fffbeb;  color: #b45309; }

.ats-content__card h3 {
  font-size: 1.05rem; font-weight: 800; color: var(--ats-ink);
  margin: 0 0 8px; text-align: left; letter-spacing: -0.01em; line-height: 1.3;
}
.ats-content__card p {
  font-size: 14px; line-height: 1.55; color: var(--ats-ink-soft); margin: 0;
}
.ats-content__card a {
  color: var(--ats-primary-700); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--ats-primary-200); text-underline-offset: 2px;
}
.ats-content__card a:hover { color: var(--ats-primary); text-decoration-color: var(--ats-primary); }

.ats-content__note {
  max-width: 760px; margin: 24px auto 0;
  padding: 16px 20px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--ats-border-soft);
  border-radius: var(--ats-radius);
  font-size: 13px; line-height: 1.6; color: var(--ats-ink-soft);
}
.ats-content__note strong { color: var(--ats-ink); }
.ats-content__note a { color: var(--ats-primary-700); font-weight: 700; }
.ats-content__note a:hover { text-decoration: underline; }


/* Myths */
.ats-myths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}
.ats-myth {
  background: #fff;
  border-radius: var(--ats-radius-xl);
  padding: 26px;
  position: relative; overflow: hidden;
  box-shadow: var(--ats-elev-1);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ats-myth:hover { transform: translateY(-3px); box-shadow: var(--ats-elev-3); }
.ats-myth::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, #f87171, #b91c1c);
}
.ats-myth__head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 12px;
}
.ats-myth__tag {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #f87171, #b91c1c);
  padding: 5px 11px; border-radius: 6px;
}
.ats-myth__head h3 {
  font-size: 1.1rem; font-weight: 800; color: var(--ats-ink);
  margin: 0; text-align: left; letter-spacing: -0.015em; line-height: 1.3;
}
.ats-myth__lead {
  font-size: 14px; line-height: 1.6; color: var(--ats-ink-soft);
  margin: 0 0 12px;
}
.ats-myth__lead strong { color: var(--ats-ink); font-weight: 700; }
.ats-myth__check {
  font-size: 13px; line-height: 1.55;
  color: var(--ats-good-fg);
  background: var(--ats-good-bg);
  border: 1px solid var(--ats-good-bd);
  padding: 10px 14px;
  border-radius: var(--ats-radius);
  margin: 0;
}
.ats-myth__check strong { font-weight: 800; }


/* ==========================================================
   §7 FAQ
   ========================================================== */
.ats-faq {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 8px;
}
.ats-faq__item {
  width: 100%;
  background: #fff;
  border-radius: var(--ats-radius-lg);
  overflow: hidden;
  box-shadow: var(--ats-elev-1);
}
.ats-faq__item summary {
  list-style: none; cursor: pointer;
  padding: 16px 20px;
  font-size: 15px; font-weight: 700; color: var(--ats-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: color .15s ease;
}
.ats-faq__item summary::-webkit-details-marker { display: none; }
.ats-faq__item summary::after {
  content: "+"; font-size: 22px; font-weight: 400;
  color: var(--ats-primary);
  transition: transform .15s ease; flex: 0 0 auto;
}
.ats-faq__item[open] summary::after { content: "−"; }
.ats-faq__item summary:hover { color: var(--ats-primary-700); }
.ats-faq__body { padding: 0 20px 18px; }
.ats-faq__body p {
  font-size: 14px; line-height: 1.6; color: var(--ats-ink-soft); margin: 0;
}
.ats-faq__body a {
  color: var(--ats-primary-700); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--ats-primary-200);
}
.ats-faq__body a:hover { text-decoration-color: var(--ats-primary); }


/* ==========================================================
   §8 RELATED
   ========================================================== */
.ats-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  max-width: 1080px; margin: 0 auto;
}
.ats-related__card {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff;
  border-radius: var(--ats-radius-lg);
  padding: 22px;
  box-shadow: var(--ats-elev-1);
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative; overflow: hidden;
  color: var(--ats-ink);
}
.ats-related__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; }
.ats-related__card[data-tone="blue"]::before  { background: linear-gradient(90deg, #60a5fa, #1d4ed8); }
.ats-related__card[data-tone="green"]::before { background: linear-gradient(90deg, #34d399, #047857); }
.ats-related__card[data-tone="amber"]::before { background: linear-gradient(90deg, #fbbf24, #b45309); }
.ats-related__card:hover { transform: translateY(-3px); box-shadow: var(--ats-elev-3); color: var(--ats-ink); }
.ats-related__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ats-related__icon svg { width: 22px; height: 22px; }
.ats-related__icon[data-tone="blue"]  { background: var(--ats-primary-50);  color: var(--ats-primary-700); }
.ats-related__icon[data-tone="green"] { background: #ecfdf5;  color: #047857; }
.ats-related__icon[data-tone="amber"] { background: #fffbeb;  color: #b45309; }
.ats-related__card h3 {
  font-size: 1rem; font-weight: 800; color: var(--ats-ink);
  margin: 0; text-align: left; letter-spacing: -0.01em; line-height: 1.3;
}
.ats-related__card p {
  font-size: 14px; line-height: 1.55; color: var(--ats-ink-soft);
  margin: 0; flex: 1;
}
.ats-related__cta {
  font-size: 13px; font-weight: 700;
  color: var(--ats-primary-700);
  margin-top: auto; padding-top: 4px;
}


/* ==========================================================
   §9 DISCLAIMER
   ========================================================== */
.ats-disclaimer {
  font-size: 12px; color: var(--ats-mute); line-height: 1.6;
  text-align: center;
  max-width: 760px; margin: 32px auto 0;
  padding: 16px 20px;
  background: rgba(255, 255, 255, .6);
  border-radius: var(--ats-radius);
}
.ats-disclaimer strong { color: var(--ats-ink-soft); }


/* ==========================================================
   §10 RESPONSIVE
   ========================================================== */
/* Stack layout vertically once the 2-col grid stops fitting */
@media (max-width: 1080px) {
  .ats-results__layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ats-results__view { order: -1; }
  .ats-results__diag { height: auto; max-height: none; }
  .ats-paper {
    height: auto;
    width: min(540px, 92vw);
    margin: 0 auto;
  }
}
@media (max-width: 720px) {
  .ats-hero { padding: 12px 1rem 22px; }
  .ats-checker-card { padding: 20px; }
  .ats-results__diag { padding: 20px; }
  .ats-content { padding: 44px 0 12px; }
  .ats-content--alt { padding: 36px 18px 16px; }
  .ats-myths { gap: 14px; }
  .ats-dropzone { flex-direction: column; text-align: center; padding: 22px 18px; }
  .ats-score__value { font-size: 2.75rem; }
  .ats-score__suffix { font-size: 0.95rem; }
}