/* iPad Pro 11" landscape (1194px canvas, Figma 395:724)
   Overrides of the base (iMac) styles in index.html. Every selector is prefixed
   html[data-bp="ipad-l"]; values are Figma px for this canvas.
   Note: the Figma frame starts with a 138px Safari chrome mock-up (IMG_0667), ignored here. */

html[data-bp="ipad-l"] .page { gap: 60px; }
html[data-bp="ipad-l"] .display { font-size: 40px; line-height: 46px; letter-spacing: -0.8px; }

/* ---------- 1. Hero (2014:3463) ---------- */
html[data-bp="ipad-l"] .hero { height: 696px; gap: 0; }
html[data-bp="ipad-l"] .hero__bg {
  background: linear-gradient(180deg,
    rgb(215, 227, 242) 0%,
    rgb(227, 234, 246) 15.385%,
    rgb(234, 238, 246) 28.365%,
    rgb(244, 246, 247) 48.077%,
    rgb(245, 247, 247) 66.346%,
    rgb(244, 247, 246) 81.731%,
    rgb(238, 245, 244) 100%);
}
html[data-bp="ipad-l"] .hero__bg img { left: 2.17%; top: 0.03%; width: 134.75%; height: 122.92%; }
html[data-bp="ipad-l"] .nav__cta { width: 143px; justify-content: flex-end; }
html[data-bp="ipad-l"] .hero__content { flex: 1 1 0; min-height: 0; justify-content: center; }
html[data-bp="ipad-l"] .hero__text { gap: 20px; width: 423px; }

/* ---------- 2. Trusted by (395:817) ---------- */
html[data-bp="ipad-l"] .trusted { height: 120px; padding: 0 30px; gap: 60px; justify-content: flex-start; }
html[data-bp="ipad-l"] .trusted__label { padding: 6px 14px; font-size: 14px; line-height: 22px; }
html[data-bp="ipad-l"] .trusted img[alt="Decathlon"] { order: 1; width: 134px; height: 28px; }
html[data-bp="ipad-l"] .trusted img[alt="Jacques Marie Mage"] { order: 2; width: 151px; height: 34px; }
html[data-bp="ipad-l"] .trusted img[alt="Engo"] { order: 3; width: 75px; height: 17.181px; }
html[data-bp="ipad-l"] .trusted img[alt="E.B. Meyrowitz"] { order: 4; width: 127px; height: 34px; }
html[data-bp="ipad-l"] .logo-coperni { order: 5; width: 86px; height: 23px; }
html[data-bp="ipad-l"] .trusted img[alt="Laclarée"] { order: 6; width: 79px; height: 23px; }

/* ---------- 3. Statement (395:836) ---------- */
html[data-bp="ipad-l"] .statement { height: 500px; }
html[data-bp="ipad-l"] .statement__inner { width: 1134px; }
html[data-bp="ipad-l"] .statement h2 br { display: none; }
html[data-bp="ipad-l"] .statement h2 .muted::before { content: " "; }

/* ---------- 4. Face scan (395:954) ---------- */
html[data-bp="ipad-l"] .facescan { height: 696px; }

/* ---------- 5. Steps (395:1245) ---------- */
html[data-bp="ipad-l"] .steps { padding: 15px 30px 0; }
html[data-bp="ipad-l"] .step__media { height: auto; aspect-ratio: 379 / 372; }
html[data-bp="ipad-l"] .step__inner { width: 100%; }
html[data-bp="ipad-l"] .step .sub24 br { display: none; }
/* open state: no Figma variant at this size; each card grows to fit its paragraph (30 + text + 20 + 26 + 30) */
html[data-bp="ipad-l"] .step:nth-child(1) .card[aria-expanded="true"],
html[data-bp="ipad-l"] .step:nth-child(3) .card[aria-expanded="true"] { height: 442px; }
html[data-bp="ipad-l"] .step:nth-child(2) .card[aria-expanded="true"] { height: 466px; }
html[data-bp="ipad-l"] .step:nth-child(4) .card[aria-expanded="true"] { height: 318px; }

/* ---------- 6. What is measured (395:1594) ---------- */
html[data-bp="ipad-l"] .measured { height: 1242px; flex-direction: column; }
html[data-bp="ipad-l"] .measured__left { flex: 0 0 426px; }
html[data-bp="ipad-l"] .measured__right {
  flex: 0 0 816px;
  padding: 12.5px 15px;          /* panel 791 px tall, as in Figma (room for "25+ more…") */
  justify-content: space-between;
}
html[data-bp="ipad-l"] .measured__face { flex: 0 0 773px; }
html[data-bp="ipad-l"] .measured__face img { left: 5.36%; top: 6.34%; width: 87.27%; height: 87.27%; }
html[data-bp="ipad-l"] .measured__copy { width: 466px; }

