/* =========================================================================
   RESUME TEMPLATES HUB  (/resume-templates)
   -------------------------------------------------------------------------
   Hub-only components, prefix th-. Everything shared with the role pages
   (art-hero, rv-section, art-bio, rt-content, rt-resources, tcv-faq) comes
   from the same stylesheets the FDE page loads; this file only adds what the
   hub needs on top: the hero fan of previews, the role finder, the
   most-searched grid, the anatomy mini-doc, the two thumbnail trees, the
   seniority examples, the formats, steps and "why" cards.

   main.css leaks to remember (see memory notes): bare `section` is
   display:flex + margin:2rem auto, bare `h2/h3/p/a/img` carry their own
   font, alignment and size, `h1 span` is a blue gradient, `nav` is fixed.
   Every rule below is set at class specificity on the element itself.

   Rebuilt 2026-09-15. Previous hub markup + CSS backed up in
   backups/resume-templates-hub-2026-09-15/.
   ========================================================================= */

:root {
  --th-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --th-ink: #1f2125;
  --th-ink-2: #3c4043;
  --th-grey: #5f6368;
  --th-line: #e6e8ee;
  --th-blue: #1a73e8;
  --th-blue-hover: #1765cc;
  --th-blue-tint: #e8f0fe;
  --th-blue-ink: #174ea6;
  --th-surface: #f8f9fb;
  --th-radius: 14px;
  --th-space: clamp(56px, 6vw, 84px);
  --th-block: clamp(26px, 3vw, 40px);
}

/* ---- section frame ---------------------------------------------------- */
.th-section {
  display: block;
  margin: 0;
  width: 100%;
  height: auto;
  gap: 0;
  padding: var(--th-space) 24px;
  background: #fff;
  font-family: var(--th-font);
}

.th-section--tint { background: var(--th-surface); }

.th-inner { max-width: 1180px; margin: 0 auto; }

/* head: eyebrow + h2 + lede, centred like .rt-content__head */
.th-head {
  max-width: 760px;
  margin: 0 auto var(--th-block);
  text-align: center;
}

.th-head--left { margin-left: 0; text-align: left; }

.th-eyebrow {
  margin: 0 0 10px;
  font-family: var(--th-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--th-blue);
}

.th-head h2,
.th-h2 {
  margin: 0 0 14px;
  width: auto;
  font-family: var(--th-font);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--th-ink);
  text-align: inherit;
  text-wrap: balance;
}

.th-lede {
  margin: 0;
  font-family: var(--th-font);
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.6;
  color: var(--th-grey);
  text-wrap: pretty;
}

.th-head--left .th-lede { max-width: 66ch; }

.th-lede a,
.th-p a { color: var(--th-blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: #b9d1f7; font-family: inherit; }
.th-lede a:hover,
.th-p a:hover { text-decoration-color: currentColor; }

.th-p {
  margin: 0;
  font-family: var(--th-font);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--th-ink-2);
  text-wrap: pretty;
}

/* buttons */
.th-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 10px;
  background: var(--th-blue);
  color: #fff;
  font-family: var(--th-font);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(26, 115, 232, .28), 0 8px 18px -8px rgba(26, 115, 232, .5);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.th-btn:hover { background: var(--th-blue-hover); transform: translateY(-1px); color: #fff; }
.th-btn:focus-visible { outline: 3px solid var(--th-blue); outline-offset: 3px; }

.th-btn--ghost {
  background: #fff;
  color: var(--th-blue-ink);
  border: 1.5px solid #c9d7f0;
  box-shadow: none;
}

.th-btn--ghost:hover { background: var(--th-blue-tint); color: var(--th-blue-ink); }
.th-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* text link with arrow */
.th-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--th-font);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--th-blue);
  text-decoration: none;
}

.th-more:hover { color: var(--th-blue-hover); text-decoration: underline; text-underline-offset: 3px; }
.th-more svg { width: 16px; height: 16px; transition: transform .15s ease; }
.th-more:hover svg { transform: translateX(3px); }

/* =========================================================================
   HERO ADDITIONS
   The hero itself is .art-hero (article-hero.css + the resume-template.css
   role/what split). The hub adds a role finder under the blurb and a fan of
   three template previews in place of the single product shot.
   ========================================================================= */
