/* ============================================================
   EUROPE UNLOCKED — shared design tokens & components
   Editorial design system v4 (July 2026)
   Inter sans + Playfair Display serif · White ground · Navy + Red
   Palette ratio: ~60% white · 25% navy · 10% ink · 5% red
   Card-first, product-feel layout system
   ============================================================ */

:root {
  --navy: #021C3F;    /* Liberty Navy — primary */
  --red: #A3272C;     /* Unlock Red — accent; never as text below 20px */
  --ink: #14243D;     /* Ink — text */
  --cream: #FFFFFF;   /* Page background — white */
  --sand: #F5F5F7;    /* Band gray — section surfaces */
  --white: #FFFFFF;
  --max-w: 1160px;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  /* Legacy aliases — pages that reference --serif or old font stacks still work */
  --serif: var(--display);
  --red-tint: #E4B7B4;
  --green: #1F8A5B;

  /* Semantic colours */
  --emerald: #059669;
  --emerald-light: #d1fae5;
  --rose: #be123c;
  --rose-light: #ffe4e6;
  --amber: #d97706;
  --amber-light: #fef3c7;

  /* Tinted navy scale (for lighter backgrounds, borders, muted text) */
  --navy-50: #f0f4f8;
  --navy-100: #d9e2ec;
  --navy-200: #bcccdc;
  --navy-300: #9fb3c8;
  --navy-400: #829ab1;
  --navy-500: #627d98;
  --navy-600: #486581;
  --navy-700: #334e68;
  --navy-800: #243b53;

  /* Shadow hierarchy — depth instead of borders */
  --shadow-sm: 0 1px 2px rgba(2,28,63,0.04), 0 1px 3px rgba(2,28,63,0.06);
  --shadow-md: 0 2px 4px rgba(2,28,63,0.04), 0 4px 12px rgba(2,28,63,0.06);
  --shadow-lg: 0 4px 8px rgba(2,28,63,0.04), 0 8px 24px rgba(2,28,63,0.08);
  --shadow-xl: 0 8px 16px rgba(2,28,63,0.06), 0 16px 48px rgba(2,28,63,0.10);
  --shadow-hover: 0 20px 40px -12px rgba(2,28,63,0.15);

  /* Motion */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s var(--ease-smooth);
  --transition-normal: 0.3s var(--ease-smooth);

  /* Radius scale */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 100px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--navy); color: #FFFFFF; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--navy);
  color: var(--white);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  z-index: 200;
  font-weight: 700;
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 16px;
}

/* ---------- Header — frosted glass white, sticky ---------- */
.site-header {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--navy);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(2,28,63,0.06);
  transition: background var(--transition-normal), box-shadow var(--transition-normal);
}
.site-header.scrolled {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 3px rgba(2,28,63,0.04), 0 4px 12px rgba(2,28,63,0.06);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 24px;
  flex-wrap: wrap;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--navy);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.logo:hover { opacity: 0.88; transform: translateY(-1px); }
.logo .star { color: var(--red); font-size: 22px; line-height: 1; }
.logo .wordmark { font-family: var(--sans); font-weight: 700; letter-spacing: .14em; font-size: 19px; }
.logo .tag { font-family: var(--sans); font-weight: 400; letter-spacing: .24em; font-size: 19px; color: rgba(2,28,63,0.75); display: inline; margin-top: 0; }
/* NOTE: replace this text lockup with the supplied logo files before launch —
   guidelines prohibit re-typesetting the final wordmark. */

.main-nav { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.main-nav a {
  font-family: var(--sans);
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  opacity: 1;
  transition: color var(--transition-fast);
}
.main-nav a:hover { color: var(--red); text-decoration: none; }
.main-nav a.btn { opacity: 1; text-decoration: none; }
.main-nav a.btn:hover { text-decoration: none; color: var(--white); }
.main-nav a.btn-cta {
  background: var(--red);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}

/* ---------- Hamburger toggle (mobile nav) ---------- */
.nav-toggle {
  display: none; /* hidden on desktop */
  background: none;
  border: none;
  width: 28px;
  height: 20px;
  position: relative;
  cursor: pointer;
  z-index: 101;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: var(--transition-normal);
  position: absolute;
  left: 0;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 9px; }
.nav-toggle span:nth-child(3) { top: 18px; }
/* Open state */
.nav-open .nav-toggle span:nth-child(1) { transform: rotate(45deg); top: 9px; }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: rotate(-45deg); top: 9px; }

/* ---------- Buttons — pill geometry ---------- */
.btn {
  display: inline-block;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  line-height: 1.4;
  transition: all var(--transition-normal);
}
.btn:active { transform: scale(0.97); }
.btn-red { background: var(--red); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-red:hover {
  background: #8a2024;
  transform: translateY(-1px) scale(1.02);
  box-shadow: var(--shadow-md);
}
.btn-navy { background: var(--navy); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-navy:hover {
  background: #0a2f5c;
  transform: translateY(-1px) scale(1.02);
  box-shadow: var(--shadow-md);
}
.btn-outline { border: 2px solid var(--navy); color: var(--navy); background: transparent; padding: 10px 26px; }
.btn-outline:hover { background: var(--navy); color: var(--white); transform: translateY(-1px); }
.btn-pill {
  border-radius: var(--radius-pill);
  padding: 9px 22px;
  font-size: 17px;
}

/* ---------- Type ---------- */
h1, .display { font-family: var(--display); font-weight: 700; color: var(--navy); line-height: 1.08; letter-spacing: -0.02em; }
h1 { font-size: clamp(36px, 5vw, 52px); text-transform: none; }
h2 { font-family: var(--sans); font-weight: 700; color: var(--navy); font-size: clamp(24px, 3.5vw, 32px); line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-family: var(--sans); font-weight: 700; color: var(--navy); font-size: 20px; line-height: 1.3; }
.subhead { font-family: var(--sans); font-weight: 500; font-size: 20px; color: var(--ink); }
.label { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--navy); }
.label-red { color: var(--red); font-size: 20px; }
.rule { display: flex; align-items: center; gap: 10px; width: fit-content; white-space: nowrap; }
.rule::before, .rule::after { content: ""; flex: 0 0 34px; height: 2px; background: var(--red); border-radius: 2px; }
.star-accent { color: var(--red); }

/* ---------- Sections ---------- */
section { padding: 80px 0; }
.section-sand { background: var(--sand); }
.section-navy { background: var(--navy); color: var(--white); }
.section-navy h2, .section-navy h3 { color: var(--white); }

.hero {
  padding: 88px 0 72px;
  background: var(--white);
}
.hero .kicker { margin-bottom: 18px; }
.hero p.lede { font-size: 20px; max-width: 640px; margin: 22px 0 34px; color: rgba(20,36,61,0.7); line-height: 1.6; }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Cards — shadow depth, gradient accent ---------- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid rgba(2,28,63,0.08);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  box-shadow: none;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--navy);
  opacity: 0.12;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(2,28,63,0.12);
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: 15px; line-height: 1.55; color: var(--navy-600); }
.card .card-label { display: block; margin-bottom: 12px; }
.card .more { display: inline-block; margin-top: 14px; font-family: var(--sans); font-weight: 600; color: var(--red); font-size: 14px; letter-spacing: 0.01em; }
.card.card-red::before { background: var(--red); opacity: 0.6; }
.card.disabled {
  opacity: 0.45;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}

