/* FILQ landing page.

   Sits on top of core.css (tokens, fonts, reset, .glass, .reveal) and
   article.css (the shared site footer, the "leaving the Fidelity website"
   dialog). Only what is specific to the landing page lives here.

   The landing hero is a full-height video panel, a different component from
   the article hero, so it is named .lhero instead of overriding .hero. */

:root {
  /* One container for the whole page, so every block lines up on the same left
     and right edge.

     --lp-outer is the full container box, padding included. 1440px against the
     articles' 1280px, because this page is cards, two-column sections and
     carousels, not a column of prose. --lp-container is the content inside it,
     used by sections that carry the side padding themselves. */
  --lp-outer:     1440px;
  --lp-container: calc(var(--lp-outer) - 2 * var(--pad-x));
  --lp-pad-x:     var(--pad-x);
  /* The tail of the page (key information, risk information, the FAQ and the
     disclosures) is reference material and sits in a narrower column than the
     sections above. One value for the four so they share an edge. */
  --lp-column:    860px;
  /* cap for running text inside the wide container: about 90 characters a
     line in this font */
  --lp-prose:     84ch;

  /* Paragraphs are --lp-body throughout: leads, card copy, biographies, quotes,
     FAQ answers, disclosures. Footnotes, disclaimers and the rating date are
     --lp-fine. Nothing sets its own paragraph size; a lead is separated by
     colour and spacing, not size. */
  --lp-body:      16px;
  --lp-fine:      13.5px;
  --lp-navy:      #0A2E45;
  --lp-sky:       #5BC2E7;
  /* body copy on the navy sections, up from #CBD5DD, which read grey and made
     the copy look lighter than it is */
  --lp-on-navy:   #DCE3E9;
  --lp-muted:     #97A3AC;
}

/* The insights strip and footer are the shared article components, sized from
   --measure-wide (1280px). Here they take the landing container so their edges
   line up with the sections above. landing.css is loaded by this page only, so
   the articles keep theirs. */
#insights .related__inner,
.site-footer__inner { max-width: var(--lp-outer); }

/* ---- footnote markers ------------------------------------------------------
   Every superscript points at a footnote, so all are set small and fixed
   rather than as a share of what they attach to. As a share, the hero marker
   came out at 33px and the yield one at 51px.

   vertical-align: text-top sits the marker's top on the top of the referred
   text's em box, which is where production puts it: level with the top of the
   letters, not part way down. It is defined off the parent's metrics, so it
   holds from 13px small print to the 82px hero with no per-place offset.
   line-height: 1 keeps the marker's box the size of its glyph, so it lands on
   that top edge without opening up the line. */

sup { font-size: .62em; font-weight: 400; line-height: 1; vertical-align: text-top; }

/* display type: fixed, so it does not grow with the 46 to 92px it sits on */
.lhero__title sup,
.yield__big sup,
.filq__title sup, .why__title sup, .moody-sec__title sup { font-size: clamp(12px, 1vw, 16px); }

/* small print is already near the marker's own size, so the step down is
   gentler; .62em of 13px would be too small to see */
.lp-note sup, .yield__note sup, .light-sec__footnote sup,
.viz__ring-text sup, .fcard__title sup { font-size: .78em; }

/* ---- brand lockup --------------------------------------------------------- */

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__logo { display: block; width: auto; }
/* 40px, the height the articles set for the same lockup in their hero and
   sticky header (.hero__brand / .subhead__brand in article.css). The two pages
   must not show the logo at different sizes. */
.brand--compact .brand__logo { height: 40px; }

/* ---- top navigation ------------------------------------------------------- */

.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  max-width: calc(var(--lp-container) + 2 * var(--lp-pad-x)); margin-inline: auto;
  display: flex; align-items: center; gap: 24px;
  padding: 20px var(--lp-pad-x);
}
/* Ranged right, against the call to action, as production has it.

   The links sit closer to each other than the group does to the button. They
   were the other way round (38px between links against 24px to the button),
   which made the button read as a fifth menu item instead of the page's primary
   action. The margin is on the menu, not the bar's gap, because the menu is the
   only child showing at this width; below 860px it is hidden and the bar spaces
   itself. */
.nav__menu { list-style: none; margin: 0 24px 0 auto; padding: 0; display: flex; gap: clamp(16px, 2vw, 28px); }
.nav__menu a { color: #fff; font-size: 16px; opacity: .95; }
.nav__menu a:hover { opacity: 1; text-underline-offset: 4px; }

/* primary button: same colour, radius and size as the article header button
   (.subhead__cta in article.css), so the two pages share one primary. */
.nav__cta {
  background: var(--btn-primary); color: #fff;
  font-size: 16px; font-weight: 400;
  padding: 10px 20px; border-radius: 8px; white-space: nowrap;
  transition: background .15s var(--ease);
}
.nav__cta:hover { background: var(--btn-primary-hover); text-decoration: none; }

.nav__burger { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; }
/* the three bars fold into a cross. They sit 7px apart, so the outer two
   travel that far to meet in the middle before they rotate. */
.nav__burger span {
  width: 24px; height: 2px; background: #fff; display: block; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav__burger span { transition: none; } }

/* sticky header, revealed on scroll */
.snav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--blue);
  transform: translateY(-100%);
  transition: transform .38s var(--ease);
  box-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}
