/* ApplyMate Upgrade Banner — shared across application + resume_builder layouts */
.applymate-upgrade-banner {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line, #ececec);
  background: linear-gradient(180deg, #fffdf5 0%, #ffffff 80%);
  color: var(--ink, #14130f);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.applymate-upgrade-banner__bg { display: none; }

.applymate-upgrade-banner__content {
  position: relative;
  z-index: 1;
  padding: 40px 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  max-width: 860px;
  margin: 0 auto;
}

.applymate-upgrade-banner__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, #6b6862);
  margin: 0;
}

.applymate-upgrade-banner__title {
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink, #14130f);
  max-width: 560px;
}

.applymate-upgrade-banner__subtitle {
  color: var(--ink-3, #6b6862);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  max-width: 560px;
}

.applymate-upgrade-banner__bullets {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink-2, #3a3833);
}

.applymate-upgrade-banner__bullets li {
  margin: 0;
  padding-left: 22px;
  position: relative;
  font-size: 13.5px;
  line-height: 1.5;
}

.applymate-upgrade-banner__bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 12px;
  height: 8px;
  border-left: 2px solid var(--yellow, #f5b700);
  border-bottom: 2px solid var(--yellow, #f5b700);
  transform: rotate(-45deg);
}

.applymate-upgrade-banner__action {
  margin-top: 8px;
}

.applymate-upgrade-banner__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  background: var(--yellow, #f5b700);
  color: var(--yellow-ink, #1a1502);
  border: 1px solid color-mix(in srgb, var(--yellow, #f5b700) 80%, #000 6%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(180,130,0,0.25);
  text-decoration: none;
  transition: background .15s, transform .12s ease;
  white-space: nowrap;
  cursor: pointer;
  width: auto !important;
}

.applymate-upgrade-banner__primary:hover {
  background: #ffc524;
  color: var(--yellow-ink, #1a1502);
}
.applymate-upgrade-banner__primary:active { transform: translateY(1px); }

.applymate-upgrade-banner__fineprint {
  font-size: 12.5px;
  color: var(--ink-4, #9a968e);
  margin: 0;
}

.applymate-upgrade-banner__fineprint a {
  color: var(--ink-2, #3a3833);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.applymate-upgrade-banner__fineprint a:hover { color: var(--ink, #14130f); }

.applymate-upgrade-banner a:focus-visible {
  outline: 2px solid var(--yellow, #f5b700);
  outline-offset: 3px;
  border-radius: 10px;
}

@media (max-width: 640px) {
  .applymate-upgrade-banner__content { padding: 28px 22px 24px; }
}
/*


 */

/* ─── Reset + Base ───────────────────────────────────── */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: #14130f;
  --ink-2: #3a3833;
  --ink-3: #6b6862;
  --ink-4: #9a968e;
  --line: #ececec;
  --line-2: #e2e2e2;
  --tint: #f6f6f6;
  --tint-2: #efefef;
  --yellow: #f5b700;
  --yellow-ink: #1a1502;
  --yellow-soft: #fff7d6;
  --yellow-line: #f0d97a;
  --green-soft: #ecf3ed;
  --green-ink: #2f5d3a;
  --red-soft: #f6ecea;
  --red-ink: #7a3b32;
  --radius: 10px;
  --radius-lg: 14px;
  /* Legacy compat aliases */
  --accent-color: var(--yellow);
  --primary-color: var(--ink);
  --secondary-color: var(--ink-3);
  --background-color: var(--bg);
  --border-radius: var(--radius);
}

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

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
  font-weight: 600;
  line-height: 1.15;
}
h1 { font-size: clamp(40px, 5.2vw, 60px); letter-spacing: -0.03em; font-weight: 600; }
h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; }
h3 { font-size: 18px; letter-spacing: -0.01em; }
h4 { font-size: 15px; letter-spacing: -0.005em; font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.mono {
  font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3);
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

/* ─── NAV ─────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  width: 100%;
}

.navbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

.logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Inter', sans-serif;
  font-weight: 600; color: var(--ink); letter-spacing: -0.01em; font-size: 15px;
  text-decoration: none;
}

.logo-mark {
  width: 24px; height: 24px; border-radius: 5px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 13px; letter-spacing: 0;
  flex-shrink: 0;
}

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--ink-3); font-size: 14px; transition: color .15s; text-decoration: none; }
.nav-links a:hover { color: var(--ink); }

.navbar-right { display: flex; align-items: center; gap: 16px; }

.navbar-left { display: flex; align-items: center; gap: 24px; }
.nav-contact-standalone { color: var(--ink-3); font-size: 14px; text-decoration: none; transition: color .15s; }
.nav-contact-standalone:hover { color: var(--ink); }

.nav-sign-in-link {
  color: var(--ink-3); font-size: 14px; text-decoration: none;
  font-weight: 400; white-space: nowrap;
}
.nav-sign-in-link:hover { color: var(--ink); }

/* ─── BUTTONS ─────────────────────────────────────── */
.btn, .get-started-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  transition: transform .12s ease, background .15s, border-color .15s, color .15s;
  border: 1px solid transparent;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  font-family: inherit;
}
.btn:active, .get-started-btn:active { transform: translateY(1px); }

.btn-primary, .get-started-btn {
  background: var(--yellow); color: var(--yellow-ink);
  border-color: color-mix(in srgb, var(--yellow) 80%, #000 6%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(180,130,0,0.25);
}
.btn-primary:hover, .get-started-btn:hover { background: #ffc524; }

.btn-dark { background: var(--ink); color: #fff; border-color: transparent; }
.btn-dark:hover { background: #2a2823; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--tint); }
.btn-onyx {
  background: rgba(255,255,255,0.06); color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
}
.btn-onyx:hover { background: rgba(255,255,255,0.1); }
.btn-lg { padding: 12px 20px; font-size: 14.5px; border-radius: 9px; }

/* ─── LAYOUT ──────────────────────────────────────── */
.centered-container { width: 100%; }
main { width: 100%; }

/* ─── HERO ────────────────────────────────────────── */
.hero { padding: 88px 0 56px; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px;
  align-items: start;
}


.hero h1, .hero-content h1 { color: var(--ink); }
.hero h1 .accent { color: var(--ink); }
.hero h1 .highlight, .hero-content h1 .highlight { color: var(--yellow); }

.hero p.lead, .hero-description {
  margin-top: 22px; font-size: 17px; line-height: 1.55; color: var(--ink-2);
  max-width: 460px;
}

.hero-trust, .hero-trust-badges {
  margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px;
}

.chip, .trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 7px;
  background: var(--surface); font-size: 12px; color: var(--ink-3);
}
.chip svg { width: 11px; height: 11px; color: var(--ink-4); }
.chip-rotator { transition: opacity 0.2s ease, transform 0.2s ease; }
.chip-rotator.chip--exit { opacity: 0; transform: translateY(-5px); }
@keyframes chipEnter {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chip-rotator.chip--enter { animation: chipEnter 0.25s ease forwards; }

/* ─── FORM CARD ───────────────────────────────────── */
.form-card, .hero-upload-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow:
    0 1px 0 rgba(20,19,15,0.02),
    0 1px 2px rgba(20,19,15,0.04),
    0 8px 28px -12px rgba(20,19,15,0.08);
  display: flex; flex-direction: column; gap: 0;
}

.form-step, .upload-field-label {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; margin-top: 0;
  font-size: 13px; font-weight: 500; color: var(--ink);
}
.upload-field-label + .upload-field-label,
.form-step + .form-step { margin-top: 16px; }

.step-num, .step-badge {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  flex-shrink: 0;
}

.upload-zone, .hero-drop-zone {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed #d4d4d4; border-radius: 10px;
  background: transparent;
  padding: 18px 16px;
  transition: background .15s, border-color .15s;
  cursor: pointer;
  color: var(--ink-2); font-size: 13.5px;
  position: relative;
  margin-bottom: 10px;
  flex-direction: row;
}
.upload-zone:hover, .hero-drop-zone:hover {
  background: var(--tint); border-color: var(--ink-3);
}
.upload-zone svg, .hero-drop-zone > svg {
  width: 14px; height: 14px; color: var(--ink-3); flex-shrink: 0;
}

.drop-zone-primary { font-size: 13.5px; color: var(--ink-2); }
.drop-zone-link, .browse { color: var(--ink); font-weight: 400; }

.hero-file-input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

/* Upload states */
.hero-drop-zone.upload-success {
  border-style: solid; border-color: var(--green-ink); background: var(--green-soft);
}
.hero-drop-zone.upload-success .drop-zone-primary { color: var(--green-ink); }
.hero-drop-zone.disabled { opacity: 0.6; pointer-events: none; cursor: default; }
.hero-drop-zone.hero-field-error { border-color: #e53e3e; background: #fff5f5; }

/* Inputs */
.input, .textarea, .hero-job-title, .hero-job-textarea {
  width: 100%; display: block;
  padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--surface);
  font: inherit; font-size: 13.5px; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.input::placeholder, .textarea::placeholder,
.hero-job-title::placeholder, .hero-job-textarea::placeholder { color: var(--ink-4); }
.input:focus, .textarea:focus, .hero-job-title:focus, .hero-job-textarea:focus {
  outline: none; border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(245,183,0,0.2);
}
.hero-job-title.hero-field-error, .hero-job-textarea.hero-field-error {
  border-color: #e53e3e; background: #fff5f5;
}
.hero-job-title { margin-bottom: 8px; }
.hero-job-textarea { min-height: 96px; resize: none; font-family: inherit; }

/* Submit button */
.hero-tailor-btn, .form-submit {
  width: 100%; margin-top: 14px;
  background: var(--yellow); color: var(--yellow-ink);
  border: 1px solid color-mix(in srgb, var(--yellow) 80%, #000 6%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(180,130,0,0.25);
  padding: 12px 20px; font-size: 14.5px; border-radius: 9px;
  font-weight: 500; cursor: pointer; font-family: inherit;
  transition: background .15s;
  display: flex; align-items: center; justify-content: center;
}
.hero-tailor-btn:hover, .form-submit:hover { background: #ffc524; }

/* Form meta */
.form-meta, .hero-form-note {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 11px; color: var(--ink-4);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.01em;
  justify-content: center; text-align: center;
}
.form-meta span { display: inline-flex; align-items: center; gap: 5px; }

/* Error/notice */
.hero-notice { font-size: 0.8rem; color: #c0392b; margin: 0; }
.hero-notice:empty, p#notice:empty { display: none; }
.hero-form-errors {
  font-size: 0.8rem; color: #b45309; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 6px; padding: 8px 12px; margin-top: 8px;
}

/* Spinner */
.spinner-border {
  display: inline-block; width: 1rem; height: 1rem;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spinner-spin 0.65s linear infinite; vertical-align: middle;
}
.spinner-border[hidden] { display: none; }
.hero-drop-spinner { color: var(--yellow); }
@keyframes spinner-spin { to { transform: rotate(360deg); } }

/* ─── STATS ROW ───────────────────────────────────── */
.stats, .social-proof-bar {
  margin-top: 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  flex-wrap: nowrap !important;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat, .stat-item {
  padding: 28px 24px;
  border-right: 1px solid var(--line);
  text-align: left;
  display: flex; flex-direction: column; align-items: flex-start;
}
.stat:last-child, .stat-item:last-child { border-right: 0; }
.stat-value, .stat-item strong {
  font-family: 'Inter', sans-serif;
  font-size: 28px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1; display: block;
}
.stat-label, .stat-item span {
  margin-top: 8px; font-size: 12px; color: var(--ink-3);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.04em; display: block;
}
.stat-divider { display: none; }

/* ─── SECTIONS ────────────────────────────────────── */
section.block { padding: 96px 0; }
.section-head { margin-bottom: 48px; }
.section-head h2 { max-width: 720px; }
.section-head .desc {
  margin-top: 14px; max-width: 720px; color: var(--ink-3); font-size: 15.5px;
}

/* ─── HOW IT WORKS ────────────────────────────────── */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fffdf5 0%, #ffffff 60%);
  overflow: hidden;
}
.step {
  padding: 26px 26px 28px;
  position: relative;
  border-right: 1px solid var(--line);
}
.step:last-child { border-right: 0; }
.steps--animated .step {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.steps--animated .step.is-visible { opacity: 1; transform: translateY(0); }
.step-marker {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.step-marker .num {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--yellow); color: var(--ink);
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 1px 2px rgba(180,130,0,0.25);
  flex-shrink: 0;
}
.step-marker .kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.step-marker .arrow {
  margin-left: auto; width: 14px; height: 14px; color: var(--ink-4);
}
.step:last-child .step-marker .arrow { display: none; }
.step h3 { margin-bottom: 6px; font-size: 16px; }
.step p { color: var(--ink-3); font-size: 13.5px; line-height: 1.55; margin: 0; }

/* Hide old step structures */
.steps-card, .steps-grid, .steps-flow, .step-grid { display: none !important; }
.how-it-works { padding: 0; max-width: none; }
.how-it-works h2 { display: none; }

/* ─── BEFORE / AFTER ──────────────────────────────── */
.ba-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.ba-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 22px; position: relative;
  border-left-width: 1px !important;
}
.ba-card.before, .ba-card.ba-before {
  background: linear-gradient(180deg, #fdf2ef 0%, #fbeae6 100%) !important;
  border-color: #f0d3cc !important;
}
.ba-card.after, .ba-card.ba-after {
  background: linear-gradient(180deg, #effbf2 0%, #e6f6ec 100%) !important;
  border-color: #cfe9d7 !important;
}
.ba-label, .ba-card .label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); margin-bottom: 16px;
}
.ba-card .label .dot, .ba-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.ba-card.before .label .dot, .ba-before .ba-dot { background: #c47b6f; }
.ba-card.after .label .dot, .ba-after .ba-dot { background: #5b9c6c; }
.ba-text, .ba-card .body {
  color: var(--ink); font-size: 14.5px; line-height: 1.6; margin: 0;
}
.ba-tags, .ba-keywords {
  margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px;
}
.ba-tag, .ba-keyword {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 5px;
  background: var(--yellow-soft) !important; border: 1px solid var(--yellow-line) !important;
  color: #6e5402 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.01em; font-weight: 400;
}
.ba-note {
  margin-top: 24px; text-align: center; color: var(--ink-3);
  font-size: 13.5px; max-width: 640px; margin-left: auto; margin-right: auto;
}
.ba-arrow-center { display: none; }

/* ─── CV MOCKUP (before/after) ───────────────────── */
.cv-mock {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cv-mock--before {
  background: linear-gradient(180deg, #fdf2ef 0%, #fbeae6 100%);
  border-color: #f0d3cc;
}
.cv-mock--after {
  background: linear-gradient(180deg, #effbf2 0%, #e6f6ec 100%);
  border-color: #cfe9d7;
}
.cv-mock__label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
}
.cv-mock--before .cv-mock__label { color: #c47b6f; border-bottom: 1px solid #f0d3cc; }
.cv-mock--after  .cv-mock__label { color: #5b9c6c; border-bottom: 1px solid #cfe9d7; }
.cv-mock__label-dot {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 6px;
}
.cv-mock--before .cv-mock__label-dot { background: #c47b6f; }
.cv-mock--after  .cv-mock__label-dot { background: #5b9c6c; }
.cv-mock__badge {
  background: #22c55e; color: #fff;
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  text-transform: none; letter-spacing: 0;
}
.cv-mock__doc {
  background: #fff;
  margin: 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.07);
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.cv-mock__header {
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1.5px solid var(--ink);
}
.cv-mock__name { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.cv-mock__title { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.cv-mock__section-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-4); margin-bottom: 6px; margin-top: 12px;
}
.cv-mock__job-header {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px;
}
.cv-mock__company { font-size: 12px; font-weight: 600; color: var(--ink); }
.cv-mock__period  { font-size: 10px; color: var(--ink-4); font-family: 'JetBrains Mono', monospace; }
.cv-mock__role    { font-size: 11px; color: var(--ink-3); margin-bottom: 7px; }
.cv-mock__bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.cv-mock__bullets li {
  font-size: 11.5px; color: var(--ink-2); line-height: 1.45;
  padding-left: 11px; position: relative;
}
.cv-mock__bullets li::before { content: "·"; position: absolute; left: 0; color: var(--ink-4); }
.cv-mock--before .cv-mock__bullets li { color: var(--ink-3); }
.cv-mock__bullets mark {
  background: var(--yellow-soft); border: 1px solid var(--yellow-line);
  color: var(--ink); border-radius: 3px; padding: 0 2px;
  font-style: normal;
}
.cv-mock__skill-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cv-mock__skill-tags span {
  font-size: 10px; font-family: 'JetBrains Mono', monospace;
  padding: 2px 7px; border-radius: 4px;
  background: var(--tint); border: 1px solid var(--line-2); color: var(--ink-3);
}
.cv-mock__skill-tags span.added {
  background: var(--yellow-soft); border-color: var(--yellow-line); color: #6e5402;
}

/* ─── FEATURES ────────────────────────────────────── */
.feat-grid, .feature-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.feat, .feature-card {
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  border-radius: 0 !important;
  transition: none !important;
  box-shadow: none !important;
  display: flex; flex-direction: column; gap: 0;
}
.feat:hover, .feature-card:hover { box-shadow: none !important; border-color: var(--line) !important; }
.feat-icon, .feature-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink);
  margin-bottom: 18px; font-size: 14px; flex-shrink: 0;
}
.feat-icon svg { width: 14px; height: 14px; }
.feat h4, .feature-card h3 { margin-bottom: 6px; font-size: 15px; font-weight: 600; margin-top: 0; }
.feat p, .feature-card p { color: var(--ink-3); font-size: 14px; line-height: 1.55; margin: 0; }
.features-heading { display: none; }
.features { padding: 0; }

/* ─── CALLOUT / VALUE PROP ────────────────────────── */

/* ─── TESTIMONIALS ────────────────────────────────── */
.testi-grid, .testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.testi, .testimonial-card {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--surface) !important;
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  transition: none !important; box-shadow: none !important;
}
.testi:hover, .testimonial-card:hover { box-shadow: none !important; }
.stars, .testimonial-stars {
  display: inline-flex; gap: 2px; color: var(--yellow);
  font-size: 0; letter-spacing: 0;
}
.stars svg { width: 13px; height: 13px; }
/* Text star fallback */
.testimonial-stars { font-size: 0.9rem; }
.testi p, .testimonial-text {
  font-size: 14.5px; line-height: 1.6; color: var(--ink);
  flex: 1; font-style: normal !important; margin: 0;
}
.testi-author, .testimonial-author {
  display: flex; align-items: center; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--ink);
}
.avatar, .author-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--tint-2) !important; color: var(--ink-3) !important;
  display: grid; place-items: center;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  flex-shrink: 0;
}
.testi-author .who { font-size: 13px; color: var(--ink); font-weight: 500; }
.testi-author .role { font-size: 12px; color: var(--ink-3); }
.testimonials { padding: 0; max-width: none; text-align: left; }
.testimonials h2 { margin-bottom: 0; }

/* ─── PRICING ─────────────────────────────────────── */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  align-items: stretch; max-width: none;
}
.plan, .pricing-card {
  background: var(--surface);
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  padding: 26px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative; box-shadow: none !important;
}
.plan.featured, .pricing-card.popular {
  border-color: var(--ink) !important;
  box-shadow: 0 1px 0 rgba(20,19,15,0.04), 0 12px 36px -16px rgba(20,19,15,0.18) !important;
}
.plan-flag, .popular-badge {
  position: absolute; top: -10px; left: 24px;
  background: var(--ink) !important; color: #fff !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 9px; border-radius: 5px;
}
.plan-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 500; margin-bottom: 12px;
}
.price-container, .plan-price {
  display: flex; align-items: baseline; gap: 6px; margin: 0;
}
.price, .plan-price .amount {
  font-family: 'Inter', sans-serif;
  font-size: 38px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1; margin: 0;
}
.price-plus-vat, .vat { color: var(--ink-4); font-size: 13px; }
.per-resume-cost, .plan-rate { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.plan .cta, .plan .get-started-btn, .pricing-card .get-started-btn {
  width: 100%; justify-content: center;
}
.features-list, .plan ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.features-list li, .plan li {
  font-size: 13.5px; color: var(--ink-2);
  display: flex; gap: 10px; align-items: flex-start;
}
.features-list li svg, .plan li svg {
  flex-shrink: 0; width: 14px; height: 14px; color: var(--ink); margin-top: 3px;
}
.pricing { padding: 0; }

/* ─── FAQ ─────────────────────────────────────────── */
.faq-grid {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px;
  align-items: start;
}
.faq-aside h2 { max-width: 280px; }
.faq-aside .desc { margin-top: 14px; color: var(--ink-3); font-size: 14.5px; max-width: 320px; }
.faq-aside a.contact {
  display: inline-flex; margin-top: 18px;
  color: var(--ink); font-size: 14px;
  border-bottom: 1px solid var(--yellow); padding-bottom: 1px;
}
details.qa, details.faq-item {
  border-bottom: 1px solid var(--line); padding: 18px 0;
}
details.qa:first-of-type, details.faq-item:first-of-type {
  border-top: 1px solid var(--line);
}
details.qa summary, details.faq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; list-style: none; cursor: pointer;
  color: var(--ink); font-weight: 600; font-size: 15px;
  font-family: 'Inter', sans-serif; letter-spacing: -0.005em; padding: 0;
}
details.qa summary::-webkit-details-marker,
details.faq-item summary::-webkit-details-marker,
details.qa summary::marker,
details.faq-item summary::marker { display: none; }
details.qa summary h3, details.faq-item summary h3 {
  font-size: 15px; font-weight: 600; color: var(--ink);
  margin: 0; line-height: 1.4; letter-spacing: -0.005em;
}
details.qa[open] summary h3, details.faq-item[open] summary h3 { color: var(--ink); }
.faq-toggle, details.qa summary .plus {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1px solid var(--line-2); border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-3);
  transition: transform .2s, background .15s, color .15s;
  background: transparent; font-weight: 300; font-size: 1rem; line-height: 1;
}
details.qa[open] summary .plus,
details.faq-item[open] .faq-toggle {
  transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink);
}
details.qa summary .plus svg { width: 8px; height: 8px; }
details.qa p, details.faq-item p {
  margin-top: 12px; color: var(--ink-3); font-size: 14px; line-height: 1.6;
  max-width: 620px; padding: 0; animation: none;
}
details.qa p a { color: var(--ink); border-bottom: 1px solid var(--yellow); }
.faq { padding: 0; max-width: none; margin: 0; }
.faq h2 { display: none; }

/* ─── BOTTOM CTA ──────────────────────────────────── */
.bare-cta {
  text-align: center;
  padding: 96px 24px 112px;
  max-width: 640px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.bare-cta__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); margin: 0 0 20px;
}
.bare-cta__headline {
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
  color: var(--ink); margin: 0;
}
.bare-cta__buttons { margin-top: 36px; }
.cta-buttons {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.btn-outline-dark {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; font-size: 14.5px; border-radius: 9px;
  font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn-outline-dark:hover { background: var(--tint); border-color: var(--ink-3); color: var(--ink); }
.btn-outline-dark .oauth-logo { width: 14px; height: 14px; }

/* ─── FOOTER ──────────────────────────────────────── */
footer {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink); background: var(--bg);
  padding: 64px 0 48px;
  border-top: 1px solid var(--line);
  width: 100%; margin-top: 0; line-height: 1.6;
}
.footer-container {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
  max-width: 1120px; margin: 0 auto; padding: 0 32px;
}
.footer-brand { display: flex; flex-direction: column; gap: 0; }
.footer-brand .logo { margin-bottom: 12px; }
.footer-tagline { color: var(--ink-3); font-size: 13px; max-width: 240px; margin: 0; }
.footer-columns { display: contents; }
.footer-column { display: flex; flex-direction: column; gap: 10px; }
.footer-column h5 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 500; margin: 0 0 4px;
}
.footer-column ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-column a { color: var(--ink-2); font-size: 13.5px; }
.footer-column a:hover { color: var(--ink); }
.footer-bottom {
  margin-top: 56px; padding: 24px 32px 0;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1120px; margin-left: auto; margin-right: auto;
}
.footer-bottom p {
  font-size: 12px; color: var(--ink-4); margin: 0;
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em;
}

/* ─── MISC ────────────────────────────────────────── */
.highlight { color: var(--yellow); }
.caret {
  display: inline-block; border-right: 2px solid black; margin-left: 2px;
  animation: blink-caret 0.8s infinite step-end alternate;
}
@keyframes blink-caret { 50% { border-color: transparent; } }

main a:not(.btn):not(.get-started-btn):not(.rp-btn-primary):not(.rp-btn-secondary):not(.rp-btn-ghost):not(.rp-back):not(.rp-cta):not(.pw-cta):not(.ps-cta):not(.ps-check-btn):not(.lpc-primary-btn):not(.lpc-body-link):not(.btn-amber):not(.iqg-ghost-btn):not(.auth-oauth-btn):not(.tool-row):hover { color: var(--yellow) !important; }

/* ─── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--line); }
  .step:last-child { border-bottom: 0; }
  .ba-grid { grid-template-columns: 1fr; }
  .feat-grid, .feature-grid { grid-template-columns: 1fr 1fr; }
  .testi-grid, .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .navbar, .container { padding: 0 20px; }
  .hero { padding: 56px 0 32px; }
  section.block { padding: 64px 0; }
  .feat-grid, .feature-grid { grid-template-columns: 1fr; border-left: none; }
  .feat, .feature-card { border-left: 1px solid var(--line); }
  .testi-grid, .testimonials-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  /* .nav-links used to be display:none here, which hid the tools from the header on
     phones entirely. It's now a horizontally scrollable second row - see the
     "HEADER: FREE TOOLS DROPDOWN" block at the end of this file. */
  /* Tighter gaps and dropped standalone Contact Us (it lives in the footer).
     flex-wrap is NOT set here: the "HEADER: FREE TOOLS DROPDOWN" block below
     needs .navbar to wrap at this width too, and its later `flex-wrap: wrap`
     would win the cascade over any value declared here anyway. */
  .navbar { gap: 12px; padding: 0 16px; }
  .navbar-left { gap: 14px; min-width: 0; }
  .navbar-left .logo { min-width: 0; }
  .navbar-right { gap: 12px; flex-shrink: 0; }
  .nav-contact-standalone { display: none; }
  /* Hide the secondary credits badge on phones so it stops colliding with the
     logo; logo + My Resumes + Log Out fit at 390px once it's gone. */
  .nav-credits { display: none; }
  .bare-cta { padding: 48px 0 72px; }
  .bare-cta__headline { font-size: clamp(34px, 8vw, 52px); }
  .faq-grid { grid-template-columns: 1fr; }
  .footer-container { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Tablet / narrow desktop: the long signed-in email + credits badge make the
   navbar-right group overflow and collide with the logo (Bootstrap shows the
   email at >=768 via d-md-inline). Hide the two space hogs here; the higher
   specificity + !important beats Bootstrap's .d-md-inline display rule. */
@media (max-width: 991px) {
  .navbar-right .nav-user-email { display: none !important; }
  .navbar-right .nav-credits { display: none; }
}

/* ─── HEADER: FREE TOOLS DROPDOWN ─────────────────────────────────────────────
   Lives here (not application.css) because this file reaches all three layouts:
   resume_builder loads it directly, application/ats_public pull it in through
   application.css's `*= require_tree .`.

   Built on <details>/<summary> so it needs no JS, responds to touch, and is keyboard
   accessible out of the box. The nav sits in <header>, outside <main>, so the
   `main a:hover` gold rule near the top of this file cannot reach these links. */
.nav-dd { position: relative; }
.nav-dd__trigger {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink-3); font-size: 14px; cursor: pointer;
  list-style: none; white-space: nowrap; transition: color .15s;
}
.nav-dd__trigger::-webkit-details-marker,
.nav-dd__trigger::marker { display: none; content: ""; }
.nav-dd__trigger:hover,
.nav-dd[open] .nav-dd__trigger { color: var(--ink); }
.nav-dd__trigger:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }
.nav-dd__caret { width: 9px; height: 9px; transition: transform .18s; }
.nav-dd[open] .nav-dd__caret { transform: rotate(180deg); }

/* `display` MUST stay none until [open]. A <details> hides its non-summary content via
   UA styles, but setting `display: flex` on the child overrides that and leaves the menu
   permanently on screen. So gate the display on [open] rather than styling the child
   unconditionally. */
.nav-dd__menu {
  display: none;
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  z-index: 60; min-width: 292px;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 6px;
  box-shadow: 0 12px 32px rgba(20, 19, 15, .10), 0 2px 6px rgba(20, 19, 15, .05);
}
.nav-dd[open] .nav-dd__menu { display: flex; }
/* Beat `.nav-links a` (0,1,1) with a compound selector (0,2,0) - no !important. */
.nav-links .nav-dd__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 10px; border-radius: 7px;
  color: var(--ink); font-size: 14px; transition: background .12s;
}
.nav-links .nav-dd__item:hover { background: var(--tint); color: var(--ink); }
.nav-links .nav-dd__item:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
.nav-dd__item-label { font-weight: 500; line-height: 1.3; }
.nav-dd__item-note { color: var(--ink-4); font-size: 12px; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .nav-dd__caret { transition: none; }
}

/* Narrow header: the nav used to be display:none below 640px, which made the tools
   unreachable from the header on phones entirely. Instead it becomes a second row
   under the logo/auth row, separated by the same hairline the header already ends
   with, and scrolls horizontally if it must.

   Breakpoint is 800px, not 640: one row needs ~790px when signed in (logo + 4 nav
   items + "My Resumes" + "Get Started"), so the 640-790px band used to squish and
   overflow. Two rows engage before the squeeze can happen. */
@media (max-width: 800px) {
  .navbar { flex-wrap: wrap; height: auto; padding-top: 10px; }
  .nav-links {
    display: flex;
    order: 3; width: 100%;
    gap: 20px;
    margin-top: 9px;
    border-top: 1px solid var(--line);
    padding: 10px 0 11px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links > a, .nav-dd__trigger { white-space: nowrap; font-size: 13.5px; }
  .nav-dd__menu {
    position: fixed; left: 8px; right: 8px; top: auto; transform: none;
    min-width: 0; max-height: 60vh; overflow-y: auto;
  }
}

/* ─── DEFINITION COLUMNS (What is resume tailoring) ──────────────────────────
   Follows the page's own section grammar: .section-head carries the heading and the
   definitional lead (first sentence = the direct answer, for extraction), and the three
   supporting paragraphs sit below as unbordered columns. No borders on purpose - the
   bordered 3-col .steps grid is directly beneath this section. Mono kickers reuse the
   stats-label voice from the strip directly above. */
.def-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.def-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-4); margin-bottom: 10px;
}
.def-text { color: var(--ink-3); font-size: 14.5px; line-height: 1.66; }
/* In-content links need explicit styling: the global `a { color: inherit;
   text-decoration: none }` would otherwise render them invisible in prose. */
.def-text a { color: var(--ink); border-bottom: 1px solid var(--yellow); }
.def-text a:hover { background: var(--yellow-soft); }
.section-head .desc strong { color: var(--ink); font-weight: 600; }

/* ─── NOTHING INVENTED ────────────────────────────────────────────────────────
   Two panels under a .section-head, mirroring how the two documents sit side by side
   in .ba-grid: the three refusal rules on the left, the one refusal artifact on the
   right. Colour logic: `.cv-mock__bullets mark` uses --yellow-soft/--yellow-line to
   mean "tailoring ADDED this"; --red-soft/--red-ink (defined in the token block,
   previously unused) mean the opposite - "it REFUSES to add this". Red appears
   nowhere else as decoration. */
.honest-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: start; }
.nevers { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.nevers li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; }
.nevers__mark {
  width: 18px; height: 18px; border-radius: 50%; margin-top: 2px;
  background: var(--red-soft); color: var(--red-ink);
  display: grid; place-items: center;
}
.nevers__mark svg { width: 8px; height: 8px; }
.nevers__text { color: var(--ink-3); font-size: 15px; line-height: 1.6; }
.nevers__text strong { color: var(--ink); font-weight: 600; }

.refusal {
  margin: 0; padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line); border-left: 2px solid var(--red-ink);
  border-radius: var(--radius);
}
.refusal__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-4);
}
.refusal__req {
  margin-top: 7px;
  font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
}
.refusal__req-note { color: var(--ink-4); font-weight: 400; font-size: 14px; }
.refusal__verdict {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-2);
  display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start;
}
.refusal__x {
  width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  background: var(--red-soft); color: var(--red-ink);
  display: grid; place-items: center;
}
.refusal__x svg { width: 10px; height: 10px; }
.refusal__verdict p { color: var(--ink-3); font-size: 14.5px; line-height: 1.6; }

/* ─── TOOL INDEX ──────────────────────────────────────────────────────────────
   Rows, not cards: this is a list people scan for a name, and rows put the name and
   what it does on one line. It also spares the page a fourth bordered card grid.
   No 01/02/03 markers - these tools aren't a sequence, and numbering them would imply
   an order that doesn't exist. (`.steps` above IS a sequence and numbers itself.) */
.tool-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tool-index li { border-bottom: 1px solid var(--line); }
.tool-row {
  display: grid;
  grid-template-columns: minmax(190px, 250px) 1fr auto 16px;
  align-items: center; gap: 24px;
  padding: 17px 12px 17px 4px;
  transition: background .14s;
}
.tool-row:hover { background: var(--tint); }
.tool-row:hover .tool-row__arrow { transform: translateX(3px); color: var(--ink); }
.tool-row:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; border-radius: 6px; }
.tool-row__name { font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.tool-row__note { color: var(--ink-3); font-size: 14px; }
.tool-row__tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-4); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 3px 8px; white-space: nowrap;
}
/* Most rows carry no tag. Keep the (empty) element in the grid so every arrow stays on
   the same axis, but drop the chrome so it doesn't render as an empty pill. */
.tool-row__tag:empty { border: 0; padding: 0; }
.tool-row__arrow { width: 16px; height: 16px; color: var(--ink-4); transition: transform .16s, color .14s; }

@media (max-width: 980px) {
  .def-grid { grid-template-columns: 1fr; gap: 26px; }
  .honest-grid { grid-template-columns: 1fr; gap: 28px; }
  .tool-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name tag" "note note";
    gap: 5px 12px; padding: 15px 4px;
  }
  .tool-row__name { grid-area: name; }
  .tool-row__tag  { grid-area: tag; }
  .tool-row__note { grid-area: note; }
  .tool-row__arrow { display: none; }
}
@media (max-width: 640px) {
  .refusal { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-row, .tool-row__arrow { transition: none; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 :root {
  --primary-color: #000;
  --secondary-color: #666;
  --accent-color: #E8A020;
  --background-color: #fff;
}

a {
  color: black;
}

/* Resilience: Bootstrap's Reboot ships `[hidden] { display: none !important }`,
   which we rely on to hide `display:flex` elements (e.g. the resume "Tailoring…"
   spinner) via the `hidden` attribute. If the Bootstrap CDN fails to load — seen
   on iPad Safari behind Private Relay / content blockers — only the weaker UA
   `[hidden]{display:none}` remains and loses to author `display` rules, leaving
   those elements stuck visible. Mirror the rule here so it always applies. */
[hidden] { display: none !important; }

.navbar-logo {
  max-width: 45px;
}

.nav-user-email {
  color: var(--ink-3, #6b6862);
  font-size: 13px;
  white-space: nowrap;
}

.nav-credits {
  color: var(--ink-2, #3a3833);
  font-size: 13px;
  white-space: nowrap;
}

.nav-credits strong { font-weight: 600; }

.nav-inline-form {
  display: inline-flex;
  margin: 0;
}

/* Other styles */

.file-upload-input {
  display: none;
}

.action-button {
  padding: 14px 40px;
  width: 100%;
  border-radius: 8px;
  transition: all 0.2s;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.action-button-light {
  width: 100%;
  padding: 14px 30px;
  border: solid 1px #e0e0e0;
  background-color: #f5f5f5;
  color: #333;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
}

.action-button-light:hover {
  background-color: #e9e9e9;
}

.upload-button-text, .continue-button, .buy-button {
  font-size: 15px;
  align-items: center;
  gap: 8px;
}

.buy-button {
  width: 250px;
}

.icon-green-checkmark {
  max-width: 10%;
}

.file-upload-success {
  border: none;
  background-color: #f8f9fa;
  color: #28a745;
  padding: 10px 15px;
  border-radius: 8px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Resume form specific styles */
#resume-file-matching-form {
  padding: 30px 0;
}

#resume-file-matching-form h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
}

#resume-file-matching-form p {
  color: #666;
  margin-bottom: 25px;
  font-size: 15px;
}

@media (min-width: 767px) {
  .job-description-card {
    margin-top: 70px;
  }
}

#resume-file-matching-form label {
  font-weight: 500;
  color: #333;
  margin-bottom: 5px; /* Reduced spacing */
  display: inline-block;
}

#resume-file-matching-form .text-danger {
  margin-left: 3px;
  display: inline-block;
}

/* Upload button improvements */
#upload-button-container {
  background-color: #000;
  color: #fff !important; /* Force white text */
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

#upload-button-text {
  color: #fff !important; /* Ensure text is white */
}

#upload-button-container:hover {
  background-color: #333;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  margin-left: 8px;
}

/* utils */
.checkout-card {
  width: 19rem;
  height: 23rem;
  margin-bottom: 4rem;
}

.checkout-card-img-top {
  background-color: #eee;
}

.checkout-item-image {
  padding: 1rem;
  max-width: 10rem;
}

.checkout-cards-row {

}


.plan-card_title {
  font-weight: bold;
}

.get-started-button {
  padding: 10px 40px;
  width: 100%;
  height: 3rem;
  font-weight: 600;
  font-size: 1rem;
  background-color: white;
  border-radius: 10px;

  -webkit-box-shadow: 1px 6px 22px -21px rgba(66, 68, 90, 0.87);
  -moz-box-shadow: 1px 6px 22px -21px rgba(66, 68, 90, 0.87);
  box-shadow: 1px 6px 22px -21px rgba(66, 68, 90, 0.87);
}

.plan-card_items {
  padding-top: 0.8rem;
  padding-left: 1rem;
  font-size: 0.9rem;
}

.contact-us-button {
  min-width: 12rem;
  max-width: 15rem;
}

.question-button {
  min-width: 10rem;
  max-width: 12em;
}

.bg-grey {
  background-color: #F6F4F3;
}

.home-section {
  min-height: 15rem;
  padding-top: 8rem
}

.home-top-section {
  min-height: 20rem;
  padding-top: 10rem;

  margin-top: 10rem;
  margin-bottom: 10rem;
}

.btn-checkbox-label {
  width: 100%;
  cursor: pointer;
}

.form-check-container {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
}

.form-check-input:checked {
  background-color: black;
  border-color: black;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
}

main.container-fluid {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.card {
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
}

.card-title {
  font-size: 1.5em;
  font-weight: bold;
}

.form-control {
  border-radius: 8px;
  margin-bottom: 10px; /* Reduced from 15px */
  padding: 10px 15px; /* Reduced from 12px */
  border: 1px solid #e0e0e0;
  font-size: 15px;
}

.form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1);
  border-color: #999;
}

.nav-item:hover > .nav-link {
  color: #222;
}

/* Resume Builder Form Styles */
.nav-tabs .nav-link {
  color: #666;
  border: none;
  padding: 10px 20px;
  font-weight: 500;
}

.nav-tabs .nav-link.active {
  color: #000;
  background-color: transparent;
  border-bottom: 2px solid #000;
}

.nav-tabs {
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 20px;
}

textarea.form-control.text-area-long {
  min-height: 180px;
}

textarea.form-control.text-area-short {
  min-height: 100px;
}

/* Specifically for job description textarea */
#resume-file-matching_job_description {
  min-height: 180px;
}

