/* Career Tools · shared premium layer.
   Loaded last on every Career Tools page (resume builder SPA views and the
   ATS checker). Aligns every section to the header's content column and
   unifies accents with the resume builder landing. Light-only by design. */

body.career-tools {
  --cp-col: min(1172px, calc(100% - 40px));
  --cp-ink: #171c24;
  --cp-muted: #5f6672;
  --cp-line: #e5e7dd;
  --cp-line-strong: #d4d8ca;
  --cp-surface: #ffffff;
  --cp-bg-deep: #f0f1eb;
  --cp-accent: #ffc107;
  --cp-accent-soft: #fff4cc;
  --cp-forest: #5f6b45;
  --cp-shadow: 0 1px 2px rgba(23, 28, 36, 0.04), 0 14px 34px rgba(23, 28, 36, 0.06);
}
@media (max-width: 480px) {
  body.career-tools {
    --cp-col: calc(100% - 32px);
  }
}

/* ── One accent colour for eyebrows (was a stray blue) ───────────── */
body.career-tools .ct-kicker,
body.career-tools .page-head .ct-kicker {
  color: var(--cp-forest);
}
body.career-tools .ct-split .ct-kicker-on-dark {
  color: var(--cp-accent);
}

/* ── Workspace sub-navigation: same column as the header ─────────── */
body.career-tools .subnav {
  padding-inline: max(20px, calc((100% - 1172px) / 2));
  gap: 6px;
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
body.career-tools .subnav a {
  padding: 7px 12px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
body.career-tools .subnav a:hover {
  background: var(--cp-bg-deep);
  color: var(--cp-ink);
}
body.career-tools .subnav a.active {
  background: var(--cp-ink);
  color: #fff;
  box-shadow: none;
  text-decoration: none;
}
@media (max-width: 640px) {
  body.career-tools .subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }
  body.career-tools .subnav::-webkit-scrollbar {
    display: none;
  }
}

/* ── Page heads (Templates, My resumes, Pricing, Account) ────────── */
body.career-tools .page-head {
  padding-top: 40px;
}
body.career-tools .page-head h1 {
  font-family: "Space Grotesk", Manrope, system-ui, sans-serif;
  font-size: clamp(34px, 4.4vw, 52px);
  letter-spacing: -0.045em;
  line-height: 1.04;
}
body.career-tools .page-head .section-heading p {
  font-size: 16px;
  max-width: 60ch;
}

/* ── Template gallery ────────────────────────────────────────────── */
body.career-tools .filter-search input,
html.theme-light body.career-tools .filter-search input {
  min-height: 50px;
  padding-left: 46px;
  border-radius: 14px;
  border: 1px solid var(--cp-line-strong);
  background:
    var(--cp-surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6672' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E")
    16px center / 18px no-repeat;
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(23, 28, 36, 0.04);
}
body.career-tools .filter-search input:focus,
html.theme-light body.career-tools .filter-search input:focus {
  outline: none;
  border-color: var(--cp-ink);
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.28);
}
body.career-tools .chip {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.career-tools .chip:hover {
  border-color: var(--cp-ink);
}
body.career-tools .count {
  font-weight: 600;
  color: var(--cp-muted);
}

body.career-tools main.page-bg .template-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 22px;
}
body.career-tools main.page-bg .template-image {
  position: relative;
  padding: 16px 18px 14px;
  border-radius: 16px;
  border: 1px solid var(--cp-line);
  background: linear-gradient(180deg, #f3f4ef, #e9ebe3);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.career-tools main.page-bg .template-image::after {
  content: "Preview";
  position: absolute;
  left: 50%;
  bottom: 16px;
  translate: -50% 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--cp-ink);
  color: #fff;
  font: 650 13px/1 Inter, system-ui, sans-serif;
  opacity: 0;
  transition: opacity 0.18s ease, translate 0.18s ease;
  pointer-events: none;
}
body.career-tools main.page-bg .template-card:hover .template-image,
body.career-tools main.page-bg .template-image:focus-visible {
  border-color: var(--cp-line-strong);
  box-shadow: 0 20px 44px rgba(23, 28, 36, 0.12);
  transform: translateY(-3px);
}
body.career-tools main.page-bg .template-card:hover .template-image::after,
body.career-tools main.page-bg .template-image:focus-visible::after {
  opacity: 1;
  translate: -50% 0;
}
body.career-tools main.page-bg .template-image:focus-visible {
  outline: 3px solid var(--cp-accent);
  outline-offset: 3px;
}
body.career-tools main.page-bg .template-info {
  padding: 12px 2px 0;
}
body.career-tools main.page-bg .template-info h3 {
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  body.career-tools main.page-bg .template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  body.career-tools main.page-bg .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }
  body.career-tools main.page-bg .template-image {
    padding: 10px 12px 8px;
    border-radius: 12px;
  }
  body.career-tools main.page-bg .template-image::after {
    display: none;
  }
  body.career-tools main.page-bg .template-info h3 {
    font-size: 14px;
  }
  /* Category chips: one swipeable row instead of three wrapped rows. */
  body.career-tools .filters .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -20px;
    padding: 2px 20px 6px;
  }
  body.career-tools .filters .chips::-webkit-scrollbar {
    display: none;
  }
  body.career-tools .chip {
    flex: none;
  }
}

