/* ============================================================
   country.css — finishing-pass overlay for the country template
   family. Loaded AFTER design-system.final8.css + country-base.css
   + country-redesign.css on all 4 country templates:

     - templates/countries/base.html             (149 pages)
     - templates/countries/country-special.html  (49 pages)
     - templates/countries/profession.html       (966 pages)
     - templates/countries/salaries.html         (193 pages)

   …plus the 384 visa-comparison + cost-of-living pages once PR #277
   merges (1,741 pages total reach).

   Strategy
   --------
   country-redesign.css already establishes the core look (cream bg,
   Fraunces display, accent orange, paper cards). This file adds:

     1. Single biggest extraction: .report-cta — the dark-green
        gradient block with two CTAs that appears on every template
        and is built ENTIRELY from inline styles. We swap it to the
        ink-on-paper pattern country-redesign.css uses for
        .article-cta, so the page has one coherent CTA voice.

     2. Inline-styled "Also Consider" / "Visa pathways for X" /
        "Compare with X" footer sections — defeated and re-cast as
        quiet cream callouts instead of grey/yellow strips.

     3. Country-special editorial layer — first-class styling for
        .qual-grid / .qual-card / .qual-badge--easy|moderate|hard
        and the .reality-item "Official says vs Reality" pair.
        These exist nowhere else and are the 49 flagship pages'
        editorial signature.

     4. Same .key-takeaway blue-border bug that bit the long blog
        — profession + salaries hardcode `var(--primary, #2563EB)`.
        Forced back to brand orange.

     5. Misc polish: .data-disclaimer (yellow strip → paper card),
        .citation-zone (lead paragraph), col-card detail copy.

   Heavy use of !important — every rule that defeats inline styles
   (5 inline strings × 4 templates × multi-page = 108 inline
   attributes per the audit) needs it. When the builder is updated
   to drop those inline strings, these become harmless no-ops.
   ============================================================ */


/* =============================================================
   1.  REPORT-CTA — single biggest leverage point
   -------------------------------------------------------------
   Original markup (from samples):

     <div class="report-cta" style="background:linear-gradient(135deg,
       #1A5C50 0%, #145244 100%); color:#fff; padding:40px 32px;
       border-radius:12px; margin:40px 0; text-align:center">
       <h2 style="color:#fff; margin:0 0 12px">…</h2>
       <p style="color:rgba(255,255,255,0.85); margin:0 0 24px;
         max-width:500px; display:inline-block">…</p>
       <div style="display:flex; gap:12px; justify-content:center;
         flex-wrap:wrap">
         <a style="display:inline-block; background:#fff;
           color:#1A5C50; padding:14px 28px; border-radius:8px;
           text-decoration:none; font-weight:600">Get Your Free Verdict</a>
         <a style="…rgba(255,255,255,0.15) bg…">See Reports — €10</a>
       </div>
     </div>

   Five distinct inline strings × 4 templates. Re-cast as the ink-bg
   pattern country-redesign.css uses for .article-cta — same dark
   colour, accent button, ghost button. One coherent CTA voice.
   ============================================================= */

/* 2026-05-06 — Harmonised with .article-cta (Full template) for visual
   consistency: same dark green box, center-aligned, same padding/margin.
   Skinny-template country pages use .report-cta; Full uses .article-cta;
   both should look identical to the user. */