/* ---------- 7. Channels (395:1693) ---------- */
html[data-bp="ipad-l"] .channels { height: 696px; }
html[data-bp="ipad-l"] .channels__title { flex: 0 0 309px; }
html[data-bp="ipad-l"] .channels__cards { height: 328px; gap: 11px; }
html[data-bp="ipad-l"] .channel {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-rows: auto 1fr auto auto;
  column-gap: 5px;
}
html[data-bp="ipad-l"] .channel__top,
html[data-bp="ipad-l"] .channel__pills { display: contents; }
html[data-bp="ipad-l"] .channel__pill {
  grid-area: 1 / 1 / 2 / 4;
  justify-self: start;
  padding: 6px 14px;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0;
  font-weight: var(--book);
}
html[data-bp="ipad-l"] .channel__toggle { grid-area: 1 / 4; width: 26px; height: 26px; background: var(--page); }
html[data-bp="ipad-l"] .channel__toggle img { width: 10px; height: 10px; }
html[data-bp="ipad-l"] .channel__text {
  grid-area: 3 / 1 / 5 / -1;
  align-self: end;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.56px;
  transition: opacity .35s var(--ease);
}
html[data-bp="ipad-l"] .channel__more {
  grid-area: 3 / 1 / 4 / -1;
  width: auto;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 22px;
}
html[data-bp="ipad-l"] .channel__more p { display: inline; }
html[data-bp="ipad-l"] .channel__more p + p::before { content: " "; }
html[data-bp="ipad-l"] .channel__chip {
  grid-row: 4;
  justify-self: start;
  height: 34px;
  padding: 0 10px;
}
html[data-bp="ipad-l"] .channel--online .channel__chip:nth-child(2) { grid-column: 1; }
html[data-bp="ipad-l"] .channel--online .channel__chip:nth-child(3) { grid-column: 2; }
html[data-bp="ipad-l"] .channel__chip--app {
  grid-column: 1 / -1;
  height: auto;
  padding: 0;
  background: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  font-size: 15px;
  line-height: 22px;
}
html[data-bp="ipad-l"] .channel__chip-label {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 7px 0 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.7);
}
html[data-bp="ipad-l"] .store-badge--android { width: 146px; }
html[data-bp="ipad-l"] .channel--store .channel__bg img { left: -38.38%; top: -51.03%; width: 176.77%; }   /* Figma 395:1700 */
html[data-bp="ipad-l"] .channel--online .channel__bg img { left: 0; top: -20.30%; width: 100%; }        /* Figma 395:1701 */
html[data-bp="ipad-l"] .channel--reveal:is(:hover, :focus-visible, .is-open) .channel__text { opacity: 0; }

/* ---------- 8. Flow (2014:3694, state "Recommend") ---------- */
html[data-bp="ipad-l"] .getmeasured { height: 696px; }
html[data-bp="ipad-l"] .getmeasured__copy { width: 549px; height: 296px; padding: 0 60px; }
html[data-bp="ipad-l"] .getmeasured__text { padding: 0 30px; }
html[data-bp="ipad-l"] .getmeasured__text p br { display: none; }

