/* MacBook Pro 14" (1512px canvas, Figma 2014:1820)
   Overrides of the base (iMac) styles in index.html. Every selector is prefixed
   html[data-bp="mbp"]; values are Figma px for this canvas. */

/* ---------- Shared: section titles are 40/46 on this device ---------- */
html[data-bp="mbp"] .facescan h2,
html[data-bp="mbp"] .measured__copy h2,
html[data-bp="mbp"] .channels__title h2,
html[data-bp="mbp"] .getmeasured__text h2,
html[data-bp="mbp"] .cases__head h2,
html[data-bp="mbp"] .custom__copy h2,
html[data-bp="mbp"] .data h2,
html[data-bp="mbp"] .research__copy h2 {
  font-size: 40px;
  line-height: 46px;
  letter-spacing: -0.8px;
}

/* ---------- 1. Hero (2014:1776, 1512×823) ---------- */
html[data-bp="mbp"] .hero { height: 823px; gap: 219px; }      /* content block vertically centred → text at y 285 */
html[data-bp="mbp"] .hero__bg img { left: 2.837%; top: -2.218%; width: 122.89%; height: 120.05%; }

/* ---------- 2. Trusted by (2014:1811) ---------- */
html[data-bp="mbp"] .trusted img[src*="logo-engo"]      { width: 104px; height: 24px; }
html[data-bp="mbp"] .trusted img[src*="logo-jmm"]       { width: 209px; height: 47px; }
html[data-bp="mbp"] .trusted img[src*="logo-decathlon"] { width: 188px; height: 39px; }
html[data-bp="mbp"] .trusted img[src*="logo-meyrowitz"] { width: 179px; height: 49px; }
html[data-bp="mbp"] .trusted .logo-coperni              { width: 119px; height: 32.2px; }
html[data-bp="mbp"] .trusted img[src*="logo-laclaree"]  { width: 113px; height: 33px; }

/* ---------- 4. Face Scan (2014:1961) ---------- */
html[data-bp="mbp"] .facescan { height: 710px; }

/* ---------- 5. Steps (2014:2336, component set 2014:2184) ---------- */
html[data-bp="mbp"] .step__media { height: 344.8px; }
html[data-bp="mbp"] .step .card { height: 250px; }
html[data-bp="mbp"] .step__inner {
  width: 100%;
  justify-content: flex-start;
  gap: 40px;
}
/* "Every facial detail. Captured from your smartphone." wraps naturally here */
html[data-bp="mbp"] .step:first-child .sub24 br { display: none; }
/* open state (2014:2185): card hugs its content (30 + head + 40 + 26 + 30) */
html[data-bp="mbp"] .step:nth-child(1) .card[aria-expanded="true"] { height: 414px; }
html[data-bp="mbp"] .step:nth-child(2) .card[aria-expanded="true"] { height: 386px; }
html[data-bp="mbp"] .step:nth-child(3) .card[aria-expanded="true"] { height: 386px; }
html[data-bp="mbp"] .step:nth-child(4) .card[aria-expanded="true"] { height: 314px; }

/* ---------- 6. What is measured (2014:2390) ---------- */
html[data-bp="mbp"] .measured { height: 816px; }
html[data-bp="mbp"] .measured__left { flex: none; width: 608px; }
html[data-bp="mbp"] .measured__right { flex: 904 1 0; padding: 12.5px 15px; }   /* panel 791 px tall, as in Figma (room for "25+ more…") */
html[data-bp="mbp"] .measured__face img { left: 0; top: 0; width: 100%; height: 100%; }

/* ---------- 7. Channels (2014:2489) ---------- */
html[data-bp="mbp"] .channels { height: 825px; }
html[data-bp="mbp"] .channels__cards { height: 470px; }
html[data-bp="mbp"] .channel--store .channel__bg img { left: -29.007%; top: -30.446%; width: 157.90%; }
html[data-bp="mbp"] .channel--online .channel__bg img { left: 0; top: -17.728%; width: 100%; }