.report-cta {
  background: var(--ink, #0C2E2B) !important;
  background-image: none !important;
  color: #fff !important;
  padding: 40px 36px !important;
  border-radius: 14px !important;
  margin: 48px 0 !important;
  text-align: center !important;
}
.report-cta h2,
.report-cta[style] h2[style] {
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  color: #fff !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin: 0 0 14px !important;
  text-align: center !important;
}
.report-cta p,
.report-cta[style] p[style] {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin: 0 auto 22px !important;
  max-width: 540px !important;
  display: block !important;
}
.report-cta > div[style*="display:flex"],
.report-cta > div[style*="display: flex"] {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}
/* Primary button (was: white bg + green text) → accent orange.
   Selectors mirror the :not() chain from country-redesign.css's
   `.article-body a:not(.btn):not(.download-card):not(.tier__cta)`
   rule and add an attribute selector to out-specific it. Otherwise
   the redesign rule's color: accent !important wins and the button
   label renders orange-on-orange (invisible). Specificity here is
   (0,5,0); the redesign rule is (0,4,0). */
.article-body .report-cta a:not(.btn):not(.download-card):not(.tier__cta)[style*="background:#fff"],
.article-body .report-cta a:not(.btn):not(.download-card):not(.tier__cta)[style*="background: #fff"],
.article-body .report-cta a:not(.btn):not(.download-card):not(.tier__cta)[style*="background:#FFFFFF"] {
  background: var(--accent, #B5521F) !important;
  color: #FFFFFF !important;
  padding: 14px 28px !important;
  border-radius: 8px !important;
  font: 600 15px/1 var(--font-body, 'Inter', system-ui, sans-serif) !important;
  text-decoration: none !important;
  border: none !important;
  border-bottom: none !important;
  transition: background 0.15s, transform 0.15s !important;
}
.article-body .report-cta a:not(.btn):not(.download-card):not(.tier__cta)[style*="background:#fff"]:hover,
.article-body .report-cta a:not(.btn):not(.download-card):not(.tier__cta)[style*="background: #fff"]:hover,
.article-body .report-cta a:not(.btn):not(.download-card):not(.tier__cta)[style*="background:#FFFFFF"]:hover {
  background: var(--accent-hover, #9A4519) !important;
  transform: translateY(-1px) !important;
  color: #FFFFFF !important;
}
/* Secondary "ghost" button (was: rgba(255,255,255,0.15) bg) — quieter outline.
   Same out-specific :not() chain so the redesign body-link rule
   doesn't force orange text + orange underline. */
.article-body .report-cta a:not(.btn):not(.download-card):not(.tier__cta)[style*="rgba(255,255,255,0.15)"],
.article-body .report-cta a:not(.btn):not(.download-card):not(.tier__cta)[style*="rgba(255, 255, 255, 0.15)"] {
  background: transparent !important;
  color: #FFFFFF !important;
  padding: 14px 28px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
  font: 600 15px/1 var(--font-body, 'Inter', system-ui, sans-serif) !important;
  text-decoration: none !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.article-body .report-cta a:not(.btn):not(.download-card):not(.tier__cta)[style*="rgba(255,255,255,0.15)"]:hover,
.article-body .report-cta a:not(.btn):not(.download-card):not(.tier__cta)[style*="rgba(255, 255, 255, 0.15)"]:hover {
  border-color: rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #FFFFFF !important;
}


/* =============================================================
   2.  "ALSO CONSIDER" footer section (base template)
   -------------------------------------------------------------
   Original: <section style="background:var(--grey-100,#F4F5F7);…">
     with grid of country cards each <a style="…">.

   Currently a near-grey strip. Re-cast as a paper card matching
   the .explore-more pattern.
   ============================================================= */

main > section[style*="background:var(--grey-100"],
main > section[style*="background: var(--grey-100"] {
  margin: 64px 0 0 !important;
  padding: 36px 32px !important;
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 14px !important;
}
main > section[style*="background:var(--grey-100"] h3,
main > section[style*="background: var(--grey-100"] h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  color: var(--ink, #0C2E2B) !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 20px !important;
}
/* Country cards inside the section — each is an <a style="…"> */
main > section[style*="background:var(--grey-100"] a[style*="display:block"],
main > section[style*="background: var(--grey-100"] a[style*="display:block"] {
  background: var(--cream, #F5F1E8) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  text-decoration: none !important;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s !important;
}
main > section[style*="background:var(--grey-100"] a[style*="display:block"]:hover,
main > section[style*="background: var(--grey-100"] a[style*="display:block"]:hover {
  border-color: var(--accent, #B5521F) !important;
  background: var(--paper, #FFFFFF) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(12, 46, 43, 0.05) !important;
}
/* Country name (first span inside each card) */
main > section[style*="background:var(--grey-100"] a span:first-child {
  font: 600 15px/1.3 var(--font-display, 'Fraunces', Georgia, serif) !important;
  color: var(--ink, #0C2E2B) !important;
  letter-spacing: -0.01em !important;
}
/* Visa list (second span) */
main > section[style*="background:var(--grey-100"] a span:nth-child(2) {
  display: block !important;
  font: 400 12px/1.5 var(--font-body, 'Inter', system-ui, sans-serif) !important;
  color: var(--grey-500, #6B7280) !important;
  margin-top: 6px !important;
}
/* "View visa pathways →" affordance (third span) */
main > section[style*="background:var(--grey-100"] a span:nth-child(3) {
  display: block !important;
  font: 600 11px/1 var(--font-body, 'Inter', system-ui, sans-serif) !important;
  color: var(--accent, #B5521F) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-top: 10px !important;
}
/* Trailing helper paragraph + "Get Your Free Verdict" link below the grid */
main > section[style*="background:var(--grey-100"] > div[style*="text-align:center"] p {
  font: 400 13px/1.5 var(--font-body, 'Inter') !important;
  color: var(--grey-500, #6B7280) !important;
  margin: 24px 0 12px !important;
}
main > section[style*="background:var(--grey-100"] > div[style*="text-align:center"] a {
  display: inline-block !important;
  background: var(--accent, #B5521F) !important;
  color: var(--paper, #FFFFFF) !important;
  padding: 10px 22px !important;
  border-radius: 8px !important;
  font: 600 14px/1 var(--font-body, 'Inter') !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
}
main > section[style*="background:var(--grey-100"] > div[style*="text-align:center"] a:hover {
  background: var(--accent-hover, #9A4519) !important;
}


/* =============================================================
   3.  "VISA PATHWAYS FOR X" footer section (special template)
   -------------------------------------------------------------
   Original: <section style="background:#FFFBF0;border:1px solid
     #F4E5C0;border-radius:12px"> — a warm-yellow callout listing
   pathway links.

   Defeat the yellow + Libre Baskerville heading. Match cream-bg
   page with a quiet paper card.
   ============================================================= */

main > section[style*="background:#FFFBF0"] {
  max-width: 720px !important;
  margin: 56px auto 0 !important;
  padding: 32px 32px !important;
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.08) !important;
  border-radius: 14px !important;
}
main > section[style*="background:#FFFBF0"] h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--ink, #0C2E2B) !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 18px !important;
}
main > section[style*="background:#FFFBF0"] ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
main > section[style*="background:#FFFBF0"] li {
  margin: 0 !important;
}
main > section[style*="background:#FFFBF0"] li a[style*="color:#1A5C50"] {
  display: inline-block !important;
  font: 500 14px/1.5 var(--font-body, 'Inter', system-ui, sans-serif) !important;
  color: var(--accent, #B5521F) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  padding: 6px 0 !important;
  transition: border-color 0.15s !important;
}
main > section[style*="background:#FFFBF0"] li a[style*="color:#1A5C50"]:hover {
  border-bottom-color: var(--accent, #B5521F) !important;
}
/* "+ N more pathways · See all visa types →" link gets a different treatment */
main > section[style*="background:#FFFBF0"] li a[style*="color:#0C2E2B"] {
  font: 600 13px/1.5 var(--font-body, 'Inter', system-ui, sans-serif) !important;
  color: var(--ink, #0C2E2B) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 8px 0 !important;
}


/* =============================================================
   4.  "COMPARE X WITH" footer section (special template)
   -------------------------------------------------------------
   Original: <section style="background:#F9FAFB;border:1px solid
     #E5E7EB"> — a near-white grey callout, otherwise structurally
   identical to the visa-pathways block above.
   ============================================================= */

main > section[style*="background:#F9FAFB"] {
  max-width: 720px !important;
  margin: 56px auto 0 !important;
  padding: 32px 32px !important;
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.08) !important;
  border-radius: 14px !important;
}
main > section[style*="background:#F9FAFB"] h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--ink, #0C2E2B) !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 18px !important;
}
main > section[style*="background:#F9FAFB"] ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
main > section[style*="background:#F9FAFB"] li {
  margin: 0 !important;
}
main > section[style*="background:#F9FAFB"] li a[style*="color:#1A5C50"] {
  display: inline-block !important;
  font: 500 14px/1.5 var(--font-body, 'Inter', system-ui, sans-serif) !important;
  color: var(--accent, #B5521F) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  padding: 6px 0 !important;
  transition: border-color 0.15s !important;
}
main > section[style*="background:#F9FAFB"] li a[style*="color:#1A5C50"]:hover {
  border-bottom-color: var(--accent, #B5521F) !important;
}


/* =============================================================
   5.  KEY-TAKEAWAY — defeat blue inline override
   -------------------------------------------------------------
   profession + salaries templates emit:

     style="background:var(--primary-light,#e8f5e9);
       border-left:4px solid var(--primary,#2563EB)…"

   Same legacy bug we hit on the long-blog template. Force back
   to the brand-accent paper-card pattern (matches the rule
   country-redesign.css already declares for .key-takeaway, but
   inline beats class without !important + an explicit selector).
   ============================================================= */

.key-takeaway[style*="border-left:4px solid var(--primary"],
.key-takeaway[style*="border-left: 4px solid var(--primary"],
.key-takeaway[style*="background:var(--primary-light"],
.key-takeaway[style*="background: var(--primary-light"] {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-left: 3px solid var(--accent, #B5521F) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 20px 24px !important;
  margin: 24px 0 32px !important;
  box-shadow: 0 1px 3px rgba(12, 46, 43, 0.04) !important;
}
/* Defeat inline `color:var(--primary)` (blue) on the eyebrow */
.key-takeaway strong[style*="color:var(--primary"] {
  color: var(--accent, #B5521F) !important;
  font: 600 11px/1 var(--font-body, 'Inter') !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}
.key-takeaway p[style] {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--ink, #0C2E2B) !important;
  margin: 8px 0 0 !important;
}


/* =============================================================
   6.  DATA-DISCLAIMER (base template)
   -------------------------------------------------------------
   Original: <div class="data-disclaimer" style="background:#FEF6E0;
     border-left:3px solid #D97706;…"> — yellow warning strip.

   Re-cast as a quiet paper card with a muted accent rule. Same
   information, none of the visual urgency.
   ============================================================= */

.data-disclaimer {
  margin: 48px 0 24px !important;
  padding: 18px 22px !important;
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-left: 3px solid var(--accent, #B5521F) !important;
  border-radius: 0 10px 10px 0 !important;
  font: 400 13px/1.7 var(--font-body, 'Inter', system-ui, sans-serif) !important;
  color: var(--grey-700, #3D4451) !important;
}


/* =============================================================
   7.  CITATION-ZONE (base template lead paragraph)
   -------------------------------------------------------------
   Original: <p class="citation-zone" style="font-size:16px;
     line-height:1.8;color:var(--ink);margin:20px 0 28px;
     padding:0 2px"> — opening prose paragraph below the snapshot.

   Lift it slightly above the rest of the body copy: subtly
   bigger, looser leading. Acts as a lede.
   ============================================================= */

.citation-zone,
p.citation-zone[style] {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: var(--ink, #0C2E2B) !important;
  margin: 24px 0 36px !important;
  padding: 0 !important;
  max-width: 720px !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
}


/* =============================================================
   8.  QUALIFICATION PROFILES — the country-special editorial layer
   -------------------------------------------------------------
   Markup pattern:

     <div class="qual-grid">
       <div class="qual-card">
         <span class="qual-badge qual-badge--easy">Easy</span>
         <div>
           <strong>Tech Workers</strong><br>
           <small>Best visa: EU Blue Card…</small><br>
           <span style="font-size:14px;color:var(--neutral-medium)">
             Detailed paragraph…
           </span>
         </div>
       </div>
       …
     </div>

   No existing CSS rule. Designing from scratch.
   ============================================================= */

.qual-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 18px !important;
  margin: 24px 0 40px !important;
}
.qual-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 14px !important;
  padding: 24px 26px !important;
  box-shadow: 0 1px 2px rgba(12, 46, 43, 0.03) !important;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s !important;
}
.qual-card:hover {
  border-color: rgba(12, 46, 43, 0.12) !important;
  box-shadow: 0 4px 12px rgba(12, 46, 43, 0.06) !important;
  transform: translateY(-1px) !important;
}
.qual-card > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.qual-card strong {
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: var(--ink, #0C2E2B) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}
.qual-card small {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--accent, #B5521F) !important;
  line-height: 1.5 !important;
  display: inline-block !important;
  margin-top: 2px !important;
}
/* Defeat the inline `style="font-size:14px;color:var(--neutral-medium)"` body span */
.qual-card span[style*="color:var(--neutral-medium)"],
.qual-card span[style*="color: var(--neutral-medium)"],
.qual-card span[style*="font-size:14px"] {
  display: block !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--grey-700, #3D4451) !important;
  margin-top: 8px !important;
}
/* Defeat inline `<br>` separators visually — collapse the gaps so the
   inner div feels typeset, not stacked */
.qual-card br {
  display: none !important;
}


/* =============================================================
   9.  QUAL-BADGE chips — semantic colour coding
   -------------------------------------------------------------
   Three variants. Kept tasteful: muted sage / amber / rust on a
   tinted background. Not neon, not screaming.
   ============================================================= */

.qual-badge {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  padding: 5px 12px !important;
  font: 600 11px/1 var(--font-body, 'Inter', system-ui, sans-serif) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
}
.qual-badge--easy {
  background: rgba(74, 124, 89, 0.10) !important;     /* muted sage tint */
  color: #3D6849 !important;
  border-color: rgba(74, 124, 89, 0.20) !important;
}
.qual-badge--moderate {
  background: rgba(193, 130, 39, 0.10) !important;    /* warm amber tint */
  color: #8A5A18 !important;
  border-color: rgba(193, 130, 39, 0.22) !important;
}
.qual-badge--hard {
  background: rgba(166, 60, 41, 0.10) !important;     /* rust (sister of accent) */
  color: #8C3520 !important;
  border-color: rgba(166, 60, 41, 0.22) !important;
}


/* =============================================================
   10. REALITY-ITEM — the editorial centerpiece
   -------------------------------------------------------------
   Markup:

     <div class="reality-item">
       <div class="reality-item__official">
         <strong>Cost of Living</strong> — Official says: …
       </div>
       <div class="reality-item__reality">
         Reality: …
       </div>
     </div>

   Two halves: the official claim (muted, suppressed) and the
   ground-truth correction (emphasised, accent-bordered). This is
   what makes the 49 special pages feel premium — it's the only
   place on the site where we get to do editorial.
   ============================================================= */

.reality-item {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 14px !important;
  margin: 18px 0 !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(12, 46, 43, 0.03) !important;
}
.reality-item__official {
  background: var(--cream, #F5F1E8) !important;
  padding: 16px 24px !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--grey-700, #3D4451) !important;
  border-bottom: 1px dashed rgba(12, 46, 43, 0.12) !important;
}
.reality-item__official strong {
  /* `white-space: nowrap` keeps short headlines ("Cost of Living",
     "IT Sector Growth") on a single line so the inline-block doesn't
     awkwardly wrap mid-headline. Headlines are always short labels;
     long ones don't appear in this template. */
  display: inline-block !important;
  white-space: nowrap !important;
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink, #0C2E2B) !important;
  letter-spacing: -0.01em !important;
  margin-right: 4px !important;
}
.reality-item__reality {
  position: relative !important;
  padding: 20px 24px 22px 28px !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--ink, #0C2E2B) !important;
  border-left: 3px solid var(--accent, #B5521F) !important;
}
/* "Reality:" eyebrow gets emphasised */
.reality-item__reality::first-line {
  font-weight: 600 !important;
}


/* =============================================================
   11. SALARY-TABLE — country-special's profession × seniority grid
   -------------------------------------------------------------
   country-redesign.css already styles .salary-table the same as
   .visa-table (they share the rule). The special template's
   salary-table has a different shape — 3 senior-level columns with
   "Gross / Net" inside each — so we tighten the typography for
   readability. min-width override matches column count.
   ============================================================= */

.salary-table {
  min-width: 640px !important;
}
.salary-table th {
  white-space: normal !important;       /* allow "Junior (Gross / Net)" to wrap */
}
.salary-table td:not(.prog-name):not(:first-child) {
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  font-size: 13px !important;
}
.salary-table td:first-child {
  font-weight: 600 !important;
  color: var(--ink, #0C2E2B) !important;
}


/* =============================================================
   12. COL-CARD inline detail copy
   -------------------------------------------------------------
   Special template: each .col-card includes a long descriptive
   paragraph as <div style="font-size:13px;color:var(--neutral-medium)
     ;margin-top:8px;line-height:1.5">…</div>.

   country-redesign.css doesn't style this child div. Defeat the
   inline grey to match the redesigned palette and add breathing
   room from the row list above it.
   ============================================================= */

.col-card > div[style*="color:var(--neutral-medium)"],
.col-card > div[style*="color: var(--neutral-medium)"] {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--grey-500, #6B7280) !important;
  margin-top: 16px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(12, 46, 43, 0.06) !important;
}


/* =============================================================
   13. MISC PROSE — Common Mistakes, Insider Tips
   -------------------------------------------------------------
   The special template emits <h3>Common Mistakes to Avoid</h3>
   followed by a bare <ul>. country-redesign.css styles h3 but not
   the list spacing. Tighten.
   ============================================================= */

.article-body h3 + ul,
.article-body ul {
  padding-left: 22px !important;
  margin: 8px 0 24px !important;
}
.article-body ul li {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--grey-700, #3D4451) !important;
  margin-bottom: 8px !important;
  padding-left: 4px !important;
}
.article-body ul li::marker {
  color: var(--accent, #B5521F) !important;
}


/* =============================================================
   14. SALARY-TABLE FOOTNOTE — defeat inline grey
   -------------------------------------------------------------
   Both base + special emit a small disclaimer paragraph below
   their tables: <p style="font-size:13px;color:var(--neutral-medium)
     ;margin-top:8px">.
   ============================================================= */

.article-body p[style*="font-size:13px"][style*="color:var(--neutral-medium)"],
.article-body p[style*="font-size: 13px"][style*="color: var(--neutral-medium)"] {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--grey-500, #6B7280) !important;
  margin: 12px 0 32px !important;
  padding: 0 !important;
  font-style: italic !important;
}


/* =============================================================
   15. .btn standalone (salaries template)
   -------------------------------------------------------------
   country-redesign.css styles .article-cta .btn but the salaries
   template has a bare <a class="btn"> in some places. Make sure a
   bare .btn always looks accent-orange even outside the CTA box.
   ============================================================= */

a.btn {
  display: inline-block !important;
  background: var(--accent, #B5521F) !important;
  color: var(--paper, #FFFFFF) !important;
  padding: 14px 28px !important;
  border-radius: 8px !important;
  font: 600 15px/1 var(--font-body, 'Inter', system-ui, sans-serif) !important;
  text-decoration: none !important;
  border: none !important;
  transition: background 0.15s, transform 0.15s !important;
}
a.btn:hover {
  background: var(--accent-hover, #9A4519) !important;
  transform: translateY(-1px) !important;
  color: var(--paper, #FFFFFF) !important;
}


/* =============================================================
   16. RELATED-PAGES list (salaries template)
   -------------------------------------------------------------
   The salaries-short template ends with <h2>Related Pages</h2>
   followed by a bare <ul> of links. Re-cast as the .explore-more
   pattern (cream chips on paper) without the explore-more wrapper.
   ============================================================= */

.article-body h2 + ul:not(.faq-item ul):not([class]) {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 32px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 8px !important;
}
.article-body h2 + ul:not(.faq-item ul):not([class]) li {
  margin: 0 !important;
  padding: 0 !important;
}
.article-body h2 + ul:not(.faq-item ul):not([class]) li a {
  display: block !important;
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font: 500 14px/1.4 var(--font-body, 'Inter', system-ui, sans-serif) !important;
  color: var(--ink, #0C2E2B) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(12, 46, 43, 0.06) !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.article-body h2 + ul:not(.faq-item ul):not([class]) li a:hover {
  border-color: var(--accent, #B5521F) !important;
  background: var(--cream, #F5F1E8) !important;
  color: var(--accent, #B5521F) !important;
}


/* =============================================================
   17. BREADCRUMB inside .article-header (profession template)
   -------------------------------------------------------------
   profession.html emits a <nav style="padding:16px 0;font:400
     13px/1.4 var(--font-body);color:var(--grey-500)"> inside the
   header. country-redesign.css styles nav[aria-label="Breadcrumb"]
   already; this just keeps it tight inside the header context.
   ============================================================= */

.article-header nav[aria-label="Breadcrumb"] {
  margin: 0 0 16px !important;
  padding: 0 !important;
  font-size: 12px !important;
  color: var(--grey-500, #6B7280) !important;
}
.article-header nav[aria-label="Breadcrumb"] a {
  color: var(--grey-500, #6B7280) !important;
  text-decoration: none !important;
  border-bottom: 1px dotted rgba(12, 46, 43, 0.2) !important;
  padding-bottom: 1px !important;
}
.article-header nav[aria-label="Breadcrumb"] a:hover {
  color: var(--accent, #B5521F) !important;
  border-bottom-color: var(--accent, #B5521F) !important;
}


/* =============================================================
   18. TABLE CAPTION — keep visible, demote weight
   -------------------------------------------------------------
   Multiple templates emit:
     <caption style="caption-side:top;text-align:left;font:500
       14px/1.4 var(--font-body);color:var(--grey-500);
       margin-bottom:8px">

   Already reasonable — just nudge spacing.
   ============================================================= */

.visa-table caption,
.salary-table caption {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--grey-500, #6B7280) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 12px !important;
  text-align: left !important;
}


/* =============================================================
   19. MOBILE TWEAKS (<640px)
   -------------------------------------------------------------
   country-redesign.css already handles h1/h2/snapshot resizing.
   This block adds finishes for the new components above.
   ============================================================= */

@media (max-width: 640px) {
  .report-cta {
    padding: 32px 24px !important;
    margin: 40px 0 !important;
  }
  .report-cta h2,
  .report-cta[style] h2[style] {
    font-size: 22px !important;
  }
  .report-cta > div[style*="display:flex"],
  .report-cta > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .report-cta a[style] {
    text-align: center !important;
  }

  main > section[style*="background:var(--grey-100"],
  main > section[style*="background:#FFFBF0"],
  main > section[style*="background:#F9FAFB"] {
    padding: 24px 20px !important;
    margin: 40px 0 0 !important;
  }
  main > section[style*="background:#FFFBF0"] ul,
  main > section[style*="background:#F9FAFB"] ul {
    grid-template-columns: 1fr !important;
  }

  .qual-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .qual-card {
    padding: 20px 22px !important;
  }
  .qual-card strong {
    font-size: 17px !important;
  }

  .reality-item__official {
    padding: 14px 18px !important;
  }
  .reality-item__reality {
    padding: 16px 18px 18px 22px !important;
    font-size: 14px !important;
  }

  .citation-zone,
  p.citation-zone[style] {
    font-size: 16px !important;
    margin: 16px 0 24px !important;
  }

  .data-disclaimer {
    margin: 32px 0 16px !important;
    padding: 14px 18px !important;
  }
}