/* ---------- Facts / numbers ---------- */
.facts-card {
  background: var(--navy);
  color: var(--white);
  padding: 36px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.facts-card .label { color: var(--red-tint); }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px 32px; margin-top: 22px; }
.fact .num { font-family: var(--sans); font-weight: 800; font-size: 32px; line-height: 1.1; display: block; letter-spacing: -0.02em; }
.fact .desc { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.5; }

.keybox {
  background: var(--sand);
  border-left: 6px solid var(--red);
  border-radius: var(--radius-md);
  padding: 26px 30px;
  margin: 34px 0;
  box-shadow: var(--shadow-sm);
}
.keybox .label { margin-bottom: 12px; display: block; }
.keybox ul { list-style: none; }
.keybox li { padding: 7px 0; border-bottom: 1px solid rgba(2,28,63,.12); font-size: 16px; }
.keybox li:last-child { border-bottom: none; }
.keybox strong { color: var(--navy); }

/* ---------- Tables ---------- */
table.data {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  margin: 26px 0;
  font-size: 16px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
table.data th { background: var(--navy); color: var(--white); text-align: left; padding: 13px 16px; font-weight: 700; }
table.data td { padding: 12px 16px; border-bottom: 1px solid var(--sand); vertical-align: top; }
table.data tr:last-child td { border-bottom: none; }
table.data tr:nth-child(even) td { background: var(--sand); }
/* Wrapper (if present) also clips rounded corners for scrollable tables */
.table-wrap { border-radius: var(--radius-md); overflow: hidden; overflow-x: auto; }

/* ---------- Article ---------- */
.article-body { max-width: 760px; font-size: 17px; }
.article-body h2 { margin: 48px 0 16px; }
.article-body h3 { margin: 34px 0 12px; }
.article-body p { margin-bottom: 18px; line-height: 1.7; }
.article-body ul, .article-body ol { margin: 0 0 18px 26px; }
.article-body li { margin-bottom: 8px; line-height: 1.6; }
.verified {
  display: inline-block;
  background: var(--green);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 16px;
  margin: 18px 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
/* Breadcrumb — separators are " › " text nodes in the HTML; swapping them
   for arrows is an HTML change (batch pass), not a CSS one. */
.breadcrumb { font-family: var(--sans); font-size: 14px; padding: 18px 0 0; color: rgba(20,36,61,0.55); }
.breadcrumb a { color: var(--navy); font-weight: 600; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.note {
  background: var(--white);
  border: none;
  border-left: 6px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin: 24px 0;
  font-size: 16px;
  box-shadow: var(--shadow-sm);
}
.note-alert { border-left-color: var(--red); }

.sources {
  background: var(--sand);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-md);
  padding: 28px;
  margin-top: 48px;
  font-size: 16px;
  box-shadow: none;
}
.sources h3 { margin-bottom: 12px; }
.sources ol { margin-left: 22px; }
.sources li { margin-bottom: 6px; overflow-wrap: anywhere; }
.sources a { color: var(--navy); }

/* ---------- Page TOC (sticky, for long pages) ---------- */
.page-toc {
  position: sticky;
  top: 80px;
  background: var(--sand);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: none;
  font-family: var(--sans);
  font-size: 14px;
}
.page-toc a {
  display: block;
  padding: 8px 0 8px 12px;
  color: var(--ink);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all var(--transition-fast);
}
.page-toc a.active {
  color: var(--navy);
  font-weight: 700;
  border-left-color: var(--red);
}
.page-toc a:hover { color: var(--navy); }

/* ---------- Newsletter (footer band) ---------- */
.newsletter { background: var(--navy); color: var(--white); padding: 64px 0; }
.newsletter h2 { color: var(--white); }
.newsletter p { max-width: 560px; margin: 14px 0 26px; color: rgba(255,255,255,0.7); }
.newsletter form { display: flex; gap: 12px; max-width: 540px; flex-wrap: wrap; }
.newsletter input[type=email] {
  flex: 1 1 280px;
  padding: 13px 20px;
  font-size: 16px;
  border: none;
  font-family: inherit;
  border-radius: var(--radius-pill);
}
.newsletter input[type=email]:focus {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.newsletter .btn { border-radius: var(--radius-pill); }

/* ---------- Mid-page newsletter card ---------- */
.newsletter-inline {
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: var(--radius-md);
  padding: 32px;
  margin: 48px 0;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.newsletter-inline .badge {
  display: inline-block;
  background: rgba(163,39,44,0.08);
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.newsletter-inline h3 { margin-bottom: 8px; }
.newsletter-inline p { max-width: 480px; margin: 0 auto 20px; color: var(--ink); opacity: 0.7; }
.newsletter-inline form {
  display: flex;
  gap: 8px;
  max-width: 440px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.newsletter-inline input[type=email] {
  flex: 1 1 200px;
  padding: 13px 20px;
  font-size: 15px;
  border: 1px solid var(--sand);
  border-radius: var(--radius-pill);
  font-family: inherit;
  transition: border-color var(--transition-fast);
}
.newsletter-inline input[type=email]:focus {
  border-color: var(--navy);
  outline: none;
}
.newsletter-inline .btn { border-radius: var(--radius-pill); }

/* ---------- Picker components — iOS-style segmented pills ----------
   Single source of truth for .pension-seg / .living-seg. Selectors match
   any legacy inline <style> blocks; critical geometry uses higher
   specificity via the doubled-class trick so this file wins. */
.pension-seg, .living-seg,
.pension-seg.pension-seg, .living-seg.living-seg {
  display: inline-flex;
  gap: 4px;
  background: var(--sand);
  border: none;                 /* remove the 2px navy border */
  border-radius: var(--radius-pill);
  padding: 4px;
  flex-wrap: wrap;
  overflow: visible;            /* was hidden */
}
.pension-seg button, .living-seg button,
.pension-seg.pension-seg button, .living-seg.living-seg button {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
  border-radius: var(--radius-pill);
  transition: all var(--transition-fast);
}
.pension-seg button + button, .living-seg button + button,
.pension-seg.pension-seg button + button, .living-seg.living-seg button + button {
  border-left: none;            /* remove the inter-button borders */
}
.pension-seg button.on, .living-seg button.on,
.pension-seg.pension-seg button.on, .living-seg.living-seg button.on {
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-md);
  font-weight: 700;
}
.pension-seg button:hover:not(.on), .living-seg button:hover:not(.on),
.pension-seg.pension-seg button:hover:not(.on), .living-seg.living-seg button:hover:not(.on) {
  background: rgba(255,255,255,0.5);
}
.pension-seg button:active:not(.on), .living-seg button:active:not(.on),
.pension-seg.pension-seg button:active:not(.on), .living-seg.living-seg button:active:not(.on) {
  transform: scale(0.97);
}
/* Flag chips inside pickers — keep legible on the sand track and white pill */
.pension-seg.pension-seg .flag-inline, .living-seg.living-seg .flag-inline {
  box-shadow: 0 0 0 1px rgba(2,28,63,.15);
}
.pension-seg.pension-seg button.on .flag-inline, .living-seg.living-seg button.on .flag-inline {
  box-shadow: 0 0 0 1px rgba(2,28,63,.15);
}

/* ---------- Scroll-triggered animations ---------- */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}
[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children */
.grid [data-animate]:nth-child(2) { transition-delay: 0.1s; }
.grid [data-animate]:nth-child(3) { transition-delay: 0.2s; }
.grid [data-animate]:nth-child(4) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Footer — editorial single-row layout ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.85);
}
.site-footer .wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px 32px 40px;
}
.site-footer .footer-top {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  align-items: baseline;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.site-footer .footer-logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
}
.site-footer .footer-logo .star { color: var(--red-tint); font-size: 18px; }
.site-footer .footer-logo .wordmark {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.14em;
  color: #FFFFFF;
}
.site-footer nav {
  display: flex;
  gap: 24px;
  font-family: var(--sans);
  font-size: 14px;
  flex-wrap: wrap;
}
.site-footer nav a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.site-footer nav a:hover { color: #FFFFFF; }
.site-footer .legal {
  margin: 24px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
  max-width: 820px;
}
/* Legacy support — old 3-column footer structure */
.site-footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; margin-bottom: 28px; }
.site-footer a { color: var(--white); text-decoration: none; transition: color var(--transition-fast); }
.site-footer a:hover { color: rgba(255,255,255,0.7); }
.site-footer .disclaimer { border-top: 1px solid rgba(255,255,255,0.2); padding-top: 20px; font-family: var(--sans); font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.55); }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  /* Tablet */
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 56px 0 48px; }
  .hero p.lede { font-size: 21px; }

  /* Full-screen mobile nav */
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    z-index: 100;
  }
  .main-nav a { font-size: 24px; color: var(--navy); }
  .main-nav a.btn { font-size: 20px; margin-top: 12px; }
  .nav-open .main-nav { display: flex; }
  .nav-open .nav-toggle span { background: var(--navy); }
}

