/* Free tools — Figma 13586:47316 (desktop 1440) · 13586:47495 (mobile 390).
   This file: 01 Hero (13586:47318 · 13586:47497) and 02 Tools (13586:47459 · 13586:47601).
   Units: em on the site's fluid scale. Desktop: Figma px ÷ 16 (1em = 16px at 1440).
   Mobile (≤479): the two sections reset their font-size to 16/16.38 of the body, so inside them
   1em = 16px at 390 and mobile Figma px ÷ 16 as well.
   Illustration geometry (store page, artwork, lens) is in % of its own box, so the same markup
   works inside the browser window and, scaled, inside the lens. */

.free-tools-page {
  --ft-ink: #141414;        /* ink/850 */
  --ft-ink-900: #131313;    /* ink/900 */
  --ft-gray-600: #4b5563;
  --ft-gray-500: #6b7280;
  --ft-gray-400: #9ca3af;
  --ft-gray-300: #d1d5db;
  --ft-gray-200: #e5e7eb;
  --ft-gray-100: #f3f4f6;
  --ft-gray-900: #111827;
  --ft-violet: #7c3aed;     /* violet/600 */
  --ft-purple: #9f94f3;     /* brand/purple */
  --ft-teal: #3dede7;       /* brand/teal */
  --ft-green: #3ef18d;      /* brand/green */
  --ft-focus: #6251c8;
}

@media (min-width: 1920px) { .free-tools-page { font-size: 21.333px; } }

.free-tools-page .ft-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.ft-container { width: 82.5em; margin-inline: auto; }
.ft-muted { color: var(--ft-gray-500); }
.ft-br-m { display: none; }

/* Focus ring for links and buttons: css/site-additions.css. Cards draw their own ring (::after). */
.ft-tools:focus { outline: none; }

/* ============ 01 Hero ============ */

.ft-hero { position: relative; padding: 13.9375em 0 6em; color: var(--ft-ink); overflow-x: clip; }   /* 103 header + 120 · 96; clip — світло лінзи виходить за край в'юпорта */

.ft-hero__head { display: flex; flex-direction: column; align-items: center; gap: 1.5em; text-align: center; }
.ft-eyebrow { margin: 0; font-size: .875em; font-weight: 300; line-height: 1.2; text-transform: uppercase; color: var(--ft-gray-500); }
.ft-hero__title { width: 13.75em; color: var(--ft-ink); }                          /* 880 / 64 */
.ft-hero__lead { width: 31em; margin: 0; text-wrap: pretty; font-size: 1.25em; font-weight: 300; line-height: 1.2; letter-spacing: -.025em; color: var(--ft-gray-500); }
.ft-hero__cta { height: auto; padding: calc(1.25em - 1px) 1em; gap: .125em; line-height: 1.2; }   /* Button/Outline 59: Figma's stroke sits inside the 16 + 4 padding */
.ft-hero__cta .ico-20 { width: 1.125em; height: 1.125em; }
.ft-hero__cta svg { width: 100%; height: 100%; }

/* Artwork / lens — 1320 × 680 */
.ft-art { position: relative; height: 42.5em; margin-top: 4em; }
.ft-scene { pointer-events: none; }
.ft-scene--d { position: absolute; inset: 0; }
.ft-scene--m { display: none; }

