/* iPhone (393px canvas, Figma 121:7023)
   Overrides of the base (iMac) styles in index.html. Every selector is prefixed
   html[data-bp="phone"]; values are Figma px for this canvas. */

/* ---------- Page & shared type ---------- */
html[data-bp="phone"] .page { gap: 60px; }
html[data-bp="phone"] .display { font-size: 28px; line-height: 34px; letter-spacing: -0.56px; }
html[data-bp="phone"] .mono { font-size: 14px; line-height: 22px; }
html[data-bp="phone"] .body16 { font-size: 15px; line-height: 22px; }
html[data-bp="phone"] .sub24 { font-size: 20px; line-height: 24px; }
html[data-bp="phone"] .tag { padding: 6px 14px; }
html[data-bp="phone"] .tag--lg { padding: 6px 14px; font-size: 14px; line-height: 22px; }

/* ---------- 1. Hero ---------- */
html[data-bp="phone"] .hero { height: 665px; padding: 15px 15px 30px; gap: 30px; justify-content: space-between; }   /* nav top, text bottom (2089:1521) */
/* darkening at the bottom so the white text reads on the photo */
html[data-bp="phone"] .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 54.732%, rgba(0,0,0,.4) 77.342%); }
html[data-bp="phone"] .hero__bg img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
html[data-bp="phone"] .nav {
  align-items: center;
  height: 46px;
  padding: 5px 5px 5px 20px;
  border-radius: 8px;
  background: rgba(255,255,255,.7);
}
html[data-bp="phone"] .nav__logo { width: auto; }
html[data-bp="phone"] .nav__logo svg { width: 91px; height: 15.448px; }
html[data-bp="phone"] .nav__links,
html[data-bp="phone"] .nav__cta { display: none; }
html[data-bp="phone"] .nav__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  background: var(--green);
}
html[data-bp="phone"] .nav__burger img { width: 16px; height: 10.539px; }
html[data-bp="phone"] .hero__content { width: 322px; gap: 30px; }
html[data-bp="phone"] .hero__text { gap: 15px; }
html[data-bp="phone"] .hero__text h1 { color: var(--white); }       /* 28/34 (phone .display) */
html[data-bp="phone"] .hero__text p { display: none; }               /* no paragraph on iPhone (2089:1521) */
html[data-bp="phone"] .hero__actions { gap: 10px; }
html[data-bp="phone"] .btn { font-size: 15px; line-height: 22px; }

/* ---------- 2. Trusted by (static row; overflowing logos are clipped) ---------- */
html[data-bp="phone"] .trusted { height: 120px; padding: 0 15px; gap: 30px; justify-content: flex-start; }
html[data-bp="phone"] .trusted > * { flex: none; }
html[data-bp="phone"] .trusted__label { padding: 6px 14px; }
html[data-bp="phone"] .trusted img[alt="Decathlon"] { order: 1; width: 93px; height: 19px; }
html[data-bp="phone"] .trusted img[alt="Jacques Marie Mage"] { order: 2; width: 104px; height: 24px; }
html[data-bp="phone"] .trusted img[alt="Engo"] { order: 3; width: 52px; height: 12px; }
html[data-bp="phone"] .trusted img[alt="E.B. Meyrowitz"] { order: 4; width: 88px; height: 24px; }
html[data-bp="phone"] .logo-coperni { order: 5; width: 60px; height: 16px; }
html[data-bp="phone"] .trusted img[alt="Laclarée"] { order: 6; width: 56px; height: 16px; }

/* ---------- 3. Statement ---------- */
html[data-bp="phone"] .statement { height: 448px; padding: 0 15px; }
html[data-bp="phone"] .statement__inner { width: 363px; }
html[data-bp="phone"] .statement .u { text-decoration: none; }   /* no underline on phone (Figma 121:7063) */

/* ---------- 4. Face Scan ---------- */
html[data-bp="phone"] .facescan { height: 600px; padding: 30px 15px; border-radius: 0; }   /* square corners on iPhone only (146:11275) */
html[data-bp="phone"] .facescan .center-title { gap: 20px; }
html[data-bp="phone"] .facescan h2 { white-space: normal; }
html[data-bp="phone"] .facescan p { width: 363px; margin-top: -5px; }   /* title → text gap 15 */
html[data-bp="phone"] .facescan__nw { white-space: nowrap; }   /* Figma line breaks */