/* ── Pricing ─────────────────────────────────────────────────────── */
body.career-tools .pricing-grid-career {
  max-width: none;
  margin: 8px 0 28px;
  gap: 22px;
}
body.career-tools .pricing-grid-career .price-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 22px;
  border: 1px solid var(--cp-line);
  box-shadow: var(--cp-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.career-tools .pricing-grid-career .price-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(23, 28, 36, 0.1);
}
/* The free plan is the one most visitors want: make it the hero card. */
body.career-tools .pricing-grid-career .price-card:first-child {
  background: var(--cp-ink);
  border-color: var(--cp-ink);
}
body.career-tools .pricing-grid-career .price-card:first-child :is(h2, .price) {
  color: #fff;
}
body.career-tools .pricing-grid-career .price-card:first-child :is(p, li, small) {
  color: #c4c9d2;
}
body.career-tools .pricing-grid-career .price-card:first-child .button {
  background: var(--cp-accent);
  border-color: var(--cp-accent);
  color: #191204;
}
body.career-tools .price-card .eyebrow {
  align-self: flex-start;
  color: #7a5900;
  background: var(--cp-accent-soft);
  border-color: transparent;
}
body.career-tools .pricing-grid-career .price {
  font-family: "Space Grotesk", Manrope, system-ui, sans-serif;
  font-size: 40px;
  letter-spacing: -0.03em;
}
body.career-tools .pricing-grid-career .price small {
  font-family: Inter, system-ui, sans-serif;
}
body.career-tools .price-card ul {
  display: grid;
  gap: 10px;
  line-height: 1.5;
  margin: 18px 0 26px;
}
body.career-tools .price-card li {
  display: flex;
  gap: 10px;
}
body.career-tools .price-card li:before {
  margin-right: 0;
  font-weight: 800;
  color: var(--cp-forest);
}
body.career-tools .pricing-grid-career .price-card:first-child li:before {
  color: var(--cp-accent);
}
body.career-tools .pricing-grid-career .price-card .button {
  margin-top: auto;
}
body.career-tools .pricing-note {
  max-width: none;
  margin: 0 0 56px;
  padding: 28px;
  border-radius: 22px;
  background: var(--cp-bg-deep);
  border: 1px solid var(--cp-line);
  box-shadow: none;
}