@media (max-width: 640px) {
  /* Mobile */
  section { padding: 48px 0; }
  .hero { padding: 44px 0 36px; }
  h1 { font-size: 30px; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .card { padding: 22px; }
  .facts-card { padding: 24px; }

  /* Picker mobile layout — keep the pill look, no dividing borders */
  .pension-seg, .living-seg {
    padding: 4px;
    gap: 3px;
    justify-content: center;
  }
  .pension-seg button, .living-seg button,
  .pension-seg.pension-seg button, .living-seg.living-seg button {
    flex: 0 1 auto;
    font-size: 15px;
    padding: 8px 14px;
    border-top: none;
  }

  .newsletter form { max-width: 100%; }
  .newsletter-inline { padding: 26px 20px; }
  .page-toc { position: static; }
}

/* SEO byline (added by search/AI-readiness pass) */
.eu-byline{font-family:var(--sans);font-size:14px;color:rgba(20,36,61,0.6);margin:6px 0 18px;font-weight:400;letter-spacing:.01em;}
.eu-byline a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid var(--sand);}
.eu-byline a:hover{border-bottom-color:var(--navy);}

/* ---------- Country flags ---------- */
/* Official 4:3 artwork (flag-icons). Rendered as a clean, bordered chip. */
.flag { display: inline-block; width: 26px; height: 19.5px; border-radius: 3px;
  object-fit: cover; vertical-align: baseline; margin-right: 11px; position: relative; top: 2px;
  box-shadow: 0 0 0 1px rgba(2,28,63,.10), 0 1px 2px rgba(2,28,63,.18); }
h3 .flag { width: 30px; height: 22.5px; top: 3px; margin-right: 13px; }
.flag-inline { display: inline-block; width: 20px; height: 15px; border-radius: 2px;
  object-fit: cover; margin-right: 9px; vertical-align: baseline; position: relative; top: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35); }

/* ============================================================
   v4 COMPONENTS — card-first product layout system
   ============================================================ */

