/*
 * The 2026 Retirement Outlook on retire.do (/reports/2026 and /reports/2026/{country}).
 * Generated from the published report pages (their stylesheet, scoped to .ro): no global rules,
 * no web fonts beyond the site's own (base.css), light theme only. On the site the header and
 * footer carry the logo, so the report's own logo lines are hidden.
 */
/* Retirement Wealth Outlook. Brand option C "Blend": navy ink, lagoon teal, coral, sand.
   Chart colours were checked with the dataviz palette validator (ordinal ramps and the
   growing/shrinking pair) against the figure surface in each theme. The generation ramp
   (--g1..--g4) keeps every segment at 3:1 or more against the card (light: 3.19:1 at the
   lightest step; dark: 4.17:1 at the darkest; adjacent steps 1.5:1 or more). The 65+ pair (--c65a/--c65b) is the one the
   invitation's chart should use too. */
.ro {
  color-scheme: light;
  --bg: #fffaf3;
  --band: linear-gradient(155deg, #e3f6f3 0%, #f7efe3 55%, #fff2d4 100%);
  --card: #ffffff;
  --raise: #fbf1e4;
  --ink: #172f4f;
  --soft: #455a75;
  --line: #ead9c2;
  --line-soft: #f3e8d9;
  --accent: #055c62;
  --uline: #8fd5cd;
  --eyebrow: #bf3b23;
  --fig: #055c62;
  --fact: #172f4f;
  --target: #fff2d4;
  --note-bg: #fff2d4; --note-ink: #3f2c00; --note-line: #e8a93a;
  --logo-plate: transparent; --logo-pad-b: 0px; --logo-pad-i: 0px;
  --photo-shadow: 0 30px 50px -34px rgb(23 47 79 / .6);
  --shadow: 0 1px 2px rgb(23 47 79 / .06), 0 22px 44px -30px rgb(23 47 79 / .45);
  --axis: #c9b9a3;
  --c65a: #22b0aa; --c65b: #055c62; --on-a: #172f4f; --on-b: #ffffff;
  --g1: #08353b; --g2: #0d5a5a; --g3: #187f7a; --g4: #3a9f98;
  --pos: #00918a; --neg: #d9532f;
  --hi: #055c62; --mute: #9fb0b6; --track: #f1e6d6;
  --btn: #ff8a66; --btn-hover: #ff9b7c; --on-btn: #172f4f; --btn-lip: #e2623f;
  --f-display: "Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-text: "Literata", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* ============================================================ frame */
.ro {
  padding-block: 28px 72px;
  padding-inline: 24px;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.65 var(--f-text);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
.ro *, .ro *::before, .ro *::after { box-sizing: border-box; }
.ro :where(h1, h2, h3, p, ul, ol, li, figure, table, caption) { margin: 0; padding: 0; }
.ro :where(ul, ol) { list-style: none; }
.ro :where(h1, h2, h3) { font-family: var(--f-display); text-wrap: balance; color: var(--ink); }
.ro :where(p, li) { text-wrap: pretty; }
.ro img { max-inline-size: 100%; }
.ro a { color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .22em; text-decoration-color: var(--uline); }
.ro a:hover { text-decoration-color: currentColor; }
.ro :is(a, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.ro b { font-weight: 700; }
.ro-wrap { max-inline-size: 1000px; margin-inline: auto; }
.ro-main { display: block; }

/* ============================================================ title band */
.ro-band {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 32px 40px; align-items: center;
  padding: 36px 40px 40px; border-radius: 28px; background: var(--band);
}
.ro-band-text { display: grid; justify-items: start; }
.ro-logo-plate {
  display: inline-block; padding-block: var(--logo-pad-b); padding-inline: var(--logo-pad-i);
  border-radius: 18px; background: var(--logo-plate);
}
/* the logo file has empty space above and below the lettering: absorbed so the plate stays snug */
.ro-logo { display: block; inline-size: 190px; block-size: auto; margin-block: -12px -6px; }
.ro-eyebrow { margin-block-start: 22px; font: 800 15px/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow); }
.ro-title { margin-block-start: 8px; font-size: clamp(38px, 28px + 3vw, 60px); font-weight: 900; line-height: 1.02; letter-spacing: -.025em; }
.ro-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-block-start: 16px; }
.ro-stat b { font: 900 clamp(30px, 24px + 1.5vw, 40px)/1.05 var(--f-display); letter-spacing: -.02em; color: var(--fig); }
.ro-stat span { font: 700 16px/1.4 var(--f-display); color: var(--soft); }
.ro-nw { white-space: nowrap; }
.ro-deck { margin-block-start: 14px; max-inline-size: 52ch; font-size: 20px; line-height: 1.55; }
.ro-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 22px; }
.ro-meta li {
  padding-block: 4px; padding-inline: 12px; border-radius: 999px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line); font: 700 15px/1.4 var(--f-display); color: var(--soft);
}
.ro-band-art {
  overflow: hidden; justify-self: end; inline-size: 100%; max-inline-size: 340px; aspect-ratio: 4 / 5;
  border-radius: 50% 50% 26px 26px / 34% 34% 26px 26px; box-shadow: var(--photo-shadow);
}
.ro-band-art img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 44% 50%; }