/* ---- finder row: the search bar, "or" and the See-all button on one centred
   line at the very bottom of the hero, under the author / date line. The
   text column keeps the review CTA and the scores, like every other
   art-hero page. ---- */
.art-hero .th-hero-finder {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: clamp(22px, 2.8vw, 34px) auto 6px;
}

.art-hero .th-hero-finder .th-finder { max-width: 720px; }

/* ---- byline avatar: a white ring and a soft shadow so the photo lifts off
   the tinted hero (Emmanuel, 2026-09-15). Hub only for now; promote to
   article-hero.css if it should apply to every art-hero page. ---- */
.art-hero .art-hero__byline img {
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .18), 0 6px 14px -4px rgba(15, 23, 42, .30);
}

/* ---- role finder: search bar + secondary "See all" next to it.
   The bar has no submit button: Enter takes the top match, the list
   handles the rest. The primary CTA under it is the review button. ---- */
.th-finder {
  position: relative;
  z-index: 20;
  width: 100%;
  margin: 0;
  font-family: var(--th-font);
}

.th-finder__wrap {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.th-finder__row {
  position: relative;               /* the results list hangs off the bar */
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid #cfd6e4;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .06), 0 10px 24px -14px rgba(15, 23, 42, .25);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.th-finder__row:focus-within {
  border-color: var(--th-blue);
  box-shadow: 0 0 0 4px rgba(26, 115, 232, .14), 0 10px 24px -14px rgba(15, 23, 42, .25);
}

.th-finder__icon {
  display: flex;
  align-items: center;
  padding-left: 14px;
  color: var(--th-grey);
}

.th-finder__icon svg { width: 20px; height: 20px; }

.th-finder__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 14px 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--th-font);
  font-size: 16.5px;
  font-weight: 500;
  color: var(--th-ink);
}

.th-finder__input::placeholder { color: #80868b; font-weight: 400; }
.th-finder__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.th-finder__or {
  align-self: center;
  flex: 0 0 auto;
  font-family: var(--th-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--th-grey);
}

/* Secondary: Material tonal button. Filled with the light brand tint, no
   outline, so it reads as a button and not as a second, empty field. */
.th-finder__all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 0 20px;
  border-radius: 12px;
  border: 0;
  background: var(--th-blue-tint);
  color: var(--th-blue-ink);
  font-family: var(--th-font);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(26, 115, 232, .10);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.th-finder__all:hover {
  background: #d8e6fc;
  color: var(--th-blue-ink);
  box-shadow: inset 0 0 0 1px rgba(26, 115, 232, .18), 0 6px 14px -8px rgba(26, 115, 232, .45);
  transform: translateY(-1px);
}

.th-finder__all:active { transform: translateY(0); }
.th-finder__all:focus-visible { outline: 3px solid var(--th-blue); outline-offset: 2px; }
.th-finder__all svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* results */
.th-finder__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--th-line);
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .35), 0 2px 6px rgba(15, 23, 42, .06);
  max-height: 380px;
  overflow: auto;
}

.th-finder__list[hidden] { display: none; }

.th-finder__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--th-ink);
  text-decoration: none;
  font-family: var(--th-font);
  cursor: pointer;
}

.th-finder__item:hover,
.th-finder__item.is-active { background: var(--th-blue-tint); }

.th-finder__thumb {
  width: 34px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 4px;
  border: 1px solid var(--th-line);
  object-fit: cover;
  object-position: top;
  background: #fff;
}

.th-finder__name { font-size: 15px; font-weight: 700; }
.th-finder__fam { display: block; font-size: 12.5px; font-weight: 500; color: var(--th-grey); margin-top: 1px; }

.th-finder__empty {
  padding: 12px 12px 10px;
  font-size: 14px;
  color: var(--th-grey);
}

.th-finder__empty a { color: var(--th-blue); font-family: inherit; text-decoration: underline; }

/* ---- fan of previews ---- */
.th-fan {
  position: relative;
  width: 100%;
  max-width: 470px;
  aspect-ratio: 470 / 430;
  margin-inline: auto;
  isolation: isolate;
}

.th-fan::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 96%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #e4edfd 0%, rgba(232, 240, 254, 0.55) 52%, rgba(247, 250, 255, 0) 72%);
}

.th-fan__sheet {
  position: absolute;
  top: 0;
  display: block;
  width: 58%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #e4e7ee;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(60, 64, 67, .10),
    0 8px 18px -8px rgba(15, 23, 42, .16),
    0 34px 60px -28px rgba(26, 115, 232, .34);
}