/* ---------- 5. Steps (stacked; card height follows its content) ---------- */
html[data-bp="phone"] .steps { flex-direction: column; gap: 20px; padding: 15px; }
html[data-bp="phone"] .step { flex: none; width: 100%; gap: 10px; }
html[data-bp="phone"] .step__media { height: 356px; }
html[data-bp="phone"] .step .card,
html[data-bp="phone"] .step .card[aria-expanded="true"] { height: auto; padding: 20px; }
html[data-bp="phone"] .step__inner { width: 100%; height: auto; gap: 30px; justify-content: flex-start; }
html[data-bp="phone"] .step__head { gap: 20px; width: 100%; }
html[data-bp="phone"] .step:first-child .sub24 br { display: none; }
html[data-bp="phone"] .step .card[aria-expanded="true"] .step__desc { margin-top: -10px; }  /* title → text gap 10 (Figma 133:9202) */

/* ---------- 6. What is measured ---------- */
html[data-bp="phone"] .measured { height: auto; flex-direction: column; }
html[data-bp="phone"] .measured .tag,
html[data-bp="phone"] .research .tag { padding: 4px 12px; }
html[data-bp="phone"] .measured__left { flex: none; height: 452px; padding: 0 30px; justify-content: flex-start; }
html[data-bp="phone"] .measured__right { flex: none; flex-direction: column; align-items: stretch; gap: 30px; padding: 15px 15px 14px; }   /* Figma: 801 clipped to 800 by the 1252 section */
html[data-bp="phone"] .measured__face { flex: none; width: 363px; height: 363px; }
html[data-bp="phone"] .measured__face img { left: 0; top: 0; width: 100%; height: 100%; }
html[data-bp="phone"] .panel {
  width: 363px;
  height: auto;
  --acc-mode: collapsible;
  --acc-start: closed;
}
html[data-bp="phone"] .acc { flex: none; min-height: 79.5px; gap: 0; }
html[data-bp="phone"] .acc.is-open { flex-grow: 0; }
/* closed groups = header only; an open group shows its list at its natural height */
html[data-bp="phone"] .acc .panel__list {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  transition: max-height var(--acc-dur) var(--acc-ease), padding var(--acc-dur) var(--acc-ease);
}
html[data-bp="phone"] .acc.is-open .panel__list { max-height: 440px; padding-top: 15px; padding-bottom: 15px; }
/* the General face note: hidden with its group, shown under the list when open */
html[data-bp="phone"] .acc .panel__more { max-height: 0; padding-bottom: 0; overflow: hidden; transition: max-height var(--acc-dur) var(--acc-ease), padding var(--acc-dur) var(--acc-ease), opacity .25s ease; }
html[data-bp="phone"] .acc.is-open .panel__more { max-height: 40px; padding-bottom: 15px; }
html[data-bp="phone"] .panel__label { width: auto; }
html[data-bp="phone"] .panel__row { padding-top: 15px; padding-bottom: 15.5px; }

/* ---------- 7. Channels ---------- */
html[data-bp="phone"] .channels { height: auto; padding: 15px; border-radius: 8px; }
html[data-bp="phone"] .channels__inner { gap: 10px; justify-content: flex-start; }
html[data-bp="phone"] .channels__title { flex: none; height: 320px; gap: 30px; padding-bottom: 30px; }
html[data-bp="phone"] .channels__cards { height: auto; flex-direction: column; gap: 10px; }
html[data-bp="phone"] .channel {
  flex: none;
  height: 327.5px;
  display: grid;
  grid-template-columns: max-content max-content 1fr max-content;
  grid-template-rows: auto 1fr auto auto;
  column-gap: 5px;
}
html[data-bp="phone"] .channel__top,
html[data-bp="phone"] .channel__pills { display: contents; }
html[data-bp="phone"] .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="phone"] .channel__toggle { grid-area: 1 / 4; width: 26px; height: 26px; background: var(--page); }
html[data-bp="phone"] .channel__toggle img { width: 10px; height: 10px; }
html[data-bp="phone"] .channel__text { grid-area: 3 / 1 / 5 / 5; align-self: end; font-size: 28px; line-height: 34px; letter-spacing: -0.56px; transition: opacity .3s ease; }
html[data-bp="phone"] .channel__more { grid-area: 3 / 1 / 4 / 5; width: auto; margin-bottom: 20px; }
html[data-bp="phone"] .channel__more p { display: inline; }
html[data-bp="phone"] .channel__chip { grid-row: 4; height: 34px; padding: 0 10px; transform: translateY(8px); }
html[data-bp="phone"] .channel--online .channel__chip:nth-child(2) { grid-column: 1; }
html[data-bp="phone"] .channel--online .channel__chip:nth-child(3) { grid-column: 2; }
/* photo crops (Figma 141:10006 / 141:10014), ratio kept */
html[data-bp="phone"] .channel--store .channel__bg img { left: -49.32%; top: -23.37%; width: 198.61%; }
html[data-bp="phone"] .channel--online .channel__bg img { left: 0; top: -9.75%; width: 100%; }
/* In-store: label chip, then the store badges on their own line */
html[data-bp="phone"] .channel__chip--app {
  grid-column: 1 / 5;
  justify-self: start;
  height: auto;
  padding: 0;
  background: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  font-size: 15px;
  line-height: 22px;
}
html[data-bp="phone"] .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="phone"] .store-badge--android { width: 146px; }
html[data-bp="phone"] .channel--reveal:is(:hover, :focus-visible, .is-open) .channel__text { opacity: 0; }

