/* iPad Pro 11" portrait (834px canvas, Figma 141:10027 → content 141:10100)
   Overrides of the base (iMac) styles in index.html. Every selector is prefixed
   html[data-bp="ipad-p"]; values are Figma px for this canvas. */

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

/* ---------- 1. Hero (141:10029) ---------- */
html[data-bp="ipad-p"] .hero { height: 1071px; gap: 60px; justify-content: space-between; }   /* nav top, text bottom (2089:1547) */
/* darkening at the bottom so the white text reads on the photo */
html[data-bp="ipad-p"] .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55.322%, rgba(0,0,0,.5) 80.431%); }
/* portrait image (assets/ipad-p/hero-portrait.jpg, via <source>) is pre-cropped to the frame */
html[data-bp="ipad-p"] .hero__bg img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
html[data-bp="ipad-p"] .nav {
  height: 46px;
  align-items: center;
  padding: 5px 5px 5px 20px;
  border-radius: 8px;
  background: rgba(255,255,255,.7);
}
html[data-bp="ipad-p"] .nav__links,
html[data-bp="ipad-p"] .nav__cta { display: none; }
html[data-bp="ipad-p"] .nav__logo { width: auto; }
html[data-bp="ipad-p"] .nav__logo svg { width: 91px; height: 15.447px; }
html[data-bp="ipad-p"] .nav__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  background: var(--green);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
html[data-bp="ipad-p"] .nav__burger img { width: 16px; height: 10.539px; }
html[data-bp="ipad-p"] .hero__content { width: 423px; }
html[data-bp="ipad-p"] .hero__text { gap: 20px; }
html[data-bp="ipad-p"] .hero__text h1 { color: var(--white); }     /* line break after "reimagined": <br> in the HTML */
html[data-bp="ipad-p"] .hero__text p { color: rgba(255,255,255,.7); }

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

/* ---------- 3. Statement (141:10112) ---------- */
html[data-bp="ipad-p"] .statement { height: 675px; }
html[data-bp="ipad-p"] .statement__inner { width: 774px; }
html[data-bp="ipad-p"] .statement h2 br { display: none; }   /* text runs on after "data-driven." */
html[data-bp="ipad-p"] .statement h2 .muted::before { content: " "; }

/* ---------- 4. Face scan (144:10208) ---------- */
html[data-bp="ipad-p"] .facescan { height: 710px; }
html[data-bp="ipad-p"] .facescan p { width: 425px; }

/* ---------- 5. Steps (146:10261) — 2 × 2 grid ---------- */
html[data-bp="ipad-p"] .steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 20px;
  padding: 15px 30px 0;
}
html[data-bp="ipad-p"] .step__media { height: 375px; }
html[data-bp="ipad-p"] .step .card { display: flex; flex-direction: column; }   /* content top-aligned, not centred by <button> */
html[data-bp="ipad-p"] .step__inner { width: 338px; height: auto; justify-content: flex-start; gap: 40px; }
html[data-bp="ipad-p"] .step__desc > p { width: 307px; }
html[data-bp="ipad-p"] .step .card[aria-expanded="true"] { height: 386px; }   /* open variant 395:1869 */

/* ---------- 6. What is measured (232:1958) — stacked ---------- */
html[data-bp="ipad-p"] .measured { height: 1285px; flex-direction: column; }
html[data-bp="ipad-p"] .measured__left { flex: 0 0 385px; }   /* text block (232:1959), centred */
html[data-bp="ipad-p"] .measured__right { flex: 0 0 900px; padding: 15px; }
html[data-bp="ipad-p"] .measured__face img { left: 0; top: 0; width: 100%; height: 100%; }