/* ---------- Country hub layout ---------- */
.hub-hero { padding: 24px 0 48px; background: var(--white); border-bottom: 1px solid rgba(2,28,63,0.06); }
.hub-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.hub-identity { }
.hub-identity .country-flag { font-size: 48px; margin-right: 16px; vertical-align: middle; }
.hub-identity .country-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.hub-identity h1 { display: inline; }
.hub-badge { display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 700; border-radius: var(--radius-pill); letter-spacing: 0.02em; }
.hub-badge-hot { background: rgba(163,39,44,0.08); color: var(--red); }
.hub-badge-new { background: rgba(31,138,91,0.08); color: var(--green); }
.hub-subtitle { font-size: 14px; color: var(--navy-500); margin-top: 6px; }
.hub-intro { font-size: 18px; color: var(--navy-700); line-height: 1.6; max-width: 600px; margin-bottom: 28px; }
.hub-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Scorecard ---------- */
.scorecard { background: var(--sand); border-radius: var(--radius-xl); padding: 28px; border: 1px solid rgba(2,28,63,0.06); }
.scorecard-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.scorecard-label { font-size: 14px; font-weight: 500; color: var(--navy-500); }
.scorecard-number { font-size: 48px; font-weight: 800; color: var(--navy); letter-spacing: -0.03em; line-height: 1; }
.scorecard-max { font-size: 18px; color: var(--navy-400); font-weight: 400; }
.score-ring { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.score-ring-inner { width: 64px; height: 64px; border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--navy); }
.pillar-list { display: flex; flex-direction: column; gap: 12px; }
.pillar { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.pillar-name { color: var(--navy-600); }
.pillar-bar-wrap { display: flex; align-items: center; gap: 10px; }
.pillar-bar { width: 96px; height: 6px; background: rgba(2,28,63,0.08); border-radius: 3px; overflow: hidden; }
.pillar-bar-fill { height: 100%; border-radius: 3px; }
.pillar-bar-fill.high { background: var(--emerald); }
.pillar-bar-fill.mid { background: var(--amber); }
.pillar-bar-fill.low { background: var(--rose); }
.pillar-score { font-weight: 600; width: 32px; text-align: right; color: var(--ink); }
.scorecard-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(2,28,63,0.08); display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--navy-500); }
.scorecard-footer a { font-weight: 600; color: var(--navy); text-decoration: none; }
.scorecard-footer a:hover { color: var(--red); }

/* ---------- Bento number cards ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bento-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 1px solid rgba(2,28,63,0.08);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.bento-label { font-size: 14px; font-weight: 500; color: var(--navy-500); margin-bottom: 6px; }
.bento-num { font-size: 30px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; line-height: 1.1; }
.bento-sub { font-size: 13px; color: var(--navy-400); margin-top: 4px; }
.bento-sub.alert { color: var(--rose); font-weight: 500; }

/* ---------- Topic hub cards ---------- */
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.topic-card {
  background: var(--sand);
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 1px solid rgba(2,28,63,0.06);
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.topic-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(163,39,44,0.2);
}
.topic-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--navy-100);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  transition: background var(--transition-normal);
}
.topic-card:hover .topic-icon { background: rgba(163,39,44,0.08); }
.topic-icon svg { width: 24px; height: 24px; color: var(--navy-700); stroke: currentColor; fill: none; }
.topic-card h3 { font-size: 17px; margin-bottom: 8px; transition: color var(--transition-fast); }
.topic-card:hover h3 { color: var(--red); }
.topic-card p { font-size: 14px; color: var(--navy-600); line-height: 1.5; margin-bottom: 0; }
.topic-card .guide-count { display: block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--navy-500); }

