/* ==========================================================================
   Our Core Features — custom styles on top of Bootstrap 5.3
   Values come from Figma node 283:775; the layout is exact at 1440px and up.
   Breakpoints follow Bootstrap: lg 992px, xl 1200px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts, section, design tokens
   -------------------------------------------------------------------------- */

/* Aeonik is a licensed font and is not bundled. Until it is installed or added as
   a webfont, Figtree stands in: its widths give the same line breaks, and these
   overrides put it on Aeonik's baseline (measured against Figma's render). */
@font-face {
  font-family: 'Aeonik Fallback';
  font-weight: 300 900;
  font-display: swap;
  src: url('../assets/core-features/fonts/figtree-latin.woff2') format('woff2'),
    url('./fonts/figtree-latin.woff2') format('woff2'),
    url('../core-features/fonts/figtree-latin.woff2') format('woff2');
  ascent-override: 100%;
  descent-override: 20%;
  line-gap-override: 0%;
}

/* Scoped flex utilities to ensure standalone and integrated consistency */
.core-features .container-fluid {
  width: 100%;
  padding-right: var(--bs-gutter-x, 1.5rem);
  padding-left: var(--bs-gutter-x, 1.5rem);
  margin-right: auto;
  margin-left: auto;
}

.core-features .d-flex {
  display: flex !important;
}

.core-features .flex-column {
  flex-direction: column !important;
}

.core-features .align-items-center {
  align-items: center !important;
}

@media (min-width: 992px) {
  .core-features .flex-lg-row {
    flex-direction: row !important;
  }

  .core-features .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }

  .core-features .justify-content-lg-end {
    justify-content: flex-end !important;
  }

  .core-features .justify-content-lg-between {
    justify-content: space-between !important;
  }
}

.core-features .btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
}

.core-features {
  --cf-indigo: #2a03d8;
  --cf-indigo-deep: #251ba5;
  --cf-azure: #0d8eff;
  --cf-navy: #0a489c;
  --cf-button: #2f6eff;

  --cf-font: 'Aeonik', 'Aeonik Fallback', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cf-font-app: 'Nunito', system-ui, sans-serif;
  --cf-font-nav: 'Roboto', system-ui, sans-serif;
  --cf-font-ios: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;

  position: relative;
  overflow: hidden;
  font-family: var(--cf-font);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(to bottom, var(--cf-indigo), var(--cf-indigo-deep));
}

/* The 1440px Figma frame. Below lg it becomes fluid and the rows stack. */
.core-features__frame {
  position: relative;
}

/* --------------------------------------------------------------------------
   2. Background art — positioned in the frame's own 1440 × 2312 coordinates
   -------------------------------------------------------------------------- */
.core-features__art {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 2312px;
  pointer-events: none;
  zoom: 0.6;
}