/* ---------- 7. Channels (146:10486) ---------- */
html[data-bp="ipad-p"] .channels { height: 698px; }
html[data-bp="ipad-p"] .channels__title h2 { width: 520px; }   /* Figma breaks after "intelligence," */
html[data-bp="ipad-p"] .channels__cards { height: 328px; gap: 10px; }
html[data-bp="ipad-p"] .channel__pill {
  padding: 6px 14px;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0;
  font-weight: var(--book);
}
html[data-bp="ipad-p"] .channel__toggle { width: 26px; height: 26px; background: var(--page); }
html[data-bp="ipad-p"] .channel__toggle img { width: 10px; height: 10px; }
html[data-bp="ipad-p"] .channel__text { font-size: 28px; line-height: 34px; letter-spacing: -0.56px; transition: opacity .3s ease; }
/* Figma (146:10564/5) squeezes both photos a little; here they keep their ratio, same centre */
html[data-bp="ipad-p"] .channel--online .channel__bg img { left: 0; top: -12.80%; width: 100%; }
html[data-bp="ipad-p"] .channel--store .channel__bg img { left: -49.32%; top: -27.11%; width: 198.61%; }
/* open state (141:9959 / 141:9984): description + chips sit at the bottom, title hidden */
html[data-bp="ipad-p"] .channel__more {
  position: absolute;
  left: 30px;
  right: 30px;
  width: auto;
  font-size: 15px;
  line-height: 22px;
}
html[data-bp="ipad-p"] .channel--store .channel__more { bottom: 123px; }
html[data-bp="ipad-p"] .channel--online .channel__more { bottom: 84px; }
html[data-bp="ipad-p"] .channel--reveal:is(:hover, :focus-visible, .is-open) .channel__text { opacity: 0; }
html[data-bp="ipad-p"] .channel__chip { position: absolute; bottom: 30px; left: 30px; height: 34px; padding: 0 10px; }
html[data-bp="ipad-p"] .channel--online .channel__chip:nth-child(3) { left: 81px; }
html[data-bp="ipad-p"] .channel__chip--app {
  height: auto;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  background: none;
  border-radius: 0;
}
html[data-bp="ipad-p"] .channel__chip-label {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 7px 0 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.7);
  font-size: 15px;
  line-height: 22px;
}
html[data-bp="ipad-p"] .store-badge--android { width: 146px; }
html[data-bp="ipad-p"] .store-badge--android > img { flex: none; width: 76px; height: 12px; }

/* ---------- 8. Flow (334:1168) — image above text card ---------- */
html[data-bp="ipad-p"] .getmeasured { height: 1071px; padding: 30px; flex-direction: column; }
html[data-bp="ipad-p"] .getmeasured__copy { height: 296px; }
html[data-bp="ipad-p"] #flow-1 h2 br,
html[data-bp="ipad-p"] #flow-3 p br { display: none; }

/* ---------- 9. Use cases (146:10678) — horizontal carousel ---------- */
html[data-bp="ipad-p"] .cases { height: 1066px; gap: 90px; }
html[data-bp="ipad-p"] .cases__head {
  display: grid;
  grid-template-columns: 627px auto;
  justify-content: space-between;
  row-gap: 30px;
}
html[data-bp="ipad-p"] .cases__head .tag { grid-area: 1 / 1; justify-self: start; }
html[data-bp="ipad-p"] .cases__head h2 { grid-area: 2 / 1; }
html[data-bp="ipad-p"] .cases__nav { grid-area: 2 / 2; align-self: end; display: flex; gap: 15px; }
html[data-bp="ipad-p"] .cases__nav button { width: 36px; height: 36px; display: block; }
html[data-bp="ipad-p"] .cases__nav img { width: 36px; height: 36px; }
html[data-bp="ipad-p"] .cases__nav .prev img { transform: rotate(90deg); }
html[data-bp="ipad-p"] .cases__nav .next img { transform: rotate(-90deg); }
html[data-bp="ipad-p"] .cases__nav button:disabled { opacity: .3; cursor: default; }
html[data-bp="ipad-p"] .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-p"] .cases__row::-webkit-scrollbar { display: none; }
html[data-bp="ipad-p"] .case { flex: none; scroll-snap-align: start; }
html[data-bp="ipad-p"] .case--a { width: 608px; padding-left: 30px; }
html[data-bp="ipad-p"] .case--b { width: 480px; scroll-margin-left: 30px; }
html[data-bp="ipad-p"] .case--c { width: 510px; padding-right: 30px; scroll-margin-left: 30px; }
html[data-bp="ipad-p"] .case .card { flex: none; height: 248px; }
html[data-bp="ipad-p"] .case__body { height: 100%; justify-content: space-between; }
html[data-bp="ipad-p"] .case--b .case__body,
html[data-bp="ipad-p"] .case--c .case__body { width: 420px; }
html[data-bp="ipad-p"] .case--b .case__media > img { left: -6.49%; top: -24.26%; width: 175.44%; height: 148.81%; }
html[data-bp="ipad-p"] .case--c .case__media > img { left: -7.07%; top: -3.16%; width: 114.03%; height: 121.36%; }