.btn-secondary {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
}

.btn-secondary:hover {
  background-color: #e9e9e9;
  color: #222;
}

.remove-section {
  color: #aaa;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
}

.remove-section:hover {
  /* Darker grey #trustme */
  filter: brightness(0) saturate(100%) invert(73%) sepia(0%) saturate(2641%) hue-rotate(142deg) brightness(96%) contrast(80%);
}

.btn-dark {
  background-color: #E8A020;
  color: #111;
  border: none;
  border-radius: 8px;
  padding: 14px 30px;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-dark:hover {
  background-color: #d4901a;
  color: #111;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-sm.btn-dark {
  background-color: #000;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 15px;
}

.btn-sm.btn-dark:hover {
  background-color: #333;
  color: #fff;
}

.btn-outline-dark {
  background-color: #fff;
  border-radius: 8px;
  padding: 14px 30px;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-outline-dark:hover {
  background-color: #f0f0f0;
  color: black;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.pdf-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  bottom: 40px;
}

/* Submit button specific styling */
#resume-file-matching-form input[type="submit"] {
  min-width: 200px;
  padding: 14px 40px;
  position: sticky;
  bottom: 20px;
  float: right;
}

/* Container spacing for form sections */
#resume-file-matching-form .container {
  margin-bottom: 70px;
  position: relative;
}

