/* =========================================================================
   SEO PAGE CHROME
   -------------------------------------------------------------------------
   Furniture shared by the four SEO series: resume templates, resume skills,
   resume guides and cover letters. The blog hero and author byline,
   breadcrumbs, the bottom family tree, the content wrappers, the Other
   Resources cards, the stat figure, and the design tokens they resolve.

   It used to sit inside resume-templates/resume-template.css, so a guide or
   a cover letter had to load 7,500 lines of template CSS to get a footer,
   and an edit meant for a template page could reach three other series.

   It does NOT belong in main.css: resume-metrics, job-search-toolkit and
   the free-review page use .blog-hero and .author-box with their own
   styling, and putting these rules in a global sheet overrode them. Load
   this file only from the four series above (and the one linkedin page),
   which is exactly the set that used to get these rules.

   Link it where resume-template.css used to sit: before the series' own
   stylesheet, so the cascade order is unchanged.
   ========================================================================= */

/* =========================================================================
   SEO PAGE CHROME  (moved out of resume-templates/resume-template.css on
   2026-08-27)
   -------------------------------------------------------------------------
   Furniture shared by the resume-template, resume-skills, resume-guide and
   cover-letter pages: the blog hero and author byline, breadcrumbs, the
   bottom family tree, the content wrappers, the Other Resources cards and
   the stat figure.

   It used to live in the template stylesheet, so every guide, skills and
   cover-letter page loaded 7,500 lines of template CSS just to get a footer,
   and an edit aimed at a template page could reach three other series.
   Series stylesheets are now independent: anything site-wide belongs here.

   Where a rule's selector list mixed site chrome with template-only classes,
   the list was split, so the same declaration block can appear both here and
   in the template file under different selectors. That is deliberate.
   ========================================================================= */

