.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--blue); z-index: 90; transition: width .1s linear;
}
.subhead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%);
  transition: transform .35s var(--ease);
}
.subhead.is-visible { transform: translateY(0); }
.subhead__inner {
  max-width: var(--measure-wide); margin: 0 auto; padding: 12px var(--pad-x);
  display: flex; align-items: center; gap: 16px;
}
.subhead__brand { flex: 0 0 auto; }
.subhead__brand img { height: 40px; }
.subhead__title {
  font-size: 15px; color: var(--ink); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* primary button (sticky navbar) */
.subhead__cta {
  margin-left: auto; flex: 0 0 auto; font-size: 16px; font-weight: 400;
  background: var(--btn-primary); color: #fff; padding: 10px 20px; border-radius: 8px;
  transition: background .15s var(--ease);
}
.subhead__cta:hover { background: var(--btn-primary-hover); text-decoration: none; }
/* on small screens drop the repeated title so the button always fits in the bar */
@media (max-width: 560px) { .subhead__title { display: none; } }

.hero {
  position: relative; min-height: clamp(420px, 62vh, 620px);
  display: flex; align-items: center;
  padding: 96px 0 64px;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,14,22,.55) 0%, rgba(6,14,22,.30) 45%, rgba(6,14,22,.60) 100%);
}
.hero__brand { position: absolute; top: 24px; left: max(var(--pad-x), calc((100% - var(--measure-wide)) / 2 + var(--pad-x))); z-index: 3; }
.hero__brand img { height: 40px; }
/* initial navbar button: mirrors the sticky-nav button, cloned in article.js.
   Shown on all breakpoints so the primary CTA is present in the hero before the
   reader scrolls (desktop included, per client request). */