/* ============================================================ key takeaways + contents */
.ro-take { margin-block-start: 28px; padding: 30px 36px 18px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); }
.ro-take-h { font: 900 26px/1.2 var(--f-display); letter-spacing: -.01em; }
.ro-take-list { display: grid; margin-block-start: 8px; }
.ro-take-list > li {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 4px 24px; align-items: baseline;
  padding-block: 18px; border-block-start: 1px solid var(--line-soft);
}
.ro-take-list > li:first-child { border-block-start: 0; }
.ro-take-fig { font: 900 30px/1.1 var(--f-display); letter-spacing: -.015em; color: var(--fig); }
.ro-take-list h3 { font-size: 20px; font-weight: 800; line-height: 1.3; }
.ro-take-list p { margin-block-start: 4px; font-size: 17px; line-height: 1.6; max-inline-size: 68ch; }

.ro-toc { margin-block-start: 28px; padding-block: 20px; border-block: 1px solid var(--line); }
.ro-toc-h { font: 800 14px/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.ro-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 32px; margin-block-start: 10px; counter-reset: toc; }
.ro-toc li { counter-increment: toc; display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); align-items: center; }
.ro-toc li::before { content: counter(toc); font: 800 15px/1 var(--f-display); color: var(--soft); font-variant-numeric: tabular-nums; }
.ro-toc a { display: inline-flex; align-items: center; min-block-size: 40px; font: 700 17px/1.3 var(--f-display); }

/* ============================================================ sections */
.ro-sec { margin-block-start: 72px; scroll-margin-block-start: 20px; }
.ro-sec > * + * { margin-block-start: 18px; }
.ro-h2 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(28px, 22px + 1.4vw, 36px); font-weight: 900; line-height: 1.12; letter-spacing: -.018em; }
.ro-n {
  flex: none; display: inline-grid; place-items: center; inline-size: 1.35em; block-size: 1.35em; border-radius: 50%;
  background: var(--raise); box-shadow: inset 0 0 0 2px var(--uline); font-size: .62em; font-weight: 900; color: var(--accent);
  transform: translateY(-.12em);
}
.ro-sec > .ro-h3 { margin-block-start: 40px; }
.ro-h3 { font-size: 22px; font-weight: 800; line-height: 1.25; }
.ro-sec > p, .ro-sec > .ro-list { max-inline-size: 68ch; }
.ro-lede { font-size: 20px; line-height: 1.6; }
.ro-small { font-size: 16px; line-height: 1.55; color: var(--soft); }
.ro-close { padding-block-start: 8px; }

.ro-list { display: grid; gap: 10px; }
.ro-list > li { position: relative; padding-inline-start: 22px; }
.ro-list > li::before {
  content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .66em;
  inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--c65a);
}
.ro-list b { font-family: var(--f-display); font-weight: 800; }