.th-fan__sheet--l { left: 0; top: 9%; width: 48%; transform: rotate(-7deg); z-index: 1; }
.th-fan__sheet--r { right: 0; top: 9%; width: 48%; transform: rotate(7deg); z-index: 2; }
.th-fan__sheet--c { left: 21%; z-index: 3; }

/* =========================================================================
   MOST SEARCHED (8 cards)
   ========================================================================= */
.th-top__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* ---- the template card (shared by top grid, trees and levels) ---- */
.th-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--th-line);
  border-radius: 12px;
  overflow: hidden;
  color: var(--th-ink);
  text-decoration: none;
  font-family: var(--th-font);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.th-card:hover,
.th-card:focus-visible {
  border-color: var(--rc, var(--th-blue));
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .05);
  outline: 0;
}

/* The stage: a tinted Material "container" the resume sheet floats on. The
   sheet is inset and cut by the stage's bottom edge, so it reads as a page
   rising out of the card rather than a flat crop. --rc / --rc-c / --rc-on
   come inline on the popular cards (Google colours) and from the family on
   the tree cards. */
.th-card__stage {
  position: relative;
  aspect-ratio: 4 / 3.1;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, var(--rc-c, #e8f0fe) 0%, color-mix(in srgb, var(--rc-c, #e8f0fe) 55%, #fff) 100%);
  border-bottom: 1px solid var(--th-line);
}

.th-card__sheet {
  position: absolute;
  left: 12%;
  top: 17%;
  width: 76%;
  height: auto;
  display: block;
  background: #fff;
  border-radius: 7px 7px 0 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 14px 30px -12px rgba(15, 23, 42, .35);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}

.th-card:hover .th-card__sheet,
.th-card:focus-visible .th-card__sheet {
  transform: translateY(-10px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .08), 0 22px 40px -14px rgba(15, 23, 42, .42);
}

/* family chip + rank badge over the stage (popular cards only) */
.th-card__chip {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 60px);
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--rc-on, var(--th-blue-ink));
  font-family: var(--th-font);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 4px 10px -6px rgba(15, 23, 42, .25);
}

.th-card__chip svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--rc, var(--th-blue)); }
.th-card__chip > span { overflow: hidden; text-overflow: ellipsis; }

.th-card__rank {
  position: absolute;
  z-index: 2;
  top: 11px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rc, var(--th-blue));
  color: #fff;
  font-family: var(--th-font);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
  box-shadow: 0 2px 6px -1px rgba(15, 23, 42, .3);
}

/* tree cards: one colour per family, inherited from the panel's data-color,
   and a squarer stage than the popular ones */
.th-tabs .th-card { --rc: var(--rf); --rc-c: color-mix(in srgb, var(--rf) 14%, #fff); }
.th-tabs .th-card__stage { aspect-ratio: 4 / 3; }
.th-tabs .th-card__sheet { left: 10%; width: 80%; top: 15%; }

.th-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }

.th-card__title {
  margin: 0;
  width: auto;
  font-family: var(--th-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--th-ink);
  text-align: left;
  text-transform: none;
}

.th-card__sub {
  margin: 0;
  font-family: var(--th-font);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--th-grey);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.th-card--lg .th-card__body { padding: 14px 16px 16px; }
.th-card--lg .th-card__title { font-size: 17px; }
.th-card--lg .th-card__sub { font-size: 13.5px; }


.th-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--rc-on, var(--th-blue));
}

.th-card__cta svg { width: 14px; height: 14px; transition: transform .15s ease; }
.th-card:hover .th-card__cta svg { transform: translateX(3px); }

/* =========================================================================
   ANATOMY: mini-doc + four numbered parts
   ========================================================================= */
.th-anatomy__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
}

/* The real thing: one template's export, pins on its four section headers.
   Pin tops are percentages of this exact capture; re-measure if the
   Data Engineer preview is re-shot. */
.th-real {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  isolation: isolate;
}

.th-real::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: 108%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #e4edfd 0%, rgba(232, 240, 254, 0.55) 52%, rgba(247, 250, 255, 0) 72%);
}

.th-real__link { position: relative; display: block; text-decoration: none; }