/* ---------- Tool containers ---------- */
.tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.tool-box {
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(2,28,63,0.08);
  overflow: hidden;
}
.tool-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(2,28,63,0.06);
  display: flex; align-items: center; justify-content: space-between;
}
.tool-header-left { display: flex; align-items: center; gap: 12px; }
.tool-header-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--navy-100);
  display: flex; align-items: center; justify-content: center;
}
.tool-header-icon svg { width: 20px; height: 20px; color: var(--navy-700); stroke: currentColor; fill: none; }
.tool-header h3 { font-size: 17px; margin-bottom: 2px; }
.tool-header .tool-sub { font-size: 13px; color: var(--navy-500); }
.tool-badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); }
.tool-badge-live { background: var(--emerald-light); color: var(--emerald); }
.tool-body { padding: 24px; }
.tool-body label { display: block; font-size: 14px; font-weight: 500; color: var(--navy-700); margin-bottom: 6px; }
.tool-body input, .tool-body select {
  width: 100%; padding: 12px 16px; font-size: 16px;
  border: 1px solid rgba(2,28,63,0.12); border-radius: var(--radius-md);
  font-family: var(--sans); color: var(--ink);
  background: var(--white);
  transition: border-color var(--transition-fast);
  -webkit-appearance: none; appearance: none;
}
.tool-body input:focus, .tool-body select:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(163,39,44,0.08);
}
.tool-body input[type=number] { font-weight: 600; font-size: 18px; }
.tool-body .field { margin-bottom: 18px; }
.tool-body .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.tool-btn {
  width: 100%; padding: 14px;
  background: var(--navy); color: var(--white);
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  border: none; border-radius: var(--radius-md); cursor: pointer;
  transition: background var(--transition-fast);
}
.tool-btn:hover { background: #0a2f5c; }
.tool-result { padding-top: 18px; margin-top: 18px; border-top: 1px solid rgba(2,28,63,0.06); }
.tool-result.hidden { display: none; }
.tool-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tool-result-card { padding: 16px; border-radius: var(--radius-md); }
.tool-result-card.neutral { background: var(--sand); }
.tool-result-card.positive { background: var(--emerald-light); }
.tool-result-label { font-size: 13px; color: var(--navy-500); margin-bottom: 4px; }
.tool-result-label.positive { color: var(--emerald); }
.tool-result-num { font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
.tool-result-num.positive { color: var(--emerald); }
.tool-result-note { font-size: 13px; color: var(--navy-400); margin-top: 10px; }
.tool-result-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.tool-result-breakdown > div { background: var(--sand); border-radius: var(--radius-sm); padding: 10px; text-align: center; font-size: 13px; }
.tool-result-breakdown .br-label { color: var(--navy-500); margin-bottom: 2px; }
.tool-result-breakdown .br-value { font-weight: 600; color: var(--ink); }

/* ---------- Alert cards (rule changes) ---------- */
.alert-list { display: flex; flex-direction: column; gap: 14px; }
.alert-card {
  display: flex; gap: 18px;
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid;
}
.alert-card.alert-rose { background: var(--rose-light); border-color: rgba(190,18,60,0.15); }
.alert-card.alert-amber { background: var(--amber-light); border-color: rgba(217,119,6,0.15); }
.alert-card.alert-neutral { background: var(--sand); border-color: rgba(2,28,63,0.08); }
.alert-num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.alert-rose .alert-num { background: rgba(190,18,60,0.1); color: var(--rose); }
.alert-amber .alert-num { background: rgba(217,119,6,0.1); color: var(--amber); }
.alert-neutral .alert-num { background: rgba(2,28,63,0.08); color: var(--navy-700); }
.alert-card h3 { font-size: 17px; margin-bottom: 6px; }
.alert-card p { font-size: 14px; color: var(--navy-700); line-height: 1.55; margin-bottom: 0; }
.alert-card .alert-verified { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 500; }
.alert-rose .alert-verified { color: var(--rose); }
.alert-amber .alert-verified { color: var(--amber); }
.alert-neutral .alert-verified { color: var(--navy-500); }

/* ---------- Checklist ---------- */
.checklist-box {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 32px;
  border: 1px solid rgba(2,28,63,0.08);
}
.checklist-box h3 { font-size: 20px; margin-bottom: 6px; }
.checklist-box > p { font-size: 14px; color: var(--navy-600); margin-bottom: 20px; }
.checklist-items { display: flex; flex-direction: column; gap: 4px; }
.checklist-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--radius-md);
  cursor: pointer; transition: background var(--transition-fast);
}
.checklist-item:hover { background: var(--sand); }
.checklist-item input[type=checkbox] {
  width: 20px; height: 20px;
  border-radius: 4px; border: 2px solid rgba(2,28,63,0.2);
  accent-color: var(--red);
  flex-shrink: 0; cursor: pointer;
}
.checklist-item span { font-size: 15px; color: var(--ink); }
.checklist-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; }
.checklist-link:hover { color: var(--red); }
.checklist-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }

/* ---------- Specialist card ---------- */
.specialist-box {
  background: var(--navy);
  border-radius: var(--radius-xl);
  padding: 32px;
  color: var(--white);
}
.specialist-box h3 { font-size: 20px; color: var(--white); margin-bottom: 8px; }
.specialist-box > p { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 22px; }
.specialist-box input, .specialist-box select {
  width: 100%; padding: 12px 16px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md); color: var(--white); font-family: var(--sans); font-size: 15px;
  margin-bottom: 12px;
}
.specialist-box input::placeholder { color: rgba(255,255,255,0.4); }
.specialist-box option { color: var(--ink); background: var(--white); }
.specialist-box input:focus, .specialist-box select:focus { outline: none; border-color: var(--red); }
.specialist-box .tool-btn { background: var(--red); }
.specialist-box .tool-btn:hover { background: #8a2024; }
.specialist-box .fine-print { font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 14px; }

/* ---------- Visa checker banner ---------- */
.visa-banner {
  background: var(--navy); border-radius: var(--radius-xl);
  padding: 32px; margin-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  color: var(--white);
}
.visa-banner h3 { font-size: 20px; color: var(--white); margin-bottom: 8px; }
.visa-banner p { font-size: 14px; color: rgba(255,255,255,0.6); max-width: 480px; }
.visa-banner .btn { flex-shrink: 0; }

/* ---------- Side-by-side layout (checklist + specialist) ---------- */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* ---------- Section headers ---------- */
.section-header { margin-bottom: 32px; }
.section-header h2 { margin-bottom: 0; }
.section-header p { font-size: 15px; color: var(--navy-600); margin-top: 8px; }
.section-header-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.section-header-row .meta { font-size: 14px; color: var(--navy-500); }

/* ---------- Newsletter v4 (white bg, centered) ---------- */
.newsletter-v4 { text-align: center; padding: 80px 0; border-top: 1px solid rgba(2,28,63,0.06); }
.newsletter-v4 h2 { margin-bottom: 10px; }
.newsletter-v4 > p { font-size: 15px; color: var(--navy-600); margin-bottom: 28px; }
.newsletter-v4 form {
  display: flex; gap: 10px; max-width: 440px; margin: 0 auto; flex-wrap: wrap;
}
.newsletter-v4 input[type=email] {
  flex: 1 1 220px; padding: 14px 20px; font-size: 15px;
  border: 1px solid rgba(2,28,63,0.12); border-radius: var(--radius-pill);
  font-family: var(--sans);
}
.newsletter-v4 input[type=email]:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(163,39,44,0.08);
}
.newsletter-v4 .btn { border-radius: var(--radius-pill); }
.newsletter-v4 .fine-print { font-size: 13px; color: var(--navy-400); margin-top: 14px; }

/* ---------- v4 responsive ---------- */
@media (max-width: 1024px) {
  .hub-grid { grid-template-columns: 1fr; }
  .scorecard { max-width: 440px; }
}
@media (max-width: 768px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .topic-grid { grid-template-columns: repeat(2, 1fr); }
  .tools-grid { grid-template-columns: 1fr; }
  .split-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bento-card { padding: 18px; }
  .bento-num { font-size: 24px; }
  .topic-grid { grid-template-columns: 1fr; }
  .hub-actions { flex-direction: column; }
  .hub-actions .btn { text-align: center; }
  .tool-body .field-row { grid-template-columns: 1fr; }
  .visa-banner { flex-direction: column; text-align: center; }
  .section-header-row { flex-direction: column; }
}