/* stat tiles */
.ro-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.ro-tile { display: grid; align-content: start; gap: 4px; padding: 18px 20px 20px; border-radius: 18px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--line-soft); }
.ro-tile-k { font: 800 13px/1.35 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.ro-tile-fig { font: 900 clamp(30px, 26px + 1vw, 38px)/1.08 var(--f-display); letter-spacing: -.015em; color: var(--fig); }
.ro-tile-l { font-size: 16px; line-height: 1.5; }

/* read-with-care note */
.ro-note { padding: 16px 20px; border-radius: 16px; background: var(--note-bg); color: var(--note-ink); box-shadow: inset 0 0 0 1.5px var(--note-line); font-size: 17px; }
.ro-note b { font-family: var(--f-display); font-weight: 900; }

/* DR resident-market facts */
.ro-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ro-facts li { display: grid; align-content: start; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; line-height: 1.5; }
.ro-fact-fig { font: 900 34px/1.05 var(--f-display); letter-spacing: -.015em; color: var(--fact); }

/* what it means */
.ro-points { display: grid; border-block-start: 1px solid var(--line); }
.ro-points > li { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 6px 28px; padding-block: 18px; border-block-end: 1px solid var(--line); }
.ro-points h3 { font-size: 19px; font-weight: 800; line-height: 1.3; }
.ro-points p, .ro-points ul { max-inline-size: 62ch; }
.ro-points ul { display: grid; gap: 6px; }
.ro-points ul b { font-family: var(--f-display); font-weight: 800; }

/* ============================================================ tables */
.ro-tw { container: tw / inline-size; overflow-x: auto; }
.ro-t { inline-size: 100%; border-collapse: collapse; font: 500 16px/1.45 var(--f-display); font-variant-numeric: tabular-nums; }
.ro-t caption { padding-block-end: 10px; text-align: start; font: 800 16px/1.35 var(--f-display); color: var(--ink); }
.ro-t thead th {
  padding-block: 8px; padding-inline: 10px; text-align: start; vertical-align: bottom;
  font: 800 13px/1.3 var(--f-display); letter-spacing: .05em; text-transform: uppercase; color: var(--soft);
  border-block-end: 2px solid var(--line);
}
.ro-t tbody :is(th, td), .ro-t tfoot :is(th, td) { padding-block: 11px; padding-inline: 10px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--line-soft); }
.ro-t tbody th { font-weight: 800; }
.ro-t b { font-weight: 800; }
.ro-t tfoot :is(th, td) { border-block-start: 2px solid var(--line); border-block-end: 0; font-weight: 800; }
.ro-t--num :is(thead th, td):not(:first-child) { text-align: end; }
.ro-t--est th[scope="row"] { inline-size: 24%; }
.ro-t--biz th[scope="row"] { inline-size: 12%; }
.ro-t--biz td:last-child { inline-size: 24%; color: var(--soft); }
.ro-t--ind th[scope="row"] { inline-size: 38%; }

/* phones: each row of a wide table becomes a small stacked card, so nothing scrolls sideways */
@container tw (max-width: 600px) {
  .ro-t:not(.ro-t--num) thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ro-t:not(.ro-t--num), .ro-t:not(.ro-t--num) :is(tbody, tr, th, td) { display: block; inline-size: auto; }
  .ro-t:not(.ro-t--num) caption { display: block; }
  .ro-t:not(.ro-t--num) tr { padding-block: 12px; border-block-end: 1px solid var(--line); }
  .ro-t:not(.ro-t--num) tbody :is(th, td) { padding: 0; border: 0; }
  .ro-t:not(.ro-t--num) tbody th { font-size: 17px; }
  .ro-t:not(.ro-t--num) td { margin-block-start: 6px; }
  .ro-t:not(.ro-t--num) td::before {
    content: attr(data-label); display: block; font: 800 12px/1.3 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--soft);
  }
  .ro-t--biz td:last-child { color: var(--ink); }
}