/* ---------- 9. Use cases (2014:4006) — horizontal carousel ---------- */
html[data-bp="ipad-l"] .cases { height: 990px; gap: 90px; }
html[data-bp="ipad-l"] .cases__head {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 60px;
  row-gap: 30px;
  align-items: end;
}
html[data-bp="ipad-l"] .cases__head .tag { justify-self: start; }
html[data-bp="ipad-l"] .cases__head h2 { grid-column: 1; }
html[data-bp="ipad-l"] .cases__nav { grid-area: 2 / 2; display: flex; gap: 15px; align-items: center; }
html[data-bp="ipad-l"] .cases__nav button { width: 36px; height: 36px; display: block; }
html[data-bp="ipad-l"] .cases__nav img { width: 36px; height: 36px; }
html[data-bp="ipad-l"] .cases__nav .prev img { transform: rotate(90deg); }
html[data-bp="ipad-l"] .cases__nav button:disabled { opacity: .3; cursor: default; }
html[data-bp="ipad-l"] .cases__nav .next img { transform: rotate(-90deg); }
html[data-bp="ipad-l"] .cases__row {
  flex: 0 0 688px;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html[data-bp="ipad-l"] .cases__row::-webkit-scrollbar { display: none; }
html[data-bp="ipad-l"] .case { flex: none; scroll-snap-align: start; }
html[data-bp="ipad-l"] .case--a { width: 608px; padding-left: 30px; scroll-margin-left: 0; }
html[data-bp="ipad-l"] .case--b { width: 480px; scroll-margin-left: 30px; }
html[data-bp="ipad-l"] .case--c { width: 510px; padding-right: 30px; scroll-margin-left: 30px; }
html[data-bp="ipad-l"] .cases .card { flex: 0 0 248px; }
html[data-bp="ipad-l"] .case__body { height: 100%; justify-content: space-between; gap: 0; }
html[data-bp="ipad-l"] .case--b .case__body,
html[data-bp="ipad-l"] .case--c .case__body { width: 420px; }
html[data-bp="ipad-l"] .case--b .case__media > img { left: -6.44%; top: -24.31%; width: 175.58%; height: 148.72%; }
html[data-bp="ipad-l"] .case--c .case__media > img { left: -7.02%; top: -3.19%; width: 114.03%; height: 121.31%; }

/* ---------- 10. Custom fit (2014:4057) ---------- */
html[data-bp="ipad-l"] .custom { height: 966px; }
html[data-bp="ipad-l"] .custom__left { flex: 0 0 494px; padding: 0 60px; }
html[data-bp="ipad-l"] .custom__copy p { width: 374px; }
html[data-bp="ipad-l"] .custom__right { flex: 0 0 640px; }
html[data-bp="ipad-l"] .custom__media { flex: 0 0 283px; }
html[data-bp="ipad-l"] .custom__card { flex: 0 0 342px; }
html[data-bp="ipad-l"] .custom__media--capture .fg { left: 8.67%; top: 19.17%; width: 82.65%; height: 61.66%; }

/* ---------- 10b. Fitting insights (2142:2818) ---------- */
html[data-bp="ipad-l"] .insights__head { justify-content: flex-start; gap: 120px; }
html[data-bp="ipad-l"] .insights__title { flex: 1 1 0; min-width: 0; }
/* the title keeps the iMac 56/64 here, not this device's 40/46 .display */
html[data-bp="ipad-l"] .insights__title h2 { white-space: normal; font-size: 56px; line-height: 64px; letter-spacing: -1.12px; }
html[data-bp="ipad-l"] .sim__head { align-items: flex-end; }
html[data-bp="ipad-l"] .sim__stats { width: 463px; }
html[data-bp="ipad-l"] .sim__plot { height: 320px; --bars: 230px; }
html[data-bp="ipad-l"] .sim__value { font-size: 85px; line-height: 85px; }

/* ---------- 11. Data (2014:4146) ---------- */
html[data-bp="ipad-l"] .data { height: 694px; }
html[data-bp="ipad-l"] .tile--lime .tile__text { width: 100%; }
html[data-bp="ipad-l"] .tile .body16 br { display: none; }

/* ---------- 12. Research (2014:4203) ---------- */
html[data-bp="ipad-l"] .research { height: 604px; padding: 0 30px; gap: 60px; }
html[data-bp="ipad-l"] .research__blocks { width: 581px; justify-content: flex-start; gap: 15px; }
html[data-bp="ipad-l"] .research__blocks div:first-child { width: 410px; height: 604px; }
html[data-bp="ipad-l"] .research__blocks div:last-child { width: 156px; height: 191px; }
html[data-bp="ipad-l"] .research__copy { width: 100%; }
html[data-bp="ipad-l"] .research__paras { font-size: 24px; line-height: 28px; letter-spacing: 0; }

/* ---------- 13. Footer (2014:4216) ---------- */
html[data-bp="ipad-l"] .footer__city { width: 491px; }
html[data-bp="ipad-l"] .footer .display { font-size: 56px; line-height: 64px; letter-spacing: -1.12px; }

/* ---------- Book a demo page (book-a-demo.html, Figma 2142:5332) — form below the text ---------- */
html[data-bp="ipad-l"] .demo { flex-direction: column; gap: 60px; }
/* the title keeps the iMac 56/64 here, not this device's 40/46 .display */
html[data-bp="ipad-l"] .demo__copy h1 { font-size: 56px; line-height: 64px; letter-spacing: -1.12px; }
html[data-bp="ipad-l"] .demo__social { flex-direction: row; gap: 20px; }
html[data-bp="ipad-l"] .demo__form { flex: none; align-self: stretch; }