/* ---------- 10. Custom fit (251:715) — stacked ---------- */
html[data-bp="ipad-p"] .custom { height: auto; padding: 0; flex-direction: column; }
html[data-bp="ipad-p"] .custom__left { flex: none; padding: 60px 30px 60px 60px; justify-content: flex-start; }
html[data-bp="ipad-p"] .custom__copy { width: 744px; }
html[data-bp="ipad-p"] .custom__copy h2 br { display: none; }   /* single line in Figma */
html[data-bp="ipad-p"] .custom__copy p { width: 744px; color: rgba(255,255,255,.5); }
html[data-bp="ipad-p"] .custom__right { flex: none; padding: 0 30px 30px; }
html[data-bp="ipad-p"] .custom__row { flex: none; height: 293px; }
html[data-bp="ipad-p"] .custom__media { flex: 0 0 350px; }
html[data-bp="ipad-p"] .custom__card { flex: 1 1 0; }
html[data-bp="ipad-p"] .custom__media--capture .fg { left: 6.21%; top: 10.38%; width: 86.21%; height: 79.24%; }

/* ---------- 10b. Fitting insights (2142:2002) — stacked ---------- */
html[data-bp="ipad-p"] .insights { padding-top: 60px; }
/* title, then intro below it, in a 589 px column */
html[data-bp="ipad-p"] .insights__head { flex-direction: column; align-items: flex-start; gap: 31.405px; padding-right: 215px; }
html[data-bp="ipad-p"] .insights__title h2 { white-space: normal; font-size: 56px; line-height: 64px; letter-spacing: -1.12px; }
html[data-bp="ipad-p"] .insights__intro { width: auto; }
html[data-bp="ipad-p"] .sim { gap: 60px; }
html[data-bp="ipad-p"] .sim__head { flex-direction: column; align-items: stretch; gap: 60px; }
html[data-bp="ipad-p"] .sim__opt { flex: 1 1 0; min-width: 0; }   /* toggle full width, two equal halves */
/* chart, then the legend (centred, 30 px below), then the result under a grey line */
html[data-bp="ipad-p"] .sim__body { display: contents; }
html[data-bp="ipad-p"] .sim__chart { flex: none; justify-content: flex-start; }
html[data-bp="ipad-p"] .sim__plot { height: 300px; --bars: 210px; }
html[data-bp="ipad-p"] .sim__legend { order: 1; margin-top: -30px; align-self: center; }
/* result: figure + badge on the left, sentences on the right */
html[data-bp="ipad-p"] .sim__stats {
  order: 2;
  width: auto;
  padding: 60px 0 0;
  border-left: 0;
  border-top: 1px solid var(--grey);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 60px;
  row-gap: 15px;
  align-items: center;
}
html[data-bp="ipad-p"] .sim__figure { grid-area: 1 / 1; }
html[data-bp="ipad-p"] .sim__delta { grid-area: 2 / 1; justify-self: start; }
html[data-bp="ipad-p"] .sim__copy { grid-area: 1 / 2 / 3 / 3; }
html[data-bp="ipad-p"] .sim__value { font-size: 85px; line-height: 85px; }
html[data-bp="ipad-p"] .benefits { flex-direction: column; gap: 15px; }
html[data-bp="ipad-p"] .benefit { flex: none; padding: 30px 145px 40px 30px; }
html[data-bp="ipad-p"] .insights__note { white-space: nowrap; }   /* one line, as in Figma (runs 12 px into the right margin) */

