/* =========================================================================
   Resume Skills — page-type stylesheet for /resume-skills/<role-slug>.

   Class prefix: rs-  (resume skills)
   Reuses cross-site primitives where they exist:
     - .blog-hero, .breadcrumbs, .author-box, .article-dates  (resume-template.css)
     - .rt-content, .rt-content--alt, .rt-content__head,
       .rt-content__eyebrow, .rt-levels, .rt-level, .rt-fams, .rt-fam,
       .rt-fam-card  (resume-template.css)
     - .tcv-free-review-split, .fr-*, .fr-card  (main.css)
     - #faq.tcv-faq, .tcv-faq__item, .tcv-faq__q, .tcv-faq__a  (main.css)
     - .tcv-footer  (main.css)

   Page-specific components live below.
   ========================================================================= */


/* ---------- Global h3 reset for this page type ----------
   main.css ships a default `h3 { text-align: center; letter-spacing: 1.5px; }`
   that cascades onto every component title (.rs-cat__title, .rs-soft__name,
   etc.). The components are all left-aligned cards with custom typography,
   so reset both properties at the root of the page-type stylesheet.
   Individual title rules below still set their own font-size / weight. */

.rs-cat__title,
.rs-quickref__h3,
.rs-ats-tile__title,
.rs-soft__name,
.rs-step__title,
.rs-mistake__title,
.rs-level__name,
.rs-next-card__title,
.rs-intro__sub,
.rs-howto__rule-title {
  text-align: left;
  letter-spacing: -0.01em;
}


/* ---------- Vertical rhythm overrides ----------
   .rt-content ships with 64px top + bottom padding (from resume-template.css).
   On this page type the body has many short sections back-to-back, which made
   the intro -> quick-reference transition feel cavernous. Tighten the section
   padding globally here (scoped: this CSS only loads on /resume-skills/*). */

.rt-content { padding-top: 44px; padding-bottom: 44px; }

/* The intro carries a two-column "problem / solution" layout below the head,
   trim the section so the head sits tight against the columns. */
.rs-intro { padding-top: 32px; padding-bottom: 28px; }
.rs-intro .rt-content__head { margin-bottom: 0; }

/* The quick-reference section follows the intro and benefits from being
   pulled up a touch as well; the board itself carries enough visual weight. */
.rs-quickref { padding-top: 28px; }


/* ---------- Intro two-column layout ----------
   Mirrors the .erw-blk__intro pattern on /engineering-resume-writer §SOLUTION:
   two parallel arguments side by side with a faded vertical divider between
   them, collapsing to a single stacked column with a horizontal rule below
   820px. Each column has a bold subhead and a paragraph. */

.rs-intro__cols {
  max-width: 1080px;
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  align-items: start;
  font-size: 16px;
  line-height: 1.65;
  color: #475569;
  text-align: left;
}

.rs-intro__cols > div { position: relative; }

.rs-intro__cols > div:first-child { padding-right: 28px; }

.rs-intro__cols > div:first-child::after {
  content: "";
  position: absolute;
  right: -28px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, transparent, #cbd5e1 20%, #cbd5e1 80%, transparent);
}

.rs-intro__sub {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-align: left;
}

.rs-intro__cols p {
  margin: 0 0 10px;
  text-align: left;
  color: #475569;
  font-size: 16px;
  line-height: 1.65;
}

.rs-intro__cols p:last-child { margin-bottom: 0; }
.rs-intro__cols strong { color: #0f172a; font-weight: 700; }

.rs-intro__cols a {
  color: #1d4ed8;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(29,78,216,0.35);
  transition: border-color 120ms ease, color 120ms ease;
}

.rs-intro__cols a:hover {
  color: #0b3a82;
  border-bottom-color: #0b3a82;
}

@media (max-width: 820px) {
  .rs-intro__cols {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 720px;
  }
  .rs-intro__cols > div:first-child {
    padding-right: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
  }
  .rs-intro__cols > div:first-child::after { display: none; }
}


/* ---------- Quick-reference two-panel layout ----------
   Two side-by-side tools below the section head:
     - Left: industry-standard skill list (the original chip board).
     - Right: a client-side scanner that extracts keywords from a pasted JD.
   Each panel is a card with a soft shadow; they stack on narrower viewports.

   The H3 in each panel intentionally carries the target keyword phrasing
   ("Data Scientist resume skills", "Data Scientist resume keywords") so the
   page reinforces both search intents at a scannable position. */

.rs-quickref__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: stretch;
}

