/* =========================================================================
   TEMPLATE PAGE V3 STYLESHEET. Load order inside this file:
   1. Industry voices (copied from resume-guides/resume-guide.css L2813-3079,
      2026-10-12; guides keep their own copy until they are retired)
   2. JD keyword scanner (copied from resume-skills/resume-skills.css L449-592;
      never link resume-skills.css on a template page)
   3. V3 components (rt3-*), last so they win ties
   ========================================================================= */


/* =========================================================================
   INDUSTRY VOICES  (moved out of resume-templates/resume-template.css on
   2026-08-27)
   -------------------------------------------------------------------------
   The X-post cards and the block around them, including the overrides that
   mention a chrome class (.rt-signal .rt-voices__demand). Guides are the
   only series that renders this.
   ========================================================================= */


/* =========================================================================
   INDUSTRY VOICES
   -------------------------------------------------------------------------
   A facade rather than real X embeds. The official widgets.js is licensed
   and would be the correct way to reproduce a post in full, but it is
   third-party, render-blocking, and reflows on load, which is LCP and CLS
   damage on a page whose whole job is to rank. These are attributed
   summaries with a link back, which needs no script at all.

   M3 OUTLINED card: a hairline and no resting shadow, elevation on hover
   only. Cards are right here where they were wrong for the part samples,
   because these are four discrete objects from four different sources
   rather than one table wearing a box.

   .rt-voices is in the section reset: main.css sets `section { display:flex;
   align-items:center }`.
   ========================================================================= */
.rt-voices {
  display: block;
  width: 100%;
  max-width: 1120px;
  height: auto;
  gap: 0;
  margin-inline: auto;
  padding-block: var(--rt-space-section) 0;
}

/* On the guide the block sits inside an .rg-section, which already supplies
   the vertical rhythm and the side padding. */
/* One measure for the whole opening section, matched to the navbar's own
   content width so the block starts on the same line as the brand mark. */
.rt-voices--guide {
  max-width: 1160px;
  margin: 48px auto 0;
  padding-block: 0;
}

.rt-voices__head { max-width: 780px; margin: 0 0 var(--rt-space-block); }

.rt-voices__eyebrow {
  margin: 0 0 10px;
  font-family: var(--rt-g-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--rt-g-primary);
}

.rt-voices__title {
  margin: 0 0 14px;
  font-family: var(--rt-g-font);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: left;                 /* bare h2 rule is centred */
  color: #1f1f1f;
  text-wrap: balance;
}

/* Subhead variant: on the guide this block sits under a page-level h2, so its
   own title steps down a level in size as well as in tag. Declared after the
   base rule, not before it, or the base font-size wins on equal specificity. */
.rt-voices__title--sub {
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 700;
  margin-bottom: 10px;
}

.rt-voices__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.rt-voice {
  display: flex;
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 16px;
  padding: 20px 22px;
  transition: border-color 140ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 140ms cubic-bezier(0.2, 0, 0, 1);
}

.rt-voice > article { display: flex; flex-direction: column; width: 100%; }

.rt-voice:hover {
  border-color: #dadce0;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.10),
              0 2px 6px 2px rgba(60, 64, 67, 0.08);
}

.rt-voice__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.rt-voice__who { display: grid; gap: 2px; min-width: 0; flex: 1; }

.rt-voice__name {
  font-family: var(--rt-g-font);
  font-size: 14.5px;
  font-weight: 700;
  color: #1f1f1f;
  letter-spacing: -0.01em;
}

.rt-voice__handle {
  font-family: var(--rt-g-font);
  font-size: 12.5px;
  color: #5f6368;
}

.rt-voice__mark { width: 16px; height: 16px; flex-shrink: 0; color: #5f6368; }

.rt-voice__body {
  margin: 0 0 16px;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rt-copy-ink);
  flex: 1;
}

.rt-voice__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f3f4;
  font-family: var(--rt-g-font);
  font-size: 12.5px;
  color: #5f6368;
}

.rt-voice__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--rt-g-primary);
  text-decoration: none;
  white-space: nowrap;
}

.rt-voice__link:hover { color: var(--rt-g-primary-dark); text-decoration: underline; }
.rt-voice__link svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) {
  .rt-voice { transition: none; }
}

/* =========================================================================
   INDUSTRY VOICES: X POST FORMATTING
   -------------------------------------------------------------------------
   Built to read as a post rather than as a pull quote: avatar, display name
   with the verified badge where the account actually carries one, @handle,
   the X mark, then the text with its line breaks intact and its links and
   mentions in X blue.

   a16z deliberately has no badge (is_blue_verified is false on that
   account), and the two organisation accounts get square avatars, because
   that is what their profile_image_shape says. Copying those details is the
   difference between "looks like an X post" and "looks like a fake one".
   ========================================================================= */
.rt-voice__head { align-items: center; }

.rt-voice__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #f1f3f4;
}

.rt-voice__avatar--square { border-radius: 8px; }

.rt-voice__name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rt-voice__badge { width: 15px; height: 15px; flex-shrink: 0; }

.rt-voice__body {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  quotes: none;
  white-space: pre-line;            /* the post's own line breaks */
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: #0f1419;                   /* X body ink */
  flex: 1;
}

.rt-voice__ent { color: #1d9bf0; }  /* X link blue, unlinked */

/* A cut post (X long post): fade the last lines instead of a note saying the
   full post is longer. The body hugs its text so the fade lands on the words,
   and margin-bottom: auto keeps the footer at the card's bottom. */
.rt-voice__body--excerpt {
  flex: 0 0 auto;
  margin-bottom: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 4.65em), rgba(0, 0, 0, 0.12));
          mask-image: linear-gradient(to bottom, #000 calc(100% - 4.65em), rgba(0, 0, 0, 0.12));
}
.rt-voice__body--excerpt + .rt-voice__foot { margin-top: 14px; }

.rt-voice__note {
  margin: -6px 0 14px;
  font-family: var(--rt-g-font);
  font-size: 11.5px;
  color: #80868b;
}

/* Same link treatment as .rt-part__lede: main.css leaves bare links grey. */
.rt-voices__demand a {
  color: #1a73e8;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 115, 232, 0.35);
}

.rt-voices__demand a:hover { border-bottom-color: #1a73e8; }

.rt-voices__demand {
  margin: 0 0 var(--rt-space-block);
  max-width: 72ch;
  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);        /* same ink as the lede above it */
}

.rt-signal .rt-voices__demand {
  margin: 0;
  max-width: none;
}

.rt-signal .rt-voices__demand {
  margin: 0;
  max-width: none;
}
@media (max-width: 900px) {
  .rt-signal .rt-voices__demand { grid-column: 1 / -1; }
}

/* The salary range is the number people came for; the note is set quieter
   than body copy, so bold alone is not enough separation. Ink as well. */
.rt-voices__demand strong {
  font-weight: 700;
  color: #1f1f1f;

}

