/* =========================================================
   STANDOUT — SEO Tool Landing Pages
   Built on top of tokens.css. Page-specific styles only.
   ========================================================= */

/* ---------- Top nav (matches SPA <Header /> from Brand.tsx) ----------
   .nav is the full-bleed sticky bar; .nav-inner is the max-width content
   container so the brand and CTA align with .shell-padded page content
   on wide viewports.
*/
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-divider);
  background: color-mix(in oklab, var(--color-bg) 80%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 16px clamp(16px, 4vw, 48px);
  gap: clamp(12px, 2vw, 24px);
}
/* Match the homepage <Header> wordmark: Instrument Serif at 1.5rem in an
   inline-flex so the 28px monogram and the "Standout" wordmark sit together
   the same way they do on the marketing site. */
.nav .brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.nav .brand img { align-self: center; }
.nav-links {
  display: flex;
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.nav-links a { color: inherit; }
.nav-links a:hover { color: var(--color-text); }
.nav-right { display: flex; gap: var(--s-3); align-items: center; }

@media (max-width: 760px) {
  .nav-links { display: none; }
}

/* ---------- Page shell ---------- */
.shell {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin: var(--s-7) 0 var(--s-3);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--text-faint); }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-10);
  padding: var(--s-7) 0 var(--s-10);
  align-items: start;
}
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: var(--s-8); padding: var(--s-6) 0 var(--s-8); }
}
/* Top-align variant: keeps the left column anchored so it doesn't visually
   shift when the right-side tool panel grows (e.g. after generating output). */
.hero--top { align-items: start; }
/* Top-align variant: for heroes whose tool-shell grows (e.g. the job tracker
   board), so the left column stays anchored and doesn't re-center as rows are
   added. The aside is pinned to the top of the grid row. */
/* Helper caption inside the tool-shell, sitting above the sample rows. */
.tool-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-muted);
}
.tool-note svg { flex: none; margin-top: 1px; color: var(--text-faint); }

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.eyebrow-pill .dot {
  width: 7px; height: 7px; border-radius: 99px; background: var(--lime);
  box-shadow: 0 0 0 3px rgba(196, 215, 122, 0.25);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: var(--s-5) 0 var(--s-5);
}
.hero h1 em { font-style: italic; font-weight: 400; }

.hero .lede {
  font-size: var(--text-lg);
  color: var(--text);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 0 var(--s-7);
}

.hero-ctas { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.hero-ctas .btn { padding: 14px 26px; font-size: var(--text-md); }
.hero-ctas .link {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--hairline-2);
}
.hero-ctas .link:hover { color: var(--ink); text-decoration-color: var(--ink); }

.trust-row {
  margin-top: var(--s-8);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.06em;
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  align-items: center;
}
.trust-row .uni { font-family: var(--font-display); font-style: italic; color: var(--ink); }

/* ---------- Tool UI shell (the interactive-looking mockup) ---------- */
.tool-shell {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--s-6);
  position: relative;
  overflow: hidden;
}
.tool-shell::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-soft) 0%, var(--olive) 50%, var(--lime) 100%);
}
.tool-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--s-5);
}
.tool-head .title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tool-head .badge {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Resume drop zone */
.dropzone {
  border: 1.5px dashed var(--hairline-2);
  border-radius: var(--r-md);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  background: var(--surface);
  transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
  cursor: pointer;
}
.dropzone:hover { border-color: var(--green); background: var(--bg-soft); }
.dropzone .icon {
  width: 36px; height: 36px;
  border-radius: 99px;
  background: var(--bg-soft);
  margin: 0 auto var(--s-3);
  display: grid; place-items: center;
  color: var(--ink);
}
.dropzone { display: flex; flex-direction: column; align-items: center; }
.dropzone .label {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}
.dropzone .hint {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 4px;
}

/* Progress checklist */
.progress-list {
  margin-top: var(--s-5);
  list-style: none;
  padding: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.progress-list li {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--text-sm);
  color: var(--text);
}
.progress-list .check {
  flex: none;
  width: 18px; height: 18px;
  border-radius: 99px;
  background: var(--green);
  color: var(--text-on-dark);
  display: grid; place-items: center;
  font-size: 11px;
}
.progress-list .pending .check {
  background: transparent;
  border: 1.5px dashed var(--hairline-2);
  color: var(--text-faint);
}

/* Match card */
.match-card {
  margin-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-5);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-4);
  align-items: center;
}
.match-card .score {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.match-card .score small {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}
.match-card .role-line {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--ink);
}
.match-card .meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}
.match-card .chip {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 99px;
  padding: 3px 9px;
}
.match-card .pay {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
}

.btn-tool {
  margin-top: var(--s-4);
  width: 100%;
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  background: var(--green);
  color: var(--text-on-dark);
  font-size: var(--text-md);
  font-weight: 500;
}
.btn-tool:hover { background: var(--green-hover); }

/* ---------- Shared tool generator UI (form + output) ----------
   Added for the SEO tool program. Lives inside .tool-shell on the hero.
   Token-driven so it inherits light/dark automatically. Reuse these
   classes for every tool's form/output — do not create parallel ones. */
.tool-form { display: flex; flex-direction: column; gap: var(--s-4); }
.tool-field { display: flex; flex-direction: column; gap: 6px; }
.tool-field label {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.tool-field input,
.tool-field select,
.tool-field textarea {
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-md);
  padding: 10px 12px;
  width: 100%;
}
.tool-field textarea { resize: vertical; min-height: 72px; }
.tool-field input:focus,
.tool-field select:focus,
.tool-field textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: var(--green);
}
.tool-actions { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }

.tool-error {
  font-size: var(--text-sm);
  color: var(--text-warn);
  background: color-mix(in oklab, var(--text-warn) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--text-warn) 30%, transparent);
  border-radius: var(--r-md);
  padding: 10px 12px;
}

.tool-output {
  margin-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-4);
}
.tool-output pre {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin: 0;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.tool-output-actions { display: flex; gap: var(--s-3); margin-top: var(--s-3); flex-wrap: wrap; }

/* Disclosure line under apply/generate CTAs. */
.tool-legal { font-size: var(--text-xs); color: var(--text-faint); margin: 6px 0 0; }

/* ---------- Resume document viewer (mirrors the in-product ResumePreview) ----
   The generated resume and the static examples render as a white "paper"
   document: Georgia serif, centered name + contact, ruled all-caps section
   headers, bulleted experience. Forced light (it's a printable document) so
   it looks identical in dark mode, exactly like the product viewer. */
.resume-paper {
  background: #ffffff;
  color: #171717;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  line-height: 1.55;
  padding: 26px 30px 56px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-md);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.1);
}
.resume-doc .name {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0a0a0a;
}
.resume-doc .contact {
  margin: 4px 0 0;
  text-align: center;
  font-size: 11px;
  color: #737373;
}
.resume-doc .sec {
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #d4d4d4;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #171717;
}
.resume-doc p { margin: 0 0 6px; color: #404040; }
.resume-doc ul { margin: 0 0 8px; padding-left: 18px; }
.resume-doc li { margin: 0 0 4px; color: #404040; }

/* Live generator result: show the top, blur the rest behind a CTA. */
.resume-reveal {
  position: relative;
  margin-top: var(--s-4);
  max-height: 440px;
  overflow: hidden;
  border-radius: var(--r-md);
}
.resume-lock {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  padding: var(--s-7) var(--s-5) var(--s-5);
  text-align: center;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--surface-2) 0%, transparent) 0%,
    color-mix(in oklab, var(--surface-2) 70%, transparent) 42%,
    var(--surface-2) 78%
  );
}
.resume-lock .lock-note {
  margin: 0;
  max-width: 28ch;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
}
.resume-lock .btn-tool { margin-top: 0; max-width: 320px; }

/* Inline loading spinner for the generate button. */
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 99px;
  animation: tool-spin 0.6s linear infinite;
  vertical-align: -2px;
}
@keyframes tool-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } }

/* ---------- Section spacing ---------- */
.section { padding: var(--s-10) 0; }
.section + .section { border-top: 1px solid var(--hairline); }
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s-5);
  max-width: 22ch;
}
.section-title em { font-style: italic; }
.section-lede {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 0 var(--s-8);
  line-height: 1.55;
}
/* Body paragraph inside a section (long-form guide copy). */
.section p { max-width: 68ch; color: var(--text); line-height: 1.6; }
.section p + p { margin-top: var(--s-4); }
.section ul { max-width: 68ch; color: var(--text); line-height: 1.6; padding-left: var(--s-5); }
.section ul li { margin: var(--s-2) 0; }
.section-note { margin-top: var(--s-6); }
.section h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: var(--s-7) 0 var(--s-3);
}
.section .steps h3 { margin: 0 0 8px; }