.snav.is-visible { transform: translateY(0); }
.snav__inner {
  display: flex; align-items: center; gap: 24px;
  max-width: calc(var(--lp-container) + 2 * var(--lp-pad-x)); margin: 0 auto;
  padding: 13px var(--lp-pad-x);
}
/* same type and spacing as the nav in the hero: only the bar's height differs */
.snav__menu { list-style: none; margin: 0 24px 0 auto; padding: 0; display: flex; gap: clamp(16px, 2vw, 28px); }
.snav__menu a {
  color: #fff; font-size: 16px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.snav__menu a:hover { opacity: 1; text-underline-offset: 4px; }
.snav__cta {
  background: var(--btn-primary); color: #fff;
  font-size: 16px; font-weight: 400; padding: 10px 20px; border-radius: 8px; white-space: nowrap;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .15s var(--ease);
}
.snav__cta:hover { background: var(--btn-primary-hover); text-decoration: none; }
.snav.is-visible .snav__menu a { opacity: .95; transform: none; }
.snav.is-visible .snav__cta { opacity: 1; transform: none; }
.snav.is-visible .snav__menu li:nth-child(1) a { transition-delay: .06s; }
.snav.is-visible .snav__menu li:nth-child(2) a { transition-delay: .11s; }
.snav.is-visible .snav__menu li:nth-child(3) a { transition-delay: .16s; }
.snav.is-visible .snav__menu li:nth-child(4) a { transition-delay: .21s; }
/* The delay staggers the bar's entrance, so it must apply to opacity and
   transform only. As a single value it also applied to background, which left
   the button taking a quarter of a second to respond to a hover. Order matches
   the transition above: opacity, transform, background. */
.snav.is-visible .snav__cta { transition-delay: .26s, .26s, 0s; }
/* The sticky bar gets the same burger as the one in the hero: below this width
   its links drop into a panel under the bar instead of disappearing, which is
   what they used to do. The panel is positioned against .snav, which is fixed,
   so it hangs under the bar wherever the reader has scrolled to. */
@media (max-width: 860px) {
  .snav__menu { display: none; }
  .snav__cta { margin-left: auto; }
  .snav__menu.is-open {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    background: var(--blue); padding: 12px var(--lp-pad-x) 20px;
    animation: nav-drop .26s var(--ease) both;
  }
  .snav__menu.is-open a { display: block; padding: 10px 0; font-size: 16px; opacity: .95; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .snav { transition: none; }
  .snav__menu a, .snav__cta { transition: opacity .2s var(--ease); transform: none; }
}

/* the burger menu drops the links into a panel under the bar. The primary
   button stays in the bar rather than going into the panel: on the article
   pages it is present in the hero at every breakpoint, and the landing page
   should not be the one place a reader has to open a menu to find it. */
@media (max-width: 860px) {
  .nav__menu { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__burger { display: flex; }
  .nav__menu.is-open {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    background: var(--blue); padding: 12px var(--lp-pad-x) 20px;
  }
  .nav__menu.is-open a { display: block; padding: 10px 0; font-size: 16px; }
  /* the panel drops from under the bar rather than appearing whole */
  .nav__menu.is-open { animation: nav-drop .26s var(--ease) both; transform-origin: top; }
  @keyframes nav-drop { from { opacity: 0; transform: translateY(-8px); } }
  @media (prefers-reduced-motion: reduce) { .nav__menu.is-open { animation: none; } }
}
@media (max-width: 560px) {
  /* the bar carries the logo, the button and the burger. The logo keeps its
     40px so it still matches the articles; the button gives up its padding
     rather than its label. */
  .nav { gap: 10px; padding: 16px var(--lp-pad-x); }
  .nav__cta, .snav__cta { font-size: 14px; padding: 9px 12px; }
}

/* ---- hero ----------------------------------------------------------------- */

.lhero {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.lhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.lhero__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .6); }
.lhero__disclaimer {
  position: absolute; top: 96px; left: 0; right: 0; z-index: 5;
  /* 18px, matching production. This is compliance wording, so it is sized to
     the requirement rather than to the visual hierarchy. */
  font-size: 18px; color: #EEEFF0; margin: 0; padding: 0 20px;
}
.lhero__content { position: relative; z-index: 5; padding: 0 20px; }
.lhero__title {
  color: #fff; font-size: clamp(38px, 7vw, 82px);
  font-weight: 300; letter-spacing: -.5px; line-height: 1.05; margin: 0 0 18px;
}
/* the footnote marker is set from the fixed scale below, not the 82px display
   size; see "footnote markers" */
.lhero__title sup { font-weight: 400; }
.lhero__subtitle { font-size: clamp(18px, 2.4vw, 26px); font-weight: 300; margin: 0 0 38px; color: #EDF1F5; }

/* tertiary button: a translucent slate fill, the step below the navy-block
   secondary (.cta__btn in article.css), used only over imagery. */
.lhero__play {
  background: rgba(120, 130, 140, .55);
  border: 0; color: #fff; font-size: 16px; font-family: inherit;
  padding: 15px 34px; border-radius: 8px; cursor: pointer;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background .15s var(--ease);
}
.lhero__play:hover { background: rgba(120, 130, 140, .8); }

.lhero__toggle {
  position: absolute; z-index: 6; bottom: 30px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 38px; border: 0; cursor: pointer;
  background: rgba(150, 158, 166, .5); border-radius: 9px;
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background .15s var(--ease);
}
.lhero__toggle:hover { background: rgba(150, 158, 166, .72); }
.lhero__toggle svg { width: 16px; height: 16px; fill: #fff; }
.lhero__toggle .icon-play { display: none; }
.lhero__toggle[data-playing="false"] .icon-pause { display: none; }
.lhero__toggle[data-playing="false"] .icon-play { display: block; }

@media (max-width: 860px) { .lhero__disclaimer { top: 76px; font-size: 16px; } }
@media (max-width: 600px) {
  .lhero__title { font-size: clamp(30px, 9vw, 40px); }
  .lhero__subtitle { font-size: 18px; }
  /* Sized to its label rather than the screen, and on the primary's box: at the
     desktop padding the gap between the label and the border is visibly wider
     on these than on the primary, which is what showed up on a narrow screen. */
  .lhero__play, a.btn-secondary { padding: 10px 20px; }
}

/* ---- scroll-in ------------------------------------------------------------
   The effect itself is the article one (.reveal in core.css): a 14px lift and a
   fade, over .45s. Nothing here makes it longer or larger.

   All this adds is a stagger for blocks that arrive as a row, so four cards do
   not land in the same instant. The steps are small: the last card is a fifth
   of a second behind the first, which reads as the row settling and not as an
   animation. Anything already in motion (the hero video, the spinning ring, the
   Moody's wipe) is left alone.

   The team rows are excluded: they carry their own transition for the hover and
   open states, and a delay here would slow that too. */

.tokens__grid > .reveal:nth-child(2),
.fgrid > .reveal:nth-child(2),
.keyinfo__grid > .reveal:nth-child(2),
.speakers__grid > .reveal:nth-child(2),
#insights .related__grid > .reveal:nth-child(2) { transition-delay: .07s; }

.fgrid > .reveal:nth-child(3),
.keyinfo__grid > .reveal:nth-child(3),
.speakers__grid > .reveal:nth-child(3),
#insights .related__grid > .reveal:nth-child(3) { transition-delay: .14s; }

.fgrid > .reveal:nth-child(4),
.keyinfo__grid > .reveal:nth-child(4),
.speakers__grid > .reveal:nth-child(4) { transition-delay: .21s; }

/* A heading that sits still while the cards under it move looks like it was
   missed, so the headings carry .reveal too and lead their content by a beat.
   (The eyebrow and heading are two elements; the second follows the first.) */
.team__heading { transition-delay: .06s; }

/* ---- shared dark section furniture ---------------------------------------- */

.filq, .why, .moody-sec, .webinar, .team { background: var(--lp-navy); }

/* A section meeting one of its own colour starts a pixel inside it. Where two
   backgrounds meet on a fractional boundary, likely on any display that is not
   a whole number of device pixels per CSS pixel, neither quite covers the pixel
   they share and the page behind shows through as a hairline. Overlapping
   paints it twice in the one colour. */
.why, .moody-sec, .speakers, .riskinfo { margin-top: -1px; }
.filq, .why { padding: clamp(60px, 9vw, 120px) var(--lp-pad-x); position: relative; overflow: hidden; }
/* Section eyebrow. One size for all of them; they were set per section and had
   drifted to 16px on the dark sections and 18px on the light ones. Only the
   colour varies, because the light sections need a darker blue to hold up. */
.lp-eyebrow, .team__eyebrow, .usecase__eyebrow, .webinar__eyebrow { font-size: 20px; font-weight: 700; }
.lp-eyebrow { color: var(--lp-sky); margin: 0 0 22px; }

/* Section headings, in two sizes by the job the heading does.

   A statement heading carries the argument of its section: a full sentence,
   under an eyebrow and above a lead paragraph. It is the largest type on the
   page after the hero, and there are only three.

   A label heading names what follows: "Key information", "Insights". At the
   statement size a two-word label shouts louder than the copy it introduces, so
   it takes a step down. Every label is the same size, so the page still reads
   as one system.

   Both are light (300); weight is never used to separate them. */
.filq__title, .why__title, .moody-sec__title { font-size: clamp(30px, 3.6vw, 46px); }

.light-sec__heading, .usecase__heading, .team__heading, .partners__heading,
.keyinfo__heading, .riskinfo__heading, .faq__heading, .important__title,
.webinar__title, #insights .related__title { font-size: clamp(26px, 2.6vw, 36px); }
/* Body copy and small print, both from the tokens at the top of the file. */
.lp-lead { color: var(--lp-on-navy); font-size: var(--lp-body); line-height: 1.6; margin: 0 0 22px; }
/* Risk disclosure, not small print. Compliance treats these as disclosure
   rather than footnote, so they take the body size and production's white
   rather than the muted grey they were set in. */
.lp-note { color: #fff; font-size: var(--lp-body); line-height: 20px; }
.lp-note sup { color: inherit; }
.link-u { color: var(--lp-on-navy); text-decoration: underline; text-underline-offset: 2px; }

/* Reference link: a document named inside a run of text. Lifted from the
   articles (a.reference-link in article.css) so the two behave alike. It takes
   the colour of the surrounding text, is marked by an underline rather than
   colour or weight, and greys on hover. */
.reference-link {
  color: inherit; font-weight: inherit;
  text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px;
  transition: color .15s var(--ease);
}
.reference-link:hover { color: #5a5a5a; }

/* ---- what is FILQ --------------------------------------------------------- */

.filq__bg {
  position: absolute; top: 50%; right: -4vw; transform: translateY(-50%);
  width: min(1000px, 88vw); aspect-ratio: 1140 / 680;
  background: url("../img/landing/pattern1-transparent.webp") no-repeat right center / contain;
  z-index: 0; pointer-events: none;
}
/* Legibility scrim. The fibre pattern is bright (white and cyan strands at
   full strength), so white text over it has nowhere near the contrast it needs.
   A gradient between the pattern and the content runs from flat navy under the
   copy to nothing at the far edge, so the pattern keeps its strength where it
   is decoration and gives it up where it is a background to read against. .why
   does the same, mirrored to where its copy sits. */
.filq::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* stops taken off the layout: the copy column ends around 45% of the section */
  background: linear-gradient(to right,
    rgba(10, 46, 69, .97) 0%,
    rgba(10, 46, 69, .93) 46%,
    rgba(10, 46, 69, .55) 62%,
    rgba(10, 46, 69, 0) 84%);
}
.filq__grid {
  max-width: var(--lp-container); margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.filq__title { color: #fff; font-weight: 300; line-height: 1.14; letter-spacing: -.4px; margin: 0 0 26px; }
.filq__lead { max-width: 620px; margin-bottom: 32px; }
.filq__notes { max-width: 620px; margin: 42px 0 0; }

/* Secondary button: the grey step below the primary in the Fidelity button
   hierarchy. The same colour the article CTA block button (.cta__btn)
   composites to, kept solid so it reads the same on light and dark. */
.btn-secondary {
  display: inline-block; background: var(--btn-secondary); color: #fff;
  font-size: 16px; padding: 15px 32px; border-radius: 8px;
  transition: background .15s var(--ease);
}
.btn-secondary:hover { background: var(--btn-secondary-hover); text-decoration: none; }
.btn-secondary--wide { margin-top: clamp(28px, 4vw, 48px); }
/* Light variant, for a secondary button sitting on its own under a block of
   cards instead of beside body copy, where the grey fill would read as a third
   card. The hover is quiet: a shade down and a hairline lift. */
.btn-secondary--light { background: rgb(238, 239, 240); color: var(--blue-link); }
.btn-secondary--light:hover { background: #E1E3E5; }

/* ---- pull-down button ------------------------------------------------------
   For a call to action with more than one destination: the two FILQ share
   classes have a page each on RWA.xyz, so one button opens a short menu instead
   of the section carrying two near-identical buttons.

   The button is the page's existing secondary button, with a chevron added to
   show that it opens rather than navigates. Everything here styles the menu. */

.pulldown { position: relative; display: inline-block; }
.pulldown__btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: inherit; border: 0; cursor: pointer;
}
.pulldown__chevron {
  width: 11px; height: 7px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s var(--ease);
}
.pulldown__btn[aria-expanded="true"] .pulldown__chevron { transform: rotate(180deg); }

/* Left edges flush with the button, and so with the column the button sits in.
   Centring it under the button pushed the wider menu out past that edge on the
   left, which read as misaligned against everything above it. */
.pulldown__menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  z-index: 40; min-width: max(100%, 236px);
  margin: 0; padding: 6px; list-style: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 30px rgba(35, 48, 59, .14);
}
.pulldown__menu[hidden] { display: none; }
.pulldown__menu a {
  display: block; padding: 11px 14px; border-radius: 6px;
  color: var(--ink); font-size: 15px; line-height: 1.35;
  text-align: left; white-space: nowrap;
}
.pulldown__menu a:hover,
.pulldown__menu a:focus-visible { background: var(--bg-alt); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .pulldown__chevron { transition: none; }
}

.filq__visual { position: relative; }
.viz__glass {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4% 5%; gap: 2%;
}
.viz__ring { position: relative; height: 84%; aspect-ratio: 1; display: grid; place-items: center; }
.viz__ring img { position: absolute; inset: 0; width: 100%; height: 100%; animation: viz-spin 9s linear infinite; }
@keyframes viz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .viz__ring img { animation: none; } }
.viz__ring-text {
  position: relative; z-index: 1; margin: 0; text-align: center; color: #fff;
  /* production's 18/28. It used to scale with the viewport, which is what shrank
     it to 12px on a phone; the ring is sized to hold it instead. */
  font-size: 18px; line-height: 28px; max-width: 78%;
}
.viz__ring-text sup { color: inherit; }
.viz__label { margin: 0; color: #fff; font-weight: 700; font-size: clamp(14px, 1.5vw, 20px); white-space: nowrap; }

@media (max-width: 900px) {
  /* Stacked, and in the order the section reads: the heading and the copy, then
     the ring, then the two footnotes under it. The footnotes belong to the copy
     block in the markup, which is right on a wide screen, so display: contents
     lifts that block's children into the one column and the footnotes are
     ordered past the ring — the same trick .moody-sec uses further down.

     The row gap goes with it, or it would open up between every line of the
     copy, each of which already carries its own spacing. It comes back as a
     margin on the two pieces that need it, at the width the gap itself had. */
  .filq__grid { grid-template-columns: 1fr; row-gap: 0; }
  .filq__text { display: contents; }
  /* blockified as a grid item, so it is held to its own width again */
  .filq__text > .btn-secondary { justify-self: start; }
  .filq__visual { position: relative; margin-top: clamp(32px, 5vw, 72px); }
  .filq__notes { order: 1; margin-top: clamp(32px, 5vw, 72px); }
  /* square rather than 16:10: at the wide ratio the ring is only ~176px across
     on a phone and 18px copy cannot sit inside it. Lifted over the strand field
     set behind it at the foot of this block. */
  .viz__glass { position: relative; z-index: 1; aspect-ratio: 1 / 1; }
  /* the label sits at the same 18px as the copy in the ring; the viewport-scaled
     size dropped it to 14px here */
  .viz__label { font-size: 18px; }
  .filq__bg { right: -30vw; width: 150vw; opacity: .8; }
  /* the scrim turns with the stack: flat navy over the top, where the copy is
     now read, giving the pattern back at the foot of the section behind the
     ring, where it is decoration */
  .filq::after {
    background: linear-gradient(to bottom,
      rgba(10, 46, 69, .97) 0%,
      rgba(10, 46, 69, .95) 62%,
      rgba(10, 46, 69, .78) 79%,
      rgba(10, 46, 69, .5) 100%);
  }
}

/* ---- why FILQ ------------------------------------------------------------- */

.why__bg {
  position: absolute; top: 50%; left: -6vw; transform: translateY(-50%);
  width: min(1000px, 82vw); aspect-ratio: 1622 / 710;
  background: url("../img/landing/pattern2-transparent.webp") no-repeat left center / contain;
  z-index: 0; pointer-events: none;
}
/* mirror of the scrim on the section above: the copy is on the right here, so
   the pattern keeps the left of the section and is dimmed under the text */
.why::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to left,
    rgba(10, 46, 69, .97) 0%,
    rgba(10, 46, 69, .93) 49%,
    rgba(10, 46, 69, .55) 66%,
    rgba(10, 46, 69, 0) 86%);
}
.why__grid {
  max-width: var(--lp-container); margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.yield-glass { border-radius: 24px; padding: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 48px); text-align: center; }
.yield__label { color: #fff; font-size: clamp(17px, 1.8vw, 22px); margin: 0 0 26px; }
.yield__label sup, .yield__big sup { color: inherit; }
.yield__sub { color: var(--teal); font-size: clamp(17px, 1.8vw, 22px); margin: 0 0 6px; }
.yield__big { color: var(--teal); font-weight: 300; font-size: clamp(52px, 8vw, 92px); line-height: 1; margin: 0 0 26px; }
/* a data source note rather than a disclosure: production sets these at 14px */
.yield__note { color: #fff; font-size: 14px; line-height: 1.55; margin: 0 auto; max-width: 560px; }
.why__footnote { margin: 26px 0 0; }
.why__title { color: #fff; font-weight: 300; line-height: 1.1; letter-spacing: -.4px; margin: 0 0 26px; }
.why__lead { max-width: 620px; }

/* Icon over a title over a line of copy, three across, centred. The icons are
   three different shapes at three different widths, so ranged left they share a
   box edge but not a visual one. */
.features { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.feature { text-align: center; }
.feature__icon { height: 64px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 18px; }
.ficon { display: block; }
.feature__title { color: var(--teal); font-weight: 700; font-size: var(--lp-body); margin: 0 0 8px; }
.feature__desc { color: var(--lp-on-navy); font-size: var(--lp-body); line-height: 1.5; margin: 0 auto; max-width: 26ch; }

@media (max-width: 900px) {
  /* As "what is FILQ": stacked, heading and copy first, the graphic under them.
     The yield panel is written first because it holds the left column on a wide
     screen, so it is the one that moves. */
  .why__grid { grid-template-columns: 1fr; }
  .why__right { order: -1; }
  .yield-field { position: relative; }
  .yield-glass { position: relative; z-index: 1; }
  .why__bg { left: -30vw; width: 150vw; opacity: .7; }
  .features { gap: 20px; }
  /* flat navy over the copy at the top, the pattern given back at the foot
     behind the yield panel */
  .why::after {
    background: linear-gradient(to bottom,
      rgba(10, 46, 69, .97) 0%,
      rgba(10, 46, 69, .95) 70%,
      rgba(10, 46, 69, .78) 85%,
      rgba(10, 46, 69, .5) 100%);
  }

  /* ---- the strand field behind a panel on a phone ---------------------------
     On a wide screen each glass panel sits over the section artwork, which is what
     makes it read as glass. Stacked on a phone the artwork is elsewhere in the
     section and the panels were left as boxes on flat navy, so the field is given
     back to them here: a piece of the same artwork, held to the panel's own box so
     it can never drift under a line of text, and faded out at the edges so it
     reads as a field rather than a cropped rectangle.

     How far this can be pushed is set by the text in front of it, and the two
     panels do not have the same ceiling, so they are set apart below.

     Measured off the rendered backdrop — the artwork behind its mask, over the
     navy, through the panel's 8px backdrop blur, under the .glass wash — taking
     the worst point in the area each panel covers, against the 4.5:1 AA minimum
     for normal-size text:

       ring panel   white 5.4:1   nothing but white text on it, so it runs the
                                  artwork at full strength with a wide mask core
       yield panel  white 10.5:1  the teal "7-day yield" and "3.8% p.a." are the
                    teal  4.6:1   limit here. A mid-tone colour loses contrast as
                                  the backdrop lightens, where white still has
                                  plenty, so this panel stops earlier than the
                                  ring one despite the same opacity

     The yield panel cannot go further while those two lines stay teal at this
     weight. Widening its mask core or moving the artwork's dense left edge under
     it both drop the teal to 3.2-3.8:1, which is a fail.

     Note this leans on the backdrop blur, which is what turns a hard strand into
     a soft one. A browser that cannot do backdrop-filter would show the strands
     unsoftened and the figures would not hold, so the field is not drawn at all
     there — see the @supports below. */
  .filq__visual::before,
  .yield-field::before {
    content: ""; position: absolute; z-index: 0; inset: -9% -20%;
    background-repeat: no-repeat; background-position: center;
    pointer-events: none;
  }
  /* white text only, so the artwork runs full strength and stays at full
     strength further out before the edge fade takes it */
  .filq__visual::before {
    opacity: 1;
    background-image: url("../img/landing/pattern1-transparent.webp");
    /* larger than the box, so the strands read at a size the blur cannot flatten.
       Cover would be 141% here; this is as far as it goes before the white text
       on the panel drops under 5:1 */
    background-size: 175% auto;
    -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
  }
  /* teal figures in front, so the core stays tight */
  .yield-field::before {
    opacity: 1;
    background-image: url("../img/landing/pattern2-transparent.webp");
    /* Cover would be 154%. Scaling well past it spreads the artwork's bright
       cluster out instead of landing it in one place behind the panel, so the
       strands both read bigger and measure better: the teal goes 4.7:1 -> 4.9:1
       and the artwork reaches 91% of the panel rather than 83%. */
    background-size: 260% auto;
    -webkit-mask-image: radial-gradient(closest-side, #000 46%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 46%, transparent 100%);
  }
  /* No blur to soften the strands means the contrast above does not hold, so the
     panels stay on plain navy rather than being lit by artwork that cannot be
     read through. Same for a reader who has asked the system for more contrast
     or for less transparency. */
  @supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .filq__visual::before, .yield-field::before { display: none; }
  }
  @media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
    .filq__visual::before, .yield-field::before { display: none; }
  }
}
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* Risk warnings on a phone. 14px over 24px, matching production: lighter than
   the desktop treatment, to take weight out of the disclosure on a small
   screen. Agreed with compliance, so these numbers are a requirement. */
@media (max-width: 600px) {
  .lp-note { font-size: 14px; line-height: 24px; }
  .yield__note { font-size: 14px; line-height: 24px; }
  .light-sec .light-sec__footnote { font-size: 14px; line-height: 24px; }
}

/* ---- Moody's rating ------------------------------------------------------- */

.moody-sec { padding: clamp(60px, 9vw, 120px) var(--lp-pad-x); position: relative; overflow: hidden; }
.moody-sec__grid {
  max-width: var(--lp-container); margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.moody-sec__visual { position: relative; display: flex; align-items: center; justify-content: center; }
.moody-sec__bg {
  position: absolute; top: 50%; left: 82%;
  transform: translate(-50%, -50%) rotate(180deg);
  width: 236%; aspect-ratio: 1920 / 1080;
  background: url("../img/landing/pattern3-transparent.webp") no-repeat center / contain;
  z-index: -1; pointer-events: none;
}
.moody-sec__title { color: #fff; font-weight: 300; line-height: 1.12; letter-spacing: -.4px; margin: 0 0 26px; }
.moody-sec__lead { max-width: 620px; margin-bottom: 30px; }
.moody-sec__date { color: var(--lp-muted); font-size: var(--lp-fine); margin: 0; }
.moody-glass {
  position: relative; z-index: 1; width: 74%; aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center; border-radius: 24px;
}
.moody { display: inline-flex; align-items: stretch; background: #0B1A2A; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; padding: 6px; }
.moody__brand {
  position: relative; overflow: hidden;
  background: #1560AB; color: #fff; font-weight: 700; border-radius: 6px;
  padding: 8px 18px; font-size: clamp(18px, 2vw, 26px); display: flex; align-items: center;
}
.moody__rating { color: #fff; font-weight: 400; padding: 8px 20px; font-size: clamp(18px, 2vw, 26px); display: flex; align-items: center; }
.moody.anim-init { clip-path: inset(0 100% 0 0); transition: clip-path .85s cubic-bezier(.33, 0, .2, 1); }
.moody.anim-init.is-revealed { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .moody.anim-init { clip-path: none; transition: none; } }

@media (max-width: 900px) {
  .moody-sec__grid { grid-template-columns: 1fr; gap: 30px; }
  /* The badge reads better between the claim and the copy supporting it than
     parked at the end of the section. display: contents lifts the heading, lead
     and date out of their wrapper so all four can be ordered in one column. */
  .moody-sec__text { display: contents; }
  .moody-sec__title { order: 1; }
  .moody-sec__visual { order: 2; }
  .moody-sec__lead { order: 3; }
  .moody-sec__date { order: 4; }
  /* The artwork comes off this section on a phone. Stacked, it ran the full
     width behind the copy, and this is the one section with no legibility scrim
     over it: the paragraph under the badge measured 2.7:1 against the brightest
     strands, well short of the 4.5:1 AA minimum. Taken off rather than scrimmed,
     per Fan. Desktop keeps it — the copy sits in its own column there, clear of
     the pattern. */
  .moody-sec__bg { display: none; }

  /* Stacked, the glass panel is a wide empty box with a small badge in the
     middle, a panel away from the sentence it belongs to. The panel goes and
     the badge sits under the copy on the same left edge as the heading and
     date. Desktop is untouched. */
  .moody-glass {
    width: auto; aspect-ratio: auto; justify-content: flex-start;
    background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .moody-sec__visual { justify-content: flex-start; min-height: 96px; }
}

/* ---- light sections: token classes and fund features ---------------------- */

.light-sec { background: var(--bg); padding: clamp(64px, 9vw, 120px) var(--lp-pad-x); }
.light-sec--alt { background: #FCFCFD; }
.light-sec__inner { max-width: var(--lp-container); margin: 0 auto; }
.light-sec__heading { color: var(--ink); font-weight: 300; margin: 0 0 clamp(30px, 4vw, 54px); }

.ic-blue svg, .ic-orange svg { height: 64px; width: auto; display: block; }
.ic-blue svg * { fill: none; stroke: #006193; stroke-width: 4px; stroke-miterlimit: 10; }
.ic-orange svg * { fill: none; stroke: #EA6A19; stroke-width: 4px; stroke-miterlimit: 10; }

.tokens__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 34px); }
.tcard {
  background: var(--bg-alt); border-radius: 14px; padding: clamp(28px, 3vw, 44px);
  display: flex; flex-direction: column; align-items: flex-start;
}
.tcard__icon { margin-bottom: 34px; }
.tcard__title { color: var(--ink); font-weight: 400; font-size: clamp(20px, 2vw, 26px); margin: 0 0 16px; }
.tcard__desc { color: var(--ink-body); font-size: var(--lp-body); line-height: 1.55; margin: 0 0 26px; }

/* text-link pill: the step below a secondary button, so it carries no fill
   until hover (see the article's .related__more for the same idea). margin-top
   keeps it on the bottom of its card: the two cards are the same height but
   carry copy of different lengths, so otherwise one button floats. */
.pill {
  display: inline-block; margin-top: auto; background: #fff; color: var(--blue-link);
  font-weight: 400; font-size: 15px; padding: 11px 24px; border-radius: 999px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.pill:hover { background: var(--blue-link); color: #fff; text-decoration: none; }

.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.fcard {
  background: var(--bg-alt); border-radius: 14px; padding: clamp(22px, 2.2vw, 34px);
  display: flex; flex-direction: column; align-items: flex-start;
}
.fcard__icon { height: 64px; display: flex; align-items: flex-end; margin-bottom: 30px; }
.fcard__title { color: #1C3F5C; font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0 0 14px; }
.fcard__desc { color: var(--ink-body); font-size: var(--lp-body); line-height: 1.55; margin: 0; }
/* the stablecoin conversion risk: disclosure, so body size like the others */
.light-sec__footnote { color: var(--ink-body); font-size: var(--lp-body); line-height: 1.6; margin: clamp(28px, 4vw, 46px) 0 0; max-width: var(--lp-prose); }

@media (max-width: 860px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tokens__grid, .fgrid { grid-template-columns: 1fr; } }

/* ---- webinar -------------------------------------------------------------- */

.webinar { padding: clamp(56px, 8vw, 100px) var(--lp-pad-x) clamp(30px, 5vw, 60px); }
.webinar__card {
  max-width: var(--lp-container); margin: 0 auto;
  background: #14171A; border-radius: 22px; padding: clamp(28px, 4vw, 60px);
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
.webinar__eyebrow { color: var(--teal); margin: 0 0 22px; }
.webinar__title { color: #fff; font-weight: 300; line-height: 1.15; margin: 0 0 26px; }
.webinar__desc { color: #CFD7DD; font-size: var(--lp-body); line-height: 1.6; margin: 0; max-width: 560px; }
.webinar__media { position: relative; }
.webinar__thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0c2231; }
.webinar__thumb img { width: 100%; height: 100%; object-fit: cover; }
.webinar__play {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: 58px; height: 58px; border: 0; cursor: pointer;
  background: var(--btn-primary); border-top-left-radius: 10px; border-bottom-right-radius: 12px;
  display: grid; place-items: center;
  /* background at .15s like every other button; the scale and glow keep their
     own slightly longer timing */
  transition: transform .2s var(--ease), background .15s var(--ease), box-shadow .2s var(--ease);
}
.webinar__play svg { width: 24px; height: 24px; margin-left: 2px; }
.webinar__play:hover { transform: scale(1.09); background: var(--btn-primary-hover); box-shadow: 0 0 0 7px rgba(1, 111, 173, .22); text-decoration: none; }
.webinar__play:active { transform: scale(1.02); }
@media (max-width: 900px) { .webinar__card { grid-template-columns: 1fr; } }

/* ---- webinar speakers -----------------------------------------------------
   The four people on the webinar panel, so this row belongs to the webinar
   above it rather than to the team section further down. */

.speakers { background: var(--lp-navy); padding: clamp(40px, 6vw, 80px) var(--lp-pad-x) clamp(60px, 9vw, 110px); }
.speakers__grid {
  max-width: var(--lp-container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px);
}
.speaker { text-align: center; }
.speaker__avatar {
  width: clamp(96px, 10vw, 132px); aspect-ratio: 1; margin: 0 auto 22px;
  display: block; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #3a4b5c, #223341);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.speaker__avatar img { width: 100%; height: 100%; object-fit: cover; }
.speaker__name { color: #fff; font-weight: 700; font-size: clamp(17px, 1.6vw, 21px); margin: 0 0 12px; }
.speaker__role { color: #CFD7DD; font-size: var(--lp-body); line-height: 1.5; margin: 0; }
@media (max-width: 900px) { .speakers__grid { grid-template-columns: repeat(2, 1fr); row-gap: 44px; } }
@media (max-width: 520px) { .speakers__grid { grid-template-columns: 1fr; } }

/* ---- team ----------------------------------------------------------------- */

/* No artwork behind this one, per Fan: the section is flat navy and the list of
   people carries it. The legibility scrim that stood over the pattern went with
   it — it was the section's own navy at partial alpha, so over flat navy of the
   same colour it painted nothing. */
.team { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) var(--lp-pad-x) clamp(64px, 9vw, 120px); }
.team__inner { position: relative; z-index: 1; max-width: var(--lp-container); margin: 0 auto; }
.team__eyebrow { color: var(--lp-sky); text-align: center; margin: 0 0 18px; }
.team__heading { color: #fff; font-weight: 300; text-align: center; margin: 0 0 clamp(30px, 4vw, 48px); }

/* Narrower than the container. A row is a portrait, two short lines and a
   plus, so at full width the name and the plus sit at opposite ends of the
   screen with nothing between. Capped and centred under the centred heading,
   which also leaves the fibre pattern room on the right. */
.team__list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

.tm {
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.tm:hover { background: rgba(255, 255, 255, .09); }
/* open state matches the mockup: the row lifts off the navy into a lighter
   slate card so the biography reads as a panel, not as more of the list */
.tm.is-open {
  background: linear-gradient(160deg, #4A5462 0%, #2F3742 100%);
  border-color: rgba(255, 255, 255, .22);
}

.tm__head {
  width: 100%; display: flex; align-items: center; gap: 20px;
  padding: 18px clamp(18px, 2.4vw, 28px);
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; color: inherit;
}
.tm__avatar {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #3a4b5c, #223341);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  display: grid; place-items: center;
}
.tm__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tm__id { flex: 1 1 auto; min-width: 0; }
.tm__name, .tm__role { display: block; }
.tm__name { color: #fff; font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0 0 2px; }
.tm__role { color: rgba(255, 255, 255, .82); font-size: var(--lp-body); line-height: 1.4; margin: 0; }

/* the same chevron as the FAQ rows, so both accordions signal the same thing */
.tm__toggle { flex: 0 0 auto; width: 26px; height: 26px; position: relative; }
.tm__toggle::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translate(-50%, -75%) rotate(45deg);
  transition: transform .28s var(--ease);
}
.tm.is-open .tm__toggle::before { transform: translate(-50%, -25%) rotate(-135deg); }

/* Height is set in landing.js from the panel's own content, so the biography
   can be any length. (The grid 0fr/1fr idiom would avoid the measuring, but the
   transition does not settle in current Chrome: the row stays at zero.) */
.tm__panel { overflow: hidden; height: 0; transition: height .3s var(--ease); }
.tm__bio {
  color: rgba(255, 255, 255, .92); font-size: var(--lp-body); line-height: 1.65;
  margin: 0 0 18px; padding: 0 clamp(18px, 2.4vw, 28px);
}
.tm__panel .tm__bio:first-child { padding-top: 4px; }
.tm__panel .tm__bio:last-child { margin-bottom: 24px; }

@media (prefers-reduced-motion: reduce) {
  .tm__panel, .tm__toggle::before, .tm { transition: none; }
}
@media (max-width: 560px) {
  .tm__head { gap: 14px; padding: 16px 18px; }
  .tm__avatar { width: 46px; height: 46px; }
  .tm__name { font-size: 16px; }
  .tm__role { font-size: 14px; }
}

/* ---- use cases ------------------------------------------------------------ */

.usecase { background: var(--bg); padding: clamp(64px, 9vw, 120px) 0; overflow: hidden; }
/* these three carry their own side padding, since the section has none so the
   carousel can run to the edge, so they take the full container box */
.usecase__head { max-width: var(--lp-outer); margin: 0 auto clamp(34px, 5vw, 56px); padding: 0 var(--lp-pad-x); }
.usecase__eyebrow { color: #0A5C8E; margin: 0 0 22px; }
.usecase__heading { color: var(--ink); font-weight: 300; margin: 0 0 22px; }
.usecase__lead { color: var(--ink-body); font-size: var(--lp-body); line-height: 1.6; margin: 0; max-width: 680px; }

/* The row starts on the container's left edge like every other section but
   runs past the right edge to the edge of the screen, where the cut-off card is
   what says there is more to move through. So the viewport is full width with
   only a left inset, sized to land on the container edge. */
.uc-viewport {
  max-width: none; margin: 0;
  padding-left: max(var(--lp-pad-x), calc((100% - var(--lp-container)) / 2));
  /* Matching inset on the right. The row still runs past the edge of the screen
     at rest, because overflow clips at the padding box so the cards show
     through it, but the track is now the container's width, so the last card
     rests on the container's right edge and not hard against the screen. */
  padding-right: max(var(--lp-pad-x), calc((100% - var(--lp-container)) / 2));
  overflow: hidden;
  /* drag horizontally, scroll the page vertically */
  touch-action: pan-y;
  cursor: grab;
}
.uc-viewport.is-dragging { cursor: grabbing; }
.uc-track {
  display: flex; gap: clamp(16px, 2vw, 28px);
  transition: transform .45s var(--ease); will-change: transform;
  user-select: none; -webkit-user-select: none;
}
/* while a drag is in progress the track follows the pointer directly */
.uc-viewport.is-dragging .uc-track { transition: none; }
.uc-track img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.uc-card {
  position: relative; flex: 0 0 clamp(230px, 29%, 300px);
  aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden;
  background: var(--lp-navy); padding: clamp(20px, 1.8vw, 28px);
}
.uc-card__eyebrow { color: #4FC3E8; font-weight: 700; font-size: 15px; margin: 0 0 10px; position: relative; z-index: 2; }
.uc-card__title { color: #fff; font-weight: 300; font-size: clamp(19px, 1.5vw, 24px); line-height: 1.2; margin: 0; position: relative; z-index: 2; }
.uc-card__pattern { position: absolute; left: 0; right: 0; bottom: 0; height: 68%; z-index: 1; }
.uc-card__pattern img { width: 100%; height: 100%; object-fit: cover; }
.uc-card__plus, .uc-card__close {
  position: absolute; z-index: 3; width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; transition: transform .2s var(--ease);
}
.uc-card__plus svg, .uc-card__close svg { width: 26px; height: 26px; }
.uc-card__plus { right: 12px; bottom: 12px; }
.uc-card__plus:hover { transform: scale(1.18) rotate(90deg); }
.uc-card__close { right: 12px; top: 12px; }
.uc-card__close:hover { transform: scale(1.12); }
.uc-card__detail {
  position: absolute; inset: 0; z-index: 4; background: var(--lp-navy);
  padding: clamp(20px, 1.8vw, 28px);
  /* the card is a fixed shape and the copy is not, so the longest of them
     scrolls inside itself rather than spilling out of the bottom */
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  /* The operating system's own bar is heavy enough to read as part of the card.
     Same thin treatment as the market pop-up, in the card's colours. Both
     spellings: the standard properties where supported, the -webkit-
     pseudo-elements otherwise. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.uc-card__detail::-webkit-scrollbar { width: 10px; }
.uc-card__detail::-webkit-scrollbar-track { background: transparent; }
/* the transparent border and padding-box clip leave the thumb 4px wide and
   floating off the edge, rather than filling the gutter */
.uc-card__detail::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .3);
  border: 3px solid transparent; background-clip: padding-box;
  border-radius: 999px;
}
.uc-card__detail::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .48); background-clip: padding-box;
}
.uc-card__detail::-webkit-scrollbar-button { display: none; }
.uc-card.is-open .uc-card__detail { opacity: 1; visibility: visible; transform: none; }
/* clear of the close button in the corner, where a long category name wrapped
   under the cross on a phone */
.uc-card__detail .uc-card__eyebrow,
.uc-card__detail .uc-card__title { padding-right: 46px; }
.uc-detail__sub { color: #fff; font-weight: 700; font-size: 16px; margin: 22px 0 18px; }
.uc-detail__list { margin: 0; padding: 0 0 0 18px; list-style: none; }
.uc-detail__list li { color: #DCE3E9; font-size: var(--lp-body); line-height: 1.5; margin: 0 0 16px; position: relative; }
.uc-detail__list li:last-child { margin-bottom: 0; }
.uc-detail__list li::before { content: ""; position: absolute; left: -18px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }

.uc-nav { max-width: var(--lp-outer); margin: clamp(26px, 3vw, 40px) auto 0; padding: 0 var(--lp-pad-x); display: flex; justify-content: flex-end; gap: 14px; }
.uc-arrow { width: 54px; height: 44px; border: 0; border-radius: 8px; cursor: pointer; background: #EEF1F3; display: grid; place-items: center; transition: background .15s var(--ease); }
.uc-arrow:hover { background: #E1E6EA; }
.uc-arrow svg { width: 24px; height: 24px; }
.uc-arrow:disabled { opacity: .4; cursor: default; }
/* wider and taller than the 3:4 tile it is on desktop, since the copy wraps
   hardest here; enough that the longest of the five needs no scrolling */
@media (max-width: 700px) { .uc-card { flex-basis: 84%; aspect-ratio: 3 / 4.7; } }

/* ---- key partners ---------------------------------------------------------
   The same carousel as the use cases (left edge on the container, running past
   the right edge of the screen) but with wide quote cards instead of tiles. */

.partners { background: var(--lp-navy); padding: clamp(60px, 9vw, 110px) 0; overflow: hidden; }
.partners__head { max-width: var(--lp-outer); margin: 0 auto clamp(28px, 4vw, 44px); padding: 0 var(--lp-pad-x); }
/* section heading: light (300), same scale as every other section heading */
.partners__heading { color: #fff; font-weight: 300; line-height: 1.14; letter-spacing: -.4px; margin: 0; }

.pt-viewport {
  max-width: none; margin: 0;
  padding-left: max(var(--lp-pad-x), calc((100% - var(--lp-container)) / 2));
  padding-right: max(var(--lp-pad-x), calc((100% - var(--lp-container)) / 2));
  overflow: hidden; touch-action: pan-y; cursor: grab;
}
.pt-viewport.is-dragging { cursor: grabbing; }
.pt-track {
  display: flex; align-items: stretch; gap: clamp(16px, 2vw, 28px);
  transition: transform .45s var(--ease); will-change: transform;
  user-select: none; -webkit-user-select: none;
}
.pt-viewport.is-dragging .pt-track { transition: none; }

.pcard {
  flex: 0 0 clamp(300px, 42%, 620px);
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 40px);
  background: linear-gradient(160deg, #333A44 0%, #22272E 100%);
  border: 1px solid rgba(255, 255, 255, .16);
}
.pcard__logo { height: 30px; margin: 0 0 clamp(20px, 2.4vw, 30px); }
/* the logos are supplied in their brand colours; on the dark card they are
   used as the white marks the design calls for */
.pcard__logo img { height: 100%; width: auto; filter: brightness(0) invert(1); -webkit-user-drag: none; pointer-events: none; }
/* body copy, at the page's body size */
.pcard__quote { color: rgba(255, 255, 255, .92); font-size: var(--lp-body); line-height: 1.7; margin: 0 0 auto; }
/* attribution: body size, name and role bold, as the article pull quote */
.pcard__by { color: #fff; font-size: var(--lp-body); font-weight: 700; line-height: 1.5; margin: 26px 0 0; }

/* arrows on the navy background: same size and radius as the use case ones */
.pt-nav { max-width: var(--lp-outer); margin: clamp(26px, 3vw, 40px) auto 0; padding: 0 var(--lp-pad-x); display: flex; justify-content: flex-end; gap: 14px; }
.pt-arrow {
  width: 54px; height: 44px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .08); display: grid; place-items: center;
  transition: background .15s var(--ease);
}
.pt-arrow:hover { background: rgba(255, 255, 255, .16); }
.pt-arrow svg { width: 24px; height: 24px; }
.pt-arrow:disabled { opacity: .4; cursor: default; }

@media (max-width: 700px) { .pcard { flex-basis: 82%; } }

/* ---- key information ------------------------------------------------------ */

.keyinfo { background: var(--bg-alt); padding: clamp(64px, 9vw, 110px) var(--lp-pad-x); }
.keyinfo__inner { max-width: min(var(--lp-container), var(--lp-column)); margin: 0 auto; }
/* centred, but the same heading type as the left-aligned ones */
.keyinfo__heading, .riskinfo__heading, .faq__heading {
  color: var(--ink); font-weight: 300;
  text-align: center; margin: 0 0 clamp(30px, 4vw, 54px);
}
/* One height for all four cards. Stretch alone only levels the cards within a
   row, which left the two rows at different heights; grid-auto-rows levels the
   rows against each other, so every card matches the tallest. */
.keyinfo__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 30px); grid-auto-rows: 1fr;
}
.kcard {
  background: var(--bg); border-radius: 14px; padding: clamp(28px, 3vw, 44px);
  display: flex; flex-direction: column; align-items: flex-start;
}
/* supplied at 128px square and set at 56, so they stay sharp on a 2x screen,
   the same height the fund feature icons occupy */
.kcard__icon { height: 56px; display: flex; align-items: flex-end; margin-bottom: clamp(22px, 2.4vw, 32px); }
.kcard__icon img { height: 56px; width: auto; display: block; }
/* card title: regular (400), never bold */
.kcard__title { color: var(--ink); font-weight: 400; font-size: clamp(20px, 2vw, 24px); margin: 0 0 16px; }
.kcard__desc { color: var(--ink-body); font-size: var(--lp-body); line-height: 1.6; margin: 0; }
/* stacked, there is nothing beside a card to match, so a common height would
   only pad three of them out to the length of the fourth */
@media (max-width: 700px) { .keyinfo__grid { grid-template-columns: 1fr; grid-auto-rows: auto; } }

/* ---- risk information ----------------------------------------------------- */

.riskinfo { background: var(--bg-alt); padding: 0 var(--lp-pad-x) clamp(64px, 9vw, 110px); }
.riskinfo__inner { max-width: min(var(--lp-container), var(--lp-column)); margin: 0 auto; }
/* the card is the column, so its edges line up with the Key information cards
   above and the FAQ list below, and its padding is what insets the copy */
.riskinfo__card {
  background: var(--bg); border-radius: 14px;
  padding: clamp(28px, 3.4vw, 44px) clamp(24px, 4vw, 48px);
}
/* One body size throughout and no bold: the risk names lead their paragraph and
   are set in the same weight as the rest of it. */
.riskinfo__card p {
  color: var(--ink-body); font-size: var(--lp-body); font-weight: 400; line-height: 1.7;
  margin: 0 0 22px;
}
.riskinfo__card p:last-child { margin-bottom: 0; }

/* ---- FAQs ------------------------------------------------------------------ */

.faq { background: var(--bg); padding: clamp(64px, 9vw, 110px) var(--lp-pad-x); }
/* the same column as the key information and risk sections above it: a question
   is one short line, and the plus needs to stay within reach of it */
.faq__inner { max-width: min(var(--lp-container), var(--lp-column)); margin: 0 auto; }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
/* the question sits a step above the answer, so the pair reads as a heading
   and its body rather than as two runs of the same text */
.faq__q {
  width: 100%; display: flex; align-items: center; gap: 24px;
  padding: 22px 8px; background: none; border: 0; cursor: pointer;
  text-align: left; font-family: inherit;
  color: var(--ink); font-size: 20px; font-weight: 400; line-height: 1.4;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.faq__q span:first-child { flex: 1 1 auto; }

/* Blue means open, and nothing else. As a hover colour it stayed on a question
   the reader had just collapsed, since the pointer was still there, and read as
   though the panel were still open. Hover is now a faint tint on the row with
   the toggle taking the link colour, behind a hover query so a tap on a phone
   leaves nothing behind. */
.faq__item.is-open .faq__q { color: var(--blue-link); }
@media (hover: hover) {
  .faq__q:hover { background: rgba(10, 114, 185, .055); }
  .faq__q:hover .faq__toggle { color: var(--blue-link); }
}
/* A chevron, down when closed and up when open. A plus and a cross read as
   add and dismiss; a chevron reads as the direction the panel is about to move,
   which is what this control actually does. */
.faq__toggle { flex: 0 0 auto; width: 20px; height: 20px; position: relative; }
.faq__toggle::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: translate(-50%, -75%) rotate(45deg);
  transition: transform .28s var(--ease);
}
.faq__item.is-open .faq__toggle::before { transform: translate(-50%, -25%) rotate(-135deg); }
/* height is set in landing.js from the panel's own content */
.faq__a { overflow: hidden; height: 0; transition: height .3s var(--ease); }
.faq__a p { color: var(--ink-body); font-size: var(--lp-body); line-height: 1.7; margin: 0 0 18px; padding: 0 44px 0 8px; }
.faq__a p:last-of-type { margin-bottom: 26px; }
.faq__a p:first-child { padding-top: 2px; }
.faq__a p:last-child { margin-bottom: 24px; }
/* the inset keeps the answer clear of the toggle column on a wide screen; on a
   phone that column is most of the measure, so the answer takes the full width */
@media (max-width: 560px) {
  .faq__q { font-size: 18px; gap: 16px; }
  .faq__a p { padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__a, .faq__toggle::before { transition: none; }
}

/* ---- insights -------------------------------------------------------------
   The article cards, the "View all insights" link and the grid are the shared
   .related component from article.css, populated by content.js. The landing
   page only sets the section's own spacing. */

.related#insights { margin-top: 0; }
/* the shared component sets a smaller heading, sized for the end of an article
   rather than for a section of this page. Overridden here so it matches the
   other section headings; article.css is left alone so the articles keep theirs. */
#insights .related__title { font-weight: 300; }

/* ---- important information ------------------------------------------------ */

/* Legal copy, set quieter than body text but at the same 16px size. */
.important { background: var(--bg); padding: clamp(48px, 7vw, 88px) var(--lp-pad-x) clamp(56px, 8vw, 96px); }
/* The full container, on the same two edges as the sections running the width
   of the page. Nothing inside carries its own measure; capping the copy but not
   the heading left the two stopping in different places. */
.important__inner { max-width: var(--lp-container); margin: 0 auto; }
.important__title { color: var(--ink); font-weight: 300; margin: 0 0 28px; }
.important p, .important li { color: var(--ink-soft); font-size: var(--lp-body); line-height: 1.7; margin: 0 0 16px; }
/* the risk names lead each paragraph rather than sitting above it */
.important strong { color: var(--ink); font-weight: 700; }
.important h3 { color: var(--ink); font-weight: 700; font-size: var(--lp-body); line-height: 1.7; margin: 26px 0 14px; }
.important ul { margin: 0 0 14px; padding-left: 22px; }
.important li { margin: 0 0 10px; }
.important li > ul { margin: 10px 0 0; padding-left: 20px; list-style: none; }
.important li > ul li { color: var(--ink-soft); }
/* the two illustration lines under the fee bullet are set as dashes in the
   source, so the marker is written rather than drawn */
.important li > ul li::before { content: "\2013"; margin-right: 8px; }

/* ---- video modal ---------------------------------------------------------- */

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .82); }
.modal__dialog { position: relative; z-index: 1; width: min(90vw, 1000px); }
.modal__video { width: 100%; border-radius: 6px; display: block; }
.modal__close {
  position: absolute; top: -44px; right: 0; z-index: 2;
  background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer;
}