/*
 * A blog post.
 *
 * The index down the right is sticky, and sticky fails silently if any
 * ancestor has overflow:hidden. The page wrapper below uses overflow-x: clip
 * for exactly that reason -- it stops sideways overflow without creating the
 * scroll container that would break the sticky. Do not change it to hidden.
 */
.po-main { background:#fff; border-bottom:1px solid #E2E9F0; overflow-x:clip; }

/* ── reading progress ───────────────────────────────────────────────── */
.po-progress {
  position:fixed; left:0; top:0; height:3px; width:100%;
  z-index:400; pointer-events:none;
}
.po-progress__bar { height:100%; width:0; background:#F0A500; transition:width 120ms linear; }

/* ── header ─────────────────────────────────────────────────────────── */
.po-head {
  background:linear-gradient(135deg,#F2F7FC 0%,#FFFFFF 42%,#FDF6E8 100%);
  border-bottom:1px solid #E2E9F0;
}
.po-head__in {
  max-width:1220px; margin:0 auto;
  padding:clamp(36px,4.6vw,64px) clamp(16px,3.5vw,36px) clamp(30px,3.6vw,44px);
}
.po-head__col { max-width:860px; }
.po-head__meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:18px; }
.po-head__read { font-size:14px; font-weight:600; color:#5F7386; }
.po-title {
  font-weight:800; font-size:clamp(30px,4vw,50px); line-height:1.1;
  letter-spacing:-1.5px; color:#14232F; margin:0 0 18px; text-wrap:balance;
}
.po-stand {
  font-size:clamp(17px,1.6vw,20px); line-height:1.62;
  color:#5A6B7B; margin:0 0 26px;
}
.po-by { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.po-by__av {
  flex:none; width:46px; height:46px; border-radius:50%;
  background:#03244a; color:#fff; font-size:15px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.po-by__name { font-size:15.5px; font-weight:800; color:#14232F; }
.po-by__dates { font-size:14px; color:#5F7386; }
.po-hero {
  margin-top:clamp(26px,3.2vw,38px); border-radius:20px; overflow:hidden;
  border:1px solid #E2E9F0; background:#F4F7FA;
  box-shadow:0 2px 4px rgba(20,35,47,.05),0 14px 36px rgba(20,35,47,.09);
}
.po-hero img { width:100%; height:auto; display:block; }

/* ── body and index ─────────────────────────────────────────────────── */
.po-main__in {
  max-width:1220px; margin:0 auto;
  padding:clamp(20px,3vw,40px) clamp(16px,3.5vw,36px) clamp(48px,5.6vw,80px);
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(24px,4vw,64px); align-items:start;
}
.po-aside { order:0; }
.po-article { order:1; min-width:0; max-width:740px; }

@media (min-width:1000px){
  .po-main__in { grid-template-columns:minmax(0,1fr) 300px; }
  /* The index is written first in the DOM so it reads as a panel on a phone;
     on a desktop it moves to the right column without a second copy. */
  .po-aside { order:2; position:sticky; top:118px; align-self:start; }
  .po-article { order:1; }
}

/* ── the index ──────────────────────────────────────────────────────── */
.po-toc {
  background:#fff; border:1px solid #E2E9F0; border-radius:16px; overflow:hidden;
  box-shadow:0 1px 2px rgba(20,35,47,.04),0 8px 22px rgba(20,35,47,.07);
}
.po-toc__btn {
  width:100%; font-family:inherit; background:#F7FAFD; border:none;
  border-bottom:1px solid #E2E9F0; padding:15px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  text-align:left; cursor:pointer;
}
.po-toc__btn > span:first-child {
  font-size:12.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:#14232F;
}
.po-toc__hint { font-size:13px; font-weight:700; color:#0464ad; }
.po-toc__rail { height:3px; background:#EEF3F8; }
.po-toc__fill { height:100%; width:0; background:#0464ad; transition:width 120ms linear; }
/*
 * Some imported posts carry thirty or more top-level headings, which is a
 * list rather than an index. The nav scrolls instead of growing taller than
 * the screen. Scrolling this element is safe: it is the sticky element's
 * child, not one of its ancestors.
 */
.po-toc__nav { padding:8px 0; display:none; max-height:min(58vh, 520px); overflow-y:auto; }
.po-toc.is-open .po-toc__nav { display:block; }
.po-toc__item {
  display:flex; gap:11px; align-items:flex-start;
  padding:10px 18px 10px 15px;
  border-left:3px solid transparent; background:#fff;
}
.po-toc__n { flex:none; font-size:12.5px; font-weight:800; color:#8FA3B5; margin-top:2px; }
.po-toc__t { font-size:14.5px; line-height:1.45; font-weight:600; color:#5A6B7B; }
.po-toc__item.is-current { border-left-color:#0464ad; background:#F4F9FE; }
.po-toc__item.is-current .po-toc__n { color:#0464ad; }
.po-toc__item.is-current .po-toc__t { font-weight:800; color:#14232F; }
@media (hover: hover){ .po-toc__item:hover { background:#F7FAFD; } }

@media (min-width:1000px){
  /* On a desktop it is the sidebar, always open, and the button is inert. */
  .po-toc__nav { display:block; }
  .po-toc__btn { cursor:default; }
  .po-toc__hint { display:none; }
}

/* ── the newsletter card under the index ────────────────────────────── */
.po-news {
  margin-top:16px; background:#03244a; border-radius:16px;
  padding:20px 20px 22px; box-shadow:0 14px 34px rgba(3,36,74,.20);
}
.po-news__eyebrow {
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#F0A500; margin-bottom:8px;
}
.po-news__h { font-size:17px; font-weight:800; line-height:1.3; color:#fff; margin-bottom:6px; }
.po-news__t { font-size:13.5px; line-height:1.55; color:#A9C2DA; margin:0 0 14px; }
.po-news__form input[type="email"] {
  width:100%; box-sizing:border-box; font-family:inherit; font-size:14.5px;
  color:#14232F; background:#fff; border:1px solid #fff; border-radius:9px;
  padding:12px 13px; margin-bottom:8px;
}
.po-news__form button {
  width:100%; font-family:inherit; background:#F0A500; color:#2E2000;
  font-size:14.5px; font-weight:800; border:none; border-radius:9px;
  padding:12px 16px; cursor:pointer;
}
.po-news__done {
  font-size:14.5px; font-weight:700; color:#fff;
  background:rgba(255,255,255,.10); border-radius:9px; padding:12px 13px;
}
@media (max-width:999px){
  /* On a phone the card would sit between the panel and the article, which
     is the worst place for it. It goes after the article instead. */
  .po-news { display:none; }
}

/* ── the prose ──────────────────────────────────────────────────────── */
.po-article > p {
  font-size:17.5px; line-height:1.78; color:#2E3D4B; margin:0 0 20px;
}
.po-article > ul, .po-article > ol {
  font-size:17.5px; line-height:1.78; color:#2E3D4B; margin:0 0 22px; padding-left:22px;
}
.po-article > ul li, .po-article > ol li { margin-bottom:9px; }
.po-article a { color:#0464ad; font-weight:600; }
.po-article > h3 {
  font-size:clamp(19px,2vw,23px); line-height:1.28; font-weight:800;
  color:#14232F; margin:32px 0 12px; letter-spacing:-.4px;
}

/* An H2 carries its index number as a pill, generated from its position. */
.po-h2 {
  scroll-margin-top:120px;
  font-size:clamp(23px,2.5vw,30px); line-height:1.2; font-weight:800;
  color:#14232F; margin:clamp(40px,4.4vw,56px) 0 16px; letter-spacing:-.7px;
  display:flex; align-items:baseline; gap:12px;
}
.po-h2__n {
  flex:none; font-size:14px; font-weight:800; color:#0464ad;
  background:#EAF4FD; border-radius:8px; padding:5px 9px; letter-spacing:0;
}
.po-h2__t { min-width:0; }

/* ── body blocks ────────────────────────────────────────────────────── */
.po-note {
  background:#EAF4FD; border:1px solid #BBD8EF; border-left:4px solid #0464ad;
  border-radius:14px; padding:20px 22px; margin:28px 0;
}
.po-note__l {
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#0464ad; margin-bottom:8px;
}
.po-note p { font-size:16px; line-height:1.7; color:#14232F; margin:0; }

.po-note--cta { background:#FDF4E0; border-color:#F4E3C2; border-left-color:#F0A500; }
.po-note--cta .po-note__l { color:#8A6206; }

.po-pull {
  margin:32px 0; padding:4px 0 4px 26px; border-left:4px solid #F0A500;
  font-family:'Source Serif 4', Georgia, serif;
  font-size:clamp(21px,2.2vw,26px); line-height:1.45; color:#14232F; letter-spacing:-.3px;
}
.po-pull p { margin:0; font:inherit; color:inherit; }
/* The attribution is not part of the quote, so it steps back from it. */
.po-pull__by {
  display:block; margin-top:12px;
  font-family:inherit; font-style:normal;
  font-size:14px; font-weight:700; letter-spacing:.02em; color:#5F7386;
}
.po-pull__by::before { content:"\2014\00a0"; }

.po-points { display:grid; gap:12px; margin:0 0 24px; }
.po-point {
  display:flex; gap:14px; background:#fff; border:1px solid #E2E9F0;
  border-radius:14px; padding:18px 20px;
  box-shadow:0 1px 2px rgba(20,35,47,.04),0 8px 22px rgba(20,35,47,.06);
}
.po-point__n {
  flex:none; width:30px; height:30px; border-radius:9px;
  color:#fff; font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
/* The number tile rotates through the three brand colours down the list. */
.po-point:nth-child(3n+1) .po-point__n { background:#0464ad; }
.po-point:nth-child(3n+2) .po-point__n { background:#F0A500; color:#2E2000; }
.po-point:nth-child(3n+3) .po-point__n { background:#03244a; }
.po-point__h { font-size:16.5px; font-weight:800; color:#14232F; margin-bottom:4px; }
.po-point__t { font-size:15.5px; line-height:1.65; color:#5A6B7B; }

.po-cmp { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin:0 0 24px; }
@media (min-width:700px){ .po-cmp { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.po-cmp__col { background:#F7FAFD; border:1px solid #E2E9F0; border-radius:14px; padding:20px 22px; }
.po-cmp__l {
  font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#5F7386; margin-bottom:12px;
}
.po-cmp__col ul { margin:0; padding-left:18px; font-size:15.5px; line-height:1.75; color:#5A6B7B; }
/* The right column is the recommended side, so it is lifted and led in blue. */
.po-cmp__col--good {
  background:#fff; border-color:#BBD8EF; border-top:4px solid #0464ad;
  box-shadow:0 1px 2px rgba(4,100,173,.06),0 10px 26px rgba(4,100,173,.10);
}
.po-cmp__col--good .po-cmp__l { color:#0464ad; }
.po-cmp__col--good ul { color:#14232F; }

.po-article figure, .po-fig { margin:30px 0; }
.po-article figure img, .po-fig img {
  width:100%; height:auto; display:block;
  border-radius:16px; border:1px solid #E2E9F0; background:#F4F7FA;
}
.po-article figcaption, .po-fig figcaption {
  font-size:14px; line-height:1.6; color:#5F7386; margin-top:10px;
}

/* ── tags, share, author ────────────────────────────────────────────── */
.po-foot {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px; margin-top:40px; padding-top:22px; border-top:1px solid #E2E9F0;
}
.po-tags { display:flex; flex-wrap:wrap; gap:8px; }
.po-tag {
  font-size:13.5px; font-weight:700; color:#14232F;
  background:#F4F7FA; border:1px solid #E2E9F0; border-radius:99px; padding:6px 13px;
}
.po-share { display:flex; align-items:center; gap:8px; }
.po-share__l { font-size:13.5px; font-weight:700; color:#5F7386; margin-right:2px; }
.po-share__b, .po-share__copy {
  height:38px; border-radius:10px; border:1px solid #CBDCEB; background:#fff;
  display:flex; align-items:center; justify-content:center; color:#0464ad;
}
.po-share__b { width:38px; }
.po-share__copy {
  font-family:inherit; padding:0 12px; gap:7px;
  font-size:13.5px; font-weight:700; cursor:pointer;
}
@media (hover: hover){
  .po-share__b:hover, .po-share__copy:hover { background:#EAF4FD; border-color:#0464ad; }
}

.po-author {
  display:flex; gap:16px; align-items:flex-start; margin-top:26px;
  background:#F7FAFD; border:1px solid #E2E9F0; border-radius:16px; padding:22px 24px;
}
.po-author__av {
  flex:none; width:54px; height:54px; border-radius:50%;
  background:#03244a; color:#fff; font-size:17px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.po-author__name { font-size:16.5px; font-weight:800; color:#14232F; margin-bottom:3px; }
.po-author__bio { font-size:15px; line-height:1.65; color:#5A6B7B; margin:0 0 8px; }
.po-author__more { font-size:14.5px; font-weight:700; }

/* ── keep reading ───────────────────────────────────────────────────── */
.po-rel { background:#F7FAFD; border-bottom:1px solid #E2E9F0; }
.po-rel__in { max-width:1220px; margin:0 auto; padding:clamp(44px,5.4vw,72px) clamp(16px,3.5vw,36px); }
.po-rel__head {
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:12px; margin-bottom:clamp(22px,2.8vw,32px);
}
.po-rel__h2 {
  font-size:clamp(24px,2.8vw,34px); line-height:1.14; font-weight:800;
  color:#14232F; margin:0; letter-spacing:-1px;
}
.po-rel__h2 span { color:#0464ad; }
.bl-card__title--grow { flex:1; margin-bottom:14px; }
.bl-card__meta { font-size:13px; font-weight:600; color:#5F7386; }