/* ---------- How-it-works (3 steps) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
.step-card .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--moss);
  margin-bottom: var(--s-3);
}
.step-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.step-card p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
}

/* ---------- Comparison table ---------- */
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: var(--text-sm);
}
.compare-table th,
.compare-table td {
  padding: var(--s-4) var(--s-5);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.compare-table tr:last-child th,
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table thead th {
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.compare-table thead th.us {
  color: var(--ink);
  background: var(--surface-2);
}
.compare-table tbody th {
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
}
.compare-table .us-col {
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 500;
}
.compare-table .yes { color: var(--color-primary); font-weight: 600; }
.compare-table .no { color: var(--text-faint); }

/* ---------- FAQ ---------- */
.faq {
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.faq details {
  border-bottom: 1px solid var(--hairline);
  padding: var(--s-5) var(--s-6);
}
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer;
  font-size: var(--text-md);
  color: var(--ink);
  font-weight: 500;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-muted);
  transition: transform var(--d-2) var(--ease);
}
.faq details[open] summary::after { content: "−"; color: var(--ink); }
.faq details p {
  margin: var(--s-3) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 68ch;
}

/* ---------- Universities strip ---------- */
.unis {
  padding: var(--s-7) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  gap: var(--s-7);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.unis .uni {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--text-muted);
  letter-spacing: -0.01em;
}
.unis .label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  width: 100%;
  text-align: center;
  margin-bottom: var(--s-4);
}
@media (max-width: 640px) {
  .unis { gap: var(--s-4) var(--s-5); padding: var(--s-6) var(--s-2); }
  .unis .uni { font-size: var(--text-sm); }
}

/* ---------- Responsive comparison table ---------- */
@media (max-width: 720px) {
  .compare-table thead { display: none; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td {
    display: block;
    width: 100%;
  }
  .compare-table tr {
    border-bottom: 1px solid var(--hairline);
    padding: var(--s-4) var(--s-5);
  }
  .compare-table tbody th {
    background: transparent;
    padding: 0 0 var(--s-2);
    font-family: var(--font-display);
    font-size: var(--text-md);
    border: 0;
  }
  .compare-table td {
    padding: var(--s-2) 0;
    border: 0;
    font-size: var(--text-sm);
  }
  .compare-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 2px;
  }
  .compare-table .us-col {
    background: transparent;
    color: var(--ink);
  }
}

/* ---------- Final CTA ----------
   Brand-locked: keep the deep-forest card treatment in both themes so
   the lime button always has contrast and the surface stays on-brand.
*/
.final-cta {
  background: #0b3d2e;
  color: #f6f4ee;
  border-radius: var(--r-lg);
  padding: var(--s-10) var(--s-8);
  text-align: center;
  margin: var(--s-10) 0;
}
.final-cta h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
  margin: 0 0 var(--s-3);
}
.final-cta h2 em { font-style: italic; }
.final-cta p {
  font-size: var(--text-md);
  color: rgba(246, 244, 238, 0.78);
  margin: 0 0 var(--s-6);
  max-width: 52ch;
  margin-left: auto; margin-right: auto;
}
.final-cta .btn {
  background: #cdf04a;
  color: #0b3d2e;
  font-weight: 600;
  padding: 14px 28px;
  font-size: var(--text-md);
}
.final-cta .btn:hover { background: #d8f567; }

/* ---------- Shared tool generator UI (form / output) ----------
   Added for the SEO tool program. Token-driven so dark mode works
   automatically. Reuse these classes for any interactive tool-shell —
   do not create parallel per-page styles. */
.tool-form { display: flex; flex-direction: column; gap: var(--s-4); }
.tool-field { display: flex; flex-direction: column; gap: 6px; }
.tool-field > label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tool-field input,
.tool-field select {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  /* Let native widgets (date picker icon, select chevron) follow the OS theme
     so the calendar indicator stays visible in dark mode. */
  color-scheme: light dark;
  transition: border-color var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease);
}
/* Belt-and-suspenders for WebKit: tint the calendar glyph to the text colour
   in case color-scheme isn't honoured. */
/* (removed dark-mode date-picker invert — tool pages are light-only now) */
.tool-field input:focus,
.tool-field select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.tool-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 520px) { .tool-field-row { grid-template-columns: 1fr; } }
.tool-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.tool-output { margin-top: var(--s-5); }
.tool-output-actions {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}
.tool-error {
  margin-top: var(--s-3);
  font-size: var(--text-sm);
  color: var(--text-warn);
}
.btn-ghost.btn-sm { padding: 8px 14px; font-size: var(--text-xs); }

/* ---------- Job tracker board (interactive tool-shell) ---------- */
.tracker { overflow-x: auto; }
.tracker-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.tracker-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  padding: 0 8px var(--s-3);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.tracker-table td {
  padding: var(--s-3) 8px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  color: var(--ink);
}
.tracker-table tr:last-child td { border-bottom: 0; }
.tracker-table .t-company { font-weight: 500; }
.tracker-table .t-role { color: var(--text-muted); }
.tracker-table .t-link a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.tracker-table .t-date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.tracker-empty {
  text-align: center;
  color: var(--text-faint);
  font-size: var(--text-sm);
  padding: var(--s-7) 0;
}
.st-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-2);
  background: var(--bg-soft);
  color: var(--text-muted);
  white-space: nowrap;
}
.st-badge[data-status="Interviewing"] { background: var(--green-soft); color: var(--ink); border-color: transparent; }
.st-badge[data-status="Offer"] { background: var(--lime); color: #0b3d2e; border-color: transparent; }
.st-badge[data-status="Applied"] { background: var(--surface-offset, var(--bg-soft)); color: var(--ink); }
.st-badge[data-status="Rejected"] { color: var(--text-warn); }
.row-actions { display: flex; gap: 2px; }
.row-edit,
.row-del {
  color: var(--text-faint);
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  transition: color var(--d-1), background var(--d-1);
}
.row-edit:hover { color: var(--green); background: var(--bg-soft); }
.row-del:hover { color: var(--text-warn); background: var(--bg-soft); }
.row-edit:focus-visible,
.row-del:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
/* Highlight the row currently loaded into the edit form. */
.tracker-table tr.is-editing td { background: var(--bg-soft); }
.tracker-table tr.is-editing .t-company { color: var(--green); }
.tracker-stats {
  display: flex; gap: var(--s-5); flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.tracker-stats .stat { display: flex; flex-direction: column; }
.tracker-stats .stat b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  color: var(--ink);
  line-height: 1;
}
.tracker-stats .stat span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 4px;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--hairline);
  padding: var(--s-8) 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.footer-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
  display: flex;
  justify-content: space-between;
  gap: var(--s-7);
  flex-wrap: wrap;
}
.footer .legal { font-family: var(--font-display); font-style: italic; }
.footer-links { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--ink); }

/* ---------- Live tool generator (shared platform) ----------
   Form + output UI used by every interactive tool page. Lives inside the
   .tool-shell aside on the hero. Token-driven so dark mode is automatic.
*/
/* =========================================================
   Shared tool generator UI (the LIVE form + output)
   ---------------------------------------------------------
   Added by the shared tool platform (Tool #1, Build 00) and
   reused by every tool page. These live inside an
   .tool-shell aside and are driven by the generic [data-tool]
   wiring in tool-shell.js. Reuse — do not create parallel
   per-page classes.
   ========================================================= */
/* Small muted helper line under a tool head (e.g. "free, no sign-up"). */
.tool-note {
  margin: calc(-1 * var(--s-3)) 0 var(--s-5);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

/* On narrow screens the hero collapses to one column; surface the live
   generator ABOVE the marketing copy so the free tool is the first thing a
   visitor sees and can use. DOM order is unchanged (H1 stays first in source
   for crawlers) — only the visual order flips. */
@media (max-width: 960px) {
  .hero > aside.tool-shell { order: -1; }
}

/* ---------- Interactive tool form + output ----------
   Shared generator/converter UI for live tool pages (e.g. the
   salary-to-hourly converter). Lives inside an .tool-shell aside in the
   hero, or standalone in a section. Token-driven so dark mode just works. */
.tool-field input,
.tool-field select,
.tool-field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--text-md);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  transition: border-color var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease);
}
.tool-field textarea {
  font-family: var(--font-body);
  line-height: 1.5;
  resize: vertical;
  min-height: 84px;
}
.tool-field input:focus,
.tool-field select:focus,
.tool-field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.tool-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6660' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
  -webkit-appearance: none;
  appearance: none;
}
.tool-field .field-hint { font-size: var(--text-xs); color: var(--text-faint); }
.tool-field .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 480px) { .tool-field .grid-2 { grid-template-columns: 1fr; } }
.tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 420px) { .tool-row { grid-template-columns: 1fr; } }