/* ---------- 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;
}


/* =========================================================================
   TEMPLATE PAGE V3: consolidated template + guide + skills
   -------------------------------------------------------------------------
   Loaded ONLY on V3 pages, after resume-template.css. Every rule here is
   scoped to an rt3-* class (or a V3-only wrapper), so V1/V2 template pages
   are untouched by construction. Spec: "Template V3 Process.md".

   Design language is V2's (Resume Template Page.md §8): white on white,
   unboxed by default, hairlines #e8eaed / #dadce0, the eight-hue palette
   (no red), no side accent stripes, DM Sans headings via --rt-g-font.

   main.css leaks to remember (bare element rules): h3 is centred with 1.5px
   tracking and 1.75 leading; section is flex/centred with 2rem margins;
   nav is position:fixed. So: every new h3/h4 resets alignment, tracking
   and leading; no new <nav> (the jump row is a div[role=navigation]).
   ========================================================================= */

.rt3-page {
  --rt3-ink: #1f2125;
  --rt3-ink-2: #3c4043;
  --rt3-mute: #5f6368;
  --rt3-line: #e8eaed;
  --rt3-line-2: #dadce0;
  --rt3-blue: #1a73e8;
}

/* Palette: tint / mid / accent per hue (§8.7). */
.rt3-page [data-color="blue"]   { --c-t: #e8f0fe; --c-m: #aecbfa; --c-a: #1a73e8; }
.rt3-page [data-color="purple"] { --c-t: #f3e8fd; --c-m: #d7aefb; --c-a: #9334e6; }
.rt3-page [data-color="amber"]  { --c-t: #fef7e0; --c-m: #fdd663; --c-a: #e37400; }
.rt3-page [data-color="green"]  { --c-t: #e6f4ea; --c-m: #a8dab5; --c-a: #1e8e3e; }
.rt3-page [data-color="indigo"] { --c-t: #e8eaf6; --c-m: #c5cae9; --c-a: #3f51b5; }
.rt3-page [data-color="pink"]   { --c-t: #fce4ef; --c-m: #f3aed3; --c-a: #c2379a; }
.rt3-page [data-color="cyan"]   { --c-t: #e0f7fa; --c-m: #80deea; --c-a: #00838f; }
.rt3-page [data-color="slate"]  { --c-t: #f1f3f4; --c-m: #dadce0; --c-a: #5f6368; }

/* Shared heading reset for every new h3/h4 (main.css centres bare h3). */
.rt3-page .rt3-types__title,
.rt3-page .rt3-card__title,
.rt3-page .rt3-sub__title,
.rt3-page .rt3-cat__title {
  text-align: left;
  letter-spacing: -0.01em;
  line-height: 1.3;
  font-family: var(--rt-g-font);
  color: var(--rt3-ink);
  margin: 0;
}

/* ---------- Hero: jump links ------------------------------------------- */
.rt3-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.rt3-jump__link {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--rt3-line-2);
  border-radius: 999px;
  font: 600 13.5px/1.2 var(--rt-g-font);
  color: var(--rt3-ink-2);
  text-decoration: none;
  background: #fff;
  transition: border-color .15s, color .15s, background .15s;
}
.rt3-jump__link:hover { border-color: var(--rt3-blue); color: var(--rt3-blue); background: #f8fbff; }

/* ---------- Intro + industry signal ------------------------------------ */
.rt3-signal {
  max-width: 1120px;
  margin: var(--rt-space-block) auto 0;
  padding-top: var(--rt-space-block);
  border-top: 1px solid var(--rt3-line);
}
.rt3-intro .rt3-signal .rt-voices__head { margin-bottom: 18px; }
/* Desktop: the note runs 7 to 8 lines, so top-aligned stats left a tall
   empty block under the figures. Centre them on the note instead. */
@media (min-width: 901px) {
  .rt3-signal .rt-signal { align-items: center; }
}

/* ---------- How to write: short answer, author, 5 steps ---------------- */
.rt3-howto .rt-group__head { margin-bottom: 22px; }

.rt3-author {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  max-width: 1120px;
  margin: 0 0 30px;
}
.rt3-author__photo { width: 56px; height: 56px; border-radius: 50%; display: block; }
.rt3-author__text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px;
}
.rt3-author__text p {
  margin: 0;
  font-size: var(--rt-copy-size);
  line-height: var(--rt-copy-line);
  color: var(--rt-copy-ink);
}
.rt3-author__text a,
.rt3-step__lede a,
.rt3-sub__lede a {
  color: var(--rt3-blue);
  text-decoration: none;
  border-bottom: 1px solid #aecbfa;
}
.rt3-author__text a:hover,
.rt3-step__lede a:hover,
.rt3-sub__lede a:hover { border-bottom-color: var(--rt3-blue); }

.rt3-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.rt3-steps > li { margin: 0; display: flex; }
.rt3-steps__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 16px;
  border: 1px solid #dadce0;
  border-radius: 20px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.rt3-steps__card:hover,
.rt3-steps__card:focus-visible {
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .18), 0 6px 16px 2px rgba(60, 64, 67, .10);
  transform: translateY(-2px);
}
.rt3-steps__card:focus-visible { outline: 2px solid var(--c-a); outline-offset: 2px; }

/* the illustration well: tint of the step's hue, a mini resume inside */
.rt3-steps__viz {
  display: block;
  border-radius: 14px;
  background: var(--c-t);
  overflow: hidden;
}
.rt3-steps__viz svg { display: block; width: 100%; height: auto; transition: transform .25s ease; }
.rt3-steps__card:hover .rt3-steps__viz svg { transform: scale(1.04); }
.rt3-steps__viz .v-paper  { fill: #fff; }
.rt3-steps__viz .v-shadow { fill: var(--c-m); opacity: .55; }
.rt3-steps__viz .v-line   { fill: #dadce0; }
.rt3-steps__viz .v-line2  { fill: #eceef1; }
.rt3-steps__viz .v-a      { fill: var(--c-a); }
.rt3-steps__viz .v-m      { fill: var(--c-m); }
.rt3-steps__viz .v-t      { fill: var(--c-t); }
.rt3-steps__viz .v-stroke { stroke: var(--c-a); stroke-width: 1.4; }
.rt3-steps__viz .v-step   { fill: #fff; }
.rt3-steps__viz .v-badge  { fill: #fff; font: 800 9.5px/1 var(--rt-g-font); letter-spacing: .04em; }
.rt3-steps__viz .v-lvl    { fill: var(--c-a); font: 800 9px/1 var(--rt-g-font); }

.rt3-steps__body { display: grid; gap: 4px; padding: 16px 8px 0; flex: 1; align-content: start; }
.rt3-steps__kicker {
  font: 700 11.5px/1.2 var(--rt-g-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-a);
}
.rt3-steps__title { font: 700 17px/1.3 var(--rt-g-font); color: #202124; letter-spacing: -0.01em; }
.rt3-steps__desc { font-size: 14px; line-height: 1.5; color: #5f6368; }
.rt3-steps__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 8px 0;
  font: 600 13.5px/1 var(--rt-g-font);
  color: var(--c-a);
}
.rt3-steps__go svg { width: 16px; height: 16px; transition: transform .2s; }
.rt3-steps__card:hover .rt3-steps__go svg { transform: translateX(3px); }


/* ---------- Step sections ---------------------------------------------- */
.rt3-step { scroll-margin-top: 96px; }
.rt3-step .rt-group__head { margin-bottom: 18px; }

.rt3-step__intro {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-bottom: var(--rt-space-block);
}
.rt3-step__ledes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 34px;
}
.rt3-step__lede {
  margin: 0;
  font-size: var(--rt-copy-size);
  line-height: var(--rt-copy-line);
  color: var(--rt-copy-ink);
  text-wrap: pretty;
}
.rt3-step__lede + .rt3-step__lede {
  padding-left: 34px;
  border-left: 1px solid #e6e8ee;
  margin-left: -1px;
}
.rt3-step__media { display: flex; justify-content: center; }
.rt3-step__media .rt-part__ill { max-width: 300px; }

.rt3-step__closer {
  max-width: 760px;
  margin: var(--rt-space-block) 0 0;
  font-size: var(--rt-copy-size);
  line-height: var(--rt-copy-line);
  color: var(--rt-copy-ink);
}

.rt3-sample { margin-top: var(--rt-space-block); }

/* Sub-blocks inside a step (Step 5 has four) */
.rt3-sub { margin-top: var(--rt-space-section); }
.rt3-sub:first-of-type { margin-top: var(--rt-space-block); }
.rt3-sub__title { font-size: clamp(20px, 2vw, 24px); font-weight: 800; margin-bottom: 8px; }
.rt3-sub__lede {
  max-width: 760px;
  margin: 0 0 22px;
  font-size: var(--rt-copy-size);
  line-height: var(--rt-copy-line);
  color: var(--rt-copy-ink);
}

/* ---------- Step 2: the 5 bullet jobs + coloured sample ---------------- */
.rt3-types {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px;
}
.rt3-types__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rt3-line);
}
.rt3-types__num,
.rt3-sum__tag,
.rt3-card__num {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-t);
  color: var(--c-a);
  font: 800 13px/1 var(--rt-g-font);
  flex: none;
}
.rt3-types__title { font-size: 16.5px; font-weight: 700; margin-bottom: 4px; }
.rt3-types__desc { margin: 0; font-size: 15px; line-height: 1.6; color: var(--rt-copy-ink); }

.rt3-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rt3-sum li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.65;
  color: var(--rt3-mute);
}
.rt3-sum__tag { width: 24px; height: 24px; font-size: 11.5px; margin-top: 1px; }
.rt3-sum strong { color: var(--rt3-ink-2); font-weight: 600; }

/* ---------- Step 3: coverage index + 8 cards --------------------------- */
.rt3-cov__link { color: inherit; text-decoration: none; }
.rt3-cov__link:hover { color: var(--rt3-blue); }

.rt3-cards {
  list-style: none;
  margin: var(--rt-space-block) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.rt3-card {
  margin: 0;
  padding: 22px 24px 20px;
  border: 1px solid var(--rt3-line-2);
  border-radius: 16px;
  background: #fff;
  scroll-margin-top: 96px;
  transition: border-color .15s;
}
.rt3-card:hover, .rt3-card:target { border-color: var(--c-a); }
.rt3-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rt3-card__ico { width: 34px; height: 34px; flex: none; }
.rt3-card__title { font-size: 17.5px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.rt3-card__num { width: 24px; height: 24px; font-size: 11.5px; }
/* The number sits beside the h3 (not inside it) so the heading text stays clean; -2px keeps the old 10px gap. */
.rt3-card__num + .rt3-card__title { margin-left: -2px; }
.rt3-card__desc { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--rt-copy-ink); }
.rt3-card__chips { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rt3-line); }
.rt3-card__chips > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #f1f3f4;
}
.rt3-card__chips > div:last-child { border-bottom: 0; }
.rt3-card__chips dt {
  font: 700 11px/1.6 var(--rt-g-font);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-a);
}
.rt3-card__chips dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--rt3-ink-2); }

/* ---------- Step 4: the level builder ----------------------------------- */
.rt3-build { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rt3-line); }
.rt3-build__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rt3-line);
}
.rt3-build__badge {
  margin: 0;
  display: grid;
  gap: 2px;
  align-content: start;
  font: 700 15px/1.3 var(--rt-g-font);
  color: var(--rt3-ink);
}
.rt3-build__lvl {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rt3-mute);
}
.rt3-build__row[data-level="1"] .rt3-build__lvl { color: #e37400; }
.rt3-build__row[data-level="2"] .rt3-build__lvl { color: #1a73e8; }
.rt3-build__row[data-level="3"] .rt3-build__lvl { color: #00838f; }
.rt3-build__row[data-level="4"] .rt3-build__lvl { color: #9334e6; }
.rt3-build__row[data-level="5"] .rt3-build__lvl { color: #1e8e3e; }
.rt3-build__why { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--rt-copy-ink); }
.rt3-build__why strong { color: var(--rt3-ink); }
.rt3-build__bullet {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--rt3-ink);
  overflow-wrap: break-word;
}
.rt3-build__bullet .rt-lyr__seg { padding: 1px 3px; border-radius: 4px; }
.rt3-build__lyr { margin: 0; }

/* ---------- Step 5: categories, scanner, soft skills -------------------- */
.rt3-cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.rt3-cat {
  padding: 20px 22px;
  border: 1px solid var(--rt3-line-2);
  border-radius: 16px;
  background: #fff;
}
.rt3-cat:hover { border-color: var(--c-a); }
.rt3-cat__title { font-size: 16.5px; font-weight: 800; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.rt3-cat__title::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--c-a);
  flex: none;
}
.rt3-cat__desc { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--rt3-mute); }
.rt3-cat__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rt3-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f1f3f4;
  font-size: 13px;
  line-height: 1.3;
  color: var(--rt3-ink-2);
}
.rt3-chip--must { background: var(--c-t); color: var(--rt3-ink); font-weight: 600; }
.rt3-chip__logo { width: 16px; height: 16px; object-fit: contain; flex: none; }
.rt3-chip__star { width: 12px; height: 12px; fill: var(--c-a); flex: none; }