/* ---------- 8. Flow (2014:3116, component set 2014:3016) ---------- */
html[data-bp="mbp"] .getmeasured { height: 790px; }
html[data-bp="mbp"] .getmeasured__copy { height: 296px; }
/* The 4 images are renders of the 922×1080 iMac media; Figma re-frames them for 718.5×790 */
html[data-bp="mbp"] .getmeasured__media img { object-fit: fill; }
html[data-bp="mbp"] .getmeasured__media picture:nth-child(1) img { top: -3.29%; height: 106.57%; }   /* Digitize: FIT image */
html[data-bp="mbp"] .getmeasured__media picture:nth-child(2) img,
html[data-bp="mbp"] .getmeasured__media picture:nth-child(3) img { top: -2.63%; height: 105.69%; }  /* Measure / Recommend: CROP */
/* Dispense: same relative crop as iMac → image stretched to the box (fill) */

/* ---------- 9. Use cases (2014:3132) ---------- */
html[data-bp="mbp"] .cases { height: 821px; gap: 60px; }
html[data-bp="mbp"] .case--b { width: 351.5px; }
html[data-bp="mbp"] .case--c { width: 381.5px; }
html[data-bp="mbp"] .case--b .case__body,
html[data-bp="mbp"] .case--c .case__body { width: 291.5px; }
html[data-bp="mbp"] .case--b .case__media > img { left: 0.08%; top: -10.87%; width: 145.01%; height: 121.75%; }
html[data-bp="mbp"] .case--c .case__media > img { left: -8.12%; top: -5.75%; width: 112.23%; height: 118.34%; }

/* ---------- 10. Custom fit (2014:3184) ---------- */
html[data-bp="mbp"] .custom { height: 894px; }
html[data-bp="mbp"] .custom__left { flex: none; width: 648px; }
html[data-bp="mbp"] .custom__copy p { width: 374px; }
html[data-bp="mbp"] .custom__media { flex: none; width: 364.5px; }
html[data-bp="mbp"] .custom__media--capture .fg { left: 7.5%; top: 7.47%; width: 85.09%; height: 85.05%; }

/* ---------- 10b. Fitting insights (2122:5064) ---------- */
html[data-bp="mbp"] .insights__head { justify-content: flex-start; gap: 226px; }
html[data-bp="mbp"] .insights__title { flex: 1 1 0; min-width: 0; }
html[data-bp="mbp"] .insights__title h2 { white-space: normal; }   /* 2 lines */
html[data-bp="mbp"] .sim__head { align-items: flex-end; }
html[data-bp="mbp"] .sim__stats { width: 463px; }
html[data-bp="mbp"] .sim__plot { height: 320px; --bars: 230px; }
html[data-bp="mbp"] .sim__value { font-size: 85px; line-height: 85px; }

/* ---------- 11. Data (2014:3211) ---------- */
html[data-bp="mbp"] .data { height: 670px; }
html[data-bp="mbp"] .tile--lime .tile__text { width: 100%; }
/* titles break on two lines in Figma ("Full Data Ownership / & Deletion", "GDPR / Compliant"…) */
html[data-bp="mbp"] .tile h3 { margin: 0 auto; }
html[data-bp="mbp"] .tile--lime h3  { max-width: 230px; }
html[data-bp="mbp"] .tile--dark h3  { max-width: 130px; }
html[data-bp="mbp"] .tile--sage h3  { max-width: 130px; }
html[data-bp="mbp"] .tile--green h3 { max-width: 190px; }

/* ---------- 12. Research (2014:3255) ---------- */
html[data-bp="mbp"] .research { height: 604px; padding: 0 60px; gap: 60px; }
html[data-bp="mbp"] .research__blocks { width: 581px; }
html[data-bp="mbp"] .research__blocks div:first-child { width: 410px; height: 604px; }
html[data-bp="mbp"] .research__blocks div:last-child { width: 156px; height: 191px; }
html[data-bp="mbp"] .research__copy { width: 633px; }
html[data-bp="mbp"] .research__paras { font-size: 24px; line-height: 28px; letter-spacing: 0; }

/* ---------- 13. Footer (2014:3268) ---------- */
/* city 783 + 3 × 236 columns overflow the 1452 content box in Figma; keep the
   column positions (813 / 1049 / 1284) by narrowing only the last column */
html[data-bp="mbp"] .footer__city { flex: none; }
html[data-bp="mbp"] .footer__col:last-child { width: 198px; }

/* ---------- Book a demo page (book-a-demo.html, Figma 2142:4950) ---------- */
html[data-bp="mbp"] .demo__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 3 rows of 2 fields */