/* ---------- 8. Flow (334:1498) — full screen on phone, pinned like on computers: going down, one
   finger swipe = one step; going up, free scroll (see the Digitize → Dispense script). ---------- */
html[data-bp="phone"] .flow { --flow-step: 320; }   /* scroll distance per step (design px): short, quick to cross going up */
/* --flow-screen-h = screen height in design px (set by the script); the photo takes what the card leaves */
html[data-bp="phone"] .getmeasured { height: var(--flow-screen-h, auto); min-height: 560px; padding: 15px; flex-direction: column; gap: 10px; }
html[data-bp="phone"] .getmeasured__media { flex: 1 1 0; min-height: 200px; }   /* photo: object-fit cover, never stretched */
html[data-bp="phone"] .getmeasured__card { flex: none; height: 369px; padding: 40px 20px; }
html[data-bp="phone"] .getmeasured__copy { width: 323px; height: auto; gap: 20px; }
html[data-bp="phone"] .tabs { width: 100%; gap: 0; justify-content: space-between; }
html[data-bp="phone"] .flow__panel { gap: 20px; }
html[data-bp="phone"] .getmeasured__text { gap: 15px; }
html[data-bp="phone"] .getmeasured__text br { display: none; }

/* ---------- 9. Use cases (horizontal scroller) ---------- */
html[data-bp="phone"] .cases { height: auto; padding: 90px 0 0; gap: 40px; }
html[data-bp="phone"] .cases__head { padding: 0 15px; gap: 20px; }
/* prev / next arrows: own row, right-aligned, 40px under the title */
html[data-bp="phone"] .cases__nav { align-self: stretch; display: flex; justify-content: flex-end; gap: 15px; margin-top: 20px; }
html[data-bp="phone"] .cases__nav button { display: block; width: 36px; height: 36px; }
html[data-bp="phone"] .cases__nav button:disabled { opacity: .3; cursor: default; }
html[data-bp="phone"] .cases__nav img { width: 36px; height: 36px; }
html[data-bp="phone"] .cases__nav .prev img { transform: rotate(90deg); }
html[data-bp="phone"] .cases__nav .next img { transform: rotate(-90deg); }
html[data-bp="phone"] .cases__row {
  flex: none;
  height: 545px;
  padding-left: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 15px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
html[data-bp="phone"] .cases__row::-webkit-scrollbar { display: none; }
html[data-bp="phone"] .case { flex: none; width: 323.5px; gap: 10px; scroll-snap-align: start; }
html[data-bp="phone"] .case--a { padding-left: 0; }
html[data-bp="phone"] .case--c { padding-right: 15px; }
html[data-bp="phone"] .case__media { flex: none; height: 325px; padding: 15px; }
html[data-bp="phone"] .case--b .case__media > img { left: -8.23%; top: -20.33%; width: 188.43%; height: 140.67%; }
html[data-bp="phone"] .case--c .case__media > img { left: -11.02%; top: -0.04%; width: 121.89%; height: 108.98%; }
html[data-bp="phone"] .case .card { flex: none; height: 210px; padding: 20px; }
html[data-bp="phone"] .case__body,
html[data-bp="phone"] .case--a .case__body,
html[data-bp="phone"] .case--b .case__body,
html[data-bp="phone"] .case--c .case__body { width: 100%; gap: 30px; }
html[data-bp="phone"] .case__copy .mono { line-height: 22px; }

/* ---------- 10. Custom fit ---------- */
html[data-bp="phone"] .custom { height: auto; padding: 90px 15px 15px; flex-direction: column; gap: 40px; }
html[data-bp="phone"] .custom__left { flex: none; justify-content: flex-start; }
html[data-bp="phone"] .custom__copy { width: 305px; gap: 20px; }
html[data-bp="phone"] .custom__copy h2 { white-space: normal; }
html[data-bp="phone"] .custom__copy p { width: 305px; margin-top: -5px; }
html[data-bp="phone"] .custom__right { flex: none; gap: 20px; }
html[data-bp="phone"] .custom__row { flex: none; flex-direction: column; gap: 10px; }
html[data-bp="phone"] .custom__media { flex: none; height: 356px; }
html[data-bp="phone"] .custom__media--capture .fg { left: 7.44%; top: 16.37%; width: 85.67%; height: 67.36%; }
html[data-bp="phone"] .custom__media--make img { left: -23%; width: 175.72%; height: 100%; object-fit: fill; }
html[data-bp="phone"] .custom__card { flex: none; padding: 20px 20px 30px; gap: 20px; }
html[data-bp="phone"] .custom__card p { margin-top: -10px; }

/* ---------- 10b. Fitting insights (2140:1915) — stacked, card full width ---------- */
html[data-bp="phone"] .insights { gap: 40px; font-size: 15px; line-height: 22px; }   /* legend, chart labels, delta: 15/22 */
html[data-bp="phone"] .insights__head { flex-direction: column; align-items: flex-start; gap: 15px; padding: 0 20px; }
html[data-bp="phone"] .insights__title { gap: 20px; }
html[data-bp="phone"] .insights__title h2 { white-space: normal; }
html[data-bp="phone"] .insights__intro { width: auto; }
html[data-bp="phone"] .insights__main { gap: 30px; }
html[data-bp="phone"] .insights__cards { padding: 0; gap: 60px; }
/* Figma puts this line at x = 0; aligned here with the title and the card contents (20 px) */
html[data-bp="phone"] .insights__note { padding: 0 20px; font-size: 13px; line-height: 22px; }
html[data-bp="phone"] .insights .sub24 { font-size: 22px; line-height: 26px; }
html[data-bp="phone"] .sim { padding: 20px; gap: 60px; }
html[data-bp="phone"] .sim__head { flex-direction: column; align-items: stretch; gap: 60px; }
html[data-bp="phone"] .sim__title { font-size: 22px; line-height: 26px; letter-spacing: 0; white-space: normal; }
html[data-bp="phone"] .sim__toggle { height: 43px; }
html[data-bp="phone"] .sim__opt { height: 35px; padding: 0 9px; font-size: 13px; line-height: 22px; }
/* chart, then the legend (centred, 30 px below), then the result under a grey line */
html[data-bp="phone"] .sim__body { display: contents; }
html[data-bp="phone"] .sim__chart { flex: none; justify-content: flex-start; }
html[data-bp="phone"] .sim__plot { height: 240px; --bars: 150px; }
html[data-bp="phone"] .sim__bars { gap: 2px; }
html[data-bp="phone"] .sim__bar { border-radius: 3px 3px 0 0; }
/* axis: "← Narrower" and "Wider →" on one line, the mono caption centred below */
html[data-bp="phone"] .sim__axis { display: grid; grid-template-columns: 1fr 1fr; row-gap: 15px; }
html[data-bp="phone"] .sim__axis > :first-child { grid-area: 1 / 1; }
html[data-bp="phone"] .sim__axis > :last-child { grid-area: 1 / 2; justify-self: end; }
html[data-bp="phone"] .sim__axis .mono { grid-area: 2 / 1 / 3 / 3; justify-self: center; }
html[data-bp="phone"] .sim__legend { order: 1; margin-top: -30px; align-self: center; }
html[data-bp="phone"] .sim__stats { order: 2; width: auto; padding: 30px 0; border-left: 0; border-top: 1px solid var(--grey); }
html[data-bp="phone"] .sim__value { font-size: 85px; line-height: 85px; }
html[data-bp="phone"] .benefits { flex-direction: column; gap: 15px; }
html[data-bp="phone"] .benefit { flex: none; padding: 20px 20px 30px; }

/* ---------- 11. Data ---------- */
html[data-bp="phone"] .data { height: auto; padding: 0; gap: 60px; }
html[data-bp="phone"] .data .center-title { gap: 31.405px; width: 100%; }
html[data-bp="phone"] .data h2 { white-space: normal; }
html[data-bp="phone"] .data h2 .u:last-child { display: block; }
html[data-bp="phone"] .data__tiles { flex-direction: column; }
html[data-bp="phone"] .tile { flex: none; height: 213px; padding: 30px 20px; gap: 20px; justify-content: center; }
html[data-bp="phone"] .tile--lime { justify-content: flex-start; }
/* icon frames are 23x30 (cloud 31x30) on phone; the 35x35 SVGs draw from their top-left corner */
html[data-bp="phone"] .tile img { width: 23px; height: 30px; object-fit: none; object-position: 0 0; }
html[data-bp="phone"] .tile--lime img { object-position: 0 2px; }
html[data-bp="phone"] .tile--sage img { object-position: 0 .5px; }
html[data-bp="phone"] .tile--green img { width: 31px; object-position: 0 4px; }
html[data-bp="phone"] .tile--lime .tile__text { width: 100%; }
html[data-bp="phone"] .tile--sage .body16 { letter-spacing: 0; }

/* ---------- 12. Research ---------- */
html[data-bp="phone"] .research { height: auto; padding: 15px; flex-direction: column-reverse; gap: 60px; align-items: stretch; }
html[data-bp="phone"] .research__blocks { width: 100%; height: 373px; }
html[data-bp="phone"] .research__blocks div:first-child { width: 252px; height: 373px; }
html[data-bp="phone"] .research__blocks div:last-child { width: 96px; height: 117.55px; }
html[data-bp="phone"] .research__right { justify-content: flex-start; }
html[data-bp="phone"] .research__copy { width: 363px; }
html[data-bp="phone"] .research__paras { margin-top: -15px; font-size: 22px; line-height: 26px; letter-spacing: 0; }

/* ---------- 13. Footer ---------- */
html[data-bp="phone"] .footer { padding: 15px; }
html[data-bp="phone"] .footer__cta { padding: 150px 0; gap: 30px; }
html[data-bp="phone"] .footer__cta .center-title { gap: 20px; }
html[data-bp="phone"] .footer__cta h2 { width: 363px; }
html[data-bp="phone"] .footer__main { height: auto; gap: 120px; justify-content: flex-start; }
html[data-bp="phone"] .footer__info {
  display: grid;
  grid-template-columns: 181.5px 181.5px;
  row-gap: 45px;
  padding-top: 29px;
}
html[data-bp="phone"] .footer__city { grid-column: 1 / -1; width: auto; margin-bottom: 15px; font-size: 28px; line-height: 34px; letter-spacing: -0.56px; }
html[data-bp="phone"] .footer__city span { width: auto; }
html[data-bp="phone"] .footer__col { width: auto; gap: 10px; }
html[data-bp="phone"] .footer__col[aria-label="Visages"] { grid-area: 2 / 1; }
html[data-bp="phone"] .footer__col[aria-label="Contact"] { grid-area: 2 / 2; }
html[data-bp="phone"] .footer__col[aria-label="Social media"] { grid-area: 3 / 1; }
html[data-bp="phone"] .footer__bottom { align-items: center; }
html[data-bp="phone"] .footer__bottom svg { width: 106px; height: 17.99px; }
html[data-bp="phone"] .footer__top { margin-bottom: 0; }

/* ---------- Book a demo page (book-a-demo.html, Figma 2142:6253) — stacked, form full width ---------- */
html[data-bp="phone"] .demo-head { padding: 20px 20px 0; }
html[data-bp="phone"] .demo { flex-direction: column; gap: 60px; padding: 0; }
html[data-bp="phone"] .demo__intro { width: auto; align-self: stretch; padding: 0 20px; gap: 30px; }
html[data-bp="phone"] .demo__heading { gap: 20px; }
html[data-bp="phone"] .demo__copy { gap: 15px; }
html[data-bp="phone"] .demo__social { flex-direction: row; gap: 20px; }
html[data-bp="phone"] .demo__social a { font-size: 15px; line-height: 20px; }   /* Mono 15/20 in Figma, not the phone 14/22 */
html[data-bp="phone"] .demo__form { flex: none; align-self: stretch; padding: 20px; border-radius: 0; }
html[data-bp="phone"] .demo__label--lg { font-size: 14px; line-height: 22px; }
html[data-bp="phone"] .demo__fields { grid-template-columns: minmax(0, 1fr); gap: 20px; }   /* one field per row */
html[data-bp="phone"] .field input,
html[data-bp="phone"] .field select,
html[data-bp="phone"] .demo__form textarea { height: 48px; font-size: 15px; line-height: 22px; }
html[data-bp="phone"] .demo__form textarea { height: 100px; }
html[data-bp="phone"] .chips { gap: 10px; }
html[data-bp="phone"] .chip span { font-size: 15px; line-height: 22px; }
html[data-bp="phone"] .consent { padding-right: 55px; }