/* ============================================================
   POLICY TICKER — sitewide rule-change ribbon
   Sits directly under the sticky header on every page.
   Data: /assets/updates.json · Behaviour: main.js section 5
   ============================================================ */
.policy-ticker {
  --pt-green: #7FD1A8;
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--red);
  position: relative;
  z-index: 90;
}
.policy-ticker[hidden] { display: none; }
.policy-ticker .wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------- Kicker ---------- */
.pt-kicker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-tint);
  text-decoration: none;
  white-space: nowrap;
}
.pt-kicker:hover { color: #fff; }
.pt-kicker:focus-visible { outline: 2px solid var(--red-tint); outline-offset: 4px; border-radius: 2px; }
.pt-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(163,39,44,0.7);
  animation: pt-pulse 2.4s ease-out infinite;
}
@keyframes pt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(163,39,44,0.75); }
  70%  { box-shadow: 0 0 0 7px rgba(163,39,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(163,39,44,0); }
}

/* ---------- Scrolling viewport ---------- */
.pt-viewport {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  min-width: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.pt-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation-name: pt-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pt-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.policy-ticker.is-paused .pt-track { animation-play-state: paused; }

/* ---------- Items ---------- */
.pt-item {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 15px 26px;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.3;
  color: #fff;
  text-decoration: none;
  border-left: 1px solid rgba(255,255,255,0.16);
}
.pt-item:hover .pt-head { text-decoration: underline; text-underline-offset: 3px; }
.pt-item:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 4px; }
.pt-date {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255,255,255,0.62);
  white-space: nowrap;
}
.pt-dir { font-size: 12px; line-height: 1; transform: translateY(-1px); }
.pt-dir.up   { color: var(--red-tint); }
.pt-dir.down { color: var(--pt-green); }
.pt-dir.flat { color: rgba(255,255,255,0.5); }
.pt-head { font-weight: 500; }
.pt-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
}
.pt-tag.proposal { border-color: rgba(228,183,180,0.55); color: var(--red-tint); }
.pt-tag.deadline { border-color: rgba(127,209,168,0.55); color: var(--pt-green); }

/* ---------- Controls ---------- */
.pt-toggle {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.pt-toggle:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); }
.pt-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pt-toggle .pt-icon { display: block; width: 12px; height: 13px; }
.pt-toggle .pt-icon-play { display: none; }
.policy-ticker.is-paused .pt-toggle .pt-icon-play { display: block; }
.policy-ticker.is-paused .pt-toggle .pt-icon-pause { display: none; }

.pt-all {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 1px;
}
.pt-all:hover { color: #fff; border-bottom-color: #fff; }
.pt-all:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .pt-all { display: none; }
  .pt-kicker span:not(.pt-live) { display: none; }
}
@media (max-width: 640px) {
  .policy-ticker .wrap { gap: 10px; min-height: 48px; }
  .pt-item { font-size: 14.5px; padding: 13px 18px; gap: 8px; }
  .pt-tag { display: none; }
}

/* ---------- Reduced motion: no auto-scroll, swipe instead ---------- */
@media (prefers-reduced-motion: reduce) {
  .pt-track { animation: none !important; }
  .pt-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .pt-toggle { display: none; }
  .pt-live { animation: none; }
}

/* ============================================================
   UPDATES HUB — /updates/
   ============================================================ */
.up-hero { padding: 56px 0 34px; border-bottom: 1px solid rgba(2,28,63,0.08); }
.up-hero h1 { margin: 10px 0 14px; }
.up-hero p.lede { font-size: 18px; line-height: 1.6; color: var(--navy-700); max-width: 62ch; }
.up-meta { margin-top: 18px; font-size: 13.5px; color: var(--navy-500); }

.up-filters { padding: 24px 0 8px; }
.up-filter-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.up-filter-label {
  flex: 0 0 84px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy-500);
}
.up-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
.up-chip {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  padding: 9px 15px; min-height: 40px;
  display: inline-flex; align-items: center;
  border: 1px solid rgba(2,28,63,0.14);
  background: #fff; color: var(--ink);
  border-radius: 999px; cursor: pointer;
  transition: all var(--transition-fast);
}
.up-chip:hover { border-color: var(--navy); }
.up-chip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.up-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.up-chip .up-n { opacity: .55; margin-left: 7px; font-size: 12.5px; font-variant-numeric: tabular-nums; }

.up-count { padding: 18px 0 6px; font-size: 14px; color: var(--navy-600); }
.up-count strong { color: var(--ink); }