/* Grid lines and grid blocks are both revealed through the same blurred blobs */
.core-features__lines,
.core-features__blocks {
  /* assets/core-features/bg/grid-mask.svg, embedded byte for byte: browsers refuse
     to load a mask image from a file:// page, and the grid would disappear */
  --cf-grid-mask: url('data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjU2MjMuMjUiIGhlaWdodD0iNDMyMC4yNiIgdmlld0JveD0iMCAwIDU2MjMuMjUgNDMyMC4yNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InJldmVhbCBtYXNrIj4KPGcgaWQ9IkJsb2IgNCIgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfZl8wXzEyNikiPgo8cGF0aCBkPSJNMjk4NC4zNiAxNzg0LjMyQzI5ODQuMzYgMjE3MC44NyAyNzI4Ljc3IDI0ODQuMjQgMjQxMy41IDI0ODQuMjRDMjA5OC4yMiAyNDg0LjI0IDEyOC40MDIgMTEyOC40MyAxMjguNDAyIDc0MS44NzdDMTI4LjQwMiAzNTUuMzIgMjk1OC42NCA4ODcuNDg3IDMyNzMuOTIgODg3LjQ4N0MzNTg5LjIgODg3LjQ4NyAyOTg0LjM2IDEzOTcuNzYgMjk4NC4zNiAxNzg0LjMyWiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzBfMTI2KSIvPgo8L2c+CjxnIGlkPSJCbG9iIDMiIGZpbHRlcj0idXJsKCNmaWx0ZXIxX2ZfMF8xMjYpIj4KPHBhdGggZD0iTTMyMDYuMDcgMzQ0MC43NkMzMjA2LjA3IDM4MjcuMzEgMjk1MC40OSA0MTQwLjY4IDI2MzUuMjEgNDE0MC42OEMyMzE5LjkzIDQxNDAuNjggNTYzLjU2OCA0MDUwLjU4IDU2My41NjggMzY2NC4wMkM1NjMuNTY4IDMyNzcuNDYgNjkzLjM5NiAyMzYxLjggMTAwOC42NyAyMzYxLjhDMTMyMy45NSAyMzYxLjggMzIwNi4wNyAzMDU0LjIgMzIwNi4wNyAzNDQwLjc2WiIgZmlsbD0idXJsKCNwYWludDFfcmFkaWFsXzBfMTI2KSIvPgo8L2c+CjxnIGlkPSJCbG9iIDIiIGZpbHRlcj0idXJsKCNmaWx0ZXIyX2ZfMF8xMjYpIj4KPHBhdGggZD0iTTM4NTMuNjQgMTc4NS4zOEM0NzA0LjMyIDI1NTMuNjggNDMxMS4zNiAyMTY3LjU4IDUwNDIuMDEgMjE0OC4xM0M1MTU2LjYzIDIxNzAuMjEgNTM1MS4yMSAyMTcxLjI2IDUyMTIuNTggMTk5OC44MUM1MDM5LjI5IDE3ODMuMjYgNTA5NS4xNCAxNjMxLjAyIDQ4NzguNTcgMTM5Ni4xOEM0NjYyIDExNjEuMzMgNDUzMC4xMSA5MjIuNzM3IDQyMDMuMTUgNTQ5LjIyNUMzODc2LjE5IDE3NS43MTQgMzg1MS4wNCA0ODMuNjEgMzQ4Mi40MyA0NTQuNDIzQzMxMTMuODMgNDI1LjIzNSAzMjgxLjk1IDQ3MS41ODYgMjc3My4zNyAxMDEzLjU0QzIyNjQuOCAxNTU1LjQ5IDMwMDIuOTcgMTAxNy4wNyAzODUzLjY0IDE3ODUuMzhaIiBmaWxsPSIjRDlEOUQ5Ii8+CjwvZz4KPGcgaWQ9IkJsb2IgMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlcjNfZl8wXzEyNikiPgo8cGF0aCBkPSJNMzA1MC41MyAyOTkzLjg4QzE5MTIuMTIgMzEyNy45MSAyNDYxLjQ3IDMwODYuNTQgMTk5NC44NiAzNjQ5LjEzQzE5MDIuNzUgMzcyMC44MyAxNzczLjc5IDM4NjYuNTUgMTk5NC44NiAzODc1LjgxQzIyNzEuMTkgMzg4Ny40IDIzNDguOTYgNDAyOS43IDI2NjguMzEgNDAyMS40M0MyOTg3LjY2IDQwMTMuMTUgMzI1NC4wNiA0MDcxLjA3IDM3NTAuNDYgNDA3MS4wN0M0MjQ2Ljg2IDQwNzEuMDcgNDAzMS43NSAzODQ5LjM0IDQyOTYuNSAzNTkxLjIxQzQ1NjEuMjQgMzMzMy4wOCA0NDE1LjYzIDM0MjkuMDYgNDM0Mi44MyAyNjg5LjQyQzQyNzAuMDIgMTk0OS43OCA0MTg4Ljk0IDI4NTkuODUgMzA1MC41MyAyOTkzLjg4WiIgZmlsbD0iI0Q5RDlEOSIvPgo8L2c+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZl8wXzEyNiIgeD0iLTEuNTI1ODhlLTA1IiB5PSI0NzIuNzEiIHdpZHRoPSIzNDkzLjM2IiBoZWlnaHQ9IjIxMzkuOTMiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNjQuMjAxIiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfMF8xMjYiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjFfZl8wXzEyNiIgeD0iNDM1LjE2NiIgeT0iMjIzMy40IiB3aWR0aD0iMjg5OS4zMSIgaGVpZ2h0PSIyMDM1LjY5IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjY0LjIwMSIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzBfMTI2Ii8+CjwvZmlsdGVyPgo8ZmlsdGVyIGlkPSJmaWx0ZXIyX2ZfMF8xMjYiIHg9IjIyNDMuNzkiIHk9Ii0zLjA1MTc2ZS0wNSIgd2lkdGg9IjMzNzkuNDYiIGhlaWdodD0iMjYyNC45MyIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxODEuMzUxIiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfMF8xMjYiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjNfZl8wXzEyNiIgeD0iMTYyMy42IiB5PSIyMTUzLjY3IiB3aWR0aD0iMzA3NC40IiBoZWlnaHQ9IjIxNjYuNTkiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMTI0LjU5NiIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzBfMTI2Ii8+CjwvZmlsdGVyPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMF8xMjYiIHgxPSIxNDkxLjg1IiB5MT0iOTM1LjQ3MyIgeDI9IjI2ODQuODYiIHkyPSIxNTcwLjg2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IndoaXRlIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmFkaWFsR3JhZGllbnQgaWQ9InBhaW50MV9yYWRpYWxfMF8xMjYiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQwMC44MyAzNDU3LjE5KSByb3RhdGUoLTI5LjM5MzIpIHNjYWxlKDIwMzkuNjcgMzUwNS42MSkiPgo8c3RvcCBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9yYWRpYWxHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K');

  position: absolute;
  -webkit-mask-image: var(--cf-grid-mask);
  mask-image: var(--cf-grid-mask);
  -webkit-mask-size: 5623.25px 4320.258px;
  mask-size: 5623.25px 4320.258px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-clip: no-clip;
}

.core-features__lines {
  top: -665.21px;
  left: -221.25px;
  width: 5280px;
  height: 4127.03px;
  -webkit-mask-position: -772.932px -321.558px;
  mask-position: -772.932px -321.558px;
}

.core-features__lines-h {
  position: absolute;
  top: 16.58px;
  left: 136.47px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4659.539px;
  height: 4024.146px;
}

.core-features__lines-h img {
  flex: none;
  transform: rotate(-90deg);
}