/* ============================================================ figures and charts */
.ro-fig {
  container: fig / inline-size;
  display: grid; gap: 12px; padding: 24px 26px 20px; border-radius: 22px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
}
.ro-fig-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 28px; align-items: start; }
.ro-fig-t { font-size: 20px; font-weight: 800; line-height: 1.3; }
.ro-fig-sub { margin-block-start: 2px; font: 600 16px/1.45 var(--f-display); color: var(--soft); }
.ro-fig-head .ro-key { margin-block-start: 12px; }
.ro-callout { display: grid; max-inline-size: 15rem; padding: 12px 16px; border-radius: 16px; background: var(--raise); }
.ro-callout b { font: 900 32px/1.05 var(--f-display); letter-spacing: -.015em; color: var(--fig); }
.ro-callout span { margin-block-start: 4px; font: 600 15px/1.4 var(--f-display); color: var(--soft); }
.ro-key { display: flex; flex-wrap: wrap; gap: 6px 20px; font: 700 15px/1.3 var(--f-display); color: var(--ink); }
.ro-key li { display: inline-flex; align-items: center; gap: 8px; }
.k { flex: none; display: inline-block; inline-size: 14px; block-size: 14px; border-radius: 4px; }
.k-a { background: var(--c65a); } .k-b { background: var(--c65b); }
.k-pos { background: var(--pos); } .k-neg { background: var(--neg); }
.k-g1 { background: var(--g1); } .k-g2 { background: var(--g2); } .k-g3 { background: var(--g3); } .k-g4 { background: var(--g4); }

.ch { display: grid; }
.ch-row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); column-gap: 14px; align-items: center; }
.ch-lab { font: 700 16px/1.25 var(--f-display); text-align: end; color: var(--ink); }
.ch-row--dr .ch-lab { font-weight: 900; }
.ch-svg { display: block; overflow: visible; }
.ch-base { stroke: var(--axis); stroke-width: 1; }
.m-a { fill: var(--c65a); } .m-b { fill: var(--c65b); }
.m-pos { fill: var(--pos); } .m-neg { fill: var(--neg); }
.m-hi { fill: var(--hi); } .m-mute { fill: var(--mute); } .ch-track { fill: var(--track); }
.m-g1 { fill: var(--g1); } .m-g2 { fill: var(--g2); } .m-g3 { fill: var(--g3); } .m-g4 { fill: var(--g4); }
.ch-gap { fill: var(--card); }
.ch-v { font: 700 15px/1 var(--f-display); font-variant-numeric: tabular-nums; fill: var(--ink); }
.ch-v--a { font-weight: 600; fill: var(--soft); }
.ch-row--dr .ch-v { font-weight: 900; }
.ch-in { font: 800 13px/1 var(--f-display); letter-spacing: .02em; }
.ch-in--a { fill: var(--on-a); } .ch-in--b { fill: var(--on-b); }
.ch-tick { font: 700 13px/1 var(--f-display); fill: var(--soft); }
.ch-row--head .ch-lab { min-block-size: 1px; }