.hero__cta {
  display: inline-block;
  /* align to the content container's right edge (mirrors .hero__brand on the left)
     so on wide screens the CTA sits within the column, not at the viewport edge */
  position: absolute; top: 24px; right: max(var(--pad-x), calc((100% - var(--measure-wide)) / 2 + var(--pad-x))); z-index: 3;
  font-size: 16px; font-weight: 400; color: #fff;
  background: var(--btn-primary); padding: 10px 20px; border-radius: 8px;
  transition: background .15s var(--ease);
}
.hero__cta:hover { background: var(--btn-primary-hover); text-decoration: none; }
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--measure-wide); margin: 0 auto; padding: 0 var(--pad-x); }
.hero__glass {
  max-width: 640px; border-radius: 24px;
  padding: clamp(24px, 3vw, 40px);
  /* reliable dark scrim behind the text so contrast holds regardless of the hero
     image behind it (stronger than the generic .glass tint) */
  background: linear-gradient(to bottom right, rgba(6,14,22,.58), rgba(6,14,22,.48));
}
.hero__eyebrow {
  color: var(--teal); font-weight: 700; font-size: 15px; letter-spacing: .3px;
  margin: 0 0 16px; text-transform: none;
}
.hero__title {
  color: #fff; font-weight: 500; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.14;
  letter-spacing: -.4px; margin: 0 0 22px; text-shadow: 0 1px 14px rgba(0,0,0,.35);
}
.hero__disclaimer { color: #fff; font-size: 18px; line-height: 1.5; margin: 0; text-shadow: 0 1px 10px rgba(0,0,0,.35); }

.article { background: var(--bg); }

.article__meta {
  max-width: var(--measure); margin: 0 auto; padding: 28px var(--pad-x) 0;
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
  color: var(--ink); font-size: 15px;
}
.article__meta span { display: inline-flex; align-items: center; gap: 9px; }
.article__meta img { width: 18px; height: 18px; opacity: .8; }

.article__audience {
  max-width: var(--measure); margin: 22px auto 0; padding: 18px var(--pad-x);
  color: var(--ink-soft); font-size: 14px; font-weight: 700; line-height: 1.55;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* The gap below is the break between the statement and the article proper, so
   it is wider than the space between two paragraphs. */
.article__standfirst {
  max-width: var(--measure); margin: 40px auto 34px; padding: 0 var(--pad-x);
  color: var(--ink); font-size: clamp(20px, 2.3vw, 26px); font-weight: 300; line-height: 1.4;
}
.article__body { padding-top: 14px; }
.article__body > * { max-width: var(--measure); margin-left: auto; margin-right: auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.article__body h2 {
  font-size: clamp(23px, 2.8vw, 32px); font-weight: 400; color: var(--ink);
  margin: 52px auto 18px; scroll-margin-top: var(--scroll-offset, 90px);
}
.article__body h3 { font-size: clamp(19px, 2vw, 23px); font-weight: 500; margin: 34px auto 12px; scroll-margin-top: var(--scroll-offset, 90px); }
.article__body p { font-size: 16px; line-height: 1.7; margin: 0 auto 20px; color: var(--ink-body); }
.article__body a { font-weight: 500; }
.article__body a.reference-link { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
.article__body a.reference-link:hover { color: #5a5a5a; }
.article__body ul, .article__body ol { font-size: 16px; line-height: 1.7; color: var(--ink-body); margin: 0 auto 20px; padding-left: 40px; }
.article__body li { margin-bottom: 8px; }

.keyfig {
  max-width: var(--measure); margin: 34px auto; padding: 22px 26px;
  background: var(--navy); border-radius: var(--radius); color: #fff;
  display: flex; align-items: baseline; gap: 8px 20px; flex-wrap: wrap;
}
.keyfig__num { font-size: clamp(30px, 4.4vw, 46px); font-weight: 700; color: #fff; line-height: 1; }
.keyfig__label { flex: 1 1 260px; color: rgba(255,255,255,.82); font-size: 14.5px; line-height: 1.5; }

/* Reference sources and citations, set apart from body copy and from the risk
   disclosures (a hairline rule, a label, smaller muted text, hanging indent so
   each reference reads as its own line). */
.sources { max-width: var(--measure); margin: 32px auto 0; padding-top: 16px; border-top: 1px solid var(--line); }
.article__body .sources__item { font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 8px; padding-left: 20px; text-indent: -20px; }
.article__body .sources__item:last-child { margin-bottom: 0; }

/* Footnote reference markers link to the source but read as quiet superscripts
   in the surrounding text colour, not as blue body links. */
.article__body sup a { color: inherit; text-decoration: none; font-weight: inherit; }
.article__body sup a:hover { text-decoration: underline; text-underline-offset: 2px; }
.article__body [id^="src-"] { scroll-margin-top: var(--scroll-offset, 90px); }

/* Three cards is the default. Two and four are supported through a modifier;
   four go two-by-two on tablet instead of shrinking to unreadable columns. */
.examples {
  max-width: var(--measure); margin: 30px auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.examples--2 { grid-template-columns: repeat(2, 1fr); }
.examples--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .examples--4 { grid-template-columns: repeat(2, 1fr); } }
.example {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px; display: flex; flex-direction: column;
}
.example__tag { color: var(--teal-dark); font-weight: 700; font-size: 14px; letter-spacing: .4px; text-transform: uppercase; margin-bottom: 10px; }
.example__stat { color: var(--navy); font-weight: 700; font-size: clamp(26px, 3vw, 34px); line-height: 1; margin-bottom: 12px; }
.example__desc { color: var(--ink-body); font-size: 14px; line-height: 1.55; margin: 0; }
@media (max-width: 820px) { .examples, .examples--2, .examples--4 { grid-template-columns: 1fr; } }

/* Numbered takeaways: an enumerated set of points, each with a short lead and
   a paragraph. Hairline rules, not boxes: the text cards already carry the
   boxed treatment, and these run too long to sit in a card without stranding a
   column. The numeral marks it as a set. */
.takeaways { max-width: var(--measure); margin: 32px auto; }
.takeaway {
  display: grid; grid-template-columns: 52px 1fr; gap: 0 18px;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.takeaway:last-child { border-bottom: 1px solid var(--line); }
.takeaway__num {
  color: var(--teal-dark); font-weight: 700; font-size: 15px;
  letter-spacing: .06em; padding-top: 3px;
}
.article__body .takeaway__head { color: var(--navy); font-weight: 700; font-size: 18px; line-height: 1.35; margin: 0 0 8px; }
.article__body .takeaway p:last-child { margin: 0; }
@media (max-width: 640px) {
  .takeaway { grid-template-columns: 1fr; gap: 6px; }
  .takeaway__num { padding-top: 0; }
}

.pullquote {
  max-width: var(--measure); margin: 40px auto; padding: 0 var(--pad-x);
  border: 0;
}
.pullquote blockquote {
  margin: 0; color: var(--navy); font-weight: 300;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; border-left: 3px solid var(--teal); padding-left: 24px;
}
/* Quotation marks are what separate a quote from an emphasised statement, so
   they follow the attribution rather than being typed into the copy: a pull
   quote with a name attached is something a person said and takes marks; one
   without is a statement and takes none. Fidelity sets single marks, never
   double. Written this way an author cannot forget them, or add them to a
   statement by mistake. Where :has() is unavailable no marks are drawn, which
   is the statement styling, never a broken half-quote. */
.pullquote:has(.pullquote__by) blockquote::before { content: "\2018"; }
.pullquote:has(.pullquote__by) blockquote::after { content: "\2019"; }
/* Attribution, when the quote is something someone said. Sits under the quote,
   inside the same rule, at body size so it reads as a credit not a second quote. */
.pullquote__by {
  margin: 14px 0 0; padding-left: 24px; border-left: 3px solid transparent;
  color: var(--ink-soft); font-size: 16px; line-height: 1.5; font-style: normal;
}
.pullquote__by strong { color: var(--ink); font-weight: 700; }

.figure { max-width: var(--measure-wide); margin: 40px auto; padding: 0 var(--pad-x); }
.figure__frame { border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); cursor: zoom-in; }
.figure__frame img { width: 100%; display: block; transition: transform .5s var(--ease); }
.figure__frame:hover img { transform: scale(1.02); }
.figure figcaption { color: var(--ink-soft); font-size: 16px; margin-top: 12px; }

.article__body .smallnote { max-width: var(--measure); margin: 14px auto 0; color: var(--ink-soft); font-size: 16px; line-height: 1.55;}

/* The promotional block, in the colour the site already uses for "do
   something", not the navy the factual figure sits on. Compliance asked for the
   two to be told apart; marking the promotional one is the safer half to
   change, since the spotlight sits quietly inside the article and carries a
   supplied badge that constrains it. */
.cta {
  max-width: var(--measure); margin: 56px auto; padding: 32px clamp(24px,3vw,40px);
  background: var(--blue-dark); border-radius: var(--radius-lg); color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
}
.cta__text { flex: 1 1 260px; }
.cta__text h3 { color: #fff; font-weight: 400; font-size: 22px; margin: 0 0 6px; }
.cta__text p { color: rgba(255,255,255,.8); font-size: 15px; margin: 0; }
/* secondary button (CTA block) */
.cta__btn {
  flex: 0 0 auto; background: #fff; color: var(--blue-dark); font-weight: 400; font-size: 16px;
  padding: 10px 20px; border-radius: 8px; transition: background .15s var(--ease), transform .1s var(--ease);
}
.cta__btn:hover { background: #EAF2F8; text-decoration: none; }
.cta__btn:active { transform: translateY(1px); }

/* on narrow screens keep the shaded blocks inside the container rather than
   letting them run edge to edge */
@media (max-width: 800px) {
  .cta, .keyfig { margin-left: var(--pad-x); margin-right: var(--pad-x); }
}

.author {
  max-width: var(--measure); margin: 48px auto; padding: 26px var(--pad-x);
  border-top: 1px solid var(--line); display: flex; gap: 20px; align-items: flex-start;
}
.author__photo { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--bg-alt); }
.author__photo img { width: 100%; height: 100%; object-fit: cover; }
.author__name { color: var(--ink); font-weight: 700; font-size: 17px; margin: 0 0 2px; }
.article__body .author__credentials { color: var(--ink-soft); font-size: 13px; letter-spacing: .03em; text-transform: uppercase; margin: 0 0 4px; }
.author__role { color: var(--blue-link); font-size: 14px; margin: 0 0 10px; }
.author__bio { color: var(--ink-body); font-size: 14.5px; line-height: 1.6; margin: 0; }

.related { background: var(--bg-alt); padding: clamp(48px,6vw,80px) 0; margin-top: 40px; }
.related__inner { max-width: var(--measure-wide); margin: 0 auto; padding: 0 var(--pad-x); }
.related__title { font-size: clamp(22px,2.6vw,30px); font-weight: 400; color: var(--ink); margin: 0 0 28px; }
/* Auto-fill so all published articles show as compact cards that wrap to more
   rows as the catalogue grows (auto-fill keeps cards small rather than stretching). */
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .related__grid { grid-template-columns: 1fr 1fr; } }
/* heading row: "Related insights" on the left, the hub button on the right */
.related__head { display: flex; align-items: center; justify-content: space-between; gap: 20px 24px; flex-wrap: wrap; margin: 0 0 28px; }
.related__head .related__title { margin: 0; }
/* Text link: the step below a secondary button in the Fidelity button hierarchy.
   No box, and no underline because it carries an icon (design.fil.com/components/buttons).
   The arrow nudges on hover so the link still has a clear interactive state. */
.related__more {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  color: var(--blue-link); background: transparent; font-size: 16px; font-weight: 400;
  transition: color .15s var(--ease);
}
.related__more:hover { color: var(--navy); text-decoration: none; }
.related__more span { transition: transform .15s var(--ease); }
.related__more:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .related__more:hover span { transform: none; } }
.rcard {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.rcard:hover { text-decoration: none; }

.rcard__img { display: block; aspect-ratio: 16 / 9; background: var(--bg-alt); overflow: hidden; }
.rcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.rcard:hover .rcard__img img { transform: scale(1.05); }
.rcard__body { display: block; padding: 14px 18px 16px; }
.rcard__kicker { display: block; color: var(--teal-dark); font-weight: 700; font-size: 14px; margin: 0 0 6px; }
.rcard__heading { display: block; color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.25; margin: 0 0 10px; }

.rcard__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  color: var(--ink-soft); font-size: 14px;
}
/* Author and date each carry their own icon, matching the article byline. This
   replaces the separator dot, which was left stranded at the start of a line
   whenever the two items wrapped onto separate rows. */
.rcard__author, .rcard__date { display: inline-flex; align-items: center; gap: 6px; }
.rcard__author { color: var(--ink); font-weight: 500; }
.rcard__author img, .rcard__date img { width: 14px; height: 14px; opacity: .7; flex: 0 0 auto; }
@media (max-width: 640px) { .related__grid { grid-template-columns: 1fr; } }

.site-footer { background: #20242b; color: rgba(255,255,255,.82); padding: clamp(40px,5vw,64px) 0 40px; }
.site-footer__inner { max-width: var(--measure-wide); margin: 0 auto; padding: 0 var(--pad-x); }
.site-footer__logo img { height: 30px; margin-bottom: 22px; }

.site-footer__master {
  margin: 0 0 26px; padding: 0 0 24px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
}
/* the vertical padding is a tap target, not spacing: at 14px over a 1.2 line
   these came to 17px tall, under the 24px minimum a list of links has to meet.

   The space between the links is the row's own gap rather than padding inside
   them, and the divider is drawn in the middle of that gap by a pseudo-element
   that takes up no room. That is what lets the divider be dropped from the
   first link on a wrapped line without the link changing width: were it a
   border and a padding, taking them away would make the link narrower, which
   can pull it back onto the line above, which makes it no longer the first on a
   line — and the row never settles. */
.site-footer__master a { position: relative; color: rgba(255,255,255,.78); font-size: 14px; padding: 4px 0; line-height: 1.2; }
.site-footer__master a::before {
  content: ""; position: absolute; left: -14px; top: 0; bottom: 0;
  border-left: 1px solid rgba(255,255,255,.22);
}
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; }
.site-footer__legal p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.58); margin: 0 0 13px; }
.site-footer__legal strong { color: rgba(255,255,255,.88); font-weight: 700; }
.site-footer__legal a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
.site-footer__legal a:hover { color: #5a5a5a; }
.site-footer__code { letter-spacing: .5px; }
.site-footer__copy { color: rgba(255,255,255,.72) !important; margin-top: 6px !important; }
/* nothing to divide from: the first link in the row, and the first on any line
   the row has wrapped onto (marked by site-footer.js, which is the only place
   that can see where the wraps fall) */
.site-footer__master a:first-child::before,
.site-footer__master a.is-line-start::before { content: none; }
.site-footer__master a:hover { color: #fff; }

.toc {
  position: sticky; top: 96px; align-self: start;
  font-size: 16px;
}
.toc__label { color: var(--ink-soft); font-weight: 700; font-size: 14px; letter-spacing: .8px; margin: 0 0 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc li { margin: 0; }
.toc a { display: block; color: var(--ink-soft); padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; line-height: 1.35; }
.toc a:hover { color: var(--ink); text-decoration: none; }
.toc a.is-active { color: var(--blue); border-left-color: var(--blue); font-weight: 500; }

.article__layout { max-width: var(--measure-wide); margin: 0 auto; position: relative; }
.article__main { min-width: 0; }
@media (min-width: 1080px) {
  /* contents rail on the left, article beside it. the layout carries the side
     padding so the rail starts on the same left edge as the hero and the header. */
  .article__layout { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: 0 var(--rail-gap); align-items: start; padding: 0 var(--pad-x); }
  /* the rail comes after the article in the markup, so both are pinned to row 1
     to stop the rail being pushed onto a second row */
  .article__layout .toc-rail { grid-column: 1; grid-row: 1; padding-top: 34px; }
  .article__main { grid-column: 2; grid-row: 1; max-width: 764px; padding-left: 0; padding-right: 0; }
  .article__main > .article__meta,
  .article__main > .article__audience,
  .article__main > .article__standfirst,
  .article__main .article__body,
  .article__main .article__body > * { margin-left: 0; margin-right: auto; padding-left: 0; padding-right: 0; }

  .article__main .article__body > .keyfig { padding: 22px 26px; }
  .article__main .article__body > .cta { padding: 32px clamp(24px, 3vw, 40px); }

  .article__main .article__body > ul,
  .article__main .article__body > ol { padding-left: 40px; }

  .article__main .article__body > .chart,
  .article__main .article__body > .examples,
  .article__main .article__body > .figure { max-width: 100%; }
}
.toc-rail { display: none; }
@media (min-width: 1080px) { .toc-rail { display: block; } }

/* swipeable section nav for tablet and mobile (built by article.js).
   fixed and hidden until the scrolled navbar appears, then slides in with it
   (top offset + is-visible toggled in article.js). */
.toc-slider {
  position: fixed; top: 0; left: 0; right: 0; z-index: 69;
  padding: 9px 0 7px;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 14px rgba(10,46,69,.06);
  /* fully hidden above the viewport at top:0; when shown it drops to sit right
     below the header (offset provided by --slider-top from article.js) */
  transform: translateY(-140%);
  transition: transform .35s var(--ease);
  pointer-events: none;
}
.toc-slider.is-visible { transform: translateY(var(--slider-top, 51px)); pointer-events: auto; }
@media (min-width: 1080px) { .toc-slider { display: none; } }
.toc-slider__track {
  display: flex; gap: 24px; overflow-x: auto; scroll-behavior: smooth;
  padding: 0 var(--pad-x) 8px; margin: 0; list-style: none;
  scroll-snap-type: x proximity; scroll-padding-left: var(--pad-x);
  /* scrollbar hidden; the blurred fade on the right signals swipeability */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.toc-slider__track::-webkit-scrollbar { display: none; }
.toc-slider__track li { flex: 0 0 auto; scroll-snap-align: start; }
/* plain text links, highlighted like the desktop contents list */
.toc-slider__track a {
  display: block; white-space: nowrap; font-size: 16px; line-height: 1.3;
  color: var(--ink-soft); padding: 4px 0; border-bottom: 2px solid transparent;
}
.toc-slider__track a:hover { color: var(--ink); text-decoration: none; }
.toc-slider__track a.is-active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 500; }
/* subtle blurred fade on the right edge, signalling there is more to swipe to.
   Clears once the row is scrolled to the end (toggled in article.js). */
.toc-slider__fade {
  position: absolute; top: 0; bottom: 0; right: 0; width: 60px; z-index: 1;
  pointer-events: none;
  /* solid white over the last ~28px so text is fully hidden at the edge,
     then a soft blurred fade to transparent toward the left */
  background: linear-gradient(to left, #fff 0, #fff 46%, rgba(255,255,255,0));
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to left, #000 46%, transparent);
  mask-image: linear-gradient(to left, #000 46%, transparent);
  opacity: 0; transition: opacity .25s var(--ease);
}
.toc-slider.can-scroll .toc-slider__fade { opacity: 1; }

.lmodal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lmodal[hidden] { display: none; }
.lmodal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.lmodal__dialog {
  position: relative; z-index: 1; width: min(92vw, 620px);
  background: #1D2126; color: #DCE1E6; border: 1px solid rgba(255,255,255,.16); border-radius: 16px;
  padding: clamp(26px,4vw,40px); animation: lmodal-in .28s var(--ease) both;
}
@keyframes lmodal-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lmodal__dialog { animation: none; } }
.lmodal__title { color: #fff; font-weight: 700; font-size: 21px; margin: 0 0 18px; }
.lmodal__body p { font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.lmodal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.lmodal__btn { text-align: center; background: #3A414B; color: #fff; font: inherit; font-size: 16px; padding: 13px; border: 0; border-radius: 8px; cursor: pointer; transition: background .15s var(--ease); }
.lmodal__btn:hover { background: #47505B; text-decoration: none; }
@media (max-width: 480px) { .lmodal__actions { grid-template-columns: 1fr; } }

.lightbox { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.85); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 8px; }
.lightbox__close { position: absolute; top: 18px; right: 22px; background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .progress, .subhead, .skip-link, .toc-rail, .lmodal, .lightbox { display: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  body { background: #fff; }
  .hero { min-height: 300px; padding: 40px var(--pad-x) 32px; }
  .article__layout { display: block; }
  .netchart { grid-template-columns: 1fr; }
  /* the row is kept off a page boundary as a unit, since break-inside on the
     cards alone still let the grid split around them */
  .examples { break-inside: avoid; page-break-inside: avoid; }
  .chart, .keyfig, .example, .author, .cta, .figure,
  .netchart__panel, .ftable, .rcard, .pullquote, .takeaway { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .article__body p { orphans: 3; widows: 3; }
}

/* Card rows on paper, from a width up.

   The width floor matters as much as the counts. The design guide renders each
   mobile preview in a real 390px iframe, and print media propagates into it, so
   an unconditional rule here reaches inside the phone frame and overrides the
   820px breakpoint the preview exists to demonstrate. Below 600px nothing here
   applies and the component prints as it renders on a phone.

   Between there and 900px, a portrait page being 703px, the rows go two across.
   The single-column collapse at 820px is a phone layout and would otherwise
   stack them one per line on paper. */
@media print and (min-width: 600px) {
  .examples { grid-template-columns: repeat(2, 1fr); }
  .examples--2 { grid-template-columns: repeat(2, 1fr); }
  .examples--4 { grid-template-columns: repeat(2, 1fr); }
  .related__grid { grid-template-columns: 1fr 1fr; }
}

/* A landscape sheet is wide enough for the layout as authored.

   Keyed off the page width, not (orientation: landscape): Chrome does not
   reliably evaluate the orientation feature against an orientation that @page
   itself declared, so that query never matched and the row stayed at the
   portrait count. A width query is measured against the page box and works. A4
   is 1032px of printable width in landscape against 703px in portrait, so
   900px separates them with room either side. */
@media print and (min-width: 900px) {
  .examples { grid-template-columns: repeat(3, 1fr); }
  /* the modifiers carry .examples too, so they are restated after it */
  .examples--2 { grid-template-columns: repeat(2, 1fr); }
  .examples--4 { grid-template-columns: repeat(4, 1fr); }
}