/* =========================================================================
   Cover Letter role page — /cover-letters/<role>
   Prefix: .cl-  (mirrors the .rt- resume-template generator)

   Strategy: the generator chrome (shell, rail, fields, toolbar, paper frame,
   export bar) reuses the .rt-* primitives in resume-template.css by sharing
   the same property values here under .cl-* names. Cover-letter-specific UI
   lives only in this file: the letter prose, the sender/sign-off blocks, the
   repeatable skill/experience rows, the .cl-viz-letter illustration, the
   intro, the two explainer sections, the EEAT block, and the print rules.

   No em/en dashes anywhere (site voice rule). Cache-bust on every edit.
   ========================================================================= */


/* =============================================================
   1. Credibility strip (.rg-trust) — self-contained copy
   The page loads resume-template.css, not resume-guide.css, so the
   .rg-trust rules are duplicated here (values inlined to hex).
   ============================================================= */

.rg-trust {
  background: #ffffff;
  border-bottom: 1px solid #e6e8ee;
  padding: 22px 24px;
}
.rg-trust__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: center;
}
.rg-trust__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.rg-trust__num {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  color: #1c2330;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.rg-trust__num .rg-trust__star { color: #f59e0b; margin-right: 2px; }
.rg-trust__caption {
  font-size: 12px;
  color: #667085;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rg-trust__num--google {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
}
.rg-trust__num--google .g-b { color: #4285F4; }
.rg-trust__num--google .g-r { color: #EA4335; }
.rg-trust__num--google .g-y { color: #FBBC05; }
.rg-trust__num--google .g-g { color: #34A853; }
.rg-trust__num--google .g-pre { color: #1c2330; margin-right: 4px; }

@media (max-width: 720px) {
  .rg-trust__inner {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 24px;
  }
}


/* =============================================================
   2. Intro (compressed, single-column band on white)
   ============================================================= */

/* main.css sets a global `section { margin: 2rem auto }`, which lets the grey
   body background show as bands between our full-bleed sections. Zero the
   vertical margin (kills the grey gaps) but keep the horizontal auto so the
   centered sections (e.g. .cl-content, max-width 1100) stay centered. */
.cl-page section { margin: 0 auto; }

.cl-intro {
  background: #ffffff;
  padding: 0 24px; /* matches .cl-section's side padding so edges align at every width */
}
/* Same 1240px grid + 1.75% side padding as .cl-tool-head, so the intro's
   eyebrow/H2 share one left edge with the generator header below. */
.cl-intro__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 1.75% 48px;
}
/* Doubled selector out-ranks the `.cl-intro p` 16px rule below. */
.cl-intro .cl-intro__eyebrow {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1a73e8;
  margin: 0 0 12px;
}
.cl-intro h2 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1c2330;
  margin: 0 0 18px;
  text-align: left;
}
.cl-intro p {
  font-size: 16px;
  line-height: 1.6;
  color: #3a4350;
  margin: 0 0 14px;
}
.cl-intro p:last-child { margin-bottom: 0; }
.cl-intro__lede {
  font-size: 17px;
  color: #25303f;
}
.cl-intro a {
  color: #1a73e8;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(26,115,232,0.35);
}
.cl-intro a:hover {
  border-bottom-color: #1a73e8;
}

@media (max-width: 720px) {
  .cl-intro__inner { padding: 30px 18px 28px; }
  .cl-intro h2 { font-size: 20px; }
  .cl-intro p { font-size: 15px; }
  .cl-intro__lede { font-size: 16px; }
}


/* =============================================================
   3. Tool section frame + head (mirrors .rt-section / .rt-tool-head)
   ============================================================= */

.cl-section {
  background: #f5f6f8;
  padding: 36px 24px 64px;
}
.cl-tool-head {
  max-width: 1240px;
  margin: 0 auto 28px;
  width: 100%;
  padding: 0 1.75%;
}
.cl-tool-head .cl-tool-head__eyebrow {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.13em;
  color: #1a73e8;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 10px;
  text-align: left;
}
.cl-tool-head__title {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  color: #1c2330;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  text-align: left;
}
.cl-tool-head__lead {
  font-size: 15px;
  line-height: 1.55;
  color: #4d5562;
  margin: 0;
  text-align: left;
}
@media (max-width: 720px) {
  .cl-tool-head { margin-bottom: 20px; padding: 0 18px; }
  .cl-tool-head__title { font-size: 22px; }
  .cl-tool-head__lead { font-size: 14px; }
}


/* =============================================================
   4. Generator shell + left rail (mirrors .rt-shell / .rt-rail)
   ============================================================= */

.cl-shell {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 22px;
}
@media (max-width: 1024px) {
  .cl-shell { grid-template-columns: minmax(0, 1fr); }
}

.cl-rail {
  background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 8px 24px -14px rgba(15,23,42,0.20),
    0 28px 60px -28px rgba(15,23,42,0.18);
  padding: 4px 0 0;
  align-self: start;
  position: sticky;
  top: 22px;
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  scrollbar-gutter: stable;
}
@media (max-width: 1024px) {
  .cl-rail {
    position: static;
    max-height: none;
    border-radius: 14px;
  }
}
.cl-rail::-webkit-scrollbar { width: 8px; }
.cl-rail::-webkit-scrollbar-thumb { background: #d4d8df; border-radius: 8px; }
.cl-rail::-webkit-scrollbar-thumb:hover { background: #b6bcc7; }

.cl-rail-intro {
  padding: 18px 22px 14px;
  border-bottom: 1px solid #ecedf1;
  background: linear-gradient(135deg, #f0f6ff 0%, #fff 100%);
  border-radius: 18px 18px 0 0;
}
.cl-rail-intro__title {
  font-size: 14px;
  font-weight: 700;
  color: #0b3a82;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.cl-rail-intro__desc {
  font-size: 12.5px;
  color: #4d5562;
  margin: 0;
  line-height: 1.5;
}

.cl-rail-section {
  border-bottom: 1px solid #ecedf1;
}
.cl-rail-section:last-of-type { border-bottom: none; }

.cl-rail-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  position: relative;
  transition: background 140ms ease, color 140ms ease;
}
.cl-rail-summary::-webkit-details-marker { display: none; }
.cl-rail-summary:hover { background: #f5f8fd; }
.cl-rail-summary:focus-visible {
  outline: none;
  box-shadow: inset 3px 0 0 #1a73e8, 0 0 0 3px rgba(26,115,232,0.18);
}
.cl-rail-summary__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #eef3fb 0%, #e0ecff 100%);
  color: #1a73e8;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.cl-rail-summary__icon svg { width: 16px; height: 16px; }
.cl-rail-summary:hover .cl-rail-summary__icon {
  background: linear-gradient(135deg, #1a73e8 0%, #2b86f4 100%);
  color: #fff;
  transform: scale(1.04);
}
.cl-rail-summary__label {
  flex: 1;
  letter-spacing: -0.005em;
}
.cl-rail-summary__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #8a92a0;
  flex-shrink: 0;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cl-rail-summary__chevron svg { width: 14px; height: 14px; }
.cl-rail-section[open] > .cl-rail-summary .cl-rail-summary__chevron {
  transform: rotate(180deg);
  color: #1a73e8;
}

.cl-rail-section > *:not(summary) {
  padding-left: 22px;
  padding-right: 22px;
}
.cl-rail-section > *:last-child {
  padding-bottom: 18px;
}
.cl-rail-subtitle {
  font-size: 12px;
  color: #666c78;
  margin: 0 0 14px;
  line-height: 1.5;
}


/* Field anatomy (mirrors .rt-field / .rt-input / .rt-textarea) */

.cl-field {
  margin-bottom: 14px;
}
.cl-field:last-of-type { margin-bottom: 0; }
.cl-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #25303f;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.cl-field-hint {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #8a92a0;
  margin-top: 4px;
  line-height: 1.4;
}
.cl-input,
.cl-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dfe3ea;
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  color: #1c2330;
  background: #fff;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
  box-sizing: border-box;
}
.cl-input::placeholder,
.cl-textarea::placeholder { color: #aab1be; }
.cl-input:hover,
.cl-textarea:hover {
  border-color: #aab1be;
  background: #fcfdff;
}
.cl-input:focus,
.cl-input:focus-visible,
.cl-textarea:focus,
.cl-textarea:focus-visible {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.22);
  background: #fff;
}
.cl-textarea {
  resize: vertical;
  min-height: 56px;
  line-height: 1.5;
}
.cl-field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cl-field-pair .cl-field { margin-bottom: 14px; }


/* Repeatable rows — skills / experiences (NEW vs resume template) */

.cl-repeat {
  margin-top: 2px;
}
.cl-repeat__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cl-repeat__row {
  display: grid;
  grid-template-columns: 1fr 30px;
  gap: 6px;
  align-items: center;
}
.cl-repeat__row .cl-repeat__input {
  font-size: 13px;
}
.cl-repeat__remove {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e6ee;
  background: #fff;
  color: #9aa2b1;
  border-radius: 8px;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
  flex-shrink: 0;
}
.cl-repeat__remove:hover:not(:disabled) {
  color: #d1453b;
  border-color: #f0b6b1;
  background: #fff5f4;
}
.cl-repeat__remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(209,69,59,0.25);
}
.cl-repeat__remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cl-repeat__add {
  margin-top: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  background: #eef3fb;
  color: #1a4f9c;
  border: 1px dashed #b8cdee;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.cl-repeat__add:hover:not(:disabled) {
  background: #1a73e8;
  color: #fff;
  border-color: #1a73e8;
  border-style: solid;
}
.cl-repeat__add:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.30);
}
.cl-repeat__add:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* Reset button — bottom of rail (mirrors .rt-rail-reset) */

.cl-rail-reset-wrap {
  padding: 12px 22px 16px;
  border-top: 1px solid #ecedf1;
  background: #fafbfd;
  border-radius: 0 0 18px 18px;
  display: flex;
  justify-content: center;
}
@media (max-width: 1024px) {
  .cl-rail-reset-wrap { border-radius: 0 0 14px 14px; }
}
.cl-rail-reset {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  background: transparent;
  color: #8a92a0;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.cl-rail-reset svg { width: 12px; height: 12px; }
.cl-rail-reset:hover {
  color: #b25b00;
  background: #fff7e6;
  border-color: #f0c476;
}
.cl-rail-reset:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(240,196,118,0.40);
}

@media (max-width: 720px) {
  .cl-rail-intro { padding: 16px 18px 12px; }
  .cl-rail-summary { padding: 14px 18px; font-size: 14px; }
  .cl-rail-section > *:not(summary) { padding-left: 18px; padding-right: 18px; }
  .cl-input,
  .cl-textarea { font-size: 16px; padding: 11px 13px; }   /* prevents iOS zoom */
  .cl-repeat__row .cl-repeat__input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-rail-summary,
  .cl-rail-summary__icon,
  .cl-rail-summary__chevron,
  .cl-input,
  .cl-textarea,
  .cl-repeat__add,
  .cl-repeat__remove,
  .cl-rail-reset {
    transition: none !important;
  }
}


/* =============================================================
   5. Preview area + toolbar + export (mirrors .rt-preview-area etc.)
   ============================================================= */

.cl-preview-area {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.cl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 4px;
}
.cl-toolbar__hint {
  font-size: 13px;
  color: #4d5562;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cl-toolbar__hint svg { width: 14px; height: 14px; color: #1a73e8; }
.cl-toolbar__actions {
  display: inline-flex;
  gap: 8px;
}

.cl-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  background: #fff;
  color: #25303f;
  border: 1px solid #d4d8df;
  border-radius: 10px;
  cursor: pointer;
  transition: all 120ms ease;
}
.cl-icon-btn svg { width: 14px; height: 14px; }
.cl-icon-btn:hover { border-color: #1a73e8; color: #1a73e8; }
.cl-icon-btn.is-active {
  background: #1a73e8;
  color: #fff;
  border-color: #1a73e8;
  box-shadow: 0 4px 12px -4px rgba(26,115,232,0.5);
}
.cl-icon-btn--primary {
  background: #111418;
  color: #fff;
  border-color: #111418;
}
.cl-icon-btn--primary:hover {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
}
.cl-icon-btn:disabled { opacity: 0.7; cursor: default; }

.cl-edit-banner {
  background: #fff8db;
  border: 1px solid #f1d97a;
  color: #6e5400;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
  display: none;
  align-items: center;
  gap: 8px;
}
.cl-edit-banner.is-visible { display: flex; }
.cl-edit-banner svg { width: 16px; height: 16px; flex-shrink: 0; }

.cl-export {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ecedf1;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.cl-export__copy {
  font-size: 13px;
  color: #4d5562;
  margin: 0;
  flex: 1 1 240px;
}
.cl-export__copy strong { color: #1c2330; }
.cl-export__actions {
  display: inline-flex;
  gap: 8px;
}


/* =============================================================
   6. The paper (US Letter) + the letter prose
   ============================================================= */

.cl-paper-stage {
  display: flex;
  justify-content: center;
}
.cl-paper {
  background: #fff;
  width: 100%;
  max-width: 816px;            /* US Letter at ~96dpi feel */
  min-height: 1056px;
  padding: 64px 72px;
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 18px 38px -16px rgba(15,23,42,0.22);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: #1c2330;
  box-sizing: border-box;
  position: relative;
  transition: outline 120ms ease;
  outline: 0 dashed transparent;
  outline-offset: 4px;
}
@media (max-width: 720px) {
  .cl-paper {
    padding: 30px 26px;
    min-height: 0;
    font-size: 13px;
  }
}
.cl-paper.is-editable {
  outline: 4px dashed #1a73e8;
}


/* Body paragraphs */
.cl-letter__block {
  margin: 0 0 15px;
}
.cl-letter__block:last-child { margin-bottom: 0; }
.cl-letter__sign {
  margin-top: 22px;
  margin-bottom: 14px; /* the requested air between "Yours sincerely," and the identity */
  line-height: 1.7;
}
.cl-letter__sign-id {
  margin: 0;
  font-style: italic;
  color: #6f7a8d;
  line-height: 1.6;
}

/* Dynamic substrings — each is a .cl-var span */
.cl-var,
.cl-var-skills {
  background: linear-gradient(180deg, rgba(26,115,232,0.06) 0%, rgba(26,115,232,0.14) 100%);
  border-radius: 3px;
  padding: 0 2px;
  transition: background 120ms ease;
}
.cl-paper.is-editable .cl-var,
.cl-paper.is-editable .cl-var-skills {
  background: rgba(26,115,232,0.22);
  outline: 1px dashed rgba(26,115,232,0.45);
}
.cl-var.is-empty,
.cl-var-skills.is-empty {
  color: #aab1be;
  font-style: italic;
}
/* The experience spans flow inline with their connector text, no highlight */
.cl-exp.is-empty {
  color: #aab1be;
  font-style: italic;
}


/* =============================================================
   7. CTA splits — small tweaks on top of main.css .tcv-free-review-split.
   (Most styling is inherited; nothing needed here unless overriding.)
   ============================================================= */


/* =============================================================
   8. Content sections (explainers + FAQ + resources)
   Mirrors .rt-content. Two H2 blocks; the second + FAQ use --alt grey.
   ============================================================= */

.cl-content {
  /* 1148 = 1100 content + 48 padding, so the inner content-box is exactly
     1100 wide, matching .cl-content--alt's 1100 child cap. This makes plain
     and --alt section headers share the same left edge down the page. */
  max-width: 1148px;
  margin: 0 auto;
  padding: 64px 24px;
  /* main.css sets section{align-items:center}, which shrinks block children to
     their content width and centers them. Stretch so the header + rows fill
     the width and left-align on the same edge. */
  align-items: stretch;
}
.cl-content--alt { background: #f5f6f8; max-width: none; }
/* width:100% is required: auto cross-axis margins in the flex column otherwise
   cancel the stretch and shrink each child to its content width, so the header
   (short) and the method rows (wide) would center at different widths and their
   left edges would not line up. */
.cl-content--alt > * { width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; }

.cl-content__head {
  margin-bottom: 28px;
}
/* Scoped under __head to out-rank the `.cl-content__head p` 16px rule below,
   and deliberately small so it never fights the H2 in the hierarchy. */
.cl-content__eyebrow,
.cl-content__head .cl-content__eyebrow {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.13em;
  color: #1a73e8;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 10px;
  text-align: left;
}
.cl-content__head h2 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: #1c2330;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  text-align: left;
}
.cl-content__head p {
  font-size: 16px;
  line-height: 1.6;
  color: #4d5562;
  margin: 0;
  text-align: left;
  max-width: 880px;
}
.cl-content__head p a {
  color: #1a73e8;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 115, 232, 0.35);
}
.cl-content__head p a:hover { border-bottom-color: #1a73e8; }
/* Centered head variant (used by the annotated-example section: the desk
   below breaks out wider than the section, so a centered header reads best). */
.cl-content__head--center { text-align: center; }
.cl-content__head.cl-content__head--center .cl-content__eyebrow,
.cl-content__head--center .cl-content__eyebrow,
.cl-content__head--center h2 { text-align: center; }
.cl-content__head--center p {
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.cl-content__head--center p + p { margin-top: 14px; }

/* FAQ header: centered and matched to the FAQ column width (#faq max-width 900). */
.cl-content--alt > .cl-content__head--faq {
  max-width: 900px;
  padding: 0 1.5rem;
  box-sizing: border-box;
  text-align: center;
}
.cl-content--alt > .cl-content__head--faq .cl-content__eyebrow,
.cl-content--alt > .cl-content__head--faq h2 { text-align: center; }

/* Prose for H2 #1: each H3 heading sits above a 2-column body
   (same idea as the guide pages' rg-intro-cols--2). */
.cl-prose {
  max-width: 1000px;
}
.cl-prose h3 {
  font-size: 19px;
  font-weight: 700;
  color: #1c2330;
  margin: 56px 0 22px;
  letter-spacing: -0.01em;
}
.cl-prose h3:first-child { margin-top: 0; }
.cl-prose p {
  font-size: 16px;
  line-height: 1.65;
  color: #3a4350;
  margin: 0 0 16px;
}
.cl-prose strong { color: #1c2330; }
.cl-prose a {
  color: #1a73e8;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(26,115,232,0.35);
}
.cl-prose a:hover { border-bottom-color: #1a73e8; }

/* Two-column body under each H3 in H2 #1. Ported from the guide pages'
   rg-intro-cols--2: paragraphs split across two columns with a hairline
   gradient divider in the gap. Read down the left column, then the right. */
.cl-cols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  align-items: start;
  margin: 0;
}
.cl-cols3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 44px;
  align-items: start;
  margin: 0;
}
.cl-cols2__col > p:last-child,
.cl-cols3__col > p:last-child { margin-bottom: 0; }
/* Hairline divider sitting in the inter-column gap. */
.cl-cols2 > .cl-cols2__col:not(:last-child),
.cl-cols3 > .cl-cols3__col:not(:last-child) {
  position: relative;
  padding-right: 28px;
}
.cl-cols2 > .cl-cols2__col:not(:last-child)::after,
.cl-cols3 > .cl-cols3__col:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -28px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, transparent, #cbd5e1 20%, #cbd5e1 80%, transparent);
}
.cl-cols3 > .cl-cols3__col:not(:last-child) { padding-right: 12px; }
.cl-cols3 > .cl-cols3__col:not(:last-child)::after { right: -22px; }
@media (max-width: 980px) {
  .cl-cols2,
  .cl-cols3 {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cl-cols2 > .cl-cols2__col:not(:last-child),
  .cl-cols3 > .cl-cols3__col:not(:last-child) {
    padding-right: 0;
    padding-bottom: 18px;
  }
  .cl-cols2 > .cl-cols2__col:not(:last-child)::after,
  .cl-cols3 > .cl-cols3__col:not(:last-child)::after {
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, #cbd5e1 20%, #cbd5e1 80%, transparent);
  }
}

/* ============================================================
   H2 #1 "Do recruiters read" — sidebar Q&A: a Material icon tile +
   left-aligned question on the left, the answer on the right, with
   hairline dividers between items.
   ============================================================ */
.cl-qa { display: flex; flex-direction: column; }
.cl-qa__item {
  display: grid;
  grid-template-columns: minmax(0, 252px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 44px 0;
  border-top: 1px solid #e6ebf3;
}
.cl-qa__item:first-child { border-top: 0; padding-top: 8px; }
.cl-qa__item:last-child { padding-bottom: 8px; }
/* Left cell: just the illustration. No hard disc — a soft, pale halo anchors
   it without competing, so it reads as a spot illustration, not an icon badge. */
.cl-qa__media { display: flex; align-items: center; justify-content: center; }
/* Each illustration carries its own soft ambient glow + ground shadow, so the
   container stays transparent (no hard bubble). */
.cl-qa-ill {
  display: block;
  width: 100%;
  max-width: 248px;
  height: auto;
}
/* Right cell: heading sits directly above the answer text. */
.cl-qa__body h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1c2330;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  line-height: 1.32;
  text-align: left;
}
.cl-qa__body p {
  font-size: 16px;
  line-height: 1.7;
  color: #3a4350;
  margin: 0 0 15px;
}
.cl-qa__body p:last-child { margin-bottom: 0; }
.cl-qa__body strong { color: #1c2330; }
.cl-qa__body a {
  color: #1a73e8;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(26,115,232,0.35);
}
.cl-qa__body a:hover { border-bottom-color: #1a73e8; }
@media (max-width: 820px) {
  /* stretch (not start): the media column fills the width so .cl-qa__media's
     justify-content:center centers the illustration; the text column stays
     full-width and left-aligned. */
  .cl-qa__item { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; justify-items: stretch; }
}

/* ============================================================
   H2 #2 "How to write" — alternating feature rows, each with a
   resume-review-style illustration panel (light gradient + blurred
   blobs + grid + white glassy cards / chips). A creative variation
   on the /resume-review hero visual language.
   ============================================================ */
.cl-method {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1100px;
  margin: 12px auto 0;
}
.cl-method__row {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 46px;
  align-items: center;
}
.cl-method__row--rev .cl-method__viz { order: 2; }

.cl-method__text { text-align: left; }
/* Number + title bound as one unit, sharing a left edge (best practice:
   never one-left / one-centered). Badge leads the eye into the heading. */
.cl-method__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.cl-method__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 42px;
  height: 32px;
  padding: 0 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1a73e8;
  background: rgba(26,115,232,0.10);
  border-radius: 999px;
}
.cl-method__head h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: #1c2330;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.cl-method__text p {
  font-size: 16px;
  line-height: 1.65;
  color: #3a4350;
  margin: 0 0 14px;
}
.cl-method__text p:last-child { margin-bottom: 0; }
.cl-method__list {
  margin: 0 0 14px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cl-method__list li {
  font-size: 16px;
  line-height: 1.55;
  color: #3a4350;
}
.cl-method__list li::marker { color: #1a73e8; }
.cl-method__text strong { color: #1c2330; }
.cl-method__text a {
  color: #1a73e8;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(26,115,232,0.35);
}
.cl-method__text a:hover { border-bottom-color: #1a73e8; }

/* ---- Background-free conceptual illustrations (no panel) ---- */
.cl-method__viz {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl-ill {
  width: 100%;
  max-width: 300px;
  height: auto;
}

@media (max-width: 860px) {
  .cl-method { gap: 30px; }
  .cl-method__row { grid-template-columns: 1fr; gap: 20px; }
  .cl-method__row--rev .cl-method__viz { order: 0; }
  .cl-ill { max-width: 256px; }
}


/* =============================================================
   8b. Annotated example — the letter on a desk. Immersive scene:
   a soft desk surface (gradient + faint dot grid + spotlight), the
   letter as a real paper sheet (crisp corners, layered lift + contact
   shadow, paperclip), floating annotation callouts on BOTH sides with
   connector lines + endpoint dots pointing at the page, and a pen
   resting on the desk. Same visual language as ILLUSTRATIONS.md.
   ============================================================= */
.cl-desk {
  position: relative;
  border-radius: 26px;
  /* no border: the desk is a photo-style crop of a larger table, so no
     component edge line may cut through props at the boundary */
  /* Breaks out of the 1100px section so the sheet can hold true A4
     proportions at a readable size, with room for the side rails. */
  width: min(1460px, calc(100vw - 64px));
  align-self: center;
  /* light-oak desktop, seen from above: soft top light + warm wood */
  background:
    radial-gradient(880px 480px at 50% 18%, rgba(255, 248, 235, 0.45), transparent 70%),
    linear-gradient(180deg, #e9d2ac 0%, #dfc094 55%, #d6b483 100%);
  padding: 64px 52px 68px;
  overflow: hidden;
  /* vignette so the surface reads as a lit desk, not a flat fill */
  box-shadow: inset 0 0 110px rgba(96, 56, 12, 0.20);
}
/* wood grain: long horizontal streaks at two rhythms, very low contrast */
.cl-desk::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(178deg,
      rgba(120, 74, 24, 0.00) 0px, rgba(120, 74, 24, 0.06) 2px, rgba(120, 74, 24, 0.00) 3px,
      rgba(120, 74, 24, 0.00) 26px),
    repeating-linear-gradient(181deg,
      rgba(255, 244, 224, 0.00) 0px, rgba(255, 244, 224, 0.10) 1px, rgba(255, 244, 224, 0.00) 2px,
      rgba(255, 244, 224, 0.00) 41px),
    repeating-linear-gradient(179.5deg,
      rgba(96, 56, 12, 0.00) 0px, rgba(96, 56, 12, 0.045) 3px, rgba(96, 56, 12, 0.00) 5px,
      rgba(96, 56, 12, 0.00) 89px);
  pointer-events: none;
}
.cl-desk__scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, 280px);
  gap: 32px;
  align-items: start;
}

/* ---- The paper (true A4 proportions: 210 x 297) ---- */
.cl-desk__stage {
  position: relative;
  margin: 0;
  max-width: 640px;
  justify-self: center;
  width: 100%;
}
/* soft contact shadow under the sheet */
.cl-desk__stage::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -16px;
  height: 30px;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(63, 39, 10, 0.40), transparent 70%);
  filter: blur(7px);
}
.cl-desk__paper {
  position: relative;
  z-index: 1;
  aspect-ratio: 210 / 297; /* A4 */
  background: linear-gradient(180deg, #ffffff 0%, #fdfdfe 88%, #f8f9fb 100%);
  border-radius: 2px;
  padding: 44px 46px 40px;
  box-sizing: border-box;
  box-shadow:
    0 1px 2px rgba(40, 25, 5, 0.12),
    0 14px 26px -14px rgba(63, 39, 10, 0.30),
    0 46px 80px -42px rgba(63, 39, 10, 0.45);
}
/* letter typography scales to the sheet, like a real 11pt A4 letter */
.cl-desk__paper p {
  font-size: 13px;
  line-height: 1.64;
  color: #3a4350;
  margin: 0 0 12px;
}
.cl-desk__paper p:last-child { margin-bottom: 0; }
/* Hovering a callout highlights the letter part it annotates, in that
   callout's color. background covers the text box; the spread box-shadow
   bleeds the tint 8px past it, so nothing shifts. */
.cl-desk__paper p[data-part] {
  border-radius: 5px;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.cl-desk__paper p[data-part="1"],
.cl-desk__paper p[data-part="5"] { --hl: rgba(100, 116, 139, 0.14); }
.cl-desk__paper p[data-part="2"] { --hl: rgba(37, 99, 235, 0.10); }
.cl-desk__paper p[data-part="3"] { --hl: rgba(5, 150, 105, 0.11); }
.cl-desk__paper p[data-part="4"] { --hl: rgba(217, 119, 6, 0.12); }
.cl-desk__paper p.cl-part-hot {
  background-color: var(--hl);
  box-shadow: 0 0 0 8px var(--hl);
}
.cl-example__sign { margin-top: 8px; color: #1c2330; }
/* p-qualified so it out-ranks the earlier .cl-desk__paper p color */
p.cl-example__sign-id {
  font-style: italic;
  color: #7b8496;
  margin-top: 2px;
}
.cl-example__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  margin-right: 8px;
  transform: translateY(-1px);
  box-shadow: 0 3px 7px -2px rgba(15, 23, 42, 0.35);
}
.cl-example__mark--slate { background: #64748b; }
.cl-example__mark--blue  { background: #2563eb; }
.cl-example__mark--green { background: #059669; }
.cl-example__mark--amber { background: #d97706; }
/* paperclip over the top edge */
.cl-desk__clip {
  position: absolute;
  z-index: 2;
  top: -20px;
  left: 44px;
  width: 26px;
  transform: rotate(-7deg);
  filter: drop-shadow(0 3px 4px rgba(15, 23, 42, 0.18));
}
.cl-desk__clip svg { display: block; width: 100%; height: auto; }

/* ---- Annotation callouts ---- */
.cl-desk__rail {
  position: relative;
  /* z-index 2: the sheet sits at z-index 1, so connector dots from BOTH
     rails paint on top of the page (a z-index tie resolves by DOM order,
     which put the left rail's dots behind the paper). */
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.cl-callout {
  position: relative;
  display: flex;
  gap: 14px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 20px;
  padding: 21px 22px 20px;
  box-shadow:
    0 1px 2px rgba(40, 25, 5, 0.07),
    0 10px 22px -14px rgba(63, 39, 10, 0.26),
    0 30px 52px -26px rgba(63, 39, 10, 0.40);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cl-callout:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(40, 25, 5, 0.07),
    0 14px 28px -14px rgba(63, 39, 10, 0.32),
    0 38px 64px -28px rgba(63, 39, 10, 0.48);
}
.cl-callout--slate { --co: #64748b; --co-l: #94a3b8; }
.cl-callout--blue  { --co: #2563eb; --co-l: #60a5fa; }
.cl-callout--green { --co: #059669; --co-l: #34d399; }
.cl-callout--amber { --co: #d97706; --co-l: #fbbf24; }
.cl-callout__num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--co-l, #60a5fa), var(--co, #2563eb));
  box-shadow: 0 6px 13px -5px var(--co, #2563eb);
}
.cl-callout__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #1c2330;
  margin: 4px 0 6px;
}
.cl-callout__desc { font-size: 13.5px; line-height: 1.6; color: #52607a; margin: 0; }
.cl-callout__desc a {
  color: #1a73e8;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 115, 232, 0.35);
}
.cl-callout__desc a:hover { border-bottom-color: #1a73e8; }

/* Connector line + endpoint dot. --reach spans the exact distance from the
   rail edge to the sheet: 32px column gap + the paper's centering slack
   ((100vw - 64 desk margin - 104 desk padding - 2 border - 624 rails/gaps
   - 640 sheet) / 2), clamped for the desk's 1460px cap. The +6px lets the
   dot pin onto the sheet edge. */
.cl-desk { --reach: clamp(38px, calc(38px + (100vw - 1434px) / 2), 83px); }
.cl-callout::before {
  content: "";
  position: absolute;
  top: 34px; /* level with the number chip's center (20px pad + 15px) */
  width: var(--reach);
  height: 2px;
  background: var(--co, #2563eb);
  opacity: 0.5;
}
.cl-callout::after {
  content: "";
  position: absolute;
  top: 29.5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--co, #2563eb);
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(40, 25, 5, 0.30);
}
.cl-desk__rail--left .cl-callout::before { right: calc(-1 * var(--reach)); }
.cl-desk__rail--left .cl-callout::after  { right: calc(-1 * var(--reach) - 5px); }
.cl-desk__rail--right .cl-callout::before { left: calc(-1 * var(--reach)); }
.cl-desk__rail--right .cl-callout::after  { left: calc(-1 * var(--reach) - 5px); }
/* rough vertical alignment with the letter's five parts (A4 sheet ~905px) */
.cl-callout--l1 { margin-top: 150px; }
.cl-callout--l2 { margin-top: 160px; }
.cl-callout--r1 { margin-top: 64px; }
.cl-callout--r2 { margin-top: 140px; }
.cl-callout--r3 { margin-top: 210px; }

/* ---- Desk props (flat-lay, corners only, warm shadows) ---- */
.cl-desk__prop {
  position: absolute;
  pointer-events: none;
}
.cl-desk__prop svg { display: block; width: 100%; height: auto; }
/* Arrangement, balanced diagonally around the sheet: Mac mini edge TL,
   pen mid-right (in the gap between callouts 3 and 5), mug BL. Props are
   real-world scale vs the 640px A4 sheet and tuck under it (the paper's
   z-index 1 paints over z-index 0). */
.cl-desk__prop--pen {
  /* Overlaps the sheet's right edge and paints ABOVE it (z 1 + later DOM
     order beats the paper's z 1), with a tight contact shadow + soft
     ambient one so it reads as lying ON the letter. Vertical position is
     set by JS, centered in the gap between callouts 3 and 5. */
  right: 44px;
  top: 596px;
  width: 430px;
  transform: rotate(-16deg);
  filter:
    drop-shadow(0 4px 4px rgba(40, 25, 5, 0.30))
    drop-shadow(0 18px 22px rgba(63, 39, 10, 0.28));
  z-index: 1;
}
.cl-desk__prop--mac {
  /* Real Mac-mini scale vs the sheet; mostly off-canvas so only its lower
     edge shows. Rotated bounding box ends ~y165, clearing the left rail's
     first callout (JS pins it to mark 2, top ~y180). Right side tucks
     under the sheet (z 0 < paper z 1). */
  left: -40px;
  top: -230px;
  width: 440px;
  transform: rotate(10deg);
  filter: drop-shadow(14px 16px 20px rgba(63, 39, 10, 0.32));
  z-index: 0;
}
.cl-desk__prop--mug {
  left: 22px;
  bottom: 34px;
  width: 400px;
  z-index: 0;
}

/* ---- Responsive ----
   Below 1434px the side rails would pinch the sheet under 640px (rails now 280px) and break
   true A4, so the scene stacks: A4 paper first (still proportional,
   centered), then the callouts as a 2-col grid in reading order 1-5.
   Below 720px: 1 col, and readability beats strict A4 (ratio released,
   type back up). */
@media (max-width: 1433px) {
  .cl-desk { padding: 34px 24px 38px; border-radius: 22px; }
  .cl-desk__scene { grid-template-columns: 1fr 1fr; gap: 16px; }
  .cl-desk__rail { display: contents; }
  .cl-desk__stage { order: -1; grid-column: 1 / -1; max-width: 640px; margin: 0 auto 20px; }
  .cl-callout--r1 { order: 1; }
  .cl-callout--l1 { order: 2; }
  .cl-callout--r2 { order: 3; }
  .cl-callout--l2 { order: 4; }
  .cl-callout--r3 { order: 5; }
  .cl-callout--l1, .cl-callout--l2, .cl-callout--r1, .cl-callout--r2, .cl-callout--r3 { margin-top: 0; }
  .cl-callout::before, .cl-callout::after { display: none; }
  .cl-desk__prop { display: none; }
}
@media (max-width: 720px) {
  .cl-desk { padding: 24px 16px 28px; border-radius: 20px; }
  .cl-desk__scene { grid-template-columns: 1fr; gap: 13px; }
  .cl-desk__paper { aspect-ratio: auto; padding: 30px 24px 28px; }
  .cl-desk__paper p { font-size: 14.5px; line-height: 1.7; margin-bottom: 14px; }
  .cl-desk__clip { top: -14px; left: 26px; width: 22px; }
}

/* =============================================================
   8c. What-to-include checklist — a printed checklist page: white
   sheet (crisp corners, layered lift, dog-ear fold top-right) with
   a document title, hairline-divided rows and green tick discs.
   ============================================================= */
.cl-checkpage {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  background: linear-gradient(180deg, #ffffff 0%, #fdfdfe 90%, #f8fafc 100%);
  border-radius: 4px;
  padding: 36px 46px 38px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 14px 28px -16px rgba(15, 23, 42, 0.16),
    0 42px 80px -42px rgba(15, 23, 42, 0.30);
}
/* dog-ear: the folded top-right corner that says "this is a page" */
.cl-checkpage__fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  background: linear-gradient(225deg, #f5f6f8 0%, #f5f6f8 50%, #e3e9f2 50%, #d8e0eb 100%);
  border-bottom-left-radius: 6px;
  box-shadow: -2px 2px 4px rgba(15, 23, 42, 0.08);
}
.cl-checkpage__title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1c2330;
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e8edf5;
}
.cl-checkpage__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cl-checkpage__item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 14px 0;
  border-bottom: 1px solid #edf1f7;
}
.cl-checkpage__item:last-child { border-bottom: none; padding-bottom: 2px; }
.cl-checkpage__tick {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34d399, #059669);
  box-shadow: 0 5px 11px -4px rgba(5, 150, 105, 0.50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.cl-checkpage__tick svg { width: 14px; height: 14px; }
.cl-checkpage__text { display: flex; flex-direction: column; gap: 2px; }
.cl-checkpage__text strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1c2330;
}
.cl-checkpage__text span { font-size: 13.5px; line-height: 1.55; color: #52607a; }
@media (max-width: 720px) {
  .cl-checkpage { padding: 26px 22px 28px; }
  .cl-checkpage__fold { width: 28px; height: 28px; }
}

/* =============================================================
   8e. Cover letter don'ts — single full-width card, red theme.
   Items are 2-up on wide screens; each li is icon + one text span
   (the span is the single flex child so inline links never break
   into their own column).
   ============================================================= */
.cl-dd {
  background: #fef4f4;
  border: 1px solid #fbd5d5;
  border-radius: 18px;
  padding: 26px 30px 28px;
}
.cl-dd__head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.cl-dd__head h3 { font-size: 19px; font-weight: 700; color: #1c2330; margin: 0; letter-spacing: -0.01em; }
.cl-dd__badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cl-dd__badge svg { width: 18px; height: 18px; }
.cl-dd__badge--dont { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 6px 14px -5px rgba(225, 29, 72, .45); }
.cl-dd__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 40px;
}
.cl-dd__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: #3a4350;
}
.cl-dd__text { display: block; }
.cl-dd__list a {
  color: #1a73e8;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 115, 232, 0.35);
}
.cl-dd__list a:hover { border-bottom-color: #1a73e8; }
.cl-dd__ico {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fde0e0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(1px);
}
.cl-dd__ico svg { width: 13px; height: 13px; }
@media (max-width: 760px) {
  .cl-dd__list { grid-template-columns: 1fr; gap: 14px; }
}


/* =============================================================
   9. EEAT block — centered "Who wrote this" (ported from the guide
   page's .rg-eeat: pill eyebrow + big centered H2, then centered
   photo / name / role / bio / link on white. No card.)
   ============================================================= */
.cl-eeat {
  background: #ffffff;
  padding: 20px 24px 68px;
  text-align: center;
}
.cl-eeat__head { margin-bottom: 10px; }
.cl-eeat__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
  color: #1a73e8;
  margin: 0 0 12px;
  padding: 4px 12px;
  background: #eaf1fe;
  border-radius: 999px;
}
.cl-eeat__title {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.2;
  color: #1c2330;
  margin: 0 0 4px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.cl-eeat__body {
  max-width: 600px;
  margin: 18px auto 0;
}
.cl-eeat__photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 18px;
}
.cl-eeat__name {
  font-size: 17px;
  font-weight: 700;
  color: #1c2330;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.cl-eeat__role {
  font-size: 13.5px;
  color: #667085;
  margin: 0 0 20px;
}
.cl-eeat__bio {
  font-size: 15.5px;
  line-height: 1.65;
  color: #3a4350;
  margin: 0 0 18px;
}
.cl-eeat__bio a {
  color: #1a73e8;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cl-eeat__bio a:hover { color: #1557b0; }
.cl-eeat__link {
  display: inline-block;
  color: #1a73e8;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
}
.cl-eeat__link:hover { text-decoration: underline; }


/* =============================================================
   10. Other Resources grid
   The cards reuse .rt-resource + .rt-viz-* from resume-template.css.
   We only need the grid wrapper here.
   ============================================================= */

.cl-resources__grid {
  display: grid;
  /* min(260px, 100%) keeps a card from overflowing a container narrower than
     260px (very small phones); caps card width at 290px otherwise. */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 290px));
  justify-content: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 560px) {
  .cl-resources__grid { grid-template-columns: 1fr; }
}


/* =============================================================
   11. .cl-viz-letter — NEW cover-letter mini-mockup illustration.
   Same visual language as the .rt-viz-* mockups (white card, hairline
   border, soft shadow). Used as the resource-card viz on sibling pages
   (template, guide, skills, metrics) and showcased on this page.
   ============================================================= */

.cl-viz-letter {
  position: relative;
  z-index: 1;
  width: 170px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 13px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 18px rgba(15, 23, 42, .08);
}
.cl-viz-letter__salutation {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  color: #334155;
  letter-spacing: -0.005em;
  text-align: left;
}
.cl-viz-letter__line {
  height: 5px;
  border-radius: 3px;
  background: #e2e8f0;
  width: 100%;
}
.cl-viz-letter__line--w90 { width: 90%; }
.cl-viz-letter__line--w85 { width: 85%; }
.cl-viz-letter__line--w75 { width: 75%; }
.cl-viz-letter__line--w70 { width: 70%; }
.cl-viz-letter__line--w60 { width: 60%; }
.cl-viz-letter__line--input {
  /* Tint derived from the card's own accent (--rt-res-color) so the dashed
     placeholder matches the card color (blue on the template card, rose on
     the cover-letters card, etc.). Falls back to blue. */
  background: color-mix(in srgb, var(--rt-res-color, #2563eb) 14%, transparent);
  border: 1px dashed color-mix(in srgb, var(--rt-res-color, #2563eb) 45%, transparent);
  height: 7px;
}

/* Header variant used by the resume-template card viz */
.cl-viz-letter__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 7px;
  margin-bottom: 1px;
  border-bottom: 1px solid #f1f5f9;
}
.cl-viz-letter__icon {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  color: var(--rt-res-color, #2563eb);
  background: var(--rt-res-tint, #eff6ff);
  border-radius: 4px;
  padding: 1px 5px;
}
.cl-viz-letter__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #475569;
}




/* =============================================================
   11z. Mobile polish (<=720px only — desktop untouched)
   Tighter section rhythm, method step-number stacked above the H3,
   slightly larger section eyebrows, and a trimmed FAQ top gap.
   ============================================================= */
@media (max-width: 720px) {
  /* less air between full-bleed sections + after each section head */
  .cl-content { padding: 40px 22px; }
  .cl-content__head { margin-bottom: 18px; }

  /* section eyebrows a touch larger so long ones wrap cleanly to 2 lines
     (same specificity as the base rule, later in source = wins) */
  .cl-content__head .cl-content__eyebrow { font-size: 12.5px; letter-spacing: 0.11em; }

  /* method rows: step number CENTERED above the H3, tighter list gap.
     (Body paragraphs stay left-aligned; only the head centers.) */
  .cl-method { gap: 24px; margin-top: 4px; }
  .cl-method__head { flex-direction: column; align-items: center; text-align: center; gap: 8px; }

  /* FAQ list carries a big 4.5rem top margin from main.css; the section
     already has its own header, so trim it on mobile */
  .cl-page #faq.tcv-faq { margin-top: 1.25rem; }
}


/* =============================================================
   12. Print — show only the letter, hide all chrome.
   (Mirrors the resume-template @media print block, .cl- namespace.)
   ============================================================= */

@media print {
  body { background: #fff !important; }

  #header,
  .blog-hero,
  .rg-trust,
  .cl-intro,
  .cl-tool-head,
  .cl-rail,
  .cl-toolbar,
  .cl-edit-banner,
  .cl-export,
  .cl-content,
  .cl-eeat,
  .tcv-free-review-split,
  .tcv-footer,
  .cookies-banner,
  .cookie-banner {
    display: none !important;
  }

  .cl-section { background: #fff !important; padding: 0 !important; }
  .cl-shell { display: block !important; }
  .cl-preview-area { gap: 0 !important; }

  .cl-paper {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 18mm 18mm !important;
    min-height: 0 !important;
    max-width: none !important;
    outline: none !important;
    font-size: 11.5pt !important;
  }

  .cl-var,
  .cl-var-skills {
    background: transparent !important;
    outline: none !important;
    padding: 0 !important;
  }
  .cl-var.is-empty,
  .cl-var-skills.is-empty,
  .cl-exp.is-empty {
    color: #1c2330 !important;
    font-style: normal !important;
  }
}

/* =============================================================
   Nuclear centering for the example + checklist headers (ID-scoped,
   out-ranks every class-based rule in any stylesheet regardless of
   order). Kept because the class-based --center variant tied/lost
   in some cached render; IDs settle it permanently.
   ============================================================= */
#cover-letter-example .cl-content__head,
#what-to-include .cl-content__head,
#cover-letter-resources .cl-content__head,
#cover-letter-example .cl-content__head .cl-content__eyebrow,
#what-to-include .cl-content__head .cl-content__eyebrow,
#cover-letter-resources .cl-content__head .cl-content__eyebrow,
#cover-letter-example .cl-content__head h2,
#what-to-include .cl-content__head h2,
#cover-letter-resources .cl-content__head h2 {
  text-align: center;
}
#cover-letter-example .cl-content__head p,
#what-to-include .cl-content__head p {
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}