.core-features__lines-v {
  position: absolute;
  top: 189.12px;
  left: 98.63px;
}

/* Figma's grid stops at the frame edges. On wider screens it carries on at the
   same pitch: the same two SVGs again, one period to each side. */
.core-features__lines-h--before {
  left: calc(136.47px - 1445px);
}

.core-features__lines-h--after {
  left: calc(136.47px + 1445px);
}

.core-features__lines-v--before {
  left: calc(98.63px - 1613.68px);
}

.core-features__lines-v--after {
  left: calc(98.63px + 1613.68px);
}

.core-features__blocks {
  --block-36: linear-gradient(rgb(10 72 156 / 0.36), rgb(10 72 156 / 0.36));
  --block-31: linear-gradient(rgb(10 72 156 / 0.31), rgb(10 72 156 / 0.31));
  --block-26: linear-gradient(rgb(10 72 156 / 0.26), rgb(10 72 156 / 0.26));
  --block-25: linear-gradient(rgb(10 72 156 / 0.25), rgb(10 72 156 / 0.25));
  --block-navy: linear-gradient(var(--cf-navy), var(--cf-navy));
  --block-white-11: linear-gradient(rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.11));
  --block-white-61: linear-gradient(rgb(255 255 255 / 0.61), rgb(255 255 255 / 0.61));

  top: 0;
  left: 0;
  width: 3838.636px;
  height: 2634.931px;
  opacity: 0.7;
  -webkit-mask-position: -994.18px -986.769px;
  mask-position: -994.18px -986.769px;
  background-repeat: no-repeat;
  /* One layer per rectangle: fill, then x y / width height */
  background-image:
    var(--block-36), var(--block-25), var(--block-white-11), var(--block-31), var(--block-white-11),
    var(--block-31), var(--block-white-11), var(--block-31), var(--block-25), var(--block-25),
    var(--block-25), var(--block-white-61), var(--block-white-61), var(--block-white-61),
    var(--block-navy), var(--block-navy), var(--block-navy), var(--block-navy), var(--block-navy),
    var(--block-navy), var(--block-26), var(--block-26);
  background-position:
    2237.89px 2148.16px,
    1178.91px 2148.16px,
    3086.29px 667.98px,
    1389.51px 457.39px,
    2872.68px 878.58px,
    1175.9px 667.98px,
    2872.68px 667.98px,
    1175.9px 457.39px,
    968.32px 2148.16px,
    968.32px 2358.75px,
    544.12px 1937.56px,
    /* group "top" at 2451.49, 3.11 */
    2662.09px 243.79px,
    2451.49px 3.11px,
    2449.18px 240.78px,
    /* group "top left" at 315.47, 225.73 */
    544.11px 451.37px,
    330.51px 240.77px,
    119.92px 243.78px,
    330.51px 451.37px,
    1178.9px 30.18px,
    544.11px 875.56px,
    3086.28px 1937.56px,
    3296.87px 2148.15px;
  background-size:
    210.594px 210.594px,
    210.594px 210.594px,
    210.594px 207.585px,
    210.594px 207.585px,
    210.594px 207.585px,
    210.594px 207.585px,
    210.594px 207.585px,
    210.594px 207.585px,
    210.594px 210.594px,
    210.594px 213.602px,
    210.594px 210.594px,
    210.594px 210.594px,
    210.594px 210.594px,
    210.594px 213.602px,
    213.602px 216.611px,
    213.602px 210.594px,
    213.602px 210.594px,
    213.602px 216.611px,
    213.602px 210.594px,
    210.594px 213.602px,
    210.594px 210.594px,
    210.594px 210.594px;
}

/* Rotated square in the top-left corner */
.core-features__diamond {
  position: absolute;
  top: -1144px;
  left: -1615px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2055.342px;
  height: 2055.342px;
}

.core-features__diamond::before {
  content: '';
  flex: none;
  width: 1453.346px;
  height: 1453.346px;
  background-color: rgb(13 142 255 / 0.5);
  /* Figma's export reports this stroke as #0d8eff, but Figma renders it white */
  box-shadow: inset 0 0 0 3.214px #fff;
  transform: rotate(-45deg);
}

/* Rings and glow: each SVG sits centred in its bounding box, rotated */
.core-features__orb {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-features__orb img {
  flex: none;
}

.core-features__orb--ring-gradient {
  top: 332px;
  left: calc(50% - 770.55px);
  width: 3480.909px;
  height: 3480.909px;
  transform: translateX(-50%);
}

.core-features__orb--ring-gradient img {
  transform: rotate(53.43deg);
}

.core-features__orb--glow {
  top: -1327px;
  left: -1739px;
  width: 3125.876px;
  height: 2224.616px;
}

.core-features__orb--glow img {
  transform: rotate(-23.52deg);
}

.core-features__orb--ring-white {
  top: 1384px;
  left: -107px;
  width: 2987.869px;
  height: 2987.869px;
}

.core-features__orb--ring-white img {
  transform: rotate(-60.27deg);
}

/* --------------------------------------------------------------------------
   3. Content
   -------------------------------------------------------------------------- */
.core-features__content {
  --bs-gutter-x: 48px;
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 72px;
  padding-block: 72px;
}

.core-features__title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  font-feature-settings: 'dlig' 1;
}