/* Label row: field name on the left, "Upload file" affordance on the right */
.tool-field .field-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.upload-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color var(--d-1) var(--ease), background var(--d-1) var(--ease);
}
.upload-btn:hover { border-color: var(--green); background: var(--surface); }
.upload-btn svg { width: 14px; height: 14px; }
.upload-name {
  font-size: var(--text-xs);
  color: var(--moss);
  font-family: var(--font-mono);
}

.tool-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.tool-actions .btn-tool { margin-top: 0; width: auto; flex: 1 1 auto; }

/* Tool-first hero: on narrow screens the live tool leads so a visitor can use
   it immediately instead of scrolling past marketing copy. Opt in per page
   with class="hero hero--tool-first". */
@media (max-width: 960px) {
  .hero--tool-first > aside.tool-shell { order: -1; margin-bottom: var(--s-4); }
}

/* Generated output region — hidden until a result arrives (JS toggles [hidden]).
   The display:flex below would otherwise beat the UA [hidden]{display:none},
   leaving the empty output (incl. its CTAs) visible on first load — so the
   attribute selectors restore "hidden means hidden". */
.tool-output {
  margin-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.tool-output[hidden],
.tool-error[hidden] { display: none; }
.tool-output .output-summary {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.tool-output pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-5);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow-y: auto;
}
.tool-output-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }

/* Live results — a stack of label/value rows */
.conv-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4);
}
.conv-row .conv-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.conv-row .conv-value {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.conv-row.primary .conv-value { font-size: var(--text-xl); }
.copied-note {
  font-size: var(--text-xs);
  color: var(--green-soft);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

/* Keyword chips rendered into the output by keyword-style tools */
.kw-group { display: flex; flex-direction: column; gap: var(--s-3); }
.kw-group .kw-group-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  line-height: 1.2;
}
.kw-chip.is-high { border-color: var(--green-soft); }
.kw-chip.is-missing {
  background: transparent;
  border-style: dashed;
  border-color: var(--hairline-2);
  color: var(--text-muted);
}
.kw-chip .kw-rank {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Inline validation / server error message */
.tool-error {
  margin-top: var(--s-4);
  font-size: var(--text-sm);
  color: var(--text-warn);
  background: color-mix(in oklab, var(--color-warn) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-warn) 30%, transparent);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  line-height: 1.45;
}

/* Spinner shown on the generate button while a request is in flight. */
.spinner {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid color-mix(in oklab, var(--text-on-dark) 40%, transparent);
  border-top-color: var(--text-on-dark);
  border-radius: 99px;
  vertical-align: -2px;
  animation: tool-spin 0.7s linear infinite;
}
@keyframes tool-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }
.btn-tool[aria-busy="true"] { opacity: 0.85; cursor: progress; }

/* Long-form prose paragraph inside a content .section */
.prose { max-width: 68ch; color: var(--text-muted); line-height: 1.7; }
.prose em { font-style: italic; }
.prose + .prose { margin-top: var(--s-4); }

/* Sub-heading for an inline example block */
.example-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: var(--s-7) 0 var(--s-3);
}
.example-h em { font-style: italic; }

/* A static, copy-paste example letter (same surface as .tool-output) */
.example-letter {
  margin-top: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-5);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
}

/* Small legal/disclosure note under a tool */
.legal-note {
  margin: var(--s-4) 0 0;
  font-size: var(--text-xs);
  color: var(--text-faint);
  line-height: 1.5;
}

.section-more { margin-top: var(--s-5); }

/* Single-column hero (informational pages with no tool in the hero aside) */
.hero.hero--stack { grid-template-columns: 1fr; }
/* With no tool panel filling the right column, the default hero padding pushes
   the first content section well below the fold. Tighten the vertical rhythm
   for stack heroes so the first example peeks above the fold on a typical
   laptop viewport. Scoped to .hero--stack (cover-letter-examples only); the
   mobile breakpoint below keeps it comfortable on small screens. */
.hero.hero--stack { padding: var(--s-5) 0 var(--s-6); }
.hero.hero--stack .lede { margin-bottom: var(--s-5); }
@media (max-width: 960px) {
  .hero.hero--stack { padding: var(--s-5) 0 var(--s-6); }
}

/* Centered generator module when the tool sits in a content section rather
   than the hero aside (e.g. the "tailor this example" block) */
.tool-module { max-width: 620px; }
.tool-module .tool-shell { margin: 0; }

/* Sub-heading inside an example block ("Why this works" / "How to customize") */
.example-sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: var(--s-5) 0 6px;
}

/* Mono label above a keyword chip list */
.kw-heading {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: var(--s-5) 0 0;
}

/* Role-specific skills/keywords as chips */
.kw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}
.kw-chips li {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}

/* ---------- Resume document previewer (modal) ----------
   Mirrors the product's on-screen ResumePreview: a white 8.5in "paper" with
   Georgia serif, centered header, uppercase section rules, and bulleted
   experience. Shown in a modal so generating never reflows the hero. The paper
   stays white with dark text in BOTH themes (the product hardcodes this), so
   these values are intentionally literal, not token-driven. */
.resume-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 3vw, 32px);
}
.resume-modal[hidden] { display: none; }
.resume-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 10, 0.66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.resume-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(860px, 100%);
  max-height: 94vh;
  background: var(--surface-2);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(8, 12, 10, 0.45);
  overflow: hidden;
}
.resume-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 99px;
  font-size: 22px;
  line-height: 1;
  color: #44504a;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 3px rgba(8, 12, 10, 0.25);
}
.resume-modal__close:hover { color: #14201a; background: #fff; }
.resume-modal__scroll {
  overflow: auto;
  padding: clamp(16px, 4vw, 40px);
  background: #ece7dc;
}

/* The white paper */
.resume-paper {
  max-width: 8.5in;
  margin: 0 auto;
  background: #ffffff;
  color: #14201a;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 60px);
}
.resume-doc {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  line-height: 1.55;
  color: #14201a;
}
.resume-doc__head {
  border-bottom: 1px solid #cfd6d0;
  padding-bottom: 12px;
  text-align: center;
}
.resume-doc__name {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0c130f;
}
.resume-doc__headline {
  margin-top: 2px;
  font-size: 13px;
  font-style: italic;
  color: #45514b;
}
.resume-doc__contact {
  margin-top: 5px;
  font-size: 11.5px;
  color: #6a746e;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  justify-content: center;
}
.resume-doc__contact .sep { color: #aab1ab; }
.resume-doc__summary {
  margin: 12px 0 0;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.6;
  color: #3f4a44;
}
.resume-doc__section { margin-top: 18px; }
.resume-doc__sectitle {
  margin-bottom: 8px;
  border-bottom: 1px solid #cfd6d0;
  padding-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #14201a;
}
.resume-doc__entry + .resume-doc__entry { margin-top: 14px; }
.resume-doc__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.resume-doc__org { font-size: 13px; font-weight: 700; color: #0c130f; }
.resume-doc__role { font-size: 13px; font-style: italic; color: #45514b; }
.resume-doc__dates,
.resume-doc__loc { font-size: 12px; color: #6a746e; white-space: nowrap; }
.resume-doc__dates { font-weight: 500; }
.resume-doc__bullets {
  margin: 6px 0 0;
  padding-left: 20px;
  list-style: disc;
}
.resume-doc__bullets li {
  margin: 3px 0;
  padding-left: 2px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #2c352f;
}
.resume-doc__bullets li::marker { color: #8a938c; }
.resume-doc__skills { margin: 0; font-size: 12.5px; line-height: 1.6; color: #2c352f; }

/* Action bar under the paper */
.resume-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--hairline);
  background: var(--surface-2);
}
.resume-modal__note { font-size: var(--text-sm); color: var(--text-muted); }
.resume-modal__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.resume-modal__actions .btn { white-space: nowrap; }
body.resume-modal-open { overflow: hidden; }

/* Inline (non-modal) use of the resume paper on role pages. */
.resume-stage {
  display: flex;
  justify-content: center;
  padding: clamp(16px, 3vw, 32px);
  background: var(--surface-offset, var(--bg-soft));
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.resume-paper--inline { margin: 0; max-width: 8.5in; width: 100%; }

/* Check list (what to include on a role resume). */
.check-list {
  list-style: none;
  padding: 0;
  margin: var(--s-2) 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3) var(--s-6);
}
@media (max-width: 640px) { .check-list { grid-template-columns: 1fr; } }
.check-list li {
  position: relative;
  padding-left: 26px;
  font-size: var(--text-md);
  color: var(--text);
  line-height: 1.5;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 16px; height: 16px;
  border-radius: 99px;
  background: var(--green-soft);
  box-shadow: inset 0 0 0 1.5px var(--green);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 5px; top: 7px;
  width: 5px; height: 8px;
  border: solid var(--green);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

/* Sibling role links (internal hub linking). */
.role-links { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.role-links a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-2);
  background: var(--surface-2);
  font-size: var(--text-sm);
  color: var(--ink);
}
.role-links a:hover { border-color: var(--green-soft); color: var(--green); }

/* Big reference table of popular conversions (links to value sub-pages) */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.value-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  transition: border-color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.value-card:hover { border-color: var(--green-soft); transform: translateY(-1px); }
.value-card .v-from {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.value-card .v-to {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 4px;
}

/* ---------- Tools hub grid ---------- */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-7);
}
@media (max-width: 760px) { .tools-grid { grid-template-columns: 1fr; } }
.tool-card {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-6);
  transition: transform var(--d-2) var(--ease), border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.tool-card:hover {
  border-color: var(--green-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.tool-card .tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss);
}
.tool-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 8px 0 6px;
}
.tool-card h3 em { font-style: italic; }
.tool-card p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 var(--s-4);
  line-height: 1.55;
}
.tool-card .meta {
  display: flex; gap: var(--s-3);
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.tool-card .arrow {
  display: inline-flex; gap: 6px; align-items: center;
  margin-top: var(--s-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
}

/* =========================================================
   Tool generator form + output (Job Letters Suite + shared platform)
   ---------------------------------------------------------
   Tuned to match the Standout PRODUCT APP component system
   (client/src/index.css / shadcn ui): ~8px control radius,
   cream-inset inputs with a forest ring-offset focus, app-style
   (non-pill) buttons, Inter output. Shared by all letter pages,
   the structured generators (interview builder, …), and tools #2–#10.
   Reuse these classes — do not create per-page parallels.
   ========================================================= */

/* App control radius — matches the app's rounded-md / focus-state
   corners (client/src/index.css uses 6–8px on inputs & buttons). */
:root { --tool-radius: 8px; }

/* --- Form layout ---
   Shared tool generator UI (form + output)
   Added once for the SEO tool program; reused by every live tool
   embedded in a .tool-shell. Token-driven so dark mode just works.
   Wired by [data-tool] in assets/js/tool-shell.js — do not duplicate. */
.tool-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
/* Two-up row for short fields on wide viewports; stacks on mobile. */
.tool-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 640px) {
  .tool-form-row { grid-template-columns: 1fr; }
}

.tool-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* App label convention: sentence case, medium weight, not the
   uppercase-tracked marketing label. Mirrors the ui/label component. */
.tool-field label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.tool-field .optional {
  font-weight: 400;
  color: var(--text-faint);
}

.tool-field input,
.tool-field select,
.tool-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--ink);
  /* Cream inset against the white card — the app's bg-background input. */
  background: var(--color-bg);
  border: 1px solid var(--hairline-2);
  border-radius: var(--tool-radius);
  padding: 10px 12px;
  transition: border-color var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease);
}
.tool-field textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.55;
}
.tool-field input::placeholder,
.tool-field textarea::placeholder { color: var(--text-faint); }
/* App focus: 2px forest ring with a 2px surface offset (ring-2 ring-offset-2). */
.tool-field input:focus,
.tool-field select:focus,
.tool-field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--green);
}
.tool-field .hint { font-size: var(--text-xs); color: var(--text-faint); }