/* ── ATS checker ─────────────────────────────────────────────────── */
body.career-tools-ats #ats-tool.ats-stage,
body.career-tools-ats .ats-how {
  width: var(--cp-col);
  max-width: none;
  margin-inline: auto;
  box-sizing: border-box;
}
body.career-tools-ats .ats-how {
  padding-inline: 0;
}
body.career-tools-ats #ats-tool.ats-stage {
  border-radius: 24px;
  box-shadow: var(--cp-shadow);
}
body.career-tools-ats .ats-how h2 {
  font-family: "Space Grotesk", Manrope, system-ui, sans-serif;
  letter-spacing: -0.03em;
}
body.career-tools-ats .ats-how .ct-how {
  gap: 20px;
}
body.career-tools-ats .ats-how .ct-how li {
  padding: 26px;
  border: 1px solid var(--cp-line);
  border-radius: 20px;
  background: var(--cp-surface);
}
body.career-tools-ats .ats-how .ct-how span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cp-accent-soft);
  color: #7a5900;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Build-a-resume band: dark panel, visible yellow button. */
body.career-tools-ats .ats-split-wrap .ct-split {
  border-radius: 28px;
  padding: 44px;
}
body.career-tools-ats .ats-split-wrap .ct-split .button {
  background: var(--cp-accent) !important;
  border-color: var(--cp-accent) !important;
  color: #191204 !important;
  margin-top: 8px;
}
body.career-tools-ats .ats-split-wrap .ct-split .button:hover {
  background: #ffcd38 !important;
  border-color: #ffcd38 !important;
}
@media (max-width: 760px) {
  /* Get people to the tool faster: the illustration is decorative. */
  body.career-tools-ats .ats-hero-art {
    display: none;
  }
  body.career-tools-ats .ats-how .ct-how {
    grid-template-columns: 1fr;
  }
  body.career-tools-ats .ats-split-wrap .ct-split {
    padding: 28px 22px;
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.career-tools .subnav a,
  body.career-tools .chip,
  body.career-tools main.page-bg .template-image,
  body.career-tools main.page-bg .template-image::after {
    transition: none;
  }
}

/* ── Buttons: no more stray blue in the workspace ───────────────── */
html.theme-light body.career-tools .button.secondary,
body.career-tools.light .button.secondary {
  background: var(--cp-surface);
  color: var(--cp-ink);
  border-color: var(--cp-line-strong);
}
html.theme-light body.career-tools .button.secondary:hover,
body.career-tools.light .button.secondary:hover {
  border-color: var(--cp-ink);
  background: var(--cp-surface);
}
html.theme-light body.career-tools .button.danger:not(.secondary):not(.ghost),
body.career-tools.light .button.danger:not(.secondary):not(.ghost) {
  background: #fff1f1;
  color: #a92e36;
  border-color: #f1cace;
}
html.theme-light body.career-tools .button.danger:not(.secondary):not(.ghost):hover,
body.career-tools.light .button.danger:not(.secondary):not(.ghost):hover {
  background: #a92e36;
  border-color: #a92e36;
  color: #fff;
}
body.career-tools .eyebrow {
  color: var(--cp-forest);
}

/* ── Page head with an action (My resumes) ───────────────────────── */
body.career-tools .page-head .section-heading {
  justify-content: space-between;
  max-width: none;
}
body.career-tools .page-head .section-heading > div {
  flex: 1 1 auto;
  min-width: 0;
}
body.career-tools .page-head .section-heading > .button {
  flex: none;
}

/* ── My resumes ──────────────────────────────────────────────────── */
body.career-tools .continue-draft,
html.theme-light body.career-tools .continue-draft,
body.career-tools.light .continue-draft {
  border-radius: 24px;
  padding: 28px 32px;
  background: var(--cp-ink);
  border: 1px solid var(--cp-ink);
  box-shadow: 0 24px 60px rgba(23, 28, 36, 0.16);
}
html body.career-tools .continue-draft h2 {
  color: #fff;
}
html body.career-tools .continue-draft p {
  color: #c4c9d2;
}
body.career-tools .continue-draft .eyebrow {
  background: rgba(255, 193, 7, 0.16);
  color: var(--cp-accent);
  border-color: transparent;
}
html body.career-tools .continue-draft .button:not(.secondary):not(.ghost):not(.chip) {
  background: var(--cp-accent);
  border-color: var(--cp-accent);
  color: #191204;
}
html body.career-tools .continue-draft .button:not(.secondary):not(.ghost):not(.chip):hover {
  background: #ffcd38;
  border-color: #ffcd38;
}
body.career-tools .continue-icon,
body.career-tools .document-icon {
  background: var(--cp-accent-soft);
  color: #7a5900;
  border-color: transparent;
}
body.career-tools .continue-draft .continue-icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--cp-accent);
}
body.career-tools .dashboard-section-title h2 {
  font-family: "Space Grotesk", Manrope, system-ui, sans-serif;
  letter-spacing: -0.02em;
}
body.career-tools .dashboard-grid {
  gap: 20px;
}
body.career-tools .resume-card {
  border-radius: 20px;
  border: 1px solid var(--cp-line);
  box-shadow: var(--cp-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
body.career-tools .resume-card:hover {
  transform: translateY(-3px);
  border-color: var(--cp-line-strong);
  box-shadow: 0 20px 44px rgba(23, 28, 36, 0.1);
}
body.career-tools .resume-card h2 {
  font-family: "Space Grotesk", Manrope, system-ui, sans-serif;
  letter-spacing: -0.02em;
}
body.career-tools .resume-card .actions {
  gap: 8px;
}

/* ── Account ─────────────────────────────────────────────────────── */
body.career-tools .account-layout {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
body.career-tools .account-layout .card {
  margin: 0;
  border-radius: 22px;
  border: 1px solid var(--cp-line);
  box-shadow: var(--cp-shadow);
}
body.career-tools .account-layout .card:first-child {
  background: var(--cp-ink);
  border-color: var(--cp-ink);
}
body.career-tools .account-layout .card:first-child h2 {
  color: #fff;
}
body.career-tools .account-layout .card:first-child :is(p, .hint) {
  color: #c4c9d2;
}
body.career-tools .account-layout .card:last-child {
  border-color: #f1cace;
  background: #fffafa;
}
body.career-tools .account-layout h2 {
  font-family: "Space Grotesk", Manrope, system-ui, sans-serif;
  letter-spacing: -0.02em;
}
@media (max-width: 860px) {
  body.career-tools .account-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Editor ──────────────────────────────────────────────────────── */
body.career-tools .section-nav button {
  border-radius: 10px;
}
body.career-tools .section-nav button.active {
  background: var(--cp-ink);
  color: #fff;
  font-weight: 650;
}
body.career-tools .section-nav button.active .num {
  color: var(--cp-accent);
}
body.career-tools .section-nav button:not(.active):hover {
  background: var(--cp-bg-deep);
  color: var(--cp-ink);
}
body.career-tools .editor-toolbar h1,
body.career-tools .editor-toolbar h2 {
  font-family: "Space Grotesk", Manrope, system-ui, sans-serif;
  letter-spacing: -0.02em;
}
body.career-tools .edit-panel input:focus,
body.career-tools .edit-panel textarea:focus,
body.career-tools .edit-panel select:focus {
  outline: none;
  border-color: var(--cp-ink);
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.24);
}

/* ── Sign in / create account ────────────────────────────────────── */
body.career-tools-auth {
  background:
    radial-gradient(640px 360px at 85% 0%, rgba(255, 193, 7, 0.14), transparent 70%),
    radial-gradient(560px 320px at 0% 100%, rgba(95, 107, 69, 0.1), transparent 70%),
    #fafaf7;
}
.career-tools-auth .auth-page {
  min-height: 100svh;
  display: grid;
  align-content: center;
}
.career-tools-auth .auth-shell {
  border-radius: 28px;
  border-color: var(--cp-line);
  box-shadow: 0 30px 80px rgba(23, 28, 36, 0.12);
}
.career-tools-auth .auth-story {
  position: relative;
  overflow: hidden;
  background: var(--cp-ink);
  color: #fff;
  padding: 36px 44px;
}
.career-tools-auth .auth-story::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -180px;
  top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 193, 7, 0.24), transparent 65%);
  pointer-events: none;
}
.career-tools-auth .auth-story > * {
  position: relative;
}
.career-tools-auth .auth-back {
  color: #c4c9d2;
  text-decoration: none;
}
.career-tools-auth .auth-back:hover {
  color: #fff;
}
.career-tools-auth .auth-eyebrow {
  color: var(--cp-accent);
  font-size: 11px;
}
.career-tools-auth .auth-story h2 {
  color: #fff;
  font-family: "Space Grotesk", Manrope, system-ui, sans-serif;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.career-tools-auth .auth-story-lead {
  color: #c4c9d2;
  font-size: 15px;
}
.career-tools-auth .auth-workspace-preview {
  color: var(--cp-ink);
  background: #fff;
  border-color: transparent;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.career-tools-auth .auth-preview-progress i {
  background: var(--cp-accent);
}
.career-tools-auth .auth-benefits {
  color: #e7e9ee;
  font-size: 14px;
}
.career-tools-auth .auth-benefits li::before {
  color: var(--cp-accent);
  font-weight: 800;
}
.career-tools-auth .auth-story-bottom {
  color: #9aa1ad;
  font-size: 12px;
}
.career-tools-auth .auth-card {
  padding: 44px 48px 30px;
}
.career-tools-auth .auth-card .ct-kicker {
  color: var(--cp-forest);
  font-size: 11px;
}
.career-tools-auth .auth-card h1 {
  font-family: "Space Grotesk", Manrope, system-ui, sans-serif;
  font-size: 36px;
  letter-spacing: -0.04em;
}
.career-tools-auth .auth-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--cp-muted);
}
/* Segmented control instead of blue underline tabs. */
.career-tools-auth .auth-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: 14px;
  background: var(--cp-bg-deep);
}
.career-tools-auth .auth-mode-tabs button {
  padding: 11px 0;
  border-radius: 10px;
  font-weight: 650;
  color: var(--cp-muted);
}
html body.career-tools-auth .auth-mode-tabs button.active,
html.theme-light body.career-tools.career-tools-auth .auth-mode-tabs button.active {
  background: var(--cp-surface);
  color: var(--cp-ink);
  box-shadow: 0 1px 3px rgba(23, 28, 36, 0.12);
}
.career-tools-auth .auth-google,
html.theme-light body.career-tools-auth .auth-google {
  min-height: 50px;
  border-radius: 12px;
  border-color: var(--cp-line-strong);
  color: var(--cp-ink);
  font-size: 15px;
  font-weight: 650;
}
.career-tools-auth .auth-google:hover {
  border-color: var(--cp-ink);
}
.career-tools-auth .auth-card label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cp-ink);
}
.career-tools-auth .auth-card input:not([type="checkbox"]) {
  height: 50px;
  border-radius: 12px;
  border-color: var(--cp-line-strong);
  background: #fff;
  font-size: 15px;
}
.career-tools-auth .auth-card input:not([type="checkbox"]):focus {
  outline: none;
  border-color: var(--cp-ink);
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.24);
}
.career-tools-auth .auth-primary {
  min-height: 52px;
  border-radius: 12px;
  font-size: 15px;
}
.career-tools-auth .auth-help-link,
.career-tools-auth .auth-card .check-label {
  font-size: 13px;
}
.career-tools-auth .auth-note,
.career-tools-auth .auth-bottom-links {
  font-size: 12px;
}
@media (max-width: 800px) {
  .career-tools-auth .auth-page {
    min-height: 0;
    align-content: start;
  }
  /* On phones the dark panel collapses to a slim branded strip. */
  .career-tools-auth .auth-story {
    padding: 18px 24px;
  }
  .career-tools-auth .auth-card {
    padding: 30px 24px 24px;
  }
  .career-tools-auth .auth-card h1 {
    font-size: 30px;
  }
}