.feature {
  row-gap: 40px;
}

.feature__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 24px;
  width: 100%;
  max-width: 525px;
  font-feature-settings: 'dlig' 1;
}

.feature__heading {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.feature__text {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}

.feature__media {
  flex: none;
}

/* --------------------------------------------------------------------------
   4. Button
   -------------------------------------------------------------------------- */
.btn-app {
  --bs-btn-padding-x: 40px;
  --bs-btn-padding-y: 16px;
  --bs-btn-font-family: var(--cf-font);
  --bs-btn-font-size: 16px;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 23px;
  --bs-btn-border-width: 0;
  --bs-btn-border-radius: 12px;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-bg: var(--cf-button);
  --bs-btn-hover-bg: var(--cf-button);
  --bs-btn-active-bg: var(--cf-button);
  --btn-app-shadow: 4px 38px 62px rgb(0 0 0 / 0.5), inset -3px -4px 7px rgb(255 255 255 / 0.15);

  flex: none;
  /* Figma's radial highlight: an ellipse CSS gradients cannot rotate, so it stays an SVG */
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 213 55' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.7'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(9.0787 3.4713 -13.443 2.3443 68.09 10.82)'><stop stop-color='rgba(255,255,255,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='0.69792'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
  background-size: 100% 100%;
  box-shadow: var(--btn-app-shadow);
  transition:
    filter 0.15s ease-in-out,
    transform 0.15s ease-in-out;
}

.btn-app:hover {
  filter: brightness(1.08);
}

.btn-app:active {
  transform: translateY(1px);
}

.btn-app:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: var(--btn-app-shadow);
}

.btn-app__label {
  display: block;
  width: 133px;
  color: transparent;
  text-align: center;
  white-space: nowrap;
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 133 23' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.7'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(5.6689 1.4516 -8.3943 0.98033 42.516 4.5246)'><stop stop-color='rgba(255,255,255,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='0.69792'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>"),
    linear-gradient(90deg, rgb(255 255 255 / 0.9) 0%, rgb(255 255 255 / 0.9) 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  /* A filter, not text-shadow: text-shadow would paint over the clipped gradient */
  filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.25));
}

/* --------------------------------------------------------------------------
   5. Feature art
   -------------------------------------------------------------------------- */

/* Two tilted phones. --u is one Figma pixel, so the art scales with its box. */
.verify-art {
  position: relative;
  width: 100%;
  max-width: 814.493px;
  aspect-ratio: 814.493 / 723;
  container-type: inline-size;
}

.verify-art__slot {
  --u: calc(100cqw / 814.493);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.verify-art__slot--back {
  top: 0;
  left: calc(197.08 * var(--u));
  width: calc(617.413 * var(--u));
  height: calc(574.141 * var(--u));
}

.verify-art__back {
  flex: none;
  width: calc(604.534 * var(--u));
  height: calc(560.218 * var(--u));
  object-fit: cover;
  transform: rotate(-1.33deg);
}

.verify-art__slot--front {
  top: calc(28 * var(--u));
  left: 0;
  width: calc(702.714 * var(--u));
  height: calc(694.998 * var(--u));
}

.verify-art__front {
  position: relative;
  flex: none;
  width: calc(537.806 * var(--u));
  height: calc(522.764 * var(--u));
  overflow: hidden;
  transform: rotate(-23.73deg);
}

.verify-art__front img {
  position: absolute;
  top: 0;
  left: -29.57%;
  width: 129.6%;
  max-width: none;
  height: 100%;
}

.magazine-art {
  position: relative;
  width: 100%;
  max-width: 388px;
  aspect-ratio: 388 / 543;
  overflow: hidden;
}

.magazine-art img {
  position: absolute;
  top: -33.42%;
  left: -127.41%;
  width: 350.37%;
  max-width: none;
  height: 166.84%;
}

.phone-pair {
  position: relative;
  width: 411.76px;
  height: 697px;
}

/* --------------------------------------------------------------------------
   6. Phone mockup
   The chassis is Figma's 409 × 843 "iPhone 16 Plus Dark" component; --u is
   its scale, so both phones share one set of rules.
   -------------------------------------------------------------------------- */
.phone {
  --u: 0.643448px;
  position: absolute;
  width: calc(409 * var(--u));
  height: calc(843 * var(--u));
  font-family: var(--cf-font-app);
  color: #000;
  text-align: left;
}

.phone--breaking {
  --s: 0.663582px;
  top: 0;
  left: 0;
}

.phone--summary {
  --u: 0.611956px;
  --s: 0.623088px;
  top: 181.12px;
  left: 161.47px;
}

.phone ul,
.phone p {
  padding: 0;
  margin: 0;
  list-style: none;
}

.phone img {
  max-width: none;
}

/* Side buttons */
.phone__buttons {
  position: absolute;
  top: calc(149 * var(--u));
  left: calc(-3 * var(--u));
  width: calc(415 * var(--u));
  height: calc(669 * var(--u));
}

.phone__btn {
  position: absolute;
  left: 0;
  width: calc(5 * var(--u));
  overflow: hidden;
  background-color: #000;
  border-radius: calc(2 * var(--u)) 0 0 calc(2 * var(--u));
}

/* Highlight */
.phone__btn::before {
  content: '';
  position: absolute;
  top: calc(1 * var(--u));
  bottom: calc(1 * var(--u));
  left: calc(1 * var(--u));
  width: calc(1 * var(--u));
  background-image: linear-gradient(to bottom,
      #fff calc(2 * var(--u)),
      rgb(255 255 255 / 0.8) calc(2 * var(--u)));
  border-radius: calc(1 * var(--u));
  filter: blur(calc(0.5 * var(--u)));
}

/* Side shadow */
.phone__btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: calc(-2 * var(--u));
  left: 0;
  width: calc(1 * var(--u));
  background-color: #61605d;
  border-radius: 0 0 calc(1 * var(--u)) calc(1 * var(--u));
  filter: blur(calc(1 * var(--u)));
}

.phone__btn--action {
  top: 0;
  height: calc(31 * var(--u));
}

.phone__btn--action::after {
  top: calc(-1 * var(--u));
}

.phone__btn--volume {
  height: calc(56 * var(--u));
}

.phone__btn--volume-up {
  top: calc(61 * var(--u));
}

.phone__btn--volume-down {
  top: calc(133 * var(--u));
}

/* The power button is the same layer stack turned upside down on the right edge */
.phone__btn--power {
  top: calc(97 * var(--u));
  left: calc(410 * var(--u));
  height: calc(100 * var(--u));
  background: linear-gradient(#000, #000) no-repeat 0 100% / 100% calc(99 * var(--u));
  transform: rotate(180deg);
}

.phone__btn--power::before {
  top: calc(3 * var(--u));
  bottom: calc(2 * var(--u));
  background-image: linear-gradient(to top,
      #fff calc(2 * var(--u)),
      rgb(255 255 255 / 0.8) calc(2 * var(--u)));
}

.phone__btn--power::after {
  top: calc(5 * var(--u));
  bottom: 0;
}

/* Titanium frame */
.phone__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #000;
  border-radius: calc(62 * var(--u));
}

.phone__rim {
  position: absolute;
  border-radius: calc(62 * var(--u));
}

.phone__rim--outer {
  inset: 0;
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #a0a0a0;
  filter: blur(calc(2 * var(--u)));
}

.phone__rim--edge {
  inset: 0;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #181818;
  filter: blur(calc(1 * var(--u)));
}

.phone__rim--inner {
  top: calc(5 * var(--u));
  left: calc(5 * var(--u));
  width: calc(399 * var(--u));
  height: calc(832 * var(--u));
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #fff;
  filter: blur(calc(1 * var(--u)));
}

.phone__rim--highlight {
  top: calc(6 * var(--u));
  left: calc(6 * var(--u));
  width: calc(397 * var(--u));
  height: calc(830 * var(--u));
  box-shadow: inset 0 0 0 calc(0.4 * var(--u)) #fff;
}

.phone__antenna {
  position: absolute;
  width: calc(4 * var(--u));
  height: calc(6 * var(--u));
  background-image: linear-gradient(to right, #525252, #666);
}

.phone__antenna--top {
  top: 0;
  left: calc(318 * var(--u));
  width: calc(6 * var(--u));
  height: calc(4 * var(--u));
  background-image: linear-gradient(to bottom, #525252, #666);
}

.phone__antenna--left-top {
  top: calc(81 * var(--u));
  left: 0;
}

.phone__antenna--left-bottom {
  top: calc(756 * var(--u));
  left: 0;
}

.phone__antenna--bottom {
  top: calc(839 * var(--u));
  left: calc(63 * var(--u));
  width: calc(5 * var(--u));
  height: calc(4 * var(--u));
  background-image: linear-gradient(to top, #525252, #666);
}

.phone__antenna--right {
  top: calc(756 * var(--u));
  left: calc(405 * var(--u));
  background-image: linear-gradient(to left, #525252, #666);
}

/* Screen bezel */
.phone__bezel {
  position: absolute;
  top: calc(4 * var(--u));
  left: calc(4 * var(--u));
  width: calc(401 * var(--u));
  height: calc(835 * var(--u));
  overflow: hidden;
  background-color: #000100;
  border-radius: calc(58 * var(--u));
}

/* Blurred highlight around the bezel. Figma's export flattens this stroke to solid
   #879194; Figma renders it as a radial fade from the upper part of the phone, so
   the gradient stops are fitted to Figma's render. The ring is cut out with a mask
   on the pseudo-element so that the blur applies to the ring, not to a filled box. */
.phone__bezel-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: blur(calc(3.5 * var(--u)));
}

.phone__bezel-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: calc(4 * var(--u));
  background-image: radial-gradient(circle calc(351 * var(--u)) at 50% calc(198 * var(--u)),
      rgb(135 145 148 / 0.82) 19.3%,
      rgb(135 145 148 / 0));
  border-radius: inherit;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
}

.phone__screen {
  position: absolute;
  overflow: hidden;
  background-color: #fff;
}

.phone--breaking .phone__screen {
  top: 7.614px;
  left: 7.614px;
  width: 249.042px;
  height: 524.958px;
  border-radius: 34.041px;
}

.phone--summary .phone__screen {
  top: 7.242px;
  left: 7.24px;
  width: 233.658px;
  height: 499.691px;
  border-radius: 31.95px;
}

.phone__island {
  position: absolute;
  top: calc(24 * var(--u));
  left: calc(149 * var(--u));
}

/* iOS status bar: a 375 × 44 component, --s is its scale on each screen */
.statusbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: calc(44 * var(--s));
  background-color: #fff;
}

.phone--breaking .statusbar {
  top: 0.108px;
  right: 0.09px;
  left: 0.108px;
}

.statusbar__time {
  position: absolute;
  top: calc(13 * var(--s));
  right: 80%;
  left: 5.6%;
  font: 600 calc(15 * var(--s)) / calc(20 * var(--s)) var(--cf-font-ios);
  color: #333;
  text-align: center;
  letter-spacing: calc(-0.24 * var(--s));
}

.statusbar__cellular {
  position: absolute;
  top: 40.14%;
  left: 78.4%;
}

.statusbar__wifi {
  position: absolute;
  top: 39.38%;
  left: 84.27%;
}

.statusbar__battery {
  position: absolute;
  inset: 39.4% 4.44% 34.84% 89.69%;
  border-radius: calc(2.667 * var(--s));
  box-shadow: inset 0 0 0 calc(1 * var(--s)) #333;
  opacity: 0.35;
}

.statusbar__battery-cap {
  position: absolute;
  top: 47.73%;
  left: 95.82%;
}

.statusbar__battery-level {
  position: absolute;
  inset: 43.94% 4.98% 39.39% 90.22%;
  background-color: #333;
  border-radius: calc(1.333 * var(--s));
}

/* --------------------------------------------------------------------------
   7. Phone screen: Breaking News
   -------------------------------------------------------------------------- */
.bn-title {
  position: absolute;
  top: 34.61px;
  left: 67.79px;
  font: 800 15.926px/22px var(--cf-font-app);
  color: #02131f;
  white-space: nowrap;
}

/* Category chips */
.bn-chips {
  position: absolute;
  top: 73.77px;
  left: 10.06px;
  display: flex;
  gap: 3.981px;
}

.bn-chip {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 22.944px;
  padding: 0 14.599px;
  font: 800 7.963px/11px var(--cf-font-app);
  color: #2e0505;
  white-space: nowrap;
  background-color: #fff;
  border-radius: 10.617px;
  box-shadow: inset 0 0 0 0.624px #b8b8b8;
}

.bn-chip--all {
  width: 56.404px;
  color: #fff;
  background-color: var(--cf-azure);
  box-shadow: inset 0 0 0 0.624px #3ea5ff;
}

.bn-chip--politics {
  width: 71.667px;
  color: #000;
}

.bn-chip--war {
  width: 53.75px;
}

.bn-chip--business {
  width: 67.022px;
}

/* Global / country switch */
.bn-scope {
  position: absolute;
  top: 112.25px;
  width: 94.892px;
  height: 19.907px;
  font: 700 9.29px/13px var(--cf-font-app);
  color: #000;
}

.bn-scope--global {
  left: 12.05px;
  box-shadow: inset 0 0 0 0.398px #b8b8b8;
}

.bn-scope--usa {
  left: 142.11px;
  background-color: var(--cf-azure);
  box-shadow: inset 0 0 0 0.624px #b8b8b8;
}

.bn-scope__label {
  position: absolute;
  white-space: nowrap;
}

.bn-scope--global .bn-scope__label {
  top: 3.318px;
  left: 33.18px;
}

.bn-scope--usa .bn-scope__label {
  top: 3.649px;
  left: 47.778px;
}

.bn-scope__picker {
  position: absolute;
  top: 0.663px;
  left: 0.663px;
  width: 29.861px;
  height: 18.58px;
  background-color: #fff;
  box-shadow: inset -0.664px 0 0 #e5e5e5;
}

.bn-scope__caret {
  position: absolute;
  top: 8.818px;
  left: 21.235px;
}

.bn-scope__flag {
  position: absolute;
  top: 6.039px;
  left: 6.635px;
}

.bn-save {
  position: absolute;
  top: 144.11px;
  left: 160.69px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76.312px;
  height: 15.926px;
  font: 600 7.963px/11px var(--cf-font-app);
  color: #fff;
  white-space: nowrap;
  background-image: linear-gradient(to right, #05d7fd, #036ef9 50%, #a885fd);
  border-radius: 46.451px;
}

/* News cards */
.bn-feed {
  position: absolute;
  top: 175.96px;
  left: 12.05px;
  display: flex;
  flex-direction: column;
  gap: 6.581px;
  width: 224.954px;
}

.bn-card {
  position: relative;
  display: flex;
  gap: 6.636px;
  align-items: center;
  height: 62.377px;
  padding: 10.617px 7.963px;
  isolation: isolate;
}

.bn-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #fff;
  border-radius: 5.309px;
  box-shadow:
    inset 0 0 0 0.664px #eee,
    0 0 2.654px rgb(0 0 0 / 0.04),
    0 5.309px 6.636px rgb(0 0 0 / 0.1);
}

/* The one-line-source card is shorter, and its panel is shorter still */
.bn-card--compact {
  height: 59.161px;
}

.bn-card--compact::before {
  bottom: 0.766px;
}

.bn-card__thumb {
  flex: none;
  width: 31.852px;
  height: 31.852px;
  object-fit: cover;
  border-radius: 50%;
}

.bn-card__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2.654px;
  min-width: 0;
}

.bn-card--compact .bn-card__body {
  flex: 0 0 169.264px;
}

.bn-card__title {
  font: 700 7.963px/11px var(--cf-font-app);
  color: #000;
}

.bn-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 13.272px;
  font: 500 5.309px/7px var(--cf-font-app);
  color: #606060;
  letter-spacing: 0.0796px;
  white-space: nowrap;
}