.ch-gen { display: grid; gap: 4px; }
.ch-ann { font: 700 16px/1.35 var(--f-display); color: var(--ink); }
.ch-ann b { font-weight: 900; }
.ch-gen-svg { display: block; }
.ch-brk { stroke: var(--ink); stroke-width: 1.5; }
.ro-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; font: 600 15px/1.4 var(--f-display); }
.ro-legend li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding-block: 6px; border-block-end: 1px solid var(--line-soft); }
.ro-legend .k { transform: translateY(1px); }
.ro-legend b { font-weight: 800; }
.ro-legend .ro-legend-tot { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; border-block-end: 0; }
.ro-kv { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ro-soft { color: var(--soft); font-weight: 600; }

.ro-src { font-size: 15px; line-height: 1.5; color: var(--soft); }
.ro-src b { font-family: var(--f-display); font-weight: 800; color: var(--ink); }
.ro-more summary { display: inline-flex; align-items: center; min-block-size: 40px; cursor: pointer; font: 800 16px/1.3 var(--f-display); color: var(--accent); }
.ro-more[open] summary { margin-block-end: 8px; }
.ro-fig--sm .ch-row { grid-template-columns: 10rem minmax(0, 1fr); }

@container fig (max-width: 560px) {
  .ro-fig-head { grid-template-columns: minmax(0, 1fr); }
  .ro-callout { max-inline-size: none; }
  .ch-row, .ro-fig--sm .ch-row { grid-template-columns: minmax(0, 1fr); }
  .ch-lab { text-align: start; padding-block-start: 8px; }
  .ch-row--head .ch-lab { display: none; }
  .ro-legend { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ============================================================ footnotes and sources */
.fn { font: 800 .68em/0 var(--f-display); vertical-align: super; margin-inline-start: 1px; white-space: nowrap; }
.fn a { padding-inline: 1px; text-decoration-thickness: 1px; }
.ro-src-list { display: grid; gap: 10px; counter-reset: src; font-size: 15px; line-height: 1.5; }
.ro-src-list li {
  counter-increment: src; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); padding: 6px 10px 6px 0;
  border-radius: 10px; scroll-margin-block-start: 20px;
}
.ro-src-list li::before { content: counter(src); text-align: end; padding-inline-end: 12px; font: 800 15px/1.5 var(--f-display); color: var(--soft); font-variant-numeric: tabular-nums; }
.ro-src-list li:target { background: var(--target); }
.ro-src-list a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
.ro-srcs > summary {
  display: inline-flex; align-items: center; gap: 10px; min-block-size: 48px; padding-inline: 16px 20px; border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--uline); background: var(--card); cursor: pointer; list-style: none;
  font: 800 17px/1.3 var(--f-display); color: var(--accent);
}
.ro-srcs > summary::-webkit-details-marker { display: none; }
.ro-srcs > summary::before { content: "+"; inline-size: 1ch; font-size: 22px; line-height: 1; text-align: center; }
.ro-srcs[open] > summary::before { content: "\2212"; }
.ro-srcs .when-open, .ro-srcs[open] .when-closed { display: none; }
.ro-srcs[open] .when-open { display: inline; }
.ro-srcs[open] > summary { margin-block-end: 14px; }

/* ============================================================ next step */
.ro-next {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 40px; align-items: center;
  margin-block-start: 72px; padding: 32px 38px; border-radius: 26px; background: var(--band);
}
.ro-next-k { font: 800 14px/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow); }
.ro-next-h { margin-block-start: 6px; font-size: clamp(26px, 20px + 1.4vw, 34px); font-weight: 900; line-height: 1.12; letter-spacing: -.018em; }
.ro-next-text > p:last-child { margin-block-start: 10px; max-inline-size: 58ch; font-size: 18px; line-height: 1.6; }
.ro-next-actions { display: grid; gap: 14px; }
.ro-btn {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: 56px; padding-block: 12px; padding-inline: 28px;
  border: 2px solid transparent; border-radius: 999px; font: 800 19px/1.2 var(--f-display); text-align: center;
}
.ro a.ro-btn { text-decoration: none; }
.ro .ro-btn--primary { background: var(--btn); color: var(--on-btn); box-shadow: 0 4px 0 var(--btn-lip); }
.ro .ro-btn--primary:hover { background: var(--btn-hover); }
.ro .ro-btn--secondary { background: var(--card); color: var(--accent); border-color: currentColor; }
.ro .ro-btn:focus-visible { outline-offset: 4px; border-radius: 999px; }

/* ============================================================ footer */
.ro-foot { display: grid; gap: 10px; margin-block-start: 64px; padding-block-start: 24px; border-block-start: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--soft); }
.ro-foot-logo { display: block; inline-size: 120px; block-size: auto; margin-block: -8px -4px; }
.ro-logo-plate--sm { justify-self: start; border-radius: 14px; }
.ro-credit { font-size: 14px; }