.rs-quickref__panel {
  background: #fff;
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 14px 40px -22px rgba(15,23,42,0.22);
  border: 1px solid rgba(15,23,42,0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rs-quickref__h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.rs-quickref__sub {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

.rs-quickref__sub strong { color: #0f172a; }

.rs-quickref__grid {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

@media (max-width: 1024px) {
  .rs-quickref__cols { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 540px) {
  .rs-quickref__grid { grid-template-columns: 1fr; }
}


/* ---------- JD scanner (right panel of quick-reference) ---------- */

.rs-scanner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.rs-scanner__input {
  width: 100%;
  min-height: 158px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px 14px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: #0f172a;
  resize: vertical;
  outline: none;
  background: #fafbfc;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-sizing: border-box;
}

.rs-scanner__input:focus {
  border-color: #1a73e8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.15);
}

.rs-scanner__input::placeholder { color: #94a3b8; }

.rs-scanner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.rs-scanner__btn {
  background: #1a73e8;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease, transform 0.18s ease;
}

.rs-scanner__btn:hover { background: #1457b4; transform: translateY(-1px); }

.rs-scanner__link {
  background: none;
  border: 0;
  color: #1a73e8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 6px 4px;
  font-family: inherit;
}

.rs-scanner__link:hover { color: #0b3a82; }

.rs-scanner__clear {
  margin-left: auto;
  background: none;
  border: 1px solid #cbd5e1;
  color: #475569;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.rs-scanner__clear:hover { background: #f1f5f9; }

.rs-scanner__result { min-height: 120px; }

.rs-scanner__placeholder {
  color: #94a3b8;
  font-size: 13px;
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  margin: 0;
  background: #fafbfc;
  line-height: 1.55;
}

.rs-scanner__matches { display: flex; flex-direction: column; gap: 14px; }

.rs-scanner__hits {
  font-size: 13.5px;
  color: #0f172a;
  margin: 0;
  line-height: 1.6;
}

.rs-scanner__hits strong { color: #1a73e8; font-weight: 700; }

.rs-scanner__group { display: flex; flex-direction: column; gap: 6px; }

.rs-scanner__group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  color: #475569;
}

.rs-scanner__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.rs-scanner__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Inter', system-ui, sans-serif;
}

.rs-scanner__chip[data-tier="must"]   { background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe; }
.rs-scanner__chip[data-tier="strong"] { background: #ecfdf5; color: #0d9488; border: 1px solid #ccfbf1; }
.rs-scanner__chip[data-tier="bonus"]  { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }

.rs-scanner__chip-count {
  font-family: 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
  font-size: 10.5px;
  opacity: 0.75;
  font-weight: 700;
}


/* ---------- Quick-reference chip board (original list, reused) ----------
   Above-the-fold scannable list of the top 15-20 skills/keywords.
   Renders as a soft-shadow board with rank pills + skill chips.
   Built for featured-snippet capture: structured list, scannable. */

.rs-board {
  background: #fff;
  border-radius: 22px;
  padding: 36px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 18px 50px -28px rgba(15,23,42,0.22);
  border: 1px solid rgba(15,23,42,0.06);
  max-width: 1100px;
  margin: 0 auto;
}

.rs-board__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: #4d5562;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(15,23,42,0.07);
}

.rs-board__legend-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
}

.rs-board__legend-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rs-dot, #1a73e8);
}

.rs-board__legend-dot[data-tier="must"]::before  { background: #1a73e8; }
.rs-board__legend-dot[data-tier="strong"]::before { background: #14b8a6; }
.rs-board__legend-dot[data-tier="bonus"]::before  { background: #94a3b8; }

.rs-board__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.rs-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.rs-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -14px rgba(15,23,42,0.25);
  border-color: #cbd5e1;
}

.rs-chip__rank {
  font-family: 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #1a73e8;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  flex-shrink: 0;
}

.rs-chip[data-tier="strong"] .rs-chip__rank { background: #14b8a6; }
.rs-chip[data-tier="bonus"]  .rs-chip__rank { background: #94a3b8; }

.rs-chip__label {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.005em;
}

.rs-chip__meta {
  font-size: 11.5px;
  color: #64748b;
  margin-left: auto;
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .rs-board { padding: 24px 18px; border-radius: 16px; }
  .rs-board__grid { grid-template-columns: 1fr; }
}


/* ---------- Hard-skills category stack ----------
   7 category cards in a single vertical stack. Each card is a 2-pane row:
   left pane carries the colored icon + category title, right pane carries
   the description, the skill chips, and the copy-paste phrase. The color
   accent runs down the left edge of each card so the stack has rhythm. */

.rs-cat-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
}

.rs-cat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 26px 22px 30px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-areas:
    "head desc"
    "head chips"
    "head phrase";
  column-gap: 36px;
  row-gap: 10px;
  align-items: start;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Colored accent down the left edge (replaces the top strip). */
.rs-cat::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--rs-cat-color, #1a73e8);
  opacity: 0.95;
}

.rs-cat:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -22px rgba(15,23,42,0.18);
  border-color: #cbd5e1;
}

.rs-cat__head {
  grid-area: head;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding-right: 24px;
  border-right: 1px solid #f1f5f9;
  align-self: stretch;
}

.rs-cat__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--rs-cat-tint, #eff6ff);
  color: var(--rs-cat-color, #1a73e8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rs-cat__icon svg { width: 22px; height: 22px; }

.rs-cat__title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
  min-width: 0;
}

.rs-cat__desc {
  grid-area: desc;
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

.rs-cat__chips {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rs-cat__chip {
  font-size: 12.5px;
  font-weight: 500;
  color: #1e293b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
  letter-spacing: -0.005em;
}

.rs-cat__chip--star {
  background: var(--rs-cat-tint, #eff6ff);
  border-color: var(--rs-cat-color, #1a73e8);
  color: var(--rs-cat-color, #1a73e8);
  font-weight: 600;
}

.rs-cat__phrase {
  grid-area: phrase;
  font-size: 13px;
  color: #475569;
  margin: 0;
  padding: 10px 14px;
  background: #f8fafc;
  border-left: 3px solid var(--rs-cat-color, #1a73e8);
  border-radius: 0 8px 8px 0;
  line-height: 1.5;
  font-family: 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
  font-style: normal;
}

/* On narrow screens, drop the side rail and stack the panes top-to-bottom. */
@media (max-width: 720px) {
  .rs-cat {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "desc"
      "chips"
      "phrase";
    column-gap: 0;
    row-gap: 12px;
    padding: 20px 22px 20px 26px;
  }
  .rs-cat__head {
    flex-direction: row;
    align-items: center;
    border-right: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
}

/* Per-category palette: set the two vars on the .rs-cat element. */
.rs-cat[data-color="blue"]   { --rs-cat-color: #1a73e8; --rs-cat-tint: #eff6ff; }
.rs-cat[data-color="green"]  { --rs-cat-color: #14b8a6; --rs-cat-tint: #ecfdf5; }
.rs-cat[data-color="violet"] { --rs-cat-color: #7c3aed; --rs-cat-tint: #f5f3ff; }
.rs-cat[data-color="amber"]  { --rs-cat-color: #d97706; --rs-cat-tint: #fffbeb; }
.rs-cat[data-color="rose"]   { --rs-cat-color: #e11d48; --rs-cat-tint: #fff1f2; }
.rs-cat[data-color="cyan"]   { --rs-cat-color: #0891b2; --rs-cat-tint: #ecfeff; }
.rs-cat[data-color="slate"]  { --rs-cat-color: #475569; --rs-cat-tint: #f8fafc; }


/* ---------- Soft-skill rows ----------
   Two-column rows: left = skill name + why, right = "How to show it on
   the resume" with a sample bullet. This is the differentiator vs.
   competitor pages that just list buzzwords. */

.rs-soft {
  display: grid;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}

.rs-soft__row {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  overflow: hidden;
}

.rs-soft__left {
  padding: 26px 26px;
  background: linear-gradient(180deg, #fafbfc 0%, #f4f7fb 100%);
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rs-soft__right {
  padding: 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rs-soft__name {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.01em;
}

.rs-soft__why {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

.rs-soft__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1a73e8;
  margin: 0;
}

.rs-soft__bullet {
  font-size: 14px;
  line-height: 1.65;
  color: #0f172a;
  background: #f8fafc;
  border-left: 3px solid #1a73e8;
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  margin: 0;
  font-family: 'Inter', sans-serif;
}

.rs-soft__bullet strong { color: #0f172a; }

@media (max-width: 760px) {
  .rs-soft__row { grid-template-columns: 1fr; }
  .rs-soft__left { border-right: none; border-bottom: 1px solid #e2e8f0; }
}


/* ---------- ATS keywords table ----------
   The "keywords" intent home: structured table that doubles as a
   featured-snippet target. Rows show keyword, intent (must/strong/bonus),
   typical context (where it lives in a JD), and a frequency bar. */

.rs-ats-wrap {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
}

.rs-ats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.rs-ats-tile {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "num title"
    "desc desc";
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
  text-align: left;
}

.rs-ats-tile__num {
  grid-area: num;
  font-family: 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #1a73e8;
  background: #eff6ff;
  width: fit-content;
  padding: 3px 9px;
  border-radius: 999px;
  align-self: center;
}

.rs-ats-tile__title {
  grid-area: title;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.3;
  align-self: center;
}

.rs-ats-tile__desc {
  grid-area: desc;
  font-size: 13.5px;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

.rs-table-wrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
}

.rs-table-head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 5fr) minmax(0, 2.5fr);
  background: #f8fafc;
  padding: 14px 22px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #475569;
}

.rs-table-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 5fr) minmax(0, 2.5fr);
  padding: 14px 22px;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  color: #0f172a;
}

.rs-table-row:last-child { border-bottom: none; }

.rs-table-row__kw {
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rs-table-row__kw::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a73e8;
}

.rs-table-row[data-tier="strong"] .rs-table-row__kw::before { background: #14b8a6; }
.rs-table-row[data-tier="bonus"]  .rs-table-row__kw::before { background: #94a3b8; }

.rs-table-row__tier {
  font-size: 12px;
  font-weight: 600;
  color: #1a73e8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rs-table-row[data-tier="strong"] .rs-table-row__tier { color: #0d9488; }
.rs-table-row[data-tier="bonus"]  .rs-table-row__tier { color: #64748b; }

.rs-table-row__ctx {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.5;
}

.rs-bar {
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 140px;
  justify-self: end;
}

.rs-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 999px;
}

.rs-table-row[data-tier="strong"] .rs-bar__fill {
  background: linear-gradient(90deg, #2dd4bf 0%, #0d9488 100%);
}
.rs-table-row[data-tier="bonus"] .rs-bar__fill {
  background: linear-gradient(90deg, #cbd5e1 0%, #94a3b8 100%);
}

@media (max-width: 820px) {
  .rs-table-head { display: none; }
  .rs-table-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 18px;
  }
  .rs-bar { justify-self: stretch; max-width: 100%; }
}


/* ---------- How-to-mine-keywords callout, 3 steps ---------- */

.rs-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.rs-step {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #1a73e8;
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rs-step__n {
  font-family: 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #1a73e8;
  letter-spacing: 0.04em;
}

.rs-step__title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.005em;
}

.rs-step__desc {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}


/* ---------- "How to list" two-column layout ---------- */

.rs-howto {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 36px;
  align-items: start;
}

.rs-howto__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Numbered rule cards, each is a small standalone tile. */
.rs-howto__rule {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 6px;
  align-items: start;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.rs-howto__rule:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -18px rgba(15,23,42,0.16);
  border-color: #cbd5e1;
}

.rs-howto__rule-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #1a73e8;
  background: #eff6ff;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  margin-top: 2px;
}

.rs-howto__rule-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.rs-howto__rule-body {
  grid-column: 2;
  grid-row: 2;
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

.rs-howto__rule-body strong { color: #0f172a; font-weight: 700; }

/* Before/After comparison inside the "Weaving into bullets" card. */
.rs-howto__compare {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.rs-howto__compare-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  font-size: 13px;
  line-height: 1.55;
  padding: 10px 12px;
  border-radius: 8px;
}

.rs-howto__compare-row--weak {
  background: #fef2f2;
  border: 1px solid #fee2e2;
}

.rs-howto__compare-row--strong {
  background: #ecfdf5;
  border: 1px solid #d1fae5;
}

.rs-howto__compare-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: center;
}

.rs-howto__compare-row--weak .rs-howto__compare-lbl   { color: #b91c1c; }
.rs-howto__compare-row--strong .rs-howto__compare-lbl { color: #047857; }

.rs-howto__compare-text {
  margin: 0;
  color: #0f172a;
  font-family: 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.55;
}

.rs-howto__compare-text strong { color: #0f172a; font-weight: 700; }

.rs-howto__compare-note {
  font-size: 12.5px;
  color: #64748b;
  margin: 6px 0 0;
  font-style: italic;
  line-height: 1.5;
}

/* Quality-checks tile (the former bullet list). */
.rs-howto__check {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 22px;
}

.rs-howto__check-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1a73e8;
  margin: 0 0 12px;
}

.rs-howto__check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rs-howto__check-list li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  line-height: 1.55;
  color: #1f2937;
}

.rs-howto__check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ecfdf5;
  border: 1.5px solid #14b8a6;
}

.rs-howto__check-list li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 9px;
  width: 7px;
  height: 3px;
  border-left: 2px solid #0d9488;
  border-bottom: 2px solid #0d9488;
  transform: rotate(-45deg);
}

.rs-howto__check-list strong { color: #0f172a; font-weight: 700; }

.rs-howto__card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px;
  position: sticky;
  top: 24px;
}

.rs-howto__card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1a73e8;
  margin: 0 0 12px;
}

.rs-howto__mock {
  font-family: 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: #334155;
  background: #f8fafc;
  border-radius: 10px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
}

.rs-howto__mock-h {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1.5px solid #0f172a;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rs-howto__mock-row {
  display: grid;
  grid-template-columns: minmax(0, 105px) 1fr;
  gap: 10px;
  margin-bottom: 6px;
}

.rs-howto__mock-row dt {
  font-weight: 600;
  color: #0f172a;
}

.rs-howto__mock-row dd {
  margin: 0;
  color: #334155;
}

@media (max-width: 860px) {
  .rs-howto {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .rs-howto__card { position: static; }
}


/* ---------- Example bullets list ---------- */

.rs-examples {
  display: grid;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}

.rs-example {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  align-items: start;
}

.rs-example__n {
  font-family: 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #1a73e8;
  background: #eff6ff;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rs-example__bullet {
  font-size: 15px;
  line-height: 1.7;
  color: #0f172a;
  margin: 0 0 8px;
}

.rs-example__bullet strong {
  color: #0f172a;
  background: linear-gradient(0deg, rgba(26,115,232,0.13) 50%, transparent 50%);
  padding: 0 2px;
}

.rs-example__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.rs-example__skills span {
  font-size: 11.5px;
  font-weight: 600;
  color: #1a73e8;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
}


/* ---------- Common mistakes cards ----------
   Each card is split into two visual zones:
     - Top zone: white background, holds the auto-numbered "Mistake 0X" label
       (CSS counter), the mistake title, and the explanation.
     - Bottom zone: light-green band that runs edge to edge (achieved with
       negative margins past the card padding), holds the fix pill + text.
   The split mirrors the problem/solution rhythm visually, no boxed callouts. */

.rs-mistakes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  counter-reset: mistake;
}

.rs-mistake {
  counter-increment: mistake;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 24px 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.rs-mistake:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -22px rgba(15,23,42,0.16);
  border-color: #cbd5e1;
}

/* "Mistake 0X" label, auto-generated via CSS counter, with a leading red dot. */
.rs-mistake::before {
  content: '\25CF\00a0\00a0Mistake ' counter(mistake, decimal-leading-zero);
  display: inline-block;
  font-family: 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 12px;
}

.rs-mistake__title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.rs-mistake__desc {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* Fix block sits as a full-bleed band at the bottom of the card. The badge
   sits absolutely positioned to the left, the paragraph uses padding-left
   to leave room for it. Block layout (not grid) so the inline text node
   and the "FIX" strong stay on the same flow. */
.rs-mistake__fix {
  position: relative;
  margin: 0 -24px;
  padding: 16px 24px 18px 56px;
  background: #f0fdf4;
  border-top: 1px solid #d1fae5;
  font-size: 13.5px;
  color: #0f172a;
  line-height: 1.6;
}

/* Green checkmark badge, absolutely positioned in the fix band's left padding. */
.rs-mistake__fix::before {
  content: '\2713'; /* ✓ */
  position: absolute;
  left: 24px;
  top: 15px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #14b8a6;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

/* The inline "Fix:" strong becomes a small green label inside the band. */
.rs-mistake__fix strong {
  display: inline;
  color: #047857;
  font-weight: 700;
  font-family: 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 6px;
  vertical-align: 1px;
}


/* ---------- Seniority levels overrides ----------
   Reuses .rt-levels but with 4 columns instead of 5 and a slot for a
   skills-chip list inside each level. */

.rs-levels {
  list-style: none;
  margin: 0 auto 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1100px;
  position: relative;
}

@media (max-width: 880px) {
  .rs-levels { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .rs-levels { grid-template-columns: 1fr; }
}

.rs-level {
  position: relative;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rs-level:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(15,23,42,0.18);
}

.rs-level__num {
  font-family: 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: #64748b;
  padding: 4px 10px;
  border-radius: 999px;
  width: fit-content;
}

.rs-level__name {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.rs-level__desc {
  font-size: 13px;
  color: #334155;
  line-height: 1.55;
  margin: 0;
}

.rs-level__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.rs-level__chip {
  font-size: 11.5px;
  font-weight: 500;
  color: #1e293b;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
}

.rs-level--1 { border-color: #cbd5e1; background: #f8fafc; }
.rs-level--1 .rs-level__num { background: #64748b; }

.rs-level--2 { border-color: #bae6fd; background: #f0f9ff; }
.rs-level--2 .rs-level__num { background: #0ea5e9; }
.rs-level--2 .rs-level__chip { background: #e0f2fe; }

.rs-level--3 { border-color: #a5f3fc; background: #ecfeff; }
.rs-level--3 .rs-level__num { background: #06b6d4; }
.rs-level--3 .rs-level__chip { background: #cffafe; }

.rs-level--4 { border-color: #99f6e4; background: #f0fdfa; }
.rs-level--4 .rs-level__num { background: #14b8a6; }
.rs-level--4 .rs-level__chip { background: #ccfbf1; }


/* ---------- Internal links cards ---------- */

.rs-next {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}

.rs-next-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.rs-next-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -22px rgba(15,23,42,0.20);
  border-color: #1a73e8;
}

.rs-next-card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1a73e8;
  margin: 0;
}

.rs-next-card[data-state="soon"] .rs-next-card__eyebrow { color: #94a3b8; }

.rs-next-card__title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.005em;
}

.rs-next-card__desc {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

.rs-next-card__arrow {
  font-size: 13px;
  font-weight: 600;
  color: #1a73e8;
  margin-top: 8px;
}

.rs-next-card[data-state="soon"] .rs-next-card__arrow { color: #94a3b8; }
.rs-next-card[data-state="soon"] { pointer-events: none; opacity: 0.85; }


/* ---------- Disclaimer ---------- */

.rs-disclaimer {
  max-width: 1100px;
  margin: 24px auto 56px;
  padding: 0 24px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
  text-align: center;
}


/* ---------- Mobile fixes ----------
   Centralizes the small responsive tweaks that the rest of the rules
   were missing. Targets phones (<= 768px) and very narrow (<= 540px). */

@media (max-width: 768px) {
  /* Defensive re-declaration of main.css's mobile nav rules with the
     same selector strength but loaded later in the cascade. Prevents any
     phantom rule on this page type from suppressing the hamburger. */
  nav#header {
    height: 80px;
    padding: 0 10%;
    background: #fff;
  }
  nav#header .nav-inner {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  nav#header .hamburger {
    display: block;
    width: 28px;
    height: 28px;
    cursor: pointer;
    position: relative;
    z-index: 10001;
  }
  nav#header .hamburger img {
    width: 100%;
    height: 100%;
  }
  nav#header .main-menu {
    display: none;
  }

  /* Tighten content side padding so cards have more horizontal room. */
  .rt-content {
    padding-left: 16px;
    padding-right: 16px;
  }
  .rs-disclaimer {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* "From skill list…" next-steps: single column, tighter card padding. */
  .rs-next {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: none;
  }
  .rs-next-card {
    padding: 20px 22px;
  }

  /* Common mistakes: the desktop grid uses minmax(360px, 1fr) which can
     spawn a 2nd track on viewports that are *just* 360px wide, causing
     the whole page to overflow horizontally. Force single column on mobile. */
  .rs-mistakes {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Browse all skill pages section (#related): edge-to-edge on mobile.
     The section title stays centered with its own padding; the family
     list uses the full viewport. */
  #related.rt-content {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }
  #related .rt-content__head {
    padding-left: 16px;
    padding-right: 16px;
  }
  #related .rt-fams {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-left: 8px;
    padding-right: 8px;
    width: 90%;
  }
  #related .rt-fam {
    width: 100%;
    padding-bottom: 16px;
  }
  /* Tighter family-card padding so the role title and trailing badge
     don't crowd in the wider mobile band. */
  #related .rt-fam-card {
    padding: 10px 12px;
  }
}

@media (max-width: 540px) {
  .rt-content {
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* ---------- Hub-page grid ----------
   Minimal hub at /resume-skills/ that lists role pages in the same
   visual family as /resume-templates/. Reuses .rt-fams for consistency. */

.rs-hub-note {
  max-width: 760px;
  margin: 0 auto 32px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  text-align: center;
}

.rs-hub-note strong { color: #0f172a; }