/* ---------- Bio: centred ------------------------------------------------ */
.art-bio.art-bio--center { text-align: center; }
.art-bio--center .art-bio__top { flex-direction: column; align-items: center; justify-content: center; }
.art-bio--center .art-bio__id { text-align: center; }
.art-bio--center .art-bio__name,
.art-bio--center .art-bio__role { justify-content: center; }
.art-bio--center .art-bio__text { margin-inline: auto; max-width: 600px; }
.art-bio--center .art-bio__stats { justify-content: center; }
.art-bio--center .art-bio__link { margin-inline: auto; }

/* ---------- Resume by level (optional block after the examples) ---------- */
/* Two outlined cards, one H2 each (content.json "levels"). Headings reset at class
   level: main.css centres and styles bare h2. */
.rt3-levels { padding-bottom: 8px; }
.rt3-levels .rt-group__eyebrow { margin-bottom: 16px; }
.rt3-levels__intro { margin: -4px 0 24px; }
.rt3-levels__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.rt3-level {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 28px 24px;
  border: 1px solid #dadce0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
}
.rt3-level__chip {
  align-self: flex-start;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--c-t);
  color: var(--c-a);
  font: 700 12.5px/1.2 var(--rt-g-font);
  letter-spacing: 0.02em;
}
.rt3-page .rt3-level__title {
  margin: 0;
  font: 800 clamp(22px, 2.3vw, 27px)/1.2 var(--rt-g-font);
  letter-spacing: -0.015em;
  color: #1f1f1f;
  text-align: left;
  text-transform: none;
}
.rt3-level__lede { margin: 0; font-size: 16px; line-height: 1.7; color: #3c4043; }
.rt3-level__lede strong { font-weight: 700; color: #1f1f1f; }
.rt3-level__rows { list-style: none; margin: 2px 0 0; padding: 0; border-top: 1px solid #e8eaed; }
.rt3-level__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid #e8eaed;
}
.rt3-level__ico {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: #f8f9fa;
}
.rt3-level__ico svg { width: 24px; height: 24px; display: block; }
.rt3-level__rtxt { display: block; font-size: 14.5px; line-height: 1.55; color: #3c4043; }
.rt3-level__rt { font: 700 14.5px/1.4 var(--rt-g-font); color: #202124; }
.rt3-level__note {
  margin: 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--c-t);
  font-size: 14.5px;
  line-height: 1.6;
  color: #3c4043;
}
.rt3-level__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; }
.rt3-level__btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid #dadce0;
  border-radius: 999px;
  background: #fff;
  color: #1a73e8;
  font: 600 14.5px/1.2 var(--rt-g-font);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.rt3-level__btn:hover { background: #f8f9fa; border-color: #c4c7c5; }
.rt3-level__btn--primary { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.rt3-level__btn--primary:hover { background: #1765cc; border-color: #1765cc; }
.rt3-level__btn:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }

/* ---------- More resources: 4 cards ------------------------------------- */
.rt3-resources__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 3 cards (no cover letter page for the role): 3 columns at exactly the 4-card card width,
   centred by the grid's margin: 0 auto. A 4-card row of width W has cards of (W - 48) / 4, so
   3 of them plus 2 gaps = 0.75W - 4 (W is the container, capped at 1200px: 896px max). */
.rt3-resources__grid:has(> .rt-resource:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: min(896px, calc(75% - 4px));
}
.rt3-viz-review {
  width: 100%;
  max-width: 190px;
  display: grid;
  gap: 7px;
  padding: 14px 14px 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .12), 0 2px 6px rgba(60, 64, 67, .08);
}
.rt3-viz-review__line { height: 6px; border-radius: 3px; background: #e8eaed; }
.rt3-viz-review__line--w90 { width: 90%; }
.rt3-viz-review__line--w75 { width: 75%; }
.rt3-viz-review__line--hit { width: 82%; background: #ceead6; box-shadow: 0 0 0 2px #a8dab5; }
.rt3-viz-review__note {
  justify-self: start;
  margin-top: 2px;
  padding: 4px 8px;
  border-radius: 8px 8px 8px 2px;
  background: #1e8e3e;
  color: #fff;
  font: 600 10px/1.2 var(--rt-g-font);
}

/* ---------- Bottom trees ------------------------------------------------- */
.rt3-tree + .rt3-tree { padding-top: 0; }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1100px) {
  .rt3-resources__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 3 cards on 2 columns: the third card sits alone on its row, centred at column width */
  .rt3-resources__grid:has(> .rt-resource:nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1200px; }
  .rt3-resources__grid > .rt-resource:nth-child(3):last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}
@media (max-width: 860px) {
  .rt3-levels__grid { grid-template-columns: 1fr; gap: 16px; }
  .rt3-level { padding: 22px 18px 20px; }
  .rt3-step__intro { grid-template-columns: 1fr; gap: 22px; }
  .rt3-step__media { order: -1; }
  .rt3-step__media .rt-part__ill { max-width: 240px; }
  .rt3-step__ledes { grid-template-columns: 1fr; gap: 16px; }
  .rt3-step__lede + .rt3-step__lede { padding-left: 0; border-left: 0; margin-left: 0; padding-top: 16px; border-top: 1px solid #e6e8ee; }
  .rt3-author__text { grid-template-columns: 1fr; gap: 14px; }
  .rt3-types,
  .rt3-cards,
  .rt3-cats { grid-template-columns: 1fr; }
  .rt3-build__row { grid-template-columns: 1fr; gap: 8px; }
  .rt3-build__badge { grid-auto-flow: column; justify-content: start; gap: 10px; align-items: baseline; }
}
@media (max-width: 560px) {
  .rt3-steps { grid-template-columns: 1fr; }
  .rt3-resources__grid { grid-template-columns: 1fr; }
  .rt3-resources__grid:has(> .rt-resource:nth-child(3):last-child) { grid-template-columns: 1fr; }
  .rt3-resources__grid > .rt-resource:nth-child(3):last-child { grid-column: auto; justify-self: stretch; width: auto; }
  .rt3-author { grid-template-columns: 1fr; }
  .rt3-card { padding: 18px 16px; }
  .rt3-card__chips > div { grid-template-columns: 1fr; gap: 2px; }
}

/* The name on the live paper is a <p> on V3 (it was an <h2>, which put
   "Avery Singh Senior GRC Analyst" in the page outline). These are the
   computed values the h2 had, so the paper looks identical. */
.rt3-page p.rt-resume-header__name {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 30px;
  color: #1f1f1f;
  text-align: center;
}

/* V3 adds a third toolbar button (Word). Under 600px the hint and the three
   buttons no longer fit on one row: let the row wrap, buttons on their own
   line, and let the export strip's buttons wrap the same way. */
@media (max-width: 600px) {
  .rt3-page .rt-toolbar { flex-wrap: wrap; }
  .rt3-page .rt-toolbar__actions { flex-wrap: wrap; }
  .rt3-page .rt-export__actions { flex-wrap: wrap; }
}

/* ---------- Samples: PDF + Word buttons --------------------------------- */
.rt3-doc__actions { gap: 10px; }
.rt3-doc__actions .rt-doc__dl + .rt-doc__dl { margin-top: 0; }
.rt-doc__dl.rt3-dl-word {
  background: #fff;
  color: #1a73e8;
  box-shadow: inset 0 0 0 1px #dadce0;
}
.rt-doc__dl.rt3-dl-word:hover { background: #f8fbff; box-shadow: inset 0 0 0 1px #1a73e8; }
.rt3-doc__actions .rt-doc__dl-note { margin-top: 4px; }


/* =========================================================================
   STEP 5: KEYWORD FINDER (two columns) + SOFT SKILLS (settings-style list)
   Google patterns: Material filled text field, pill buttons, tonal chips,
   one outlined surface per tool, rows divided by hairlines inside it.
   ========================================================================= */
.rt3-scan__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
}
.rt3-scan__copy .rt3-sub__lede { margin-bottom: 26px; }

.rt3-scan__tiers { margin: 0 0 22px; display: grid; gap: 0; border-top: 1px solid var(--rt3-line); }
.rt3-scan__tiers > div { padding: 14px 0; border-bottom: 1px solid var(--rt3-line); }
.rt3-scan__tiers dt {
  display: flex; align-items: center; gap: 10px;
  font: 700 15px/1.3 var(--rt-g-font);
  color: var(--rt3-ink);
}
.rt3-scan__tiers dd { margin: 4px 0 0 20px; font-size: 14.5px; line-height: 1.55; color: var(--rt3-mute); }
.rt3-scan__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.rt3-scan__dot--must { background: #1a73e8; }
.rt3-scan__dot--strong { background: #1e8e3e; }
.rt3-scan__note {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-size: 13.5px;
  color: var(--rt3-mute);
}
.rt3-scan__note::before {
  content: "";
  width: 16px; height: 16px; flex: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.4' fill='%231e8e3e'/%3E%3Cpath d='M8.4 10.5V8a3.6 3.6 0 0 1 7.2 0v2.5' fill='none' stroke='%231e8e3e' stroke-width='2.2'/%3E%3C/svg%3E");
}

/* the tool surface */
.rt3-scan__tool {
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 24px;
  padding: clamp(18px, 2vw, 26px);
  box-shadow: 0 1px 2px rgba(60, 64, 67, .10), 0 2px 8px 2px rgba(60, 64, 67, .06);
}
.rt3-scan .rs-scanner { gap: 14px; margin: 0; }
.rt3-scan .rs-scanner__input {
  min-height: 210px;
  padding: 16px 18px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: #f1f3f4;
  font-size: 15px;
  line-height: 1.6;
  color: #202124;
}
.rt3-scan .rs-scanner__input:hover { background: #e8eaed; }
.rt3-scan .rs-scanner__input:focus {
  background: #fff;
  border-color: #1a73e8;
  box-shadow: 0 0 0 1px #1a73e8;
}
.rt3-scan .rs-scanner__input::placeholder { color: #80868b; }
.rt3-scan .rs-scanner__actions { gap: 8px; }
.rt3-scan .rs-scanner__btn,
.rt3-scan .rs-scanner__link,
.rt3-scan .rs-scanner__clear {
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  font: 600 14px/40px var(--rt-g-font);
  letter-spacing: .01em;
  text-decoration: none;
  transform: none;
  transition: background .15s, box-shadow .15s, color .15s;
}
.rt3-scan .rs-scanner__btn { background: #1a73e8; color: #fff; padding: 0 24px; }
.rt3-scan .rs-scanner__btn:hover { background: #1765cc; box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.rt3-scan .rs-scanner__link { color: #1a73e8; padding: 0 14px; }
.rt3-scan .rs-scanner__link:hover { background: #e8f0fe; color: #1a73e8; }
.rt3-scan .rs-scanner__clear { border: 0; color: #5f6368; padding: 0 14px; }
.rt3-scan .rs-scanner__clear:hover { background: #f1f3f4; color: #202124; }
.rt3-scan .rs-scanner__result { min-height: 0; }
.rt3-scan .rs-scanner__placeholder {
  border: 0;
  border-radius: 16px;
  background: #f8f9fa;
  color: #5f6368;
  font-size: 14px;
  padding: 22px 20px;
}
.rt3-scan .rs-scanner__hits { font-size: 14.5px; color: #3c4043; }
.rt3-scan .rs-scanner__hits strong { color: #1a73e8; }
.rt3-scan .rs-scanner__group-label { color: #5f6368; letter-spacing: .09em; }
.rt3-scan .rs-scanner__chip { font: 600 13px/1.2 var(--rt-g-font); padding: 7px 12px; border: 0; }
.rt3-scan .rs-scanner__chip[data-tier="must"]   { background: #e8f0fe; color: #174ea6; }
.rt3-scan .rs-scanner__chip[data-tier="strong"] { background: #e6f4ea; color: #137333; }
.rt3-scan .rs-scanner__chip[data-tier="bonus"]  { background: #f1f3f4; color: #3c4043; }

/* soft skills: one outlined surface, five rows */
.rt3-soft {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #dadce0;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}
.rt3-soft__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 0.85fr) minmax(0, 1.45fr);
  gap: 20px;
  align-items: center;
  padding: 18px 24px;
  border-top: 1px solid #e8eaed;
  transition: background .15s;
}
.rt3-soft__row:first-child { border-top: 0; }
.rt3-soft__row:hover { background: #f8f9fa; }
.rt3-soft__ico {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-t);
}
.rt3-soft__ico svg { width: 24px; height: 24px; display: block; }
.rt3-soft__name { margin: 0; font: 600 16px/1.4 var(--rt-g-font); color: #202124; }
.rt3-soft__proof {
  margin: 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: #f8f9fa;
  font-size: 14.5px;
  line-height: 1.55;
  color: #3c4043;
}
.rt3-soft__row:hover .rt3-soft__proof { background: #fff; }
.rt3-soft__label {
  display: block;
  margin-bottom: 3px;
  font: 700 10.5px/1.4 var(--rt-g-font);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-a);
}

@media (max-width: 960px) {
  .rt3-scan__grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  .rt3-soft__row { grid-template-columns: 44px minmax(0, 1fr); gap: 12px 16px; padding: 16px; }
  .rt3-soft__proof { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .rt3-scan .rs-scanner__clear { margin-left: 0; }
  .rt3-scan__tool { border-radius: 20px; }
}


/* Steps on small screens: illustration left, text right, so five cards
   don't turn into five tall posters. */
@media (max-width: 960px) {
  .rt3-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rt3-steps__card { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; padding: 10px; }
  .rt3-steps__viz { grid-row: 1 / span 2; align-self: start; }
  .rt3-steps__body { padding: 4px 0 0; }
  .rt3-steps__go { margin: 8px 0 0; }
}
@media (max-width: 640px) {
  .rt3-steps { grid-template-columns: 1fr; }
}

/* Toolbar: three buttons (Edit, Download PDF, Word). Buttons never shrink or
   wrap their label; the row wraps instead (it squeezed "Download PDF" onto
   two lines around 1100px). */
.rt3-page .rt-icon-btn { white-space: nowrap; flex-shrink: 0; }
.rt3-page .rt-toolbar { flex-wrap: wrap; row-gap: 8px; }
.rt3-page .rt-toolbar__actions { flex-wrap: wrap; flex: 0 1 auto; min-width: 0; max-width: 100%; margin-left: auto; }
.rt3-page .rt-export__actions { flex-wrap: wrap; }

/* Hero jump links are a desktop aid only. Under 900px article-hero.css
   dissolves .art-hero__text and orders the hero pieces one by one; the jump
   row had no order, so it rose above the H1. Phones scroll; no row there. */
@media (max-width: 900px) {
  .rt3-jump { display: none; }
}

/* Industry signal on phones: the heading fills the line (balance split it into
   two short halves and left a ragged gap), and the two stats sit side by side
   as tiles instead of two tall rows with hairlines. */
@media (max-width: 600px) {
  .rt3-signal .rt-voices__title { text-wrap: pretty; font-size: 21px; }
  .rt3-signal .rt-signal { gap: 18px; }
  .rt3-signal .rt-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .rt3-signal .rt-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 12px;
    border: 0;
    border-radius: 16px;
    background: #f8f9fa;
  }
  .rt3-signal .rt-stat + .rt-stat { border: 0; margin: 0; padding-top: 14px; }
  .rt3-signal .rt-stat__num { font-size: 28px; line-height: 1; }
  .rt3-signal .rt-stat__label { font-size: 13px; line-height: 1.4; }
  .rt3-signal .rt-stat__src { font-size: 12px; margin-top: auto; }
}

/* =========================================================================
   LIVE TEMPLATE ON PHONES: A4 PAGES (/js/shared/template-mobile-pages.js)
   The stage becomes the sheet (white, rounded, elevation 2); the paper keeps
   its desktop width and is scaled + clipped into one page at a time by the
   script. Only active under 720px, when the script adds .rt3-mpages.
   ========================================================================= */
.rt3-page .rt-paper-stage.rt3-mpages {
  position: relative;
  display: block;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .15), 0 4px 8px 3px rgba(60, 64, 67, .08);
  touch-action: pan-y;
}
.rt3-page .rt-paper-stage.rt3-mpages:focus-visible { outline: 2px solid #1a73e8; outline-offset: 3px; }
.rt3-page .rt3-mpages #rt-paper {
  position: absolute;
  top: 0;
  left: 0;
  width: 816px;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 56px 64px;
  border-radius: 0;
  box-shadow: none;
  transform-origin: 0 0;
}
.rt3-page .rt3-mpages #rt-paper.is-editable { outline: 0; }

.rt3-mpager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 14px auto 0;
}
.rt3-mpager[hidden] { display: none; }
.rt3-mpager__btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #dadce0;
  border-radius: 50%;
  background: #fff;
  color: #1a73e8;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.rt3-mpager__btn svg { width: 18px; height: 18px; }
.rt3-mpager__btn:hover:not(:disabled) { background: #f8fbff; border-color: #1a73e8; }
.rt3-mpager__btn:disabled { color: #bdc1c6; cursor: default; }
.rt3-mpager__label { min-width: 92px; text-align: center; font: 600 14px/1 var(--rt-g-font); color: #3c4043; }
@media (min-width: 721px) { .rt3-mpager { display: none; } }

/* =========================================================================
   PREVIEW / EDIT DETAILS (stacked tool, <= 1024px; /js/shared/template-mobile.js)
   Material 3 segmented button; the inactive panel is hidden; an extended
   FAB ("See preview") floats while editing.
   ========================================================================= */
.rt3-seg[hidden] { display: none; }
.rt3-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 440px;
  margin: 0 auto 18px;
  padding: 0;
  border: 1px solid #c4c7c5;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.rt3-seg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border: 0;
  background: none;
  font: 600 14.5px/1 var(--rt-g-font);
  color: #3c4043;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.rt3-seg__btn + .rt3-seg__btn { border-left: 1px solid #c4c7c5; }
.rt3-seg__btn svg { width: 18px; height: 18px; flex: none; }
.rt3-seg__btn:hover { background: #f8f9fa; }
.rt3-seg__btn.is-active { background: #d3e3fd; color: #041e49; }
.rt3-seg__btn:focus-visible { outline: 2px solid #1a73e8; outline-offset: -3px; }

@media (max-width: 1024px) {
  .rt-shell[data-view="preview"] > .rt-rail { display: none; }
  .rt-shell[data-view="edit"] > .rt-preview-area { display: none; }
}

.rt3-fab[hidden] { display: none; }
.rt3-fab {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px 0 18px;
  border: 0;
  border-radius: 16px;
  background: #1a73e8;
  color: #fff;
  font: 600 15px/1 var(--rt-g-font);
  box-shadow: 0 1px 3px rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15);
  cursor: pointer;
}
.rt3-fab svg { width: 20px; height: 20px; }
.rt3-fab:hover { background: #1765cc; }
@media (min-width: 1025px) { .rt3-seg, .rt3-fab { display: none !important; } }

/* On phones the paper is a scaled A4 page: rewriting text directly on it is
   not usable, so the Edit-on-paper button and its hint step aside there. */
@media (max-width: 720px) {
  .rt3-page #rt-edit-toggle,
  .rt3-page .rt-toolbar__hint { display: none; }
  .rt3-page .rt-toolbar__actions { margin-inline: auto; }
}

/* Export strip on phones: copy on top, then two equal full-width buttons,
   label centred (they were left-aligned at two different widths). */
@media (max-width: 600px) {
  .rt3-page .rt-export { display: grid; gap: 16px; padding: 18px; }
  .rt3-page .rt-export__copy { flex: none; }
  .rt3-page .rt-export__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }
  .rt3-page .rt-export__actions .rt-icon-btn {
    width: 100%;
    height: 48px;
    justify-content: center;
    font-size: 15px;
  }
}

/* =========================================================================
   SAMPLE SHEETS ON PHONES: A4, one page at a time (template-mobile.js part 3)
   resume-template.css (<= 720px) drops the A4 box and lays both pages out in
   one long column. On V3 pages the sheet keeps its desktop sizing (container
   query units scale it to any width), only the leading page shows, and the
   pager under it flips. Tap the sheet to zoom, as on desktop. Scoped to
   .rt-samples: the zoom overlay (.rt-zoom, on <body>) keeps the stock phone
   layout, both pages stacked as readable full-size text.
   ========================================================================= */
@media (max-width: 720px) {
  .rt3-page .rt-samples .rt-doc__frame { display: block; max-width: 420px; margin-inline: auto; }
  .rt3-page .rt-samples .rt-doc__page { width: 100%; margin-left: 0; transform: none; }
  .rt3-page .rt-samples .rt-doc__page--2,
  .rt3-page .rt-samples .rt-doc__frame.is-flipped .rt-doc__page--1 { display: none; }
  .rt3-page .rt-samples .rt-doc__frame.is-flipped .rt-doc__page--2 { display: block; }
  .rt3-page .rt-samples .rt-doc__paper {
    aspect-ratio: 1 / 1.414;
    padding: 6.07cqw 7.14cqw 6.79cqw;
    font-size: 1.875cqw;
    cursor: zoom-in;
  }
  .rt3-page .rt-samples .rt-doc__paper .rt-sample__skills {
    grid-template-columns: minmax(11.4em, 16.2em) 1fr;
    row-gap: 0.29em;
  }
  .rt3-page .rt-samples .rt-doc__paper .rt-sample__skills dt { margin-top: 0; }
  .rt3-page .rt-samples .rt-doc__paper .rt-sample__job-meta,
  .rt3-page .rt-samples .rt-doc__paper .rt-sample__edu-meta { white-space: nowrap; }
  .rt3-page .rt-samples .rt-doc__page .rt-doc__zoom { display: inline-flex; }
}

/* Zoom overlay on phones (V2 bug, fixed here for V3 pages): the overlay's
   frame is a flex column with align-items:flex-start, and a page is a
   container-type:inline-size box, whose intrinsic width is 0, so both pages
   collapsed to 0px wide. Stretch them: the stock phone rules then show both
   pages stacked as readable full-size text. */
@media (max-width: 720px) {
  .rt3-page .rt-zoom .rt-doc__frame { align-items: stretch; max-width: none; }
  .rt3-page .rt-zoom .rt-doc__page { width: 100%; }
}

/* Author note: the photo column on desktop; on phones a byline row (photo,
   name, role) above the text instead of a lone photo on its own line. */
.rt3-author__id { display: flex; align-items: center; }
.rt3-author__by { display: none; margin: 0; }
@media (max-width: 560px) {
  .rt3-author { gap: 14px; }
  .rt3-author__id { gap: 12px; }
  .rt3-author__photo { width: 44px; height: 44px; }
  .rt3-author__by { display: grid; gap: 2px; }
  .rt3-author__name { font: 700 15px/1.25 var(--rt-g-font); color: #202124; }
  .rt3-author__role { font-size: 13px; line-height: 1.3; color: #5f6368; }
}

/* Sample deck: what a resume at that level has to show, under the level's H3 (V3 only).
   main.css styles every bare p (1.4 line height), so the type is set here. */
.rt3-page .rt-samples .rt-doc__deck {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #3c4043;
  text-wrap: pretty;
}
.rt3-page .rt-samples .rt-doc__deck + .rt-meta { margin-top: 26px; }

/* Samples on phones: details, then the sheet and its pager, then the
   download buttons (they sat above the sheet). .rt-doc__side dissolves so
   its pieces can be ordered around the frame. */
@media (max-width: 720px) {
  .rt3-page .rt-samples .rt-doc.is-active { row-gap: 18px; }
  .rt3-page .rt-samples .rt-doc__side { display: contents; }
  .rt3-page .rt-samples .rt-doc__heading { order: 1; }
  .rt3-page .rt-samples .rt-doc__deck { order: 1; margin: -8px 0 0; font-size: 15px; }
  .rt3-page .rt-samples .rt-meta { order: 2; }
  .rt3-page .rt-samples .rt-doc__frame { order: 3; margin-top: 6px; }
  .rt3-page .rt-samples .rt3-mpager--doc { order: 4; margin-top: 0; }
  .rt3-page .rt-samples .rt-doc__actions { order: 5; margin-top: 8px; width: 100%; }
}

/* Step 1 reuses V2's .rt-part blocks inside a step section. .rt-part carries
   its own side padding (24px under 1180px, 18px under 560px) on top of the
   section's, so its text sat one gutter further in than Steps 2 to 5. One
   edge for every step: */
.rt3-page .rt3-step .rt-part { padding-inline: 0; }

/* One illustration size for every step. V2 enlarges the drawing of a part
   with two ledes (340px), which made Step 1's "Design & Layout" art bigger
   than every other step's. 300px on desktop, 220px once stacked. */
.rt3-page .rt3-step .rt-part__ill,
.rt3-page .rt3-step .rt-part__grid:has(.rt-part__ledes) .rt-part__ill,
.rt3-page .rt3-step__media .rt-part__ill { max-width: 300px; }
@media (max-width: 860px) {
  .rt3-page .rt3-step .rt-part__ill,
  .rt3-page .rt3-step .rt-part__grid:has(.rt-part__ledes) .rt-part__ill,
  .rt3-page .rt3-step__media .rt-part__ill { max-width: 220px; }
}

/* =========================================================================
   STEP 6: KEYWORDS & METRICS
   ========================================================================= */
/* six step cards: 3 x 2 on desktop (five in a row stays for 5-step pages) */
.rt3-steps:has(> li:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .rt3-steps:has(> li:nth-child(6)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rt3-steps:has(> li:nth-child(6)) { grid-template-columns: 1fr; }
}
.rt3-page [data-color="pink"] .rt3-steps__viz { background: #fce4ef; }

.rt3-page .rt3-kw__title {
  margin: 0;
  text-align: left;
  letter-spacing: -0.01em;
  font-family: var(--rt-g-font);
  color: #202124;
}

/* ---- keywords: three compact tier rows (side: tier + where to put them;
   main: wrapping chips + the selected keyword's job-description phrasing) ---- */
.rt3-kw { display: grid; gap: 12px; }
.rt3-kw__tier {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
  gap: 28px;
  align-items: start;
  padding: 20px 22px;
  border: 1px solid #dadce0;
  border-radius: 20px;
  background: #fff;
}
.rt3-kw__tier[data-tier="must"]   { --k: #1a73e8; --kt: #e8f0fe; --kd: #174ea6; }
.rt3-kw__tier[data-tier="strong"] { --k: #1e8e3e; --kt: #e6f4ea; --kd: #137333; }
.rt3-kw__tier[data-tier="bonus"]  { --k: #5f6368; --kt: #f1f3f4; --kd: #3c4043; }
.rt3-kw__head { display: flex; align-items: center; gap: 10px; }
.rt3-kw__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--k); flex: none; }
.rt3-kw__title { font-size: 16.5px; font-weight: 800; line-height: 1.3; }
.rt3-kw__count {
  min-width: 26px; height: 22px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--kt); color: var(--k);
  font: 700 12px/1 var(--rt-g-font);
}
.rt3-kw__how { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: #5f6368; }
.rt3-kw__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rt3-kw__chip {
  height: 32px; padding: 0 12px;
  border: 1px solid #dadce0; border-radius: 8px;
  background: #fff; color: #3c4043;
  font: 600 13.5px/1 var(--rt-g-font);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.rt3-kw__chip:hover { background: #f8f9fa; }
.rt3-kw__chip.is-on { background: var(--kt); border-color: transparent; color: var(--kd); }
.rt3-kw__chip:focus-visible { outline: 2px solid var(--k); outline-offset: 2px; }
.rt3-kw__ctx {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid #f1f3f4;
  font-size: 14px; line-height: 1.5; color: #3c4043;
}
.rt3-kw__ctx-label { font: 700 10.5px/1.4 var(--rt-g-font); letter-spacing: .09em; text-transform: uppercase; color: var(--k); }

/* the finder moved into Step 6 keeps its two-column layout */
#step-6 .rt3-scan { margin-top: var(--rt-space-section); }

/* ---- metrics: one table, a tinted row group per profile area ---- */
.rt3-mtable {
  border: 1px solid #dadce0; border-radius: 20px;
  background: #fff;
  overflow: hidden;
}
.rt3-mtable__table { width: 100%; border-collapse: collapse; margin: 0; }
.rt3-mtable__table th,
.rt3-mtable__table td { padding: 14px 22px; text-align: left; vertical-align: top; }
.rt3-mtable__table thead th {
  padding-top: 12px; padding-bottom: 12px;
  background: #f8f9fa; border-bottom: 1px solid #dadce0;
  font: 700 11px/1.4 var(--rt-g-font); letter-spacing: .09em; text-transform: uppercase; color: #5f6368;
}
.rt3-mtable__table thead th:first-child { width: 36%; }
.rt3-mtable__group th {
  padding-top: 10px; padding-bottom: 10px;
  background: var(--c-t);
  font: 700 13.5px/1.4 var(--rt-g-font); color: #202124;
}
.rt3-mtable__dot {
  display: inline-block; width: 8px; height: 8px; margin-right: 10px;
  border-radius: 50%; background: var(--c-a); vertical-align: 1px;
}
.rt3-mtable__table tbody tr + tr > * { border-top: 1px solid #f1f3f4; }
.rt3-mtable__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rt3-mtable__name { font: 700 15px/1.4 var(--rt-g-font); color: #202124; }
/* unit: neutral tonal pill, the icon carries the area colour (accent text on the tints is too faint at 11.5px) */
.rt3-mtable__unit {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px 0 7px;
  border-radius: 999px; background: #f1f3f4;
  font: 600 11.5px/1 var(--rt-g-font); letter-spacing: .01em; color: #3c4043;
  white-space: nowrap;
}
.rt3-mtable__unit svg {
  width: 12px; height: 12px; flex: none;
  fill: none; stroke: var(--c-a); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.rt3-mtable__table tbody td strong { font-weight: 700; color: #202124; }
.rt3-mtable__def { display: block; margin-top: 2px; font: 400 13.5px/1.5 var(--rt-g-font); color: #5f6368; }
.rt3-mtable__table tbody td { font-size: 15px; line-height: 1.6; color: #3c4043; }

/* phones: each metric stacks, the bullet sits in a tonal box under it */
@media (max-width: 720px) {
  .rt3-mtable { border-radius: 16px; }
  .rt3-mtable__table, .rt3-mtable__table tbody, .rt3-mtable__table tr,
  .rt3-mtable__table th, .rt3-mtable__table td { display: block; width: auto; }
  .rt3-mtable__table thead { display: none; }
  .rt3-mtable__table th, .rt3-mtable__table td { padding: 0 16px; }
  .rt3-mtable__group th { padding: 10px 16px; }
  .rt3-mtable__table tbody tr:not(.rt3-mtable__group) { padding: 14px 0 16px; }
  .rt3-mtable__table tbody tr + tr > * { border-top: 0; }
  .rt3-mtable__table tbody tr + tr:not(:nth-child(2)) { border-top: 1px solid #f1f3f4; }
  .rt3-mtable__table tbody td {
    margin: 10px 16px 0; padding: 12px 14px;
    border-radius: 14px; background: #f8f9fa;
    font-size: 14.5px; line-height: 1.55;
  }
}

/* ---- no numbers? ---- */
.rt3-nonum { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rt3-nonum__item {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 18px; border-radius: 20px; background: #f8f9fa;
}
.rt3-nonum__num {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--c-t); color: var(--c-a); font: 800 13px/1 var(--rt-g-font);
}
.rt3-nonum__item p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #3c4043; }
.rt3-nonum__item strong { color: #202124; }

@media (max-width: 960px) {
  .rt3-nonum { grid-template-columns: 1fr; }
  .rt3-kw__tier { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
}
.rt3-kw__ctx-text[hidden] { display: none; }

/* Stacked steps (<= 860px): the illustration leads, above the eyebrow and the
   title, like Step 1's parts do. The intro wrapper dissolves so the drawing
   can be ordered before the step header. */
@media (max-width: 860px) {
  .rt3-page .rt3-step:not(#step-1) { display: flex; flex-direction: column; }
  .rt3-page .rt3-step__intro { display: contents; }
  .rt3-page .rt3-step__media { order: -1; align-self: center; margin-bottom: 20px; }
  .rt3-page .rt3-step__ledes { margin-bottom: var(--rt-space-block); }
}

/* A sub-title followed straight by cards (no lede between them, e.g. "What if
   you don't have exact numbers?") needs the gap a lede would have given. */
.rt3-sub__title + .rt3-nonum { margin-top: 22px; }
/* the shared h3/h4 reset (margin: 0) cancelled the sub-title's own 8px */
.rt3-page .rt3-sub__title { margin-bottom: 8px; }
.rt3-page .rt3-sub__title + .rt3-nonum { margin-top: 22px; }

/* Samples (desktop): PDF and Word side by side, the note under both. */
@media (min-width: 721px) {
  .rt3-page .rt3-doc__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .rt3-page .rt3-doc__actions .rt-doc__dl { padding: 0 22px; }
  .rt3-page .rt3-doc__actions .rt-doc__dl-note { flex-basis: 100%; margin-top: 4px; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .rt3-page .rt3-doc__actions { justify-content: center; }
}

/* ---------- Review blocks: title as plain text (not an h2) --------------
   The CTA line is not a page topic, so it is a <p class="rv-title">; this
   mirrors resume-template.css `.rv-section h2` + `.rv-section--navy h2` so it
   renders exactly as the heading did. */
.rt3-page .rv-section .rv-title {
  margin: 0;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--hv-ink);
  text-align: center;
}
.rt3-page .rv-section--navy .rv-title { color: #ffffff; }

/* ---------- Samples: name + section titles as text (were h4/h5) ----------
   main.css `p` sets its own colour and line-height; inherit the paper's so
   they render exactly as the headings did. The page-2 running header shows
   the name from data-name (no second copy of it in the HTML). */
.rt3-page .rt-doc__paper p.rt-sample__paper-name,
.rt3-page .rt-doc__paper p.rt-sample__section-title { line-height: inherit; }
.rt3-page .rt-doc__paper p.rt-sample__paper-name { color: inherit; }
.rt3-page .rt-sample__paper-header--cont .rt-sample__paper-name::before { content: attr(data-name); }