/* Fix for floating submit button container */
.row.justify-content-end {
  clear: both;
  position: relative;
  padding-top: 20px;
}

/* Group sections for work experience and education */
.group-section {
  position: relative;
}

.group-section .card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  border: 1px solid #eee;
}

.group-section .card-body {
  padding: 18px 20px;
  padding-top: 12px; /* Extra padding on top to accommodate the X button */
}

/* Enhanced form field styles */
.form-label {
  font-weight: 500;
  margin-bottom: 10px;
  color: #333;
  font-size: 15px;
}

/* Improve card sections */
.card-body {
  padding: 18px 20px; /* Reduced from 25px */
}

/* Work experience and education sections */
#new-resume-section h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

#drop_zone {
  width: 100%;
  border-radius: 8px;
  border: 1px dashed #ccc;
  font-weight: 500;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 150px;
  transition: all 0.2s;
}

#drop_zone.disabled {
  background-color: #f5f5f5;
  border: 1px dashed #e0e0e0;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
}

.preview-back-arrow {
  text-decoration: none;
  color: #aaa;
  font-size: 28px;
}

.preview-back-arrow:hover {
  color: #636363;
}

.log-out-button {
  text-decoration: none;
  color: #aaa;
  font-size: 14px;
}

.log-out-button:hover {
  color: #636363;
}