/* ---------- 11. Data (146:11044) — stacked tiles ---------- */
html[data-bp="ipad-p"] .data { height: auto; }
html[data-bp="ipad-p"] .data h2 { white-space: normal; width: 383px; }
html[data-bp="ipad-p"] .data__tiles { flex-direction: column; }
html[data-bp="ipad-p"] .tile { flex: none; }
html[data-bp="ipad-p"] .tile--sage .body16 { max-width: 410px; margin: 0 auto; }   /* breaks after "keys," */

/* ---------- 12. Research (312:1257) — copy above the blocks ---------- */
html[data-bp="ipad-p"] .research {
  height: auto;
  padding: 30px;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 120px;
}
html[data-bp="ipad-p"] .research__blocks { width: 100%; height: 809px; }
html[data-bp="ipad-p"] .research__blocks div:first-child { width: 549px; height: 809px; }
html[data-bp="ipad-p"] .research__blocks div:last-child { width: 210px; height: 256px; }
html[data-bp="ipad-p"] .research__right { display: block; }
html[data-bp="ipad-p"] .research__copy { width: 774px; }
html[data-bp="ipad-p"] .research__paras { font-size: 24px; line-height: 28px; letter-spacing: 0; }

/* ---------- 13. Footer (146:11180) ---------- */
html[data-bp="ipad-p"] .footer__cta { padding: 150px 0; gap: 30px; }
html[data-bp="ipad-p"] .footer__cta .center-title { gap: 20px; }
html[data-bp="ipad-p"] .footer__cta .tag { padding: 6px 14px; }
html[data-bp="ipad-p"] .footer__cta h2 { width: 774px; }
html[data-bp="ipad-p"] .footer__cta h2 br { display: none; }
html[data-bp="ipad-p"] .footer__cta h2 span::before { content: " "; }
html[data-bp="ipad-p"] .footer__main { height: 400px; }
html[data-bp="ipad-p"] .footer__info { flex-wrap: wrap; gap: 60px; padding-top: 30px; }
html[data-bp="ipad-p"] .footer__city { flex: 0 0 100%; width: auto; letter-spacing: -0.8px; }
html[data-bp="ipad-p"] .footer__col { width: 218px; gap: 10px; }
html[data-bp="ipad-p"] .footer__bottom svg { width: 106px; height: 17.99px; }
html[data-bp="ipad-p"] .footer__top { margin-bottom: 0; }
/* open-state description is a single paragraph in Figma */
html[data-bp="ipad-p"] .channel__more p { display: inline; }
html[data-bp="ipad-p"] .channel__more p + p::before { content: " "; }

/* ---------- Book a demo page (book-a-demo.html, Figma 2142:5131) — stacked, 90 px apart ---------- */
html[data-bp="ipad-p"] .page--demo { gap: 90px; }
html[data-bp="ipad-p"] .demo-head { padding: 30px 30px 0; }
html[data-bp="ipad-p"] .demo { flex-direction: column; gap: 90px; }
html[data-bp="ipad-p"] .demo__copy h1 { font-size: 56px; line-height: 64px; letter-spacing: -1.12px; }   /* not the 40/46 .display */
html[data-bp="ipad-p"] .demo__social { flex-direction: row; gap: 20px; }
html[data-bp="ipad-p"] .demo__form { flex: none; align-self: stretch; }
html[data-bp="ipad-p"] .demo__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 3 rows of 2 fields */