/* ============================================================ narrower screens */
@media (max-width: 820px) {
  .ro-band { grid-template-columns: minmax(0, 1fr); padding: 28px 26px 26px; }
  .ro-band-art { justify-self: stretch; max-inline-size: none; aspect-ratio: 16 / 9; border-radius: 22px; }
  .ro-facts { grid-template-columns: minmax(0, 1fr); }
  .ro-points > li { grid-template-columns: minmax(0, 1fr); }
  .ro-next { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ro { padding-inline: 16px; padding-block: 16px 56px; font-size: 18px; }
  .ro-band { padding: 22px 18px 18px; border-radius: 22px; gap: 22px; }
  .ro-logo { inline-size: 150px; margin-block: -9px -5px; }
  .ro-deck { font-size: 19px; }
  .ro-take { padding: 22px 18px 8px; border-radius: 20px; }
  .ro-take-list > li { grid-template-columns: minmax(0, 1fr); }
  .ro-take-fig { font-size: 28px; }
  .ro-toc ol { grid-template-columns: minmax(0, 1fr); }
  .ro-sec { margin-block-start: 56px; }
  .ro-lede { font-size: 19px; }
  .ro-fig { padding: 18px 16px 16px; border-radius: 18px; }
  .ro-tiles { grid-template-columns: minmax(0, 1fr); }
  .ro-next { margin-block-start: 56px; padding: 24px 18px; border-radius: 22px; }
  .ro-next-actions .ro-btn { inline-size: 100%; }
}
/* phones: the headline figure and title fill the first screen; the photo becomes a slim band */
@media (max-width: 480px) {
  .ro-band { gap: 18px; }
  .ro-eyebrow { margin-block-start: 16px; font-size: 14px; }
  .ro-title { font-size: 36px; }
  .ro-stat { margin-block-start: 12px; }
  .ro-deck { margin-block-start: 10px; font-size: 18px; line-height: 1.5; }
  .ro-meta { margin-block-start: 16px; }
  .ro-meta li { font-size: 14px; }
  .ro-band-art { aspect-ratio: auto; block-size: 120px; border-radius: 18px; }
  .ro-band-art img { object-position: 44% 58%; }
}
@media (prefers-reduced-motion: reduce) {
  .ro * { scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .k, .ch-svg rect { forced-color-adjust: none; }
}

/* ============================================================ the 2026 edition: PDF button and print (branded PDF) */
.ro-pdf { margin-block-start: 16px; }
.ro-pdf-msg { margin-inline-start: 12px; color: var(--soft); font-size: .95rem; }
.ro-cover { display: none; }
@media print {
  @page { size: A4; margin: 16mm 14mm 18mm; }
  html, body, .ro { background: #ffffff; }
  .ro-wrap { padding-block-start: 0; }
  .ro-cover {
    display: flex; flex-direction: column; gap: 8mm; box-sizing: border-box; block-size: 238mm; overflow: hidden;
    break-after: page; padding: 10mm 10mm 8mm; border-radius: 6mm; background: var(--band);
  }
  .ro-cover-logo { inline-size: 62mm; block-size: auto; }
  .ro-cover-year { font: 900 60pt/1 var(--f-display); letter-spacing: -.02em; color: var(--eyebrow); }
  .ro-cover-title { margin-block-start: 3mm; font: 900 28pt/1.12 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
  .ro-cover-deck { margin-block-start: 5mm; max-inline-size: 150mm; font: 400 12.5pt/1.55 var(--f-text); color: var(--soft); }
  .ro-cover-photo { flex: 1 1 0; min-block-size: 45mm; overflow: hidden; border-radius: 5mm; }
  .ro-cover-photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .ro-cover-foot { font: 700 10pt/1.3 var(--f-display); color: var(--soft); }
  .ro-pdf, .rc-back, .rc-foot-back, .ro-next-actions, .ro-more, .ro-toc { display: none; }
  .ro-band-art { display: none; }
  .ro-band { grid-template-columns: minmax(0, 1fr); }
  .ro-take-list > li, .ro-fig, .ro-tile, .ro-t, .ro-note, .ro-cr-card, table, figure { break-inside: avoid; }
  .ro-h2, .ro-h3, .ro-fig-t { break-after: avoid; }
  .ro a { text-decoration: none; }
}


/* ============================================================ reports by country */
.ro-cr { margin-block-start: 28px; }
.ro-cr-h { font: 900 26px/1.2 var(--f-display); letter-spacing: -.01em; }
.ro-cr-deck { margin-block-start: 6px; font-size: 17px; line-height: 1.6; color: var(--soft); max-inline-size: 68ch; }
.ro-cr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-block-start: 16px; }
.ro .ro-cr-card {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center;
  min-block-size: 78px; padding: 14px 16px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none;
}
.ro .ro-cr-card:hover { box-shadow: var(--shadow), inset 0 0 0 2px var(--uline); }
.ro-cr-flag { grid-row: 1 / span 2; inline-size: 48px; block-size: 32px; overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); }
.ro-cr-name { font: 800 18px/1.25 var(--f-display); }
.ro-cr-go {
  font: 700 15px/1.35 var(--f-display); color: var(--accent);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; text-decoration-color: var(--uline);
}
.ro .ro-cr-card:hover .ro-cr-go { text-decoration-color: currentColor; }
.ro-vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ro-foot-cr a { white-space: nowrap; }
@media (max-width: 480px) {
  .ro-cr-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ro .ro-cr-card { min-block-size: 64px; padding: 10px 14px; }
}
@media (forced-colors: active) { .ro .ro-cr-card { border: 1px solid CanvasText; } }

/* ============================================================ country reports (build_country.py)
   Appended after outlook.css, whose tokens, type and components the country pages reuse. Only the
   pieces the main report does not have live here. Chart colours stay the main report's validated
   tokens: the paired-bar pair (--c65a/--c65b), growing/shrinking (--pos/--neg) and the
   highlight-plus-context pair (--hi/--mute). The muted bars sit below 3:1 on purpose (they are
   context, not a series), so every bar carries a visible value label and a table. */

/* the main stylesheet's "open" glyph for the sources toggle was written through a Python string and
   lost its escape; this is the intended minus sign */
.ro-srcs[open] > summary::before { content: "\2212"; }

/* draft / example banner */
.rc-draft {
  margin-block-end: 16px; padding: 12px 18px; border-radius: 14px;
  background: var(--note-bg); color: var(--note-ink); box-shadow: inset 0 0 0 1.5px var(--note-line);
  font: 800 16px/1.45 var(--f-display);
}

/* title band: flag (or neutral mark) beside the eyebrow; no photo means one column */
.ro-band--solo { grid-template-columns: minmax(0, 1fr); }
.ro-band--solo .ro-deck { max-inline-size: 60ch; }
.rc-kicker { display: flex; align-items: center; gap: 12px; margin-block-start: 22px; }
.rc-kicker .ro-eyebrow { min-inline-size: 0; margin-block-start: 0; }
.rc-flag { flex: none; display: block; block-size: 32px; inline-size: auto; }
.rc-flag-edge { fill: none; stroke: var(--ink); stroke-opacity: .22; }
.rc-mark-bg { fill: var(--raise); stroke: var(--uline); }
.rc-mark-t { font: 900 14px/1 var(--f-display); letter-spacing: .06em; fill: var(--accent); }
.rc-back { margin-block-start: 6px; }
/* 17px x 1.3 + 2 x 11px = a 44px tap target; the arrow is inline so it shares the underline */
.ro .rc-back a, .ro .rc-foot-back a { display: inline-block; padding-block: 11px; font: 800 17px/1.3 var(--f-display); }
.ro .rc-back a::after, .ro .rc-foot-back a::after { content: "\a0\2192"; content: "\a0\2192" / ""; }

/* charts: highlighted row, hit areas for the native hover titles */
.ch-row--hl .ch-lab, .ch-row--hl .ch-v { font-weight: 900; }
.ch-hit { fill: transparent; }

/* what-it-means points whose right column holds a paragraph and a list */
.rc-pt > * + * { margin-block-start: 8px; }

/* wide numeric tables: numbers right-aligned while the table is a table; stacked cards on phones */
@container tw (min-width: 601px) {
  .rc-t--right :is(thead th, td):not(:first-child) { text-align: end; }
}

@media (max-width: 480px) {
  .rc-kicker { margin-block-start: 16px; }
}

/* ============================================================ on retire.do */
.ro { background: var(--bg); color: var(--ink); }
.ro-logo-plate, .ro-foot-logo { display: none; }
.ro-english { max-inline-size: 1000px; margin-inline: auto; margin-block: 16px 0; }

/* /reports: the latest edition and the list of editions (wave 2b) */
.ro-index .ro-wrap { padding-block: 24px 48px; }
.ro-index-head { max-inline-size: 760px; margin-block-end: 24px; }
.ro-latest { margin-block-end: 32px; }
.ro-latest-h { margin-block: 8px; font: 900 clamp(26px, 4vw, 36px)/1.15 var(--f-display); }
.ro-latest-h a { color: inherit; }
.ro-editions-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ro-editions-list a { display: flex; gap: 12px; align-items: baseline; padding-block: 12px; font: 700 19px/1.35 var(--f-display); }
.ro-editions-year { color: var(--eyebrow); font-weight: 900; }