/* Stage light: four blurred ellipses + fade to white (blur = stdDeviation from Figma) */
.ft-light { position: absolute; overflow-x: visible; overflow-y: clip; }
.ft-light--d { left: -3.75em; top: 15.625em; width: 90em; height: 26.25em; }
.ft-light__e { position: absolute; border-radius: 50%; }
.ft-light--d .ft-light__e { filter: blur(4.375em); }
.ft-light--d .ft-light__e--1 { left: 5em; top: 7.5em; width: 47.5em; height: 21.25em; background: var(--ft-purple); opacity: .45; }
.ft-light--d .ft-light__e--2 { left: 32.5em; top: 9.375em; width: 45em; height: 18.75em; background: var(--ft-teal); opacity: .38; }
.ft-light--d .ft-light__e--3 { left: 61.25em; top: 11.875em; width: 32.5em; height: 15em; background: var(--ft-green); opacity: .3; }
.ft-light--d .ft-light__e--4 { left: 68.75em; top: 3.75em; width: 23.75em; height: 12.5em; background: var(--ft-purple); opacity: .22; }
.ft-light__fade { position: absolute; inset: 0; background: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 85%, #fff 100%); }

/* Browser window 880 × 590 */
.ft-window { background: #fff; }
.ft-window--d { position: absolute; left: 3.0303%; top: 3.5294%; width: 55em; height: 36.875em; box-shadow: 0 1.875em 3.75em rgba(20, 18, 51, .1); }
.ft-window--d::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--ft-gray-300); pointer-events: none; }
.ft-window--d .ft-window__chrome { position: absolute; left: 0; top: 0; width: 100%; height: 2.5em; box-sizing: border-box; background: var(--ft-gray-100); border-bottom: 1px solid var(--ft-gray-200); }
.ft-window--d .ft-window__dot { position: absolute; top: .9375em; width: .625em; height: .625em; border-radius: 50%; background: var(--ft-gray-300); }
.ft-window--d .ft-window__dot:nth-child(1) { left: 1em; }
.ft-window--d .ft-window__dot:nth-child(2) { left: 2em; }
.ft-window--d .ft-window__dot:nth-child(3) { left: 3em; }
.ft-window--d .ft-window__url { position: absolute; left: 26.875em; top: .6667em; padding: .3333em 1em; border: 1px solid var(--ft-gray-200); background: #fff; font-size: .75em; font-weight: 400; line-height: 1.2; color: var(--ft-gray-500); white-space: nowrap; }
.ft-window__page { position: absolute; left: 0; top: 2.5em; width: 55em; height: 34.375em; overflow: hidden; }

/* Store page (desktop) — 880 × 550 */
.ft-sp { position: absolute; inset: 0; background: #fff; overflow: hidden; }
.ft-sp > * { position: absolute; box-sizing: border-box; }
.ft-sp__t { font-size: .9167em; font-weight: 400; line-height: 1.2; color: var(--ft-gray-500); white-space: nowrap; }
.ft-sp__bar { left: 0; top: 0; width: 100%; height: 7.556%; background: var(--ft-gray-200); }
.ft-sp__search { left: 27.778%; top: 1.556%; width: 44.444%; height: 4.444%; background: #fff; border: .0764em solid var(--ft-gray-300); }
.ft-sp__query { left: 28.889%; top: 2.444%; color: var(--ft-gray-400); }
.ft-sp__cart { left: 93.333%; top: 2.667%; width: 2.5%; height: 2.667%; background: var(--ft-gray-400); }
.ft-sp__div1 { left: 0; top: 7.333%; width: 100%; height: .0764em; background: var(--ft-gray-300); }
.ft-sp__name { left: 3.333%; top: 2.051%; font-size: 1em; letter-spacing: -.0625em; color: var(--ft-ink); }
.ft-sp__nav { top: 9.333%; text-transform: uppercase; }
.ft-sp__nav--men { left: 3.333%; }
.ft-sp__nav--women { left: 10.556%; }
.ft-sp__nav--kids { left: 20.278%; }
.ft-sp__nav--sale { left: 27.222%; }
.ft-sp__div2 { left: 0; top: 13.556%; width: 100%; height: .0764em; background: var(--ft-gray-200); }
.ft-sp__img { display: block; max-width: none; object-fit: cover; }
.ft-sp__main { left: 3.333%; top: 19.111%; width: 47.222%; height: 53.333%; }
.ft-sp__th { top: 75.111%; width: 15%; height: 14.222%; border: .0764em solid var(--ft-gray-300); }
.ft-sp__th--1 { left: 3.333%; border-color: var(--ft-ink); }
.ft-sp__th--2 { left: 19.444%; }
.ft-sp__th--3 { left: 35.556%; }
.ft-sp__brand { left: 55%; top: 19.111%; text-transform: uppercase; }
.ft-sp__title { left: 55%; top: 22.02%; font-family: "Rg Standardbook", Arial, sans-serif; font-size: 2em; letter-spacing: -.03125em; color: var(--ft-ink); }
.ft-sp__sub { left: 55%; top: 29.657%; font-size: .875em; font-weight: 300; }
.ft-sp__price { left: 55%; top: 35.111%; color: var(--ft-ink); }
.ft-sp__was { left: 60.833%; top: 35.111%; color: var(--ft-gray-400); }
.ft-sp__buydiv { left: 55%; top: 40.444%; width: 41.667%; height: .0764em; background: var(--ft-gray-200); }
.ft-sp__label { left: 55%; text-transform: uppercase; }
.ft-sp__label--size { top: 43.111%; }
.ft-sp__label--colour { top: 57.333%; }
.ft-sp__chip { top: 47.556%; width: 7.222%; height: 5.778%; display: flex; align-items: center; justify-content: center; background: #fff; border: .0833em solid var(--ft-gray-300); font-size: .9167em; font-weight: 400; line-height: 1.2; color: var(--ft-gray-900); }
.ft-sp__chip--41 { left: 55%; }
.ft-sp__chip--42 { left: 63.611%; background: var(--ft-ink); border-color: var(--ft-ink); color: #fff; }
.ft-sp__chip--43 { left: 72.222%; }
.ft-sp__chip--44 { left: 80.833%; }
.ft-sp__chip--45 { left: 89.444%; background: var(--ft-gray-100); border-color: var(--ft-gray-200); color: var(--ft-gray-300); }
.ft-sp__sw { top: 61.778%; width: 3.333%; height: 5.333%; border: .0764em solid var(--ft-gray-300); }
.ft-sp__sw--1 { left: 55%; background: var(--ft-gray-900); border-color: var(--ft-ink); }
.ft-sp__sw--2 { left: 59.722%; background: var(--ft-gray-500); }
.ft-sp__sw--3 { left: 64.444%; background: var(--ft-gray-300); }
.ft-sp__sw--4 { left: 69.167%; background: var(--ft-gray-400); }
.ft-sp__cta { left: 55%; top: 71.111%; width: 41.667%; height: 7.111%; display: flex; align-items: center; justify-content: center; background: var(--ft-ink); font-size: .9167em; font-weight: 400; line-height: 1.2; color: #fff; text-transform: uppercase; white-space: nowrap; }
.ft-sp__delivery { left: 55%; top: 81.778%; }

/* Markers */
.ft-marker { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; width: 1.8333em; height: 1.8333em; background: var(--ft-violet); font-size: .75em; font-weight: 400; line-height: 1.2; color: #fff; }
.ft-marker--d1 { left: 6.0101%; top: 26.3399%; }
.ft-marker--d2 { left: 37.3822%; top: 27.8105%; }

/* Lens rig: shadow, glow, lens (zoomed clone), inner edge, rim, marker 3 — moves as one */
.ft-rig { position: absolute; z-index: 2; }
.ft-rig--d { left: 53.7037%; top: 28.1536%; width: 18.75em; height: 18.75em; }
.ft-rig > * { position: absolute; }
.ft-rig__shadow { left: 4.6667%; top: 8%; width: 100%; height: 100%; border-radius: 50%; background: #120f2e; opacity: .16; filter: blur(.9375em); }
.ft-rig__glow { left: -7.3333%; top: -7.3333%; width: 114.6667%; height: 114.6667%; border-radius: 50%; background: radial-gradient(closest-side, rgba(159, 148, 243, 0) 62%, rgba(159, 148, 243, .5) 82%, rgba(110, 192, 237, .25) 91%, rgba(61, 237, 231, 0) 100%); filter: blur(.5em); }
.ft-rig__lens { inset: 0; border-radius: 50%; overflow: hidden; background: #fff; isolation: isolate; }
.ft-rig__shift { position: absolute; inset: 0; }
.ft-sp--zoom { inset: auto; left: 0; top: 0; width: 55em; height: 34.375em; transform-origin: 0 0; transform: translate(-118.5764em, -33.9757em) scale(2.5); }
.ft-rig__found { position: absolute; left: 21.1852%; top: 34.4259%; width: 57.6296%; height: 31.1481%; box-sizing: border-box; outline: max(2px, .125em) solid var(--ft-violet); }   /* stroke outside, as in Figma; a .125em border rounds down to 1px */
.ft-rig__tag { position: absolute; left: 27.8333%; top: 68.2407%; padding: .3333em .6667em; background: var(--ft-violet); font-size: .75em; font-weight: 400; line-height: 1.2; color: #fff; text-transform: uppercase; white-space: nowrap; }
.ft-rig__glass { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, .5) 14.3%, rgba(255, 255, 255, 0) 44.3%); }
.ft-rig__inner { left: 2%; top: 2%; width: 96%; height: 96%; box-sizing: border-box; border-radius: 50%; border: .09375em solid rgba(255, 255, 255, .8); }
.ft-rig__rim { inset: 0; border-radius: 50%; background: linear-gradient(90deg, var(--ft-purple), var(--ft-teal));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - .1875em - .5px), #000 calc(100% - .1875em));
          mask: radial-gradient(closest-side, transparent calc(100% - .1875em - .5px), #000 calc(100% - .1875em)); }
.ft-marker--d3 { left: 81.6833%; top: 10.9833%; }

.ft-leader__anchor { position: absolute; left: 76.2037%; top: 49.7712%; width: .375em; height: .375em; background: var(--ft-violet); }
.ft-leader__anchor, .ft-leader { z-index: 3; }   /* above the lens rim (.ft-rig z-index 2) */
.ft-leader { position: absolute; left: 76.8856%; top: 50.2125%; width: 2.5694em; height: 1px; background: var(--ft-gray-400); transform-origin: 0 50%; }

/* Callout */
.ft-callout { position: absolute; left: 80%; top: 43.7418%; width: 16.5em; display: flex; flex-direction: column; align-items: flex-start; gap: .5em; }
.ft-callout p { margin: 0; }
.ft-callout__label { font-size: .875em; font-weight: 300; line-height: 1.2; text-transform: uppercase; color: var(--ft-violet); white-space: nowrap; }
.ft-callout__value { font-family: "Rg Standardbook", Arial, sans-serif; font-size: 4em; font-weight: 400; line-height: .9; letter-spacing: -.0234375em; color: var(--ft-ink); white-space: nowrap; }
.ft-callout__caption { font-size: .875em; font-weight: 300; line-height: 1.2; color: var(--ft-gray-600); }
.ft-callout__source { position: relative; font-size: .875em; font-weight: 300; line-height: 1.2; color: var(--ft-gray-600); text-decoration: underline; text-underline-position: from-font; white-space: nowrap; }
.ft-callout__source:hover { color: var(--ft-ink); }

/* Findings on this page */
.ft-findings { position: absolute; left: 3.0303%; top: 94.4118%; display: flex; align-items: center; gap: 2em; white-space: nowrap; }
.ft-findings__title { margin: 0; font-size: .875em; font-weight: 300; line-height: 1.2; text-transform: uppercase; color: var(--ft-ink); }
.ft-findings__list { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 2em; margin: 0; padding: 0; list-style: none; }   /* wraps only with enlarged text spacing */
.ft-finding { display: flex; align-items: center; gap: .5em; }
.ft-finding__n { display: flex; flex: none; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; background: var(--ft-violet); font-size: .75em; font-weight: 400; line-height: 1.2; color: #fff; }
.ft-finding a { position: relative; font-size: .875em; font-weight: 300; line-height: 1.2; color: var(--ft-gray-600); text-decoration: none; }
.ft-finding a:hover { color: var(--ft-ink); text-decoration: underline; text-underline-position: from-font; }

/* ============ 02 Tools ============ */

.ft-tools { padding: 7.5em 0; background: var(--ft-gray-100); color: var(--ft-ink); scroll-margin-top: 0; }
.ft-tools__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.5em; }
.ft-tools__title { width: 13.125em; color: var(--ft-ink); }                        /* 840 / 64 */
.ft-tools__note { width: 22em; margin: 0; font-size: 1.25em; font-weight: 300; line-height: 1.2; letter-spacing: -.025em; color: var(--ft-gray-600); }
.ft-tools__block { margin-top: 4em; }
.ft-tools__label { display: none; }
.ft-tools__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5em; margin-block: 0; padding: 0; list-style: none; }
.ft-tools__item { min-width: 0; }

/* Card / Tool — 424 × 408: poster 220 (Mockup/Laptop in layers) + caption 188 */
.ft-card { position: relative; display: flex; flex-direction: column; min-height: 25.5em; background: #fff; color: var(--ft-ink); text-decoration: none; }
.ft-card::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; pointer-events: none; transition: border-color .2s ease; }
.ft-tools .ft-card:focus-visible { outline: none; }
.ft-card:focus-visible::after { border: 2px solid var(--ft-focus); }   /* ring on top of the poster, not clipped by the mobile carousel */
.ft-card__poster { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #fff; }
.ft-mock { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ft-mock__screen { position: absolute; left: 20.71%; top: 12.65%; width: 58.71%; height: 68.92%; max-width: none; object-fit: cover; }   /* screen 87.8 · 27.8 · 248.9 × 151.6 in 424 × 220 */
.ft-card__caption { display: flex; flex: none; flex-direction: column; justify-content: space-between; min-height: 11.75em; padding: 1.5em; box-sizing: border-box; }
.ft-card__body { display: flex; flex-direction: column; gap: .75em; }
.ft-card__row { display: flex; align-items: flex-start; justify-content: space-between; gap: .5em; }
.ft-card__title { margin: 0; font-family: "Rg Standardbook", Arial, sans-serif; font-size: 2em; font-weight: 400; line-height: 1.2; letter-spacing: -.03125em; color: #000; }
.ft-card__arrow { flex: none; width: 1.5em; height: 1.5em; color: #000; transition: transform .2s ease; }
.ft-card__desc { margin: 0; text-wrap: pretty; font-size: 1em; font-weight: 400; line-height: 1.2; letter-spacing: -.0625em; color: var(--ft-ink); }
.ft-card__meta { display: flex; align-items: center; min-height: 3.5em; margin: 0; padding-top: 1.1429em; box-sizing: border-box; font-size: .875em; font-weight: 300; line-height: 1.2; color: var(--ft-gray-600); }

@media (hover: hover) {
  .ft-card:hover::after { border-color: var(--ft-ink); }
  .ft-card:hover .ft-card__arrow { transform: translateX(.25em); }
}

/* ============ Mobile ≤479 ============ */

@media screen and (max-width: 479px) {
  .ft-hero, .ft-tools { font-size: .97680098em; }   /* 16 / 16.38 → 1em = 16px at 390 */
  .ft-container { width: 22.375em; }                  /* 358 */

  /* Hero */
  .ft-hero { padding: 10.5625em 0 5em; }              /* 89 header + 80 · 80 */
  .ft-eyebrow { font-size: .75em; font-weight: 400; }
  .ft-hero__title { width: 8.25em; }                   /* 330 / 40 */
  .ft-hero__lead { width: 100%; font-size: 1em; line-height: 1.4; letter-spacing: -.03125em; }
  .ft-hero__cta { width: 100%; justify-content: space-between; }

  .ft-art { display: flex; flex-direction: column; gap: 1.5em; height: auto; margin-top: 3em; }
  .ft-scene--d { display: none; }
  .ft-scene--m { display: block; position: relative; width: 100%; height: 31.9375em; }   /* stage 358 × 511 */

  .ft-light--m { left: -1em; top: 13.75em; width: 24.375em; height: 22.5em; }
  .ft-light--m .ft-light__e { filter: blur(2.1875em); }
  .ft-light--m .ft-light__e--1 { left: -1.25em; top: 7.5em; width: 18.75em; height: 12.5em; background: var(--ft-purple); opacity: .45; }
  .ft-light--m .ft-light__e--2 { left: 8.75em; top: 8.75em; width: 18.75em; height: 11.25em; background: var(--ft-teal); opacity: .38; }
  .ft-light--m .ft-light__e--3 { left: 14.375em; top: 12.5em; width: 12.5em; height: 8.75em; background: var(--ft-green); opacity: .3; }
  .ft-light--m .ft-light__fade { background: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 80%, #fff 100%); }

  .ft-window--m { position: absolute; left: 0; top: 0; width: 100%; box-sizing: border-box; border: 1px solid var(--ft-gray-300); box-shadow: 0 1em 2em rgba(20, 18, 51, .1); }
  .ft-window--m .ft-window__chrome { display: flex; align-items: center; gap: .375em; height: 2em; padding: 0 .75em; box-sizing: border-box; background: var(--ft-gray-100); border-bottom: 1px solid var(--ft-gray-200); }
  .ft-window--m .ft-window__dot { flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--ft-gray-300); }
  .ft-window--m .ft-window__url { padding: .25em .8333em; border: 1px solid var(--ft-gray-200); background: #fff; font-size: .75em; font-weight: 400; line-height: 1.2; color: var(--ft-gray-500); white-space: nowrap; }

  /* Store page (mobile) — 356 wide, auto layout as in Figma */
  .ft-msp { display: flex; flex-direction: column; gap: .75em; padding: .875em 1em 1em; background: #fff; font-weight: 400; line-height: 1.2; color: var(--ft-ink); white-space: nowrap; }
  .ft-msp__head { display: flex; align-items: center; justify-content: space-between; }
  .ft-msp__name { font-size: .875em; letter-spacing: -.0714em; }
  .ft-msp__cart { width: 1em; height: .75em; background: var(--ft-gray-400); }
  .ft-msp__img { display: block; width: 100%; max-width: none; height: 11.75em; object-fit: cover; }
  .ft-msp__titles { display: flex; flex-direction: column; align-items: flex-start; gap: .25em; }
  .ft-msp__brand, .ft-msp__label { font-size: .75em; color: var(--ft-gray-500); text-transform: uppercase; }
  .ft-msp__title { font-family: "Rg Standardbook", Arial, sans-serif; font-size: 1.5em; }
  .ft-msp__prices { display: flex; gap: .625em; }
  .ft-msp__price, .ft-msp__was { font-size: .875em; letter-spacing: -.0714em; }
  .ft-msp__was { color: var(--ft-gray-400); }
  .ft-msp__size { display: flex; flex-direction: column; align-items: flex-start; gap: .5em; }
  .ft-msp__chips { display: flex; gap: .5em; width: 100%; }
  .ft-msp__chip { display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; height: 2.5714em; box-sizing: border-box; border: 1px solid var(--ft-gray-300); background: #fff; font-size: .875em; letter-spacing: -.0714em; }
  .ft-msp__chip--42 { background: var(--ft-ink-900); border-color: var(--ft-ink-900); color: #fff; }
  .ft-msp__chip--45 { background: var(--ft-gray-100); border-color: var(--ft-gray-200); color: var(--ft-gray-300); }
  .ft-msp__cta { display: flex; align-items: center; justify-content: center; height: 3.6667em; background: var(--ft-ink-900); font-size: .75em; color: #fff; text-transform: uppercase; }

  .ft-marker--m1, .ft-marker--m2, .ft-marker--m3 { width: 1.6667em; height: 1.6667em; }
  .ft-marker--m1 { left: 6.9832%; top: 16.4384%; }
  .ft-marker--m2 { left: 37.7095%; top: 58.4149%; }

  .ft-rig--m { left: 68.1564%; top: 64.9706%; width: 8em; height: 8em; }
  .ft-rig--m .ft-rig__shadow { left: 6.25%; top: 10.9375%; filter: blur(.5625em); }
  .ft-rig--m .ft-rig__glow { left: -10.9375%; top: -10.9375%; width: 121.875%; height: 121.875%; filter: blur(.3125em); }
  .ft-msp--zoom { position: absolute; left: 0; top: 0; width: 22.25em; box-sizing: border-box; transform-origin: 0 0; transform: translate(-30.5375em, -36.8375em) scale(1.8); }
  .ft-rig--m .ft-rig__found { left: 9.8125%; top: 20.7813%; width: 90.5%; height: 58.4375%; }
  .ft-rig--m .ft-rig__inner { left: 3.125%; top: 3.125%; width: 93.75%; height: 93.75%; border-width: 1px; }
  .ft-rig--m .ft-rig__rim {
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - .15625em - .5px), #000 calc(100% - .15625em));
            mask: radial-gradient(closest-side, transparent calc(100% - .15625em - .5px), #000 calc(100% - .15625em)); }
  .ft-marker--m3 { left: 6.8375%; top: 6.8375%; }

  /* Callout and findings stack under the stage */
  .ft-callout { position: relative; left: auto; top: auto; width: 100%; }
  .ft-callout__label { font-size: .75em; font-weight: 400; }
  .ft-callout__value { font-size: 2.5em; letter-spacing: -.0375em; }
  .ft-callout__caption { font-size: .875em; font-weight: 400; line-height: 1.4; letter-spacing: -.0357em; }
  .ft-callout__source { font-size: .75em; font-weight: 400; color: var(--ft-gray-500); }
  .ft-callout__source::before { content: ""; position: absolute; left: 0; right: 0; top: -.6667em; bottom: -2em; }   /* tap area 46px */

  .ft-findings { position: relative; left: auto; top: auto; flex-direction: column; align-items: stretch; gap: .75em; padding-top: 1.25em; border-top: 1px solid var(--ft-gray-300); white-space: normal; }
  .ft-findings__title { font-size: .75em; font-weight: 400; }
  .ft-findings__list { flex-direction: column; align-items: stretch; gap: .75em; }
  .ft-finding { align-items: flex-start; gap: .625em; }
  .ft-finding a { flex: 1 1 auto; font-size: .875em; font-weight: 400; line-height: 1.4; letter-spacing: -.0357em; }
  .ft-finding a::before { content: ""; position: absolute; left: -2.0714em; right: 0; top: -.4286em; bottom: -.4286em; }   /* tap area fills the 12px gaps */
  .ft-finding:first-child a::before { top: -.8571em; }
  .ft-finding:last-child a::before { bottom: -1.7143em; }

  /* Tools */
  .ft-tools { padding: 5em 0; }
  .ft-tools__head { flex-direction: column; align-items: flex-start; gap: 1.5em; }
  .ft-tools__title { width: 100%; }
  .ft-br-m { display: inline; }
  .ft-tools__note { width: 100%; font-size: 1em; line-height: 1.4; letter-spacing: -.03125em; }
  .ft-tools__label { display: block; margin: 0 0 1.3333em; padding-left: 1.3333em; font-size: .75em; font-weight: 400; line-height: 1.2; color: var(--ft-gray-600); text-transform: uppercase; }
  .ft-tools__list { display: flex; gap: 1em; width: auto; padding: 0 1em; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 1em; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ft-tools__list::-webkit-scrollbar { display: none; }
  .ft-tools__item { flex: 0 0 18.125em; scroll-snap-align: start; }   /* 290 */

  .ft-card { min-height: 21.25em; transition: opacity 80ms ease; }      /* 340 */
  .ft-card:active { opacity: .7; }
  .ft-card__poster { flex: 0 0 9.375em; }                            /* 150 */
  .ft-card__caption { min-height: 11.875em; padding: 1.25em; }           /* 190 */
  .ft-card__body { gap: .5em; }
  .ft-card__title { font-size: 1.5em; letter-spacing: 0; }
  .ft-card__desc { font-size: .875em; line-height: 1.4; letter-spacing: -.0357em; }
  .ft-card__meta { min-height: 3.75em; padding-top: 1em; font-size: .75em; font-weight: 400; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-hero *, .ft-tools * { transition: none !important; animation: none !important; }
}