/* 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(.btn-amber):not(.iqg-ghost-btn):not(.auth-oauth-btn):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 { display: none; }
  /* Keep the header on a single tidy row on phones: no wrap, tighter gaps,
     and drop the standalone Contact Us (it lives in the footer). */
  .navbar { flex-wrap: nowrap; 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; }
}
/*
 * 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;
  }
}