/* Multi-select chips (e.g. "what you care about") — interview builder */
.tool-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Visually-hidden checkbox: the styled label IS the tap target. The old
   `position:absolute` (no size/clip, non-positioned ancestor) left a
   natural-size box anchored to the page, creating stray off-screen hit
   areas past the viewport on mobile. Clip it to a 1px box so it occupies
   no tappable space while staying focusable/keyboard-accessible. */
.tool-chips input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}
.tool-chips label {
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-pill);
  padding: 7px 13px;
  transition: background var(--d-1) var(--ease), border-color var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.tool-chips label:hover { border-color: var(--green); color: var(--ink); }
.tool-chips input:checked + span,
.tool-chips label:has(input:checked) {
  background: var(--green);
  border-color: var(--green);
  color: var(--text-on-dark);
}
.tool-chips input:focus-visible + span { box-shadow: 0 0 0 3px var(--green-soft); }
.tool-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6660' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* --- Action row --- */
.tool-actions {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
/* App-style primary button (NOT a pill): rounded-md, forest, medium. */
.tool-actions .btn-tool {
  margin-top: 0;
  width: 100%;
  border-radius: var(--tool-radius);
  padding: 12px 18px;
  font-weight: 500;
  border: 1px solid var(--green);
  box-shadow: var(--shadow-1);
}
.tool-actions .btn-tool:hover { background: var(--green-hover); border-color: var(--green-hover); }
.tool-actions .btn-tool:active { transform: translateY(1px); }
.tool-actions .btn-tool:disabled { opacity: 0.55; cursor: not-allowed; }

/* --- Generated output card --- */
.tool-output {
  display: none; /* revealed by tool-shell.js once a result exists */
}
.tool-output.is-visible { display: block; }
/* Structured tools (interview builder) toggle visibility via the [hidden]
   attribute rather than the .is-visible class; honor both. */
.tool-output:not([hidden]) { display: block; }
.tool-output[hidden] { display: none; }
/* Divider above the live result inside the generator card (not on the
   standalone example blocks elsewhere on the page). */
.tool-shell .tool-output {
  margin-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-5);
}

.tool-output .output-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--hairline-2);
  border-radius: var(--tool-radius);
  padding: var(--s-5);
  max-height: 440px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Loading state: dim the text block and show a centered spinner. */
.tool-output.is-loading { display: block; }
.tool-output.is-loading .output-text {
  min-height: 120px;
  color: var(--text-faint);
  position: relative;
}
.tool-output.is-loading .tool-output-actions { display: none; }

.spinner {
  width: 22px; height: 22px;
  border-radius: 99px;
  border: 2px solid var(--hairline-2);
  border-top-color: var(--green);
  animation: tool-spin 0.7s linear infinite;
  margin: var(--s-2) auto;
}

/* Count label shown after a structured generation ("18 questions generated") */
.tool-output-count {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
}
.tool-output-count[hidden] { display: none; }

/* Grouped list output (interview builder) */
.tool-output-group { margin-bottom: var(--s-5); }
.tool-output-group h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss);
  margin: 0 0 var(--s-3);
}
.tool-output-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.tool-output-group li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--text);
  line-height: 1.5;
}
.tool-output-group li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: 7px;
  border-radius: 99px;
  background: var(--lime);
}
@keyframes tool-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.6s; }
}

/* --- Copy / Download actions under the output --- */
.tool-output-actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-4);
  flex-wrap: wrap;
}
/* App buttons (not pills): rounded-md. Copy = primary, Download = outline. */
.tool-output-actions .btn {
  border-radius: var(--tool-radius);
  border: 1px solid var(--green);
}
.tool-output-actions .btn-ghost {
  border-color: var(--hairline-2);
}
.tool-output-actions .btn-sm { padding: 9px 16px; font-size: var(--text-sm); }

/* --- Inline error message --- */
.tool-error {
  display: none;
  margin-top: var(--s-4);
  padding: 11px 14px;
  border: 1px solid var(--color-warn);
  border-radius: var(--tool-radius);
  background: color-mix(in oklab, var(--color-warn) 8%, transparent);
  color: var(--text-warn);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.tool-error.is-visible { display: block; }

@media (max-width: 640px) {
  .tool-output .output-text { padding: var(--s-4); max-height: 360px; }
}

/* --- Freemium gate modal (driven by tool-shell.js after N free uses) --- */
.tool-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  background: rgba(20, 32, 26, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.tool-gate-overlay[hidden] { display: none; }
/* ===== Style C — illustration-led, high-converting modal ===== */
.tool-gate {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  animation: tool-gate-in var(--d-2) var(--ease);
}
.tool-gate:focus { outline: none; }
@keyframes tool-gate-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-gate { animation: none; }
}
.tool-gate-close {
  position: absolute;
  top: 10px; right: 12px;
  z-index: 2;
  width: 32px; height: 32px;
  border-radius: 99px;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
}
.tool-gate-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }

/* 1. Illustration medallion band — cream, with a forest circle + lime icon. */
.tool-gate-medallion-band {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px 0 24px;
  background: #f4f1ea;
}
.tool-gate-medallion {
  width: 104px;
  height: 104px;
  border-radius: 999px;
  background: #0b3d2e;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(11, 61, 46, 0.28);
}
.tool-gate-body {
  padding: 22px 28px 24px;
  text-align: center;
}
/* 2. Empathy hook (personalized). */
.tool-gate-hook {
  font-size: 13.5px;
  color: #5c6b63;
  line-height: 1.4;
  margin: 0 0 6px;
}
.tool-gate-hook[hidden] { display: none; }
/* (state) green stat line. */
.tool-gate-stat {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--green);
  line-height: 1.4;
  margin: 0 0 10px;
}
.tool-gate-stat[hidden] { display: none; }
/* 3. Universal headline. */
.tool-gate-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1a2620;
  margin: 0 0 16px;
}
/* 4. Value-stack — left-aligned list, block centered in the card. 4 items. */
.tool-gate-stack {
  list-style: none;
  margin: 0 auto 16px;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}