/* ── Editor: live preview must never be squeezed ─────────────────
   styles.css caps every iframe at max-width:100%, which shrank the
   794px A4 page into the column and clipped it on phones and laptops. */
body.career-tools .preview-canvas iframe {
  max-width: none;
}

/* Section progress: a tick once a section has content. */
body.career-tools .section-nav button.is-done::after {
  content: "✓";
  margin-left: auto;
  padding-left: 8px;
  font-weight: 800;
  color: var(--cp-forest);
}
body.career-tools .section-nav button.is-done.active::after {
  color: var(--cp-accent);
}
body.career-tools .section-nav button {
  display: flex;
  align-items: center;
}

/* Back / Next step bar at the end of every section form. */
body.career-tools .step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--cp-line);
}
body.career-tools .step-count {
  font-size: 13px;
  font-weight: 650;
  color: var(--cp-muted);
}
body.career-tools .step-buttons {
  display: flex;
  gap: 10px;
  margin-left: auto;
}
body.career-tools .step-buttons .button {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 650;
}

/* Friendlier fields and entry cards. */
body.career-tools .edit-panel .field input,
body.career-tools .edit-panel .field textarea,
body.career-tools .edit-panel .field select {
  border-radius: 12px;
  font-size: 16px; /* 16px stops iOS Safari zooming in on focus */
}
body.career-tools .edit-panel .field textarea {
  line-height: 1.55;
}
body.career-tools .edit-panel .field ::placeholder {
  color: #9aa0a8;
}
body.career-tools .edit-panel .entry-form {
  border-radius: 18px;
  border: 1px solid var(--cp-line);
  background: var(--cp-surface);
}
body.career-tools .edit-panel .add-entry {
  border-radius: 14px;
  border: 1.5px dashed var(--cp-line-strong);
  background: var(--cp-surface);
  color: var(--cp-ink);
  font-weight: 650;
  min-height: 52px;
}
body.career-tools .edit-panel .add-entry:hover {
  border-color: var(--cp-ink);
}