.bn-card__source,
.bn-card__time {
  display: flex;
  gap: 1.327px;
  align-items: center;
}

.bn-card__avatar {
  position: relative;
  top: 0.166px;
  flex: none;
  width: 6.636px;
  height: 6.636px;
  overflow: hidden;
  border-radius: 50%;
}

.bn-card__avatar img {
  position: absolute;
  top: -16.78%;
  left: -16.37%;
  width: 132.75%;
  height: 149.65%;
}

.bn-card__stats {
  display: flex;
  gap: 21.235px;
  align-items: center;
}

.bn-card__time {
  font-weight: 400;
}

.bn-card__mood {
  display: flex;
  gap: 10.617px;
  align-items: center;
}

.bn-card__mood--negative {
  color: #ee544a;
}

.bn-card__mood--positive {
  color: #1ea537;
}

.bn-card__mood--neutral {
  color: #de9719;
}

/* Tab bar — wider than the screen, the screen clips it */
.bn-nav {
  position: absolute;
  bottom: -0.09px;
  left: 0.108px;
  width: 502.332px;
  height: 46.451px;
  background-color: #fff;
  box-shadow: -1.327px 2.654px 2.654px rgb(140 140 140 / 0.15);
}

.bn-nav__list {
  position: absolute;
  top: 6.636px;
  left: 13.271px;
  display: flex;
  gap: 15.203px;
  align-items: center;
}