.tool-gate-stack li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--text-sm);
  color: #1a2620;
  line-height: 1.35;
}
.tool-gate-stack li::before {
  content: "✓";
  color: var(--green);
  font-weight: 700;
  flex: none;
  line-height: 1.35;
}
/* 5. Guarantee pill. */
.tool-gate-guarantee {
  display: inline-block;
  margin: 0 0 16px;
  background: rgba(11, 61, 46, 0.08);
  color: #0b3d2e;
  font-weight: 700;
  font-size: 11.5px;
  border-radius: 999px;
  padding: 6px 11px;
}
/* 6. Primary CTA — full-width forest. */
.tool-gate-cta {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: #0b3d2e;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  box-shadow: 0 8px 18px rgba(11, 61, 46, 0.22);
}
.tool-gate-cta:hover { background: var(--green-hover); }
/* 7. Proof line — gold stars + muted text. */
.tool-gate-proof {
  font-size: 12.5px;
  color: #5c6b63;
  line-height: 1.4;
  margin: 12px 0 0;
}
.tool-gate-stars { color: #e8b04b; letter-spacing: 1px; }
/* 8. Quiet dismiss — underlined muted text link. */
.tool-gate-dismiss {
  display: inline-block;
  margin: 12px auto 0;
  background: none;
  border: none;
  padding: 2px 4px;
  color: #5c6b63;
  text-decoration: underline;
  font-size: var(--text-sm);
  cursor: pointer;
}
.tool-gate-dismiss:hover { color: var(--ink); }
@media (max-width: 640px) {
  .tool-gate-medallion-band { padding: 24px 0 20px; }
  .tool-gate-medallion { width: 92px; height: 92px; }
  .tool-gate-body { padding: 20px 22px 22px; }
  .tool-gate-cta { min-height: 48px; }
}

/* =========================================================
   Part C — "Free resumes this week" promo banner (slim top bar).
   Forest bar, cream text. A normal-flow announcement bar that pushes
   content down (not an overlay) — SEO-safe, never blocks content.
   ========================================================= */
.promo-banner {
  position: relative;
  z-index: 40;
  background: var(--green);
  color: var(--text-on-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.promo-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: min(var(--content-wide, 1240px), 100%);
  margin: 0 auto;
  min-height: 44px;
  padding: 6px clamp(12px, 4vw, 24px);
  box-sizing: border-box;
}
.promo-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promo-banner-gift { font-size: var(--text-md); }
.promo-banner-short { display: none; }
.promo-banner-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--lime);
  color: #0b3d2e;
  border-radius: var(--r-pill);
  padding: 7px 16px;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.promo-banner-cta:hover { filter: brightness(0.96); }
.promo-cta-short { display: none; }
.promo-banner-close {
  flex: none;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-on-dark);
  font-size: 20px;
  line-height: 1;
  border-radius: var(--r-pill);
  cursor: pointer;
  opacity: 0.85;
}
.promo-banner-close:hover { background: rgba(255, 255, 255, 0.15); opacity: 1; }
@media (max-width: 760px) {
  .promo-banner-full { display: none; }
  .promo-banner-short { display: inline; }
  .promo-cta-full { display: none; }
  .promo-cta-short { display: inline; }
  .promo-banner-cta { padding: 8px 14px; min-height: 36px; }
  .promo-banner-close { width: 32px; height: 32px; }
}

/* =========================================================
   Always-on inline CTA panel (window.StandoutCTA — primary surface).
   A brand card rendered below the result inside the tool shell. Light
   theme only: cream/forest, rounded, subtle border, forest button.
   ========================================================= */
.tool-cta {
  margin-top: var(--s-5);
}
.tool-cta[hidden] { display: none; }
.tool-cta-inner {
  position: relative;
  overflow: hidden;
  /* Faint green wash so the card lifts off the cream page. */
  background: linear-gradient(180deg, var(--green-soft) 0%, var(--surface) 60%);
  border: 1px solid var(--green-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--s-6);
}
.tool-cta-inner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--green);
}
.tool-cta-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 var(--s-2);
}
.tool-cta-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
/* State-calc stat line: brand-green, semibold, body font. */
.tool-cta-stat {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--green);
  line-height: 1.4;
  margin: 0 0 var(--s-3);
}
.tool-cta-body {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 var(--s-3);
}
.tool-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--green);
  color: var(--text-on-dark);
  border: 1px solid var(--green);
  border-radius: var(--tool-radius);
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background var(--d-1, 150ms) var(--ease, ease), transform var(--d-1, 150ms) var(--ease, ease);
}
.tool-cta-btn:hover { background: var(--green-hover); }
.tool-cta-btn:active { transform: translateY(1px); }
.tool-cta-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--green-soft); }
.tool-cta-trust {
  margin: var(--s-3) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}
@media (max-width: 760px) {
  .tool-cta-inner { padding: var(--s-4); }
  .tool-cta-headline { font-size: var(--text-xl); }
  .tool-cta-btn {
    display: flex;
    width: 100%;
    min-height: 44px;
    padding: 13px 18px;
  }
}

/* --- Hero: anchor the left content to the top so it never shifts down
   when the generator card changes height (the two-column hero defaults to
   vertical centering). Scoped to the letter-tool pages via :has(). --- */
.hero:has(.tool-shell[data-letter-tool]) { align-items: start; }

/* =========================================================
   Generated-letter document viewer
   ---------------------------------------------------------
   Resume-editor-style "paper": an editable white 8.5×11 sheet
   (Georgia serif, neutral ink) on a tinted canvas, inside an
   overlay with an app-chrome action bar. Opening the result here
   keeps the form card from growing and shifting the hero.
   ========================================================= */
.doc-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 3vw, 32px);
  background: rgba(20, 32, 26, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.doc-viewer-overlay[hidden] { display: none; }
.doc-viewer {
  display: flex;
  flex-direction: column;
  width: min(980px, 100%);
  max-height: 94vh;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: tool-gate-in var(--d-2) var(--ease);
}
.doc-viewer-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
}
.doc-viewer-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: capitalize;
}
.doc-viewer-hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 4px;
}
.doc-viewer-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.doc-viewer-actions .btn { border-radius: var(--tool-radius); border: 1px solid var(--green); }
.doc-viewer-actions .btn-ghost { border-color: var(--hairline-2); }
.doc-viewer-close {
  width: 34px;
  height: 34px;
  border-radius: 99px;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
}
.doc-viewer-close:hover { background: var(--bg-soft); color: var(--ink); }
/* Formatting toolbar (B / I / U + text size). */
.doc-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px clamp(12px, 3vw, 20px);
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.doc-viewer-overlay:not(.is-ready) .doc-toolbar { opacity: 0.45; pointer-events: none; }
.doc-tool-btn {
  min-width: 34px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.doc-tool-btn:hover { background: var(--bg-soft); }
.doc-tool-btn.is-active {
  background: var(--green-soft);
  border-color: var(--green);
  color: var(--ink);
}
.doc-tool-btn u { text-underline-offset: 2px; }
.doc-tool-sep {
  width: 1px;
  height: 20px;
  background: var(--hairline-2);
  margin: 0 4px;
}
.doc-edit-flag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green);
  background: var(--green-soft);
  border-radius: var(--r-pill);
  padding: 4px 12px;
}

.doc-viewer-canvas {
  flex: 1 1 auto;
  overflow: auto;
  background: var(--color-surface-offset);
  padding: clamp(16px, 4vw, 40px);
  display: flex;
  justify-content: center;
}
/* The "sheet of paper" — intentionally decoupled from theme (always a white
   document with dark ink), exactly like the product's resume preview. */
.doc-paper {
  width: 100%;
  max-width: 8.5in;
  min-height: 11in;
  background: #ffffff;
  color: #171717;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.7;
  padding: clamp(28px, 6%, 64px);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
  cursor: text;
}
/* Subtle hint that the page is editable before the user clicks in. */
.doc-viewer-overlay.is-ready .doc-paper:not(:focus):hover {
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.1), 0 0 0 1px var(--green-soft);
}
.doc-paper:focus {
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--green);
}
.doc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 220px;
  color: #8a8f98;
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
@media (max-width: 640px) {
  .doc-viewer-title { font-size: var(--text-md); }
  .doc-viewer-hint { display: none; }
  .doc-paper { font-size: 13px; min-height: 60vh; padding: 24px; }
}

/* =========================================================
   SHARED TOOL PLATFORM — live generator form + output
   Added for the SEO tool program (resume-checker, …). These are the
   reusable classes every tool's interactive aside uses, plus the
   result-rendering primitives for score-style output. Token-driven so
   dark mode works automatically. Reuse these — do not fork per tool.
   ========================================================= */