@media (max-width: 900px) {
  /* Compact header so the form starts higher on phones. */
  body.career-tools .editor-toolbar {
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  body.career-tools .editor-toolbar .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  body.career-tools .editor-toolbar .actions .button {
    min-height: 42px;
    font-size: 13px;
  }
  body.career-tools .editor-toolbar #export-button {
    grid-column: 1 / -1;
    background: var(--cp-accent);
    border-color: var(--cp-accent);
    color: #191204;
  }
  /* Edit / Preview switch stays in reach while scrolling. */
  body.career-tools .mobile-editor-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(250, 250, 247, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  body.career-tools .step-nav {
    position: sticky;
    bottom: 0;
    z-index: 15;
    margin-inline: -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -10px 24px rgba(23, 28, 36, 0.06);
  }
  body.career-tools .step-count {
    width: 100%;
    font-size: 12px;
  }
  body.career-tools .step-buttons {
    width: 100%;
    margin-left: 0;
  }
  body.career-tools .step-buttons .button {
    flex: 1;
    justify-content: center;
  }
  body.career-tools .step-buttons .button.secondary {
    flex: 0 0 auto;
  }
}

/* ── Templates tips (below gallery) + skeletons ──────────────────── */
body.career-tools .templates-tips {
  padding: 48px 0 80px;
  margin-top: 36px;
  border-top: 1px solid var(--cp-line, #e6e3db);
}
body.career-tools .templates-tips-head {
  max-width: 40rem;
  margin-bottom: 22px;
}
body.career-tools .templates-tips-head h2 {
  font-family: "Space Grotesk", Manrope, system-ui, sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin: 0 0 10px;
}
body.career-tools .templates-tips-lede {
  margin: 0;
  color: var(--cp-muted, #5f6672);
  font-size: 15px;
  line-height: 1.55;
}
body.career-tools .templates-tips-lede a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.career-tools .templates-tip-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
body.career-tools .templates-tip-grid li {
  margin: 0;
  padding: 22px 20px 20px;
  border: 1px solid var(--cp-line, #e6e3db);
  border-radius: 18px;
  background: var(--cp-surface, #fff);
  box-shadow: 0 1px 2px rgba(23, 28, 36, 0.03);
}
body.career-tools .templates-tip-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.7rem;
  padding: 0 0.55rem;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #fff4cc;
  color: #5a4a12;
  font-family: "Space Grotesk", Manrope, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
body.career-tools .templates-tip-grid h3 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -0.02em;
}
body.career-tools .templates-tip-grid p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cp-muted, #5f6672);
  max-width: none;
}
body.career-tools .templates-tip-grid a {
  color: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.career-tools .templates-featured {
  margin-top: 40px;
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: #f3f4ef;
  border: 1px solid var(--cp-line, #e6e3db);
}
body.career-tools .templates-featured-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 14px;
}
body.career-tools .templates-featured-title {
  font-family: "Space Grotesk", Manrope, system-ui, sans-serif;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.2;
}
body.career-tools .templates-featured-head p {
  margin: 0;
  font-size: 13px;
  color: var(--cp-muted, #5f6672);
}
body.career-tools .templates-name-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.career-tools .templates-name-grid li {
  margin: 0;
}
body.career-tools .templates-name-grid a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(23, 28, 36, 0.1);
  background: #fff;
  color: var(--cp-ink, #171c24);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
body.career-tools .templates-name-grid a:hover {
  border-color: var(--cp-ink, #171c24);
  background: #fffdf5;
}
body.career-tools .templates-name-grid em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--cp-muted, #5f6672);
}
body.career-tools .templates-faq-block {
  margin-top: 40px;
  max-width: 42rem;
}
body.career-tools .templates-faq-block .templates-featured-title {
  margin-bottom: 12px;
}
body.career-tools .templates-faq {
  margin-top: 0;
}
body.career-tools .templates-faq details {
  border-radius: 14px;
  border: 1px solid var(--cp-line, #e6e3db);
  background: #fff;
  margin: 0 0 8px;
}
body.career-tools .templates-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  font-weight: 650;
}
body.career-tools .templates-faq summary::-webkit-details-marker {
  display: none;
}
body.career-tools .templates-faq details p {
  margin: 0;
  padding: 0 16px 14px;
  color: var(--cp-muted, #5f6672);
  font-size: 14px;
  line-height: 1.55;
}
@media (max-width: 860px) {
  body.career-tools .templates-tip-grid {
    grid-template-columns: 1fr;
  }
}
body.career-tools .skeleton-grid {
  margin-top: 8px;
}
body.career-tools .skeleton-card {
  pointer-events: none;
}
body.career-tools .skeleton-thumb {
  aspect-ratio: 500 / 707;
  border-radius: 12px;
  background: linear-gradient(90deg, #eceae4 0%, #f5f3ed 45%, #eceae4 100%);
  background-size: 200% 100%;
  animation: rb-skel 1.2s ease-in-out infinite;
}
body.career-tools .skeleton-lines {
  padding: 12px 4px 0;
  display: grid;
  gap: 8px;
}
body.career-tools .skeleton-lines span {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: #e6e3db;
}
body.career-tools .skeleton-lines span:last-child {
  width: 42%;
}
body.career-tools .gallery-more {
  display: flex;
  justify-content: center;
  margin: 28px 0 8px;
}
@keyframes rb-skel {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.career-tools .skeleton-thumb {
    animation: none;
  }
}