.th-real__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid #e4e7ee;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(60, 64, 67, .10),
    0 8px 18px -8px rgba(15, 23, 42, .16),
    0 34px 60px -28px rgba(26, 115, 232, .34);
  transition: transform .3s ease, box-shadow .3s ease;
}

.th-real__link:hover .th-real__img {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(60, 64, 67, .10),
    0 12px 24px -10px rgba(15, 23, 42, .22),
    0 40px 70px -28px rgba(26, 115, 232, .42);
}

.th-real__pin {
  position: absolute;
  right: -14px;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--th-blue);
  color: #fff;
  font-family: var(--th-font);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
  box-shadow: 0 0 0 3px #fff, 0 4px 10px -3px rgba(26, 115, 232, .6);
}

.th-real__cap {
  margin: 16px 0 0;
  text-align: center;
  font-family: var(--th-font);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--th-grey);
}

.th-real__cap a { color: var(--th-blue); font-family: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Four illustrated cards (the Google-style drawings from the role pages),
   numbered to match the pins on the capture. */
.th-anatomy__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.th-anatomy__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 22px 24px;
  border-radius: 24px;
  background: var(--tone-bg, linear-gradient(170deg, #e8f0fe 0%, #f5f9ff 100%));
  text-align: center;
}

.th-anatomy__card[data-tone="yellow"] { --tone-bg: linear-gradient(170deg, #fef3d6 0%, #fffaf0 100%); --tone: #f9ab00; }
.th-anatomy__card[data-tone="blue"]   { --tone-bg: linear-gradient(170deg, #e8f0fe 0%, #f5f9ff 100%); --tone: #1a73e8; }
.th-anatomy__card[data-tone="green"]  { --tone-bg: linear-gradient(170deg, #e6f4ea 0%, #f4fbf6 100%); --tone: #1e8e3e; }
.th-anatomy__card[data-tone="purple"] { --tone-bg: linear-gradient(170deg, #f3e8fd 0%, #faf6ff 100%); --tone: #a142f4; }

.th-anatomy__num {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tone, var(--th-blue));
  color: #fff;
  font-family: var(--th-font);
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px #fff, 0 4px 10px -3px rgba(15, 23, 42, .35);
}

.th-anatomy__ill {
  display: block;
  width: 100%;
  max-width: 210px;
  height: auto;
  margin: 0 auto 2px;
}

.th-anatomy__card h3 {
  margin: 0;
  font-family: var(--th-font);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--th-ink);
  text-align: center;
}

.th-anatomy__card .th-p { font-size: 14.5px; line-height: 1.6; max-width: 34ch; }

/* ATS block: the parse illustration, the title and four green checks. */
.th-ats {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 10px 28px;
  align-items: center;
  max-width: 1180px;
  margin: var(--th-block) auto 0;
  padding: 20px 28px 20px 20px;
  background: #fff;
  border: 1px solid var(--th-line);
  border-radius: 16px;
}

.th-ats__ill { display: block; width: 100%; max-width: 200px; height: auto; }

.th-ats__body { display: flex; flex-direction: column; gap: 12px; }

.th-ats__title {
  margin: 0;
  font-family: var(--th-font);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--th-ink);
  text-align: left;
}

.th-ats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.th-ats__list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--th-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--th-ink);
}

.th-ats__check {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #e6f4ea;
  color: #1e8e3e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.th-ats__check svg { width: 13px; height: 13px; }

.th-ats__note {
  margin: 0;
  font-family: var(--th-font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--th-grey);
}

.th-ats__note a { color: var(--th-blue); font-family: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================================
   TREES: Material filter-chip tab bar + one panel per family
   Without JS every panel is visible; hub.js adds .is-js, keeps one panel
   (or all, via the "All roles" chip) and animates the switch.
   ========================================================================= */
.th-tabs { width: 100%; }

/* The bar is a grid of icon tiles: five to a row on desktop, one swipeable
   row on phones (Play Store categories). */
.th-tabs__bar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.th-tabs__chip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 14px 8px 8px;
  border-radius: 14px;
  border: 1px solid #dadce0;
  background: #fff;
  color: var(--th-ink);
  font-family: var(--th-font);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.th-tabs__chip:hover {
  background: #f8f9fa;
  border-color: #c4c7cb;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -12px rgba(15, 23, 42, .3);
}

.th-tabs__chip:focus-visible { outline: 3px solid var(--th-blue); outline-offset: 2px; }

.th-tabs__chip.is-active {
  background: var(--rf-card, var(--th-blue-tint));
  border-color: var(--rf, var(--th-blue));
  color: color-mix(in srgb, var(--rf, var(--th-blue)) 78%, #000);
  box-shadow: inset 0 0 0 1px var(--rf, var(--th-blue));
}

.th-tabs__chip--all.is-active { --rf: var(--th-ink); --rf-card: #f1f3f4; }

.th-tabs__ico {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--rf-card, var(--th-blue-tint));
  color: var(--rf, var(--th-blue));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}

.th-tabs__ico svg { width: 22px; height: 22px; }
.th-tabs__chip.is-active .th-tabs__ico { background: var(--rf, var(--th-blue)); color: #fff; }
.th-tabs__label { min-width: 0; }

/* panels */
.th-tabs__panel {
  display: block;
  margin: 0 0 14px;
  padding: 18px 20px 22px;
  background: #fff;
  border: 1px solid var(--th-line);
  border-radius: 16px;
  width: 100%;
  height: auto;
}

.th-tabs__panel:last-child { margin-bottom: 0; }
.th-tabs.is-js .th-tabs__panel { display: none; }
.th-tabs.is-js .th-tabs__panel.is-active,
.th-tabs.is-js.is-all .th-tabs__panel { display: block; }
.th-tabs.is-js .th-tabs__panel.is-active { animation: thPanelIn .28s ease; }

@keyframes thPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .th-tabs.is-js .th-tabs__panel.is-active { animation: none; }
}

.th-tabs__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--th-font);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--th-ink);
  text-align: left;
}

.th-tabs__title .th-tabs__ico { width: 34px; height: 34px; border-radius: 9px; }
.th-tabs__title .th-tabs__ico svg { width: 19px; height: 19px; }

.th-tabs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 14px;
}

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

/* tree cards: the registry colour comes inline; the icon chip is icon-only */
.th-card__chip--icon { padding: 5px; gap: 0; }
.th-card__chip--icon svg { width: 15px; height: 15px; }

/* =========================================================================
   SENIORITY EXAMPLES: a capture of a role page's examples block, framed as
   a browser window. Regenerate the capture with the CDP shot helper when
   the samples component changes (see Resume Template Page.md 3.12).
   ========================================================================= */
.th-shotcard {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.th-shotcard__link {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #e4e7ee;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(60, 64, 67, .10),
    0 12px 28px -14px rgba(15, 23, 42, .22),
    0 40px 70px -32px rgba(26, 115, 232, .35);
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}

.th-shotcard__link:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(60, 64, 67, .10),
    0 18px 36px -16px rgba(15, 23, 42, .28),
    0 48px 80px -32px rgba(26, 115, 232, .42);
}

.th-shotcard__link:focus-visible { outline: 3px solid var(--th-blue); outline-offset: 3px; }

.th-shotcard__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: #f1f3f4;
  border-bottom: 1px solid #e4e7ee;
}

.th-shotcard__bar i { width: 10px; height: 10px; border-radius: 50%; background: #dadce0; }

.th-shotcard__url {
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  font-family: var(--th-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--th-grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.th-shotcard__img { display: block; width: 100%; height: auto; }

.th-shotcard__cap {
  margin: 16px 0 0;
  text-align: center;
  font-family: var(--th-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--th-grey);
}

.th-shotcard__cap a { color: var(--th-blue); font-family: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================================
   FORMATS, STEPS, WHY: icon-tile cards
   ========================================================================= */
.th-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.th-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }

.th-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 24px;
  background: #fff;
  border: 1px solid var(--th-line);
  border-radius: var(--th-radius);
  font-family: var(--th-font);
  color: var(--th-ink);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

a.th-tile:hover { border-color: var(--th-blue); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(15, 23, 42, .3); }

.th-tile__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--th-blue-tint);
  color: var(--th-blue-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-tile__icon svg { width: 24px; height: 24px; }

.th-tile__num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--th-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-tile h3 {
  margin: 4px 0 0;
  font-family: var(--th-font);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--th-ink);
  text-align: left;
}

.th-tile .th-p { font-size: 15px; }
.th-tile__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.th-tile__note { margin: 0; font-size: 12.5px; color: var(--th-grey); }
.th-tile .th-more { margin-top: auto; padding-top: 6px; }

/* ---- file formats: two tonal Material cards with illustrations ---- */
.th-fmt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}

.th-fmt__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 30px 28px;
  border-radius: 24px;
  text-align: center;
  font-family: var(--th-font);
  color: var(--th-ink);
}

.th-fmt__card--pdf { background: linear-gradient(170deg, #e8f0fe 0%, #f5f9ff 100%); }
.th-fmt__card--docx { background: linear-gradient(170deg, #fef3d6 0%, #fffaf0 100%); }

.th-fmt__ill { display: block; width: 100%; max-width: 250px; height: auto; margin-bottom: 8px; }

.th-fmt__card h3 {
  margin: 0;
  font-family: var(--th-font);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--th-ink);
  text-align: center;
  text-wrap: balance;
}

.th-fmt__card .th-p { max-width: 42ch; font-size: 15px; }
.th-fmt__actions { margin-top: 8px; }

.th-btn--white {
  background: #fff;
  color: var(--th-ink);
  border: 1px solid #dadce0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.th-btn--white:hover { background: #fff; color: var(--th-ink); border-color: #c4c7cb; box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .3); }

.th-fmt__note { margin: 0; font-size: 12.5px; color: var(--th-grey); }

/* ---- how it works: three illustrated cards joined by arrows ---- */
.th-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.th-steps__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 26px 28px;
  background: #fff;
  border: 1px solid var(--th-line);
  border-radius: 22px;
  text-align: center;
  font-family: var(--th-font);
  transition: transform .2s ease, box-shadow .2s ease;
}

.th-steps__card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(15, 23, 42, .3); }

.th-steps__card[data-step="blue"]   { --st: #1a73e8; --st-c: #e8f0fe; --st-on: #174ea6; }
.th-steps__card[data-step="yellow"] { --st: #f9ab00; --st-c: #fef7e0; --st-on: #b06000; }
.th-steps__card[data-step="green"]  { --st: #1e8e3e; --st-c: #e6f4ea; --st-on: #0d652d; }

.th-steps__ill { display: block; width: 100%; max-width: 230px; height: auto; margin-bottom: 6px; }

.th-steps__chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--st-c);
  color: var(--st-on);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.th-steps__card h3 {
  margin: 2px 0 0;
  font-family: var(--th-font);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--th-ink);
  text-align: center;
}

.th-steps__card .th-p { font-size: 15px; max-width: 40ch; }

.th-steps__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  margin-top: 96px;                 /* level with the illustrations */
  color: var(--th-blue);
}

.th-steps__arrow svg {
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--th-line);
  box-shadow: 0 4px 10px -4px rgba(15, 23, 42, .2);
}

/* ---- why: generic vs role-specific, side by side ---- */
.th-vs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}

.th-vs__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 8px;
  font-family: var(--th-font);
}

/* no container boxes: the two documents float on the section, the tag pill
   above each carries the colour instead */
.th-vs__tag {
  align-self: flex-start;
  padding: 7px 13px;
  border-radius: 999px;
  background: #f1f3f4;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-grey);
}

.th-vs__col--role .th-vs__tag { background: var(--th-blue-tint); color: var(--th-blue-ink); }

.th-vs__col--role .th-vs__doc {
  border-color: #c9dcf8;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08), 0 18px 34px -18px rgba(26, 115, 232, .35);
}

.th-vs__badge {
  align-self: center;
  justify-self: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--th-line);
  box-shadow: 0 6px 16px -6px rgba(15, 23, 42, .25);
  font-family: var(--th-font);
  font-size: 14px;
  font-weight: 800;
  color: var(--th-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* the mini documents: real words, resume type */
.th-vs__doc {
  flex: 1;
  padding: 18px 20px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e4e7ee;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08), 0 12px 24px -16px rgba(15, 23, 42, .25);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--th-ink);
}

.th-vs__doc--generic { color: #6b7075; }

.th-vs__name {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8eaed;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--th-ink);
}

.th-vs__doc--generic .th-vs__name { color: #4d5156; }
.th-vs__name span { margin-left: 6px; font-size: 10.5px; font-weight: 700; color: var(--th-blue); }
.th-vs__doc--generic .th-vs__name span { color: #80868b; }

.th-vs__label {
  margin: 10px 0 4px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--th-blue);
}

.th-vs__doc--generic .th-vs__label { color: #9aa0a6; }
.th-vs__line { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
.th-vs__cloud { margin: 0; font-family: inherit; font-size: inherit; line-height: 1.6; color: inherit; }
.th-vs__doc b { font-weight: 700; color: var(--th-blue-ink); }

.th-vs__grid { margin: 0; display: grid; gap: 3px; }
.th-vs__grid div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; }
.th-vs__grid dt { font-weight: 700; color: var(--th-ink); }
.th-vs__grid dd { margin: 0; color: #3c4043; }

.th-vs__bullets { margin: 0; padding: 0 0 0 12px; }
.th-vs__bullets li { margin: 0 0 3px; padding-left: 2px; }
.th-vs__bullets li::marker { color: var(--th-blue); }
.th-vs__doc--generic .th-vs__bullets li::marker { color: #9aa0a6; }

/* the two checklists */
.th-vs__list { list-style: none; margin: 0; padding: 0 4px; display: grid; gap: 8px; }

.th-vs__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--th-font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--th-ink);
}

.th-vs__list--no li { color: #5f6368; }

.th-vs__mark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.th-vs__mark svg { width: 12px; height: 12px; }
.th-vs__list--no .th-vs__mark { background: #fce8e6; color: #d93025; }
.th-vs__list--yes .th-vs__mark { background: #e6f4ea; color: #1e8e3e; }

/* the three sister-series links: plain Google-style text links, no chrome */
.th-vs__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 44px;
  max-width: 1080px;
  margin: 34px auto 0;
}

.th-vs__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--th-font);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--th-blue);
  text-decoration: none;
}

.th-vs__link:hover { color: var(--th-blue-hover); text-decoration: underline; text-underline-offset: 4px; }
.th-vs__link svg { width: 18px; height: 18px; transition: transform .15s ease; }
.th-vs__link:hover svg { transform: translateX(4px); }

/* ---- author card (hub restyle of the shared .art-bio block) ---- */
.art-bio.th-bio {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 36px 40px 34px;
  background: linear-gradient(170deg, #ffffff 0%, #f5f9ff 100%);
  border: 1px solid #e4e7ee;
  border-radius: 28px;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .06), 0 24px 48px -32px rgba(15, 23, 42, .25);
}

.th-bio .art-bio__top { gap: 22px; }

.th-bio .art-bio__photo {
  flex-basis: 96px;
  width: 96px;
  height: 96px;
  box-shadow: 0 0 0 4px #fff, 0 10px 24px -10px rgba(15, 23, 42, .35);
}

.th-bio .art-bio__eyebrow { color: var(--th-blue); font-size: 11.5px; }
.th-bio .art-bio__name { font-size: 26px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 8px; }
.th-bio .art-bio__li { flex-basis: 28px; width: 28px; height: 28px; }
.th-bio .art-bio__li svg { width: 13px; height: 13px; }

.th-bio .art-bio__role { gap: 8px; }
.th-bio .art-bio__sep { display: none; }

.th-bio .art-bio__chip,
.th-bio .art-bio__role > span:not(.art-bio__chip):not(.art-bio__sep) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--th-line);
  color: var(--th-ink-2);
  font-size: 13px;
  font-weight: 600;
}