/* Make form responsive */
@media (max-width: 992px) {
  .container {
    max-width: 100%;
    padding: 0 20px;
  }

  .col-md-6 {
    width: 100%;
    margin-bottom: 30px;
  }

  .btn-dark {
    width: 100%;
  }

  .btn-outline-dark {
    width: 100%;
    margin-top: 10px;
  }

  .btn-sm.btn-dark {
    width: auto;
  }

  #resume-file-matching-form input[type="submit"] {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .container {
    padding: 0 15px;
  }

  .card-body {
    padding: 20px 15px;
  }

  #resume-file-matching-form h2 {
    font-size: 20px;
  }

  #new-resume-section h3 {
    font-size: 18px;
  }

  /* Ensure the button is fully sticky on mobile */
  #resume-file-matching-form input[type="submit"] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: calc(100% - 40px);
    margin: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }

  /* Add bottom padding to container to prevent button overlap */
  #resume-file-matching-form .container {
    padding-bottom: 80px;
  }

  .join-with-oauth-btn {
    max-width: unset;
  }
}

.ats-resume-template-banner {
  padding: 15px;
  margin-bottom: 1rem;
}

.btn-linkedin {
  background-color: #0a66c2;
  color: white;
}

.join-with-oauth-btn {
    background-color: white;
    text-decoration: none;
    border: 1px solid #ccc;
}