.bn-nav__item {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 8.687px;
  align-items: center;
  justify-content: center;
  font: 500 7.761px/9px var(--cf-font-nav);
  color: #7a7a7a;
  white-space: nowrap;
}

.bn-nav__icon {
  position: relative;
  flex: none;
  width: 15.203px;
  height: 15.203px;
  overflow: hidden;
}

.bn-nav__icon img {
  position: absolute;
}

.bn-nav__item--quick-news {
  justify-content: flex-start;
  width: 42px;
  height: 32.595px;
}

.bn-nav__item--quick-news img {
  top: 4.16%;
  left: 4.23%;
}

.bn-nav__item--breaking {
  width: 31px;
  color: var(--cf-azure);
}

.bn-nav__item--breaking img {
  top: calc(50% - 0.75px);
  left: calc(50% - 0.01px);
  transform: translate(-50%, -50%);
}

.bn-nav__item--quick-board {
  width: 44.237px;
}

.bn-nav__item--quick-board img {
  top: 0;
  left: 0;
}

.bn-nav__item--verif-ai {
  width: 27px;
}

.bn-nav__item--verif-ai .bn-nav__icon {
  width: 17.375px;
}

.bn-nav__item--verif-ai img {
  top: 7.14%;
  left: 21.87%;
}

.bn-nav__item--trending {
  width: 31px;
}