/* Status colors for pass/warn/fail dots & meters. pass/warn map to brand
   tokens; fail needs a red the palette doesn't define, so it lives here as
   the single literal, with a lighter value under dark mode for contrast. */
:root {
  --tool-pass: var(--color-primary);
  --tool-warn: var(--color-warn);
  --tool-fail: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tool-pass: var(--color-accent);
    --tool-fail: #f2776b;
  }
}

/* ---------- Generator form ---------- */
.tool-form { display: flex; flex-direction: column; gap: var(--s-4); }
.tool-field { display: flex; flex-direction: column; gap: 6px; }
.tool-field label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tool-field label span { text-transform: none; letter-spacing: 0; color: var(--text-faint); }
.tool-field .req { color: var(--text-warn); }
.tool-field input,
.tool-field select,
.tool-field textarea,
.tool-field input[type="text"],
.tool-field input[type="file"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.tool-field textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
.tool-field input[type="file"] { padding: 9px 12px; cursor: pointer; }
.tool-field textarea:focus,
.tool-field input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.tool-field .field-hint { font-size: var(--text-xs); color: var(--text-faint); }

.tool-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.tool-actions .btn-tool { margin-top: 0; }

/* Disclosure / privacy microcopy under the form */
.tool-note { font-size: var(--text-xs); color: var(--text-faint); margin: 0; line-height: 1.5; }

/* ---------- Spinner & busy state ---------- */
.spinner {
  width: 16px; height: 16px;
  border-radius: 99px;
  border: 2px solid color-mix(in oklab, var(--text-on-dark) 40%, transparent);
  border-top-color: var(--text-on-dark);
  display: inline-block;
  animation: tool-spin 0.7s linear infinite;
}
@keyframes tool-spin { to { transform: rotate(360deg); } }
.tool-form[aria-busy="true"] .btn-tool { opacity: 0.75; pointer-events: none; }

/* ---------- Error banner ---------- */
.tool-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--tool-fail) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--tool-fail) 40%, transparent);
  color: var(--tool-fail);
  font-size: var(--text-sm);
}

/* ---------- Output region ---------- */
.tool-output { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-5); }
.tool-output-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.tool-output-actions .btn-sm {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline-2);
}
.tool-output-actions .btn-sm:hover { border-color: var(--green); color: var(--green); }

/* Score header: big number + rating + summary */
.rc-scorehead { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: center; }
.rc-score {
  --rc-ring: var(--green);
  width: 84px; height: 84px; border-radius: 99px;
  display: grid; place-items: center;
  background:
    radial-gradient(closest-side, var(--surface) 78%, transparent 79%),
    conic-gradient(var(--rc-ring) calc(var(--rc-pct, 0) * 1%), var(--hairline) 0);
  position: relative;
}
.rc-score b {
  font-family: var(--font-display);
  font-size: 30px; line-height: 1; color: var(--ink); font-weight: 400;
}
.rc-rating { font-family: var(--font-display); font-size: var(--text-xl); color: var(--ink); }
.rc-rating small {
  display: block;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 2px;
}
.rc-summary { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; margin: 0; }

/* Category meters */
.rc-cats { display: flex; flex-direction: column; gap: var(--s-3); }
.rc-cat { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-4); align-items: center; }
.rc-cat .name { font-size: var(--text-sm); color: var(--ink); display: flex; align-items: center; gap: 8px; }
.rc-cat .dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.rc-cat .num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.rc-cat .bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--hairline); overflow: hidden; }
.rc-cat .bar i { display: block; height: 100%; border-radius: 99px; }
.rc-cat.pass .dot, .rc-cat.pass .bar i { background: var(--tool-pass); }
.rc-cat.warn .dot, .rc-cat.warn .bar i { background: var(--tool-warn); }
.rc-cat.fail .dot, .rc-cat.fail .bar i { background: var(--tool-fail); }
.rc-cat .cat-summary { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--text-faint); line-height: 1.5; }

/* Keyword chips */
.rc-keywords { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }
.rc-cats + .rc-keywords, .rc-keywords + div, .rc-cats ~ div > .rc-block-title { margin-top: var(--s-5); }
.rc-keywords .kw-label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.rc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-chip {
  font-size: var(--text-xs);
  border-radius: 99px;
  padding: 3px 10px;
  border: 1px solid var(--hairline);
}
.rc-chip.have { color: var(--tool-pass); border-color: color-mix(in oklab, var(--tool-pass) 40%, transparent); background: color-mix(in oklab, var(--tool-pass) 8%, transparent); }
.rc-chip.missing { color: var(--text-muted); background: var(--bg-soft); }

/* Issues list (severity-coded) */
.rc-issues { display: flex; flex-direction: column; gap: var(--s-3); list-style: none; padding: 0; margin: 0; }
.rc-issue {
  border: 1px solid var(--hairline);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: var(--s-4);
}
.rc-issue.high { border-left-color: var(--tool-fail); }
.rc-issue.medium { border-left-color: var(--tool-warn); }
.rc-issue.low { border-left-color: var(--tool-pass); }
.rc-issue .issue-title { font-size: var(--text-sm); font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.rc-issue .issue-detail { font-size: var(--text-xs); color: var(--text-muted); margin: 0 0 6px; line-height: 1.5; }
.rc-issue .issue-fix { font-size: var(--text-xs); color: var(--ink); margin: 0; line-height: 1.5; }
.rc-issue .issue-fix b { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--moss); }

/* Quick wins */
.rc-wins { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.rc-wins li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--text-sm); color: var(--text); }
.rc-wins li::before { content: "→"; color: var(--green); flex: none; }

.rc-block-title {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
  margin: var(--s-5) 0 var(--s-3);
}

/* ---------- Print to PDF (the "Download PDF" button) ----------
   tool-shell.js toggles body.printing-report before window.print(). We hide
   all page chrome and print only the result card, with a brand header, so the
   browser's "Save as PDF" produces a clean one-page ATS report. */
@media print {
  body.printing-report { background: #fff; }
  body.printing-report > *:not(.shell),
  body.printing-report .shell > *:not(.hero),
  body.printing-report .hero > *:not(.tool-shell),
  body.printing-report .tool-shell > *:not(.tool-form),
  body.printing-report .tool-form > *:not(.tool-output) {
    display: none !important;
  }
  body.printing-report .shell,
  body.printing-report .hero,
  body.printing-report .tool-shell,
  body.printing-report .tool-form {
    display: block !important;
    max-width: none; margin: 0; padding: 0;
    border: 0; box-shadow: none; background: #fff;
  }
  body.printing-report .tool-shell::before { display: none !important; }
  body.printing-report .tool-output { display: flex !important; margin: 0; }
  body.printing-report .tool-output::before {
    content: "Standout · ATS Resume Report";
    display: block;
    font-family: var(--font-display);
    font-size: 22px;
    color: #0b3d2e;
    border-bottom: 2px solid #cdf04a;
    padding-bottom: 8px;
    margin-bottom: 12px;
  }
  /* The action buttons themselves never print. */
  body.printing-report .tool-output-actions { display: none !important; }
  body.printing-report .rc-cat .bar i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.btn[aria-busy="true"], .btn-tool[aria-busy="true"] { opacity: 0.75; pointer-events: none; }

/* Static, crawlable question-bank lists (the long-form bank on tool pages).
   Shared so any tool page's example bank reads consistently. */
.bank-lede {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 var(--s-3);
  max-width: 64ch;
}
.q-list {
  list-style: none;
  margin: 0 0 var(--s-7);
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.q-list li {
  position: relative;
  padding-left: var(--s-6);
  font-size: var(--text-md);
  color: var(--ink);
  line-height: 1.5;
  max-width: 72ch;
}
.q-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 7px; height: 7px;
  border-radius: 99px;
  background: var(--lime);
}

/* Static stack of .tool-result cards used in long-form content (examples). */
.result-stack { display: flex; flex-direction: column; gap: var(--s-4); margin: var(--s-2) 0 var(--s-6); }
.tool-output-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tool-result {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.tool-result + .tool-result { margin-top: 0; }
.tool-result .result-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 6px;
}
.tool-result p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink);
  line-height: 1.6;
}
.tool-output-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.tool-output-actions .btn-sm {
  border: 1px solid var(--hairline-2);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: var(--r-pill);
}
.tool-output-actions .btn-sm:hover { background: var(--bg-soft); }
.tool-output-actions .btn-sm.copied { border-color: var(--green); color: var(--green); }

/* Spinner — shown on the generate button while a request is in flight. */
.spinner {
  width: 15px; height: 15px;
  border-radius: 99px;
  border: 2px solid color-mix(in oklab, var(--text-on-dark) 45%, transparent);
  border-top-color: var(--text-on-dark);
  animation: tool-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes tool-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } }
.btn-tool[aria-busy="true"] { opacity: 0.85; cursor: progress; }

/* Tool pages anchor the hero's left column to the top so it does NOT
   re-center (jump) when the live tool's output grows/shrinks. Opt-in via
   `.hero.tool-hero` so the demo pages keep their vertically-centered layout.
   Add `tool-hero` to any hero whose right column hosts a live generator. */
.hero.tool-hero { align-items: start; }

/* ---------- Dynamic loading state (shared across all tools) ----------
   Rendered by tool-shell.js while a generate request is in flight: a CENTERED
   MODAL over a dim backdrop containing an animated step checklist (steps come
   from the form's data-loading-steps) plus shimmering skeleton lines. Reuses
   tokens so dark mode + reduced motion work automatically. */
.tool-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--s-5);
}
.tool-modal[hidden] { display: none; }
.tool-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 10, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: tool-fade-in var(--d-2) var(--ease);
}
.tool-modal-card {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: var(--s-7);
  overflow: hidden;
  animation: tool-modal-in var(--d-2) var(--ease);
}
.tool-modal-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-soft) 0%, var(--olive) 50%, var(--lime) 100%);
}
.tool-modal-card .loading-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: var(--s-5);
}
.loading-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.loading-steps li {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--text-md); color: var(--text-faint);
  transition: color var(--d-2) var(--ease);
}
.loading-steps li .ico {
  flex: none; width: 20px; height: 20px; border-radius: 99px;
  display: grid; place-items: center;
  border: 1.5px dashed var(--hairline-2);
}
.loading-steps li.is-active { color: var(--ink); }
.loading-steps li.is-active .ico { border-style: solid; border-color: var(--green); }
.loading-steps li.is-active .ico::after {
  content: ""; width: 10px; height: 10px; border-radius: 99px;
  border: 2px solid var(--green-soft); border-top-color: var(--green);
  animation: tool-spin 0.7s linear infinite;
}
.loading-steps li.is-done { color: var(--text); }
.loading-steps li.is-done .ico { background: var(--green); border-color: var(--green); }
.loading-steps li.is-done .ico::after { content: "✓"; color: var(--text-on-dark); font-size: 12px; line-height: 1; }
.tool-modal-card .loading-skeleton { margin-top: var(--s-6); display: flex; flex-direction: column; gap: 8px; }
.loading-skeleton span {
  height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface) 0%, var(--bg-soft) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: tool-shimmer 1.4s ease-in-out infinite;
}
.loading-skeleton span:nth-child(1) { width: 92%; }
.loading-skeleton span:nth-child(2) { width: 80%; }
.loading-skeleton span:nth-child(3) { width: 64%; }
@keyframes tool-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes tool-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tool-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .loading-skeleton span { animation-duration: 3s; }
  .loading-steps li.is-active .ico::after { animation-duration: 1.6s; }
  .tool-modal-backdrop, .tool-modal-card { animation: none; }
}

/* "Good raise?" benchmark verdict on the pay-raise calculator. Tone is set
   via [data-tone] and maps to the shared pass/warn/fail tokens so it inherits
   light + dark automatically. Text stays on the tinted surface (never on the
   lime accent itself) so it remains AA-legible in dark mode. */
.pay-verdict {
  margin-top: var(--s-3);
  padding: 10px 13px;
  border-radius: var(--r-md);
  border-left: 3px solid var(--hairline-2);
  background: var(--surface-2);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
}
.pay-verdict[data-tone="pass"] {
  border-left-color: var(--tool-pass);
  background: color-mix(in oklab, var(--tool-pass) 12%, var(--surface));
}
.pay-verdict[data-tone="warn"] {
  border-left-color: var(--tool-warn);
  background: color-mix(in oklab, var(--tool-warn) 12%, var(--surface));
}
.pay-verdict[data-tone="fail"] {
  border-left-color: var(--tool-fail);
  background: color-mix(in oklab, var(--tool-fail) 12%, var(--surface));
}
.pay-sub {
  margin: var(--s-3) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}
.pay-share-row {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
/* Mode selector — a segmented control (single-select). Kept OUT of .tool-field
   so the generator-form label/input rules don't override it. Token-driven, so
   it inherits light + dark; the active segment uses the brand green (lime in
   dark) with inverse text for AA contrast. */
.pay-modes { display: flex; flex-direction: column; gap: 7px; }
.mode-legend {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pay-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-md);
}
.pay-segmented label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 6px;
  border-radius: calc(var(--r-md) - 3px);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: background var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.pay-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.pay-segmented label:hover { color: var(--ink); }
.pay-segmented label:has(input:checked) {
  background: var(--green);
  color: var(--text-on-dark);
}
.pay-segmented label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--green-soft);
}
[data-mode-fields] { display: flex; flex-direction: column; gap: var(--s-4); }
[data-mode-fields][hidden] { display: none; }

/* Calculator-scoped layout. Pinned to the pay-raise form so the live-results
   stack and label/value rows render correctly and independently of the shared
   generator-UI rules. Token-driven, so light + dark are inherited. */
[data-pay] .tool-output {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-4);
}
[data-pay] .conv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}
[data-pay] .conv-row .conv-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
[data-pay] .conv-row .conv-value {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: right;
}
[data-pay] .conv-row.primary .conv-value { font-size: var(--text-xl); }
[data-pay] .tool-error {
  font-size: var(--text-sm);
  color: var(--text-warn);
  background: color-mix(in oklab, var(--color-warn) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-warn) 30%, transparent);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
[data-pay] .tool-output-actions { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-4); }

/* Mobile tap-target floor. Every interactive control the calculator owns —
   the segmented mode switch, the form selects, and the copy/share buttons —
   gets a >= 44px touch height on small screens so the tool is comfortable to
   operate one-handed. Scoped to the calculator (and the segmented control) so
   the shared desktop chrome is untouched. */
@media (max-width: 640px) {
  [data-pay] .tool-field select,
  [data-pay] .tool-field input[type="text"] {
    min-height: 44px;
  }
  [data-pay] .tool-output-actions .btn-sm,
  .pay-share-row .btn-sm,
  .pay-share-row .btn-ghost {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}
/* ============================================================
   READABILITY: soften display-serif usage for legibility.
   Keep Instrument Serif (--font-display) ONLY on the hero H1.
   Everything else (section/step/example headings, result values,
   stat numbers, FAQ marker, trust-row, footer legal, card titles)
   uses Inter (--font-body) with weight for hierarchy.
   Resume-document Georgia styles are intentionally untouched.
   ============================================================ */
.trust-row .uni,
.tool-head .badge,
.match-card .score,
.section-title,
.section h3,
.step-card .num,
.step-card h3,
.faq summary::after,
.unis .uni,
.final-cta h2,
.tracker-stats .stat b,
.footer .legal,
.example-h,
.example-sub,
.value-card .v-from,
.tool-card h3,
.tool-gate-title,
.doc-viewer-title,
.rc-score b,
.rc-rating,
.rc-block-title {
  font-family: var(--font-body);
}
/* restore weight/hierarchy now that serif's visual weight is gone */
.section-title,
.section h3,
.step-card h3,
.final-cta h2,
.example-h,
.tool-card h3,
.tool-gate-title,
.doc-viewer-title,
.rc-block-title { font-weight: 700; letter-spacing: -0.01em; }
.match-card .score,
.tracker-stats .stat b,
.rc-score b,
.rc-rating,
.value-card .v-from,
.step-card .num { font-weight: 700; }
.trust-row .uni,
.footer .legal { font-style: normal; font-weight: 600; }

/* ============================================================
   MOBILE OVERFLOW GUARD: form controls must never exceed their
   container width (fixes inputs/buttons pushing past viewport
   at narrow widths). Applies to tool pages globally.
   ============================================================ */
.tool input,
.tool select,
.tool textarea,
.tool-form input,
.tool-form select,
.tool-form textarea,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="time"],
input[type="date"],
select,
textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* Contain off-screen absolutely-positioned helper inputs (autocomplete
   suppressors, hidden file inputs) so they can't extend the page scroll
   width on mobile. Visual layout is unaffected. */
html, body { overflow-x: clip; }

/* Generated letter/email output — preserve paragraph rhythm for readability */
.tool-generated { display: flex; flex-direction: column; gap: var(--s-3); }
.tool-generated p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}

/* merged: pay-raise additions */
/* "Good raise?" benchmark verdict on the pay-raise calculator. Tone is set
   via [data-tone] and maps to the shared pass/warn/fail tokens so it inherits
   light + dark automatically. Text stays on the tinted surface (never on the
   lime accent itself) so it remains AA-legible in dark mode. */
