/* Full HD 1920x1080 (1920px canvas, Figma 1:72)
   Overrides of the base (iMac) styles in index.html. Every selector is prefixed
   html[data-bp="fhd"]; values are Figma px for this canvas. */

/* ---------- Page rhythm ----------
   Figma: 120px between sections down to the flow block, then 180px
   between Use cases, Custom fit, Data, Research and Footer. */
html[data-bp="fhd"] .cases,
html[data-bp="fhd"] .custom,
html[data-bp="fhd"] .data,
html[data-bp="fhd"] .research,
html[data-bp="fhd"] .footer { margin-top: 60px; }

/* ---------- 1. Hero (356:724, 1920x1080) ---------- */
html[data-bp="fhd"] .hero { height: 1080px; }
html[data-bp="fhd"] .hero__bg img {
  left: -3.165%;
  top: -1.884%;
  width: 123.254%;
  height: 116.513%;
}

/* ---------- 3. Statement (1:134, 675px) ---------- */
html[data-bp="fhd"] .statement { height: 675px; }

/* ---------- 4. Face Scan (1:139, inset 30px, 1860x710) ---------- */
html[data-bp="fhd"] .facescan { height: 710px; }

/* ---------- 5. Steps (1:147, 697px: 15px top, no bottom padding) ---------- */
html[data-bp="fhd"] .steps { padding: 15px 30px 0; }
html[data-bp="fhd"] .step__media { height: 445px; }
html[data-bp="fhd"] .step__inner { width: 338px; }          /* closed card text box */
html[data-bp="fhd"] .step__desc > p { width: 365px; }       /* open state (48:119) text box: 365px */

/* ---------- 6. What is measured (232:1360, 1920x900) ---------- */
html[data-bp="fhd"] .measured { height: 900px; }
html[data-bp="fhd"] .measured__left { flex: 0 0 909px; }
html[data-bp="fhd"] .measured__right { flex: 1 1 0; padding: 15px; }
html[data-bp="fhd"] .measured__copy h2 { width: 665px; }   /* Figma text box; keeps the block at x=122 */
html[data-bp="fhd"] .measured__face img { left: 0; top: 0; width: 100%; height: 100%; }

/* ---------- 7. Channels (1:199, 1080px; cards 922.5x555) ---------- */
html[data-bp="fhd"] .channels { height: 1080px; }
/* crops keep the photo ratio (Figma stretches the component crop to 555px) */
html[data-bp="fhd"] .channel--store .channel__bg img { left: -21.651%; top: -29.4%; width: 143.29%; }
html[data-bp="fhd"] .channel--online .channel__bg img { left: 0; top: -19.98%; width: 100%; }

/* Figma wraps "confidence." onto a second line (text measures ~1px narrower in browsers) */
html[data-bp="fhd"] .channel--online .channel__text { max-width: 850px; }

/* ---------- 8. Flow (232:2617, 1080px) ---------- */
html[data-bp="fhd"] .getmeasured { height: 1080px; }

/* ---------- 10. Custom fit (245:2642, 1080px; media 427.5 / card 487.5) ---------- */
html[data-bp="fhd"] .custom { height: 1080px; }
/* fixed media width: flex ratios would be skewed by the card's 30px padding */
html[data-bp="fhd"] .custom__media { flex: 0 0 427.5px; }
html[data-bp="fhd"] .custom__card { flex: 1 1 0; }
html[data-bp="fhd"] .custom__media--capture .fg { left: 7.505%; top: 7.476%; width: 85.092%; height: 85.05%; }

/* ---------- 10b. Fitting insights (2122:3836) — same as iMac, narrower panel ---------- */
html[data-bp="fhd"] .sim__stats { width: 550px; }

/* ---------- 12. Research (66:1673, x=59, 1803 wide) ---------- */
html[data-bp="fhd"] .research { padding: 0 58px 0 59px; }

/* ---------- Book a demo page (book-a-demo.html, Figma 2142:4649) ----------
   Same layout as the iMac (the form simply narrows); 60 px above the footer, not the homepage's extra 60. */
html[data-bp="fhd"] .page--demo .footer { margin-top: 0; }