.th-bio .art-bio__g { width: 16px; height: 16px; }

.th-bio .art-bio__text {
  margin-top: 22px;
  font-family: var(--th-font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--th-ink-2);
}

/* stats: four tonal tiles in Google colours */
.th-bio .art-bio__stats {
  grid-auto-flow: row;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.th-bio .art-bio__stat {
  padding: 16px 18px;
  border: 0;
  border-radius: 16px;
  background: var(--tile, #e8f0fe);
}

.th-bio .art-bio__stat:nth-child(1) { --tile: #e8f0fe; }
.th-bio .art-bio__stat:nth-child(2) { --tile: #e6f4ea; }
.th-bio .art-bio__stat:nth-child(3) { --tile: #fef7e0; }
.th-bio .art-bio__stat:nth-child(4) { --tile: #f3e8fd; }

.th-bio .art-bio__stat dt { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--th-ink); }
.th-bio .art-bio__stat dd { margin-top: 4px; font-size: 13px; color: var(--th-ink-2); }
.th-bio .art-bio__star { font-size: 17px; }

.th-bio .art-bio__link {
  margin-top: 26px;
  padding: 12px 24px;
  border: 0;
  background: var(--th-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(26, 115, 232, .28), 0 8px 18px -8px rgba(26, 115, 232, .5);
  transition: background .15s ease, transform .15s ease;
}

.th-bio .art-bio__link:hover { background: var(--th-blue-hover); color: #fff; transform: translateY(-1px); }

.th-formats__rule {
  max-width: 900px;
  margin: 22px auto 0;
  text-align: center;
  font-family: var(--th-font);
  font-size: 14.5px;
  color: var(--th-grey);
}

.th-formats__rule strong { color: var(--th-ink); font-weight: 700; }
.th-formats__rule a { color: var(--th-blue); font-family: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .th-top__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .th-tabs__grid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
}

@media (max-width: 900px) {
  /* the chip bar becomes one scrolling row, Play-Store style */
  .th-tabs__bar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -18px;
    padding: 2px 18px 8px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 18px;
    -webkit-overflow-scrolling: touch;
  }
  .th-tabs__bar::-webkit-scrollbar { display: none; }
  .th-tabs__chip { flex: 0 0 auto; width: 196px; scroll-snap-align: start; }
  /* hero stacks: art-hero dissolves .art-hero__text into the column, so the
     finder and the count line need their own slots in that order */
  /* On a phone the finder is the hub's one action, so it goes straight
     under the blurb and inside the first screen; the fan follows. */
  .art-hero .th-hero-finder { margin-top: 24px; }
  /* The stacked hero centres its flex items, so the media box shrink-wraps.
     The fan's only in-flow content is nothing (its sheets are absolutely
     positioned), which collapsed it to 0x0. A definite width on the media
     box gives the fan something to be 100% of. */
  .art-hero .art-hero__media { width: 100%; }
  .th-fan { max-width: 330px; }
  .th-anatomy__grid { grid-template-columns: 1fr; }
  .th-anatomy__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-real { max-width: 400px; }
  .th-cards { grid-template-columns: 1fr 1fr; }
  .th-bio .art-bio__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-steps { grid-template-columns: 1fr; gap: 14px; }
  .th-steps__arrow { display: none; }
  .th-vs { grid-template-columns: 1fr; gap: 0; }
  .th-vs__badge { margin: 18px auto; }
}

@media (max-width: 720px) {
  .th-top__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .th-cards, .th-cards--2, .th-anatomy__list, .th-fmt { grid-template-columns: 1fr; }
  .th-ats { grid-template-columns: 1fr; padding: 20px 18px; text-align: center; }
  .th-ats__ill { max-width: 170px; margin: 0 auto; }
  .th-ats__title { text-align: center; }
  .th-ats__list { justify-content: center; }
  .th-tabs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .th-tabs__panel { padding: 14px 14px 16px; }
  .th-card__body { padding: 10px 11px 12px; }
  .th-card__title { font-size: 14px; }
}

@media (max-width: 600px) {
  .th-section { padding-inline: 18px; }
  .th-fan { max-width: 230px; }
  .th-finder__wrap { flex-wrap: wrap; row-gap: 6px; }
  .th-finder__row { flex: 1 1 100%; }
  .th-finder__or { flex: 1 1 100%; text-align: center; line-height: 1; }
  .th-finder__all { flex: 1 1 100%; height: 48px; }
  .th-top__grid { gap: 10px; }
  .th-card--lg .th-card__title { font-size: 15px; }
  .th-card--lg .th-card__sub { font-size: 12.5px; }
  /* 170px stages: the chip keeps its icon and drops the family name */
  .th-card__chip { padding: 6px; }
  .th-card__chip > span { display: none; }
  .th-real { max-width: calc(100% - 14px); }
  .th-tile { padding: 20px 18px 18px; }
  .th-fmt__card { padding: 24px 18px 22px; border-radius: 20px; }
  .th-vs__col { padding: 0; }
  .art-bio.th-bio { padding: 24px 18px 24px; border-radius: 22px; }
  .th-bio .art-bio__photo { flex-basis: 72px; width: 72px; height: 72px; }
  .th-bio .art-bio__name { font-size: 22px; }
  .th-bio .art-bio__stat { padding: 12px 14px; }
  .th-vs__doc { padding: 14px 14px 12px; }
  .th-vs__links { flex-direction: column; align-items: center; gap: 14px; }
}