.pay-verdict {
  margin-top: var(--s-3);
  padding: 10px 13px;
  border-radius: var(--r-md);
  border-left: 3px solid var(--hairline-2);
  background: var(--surface-2);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
}
.pay-verdict[data-tone="pass"] {
  border-left-color: var(--tool-pass);
  background: color-mix(in oklab, var(--tool-pass) 12%, var(--surface));
}
.pay-verdict[data-tone="warn"] {
  border-left-color: var(--tool-warn);
  background: color-mix(in oklab, var(--tool-warn) 12%, var(--surface));
}
.pay-verdict[data-tone="fail"] {
  border-left-color: var(--tool-fail);
  background: color-mix(in oklab, var(--tool-fail) 12%, var(--surface));
}
.pay-sub {
  margin: var(--s-3) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}
.pay-share-row {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
/* Mode selector — a segmented control (single-select). Kept OUT of .tool-field
   so the generator-form label/input rules don't override it. Token-driven, so
   it inherits light + dark; the active segment uses the brand green (lime in
   dark) with inverse text for AA contrast. */
.pay-modes { display: flex; flex-direction: column; gap: 7px; }
.mode-legend {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pay-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-md);
}
.pay-segmented label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 6px;
  border-radius: calc(var(--r-md) - 3px);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: background var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.pay-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.pay-segmented label:hover { color: var(--ink); }
.pay-segmented label:has(input:checked) {
  background: var(--green);
  color: var(--text-on-dark);
}
.pay-segmented label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--green-soft);
}
[data-mode-fields] { display: flex; flex-direction: column; gap: var(--s-4); }
[data-mode-fields][hidden] { display: none; }
/* Calculator-scoped layout. Pinned to the pay-raise form so the live-results
   stack and label/value rows render correctly and independently of the shared
   generator-UI rules. Token-driven, so light + dark are inherited. */
[data-pay] .tool-output {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-4);
}
[data-pay] .conv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}
[data-pay] .conv-row .conv-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
[data-pay] .conv-row .conv-value {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: right;
}
[data-pay] .conv-row.primary .conv-value { font-size: var(--text-xl); }
[data-pay] .tool-error {
  font-size: var(--text-sm);
  color: var(--text-warn);
  background: color-mix(in oklab, var(--color-warn) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-warn) 30%, transparent);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
[data-pay] .tool-output-actions { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-4); }
/* Mobile tap-target floor. Every interactive control the calculator owns —
   the segmented mode switch, the form selects, and the copy/share buttons —
   gets a >= 44px touch height on small screens so the tool is comfortable to
   operate one-handed. Scoped to the calculator (and the segmented control) so
   the shared desktop chrome is untouched. */
@media (max-width: 640px) {
  [data-pay] .tool-field select,
  [data-pay] .tool-field input[type="text"] {
    min-height: 44px;
  }
  [data-pay] .tool-output-actions .btn-sm,
  .pay-share-row .btn-sm,
  .pay-share-row .btn-ghost {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* merged: linkedin/pto tool-output additions */
/* ---------- Mobile touch-target + result-first refinements ----------
   Touch targets on phones must clear 44px (WCAG 2.5.5 / iOS HIG). The base
   control padding lands form fields and small buttons around 40px, so bump
   them on narrow viewports. Additive + token-driven; applies to every tool
   so the whole suite gets the same tappable controls on mobile. */
@media (max-width: 600px) {
  .tool-field input,
  .tool-field select,
  .tool-field textarea {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .tool-field textarea { min-height: 88px; }
  .btn-sm,
  .btn.btn-sm,
  .btn-ghost.btn-sm,
  .tool-output-actions .btn,
  .tool-output-actions button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .faq summary { min-height: 44px; display: flex; align-items: center; }
  /* Result-is-hero on phones: for long-form calculators the live result
     box and its actions float to the top of the stacked form so the answer
     is visible above the fold while the inputs sit just below. The form
     already renders a real result on first paint, so this reads as an
     answer, not an empty placeholder. */
  .tool-form--result-first { display: flex; flex-direction: column; }
  .tool-form--result-first > [data-output] { order: -2; margin-bottom: var(--s-2); }
  .tool-form--result-first > .tool-output-actions { order: -1; margin-bottom: var(--s-3); }
  .tool-form--result-first > [data-error] { order: -3; }
}

/* =========================================================
   Mobile QA fixes (light theme only) — header CTA, eyebrow
   pill, tracker empty state. Scoped to phone breakpoints so
   the desktop layout and the in-tool output-action buttons
   are untouched.
   ========================================================= */
@media (max-width: 760px) {
  /* FIX A — Header "Start free" CTA: with .nav-links hidden, the lone
     btn-sm CTA reads as a tiny cramped pill. Give the HEADER CTA a more
     comfortable tap target (more horizontal padding + larger text).
     Scoped to .nav .nav-right so the in-tool .tool-output-actions /
     [data-copy] btn-sm buttons keep their compact sizing. The 44px
     min-height from the existing touch-target rule still applies. */
  .nav .nav-right .btn.btn-sm {
    padding: 10px 20px;
    font-size: var(--text-sm);
  }

  /* FIX D — Shared doc-editor modal header: on phones the title, the
     Copy/Download PDF buttons, and the close × all crowd onto one bar
     and wrap awkwardly. Stack the bar vertically: title on its own row,
     action buttons in a tidy full-width row below, and the × pinned to
     a fixed top-right corner that never collides. Shared by every
     generator (StandoutDocEditor). Desktop bar (outside this query) is
     unchanged. */
  .doc-viewer-bar {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
    padding: var(--s-4);
  }
  .doc-viewer-head { padding-right: 40px; }
  .doc-viewer-actions {
    flex-wrap: nowrap;
    justify-content: stretch;
    gap: var(--s-3);
  }
  .doc-viewer-actions .btn {
    flex: 1 1 0;
    min-height: 44px;
  }
  .doc-viewer-close {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    width: 40px;
    height: 40px;
  }

  /* FIX B — Eyebrow pill: even after the earlier letter-spacing trim the
     uppercase string ("FREE TOOLS · NO SIGNUP · WORKS IN YOUR BROWSER")
     wraps to a cramped two-line box on ~390px. Tighten spacing + font
     and balance the wrap so it reads as a deliberate, centered two-line
     pill: dot top-aligned, tight line-height, even padding. Desktop rule
     (line ~100) is unchanged. */
  .eyebrow-pill {
    align-items: flex-start;
    gap: 6px;
    letter-spacing: 0.04em;
    font-size: 10px;
    padding: 7px 14px;
    line-height: 1.35;
    text-align: center;
    text-wrap: balance;
  }
  .eyebrow-pill .dot { margin-top: 4px; }

  /* FIX C — Job tracker: on a 390px viewport the table is ~453px wide,
     so the action buttons sit off-screen and the empty-state message
     clips. Render the table as stacked CARDS on mobile: each <tr> is a
     bordered card, the <thead> is hidden, and each <td> is labelled by
     its column name via data-label (the JS row template stamps
     data-label="Company"/"Role"/"Status"/"Date"/"Link"/"Actions"). The
     desktop table (outside this query) is untouched. */
  .tracker { overflow-x: visible; }
  .tracker-table,
  .tracker-table tbody,
  .tracker-table tr,
  .tracker-table td {
    display: block;
    width: auto;
  }
  /* Hide the column header row only — keep it for screen readers off-screen. */
  .tracker-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tracker-table tr.trow {
    border: 1px solid var(--hairline-2);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-3);
  }
  .tracker-table tr.trow:last-child { margin-bottom: 0; }
  .tracker-table tr.is-editing { border-color: var(--green); }
  .tracker-table tr.is-editing td { background: transparent; }
  /* Each cell becomes a labelled row: "Label  value". */
  .tracker-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: 6px 0;
    border-bottom: 0;
    text-align: right;
  }
  .tracker-table td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
    text-align: left;
    flex: none;
  }
  .tracker-table .t-date { white-space: normal; }
  /* Actions row: full-width, comfortable >=40px tap targets. */
  .tracker-table td[data-label="Actions"] {
    justify-content: flex-end;
    padding-top: var(--s-3);
    margin-top: 2px;
    border-top: 1px solid var(--hairline);
  }
  .tracker-table .row-actions { gap: var(--s-3); }
  .tracker-table .row-edit,
  .tracker-table .row-del {
    width: 40px;
    height: 40px;
    border: 1px solid var(--hairline-2);
  }
  /* Empty state: one centered card with no data-label prefix. */
  .tracker-table tr:has(> .tracker-empty) {
    border: 1px solid var(--hairline-2);
    border-radius: var(--r-md);
    background: var(--surface);
  }
  .tracker-table .tracker-empty {
    display: block;
    text-align: center;
    white-space: normal;
    padding: var(--s-6) var(--s-4);
  }
  .tracker-table .tracker-empty::before { content: none; }
}