.join-with-oauth-btn:hover {
    color: #000;
}

.oauth-logo {
    width: 18px;
    height: 18px;
}

.btn:hover {
  color: #ccc;
}

/* .btn:hover above washes every .btn element's text to a pale grey on hover,
   including .btn-primary (navbar "Get Started", homepage CTAs) — clearly
   unintentional there, since it makes the button's own text nearly
   unreadable against its amber background. Restore the correct text color
   for that specific variant without touching the bare .btn rule above. */
.btn-primary:hover {
  color: var(--yellow-ink, #1a1502);
}

  .plus-vat {
    font-size: 0.4em;
    color: #aaa;
    font-weight: 400;
  }

  /* ApplyMate Upgrade Banner styles live in applymate_upgrade_banner.css
     (auto-included here via require_tree, and explicitly required by
     resume_builder.css so resume_builder-layout pages get them too). */

  /* Bootstrap legacy button aliases — make blog/free-tool buttons match the design system */
  .btn-warning,
  .btn-light.applymate-upgrade-banner__primary {
    background: var(--yellow, #f5b700) !important;
    color: var(--yellow-ink, #1a1502) !important;
    border-color: color-mix(in srgb, var(--yellow, #f5b700) 80%, #000 6%) !important;
  }
  .btn-warning:hover {
    background: #ffc524 !important;
    color: var(--yellow-ink, #1a1502) !important;
  }
  .btn-outline-dark,
  .btn-outline-secondary {
    background: transparent;
    color: var(--ink, #14130f);
    border: 1px solid var(--line-2, #e2e2e2);
  }
  .btn-outline-dark:hover,
  .btn-outline-secondary:hover {
    background: var(--tint, #f6f6f6);
    color: var(--ink, #14130f);
    border-color: var(--ink-3, #6b6862);
  }

    /* Breathing room between the site navbar and the first element of an
       article (H1 or breadcrumb header, which varies per article). */
    main .col-lg-8.offset-lg-2 > :first-child {
      margin-top: 2.25rem;
    }

    /* Blog Article Header */
    .blog-article-header {
      padding: 0.5rem 0;
    }

    .blog-article-header__meta {
      font-size: 0.8rem;
      line-height: 1.5;
    }

    .blog-article-header__read-time {
      font-weight: 500;
    }

    /* Blog Breadcrumb */
    .blog-breadcrumb .breadcrumb {
      background: transparent;
      padding: 0;
      margin: 0;
    }

    .blog-breadcrumb .breadcrumb-item a {
      color: #6c757d;
      text-decoration: none;
    }

    .blog-breadcrumb .breadcrumb-item a:hover {
      color: #212529;
      text-decoration: underline;
    }

    .blog-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
      content: ">";
      color: #6c757d;
    }

   .loading-container {
    text-align: center;
    padding: 20px;
  }

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Blurred CV Background for Credits Checkout */
.checkout-background {
  position: absolute;
  top: 240px;
  left: 0;
  right: 0;
  min-height: 100vh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.checkout-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.7) 100%);
  z-index: 1;
}

.checkout-hero-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 40px 30px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.checkout-hero-card h1 {
  font-size: 2.2rem;
  color: #000;
}

.checkout-hero-subtext {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.6;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .checkout-hero-card {
    padding: 30px 20px;
  }

  .checkout-hero-card h1 {
    font-size: 1.75rem;
  }

  .checkout-hero-subtext {
    font-size: 1rem;
  }
}

.blurred-cv-container {
  width: 600px;
  max-width: 90%;
  background: white;
  padding: 40px;
  border: 3px solid #333;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  filter: blur(3px);
  font-family: 'Times New Roman', serif;
  margin: 100px auto;
  position: relative;
  z-index: 0;
  opacity: 0.6;
}

.blurred-cv-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #333;
}

.blurred-cv-name {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}

.blurred-cv-contact {
  font-size: 12px;
  color: #666;
}

.blurred-cv-section {
  margin: 20px 0;
}

.blurred-cv-section-title {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
  border-bottom: 1px solid #333;
  padding-bottom: 5px;
}

.blurred-cv-item {
  margin-bottom: 15px;
}

.blurred-cv-item-title {
  font-weight: bold;
  font-size: 14px;
}

.blurred-cv-item-subtitle {
  font-style: italic;
  font-size: 13px;
  color: #666;
}

.blurred-cv-text {
  font-size: 12px;
  line-height: 1.6;
  color: #444;
}

@media (max-width: 767px) {
  .blurred-cv-container {
    width: 500px;
    padding: 30px;
  }
}

/* Auth pages */
.auth-page {
  display: flex;
  justify-content: center;
  padding: 20px 16px 60px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
}

.auth-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 24px;
  text-align: center;
  line-height: 1.3;
}

/* Auth OAuth buttons: fully self-contained (not reusing .btn/.btn-outline-dark/
   .join-with-oauth-btn) so they can't be clobbered by the several conflicting
   .btn-outline-dark / .btn:hover rules elsewhere in this compiled bundle — the
   homepage's OAuth buttons dodge that because they're on a page that compiles
   resume_builder.css standalone. Values mirror what the homepage actually
   renders (resting + hover), so this looks identical everywhere. */
.auth-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 8px;
  background: #fff;
  color: var(--ink, #14130f);
  border: 1px solid var(--line-2, #e2e2e2);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.auth-oauth-btn:hover {
  background: var(--tint, #f6f6f6);
  border-color: var(--ink-3, #6b6862);
  color: var(--ink, #14130f);
}

/* Deliberate focus ring instead of each browser's inconsistent native
   default (this class isn't a Bootstrap .btn, so it no longer inherits
   Bootstrap's focus glow). */
.auth-oauth-btn:focus-visible {
  outline: 2px solid var(--ink-3, #6b6862);
  outline-offset: 2px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: #aaa;
  font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e0e0e0;
}

.auth-field {
  margin-bottom: 16px;
}

.auth-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-3, #555);
  margin-bottom: 4px;
}

.auth-input {
  padding: 10px 14px;
  font-size: 0.95rem;
  border-radius: 8px;
  width: 100%;
}

.auth-input.is-invalid {
  border-color: #dc3545;
}

.auth-input.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

.auth-field-error {
  color: #dc3545;
  font-size: 0.78rem;
  margin: 5px 0 0;
}

.auth-hint {
  color: #888;
  font-size: 0.78rem;
  margin: 5px 0 0;
}

.auth-password-field {
  position: relative;
}

.auth-password-field .auth-input {
  padding-right: 44px;
}

.auth-password-toggle {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 8px 10px;
  color: #888;
  cursor: pointer;
  line-height: 0;
}

.auth-password-toggle:hover {
  color: #333;
}

/* Auth submit button: fully self-contained (not reusing .btn/.btn-primary) for
   the same reason as .auth-oauth-btn above — a stray .btn:hover{color:#ccc}
   rule elsewhere in this compiled bundle would otherwise wash out the hover
   text. Values mirror the homepage's primary CTA (resting + hover). */
.auth-submit-btn {
  width: 100%;
  padding: 11px;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 4px;
  border-radius: 8px;
  background: var(--yellow, #f5b700);
  color: var(--yellow-ink, #1a1502);
  border: 1px solid transparent;
  transition: background .15s;
}

.auth-submit-btn:hover {
  background: #ffc524;
  color: var(--yellow-ink, #1a1502);
}

.auth-submit-btn:focus-visible {
  outline: 2px solid var(--yellow-ink, #1a1502);
  outline-offset: 2px;
}

.auth-footer-links {
  text-align: center;
  margin-top: 20px;
  font-size: 0.875rem;
  color: #555;
}

.auth-footer-links a {
  color: #333;
}

.auth-terms {
  text-align: center;
  font-size: 0.75rem;
  color: #999;
  margin-top: 16px;
}

.auth-terms a {
  color: #888;
}

.resume-ready-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #fff8ee 0%, #fff3e0 100%);
  border: 1.5px solid #E8A020;
  border-radius: 12px;
  padding: 18px 24px;
  margin: 0 auto 28px;
  max-width: 480px;
}

.resume-ready-banner__icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.resume-ready-banner__title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.resume-ready-banner__subtitle {
  font-size: 0.875rem;
  color: #555;
}


/* Flash messages */
.am-flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 760px;
  margin: 16px auto 0;
  padding: 14px 18px;
  border-radius: 12px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.am-flash--notice {
  background: #EDFAF3;
  border: 1px solid #B8E6D0;
  color: #1A5C38;
}
.am-flash--error {
  background: #FFF8E1;
  border: 1px solid #F1E2A6;
  color: #6B4A00;
}
.am-flash button {
  background: none;
  border: none;
  cursor: pointer;
  color: currentColor;
  opacity: 0.5;
  padding: 2px;
  flex-shrink: 0;
  line-height: 1;
}
.am-flash button:hover { opacity: 1; }

/* ============================================================
   Blog & content article readability
   Scoped to the static_pages controller (body.static_pages, added in the
   application layout) and the article body column, so the same Bootstrap
   column on tool pages (e.g. ats_checker) is unaffected. The direct-child
   (>) selectors target only article body copy, leaving the upgrade banner,
   tables, breadcrumb, and nested content alone.
   ============================================================ */
body.static_pages main .col-lg-8 > p,
body.static_pages main .col-lg-8 > ul > li,
body.static_pages main .col-lg-8 > ol > li {
  line-height: 1.75;
}
body.static_pages main .col-lg-8 > p {
  margin-bottom: 1.3rem;
}
body.static_pages main .col-lg-8 > ul > li,
body.static_pages main .col-lg-8 > ol > li {
  margin-bottom: 0.55rem;
}

/* Article cover image: always full-width with auto height, independent of any
   page-scoped class (some articles only define .airb-feature-img locally). */
body.static_pages .col-lg-8 img[class*="feature-img"] {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Responsive comparison tables: on phones, stack each row into a labeled card
   instead of forcing horizontal scroll (which hides the right-hand columns).
   Labels come from each cell's data-label, populated from the column header by
   the inline script in the layout. Scoped to article tables under static_pages
   so tool pages that reuse .col-lg-8 are untouched. Covers both the custom
   "*-table" article tables and the Bootstrap ".table" comparison tables (which
   otherwise only get Bootstrap's .table-responsive sideways scroll on mobile). */
@media (max-width: 600px) {
  body.static_pages .col-lg-8 [class*="-table-scroll"],
  body.static_pages .col-lg-8 .table-responsive {
    overflow-x: visible;
    border: none;
    border-radius: 0;
  }
  body.static_pages .col-lg-8 table[class*="-table"],
  body.static_pages .col-lg-8 table.table {
    min-width: 0;
    width: 100%;
    font-size: 14px;
  }
  body.static_pages .col-lg-8 table[class*="-table"] thead,
  body.static_pages .col-lg-8 table.table thead {
    display: none;
  }
  body.static_pages .col-lg-8 table[class*="-table"] tr,
  body.static_pages .col-lg-8 table.table tr {
    display: block;
    border: 1px solid #e7e5dd;
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
  }
  body.static_pages .col-lg-8 table[class*="-table"] td,
  body.static_pages .col-lg-8 table.table td,
  body.static_pages .col-lg-8 table.table tbody th {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid #f1efe9;
    text-align: right;
    background: transparent;
  }
  body.static_pages .col-lg-8 table[class*="-table"] tr td:last-child,
  body.static_pages .col-lg-8 table.table tr td:last-child {
    border-bottom: none;
  }
  body.static_pages .col-lg-8 table[class*="-table"] td::before,
  body.static_pages .col-lg-8 table.table td[data-label]::before,
  body.static_pages .col-lg-8 table.table tbody th[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6b6862;
    text-align: left;
    flex: 0 0 44%;
  }
  /* Card title = the row's label cell, shown full-width and bold with no prefix.
     Custom "*-table" tables always use their first cell as the title. Bootstrap
     ".table" tables only do so for a genuine row-label column - detected as a cell
     whose column header was blank (e.g. the empty top-left corner of a comparison
     table), so it has no data-label. Every real column keeps its header label,
     which is what a "Bad vs Good" table needs (both sides must stay labeled). */
  body.static_pages .col-lg-8 table[class*="-table"] td:first-child,
  body.static_pages .col-lg-8 table.table tbody td:not([data-label]),
  body.static_pages .col-lg-8 table.table tbody th:not([data-label]) {
    display: block;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    background: #faf9f6;
    padding: 12px 14px;
  }
  body.static_pages .col-lg-8 table[class*="-table"] td:first-child::before {
    content: none;
  }
}