/* Insights blog — shared styles.
   index.html keeps its CSS inline (single page, single request). The blog spans
   several pages, so its styles live here and are cached across them.
   The first block duplicates the site chrome from index.html (nav, buttons,
   cards, footer, cookie banner) so the blog looks identical without index.html
   having to be refactored into an external stylesheet. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Sora', Arial, sans-serif; background: #FBFAF7; color: #1B2B42; -webkit-font-smoothing: antialiased; }
a { color: #1D9A7B; text-decoration: none; }
a:hover { color: #24405E; }
img { max-width: 100%; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #2FAE7D; outline-offset: 1px; }

/* Visible to screen readers only — used for table captions that would be
   redundant on screen but give the table a name in assistive tech. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: 1140px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; padding: 14px 28px; border-radius: 10px; transition: background .15s, color .15s, border-color .15s; }
.btn-primary { background: #2FAE7D; color: #fff; }
.btn-primary:hover { background: #1D9A7B; color: #fff; }
.btn-dark { background: #24405E; color: #fff; }
.btn-dark:hover { background: #1B2B42; color: #fff; }
.btn-invert { background: #fff; color: #1D9A7B; }
.btn-invert:hover { background: #F1F6F3; color: #1D9A7B; }
.card { background: #fff; border: 1px solid #E7E4DC; border-radius: 14px; }
.eyebrow { color: #1D9A7B; font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.eyebrow-dark { color: #4FC796; }

/* Header / nav — identical markup and behaviour to index.html, driven by main.js */
header .wrap { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; }
.nav-links a:not(.btn) { color: #1B2B42; }
.nav-links a.is-current { color: #1D9A7B; font-weight: 700; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle svg { display: block; }

/* Footer */
.grid-footer { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: flex-start; }

/* Cookie consent banner */
.cookie-banner { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; background: #1B2B42; color: #fff; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,0.34); }
.cookie-banner.is-open { display: block; }
.cookie-inner { max-width: 1140px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cookie-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.cookie-text { font-size: 13.5px; line-height: 1.6; color: #C9D4E0; margin: 0; max-width: 640px; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn { font-family: 'Sora', Arial, sans-serif; font-size: 14px; font-weight: 700; padding: 11px 22px; border-radius: 9px; cursor: pointer; border: 1.5px solid transparent; transition: background .15s, border-color .15s; }
.cookie-btn-accept { background: #2FAE7D; color: #fff; }
.cookie-btn-accept:hover { background: #1D9A7B; }
.cookie-btn-decline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.cookie-btn-decline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.cookie-settings-btn { font-family: 'Sora', Arial, sans-serif; font-size: inherit; line-height: inherit; color: #8A99AD; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.cookie-settings-btn:hover { color: #C9D4E0; text-decoration: underline; }

/* ------------------------------------------------------------------ blog ---- */

.blog-hero { background: linear-gradient(160deg,#1B2B42 0%,#24405E 60%,#2E5170 100%); color: #fff; padding-top: 70px; }
.blog-hero h1 { font-size: 46px; line-height: 1.15; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 18px; text-wrap: pretty; }
.blog-hero .lede { font-size: 17.5px; line-height: 1.65; color: #C9D4E0; margin: 0; max-width: 620px; text-wrap: pretty; }

.crumbs { font-size: 12.5px; color: rgba(255,255,255,0.55); margin: 0 0 26px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: rgba(255,255,255,0.55); }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: #fff; }

/* Category chips */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; }
.chip-green { color: #1D9A7B; background: rgba(29,154,123,0.09); }
.chip-teal { color: #2E7C92; background: rgba(46,124,146,0.09); }
.chip-navy { color: #1B2B42; background: rgba(27,43,66,0.07); }
.chip-gold { color: #9A7418; background: rgba(245,185,66,0.16); }
.chip-latest { color: #1B2B42; background: #4FC796; font-size: 11.5px; font-weight: 800; letter-spacing: 0.8px; }

/* Topic filter rail */
.topics { display: flex; gap: 10px; flex-wrap: wrap; }
.topic { font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; padding: 9px 16px; border-radius: 999px; border: 1px solid #E7E4DC; background: #fff; color: #3D4C61; transition: background .15s, color .15s, border-color .15s; }
.topic:hover { border-color: #2FAE7D; }
.topic .count { font-size: 11.5px; color: #8A94A3; font-weight: 600; }
.topic[aria-pressed="true"] { background: #1B2B42; border-color: #1B2B42; color: #fff; font-weight: 700; }
.topic[aria-pressed="true"] .count { color: rgba(255,255,255,0.55); }

/* Featured article */
.featured { background: #1B2B42; border: 1px solid #1B2B42; border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,0.98fr); }
.featured-body { padding: 44px; color: #fff; display: flex; flex-direction: column; }
.featured-body h2 { margin: 0 0 16px; font-size: 33px; line-height: 1.25; font-weight: 800; letter-spacing: -0.4px; text-wrap: pretty; }
.featured-body h2 a { color: #fff; }
.featured-body h2 a:hover { color: #4FC796; }
.featured-body .dek { margin: 0 0 26px; font-size: 16.5px; line-height: 1.65; color: #C9D4E0; text-wrap: pretty; }
.featured-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,0.6); }
.featured-foot { margin-top: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.featured-art { padding: 44px 44px 44px 0; display: flex; }
.featured-art > * { flex: 1; }
.byline-mini { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #C9D4E0; }
.byline-mini img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }

/* Article card grid */
.cards-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.article-card { padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; height: 100%; transition: border-color .15s, box-shadow .15s; }
.article-card:hover { border-color: #2FAE7D; box-shadow: 0 10px 28px rgba(36,64,94,0.08); }
.article-card h3 { margin: 0; font-size: 18.5px; line-height: 1.35; font-weight: 700; letter-spacing: -0.2px; color: #1B2B42; text-wrap: pretty; }
.article-card h3 a { color: inherit; }
/* Stretched link: the whole card is clickable, but only the title is in the tab
   order and read out as the link — no duplicate or empty link for screen readers. */
.article-card h3 a::after { content: ''; position: absolute; inset: 0; }
.article-card { position: relative; }
.article-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #5B6B80; text-wrap: pretty; }
.article-card .meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #8A94A3; }
.article-card .foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: #8A94A3; }
.article-card .foot .read { color: #1D9A7B; font-weight: 700; }
.cards-3 .article-card.is-sand { background: #FBFAF7; }

.section-lead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.section-lead h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.4px; }
.link-btn { font: inherit; background: none; border: none; cursor: pointer; font-size: 13.5px; font-weight: 700; color: #1D9A7B; }

.empty-note { border: 1px dashed #D8D4C9; border-radius: 14px; padding: 40px 24px; text-align: center; font-size: 15px; line-height: 1.6; color: #5B6B80; }

/* Green CTA band */
.cta-band { background: linear-gradient(135deg,#1D9A7B 0%,#2FAE7D 100%); border-radius: 16px; padding: 40px 44px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-band h2 { margin: 0 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -0.4px; text-wrap: pretty; }
.cta-band p { margin: 0; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.9); }
.cta-band .kicker { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 10px; }

/* ------------------------------------------------------- rate summary card ---- */
/* The cover art used in the featured card and each article hero. Fixed 330px so
   the two-column hero grid keeps the same height across articles. */
/* min-height, not height: the footnote wraps to two lines at some widths and a
   fixed height printed the second line below the card's bottom border. */
.ratecard { border-radius: 16px; padding: 26px; min-height: 330px; display: flex; flex-direction: column; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.ratecard-title { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #4FC796; margin-bottom: 4px; }
.ratecard-sub { font-size: 13px; color: #C9D4E0; margin-bottom: 12px; }
.ratecard dl { margin: auto 0 0; display: grid; }
.ratecard dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.12); }
.ratecard dl > div:first-child { border-top: none; }
.ratecard dt { font-size: 14px; color: #C9D4E0; }
.ratecard dd { margin: 0; font-size: 26px; font-weight: 800; color: #4FC796; letter-spacing: -0.5px; }
.ratecard-note { font-size: 11px; color: rgba(255,255,255,0.45); margin: 14px 0 0; line-height: 1.5; }

/* ------------------------------------------------------------ article page ---- */

.article-hero-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,0.92fr); gap: 56px; align-items: center; }
.article-hero-grid h1 { margin: 0 0 18px; font-size: 44px; line-height: 1.16; font-weight: 800; letter-spacing: -0.5px; text-wrap: pretty; }
.article-hero-grid .dek { margin: 0 0 28px; font-size: 18px; line-height: 1.65; color: #C9D4E0; max-width: 600px; text-wrap: pretty; }
.byline { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px; }
.byline-person { display: flex; align-items: center; gap: 14px; }
.byline-person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.byline-name { font-size: 15px; font-weight: 800; }
.byline-role { font-size: 12.5px; color: #C9D4E0; }
.byline-dates { font-size: 12.5px; color: rgba(255,255,255,0.6); line-height: 1.6; }

.article-grid { display: grid; grid-template-columns: minmax(0,1fr) 296px; gap: 56px; align-items: start; }
.article-body { min-width: 0; padding-top: 52px; padding-bottom: 76px; }
.article-body h2 { scroll-margin-top: 100px; margin: 56px 0 16px; font-size: 28px; line-height: 1.3; font-weight: 800; letter-spacing: -0.4px; color: #1B2B42; text-wrap: pretty; }
.article-body p { margin: 0 0 18px; font-size: 17px; line-height: 1.75; color: #3D4C61; text-wrap: pretty; }

.takeaways { background: #F1F6F3; border: 1px solid #CFE4DA; border-radius: 14px; padding: 28px 30px; }
.takeaways ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.takeaways li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 12px; font-size: 15px; line-height: 1.6; color: #3D4C61; }
.takeaways li::before { content: '—'; color: #2FAE7D; font-weight: 800; }

/* Before / after comparison table */
.cmp { border: 1px solid #E7E4DC; border-radius: 14px; overflow: hidden; background: #fff; margin: 28px 0; width: 100%; border-collapse: collapse; }
.cmp thead th { background: #1B2B42; color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-align: left; padding: 14px 20px; }
.cmp td { padding: 16px 20px; font-size: 14.5px; line-height: 1.55; color: #5B6B80; border-top: 1px solid #E7E4DC; vertical-align: top; }
.cmp th[scope="row"] { padding: 16px 20px; font-size: 14.5px; line-height: 1.55; font-weight: 600; color: #1B2B42; text-align: left; border-top: 1px solid #E7E4DC; vertical-align: top; }
.cmp td.is-now { color: #1D9A7B; font-weight: 700; }
.cmp-scroll { overflow-x: auto; }

/* Policy timeline */
.timeline { display: grid; gap: 18px; margin: 26px 0 8px; }
.timeline-row { display: grid; grid-template-columns: 132px 20px minmax(0,1fr); gap: 16px; align-items: start; }
.timeline-date { font-size: 12.5px; font-weight: 700; color: #8A94A3; text-align: right; padding-top: 2px; }
.timeline-rail { position: relative; display: flex; justify-content: center; height: 100%; }
.timeline-rail::before { content: ''; position: absolute; top: 14px; bottom: -18px; width: 1px; background: #E7E4DC; }
.timeline-row:last-child .timeline-rail::before { display: none; }
.timeline-dot { width: 11px; height: 11px; border-radius: 999px; margin-top: 5px; background: #fff; border: 2px solid #CFCABE; position: relative; z-index: 1; }
.timeline-title { font-size: 15px; font-weight: 700; color: #1B2B42; margin-bottom: 4px; }
.timeline-text { font-size: 13.5px; line-height: 1.55; color: #5B6B80; }
.timeline-row.is-now .timeline-date { color: #1D9A7B; }
.timeline-row.is-now .timeline-dot { background: #2FAE7D; border-color: #2FAE7D; }

/* Illustrative figures panel */
.figures { background: #FBFAF7; border: 1px solid #E7E4DC; border-radius: 14px; padding: 26px 28px; margin: 26px 0; }
.figures-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #1D9A7B; margin-bottom: 16px; }
.figures-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.figures-grid dt { font-size: 26px; font-weight: 800; color: #1B2B42; letter-spacing: -0.5px; }
.figures-grid dd { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #5B6B80; }
.figures-note { font-size: 12px; color: #8A94A3; margin-top: 18px; line-height: 1.6; }

/* FAQ — native <details> so it works with JavaScript disabled */
.faq { border: 1px solid #E7E4DC; border-radius: 14px; background: #fff; overflow: hidden; margin-top: 20px; }
.faq details + details { border-top: 1px solid #E7E4DC; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 20px 26px; font-size: 15.5px; font-weight: 700; color: #1B2B42; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: #2FAE7D; font-size: 18px; font-weight: 600; flex-shrink: 0; transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 26px 24px; font-size: 15px; line-height: 1.65; color: #5B6B80; max-width: 720px; margin: 0; }

/* Sources + disclaimer */
.sources { margin-top: 52px; padding: 30px 32px; background: #fff; border: 1px solid #E7E4DC; border-radius: 14px; }
.sources ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.sources li { font-size: 14.5px; line-height: 1.6; color: #3D4C61; }
/* Source links sit in a numbered list beside unlinked entries, so they take the
   list's own colour rather than the site link green — the list reads as one
   bibliography instead of one highlighted item. Underline on hover keeps them
   discoverable without colouring them at rest. */
.sources a { color: inherit; }
.sources a:hover { color: inherit; text-decoration: underline; }
.sources .pub { font-size: 12.5px; color: #8A94A3; }
.sources .disclaimer { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #E7E4DC; font-size: 12px; line-height: 1.7; color: #8A94A3; }

/* Author box */
.author-box { margin-top: 36px; padding: 32px 34px; background: #1B2B42; border-radius: 16px; color: #fff; display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.author-box img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; flex-shrink: 0; }
.author-box .who { flex: 1 1 320px; min-width: 0; }
.author-box .kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #4FC796; margin-bottom: 8px; }
.author-box .name { font-size: 19px; font-weight: 800; margin-bottom: 4px; }
.author-box .role { font-size: 13.5px; color: #C9D4E0; margin-bottom: 12px; }
.author-box p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #C9D4E0; }

/* Sticky sidebar */
.article-aside { position: sticky; top: 92px; padding-top: 52px; display: grid; gap: 20px; }
.toc { background: #fff; border: 1px solid #E7E4DC; border-radius: 14px; padding: 22px; }
.toc-title { font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #8A94A3; margin-bottom: 14px; }
.toc nav { display: grid; gap: 2px; }
.toc a { font-size: 14px; line-height: 1.45; padding: 8px 0 8px 14px; border-left: 2px solid #E7E4DC; color: #5B6B80; font-weight: 500; transition: color .15s, border-color .15s; }
.toc a:hover { color: #1B2B42; }
.toc a.is-active { border-left-color: #2FAE7D; color: #1B2B42; font-weight: 700; }
.aside-cta { background: #1B2B42; border-radius: 16px; padding: 26px 24px; color: #fff; }
.aside-cta .kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #4FC796; margin-bottom: 10px; }
.aside-cta .head { font-size: 17px; font-weight: 800; line-height: 1.35; margin-bottom: 10px; }
.aside-cta p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; color: #C9D4E0; }
.aside-cta .btn { width: 100%; }
.aside-cta .reply { font-size: 11.5px; color: rgba(255,255,255,0.5); text-align: center; margin-top: 10px; }

/* -------------------------------------------------------------- responsive ---- */

@media (max-width: 1000px) {
  .article-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  /* Below the two-column breakpoint the contents list is no longer beside the
     article, so it stops being sticky and moves above the body copy. */
  .article-aside { position: static; padding-top: 32px; order: -1; }
  .aside-cta { display: none; }
  .article-body { padding-top: 32px; }
}

@media (max-width: 900px) {
  .featured { grid-template-columns: minmax(0,1fr); }
  .featured-body { padding: 34px 30px; }
  .featured-art { padding: 0 30px 34px; }
  .article-hero-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .cards-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .blog-hero h1 { font-size: 34px; }
  .article-hero-grid h1 { font-size: 33px; }
  .featured-body h2, .section-lead h2, .cta-band h2 { font-size: 26px; }
  .article-body h2 { font-size: 24px; margin-top: 44px; }
  .figures-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
}

@media (max-width: 760px) {
  .nav-links { position: fixed; inset: 62px 12px auto 12px; background: #FBFAF7; border: 1px solid #E7E4DC; border-radius: 14px; padding: 16px; flex-direction: column; align-items: stretch; gap: 4px; box-shadow: 0 20px 40px rgba(0,0,0,0.12); transform-origin: top; transform: scaleY(0); opacity: 0; pointer-events: none; transition: transform .15s ease, opacity .15s ease; }
  .nav-links.open { transform: scaleY(1); opacity: 1; pointer-events: auto; }
  .nav-links a:not(.btn) { padding: 12px 10px; border-radius: 8px; }
  .nav-links a:not(.btn):hover { background: rgba(47,174,125,0.08); }
  .nav-links .btn { text-align: center; margin-top: 8px; }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 640px) {
  .cards-3 { grid-template-columns: minmax(0,1fr); }
  .grid-footer { grid-template-columns: 1fr; gap: 28px; }
  .cta-band { padding: 30px 26px; }
  .cookie-inner { padding: 18px; gap: 16px; }
  .cookie-actions { width: 100%; }
  .cookie-btn { flex: 1; }
  /* The connecting rail needs a fixed-width date column beside it to read as a
     timeline; on narrow screens the date stacks above the entry instead. */
  .timeline-row { grid-template-columns: minmax(0,1fr); gap: 6px; padding-left: 16px; border-left: 2px solid #E7E4DC; }
  .timeline-row.is-now { border-left-color: #2FAE7D; }
  .timeline-rail { display: none; }
  .timeline-date { text-align: left; }
  /* Three columns of prose can't fit 375px without every cell wrapping to a
     tower of single words. Hold a readable minimum and let the row scroll. */
  .cmp { min-width: 540px; }
  .cmp thead th, .cmp td, .cmp th[scope="row"] { padding: 14px 16px; }
  .sources, .author-box, .figures, .takeaways { padding-left: 22px; padding-right: 22px; }
  .faq summary { padding: 16px 20px; }
  .faq .answer { padding: 0 20px 20px; }
}