/* 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; }
}