/* Shared layout and type tokens for every section below the hero. Spacing sits on a 4/8px grid; fluid values end on it at desktop. */
:root{
  /* spacing */
  --gutter:clamp(16px,4.4vw,64px);
  --section-y:clamp(80px,9.4vw,144px);
  --same-gap:clamp(24px,2.6vw,48px);  /* extra space where two neighbouring sections share a background */
  --head-gap:clamp(32px,3.4vw,48px);   /* section heading block to its content */
  --block-gap:16px;                    /* tabs to card, card to card */
  --card-pad:clamp(24px,2.4vw,40px);
  /* content column, inset from the top bar like mercury.com but a little less (Oct 15, Brian). The inset grows with
     the screen (a fifth of the width beyond 900px, never less than the gutter), and the column caps at 1440px.
     About 1130 wide at 1280, 1225 at 1440, 1360 at 1666, 1440 from about 1900. Tablets and phones keep the gutter. */
  --inset:max(var(--gutter),calc((100vw - 900px) * .2));
  --container:min(1440px,calc(100vw - 2 * var(--inset)));
  /* narrower column (Why section): up to 10% less than the content column on wide screens, full width on phones */
  --container-narrow:calc(var(--container) - clamp(0px,(100vw - 900px) * .1,144px));
  /* left and right edge that follows the gutter, then the centred container on wide screens (percent of the element's containing block) */
  --edge:max(var(--gutter),calc((100% - var(--container)) / 2));
  /* the top bar sits wider than the content: logo and buttons near the screen edges, capped on very wide screens */
  --nav-edge:max(var(--gutter),calc((100% - 1680px) / 2));
  /* radius */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;
  /* type */
  --h2:clamp(32px,3.6vw,56px);
  --h3-lg:clamp(28px,2.4vw,36px);
  --h3:clamp(20px,1.7vw,24px);
  --lead:clamp(16px,1.25vw,18px);
  --body:16px;
  --small:14px;
  --label:12px;
  --label-track:.12em;
  --stat:clamp(48px,4.6vw,72px);
}

/* scroll-blended background (assets/bgfade.js): sections go transparent and sit on one shared page colour */
body.fadebg .ins,body.fadebg .why,body.fadebg .story,body.fadebg .uc,body.fadebg .faq{background:transparent}
body.fadebg .close{background:linear-gradient(180deg,transparent 0,transparent calc(100% - clamp(48px,5vw,64px)),#121614 calc(100% - clamp(48px,5vw,64px)))}
body.fadebg .ins-head h2,body.fadebg .why-head h2,body.fadebg .story-head h2,body.fadebg .uc-head h2,body.fadebg .close-copy h2,body.fadebg .faq-head h2,body.fadebg .faq-q,body.fadebg .story-stat span,body.fadebg .story-row p,body.fadebg .story-photo blockquote{color:var(--fx-ink)}
body.fadebg .story-photo blockquote{color:#F7F7F5}
body.fadebg .close-copy h2,body.fadebg .close-copy p,body.fadebg .faq-head h2,body.fadebg .faq-q,body.fadebg .faq-a p,body.fadebg .ins-head h2,body.fadebg .why-head h2,body.fadebg .story-head h2,body.fadebg .uc-head h2,body.fadebg .story-stat span,body.fadebg .story-row p,body.fadebg .ins-head p,body.fadebg .why-head p,body.fadebg .why-foot,body.fadebg .story-head p,body.fadebg .uc-head>p,body.fadebg .uc-head .uc-eyebrow,body.fadebg .story-row small{transition:color .4s ease}
body.fadebg .ins-head p,body.fadebg .why-head p,body.fadebg .why-foot,body.fadebg .story-head p,body.fadebg .uc-head>p,body.fadebg .uc-head .uc-eyebrow,body.fadebg .story-row small,body.fadebg .close-copy p,body.fadebg .faq-a p{color:var(--fx-mute)}