.up-list { padding: 8px 0 64px; }
.up-year {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  color: var(--navy-400); letter-spacing: .04em;
  padding: 26px 0 10px; border-bottom: 1px solid rgba(2,28,63,0.08);
}
.up-row {
  display: grid;
  grid-template-columns: 116px 1fr 190px;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(2,28,63,0.07);
  scroll-margin-top: 120px;
}
.up-row:target { background: #FFFBEA; box-shadow: -14px 0 0 #FFFBEA, 14px 0 0 #FFFBEA; }
/* display:grid/block would otherwise beat the UA [hidden] rule when filtering */
.up-row[hidden], .up-year[hidden], .up-empty[hidden] { display: none !important; }
.up-when { font-size: 13.5px; font-weight: 600; color: var(--navy-500); white-space: nowrap; padding-top: 2px; }
.up-body h3 { font-family: var(--sans); font-size: 17.5px; font-weight: 600; line-height: 1.4; margin: 0 0 8px; }
.up-body p { font-size: 15px; line-height: 1.62; color: var(--navy-700); margin: 0 0 10px; max-width: 68ch; }
.up-src { font-size: 13px; color: var(--navy-500); }
.up-src a { color: var(--navy-600); }
.up-aside { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding-top: 2px; }
.up-pill {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.up-pill.law      { background: rgba(2,28,63,0.07); color: var(--navy-800); }
.up-pill.proposal { background: rgba(217,119,6,0.12); color: #8a4b00; }
.up-pill.deadline { background: rgba(163,39,44,0.10); color: var(--red); }
.up-where { font-size: 13px; font-weight: 600; color: var(--navy-600); }
.up-where a { color: inherit; }
.up-dir { font-size: 13px; color: var(--navy-500); display: inline-flex; align-items: center; gap: 6px; }
.up-dir .g { font-size: 11px; }
.up-dir.up .g   { color: var(--red); }
.up-dir.down .g { color: var(--green); }
.up-dir.flat .g { color: var(--navy-400); }
.up-empty { padding: 48px 0; font-size: 16px; color: var(--navy-600); }

@media (max-width: 860px) {
  .up-row { grid-template-columns: 1fr; gap: 10px; }
  .up-aside { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
  .up-filter-label { flex-basis: 100%; }
}

/* ---- Partner units (Currencies Direct affiliate, Sep 2026) ---- */
.partner-unit { max-width: 720px; margin: 40px auto; padding: 14px; background: var(--cream, #F8F4EC); border: 1px solid var(--sand, #E7DCC8); border-radius: 6px; text-align: center; }
.partner-unit .partner-label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(20,36,61,.55); margin-bottom: 10px; }
.partner-unit a { display: block; }
.partner-unit img { display: block; width: 100%; height: auto; max-width: 720px; margin: 0 auto; }
.partner-unit.partner-unit-300 { max-width: 300px; }
.partner-unit.partner-unit-300 img { max-width: 300px; }
.partner-unit .partner-disclosure { display: block; font-size: 13px; color: rgba(20,36,61,.6); margin-top: 10px; line-height: 1.4; }
.hub-grid .partner-unit { max-width: 300px; margin: 28px 0 0; }
body.homepage .partner-unit { background: transparent; border-color: rgba(20,36,61,.12); }
.partner-section { padding: 0 0 12px; }
.hub-grid .partner-unit { grid-column: 2; }
@media (max-width: 1024px) { .hub-grid .partner-unit { grid-column: auto; max-width: 300px; } }
body.homepage .hp-partner { padding: 24px 0 8px; }

/* ==========================================================================
   Signup confirmation + preferences (added 16 Sep 2026, external audit)
   ========================================================================== */
.nl-success { max-width: 560px; margin: 0 auto; text-align: left; padding: 22px 24px; border: 1px solid rgba(2,28,63,0.12); border-radius: 12px; background: #fff; color: var(--ink, #14243D); }
.newsletter-v4 .nl-success { margin: 0 auto; }
.newsletter .nl-success { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); color: #fff; }
.nl-success-title { font-family: var(--display, var(--hp-serif, Georgia, serif)); font-size: 22px; font-weight: 700; margin: 0 0 8px; line-height: 1.2; }
.nl-success-body { font-size: 15px; line-height: 1.55; margin: 0; }
.nl-success-body a, .nl-pref summary { color: var(--red, #A3272C); font-weight: 600; }
.newsletter .nl-success-body a, .newsletter .nl-pref summary { color: #fff; text-decoration: underline; }
.nl-pref { margin-top: 14px; font-size: 14px; }
.nl-pref summary { cursor: pointer; padding: 6px 0; }
.nl-pref-form { display: block !important; max-width: none !important; margin-top: 10px; }
.nl-pref-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 10px 0 6px; opacity: .8; }
.nl-pref-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 12px; }
.nl-pref-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 5px 9px; border: 1px solid rgba(2,28,63,0.18); border-radius: 999px; cursor: pointer; min-height: 32px; }
.nl-pref-chip input { width: 15px; height: 15px; margin: 0; }
.nl-pref-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.nl-pref-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; flex: 1; min-width: 180px; }
.nl-pref-row select { padding: 9px 10px; border: 1px solid rgba(2,28,63,0.2); border-radius: 8px; font: inherit; font-size: 14px; min-height: 44px; background: #fff; color: var(--ink, #14243D); }
.nl-pref-fine { font-size: 12px; opacity: .7; margin: 8px 0 0; }
.nl-error { color: #A3272C; font-size: 13px; margin: 8px 0 0; flex-basis: 100%; }
.newsletter .nl-error { color: #F3B8B5; }
input[type=email][aria-invalid="true"] { outline: 2px solid #A3272C; }
.nl-sample-link { font-size: 13px; }

/* Tool result offer: "Email my shortlist" */
.tl-offer { margin-top: 28px; padding: 24px; border: 1px solid rgba(2,28,63,0.14); border-radius: 12px; background: #fff; }
.tl-offer h3 { font-family: var(--display, Georgia, serif); font-size: 1.35rem; margin: 0 0 6px; color: var(--ink, #14243D); }
.tl-offer p { font-size: .93rem; color: #526178; margin: 0 0 12px; line-height: 1.5; }
.tl-offer form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.tl-offer input[type=email] { flex: 1; min-width: 220px; padding: .75rem 1rem; border: 1.5px solid #d0d4da; border-radius: 10px; font-size: .95rem; min-height: 48px; }
.tl-offer button { padding: .75rem 1.3rem; background: var(--red, #A3272C); color: #fff; font-weight: 600; border: none; border-radius: 10px; cursor: pointer; min-height: 48px; font-size: .95rem; }
.tl-offer .tl-consent { flex-basis: 100%; display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; color: #526178; line-height: 1.45; margin-top: 4px; }
.tl-offer .tl-consent input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.tl-offer .tl-offer-fine { font-size: .78rem; color: #627d98; margin: 10px 0 0; flex-basis: 100%; }
.footer-tagline { display: block; font-size: 13px; color: rgba(255,255,255,0.55); margin: 6px 0 0 2px; font-family: var(--sans, sans-serif); }
.newsletter .fine-print { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 12px; }
.newsletter .fine-print a, .newsletter-v4 .fine-print a, .hp-form-micro a { color: inherit; text-decoration: underline; }
@media print { .site-header, .policy-ticker, .tl-form, .tl-offer, .gv-cta, .site-footer, .cd-wrap, .nl-success { display: none !important; } .tl-results { display: block !important; } }


/* ============================================================
   MOBILE FIXES — 23 Sep 2026 (mobile triage)
   1. Hamburger menu: the header's backdrop-filter made it the
      containing block for the position:fixed menu, so the
      "full-screen" menu was trapped inside the header strip and
      laid out sideways. While the menu is open we drop the blur
      so the menu covers the viewport, stack links vertically,
      let the list scroll on short phones, and lock the page.
   ============================================================ */
@media (max-width: 768px) {
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header,
  html body.homepage.nav-open .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #FFFFFF;
  }
  .site-header .wrap { flex-wrap: nowrap; }
  .site-header .logo { position: relative; z-index: 101; }

  .nav-toggle {
    width: 44px;
    height: 44px;
    margin-right: -8px;
    flex: 0 0 auto;
  }
  .nav-toggle span { width: 28px; left: 8px; }
  .nav-toggle span:nth-child(1) { top: 13px; }
  .nav-toggle span:nth-child(2) { top: 21px; }
  .nav-toggle span:nth-child(3) { top: 29px; }
  .nav-open .nav-toggle span:nth-child(1),
  .nav-open .nav-toggle span:nth-child(3) { top: 21px; }

  .main-nav,
  html body.homepage .main-nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 84px 24px 32px;
    background: #FFFFFF;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 100;
  }
  .nav-open .main-nav,
  html body.homepage.nav-open .main-nav { display: flex; }

  .main-nav a,
  html body.homepage .main-nav a {
    display: block;
    font-size: 22px;
    line-height: 1.3;
    padding: 14px 4px;
    min-height: 44px;
    border-bottom: 1px solid rgba(2,28,63,0.08);
    color: var(--navy);
  }
  .main-nav a.btn-cta,
  html body.homepage .main-nav a.btn-cta {
    margin-top: 24px;
    padding: 14px 18px;
    font-size: 18px;
    text-align: center;
    border-bottom: none;
    border-radius: 10px;
    color: #FFFFFF;
  }
}

/* 2. Small phones (<=400px): the letter-spaced wordmark plus the menu
      button were wider than a 320px screen, pushing the button off
      the edge and making the whole page scroll sideways. */
@media (max-width: 400px) {
  .site-header .wrap, html body.homepage .site-header .wrap { padding-left: 16px; padding-right: 16px; gap: 12px; }
  .logo, html body.homepage .logo { gap: 8px; min-width: 0; }
  .logo .star, html body.homepage .logo .star { font-size: 18px; }
  .logo .wordmark, html body.homepage .logo .wordmark { font-size: 16px; letter-spacing: .1em; }
  .logo .tag, html body.homepage .logo .tag { font-size: 16px; letter-spacing: .16em; }
}

/* 3. Content that ran off the right edge on phones. */
@media (max-width: 768px) {
  /* Data tables: swipe sideways inside the table, not the whole page. */
  table.data {
    display: block;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.data th, table.data td { min-width: 110px; }
  /* Kicker labels ("PORTUGAL · COST OF LIVING") may wrap. */
  .rule { white-space: normal; max-width: 100%; }
  .rule::before, .rule::after { flex-basis: 20px; }
  /* Fact cards: let long figures shrink instead of widening the grid. */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-card { min-width: 0; overflow-wrap: anywhere; }
  img, video, iframe { max-width: 100%; }
}
@media (max-width: 400px) {
  .bento-num { font-size: 21px; }
}

/* 4. Tap targets: the "where are you from" toggles (US / Canada / UK...)
      were ~36px tall; the audience needs 44px. */
.pension-seg button, .living-seg button,
.pension-seg.pension-seg button, .living-seg.living-seg button { min-height: 44px; }

/* 5. Tools and homepage pieces that were wider than small phones. */
@media (max-width: 560px) {
  .is-row.is-row { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; }
  .is-row .is-bar-wrap { grid-column: 1 / -1; grid-row: 2; }
  .is-row .is-detail { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  body .hp-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .tools-grid, .hc-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .fx-field { min-width: 0; max-width: 100%; }
  .fx-field input, .fx-field select { max-width: 100%; min-width: 0; }
  .control-group { min-width: 0; max-width: 100%; }
  .control-group .seg { display: flex; flex-wrap: wrap; }
  label > span, .check-item span { overflow-wrap: anywhere; }
  body { overflow-wrap: break-word; }
}
@media (max-width: 400px) {
  .sticky-bar .wrap { gap: 8px; }
  .sticky-bar .hp-form { flex: 1; min-width: 0; }
  .sticky-bar .hp-form input[type="email"] { width: auto; min-width: 0; }
  .sticky-bar .hp-form button { padding: 10px 12px; }
}

/* 6. Short phones: fit the whole menu, including the CTA, on screen. */
@media (max-width: 768px) and (max-height: 700px) {
  .main-nav, html body.homepage .main-nav { padding-top: 76px; }
  .main-nav a, html body.homepage .main-nav a { padding-top: 11px; padding-bottom: 11px; font-size: 20px; }
  .main-nav a.btn-cta, html body.homepage .main-nav a.btn-cta { margin-top: 16px; }
}

/* 7. Lifestyle cards: the region label and "Open channel on YouTube"
      link were squeezed and clipped at the card edge on phones. */
@media (max-width: 480px) {
  .cr-foot { flex-wrap: wrap; row-gap: 6px; }
  .cr-go { white-space: normal; }
}

/* 8. Small-phone buttons that refused to wrap. */
@media (max-width: 400px) {
  .wrap > div[style*="flex:0 0 auto"] { flex: 0 1 auto !important; min-width: 0; }
  .btn, .cd-btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* 9. Plain text links (23 Sep 2026): there was no site-wide link colour,
      so body-copy links showed browser blue/purple. Brand navy, underlined,
      red on hover. Zero-specificity :where() so every existing component
      link style (nav, footer, breadcrumb, buttons, ticker) still wins. */
:where(a:not([class])) { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(a:not([class])):visited { color: var(--navy); }
:where(a:not([class])):hover { color: var(--red); }

/* 10. Homepage navy sign-up band: homepage.css colours every link navy,
       which made "Read a sample issue" invisible on the navy band. */
html body.homepage .hp-mid-capture a:not(.btn):not(.btn-cta) { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.55); }
html body.homepage .hp-mid-capture a:not(.btn):not(.btn-cta):hover { color: var(--red-tint, #E4B7B4); }