.rt-content {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* =========================================================================
   Resume Templates — shared chrome for the interactive [position] resume
   template generators.

   Class prefix: rt-  (resume template)
   Used by every page under /resume-templates/<role-slug>. Per-page
   stylesheets only override colors or add role-specific accents.
   ========================================================================= */


/* ---------- Blog hero (matches /job-search-toolkit) ----------
   Mirrors the .blog-hero used by every blog post and the toolkit hub:
   navy gradient, white type, green breadcrumbs, blue author box.
   Copied from public/css/job-search-toolkit/guide-summary.css so the
   resume-template pages don't have to pull in the full blog stylesheet. */

.blog-hero {
  display: block;
  background: linear-gradient(90deg, #172554 0%, #1E3A8A 100%);
  color: #fff;
  font-size: 18px;
  padding-top: 3rem;
  padding-bottom: 3rem;
  position: relative;
  width: 100%;
}

.blog-hero h1 {
  color: #fff;
  text-align: center;
  margin: 0;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.blog-hero p,
.blog-hero li {
  color: #fff;
}

.blog-hero .hero-subtitle {
  text-align: center;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.55;
  max-width: 640px;
  margin: -1rem auto 0;
  color: rgba(255,255,255,0.88);
  font-weight: 400;
}

.blog-hero .blog-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  width: 50%;
  margin: auto;
}

.blog-hero .breadcrumbs {
  color: #23ce6b;
  padding: 10px 20px;
  margin: 0;
  border-radius: 8px;
  font-size: 14px;
}

.blog-hero .breadcrumbs a {
  color: #23ce6b;
  text-decoration: none;
  border-bottom: 1px solid rgba(35,206,107,0.4);
}

.blog-hero .breadcrumbs a:hover { border-bottom-color: #23ce6b; }

/* Author Box */
.blog-hero .author-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
}

.blog-hero .author-box .author-img-container {
  border-radius: 100%;
  background: linear-gradient(90deg, #3B82F6 0%, #2563EB 100%);
  overflow: hidden;
  height: 70px;
  width: 70px;
  box-shadow: 0 6px 20px rgba(37, 99, 235, .20);
}

.blog-hero .author-box .author-img-container img {
  height: 70px;
  width: 70px;
  position: relative;
}

.blog-hero .author-box .author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.blog-hero .author-box .author-info p {
  color: #fff;
  font-size: 13px;
  margin-bottom: 0;
}

.blog-hero .author-box .author-info p.author-name {
  font-weight: 700;
  color: #3B82F6;
}

.blog-hero .article-dates p {
  font-size: 12px;
  margin: 0;
}
@media (max-width: 768px) {
  .blog-hero .blog-hero-content {
    width: 90%;
  }
}


/* ---------- Hero with side CTA (.rt-hero--with-cta) ----------
   Two-column hero variant: article chrome on the left in .rt-hero__main,
   white .fr-card free-resume-review card on the right in .rt-hero__cta.
   Stacks back to a single column at <960px.

   Opt-in via the `.rt-hero--with-cta` marker class on .blog-hero. Every
   resume-template page carries it (see Resume Template Page.md §3.1.1);
   pages without the marker fall back to the centered single-column
   .blog-hero rules above.

   These rules used to live in resume-template-hero-cta.css; merged in here
   so each page type owns its hero rules in its own stylesheet. The skills
   page-type stylesheet (resume-skills.css) carries its own copy of the
   same block — the two are intentionally independent so they can diverge
   later without cross-contamination. */

.blog-hero.rt-hero--with-cta {
  padding: 56px 24px 36px;
  background: linear-gradient(135deg, #0b1736 0%, #1E3A8A 55%, #2563EB 130%);
  position: relative;
  overflow: hidden;
}

/* Decorative glow blobs in the hero background */
.blog-hero.rt-hero--with-cta::before,
.blog-hero.rt-hero--with-cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.blog-hero.rt-hero--with-cta::before {
  width: 560px; height: 560px;
  top: -240px; right: -160px;
  background: linear-gradient(135deg, #60a5fa, #2563EB);
  opacity: .22;
}
.blog-hero.rt-hero--with-cta::after {
  width: 380px; height: 380px;
  bottom: -180px; left: -120px;
  background: linear-gradient(135deg, #23ce6b, #00a6fb);
  opacity: .10;
}

.blog-hero.rt-hero--with-cta .blog-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
  gap: 64px;
  align-items: center;
  flex-direction: row;
}

.rt-hero__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
}

.blog-hero.rt-hero--with-cta h1 {
  text-align: left;
  margin: 0;
  font-size: clamp(26px, 3.6vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 700;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.blog-hero.rt-hero--with-cta .breadcrumbs {
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.blog-hero.rt-hero--with-cta .breadcrumbs a {
  color: #93c5fd;
  border-bottom: none;
  text-decoration: none;
  font-weight: 500;
}
.blog-hero.rt-hero--with-cta .breadcrumbs a:hover {
  color: #bfdbfe;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-hero.rt-hero--with-cta .hero-subtitle {
  text-align: left;
  max-width: 580px;
  margin: 4px 0 0;
  font-size: clamp(15px, 1.2vw, 17.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 400;
}

.blog-hero.rt-hero--with-cta .author-box {
  justify-content: flex-start;
  margin-top: 8px;
  gap: 14px;
}
.blog-hero.rt-hero--with-cta .author-box .author-img-container {
  height: 56px; width: 56px;
}
.blog-hero.rt-hero--with-cta .author-box .author-img-container img {
  height: 56px; width: 56px;
}
.blog-hero.rt-hero--with-cta .author-box .author-info p {
  font-size: 13px;
  margin: 0;
  line-height: 1.35;
  color: rgba(255, 255, 255, .8);
}
.blog-hero.rt-hero--with-cta .author-box .author-info p.author-name {
  font-weight: 700;
  color: #ffffff;
  font-size: 14.5px;
}
.blog-hero.rt-hero--with-cta .author-box .author-info p.author-position {
  color: #93c5fd;
  font-size: 12.5px;
}

.blog-hero.rt-hero--with-cta .article-dates {
  margin: 0;
}
.blog-hero.rt-hero--with-cta .article-dates p {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .65);
  margin: 0;
}

/* CTA wrapper: holds the white .fr-card in the right column */
.rt-hero__cta {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.rt-hero__cta .review-upload-wrap {
  width: 100%;
  max-width: 420px;
  margin: 0;
}
.rt-hero__cta .fr-card {
  width: 100%;
  max-width: 420px;
  padding: 26px 24px 28px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, .25),
    0 4px 12px rgba(37, 99, 235, .15);
}

/* `.blog-hero p { color:#fff }` (above) would white out the text inside
   the .fr-card. Restore the card's own colors. */
.blog-hero.rt-hero--with-cta .fr-card .fr-headline { color: #0f172a; }
.blog-hero.rt-hero--with-cta .fr-card .fr-sub,
.blog-hero.rt-hero--with-cta .fr-card .fr-note { color: #6b7280; }
.blog-hero.rt-hero--with-cta .fr-card .fr-sub .text-underline {
  color: #23ce6b;
  text-decoration-color: #23ce6b;
}

/* Deeplink sits below the .fr-card on the dark hero background */
.blog-hero.rt-hero--with-cta .fr-deeplink {
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}
.blog-hero.rt-hero--with-cta .fr-deeplink a { color: #93c5fd; }
.blog-hero.rt-hero--with-cta .fr-deeplink a:hover { color: #bfdbfe; }
@media (max-width: 960px) {
  .blog-hero.rt-hero--with-cta {
    padding: 40px 20px 40px;
  }
  .blog-hero.rt-hero--with-cta .blog-hero-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    width: 100%;
    text-align: center;
  }
  .rt-hero__main {
    align-items: center;
    text-align: center;
    width: 100%;
    min-width: 0;
  }
  .blog-hero.rt-hero--with-cta h1,
.blog-hero.rt-hero--with-cta .hero-subtitle {
    text-align: center;
  }
  .blog-hero.rt-hero--with-cta .author-box {
    justify-content: center;
  }
  .rt-hero__cta {
    width: 100%;
  }
  .rt-hero__cta .review-upload-wrap,
.rt-hero__cta .fr-card {
    max-width: 440px;
    margin: 0 auto;
  }
}
@media (max-width: 560px) {
  .blog-hero.rt-hero--with-cta h1 {
    font-size: 26px;
    line-height: 1.18;
  }
  .blog-hero.rt-hero--with-cta .hero-subtitle {
    font-size: 15px;
  }
  /* main.css ships .fr-card with width:500px which overflows narrow
     viewports; force fluid on mobile so it stays inside the hero. */
  .blog-hero.rt-hero--with-cta .fr-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .blog-hero.rt-hero--with-cta .review-upload-wrap {
    width: 100%;
    max-width: 100%;
  }
}


/* ---------- Content sections (How it works, FAQ, Related, etc.) ---------- */

.rt-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 24px;
}

.rt-content--alt { background: #f5f6f8; max-width: none; }

.rt-content--alt > * { max-width: 1100px; margin-left: auto; margin-right: auto; }

.rt-content__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}

.rt-content__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1a73e8;
  margin: 0 0 8px;
}

.rt-content__head h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.rt-content__head p {
  font-size: 15px;
  color: #4d5562;
  line-height: 1.55;
  margin: 0;
}


/* FAQ — uses the homepage's #faq.tcv-faq pattern (defined in main.css).
   Inner container's vertical margin is reset since .rt-content--alt
   already supplies section padding around it. */

.rt-content--alt #faq.tcv-faq {
  margin-top: 0;
  margin-bottom: 0;
}


/* ---------- Related templates by family (rt-fams) -------------------------
   Layout mirrors the role-family component on /tech-resume-writing-process:
   five family COLUMNS side-by-side on desktop (not stacked rows), each with
   a colored family heading + colored underline, then a vertical stack of
   tinted card pills below. Tablet drops to 3 columns; mobile stacks to 1
   column with collapsible <details>. Color comes from the family palette
   (blue/green/yellow/purple/orange) on the heading, the underline accent,
   and the card backgrounds. Current page card = full-tone family color. */

/* Two trees live in one #related section, so the second header needs its own
   break: without it tree 1's last row ran straight into "Browse by tech stack".
   Matches the guides' .rg-related__head--sub spacing. */
#related .rt-fams + .rt-content__head {
  margin-top: 72px;
}

.rt-fams {
  /* main.css sets a bare `section { display:flex; align-items:center }`, which makes
     this grid shrink-wrap to its own content: with two trees on a page the second,
     shorter tree ends up narrower than the first and the cards no longer match.
     Fill the container so every card is the same width in both trees. */
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  margin-top: 16px;
}

/* A role page keeps only its own family, so a single column would sit pinned to
   the left of the 5-up grid. Centre it. #related beats the breakpoint rules
   below, which set grid-template-columns on .rt-fams directly. */
#related .rt-fams--single {
  grid-template-columns: min(300px, 100%);
  justify-content: center;
}
@media (max-width: 720px) {
  #related .rt-fams--single { grid-template-columns: 1fr; }
}

.rt-fam {
  display: flex;
  flex-direction: column;
  border: 0;
  background: transparent;
  padding: 0;
}

.rt-fam[data-color="blue"] { --rf: #2563EB; --rf-card: rgba(37,99,235,0.05);  --rf-link: rgba(37,99,235,0.10);  --rf-link-hover: rgba(37,99,235,0.18); }
.rt-fam[data-color="green"] { --rf: #16A34A; --rf-card: rgba(22,163,74,0.05);  --rf-link: rgba(22,163,74,0.10);  --rf-link-hover: rgba(22,163,74,0.18); }
.rt-fam[data-color="yellow"] { --rf: #CA8A04; --rf-card: rgba(202,138,4,0.05);  --rf-link: rgba(202,138,4,0.10);  --rf-link-hover: rgba(202,138,4,0.18); }
.rt-fam[data-color="purple"] { --rf: #8B5CF6; --rf-card: rgba(139,92,246,0.05); --rf-link: rgba(139,92,246,0.10); --rf-link-hover: rgba(139,92,246,0.18); }
.rt-fam[data-color="orange"] { --rf: #EA580C; --rf-card: rgba(234,88,12,0.05);  --rf-link: rgba(234,88,12,0.10);  --rf-link-hover: rgba(234,88,12,0.18); }
.rt-fam[data-color="red"] { --rf: #DC2626; --rf-card: rgba(220,38,38,0.05);  --rf-link: rgba(220,38,38,0.10);  --rf-link-hover: rgba(220,38,38,0.18); }
.rt-fam[data-color="teal"] { --rf: #0D9488; --rf-card: rgba(13,148,136,0.05); --rf-link: rgba(13,148,136,0.10); --rf-link-hover: rgba(13,148,136,0.18); }
.rt-fam[data-color="slate"] { --rf: #475569; --rf-card: rgba(71,85,105,0.05);  --rf-link: rgba(71,85,105,0.10);  --rf-link-hover: rgba(71,85,105,0.18); }
.rt-fam[data-color="pink"] { --rf: #DB2777; --rf-card: rgba(219,39,119,0.05); --rf-link: rgba(219,39,119,0.10); --rf-link-hover: rgba(219,39,119,0.18); }
.rt-fam[data-color="stone"] { --rf: #78716C; --rf-card: rgba(120,113,108,0.05);--rf-link: rgba(120,113,108,0.10);--rf-link-hover: rgba(120,113,108,0.18); }
.rt-fam[data-color="emerald"] { --rf: #059669; --rf-card: rgba(5,150,105,0.05);  --rf-link: rgba(5,150,105,0.10);  --rf-link-hover: rgba(5,150,105,0.18); }
.rt-fam[data-color="indigo"] { --rf: #4F46E5; --rf-card: rgba(79,70,229,0.05);  --rf-link: rgba(79,70,229,0.10);  --rf-link-hover: rgba(79,70,229,0.18); }
.rt-fam[data-color="amber"] { --rf: #D97706; --rf-card: rgba(217,119,6,0.05);   --rf-link: rgba(217,119,6,0.10);   --rf-link-hover: rgba(217,119,6,0.18); }
.rt-fam[data-color="cyan"] { --rf: #0891B2; --rf-card: rgba(8,145,178,0.05);   --rf-link: rgba(8,145,178,0.10);   --rf-link-hover: rgba(8,145,178,0.18); }
.rt-fam[data-color="rose"] { --rf: #E11D48; --rf-card: rgba(225,29,72,0.05);    --rf-link: rgba(225,29,72,0.10);    --rf-link-hover: rgba(225,29,72,0.18); }
.rt-fam[data-color="sky"] { --rf: #0284C7; --rf-card: rgba(2,132,199,0.05);    --rf-link: rgba(2,132,199,0.10);    --rf-link-hover: rgba(2,132,199,0.18); }
.rt-fam[data-color="lime"] { --rf: #65A30D; --rf-card: rgba(101,163,13,0.05);   --rf-link: rgba(101,163,13,0.10);   --rf-link-hover: rgba(101,163,13,0.18); }
.rt-fam[data-color="fuchsia"] { --rf: #A21CAF; --rf-card: rgba(162,28,175,0.05);   --rf-link: rgba(162,28,175,0.10);   --rf-link-hover: rgba(162,28,175,0.18); }


.rt-fam__head {
  list-style: none;
  cursor: default;
  padding: 0;
  display: block;
  user-select: none;
}

.rt-fam__head::-webkit-details-marker { display: none; }

.rt-fam__name {
  display: block;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--rf, #1a73e8);
}

.rt-fam__name::after {
  content: '';
  display: block;
  width: 28px;
  height: 2.5px;
  background: var(--rf, #1a73e8);
  border-radius: 2px;
  margin-top: 6px;
}

.rt-fam__count {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  letter-spacing: 0.01em;
}

.rt-fam__chev {
  width: 12px;
  height: 12px;
  color: var(--rf, #6b7280);
  display: none;
  transition: transform 0.18s ease;
}

.rt-fam[open] .rt-fam__chev { transform: rotate(180deg); }

.rt-fam__body {
  padding: 0;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rt-fam-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: var(--rf-link, rgba(37,99,235,0.10));
  color: #1c2330;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
}

.rt-fam-card:hover {
  background: var(--rf-link-hover, rgba(37,99,235,0.18));
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.rt-fam-card__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--rf, #1a73e8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rt-fam-card__icon svg {
  width: 15px;
  height: 15px;
}

.rt-fam-card__title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Coming-soon variant: lighter tint, muted text, italic "Soon" suffix */
.rt-fam-card.is-soon {
  background: var(--rf-card, rgba(37,99,235,0.05));
  color: #6b7280;
  pointer-events: none;
}

.rt-fam-card.is-soon .rt-fam-card__icon {
  color: var(--rf, #9ca3af);
  opacity: 0.55;
}

/* The 'Soon' badge sits inline, so on a placeholder card it eats ~34px of the
   title box and long role names ellipsize while the same label fits fine on a
   normal card. Tighten the padding and hide the decorative icon on .is-soon
   only, which buys back enough room for the longest label. */
.rt-fam-card.is-soon { padding-left: 9px; padding-right: 6px; column-gap: 4px; }
.rt-fam-card.is-soon .rt-fam-card__icon { display: none; }

.rt-fam-card.is-soon::after {
  content: 'Soon';
  font-size: 9px;
  font-weight: 500;
  font-style: italic;
  color: #9ca3af;
  margin-left: auto;
  padding-left: 3px;
  letter-spacing: 0.02em;
}

/* Current page variant: full-tone family color, white ink + small dot */
.rt-fam-card.is-current {
  background: var(--rf, #1a73e8);
  color: #fff;
  cursor: default;
  pointer-events: none;
}

.rt-fam-card.is-current .rt-fam-card__icon { color: #fff; }

.rt-fam-card.is-current::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 1023px) {
  .rt-fams { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 720px) {
  .rt-fams { grid-template-columns: 1fr; gap: 18px; }
  .rt-fam__head {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .rt-fam__name { flex: 1; }
  .rt-fam__name::after { display: none; }
  .rt-fam__count { margin-top: 0; }
  .rt-fam__chev { display: inline-block; flex-shrink: 0; }
  .rt-fam__body { margin-top: 10px; }
}
@media (min-width: 721px) {
  .rt-fam .rt-fam__body { display: flex !important; }
  /* Modern browsers hide a closed <details> via ::details-content (content-visibility),
     which the child display override above cannot counter. Force it visible so a stray
     summary toggle can never make the tree's links disappear on desktop. */
  .rt-fam::details-content { content-visibility: visible !important; }
}
@media print {
.blog-hero,
.rt-content,
.tcv-footer {
    display: none !important;
  }
}
.rt-resource {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  color: #0f172a;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.rt-resource:hover {
  border-color: var(--rt-res-color, #2563eb);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .08);
  transform: translateY(-3px);
  color: #0f172a;
}
.rt-resource__viz {
  position: relative;
  background: linear-gradient(180deg, var(--rt-res-tint, #eff6ff) 0%, #ffffff 100%);
  aspect-ratio: 1.4 / 1;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rt-resource__viz::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, .05) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.55;
  pointer-events: none;
}
.rt-resource__eyebrow {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-res-color, #2563eb);
  margin: 18px 0 8px;
  padding: 0 20px;
  text-align: left;
  line-height: 1;
}
.rt-resource__title {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #0f172a;
  padding: 0 20px;
  text-align: left;
}
.rt-resource__desc {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
  margin: 0;
  padding: 0 20px;
  text-align: left;
  letter-spacing: 0;
}
.rt-resource[data-color="yellow"] { --rt-res-color: #ca8a04; --rt-res-tint: #fefce8; }
.rt-resource[data-color="blue"] { --rt-res-color: #2563eb; --rt-res-tint: #eff6ff; }
.rt-resource[data-color="green"] { --rt-res-color: #16a34a; --rt-res-tint: #f0fdf4; }
.rt-resource[data-color="purple"] { --rt-res-color: #9333ea; --rt-res-tint: #faf5ff; }
.rt-resource[data-color="orange"] { --rt-res-color: #ea580c; --rt-res-tint: #fff7ed; }

/* === 2. Skills viz === */
.rt-viz-skills {
  position: relative;
  z-index: 1;
  width: 188px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 11px 13px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 18px rgba(15, 23, 42, .08);
}
.rt-viz-skills__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.rt-viz-skills__icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--rt-res-tint, #eff6ff);
  color: var(--rt-res-color, #2563eb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'SFMono-Regular', Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.rt-viz-skills__title {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
}
.rt-viz-skills__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.rt-viz-skills__chip {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--rt-res-color, #2563eb);
  background: var(--rt-res-tint, #eff6ff);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.rt-viz-skills__chip--star {
  background: var(--rt-res-color, #2563eb);
  color: #ffffff;
}

/* === 3. ATS Checker viz === */
.rt-viz-ats {
  position: relative;
  z-index: 1;
  width: 188px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 11px 13px 11px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 18px rgba(15, 23, 42, .08);
}
.rt-viz-ats__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}
.rt-viz-ats__label {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #475569;
}
.rt-viz-ats__score {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--rt-res-color, #2563eb);
  letter-spacing: -0.02em;
  line-height: 1;
}
.rt-viz-ats__score sub {
  font-size: 10px;
  color: #475569;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: baseline;
}
.rt-viz-ats__bar {
  height: 4px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.rt-viz-ats__bar-fill {
  height: 100%;
  width: 87%;
  background: var(--rt-res-color, #2563eb);
  border-radius: 999px;
}
.rt-viz-ats__rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rt-viz-ats__row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 9.5px;
  color: #334155;
}
.rt-viz-ats__check {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--rt-res-color, #2563eb);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  flex-shrink: 0;
}

/* === 4. Service viz === */
.rt-viz-service {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 18px rgba(15, 23, 42, .08);
  min-width: 156px;
}
.rt-viz-service__stars {
  display: inline-flex;
  gap: 3px;
  font-size: 14px;
  color: #f59e0b;
  letter-spacing: 1px;
  line-height: 1;
}
.rt-viz-service__rating {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 4px 0 2px;
}
.rt-viz-service__meta {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
}
.rt-viz-service__badge {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: var(--rt-res-color, #2563eb);
  background: var(--rt-res-tint, #eff6ff);
  padding: 3px 9px;
  border-radius: 999px;
}
.rt-viz-service__badge .g-b { color: #4285F4; }
.rt-viz-service__badge .g-r { color: #EA4335; }
.rt-viz-service__badge .g-y { color: #FBBC05; }
.rt-viz-service__badge .g-g { color: #34A853; }

/* === 5. Resume Guide viz — 5-step progress checklist === */
/* Mini-mockup of the guide page: numbered ordered list with
   done / active / todo states. Filled circle = done (check),
   accent ring = active (current pass), outlined = todo. */
.rt-viz-guide {
  position: relative;
  z-index: 1;
  width: 188px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px 11px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 18px rgba(15, 23, 42, .08);
}
.rt-viz-guide__title {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rt-res-color, #2563eb);
  margin: 0 0 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}
.rt-viz-guide__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rt-viz-guide__step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  color: #94a3b8;
}
.rt-viz-guide__num {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 7.5px;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}
.rt-viz-guide__step.is-done {
  color: #334155;
}
.rt-viz-guide__step.is-done .rt-viz-guide__num {
  background: var(--rt-res-color, #2563eb);
  border-color: var(--rt-res-color, #2563eb);
  color: transparent;
  position: relative;
}
.rt-viz-guide__step.is-done .rt-viz-guide__num::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #ffffff;
  transform: translate(-50%, -75%) rotate(-45deg);
}
.rt-viz-guide__step.is-active {
  color: #0f172a;
  font-weight: 700;
}
.rt-viz-guide__step.is-active .rt-viz-guide__num {
  background: var(--rt-res-tint, #fff1f2);
  border-color: var(--rt-res-color, #e11d48);
  color: var(--rt-res-color, #e11d48);
  box-shadow: 0 0 0 3px var(--rt-res-tint, #fff1f2);
}
.rt-viz-guide__label {
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .rt-resource__viz { aspect-ratio: 1.5 / 1; }
}
/* ============================================================
   /Other Resources
============================================================ */



/* Resume Metrics resource card viz (mini benchmark bars) + teal color */
.rt-resource[data-color="teal"] { --rt-res-color: #0d9488; --rt-res-tint: #f0fdfa; }
.rt-viz-metrics {
  width: 190px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 14px 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 18px rgba(15, 23, 42, .08);
}
.rt-viz-metrics__label {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rt-res-color, #0d9488);
  margin: 0 0 10px;
}
.rt-viz-metrics__bars { position: relative; display: flex; align-items: flex-end; gap: 7px; height: 46px; }
.rt-viz-metrics__bar { flex: 1; background: var(--rt-res-color, #0d9488); border-radius: 3px 3px 0 0; }
.rt-viz-metrics__bar:nth-child(1) { height: 42%; opacity: .45; }
.rt-viz-metrics__bar:nth-child(2) { height: 66%; opacity: .6; }
.rt-viz-metrics__bar:nth-child(3) { height: 52%; opacity: .75; }
.rt-viz-metrics__bar:nth-child(4) { height: 90%; opacity: .9; }
.rt-viz-metrics__bar:nth-child(5) { height: 74%; opacity: 1; }
.rt-viz-metrics__badge {
  position: absolute; top: -7px; right: -3px;
  background: var(--rt-res-color, #0d9488); color: #fff;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .02em;
  padding: 2px 6px; border-radius: 999px; box-shadow: 0 2px 5px rgba(15, 23, 42, .2);
}


/* Cover Letter resource card viz (mini letter mockup) + rose color */
.rt-resource[data-color="rose"] { --rt-res-color: #e11d48; --rt-res-tint: #fff1f2; }

.rt-content {
  padding-block: var(--rt-space-section);
}

/* head -> body gap is one block step, not a section step */
.rt-content__head {
  margin-bottom: var(--rt-space-block);
}
.rt-content,
.rt-content--alt {
  display: block;
  margin-inline: auto;
  width: 100%;
  height: auto;
  gap: 0;
}

.rt-content--alt { background: #fff; }

/* The FAQ answers are the last prose block on the page, and they came in on
   the shared component's own spec: `#faq .tcv-faq__a p { font: 400 15px/1.7
   'DM Sans' }` in main.css. Scoped to .rt-content so only the template pages
   move; the shared component keeps its look everywhere else. */
.rt-content #faq .tcv-faq__a p {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  font-size: var(--rt-copy-size);
  line-height: var(--rt-copy-line);
  color: var(--rt-copy-ink);
}

/* =========================================================================
   DEMAND STATS
   -------------------------------------------------------------------------
   Two headline numbers over the quotes, because "is this role real" is the
   question the quotes are there to answer and a number answers it faster
   than a CEO does.

   Unboxed, like everything else on this page: a hairline between the two and
   a source line under each. The source line is not decoration. Both numbers
   come from one index, and a stat with no provenance next to it invites the
   reader to assume it has more behind it than it does. The paragraph
   underneath says so outright.
   ========================================================================= */
.rt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  max-width: 860px;
  margin: 0 0 var(--rt-space-block);
}

.rt-stat {
  display: grid;
  gap: 6px;
  align-content: start;
}

.rt-stat + .rt-stat {
  padding-left: 32px;
  border-left: 1px solid #e6e8ee;
}

.rt-stat__num {
  font-family: var(--rt-g-font);
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rt-g-primary);
}

.rt-stat__label {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #1f1f1f;
  max-width: 34ch;
}

.rt-stat__src {
  font-family: var(--rt-g-font);
  font-size: 12px;
  line-height: 1.4;
  color: #80868b;
}
@media (max-width: 560px) {
  .rt-stat + .rt-stat {
    padding-left: 0;
    padding-top: 24px;
    border-left: 0;
    border-top: 1px solid #e6e8ee;
  }
}

/* =========================================================================
   DEMAND SIGNAL: NOTE LEFT, NUMBERS RIGHT
   -------------------------------------------------------------------------
   The two stack vertically in the right column rather than sitting side by
   side, so the divider between them turns from a vertical rule into a
   horizontal one.
   ========================================================================= */
.rt-signal {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.6fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  margin: 0 0 var(--rt-space-block);
}

.rt-signal .rt-stats {
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: none;
  margin: 0;
}

.rt-signal .rt-stat__num { font-size: clamp(30px, 3.4vw, 40px); }
.rt-signal .rt-stat__label { max-width: none; }
@media (max-width: 860px) {
  .rt-signal { grid-template-columns: 1fr; gap: 28px; }
}

/* =========================================================================
   DEMAND SIGNAL: ONE ROW, THREE COLUMNS
   -------------------------------------------------------------------------
   Note, figure, figure across a single row. .rt-stats uses display:contents
   so the two stats become grid items of .rt-signal itself rather than of
   their own wrapper; without it the figures can only ever sit inside one
   column of the parent, which is what stacked them.

   A hairline before each figure column, matching the About section's three
   columns, so the row reads as three related things rather than a paragraph
   with numbers loose beside it.
   ========================================================================= */
.rt-signal {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(160px, 0.72fr) minmax(160px, 0.72fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: start;
  margin: 0 0 var(--rt-space-block);
}

.rt-signal .rt-stats { display: contents; }

.rt-signal .rt-stat {
  gap: 8px;
  padding-left: clamp(20px, 2.4vw, 34px);
  border-left: 1px solid #e6e8ee;
  padding-top: 0;
  border-top: 0;
}

.rt-signal .rt-stat__num {
  font-size: clamp(34px, 3.8vw, 46px);
  letter-spacing: -0.03em;
}

.rt-signal .rt-stat__label {
  font-size: 13.5px;
  line-height: 1.4;
  max-width: none;
}

.rt-signal .rt-stat__src { font-size: 11.5px; }

/* Source line links through to where the number came from. Plain text, no
   chrome: it is a citation, not a button. nofollow, it is not an endorsement. */
a.rt-stat__src {
  justify-self: start;              /* grid item, else the rule spans the column */
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #dadce0;
  transition: color 0.15s ease, border-color 0.15s ease;
}

a.rt-stat__src:hover,
a.rt-stat__src:focus-visible {
  color: #1f1f1f;
  border-bottom-color: #9aa0a6;
}
@media (max-width: 900px) {
  /* note takes the full width, the two figures keep their row underneath */
  .rt-signal { grid-template-columns: 1fr 1fr; gap: 24px 28px; }
  .rt-signal .rt-stat:first-of-type { padding-left: 0; border-left: 0; }
  /* the two figures still sit side by side here, so no rule above the second */
  .rt-signal .rt-stat + .rt-stat { padding-top: 0; border-top: 0; }
}
@media (max-width: 520px) {
  .rt-signal { grid-template-columns: 1fr; }
  .rt-signal .rt-stat { padding-left: 0; border-left: 0; }
  .rt-signal .rt-stat + .rt-stat {
    padding-top: 20px;
    border-top: 1px solid #e6e8ee;
  }
}

/* The vertical rules between the note and the two figures are gone. They were
   borrowed from the About section, where three equal columns of prose need
   telling apart; here the three items are already different shapes, so the
   rule was drawing a line nobody needed. The gap does it. */
.rt-signal { gap: clamp(28px, 4vw, 60px); }

.rt-signal .rt-stat {
  padding-left: 0;
  border-left: 0;
}
@media (max-width: 520px) {
  .rt-signal .rt-stat + .rt-stat {
    padding-top: 22px;
    border-top: 1px solid #e6e8ee;
  }
}

/* =========================================================================
   SEO PAGE TOKENS  (mirrored from resume-templates/resume-template.css)
   -------------------------------------------------------------------------
   The chrome above resolves these at computed-value time. They were declared
   only in the template stylesheet, so once the other series stopped loading
   it, every rule using them silently fell back: section padding to 0, blue
   text to near-black. Values are identical; keep the two in step.
   ========================================================================= */
:root {
  --rt-space-section: clamp(56px, 6vw, 84px);
  --rt-space-block: clamp(26px, 3vw, 40px);
  --rt-copy-size: 16px;
  --rt-copy-line: 1.7;
  --rt-copy-ink: #3c4043;
  --rt-g-font: 'DM Sans', 'Google Sans', system-ui, -apple-system,
               'Segoe UI', Roboto, sans-serif;
  --rt-g-primary: #2563eb;
  --rt-g-primary-dark: #1d4ed8;
  --rt-g-ink: #1f1f1f;
  --rt-g-mute: #444746;
  --rt-g-outline: #c4c7c5;
  --rt-g-fill: #f1f3f4;
  --rt-g-state: rgba(31, 31, 31, 0.05);
  --rt-g-line: #dadce0;
}