.bn-nav__item--trending img {
  top: 6.24%;
  left: 6.27%;
}

.bn-nav__indicator {
  position: absolute;
  top: 45.123px;
  left: 65.695px;
  width: 38.488px;
  height: 1.327px;
  background-color: var(--cf-azure);
  border-radius: 5.309px;
}

/* --------------------------------------------------------------------------
   8. Phone screen: Guided summary
   -------------------------------------------------------------------------- */
.sm-player {
  position: absolute;
  top: 44.862px;
  left: 0;
  width: 233.658px;
  height: 162.003px;
  overflow: hidden;
  background-image: linear-gradient(to bottom, #07091f, #073d81 50.379%, #060c24);
}

/* Six hairlines, 24.3px apart */
.sm-player__lines {
  position: absolute;
  top: 19.628px;
  left: 0;
  width: 233.658px;
  height: 122.125px;
  background-image:
    url('../assets/core-features/summary/player-line.svg'),
    url('../assets/core-features/summary/player-line.svg'),
    url('../assets/core-features/summary/player-line.svg'),
    url('../assets/core-features/summary/player-line.svg'),
    url('../assets/core-features/summary/player-line.svg'),
    url('../assets/core-features/summary/player-line.svg');
  background-repeat: no-repeat;
  background-position:
    0 0,
    0 24.3px,
    0 48.6px,
    0 72.9px,
    0 97.2px,
    0 121.5px;
}

.sm-player__wave {
  position: absolute;
  top: 78.149px;
  display: flex;
  gap: 1.485px;
}

.sm-player__wave--left {
  left: 51.72px;
}

.sm-player__wave--right {
  left: 135.87px;
}

.sm-player__wave i {
  flex: none;
  width: 1.485px;
  height: 5.94px;
  background-color: var(--cf-navy);
  border-radius: 3.465px;
}

.sm-player__play {
  position: absolute;
  top: 65.402px;
  left: 101.496px;
  width: 30.627px;
  height: 30.627px;
  overflow: hidden;
}

.sm-player__play img {
  position: absolute;
}

.sm-player__play-ring {
  top: 0;
  left: 0;
}

.sm-player__play-disc {
  top: calc(50% - 0.08px);
  left: 50%;
  transform: translate(-50%, -50%);
}

.sm-player__play-icon {
  top: calc(50% + 0.19px);
  left: calc(50% + 0.25px);
  transform: translate(-50%, -50%);
}

.sm-player__control {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19.939px;
  height: 19.939px;
  background-color: rgb(11 194 233 / 0.2);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.623px #1990c0;
}

.sm-player__control--close {
  top: 14.954px;
  left: 14.954px;
}

.sm-player__control--more {
  top: 127.11px;
  left: 198.767px;
}

.sm-tab {
  position: absolute;
  top: 216.212px;
  width: 100.317px;
  height: 21.185px;
  padding-top: 5.607px;
  font: 700 7.477px/10px var(--cf-font-app);
  white-space: pre;
  border-radius: 2.492px;
}

.sm-tab--active {
  left: 9.348px;
  padding-left: 18.07px;
  color: #fff;
  background-color: #010101;
}

.sm-tab--outline {
  left: 123.996px;
  padding-left: 22.431px;
  color: #010101;
  box-shadow: inset 0 0 0 0.324px #010101;
}

.sm-headline {
  position: absolute;
  top: 252.975px;
  left: 13.708px;
  width: 203.127px;
  font: 600 9.969px/14px var(--cf-font-app);
  color: #000;
  letter-spacing: 0.0375px;
}

.sm-body {
  position: absolute;
  top: 287.867px;
  left: 13.708px;
  width: 199.388px;
  font: 600 7.477px/13.577px var(--cf-font-app);
  color: #373737;
  letter-spacing: 0.0679px;
}

.sm-source,
.sm-brand {
  position: absolute;
  top: 371.36px;
  font: 700 8.723px/12.15px var(--cf-font-app);
  letter-spacing: 0.0748px;
  white-space: nowrap;
}

.sm-source {
  left: 9.348px;
  color: #c5c5c5;
}

.sm-brand {
  left: 125.864px;
  font-weight: 500;
  color: #000;
}

.sm-badge {
  position: absolute;
  top: 372.607px;
  left: 112.779px;
}

.sm-badge-mark {
  position: absolute;
  top: 375.7px;
  left: 115.73px;
}

.sm-context {
  position: absolute;
  top: 411.238px;
  left: 9.971px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 214.342px;
  height: 32.939px;
  font: 700 8.723px/12.15px var(--cf-font-app);
  color: #000;
  letter-spacing: 0.0748px;
  white-space: nowrap;
  background-color: #f2f2f2;
  border-radius: 7.477px;
  box-shadow:
    inset 0 0 0 0.623px #d7d7d7,
    0 2.492px 2.492px rgb(0 0 0 / 0.15);
}

.sm-cta {
  position: absolute;
  top: 469.872px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 233.658px;
  height: 29.908px;
  font: 700 9.969px/14px var(--cf-font-app);
  color: #fff;
  white-space: nowrap;
  background-image: linear-gradient(to right, #05cafe, #1a72fa 55.243%, #9d84fc);
}

/* --------------------------------------------------------------------------
   9. Small screens — the phone pair is a fixed composition, so it steps down
   -------------------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .phone-pair {
    zoom: 0.72;
  }
}

@media (max-width: 359.98px) {
  .phone-pair {
    zoom: 0.64;
  }
}

@media (min-width: 576px) {
  .core-features__title {
    font-size: 40px;
  }

  .feature__heading {
    font-size: 32px;
  }

  .feature__text {
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   10. lg and up — the Figma layout
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

  /* Flex centring keeps the frame centred even when a scrollbar leaves it a few px short of room */
  .core-features {
    display: flex;
    justify-content: center;
  }

  .core-features__frame {
    flex: none;
    width: 1440px;
  }

  .core-features__art {
    zoom: 1;
  }

  .core-features__content {
    --bs-gutter-x: 0;
    row-gap: 60px;
    padding-block: 100px;
  }

  .core-features__title {
    font-size: 56px;
    line-height: 67px;
  }

  .feature__copy {
    flex: none;
    width: 525px;
  }

  .feature__heading {
    width: 506px;
    font-size: 40px;
    line-height: 48px;
  }

  .feature__text {
    font-size: 20px;
  }

  .feature--verify {
    min-height: 619px;
    padding-left: 100px;
  }

  /* 723px tall art in a 619px row: it overhangs 52px above and below */
  .verify-art {
    width: 814.493px;
    margin-block: -52px;
  }

  .feature--magazine {
    column-gap: 188px;
    min-height: 549px;
    padding-left: 150px;
  }

  .magazine-art {
    width: 388px;
  }

  .feature--breaking {
    width: 1058px;
    min-height: 697px;
    margin-left: 160px;
  }
}

/* Between lg and 1440px the whole frame scales down, a step per breakpoint */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .core-features__frame {
    zoom: 0.6722;
    /* 968 / 1440 */
  }
}

@media (min-width: 1200px) and (max-width: 1439.98px) {
  .core-features__frame {
    zoom: 0.8194;
    /* 1180 / 1440 */
  }
}